/* ==========================================================================
   TM Sender design system
   Material Design 3 style token layers, cyan primary, Inter.
   Every colour is an HSL triplet so light and dark share one set of rules.
   ========================================================================== */
/* The Inter font is linked from the page head, not imported here: an
   @import makes the browser fetch it only after this file has arrived. */

:root{
  /* base */
  --background:40 30% 98.8%;
  --foreground:30 20% 12%;

  /* layered surfaces - higher number = more elevated */
  --surface:223 100% 98.8%;
  --surface-low:220 100% 97.1%;
  --surface-container:220 100% 95.7%;
  --surface-high:218 100% 94.5%;
  --surface-highest:218 98% 93.1%;

  --card:0 0% 100%;
  --card-foreground:30 20% 12%;

  /* brand */
  --primary:199 95% 52%;
  --primary-hover:199 95% 46%;
  --on-primary:0 0% 100%;
  --primary-container:210 100% 77%;
  --on-primary-container:199 80% 25%;

  --secondary:199 70% 40%;
  --accent:199 90% 90%;
  --accent-foreground:199 80% 25%;

  /* state */
  --success:152 60% 36%;
  --warning:32 90% 44%;
  --destructive:0 71% 41%;
  --on-destructive:0 0% 100%;
  --destructive-container:0 100% 95%;

  /* lines and text */
  --border:214 32% 91%;
  --input:214 32% 91%;
  --ring:199 95% 52%;
  --muted:40 20% 96.1%;
  --muted-foreground:35 12% 38%;

  --radius:.625rem;
  --radius-lg:1rem;
  --radius-xl:1.5rem;

  --shadow-sm:0 1px 2px hsl(215 25% 20% / .06), 0 1px 3px hsl(215 25% 20% / .08);
  --shadow-md:0 4px 12px hsl(215 25% 20% / .08), 0 2px 4px hsl(215 25% 20% / .04);
  --shadow-glow:0 0 0 1px hsl(var(--primary) / .18), 0 8px 28px hsl(var(--primary) / .22);

  --grad-brand:linear-gradient(135deg, #10affa, #0d8fd4 55%, #0b7ab8);
  --grad-sheen:linear-gradient(90deg, hsl(var(--primary)/0), hsl(var(--primary)/.5) 50%, hsl(var(--primary)/0));
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --background:213 28% 13%;
    --foreground:215 25% 96.7%;

    --surface:215 25% 11%;
    --surface-low:215 25% 13%;
    --surface-container:215 25% 15%;
    --surface-high:215 25% 18%;
    --surface-highest:215 25% 21%;

    --card:215 25% 15%;
    --card-foreground:215 25% 96.7%;

    --primary:199 90% 58%;
    --primary-hover:199 90% 66%;
    --on-primary:199 80% 10%;
    --primary-container:199 70% 35%;
    --on-primary-container:199 90% 90%;

    --secondary:199 60% 65%;
    --accent:199 70% 35%;
    --accent-foreground:0 0% 100%;

    --success:152 55% 52%;
    --warning:38 92% 58%;
    --destructive:0 72% 58%;
    --on-destructive:0 0% 100%;
    --destructive-container:0 45% 22%;

    --border:217 19% 27%;
    --input:217 19% 27%;
    --ring:199 90% 58%;
    --muted:215 25% 17%;
    --muted-foreground:215 20% 72%;

    --shadow-sm:0 1px 2px hsl(215 40% 3% / .5);
    --shadow-md:0 6px 20px hsl(215 40% 3% / .55);
    --shadow-glow:0 0 0 1px hsl(var(--primary) / .28), 0 10px 34px hsl(var(--primary) / .2);
  }
}

:root[data-theme="dark"]{
  --background:213 28% 13%; --foreground:215 25% 96.7%;
  --surface:215 25% 11%; --surface-low:215 25% 13%; --surface-container:215 25% 15%;
  --surface-high:215 25% 18%; --surface-highest:215 25% 21%;
  --card:215 25% 15%; --card-foreground:215 25% 96.7%;
  --primary:199 90% 58%; --primary-hover:199 90% 66%; --on-primary:199 80% 10%;
  --primary-container:199 70% 35%; --on-primary-container:199 90% 90%;
  --secondary:199 60% 65%; --accent:199 70% 35%; --accent-foreground:0 0% 100%;
  --success:152 55% 52%; --warning:38 92% 58%;
  --destructive:0 72% 58%; --destructive-container:0 45% 22%;
  --border:217 19% 27%; --input:217 19% 27%; --ring:199 90% 58%;
  --muted:215 25% 17%; --muted-foreground:215 20% 72%;
}

/* ---------------------------------------------------------------- base ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  font:15px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv02","cv03","cv04","cv11";
}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.018em;line-height:1.25}
::selection{background:hsl(var(--primary)/.25)}

:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------- layout ---- */
.shell{display:flex;min-height:100vh}

.sidebar{
  width:248px;flex:0 0 248px;
  background:hsl(var(--surface-low));
  border-right:1px solid hsl(var(--border));
  padding:20px 14px;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100vh;
}
.brand{
  display:flex;align-items:center;gap:10px;
  padding:6px 10px 20px;color:inherit;
}
.sidebar nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px}
.sidebar-foot{border-top:1px solid hsl(var(--border));padding-top:10px;margin-top:6px;display:flex;flex-direction:column;gap:3px}

.nav-item{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:var(--radius);
  color:hsl(var(--muted-foreground));font-weight:500;font-size:14px;
  transition:background .15s,color .15s;
}
.nav-item svg{width:17px;height:17px;flex:0 0 auto;opacity:.9}
.nav-item:hover{background:hsl(var(--surface-high));color:hsl(var(--foreground))}
.nav-item.is-active{
  background:hsl(var(--primary)/.12);
  color:hsl(var(--primary));
  font-weight:600;
}
.nav-item.is-active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:17px;border-radius:0 3px 3px 0;background:hsl(var(--primary));
}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:12px;padding:15px 24px;
  background:hsl(var(--surface)/.85);backdrop-filter:blur(10px);
  border-bottom:1px solid hsl(var(--border));position:sticky;top:0;z-index:5;
}
.topbar h1{font-size:17px;margin:0;font-weight:650;flex:1}
.topbar-right{display:flex;align-items:center;gap:10px}
.avatar{
  width:33px;height:33px;border-radius:50%;
  background:var(--grad-brand);color:#fff;
  display:grid;place-items:center;font-weight:650;font-size:14px;
  box-shadow:0 2px 8px hsl(var(--primary)/.35);
}
.burger{display:none;background:none;border:0;color:inherit;cursor:pointer;padding:4px}
.burger svg{width:22px;height:22px}
.content{padding:24px;flex:1;width:100%;min-width:0}

/* -------------------------------------------------------------- cards ---- */
.card{
  background:hsl(var(--card));
  border:1px solid hsl(var(--border));
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.card-pad{padding:20px}
.card h2{font-size:15px;margin:0 0 15px;font-weight:650;letter-spacing:-.01em}

.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.stat{position:relative;padding:18px 20px;overflow:hidden}
.stat::after{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad-sheen);opacity:.7;
}
.stat .label{
  color:hsl(var(--muted-foreground));font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
}
.stat .value{font-size:28px;font-weight:750;margin-top:7px;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.stat .sub{color:hsl(var(--muted-foreground));font-size:12.5px;margin-top:4px}

/* -------------------------------------------------------------- chips ---- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:9999px;
  font-size:12px;font-weight:600;line-height:1.5;
  background:hsl(var(--muted));border:1px solid hsl(var(--border));
  color:hsl(var(--muted-foreground));
}
.chip-ok{background:hsl(var(--success)/.14);color:hsl(var(--success));border-color:hsl(var(--success)/.28)}
.chip-warn{background:hsl(var(--warning)/.15);color:hsl(var(--warning));border-color:hsl(var(--warning)/.3)}
.chip-err{background:hsl(var(--destructive)/.13);color:hsl(var(--destructive));border-color:hsl(var(--destructive)/.28)}

/* ------------------------------------------------------------- tables ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid hsl(var(--border))}
th{
  color:hsl(var(--muted-foreground));font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;
  background:hsl(var(--surface-low));
}
thead th:first-child{border-top-left-radius:var(--radius)}
thead th:last-child{border-top-right-radius:var(--radius)}
tbody tr{transition:background .12s}
tbody tr:hover{background:hsl(var(--surface-low))}
tbody tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;border-radius:var(--radius)}

/* -------------------------------------------------------------- forms ---- */
label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
input,textarea,select{
  width:100%;padding:10px 13px;
  border:1px solid hsl(var(--input));border-radius:var(--radius);
  background:hsl(var(--surface));color:hsl(var(--foreground));
  font:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:hsl(var(--muted-foreground)/.7)}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:hsl(var(--primary));
  box-shadow:0 0 0 3px hsl(var(--primary)/.16);
}
input:disabled{opacity:.6;cursor:not-allowed}
textarea{resize:vertical;min-height:112px}
.field{margin-bottom:16px}
.hint{color:hsl(var(--muted-foreground));font-size:12.5px;margin-top:6px;line-height:1.5}
.hint code{
  background:hsl(var(--muted));padding:1px 5px;border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
}

/* ------------------------------------------------------------ buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:9999px;border:1px solid transparent;
  background:var(--grad-brand);color:#fff;
  font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  box-shadow:0 2px 10px hsl(var(--primary)/.3);
  transition:transform .12s,box-shadow .15s,filter .15s;
  white-space:nowrap;
}
.btn:hover{filter:brightness(1.07);box-shadow:0 4px 16px hsl(var(--primary)/.4);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none;filter:none}
.btn-ghost{
  background:hsl(var(--surface));border-color:hsl(var(--border));
  color:hsl(var(--foreground));box-shadow:none;
}
.btn-ghost:hover{background:hsl(var(--surface-high));filter:none;box-shadow:none}
.btn-danger{background:hsl(var(--destructive));box-shadow:0 2px 10px hsl(var(--destructive)/.3)}
.btn-danger:hover{box-shadow:0 4px 16px hsl(var(--destructive)/.4)}
.btn-sm{padding:7px 14px;font-size:13px}

/* ------------------------------------------------------------- alerts ---- */
.alert{
  margin:16px 24px 0;padding:12px 16px;
  border-radius:var(--radius);font-size:14px;font-weight:500;
  border:1px solid transparent;
}
.alert-ok{
  background:hsl(var(--success)/.12);color:hsl(var(--success));
  border-color:hsl(var(--success)/.25);
}
.alert-ok a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.alert-err{
  background:hsl(var(--destructive)/.11);color:hsl(var(--destructive));
  border-color:hsl(var(--destructive)/.25);
}

/* -------------------------------------------------------------- misc ----- */
.empty{text-align:center;padding:52px 24px;color:hsl(var(--muted-foreground))}
.empty h3{margin:0 0 7px;font-size:15.5px;color:hsl(var(--foreground));font-weight:650}

.bar{height:7px;border-radius:9999px;background:hsl(var(--muted));overflow:hidden}
.bar > span{display:block;height:100%;border-radius:9999px;background:var(--grad-brand);transition:width .4s ease}

.qr-box{display:grid;place-items:center;gap:14px;padding:22px;text-align:center}
.qr-box img{
  width:246px;height:246px;border-radius:var(--radius-lg);
  background:#fff;padding:12px;box-shadow:var(--shadow-glow);
}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.code{
  background:hsl(var(--surface-low));border:1px solid hsl(var(--border));
  border-radius:var(--radius);padding:14px 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  line-height:1.65;overflow-x:auto;white-space:pre;
}

/* --------------------------------------------------------- auth pages ---- */
.auth{
  min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(900px 420px at 50% -8%, hsl(var(--primary)/.16), transparent 70%),
    hsl(var(--background));
}
.auth-card{
  width:100%;max-width:412px;
  background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:34px;
}
.auth-card h1{font-size:21px;margin:0 0 5px;font-weight:700}
.auth-card p.sub{color:hsl(var(--muted-foreground));font-size:14px;margin:0 0 24px}
.auth-foot{text-align:center;margin-top:20px;font-size:13.5px;color:hsl(var(--muted-foreground))}
.auth-foot a{color:hsl(var(--primary));font-weight:600}

/* ----------------------------------------------------- public / marketing */
.pub-head .brand{padding:0}

.hero h1 .grad{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.price-card{display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.price-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.price-card .amount{font-size:31px;font-weight:750;margin:10px 0 2px;letter-spacing:-.025em}
.price-card ul{list-style:none;padding:0;margin:16px 0;flex:1;font-size:14px}
.price-card li{padding:6px 0;color:hsl(var(--muted-foreground));display:flex;gap:9px;align-items:flex-start}
.price-card li::before{content:"✓";color:hsl(var(--primary));font-weight:800;flex:0 0 auto}

/* --------------------------------------------------------- responsive ---- */
@media (max-width:880px){
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:20;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:var(--shadow-md);
  }
  .sidebar.is-open{transform:none}
  .burger{display:block}
  .content{padding:16px}
  .alert{margin:16px 16px 0}
  .topbar{padding:12px 16px}
  .card-pad{padding:16px}
  .grid[style*="240px"],.grid[style*="280px"]{grid-template-columns:1fr !important}
  .hero{padding:56px 16px 40px}
  .pub-wrap{padding:36px 16px}
  .pub-head{padding:12px 16px;gap:8px}
  .pub-head .btn-sm{padding:6px 11px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ------------------------------------------------------------- footer ---- */

/* -------------------------------------------------------- theme toggle --- */
.theme-btn{
  display:grid;place-items:center;
  width:34px;height:34px;flex:0 0 auto;
  border:1px solid hsl(var(--border));border-radius:9999px;
  background:hsl(var(--surface));color:hsl(var(--muted-foreground));
  cursor:pointer;transition:background .15s,color .15s;
}
.theme-btn:hover{background:hsl(var(--surface-high));color:hsl(var(--foreground))}
.theme-btn svg{width:16px;height:16px}
/* Each icon shows only in the theme where it makes sense to offer the swap. */
.theme-btn .i-sun{display:none}
:root[data-theme="dark"] .theme-btn .i-sun{display:block}
:root[data-theme="dark"] .theme-btn .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-btn .i-moon{display:none}
  :root[data-theme="light"] .theme-btn .i-sun{display:none}
  :root[data-theme="light"] .theme-btn .i-moon{display:block}
}

/* ==========================================================================
   Brand mark
   ========================================================================== */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo-mark{display:block;flex:0 0 auto}
.logo-word{font-weight:750;letter-spacing:-.025em;font-size:16.5px;white-space:nowrap}

/* ==========================================================================
   Auth - a brand wall beside the form
   ========================================================================== */

/* ---- left: brand ---------------------------------------------------------
   Deep navy into blue rather than a bright cyan: this is the first thing a
   business owner sees, and it has to read as a bank rather than a toy. */

/* A dot grid gives the panel a surface. Without it the gradient reads as flat
   paint at large sizes, which is what made the old panel feel unfinished. */
/* One warm highlight, off-centre, so the light has a direction. */


/* The mark stands on its own - no frosted plate, which only drew attention to
   itself and made the logo look like a button. */


/* Rows, not pills. Three identical translucent boxes read as placeholder UI;
   a hairline between rows says the same thing with far less noise. */




/* ---- form inside the auth card ---- */
.auth-card .field{margin-bottom:18px}
.auth-card label{font-size:13.5px; font-weight:600}

.auth-card .btn{
  width:100%; padding:13px 18px; font-size:15px; margin-top:10px; font-weight:650;
  border-radius:11px;
  box-shadow:0 6px 18px hsl(var(--primary)/.28);
  transition:transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.auth-card .btn:hover{transform:translateY(-1px); box-shadow:0 9px 24px hsl(var(--primary)/.34)}
.auth-card .btn:active{transform:translateY(0)}
.auth-card .btn.is-busy{transform:none; box-shadow:none}

/* input with a leading icon */
.input-icon{position:relative; display:block}
.input-icon > svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:hsl(var(--muted-foreground)); pointer-events:none;
  transition:color .15s;
}
.input-icon input{
  padding:13px 14px 13px 42px; font-size:15px; border-radius:11px;
  background:hsl(var(--surface-container));
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.input-icon input:focus{
  background:hsl(var(--card));
  box-shadow:0 0 0 3px hsl(var(--primary)/.14);
}
.input-icon:focus-within > svg{color:hsl(var(--primary))}
.input-icon .peek{
  position:absolute; right:7px; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; padding:7px; line-height:0;
  color:hsl(var(--muted-foreground)); border-radius:8px;
}
.input-icon .peek:hover{color:hsl(var(--foreground))}
.input-icon .peek svg{width:17px; height:17px}

/* "Forgot?" sits beside its label, not under it. */
.auth-card .label-row{display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:7px}
.auth-card .label-row label{margin:0}
.auth-card .label-row a{font-size:12.5px; font-weight:600; color:hsl(var(--primary))}

.auth-alt{
  text-align:center; margin-top:24px; padding-top:20px;
  border-top:1px solid hsl(var(--border));
  font-size:13.5px; color:hsl(var(--muted-foreground));
}
.auth-alt a{color:hsl(var(--primary)); font-weight:650}

/* ------------------------------------------------------- growth chart ---- */
.growth-chart{padding:4px 0 0}
.growth-bars{
  display:flex; align-items:flex-end; gap:10px;
  height:140px; padding:0 4px;
}
.growth-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%}
.growth-stack{
  flex:1; width:100%; max-width:34px; display:flex; flex-direction:column-reverse; gap:2px;
  align-items:stretch;
}
.growth-bar{
  width:100%; border-radius:3px; min-height:0;
  transition:height .3s ease;
}
.growth-label{font-size:11.5px; color:hsl(var(--muted-foreground)); font-weight:600}
.growth-legend{display:flex; gap:16px; margin-top:14px; padding-top:12px; border-top:1px solid hsl(var(--border))}
.growth-legend-item{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:hsl(var(--muted-foreground))}
.growth-dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto}

/* ------------------------------------------------------- type breakdown -- */
.type-bar-row{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.type-bar-row:last-child{margin-bottom:0}
.type-bar-label{width:120px; flex:0 0 auto; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.type-bar-track{display:block; flex:1; height:8px; border-radius:9999px; background:hsl(var(--muted)); overflow:hidden}
.type-bar-fill{display:block; height:100%; border-radius:9999px; background:hsl(var(--primary))}
.type-bar-count{width:34px; flex:0 0 auto; text-align:right; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}

/* --------------------------------------------------- impersonation bar --- */
.impersonate-bar{
  background:hsl(var(--warning)); color:#1a1200;
  padding:9px 22px; font-size:13.5px; font-weight:600;
  display:flex; gap:10px; align-items:center; justify-content:center;
}
.impersonate-bar a{color:inherit; text-decoration:underline; text-underline-offset:2px}
@media (max-width:640px){
  /* The email is not worth three wrapped lines on a phone - the name identifies
     the account well enough, and the way back has to stay visible. */
  .impersonate-bar{padding:8px 14px; font-size:12.5px}
  .impersonate-bar .imp-email{display:none}
}

/* --------------------------------------------------------- stat tiles ---- */
.tile-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px}
.stat-tile{
  background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:18px 20px; position:relative; overflow:hidden;
}
.stat-tile .tile-top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px}
.tile-icon{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto;
}
.tile-icon svg{width:19px; height:19px}
.tile-trend{
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:9999px;
  display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
}
.stat-tile .value{font-size:26px; font-weight:750; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.stat-tile .label{font-size:13px; color:hsl(var(--muted-foreground)); margin-top:4px; font-weight:500}

/* per-metric tints - distinct hues so the grid reads at a glance, not one accent repeated */
.tile-blue   .tile-icon{background:hsl(210 90% 96%); color:hsl(210 80% 46%)}
.tile-purple .tile-icon{background:hsl(262 80% 96%); color:hsl(262 60% 52%)}
.tile-amber  .tile-icon{background:hsl(38 92% 95%);  color:hsl(32 85% 45%)}
.tile-red    .tile-icon{background:hsl(0 85% 96%);   color:hsl(0 70% 50%)}
.tile-green  .tile-icon{background:hsl(152 60% 94%); color:hsl(152 55% 34%)}
.tile-indigo .tile-icon{background:hsl(231 80% 96%); color:hsl(231 55% 52%)}
.tile-teal   .tile-icon{background:hsl(174 65% 93%); color:hsl(174 55% 32%)}
.tile-orange .tile-icon{background:hsl(24 90% 95%);  color:hsl(20 80% 48%)}

.trend-ok{background:hsl(var(--success)/.14); color:hsl(var(--success))}
.trend-warn{background:hsl(var(--warning)/.15); color:hsl(var(--warning))}
.trend-err{background:hsl(var(--destructive)/.13); color:hsl(var(--destructive))}
.trend-flat{background:hsl(var(--muted)); color:hsl(var(--muted-foreground))}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tile-blue   .tile-icon{background:hsl(210 45% 20%); color:hsl(210 85% 72%)}
  :root:not([data-theme="light"]) .tile-purple .tile-icon{background:hsl(262 40% 22%); color:hsl(262 75% 78%)}
  :root:not([data-theme="light"]) .tile-amber  .tile-icon{background:hsl(38 45% 18%);  color:hsl(40 85% 68%)}
  :root:not([data-theme="light"]) .tile-red    .tile-icon{background:hsl(0 40% 20%);   color:hsl(0 80% 74%)}
  :root:not([data-theme="light"]) .tile-green  .tile-icon{background:hsl(152 35% 16%); color:hsl(152 55% 66%)}
  :root:not([data-theme="light"]) .tile-indigo .tile-icon{background:hsl(231 40% 22%); color:hsl(231 80% 78%)}
  :root:not([data-theme="light"]) .tile-teal   .tile-icon{background:hsl(174 35% 16%); color:hsl(174 55% 62%)}
  :root:not([data-theme="light"]) .tile-orange .tile-icon{background:hsl(24 45% 18%);  color:hsl(24 85% 68%)}
}
:root[data-theme="dark"] .tile-blue   .tile-icon{background:hsl(210 45% 20%); color:hsl(210 85% 72%)}
:root[data-theme="dark"] .tile-purple .tile-icon{background:hsl(262 40% 22%); color:hsl(262 75% 78%)}
:root[data-theme="dark"] .tile-amber  .tile-icon{background:hsl(38 45% 18%);  color:hsl(40 85% 68%)}
:root[data-theme="dark"] .tile-red    .tile-icon{background:hsl(0 40% 20%);   color:hsl(0 80% 74%)}
:root[data-theme="dark"] .tile-green  .tile-icon{background:hsl(152 35% 16%); color:hsl(152 55% 66%)}
:root[data-theme="dark"] .tile-indigo .tile-icon{background:hsl(231 40% 22%); color:hsl(231 80% 78%)}
:root[data-theme="dark"] .tile-teal   .tile-icon{background:hsl(174 35% 16%); color:hsl(174 55% 62%)}
:root[data-theme="dark"] .tile-orange .tile-icon{background:hsl(24 45% 18%);  color:hsl(24 85% 68%)}

/* -------------------------------------------------------- page greeting --- */
.dash-greet{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.dash-greet .who{display:flex; align-items:center; gap:14px}
.dash-greet .who-icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  background:var(--grad-brand); color:#fff; box-shadow:0 3px 10px hsl(var(--primary)/.35);
}
.dash-greet .who-icon svg{width:20px; height:20px}
.dash-greet h2{margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em}
.dash-greet p{margin:2px 0 0; font-size:13.5px; color:hsl(var(--muted-foreground))}

/* ------------------------------------------------------- quick actions --- */
.quick-actions{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}
.qa-btn{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:16px; border-radius:var(--radius-lg); border:1px solid hsl(var(--border));
  background:hsl(var(--card)); transition:border-color .15s,transform .15s,box-shadow .15s;
}
.qa-btn:hover{border-color:hsl(var(--primary)/.4); transform:translateY(-2px); box-shadow:var(--shadow-sm)}
.qa-icon{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:hsl(var(--primary)/.12); color:hsl(var(--primary));
}
.qa-icon svg{width:18px; height:18px}
.qa-btn span.qa-label{font-size:13.5px; font-weight:650}

/* ---------------------------------------------------- getting started ---- */
.checklist{display:flex; flex-direction:column; gap:2px}
.check-row{
  display:flex; align-items:center; gap:13px; padding:12px 6px;
  border-bottom:1px solid hsl(var(--border));
}
.check-row:last-child{border-bottom:0}
.check-dot{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  border:2px solid hsl(var(--border)); color:transparent;
}
.check-dot svg{width:13px; height:13px}
.check-row.is-done .check-dot{background:hsl(var(--success)); border-color:hsl(var(--success)); color:#fff}
.check-row.is-done .check-title{text-decoration:line-through; color:hsl(var(--muted-foreground))}
.check-body{flex:1; min-width:0}
.check-title{font-size:14px; font-weight:600}
.check-desc{font-size:12.5px; color:hsl(var(--muted-foreground)); margin-top:1px}
.checklist-progress{
  height:6px; border-radius:9999px; background:hsl(var(--muted)); overflow:hidden; margin-bottom:16px;
}
.checklist-progress > span{display:block; height:100%; background:var(--grad-brand); transition:width .4s ease}

/* ------------------------------------------------------- tile sparkline --- */
.tile-spark{display:flex; align-items:flex-end; gap:2px; height:22px; margin-top:10px}
.tile-spark i{flex:1; border-radius:2px 2px 0 0; background:currentColor; opacity:.28; min-height:2px}
.tile-spark i:last-child{opacity:.9}

/* ------------------------------------------------------- warm-up cards ---- */
.warmup-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.warmup-card{border:1px solid hsl(var(--border)); border-radius:var(--radius); padding:14px 16px}
.warmup-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.warmup-head strong{font-size:14px}
.warmup-day{font-size:11.5px; color:hsl(var(--muted-foreground)); font-weight:600}
.warmup-bar{height:7px; border-radius:9999px; background:hsl(var(--muted)); overflow:hidden; margin-bottom:8px}
.warmup-bar > span{display:block; height:100%; border-radius:9999px; background:var(--grad-brand)}
.warmup-foot{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:hsl(var(--muted-foreground))}
.health-dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px}

/* ---------------------------------------------------------- timeline ----- */
.timeline{display:flex; flex-direction:column}
.tl-row{display:flex; gap:12px; padding:11px 2px; border-bottom:1px solid hsl(var(--border))}
.tl-row:last-child{border-bottom:0}
.tl-icon{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center;
}
.tl-icon svg{width:15px; height:15px}
.tl-body{flex:1; min-width:0}
.tl-title{font-size:13.5px; font-weight:600}
.tl-title .mono{font-weight:500}
.tl-time{font-size:11.5px; color:hsl(var(--muted-foreground)); white-space:nowrap; flex:0 0 auto; padding-top:2px}

/* --------------------------------------------------- professional empty --- */
.empty-pro{text-align:center; padding:56px 24px}
.empty-pro .empty-icon{
  width:52px; height:52px; border-radius:14px; margin:0 auto 16px;
  background:hsl(var(--primary)/.1); color:hsl(var(--primary)); display:grid; place-items:center;
}
.empty-pro .empty-icon svg{width:24px; height:24px}
.empty-pro h3{margin:0 0 6px; font-size:15.5px; font-weight:650}
.empty-pro p{margin:0 0 16px; color:hsl(var(--muted-foreground)); font-size:13.5px; max-width:360px; margin-inline:auto}

/* ==========================================================================
   Dashboard v2 - hero metric, metric strip, two-column body
   ========================================================================== */
.dash-hero{display:grid; grid-template-columns:1.7fr 1fr; gap:16px; margin-bottom:16px}

.hero-card{
  position:relative; overflow:hidden; padding:22px 24px 0;
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
.hero-eyebrow{
  font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:hsl(var(--muted-foreground));
}
.hero-value{
  font-size:40px; font-weight:780; letter-spacing:-.03em; line-height:1.05;
  margin-top:6px; font-variant-numeric:tabular-nums;
}
.hero-meta{display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap}
.hero-meta .hint{margin:0}
.area-chart{
  display:block; width:100%; height:78px; margin-top:auto;
  color:hsl(var(--primary));
}

.ring-card{
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:20px; display:flex; align-items:center; gap:18px;
}
.ring-wrap{position:relative; width:112px; height:112px; flex:0 0 auto}
.ring{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:11; stroke-linecap:round}
.ring-track{stroke:hsl(var(--muted))}
.ring-fill{stroke:hsl(var(--primary)); transition:stroke-dasharray .5s ease}
.ring-centre{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px;
}
.ring-centre b{font-size:20px; font-weight:750; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.ring-centre span{font-size:10.5px; color:hsl(var(--muted-foreground)); font-weight:600}
.ring-info{min-width:0}
.ring-info h3{margin:0 0 4px; font-size:14px; font-weight:650}
.ring-info p{margin:0; font-size:12.5px; color:hsl(var(--muted-foreground)); line-height:1.5}

/* compact horizontal metric strip, replacing the big tile grid */
.metric-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  overflow:hidden; margin-bottom:16px;
}
.metric{padding:16px 18px; border-right:1px solid hsl(var(--border)); min-width:0}
.metric:last-child{border-right:0}
.metric-top{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.metric-top .dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto}
.metric-top span{
  font-size:11.5px; font-weight:650; color:hsl(var(--muted-foreground));
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.metric b{font-size:22px; font-weight:750; letter-spacing:-.02em; font-variant-numeric:tabular-nums; display:block}
.metric small{font-size:11.5px; color:hsl(var(--muted-foreground))}

.dash-body{display:grid; grid-template-columns:1.7fr 1fr; gap:16px; align-items:start}
.rail{display:flex; flex-direction:column; gap:16px}

/* compact quick actions for the side rail */
.qa-list{display:flex; flex-direction:column; gap:2px}
.qa-item{
  display:flex; align-items:center; gap:11px; padding:10px 8px; border-radius:var(--radius);
  font-size:13.5px; font-weight:600; transition:background .14s;
}
.qa-item:hover{background:hsl(var(--surface-low))}
.qa-item .qa-mini{
  width:30px; height:30px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center;
  background:hsl(var(--primary)/.12); color:hsl(var(--primary));
}
.qa-item .qa-mini svg{width:15px; height:15px}
.qa-item .chev{margin-left:auto; color:hsl(var(--muted-foreground)); font-size:15px}

@media (max-width:1000px){
  .dash-hero, .dash-body{grid-template-columns:1fr}
  .metric{border-right:0; border-bottom:1px solid hsl(var(--border))}
  .metric:last-child{border-bottom:0}
}

/* ==========================================================================
   Dashboard v3 - depth pass
   The page was white cards on a near-white ground, which read as flat. The
   ground drops a step, cards lift, and the headline metric becomes the one
   saturated surface on the page so the eye has somewhere to land first.
   ========================================================================== */
:root{
  --page-tint:220 30% 96%;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --page-tint:215 28% 9%; }
}
:root[data-theme="dark"]{ --page-tint:215 28% 9%; }

body{background:hsl(var(--page-tint))}
.main{background:hsl(var(--page-tint))}
.topbar{background:hsl(var(--card)/.92)}

/* cards lift off the deeper ground */
.card,
.metric-strip,
.hero-card,
.ring-card{box-shadow:0 1px 2px hsl(215 25% 20% / .04), 0 4px 14px hsl(215 25% 20% / .07)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .metric-strip,
  :root:not([data-theme="light"]) .ring-card{box-shadow:0 2px 10px hsl(215 40% 3% / .45)}
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .metric-strip,
:root[data-theme="dark"] .ring-card{box-shadow:0 2px 10px hsl(215 40% 3% / .45)}

/* ---- hero becomes the page's one saturated surface ---- */
.hero-card{
  background:linear-gradient(135deg, #1f8fe0 0%, #1471c8 46%, #0f4fa8 100%);
  border-color:transparent; color:#fff;
  box-shadow:0 10px 30px hsl(210 80% 30% / .28);
  padding:24px 26px 0;
}
.hero-card::after{
  content:""; position:absolute; width:320px; height:320px; right:-90px; top:-140px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
  pointer-events:none;
}
.hero-card > *{position:relative; z-index:1}
.hero-eyebrow{color:rgba(255,255,255,.72)}
.hero-value{color:#fff; font-size:44px}
.hero-card .chip{
  background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.26); color:#fff;
}
.hero-card .chip-ok{background:rgba(255,255,255,.26); color:#fff}
.hero-card .chip-err{background:rgba(255,140,140,.3); color:#fff; border-color:transparent}
.hero-card .area-chart{color:#fff; height:96px; opacity:.95}

/* ---- ring card gets a touch of its own identity ---- */
.ring-card{padding:22px 24px}
.ring-track{stroke:hsl(var(--muted))}
.ring-fill{stroke:url(#ringGrad)}

/* ---- metric strip: hover + a colour rail per metric ---- */
.metric{position:relative; transition:background .15s}
.metric:hover{background:hsl(var(--surface-low))}
.metric::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 3px 3px 0; background:var(--rail, transparent);
}

/* ---- sidebar active item reads as a solid pill ---- */
.nav-item.is-active{
  background:var(--grad-brand); color:#fff;
  box-shadow:0 3px 10px hsl(var(--primary)/.32);
}
.nav-item.is-active::before{display:none}
.nav-item.is-active svg{opacity:1}

/* ---- cards respond to the pointer ---- */
.card{transition:box-shadow .18s, transform .18s}
.qa-item, .check-row, .tl-row{border-radius:var(--radius)}

@media (prefers-reduced-motion:reduce){
  .card, .metric{transition:none}
}

/* ---------------------------------------------------- grouped sidebar ---- */
.nav-section{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:hsl(var(--muted-foreground)); opacity:.72;
  padding:14px 12px 6px;
}
.nav-section:first-child{padding-top:2px}
.sidebar nav{gap:1px}
.nav-item{padding:8px 12px}

/* --------------------------------------------- top shortcut bar (row) ---- */
.shortcut-bar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:10px 12px; margin-bottom:16px;
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius-lg);
  box-shadow:0 1px 2px hsl(215 25% 20% / .04), 0 4px 14px hsl(215 25% 20% / .07);
}
.shortcut-bar .sb-label{
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:hsl(var(--muted-foreground)); padding:0 8px 0 4px; white-space:nowrap;
}
.sb-item{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:9999px;
  border:1px solid hsl(var(--border)); background:hsl(var(--surface-low));
  font-size:13px; font-weight:600; white-space:nowrap;
  transition:border-color .15s, background .15s, transform .15s;
}
.sb-item:hover{
  background:hsl(var(--primary)/.08); border-color:hsl(var(--primary)/.35);
  transform:translateY(-1px);
}
.sb-item svg{width:15px; height:15px; color:hsl(var(--primary))}

@media (max-width:640px){
  .shortcut-bar{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch}
  .shortcut-bar .sb-label{display:none}
}

/* ==========================================================================
   Devices page
   ========================================================================== */
/* One wide row per device: identity, figures and warm-up sit side by side so
   a single device fills the page instead of leaving a column empty. */
.device-list{display:flex; flex-direction:column; gap:14px}
.device-row{overflow:hidden}

.dr-main{
  display:grid; align-items:center; gap:22px; padding:18px 20px;
  grid-template-columns:auto minmax(190px,.8fr) auto minmax(260px,1.2fr);
}
.dr-id{min-width:0}
.dr-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.dr-title strong{font-size:16px; font-weight:650}
.dr-id .num{
  display:block; margin-top:2px; font-size:13px;
  color:hsl(var(--muted-foreground));
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.dr-id .num-empty{font-family:inherit; font-style:italic}
.dr-sub{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:7px;
  font-size:12.5px; color:hsl(var(--muted-foreground));
}

.dr-figs{display:flex; gap:26px}
.dr-fig span{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:hsl(var(--muted-foreground)); margin-bottom:3px;
}
.dr-fig b{font-size:19px; font-weight:750; font-variant-numeric:tabular-nums}

.dr-warm-top{
  display:flex; justify-content:space-between; gap:10px;
  font-size:12.5px; color:hsl(var(--muted-foreground)); margin-bottom:6px;
}
.dr-warm-top b{color:hsl(var(--foreground))}

.dr-actions{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  padding:13px 20px; border-top:1px solid hsl(var(--border));
  background:hsl(var(--surface-low));
}

@media (max-width:1100px){
  .dr-main{grid-template-columns:auto 1fr; row-gap:18px}
  .dr-figs{grid-column:1 / -1}
  .dr-warm{grid-column:1 / -1}
}
@media (max-width:560px){
  .dr-main{grid-template-columns:1fr; gap:14px}
  .dr-figs{justify-content:space-between; gap:12px}
}

.device-card{position:relative; overflow:hidden; padding:0}
.device-head{display:flex; align-items:center; gap:13px; padding:18px 20px 14px}
.device-avatar{
  width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center;
  background:var(--grad-brand); color:#fff; box-shadow:0 3px 10px hsl(var(--primary)/.3);
}
.device-avatar svg{width:21px; height:21px}
.device-avatar.is-off{background:hsl(var(--muted)); color:hsl(var(--muted-foreground)); box-shadow:none}
.device-id{min-width:0; flex:1}
.device-id strong{display:block; font-size:15px; font-weight:650}
.device-id .num{font-size:12.5px; color:hsl(var(--muted-foreground)); font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
/* The placeholder is prose, not a number - keep it in the UI font. */
.device-id .num-empty{font-family:inherit; font-style:italic}

.device-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid hsl(var(--border)); border-bottom:1px solid hsl(var(--border));
}
.device-stat{padding:12px 16px; border-right:1px solid hsl(var(--border))}
.device-stat:last-child{border-right:0}
.device-stat span{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:hsl(var(--muted-foreground)); margin-bottom:3px;
}
.device-stat b{font-size:16px; font-weight:700; font-variant-numeric:tabular-nums}

.device-warm{padding:14px 20px}
.device-warm .lbl{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px}
.device-warm .lbl span:last-child{color:hsl(var(--muted-foreground))}
.warm-note{font-size:11.5px; color:hsl(var(--muted-foreground)); margin-top:7px}
.device-meta{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-size:12.5px; color:hsl(var(--muted-foreground));
  margin-top:12px; padding-top:11px; border-top:1px solid hsl(var(--border));
}
.device-quick{display:flex; gap:8px; padding:0 20px 4px; flex-wrap:wrap}
.device-actions{display:flex; gap:8px; padding:14px 20px 18px; flex-wrap:wrap; align-items:center}

/* ---- link modal ---- */
.modal-backdrop{
  display:none; position:fixed; inset:0; z-index:60; padding:20px; overflow-y:auto;
  background:rgba(8,20,40,.55); backdrop-filter:blur(3px);
}
.modal-backdrop.is-open{display:grid; place-items:center}
.modal-card{
  width:100%; max-width:430px; background:hsl(var(--card));
  border:1px solid hsl(var(--border)); border-radius:var(--radius-xl);
  box-shadow:0 20px 50px rgba(8,20,40,.3); padding:24px;
}
.modal-card h3{margin:0 0 4px; font-size:17px; font-weight:700}
.modal-card .sub{margin:0 0 18px; font-size:13.5px; color:hsl(var(--muted-foreground))}

.tabs{display:flex; gap:4px; padding:4px; background:hsl(var(--surface-low));
  border-radius:11px; margin-bottom:18px}
.tab{
  flex:1; padding:9px 10px; border-radius:8px; border:0; cursor:pointer;
  background:transparent; font:inherit; font-size:13px; font-weight:650;
  color:hsl(var(--muted-foreground));
}
.tab.is-on{background:hsl(var(--card)); color:hsl(var(--foreground)); box-shadow:var(--shadow-sm)}

.pair-code{
  display:flex; gap:8px; justify-content:center; margin:6px 0 12px;
}
.pair-code i{
  font-style:normal; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px; font-weight:700; letter-spacing:.04em;
  width:36px; height:46px; display:grid; place-items:center;
  background:hsl(var(--surface-low)); border:1px solid hsl(var(--border));
  border-radius:9px;
}
/* "or" rule between the two linking methods in one modal. */
.or-split{
  display:flex; align-items:center; gap:12px;
  margin:18px 0; color:hsl(var(--muted-foreground)); font-size:12px;
}
.or-split::before,.or-split::after{
  content:""; flex:1; height:1px; background:hsl(var(--border));
}
.pair-head{
  margin:0 0 12px; font-size:14px; font-weight:600;
}
.pair-head span{font-weight:400; color:hsl(var(--muted-foreground))}
.btn-link{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:12.5px; color:hsl(var(--primary));
}
.btn-link:hover{text-decoration:underline}

/* An expired code stays visible but is clearly no longer usable. */
.pair-code.is-stale i{opacity:.4; text-decoration:line-through}
.pair-timer{
  text-align:center; margin:0 0 14px; font-size:13px;
  color:hsl(var(--muted-foreground));
}
.steps{margin:0; padding-left:18px; font-size:13px; color:hsl(var(--muted-foreground)); line-height:1.7}
.steps b{color:hsl(var(--foreground))}

/* ==========================================================================
   Chats - modelled on WhatsApp Web: a quiet list on the left, a patterned
   thread on the right, and colour carried by the bubbles rather than chrome.
   ========================================================================== */
:root{
  --wa-out:142 58% 88%;      /* the pale green of your own messages */
  --wa-out-border:142 40% 78%;
  --wa-tint:150 20% 96%;     /* thread background */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wa-out:170 52% 20%;
    --wa-out-border:170 45% 26%;
    --wa-tint:200 12% 12%;
  }
}
:root[data-theme="dark"]{
  --wa-out:170 52% 20%; --wa-out-border:170 45% 26%; --wa-tint:200 12% 12%;
}

.chat-wrap{
  display:grid; grid-template-columns:340px minmax(0,1fr); gap:0; align-items:stretch;
  height:calc(100vh - 210px); min-height:520px;
  border:1px solid hsl(var(--border)); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); background:hsl(var(--card));
}
.chat-wrap:has(.chat-details.is-open){grid-template-columns:340px minmax(0,1fr) 310px}

/* ---- conversation list ---- */
.chat-list{
  display:flex; flex-direction:column; overflow:hidden;
  border:0; border-right:1px solid hsl(var(--border)); border-radius:0;
  box-shadow:none; background:hsl(var(--card));
}
.chat-list-head{padding:12px 12px 10px; border-bottom:1px solid hsl(var(--border))}
.chat-search input{
  width:100%; border-radius:999px; padding:9px 14px;
  background:hsl(var(--surface-low)); border-color:transparent;
}
.chat-count{
  margin-top:9px; font-size:12px; color:hsl(var(--muted-foreground));
  display:flex; align-items:center; gap:8px;
}
.chat-scroll{flex:1; overflow-y:auto}

.chat-row{
  display:flex; gap:12px; padding:11px 14px; text-decoration:none; color:inherit;
  border-bottom:1px solid hsl(var(--border)/.5); align-items:center;
}
.chat-row:hover{background:hsl(var(--surface-low))}
.chat-row.is-active{background:hsl(var(--surface-container))}

.chat-av{
  width:46px; height:46px; border-radius:50%; flex:0 0 46px;
  object-fit:cover; background:hsl(var(--surface-low));
}
.chat-av-txt{
  display:grid; place-items:center; font-size:14px; font-weight:650;
  color:hsl(var(--primary)); background:hsl(var(--primary)/.13);
}
.chat-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.chat-top{display:flex; align-items:baseline; gap:8px}
.chat-name{
  flex:1; min-width:0; font-size:14.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-when{font-size:11.5px; color:hsl(var(--muted-foreground)); flex:0 0 auto}
.chat-sub{
  font-size:13px; color:hsl(var(--muted-foreground));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.chat-meta{display:flex; align-items:center; justify-content:flex-end}
.chat-badge{
  background:hsl(var(--success)); color:#fff;
  border-radius:999px; min-width:20px; text-align:center;
  padding:1px 6px; font-size:11px; font-weight:650;
}

/* ---- thread ---- */
.chat-pane{
  display:flex; flex-direction:column; overflow:hidden;
  border:0; border-radius:0; box-shadow:none; background:transparent;
}
.chat-head{
  display:flex; align-items:center; gap:12px; padding:11px 16px;
  border-bottom:1px solid hsl(var(--border)); background:hsl(var(--card));
}
.chat-head .hint{display:block; font-size:11.5px}

/* The faint pattern is what makes the thread read as a chat rather than a
   list of rows. Inline SVG, so it costs no extra request. */
.chat-thread{
  flex:1; overflow-y:auto; padding:18px 20px; position:relative;
  display:flex; flex-direction:column; gap:3px;
  background-color:hsl(var(--wa-tint));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.035' stroke-width='1.2'%3E%3Ccircle cx='13' cy='13' r='5'/%3E%3Cpath d='M34 8h10v10H34z'/%3E%3Cpath d='M8 36c4-5 9-5 13 0'/%3E%3Ccircle cx='40' cy='40' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
}

.day-split{display:flex; justify-content:center; margin:10px 0 6px}
.day-split span{
  background:hsl(var(--card)); color:hsl(var(--muted-foreground));
  border:1px solid hsl(var(--border)); border-radius:999px;
  padding:3px 12px; font-size:11.5px; font-weight:600;
  box-shadow:var(--shadow-sm);
}

.bubble{
  max-width:65%; min-width:96px; padding:6px 9px 5px; border-radius:8px;
  position:relative; box-shadow:0 1px .5px hsl(215 25% 20% / .13);
  border:1px solid transparent;
}
.bubble.is-in{align-self:flex-start; background:hsl(var(--card))}
.bubble.is-out{
  align-self:flex-end;
  background:hsl(var(--wa-out)); border-color:hsl(var(--wa-out-border));
}
/* The little tail, drawn only on the first bubble of a run. */
.bubble.is-in:first-of-type,
.bubble.is-out + .bubble.is-in,
.day-split + .bubble.is-in{border-top-left-radius:2px}
.bubble.is-out:first-of-type,
.bubble.is-in + .bubble.is-out,
.day-split + .bubble.is-out{border-top-right-radius:2px}

.bubble-text{font-size:14.2px; line-height:1.42; white-space:pre-wrap; word-break:break-word}
.bubble-empty{font-style:italic; color:hsl(var(--muted-foreground))}
.bubble-time{
  float:right; margin:5px 0 0 9px; font-size:10.5px; line-height:1;
  color:hsl(var(--muted-foreground)); white-space:nowrap;
  display:inline-flex; align-items:center; gap:3px;
}
.bubble.is-ghost{opacity:.6}

/* Jump back down after scrolling up. */
.chat-down{
  position:absolute; right:22px; bottom:96px; z-index:6;
  width:38px; height:38px; border-radius:50%; display:none;
  place-items:center; cursor:pointer;
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  box-shadow:var(--shadow-md); color:hsl(var(--muted-foreground));
}
.chat-down.is-on{display:grid}
.chat-down svg{width:18px; height:18px}

/* ---- composer ---- */
.chat-compose{
  padding:10px 14px; border-top:1px solid hsl(var(--border));
  background:hsl(var(--card));
}
.composer{display:flex; align-items:flex-end; gap:8px}
.composer textarea{
  flex:1; resize:none; min-height:42px; max-height:140px; line-height:1.45;
  padding:10px 15px; border-radius:20px; background:hsl(var(--surface-low));
  border-color:transparent;
}
.composer-tpl{
  width:auto; max-width:140px; flex:0 0 auto; border-radius:999px;
  background:hsl(var(--surface-low)); border-color:transparent;
}
.composer-clip{
  cursor:pointer; display:grid; place-items:center; width:40px; height:40px;
  padding:0; border-radius:50%; font-size:16px; flex:0 0 auto;
}
.composer .btn:last-child{
  border-radius:50%; width:42px; height:42px; padding:0;
  display:grid; place-items:center; flex:0 0 auto; font-size:0;
}
.composer .btn:last-child::after{
  content:""; width:17px; height:17px; background:currentColor;
  -webkit-mask:var(--send-icon) center/contain no-repeat;
          mask:var(--send-icon) center/contain no-repeat;
}
:root{
  --send-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E");
}
.attach-note{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  font-size:12.5px; color:hsl(var(--muted-foreground));
}

/* ---- details panel ---- */
.chat-details{
  display:none; padding:18px; overflow-y:auto;
  border:0; border-left:1px solid hsl(var(--border)); border-radius:0; box-shadow:none;
}
.chat-details.is-open{display:block}
.det-block{margin-bottom:14px; display:flex; flex-direction:column; gap:3px}
.det-k{
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:hsl(var(--muted-foreground));
}
.det-v{font-size:13.5px; word-break:break-word}
.det-v .hint{display:block; font-size:12px}
.det-order{
  display:flex; align-items:center; gap:8px; padding:7px 0; font-size:12.5px;
  border-bottom:1px solid hsl(var(--border)/.6);
}
.det-order span:first-child{flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.tick{display:inline-flex; align-items:center}
.tick svg{width:15px; height:13px}
.tick-read{color:hsl(199 90% 48%)}
.tick-fail{color:hsl(var(--destructive)); font-weight:700}

@media (max-width:1100px){
  .chat-wrap:has(.chat-details.is-open){grid-template-columns:340px minmax(0,1fr)}
  .chat-details.is-open{
    position:fixed; right:16px; top:80px; bottom:16px; width:300px; z-index:40;
    border:1px solid hsl(var(--border)); border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md); background:hsl(var(--card));
  }
}
@media (max-width:820px){
  .chat-wrap{grid-template-columns:1fr; height:auto; border:0; box-shadow:none; background:none}
  .chat-list, .chat-pane{
    border:1px solid hsl(var(--border)); border-radius:var(--radius-lg);
    margin-bottom:14px;
  }
  .chat-scroll{max-height:46vh}
  .chat-thread{max-height:52vh}
  .bubble{max-width:82%}
}

/* Metric tiles can be links on pages other than the dashboard. */
a.metric{color:inherit; text-decoration:none}
a.metric:hover{background:hsl(var(--surface-low))}

/* ---- live pages: queue, monitoring, bulk ---- */
.live-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:hsl(var(--success)); margin-right:6px; vertical-align:middle;
  animation:live-pulse 1.8s ease-in-out infinite;
}
@keyframes live-pulse{
  0%,100%{opacity:1; box-shadow:0 0 0 0 hsl(var(--success)/.45)}
  50%    {opacity:.65; box-shadow:0 0 0 5px hsl(var(--success)/0)}
}
@media (prefers-reduced-motion: reduce){
  .live-dot{animation:none}
}

/* What a campaign will actually cost, before it is queued. */
.bulk-estimate{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  padding:13px 15px; margin:0 0 14px;
  background:hsl(var(--surface-low)); border:1px solid hsl(var(--border));
  border-radius:var(--radius);
}
.bulk-estimate.is-over{
  border-color:hsl(var(--destructive)/.45); background:hsl(var(--destructive)/.06);
}
.est-k{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:hsl(var(--muted-foreground)); margin-bottom:3px;
}
.bulk-estimate b{font-size:17px; font-weight:750; font-variant-numeric:tabular-nums}

@media (max-width:560px){
  .bulk-estimate{grid-template-columns:1fr 1fr}
}

/* ---- admin settings: status panel and tabs ---- */
.status-grid{
  display:grid; gap:12px; margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.status-tile{
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-left:3px solid hsl(var(--muted-foreground));
  border-radius:var(--radius-lg); padding:13px 15px; box-shadow:var(--shadow-sm);
}
.status-tile.is-ok  {border-left-color:hsl(var(--success))}
.status-tile.is-warn{border-left-color:hsl(var(--warning))}
.status-tile.is-bad {border-left-color:hsl(var(--destructive))}
.st-k{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:hsl(var(--muted-foreground)); margin-bottom:4px;
}
.status-tile b{display:block; font-size:16px; font-weight:700}
.status-tile small{
  display:block; margin-top:3px; font-size:11.5px; color:hsl(var(--muted-foreground));
}
.status-tile.is-warn small{color:hsl(var(--warning))}
.status-tile.is-bad  small{color:hsl(var(--destructive))}

.settings-body{max-width:760px}
.settings-body .card{margin-bottom:16px}

/* The assistant runs on one engine, so it is shown as a fact, not a choice. */

/* ---- inbox alert bell ---- */
.btn-icon{padding:0; width:38px; height:38px; display:inline-flex;
  align-items:center; justify-content:center; position:relative; flex:0 0 auto}
.btn-icon svg{width:19px; height:19px}

/* Muted is the state worth showing, so the slash appears when alerts are OFF
   and the bell sits plain once they are on. */
.btn-icon .bell-off{position:absolute; left:8px; top:8px; width:22px; height:2px;
  background:currentColor; transform:rotate(45deg); transform-origin:left center;
  border-radius:2px; opacity:.75}
.btn-icon.is-on .bell-off{display:none}
.btn-icon.is-on{color:hsl(var(--success))}

/* ---- companies: cards and the guided create flow ---- */
.switch-row{display:flex; gap:10px; align-items:flex-start; margin-bottom:12px;
  padding:11px 13px; border:1px solid hsl(var(--border)); border-radius:var(--radius);
  background:hsl(var(--surface-low)); cursor:pointer}
.switch-row input{margin-top:2px; flex:0 0 auto}
.switch-row b{display:block; font-size:14px; font-weight:600}
.switch-row .hint{display:block; margin-top:2px}

.co-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr))}
.co-card{background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius); padding:15px 16px; display:flex; flex-direction:column; gap:11px}
/* Paused is a real state, not an error, so it recedes rather than shouting. */
.co-card.is-off{opacity:.62}

.co-head{display:flex; align-items:center; gap:10px}
.co-avatar{width:38px; height:38px; flex:0 0 auto; border-radius:10px;
  display:grid; place-items:center; font-weight:700; font-size:13px;
  background:hsl(var(--primary)/.14); color:hsl(var(--primary))}
.co-name{display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.co-head .hint{display:block; font-size:12px}

.co-facts{display:flex; flex-direction:column; gap:3px}
.co-fact{font-size:12.5px; color:hsl(var(--muted-foreground));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.co-meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px;
  color:hsl(var(--muted-foreground)); padding-top:10px;
  border-top:1px solid hsl(var(--border))}
.co-meta b{color:hsl(var(--foreground))}
.co-dev{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}

.co-actions{display:flex; gap:6px; align-items:center; margin-top:2px}

/* ---- wizard ---- */
.wz-back{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:50;
  place-items:center; padding:20px; overflow-y:auto}
.wz{max-width:620px; width:100%; padding:0; display:flex; flex-direction:column;
  max-height:calc(100vh - 40px)}
.wz-top{display:flex; align-items:center; gap:10px; padding:15px 18px;
  border-bottom:1px solid hsl(var(--border))}

.wz-rail{padding:14px 18px 4px}
.wz-bar{height:3px; border-radius:3px; background:hsl(var(--border)); overflow:hidden}
.wz-bar span{display:block; height:100%; width:0; background:hsl(var(--primary));
  transition:width .25s ease}
.wz-steps{display:flex; justify-content:space-between; margin-top:10px}
.wz-step{display:flex; flex-direction:column; align-items:center; gap:4px; flex:1;
  font-size:11.5px; color:hsl(var(--muted-foreground)); cursor:default}
.wz-step i{width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:12px; font-weight:600;
  border:1px solid hsl(var(--border)); background:hsl(var(--card))}
.wz-step.is-now{color:hsl(var(--primary)); font-weight:600}
.wz-step.is-now i{border-color:hsl(var(--primary)); color:hsl(var(--primary))}
.wz-step.is-done{cursor:pointer}
.wz-step.is-done i{background:hsl(var(--primary)); border-color:hsl(var(--primary)); color:#fff}

.wz-body{padding:16px 18px; overflow-y:auto}
.wz-pane h3{margin:0 0 4px; font-size:16px}
.wz-pane > .hint{margin:0 0 14px}

.wz-types{display:grid; gap:9px; grid-template-columns:repeat(auto-fill, minmax(155px, 1fr))}
.wz-type{text-align:left; cursor:pointer; padding:12px; border-radius:var(--radius);
  border:1px solid hsl(var(--border)); background:hsl(var(--surface-low)); color:inherit;
  display:flex; flex-direction:column; gap:3px; font:inherit}
.wz-type svg{width:20px; height:20px; color:hsl(var(--primary)); margin-bottom:3px}
.wz-type b{font-size:13.5px}
.wz-type span{font-size:11.5px; color:hsl(var(--muted-foreground))}
.wz-type:hover{border-color:hsl(var(--primary)/.5)}
.wz-type.is-on{border-color:hsl(var(--primary)); background:hsl(var(--primary)/.08)}

.wz-review{display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin:0}
.wz-review dt{font-size:12.5px; color:hsl(var(--muted-foreground))}
.wz-review dd{margin:0; font-size:13.5px; text-align:right; word-break:break-word}

.wz-foot{display:flex; gap:8px; align-items:center; padding:14px 18px;
  border-top:1px solid hsl(var(--border))}

@media (max-width:560px){
  .wz-step span, .wz-step{font-size:0}
  .wz-step i{font-size:12px}
  .wz-review{grid-template-columns:1fr; gap:2px 0}
  .wz-review dd{text-align:left; margin-bottom:8px}
}

/* ---- login: caps lock, busy button, security note ---- */
.caps-hint{display:flex; align-items:center; gap:6px; margin-top:7px;
  font-size:12.5px; font-weight:500; color:hsl(var(--warning))}
/* A class with display:flex beats the browser's own [hidden] rule, so the
   warning showed on load. It has to be turned off explicitly. */
.caps-hint[hidden]{display:none}
.caps-hint::before{content:""; width:6px; height:6px; border-radius:50%;
  background:hsl(var(--warning)); flex:0 0 auto}

/* The button keeps its size while busy, so the form does not jump. */
.btn.is-busy{opacity:.75; cursor:progress}

.peek.is-on{color:hsl(var(--primary))}

.auth-note{display:flex; gap:9px; align-items:flex-start; margin:20px 0 0;
  padding-top:16px; border-top:1px solid hsl(var(--border));
  font-size:12.5px; line-height:1.55; color:hsl(var(--muted-foreground))}
.auth-note svg{width:15px; height:15px; flex:0 0 auto; margin-top:1px;
  color:hsl(var(--success))}

/* ---- admin: what a customer's account holds ---- */
.own-tabs{display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid hsl(var(--border))}
.own-tab{flex:1 1 110px; min-width:110px; padding:13px 14px; text-align:center;
  border-right:1px solid hsl(var(--border)); color:inherit;
  border-bottom:2px solid transparent; transition:background .15s}
.own-tab:last-child{border-right:0}
.own-tab:hover{background:hsl(var(--surface-low))}
.own-tab b{display:block; font-size:19px; font-weight:750; letter-spacing:-.02em}
.own-tab span{display:block; font-size:12px; color:hsl(var(--muted-foreground)); margin-top:1px}
.own-tab.is-on{border-bottom-color:hsl(var(--primary)); background:hsl(var(--primary)/.06)}
.own-tab.is-on b, .own-tab.is-on span{color:hsl(var(--primary))}

/* ==========================================================================
   Public marketing pages
   A dark navy + brand-blue system: utility strip, hero, service grid,
   alternating splits, contact band, plans, footer.
   ========================================================================== */
.pub{--navy:222 55% 13%; --navy-2:222 50% 18%}

.pub-inner{width:100%; max-width:1180px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:18px}

/* ---- utility strip ---- */
.pub-strip{background:hsl(var(--navy)); color:#fff; font-size:13px; position:relative; overflow:hidden}
.pub-strip .pub-inner{min-height:44px}
/* The wedge is what stops the strip reading as a plain coloured bar. */
.pub-strip::before{content:""; position:absolute; inset:0 auto 0 -40px; width:46%;
  background:hsl(var(--primary)); transform:skewX(-22deg); opacity:.9}
.pub-strip a{position:relative; z-index:1; color:#fff; display:inline-flex;
  align-items:center; gap:7px; opacity:.95}
.pub-strip a:hover{opacity:1}
.pub-strip svg{width:15px; height:15px}
.pub-strip .spacer{flex:1}
.pub-strip-note{position:relative; z-index:1; color:rgba(255,255,255,.62); font-size:12.5px}

/* ---- header ---- */
.pub-head{position:sticky; top:0; z-index:40; background:hsl(var(--card));
  border-bottom:1px solid hsl(var(--border))}
.pub-head .pub-inner{min-height:74px}
.pub-head .brand{display:inline-flex; align-items:center; gap:10px; color:inherit}
.pub-head .logo-word{font-size:19px}

.pub-nav{display:flex; gap:26px; margin-left:26px}
.pub-nav a{font-size:14.5px; font-weight:600; color:hsl(var(--muted-foreground));
  padding:6px 0; border-bottom:2px solid transparent}
.pub-nav a:hover{color:hsl(var(--foreground))}
.pub-nav a.is-on{color:hsl(var(--primary)); border-bottom-color:hsl(var(--primary))}

.btn-outline{background:transparent; color:hsl(var(--primary));
  border:1.5px solid hsl(var(--primary)/.55)}
.btn-outline:hover{background:hsl(var(--primary)/.08); border-color:hsl(var(--primary))}
.btn-outline-light{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5)}
.btn-outline-light:hover{background:rgba(255,255,255,.12); border-color:#fff}
.pub-cta{white-space:nowrap}

/* ---- section furniture ---- */
.pub-sec{padding:84px 0}
.pub-sec-tint{background:hsl(var(--surface-low))}
.pub-sec .pub-inner{display:block}

.eyebrow{display:block; font-size:12.5px; font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:hsl(var(--primary)); margin-bottom:10px}
.eyebrow-on-dark{color:#7ecbff}

.sec-head{text-align:center; max-width:640px; margin:0 auto 46px}
.sec-head h2{font-size:clamp(26px,3.2vw,38px); line-height:1.15; margin:0;
  font-weight:800; letter-spacing:-.03em}

/* ---- hero ---- */
.hero{position:relative; overflow:hidden; color:#fff; padding:92px 0 96px;
  background:
    radial-gradient(900px 520px at 78% -10%, hsl(var(--primary)/.5), transparent 68%),
    linear-gradient(160deg, hsl(var(--navy)) 0%, hsl(var(--navy-2)) 60%, hsl(222 60% 22%) 100%);
}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(110% 80% at 15% 0%, #000 20%, transparent 70%);
  -webkit-mask-image:radial-gradient(110% 80% at 15% 0%, #000 20%, transparent 70%)}
/* The diagonal flash in the top-left corner, echoing the strip above it. */
.hero-wedge{position:absolute; top:-70px; left:-120px; width:340px; height:240px;
  background:hsl(var(--primary)); transform:rotate(-28deg); opacity:.5; filter:blur(2px)}
.hero-inner{position:relative; z-index:1; display:grid;
  grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
.hero-copy{min-width:0}
.hero h1{font-size:clamp(32px,4vw,50px); line-height:1.1; margin:0 0 18px;
  font-weight:800; letter-spacing:-.035em; max-width:15ch}
.hero-lede{font-size:16.5px; line-height:1.68; color:rgba(255,255,255,.8);
  max-width:56ch; margin:0 0 28px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-cta .btn{padding:13px 24px; font-size:15px; font-weight:650}
.hero-points{list-style:none; padding:0; margin:36px 0 0; display:flex;
  flex-wrap:wrap; gap:12px 30px}
.hero-points li{display:flex; align-items:center; gap:9px;
  font-size:13.5px; color:rgba(255,255,255,.76)}
.hero-points li::before{content:""; width:16px; height:16px; flex:0 0 auto; border-radius:50%;
  background:hsl(var(--primary)); box-shadow:inset 0 0 0 3px hsl(var(--navy))}

/* ---- service cards ---- */
.svc-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(248px, 1fr))}
.svc-card{background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius-xl); padding:26px 24px 22px; position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.svc-card::after{content:""; position:absolute; left:24px; right:24px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:hsl(var(--primary)); opacity:0; transition:opacity .18s}
.svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);
  border-color:hsl(var(--primary)/.35)}
.svc-card:hover::after{opacity:1}
.svc-icon{width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:hsl(var(--primary)/.12); color:hsl(var(--primary)); margin-bottom:16px}
.svc-icon svg{width:24px; height:24px}
.svc-card h3{font-size:17px; margin:0 0 8px; font-weight:700; letter-spacing:-.02em}
.svc-card p{font-size:14px; line-height:1.6; color:hsl(var(--muted-foreground)); margin:0 0 16px}
.svc-link{font-size:13.5px; font-weight:650; color:hsl(var(--primary));
  display:inline-flex; align-items:center; gap:6px}
.svc-link span{transition:transform .18s}
.svc-card:hover .svc-link span{transform:translateX(4px)}

/* ---- alternating split sections ----
   The selector has to out-rank `.pub-sec .pub-inner{display:block}` above, or
   the two columns silently stack and the artwork spans the whole width. */
.pub-sec .pub-inner.split{display:grid; grid-template-columns:1fr 1fr;
  gap:56px; align-items:center}
.split-flip .split-art{order:2}
.split-text h2{font-size:clamp(24px,2.8vw,34px); line-height:1.18; margin:0 0 14px;
  font-weight:800; letter-spacing:-.03em}
.split-text p{font-size:15.5px; line-height:1.7; color:hsl(var(--muted-foreground));
  margin:0 0 22px; max-width:52ch}

/* Offset outline behind the artwork - the one flourish these pages get. */
.art-frame{position:relative; border:2px solid hsl(var(--primary)); border-radius:22px;
  padding:22px; background:hsl(var(--card))}
.art-frame{z-index:0}
.art-frame::before{content:""; position:absolute; inset:16px -16px -16px 16px;
  border-radius:22px; background:hsl(var(--primary)/.18); z-index:-1}

.art-chat{display:flex; flex-direction:column; gap:10px}
.art-bubble{max-width:82%; padding:10px 13px; border-radius:14px; font-size:14px; line-height:1.45}
.art-bubble.in{align-self:flex-start; background:hsl(var(--surface-low));
  border:1px solid hsl(var(--border)); border-bottom-left-radius:5px}
.art-bubble.out{align-self:flex-end; background:hsl(var(--primary)/.14);
  border-bottom-right-radius:5px}
.art-tick{color:hsl(199 90% 48%); font-size:11px; margin-left:5px}

.art-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  line-height:1.75; white-space:pre-wrap; color:hsl(var(--foreground))}
.art-code .c-dim{color:hsl(var(--muted-foreground))}
.art-code .c-key{color:hsl(var(--primary))}
.art-code .c-str{color:hsl(28 85% 52%)}
.art-code .c-ok{color:hsl(var(--success)); font-weight:700}

/* ---- contact band ---- */
.pub-band{background:hsl(var(--navy)); color:#fff; padding:64px 0; text-align:center;
  position:relative; overflow:hidden}
.pub-band::before{content:""; position:absolute; inset:0;
  background:radial-gradient(700px 300px at 50% 0%, hsl(var(--primary)/.35), transparent 70%)}
.pub-band .pub-inner{display:block; position:relative; z-index:1}
.pub-band h2{font-size:clamp(22px,2.6vw,30px); margin:0 0 10px; font-weight:800; letter-spacing:-.03em}
.pub-band p{color:rgba(255,255,255,.72); margin:0 0 20px; font-size:15px}
.band-phone{display:inline-block; font-size:clamp(24px,3vw,34px); font-weight:800;
  letter-spacing:-.02em; color:#fff}
.band-phone:hover{color:#7ecbff}

/* ---- plans ---- */
.plan-grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  align-items:start}
.plan-card{position:relative; background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius-xl); padding:28px 24px; text-align:center}
.plan-card.is-featured{border-color:hsl(var(--primary)); box-shadow:var(--shadow-md);
  transform:translateY(-8px)}
.plan-flag{position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:hsl(var(--primary)); color:#fff; font-size:11.5px; font-weight:700;
  padding:5px 13px; border-radius:99px; white-space:nowrap}
.plan-card h3{font-size:15px; margin:0 0 6px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; color:hsl(var(--muted-foreground))}
.plan-price{font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.1}
.plan-per{font-size:13px; color:hsl(var(--muted-foreground)); margin-bottom:20px}
.plan-list{list-style:none; padding:0; margin:0 0 22px; text-align:left;
  display:flex; flex-direction:column; gap:9px}
.plan-list li{display:flex; gap:9px; font-size:13.8px; line-height:1.45}
.plan-list li::before{content:"✓"; color:hsl(var(--success)); font-weight:800; flex:0 0 auto}
.plan-card .btn{width:100%}

/* ---- footer ---- */
.pub-foot{background:hsl(var(--navy)); color:rgba(255,255,255,.72); padding:62px 0 0;
  margin-top:0}
.pub-foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:46px;
  align-items:start; padding-bottom:48px}
.pub-foot .brand{display:inline-flex; align-items:center; gap:10px;
  color:#fff; margin-bottom:16px}
.pub-foot .logo-word{font-size:19px; color:#fff}
.pub-foot-lede{font-size:14px; line-height:1.68; margin:0 0 16px; max-width:42ch}
.pub-foot-line a{color:#fff; font-weight:600; line-height:1.9}
.pub-foot-line a:hover{color:#7ecbff}
.pub-foot h4{color:#fff; font-size:14px; margin:0 0 14px; font-weight:700;
  letter-spacing:-.01em}
.pub-foot-grid > div > a{display:block; font-size:14px; padding:5px 0;
  color:rgba(255,255,255,.72)}
.pub-foot-grid > div > a:hover{color:#fff}
.pub-foot-note{font-size:13px; line-height:1.65; color:rgba(255,255,255,.58); margin:0}

.pub-foot-bar{border-top:1px solid rgba(255,255,255,.12); padding:18px 0; font-size:13px}
.pub-foot-bar .pub-inner{gap:20px}
.pub-foot-bar .spacer{flex:1}
.pub-foot-bar a{color:rgba(255,255,255,.72)}
.pub-foot-bar a:hover{color:#fff}

@media (max-width:900px){
  .pub-strip-note{display:none}

  /* The nav drops to its own scrollable row rather than vanishing - hiding it
     left Pricing and the API docs unreachable from the header on a phone. */
  .pub-head .pub-inner{flex-wrap:wrap; padding-bottom:0}
  .pub-nav{order:3; width:100%; margin:0 -16px; padding:0 16px 2px;
    gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .pub-nav::-webkit-scrollbar{display:none}
  .pub-nav a{white-space:nowrap; padding-bottom:10px}
  .pub-sec{padding:60px 0}
  .pub-sec .pub-inner.split{grid-template-columns:1fr; gap:34px}
  .split-flip .split-art{order:0}
  .pub-foot-grid{grid-template-columns:1fr; gap:34px}
  .plan-card.is-featured{transform:none}
  .hero{padding:66px 0 70px}
}
@media (max-width:560px){
  .pub-inner{padding:0 16px}
  .pub-head .pub-inner{min-height:60px; gap:8px}
  .pub-cta{padding:7px 12px; font-size:12.5px}
  /* Two CTAs plus a theme toggle do not fit beside the logo. Signing up is the
     one action worth the space; signing in is in the footer and on that page. */
  .pub-head .btn-outline{display:none}
  .pub-head .theme-btn{display:none}
  .hero-points{gap:10px 18px}
  .hero h1{font-size:30px}
}

/* ---- hero artwork: a drawn phone, not a stock photo ---- */
.hero-art{position:relative; display:flex; justify-content:center; min-width:0}
.phone{position:relative; width:272px; border-radius:34px; padding:12px 10px 16px;
  background:#0f1830; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 70px rgba(4,16,40,.55), inset 0 1px 0 rgba(255,255,255,.1)}
.phone-notch{position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:82px; height:6px; border-radius:99px; background:rgba(255,255,255,.22)}
.phone-top{display:flex; align-items:center; gap:10px; padding:20px 10px 12px;
  border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:12px}
.phone-av{width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:hsl(var(--primary)); color:#fff; font-size:12px; font-weight:750; flex:0 0 auto}
.phone-top b{display:block; color:#fff; font-size:13.5px; line-height:1.2}
.phone-top small{color:hsl(var(--success)); font-size:11px}
.phone-body{display:flex; flex-direction:column; gap:8px; padding:0 8px}
.pb{max-width:84%; padding:8px 11px; border-radius:13px; font-size:12.5px; line-height:1.45}
.pb.in{align-self:flex-start; background:rgba(255,255,255,.1); color:rgba(255,255,255,.92);
  border-bottom-left-radius:4px}
.pb.out{align-self:flex-end; background:hsl(var(--primary)); color:#fff;
  border-bottom-right-radius:4px}
.pb.out i{font-style:normal; font-size:10px; opacity:.85; margin-left:5px}
.pb.typing{align-self:flex-start; background:rgba(255,255,255,.1); display:flex; gap:4px;
  padding:11px 12px}
.pb.typing span{width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.6);
  animation:pbdot 1.2s infinite}
.pb.typing span:nth-child(2){animation-delay:.18s}
.pb.typing span:nth-child(3){animation-delay:.36s}
@keyframes pbdot{0%,60%,100%{opacity:.35; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}

/* floating cards, so the phone is not alone in the space */
/* The colour has to be stated: the hero sets white text, and these cards sit on
   a white background, so the figure was rendering white-on-white. */
.hero-chip{position:absolute; background:hsl(var(--card)); color:hsl(var(--foreground));
  border-radius:14px;
  padding:11px 14px; box-shadow:0 18px 40px rgba(4,16,40,.4); display:flex;
  flex-direction:column; line-height:1.3}
.hero-chip b{font-size:16px; font-weight:800; letter-spacing:-.02em}
.hero-chip span{font-size:11.5px; color:hsl(var(--muted-foreground))}
.chip-a{top:16%; left:-6px}
.chip-b{bottom:14%; right:-10px}
.chip-b .dot{width:8px; height:8px; border-radius:50%; background:hsl(var(--success));
  margin-bottom:5px}

/* ---- trust strip ---- */
.pub-stats{background:hsl(var(--navy-2)); border-top:1px solid rgba(255,255,255,.1)}
.pub-stats .pub-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  padding-top:30px; padding-bottom:30px}
.stat b{display:block; font-size:24px; font-weight:800; color:#fff; letter-spacing:-.02em}
.stat span{font-size:12.8px; color:rgba(255,255,255,.62); line-height:1.45}

/* ---- how it works ---- */
.steps{list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step}
.steps li{position:relative; background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius-xl); padding:30px 24px 24px}
.step-n{position:absolute; top:-16px; left:24px; width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center; background:hsl(var(--primary)); color:#fff;
  font-weight:800; font-size:16px; box-shadow:0 8px 20px hsl(var(--primary)/.35)}
.steps h3{font-size:17px; margin:10px 0 8px; font-weight:750; letter-spacing:-.02em}
.steps p{font-size:14px; line-height:1.62; color:hsl(var(--muted-foreground)); margin:0}

/* ---- faq ---- */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.faq-item{background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius); overflow:hidden}
.faq-item summary{cursor:pointer; list-style:none; padding:17px 20px; font-size:15.5px;
  font-weight:650; display:flex; align-items:center; gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-mark{margin-left:auto; flex:0 0 auto; width:18px; height:18px; position:relative}
.faq-mark::before,.faq-mark::after{content:""; position:absolute; background:hsl(var(--primary));
  border-radius:2px; transition:transform .2s}
.faq-mark::before{left:0; top:8px; width:18px; height:2px}
.faq-mark::after{left:8px; top:0; width:2px; height:18px}
.faq-item[open] .faq-mark::after{transform:rotate(90deg); opacity:0}
.faq-item p{margin:0; padding:0 20px 19px; font-size:14.5px; line-height:1.7;
  color:hsl(var(--muted-foreground)); max-width:68ch}
.faq-item[open]{border-color:hsl(var(--primary)/.4)}

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr; gap:44px}
  .hero-art{order:2}
  .pub-stats .pub-inner{grid-template-columns:repeat(2,1fr); gap:22px}
  .steps{grid-template-columns:1fr; gap:30px}
}
@media (max-width:560px){
  .hero-chip{display:none}
  .phone{width:238px}
  .pub-stats .pub-inner{grid-template-columns:1fr; gap:18px}
  .stat b{font-size:20px}
}

/* ---- who it is for ---- */
/* Four items read better as 2x2 than as a row of three with one orphan. */
.who-grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr))}
.who-card{display:flex; gap:16px; align-items:flex-start; padding:22px 22px;
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:var(--radius-xl); transition:border-color .18s, transform .18s}
.who-card:hover{border-color:hsl(var(--primary)/.35); transform:translateY(-2px)}
.who-icon{flex:0 0 auto; width:46px; height:46px; border-radius:13px; display:grid;
  place-items:center; background:hsl(var(--primary)/.11); color:hsl(var(--primary))}
.who-icon svg{width:22px; height:22px}
.who-card b{display:block; font-size:16px; font-weight:750; letter-spacing:-.02em; margin-bottom:5px}
.who-card p{margin:0; font-size:13.8px; line-height:1.6; color:hsl(var(--muted-foreground))}

/* ---- inner page banner (docs, pricing, auth) ---- */
.pub-banner{position:relative; overflow:hidden; color:#fff; padding:56px 0 52px; text-align:center;
  background:
    radial-gradient(700px 320px at 50% -30%, hsl(var(--primary)/.45), transparent 70%),
    linear-gradient(160deg, hsl(var(--navy)) 0%, hsl(var(--navy-2)) 100%)}
.pub-banner::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(90% 90% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(90% 90% at 50% 0%, #000 10%, transparent 72%)}
.pub-banner .pub-inner{display:block; position:relative; z-index:1}
.pub-banner h1{font-size:clamp(28px,3.6vw,42px); margin:0 0 10px; font-weight:800;
  letter-spacing:-.03em}
.crumb{display:flex; justify-content:center; gap:10px; font-size:13.5px;
  color:rgba(255,255,255,.62)}
.crumb a{color:#7ecbff; font-weight:600}
.crumb a:hover{color:#fff}

/* ---- article container for text-heavy pages ---- */
.pub-article{max-width:800px; margin:0 auto}
.pub-article h2{font-size:22px; margin:34px 0 10px; font-weight:750; letter-spacing:-.02em}
.pub-article h2:first-child{margin-top:0}
.pub-article p{font-size:15px; line-height:1.72; color:hsl(var(--muted-foreground)); margin:0 0 14px}
.pub-article .lede{font-size:16px; color:hsl(var(--muted-foreground)); margin-bottom:8px}
.pub-article .code{margin:14px 0 6px}
.pub-sec .lede{font-size:16px; line-height:1.7; color:hsl(var(--muted-foreground))}

/* ---- auth card ---- */
.auth-card{max-width:480px; margin:0 auto; background:hsl(var(--card));
  border:1px solid hsl(var(--border)); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md); padding:34px 34px 30px}
.auth-card-sub{margin:0 0 24px; font-size:14.5px; color:hsl(var(--muted-foreground)); text-align:center}
.auth-card .field{margin-bottom:18px}
.auth-card .btn{width:100%; padding:13px 18px; font-size:15px; font-weight:650; margin-top:10px}
.auth-assure{display:flex; align-items:center; justify-content:center; gap:8px;
  margin:20px auto 0; max-width:480px; font-size:12.5px;
  color:hsl(var(--muted-foreground)); text-align:center}
.auth-assure svg{width:15px; height:15px; flex:0 0 auto; color:hsl(var(--success))}

@media (max-width:560px){
  .auth-card{padding:26px 20px 24px; border:0; box-shadow:none; background:transparent}
  .pub-banner{padding:40px 0 38px}
}

/* ---- device: monthly new-conversation allowance ---- */
.dr-newchat{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  margin:10px 0 4px; font-size:12.8px; color:hsl(var(--muted-foreground))}
.dr-newchat b{color:hsl(var(--foreground)); font-weight:700}
.dr-newchat em{font-style:normal; font-size:12px}
.dr-newchat.is-low b{color:hsl(var(--warning))}
.dr-newchat.is-out b, .dr-newchat.is-out em{color:hsl(var(--destructive))}

/* ---- attachments inside a chat bubble ---- */
.bub-media{display:block; max-width:260px; border-radius:10px; overflow:hidden; margin-bottom:2px}
.bub-media img, .bub-media video{display:block; width:100%; height:auto; border-radius:10px}
.bub-audio{display:block; width:240px; max-width:100%; height:38px; margin-bottom:2px}
.bub-file{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:10px;
  background:hsl(var(--surface-low)); border:1px solid hsl(var(--border));
  color:inherit; margin-bottom:2px; max-width:250px}
.bub-file svg{width:19px; height:19px; flex:0 0 auto; color:hsl(var(--primary))}
.bub-file span{font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bub-cap{display:block; margin-top:5px}

/* =================================================================
   Chat, part two: the things a person does to a message or a chat.
   ================================================================= */

/* ---- filter tabs over the conversation list ---- */
.chat-tabs{
  display:flex; gap:6px; padding:8px 10px 10px; overflow-x:auto;
  border-bottom:1px solid hsl(var(--border)); scrollbar-width:none;
}
.chat-tabs::-webkit-scrollbar{display:none}
.chat-tab{
  flex:0 0 auto; padding:5px 11px; border-radius:999px; font-size:12.5px;
  font-weight:600; text-decoration:none; white-space:nowrap;
  color:hsl(var(--muted-foreground)); background:hsl(var(--surface-low));
  border:1px solid transparent;
}
.chat-tab:hover{background:hsl(var(--surface-container))}
.chat-tab.is-on{
  color:hsl(var(--primary-foreground)); background:hsl(var(--primary));
}
.chat-tab b{font-weight:700; opacity:.75; margin-left:3px}

/* ---- a row in the list, with its own menu button ---- */
.chat-row-wrap{position:relative}
.chat-row-wrap.is-active{background:hsl(var(--surface-container))}
.chat-row-menu{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:0; border-radius:6px; cursor:pointer;
  background:transparent; color:hsl(var(--muted-foreground));
  opacity:0; transition:opacity .12s; display:grid; place-items:center;
}
.chat-row-wrap:hover .chat-row-menu,
.chat-row-menu:focus-visible{opacity:1; background:hsl(var(--surface-low))}
.chat-row-menu svg{width:15px; height:15px}

.chat-meta{display:inline-flex; align-items:center; gap:5px}
.chat-flag{width:13px; height:13px; color:hsl(var(--muted-foreground)); flex:0 0 auto}
.chat-badge.is-muted{background:hsl(var(--muted-foreground)); opacity:.6}
.chat-badge.is-dot{
  width:9px; height:9px; min-width:0; padding:0; border-radius:50%; font-size:0;
}

/* ---- the quoted message above a reply ---- */
.bub-quote{
  display:flex; flex-direction:column; gap:1px; width:100%; text-align:left;
  margin:0 0 4px; padding:5px 8px; border:0; border-left:3px solid hsl(var(--primary));
  border-radius:5px; cursor:pointer; font:inherit;
  background:hsl(var(--foreground) / .055);
}
.bub-quote:hover{background:hsl(var(--foreground) / .09)}
.bq-who{font-size:11.5px; font-weight:700; color:hsl(var(--primary))}
.bq-body{
  font-size:12.5px; line-height:1.35; color:hsl(var(--muted-foreground));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.bub-star{width:11px; height:11px; color:hsl(var(--muted-foreground))}

/* The caret that opens a message's menu, as WhatsApp has it. */
.bub-menu{
  position:absolute; top:2px; right:2px; width:24px; height:22px;
  border:0; border-radius:4px; cursor:pointer; padding:0;
  background:transparent; color:hsl(var(--muted-foreground));
  opacity:0; transition:opacity .12s; display:grid; place-items:center;
}
.bubble:hover .bub-menu, .bub-menu:focus-visible{opacity:.85}
.bubble.is-out .bub-menu{background:linear-gradient(90deg,transparent,hsl(var(--wa-out)) 42%)}
.bubble.is-in  .bub-menu{background:linear-gradient(90deg,transparent,hsl(var(--card)) 42%)}
.bub-menu svg{width:14px; height:14px}

/* Jumped to from a quote or a search hit. */
@keyframes bubbleFlash{
  0%,100%{box-shadow:0 1px .5px hsl(215 25% 20% / .13)}
  35%    {box-shadow:0 0 0 3px hsl(var(--primary) / .45)}
}
.bubble.is-flash{animation:bubbleFlash 1.2s ease}

/* ---- where the unread run begins ---- */
.unread-split{display:flex; justify-content:center; margin:12px 0 6px}
.unread-split span{
  background:hsl(var(--primary)); color:hsl(var(--primary-foreground));
  border-radius:999px; padding:3px 14px; font-size:11px;
  font-weight:700; letter-spacing:.3px; text-transform:uppercase;
}

.load-older{display:flex; justify-content:center; padding:4px 0 10px}
.load-older button{
  border:1px solid hsl(var(--border)); background:hsl(var(--card));
  color:hsl(var(--muted-foreground)); border-radius:999px;
  padding:5px 14px; font-size:12px; font-weight:600; cursor:pointer;
}
.load-older button:hover{background:hsl(var(--surface-low))}
.load-older button:disabled{opacity:.6; cursor:default}

/* ---- search inside one conversation ---- */
.chat-find[hidden]{display:none}
.chat-find{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 16px; background:hsl(var(--card));
  border-bottom:1px solid hsl(var(--border));
}
.chat-find input{flex:1; min-width:160px}
.find-hits{
  flex-basis:100%; max-height:190px; overflow-y:auto;
  display:flex; flex-direction:column; gap:2px;
}
.find-hit{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  text-align:left; border:0; background:transparent; cursor:pointer;
  padding:6px 8px; border-radius:6px; font:inherit; font-size:12.8px;
  color:hsl(var(--foreground));
}
.find-hit:hover{background:hsl(var(--surface-low))}
.find-hit small{color:hsl(var(--muted-foreground)); flex:0 0 auto; font-size:11px}

.chat-head-btn{
  width:32px; height:32px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:hsl(var(--muted-foreground));
  display:grid; place-items:center;
}
.chat-head-btn:hover{background:hsl(var(--surface-low))}
.chat-head-btn svg{width:17px; height:17px}

/* ---- the message being replied to, above the composer ---- */
/* `hidden` is only `display:none` from the browser's own sheet, so a rule
   that sets display here beats it. Without this line the reply bar sits above
   the composer permanently, empty, which is exactly how it shipped once. */
.reply-note[hidden]{display:none}
.reply-note{
  display:flex; align-items:stretch; gap:9px; margin:0 0 8px;
  padding:7px 9px; border-radius:7px; background:hsl(var(--surface-low));
}
.rn-bar{width:3px; border-radius:2px; background:hsl(var(--primary)); flex:0 0 auto}
.rn-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.rn-body b{font-size:11.5px; color:hsl(var(--primary))}
.rn-body span{
  font-size:12.5px; color:hsl(var(--muted-foreground));
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rn-x{
  border:0; background:transparent; cursor:pointer; font-size:20px; line-height:1;
  color:hsl(var(--muted-foreground)); padding:0 4px; align-self:center;
}

.composer-icon{
  flex:0 0 auto; width:36px; height:36px; border:0; border-radius:50%;
  cursor:pointer; display:grid; place-items:center;
  background:transparent; color:hsl(var(--muted-foreground));
}
.composer-icon:hover{background:hsl(var(--surface-low)); color:hsl(var(--foreground))}
.composer-icon svg{width:20px; height:20px}

/* ---- popup menus ---- */
.pop[hidden]{display:none}
.pop{
  position:fixed; z-index:80; min-width:176px; padding:5px;
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:10px; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
}
.pop button{
  text-align:left; border:0; background:transparent; cursor:pointer;
  padding:8px 11px; border-radius:6px; font:inherit; font-size:13.2px;
  color:hsl(var(--foreground));
}
.pop button:hover{background:hsl(var(--surface-low))}
.pop button.is-danger{color:hsl(var(--destructive))}

/* ---- emoji ---- */
.emoji-pop{
  position:fixed; z-index:80; width:328px; max-width:calc(100vw - 16px);
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:12px; box-shadow:var(--shadow-lg); overflow:hidden;
}
.emoji-tabs{
  display:flex; gap:2px; padding:6px; border-bottom:1px solid hsl(var(--border));
}
.emoji-tabs button{
  flex:1; border:0; background:transparent; cursor:pointer;
  font-size:17px; line-height:1; padding:5px 0; border-radius:6px;
}
.emoji-tabs button.is-on{background:hsl(var(--surface-container))}
.emoji-grid{
  display:grid; grid-template-columns:repeat(8, 1fr);
  gap:1px; padding:7px; max-height:216px; overflow-y:auto;
}
.emoji-grid button{
  border:0; background:transparent; cursor:pointer; border-radius:6px;
  font-size:21px; line-height:1; padding:4px 0;
}
.emoji-grid button:hover{background:hsl(var(--surface-low))}

/* ---- full-screen picture viewer ---- */
.lightbox{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  background:hsl(215 30% 6% / .92); padding:56px 24px;
}
.lightbox[hidden]{display:none}
.lightbox img{
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:6px; box-shadow:var(--shadow-lg);
}
.lb-close, .lb-nav{
  position:absolute; border:0; cursor:pointer; color:#fff;
  background:hsl(0 0% 100% / .12); border-radius:50%;
  width:42px; height:42px; font-size:24px; line-height:1;
  display:grid; place-items:center;
}
.lb-close:hover, .lb-nav:hover{background:hsl(0 0% 100% / .22)}
.lb-close{top:16px; right:18px}
.lb-prev{left:18px; top:50%; transform:translateY(-50%)}
.lb-next{right:18px; top:50%; transform:translateY(-50%)}
.lb-save{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:#fff; background:hsl(0 0% 100% / .12); border-radius:999px;
  padding:7px 18px; font-size:13px; font-weight:600; text-decoration:none;
}
.lb-save:hover{background:hsl(0 0% 100% / .22)}

.mini-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:140; background:hsl(var(--foreground)); color:hsl(var(--background));
  padding:9px 18px; border-radius:999px; font-size:13px; font-weight:600;
  box-shadow:var(--shadow-lg);
}

@media (max-width:720px){
  .emoji-grid{grid-template-columns:repeat(7, 1fr)}
  .bub-menu, .chat-row-menu{opacity:.75}
  .lightbox{padding:60px 10px}
}

/* =================================================================
   Admin: trends, the fortnight chart, and the attention list.
   ================================================================= */

/* ---- a number set against what it was ---- */
.trend{
  display:inline-flex; align-items:center; gap:2px;
  font-size:11.5px; font-weight:700; letter-spacing:.2px;
  padding:2px 6px; border-radius:999px; vertical-align:middle;
  margin-left:7px; position:relative; top:-2px;
}
.trend.is-good{background:hsl(var(--success)/.14); color:hsl(var(--success))}
.trend.is-bad {background:hsl(var(--destructive)/.13); color:hsl(var(--destructive))}
.trend.is-flat{background:hsl(var(--surface-container)); color:hsl(var(--muted-foreground))}

.card.stat.is-link{text-decoration:none; color:inherit; transition:border-color .12s}
.card.stat.is-link:hover{border-color:hsl(var(--primary)/.5)}

/* ---- the fortnight line ---- */
.spark-wrap{margin:14px 0 2px; height:72px}
.spark{width:100%; height:100%; display:block; overflow:visible}
.spark-fill{fill:var(--spark); opacity:.1}
.spark-line{
  fill:none; stroke:var(--spark); stroke-width:1.6;
  stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.spark-dot{fill:var(--spark); stroke:hsl(var(--card)); stroke-width:1.4;
  vector-effect:non-scaling-stroke}

.spark-axis{
  display:flex; justify-content:space-between;
  font-size:11px; color:hsl(var(--muted-foreground));
}
.spark-axis span{flex:1; text-align:center; white-space:nowrap}
.spark-axis span:first-child{text-align:left}
.spark-axis span:last-child{text-align:right}

/* ---- the list of things waiting on a decision ---- */
.att-list{display:flex; flex-direction:column; gap:2px; margin-top:4px}
.att-row{
  display:flex; align-items:center; gap:11px; padding:10px 11px;
  border-radius:9px; text-decoration:none; color:inherit;
  border:1px solid transparent; transition:background .12s, border-color .12s;
}
.att-row:hover{background:hsl(var(--surface-low)); border-color:hsl(var(--border))}
.att-dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  box-shadow:0 0 0 3px hsl(var(--card));
}
.att-row.is-bad  .att-dot{background:hsl(var(--destructive))}
.att-row.is-warn .att-dot{background:hsl(var(--warning))}
.att-row.is-info .att-dot{background:hsl(var(--primary))}
.att-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.att-body b{font-size:13.6px; font-weight:600}
.att-body small{font-size:12px; color:hsl(var(--muted-foreground))}
.att-go{
  flex:0 0 auto; font-size:12.2px; font-weight:600;
  color:hsl(var(--muted-foreground)); white-space:nowrap;
}
.att-row:hover .att-go{color:hsl(var(--primary))}

/* ---- filter chips over a table ---- */
.filter-bar{
  display:flex; gap:7px; flex-wrap:wrap; margin:0 0 14px;
}
.fb-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px; font-size:12.8px; font-weight:600;
  text-decoration:none; color:hsl(var(--muted-foreground));
  background:hsl(var(--surface-low)); border:1px solid transparent;
}
.fb-chip:hover{background:hsl(var(--surface-container))}
.fb-chip b{
  font-size:11.5px; font-weight:700; padding:1px 6px; border-radius:999px;
  background:hsl(var(--foreground)/.08);
}
.fb-chip.is-on{
  color:hsl(var(--primary-foreground)); background:hsl(var(--primary));
}
.fb-chip.is-on b{background:hsl(0 0% 100% / .22)}
.fb-chip.tone-warn:not(.is-on){color:hsl(var(--warning))}
.fb-chip.tone-warn:not(.is-on) b{background:hsl(var(--warning)/.16)}
.fb-chip.tone-bad:not(.is-on){color:hsl(var(--destructive))}
.fb-chip.tone-bad:not(.is-on) b{background:hsl(var(--destructive)/.14)}
.fb-chip.tone-ok:not(.is-on){color:hsl(var(--success))}
.fb-chip.tone-ok:not(.is-on) b{background:hsl(var(--success)/.14)}

@media (max-width:720px){
  .att-go{display:none}
  .spark-wrap{height:60px}
}

/* A progress sliver inside a table cell - warm-up, allowance, share of
   revenue. Thin on purpose: it sits under a number, it does not replace it. */
.bar-mini{
  height:3px; border-radius:2px; margin-top:4px; overflow:hidden;
  background:hsl(var(--foreground)/.1); max-width:110px;
}
.bar-mini i{display:block; height:100%; background:hsl(var(--primary)); border-radius:2px}
.bar-mini.is-high i{background:hsl(var(--warning))}
.bar-mini.is-full i{background:hsl(var(--destructive))}

/* The billing system's own facts, beside the conversation. */
.crm-card{
  margin:4px 0 14px; padding:11px 12px; border-radius:10px;
  background:hsl(var(--surface-low)); border:1px solid hsl(var(--border));
}
.crm-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:10.5px; font-weight:800; letter-spacing:.7px;
  color:hsl(var(--primary)); margin-bottom:7px;
}
.crm-head small{font-weight:600; letter-spacing:0; color:hsl(var(--muted-foreground))}
.crm-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:3px 0; font-size:12.8px;
}
.crm-row span{color:hsl(var(--muted-foreground)); flex:0 0 auto}
.crm-row b{font-weight:600; text-align:right; min-width:0; word-break:break-word}
.crm-row b small{font-weight:500; color:hsl(var(--muted-foreground)); margin-left:4px}
.crm-row b.is-warn{color:hsl(var(--warning))}
.crm-row b.is-bad{color:hsl(var(--destructive))}
.crm-foot{
  margin-top:8px; padding-top:7px; border-top:1px solid hsl(var(--border));
  font-size:11px; color:hsl(var(--muted-foreground));
}

/* =================================================================
   The composer, in WhatsApp's shape: one row that becomes the recorder.
   ================================================================= */

.composer{position:relative}
.cmp-idle{display:flex; align-items:flex-end; gap:6px; width:100%}
.cmp-idle[hidden]{display:none}

/* The one button on the right: a microphone until there is something to
   send, then the arrow. Same place, same size, so nothing jumps. */
.cmp-go{
  flex:0 0 auto; width:40px; height:40px; border:0; border-radius:50%;
  cursor:pointer; display:grid; place-items:center; padding:0;
  background:transparent; color:hsl(var(--muted-foreground));
  transition:background .14s, color .14s;
}
.cmp-go:hover{background:hsl(var(--surface-low)); color:hsl(var(--foreground))}
.cmp-go svg{width:21px; height:21px; grid-area:1/1}
.cmp-go .go-send{display:none}
.cmp-go.is-send{background:hsl(var(--primary)); color:hsl(var(--primary-foreground))}
.cmp-go.is-send:hover{filter:brightness(1.06)}
.cmp-go.is-send .go-mic{display:none}
.cmp-go.is-send .go-send{display:block; margin-left:2px}

/* ---- the same row, recording ---- */
.cmp-rec{display:flex; align-items:center; gap:10px; width:100%}
.cmp-rec[hidden]{display:none}

.rec-icon{
  flex:0 0 auto; width:38px; height:38px; border:0; border-radius:50%;
  cursor:pointer; display:grid; place-items:center; padding:0;
  background:transparent; color:hsl(var(--muted-foreground));
}
.rec-icon:hover{background:hsl(var(--surface-low)); color:hsl(var(--foreground))}
.rec-icon svg{width:19px; height:19px; grid-area:1/1}
.rec-bin:hover{color:hsl(var(--destructive))}

.rec-dot{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:hsl(var(--destructive)); animation:recPulse 1.1s ease-in-out infinite;
}
.cmp-rec.is-paused .rec-dot{animation:none; opacity:.4}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.2}}

.rec-time{
  flex:0 0 auto; font-variant-numeric:tabular-nums;
  font-weight:600; font-size:13.5px; min-width:38px;
}

/* The live level. Fills the middle, like the waveform WhatsApp draws. */
.rec-wave{
  flex:1; min-width:0; height:28px; display:block;
  color:hsl(var(--muted-foreground));
}
.cmp-rec.is-paused .rec-wave{opacity:.4}

/* Pause and carry on share one button. */
.pz-play{display:none}
.cmp-rec.is-paused .pz-pause{display:none}
.cmp-rec.is-paused .pz-play{display:block; margin-left:2px}

/* ---- listening to it before it goes ----

   While recording: a red dot, a live level, pause, and a stop button.
   Once stopped: a play button, a position bar you can scrub, and send.
   The same row throughout, so nothing jumps about.                    */
.rec-play{display:none}
.rec-seek{display:none}
.cmp-rec.is-preview .rec-dot{display:none}
.cmp-rec.is-preview .rec-wave{display:none}
.cmp-rec.is-preview #recPause{display:none}
.cmp-rec.is-preview .rec-play{display:grid}
.cmp-rec.is-preview .rec-seek{display:block}

.rec-play .pb-pause{display:none}
.cmp-rec.is-playing .rec-play .pb-play{display:none}
.cmp-rec.is-playing .rec-play .pb-pause{display:block}
.rec-play .pb-play{margin-left:2px}

/* The position bar. Generous hit area, thin line - it is scrubbed by eye. */
.rec-seek{
  flex:1; min-width:0; height:28px; cursor:pointer; position:relative;
}
.rec-seek::before{
  content:''; position:absolute; left:0; right:0; top:50%; height:3px;
  transform:translateY(-50%); border-radius:2px;
  background:hsl(var(--foreground) / .15);
}
.rec-seek i{
  position:absolute; left:0; top:50%; height:3px; width:0;
  transform:translateY(-50%); border-radius:2px;
  background:hsl(var(--primary)); transition:width .08s linear;
}
.chat-wrap .rec-seek i{background:hsl(var(--wa-green))}

/* The right-hand button stops first, and only then sends. */
.rs-send{display:none}
.cmp-rec.is-preview .rs-stop{display:none}
.cmp-rec.is-preview .rs-send{display:block; margin-left:2px}

@media (max-width:720px){
  .rec-time{min-width:34px; font-size:12.5px}
  .rec-icon{width:34px; height:34px}
  .cmp-go{width:38px; height:38px}
}

/* =================================================================
   Chat, dressed as WhatsApp.

   Only inside .chat-wrap, so the rest of the panel keeps its own
   identity. The values are WhatsApp's own: the teal of the header
   icons, the pale green of your own bubbles, the paper tone behind
   the thread, and the particular grey of a divider that starts
   after the avatar rather than at the edge.
   ================================================================= */
.chat-wrap{
  --wa-green:   168 100% 33%;   /* #00a884 */
  --wa-deep:    170 100% 25%;   /* #008069 - header, ticks */
  --wa-panel:   0 0% 100%;
  --wa-rail:    200 7% 94%;     /* the list's own background */
  --wa-line:    200 10% 90%;
  --wa-ink:     200 7% 20%;
  --wa-dim:     200 6% 46%;
  --wa-bubble:  0 0% 100%;
  --wa-mine:    103 55% 90%;    /* #d9fdd3 */
  --wa-tick:    200 97% 60%;    /* the blue of a read receipt */
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .chat-wrap{
    --wa-panel:  200 8% 13%;
    --wa-rail:   200 8% 11%;
    --wa-line:   200 7% 20%;
    --wa-ink:    200 10% 92%;
    --wa-dim:    200 6% 60%;
    --wa-bubble: 200 8% 16%;
    --wa-mine:   170 60% 19%;   /* #005c4b */
  }
}
:root[data-theme="dark"] .chat-wrap{
  --wa-panel:  200 8% 13%; --wa-rail: 200 8% 11%; --wa-line: 200 7% 20%;
  --wa-ink:    200 10% 92%; --wa-dim: 200 6% 60%;
  --wa-bubble: 200 8% 16%; --wa-mine: 170 60% 19%;
}

/* ---- the conversation list ---- */
.chat-wrap .chat-list{background:hsl(var(--wa-panel)); border-right:1px solid hsl(var(--wa-line))}
.chat-wrap .chat-list-head{
  padding:8px 12px 6px; border-bottom:0; background:hsl(var(--wa-panel));
}

/* The search box is a pill, the way WhatsApp draws it. */
.chat-wrap .chat-search input{
  width:100%; border-radius:8px; border:0; padding:8px 12px 8px 38px;
  background:hsl(var(--wa-rail)); color:hsl(var(--wa-ink)); font-size:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238696a0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:13px center;
}
.chat-wrap .chat-search input:focus{outline:2px solid hsl(var(--wa-green)/.4); outline-offset:-2px}

/* Filter pills. */
.chat-wrap .chat-tabs{border-bottom:1px solid hsl(var(--wa-line)); padding:4px 12px 10px}
.chat-wrap .chat-tab{
  background:hsl(var(--wa-rail)); color:hsl(var(--wa-dim));
  padding:5px 13px; font-size:13px; font-weight:500;
}
.chat-wrap .chat-tab.is-on{
  background:hsl(var(--wa-green)/.18); color:hsl(var(--wa-deep)); font-weight:600;
}
.chat-wrap .chat-tab b{background:transparent; opacity:1; font-weight:600}

/* A row: 49px avatar, and a divider that starts after it. */
.chat-wrap .chat-row-wrap{background:hsl(var(--wa-panel))}
.chat-wrap .chat-row-wrap + .chat-row-wrap .chat-row{border-top:1px solid hsl(var(--wa-line))}
.chat-wrap .chat-row{padding:10px 14px; gap:14px; align-items:center}
.chat-wrap .chat-row:hover,
.chat-wrap .chat-row-wrap:hover{background:hsl(var(--wa-rail))}
.chat-wrap .chat-row-wrap.is-active,
.chat-wrap .chat-row.is-active{background:hsl(var(--wa-rail))}
.chat-wrap .chat-av{width:49px; height:49px; font-size:17px}
.chat-wrap .chat-name{font-size:15.5px; font-weight:450; color:hsl(var(--wa-ink))}
.chat-wrap .chat-when{font-size:11.5px; color:hsl(var(--wa-dim))}
.chat-wrap .chat-sub{font-size:13.5px; color:hsl(var(--wa-dim)); margin-top:2px}
.chat-wrap .chat-badge{
  background:hsl(var(--wa-green)); color:#fff; font-size:11.5px; font-weight:600;
  min-width:19px; height:19px; border-radius:10px;
}
.chat-wrap .chat-flag{color:hsl(var(--wa-dim))}

/* ---- the open conversation ---- */
.chat-wrap .chat-head{
  background:hsl(var(--wa-rail)); border-bottom:1px solid hsl(var(--wa-line));
  padding:9px 16px;
}
.chat-wrap .chat-head b{font-size:15.5px; font-weight:500; color:hsl(var(--wa-ink))}
.chat-wrap .chat-head .hint{font-size:12.5px; color:hsl(var(--wa-dim))}
.chat-wrap .chat-head-btn{color:hsl(var(--wa-dim))}
.chat-wrap .chat-head-btn:hover{background:hsl(var(--wa-line))}

/* The thread, on WhatsApp's own paper. */
.chat-wrap .chat-thread{
  background-color:hsl(var(--wa-tint));
  padding:14px 6%;
}

.chat-wrap .day-split span{
  background:hsl(var(--wa-panel)); color:hsl(var(--wa-dim));
  border:0; box-shadow:0 1px .5px hsl(0 0% 0% / .13);
  text-transform:uppercase; font-size:11.5px; letter-spacing:.4px;
}

/* ---- bubbles ---- */
.chat-wrap .bubble{
  max-width:min(65%, 560px); border-radius:7.5px; padding:6px 9px 8px;
  box-shadow:0 1px .5px hsl(0 0% 0% / .13); border:0;
}
.chat-wrap .bubble.is-in{background:hsl(var(--wa-bubble))}
.chat-wrap .bubble.is-out{background:hsl(var(--wa-mine))}
.chat-wrap .bubble-text{font-size:14.2px; line-height:19px; color:hsl(var(--wa-ink))}
.chat-wrap .bubble-time{
  font-size:11px; color:hsl(var(--wa-dim)); margin:4px 0 -3px 8px;
}

/* The little tail on the first bubble of a run, drawn rather than faked
   with a corner radius - it is the single most recognisable thing about
   a WhatsApp thread. */
.chat-wrap .bubble.is-in:first-of-type,
.chat-wrap .bubble.is-out + .bubble.is-in,
.chat-wrap .day-split + .bubble.is-in,
.chat-wrap .unread-split + .bubble.is-in{border-top-left-radius:0}
.chat-wrap .bubble.is-out:first-of-type,
.chat-wrap .bubble.is-in + .bubble.is-out,
.chat-wrap .day-split + .bubble.is-out,
.chat-wrap .unread-split + .bubble.is-out{border-top-right-radius:0}

.chat-wrap .bubble.is-in:first-of-type::before,
.chat-wrap .bubble.is-out + .bubble.is-in::before,
.chat-wrap .day-split + .bubble.is-in::before,
.chat-wrap .unread-split + .bubble.is-in::before,
.chat-wrap .bubble.is-out:first-of-type::before,
.chat-wrap .bubble.is-in + .bubble.is-out::before,
.chat-wrap .day-split + .bubble.is-out::before,
.chat-wrap .unread-split + .bubble.is-out::before{
  content:''; position:absolute; top:0; width:8px; height:13px;
}
.chat-wrap .bubble.is-in:first-of-type::before,
.chat-wrap .bubble.is-out + .bubble.is-in::before,
.chat-wrap .day-split + .bubble.is-in::before,
.chat-wrap .unread-split + .bubble.is-in::before{
  left:-8px;
  background:hsl(var(--wa-bubble));
  clip-path:polygon(100% 0, 100% 100%, 0 0);
}
.chat-wrap .bubble.is-out:first-of-type::before,
.chat-wrap .bubble.is-in + .bubble.is-out::before,
.chat-wrap .day-split + .bubble.is-out::before,
.chat-wrap .unread-split + .bubble.is-out::before{
  right:-8px;
  background:hsl(var(--wa-mine));
  clip-path:polygon(0 0, 0 100%, 100% 0);
}

/* A read receipt is blue. Everything before it is grey. */
.chat-wrap .bubble-time .tick{color:hsl(var(--wa-dim))}
.chat-wrap .bubble-time .tick-read{color:hsl(var(--wa-tick))}

.chat-wrap .bub-quote{
  background:hsl(0 0% 0% / .06); border-left-color:hsl(var(--wa-green));
  border-radius:4px;
}
.chat-wrap .bq-who{color:hsl(var(--wa-green))}

.chat-wrap .unread-split span{
  background:hsl(var(--wa-panel)); color:hsl(var(--wa-dim));
  box-shadow:0 1px .5px hsl(0 0% 0% / .13); letter-spacing:.3px;
}

/* ---- the composer ---- */
.chat-wrap .chat-compose{
  background:hsl(var(--wa-rail)); border-top:0; padding:8px 16px;
}
.chat-wrap .composer textarea{
  background:hsl(var(--wa-panel)); border:0; border-radius:8px;
  padding:9px 12px; font-size:15px; color:hsl(var(--wa-ink));
}
.chat-wrap .composer textarea:focus{outline:0}
.chat-wrap .composer-icon,
.chat-wrap .rec-icon{color:hsl(var(--wa-dim))}
.chat-wrap .composer-icon:hover,
.chat-wrap .rec-icon:hover{background:hsl(var(--wa-line)); color:hsl(var(--wa-ink))}
.chat-wrap .cmp-go{color:hsl(var(--wa-dim))}
.chat-wrap .cmp-go:hover{background:hsl(var(--wa-line))}
.chat-wrap .cmp-go.is-send{background:hsl(var(--wa-green)); color:#fff}
.chat-wrap .cmp-go.is-send:hover{background:hsl(var(--wa-deep))}
.chat-wrap .rec-wave{color:hsl(var(--wa-green))}
.chat-wrap .chat-down{
  background:hsl(var(--wa-panel)); border:0;
  box-shadow:0 1px 3px hsl(0 0% 0% / .2); color:hsl(var(--wa-dim));
}

/* The page title above a chat client is wasted height - WhatsApp has none. */
.chat-wrap{margin-top:-4px}

/* A reaction, hanging off the bottom of the bubble as WhatsApp hangs it. */
.bub-react{
  position:absolute; bottom:-11px; right:8px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:21px; padding:0 5px; border-radius:11px;
  font-size:12.5px; line-height:1; cursor:default;
  background:hsl(var(--card)); box-shadow:0 1px 2px hsl(0 0% 0% / .22);
}
.chat-wrap .bubble.is-in .bub-react{background:hsl(var(--wa-bubble))}
.chat-wrap .bubble.is-out .bub-react{background:hsl(var(--wa-mine))}
.bubble.is-out .bub-react{right:auto; left:8px}

/* Reactions push the next bubble down a little, so they never overlap. */
.bubble:has(.bub-react){margin-bottom:9px}

/* The picker: one row, the six WhatsApp offers. */
.react-pop{
  position:fixed; z-index:90; display:flex; gap:2px; padding:5px 7px;
  background:hsl(var(--card)); border:1px solid hsl(var(--border));
  border-radius:999px; box-shadow:var(--shadow-lg);
}
.react-pop[hidden]{display:none}
.react-pop button{
  border:0; background:transparent; cursor:pointer; border-radius:50%;
  width:34px; height:34px; font-size:20px; line-height:1; padding:0;
  transition:transform .12s;
}
.react-pop button:hover{transform:scale(1.25); background:hsl(var(--surface-low))}

/* A conversation with nobody's name on it gets a person, not a hash. */
.chat-av.is-anon{
  display:grid; place-items:center;
  background:hsl(var(--surface-container)); color:hsl(var(--muted-foreground));
}
.chat-av.is-anon svg{width:60%; height:60%}
.chat-wrap .chat-av.is-anon{background:hsl(var(--wa-line)); color:hsl(var(--wa-dim))}
.chat-head img.chat-av{object-fit:cover}

/* How much room this account has to reach people who have never replied. */
.cold-now{flex:0 0 auto; text-align:right; min-width:150px}
.cold-now b{display:block; font-size:26px; line-height:1.1; font-weight:650}
.cold-now b span{font-size:16px; font-weight:500; color:hsl(var(--muted-foreground))}
.cold-now small{display:block; font-size:11.5px; color:hsl(var(--muted-foreground)); margin-top:2px}
.cold-now .bar-mini{max-width:none; margin-top:7px}

.cold-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:12px; margin-top:16px; padding-top:14px;
  border-top:1px solid hsl(var(--border));
}
.cold-grid b{display:block; font-size:19px; font-weight:650; line-height:1.2}
.cold-grid small{display:block; font-size:11.8px; color:hsl(var(--muted-foreground)); margin-top:2px}

@media (max-width:720px){
  .cold-now{text-align:left; min-width:0; width:100%}
}