/* =============================================================================
   Lougha Team — REDESIGN LAYER ("The Doorway · Noor", 2026-09-05)
   -----------------------------------------------------------------------------
   Loaded AFTER app.css. It (1) re-points the legacy custom properties the old
   rules use (--bg --surface --border --text --accent --r*) at the students7
   tokens so the whole app re-themes at once, then (2) restyles every shared
   component and screen to the design handoff. Nothing here changes markup
   contracts: the JS still targets .pl-card .chip.s-* .conv-tool .ch-seg
   .ops-sheet* .composer-input …
   Sources: design_handoff_team_app_redesign/README.md + tokens/*.css
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. TOKENS — students7 (source of truth) + team roles + redesign additions
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;
  /* surfaces / ink */
  --bg: #fbfaf6; --cream: #fffdf8; --line: #eceae2;
  --ink: #1b1a24; --muted: #6c6a78; --faint: #76717e;
  /* indigo / coral */
  --indigo: #4b5be0; --indigo-soft: #eef0fd; --indigo-deep: #3c3186;
  --coral: #ff7a4d; --coral-soft: #ffede4;
  --on-indigo: #ffffff; --on-coral: #ffffff; --focus-ring: var(--indigo);
  /* type roles */
  --ff-display: "Cairo", "Segoe UI", system-ui, sans-serif;
  --ff-body: "IBM Plex Sans", "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  /* type scale (compact) */
  --text-2xs: 0.6875rem; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem;
  --text-md: 0.9375rem; --text-lg: 1rem; --text-xl: 1.125rem; --text-2xl: 1.3125rem;
  --text-hero: 1.375rem; --text-3xl: 1.5rem; --text-display: 2rem;
  --leading-tight: 1.12; --leading-snug: 1.3; --leading-normal: 1.55;
  --tracking-tight: -0.02em; --tracking-label: 0.14em; --tracking-live: 0.16em;
  /* radii */
  --radius-field: 14px; --radius-button: 16px; --radius-card: 18px; --radius-card-lg: 20px;
  --radius-card-xl: 22px; --radius-full: 999px;
  --radius-arch-hero: 180px 180px 28px 28px; --radius-arch-emblem: 60px 60px 19px 19px;
  --radius-arch-avatar: 52px 52px 18px 18px;
  /* shadows (indigo-tinted) */
  --shadow-live: 0 30px 70px -26px #4b5be0; --shadow-emblem: 0 24px 50px -22px #4b5be0;
  --shadow-avatar: 0 18px 40px -20px #4b5be0; --shadow-cta: 0 14px 30px -10px #4b5be0;
  --shadow-card: 0 2px 8px rgba(27, 26, 36, 0.04); --shadow-next: 0 16px 40px -24px rgba(27, 26, 36, 0.4);
  --shadow-livecard: 0 18px 40px -22px #4b5be0; --shadow-focus: 0 0 0 3px rgba(75, 91, 224, 0.4);
  /* gradients */
  --grad-arch-live: radial-gradient(120% 78% at 50% -4%, rgba(255, 206, 150, 0.7), rgba(255, 150, 90, 0.1) 46%, transparent 60%), linear-gradient(180deg, #5c4dd4 0%, #3c3186 58%, #2a2160 100%);
  --grad-arch-emblem: radial-gradient(120% 80% at 50% 0%, rgba(255, 206, 150, 0.6), transparent 52%), linear-gradient(180deg, #5c4dd4, #3c3186);
  --grad-apex-glow: radial-gradient(circle, rgba(255, 224, 180, 0.85), transparent 65%);
  --grad-apex-glow-calm: radial-gradient(circle, rgba(75, 91, 224, 0.13), transparent 62%);
  --grad-walkin: linear-gradient(180deg, #ffffff, #fff4e8);
  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms;

  /* ---- team roles (02-tokens-team.css) ---- */
  --ok: #137a52; --ok-soft: #e3f4ec; --warn: #a86a12; --warn-soft: #fbf0dc;
  --danger: #b43b48; --danger-soft: #fbe6e8; --info: var(--indigo); --info-soft: var(--indigo-soft);
  --stage-new: #3f57c9; --stage-new-soft: #e9ecfb;
  --stage-no_answer: #6c6a78; --stage-no_answer-soft: #efeef3;
  --stage-contacted: #2a6f9e; --stage-contacted-soft: #e4f0f8;
  --stage-book_test: #8a5a12; --stage-book_test-soft: #f9eedc;
  --stage-no_show: #b43b48; --stage-no_show-soft: #fbe6e8;
  --stage-test_done: #6b4fbf; --stage-test_done-soft: #efeafc;
  --stage-proforma_sent: #3c3186; --stage-proforma_sent-soft: #ebe8f7;
  --stage-paid: #137a52; --stage-paid-soft: #e3f4ec;
  --stage-not_interested: #8d3b3b; --stage-not_interested-soft: #f7e4e4;
  --stage-lost: #6c6a78; --stage-lost-soft: #efeef3;
  --ch-whatsapp: #128c7e; --ch-whatsapp-soft: #e2f3ef; --ch-sms: #3559b8; --ch-sms-soft: #e6ecfb;
  --ch-email: #6c45a4; --ch-email-soft: #f0e9fa; --ch-facebook: #1877f2; --ch-facebook-soft: #e7f0fe;
  --ch-instagram: #c13584; --ch-instagram-soft: #fae6f1; --ch-tiktok: #1b1a24; --ch-tiktok-soft: #ececef;
  --ch-3cx: #3c3186; --ch-3cx-soft: #ebe8f7;
  --ring-bg: var(--coral-soft); --ring-accent: var(--coral);
  --bubble-me: #e9ecfb; --bubble-them: var(--cream); --bubble-note: #fff6dc; --bubble-call: #f3f2fb;
  --bubble-radius: 18px;
  --presence-online: var(--ok); --presence-busy: var(--warn); --presence-offline: var(--faint);
  --tabbar-h: 64px; --header-h: 56px; --sheet-radius: 22px 22px 0 0; --pad: 16px; --tap: 44px;
  --row-h: 64px; --row-h-compact: 52px;
  /* ---- redesign additions (03-tokens-team-ajouts.css) ---- */
  --field: var(--cream); --desk: #e8e5dc;
  --stage-branch-border: 1px dashed var(--line);
  --nav-h: 64px; --nav-fab: 58px; --nav-fab-lift: -20px; --nav-fab-ring: 4px; --nav-pill-w: 44px; --nav-pill-h: 26px;
  --rec-accent: var(--coral); --ring-halo: 0 0 0 12px rgba(255, 122, 77, 0.18);

  /* ---- LEGACY ALIASES — the old rules in app.css read these ---- */
  --surface: var(--cream); --surface-2: #f6f4ee; --surface-3: #efece4;
  --border: var(--line); --border-2: #ddd9cf;
  --text: var(--ink); --muted-2: #55535f;
  --accent: var(--indigo); --accent-ink: #ffffff;
  --success: var(--ok); --warning: var(--warn);
  --r-sm: 12px; --r: 14px; --r-lg: 18px;
  --shadow: var(--shadow-card);
  --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131220; --cream: #1d1b2b; --line: #302d45; --ink: #f7f5f0; --muted: #a9a5bd; --faint: #aaa5be;
  --indigo: #7b86ee; --indigo-soft: #26264f; --indigo-deep: #b3b9f9;
  --field: #242235; --desk: #0b0a12;
  --bubble-me: #2b2d5c; --bubble-them: #232134; --bubble-note: #3b3319; --bubble-call: #242142;
  --ok-soft: #12301f; --warn-soft: #33260f; --danger-soft: #38191d;
  --surface-2: #1a1827; --surface-3: #242235; --border-2: #3a3752; --muted-2: #bcb8cf;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
html, body { background: var(--bg); color: var(--ink); }
body, button, input, select, textarea { font-family: var(--ff-body); }
[hidden] { display: none !important; }
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .conv-name, .ops-sheet-title h2, .lead-card .name { font-family: var(--ff-display); letter-spacing: -0.01em; }
.mono, .when, .chip b, .count, .surface-count, .msg-meta, .msg-meta span, .ops-detail-row > b, .pl-item small, .pl-kpi b,
.pl-slot, .pl-stage-chip b, .pl-muted, .conv-sub, .lead-card .sub, .chat-row .when, .ops-result-count, .pl-total,
.crm-row-side, .objective-total, .objective-stat b, .schedule-stats b, .ops-rest-amount, .audio-dur, .call-dur, .day-divider span {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
}
*:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
::selection { background: rgba(75, 91, 224, 0.22); }
@keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 77, 0.5); } 70% { box-shadow: 0 0 0 26px rgba(255, 122, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 122, 77, 0); } }
@keyframes stagePulse { 0% { box-shadow: 0 0 0 0 rgba(75, 91, 224, 0.45); } 100% { box-shadow: 0 0 0 16px rgba(75, 91, 224, 0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
@keyframes glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes shimmer { 0% { opacity: 0.4; } 50% { opacity: 0.7; } 100% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------------------
   3. SHELL — header · tab bar · Outils ring · sheets · toast
   ------------------------------------------------------------------------- */
.app-shell { background: var(--bg); }
.workspace { background: var(--bg); }
.app-header {
  position: sticky; top: 0; z-index: 20; min-height: 0; height: auto;
  padding: calc(14px + var(--safe-top)) 16px 8px; background: var(--bg); border: 0; box-shadow: none;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.app-header .brand > img { display: none; }
.app-header .brand { min-width: 0; }
.header-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.header-title small { display: block; font: 600 10.5px var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.header-title b { display: block; font: 700 24px/1.12 var(--ff-display); letter-spacing: -0.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.connection-state { display: none; }
.app-header .icon-btn, .header-actions .icon-btn { width: 38px; height: 38px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--muted); display: grid; place-items: center; }
.app-header .icon-btn:hover { background: var(--indigo-soft); color: var(--indigo); }
.header-avatar { width: 38px; height: 38px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo-deep); font: 700 13px var(--ff-display); display: grid; place-items: center; border: 0; }
.view { background: var(--bg); padding: 4px 16px calc(110px + var(--safe-bottom)); }
#view > .stub { padding: 40px 0; text-align: center; color: var(--muted); }

/* Tab bar: 5 slots, ring in the middle */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + var(--safe-bottom)); padding: 0 6px var(--safe-bottom);
  display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: start;
  background: var(--cream); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -18px rgba(27, 26, 36, 0.5);
}
.nav-brand, .nav-account { display: none; }
.nav-items { display: contents; }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 60px; background: none; border: 0; color: var(--faint); position: relative; padding: 0; }
.tab .tab-pill { display: flex; align-items: center; justify-content: center; width: var(--nav-pill-w); height: var(--nav-pill-h); border-radius: 999px; position: relative; transition: background var(--dur-fast) var(--ease-out); }
.tab svg { width: 19px; height: 19px; }
.tab .tab-label { font: 600 10px var(--ff-body); letter-spacing: 0.01em; }
.tab.active { color: var(--indigo); }
.tab.active .tab-pill { background: var(--indigo-soft); }
.tab .tab-badge { position: absolute; top: -1px; right: 5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--coral); color: #fff; font: 700 9.5px var(--ff-mono); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.tab-fab-wrap { display: flex; justify-content: center; align-items: flex-start; height: 60px; }
.tab-fab { width: var(--nav-fab); height: var(--nav-fab); margin-top: var(--nav-fab-lift); border-radius: 999px; border: var(--nav-fab-ring) solid var(--cream); background: linear-gradient(180deg, #5c4dd4, #3c3186); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: var(--shadow-cta); padding: 0; transition: transform var(--dur-fast) var(--ease-out); }
.tab-fab:active { transform: scale(0.94); }
.tab-fab svg { width: 19px; height: 19px; }
.tab-fab span { font: 600 8px var(--ff-mono); letter-spacing: 0.04em; }
.tab-fab.active { box-shadow: var(--shadow-cta), 0 0 0 3px var(--indigo-soft); }
.more-menu { display: none !important; }
body.chat-open .tabbar { display: none; }

/* Outils sheet grid */
.tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tools-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; padding: 16px 8px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); font: inherit; text-align: center; cursor: pointer; transition: background 150ms ease, border-color 150ms ease; }
.tools-tile-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 14px; background: var(--indigo-soft); color: var(--indigo); }
.tools-tile-icon svg { display: block; width: 24px; height: 24px; }
.tools-tile-label { display: flex; align-items: center; justify-content: center; min-height: 36px; max-width: 100%; font: 600 13px/18px var(--ff-body); overflow-wrap: break-word; }
.tools-tile:active { background: var(--indigo-soft); border-color: var(--indigo); }
.tools-tile:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
@media (hover: hover) { .tools-tile:hover { background: var(--indigo-soft); border-color: var(--indigo); } }
.tools-sheet.ops-sheet { max-width: 520px; }
.tools-sheet .ops-sheet-head { align-items: center; padding: 12px 16px 16px; }
.tools-sheet .ops-sheet-title p { font: 400 13px/1.4 var(--ff-body); color: var(--muted); }
.tools-sheet .ops-sheet-close { flex: 0 0 44px; width: 44px; height: 44px; font-size: 24px; }
.tools-sheet .ops-sheet-body { padding-top: 16px; }

/* Bottom sheet (ops-sheet contract) */
.ops-sheet-backdrop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(27, 26, 36, 0.42); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.ops-sheet-backdrop.show { opacity: 1; }
.ops-sheet { width: 100%; max-width: 760px; max-height: 90dvh; display: flex; flex-direction: column; background: var(--bg); border-radius: var(--sheet-radius); box-shadow: 0 -20px 60px -30px rgba(27, 26, 36, 0.6); transform: none; animation: sheetUp 0.28s var(--ease-out); }
.ops-sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 999px; background: var(--line); flex: 0 0 auto; }
.ops-sheet-head { min-height: 0; padding: 10px 16px 12px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.ops-sheet-title h2 { font: 700 19px/1.2 var(--ff-display); letter-spacing: -0.01em; color: var(--ink); white-space: normal; }
.ops-sheet-title p { font: 500 11.5px var(--ff-mono); color: var(--faint); margin-top: 4px; }
.ops-sheet-close { width: 32px; height: 32px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--muted); font: 600 14px var(--ff-body); display: grid; place-items: center; }
.ops-sheet-body { padding: 14px 16px calc(24px + var(--safe-bottom)); background: var(--bg); }
.ops-sheet-actions { padding: 10px 16px calc(12px + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.ops-detail-row { border-color: var(--line); }
.ops-detail-row > span { font: 600 10px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.ops-detail-row > b { font: 500 13px var(--ff-mono); color: var(--ink); }
.ops-section-head h3 { font: 700 15px var(--ff-display); color: var(--ink); }
.ops-empty, .empty { padding: 34px 20px; text-align: center; color: var(--muted); background: transparent; border: 1px dashed var(--line); border-radius: 18px; font: 400 13px/1.5 var(--ff-body); }
.ops-loading, .feed-loading p { color: var(--faint); font: 500 12px var(--ff-mono); letter-spacing: 0.06em; text-align: center; padding: 18px; }
.feed-error { padding: 20px; border: 1px dashed rgba(180, 59, 72, 0.4); border-radius: 18px; color: var(--danger); background: var(--danger-soft); }
.feed-error p { margin: 0 0 10px; font: 500 13px var(--ff-body); }

/* Toast */
.toast { left: 16px; right: 16px; bottom: calc(104px + var(--safe-bottom)); transform: none; max-width: none; width: auto; background: var(--ink); color: var(--bg); border-radius: 16px; padding: 13px 15px; font: 600 13.5px var(--ff-body); box-shadow: 0 18px 40px -18px rgba(27, 26, 36, 0.6); animation: toastIn 0.24s var(--ease-out); }
.toast.show { transform: none; }

/* Buttons */
.btn { min-height: 50px; padding: 0 18px; border-radius: var(--radius-button); background: var(--indigo); color: #fff; border: 0; font: 600 15px var(--ff-body); box-shadow: var(--shadow-cta); transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.btn:active { transform: scale(0.99); }
.btn:disabled { opacity: 0.42; box-shadow: none; }
.btn.ghost { background: var(--cream); color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-weight: 600; font-size: 14px; }
.btn.ghost:hover { background: var(--indigo-soft); }
.btn.ok, .btn.success { background: var(--ok); box-shadow: 0 14px 30px -12px #137a52; }
.btn.wa { background: #128c7e; box-shadow: 0 14px 30px -12px #128c7e; }
.btn.danger-ghost, .btn.danger { background: transparent; color: var(--danger); border: 1px solid rgba(180, 59, 72, 0.35); box-shadow: none; }
.btn.danger-ghost:hover { background: var(--danger-soft); }
.icon-btn { color: var(--muted); }

/* Fields */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea,
.ops-form-field input, .ops-form-field textarea, .pl-select, .pl-stage-row select, .pl-stage-row input,
.pl-pay select, .pl-pay input, .pl-pay textarea, .pl-add input, .pl-add textarea, .list-search input, .ops-select {
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-field); color: var(--ink);
  font: 400 16px var(--ff-body); padding: 11px 13px; min-height: 46px;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239c9aa6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.ops-form-field > span, .pl-sheet label > span { font: 600 10.5px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.list-search { background: transparent; border: 0; padding: 0; }
.list-search input { width: 100%; padding-left: 40px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239c9aa6' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>"); background-repeat: no-repeat; background-position: 14px center; }
.crm-toolbar { margin-bottom: 10px; }
.crm-refresh { width: 46px; height: 46px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--muted); }
.book-send-status { color: var(--danger); font: 600 10.5px var(--ff-body); }

/* Segmented control */
.pl-tabs, .surface-tabs, .ops-period-control { padding: 3px; background: var(--indigo-soft); border-radius: 14px; gap: 2px; }
.pl-tab, .surface-tab, .ops-period-control button { min-height: 34px; border-radius: 11px; color: var(--muted); background: transparent; border: 0; font: 600 12.5px var(--ff-body); }
.pl-tab.active, .surface-tab.active, .ops-period-control button.active { background: var(--cream); color: var(--indigo-deep); box-shadow: 0 1px 4px rgba(27, 26, 36, 0.12); }
.surface-tabs { display: flex; margin: 0 0 10px; }
.surface-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.surface-tab .surface-tab-icon svg { width: 15px; height: 15px; }
.surface-count { font: 600 10.5px var(--ff-mono); padding: 1px 6px; border-radius: 999px; background: var(--indigo); color: #fff; }

/* ---------------------------------------------------------------------------
   4. CHIPS · TAGS · ROWS · AVATARS · SKELETON
   ------------------------------------------------------------------------- */
.chip { font: 600 10.5px var(--ff-body); padding: 3px 9px; border-radius: 999px; border: 0; background: var(--indigo-soft); color: var(--indigo-deep); white-space: nowrap; }
.chip.s-new { background: var(--stage-new-soft); color: var(--stage-new); }
.chip.s-no_answer { background: var(--stage-no_answer-soft); color: var(--stage-no_answer); }
.chip.s-contacted { background: var(--stage-contacted-soft); color: var(--stage-contacted); }
.chip.s-book_test, .chip.s-test_scheduled { background: var(--stage-book_test-soft); color: var(--stage-book_test); }
.chip.s-no_show { background: var(--stage-no_show-soft); color: var(--stage-no_show); }
.chip.s-test_done { background: var(--stage-test_done-soft); color: var(--stage-test_done); }
.chip.s-proforma_sent { background: var(--stage-proforma_sent-soft); color: var(--stage-proforma_sent); }
.chip.s-paid { background: var(--stage-paid-soft); color: var(--stage-paid); }
.chip.s-not_interested { background: var(--stage-not_interested-soft); color: var(--stage-not_interested); }
.chip.s-lost { background: var(--stage-lost-soft); color: var(--stage-lost); }
.chip.pulse { animation: stagePulse 0.9s var(--ease-out) 2; }
[data-theme="dark"] .chip[class*="s-"] { background: color-mix(in oklab, currentColor 30%, var(--cream)); }
.ch-tag { font: 600 9.5px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: var(--indigo-soft); color: var(--indigo-deep); }
.ch-tag[data-ch="whatsapp"] { background: var(--ch-whatsapp-soft); color: var(--ch-whatsapp); }
.ch-tag[data-ch="sms"] { background: var(--ch-sms-soft); color: var(--ch-sms); }
.ch-tag[data-ch="email"] { background: var(--ch-email-soft); color: var(--ch-email); }
.ch-tag[data-ch="facebook"] { background: var(--ch-facebook-soft); color: var(--ch-facebook); }
.ch-tag[data-ch="instagram"] { background: var(--ch-instagram-soft); color: var(--ch-instagram); }
.ch-tag[data-ch="tiktok"] { background: var(--ch-tiktok-soft); color: var(--ch-tiktok); }

/* Filter chips (pipeline rows, feed dates, inbox channels) */
.pl-stages { gap: 6px; padding: 2px 0 8px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.pl-stage-chip { min-height: 34px; padding: 0 11px; border-radius: 999px; background: var(--cream); color: var(--muted); border: 1px solid var(--line); font: 600 12px var(--ff-body); gap: 6px; transition: none; }
.pl-stage-chip b { min-width: 0; padding: 0; background: transparent; color: inherit; font: 600 11px var(--ff-mono); }
.pl-stage-chip i { font: 600 9px var(--ff-mono); font-style: normal; opacity: 0.6; }
.pl-stage-chip.s-all.active { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.pl-stage-chip.flow { background: var(--soft); color: var(--strong); border-color: transparent; }
.pl-stage-chip.flow.active { background: var(--strong); color: #fff; }
.pl-stage-chip.flow.active b { color: #fff; }
.pl-stage-chip.branch { min-height: 32px; font-weight: 500; border: var(--stage-branch-border); background: transparent; color: var(--muted); }
.pl-stage-chip.branch.active { background: var(--strong); color: #fff; border: 1px solid var(--strong); }
.pl-stage-chip.branch.active b { color: #fff; }
.pl-stages.branch-row { padding-top: 0; }
.pl-stages.branch-row .pl-branch-label { flex: 0 0 auto; align-self: center; font: 600 9.5px var(--ff-mono); letter-spacing: 0.1em; color: var(--faint); }
.pl-stage-chip.s-new { --strong: var(--stage-new); --soft: var(--stage-new-soft); }
.pl-stage-chip.s-no_answer { --strong: var(--stage-no_answer); --soft: var(--stage-no_answer-soft); }
.pl-stage-chip.s-contacted { --strong: var(--stage-contacted); --soft: var(--stage-contacted-soft); }
.pl-stage-chip.s-book_test { --strong: var(--stage-book_test); --soft: var(--stage-book_test-soft); }
.pl-stage-chip.s-no_show { --strong: var(--stage-no_show); --soft: var(--stage-no_show-soft); }
.pl-stage-chip.s-test_done { --strong: var(--stage-test_done); --soft: var(--stage-test_done-soft); }
.pl-stage-chip.s-proforma_sent { --strong: var(--stage-proforma_sent); --soft: var(--stage-proforma_sent-soft); }
.pl-stage-chip.s-paid { --strong: var(--stage-paid); --soft: var(--stage-paid-soft); }
.pl-stage-chip.s-not_interested { --strong: var(--stage-not_interested); --soft: var(--stage-not_interested-soft); }
.pl-stage-chip.s-lost { --strong: var(--stage-lost); --soft: var(--stage-lost-soft); }
.pl-meta-line { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 0 8px; }
.pl-meta-line .ops-result-count { font: 600 12px var(--ff-mono); color: var(--muted); margin: 0; }
.pl-meta-line small { font: 500 11.5px var(--ff-body); color: var(--faint); }
.ops-result-count { font: 600 12px var(--ff-mono); color: var(--muted); letter-spacing: 0; text-transform: none; }

/* Lead rows (option 2a) — .cards container + .lead-card rows */
.cards { display: flex; flex-direction: column; gap: 0; background: var(--cream); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.lead-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 13px; min-height: var(--row-h); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; color: var(--ink); box-shadow: none; }
.cards .lead-card:last-child { border-bottom: 0; }
.lead-card:hover, .lead-card:active { background: var(--indigo-soft); transform: none; }
.lead-card .avatar, .chat-row .avatar, .avatar { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--ff-display); color: var(--indigo-deep); background: var(--indigo-soft); }
.lead-card:nth-child(3n+2) .avatar { background: #fbf0dc; color: #8a5a12; }
.lead-card:nth-child(3n) .avatar { background: #e3f4ec; color: #137a52; }
[data-theme="dark"] .lead-card .avatar { background: var(--indigo-soft); color: var(--indigo-deep); }
.lead-card .body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.lead-card .name { font: 600 14.5px var(--ff-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
.lead-card .sub { font: 400 11.5px var(--ff-mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-card .sub .sep { color: var(--faint); margin: 0 4px; }
.lead-card .side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.lead-card .side .chip { font-size: 10px; padding: 2px 7px; }
.lead-card .when { font: 500 11px var(--ff-mono); color: var(--faint); }
.lead-card .chev { color: var(--faint); display: inline-flex; }
.lead-card .chev svg { width: 15px; height: 15px; }
.pl-list.cards { margin-top: 2px; }

/* Skeleton */
.skel-row { display: flex; align-items: center; gap: 12px; padding: 12px 13px; min-height: var(--row-h); border-bottom: 1px solid var(--line); }
.skel-row i { display: block; width: 38px; height: 38px; border-radius: 999px; background: var(--line); opacity: 0.4; animation: shimmer 1.4s ease-in-out infinite; }
.skel-row span { display: block; height: 9px; border-radius: 999px; background: var(--line); opacity: 0.4; animation: shimmer 1.4s ease-in-out infinite; }
.skel-row .a { width: 58%; margin-bottom: 8px; } .skel-row .b { width: 82%; }
.skel-row > div { flex: 1; }

/* Section header + count pill */
.day-out .section { margin-bottom: 10px; }
.section-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
.section-head h2 { margin: 0; font: 700 15px var(--ff-display); color: var(--ink); }
.section-head .count { font: 600 11px var(--ff-mono); padding: 2px 7px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo-deep); }
.section.rappels .count { background: var(--danger-soft); color: var(--danger); }
.section.tests .count { background: var(--warn-soft); color: var(--warn); }
.section-head .late { margin-left: auto; font: 500 11.5px var(--ff-mono); color: var(--danger); }
.updated { display: none; }

/* ---------------------------------------------------------------------------
   5. MA JOURNÉE — hero + sections
   ------------------------------------------------------------------------- */
.day-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 6px; padding: 2px 16px 4px; }
.day-filters::-webkit-scrollbar { display: none; }
.day-filters button { flex: 0 0 auto; min-height: 36px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream); color: var(--muted); font: 600 12.5px var(--ff-body); white-space: nowrap; }
.day-filters button.active { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.hero { position: relative; margin: 6px 0 4px; padding: 20px 26px 14px; border-radius: var(--radius-arch-hero); background: var(--grad-arch-live); box-shadow: 0 30px 70px -30px #4b5be0; overflow: hidden; color: #fff; }
.hero .glow { position: absolute; top: -36px; left: 50%; transform: translateX(-50%); width: 180px; height: 120px; background: var(--grad-apex-glow); animation: glow 5.5s ease-in-out infinite; pointer-events: none; }
.hero .hero-top { position: relative; text-align: center; }
.hero .eyebrow { font: 600 10px var(--ff-mono); letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.72); }
.hero .reason { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 122, 77, 0.92); font: 600 11px var(--ff-body); color: #fff; }
.hero .reason::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: #fff; }
.hero .hero-body { position: relative; margin-top: 16px; }
.hero .hero-name { font: 700 20px/1.2 var(--ff-display); letter-spacing: -0.01em; color: #fff; overflow-wrap: anywhere; }
.hero .hero-ctx { margin-top: 5px; font: 400 13.5px/1.45 var(--ff-body); color: rgba(255, 255, 255, 0.82); text-wrap: pretty; }
.hero .hero-meta { display: flex; align-items: center; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.hero .hero-meta .chip { background: rgba(255, 255, 255, 0.16); color: #fff; }
.hero .hero-meta span:not(.chip) { font: 500 11.5px var(--ff-mono); color: rgba(255, 255, 255, 0.72); }
.hero .hero-actions { display: flex; gap: 9px; margin-top: 12px; }
.hero .hero-actions .primary { flex: 1.2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 0; border-radius: 16px; background: var(--grad-walkin); color: #3c3186; font: 700 15px var(--ff-body); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.5); }
.hero .hero-actions .primary:active { transform: scale(0.985); }
.hero .hero-actions .ghost-arch { flex: 1; min-height: 46px; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 16px; background: rgba(255, 255, 255, 0.12); color: #fff; font: 600 14px var(--ff-body); box-shadow: none; }
.hero .hero-actions svg { width: 16px; height: 16px; }
.section.rappels .cards { background: transparent; border: 0; gap: 8px; overflow: visible; }
.section.rappels .lead-card { background: var(--cream); border: 1px solid var(--line); border-radius: 18px; padding: 11px 13px; }
.section.rappels .lead-card .when.late { color: var(--danger); font-weight: 600; }
.section.tests .cards { background: transparent; border: 0; gap: 8px; overflow: visible; }
.section.tests .lead-card { background: var(--cream); border: 1px solid var(--line); border-radius: 18px; }
.section.tests .lead-card .avatar { width: 52px; flex-basis: 52px; border-radius: 0; background: transparent; color: var(--ink); font: 600 15px var(--ff-mono); border-right: 1px solid var(--line); height: 34px; }
.feed-empty-hero { margin: 6px 0 4px; }

/* ---------------------------------------------------------------------------
   6. INBOX rows
   ------------------------------------------------------------------------- */
.inbox-tools { background: transparent; padding: 0; margin-bottom: 8px; }
.inbox-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.pipeline-filter-btn { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--line); background: var(--cream); color: var(--muted); font: 600 12px var(--ff-body); display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.pipeline-filter-label { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.pipeline-filter-label small { display: none; }
.pipeline-filter-label b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-filter-menu { background: var(--cream); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px -24px rgba(27, 26, 36, 0.5); }
.pipeline-option { color: var(--ink); font: 500 13px var(--ff-body); }
.pipeline-option.active { color: var(--indigo-deep); background: var(--indigo-soft); }
.chat-list { background: var(--cream); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.chat-row, .chat-row[data-stage] { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px 14px 12px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; text-align: left; color: var(--ink); }
.chat-row:last-child { border-bottom: 0; }
.chat-row.unread, .chat-row[data-stage].unread { background: var(--indigo-soft); }
.chat-row.unread .preview { color: var(--ink); }
.chat-row .avatar { width: 42px; height: 42px; flex-basis: 42px; position: relative; overflow: visible; }
.chat-row .avatar[data-ch]::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 999px; border: 2px solid var(--bg); background: var(--indigo); }
.chat-row.unread .avatar[data-ch]::after { border-color: var(--indigo-soft); }
.chat-row .avatar[data-ch="whatsapp"]::after { background: var(--ch-whatsapp); }
.chat-row .avatar[data-ch="sms"]::after { background: var(--ch-sms); }
.chat-row .avatar[data-ch="email"]::after { background: var(--ch-email); }
.chat-row .avatar[data-ch="facebook"]::after { background: var(--ch-facebook); }
.chat-row .avatar[data-ch="instagram"]::after { background: var(--ch-instagram); }
.chat-row .avatar[data-ch="tiktok"]::after { background: var(--ch-tiktok); }
.chat-row .body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.chat-row .top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chat-row .name { font: 600 14.5px var(--ff-body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-row .when { font: 500 11px var(--ff-mono); color: var(--faint); flex: 0 0 auto; }
.chat-row .bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-row .preview { font: 400 12.5px var(--ff-body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chat-row .unread { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--indigo); color: #fff; font: 700 11px var(--ff-mono); display: inline-flex; align-items: center; justify-content: center; }
.chat-row .tags { display: flex; gap: 6px; align-items: center; }
.inbox-load-more-btn { background: transparent; border: 0; color: var(--indigo); font: 600 12.5px var(--ff-body); padding: 16px; width: 100%; }
.inbox-list-end { color: var(--faint); font: 500 11px var(--ff-mono); letter-spacing: 0.08em; text-align: center; padding: 14px; }

/* ---------------------------------------------------------------------------
   7. PIPELINE — lead sheet · booking
   ------------------------------------------------------------------------- */
.pl-head { gap: 12px; }
.pl-avatar { width: 46px; height: 46px; flex-basis: 46px; font-size: 15px; }
.pl-head-copy { gap: 6px; }
.pl-head-copy .pl-head-row .pl-muted { font: 500 11.5px var(--ff-mono); }
.pl-head-copy small.pl-muted { font: 500 11px var(--ff-mono); color: var(--faint); }
.pl-banner { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 14px; background: var(--danger-soft); color: var(--danger); font: 600 12.5px var(--ff-body); }
.pl-banner b { margin-left: auto; font: 500 11.5px var(--ff-mono); }
.pl-actions { gap: 8px; }
.pl-action, .pl-actions .conv-call { min-height: 72px; border-radius: 16px; background: var(--cream); border: 1px solid var(--line); color: var(--ink); font: 600 11.5px var(--ff-body); gap: 7px; box-shadow: none; }
.pl-action-ico, .pl-action svg, .pl-actions .conv-call svg { color: var(--indigo); width: 19px; height: 19px; }
.pl-actions .conv-call-wa svg { color: #128c7e; }
.pl-actions .conv-call .pl-action-label { color: var(--ink); font: 600 11.5px var(--ff-body); }
.pl-actions .conv-call-office::after { bottom: auto; left: auto; transform: none; width: auto; height: auto; content: "BUREAU"; font: 600 8px var(--ff-mono); letter-spacing: 0.08em; color: var(--indigo-deep); background: var(--indigo-soft); padding: 1px 5px; border-radius: 4px; position: absolute; top: 6px; right: 6px; }
.pl-action:disabled { opacity: 0.42; }
.pl-block { border-top: 1px solid var(--line); padding-top: 14px; }
.pl-block-label { font: 600 10.5px var(--ff-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.pl-stage-row { grid-template-columns: 1.2fr 1fr; }
.pl-save { width: 100%; }
.pl-save.ok { background: var(--ok); box-shadow: 0 14px 30px -12px #137a52; }
.pl-pay { background: var(--ok-soft); border: 1px solid rgba(19, 122, 82, 0.25); border-radius: 18px; padding: 14px; animation: sheetUp 0.24s var(--ease-out); }
.pl-pay-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font: 700 12.5px var(--ff-body); color: var(--ok); }
.pl-pay-head svg { width: 15px; height: 15px; }
.pl-pay .ops-form-field > span { color: var(--ok); font-size: 10px; }
.pl-pay input, .pl-pay select, .pl-pay textarea { background: var(--cream); border-radius: 12px; min-height: 44px; }
.pl-pay input[type="number"] { font-family: var(--ff-mono); }
.pl-pay-grid { gap: 0 10px; }
.pl-pay .ops-form-field { margin-bottom: 9px; }
.pl-pay-more { width: 100%; min-height: 40px; margin: 2px 0 10px; border: 1px dashed rgba(19, 122, 82, 0.35); border-radius: 12px; background: transparent; color: var(--ok); font: 600 12px var(--ff-body); }
.pl-pay-extra[hidden] { display: none; }
.pl-tabs { margin-bottom: 12px; }
.pl-items { gap: 8px; }
.pl-item { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.pl-item p { font: 400 13.5px/1.5 var(--ff-body); }
.pl-item small { font: 500 10.5px var(--ff-mono); color: var(--faint); }
.pl-items .pl-item.pl-note { background: var(--bubble-note); border-color: rgba(168, 106, 18, 0.28); }
.pl-item.pl-rem { border-left: 3px solid var(--indigo); }
.pl-rem.overdue { border-left-color: var(--danger); background: var(--cream); }
.pl-rem.done { border-left-color: var(--faint); opacity: 1; }
.pl-rem.done p { text-decoration: line-through; color: var(--faint); }
.pl-rem-done { width: 34px; height: 34px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); border: 0; display: grid; place-items: center; }
.pl-add { margin-top: 12px; }
.pl-add .btn { min-height: 48px; }
.pl-add-rem { padding: 12px; border: 1px dashed var(--line); border-radius: 16px; }
.pl-kpis { gap: 6px; }
.pl-kpi { border-radius: 14px; border: 1px solid var(--line); border-top-width: 3px; background: var(--cream); padding: 9px; min-height: 58px; }
.pl-kpi small { font: 600 9.5px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.pl-kpi b { font: 700 14px var(--ff-mono); }
.pl-rest { background: var(--warn-soft) !important; border: 1px solid rgba(168, 106, 18, 0.25) !important; border-radius: 16px !important; }
.pl-rest .ops-detail-row { border-color: rgba(168, 106, 18, 0.15); }
.pl-rest .ops-detail-row > b { font: 600 13px var(--ff-mono); color: var(--ink); }
.pl-rest .ops-detail-row:first-child > b { font: 700 18px var(--ff-mono); color: var(--warn); }
.pl-total { padding: 9px 12px; border-radius: 12px; background: var(--indigo-soft); color: var(--indigo-deep); font: 700 13px var(--ff-mono); text-align: right; }
.pl-pmt::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ok); flex: 0 0 8px; }
.pl-hist { border: 0; background: transparent; padding: 0 0 0 18px; position: relative; border-radius: 0; }
.pl-hist::before { content: ""; position: absolute; left: 3px; top: 8px; width: 9px; height: 9px; border-radius: 999px; background: var(--indigo); }
.pl-hist::after { content: ""; position: absolute; left: 7px; top: 20px; bottom: -12px; width: 1px; background: var(--line); }
.pl-items .pl-hist:last-child::after { display: none; }
.pl-hist small { display: block; margin-top: 3px; }
.pl-arrow { color: var(--faint); }
.pl-pay-actions .btn:first-child { background: var(--ok); box-shadow: 0 14px 30px -12px #137a52; }
/* booking */
.pl-days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 0 16px 4px; }
.pl-days::-webkit-scrollbar { display: none; }
.pl-day { flex: 0 0 54px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: 14px; border: 1px solid var(--line); background: var(--cream); color: var(--ink); }
.pl-day small { font: 500 9.5px var(--ff-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.pl-day b { font: 700 15px var(--ff-mono); }
.pl-day.active { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.pl-day.active small { color: rgba(255, 255, 255, 0.75); }
.pl-teacher { margin-top: 4px; }
.pl-teacher h4 { display: flex; align-items: center; gap: 8px; font: 700 14px var(--ff-display); color: var(--ink); margin: 0 0 8px; }
.pl-teacher h4 i { width: 26px; height: 26px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo-deep); font: 700 10.5px var(--ff-display); font-style: normal; display: inline-grid; place-items: center; }
.pl-teacher h4 small { margin-left: auto; font: 500 11px var(--ff-mono); color: var(--faint); }
.pl-slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-slot { min-height: 52px; border-radius: 14px; background: var(--cream); border: 1px solid var(--line); color: var(--ink); }
.pl-slot span { font: 600 14px var(--ff-mono); }
.pl-slot small { font: 500 9.5px var(--ff-body); color: var(--muted); }
.pl-slot:active { background: var(--indigo-soft); border-color: var(--indigo); }

/* ---------------------------------------------------------------------------
   8. CONVERSATION
   ------------------------------------------------------------------------- */
.chat-overlay, .conv { background: var(--bg); }
.conv-header { background: var(--cream); border-bottom: 1px solid var(--line); padding: calc(12px + var(--safe-top)) 12px 12px; gap: 10px; }
.conv-back { width: 36px; height: 36px; border-radius: 999px; background: transparent; color: var(--ink); border: 0; }
.conv-header .avatar.sm { width: 36px; height: 36px; flex-basis: 36px; }
.conv-name { font: 700 15.5px var(--ff-display); color: var(--ink); }
.conv-sub { font: 500 11px var(--ff-mono); color: var(--faint); }
.conv-actions { gap: 8px; }
.conv-call { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream); color: var(--indigo); display: grid; place-items: center; position: relative; }
.conv-call-wa { background: #e2f3ef; border-color: transparent; color: #128c7e; }
.conv-call-office::after { content: "BUREAU"; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); font: 600 8px var(--ff-mono); letter-spacing: 0.06em; color: var(--indigo-deep); background: var(--indigo-soft); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.conv-toolstrip { flex-basis: 48px; min-height: 48px; justify-content: flex-start; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; background: var(--bg); border-bottom: 0; }
.conv-toolstrip::-webkit-scrollbar { display: none; }
.conv-tool { width: auto; height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream); color: var(--muted); font: 600 11.5px var(--ff-body); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; }
.conv-tool:hover { color: var(--indigo); border-color: var(--indigo); }
.conv-tool svg { width: 14px; height: 14px; }
.conv-tool::after { content: attr(aria-label); }
.conv-scroll { padding: 14px; gap: 10px; background: var(--bg); }
.day-divider span { background: var(--cream); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font: 600 9.5px var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.bubble { max-width: 82%; background: var(--bubble-them); border: 1px solid var(--line); border-radius: 18px 18px 18px 6px; box-shadow: var(--shadow-card); padding: 10px 12px; color: var(--ink); }
.bubble.me { max-width: 84%; background: var(--bubble-me); border: 0; border-radius: 18px 18px 6px 18px; box-shadow: none; }
.bubble.note { max-width: 100%; align-self: stretch; background: var(--bubble-note); border: 1px solid rgba(168, 106, 18, 0.28); border-radius: 16px; color: #5a4a1c; }
[data-theme="dark"] .bubble.note { color: #f0e6c8; }
.bubble.note::before { content: "NOTE INTERNE · JAMAIS ENVOYÉE"; display: block; font: 600 9.5px var(--ff-mono); letter-spacing: 0.1em; color: var(--warn); margin-bottom: 4px; }
.msg-text { font: 400 14.5px/1.5 var(--ff-body); }
.msg-meta { font: 500 10px var(--ff-mono); color: var(--faint); }
.bubble.me .msg-meta { color: var(--muted); }
.bubble .sender { font: 600 10.5px var(--ff-mono); color: var(--indigo-deep); letter-spacing: 0.04em; }
.call-head, .msg-row .bubble.call { background: var(--bubble-call); border: 1px solid var(--line); border-radius: 16px; }
.msg-doc { background: var(--cream); border: 1px solid var(--line); border-radius: 14px; padding: 9px 11px; }
.msg-audio, .wa-audio { border-radius: 14px; }
.wa-audio-play { width: 34px; height: 34px; border-radius: 999px; background: var(--indigo); color: #fff; }
.wa-audio-wave i, .rec-wave i { background: var(--indigo); opacity: 0.55; border-radius: 999px; }
.composer-wrap { background: var(--cream); border-top: 1px solid var(--line); }
.ch-strip { padding: 8px 12px 0; background: transparent; border: 0; }
.ch-seg { min-height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream); color: var(--muted); font: 600 12px var(--ff-body); }
.ch-seg::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--faint); }
.ch-seg:nth-child(1)::before { background: var(--ch-whatsapp); }
.ch-seg:nth-child(2)::before { background: var(--ch-sms); }
.ch-seg-mail::before { background: var(--ch-email); }
.ch-seg svg { display: none; }
.ch-seg.active, .ch-seg.active:nth-child(2) { background: var(--indigo-soft); border-color: var(--indigo); color: var(--indigo-deep); }
.ch-seg-mail { color: var(--muted); background: var(--cream); border-color: var(--line); }
.composer { background: var(--cream); border-top: 0; padding: 9px 12px calc(12px + var(--safe-bottom)); gap: 8px; }
.composer-input { background: var(--bg); border: 1px solid var(--line); border-radius: 18px; padding: 10px 13px; font: 400 16px var(--ff-body); min-height: 44px; }
.composer-mic, .composer-send, .composer-tpl { width: 44px; height: 44px; border-radius: 999px; }
.composer-mic { background: var(--cream); border: 1px solid var(--line); color: var(--indigo); }
.composer-mic:active { transform: scale(0.94); }
.composer-send { background: var(--indigo); color: #fff; border: 0; box-shadow: var(--shadow-cta); }
.composer-hint { color: var(--muted); font: 500 12px var(--ff-body); }
.rec-bar { background: var(--coral-soft); border: 1px solid rgba(255, 122, 77, 0.35); border-radius: 16px; }
.rec-bar .rec-dot, .rec-dot { background: var(--coral); animation: glow 1.2s ease-in-out infinite; }
.rec-timer { font: 600 14px var(--ff-mono); color: #8a3a1c; }
.rec-send { background: var(--indigo); color: #fff; }
/* tutoriels + email sheets */
.tuto-card { border-radius: 16px; background: var(--cream); border: 1px solid var(--line); }
.tuto-thumb { background: linear-gradient(180deg, #5c4dd4, #3c3186); }
.tuto-badge { font-family: var(--ff-mono); }

/* ---------------------------------------------------------------------------
   9. MOI (profile)
   ------------------------------------------------------------------------- */
.me { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 6px; }
.me-arch { width: 104px; height: 116px; border-radius: var(--radius-arch-avatar); background: var(--grad-arch-emblem); box-shadow: var(--shadow-avatar); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px; color: #fff; font: 700 30px var(--ff-display); }
.me-name { margin: 16px 0 0; font: 700 22px var(--ff-display); color: var(--ink); text-align: center; }
.me-role { margin-top: 4px; font: 500 12.5px var(--ff-mono); color: var(--faint); text-align: center; }
.me-card { width: 100%; margin-top: 18px; background: var(--cream); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.me-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.me-row:last-child { border-bottom: 0; }
.me-row svg { width: 17px; height: 17px; color: var(--indigo); flex: 0 0 17px; }
.me-row .me-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-row .me-copy b { font: 600 14px var(--ff-body); color: var(--ink); }
.me-row .me-copy small { font: 500 11px var(--ff-body); color: var(--muted); }
.me-row .me-copy small.ok { color: var(--ok); }
.me-toggle { width: 44px; height: 26px; border-radius: 999px; background: var(--line); border: 0; position: relative; transition: background var(--dur-fast); flex: 0 0 44px; }
.me-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform var(--dur-fast) var(--ease-out); }
.me-toggle.on { background: var(--indigo); }
.me-toggle.on::after { transform: translateX(18px); }
.me-seg { display: flex; padding: 3px; background: var(--indigo-soft); border-radius: 12px; gap: 2px; }
.me-seg button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 600 12px var(--ff-body); }
.me-seg button.active { background: var(--cream); color: var(--indigo-deep); box-shadow: 0 1px 4px rgba(27, 26, 36, 0.12); }
.me-hint { width: 100%; margin-top: 12px; display: flex; gap: 10px; padding: 12px 14px; background: var(--indigo-soft); border-radius: 16px; color: var(--indigo-deep); font: 400 12.5px/1.5 var(--ff-body); }
.me-hint svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; }
.me .btn.danger-ghost { width: 100%; margin-top: 16px; }
.profile-panel { display: none; }

/* ---------------------------------------------------------------------------
   10. RINGING / IN-CALL (the only coral fields)
   ------------------------------------------------------------------------- */
.wa-ringer { background: linear-gradient(180deg, #ffede4 0%, #ffe0d0 42%, #fff6ef 100%); color: #2a1a12; }
.war-kicker { display: inline-flex; padding: 5px 11px; border-radius: 999px; background: rgba(255,122,77,.16); font: 700 10.5px var(--ff-mono); letter-spacing: .14em; color: #8a3a1c; }
.war-avatar { width: 112px; height: 112px; border: 0; background: var(--grad-arch-emblem); color: #fff; font: 700 34px var(--ff-display); animation: ringPulse 1.6s ease-out infinite; }
.war-name { font: 700 23px/1.2 var(--ff-display); color: #2a1a12; overflow-wrap: anywhere; }
.war-phone { color: #6c4d40; font: 500 12px var(--ff-mono); }
.war-stage { background: rgba(255,255,255,.72); color: #3c3186; border: 1px solid rgba(255,122,77,.2); }
.war-actions { gap: 34px; align-items: flex-end; }
.war-btn { color: #513329; font: 600 12px var(--ff-body); }
.war-accept svg { width: 78px; height: 78px; background: #128c7e; color: #fff; box-shadow: 0 16px 34px -14px #128c7e; }
.war-decline svg { width: 68px; height: 68px; background: #fff; color: var(--danger); box-shadow: 0 14px 30px -14px rgba(180,59,72,.7); }
.wa-call-panel { background: linear-gradient(180deg,#3c3186 0%,#2a2160 62%,#1b1a24 100%); color: #fff; border-color: rgba(255,255,255,.2); }
.wa-call-panel .wacp-avatar { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 999px; font-family: var(--ff-display); }
.wa-call-panel .wacp-name { color: #fff; font-family: var(--ff-display); }
.wa-call-panel .wacp-sub, .wa-call-panel .wacp-status { color: #d6d2ee; }
.wa-call-panel .wacp-timer { color: #fff; font: 600 26px var(--ff-mono); }
.wa-call-panel .wacp-mute { background: rgba(255,255,255,.14); color: #fff; }
.wa-call-panel .wacp-mute.on { background: var(--coral-soft); color: #8a3a1c; }
.wa-call-panel .wacp-end { background: var(--coral); color: #2a1a24; }
.wa-call-panel .wacp-dot { background: var(--coral); }
.wa-call-panel.ringing { background: var(--coral-soft); }
.wa-call-panel.ringing .wacp-name { color: #2a1a12; }
.wa-call-panel.ringing .wacp-sub { color: #8a3a1c; }
.wa-call-panel.ringing .wacp-avatar { background: var(--grad-arch-emblem); }
.team-call-panel .wacp-accept { background: #128c7e; color: #fff; }

/* ---------------------------------------------------------------------------
   11. OPS VIEWS — light retheme (objective, rest, planning, groups, tickets)
   ------------------------------------------------------------------------- */
.objective-hero, .ops-rest-card, .crm-row, .book-group-card, .group-student-row, .schedule-stats > div, .objective-stat, .objective-agent {
  background: var(--cream); border-color: var(--line); border-radius: 16px;
}
.objective-hero { border-radius: 22px; box-shadow: var(--shadow-card); }
.objective-track { background: var(--line); }
.objective-track > i, .objective-track > span { background: linear-gradient(90deg, #5c4dd4, #3c3186); }
.objective-eyebrow { font: 600 10.5px var(--ff-mono); letter-spacing: 0.14em; color: var(--faint); text-transform: uppercase; }
.objective-total { font: 700 30px var(--ff-mono); color: var(--ink); }
.schedule-stats > div { border-top-width: 3px; }
.ops-rest-card { border-left: 3px solid var(--warn); }
.ops-rest-card.bucket-past { border-left-color: var(--danger); }
.ops-rest-card.bucket-upcoming { border-left-color: var(--ok); }
.ops-rest-amount { font: 700 14px var(--ff-mono); color: var(--warn); }
.crm-row { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.crm-list { background: var(--cream); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.crm-row-side { color: var(--ink); font-weight: 700; }
.tickets-mobile-list, .groups-mobile-list { display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------------------
   12. AUTH
   ------------------------------------------------------------------------- */
.auth-screen { background: var(--bg); }
.auth-card { background: var(--cream); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-card); }
.auth-logo { width: 120px; height: 138px; border-radius: var(--radius-arch-emblem); background: var(--grad-arch-emblem); box-shadow: var(--shadow-emblem); display: grid; place-items: center; color: #fff; font: 700 32px var(--ff-display); overflow: hidden; }
.auth-logo img { width: 56px; height: 56px; border-radius: 14px; }
.auth-eyebrow { font: 600 10.5px var(--ff-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.auth-card h1, .auth-card-head h1, .auth-card-head h2 { font: 700 24px/1.12 var(--ff-display); color: var(--ink); letter-spacing: -0.02em; }
.auth-features { color: var(--muted); }
.auth-card .btn { width: 100%; }

/* ---------------------------------------------------------------------------
   13. Desktop
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .tabbar { grid-template-columns: 1fr 1fr 76px 1fr 1fr; }
  .view { padding-left: 24px; padding-right: 24px; }
}

/* Keep all secondary workflows on the same surfaces in either theme. */
.doc-builder-overlay, .doc-builder-shell, .doc-builder-body { background: var(--bg); color: var(--ink); }
.doc-builder-head, .doc-type-card, .doc-builder-field input, .doc-builder-field select, .doc-builder-field textarea { background: var(--cream); color: var(--ink); border-color: var(--line); }
.me-seg button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 420px) { .header-actions { gap: 4px; } .app-header { gap: 8px; } }

.day-out .section { margin: 0 0 6px; }
.day-out .section-head { margin: 8px 0 6px; }
.day-out .lead-card { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
.day-out .section.rappels .lead-card, .day-out .section.tests .lead-card { padding-top: 8px; padding-bottom: 8px; }
.day-out .section-head h2 { text-transform: none; }
.btn.inbox-load-more-btn { box-shadow: none; background: transparent; color: var(--indigo); }
.pl-rest .ops-detail-row { padding: 7px 12px; gap: 8px; }
.pl-rest .ops-detail-row > b { white-space: normal; overflow-wrap: anywhere; min-width: 0; text-align: right; }
[data-theme="dark"] { --ok: #66c8a0; --warn: #e0b365; --danger: #f2949b; }
[data-theme="dark"] .chip.s-new { color: color-mix(in oklab, var(--stage-new) 42%, white); }
[data-theme="dark"] .chip.s-no_answer { color: color-mix(in oklab, var(--stage-no_answer) 42%, white); }
[data-theme="dark"] .chip.s-contacted { color: color-mix(in oklab, var(--stage-contacted) 42%, white); }
[data-theme="dark"] .chip.s-book_test { color: color-mix(in oklab, var(--stage-book_test) 42%, white); }
[data-theme="dark"] .chip.s-no_show { color: color-mix(in oklab, var(--stage-no_show) 42%, white); }
[data-theme="dark"] .chip.s-test_done { color: color-mix(in oklab, var(--stage-test_done) 42%, white); }
[data-theme="dark"] .chip.s-proforma_sent { color: color-mix(in oklab, var(--stage-proforma_sent) 42%, white); }
[data-theme="dark"] .chip.s-paid { color: color-mix(in oklab, var(--stage-paid) 42%, white); }
[data-theme="dark"] .chip.s-not_interested { color: color-mix(in oklab, var(--stage-not_interested) 42%, white); }
[data-theme="dark"] .chip.s-lost { color: color-mix(in oklab, var(--stage-lost) 42%, white); }
[data-theme="dark"] .ch-tag[data-ch="whatsapp"] { color: color-mix(in oklab, var(--ch-whatsapp) 42%, white); background: color-mix(in oklab, var(--ch-whatsapp) 30%, var(--cream)); }
[data-theme="dark"] .ch-tag[data-ch="sms"] { color: color-mix(in oklab, var(--ch-sms) 42%, white); background: color-mix(in oklab, var(--ch-sms) 30%, var(--cream)); }
[data-theme="dark"] .ch-tag[data-ch="email"] { color: color-mix(in oklab, var(--ch-email) 42%, white); background: color-mix(in oklab, var(--ch-email) 30%, var(--cream)); }
[data-theme="dark"] .ch-tag[data-ch="facebook"] { color: color-mix(in oklab, var(--ch-facebook) 42%, white); background: color-mix(in oklab, var(--ch-facebook) 30%, var(--cream)); }
[data-theme="dark"] .ch-tag[data-ch="instagram"] { color: color-mix(in oklab, var(--ch-instagram) 42%, white); background: color-mix(in oklab, var(--ch-instagram) 30%, var(--cream)); }
[data-theme="dark"] .ch-tag[data-ch="tiktok"] { color: color-mix(in oklab, var(--ch-tiktok) 42%, white); background: color-mix(in oklab, var(--ch-tiktok) 30%, var(--cream)); }

/* The active client call owns the screen; its compact state keeps the thread usable. */
#wa-call-panel:not(.compact) { inset: 0; transform: none; width: 100%; border: 0; border-radius: 0; padding: calc(60px + var(--safe-top)) 24px calc(32px + var(--safe-bottom)); display: flex; flex-direction: column; align-items: stretch; animation: war-fade .2s ease-out; }
#wa-call-panel:not(.compact) .wacp-head { flex-direction: column; text-align: center; gap: 18px; }
#wa-call-panel:not(.compact) .wacp-avatar { width: 96px; height: 96px; font-size: 30px; }
#wa-call-panel:not(.compact) .wacp-name { white-space: normal; font-size: 23px; }
#wa-call-panel:not(.compact) .wacp-status { flex-direction: column; padding-top: 24px; }
#wa-call-panel:not(.compact) .wacp-timer { margin: 0; font-size: 34px; }
#wa-call-panel:not(.compact) .wacp-btns { margin-top: auto; padding: 28px 0 0; }
#wa-call-panel .wacp-open, #wa-call-panel .wacp-expand { min-height: 44px; align-self: center; padding: 10px 18px; margin: 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; }
#wa-call-panel:not(.compact) .wacp-expand, #wa-call-panel.compact .wacp-open { display: none; }
#wa-call-panel.compact { max-height: 32dvh; overflow: auto; }
#wa-call-panel.compact .wacp-head { display: none; }

.objective-gauge { position: relative; width: 250px; max-width: 100%; margin: 18px auto 8px; padding-top: 4px; }
.objective-gauge-arc svg { display: block; width: 100%; }
.objective-gauge-value { position: absolute; inset: auto 0 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.objective-gauge-value strong { font: 700 27px var(--ff-mono); color: var(--ink); }
.objective-gauge-value small { font: 500 11px var(--ff-mono); color: var(--muted); }
.objective-hero:has(.objective-gauge) > .objective-track { display: none; }
.objective-progress-copy { color: var(--muted); }
.objective-progress-copy > b { color: var(--indigo-deep); background: var(--indigo-soft); border-radius: 999px; padding: 3px 8px; }
.objective-stat strong, .objective-total strong { font-family: var(--ff-mono); color: var(--ink); }
.objective-stat span, .objective-total span { color: var(--muted); }
.schedule-stats strong, .schedule-stats b { font-family: var(--ff-mono); }
.schedule-stats span, .schedule-stats small { color: var(--muted); }
.day-out .lead-card { min-height: 52px; padding-top: 6px; padding-bottom: 6px; }
.day-out .section.rappels .lead-card, .day-out .section.tests .lead-card { padding-top: 6px; padding-bottom: 6px; }
.push-banner { background: var(--cream); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-card); }
.push-banner b { color: var(--ink); }
.push-banner button { background: var(--indigo); }
.push-banner button#push-x { color: var(--muted); }
@media (min-width: 900px) {
  .app-shell { grid-template-columns: 232px minmax(0, 1fr); }
  .tabbar { top: 0; bottom: 0; left: 0; width: 232px; height: 100dvh; display: flex; flex-direction: column; align-items: stretch; padding: 26px 16px; gap: 24px; border: 0; border-right: 1px solid var(--line); box-shadow: none; }
  .nav-brand { display: flex; color: var(--ink); padding: 0 8px; }
  .nav-brand small { color: var(--muted); }
  .nav-items { display: flex; flex-direction: column; gap: 6px; }
  .tab { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; height: 48px; border-radius: 14px; color: var(--muted); }
  .tab.active { background: var(--indigo-soft); color: var(--indigo-deep); }
  .tab .tab-label { font-size: 13px; }
  .tab-fab-wrap { height: auto; margin: 10px 0; }
  .tab-fab { width: 100%; height: 48px; margin: 0; border: 0; border-radius: 14px; flex-direction: row; gap: 10px; }
  .tab-fab span { font-size: 12px; }
  .nav-account { display: flex; margin-top: auto; color: var(--ink); background: var(--indigo-soft); border-color: var(--line); }
  .nav-account-copy small { color: var(--muted); }
  .nav-avatar { background: var(--cream); color: var(--indigo-deep); }
  .chat-overlay, .chat-tools-backdrop { left: 232px; }
  body.chat-open .tabbar { display: flex; }
  .view { padding-bottom: 32px; }
  .hero { max-width: 640px; }
  .push-banner { left: 250px; }
}
.doc-builder-head > .doc-builder-back { grid-column: 1; grid-row: 1; }
.doc-builder-head > .doc-builder-head-icon { grid-column: 2; grid-row: 1; }
.doc-builder-head > h2 { grid-column: 3; grid-row: 1; font-family: var(--ff-display); }
.doc-builder-head > .doc-builder-close { grid-column: 4; grid-row: 1; }
.doc-client-strip { background: var(--indigo-soft); color: var(--ink); border-color: var(--line); }
.doc-client-strip small { color: var(--muted); }
.doc-client-avatar, .doc-builder-head-icon { background: var(--cream); color: var(--indigo-deep); }
.doc-type-row { background: var(--cream); color: var(--ink); border-color: var(--line); border-radius: 16px; }
.doc-type-copy small, .doc-picker-intro, .doc-footer-hint { color: var(--muted); }
.doc-builder-footer { background: var(--bg); border-color: var(--line); }
.doc-field input, .doc-field select, .doc-field textarea { background: var(--field); color: var(--ink); border-color: var(--line); border-radius: 14px; font-size: 16px; }
.ops-rest-status { background: var(--indigo-soft); color: var(--indigo-deep); }
.ops-rest-amount { background: var(--warn-soft); color: var(--warn); }
.ops-date-toolbar { grid-template-columns: 40px minmax(0, 1fr) auto 40px; gap: 4px; }
.ops-date-toolbar .btn { padding: 8px; font-size: 12px; box-shadow: none; }
.ops-date-toolbar input { padding: 8px 5px; font-size: 14px; }
@media (max-width: 374px) {
  .ops-date-toolbar { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .ops-date-toolbar > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .ops-date-toolbar > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .ops-date-toolbar > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .ops-date-toolbar > :nth-child(4) { grid-column: 3; grid-row: 1; }
}

/* Attachment preview: the chat stays mounted below a persistent return bar. */
body.media-open { overflow: hidden; }
.media-viewer { position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); }
.media-viewer-header { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--safe-top)) 12px 10px; background: var(--cream); border-bottom: 1px solid var(--line); }
.media-viewer-header h2 { flex: 1; min-width: 0; margin: 0; font: 600 14px var(--ff-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-viewer button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--cream); color: var(--indigo-deep); font: 600 13px var(--ff-body); cursor: pointer; }
.media-viewer-back { flex-shrink: 0; }
.media-viewer .media-viewer-close { width: 44px; flex: 0 0 44px; padding: 0; font-size: 26px; }
.media-viewer-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.media-viewer-status { padding: 16px; margin: 0; color: var(--muted); text-align: center; }
.media-viewer-canvas { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.media-viewer-image { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.media-viewer.zoomed .media-viewer-canvas { width: 250%; height: auto; min-height: 100%; align-items: flex-start; }
.media-viewer.zoomed .media-viewer-image { width: 100%; max-height: none; }
.media-viewer-pdf { display: block; width: 100%; height: 100%; border: 0; background: white; }
.media-viewer-player { width: 100%; max-height: 100%; }
.media-viewer-controls { display: flex; flex: 0 0 auto; justify-content: center; gap: 10px; padding: 10px 12px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--cream); }
button.msg-doc { font: inherit; color: inherit; text-align: start; cursor: pointer; }
.msg-img[role="button"] { cursor: zoom-in; }
.msg-img[role="button"]:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }

/* Chat management stays compact above the existing tool strip. */
.conv-management { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; flex: 0 0 auto; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.conv-bot { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: var(--cream); font: 600 13px var(--ff-body); cursor: pointer; }
.conv-bot.on { color: var(--indigo-deep); border-color: var(--indigo); background: var(--indigo-soft); }
.conv-bot-icon { display: flex; }
.conv-bot-icon svg { width: 21px; height: 21px; }
.conv-bot-state { font: 600 10px var(--ff-mono); padding: 3px 5px; border-radius: 5px; background: var(--line); }
.conv-bot.on .conv-bot-state { color: white; background: var(--indigo); }
.conv-bot:disabled { opacity: .6; cursor: wait; }
.conv-assignee { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; color: var(--muted); font: 500 10px var(--ff-body); }
.conv-assignee-select { appearance: auto; -webkit-appearance: auto; width: 100%; min-width: 0; min-height: 44px; padding: 6px 28px 6px 10px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font: 500 16px var(--ff-body); text-overflow: ellipsis; }
.conv-management-status { flex: 1 0 100%; margin: 0; font: 400 12px/1.4 var(--ff-body); color: var(--muted); overflow-wrap: anywhere; }
.conv-management-retry { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--indigo-deep); font: 600 12px var(--ff-body); }
.conv-bot:focus-visible, .conv-assignee-select:focus-visible, .conv-management-retry:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

html[lang="en"] .conv-call-office::after,
html[lang="en"] .pl-actions .conv-call-office::after { content: "OFFICE"; }
html[lang="en"] .bubble.note::before { content: "INTERNAL NOTE · NEVER SENT"; }