/* ==========================================================================
   Student Support Hub — design tokens from lawsikho.com
   Mulish type, #FAFAFA canvas, white cards, red CTAs, pill buttons.
   ========================================================================== */
:root{
  --bg:#FAFAFA; --panel:#FFFFFF; --panel-2:#F4F5F7;
  --ink:#111827; --ink-2:#374151; --muted:#6B7280; --faint:#9CA3AF;
  --line:#E5E7EB; --line-2:#D1D5DB;
  --red:#E02B2B; --red-dark:#B91C1C; --coral:#FF4E50; --red-soft:#FEF2F2; --red-ring:rgba(224,43,43,.14);
  --blue:#2563EB; --blue-soft:#EFF6FF;
  --green:#0F9D58; --green-soft:#ECFDF5; --amber:#B45309; --amber-soft:#FFFBEB;
  --font:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow-sm:0 1px 2px rgba(17,24,39,.06),0 1px 3px rgba(17,24,39,.04);
  --shadow:0 4px 12px rgba(17,24,39,.07),0 1px 3px rgba(17,24,39,.05);
  --shadow-lg:0 12px 32px rgba(17,24,39,.12),0 2px 8px rgba(17,24,39,.06);
  --radius:14px; --radius-sm:10px;
  --ease:cubic-bezier(.16,.84,.44,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--red-ring);outline-offset:2px;border-radius:6px}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:760px}
.wrap.wide{max-width:1280px}
.hidden{display:none !important}

/* ---------------- top nav ---------------- */
.topnav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topnav .inner{max-width:1060px;margin:0 auto;padding:0 20px;height:64px;display:flex;align-items:center;gap:14px}
.topnav.wide .inner{max-width:1280px}
.brandmark{display:flex;align-items:center;gap:10px;flex:none}
.brandmark img{height:26px;width:auto;display:block}
.brandmark .wordmark{font:800 19px var(--font);color:var(--ink);letter-spacing:-.02em}
.brandmark .sep{width:1px;height:20px;background:var(--line-2)}
.brandmark .kicker{font:700 12.5px var(--font);color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.navlinks{margin-left:auto;display:flex;align-items:center;gap:6px}
.navlinks a{font:600 14.5px var(--font);color:var(--ink-2);padding:8px 14px;border-radius:999px;transition:background .16s,color .16s}
.navlinks a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.navlinks a.primary{background:var(--red);color:#fff}
.navlinks a.primary:hover{background:var(--red-dark)}
.brandtoggle{display:inline-flex;background:var(--panel-2);border-radius:999px;padding:3px;gap:2px}
.brandtoggle button{border:0;background:transparent;padding:6px 13px;border-radius:999px;font:700 13px var(--font);color:var(--muted);cursor:pointer;transition:all .18s var(--ease)}
.brandtoggle button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
@media (max-width:720px){
  .topnav .inner{height:auto;padding:12px 16px;flex-wrap:wrap;gap:10px}
  .navlinks{margin-left:auto;gap:4px}
  .navlinks a{padding:7px 11px;font-size:13.5px}
  .brandmark .kicker,.brandmark .sep{display:none}
}

/* ---------------- hero ---------------- */
.hero{padding:56px 0 30px;text-align:center}
.hero .wave{display:inline-block;font-size:36px;animation:wave 2.4s ease-in-out 1s 2}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%,30%{transform:rotate(14deg)}20%,40%{transform:rotate(-8deg)}}
.hero h1{font:800 clamp(28px,4.6vw,42px)/1.15 var(--font);letter-spacing:-.025em;margin:6px 0 12px}
.hero p.lede{font-size:17px;color:var(--muted);max-width:56ch;margin:0 auto}
@media (max-width:720px){.hero{padding:36px 0 22px}.hero p.lede{font-size:15.5px}}

/* ---------------- search ---------------- */
.searchwrap{position:relative;max-width:620px;margin:26px auto 0}
.searchfield{position:relative;display:flex;align-items:center;background:#fff;border:2px solid var(--line);border-radius:999px;box-shadow:var(--shadow);transition:border-color .18s,box-shadow .18s}
.searchfield:focus-within{border-color:var(--red);box-shadow:0 0 0 4px var(--red-ring),var(--shadow)}
.searchfield svg{position:absolute;left:20px;width:20px;height:20px;stroke:var(--faint);pointer-events:none}
.searchfield input{flex:1;border:0;outline:0;background:transparent;padding:17px 20px 17px 52px;font:500 16.5px var(--font);color:var(--ink);border-radius:999px;min-width:0}
.searchfield input::placeholder{color:var(--faint);font-weight:400}
.searchfield .clear{border:0;background:transparent;color:var(--faint);font-size:20px;cursor:pointer;padding:0 18px 0 6px;line-height:1}
.searchfield .clear:hover{color:var(--ink)}
.searchhint{text-align:center;font-size:13.5px;color:var(--faint);margin-top:10px}
.searchhint kbd{background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font:600 12px var(--font);color:var(--muted)}

/* results dropdown */
.results{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;z-index:30;text-align:left;animation:pop .18s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.results .rhead{padding:10px 18px;font:700 11.5px var(--font);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);background:var(--panel-2);border-bottom:1px solid var(--line)}
.results .ritem{display:block;width:100%;text-align:left;border:0;background:transparent;padding:13px 18px;cursor:pointer;border-bottom:1px solid var(--line);transition:background .12s}
.results .ritem:last-child{border-bottom:0}
.results .ritem:hover,.results .ritem.active{background:var(--red-soft)}
.results .ritem .q{font:700 15px var(--font);color:var(--ink);display:block;margin-bottom:3px}
.results .ritem .meta{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.results .ritem .chip{background:var(--panel-2);border-radius:999px;padding:2px 9px;font:600 11.5px var(--font);color:var(--ink-2);white-space:nowrap}
.results mark{background:#FEF3C7;color:inherit;border-radius:3px;padding:0 2px}
.results .empty{padding:26px 20px;text-align:center}
.results .empty p{color:var(--muted);font-size:14.5px;margin-bottom:14px}

/* ---------------- sections ---------------- */
.section{padding:34px 0}
.section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.section-head h2{font:800 22px var(--font);letter-spacing:-.02em}
.section-head .note{font-size:14px;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font:700 12px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:8px}

/* trending */
.trending{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.trend-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;text-align:left;width:100%;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s;box-shadow:var(--shadow-sm)}
.trend-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-2);border-left-color:var(--red)}
.trend-card .rank{font:800 13px var(--font);color:var(--red);background:var(--red-soft);border-radius:999px;width:26px;height:26px;display:grid;place-items:center;flex:none}
.trend-card .q{font:700 14.5px/1.35 var(--font);color:var(--ink)}
.trend-card .instant{margin-left:auto}
.trend-card .arrow{margin-left:8px;color:var(--faint);flex:none;transition:transform .18s var(--ease),color .18s}
.trend-card .q{margin-right:auto}
.trend-card:hover .arrow{transform:translateX(3px);color:var(--red)}

/* topic cards */
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.topic-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;cursor:pointer;text-align:left;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px}
.topic-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:transparent}
.topic-card .ico{width:40px;height:40px;border-radius:11px;background:var(--red-soft);display:grid;place-items:center;margin-bottom:4px;transition:background .2s}
.topic-card:hover .ico{background:var(--red);}
.topic-card .ico svg{width:20px;height:20px;stroke:var(--red);transition:stroke .2s}
.topic-card:hover .ico svg{stroke:#fff}
.topic-card h3{font:800 16.5px var(--font);color:var(--ink);letter-spacing:-.01em}
.topic-card p{font-size:14px;color:var(--muted);line-height:1.5;flex:1}
.topic-card .count{font:700 12.5px var(--font);color:var(--faint)}

/* still stuck banner */
.stuck{display:flex;align-items:center;gap:18px;background:linear-gradient(135deg,#fff 0%,var(--red-soft) 100%);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:10px 0 50px;flex-wrap:wrap}
.stuck .txt{flex:1;min-width:220px}
.stuck h3{font:800 18px var(--font);margin-bottom:3px}
.stuck p{font-size:14.5px;color:var(--muted)}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:12px 24px;font:700 15px var(--font);cursor:pointer;transition:transform .14s var(--ease),background .16s,box-shadow .16s;white-space:nowrap;text-decoration:none}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 2px 8px rgba(224,43,43,.24)}
.btn-primary:hover{background:var(--red-dark);box-shadow:0 4px 14px rgba(224,43,43,.3)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--panel-2)}
.btn-quiet{background:var(--panel-2);color:var(--ink-2)}
.btn-quiet:hover{background:var(--line)}
.btn-sm{padding:8px 16px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------------- breadcrumb ---------------- */
.crumb{display:flex;align-items:center;gap:8px;padding:22px 0 6px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.crumb a{color:var(--muted);font-weight:600}
.crumb a:hover{color:var(--red)}
.crumb .sep{color:var(--faint)}
.crumb .now{color:var(--ink);font-weight:700}

/* ---------------- articles / accordion ---------------- */
.page-title{font:800 clamp(24px,3.4vw,32px)/1.2 var(--font);letter-spacing:-.025em;margin:6px 0 8px}
.page-sub{color:var(--muted);font-size:15.5px;margin-bottom:24px;max-width:62ch}
.qlist{display:flex;flex-direction:column;gap:10px;margin-bottom:40px}
details.qa{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow .18s,border-color .18s}
details.qa[open]{box-shadow:var(--shadow);border-color:var(--line-2)}
details.qa summary{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;list-style:none;font:700 15.5px/1.4 var(--font);color:var(--ink)}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary:hover{background:#FCFCFD}
details.qa summary .chev{margin-left:auto;flex:none;color:var(--faint);transition:transform .22s var(--ease)}
details.qa[open] summary .chev{transform:rotate(180deg);color:var(--red)}
details.qa summary .num{font:700 12px var(--font);color:var(--red);background:var(--red-soft);border-radius:6px;padding:3px 8px;flex:none}
.qa .answer{padding:4px 20px 20px;border-top:1px solid var(--line);animation:slidein .22s var(--ease)}
@keyframes slidein{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.qa .answer p{margin:12px 0;color:var(--ink-2)}
.qa .answer ol,.qa .answer ul{margin:10px 0 12px 22px;color:var(--ink-2)}
.qa .answer li{margin:6px 0}
.qa .answer b{color:var(--ink)}
.qa .answer .note{font-size:14px;color:var(--ink-2);background:var(--amber-soft);border-left:3px solid #F59E0B;border-radius:8px;padding:11px 14px;margin:14px 0}
.helpful{display:flex;gap:10px;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font:600 14px var(--font);color:var(--muted);flex-wrap:wrap}
.helpful .thanks{color:var(--green);font-weight:700}

/* ---------------- inline tools ---------------- */
.instant{font:700 10.5px var(--font);letter-spacing:.04em;color:var(--green);background:var(--green-soft);border:1px solid #A7F3D0;border-radius:999px;padding:3px 9px;flex:none;margin-left:auto;white-space:nowrap}
details.qa[open] summary .instant{background:var(--green);color:#fff;border-color:var(--green)}
summary .chev{margin-left:8px}
details.qa summary .instant + .chev{margin-left:8px}
.tool{background:linear-gradient(160deg,#F6FBF8 0%,#FFFFFF 60%);border:1.5px solid #BBE8D2;border-radius:var(--radius);padding:20px;margin:18px 0 6px}
.tool-head{margin-bottom:14px}
.tool-tag{display:inline-block;font:700 10.5px var(--font);letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--green);border-radius:999px;padding:4px 11px;margin-bottom:9px}
.tool-head h4{font:800 17px var(--font);letter-spacing:-.015em;margin-bottom:4px;color:var(--ink)}
.tool-head p{font-size:14px;color:var(--muted);line-height:1.5}
.tool-form{display:grid;gap:2px}
.tool .field{margin:10px 0}
.tool .field label{font-size:13.5px}
.tool .field input,.tool .field select,.tool .field textarea{font-size:15px;padding:10px 13px;background:#fff}
.tool .field textarea{min-height:74px}
.tool .field.checkline{display:flex;align-items:center;gap:9px;margin:14px 0 6px}
.tool .field.checkline input{width:18px;height:18px;accent-color:var(--green);flex:none;padding:0}
.tool .field.checkline label{margin:0;font-size:14.5px;font-weight:700;cursor:pointer}
.tool .gst-fields{border-left:2px solid #BBE8D2;padding-left:14px;margin:4px 0 0}
.tool .actions{margin-top:14px}
.demo-hint{font:600 12.5px var(--font);color:#7A6A33;background:var(--amber-soft);border:1px dashed #F0CE7E;border-radius:8px;padding:8px 12px;margin-top:12px}
.tool-result{margin-top:18px;border-radius:var(--radius-sm);padding:18px;border:1.5px solid var(--line);background:#fff;animation:pop .22s var(--ease)}
.tool-result.good{border-color:var(--green);background:var(--green-soft)}
.tool-result.bad{border-color:var(--red);background:var(--red-soft)}
.tool-result.review{border-color:#F59E0B;background:var(--amber-soft)}
.tool-result h4{font:800 16.5px var(--font);margin-bottom:12px;letter-spacing:-.01em}
.tool-result .kv{margin:12px 0}
.tool-result .next{font-size:14.5px;color:var(--ink-2);margin-top:12px;line-height:1.55}
.tool-result .refline{margin-top:12px;font-size:14px;color:var(--ink-2);background:#fff;border-radius:8px;padding:9px 13px;display:inline-block}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.checklist li{display:flex;gap:11px;align-items:flex-start}
.checklist .mark{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font:800 12px var(--font);color:#fff;flex:none;margin-top:1px}
.checklist li.pass .mark{background:var(--green)}
.checklist li.fail .mark{background:var(--red)}
.checklist li.unknown .mark{background:var(--amber)}
.checklist .ck-label{font:700 14.5px var(--font);color:var(--ink)}
.checklist .ck-detail{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.helpful .quiet-note{font-size:13px;color:var(--muted);font-weight:500;flex-basis:100%}
.helpful .thanks.noted{color:var(--ink-2)}
/* result row list (recordings) */
.itemlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.itemlist .item{display:flex;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px}
.itemlist .item.ok{border-left:3px solid var(--green)}
.itemlist .item.pending{border-left:3px solid #F59E0B}
.item-main{flex:1;min-width:0}
.item-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.item-label{font:700 14.5px var(--font);color:var(--ink)}
.item-pill{font:700 10px var(--font);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 8px}
.item-pill.ok{background:var(--green-soft);color:var(--green)}
.item-pill.pending{background:var(--amber-soft);color:var(--amber)}
.item-meta{font:600 12.5px var(--font);color:var(--faint);margin-top:1px}
.item-detail{font-size:13.5px;color:var(--ink-2);margin-top:3px}
/* self-serve steps box */
.steps-box{margin-top:14px;border:1px dashed var(--line-2);border-radius:var(--radius-sm);background:#fff}
.steps-box summary{cursor:pointer;padding:11px 14px;font:700 13.5px var(--font);color:var(--ink-2);list-style:none}
.steps-box summary::-webkit-details-marker{display:none}
.steps-box summary::before{content:'▸ ';color:var(--muted)}
.steps-box[open] summary::before{content:'▾ '}
.steps-box .steps{margin:0;padding:2px 18px 14px 34px}
.steps-box .steps li{margin:6px 0;font-size:14px;color:var(--ink-2)}

/* ---------------- cards & forms ---------------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);margin-bottom:20px}
.card h3{font:800 19px var(--font);letter-spacing:-.015em;margin-bottom:4px}
.card p.lead{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.field{margin:16px 0}
.field label{display:block;font:700 13.5px var(--font);color:var(--ink);margin-bottom:6px}
.field .help{font-size:13px;color:var(--muted);margin:-2px 0 7px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;font:400 15.5px var(--font);border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);transition:border-color .16s,box-shadow .16s}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px var(--red-ring)}
.field textarea{min-height:110px;resize:vertical}
.field .req{color:var(--red)}
.actions{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.actions .hint{font-size:13.5px;color:var(--muted)}
.preview{background:var(--green-soft);border:1px dashed #6EE7B7;border-radius:var(--radius-sm);padding:13px 16px;margin-top:10px;font-size:15px;color:var(--ink-2);animation:pop .2s var(--ease)}
.preview b{font-weight:800;color:var(--ink)}
.err{color:var(--red);font:600 14px var(--font);display:none;margin-top:12px}
.err.show{display:block}
.note-ok{background:var(--green-soft);border-left:3px solid var(--green);border-radius:8px;padding:13px 16px;font-size:14.5px;color:var(--ink-2);margin:16px 0}
.note-warn{background:var(--amber-soft);border-left:3px solid #F59E0B;border-radius:8px;padding:13px 16px;font-size:14.5px;color:var(--ink-2);margin:16px 0}
.note-info{background:var(--blue-soft);border-left:3px solid var(--blue);border-radius:8px;padding:13px 16px;font-size:14.5px;color:var(--ink-2);margin:16px 0}

/* automation review progress */
.automation-progress-list{display:grid;gap:14px;margin:16px 0 22px}
.automation-progress-card{border:1px solid #cfd9ff;border-radius:14px;padding:18px 20px;background:linear-gradient(135deg,#f8faff 0%,#f3f6ff 100%);box-shadow:0 4px 18px rgba(62,82,150,.08)}
.automation-progress-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.automation-progress-head>div:first-child{min-width:0;flex:1 1 auto}
.automation-progress-stop{flex:none;align-self:center}
.automation-progress-eyebrow{color:#4f46e5;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.automation-progress-head h2{margin:3px 0 0;color:var(--ink);font:800 17px/1.35 var(--font);letter-spacing:-.01em;overflow-wrap:anywhere}
.automation-progress-elapsed{flex:none;border:1px solid #d7def8;border-radius:999px;padding:5px 10px;background:#fff;color:#4f5d78;font-size:12px;font-weight:700;white-space:nowrap}
.automation-progress-message{margin:13px 0 9px;color:var(--ink-2);font-size:14px}
.automation-progress-track{position:relative;height:7px;overflow:hidden;border-radius:999px;background:#dfe5f8}
.automation-progress-track span{position:absolute;inset-block:0;left:-36%;width:36%;border-radius:inherit;background:linear-gradient(90deg,#818cf8,#4f46e5,#818cf8);animation:automation-progress-slide 1.6s ease-in-out infinite}
@keyframes automation-progress-slide{to{left:100%}}
.timeline.automation-timeline{display:grid;grid-template-columns:repeat(5,minmax(100px,1fr));gap:0;margin:18px 0 0}
.timeline.automation-timeline li{min-width:0;padding:31px 12px 0 0}
.timeline.automation-timeline li::before{left:21px;right:0;top:10px;bottom:auto;width:auto;height:2px}
.timeline.automation-timeline li:last-child::before{display:none}
.timeline.automation-timeline .dot{left:0;top:0}
.timeline.automation-timeline .tl-title{font-size:12px;line-height:1.35}
.timeline.automation-timeline li.current .tl-title{color:#4f46e5}
.timeline.automation-timeline li.current .dot{border-color:#4f46e5;animation:automation-step-pulse 2s infinite}
@keyframes automation-step-pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,.2)}50%{box-shadow:0 0 0 7px transparent}}
.automation-progress-note{margin:13px 0 0;color:var(--muted);font-size:12.5px}

/* ---------------- status hero (tracking) ---------------- */
.status-hero{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;text-align:center;box-shadow:var(--shadow);margin-bottom:22px}
.status-hero .icon{font-size:40px;line-height:1;margin-bottom:10px;display:block}
.status-hero h1{font:800 clamp(22px,3.2vw,29px)/1.2 var(--font);letter-spacing:-.02em;margin-bottom:8px}
.status-hero p{color:var(--muted);font-size:15.5px;max-width:52ch;margin:0 auto}
.status-hero .cta{margin-top:20px}

/* timeline */
.timeline{list-style:none;margin:8px 0 0;padding:0}
.timeline li{position:relative;padding:0 0 26px 36px}
.timeline li::before{content:'';position:absolute;left:10px;top:24px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline li.done::before{background:var(--green)}
.timeline .dot{position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:#fff;display:grid;place-items:center}
.timeline li.done .dot{background:var(--green);border-color:var(--green)}
.timeline li.done .dot::after{content:'✓';color:#fff;font:800 12px var(--font)}
.timeline li.current .dot{border-color:var(--red);border-width:6px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--red-ring)}50%{box-shadow:0 0 0 7px transparent}}
.timeline li.rejected .dot{background:var(--red);border-color:var(--red)}
.timeline li.rejected .dot::after{content:'!';color:#fff;font:800 12px var(--font)}
.timeline .tl-title{font:700 15.5px var(--font);color:var(--ink)}
.timeline li.pending .tl-title{color:var(--faint);font-weight:600}
.timeline li.current .tl-title{color:var(--red)}
.timeline .tl-time{font-size:13px;color:var(--muted);margin-top:1px}
.timeline .tl-detail{font-size:13.5px;color:var(--muted);margin-top:2px}
.timeline li.rejected .tl-title,.timeline li.rejected .tl-detail{color:var(--red)}

/* key-value list */
.kv{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.kv .row{display:flex;gap:14px;background:#fff;padding:11px 16px;font-size:14.5px;flex-wrap:wrap}
.kv dt{font:700 13px var(--font);color:var(--muted);width:150px;flex:none}
.kv dd{margin:0;color:var(--ink);word-break:break-word}

/* ---------------- pills / badges ---------------- */
.pill{display:inline-block;font:700 11.5px var(--font);letter-spacing:.03em;border-radius:999px;padding:4px 11px;text-transform:uppercase}
.pill.received{background:var(--amber-soft);color:var(--amber)}
.pill.verified{background:var(--blue-soft);color:var(--blue)}
.pill.in_progress{background:#EEF2FF;color:#4F46E5}
.pill.ready{background:var(--green);color:#fff}
.pill.closed{background:var(--panel-2);color:var(--muted)}
.pill.rejected{background:var(--red-soft);color:var(--red)}
.badge{display:inline-block;font:700 11px var(--font);border-radius:6px;padding:3px 8px}
.badge.match{background:var(--green-soft);color:var(--green)}
.badge.nomatch{background:var(--amber-soft);color:var(--amber)}

/* ---------------- toast ---------------- */
.toast-host{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:#fff;border-radius:999px;padding:12px 22px;font:600 14.5px var(--font);box-shadow:var(--shadow-lg);animation:toastin .24s var(--ease);max-width:90vw}
.toast.bad{background:var(--red)}
.toast.good{background:var(--green)}
@keyframes toastin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------------- admin ---------------- */
.adminbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
/* Eleven sections plus the help-centre link is more than a fixed-height row can
   hold. The bar used to be `height:62px` with `flex-wrap:wrap`, so once the nav
   needed a second line it kept wrapping but the box did not grow — the links
   spilled past the bottom border and sat on top of the page. Growing with its
   contents is what keeps the spacing right at every width. */
.adminbar .inner{max-width:1280px;margin:0 auto;padding:9px 20px;min-height:62px;display:flex;align-items:center;align-content:center;gap:8px 14px;flex-wrap:wrap}
.adminbar .title{font:800 17px var(--font);letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.adminbar .title .tag{font:700 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:5px;padding:3px 7px}
/* Tight enough that the whole set still fits beside the title on a 1280 screen,
   which is where these pages are actually used. */
.adminbar nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.adminbar nav a{font:700 13.5px var(--font);color:var(--ink-2);padding:7px 10px;border-radius:999px;white-space:nowrap;transition:background .16s,color .16s}
.adminbar nav a:hover{background:var(--panel-2);text-decoration:none}
.adminbar nav a.on{background:var(--ink);color:#fff}
.adminbar .title{color:inherit}
.adminbar .title:hover{text-decoration:none}
/* Counts beside a section that has something waiting, so an operator does not
   have to open every page to find out whether anything needs them. */
.nav-badge{display:inline-block;min-width:16px;margin-left:5px;padding:1px 4px;border-radius:999px;background:var(--panel-2);color:var(--ink-2);font:800 11px var(--font);text-align:center;vertical-align:middle}
.adminbar nav a.on .nav-badge{background:rgba(255,255,255,.24);color:#fff}
.nav-badge.urgent{background:var(--red-soft,#fdeceb);color:var(--red,#E02B2B)}
.adminbar nav a.on .nav-badge.urgent{background:#fff;color:var(--red,#E02B2B)}
/* On a phone the sections would otherwise stack four deep and the sticky bar
   would take a third of the screen. One swipeable row costs no height. */
@media (max-width:720px){
  .adminbar .inner{padding:10px 14px;gap:8px 10px}
  .adminbar nav{width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .adminbar nav::-webkit-scrollbar{display:none}
  .adminbar nav a{flex:none}
}

/* Admin dashboard */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:20px 0 8px}
.dash-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
a.dash-card:hover{border-color:var(--ink-3,#9aa0a6);text-decoration:none}
.dash-card .n{display:block;font:800 30px var(--font);letter-spacing:-.02em;line-height:1.1}
.dash-card .k{display:block;margin-top:4px;font:700 12.5px var(--font);color:var(--muted)}
.dash-card .sub{display:block;margin-top:6px;font:500 12px var(--font);color:var(--muted)}
.dash-card.attention{border-left:3px solid var(--red,#E02B2B)}
.dash-card.attention .n{color:var(--red,#E02B2B)}
.dash-card.calm .n{color:#1F4A3C}

/* Simple inline trend bars — no chart library, no external request. */
.spark{display:flex;align-items:flex-end;gap:2px;height:34px;margin-top:10px}
.spark i{flex:1;background:var(--panel-2);border-radius:2px 2px 0 0;min-height:2px}
.spark i.hot{background:var(--red,#E02B2B);opacity:.75}

.pager{display:flex;align-items:center;gap:9px;margin:14px 0 4px;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.pager-label{margin-right:auto;font-weight:700}

.tabs{display:flex;gap:6px;margin:18px 0 14px;flex-wrap:wrap}
.tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:700 13px var(--font);color:var(--ink-2);cursor:pointer}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}

.detail-row{background:var(--panel-2)}
.detail-row td{padding:14px 16px}
.detail-row pre{margin:0;white-space:pre-wrap;word-break:break-word;font:500 12.5px ui-monospace,Menlo,monospace;color:var(--ink-2)}
.transcript{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.transcript .turn{padding:11px 14px;border-radius:12px;max-width:82%;font-size:14px;line-height:1.55}
.transcript .turn.user{align-self:flex-end;background:var(--ink);color:#fff;border-radius:14px 14px 4px 14px}
.transcript .turn.assistant{align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px}
.transcript .who{display:block;font:700 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;opacity:.65;margin-bottom:4px}
table.grid{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:14.5px;box-shadow:var(--shadow-sm)}
table.grid th{font:700 11.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap}
table.grid td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.grid tr:last-child td{border-bottom:0}
table.grid tr.clickable{cursor:pointer;transition:background .12s}
table.grid tr.clickable:hover{background:var(--red-soft)}
.tablewrap{overflow-x:auto;border-radius:var(--radius)}
.age-ok{font:600 13.5px var(--font);color:var(--muted);white-space:nowrap}
.age-red{font:700 13px var(--font);color:#fff;background:var(--red);border-radius:999px;padding:4px 10px;white-space:nowrap}
.filters{display:flex;gap:10px;margin:20px 0;flex-wrap:wrap;align-items:center}
.filters select{padding:9px 14px;font:600 14px var(--font);border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.filters select:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px var(--red-ring)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:#fff;border-left:1px solid var(--line);box-shadow:-16px 0 48px rgba(17,24,39,.14);transform:translateX(105%);transition:transform .26s var(--ease);overflow-y:auto;z-index:60;padding:26px}
.drawer.open{transform:none}
.drawer .close{position:absolute;top:20px;right:22px;border:0;background:var(--panel-2);width:32px;height:32px;border-radius:50%;font-size:19px;line-height:1;cursor:pointer;color:var(--muted);transition:background .16s}
.drawer .close:hover{background:var(--line);color:var(--ink)}
.drawer h3{font:800 21px var(--font);letter-spacing:-.02em;margin-bottom:10px}
.scrim{position:fixed;inset:0;background:rgba(17,24,39,.32);opacity:0;pointer-events:none;transition:opacity .24s;z-index:55}
.scrim.on{opacity:1;pointer-events:auto}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:20px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm)}
.stat .n{font:800 32px var(--font);color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.stat .lbl{font:700 12px var(--font);color:var(--muted);margin-top:5px}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--line-2);border-radius:999px;cursor:pointer;transition:background .2s}
.switch .slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s var(--ease);box-shadow:var(--shadow-sm)}
.switch input:checked + .slider{background:var(--red)}
.switch input:checked + .slider::before{transform:translateX(18px)}
.ordinput{width:62px;padding:6px 10px;font:600 14px var(--font);border:1.5px solid var(--line);border-radius:8px;text-align:center}

/* ---------------- footer / misc ---------------- */
footer.site{border-top:1px solid var(--line);margin-top:40px;padding:28px 0 50px;color:var(--muted);font-size:14px;background:#fff}
footer.site .contact{font-weight:700;color:var(--ink-2)}
.center-page{max-width:560px;margin:0 auto;padding:70px 20px;text-align:center}
.center-page .icon{font-size:44px;display:block;margin-bottom:14px}
.center-page h1{font:800 clamp(24px,3.4vw,32px) var(--font);letter-spacing:-.025em;margin-bottom:10px}
.center-page p{color:var(--muted);font-size:15.5px;margin-bottom:24px}
.skeleton-row{height:60px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--panel-2) 25%,#EDEFF2 50%,var(--panel-2) 75%);background-size:200% 100%;animation:sk 1.3s infinite;margin-bottom:10px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* entrance animation */
.fade-up{animation:fadeup .42s var(--ease) both}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.11s}.d3{animation-delay:.17s}.d4{animation-delay:.23s}

/* ---------------- chat-first support ---------------- */
.support-chat-section{padding:58px 0 44px;background:radial-gradient(circle at 50% 0,rgba(224,43,43,.08),transparent 42%),var(--canvas)}
.chat-wrap{max-width:900px}
.chat-intro{text-align:center;max-width:720px;margin:0 auto 25px}
.chat-eyebrow{display:inline-block;font:800 11px var(--font);letter-spacing:.14em;color:var(--red);margin-bottom:10px}
.chat-intro h1{font:800 clamp(34px,5vw,54px) var(--font);letter-spacing:-.045em;line-height:1.05;margin-bottom:12px}
.chat-intro p{font-size:17px;line-height:1.65;color:var(--muted);max-width:650px;margin:auto}
.chat-shell{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 24px 70px rgba(17,24,39,.11);overflow:hidden}
.chat-statusbar{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line);background:#fff}
.agent-avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--red);color:#fff;font:800 17px var(--font)}
.chat-statusbar>div{display:flex;flex-direction:column;font-size:13px}.chat-statusbar strong{font-size:14px}.chat-statusbar div span{color:var(--muted);font-size:12px;margin-top:2px}.chat-statusbar i{display:inline-block;width:7px;height:7px;background:#16a34a;border-radius:50%;margin-right:5px}
.chat-counter{margin-left:auto;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:#f8f8fa;color:var(--muted);font:700 11px var(--font);white-space:nowrap}
.chat-reset{border:0;background:transparent;color:var(--muted);font:700 12px var(--font);cursor:pointer;padding:8px}.chat-reset:hover{color:var(--red)}
.chat-messages{height:min(430px,52vh);min-height:310px;overflow-y:auto;padding:24px;background:#fbfbfc;scroll-behavior:smooth}
.chat-message{display:flex;margin:0 0 14px}.chat-message.user{justify-content:flex-end}.chat-message .bubble{max-width:min(680px,88%);padding:13px 15px;border-radius:5px 17px 17px 17px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.chat-message.user .bubble{background:var(--red);color:#fff;border-color:var(--red);border-radius:17px 5px 17px 17px}
.chat-message .bubble p+ul,.chat-message .bubble p+ol{margin-top:8px}.chat-message .bubble ul,.chat-message .bubble ol{padding-left:20px}.chat-message .bubble li{margin:5px 0}.chat-message.typing .bubble{color:var(--muted);font-style:italic;animation:pulse 1.2s infinite}
/* Quoted verbatim from a published policy page, and course details read from
   the catalogue — both are set apart from the assistant's own wording. */
.bubble .policy-quote{margin:10px 0;padding:11px 15px;border-left:3px solid var(--line-2);background:var(--panel-2);border-radius:0 8px 8px 0}
.bubble .policy-quote p{margin:0 0 8px}.bubble .policy-quote p:last-child{margin:0}
.bubble .course-facts{margin:10px 0;padding:12px 15px;border:1px solid var(--line);border-radius:10px;background:#fff}
.bubble .course-facts p{margin:0 0 6px}.bubble .course-facts ul{margin:0;padding-left:18px}
.bubble .src{margin:8px 0 0;font-size:13px;color:var(--muted)}
/* An admin-approved knowledge-base draft. Set apart from verified help-centre
   content, with the caveat attached to the answer itself rather than the frame,
   so it survives a copy or a screenshot. */
.bubble .kb-suggested{margin:10px 0;padding:12px 15px;border:1px dashed var(--line-2);border-radius:10px;background:var(--amber-soft)}
.bubble .kb-suggested>p:first-child{margin-top:0}
.bubble .kb-suggested-note{margin:10px 0 0;padding-top:9px;border-top:1px solid rgba(180,83,9,.22);font-size:13px;line-height:1.5;color:var(--amber)}
/* A step-by-step walkthrough: optional video, then numbered steps with their
   screenshots. Deliberately not scoped to .bubble — a promoted article renders
   the same markup inside the verified corpus, and the admin editor previews it. */
.kb-steps{margin:6px 0 0;padding-left:22px}
.kb-steps li{margin:9px 0}
.kb-steps img{display:block;max-width:100%;height:auto;margin-top:8px;border:1px solid var(--line);border-radius:10px}
/* The ratio lives on the iframe so the fallback link can sit below it in normal
   flow instead of on top of the player. */
.kb-video{margin:10px 0 4px}
.kb-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:#000}
.kb-video .src{margin:6px 0 0}
@keyframes pulse{50%{opacity:.55}}
.chat-message .bubble.general-guidance{white-space:pre-line}
.chat-guidance-flag{display:table;margin:0 0 10px;padding:4px 9px;border:1px solid #f2d58a;border-radius:999px;background:var(--amber-soft);color:var(--amber);font:800 10.5px var(--font);letter-spacing:.02em;text-transform:uppercase}
.chat-source{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;font-weight:700;color:var(--muted)}
.chat-feedback{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.chat-feedback-label{font:700 11.5px var(--font);color:var(--muted)}
.chat-feedback-btn{min-width:34px;min-height:30px;border:1px solid var(--line);background:#fff;border-radius:9px;font-size:14px;line-height:1;cursor:pointer;padding:5px 8px}
.chat-feedback-btn:hover:not(:disabled){border-color:var(--red);background:var(--red-soft)}
.chat-feedback-btn.chosen{border-color:var(--red);background:var(--red-soft)}
.chat-feedback-btn:disabled{cursor:default;opacity:.55}
.chat-feedback-btn.chosen:disabled{opacity:1}
.chat-feedback-thanks{font:700 11.5px var(--font);color:var(--muted)}
.chat-action{display:block;margin-top:12px}
.quick-prompts{display:flex;gap:7px;flex-wrap:wrap;padding:12px 18px 0;border-top:1px solid var(--line);background:#fff}.quick-prompts button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;color:var(--ink-2);font:700 11.5px var(--font);cursor:pointer}.quick-prompts button:hover{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.chat-composer{display:flex;gap:10px;align-items:flex-end;padding:14px 18px;background:#fff}.chat-composer textarea{flex:1;min-height:48px;max-height:120px;resize:vertical;border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;font:500 14px var(--font);line-height:1.45}.chat-composer textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px var(--red-ring)}.chat-composer button{height:48px;padding:0 18px;border:0;border-radius:13px;background:var(--red);color:#fff;font:800 13px var(--font);cursor:pointer;white-space:nowrap}.chat-composer button:hover{background:var(--red-dark)}.chat-composer button:disabled{opacity:.6;cursor:wait}.chat-composer button span{font-size:18px;margin-left:5px}
.chat-note{text-align:center;padding:0 18px 14px;background:#fff;color:var(--muted);font-size:11.5px}.chat-secondary{background:#fff}
.legacy-discovery.is-disabled{display:none!important}
.chat-message.assistant:has(.chat-inline-card),.chat-message.assistant:has(.chat-embedded-tool){width:100%}
.chat-message.assistant:has(.chat-inline-card) .bubble,.chat-message.assistant:has(.chat-embedded-tool) .bubble{width:100%;max-width:100%}
.chat-inline-card{margin-top:14px;padding:18px;border:1px solid #bde7ca;border-radius:16px;background:#fcfffd}
.chat-inline-card h4{font:800 18px var(--font);color:var(--ink);margin-bottom:5px}.chat-inline-card>.help{margin:0 0 16px}.chat-inline-card .field{margin-top:14px}.chat-inline-card .btn{margin-top:8px}.chat-inline-card .next{margin-top:10px}.chat-embedded-tool{margin-top:14px}.chat-embedded-tool .tool-head{margin-bottom:12px}
@media(max-width:640px){.support-chat-section{padding:34px 0 28px}.chat-intro{text-align:left}.chat-intro h1{font-size:36px}.chat-intro p{font-size:15px}.chat-shell{border-radius:18px}.chat-messages{height:46vh;min-height:300px;padding:16px}.chat-composer{padding:12px;gap:7px}.chat-composer button{width:48px;padding:0;font-size:0}.chat-composer button span{font-size:21px;margin:0}.quick-prompts{padding:10px 12px 0}.chat-message .bubble{max-width:94%}}

@media (max-width:720px){
  .automation-progress-card{padding:16px}
  .automation-progress-head{display:block}
  .automation-progress-elapsed{display:inline-block;margin-top:9px}
  .timeline.automation-timeline{display:block}
  .timeline.automation-timeline li{padding:0 0 20px 34px}
  .timeline.automation-timeline li::before{left:10px;right:auto;top:22px;bottom:0;width:2px;height:auto}
  .timeline.automation-timeline .dot{left:0;top:1px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .automation-progress-track span{left:0;width:100%;opacity:.55}
}
.course-choices {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #d9e4dd;
  border-radius: 10px;
  background: #f7fbf8;
}
.course-choice-buttons {
  display: grid;
  gap: 7px;
  margin-top: 7px;
}
.course-choice-buttons .btn {
  height: auto;
  min-height: 34px;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}
.choice-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.choice-buttons .btn.selected {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

/* ---------------- chat-only hub (body.chat-app) ----------------
   The homepage is the chatbot and nothing else, at every width: the shell fills
   the viewport, the message list is the only thing that scrolls, and the page
   itself never does. Everything is scoped to body.chat-app so /demo, /fix, /t
   and the admin pages keep the ordinary document flow.
   These rules are viewport-agnostic on purpose — desktop gets the same
   full-height chat as mobile, just as a centred column with rounded corners. */
body.chat-app{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
body.chat-app #viewHome,body.chat-app .support-chat-section{flex:1;display:flex;min-height:0;padding:0;background:var(--canvas)}
body.chat-app .chat-wrap{flex:1;display:flex;min-height:0;width:100%;max-width:900px;margin:0 auto;padding:0}
body.chat-app .chat-shell{flex:1;display:flex;flex-direction:column;min-height:0;border-radius:0;border-left:0;border-right:0;box-shadow:none}
body.chat-app .chat-statusbar{padding-top:calc(15px + env(safe-area-inset-top))}
/* Beats the fixed .chat-messages height (and its 640px override) so the message
   list is what flexes. */
body.chat-app .chat-messages{flex:1;height:auto;min-height:0}
body.chat-app .chat-composer{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
body.chat-app #viewTicket{flex:1;min-height:0;overflow-y:auto;padding:16px 0}
body.chat-app #viewTicket.hidden{display:none}
@media(min-width:720px){
  body.chat-app .chat-shell{border:1px solid var(--line);border-radius:18px;margin:14px 0;box-shadow:0 18px 50px rgba(17,24,39,.09)}
  body.chat-app .chat-statusbar{padding-top:15px}
}