/* LỆNH 62–63 · the Q&A assistant's chat panel (assets/js/qa-agent.js, only with ?agent=1; without the flag no element here exists).
   The deck's dark glass, 1 px edges; cyan = AI, warm = the person, amber = missing / waiting. The panel docks on the right (1920 → 640 px,
   1366 → 520 px) and the stage shrinks to its left (#viewport / #qa100-root, the deck's own fit on resize). Motion ≤ 250 ms, transform and
   opacity only; body.safe / body.calm stop it (pitch.css). body.proj (key C): opaque panel, every text ≥ 7:1. */
:root { --qac-cyan: #62D8F5; --qac-warm: #F4B58C; --qac-amber: #F0A63A; --qac-ink: #EEF3FA; --qac-mute: #B4C2D8; --qac-glass: rgba(7, 13, 30, .95);
  --qac-card: rgba(255, 255, 255, .045); --qac-edge: rgba(160, 190, 240, .24); --qac-w: 640px;
  --qac-t: clamp(18px, 1.146vw, 22px); --qac-b: clamp(15px, .9375vw, 18px); --qac-c: 14px; --qac-in: clamp(18px, 1.042vw, 20px); }
body.qac-on #viewport, body.qac-on #qa100-root { right: calc(var(--qac-w) + 32px); }
#qa-agent { position: fixed; top: 16px; right: 16px; bottom: 16px; width: var(--qac-w); z-index: 700; box-sizing: border-box; display: flex; flex-direction: column;
  border-radius: 18px; border: 1px solid var(--qac-edge); background: var(--qac-glass); color: var(--qac-ink); font: 400 var(--qac-b)/1.45 Inter, Arial, sans-serif;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45); overflow: hidden; animation: qac-slide 220ms cubic-bezier(0.22, 1, 0.36, 1); }
#qa-agent[hidden], #qa-agent [hidden], .qac-hl[hidden], .qac-chip[hidden] { display: none !important; }
@keyframes qac-slide { from { transform: translateX(calc(100% + 16px)); } to { transform: none; } }
@keyframes qac-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes qac-breath { 0%, 100% { opacity: .25; } 50% { opacity: .75; } }
#qa-agent button { font: inherit; color: inherit; cursor: pointer; }

/* head: title, the three tools, the status light */
#qa-agent .qac-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 16px 18px 12px 22px; border-bottom: 1px solid var(--qac-edge); }
#qa-agent .qac-ttl h2 { margin: 0; font: 700 var(--qac-t)/1.2 Inter, Arial, sans-serif; letter-spacing: .01em; }
#qa-agent .qac-ttl p { margin: 3px 0 0; color: var(--qac-mute); font-size: var(--qac-c); }
#qa-agent .qac-tools { display: flex; gap: 6px; align-self: start; }
#qa-agent .qac-tools button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--qac-edge); background: transparent; }
#qa-agent .qac-tools button:hover, #qa-agent .qac-tools button:focus-visible { border-color: var(--qac-cyan); outline: none; }
#qa-agent .qac-tools svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#qa-agent .qac-status { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font: 600 var(--qac-c)/1.3 Inter, Arial, sans-serif; color: var(--qac-mute); }
#qa-agent .qac-status i { width: 10px; height: 10px; border-radius: 50%; background: #8A97AD; flex: 0 0 auto; }
#qa-agent .qac-status[data-s="ai"] { color: var(--qac-cyan); } #qa-agent .qac-status[data-s="ai"] i { background: var(--qac-cyan); box-shadow: 0 0 10px rgba(98, 216, 245, .7); }
#qa-agent .qac-status[data-s="slow"], #qa-agent .qac-status[data-s="wait"] { color: var(--qac-amber); } #qa-agent .qac-status[data-s="slow"] i, #qa-agent .qac-status[data-s="wait"] i { background: var(--qac-amber); }
#qa-agent .qac-status[data-s="hand"] { color: var(--qac-warm); } #qa-agent .qac-status[data-s="hand"] i { background: var(--qac-warm); }

/* the conversation */
#qa-agent .qac-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
#qa-agent .qac-hello p { margin: 4px 0 14px; font-size: var(--qac-b); color: var(--qac-ink); }
#qa-agent .qac-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#qa-agent .qac-quick button { min-height: 52px; padding: 10px 14px; text-align: left; border-radius: 12px; border: 1px solid var(--qac-edge); background: var(--qac-card); font-weight: 600; }
#qa-agent .qac-quick button:hover, #qa-agent .qac-quick button:focus-visible { border-color: var(--qac-cyan); outline: none; }
#qa-agent .qac-turn { display: flex; flex-direction: column; gap: 10px; }
#qa-agent .qac-q { align-self: flex-end; max-width: 86%; margin: 0; padding: 10px 14px; border-radius: 14px 14px 4px 14px; border: 1px solid rgba(244, 181, 140, .55);
  background: rgba(244, 181, 140, .10); color: var(--qac-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
#qa-agent .qac-card { box-sizing: border-box; padding: 14px 16px 12px; border-radius: 14px; border: 1px solid var(--qac-edge); background: var(--qac-card); overflow-wrap: anywhere; }
#qa-agent .qac-card.in { animation: qac-in 200ms ease-out; }
#qa-agent .qac-card.amber { border-color: rgba(240, 166, 58, .7); background: rgba(240, 166, 58, .07); }
#qa-agent .qac-card.extra { border-style: dashed; }
#qa-agent .qac-card.back { border-color: var(--qac-cyan); }
#qa-agent .qac-card.busy { padding: 10px 14px; border-style: dashed; }
#qa-agent .qac-card header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; }
#qa-agent .qac-card h3 { grid-column: 1; margin: 0; font: 700 var(--qac-t)/1.25 Inter, Arial, sans-serif; text-wrap: balance; }
#qa-agent .qac-how { grid-column: 1 / -1; font: 700 var(--qac-c)/1.2 Inter, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--qac-cyan); }
#qa-agent .qac-how[data-h="local"], #qa-agent .qac-how[data-h="quick"], #qa-agent .qac-how[data-h="rel"] { color: var(--qac-mute); }
#qa-agent .qac-how[data-h="hand"] { color: var(--qac-warm); }
#qa-agent .qac-st { grid-column: 2; grid-row: 2; align-self: center; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; font: 600 var(--qac-c)/1.3 Inter, Arial, sans-serif; white-space: nowrap; }
#qa-agent [data-t="data"] { color: var(--qac-cyan); } #qa-agent [data-t="person"] { color: var(--qac-warm); } #qa-agent [data-t="amber"] { color: var(--qac-amber); } #qa-agent [data-t="plain"] { color: var(--qac-ink); }
#qa-agent .qac-k { margin: 12px 0 4px; font: 700 var(--qac-c)/1.3 Inter, Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--qac-mute); }
#qa-agent .qac-claim { margin: 0; font-size: var(--qac-b); font-weight: 600; }
#qa-agent .qac-pts { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
#qa-agent .qac-nums { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#qa-agent .qac-num { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--qac-edge); background: rgba(98, 216, 245, .07); font: 600 var(--qac-c)/1.35 Inter, Arial, sans-serif; font-variant-numeric: tabular-nums; }
#qa-agent .qac-num:hover, #qa-agent .qac-num:focus-visible { border-color: var(--qac-cyan); outline: none; }
#qa-agent .qac-numsrc { margin: 6px 0 0; font-size: var(--qac-c); color: var(--qac-mute); }
#qa-agent .qac-src { margin: 12px 0 0; font-size: var(--qac-c); color: var(--qac-mute); }
#qa-agent .qac-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#qa-agent .qac-acts button { padding: 7px 12px; border-radius: 9px; border: 1px solid var(--qac-edge); background: transparent; font: 600 var(--qac-c)/1.3 Inter, Arial, sans-serif; }
#qa-agent .qac-acts button:hover, #qa-agent .qac-acts button:focus-visible { border-color: var(--qac-cyan); color: var(--qac-cyan); outline: none; }
#qa-agent .qac-rel { display: flex; flex-wrap: wrap; gap: 8px; }
#qa-agent .qac-rel button { max-width: 100%; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--qac-edge); background: var(--qac-card); text-align: left; font-size: var(--qac-c); }
#qa-agent .qac-rel button:hover, #qa-agent .qac-rel button:focus-visible { border-color: var(--qac-cyan); outline: none; }
#qa-agent .qac-steps { margin-top: 12px; font-size: var(--qac-c); color: var(--qac-mute); }
#qa-agent .qac-steps summary { cursor: pointer; }
#qa-agent .qac-steps ol, #qa-agent .qac-live { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: var(--qac-c); color: var(--qac-mute); }
#qa-agent .qac-live { margin: 0; }
#qa-agent .qac-steps li, #qa-agent .qac-live li { display: flex; justify-content: space-between; gap: 12px; }
#qa-agent .qac-steps li em, #qa-agent .qac-live li em { font-style: normal; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
#qa-agent .qac-live li:last-child { color: var(--qac-ink); }
#qa-agent .qac-pick { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
#qa-agent .qac-pick button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--qac-edge); background: transparent; text-align: left; }
#qa-agent .qac-pick i, #qa-agent .qac-sug i { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--qac-mute); font: 700 var(--qac-c) Inter, Arial, sans-serif; font-style: normal; }
#qa-agent .qac-pick span, #qa-agent .qac-sug span { flex: 1; min-width: 0; }
#qa-agent .qac-wf { display: grid; gap: 8px; margin-top: 12px; }
#qa-agent .qac-wf label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1.2fr) 84px; align-items: center; gap: 10px; font-size: var(--qac-c); }
#qa-agent .qac-wf small { color: var(--qac-mute); }
#qa-agent .qac-wf input[type=range] { width: 100%; accent-color: var(--qac-cyan); }
#qa-agent .qac-wf input[type=number] { width: 100%; box-sizing: border-box; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--qac-edge); background: rgba(255, 255, 255, .06); color: var(--qac-ink); font: 600 var(--qac-c) Inter, Arial, sans-serif; }
#qa-agent .qac-wf input.bad { border-color: var(--qac-amber); }
#qa-agent .qac-out { margin-top: 12px; }
#qa-agent .qac-big { display: block; font: 800 calc(var(--qac-t) + 6px)/1.2 Inter, Arial, sans-serif; color: var(--qac-cyan); }
#qa-agent .qac-delta { display: block; margin-top: 2px; font-size: var(--qac-c); color: var(--qac-mute); }
#qa-agent .qac-out ul { margin: 8px 0 0; padding-left: 20px; font-size: var(--qac-c); }
#qa-agent .qac-note { margin: 8px 0 0; font-size: var(--qac-c); color: var(--qac-mute); }

/* the field, its suggestions, the fixed label */
#qa-agent .qac-dock { position: relative; padding: 10px 16px 10px; border-top: 1px solid var(--qac-edge); }
#qa-agent .qac-field textarea { display: block; width: 100%; box-sizing: border-box; min-height: 52px; max-height: 120px; padding: 12px 14px; resize: none; overflow-y: auto; border-radius: 12px;
  border: 1.5px solid var(--qac-edge); outline: none; background: rgba(255, 255, 255, .06); color: var(--qac-ink); font: 500 var(--qac-in)/1.35 Inter, Arial, sans-serif; }
#qa-agent .qac-field textarea::placeholder { color: var(--qac-mute); font-size: max(14px, calc(var(--qac-in) - 3px)); }
#qa-agent .qac-field textarea:focus { border-color: var(--qac-cyan); }
#qa-agent.choosing .qac-field textarea { border-style: dashed; }
#qa-agent .qac-sug { position: absolute; left: 16px; right: 16px; bottom: calc(100% - 4px); margin: 0; padding: 6px; list-style: none; display: grid; gap: 4px; border-radius: 12px;
  border: 1px solid var(--qac-edge); background: rgba(9, 16, 36, .98); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); }
#qa-agent .qac-sug li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: var(--qac-b); }
#qa-agent .qac-sug li.sel, #qa-agent .qac-sug li:hover { background: rgba(98, 216, 245, .14); }
#qa-agent .qac-sug .qac-st, #qa-agent .qac-pick .qac-st { flex: 0 0 auto; }
#qa-agent .qac-foot { margin: 8px 2px 0; font: 600 var(--qac-c)/1.3 Inter, Arial, sans-serif; color: var(--qac-mute); }

/* connecting to the model */
#qa-agent .qac-lock { position: absolute; left: 24px; right: 24px; top: 96px; z-index: 2; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--qac-cyan); background: rgba(6, 11, 26, .99); box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
#qa-agent .qac-lock h3 { margin: 0 0 6px; font: 700 var(--qac-t)/1.2 Inter, Arial, sans-serif; }
#qa-agent .qac-lock p { margin: 0 0 10px; font-size: var(--qac-c); color: var(--qac-mute); }
#qa-agent .qac-code { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--qac-edge); outline: none; background: rgba(255, 255, 255, .06);
  color: var(--qac-ink); font: 600 var(--qac-in) Inter, Arial, sans-serif; -webkit-text-security: disc; }
#qa-agent .qac-code:focus { border-color: var(--qac-cyan); }
#qa-agent .qac-lockmsg { min-height: 1.3em; margin: 8px 0 0 !important; color: var(--qac-amber) !important; }
#qa-agent .qac-row { display: flex; gap: 10px; }
#qa-agent .qac-row button { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--qac-edge); background: transparent; font-weight: 600; }
#qa-agent .qac-row button.pri { border-color: var(--qac-cyan); color: var(--qac-cyan); }

/* on the stage: the frame around the evidence and its source chip */
.qac-hl { position: fixed; z-index: 690; box-sizing: border-box; pointer-events: none; border: 3px solid var(--qac-cyan); border-radius: 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 0 24px rgba(98, 216, 245, .35); }
.qac-chip { position: fixed; z-index: 691; max-width: 60vw; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--qac-cyan); background: rgba(7, 13, 30, .95); color: var(--qac-ink);
  font: 600 15px/1.3 Inter, Arial, sans-serif; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qac-chip[data-t="amber"] { border-color: var(--qac-amber); } .qac-chip[data-t="person"] { border-color: var(--qac-warm); }

/* the round button, bottom right, with a slow cyan breath; hidden while the panel is open (its own head closes it) */
#qa-agent-btn { position: fixed; right: 22px; bottom: 22px; z-index: 701; width: 62px; height: 62px; border-radius: 50%; border: 1.5px solid var(--qac-cyan); background: rgba(7, 13, 30, .92);
  color: var(--qac-ink); display: grid; place-items: center; align-content: center; gap: 0; cursor: pointer; font: 700 13px/1.1 Inter, Arial, sans-serif; }
#qa-agent-btn::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 22px 6px rgba(98, 216, 245, .55); animation: qac-breath 3s ease-in-out infinite; pointer-events: none; }
#qa-agent-btn small { font: 600 12px Inter, Arial, sans-serif; color: var(--qac-mute); }
#qa-agent-btn[hidden] { display: none; }
body.qac-on #qa-agent-btn { opacity: 0; pointer-events: none; }

/* projector mode (key C): opaque, brighter, every text ≥ 7:1 */
body.proj #qa-agent { background: #03060F; --qac-mute: #DCE4F0; --qac-ink: #FFFFFF; --qac-edge: rgba(200, 220, 255, .45); --qac-card: rgba(255, 255, 255, .06); }
body.proj #qa-agent .qac-sug { background: #050A18; }
body.proj .qac-chip { background: #03060F; color: #FFFFFF; }

/* 1366 and smaller: nothing under 14 px, a tighter head */
@media (max-width: 1500px) { #qa-agent .qac-head { padding: 12px 14px 10px 18px; } #qa-agent .qac-log { padding: 12px 16px 14px; } #qa-agent .qac-quick button { min-height: 46px; } }