:root {
  /* amos brand tokens. Mark runs Ember -> Flame; UI accent = Ember. */
  --bg: #f4f1ea;
  --card: #fffdf8;
  --panel: #fffdf8;
  --panel-2: #f4f1ea;
  --line: #e3ddd0;
  --ink: #2e2a24;
  --muted: #8a8170;
  --accent: #E8621A;
  --accent-dark: #C8530F;
  --accent-soft: #f7e6db;
  --in-bubble: #f1ece1;
  --out-bubble: #E8621A;
  --thread-bg: #ece8de;
  --danger: #b5573f;
  --ok: #7c9a82;
  --ink-deep: #0E0C0A; /* brand Ink, for dark surfaces (splash) */
  --font-brand: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
}
/* Brand typeface on headings + brand moments; body stays system for readability. */
.view-title, .panel-head strong, .no-access-card h2, .tagline, .brand h1 {
  font-family: var(--font-brand); letter-spacing: -.01em;
}

/* ---- Dark theme (brand Ink) ---- */
[data-theme="dark"] {
  --bg: #0E0C0A;
  --card: #1A1613;
  --panel: #1A1613;
  --panel-2: #14110e;
  --line: #2d2823;
  --ink: #F4EEE6;
  --muted: #9a8f83;
  --accent: #FF7A2F;
  --accent-dark: #E8621A;
  /* OPAQUE, and deliberately near-charcoal rather than brown: the orange text
     carries the accent. (Must stay opaque or scrolled rows bleed through the
     sticky grid headers.) */
  --accent-soft: #262019;
  --in-bubble: #241f1a;
  --out-bubble: #E8621A;
  --thread-bg: #100d0b;
  --danger: #e0795f;
  --ok: #8fb39a;
}
[data-theme="dark"] body { -webkit-font-smoothing: antialiased; }
/* fixes for surfaces that were hardcoded for the light theme */
[data-theme="dark"] .team-card.pending { background: #221a12; border-color: #6b4e1f; }
[data-theme="dark"] .team-badge.paused { background: #3a2420; color: #f0c2b5; }
[data-theme="dark"] .team-badge.pending { background: #3a2e16; color: #f0d39a; }
[data-theme="dark"] .badge.status-booked, [data-theme="dark"] .ctx-chip.tag, [data-theme="dark"] .call-pill.yes { color: #9ec1a6; }
[data-theme="dark"] .login-card { box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
[data-theme="dark"] img.avatar { background: transparent; }

* { box-sizing: border-box; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ui-icon {
  width: 1em; height: 1em; display: inline-block; flex: none; vertical-align: -.14em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Lock everything to the viewport width so the page can never pan sideways on mobile. */
html, body { height: 100%; margin: 0; width: 100%; max-width: 100%; overflow: hidden; overscroll-behavior: none; }
/* App-like touch: no double-tap zoom (pan/pinch still work), no grey tap flash. */
html { touch-action: manipulation; }
* { -webkit-tap-highlight-color: transparent; }
/* Long-press on app chrome shouldn't start text selection (messages stay selectable). */
.rail, .scopes, .list-header, .thread-header, .home-head, .panel-head, .composer-fab { -webkit-user-select: none; user-select: none; }
/* Inner scrollers absorb their own overscroll instead of rubber-banding the shell. */
.home, .panel-body, .conversations, .canned-list, .hw-table-wrap, #trackerBody, #view-insights, #view-scripts { overscroll-behavior: contain; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.muted { color: var(--muted); }
button, select, input, textarea { font: inherit; }
[hidden] { display: none !important; }

/* ---- login overlay ---- */
.login-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; padding: 24px;
  background: var(--bg); overflow-y: auto;
}
.error:empty { display: none; }

/* ---- login ---- */
.login-body { display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 360px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 10px 30px rgba(46,42,36,.06);
}
.brand { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.brand img { height: 64px; }
.brand h1 { margin: 6px 0 0; font-size: 1.3rem; letter-spacing: .3px; }
.brand p { margin: 0; font-size: .9rem; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; color: var(--muted); }
.login-card input {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: 12px 14px; outline: none;
}
.login-card input:focus { border-color: var(--accent); }
.login-card button {
  margin-top: 6px; background: var(--accent); color: white; border: none;
  border-radius: 12px; padding: 13px; font-weight: 600; cursor: pointer;
}
.login-card button:hover { background: var(--accent-dark); }
.error { background: rgba(181,87,63,.1); color: var(--danger); padding: 10px 12px; border-radius: 10px; font-size: .85rem; }

/* ---- hub shell ---- */
/* Height tracks the *visible* viewport (set in JS from visualViewport) so the iOS
   keyboard can't push the chat header off the top. Falls back to dvh/vh. */
.shell { position: fixed; top: var(--app-top, 0); left: 0; right: 0;
  height: 100vh; height: var(--app-height, 100dvh);
  display: grid; grid-template-columns: 96px 1fr; overflow: hidden; max-width: 100vw; }
.rail {
  background: var(--card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px; padding-top: max(14px, env(safe-area-inset-top));
}
.rail-logo img { height: 32px; margin-bottom: 10px; }
.rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 100%; background: none; border: none; border-radius: 14px;
  padding: 10px 4px; color: var(--muted); cursor: pointer; font-size: .68rem;
}
.rail-btn .ri { font-size: 1.25rem; line-height: 1; display: grid; place-items: center; }
.rail-btn .ri .ui-icon { width: 1.2em; height: 1.2em; }
.rail-btn:hover { background: var(--panel-2); }
.rail-btn.active { background: var(--accent-soft); color: var(--accent-dark); }
.rail-spacer { flex: 1; }
.rail-me { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .62rem; color: var(--muted); text-align: center; }
.rail-signout { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px;
  border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted);
  padding: 7px 3px; font: inherit; font-size: .65rem; cursor: pointer; }
.rail-signout .avatar { width: 28px; height: 28px; font-size: .68rem; }
.rail-signout:hover { border-color: var(--line); background: var(--panel-2); color: var(--accent-dark); }
.viewport { min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.view { flex: 1 1 auto; min-height: 0; min-width: 0; }
.subtabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--card); flex: 0 0 auto; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs .chip { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }

@media (max-width: 760px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .viewport { order: 1; }
  /* Bottom nav bar: evenly-spaced tabs, icon over label, active tab in accent. */
  .rail { order: 2; flex-direction: row; align-items: stretch; justify-content: space-around;
    border-right: none; border-top: 1px solid var(--line); background: var(--card);
    box-shadow: 0 -3px 12px rgba(0,0,0,.06);
    padding: 4px 2px; padding-bottom: max(4px, env(safe-area-inset-bottom));
    flex-wrap: nowrap; gap: 0; overflow: visible; }
  .rail-logo, .rail-spacer, .rail-me, .rail-signout { display: none; }
  .rail-btn { flex: 1 1 0; min-width: 0; width: auto; padding: 8px 2px 5px; gap: 2px;
    font-size: .6rem; border-radius: 0; justify-content: flex-start; position: relative; }
  .rail-btn .ri { font-size: 1.35rem; }
  .rail-btn .rl { white-space: nowrap; }
  .rail-btn:hover { background: transparent; }
  .rail-btn.active { background: transparent; color: var(--accent); font-weight: 600; }
  .rail-btn.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--accent); }
  /* Overflow groups collapse into the "More" sheet; keep the bar to ≤4 tabs.
     #rail prefix keeps this winning over the base `.rail-more { display:none }`. */
  #rail .rail-more { display: flex; }
  #rail .rail-btn[data-group="content"],
  #rail .rail-btn[data-group="comments"],
  #rail .rail-btn[data-group="settings"] { display: none !important; }

  /* Panels: less padding, let the head wrap, stack two-column layouts. */
  .panel-body { padding: 14px; }
  .panel-head { flex-wrap: wrap; gap: 8px; }
  .two-col { grid-template-columns: 1fr; gap: 14px; }

  /* Tracker grid: tighter cells + smooth touch scroll; frozen row numbers keep you oriented. */
  #trackerBody { margin: 10px 0; -webkit-overflow-scrolling: touch; }
  table.grid { font-size: .76rem; }
  table.grid th, table.grid td { min-width: 118px; max-width: 220px; padding: 4px 6px; }
  /* Pin the first column (reel #) while scrolling sideways, so you never lose the row. */
  table.grid th:first-child, table.grid td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--card);
    min-width: 44px; max-width: 64px; box-shadow: 2px 0 4px rgba(0,0,0,.06); }
  table.grid th:first-child { z-index: 4; background: var(--accent-soft); }
  table.grid td .cell-clip { max-height: 84px; }
  #trackerTabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  #trackerTabs .chip { flex: 0 0 auto; }

  /* Inputs at 16px so iOS doesn't zoom in on focus. */
  input, textarea, select { font-size: 16px; }

  /* Chat: full-screen conversation (hide the bottom nav while reading a thread). */
  body.in-thread .rail { display: none; }
  /* Comfortable touch targets. */
  .composer button, .canned-btn { min-height: 46px; }
  .back { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; margin-left: -4px; }
  .conv { padding: 14px 16px; }
  .msg-media { max-width: min(220px, 72vw); }
  /* Full-width on their own strip; 16px avoids iOS zoom-on-focus. */
  .thread-actions select { max-width: none; font-size: 16px; }
}

.view-title { font-size: 1.05rem; }

/* ---- config panels (Rules / Knowledge) ---- */
.panel { height: 100%; display: flex; flex-direction: column; }
/* Views with more than one panel must stack them by content, not force each to full height. */
#view-insights .panel, #view-scripts .panel { height: auto; }
/* ...and the view itself scrolls (its panels exceed the screen, esp. on mobile). */
#view-insights, #view-scripts { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 20px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 22px; padding-top: max(16px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line); background: var(--card);
}
.panel-head .small { font-size: .75rem; margin: 2px 0 0; }
.panel-head button { background: var(--accent); color: #fff; border: none; border-radius: 12px; padding: 10px 18px; font-weight: 600; cursor: pointer; }
.panel-head button:hover { background: var(--accent-dark); }
.panel-head button:disabled { opacity: .5; cursor: default; }
.panel-body { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 20px 22px; max-width: 820px; width: 100%; }

.rule-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.rules-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.rules-tools-spacer { flex: 1; }
.rule-toggle { font-size: .8rem; min-width: 26px; }
.rules-list .rule-top { cursor: pointer; }
.rules-list .rule-card.collapsed { padding-bottom: 16px; }
.rules-list .rule-card.collapsed .rule-body { display: none; }
.rule-card.settings .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.rule-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.rule-name { font-weight: 600; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; background: var(--bg); color: var(--ink); }
.toggle { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.fld { display: flex; flex-direction: column; gap: 5px; font-size: .8rem; color: var(--muted); margin-bottom: 12px; }
.fld.big textarea { min-height: 160px; }
.fld input[type="number"], .fld input:not([type]) { width: 140px; }
.panel-body textarea, .panel-body input[type="text"], .panel-body input:not([type]) {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: 9px 11px; outline: none; font: inherit; resize: vertical;
}
.panel-body textarea:focus, .panel-body input:focus { border-color: var(--accent); }
#pubYtDesc, #pubIgCap { min-height: 96px; }
.replies { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; }
.reply-item { display: flex; gap: 6px; align-items: flex-start; }
.reply-item textarea { flex: 1; }
.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.ghost:hover { background: var(--panel-2); color: var(--ink); }
.ghost.tiny { font-size: .75rem; padding: 5px 9px; border-radius: 8px; }
.ghost.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.ghost.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.add-rule { margin: 4px 0 22px; }
@media (max-width: 760px) { .rule-card.settings .settings-grid { grid-template-columns: 1fr; } }

/* ---- stats ---- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.stat-val { font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.stat-label { font-size: .78rem; color: var(--muted); margin-top: 2px; }
/* Which account these numbers belong to, shown above each tab's cards. */
.stats-src { color: var(--muted); font-size: .85rem; margin: 0 0 12px; }
/* Friendly "not connected" / error card instead of a raw error string. */
.stat-empty { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.stat-empty .se-icon { font-size: 1.7rem; flex: none; }
.stat-empty p { margin: 4px 0 0; }
.stat-empty.skel-note { margin-top: 14px; }
/* Loading shimmer for the first paint. */
.skel-bar { height: 12px; border-radius: 6px; margin: 7px 0;
  background: linear-gradient(90deg, var(--panel-2), var(--line), var(--panel-2));
  background-size: 200% 100%; animation: skel 1.2s linear infinite; }
.skel-bar.w40 { width: 40%; height: 20px; }
.skel-bar.w70 { width: 70%; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.spark-wrap { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 60px; margin-top: 8px; }
.spark-bar { flex: 1; background: var(--accent); border-radius: 3px 3px 0 0; min-width: 3px; opacity: .85; }
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- insights ---- */
.ins-h { font-size: .95rem; margin: 18px 0 10px; color: var(--ink); }
.ins-h:first-child { margin-top: 0; }
.ins-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.ins-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ins-idea { margin: 8px 0 6px; color: var(--ink); font-size: .9rem; }
.ins-ex { margin: 4px 0; color: var(--muted); font-size: .82rem; font-style: italic; }
.ins-card ul { margin: 6px 0 12px; padding-left: 20px; }
.ins-card li { margin: 4px 0; font-size: .9rem; }

/* ---- comments bot ---- */
.cmt-card, .sent-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.cmt-card.approved { opacity: .6; }
.cmt-head { display: flex; align-items: center; gap: 8px; }
.cmt-text { color: var(--ink); font-size: .9rem; margin: 8px 0; }
.cmt-reply { width: 100%; }
.cmt-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
button.tiny { font-size: .75rem; padding: 6px 12px; border-radius: 8px; background: var(--accent); color: #fff; border: none; cursor: pointer; }
button.tiny:hover { background: var(--accent-dark); }
button.tiny:disabled { opacity: .5; cursor: default; }
.cmt-note { margin-left: 4px; }
.sent-reply { color: var(--ink); font-size: .9rem; margin: 8px 0; padding-left: 10px; border-left: 2px solid var(--accent); }
.sent-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sent-link { flex: none; font-size: .78rem; font-weight: 600; color: var(--accent); text-decoration: none; border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; }
.sent-link:hover { border-color: var(--accent); }
.cmt-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cmt-controls input#commentsVideoId { background: var(--bg); border: 1px solid var(--line); color: var(--ink); border-radius: 9px; padding: 8px 11px; width: 220px; }
.cmt-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 22px 0; }
.chip { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: .8rem; cursor: pointer; }
.chip.active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
.cmt-spacer { flex: 1; }
.cmt-age { margin-right: 8px; white-space: nowrap; }
.cmt-open { font-size: .78rem; color: var(--accent-dark); text-decoration: none; }
.cmt-open:hover { text-decoration: underline; }
.cmt-actions { flex-wrap: wrap; }
.cmt-refine { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cmt-reclass { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cmt-teach { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.cmt-teach .tw.approved { background: var(--accent); color: #fff; }
.cmt-help { margin: 10px 0 4px; padding: 0 22px; font-size: .85rem; }
.cmt-help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.cmt-help ul { margin: 8px 0 4px; padding-left: 18px; color: var(--muted); line-height: 1.5; }
.cmt-help li { margin: 4px 0; }

/* roomier, self-revealing comment cards */
.statsbar { padding: 12px 22px 0; font-size: .82rem; color: var(--muted); }
.cmt-card { padding: 16px 18px; margin-bottom: 16px; }
.cmt-text { margin: 10px 0 12px; line-height: 1.5; }
.cmt-reply { width: 100%; min-height: 66px; line-height: 1.5; overflow: hidden; resize: none; padding: 11px 13px; }
.cmt-actions { margin-top: 12px; gap: 8px; row-gap: 8px; }
#autoToggle { background: var(--ok); color: #fff; border: none; }
#autoToggle.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }

/* ---- reels ---- */
.reel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.reel-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.reel-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.reel-body { padding: 12px; }
.reel-cap { font-size: .82rem; color: var(--ink); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font-size: .76rem; color: var(--muted); }
.reel-stats b { color: var(--ink); }

/* ---- content tracker grid ---- */
table.grid { border-collapse: collapse; font-size: .82rem; }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 5px 8px; min-width: 90px; max-width: 280px; vertical-align: top; white-space: pre-wrap; }
table.grid th { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; text-align: left; position: sticky; top: 0; z-index: 3; }
#trackerBody { overflow: auto; padding: 0; margin: 14px 0; min-height: 0;
  /* Kill the iOS elastic bounce: rubber-banding let the table "drag" past its
     edges, pulling the frozen column away and exposing a blank strip. */
  overscroll-behavior: none; }
/* Grid view splits into a frozen header layer + a separate scroller, so row
   text can never paint above the headings (sticky-in-scroller leaked under
   browser zoom). Cards view keeps the plain scrolling container above. */
#trackerBody.split { overflow: hidden; display: flex; flex-direction: column; position: relative; }
.tracker-headwrap { overflow: hidden; flex: none; position: relative; z-index: 5; }
.tracker-scroll { overflow: auto; flex: 1 1 auto; min-height: 0;
  -webkit-overflow-scrolling: touch; overscroll-behavior: none; touch-action: pan-x pan-y; }
.tracker-headwrap table, .tracker-scroll table { margin: 0; }
.tracker-editbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 18px; border-bottom: 1px solid var(--line); background: var(--card); }
.tracker-edit-actions { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.tracker-live-btn { color: var(--accent-dark); border-color: var(--accent); font-weight: 700; }
.tracker-save-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--muted); font-size: .76rem; font-weight: 600; }
.tracker-save-state.saving { color: var(--accent-dark); }
.tracker-save-state.saved { color: var(--ok); }
.tracker-save-state.error { color: var(--danger); }
.tracker-swipe-hint { display: none; position: absolute; right: 12px; bottom: 12px; z-index: 30;
  padding: 6px 10px; border-radius: 999px; background: var(--ink-deep); color: #fff;
  font-size: .72rem; font-weight: 700; pointer-events: none; box-shadow: 0 3px 12px rgba(0,0,0,.24); }
/* The header layer never scrolls vertically, so sticky tops are moot there;
   left-stickiness on the corner cells still applies during horizontal sync. */
.tracker-headwrap th { top: auto !important; }
table.grid td:focus { outline: 2px solid var(--accent); background: var(--card); }
table.grid td .cell-clip { max-height: 100px; overflow-y: auto; outline: none; white-space: pre-wrap; }
table.grid td .cell-clip:focus { outline: 2px solid var(--accent); border-radius: 4px; }

/* ---- tracker card view (phone-friendly editing) ---- */
.tracker-cards { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 20px; max-width: 720px; }
.tr-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 12px 14px; }
.tr-card-head { font-weight: 700; margin-bottom: 4px; word-break: break-word; }
.tr-field { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-top: 1px solid var(--line); }
.tr-field:first-of-type { border-top: none; }
.tr-label { font-size: .68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tr-val { min-height: 26px; outline: none; white-space: pre-wrap; word-break: break-word; font-size: .92rem; padding: 2px 0; }
.tr-val:focus { outline: 2px solid var(--accent); border-radius: 6px; padding: 4px 6px; background: var(--bg); }
/* Copy button inside a card field: small chip pinned to the label row (the
   grid-cell styling doesn't reach here and it rendered as a full-width bar). */
.tr-field .cell-copy {
  position: absolute; top: 7px; right: 0; z-index: 2;
  width: 30px; height: 24px; padding: 0; line-height: 22px; text-align: center;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  color: var(--muted); font-size: .72rem; cursor: pointer;
}
.tr-field .cell-copy.copied { color: #fff; background: var(--accent); border-color: var(--accent); }
.tr-more summary { color: var(--muted); font-size: .78rem; cursor: pointer; padding: 8px 0 2px; -webkit-user-select: none; user-select: none; }
.tr-showmore { margin: 10px auto 24px; display: block; }
.chip.tr-toggle { margin-left: auto; border-style: dashed; }

/* Grid view on phones: drop the column-letter row (useless there) and give
   cells real tap targets. Sticky first column + header already apply. */
@media (max-width: 760px) {
  .tracker-editbar { padding: 6px 12px; }
  .tracker-swipe-hint:not([hidden]) { display: block; }
  table.grid tr.letters-row { display: none; }
  table.grid th, table.grid td { padding: 8px; }
}

/* Sticky grid surfaces must stay opaque even if --accent-soft ever carries
   alpha again: composite it over the card colour so scrolled rows can never
   show through the frozen header / row numbers. */
table.grid th, table.grid th:first-child, table.grid th.col-letter, table.grid .row-num, table.grid th.corner {
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card);
}

/* ---- 7-day reply-window countdown colours ---- */
.conv { border-left: 3px solid transparent; }
.conv.wnd-amber { border-left-color: #e8a13a; }
.conv.wnd-red { border-left-color: var(--danger); }
.conv.wnd-dead { opacity: .8; }
.badge.wnd { font-weight: 700; white-space: nowrap; }
.badge.wnd.amber { background: #f7ead2; color: #8a5a00; border-color: transparent; }
.badge.wnd.red { background: #f3d9d4; color: #8a2c1a; border-color: transparent; }
.badge.wnd.dead { background: var(--panel-2); color: var(--muted); }
[data-theme="dark"] .badge.wnd.amber { background: #3a2e16; color: #f0d39a; }
[data-theme="dark"] .badge.wnd.red { background: #3a2420; color: #f0c2b5; }

/* ---- conversation tags ---- */
.badge.tagb { background: #e8e4f4; color: #4d3d8f; border-color: transparent; font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .badge.tagb { background: #2a2440; color: #c9b8f0; }
.tag-filter { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 12px 8px; flex: none; }
.tag-filter .tagf { flex: 0 0 auto; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--muted); font: inherit; font-size: .76rem; cursor: pointer; white-space: nowrap; }
.tag-filter .tagf.active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
.tm-tags { display: flex; flex-direction: column; gap: 7px; padding-top: 10px; border-top: 1px solid var(--line); }
.tm-tags-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; background: #e8e4f4; color: #4d3d8f; border-radius: 999px; padding: 4px 10px; font-size: .78rem; font-weight: 600; }
[data-theme="dark"] .tag-chip { background: #2a2440; color: #c9b8f0; }
.tag-chip .tag-x { background: none; border: none; color: inherit; opacity: .7; cursor: pointer; font: inherit; font-size: .72rem; padding: 0 1px; }
.tag-chip .tag-x:hover { opacity: 1; }
.tm-tag-input { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); font: inherit; }
.tm-tag-input:focus { border-color: var(--accent); outline: none; }

/* ---- tracker top performers ---- */
.medal { margin-right: 4px; }
table.grid tr.top-1 .row-num, table.grid tr.top-2 .row-num, table.grid tr.top-3 .row-num { font-weight: 800; color: var(--accent-dark); }
.tr-card.top-1 { border-color: #d8a514; box-shadow: 0 0 0 1px #d8a51440; }
.tr-card.top-2 { border-color: #9fa6ad; }
.tr-card.top-3 { border-color: #c08a52; }
.chip.tr-sort { border-style: dashed; }

/* ---- comments review: clear hierarchy (their words vs your reply) ---- */
.cmt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmt-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); font-size: .68rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.badge.cmt-rule { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; font-weight: 700; }
.badge.cmt-late { background: #f7ead2; color: #8a5a00; border-color: transparent; }
[data-theme="dark"] .badge.cmt-late { background: #3a2e16; color: #f0d39a; }
.cmt-text { background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 10px 12px; }
.cmt-reply-label { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.cmt-reply { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font: inherit; box-sizing: border-box; }
.cmt-reply:focus { border-color: var(--accent); outline: none; }
.cmt-reply[readonly] { color: var(--muted); cursor: default; }
.cmt-approve { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.cmt-approve:hover { background: var(--accent-dark); }
.cmt-approve:disabled { opacity: .6; cursor: default; }
.cmt-tools { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.cmt-tools summary { color: var(--muted); font-size: .78rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.cmt-tools[open] summary { margin-bottom: 8px; }
.cmt-refine, .cmt-reclass, .cmt-teach { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cmt-card.approved { opacity: 1; border-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--card)); }
#commentsScan { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; }
#commentsScan:hover { background: var(--accent-dark); }
#commentsScan:disabled { opacity: .6; cursor: default; }
#commentsApproveAll:not([hidden]) { border-color: var(--accent); color: var(--accent-dark); font-weight: 700; }
.cmt-controls input#commentsVideoId { flex: 1 1 190px; min-width: 150px; }
.cmt-scan-options { position: relative; }
.cmt-scan-options summary { color: var(--muted); font-size: .8rem; font-weight: 600; cursor: pointer; list-style-position: inside; }
.cmt-scan-options > div { position: absolute; right: 0; top: calc(100% + 8px); z-index: 15; width: min(330px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.cmt-scan-options .toggle { margin-top: 10px; }
.cmt-reviewbar { padding: 11px 22px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel-2); }
.cmt-progress-copy { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; font-size: .78rem; color: var(--muted); }
.cmt-progress-copy strong { color: var(--ink); }
.cmt-progress-track { height: 5px; overflow: hidden; border-radius: 999px; background: var(--line); }
.cmt-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ok); transition: width .2s ease; }
.cmt-chip-sep { width: 1px; min-height: 25px; background: var(--line); margin: 0 3px; }
.cmt-card { transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.cmt-card.focused { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.cmt-card:not(.focused) .cmt-editor { display: none; }
.cmt-card.focused .cmt-compact-reply { display: none; }
.cmt-compact-reply { margin: 10px 0 2px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.cmt-compact-reply span { display: block; margin-bottom: 3px; color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cmt-compact-reply p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--ink); font-size: .84rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cmt-video { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 9px 0 0 34px; color: var(--muted); font-size: .75rem; text-decoration: none; }
.cmt-video:hover { color: var(--accent-dark); }
.cmt-video img { width: 44px; height: 25px; flex: none; border-radius: 5px; object-fit: cover; }
.cmt-video span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmt-video b { color: var(--accent); }
.cmt-select-wrap { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 26px; cursor: pointer; }
.cmt-select { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
.badge.cmt-state { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
.cmt-card.state-skipped { opacity: .82; }
.cmt-card.state-queued { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.cmt-card.state-approved { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 6%, var(--card)); }
.cmt-card:not(.state-review) .cmt-ai-actions, .cmt-card:not(.state-review) .cmt-tools { display: none; }
.cmt-ai-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cmt-card.focused .cmt-focus { display: none; }
.cmt-card:not(.focused) .cmt-actions { margin-top: 10px; }

@media (max-width: 760px) {
  #view-comments .panel-head { align-items: stretch; }
  #view-comments .panel-head > div:first-child { width: 100%; }
  .cmt-controls { width: 100%; align-items: stretch; }
  .cmt-controls > button { flex: 1 1 auto; min-height: 44px; padding: 9px 11px; }
  .cmt-scan-options { flex-basis: 100%; padding: 4px 0; }
  .cmt-scan-options summary { min-height: 34px; display: flex; align-items: center; }
  .cmt-scan-options > div { position: static; width: auto; margin-top: 6px; box-shadow: none; }
  .cmt-controls input#commentsVideoId { width: 100%; box-sizing: border-box; }
  .cmt-reviewbar { padding: 10px 14px; }
  .cmt-progress-copy { align-items: flex-start; flex-direction: column; gap: 2px; }
  .cmt-help { padding: 0 14px; }
  .cmt-chips { flex-wrap: nowrap; overflow-x: auto; padding: 10px 14px 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .cmt-chips::-webkit-scrollbar { display: none; }
  .cmt-chips .chip { flex: none; min-height: 36px; }
  .cmt-chip-sep { flex: none; min-height: 36px; }
  .cmt-card { padding: 14px; margin-bottom: 12px; }
  .cmt-video { margin-left: 0; }
  .cmt-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cmt-actions button { min-height: 42px; }
  .cmt-actions .cmt-note { grid-column: 1 / -1; margin-left: 0; }
  .cmt-card.focused .cmt-approve { grid-column: 1 / -1; }
  .cmt-reply { font-size: 16px; }
}

/* ---- auto-allocation pool (inbox settings) ---- */
.pool-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 460px; }
.pool-row { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; cursor: pointer; background: var(--bg); font-weight: 600; }
.pool-row input { width: auto; accent-color: var(--accent); }
.pool-row .muted { margin-left: auto; font-weight: 400; }
.pool-row:has(input:checked) { border-color: var(--accent); }

/* ---- Hook Lab + daily brief ---- */
.hook-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.hook-controls input { flex: 1 1 220px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; color: var(--ink); font: inherit; }
.hook-controls input:focus { border-color: var(--accent); outline: none; }
#hookGo { background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; }
#hookGo:hover { background: var(--accent-dark); }
#hookGo:disabled { opacity: .6; cursor: default; }
.hook-patterns { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 12px; }
.hook-pattern { background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 8px 11px; font-size: .85rem; }
.hook-list { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.hook-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 9px 12px; }
.hook-text { flex: 1; min-width: 0; font-weight: 600; }
.hook-row .ghost.tiny { flex: none; }
.brief-card { border: 1px solid var(--accent); border-radius: 14px; background: var(--card); padding: 14px 16px; margin: 14px 0 4px; display: flex; flex-direction: column; gap: 9px; max-width: 760px; }
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brief-hooks { display: flex; flex-direction: column; gap: 6px; }
.brief-line { font-size: .88rem; }
.pub-step-action { margin-left: auto; }

/* ---- publisher page ---- */
.pub-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; max-width: 1040px; }
@media (max-width: 900px) { .pub-grid { grid-template-columns: 1fr; } }
.pub-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pub-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pub-step { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.pub-step-n { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pub-reel-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pub-reel-row input { width: 110px; }
.pub-file input[type="file"] { border: 1px dashed var(--line); border-radius: 10px; padding: 14px 10px; background: var(--bg); width: 100%; box-sizing: border-box; }
.pub-folder summary { color: var(--muted); font-size: .8rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.pub-folder[open] summary { margin-bottom: 8px; }
.pub-platforms { display: flex; flex-direction: column; gap: 8px; }
.platform-chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; cursor: pointer; background: var(--bg); font-weight: 600; }
.platform-chip input { width: auto; accent-color: var(--accent); }
.platform-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.pub-connections summary { color: var(--muted); font-size: .8rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.pub-conn-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pub-when-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pub-card input[type="datetime-local"], .pub-card input[type="text"], .pub-card input:not([type]), .pub-card textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  color: var(--ink); font: inherit; width: 100%; box-sizing: border-box;
}
.pub-card input:focus, .pub-card textarea:focus { border-color: var(--accent); outline: none; }
/* Native date/time pickers follow the app theme instead of forcing white. */
[data-theme="dark"] input[type="datetime-local"], [data-theme="dark"] input[type="date"] { color-scheme: dark; }
.pub-stagger { display: flex; align-items: center; gap: 7px; cursor: pointer; margin-top: 2px; }
.pub-stagger input { width: auto; accent-color: var(--accent); }
.pub-go { background: var(--accent); color: #fff; border: none; border-radius: 12px; padding: 14px; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; }
.pub-go:hover { background: var(--accent-dark); }
.pub-go:disabled { opacity: .6; cursor: default; }
.pub-progress { min-height: 1.1em; }
.pub-list { display: flex; flex-direction: column; gap: 10px; max-width: 1040px; }

/* "Load older messages" pill at the top of a thread */
.load-older { display: flex; justify-content: center; padding: 6px 0 10px; }
.load-older button { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; color: var(--muted); font: inherit; font-size: .8rem; cursor: pointer; }
.load-older button:hover { border-color: var(--accent); color: var(--accent-dark); }
.load-older button:disabled { opacity: .6; cursor: default; }
/* Data cells are positioning contexts for the hover copy button. */
table.grid td { position: relative; }
table.grid td .cell-copy {
  position: absolute; top: 2px; right: 2px; z-index: 2;
  width: 20px; height: 20px; padding: 0; line-height: 18px; text-align: center;
  border: 1px solid var(--line); border-radius: 4px; background: var(--card);
  color: var(--muted); font-size: .72rem; cursor: pointer; opacity: 0;
  transition: opacity .12s; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
table.grid td:hover .cell-copy, table.grid td:focus-within .cell-copy, table.grid td .cell-copy:focus { opacity: 1; }
table.grid td .cell-copy:hover { color: var(--accent-dark); border-color: var(--accent); }
table.grid td .cell-copy.copied { opacity: 1; color: #fff; background: var(--accent); border-color: var(--accent); }
/* Keep the current live reel obvious, even after restoring a saved position. */
table.grid tr.row-latest td, table.grid tr.row-latest .row-num {
  background: color-mix(in srgb, var(--accent) 18%, var(--card));
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
}
table.grid tr.row-latest .row-num { box-shadow: inset 5px 0 0 var(--accent); color: var(--accent-dark); font-weight: 800; }
.tr-card.row-latest { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.current-live-badge { display: inline-flex; align-items: center; width: max-content; margin: 0 7px 3px 0;
  border-radius: 999px; padding: 2px 6px; background: var(--accent); color: #fff;
  font-size: .58rem; line-height: 1.25; font-weight: 800; letter-spacing: .04em; white-space: nowrap; vertical-align: middle; }
.live-pulse { animation: live-row-pulse .75s ease-out 2; }
@keyframes live-row-pulse {
  50% { filter: brightness(1.15); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 42%, transparent); }
}
/* Spreadsheet reference furniture: column letters across the top, row numbers down the left. */
table.grid th.col-letter, table.grid .row-num, table.grid th.corner {
  background: var(--accent-soft); color: var(--muted); font-weight: 600; text-align: center; vertical-align: middle;
}
table.grid th.col-letter { top: 0; z-index: 20; height: 20px; line-height: 18px; padding: 0 6px; font-size: .68rem; }
table.grid th.corner { top: 0; left: 0; z-index: 24; min-width: 34px; max-width: 34px; }
table.grid .row-num { position: sticky; left: 0; z-index: 6; min-width: 34px; max-width: 34px; font-size: .7rem; }
/* Heading row freezes flush against the letter bar (slight overlap avoids any gap). */
table.grid tr.heading-row th { top: 19px; z-index: 18; }
table.grid tr.heading-row th.row-num { top: 19px; left: 0; z-index: 22; }
/* Batch divider: an empty spacer row in the sheet draws as a thick accent
   line between batches instead of a blank grid row. */
table.grid tr.batch-sep td {
  padding: 0; height: 9px; border: none; background: var(--panel-2);
  border-top: 3px solid var(--accent); border-bottom: 1px solid var(--line);
}

/* Reel numbers sit dead-centre in their cells, both axes (the row numbers on
   the left already do, via the .row-num rule above). */
table.grid td.reel-col, table.grid th.reel-col { text-align: center; vertical-align: middle; }
table.grid td.reel-col .cell-clip { text-align: center; }

/* Crisp seam under the frozen header, so rows sliding beneath it read as
   "scrolling underneath" instead of broken text floating above the table. */
table.grid tr.heading-row th {
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 8px 12px -8px rgba(46, 42, 36, .28);
}
[data-theme="dark"] table.grid tr.heading-row th { box-shadow: 0 10px 14px -8px rgba(0, 0, 0, .65); }
/* Phones hide the column-letter bar, so the frozen heading pins flush to the
   top (the 19px desktop offset left a gap rows showed through). This override
   must live AFTER the base rules above to win the cascade. */
@media (max-width: 760px) {
  table.grid tr.heading-row th, table.grid tr.heading-row th.row-num { top: 0; }
}

/* ---- recent videos ---- */
.vid-row { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.vid-row img { width: 88px; height: 50px; object-fit: cover; border-radius: 8px; flex: none; }
.vid-meta a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.vid-meta a:hover { color: var(--accent); }

/* ---- inbox (inside the hub) ---- */
.app {
  position: relative;
  height: 100%; display: grid; min-width: 0; min-height: 0;
  /* Desktop list-pane width is user-draggable via .pane-resizer (persisted). */
  grid-template-columns: var(--inbox-list-w, 340px) 1fr;
  /* Bound the row to the screen height (not the content). Without this the panes
     grow to fit their content, so the whole thread scrolls and the header scrolls
     away instead of just the message list. */
  grid-template-rows: minmax(0, 1fr);
}
/* Let every pane shrink to the viewport instead of expanding to its content
   (flex/grid items default to min-width:auto, which is what pushed the chat
   off the right edge on mobile). */
.app > *, .list-pane, .thread-pane, .thread, .messages, .conversations { min-width: 0; }
/* ---- lead profile pane (desktop, beside the chat) ---- */
.profile-pane { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto;
  min-height: 0; padding: 18px 16px 26px; overscroll-behavior: contain; }
@media (min-width: 1100px) {
  .app.with-profile { grid-template-columns: var(--inbox-list-w, 340px) 1fr 320px; }
}
/* Phones and small desktops keep the ☰ details menu instead. */
@media (max-width: 1099px) {
  .profile-pane { display: none !important; }
  #profileBtn { display: none; }
}
.pp-head { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 7px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.avatar.pp { width: 58px; height: 58px; border-radius: 50%; font-size: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; object-fit: cover; }
.pp-name { font-size: 1.05rem; font-weight: 700; word-break: break-word; }
.pp-handle { color: var(--muted); font-size: .85rem; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pp-chips.pp-ghltags { justify-content: flex-start; margin-top: 8px; }
.pp-sec { padding: 13px 0; border-bottom: 1px solid var(--line); }
.pp-sec h4 { margin: 0 0 8px; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pp-row { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; padding: 3px 0; }
.pp-row .k { color: var(--muted); flex: none; }
.pp-row .v { text-align: right; word-break: break-word; }
.pp-links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pp-call { font-size: .83rem; padding: 6px 0; border-top: 1px dashed var(--line); }
.pp-call:first-of-type { border-top: none; }
.pp-note { width: 100%; box-sizing: border-box; }
#profileBtn.open { color: var(--accent-dark); }

/* Drag handle between the list and thread panes (desktop only). Sits on the
   column boundary via the same width variable the grid uses. */
.pane-resizer {
  position: absolute; top: 0; bottom: 0; left: var(--inbox-list-w, 340px);
  width: 10px; margin-left: -5px; z-index: 30; cursor: col-resize;
  touch-action: none; user-select: none;
}
.pane-resizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  transform: translateX(-50%); background: transparent; transition: background .12s;
}
.pane-resizer:hover::after, .pane-resizer.dragging::after { background: var(--accent); }
body.resizing-panes { cursor: col-resize; user-select: none; }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .pane-resizer { display: none; }
  .app:not(.thread-open) .thread-pane { display: none; }
  .app.thread-open .list-pane { display: none; }
}

/* ---- list pane ---- */
.list-pane {
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--card);
}
.list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
}
.lh-text { min-width: 0; }
.me-greet { font-size: .78rem; color: var(--muted); margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-header .avatar { width: 38px; height: 38px; font-size: .82rem; flex: none; }
.me { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.me img { height: 30px; }
.logout { color: var(--muted); font-size: .9rem; background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; padding: 9px 16px; }
.logout:hover { color: var(--accent); border-color: var(--accent); }
.scopes { display: flex; flex-wrap: wrap; gap: 5px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.scopes button {
  /* Grow to share the row, but never shrink below the label: extra tabs wrap
     to a second row instead of truncating to "Unas…". */
  flex: 1 1 auto; min-width: fit-content; background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px;
  cursor: pointer; font-size: .78rem; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.scopes button.active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
.scope-count {
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: inline-grid; place-items: center; background: var(--panel-2); color: var(--muted);
  font-size: .65rem; font-weight: 700; line-height: 1;
}
.scopes button.active .scope-count { background: var(--accent); color: #fff; }
.setter-mode .scopes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setter-mode .scopes button { min-width: 0; }
/* Admin "view a setter's inbox" selector */
.setter-view { padding: 8px 12px 0; }
.setter-view select { width: 100%; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; font-size: .85rem; cursor: pointer; }
.setter-view select:focus { border-color: var(--accent); outline: none; }

.conversations { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; }
.conv {
  display: flex; gap: 12px; padding: 13px 16px; cursor: pointer;
  border-bottom: 1px solid var(--line);
  position: relative; transition: background .12s ease, transform .18s ease;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
/* Swipe-to-mark-unread: row slides under the finger/mouse; turns accent past the
   threshold to signal it'll toggle on release. Envelope hint shows the action. */
.conv.will-mark { background: var(--accent-soft); }
.conv.will-mark::after {
  content: "✉️"; position: absolute; top: 50%; transform: translateY(-50%);
  right: 16px; font-size: 1.1rem; pointer-events: none;
}
.conv:hover { background: var(--panel-2); }
.conv.active { background: var(--accent-soft); }
/* accent bar on the active row */
.conv.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.conv:active { transform: scale(.997); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #E8621A, #FF7A2F);
  display: grid; place-items: center; color: white; font-weight: 600; font-size: .95rem;
  object-fit: cover;
}
.conv-body { min-width: 0; flex: 1; }
.conv-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.conv-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-side { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.conv-time { color: var(--muted); font-size: .72rem; flex: none; }
.conv-send-alert { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center;
  background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
.conv-send-alert .ui-icon { width: 12px; height: 12px; stroke-width: 2.2; }
.conv-preview { color: var(--muted); font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.badge { font-size: .68rem; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.badge.status-needs_human { background: rgba(232,98,26,.12); color: var(--accent-dark); border-color: transparent; }
.badge.status-booked { background: rgba(124,154,130,.16); color: #5f7a66; border-color: transparent; }
.badge.website-enquiry { background: #e7eef8; color: #315f91; border-color: transparent; font-weight: 700;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .badge.website-enquiry { background: #192b3d; color: #a9c8e8; }
.website-enquiry-context { flex: none; padding: 12px 16px; border-bottom: 1px solid #c9d8e7;
  background: #f0f6fb; color: var(--ink); }
.wec-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.wec-title strong { color: #315f91; }
.wec-title span, .website-enquiry-context p { color: var(--muted); font-size: .76rem; }
.wec-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wec-details > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wec-details span { color: var(--muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.wec-details strong, .wec-details button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; text-align: left; }
.wec-details button { padding: 0; border: 0; background: none; color: #315f91; cursor: pointer; text-decoration: underline; }
.website-enquiry-context p { margin: 9px 0 0; }
[data-theme="dark"] .website-enquiry-context { background: #152332; border-color: #294159; }
[data-theme="dark"] .wec-title strong, [data-theme="dark"] .wec-details button { color: #a9c8e8; }
@media (max-width: 600px) {
  .wec-title { align-items: flex-start; flex-direction: column; gap: 2px; }
  .wec-details { grid-template-columns: 1fr; gap: 6px; }
}
.unread-dot {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--accent); color: white; font-size: .7rem; font-weight: 700;
  display: grid; place-items: center;
}
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }

/* ---- inbox upgrades: search, channel icon, unread highlight, context panel ---- */
.inbox-search { margin: 8px 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); font-size: .9rem; }
.inbox-search:focus { border-color: var(--accent); outline: none; }
.conv.unread { background: rgba(232,98,26,.05); }
.conv.unread .conv-name { font-weight: 700; }
.conv.unread.active { background: var(--accent-soft); }
.conv-chan { margin-right: 5px; font-size: .9rem; }
img.avatar { object-fit: cover; }
.thread-avatar { flex: none; }
.thread-avatar .avatar, .thread-avatar img.avatar { width: 38px; height: 38px; font-size: .82rem; }
.thread-avatar img.avatar { cursor: zoom-in; }
.img-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72);
  display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.img-lightbox img { max-width: min(360px, 86vw); max-height: 86vh; border-radius: 16px;
  box-shadow: 0 14px 44px rgba(0,0,0,.45); }
.thread-context { flex: 0 0 auto; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--card);
  display: flex; flex-direction: column; gap: 8px; }
.ctx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ctx-chip { font-size: .72rem; padding: 3px 9px; border-radius: 999px; background: var(--panel-2);
  color: var(--muted); border: 1px solid var(--line); }
.ctx-chip.chan { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; font-weight: 600; }
.ctx-chip.tag { background: rgba(124,154,130,.14); color: #5f7a66; border-color: transparent; }
.ctx-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ctx-link { font-size: .78rem; padding: 5px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); text-decoration: none; cursor: pointer; }
.ctx-link:hover { border-color: var(--accent); color: var(--accent); }
.ctx-note-wrap summary { font-size: .76rem; color: var(--muted); cursor: pointer; }
.ctx-note { width: 100%; margin-top: 6px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px;
  font-size: .85rem; resize: vertical; background: var(--bg); color: var(--ink); }
.ctx-note:focus { border-color: var(--accent); outline: none; }
.undo-send { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 3px 11px; font-size: .72rem; font-weight: 600; cursor: pointer; margin-left: 6px; }
.undo-send:hover { background: var(--accent-dark); }
.msg-del { background: none; border: none; color: inherit; opacity: 0; cursor: pointer; font-size: .72rem; margin-left: 4px; padding: 0 2px; transition: opacity .12s; }
.msg:hover .msg-del { opacity: .55; }
.msg-del:hover { opacity: 1; }
/* Touch devices have no hover, so reveal the remove button permanently. */
@media (hover: none) { .msg-del { opacity: .5; padding: 0 6px; } }

/* ---- thread pane ---- */
.thread-pane { display: flex; flex-direction: column; min-height: 0; background: var(--thread-bg); }
.thread-empty { flex: 1; display: grid; place-items: center; color: var(--muted); }
.thread { display: flex; flex-direction: column; min-height: 0; height: 100%; width: 100%; background: var(--bg); }
/* Desktop: keep the conversation a comfortable, centered column instead of full-width. */
@media (min-width: 761px) {
  .thread { max-width: 880px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .msg { max-width: 70%; }
}

.thread-header {
  flex: none; /* always-visible top bar — never scrolls or shrinks */
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--line); background: var(--card);
}
.back { display: none; background: none; border: none; color: var(--ink); font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 4px; }
@media (max-width: 760px) { .back { display: block; } }
.who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02rem; }
.who .muted { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-avatar .avatar, .thread-avatar img.avatar { width: 42px; height: 42px; }
/* Status pill sits right in the header next to the name. */
.status-pill { flex: none; max-width: 132px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-size: 15px; }
/* Hamburger reveals everything else (assign + contact details). */
.thread-menu-btn { flex: none; background: none; border: none; color: var(--ink);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 4px 6px; min-width: 38px; }
/* Phones: the header gets tight, so give the NAME the space. The ↗ / 💬 circles
   are hidden (the burger menu has full-size equivalents) and the status pill
   shrinks a notch; without this the lead's name truncated to one letter. */
@media (max-width: 760px) {
  .thread-header { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .thread-header .thread-ig, .thread-header .thread-mc { display: none; }
  .thread-avatar .avatar, .thread-avatar img.avatar { width: 36px; height: 36px; }
  .status-pill { max-width: 116px; font-size: 13px; padding: 6px 8px; }
}
/* The ☰ dropdown reads as its own tinted layer (not more chat background):
   accent-tinted surface, accent edges, and a shadow that says "overlay". */
.thread-menu { flex: none; padding: 12px 16px;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel-2);
  border-left: 3px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 12px 20px -12px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 10px; }
.tm-assign { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); }
.tm-assign select { background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 10px; font-size: 16px; }
.thread-menu-btn.open { color: var(--accent); }
/* Quick "open this DM in Instagram (as the SOMA account)" — header icon + menu button */
.thread-ig { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; text-decoration: none; font-size: 1rem;
  color: #fff; background: linear-gradient(45deg,#f09433,#e6683c 30%,#dc2743 60%,#cc2366 90%); }
.thread-ig:active { transform: scale(.94); }
.tm-ig-btn { display: block; text-align: center; text-decoration: none; font-weight: 600;
  border-radius: 10px; padding: 10px; color: #fff;
  background: linear-gradient(45deg,#f09433,#e6683c 30%,#dc2743 60%,#cc2366 90%); }
.tm-ig-btn:active { transform: scale(.99); }
/* ManyChat "open conversation" — header icon + menu button */
.thread-mc { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; text-decoration: none; font-size: 1rem;
  color: #fff; background: #2360ff; }
.thread-mc:active { transform: scale(.94); }
.tm-mc-btn { display: block; text-align: center; text-decoration: none; font-weight: 600;
  border-radius: 10px; padding: 10px; color: #fff; background: #2360ff; }
.tm-mc-btn:active { transform: scale(.99); }
.thread-menu .thread-context { border-bottom: none; padding: 0; background: transparent; }

/* min-height:0 is essential: without it this flex item grows to fit all messages
   and the whole thread scrolls (header + composer included) instead of just here. */
.messages { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 78%; padding: 9px 13px; border-radius: 16px; font-size: .92rem; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg .meta { display: block; font-size: .66rem; opacity: .7; margin-top: 4px; }
.msg-media { display: block; max-width: 220px; max-height: 280px; border-radius: 12px; cursor: zoom-in; margin-bottom: 4px; }
.msg-media-link { display: inline-block; }
.msg-text { display: block; }
.msg.in { align-self: flex-start; background: var(--in-bubble); border-bottom-left-radius: 5px; }
.msg.out { align-self: flex-end; background: var(--out-bubble); color: white; border-bottom-right-radius: 5px; }
.msg.bot { align-self: flex-start; background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.day-sep { align-self: center; font-size: .72rem; color: var(--muted); margin: 6px 0; }
.msg.failed { box-shadow: 0 0 0 1.5px #c0392b inset; }
.msg-failed { font-weight: 700; }
.msg.pending { opacity: .62; }
.msg-sending { font-style: italic; opacity: .85; }
.msg-status { font-weight: 700; }
.msg-status.sending { font-style: italic; font-weight: 500; }
.msg-status.failed { color: #ffe0dc; }
.msg-retry {
  margin-left: 5px; padding: 2px 7px; border: 1px solid rgba(255,255,255,.58);
  border-radius: 999px; background: rgba(255,255,255,.14); color: inherit;
  font: inherit; font-weight: 700; cursor: pointer;
}
.msg-retry:hover, .msg-retry:focus-visible { background: rgba(255,255,255,.27); outline: none; }
.msg-retry:disabled { opacity: .7; cursor: default; }

.composer {
  flex: none; /* always pinned at the bottom — never scrolls */
  display: flex; gap: 8px; padding: 12px 14px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--card);
}
.composer textarea {
  flex: 1; min-width: 0; resize: none; max-height: 140px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 18px; padding: 11px 14px; outline: none;
}
.composer button { flex: none; }
.composer textarea:focus { border-color: var(--accent); }
.composer button {
  background: var(--accent); color: white; border: none; border-radius: 18px;
  padding: 0 18px; font-weight: 600; cursor: pointer;
}
.composer button:hover { background: var(--accent-dark); }
.composer button:disabled { opacity: .5; cursor: default; }
.send-note { flex: none; font-size: .72rem; color: var(--muted); padding: 0 16px 8px; min-height: 1em; }

/* Composer tools as a vertical FAB stack floating above the Send button. Keeps the
   text field full width on mobile so it isn't cramped or pushed off screen. */
.composer-wrap { position: relative; flex: none; }
.composer-fab { position: absolute; right: 14px; bottom: 100%; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 10px; z-index: 6; }
.fab-btn { width: 46px; height: 46px; border-radius: 50%; flex: none; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 3px 10px rgba(0,0,0,.14); font-size: 1.2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: transform .1s ease; }
.fab-btn:hover { background: var(--panel-2); }
.fab-btn:active { transform: scale(.92); }
/* Hide the tools when the composer itself is hidden (e.g. window-closed banner). */
.composer-wrap:has(#composer[hidden]) .composer-fab { display: none; }
/* And get them out of the way when the canned-responses panel is open above the composer. */
#cannedPopover:not([hidden]) ~ .composer-wrap .composer-fab { display: none; }

/* canned responses */
.canned-btn { background: transparent; border: 1px solid var(--line); border-radius: 18px; padding: 0 13px; cursor: pointer; font-size: 1rem; color: var(--ink); }
.canned-btn:hover { background: var(--panel-2); }
/* Saved replies live in a body-level sheet: backdrop + ✕ + Escape all close it,
   and it can never get clipped behind the composer again. Bottom sheet on
   phones, centred dialog on desktop. */
.canned-overlay { position: fixed; inset: 0; z-index: 206; background: rgba(14, 12, 10, .45); display: flex; align-items: flex-end; justify-content: center; }
.canned-popover { border: 1px solid var(--line); border-radius: 16px 16px 0 0; background: var(--card); width: 100%; max-width: 640px; max-height: 76vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); }
@media (min-width: 761px) {
  .canned-overlay { align-items: center; padding: 24px; }
  .canned-popover { border-radius: 16px; max-height: 70vh; }
  .canned-grip { display: none; }
}
.canned-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--line); margin: 8px auto 0; flex: none; }
.canned-title-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 0; }
.canned-close { background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 8px 10px; min-height: 40px; }
.canned-close:hover { color: var(--ink); }
.canned-head { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.canned-head input { flex: 1; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); outline: none; }
.canned-list { overflow-y: auto; min-height: 92px; max-height: 44vh; }
.canned-empty { padding: 18px 14px; text-align: center; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.canned-empty-new { margin-top: 10px; background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.canned-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.canned-item:hover { background: var(--panel-2); }
.canned-item-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.canned-item-main span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canned-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.canned-form input, .canned-form textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); font: inherit; resize: vertical; }
.canned-form-actions { display: flex; gap: 8px; }
.send-note.warn { color: var(--danger); }

/* ---- Instagram 7-day window closed (composer replacement) ---- */
.window-closed { flex: none; margin: 8px 12px 4px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.wc-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.wc-head { font-weight: 700; }
.wc-since { color: var(--muted); font-size: .78rem; }
.wc-sub { color: var(--muted); font-size: .85rem; margin-bottom: 8px; }
.wc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wc-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wc-handle { font-weight: 700; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.wc-copy { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; color: var(--ink); font: inherit; cursor: pointer; min-height: 40px; }
.wc-copy:active { transform: scale(.97); }
.wc-open { flex: 1 1 auto; min-width: fit-content; display: block; text-align: center; background: var(--accent); color: #fff; border-radius: 10px; padding: 10px 12px; text-decoration: none; font-weight: 600; font-size: .9rem; }
.wc-primary { background: #6b4cf0; } /* ManyChat-led action stands apart from the IG fallback */
.wc-more { margin-top: 8px; }
.wc-more summary { color: var(--muted); font-size: .78rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.wc-more[open] summary { margin-bottom: 6px; }
/* Proactive in-window countdown above the composer */
.ig-window-note { flex: none; margin: 6px 12px 0; padding: 8px 12px; border-radius: 10px; font-size: .8rem; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--line); }
.ig-window-note.urgent { color: #b4530a; background: rgba(255,122,47,.12); border-color: rgba(255,122,47,.4); }
[data-theme="dark"] .ig-window-note.urgent { color: #ffb37a; }

/* ---- Team management ---- */
.team-list { display: flex; flex-direction: column; gap: 10px; }
.team-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 12px; }
.team-card.editing { border-color: var(--accent); }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.team-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.team-name { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.team-sub { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.team-badge { font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.team-badge.admin { background: var(--accent); color: #fff; border-color: transparent; }
.team-badge.paused { background: #f3d9d4; color: #8a2c1a; border-color: transparent; }
.team-edit { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 7px 14px; color: var(--ink); font: inherit; cursor: pointer; min-height: 38px; }
.team-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.team-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-form label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--muted); }
.team-form input, .team-form textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); font: inherit; }
.team-role { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; }
.team-role > span { font-weight: 600; color: var(--ink); }
.team-role label { flex-direction: row; align-items: center; gap: 6px; color: var(--ink); font-size: .85rem; }
.team-areas { display: flex; flex-wrap: wrap; gap: 12px; }
.team-chk { flex-direction: row !important; align-items: center; gap: 6px; color: var(--ink) !important; }
.team-actions { display: flex; align-items: center; gap: 10px; }
.team-save { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 10px 20px; font: inherit; font-weight: 600; cursor: pointer; min-height: 42px; }
.team-note { color: var(--ok); font-size: .8rem; }

.team-badge.pending { background: #fbe7c6; color: #8a5a00; border-color: transparent; }
.team-card.pending { border-color: #e0a13a; background: #fffaf0; }
.team-edit.approve { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }

/* ---- invite link box ---- */
.invite-box { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px; margin-bottom: 16px; }
.invite-box > strong { display: block; }
.invite-row { display: flex; gap: 8px; margin: 8px 0; }
.invite-row input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; color: var(--ink); font-size: .82rem; }
.invite-row button { flex: none; background: var(--accent); color: #fff; border: none; border-radius: 9px; padding: 9px 16px; font-weight: 600; cursor: pointer; }
.invite-actions { display: flex; align-items: center; gap: 10px; }

/* ---- setter application form ---- */
.apply-row { display: flex; gap: 10px; }
.apply-row label { flex: 1; min-width: 0; }
#applyForm a { color: var(--accent); }

/* ---- No-access screen ---- */
.no-access { position: absolute; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.no-access-card { max-width: 380px; text-align: center; }
.na-icon { font-size: 2.4rem; margin-bottom: 8px; }
.no-access-card p { color: var(--muted); }
@media (max-width: 560px) { .team-fields { grid-template-columns: 1fr; } }

/* ---- background reply-queue status note ---- */
.queue-note { margin: 8px 0 4px; padding: 9px 12px; border-radius: 10px; font-size: .82rem;
  background: var(--accent-soft); color: var(--accent-dark); border: 1px solid transparent; }
.queue-note.paused { background: rgba(181,87,63,.1); color: var(--danger); }
.queue-note.tappable { cursor: pointer; }
/* Item-level queue panel (cancel / retry / posted) */
.queue-panel { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.q-row { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.q-row:last-child { border-bottom: none; }
.q-ico { flex: none; width: 20px; text-align: center; }
.q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .82rem; }
.q-text { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-err { color: var(--danger); font-size: .75rem; word-break: break-word; }
.q-row.done { opacity: .65; }
.q-row.failed { background: rgba(181,87,63,.06); }
/* Shared "Show older / load more" button */
.load-more { display: block; width: 100%; margin-top: 10px; background: transparent;
  border: 1px dashed var(--line); border-radius: 12px; color: var(--muted);
  font: inherit; font-size: .85rem; padding: 11px; cursor: pointer; }
.load-more:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Booked calls ---- */
.tm-book { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.tm-book-h { font-weight: 700; font-size: .82rem; }
/* When the person is already booked, collapse the form (just show the ✓ note). */
.tm-book.booked label, .tm-book.booked #bookCallBtn, .tm-book.booked .tm-book-h { display: none; }
.tm-book.booked .tm-book-note { color: var(--ok); font-weight: 600; }
.tm-book label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); }
.tm-book input { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); font: inherit; }
.tm-book button { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 9px 14px; font-weight: 600; cursor: pointer; min-height: 40px; }
/* Slot chips must NOT inherit the section's solid-orange button style above,
   or the picked state is invisible: neutral until tapped, filled + ✓ when picked. */
.tm-book .slot-chip { background: transparent; border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 4px 11px; font-size: .78rem; font-weight: 400; min-height: 0; }
.tm-book .slot-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.tm-book .slot-chip.sel { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.tm-book .slot-chip.sel::before { content: "✓ "; }
.tm-book-note a { color: var(--accent); }
.tm-booked { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.tm-booked-when { font-weight: 600; color: var(--ok); }
.tm-booked-actions { display: flex; gap: 8px; }

.calls-filter { display: flex; gap: 6px; margin-bottom: 14px; }
.calls-filter button { flex: 1; background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 8px 0; cursor: pointer; font-size: .82rem; }
.calls-filter button.active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
.calls-list { display: flex; flex-direction: column; gap: 10px; }
.call-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.call-card.open { border-color: var(--accent); }
.call-top { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; }
.call-id { flex: 1; min-width: 0; }
.call-name { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.call-when { color: var(--muted); font-size: .8rem; }
.call-pills { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.call-pill { font-size: .66rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.call-pill.yes { background: rgba(124,154,130,.18); color: #5f7a66; border-color: transparent; }
.call-pill.no { background: rgba(181,87,63,.12); color: var(--danger); border-color: transparent; }
.call-detail { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); }
.call-actions { display: flex; align-items: center; gap: 8px; padding-top: 12px; }
.call-status { margin-left: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; color: var(--ink); font: inherit; }
.call-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.call-grid label, .call-ta { display: flex; flex-direction: column; gap: 4px; font-size: .76rem; color: var(--muted); }
.call-grid input, .call-ta textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); font: inherit; resize: vertical; }
.call-brief { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; }
.call-brief-head { font-weight: 700; font-size: .82rem; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.call-pains { font-size: .85rem; line-height: 1.5; margin-bottom: 6px; }
.call-summary { font-size: .85rem; color: var(--muted); line-height: 1.45; }
.call-toggles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; }
.tri-group { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-right: 6px; }
.tri { background: var(--bg); border: none; padding: 6px 12px; cursor: pointer; color: var(--muted); font: inherit; font-size: .8rem; border-right: 1px solid var(--line); }
.tri:last-child { border-right: none; }
.tri.on { background: var(--accent); color: #fff; }
.call-note { color: var(--ok); font-size: .78rem; }
#calConnectBtn.connected { color: var(--ok); border-color: var(--ok); background: rgba(124,154,130,.1); }
.call-product { display: flex; align-items: center; gap: 8px; font-size: .82rem; flex-wrap: wrap; }
.call-product select { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; color: var(--ink); font: inherit; }
.call-sale { font-weight: 700; color: var(--accent-dark); }

/* ---- pay sheet ---- */
.calls-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.calls-tabs button { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-size: .85rem; font-weight: 600; }
.calls-tabs button.active { background: var(--accent-soft); color: var(--accent-dark); border-color: var(--accent); }
.pay-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.pay-head strong { min-width: 150px; text-align: center; }
.pay-list { display: flex; flex-direction: column; gap: 12px; }
.pay-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px; }
.pay-top { display: flex; align-items: center; justify-content: space-between; }
.pay-top strong { font-size: 1.02rem; }
.pay-total { font-weight: 700; color: var(--accent-dark); font-size: 1.05rem; }
.pay-rates { color: var(--muted); font-size: .8rem; margin: 2px 0 2px; }
.pay-period { color: var(--accent-dark); font-size: .78rem; font-weight: 600; margin-bottom: 8px; }
.pay-deals { width: 100%; border-collapse: collapse; font-size: .82rem; margin-bottom: 8px; table-layout: fixed; }
.pay-deals td { padding: 5px 6px; border-bottom: 1px solid var(--line); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-deals td:nth-child(3), .pay-deals td:nth-child(4) { text-align: right; white-space: nowrap; }
.pay-deals td:nth-child(4) { font-weight: 600; }
.pay-line { display: flex; justify-content: space-between; font-size: .85rem; padding: 4px 0; }
.pay-line.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; font-weight: 700; }
.pay-card.paid { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--card)); }
.pay-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pay-paid-badge { flex: none; background: var(--ok); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: .68rem; font-weight: 700; }
.pay-actions { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-mark { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.pay-mark:hover { background: var(--accent-dark); }
.pay-mark:disabled { opacity: .55; cursor: default; }
.pay-paid-note { font-size: .8rem; color: var(--muted); }
.pay-diff { color: var(--danger); font-weight: 600; }
.link-btn { background: none; border: none; color: var(--accent-dark); cursor: pointer; font: inherit; font-size: .8rem; text-decoration: underline; padding: 0; }
.link-btn:disabled { opacity: .55; cursor: default; }
.team-pay { border-top: 1px solid var(--line); padding-top: 10px; }
.team-pay-h { font-size: .78rem; color: var(--muted); display: block; margin-bottom: 6px; }
.team-pay input { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); font: inherit; }
.team-move { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.team-move-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.team-move-row select { flex: 1; min-width: 140px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); font: inherit; }
.team-move-btn { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.team-move-btn:hover:not(:disabled) { border-color: var(--accent); }
.team-move-btn:disabled { opacity: .55; cursor: default; }

/* ---- KPIs ---- */
.kpi-list { display: flex; flex-direction: column; gap: 10px; }
.kpi-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px; }
.kpi-card.total { border-color: var(--accent); background: var(--accent-soft); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kpi-top strong { font-size: 1.02rem; }
.kpi-rev { font-weight: 700; color: var(--accent-dark); font-size: 1.05rem; }
.kpi-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .85rem; color: var(--muted); }
.kpi-stats b { color: var(--ink); font-size: 1rem; }
@media (max-width: 560px) { .call-grid { grid-template-columns: 1fr; } }

/* ============================ amos brand experience ============================ */

/* Boot splash — branded first paint on the brand's Ink, fades out once ready. */
.boot { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--ink-deep);
  height: 100vh; height: 100svh; /* small viewport = always within the visible area, so the logo centres true */
  display: flex; align-items: center; justify-content: center; transition: opacity .45s ease; }
.boot.hidden { opacity: 0; pointer-events: none; }
/* The GIF is cropped tight to the artwork now, so a smaller box gives the same visual size. */
.boot-logo { width: min(212px, 54vw); height: auto; }

/* Login: brand tagline + a soft Ember bloom behind the card. */
.tagline { color: var(--muted); font-size: .92rem; margin: 4px 0 0; }
.login-overlay { background:
  radial-gradient(120% 80% at 50% -10%, rgba(232,98,26,.10), transparent 60%), var(--bg); }
.brand img { height: 76px; }

/* Branded empty states. */
.thread-empty, .empty { gap: 0; }
.empty-mark { display: block; width: 38px; opacity: .35; margin: 0 auto 12px; }
.empty-mark.lg { width: 64px; opacity: .3; }

/* Sent bubbles get the mark's Ember->Flame sweep (subtle). */
.msg.out { background: linear-gradient(135deg, #E8621A, #F2701F); }

/* Rail logo a touch larger so the mark reads on desktop. */
.rail-logo img { height: 36px; }

/* ---- Home dashboard ---- */
.home { height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 22px 18px 32px; max-width: 760px; margin: 0 auto; width: 100%; }
.home-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-top: max(4px, env(safe-area-inset-top)); }
.home-head .avatar { width: 52px; height: 52px; font-size: 1.1rem; flex: none; }
.home-greet { font-family: var(--font-brand); font-size: 1.5rem; margin: 0; letter-spacing: -.02em; }
.home-head-text p { margin: 2px 0 0; }
.home-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 26px; }
.home-stat { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 16px; color: var(--ink); text-align: left; }
button.home-stat { width: 100%; font: inherit; cursor: pointer; transition: border-color .12s, transform .12s, background .12s; }
button.home-stat:hover { border-color: var(--accent); }
button.home-stat:active { transform: scale(.985); }
.home-stat.accent { border-color: var(--accent); background: var(--accent-soft); }
.hs-num { font-family: var(--font-brand); font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--ink); }
.hs-label { color: var(--muted); font-size: .82rem; margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.hs-label .ui-icon { width: 1.05em; height: 1.05em; }
.home-links-h { font-weight: 700; font-size: .9rem; margin-bottom: 10px; }
.home-links-row { display: flex; flex-wrap: wrap; gap: 10px; }
.home-link { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .12s, color .12s; display: inline-flex; align-items: center; gap: 7px; }
.home-link:hover { border-color: var(--accent); color: var(--accent); }
@media (min-width: 600px) { .home-stats { grid-template-columns: repeat(3, 1fr); } }
.attention-card { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; margin-bottom: 26px; }
.attention-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.attention-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attention-head strong { font-size: 1rem; }
.attention-head span { color: var(--muted); font-size: .78rem; }
.attention-refresh { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--muted); font: inherit; font-size: 1.15rem; cursor: pointer; }
.attention-refresh:hover { color: var(--accent-dark); border-color: var(--accent); }
.attention-list { display: flex; flex-direction: column; }
.attention-item { width: 100%; display: flex; align-items: center; gap: 11px; text-align: left; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); padding: 12px 16px; font: inherit; cursor: pointer; }
.attention-item:last-child { border-bottom: none; }
.attention-item:hover { background: var(--panel-2); }
.attention-item.critical { border-left: 3px solid var(--danger); padding-left: 13px; }
.attention-item.warning { border-left: 3px solid var(--accent); padding-left: 13px; }
.attention-icon { width: 25px; flex: none; display: grid; place-items: center; font-size: 1rem; color: var(--muted); }
.attention-item.critical .attention-icon { color: var(--danger); }
.attention-item.warning .attention-icon { color: var(--accent-dark); }
.attention-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.attention-copy strong { font-size: .88rem; line-height: 1.3; }
.attention-copy span { color: var(--muted); font-size: .75rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attention-go { flex: none; color: var(--muted); font-size: 1.35rem; }
.attention-clear { display: flex; align-items: center; gap: 12px; padding: 17px 16px; }
.attention-clear > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); font-weight: 800; }
.attention-clear p { margin: 2px 0 0; color: var(--muted); font-size: .78rem; }
.attention-health { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }
.attention-health strong { color: var(--ink); margin-right: 2px; }
.attention-health-sep { opacity: .65; }
.health-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--ok); }
.health-dot.warning { background: var(--accent); }
.health-dot.critical { background: var(--danger); }
/* ---- Mobile "More" overflow nav ---- */
.rail-more { display: none; } /* desktop sidebar shows every group; no overflow needed */
.more-sheet-overlay { position: fixed; inset: 0; z-index: 215; background: rgba(14,12,10,.45);
  display: flex; align-items: flex-end; justify-content: center; }
.more-sheet { background: var(--card); width: 100%; max-width: 620px; border-radius: 20px 20px 0 0;
  padding: 6px 14px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 34px rgba(0,0,0,.28);
  animation: sheetUp .2s ease; }
@keyframes sheetUp { from { transform: translateY(18px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.more-sheet-grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 8px auto 10px; }
.more-sheet-items { display: flex; flex-direction: column; gap: 2px; }
.more-item { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: none; border-radius: 12px; padding: 15px 12px; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); }
.more-item:active { background: var(--panel-2); }
.more-item.active { color: var(--accent); }
.more-item.active .more-ico { filter: none; }
.more-ico { font-size: 1.25rem; width: 26px; text-align: center; }
.more-item.more-signout { margin-top: 7px; border-top: 1px solid var(--line); border-radius: 0; color: var(--danger); }

/* ---- AI "Scan now" results ---- */
.scan-results { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.scan-results > p { margin: 0; padding: 10px 12px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.scan-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: .85rem; }
.scan-row:last-child { border-bottom: none; }
.scan-verdict { flex: none; font-weight: 700; font-size: .72rem; white-space: nowrap; }
.scan-row.yes .scan-verdict { color: var(--ok); }
.scan-row.no .scan-verdict { color: var(--muted); }
.scan-name { font-weight: 600; white-space: nowrap; }
.scan-prev { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-loc { flex: none; font-size: .7rem; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.scan-row.low .scan-verdict { color: #b06a1a; }

/* ---- lead market badges (qualification scan) ---- */
.badge.mkt { font-weight: 600; }
.badge.mkt.mkt-pri { background: #e3f3e8; color: #1f6b3a; border-color: transparent; }
.badge.mkt.mkt-low { background: #efece6; color: #7a6f55; border-color: transparent; }
.badge.mkt.mkt-unk { background: var(--bg); color: var(--muted); }
[data-theme="dark"] .badge.mkt.mkt-pri { background: #16321f; color: #9bdcb1; }
[data-theme="dark"] .badge.mkt.mkt-low { background: #2c281f; color: #cdbf9f; }

/* ---- viewer (read-only demo account) ---- */
.viewer-banner { position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #2b2b33; color: #fff; font-size: .76rem; font-weight: 600; padding: 0 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .viewer-banner { background: #3a3a44; }
body.view-only .shell { top: 30px; height: calc(var(--app-height, 100dvh) - 30px); }
.team-badge.viewer { background: #e6e0f5; color: #5a3aa0; border-color: transparent; }
[data-theme="dark"] .team-badge.viewer { background: #2a2440; color: #c9b8f0; }
.readonly-note { display: none; flex: none; text-align: center; color: var(--muted); font-size: .8rem; padding: 14px 16px; border-top: 1px solid var(--line); }
.view-only .readonly-note { display: block; }
.view-only .composer-wrap,
.view-only .send-note,
.view-only .thread-menu-btn,
.view-only .msg-del { display: none !important; }
/* Privacy redaction bars (viewer mode) — stand in for message text / previews /
   media so no real content or PII is ever in the DOM. */
.redact-bar { display: inline-block; height: .72em; max-width: 100%; vertical-align: middle; border-radius: 4px; background: currentColor; opacity: .20; }
.conv-preview .redact-bar { height: .7em; }
.redact-bar.media { display: block; width: 120px; height: 78px; border-radius: 10px; opacity: .14; margin-bottom: 4px; }
.view-only .tm-remind { display: none; }

/* ---- market badge ergonomics + follow-up chip ---- */
.conv-meta { flex-wrap: wrap; row-gap: 3px; }
.badge.mkt { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.mkt.editable { cursor: pointer; }
.badge.mkt.editable:hover { filter: brightness(.96); }
.badge.remind { background: var(--accent-soft); color: var(--accent-dark); border-color: transparent; font-weight: 600; white-space: nowrap; }
.ctx-chip.ctx-tier { cursor: pointer; font: inherit; font-size: inherit; border-style: dashed; }
.ctx-chip.ctx-tier:hover { border-color: var(--accent); }

/* ---- follow-up reminder (thread menu) ---- */
.tm-remind { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.tm-remind-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tm-remind-row button { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 14px; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.tm-remind-row button:hover { border-color: var(--accent); }

/* ---- business settings: product rows ---- */
.bp-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.bp-row input { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); font: inherit; }
.bp-row .bp-label { flex: 1; min-width: 0; }
.bp-row .bp-price { width: 110px; flex: none; }
.bp-row .bp-del { flex: none; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; color: var(--muted); font: inherit; cursor: pointer; }
.bp-row .bp-del:hover { border-color: var(--danger); color: var(--danger); }
.bl-row .bl-label { flex: 1; min-width: 0; }
.bl-row .bl-url { flex: 2; min-width: 0; }

/* ---- live-call quick links + availability (Calls screen) ---- */
.call-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.call-link { background: var(--card); border: 1px solid var(--accent); color: var(--accent-dark);
  border-radius: 999px; padding: 8px 14px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.call-link:hover { background: var(--accent-soft); }
.call-slots { margin: 0 0 14px; }
.slots-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.slots-top #slotsRefresh { margin-left: auto; }
.slots-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.slots-head { margin-bottom: 6px; }
.slots-day { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line); }
.slots-day:first-of-type { border-top: none; }
.slots-dayname { flex: none; min-width: 92px; color: var(--muted); font-size: .8rem; font-weight: 600; }
/* Each day's times slide sideways so EVERY slot is reachable (swipe or scroll). */
.slots-times { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  padding: 2px 0 6px; scrollbar-width: thin; }
.slots-times .slot-chip { flex: none; }
.slot-chip { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px;
  font: inherit; font-size: .78rem; cursor: pointer; color: var(--ink); }
.slot-chip:hover { border-color: var(--accent); color: var(--accent-dark); }

/* Brand marks on outbound link buttons (Instagram glyph + GHL lettermark) */
.brand-ic { width: 15px; height: 15px; vertical-align: -2.5px; }
.thread-ig .brand-ic { width: 17px; height: 17px; vertical-align: -3.5px; }
.ghl-badge { display: inline-block; background: #188bf6; color: #fff; font-size: .58rem;
  font-weight: 800; letter-spacing: .03em; border-radius: 4px; padding: 1.5px 4px; vertical-align: 1px; }

/* Thread menu: the booking calendar lives inline (open slots, tap to pick) */
.tm-slots { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 2px 0 6px; }
.slot-chip.sel { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.tm-custom summary { color: var(--muted); font-size: .78rem; cursor: pointer; padding: 2px 0 6px; -webkit-user-select: none; user-select: none; }
.tm-custom[open] summary { color: var(--ink); }

/* Settings -> Calendly: calendar show/hide toggles */
.cal-types { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.cal-type { display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.cal-type input { width: auto; accent-color: var(--accent); }
.cal-type:has(input:checked) { border-color: var(--accent); }

/* ---- option + reminder dialogs ---- */
.dlg-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dlg-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
  color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.dlg-opt:hover { border-color: var(--accent); }
.dlg-opt-hint { font-weight: 400; font-size: .78rem; color: var(--muted); }
.dlg-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dlg-form label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); }
.dlg-form .dlg-input { margin-bottom: 0; }
.calls-admin-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.call-closedon { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--muted); margin: 8px 0 2px; }
.call-closedon input { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--ink); font: inherit; max-width: 210px; }
.dlg-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.dlg-preset { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px;
  color: var(--ink); font: inherit; font-size: .8rem; cursor: pointer; }
.dlg-preset.on, .dlg-preset:hover { border-color: var(--accent); color: var(--accent-dark); }
.dlg input.dlg-input[type="datetime-local"] { margin-bottom: 12px; }
.dlg-btn.dlg-clear.danger-ghost { background: transparent; border: 1px solid var(--danger); color: var(--danger); }

/* ---- Two-factor auth box (Account) ---- */
.mfa-box { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px; margin-bottom: 18px; }
.mfa-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; font-size: .92rem; }
.mfa-row .badge.status-booked { background: var(--ok); color: #fff; }
.mfa-key { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mfa-key code { flex: 1; min-width: 0; word-break: break-all; background: var(--bg); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px; font-size: .9rem; letter-spacing: .04em; }
.mfa-note { margin: 8px 0 0; }
#loginMfaWrap input, #mfaCode { letter-spacing: .3em; font-size: 16px; }

/* ---- toast + dialog (in-app feedback, no browser alert/prompt) ---- */
.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px);
  max-width: min(86vw, 420px); background: var(--ink); color: var(--bg); padding: 11px 16px; border-radius: 12px;
  font-size: .88rem; line-height: 1.4; box-shadow: 0 6px 22px rgba(0,0,0,.25); z-index: 220;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.update-banner { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; z-index: 300;
  width: min(620px, calc(100vw - 20px)); transform: translateX(-50%); box-sizing: border-box;
  display: flex; align-items: center; gap: 14px; padding: 11px 12px 11px 16px;
  border: 1px solid var(--accent); border-radius: 14px; background: var(--ink-deep); color: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.update-banner[hidden] { display: none; }
.update-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.update-banner-text strong { font-size: .9rem; }
.update-banner-text span { color: rgba(255,255,255,.75); font-size: .76rem; }
.update-banner button { flex: none; border: none; border-radius: 9px; padding: 9px 13px;
  background: var(--accent); color: #fff; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.update-banner button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 480px) {
  .update-banner { align-items: center; gap: 8px; padding-left: 12px; }
  .update-banner-text span { display: none; }
  .update-banner button { padding: 8px 10px; }
}
.dlg-overlay { position: fixed; inset: 0; z-index: 210; background: rgba(14,12,10,.45);
  display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .dlg-overlay { align-items: center; } }
.dlg { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px;
  width: min(440px, 100%); box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.dlg-title { font-weight: 700; font-size: 1.02rem; margin-bottom: 6px; }
.dlg-body { color: var(--muted); font-size: .88rem; line-height: 1.45; margin-bottom: 12px; white-space: pre-line; word-break: break-word; }
.dlg-input { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-size: 16px; outline: none; margin-bottom: 12px; }
.dlg-input:focus { border-color: var(--accent); }
.dlg-actions { display: flex; gap: 10px; }
.dlg-btn { flex: 1; border-radius: 12px; padding: 12px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.dlg-cancel { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.dlg-ok { background: var(--accent); color: #fff; border: none; }
.dlg-ok.danger { background: var(--danger); }

/* Thread loading skeleton */
.msg-skel { height: 44px; border-radius: 16px; width: 62%; opacity: .5;
  background: linear-gradient(90deg, var(--in-bubble) 25%, var(--panel-2) 50%, var(--in-bubble) 75%);
  background-size: 200% 100%; animation: skel 1.1s linear infinite; }
.msg-skel.out { align-self: flex-end; width: 48%; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Unread badge on the Inbox nav tab */
.rail-btn { position: relative; }
.rail-badge { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 17px; text-align: center; pointer-events: none; }

/* "Show more" row at the end of a capped conversation list */
.conv-more { list-style: none; padding: 10px 16px 16px; }
.conv-more button { width: 100%; background: transparent; border: 1px dashed var(--line); border-radius: 12px;
  color: var(--muted); font: inherit; font-size: .85rem; padding: 11px; cursor: pointer; }
.conv-more button:hover { border-color: var(--accent); color: var(--accent); }

/* "Add to home screen" nudge */
.install-nudge { display: flex; align-items: center; gap: 12px; background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 14px; padding: 12px 14px; margin-bottom: 18px; }
.install-nudge .in-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.install-nudge .in-text strong { font-size: .92rem; }
.install-nudge .in-text span { color: var(--muted); font-size: .8rem; }
.install-nudge .in-go { flex: none; background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 9px 14px; font-weight: 600; cursor: pointer; }
.install-nudge .in-x { flex: none; background: none; border: none; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px 8px; }

/* Weekly digest panel on Home */
.home-week { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 16px; margin-bottom: 26px; }
.hw-head { font-weight: 700; font-size: 1rem; margin-bottom: 12px; display: flex; align-items: baseline; gap: 8px; }
.hw-totals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px) { .hw-totals { grid-template-columns: repeat(4, 1fr); } }
.hw-totals .home-stat { padding: 12px; }
.hw-table-wrap { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hw-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.hw-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.hw-table td { padding: 8px; border-bottom: 1px solid var(--line); }
.hw-table th:not(:first-child), .hw-table td:not(:first-child) { text-align: right; }

/* ---- setter monitoring ---- */
.monitor-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.monitor-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px 5px 5px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.monitor-chip .avatar { width: 26px; height: 26px; font-size: .68rem; }
.monitor-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.monitor-stats { margin-bottom: 20px; }
.monitor-h { font-weight: 700; margin-bottom: 8px; }
.monitor-convos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.monitor-convo { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.monitor-convo:hover { background: var(--panel-2); }
.monitor-convo .avatar { width: 36px; height: 36px; font-size: .78rem; flex: none; }
.mc-body { flex: 1; min-width: 0; }
.mc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-prev { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }