/* Liza on the web.
   Every screen is laid out on the device's own 800x480 canvas, in the same
   pixel positions ui.py uses, and the whole stage is scaled to fit the window.
   That is what makes it look like the device rather than "a website like it". */

:root {
  --bg: #F3F5FD;
  --frame: #E1E5F4;
  --card: #FFFFFF;
  --card-edge: #EAEDF8;
  --shadow: #B4BCDD;
  --text: #1E2233;
  --text-dim: #8891A8;
  --text-faint: #B6BDD0;
  --track: #E6E9F5;
  --indigo: #6366F1;
  --stop: #F43F5E;
  --tutor: #7C3AED;
  --cotell: #14B8A6;
  --retell: #F59E0B;
  --navy: #17408B;
  --paper: #FFFDF5;
  --paper-edge: #E7D9B0;
  --paper-rule: #F1E6C8;
  --ink-soft: #5B6B8C;
  --good: #16A34A;
  --miss: #FCA5A5;
  --picked: #FDE68A;
  --card-blue: #C7D2FE;
  --page-bg: #7DC3F5;
  --font: "Noto Sans", "Noto Sans Devanagari", system-ui, sans-serif;
}

/* The page around the stage. Always the garden sky, light or dark mode: the
   device has one look, and the stage fills almost all of the window anyway. */
html, body {
  margin: 0;
  height: 100%;
  background: #0f172a;
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

#viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #1e293b 0%, #0f172a 75%);
}

/* The stage takes the window's own shape (fitStage sets --w/--h); each screen
   keeps the device's 800x480 layout in the middle of it, and its picture
   carries on into the extra space, so there are no black bars. */
#stage {
  position: relative;
  width: var(--w, 800px);
  height: var(--h, 480px);
  flex: none;
  overflow: hidden;
  transform-origin: center center;
  background: var(--bg);
}

#rotate-hint {
  display: none;
  position: fixed;
  left: 16px; right: 16px; bottom: 24px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  color: var(--text);
  font: 600 14px var(--font);
  text-align: center;
}
@media (orientation: portrait) and (max-width: 700px) {
  #rotate-hint { display: block; }
}

.screen {
  position: absolute;
  left: var(--padx, 0px); top: var(--pady, 0px);
  width: 800px; height: 480px;
  isolation: isolate;
}
/* Behind every screen: the same picture blurred out to the window's edges,
   then the picture itself exactly where the device draws it, its edges faded
   into the blur. */
.screen::before, .screen::after { content: ""; position: absolute; pointer-events: none; }
.screen::before {
  inset: calc(-1 * var(--pady, 0px) - 30px) calc(-1 * var(--padx, 0px) - 30px);
  background: var(--tint, linear-gradient(transparent, transparent)), var(--scene, none) center / cover no-repeat;
  filter: blur(14px) saturate(1.05);
  z-index: -2;
}
.screen::after {
  inset: 0;
  background: var(--tint, linear-gradient(transparent, transparent)), var(--scene, none) center / 800px 480px no-repeat;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fadex, 0px), #000 calc(100% - var(--fadex, 0px)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fadey, 0px), #000 calc(100% - var(--fadey, 0px)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--fadex, 0px), #000 calc(100% - var(--fadex, 0px)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--fadey, 0px), #000 calc(100% - var(--fadey, 0px)), transparent 100%);
  mask-composite: intersect;
  z-index: -1;
}
.abs { position: absolute; }
.bg-garden { --scene: url(../assets/ui/home/garden.webp); }
.bg-class { --scene: url(../assets/ui/kg/class_bg.webp); }
.tap { cursor: pointer; }
.tap:active { transform: translateY(1px) scale(.985); }
img { -webkit-user-drag: none; user-select: none; }
button { font-family: var(--font); }

/* ---------- toast ---------- */
.toast {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  max-width: 600px;
  padding: 8px 16px;
  border-radius: 14px;
  background: rgba(30,34,51,.9);
  color: #fff;
  font: 600 13px var(--font);
  z-index: 50;
  pointer-events: none;
  transition: opacity .3s;
}

/* ---------- glass screens (profiles, KG) ---------- */
.glass {
  position: absolute;
  left: 20px; top: 20px; right: 20px; bottom: 20px;
  border-radius: 14px;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(255,255,255,.75);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font: 700 27px var(--font);
  color: var(--text);
  letter-spacing: .2px;
}
.subtitle {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font: 400 13px var(--font);
  color: var(--text-dim);
}
.pill-btn {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  font: 700 15px var(--font);
  color: var(--text);
  background: #E8EAF6;
  box-shadow: 0 2px 4px rgba(30,34,51,.18);
  cursor: pointer;
  padding: 0;
}
.pill-btn small { font-weight: 400; font-size: 10.5px; opacity: .92; margin-top: 1px; }
.pill-btn.white { background: #fff; }
.pill-btn.navy { background: #00338D; color: #fff; }
.pill-btn:disabled { opacity: .45; cursor: default; }
.pill-btn:active:not(:disabled) { transform: translateY(1px); }

/* ---------- profile picker ---------- */
.who-card {
  position: absolute;
  width: 214px; height: 72px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(30,34,51,.22);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.who-card.current { background: #FAFDCB; }
.who-card img { width: 62px; height: 62px; margin-left: 5px; border-radius: 50%; }
.who-card .who-name { font: 700 18px var(--font); color: var(--tutor); line-height: 1.15; }
.who-card .who-name.kg { color: #F59E0B; }
.who-card .who-class { font: 400 12px var(--font); color: var(--text-dim); }
.who-card .who-text { margin-left: 8px; overflow: hidden; }
.who-card .who-demo {
  position: absolute; right: 8px; top: 6px;
  font: 700 9px var(--font); color: var(--text-dim); letter-spacing: .5px;
}
.who-card .who-edit {
  position: absolute; right: 6px; bottom: 6px;
  border: none; border-radius: 8px; padding: 3px 8px;
  font: 700 11px var(--font); background: #EEF0FA; color: var(--text); cursor: pointer;
}

/* ---------- new student keyboard ---------- */
.name-box {
  position: absolute;
  left: 40px; top: 84px; width: 720px; height: 40px;
  border-radius: 8px;
  background: #fff;
  font: 600 17px var(--font);
  display: flex; align-items: center;
  padding: 0 14px;
  box-sizing: border-box;
  color: var(--text);
}
.name-box.empty { color: #A7B0C8; }
.name-box input {
  border: none; outline: none; background: transparent; width: 100%;
  font: 600 17px var(--font); color: var(--text);
}
.key {
  position: absolute;
  height: 43px;
  border: none;
  border-radius: 5px;
  background: #fff;
  font: 600 15px var(--font);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(30,34,51,.15);
  cursor: pointer;
}
.key.small { font-size: 12.5px; font-weight: 700; }
.key.on { background: #00338D; color: #fff; }
.key.soft { background: #E8EAF6; }
.section-label {
  position: absolute;
  font: 700 11px var(--font);
  color: #1E3A8A;
  letter-spacing: .4px;
}

/* ---------- home ---------- */
.card-img { position: absolute; }
.clock-time { font: 700 19px var(--font); color: var(--text); }
.clock-time small { font-size: 11px; font-weight: 700; margin-left: 2px; }
.clock-line { font: 400 9.5px var(--font); color: #101F31; white-space: nowrap; }
.weather-temp { font: 700 20px var(--font); color: var(--text); }
.weather-line { font: 400 9.5px var(--font); color: #101F31; white-space: nowrap; text-align: center; }

.who-chip-name { font: 700 15px var(--font); color: var(--text); }
.who-chip-class { font: 400 12px var(--font); color: var(--text); }

.music-btn {
  position: absolute; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.music-title { font: 700 11px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; }
.music-track { position: absolute; height: 3px; border-radius: 2px; background: rgba(255,255,255,.85); }
.music-knob { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 2px rgba(0,0,0,.35); }

.state-pill {
  position: absolute;
  top: 96px;
  height: 20px;
  padding: 0 10px;
  border-radius: 4px;
  display: flex; align-items: center;
  font: 700 11px var(--font);
  letter-spacing: .6px;
  text-transform: uppercase;
  background: rgba(255,255,255,.88);
  transform: translateX(-50%);
  white-space: nowrap;
}

.modes-title {
  position: absolute; left: 14px; width: 159px; top: 133px;
  text-align: center;
  font: 800 16px var(--font);
  color: #1E2A55;
  letter-spacing: .3px;
}
.mode-card {
  position: absolute;
  width: 145px; height: 62px;
  border-radius: 9px;
  cursor: pointer;
}
.mode-card img { position: absolute; left: 0; top: 0; width: 145px; height: 62px; }
.mode-card .blurb-cover {
  position: absolute; left: 50px; top: 27px; width: 90px; height: 27px;
  background: #fff;
}
.mode-card .blurb {
  position: absolute; left: 52px; top: 28px;
  font: 400 11.5px var(--font); color: var(--text); white-space: nowrap;
}
.mode-card.on { box-shadow: 0 0 0 3px var(--accent), 0 0 12px var(--accent); }
.mode-card .check {
  position: absolute; right: -6px; top: -7px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff;
  display: none; align-items: center; justify-content: center;
}
.mode-card.on .check { display: flex; }

#mascot { position: absolute; }
.sleep-z {
  position: absolute; font: 800 22px var(--font); color: #8B5CF6;
  animation: zfloat 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes zfloat {
  0% { opacity: 0; transform: translate(0, 10px) scale(.7); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -26px) scale(1.15); }
}

.board-text {
  position: absolute;
  left: 470px; top: 158px; width: 298px; height: 196px;
  overflow-y: auto;
  scrollbar-width: thin;
  user-select: text; -webkit-user-select: text;
}
.board-label { font: 700 10.5px var(--font); color: var(--tutor); margin-top: 4px; }
.board-label.liza { color: #DB2777; }
.board-line { font: 400 14px/1.45 var(--font); color: #8891A8; margin: 3px 0 8px; white-space: pre-wrap; }
.board-line.user { color: var(--text); }
.board-line.liza { color: var(--text); }
.board-line .lit { background: #FEF3C7; border-radius: 3px; }
.board-status { font: 600 11.5px var(--font); color: var(--retell); margin: 2px 0 6px; }
.board-icon {
  position: absolute; width: 30px; height: 30px;
  border-radius: 7px; border: 1.5px solid #CBD2EA; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: #3B3F8F;
}
.board-icon.on { background: #EEF0FF; border-color: var(--indigo); }
.type-row {
  position: absolute; left: 464px; top: 330px; width: 310px; height: 34px;
  display: none; gap: 6px;
}
.type-row.on { display: flex; }
.type-row input {
  flex: 1; border: 1.5px solid #CBD2EA; border-radius: 9px; padding: 0 10px;
  font: 400 13.5px var(--font); outline: none; color: var(--text);
  user-select: text; -webkit-user-select: text;
}
.type-row input:focus { border-color: var(--indigo); }
.type-row button {
  border: none; border-radius: 9px; padding: 0 12px; background: var(--indigo); color: #fff;
  font: 700 12.5px var(--font); cursor: pointer;
}

.report {
  border: 1.5px solid #FCD34D; border-radius: 10px; background: #FFFBEB;
  padding: 8px 10px; margin: 6px 0 10px;
}
.report h4 { margin: 0 0 4px; font: 700 13px var(--font); color: var(--text); display: flex; justify-content: space-between; }
.report .score { color: #B45309; }
.report .row { font: 400 12px/1.4 var(--font); color: var(--text); margin: 2px 0; }
.report .row b { font-weight: 700; }
.report .row.good b { color: var(--good); }
.report .row.weak b { color: #DC2626; }
.report .row.focus b { color: #7C3AED; }

.big-btn { position: absolute; width: 154px; height: 69px; cursor: pointer; }
.big-btn img { width: 100%; height: 100%; }
.big-btn.dim { filter: saturate(.55) brightness(1.05); opacity: .8; }
.big-btn .label-cover { position: absolute; left: 62px; top: 42px; width: 86px; height: 16px; }
.exit-btn { position: absolute; left: 738px; top: 410px; width: 47px; height: 47px; cursor: pointer; }
.exit-confirm {
  position: absolute; right: 60px; top: 418px;
  padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.95);
  font: 600 12px var(--font); color: var(--stop); box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* ---------- full-screen overlays on the home screen ---------- */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(243,245,253,.97);
}
.overlay .bar {
  position: absolute; left: 0; right: 0; top: 0; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font: 700 19px var(--font); color: var(--text);
  border-bottom: 1px solid var(--card-edge); background: #fff;
}
.overlay .back {
  position: absolute; left: 12px; top: 9px; height: 34px; padding: 0 14px;
  border: none; border-radius: 9px; background: #E8EAF6; font: 700 13px var(--font);
  color: var(--text); cursor: pointer;
}
.overlay .side {
  position: absolute; right: 12px; top: 9px; height: 34px; padding: 0 14px;
  border: none; border-radius: 9px; background: #FFE4E6; font: 700 12px var(--font);
  color: #BE123C; cursor: pointer;
}
.overlay .scroll {
  position: absolute; left: 0; right: 0; top: 52px; bottom: 0;
  overflow-y: auto; padding: 12px 22px 18px;
  user-select: text; -webkit-user-select: text;
}
.chat-turn { margin: 0 0 10px; max-width: 78%; }
.chat-turn.user { margin-left: auto; text-align: right; }
.chat-turn .bubble {
  display: inline-block; padding: 8px 12px; border-radius: 14px;
  font: 400 14px/1.45 var(--font); text-align: left; white-space: pre-wrap;
}
.chat-turn.user .bubble { background: #E0E7FF; color: var(--text); border-bottom-right-radius: 4px; }
.chat-turn.liza .bubble { background: #fff; color: var(--text); border: 1px solid var(--card-edge); border-bottom-left-radius: 4px; }
.chat-turn .meta { font: 400 10px var(--font); color: var(--text-dim); margin: 2px 4px; }
.empty-note { text-align: center; color: var(--text-dim); font: 400 14px var(--font); margin-top: 60px; }
.prog-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 7px;
  background: #fff; border: 1px solid var(--card-edge); border-radius: 10px;
}
.prog-row .kind { font: 700 10px var(--font); letter-spacing: .5px; color: var(--indigo); text-transform: uppercase; width: 80px; }
.prog-row .topic { flex: 1; font: 600 13.5px var(--font); color: var(--text); }
.prog-row .detail { font: 400 11.5px var(--font); color: var(--text-dim); }
.prog-row .score { font: 700 14px var(--font); color: var(--good); }

/* ---------- KG home ---------- */
.kg-tile { position: absolute; width: 225px; height: 145px; border-radius: 10px; cursor: pointer; }
.kg-tile img { width: 100%; height: 100%; border-radius: 10px; }

/* ---------- the workbook (paper) ---------- */
.paper {
  position: absolute; left: 18px; top: 10px; width: 762px; height: 372px;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 0 0 3px var(--paper-edge), 0 4px 10px rgba(0,0,0,.25);
  background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--paper-rule) 33px 34px);
  background-position: 0 72px;
}
.paper .rings { position: absolute; left: 0; right: 0; top: -6px; height: 12px; }
.paper .ring {
  position: absolute; top: 0; width: 11px; height: 11px; border-radius: 50%;
  background: #C9D2E6; border: 1.5px solid #8291B3;
}
.paper-title {
  position: absolute; left: 0; right: 0; top: 10px; text-align: center;
  font: 700 25px var(--font); color: var(--navy);
}
.paper-sub {
  position: absolute; left: 0; right: 0; top: 45px; text-align: center;
  font: 400 12.5px var(--font); color: var(--ink-soft);
}
.paper-rule { position: absolute; left: 12px; right: 12px; top: 64px; height: 2px; background: var(--paper-edge); }
.wb-tile {
  position: absolute; width: 141px; height: 139px; border-radius: 8px;
  color: #fff; cursor: pointer; text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.wb-tile .disc {
  position: absolute; left: 41px; top: 12px; width: 60px; height: 60px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px;
}
.wb-tile .t { position: absolute; left: 0; right: 0; top: 84px; font: 700 14px var(--font); }
.wb-tile .s { position: absolute; left: 0; right: 0; top: 110px; font: 400 10.5px var(--font); opacity: .95; }
.paper-btn {
  position: absolute; height: 48px;
  border: none; border-radius: 10px; background: #fff;
  font: 800 15px var(--font); color: #1D4ED8; letter-spacing: .4px;
  box-shadow: 0 2px 5px rgba(0,0,0,.25); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.paper-btn.primary { background: #1E3A8A; color: #fff; }
.paper-btn:disabled { opacity: .5; cursor: default; }
.tri-left { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 11px solid #1D4ED8; }
.tri-right { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 11px solid #1D4ED8; }
.answer-btn {
  position: absolute; border: none; border-radius: 6px; background: #2563EB; color: #fff;
  font: 700 30px var(--font); cursor: pointer; box-shadow: 0 2px 3px rgba(0,0,0,.2);
}
.answer-btn.right { background: var(--good); }
.answer-btn.wrong { background: #F87171; }
.box {
  position: absolute; border: 3px solid var(--card-blue); border-radius: 8px; background: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center;
}
.sym { position: absolute; font: 700 34px var(--font); color: var(--navy); text-align: center; }
.wb-card {
  position: absolute; border: 3px solid var(--card-blue); border-radius: 10px; background: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font: 700 26px var(--font); color: var(--navy);
}
.wb-card.picked { background: var(--picked); border-color: #F59E0B; }
.wb-card.done { background: #DCFCE7; border-color: var(--good); cursor: default; }
.wb-card.miss { background: #FEE2E2; border-color: #F87171; }
.wb-card img { max-width: 80%; max-height: 80%; }
.slot {
  position: absolute; border: 2.5px dashed #A5B4FC; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 15px var(--font); color: var(--navy);
}
.slot.fixed { border-style: solid; border-color: var(--card-blue); color: var(--ink-soft); }
.slot.filled { border-style: solid; border-color: var(--good); background: #DCFCE7; }
.crayon {
  position: absolute; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.crayon.on { outline: 3px solid var(--navy); outline-offset: 3px; }
#colour-canvas { position: absolute; cursor: crosshair; touch-action: none; }

/* ---------- KG chalkboard activities ---------- */
.chalk-board {
  position: absolute; border-radius: 12px; background: #23523B;
  border: 8px solid #8B5A2B; box-shadow: inset 0 0 30px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.3);
  color: #FDEBA8; text-align: center;
}
.kg-letter { font: 800 150px/1 var(--font); color: #FDEBA8; }
.kg-word { font: 700 34px var(--font); color: #fff; }
.kg-pic { object-fit: contain; }
.kg-emoji { font-size: 110px; line-height: 1; }
.kg-btn {
  position: absolute; height: 52px; border: none; border-radius: 12px;
  background: #fff; color: var(--navy); font: 800 16px var(--font);
  box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer;
}
.kg-btn.primary { background: #17408B; color: #fff; }
.kg-btn.green { background: #16A34A; color: #fff; }
.kg-btn.red { background: #DC2626; color: #fff; }
.letter-tile {
  position: absolute; width: 64px; height: 64px; border-radius: 10px; border: none;
  background: #FDE68A; color: var(--navy); font: 800 32px var(--font);
  box-shadow: 0 3px 0 #D97706; cursor: pointer;
}
.letter-tile.used { visibility: hidden; }
.letter-slot {
  position: absolute; width: 64px; height: 64px; border-radius: 10px;
  border: 3px dashed #FDEBA8; color: #FDEBA8; font: 800 32px var(--font);
  display: flex; align-items: center; justify-content: center;
}
.letter-slot.filled { border-style: solid; background: rgba(253,235,168,.15); }
.story-line {
  position: absolute; left: 60px; right: 60px; top: 120px; bottom: 120px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 600 26px/1.45 var(--font); color: #fff;
}
.story-list { position: absolute; left: 40px; right: 40px; top: 86px; bottom: 84px; overflow-y: auto; }
.story-item {
  padding: 12px 16px; margin-bottom: 8px; border-radius: 10px; background: #fff;
  font: 700 16px var(--font); color: var(--navy); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.confetti { position: absolute; width: 8px; height: 12px; pointer-events: none; z-index: 60; }

/* The profile and KG screens are the same garden, paler: "coloured glass over
   the garden" (OVERLAY_TINT_ALPHA in ui.py). */
.wash { --tint: linear-gradient(rgba(243,245,253,.30), rgba(243,245,253,.30)); }

/* ---------- the 3D Explorer ---------- */
.offer-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 4px 0 8px; padding: 7px 10px; border-radius: 12px;
  border: 1.5px solid #A5B4FC; background: linear-gradient(135deg, #EEF2FF, #E0F2FE);
  color: #1E1B4B; cursor: pointer; text-align: left;
}
.offer-btn .offer-cube { font-size: 24px; }
.offer-btn b { display: block; font: 700 13px var(--font); color: #3730A3; }
.offer-btn small { display: block; font: 400 11.5px var(--font); color: #475569; }
.offer-btn:active { transform: translateY(1px); }
/* Outside the scaled stage, so the 3D view is sharp on a big screen. */
.holo-frame {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  border: 0; z-index: 100; background: #05070d;
}

/* ---------- the live camera on the Transcribe Board ---------- */
.board-icon.on { background: #DCFCE7; border-color: #16A34A; color: #166534; }
.cam-box {
  position: absolute; left: 468px; top: 156px; width: 302px; height: 202px;
  border-radius: 10px; overflow: hidden; display: none; background: #0f172a;
}
.cam-box.on { display: block; }
.type-row.on ~ .cam-box.on, .cam-box.on.short { height: 168px; }
.cam-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-video.mirror { transform: scaleX(-1); }
.cam-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 9px;
  background: linear-gradient(transparent, rgba(15,23,42,.85) 35%);
  color: #fff; font: 600 12.5px/1.35 var(--font); display: none;
  max-height: 60%; overflow: hidden;
}
.cam-caption.show { display: block; }
.cam-flip {
  position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.85); font: 700 16px var(--font); cursor: pointer;
}

/* ---------- the full-screen whiteboard ---------- */
.wb-overlay {
  position: absolute; inset: 0; z-index: 25;
  background: #EEF1FA;
}
.wb-title { font: 800 19px var(--font); color: #17408B; }
.wb-pen { border: 3px solid #fff; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.wb-pen.on { outline: 3px solid #17408B; outline-offset: 1px; }
.wb-tool {
  border: 1.5px solid #CBD2EA; border-radius: 8px; background: #fff; cursor: pointer;
  font: 700 12px var(--font); color: #1E2233;
}
.wb-tool.on { background: #FEF3C7; border-color: #F59E0B; }
.wb-close {
  border: none; border-radius: 9px; background: #FFE4E6; color: #BE123C;
  font: 800 16px var(--font); cursor: pointer;
}
.wb-canvas {
  background: #fff; border-radius: 10px; touch-action: none; cursor: crosshair;
  box-shadow: 0 0 0 1.5px #CBD2EA, 0 2px 8px rgba(30,34,51,.12);
}
.wb-side {
  background: #fff; border-radius: 10px; padding: 10px 12px; box-sizing: border-box;
  overflow-y: auto; box-shadow: 0 0 0 1.5px #CBD2EA;
  user-select: text; -webkit-user-select: text;
}
.wb-hint { font: 400 13px/1.45 var(--font); color: #8891A8; }
.wb-said { font: 600 11.5px var(--font); color: #7C3AED; margin-bottom: 5px; }
.wb-words { font: 400 13.5px/1.45 var(--font); color: #1E2233; }
.wb-solution {
  margin-top: 10px; padding: 8px 9px; border-radius: 9px;
  background: #F8FAFF; border: 1.5px solid #C7D2FE;
}
.wb-sol-title { font: 700 12.5px var(--font); color: #17408B; margin-bottom: 6px; }
.wb-step { display: flex; gap: 7px; margin: 5px 0; }
.wb-step-n {
  flex: none; width: 18px; height: 18px; border-radius: 50%; background: #6366F1; color: #fff;
  font: 700 10.5px/18px var(--font); text-align: center; margin-top: 2px;
}
.wb-expr { font: 700 14px var(--font); color: #1E2233; }
.wb-note { font: 400 11px var(--font); color: #5B6B8C; }
.wb-answer {
  margin-top: 7px; padding: 5px 8px; border-radius: 7px; background: #DCFCE7;
  font: 800 13px var(--font); color: #166534;
}
.wb-btn {
  border: none; border-radius: 12px; background: #fff; color: #17408B; cursor: pointer;
  font: 800 15px var(--font); box-shadow: 0 2px 5px rgba(0,0,0,.18);
}
.wb-btn.primary { background: #17408B; color: #fff; }
.wb-btn.speak { background: linear-gradient(#5AA7FF, #3D6FE8); color: #fff; }
.wb-btn.stop { background: #FFE4E6; color: #BE123C; }
.wb-status { display: flex; align-items: center; font: 700 12.5px var(--font); }

/* ---------- a picture on the Transcribe Board (ui.py show_visual) ---------- */
.bv-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.bv-backing { position: absolute; background: #fff; border-radius: 8px; }
.bv-frame {
  position: absolute; display: flex; align-items: center; justify-content: center;
  cursor: zoom-in;
}
.bv-frame img {
  max-width: calc(100% - 8px); max-height: calc(100% - 8px);
  padding: 4px; background: #fff; border: 1px solid #D8E0F0; border-radius: 10px;
}
.bv-expand {
  position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px #D8E0F0;
}
.bv-strip { position: absolute; display: flex; align-items: center; gap: 7px; padding-left: 8px; box-sizing: border-box; }
.bv-strip .bv-pip { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--track); }
.bv-strip .bv-pip.on { background: var(--indigo); }
.bv-strip .bv-step-name { margin-left: 4px; font: 700 9.5px var(--font); color: var(--indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-strip:not(.small) { gap: 12px; padding-left: 20px; }
.bv-strip:not(.small) .bv-pip { width: 18px; height: 18px; }
.bv-strip:not(.small) .bv-step-name { font-size: 17px; margin-left: 10px; }
.bv-big { position: absolute; inset: 0; z-index: 40; background: #0B1020; cursor: zoom-out; }
.bv-big-img { object-fit: contain; }
.bv-big-hint { text-align: center; font: 400 12px var(--font); color: #8891A8; }
.bv-close {
  border-radius: 50%; background: rgba(255,255,255,.12); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 15px var(--font);
}
/* ---------- the buttons along the foot of the board (ui.py show_offers) ---------- */
.bv-offer-strip { position: absolute; background: #fff; border-radius: 12px; }
.bv-offer {
  position: absolute; display: flex; align-items: center; gap: 6px;
  border: 2px solid var(--indigo); border-radius: 16px; background: #EEF2FF;
  padding: 0 8px 0 7px; cursor: pointer; text-align: left; overflow: hidden;
}
.bv-play {
  flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--indigo); position: relative;
}
.bv-play::after {
  content: ""; position: absolute; left: 8px; top: 6px;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #fff;
}
.bv-offer.compact .bv-play { width: 18px; height: 18px; }
.bv-offer.compact .bv-play::after { left: 6.5px; top: 4.5px; }
.bv-offer-words { display: flex; flex-direction: column; min-width: 0; }
.bv-offer-words b { font: 700 12.5px/1.15 var(--font); color: var(--indigo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-offer-words small { font: 400 10px/1.2 var(--font); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-offer.compact .bv-offer-words b { font-size: 11.5px; }
.bv-offer.compact .bv-offer-words small { font-size: 9px; }
.bv-offer:active { transform: translateY(1px); }

/* ---------- KG screens, as ui.py draws them ---------- */
.kg-t { position: absolute; pointer-events: none; }
.kg-btn2 {
  position: absolute; border: none; padding: 0; cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.kg-btn2:active { transform: translateY(1px); }
.kg-tri {
  position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.kg-tri.left { border-right: 11px solid var(--ink); }
.kg-tri.right { border-left: 11px solid var(--ink); }
.kg-glass {
  position: absolute; background: rgba(255,255,255,.62);
  border: 1.5px solid rgba(255,255,255,.9);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.kg-rr { position: absolute; }
.kg-emoji2 { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.kg-ring { position: absolute; border: 3px solid; border-radius: 50%; box-sizing: border-box; pointer-events: none; }
.kg-cross { position: absolute; height: 4px; background: #E11D48; border-radius: 2px; transform: rotate(45deg); pointer-events: none; }
.kg-num { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: #fff; }

/* ---------- progress (ui.py show_progress) ---------- */
.pv-card { position: absolute; background: #fff; border: 1px solid var(--card-edge); box-sizing: border-box; }
.pv-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; }
/* ---------- chats (ui.py show_chat_history) ---------- */
.ch-pane {
  position: absolute; background: #fff; border: 1px solid var(--card-edge); border-radius: 16px;
  box-sizing: border-box; padding: 6px; overflow-y: auto; scrollbar-width: thin;
  user-select: text; -webkit-user-select: text;
}
.ch-day { font: 700 10.5px var(--font); color: var(--text-dim); padding: 11px 10px 5px; letter-spacing: .4px; }
.ch-row { border-radius: 10px; padding: 8px 10px; margin: 0 8px 2px 2px; cursor: pointer; }
.ch-row.on { background: #EEF0FF; }
.ch-title { font: 700 13px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-meta { font: 400 10.5px var(--font); color: var(--text-dim); margin-top: 3px; }
.ch-heading { text-align: center; font: 700 10.5px var(--font); color: var(--text-dim); margin: 6px 0 12px; }
.ch-msg { display: flex; flex-direction: column; margin: 0 6px 10px; }
.ch-msg.mine { align-items: flex-end; }
.ch-msg.hers { align-items: flex-start; }
.ch-bubble { max-width: 74%; padding: 9px 11px; border-radius: 12px; font: 400 13px/1.45 var(--font); white-space: pre-wrap; }
.ch-msg.mine .ch-bubble { background: #6366F1; color: #fff; }
.ch-msg.hers .ch-bubble { background: #F1F3FA; color: var(--text); }
.ch-who { font: 400 9.5px var(--font); color: var(--text-dim); margin-top: 4px; }
.ch-empty { position: absolute; text-align: center; font: 400 16px var(--font); color: var(--text-dim); }

/* ---------- the whiteboard, full screen (ui.py _wb_*) ---------- */
.wb2 { position: absolute; inset: 0; z-index: 25; background: #fff; overflow: hidden; }
.wb2-page {
  background-color: #fff;
  background-image: radial-gradient(circle, #DCE2F0 1.2px, transparent 1.4px);
  background-size: 28px 28px; background-position: 0 0;
}
.wb2-layer { pointer-events: none; }
.wb2-layer > * { pointer-events: auto; }
.wb2-layer > .wb2-measure { pointer-events: none; }
.wb2-toolbar { background: #fff; border-bottom: 2px solid #E1E5F4; box-sizing: border-box; }
.wb2-tool { cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wb2-title {
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  font: 700 18.5px var(--font); color: #7C3AED;
}
.wb2-card {
  border: 2px solid var(--indigo); border-radius: 14px; background: #fff; color: var(--indigo);
  font: 700 14.5px var(--font); cursor: pointer;
}
.wb2-ask {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: none; border-radius: 16px; background: var(--indigo); color: #fff;
  font: 700 17px var(--font); cursor: pointer;
}
.wb2-collapse { cursor: pointer; background: #fff; border: 1px solid #D8E0F0; border-radius: 8px; box-sizing: border-box; }
.wb2-bar { background: var(--bg); border-top: 2px solid #E1E5F4; box-sizing: border-box; }
.wb2-mic { border-radius: 50%; cursor: pointer; }
.wb2-state { font: 700 12px var(--font); letter-spacing: .3px; white-space: nowrap; }
.wb2-caption { font: 400 14.5px/18px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb2-chip {
  display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 8px;
  border: 1px solid; border-radius: 15px; box-sizing: border-box;
  font: 400 14.5px var(--font); white-space: nowrap; overflow: hidden;
}
.wb2-chip span { overflow: hidden; text-overflow: ellipsis; }
.wb2-suggest-ground { background: #fff; border: 1px solid #C7D2FE; border-radius: 18px; }
.wb2-panel-shadow { background: #D5DBEB; border-radius: 16px; }
.wb2-panel { background: #fff; border: 2px solid #C7D2FE; border-radius: 16px; box-sizing: border-box; overflow: hidden; }
.wb2-panel-close { position: absolute; background: #EEF0FA; color: #3B3F8F; cursor: pointer; }
.wb2-rule { background: var(--track); border-radius: 1px; }
.wb2-body { overflow-y: auto; scrollbar-width: thin; }
.wb2-body img { display: block; }
.wb2-see {
  display: flex; align-items: center; gap: 11px; padding: 0 18px;
  border: none; border-radius: 16px; background: var(--indigo); color: #fff;
  font: 700 16px var(--font); cursor: pointer; white-space: nowrap; overflow: hidden;
}

/* ---------- the live graph card ---------- */
.gc-view { position: absolute; }
.gc-row { position: absolute; cursor: pointer; touch-action: none; }
.gc-icon { position: absolute; cursor: pointer; }
.gc-close { position: absolute; right: 10px; top: 8px; width: 24px; height: 24px; background: #EEF0FA; color: #3B3F8F; cursor: pointer; }

/* ---------- Liza's own 3D view (ui.py show_model3d / _open_model3d) ---------- */
.m3-board {
  position: absolute; background: #0B1020; border: 1px solid #D8E0F0; border-radius: 10px;
  overflow: hidden; cursor: zoom-in; display: flex; align-items: center; justify-content: center;
}
.m3-board img { width: 100%; height: 100%; object-fit: contain; }
.m3-board .bv-expand { background: rgba(255,255,255,.9); }
.m3-board-wait { font: 700 13px var(--font); color: #C9D2EA; text-align: center; }
.m3-badge {
  background: #6366F1; color: #fff; border-radius: 8px; font: 700 12px var(--font);
  display: flex; align-items: center; justify-content: center;
}
.m3-big { position: absolute; inset: 0; z-index: 45; background: #0B1020; color: #fff; user-select: none; }
.m3-title { font: 700 17px/26px var(--font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m3-legend { display: flex; align-items: center; gap: 5px; font: 400 12px/16px var(--font); color: #C9D2EA; white-space: nowrap; overflow: hidden; }
.m3-legend span:not(.m3-dot) { margin-right: 11px; }
.m3-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.m3-glass { overflow: hidden; touch-action: none; cursor: grab; background: #0B1020; }
.m3-glass:active { cursor: grabbing; }
.m3-wait {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 700 15px var(--font); color: #8891A8; text-align: center; padding: 0 30px;
}
.m3-canvas, .m3-video { position: absolute; left: 0; top: 0; display: block; }
.m3-video { object-fit: contain; transform-origin: 50% 50%; pointer-events: none; }
.m3-labels, .m3-leaders { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.m3-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-family: Arial, Helvetica, sans-serif;
  font-weight: 700; color: #fff; text-shadow: 1px 1px 1px #000;
}
.m3-label.atom.dark { color: #0B1020; text-shadow: none; }
.m3-label.atom.light { color: #fff; text-shadow: none; }
.m3-btn {
  background: #1E2A4A; border: 1px solid #3A4A75; border-radius: 12px; color: #fff;
  font: 700 15px var(--font); cursor: pointer; padding: 0;
}
.m3-btn.big { font-size: 19px; }
.m3-hint { text-align: right; font: 400 12px/18px var(--font); color: #8891A8; }
.m3-note { font: 400 11px/14px var(--font); color: #8891A8; display: flex; align-items: center; }
.m3-formulas { text-align: right; font: 700 16px/21px var(--font); color: #FFE066; pointer-events: none; }
.m3-close {
  border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font: 700 15px var(--font); padding: 0;
}
.m3-panel { position: absolute; background: #141C33; border: 1px solid #2A3658; border-radius: 12px; }
.m3-panel-head { font: 700 13px/18px var(--font); color: #C9D2EA; }
.m3-panel-msg { display: flex; align-items: center; justify-content: center; text-align: center; font: 400 12px var(--font); color: #8891A8; }
.m3-slider-name { font: 700 12px/16px var(--font); color: #fff; white-space: nowrap; }
.m3-slider-value { font: 700 12px/16px var(--font); color: #FFE066; text-align: right; white-space: nowrap; }
.m3-slider-hit { touch-action: none; cursor: pointer; }
.m3-track { position: absolute; left: 13px; right: 13px; top: 15px; height: 6px; border-radius: 3px; background: #3A4A75; }
.m3-fill { position: absolute; left: 0; top: 0; height: 6px; border-radius: 3px; background: #6366F1; }
.m3-knob {
  position: absolute; top: 7px; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  background: #fff; border: 2px solid #6366F1;
}
.m3-results { font: 400 11px/14px var(--font); color: #C9D2EA; white-space: pre-line; }