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

   A template IS a message, so the card is built around the WhatsApp bubble
   rather than around a row of metadata pills. Everything else on the card
   answers one question: can I send this, and if not, what is the move?

   The .wa-* preview is NOT here — it is window.waPreview()'s stylesheet, still
   in index.html's inline <style>, shared with campaigns, workflows and the
   inbox. One copy, wherever it ends up living. */

/* ── the page ───────────────────────────────────────────────────────────── */
.rlx .tp-pg{position:relative;padding:20px 24px 28px;background:var(--rl-bg);border-radius:18px;min-height:70vh}
.rlx .tp-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.rlx .tp-bar .sp{flex:1}

/* The status counts, as one segmented control rather than five boxes that
   report and do nothing. A count of zero is not offered as a filter. */
.rlx .tp-chips{display:flex;gap:2px;padding:3px;border-radius:12px;background:var(--rl-surface3)}
.rlx .tp-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:9px;
  font-size:12.5px;font-weight:600;color:var(--rl-ink2);transition:.15s var(--rl-ease)}
.rlx .tp-chip i{font-style:normal;font-size:11px;font-weight:700;color:var(--rl-ink4);font-variant-numeric:tabular-nums}
.rlx .tp-chip:hover{color:var(--rl-ink)}
.rlx .tp-chip.is-on{background:#fff;color:var(--rl-ink);box-shadow:var(--rl-sh-sm)}
.rlx .tp-chip.is-on i{color:var(--rl-ink2)}
.rlx .tp-chip.is-bad.is-on i{color:var(--rl-danger)}

/* ── needs you ─────────────────────────────────────────
   Two templates out of thirty need a person today — so it opens as ONE line
   that says which two, and the fixes are a click away rather than four
   paragraphs between the owner and their list. Light, because it belongs to
   the page rather than to the AI. */
.rlx .tp-need{margin:0 0 16px;border-radius:15px;overflow:hidden;
  background:linear-gradient(180deg,#fffaf3,#fff6ec);box-shadow:inset 0 0 0 1px rgba(217,119,6,.24),0 1px 2px rgba(16,24,40,.04)}
.rlx .tp-need-h{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;text-align:left}
.rlx .tp-need-h .rl-tile{--c:var(--rl-warn);width:32px;height:32px;border-radius:10px}
.rlx .tp-need-h .t{flex:1;min-width:0}
.rlx .tp-need-h .t b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:#8a5a12}
.rlx .tp-need-h .t span{display:block;margin-top:1px;font-size:12px;color:var(--rl-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .tp-need-h .chev{flex:none;color:var(--rl-ink4);transition:transform .2s var(--rl-ease)}
.rlx .tp-need.is-open .tp-need-h .chev{transform:rotate(180deg)}
.rlx .tp-need-h:hover{background:rgba(217,119,6,.05)}
.rlx .tp-need-b{padding:0 13px 5px}
.rlx .tp-need-r{display:flex;align-items:flex-start;gap:11px;padding:11px 0;box-shadow:inset 0 1px 0 rgba(217,119,6,.18)}
.rlx .tp-need-r>.rl-ic{flex:none;margin-top:2px;color:var(--rl-danger)}
.rlx .tp-need-r.is-want>.rl-ic{color:var(--rl-warn)}
.rlx .tp-need-r>div{flex:1;min-width:0;font-size:12.5px;line-height:1.6;color:var(--rl-ink2)}
.rlx .tp-need-r b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--rl-ink);margin-bottom:2px}
.rlx .tp-need-r .rl-btn{flex:none;margin-top:2px;height:30px;font-size:12px!important}

/* ── the card ───────────────────────────────────────────────────────────
   A 3px rail says the status before you read anything, so the footer word is
   a confirmation rather than the only signal. */
.rlx .tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:16px}
.rlx .tp-c{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--rl-surface);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 26px -14px rgba(16,24,40,.2),0 0 0 1px rgba(16,24,40,.06);
  transition:box-shadow .16s var(--rl-ease),transform .16s var(--rl-ease)}
.rlx .tp-c:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(16,24,40,.05),0 18px 34px -16px rgba(16,24,40,.3),0 0 0 1px rgba(16,24,40,.09)}
.rlx .tp-c::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--rail,var(--rl-ink4))}
.rlx .tp-c.is-ok{--rail:linear-gradient(90deg,#0e9f6e,#34c38f)}
.rlx .tp-c.is-pend{--rail:linear-gradient(90deg,#d97706,#f0b429)}
.rlx .tp-c.is-bad{--rail:linear-gradient(90deg,#dc2626,#f0705c)}
.rlx .tp-c.is-draft{--rail:#cfd4df}
.rlx .tp-ch{display:flex;align-items:flex-start;gap:9px;padding:14px 12px 0 15px}
.rlx .tp-ch .t{flex:1;min-width:0}
.rlx .tp-ch b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em;color:var(--rl-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .tp-ch code{display:block;margin-top:1px;font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;color:var(--rl-ink4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Meta's own quality rating. It is the warning BEFORE a template is paused,
   and today the sync does not even ask for it. */
.rlx .tp-q{flex:none;width:9px;height:9px;margin-top:5px;border-radius:50%}
.rlx .tp-q.is-green{background:var(--rl-ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--rl-ok) 18%,transparent)}
.rlx .tp-q.is-yellow{background:var(--rl-warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--rl-warn) 20%,transparent)}
.rlx .tp-meta{display:flex;align-items:center;gap:8px;padding:9px 15px 11px;font-size:11px;color:var(--rl-ink3)}
.rlx .tp-meta .sp{flex:1}
.rlx .tp-used{display:inline-flex;align-items:center;gap:4px;color:var(--rl-ink3)}
.rlx .tp-tag{display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.01em}
.rlx .tp-tag.is-mkt{color:#b3401f;background:#fdeee7}
.rlx .tp-tag.is-utl{color:#2f5fa6;background:#eaf1fb}
.rlx .tp-tag.is-aut{color:#8a5a12;background:#fdf3e3}

/* The message, on its own paper — the one place the eye should land. */
/* The paper takes the slack, so every footer in a row sits on one line. */
.rlx .tp-wa{flex:1;padding:0 11px}
.rlx .tp-wa .wa-preview{height:100%;box-sizing:border-box}
.rlx .tp-c.is-draft .tp-wa{filter:saturate(.45) opacity(.82)}
.rlx .tp-cf{display:flex;align-items:center;gap:9px;flex:none;margin-top:12px;padding:11px 13px 13px;box-shadow:inset 0 1px 0 rgba(16,24,40,.07)}
.rlx .tp-cf .sp{flex:1}
.rlx .tp-st{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--rl-ink3)}
.rlx .tp-st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rl-ink4)}
.rlx .tp-c.is-ok .tp-st{color:#0a7a47}.rlx .tp-c.is-ok .tp-st::before{background:var(--rl-ok)}
.rlx .tp-c.is-pend .tp-st{color:#a25a12}.rlx .tp-c.is-pend .tp-st::before{background:var(--rl-warn)}
.rlx .tp-c.is-bad .tp-st{color:#c0341d}.rlx .tp-c.is-bad .tp-st::before{background:var(--rl-danger)}
.rlx .tp-tail{margin:20px 2px 0;font-size:11.5px;color:var(--rl-ink4)}

/* ── the builder ────────────────────────────────────────────────────────
   ONE sheet with internal rules, not five panels floating on grey — the same
   correction the inbox's person pane needed. */
.rlx .tp-bd{display:flex;flex-direction:column;gap:16px}
.rlx .tp-bh{display:flex;align-items:center;gap:12px}
.rlx .tp-bh .t{flex:1;min-width:0}
.rlx .tp-bh b{display:block;font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--rl-ink)}
.rlx .tp-bh span{display:block;font-size:12.5px;color:var(--rl-ink3);margin-top:1px}
.rlx .tp-cols{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:20px;align-items:start}
.rlx .tp-sheet{border-radius:18px;overflow:hidden;background:var(--rl-surface);
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 12px 30px -18px rgba(16,24,40,.22),0 0 0 1px rgba(16,24,40,.06)}
.rlx .tp-s{padding:18px 20px 20px;box-shadow:inset 0 1px 0 rgba(16,24,40,.07)}
.rlx .tp-s:first-child{box-shadow:none}
.rlx .tp-s>h4{display:flex;align-items:center;gap:8px;margin:0 0 13px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rl-ink4)}
.rlx .tp-s>h4 .sp{flex:1}
.rlx .tp-s>h4 em{font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--rl-ink4)}
.rlx .tp-s>h4 .lnk{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--rl-acc2)}
.rlx .tp-s>h4 .rl-seg{text-transform:none;letter-spacing:0}
.rlx .tp-row3{display:grid;grid-template-columns:1fr 200px;gap:12px;margin-bottom:14px}
.rlx .tp-hseg button{height:26px;padding:0 9px;font-size:11.5px}

/* The category is a decision with consequences, so it is three explained
   choices rather than a dropdown of three words. */
.rlx .tp-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.rlx .tp-cat{padding:11px 12px;border-radius:13px;text-align:left;background:var(--rl-surface2);
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.07);transition:.15s var(--rl-ease)}
.rlx .tp-cat b{display:block;font-size:13px;font-weight:700;color:var(--rl-ink);margin-bottom:3px}
.rlx .tp-cat span{display:block;font-size:11.5px;line-height:1.5;color:var(--rl-ink3)}
.rlx .tp-cat:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(16,24,40,.14),var(--rl-sh-sm)}
.rlx .tp-cat.is-on{background:linear-gradient(180deg,#fff6f3,#fff1ed);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--rl-acc) 45%,transparent),0 2px 10px -4px rgba(241,91,65,.35)}

/* The media slot: the library first, an upload second. */
.rlx .tp-slot{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;background:var(--rl-surface2);box-shadow:inset 0 0 0 1px rgba(16,24,40,.08)}
.rlx .tp-slot .th{position:relative;display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:11px;overflow:hidden;color:var(--rl-ink3);background:#fff;box-shadow:inset 0 0 0 1px rgba(16,24,40,.08)}
/* The sample file itself — Meta reviews the template with this exact one. */
.rlx .tp-slot .th img,.rlx .tp-slot .th video{display:block;width:100%;height:100%;object-fit:cover}
.rlx .tp-slot .th object{position:absolute;top:0;left:0;width:calc(100% + 17px);height:100%;border:0;background:#fff;pointer-events:none}
.rlx .tp-slot .th .rl-md-play{width:20px;height:20px}
.rlx .tp-slot .t{flex:1;min-width:0}
.rlx .tp-slot .t b{display:block;font-size:13px;font-weight:600;color:var(--rl-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .tp-slot .t span{display:block;font-size:11.5px;color:var(--rl-ink3);margin-top:1px}
.rlx .tp-slot.is-empty{flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 18px;background:none;
  box-shadow:inset 0 0 0 1.5px var(--rl-hair);border-radius:15px}
.rlx .tp-slot.is-empty>.rl-ic{color:var(--rl-ink4)}
.rlx .tp-slot.is-empty .t{font-size:12.5px;line-height:1.6;color:var(--rl-ink3);max-width:380px}
.rlx .tp-slot.is-empty .a{display:flex;gap:8px}

/* The message box, with its tools above it the way an editor is shaped. */
.rlx .tp-tools{display:flex;align-items:center;gap:4px;padding:6px;border-radius:11px 11px 0 0;background:var(--rl-surface2);box-shadow:inset 0 0 0 1px rgba(16,24,40,.07)}
.rlx .tp-tools button{height:26px;min-width:26px;padding:0 7px;border-radius:7px;font-size:12px;font-weight:600;color:var(--rl-ink2);transition:.12s}
.rlx .tp-tools button:hover{background:rgba(16,24,40,.07);color:var(--rl-ink)}
.rlx .tp-tools button.v{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;color:var(--rl-acc2)}
.rlx .tp-tools button.w{font-size:11.5px;font-weight:600}
.rlx .tp-tools .d{width:1px;height:16px;margin:0 3px;background:rgba(16,24,40,.12)}
.rlx .tp-tools .sp{flex:1}
.rlx .tp-tools .c{font-family:'DM Mono',ui-monospace,monospace;font-size:10.5px;color:var(--rl-ink4);padding-right:4px}
.rlx .tp-body{display:block;width:100%;min-height:124px;padding:12px 13px;border:0;outline:0;resize:vertical;font:inherit;font-size:13.5px;line-height:1.6;
  color:var(--rl-ink);background:#fff;border-radius:0 0 11px 11px;box-shadow:inset 0 0 0 1px rgba(16,24,40,.07)}
.rlx .tp-body:focus{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 45%,transparent),0 0 0 4px var(--rl-ring)}

/* A sample value per variable — built once and kept, which is the fix: today
   they are rebuilt on every keystroke of the body and whatever was typed is
   thrown away. */
.rlx .tp-vars{display:flex;flex-direction:column;gap:7px;margin-top:11px}
.rlx .tp-var{display:flex;align-items:center;gap:10px}
.rlx .tp-var code{flex:none;width:46px;font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;color:var(--rl-acc2)}
.rlx .tp-var .rl-ipt{flex:1}

/* Buttons, as the rows they are. */
.rlx .tp-btns{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.rlx .tp-btn{display:flex;align-items:center;gap:10px;padding:9px 10px 9px 11px;border-radius:11px;background:var(--rl-surface2);box-shadow:inset 0 0 0 1px rgba(16,24,40,.07)}
.rlx .tp-btn .k{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.rlx .tp-btn .k.is-url{color:#2f5fa6}.rlx .tp-btn .k.is-tel{color:#0a7a47}.rlx .tp-btn .k.is-qr{color:#6d3fc4}
.rlx .tp-btn b{font-size:13px;font-weight:600;color:var(--rl-ink)}
.rlx .tp-btn code{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;color:var(--rl-ink3)}
.rlx .tp-btn .tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rl-ok)}
.rlx .tp-btn .sp{flex:1}
.rlx .tp-addb{display:flex;gap:7px;flex-wrap:wrap}

/* ── the phone ──────────────────────────────────────────────────────────
   The preview is a DEVICE, because the question it answers is "what does this
   look like when it lands" — and a grey box beside a form does not answer it. */
.rlx .tp-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:12px}
.rlx .tp-phone{border-radius:26px;overflow:hidden;background:#11141b;padding:7px 7px 9px;
  box-shadow:0 2px 6px rgba(16,24,40,.2),0 26px 50px -22px rgba(16,24,40,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.rlx .tp-ph-top{display:grid;place-items:center;height:16px}
.rlx .tp-ph-top span{width:52px;height:5px;border-radius:99px;background:rgba(255,255,255,.18)}
.rlx .tp-ph-bar{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:16px 16px 0 0;color:#fff;background:#1f2a30}
.rlx .tp-ph-bar>.rl-ic{color:rgba(255,255,255,.7)}
.rlx .tp-ph-bar .av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:800;color:#0b141a;background:#25d366}
.rlx .tp-ph-bar b{display:block;font-size:13px;font-weight:600}
.rlx .tp-ph-bar i{display:block;font-style:normal;font-size:10.5px;color:rgba(255,255,255,.55)}
.rlx .tp-ph-body{padding:0;border-radius:0 0 16px 16px;overflow:hidden}
.rlx .tp-ph-body .wa-preview{border-radius:0;min-height:300px;padding:16px 12px}
.rlx .tp-verdict{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border-radius:14px;font-size:12.5px;line-height:1.6;color:var(--rl-ink2);
  background:var(--rl-surface);box-shadow:inset 0 0 0 1px rgba(16,24,40,.07),var(--rl-sh-xs)}
.rlx .tp-verdict b{color:var(--rl-ink)}
.rlx .tp-verdict>.rl-ic{flex:none;margin-top:1px}
.rlx .tp-verdict.is-ok>.rl-ic{color:var(--rl-ok)}

.rlx .tp-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:16px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 -1px 0 rgba(16,24,40,.07),0 -10px 28px -18px rgba(16,24,40,.4),0 0 0 1px rgba(16,24,40,.06)}
.rlx .tp-foot .sp{flex:1}
/* Phone only: the pinned bar carries what the side column carried — what is
   wrong, and a way to see the message. */
.rlx .tp-foot-v,.rlx .tp-foot-pv{display:none}
.rlx .tp-foot-v{align-items:center;gap:8px;min-width:0;font-size:12px;line-height:1.35;color:var(--rl-warn)}
.rlx .tp-foot-v.is-ok{color:var(--rl-ok)}
.rlx .tp-foot-v b{font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rlx .tp-foot-v>.rl-ic{flex:none}
.rlx .tp-pv{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.rlx .tp-pv .tp-phone{max-width:320px;width:100%;margin:0 auto}
.rlx .tp-foot-t{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--rl-ink3)}
.rlx .tp-foot-t .rl-ic{color:var(--rl-ink4)}

/* ── the two dialogs ────────────────────────────────────────────────────
   Drawn inline for the mockup; the build uses RlUI.open('modal'). */
/* fixed, not absolute: the page scrolls, and an overlay anchored to the
   PAGE centres itself somewhere below the fold with its own buttons off
   screen. The mockup's phone frame gets a transform so a fixed child still
   resolves inside the device. */
.rlx .tp-dlg-h{display:flex;align-items:center;gap:12px;padding:16px 16px 14px}
.rlx .tp-dlg-h h2{margin:0;font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--rl-ink)}
.rlx .tp-dlg-h p{margin:2px 0 0;font-size:12.5px;color:var(--rl-ink3)}
.rlx .tp-cmp-c{flex:1;padding:12px;border-radius:13px;background:var(--rl-surface2);box-shadow:inset 0 0 0 1px rgba(16,24,40,.07)}
.rlx .tp-cmp-c p{margin:7px 0 0;font-size:11.5px;line-height:1.55;color:var(--rl-ink3)}
.rlx .tp-cmp-c.is-want{background:linear-gradient(180deg,#fff6f3,#fff1ed);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 26%,transparent)}

/* ── narrower ───────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .rlx .tp-cols{grid-template-columns:minmax(0,1fr) 300px}
  .rlx .tp-cats{grid-template-columns:1fr}
}
@media (max-width:900px){
  .rlx .tp-cols{grid-template-columns:minmax(0,1fr)}
  .rlx .tp-side{position:static;flex-direction:row;align-items:flex-start;gap:14px}
  .rlx .tp-phone{flex:0 0 300px}
  .rlx .tp-verdict{flex:1}
}
/* A phone: one column, the tools wrap, the preview comes first in the builder
   because it is what the form is for. */
@media (max-width:760px){
  .rlx .tp-pg{padding:14px 12px 22px;border-radius:0}
  .rlx .tp-pg .rl-pg-hd{flex-wrap:wrap}
  .rlx .tp-pg .rl-pg-hd .acts{width:100%;margin-left:0}
  .rlx .tp-pg .rl-pg-hd .acts .rl-btn{flex:1;justify-content:center}
  .rlx .tp-need-r>div{flex:1 1 calc(100% - 28px)}
  .rlx .tp-grid{grid-template-columns:minmax(0,1fr);gap:13px}
  /* The status chips and the category picker share one line and scroll
     sideways together; the search takes the next. */
  .rlx .tp-bar{gap:8px;align-items:center}
  .rlx .tp-chips{flex:1 1 0;min-width:0;overflow-x:auto;scrollbar-width:none}
  /* A chip row that scrolls must not also wrap its own words. */
  .rlx .tp-chips>*{flex:none;white-space:nowrap}
  .rlx .tp-chips::-webkit-scrollbar{display:none}
  .rlx .tp-bar .sp{display:none}
  .rlx .tp-bar .rl-search{flex:1 1 100%;order:3}
  .rlx .tp-row3{grid-template-columns:1fr}
  .rlx .tp-need-r{flex-wrap:wrap}
  .rlx .tp-need-r .rl-btn{margin-left:28px}
  /* ── the builder on a phone ─────────────────────────────────────────────
     The form is the whole width, so the side column has nowhere to be: its
     two jobs move to the pinned bar, which sits above the app's tab bar.
     Before this, the phone preview was 184px wide and 1,500px down the page,
     and the verdict — the one line that says why Submit is disabled — was
     1,900px away from the Submit button. */
  .rlx .tp-bh{flex-wrap:wrap;row-gap:10px;align-items:flex-start}
  .rlx .tp-bh .t{flex:1 1 auto;min-width:0}
  .rlx .tp-bh .t span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rlx .tp-bh [data-act="ai"]{flex:1 1 100%;order:3;justify-content:center;height:40px;min-height:40px}
  .rlx .tp-side{display:none}
  /* Sticky at the bottom of the page, the same as on a desktop — the page
     itself now ends above the app's tab bar (rl-page.css), so there is
     nothing left to dodge. */
  .rlx .tp-foot{flex-wrap:wrap;gap:8px;border-radius:0;margin:0 -12px -16px;padding:10px 12px;
    box-shadow:0 -12px 26px -20px rgba(16,24,40,.55)}
  .rlx .tp-foot-t{display:none}
  .rlx .tp-foot-v{display:flex;order:-1;flex:1 1 100%}
  .rlx .tp-foot .sp{display:none}
  .rlx .tp-foot .rl-btn{flex:1 1 0;min-height:44px;justify-content:center}
  .rlx .tp-foot-pv{display:inline-flex}
}

/* ── inside the app ─────────────────────────────────────────
   The page scrolls inside the shell, the way every other rebuilt list does. */
.rlx.rl-page.tp-pg{padding:20px 24px 26px;overflow:auto}
/* The app's tab bar is fixed over the bottom 59px, so the page's own scroll
   has to end above it or the last card is unreachable. */
@media (max-width:760px){
  .rlx.rl-page.tp-pg{padding:14px 12px 16px}
  /* one gutter for the page, so the header is not inset twice */
  .rlx .tp-pg .rl-pg-hd{padding:0}
}

/* The old sheet styles a bare input/textarea with !important — background,
   border, radius and an inset shadow — so a field inside a shell we drew came
   out as a white box inside it. The message box is that field. */
.rlx .tp-body{background:#fff!important;border:0!important;border-radius:0 0 11px 11px!important;box-shadow:inset 0 0 0 1px rgba(16,24,40,.07)!important;min-height:124px!important;width:100%!important}
.rlx .tp-body:focus{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-acc) 45%,transparent),0 0 0 4px var(--rl-ring)!important}

/* A template card carries the real preview, and .wa-preview's own min-height
   is written for a full-size bubble. */
.rlx .tp-wa .wa-preview{min-height:0;padding:13px 12px 11px;border-radius:12px}
.rlx .tp-wa .wa-bubble{font-size:13px;line-height:18px}
.rlx .tp-wa .wa-media{height:70px}
.rlx .tp-wa .wa-btn{font-size:12.5px;padding:7px 8px}
.rlx .tp-ph-body .wa-preview{border-radius:0 0 16px 16px;min-height:300px;padding:16px 12px}

/* Skeletons and empties. */
.rlx .tp-sk{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:16px}
.rlx .tp-sk i{display:block;height:300px;border-radius:18px;background:linear-gradient(90deg,var(--rl-surface2),var(--rl-surface3),var(--rl-surface2));background-size:200% 100%;animation:tpSk 1.2s linear infinite}
@keyframes tpSk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.rlx .tp-sk i{animation:none}}
.rlx .tp-blank{padding:56px 20px;text-align:center}
.rlx .tp-blank .rl-tile{margin:0 auto 12px;--c:var(--rl-ink3)}
.rlx .tp-blank b{display:block;font-size:15px;font-weight:700;color:var(--rl-ink)}
.rlx .tp-blank p{margin:6px auto 14px;max-width:340px;font-size:13px;line-height:1.6;color:var(--rl-ink3)}

/* The used-by list, in the dialog that asks before an edit or a delete. */
.rlx .tp-use{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.rlx .tp-use-r{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;font-size:12.5px;background:var(--rl-surface2);box-shadow:inset 0 0 0 1px rgba(16,24,40,.06)}
.rlx .tp-use-r b{flex:1;min-width:0;font-weight:600;color:var(--rl-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .tp-use-r span{flex:none;font-size:11px;color:var(--rl-ink3)}
.rlx .tp-use-r .rl-ic{flex:none;color:var(--rl-ink4)}