/* ============================================================
   LiveQ Design Kit — screens.css
   Composition chrome for the THREE reference screens. Every
   screen is assembled from the six components (banner, tap-card,
   answer, question-item, Liv, timer); this file only adds the
   surrounding layout + surface-specific chrome (headers, FAQ,
   chat, dashboard, meter, composer). Tokens only.
   Note: the confusion meter and the record button use the BRAND
   magenta, never a semantic state colour — severity is read from
   the number/label, not a traffic-light hue.
   ============================================================ */

/* ---------- shared phone frame (student surfaces) ---------- */
.lq-phone{
  width:360px;flex:none;display:flex;flex-direction:column;
  background:var(--lq-bg);border-radius:34px;overflow:hidden;
  border:1px solid var(--lq-line);box-shadow:var(--lq-shadow-lg);
}
.lq-phone__scroll{display:flex;flex-direction:column;gap:var(--lq-s-4);padding:var(--lq-s-4);overflow:hidden}

/* app bar: module / session identity */
.lq-appbar{
  display:flex;align-items:center;gap:var(--lq-s-3);
  padding:var(--lq-s-3) var(--lq-s-4);background:var(--lq-surface);border-bottom:1px solid var(--lq-line);
}
.lq-appbar__mark{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:#fff;background:var(--lq-primary);font-family:var(--lq-font-display);font-weight:var(--lq-w-black);font-size:17px;
}
.lq-appbar__id{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.lq-appbar__mod{font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);font-size:var(--lq-fs-body);color:var(--lq-ink)}
.lq-appbar__sess{font-family:var(--lq-font-body);font-size:var(--lq-fs-micro);color:var(--lq-ink-3)}
.lq-appbar__anon{margin-left:auto}

.lq-section-label{
  display:flex;align-items:center;gap:8px;margin:var(--lq-s-2) 0 calc(-1 * var(--lq-s-1));
  font-family:var(--lq-font-body);font-size:var(--lq-fs-micro);font-weight:var(--lq-w-bold);
  letter-spacing:.1em;text-transform:uppercase;color:var(--lq-ink-3);
}

/* feed wrapper */
.lq-feed{display:flex;flex-direction:column;gap:var(--lq-s-3)}

/* FAQ accordion */
.lq-faq{display:flex;flex-direction:column;gap:var(--lq-s-2)}
.lq-faq__item{background:var(--lq-surface);border:1px solid var(--lq-line);border-radius:var(--lq-r-md);overflow:hidden}
.lq-faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--lq-s-3);
  min-height:52px;padding:var(--lq-s-3) var(--lq-s-4);cursor:pointer;border:0;background:none;text-align:left;
  font-family:var(--lq-font-display);font-weight:var(--lq-w-semi);font-size:var(--lq-fs-body);color:var(--lq-ink);
  -webkit-tap-highlight-color:transparent;
}
.lq-faq__q:focus-visible{outline:none;box-shadow:var(--lq-focus-ring)}
.lq-faq__chev{flex:none;transition:transform .2s ease;color:var(--lq-ink-3)}
.lq-faq__item--open .lq-faq__chev{transform:rotate(180deg)}
.lq-faq__a{
  padding:0 var(--lq-s-4) var(--lq-s-4);
  font-family:var(--lq-font-body);font-size:var(--lq-fs-caption);line-height:var(--lq-lh-body);color:var(--lq-ink-2);
}

/* queue status strip (per self-reported table) */
.lq-qstatus{
  display:flex;align-items:center;gap:var(--lq-s-3);
  padding:var(--lq-s-3) var(--lq-s-4);border-radius:var(--lq-r-md);
  background:var(--lq-listen-tint);
}
.lq-qstatus__ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#fff;background:var(--lq-listen)}
.lq-qstatus__t{font-family:var(--lq-font-body);font-size:var(--lq-fs-caption);color:var(--lq-listen-ink);line-height:var(--lq-lh-snug)}
.lq-qstatus__t b{font-family:var(--lq-font-display);font-weight:var(--lq-w-bold)}

/* Liv corner card + ask-the-assistant link */
.lq-livcard{
  display:flex;align-items:center;gap:var(--lq-s-3);
  padding:var(--lq-s-3) var(--lq-s-4);border-radius:var(--lq-r-lg);
  background:var(--lq-surface);border:1px solid var(--lq-line);
}
.lq-livcard__txt{font-family:var(--lq-font-body);font-size:var(--lq-fs-caption);color:var(--lq-ink-2);line-height:var(--lq-lh-snug)}
.lq-asklink{
  display:flex;align-items:center;gap:var(--lq-s-3);
  min-height:var(--lq-touch-min);padding:var(--lq-s-3) var(--lq-s-4);border-radius:var(--lq-r-lg);
  text-decoration:none;background:var(--lq-ink);color:#fff;
  font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);font-size:var(--lq-fs-body);
  transition:var(--lq-tap-fade);-webkit-tap-highlight-color:transparent;
}
.lq-asklink:active{transform:translateY(1px)}
.lq-asklink svg{flex:none}
.lq-asklink span:last-child{margin-left:auto}

/* ============================================================
   Surface B — assistant chat
   ============================================================ */
.lq-chat{display:flex;flex-direction:column;height:100%}
.lq-bothead{
  display:flex;align-items:flex-start;gap:var(--lq-s-3);
  padding:var(--lq-s-4);background:var(--lq-surface);border-bottom:1px solid var(--lq-line);
}
.lq-bothead__mark{flex:none;width:44px;height:44px;border-radius:13px;overflow:hidden;background:var(--lq-primary-tint);display:grid;place-items:center}
.lq-bothead__mark img{width:150%;height:auto;transform:translateY(6px)}
.lq-bothead__t{flex:1;min-width:0}
.lq-bothead__name{display:flex;align-items:center;gap:8px;font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);font-size:var(--lq-fs-body-lg);color:var(--lq-ink)}
.lq-bothead__botchip{padding:2px 8px;border-radius:var(--lq-r-pill);font-family:var(--lq-font-body);font-size:var(--lq-fs-micro);font-weight:var(--lq-w-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--lq-ink-2);background:var(--lq-bg-sunk)}
.lq-bothead__note{margin-top:3px;font-family:var(--lq-font-body);font-size:var(--lq-fs-micro);color:var(--lq-ink-3);line-height:var(--lq-lh-snug)}

.lq-thread{flex:1;display:flex;flex-direction:column;gap:var(--lq-s-4);padding:var(--lq-s-4);overflow:hidden}
.lq-msg{max-width:86%;font-family:var(--lq-font-body);font-size:var(--lq-fs-body);line-height:var(--lq-lh-body)}
.lq-msg--user{align-self:flex-end;padding:var(--lq-s-3) var(--lq-s-4);border-radius:18px 18px 4px 18px;background:var(--lq-primary);color:#fff}
.lq-msg--bot{align-self:flex-start;color:var(--lq-ink)}
.lq-msg__bubble{padding:var(--lq-s-3) var(--lq-s-4);border-radius:18px 18px 18px 4px;background:var(--lq-surface);border:1px solid var(--lq-line)}
.lq-msg__stream{display:inline-block;width:8px;height:8px;margin-left:2px;border-radius:50%;background:var(--lq-primary);animation:lqBlink 1s steps(2,start) infinite;vertical-align:baseline}
/* grounded vs general confidence tags */
.lq-conf{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;padding:3px 9px;border-radius:var(--lq-r-pill);font-family:var(--lq-font-body);font-size:var(--lq-fs-micro);font-weight:var(--lq-w-bold);letter-spacing:.04em;text-transform:uppercase}
.lq-conf--grounded{color:var(--lq-work-ink);background:var(--lq-work-tint)}
.lq-conf--general{color:var(--lq-ink-2);background:var(--lq-bg-sunk)}
/* citation chip */
.lq-cite{
  display:inline-flex;align-items:center;gap:6px;margin-top:2px;
  padding:5px 11px;border-radius:var(--lq-r-pill);cursor:pointer;border:1px solid var(--lq-line);
  font-family:var(--lq-font-mono);font-size:var(--lq-fs-micro);font-weight:var(--lq-w-bold);
  color:var(--lq-primary-ink);background:var(--lq-primary-tint);text-decoration:none;
}
.lq-cite svg{width:13px;height:13px}
/* escalation card */
.lq-escalation{
  margin-top:var(--lq-s-3);border:1.5px solid var(--lq-line);border-radius:var(--lq-r-lg);
  background:var(--lq-surface-2);overflow:hidden;
}
.lq-escalation__head{display:flex;align-items:center;gap:8px;padding:var(--lq-s-3) var(--lq-s-4);border-bottom:1px dashed var(--lq-line)}
.lq-escalation__title{font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);font-size:var(--lq-fs-caption);letter-spacing:.04em;text-transform:uppercase;color:var(--lq-ink-2)}
.lq-escalation__body{padding:var(--lq-s-4);font-family:var(--lq-font-mono);font-size:var(--lq-fs-caption);line-height:1.7;color:var(--lq-ink);white-space:pre-wrap}
.lq-escalation__foot{display:flex;justify-content:flex-end;padding:0 var(--lq-s-4) var(--lq-s-4)}
.lq-copy{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--lq-touch-min);padding:0 var(--lq-s-4);
  border:0;cursor:pointer;border-radius:var(--lq-r-pill);
  font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);font-size:var(--lq-fs-caption);
  color:#fff;background:var(--lq-ink);transition:var(--lq-tap-fade);-webkit-tap-highlight-color:transparent;
}
.lq-copy:active{transform:translateY(1px)}
.lq-copy svg{width:15px;height:15px}
/* starter chips */
.lq-starters{display:flex;flex-wrap:wrap;gap:var(--lq-s-2)}
.lq-starter{
  min-height:40px;padding:8px 14px;cursor:pointer;border-radius:var(--lq-r-pill);
  border:1.5px solid var(--lq-line);background:var(--lq-surface);
  font-family:var(--lq-font-body);font-size:var(--lq-fs-caption);font-weight:var(--lq-w-semi);color:var(--lq-ink);
  -webkit-tap-highlight-color:transparent;
}
.lq-starter:active{transform:scale(.98)}
/* input */
.lq-chatinput{display:flex;align-items:center;gap:var(--lq-s-2);padding:var(--lq-s-3) var(--lq-s-4);background:var(--lq-surface);border-top:1px solid var(--lq-line)}
.lq-chatinput__field{flex:1;min-height:44px;padding:0 var(--lq-s-4);border-radius:var(--lq-r-pill);border:1.5px solid var(--lq-line);background:var(--lq-bg);font-family:var(--lq-font-body);font-size:var(--lq-fs-body);color:var(--lq-ink-3);display:flex;align-items:center}
.lq-chatinput__send{flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;background:var(--lq-primary)}
.lq-chatinput--degraded{background:var(--lq-neutral-tint)}
.lq-chatnote{padding:var(--lq-s-2) var(--lq-s-4);font-family:var(--lq-font-body);font-size:var(--lq-fs-micro);color:var(--lq-ink-3);text-align:center;background:var(--lq-bg-sunk)}

/* ============================================================
   Surface C — teacher presenter view (compact scale)
   ============================================================ */
.lq-dash{
  width:1180px;flex:none;display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:var(--lq-c-6);
  padding:var(--lq-c-7);background:var(--lq-bg);border-radius:22px;
  border:1px solid var(--lq-line);box-shadow:var(--lq-shadow-lg);
  font-size:var(--lq-fs-c-body);
}
.lq-dash__top{grid-column:1 / -1;display:flex;align-items:center;gap:var(--lq-c-6);flex-wrap:wrap;
  padding:var(--lq-c-5) var(--lq-c-6);background:var(--lq-surface);border:1px solid var(--lq-line);border-radius:var(--lq-r-lg)}
.lq-dash__title{font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);font-size:var(--lq-fs-c-headline);color:var(--lq-ink)}
.lq-dash__title small{display:block;font-family:var(--lq-font-body);font-weight:var(--lq-w-med);font-size:var(--lq-fs-c-label);color:var(--lq-ink-3)}
.lq-panel{display:flex;flex-direction:column;gap:var(--lq-c-5);padding:var(--lq-c-6);background:var(--lq-surface);border:1px solid var(--lq-line);border-radius:var(--lq-r-lg)}
.lq-panel__h{display:flex;align-items:center;justify-content:space-between;gap:var(--lq-c-4)}
.lq-panel__h h4{margin:0;font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);font-size:var(--lq-fs-c-title);color:var(--lq-ink)}
.lq-panel__count{font-family:var(--lq-font-mono);font-size:var(--lq-fs-c-label);font-weight:var(--lq-w-bold);color:var(--lq-ink-3);padding:2px 8px;border-radius:var(--lq-r-pill);background:var(--lq-bg-sunk)}

/* mode toggle */
.lq-modetoggle{display:inline-flex;padding:4px;border-radius:var(--lq-r-pill);background:var(--lq-bg-sunk);gap:2px}
.lq-modebtn{min-height:38px;padding:0 var(--lq-c-7);border:0;cursor:pointer;border-radius:var(--lq-r-pill);
  font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);font-size:var(--lq-fs-c-body-lg);color:var(--lq-ink-2);background:transparent}
.lq-modebtn[aria-pressed="true"]{color:#fff}
.lq-modebtn--listen[aria-pressed="true"]{background:var(--lq-listen)}
.lq-modebtn--work[aria-pressed="true"]{background:var(--lq-work)}
.lq-modebtn--neutral[aria-pressed="true"]{background:var(--lq-neutral)}
/* timer presets */
.lq-presets{display:flex;gap:var(--lq-c-3);margin-left:auto}
.lq-preset{min-height:38px;padding:0 var(--lq-c-6);border:1.5px solid var(--lq-line);cursor:pointer;border-radius:var(--lq-r-md);
  font-family:var(--lq-font-mono);font-weight:var(--lq-w-bold);font-size:var(--lq-fs-c-body-lg);color:var(--lq-ink);background:var(--lq-surface)}
.lq-preset[aria-pressed="true"]{border-color:var(--lq-work);color:var(--lq-work-ink);background:var(--lq-work-tint)}

/* confusion meter (brand-coloured; signal, not verdict) */
.lq-meter__row{display:flex;align-items:baseline;gap:var(--lq-c-4)}
.lq-meter__pct{font-family:var(--lq-font-display);font-weight:var(--lq-w-black);font-size:34px;line-height:1;color:var(--lq-ink)}
.lq-meter__cap{font-family:var(--lq-font-body);font-size:var(--lq-fs-c-label);color:var(--lq-ink-3)}
.lq-meter__track{height:10px;border-radius:var(--lq-r-pill);background:var(--lq-bg-sunk);overflow:hidden}
.lq-meter__fill{height:100%;border-radius:var(--lq-r-pill);background:var(--lq-primary)}
.lq-meter__spark{display:flex;align-items:flex-end;gap:3px;height:34px}
.lq-meter__spark i{flex:1;border-radius:2px 2px 0 0;background:var(--lq-primary-tint)}
.lq-meter__spark i:last-child{background:var(--lq-primary)}

/* queues inside panels */
.lq-panel__list{display:flex;flex-direction:column;gap:var(--lq-c-4)}
.lq-modrow{display:flex;align-items:center;gap:var(--lq-c-4);padding:var(--lq-c-4) var(--lq-c-5);border-radius:var(--lq-r-md);background:var(--lq-surface-2);border:1px solid var(--lq-line)}
.lq-modrow__t{flex:1;min-width:0;font-family:var(--lq-font-body);font-size:var(--lq-fs-c-body-lg);color:var(--lq-ink);line-height:var(--lq-lh-snug)}
.lq-modrow__acts{display:flex;gap:var(--lq-c-3);flex:none}
.lq-iconbtn{width:36px;height:36px;border:0;cursor:pointer;border-radius:10px;display:grid;place-items:center}
.lq-iconbtn--approve{color:#fff;background:var(--lq-work)}
.lq-iconbtn--dismiss{color:var(--lq-ink-2);background:var(--lq-bg-sunk)}
.lq-iconbtn svg{width:18px;height:18px}

/* broadcast composer + record */
.lq-composer{display:flex;flex-direction:column;gap:var(--lq-c-5)}
.lq-composer__field{min-height:96px;padding:var(--lq-c-5);border-radius:var(--lq-r-md);border:1.5px solid var(--lq-line);background:var(--lq-bg);
  font-family:var(--lq-font-body);font-size:var(--lq-fs-c-body-lg);line-height:var(--lq-lh-body);color:var(--lq-ink)}
.lq-composer__row{display:flex;align-items:center;gap:var(--lq-c-4)}
.lq-rec{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 var(--lq-c-6);border:0;cursor:pointer;border-radius:var(--lq-r-pill);
  font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);font-size:var(--lq-fs-c-body-lg);color:#fff;background:var(--lq-primary)}
.lq-rec__dot{width:10px;height:10px;border-radius:50%;background:#fff}
.lq-rec--recording{background:var(--lq-primary-ink)}
.lq-rec--recording .lq-rec__dot{animation:lqBlink 1s steps(2,start) infinite}
.lq-rec__level{display:flex;align-items:center;gap:2px;height:20px}
.lq-rec__level i{width:3px;border-radius:2px;background:var(--lq-primary)}
.lq-composer__push{margin-left:auto}