/* Reachly UI system — THE INBOX. Drawn by /ui/inbox-page.js; tokens and
   parts come from /ui/rl-ui.css, /ui/rl-page.css and /ui/rl-parts.css.
   docs/ui-parity/inbox.md is the contract this page had to keep.

   THE BAR (owner, 2026-09-21: "I dont find this premium right now"): the house
   language is material and micro-typography — layered surfaces, a warm ground,
   a whisper of accent glow where it earns it, 10px labels with real
   letterspacing, and ONE accent colour doing the work. Not a grid of flat
   white cards separated by hairlines, which is what the first cut was.

   THE PAGE DOES NOT SCROLL. An inbox that scrolls as a document puts the reply
   box below the fold, so answering somebody starts by finding the composer
   (owner: "So we need to scroll to reply?"). The shell fills the window under
   the top bar and only the columns scroll inside it. .rl-page already says
   height:100dvh-68px and overflow:hidden; this page only trims the padding,
   because a four-pane shell is full-bleed. */
.rlx.rl-page.ib-pg{padding:14px 16px 16px}
@media (max-width:760px){.rlx.rl-page.ib-pg{padding:0}}

/* ── the shell ──────────────────────────────────────────────────────────
   One object, not four. The panes are divided by light rather than by a line:
   each has its own ground, so the eye reads columns without a rule drawn
   between them. Only the thread grows. */
.rlx .ib{flex:1;display:grid;grid-template-columns:216px 344px minmax(0,1fr) 318px;min-height:0;
  border-radius:20px;overflow:hidden;background:var(--rl-surface);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px -12px rgba(16,24,40,.18),0 0 0 1px rgba(16,24,40,.07)}
.rlx .ib>*{min-width:0;min-height:0;display:flex;flex-direction:column}
/* The grid's children are WRAPPERS (the phone flow shows one at a time), so
   the panes are grandchildren. Both levels have to be a column flexbox that
   may shrink, or a pane sizes to its content and pushes the composer off the
   bottom of the window. */
.rlx .ib-rail,.rlx .ib-list,.rlx .ib-th,.rlx .ib-cx{flex:1;min-height:0;display:flex;flex-direction:column}

/* ── 1. the rail ────────────────────────────────────────────────────────
   Ordered the way a person works: what is waiting on ME, what the AI has,
   everything else. "All" is not first — it is the one folder that answers
   nothing. The active row is a solid dark pill: decisive, and it stops the
   coral being spent on navigation. */
.rlx .ib-rail{padding:14px 10px;overflow-y:auto;gap:1px;background:linear-gradient(180deg,#f7f8fb,#f1f3f8)}
.rlx .ib-rg{margin:16px 8px 7px;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--rl-ink4)}
.rlx .ib-rg:first-child{margin-top:2px}
.rlx .ib-f{display:flex;align-items:center;gap:10px;width:100%;height:33px;padding:0 10px;border-radius:9px;
  font-size:13px;font-weight:500;color:var(--rl-ink2);transition:background .12s var(--rl-ease),color .12s}
.rlx .ib-f:hover{background:rgba(16,24,40,.045);color:var(--rl-ink)}
.rlx .ib-f .rl-ic{flex:none;color:var(--rl-ink4)}
.rlx .ib-f b{flex:1;min-width:0;font-weight:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .ib-f i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--rl-ink4);font-variant-numeric:tabular-nums}
.rlx .ib-f.is-on{background:linear-gradient(180deg,#2a3040,#171b26);color:#fff;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 8px -2px rgba(16,24,40,.4)}
.rlx .ib-f.is-on .rl-ic{color:#f7a894}
.rlx .ib-f.is-on i{color:rgba(255,255,255,.62)}
/* The only place colour is spent in the rail: a queue with people in it. */
.rlx .ib-f.is-urgent i{color:var(--rl-acc2);font-weight:700}
.rlx .ib-f.is-on.is-urgent i{color:#ffb9a6}
.rlx .ib-f.is-sub{height:29px;padding-left:32px;font-size:12.5px;color:var(--rl-ink3)}
.rlx .ib-f.is-sub .dot{width:6px;height:6px;border-radius:50%;background:var(--c,var(--rl-ink4));flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--rl-ink4)) 16%,transparent)}
.rlx .ib-addview{color:var(--rl-acc2);font-weight:600}
.rlx .ib-addview .rl-ic{color:var(--rl-acc2)!important}

/* ── 2. the list ────────────────────────────────────────────────────────── */
.rlx .ib-list{background:var(--rl-surface);box-shadow:inset 1px 0 0 rgba(16,24,40,.06)}
.rlx .ib-lh{flex:none;padding:13px 13px 11px;box-shadow:inset 0 -1px 0 rgba(16,24,40,.06)}
.rlx .ib-find{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;border-radius:11px;color:var(--rl-ink3);
  background:var(--rl-surface2);box-shadow:inset 0 0 0 1px rgba(16,24,40,.06);transition:box-shadow .15s,background .15s}
.rlx .ib-find:focus-within{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 45%,transparent),0 0 0 4px var(--rl-ring)}
.rlx .ib-find .rl-bare{flex:1;min-width:0;font-size:13px}
/* Clear the search: the way back to the folder you were in. */
.rlx .ib-find .ib-qx{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-right:-5px;border-radius:7px;color:var(--rl-ink3);transition:background .15s,color .15s}
.rlx .ib-find .ib-qx:hover{background:rgba(16,24,40,.06);color:var(--rl-ink)}
.rlx .ib-find .ib-qx:focus-visible{outline:2px solid var(--rl-acc);outline-offset:1px}
.rlx .ib-lh .sub .ib-found{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .ib-lh .sub{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:11.5px;color:var(--rl-ink3)}
.rlx .ib-lh .sub b{color:var(--rl-ink);font-weight:700}
.rlx .ib-lh .sub .sp{flex:1}
.rlx .ib-rows{flex:1;min-height:0;overflow-y:auto;padding:6px 8px 14px}

/* A row is a card that only shows itself when it matters. Tight rhythm: the
   first cut was so airy it read as unfinished. */
.rlx .ib-r{display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;align-items:center;
  padding:9px 10px;border-radius:12px;width:100%;text-align:left;transition:background .12s}
.rlx .ib-r:hover{background:var(--rl-surface2)}
.rlx .ib-r+.ib-r{box-shadow:inset 0 1px 0 rgba(16,24,40,.05)}
.rlx .ib-r.is-on,.rlx .ib-r.is-on+.ib-r{box-shadow:none}
.rlx .ib-r.is-on{background:linear-gradient(180deg,#fff6f3,#fff1ed);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 26%,transparent),0 2px 10px -4px rgba(241,91,65,.35)}
.rlx .ib-r .av{grid-row:span 2}
.rlx .ib-r .rl-av{width:36px;height:36px;font-size:12px;font-weight:700}
.rlx .ib-r .t1{display:flex;align-items:center;gap:8px;min-width:0}
.rlx .ib-r .t1 b{flex:1;min-width:0;font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--rl-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .ib-r.is-unread .t1 b{font-weight:800}
.rlx .ib-r .t1 time{flex:none;font-size:10.5px;font-weight:500;color:var(--rl-ink4);font-variant-numeric:tabular-nums}
.rlx .ib-r .t2{display:flex;align-items:center;gap:7px;margin-top:2px;min-width:0}
.rlx .ib-r .t2 p{flex:1;min-width:0;margin:0;font-size:12.5px;color:var(--rl-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .ib-r.is-unread .t2 p{color:var(--rl-ink2)}
.rlx .ib-r .t2 .n{flex:none;min-width:17px;height:17px;padding:0 5px;border-radius:9px;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#f56a51,#ec4f33);box-shadow:0 1px 3px rgba(224,74,48,.5)}

/* The state chip. Five candy pills down a column is noise, so the colour is a
   DOT and the word stays ink — except the ones actually asking for somebody,
   which keep theirs. */
.rlx .ib-chip{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 8px 0 7px;border-radius:999px;
  font-size:10.5px;font-weight:600;white-space:nowrap;color:var(--rl-ink3);
  background:var(--rl-surface2);box-shadow:inset 0 0 0 1px rgba(16,24,40,.05)}
.rlx .ib-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c,var(--rl-ink4));flex:none}
.rlx .ib-chip .rl-ic{display:none}
.rlx .ib-chip.is-ai{--c:#7c3aed}
.rlx .ib-chip.is-mine{--c:var(--rl-info)}
.rlx .ib-chip.is-done{--c:var(--rl-ok)}
.rlx .ib-chip.is-pause{--c:var(--rl-warn)}
.rlx .ib-chip.is-wait{--c:var(--rl-acc);color:var(--rl-acc2);font-weight:700;
  background:var(--rl-acc-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 22%,transparent)}

/* The 24-hour window as a CLOCK. It decides whether a reply can be typed at
   all, so it belongs on the row — not in a notice that appears after you have
   already typed. */
.rlx .ib-win{position:relative;width:18px;height:18px;flex:none}
.rlx .ib-win svg{display:block;transform:rotate(-90deg)}
.rlx .ib-win circle{fill:none;stroke-width:2.5}
.rlx .ib-win .bg{stroke:rgba(16,24,40,.09)}
.rlx .ib-win .fg{stroke:var(--rl-ok);stroke-linecap:round;transition:stroke-dashoffset .3s}
.rlx .ib-win.is-soon .fg{stroke:var(--rl-warn)}
.rlx .ib-win.is-shut .fg{stroke:transparent}
.rlx .ib-win.is-shut::after{content:"";position:absolute;inset:5px;border-radius:50%;background:rgba(16,24,40,.16)}
.rlx .ib-more{padding:16px 12px 8px;text-align:center;font-size:11px;color:var(--rl-ink4)}
.rlx .ib-list .lnk,.rlx .ib-sec .lnk{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--rl-acc2)}

/* ── 3. the thread ──────────────────────────────────────────────────────
   A warm paper ground, so the bubbles sit ON something. Grey on grey is what
   made the first cut feel unfinished. */
.rlx .ib-th{background:#f4f1ec;box-shadow:inset 1px 0 0 rgba(16,24,40,.06)}
.rlx .ib-thd{flex:none;display:flex;align-items:center;gap:11px;padding:11px 14px;background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);box-shadow:inset 0 -1px 0 rgba(16,24,40,.07)}
.rlx .ib-thd .t{flex:1;min-width:0}
.rlx .ib-thd .t b{display:block;font-size:14px;font-weight:700;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .ib-thd .t span{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--rl-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .ib-thd .rl-btn{flex:none}
.rlx .ib-aiw{color:#7c3aed;font-weight:700}
.rlx .ib-msgs{flex:1;min-height:0;overflow-y:auto;padding:14px 20px 18px;display:flex;flex-direction:column;gap:2px;
  background-image:radial-gradient(circle at 1px 1px,rgba(16,24,40,.05) 1px,transparent 0);background-size:24px 24px}
.rlx .ib-day{align-self:center;margin:14px 0 9px;padding:4px 12px;border-radius:999px;font-size:10.5px;font-weight:600;color:var(--rl-ink3);
  background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(16,24,40,.07)}
.rlx .ib-b{position:relative;max-width:min(520px,74%);padding:9px 12px 7px;font-size:13.5px;line-height:1.5;word-break:break-word}
.rlx .ib-b.in{align-self:flex-start;background:#fff;border-radius:16px 16px 16px 5px;box-shadow:0 1px 2px rgba(16,24,40,.09)}
.rlx .ib-b.out{align-self:flex-end;border-radius:16px 16px 5px 16px;
  background:linear-gradient(180deg,#e9f8ee,#ddf2e6);box-shadow:0 1px 2px rgba(14,159,110,.16)}
.rlx .ib-b .mt{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:3px;font-size:10px;color:var(--rl-ink4)}
.rlx .ib-b .mt .rl-ic{color:var(--rl-ink4)}
/* The tick's colour is set on the drawn icon itself: the rule above matches
   the svg, so a colour on its wrapper never reached it (read stayed grey). */
.rlx .ib-b .mt .ib-tick{flex:none;display:block}
.rlx .ib-b .mt .is-read .rl-ic{color:#34b7f1}
.rlx .ib-b .btn{display:block;margin:7px -12px -7px;padding:9px;text-align:center;font-size:12.5px;font-weight:600;color:var(--rl-info);
  box-shadow:inset 0 1px 0 rgba(16,24,40,.08)}
/* each button wears its own icon (reply, link, call, copy, list), BESIDE its
   words as WhatsApp draws it, not on a line of its own above them; a link
   button whose address we hold opens it */
.rlx .ib-b .btn{display:flex;align-items:center;justify-content:center;gap:6px}
.rlx .ib-b .btn .rl-ic{flex:none}
.rlx .ib-b a.btn{text-decoration:none}
.rlx .ib-b a.btn:hover{text-decoration:underline;text-underline-offset:2px}
.rlx .ib-b .ib-rows{display:block;margin:8px 0 -2px;font-size:11.5px;line-height:1.5;color:var(--rl-ink3);text-align:center}
/* An AI turn is the AI's, and says so. Today there is no marker of any kind,
   so an operator cannot tell their own words from the agent's. The glow is the
   house's AI treatment, at a whisper. */
.rlx .ib-b.is-ai{color:#e8ebf2;border-radius:16px 16px 5px 16px;
  background:radial-gradient(130% 180% at 92% -20%,rgba(124,58,237,.34),transparent 58%),linear-gradient(180deg,#242a3a,#171b26);
  box-shadow:0 2px 10px -3px rgba(23,27,38,.5)}
.rlx .ib-b.is-ai .mt{color:rgba(232,235,242,.5)}
.rlx .ib-b.is-tpl{background:linear-gradient(180deg,#eef4ff,#e6eeff);box-shadow:0 1px 2px rgba(37,99,235,.14)}
.rlx .ib-by{display:inline-flex;align-items:center;gap:5px;margin:8px 3px 1px;font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rl-ink4)}
.rlx .ib-by.is-ai{align-self:flex-end;color:#8b5cf6}
.rlx .ib-by.is-from{align-self:flex-start;letter-spacing:.02em;text-transform:none;font-size:10.5px;font-weight:500;color:var(--rl-ink3)}
.rlx .ib-by.is-from b{font-weight:700;color:var(--rl-ink2)}
.rlx .ib-by.is-tplby{align-self:flex-end;letter-spacing:.02em;text-transform:none;font-size:10.5px;font-weight:500;margin-top:3px}
.rlx .ib-older{align-self:center;margin-bottom:4px}
/* The hand-over: why the agent stopped, in the thread where it stopped. */
.rlx .ib-hand{align-self:center;display:flex;align-items:center;gap:10px;max-width:min(520px,82%);margin:12px 0 6px;padding:10px 13px;border-radius:13px;
  font-size:12.5px;line-height:1.5;color:#7a4510;background:linear-gradient(180deg,#fff8ec,#fef3e2);
  box-shadow:inset 0 0 0 1px rgba(217,119,6,.22),0 1px 3px rgba(217,119,6,.12)}
.rlx .ib-hand .rl-ic{flex:none;color:var(--rl-warn)}
.rlx .ib-banner{flex:none;display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:12.5px;line-height:1.5;color:#7a4510;
  background:linear-gradient(180deg,#fff8ec,#fdf0dd);box-shadow:inset 0 -1px 0 rgba(217,119,6,.22)}
.rlx .ib-banner .rl-ic{flex:none;color:var(--rl-warn)}
.rlx .ib-banner>div{flex:1;min-width:0}
/* ── the composer ───────────────────────────────────────────────────────
   Two states, and they are DIFFERENT CONTROLS rather than one box with a
   warning over it. Outside the 24-hour window free text is not delivered at
   all, so offering the box and refusing the send is the wrong shape. */
.rlx .ib-comp{flex:none;padding:11px 14px 13px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(16,24,40,.07)}
.rlx .ib-cbar{display:flex;align-items:flex-end;gap:9px}
.rlx .ib-cbox{flex:1;min-width:0;display:flex;align-items:flex-end;gap:6px;padding:6px 8px 6px 14px;border-radius:19px;
  background:var(--rl-surface2);box-shadow:inset 0 0 0 1px rgba(16,24,40,.07);transition:box-shadow .15s,background .15s}
.rlx .ib-cbox:focus-within{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 40%,transparent),0 0 0 4px var(--rl-ring)}
.rlx .ib-cbox textarea{flex:1;min-width:0;border:0;background:none;outline:none;resize:none;font:inherit;font-size:13.5px;line-height:1.5;max-height:120px;padding:6px 0;color:var(--rl-ink);overflow-y:auto}
.rlx .ib-ctool{display:flex;align-items:center;gap:1px}
.rlx .ib-ctool button{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:var(--rl-ink4);transition:.12s}
.rlx .ib-ctool button:hover{background:rgba(16,24,40,.06);color:var(--rl-ink2)}
.rlx .ib-send{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;flex:none;transition:transform .12s,box-shadow .15s;
  background:linear-gradient(180deg,#f56a51,#ec4f33);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 5px rgba(224,74,48,.4),0 8px 20px -6px rgba(241,91,65,.65)}
.rlx .ib-send:hover{transform:translateY(-1px)}
/* The hint lives under the bar, not inside the placeholder: at 1320 the
   placeholder wrapped, the one-line box clipped it, and the textarea grew a
   scrollbar of its own. */
.rlx .ib-chint{margin:7px 53px 0 0;text-align:right;font-size:10.5px;color:var(--rl-ink4);letter-spacing:.01em}
.rlx .ib-chint kbd{font:inherit;font-weight:700;color:var(--rl-ink3);background:rgba(16,24,40,.05);
  border-radius:4px;padding:1px 4px;margin:0 1px;box-shadow:inset 0 0 0 1px rgba(16,24,40,.07)}
.rlx .ib-shut{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 14px;border-radius:14px;
  background:linear-gradient(180deg,#fff,#fafbfd);box-shadow:inset 0 0 0 1px rgba(16,24,40,.08),0 1px 3px rgba(16,24,40,.05)}
.rlx .ib-shut>.rl-ic{flex:none;color:var(--rl-ink3)}
/* 240px is the narrowest this stays a sentence; below it the button takes its
   own line rather than squeezing the words to one per row. */
.rlx .ib-shut .t{flex:1 1 240px;min-width:0;font-size:12.5px;line-height:1.55;color:var(--rl-ink2)}
.rlx .ib-shut .t b{color:var(--rl-ink)}
.rlx .ib-shut .rl-btn{flex:1 0 auto}
.rlx .ib-quick{display:flex;gap:7px;flex-wrap:wrap}
.rlx .ib-quick button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap;color:var(--rl-ink3);background:rgba(16,24,40,.04);transition:.12s}
.rlx .ib-quick button:hover{color:var(--rl-ink);background:rgba(16,24,40,.07)}

/* ── 4. the context pane ────────────────────────────────────────────────
   ONE module with internal rules, not five cards floating on grey. Five white
   boxes on a grey field is what reads as scattered. */
.rlx .ib-cx{flex:1;min-height:0;overflow-y:auto;background:var(--rl-surface);box-shadow:inset 1px 0 0 rgba(16,24,40,.06)}
.rlx .ib-cxh{padding:20px 16px 16px;text-align:center;
  background:radial-gradient(110% 130% at 50% -30%,var(--rl-acc-soft),transparent 62%),linear-gradient(180deg,#fcfcfe,#fff)}
.rlx .ib-cxh .rl-av{width:56px;height:56px;font-size:17px;font-weight:700;margin:0 auto 10px;box-shadow:0 4px 12px -3px rgba(16,24,40,.22)}
.rlx .ib-cxh b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.rlx .ib-cxh span{display:block;font-size:12px;color:var(--rl-ink3);margin-top:2px;font-variant-numeric:tabular-nums}
/* The one line that decides whether this person matters, before any field. */
.rlx .ib-verdict{margin:0 16px 4px;padding:12px 13px;border-radius:13px;font-size:12.5px;line-height:1.6;color:var(--rl-ink2);
  background:linear-gradient(180deg,#f8f9fc,#f4f6fa);box-shadow:inset 0 0 0 1px rgba(16,24,40,.055)}
.rlx .ib-verdict b{color:var(--rl-ink);font-weight:700}
.rlx .ib-sec{padding:14px 16px;box-shadow:inset 0 1px 0 rgba(16,24,40,.06)}
.rlx .ib-sec>h4{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--rl-ink4)}
.rlx .ib-sec>h4 .rl-ic{color:var(--rl-ink4)}
.rlx .ib-sec>h4 .sp{flex:1}
.rlx .ib-kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:12.5px}
.rlx .ib-kv span{color:var(--rl-ink3)}
.rlx .ib-kv b{font-weight:600;text-align:right;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* One tag can be a 60-character session name, and three of those wrapped
   turned the section into a wall (owner: "Tags should be in horizontal
   scrolling not should pile up"). One line, scrolled sideways, each tag
   keeping its own width. */
.rlx .ib-tags{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-bottom:-4px;scroll-snap-type:x proximity}
.rlx .ib-tags>*{flex:none;max-width:210px;scroll-snap-align:start}
.rlx .ib-note{margin:0;font-size:12.5px;line-height:1.6;color:var(--rl-ink2)}
/* The case file is the agents' work, so it wears the house's AI treatment. */
.rlx .ib-sec.is-case{margin:12px 16px 2px;padding:13px 14px;border-radius:15px;color:#e8ebf2;box-shadow:0 3px 14px -5px rgba(23,27,38,.55);
  background:radial-gradient(120% 150% at 92% -10%,rgba(124,58,237,.3),transparent 56%),linear-gradient(180deg,#242a3a,#171b26)}
.rlx .ib-sec.is-case>h4,.rlx .ib-sec.is-case>h4 .rl-ic{color:rgba(232,235,242,.48)}
.rlx .ib-sec.is-case>h4 em{font-style:normal;font-size:9.5px;letter-spacing:.1em}
.rlx .ib-sec.is-case .ib-kv span{color:rgba(232,235,242,.5)}
.rlx .ib-sec.is-case .ib-kv b{color:#fff}
.rlx .ib-sec.is-case+.ib-sec{box-shadow:none}
/* The one thing you always want from this pane is the person, and it was at
   the end of everything they have ever done (owner: "open full profile should
   be sticky"). Pinned to the bottom of the pane instead. */
.rlx .ib-cx{position:relative}
.rlx .ib-cxf{position:sticky;bottom:0;margin-top:auto;padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(16,24,40,.08),0 -10px 24px -18px rgba(16,24,40,.5)}
.rlx .ib-cxf .rl-btn{width:100%;justify-content:center}

/* ── bulk ───────────────────────────────────────────────────────────────── */
.rlx .ib-bulk{flex:none;display:flex;flex-direction:column;gap:9px;padding:11px 13px 12px;font-size:12.5px;color:#fff;
  background:radial-gradient(120% 200% at 88% -30%,rgba(241,91,65,.18),transparent 56%),linear-gradient(180deg,#2a3040,#171b26);
  box-shadow:inset 0 -1px 0 rgba(16,24,40,.5)}
.rlx .ib-bulk .r1,.rlx .ib-bulk .r2{display:flex;align-items:center;gap:8px}
.rlx .ib-bulk .r2 .rl-btn{flex:1;justify-content:center}
.rlx .ib-bulk b{font-weight:700}
.rlx .ib-bulk .sp{flex:1}
.rlx .ib-bulk .lnk{color:rgba(255,255,255,.72);text-decoration:underline;font-weight:600}
.rlx .ib-bulk .rl-btn{height:30px;font-size:12px!important;color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);box-shadow:none}
.rlx .ib-bulk .rl-btn:hover{background:rgba(255,255,255,.18)}
.rlx .ib-ck{width:18px;height:18px;border-radius:6px;flex:none;display:grid;place-items:center;color:transparent;
  background:#fff;box-shadow:inset 0 0 0 1.5px rgba(16,24,40,.22)}
.rlx .ib-ck.is-on{color:#fff;background:linear-gradient(180deg,#f56a51,#ec4f33);box-shadow:0 1px 3px rgba(224,74,48,.45)}

/* ── narrower ───────────────────────────────────────────────────────────
   Hiding the PANE leaves its wrapper holding a grid slot, so it drops onto an
   implicit second row and the thread squeezes to three words a line. The
   WRAPPER is what goes — the same grandchild trap as the flex one above. */
@media (max-width:1320px){ .rlx .ib-aiw{display:none} }
@media (max-width:1280px){ .rlx .ib{grid-template-columns:216px 336px minmax(0,1fr)} .rlx .ib>*:nth-child(4){display:none} }
/* Collapsed to icons, the AI's four role rows become four unlabelled dots —
   worse than not showing them. They go; the roles stay reachable from the row
   above, which keeps its icon and gains a count badge. */
@media (max-width:1020px){
  .rlx .ib{grid-template-columns:60px 300px minmax(0,1fr)}
  .rlx .ib-rail{padding:12px 8px;align-items:center}
  .rlx .ib-f b,.rlx .ib-f i,.rlx .ib-rg,.rlx .ib-f.is-sub,.rlx .ib-addview{display:none}
  .rlx .ib-f{width:42px;justify-content:center;padding:0;position:relative}
  .rlx .ib-f[data-n]::after{content:attr(data-n);position:absolute;top:1px;right:1px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;
    background:var(--rl-ink3);color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center}
  .rlx .ib-f.is-urgent[data-n]::after{background:linear-gradient(180deg,#f56a51,#ec4f33)}
}
/* A phone shows ONE pane at a time, so the rail is that whole pane and goes
   back to words. Without this the 1020px icons-only rail survived down here
   and a full-width column held seven 42px glyphs. */
@media (max-width:720px){
  .rlx .ib{grid-template-columns:minmax(0,1fr);border-radius:0}
  .rlx .ib>*{display:none}
  .rlx .ib>*.is-step{display:flex}
  .rlx .ib-rail{padding:14px 10px;align-items:stretch}
  .rlx .ib-f b,.rlx .ib-f i,.rlx .ib-rg{display:block}
  .rlx .ib-f,.rlx .ib-f.is-sub,.rlx .ib-addview{display:flex}
  .rlx .ib-f{width:100%;justify-content:flex-start;padding:0 10px}
  .rlx .ib-f[data-n]::after{display:none}
  .rlx .ib-b{max-width:86%}
  .rlx .ib-aiw{display:none}
  .rlx .ib-thd .rl-btn{font-size:0!important;width:34px;padding:0;justify-content:center}
}

/* ── inside the app ─────────────────────────────────────────
   Things the mockup did not have to think about. */

/* The old sheet gives #page-inbox its own height and the phone rules below
   760px move the whole app around. Both are answered here so the shell above
   is the only thing deciding this page's size. */
#page-inbox.rl-page{height:calc(100vh - 68px - var(--rl-banner-h,0px));height:calc(100dvh - 68px - var(--rl-banner-h,0px))}
/* The same sum as every other rebuilt page (rl-page.css): the bar measures
   61px and the app's tab bar covers the bottom 59. Without the second term
   the last rows of the list sat under the tab bar. The open thread hides the
   tab bar and the old sheet gives this page height:100dvh !important there,
   which still wins. */
@media (max-width:760px){#page-inbox.rl-page{height:calc(100vh - 61px - var(--rl-tabbar-h,59px) - var(--rl-banner-h,0px));height:calc(100dvh - 61px - var(--rl-tabbar-h,59px) - var(--rl-banner-h,0px))}}

/* Media in a bubble. A picture sets the bubble's width; a sticker, a voice
   note and a document chip do not — they are their own size and the text
   beside them should keep setting it. */
.rlx .ib-b .ib-media{display:block;margin:-3px -6px 6px;border-radius:12px;overflow:hidden;max-width:100%}
.rlx .ib-b .ib-media img,.rlx .ib-b .ib-media video{display:block;width:100%;max-height:320px;object-fit:cover;background:rgba(16,24,40,.06)}
.rlx .ib-b.has-media{max-width:min(320px,70%);padding:6px 6px 5px}
.rlx .ib-b.has-media .mt{margin-right:6px}
.rlx .ib-b .ib-media.is-sticker{background:none;width:124px}
.rlx .ib-b .ib-media.is-sticker img{max-height:124px;object-fit:contain}
.rlx .ib-doc{display:flex;align-items:center;gap:9px;margin:1px 0 6px;padding:8px 10px;border-radius:10px;font-size:12.5px;font-weight:600;
  color:var(--rl-ink2);background:rgba(16,24,40,.05)}
.rlx .ib-b.is-ai .ib-doc{color:#e8ebf2;background:rgba(255,255,255,.1)}
/* WhatsApp's own ```mono``` run, after escaping. */
.rlx .ib-b code{font-family:'DM Mono',ui-monospace,monospace;font-size:12.5px;background:rgba(16,24,40,.06);border-radius:5px;padding:1px 5px}
.rlx .ib-b.is-ai code{background:rgba(255,255,255,.12)}
.rlx .ib-err{margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--rl-danger)}
.rlx .ib-b.is-ai .ib-err{color:#ff9b8a}
.rlx .ib-b .mt .is-fail .rl-ic{color:var(--rl-danger)}
.rlx .ib-b .mt .is-wait{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}

/* The voice bubble is the app's own player (one delegated controller for the
   whole thread, in reachly-server-client.js), wearing the mockup's clothes.
   .va / [data-va-*] are ITS contract — renaming them silently unplugs it. */
.rlx .ib-b .va{display:flex;align-items:center;gap:10px;min-width:196px;padding:1px 0 5px}
.rlx .ib-b .va-btn{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;color:#fff;
  background:linear-gradient(180deg,#f56a51,#ec4f33);box-shadow:0 2px 6px -1px rgba(224,74,48,.5)}
.rlx .ib-b .va-track{position:relative;flex:1;height:18px;cursor:pointer}
.rlx .ib-b .va-wave{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.rlx .ib-b .va-wave i{flex:1;border-radius:2px;background:rgba(16,24,40,.22)}
.rlx .ib-b .va-wave-on{overflow:hidden}
.rlx .ib-b .va-wave-on i{background:var(--rl-acc)}
.rlx .ib-b .va-time{flex:none;font-size:10.5px;color:var(--rl-ink3);font-variant-numeric:tabular-nums}
.rlx .ib-b.is-ai .va-wave i{background:rgba(255,255,255,.28)}
.rlx .ib-b.is-ai .va-time{color:rgba(232,235,242,.6)}

/* Skeletons, empties and the disabled composer. */
.rlx .ib-skel{display:flex;flex-direction:column;gap:9px;padding:10px}
.rlx .ib-skel i{display:block;height:44px;border-radius:12px;background:linear-gradient(90deg,var(--rl-surface2),var(--rl-surface3),var(--rl-surface2));background-size:200% 100%;animation:ibSk 1.2s linear infinite}
@keyframes ibSk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.rlx .ib-skel i{animation:none}}
.rlx .ib-empty{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:30px 22px;text-align:center}
.rlx .ib-empty .rl-tile{width:44px;height:44px;border-radius:13px}
.rlx .ib-empty b{font-size:14px;font-weight:700;color:var(--rl-ink)}
.rlx .ib-empty span{font-size:12.5px;line-height:1.6;color:var(--rl-ink3);max-width:280px}
.rlx .ib-send:disabled,.rlx .ib-ctool button:disabled{opacity:.42;pointer-events:none}
.rlx .ib-cbox.is-off{opacity:.6}

/* The list's own footer: what you are looking at, and what is still on the
   server. The old build just stopped at 3,000 and said nothing. */
.rlx .ib-more button{font-size:11.5px;font-weight:700;color:var(--rl-acc2)}

/* Unread is a DOT, not a number: nothing on the wire says how MANY messages
   are unread, only whether the chat is, and a badge reading "1" on every
   unread row would be a number we invented. */
.rlx .ib-r .t2 .n.is-dot{min-width:0;width:9px;height:9px;padding:0;border-radius:50%}

/* Resolved is a STATE of the conversation, and the only thing that said so
   was a toast that had gone by the time you looked (owner: "Resolved should
   be visible clearly fill with green may be, premium look"). The tick fills,
   and the thread says it in words above the composer. */
.rlx .ib-thd .rl-btn.is-on{color:#fff!important;border-color:transparent!important;
  background:linear-gradient(180deg,#19b37d,#0e9f6e)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(14,159,110,.45),0 6px 16px -6px rgba(14,159,110,.7)!important}
.rlx .ib-thd .rl-btn.is-on:hover{background:linear-gradient(180deg,#14a673,#0b8e62)!important}
.rlx .ib-done{flex:none;display:flex;align-items:center;gap:9px;padding:9px 16px;font-size:12.5px;line-height:1.5;color:#0a7a47;
  background:linear-gradient(180deg,#f0fbf5,#e7f7ef);box-shadow:inset 0 -1px 0 rgba(14,159,110,.22)}
.rlx .ib-done .rl-ic{flex:none;color:var(--rl-ok)}
.rlx .ib-done b{color:#08613a}
.rlx .ib-done .sp{flex:1}
.rlx .ib-done .rl-btn{flex:none;height:28px;font-size:12px!important}

/* The thread header's live-window pill, and the note editor. */
.rlx .ib-thd .ib-win{margin-left:2px}
.rlx .ib-noteed{width:100%;min-height:76px;resize:vertical;font:inherit;font-size:12.5px;line-height:1.6;padding:9px 10px;border-radius:10px;
  color:var(--rl-ink);background:var(--rl-surface2);border:0;outline:0;box-shadow:inset 0 0 0 1px rgba(16,24,40,.08)}
.rlx .ib-noteed:focus{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 40%,transparent),0 0 0 4px var(--rl-ring)}

/* The old sheet styles a bare input/textarea with !important — background,
   border, radius and an inset shadow — so a field sitting inside a shell we
   drew ourselves came out as a white box inside a grey pill (owner, on the
   composer). .rl-bare and .rl-ipt already answer in kind; these are the two
   fields that are neither. */
.rlx .ib-cbox textarea{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;min-height:0!important;padding:6px 0!important;width:auto!important}
.rlx .ib-noteed{border:0!important;border-radius:10px!important;box-shadow:inset 0 0 0 1px rgba(16,24,40,.08)!important}
.rlx .ib-noteed:focus{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 40%,transparent),0 0 0 4px var(--rl-ring)!important}

/* ── the template picker ────────────────────────────────────────────────
   It had no styles of its own: .rl-pick is not in the system, so every
   template rendered as a run of bold-then-body text with nothing between
   them, and the search box — .rl-search is flex:0 1 250px — took 250px of
   HEIGHT inside a column stack. A list of templates is a list. */
.rlx .ib-tp{display:flex;flex-direction:column;gap:12px}
.rlx .ib-tp-find{flex:none;display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border-radius:11px;color:var(--rl-ink3);
  background:var(--rl-surface2);box-shadow:inset 0 0 0 1px rgba(16,24,40,.08);transition:box-shadow .15s,background .15s}
.rlx .ib-tp-find:focus-within{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 45%,transparent),0 0 0 4px var(--rl-ring)}
.rlx .ib-tp-find .rl-bare{flex:1;min-width:0;font-size:13.5px}
.rlx .ib-tp-list{flex:none;max-height:246px;overflow-y:auto;display:flex;flex-direction:column;border-radius:13px;background:var(--rl-surface2);box-shadow:inset 0 0 0 1px rgba(16,24,40,.07)}
.rlx .ib-tp-i{display:block;width:100%;padding:10px 13px;text-align:left;transition:background .12s}
.rlx .ib-tp-i+.ib-tp-i{box-shadow:inset 0 1px 0 rgba(16,24,40,.06)}
.rlx .ib-tp-i:hover{background:rgba(16,24,40,.04)}
.rlx .ib-tp-i b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--rl-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .ib-tp-i span{display:block;margin-top:2px;font-size:12px;color:var(--rl-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .ib-tp-i i{display:block;margin-top:4px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rl-ink4)}
.rlx .ib-tp-i.is-on,.rlx .ib-tp-i.is-on+.ib-tp-i{box-shadow:none}
.rlx .ib-tp-i.is-on{background:linear-gradient(180deg,#fff6f3,#fff1ed);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rl-acc) 42%,transparent)}
.rlx .ib-tp-i.is-on i{color:var(--rl-acc2)}
.rlx .ib-tp-none{padding:22px 14px;text-align:center;font-size:12.5px;color:var(--rl-ink3)}
.rlx .ib-tp-pick{display:flex;flex-direction:column;gap:12px;padding-top:12px;box-shadow:inset 0 1px 0 rgba(16,24,40,.07)}
.rlx .ib-tp-vars{display:flex;flex-direction:column;gap:7px}
.rlx .ib-tp-var{display:flex;align-items:center;gap:10px;margin:0}
.rlx .ib-tp-var code{flex:none;width:44px;font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;color:var(--rl-acc2)}
.rlx .ib-tp-var .rl-ipt{flex:1}
.rlx .ib-tp-wa .wa-preview{border-radius:13px}

/* Filters live in a drawer, not a row of six selects above the list — the
   list pane is 344px and six selects is a wall. */
.rlx .ib-fl{display:flex;flex-direction:column;gap:12px}

/* A phone: the app's own bottom tab bar sits over the composer, so the thread
   step takes the screen and the chrome gets out of the way. That is what
   body.mobile-inbox-chat-open already does for the old page. */
@media (max-width:760px){
  .rlx .ib{box-shadow:none}
  .rlx .ib-comp{padding-bottom:calc(13px + env(safe-area-inset-bottom))}
}

/* Send a template to a selection (inbox-page.js, openBulkTemplate): the form
   on the left, the message on a phone on the right. The template card, the
   variable rows, the upload row and the phone are the campaign builder's own
   (rl-campaign.css), so the two can never drift apart. */
.rlx .rl-dlg.is-tsd{width:min(1000px,calc(100vw - 32px));height:min(740px,calc(100vh - 48px))}
.rlx .rl-dlg.is-tsd .rl-ov-bd.tsd{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 336px;padding:0;overflow:hidden;border-top:1px solid var(--rl-line)}
.rlx .tsd-main{min-height:0;overflow-y:auto;padding:0 24px 20px}
.rlx .tsd-side{min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 22px 18px;background:linear-gradient(180deg,#f8f6f3,#f2efea);border-left:1px solid var(--rl-line)}
.rlx .tsd-side-hd{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px}
.rlx .tsd-h{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--rl-ink)}
.rlx .tsd-h .rl-ic{color:var(--rl-ink3)}
.rlx .tsd-h [data-vbadge]{margin-left:auto}
.rlx .tsd-side .tsd-h{margin:0;font:500 10.5px/1 'DM Mono',ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--rl-ink3)}
.rlx .tsd-p{margin:-4px 0 10px;font-size:12.5px;line-height:1.45;color:var(--rl-ink3)}
.rlx .tsd-sec{padding:18px 0;border-top:1px solid #f0f1f5}
.rlx .tsd-to{display:flex;align-items:center;gap:10px;padding:14px 0}
.rlx .tsd-lbl{flex:none;font-size:12.5px;font-weight:700;color:var(--rl-ink3)}
.rlx .tsd-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.rlx .tsd-chip{display:inline-flex;align-items:center;gap:6px;height:28px;max-width:190px;padding:0 10px 0 4px;border-radius:999px;background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line);font-size:12.5px;font-weight:600;color:var(--rl-ink)}
.rlx .tsd-chip>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .tsd-chip.is-more{padding:0 11px;color:var(--rl-ink2)}
.rlx .tsd-seg{max-width:280px}
.rlx .tsd-dt{display:flex;gap:8px;margin-top:10px;max-width:420px}
.rlx .tsd-dt .rl-ipt{flex:1;min-width:0}
.rlx .tsd-as{display:inline-flex;align-items:center;gap:6px;max-width:210px;font-size:12.5px;font-weight:600;color:var(--rl-ink2)}
.rlx .tsd-as>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .tsd-side .rl-cb-phone{flex:none}
.rlx .tsd-note{display:flex;align-items:flex-start;gap:6px;max-width:286px;margin:0;font-size:12px;line-height:1.45;color:var(--rl-ink3)}
.rlx .tsd-note .rl-ic{flex:none;margin-top:1px}
.rlx .tsd-why{display:inline-flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;font-weight:600;color:#b45309}
.rlx .tsd-why>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .tsd-why.is-ok{color:var(--rl-ok)}
@media (max-width:900px){.rlx .rl-dlg.is-tsd .rl-ov-bd.tsd{grid-template-columns:minmax(0,1fr) 312px}.rlx .tsd-side{padding:14px 12px}}
/* A phone: one column, the preview after the form, the sheet scrolls. */
@media (max-width:760px){
  .rlx .rl-dlg.is-tsd{width:auto;height:auto}
  .rlx .rl-dlg.is-tsd .rl-ov-bd.tsd{display:block;overflow-y:auto}
  .rlx .tsd-main,.rlx .tsd-side{overflow:visible}
  .rlx .tsd-main{padding:0 16px 16px}
  .rlx .tsd-side{border-left:0;border-top:1px solid var(--rl-line)}
  /* The card's details get the width; the badge and Change move under them. */
  .rlx .rl-dlg.is-tsd .rl-cb-tpl{flex-wrap:wrap}
  .rlx .rl-dlg.is-tsd .rl-cb-tpl .t{flex:1 1 calc(100% - 60px)}
  .rlx .rl-dlg.is-tsd .rl-cb-tpl .rl-badge{margin-left:53px}
  .rlx .rl-dlg.is-tsd .rl-cb-tpl .rl-btn{margin-left:auto}
  /* Why Send is waiting stays said: on its own line above the buttons. */
  .rlx .rl-dlg.is-tsd .rl-ov-ft{flex-wrap:wrap}
  .rlx .rl-dlg.is-tsd .tsd-why{flex-basis:100%}
  .rlx .rl-dlg.is-tsd .rl-ov-ft .sp{display:none}
}