/* Last Call OS — cookbook design system, Last Call accent (#FF1027).
   Plain CSS, tokens only, no build step. Shares its look with the demo
   Last Call was shown. */

:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;

  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px;
  --text-xl:24px; --text-2xl:32px;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.2; --leading-normal:1.5; --leading-relaxed:1.7;

  --neutral-50:#FBFAF7;  --neutral-100:#F4F2EC; --neutral-200:#E8E5DD;
  --neutral-300:#D1CDC1; --neutral-400:#9C998E; --neutral-500:#6B6960;
  --neutral-700:#3D3B36; --neutral-900:#1A1916;

  --success-500:#10B981; --success-50:#ECFDF5;
  --warning-500:#B45309; --warning-50:#FFFBEB;
  --danger-500:#EF4444;  --danger-50:#FEF2F2;
  --info-500:#3B82F6;    --info-50:#EFF6FF;

  --surface-base:var(--neutral-50); --surface-card:#FFFFFF;
  --border-default:var(--neutral-200); --border-strong:var(--neutral-300);
  --text-primary:var(--neutral-900); --text-secondary:var(--neutral-500);
  --text-tertiary:var(--neutral-400); --text-on-accent:#FFFFFF;

  /* LastCall brand red, sampled from lastcall.my */
  --accent-50:#FFF1F2; --accent-100:#FFE1E4; --accent-200:#FFC7CD;
  --accent-500:#FF1027; --accent-600:#DE0A1F; --accent-700:#B50717;
  --accent-900:#7A0510;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:20px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(20,20,18,.04);
  --shadow-md:0 4px 12px rgba(20,20,18,.06);
  --shadow-lg:0 12px 24px rgba(20,20,18,.08);
  --transition-fast:100ms ease; --transition-base:200ms ease;
}

/* The OS is written light. Say so, or a dark-mode phone resolves system
   colours against a dark scheme and paints white on white. */
html{color-scheme:light}

*{box-sizing:border-box}
body{
  margin:0; font-family:var(--font-sans); font-size:var(--text-base);
  line-height:var(--leading-normal); color:var(--text-primary);
  background:var(--surface-base); -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-700); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:var(--leading-tight); font-weight:var(--weight-semibold); margin:0}

/* Fill the screen. The gutter grows with it so content never runs into the
   bezel, and the cap only stops things on an ultrawide. */
.wrap{width:100%; max-width:1720px; margin:0 auto; padding:0 var(--space-4)}
@media(min-width:1024px){.wrap{padding:0 var(--space-6)}}
@media(min-width:1600px){.wrap{padding:0 var(--space-7)}}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-secondary)}
.dim{color:var(--text-tertiary)}
.small{font-size:var(--text-sm)}
.xs{font-size:var(--text-xs)}
.right{margin-left:auto}
.row{display:flex; align-items:center; gap:var(--space-3)}
.wrapper-row{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
.stack{display:flex; flex-direction:column; gap:var(--space-4)}
.hide{display:none !important}

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border-default);
}
/* The bar must never hide or overrun its own content. A fixed height with
   wrapping links spills them onto the page below; the bar grows instead and
   the links take a row of their own on a phone. */
/* padding-block, NOT the padding shorthand: .topbar-in also carries .wrap, and
   a shorthand here zeroes .wrap's horizontal padding (same specificity, later in
   the file) -- which left the nav flush to the screen edge while every page
   below it was inset. */
.topbar-in{display:flex; align-items:center; gap:var(--space-3) var(--space-4);
  min-height:56px; flex-wrap:wrap; padding-block:var(--space-2)}
@media(min-width:721px){.topbar-in{padding-block:0; flex-wrap:nowrap}}
@media(max-width:720px){
  .topbar-in .navlinks{order:3; width:100%; margin-top:2px}
  .topbar-in .who{order:2}
  .navlinks a{padding:var(--space-2)}
}
.brand{display:inline-flex; align-items:center; gap:var(--space-2); white-space:nowrap;
  font-weight:var(--weight-bold); color:var(--text-primary); font-size:var(--text-base)}
.brand:hover{text-decoration:none}
.brand-mark{
  width:26px; height:26px; border-radius:7px; background:var(--accent-500);
  color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:var(--weight-bold);
}
.navlinks{display:flex; gap:var(--space-1); flex-wrap:wrap}
.navlinks a{
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-secondary);
}
.navlinks a:hover{background:var(--neutral-100); color:var(--text-primary); text-decoration:none}
.navlinks a.on{background:var(--accent-50); color:var(--accent-700)}
.navlinks a.space-link{color:var(--accent-700); border:1px dashed var(--accent-200)}

.who{display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm);
  white-space:nowrap}
@media(max-width:480px){.who .uname{display:none}}
.avatar{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:var(--radius-full); background:var(--neutral-100); color:var(--text-secondary);
  font-size:var(--text-xs); font-weight:var(--weight-semibold);
  border:2px solid var(--avatar-color,var(--neutral-300)); flex:none;
}
.avatar.sm{width:22px; height:22px; font-size:10px; border-width:1.5px}

/* ---------- page head ---------- */
.page{padding:var(--space-6) 0 var(--space-9)}
.page-head{margin-bottom:var(--space-5)}
.page-head h1{font-size:var(--text-2xl); letter-spacing:-.02em}
.page-head p{margin:var(--space-2) 0 0; color:var(--text-secondary)}

/* ---------- tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4)}
@media(min-width:640px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{
  display:flex; flex-direction:column; justify-content:space-between; min-height:150px;
  padding:var(--space-5); background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-xl); cursor:pointer; transition:var(--transition-base);
  position:relative; color:inherit;
}
.tile:hover{border-color:var(--accent-500); box-shadow:var(--shadow-md);
  transform:translateY(-2px); text-decoration:none}
.tile-icon{
  width:40px; height:40px; border-radius:var(--radius-md);
  background:var(--tile-icon-bg,var(--neutral-100)); color:var(--tile-icon-fg,var(--neutral-700));
  display:inline-flex; align-items:center; justify-content:center;
}
.tile-icon svg{width:21px; height:21px}
.tile-name{font-size:var(--text-lg); font-weight:var(--weight-semibold); margin-top:var(--space-5)}
.tile-teaser{font-size:var(--text-sm); color:var(--text-secondary); margin-top:var(--space-1)}
.tile-badge{
  position:absolute; top:var(--space-3); right:var(--space-3); min-width:22px; height:22px;
  padding:0 var(--space-2); background:var(--danger-500); color:#fff;
  border-radius:var(--radius-full); font-size:var(--text-xs);
  font-weight:var(--weight-semibold); display:inline-flex; align-items:center; justify-content:center;
}
.tile.space-tile{border-style:dashed; border-color:var(--accent-200); background:#fff}

/* Not unlocked yet: an outline where a tile will go. No fill, no accent, no
   colour tint on the icon -- it must read as absent, not as a tile that failed
   to load. Clickable only to explain itself, so it is never a dead control. */
.tile.locked{
  background:transparent; border-color:var(--border-default); cursor:pointer;
}
.tile.locked:hover{
  border-color:var(--border-strong); background:var(--surface-card);
  box-shadow:none; transform:none;
}
.tile.locked:focus-visible{outline:2px solid var(--accent-500); outline-offset:2px}
.tile.locked .tile-icon{background:var(--neutral-100); color:var(--neutral-400)}
.tile.locked .tile-name{color:var(--text-secondary); font-weight:var(--weight-medium)}
.tile.locked .tile-teaser{color:var(--text-tertiary)}
.tile-lock{
  position:absolute; top:var(--space-3); right:var(--space-3);
  padding:2px var(--space-2); border-radius:var(--radius-full);
  background:var(--neutral-100); color:var(--text-tertiary);
  font-size:10px; font-weight:var(--weight-semibold);
  text-transform:uppercase; letter-spacing:.06em;
}

/* ---------- cards ---------- */
.card{background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); padding:var(--space-5)}
.card.tight{padding:var(--space-4)}

.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3);
  margin-bottom:var(--space-5)}
@media(min-width:768px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); padding:var(--space-4)}
.stat .n{font-size:var(--text-2xl); font-weight:var(--weight-semibold);
  letter-spacing:-.02em; line-height:1.1}
.stat .k{font-size:var(--text-sm); color:var(--text-secondary); margin-top:var(--space-1)}
.stat.accent .n{color:var(--accent-600)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:10px var(--space-4); font-family:inherit; font-size:var(--text-sm);
  font-weight:var(--weight-medium); line-height:1; border-radius:var(--radius-md);
  border:1px solid transparent; cursor:pointer; transition:var(--transition-base);
  color:var(--text-primary); background:var(--surface-card); min-height:40px;
}
.btn:hover{text-decoration:none}
.btn svg{width:16px; height:16px; flex:none}
.btn-primary{background:var(--accent-600); color:var(--text-on-accent)}
.btn-primary:hover{background:var(--accent-700)}
.btn-secondary{background:var(--surface-card); color:var(--text-primary); border-color:var(--border-default)}
.btn-secondary:hover{background:var(--neutral-50); border-color:var(--border-strong)}
.btn-ghost{background:transparent; color:var(--text-secondary)}
.btn-ghost:hover{background:var(--neutral-100); color:var(--text-primary)}
.btn[disabled]{opacity:.5; cursor:default}
.btn-sm{padding:7px var(--space-3); min-height:34px; font-size:var(--text-xs)}

/* ---------- inputs ---------- */
.input,textarea.input,select.input{
  width:100%; padding:10px var(--space-3); font-family:inherit; font-size:var(--text-base);
  color:var(--text-primary); background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-md); transition:var(--transition-base);
}
.input:focus{outline:none; border-color:var(--accent-500); box-shadow:0 0 0 3px var(--accent-50)}
textarea.input{line-height:var(--leading-normal); resize:vertical}
label.lbl{display:block; font-size:var(--text-sm); font-weight:var(--weight-medium);
  margin-bottom:var(--space-2)}

/* ---------- tags ---------- */
.tag{display:inline-flex; align-items:center; padding:3px var(--space-2);
  font-size:var(--text-xs); font-weight:var(--weight-medium); border-radius:var(--radius-sm);
  background:var(--neutral-100); color:var(--text-secondary); white-space:nowrap}
.tag-success{background:var(--success-50); color:#047857}
.tag-warning{background:var(--warning-50); color:var(--warning-500)}
.tag-danger{background:var(--danger-50); color:#B91C1C}
.tag-info{background:var(--info-50); color:#1D4ED8}
.tag-accent{background:var(--accent-50); color:var(--accent-700)}

/* progress */
.progress{height:8px; border-radius:var(--radius-full); background:var(--neutral-200);
  overflow:hidden; margin-top:var(--space-3)}
.progress i{display:block; height:100%; background:var(--accent-500);
  transition:width var(--transition-base)}

/* ---------- table ---------- */
table.t{width:100%; border-collapse:collapse; font-size:var(--text-sm)}
table.t th{text-align:left; font-size:var(--text-xs); text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-tertiary); font-weight:var(--weight-semibold);
  padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border-default)}
table.t td{padding:var(--space-3); border-bottom:1px solid var(--neutral-100); vertical-align:top}
table.t tr:last-child td{border-bottom:none}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- the Space ---------- */
.space-banner{
  background:var(--neutral-900); color:#fff; border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5); margin-bottom:var(--space-5);
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
}
.space-banner b{color:#fff}
.space-banner .small{color:#C9C7C0}
.gauge{height:10px; border-radius:var(--radius-full); background:var(--neutral-200); overflow:hidden}
.gauge i{display:block; height:100%; background:var(--accent-500)}
.verdict-ready{color:#047857; font-weight:var(--weight-semibold)}
.verdict-review{color:var(--warning-500); font-weight:var(--weight-semibold)}
.verdict-duplicate{color:var(--text-tertiary); font-weight:var(--weight-semibold)}
tr.is-dup td{background:var(--neutral-50); color:var(--text-tertiary)}

/* ---------- misc ---------- */
.flash{background:var(--accent-50); border:1px solid var(--accent-200); color:var(--accent-700);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); margin-bottom:var(--space-4);
  font-size:var(--text-sm)}
.empty{text-align:center; padding:var(--space-8) var(--space-4); color:var(--text-secondary)}
.empty .big{font-size:var(--text-xl); color:var(--text-primary);
  font-weight:var(--weight-semibold); margin-bottom:var(--space-2)}
.foot-note{font-size:var(--text-xs); color:var(--text-tertiary); margin-top:var(--space-6);
  padding-top:var(--space-4); border-top:1px solid var(--border-default)}
/* align-items:start, or a short card stretches to the height of the tall
   column beside it and leaves a dead white block under its own content. */
.two{display:grid; grid-template-columns:1fr; gap:var(--space-4); align-items:start}
@media(min-width:900px){.two{grid-template-columns:minmax(0,2fr) minmax(280px,380px)}}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:var(--neutral-900); color:#fff; padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-lg); font-size:var(--text-sm); box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:opacity var(--transition-base); z-index:80;
  max-width:min(560px, calc(100vw - 2 * var(--space-5))); line-height:var(--leading-normal);
  text-align:center}
.toast.show{opacity:1}

/* login */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:var(--space-5)}
.login-card{width:100%; max-width:400px; background:#fff; border:1px solid var(--border-default);
  border-radius:var(--radius-xl); padding:var(--space-6)}
.login-card h1{font-size:var(--text-xl); margin-bottom:var(--space-1)}
.hint{margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--border-default);
  font-size:var(--text-xs); color:var(--text-tertiary); line-height:var(--leading-relaxed)}


/* ==========================================================================
   Outreach
   ========================================================================== */
/* Sample mode: everyone must be able to tell at a glance that nothing is
   reaching a real merchant yet. */
.sample-bar{background:var(--neutral-900); color:#E8E5DD; font-size:var(--text-xs);
  padding:6px 0; text-align:center; line-height:1.5}
.sample-bar b{color:#fff}
.paused-bar{background:var(--warning-50); border:1px solid #F5D9A8; color:var(--warning-500);
  border-radius:var(--radius-md); padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-5); display:flex; gap:var(--space-3); align-items:center;
  flex-wrap:wrap; font-size:var(--text-sm)}

.subnav{display:flex; gap:var(--space-1); flex-wrap:wrap; margin:0 0 var(--space-5);
  border-bottom:1px solid var(--border-default)}
.subnav a{padding:var(--space-2) var(--space-3) 10px; font-size:var(--text-sm);
  font-weight:var(--weight-medium); color:var(--text-secondary);
  border-bottom:2px solid transparent; margin-bottom:-1px; display:inline-flex; gap:6px;
  align-items:center}
.subnav a:hover{color:var(--text-primary); text-decoration:none}
.subnav a.on{color:var(--accent-700); border-bottom-color:var(--accent-500)}
.count{display:inline-flex; align-items:center; justify-content:center; min-width:20px;
  height:20px; padding:0 6px; border-radius:var(--radius-full); background:var(--neutral-100);
  color:var(--text-secondary); font-size:11px; font-weight:var(--weight-semibold)}
.count.hot{background:var(--accent-500); color:#fff}

.tabs{display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-4)}
.tabs a{padding:6px var(--space-3); border:1px solid var(--border-default);
  border-radius:var(--radius-full); font-size:var(--text-sm); color:var(--text-secondary);
  background:#fff; display:inline-flex; gap:6px; align-items:center}
.tabs a:hover{border-color:var(--border-strong); color:var(--text-primary); text-decoration:none}
.tabs a.on{background:var(--accent-50); border-color:var(--accent-200); color:var(--accent-700)}
.tabs a .count{height:18px; min-width:18px; font-size:10px}

.search{display:flex; gap:var(--space-2); margin-bottom:var(--space-4); max-width:520px}

/* Contact: say plainly what a merchant can and cannot be reached on. */
.reach{display:flex; gap:var(--space-2); flex-wrap:wrap}
.ct{display:inline-flex; align-items:center; gap:5px; font-size:var(--text-xs);
  padding:3px var(--space-2); border-radius:var(--radius-sm); background:var(--neutral-100);
  color:var(--text-primary); white-space:nowrap; max-width:100%; overflow:hidden;
  text-overflow:ellipsis}
.ct svg{width:13px; height:13px; flex:none}
.ct.missing{background:transparent; border:1px dashed var(--border-strong);
  color:var(--text-tertiary)}
.ct.none{background:var(--danger-50); color:#B91C1C; border:none}
.note-line{font-size:var(--text-sm); color:var(--warning-500); margin-top:var(--space-2)}

table.t td .store{font-weight:var(--weight-semibold); color:var(--text-primary)}
table.t tr.row-link{cursor:pointer}
table.t tr.row-link:hover td{background:var(--neutral-50)}
.next{font-size:var(--text-sm); color:var(--text-secondary); max-width:42ch}
.dot-you{display:inline-block; width:8px; height:8px; border-radius:var(--radius-full);
  background:var(--accent-500); margin-right:6px; vertical-align:middle}

/* Merchant list on a phone: rows become cards. */
@media(max-width:760px){
  table.t.cards thead{display:none}
  table.t.cards, table.t.cards tbody, table.t.cards tr, table.t.cards td{display:block; width:100%}
  table.t.cards tr{border:1px solid var(--border-default); border-radius:var(--radius-md);
    margin-bottom:var(--space-3); padding:var(--space-2) 0; background:#fff}
  table.t.cards td{border:none; padding:4px var(--space-3)}
}

/* The thread */
.thread{display:flex; flex-direction:column; gap:var(--space-3)}
.msg{display:flex}
.msg.out{justify-content:flex-end}
.bub{max-width:min(620px,88%); padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-lg); font-size:var(--text-sm); line-height:var(--leading-relaxed);
  background:var(--surface-card); border:1px solid var(--border-default);
  border-bottom-left-radius:var(--radius-sm); overflow-wrap:anywhere}
.bub-body{white-space:pre-wrap}
.msg.out .bub{background:var(--accent-50); border-color:var(--accent-100);
  border-bottom-left-radius:var(--radius-lg); border-bottom-right-radius:var(--radius-sm)}
.msg.out.whatsapp .bub{background:#E9F8EF; border-color:#CDEED9}
.bub-head{display:flex; gap:var(--space-2); align-items:center; flex-wrap:wrap;
  font-size:var(--text-xs); color:var(--text-secondary); margin-bottom:var(--space-2)}
.bub-head b{color:var(--text-primary); font-weight:var(--weight-semibold)}
.bub-subject{font-weight:var(--weight-semibold); margin-bottom:var(--space-1)}
.chan{display:inline-flex; align-items:center; gap:4px; padding:1px 6px;
  border-radius:var(--radius-full); font-size:10px; font-weight:var(--weight-semibold);
  text-transform:uppercase; letter-spacing:.05em; background:var(--neutral-100)}
.chan.whatsapp{background:#DCFCE7; color:#15803D}
.chan.email{background:var(--info-50); color:#1D4ED8}
.delivery{font-size:10px; color:var(--text-tertiary)}

.kv{display:grid; grid-template-columns:max-content 1fr; gap:var(--space-2) var(--space-4);
  font-size:var(--text-sm); margin:var(--space-3) 0 0}
.kv dt{color:var(--text-secondary)}
.kv dd{margin:0; overflow-wrap:anywhere}

.label{font-size:var(--text-xs); font-weight:var(--weight-semibold); text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-tertiary)}
.card h2{font-size:var(--text-lg); letter-spacing:-.01em}
.card-head{display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-3);
  flex-wrap:wrap}

/* Waiting for you */
.wait{border-left:3px solid var(--accent-500)}
.wait .reasons{display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2)}
.quote{margin:var(--space-3) 0 0; padding:var(--space-3) var(--space-4);
  background:var(--neutral-50); border-radius:var(--radius-md); font-size:var(--text-sm);
  line-height:var(--leading-relaxed); overflow-wrap:anywhere; max-height:11em; overflow:hidden}
.actions{display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-4)}
.actions form{display:contents}

/* The day's feed */
.feed{display:flex; flex-direction:column}
.feed-row{display:grid; grid-template-columns:64px 1fr; gap:var(--space-3);
  padding:var(--space-2) 0; border-bottom:1px solid var(--neutral-100); font-size:var(--text-sm)}
.feed-row:last-child{border-bottom:none}
.feed-row .t{color:var(--text-tertiary); font-variant-numeric:tabular-nums}

/* Funnel */
.funnel{display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3)}
.frow{display:grid; grid-template-columns:110px 1fr 36px; align-items:center; gap:var(--space-3)}
.flabel{font-size:var(--text-sm); color:var(--text-secondary)}
.ftrack{background:var(--neutral-100); border-radius:var(--radius-full); height:18px; overflow:hidden}
.ftrack i{display:block; height:100%; border-radius:var(--radius-full); min-width:3px;
  background:var(--accent-500)}
.fnum{font-family:var(--font-mono); font-size:var(--text-sm); text-align:right}

/* Settings */
.form-grid{display:grid; grid-template-columns:1fr; gap:var(--space-4)}
@media(min-width:700px){.form-grid.two-col{grid-template-columns:1fr 1fr}}
.help{font-size:var(--text-xs); color:var(--text-tertiary); margin-top:var(--space-1);
  line-height:1.5}
.switch{display:flex; align-items:center; gap:var(--space-3); cursor:pointer;
  font-size:var(--text-sm)}
.switch input{width:18px; height:18px; accent-color:var(--accent-600)}
.conn{display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 0;
  border-bottom:1px solid var(--neutral-100); font-size:var(--text-sm)}
.conn:last-child{border-bottom:none}
input[disabled], textarea[disabled]{background:var(--neutral-50); color:var(--text-secondary)}

/* The Space */
.space-banner{background:var(--neutral-900); color:#fff; border-radius:var(--radius-lg);
  padding:var(--space-4) var(--space-5); margin-bottom:var(--space-5); display:flex;
  align-items:center; gap:var(--space-3); flex-wrap:wrap}
.space-banner .small{color:#C9C7C0}
.inline-form{display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center}
.inline-form .input{width:auto; flex:1 1 160px; padding:7px var(--space-3); font-size:var(--text-sm)}
details.more summary{cursor:pointer; font-size:var(--text-sm); color:var(--text-secondary)}

/* Dev tools: visibly not part of the product. */
.devbox{border:1px dashed var(--border-strong); background:var(--neutral-50)}
.devbox .label{color:var(--warning-500)}
.quick{display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3)}
.quick form{display:block}
.quick button{width:100%; justify-content:space-between}

/* The day's status line */
.runline{display:flex; gap:var(--space-2) var(--space-4); flex-wrap:wrap; align-items:center;
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-md); padding:var(--space-3) var(--space-4);
  margin-bottom:var(--space-5); font-size:var(--text-sm); color:var(--text-secondary)}
.runline b{color:var(--text-primary)}
.runline form{margin-left:auto}

/* Waiting for you: one row per merchant, opening in place */
.wlist-intro{margin:0 0 var(--space-3)}
.wlist{background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg); overflow:hidden}
.wrow{border-bottom:1px solid var(--border-default)}
.wrow:last-child{border-bottom:none}
.wrow > summary{list-style:none; cursor:pointer; display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,2fr) 76px 18px;
  grid-template-areas:"who why said age chev"; gap:var(--space-2) var(--space-4);
  align-items:center; padding:var(--space-4) var(--space-5);
  transition:background var(--transition-fast)}
.wrow > summary::-webkit-details-marker{display:none}
.wrow > summary:hover{background:var(--neutral-50)}
.wrow > summary:focus-visible{outline:2px solid var(--accent-500); outline-offset:-2px}
.wrow[open]{background:var(--neutral-50); box-shadow:inset 3px 0 0 var(--accent-500)}
.wrow-who{grid-area:who; min-width:0; display:flex; flex-direction:column; gap:2px}
.wrow-who b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wrow-why{grid-area:why; display:flex; gap:4px; flex-wrap:wrap; min-width:0}
.wrow-said{grid-area:said; min-width:0; display:flex; gap:var(--space-2); align-items:center;
  font-size:var(--text-sm); color:var(--text-secondary)}
.said-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.wrow-age{grid-area:age; text-align:right; font-size:var(--text-xs); color:var(--text-tertiary);
  white-space:nowrap}
.wrow-age.late{color:var(--warning-500); font-weight:var(--weight-semibold)}
.wrow-chev{grid-area:chev; width:16px; height:16px; color:var(--text-tertiary);
  transition:transform var(--transition-base)}
.wrow[open] .wrow-chev{transform:rotate(90deg)}
.wrow-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:var(--space-6); padding:var(--space-2) var(--space-5) var(--space-5)}
.wnote{background:var(--warning-50); border:1px solid #F5D9A8; border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4)}
.wnote .label{color:var(--warning-500)}
.wnote p{margin:var(--space-1) 0 0; font-size:var(--text-sm); line-height:var(--leading-relaxed)}
.mini-msg{background:#fff; border:1px solid var(--border-default); border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4); font-size:var(--text-sm); line-height:var(--leading-relaxed);
  overflow-wrap:anywhere}
.mini-msg.out{background:var(--accent-50); border-color:var(--accent-100)}
.mini-msg.out.whatsapp{background:#E9F8EF; border-color:#CDEED9}
/* Ours shortened to four lines, theirs to eight: what they said matters most
   here, and the full conversation is one click away. */
.mini-msg .bub-body{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:8;
  overflow:hidden}
.mini-msg.out .bub-body{-webkit-line-clamp:4}
.wrow-side .actions{margin-top:0}
@media(max-width:760px){
  .wrow > summary{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"who age" "why why" "said said"; padding:var(--space-4)}
  .wrow-chev{display:none}
  .wrow-body{grid-template-columns:1fr; gap:var(--space-4); padding:var(--space-2) var(--space-4) var(--space-4)}
}

/* ==========================================================================
   Pipeline: the WhatsApp and Gmail rooms. The page fills the window and only
   the chat list and the conversation scroll, whatever height the bars above.
   ========================================================================== */
body.app-full{height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden}
body.app-full .page{flex:1; min-height:0; padding:0; display:flex; flex-direction:column}
body.app-full .page > .wrap{flex:1; min-height:0; display:flex; flex-direction:column; max-width:none}
body.app-full .flash{margin:var(--space-3) 0 0}
.pipe-top{flex:none; padding-top:var(--space-4)}
.pipe-top .subnav{margin-bottom:var(--space-3)}

/* minmax(0,1fr), not 1fr: a long one-line preview must not widen the column
   past the screen on a phone. */
.inbox{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); position:relative;
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; overflow:hidden}
@media(min-width:900px){.inbox{grid-template-columns:300px minmax(0,1fr)}}
@media(min-width:1280px){.inbox{grid-template-columns:320px minmax(0,1fr) 320px}}

.inbox-side{display:flex; flex-direction:column; min-height:0; min-width:0; border-right:1px solid var(--border-default);
  background:var(--neutral-50)}
.side-head{flex:none; padding:var(--space-3); border-bottom:1px solid var(--border-default);
  display:flex; flex-direction:column; gap:var(--space-2)}
.side-head .input{padding:7px var(--space-3); font-size:var(--text-sm)}
.chips{display:flex; gap:var(--space-1); flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; padding:4px var(--space-3); font:inherit;
  font-size:var(--text-xs); border:1px solid var(--border-default); border-radius:var(--radius-full);
  background:#fff; color:var(--text-secondary); cursor:pointer}
.chip:hover{border-color:var(--border-strong); color:var(--text-primary)}
.chip.on{background:var(--accent-50); border-color:var(--accent-200); color:var(--accent-700)}
.chip .count{height:16px; min-width:16px; font-size:10px; padding:0 5px}
.side-list{flex:1; min-height:0; overflow-y:auto}
.side-empty{padding:var(--space-6) var(--space-4); text-align:center; color:var(--text-tertiary);
  font-size:var(--text-sm)}

.conv{display:flex; gap:var(--space-3); padding:var(--space-3); border-bottom:1px solid var(--neutral-100);
  color:inherit; align-items:flex-start; position:relative}
.conv:hover{background:var(--surface-card); text-decoration:none}
.conv.on{background:var(--surface-card); box-shadow:inset 3px 0 0 var(--accent-500)}
.conv-av{width:36px; height:36px; border-radius:var(--radius-full); flex:none; display:inline-flex;
  align-items:center; justify-content:center; font-size:var(--text-sm); font-weight:var(--weight-semibold);
  color:#fff; background:var(--neutral-500)}
.conv-av.whatsapp{background:#16A34A}
.conv-av.gmail{background:#2563EB}
.conv-body{min-width:0; flex:1; display:flex; flex-direction:column; gap:2px}
.conv-top{display:flex; align-items:baseline; gap:var(--space-2)}
.conv-top b{font-size:var(--text-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.conv-time{margin-left:auto; font-size:11px; color:var(--text-tertiary); white-space:nowrap}
.conv-last{font-size:var(--text-xs); color:var(--text-secondary); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; padding-right:14px}
.conv-tags{margin-top:2px}
.conv-dot{position:absolute; right:var(--space-3); top:36px; width:9px; height:9px;
  border-radius:var(--radius-full); background:var(--accent-500)}

.inbox-thread{display:flex; flex-direction:column; min-height:0; min-width:0}
.thread-head{flex:none; display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-default)}
.thread-msgs{flex:1; min-height:0; overflow-y:auto; padding:var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-2); background:var(--neutral-50)}
.day-rule{text-align:center; margin:var(--space-3) 0 var(--space-1)}
.day-rule span{background:var(--neutral-200); color:var(--text-secondary); font-size:var(--text-xs);
  padding:3px var(--space-3); border-radius:var(--radius-full)}
.pmsg{display:flex}
.pmsg.out{justify-content:flex-end}
.pbub{max-width:min(580px,85%); padding:var(--space-2) var(--space-3); border-radius:var(--radius-lg);
  font-size:var(--text-sm); line-height:var(--leading-relaxed); background:var(--surface-card);
  border:1px solid var(--border-default); border-bottom-left-radius:var(--radius-sm); overflow-wrap:anywhere}
.pmsg.out .pbub{border-bottom-left-radius:var(--radius-lg); border-bottom-right-radius:var(--radius-sm)}
.room-whatsapp .pmsg.out .pbub{background:#E2F7E8; border-color:#CDEED9}
.room-gmail .pmsg.out .pbub{background:var(--accent-50); border-color:var(--accent-100)}
.pwho{font-size:var(--text-xs); font-weight:var(--weight-semibold); color:var(--text-secondary); margin-bottom:2px}
.pmsg.team .pwho{color:var(--accent-700)}
.psubj{font-weight:var(--weight-semibold); margin-bottom:var(--space-1)}
.pbody{white-space:pre-wrap}
.pat{display:block; font-size:10px; color:var(--text-tertiary); margin-top:var(--space-1); text-align:right}

.composer{flex:none; display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:flex-end;
  padding:var(--space-3) var(--space-4); border-top:1px solid var(--border-default); background:var(--surface-card)}
.composer textarea{flex:1 1 220px; resize:none; min-height:42px; max-height:220px; font-size:var(--text-sm)}
.composer-hint{flex-basis:100%}
.agents-bar{align-items:center; font-size:var(--text-sm); color:var(--text-secondary)}
.agents-bar form{margin-left:auto}
.empty.pick{margin:auto; max-width:420px}

.inbox-panel{display:none; min-height:0; overflow-y:auto; border-left:1px solid var(--border-default);
  background:var(--neutral-50)}
@media(min-width:1280px){.inbox-panel{display:block}}
.panel-sec{padding:var(--space-4); border-bottom:1px solid var(--border-default)}
.panel-sec h3{font-size:var(--text-lg); margin:var(--space-2) 0 2px}
.panel-sec .actions{margin-top:var(--space-2)}
.panel-links{display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); font-size:var(--text-sm)}

/* A way into a chat room, from Outreach and from Waiting for you. */
.chat-link{display:inline-flex; align-items:center; gap:5px; font-size:var(--text-xs);
  font-weight:var(--weight-medium); padding:3px var(--space-2); border-radius:var(--radius-sm); white-space:nowrap}
.chat-link svg{width:13px; height:13px}
.chat-link.whatsapp{background:#DCFCE7; color:#15803D}
.chat-link.email{background:var(--info-50); color:#1D4ED8}
.chat-link:hover{text-decoration:none; filter:brightness(.97)}
td.chats{white-space:nowrap}
td.chats .chat-link + .chat-link{margin-left:4px}

.only-narrow, .only-mid{display:none}
@media(min-width:900px) and (max-width:1279px){
  .only-mid{display:inline-flex}
  .inbox.panel-open .inbox-panel{display:block; position:absolute; top:0; right:0; bottom:0;
    width:min(340px,90%); z-index:5; box-shadow:var(--shadow-lg)}
}
@media(max-width:899px){
  body.app-full .page > .wrap{padding:0 var(--space-3)}
  .inbox.has-thread .inbox-side{display:none}
  .inbox:not(.has-thread) .inbox-thread{display:none}
  .only-narrow, .only-mid{display:inline-flex}
  .inbox.panel-open .inbox-panel{display:block; position:absolute; inset:0; z-index:5}
}

/* ==========================================================================
   Gmail room: an inbox of rows, and a thread of email cards, the way Gmail
   shows them. (The WhatsApp room stays a chat.)
   ========================================================================== */
.inbox.mail{grid-template-columns:minmax(0,1fr)}
@media(min-width:1280px){.inbox.mail.has-thread{grid-template-columns:minmax(0,1fr) 320px}}
.mail-list{display:flex; flex-direction:column; min-height:0; min-width:0}
.mail-toolbar{flex:none; display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-default)}
.mail-toolbar .input{max-width:560px; padding:9px var(--space-4); border-radius:var(--radius-full);
  background:var(--neutral-100); border-color:transparent; font-size:var(--text-sm)}
.mail-toolbar .input:focus{background:#fff; border-color:var(--accent-500)}
.mail-tabs{flex:none; padding:var(--space-2) var(--space-4); border-bottom:1px solid var(--border-default); margin:0}
.mail-rows{flex:1; min-height:0; overflow-y:auto}

.mrow{display:grid; grid-template-columns:14px minmax(150px,220px) minmax(0,1fr) 76px; gap:var(--space-3);
  align-items:center; padding:10px var(--space-4); border-bottom:1px solid var(--neutral-100);
  background:var(--neutral-50); color:var(--text-secondary); font-size:var(--text-sm)}
.mrow:hover{background:#fff; text-decoration:none; position:relative; z-index:1;
  box-shadow:0 1px 3px rgba(20,20,18,.12)}
.mrow.unread{background:#fff}
.mrow-from{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text-primary)}
.mrow-n{margin-left:6px; font-size:var(--text-xs); color:var(--text-tertiary)}
.mrow-text{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mrow-text .tag{margin-right:var(--space-2); padding:1px 6px; vertical-align:1px}
.mrow-subj{color:var(--text-primary)}
.mrow-snip{color:var(--text-tertiary)}
.mrow-date{text-align:right; font-size:var(--text-xs); white-space:nowrap}
.mrow.unread .mrow-from, .mrow.unread .mrow-subj, .mrow.unread .mrow-date{
  font-weight:var(--weight-semibold); color:var(--text-primary)}
.mdot{display:inline-block; width:8px; height:8px; border-radius:var(--radius-full); background:var(--accent-500)}

.mail-thread{display:flex; flex-direction:column; min-height:0; min-width:0}
.mail-head{flex:none; display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-default)}
.mail-subject{flex:1 1 220px; font-size:var(--text-xl); font-weight:var(--weight-regular);
  letter-spacing:-.01em; min-width:0; overflow-wrap:anywhere}
.mail-msgs{flex:1; min-height:0; overflow-y:auto; padding:var(--space-2) var(--space-5) var(--space-6); background:#fff}

.mmsg{border-bottom:1px solid var(--neutral-100)}
.mmsg > summary{list-style:none; cursor:pointer; display:grid;
  grid-template-columns:40px minmax(0,max-content) minmax(0,1fr) auto; gap:var(--space-3);
  align-items:center; padding:var(--space-3) 0}
.mmsg > summary::-webkit-details-marker{display:none}
.mmsg > summary:focus-visible{outline:2px solid var(--accent-500); outline-offset:2px}
.mav{width:40px; height:40px; border-radius:var(--radius-full); display:inline-flex; align-items:center;
  justify-content:center; color:#fff; font-weight:var(--weight-semibold); font-size:var(--text-base)}
.mav.merchant{background:#2563EB}
.mav.agent{background:var(--accent-500)}
.mav.team{background:var(--neutral-700)}
.mmsg-from{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--text-sm)}
.mmsg-from b{color:var(--text-primary)}
.mmsg-addr{margin-left:6px; font-size:var(--text-xs); color:var(--text-tertiary)}
.mmsg-snip{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:var(--text-sm); color:var(--text-tertiary)}
.mmsg[open] .mmsg-snip{visibility:hidden}
.mmsg-date{font-size:var(--text-xs); color:var(--text-tertiary); white-space:nowrap}
.mmsg-to{margin:-8px 0 var(--space-3) 52px; font-size:var(--text-xs); color:var(--text-tertiary)}
.mmsg-body{margin:0 0 var(--space-4) 52px; white-space:pre-wrap; overflow-wrap:anywhere;
  font-size:var(--text-sm); line-height:1.7; color:var(--text-primary)}
.mmsg-foot{margin:calc(-1 * var(--space-2)) 0 var(--space-4) 52px; white-space:pre-wrap;
  font-size:var(--text-xs); color:var(--text-tertiary)}

.mail-reply-wrap{margin:var(--space-5) 0 0 52px}
.mail-reply-btn{list-style:none; border-radius:var(--radius-full); padding:8px var(--space-5); width:max-content}
.mail-reply-btn::-webkit-details-marker{display:none}
.mail-reply-wrap[open] .mail-reply-btn{display:none}
.mail-reply{border:1px solid var(--border-default); border-radius:var(--radius-lg); background:#fff;
  box-shadow:0 2px 8px rgba(20,20,18,.08); padding:var(--space-3) var(--space-4)}
.mail-reply-to{display:flex; gap:var(--space-2); align-items:center; font-size:var(--text-sm);
  color:var(--text-secondary); padding-bottom:var(--space-2); border-bottom:1px solid var(--neutral-100)}
.mail-reply textarea{border:none; padding:var(--space-3) 0; min-height:140px; resize:vertical; font-size:var(--text-sm)}
.mail-reply textarea:focus{box-shadow:none}
.mail-reply-actions{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
.mail-note{margin:var(--space-5) 0 0 52px; display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-3) var(--space-4); border:1px dashed var(--border-strong); border-radius:var(--radius-lg);
  font-size:var(--text-sm); color:var(--text-secondary)}
.mail-note form{margin-left:auto}

@media(max-width:760px){
  .mrow{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"from date" "text text";
    row-gap:2px; padding:var(--space-3)}
  .mrow-mark{display:none}
  .mrow-from{grid-area:from}
  .mrow-date{grid-area:date}
  .mrow-text{grid-area:text; white-space:normal}
  .mrow-subj, .mrow-snip{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .mrow-dash{display:none}
  .mrow.unread .mrow-from::before{content:''; display:inline-block; width:7px; height:7px; margin-right:6px;
    border-radius:var(--radius-full); background:var(--accent-500); vertical-align:2px}
  .mail-msgs{padding:var(--space-2) var(--space-3) var(--space-6)}
  .mail-head{gap:var(--space-2); padding:var(--space-2) var(--space-3)}
  .mail-subject{flex-basis:calc(100% - 56px); font-size:var(--text-lg)}
  .mmsg > summary{grid-template-columns:32px minmax(0,1fr) auto}
  .mav{width:32px; height:32px; font-size:var(--text-sm)}
  .mmsg-snip{display:none}
  .mmsg-to, .mmsg-body, .mmsg-foot, .mail-reply-wrap, .mail-note{margin-left:0}
}

/* ==========================================================================
   The Demo place: the merchant's inbox beside what Last Call's team sees.
   ========================================================================== */
.demo{flex:1; min-height:0; display:flex; flex-direction:column; gap:var(--space-3)}
.demo-bar{flex:none; display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
.demo-bar b{margin-right:var(--space-2)}
.demo-cols{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--space-4)}
.demo-pane{display:flex; flex-direction:column; min-height:0; background:var(--surface-card);
  border:1px solid var(--border-default); border-radius:var(--radius-lg); overflow:hidden}
.demo-pane-head{flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-default)}
.demo-scroll{flex:1; min-height:0; overflow-y:auto; padding:var(--space-4); display:flex; flex-direction:column;
  gap:var(--space-3); background:var(--neutral-50)}
.dmsg{max-width:88%; padding:var(--space-3) var(--space-4); border-radius:var(--radius-lg); font-size:var(--text-sm);
  line-height:1.6; background:#fff; border:1px solid var(--border-default); overflow-wrap:anywhere}
.dmsg.mine{align-self:flex-end; background:var(--info-50); border-color:#CFE0FB}
.dmsg-head{display:flex; gap:var(--space-2); align-items:baseline; font-size:var(--text-xs); color:var(--text-tertiary);
  margin-bottom:var(--space-1)}
.dmsg-head b{color:var(--text-primary)}
.dmsg-subj{font-weight:var(--weight-semibold); margin-bottom:var(--space-1)}
.dmsg-body{white-space:pre-wrap}
.dmsg-foot{margin-top:var(--space-2); white-space:pre-wrap; font-size:var(--text-xs); color:var(--text-tertiary)}
.demo-say{flex:none; display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:flex-end; padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--border-default)}
.demo-say textarea{flex:1 1 220px; resize:none; min-height:42px; max-height:180px; font-size:var(--text-sm)}

.dos{background:#fff}
.dos-head{display:flex; align-items:center; gap:var(--space-3); padding-bottom:var(--space-2);
  border-bottom:1px solid var(--neutral-100)}
.dos-head .tag{margin-left:var(--space-2)}
.dos-wait{padding:var(--space-3) var(--space-4); background:var(--warning-50); border:1px solid #F5D9A8;
  border-radius:var(--radius-md); font-size:var(--text-sm); color:var(--warning-500)}
.mmsg-card{border-bottom:1px solid var(--neutral-100); padding-bottom:var(--space-3)}
.mmsg-card-head{display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:var(--space-2) var(--space-3);
  align-items:center; font-size:var(--text-sm); margin-bottom:var(--space-2)}
.mmsg-card-head .mav{width:32px; height:32px; font-size:var(--text-sm)}
.mmsg-card .mmsg-body{margin:0 0 0 44px}
.mmsg-card .mmsg-foot{margin:var(--space-2) 0 0 44px}
.dos-writing{display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--text-secondary);
  padding:var(--space-2) 0}
.typing{display:inline-flex; gap:3px}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--accent-500); animation:blink 1.2s infinite both}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media(prefers-reduced-motion:reduce){.typing i{animation:none; opacity:.7}}
.pill-on, .pill-off{display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs);
  padding:4px var(--space-3); border-radius:var(--radius-full)}
.pill-on{background:var(--success-50); color:#047857}
.pill-off{background:var(--neutral-100); color:var(--text-tertiary)}
.pill-on i, .pill-off i{width:8px; height:8px; border-radius:50%; background:currentColor}
@media(max-width:899px){
  body.app-full:has(.demo){overflow:auto; height:auto}
  .demo-cols{grid-template-columns:1fr}
  .demo-pane{max-height:75vh}
}

/* The Demo place, WhatsApp style: the merchant's phone, beside the OS's WhatsApp room. */
.demo-cols{grid-template-columns:minmax(300px,400px) minmax(0,1fr)}
.demo-phone-col{display:flex; flex-direction:column; min-height:0; align-items:center}
.wa-phone{width:100%; max-width:400px; flex:1; min-height:0; display:flex; flex-direction:column;
  border:8px solid #1F2125; border-radius:30px; overflow:hidden; background:#EFEAE2}
.wa-top{flex:none; display:flex; align-items:center; gap:10px; padding:10px 14px; background:#008069; color:#fff}
.wa-top b{display:block; font-size:var(--text-base); line-height:1.2}
.wa-top small{display:block; font-size:12px; opacity:.85; min-height:16px}
.wa-av{width:36px; height:36px; border-radius:50%; background:var(--accent-500); color:#fff; flex:none;
  display:inline-flex; align-items:center; justify-content:center; font-weight:var(--weight-bold)}
.demo-scroll.wa-chat{background:#EFEAE2; padding:var(--space-3) var(--space-3); gap:4px}
.wa-day{align-self:center; background:#fff; color:#54656F; font-size:12px; padding:4px 10px; border-radius:8px;
  margin:4px 0 8px; box-shadow:0 1px .5px rgba(11,20,26,.13)}
.wa-b{max-width:84%; padding:6px 8px 8px 9px; border-radius:8px; font-size:14.2px; line-height:19px; color:#111B21;
  box-shadow:0 1px .5px rgba(11,20,26,.13); white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:2px}
.wa-b.in{align-self:flex-start; background:#fff; border-top-left-radius:0}
.wa-b.out{align-self:flex-end; background:#D9FDD3; border-top-right-radius:0}
.wa-meta{float:right; margin:8px 0 -6px 12px; font-size:11px; line-height:15px; color:#667781; white-space:nowrap}
.wa-tick{letter-spacing:-3px; margin-left:2px; color:#8696A0}
.wa-tick.read{color:#53BDEB}
.wa-input{flex:none; display:flex; gap:8px; align-items:flex-end; padding:8px; background:#F0F2F5}
.wa-input textarea{flex:1; border:none; outline:none; border-radius:21px; padding:11px 16px; resize:none; font:inherit;
  font-size:14px; line-height:20px; min-height:42px; max-height:120px; background:#fff; color:#111B21}
.wa-send{width:42px; height:42px; border-radius:50%; border:none; background:#00A884; color:#fff; flex:none;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.wa-send:hover{background:#008F72}
.demo-hint{margin:var(--space-2) 0 0; text-align:center}
.dos-head{gap:var(--space-3)}
.room-whatsapp .dos{background:var(--neutral-50)}
@media(max-width:899px){
  .demo-cols{grid-template-columns:1fr}
  .wa-phone{height:70vh; flex:none}
}

/* ==========================================================================
   The WhatsApp room, drawn the way Taxi OS draws its inbox (static/js/inbox.js,
   templates/pipeline_wa.html): WhatsApp's list, and the open chat with the time
   and ticks inside each bubble. Class names follow Taxi's (ci-*, msg-*); the
   message box is cmp-*, as the Demo place already uses wa-*.
   ========================================================================== */
.wa-room .inbox-side{background:#fff}
.client-list{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch}
.client-item{position:relative; display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:12px;
  align-items:center; padding:0 14px 0 12px; color:inherit; cursor:pointer;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
.client-item:hover{text-decoration:none}
/* A pointer that hovers shades the row under it; a finger does not hover. */
@media(hover:hover){.client-item:hover{background:var(--neutral-50)}}
.client-item.active{background:var(--neutral-100)}
.ci-av{width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:var(--weight-semibold); letter-spacing:-.01em}
.ci-body{min-width:0; min-height:68px; padding:9px 0; display:flex; flex-direction:column; justify-content:center;
  gap:1px; border-bottom:1px solid var(--neutral-100)}
.ci-top{display:flex; align-items:baseline; gap:8px; min-width:0}
.ci-name{flex:1; min-width:0; font-weight:var(--weight-semibold); font-size:15px; line-height:21px; color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em}
.ci-time{flex-shrink:0; font-size:12px; color:var(--text-secondary); font-variant-numeric:tabular-nums; white-space:nowrap}
.client-item.unread .ci-time{color:var(--accent-600); font-weight:var(--weight-medium)}
.ci-bottom{display:flex; align-items:center; gap:6px; min-width:0; min-height:22px}
.ci-preview{flex:1; min-width:0; font-size:13.5px; line-height:20px; color:var(--text-secondary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ci-tick{display:inline-block; margin-right:3px; color:var(--text-secondary)}
.ci-tick .ci-tick-ico{display:inline-block; width:16px; height:11px; vertical-align:-.5px}
.ci-tick .ci-tick-ico.clock{width:13px; height:13px; vertical-align:-2px}
.ci-tick.read{color:#53BDEB}
.ci-tick.bad{color:var(--danger-500)}
.ci-tick.bad .ci-tick-ico{width:14px; height:14px; vertical-align:-2px}
.ci-meta{flex-shrink:0; display:flex; align-items:center; gap:5px}
.ci-badge{display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:20px; height:20px;
  padding:0 6px; border-radius:10px; background:var(--accent-500); color:#fff; font-size:12px;
  font-weight:var(--weight-semibold); font-variant-numeric:tabular-nums}
.ci-badge.dot{min-width:10px; width:10px; height:10px; padding:0}
.ci-wait{font-size:10.5px; font-weight:var(--weight-semibold); line-height:16px; color:var(--warning-500);
  background:var(--warning-50); border:1px solid #FDE68A; padding:0 6px; border-radius:var(--radius-full); white-space:nowrap}
.empty-list{padding:48px 20px; text-align:center; color:var(--text-tertiary); font-size:var(--text-sm); line-height:1.8}

.wa-thread{background:var(--neutral-100)}
.chat-head{flex:none; display:none; align-items:center; gap:12px; padding:10px 16px;
  border-bottom:1px solid var(--border-default); background:rgba(255,255,255,.94)}
.chat-head.visible{display:flex}
.back-btn{background:none; border:none; color:var(--text-primary); padding:4px; margin-left:-6px; cursor:pointer}
.back-btn svg{width:24px; height:24px; display:block}
.chat-avatar{width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:var(--weight-bold)}
.chat-head-info{flex:1; min-width:0}
.chat-head-name{font-weight:var(--weight-semibold); font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat-head-meta{display:flex; align-items:center; gap:8px; margin-top:2px; flex-wrap:wrap; font-size:12px; color:var(--text-secondary)}
.chat-head-phone:empty{display:none}
.chat-empty{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:0; text-align:center; padding:var(--space-5)}
.chat-empty-icon{width:60px; height:60px; border-radius:16px; background:#fff; border:1px solid var(--border-default);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md)}
.chat-empty-icon svg{width:28px; height:28px; fill:none; stroke:var(--text-tertiary); stroke-width:1.5}
.chat-empty-title{font-weight:var(--weight-semibold); font-size:16px}
.chat-empty-sub{font-size:var(--text-sm); color:var(--text-tertiary)}
.chat-messages{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px 20px;
  display:none; flex-direction:column; gap:10px}
.chat-messages.visible{display:flex}

/* One side's bubbles in a row are a run: the tail on its last bubble, at its foot. */
.msg-row{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.msg-row.assistant{align-items:flex-end}
.msg-row.cont{margin-top:-7px}
.msg-line{display:flex; align-items:flex-end; gap:8px; max-width:min(80%,660px); min-width:0}
.msg-under{display:flex; flex-direction:column; align-items:flex-start; max-width:min(80%,660px); min-width:0}
.msg-row.assistant .msg-under{align-items:flex-end}
.msg-notes{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11px}
.msg-notes > *{margin-top:4px}
.msg-bubble{position:relative; min-width:0; max-width:100%; padding:6px 9px 7px 10px; border-radius:12px;
  font-size:14px; line-height:1.45; color:var(--text-primary); overflow-wrap:anywhere; word-break:break-word}
.msg-bubble.user{background:#fff; filter:drop-shadow(0 1px .5px rgba(11,20,26,.15))}
/* Last Call's own side in a faint grey, the merchant's white (Taxi OS, 24 Oct 2026), so the
   two tell apart and a blue read tick reads at a glance. */
.msg-bubble.assistant{background:#E9E6DF; filter:drop-shadow(0 1px .5px rgba(11,20,26,.15))}
.msg-text{white-space:pre-wrap}
.msg-text a{color:#027EB5; text-decoration:underline}
.msg-sender{display:block; font-size:12px; font-weight:var(--weight-semibold); line-height:1.35; color:var(--accent-700);
  margin:0 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.msg-bubble.tail.user{border-bottom-left-radius:0}
.msg-bubble.tail.assistant{border-bottom-right-radius:0}
.msg-bubble.tail::after{content:""; position:absolute; bottom:0; width:8px; height:13px; background:inherit}
.msg-bubble.tail.user::after{left:-7.5px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M8 0C8 6.5 5.2 10.8 0 13h8z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M8 0C8 6.5 5.2 10.8 0 13h8z'/%3E%3C/svg%3E") no-repeat center / 100% 100%}
.msg-bubble.tail.assistant::after{right:-7.5px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M0 0C0 6.5 2.8 10.8 8 13H0z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M0 0C0 6.5 2.8 10.8 8 13H0z'/%3E%3C/svg%3E") no-repeat center / 100% 100%}
/* The time and our tick inside the bubble at the bottom right. The copy in the text's
   flow is invisible and only keeps room on the last line; the one on top shows. */
.msg-meta-room{display:inline-flex; align-items:center; gap:3px; visibility:hidden; margin-left:10px;
  font-size:11px; line-height:1; white-space:nowrap; vertical-align:baseline}
.msg-meta{position:absolute; right:9px; bottom:5px; display:inline-flex; align-items:center; gap:3px;
  font-size:11px; line-height:1; color:var(--text-tertiary); white-space:nowrap}
.msg-meta .ci-tick, .msg-meta-room .ci-tick{margin:0 0 0 1px; color:inherit}
.msg-meta .ci-tick .ci-tick-ico, .msg-meta-room .ci-tick .ci-tick-ico{vertical-align:-1px}
.msg-bubble.assistant .msg-meta{color:#7A786F}
.msg-bubble.assistant .msg-meta .ci-tick{color:#8696A0}
.msg-bubble.assistant .msg-meta .ci-tick.read{color:#53BDEB}
.msg-bubble.assistant .msg-meta .ci-tick.bad{color:var(--danger-500)}
/* One to three emoji alone are drawn big, with no bubble, as WhatsApp does. */
.msg-bubble.jumbo{background:transparent; filter:none; padding:0 2px; font-size:40px; line-height:1.15}
.msg-bubble.jumbo.j2{font-size:34px}
.msg-bubble.jumbo.j3{font-size:30px}
.msg-bubble.jumbo .msg-meta-room{display:none}
.msg-bubble.jumbo .msg-meta{position:static; margin-left:6px; vertical-align:middle}
.msg-date-divider{display:flex; justify-content:center; margin:10px 0 6px}
.msg-date-divider span{background:#fff; color:var(--text-secondary); font-size:11.5px; font-weight:var(--weight-semibold);
  padding:4px 12px; border-radius:12px; box-shadow:0 1px .5px rgba(11,20,26,.13)}
/* A message that did not go says so in words, with what to do, under its bubble. */
.msg-dlv.bad{color:#B42318; font-weight:var(--weight-semibold); background:var(--danger-50); padding:1px 6px; border-radius:4px}
.msg-dlv-acts{display:inline-flex; gap:5px}
.msg-dlv-act{font:inherit; font-size:11px; font-weight:var(--weight-bold); line-height:1; color:#fff; background:#B42318;
  border:none; cursor:pointer; padding:4px 9px; border-radius:5px}
.msg-dlv-act.ghost{color:#B42318; background:transparent; border:1px solid #B42318; font-weight:var(--weight-semibold)}
.skel{background:var(--neutral-200); border-radius:6px; height:11px; margin-bottom:9px; animation:skel 1.5s infinite}
.skel.w100{width:100%} .skel.w80{width:80%} .skel.w60{width:60%}
@keyframes skel{0%,100%{opacity:.5} 50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}

/* The message box as WhatsApp lays it out: one rounded box, and a round send button. */
.chat-input-wrap{flex:none; padding:10px 14px 12px; border-top:1px solid var(--border-default); background:rgba(255,255,255,.94)}
.cmp-bar{display:flex; align-items:flex-end; gap:8px}
.cmp-pill{flex:1; min-width:0; display:flex; align-items:flex-end; min-height:44px; padding:0 14px 0 16px; background:#fff;
  border:1px solid var(--border-default); border-radius:22px; transition:border-color .15s, box-shadow .15s}
.cmp-pill:focus-within{border-color:var(--accent-500); box-shadow:0 0 0 3px var(--accent-50)}
.cmp-input{flex:1; min-width:0; align-self:center; border:none; outline:none; resize:none; background:transparent; display:block;
  color:var(--text-primary); font:inherit; font-size:15px; line-height:21px; padding:11px 0; height:43px; min-height:43px;
  max-height:130px; box-sizing:border-box; overflow-y:hidden}
.cmp-input::placeholder{color:var(--text-tertiary)}
.cmp-send{flex:none; width:44px; height:44px; padding:0; border:none; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; background:var(--accent-500); color:#fff; cursor:pointer;
  transition:background .15s, transform .1s}
.cmp-send svg{width:20px; height:20px; display:block; margin-left:2px}
.cmp-send:hover{background:var(--accent-600)}
.cmp-send:active{transform:scale(.94)}
.cmp-send:focus-visible{outline:2px solid var(--accent-700); outline-offset:2px}
.cmp-hint{margin:6px 52px 0 16px; font-size:12px; line-height:1.4; color:var(--text-tertiary)}
.cmp-locked{font-size:var(--text-sm); color:var(--text-secondary); padding:8px 4px}

@media(max-width:899px){
  .client-item{grid-template-columns:52px minmax(0,1fr); padding:0 14px}
  .ci-av{width:52px; height:52px}
  .ci-body{min-height:74px}
  .ci-name{font-size:16px}
  .ci-preview{font-size:14px}
  .chat-head{padding:8px 10px; gap:8px}
  .msg-line, .msg-under{max-width:88%}
  .chat-messages{padding:12px 10px 16px}
  .chat-input-wrap{padding:8px 8px 10px}
  .cmp-hint{margin:6px 8px 0}
}

/* An email that did not go, or did not arrive, says so in red. */
.delivery.bad, .mmsg-to .bad{color:#B42318; font-weight:var(--weight-semibold)}
/* A chip's count shows only when there is something to count. */
.chip .count:empty{display:none}