/* Just-Jame Project OS - jjs-studio.css (v65)
   Styles for the Studio System V2 additions (js/studio.js): Board, Team, Docs, SOPs, delivery tracks,
   giving tasks and the Editor level. Copied from the V2 prototype modules (x_board, x_team, x_track, x_tasks)
   and scoped so nothing else on the site changes. Black and white; red only for problems, green only for wins. */

.jjs-sx { --display: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif; }
.jjs-sx .sx-top { align-items: flex-end; gap: 12px; margin-top: 6px; }
.jjs-sx .sx-acts { gap: 8px; }
.jjs-proto .chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; border: 1px solid var(--line2); background: var(--surface); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.jjs-proto .chip:hover { border-color: var(--ink); }
.jjs-proto .chip .jjs-ico, .jjs-proto .btn .jjs-ico { width: 15px; height: 15px; }
.jjs-proto a.btn { color: inherit; }
.jjs-proto .cb { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line2); background: #fff; display: grid; place-items: center; padding: 0; flex: none; cursor: pointer; color: #fff; }
.jjs-proto .cb.on { background: var(--good); border-color: var(--good); }
.jjs-proto .cb .jjs-ico { width: 13px; height: 13px; }
.jjs-proto .avs { display: inline-flex; }
.jjs-proto .avs .tm-av { margin-left: -7px; border: 2px solid rgba(255,255,255,.9); }
.jjs-proto .avs .tm-av:first-child { margin-left: 0; }
.sx-inp { border: 1px solid var(--line2, rgba(0,0,0,.16)); border-radius: 999px; padding: 9px 14px; background: var(--surface, #fff); font: inherit; font-size: 13px; min-width: 0; flex: 1 1 200px; }
.sx-inp:focus { outline: 2px solid var(--ink, #0b0b0b); outline-offset: 0; }

/* ---------- tasks: From / For, Got it, status ---------- */
.sx-pill { display: inline-flex; align-items: center; border: 1px solid rgba(0,0,0,.16); border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 700; line-height: 18px; }
.sx-ok { color: var(--good, #12844a); font-weight: 600; }
.sx-taskacts { display: inline-flex; gap: 6px; align-items: center; margin-right: 4px; flex-wrap: wrap; }
.sx-gotit { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; background: #0b0b0b; color: #fff; font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 10px; cursor: pointer; }
.sx-gotit .jjs-ico { width: 13px; height: 13px; }
.sx-stage { border: 1px solid rgba(0,0,0,.16); background: #fff; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 700; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.sx-stage.on { background: #0b0b0b; color: #fff; border-color: #0b0b0b; }
.jjs-task.sx-new { box-shadow: inset 3px 0 0 #0b0b0b; }
.sx-banner { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: #0b0b0b; color: #fff; border-radius: 14px; padding: 10px 14px; font-size: 13px; margin: 10px 0; }
.sx-banner .jjs-ico { width: 16px; height: 16px; }
.sx-grouphead { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #6a6a66); margin: 18px 0 8px; }
.sx-grouphead.bad { color: var(--bad, #cf2a1f); }

/* ---------- project team ---------- */
.sx-headteam { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: 4px; }
.sx-teambtn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(0,0,0,.16); background: rgba(255,255,255,.7); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.sx-teambtn .jjs-ico { width: 14px; height: 14px; }
.sx-people { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; }
.sx-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(0,0,0,.09); border-radius: 12px; cursor: pointer; }
.sx-person.on { border-color: #0b0b0b; }
.sx-person > span:not(.tm-av) { flex: 1; min-width: 0; }
.sx-person b { display: block; font-size: 13.5px; }
.sx-person small { color: var(--muted, #6a6a66); font-size: 11.5px; }
.sx-leadbtn { border: 1px solid rgba(0,0,0,.16); background: #fff; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 700; padding: 3px 10px; cursor: pointer; }
.sx-leadbtn.on { background: #0b0b0b; color: #fff; border-color: #0b0b0b; }
.sx-warn { background: rgba(207,42,31,.08); border: 1px solid rgba(207,42,31,.26); color: #cf2a1f; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.sx-info { display: flex; gap: 8px; align-items: flex-start; background: #f7f7f5; border: 1px dashed rgba(0,0,0,.16); border-radius: 12px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.sx-info a { color: inherit; }

/* ---------- Board (x_board) ---------- */
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.bd-col { background: var(--surface, #fff); border: 1px solid var(--line, rgba(0,0,0,.09)); border-radius: 18px; padding: 14px 14px 10px; border-top: 4px solid rgb(var(--c)); min-width: 0; }
.bd-col header b { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 24px; line-height: 1; letter-spacing: .3px; overflow-wrap: anywhere; }
.bd-col header small { display: block; font-size: 11.5px; color: var(--mute, #6a6a66); margin-top: 4px; overflow-wrap: anywhere; }
.bd-col header .bd-open { display: inline-block; margin-top: 6px; margin-left: 8px; font-size: 11px; }
.bd-auto { margin-top: 10px; padding: 8px 10px; background: var(--soft, #f7f7f5); border-radius: 10px; font-size: 12px; color: var(--mute, #6a6a66); display: grid; gap: 4px; }
.bd-auto .bad { color: var(--bad, #cf2a1f); }
.bd-auto .good { color: var(--good, #12844a); }
.bd-auto .linkbtn { font-size: 12px; color: inherit; text-decoration: underline; padding: 0; text-align: left; font-weight: 500; }
.bd-lines { margin-top: 6px; }
.bd-line { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line, rgba(0,0,0,.09)); }
.bd-lines .bd-line:first-child { border-top: 0; }
.bd-line .cb { flex: 0 0 auto; margin-top: 1px; }
.bd-txt { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.4; }
.bd-txt .tt { all: unset; cursor: pointer; font-weight: 600; overflow-wrap: anywhere; }
.bd-txt .tt:hover { text-decoration: underline; }
.bd-txt .bd-n { overflow-wrap: anywhere; }
.bd-txt b { font-weight: 600; overflow-wrap: anywhere; }
.bd-txt small { display: block; font-size: 11.5px; color: var(--mute, #6a6a66); margin-top: 2px; }
.bd-line.done { opacity: .45; }
.bd-line.done .bd-txt .tt, .bd-line.done .bd-n, .bd-line.done b { text-decoration: line-through; }
.bd-ico { color: var(--faint, #a4a49f); flex: 0 0 auto; margin-top: 2px; }
.bd-ico .jjs-ico { width: 14px; height: 14px; }
.bd-new { flex: 0 0 auto; font-size: 11px; cursor: pointer; border: 0; }
.bd-acts { display: flex; gap: 2px; flex: 0 0 auto; opacity: .55; }
.bd-line:hover .bd-acts, .bd-acts:focus-within { opacity: 1; }
.bd-empty { font-size: 12px; color: var(--faint, #a4a49f); margin: 8px 0; }
.bd-priv { flex: 0 0 auto; border: 1px solid var(--line2, rgba(0,0,0,.16)); background: #fff; border-radius: 999px; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; color: var(--mute, #6a6a66); padding: 0; }
.bd-priv.on { background: var(--ink, #0b0b0b); color: #fff; border-color: var(--ink, #0b0b0b); }
.bd-priv .jjs-ico { width: 15px; height: 15px; }
.bd-filter { overflow-x: auto; max-width: 100%; }
.bd-filter .seg { flex-wrap: nowrap; }
.bd-dot { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid currentColor; flex: 0 0 auto; display: grid; place-items: center; margin-top: 3px; opacity: .6; }
.bd-dot.on { background: var(--good, #12844a); border-color: var(--good, #12844a); color: #fff; opacity: 1; }
.bd-head { all: unset; cursor: pointer; display: block; width: 100%; }
.bd-head:hover b { text-decoration: underline; }
.bd-head:focus-visible { outline: 2px solid var(--ink, #0b0b0b); outline-offset: 3px; border-radius: 6px; }
.bd-col.sel { box-shadow: 0 0 0 2px var(--ink, #0b0b0b); }
.bd-here { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; background: var(--ink, #0b0b0b); color: #fff; border-radius: 999px; padding: 2px 8px; }
.td-compose { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--surface, #fff); border: 1.5px solid var(--ink, #0b0b0b); border-radius: 16px; padding: 8px 8px 8px 14px; }
.td-compose input { flex: 1 1 260px; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; padding: 8px 0; outline: none; }
.td-compose select { width: auto; max-width: 260px; flex: 0 1 auto; padding: 7px 10px; font-size: 12.5px; border: 1px solid var(--line2, rgba(0,0,0,.16)); border-radius: 999px; background: #fff; font-family: inherit; }
/* TV mode: big, black and white, no menu */
body.bd-tv-on .jjs-side, body.bd-tv-on .jjs-topbar, body.bd-tv-on .jjs-mobilebar, body.bd-tv-on .jjs-mobbar { display: none !important; }
body.bd-tv-on .jjs-main { margin: 0 !important; max-width: none !important; padding: 24px !important; }
body.bd-tv-on .jjs-main-inner { max-width: none !important; }
.bd-tv .h1 { font-size: 64px; }
.bd-tv .bd-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.bd-tv .bd-col header b { font-size: 34px; }
.bd-tv .bd-txt { font-size: 18px; }
.bd-tv .bd-txt small, .bd-tv .bd-auto { font-size: 14px; }

/* ---------- Docs ---------- */
.dc-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid rgba(0,0,0,.06); }
.card .dc-row:first-of-type, .dc-proj .cardhead + .dc-row { border-top: 0; }
.dc-ic { width: 34px; height: 34px; border-radius: 10px; background: #0b0b0b; color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.dc-ic .jjs-ico { width: 16px; height: 16px; }
.dc-main { flex: 1; min-width: 0; }
.dc-main b { overflow-wrap: anywhere; }
.jjs-tabbody > .jjs-proto { margin-bottom: 16px; }

/* ---------- Team ---------- */
.tm-av { width: 36px; height: 36px; border-radius: 50%; background: #0b0b0b center/cover no-repeat; color: #fff; display: inline-grid; place-items: center; font-weight: 600; font-size: 12px; flex: 0 0 auto; }
.tm-av.sm { width: 28px; height: 28px; font-size: 10.5px; }
.tm-av.lg { width: 72px; height: 72px; font-size: 20px; }
.tm-av.xl { width: 84px; height: 84px; font-size: 24px; }
.tm-grid, .ed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tm-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 20px 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 20px; background: #fff; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.tm-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.tm-card b { font-size: 14px; margin-top: 4px; overflow-wrap: anywhere; }
.tm-pro { display: flex; align-items: center; gap: 16px; margin: 4px 0 12px; flex-wrap: wrap; }
.tm-pro label.btn { cursor: pointer; }
.sx-tablecard { padding: 6px 10px; }
.sx-tablewrap { overflow-x: auto; }
.sx-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.sx-tbl th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute, #6a6a66); padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,.09); white-space: nowrap; }
.sx-tbl td { padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,.06); vertical-align: top; }
.sx-tbl td.small { max-width: 260px; line-height: 1.45; }
.tm-off { opacity: .55; }
.tm-unit { opacity: .85; font-size: 12px; }

/* ---------- delivery tracks (x_track) ---------- */
.sx-tracks { margin: 4px 0 14px; }
.cut-card { margin: 4px 0; padding: 12px 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 16px; background: #fafafa; }
.cut-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cut-head b { font-size: 14px; }
.cut-rows { display: flex; flex-direction: column; gap: 6px; }
.cut-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px solid rgba(0,0,0,.05); }
.cut-row:first-child { border-top: 0; }
.cut-st { min-width: 64px; text-align: center; }
.cut-due { font-size: 13px; }
.cut-acts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.cut-reqs { margin-top: 10px; border-top: 1px dashed rgba(0,0,0,.12); padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.cut-req { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.tr-card .tr-row { border-top: 1px solid rgba(0,0,0,.06); }
.tr-card .tr-row:first-child { border-top: 0; }
.tr-row > .tr-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; padding: 12px 2px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.tr-row:not(.open) .tr-main:hover b { text-decoration: underline; }
.tr-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.tr-main > .jjs-ico { flex: 0 0 auto; transform: rotate(90deg); opacity: .5; width: 15px; height: 15px; }
.tr-row.open .tr-main > .jjs-ico { transform: rotate(-90deg); }
.tr-lk { display: inline-flex; color: var(--mute, #666); }
.tr-lk .jjs-ico, .tr-foot .jjs-ico, .tr-extras .jjs-ico { width: 13px; height: 13px; vertical-align: -2px; }
.tr-detail { padding: 4px 0 14px; }
.tr-rev { font-size: 12px; color: var(--mute, #666); }
.tr-extras { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; color: var(--ink, #0b0b0b); }
.tr-cli { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid rgba(0,0,0,.06); }
.tr-cli:first-of-type { border-top: 0; }
.tr-flow { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 0; overflow-x: auto; }
.tr-flow li { flex: 1 0 84px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; position: relative; padding: 0 4px; }
.tr-flow li::before { content: ""; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: rgba(0,0,0,.1); z-index: 0; }
.tr-flow li:first-child::before { display: none; }
.tr-flow li.done::before, .tr-flow li.cur::before { background: var(--ink, #0b0b0b); }
.tr-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0,0,0,.18); background: #fff; display: grid; place-items: center; position: relative; z-index: 1; }
.tr-dot .jjs-ico { width: 12px; height: 12px; }
.tr-flow li.done .tr-dot { background: var(--good, #12844a); border-color: var(--good, #12844a); color: #fff; }
.tr-flow li.cur .tr-dot { border-color: var(--ink, #0b0b0b); box-shadow: inset 0 0 0 4px #fff; background: var(--ink, #0b0b0b); }
.tr-flow li.late .tr-dot { border-color: var(--bad, #cf2a1f); }
.tr-flow li b { font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.tr-flow li small { font-size: 11px; color: var(--mute, #666); }
.tr-flow li.late small { color: var(--bad, #cf2a1f); }
.tr-flow li:not(.cur):not(.done) b { color: var(--mute, #666); font-weight: 500; }
.tr-now { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 12px 14px; background: #f1f1ee; border-radius: 14px; }
.tr-nowtxt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.tr-nowtxt b { font-size: 15px; }
.tr-nowacts { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.tr-edlist { display: grid; gap: 6px; margin: 6px 0 12px; }
.tr-edrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.tr-edrow input { width: auto; max-width: 180px; }
.tr-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 10px; margin-top: 4px; border-top: 1px solid rgba(0,0,0,.06); }

/* ---------- SOPs ---------- */
.sop-list { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.sop-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sop-nums > div { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; }
.sop-nums .n { font-family: 'Bebas Neue', sans-serif; font-size: 32px; line-height: 1; }
.sop-nums .l { font-size: 12px; color: var(--mute, #666); }
.sop-cli summary { cursor: pointer; list-style: none; }
.sop-cli .sop-art { margin-top: 14px; }
.sop-cli h4 { margin: 0 0 4px; font-size: 14px; }
.sx-clientextra { margin-top: 16px; }

/* ---------- Editor level: only their post-production work ---------- */
body.jjs-editor .jjs-side [data-nav="inbox"], body.jjs-editor .jjs-side [data-nav="projects"], body.jjs-editor .jjs-side [data-nav="preview"], body.jjs-editor .jjs-side [data-nav="settings"],
body.jjs-editor .jjs-side .jjs-side-section, body.jjs-editor .jjs-side .jjs-clientlist, body.jjs-editor .jjs-topcanva, body.jjs-editor .jjs-bell, body.jjs-editor .jjs-topsearch { display: none !important; }
body.jjs-editor .jjs-ptabs, body.jjs-editor .jjs-phead-actions, body.jjs-editor .jjs-phase-pick { display: none !important; }

@media (max-width: 980px) {
  .td-compose select { max-width: none; flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .bd-grid { grid-template-columns: 1fr; }
  .bd-tv .h1 { font-size: 40px; }
  .bd-tv .bd-grid { grid-template-columns: 1fr; }
  .td-compose { padding: 8px 10px; }
  .tm-grid, .ed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-flow li { flex: 1 0 66px; padding: 0 2px; }
  .tr-flow li b { font-size: 10.5px; }
  .cut-acts { margin-left: 0; }
  .tr-meta { margin-left: 0; }
  .jjs-sx .sx-top { align-items: flex-start; }
}

/* ---------- Settings > My account ---------- */
.sx-pwform { max-width: 420px; }
.sx-pwok { background: rgba(18,132,74,.10); border: 1px solid rgba(18,132,74,.28); color: #12844a; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.sx-pwlink { margin-left: 12px; }
.jjs-settings-card .jjs-section-title + .jjs-help { margin-top: 10px; }

/* ---------- Ask JJS: the built-in assistant (js/assistant.js) ---------- */
.ai-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 14px; border: 1px solid rgba(0,0,0,.16); background: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ai-btn .jjs-ico { width: 16px; height: 16px; }
.ai-btn.on, .ai-btn:hover { background: #0b0b0b; color: #fff; border-color: #0b0b0b; }
.ai-panel { position: fixed; z-index: 60; top: 16px; right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(0,0,0,.09); border-radius: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; background: #0b0b0b; color: #fff; }
.ai-head b { display: block; font-family: 'Bebas Neue', 'Arial Narrow', sans-serif; font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: .03em; }
.ai-head small { display: block; font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
.ai-x { border: 0; background: rgba(255,255,255,.12); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.ai-x .jjs-ico { width: 16px; height: 16px; }
.ai-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ai-me { align-self: flex-end; max-width: 85%; background: #0b0b0b; color: #fff; border-radius: 16px 16px 4px 16px; padding: 9px 13px; font-size: 13.5px; overflow-wrap: anywhere; }
.ai-bot { align-self: stretch; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 16px 16px 16px 4px; padding: 11px 13px; font-size: 13.5px; }
.ai-txt { font-weight: 600; overflow-wrap: anywhere; }
.ai-items { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ai-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(0,0,0,.07); border-radius: 12px; background: #f7f7f5; flex-wrap: wrap; }
.ai-item.click { cursor: pointer; } .ai-item.click:hover { border-color: #0b0b0b; }
.ai-item.bad { background: rgba(207,42,31,.08); border-color: rgba(207,42,31,.26); } .ai-item.bad b { color: #cf2a1f; }
.ai-item.good { background: rgba(18,132,74,.10); border-color: rgba(18,132,74,.28); } .ai-item.good b { color: #12844a; }
.ai-it { flex: 1 1 180px; min-width: 0; }
.ai-it b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.ai-it small { display: block; font-size: 11.5px; color: #6a6a66; overflow-wrap: anywhere; }
.ai-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.ai-acts .btn { padding: 4px 10px; }
.ai-note { margin-top: 8px; font-size: 12.5px; color: #2a2a28; background: #f7f7f5; border-left: 3px solid #0b0b0b; border-radius: 6px; padding: 6px 10px; }
.ai-confirm, .ai-alts, .ai-rate { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ai-rate .btn { color: #6a6a66; }
.ai-done { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: #12844a; display: flex; align-items: center; gap: 6px; }
.ai-done .jjs-ico { width: 14px; height: 14px; }
.ai-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(0,0,0,.08); background: #fff; }
.ai-form input { flex: 1; min-width: 0; border: 1.5px solid #0b0b0b; border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 14px; outline: none; }
.ai-send { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #0b0b0b; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.ai-send .jjs-ico { width: 18px; height: 18px; }
@media (min-width: 1200px) { .jjs-shell.ai-on .jjs-main { padding-right: 452px; } }
@media (max-width: 640px) { .ai-panel { top: 0; right: 0; bottom: 0; left: 0; width: 100%; border-radius: 0; } .ai-btn span { display: none; } }
.jjs-proto .ai-send, .jjs-proto .ai-x { color: #fff; }