/* clinic-growth — app shell + per-page styles. Tokens live in ds.css. */

/* ---------- Utilities ---------- */
.spacer{flex:1;}
.row-flex{display:flex;align-items:center;gap:9px;}
.col-min{min-width:0;}
.no-margin{margin:0;}

/* ---------- Channel chip sizes ---------- */
.ch{width:30px;height:30px;}
.ch-lg{width:32px;height:32px;}
.ch-xl{width:42px;height:42px;border-radius:11px;}

/* ---------- Phosphor icon defaults — keep glyphs visually centered everywhere ---------- */
i.ph, i.ph-duotone, i.ph-fill, i.ph-bold, i.ph-light, i.ph-thin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

/* Phosphor icon sizing per context */
.nav a i, .foot-link i, .theme-tog i { font-size: 19px; }
.ch i { font-size: 18px; }
.ch-lg i { font-size: 19px; }
.ch-xl i { font-size: 24px; }
.ch-xl.ch-brand.ch-facebook i,
.ch-xl.ch-brand.ch-whatsapp i,
.ch-xl.ch-brand.ch-google_calendar i { font-size: 28px; }
.tile i { font-size: 22px; }
.logout-btn i { font-size: 17px; }
.back i { font-size: 16px; }
.empty .med i { font-size: 31px; }
.empty .hint i { font-size: 13px; margin-right: 2px; }
.theme-tog i { color: var(--muted-2); }

/* Buttons never underline on hover (overrides the global a:hover rule for <a class="btn">) */
.btn:hover, .btn:focus, .btn:active { text-decoration: none; }

/* ---------- App shell ---------- */
.app{display:flex;min-height:100vh;}
.side{width:222px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:18px 14px;position:sticky;top:0;height:100vh;}
.side .wm{font-size:26px;padding:6px 10px 18px;}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:6px;}
.brand-row .wm{padding-bottom:18px;}
.theme-mount{margin-bottom:18px;}
.theme-tog-mini{width:30px;height:30px;border-radius:8px;background:none;border:none;cursor:pointer;color:var(--muted-2);display:grid;place-items:center;padding:0;}
.theme-tog-mini:hover{background:var(--surface-2);color:var(--ink);}
.theme-tog-mini i.ph, .theme-tog-mini i.ph-duotone{font-size:17px;color:inherit;}
.nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav a{position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--muted);font-size:14.5px;font-weight:500;text-decoration:none;}
.nav a svg{width:19px;height:19px;color:var(--muted-2);flex-shrink:0;}
.nav a:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
.nav a.on{background:var(--surface-2);color:var(--ink);font-weight:600;}
.nav a.on svg{color:var(--ink);}
.nav a.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--ink);}
.nav .badge{margin-left:auto;font-size:11.5px;font-weight:700;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--ink);color:var(--bg);display:grid;place-items:center;}
.nav .badge.acc{background:var(--acc-soft);color:var(--acc-ink);}
.side .foot{border-top:1px solid var(--border-soft);padding-top:10px;display:flex;flex-direction:column;gap:2px;}
.foot-link{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:var(--muted);font-size:14.5px;font-weight:500;text-decoration:none;}
.foot-link svg{width:19px;height:19px;color:var(--muted-2);flex-shrink:0;}
.foot-link:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
.foot-link.on{background:var(--surface-2);color:var(--ink);font-weight:600;}
.foot-link.on svg{color:var(--ink);}
.acct{display:flex;align-items:center;gap:10px;padding:8px 10px 2px;}
.acct .av{width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--font);font-weight:800;font-size:13px;}
.acct .who{flex:1;min-width:0;}
.acct .who b{display:block;font-size:13px;color:var(--ink);font-weight:600;}
.acct .who span{display:block;font-size:11.5px;color:var(--muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.logout-btn{background:none;border:none;cursor:pointer;color:var(--muted-2);padding:6px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;}
.logout-btn:hover{background:var(--surface-2);color:var(--ink);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.head{display:flex;align-items:center;gap:14px;padding:18px 30px 14px;border-bottom:1px solid var(--border-soft);}
.head .head-titles{display:flex;flex-direction:column;gap:3px;min-width:0;}
.head h1{font-size:23px;font-weight:800;letter-spacing:-.02em;color:var(--head);line-height:1.1;margin:0;}
.head .count{font-size:13px;color:var(--muted-2);font-weight:500;line-height:1.3;margin:0;}
.head .spacer{flex:1;}
.feed-toolbar{display:flex;align-items:center;margin:6px 0 10px;}
.seg{display:inline-flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;}
.seg a{padding:6px 11px;border-radius:7px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.seg a:hover{color:var(--ink);text-decoration:none;}
.seg a.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);}
.seg a .c{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted-2);background:var(--surface-3);border-radius:99px;padding:1px 6px;min-width:18px;text-align:center;}
.seg a.on .c{background:var(--acc-soft);color:var(--acc-ink);}
.placeholder{padding:80px 30px;text-align:center;color:var(--muted-2);}
.placeholder h2{font-size:24px;color:var(--ink);margin-bottom:8px;}

/* ---------- Status pills (theme-aware) ---------- */
.status{font-size:11.5px;font-weight:600;padding:3px 11px;border-radius:99px;white-space:nowrap;display:inline-flex;align-items:center;}
.status-new{background:var(--acc-soft);color:var(--acc-ink);}
.status-replied,.status-qualified{background:color-mix(in srgb,#2563EB 14%,var(--surface));color:#2563EB;}
.status-slot_proposed{background:color-mix(in srgb,#B8791F 16%,var(--surface));color:#B8791F;}
.status-booked{background:color-mix(in srgb,var(--success) 18%,var(--surface));color:var(--success);}
.status-followup{background:var(--acc-soft);color:var(--acc-ink);}
.status-lost{background:var(--surface-3);color:var(--muted);}
.status-no_show{background:color-mix(in srgb,var(--warning) 18%,var(--surface));color:var(--warning);}
/* No-show button — first click arms (turns danger-pink), second click submits.
   Prevents accidental flags on a real patient. */
.no-show-btn.armed{background:color-mix(in srgb,var(--danger) 18%,var(--surface));color:var(--danger);border-color:var(--danger);}

/* ---------- Channel chips (theme-aware) ---------- */
.ch{border-radius:9px;display:grid;place-items:center;flex-shrink:0;}
.ch-whatsapp{background:color-mix(in srgb,#1FA855 18%,var(--surface));color:#1FA855;}
.ch-instagram{background:color-mix(in srgb,#C026D3 18%,var(--surface));color:#C026D3;}
.ch-facebook{background:color-mix(in srgb,#1877F2 18%,var(--surface));color:#1877F2;}
.ch-email{background:color-mix(in srgb,#3B6FE0 18%,var(--surface));color:#3B6FE0;}
.ch-gmail{background:color-mix(in srgb,#EA4335 18%,var(--surface));color:#EA4335;}
.ch-outlook{background:color-mix(in srgb,#0078D4 18%,var(--surface));color:#0078D4;}
.ch-email_forwarding{background:color-mix(in srgb,#475569 18%,var(--surface));color:#475569;}
.ch-google_calendar{background:color-mix(in srgb,#1A73E8 18%,var(--surface));color:#1A73E8;}
.ch-alfadocs{background:color-mix(in srgb,#6761e5 18%,var(--surface));color:#6761e5;}
.ch-miodottore{background:color-mix(in srgb,#006C5D 18%,var(--surface));color:#006C5D;}
.ch-other{background:var(--surface-3);color:var(--muted);}
/* Official brand-color variant — opt in with `brand: true` on the channel-icon partial */
.ch-brand{color:#fff;}
.ch-brand.ch-whatsapp{background:#25D366;}
.ch-brand.ch-instagram{background:linear-gradient(45deg,#F58529 0%,#DD2A7B 45%,#8134AF 75%,#515BD4 100%);}
.ch-brand.ch-facebook{background:linear-gradient(180deg,#00B2FF 0%,#006AFF 100%);}
.ch-brand.ch-facebook i{font-size:21px;}
.ch-glyph{width:70%;height:70%;display:block;}
.ch-brand.ch-email{background:#3B6FE0;}
.ch-brand.ch-outlook{background:#0078D4;}
.ch-brand.ch-email_forwarding{background:#475569;}
.ch-brand.ch-google_calendar{background:transparent;}
.ch-brand.ch-alfadocs{background:transparent;}
.ch-brand.ch-miodottore{background:transparent;}
.ch-svg{background:transparent !important;padding:0;overflow:hidden;}
.ch-svg svg{width:100%;height:100%;display:block;}

/* ---------- Inquiry booking form ---------- */
.book-form{display:flex;flex-direction:column;gap:8px;}

/* ---------- AI panel section gap ---------- */
.ai-section{margin-top:24px;}
.dot-muted{background:var(--muted-2);}

/* ---------- Urgency badges ---------- */
.ubadge{font-size:11.5px;font-weight:700;padding:2px 10px;border-radius:99px;}
.u-normal{background:var(--surface-3);color:var(--muted);}
.u-high{background:var(--acc-soft);color:var(--acc-ink);}
.u-low{background:var(--surface-2);color:var(--muted-2);}

/* ---------- Empty states (from Component Library v3) ----------
   Tones: .pos = good kind of empty · .acc = first-run/action · .neu = filtered/quiet · .err = something wrong
   Anatomy: medallion · headline · one line of context · at most one primary action */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 26px;max-width:360px;margin:60px auto;}
.empty .med{width:72px;height:72px;border-radius:99px;display:grid;place-items:center;margin-bottom:20px;}
.empty .med svg, .empty .med i.ph, .empty .med i.ph-duotone{font-size:31px;line-height:1;}
.empty .med.pos{background:color-mix(in srgb,var(--success) 15%,var(--surface));color:var(--success);box-shadow:0 0 0 7px color-mix(in srgb,var(--success) 9%,transparent);}
.empty .med.acc{background:var(--acc-soft);color:var(--acc-ink);box-shadow:0 0 0 7px color-mix(in srgb,var(--acc) 11%,transparent);}
.empty .med.neu{background:var(--surface-3);color:var(--muted);box-shadow:0 0 0 7px color-mix(in srgb,var(--muted-2) 9%,transparent);}
.empty .med.err{background:color-mix(in srgb,var(--danger) 15%,var(--surface));color:var(--danger);box-shadow:0 0 0 7px color-mix(in srgb,var(--danger) 9%,transparent);}
.empty h4{font-family:var(--font);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--head);line-height:1.18;margin:0;}
.empty p{font-size:14px;color:var(--muted);line-height:1.55;margin:8px 0 0;max-width:300px;}
.empty p b{color:var(--ink);font-weight:600;}
.empty .act-row{margin-top:21px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.empty .btn{font-size:14px;padding:10px 17px;}
.empty .hint{margin-top:15px;font-family:var(--mono);font-size:11.5px;color:var(--muted-2);display:inline-flex;align-items:center;gap:7px;}
.empty .hint kbd{font-family:var(--mono);font-size:11px;background:var(--surface-3);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--muted);}

.empty-inline{display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:26px 20px;border:1px dashed var(--border-strong);border-radius:14px;background:var(--surface-2);}
.empty-inline .med-s{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--surface-3);color:var(--muted);}
.empty-inline .med-s svg{width:20px;height:20px;}
.empty-inline .nm{font-size:14px;font-weight:700;color:var(--head);}
.empty-inline .sub{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:240px;}
.empty-inline a.add{margin-top:2px;font-size:12.5px;font-weight:700;color:var(--acc-ink);display:inline-flex;align-items:center;gap:5px;cursor:pointer;text-decoration:none;}
.empty-inline a.add svg{width:13px;height:13px;}

/* ---------- Inbox ---------- */
.list{padding:14px 22px 40px;max-width:880px;margin:0 auto;width:100%;}
.iq{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:9px;text-decoration:none;color:inherit;}
.iq:hover{border-color:var(--border-strong);text-decoration:none;}
/* Urgent rows — subtle warm tint on the row surface plus the URGENT pill carries the
   signal. Tried a left accent stripe earlier; it looked off-balance with the rest of
   the row borders, so we keep the cue to the background + pill only. */
.iq-urgent{background:color-mix(in srgb,var(--danger) 6%,var(--surface));}
.iq .nm{font-size:14.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.urgent-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--danger) 16%,var(--surface));color:var(--danger);}
.urgent-pill i{font-size:12px;}
.iq .sm{font-size:13px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.iq .time{font-size:12px;color:var(--muted-2);font-weight:500;}
.iq .main-c{flex:1;min-width:0;}

/* ---------- Inquiry detail ---------- */
.main.detail{height:100vh;}
.ihead{display:flex;align-items:center;gap:13px;padding:15px 24px;border-bottom:1px solid var(--border-soft);background:var(--surface);}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;padding:6px 10px;border-radius:8px;}
.back:hover{background:var(--surface-2);color:var(--ink);text-decoration:none;}
.ihead .nm{font-family:var(--font);font-size:17px;font-weight:800;color:var(--head);}
.ihead .meta{font-size:12.5px;color:var(--muted);}
/* "Booked" pill replaces the Book button on confirmed inquiries — same green register as
   the "Connected to Google" calendar pill so the state reads instantly. */
.booked-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--success);background:color-mix(in srgb,var(--success) 14%,var(--surface));padding:6px 12px;border-radius:99px;white-space:nowrap;}
.booked-pill i{font-size:14px;}
/* Inline thread banner — the marker that tells the operator the conversation is in a
   committed state without scrolling to the right panel. Green for confirmed, yellow for
   provisional bookings awaiting operator review. */
.thread-booked-banner{display:flex;align-items:center;gap:12px;padding:12px 16px;background:color-mix(in srgb,var(--success) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--success) 30%,var(--surface));border-radius:12px;margin:8px 0 14px;}
.thread-booked-banner i{font-size:20px;color:var(--success);flex-shrink:0;}
.thread-booked-banner.provisional{background:color-mix(in srgb,var(--warning) 12%,var(--surface));border-color:color-mix(in srgb,var(--warning) 35%,var(--surface));}
.thread-booked-banner.provisional i{color:var(--warning);}
.thread-booked-title{font-size:13.5px;font-weight:700;color:var(--ink);}
.thread-booked-when{font-size:12.5px;color:var(--muted);margin-top:2px;}
/* Post-visit show-check — same neutral surface as the booked banner but with two action
   buttons. Shown when the appointment's end time has passed and the operator hasn't yet
   flagged a show or no-show. Disappears once either button is clicked. */
.thread-show-check{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;margin:0 0 14px;flex-wrap:wrap;}
.thread-show-check-text{flex:1;min-width:220px;display:flex;flex-direction:column;}
.thread-show-check-text strong{font-size:13.5px;color:var(--ink);}
.thread-show-check-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.thread-show-check-actions{display:flex;gap:8px;flex-wrap:wrap;}
.iwrap{flex:1;display:flex;min-height:0;}
.thread{flex:1;min-width:0;display:flex;flex-direction:column;}
.msgs{flex:1;overflow-y:auto;padding:24px 26px 10px;background:var(--bg);}
.ctx{text-align:center;margin-bottom:18px;}
.ctx span{font-size:12px;color:var(--muted-2);font-weight:500;background:var(--surface);border:1px solid var(--border);padding:4px 12px;border-radius:99px;}
/* Chat messages — each .msg is a vertical stack (media + bubble + stamp), aligned left or right within the thread. */
.msgs{display:flex;flex-direction:column;gap:14px;}
.ctx{align-self:center;}
.msg{display:flex;flex-direction:column;max-width:74%;gap:4px;}
.msg-in{align-self:flex-start;align-items:flex-start;}
.msg-out{align-self:flex-end;align-items:flex-end;}
.bubble{padding:9px 14px;border-radius:18px;font-size:14.5px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;width:fit-content;max-width:100%;}
.msg-in .bubble{background:var(--surface);border:1px solid var(--border);border-top-left-radius:6px;color:var(--ink);}
.msg-out .bubble{background:var(--acc-soft);border:1px solid color-mix(in srgb,var(--acc) 35%,var(--acc-soft));border-top-right-radius:6px;color:var(--acc-ink);}
.bubble-media{padding:5px;border-radius:14px;overflow:hidden;}
.msg-media{display:block;max-width:280px;max-height:280px;border-radius:10px;}
.msg-audio{display:block;height:42px;}
.msg-attach{display:inline-flex;align-items:center;gap:6px;color:var(--acc-ink);font-weight:600;text-decoration:none;padding:8px 12px;}

/* Email rendering — when the inquiry channel is `email`, each message is a card with
   from/to/subject header and preserved-whitespace body. Looks like a mail client, not a chat. */
.msgs-email{padding:18px 24px;gap:14px;}
.email-msg{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;max-width:none;align-self:stretch;}
.email-msg-out{border-color:color-mix(in srgb,var(--acc) 30%,var(--border-soft));background:color-mix(in srgb,var(--acc-soft) 35%,var(--surface));}
.email-head{padding-bottom:10px;border-bottom:1px solid var(--border-soft);margin-bottom:12px;}
.email-from{font-size:13.5px;color:var(--ink);}
.email-from b{font-weight:700;}
.email-to{font-size:12px;color:var(--muted-2);margin-top:2px;}
.email-subject{font-size:14.5px;font-weight:700;color:var(--head);margin-top:8px;letter-spacing:-.005em;}
.email-body{font-size:14px;color:var(--ink);line-height:1.6;white-space:pre-wrap;word-wrap:break-word;}
.email-attach{margin-bottom:10px;}

/* Email composer — wider textarea, "to" line above so it reads like a mail client. */
.composer-email .email-to-row{padding:11px 15px;border-bottom:1px solid var(--border-soft);font-size:13px;color:var(--muted);}
.composer-email .email-to-row b{color:var(--ink);font-weight:600;}
.composer-email textarea{min-height:140px;font-size:14px;}
.stamp{font-size:11px;color:var(--muted-2);font-weight:500;padding:0 4px;}
.composer{border-top:1px solid var(--border-soft);background:var(--surface);padding:14px 26px 20px;}
.reply-box{border:1px solid var(--border-strong);border-radius:14px;background:var(--surface);overflow:hidden;}
.reply-box:focus-within{border-color:var(--ink);box-shadow:var(--focus);}
.reply-box textarea{display:block;width:100%;border:none;outline:none;resize:none;padding:13px 15px;font-family:var(--body);font-size:14.5px;line-height:1.55;background:transparent;color:var(--ink);min-height:60px;}
.reply-bar{display:flex;align-items:center;gap:9px;padding:9px 11px 11px;border-top:1px solid var(--border-soft);}
.btn-sm{padding:8px 14px;font-size:13.5px;}
/* Inquiry composer label + via badge */
.reply-label{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:9px;}
.reply-label b{color:var(--acc-ink);font-weight:700;}
.reply-bar .via{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600;text-transform:capitalize;}
.reply-bar .via .ch{width:18px;height:18px;}
.reply-bar .via .ch i{font-size:12px;}

/* AI panel — suggested next step, chips, slots */
.next{border:1px solid var(--acc-soft);background:var(--acc-soft);border-radius:14px;padding:14px;margin-top:14px;}
.next .lab{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-ink);}
.next .act-line{font-family:var(--font);font-size:15px;font-weight:800;color:var(--ink);margin:5px 0 11px;letter-spacing:-.01em;}
.slots{display:flex;gap:8px;flex-wrap:wrap;}
.slot{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;padding:7px 11px;cursor:pointer;font-family:var(--body);line-height:1;}
.slot i{font-size:13px;line-height:1;display:inline-flex;align-items:center;}
.slot:hover{border-color:var(--acc);color:var(--acc-ink);}
.btn-sm i{font-size:14px;line-height:1;display:inline-flex;align-items:center;}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0;}
.chip{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--acc-soft);color:var(--acc-ink);}
.chip-muted{background:var(--surface-2);color:var(--muted);}
/* Soft badges — clearly non-interactive, used in the inquiry sidebar to label the contact. */
.badge-soft{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--surface-2);color:var(--muted);user-select:none;}
.badge-soft i{font-size:12px;}
.badge-soft.badge-returning{background:color-mix(in srgb,var(--success) 14%,var(--surface));color:var(--success);}

/* Language picker — toggle row of pill buttons; the currently-selected locale is filled. */
.lang-picker{display:flex;gap:8px;align-items:center;}
.lang-btn{font-family:var(--body);font-size:13px;font-weight:600;padding:8px 14px;border-radius:99px;border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .12s;}
.lang-btn:hover{border-color:var(--ink);color:var(--ink);}
.lang-btn.on{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.lang-btn .lang-flag{width:20px;height:14px;border-radius:2px;display:block;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.08);}

/* Booking modal — quick-action confirmation card. Each row prefilled; pen icon flips
   that row into inline edit mode; calendar appears below the When row when editing it. */
.book-confirm{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:12px;padding:4px 14px;margin:16px 0 18px;}
.book-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--border-soft);}
.book-row:last-child{border-bottom:none;}
.book-row .book-k{color:var(--muted-2);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;}
.book-row .book-v{color:var(--ink);font-weight:700;font-size:14.5px;}
.book-row-end{display:flex;align-items:center;gap:8px;}
.book-edit-btn{background:none;border:none;cursor:pointer;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--muted-2);transition:all .12s;}
.book-edit-btn:hover{background:var(--surface);color:var(--ink);}
.book-edit-btn i{font-size:14px;}
.book-edit-close{color:var(--success);}
.book-inline-input{font-size:14.5px;padding:7px 11px;text-align:right;max-width:60%;font-weight:600;}
.book-inline-narrow{max-width:120px;}
.book-add-provider{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;font-weight:600;padding:9px 0 6px;display:inline-flex;align-items:center;gap:6px;font-family:var(--body);}
.book-add-provider:hover{color:var(--ink);}
.book-add-provider .book-optional{color:var(--muted-2);font-weight:500;font-size:12px;}
.book-cal-wrap{padding:6px 0 12px;}
.book-custom-fields{display:flex;flex-direction:column;gap:9px;margin:8px 0 14px;}
.book-edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 14px;}
.book-edit-left{display:flex;flex-direction:column;gap:9px;}
.book-edit-right{display:flex;flex-direction:column;gap:5px;}
@media(max-width:560px){.book-edit-grid{grid-template-columns:1fr;}}
.book-field{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em;}
.book-field .input{font-size:14px;padding:11px 13px;text-transform:none;letter-spacing:0;font-weight:400;}
.book-optional{font-weight:500;color:var(--muted-2);text-transform:none;letter-spacing:0;}
.book-primary{font-size:15.5px;font-weight:700;padding:14px 22px;display:inline-flex;align-items:center;justify-content:center;gap:9px;}
.book-primary i{font-size:18px;}
.slot-custom{border-style:dashed;color:var(--muted);}
.slot-custom:hover{color:var(--ink);border-color:var(--ink);}

/* Custom date+time picker — compact, matches the app's cream/pink design system. */
.dp{background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;padding:10px;margin-top:4px;font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--ink);font-weight:400;}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px;}
.dp-title{flex:1;text-align:center;font-family:var(--font);font-weight:800;font-size:13.5px;color:var(--head);letter-spacing:-.005em;}
.dp-arrow{background:none;border:none;cursor:pointer;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--muted);transition:all .12s;}
.dp-arrow:hover{background:var(--surface-2);color:var(--ink);}
.dp-arrow i{font-size:13px;}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;margin-bottom:2px;}
.dp-dow span{text-align:center;font-size:9.5px;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em;padding:3px 0;}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;}
.dp-cell{background:none;border:none;cursor:pointer;height:28px;border-radius:6px;font-family:var(--body);font-weight:600;font-size:12px;color:var(--ink);transition:background .12s,color .12s;display:grid;place-items:center;padding:0;}
.dp-cell:hover:not(:disabled):not(.dp-sel){background:var(--surface-2);}
.dp-cell.dp-other{color:var(--muted-2);font-weight:500;}
.dp-cell.dp-past{color:var(--muted-2);cursor:not-allowed;opacity:.4;}
.dp-cell.dp-today{box-shadow:inset 0 0 0 1.5px var(--ink);}
.dp-cell.dp-sel,.dp-cell.dp-sel:hover{background:var(--acc);color:#fff;}
.dp-time{display:flex;align-items:center;gap:5px;padding-top:8px;margin-top:8px;border-top:1px solid var(--border-soft);}
.dp-time i{color:var(--muted);font-size:13px;margin-right:2px;}
.dp-time select{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:7px;padding:6px 8px;font-family:var(--body);font-size:13px;font-weight:600;color:var(--ink);outline:none;cursor:pointer;}
.dp-time select:focus{border-color:var(--ink);}
.dp-time-sep{font-weight:700;color:var(--muted);}
.btn-block{width:100%;justify-content:center;}

/* Booking modal */
.ov{position:fixed;inset:0;background:rgba(26,19,15,.42);display:grid;place-items:center;z-index:50;padding:24px;}
.sheet{width:640px;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow-lg);padding:22px;}
.sheet.sheet-narrow{width:380px;}
.sheet h3{font-size:18px;font-weight:800;color:var(--head);letter-spacing:-.01em;}
.sheet p{font-size:13px;color:var(--muted);margin:4px 0 16px;line-height:1.5;}
.sheet-x{float:right;border:none;background:none;cursor:pointer;color:var(--muted-2);font-size:16px;line-height:1;}

.ai-panel{width:316px;flex-shrink:0;border-left:1px solid var(--border-soft);background:var(--surface);overflow-y:auto;padding:20px 20px 28px;}
.ai-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink);margin-bottom:14px;}
.dot{width:7px;height:7px;border-radius:99px;background:var(--acc);flex-shrink:0;}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-soft);}
.kv .k{font-size:13px;color:var(--muted);}
.kv .v{font-size:13.5px;color:var(--ink);font-weight:600;text-align:right;}
.summary{font-size:13.5px;color:var(--ink);line-height:1.55;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:12px;padding:13px 14px;margin:16px 0;}
.next{border:1px solid var(--acc-soft);background:var(--acc-soft);border-radius:14px;padding:14px;}
.next .lab{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-ink);}
.next .act{font-family:var(--font);font-size:15px;font-weight:800;color:var(--ink);margin:5px 0 11px;}
@media(max-width:870px){.ai-panel{display:none;}}

/* ---------- Calendar (matches prototype) ---------- */
.head .gcal{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--success);background:color-mix(in srgb,var(--success) 14%,var(--surface));padding:6px 12px;border-radius:99px;}

/* Provisional bookings banner — yellow/warning surface so it doesn't read like an error.
   Sits above the calendar grid; one row per held slot with confirm + cancel buttons.
   Width matches .week (880px max, centered) so it doesn't sprawl across the page. */
.prov-banner{max-width:880px;margin:14px auto 0;background:color-mix(in srgb,var(--warning) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warning) 35%,var(--surface));border-radius:14px;padding:14px 16px;}
.prov-banner-head{display:flex;align-items:center;gap:10px;color:var(--warning);font-size:13.5px;margin-bottom:10px;}
.prov-banner-head i{font-size:18px;}
.prov-banner-head strong{color:var(--ink);font-weight:700;}
.prov-banner-sub{color:var(--muted);font-weight:500;}
.prov-banner-rows{display:flex;flex-direction:column;gap:8px;}
.prov-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.prov-row-info{flex:1;min-width:0;}
.prov-row-name{font-size:14px;font-weight:600;color:var(--ink);}
.prov-row-when{font-size:12.5px;color:var(--muted);margin-top:2px;}
@media (max-width:540px){.prov-banner{margin-left:12px;margin-right:12px;} .prov-row{flex-wrap:wrap;} .prov-row-info{flex:1 1 100%;margin-bottom:6px;}}
.week{padding:6px 32px 60px;max-width:880px;margin:0 auto;width:100%;}
.day{margin-top:22px;}
.day-h{display:flex;align-items:baseline;gap:9px;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border-soft);}
.day-h .dn{font-family:var(--font);font-size:15px;font-weight:800;color:var(--head);letter-spacing:-.01em;}
.day-h .dd{font-size:12.5px;color:var(--muted-2);font-weight:600;}
.day-h .cnt{margin-left:auto;font-size:12px;color:var(--muted-2);font-weight:600;}
.ev{display:flex;align-items:center;gap:10px;padding:12px 15px;background:var(--surface);border:1px solid var(--border);border-radius:13px;margin-bottom:8px;}
.ev .t{flex-shrink:0;font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:2px;}
.ev .bar-i{width:3px;align-self:stretch;border-radius:2px;background:var(--success);flex-shrink:0;}
.ev .info{flex:1;min-width:0;}
.ev .ti{font-size:14px;font-weight:600;color:var(--ink);}
.ev .mt{font-size:12.5px;color:var(--muted);margin-top:1px;}
.ev .ch{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;}
.ev .ch i{font-size:18px;}
.cal-chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;flex-shrink:0;}
.c-ok{background:color-mix(in srgb,var(--success) 14%,var(--surface));color:var(--success);}
.c-new{background:var(--acc-soft);color:var(--acc-ink);}
.c-done{background:var(--surface-2);color:var(--muted-2);}
a.cal-chip{text-decoration:none;}
/* Past appointments are visually muted but we don't use `opacity` because it'd cascade
   into the contact-link dropdown menu and make it look greyed out. Target the row's own
   text + icon tile instead so popups stay fully opaque. */
.ev-past{background:color-mix(in srgb,var(--surface) 70%,var(--bg));}
.ev-past .ti,.ev-past .t,.ev-past .mt{color:var(--muted-2);}
.ev-past .ch{opacity:.55;}

/* Contact-match pills on calendar rows. Linked = soft green pill, Suggested = dashed
   accent pill. Both small, vertically centered with the row's "60 min" text. */
.ev-match{display:inline-flex;align-items:center;gap:5px;font-family:var(--body);font-size:11.5px;font-weight:700;line-height:1;padding:4px 10px 4px 8px;border-radius:99px;vertical-align:middle;white-space:nowrap;}
.ev-match i{font-size:13px;flex-shrink:0;}
.ev-match-linked{background:color-mix(in srgb,var(--success) 15%,var(--surface));color:var(--success);border:1px solid color-mix(in srgb,var(--success) 28%,transparent);}
.ev-match-suggest{background:var(--acc-soft);color:var(--acc-ink);border:1px dashed color-mix(in srgb,var(--acc) 55%,transparent);cursor:pointer;transition:all .12s;}
.ev-match-suggest:hover:not(:disabled){background:var(--acc);color:#fff;border-color:var(--acc);border-style:solid;}
.ev-match-suggest:disabled{opacity:.55;cursor:wait;}
.ev-match-suggest-open .ev-link-caret{transform:rotate(180deg);}

/* Contact link dropdown — sits between the event info and the status chip. The row gets
   a lifted z-index when its dropdown is open so the menu floats above the row below. */
.ev{position:relative;z-index:1;}
.ev-open{z-index:9999;}
.ev-link{position:relative;flex-shrink:0;}
.ev-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 9px;border-radius:99px;font-family:var(--body);font-size:12.5px;font-weight:600;background:var(--surface);border:1px dashed var(--border-strong);color:var(--muted);cursor:pointer;transition:all .12s;max-width:200px;}
.ev-link-btn:hover{border-color:var(--ink);color:var(--ink);}
.ev-link-btn-set{border-style:solid;background:color-mix(in srgb,var(--success) 12%,var(--surface));border-color:color-mix(in srgb,var(--success) 30%,transparent);color:var(--success);}
.ev-link-btn-set:hover{border-color:var(--success);color:var(--success);}
.ev-link-btn i:first-child{font-size:14px;}
.ev-link-caret{font-size:11px;opacity:.7;margin-left:2px;}
.ev-link-btn-open .ev-link-caret{transform:rotate(180deg);}
.ev-link-menu{position:absolute;top:calc(100% + 6px);right:0;width:300px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);z-index:200;padding:8px;}
.ev-link-menu-header{font-family:var(--font);font-size:13px;font-weight:800;color:var(--head);padding:8px 10px 4px;letter-spacing:-.005em;}
.ev-link-menu-sub{font-size:11.5px;color:var(--muted-2);padding:0 10px 10px;font-weight:500;line-height:1.45;}
.ev-link-search{display:flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--border-soft);border-radius:8px;background:var(--surface-2);}
.ev-link-search i{color:var(--muted-2);font-size:13px;}
.ev-link-search input{flex:1;border:none;background:none;outline:none;font-family:var(--body);font-size:13px;color:var(--ink);padding:6px 0;}
.ev-link-results{margin-top:6px;max-height:200px;overflow-y:auto;}
.ev-link-item{display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:7px 10px;border-radius:7px;font-family:var(--body);transition:background .1s;}
.ev-link-item:hover{background:var(--surface-2);}
.ev-link-item-on{background:color-mix(in srgb,var(--success) 12%,var(--surface));}
.ev-link-item-name{font-size:13.5px;font-weight:600;color:var(--ink);}
.ev-link-item-sub{font-size:11.5px;color:var(--muted-2);margin-top:1px;}
.ev-link-empty{padding:10px;text-align:center;font-size:12px;color:var(--muted-2);}
.ev-link-add{display:flex;align-items:center;gap:6px;width:100%;margin-top:4px;padding:8px 10px;background:none;border:none;border-top:1px solid var(--border-soft);cursor:pointer;font-family:var(--body);font-size:13px;font-weight:600;color:var(--acc-ink);text-align:left;}
.ev-link-add:hover{background:var(--acc-soft);}
.ev-link-add-hint{font-weight:500;color:var(--muted);font-size:12px;}
.ev-link-add-form{padding:8px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border-soft);margin-top:4px;}
.ev-link-add-form input{padding:8px 10px;border:1px solid var(--border-soft);border-radius:7px;font-family:var(--body);font-size:13px;background:var(--surface-2);outline:none;}
.ev-link-add-form input:focus{border-color:var(--ink);}

/* Tiny dark tooltip — appears above its trigger, points down with a 6px arrow. */
.tt{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--ink);color:var(--bg);font-family:var(--body);font-size:11.5px;font-weight:600;padding:6px 10px;border-radius:7px;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:400;line-height:1.3;}
.tt::after{content:"";position:absolute;top:100%;right:12px;width:0;height:0;border:6px solid transparent;border-top-color:var(--ink);border-bottom:0;}

/* ---------- Insights (matches prototype) ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 16px;}
.kpi .n{font-family:var(--font);font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--head);line-height:1;}
.kpi .l{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:8px;display:flex;align-items:center;gap:7px;}
.kpi .l .dot{width:7px;height:7px;border-radius:99px;flex-shrink:0;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px 18px;margin-top:6px;}
.funnel-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--border-soft);}
.funnel-row:last-child{border-bottom:none;}
.funnel-row .fch{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;}
.funnel-row .fch i{font-size:15px;}
.funnel-row .cn{width:88px;font-size:13.5px;font-weight:600;color:var(--ink);flex-shrink:0;}
.fnl-bar{flex:1;height:24px;background:var(--surface-3);border-radius:7px;overflow:hidden;position:relative;}
.fnl-bar .fill{height:100%;border-radius:7px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:12px;font-weight:700;}
.funnel-row .conv{width:96px;text-align:right;font-size:13px;color:var(--muted);font-weight:600;flex-shrink:0;}
.funnel-row .conv b{color:var(--ink);}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.stat-big{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:17px 18px;}
.stat-big .n{font-family:var(--font);font-size:24px;font-weight:800;color:var(--head);letter-spacing:-.02em;}
.stat-big .l{font-size:13px;color:var(--muted);margin-top:4px;}
.stat-big.warn .n{color:var(--acc-ink);}
.ai-card{background:var(--acc-soft);border:1px solid color-mix(in srgb,var(--acc) 35%,var(--acc-soft));border-radius:16px;padding:18px 20px;display:flex;gap:14px;}
.ai-card .ai-badge{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:var(--acc);display:grid;place-items:center;color:#fff;}
.ai-card .ai-badge i{font-size:16px;}
.ai-card .lab{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--acc-ink);}
.ai-card .tx{font-size:14px;color:var(--ink);line-height:1.55;margin-top:4px;}
.ai-card .tx b{color:var(--acc-ink);}

/* ---------- Contacts ---------- */
.wrap{padding:14px 32px 60px;max-width:880px;margin:0 auto;width:100%;}
.lbl{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin:22px 0 11px;line-height:1;}
.lbl.mt{margin-top:26px;}
.lbl .n{background:var(--ink);color:var(--bg);border-radius:99px;font-size:10.5px;font-weight:700;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:0;}
.ct{display:flex;align-items:center;gap:14px;padding:13px 16px;background:var(--surface);border:1px solid var(--border);border-radius:13px;margin-bottom:8px;color:inherit;cursor:pointer;transition:border-color .12s;}
.ct:hover{border-color:var(--border-strong);}
.ct .info{flex:1;min-width:0;}
.ct .nm{font-size:14.5px;font-weight:600;color:var(--ink);}
.ct .why{font-size:12.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ct .why.cold{color:var(--acc-ink);font-weight:600;}
/* Subtle meta line under the why — frees up the horizontal slot the old .calm pill took. */
.ct .ct-meta{font-size:11.5px;color:var(--muted-2);margin-top:2px;line-height:1.2;}

/* Single Contatta button — direct link to the contact detail page (/contact/:id). */
.ct-contact{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:var(--bg);border:none;cursor:pointer;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:9px;font-family:var(--body);text-decoration:none;transition:background .12s;flex-shrink:0;}
.ct-contact:hover{background:var(--ink-2);text-decoration:none;}
.ct-contact i{font-size:14px;}
.ct .info{display:block;text-decoration:none;color:inherit;}
.ct .info:hover{text-decoration:none;}

/* ---------- Contact detail page (/contact/:id) ---------- */
/* Initials avatar in the page header. */
.ch-initials{width:42px;height:42px;border-radius:11px;background:var(--surface-2);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:14.5px;letter-spacing:.02em;flex-shrink:0;}
.head .back{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 8px 6px 4px;border-radius:8px;margin-right:4px;}
.head .back:hover{background:var(--surface-2);color:var(--ink);}

/* Top summary card with quick contact facts. */
.ct-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:6px;}
.ct-card-row{display:flex;gap:32px;flex-wrap:wrap;}
.ct-card-cell .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);}
.ct-card-cell .v{font-size:14px;font-weight:600;color:var(--ink);margin-top:4px;}
.ct-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.ct-tags .tag{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface-2);padding:3px 9px;border-radius:99px;}

/* Section labels inside the detail page. */
.ct-section-lbl{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin:22px 0 10px;line-height:1;}
.ct-section-lbl i{font-size:14px;}
.ct-section-lbl .n{background:var(--ink);color:var(--bg);border-radius:99px;font-size:10.5px;font-weight:700;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;letter-spacing:0;}

/* Auto-followup banner. */
.ct-auto-banner{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;margin-top:14px;border:1px solid color-mix(in srgb,var(--acc) 35%,var(--acc-soft));background:var(--acc-soft);}
.ct-auto-banner>i{font-size:16px;color:var(--acc-ink);background:#fff;border-radius:8px;width:30px;height:30px;display:grid;place-items:center;flex-shrink:0;}
.ct-auto-title{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.2;}
.ct-auto-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.ct-auto-draft{background:var(--surface-2);border-color:var(--border);}
.ct-auto-draft>i{color:var(--muted);}

/* Follow-up rows in the unassigned list. */
.ct-fu-list{display:flex;flex-direction:column;gap:6px;}
.ct-fu{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);font-size:13px;}
.ct-fu>i{font-size:16px;color:var(--acc-ink);}
.ct-fu-kind{font-weight:700;color:var(--ink);}
.ct-fu-status{font-size:10.5px;color:var(--muted-2);font-weight:700;text-transform:uppercase;letter-spacing:.07em;}
.ct-fu-when{color:var(--muted);font-size:12px;}
.ct-fu-dismissed{opacity:.55;}
.ct-fu-sent>i{color:#3b8e64;}

/* Conversation thread card. */
.ct-thread{background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden;}
.ct-thread-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);color:inherit;text-decoration:none;transition:background .12s;}
.ct-thread-head:hover{background:var(--surface-2);text-decoration:none;}
.ct-thread-title{font-size:13.5px;font-weight:700;color:var(--ink);text-transform:capitalize;line-height:1.2;}
.ct-thread-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.ct-thread-head .status{font-size:11px;}
.ct-thread-open{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--muted-2);}
.ct-thread-open i{font-size:13px;}
.ct-msgs{padding:14px 14px;display:flex;flex-direction:column;gap:6px;background:var(--bg);}
.ct-msgs-empty{padding:22px 16px;font-size:13px;color:var(--muted);text-align:center;}

/* Stop bubbles from overflowing the thread card and force long words to wrap. */
.ct-msgs .msg{max-width:100%;}
.ct-msgs .bubble{max-width:78%;word-break:break-word;overflow-wrap:anywhere;}

/* Follow-up event tile in the timeline. */
.ct-fu-evt{display:flex;gap:9px;background:color-mix(in srgb,var(--acc) 8%,var(--surface));border:1px dashed color-mix(in srgb,var(--acc) 40%,transparent);border-radius:11px;padding:10px 12px;margin:4px auto;max-width:78%;}
.ct-fu-evt>i{font-size:15px;color:var(--acc-ink);flex-shrink:0;margin-top:1px;}
.ct-fu-evt-title{font-size:12.5px;color:var(--ink);line-height:1.4;}
.ct-fu-evt-title b{color:var(--acc-ink);font-weight:700;}
.ct-fu-evt-when{font-size:11.5px;color:var(--muted);margin-top:2px;}
.ct-fu-evt-draft{font-size:12.5px;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:8px;padding:7px 10px;margin-top:7px;line-height:1.45;}
.ct-fu-evt-sent{background:color-mix(in srgb,#3b8e64 8%,var(--surface));border-color:color-mix(in srgb,#3b8e64 35%,transparent);border-style:solid;}
.ct-fu-evt-sent>i{color:#3b8e64;}
.ct-fu-evt-dismissed{opacity:.55;border-style:solid;}
.ct-fu-evt-snoozed{background:var(--surface-2);border-color:var(--border);border-style:solid;}

/* AI-drafted outbound bubble — subtle accent so the operator knows AI sent it. */
.bubble-ai{border-color:color-mix(in srgb,var(--acc) 35%,var(--border));background:color-mix(in srgb,var(--acc) 6%,var(--surface));}

/* Empty state — no conversations yet. */
.ct-empty{background:var(--surface);border:1px dashed var(--border);border-radius:14px;padding:36px 24px;text-align:center;margin-top:14px;}
.ct-empty>i{font-size:32px;color:var(--muted-2);}
.ct-empty-head{font-size:15px;font-weight:700;color:var(--ink);margin-top:10px;}
.ct-empty-body{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5;max-width:380px;margin-left:auto;margin-right:auto;}
.ct-start{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px;}
.ct-start-btn{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;font-family:var(--body);transition:border-color .12s;}
.ct-start-btn:hover{border-color:var(--border-strong);}
/* Follow-up rows on contacts page — visually distinct from contact rows so due nudges stand out. */
.fu{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:13px;margin-bottom:8px;}
.fu.fu-overdue{border-color:var(--acc);background:var(--acc-soft);}
.fu.fu-blocked{border-color:var(--warning);background:color-mix(in srgb,var(--warning) 8%,var(--surface));}
.fu .fu-kind{width:32px;height:32px;border-radius:9px;background:var(--acc-soft);color:var(--acc-ink);display:grid;place-items:center;flex-shrink:0;}
.fu.fu-overdue .fu-kind{background:var(--acc);color:#fff;}
.fu.fu-blocked .fu-kind{background:var(--warning);color:#fff;}
.fu .fu-kind i{font-size:18px;}
.fu .info{flex:1;min-width:0;}
.fu .nm{font-size:14px;font-weight:700;color:var(--ink);}
.fu .why{font-size:12.5px;color:var(--muted);margin-top:1px;}
.fu .manage{background:none;border:none;cursor:pointer;color:var(--muted-2);font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:8px;}
.fu .manage:hover{background:var(--surface-2);color:var(--ink);}
.fu .act{background:var(--ink);color:var(--bg);border:none;cursor:pointer;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:8px;font-family:var(--body);}
.fu .act:hover{background:var(--ink-2);}
.no-margin{margin:0;}
/* Section label inside the feed-toolbar so it sits opposite the seg switcher. */
.feed-toolbar .lbl{margin:0;}
/* AI-panel follow-up widgets */
.fu-list{display:flex;flex-direction:column;gap:6px;margin:8px 0 10px;}
.fu-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;background:var(--surface);}
.fu-item i{font-size:16px;color:var(--acc-ink);}
.fu-info{flex:1;min-width:0;}
.fu-info .nm{font-size:12.5px;font-weight:700;color:var(--ink);}
.fu-info .dt{font-size:11.5px;color:var(--muted);}
.fu-x{background:none;border:none;cursor:pointer;color:var(--muted-2);font-size:13px;padding:4px 6px;border-radius:6px;}
.fu-x:hover{background:var(--surface-2);color:var(--ink);}
.fu-form{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.fu-form .input{font-size:13px;padding:9px 11px;}
.fu-form-bar{display:flex;gap:8px;justify-content:flex-end;}
.fu-banner{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;background:var(--acc-soft);border:1px solid var(--acc);border-radius:11px;color:var(--acc-ink);font-size:12.5px;line-height:1.4;margin:8px 0 12px;}
.fu-banner i{font-size:16px;flex-shrink:0;margin-top:1px;}
.fu-banner b{font-weight:700;display:block;}
.fu-banner-sub{font-size:12px;color:var(--acc-ink);opacity:.78;margin-top:2px;}
.fu-banner-muted{background:var(--surface-2);border-color:var(--border);color:var(--muted);}
.fu-banner-muted b, .fu-banner-muted .fu-banner-sub{color:var(--muted);}
.btn-disabled,.btn:disabled{opacity:.4;cursor:not-allowed;}

/* Campaign builder — channel-first flow matching the prototype design. */
.step{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);margin:0 0 22px;display:flex;align-items:center;gap:9px;}
.step .num{width:20px;height:20px;border-radius:99px;background:var(--ink);color:var(--bg);font-family:var(--font);font-size:11px;font-weight:800;display:grid;place-items:center;letter-spacing:0;}
.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:620px){.channels{grid-template-columns:1fr;}}
.chan{position:relative;background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:18px 16px;cursor:pointer;text-align:left;transition:border-color .14s,box-shadow .14s,transform .08s;font-family:var(--body);}
.chan:hover:not(:disabled){border-color:var(--border-strong);}
.chan:disabled{opacity:.5;cursor:not-allowed;}
.chan:active:not(:disabled){transform:scale(.99);}
.chan.sel{border-color:var(--ink);box-shadow:0 0 0 3px rgba(34,30,23,.10);}
.chan .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:13px;}
/* Skeleton avatars + lines for the campaign audience loader. Subtle shimmer so the user
   feels content is being fetched, not just frozen UI. */
.av.sk{background:linear-gradient(90deg,var(--surface-3) 0%,var(--surface-2) 50%,var(--surface-3) 100%);background-size:200% 100%;animation:cgSkShimmer 1.2s linear infinite;border-color:transparent;color:transparent;}
@keyframes cgSkShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
/* The channel-icon partial renders a .ch, not a .ico — target it directly so the brand
   tile breathes from the title below it instead of stacking flush. */
.chan .ch{margin-bottom:14px;}
.chan .cn{font-size:15.5px;font-weight:700;color:var(--ink);}
.chan .cc{font-size:13px;color:var(--muted);margin-top:5px;}
/* tick reads on both themes: in dark mode --ink resolves to a light value and --bg to
   a dark value, flipping the circle/glyph contrast automatically. Previously the glyph
   was hard-coded #fff which vanished against a light tick on dark backgrounds. */
.chan .tick{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:99px;background:var(--ink);display:none;place-items:center;color:var(--bg);font-size:13px;font-weight:800;}
.chan.sel .tick{display:grid;}
.reveal{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;pointer-events:none;}
.reveal.show{opacity:1;transform:none;pointer-events:auto;}
.gap{height:30px;}
.aud{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:20px 22px;}
.aud-row{display:flex;align-items:center;gap:16px;}
.av-stack{display:flex;flex-direction:row;flex-shrink:0;align-items:center;}
.av-stack > .av,
.av-stack > .more{width:38px;height:38px;border-radius:99px;display:grid;place-items:center;font-family:var(--font);font-weight:800;font-size:13px;color:#fff;border:2.5px solid var(--surface);margin-left:-11px;flex-shrink:0;box-sizing:border-box;}
.av-stack > .av:first-child,
.av-stack > .more:first-child{margin-left:0;}
.av-stack > .more{font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-3);}
.aud-text{flex:1;min-width:0;}
.aud .big{font-family:var(--font);font-size:20px;font-weight:800;color:var(--head);letter-spacing:-.01em;line-height:1.15;}
.aud .big b{color:var(--acc-ink);}
.aud .sub{font-size:13px;color:var(--muted);margin-top:4px;}
.refine{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap;}
.refine .chip{font-family:var(--body);font-size:13px;font-weight:600;padding:7px 14px;border-radius:99px;border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .12s;}
.refine .chip:hover{border-color:var(--ink);color:var(--ink);}
.refine .chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.msg-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 20px;width:100%;box-sizing:border-box;}
.msg-card .mhd{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.msg-card .ailab{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-ink);background:var(--acc-soft);padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;}
.msg-card textarea{width:100%;border:1px solid var(--border-strong);border-radius:12px;padding:14px 15px;font-family:var(--body);font-size:14.5px;line-height:1.55;color:var(--ink);background:var(--surface-2);resize:vertical;min-height:104px;outline:none;transition:border-color .15s;box-sizing:border-box;}
.msg-card textarea:focus{border-color:var(--ink);background:var(--surface);}
.msg-card .rewrite{margin-top:10px;background:none;border:none;color:var(--acc-ink);font-family:var(--body);font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 0;}
.msg-card .rewrite:hover{text-decoration:underline;}
.msg-card .rewrite:disabled{opacity:.5;cursor:wait;}
.sendbar{margin-top:24px;display:flex;flex-direction:column;align-items:stretch;gap:10px;}
.send{font-size:16px;padding:16px 22px;justify-content:center;width:100%;}
.sendbar .note{font-size:12.5px;color:var(--muted-2);line-height:1.45;text-align:center;}

/* Campaign list row — channel icon + title + stats + status badge. Mirrors .ct shape. */
.cmp-row{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:13px;margin-bottom:8px;color:inherit;text-decoration:none;transition:border-color .12s;}
.cmp-row:hover{border-color:var(--border-strong);text-decoration:none;color:inherit;}
.cmp-row .info{flex:1;min-width:0;}
.cmp-row .nm{font-size:14.5px;font-weight:700;color:var(--ink);}
.cmp-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;font-size:12.5px;color:var(--muted);font-weight:500;}
.cmp-stats span{display:inline-flex;align-items:center;gap:5px;}
.cmp-stats i{font-size:13px;color:var(--muted-2);}
.cmp-stats .cmp-when{margin-left:auto;color:var(--muted-2);}
.cmp-row > .cmp-when{font-size:12.5px;color:var(--muted-2);font-weight:500;flex-shrink:0;white-space:nowrap;align-self:center;}
.cmp-mini-bar{height:5px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin-top:9px;}
.cmp-mini-fill{height:100%;background:var(--acc);border-radius:99px;transition:width .4s ease;}

/* Campaign detail — message card showing what's being sent, and per-recipient row. */
.cmp-msg-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin:14px 0 6px;}
.cmp-msg-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.cmp-msg-head .ailab{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc-ink);background:var(--acc-soft);padding:4px 10px;border-radius:99px;display:inline-flex;align-items:center;gap:6px;}
.cmp-via{font-size:12.5px;color:var(--muted);font-weight:600;}
.cmp-msg-preview{white-space:pre-line;font-size:14.5px;line-height:1.55;color:var(--ink);background:var(--surface-2);border:1px solid var(--border-soft);border-radius:11px;padding:14px 16px;}
.cmp-msg-foot{margin-top:10px;font-size:12px;color:var(--muted-2);line-height:1.5;}
.cmp-msg-foot code{font-family:var(--mono);background:var(--surface-2);padding:1px 6px;border-radius:5px;font-size:11.5px;color:var(--ink);}
.cmp-send-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--surface);border:1px solid var(--border);border-radius:11px;margin-bottom:7px;}
.cmp-send-row .info{flex:1;min-width:0;}
.cmp-send-row .nm{font-size:13.5px;font-weight:600;color:var(--ink);}
.cmp-send-row .why{font-size:12.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmp-send-failed{border-color:color-mix(in srgb,var(--acc) 35%,var(--border));}

/* Campaign progress bar — shown on /campaigns/:id while a campaign is sending. */
.campaign-progress{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:8px;}
.cp-stats{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink);font-weight:600;}
.cp-stats .cp-eta{margin-left:auto;color:var(--muted);font-weight:500;}
.cp-bar{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;margin:10px 0 6px;}
.cp-fill{height:100%;background:var(--acc);transition:width .4s ease;}
.cp-pct{font-size:11.5px;color:var(--muted-2);font-weight:600;}
.meta{color:var(--muted-2);font-weight:500;font-size:13px;}
.av2{width:36px;height:36px;border-radius:50%;background:var(--surface-3);color:var(--ink);display:grid;place-items:center;font-weight:700;font-size:13px;flex-shrink:0;position:relative;}
.av2 .cdot{position:absolute;bottom:-2px;right:-2px;width:17px;height:17px;border-radius:50%;border:2px solid var(--surface);display:grid;place-items:center;}
.av2 .cdot i.ph-fill, .av2 .cdot i.ph{font-size:10px;color:#fff;line-height:1;}
.av2 .cdot.ch-whatsapp{background:#1FA855;color:#fff;}
.av2 .cdot.ch-instagram{background:#C026D3;color:#fff;}
.av2 .cdot.ch-facebook{background:#1877F2;color:#fff;}
.av2 .cdot.ch-email{background:#3B6FE0;color:#fff;}
.act{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;background:var(--ink-dark);color:#fff;font-family:var(--body);font-size:13px;font-weight:600;border:none;cursor:pointer;white-space:nowrap;flex-shrink:0;text-decoration:none;}
.act:hover{background:var(--ink-2);text-decoration:none;color:#fff;}
.act .aidot{width:6px;height:6px;border-radius:99px;background:var(--acc);}
.act i.ph{font-size:14px;line-height:1;}
.calm{font-size:12.5px;color:var(--muted-2);font-weight:600;white-space:nowrap;flex-shrink:0;}

/* ---------- Insights ---------- */
.grid-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;}
.stat .lab{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.stat .val{font-family:var(--font);font-size:30px;font-weight:800;color:var(--ink);margin-top:6px;}
.row-stat{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:6px;}
.row-stat .ch-lbl{font-weight:700;text-transform:capitalize;color:var(--ink);}

/* ---------- Postmark forwarding setup ---------- */
.alias-box{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}
.alias-box code{flex:1;font-family:var(--mono);font-size:13.5px;color:var(--ink);word-break:break-all;}
.hint-text{font-size:13.5px;color:var(--muted);line-height:1.55;margin:6px 0 0;}
.wrap .hint-text + form{margin-top:16px;}
.provider-hints{margin:8px 0 0;padding-left:22px;font-size:13.5px;color:var(--muted);line-height:1.7;}
.provider-hints b{color:var(--ink);font-weight:600;}

/* ---------- Email provider picker ---------- */
.provider-grid{display:flex;flex-direction:column;gap:10px;}
.provider-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;text-decoration:none;color:inherit;transition:border-color .12s;}
.provider-card:hover{border-color:var(--border-strong);text-decoration:none;}
.provider-card .info{flex:1;min-width:0;}
.provider-card .nm{font-size:15px;font-weight:700;color:var(--ink);}
.provider-card .ds{font-size:13px;color:var(--muted);margin-top:2px;}
.provider-card > i{color:var(--muted-2);font-size:18px;}

/* ---------- Settings — channel connections ---------- */
.chan-row{display:flex;align-items:center;gap:14px;padding:15px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:10px;}
.tile{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;}
.tile-whatsapp{background:color-mix(in srgb,#1FA855 18%,var(--surface));color:#1FA855;}
.tile-instagram{background:color-mix(in srgb,#C026D3 18%,var(--surface));color:#C026D3;}
.tile-facebook{background:color-mix(in srgb,#1877F2 18%,var(--surface));color:#1877F2;}
.tile-email{background:color-mix(in srgb,#3B6FE0 18%,var(--surface));color:#3B6FE0;}
.tile-google_calendar{background:color-mix(in srgb,#16A34A 18%,var(--surface));color:#16A34A;}
.tile-brand{background:var(--surface);border:1px solid var(--border);}
.tile-brand svg{display:block;}
.chan-row .info{flex:1;min-width:0;}
.chan-row .nm{font-size:15px;font-weight:700;color:var(--ink);}
.chan-row .ds{font-size:13px;color:var(--muted);margin-top:1px;}
.chan-row .req{font-size:12px;color:var(--muted-2);margin-top:4px;font-style:italic;}
.connected{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--success);background:color-mix(in srgb,var(--success) 14%,var(--surface));padding:6px 12px;border-radius:99px;}
.manage{font-size:13px;font-weight:600;color:var(--muted);padding:8px 10px;border-radius:8px;background:none;border:none;cursor:pointer;font-family:inherit;}
.manage:hover{background:var(--surface-2);color:var(--ink);}
.row-r{display:flex;align-items:center;gap:8px;flex-shrink:0;}

.auto{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:10px;}
.auto .info{flex:1;}
.auto .nm{font-size:15px;font-weight:700;color:var(--ink);}
.auto .ds{font-size:13px;color:var(--muted);margin-top:2px;max-width:420px;line-height:1.5;}
/* Custom dropdown — Alpine-driven so the open menu is fully styled (the native <select>
   options can't be themed cross-browser). Mirrors the calendar "Link contact" dropdown
   pattern (.ev-link-menu / .ev-link-item) for visual consistency. */
.cg-select{position:relative;display:inline-block;}
.cg-select-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px 9px 16px;border-radius:10px;
  font-family:var(--body);font-size:13.5px;font-weight:600;
  background:var(--surface);border:1px solid var(--border-strong);color:var(--ink);
  cursor:pointer;transition:border-color .12s, box-shadow .12s;
  min-width:130px;
}
.cg-select-btn:hover{border-color:var(--ink);}
.cg-select-btn.open{border-color:var(--ink);box-shadow:var(--focus);}
.cg-select-caret{font-size:14px;color:var(--muted-2);transition:transform .15s;margin-left:auto;}
.cg-select-btn.open .cg-select-caret{transform:rotate(180deg);color:var(--ink);}
.cg-select-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  min-width:170px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-lg);z-index:200;padding:6px;
}
.cg-select-item{
  display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:8px 12px;border-radius:7px;font-family:var(--body);font-size:13.5px;
  color:var(--ink);transition:background .1s;font-weight:500;
}
.cg-select-item:hover{background:var(--surface-2);}
.cg-select-item.on{background:color-mix(in srgb,var(--ink) 8%,var(--surface));font-weight:700;}
.toggle{width:46px;height:27px;border-radius:99px;background:var(--ink);position:relative;cursor:pointer;border:none;flex-shrink:0;transition:background .15s;}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:var(--bg);transition:left .18s;}
.toggle.off{background:var(--border-strong);}
.toggle.off::after{left:3px;}
.toggle:not(.off)::after{left:22px;}
:root[data-theme="dark"] .toggle:not(.off){background:var(--acc);}

/* ---------- Legal / public pages ---------- */
.legal-wrap{max-width:720px;margin:60px auto;padding:0 32px 60px;color:var(--ink);}
.legal-wrap h1{font-size:34px;letter-spacing:-.02em;color:var(--head);margin-bottom:8px;}
.legal-wrap h2{font-size:18px;color:var(--head);margin:32px 0 10px;font-weight:800;}
.legal-wrap p, .legal-wrap li{font-size:15px;color:var(--ink);line-height:1.6;}
.legal-wrap ul, .legal-wrap ol{padding-left:22px;}
.legal-wrap li{margin-bottom:6px;}
.legal-wrap .lede{color:var(--muted);font-size:13px;margin-bottom:30px;}
.legal-wrap a{color:var(--acc-ink);}

/* ---------- Login ---------- */
.stage{
  min-height:100vh; display:grid; place-items:center; padding:28px;
  background:
    radial-gradient(640px 440px at 84% -8%, rgba(250,103,129,.13), transparent 60%),
    radial-gradient(600px 460px at 8% 14%, rgba(250,103,129,.07), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.auth{width:100%;max-width:384px;}
.brand{text-align:center;margin-bottom:24px;}
.brand .wm{font-size:34px;}
.auth h1{font-size:25px;text-align:center;letter-spacing:-.025em;color:var(--head);}
.auth .lede{font-size:14.5px;color:var(--muted);text-align:center;margin:9px 0 24px;line-height:1.5;}
.stack{display:flex;flex-direction:column;gap:10px;}
.login-foot{margin-top:22px;font-size:12.5px;color:var(--muted-2);text-align:center;line-height:1.6;}
.err{color:var(--danger);font-size:13px;margin-top:8px;text-align:center;}

/* dark-mode pill text contrast tweaks */
:root[data-theme="dark"] .status-replied,
:root[data-theme="dark"] .status-qualified{color:#7FA8FF;}
:root[data-theme="dark"] .status-slot_proposed{color:#E0B470;}

/* ====================================================================
   Mobile responsive layer
   --------------------------------------------------------------------
   Clinic owners triage from their phones — the desktop two-column shell
   doesn't work below tablet width. Strategy:
     - <960px : narrow sidebar to icon-only column (labels hidden, badges hidden)
     - <680px : sidebar becomes a horizontal bottom-bar; main is full-width
     - <540px : tighten everything (head padding, settings rows stack, etc.)
   ====================================================================*/
@media (max-width: 960px) {
  .side{width:64px;padding:14px 8px;}
  .side .nav a,
  .side .foot-link{justify-content:center;padding:10px 6px;gap:0;}
  .side .nav a span,
  .side .foot-link span,
  .side .nav a .badge,
  .side .acct .who,
  .side .acct .logout-btn,
  .side .wm .g,
  .side .brand-row .theme-mount{display:none;}
  /* Stub the wordmark down to "C" so the brand cue stays visible at narrow widths. */
  .side .wm{font-size:0;padding:4px 0 14px;text-align:center;}
  .side .wm::before{content:"S";font-size:22px;color:inherit;font-weight:900;font-family:var(--font);}
  .side .acct{justify-content:center;padding:8px 0;}
  .side .acct .av{margin:0;}
  .nav a.on::before{display:none;}
  .head{padding:14px 18px 10px;}
  .wrap{padding:12px 16px 60px;}
}
@media (max-width: 680px) {
  .app{flex-direction:column;}
  .side{
    width:100%;height:auto;position:fixed;bottom:0;left:0;right:0;top:auto;
    flex-direction:row;align-items:center;justify-content:space-around;
    padding:6px 6px env(safe-area-inset-bottom);
    border-right:none;border-top:1px solid var(--border);z-index:10;
  }
  .side .brand-row,
  .side .acct,
  .side .foot{display:none;}
  .side .nav{flex-direction:row;flex:1;gap:0;justify-content:space-around;}
  .side .nav a{flex:1;justify-content:center;padding:8px 4px;}
  .main{padding-bottom:64px;} /* clear the fixed bottom-bar */
  /* Status chip + back-button often wrap awkwardly in detail head — let them stack. */
  .ihead{flex-wrap:wrap;}
}
@media (max-width: 540px) {
  .head{padding:12px 14px 8px;gap:8px;}
  .head h1{font-size:22px;}
  .head .count{display:none;} /* secondary sub-line eats two rows on small phones */
  .wrap{padding:10px 12px 60px;}
  /* Settings: each row stacks the action under the channel info so labels don't truncate. */
  .chan-row{flex-wrap:wrap;}
  .chan-row .row-r{width:100%;justify-content:flex-end;}
  /* Language pills + cadence dropdown wrap onto a new line under the description. */
  .auto{flex-wrap:wrap;}
  .auto .info{flex:1 1 100%;margin-bottom:8px;}
  /* Inquiry row in the inbox: drop secondary metadata to keep the title readable. */
  .iq .time{display:none;}
}