* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0b0f17; color: #e5e7eb;
}
.app { display: grid; grid-template-columns: 1fr 400px; height: 100vh; }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; grid-template-rows: 60vh auto; height: auto; } }

/* ---------- video call stage ---------- */
.stage { position: relative; padding: 16px; }
.tile { position: relative; overflow: hidden; border-radius: 18px; background: #111827; }
.main-tile {
  height: 100%;
  /* soft "office" backdrop behind the avatar */
  background: radial-gradient(ellipse at 50% 35%, #4b5563 0%, #374151 35%, #1f2937 75%);
}
#avatar { position: absolute; inset: 0; }
.self-tile {
  position: absolute; right: 32px; bottom: 32px; width: 220px; aspect-ratio: 4 / 3;
  border: 2px solid #1f2937; box-shadow: 0 8px 24px #0008;
}
#selfView { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #9ca3af; font-size: 1rem; background: #111827;
}
.overlay.small { font-size: .85rem; }
.overlay.gone { display: none; }
.name-tag {
  position: absolute; left: 14px; top: 14px; display: flex; align-items: center; gap: 8px;
  background: #000a; padding: 6px 12px; border-radius: 999px; font-size: .9rem; backdrop-filter: blur(6px);
}
.name-tag.small { top: auto; bottom: 8px; left: 8px; font-size: .75rem; padding: 4px 10px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
.dot.speaking { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.dot.listening { background: #ef4444; animation: blink 1s infinite; }
.dot.thinking { background: #f59e0b; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.status { color: #9ca3af; font-size: .8rem; }
.caption {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: min(80%, 820px);
  background: #000c; padding: 12px 18px; border-radius: 12px; font-size: 1.15rem; line-height: 1.45; text-align: center;
}
.caption.hidden { display: none; }

/* ---------- side panel ---------- */
.side { background: #111827; border-left: 1px solid #1f2937; padding: 24px; overflow-y: auto; }
.pane { display: none; }
.pane.active { display: grid; gap: 16px; align-content: start; }
h1 { margin: 0; font-size: 1.4rem; }
.muted { color: #9ca3af; margin: 0; }
.small { font-size: .85rem; }
form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: .85rem; color: #d1d5db; }
label.check { display: flex; align-items: center; gap: 8px; }
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
input, select, textarea {
  font: inherit; color: inherit; background: #0b0f17; border: 1px solid #374151; border-radius: 10px; padding: 9px 11px; min-width: 0;
}
textarea { width: 100%; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #6366f1; border-color: transparent; }
button { font: inherit; cursor: pointer; border-radius: 10px; padding: 10px 16px; border: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: #6366f1; color: #fff; font-weight: 600; }
.primary:hover:not(:disabled) { background: #4f46e5; }
.secondary { background: #1f2937; color: #e5e7eb; border: 1px solid #374151; }
.secondary.recording { background: #b91c1c; border-color: #ef4444; }
.link { background: none; color: #9ca3af; text-decoration: underline; padding: 4px; justify-self: start; }

.progress { display: grid; gap: 6px; font-size: .85rem; color: #9ca3af; }
.bar { height: 6px; background: #1f2937; border-radius: 3px; overflow: hidden; }
#progressBar { height: 100%; width: 0; background: #6366f1; transition: width .4s; }
.transcript { display: grid; gap: 8px; font-size: .9rem; max-height: 42vh; overflow-y: auto; }
.msg { padding: 8px 12px; border-radius: 10px; background: #1f2937; }
.msg.user { background: #312e81; }
.msg b { color: #a5b4fc; }
.controls { display: flex; gap: 8px; margin-top: 8px; }
.controls .primary { margin-left: auto; }

/* feedback */
.score { font-size: 3rem; font-weight: 700; color: #a5b4fc; }
.fb h3 { margin: 18px 0 8px; font-size: 1rem; }
.fb ul { padding-left: 20px; margin: 0; }
.fb li { margin-bottom: 6px; }
.q { background: #1f2937; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: .9rem; }
.q small { color: #a5b4fc; }