/* Qcmology Support Studio dashboard.
   Mobile-first: the phone layout is the default; wider screens add a rail and a
   two-pane workspace. IDs and state classes are an Android compatibility surface
   (see docs/webview-compatibility.md); restyle freely but keep them. */

/* ---------- Tokens ---------- */
:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  --page-safe-top: env(safe-area-inset-top); --page-safe-right: env(safe-area-inset-right);
  --page-safe-bottom: env(safe-area-inset-bottom); --page-safe-left: env(safe-area-inset-left);
  --radius: 12px; --radius-l: 18px; --bubble: 20px; --pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-design="cobalt"][data-mode="light"] {
  --canvas: #f2f4f8; --surface: #ffffff; --soft: #eef1f6; --rail: #f7f8fb; --ink: #0f172a; --muted: #566074;
  --line: #e2e6ee; --border: #c8cfdb; --accent: #2458e0; --accent-hover: #1b47bd; --on-accent: #ffffff; --accent-soft: #e7eeff;
  --outgoing: #2458e0; --outgoing-ink: #ffffff; --ai-bg: #e3eafb; --ai-ink: #14224a;
  --ms-bg: #e3ecff; --ms-ink: #1d4ed8; --ig-bg: #fde6ef; --ig-ink: #a3214f; --success: #147a3d;
  --amber: #93460a; --amber-soft: #fff3e3; --danger: #b8233b; --danger-soft: #fdedf0;
  --shadow: rgba(15, 23, 42, .10); --shadow-strong: rgba(15, 23, 42, .18); --overlay: rgba(15, 23, 42, .38);
  --toast: #0f172a; --contrast-ink: #ffffff; --focus: #2458e0; --skeleton: #e6eaf1;
}
:root[data-design="cobalt"][data-mode="dark"] {
  --canvas: #0a0f1c; --surface: #111827; --soft: #1a2334; --rail: #0d1422; --ink: #e9eef8; --muted: #9ba6ba;
  --line: #222c3f; --border: #3a4760; --accent: #82a7ff; --accent-hover: #a1bdff; --on-accent: #0a1633; --accent-soft: #1b2a4d;
  --outgoing: #2f5fe0; --outgoing-ink: #ffffff; --ai-bg: #1c2742; --ai-ink: #e6ecfa;
  --ms-bg: #1b2a4d; --ms-ink: #9dbbff; --ig-bg: #3a1a2a; --ig-ink: #ff9ec3; --success: #4ade80;
  --amber: #f4b860; --amber-soft: #33240f; --danger: #ff8d9e; --danger-soft: #3a1820;
  --shadow: rgba(0, 0, 0, .35); --shadow-strong: rgba(0, 0, 0, .55); --overlay: rgba(2, 6, 16, .62);
  --toast: #e9eef8; --contrast-ink: #0a0f1c; --focus: #82a7ff; --skeleton: #1d2638;
}
:root[data-design="graphite"][data-mode="light"] {
  --canvas: #f4f4f5; --surface: #ffffff; --soft: #f0f0f2; --rail: #fafafa; --ink: #18181b; --muted: #5c5c66;
  --line: #e4e4e7; --border: #c9c9cf; --accent: #18181b; --accent-hover: #000000; --on-accent: #ffffff; --accent-soft: #ececef;
  --outgoing: #27272a; --outgoing-ink: #fafafa; --ai-bg: #e8e8eb; --ai-ink: #18181b;
  --ms-bg: #ececef; --ms-ink: #1d4ed8; --ig-bg: #fbe8ef; --ig-ink: #a3214f; --success: #147a3d;
  --amber: #93460a; --amber-soft: #fff3e3; --danger: #b8233b; --danger-soft: #fdedf0;
  --shadow: rgba(0, 0, 0, .08); --shadow-strong: rgba(0, 0, 0, .16); --overlay: rgba(0, 0, 0, .36);
  --toast: #18181b; --contrast-ink: #ffffff; --focus: #18181b; --skeleton: #e9e9ec;
}
:root[data-design="graphite"][data-mode="dark"] {
  --canvas: #0c0c0e; --surface: #18181b; --soft: #222226; --rail: #111113; --ink: #f4f4f5; --muted: #a1a1aa;
  --line: #2b2b30; --border: #45454d; --accent: #f4f4f5; --accent-hover: #ffffff; --on-accent: #18181b; --accent-soft: #2b2b30;
  --outgoing: #3f3f46; --outgoing-ink: #fafafa; --ai-bg: #26262b; --ai-ink: #f4f4f5;
  --ms-bg: #26262b; --ms-ink: #9dbbff; --ig-bg: #33202a; --ig-ink: #ff9ec3; --success: #4ade80;
  --amber: #f4b860; --amber-soft: #33240f; --danger: #ff8d9e; --danger-soft: #3a1820;
  --shadow: rgba(0, 0, 0, .4); --shadow-strong: rgba(0, 0, 0, .6); --overlay: rgba(0, 0, 0, .62);
  --toast: #f4f4f5; --contrast-ink: #0c0c0e; --focus: #f4f4f5; --skeleton: #232327;
}
html[data-design="graphite"] { --radius: 8px; --radius-l: 12px; --bubble: 14px; }
html.support-android-viewport { --page-safe-top: 0px; }
html.support-android-webview { --page-safe-right: 0px; --page-safe-bottom: 0px; --page-safe-left: 0px; }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
html { color: var(--ink); background: var(--canvas); }
/* Keep installed Android apps at page scale 1; allow scrolling and image-viewer panning. */
html.support-android-webview, html.support-android-webview body { touch-action: pan-x pan-y; }
body { margin: 0; overflow: hidden; background: var(--canvas); color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
[hidden] { display: none !important; }
:is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--muted); }
.optional { color: var(--muted); font-size: 12px; font-weight: 500; }

/* Controls */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s; }
.button:hover:not(:disabled) { background: var(--soft); text-decoration: none; }
.button .icon { width: 18px; height: 18px; }
.button.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.button.primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); }
.button.subtle { border-color: transparent; background: transparent; }
.button.subtle:hover:not(:disabled) { background: var(--soft); }
.button.danger { border-color: transparent; background: var(--danger-soft); color: var(--danger); white-space: normal; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex: none; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); transition: background-color .15s; }
.icon-button:hover:not(:disabled) { background: var(--soft); }
.text-button { min-height: 32px; padding: 4px 2px; border: 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 600; text-align: left; }
.text-button:hover { text-decoration: underline; }
input:not([type="checkbox"]):not([type="file"]), select, textarea { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.select-wrap, .channel-wrap { position: relative; display: block; }
.select-wrap select, .channel-wrap select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.select-wrap .icon, .channel-wrap .icon { position: absolute; top: 50%; right: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; transform: translateY(-50%); }

/* ---------- Shell ---------- */
.shell { display: flex; flex-direction: column; height: 100vh; height: var(--support-app-height, 100dvh); min-height: 0; overflow: hidden; }
.shell.menu-open::after { content: ""; position: fixed; inset: 0; z-index: 15; background: var(--overlay); animation: fade-in .15s var(--ease); }

/* Phone header: brand · title/status · menu. */
.topbar { position: relative; z-index: 20; display: grid; flex: none; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; min-height: calc(60px + var(--page-safe-top)); padding: calc(8px + var(--page-safe-top)) max(8px, var(--page-safe-right)) 8px max(16px, var(--page-safe-left)); border-bottom: 1px solid var(--line); background: var(--surface); }
.brand, .topbar-right { display: contents; }
.brand-mark { display: grid; place-items: center; grid-row: 1 / 3; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--accent); color: var(--on-accent); font: 700 24px/1 Georgia, "Times New Roman", serif; }
.brand-name { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; }
.brand-name strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.brand-name small { display: none; }
.connection { grid-column: 2; grid-row: 2; align-self: start; display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
/* Reserve space for the live ring inside the status label's clipping boundary. */
.connection::before { content: ""; box-sizing: border-box; width: 14px; height: 14px; flex: none; border: 3px solid transparent; border-radius: 50%; background: var(--amber); background-clip: padding-box; }
.connection.live::before { background-color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.connection.offline::before { background-color: var(--danger); }
.mobile-menu-toggle { grid-column: 3; grid-row: 1 / 3; }
.shell.menu-open .mobile-menu-toggle { background: var(--soft); }

/* Workspace menu: a dropdown card on phones, an icon rail on desktop. */
.top-actions { position: absolute; top: calc(100% + 6px); right: 10px; z-index: 21; display: none; flex-direction: column; width: min(300px, calc(100vw - 20px)); max-height: calc(var(--support-app-height, 100dvh) - 90px); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: 0 18px 50px var(--shadow-strong); animation: pop-in .16s var(--ease); }
.shell.menu-open .top-actions { display: flex; }
.top-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); font-size: 15px; font-weight: 500; text-align: left; text-decoration: none; white-space: nowrap; }
.top-link:hover { background: var(--soft); text-decoration: none; }
.top-link .icon { color: var(--muted); }
.feature-icon { position: relative; display: grid; place-items: center; flex: none; }
.mobile-menu-toggle { position: relative; }
.feature-unseen-badge { position: absolute; top: -8px; right: -10px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 10px; line-height: 17px; font-weight: 750; text-align: center; pointer-events: none; }
.mobile-menu-toggle .feature-unseen-badge { top: 2px; right: 2px; }
.top-link.sign-out, .top-link.sign-out .icon { color: var(--danger); }
.account-name { display: block; padding: 12px 12px 10px; color: var(--muted); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-name:empty { display: none; }
.account-name::before { content: "Signed in as"; display: block; margin-bottom: 1px; font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.nav-divider { display: block; height: 1px; margin: 6px 8px; background: var(--line); }

/* ---------- Workspace ---------- */
.workspace { position: relative; display: block; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.inbox-pane, .detail-pane { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.detail-pane { display: none; background: var(--canvas); }
.show-detail .inbox-pane { display: none; }
.show-detail .detail-pane { display: block; }
.shell.show-detail .topbar { display: none; }

/* ---------- Inbox ---------- */
.inbox-pane { display: flex; flex-direction: column; background: var(--surface); }
.inbox-head { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.inbox-head h1:focus { outline: none; }
.inbox-tools { display: flex; align-items: center; gap: 4px; flex: none; padding: 10px max(8px, var(--page-safe-right)) 6px max(12px, var(--page-safe-left)); }
.search-wrap { position: relative; flex: 1; min-width: 0; }
.search-wrap .search-icon { position: absolute; top: 50%; left: 13px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; transform: translateY(-50%); }
.search-wrap input { display: block; width: 100%; height: 44px; padding: 0 12px 0 40px; border-color: transparent; border-radius: var(--pill); background: var(--soft); font-size: 16px; transition: border-color .15s, background-color .15s; }
dialog .search-wrap input { min-height: 44px; padding: 0 12px 0 40px; }
.search-wrap input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.search-wrap input::-webkit-search-cancel-button { cursor: pointer; }
#search { padding-right: 44px; }
#search::-webkit-search-cancel-button { display: none; }
.search-wrap.search-active input { border-color: var(--accent); background: var(--accent-soft); }
.clear-search { position: absolute; top: 0; right: 0; color: var(--accent); }
.search-status { flex: none; margin: 0; padding: 4px 14px 8px; color: var(--accent); background: var(--accent-soft); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.row-search-match { margin-top: 4px; color: var(--ink); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; white-space: normal; }
.search-match-label { color: var(--muted); }
.row-search-match mark { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.list-heading-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.list-heading-actions .icon-button { color: var(--muted); }
.done-button { min-width: 72px; border-radius: var(--pill); }

.filter-bar { display: flex; align-items: center; gap: 8px; flex: none; overflow-x: auto; padding: 4px max(12px, var(--page-safe-right)) 10px max(12px, var(--page-safe-left)); scrollbar-width: none; overscroll-behavior-x: contain; }
.filter-bar::-webkit-scrollbar { display: none; }
.tabs { display: flex; gap: 6px; flex: none; }
.tabs button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s; }
.tabs button:hover:not(:disabled) { color: var(--ink); background: var(--soft); }
.tabs button.active { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.tabs .count { min-width: 18px; padding: 0 5px; border-radius: var(--pill); background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 18px; text-align: center; }
.tabs .active .count { background: rgba(255, 255, 255, .22); color: inherit; }
html[data-mode="dark"] .tabs .active .count { background: rgba(0, 0, 0, .18); }
.tabs [data-state="attention"]:not(.active) .count:not(:empty) { background: var(--amber-soft); color: var(--amber); }
.channel-wrap { flex: none; }
.channel-wrap select { height: 36px; padding: 0 34px 0 12px; border-color: var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; }
.inbox-gesture-hint { margin: 0; padding: 0 14px 4px; color: var(--muted); font-size: 11px; text-align: right; }
.inbox-gesture-hint[hidden] { display: none; }

.conversation-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 max(6px, var(--page-safe-right)) 8px max(6px, var(--page-safe-left)); scrollbar-width: thin; }
.conversation-swipe { position: relative; overflow: hidden; margin: 2px 0; border-radius: 14px; }
.conversation-swipe .conversation-row { z-index: 1; background: var(--surface); transform: translateX(var(--swipe-offset, 0px)); transition: transform .18s var(--ease), background-color .12s; }
.conversation-swipe.swipe-open .conversation-row { --swipe-offset: -216px; }
.conversation-swipe.swipe-dragging .conversation-row { transition: none; }
.swipe-actions { position: absolute; inset: 0 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: 216px; padding: 4px 0 4px 4px; pointer-events: none; }
.swipe-open .swipe-actions { pointer-events: auto; }
.swipe-action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 64px; padding: 4px 2px; border: 0; border-radius: 10px; background: var(--soft); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1.1; text-align: center; cursor: pointer; }
.swipe-action .icon { width: 19px; height: 19px; }
.swipe-action[data-action="unread"] { background: var(--accent-soft); color: var(--accent); }
.swipe-action[data-action="resolve"] { background: var(--amber-soft); color: var(--amber); }
.swipe-action:hover:not(:disabled) { filter: brightness(.96); }
.swipe-action:disabled { opacity: .45; cursor: default; }
.conversation-row { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 10px 10px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); text-align: left; transition: background-color .12s; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.conversation-row:hover { background: var(--soft); }
.conversation-row:active { background: var(--soft); }
.conversation-row.active { background: var(--accent-soft); }
.conversation-row.indefinite-hold { box-shadow: inset 3px 0 0 var(--amber); }
.avatar { position: relative; display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--soft); color: var(--muted); font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.avatar.messenger { background: var(--ms-bg); color: var(--ms-ink); }
.avatar.instagram { background: var(--ig-bg); color: var(--ig-ink); }
.row-content { min-width: 0; }
.row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.row-title { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.row-trailing { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.row-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.needs-you-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.conversation-row:is(.needs-you, .manual-unread) .row-preview { color: var(--ink); font-weight: 700; }
.row-preview { overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.row-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; margin-top: 6px; overflow: hidden; }
.chip { display: inline-flex; align-items: center; min-width: 0; height: 22px; padding: 0 8px; overflow: hidden; border-radius: var(--pill); background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 600; line-height: 22px; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.chip.handling { background: var(--accent-soft); color: var(--accent); }
.chip.pause { background: var(--soft); color: var(--muted); }
.chip.hold { background: var(--amber-soft); color: var(--amber); }
.chip.hold::before { content: "Ⅱ"; margin-right: 5px; font-weight: 800; }
.chip.attention { background: var(--amber-soft); color: var(--amber); }
.chip.row-draft { background: var(--accent-soft); color: var(--accent); }
.conversation-row.active .chip.handling, .conversation-row.active .chip.row-draft, .conversation-choice.checked .chip.handling { background: var(--surface); }
.chip.row-draft::before { content: "✦"; margin-right: 4px; font-size: 11px; }
.chip.draft-indicator { padding: 0 8px; background: transparent; color: var(--muted); font-weight: 500; }
.chip.draft-indicator::before { content: "✎ Unsent"; font-size: 12px; }
.chip.draft-indicator { font-size: 0; }
.list-placeholder { margin: 0; padding: 48px 24px; color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; }
.list-placeholder::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 50%; background: var(--soft); }
.list-skeleton { display: flex; flex-direction: column; gap: 4px; padding: 4px 4px; }
.list-skeleton span { display: block; height: 68px; border-radius: 14px; background: linear-gradient(90deg, var(--soft) 0, var(--skeleton) 40%, var(--soft) 80%) 0 0 / 250% 100%; animation: shimmer 1.3s linear infinite; }
.list-foot { flex: none; padding: 0 12px; color: var(--danger); font-size: 13px; }
.list-foot:has(#more[hidden]):has(#listError:empty) { display: none; }
.list-foot .button { width: 100%; margin: 4px 0 10px; }
.list-foot #more { border: 1px solid var(--line); background: var(--soft); }
.list-foot #more:hover { border-color: var(--border); background: var(--accent-soft); }
#listError:not(:empty) { display: block; padding: 8px 0 12px; }

/* Selection */
.batch-bar { order: 10; flex: none; padding: 10px max(12px, var(--page-safe-right)) calc(10px + var(--page-safe-bottom)) max(12px, var(--page-safe-left)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -8px 24px var(--shadow); animation: slide-up .18s var(--ease); }
.batch-selection { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 14px; }
.batch-select-all { display: flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding-right: 8px; color: var(--ink); font-weight: 500; cursor: pointer; }
#batchCount { color: var(--ink); font-weight: 700; }
.batch-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.batch-actions.archive-actions { grid-template-columns: minmax(0, 1fr); }
.archive-intro { padding: 0 14px 8px; }
.archive-intro p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.batch-actions .button { min-width: 0; padding: 0 8px; }
.batch-status { margin: 4px 0 2px; color: var(--muted); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
#batchRetry { width: 100%; margin-top: 6px; }
.conversation-choice { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; margin: 2px 0; border-radius: 14px; }
.conversation-choice.checked { background: var(--accent-soft); }
.conversation-choice .conversation-row { padding-left: 4px; }
.conversation-choice.checked .conversation-row { background: transparent; }
.conversation-check { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.batch-row-error { grid-column: 1 / -1; margin: 0; padding: 0 14px 12px 56px; color: var(--danger); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }

/* ---------- Conversation ---------- */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; padding: 32px; color: var(--muted); text-align: center; }
.empty-art { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 10px; border-radius: 24px; background: var(--accent-soft); color: var(--accent); }
.empty-art .icon { width: 34px; height: 34px; stroke-width: 1.5; }
.empty h2 { color: var(--ink); font-size: 20px; }
.empty p { max-width: 320px; font-size: 14px; line-height: 1.6; }
.detail { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.detail-head { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; flex: none; min-height: calc(60px + var(--page-safe-top)); padding: calc(6px + var(--page-safe-top)) max(6px, var(--page-safe-right)) 6px max(4px, var(--page-safe-left)); border-bottom: 1px solid var(--line); background: var(--surface); }
.back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); }
.back:hover { background: var(--soft); }
.back-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.detail-avatar { width: 40px; height: 40px; font-size: 14px; }
.detail-avatar::after { width: 12px; height: 12px; }
.identity { flex: 1; min-width: 0; padding-left: 4px; }
.identity h2 { overflow: hidden; font-size: 16px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.identity-sub { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 1px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
#detailChannel:empty { display: none; }
#detailChannel:not(:empty)::after { content: "·"; margin-left: 6px; }
.state-pill { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; color: var(--success); font-weight: 600; text-overflow: ellipsis; }
.state-pill::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: currentColor; }
.state-pill.paused { color: var(--muted); }
.state-pill.hold { color: var(--amber); }
.state-pill.off { color: var(--muted); }
.header-handling { flex: none; min-width: 84px; padding: 0 14px; border-radius: var(--pill); font-size: 14px; }
.header-handling::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: var(--mask-pause) center / contain no-repeat; mask: var(--mask-pause) center / contain no-repeat; }
.header-handling.is-resume::before { -webkit-mask-image: var(--mask-play); mask-image: var(--mask-play); }
.header-handling.is-resume { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.header-handling.is-resume:hover:not(:disabled) { background: var(--accent-hover); }
:root { --mask-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='4' width='4' height='16' rx='1.2'/%3E%3Crect x='14' y='4' width='4' height='16' rx='1.2'/%3E%3C/svg%3E"); --mask-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15a1 1 0 0 0 1.5.9l12-7.5a1 1 0 0 0 0-1.8l-12-7.5A1 1 0 0 0 7 4.5Z'/%3E%3C/svg%3E"); }
.tools-button .icon { width: 22px; height: 22px; stroke-width: 2.4; }
.detail-error { flex: none; padding: 10px 16px; background: var(--danger-soft); color: var(--danger); font-size: 13px; line-height: 1.45; }
.detail-body { position: relative; display: flex; flex: 1; min-height: 0; }
.conversation-column { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.attention-bar { display: flex; align-items: center; gap: 10px; flex: none; padding: 8px max(10px, var(--page-safe-right)) 8px max(14px, var(--page-safe-left)); border-bottom: 1px solid var(--line); background: var(--amber-soft); color: var(--amber); }
.attention-note { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.4; }
.attention-note::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--amber); color: var(--amber-soft); font-size: 12px; font-weight: 800; vertical-align: 1px; }
.review-button { flex: none; min-height: 40px; padding: 0 12px; border-color: transparent; border-radius: var(--pill); background: var(--surface); color: var(--ink); font-size: 13px; }
.review-button .icon { width: 16px; height: 16px; }
.truncated { flex: none; padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; text-align: center; }
.truncated .text-button { min-height: 36px; padding: 0 4px; font-size: 13px; }
.evidence-panel { flex: none; max-height: 40%; overflow-y: auto; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.evidence-panel pre { margin: 8px 0 12px; padding: 12px; border-radius: var(--radius); background: var(--soft); font: 13px/1.55 inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.transcript-wrap { position: relative; flex: 1; min-height: 0; }
.messages { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 12px max(12px, var(--page-safe-right)) 16px max(12px, var(--page-safe-left)); scrollbar-width: thin; }

/* Messages: bubble, then a footer row with metadata and the heart. */
.message { display: flex; flex-direction: column; width: fit-content; max-width: min(84%, 600px); margin: 10px 0 0; }
.message.grouped { margin-top: 2px; }
.message.replyable { position: relative; touch-action: pan-y pinch-zoom; }
.message.replyable .message-body, .message.replyable .message-footer { position: relative; z-index: 1; transform: translateX(var(--reply-slide, 0px)); transition: transform .18s var(--ease); }
.message.reply-dragging .message-body, .message.reply-dragging .message-footer { transition: none; user-select: none; }
.reply-swipe-icon { position: absolute; left: 4px; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); opacity: 0; transform: scale(.75); transition: opacity .15s, transform .15s; }
.message[data-reply-direction="left"] .reply-swipe-icon { right: 4px; left: auto; }
.message.reply-dragging .reply-swipe-icon { opacity: var(--reply-progress, 0); transform: scale(calc(.75 + var(--reply-progress, 0) * .25)); }
.message.reply-armed .reply-swipe-icon { background: var(--accent); color: var(--on-accent); }
.reply-swipe-icon .icon { width: 18px; height: 18px; }
.reply-message { display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.reply-message .icon { width: 17px; height: 17px; }
.reply-message:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.message.customer { align-items: flex-start; margin-right: auto; }
.message.human, .message.assistant, .message.provisional { align-items: flex-end; margin-left: auto; }
.message-body { max-width: 100%; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--bubble); background: var(--surface); color: var(--ink); overflow-wrap: anywhere; }
.message.customer .message-body { border-bottom-left-radius: 6px; }
.message.customer.grouped .message-body { border-top-left-radius: 6px; }
.message.human .message-body { border-color: var(--outgoing); background: var(--outgoing); color: var(--outgoing-ink); border-bottom-right-radius: 6px; }
.message.assistant .message-body { border-color: var(--ai-bg); background: var(--ai-bg); color: var(--ai-ink); border-bottom-right-radius: 6px; }
.message.human.grouped .message-body, .message.assistant.grouped .message-body { border-top-right-radius: 6px; }
.message-text { font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-text[dir="rtl"] { font-size: 16.5px; line-height: 1.7; }
.message-body blockquote { max-height: 120px; margin: 2px 0 8px; padding: 6px 10px; overflow: auto; border-left: 3px solid currentColor; border-radius: 6px; background: rgba(127, 127, 127, .14); font-size: 13px; opacity: .88; }
.message-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; max-width: 100%; min-height: 20px; margin-top: 2px; padding: 0 4px; }
.message.human .message-footer, .message.assistant .message-footer, .message.provisional .message-footer { flex-direction: row-reverse; }
.message-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.message-actor { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.message.customer .message-actor { display: none; }
.message.assistant .message-actor::before { content: "✦ "; color: var(--accent); }
.message-top time, .message-receipt { flex: none; white-space: nowrap; }
.message-receipt { font-weight: 600; }
.message-receipt::before { content: "✓ "; }
.message-receipt.delivered::before, .message-receipt.read::before { content: "✓✓ "; letter-spacing: -.25em; margin-right: .3em; }
.message-receipt.read { color: var(--accent); }
.heart-button { display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; flex: none; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; }
.heart-button:hover:not(:disabled) { background: var(--soft); color: var(--danger); }
.heart-button.active { color: var(--danger); }
.heart-button:disabled { cursor: wait; opacity: .5; }
.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.reaction-pill { max-width: 100%; padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.date-divider { width: fit-content; margin: 18px auto 6px; padding: 3px 12px; border-radius: var(--pill); background: var(--soft); color: var(--muted); font-size: 12px; font-weight: 600; }
.message.provisional .message-body { border: 1px dashed var(--border); background: var(--soft); color: var(--ink); border-bottom-right-radius: 6px; }
.message.provisional.sending .message-body { border: 1px solid var(--outgoing); background: var(--outgoing); color: var(--outgoing-ink); opacity: .72; transition: opacity .2s; }
.message-pending { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; white-space: nowrap; }
.message-pending::before { content: ""; width: 10px; height: 10px; border: 1.6px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .9s linear infinite; }
.message.provisional.queued .message-body { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
.message.provisional.failed .message-body { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.message.provisional.partial .message-body { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
.delivery-tag { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; opacity: .9; }
.retry-reply { display: block; min-height: 44px; margin-top: 2px; color: inherit; text-decoration: underline; }
.message-media { margin-top: 6px; font-size: 12.5px; opacity: .85; }
.message-media-placeholder { display: inline-flex; margin: 4px 0; padding: 6px 10px; border-radius: 10px; background: rgba(127, 127, 127, .14); font-size: 13px; }
.message-image { display: block; max-width: 100%; border-radius: 12px; }
.message-body > .message-image-button:not(.message-image-gallery *) { display: block; width: min(240px, 100%); margin: 4px 0; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: transparent; }
.message-image-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; width: 260px; max-width: 100%; margin: 4px 0; }
.message-image-gallery.multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.message-image-button { display: block; width: 100%; min-width: 44px; min-height: 140px; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: rgba(127, 127, 127, .16); color: inherit; font-size: 13px; cursor: zoom-in; }
.message-image-button.loaded { min-height: 44px; }
.message-image-gallery .message-image { width: 100%; max-height: 320px; margin: 0; border-radius: 0; object-fit: contain; }
.message-image-gallery.multiple .message-image { height: 130px; object-fit: cover; }
.message-image-button.image-error { padding: 12px; cursor: pointer; }
.more-images { min-height: 44px; color: inherit; }
.attachment-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; }
.message-body .button { min-height: 40px; padding: 0 12px; border-color: transparent; background: rgba(127, 127, 127, .16); color: inherit; font-size: 13px; }
.attachment-error { flex-basis: 100%; color: var(--danger); font-size: 12.5px; }
.attachment-preview-slot { flex-basis: 100%; min-width: 0; }
.attachment-preview { display: block; max-width: 100%; max-height: 320px; margin: 8px 0; border-radius: 10px; }
.jump-latest { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink); box-shadow: 0 8px 24px var(--shadow-strong); font-size: 13px; font-weight: 600; animation: pop-in .16s var(--ease); }
.jump-latest .icon { width: 18px; height: 18px; color: var(--accent); }

/* Composer */
.composer { position: relative; z-index: 2; flex: none; padding: 8px max(10px, var(--page-safe-right)) calc(8px + var(--page-safe-bottom)) max(10px, var(--page-safe-left)); border-top: 1px solid var(--line); background: var(--surface); }
.composer-surface { border: 1px solid var(--line); border-radius: 22px; background: var(--soft); transition: border-color .15s, background-color .15s; }
.composer-surface:focus-within { border-color: var(--border); background: var(--surface); }
.composer-quote { display: flex; align-items: center; gap: 8px; margin: 8px 8px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--accent); border-radius: 3px 12px 12px 3px; background: var(--accent-soft); }
.composer-quote > .icon { width: 18px; height: 18px; flex: none; color: var(--accent); }
.composer-quote-content { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.composer-quote-content strong { overflow: hidden; color: var(--accent); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.composer-quote-content span { overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.composer-quote .icon-button { flex: none; }
.message-quote-author { display: block; margin-bottom: 2px; font-weight: 650; }
.message-quote-text { display: block; white-space: pre-wrap; }
.composer #replyText { display: block; width: 100%; min-height: 44px; max-height: 160px; padding: 11px 16px 4px; border: 0; border-radius: 22px 22px 0 0; background: transparent; font-size: 16px; line-height: 1.4; resize: none; }
.composer #replyText:focus, .composer #replyText:focus-visible { outline: none; }
.composer #replyText:disabled { opacity: .6; }
.composer-actions { display: flex; align-items: center; gap: 4px; padding: 0 4px 4px; }
.add-image { color: var(--muted); border-radius: 50%; }
.draft-cluster { display: flex; align-items: center; min-width: 0; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent); transition: background-color .15s, color .15s; }
.ai-draft-toggle { min-width: 0; min-height: 44px; padding: 0 14px 0 12px; overflow: hidden; border: 0; border-radius: var(--pill); background: transparent !important; color: inherit; font-size: 14px; font-weight: 600; }
.ai-draft-toggle #draftNoticeText { overflow: hidden; text-overflow: ellipsis; }
#draftGlyph { display: inline-block; font-size: 14px; }
.draft-cluster .icon-button { margin-left: -8px; border-radius: 50%; color: inherit; }
.draft-cluster .icon-button .icon { width: 18px; height: 18px; }
.draft-cluster[data-tone="ready"] { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.draft-cluster[data-tone="stale"] { background: var(--amber-soft); color: var(--amber); }
.draft-cluster[data-tone="failed"] { background: var(--danger-soft); color: var(--danger); }
.draft-cluster[data-status="pending"] #draftGlyph, .draft-cluster[data-status="running"] #draftGlyph { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; font-size: 0; animation: spin .9s linear infinite; }
.send-button { width: 44px; min-width: 44px; height: 44px; margin-left: auto; padding: 0; border-radius: 50%; }
.send-button .send-label { display: none; }
.send-button .icon { width: 20px; height: 20px; margin-left: -2px; }
.send-button.is-sending .icon, .send-button.is-sending .send-label { visibility: hidden; }
.send-button.is-sending { position: relative; }
.send-button.is-sending::after { content: ""; position: absolute; top: 50%; right: 50%; width: 16px; height: 16px; margin: -8px -8px 0 0; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.composer-images { max-height: 160px; overflow-y: auto; overscroll-behavior: contain; }
.composer-image { display: flex; align-items: center; gap: 10px; margin: 8px 8px 0; padding: 6px 4px 6px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.composer-image img { width: 48px; height: 48px; flex: none; border-radius: 10px; object-fit: cover; }
.composer-image-details { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.composer-image-details strong { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.composer-image-details span { color: var(--muted); font-size: 12.5px; }
.composer-image[data-state="error"] { border-color: var(--danger); }
.composer-image[data-state="error"] .composer-image-details span { color: var(--danger); }
.composer-meta { padding: 0 8px; font-size: 12.5px; line-height: 1.45; }
.composer-meta > * { margin-top: 4px; }
.reply-source { color: var(--muted); }
.reply-source:empty { display: none; }
.delivery-feedback { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--amber); }
.delivery-feedback:has(#deliveryHint[hidden]):has(#deliveryFallback[hidden]) { display: none; }
.delivery-feedback a { font-weight: 600; white-space: nowrap; }
.send-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.send-feedback:has(#sendStatus:empty):has(#reviewUnsentPart[hidden]) { display: none; }
#sendStatus { color: var(--muted); }
#sendStatus:empty { display: none; }
#sendStatus[data-state="failed"], #sendStatus[data-state="uncertain"] { color: var(--danger); font-weight: 600; }
#sendStatus[data-state="partial"] { color: var(--amber); font-weight: 600; }
.send-feedback[data-state="partial"] { padding: 8px 10px; border-radius: var(--radius); background: var(--amber-soft); }
#reviewUnsentPart { min-height: 40px; }
.action-status { flex: none; padding: 8px 16px; background: var(--surface); color: var(--ink); font-size: 13px; line-height: 1.45; }
.action-status:empty { display: none; }
.action-status.error { background: var(--danger-soft); color: var(--danger); }

/* ---------- Sheets and dialogs ---------- */
dialog { max-width: calc(100vw - 24px); max-height: calc(var(--support-app-height, 100dvh) - 24px); padding: 20px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px var(--shadow-strong); }
dialog:not([open]) { display: none !important; }
dialog::backdrop { background: var(--overlay); }
dialog[open] { animation: pop-in .18s var(--ease); }
dialog label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 600; }
dialog input:not([type="checkbox"]), dialog select, dialog textarea { display: block; width: 100%; min-height: 44px; padding: 10px 12px; font-size: 16px; }
dialog textarea { line-height: 1.5; resize: vertical; }
dialog h3 { margin: 20px 0 4px; font-size: 16px; }
.tools-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.tools-title h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.tools-title h2 .icon { color: var(--accent); }
.tools-title .icon-button { margin-right: -8px; color: var(--muted); }
.sheet { width: min(480px, calc(100vw - 32px)); }
.sheet-note { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Conversation menu */
.control-card { padding: 14px; border-radius: 16px; background: var(--soft); }
.control-overview { display: flex; gap: 12px; }
.control-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.control-card h3 { margin: 0; font-size: 16px; }
.control-card p { margin-top: 2px; font-size: 13.5px; line-height: 1.45; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.actions .button { flex: 1 1 auto; }
.pending-instruction { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface); font-size: 13px; }
.pending-instruction p { margin-top: 4px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.menu-list { display: grid; gap: 1px; margin: 12px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.menu-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 16px; border: 0; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 500; text-align: left; }
.menu-item:hover:not(:disabled) { background: var(--soft); }
.menu-item .icon { color: var(--muted); }
.menu-item:disabled { opacity: 1; color: var(--muted); }
.menu-item:disabled .icon { opacity: .5; }
.menu-item.reopen-draft, .menu-item.reopen-draft .icon { color: var(--accent); }
.thread-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 4px 0; color: var(--muted); font-size: 12.5px; }
.history-status { display: flex; flex-direction: column; min-width: 0; }
#messageCount { flex: none; }
.instruction-area { margin-top: 18px; }
.instruction-area label { margin: 0; }
.field-hint { margin: 2px 0 8px; color: var(--muted); font-size: 13px; }
.instruction-area textarea { min-height: 88px; }
.supplemental { justify-content: flex-end; margin-top: 8px; }
.supplemental .button { flex: 0 1 auto; }
details.advanced, details.debug { margin-top: 12px; border-top: 1px solid var(--line); }
details summary { display: flex; align-items: center; min-height: 48px; color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
details[open] summary::after { transform: rotate(-135deg); }
details.advanced p { margin-bottom: 10px; color: var(--muted); font-size: 13px; }
details.advanced .button { width: 100%; margin-bottom: 8px; }
.debug-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.debug-row span:last-child { color: var(--ink); text-align: right; }
.external-card { margin-top: 16px; padding: 14px; border-radius: 16px; background: var(--soft); color: var(--muted); font-size: 13px; line-height: 1.5; }
.external-card strong { display: block; color: var(--ink); font-size: 14px; }
.external-card p { margin: 2px 0 8px; }
.external-card a { font-weight: 600; }
.tools-backdrop { display: none !important; }

/* Drafts */
.draft-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.draft-title-label { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.draft-title-label .icon { color: var(--accent); }
.draft-title .icon-button { margin-right: -8px; color: var(--muted); }
#privateDraftText { max-height: 45vh; max-height: 45dvh; overflow-y: auto; padding: 14px 16px; border-radius: 16px; background: var(--ai-bg); color: var(--ai-ink); font-size: 15px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.draft-warning { margin-bottom: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--amber-soft); color: var(--amber); font-size: 13px; font-weight: 600; }
.draft-title-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.draft-title-actions #dismissReview { order: 0; margin-right: auto; }
.draft-title-actions #regenerateDraft { order: 1; }
.draft-title-actions #useDraft { order: 2; }
.draft-prompt label { margin-top: 4px; }
.draft-prompt textarea { min-height: 96px; max-height: 30vh; }
.draft-prompt-footer { display: flex; justify-content: flex-end; margin-top: 14px; }
.draft-prompt-footer .button { min-width: 160px; }

/* Saved responses */
.saved-responses.sheet { display: none; flex-direction: column; overflow: hidden; }
.saved-responses[open] { display: flex; }
.saved-responses .tools-title { flex: none; }
.saved-responses h2:focus { outline: none; }
.preset-browser { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.preset-help { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.preset-browser .search-wrap { flex: none; }
.preset-toolbar { display: flex; flex: none; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.preset-toolbar .button { flex: 1 1 auto; }
.preset-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.preset-row { margin: 0 0 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.preset-choose { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 44px; padding: 12px 14px 6px; border: 0; background: transparent; color: var(--ink); text-align: start; }
.preset-choose:hover:not(:disabled) { background: var(--soft); }
.preset-choose strong { font-size: 15px; overflow-wrap: anywhere; }
.preset-choose span { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.preset-row-actions { display: flex; justify-content: flex-end; gap: 2px; padding: 0 6px 4px; }
.preset-row-actions .button { min-width: 44px; padding: 0 12px; font-size: 13px; }
.preset-row-actions .button:last-child { color: var(--danger); }
.preset-empty { padding: 28px 8px; color: var(--muted); font-size: 14px; line-height: 1.6; text-align: center; }
.preset-status { flex: none; margin-top: 8px; color: var(--muted); font-size: 13px; }
.preset-status:empty { display: none; }
.preset-status.error { color: var(--danger); }
#presetForm { flex: 1; min-height: 0; overflow-y: auto; }
#presetForm h3 { margin-top: 0; }
.saved-responses #presetText { min-height: 160px; }

/* Settings and accounts */
.settings-sheet .select-wrap select { padding-right: 40px; }
.account-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.account-row span { flex: 1 1 180px; overflow-wrap: anywhere; }
#inviteForm .button { width: 100%; margin-top: 16px; }
#inviteResult { margin-top: 12px; color: var(--muted); font-size: 13px; }
#inviteLink { margin-top: 8px; }
#loginError:not(:empty), #accountError:not(:empty) { margin-top: 10px; color: var(--danger); font-size: 14px; }

/* Context menu */
dialog.conversation-actions { position: fixed; inset: auto; width: 260px; max-width: calc(100vw - 16px); margin: 0; padding: 6px; border-radius: 14px; box-shadow: 0 16px 44px var(--shadow-strong); animation: none; }
.conversation-actions::backdrop { background: transparent; }
.conversation-actions-heading { display: flex; align-items: center; gap: 8px; padding: 0 0 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.conversation-actions-heading h2 { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; color: var(--muted); font-weight: 600; }
.conversation-actions > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 14px; text-align: left; }
.conversation-actions > button .icon { width: 18px; height: 18px; color: var(--muted); }
.conversation-actions > button:hover:not(:disabled) { background: var(--accent-soft); }

/* Image viewer */
dialog.image-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #05070c; color: #ffffff; box-shadow: none; animation: fade-in .15s var(--ease); }
dialog.image-viewer[open] { display: flex; flex-direction: column; }
.image-viewer::backdrop { background: #05070c; }
.image-viewer-toolbar { display: flex; flex: none; align-items: center; gap: 8px; padding: calc(8px + var(--page-safe-top)) calc(8px + var(--page-safe-right)) 8px calc(16px + var(--page-safe-left)); }
.image-viewer-toolbar h2 { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; }
.image-viewer .button, .image-viewer .icon-button { min-width: 44px; min-height: 44px; flex: none; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--pill); background: rgba(255, 255, 255, .08); color: #ffffff; }
.image-viewer .button:hover:not(:disabled), .image-viewer .icon-button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.image-viewer-download { display: flex; flex: none; }
.image-viewer .image-download { width: 44px; height: 44px; padding: 0; font-size: 20px; }
.image-viewer-stage { display: flex; flex: 1; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px max(8px, var(--page-safe-right)) 8px max(8px, var(--page-safe-left)); }
.image-viewer-stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.image-viewer-stage img:not([src]) { display: none; }
.image-viewer-stage.zoomed { display: block; }
.image-viewer-stage.zoomed img { width: var(--zoom-width); max-width: none; max-height: none; height: auto; margin: auto; cursor: zoom-out; }
.image-viewer-footer { display: flex; flex: none; align-items: center; justify-content: center; gap: 16px; min-height: 60px; padding: 8px calc(12px + var(--page-safe-right)) calc(8px + var(--page-safe-bottom)) calc(12px + var(--page-safe-left)); }
.image-viewer-footer span { flex: 1; color: #c8d1e1; font-size: 13px; text-align: center; }
.image-viewer .attachment-error { position: absolute; top: 70px; right: 12px; left: 12px; padding: 8px; border-radius: 8px; background: #1b2230; color: #ffbac3; }

/* ---------- Secondary screens ---------- */
.login { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; overflow-y: auto; padding: 24px 16px; background: radial-gradient(120% 60% at 50% 0%, var(--accent-soft) 0%, var(--canvas) 60%); }
.login-card { width: min(420px, 100%); padding: 32px 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); box-shadow: 0 30px 80px var(--shadow); }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; }
.brand-lockup small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.login-card h1 { margin: 28px 0 6px; font-size: 28px; font-weight: 750; letter-spacing: -.03em; }
.login-card p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.login-card label { display: block; margin: 18px 0 6px; font-size: 14px; font-weight: 600; }
.login-card input { display: block; width: 100%; min-height: 48px; padding: 10px 14px; font-size: 16px; }
.login-card input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 0; }
.login-card .button { width: 100%; min-height: 50px; margin-top: 20px; font-size: 15px; }

.feature-panel { flex: 1; min-height: 0; overflow-y: auto; background: var(--canvas); }
.feature-inner { width: min(820px, 100%); margin: 0 auto; padding: 12px max(16px, var(--page-safe-right)) calc(24px + var(--page-safe-bottom)) max(16px, var(--page-safe-left)); }
.feature-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.feature-head h2 { font-size: 24px; font-weight: 750; }
.feature-head p { margin-top: 2px; font-size: 14px; }
.feature-back { margin-left: -10px; padding: 0 12px 0 8px; }
.feature-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.feature-filters select { min-height: 44px; padding: 0 12px; font-size: 16px; }
#featureSummary { margin: 14px 0 4px; color: var(--muted); font-size: 13px; }
.feature-card { margin: 12px 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.feature-card h3 { margin-bottom: 4px; font-size: 17px; }
.feature-card.unseen { border-color: var(--accent); }
.feature-unseen-label { display: inline-block; margin-bottom: 8px; color: var(--accent); font-size: 12px; font-weight: 700; }
.feature-card > p.muted { margin-bottom: 8px; font-size: 13px; }
.feature-card strong { display: block; margin-top: 12px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.feature-text { margin-top: 2px; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.feature-card label { display: inline-flex; align-items: center; gap: 8px; margin: 16px 16px 0 0; font-size: 14px; font-weight: 600; }
.feature-card select { min-height: 40px; padding: 0 10px; font-size: 15px; }
.feature-card a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
#moreFeatures { width: 100%; }

.toast { position: fixed; right: 16px; bottom: calc(16px + var(--page-safe-bottom)); left: 16px; z-index: 60; width: fit-content; max-width: min(440px, calc(100vw - 32px)); margin: 0 auto; padding: 12px 16px; border-radius: 14px; background: var(--toast); color: var(--contrast-ink); box-shadow: 0 14px 40px var(--shadow-strong); font-size: 14px; line-height: 1.45; animation: slide-up .2s var(--ease); }
.shell.show-detail ~ .toast { bottom: calc(132px + var(--page-safe-bottom)); }

/* ---------- Phone bottom sheets ---------- */
@media (max-width: 767px), (max-width: 980px) and (max-height: 500px) {
  .sheet, dialog#accountDialog { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: calc(var(--support-app-height, 100dvh) - 32px - var(--page-safe-top)); margin: 0; padding: 22px max(16px, var(--page-safe-right)) calc(18px + var(--page-safe-bottom)) max(16px, var(--page-safe-left)); border-width: 1px 0 0; border-radius: 22px 22px 0 0; animation: sheet-up .22s var(--ease); }
  .sheet::before, dialog#accountDialog::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; border-radius: 2px; background: var(--border); transform: translateX(-50%); }
  .saved-responses.sheet { height: 86vh; height: 86dvh; max-height: calc(100dvh - var(--page-safe-top)); }
  .draft-title-actions .button { flex: 1 1 auto; }
  .draft-title-actions #dismissReview { flex: 0 0 auto; }
  .draft-prompt-footer .button { width: 100%; }
}
@media (max-width: 440px) {
  .detail-avatar { display: none; }
  .identity { padding-left: 0; }
  .header-handling { padding: 0 12px; }
}
@media (max-width: 360px) {
  .header-handling { min-width: 76px; padding: 0 10px; }
  .header-handling::before { display: none; }
  #detailChannel { display: none; }
  .conversation-row { gap: 10px; grid-template-columns: 44px minmax(0, 1fr); }
  .conversation-row .avatar { width: 44px; height: 44px; font-size: 14px; }
}
@media (max-height: 500px) {
  .topbar { min-height: calc(52px + var(--page-safe-top)); padding-top: calc(4px + var(--page-safe-top)); padding-bottom: 4px; }
  .detail-head { min-height: calc(52px + var(--page-safe-top)); padding-top: calc(4px + var(--page-safe-top)); padding-bottom: 4px; }
  .composer { padding-top: 6px; }
  .composer #replyText { min-height: 40px; padding-top: 9px; }
  .messages { padding-top: 8px; }
  .shell.show-detail ~ .toast { bottom: calc(110px + var(--page-safe-bottom)); }
}

/* ---------- Tablet and desktop ---------- */
@media (min-width: 768px) and (min-height: 501px), (min-width: 981px) {
  body { font-size: 14px; }
  .shell { flex-direction: row; }
  .topbar { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 72px; min-width: 72px; height: 100%; min-height: 0; padding: 14px 0 12px; border-right: 1px solid var(--line); border-bottom: 0; background: var(--rail); }
  .brand { display: flex; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-name { display: none; }
  .topbar-right { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 0; }
  .connection { align-self: center; justify-content: center; gap: 0; width: 24px; height: 18px; font-size: 0; }
  .mobile-menu-toggle { display: none; }
  .top-actions { position: static; display: flex; flex: 1; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-height: none; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; }
  .top-link { justify-content: center; width: 48px; height: 48px; min-height: 48px; padding: 0; color: var(--muted); }
  .top-link .icon { width: 22px; height: 22px; }
  .top-link:hover { background: var(--accent-soft); color: var(--accent); }
  .top-link:hover .icon { color: var(--accent); }
  .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .nav-divider { width: 28px; margin: 4px 0; }
  .account-name { order: 8; display: block; width: 36px; height: 36px; margin-top: auto; padding: 0; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 0; line-height: 36px; text-align: center; }
  .account-name::before { display: none; }
  .account-name::first-letter { font-size: 15px; font-weight: 700; }
  .top-link.sign-out { order: 9; }
  .top-link.sign-out .icon { color: var(--muted); }
  .top-link.sign-out:hover, .top-link.sign-out:hover .icon { color: var(--danger); background: var(--danger-soft); }

  .workspace { display: grid; flex: 1; width: 0; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .detail-pane { display: block; }
  .show-detail .inbox-pane { display: flex; }
  .shell.show-detail .topbar { display: flex; }
  .inbox-pane { position: relative; border-right: 1px solid var(--line); }
  .inbox-head { position: static !important; display: flex; flex-direction: column; width: auto; height: auto; min-height: 64px; padding: 14px 150px 2px 16px; overflow: visible; clip: auto; white-space: nowrap; }
  .inbox-head h1 { font-size: 22px; font-weight: 750; line-height: 1.2; }
  #listSummary { color: var(--muted); font-size: 12.5px; }
  .inbox-tools { padding: 6px 10px 6px 14px; }
  .filter-bar { overflow: visible; padding: 4px 14px 10px; }
  .tabs { display: grid; flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .tabs button { flex-direction: column-reverse; justify-content: center; gap: 0; height: 54px; min-width: 0; padding: 0 4px; border-radius: var(--radius); font-size: 12px; font-weight: 600; }
  .tabs .count, .tabs .active .count, html[data-mode="dark"] .tabs .active .count, .tabs [data-state="attention"]:not(.active) .count:not(:empty) { min-width: 0; padding: 0; background: transparent; color: inherit; font-size: 17px; font-weight: 750; line-height: 1.2; }
  .tabs [data-state="attention"]:not(.active) .count:not(:empty) { color: var(--amber); }
  .channel-wrap { position: absolute; top: 18px; right: 12px; }
  .channel-wrap select { height: 36px; max-width: 136px; font-size: 13px; }
  .inbox-gesture-hint { display: none; }
  .conversation-list { padding: 0 8px 8px; }
  .conversation-row { min-height: 72px; }
  .batch-bar { order: 0; padding: 8px 14px 10px; box-shadow: none; border-top: 0; border-bottom: 1px solid var(--line); animation: none; }

  .back { display: none; }
  .detail-head { min-height: 64px; padding: 8px 12px 8px 20px; gap: 10px; }
  .identity { padding-left: 2px; }
  .identity h2 { font-size: 17px; }
  .messages { padding: 16px max(24px, calc((100% - 780px) / 2)) 24px; }
  .message { max-width: min(72%, 600px); }
  .composer { padding: 10px 20px 14px; }
  .composer-surface, .composer-meta { max-width: 820px; margin-right: auto; margin-left: auto; }
  .send-button { width: auto; padding: 0 16px 0 18px; border-radius: var(--pill); }
  .send-button .send-label { display: inline; }
  .attention-bar, .truncated { padding-left: 20px; }
  .toast { right: 24px; left: auto; bottom: 24px; }
  .shell.show-detail ~ .toast { bottom: 24px; }

  /* Right-hand drawers for longer panels. */
  .side-sheet, .saved-responses.sheet { position: fixed; inset: 0 0 0 auto; width: min(420px, 100vw); height: 100%; max-width: none; max-height: none; margin: 0; padding: 20px 20px 24px; border-width: 0 0 0 1px; border-radius: var(--radius-l) 0 0 var(--radius-l); animation: drawer-in .22s var(--ease); }
  .feature-inner { padding-top: 24px; }
}
@media (min-width: 1280px) {
  .workspace { grid-template-columns: 380px minmax(0, 1fr); }
}

.message-shared-post { margin: 8px 0; padding: 10px; border-left: 3px solid var(--accent); overflow-wrap: anywhere; }
.message-shared-post-title { display: block; font-weight: 600; }
.message-shared-post-caption { white-space: pre-wrap; margin: 6px 0; }
.message-shared-post a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Motion ----------
   Opacity only: review scripts measure dialogs immediately after they open. */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -250% 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; } }
@keyframes slide-up { from { opacity: 0; } }
@keyframes sheet-up { from { opacity: 0; } }
@keyframes drawer-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.meta-activity { margin: 12px auto; padding: 6px 16px; max-width: 85%; text-align: center; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.meta-activity-label { font-weight: 600; margin-bottom: 3px; }