/* ════════════════════════════════════════════════════════════════════
   DNA+ CONNECT · CONVERT REDESIGN LAYER
   Restyles the live Convert two-pane triage (.ct-*) to the design reference
   (design-reference/convert.css). Visual only — no convert-triage.js logic /
   data / id changes. Scoped under #page-convert-triage.
   (Two-pane is already the live default; ?ui=table is the legacy fallback.)
   ════════════════════════════════════════════════════════════════════ */

#page-convert-triage{max-width:1560px}

/* ── header ─────────────────────────────────────────────────────────── */
#page-convert-triage .ct-head{display:flex;align-items:center;gap:1.1rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--border);margin-bottom:.85rem}
#page-convert-triage .ct-head-titleblock{display:flex;align-items:center;gap:1.1rem}
#page-convert-triage .ct-head-icon{width:54px;height:54px;border-radius:var(--radius-lg);display:grid;place-items:center;
  background:var(--grad-gold-btn);border:1px solid transparent;box-shadow:0 3px 18px rgba(184,150,46,.3);flex:0 0 auto}
#page-convert-triage .ct-head-icon svg{width:26px;height:26px;stroke:#0a0a0a}
#page-convert-triage .ct-title{font-family:var(--sans);font-weight:700;font-size:1.7rem;letter-spacing:-.025em;color:var(--white)}
#page-convert-triage .ct-live{display:inline-flex;align-items:center;gap:.5rem;margin-left:auto;font-family:var(--mono);
  font-size:.62rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
#page-convert-triage .ct-live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green);animation:pulse 1.8s var(--ease) infinite}
#page-convert-triage .ct-btn-purge{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--border2);
  border-radius:var(--radius-sm);padding:.5rem .8rem;cursor:pointer;transition:all .15s}
#page-convert-triage .ct-btn-purge:hover{color:var(--gold-lt);border-color:var(--gold-dim);background:var(--gold-glow)}

/* ── KPI strip (seamed cells + colored top accent) ──────────────────── */
#page-convert-triage .ct-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:.85rem}
#page-convert-triage .ct-stat{background:var(--bg-soft);padding:1.15rem 1.3rem;position:relative}
#page-convert-triage .ct-stat-line{position:absolute;top:0;left:0;right:0;height:2px;opacity:.9}
#page-convert-triage .ct-stat[data-tone="red"] .ct-stat-line{background:linear-gradient(90deg,var(--red),transparent 78%)}
#page-convert-triage .ct-stat[data-tone="gold"] .ct-stat-line{background:linear-gradient(90deg,var(--gold),transparent 78%)}
#page-convert-triage .ct-stat[data-tone="neutral"] .ct-stat-line{background:linear-gradient(90deg,var(--gold-dim),transparent 78%)}
#page-convert-triage .ct-stat-value{font-family:var(--mono);font-size:1.7rem;font-weight:600;color:var(--gold-lt);line-height:1}
#page-convert-triage .ct-stat[data-tone="red"] .ct-stat-value{color:var(--red)}
#page-convert-triage .ct-stat[data-tone="neutral"] .ct-stat-value{color:var(--white)}
#page-convert-triage .ct-stat-label{font-weight:600;color:var(--white);margin-top:.6rem;font-size:.85rem}
#page-convert-triage .ct-stat-note{font-size:.72rem;color:var(--muted2);margin-top:.15rem}

/* ── filters ────────────────────────────────────────────────────────── */
#page-convert-triage .ct-filters{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:.7rem 1rem;margin-bottom:.85rem;display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem}
#page-convert-triage .ct-filter-group{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
#page-convert-triage .ct-filter-label{font-family:var(--mono);font-size:.58rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dim)}
#page-convert-triage .ct-chip{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--border2);
  color:var(--muted);font-size:.76rem;font-weight:500;padding:.3rem .7rem;border-radius:99px;transition:all .15s var(--ease);cursor:pointer}
#page-convert-triage .ct-chip:hover{color:var(--text);border-color:var(--gold-dim)}
#page-convert-triage .ct-chip.is-active{background:var(--gold-glow);border-color:var(--gold-dim);color:var(--gold-lt)}
#page-convert-triage .ct-chip.is-disabled{opacity:.4;cursor:not-allowed}
#page-convert-triage .ct-chip.is-disabled:hover{opacity:.55;color:var(--muted);border-color:var(--border2)}
#page-convert-triage .ct-chip-spanish{color:var(--green);border-color:color-mix(in srgb,var(--green) 42%,transparent);background:color-mix(in srgb,var(--green) 11%,transparent)}
#page-convert-triage .ct-chip-spanish.is-active{color:var(--green);border-color:var(--green)}
#page-convert-triage .ct-chip-count{font-family:var(--mono);font-size:.62rem;color:inherit;background:rgba(0,0,0,.25);
  border-radius:99px;min-width:16px;height:16px;padding:0 .3rem;display:inline-grid;place-items:center}
#page-convert-triage .ct-filter-sep{width:1px;height:18px;background:var(--border2);margin:0 .2rem}
#page-convert-triage select.ct-chip{background:var(--surface);border:1px solid var(--border2);color:var(--text);
  font-family:var(--sans);font-size:.78rem;padding:.34rem .7rem;border-radius:var(--radius)}

/* ── two-pane ───────────────────────────────────────────────────────── */
/* Content-height card with a capped, scrolling thread so the composer + action
   bar always sit directly under it (override styles.css fixed viewport heights). */
#page-convert-triage .ct-layout{display:grid;grid-template-columns:310px 1fr;gap:1.2rem;align-items:start;height:auto;min-height:0}
#page-convert-triage .ct-card{display:block;height:auto;max-height:none;min-height:0;overflow:visible}
#page-convert-triage .ct-card-body{display:block;padding:0}

/* worklist */
#page-convert-triage .ct-worklist{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;display:flex;flex-direction:column;min-height:0;position:sticky;top:calc(70px + var(--ta-h, 0px))}
#page-convert-triage .ct-wl-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--border);font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-dim)}
#page-convert-triage .ct-wl-head b{font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--gold-lt);background:var(--surface);
  border:1px solid var(--border2);border-radius:99px;min-width:22px;height:20px;padding:0 .4rem;display:grid;place-items:center}
#page-convert-triage #ct-wl-list{display:flex;flex-direction:column;max-height:calc(100vh - 280px);overflow-y:auto}
#page-convert-triage .ct-wl-empty{padding:1.2rem 1.1rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted2)}
#page-convert-triage .ct-wl-item{position:relative;border-bottom:1px solid var(--border);padding:.85rem 1.1rem .85rem 1.25rem;
  display:flex;flex-direction:column;gap:.5rem;transition:background .15s;cursor:pointer}
#page-convert-triage .ct-wl-item:last-child{border-bottom:0}
#page-convert-triage .ct-wl-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .15s}
#page-convert-triage .ct-wl-item:hover{background:var(--surface)}
#page-convert-triage .ct-wl-item.active{background:var(--surface2)}
#page-convert-triage .ct-wl-item.active::before{background:var(--grad-gold-btn);box-shadow:0 0 10px var(--gold-glow)}
#page-convert-triage .ct-wl-item .nm{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:.95rem;color:var(--white);letter-spacing:-.01em}
#page-convert-triage .ct-es-badge{font-family:var(--mono);font-size:.5rem;font-weight:600;letter-spacing:.1em;color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 48%,transparent);background:color-mix(in srgb,var(--green) 13%,transparent);
  border-radius:99px;padding:.06rem .36rem;line-height:1.5}
#page-convert-triage .ct-wl-ghl{margin-left:auto;display:inline-flex;align-items:center;gap:.25rem;font-family:var(--mono);
  font-size:.54rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt);border:1px solid var(--gold-dim);
  background:var(--gold-glow);border-radius:99px;padding:.12rem .45rem;text-decoration:none}
#page-convert-triage .ct-wl-item .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}
#page-convert-triage .ct-wl-loc,#page-convert-triage .ct-wl-due,#page-convert-triage .ct-wl-pill{font-family:var(--mono);font-size:.5rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--border2);border-radius:99px;padding:.1rem .4rem;line-height:1.5;color:var(--muted2)}
#page-convert-triage .ct-wl-due.warn{color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 42%,transparent)}
#page-convert-triage .ct-wl-due.over,#page-convert-triage .ct-wl-due.breach{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
#page-convert-triage .ct-wl-pill.claimed{color:var(--gold-lt);border-color:var(--gold-dim);background:var(--gold-glow)}
#page-convert-triage .ct-wl-pill.unread{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
#page-convert-triage .ct-wl-pill.handled{color:var(--green);border-color:color-mix(in srgb,var(--green) 38%,transparent)}

/* ── conversation card ──────────────────────────────────────────────── */
#page-convert-triage .ct-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.4rem 1.5rem 1.6rem}
#page-convert-triage .ct-card-empty{color:var(--muted2);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;padding:3rem 1rem}
#page-convert-triage .ct-card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
#page-convert-triage .ct-card-head .nm{font-weight:700;font-size:1.5rem;color:var(--white);letter-spacing:-.025em}
#page-convert-triage .ct-card-head .loc{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.3rem}
#page-convert-triage .ct-pod-source{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);
  border:1px solid var(--border2);border-radius:99px;padding:.18rem .55rem}
#page-convert-triage .ct-head-right{display:flex;align-items:center;gap:.5rem}

/* context strip — auto-fit, not a fixed count. The strip gained an
   "Interested in" cell, and a hardcoded column count silently breaks the next
   time one is added. Wraps to two rows in a narrow pane instead of squashing. */
#page-convert-triage .ct-ctx{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin:.8rem 0}
#page-convert-triage .ct-ctx > div{background:var(--bg-soft);padding:.55rem 1.1rem}
#page-convert-triage .ct-ctx .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}
#page-convert-triage .ct-ctx .v{font-weight:600;font-size:.95rem;color:var(--white);margin-top:.2rem;text-transform:capitalize}
#page-convert-triage .ct-ctx .v.warn{color:var(--yellow)}
#page-convert-triage .ct-ctx .v.over,#page-convert-triage .ct-ctx .v.breach{font-family:var(--mono);color:var(--red)}

/* thread */
#page-convert-triage .ct-thread{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem 1.1rem;
  flex:none;height:auto;min-height:120px;max-height:200px;resize:none;overflow-y:auto;display:flex;flex-direction:column;gap:.8rem;margin:.4rem 0 0}
#page-convert-triage .ct-thread-ph{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);padding:.5rem 0}
#page-convert-triage .ct-thread-ph.err{color:var(--red)}
#page-convert-triage .ct-msg{display:flex;flex-direction:column;gap:.3rem;max-width:82%}
#page-convert-triage .ct-msg.out{align-self:flex-end;align-items:flex-end}
#page-convert-triage .ct-msg.in{align-self:flex-start;align-items:flex-start}
#page-convert-triage .ct-msg-meta{font-family:var(--mono);font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}
#page-convert-triage .ct-msg-body{padding:.65rem .9rem;border-radius:var(--radius);font-size:.84rem;line-height:1.5}
#page-convert-triage .ct-msg.out .ct-msg-body{background:var(--gold-glow);border:1px solid color-mix(in srgb,var(--gold-dim) 75%,transparent);color:color-mix(in srgb,var(--gold-lt) 78%,var(--text))}
#page-convert-triage .ct-msg.in .ct-msg-body{background:var(--surface2);border:1px solid var(--border2);color:var(--text)}
#page-convert-triage .ct-msg-link{color:var(--gold-lt);text-decoration:underline}

/* composer */
#page-convert-triage .ct-compose{display:flex;gap:.7rem;align-items:stretch;margin-top:1.2rem}
#page-convert-triage .ct-msgbox{flex:1;background:var(--bg);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);
  font-family:var(--sans);font-size:.86rem;line-height:1.5;padding:.7rem .9rem;resize:none;min-height:54px;transition:border-color .15s,box-shadow .15s}
#page-convert-triage .ct-msgbox::placeholder{color:var(--muted2)}
#page-convert-triage .ct-msgbox:focus{outline:none;border-color:var(--gold-dim);box-shadow:0 0 0 3px var(--gold-glow)}

/* emoji picker — anchor is position:relative so the popover floats above the
   compose row without affecting its layout */
#page-convert-triage .ct-emoji-wrap{position:relative;display:flex;align-items:stretch}
#page-convert-triage .ct-emoji-btn{font-size:1rem;padding:0 .7rem}
#page-convert-triage .ct-emoji-pop{position:absolute;bottom:calc(100% + .4rem);left:0;z-index:30;
  display:grid;grid-template-columns:repeat(8,1fr);gap:.15rem;padding:.4rem;
  background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.45)}
#page-convert-triage .ct-emoji-pop[hidden]{display:none}
#page-convert-triage .ct-emoji{font-size:1.05rem;line-height:1;width:28px;height:28px;padding:0;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:var(--radius-sm)}
#page-convert-triage .ct-emoji:hover{background:var(--bg);border-color:var(--gold-dim)}
#page-convert-triage .ct-emoji:focus-visible{outline:2px solid var(--gold-dim);outline-offset:1px}

/* action bar */
#page-convert-triage .ct-actionbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.1rem}
#page-convert-triage .ct-abtn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;height:34px;line-height:1;
  font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:0 .8rem;
  border-radius:var(--radius-sm);border:1px solid var(--border2);background:var(--surface2);color:var(--muted);transition:all .15s;cursor:pointer}
#page-convert-triage .ct-abtn:hover{color:var(--text);border-color:var(--gold-dim)}
#page-convert-triage .ct-abtn svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor}
#page-convert-triage .ct-abtn.gold{background:var(--grad-gold-btn);border-color:transparent;color:#0a0a0a;box-shadow:0 1px 8px rgba(184,150,46,.22)}
#page-convert-triage .ct-abtn.gold:hover{filter:brightness(1.06);color:#0a0a0a}
#page-convert-triage .ct-abtn.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 50%,transparent);background:transparent}
#page-convert-triage .ct-abtn.ok:hover{background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green)}
#page-convert-triage .ct-abtn.warn{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent);background:transparent}
#page-convert-triage .ct-abtn.warn:hover{background:color-mix(in srgb,var(--red) 12%,transparent);border-color:var(--red);color:var(--red)}
#page-convert-triage .ct-abtn.es{color:var(--green);border-color:color-mix(in srgb,var(--green) 42%,transparent);background:transparent}
#page-convert-triage .ct-abtn.es:hover{background:color-mix(in srgb,var(--green) 13%,transparent)}
#page-convert-triage .ct-abtn.actions{color:var(--gold-lt);border-color:var(--gold-dim);background:var(--gold-glow)}
/* "Send SMS" (gold) pushed to the right of the compose box is handled by flex;
   in the action bar, keep "View in GHL" gold prominent on the left via order */

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:1000px){#page-convert-triage .ct-layout{grid-template-columns:1fr}#page-convert-triage .ct-worklist{position:static}
  #page-convert-triage #ct-wl-list{max-height:340px}}
@media(max-width:620px){#page-convert-triage .ct-ctx{grid-template-columns:1fr}#page-convert-triage .ct-compose{flex-direction:column}}