/* ═══════════════════════════════════════════════════════════════════════════
   LIVE INTERVIEW MODULE — Styles
   Isolated CSS for the live interview feature.
   Uses .li- prefix to avoid collision with existing PRISM styles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables (scoped) ───────────────────────────────────────────────────── */
:root {
  --li-bg-primary: #0a0a0f;
  --li-bg-secondary: #12121a;
  --li-bg-card: #1a1a24;
  --li-bg-card-hover: #22222e;
  --li-border: #2a2a3a;
  --li-border-active: #4a4a6a;
  --li-text-primary: #f0f0f5;
  --li-text-secondary: #9999aa;
  --li-text-muted: #666680;
  --li-accent: #6366f1;
  --li-accent-hover: #818cf8;
  --li-danger: #ef4444;
  --li-danger-hover: #f87171;
  --li-success: #22c55e;
  --li-warning: #f59e0b;
  --li-radius: 8px;
  --li-radius-lg: 12px;
  --li-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* ── Shared Button System ─────────────────────────────────────────────────── */
.li-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--li-radius);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}
.li-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.li-btn-primary { background: #3b82f6; color: #fff; }
.li-btn-primary:hover:not(:disabled) { background: #2563eb; }
.li-btn-secondary { background: #f8fafc; color: #1e293b; border: 1px solid #e2e8f0; }
.li-btn-secondary:hover:not(:disabled) { border-color: #cbd5e1; background: #f1f5f9; }
.li-btn-danger { background: #ef4444; color: #fff; }
.li-btn-danger:hover:not(:disabled) { background: #dc2626; }
.li-btn-success { background: #22c55e; color: #fff; }
.li-btn-success:hover:not(:disabled) { background: #16a34a; }
.li-btn-warning { background: #f59e0b; color: #fff; }
.li-btn-warning:hover:not(:disabled) { background: #d97706; }
.li-btn-ghost { background: transparent; color: #64748b; }
.li-btn-ghost:hover { color: #1e293b; }
.li-btn-sm { padding: 5px 10px; font-size: 12px; }
.li-btn-lg { padding: 12px 24px; font-size: 15px; }
.li-btn-full { width: 100%; }


/* ═══════════════════════════════════════════════════════════════════════════
   JOIN PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.li-join-body {
  margin: 0;
  background: var(--li-bg-primary);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  color: var(--li-text-primary);
}
.li-join-container {
  max-width: 440px;
  width: 100%;
  padding: 24px;
}
.li-join-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  justify-content: center;
}
.li-join-logo-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.li-join-card {
  background: var(--li-bg-card);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius-lg);
  padding: 32px;
  text-align: center;
  box-shadow: var(--li-shadow);
}
.li-join-badge {
  display: inline-block;
  background: rgba(99, 102, 241, 0.15);
  color: var(--li-accent);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.li-join-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
}
.li-join-meta {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}
.li-join-difficulty {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--li-bg-secondary);
}
.li-difficulty-easy { color: var(--li-success); }
.li-difficulty-medium { color: var(--li-warning); }
.li-difficulty-hard { color: var(--li-danger); }
.li-join-time {
  font-size: 12px;
  color: var(--li-text-secondary);
  display: flex;
  align-items: center;
  gap: 4px;
}
.li-join-instructions {
  color: var(--li-text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
}
.li-join-note {
  color: var(--li-text-muted);
  font-size: 12px;
  margin-top: 16px;
}

/* Join page states */
.li-join-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--li-border);
  border-top-color: var(--li-accent);
  border-radius: 50%;
  animation: li-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes li-spin { to { transform: rotate(360deg); } }
.li-join-loading-text { color: var(--li-text-secondary); font-size: 14px; }
.li-join-error-icon { font-size: 32px; margin-bottom: 12px; }
.li-join-error-title { font-size: 18px; margin: 0 0 8px; }
.li-join-error-msg { color: var(--li-text-secondary); font-size: 14px; margin-bottom: 20px; }
.li-join-auth-title { font-size: 18px; margin: 0 0 8px; }
.li-join-auth-msg { color: var(--li-text-secondary); font-size: 14px; margin-bottom: 20px; }


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION PAGE — TOOLBAR
   ═══════════════════════════════════════════════════════════════════════════ */
.li-session-body {
  margin: 0;
  background: #ffffff;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  color: #1e293b;
  overflow: hidden;
}
.li-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  min-height: 72px;
  padding: 0 16px;
  background: #172340;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.li-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.li-toolbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.li-toolbar-logo { height: 36px; width: auto; display: block; flex-shrink: 0; }
.li-toolbar-brand-text { display: flex; flex-direction: column; gap: 1px; }
.li-toolbar-brand-name {
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.3px;
  line-height: 1.1;
}
.li-toolbar-brand-sub {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.li-toolbar-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.15);
}
.li-toolbar-title {
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.li-toolbar-difficulty {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(56,189,248,0.15);
  color: #38bdf8;
}
.li-toolbar-center { display: flex; align-items: center; gap: 14px; }
.li-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #f1f5f9;
}
.li-timer-icon { font-size: 14px; }
.li-timer-waiting .li-timer-display { color: #94a3b8; }
.li-timer-warning .li-timer-display { color: #fbbf24; }
.li-timer-expired .li-timer-display { color: #f87171; }
.li-timer-stopped .li-timer-display { color: #94a3b8; }
.li-timer-stopped::after {
  content: '⏸';
  font-size: 11px;
  margin-left: 6px;
  color: #94a3b8;
}
.li-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.li-participants {
  display: flex;
  align-items: center;
  gap: 6px;
}
.li-participant-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background 0.3s;
}
.li-dot-connected { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }
.li-dot-disconnected { background: #64748b; }

/* Invite link bar */
.li-invite-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: #f0f9ff;
  border-bottom: 1px solid #e0f2fe;
  flex-shrink: 0;
}
.li-invite-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: #0369a1;
  white-space: nowrap;
}
.li-invite-bar-input {
  flex: 1;
  padding: 5px 10px;
  background: #ffffff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #0c4a6e;
}
.li-invite-bar-copy {
  padding: 5px 12px;
  background: #0284c7;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.li-invite-bar-copy:hover { background: #0369a1; }

/* Media controls */
.li-media-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.li-media-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.15s;
}
.li-media-btn:hover { background: rgba(255,255,255,0.15); }
.li-media-btn.li-media-off {
  background: rgba(239,68,68,0.2);
  border-color: rgba(239,68,68,0.4);
  color: #fca5a5;
}
.li-media-btn svg { width: 16px; height: 16px; }


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION PAGE — MAIN LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.li-session-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  gap: clamp(0.5rem, 1.2vw, 1.5rem);
  padding: clamp(0.5rem, 0.8vw, 1.1rem) clamp(0.5rem, 1vw, 1.5rem) clamp(0.8rem, 1vw, 1.5rem);
  min-height: 0;
}

/* LEFT PANEL — matches Practice mode's left panel (rounded, bordered card
   with a gap on all sides, instead of a flush full-height sidebar) */
.li-left-panel {
  width: 300px;
  max-width: 300px;
  min-width: 300px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.li-left-panel::-webkit-scrollbar { width: 5px; }
.li-left-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.li-left-panel::-webkit-scrollbar-track { background: transparent; }

/* Eval panel inner (inside left panel) */
.li-eval-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.li-eval-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}
.li-eval-body::-webkit-scrollbar { width: 5px; }
.li-eval-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.li-eval-body::-webkit-scrollbar-track { background: transparent; }

/* Submit footer — always visible at bottom of flex column */
.li-eval-submit-footer {
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
}

/* Palette inner (inside left panel, candidate) — uses shared .palette/.palette-item from style.css */
.li-palette-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.li-palette-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.li-palette-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.li-palette-hint {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
}
.li-palette-inner .panel-section {
  padding: 10px 8px;
  flex-shrink: 0;
}
.li-palette-inner .palette {
  max-height: none;
}
.li-palette-inner .palette-item .icon {
  filter: brightness(0) saturate(0) opacity(0.7);
}
.li-palette-inner .palette-item:hover .icon {
  filter: brightness(0) saturate(100%) invert(27%) sepia(80%) saturate(800%) hue-rotate(220deg) brightness(95%);
  opacity: 1;
}

/* Candidate inspector */
.li-node-inspector {
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.li-inspector-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.li-inspector-label {
  font-size: 11px;
  color: #475569;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.li-inspector-input {
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
  color: #0f172a;
  background: #fff;
}
.li-inspector-input:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.li-inspector-input:disabled {
  background: #f8fafc;
  color: #94a3b8;
}

/* Problem Description (candidate left panel) */
.li-problem-section {
  padding: 14px 16px;
  border-top: 1px solid #e2e8f0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.li-problem-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 10px;
  flex-shrink: 0;
}
.li-problem-text {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.6;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.li-problem-text::-webkit-scrollbar { width: 4px; }
.li-problem-text::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.li-problem-text::-webkit-scrollbar-track { background: transparent; }

/* Canvas Area — just a flex container; inner .canvas uses shared styles from style.css */
.li-canvas-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  min-width: 0;
}
.li-canvas-area .canvas {
  flex: 1;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

/* ── Toolbar Lock (like evaluation-locked in Practice mode) ─── */
body.li-session-active .li-toolbar-brand {
  pointer-events: none;
  opacity: 0.7;
}

/* Remote Cursor */
.li-remote-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  transition: transform 0.1s ease-out;
}
.li-cursor-pointer {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6366f1;
  opacity: 0.8;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
}
.li-cursor-label {
  position: absolute;
  top: 14px;
  left: 8px;
  font-size: 10px;
  color: #6366f1;
  font-weight: 600;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION PAGE — EVALUATION PANEL (interviewer only)
   ═══════════════════════════════════════════════════════════════════════════ */
.li-eval-panel {
  width: 320px;
  background: #ffffff;
  border-left: 1px solid #e2e8f0;
  overflow-y: auto;
  flex-shrink: 0;
}
.li-eval-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
  z-index: 10;
}
.li-eval-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.li-eval-autosave {
  font-size: 11px;
  color: #16a34a;
  font-weight: 500;
}
.li-eval-section {
  margin-bottom: 20px;
}
.li-eval-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 10px;
}
.li-eval-scores { display: flex; flex-direction: column; gap: 8px; }
.li-eval-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.li-eval-score-row label {
  font-size: 13px;
  color: #1e293b;
}

/* Star rating */
.li-score-stars {
  display: flex;
  gap: 3px;
}
.li-score-star {
  width: 18px;
  height: 18px;
  cursor: pointer;
  border-radius: 3px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #334155;
  transition: all 0.15s;
}
.li-score-star:hover,
.li-score-star.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
.li-score-stars-lg .li-score-star {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

/* Textarea & Select */
.li-eval-textarea {
  width: 100%;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s;
}
.li-eval-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.08);
}
.li-eval-textarea::placeholder { color: #64748b; }
.li-eval-select {
  width: 100%;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.li-eval-select:focus { outline: none; border-color: #3b82f6; }


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION PAGE — MODAL
   ═══════════════════════════════════════════════════════════════════════════ */
.li-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.li-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.li-modal-content {
  position: relative;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 28px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.li-modal-title { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 8px; }
.li-modal-text { color: #64748b; font-size: 13px; margin-bottom: 20px; }
.li-modal-recommendation {
  margin-bottom: 20px;
}
.li-modal-rec-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}
.li-modal-recommendation .li-eval-select {
  width: 100%;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #1e293b;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.li-modal-recommendation .li-eval-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.li-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION PAGE — VIDEO (bottom-right, shows remote party + self PIP)
   ═══════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────
   Local Video Preview (your own camera) - REMOVED
   Per product decision, the local self-view PIP is no longer shown to
   either party (interviewer or candidate) — only the remote party's
   video is displayed. The element and its JS wiring are left intact
   (session.js still safely queries these IDs) so no behavior elsewhere
   breaks; it is simply hidden here.
   ───────────────────────────────────────────────────────────────────── */
.li-local-video {
  display: none !important;
}
.li-local-video-stream {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  transform: scaleX(-1); /* Mirror the video */
}
.li-local-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: #94a3b8;
  gap: 4px;
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
}
.li-local-video-placeholder span {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  max-width: 100%;
  word-wrap: break-word;
}
.li-local-video-placeholder svg {
  width: 20px;
  height: 20px;
}

/* Label for video panels — color-coded per box */
.li-video-label {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 2;
}
.li-local-video .li-video-label { background: #3b82f6; }  /* Blue = You */
.li-remote-video .li-video-label { background: #22c55e; } /* Green = Them */

/* ─────────────────────────────────────────────────────────────────────
   Remote Video (other party) - BELOW LOCAL VIDEO (RIGHT SIDE)
   ───────────────────────────────────────────────────────────────────── */
.li-remote-video {
  position: fixed;
  /* Local video PIP is hidden (see .li-local-video above), so remote
     video now occupies the bottom-right slot instead of stacking above
     an empty spot. */
  bottom: 20px;
  right: 20px;
  width: 168px;  /* 30% smaller than 240px */
  height: 126px; /* 30% smaller than 180px */
  border-radius: 12px;
  overflow: hidden;
  background: #1e293b;
  border: 3px solid #22c55e; /* Green border = OTHER PARTY (remote) */
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.li-remote-video.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(20px);
}
.li-remote-video-stream {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.li-remote-video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: #94a3b8;
  gap: 4px;
  padding: 8px;
  box-sizing: border-box;
  text-align: center;
}
.li-remote-video-placeholder span {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.35;
  max-width: 100%;
  word-wrap: break-word;
}
.li-remote-video-placeholder svg {
  width: 20px;
  height: 20px;
}

/* ── Video Panel Toggle Button ────────────────────────────────────────
   Floating button to show/hide both video panels for full-screen view */
.li-video-toggle {
  position: fixed;
  bottom: 20px;
  right: 208px; /* 168px (video width) + 20px (margin) + 20px (gap) */
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.95);
  border: 2px solid #334155;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 101;
  transition: all 0.2s ease;
  color: #cbd5e1;
}
.li-video-toggle:hover {
  background: rgba(51, 65, 85, 0.98);
  border-color: #475569;
  transform: scale(1.05);
}
.li-video-toggle svg {
  width: 18px;
  height: 18px;
}
.li-video-toggle.videos-hidden {
  right: 20px; /* Move to right edge when videos are hidden */
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  color: #60a5fa;
}
.li-video-toggle.videos-hidden:hover {
  background: rgba(59, 130, 246, 0.3);
}

/* When getUserMedia fails (no permission, HTTP, no device), surface the
   reason to the user via a warning-tinted placeholder + larger, wrappable
   text. Set from JS: showMediaError() adds this class. */
.li-remote-video-placeholder-error {
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.li-remote-video-placeholder-error span {
  font-size: 11px;
}

/* ── Remote party mic / camera state overlays ─────────────────────────
   Two lightweight indicators pinned to the remote-video PIP so the local
   user can tell at a glance whether the other side has their mic and
   camera on. Fed by socket 'media:state' events → updateRemoteMediaBadges().

   Design principle: show the state for BOTH devices at all times (once we
   have a known state) so the local user can immediately answer "does the
   other side have their mic/camera on?" without needing to see or fail-to-
   see incoming video. Colour: red-tinted when OFF, subtle grey when ON. */
.li-remote-status-bar {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 3;
  pointer-events: none;   /* purely informational */
}
.li-remote-status-bar[hidden] { display: none; }
.li-remote-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.75);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.li-remote-status-badge svg { width: 12px; height: 12px; }
.li-remote-status-badge-off {
  background: rgba(220, 38, 38, 0.92);
  color: #ffffff;
  border-color: transparent;
}
.li-remote-status-badge-on {
  background: rgba(15, 23, 42, 0.7);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, 0.32);
}

/* Full-cover overlay shown when the remote party turns their camera off.
   Sits on top of <video> so we don't have to detach the track (audio may
   still be flowing). Matches the placeholder styling for visual continuity. */
.li-remote-cam-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #cbd5e1;
  animation: liRemoteCamIn 0.2s ease-out;
}
.li-remote-cam-overlay[hidden] { display: none; }
.li-remote-cam-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.15);
  border: 1px solid rgba(148, 163, 184, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}
.li-remote-cam-avatar svg {
  width: 22px;
  height: 22px;
}
.li-remote-cam-msg {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.02em;
}

@keyframes liRemoteCamIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CANVAS NOTICE — top-center session-state banner
   Shown to the candidate when the interviewer hasn't started yet ("Waiting
   for interviewer to start") and to the interviewer before they've pressed
   Start ("Press Start to begin the interview"). Hidden by JS as soon as
   `startedAt` is set on the interview record.
   ═══════════════════════════════════════════════════════════════════════════ */
.li-canvas-notice {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.98), rgba(99, 102, 241, 0.98));
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(99, 102, 241, 0.35);
  white-space: nowrap;
  animation: liCanvasNoticeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.li-canvas-notice[hidden] { display: none; }
.li-canvas-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  opacity: 0.95;
}
.li-canvas-notice-icon svg { width: 16px; height: 16px; }
.li-canvas-notice-text {
  line-height: 1.3;
}
.li-canvas-notice-pulse {
  position: relative;
}
.li-canvas-notice-pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: inherit;
  filter: blur(10px);
  opacity: 0.5;
  z-index: -1;
  animation: liCanvasNoticeGlow 2.2s ease-in-out infinite;
}
@keyframes liCanvasNoticeIn {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes liCanvasNoticeGlow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .li-remote-cam-overlay,
  .li-canvas-notice { animation: none; }
  .li-canvas-notice-pulse::before { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.li-dashboard-body {
  margin: 0;
  background: var(--li-bg-primary);
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  color: var(--li-text-primary);
}
.li-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px;
  background: var(--li-bg-secondary);
  border-bottom: 1px solid var(--li-border);
}
.li-dash-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.li-dash-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--li-text-primary);
  font-weight: 700;
  font-size: 16px;
}
.li-dash-header-divider {
  width: 1px;
  height: 22px;
  background: var(--li-border);
}
.li-dash-header-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.li-dash-header-right { display: flex; align-items: center; gap: 12px; }
.li-dash-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
}

/* Create Section */
.li-dash-create-section { margin-bottom: 32px; }
.li-dash-create-card {
  background: var(--li-bg-card);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius-lg);
  padding: 24px;
}
.li-dash-create-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 20px;
}
.li-create-form { display: flex; flex-direction: column; gap: 16px; }
.li-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.li-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}
.li-form-group-wide { flex: 1; min-width: 200px; }
.li-form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--li-text-secondary);
}
.li-form-group input,
.li-form-group select,
.li-form-group textarea {
  padding: 8px 12px;
  background: var(--li-bg-secondary);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius);
  color: var(--li-text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.li-form-group input:focus,
.li-form-group select:focus,
.li-form-group textarea:focus {
  outline: none;
  border-color: var(--li-accent);
}
.li-form-group input::placeholder,
.li-form-group textarea::placeholder { color: var(--li-text-muted); }

/* Invite Section */
.li-dash-invite-section { margin-bottom: 32px; }
.li-dash-invite-card {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--li-radius-lg);
  padding: 24px;
  text-align: center;
}
.li-invite-title { color: var(--li-success); font-size: 16px; margin: 0 0 8px; }
.li-invite-subtitle { color: var(--li-text-secondary); font-size: 13px; margin-bottom: 16px; }
.li-invite-link-row { display: flex; gap: 8px; margin-bottom: 12px; }
.li-invite-link-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--li-bg-card);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius);
  color: var(--li-text-primary);
  font-family: monospace;
  font-size: 12px;
}
.li-invite-expiry { color: var(--li-text-muted); font-size: 12px; }

/* Interview History */
.li-dash-history-section { margin-top: 16px; }
.li-dash-section-title { font-size: 15px; font-weight: 700; margin: 0 0 16px; }
.li-interview-list { display: flex; flex-direction: column; gap: 10px; }
.li-interview-card {
  background: var(--li-bg-card);
  border: 1px solid var(--li-border);
  border-radius: var(--li-radius);
  padding: 16px 20px;
  transition: border-color 0.15s;
}
.li-interview-card:hover { border-color: var(--li-border-active); }
.li-interview-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.li-interview-card-title { font-size: 14px; font-weight: 600; margin: 0; }
.li-interview-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
}
.li-status-scheduled { background: rgba(245, 158, 11, 0.1); color: var(--li-warning); }
.li-status-active { background: rgba(34, 197, 94, 0.1); color: var(--li-success); }
.li-status-completed { background: rgba(99, 102, 241, 0.1); color: var(--li-accent); }
.li-status-cancelled { background: rgba(239, 68, 68, 0.1); color: var(--li-danger); }
.li-status-expired { background: rgba(102, 102, 128, 0.1); color: var(--li-text-muted); }
.li-interview-card-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--li-text-secondary);
  margin-bottom: 10px;
}
.li-interview-card-actions { display: flex; gap: 8px; }
.li-eval-badge {
  font-size: 12px;
  color: var(--li-success);
  font-weight: 600;
}
.li-interview-empty,
.li-interview-loading {
  text-align: center;
  color: var(--li-text-muted);
  font-size: 13px;
  padding: 40px 20px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION DROPDOWN (Evaluate → Dropdown)
   Styled to match existing app dropdowns (white card, light theme)
   ═══════════════════════════════════════════════════════════════════════════ */
.li-eval-dropdown {
  position: relative;
  display: inline-flex;
}
.li-eval-dropdown-menu {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  min-width: 210px;
  padding: 6px;
  display: none;
}
.li-eval-dropdown-menu.open { display: block; }
.li-eval-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
}
.li-eval-dropdown-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
a.li-eval-dropdown-item,
a.li-eval-dropdown-item:visited {
  color: #475569;
  text-decoration: none;
}
a.li-eval-dropdown-item:hover {
  color: #0f172a;
}
.li-eval-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
}
.li-eval-dropdown-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eff6ff;
  color: #3b82f6;
  margin-left: auto;
  letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SESSION ENDED OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
.li-session-ended-overlay {
  position: absolute;
  inset: 0;
  background: rgba(248, 250, 252, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  backdrop-filter: blur(4px);
}
.li-ended-card {
  text-align: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  max-width: 380px;
}
.li-ended-card h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px;
}
.li-ended-card p {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 20px;
}
.li-ended-card .li-ended-redirect {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CANDIDATE PALETTE LOCK
   The candidate's component palette is inactive until the interviewer clicks
   "Start". Body.li-palette-locked visually dims the palette and shows a
   lock badge in the header. JS still enforces the block at the event level,
   but these styles give clear UX affordance so the candidate knows *why*.
   ═══════════════════════════════════════════════════════════════════════════ */
body.li-palette-locked #li-component-palette {
  position: relative;
}
body.li-palette-locked #li-component-palette .palette {
  opacity: 0.42;
  filter: grayscale(0.4);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
body.li-palette-locked #li-component-palette .palette-item {
  cursor: not-allowed !important;
}
body.li-palette-locked #li-component-palette .palette-item:hover {
  transform: none;   /* neutralise Practice-mode hover lift */
}
body.li-palette-locked #li-component-palette .palette-item:hover .icon {
  filter: brightness(0) saturate(0) opacity(0.7);   /* no purple hover tint */
}
/* The "Drag onto canvas" hint isn't useful while the palette is locked, and
   the emoji lock badge that used to live here has been replaced by a
   top-center canvas notice (see .li-canvas-notice) so the message is
   visible even when the left panel is scrolled. */
body.li-palette-locked .li-palette-hint { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   LOCK TOAST — shown when the candidate tries to interact with a locked
   palette item. Slides in from the top-center, auto-dismisses after ~3s.
   ═══════════════════════════════════════════════════════════════════════════ */
.li-lock-toast {
  position: fixed;
  top: 74px;   /* below the toolbar (~64px + gap) */
  left: 50%;
  transform: translate(-50%, -12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  min-width: 280px;
  max-width: min(420px, calc(100vw - 32px));
  background: #ffffff;
  border: 1px solid rgba(99,102,241,0.35);
  border-left: 4px solid #6366f1;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
  color: #0f172a;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.li-lock-toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.li-lock-toast > svg {
  flex-shrink: 0;
  color: #6366f1;
  margin-top: 1px;
}
.li-lock-toast-body {
  flex: 1;
  min-width: 0;
}
.li-lock-toast-title {
  font-weight: 700;
  font-size: 13.5px;
  color: #0f172a;
  margin-bottom: 2px;
}
.li-lock-toast-sub {
  font-size: 12px;
  color: #475569;
  font-weight: 500;
}
.li-lock-toast-sub strong {
  color: #6366f1;
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .li-lock-toast { transition: opacity 0.1s linear; transform: translate(-50%, 0); }
  .li-canvas-notice { animation: none; }
}