/* Agent Desk components. All color, type, and shape come from themes.css tokens.
   Structure: flat rows and thin rules; bordered boxes only for working surfaces (editors, composers, menus). */
* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--text); text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--heading-weight); letter-spacing: var(--heading-track); text-wrap: balance; margin: 0; }
h1 { font-size: var(--h1); line-height: 1.2; }
h2 { font-size: 1rem; line-height: 1.4; letter-spacing: -.01em; }
h3 { font-size: .93rem; letter-spacing: -.01em; }
p { margin: 0; }
::selection { background: var(--line-strong); color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font: 400 .78rem/1.3 var(--label-font); color: var(--muted); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
/* chevron-left is the only chevron glyph; forward affordances rotate it. */
.desk-row > .icon:last-child, .step-go .icon, .brain-row-read > .icon:last-child { transform: rotate(180deg); }

/* Buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border-radius: var(--btn-radius); border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  font: 500 .82rem/1 var(--mono); white-space: nowrap; text-decoration: none; transition: background-color .15s, border-color .15s; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.quiet { border-color: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--text); background: var(--hover); }
.btn.small { min-height: 32px; padding: 0 10px; }
.btn.icon-only { width: 36px; padding: 0; }
.btn.small.icon-only { width: 32px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[aria-pressed="true"] { background: var(--sidebar-active); border-color: var(--line-strong); color: var(--text); }
.field { display: grid; gap: 6px; }
.field > span, .field > legend { font: 400 .8rem/1.3 var(--mono); color: var(--muted); }
.input, .textarea, .select { width: 100%; min-height: 38px; padding: 8px 11px; border-radius: var(--radius); border: 1px solid var(--field-line);
  background: var(--panel); color: var(--text); caret-color: var(--text); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.textarea { resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--soft); }
.input[disabled], .textarea[disabled] { opacity: .7; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stack { display: grid; gap: 16px; }

/* Status: text with a dot. Never styled as a button. */
.chip { display: inline-flex; align-items: center; gap: 7px; font: 400 .78rem/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); flex: none; }
.chip.ok { color: var(--ok); } .chip.ok::before { background: var(--ok); }
.chip.warn { color: var(--warn); } .chip.warn::before { background: var(--warn); }
.chip.bad { color: var(--bad); } .chip.bad::before { background: var(--bad); }
.chip.plain::before { display: none; }

/* App frame */
.app { display: grid; grid-template-rows: 56px minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); height: 100%; }
.topbar { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 16px 0 12px; border-bottom: 1px solid var(--line); background: var(--bg);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.home-link { padding: 0 8px; }
.wordmark { font: 500 .98rem/1 var(--mono); letter-spacing: -.03em; color: var(--text); display: inline-flex; align-items: center; white-space: nowrap; }
.topbar .grow { flex: 1; }
.topbar .sep { width: 1px; height: 20px; background: var(--line); flex: none; }
.mode-pill { font: 400 .75rem/1 var(--mono); color: var(--soft); white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface); color: var(--text);
  font: 500 .72rem/1 var(--mono); border: 1px solid var(--line-strong); flex: none; }
button.avatar:hover { background: var(--hover); }
.menu-btn { display: none; }

.body { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 0; }
.sidebar { background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid var(--sidebar-line); padding: 18px 12px 16px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
.desk-id { display: flex; align-items: center; gap: 12px; padding: 0 8px 18px; border-bottom: 1px solid var(--sidebar-line); min-width: 0; }
.desk-id > div { min-width: 0; }
.desk-mark { width: 36px; height: 36px; border-radius: var(--mark-radius); display: grid; place-items: center; flex: none;
  font: 500 .72rem/1 var(--mono); color: #fbf9f3; letter-spacing: .02em; }
.desk-id strong { display: block; font: 500 .93rem/1.3 var(--sans); overflow-wrap: anywhere; }
.desk-mark-image { background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(36, 35, 31, .12); }
.desk-mark-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.desk-id small { color: var(--sidebar-muted); font: 400 .78rem/1.4 var(--mono); text-transform: capitalize; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border-radius: var(--radius); color: var(--sidebar-muted); text-decoration: none; font: 400 .86rem/1.3 var(--mono); }
.nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.nav a[aria-current="page"] { background: var(--sidebar-active); color: var(--sidebar-text); }
.nav .count { margin-left: auto; font: 400 .75rem/1 var(--mono); color: var(--sidebar-muted); }
.sidebar .bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sidebar-line); }
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--sidebar-muted); text-decoration: none; font: 400 .8rem/1 var(--mono); padding: 0 8px; }
.back-link:hover { color: var(--sidebar-text); }

.main { overflow-y: auto; min-width: 0; }
.page { max-width: 1080px; margin: 0 auto; padding: 32px 32px 72px; display: grid; gap: 28px; align-content: start; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding-bottom: 4px; }
.page-head > div:first-child { min-width: 0; max-width: 68ch; }
.page-head .sub { color: var(--muted); margin-top: 8px; }
.crumb { font: 400 .78rem/1.3 var(--label-font); color: var(--soft); margin-bottom: 10px; }

/* Sections and lists: flat rows between thin rules */
.section { display: grid; gap: 12px; }
.panel { background: transparent; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.list { display: grid; }
.list-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--line); min-width: 0; }
.list-row:first-child { border-top: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .title { font-weight: 500; overflow-wrap: anywhere; }
.list-row .meta { color: var(--muted); font-size: .86rem; overflow-wrap: anywhere; }
.list-row > .icon:first-child { color: var(--muted); }
a.list-row { color: inherit; text-decoration: none; }
a.list-row:hover, button.list-row:hover { background: var(--hover); }
button.list-row { width: 100%; text-align: left; border: 0; background: transparent; border-top: 1px solid var(--line); border-radius: 0; }
button.list-row:first-child { border-top: 0; }
.empty { padding: 20px 4px; color: var(--muted); }
.empty strong { display: block; color: var(--text); font-weight: 500; margin-bottom: 4px; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--muted); font-size: .88rem; }
.note .icon { margin-top: 3px; }

/* Home */
.home { max-width: 780px; }
.home-hero { display: grid; gap: 8px; }
.desk-row .desk-mark { width: 40px; height: 40px; }
.desk-row > .icon:last-child { color: var(--soft); }
.inline-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }

/* Overview: one summary strip, not a tile grid */
.attention { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.tile { padding: 16px 18px 16px 4px; display: grid; gap: 4px; text-decoration: none; color: inherit; min-width: 0; }
.tile + .tile { border-left: 1px solid var(--line); padding-left: 18px; }
.tile:hover { background: var(--hover); }
.tile .big { font: 500 1.35rem/1.2 var(--num-font); font-variant-numeric: tabular-nums; }
.tile .big .muted { font-size: .9rem; }
.tile > .muted { font-size: .84rem; }

/* Content studio */
.studio { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.markup-panel { overflow: hidden; }
.markup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 4px; flex-wrap: wrap; }
.markup-head h2 { margin-bottom: 4px; }
.markup-head p { font-size: .86rem; }
.markup-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.markup-actions .select { width: min(240px, 100%); min-height: 32px; padding: 4px 8px; }
#markup-canvas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 250px); gap: 14px; padding: 4px 4px 16px; min-width: 0; }
.markup-tools { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.markup-tools button, .comment-card button { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); color: var(--muted); padding: 7px 9px; font: 500 .76rem/1 var(--mono); }
.markup-tools button:hover, .comment-card button:hover { color: var(--text); background: var(--hover); }
.markup-tools button[aria-pressed="true"] { color: var(--primary-ink); background: var(--primary); border-color: var(--primary); }
.markup-stage { position: relative; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; line-height: 0; }
.markup-stage img { display: block; width: 100%; object-fit: contain; }
.markup-stage canvas { position: absolute; inset: 0; width: 100%; cursor: crosshair; }
.markup-text { display: none; position: absolute; z-index: 2; width: min(50%, 280px); min-height: 48px; line-height: 1.35; resize: both; border: 2px solid var(--mark-ink); border-radius: var(--radius); background: #fbf9f3; color: #24231f; padding: 6px; transform: translateY(-1.25em); }
.comment-rail { display: grid; align-content: start; gap: 8px; min-width: 0; max-height: 540px; overflow: auto; padding-right: 2px; }
.comment-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: grid; gap: 8px; min-width: 0; }
.comment-card.selected { border-color: var(--text); }
.comment-card button[data-select] { display: flex; gap: 8px; align-items: center; text-transform: capitalize; text-align: left; }
.comment-card b { display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--mark-ink); color: #fff; font: 500 .72rem/1 var(--mono); }
.comment-card textarea { width: 100%; min-height: 60px; resize: vertical; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--panel); color: var(--text); padding: 7px; font: .84rem/1.4 var(--sans); }
.comment-card .comment-list { display: grid; gap: 6px; }
.comment-card .comment-list p { margin: 0; overflow-wrap: anywhere; font-size: .84rem; line-height: 1.4; }
.markup-save-state { padding: 0 4px 14px; color: var(--soft); font: .76rem/1 var(--mono); }
.draft-list .list-row { padding: 12px 10px; }
.draft-list .list-row[aria-current="true"] { background: var(--sidebar-active); }
.draft-list .title { font-size: .92rem; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { border: 0; background: transparent; padding: 10px 12px; font: 400 .84rem/1.3 var(--mono); color: var(--muted); border-bottom: 1px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.editor { display: grid; }
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.editor-head .row { gap: 12px; }
.editor-body { padding: 20px; display: grid; gap: 18px; }
.title-input { font: var(--heading-weight) 1.35rem/1.3 var(--display); letter-spacing: var(--heading-track); border: 0; border-bottom: 1px solid transparent; background: transparent; padding: 2px 0 6px; width: 100%; border-radius: 0; }
.title-input:hover { border-bottom-color: var(--line); }
.title-input:focus-visible { outline: 0; border-bottom-color: var(--focus); }
.platforms { display: flex; gap: 6px; flex-wrap: wrap; }
.toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-radius: var(--btn-radius); border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: 400 .82rem/1 var(--mono); }
.toggle:hover { color: var(--text); background: var(--hover); }
.toggle[aria-pressed="true"] { border-color: var(--text); color: var(--text); background: var(--sidebar-active); }
.caption { min-height: 200px; font-size: .95rem; }
.counts { display: flex; gap: 16px; flex-wrap: wrap; font: .76rem/1.3 var(--mono); color: var(--soft); }
.counts .over { color: var(--bad); }
.editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.save-state { font: .76rem/1 var(--mono); color: var(--soft); }
.proof-confirmation { margin: 0; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface); font-size: .88rem; }
.checks { display: grid; gap: 8px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.check .icon { margin-top: 3px; }
.check.ok .icon { color: var(--ok); }
.check.warn .icon { color: var(--warn); }

/* Post previews (neutral, not platform replicas) */
.previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.preview { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.preview-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: .88rem; }
.preview-head .desk-mark { width: 28px; height: 28px; border-radius: 50%; font-size: .6rem; }
.preview-head .platform { margin-left: auto; color: var(--soft); }
.preview-img { background: var(--surface); display: grid; place-items: center; color: var(--soft); font: .75rem/1.2 var(--mono); }
.preview-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preview.fb .preview-img { aspect-ratio: 1.91 / 1; }
.preview.ig .preview-img { aspect-ratio: 1 / 1; }
.preview-text { padding: 10px 12px 14px; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-text .more { color: var(--soft); }
/* Inbox chrome is neutral; the desk's own identity comes only from the preview model. */
.email-inbox-preview { display: grid; gap: 10px; min-width: 0; }
.email-preview-toolbar, .gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.email-preview-toolbar p, .gallery-head p { margin: 3px 0 0; color: var(--muted); font-size: .8rem; }
.email-preview-modes { display: inline-flex; gap: 4px; flex: none; }
.inbox-chrome { overflow: hidden; border: 1px solid #d9d6ce; border-radius: var(--radius); background: #f3f2ef; color: #24231f; min-width: 0; }
.inbox-chrome.dark { border-color: #3d3c39; background: #1f1f1e; color: #e8e6e1; }
.inbox-topline { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-bottom: 1px solid #d9d6ce; font: 500 .78rem/1 var(--mono); }
.dark .inbox-topline { border-bottom-color: #3d3c39; }
.inbox-dot { width: 7px; height: 7px; border-radius: 50%; background: #6c695f; }
.dark .inbox-dot { background: #aaa8a2; }
.inbox-count { margin-left: auto; color: #6c695f; } .dark .inbox-count { color: #aaa8a2; }
.inbox-envelope { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px 14px; border-bottom: 1px solid #d9d6ce; background: #fff; font-size: .82rem; }
.dark .inbox-envelope { border-bottom-color: #3d3c39; background: #292928; }
.inbox-avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #3b3a35; color: #fbf9f3; font: 500 .55rem/1 var(--mono); }
.inbox-sender, .inbox-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-sender { flex: 1 1 38%; font-weight: 500; }
.inbox-copy { flex: 1 1 27%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.inbox-copy:hover { text-decoration: underline; }
.inbox-copy:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.inbox-snippet { flex-basis: 35%; color: #6c695f; } .dark .inbox-snippet { color: #aaa8a2; }
.email-preview-canvas { width: min(640px, 100%); max-width: 100%; margin: 0 auto; background: #F2EEE6; }
.email-preview-frame { display: block; width: 100%; height: 580px; border: 0; background: #FBF9F4; }
.email-preview-help { margin: 0; color: var(--muted); font-size: .82rem; }
.draft-preview-full { min-width: 0; }
.email-header-gallery { display: grid; gap: 10px; padding-top: 6px; }
.header-variants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.email-header-variant { min-width: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.variant-art { position: relative; display: grid; align-content: space-between; min-height: 88px; padding: 10px; background: #FBF9F4; color: #06182D; font: 700 .66rem/1.1 Georgia, 'Times New Roman', serif; }
.variant-art strong { font: 700 1.3rem/1 Arial, Helvetica, sans-serif; }
.signal .variant-art { border-top: 8px solid #06182D; box-shadow: inset 0 -6px #CF1637; }
.masthead .variant-art { border: 7px solid #F2EEE6; border-top-color: #CF1637; }
.ribbon .variant-art { background: #06182D; color: #FBF9F4; }.ribbon .variant-art::after { content: ""; position: absolute; right: 0; bottom: 0; width: 55%; height: 13px; background: #CF1637; }
.banner .variant-art { background: #F2EEE6; box-shadow: inset 0 22px #06182D; padding-top: 31px; }.banner .variant-art strong { color: #CF1637; }
.email-header-variant figcaption { display: grid; gap: 3px; padding: 8px; font-size: .72rem; overflow-wrap: anywhere; }
.email-header-variant figcaption span { color: var(--muted); font: .7rem/1 var(--mono); }

/* Work */
.composer { display: flex; gap: 8px; padding: 10px; }
.composer .input { flex: 1; }
.evidence { font: .76rem/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.work-result-summary { display: grid; gap: 10px; margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.work-result-summary h3 { font: 500 .84rem/1.3 var(--sans); }
.work-result-totals { display: flex; gap: 14px; flex-wrap: wrap; font: .78rem/1.3 var(--mono); color: var(--muted); }
.work-result-totals strong { color: var(--text); font-weight: 500; }
.work-result-page { white-space: pre-wrap; overflow-wrap: anywhere; }
.analytics-card { overflow: hidden; }
.analytics-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.analytics-head .meta { margin-top: 4px; color: var(--muted); font-size: .84rem; }
.analytics-empty { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 4px; }
.analytics-empty p { margin: 5px 0 0; color: var(--muted); font-size: .88rem; max-width: 68ch; }
.analytics-scroll { overflow-x: auto; }
.analytics-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .88rem; }
.analytics-table th, .analytics-table td { padding: 10px 12px 10px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.analytics-table tr:last-child td { border-bottom: 0; }
.analytics-table th { color: var(--muted); font: 400 .76rem/1.2 var(--mono); white-space: nowrap; }
.analytics-value { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
.analytics-unavailable { color: var(--muted); font-style: italic; min-width: 220px; }

/* Brain inventory */
.brain-connection { display: flex; gap: 12px; align-items: flex-start; padding: 14px 4px; }
.brain-connection .icon { color: var(--muted); margin-top: 3px; flex: none; }
.brain-connection strong { display: block; font-weight: 500; }
.brain-connection p { margin: 4px 0 0; color: var(--muted); font-size: .86rem; overflow-wrap: anywhere; }
.brain-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.brain-totals > div { display: grid; gap: 4px; padding: 14px 16px 14px 4px; min-width: 0; }
.brain-totals > div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.brain-totals strong { font: 500 1.2rem/1.2 var(--num-font); overflow-wrap: anywhere; }
.brain-search { flex: 1; max-width: 320px; min-width: 0; }
.brain-breakdowns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.brain-breakdown { padding: 12px 4px; display: grid; gap: 8px; }
.brain-breakdown > div { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; }
.brain-breakdown span { color: var(--muted); overflow-wrap: anywhere; }
.brain-breakdown strong { font: 500 .82rem/1.4 var(--mono); flex: none; }
.brain-row { padding: 0; gap: 4px; }
.brain-row-read { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 14px 4px; text-align: left; border: 0; background: transparent; color: inherit; cursor: pointer; }
.brain-row-read:hover { background: var(--hover); }
.brain-row-read > .icon:first-child { color: var(--muted); }
.brain-row-read > .icon:last-child { color: var(--soft); flex: none; }
.brain-notion-link { flex: none; margin-right: 4px; white-space: nowrap; }
.brain-page { overflow: hidden; }
.brain-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.brain-page-head .crumb { margin-bottom: 6px; }
.brain-page-head h2 { overflow-wrap: anywhere; }
.markdown { padding: 20px; line-height: 1.7; overflow-wrap: anywhere; max-width: 78ch; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3 { margin: 1.2em 0 .45em; line-height: 1.25; }
.markdown h1 { font-size: 1.35rem; }.markdown h2 { font-size: 1.15rem; }.markdown h3 { font-size: 1rem; }
.markdown p { margin: 0 0 1em; }.markdown ul { margin: 0 0 1em; padding-left: 1.25em; }
.markdown code { padding: .12em .32em; border-radius: var(--radius); background: var(--surface); font-family: var(--mono); font-size: .9em; }

/* Chat */
.chat-thread { display: grid; overflow: hidden; }
.chat-message { display: grid; gap: 6px; padding: 16px 4px; min-width: 0; }
.chat-message + .chat-message { border-top: 1px solid var(--line); }
.chat-meta { display: flex; gap: 10px; align-items: baseline; color: var(--muted); font: 400 .78rem/1.3 var(--mono); min-width: 0; }
.chat-meta strong { color: var(--text); font-weight: 500; }
.chat-message.agent .chat-meta strong::before { content: "› "; color: var(--muted); }
.chat-meta span { overflow-wrap: anywhere; }
.chat-message p { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 78ch; }
.chat-composer { display: grid; gap: 10px; padding: 12px; }
.chat-composer .textarea { min-height: 88px; }
.chat-composer .lock-note { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: .8rem; }
.chat-composer-state { margin-top: 4px; color: var(--muted); font-size: .78rem; }
.chat-composer-state.warn { color: var(--bad); }

.action { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; text-align: left; }
.action:hover { background: var(--hover); }

/* Sign-in */
.signin { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.signin-card { width: min(420px, 100%); display: grid; gap: 20px; padding: 28px; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 50;
  background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: var(--radius); font-size: .88rem; box-shadow: var(--shadow); max-width: calc(100% - 32px); }

/* Menus */
.popover { position: absolute; top: 48px; right: 12px; z-index: 40; width: 248px; padding: 6px; display: grid; gap: 1px; box-shadow: var(--shadow); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); }
.popover button, .popover a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--radius); background: transparent; text-align: left; color: inherit; text-decoration: none; font-size: .88rem; }
.popover button:hover, .popover a:hover { background: var(--hover); }
.popover .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: .84rem; color: var(--muted); overflow-wrap: anywhere; }
.popover .label { padding: 8px 10px 2px; }
.popover [aria-checked="false"] .icon { visibility: hidden; }
.switcher { position: relative; min-width: 0; }
.switcher > .btn { max-width: 100%; gap: 10px; font: 500 .86rem/1 var(--sans); color: var(--text); }
.switcher .desk-mark { width: 24px; height: 24px; font-size: .55rem; }
.desk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.switcher .popover { left: 0; right: auto; top: 44px; }

/* Desk settings */
.desk-settings { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 16px; padding: 18px 4px; align-items: end; }
.desk-settings .swatches, .desk-settings .row:last-child, .desk-settings .field:nth-child(3) { grid-column: 1 / -1; }
.swatches { border: 0; padding: 0; margin: 0; }
.swatches legend { margin-bottom: 8px; padding: 0; }
.swatch { width: 28px; height: 28px; border-radius: 50%; background: var(--c); display: inline-grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.swatch input[type=radio] { appearance: none; margin: 0; width: 100%; height: 100%; border-radius: 50%; cursor: pointer; }
.swatch input[type=radio]:checked { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text); }
.swatch input[type=radio]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.swatch.custom { background: conic-gradient(#b8483e, #a8742a, #5c7a4f, #2f7a74, #76736c, #8a5a9e, #b8483e); }
.swatch.custom input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* Image slot */
.image-slot { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); }
.image-slot.drop { border-style: dashed; cursor: pointer; color: var(--muted); }
.image-slot.drop:hover { background: var(--hover); }
.image-slot.drop strong { color: var(--text); font-weight: 500; }
.image-slot .thumb { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius); background: var(--surface); flex: none; display: grid; place-items: center; font-size: .75rem; color: var(--soft); }
label.btn { cursor: pointer; }
input[type=file].sr-only:focus-visible + * { outline: 2px solid var(--focus); }

/* Admin directory: a start page over existing pages, not a second workspace store. */
.admin-page { max-width: 1240px; width: 100%; }
.directory-toolbar { display: flex; align-items: center; gap: 12px; }
.search-field { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 560px; min-height: 42px; padding: 0 12px; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--panel); color: var(--muted); }
.search-field:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.search-field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 10px 0; font: .88rem/1.3 var(--mono); color: var(--text); }
.search-field input::placeholder { color: var(--soft); }
.directory-count { margin-left: auto; font: .78rem/1.3 var(--mono); color: var(--soft); white-space: nowrap; }
.directory { border-top: 1px solid var(--line-strong); }
.directory-head, .directory-row { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 32px; }
.directory-head { padding: 10px 4px; border-bottom: 1px solid var(--line); font: .76rem/1.3 var(--mono); color: var(--soft); }
.directory-row { padding: 20px 4px; border-bottom: 1px solid var(--line); align-items: center; }
.directory-row[data-row-href] { cursor: pointer; border-radius: var(--radius); transition: background-color .12s ease; }
.directory-row[data-row-href]:hover, .directory-row[data-row-href]:focus-visible { background: var(--hover); }
.directory-row[data-row-href]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.directory-row[data-row-href]:hover .directory-identity h2 { text-decoration: underline; text-underline-offset: 3px; }
.directory-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.directory-identity > div { min-width: 0; }
.directory-identity h2 { font: 500 .98rem/1.3 var(--sans); letter-spacing: 0; overflow-wrap: anywhere; }
.directory-identity p { font: .78rem/1.4 var(--mono); margin-top: 4px; }
.directory-mark, .directory-identity .desk-mark { width: 40px; height: 40px; flex: none; }
img.directory-mark { object-fit: contain; background: #fff; border-radius: var(--mark-radius); box-shadow: inset 0 0 0 1px rgba(36, 35, 31, .12); }
.directory-pages { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; margin-left: -10px; }
.directory-pages a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: var(--radius); color: var(--muted); font: 400 .84rem/1 var(--mono); text-decoration: none; }
.directory-pages a:hover { color: var(--text); background: var(--hover); }
.directory-pages a:first-child { color: var(--text); }
.directory-pages a.external::after { content: "↗" / ""; margin-left: 5px; color: var(--soft); }
.directory-hint { font-size: .84rem; max-width: 80ch; }
.directory-tools { border-top: 1px solid var(--line); padding-top: 20px; display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.directory-tools h2 { font: 400 .78rem/1.3 var(--mono); color: var(--soft); }
.directory-tools a { min-height: 40px; display: inline-flex; align-items: center; font-size: .86rem; }
.directory-tools > span { font-size: .8rem; }

/* New desk */
.new-desk-page { max-width: 640px; width: 100%; }
.new-desk-form { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 20px 16px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.new-desk-form > p, .new-desk-form > .form-foot, .new-desk-preview { grid-column: 1 / -1; }
.new-desk-form .input { min-height: 42px; }
.new-desk-preview { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-block: 1px solid var(--line); }
.new-desk-preview .desk-mark { background: #76736c; }
.new-desk-preview strong { font-weight: 500; }
.new-desk-preview span:last-child { display: block; font: .78rem/1.4 var(--mono); color: var(--soft); }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-foot .btn { min-height: 40px; }
.form-foot p { font-size: .84rem; }
.facts { display: grid; gap: 6px; padding-left: 18px; margin: 0; color: var(--muted); font-size: .88rem; }

/* Setup */
.onboarding-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 4px; border-top: 1px solid var(--line-strong); }
.onboarding-intro > div { display: flex; gap: 14px; align-items: center; min-width: 0; }
.onboarding-intro h2 { font: 500 1rem/1.3 var(--sans); letter-spacing: 0; }
.onboarding-intro p { font-size: .86rem; margin-top: 2px; }
.setup-meter { display: flex; gap: 3px; margin-top: 8px; }
.setup-meter i { width: 28px; height: 3px; background: var(--line-strong); }
.setup-meter i.done { background: var(--text); }
.onboarding-steps { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.onboarding-steps > a { display: grid; grid-template-columns: 32px minmax(0, 1fr) 150px 20px; align-items: center; gap: 16px; padding: 18px 4px; color: var(--text); text-decoration: none; }
.onboarding-steps > a + a { border-top: 1px solid var(--line); }
.onboarding-steps > a:hover { background: var(--hover); }
.step-number { font: 400 .84rem/1 var(--mono); color: var(--soft); }
.onboarding-steps h2 { font: 500 .95rem/1.3 var(--sans); letter-spacing: 0; }
.onboarding-steps p { font-size: .86rem; margin-top: 3px; }
.step-go { color: var(--soft); display: grid; place-items: center; }
.onboarding-steps > a:hover .step-go { color: var(--text); }
.setup-notes { max-width: 72ch; display: grid; gap: 12px; }
.setup-notes p { font-size: .9rem; color: var(--muted); }

/* Connections */
.connect-agent { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 16px 4px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.connect-agent p { color: var(--muted); font-size: .88rem; margin-top: 4px; max-width: 64ch; }

/* Responsive */
@media (max-width: 980px) {
  .studio { grid-template-columns: minmax(0, 1fr); }
  .previews { grid-template-columns: minmax(0, 1fr); }
  .directory-head { display: none; }
  .directory-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 760px) {
  .menu-btn { display: inline-flex; }
  .body { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 56px; bottom: 0; width: 272px; z-index: 30; transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow); visibility: hidden; }
  .sidebar.open { transform: none; visibility: visible; }
  .scrim { position: fixed; inset: 56px 0 0 272px; background: rgba(0, 0, 0, .35); z-index: 25; border: 0; }
  .page { padding: 22px 16px 56px; gap: 22px; }
  h1 { font-size: 1.45rem; }
  .attention, .brain-totals { grid-template-columns: minmax(0, 1fr); }
  .tile + .tile, .brain-totals > div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 4px; }
  .inline-form { grid-template-columns: minmax(0, 1fr) !important; }
  .mode-pill, .topbar .sep, .admin-link, .topbar .surface-switch { display: none; }
  .topbar { gap: 4px; padding: 0 8px; }
  .topbar .desk-name, .hide-sm { display: none; }
  .switcher > .btn { padding: 0 6px; gap: 4px; }
  .page-head .btn.primary, .page-head > .btn { width: 100%; }
  .page-head > .row { width: 100%; } .page-head > .row .btn { flex: 1; }
  .title-input { font-size: 1.1rem; }
  .editor-body { padding: 16px; }
  #markup-canvas { grid-template-columns: minmax(0, 1fr); }
  .comment-rail { max-height: none; }
  .markup-actions { width: 100%; }
  .markup-actions .select { width: 100%; }
  .brain-breakdowns { grid-template-columns: minmax(0, 1fr); }
  .brain-search { max-width: none; width: 100%; }
  .brain-page-head { padding: 16px; }
  .markdown { padding: 16px; }
  .email-preview-frame { height: 540px; }
  .header-variants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desk-settings, .new-desk-form { grid-template-columns: minmax(0, 1fr); }
  .directory-toolbar { flex-wrap: wrap; }
  .search-field { flex-basis: 100%; max-width: none; }
  .directory-count { margin-left: 0; }
  .onboarding-intro { flex-direction: column; align-items: flex-start; }
  .onboarding-steps > a { grid-template-columns: 24px minmax(0, 1fr) 16px; gap: 12px; }
  .onboarding-steps > a .chip { grid-column: 2; grid-row: 2; }
  .step-go { grid-column: 3; grid-row: 1 / span 2; }
  }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.previews > .email-inbox-preview { grid-column: 1 / -1; }
.admin-link[aria-current="page"] { color: var(--text); }

/* User / Dev surface switch (operators only) */
.surface-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 2px; gap: 2px; }
.surface-switch button { border: 0; background: transparent; color: var(--muted); min-height: 28px; padding: 0 10px; border-radius: var(--radius); font: 500 .78rem/1 var(--mono); }
.surface-switch button:hover { color: var(--text); }
.surface-switch button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }

/* Dev surface: dense key/value lists and tables over thin rules */
.dev-subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: -8px; }
.dev-subnav a { padding: 8px 12px; font: 400 .84rem/1.3 var(--mono); color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.dev-subnav a:hover { color: var(--text); }
.dev-subnav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
.kv { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line-strong); }
.kv dt, .kv dd { margin: 0; padding: 9px 4px; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
.kv dt { font: 400 .8rem/1.5 var(--mono); color: var(--muted); }
.kv dd { font-size: .88rem; }
.kv code, .dev-table code { font: .8rem/1.4 var(--mono); }
.dev-table { font-size: .84rem; border-top: 1px solid var(--line-strong); }
.dev-table td { overflow-wrap: anywhere; }
.dev-json { display: block; max-width: 360px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.dev-desk { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.dev-desk .desk-mark { width: 22px; height: 22px; font-size: .5rem; }
.swatch-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.dev-raw { border-top: 1px solid var(--line-strong); padding-top: 12px; }
.dev-raw summary { cursor: pointer; font: 400 .84rem/1.3 var(--mono); color: var(--muted); min-height: 32px; }
.dev-raw pre { margin: 10px 0 0; padding: 14px; max-height: 480px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); font: .76rem/1.5 var(--mono); }
@media (max-width: 760px) {
  .surface-switch button { padding: 0 7px; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt { border-bottom: 0; padding-bottom: 0; }
}

/* Hand-customized Overview parts */
.welcome { display: grid; gap: 8px; padding: 18px 4px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.welcome p { color: var(--muted); max-width: 72ch; }
.quick-links { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 761px) { .attention { grid-template-columns: repeat(var(--tiles, 3), minmax(0, 1fr)); } }
.page > * { min-width: 0; }
.dev-raw pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Chat-first desk home: conversation leads, status sits in a quiet side column */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.home-main, .home-rail { display: grid; gap: 24px; min-width: 0; }
.home-rail .section h2 { font-size: .9rem; }
.home-rail .list-row { padding: 12px 4px; }
.home-rail .attention { grid-template-columns: minmax(0, 1fr) !important; }
.home-rail .tile + .tile { border-left: 0; border-top: 1px solid var(--line); padding-left: 4px; }
.home-rail .tile { padding: 12px 4px; }
.conversation { display: grid; gap: 12px; min-width: 0; }
.chat-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .84rem; }
.chat-status .more-link { margin-left: auto; font: .8rem/1.3 var(--mono); }
.chat-scroll { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); max-height: min(56vh, 560px); overflow-y: auto; }
.chat-page .chat-scroll { max-height: none; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-actions .btn { font-weight: 400; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .chat-scroll { max-height: 50vh; } .quick-actions .btn { flex: 1 1 auto; } }

/* Composer: one line that grows, quiet counter, mic and send as icons */
.chat-composer { gap: 6px; padding: 8px 8px 8px 12px; }
.chat-composer .textarea { min-height: 40px; max-height: 240px; border: 0; background: transparent; padding: 8px 0; resize: none; box-shadow: none; overflow-y: auto; }
.chat-composer .textarea:focus-visible { box-shadow: none; }
.chat-composer:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.composer-bar { display: flex; align-items: center; gap: 4px; }
.composer-bar .chat-composer-state { flex: 1; margin: 0; min-height: 1em; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field-head label { font: 400 .8rem/1.3 var(--mono); color: var(--muted); }
.composer .btn.mic { flex: none; }
.btn.mic.listening { color: var(--bad); background: var(--hover); }
.btn.mic.listening .icon { animation: listening 1.2s ease-in-out infinite; }
@keyframes listening { 50% { opacity: .35; } }
.chat-message.fresh { animation: arrive .22s ease-out; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } }
.btn, .toggle, .nav a, .tile, .list-row, .directory-pages a { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.toast { animation: arrive .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .btn.mic.listening .icon, .chat-message.fresh, .toast { animation: none; } }

/* Studio: paste/drop intake, thumbnail strip, full-width canvas */
kbd { font: 500 .72rem/1 var(--mono); padding: 2px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 3px; color: var(--muted); background: var(--panel); }
.studio-drop { border: 1px dashed var(--field-line); border-radius: var(--radius); background: var(--panel); transition: background-color .12s ease, border-color .12s ease; }
.studio-drop.dragging, .studio-work.dragging { border-color: var(--text); background: var(--hover); }
.studio-drop-target { display: grid; justify-items: center; gap: 10px; padding: 72px 24px; text-align: center; cursor: pointer; }
.studio-drop-target .icon { width: 28px; height: 28px; color: var(--muted); }
.studio-drop-target strong { font: 500 1rem/1.4 var(--sans); }
.studio-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.studio-thumb { flex: none; width: 88px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: grid; place-items: center; cursor: pointer; }
.studio-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.studio-thumb:hover { border-color: var(--line-strong); }
.studio-thumb[aria-current="true"] { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.studio-thumb.add { border-style: dashed; color: var(--muted); }
.studio-thumb.add:hover { color: var(--text); background: var(--hover); }
.studio-work { display: grid; gap: 10px; border: 1px solid transparent; border-radius: var(--radius); }
.studio-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.studio-keys { margin-left: auto; font-size: .78rem; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.studio-work #markup-canvas { grid-template-columns: minmax(0, 1fr) 260px; padding: 0; }
.markup-tools button kbd { margin-left: 4px; padding: 0 4px; border-bottom-width: 1px; font-size: .66rem; }
.markup-tools button[aria-pressed="true"] kbd { color: inherit; background: transparent; border-color: currentColor; }
@media (max-width: 980px) { .studio-work #markup-canvas { grid-template-columns: minmax(0, 1fr); } .studio-keys { display: none; } }
.comment-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad); color: var(--bg); }
.section-bar { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.done-list > summary { list-style: none; cursor: pointer; }
.done-list > summary::-webkit-details-marker { display: none; }
.done-list > summary h2 { display: inline-flex; gap: 8px; align-items: baseline; }
.done-list > summary h2::before { content: "›"; color: var(--muted); transition: transform .12s ease; display: inline-block; }
.done-list[open] > summary h2::before { transform: rotate(90deg); }
.image-options { margin-top: 6px; gap: 4px; }
.image-slot.drop.dragging { border-color: var(--text); background: var(--hover); }

/* Desk switcher lives at the top of the sidebar (Slack/Linear pattern) */
.app { grid-template-rows: 56px minmax(0, 1fr); }
.sidebar .switcher { position: relative; }
.sidebar .desk-id { width: 100%; border: 0; border-bottom: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius); padding: 8px; margin-bottom: 0; }
.sidebar .desk-id:hover, .sidebar .desk-id[aria-expanded="true"] { background: var(--sidebar-hover); }
.sidebar .desk-id > div { flex: 1; }
.sidebar .desk-id > .icon { color: var(--sidebar-muted); }
.sidebar .switcher + .nav { border-top: 1px solid var(--sidebar-line); padding-top: 14px; }
.sidebar .switcher .popover { left: 0; right: 0; top: calc(100% + 4px); width: auto; }
.popover a[aria-current="true"] { background: var(--sidebar-active); }
.popover .desk-mark { width: 22px; height: 22px; font-size: .5rem; }

/* ⌘K launcher */
.palette-hint kbd { margin-left: 2px; }
.palette-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .28); z-index: 60; }
.palette { position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); width: min(620px, calc(100% - 24px)); z-index: 61; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: var(--shadow); overflow: hidden; animation: arrive .14s ease-out; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette-input input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 16px 0; font: 400 1rem/1.3 var(--sans); color: var(--text); }
.palette-list { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); text-align: left; font-size: .92rem; }
.palette-item[aria-selected="true"], .palette-item:hover { background: var(--hover); }
.palette-item .desk-mark { width: 22px; height: 22px; font-size: .5rem; }
.palette-icon { width: 22px; display: grid; place-items: center; color: var(--muted); }
.palette-icon.fwd .icon { transform: rotate(180deg); }
.palette-hint-text { color: var(--soft); font: .76rem/1.2 var(--mono); white-space: nowrap; }
.palette .empty { padding: 16px; }
@media (prefers-reduced-motion: reduce) { .palette { animation: none; } }
.unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mark-ink); flex: none; margin-left: auto; }
.unread-dot + .count { margin-left: 8px; }
.popover [role="menuitemcheckbox"][aria-checked="false"] .icon { visibility: hidden; }
.shortcuts { padding: 0 0 8px; }
.shortcuts-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.shortcut-list { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; padding: 14px; }
.shortcut-list dt { display: flex; gap: 4px; }
.shortcut-list dd { margin: 0; color: var(--muted); font-size: .9rem; }
.skeleton { display: grid; gap: 14px; padding-top: 6px; }
.skeleton i { display: block; height: 14px; border-radius: 2px; background: linear-gradient(90deg, var(--surface), var(--hover), var(--surface)); background-size: 200% 100%; animation: shimmer 1.2s ease-in-out infinite; }
.skeleton .sk-title { height: 30px; width: 40%; margin-bottom: 10px; }
.skeleton .sk-short { width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton i { animation: none; } }
.chat-md { max-width: 78ch; overflow-wrap: anywhere; line-height: 1.6; }
.chat-md > * { margin: 0 0 .6em; } .chat-md > :last-child { margin-bottom: 0; }
.chat-md ul { padding-left: 1.2em; } .chat-md h1, .chat-md h2, .chat-md h3 { font-size: 1rem; margin-top: .8em; }
.chat-md code { padding: .1em .3em; border-radius: var(--radius); background: var(--surface); font: .88em var(--mono); }
.copy-msg { min-height: 24px; padding: 0 6px; margin-left: auto; opacity: 0; transition: opacity .12s ease; }
.chat-message:hover .copy-msg, .copy-msg:focus-visible { opacity: 1; }
@media (hover: none) { .copy-msg { opacity: 1; } }

/* Product mark colors follow the current theme. */
.wordmark { gap: 9px; }
.brand-mark { width: 22px; height: 22px; flex: none; color: var(--text); }
.brand-lockup { display: inline-flex; align-items: center; gap: 14px; color: var(--text); }
.brand-lockup .brand-mark { width: 40px; height: 40px; }
.brand-lockup > span { display: grid; gap: 4px; }
.brand-lockup strong { font: 500 1.3rem/1 var(--mono); letter-spacing: -.03em; }
.brand-lockup small { font: 400 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.brand-cross { stroke: var(--brand-cross); }

/* Desk access forms use equal-width fields; the older details form has a short initials column. */
.desk-access .desk-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.desk-access .desk-settings > p, .desk-access fieldset { grid-column: 1 / -1; }
.desk-access .desk-settings > button { justify-self: start; }
.desk-access summary { padding: 12px 0; cursor: pointer; }
.desk-access fieldset { min-width: 0; margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--line); }
.desk-access fieldset label { min-height: 36px; }
@media (max-width: 760px) { .desk-access .desk-settings { grid-template-columns: minmax(0, 1fr); } }

/* Web workspace: original desk pages and a persistent, desk-owned agent. */

.body.with-agent { grid-template-columns:210px minmax(0,1fr) 350px; }
.agent-pane { display:flex; flex-direction:column; min-width:0; min-height:0; border-left:1px solid var(--line-strong); background:var(--panel); padding:0 18px 18px; overflow:hidden; }
.agent-pane-head { display:flex; align-items:center; justify-content:space-between; min-height:65px; border-bottom:1px solid var(--line); gap:12px; }
.agent-pane-head strong { font:500 1rem/1.5 var(--sans); }
.agent-pane-head small { display:block; color:var(--muted); font-size:.78rem; }
.agent-scope { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:12px 0; font-size:.76rem; color:var(--muted); }
.agent-scope .icon { width:14px; height:14px; }
.agent-scope .btn { width:100%; justify-content:flex-start; margin-top:4px; }
.agent-pane .conversation { flex:1; grid-template-rows:auto minmax(0,1fr) auto; min-height:0; }
.agent-pane .chat-scroll { max-height:none; min-height:0; border:0; }
.agent-pane .chat-message { padding:14px 0; border-bottom:1px solid var(--line); }
.agent-pane .chat-message p, .agent-pane .chat-md { font-size:.86rem; line-height:1.65; }
.agent-pane .chat-meta { font:400 .7rem/1.4 var(--mono); gap:8px; }
.agent-pane .chat-meta strong { font:500 .76rem/1.4 var(--sans); }
.agent-pane .chat-composer { margin-top:8px; background:var(--bg); border:1px solid var(--line-strong); }
.agent-pane .chat-composer .textarea { font-size:.85rem; }
.agent-pane .chat-status { font-size:.73rem; gap:5px; }
.agent-pane .chip { font-size:.7rem; }
.body.with-agent .page { padding:28px; }
.body.with-agent .attention { display:flex; flex-direction:column; }
.body.with-agent .tile { padding:10px 0; flex-direction:row; align-items:center; gap:12px; }
.body.with-agent .tile .big { font-size:1.2rem; }
.body.with-agent .tile .muted { margin-left:auto; font-size:.75rem; }
::selection { background:var(--accent-soft); color:var(--text); }
input, textarea { caret-color:var(--text); }
* { scrollbar-color:var(--line-strong) transparent; scrollbar-width:thin; }
@media (max-width:1200px) { .body.with-agent { grid-template-columns:190px minmax(0,1fr) 310px; } .body.with-agent .page { padding:22px; } }
@media (max-width:1000px) and (min-width:761px) { .body.with-agent { grid-template-columns:190px minmax(0,1fr); } .agent-pane { position:fixed; right:0; top:56px; bottom:0; width:350px; z-index:25; box-shadow:var(--shadow); } }
@media (max-width:760px) { .body.with-agent { grid-template-columns:minmax(0,1fr); } .body.with-agent .page { padding:20px 16px; } .agent-pane { position:fixed; inset:56px 0 0; z-index:25; border-left:0; padding:0 18px 18px; } .agent-pane-head { min-height:60px; } }
@media (prefers-reduced-motion:reduce) { .chat-message.fresh { animation:none; } }
.inbox-workspace { display:grid; grid-template-columns:minmax(190px,.8fr) minmax(0,1.4fr); border-top:1px solid var(--line); min-height:420px; }
.inbox-list { border-right:1px solid var(--line); padding:16px 14px 16px 0; }
.inbox-row { display:flex; flex-direction:column; gap:5px; width:100%; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--text); padding:16px 10px; cursor:pointer; font:inherit; }
.inbox-row:hover, .inbox-row.selected { background:var(--hover); }
.inbox-row strong { font-weight:500; }
.inbox-row span, .inbox-row small { color:var(--muted); font-size:.8rem; }
.inbox-reader { min-width:0; padding:20px; overflow-wrap:anywhere; }
.inbox-reader h2 { font-size:1.2rem; }
.inbox-message-body { white-space:pre-wrap; font:400 .9rem/1.8 var(--sans); margin:24px 0; }
.inbox-empty { max-width:65ch; padding:24px 0; }
.work-project { gap:20px; }
.work-project .section-bar { align-items:flex-start; }
.work-project .section-bar p { margin-top:8px; max-width:65ch; color:var(--muted); }
.project-coverage { padding-bottom:16px; border-bottom:1px solid var(--line); color:var(--muted); }
.project-coverage summary { cursor:pointer; color:var(--text); padding:8px 0; }
.project-coverage p { max-width:70ch; margin-top:8px; }
.project-attention { padding-bottom:16px; border-bottom:1px solid var(--line); }
.project-attention ul { list-style:none; margin:8px 0 0; padding:0; }
.project-attention .btn { flex-direction:column; align-items:flex-start; text-align:left; width:100%; min-height:44px; padding:10px 8px; white-space:normal; }
.project-attention .btn span { color:var(--muted); }
.project-layout { display:grid; gap:24px; min-width:0; }
.work-project.has-selection .project-layout { grid-template-columns:minmax(240px, .8fr) minmax(0, 1.2fr); }
.project-tasks h3 { margin-bottom:12px; }
.project-task { display:grid; grid-template-columns:minmax(0, 1.3fr) repeat(2, minmax(90px, .7fr)) minmax(0, 1.2fr); gap:16px; width:100%; background:transparent; border:0; border-top:1px solid var(--line); border-radius:2px; padding:16px 8px; text-align:left; color:var(--text); font:inherit; cursor:pointer; }
.project-task:last-child { border-bottom:1px solid var(--line); }
.project-task:hover, .project-task.selected { background:var(--hover); }
.project-task span, .project-task small { display:block; overflow-wrap:anywhere; }
.project-task small { color:var(--muted); font-size:12px; margin:4px 0; }
.has-selection .project-task { grid-template-columns:1fr 1fr; }
.has-selection .project-task > span:first-child, .has-selection .project-task > span:last-child { grid-column:1 / -1; }
.project-detail { border-left:1px solid var(--line); padding-left:24px; min-width:0; overflow-wrap:anywhere; }
.project-detail > p, .project-detail section, .project-detail details { margin-top:16px; }
.project-detail h4 { margin-bottom:8px; }
.project-detail details > summary { cursor:pointer; padding:8px 0; }
.project-detail details p { margin:8px 0; }
.project-facts { margin:20px 0; }
.project-facts > div { padding:14px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:120px minmax(0, 1fr); gap:12px; }
.project-facts dt { font-weight:500; }
.project-facts dd { margin:0; }
.project-facts dd p { margin-top:6px; }
.project-state { font-weight:500; }
.project-state.warn { color:var(--text); }
.project-reference { font-family:var(--mono); font-size:12px; overflow-wrap:anywhere; }
.project-reasons { padding-left:20px; }
.project-reasons li { margin:8px 0; }
.project-deliverable { margin-top:12px; }
.project-source { border-top:1px solid var(--line-strong); padding-top:20px; min-width:0; }
.work-project pre { white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.6 var(--mono); max-width:100%; margin-top:12px; }
@media (max-width:1100px) {
  .work-project.has-selection .project-layout { grid-template-columns:minmax(0, 1fr); }
  .project-detail { border-left:0; border-top:1px solid var(--line); padding:20px 0 0; }
}
@media (max-width:760px) {
  .project-task { grid-template-columns:1fr 1fr; gap:8px 16px; }
  .project-task > span:first-child, .project-task > span:last-child { grid-column:1 / -1; }
  .work-project.has-selection .project-tasks { display:none; }
  .project-facts > div { grid-template-columns:minmax(0, 1fr); gap:6px; }
  .work-project .btn { min-height:44px; }
  .project-reference { font-size:12px; }
}
@media(max-width:760px) { .inbox-workspace { grid-template-columns:minmax(0,1fr); } .inbox-list { border-right:0; border-bottom:1px solid var(--line); padding-right:0; } .inbox-reader { padding:20px 0; } }
/* Account menus stay above the mobile agent sheet. */
.topbar:has(.popover) { z-index:40; }
/* Short conversations keep natural row heights in the full-height pane. */
.agent-pane .chat-thread { align-content:start; }
.body.with-agent .tile { display:flex; flex-wrap:wrap; }
/* Activity and reports use the same panels, controls, and type as each desk. */
.feature-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:20px 0}
.feature-toolbar .field{margin:0;min-width:180px}
.feature-toolbar .input{width:100%}
.ledger-list{margin:18px 0;overflow:hidden}
.ledger-entry{padding:20px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.ledger-entry:last-child{border-bottom:0}
.ledger-entry h3{margin:10px 0;font-size:16px}
.ledger-entry time,.insight-card time{font-size:12px;color:var(--muted)}
.ledger-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.65;max-height:24rem;overflow:auto}
.ledger-compose{padding:16px;margin:18px 0}
.ledger-compose summary{cursor:pointer}
.ledger-compose form{display:grid;gap:14px;margin-top:16px}
.insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin-top:24px}
.insight-card{padding:22px;min-width:0}
.insight-card h2{font-size:20px;line-height:1.35;margin:18px 0 12px}
.insight-evidence{margin-top:18px;border-top:1px solid var(--line)}
.insight-controls{padding:20px;margin:14px 0}
.insight-control{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.insight-control>strong{min-width:80px}
.insight-control form{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-left:auto}
.insight-control label{display:flex;align-items:center;gap:8px}
.hour-input{width:72px}
@media(max-width:600px){.feature-toolbar .field{flex:1 1 100%}.insight-control form{margin-left:0;width:100%}.ledger-entry{padding:16px}.ledger-entry .row{flex-wrap:wrap}}
.social-media-options{margin:18px 0}.social-media-options summary{cursor:pointer;margin-bottom:16px}
.social-media-options fieldset{border:1px solid var(--line);border-radius:8px;padding:16px;margin:18px 0}
.social-media-options legend{padding:0 8px}.social-choice{display:flex;gap:10px;align-items:start;margin:12px 0;line-height:1.5}
.social-key-form{display:flex;gap:14px;align-items:end;flex-wrap:wrap;padding:18px;margin:16px 0}.social-key-form .field{flex:1;min-width:220px}.social-key-form .meta{width:100%;margin:0}
.social-schedule{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}.social-schedule form{display:grid;gap:14px}
.schedule-confirmation{padding:18px;margin:18px 0}.schedule-confirmation ul{padding-left:22px}.schedule-confirmation li{margin:8px 0}
.social-queue-row{padding:18px;margin:12px 0}.social-queue-row>.chip{margin-left:12px}

.preview-img video{display:block;width:100%;max-height:480px;aspect-ratio:16/9;object-fit:contain;background:#111}.preview-note{padding:0 12px 12px}

/* Approved product lockup and desk marks stay legible in the workspace. */
.wordmark .brand-mark { width:32px; height:32px; }
.wordmark-text { display:grid; gap:4px; }
.wordmark-text strong { font:500 .98rem/1 var(--mono); }
.wordmark-text small { font:400 .56rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.switcher .desk-mark { width:38px; height:38px; font-size:.8rem; }
.switcher .popover .desk-mark { width:32px; height:32px; }
.sidebar { overflow-y:auto; }
@media(max-width:600px) { .topbar { gap:5px; } .wordmark { gap:5px; } .wordmark-text strong { font-size:.8rem; } .wordmark .brand-mark { width:28px; height:28px; } }

@media(min-width:761px) { .scrim { display:none; } }

/* Work-first workspace: product typography, compact navigation, readable chat. */
.btn, .nav a, .desk-id small, .field > span, .field > legend, .chip { font-family:var(--sans); }
.wordmark-text strong { font-family:var(--sans); font-weight:600; letter-spacing:-.02em; }
.body.with-agent { grid-template-columns:232px minmax(0,1fr) 360px; }
.sidebar { padding:18px 12px; gap:18px; }

.nav a { min-height:34px; font-size:.88rem; gap:10px; }
.nav a[aria-current="page"] { font-weight:500; }
.desk-id { padding:10px; border:1px solid var(--sidebar-line); border-radius:10px; background:var(--panel); }
.desk-id strong { font:500 .94rem/1.4 var(--sans); }

.sidebar .bottom { margin-top:0; padding-top:12px; }
.body.with-agent .page { padding:32px; gap:26px; }
h1 { font-weight:500; font-size:1.85rem; letter-spacing:-.025em; }
.page-head .sub { max-width:60ch; font-size:.9rem; }

.agent-pane { background:var(--panel); padding:0 20px 20px; }
.agent-pane-head { min-height:72px; }
.agent-pane-head strong { font-weight:500; }
.agent-pane .chat-thread { gap:18px; padding-top:16px; }
.agent-pane .chat-message { border:0; padding:14px; border-radius:12px; background:var(--surface); }
.agent-pane .chat-message.member { margin-left:28px; background:var(--hover); }
.agent-pane .chat-message + .chat-message { border-top:0; }
.agent-pane .chat-meta { font-family:var(--sans); font-size:.7rem; }
.agent-pane .chat-message p, .agent-pane .chat-md { font-size:.9rem; line-height:1.65; }
.agent-pane .chat-composer { border-radius:12px; padding:14px; background:var(--panel); }
.agent-pane .chat-composer .textarea { min-height:64px; font-size:.9rem; }
.agent-pane .chat-status { font-family:var(--sans); flex-wrap:wrap; line-height:1.5; }
@media(max-width:1200px) { .body.with-agent { grid-template-columns:210px minmax(0,1fr) 320px; } .body.with-agent .page { padding:24px; }  }
@media(max-width:1000px) and (min-width:761px) { .body.with-agent { grid-template-columns:210px minmax(0,1fr); } }
@media(max-width:760px) { .body.with-agent { grid-template-columns:minmax(0,1fr); } .body.with-agent .page { padding:24px 16px; }     }

/* Five daily destinations, with local views and administration kept in context. */
.primary-navigation { gap:5px; }
.primary-navigation a { min-height:42px; font-size:.94rem; }
.sidebar .bottom { margin-top:auto; }
.personal-desk-mark { object-fit:contain; border-radius:6px; }
.switcher .popover small { display:block; color:var(--muted); font-size:.75rem; }
.section-navigation { display:flex; align-items:center; gap:24px; border-bottom:1px solid var(--line); overflow-x:auto; min-width:0; }
.section-navigation a { flex:none; padding:0 0 12px; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; font-weight:500; }
.section-navigation a[aria-current="page"] { color:var(--text); border-color:var(--text); }
.desk-section { display:grid; gap:14px; }
.desk-section .section-bar { margin:0; }
.desk-section .section-bar > a { font-size:.8rem; color:var(--muted); }
.desk-action-list { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); }
.desk-action-row { display:flex; align-items:center; gap:16px; padding:20px; min-width:0; }
.desk-action-row + .desk-action-row { border-top:1px solid var(--line); }
.desk-action-row .grow { flex:1; min-width:0; }
.desk-action-row strong { display:block; font-weight:500; overflow-wrap:anywhere; }
.desk-action-row .meta { margin-top:4px; }
.desk-row-icon { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:8px; background:var(--surface); color:var(--muted); }
.desk-action-row .chip { font-size:.75rem; }
.focused-work { outline:2px solid var(--focus); outline-offset:-2px; background:var(--surface); }
.settings-section, .connection-group { display:grid; gap:16px; }
.settings-section h2, .connection-group h2 { font-weight:500; }
.preference-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; border-top:1px solid var(--line); }
.preference-row .muted { font-size:.82rem; }
.settings-guidance { border-top:1px solid var(--line); padding-top:18px; }
.settings-guidance summary, .analytics-card > summary { cursor:pointer; font-weight:500; }
.settings-guidance > p { white-space:pre-line; margin-top:16px; color:var(--muted); }
.connection-reference { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.connection-reference .field { flex:1; min-width:200px; }
.connection-reference .meta { width:100%; }
.connection-group .section { margin:0; }
.connection-group .connect-agent { margin-top:0; }
.agent-pane-head > .row { gap:2px; flex-wrap:nowrap; }
.agent-scope .btn { white-space:normal; text-align:left; }
@media(min-width:761px) { .body:not(.with-agent) .page { width:100%; max-width:1160px; } }
@media(max-width:1100px) { .with-agent .desk-action-row { gap:12px; flex-wrap:wrap; } .with-agent .desk-action-row .grow { flex-basis:calc(100% - 52px); } .with-agent .desk-action-row > .chip { margin-left:46px; } .with-agent .desk-action-row > .btn { margin-left:auto; } }
@media(max-width:760px) { .section-navigation { gap:20px; } .desk-action-row { gap:12px; padding:16px; flex-wrap:wrap; } .desk-action-row .grow { flex-basis:calc(100% - 50px); } .desk-action-row > .chip { margin-left:46px; } .desk-action-row > .btn { margin-left:auto; } .preference-row { align-items:start; flex-direction:column; gap:12px; } .connection-reference .field { min-width:0; flex-basis:100%; } .section-bar { flex-wrap:wrap; } }

/* Assignment stays beside its source; model choices are secondary. */
.assignment-form { display:grid; gap:18px; padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--panel); margin-top:20px; }
.assignment-form .section-bar { margin:0; }
.assignment-form .section-bar h2 { font-weight:500; }
.assignment-form .field { min-width:0; }
.assignment-form .textarea { min-height:90px; width:100%; }
.assignment-context { padding:0 0 0 14px; border-left:1px solid var(--line); }
.assignment-context strong { font-size:.85rem; font-weight:500; }
.assignment-context blockquote, .assignment-details blockquote { margin:8px 0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--muted); line-height:1.6; }
.assignment-options > summary, .assignment-details > summary { cursor:pointer; font-size:.85rem; }
.assignment-options .field { margin:16px 0 10px; }
.assignment-footer { display:flex; align-items:center; gap:20px; justify-content:space-between; padding-top:16px; border-top:1px solid var(--line); }
.assignment-footer .btn { flex-shrink:0; }
.assignment-meta { color:var(--muted); font-size:.8rem; margin-top:8px; }
.assignment-details { margin-top:12px; }
.assignment-details > p { white-space:pre-wrap; overflow-wrap:anywhere; margin:12px 0; }
.inbox-reader > .btn { margin:12px 8px 12px 0; }
.inbox-reader > .meta { margin-bottom:0; }
@media(max-width:760px) { .assignment-form { padding:16px; } .assignment-footer { align-items:stretch; flex-direction:column; gap:12px; } }

/* Workspace shell: identity rail, contextual navigation, working surface. */
.body { grid-template-columns:280px minmax(0,1fr); }
.body.with-agent { grid-template-columns:280px minmax(0,1fr) 340px; }
.workspace-navigation { display:grid; grid-template-columns:60px minmax(0,1fr); min-height:0; overflow:hidden; background:var(--sidebar); }
.desk-rail { display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 7px 14px; border-right:1px solid var(--sidebar-line); min-height:0; }
.desk-rail-list { display:flex; flex-direction:column; gap:10px; width:100%; min-height:0; overflow-y:auto; scrollbar-width:thin; }
.desk-rail a,.desk-rail button { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:44px; min-height:44px; border:1px solid transparent; border-radius:12px; background:transparent; text-decoration:none; color:var(--muted); }
.desk-rail a:hover,.desk-rail button:hover { background:var(--sidebar-hover); }
.desk-rail a[aria-current="true"] { background:var(--panel); border-color:var(--line-strong); }
.desk-rail .desk-mark { width:32px; height:32px; border-radius:8px; }
.desk-rail .rail-all { margin-top:auto; }
.workspace-navigation .sidebar { width:auto; padding:22px 12px 14px; gap:20px; overflow:hidden; min-height:0; }
.workspace-heading { display:grid; gap:4px; padding:0 8px; }
.workspace-heading strong { font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.workspace-heading > span { font-size:.75rem; color:var(--muted); text-transform:capitalize; }
.sidebar-work { display:flex; flex-direction:column; min-height:72px; flex:1; border-top:1px solid var(--sidebar-line); padding-top:12px; }
.sidebar-work-heading { display:flex; align-items:center; justify-content:space-between; padding-left:10px; gap:8px; }
.sidebar-work-heading h2 { font:500 .78rem/1.4 var(--sans); color:var(--muted); }
.sidebar-work-list { overflow:auto; min-height:0; scrollbar-width:thin; }
.sidebar-work-list button { display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; border:0; border-radius:8px; background:transparent; padding:10px; font-size:.82rem; line-height:1.4; }
.sidebar-work-list button:hover,.sidebar-work-list button[aria-current="true"] { background:var(--sidebar-hover); }
.sidebar-work-list button > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-work-list small { display:block; margin-top:3px; color:var(--muted); font-size:.7rem; }
.task-dot { width:6px; height:6px; margin-top:6px; flex:none; border-radius:50%; background:var(--muted); }
.task-dot.in_progress { background:var(--ok); }.task-dot.interrupted { background:var(--bad); }.task-dot.verified { background:var(--soft); }
.sidebar-empty { color:var(--muted); font-size:.78rem; padding:10px; }
.workspace-navigation .sidebar .bottom { margin-top:auto; flex:none; }
.topbar .home-link { font-family:var(--sans); gap:10px; }
@media(min-width:761px) and (max-width:1100px) { .body.with-agent { grid-template-columns:280px minmax(0,1fr); }.agent-pane { position:fixed; right:0; top:56px; bottom:0; width:340px; z-index:25; box-shadow:var(--shadow); } }
@media(max-width:760px) {
 .body,.body.with-agent { grid-template-columns:minmax(0,1fr); }
 .workspace-navigation { position:fixed; left:0; top:56px; bottom:0; width:min(320px,calc(100vw - 36px)); z-index:30; transform:translateX(-100%); visibility:hidden; transition:transform .18s ease; }
 .workspace-navigation.open { transform:none; visibility:visible; }
 .workspace-navigation .sidebar { position:static; transform:none; visibility:inherit; box-shadow:none; }
 .agent-pane { width:auto; }
}
@media(prefers-reduced-motion:reduce) { .workspace-navigation { transition:none; } }

/* Named chats reuse the existing main and contextual agent panels. */
.chat-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;margin-bottom:12px}.field-label{display:block;margin-bottom:8px;font-size:.78rem;color:var(--muted)}.conversation-menu{display:flex;gap:6px;flex-wrap:wrap}.conversation-option{appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:500 .86rem/1.3 var(--sans);padding:8px 7px;display:inline-flex;gap:7px;align-items:center;cursor:pointer}.conversation-option:hover{color:var(--text);background:var(--hover)}.conversation-option[aria-current="page"]{color:var(--text);border-bottom-color:var(--desk-accent,var(--accent))}.conversation-option .icon{width:15px;height:15px;stroke-width:1.8}.new-chat{min-width:112px}.new-chat>summary{cursor:pointer;padding:8px 0;color:var(--accent)}.new-chat-form{display:grid;gap:18px;width:min(390px,calc(100vw - 52px));padding:20px 0}.new-chat-form fieldset{display:grid;gap:8px;border:0;padding:0;margin:0}.new-chat-form legend{margin-bottom:8px;font-size:.78rem;color:var(--muted)}.chat-kind,.chat-member-choice{display:flex;align-items:flex-start;gap:10px;padding:7px 0;cursor:pointer}.chat-kind span,.chat-member-choice span{display:grid;gap:2px}.chat-kind small,.chat-member-choice small{color:var(--muted);font-size:.76rem}.group-member-picker[hidden]{display:none}.chat-privacy-copy{margin-top:0}.chat-participants{display:grid;gap:12px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.chat-participants h3{font-size:.92rem}.chat-participants ul{display:grid;gap:10px;list-style:none;padding:0;margin:0}.chat-participants li{display:flex;gap:16px;align-items:center;justify-content:space-between}.chat-participants li>span{display:grid;gap:2px}.chat-participants li small{color:var(--muted);font-size:.75rem;text-transform:capitalize}.participant-add{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.participant-add .field{min-width:220px}.chat-binding{margin-bottom:14px;font-size:.85rem}.chat-binding .mono,.chat-pending code{overflow-wrap:anywhere}.chat-pending{padding:12px;border:1px solid var(--line);margin-top:12px}.chat-meta{flex-wrap:wrap}
@media (max-width:760px){.chat-controls{grid-template-columns:1fr;gap:10px}.new-chat-form{width:100%}.conversation-menu{display:grid}.conversation-option{justify-content:flex-start}}

/* Personal bookmark reading inherits the Knowledge shell and palette. */
.bookmark-tabs{display:flex;gap:8px;padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.bookmark-tabs [aria-pressed="true"]{background:var(--hover)}
.bookmark-search{margin-top:16px;display:flex;align-items:center;gap:12px}.bookmark-search .field{flex:1;margin:0}
.bookmark-layout{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:28px;margin-top:28px}
.bookmark-list{border-right:1px solid var(--line);padding-right:24px;min-width:0}
.bookmark-row{display:flex;flex-direction:column;gap:7px;width:100%;text-align:left;padding:16px 10px;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;font:inherit;cursor:pointer;overflow-wrap:anywhere}
.bookmark-row:hover,.bookmark-row[aria-pressed="true"]{background:var(--hover)}
.bookmark-row>span:last-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:13px}
.bookmark-reader{min-width:0;max-width:75ch;overflow-wrap:anywhere}.bookmark-reader h2{margin:0}
.bookmark-source{white-space:pre-wrap;line-height:1.65;margin:22px 0}
.bookmark-reader section,.bookmark-reader details,.bookmark-coverage{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.bookmark-reader details{margin-bottom:22px}.bookmark-reader .mono{overflow-wrap:anywhere}
.bookmark-reader summary,.bookmark-coverage summary{cursor:pointer;min-height:32px}.bookmark-analysis+.bookmark-analysis{margin-top:28px}
@media(max-width:850px){.bookmark-layout{grid-template-columns:1fr}.bookmark-list{border-right:0;padding-right:0;border-bottom:1px solid var(--line);padding-bottom:20px}.bookmark-search{gap:8px}.bookmark-reader{max-width:none}}

@media(max-width:850px){.bookmark-layout.reading .bookmark-list{display:none}.bookmark-tabs .btn,.bookmark-reader .btn,.bookmark-search .btn{min-height:44px}.bookmark-reader summary,.bookmark-coverage summary{min-height:44px}}

.bookmark-link-text{display:block;white-space:pre-wrap;margin-top:10px;line-height:1.6}

.work-bookmarks{display:grid;gap:8px;margin-top:16px}.work-bookmarks .btn{justify-content:flex-start;white-space:normal;text-align:left;padding:8px}

/* Notes lead with usable knowledge; source evidence remains one disclosure away. */
.bookmark-note-summary{font-size:1.08rem;line-height:1.7;margin-top:20px}.bookmark-takeaways{padding-left:22px;line-height:1.7}.bookmark-takeaways li+li{margin-top:10px}.bookmark-prompts{display:flex;gap:10px;flex-wrap:wrap}.bookmark-prompts .btn{white-space:normal;text-align:left;min-height:44px}.bookmark-question{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;text-align:left;color:inherit;background:transparent;border:1px solid var(--line);border-radius:6px;padding:12px;margin-top:10px;font:inherit;cursor:pointer}.bookmark-question:hover{background:var(--hover)}.bookmark-question svg{flex-shrink:0}.bookmark-reader h4{margin-bottom:8px}

.home-brand-mark{width:24px;height:24px;object-fit:contain}.bookmark-reader h2{font-size:1.35rem;line-height:1.3}.bookmark-search{margin-bottom:18px}

/* Coding is a Desk view inside the existing Cream shell. */
.coding-status { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; margin-bottom:18px; }
.coding-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
.coding-conversation,.coding-artifact { min-width:0; }
.coding-messages { max-height:58vh; overflow:auto; }
.coding-message,.coding-tool { padding:14px 0; border-bottom:1px solid var(--line); }
.coding-layout pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; max-height:420px; overflow:auto; }
.coding-composer { margin-top:18px; }
.coding-composer textarea { width:100%; }
.coding-files { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.coding-files button { overflow-wrap:anywhere; max-width:100%; }
.coding-preview { width:100%; min-height:450px; border:1px solid var(--line); background:white; margin-top:14px; }
@media(max-width:950px) { .coding-layout { grid-template-columns:minmax(0,1fr); } .coding-messages { max-height:50vh; } }

/* Ezra uses the existing Desk shell and divided project surfaces. */
.ezra { min-width:0; }
.ezra h2 .meta { margin-left:12px; font-weight:400; }
.ezra-selectors { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr); gap:16px; margin:18px 0; }
.ezra-selectors .field { min-width:0; }
.ezra select,.ezra input { width:100%; min-width:0; border:1px solid var(--line); border-radius:6px; padding:10px; color:var(--text); background:var(--bg); font:inherit; }
.ezra-summary { overflow-wrap:anywhere; margin:14px 0; }
.ezra-layout { display:grid; grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr); gap:24px; border-top:1px solid var(--line); padding-top:18px; }
.ezra-units { min-width:0; }
.ezra-unit { display:flex; flex-direction:column; gap:7px; width:100%; padding:16px 12px; text-align:left; border:0; border-bottom:1px solid var(--line); color:var(--text); background:transparent; font:inherit; overflow-wrap:anywhere; }
.ezra-unit:hover,.ezra-unit.selected { background:var(--hover); }
.ezra-unit span,.ezra-unit small { color:var(--muted); font-size:12px; }
.ezra-detail { min-width:0; padding-left:24px; border-left:1px solid var(--line); overflow-wrap:anywhere; }
.ezra-detail > p,.ezra-detail > details { margin:14px 0; }
.ezra-detail summary { cursor:pointer; padding:10px 0; }
.ezra-detail h4 { margin:8px 0; }
.ezra-steering { border-top:1px solid var(--line); padding-top:18px; margin-top:20px; }
.ezra-priority { max-width:160px; margin:12px 0; }
.ezra .wrap { flex-wrap:wrap; gap:8px; }
.ezra .btn:disabled { cursor:not-allowed; opacity:.5; }
.ezra-receipts { margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
.ezra-receipts article,.ezra-evidence article { border-bottom:1px solid var(--line); padding:12px 0; }
.ezra-receipts article p { margin:8px 0; }
@media(max-width:1000px) {
  .ezra-layout { grid-template-columns:minmax(0,1fr); }
  .ezra-detail { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:20px; }
}
@media(max-width:640px) {
  .ezra-selectors { grid-template-columns:minmax(0,1fr); }
  .ezra .section-bar { align-items:flex-start; flex-wrap:wrap; }
  .ezra-steering .btn { min-height:44px; }
}

.ezra-intake { border-block: 1px solid var(--line); padding-block: 20px; margin-block: 18px; }
.ezra-intake details { margin-block: 16px; }
.ezra-reply { border-top: 1px solid var(--line); padding-block: 12px; overflow-wrap: anywhere; }
.ezra-intake select { max-width: 100%; }

/* Desk accent (#2): desk.color themes the desk shell. Variables are set inline on .body.desk-accented. */
.desk-accented { --accent: var(--desk-accent); --focus: var(--desk-accent); --accent-soft: var(--desk-accent-soft); }
.desk-accented .sidebar { box-shadow: inset 0 3px 0 var(--desk-accent); }
.desk-accented .workspace-heading strong { color: var(--text); box-shadow: inset 0 -2px 0 var(--desk-accent-line); }
.desk-accented .nav a[aria-current="page"] { background: var(--desk-accent-soft); box-shadow: inset 3px 0 0 var(--desk-accent); }
.desk-accented .nav a[aria-current="page"] .icon { color: var(--desk-accent); }
.desk-accented .page-head { border-bottom: 2px solid var(--desk-accent); padding-bottom: 12px; }
.desk-accented .section-navigation a[aria-current="page"] { border-color: var(--desk-accent); }
.desk-accented .btn.primary { background: var(--desk-accent); border-color: var(--desk-accent); color: var(--desk-accent-ink); }
.desk-accented .btn.primary:hover { filter: brightness(.92); background: var(--desk-accent); border-color: var(--desk-accent); }
.desk-accented .desk-rail a[aria-current="true"] .desk-mark { box-shadow: 0 0 0 2px var(--desk-accent); }
.desk-accented .desk-rail a[aria-current="true"] { border-color: var(--desk-accent); }

/* #3: Agent nav item and binding header. */
.nav-glyph { width: 16px; text-align: center; font-size: .95rem; line-height: 1; color: var(--accent); flex: none; }
.nav a.nav-agent { color: var(--sidebar-text); font-weight: 500; }
.agent-binding { display: flex; align-items: center; gap: 12px; margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.agent-binding > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.agent-binding small { color: var(--muted); font-size: .8rem; }
.agent-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 1.05rem; flex: none; }

/* ── OpenClaw shell (step 4): sidebar | main + pinned composer | standing agent chat ──────────────────────
   Matches the approved declutter mockups: one accent (the desk colour), theme greys, no chips in the chrome.
   Every colour is a theme token, so Light and Dark (themes.css, per user) both work without overrides. */
.oc-shell { --oc-accent: var(--desk-accent, #1e3a6e); --oc-accent-fill: var(--desk-accent, #1e3a6e); --oc-accent-ink: var(--desk-accent-ink, #ffffff); }
:root[data-theme="dark"] .oc-shell { --oc-accent: color-mix(in srgb, var(--desk-accent, #1e3a6e) 45%, #ffffff); }
.app.oc-app { grid-template-rows: minmax(0, 1fr); }
.body.oc-shell { grid-template-columns: 240px minmax(0, 1fr) 330px; min-height: 0; height: 100%; overflow: hidden; font-size: 14px; }
.oc-shell .grow { flex: 1; }
.oc-shell .icon { width: 16px; height: 16px; }
.oc-ib { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--soft); cursor: pointer; }
.oc-ib:hover, .oc-ib.is-open, .oc-ib[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.oc-av { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; background: var(--surface); font: 500 .6rem/1 var(--mono); color: var(--muted); }
.oc-av-agent { background: var(--oc-accent-fill); color: var(--oc-accent-ink); font: 400 .74rem/1 var(--sans); }
.oc-av-me { background: var(--sidebar-active); color: var(--text); }
.oc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--oc-accent); flex: none; display: inline-block; }
.oc-spin { color: var(--soft); width: 14px !important; height: 14px !important; flex: none; }
.oc-state { display: inline-grid; place-items: center; color: var(--soft); flex: none; }
.oc-state .icon { width: 14px; height: 14px; }
.oc-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font: 500 .8rem/1 var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer; }
.oc-btn .icon { width: 14px; height: 14px; color: var(--muted); }
.oc-btn:hover { background: var(--hover); }
.oc-link { border: 0; background: transparent; padding: 4px 2px; font: 500 .8rem/1 var(--sans); color: var(--oc-accent); white-space: nowrap; cursor: pointer; text-decoration: none; }
.oc-link:hover { text-decoration: underline; }
.oc-link:disabled { opacity: .5; cursor: default; text-decoration: none; }
.oc-tag { font: 500 .66rem/1 var(--mono); color: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px; white-space: nowrap; }

/* Sidebar */
.oc-shell .workspace-navigation.oc-sidewrap { display: block; grid-template-columns: none; min-height: 0; overflow: visible; background: var(--sidebar); border-right: 1px solid var(--sidebar-line); position: relative; z-index: 20; }
.oc-shell .workspace-navigation .sidebar.oc-side { display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 0; padding: 0; overflow: visible; border: 0; box-shadow: none; background: transparent; }
.oc-side-head { display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 10px; flex: none; }
.oc-switchwrap, .oc-pickwrap { position: relative; display: inline-flex; min-width: 0; }
.oc-desk-switch { display: inline-flex; align-items: center; gap: 9px; height: 34px; min-width: 0; padding: 0 8px 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
.oc-desk-switch:hover, .oc-desk-switch[aria-expanded="true"] { background: var(--sidebar-hover); }
.oc-desk-switch strong { font-weight: 500; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-desk-switch .icon { width: 14px; height: 14px; color: var(--soft); flex: none; }
.oc-shell .desk-mark.oc-mark { width: 24px; height: 24px; border-radius: 6px; font-size: .5rem; flex: none; }
.oc-shell .desk-mark.oc-mark img { width: 100%; height: 100%; }
.oc-shell .popover.oc-deskmenu { top: calc(100% + 4px); left: 0; right: auto; width: 252px; max-height: 60vh; overflow-y: auto; }
.oc-deskmenu a > span, .oc-deskmenu button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-deskmenu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.oc-shell .nav.oc-nav { display: grid; gap: 2px; padding: 4px 10px 8px; flex: none; border: 0; }
.oc-shell .oc-nav a { height: 34px; min-height: 34px; padding: 0 10px; gap: 11px; border-radius: 8px; color: var(--muted); font: 400 .88rem/1.3 var(--sans); box-shadow: none; }
.oc-shell .oc-nav a .icon { color: inherit; }
.oc-shell .oc-nav a[aria-current="page"], .oc-shell.desk-accented .oc-nav a[aria-current="page"] { background: var(--sidebar-active); color: var(--text); font-weight: 500; box-shadow: none; }
.oc-shell.desk-accented .oc-nav a[aria-current="page"] .icon { color: inherit; }
.oc-shell .oc-nav a.nav-agent { color: var(--muted); font-weight: 400; }
.oc-shell .oc-nav a.nav-agent[aria-current="page"] { color: var(--text); font-weight: 500; }
.oc-shell .nav-glyph { color: var(--oc-accent); }
.oc-shell .oc-nav .count { font: 400 .74rem/1 var(--mono); color: var(--soft); }
.oc-sidescroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
.oc-sec { padding: 18px 20px 6px; margin: 0; font: 500 .74rem/1.3 var(--sans); color: var(--soft); letter-spacing: 0; }
.oc-list { display: grid; gap: 2px; padding: 0 10px; }
.oc-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-decoration: none; text-align: left; font: 400 .86rem/1.3 var(--sans); min-width: 0; cursor: pointer; }
.oc-row:hover { background: var(--sidebar-hover); }
.oc-row.is-on { background: var(--sidebar-active); font-weight: 500; }
span.oc-row { cursor: default; } span.oc-row:hover { background: transparent; }
.oc-row-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-person { padding-left: 7px; }
.oc-run { font: 500 .74rem/1 var(--mono); color: var(--oc-accent); display: inline-flex; align-items: center; gap: 5px; }
.oc-run::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oc-accent); }
.oc-more { display: block; border: 0; background: transparent; padding: 6px 20px; font: 400 .78rem/1.3 var(--sans); color: var(--soft); cursor: pointer; }
.oc-more:hover { color: var(--text); }
.oc-none { padding: 4px 10px; font-size: .78rem; color: var(--soft); }
.oc-side-foot { position: relative; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 10px 0 16px; flex: none; font-size: .86rem; }
.oc-shell .popover.oc-gear { top: auto; bottom: calc(100% - 4px); left: 10px; right: 10px; width: auto; }
.oc-gear small { margin-left: auto; color: var(--soft); font-size: .76rem; }
.oc-gear .label { font: 500 .72rem/1.3 var(--sans); color: var(--soft); }

/* Appearance (per user) */
.popover.oc-pop { top: auto; bottom: calc(100% - 2px); left: 12px; right: auto; width: 300px; padding: 16px; gap: 14px; border-radius: 12px; border-color: var(--line); }
.oc-pop-h { display: flex; align-items: baseline; justify-content: space-between; }
.oc-pop-h b { font-weight: 500; font-size: .92rem; }
.oc-pop-h span { font-size: .76rem; color: var(--soft); }
.oc-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.popover .oc-theme { display: grid; gap: 8px; min-height: 0; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.popover .oc-theme:hover { background: var(--hover); }
.popover .oc-theme.is-on { border-color: var(--oc-accent, #1e3a6e); box-shadow: 0 0 0 1px var(--oc-accent, #1e3a6e); color: var(--text); }
.popover .oc-theme[aria-checked="false"] .icon { visibility: visible; }
.oc-sw { display: grid; grid-template-columns: 1fr 2fr; height: 46px; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.oc-sw-light i:first-child { background: #f0efea; } .oc-sw-light i:last-child { background: #faf9f6; }
.oc-sw-dark i:first-child { background: #191919; } .oc-sw-dark i:last-child { background: #111111; }
.oc-sw-system { grid-template-columns: 1fr; background: linear-gradient(135deg, #faf9f6 50%, #111111 50%); }
.oc-sw-system i { display: none; }
.oc-theme-l { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 500 .8rem/1 var(--sans); padding-bottom: 2px; }
.oc-theme-l .icon { width: 14px; height: 14px; }
.oc-pop-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: .76rem; line-height: 1.45; color: var(--muted); }
.oc-pop-note .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--oc-accent, #1e3a6e); flex: none; }
.oc-topappearance .popover.oc-pop { top: 48px; bottom: auto; left: auto; right: 12px; }

/* Main column */
.oc-shell .main.oc-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.oc-mainhead { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 16px 0 24px; flex: none; min-width: 0; border-bottom: 1px solid var(--line); }
.oc-title { margin: 0; font-size: 1.02rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.oc-sub { font-size: .8rem; color: var(--soft); white-space: nowrap; }
.oc-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--surface); flex: none; }
.oc-seg a, .oc-seg button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: 500 .8rem/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.oc-seg [aria-current="page"], .oc-seg [aria-selected="true"] { background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.oc-page { flex: 1; min-height: 0; overflow-y: auto; }
.oc-shell .page.oc-pagebody { max-width: 1080px; padding: 24px 32px 32px; gap: 24px; }
.oc-shell.desk-accented .page-head { border-bottom: 0; padding-bottom: 0; }
.oc-shell .page-head:empty { display: none; }
.oc-mtop { display: none; }

/* Overview: decluttered rows, whitespace instead of rules */
.oc-ov-head h1 { font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; margin: 0; }
.oc-ov-head p { color: var(--muted); font-size: .9rem; margin: 4px 0 0; }
.oc-ov-head .oc-tagline { color: var(--soft); font-size: .8rem; }
.oc-ovsec { display: grid; gap: 2px; }
.oc-ovsec h2 { font: 500 .78rem/1.3 var(--sans); color: var(--soft); padding: 0 12px 6px; margin: 0; letter-spacing: 0; }
.oc-orow { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 12px; border-radius: 10px; min-width: 0; }
.oc-orow:hover { background: var(--hover); }
.oc-orow > .oc-dot { margin: 0 -2px; }
.oc-lead { display: inline-grid; place-items: center; width: 14px; color: var(--soft); flex: none; }
.oc-lead .icon { width: 14px; height: 14px; }
.oc-orow-t { display: grid; flex: 1; min-width: 0; gap: 2px; }
.oc-orow-t b { font-weight: 500; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-orow-t small { font-size: .8rem; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-more-ov { display: inline-flex; align-items: center; gap: 4px; justify-self: start; padding: 6px 12px; font-size: .84rem; color: var(--soft); text-decoration: none; }
.oc-more-ov:hover { color: var(--text); }
.oc-more-ov .icon { width: 14px; height: 14px; }

/* Agent tab: one centered conversation column */
.oc-shell .page.oc-tab-chat { max-width: none; padding: 0; display: block; }
.oc-convo-col { max-width: 700px; margin: 0 auto; padding: 16px 28px 16px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.oc-convo .agent-binding { margin: 0; padding: 8px 12px; border-radius: 10px; gap: 10px; }
.oc-convo .agent-avatar { width: 26px; height: 26px; font-size: .8rem; background: var(--oc-accent-fill); color: var(--oc-accent-ink); }
.oc-convo .agent-binding strong { font-weight: 500; font-size: .86rem; }
.oc-convo .agent-binding small { font-size: .74rem; color: var(--soft); }
.oc-convo .conversation { position: relative; display: grid; gap: 12px; }
.oc-convo .chat-controls { margin: 0; gap: 10px; align-items: center; font-size: .8rem; }
.oc-convo .chat-controls .field { flex-direction: row; align-items: center; gap: 8px; color: var(--soft); }
.oc-convo .chat-controls select { height: 30px; padding: 0 8px; font-size: .8rem; }
.oc-convo .conversation > .muted, .oc-convo .chat-binding { font-size: .76rem; color: var(--soft); margin: 0; }
.oc-convo .chat-status { font-size: .76rem; }
.oc-convo .chat-thread { max-height: none; overflow: visible; border: 0; display: grid; gap: 20px; padding: 8px 0; }
.oc-convo .chat-message, .oc-convo .chat-message + .chat-message { border: 0; padding: 0; }
.oc-convo .chat-message.member { justify-self: end; max-width: 84%; justify-items: end; }
.oc-convo .chat-message.member p { background: var(--surface); border-radius: 14px; padding: 9px 14px; }
.oc-convo .chat-message p, .oc-convo .chat-md { font-size: .94rem; line-height: 1.65; }
.oc-convo .chat-meta { order: 2; font: 400 .7rem/1.3 var(--mono); color: var(--soft); gap: 8px; }
.oc-convo .chat-meta strong { font: inherit; color: inherit; }
.oc-convo .chat-message.agent .chat-meta strong::before { content: none; }
.oc-thread-head { min-height: 38px; display: flex; align-items: center; gap: 4px; }
.oc-chatmenu-wrap { position: relative; min-width: 0; }
.oc-chat-title { appearance: none; border: 0; background: transparent; color: var(--text); min-width: 0; max-width: min(430px, 60vw); padding: 7px 6px; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; font: 500 .94rem/1.3 var(--sans); cursor: pointer; }
.oc-chat-title:hover, .oc-chat-title[aria-expanded="true"] { background: var(--hover); }
.oc-chat-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-chat-title .icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--soft); }
.oc-chat-title .icon:last-child { width: 13px; height: 13px; }
.oc-chat-list { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; width: min(330px, calc(100vw - 42px)); padding: 7px; display: grid; gap: 2px; }
.oc-chat-list button { appearance: none; border: 0; background: transparent; color: var(--text); width: 100%; min-width: 0; padding: 8px 9px; border-radius: 7px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; align-items: center; gap: 7px; text-align: left; font: 400 .84rem/1.3 var(--sans); cursor: pointer; }
.oc-chat-list button:hover, .oc-chat-list button[aria-checked="true"] { background: var(--hover); }
.oc-chat-list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-chat-list button > .icon:last-child { opacity: 0; }
.oc-chat-list button[aria-checked="true"] > .icon:last-child { opacity: 1; }
.new-chat-panel, .chat-participants { position: absolute; z-index: 28; top: 44px; right: 0; width: min(390px, calc(100vw - 42px)); max-height: min(650px, calc(100vh - 160px)); overflow: auto; padding: 18px; box-shadow: var(--shadow); }
.new-chat-panel .section-bar, .chat-participants .section-bar { margin: 0; align-items: center; }
.new-chat-panel h3, .chat-participants h3 { font-size: .95rem; }
.new-chat-form { width: 100%; padding: 12px 0 0; gap: 14px; }
.chat-participants { border: 1px solid var(--line); }
.chat-participants ul { margin-top: 4px; }
.participant-add { display: grid; gap: 5px; }
.participant-add > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.participant-add > div > span { min-width: 0; display: grid; gap: 2px; overflow-wrap: anywhere; }
.participant-add small { color: var(--soft); font-size: .74rem; text-transform: capitalize; }
.oc-convo .chat-privacy-copy { margin: -6px 6px 2px; font-size: .73rem; }

/* Composer: one component for main and right */
.oc-composer-wrap { padding: 8px 20px 16px; flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.oc-composer-wrap.oc-big { padding: 8px 28px 18px; }
.oc-composer-wrap.oc-big > * { width: 100%; max-width: 660px; margin: 0 auto; }
.oc-composer { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.oc-composer:focus-within { border-color: var(--line-strong); }
.oc-ta { display: block; width: 100%; min-height: 44px; max-height: 240px; border: 0; background: transparent; resize: none; padding: 12px 14px 4px; font: 400 .9rem/1.5 var(--sans); color: var(--text); outline: 0; }
.oc-ta::placeholder { color: var(--soft); }
.oc-ta:disabled { cursor: not-allowed; }
.oc-cbar { display: flex; align-items: center; gap: 6px; padding: 4px 8px 8px; min-width: 0; }
.oc-ctx { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 60%; height: 26px; padding: 0 9px; border-radius: 7px; background: var(--surface); font-size: .76rem; color: var(--muted); }
.oc-ctx:has(button) { padding-right: 2px; }
.oc-ctx > .icon { width: 13px; height: 13px; flex: none; }
.oc-ctx > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-ctx button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; background: transparent; color: var(--soft); cursor: pointer; flex: none; }
.oc-ctx button .icon { width: 12px; height: 12px; }
.oc-cnote { font-size: .74rem; color: var(--warn); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-pick, .oc-pick-head { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 4px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: 500 .8rem/1 var(--sans); white-space: nowrap; cursor: pointer; }
.oc-pick:hover, .oc-pick[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.oc-pick .oc-av { width: 18px; height: 18px; font-size: .6rem; }
.oc-pick .icon { width: 12px; height: 12px; }
.oc-pick-head { height: auto; padding: 0; color: var(--text); font: 500 .9rem/1.2 var(--sans); justify-self: start; }
.oc-pick-head .icon { width: 13px; height: 13px; color: var(--soft); }
.oc-shell .popover.oc-pickmenu { top: auto; bottom: calc(100% + 6px); right: 0; left: auto; width: 248px; }
.oc-shell .popover.oc-pickmenu-head { top: calc(100% + 6px); bottom: auto; left: -4px; right: auto; }
.oc-pickmenu > * > span { display: grid; gap: 1px; flex: 1; min-width: 0; }
.oc-pickmenu b { font-weight: 500; font-size: .86rem; }
.oc-pickmenu small { font-size: .74rem; color: var(--soft); }
.oc-pickmenu [disabled] { opacity: .55; cursor: not-allowed; }
.oc-pickmenu [disabled]:hover { background: transparent; }
.oc-send { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--oc-accent-fill); color: var(--oc-accent-ink); flex: none; cursor: pointer; }
.oc-send:disabled { opacity: .35; cursor: default; }
.oc-send .icon { width: 15px; height: 15px; }
.oc-cbar .btn.mic { width: 28px; height: 28px; min-height: 28px; padding: 0; }
.oc-strip { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 6px; font-size: .76rem; color: var(--soft); }
.oc-strip > span { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-strip .icon { width: 12px; height: 12px; color: var(--oc-accent); }
.oc-strip.oc-warn > span { color: var(--warn); }

/* Thread (chat-thread.js) */
.oc-msgs { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 20px; align-content: end; padding: 18px 18px 8px; grid-template-columns: minmax(0, 1fr); }
.oc-m { display: grid; gap: 4px; min-width: 0; }
.oc-m p, .oc-md { margin: 0; font-size: .88rem; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.oc-md { white-space: normal; }
.oc-md > * { margin: 0 0 .5em; } .oc-md > :last-child { margin-bottom: 0; }
.oc-md ul, .oc-md ol { padding-left: 1.3em; }
.oc-md code { padding: .1em .3em; border-radius: 6px; background: var(--surface); font: .86em var(--mono); }
.oc-me { justify-self: end; max-width: 84%; justify-items: end; }
.oc-me p { background: var(--surface); border-radius: 14px; padding: 9px 14px; }
.oc-meta { font: 400 .7rem/1.3 var(--mono); color: var(--soft); }
.oc-send-error { display: flex; align-items: center; gap: 8px; color: var(--warn); font-size: .75rem; line-height: 1.4; }
.oc-send-error button { min-height: 28px; border: 0; padding: 3px 0; background: transparent; color: var(--text); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.oc-send-error button:hover { color: var(--accent); }
.oc-send-error button:disabled { opacity: .5; cursor: default; }
.oc-composer-wrap > .oc-send-error { padding: 0 8px 8px; }

.oc-copy { border: 0; padding: 2px 6px; margin-left: 6px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; opacity: 0; }
.oc-m:hover .oc-copy, .oc-copy:focus-visible { opacity: 1; }
.conversation .oc-msgs { padding: 12px 0; }
.conversation .oc-m { max-width: 72ch; }
.conversation .oc-me { max-width: min(84%, 64ch); }
.oc-m.fresh { animation: arrive .22s ease-out; }
.oc-empty { align-self: center; justify-self: center; text-align: center; color: var(--soft); font-size: .84rem; max-width: 28ch; }

/* Right column: standing chat */
.oc-right { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-left: 1px solid var(--line); background: var(--bg); overflow: hidden; }
.oc-rhead { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px 0 18px; flex: none; min-width: 0; border-bottom: 1px solid var(--line); }
.oc-rhead > .oc-av { width: 28px; height: 28px; }
.oc-rhead-t { display: grid; flex: 1; min-width: 0; gap: 1px; }
.oc-rhead-t small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .76rem; color: var(--soft); white-space: nowrap; }
.oc-rhead-t small > span { overflow: hidden; text-overflow: ellipsis; }
.oc-rhead-t small .icon { width: 12px !important; height: 12px !important; }
.oc-right .oc-composer-wrap { padding: 8px 14px 16px; }

/* Inbox stub inside the shell */
.oc-tab-inbox .inbox-workspace { border-top: 0; }

@media (prefers-reduced-motion: reduce) { .oc-m.fresh { animation: none; } }
/* Narrower desktops keep all three columns by trimming the sidebar and chat. */
@media (min-width: 761px) and (max-width: 1100px) { .body.oc-shell { grid-template-columns: 208px minmax(0, 1fr) 290px; } .oc-shell .page.oc-pagebody { padding: 20px 22px 28px; } .oc-mainhead { gap: 10px; padding-left: 18px; } }

/* Mobile (≤760): one column. The top segments switch between this page and the standing chat. */
@media (max-width: 760px) {
  .body.oc-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); }
  .oc-mtop { display: flex; align-items: center; height: 56px; padding: 0 10px; gap: 6px; border-bottom: 1px solid var(--line); grid-row: 1; background: var(--bg); }
  .oc-mseg a, .oc-mseg button { height: 32px; padding: 0 16px; font-size: .86rem; }
  .oc-mseg .oc-dot { width: 6px; height: 6px; }
  .oc-shell .main.oc-main, .oc-right { grid-row: 2; grid-column: 1; }
  .oc-mainhead { display: none; }
  .oc-right { display: none; border-left: 0; }
  .oc-pane-chat .oc-right { display: flex; }
  .oc-pane-chat .main.oc-main { display: none; }
  .oc-shell .workspace-navigation.oc-sidewrap { position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, calc(100vw - 48px)); z-index: 40; transform: translateX(-100%); visibility: hidden; transition: transform .18s ease; box-shadow: var(--shadow); }
  .oc-shell .workspace-navigation.oc-sidewrap.open { transform: none; visibility: visible; }
  .oc-shell .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .35); border: 0; }
  .oc-shell .page.oc-pagebody { padding: 18px 20px 24px; gap: 20px; }
  .oc-convo-col { padding: 14px 16px; }
  .oc-composer-wrap, .oc-composer-wrap.oc-big, .oc-right .oc-composer-wrap { padding: 8px 12px 12px; border-top: 1px solid var(--line); }
  .oc-cbar .grow { display: none; }
  .oc-ctx { flex: 1; max-width: none; }
  .oc-pick { gap: 0; padding: 0 4px; } .oc-pick > span:not(.oc-av), .oc-pick .icon { display: none; }
  .oc-shell .popover.oc-pickmenu { right: -40px; }
  .oc-ov-head h1 { font-size: 1.25rem; }
}

/* One workspace (scope change): fixed workspace header, Agents first, desk filter, agent page with Access */
.oc-wsname { display: inline-flex; align-items: center; gap: 9px; min-width: 0; padding: 0 4px; }
.oc-wsname strong { font-weight: 500; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-brand { width: 22px; height: 22px; flex: none; }
.oc-off { color: var(--soft); }
.oc-off small { font-size: .74rem; color: var(--soft); }
.oc-group:first-child .oc-sec { padding-top: 6px; }
.oc-shell .oc-sidescroll .nav.oc-nav { padding-top: 14px; }
.oc-deskfilter { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
.oc-deskfilter::-webkit-scrollbar { display: none; }
.oc-subnav { display: flex; gap: 18px; margin: -6px 0 0; font-size: .84rem; }
.oc-subnav a { color: var(--soft); text-decoration: none; padding: 2px 0; border-bottom: 2px solid transparent; }
.oc-subnav a[aria-current="page"] { color: var(--text); border-color: var(--oc-accent); }
.oc-mainhead > .oc-av { width: 28px; height: 28px; margin-right: -6px; }
.oc-orow-t b { display: flex; align-items: center; gap: 9px; }
.oc-orow-t b .oc-dot { flex: none; }
.oc-orow > .oc-av { width: 28px; height: 28px; }
.oc-btn.oc-btn-fill { background: var(--oc-accent-fill); border-color: var(--oc-accent-fill); color: var(--oc-accent-ink); }
.oc-btn.oc-btn-fill .icon { color: inherit; }
.oc-btn.oc-btn-fill:hover { filter: brightness(1.08); background: var(--oc-accent-fill); }
/* Right chat header: agent switcher */
.oc-switch { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.oc-switch .oc-pick-head { gap: 6px; height: 32px; padding: 0 8px 0 3px; border-radius: 999px; background: var(--surface); font-size: .86rem; }
.oc-switch .oc-pick-head .oc-av { width: 26px; height: 26px; }
.oc-chipav { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; text-decoration: none; }
.oc-chipav .oc-av { width: 26px; height: 26px; }
.oc-chipav:hover .oc-av { box-shadow: 0 0 0 2px var(--line-strong); }
.oc-addav { border: 1px dashed var(--line-strong); color: var(--soft); width: 26px; height: 26px; }
.oc-addav:disabled { cursor: not-allowed; opacity: .7; }
.oc-addav .icon { width: 13px; height: 13px; }
.oc-shell .oc-rhead { padding-left: 12px; border-bottom: 0; }
.oc-rstatus { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 16px 10px; font-size: .76rem; color: var(--soft); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.oc-rstatus > span { overflow: hidden; text-overflow: ellipsis; }
.oc-shell .popover.oc-pickmenu-head { left: 0; }
/* Agent Access (UI shell; grants are step 4b) */
.oc-access { display: grid; gap: 10px; max-width: 860px; }
.oc-access-intro { margin: 0; color: var(--muted); font-size: .9rem; max-width: 62ch; }
.oc-access-sample { margin: 0; font-size: .76rem; color: var(--soft); }
.oc-access h2 { font: 500 .78rem/1.3 var(--sans); color: var(--soft); margin: 14px 0 2px; padding: 0 10px; letter-spacing: 0; }
.oc-grant { display: grid; grid-template-columns: 32px minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr) auto; align-items: center; gap: 12px 14px; padding: 8px 10px; border-radius: 10px; }
.oc-grant:hover { background: var(--hover); }
.oc-grant-ic { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--surface); color: var(--muted); flex: none; }
.oc-grant-t, .oc-grant-s, .oc-grant-w { display: grid; gap: 2px; min-width: 0; }
.oc-grant b { font-weight: 500; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-grant small { font-size: .78rem; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-grant code { font: 400 .7rem/1.3 var(--mono); color: var(--soft); background: none; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-grant-w span { font-size: .8rem; color: var(--muted); }
.oc-grant-note { font-size: .74rem; color: var(--soft); }
.oc-access-empty { display: flex; gap: 12px; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 12px; }
.oc-access-empty b { font-weight: 500; font-size: .9rem; }
.oc-access-empty p { margin: 4px 0 0; font-size: .82rem; color: var(--muted); max-width: 60ch; }
.oc-audit { display: grid; gap: 8px; padding: 0 10px; }
.oc-audit > div { display: flex; gap: 16px; font-size: .84rem; min-width: 0; }
.oc-audit time { font: 400 .74rem/1.6 var(--mono); color: var(--soft); width: 92px; flex: none; }
.oc-audit b { font-weight: 500; }
.oc-tab-chat .oc-access { padding: 22px 28px; }
@media (max-width: 1100px) { .oc-grant { grid-template-columns: 32px minmax(0, 1fr) auto; } .oc-grant-s, .oc-grant-w { grid-column: 2; } }
@media (max-width: 760px) { .oc-tab-chat .oc-access { padding: 16px; } .oc-subnav { overflow-x: auto; } }
.oc-shell .chat-scroll { max-height: none; border-top: 0; border-bottom: 0; }
.oc-who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.oc-who small { font: 400 .68rem/1.2 var(--mono); color: var(--soft); }
.oc-ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-mfilter { display: none; }
.oc-mfilter:empty { display: none !important; }
.live-chat { display: grid; gap: 12px; min-width: 0; }
.live-chat:not(:has(> [data-live-part]:not([hidden]))) { display: none; }
.live-chat > [hidden] { display: none; }
.live-chat-note { margin: 0; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.live-chat-note .oc-link { margin-left: 8px; }
/* Typing animation adapted from chatscope/chat-ui-kit-styles.
The MIT License (MIT)

Copyright (c) 2020 chatscope.io <chatscope@chatscope.io>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
.chat-working { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 6px 12px; border-radius: 16px; background: var(--surface); color: var(--muted); }
.chat-working i { width: 6px; height: 6px; border-radius: 100%; background: currentColor; animation: chat-typing 1.5s infinite ease-in-out; }
.chat-working i:nth-child(2) { animation-delay: 300ms; }
.chat-working i:nth-child(3) { animation-delay: 400ms; }
@keyframes chat-typing { 0%, 44% { transform: translateY(0); } 28% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .chat-working i { animation: none; } }
@media (hover: none) { .oc-copy { opacity: 1; } }
.live-approval { padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px; }
.live-approval p { margin: 0 0 8px; }
.live-approval pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; max-height: 200px; overflow-y: auto; }
.live-chat[data-live-compact="1"] { padding: 0 16px 6px; }
@media (max-width: 760px) { .oc-mfilter { display: block; margin: -4px -20px 0; padding: 0 20px; overflow-x: auto; } .oc-mfilter .oc-deskfilter { max-width: none; } }

.live-chat > [data-live-part]:empty { display: none; }

/* Personal navigation and Home modules. */
.home-modules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.home-modules > .oc-ovsec { margin:0; padding:20px; border:1px solid var(--line); border-radius:12px; min-width:0; }
.home-modules > :not(.oc-ovsec) { grid-column:1 / -1; }
.layout-panel { position:fixed; z-index:90; top:80px; left:50%; transform:translateX(-50%); width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 110px); overflow:auto; padding:24px; box-shadow:0 20px 80px #0003; }
.layout-option { display:flex; align-items:center; gap:8px; padding:8px 0; }
.layout-option label { flex:1; display:flex; align-items:center; gap:12px; }
.layout-panel .btn { margin-top:16px; }
.oc-connections { margin-top:auto; border-top:1px solid var(--line); padding-top:10px; }
.oc-mainhead .oc-pickmenu-main { top:100%; bottom:auto; }
@media(max-width:760px) { .home-modules { grid-template-columns:1fr; } }
.home-request { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.home-proposal { padding:16px; margin:0 18px 12px; border:1px solid var(--line); border-radius:10px; }
.layout-option input { accent-color:var(--accent); }
.rotate-down { display:inline-flex; transform:rotate(180deg); }
@media(max-width:760px) {
  .oc-mainhead.oc-controls { display:flex; flex-wrap:wrap; gap:8px; height:auto; min-height:48px; padding:8px 12px; }
  .oc-mainhead.oc-controls > .oc-deskfilter { display:none; }
  .oc-mainhead.oc-controls .oc-pick { padding:4px 7px; }
  .oc-mainhead.oc-controls .oc-seg button { padding:5px 8px; }
  .oc-mainhead.oc-controls > .grow { display:none; }
}