/* ============================================================
   LiveQ Design Kit — components.css
   The SIX shared components, every state. Tokens only.
   Touch-first: feedback lives on :active / :focus-visible,
   never on :hover (student phones have no hover).
   Requires tokens.css.
   ============================================================ */

/* ---- shared primitives used inside the six components ---- */
.lq-kicker{
  font-family:var(--lq-font-body);font-size:var(--lq-fs-micro);
  font-weight:var(--lq-w-bold);letter-spacing:.12em;text-transform:uppercase;
  color:var(--lq-ink-3);
}
.lq-anon{                                  /* "no login, no names" trust chip */
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--lq-r-pill);
  font-family:var(--lq-font-body);font-size:var(--lq-fs-micro);font-weight:var(--lq-w-semi);
  color:var(--lq-primary-ink);background:var(--lq-primary-tint);
}
.lq-anon svg{width:14px;height:14px;flex:none}
/* wellbeing / human-contact line — brand accent (care), never a state colour.
   Appears at every student submission point, EN + one-line 中文 mirror. */
.lq-wellbeing{
  display:flex;gap:7px;align-items:flex-start;margin:0;
  font-family:var(--lq-font-body);font-size:var(--lq-fs-caption);line-height:1.35;color:var(--lq-ink-2);
}
.lq-wellbeing svg{flex:none;width:15px;height:15px;margin-top:1px;color:var(--lq-primary-ink)}
.lq-wellbeing__zh{display:block;margin-top:1px;color:var(--lq-ink-3);font-size:var(--lq-fs-micro)}

.lq-btn{
  appearance:none;border:0;cursor:pointer;font-family:var(--lq-font-display);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--lq-touch-min);padding:0 var(--lq-s-5);
  border-radius:var(--lq-r-pill);font-size:var(--lq-fs-body);font-weight:var(--lq-w-bold);
  transition:var(--lq-tap-fade);-webkit-tap-highlight-color:transparent;
}
.lq-btn--primary{color:var(--lq-on-primary);background:var(--lq-primary);box-shadow:var(--lq-shadow-sm)}
.lq-btn--ghost{color:var(--lq-ink);background:var(--lq-surface);border:1.5px solid var(--lq-line)}
.lq-btn:active{transform:translateY(1px) scale(.985)}
.lq-btn:focus-visible{outline:none;box-shadow:var(--lq-focus-ring)}
.lq-btn--block{width:100%}

/* ============================================================
   1 · SESSION-STATE BANNER  (piece 8)
   states: --listen · --work (+countdown) · --neutral · --closed
   ============================================================ */
.lq-banner{
  position:relative;display:flex;align-items:center;gap:var(--lq-s-3);
  padding:var(--lq-s-3) var(--lq-s-4);padding-left:var(--lq-s-5);
  border-radius:var(--lq-r-lg);overflow:hidden;
  background:var(--lq-surface);border:1px solid var(--lq-line);box-shadow:var(--lq-shadow-sm);
}
.lq-banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--lq-neutral)}
.lq-banner__ico{
  flex:none;width:38px;height:38px;border-radius:var(--lq-r-md);
  display:grid;place-items:center;color:#fff;background:var(--lq-neutral);
}
.lq-banner__ico svg{width:22px;height:22px}
.lq-banner__text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.lq-banner__label{
  font-family:var(--lq-font-display);font-weight:var(--lq-w-black);
  font-size:var(--lq-fs-title);letter-spacing:.01em;color:var(--lq-ink);
}
.lq-banner__sub{
  margin-top:2px;font-family:var(--lq-font-body);font-size:var(--lq-fs-caption);
  color:var(--lq-ink-2);
}
.lq-banner__count{
  margin-left:auto;flex:none;font-family:var(--lq-font-mono);font-weight:var(--lq-w-bold);
  font-variant-numeric:tabular-nums;font-size:var(--lq-fs-headline);color:var(--lq-ink);letter-spacing:.02em;
}
/* LISTEN — attention / look up */
.lq-banner--listen{background:var(--lq-listen-tint);border-color:transparent}
.lq-banner--listen::before{background:var(--lq-listen)}
.lq-banner--listen .lq-banner__ico{background:var(--lq-listen)}
.lq-banner--listen .lq-banner__label{color:var(--lq-listen-ink)}
.lq-banner--listen .lq-banner__ico{animation:lqPulseSoft 2s ease-in-out infinite}
/* WORK — timer running */
.lq-banner--work{background:var(--lq-work-tint);border-color:transparent}
.lq-banner--work::before{background:var(--lq-work)}
.lq-banner--work .lq-banner__ico{background:var(--lq-work)}
.lq-banner--work .lq-banner__label{color:var(--lq-work-ink)}
.lq-banner--work .lq-banner__count{color:var(--lq-work-ink)}
/* neutral — ambient, nothing happening */
.lq-banner--neutral::before{background:var(--lq-neutral)}
.lq-banner--neutral .lq-banner__ico{background:var(--lq-neutral)}
/* session closed — subdued */
.lq-banner--closed{background:var(--lq-bg-sunk)}
.lq-banner--closed::before{background:var(--lq-ink-3)}
.lq-banner--closed .lq-banner__ico{background:var(--lq-ink-3)}
.lq-banner--closed .lq-banner__label{color:var(--lq-ink-2)}

/* ============================================================
   2 · TAP-CARD  (piece 1 — the ONE student gesture)
   states: --empty · active(4 variants) · --done · --expired
   ============================================================ */
.lq-tapcard{
  display:flex;flex-direction:column;gap:var(--lq-s-4);
  padding:var(--lq-s-5);border-radius:var(--lq-r-xl);
  background:var(--lq-surface);border:1px solid var(--lq-line);box-shadow:var(--lq-shadow-md);
}
.lq-tapcard__head{display:flex;align-items:center;justify-content:space-between;gap:var(--lq-s-3)}
.lq-tapcard__q{
  font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);
  font-size:var(--lq-fs-title);line-height:var(--lq-lh-snug);color:var(--lq-ink);text-wrap:pretty;
}
.lq-tapcard__hint{font-family:var(--lq-font-body);font-size:var(--lq-fs-caption);color:var(--lq-ink-3)}
/* one big tap — "I'm lost" */
.lq-tapcard__big{
  width:100%;min-height:64px;border:0;cursor:pointer;
  border-radius:var(--lq-r-lg);color:var(--lq-on-primary);background:var(--lq-primary);
  font-family:var(--lq-font-display);font-weight:var(--lq-w-black);font-size:var(--lq-fs-body-lg);
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:var(--lq-tap-fade);-webkit-tap-highlight-color:transparent;box-shadow:var(--lq-shadow-sm);
}
.lq-tapcard__big:active{transform:translateY(1px) scale(.99)}
.lq-tapcard__big:focus-visible{outline:none;box-shadow:var(--lq-focus-ring)}
/* choice grid — 3 emoji-choice, or 2–4 option quiz */
.lq-choices{display:grid;gap:var(--lq-s-3)}
.lq-choices--2{grid-template-columns:1fr 1fr}
.lq-choices--3,.lq-choices--stack{grid-template-columns:1fr}
.lq-choices--4{grid-template-columns:1fr 1fr}
.lq-choice{
  display:flex;align-items:center;gap:var(--lq-s-3);
  min-height:56px;padding:var(--lq-s-3) var(--lq-s-4);cursor:pointer;
  border-radius:var(--lq-r-md);background:var(--lq-surface-2);border:1.5px solid var(--lq-line);
  font-family:var(--lq-font-body);font-size:var(--lq-fs-body);font-weight:var(--lq-w-semi);color:var(--lq-ink);
  transition:var(--lq-tap-fade);-webkit-tap-highlight-color:transparent;text-align:left;
}
.lq-choice__key{
  flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--lq-font-display);font-weight:var(--lq-w-bold);font-size:15px;
  color:var(--lq-primary-ink);background:var(--lq-primary-tint);
}
.lq-choice__emoji{flex:none;font-size:24px;line-height:1}
.lq-choice:active{transform:scale(.98)}
.lq-choice:focus-visible{outline:none;box-shadow:var(--lq-focus-ring)}
.lq-choice[aria-pressed="true"]{border-color:var(--lq-primary);background:var(--lq-primary-tint)}
/* empty */
.lq-tapcard--empty{
  align-items:center;text-align:center;gap:var(--lq-s-2);
  background:var(--lq-bg-sunk);border:1.5px dashed var(--lq-line);box-shadow:none;
  padding:var(--lq-s-7) var(--lq-s-5);color:var(--lq-ink-3);
}
.lq-tapcard--empty .lq-tapcard__q{font-size:var(--lq-fs-body-lg);color:var(--lq-ink-2)}
/* submitted-thanks */
.lq-tapcard--done{
  align-items:center;text-align:center;gap:var(--lq-s-3);
  background:var(--lq-work-tint);border-color:transparent;
}
.lq-tapcard__check{
  width:52px;height:52px;border-radius:var(--lq-r-pill);display:grid;place-items:center;
  color:var(--lq-on-work);background:var(--lq-work);animation:lqPop .34s cubic-bezier(.2,.9,.3,1.2) both;
}
.lq-tapcard__check svg{width:28px;height:28px}
.lq-tapcard--done .lq-tapcard__q{color:var(--lq-work-ink)}
/* expired */
.lq-tapcard--expired{background:var(--lq-bg-sunk);border-style:dashed;box-shadow:none;opacity:.85}
.lq-tapcard--expired .lq-tapcard__q{color:var(--lq-ink-3)}
.lq-tapcard__badge{
  align-self:flex-start;padding:4px 10px;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:.08em;color:var(--lq-ink-3);background:var(--lq-neutral-tint);
}

/* ============================================================
   3 · ANSWER CARD  (broadcast feed item)
   forms: default (compact list) · --takeover (full-screen)
   ============================================================ */
.lq-answer{
  display:flex;flex-direction:column;gap:var(--lq-s-2);
  padding:var(--lq-s-4);border-radius:var(--lq-r-lg);
  background:var(--lq-surface);border:1px solid var(--lq-line);box-shadow:var(--lq-shadow-sm);
}
.lq-answer__tag{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  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:.06em;text-transform:uppercase;color:var(--lq-primary-ink);background:var(--lq-primary-tint);
}
.lq-answer__q{
  font-family:var(--lq-font-body);font-size:var(--lq-fs-caption);color:var(--lq-ink-3);
  line-height:var(--lq-lh-snug);
}
.lq-answer__q b{font-weight:var(--lq-w-semi);color:var(--lq-ink-2)}
.lq-answer__a{
  font-family:var(--lq-font-display);font-weight:var(--lq-w-semi);
  font-size:var(--lq-fs-body-lg);line-height:var(--lq-lh-snug);color:var(--lq-ink);text-wrap:pretty;
}
.lq-answer__time{
  font-family:var(--lq-font-mono);font-size:var(--lq-fs-micro);color:var(--lq-ink-3);
  font-variant-numeric:tabular-nums;
}
.lq-answer--new{animation:lqRise .5s cubic-bezier(.2,.7,.2,1) both;border-color:var(--lq-primary)}
/* full-screen broadcast takeover */
.lq-answer--takeover{
  gap:var(--lq-s-5);padding:var(--lq-s-8) var(--lq-s-7);border-radius:var(--lq-r-2xl);
  box-shadow:var(--lq-shadow-lg);border-color:transparent;background:var(--lq-surface);
}
.lq-answer--takeover .lq-answer__q{font-size:var(--lq-fs-body)}
.lq-answer--takeover .lq-answer__a{font-size:var(--lq-fs-display);line-height:var(--lq-lh-tight)}
.lq-answer--takeover .lq-answer__time{font-size:var(--lq-fs-caption)}

/* ============================================================
   4 · QUESTION ITEM  (queue row)
   states: --pending · --answered · --flagged · queue-position line
   ============================================================ */
.lq-qitem{
  display:flex;align-items:flex-start;gap:var(--lq-s-3);
  padding:var(--lq-s-3) var(--lq-s-4);border-radius:var(--lq-r-md);
  background:var(--lq-surface);border:1px solid var(--lq-line);
}
.lq-qitem__dot{flex:none;width:12px;height:12px;border-radius:50%;margin-top:5px;background:var(--lq-neutral)}
.lq-qitem__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lq-qitem__text{
  font-family:var(--lq-font-body);font-size:var(--lq-fs-body);color:var(--lq-ink);
  line-height:var(--lq-lh-snug);text-wrap:pretty;
}
.lq-qitem__meta{
  font-family:var(--lq-font-mono);font-size:var(--lq-fs-micro);color:var(--lq-ink-3);
  font-variant-numeric:tabular-nums;
}
.lq-qitem__pos{
  flex:none;align-self:center;padding:4px 10px;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:var(--lq-ink-2);background:var(--lq-bg-sunk);white-space:nowrap;
}
.lq-qitem--pending{border-left:4px solid var(--lq-listen)}
.lq-qitem--pending .lq-qitem__dot{background:var(--lq-listen)}
.lq-qitem--answered{border-left:4px solid var(--lq-work)}
.lq-qitem--answered .lq-qitem__dot{background:var(--lq-work)}
.lq-qitem--answered .lq-qitem__text{color:var(--lq-ink-2)}
.lq-qitem--flagged{border-left:4px solid var(--lq-alert);background:var(--lq-alert-tint)}
.lq-qitem--flagged .lq-qitem__dot{background:var(--lq-alert)}
.lq-qitem--flagged .lq-qitem__pos{color:var(--lq-alert-ink);background:#fff}

/* ============================================================
   5 · LIV  (mascot)
   states: --idle · --react (subtle, spam-proof) · --celebrate
   Deliberately understated — the reaction is a small, single
   settle, NOT a reward loop (S1). idle & react share one image
   so rapid taps can't unlock a "better" animation.
   ============================================================ */
.lq-liv{
  --lq-liv-size:96px;
  width:var(--lq-liv-size);flex:none;display:block;
  filter:drop-shadow(0 10px 14px rgba(90,60,40,.18));
  transform-origin:50% 90%;
}
.lq-liv img{width:100%;height:auto;display:block}
/* board idle — the ONLY continuous loop: ambient, low-amplitude drift */
.lq-liv--idle{animation:lqFloat 5.5s ease-in-out infinite}
/* tap-spike — one gentle settle; idle & react share one image (spam-proof) */
.lq-liv--react{animation:lqNudge 1.1s cubic-bezier(.2,.7,.2,1) both}
/* overlay new-item — one small lean/notice toward the fresh answer */
.lq-liv--newitem{animation:lqNotice .9s cubic-bezier(.2,.7,.2,1) both}
/* session close — a single warm wave; one-shot, ≤2s, never loops */
.lq-liv--close,.lq-liv--celebrate{animation:lqWave 1.8s cubic-bezier(.3,.6,.3,1) both}

/* ============================================================
   6 · TIMER DISPLAY
   sizes: default (phone) · --proj (projector)
   states: --work (running) · --neutral · --low (final seconds)
   ============================================================ */
.lq-timer{
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  font-family:var(--lq-font-mono);
}
.lq-timer__digits{
  font-weight:var(--lq-w-bold);font-variant-numeric:tabular-nums;letter-spacing:.02em;
  font-size:var(--lq-fs-display);line-height:1;color:var(--lq-ink);
}
.lq-timer__label{
  font-family:var(--lq-font-body);font-size:var(--lq-fs-micro);font-weight:var(--lq-w-bold);
  letter-spacing:.12em;text-transform:uppercase;color:var(--lq-ink-3);
}
.lq-timer--work .lq-timer__digits{color:var(--lq-work-ink)}
.lq-timer--work .lq-timer__label{color:var(--lq-work-ink)}
.lq-timer--neutral .lq-timer__digits{color:var(--lq-ink-3)}
.lq-timer--low .lq-timer__digits{color:var(--lq-alert-ink);animation:lqBlink 1s steps(2,start) infinite}
.lq-timer--low .lq-timer__label{color:var(--lq-alert-ink)}
/* projector — huge, back-row legible */
.lq-timer--proj .lq-timer__digits{font-size:var(--lq-fs-proj-timer)}
.lq-timer--proj .lq-timer__label{font-size:var(--lq-fs-proj-label);letter-spacing:.18em}

/* ============================================================
   keyframes — all subtle; disabled under reduced-motion
   ============================================================ */
@keyframes lqFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes lqNudge{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-5px) rotate(-2.5deg)}60%{transform:translateY(0) rotate(1.5deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes lqNotice{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-4px) rotate(-3deg)}70%{transform:translateY(0) rotate(1.2deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes lqWave{0%{transform:translateY(0) rotate(0)}15%{transform:translateY(-6px) rotate(-5deg)}32%{transform:translateY(-6px) rotate(4deg)}49%{transform:translateY(-5px) rotate(-4deg)}66%{transform:translateY(-4px) rotate(3deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes lqPulseSoft{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.9}}
@keyframes lqPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes lqRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes lqBlink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  .lq-liv--idle,.lq-liv--react,.lq-liv--newitem,.lq-liv--close,.lq-liv--celebrate,
  .lq-banner--listen .lq-banner__ico,.lq-timer--low .lq-timer__digits{animation:none!important}
}