/* 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;}
/* margin, not padding — padding shifts the gradient span and sparkle anchors off the
   glyphs (same trap as the website demo logo). 25px matches the site nav exactly. */
.side .wm{font-size:25px;margin:6px 10px 18px;}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-right:6px;}
.brand-row .wm{margin-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,.nav a.on i{color:var(--acc);}
.nav a.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--acc);}
.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(--acc);color:#fff;display:grid;place-items:center;}
.nav .badge.acc{background:var(--acc-soft);color:var(--acc);}
.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{position:relative;}
.foot-link.on{background:var(--surface-2);color:var(--ink);font-weight:600;}
.foot-link.on svg,.foot-link.on i{color:var(--acc);}
.foot-link.on::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--acc);}
.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(--blue);color:#fff;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;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.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);}
.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);}
.status-replied,.status-qualified{background:var(--blue-soft);color:var(--blue-ink);}
/* waiting states wear the gradient's lilac midpoint — the third pastel family */
.status-slot_proposed{background:color-mix(in srgb,#BFA3F8 24%,var(--surface));color:#7C5CD6;}
.status-booked{background:color-mix(in srgb,var(--success) 16%,var(--surface));color:var(--success);}
.status-followup{background:var(--acc-soft);color:var(--acc);}
.status-lost{background:var(--surface-3);color:var(--muted);}
.status-no_show{background:color-mix(in srgb,var(--danger) 11%,var(--surface));color:var(--danger);}
/* 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,.ch-google{background:color-mix(in srgb,#EA4335 18%,var(--surface));color:#EA4335;}
.ch-telegram{background:color-mix(in srgb,#229ED9 18%,var(--surface));color:#229ED9;}
.ch-brand.ch-telegram{background:#229ED9;color:#fff;}
.ch-sms{background:color-mix(in srgb,#0F766E 18%,var(--surface));color:#0F766E;}
.ch-brand.ch-sms{background:#0F766E;color:#fff;}
.ch-stripe{background:color-mix(in srgb,#635BFF 18%,var(--surface));color:#635BFF;}
.ch-brand.ch-stripe{background:#635BFF;color:#fff;}

/* Workspace duo — two full-size channel tiles sitting side by side (mail + calendar).
   Used on the settings Channels list for Google Workspace / Outlook Workspace rows. */
.ch-duo{display:inline-flex;gap:6px;flex-shrink:0;}
.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-outlook_calendar{background:color-mix(in srgb,#0078D4 18%,var(--surface));color:#0078D4;}
.ch-brand.ch-outlook_calendar{background:#0078D4;color:#fff;}

/* Connect screen template — centred card + numbered steps + trust note. Originated on
   the WhatsApp QR page and shared by every /connect/* surface (Phone & SMS, etc.).
   Promoted here from connect-whatsapp.ejs's inline styles so all connect pages match. */
.connect-shell{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px 64px;min-height:calc(100vh - 16px);}
.connect-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:36px 36px 30px;width:100%;max-width:520px;box-shadow:0 6px 24px rgba(0,0,0,0.04);}
.connect-head{text-align:center;margin-bottom:22px;}
.connect-head h1{font-family:var(--font);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--head);margin:0 0 6px;}
.connect-head p{color:var(--muted);font-size:14px;line-height:1.55;margin:0 auto;max-width:380px;}
.connect-glyph{display:flex;justify-content:center;margin:0 auto 14px;}
.connect-glyph .ch{box-shadow:0 6px 18px rgba(0,0,0,.08);}
.connect-qr-wrap{display:flex;justify-content:center;margin:6px 0 22px;}
.connect-qr{width:240px;height:240px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:14px;display:flex;align-items:center;justify-content:center;position:relative;}
.connect-qr #qr-canvas img,
.connect-qr #qr-canvas svg{width:200px;height:200px;display:block;}
.connect-state{text-align:center;}
.connect-state.ok{color:#179c4e;}
.connect-state.err{color:var(--acc);}
.connect-state i{font-size:46px;line-height:1;}
.connect-state .t{font-weight:700;font-size:15px;margin-top:8px;color:var(--head);}
.connect-state .d{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45;max-width:200px;}
.connect-state button{margin-top:14px;}
.connect-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.connect-steps li{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--ink);line-height:1.5;}
.connect-steps .n{flex:0 0 22px;width:22px;height:22px;border-radius:99px;background:var(--acc-soft);color:var(--acc);font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;}
/* Trust note - identical anatomy to the settings trust-banner: round green tile with
   halo, bold title, muted body. The title is injected via ::before (shared markup has
   no heading element). */
.connect-trust{display:flex;align-items:center;gap:16px;margin:16px auto 0;max-width:520px;width:100%;padding:18px 20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,0.02);color:var(--muted);font-size:13px;line-height:1.55;}
.connect-trust i{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:color-mix(in srgb,var(--success) 13%,var(--surface));color:var(--success);display:grid;place-items:center;font-size:19px;}
.connect-trust>div::before{content:"Your accounts stay yours";display:block;font-family:var(--font);font-size:15px;font-weight:800;color:var(--head);letter-spacing:-.01em;margin-bottom:3px;line-height:1.25;}
.connect-trust a{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

/* Trust banner — matches our existing .auto card aesthetic (surface + soft border +
   rounded corners) with a pink-pill shield icon, so it reads as part of the Salve
   visual language rather than a generic "info box". */
.trust-banner{
  display:flex;align-items:center;gap:16px;
  margin:0 0 22px;padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,0.02);
}
.trust-banner .med{
  width:44px;height:44px;border-radius:99px;
  background:color-mix(in srgb,var(--success) 14%,var(--surface));
  color:var(--success);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--success) 8%,transparent);
  display:grid;place-items:center;
  flex-shrink:0;
}
.trust-banner .med i{font-size:22px;line-height:1;}
.trust-banner .copy{flex:1;min-width:0;}
.trust-banner .nm{
  font-family:var(--font);font-size:15px;font-weight:800;color:var(--head);
  letter-spacing:-.01em;margin-bottom:3px;line-height:1.25;
}
.trust-banner .ds{
  font-size:13px;color:var(--muted);line-height:1.55;
}
.trust-banner .ds a{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.ch-pabau{background:color-mix(in srgb,#1565F2 18%,var(--surface));color:#1565F2;}
.ch-timely{background:color-mix(in srgb,#0A6E6A 18%,var(--surface));color:#0A6E6A;}
.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-pabau{background:transparent;}
.ch-brand.ch-timely{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);}
.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);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);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;
  transition:transform .12s ease,box-shadow .15s ease,border-color .12s ease;}
.iq:hover{border-color:var(--blue);box-shadow:var(--focus),var(--shadow-sm);transform:translateY(-1px);text-decoration:none;}
.iq:active{transform:translateY(0) scale(.995);box-shadow:var(--focus);}
/* Urgent rows — pink border like the attention cards in contacts, soft pink tint,
   the URGENT pill carries the label. */
.iq-urgent{background:color-mix(in srgb,var(--acc) 5%,var(--surface));border-color:var(--acc);}
.iq-urgent:hover{border-color:var(--acc);}
.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:var(--acc-soft);color:var(--acc);}
.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(--acc) 10%,var(--surface));border-color:color-mix(in srgb,var(--acc) 35%,var(--surface));}
.thread-booked-banner.provisional i{color:var(--acc);}
.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(--blue-pastel);border:1px solid color-mix(in srgb,var(--blue) 20%,var(--blue-pastel));border-top-right-radius:6px;color:var(--ink);}
/* dark: lift to --blue-soft so app bubbles match the website demo exactly */
:root[data-theme="dark"] .msg-out .bubble{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 25%,var(--blue-soft));}
.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);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(--blue) 25%,var(--border-soft));background:var(--blue-pastel);}
.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;}
/* content-sized: compact for a two-line draft, grows with longer ones, capped so it
   never swallows the thread. field-sizing is Chromium-native; elsewhere the rows
   attribute provides the floor. */
.composer-email textarea{min-height:88px;max-height:40vh;field-sizing:content;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(--blue);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);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 color-mix(in srgb,var(--acc) 30%,var(--surface));background:color-mix(in srgb,var(--acc) 7%,var(--surface));border-radius:12px;padding:13px 14px;margin-top:14px;}
.next .lab{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);}
.next .lab::before{content:"✦ ";}
.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);}
.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);}
.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(--blue-soft);color:var(--blue-ink);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(--blue);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(--blue);box-shadow:var(--focus);}
.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);margin-bottom:14px;}
/* the dot becomes the ✦ sparkle wherever Gloow is the one acting (muted section
   titles keep the plain dot) */
.ai-title .dot:not(.dot-muted){width:11px;height:11px;border-radius:0;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z"/></svg>') center/contain no-repeat;}
.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;}
/* the AI's TLDR of the thread — pink, like everything Gloow wrote. The ::before label
   says what this box IS, in the same voice as the other AI labels. */
.summary{font-size:13.5px;color:var(--ink);line-height:1.55;background:color-mix(in srgb,var(--acc) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--acc) 30%,var(--surface));border-radius:12px;padding:12px 14px 13px;margin:16px 0;}
.summary::before{content:"✦ Gloow summary";display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);margin-bottom:6px;}
.next{border:1px solid color-mix(in srgb,var(--acc) 30%,var(--surface));background:color-mix(in srgb,var(--acc) 7%,var(--surface));border-radius:12px;padding:13px 14px;}
.next .lab{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);}
.next .lab::before{content:"✦ ";}
.next .act{font-family:var(--font);font-size:15px;font-weight:800;color:var(--ink);margin:5px 0 11px;}
/* (responsive AI-panel behaviour lives in mobile.css: off-canvas drawer below 1100px) */

/* ---------- 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(--acc) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--acc) 35%,var(--surface));border-radius:14px;padding:14px 16px;}
.prov-banner-head{display:flex;align-items:center;gap:10px;color:var(--acc);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%;}
.cal-toolbar{max-width:880px;margin:14px auto 0;padding:0 32px;width:100%;}
.cal-tab-empty{padding:40px 0;text-align:center;color:var(--muted);font-size:14px;}
.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:4px;}
/* groups actions + chip; on desktop it dissolves so the flex row reads as before */
.ev-foot{display:contents;}
.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);}
.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);border:1px dashed color-mix(in srgb,var(--acc) 55%,transparent);cursor:pointer;transition:all .12s;}
.ev-match-suggest:hover:not(:disabled){background:var(--blue);color:#fff;border-color:var(--blue);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(--blue-pastel);}
.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);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(--blue);box-shadow:var(--focus);}

/* 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);}
.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);}
.ai-card .tx{font-size:14px;color:var(--ink);line-height:1.55;margin-top:4px;}
.ai-card .tx b{color:var(--acc);}

/* ---------- 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(--acc);color:#fff;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{transition:transform .12s ease,box-shadow .15s ease,border-color .12s ease;}
.ct:hover{border-color:var(--blue);box-shadow:var(--focus),var(--shadow-sm);transform:translateY(-1px);}
.ct:active{transform:translateY(0) scale(.995);box-shadow:var(--focus);}
.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);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(--blue);color:#fff;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(--blue-press);text-decoration:none;}
:root[data-theme="dark"] .ct-contact{color:#14121C;}
.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);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);}
.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;}

/* History mirrors the conversation view: same bubble envelope as the inquiry thread
   (74% cap on the message, content-fit bubble), email messages render as the same
   full-width cards. The old anywhere/break-word extras shrank bubbles to slivers. */
.ct-msgs .msg{max-width:74%;}
.ct-msgs .email-msg{margin:4px 0;}

/* 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);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);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 — pink is the AI's colour: anything Gloow wrote glows.
   .msg-out .bubble out-specifies a bare .bubble-ai, so the compound selector wins. */
.msg .bubble.bubble-ai,
.bubble.bubble-ai{background:color-mix(in srgb,var(--acc) 8%,var(--surface));
  border:1px solid color-mix(in srgb,var(--acc) 55%,var(--surface));color:var(--ink);
  box-shadow:0 0 18px -8px var(--acc);}

/* 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;
  transition:transform .12s ease,box-shadow .15s ease,border-color .12s ease;}
.fu:hover{box-shadow:var(--focus),var(--shadow-sm);transform:translateY(-1px);}
.fu.fu-overdue{border-color:var(--acc);background:var(--acc-soft);}
.fu.fu-blocked{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,var(--surface));}
.fu .fu-kind{width:32px;height:32px;border-radius:9px;background:var(--acc-soft);color:var(--acc);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(--acc);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(--blue);color:#fff;border:none;cursor:pointer;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:8px;font-family:var(--body);}
.fu .act:hover{background:var(--blue-press);}
.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);}
.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;}
/* THE standard Gloow card: 7% pink tint, 30% pink border, pink icon, ink title,
   muted body — same recipe as .summary. Every AI card in the rail uses it. */
.fu-banner{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:color-mix(in srgb,var(--acc) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--acc) 30%,var(--surface));border-radius:12px;color:var(--muted);font-size:12.5px;line-height:1.45;margin:8px 0 12px;}
/* same anatomy as summary/suggests: ✦ mono caps label, then readable ink body */
.fu-banner i{display:none;}
.fu-banner b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);margin-bottom:6px;}
.fu-banner b::before{content:"✦ ";}
.fu-banner-sub{font-size:13.5px;color:var(--ink);margin-top:0;line-height:1.55;}
.fu-banner-muted .fu-banner-sub{color:var(--ink);}
.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(25,22,41,.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);}
.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);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(--blue);box-shadow:var(--focus);background:var(--surface);}
.msg-card .rewrite{margin-top:10px;background:none;border:none;color:var(--acc);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);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;}
.av2 .cdot.ch-sms{background:#0F766E;color:#fff;}
.act{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;background:var(--blue);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(--blue-press);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);}
/* the star marks delegation-to-Gloow cards only: the ones with a toggle, plus the
   digest cadence (its control is the cg-select) */
.auto:has(.toggle) .nm::before,.auto:has(.cg-select) .nm::before{content:"✦ ";color:var(--acc);}
.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(--blue);}
.cg-select-btn.open{border-color:var(--blue);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(--blue-pastel);}
.cg-select-item.on{background:var(--blue-soft);color:var(--blue-ink);font-weight:700;}
.toggle{width:46px;height:27px;border-radius:99px;background:var(--acc);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);}

/* ---------- Login ---------- */
/* Login wordmark uses the shared brand mark from ds.css (the unread dot). */
.stage{
  min-height:100vh; display:grid; place-items:center; padding:28px;
  background:
    radial-gradient(640px 440px at 84% -8%, rgba(246,105,167,.13), transparent 60%),
    radial-gradient(600px 460px at 8% 14%, rgba(246,105,167,.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:10px;}
.brand .wm{font-size:34px;}
.auth h1{font-size:25px;text-align:center;letter-spacing:-.025em;color:var(--head);margin:6px 0 8px;}
.auth .lede{font-size:14.5px;color:var(--muted);text-align:center;margin:0 0 28px;line-height:1.5;}
.stack{display:flex;flex-direction:column;gap:10px;}
.login-foot{margin-top:14px;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:var(--blue-ink);}
:root[data-theme="dark"] .status-slot_proposed{color:#C9B5FA;}

/* The legacy responsive layer that used to live here (960px icon rail, 680px bottom
   bar, 540px tweaks) was REMOVED June 2026: it fought the newer mobile.css system at
   overlapping widths with higher-specificity rules (hidden labels, badges, theme
   toggle, logout, the whole .foot). ALL responsive behaviour now lives in mobile.css,
   one system, three regimes: full sidebar >1100, icon rail 701-1100, phone bar <=700. */

/* structural anchors that predate the global underline */
.wb-row{text-decoration:none;}
.wb-row:hover{text-decoration:none;}

/* buttons never underline, no matter what shape of anchor they are */
a[class*="btn"],a[class*="btn"]:hover,a[class*="btn"]:focus,.act,.act:hover,.slot,.ct-contact,.ct-contact:hover{text-decoration:none !important;}