:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --rail: #1f2330;
  --text: #1c1f26;
  --muted: #6b7280;
  --line: #e5e7eb;
  --accent: #4f46e5;
  --accent-soft: #eef2ff;
  --mine: #4f46e5;
  --mine-text: #ffffff;
  --theirs: #f1f3f6;
  --visitor: #ffffff;
  --note: #fef9c3;
  --note-line: #fde68a;
  --mention: #fff4d6;
  --danger: #dc2626;
  --ok: #16a34a;
  --closed-bar: #a5b4fc;
  /* Ratings 1 (Terrible) to 5 (Amazing) */
  --r1: #dc2626; --r2: #f59e0b; --r3: #fcd34d; --r4: #86efac; --r5: #22c55e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12141a; --panel: #1a1d25; --rail: #0c0e12; --text: #e7e9ee; --muted: #9aa1ad;
    --line: #2a2e38; --accent: #818cf8; --accent-soft: #252a45; --mine: #4f46e5;
    --theirs: #242833; --visitor: #20232c; --note: #3b3415; --note-line: #5c4f1a; --mention: #3a3220; --closed-bar: #4c4f8f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #12141a; --panel: #1a1d25; --rail: #0c0e12; --text: #e7e9ee; --muted: #9aa1ad;
    --line: #2a2e38; --accent: #818cf8; --accent-soft: #252a45; --mine: #4f46e5;
    --theirs: #242833; --visitor: #20232c; --note: #3b3415; --note-line: #5c4f1a; --mention: #3a3220; --closed-bar: #4c4f8f;
    color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
button, select, input, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 12px; }
body:not(.is-admin) .admin-only { display: none !important; }

/* ---------- auth pages ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; max-width: 400px; width: 100%; }
.login-card h1 { margin: 10px 0 14px; font-size: 22px; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
.logo.big { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; }
.tabs { display: flex; gap: 4px; background: var(--bg); border-radius: 9px; padding: 3px; margin-bottom: 14px; }
.tabs button { flex: 1; border: 0; background: transparent; padding: 7px; border-radius: 7px; cursor: pointer; color: var(--muted); }
.tabs button.active { background: var(--panel); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.auth-form { display: grid; gap: 10px; }
.auth-form input { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
.auth-form input:disabled { color: var(--muted); background: var(--bg); }
.auth-form .btn { padding: 10px; }
.error { color: var(--danger); margin-top: 10px; min-height: 1em; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: 56px 1fr; height: 100vh; }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100vh; }
.page { min-width: 0; min-height: 0; flex: 1; }
.rail { background: var(--rail); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 6px; }
.rail .logo { margin-bottom: 10px; }
.rail-btn { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; position: relative; }
.rail-btn svg { width: 20px; height: 20px; fill: #9aa1ad; }
.rail-btn:hover { background: rgba(255,255,255,.08); }
.rail-btn.active { background: rgba(255,255,255,.14); }
.rail-btn.active svg { fill: #fff; }
.rail-badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; border-radius: 8px; background: #f97316; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.rail-spacer { flex: 1; }
.me-wrap { position: relative; }
.me-wrap .avatar { cursor: pointer; }

.avatar { width: 28px; height: 28px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; position: relative; }
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.avatar.online::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; border: 2px solid var(--panel); }

.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 7px; padding: 6px 12px; cursor: pointer; }
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }

/* ---------- inbox ---------- */
.inbox-page { display: grid; grid-template-columns: 220px 320px 1fr; }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 10px; overflow-y: auto; }
.sidebar-head { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 10px; }
.sidebar-head h2 { margin: 0; font-size: 18px; }
.icon-btn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 18px; line-height: 1; }
.icon-btn:hover { background: var(--accent-soft); }
.views, .teammates { list-style: none; margin: 0; padding: 0; }
.views li, .teammates li { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.views li:hover, .teammates li:hover { background: var(--bg); }
.views li.active, .teammates li.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.views .count, .teammates .count { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 400; }
.views .ico { width: 18px; text-align: center; opacity: .8; }
.tm-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-section { margin: 16px 8px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.conn { margin-top: auto; display: flex; align-items: center; gap: 6px; padding: 10px 8px 0; color: var(--muted); font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; }
.dot.ok { background: #22c55e; } .dot.bad { background: var(--danger); }

.list { border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.list-head { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-bottom: 1px solid var(--line); }
.list-head h3 { margin: 0; font-size: 15px; }
select { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--panel); }
.conv-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.conv-list li { padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; }
.conv-list li:hover { background: var(--bg); }
.conv-list li.active { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
.conv-list li.unread .subj { font-weight: 700; }
.conv-list .subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-list .subj b { font-weight: 600; }
.conv-list .time { color: var(--muted); font-size: 12px; }
.conv-list .preview { grid-column: 2 / 4; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-list .empty-row { color: var(--muted); cursor: default; display: block; text-align: center; padding: 30px; }

.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.empty { margin: auto; color: var(--muted); }
.conv { display: flex; flex-direction: column; height: 100%; }
.conv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.conv-title { min-width: 0; }
.conv-head h3 { margin: 0; font-size: 16px; }
.conv-actions { display: flex; align-items: center; gap: 8px; }

.messages { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; gap: 10px; max-width: 78%; }
.msg.mine, .msg.teammate { align-self: flex-end; flex-direction: row-reverse; }
.bubble { background: var(--theirs); padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; width: fit-content; max-width: 100%; }
.msg.mine .bubble, .msg.teammate .bubble { margin-left: auto; }
.msg.visitor .bubble { background: var(--visitor); border: 1px solid var(--line); }
.msg.mine .bubble { background: var(--mine); color: var(--mine-text); }
.msg.internal .bubble { background: var(--note); color: var(--text); border: 1px solid var(--note-line); }
.msg.mentions-me .bubble { background: var(--mention); color: var(--text); }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.msg.mine .who, .msg.teammate .who { text-align: right; }
.mention { font-weight: 600; color: var(--accent); }
.msg.mine:not(.internal) .mention { color: #fff; text-decoration: underline; }
.msg-del { margin-left: 8px; padding: 0 6px; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; border-radius: 4px; opacity: 0; }
.msg:hover .msg-del, .msg-del:focus-visible { opacity: 1; }
.msg-del:hover { color: var(--danger); background: var(--bg); }
@media (hover: none) { .msg-del { opacity: 1; } }
.msg.deleted .bubble, .msg.deleted.mine .bubble, .msg.deleted.internal .bubble { background: transparent; color: var(--muted); border: 1px dashed var(--line); font-style: italic; }
.event { align-self: center; color: var(--muted); font-size: 12px; }
.typing { height: 18px; padding: 0 18px; color: var(--muted); font-size: 12px; }

.composer { padding: 10px 18px 16px; background: var(--panel); border-top: 1px solid var(--line); }
.composer.note-mode { background: var(--note); }
.composer-row { position: relative; display: flex; gap: 8px; }
.composer textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); }
.mode { display: flex; gap: 4px; margin-bottom: 8px; }
.mode button { border: 0; background: transparent; padding: 4px 10px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 600; }
.mode button.active { background: var(--accent-soft); color: var(--accent); }
.note-mode .mode button.active { background: var(--note-line); color: var(--text); }
.mention-pop { position: absolute; bottom: 100%; left: 0; margin-bottom: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); min-width: 200px; overflow: hidden; z-index: 5; }
.mention-pop div { padding: 7px 10px; display: flex; gap: 8px; align-items: center; cursor: pointer; }
.mention-pop div.sel, .mention-pop div:hover { background: var(--accent-soft); }

/* ---------- reports, team, widget pages ---------- */
.scroll-page { overflow-y: auto; }
.page-inner { max-width: 1040px; margin: 0 auto; padding: 24px; display: grid; gap: 16px; }
.page-head { display: flex; justify-content: space-between; align-items: center; }
.page-head h2 { margin: 0; font-size: 22px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; min-width: 0; }
.panel h3 { margin: 0 0 6px; font-size: 15px; }
.panel h3.mt { margin-top: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel-head h3 { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.card-label { color: var(--muted); font-size: 12px; }
.card-value { font-size: 26px; font-weight: 700; margin: 2px 0; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.sw.created, .bar.created { background: var(--accent); }
.sw.closed, .bar.closed { background: var(--closed-bar); }
.chart { display: flex; gap: 6px; height: 200px; align-items: stretch; overflow-x: auto; }
.bar-group { flex: 1; min-width: 34px; display: flex; flex-direction: column; }
.bars { flex: 1; display: flex; gap: 2px; align-items: flex-end; border-bottom: 1px solid var(--line); padding-top: 16px; }
.bar { flex: 1; border-radius: 3px 3px 0 0; min-height: 1px; position: relative; }
.bar span { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--muted); }
.bar-label { font-size: 10px; color: var(--muted); text-align: center; margin-top: 4px; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 10px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: 0; }
.table td.actions { text-align: right; white-space: nowrap; }
.cell-user { display: inline-flex; align-items: center; gap: 8px; }
.pill { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--bg); color: var(--muted); }
.pill.ok { background: #dcfce7; color: var(--ok); }
.invite-form .row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.invite-form .row input { flex: 1; min-width: 200px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--panel); }
.invite-result { margin-top: 10px; }
.invite-result.ok { padding: 10px; border-radius: 8px; background: var(--accent-soft); }
.invite-result.err { color: var(--danger); }
.link-row { display: flex; gap: 8px; margin-top: 8px; }
.link-row input { flex: 1; font-family: ui-monospace, monospace; font-size: 12px; }
.snippet { background: #0f172a; color: #e2e8f0; padding: 12px 14px; border-radius: 8px; overflow-x: auto; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; }
#widget-form { display: grid; gap: 10px; justify-items: start; }
#widget-form label { display: grid; gap: 4px; width: 100%; color: var(--muted); font-size: 12px; }
#widget-form input:not([type=color]), #widget-form textarea, #widget-form select { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); color: var(--text); font-size: 14px; }

dialog { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); width: min(440px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0,0,0,.35); }
#new-form { display: grid; gap: 10px; }
#new-form h3 { margin: 0; }
#new-form input, #new-form textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: 100dvh; }
  .rail { grid-row: 2; flex-direction: row; justify-content: space-around; padding: 6px 8px; }
  .rail .logo, .rail-spacer { display: none; }
  .me-menu { position: fixed; left: 8px; right: 8px; bottom: 56px; width: auto; max-height: calc(100dvh - 72px); }
  .main { height: auto; grid-row: 1; }
  .page { grid-row: 1; }
  .inbox-page { grid-template-columns: 1fr; grid-template-rows: 38% 1fr; height: auto; min-height: 0; }
  .sidebar { display: none; }
  .list { border-right: 0; border-bottom: 1px solid var(--line); }
  .list-head { padding: 10px 16px; }
  .messages, .conv-head, .composer { padding-left: 16px; padding-right: 16px; }
  .msg { max-width: 92%; }
  .scroll-page { height: auto; }
  .page-inner { padding: 16px; }
}

/* ---------- status menu ---------- */
.me-btn { border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 50%; }
.avatar.away::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; border: 2px solid var(--panel); }
.me-menu { position: absolute; left: 44px; bottom: 0; width: 320px; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.22); z-index: 20; }
.me-menu.in-sub > :not(.submenu) { display: none; }
.menu-head { display: flex; gap: 10px; align-items: center; padding: 8px 10px 10px; }
.menu-name { font-weight: 700; font-size: 15px; }
.menu-section-title { font-size: 12px; color: var(--muted); padding: 8px 10px 4px; }
.menu-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; text-align: left; cursor: pointer; color: inherit; text-decoration: none; font-size: 14px; }
.menu-row:hover { background: var(--bg); }
.menu-row .grow, .grow { flex: 1; min-width: 0; }
.menu-row select { max-width: 130px; }
.menu-row input:not([type]), .menu-row input[type=text] { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--panel); }
.menu-sub { margin-left: 16px; padding-left: 8px; border-left: 2px solid var(--line); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.chev { color: var(--muted); }
.check { color: var(--accent); font-weight: 700; }
.pad { padding: 0 10px; margin: 4px 0 8px; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; flex: none; }
.status-dot.away { background: #f59e0b; }
.switch { appearance: none; width: 36px; height: 20px; border-radius: 10px; background: var(--line); position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch:checked { background: #f59e0b; }
.switch:checked::after { transform: translateX(16px); }
#reassign-toggle:checked { background: var(--accent); }

/* ---------- plan banner, flash, misc ---------- */
.plan-banner { padding: 8px 16px; font-size: 13px; background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.plan-banner.warn { background: #fef3c7; color: #78350f; }
.plan-banner.bad { background: #fee2e2; color: #7f1d1d; }
.plan-banner a { color: inherit; font-weight: 700; }
/* Notifications sit at the top left: right of the rail, under the workspace bar. */
.flash { position: fixed; left: 68px; top: 52px; transform: translate(0, -12px); background: #111827; color: #fff; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; transition: all .2s; z-index: 50; max-width: calc(100vw - 32px); }
.flash.show { opacity: 1; transform: translate(0, 0); }
@media (max-width: 900px) { .flash { left: 16px; } }
.flash.show.has-action { pointer-events: auto; }
.flash-action { margin-left: 10px; border: 0; background: none; color: #a5b4fc; font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.pill.info { background: var(--accent-soft); color: var(--accent); }
.pill.warn, .pill.away { background: #fef3c7; color: #92400e; }
.pill.bad { background: #fee2e2; color: #b91c1c; }
.teammates .pill { font-size: 10px; padding: 0 6px; }
.tag { font-size: 11px; border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; margin-right: 6px; color: var(--muted); }
.readonly-note { padding: 12px 18px; background: var(--panel); border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.btn.sm { padding: 3px 8px; font-size: 12px; }
.btn:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
.link-btn { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; text-decoration: underline dotted; text-align: left; }
.bad-text { color: var(--danger); font-weight: 600; }
.seat-usage { color: var(--muted); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.checks label { display: inline-flex; gap: 4px; align-items: center; font-size: 13px; }
.access-pick { display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.access-edit { max-width: 320px; }
.roles-table td:not(:first-child), .roles-table th { text-align: center; }
.setting { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 12px; }
.setting-select { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
.inbox-admin { list-style: none; padding: 0; margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; }
.inbox-admin li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.inbox-admin li:last-child { border-bottom: 0; }
#new-inbox-form, #new-escalation-form { display: flex; gap: 8px; }
#new-inbox-form input, #new-escalation-form input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--panel); }

/* ---------- billing ---------- */
.billing-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.billing-head p { margin: 6px 0 12px; }
.plan-name { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.billing-stats { display: flex; gap: 24px; }
.billing-stats b { font-size: 22px; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.plan-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.plan-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-card-name { font-weight: 700; font-size: 16px; }
.plan-card .price { font-size: 24px; font-weight: 700; }
.plan-card ul { margin: 6px 0 10px; padding-left: 18px; color: var(--muted); font-size: 13px; }
.plan-card .btn { margin-top: auto; }

/* ---------- macros ---------- */
kbd { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--bg); }
.macro-pop { width: min(560px, 100%); max-height: 300px; overflow-y: auto; }
.macro-pop .pop-title { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); cursor: default; }
.macro-pop .macro-item { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.macro-name { font: 600 13px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); white-space: nowrap; }
.macro-preview { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.macro-empty { color: var(--muted); font-size: 13px; cursor: default; }
.page-head .search { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--panel); min-width: 0; width: 240px; }
.macro-form { display: grid; gap: 10px; }
.macro-form label { display: grid; gap: 4px; font-size: 13px; }
.macro-form input, .macro-form textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); color: var(--text); font-size: 14px; }
.macro-form .row { display: flex; gap: 8px; align-items: center; }
.macro-form p { margin: 0; }
.macro-list { list-style: none; margin: 0; padding: 0; }
.macro-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.macro-list li:last-child { border-bottom: 0; }
.macro-row-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.macro-row-head code { font-weight: 700; color: var(--accent); font-size: 13px; }
.macro-body { margin-top: 6px; white-space: pre-wrap; color: var(--text); font-size: 14px; }
@media (max-width: 900px) { .page-head .search { width: 150px; } .macro-pop .pop-title .muted { display: none; } }

/* ---------- who is viewing, and the details panel ---------- */
.avatar.xs { width: 18px; height: 18px; font-size: 9px; }
.avatar.xs.online::after, .avatar.xs.away::after { width: 6px; height: 6px; border-width: 1px; }
.conv-list .time { display: inline-flex; align-items: center; gap: 6px; }
.row-viewers { display: inline-flex; }
.row-viewers .avatar { box-shadow: 0 0 0 2px var(--panel); }
.row-viewers .avatar + .avatar { margin-left: -5px; }
.viewers { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 600; margin-right: auto; max-width: 100%; min-width: 0; }
.viewers.unassigned { background: #fef3c7; color: #92400e; }
.viewers .eye { width: 16px; height: 16px; fill: currentColor; flex: none; }
.viewer-stack { display: inline-flex; flex: none; }
.viewer-stack .avatar { box-shadow: 0 0 0 2px var(--panel); }
.viewer-stack .avatar + .avatar { margin-left: -6px; }
.viewer-stack .more { background: var(--muted); }
.viewers-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-title { flex: 0 1 auto; }
.details-btn svg { width: 16px; height: 16px; fill: currentColor; }
.icon-btn { color: var(--text); display: inline-grid; place-items: center; }
.icon-btn.sm { width: 22px; height: 22px; font-size: 15px; border-color: transparent; }

.inbox-page.with-details { grid-template-columns: 220px 300px minmax(0, 1fr) 300px; }
.details { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.details-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.details-head h3 { margin: 0; font-size: 15px; }
.details-body { overflow-y: auto; flex: 1; }
.d-rows { padding: 10px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.d-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 8px; font-size: 13px; }
.d-label, .d-list dt { color: var(--muted); }
.d-value select { width: 100%; }
.d-section { border-bottom: 1px solid var(--line); padding: 0 16px; }
.d-section > summary { list-style: none; cursor: pointer; padding: 12px 0; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
.d-section > summary::-webkit-details-marker { display: none; }
.d-section > summary::after { content: "›"; display: inline-block; color: var(--muted); transform: rotate(90deg); transition: transform .15s; font-size: 16px; }
.d-section:not([open]) > summary::after { transform: rotate(0deg); }
.d-section[open] { padding-bottom: 12px; }
.d-list { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 7px 8px; margin: 0; font-size: 13px; }
.d-list dd { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-list dd.wrap { white-space: normal; word-break: break-all; }
.d-list dd.multi { white-space: normal; }
.d-list code { font-size: 12px; }
.d-link-group { font-size: 13px; margin-bottom: 6px; }
.d-link-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); min-height: 26px; }
.d-link-group ul { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; gap: 4px; }
.d-link-group li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.d-link-group li a, .d-link-group li .link-btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.link-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 4px; border-radius: 4px; margin-left: auto; }
.link-x:hover { color: var(--danger); background: var(--bg); }
.d-link-form { display: grid; gap: 6px; margin: 4px 0 8px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.d-link-form input { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: var(--panel); color: var(--text); }
.d-link-form .row { display: flex; gap: 6px; }
.d-link-kind { font-size: 12px; font-weight: 600; }
#d-lead-more { margin-top: 10px; font-size: 13px; }
.d-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.d-recent li { min-width: 0; }
.d-recent-item { width: 100%; grid-template-columns: minmax(0, 1fr); text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; padding: 8px 10px; cursor: pointer; display: grid; gap: 2px; font: inherit; }
.d-recent-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.r-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-width: 0; }
.r-top .pill { flex: none; }
.r-subj { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.r-sub { font-size: 12px; }
.r-preview { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-hidden { font-size: 12px; }

@media (max-width: 1280px) {
  .inbox-page.with-details { grid-template-columns: 190px 260px minmax(0, 1fr) 280px; }
}
/* Narrower screens: the details panel slides over the conversation. */
@media (max-width: 1100px) {
  .inbox-page.with-details { grid-template-columns: 220px 300px minmax(0, 1fr); }
  .details { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 100vw); z-index: 15; box-shadow: -12px 0 32px rgba(0,0,0,.18); }
  .viewers-label { display: none; }
  .viewers { padding-right: 6px; }
}
@media (max-width: 900px) {
  .inbox-page.with-details { grid-template-columns: 1fr; }
  .details { bottom: 56px; width: 100vw; }
  .conv-actions { flex-wrap: wrap; }
}

/* ---------- search, tags, snooze, files, outbox ---------- */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--panel); padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.conv-list li:focus-visible, .views li:focus-visible, .teammates li:focus-visible { outline-offset: -2px; }
.list-search { padding: 10px 14px 0; }
.list-search input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: var(--bg); color: var(--text); }
.conv-list mark { background: #fde68a; color: inherit; border-radius: 2px; }
.tag.hash { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; padding: 0 6px; margin-right: 4px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.conv-tags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.conv-tags:empty { display: none; }
.tag-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 13px; line-height: 1; opacity: .7; }
.tag-x:hover { opacity: 1; }
.tag-form input { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--panel); color: var(--text); }
.snooze-wrap { position: relative; }
.pop-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; display: grid; gap: 2px; min-width: 220px; }
.pop-menu > button:not(.btn) { text-align: left; border: 0; background: none; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--text); }
.pop-menu > button:not(.btn):hover, .pop-menu > button:not(.btn):focus-visible { background: var(--accent-soft); }
.pop-custom { display: grid; gap: 4px; padding: 6px 10px 2px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); margin-top: 4px; }
.pop-custom input { border: 1px solid var(--line); border-radius: 6px; padding: 4px; background: var(--panel); color: var(--text); }
.pop-menu .btn.sm { margin: 4px 10px 4px; justify-self: start; }
.attach-btn { align-self: flex-end; height: 36px; width: 36px; display: grid; place-items: center; }
.attach-btn svg { width: 18px; height: 18px; fill: var(--muted); }
.pending-files { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.msg.mine .files, .msg.teammate .files { justify-content: flex-end; }
/* A fixed preview box: tall screenshots show their top, and the chat does not jump while images load. */
.file-img img { display: block; width: 200px; height: 140px; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); }
.file-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); text-decoration: none; font-size: 13px; }
.file-chip.bad { border-color: var(--danger); }
.msg.pending { opacity: .65; }
.msg.pending .msg-del { opacity: 1; }
.pane.dropping { box-shadow: inset 0 0 0 3px var(--accent); }
.warn-text { color: #b45309; }
.pill.warn { background: #fef3c7; color: #92400e; }

/* ---------- account, activity, widget settings ---------- */
.page-inner.narrow { max-width: 720px; }
.form-grid { display: grid; gap: 10px; }
.form-grid label:not(.setting) { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.form-grid input:not([type=checkbox]):not([type=time]), .form-grid textarea, .form-grid select { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); color: var(--text); font-size: 14px; }
.form-grid .setting { margin: 0; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row input { flex: 1; min-width: 140px; }
.hours-days { display: grid; gap: 6px; }
.hours-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hours-day { width: 130px; display: flex !important; flex-direction: row; gap: 6px; align-items: center; color: var(--text) !important; font-size: 14px !important; }
.hours-row input[type=time] { border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; background: var(--panel); color: var(--text); }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.secret-key { font: 600 16px/1.6 ui-monospace, monospace; letter-spacing: .05em; background: var(--bg); border-radius: 8px; padding: 8px 12px; margin: 6px 0; user-select: all; }
.backup-codes { font: 14px/1.8 ui-monospace, monospace; background: var(--bg); border-radius: 8px; padding: 10px 14px; columns: 2; margin: 0; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.nowrap { white-space: nowrap; }
#act-rows td { vertical-align: top; }
.notice { color: var(--accent); margin-top: 6px; }
.notice:empty { display: none; }
#code-step { display: grid; gap: 8px; }
#code-step.hidden { display: none; }
#code-step p { margin: 0; }
a.btn { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
#conv-list .preview.search-snip { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#ts-enable { margin-top: 10px; }

/* Escalation and restricted chats */
.tag.esc { border-color: #f59e0b; color: #b45309; }
.conv-list li.restricted .subj { color: var(--muted); font-style: italic; }
.conv-list li.restricted .preview { color: var(--muted); }
.avatar.lock { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.conv.is-restricted .messages { display: none; }
.restricted-note { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 24px; text-align: center; }
.restricted-note .lock-big { font-size: 34px; }
.composer-top { display: flex; align-items: center; gap: 8px; }
.composer-top .mode { margin-bottom: 8px; }
.escalate-inline { margin-bottom: 8px; color: #b45309; }
.reply-actions { padding: 8px 18px; background: var(--panel); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
#escalate-form, #perm-form { display: flex; flex-direction: column; gap: 10px; }
#escalate-form select { width: 100%; }
.perm-dialog { width: min(560px, calc(100vw - 32px)); }
.perm-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.perm-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.perm-row input { margin-top: 3px; }
.perm-default { font-size: 12px; white-space: nowrap; }
.d-recent-item.restricted { cursor: default; opacity: .8; }
#escalate-form h3, #perm-form h3, #escalate-form p, #perm-form p, #perm-escalation h4 { margin: 0; }
#perm-escalation { display: flex; flex-direction: column; gap: 6px; }
#escalate-form textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); color: var(--text); resize: vertical; }

/* Long lists: filter boxes and scrolling */
.side-filter { margin: 0 6px 6px; width: calc(100% - 12px); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; background: var(--bg); color: var(--text); font-size: 13px; }
.side-scroll { max-height: min(40vh, 320px); overflow-y: auto; }
.conv-list li.more-row { display: block; text-align: center; padding: 12px; cursor: default; }
.members-wrap { max-height: 60vh; overflow-y: auto; }
.panel-head #member-filter { max-width: 240px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--panel); color: var(--text); }
.perm-row.locked { opacity: .65; }
#unassign-row .d-value { justify-content: flex-start; }

/* Icon buttons in the chat header and the bulk bar */
.icon-btn.tb { width: 34px; height: 34px; border-radius: 8px; }
.icon-btn.tb svg { width: 18px; height: 18px; fill: currentColor; }
.icon-btn.tb.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.icon-btn.tb.primary:hover { filter: brightness(1.08); }
.icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.menu-wrap { position: relative; }
.pop-menu > button:not(.btn) { display: flex; align-items: center; gap: 8px; }
.pop-menu .tick { margin-left: auto; color: var(--accent); }

/* Priority bars */
.prio-ico { width: 16px; height: 16px; flex: none; color: var(--muted); }
.icon-btn.tb .prio-ico { width: 18px; height: 18px; }
.prio-ico rect { fill: currentColor; opacity: .25; }
.prio-ico rect.on { opacity: 1; }
.prio-ico.p1 { color: #64748b; }
.prio-ico.p2 { color: #d97706; }
.prio-ico.p3 { color: #ea580c; }
.prio-ico.p4 { color: var(--danger); }
.row-prio { display: inline-flex; }
.row-prio .prio-ico { width: 14px; height: 14px; }
.prio-value { display: flex; align-items: center; gap: 6px; }
.prio-value select { flex: 1; min-width: 0; }

/* Owner icon in the list */
.row-owner { display: inline-flex; }
.row-owner.none { width: 18px; height: 18px; border: 1px dashed var(--muted); border-radius: 50%; color: transparent; font-size: 0; }

/* Selecting several chats */
.pick-wrap { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; }
.pick-wrap .pick { position: absolute; inset: 0; margin: 0; width: 22px; height: 22px; opacity: 0; cursor: pointer; accent-color: var(--accent); }
.conv-list.can-pick li:hover .pick-wrap .pick, .conv-list.picking .pick-wrap .pick, .pick-wrap .pick:focus-visible { opacity: 1; }
.conv-list.can-pick li:hover .pick-wrap .avatar, .conv-list.picking .pick-wrap .avatar { visibility: hidden; }
.conv-list:not(.can-pick) .pick { display: none; }
.conv-list li.picked { background: var(--accent-soft); }
.bulk-bar { display: flex; align-items: center; gap: 2px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); min-height: 52px; }
.bulk-bar > input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0 4px 0 0; }
.bulk-count { font-size: 12px; font-weight: 600; line-height: 1.25; margin-left: 4px; }
.bulk-count small { display: block; font-weight: 400; color: var(--muted); }
.bulk-bar .icon-btn.tb { width: 28px; height: 28px; border-color: transparent; }
.bulk-bar .icon-btn.tb svg, .bulk-bar .icon-btn.tb .prio-ico { width: 17px; height: 17px; }
.bulk-bar .icon-btn.tb:hover { border-color: var(--line); }
.bulk-bar .pop-menu { right: auto; left: 0; }
.bulk-bar .menu-wrap:nth-last-of-type(-n+2) .pop-menu { left: auto; right: 0; }
.bulk-pane { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px; }
.bulk-pane b { font-size: 16px; }
.bulk-pane p { max-width: 380px; margin: 0; line-height: 1.6; }
.list-filters { display: inline-flex; gap: 6px; }
.bulk-dialog { width: min(560px, calc(100vw - 32px)); }
#bulk-form { display: flex; flex-direction: column; gap: 10px; }
#bulk-form h3, #bulk-form p { margin: 0; }

/* Action lists (macro actions, bulk edits) */
.action-editor { display: flex; flex-direction: column; gap: 8px; }
.act-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.act-row { display: grid; grid-template-columns: minmax(130px, auto) 1fr auto; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--bg); }
.act-row:has(> .act-name + .link-x) { grid-template-columns: 1fr auto; }
.act-name { font-size: 13px; font-weight: 600; }
.act-row select, .act-row input, .act-add { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; background: var(--panel); color: var(--text); min-width: 0; }
.act-add { align-self: flex-start; color: var(--accent); font-weight: 600; cursor: pointer; }
.macro-acts { display: flex; flex-direction: column; gap: 6px; }
.label-like { font-size: 13px; }
.act-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 9px; font-size: 12px; background: var(--panel); }
.act-chip .prio-ico { width: 13px; height: 13px; }
.act-chip:not(:has(.link-x)) { padding-right: 9px; }
.macro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 0 8px; font-size: 12px; }
.macro-act-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.macro-acts-hint { color: var(--accent); }

/* Action lines in the chat */
.event { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; text-align: center; }
.ev-ico { display: inline-grid; place-items: center; min-width: 14px; }
.ev-ico .prio-ico { width: 13px; height: 13px; }
.ev-private { font-style: italic; }

/* ---------- workspaces: switcher, account page, buying ---------- */
.ws-tile { width: 36px; height: 36px; border-radius: 10px; border: 0; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .02em; display: grid; place-items: center; cursor: pointer; flex: none; background: var(--accent); margin-bottom: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.ws-tile:hover { filter: brightness(1.1); }
.ws-tile.sm { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; margin: 0; cursor: inherit; }
.ws-tile.lg { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; margin: 0; cursor: inherit; }
.ws-bar { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-bottom: 1px solid var(--line); background: var(--panel); min-height: 40px; flex-wrap: wrap; }
.ws-bar-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 4px 10px; cursor: pointer; max-width: 100%; min-width: 0; }
.ws-bar-btn:hover { border-color: var(--accent); }
.ws-bar-btn b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-bar-label { color: var(--muted); font-size: 12px; }
.ws-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); flex: none; }
.ws-others { font-size: 12px; color: #c2410c; background: #ffedd5; border-radius: 10px; padding: 2px 8px; margin-left: auto; }
.ws-menu { position: fixed; z-index: 30; width: 340px; max-width: calc(100vw - 16px); max-height: calc(100vh - 80px); overflow-y: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.ws-row { align-items: center; }
.ws-row .grow { display: flex; flex-direction: column; }
.ws-row-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-row.current { background: var(--accent-soft); }
.ws-count { min-width: 20px; height: 20px; border-radius: 10px; background: #f97316; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.ws-plus { width: 28px; text-align: center; color: var(--muted); font-size: 16px; }
.acct-page { max-width: 920px; margin: 0 auto; padding: 24px 16px 48px; }
.acct-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.acct-top .grow { min-width: 0; }
.acct-top h1 { margin: 0; font-size: 20px; }
.acct-notice { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; background: var(--accent-soft); }
.acct-notice.bad { background: #fee2e2; color: #7f1d1d; }
.acct-notice.ok { background: #dcfce7; color: #14532d; }
.ws-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ws-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; }
.ws-card:hover { border-color: var(--accent); }
.ws-card.locked { opacity: .85; }
.ws-card .grow { display: grid; gap: 3px; }
.ws-card-name { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.acct-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.acct-section { margin-top: 26px; }
.acct-section h2 { font-size: 15px; margin: 0 0 10px; }
.buy-form { display: grid; gap: 16px; }
.buy-form label.field { display: grid; gap: 6px; font-weight: 600; }
.buy-form input[type=text], .buy-form input[type=email], .buy-form input[type=password] { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); font-weight: 400; }
.buy-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.buy-plan { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); cursor: pointer; display: grid; gap: 4px; }
.buy-plan input { position: absolute; opacity: 0; }
.buy-plan:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.buy-plan:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.buy-plan .price { font-size: 22px; font-weight: 700; }
.buy-plan ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.buy-box { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 10px; }
.buy-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .rail .ws-tile { display: none; }
  .ws-bar { padding: 6px 12px; }
  .ws-bar-label { display: none; }
}

/* Billing page: price changes, extras and notices (round 15) */
.bill-note { margin: 10px 0 4px; padding: 9px 12px; border-left: 3px solid #f59e0b; background: #fffbeb; color: #78350f; border-radius: 6px; }
:root[data-theme="dark"] .bill-note { background: #3b2f12; color: #fde68a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bill-note { background: #3b2f12; color: #fde68a; } }
.extra-buy { display: grid; gap: 8px; margin: 10px 0; }
.extra-opt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.extra-opt .muted { flex: 1; min-width: 160px; }
.buy-seats { display: flex; gap: 6px; align-items: center; margin: 6px 0; }
.buy-all { display: flex; gap: 6px; align-items: center; margin: 8px 0 2px; font-weight: 600; }
.buy-all-sum { font-size: 12.5px; margin-bottom: 4px; }
.buy-seats input:disabled { opacity: .6; }
#billing-notices .list { list-style: none; margin: 0; padding: 0; }
#billing-notices li { padding: 8px 0; border-bottom: 1px solid var(--line); }
#billing-notices li:last-child { border-bottom: 0; }
.hours-days.dim { opacity: .45; }

/* Rating at the end of a website chat */
.rating-card { align-self: center; width: min(420px, 100%); display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 13px; }
.rating-card.good { border-color: #86efac; }
.rating-card.bad { border-color: #fca5a5; }
.rating-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rating-face { font-size: 20px; line-height: 1; }
.rating-comment { margin: 0; padding: 6px 10px; border-left: 3px solid var(--line); color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* Profile photos and your settings */
.avatar.photo { background-size: cover !important; background-position: center !important; color: transparent; }
.avatar.xl { width: 72px; height: 72px; font-size: 26px; }
.profile-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-photo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted.small, .small { font-size: 12px; }
.ideas { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

/* Selected text: Translate / Copy, and translations (team only) */
.sel-menu { position: fixed; z-index: 60; display: flex; gap: 2px; padding: 3px; background: #111827; border-radius: 9px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.sel-menu button { border: 0; background: none; color: #fff; font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 6px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.sel-menu button:hover, .sel-menu button:focus-visible { background: rgba(255,255,255,.16); }
.translate-dialog { width: min(520px, calc(100vw - 32px)); }
.translate-dialog form { display: grid; gap: 10px; }
.translate-dialog h3 { margin: 0; }
.tr-original { margin: 0; padding: 8px 12px; border-left: 3px solid var(--line); background: var(--bg); border-radius: 6px; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; }
.tr-result { padding: 10px 12px; border: 1px solid var(--accent); border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.tr-result .tr-label, .translation .tr-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.translation { margin-top: 4px; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel); font-size: 13px; white-space: pre-wrap; word-break: break-word; width: fit-content; max-width: 100%; }
.msg.mine .translation, .msg.teammate .translation { margin-left: auto; }
.translation button { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 11px; margin-left: 6px; }
.profile-photo-actions label.btn { font-size: 14px; color: var(--text); margin: 0; }

/* Round 17: emoji ratings, CSAT, conversation report */
.rating-card.ok { border-color: #fcd34d; }
.rating-scale { display: flex; gap: 4px; font-size: 18px; }
.rating-scale span { opacity: .28; filter: grayscale(1); }
.rating-scale span.on { opacity: 1; filter: none; transform: scale(1.15); }
.report-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: -8px; overflow-x: auto; }
.report-tabs a { padding: 8px 12px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 600; font-size: 14px; }
.report-tabs a.active { color: var(--text); border-bottom-color: var(--accent); }
#report-overview, #report-conversations { display: grid; gap: 16px; min-width: 0; }
.csat-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); gap: 12px; min-width: 0; }
.csat-row .panel { margin: 0; display: grid; gap: 8px; align-content: start; }
.csat-value { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 10px; }
.csat-diff { font-size: 13px; font-weight: 600; }
.csat-diff.up { color: var(--ok); }
.csat-diff.down { color: var(--danger); }
.rating-bar { display: flex; height: 16px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--bg); }
.rating-bar .seg { min-width: 4px; }
.rating-bar .seg.empty { background: var(--line); }
.r1 { background: var(--r1); } .r2 { background: var(--r2); } .r3 { background: var(--r3); } .r4 { background: var(--r4); } .r5 { background: var(--r5); }
.rating-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.rating-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rating-legend b { color: var(--text); font-variant-numeric: tabular-nums; }
.rating-legend .sw { border-radius: 50%; }
.rr-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rr-filters select, .rr-filters input { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.rr-filters input { flex: 1; min-width: 160px; }
.rr-filters select { max-width: 100%; }
.rr-table td { vertical-align: top; }
.rr-rating { white-space: nowrap; }
.rr-face { font-size: 18px; vertical-align: -2px; }
.rr-comment { min-width: 180px; max-width: 320px; white-space: pre-wrap; word-break: break-word; }
.rr-empty { text-align: center; padding: 24px !important; }
.panel-head .grow { flex: 1; }
.panel-head #rr-count { margin-left: 10px; font-size: 13px; }

/* Keyboard shortcuts and quick assign */
.keys-dialog { width: min(640px, calc(100vw - 32px)); }
.keys-dialog h3 { margin: 0 0 4px; }
.keys-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 24px; }
.keys-list h4 { margin: 12px 0 6px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.keys-list dl { margin: 0; display: grid; gap: 6px; }
.keys-list dl div { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.keys-list dt { min-width: 92px; white-space: nowrap; color: var(--muted); }
.keys-list dd { margin: 0; }
.send-key { border: 1px solid var(--line); border-radius: 10px; margin: 16px 0 0; padding: 8px 12px; display: grid; gap: 4px; }
.send-key legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.assign-dialog { width: min(420px, calc(100vw - 32px)); }
.assign-dialog form { display: grid; gap: 8px; }
.assign-dialog h3 { margin: 0; }
#assign-q { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); color: var(--text); font: inherit; }
.assign-list { max-height: 320px; overflow-y: auto; display: grid; gap: 2px; }
.assign-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.assign-item:hover, .assign-item.sel { background: var(--accent-soft); }
.assign-item .avatar.none { background: var(--line); color: var(--muted); }
.assign-empty { padding: 12px 8px; }

/* Reply box: AI rewrite / translate for selected text */
.compose-tools { position: fixed; z-index: 70; }
.compose-ai-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.compose-ai-btn[aria-expanded="true"] { background: var(--accent-soft); }
.ai-badge { background: var(--text); color: var(--panel); border-radius: 4px; font-size: 10px; font-weight: 700; padding: 1px 4px; }
.compose-menu { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 230px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.18); display: grid; }
.compose-menu button { border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; padding: 8px 12px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.compose-menu button:hover, .compose-menu button:focus-visible { background: var(--bg); outline: none; }
.compose-note { font-size: 11px; color: var(--muted); padding: 6px 12px 2px; border-top: 1px solid var(--line); margin-top: 4px; max-width: 240px; }
.compose-langs { left: 240px; max-height: 300px; grid-template-rows: auto 1fr; }
.compose-langs input { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; margin-bottom: 4px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
#compose-lang-list { overflow-y: auto; max-height: 240px; display: grid; }
#input.busy { opacity: .6; }
@media (max-width: 720px) {
  .csat-row { grid-template-columns: 1fr; }
  .compose-langs { left: 0; bottom: calc(100% + 6px); }
  .keys-list dt { min-width: 76px; }
}

/* Inbox preferences (Your settings): text size, per seat. Compact cards are in theme-r2.css. */
body.text-small #app { zoom: .9; height: calc(100vh / .9); }
body.text-large #app { zoom: 1.15; height: calc(100vh / 1.15); }

/* ---------- delivery ticks, presence, who is writing, close from the list (round 20) ---------- */
.ticks { display: inline-flex; vertical-align: -1px; margin-left: 2px; }
.ticks svg { width: 15px; height: 11px; fill: var(--muted); }
.ticks-sending svg { width: 12px; height: 12px; }
.ticks-read svg { fill: #2f8cf0; }
.tick-word { margin-left: 3px; font-size: 11px; }
.tick-word.ticks-read { color: #2f8cf0; }
.conv-list .preview .ticks { margin: 0 1px 0 0; }
.row-typing { color: var(--accent); font-style: italic; }
.presence { margin-left: 8px; font-size: 12px; font-weight: 500; color: var(--muted); vertical-align: 2px; white-space: nowrap; }
.presence.on { color: #15803d; }
.presence.on::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 5px; vertical-align: 0; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
:root[data-theme="dark"] .presence.on { color: #4ade80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .presence.on { color: #4ade80; } }
/* A viewer who is writing: a soft ring that breathes. */
.avatar.writing { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent) !important; animation: writing 1.4s ease-in-out infinite; }
@keyframes writing { 50% { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .avatar.writing { animation: none; } }
.row-viewers .avatar.more, .viewer-stack .more { background: var(--muted); }
/* Close from the list: a round button over the end of the row, on hover. */
.conv-list li { position: relative; }
.row-close { position: absolute; right: 10px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); display: none; place-items: center; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.row-close svg { width: 16px; height: 16px; fill: var(--muted); }
.row-close:hover { border-color: #16a34a; }
.row-close:hover svg { fill: #16a34a; }
.conv-list li.closable:hover .row-close, .conv-list li.closable:focus-within .row-close { display: grid; }
.conv-list.picking .row-close { display: none !important; }
@media (hover: none) { .conv-list li.closable .row-close { display: grid; width: 24px; height: 24px; } .conv-list li.closable .preview { padding-right: 30px; } }
/* Block and unblock visitors */
.visitor-menu-wrap { position: fixed; z-index: 60; top: 0; left: 0; }
.visitor-menu-wrap .pop-menu { position: static; }
.visitor-more { vertical-align: middle; font-weight: 700; letter-spacing: 1px; }
.blocked-table td { vertical-align: top; }
.d-email a { word-break: break-all; }
.d-email .pill { white-space: nowrap; }

/* ---------- Email and WhatsApp ---------- */
.ch-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; line-height: 1; margin-right: 4px; vertical-align: -3px; background: var(--accent-soft); color: var(--accent); flex: none; }
.ch-badge.ch-email, .ch-badge.email { background: #e0f2fe; color: #0369a1; }
.ch-badge.ch-whatsapp, .ch-badge.whatsapp { background: #dcfce7; color: #15803d; }
.ch-card-head .ch-badge { width: 32px; height: 32px; font-size: 17px; border-radius: 8px; margin: 0; }
.channel-bar { margin: 0 12px; padding: 6px 10px; border-radius: 8px 8px 0 0; font-size: 12px; background: var(--accent-soft); color: var(--text); }
.channel-bar.warn { background: #fef3c7; color: #92400e; }
.channel-bar.locked { background: var(--bg); color: var(--muted); border: 1px dashed var(--line); border-bottom: 0; }
.send-line { font-size: 12px; color: var(--muted); margin-top: 3px; }
.send-line .link-btn { font-size: 12px; }
.send-count { font-variant-numeric: tabular-nums; }
.tpl-tag { font-size: 11px; padding: 0 6px; margin-left: 6px; border-radius: 8px; background: #dcfce7; color: #15803d; }
.full-email { margin-top: 4px; font-size: 12px; }
.full-email summary { cursor: pointer; color: var(--muted); }
.full-email pre { white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: 12px/1.4 ui-monospace, monospace; }
.tpl-params { display: grid; gap: 8px; margin: 8px 0; }
.tpl-params label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.tpl-params input { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--panel); }
.tpl-preview { white-space: pre-wrap; background: #dcfce7; color: #14532d; border-radius: 10px 10px 10px 2px; padding: 8px 10px; font-size: 13px; }
.tpl-preview:empty { display: none; }
.tpl-dialog, .new-dialog { width: min(520px, calc(100vw - 32px)); }
.tpl-dialog select { width: 100%; }
.seg { display: inline-flex; justify-self: start; width: max-content; max-width: 100%; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 10px; }
.seg button { border: 0; background: var(--panel); padding: 6px 12px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.active { background: var(--accent); color: #fff; }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
.ch-note { font-size: 12px; margin: 0 0 8px; }
.ch-note.error { min-height: 0; }
.new-part { display: grid; gap: 8px; }
.small { font-size: 12px; }
.ok-text { color: var(--ok); font-weight: 600; }
.back-link { color: var(--accent); text-decoration: none; font-size: 13px; justify-self: start; }
.back-link:hover { text-decoration: underline; }
.ch-cards { display: grid; gap: 10px; }
.ch-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ch-card.open { border-color: var(--accent); }
.ch-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ch-body { display: grid; gap: 10px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.ch-body h4 { margin: 6px 0 0; }
.ch-status { font-size: 11px; padding: 1px 7px; border-radius: 8px; background: var(--bg); color: var(--muted); }
.ch-status.ok { background: #dcfce7; color: #15803d; }
.ch-status.wait { background: #fef3c7; color: #92400e; }
.ch-status.bad { background: #fee2e2; color: #b91c1c; }
.ch-status.paused { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.ch-code { font-size: 15px; padding: 1px 6px; background: var(--panel); border-radius: 4px; }
.ch-gmail, .ch-drops { background: #fef3c7; color: #78350f; padding: 10px 12px; border-radius: 8px; }
.ch-tpls { margin: 0; padding-left: 18px; display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.ch-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-count { float: right; font-size: 11px; }
.form-grid .checks label { display: inline-flex; color: var(--text); font-size: 13px; }
.wiz-steps { display: flex; gap: 6px; padding: 0; margin: 0 0 6px; list-style: none; flex-wrap: wrap; counter-reset: wiz; }
.wiz-steps li { counter-increment: wiz; font-size: 12px; color: var(--muted); padding: 3px 10px; border-radius: 12px; background: var(--bg); }
.wiz-steps li::before { content: counter(wiz) ". "; }
.wiz-steps li.now { background: var(--accent); color: #fff; }
.wiz-steps li.done { background: #dcfce7; color: #15803d; }
.wiz-steps li.done::before { content: "✓ "; }
.qm-items { display: grid; gap: 10px; }
.qm-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 12px; display: grid; gap: 8px; position: relative; }
.qm-item legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.qm-tools { position: absolute; top: -4px; right: 8px; display: flex; gap: 2px; }
.qm-preview { max-width: 320px; background: var(--bg); border-radius: 12px; padding: 10px; display: grid; gap: 6px; }
.qm-bubble { background: var(--panel); border-radius: 10px 10px 10px 2px; padding: 8px 10px; white-space: pre-wrap; font-size: 13px; }
.qm-btn { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; text-align: center; color: #0284c7; }
.qm-rows { list-style: none; margin: 0; padding: 0; background: var(--panel); border-radius: 10px; font-size: 13px; }
.qm-rows li { padding: 6px 10px; border-bottom: 1px solid var(--line); }
.qm-rows li:last-child { border: 0; color: var(--accent); }
.macro-email summary { cursor: pointer; font-size: 13px; }
.macro-email textarea { width: 100%; margin-top: 6px; }
@media (max-width: 640px) { .ch-two { grid-template-columns: 1fr; } }
.ch-body > .btn, .ch-body .row .btn { justify-self: start; }
.panel.no-site .snippet, .panel.no-site #copy-snippet { opacity: .45; }
.ch-off { background: #fef3c7; color: #78350f; border: 1px solid #fde68a; border-radius: 10px; padding: 12px 14px; }
.ch-off p { margin: 6px 0 0; }
.ch-test { background: var(--accent-soft); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.ch-sim { border: 1px dashed var(--accent); border-radius: 10px; padding: 10px 12px; }
.ch-sim h4 { margin: 0; }
.seg button.off { opacity: .55; }
.ch-hook { border: 1px solid #fde68a; background: #fffbeb; border-radius: 10px; padding: 10px 12px; display: grid; gap: 8px; color: #78350f; } .ch-hook.ok { border-color: #bbf7d0; background: #f0fdf4; color: #14532d; } .ch-hook h4 { margin: 0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ch-hook { background: #2a2414; color: #fde68a; } :root:not([data-theme="light"]) .ch-hook.ok { background: #13261a; color: #bbf7d0; } }