:root {
  --bg: #0f1115; --panel: #171a21; --panel2: #1e222b; --line: #2a2f3a; --text: #e7e9ee; --muted: #8b93a3;
  --accent: #5b9cff; --ok: #3fbf7f; --warn: #e0a83a; --bad: #e0625a;
  --feel: #b07cff; --manner: #3fb6c8; --sound: #e8a33d; --jev: #5b9cff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif; }
header { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 55px;
  padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
h1 { font-size: 18px; margin: 0 12px 0 0; display: inline; white-space: nowrap; }
/* the header keeps one line whatever the status says: the controls never wrap or shrink, and the
   models' line gives way (cut with …) when the window is narrow */
.title { display: flex; align-items: baseline; flex: 1 1 auto; min-width: 0; overflow: hidden; }
#models { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.controls > * { white-space: nowrap; flex-shrink: 0; }
.check { color: var(--muted); font-size: 13px; cursor: pointer; }
button { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 14px; font: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.status { min-width: 8.5em; text-align: center; padding: 3px 10px; border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 13px; }
.status.on { color: var(--ok); }
.status.err { color: var(--bad); }

main { display: grid; grid-template-columns: minmax(360px, 40%) 1fr; height: calc(100% - 55px); }
.left { position: relative; border-right: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.table { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
details.table summary { cursor: pointer; color: var(--muted); }
/* the table's text grows with the window's height, as large as its 19 rows fit under the drawer's
   head (about 19px at 950 px high, 22px from about 1090 px, 14px at 768 px) */
table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: clamp(14px, calc((100vh - 190px) / 29.25 - 7px), 22px); }
td, th { padding: 4px 10px; border-bottom: 1px solid var(--line); text-align: left; }
/* the table takes the left's height, its rows spread over it */
.tablebox { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.tablebox #table { flex: 1 1 auto; }
th { font-size: 13px; }
#table .kind { font-size: 14px; }
/* the rules fold into one line, so the table takes the height */
.rulesbox { flex: 0 0 auto; padding: 6px 12px; }
.rulesbox > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.rulesbox[open] > summary { margin-bottom: 4px; }
#table tr[data-desc] { cursor: help; }
.tip { position: fixed; z-index: 10; max-width: 340px; padding: 6px 10px; border-radius: 8px; background: #2b3140;
  color: var(--text); font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.4); pointer-events: none; }
th { color: var(--muted); font-weight: 500; }
tr.cur td { background: rgba(176, 124, 255, .18); }
td.desc { color: var(--muted); font-size: 12px; }

.right { display: flex; flex-direction: column; min-height: 0; }
.log { flex: 1; overflow: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.guide { margin: 12px 18px 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 4px 16px 8px; color: #c9cdd6; max-height: 45%; overflow: auto; }
.guide h3 { font-size: 13px; color: var(--muted); margin: 10px 0 4px; font-weight: 600; }
.guide ol, .guide ul { margin: 0; padding-left: 20px; }
.guide li { margin: 2px 0; }
.guide b { color: var(--text); }
.guide code { font-size: 12px; background: var(--bg); padding: 0 4px; border-radius: 4px; }
.guide .thmark { display: inline-block; width: 2px; height: 12px; background: var(--warn); vertical-align: middle; }
#guide-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.say { display: flex; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--panel); }
.say input { flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: inherit; }

/* the person's words and the reply's: bubbles of one size; the sentences' cards stand out under them */
.user { align-self: flex-end; max-width: 75%; background: #24406e; border-radius: 12px 12px 2px 12px; padding: 8px 12px; font-size: 15px; }
.user .who, .reply .who { font-size: 11px; color: var(--muted); display: block; }
.reply { display: flex; flex-direction: column; }
.reply .bubble { align-self: flex-start; max-width: 75%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px 12px 12px 2px; padding: 8px 12px; font-size: 15px; }
.reply .raw { white-space: pre-wrap; }
.sys { color: var(--muted); font-size: 12px; text-align: center; }
.sys.err { color: var(--bad); }

.card { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; background: var(--panel2); transition: border-color .3s, box-shadow .3s; }
.card.speaking { border-left-color: var(--feel); box-shadow: 0 0 0 1px var(--feel) inset; }
/* a sentence already said steps back: dimmed, clear again on hover */
.card.said { opacity: .5; transition: opacity .3s; }
.card.said:hover, .card.said.open { opacity: 1; }
.card .head { display: flex; justify-content: space-between; gap: 8px; }
.card .line { font-size: 18px; line-height: 1.6; }
.card .line .tag { font-size: 15px; vertical-align: 1px; }
/* the other options show with the card's dropdown open */
.card:not(.open) .bar:not(.top) { display: none; }
.card:not(.open) .bar.top { margin-bottom: 0; }
details.more { margin-top: 2px; font-size: 13px; }
details.more > summary { cursor: pointer; color: var(--muted); padding: 2px 0; }
details.more > summary:hover { color: var(--text); }
details.more .label { color: var(--muted); font-size: 11px; display: block; margin-top: 6px; }
details.more .state pre { white-space: pre-wrap; background: var(--bg); padding: 6px; border-radius: 6px; margin: 4px 0; font-size: 12px; }
.card .n { color: var(--muted); margin-right: 6px; }
.card .ms { color: var(--muted); font-size: 12px; white-space: nowrap; }
/* Jev's answers: one frame in Jev's own color, its name and its timing on top */
.jevbox { margin: 10px 0 8px; border: 1px solid rgba(91,156,255,.45); border-radius: 10px;
  background: linear-gradient(180deg, rgba(91,156,255,.10), rgba(91,156,255,.03) 48px); padding: 8px 8px 8px; }
.jevhead { display: flex; align-items: center; gap: 8px; margin: 0 2px 8px; }
.jevchip { background: var(--jev); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 5px; }
.jevwhat { font-size: 14px; font-weight: 600; color: #cfe0ff; }
.jevmeta { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.q { --c: var(--feel); background: var(--bg); border-radius: 8px; padding: 8px 10px 9px; border-top: 2px solid var(--c); }
.q.manner { --c: var(--manner); }
.q.sound { --c: var(--sound); }
.q .qn { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
/* what Jev chose: large, in its question's color; a choice under the threshold is struck and gray */
.pick { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 8px; }
.pick .pv { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--c); }
.pick .pc { font-size: 13px; color: var(--text); opacity: .85; }
.q.rejected .pick .pv { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.badge { font-size: 11px; padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.badge.ok { background: rgba(63,191,127,.18); color: var(--ok); }
.badge.rej { background: rgba(224,168,58,.16); color: var(--warn); }
/* the probabilities: the first is read, the rest are there to compare (clear on hover) */
.bar { display: grid; grid-template-columns: 76px 1fr 34px; align-items: center; gap: 6px; font-size: 11px; margin-top: 3px;
  opacity: .38; transition: opacity .15s; }
.q:hover .bar { opacity: .8; }
.bar .track { position: relative; height: 5px; background: var(--panel2); border-radius: 3px; }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--muted); border-radius: 3px; }
.bar .th { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--warn); border-radius: 1px; }
.bar .p { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar.top { opacity: 1; font-size: 13px; margin: 4px 0 6px; }
.bar.top span:first-child { font-weight: 600; }
.bar.top .track { height: 10px; border-radius: 5px; }
.bar.top .fill { background: var(--c); border-radius: 5px; }
.bar.top .p { color: var(--text); }
.q.rejected .bar.top .fill { background: var(--muted); }
.why { margin: 4px 0; padding-left: 18px; font-size: 13px; }
.why li { color: #c9cdd6; }
.sent { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; background: var(--bg);
  border-radius: 6px; padding: 6px 8px; margin-top: 4px; white-space: pre-wrap; }
.sent .label { color: var(--muted); font-family: inherit; font-size: 11px; display: block; }
.tag { border-radius: 4px; padding: 0 4px; font-weight: 600; }
.tag.feel { background: rgba(176,124,255,.25); color: #d6bcff; }
.tag.manner { background: rgba(63,182,200,.22); color: #8fe3ef; }
.tag.sound { background: rgba(232,163,61,.22); color: #f5cd8c; }
.missed { color: var(--warn); font-size: 13px; }
details.state { font-size: 12px; color: var(--muted); }
details.state pre { white-space: pre-wrap; background: var(--bg); padding: 6px; border-radius: 6px; margin: 4px 0; color: var(--text); }
select { background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; }

/* one answer: what Jev chose on the left, its probabilities on the right */
.q.one { display: grid; grid-template-columns: minmax(200px, 36%) 1fr; gap: 6px 18px; align-items: center; }
.q.one .pick { margin-bottom: 0; }
.q.one .pick .pv { font-size: 26px; }
.q.one .barside .bar.top { margin: 0; }
.card.open .q.one { align-items: start; }
/* what lian called an option */
.kind { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--panel2); color: var(--muted); white-space: nowrap; }
.kind.manner { color: #9fd9e3; }
.kind.sound { color: #f2c27a; }

.now { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.now .nm { color: var(--feel); font-size: 18px; }
.now .flash { animation: flash .7s; }
@keyframes flash { from { filter: brightness(1.8); } to { filter: none; } }
/* one notice at a time, over the input: each replaces the last */
/* as bright as the sentence being heard: its purple edge and full text color */
.notice { min-height: 32px; padding: 6px 18px 6px 15px; font-size: 14px; color: var(--text); border-top: 1px solid var(--line);
  border-left: 3px solid var(--feel); background: rgba(176, 124, 255, .12); opacity: 0; transition: opacity .25s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice::before { content: "ⓘ "; color: var(--feel); font-weight: 700; }
.notice.show { opacity: 1; }

/* the face, large, filling the left; what it shows now under it */
.face { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  background: #101216; padding: 16px; min-height: 0; }
.face canvas { display: block; width: 100%; max-width: 720px; height: auto; max-height: calc(100% - 50px); object-fit: contain; }
.face .now { font-size: 16px; }
.face .now .nm { font-size: 24px; }
/* the table of choices: a tab on the left opens it over the face */
.drawer-tab { position: absolute; top: 12px; left: 12px; z-index: 6; border-color: var(--feel); color: #d6bcff; background: rgba(176,124,255,.12); }
.drawer-tab[aria-expanded="true"] { display: none; }
.drawer { position: absolute; inset: 0; z-index: 5; background: var(--panel); display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.drawer[hidden] { display: none; }
.drawer-head { display: flex; align-items: center; gap: 10px; }
.drawer-head .spacer { flex: 1; }
.drawer-head button { padding: 4px 10px; }
.drawer .tablebox { min-height: 0; overflow: auto; }
#table .extra { display: none; }
#table.show-extra .extra { display: table-cell; }
#table .face-cell { width: 1%; }
/* a small screen of the face, as tall as a line of the table */
.eyegif { display: block; height: 1.45em; width: auto; border-radius: 5px; border: 1px solid var(--line); }
/* a card's Jev box under its JEV line */
details.jevdrop > summary { cursor: pointer; font-size: 13px; padding: 4px 0 0; list-style-position: inside; }
details.jevdrop > summary .jevchip { font-size: 10px; padding: 1px 6px; }
details.jevdrop[open] > summary { margin-bottom: 2px; }
.card.said.jev { opacity: 1; }

/* a lookup through lian's agent: what was asked, how long it took, what came back */
.agentcard { align-self: flex-start; max-width: 85%; border: 1px dashed #3a8c7a; border-radius: 10px; padding: 6px 10px;
  background: rgba(63,191,127,.06); font-size: 14px; }
.agentcard .ah { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.agentcard .aq { color: var(--text); }
.agentcard .ams { font-size: 12px; }
.agentcard .aa { font-size: 13px; margin-top: 2px; white-space: pre-wrap; }
.agentcard.failed { border-color: var(--bad); }

/* a delegated answer's badge, in the bubble's head; what the lookup did opens under the bubble */
.agentbadge { font-size: 11px; font-weight: 700; color: #7fe0b5; border: 1px solid #3a8c7a; background: rgba(63,191,127,.08);
  border-radius: 5px; padding: 0 7px; margin-left: 4px; cursor: pointer; vertical-align: 1px; }
.agentbadge[aria-expanded="true"] { background: rgba(63,191,127,.22); }
.reply .agentcard { margin-top: 6px; }

/* a delegated answer's first card: its badge at the top left, over the card's edge */
.card.delegated { position: relative; margin-top: 16px; }
.card.delegated > .agentbadge { position: absolute; top: -10px; left: 10px; margin: 0; background: #12241f; }
.card.delegated > .agentbadge[aria-expanded="true"] { background: #1d3a31; }