/* ============================================
   WispherFlow — Live Session Layout
   Smooth, shadow-driven, borderless enterprise
   ============================================ */

/* --- Electron Frameless Title Bar --- */
#electron-titlebar {
  display: none; /* shown only in Electron via JS */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  z-index: 9999;
  background: #0f0f0e;
  -webkit-app-region: no-drag; /* manual JS handler handles drag (cross-monitor support) */
  user-select: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 14px;
  overflow: hidden; /* prevent any child from overflowing the bar */
}
.etb-drag {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  -webkit-app-region: no-drag;
}
.etb-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}
.etb-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 10px;
  padding: 1px 7px;
}
/* Update pill in the Electron titlebar.
   ZERO-TRANSFORM design: positioned with raw pixel math so nothing can
   shift it under any circumstance. Previous versions used
   transform: translate(-50%, -50%) for centering, which fought with the
   browser's default <button> :active press state and caused visible
   movement on click/hover.
   Fix: fixed WIDTH (200px) + fixed LEFT via calc(50% - 100px) means the
   pill's center is mathematically at 50% without any transform. Fixed
   TOP via raw pixels (7px) so vertical centering in the 36px titlebar
   (36-22=14, 14/2=7) is also pure math. The pill is a static element
   that the browser literally cannot move on any interaction. */
.etb-update-pill {
  position: absolute;
  top: 7px;
  left: calc(50% - 100px);
  width: 200px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #10b981;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
  padding: 0 10px;
  line-height: 1;
  cursor: pointer;
  -webkit-app-region: no-drag;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
  /* Only animate the visual change — NEVER animate position-related
     properties (left/top/width/transform). Color/opacity only. */
  transition: opacity 0.15s ease, background 0.15s ease;
}
.etb-update-pill:hover {
  opacity: 0.9;
}
.etb-update-pill:active {
  opacity: 0.82;
}
.etb-update-pill:focus,
.etb-update-pill:focus-visible {
  outline: none;
  box-shadow: none;
}
.etb-update-pill.ready {
  background: var(--terra, #d97757);
}
/* Kill the Firefox-specific inner focus border that shifts content on click */
.etb-update-pill::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.etb-update-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}
@keyframes etb-pill-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes etb-dot-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.etb-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  -webkit-app-region: no-drag;
}
.etb-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s;
}
.etb-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}
.etb-close:hover {
  background: #ef4444;
  color: white;
}

/* Position selector dropdown */
.etb-position-wrap {
  position: relative;
}
.etb-position-menu {
  display: none;
  position: absolute;
  top: 34px;
  right: 0;
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 4px;
  min-width: 110px;
  z-index: 10000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.etb-position-menu.open {
  display: flex;
  flex-direction: column;
}
.etb-pos-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 13.5px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-app-region: no-drag;
}
.etb-pos-opt:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.etb-pos-opt.active {
  color: #10b981;
}
.etb-pos-opt svg {
  flex-shrink: 0;
}

/* Collapse button */
.etb-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

/* Push page content down when title bar is shown */
body.is-electron {
  padding-top: 36px;
}

.live-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  background: var(--canvas-100);
}

/* --- Top Bar --- */
.live-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  gap: 8px;
  height: 38px;
}
/* Force ALL topbar interactive elements to fit inside 38px header */
.live-topbar .btn,
.live-topbar .topbar-btn,
.live-topbar .btn-answer-now,
.live-topbar .model-switcher-btn,
.live-topbar .answer-mode-pills,
.live-topbar .topbar-size-group {
  max-height: 28px !important;
  box-sizing: border-box !important;
  position: relative; /* required: z-index has no effect without position */
  z-index: 100; /* above panels (20-30) so dropdown overflows correctly */
  flex-shrink: 0;
}
[data-theme='dark'] .live-topbar {
  background: var(--canvas-50);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

.topbar-conv-pills {
  display: none;
  align-items: center;
  gap: 8px;
}
.topbar-end-btn {
  display: none; /* shown on mobile via media query */
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.08);
  color: var(--red-500);
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.topbar-end-btn:hover {
  background: rgba(239, 68, 68, 0.15);
}
.topbar-end-btn svg {
  width: 13px;
  height: 13px;
}
.live-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  height: 100%;
}
.live-top-left .back-home-btn {
  width: 28px;
  height: 28px;
}
.live-session-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.live-company {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--canvas-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-session-type {
  font-size: 11.5px;
  color: var(--canvas-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.live-top-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  height: 100%;
}
.live-indicator {
  display: none;
}
.live-timer {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.live-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
  height: 100%;
}

/* Answer Now in center section — static, no movement on hover */
.btn-answer-now {
  flex-shrink: 0;
  padding: 0 14px !important;
  font-size: 11px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  border-radius: 99px !important;
  line-height: 1 !important;
  gap: 5px !important;
  box-sizing: border-box !important;
  background: #131314 !important;
  color: #fff !important;
  border: 1.5px solid #131314 !important;
}
[data-theme='dark'] .btn-answer-now {
  background: #131314 !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
}
/* No color fill on hover — only press effect on click */
.btn-answer-now:hover {
  transform: none !important;
  background: #131314 !important;
  color: #fff !important;
  box-shadow: none !important;
}
[data-theme='dark'] .btn-answer-now:hover {
  background: #131314 !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.12) !important;
  transform: none !important;
}
.btn-answer-now:active {
  transform: scale(0.96) !important;
  transition: transform 80ms !important;
}
.topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  min-width: 28px;
  min-height: 28px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.03);
  font-family: var(--font);
  font-size: 0;
  font-weight: 600;
  color: var(--canvas-600);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  position: relative;
  flex-shrink: 0;
}
.topbar-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--canvas-800);
}
.topbar-btn svg {
  width: 13px;
  height: 13px;
}
/* Emil Kowalski: tactile press feedback — scale(0.97) on :active, 160ms */
.topbar-btn:active {
  transform: scale(0.93);
  transition-duration: 100ms;
}
.topbar-btn span:not(.topbar-dot):not(.capture-live-dot) {
  display: none;
} /* hide text labels, keep indicator dots */
/* Override for explicitly-labeled buttons (Screenshot, etc.) — show the text. */
.topbar-btn.capture-btn-labeled span:not(.capture-live-dot) {
  display: inline !important;
}
.topbar-btn:hover {
  background: var(--canvas-100);
  color: var(--canvas-700);
  border-radius: 99px;
}
.topbar-btn.active {
  color: var(--canvas-700);
  background: rgba(217, 119, 87, 0.1); /* subtle terra tint when ON */
  border-radius: 99px;
}
[data-theme='dark'] .topbar-btn {
  color: #fff;
  background: transparent !important;
  border: none !important;
}
[data-theme='dark'] .topbar-btn:hover {
  color: #fff;
  background: transparent !important;
}
[data-theme='dark'] .topbar-btn.active {
  color: #fff;
  background: transparent !important;
}
.topbar-btn.danger {
  color: #fff;
  background: var(--red-500);
  border-radius: 99px;
  padding: 0;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-color: transparent;
}
.topbar-btn.danger:hover {
  background: var(--red-600) !important;
  color: #fff !important;
}

/* --- Topbar Text Size Controls --- */
.topbar-size-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 99px !important;
  padding: 2px;
  height: 26px;
}
[data-theme='dark'] .topbar-size-group {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
}
.topbar-size-btn {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 8px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: 99px !important;
  font-size: 11px;
  color: var(--canvas-500);
  line-height: 22px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: var(--canvas-500);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
}
.topbar-size-btn:hover {
  background: var(--white);
  color: var(--canvas-800);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.topbar-size-btn .size-arrow {
  font-size: 10px;
  font-weight: 600;
  margin-left: 1px;
}
[data-theme='dark'] .topbar-size-group {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme='dark'] .topbar-size-btn {
  color: #fff;
}
[data-theme='dark'] .topbar-size-btn:hover {
  background: transparent;
  color: #fff;
  box-shadow: none;
}

/* --- Topbar Opacity Meter (terra-colored, no icon) --- */
.topbar-opacity-meter {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--canvas-200);
  cursor: default;
}
.opacity-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 72px;
  height: 5px;
  border-radius: 5px;
  background: linear-gradient(to right, rgba(232, 93, 47, 0.15), var(--terra));
  outline: none;
  cursor: pointer;
}
.opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--terra);
  border: 2.5px solid #fff;
  box-shadow:
    0 1px 6px rgba(232, 93, 47, 0.35),
    0 0 0 1px rgba(232, 93, 47, 0.15);
  cursor: grab;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.opacity-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow:
    0 2px 8px rgba(232, 93, 47, 0.45),
    0 0 0 2px rgba(232, 93, 47, 0.12);
}
.opacity-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.08);
}
.opacity-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--terra);
  border: 2.5px solid #fff;
  box-shadow: 0 1px 6px rgba(232, 93, 47, 0.35);
  cursor: grab;
}
[data-theme='dark'] .topbar-opacity-meter {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .opacity-slider {
  background: linear-gradient(to right, rgba(232, 93, 47, 0.1), var(--terra));
}

/* Electron glass — opacity meter matches glass style */
body.is-electron .topbar-opacity-meter {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  box-shadow: none;
}

/* Text size steps — synced across ALL panels and elements */
.live-main.text-size-1 .t-text {
  font-size: 10.5px !important;
}
.live-main.text-size-1 .ans-body,
.live-main.text-size-1 .ans-body li {
  font-size: 11px !important;
}
.live-main.text-size-1 .ans-q {
  font-size: 12px !important;
}
.live-main.text-size-1 .ans-question-label {
  font-size: 11px !important;
}
.live-main.text-size-1 .ans-body::before {
  font-size: 10px !important;
}
.live-main.text-size-1 .ref-keyword-item {
  font-size: 11px !important;
}
.live-main.text-size-2 .t-text {
  font-size: 11.5px !important;
}
.live-main.text-size-2 .ans-body,
.live-main.text-size-2 .ans-body li {
  font-size: 12px !important;
}
.live-main.text-size-2 .ans-q {
  font-size: 13px !important;
}
.live-main.text-size-2 .ans-question-label {
  font-size: 12px !important;
}
.live-main.text-size-2 .ans-body::before {
  font-size: 11px !important;
}
.live-main.text-size-2 .ref-keyword-item {
  font-size: 12px !important;
}
/* size-3 = default, no override */
.live-main.text-size-4 .t-text {
  font-size: 13.5px !important;
}
.live-main.text-size-4 .ans-body,
.live-main.text-size-4 .ans-body li {
  font-size: 14px !important;
}
.live-main.text-size-4 .ans-q {
  font-size: 15px !important;
}
.live-main.text-size-4 .ans-question-label {
  font-size: 14px !important;
}
.live-main.text-size-4 .ans-body::before {
  font-size: 13px !important;
}
.live-main.text-size-4 .ref-keyword-item {
  font-size: 14px !important;
}
.live-main.text-size-5 .t-text {
  font-size: 15px !important;
}
.live-main.text-size-5 .ans-body,
.live-main.text-size-5 .ans-body li {
  font-size: 15.5px !important;
}
.live-main.text-size-5 .ans-q {
  font-size: 16.5px !important;
}
.live-main.text-size-5 .ans-question-label {
  font-size: 15px !important;
}
.live-main.text-size-5 .ans-body::before {
  font-size: 14px !important;
}
.live-main.text-size-5 .ref-keyword-item {
  font-size: 15px !important;
}
/* Fullscreen text-size steps — scaled up vs regular because the FS overlay
   is larger and sits further from the user. Default (size 3, no class)
   is 15.5 px per the base .fullscreen-overlay .ans-body rule. */
.fs-main.text-size-1 .t-text { font-size: 11.5px !important; }
.fs-main.text-size-1 .ans-body,
.fullscreen-overlay.text-size-1 .answer-item .ans-body,
.fs-main.text-size-1 .ans-question-label,
.fullscreen-overlay.text-size-1 .answer-item .ans-question-label {
  font-size: 12.5px !important;
}
.fs-main.text-size-2 .t-text { font-size: 13px !important; }
.fs-main.text-size-2 .ans-body,
.fullscreen-overlay.text-size-2 .answer-item .ans-body,
.fs-main.text-size-2 .ans-question-label,
.fullscreen-overlay.text-size-2 .answer-item .ans-question-label {
  font-size: 14px !important;
}
.fs-main.text-size-4 .t-text { font-size: 15.5px !important; }
.fs-main.text-size-4 .ans-body,
.fullscreen-overlay.text-size-4 .answer-item .ans-body,
.fs-main.text-size-4 .ans-question-label,
.fullscreen-overlay.text-size-4 .answer-item .ans-question-label {
  font-size: 17.5px !important;
}
.fs-main.text-size-5 .t-text { font-size: 17px !important; }
.fs-main.text-size-5 .ans-body,
.fullscreen-overlay.text-size-5 .answer-item .ans-body,
.fs-main.text-size-5 .ans-question-label,
.fullscreen-overlay.text-size-5 .answer-item .ans-question-label {
  font-size: 19.5px !important;
}

/* --- Main Split — tiled grid with column dividers --- */
.live-main {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 8px 1fr 8px 200px;
  grid-template-rows: 1fr;
  overflow: hidden;
  min-height: 0;
  background: var(--canvas-100);
}

/* Left column stacks shared screen + transcript vertically */
.live-col-left-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.live-col-left-wrap .shared-preview-panel {
  flex: 0 0 35%;
}
.live-col-left-wrap .transcript-panel {
  flex: 1;
  min-height: 0;
  border-top: 1px solid var(--canvas-200);
  position: relative;
}
[data-theme='dark'] .live-col-left-wrap .transcript-panel {
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* Column dividers */
.live-col-divider {
  width: 8px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
}
/* Vertical line */
.live-col-divider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 2px;
  background: var(--canvas-300);
  transition:
    background 0.15s,
    width 0.1s;
}
/* Grip dots centred on the line */
.live-col-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: repeating-linear-gradient(
    to bottom,
    var(--canvas-400) 0px,
    var(--canvas-400) 2px,
    transparent 2px,
    transparent 5px
  );
  border-radius: 2px;
  opacity: 0.6;
  z-index: 1;
}
.live-col-divider:hover::after,
.live-col-divider.dragging::after {
  width: 3px;
  left: 2px;
  background: var(--terra);
}
.live-col-divider:hover::before,
.live-col-divider.dragging::before {
  opacity: 1;
  background: repeating-linear-gradient(
    to bottom,
    var(--terra) 0px,
    var(--terra) 2px,
    transparent 2px,
    transparent 5px
  );
}
[data-theme='dark'] .live-col-divider::after {
  background: rgba(255, 255, 255, 0.22);
}
[data-theme='dark'] .live-col-divider::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3) 0px,
    rgba(255, 255, 255, 0.3) 2px,
    transparent 2px,
    transparent 5px
  );
}

/* Ref collapsed: handled by JS */

/* --- Panel Collapse/Expand Buttons --- */
.panel-collapse-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--canvas-400);
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.panel-collapse-btn:hover {
  background: var(--canvas-100);
  color: var(--canvas-700);
}
.panel-collapse-btn.collapsed svg {
  transform: rotate(180deg);
}
.panel-collapse-btn svg {
  transition: transform 0.2s ease;
}
[data-theme='dark'] .panel-collapse-btn {
  color: var(--canvas-500);
}
[data-theme='dark'] .panel-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--canvas-300);
}

/* --- Panel Expand Tabs (edge buttons when collapsed) --- */
.panel-expand-tab {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 52px;
  background: var(--white);
  border: 1px solid var(--canvas-200);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--canvas-400);
  z-index: 30;
  transition: all 0.2s ease;
}
.panel-expand-tab:hover {
  background: var(--canvas-50);
  color: var(--canvas-700);
}
.panel-expand-left {
  left: 0;
  border-radius: 0 8px 8px 0;
  border-left: none;
}
.panel-expand-right {
  right: 0;
  border-radius: 8px 0 0 8px;
  border-right: none;
}
[data-theme='dark'] .panel-expand-tab {
  background: var(--canvas-50);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--canvas-500);
}
[data-theme='dark'] .panel-expand-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--canvas-300);
}

/* Explicit grid placement so items stay in correct tracks */
.live-col-left-wrap {
  grid-column: 1;
}
#live-divider-left {
  grid-column: 2;
}
.answers-panel {
  grid-column: 3;
}
#live-divider-right {
  grid-column: 4;
}
.reference-panel {
  grid-column: 5;
}

/* Left-collapsed grid — dividers stay visible so user can drag panel back open */
.live-main.left-collapsed {
  grid-template-columns: 0px 8px 1fr 8px 200px;
}
.live-main.left-collapsed .live-col-left-wrap {
  display: none;
}
/* Both collapsed */
.live-main.left-collapsed.ref-collapsed {
  grid-template-columns: 0px 8px 1fr 8px 0px;
}

.live-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  overflow: hidden;
  min-height: 0;
  z-index: 10;
  box-sizing: border-box;
}
.live-panel.panel-dragging {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.18),
    0 0 0 2px var(--terra);
  opacity: 0.96;
  transition: none;
}

/* ── Screen-behind mode — shared video fills background, panels float ── */
#screen-share-bg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 0;
  background: #000;
}
#screen-live.screen-behind-mode .live-main {
  background: transparent;
}
#screen-live.screen-behind-mode #screen-share-bg {
  display: block;
}
#screen-live.screen-behind-mode .live-topbar {
  background: rgba(12, 12, 16, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#screen-live.screen-behind-mode .live-topbar * {
  color: rgba(255, 255, 255, 0.88) !important;
}
#screen-live.screen-behind-mode .live-panel {
  background: rgba(12, 12, 16, 0.52) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  color: rgba(255, 255, 255, 0.9);
}
#screen-live.screen-behind-mode .live-panel * {
  color: rgba(255, 255, 255, 0.88);
}
#screen-live.screen-behind-mode .panel-head {
  background: rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#screen-live.screen-behind-mode .panel-head h3,
#screen-live.screen-behind-mode .panel-head .shared-preview-label {
  color: rgba(255, 255, 255, 0.75) !important;
}
#screen-live.screen-behind-mode .ans-body,
#screen-live.screen-behind-mode .t-text {
  color: rgba(255, 255, 255, 0.85) !important;
}
/* Exit screen-behind mode button — floating top-right */
#screen-behind-exit-btn {
  display: none;
  position: fixed;
  top: 12px;
  right: 80px;
  z-index: 2000;
  background: rgba(217, 119, 87, 0.85);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s;
}
#screen-behind-exit-btn:hover {
  background: rgba(217, 119, 87, 1);
}
#screen-live.screen-behind-mode #screen-behind-exit-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Resize handles ─────────────────────────────────────── */
.panel-resize-handle {
  position: absolute;
  z-index: 20;
}
.panel-resize-n,
.panel-resize-s {
  left: 10px;
  right: 10px;
  height: 12px;
  cursor: ns-resize;
}
.panel-resize-n {
  top: -4px;
}
.panel-resize-s {
  bottom: -4px;
}
.panel-resize-e,
.panel-resize-w {
  top: 10px;
  bottom: 10px;
  width: 12px;
  cursor: ew-resize;
}
.panel-resize-e {
  right: -4px;
}
.panel-resize-w {
  left: -4px;
}
.panel-resize-nw {
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
}
.panel-resize-ne {
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  cursor: nesw-resize;
}
.panel-resize-sw {
  bottom: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  cursor: nesw-resize;
}
.panel-resize-se {
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
}

/* Reset layout button — icon-only */
.topbar-reset-btn {
  background: transparent;
  border: none;
  padding: 7px;
  font-size: 0; /* hide text */
  color: var(--canvas-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 30px;
  transition: all 0.15s ease;
}
.topbar-reset-btn:hover {
  color: var(--canvas-700);
  background: var(--canvas-100);
}
[data-theme='dark'] .topbar-reset-btn {
  color: #fff;
}
[data-theme='dark'] .topbar-reset-btn:hover {
  color: #fff;
  background: transparent;
}

/* --- Shared Screen Preview --- */
.shared-preview-panel {
  /* sized by PanelManager */
}
.shared-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  flex-shrink: 0;
  background: var(--white);
  position: relative;
}
.shared-preview-head::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.shared-preview-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--canvas-600);
}
.shared-preview-fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--canvas-600);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease;
}
.shared-preview-fullscreen:hover {
  background: transparent;
  color: var(--terra);
}
.shared-preview-fullscreen-label {
  line-height: 1;
}
.shared-preview-body {
  flex: 1;
  position: relative;
  background: var(--canvas-50);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#shared-screen-feed {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: none;
}
#shared-screen-feed.active {
  display: block;
}
.shared-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--canvas-400);
  font-size: 11px;
  font-weight: 500;
}
.shared-preview-placeholder span {
  font-size: 11px;
}
/* Green pulse border when actively sharing */
.shared-preview-panel.is-sharing {
  box-shadow:
    0 0 0 2px rgba(16, 185, 129, 0.3),
    var(--shadow-sm);
}
.shared-preview-panel.is-sharing .shared-preview-head {
  background: rgba(16, 185, 129, 0.04);
}

/* --- Reference Keywords Panel --- */
.reference-panel .panel-head h3 {
  font-size: 12px;
}
.ref-body {
  padding: 14px !important;
}

/* Phase 1: Latest Code card in the Quick Ref panel.
   Single "latest" slot — auto-replaced on each new coding answer.
   Sits at the very top of the Quick Ref feed, above intro/skills/stories. */
.qr-latest-code {
  background: rgba(18, 18, 22, 0.82);
  border: 1px solid rgba(217, 119, 87, 0.28);
  border-radius: 10px;
  padding: 10px 12px 12px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  animation: qrCodeSlideIn 200ms ease-out;
}
@keyframes qrCodeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.qr-code-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.qr-code-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d97757;
  flex: 1;
  font-family:
    -apple-system,
    'Segoe UI',
    system-ui,
    sans-serif;
}
.qr-code-lang {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(217, 119, 87, 0.18);
  border: 1px solid rgba(217, 119, 87, 0.3);
  border-radius: 10px;
  padding: 2px 8px;
  font-family:
    -apple-system,
    'Segoe UI',
    system-ui,
    sans-serif;
}
.qr-code-copy {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
  font-family:
    -apple-system,
    'Segoe UI',
    system-ui,
    sans-serif;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.qr-code-copy:hover {
  color: #fff;
  background: rgba(217, 119, 87, 0.15);
  border-color: rgba(217, 119, 87, 0.4);
}
.qr-code-block {
  margin: 0;
  padding: 0;
  background: transparent;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
  font-size: 11.5px;
  line-height: 1.55;
  color: #e4e4e7;
  white-space: pre;
  tab-size: 4;
}
.qr-code-block code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
  white-space: pre;
  display: block;
}
.qr-code-block::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.qr-code-block::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
.qr-code-block::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* Light theme override */
html:not([data-theme='dark']) .qr-latest-code {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(217, 119, 87, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
html:not([data-theme='dark']) .qr-code-header {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
html:not([data-theme='dark']) .qr-code-lang {
  color: #5a3a2a;
  background: rgba(217, 119, 87, 0.1);
}
html:not([data-theme='dark']) .qr-code-copy {
  color: rgba(0, 0, 0, 0.55);
  border-color: rgba(0, 0, 0, 0.15);
}
html:not([data-theme='dark']) .qr-code-copy:hover {
  color: #1a1a1a;
  background: rgba(217, 119, 87, 0.1);
  border-color: rgba(217, 119, 87, 0.4);
}
html:not([data-theme='dark']) .qr-code-block {
  color: #1a1a1a;
}
.ref-keyword-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ref-keyword-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--canvas-700);
  background: transparent;
}
.ref-keyword-item:hover {
  background: transparent;
}
.ref-keyword-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terra);
  flex-shrink: 0;
  opacity: 0.6;
}
.ref-keyword-item.ref-keyword-heading {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--canvas-500);
  background: transparent;
  padding: 10px 10px 4px;
  margin-top: 4px;
}
.ref-keyword-item.ref-keyword-heading:first-child {
  margin-top: 0;
  padding-top: 4px;
}
.ref-keyword-item.ref-keyword-heading::before {
  display: none;
}
.ref-keyword-item.ref-keyword-error {
  display: block;
  background: rgba(217, 119, 87, 0.08);
  border: 1px solid rgba(217, 119, 87, 0.25);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 10px;
  color: #b54a1f;
  font-size: 12.5px;
  line-height: 1.5;
}
.ref-keyword-item.ref-keyword-error::before {
  display: none;
}
.ref-keyword-item.ref-keyword-error.rk-dark {
  color: #f5a47a;
  background: rgba(217, 119, 87, 0.12);
  border-color: rgba(217, 119, 87, 0.35);
}

/* ── Voice Wave — 9-bar organic audio visualizer ── */
/* Uses height animation (NOT scaleY) — live-panel has overflow:hidden which clips transform-based overflow */
/* ── Voice wave CSS fallback animation — visible even before JS initialises ── */
@keyframes vw-idle-1 {
  0%,
  100% {
    height: 6px;
  }
  50% {
    height: 16px;
  }
}
@keyframes vw-idle-2 {
  0%,
  100% {
    height: 9px;
  }
  50% {
    height: 22px;
  }
}
@keyframes vw-idle-3 {
  0%,
  100% {
    height: 13px;
  }
  50% {
    height: 26px;
  }
}
@keyframes vw-idle-4 {
  0%,
  100% {
    height: 15px;
  }
  50% {
    height: 28px;
  }
}

.vw-listen {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 28px;
  margin-right: 8px;
  flex-shrink: 0;
  overflow: visible;
}
.vw-bar {
  width: 3px !important;
  min-width: 3px !important;
  height: 10px; /* visible default before JS starts */
  border-radius: 99px !important;
  background: #d97757 !important;
  box-shadow: 0 0 6px rgba(217, 119, 87, 0.55) !important;
  opacity: 0.9 !important;
  flex-shrink: 0;
  transform-origin: center;
}
/* CSS fallback: bars animate by position — outer short, inner tall */
.vw-bar:nth-child(1),
.vw-bar:nth-child(9) {
  animation: vw-idle-1 1.1s ease-in-out infinite;
  animation-delay: 0s;
}
.vw-bar:nth-child(2),
.vw-bar:nth-child(8) {
  animation: vw-idle-2 1.3s ease-in-out infinite;
  animation-delay: 0.15s;
}
.vw-bar:nth-child(3),
.vw-bar:nth-child(7) {
  animation: vw-idle-3 1s ease-in-out infinite;
  animation-delay: 0.3s;
}
.vw-bar:nth-child(4),
.vw-bar:nth-child(6) {
  animation: vw-idle-4 1.2s ease-in-out infinite;
  animation-delay: 0.1s;
}
.vw-bar:nth-child(5) {
  animation: vw-idle-4 0.9s ease-in-out infinite;
  animation-delay: 0.05s;
}
/* When JS takes over (.vw-live class added), disable CSS animation */
.vw-listen.vw-live .vw-bar {
  animation: none !important;
}

/* JS drives height + opacity in real-time — smooth transitions */
.vw-bar {
  transition:
    height 0.05s ease-out,
    opacity 0.08s ease-out;
}

/* Fullscreen send bar — terra color on dark bg */
.fs-send-bar .vw-bar {
  background: rgba(217, 119, 87, 0.95) !important;
  box-shadow: 0 0 8px rgba(217, 119, 87, 0.5) !important;
}
/* Electron override */
body.is-electron .vw-bar {
  background: #d97757 !important;
  box-shadow: 0 0 8px rgba(217, 119, 87, 0.7) !important;
}

/* ── Quick Ref — intro block ── */
.ref-keyword-item.ref-keyword-intro {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--canvas-700);
  background: var(--canvas-50);
  border-left: 3px solid var(--terra, #d97757);
  border-radius: 0 8px 8px 0;
  white-space: normal;
  word-break: break-word;
}
.ref-keyword-item.ref-keyword-intro::before {
  display: none;
}
.ref-keyword-item.ref-keyword-intro:hover {
  background: var(--canvas-100);
}

/* ── Quick Ref — sub-item and tip variants ── */
.ref-keyword-item.ref-keyword-sub {
  padding: 3px 10px 3px 22px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--canvas-600);
  background: transparent;
  gap: 6px;
  margin-top: -2px;
}
.ref-keyword-item.ref-keyword-sub:hover {
  background: transparent;
}
.ref-keyword-item.ref-keyword-sub::before {
  width: 3px;
  height: 3px;
  opacity: 0.3;
}
.ref-keyword-item.ref-keyword-tip {
  padding: 2px 10px 2px 22px;
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: var(--terra, #d97757);
  background: transparent;
  opacity: 0.8;
  margin-top: -3px;
  margin-bottom: 2px;
}
.ref-keyword-item.ref-keyword-tip:hover {
  background: transparent;
}
.ref-keyword-item.ref-keyword-tip::before {
  display: none;
}
@keyframes refSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   CRYSTAL GLASS OVERLAY SYSTEM — Transparent panels over shared screen
   Three-layer defense: frosted glass + text shadow + minimum alpha floor
   ========================================================================== */

/* --- Crystal Glass Tokens — Light AND Dark (unified dark overlay) --- */
/* Both themes use dark semi-transparent panels with white text.          */
/* This guarantees text is ALWAYS readable regardless of what's behind.   */
/* The shared screen shows through clearly — dark tint, minimal blur.     */
.fullscreen-overlay,
[data-theme='dark'] .fullscreen-overlay {
  --cg-panel-bg-idle: rgba(13, 13, 18, 0.93);
  --cg-panel-bg-active: rgba(13, 13, 18, 0.93);
  --cg-panel-bg-pinned: rgba(13, 13, 18, 0.93);
  --cg-panel-bg-fallback: rgba(13, 13, 18, 0.96);
  --cg-panel-border: rgba(255, 255, 255, 0.08);
  --cg-panel-shadow: none;
  --cg-blur: 1px;
  --cg-saturate: 1.1;
  --cg-brightness: 0.95;
  --cg-radius: 10px;

  --cg-head-bg: rgba(255, 255, 255, 0.04);
  --cg-divider: rgba(255, 255, 255, 0.08);

  /* White text on dark glass — always readable */
  --cg-text-primary: rgba(255, 255, 255, 0.92);
  --cg-text-secondary: rgba(255, 255, 255, 0.55);
  --cg-text-accent: #4ade80;
  --cg-text-shadow: none;
  --cg-text-shadow-subtle: none;
  --cg-code-bg: rgba(255, 255, 255, 0.06);

  --cg-scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --cg-scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);

  --cg-tab-active-bg: rgba(255, 255, 255, 0.1);
  --cg-tab-active-text: rgba(255, 255, 255, 0.92);
  --cg-tab-inactive-text: rgba(255, 255, 255, 0.45);

  --cg-chatbar-bg: rgba(13, 13, 18, 0.93);
  --cg-chatbar-border: rgba(255, 255, 255, 0.1);
  --cg-chatbar-shadow: none;
  --cg-chatbar-focus: 0 0 0 2px rgba(217, 119, 87, 0.4);
  --cg-chatbar-placeholder: rgba(255, 255, 255, 0.35);
  --cg-send-active: var(--terra);
  --cg-send-inactive: rgba(255, 255, 255, 0.15);

  --cg-toolbar-bg: rgba(13, 13, 18, 0.93);
  --cg-highlight-new: rgba(74, 222, 128, 0.08);

  --cg-topbar-bg: rgba(13, 13, 18, 0.93);
  --cg-topbar-border: rgba(255, 255, 255, 0.1);
  --cg-topbar-text: rgba(255, 255, 255, 0.92);
  --cg-topbar-text-muted: rgba(255, 255, 255, 0.55);
  --cg-topbar-btn-bg: rgba(255, 255, 255, 0.12);
  --cg-topbar-btn-border: rgba(255, 255, 255, 0.18);
  --cg-topbar-btn-text: rgba(255, 255, 255, 0.9);
  --cg-topbar-btn-hover: rgba(255, 255, 255, 0.22);
}

/* --- Fullscreen Overlay — Crystal Glass HUD over shared screen --- */
.fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: transparent;
  pointer-events: none;
}
.fullscreen-overlay * {
  pointer-events: auto;
}
/* Smooth 400ms transition when auto-invert switches light ↔ dark */
.fs-panel,
.fs-panel-head,
.fs-panel-body,
.fs-topbar,
.fs-chatbar,
.fs-panel-body * {
  transition:
    background 400ms ease,
    color 400ms ease,
    border-color 400ms ease;
}
/* Full-viewport shared screen video background */
.fs-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a0a0a;
  z-index: 0;
  pointer-events: none;
  display: none;
}
.fs-bg-video.active {
  display: block;
}

/* Topbar — crystal glass bar */
.fs-topbar {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 38px;
  background: var(--cg-topbar-bg);
  backdrop-filter: blur(var(--cg-blur)) saturate(var(--cg-saturate));
  -webkit-backdrop-filter: blur(var(--cg-blur)) saturate(var(--cg-saturate));
  border-bottom: 1px solid var(--cg-topbar-border);
  flex-shrink: 0;
  gap: 8px;
}
.fs-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.fs-status-text {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cg-topbar-text);
  text-shadow: var(--cg-text-shadow-subtle);
}
.fs-timer {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--cg-topbar-text-muted);
  text-shadow: var(--cg-text-shadow-subtle);
}
.fs-top-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}
.fs-tb-btn {
  padding: 5px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 99px !important;
  background: var(--cg-topbar-btn-bg) !important;
  border: 1px solid var(--cg-topbar-btn-border) !important;
  color: var(--cg-topbar-btn-text) !important;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.fs-tb-btn:hover {
  background: var(--cg-topbar-btn-hover) !important;
  color: var(--cg-topbar-text) !important;
}
/* active state handled by end-of-file overrides */
.fs-tb-btn.danger {
  color: #fc8181 !important;
}
.fs-tb-btn.danger:hover {
  background: #dc3545 !important;
  color: #fff !important;
  border-color: #dc3545 !important;
}
.fs-tb-btn span {
  display: none;
}
/* Answer Now — clear standout button with visible margins */
.fs-answer-now-btn {
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 0 14px !important;
  border-radius: 99px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 12px !important;
  background: var(--terra) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 12px rgba(217, 119, 87, 0.3) !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.fs-answer-now-btn svg {
  flex-shrink: 0;
}
/* Active dots in fullscreen toolbar buttons */
.fs-tb-btn .topbar-dot {
  width: 6px;
  height: 6px;
  position: absolute;
  top: 2px;
  right: 2px;
}
.fs-tb-btn.active .topbar-dot {
  background: var(--red-500);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}
/* dark theme dot — still red, handled by end-of-file overrides */
.fs-tb-btn .capture-live-dot {
  width: 6px;
  height: 6px;
  top: 2px;
  right: 2px;
}
/* A- / A+ — rounded rectangle pills */
.fs-size-group {
  background: var(--cg-topbar-btn-bg) !important;
  border: 1px solid var(--cg-topbar-btn-border) !important;
  border-radius: 20px !important;
  padding: 2px !important;
  gap: 2px;
}
.fs-size-group .topbar-size-btn {
  font-size: 11px;
  padding: 4px 10px;
  color: var(--cg-topbar-text-muted);
  border-radius: 16px;
}
.fs-size-group .topbar-size-btn:hover {
  background: var(--cg-topbar-btn-hover);
  color: var(--cg-topbar-text);
}
/* Hide secondary shortcut buttons in fullscreen — keep capture + essential controls.
   2026-05-07: removed `#fs-auto-btn` from this list. That ID is now the
   <input type="checkbox"> INSIDE the ⋮ menu's auto-answer toggle (not the
   old standalone topbar button). Hiding the input via `display:none` was
   leftover from the topbar-button era and was suspected of interfering
   with the slider's `:checked` cascade. The input is already visually
   hidden by `.aa-switch input { opacity:0; width:0; height:0; ... }`. */
#fs-stealth-btn,
#fs-tts-btn,
.fs-tb-sep {
  display: none !important;
}
.fs-tb-sep {
  width: 1px;
  height: 16px;
  background: var(--cg-divider);
  margin: 0 3px;
}
.fs-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}
/* Bullets / Full — rounded rectangle pills */
.fs-top-right .answer-mode-pills {
  background: var(--cg-topbar-btn-bg);
  border: 1px solid var(--cg-topbar-btn-border);
  border-radius: 20px;
  padding: 2px;
}
.fs-top-right .mode-pill {
  color: var(--cg-topbar-text-muted);
  font-size: 10.5px;
  padding: 0 12px;
  height: 22px;
  border-radius: 16px;
  transition:
    background 0.15s,
    color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.fs-top-right .mode-pill.active {
  background: var(--cg-topbar-btn-hover);
  color: var(--cg-topbar-text);
}
.fs-top-right .mode-pill:hover:not(.active) {
  background: var(--cg-topbar-btn-hover);
}
.fs-overlay-close {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  border: 1px solid var(--cg-topbar-btn-border);
  border-radius: 99px;
  background: var(--cg-topbar-btn-bg);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  box-sizing: border-box;
  line-height: 1;
  color: var(--cg-topbar-btn-text);
  cursor: pointer;
  transition: all 0.2s ease;
}
.fs-overlay-close:hover {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}

/* Main 3-panel layout (5 children: panel, divider, panel, divider, panel) */
.fs-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: 260px 4px 1fr 4px 200px;
  gap: 0;
  padding: 4px 6px 6px 6px;
  overflow: hidden;
}
.fs-col-divider {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 20;
}
.fs-col-divider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: var(--cg-divider);
}
.fs-col-divider:hover::after,
.fs-col-divider.dragging::after {
  width: 2px;
  background: var(--terra);
}
.fs-reference-panel .fs-panel-body {
  padding: 10px;
  overflow-y: auto;
}

/* Fullscreen ref items — plain text on glass, no card backgrounds */
.ref-keyword-item.rk-dark {
  background: transparent;
  color: var(--cg-text-primary);
}
.ref-keyword-item.rk-dark:hover {
  background: transparent;
}
.ref-keyword-item.rk-dark.ref-keyword-heading {
  background: transparent;
  color: var(--cg-text-accent);
}
.ref-keyword-item.rk-dark::before {
  background: var(--cg-text-accent);
  opacity: 0.8;
}

/* Panels — crystal glass, uniform look, smooth color transitions */
.fs-panel {
  display: flex;
  flex-direction: column;
  background: var(--cg-panel-bg-idle);
  backdrop-filter: blur(var(--cg-blur)) saturate(var(--cg-saturate)) brightness(var(--cg-brightness));
  -webkit-backdrop-filter: blur(var(--cg-blur)) saturate(var(--cg-saturate)) brightness(var(--cg-brightness));
  border-radius: var(--cg-radius);
  border: 1px solid var(--cg-panel-border);
  box-shadow: var(--cg-panel-shadow);
  overflow: hidden;
  transition: background 180ms ease-out;
  will-change: backdrop-filter, opacity;
}
/* NO hover/pinned state changes — panels always look the same */
.fs-panel:hover,
.fs-panel.cg-pinned,
.fs-reference-panel.fs-panel,
.fs-reference-panel.fs-panel:hover,
.fs-reference-panel.fs-panel.cg-pinned {
  background: var(--cg-panel-bg-idle);
  box-shadow: var(--cg-panel-shadow);
}

/* @supports fallback — no backdrop-filter → high alpha safety net */
@supports not (backdrop-filter: blur(1px)) {
  .fs-panel {
    background: var(--cg-panel-bg-fallback) !important;
  }
}

.fs-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: var(--cg-head-bg);
  position: relative;
}
.fs-panel-head::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: var(--cg-divider);
}
.fs-panel-head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cg-text-primary);
  margin: 0;
}
/* Panel headers — solid dark always, consistent on any background */
.fs-panel-head {
  background: rgba(13, 13, 18, 0.96) !important;
}
.fullscreen-overlay.fs-light-bg .fs-panel-head {
  background: rgba(13, 13, 18, 0.96) !important;
}
.fullscreen-overlay.fs-light-bg .fs-panel-head h3 {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 800 !important;
}
.fs-panel-head h3 svg {
  opacity: 0.7;
  color: var(--cg-text-secondary);
  stroke: var(--cg-text-secondary);
}
.fs-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--cg-scrollbar-thumb) transparent;
}
.fs-panel-body::-webkit-scrollbar {
  width: 4px;
}
.fs-panel-body::-webkit-scrollbar-track {
  background: transparent;
}
.fs-panel-body::-webkit-scrollbar-thumb {
  background: var(--cg-scrollbar-thumb);
  border-radius: 4px;
}
.fs-panel-body::-webkit-scrollbar-thumb:hover {
  background: var(--cg-scrollbar-thumb-hover);
}

/* Fullscreen text — three-layer defense system for legibility on any background */
.fs-panel-body .t-item {
  margin-bottom: 10px;
}
.fs-panel-body .t-speaker-label {
  color: var(--cg-text-secondary) !important;
  font-size: 9px;
  text-shadow: var(--cg-text-shadow-subtle);
}
.fs-panel-body .t-speaker-label.candidate {
  color: var(--terra) !important;
}
.fs-panel-body .t-speaker-label.you {
  color: var(--terra) !important;
  opacity: 0.85;
}
.fs-panel-body .t-text {
  color: var(--cg-text-primary) !important;
  font-size: 13px;
  line-height: 1.55;
  text-shadow: var(--cg-text-shadow);
}
.fs-panel-body .t-item.is-question {
  background: var(--cg-highlight-new);
  border-left-color: var(--cg-text-accent);
}
/* New transcript entry flash animation */
.fs-panel-body .t-item.cg-new {
  animation: cgHighlight 250ms ease-out;
}
@keyframes cgHighlight {
  from {
    background: var(--cg-highlight-new);
  }
  to {
    background: transparent;
  }
}

/* Fullscreen answer items — crystal glass legibility */
.fs-panel-body .answer-item {
  border-bottom-color: var(--cg-divider);
  padding: 10px 0;
}
.fs-panel-body .ans-question-label {
  background: transparent;
  color: var(--cg-text-secondary);
  font-size: 9.5px;
  padding: 0;
  text-shadow: var(--cg-text-shadow-subtle);
}
.fs-panel-body .ans-question-label:hover {
  background: transparent;
  color: var(--cg-text-primary);
}
.fs-panel-body .ans-q-arrow {
  color: var(--terra);
}
.fs-panel-body .ans-body {
  background: transparent !important;
  border-left: 2px solid var(--terra) !important;
  border-radius: 0 !important;
  color: var(--cg-text-primary) !important;
  font-size: 13px;
  line-height: 1.6;
  padding: 0 0 0 8px;
  box-shadow: none !important;
  text-shadow: var(--cg-text-shadow);
}
/* Highlight Enhancement (2026-05-25, rolled back to plain bold + quotes):
 * Per-user feedback the terra pill / colored bold variants were too much
 * during interview panic. Reverted to plain bold — the renderer wraps the
 * term in literal "double quotes" so the term reads as: "Terraform" in bold
 * weight. Same color as body text, no background, no extra styling. Quotes
 * provide the aesthetic anchor. */
.fs-panel-body .ans-body strong,
.fs-panel-body .ans-body strong.session-term {
  color: var(--cg-text-primary) !important;
  font-weight: 700;
}
.fs-panel-body .ans-body li {
  font-size: 13px;
  color: var(--cg-text-primary) !important;
  text-shadow: var(--cg-text-shadow);
}
.fs-panel-body .ans-body.bullet-mode li::before {
  color: var(--terra);
}
.fs-panel-body .ans-body code {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace;
  background: var(--cg-code-bg);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}
.fs-panel-body .ans-body pre {
  background: var(--cg-code-bg);
  border-radius: 8px;
  padding: 12px 16px;
  overflow-x: auto;
}
.fs-panel-body .ans-meta {
  font-size: 9.5px;
  color: var(--cg-text-secondary);
  margin-top: 6px;
  text-shadow: var(--cg-text-shadow-subtle);
}
.fs-panel-body .ans-model {
  color: var(--cg-text-secondary);
  background: transparent;
}
.fs-panel-body .ans-tp {
  border-left-color: var(--cg-divider);
  padding-left: 8px;
}
.fs-panel-body .ans-tp-label {
  color: var(--cg-text-secondary);
  text-shadow: var(--cg-text-shadow-subtle);
}
.fs-panel-body .ans-tp li {
  color: var(--cg-text-secondary);
  font-size: 10.5px;
  text-shadow: var(--cg-text-shadow-subtle);
}

/* Fullscreen reference keywords — crystal glass */
.fs-reference-panel .ref-cat-title {
  color: var(--cg-text-accent) !important;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  text-shadow: var(--cg-text-shadow-subtle);
}
.fs-reference-panel .ref-keyword {
  color: var(--cg-text-primary) !important;
  font-size: 11px;
  text-shadow: var(--cg-text-shadow-subtle);
}

/* --- Crystal Glass Chat Bar — Transcript panel (listening indicator only) --- */
.fs-send-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 0 10px 8px 10px;
  background: var(--cg-chatbar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--cg-chatbar-border);
  border-radius: 26px;
  box-shadow: var(--cg-chatbar-shadow);
  flex-shrink: 0;
  position: sticky;
  bottom: 8px;
  z-index: 20;
  transition: box-shadow 180ms ease-out;
}
.fs-send-bar::before {
  display: none;
}
.fs-send-bar .send-indicator {
  color: var(--terra);
  font-size: 11px;
  font-weight: 600;
  text-shadow: var(--cg-text-shadow-subtle);
}

/* --- Crystal Glass Chat Bar — AI Answers panel (pill with input + send) --- */
.fs-chatbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  margin: 0 10px 8px 10px;
  background: var(--cg-chatbar-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--cg-chatbar-border);
  border-radius: 26px;
  box-shadow: var(--cg-chatbar-shadow);
  flex-shrink: 0;
  position: sticky;
  bottom: 8px;
  z-index: 20;
  transition:
    box-shadow 180ms ease-out,
    background 180ms ease-out;
}
.fs-chatbar:focus-within {
  box-shadow: var(--cg-chatbar-focus);
  border-color: var(--terra);
}
.fs-chatbar .send-indicator {
  color: var(--terra);
  font-size: 11px;
  font-weight: 600;
  text-shadow: var(--cg-text-shadow-subtle);
  flex-shrink: 0;
}
.fs-chatbar-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cg-text-primary);
  font-family: var(--font);
  font-size: 13px;
  text-shadow: var(--cg-text-shadow-subtle);
  padding: 6px 0;
}
.fs-chatbar-input::placeholder {
  color: var(--cg-chatbar-placeholder);
}
/* Circular send button inside pill — forced perfect circle */
.fs-chatbar-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  max-height: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--terra);
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: center;
  transition:
    background 150ms,
    transform 150ms;
}
.fs-chatbar-send:hover {
  background: var(--terra-600, #c4684b);
  transform: scale(1.06);
}
.fs-chatbar-send:active {
  transform: scale(0.95);
}
.fs-chatbar-send svg {
  width: 14px;
  height: 14px;
}

/* Content fade mask above chat bar / toolbar — prevents hard text cut-off */
.fs-answers-panel .fs-panel-body {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 16px,
    black calc(100% - 60px),
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, transparent 0px, black 16px, black calc(100% - 60px), transparent 100%);
}

/* Fullscreen ref collapsed */
.fs-main.ref-collapsed {
  grid-template-columns: 260px 4px 1fr 4px 0px;
}
.fs-main.ref-collapsed .fs-reference-panel {
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  width: 0;
  padding: 0;
}
.fs-main.ref-collapsed .fs-reference-panel .fs-panel-head,
.fs-main.ref-collapsed .fs-reference-panel .fs-panel-body {
  display: none;
}

/* Tablet fullscreen */
@media (max-width: 1024px) {
  .fs-main {
    grid-template-columns: 240px 0 1fr 0 0;
    padding: 4px;
  }
  .fs-reference-panel {
    display: none;
  }
  .fs-col-divider {
    display: none;
  }
}
/* Mobile fullscreen */
@media (max-width: 768px) {
  .fs-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    padding: 4px;
  }
  .fs-col-divider {
    display: none;
  }
  .fs-top-center {
    display: none;
  }
  .fs-reference-panel {
    display: none;
  }
  .fs-overlay-close span {
    display: none;
  }
}

/* --- Post-Session Feedback Popup --- */
.sfb-rating {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 8px 0;
}
.sfb-emoji {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 10px 4px;
  border-radius: 16px;
  color: var(--canvas-400);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sfb-emoji svg {
  width: 38px;
  height: 38px;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.2s ease;
}
.sfb-emoji-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--terra);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.25s ease,
    max-height 0.25s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.sfb-emoji:hover {
  color: var(--canvas-600);
}
.sfb-emoji:hover svg {
  transform: scale(1.12);
}
.sfb-emoji:hover .sfb-emoji-label {
  opacity: 1;
  max-height: 20px;
  transform: translateY(0);
  margin-top: 4px;
  color: var(--canvas-600);
}
.sfb-emoji.active {
  color: var(--terra);
  background: rgba(217, 119, 87, 0.08);
}
.sfb-emoji.active svg {
  transform: scale(1.15);
}
.sfb-emoji.active .sfb-emoji-label {
  opacity: 1;
  max-height: 20px;
  transform: translateY(0);
  margin-top: 4px;
}
@keyframes emojiPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1.15);
  }
}
.sfb-emoji.active svg {
  animation: emojiPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sfb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  justify-content: center;
}
.sfb-tag {
  padding: 6px 14px;
  border: 1px solid var(--canvas-200);
  border-radius: 20px;
  background: transparent;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--canvas-600);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sfb-tag:hover {
  border-color: var(--terra);
  color: var(--terra);
}
.sfb-tag.active {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}
.sfb-comment {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--canvas-200);
  border-radius: 10px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--canvas-900);
  resize: none;
  transition: border-color 0.15s;
}
.sfb-comment:focus {
  outline: none;
  border-color: var(--terra);
}
.sfb-comment::placeholder {
  color: var(--canvas-400);
}
/* Dark theme feedback */
[data-theme='dark'] .sfb-emoji {
  color: var(--canvas-500);
}
[data-theme='dark'] .sfb-emoji:hover {
  color: var(--canvas-300);
}
[data-theme='dark'] .sfb-emoji:hover .sfb-emoji-label {
  color: var(--canvas-300);
}
[data-theme='dark'] .sfb-emoji.active {
  color: var(--terra);
  background: rgba(217, 119, 87, 0.1);
}
[data-theme='dark'] .sfb-tag {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
}
[data-theme='dark'] .sfb-tag.active {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}
[data-theme='dark'] .sfb-comment {
  background: var(--bg-elevated);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

/* Feedback modal — mobile touch targets */
@media (max-width: 480px) {
  .sfb-tag {
    padding: 8px 16px;
    font-size: 13.5px;
    border-radius: 24px;
  }
  .sfb-tags {
    gap: 8px;
    margin-bottom: 14px;
  }
  .sfb-comment {
    font-size: 15px;
    padding: 12px 14px;
  }
  #modal-session-feedback .btn {
    min-height: 44px;
    font-size: 15px;
    border-radius: 10px;
  }
}

/* Dark fullscreen overlay — all tokens auto-switch via [data-theme="dark"] .fullscreen-overlay vars above.
   Only need overrides for elements that don't use --cg-* tokens yet or need different dark-specific treatment. */
[data-theme='dark'] .fs-overlay-close:hover {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  flex-shrink: 0;
  background: var(--white);
  position: relative;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
}
/* Soft gradient bottom edge */
.panel-head::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.panel-head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--canvas-500);
  margin: 0;
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
.panel-body::-webkit-scrollbar {
  width: 5px;
}
.panel-body::-webkit-scrollbar-track {
  background: transparent;
}
.panel-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
.panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* "Jump to latest" pill — appears in transcript panel when user scrolls up
   and new messages arrive. Click to scroll back to bottom. */
.transcript-panel {
  position: relative;
}
.transcript-jump-latest {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: var(--terra, #ea580c);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(234, 88, 12, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 10;
  animation: jumpLatestFadeIn 0.18s ease-out;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.transcript-jump-latest:hover {
  transform: translateX(-50%) translateY(-1px);
  box-shadow:
    0 6px 16px rgba(234, 88, 12, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.25);
}
.transcript-jump-latest:active {
  transform: translateX(-50%) translateY(0);
}
@keyframes jumpLatestFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
[data-theme='dark'] .transcript-jump-latest {
  box-shadow:
    0 4px 14px rgba(234, 88, 12, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-theme='dark'] .panel-head {
  background: rgba(22, 22, 28, 0.95);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .panel-head::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}
[data-theme='dark'] .panel-head h3 {
  color: rgba(255, 255, 255, 0.45);
}
[data-theme='dark'] .panel-body {
  background: rgba(18, 18, 24, 0.95);
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
[data-theme='dark'] .panel-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}
[data-theme='dark'] .panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* --- Answer Mode Pills — pill style matching fullscreen --- */
.answer-mode-pills {
  display: flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.04);
  padding: 2px;
  border-radius: 99px !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  height: 26px;
}
.mode-pill {
  padding: 0 10px;
  height: 20px;
  min-height: 0;
  border: none;
  background: transparent;
  border-radius: 99px !important;
  font-size: 10.5px !important;
  color: var(--canvas-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.mode-pill.active {
  background: var(--white);
  color: var(--canvas-900);
  box-shadow: 0 1px 4px rgba(19, 19, 20, 0.06);
}

/* --- Answer Items — flowing text feed --- */
.answer-item {
  margin-bottom: 0;
  padding: 14px 0;
  animation: answerSlideIn 0.35s var(--ease-out-snap, var(--ease));
  position: relative;
  border-bottom: 1px solid var(--canvas-100);
}
.answer-item:last-child {
  border-bottom: none;
}
/* Emil Kowalski: never animate from scale(0) — start from 0.95 + opacity */
@keyframes answerSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Stagger child elements: question label, body, meta — 50ms offset each */
.answer-item .ans-question-label {
  animation: ansChildFade 0.3s var(--ease-out-snap) both;
}
.answer-item .ans-body {
  animation: ansChildFade 0.3s var(--ease-out-snap) 0.05s both;
}
.answer-item .ans-meta {
  animation: ansChildFade 0.3s var(--ease-out-snap) 0.1s both;
}
@keyframes ansChildFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ans-question-label {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--canvas-500);
  margin-bottom: 6px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  background: transparent;
  border-radius: 0;
  transition: color 0.15s;
  max-width: 100%;
  line-height: 1.5;
}
.ans-question-label:hover {
  color: var(--canvas-700);
  background: transparent;
}
.ans-q-arrow {
  flex-shrink: 0;
  font-size: 7px;
  color: var(--terra);
  transition: transform 0.2s;
  margin-top: 3px;
  display: inline-block;
}
.ans-question-label.expanded .ans-q-arrow {
  transform: rotate(90deg);
}
.ans-q-text {
  min-width: 0;
  flex: 1;
}
/* Collapsed state — show first line only with ellipsis + line count badge */
.ans-q-collapsed {
  display: inline;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ans-q-linecount {
  display: inline;
  color: var(--terra, #ea580c);
  font-weight: 600;
  font-size: 9.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Expanded state — full multi-line text with preserved line breaks */
.ans-q-expanded {
  display: none;
  white-space: pre-wrap; /* preserves \n line breaks AND wraps long lines */
  word-break: break-word;
  margin-top: 6px;
  padding: 8px 10px;
  background: rgba(234, 88, 12, 0.05);
  border-left: 2px solid var(--terra, #ea580c);
  border-radius: 0 4px 4px 0;
  font-size: 11px;
  line-height: 1.55;
  color: var(--canvas-700);
  user-select: text;
  cursor: text;
}
/* When expanded: hide collapsed view, show expanded view */
.ans-question-label.expanded .ans-q-collapsed,
.ans-question-label.expanded .ans-q-linecount {
  display: none;
}
.ans-question-label.expanded .ans-q-expanded {
  display: block;
}
[data-theme='dark'] .ans-q-expanded {
  background: rgba(234, 88, 12, 0.08);
  color: var(--canvas-300);
}
[data-theme='dark'] .ans-question-label {
  color: var(--canvas-500);
  background: transparent;
}
[data-theme='dark'] .ans-question-label:hover {
  color: var(--canvas-300);
  background: transparent;
}
[data-theme='dark'] .answer-item {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.ans-body {
  padding: 0 0 0 10px;
  background: transparent;
  border-radius: 0;
  border-left: 2px solid var(--terra);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--canvas-800);
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

.ans-body.bullet-mode ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
}
.ans-body.bullet-mode li {
  position: relative;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.6;
}
.ans-body.bullet-mode li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--terra);
  font-weight: 700;
}

.ans-body strong {
  font-weight: 700;
  color: var(--canvas-900);
}
.ans-body em {
  color: var(--terra-700);
  font-style: normal;
  font-weight: 600;
}

/* [[placeholder]] highlights — bold dashed-underline in terra accent */
.ans-placeholder {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  color: var(--terra);
  cursor: help;
  border-radius: 2px;
  padding: 0 1px;
  transition: background 0.15s;
}
.ans-placeholder:hover {
  background: color-mix(in srgb, var(--terra) 12%, transparent);
}
[data-theme='dark'] .ans-placeholder {
  color: #f4a97a;
}
body.is-electron .ans-placeholder {
  color: var(--terra);
  font-weight: 800;
  text-shadow: none;
}

.ans-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--text-muted);
}
.ans-model {
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-weight: 500;
  color: var(--text-muted);
}
.ans-meta .ans-model::after {
  content: '\00b7';
  margin-left: 6px;
  color: var(--canvas-300);
}

.ans-confidence {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 10px;
  cursor: help;
}
.ans-confidence-medium {
  background: rgba(234, 179, 8, 0.1);
  color: #a37f00;
  border: 1px solid rgba(234, 179, 8, 0.2);
}
.ans-confidence-low {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
[data-theme='dark'] .ans-confidence-medium {
  background: rgba(234, 179, 8, 0.12);
  color: #fbbf24;
  border-color: rgba(234, 179, 8, 0.2);
}
[data-theme='dark'] .ans-confidence-low {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.2);
}

/* Talking Points — compact, inline with flow */
.ans-tp {
  margin-top: 8px;
  padding-top: 0;
  padding-left: 10px;
  border-left: 2px solid var(--canvas-200);
  position: relative;
}
.ans-tp-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--canvas-400);
  margin-bottom: 4px;
}
.ans-tp ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ans-tp li {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 2px 0 2px 14px;
  position: relative;
  line-height: 1.5;
}
.ans-tp li::before {
  content: '\2022';
  position: absolute;
  left: 1px;
  color: var(--canvas-300);
  font-size: 12px;
}

/* --- Answer Toolbar --- */
.answer-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  background: var(--white);
  flex-shrink: 0;
  position: relative;
}
.answer-toolbar .answer-send-btn {
  margin-left: auto;
  font-size: 12.5px;
  padding: 7px 18px;
}
/* Soft top edge */
.answer-toolbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.tool-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--canvas-50);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.tool-btn:hover {
  background: var(--terra-50);
  color: var(--terra-700);
  box-shadow: var(--shadow-xs);
}

/* Auto-answer delay chip — sits in the Live Transcript panel header.
 * Click cycles through preset silence windows. Styled as a neutral enterprise
 * chip that matches the existing header controls without shouting. Mobile tap
 * target is handled by min-width + min-height below. */
.auto-delay-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 60px;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-sm);
  background: var(--canvas-50);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: all 0.18s var(--ease);
  white-space: nowrap;
}
.auto-delay-chip svg {
  flex-shrink: 0;
  opacity: 0.75;
}
.auto-delay-chip:hover {
  background: var(--terra-50);
  border-color: var(--terra-200, rgba(217, 119, 87, 0.3));
  color: var(--terra-700);
}
.auto-delay-chip:hover svg {
  opacity: 1;
}
.auto-delay-chip:active {
  transform: scale(0.96);
}
/* Dark theme — match the frosted-glass live studio look */
[data-theme='dark'] .auto-delay-chip,
body.is-electron .auto-delay-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}
[data-theme='dark'] .auto-delay-chip:hover,
body.is-electron .auto-delay-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(217, 119, 87, 0.35);
  color: rgba(255, 255, 255, 0.95);
}
/* Mobile — thumb-friendly tap target */
@media (max-width: 767px) {
  .auto-delay-chip {
    min-width: 56px;
    min-height: 32px;
    padding: 6px 10px;
    font-size: 11.5px;
  }
}

/* --- Transcript Items --- */
.t-item {
  margin-bottom: 14px;
  animation: transcriptIn 0.35s var(--ease);
}
@keyframes transcriptIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.t-item .t-speaker-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.t-item .t-speaker-label.interviewer {
  color: var(--canvas-500);
}
.t-item .t-speaker-label.candidate {
  color: var(--terra);
}
.t-item .t-text {
  font-size: 11.5px;
  color: var(--canvas-700);
  line-height: 1.6;
}
.t-item.is-question {
  padding: 12px 14px;
  background: var(--ivory-warm);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--canvas-400);
  box-shadow: var(--shadow-xs);
}

/* --- AI Generating Animation --- */
.generating-indicator {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--canvas-100);
  border-radius: var(--radius-full);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-900);
  animation: genPulse 2s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@keyframes genPulse {
  0%,
  100% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  50% {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  }
}

/* Phase 4: Pin-fact bar at the top of the Quick Ref panel.
   Candidates use this to inject persistent hints into the session memory
   mid-interview ("interviewer cares about Kafka"). The fact is stored in
   sessions.memory.pinned_facts and injected into every subsequent prompt. */
.qr-pin-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 14px;
  padding: 8px;
  background: rgba(18, 18, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}
.qr-pin-fact-input {
  flex: 1;
  font-size: 11.5px;
  color: #e4e4e7;
  background: transparent;
  border: none;
  outline: none;
  padding: 4px 6px;
  font-family: inherit;
}
.qr-pin-fact-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.qr-pin-fact-btn {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #d97757;
  border: none;
  outline: none;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    transform 0.1s ease;
}
.qr-pin-fact-btn:hover:not(:disabled) {
  opacity: 0.9;
}
.qr-pin-fact-btn:active:not(:disabled) {
  transform: scale(0.96);
}
.qr-pin-fact-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.qr-pinned-facts {
  background: rgba(217, 119, 87, 0.08);
  border-left: 2px solid rgba(217, 119, 87, 0.5);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 14px;
}
.qr-pinned-facts-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d97757;
  margin-bottom: 4px;
}
.qr-pinned-fact-item {
  font-size: 11.5px;
  color: #e4e4e7;
  padding: 3px 0;
  line-height: 1.4;
}
/* Light theme */
html:not([data-theme='dark']) .qr-pin-bar {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.08);
}
html:not([data-theme='dark']) .qr-pin-fact-input {
  color: #1a1a1a;
}
html:not([data-theme='dark']) .qr-pin-fact-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
html:not([data-theme='dark']) .qr-pinned-facts {
  background: rgba(217, 119, 87, 0.06);
}
html:not([data-theme='dark']) .qr-pinned-fact-item {
  color: #1a1a1a;
}

/* Pending answer card — shown instantly on Send, before any tokens arrive.
   The question label renders immediately; the body starts with dots and
   transitions to live streaming text as tokens arrive. */
.answer-item.ans-pending {
  position: relative;
}
.answer-item.ans-pending .ans-body.ans-streaming {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 10px 0;
}
.answer-item .ans-body.ans-streaming-text {
  white-space: pre-wrap;
  animation: streamFadeIn 180ms ease-out;
}
@keyframes streamFadeIn {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

/* Phase 3: .ans-updating chip on the card during a CONTINUATION merge.
   Previously we'd stack a new answer card below the old one — candidate
   was reading the old answer when a new one appeared. Now the SAME card
   updates in place; a subtle pulsing "updating…" chip in the top-right
   signals the change without pulling focus. Clears when the new answer
   finishes streaming. */
.answer-item.ans-updating::after {
  content: 'updating…';
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 10.5px;
  font-weight: 600;
  color: #d97757;
  background: rgba(217, 119, 87, 0.08);
  border: 1px solid rgba(217, 119, 87, 0.3);
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  animation: ansUpdatingPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ansUpdatingPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* PR 3.5.4 — .ans-streaming-paused: subtle hint shown on the actively
   streaming answer card while the candidate is speaking. The visible
   token render is paused (SSE continues in the background). Fades the
   card to 70% opacity with a small pause glyph appended — intended to
   feel calm, not alarming. Class is added in _pauseStreamRender and
   removed in _resumeStreamRender after 1.5s of candidate silence. */
.answer-item.ans-streaming-paused {
  opacity: 0.7;
  transition: opacity 200ms ease;
}
.answer-item.ans-streaming-paused::after {
  content: '\23F8'; /* U+23F8 DOUBLE VERTICAL BAR (pause) */
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 12px;
  color: var(--text-2, #4e4e62);
  opacity: 0.5;
  pointer-events: none;
}

/* LSE v2: single-row live transcript ticker in the AI Answers panel.
   Shows what the interviewer is currently saying so the candidate doesn't
   need to switch to the Live Transcript tab to stay aware. Single line,
   overflow ellipsis on the left (older text fades away), newest text
   always anchored to the right. Auto-hides when silence >5s. */
.live-ticker-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  background: rgba(217, 119, 87, 0.06);
  border-bottom: 1px solid rgba(217, 119, 87, 0.15);
  font-size: 12px;
  color: var(--text-2, #4e4e62);
  overflow: hidden;
  flex-shrink: 0;
}
[data-theme='dark'] .live-ticker-strip {
  background: rgba(217, 119, 87, 0.08);
  border-bottom-color: rgba(217, 119, 87, 0.2);
}
.live-ticker-label {
  font-size: 12px;
  flex-shrink: 0;
  opacity: 0.7;
}
.live-ticker-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl; /* newest text anchored at right; older truncates on left */
  text-align: left;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-style: italic;
}
.live-ticker-text::before {
  content: '';
  unicode-bidi: plaintext; /* preserve actual text direction inside */
}
/* Sub-element used for interim (in-progress) partial text — dimmer */
.live-ticker-text .ticker-interim {
  opacity: 0.55;
}
/* Wave C2 — placeholder state ("Listening…") shown when the ticker is
   visible but no transcript has arrived yet. Softer than real content so
   it reads as "ready, waiting" vs active speech. */
.live-ticker-text.ticker-placeholder {
  opacity: 0.5;
  font-style: italic;
}

/* Animated thinking dots */
.gen-dots {
  display: flex;
  gap: 4px;
  align-items: center;
}
.gen-dots span {
  width: 5px;
  height: 5px;
  background: var(--canvas-950);
  border-radius: 50%;
  animation: thinkBounce 1.2s ease-in-out infinite;
}
.gen-dots span:nth-child(2) {
  animation-delay: 0.15s;
}
.gen-dots span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes thinkBounce {
  0%,
  60%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px) scale(1.2);
    opacity: 1;
  }
}

/* --- FLASHCORE skeleton loader --- */
/* Emil Kowalski: never from scale(0) — enter from 0.95 + opacity */
.flashcore-skeleton {
  flex-direction: column;
  align-items: stretch;
  padding: 14px 20px;
  border-radius: 12px;
  animation: skelEntry 0.25s var(--ease-out-snap, ease-out) both;
}
@keyframes skelEntry {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.gen-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.skel-line {
  height: 12px;
  width: 100%;
  background: linear-gradient(90deg, var(--canvas-200) 25%, var(--canvas-100) 50%, var(--canvas-200) 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skelShimmer 1.2s ease-in-out infinite;
}
/* Stagger skeleton lines — 60ms offset */
.skel-line:nth-child(2) {
  animation-delay: 0.06s;
}
.skel-line:nth-child(3) {
  animation-delay: 0.12s;
}
@keyframes skelShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* Stream preview text — fades in when first token arrives */
.gen-stream-preview {
  font-size: 13px;
  line-height: 1.6;
  color: var(--canvas-900);
  animation: streamFadeIn 0.2s var(--ease-out-snap) both;
  padding: 4px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
@keyframes streamFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Thinking sparkle --- */
.thinking-sparkle {
  position: relative;
  display: inline-block;
}
.thinking-sparkle::before,
.thinking-sparkle::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--terra);
  border-radius: 50%;
  animation: sparkle 1.5s ease-in-out infinite;
}
.thinking-sparkle::before {
  top: -4px;
  left: 50%;
}
.thinking-sparkle::after {
  bottom: -4px;
  right: 0;
  animation-delay: 0.5s;
}
@keyframes sparkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

/* --- Answer Input Bar — rounded pill chat bar with send button inside --- */
.answer-input-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  flex-shrink: 0;
  position: relative;
}
.answer-input-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.answer-input-bar .send-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--terra);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.answer-compose {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  background: var(--canvas-50, #fefdfb);
  border: 1.5px solid var(--canvas-200, #e8e4d9);
  border-radius: 24px;
  padding: 4px 4px 4px 16px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.answer-compose:focus-within {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.12);
}
.answer-compose-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  color: var(--canvas-900, #131314);
  padding: 6px 0;
}
.answer-compose-input::placeholder {
  color: var(--canvas-400, #c4bfa9);
}
.answer-compose .btn-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  max-height: 34px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  flex-grow: 0;
  align-self: center;
  aspect-ratio: 1;
  background: var(--terra);
  color: #fff;
  border: none;
  cursor: pointer;
  transition:
    transform 150ms,
    opacity 0.2s,
    background 0.15s;
}
.answer-compose .btn-send:hover:not(:disabled) {
  background: var(--terra-600, #c4684b);
  transform: scale(1.06);
}
.answer-compose .btn-send:active:not(:disabled) {
  transform: scale(0.95);
}
.answer-compose .btn-send:disabled {
  opacity: 0.4;
}
.answer-compose .btn-send svg {
  width: 14px;
  height: 14px;
}
/* Dark theme */
[data-theme='dark'] .answer-compose {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .answer-compose:focus-within {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
}
[data-theme='dark'] .answer-compose-input {
  color: rgba(255, 255, 255, 0.9);
}
[data-theme='dark'] .answer-compose-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
[data-theme='dark'] .answer-input-bar::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}

/* --- Send Bar --- */
.send-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: var(--white);
  flex-shrink: 0;
  position: relative;
}
/* Soft top edge */
.send-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.send-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--terra, #d97757);
  letter-spacing: 0.02em;
}
.btn-send {
  /* Never show loading/wait cursor — avoids interviewer suspicion */
  cursor: pointer !important;
  transition:
    transform 160ms var(--ease-press, ease-out),
    opacity 0.2s;
}
/* Emil Kowalski: tactile press — scale(0.97), snappy recovery */
.btn-send:active:not(:disabled) {
  transform: scale(0.97);
}
.btn-send:active,
.btn-send:focus,
.btn-send:disabled {
  cursor: pointer !important;
}
.btn-send:disabled {
  opacity: 0.55;
}

/* Electron desktop: regular arrow cursor everywhere — no hand symbol */
body.is-electron,
body.is-electron *,
body.is-electron *:hover,
body.is-electron *:focus,
body.is-electron *:active,
body.is-electron *:disabled,
body.is-electron button,
body.is-electron button:hover,
body.is-electron a,
body.is-electron a:hover,
body.is-electron .btn,
body.is-electron .btn:hover,
body.is-electron .btn-send,
body.is-electron .btn-send:hover,
body.is-electron .btn-send:active,
body.is-electron .btn-send:disabled {
  cursor: default !important;
}
/* Text inputs keep the text cursor */
body.is-electron input,
body.is-electron input:hover,
body.is-electron textarea,
body.is-electron textarea:hover,
body.is-electron select,
body.is-electron select:hover {
  cursor: text !important;
}
/* Live session cursor: default for all, pointer for interactive elements */
body.is-electron #screen-live,
body.is-electron #screen-live * {
  cursor: default !important;
}
body.is-electron #screen-live button,
body.is-electron #screen-live .btn,
body.is-electron #screen-live .topbar-btn,
body.is-electron #screen-live .btn-send,
body.is-electron #screen-live .mode-pill,
body.is-electron #screen-live .tool-btn,
body.is-electron #screen-live .topbar-size-btn,
body.is-electron #screen-live .topbar-reset-btn,
body.is-electron #screen-live .ref-keyword-item,
body.is-electron #screen-live .ans-question-label {
  cursor: pointer !important;
}
body.is-electron #screen-live .live-col-divider {
  cursor: col-resize !important;
}
body.is-electron #screen-live input,
body.is-electron #screen-live textarea {
  cursor: text !important;
}

/* --- Stealth Mode Button --- */
.stealth-topbar-btn {
  position: relative;
  border: 1px solid transparent;
  transition: all 0.2s var(--ease);
}
.stealth-topbar-btn:hover {
  background: rgba(16, 185, 129, 0.06);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.2);
}
.stealth-topbar-btn.active {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #10b981 !important;
  border-color: rgba(16, 185, 129, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08) !important;
}
/* Subtle pulse ring when stealth is on */
.stealth-topbar-btn.active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius-md) + 3px);
  border: 1px solid rgba(16, 185, 129, 0.3);
  animation: stealthRing 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes stealthRing {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(1.06);
  }
}

/* ==========================================================
   ELECTRON DESKTOP — Structural rules only.
   Visual styling moved to end-of-file body.is-electron section.
   ========================================================== */

@keyframes darkAnswerSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Structural: layout, borders, hide elements ── */
body.is-electron .live-layout {
  background: transparent !important;
  height: calc(100vh - 42px) !important;
  height: calc(100dvh - 42px) !important;
  overflow: hidden;
}
body.is-electron {
  border: 3px solid #000;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05) !important;
}
body.is-electron #electron-titlebar {
  border-top: none;
}
body.is-electron .live-main {
  background: transparent !important;
}
body.is-electron .shared-preview-panel {
  display: none !important;
}
body.is-electron .live-col-left-wrap .transcript-panel {
  border-top: none;
  flex: 1;
}

/* All visual styling for desktop live session is at end-of-file under body.is-electron */
body.is-electron .stealth-topbar-btn {
  display: none !important;
}
body.is-electron .answer-item {
  animation: darkAnswerSlideIn 0.35s var(--ease-out-snap, var(--ease));
}
body.is-electron .ans-q-arrow {
  display: none !important;
}
body.is-electron .ans-q-text {
  /* Wrapper — let the inner ans-q-collapsed/ans-q-expanded handle layout */
}
body.is-electron .ans-q-collapsed {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline;
  max-width: 100%;
}
body.is-electron .ans-q-expanded {
  background: rgba(234, 88, 12, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-left-color: var(--terra, #ea580c);
}
body.is-electron .ans-q-linecount {
  color: var(--terra, #ea580c);
  font-weight: 600;
}
/* Q: and Answer: labels — white text for dark glass */
body.is-electron .ans-question-label::before {
  display: none !important;
}
body.is-electron .ans-question-label::after {
  content: '▸';
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 4px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
body.is-electron .ans-question-label.expanded::after {
  transform: rotate(90deg);
}
body.is-electron .ans-body::before {
  content: 'A :';
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--terra);
  margin-bottom: 6px;
}
/* Bullet dots — white for dark glass */
body.is-electron .ans-body.bullet-mode li::before {
  content: '•' !important;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}
/* Input wraps — dark glass */
body.is-electron .transcript-input-wrap,
body.is-electron .answer-input-wrap {
  background: rgba(15, 15, 20, 0.4) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
/* Scrollbars — light on dark */
body.is-electron .panel-body {
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
body.is-electron .panel-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}
body.is-electron .panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
body.is-electron .panel-body::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Roll direction: bottom — only titlebar moves to bottom ── */
body.is-electron.roll-bottom {
  padding-top: 0;
  padding-bottom: 36px;
}
body.is-electron.roll-bottom #electron-titlebar {
  top: auto;
  bottom: 0;
  border-bottom: none;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
/* Position dropdown opens upward when titlebar is at bottom */
body.is-electron.roll-bottom .etb-position-menu {
  top: auto !important;
  bottom: 34px !important;
}

/* ── Panel collapse/expand — structural (visual in end-of-file section) ── */
body.is-electron .panel-head button {
  -webkit-app-region: no-drag !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
body.is-electron .panel-expand-tab {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.4);
}
body.is-electron .panel-expand-tab:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
}

/* ── Column dividers — dark glass ── */
body.is-electron .live-col-divider::after {
  background: rgba(255, 255, 255, 0.12);
}
body.is-electron .live-col-divider::before {
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15) 0px,
    rgba(255, 255, 255, 0.15) 2px,
    transparent 2px,
    transparent 5px
  );
}
body.is-electron .live-col-divider:hover::after,
body.is-electron .live-col-divider.dragging::after {
  background: var(--terra);
  box-shadow: 0 0 8px rgba(217, 119, 87, 0.3);
}

/* --- Topbar Separator --- */
.topbar-sep {
  width: 1px;
  height: 20px;
  background: var(--canvas-200);
  margin: 0 4px;
  flex-shrink: 0;
}

/* --- Active Dot on Audio/Mic Buttons --- */
.topbar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  top: 2px;
  right: 2px;
  transition:
    background 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
  pointer-events: none;
}
.topbar-btn.active .topbar-dot {
  background: #d97757; /* terra orange — ON indicator */
  box-shadow:
    0 0 0 2px #fff,
    0 0 6px rgba(217, 119, 87, 0.55);
  transform: scale(1.15);
}
[data-theme='dark'] .topbar-btn.active .topbar-dot {
  background: #f0a07a;
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.6),
    0 0 8px rgba(240, 160, 122, 0.6);
}

/* --- Capture Live Dot (green when screen shared) --- */
.capture-live-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s var(--ease);
  pointer-events: none;
}
.capture-live-dot.sharing {
  background: var(--red-500);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.45);
  animation: capturePulse 2s ease-in-out infinite;
}
[data-theme='dark'] .capture-live-dot.sharing {
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
@keyframes capturePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
#capture-btn {
  position: relative;
}

/* --- Switch Screen Button --- */
.topbar-btn-sm {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 6px;
  font-size: 0;
}

/* --- Live Credit Display --- */
.live-timer-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-credit {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--terra);
  padding: 2px 8px;
  background: var(--terra-50);
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

/* Desktop (Electron) — ensure credits and answer button are clearly visible */
body.is-electron .live-credit {
  color: #d97757 !important;
  background: rgba(217, 119, 87, 0.15) !important;
  border: 1px solid rgba(217, 119, 87, 0.25);
}
body.is-electron .btn-answer-now {
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
body.is-electron .btn-answer-now:hover {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* --- Timer Warning (last 2 min of practice) --- */
.live-timer.timer-warning {
  color: var(--red-500);
  animation: timerPulse 1s ease-in-out infinite;
}
@keyframes timerPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* --- Screen Capture in Transcript --- */
.t-capture {
  margin-bottom: 18px;
  animation: transcriptIn 0.35s var(--ease);
}
.t-capture-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.t-capture-img {
  max-width: 100%;
  max-height: 160px;
  border-radius: var(--radius-md);
  border: 1px solid var(--canvas-200);
  box-shadow: var(--shadow-xs);
  object-fit: contain;
  cursor: pointer;
  transition: transform 0.2s var(--ease);
}
.t-capture-img:hover {
  transform: scale(1.02);
}

/* --- Voice Source Labels --- */
.t-speaker-label.you {
  color: var(--terra);
}
.t-speaker-label.interviewer {
  color: var(--canvas-500);
}

/* --- Interim (live preview) transcript ---
 * User requirement: every word prints at final brightness from the first
 * frame — no dim/grey/italic/pulse cue while someone is still speaking.
 * Partial and final look IDENTICAL. The only difference is the DOM node
 * gets swapped out when the sentence finalizes; visually nothing changes. */
.t-interim {
  opacity: 1;
  border-left: none;
  padding-left: 0;
  animation: none;
}
.t-interim-text {
  font-style: normal;
  /* inherit the final .t-text color — do not override */
}

/* --- Session Notification Toast (appears during live session) --- */
.session-notif-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 900;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  max-width: 320px;
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06);
  animation: snToastIn 0.35s var(--ease);
  cursor: pointer;
  transition: opacity 0.3s;
}
@keyframes snToastIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.session-notif-toast.sn-toast-out {
  animation: snToastOut 0.3s ease forwards;
}
@keyframes snToastOut {
  to {
    opacity: 0;
    transform: translateX(16px);
  }
}
.sn-toast-icon {
  color: var(--terra);
  flex-shrink: 0;
  margin-top: 1px;
}
.sn-toast-content {
  flex: 1;
  min-width: 0;
}
.sn-toast-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--canvas-900);
  margin-bottom: 2px;
}
.sn-toast-msg {
  font-size: 11.5px;
  color: var(--canvas-500);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sn-toast-dismiss {
  background: none;
  border: none;
  color: var(--canvas-400);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s;
}
.sn-toast-dismiss:hover {
  color: var(--canvas-700);
}

/* Dark theme */
[data-theme='dark'] .session-notif-toast {
  background: var(--bg-lifted);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .sn-toast-title {
  color: var(--text-primary);
}
[data-theme='dark'] .sn-toast-msg {
  color: var(--text-secondary);
}
[data-theme='dark'] .sn-toast-dismiss {
  color: var(--text-muted);
}
[data-theme='dark'] .sn-toast-dismiss:hover {
  color: var(--text-secondary);
}

/* Electron dark glass: notification toast */
body.is-electron .session-notif-toast {
  background: rgba(20, 20, 24, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
body.is-electron .sn-toast-title {
  color: rgba(255, 255, 255, 0.9);
}
body.is-electron .sn-toast-msg {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme='dark'] .topbar-sep {
  background: var(--canvas-700);
}
[data-theme='dark'] .live-credit {
  background: rgba(217, 119, 87, 0.15);
}
[data-theme='dark'] .t-capture-img {
  border-color: var(--canvas-700);
}

/* --- Mobile Controls Bar (hidden on desktop, shown in mobile footer) --- */
.mobile-controls-bar {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  /* Safe area for iPhone home indicator and Android gesture bar */
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-top: 1px solid var(--canvas-100);
}
.mc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: var(--canvas-50);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.mc-btn svg {
  width: 15px;
  height: 15px;
}
.mc-btn.active {
  background: var(--canvas-900);
  color: var(--white);
  opacity: 1;
}
/* Inactive state: dim toggleable buttons so active/inactive is clearly distinct */
.mc-btn:not(.active):not(.mc-send) {
  opacity: 0.55;
}
.mc-btn:hover:not(.active):not(.mc-send) {
  background: var(--canvas-100);
  opacity: 0.85;
}
.mc-spacer {
  flex: 1;
}
.mc-btn.mc-send {
  background: var(--canvas-900);
  color: var(--white);
  width: 38px;
  height: 34px;
  border-radius: 10px;
}
.mc-btn.mc-send:hover {
  background: var(--canvas-800);
}
[data-theme='dark'] .mobile-controls-bar {
  background: var(--bg-card);
  border-top-color: rgba(255, 255, 255, 0.09);
}
[data-theme='dark'] .mc-btn {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
[data-theme='dark'] .mc-btn.active {
  background: var(--bg-lifted);
  color: var(--text-primary);
}
[data-theme='dark'] .mc-btn.mc-send {
  background: var(--bg-lifted);
  color: var(--text-primary);
}
[data-theme='dark'] .topbar-end-btn {
  background: rgba(239, 68, 68, 0.15);
}

/* --- Unified Mobile Feed (hidden on desktop) --- */
.live-unified-feed {
  display: none;
}

.unified-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--canvas-50);
  border-bottom: 1px solid var(--canvas-100);
}
.unified-head h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0;
}
.unified-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}

/* ── Chat bubble layout ── */

/* Transcript items = user/interviewer messages → RIGHT side */
.unified-body .u-transcript {
  max-width: 82%;
  margin-left: auto;
  margin-right: 0;
  padding: 10px 14px;
  background: var(--terra);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  animation: transcriptIn 0.3s var(--ease);
}
.unified-body .u-transcript.is-question {
  background: var(--terra);
  border-left: none;
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
}
.unified-body .u-speaker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 3px;
}
.unified-body .u-speaker.interviewer {
  color: rgba(255, 255, 255, 0.75);
}
.unified-body .u-speaker.you {
  color: rgba(255, 255, 255, 0.85);
}
.unified-body .u-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #fff;
}

/* AI answers = assistant messages → LEFT side */
.unified-body .u-answer {
  max-width: 88%;
  margin-right: auto;
  margin-left: 0;
  background: var(--canvas-75, var(--canvas-50));
  border: 1px solid var(--canvas-100);
  border-radius: 16px 16px 16px 4px;
  overflow: hidden;
  animation: transcriptIn 0.35s var(--ease);
}
.unified-body .u-ans-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--terra);
  padding: 10px 14px 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.unified-body .u-ans-label svg {
  flex-shrink: 0;
}
.unified-body .u-ans-body {
  padding: 8px 14px 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-primary);
}
.unified-body .u-ans-body ul {
  margin: 0;
  padding-left: 16px;
  list-style: disc;
}
.unified-body .u-ans-body li {
  margin-bottom: 4px;
  font-size: 13px;
  line-height: 1.5;
}
.unified-body .u-ans-tp {
  padding: 6px 14px 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.unified-body .u-ans-tp-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.unified-body .u-ans-tp ul {
  margin: 0;
  padding-left: 14px;
  list-style: disc;
}
.unified-body .u-ans-tp li {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.unified-body .u-ans-meta {
  padding: 4px 14px 8px;
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
}
.unified-body .u-ans-model {
  font-weight: 600;
  background: var(--canvas-100);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

/* Generating indicator → LEFT aligned like AI bubble */
.unified-body .u-generating {
  max-width: 60%;
  margin-right: auto;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--canvas-75, var(--canvas-50));
  border: 1px solid var(--canvas-100);
  border-radius: 16px 16px 16px 4px;
  animation: transcriptIn 0.3s var(--ease);
}

/* Unified toolbar */
.unified-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--canvas-50);
  border-top: 1px solid var(--canvas-100);
  overflow-x: auto;
}
.unified-toolbar .tool-btn {
  padding: 5px 10px;
  font-size: 11px;
  white-space: nowrap;
}

/* Unified send bar */
.unified-send-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--canvas-50);
  border-top: 1px solid var(--canvas-100);
}

/* Dark theme for unified feed */
[data-theme='dark'] .unified-head {
  background: var(--bg-card);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}
[data-theme='dark'] .unified-body .u-transcript {
  background: var(--terra-600, var(--terra));
}
[data-theme='dark'] .unified-body .u-transcript.is-question {
  background: var(--terra-600, var(--terra));
}
[data-theme='dark'] .unified-body .u-answer {
  background: var(--bg-elevated);
  border-color: rgba(255, 255, 255, 0.09);
}
[data-theme='dark'] .unified-body .u-generating {
  background: var(--bg-elevated);
  border-color: rgba(255, 255, 255, 0.09);
}
[data-theme='dark'] .unified-body .u-ans-tp {
  border-top-color: rgba(255, 255, 255, 0.07);
}
[data-theme='dark'] .unified-body .u-ans-model {
  background: rgba(255, 255, 255, 0.09);
}
[data-theme='dark'] .unified-toolbar {
  background: var(--bg-card);
  border-top-color: rgba(255, 255, 255, 0.09);
}
[data-theme='dark'] .unified-send-bar {
  background: var(--bg-card);
  border-top-color: rgba(255, 255, 255, 0.09);
}

/* Dark theme for new panels (non-electron) */
[data-theme='dark'] .shared-preview-panel {
  background: var(--bg-card);
}
[data-theme='dark'] .shared-preview-head {
  background: var(--bg-card);
}
[data-theme='dark'] .shared-preview-body {
  background: var(--bg-elevated);
}
[data-theme='dark'] .shared-preview-placeholder {
  color: var(--text-muted);
}
[data-theme='dark'] .shared-preview-fullscreen {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
[data-theme='dark'] .shared-preview-fullscreen:hover {
  background: rgba(217, 119, 87, 0.15);
  color: var(--terra);
}
[data-theme='dark'] .reference-panel {
  background: var(--bg-card);
}
[data-theme='dark'] .ref-keyword-item {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
[data-theme='dark'] .ref-keyword-item:hover {
  background: rgba(217, 119, 87, 0.1);
}
/* (Dark fullscreen overlay styles moved inline with .fullscreen-overlay section above) */

/* --- Responsive --- */
/* --- Mobile PiP Shared Screen Preview --- */
.mobile-pip {
  display: none; /* shown via mobile media query */
  position: absolute;
  top: 10px;
  left: 10px;
  width: 120px;
  height: 68px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--canvas-900);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 0 0 1.5px rgba(255, 255, 255, 0.1);
  z-index: 20;
  cursor: move;
}
#mobile-pip-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
#mobile-pip-video.active {
  display: block;
}
.mobile-pip-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.4);
}
#mobile-pip-video.active ~ .mobile-pip-placeholder {
  display: none;
}
.mobile-pip-fullscreen {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.15s ease;
}
.mobile-pip-fullscreen:hover,
.mobile-pip-fullscreen:active {
  background: var(--terra);
  transform: scale(1.1);
}
/* Green border when sharing */
.mobile-pip.is-sharing {
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    0 0 0 2px rgba(16, 185, 129, 0.5);
}

/* --- Mobile Reference Dropdown --- */
.mobile-ref-dropdown {
  position: absolute;
  top: 8px;
  left: 136px; /* clear the 120px PiP + gap */
  right: 8px;
  z-index: 15;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--canvas-200);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  max-height: 50vh;
  overflow-y: auto;
  animation: mobileRefIn 0.25s ease;
}
@keyframes mobileRefIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.mobile-ref-body {
  padding: 12px;
}
.mobile-ref-body .ref-keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mobile-ref-body .ref-keyword-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--canvas-700);
  background: var(--canvas-50);
  border: 1px solid var(--canvas-100);
}
.mobile-ref-body .ref-keyword-item::before {
  width: 4px;
  height: 4px;
}
.mobile-ref-body .ref-keyword-item.ref-keyword-heading {
  width: 100%;
  font-size: 10px;
  padding: 6px 4px 2px;
  border: none;
  background: transparent;
  color: var(--canvas-500);
  border-radius: 0;
}
.mobile-ref-body .ref-keyword-item.ref-keyword-heading:first-child {
  padding-top: 0;
}
[data-theme='dark'] .mobile-ref-dropdown {
  background: rgba(22, 22, 30, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .mobile-ref-body .ref-keyword-item {
  background: var(--bg-elevated);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}
[data-theme='dark'] .mobile-pip {
  background: #111;
}

/* --- Mobile Topbar Quick Buttons (ref, fullscreen) --- */
.topbar-mobile-btn {
  display: none; /* shown in mobile media query */
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: var(--canvas-50);
  color: var(--canvas-600);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.topbar-mobile-btn:hover,
.topbar-mobile-btn:active {
  background: var(--terra-50);
  color: var(--terra);
}
.topbar-mobile-btn.active {
  background: var(--terra);
  color: #fff;
}
[data-theme='dark'] .topbar-mobile-btn {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}
[data-theme='dark'] .topbar-mobile-btn:hover {
  background: rgba(217, 119, 87, 0.15);
  color: var(--terra);
}

@media (max-width: 768px) {
  /* ─── Unified chat feed — full screen Q&A ─── */
  .live-unified-feed {
    display: flex;
    flex-direction: column;
    background: var(--panel-bg, #fff);
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    min-height: 0;
    position: relative;
    flex: 1;
  }
  .live-panel.answers-panel,
  .live-panel.transcript-panel,
  .live-col-left,
  .live-col-left-wrap,
  .shared-preview-panel,
  .reference-panel,
  .live-col-divider {
    display: none !important;
  }
  .live-main {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  /* ─── Minimal topbar: PiP + mic/audio + end ─── */
  .live-topbar {
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 14px;
    box-shadow: none;
    border-bottom: 1px solid var(--canvas-150, var(--canvas-100));
    justify-content: space-between;
    align-items: center;
  }
  [data-theme='dark'] .live-topbar {
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }
  [data-theme='dark'] .live-unified-feed {
    background: var(--bg);
  }
  .live-top-left {
    display: none !important;
  }
  .live-top-right {
    display: none !important;
  }
  .topbar-sep {
    display: none;
  }

  /* Center section: status + timer */
  .live-top-center {
    gap: 10px;
    flex: 1;
  }
  .live-indicator {
    padding: 5px 10px;
    font-size: 11px;
  }
  .live-timer {
    font-size: 14px;
    font-weight: 600;
  }
  .live-credit {
    font-size: 11px;
    padding: 2px 6px;
  }
  .generating-indicator {
    font-size: 13px;
    padding: 10px 16px;
  }

  /* Topbar right: mic + audio with dots + end */
  .topbar-conv-pills {
    display: flex !important;
    gap: 8px;
    align-items: center;
  }
  .topbar-end-btn {
    display: flex;
  }
  /* Screen capture not supported on mobile browsers */
  #tb-capture {
    display: none !important;
  }

  /* ─── Topbar mobile control buttons (mic / audio) ─── */
  .topbar-mobile-ctrl {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--canvas-100);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition:
      background 0.15s,
      color 0.15s;
  }
  .topbar-mobile-ctrl.active {
    color: var(--terra);
    background: rgba(217, 119, 87, 0.1);
  }
  [data-theme='dark'] .topbar-mobile-ctrl {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
  }
  [data-theme='dark'] .topbar-mobile-ctrl.active {
    color: var(--terra);
    background: rgba(217, 119, 87, 0.12);
  }

  /* Red activity dot on mic/audio */
  .ctrl-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s;
  }
  .ctrl-dot.active {
    background: #ef4444;
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
  }

  /* ─── Unified head: hidden (controls in topbar) ─── */
  .unified-head {
    display: none !important;
  }

  /* ─── Mobile PiP: floating top-left of feed ─── */
  .mobile-pip {
    display: block !important;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    width: 110px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
  }
  .topbar-mobile-btn {
    display: none;
  }

  /* ─── Chat body ─── */
  .unified-body {
    padding-top: 12px !important;
  }

  /* ─── Focus Card layout — latest Q&A is prominent, history is compact ─── */
  .qa-card {
    background: var(--canvas-50, #fafaf9);
    border: 1px solid var(--canvas-150, #e5e5e0);
    border-radius: 14px;
    margin: 0 12px 10px;
    overflow: hidden;
    transition:
      box-shadow 0.2s,
      opacity 0.2s,
      transform 0.2s;
  }
  .qa-card.has-answer {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  }

  /* ── LATEST CARD (Focus Card) — always expanded, prominent, bold ── */
  .qa-card.is-latest {
    background: var(--white, #fff);
    border: 1.5px solid var(--terra, #d97757);
    border-left-width: 4px;
    box-shadow: 0 4px 20px rgba(217, 119, 87, 0.12);
    margin: 8px 12px 14px;
    opacity: 1;
    transform: none;
  }
  .qa-card.is-latest .qa-question {
    padding: 18px 18px 14px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: default;
  }
  .qa-card.is-latest .qa-speaker {
    background: var(--terra, #d97757);
    color: #fff;
  }
  .qa-card.is-latest .qa-chevron {
    display: none;
  }
  .qa-card.is-latest .qa-answer-inner {
    padding: 4px 18px 18px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-primary);
  }
  .qa-card.is-latest .qa-answer-inner ul li {
    margin-bottom: 8px;
  }

  /* ── HISTORY CARDS — stacked below latest, naturally scrolled behind topbar ── */
  .qa-card:not(.is-latest) {
    opacity: 0.45;
    background: var(--canvas-50, #fafaf9);
    transition: opacity 0.2s;
  }
  .qa-card:not(.is-latest):hover,
  .qa-card:not(.is-latest):active {
    opacity: 0.85;
  }
  .qa-card:not(.is-latest) .qa-question {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
  }

  .qa-question {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
  }
  .qa-question .qa-speaker {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--terra);
    letter-spacing: 0.04em;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(217, 119, 87, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qa-question .qa-text {
    flex: 1;
    line-height: 1.4;
  }
  .qa-question .qa-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    color: var(--text-tertiary);
  }
  .qa-card.expanded .qa-chevron {
    transform: rotate(180deg);
  }

  /* Answer section — collapsed by default, always expanded on is-latest */
  .qa-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .qa-card.expanded .qa-answer {
    max-height: 2000px;
    border-top: 1px solid var(--canvas-150, #e5e5e0);
  }
  .qa-card.is-latest .qa-answer {
    border-top: 1px solid rgba(217, 119, 87, 0.15);
  }
  .qa-answer-inner {
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary);
  }
  .qa-answer-inner ul {
    padding-left: 18px;
    margin: 0;
  }
  .qa-answer-inner li {
    margin-bottom: 6px;
  }

  /* Generating state inside card */
  .qa-card .qa-generating {
    padding: 14px 18px;
    font-size: 14px;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid rgba(217, 119, 87, 0.15);
  }
  .qa-card.is-latest .qa-generating {
    color: var(--terra, #d97757);
    font-weight: 500;
  }

  /* Dark theme — Focus Card layout */
  [data-theme='dark'] .qa-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
  }
  [data-theme='dark'] .qa-card.is-latest {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--terra, #d97757);
    box-shadow: 0 4px 20px rgba(217, 119, 87, 0.2);
  }
  [data-theme='dark'] .qa-card.is-latest .qa-answer-inner {
    color: var(--text-primary);
  }
  [data-theme='dark'] .qa-card:not(.is-latest) {
    opacity: 0.55;
  }
  [data-theme='dark'] .qa-card:not(.is-latest):hover {
    opacity: 0.85;
  }
  [data-theme='dark'] .qa-card.expanded .qa-answer {
    border-top-color: rgba(255, 255, 255, 0.06);
  }
  [data-theme='dark'] .qa-card .qa-generating {
    border-top-color: rgba(255, 255, 255, 0.06);
  }
  [data-theme='dark'] .qa-question {
    color: var(--text-primary);
  }

  /* ─── Hide toolbar + Answer Now on mobile ─── */
  .unified-toolbar {
    display: none !important;
  }
  .btn-answer-now {
    display: none !important;
  }

  /* ─── Bottom bar: text input + send button ─── */
  .mobile-controls-bar {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--panel-bg, #fff);
    border-top: 1px solid var(--canvas-150, var(--canvas-100));
  }
  .mc-text-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 1.5px solid var(--canvas-200, #e5e2dd);
    border-radius: 22px;
    background: var(--canvas-50, #fafaf8);
    font-size: 15px;
    font-family: inherit;
    color: var(--text-primary, #1a1a1a);
    outline: none;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
  }
  .mc-text-input:focus {
    border-color: var(--terra, #d97757);
    background: var(--white, #fff);
  }
  .mc-text-input::placeholder {
    color: var(--text-tertiary, #a8a29e);
  }
  .unified-send-bar {
    display: none !important;
  }
  .mc-btn.mc-send {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    border-radius: 22px;
    background: var(--terra, #d97757);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
  }
  .mc-btn.mc-send::after {
    content: none;
  }
  .mc-btn.mc-send:hover,
  .mc-btn.mc-send:active {
    background: var(--terra-600, #c56a4a);
  }
  [data-theme='dark'] .mc-text-input {
    background: var(--bg-elevated, #2a2a2a);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e5e5e5);
  }
  [data-theme='dark'] .mc-text-input:focus {
    border-color: var(--terra, #d97757);
    background: var(--bg-card, #333);
  }
  [data-theme='dark'] .mc-btn.mc-send {
    background: var(--terra, #d97757);
    color: #fff;
  }
  [data-theme='dark'] .mobile-controls-bar {
    background: var(--bg);
    border-top-color: rgba(255, 255, 255, 0.06);
  }

  /* ─── Hide shortcuts ─── */
  .live-shortcut-bar {
    display: none !important;
  }
  .shortcut-guide-overlay {
    display: none !important;
  }
}
/* Hide desktop-only buttons on mobile — no screen share / capture / stealth / system audio */
@media (max-width: 767px) {
  #pc-audio-btn,
  #capture-btn,
  #switch-screen-btn,
  #stealth-btn,
  #fs-capture-btn,
  #fs-switch-screen-btn,
  #overlay-btn {
    display: none !important;
  }
}
@media (max-width: 480px) {
  .live-main {
    gap: 0;
    padding: 0;
  }
  .live-topbar {
    padding: 6px 10px;
    gap: 5px;
  }
  .live-top-center {
    gap: 6px;
  }
  .live-indicator {
    padding: 4px 8px;
    font-size: 11px;
  }
  .live-timer {
    font-size: 13px;
    font-weight: 600;
  }
  .topbar-mobile-ctrl {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .topbar-mobile-ctrl svg {
    width: 14px;
    height: 14px;
  }
  .topbar-end-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
  }
  .topbar-end-btn svg {
    width: 13px;
    height: 13px;
  }
  .mc-btn.mc-send {
    height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    font-size: 13px;
  }
  .mobile-controls-bar {
    padding: 8px 10px;
  }
  .unified-body {
    padding: 8px;
    gap: 6px;
  }
  .qa-card {
    margin: 0 8px 8px;
    border-radius: 12px;
  }
  .qa-question {
    padding: 12px 14px;
    font-size: 13px;
    gap: 8px;
  }
  .qa-answer-inner {
    padding: 12px 14px;
    font-size: 13px;
  }
  .mobile-pip {
    width: 90px;
    height: 60px;
    border-radius: 8px;
  }
  .unified-toolbar .tool-btn {
    padding: 5px 8px;
    font-size: 12px;
    min-height: 36px;
  }
  .generating-indicator {
    font-size: 13px;
    padding: 8px 14px;
  }
}
@media (max-width: 390px) {
  .mobile-controls-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mobile-controls-bar::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 360px) {
  .live-topbar {
    padding: 5px 8px;
  }
  .topbar-mobile-ctrl {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }
  .topbar-end-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  .topbar-end-btn svg {
    width: 12px;
    height: 12px;
  }
  .mc-btn.mc-send {
    height: 38px;
    padding: 0 18px;
    font-size: 12.5px;
  }
  .mobile-controls-bar {
    padding: 6px 8px;
  }
  .unified-body {
    padding: 6px;
    gap: 5px;
  }
  .qa-card {
    margin: 0 6px 6px;
    border-radius: 10px;
  }
  .qa-question {
    padding: 10px 12px;
    font-size: 12.5px;
  }
  .qa-answer-inner {
    padding: 10px 12px;
    font-size: 12.5px;
  }
  .mobile-pip {
    width: 80px;
    height: 54px;
    top: 8px;
    left: 8px;
  }
}

/* Wide monitors */
@media (min-width: 1440px) {
  .live-main {
    grid-template-columns: 320px 4px 1fr 4px 280px;
  }
}

/* Vertical monitor — REMOVED. Legacy 3-column override that collapsed the
   layout to a single 180px row on tall viewports, leaving the rest of the
   screen as empty white. The newer 2-column layout at #screen-live .live-main
   (line ~9092) is the source of truth; this block is no longer needed.
   The original rules are intentionally deleted so no browser can resurrect
   them via any media-query parsing quirk. */

/* Tablet */
@media (min-width: 769px) and (max-width: 1023px) {
  .live-main {
    grid-template-columns: 240px 4px 1fr 0px 0px;
  }
  .reference-panel {
    display: none;
  }
  .live-col-divider:last-of-type {
    display: none;
  }
}

/* =====================================================
   AUTH PAGE — Clean, readable, professional
   Inspired by Linear / Vercel / Notion sign-in pages
   ===================================================== */

/* --- Nuke ALL effects on auth screen globally --- */
#screen-auth,
#screen-auth *,
#screen-auth *::before,
#screen-auth *::after {
  text-shadow: none !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ========================
   LIGHT MODE
   ======================== */

/* Left panel — clean white */
.auth-left {
  background: #fff !important;
}

/* Logo */
.auth-left .logo-name {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}

/* Heading — bold, dark, unmissable */
.auth-left .auth-box h2 {
  color: #1a1a1a !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 6px !important;
}

/* Subtext — readable gray */
.auth-left .auth-box p {
  color: #6b6b6b !important;
  font-size: 14.5px !important;
  margin-bottom: 28px !important;
}

/* Labels — clear, medium weight */
.auth-left .auth-box .input-group label {
  color: #333 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

/* Inputs — visible border, clean background */
.auth-left .auth-box .input-group input {
  background: #fff !important;
  border: 1.5px solid #d0d0d0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: #1a1a1a !important;
  font-size: 16px !important;
  padding: 11px 14px !important;
}
.auth-left .auth-box .input-group input:focus {
  border-color: #1a1a1a !important;
  box-shadow: none !important;
  outline: none !important;
  background: #fff !important;
}
.auth-left .auth-box .input-group input::placeholder {
  color: #aaa !important;
}

/* Primary button — solid dark, high contrast */
.auth-left .auth-box .btn-primary {
  background: #1a1a1a !important;
  color: #fff !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
}
.auth-left .auth-box .btn-primary:hover {
  background: #333 !important;
  box-shadow: none !important;
  transform: none !important;
}
/* ── btn-ready glow — overrides the no-glow rule above ── */
.auth-left .auth-box .btn-primary.btn-ready {
  background: var(--terra) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 3px rgba(217, 119, 87, 0.22),
    0 6px 24px rgba(217, 119, 87, 0.4) !important;
  transition:
    background 0.25s ease,
    box-shadow 0.3s ease !important;
}
.auth-left .auth-box .btn-primary.btn-ready:hover {
  background: var(--terra-600, #c46849) !important;
  box-shadow:
    0 0 0 4px rgba(217, 119, 87, 0.28),
    0 8px 28px rgba(217, 119, 87, 0.5) !important;
  transform: none !important;
}
[data-theme='dark'] .auth-left .auth-box .btn-primary.btn-ready {
  background: #e07c58 !important;
  box-shadow:
    0 0 0 3px rgba(224, 124, 88, 0.25),
    0 6px 28px rgba(224, 124, 88, 0.45) !important;
}

/* Ghost button */
.auth-left .auth-box .btn-ghost {
  color: #888 !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
}
.auth-left .auth-box .btn-ghost:hover {
  color: #1a1a1a !important;
  background: #f5f5f5 !important;
  box-shadow: none !important;
}

/* Error banner */
.auth-left .auth-box .auth-error-banner {
  margin-bottom: 10px;
}

/* Right panel */
.auth-right .auth-visual h3 {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.auth-right .auth-visual p {
  color: #999 !important;
  font-size: 13.5px !important;
}

/* ========================
   DARK MODE
   ======================== */

/* Left panel — deep dark warm */
[data-theme='dark'] .auth-left {
  background: var(--bg) !important;
}

/* Logo */
[data-theme='dark'] .auth-left .logo-name {
  color: #e0e0e0 !important;
}

/* Heading — bright white, clearly readable */
[data-theme='dark'] .auth-left .auth-box h2 {
  color: #f0f0f0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
}

/* Subtext — medium gray, not faint */
[data-theme='dark'] .auth-left .auth-box p {
  color: #909090 !important;
  font-size: 14.5px !important;
}

/* Labels — light enough to read clearly */
[data-theme='dark'] .auth-left .auth-box .input-group label {
  color: #b0b0b0 !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
}

/* Inputs — visible border against dark bg */
[data-theme='dark'] .auth-left .auth-box .input-group input {
  background: var(--bg-elevated) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  font-size: 16px !important;
  padding: 11px 14px !important;
}
[data-theme='dark'] .auth-left .auth-box .input-group input:focus {
  border-color: #d97757 !important;
  box-shadow: none !important;
  outline: none !important;
  background: var(--bg-lifted) !important;
}
[data-theme='dark'] .auth-left .auth-box .input-group input::placeholder {
  color: #555 !important;
}

/* Primary button — terracotta, bold, stands out */
[data-theme='dark'] .auth-left .auth-box .btn-primary {
  background: #d97757 !important;
  color: #fff !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
[data-theme='dark'] .auth-left .auth-box .btn-primary:hover {
  background: #e08868 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Ghost button */
[data-theme='dark'] .auth-left .auth-box .btn-ghost {
  color: #808080 !important;
  box-shadow: none !important;
}
[data-theme='dark'] .auth-left .auth-box .btn-ghost:hover {
  color: #ccc !important;
  background: #1e1e22 !important;
  box-shadow: none !important;
}

/* Error banner dark */
[data-theme='dark'] .auth-left .auth-box .auth-error-banner {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
}

/* Right panel — slightly darker for contrast split */
[data-theme='dark'] .auth-right {
  background: #0b0b0e !important;
}
[data-theme='dark'] .auth-right::before,
[data-theme='dark'] .auth-right::after {
  opacity: 0.12 !important;
}
[data-theme='dark'] .auth-right .auth-visual h3 {
  color: #d0d0d0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
[data-theme='dark'] .auth-right .auth-visual p {
  color: #707070 !important;
  font-size: 13.5px !important;
}

/* Auth — mobile responsive (≤767px tablet/mobile) */
@media (max-width: 767px) {
  /* Logo must be white on mobile — dark bg behind floating brand */
  .auth-left .logo.auth-logo-desktop .logo-name {
    color: #fff !important;
  }
  .auth-left .logo.auth-logo-desktop .logo-svg {
    filter: brightness(1.5) !important;
  }

  .auth-left .auth-box h2 {
    font-size: 22px !important;
    margin-bottom: 4px !important;
    font-weight: 700 !important;
  }
  .auth-left .auth-box p {
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }
  .auth-left .auth-box .input-group {
    margin-bottom: 10px !important;
  }
  .auth-left .auth-box .input-group label {
    font-size: 14px !important;
    margin-bottom: 4px !important;
  }
  .auth-left .auth-box .input-group input {
    padding: 12px 16px !important;
    font-size: 16px !important;
  }
  .auth-left .auth-box .btn-primary {
    padding: 12px 16px !important;
    font-size: 16px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 14px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
  }
  .auth-left .auth-box .auth-error-banner {
    margin-bottom: 8px !important;
    padding: 10px 12px !important;
  }
  .auth-left .auth-box .auth-error-text {
    font-size: 14px !important;
  }
  .auth-left .auth-box .btn-ghost.btn-full {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    font-size: 14px !important;
  }
}

/* Auth — small mobile (≤479px) — still readable per HIG */
@media (max-width: 479px) {
  .auth-left .auth-box h2 {
    font-size: 20px !important;
    margin-bottom: 3px !important;
  }
  .auth-left .auth-box p {
    font-size: 14px !important;
    margin-bottom: 10px !important;
  }
  .auth-left .auth-box .input-group {
    margin-bottom: 8px !important;
  }
  .auth-left .auth-box .input-group label {
    font-size: 13px !important;
    margin-bottom: 3px !important;
  }
  .auth-left .auth-box .input-group input {
    padding: 10px 16px !important;
    font-size: 16px !important;
  }
  .auth-left .auth-box .btn-primary {
    padding: 10px 16px !important;
    font-size: 15px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    min-height: 44px !important;
  }
  .auth-left .auth-box .auth-error-banner {
    margin-bottom: 6px !important;
    padding: 8px 12px !important;
  }
  .auth-left .auth-box .auth-error-text {
    font-size: 13px !important;
  }
  .auth-left .auth-box .btn-ghost.btn-full {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    font-size: 13px !important;
  }
}

/* ---- Live Session Shortcut Hint Bar — permanently hidden.
   Moved into the ⋮ topbar menu's "Shortcuts" expandable panel. ---- */
.live-shortcut-bar,
.live-shortcut-bar.expanded {
  display: none !important;
}
.live-shortcut-bar:active {
  cursor: grabbing;
}
.live-shortcut-bar:hover {
  opacity: 0.9;
}
/* Toggle button for shortcut bar — hidden; moved into the ⋮ topbar menu */
.shortcut-toggle-btn {
  display: none !important;
  position: fixed;
  bottom: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: rgba(19, 19, 20, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: none;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  cursor: pointer;
  z-index: 900;
  opacity: 0.4;
  transition: opacity 0.25s ease;
}
.shortcut-toggle-btn:hover {
  opacity: 0.8;
}
.shortcut-toggle-btn.hidden {
  display: none;
}
/* Fullscreen shortcut bar — always hidden */
.fs-shortcut-bar {
  display: none !important;
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: rgba(19, 19, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  z-index: 10001;
  opacity: 0.4;
  transition: opacity 0.25s ease;
  cursor: grab;
  user-select: none;
}
.fs-shortcut-bar:active {
  cursor: grabbing;
}
.fs-shortcut-bar:hover {
  opacity: 0.9;
}
.shortcut-hint-key {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  padding: 3px 6px;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.shortcut-hint-key kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
.shortcut-hint-key.flash {
  background: rgba(217, 119, 87, 0.3);
  color: #fff;
}
.shortcut-hint-key.flash kbd {
  background: var(--terra);
  color: #fff;
  border-color: var(--terra);
}

/* ---- Shortcut Guide Overlay (shown on session start) ---- */
/* Shortcut guide — floating draggable panel */
.shortcut-guide-overlay {
  position: fixed;
  z-index: 10002;
  animation: sgFadeIn 0.25s ease;
  pointer-events: auto;
}
.shortcut-guide-overlay.fade-out {
  animation: sgFadeOut 0.25s ease forwards;
}
@keyframes sgFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes sgFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.shortcut-guide-card {
  background: var(--white);
  border-radius: 14px;
  padding: 0;
  width: 260px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  text-align: center;
  overflow: hidden;
}
.shortcut-guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--canvas-50);
  cursor: grab;
  user-select: none;
  border-bottom: 1px solid var(--canvas-100);
}
.shortcut-guide-header:active {
  cursor: grabbing;
}
.shortcut-guide-title {
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--canvas-700);
  margin: 0;
}
.shortcut-guide-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--canvas-400);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s;
}
.shortcut-guide-close:hover {
  background: transparent;
  color: var(--canvas-700);
}
.shortcut-guide-subtitle {
  display: none;
}
.shortcut-guide-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
  padding: 6px 0;
}
.shortcut-guide-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  background: transparent;
  border-radius: 0;
}
.shortcut-guide-row:hover {
  background: var(--canvas-50);
}
.shortcut-guide-keys {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--canvas-500);
}
.shortcut-guide-keys kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: var(--canvas-700);
  background: var(--white);
  border: 1px solid var(--canvas-200);
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.shortcut-guide-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--canvas-600);
}
.shortcut-guide-hint {
  display: none;
}
[data-theme='dark'] .shortcut-guide-card {
  background: var(--canvas-100);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .shortcut-guide-header {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .shortcut-guide-row:hover {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .shortcut-guide-keys kbd {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
  color: var(--canvas-800);
}

/* ---- Pending Feedback Banner (Studio) ---- */
.pending-fb-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 0 0 12px;
  background: linear-gradient(135deg, var(--terra-50), var(--canvas-50));
  border: 1px solid var(--terra-100);
  border-radius: 10px;
  animation: pfbIn 0.3s ease;
}
.pending-fb-banner.pfb-out {
  animation: pfbOut 0.3s ease forwards;
}
@keyframes pfbIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pfbOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}
.pfb-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.pfb-text {
  flex: 1;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--canvas-700);
}
.pfb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pfb-btn {
  font-size: 11.5px !important;
  padding: 5px 14px !important;
}
.pfb-dismiss {
  font-size: 11.5px !important;
  padding: 5px 10px !important;
  color: var(--canvas-500) !important;
}
[data-theme='dark'] .pending-fb-banner {
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.08), rgba(255, 255, 255, 0.03));
  border-color: rgba(217, 119, 87, 0.15);
}
[data-theme='dark'] .pfb-text {
  color: var(--canvas-300);
}

/* ============================================
   Landing Pricing Cards — Mobile Overrides
   session.css loads last → !important wins cascade
   ============================================ */
@media (max-width: 767px) {
  .lp-price-card {
    padding: 24px 18px 20px !important;
  }
  .lp-price-name {
    font-size: 18px !important;
  }
  .lp-price-story {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  .lp-price-amount {
    font-size: 25px !important;
  }
  .lp-price-interval {
    font-size: 12.5px !important;
  }
  .lp-price-detail {
    font-size: 12.5px !important;
  }
  .lp-price-btn {
    font-size: 12.5px !important;
    padding: 9px 20px !important;
  }
  .lp-price-hero .lp-price-btn {
    font-size: 12.5px !important;
    padding: 9px 20px !important;
  }
  .lp-price-badge {
    font-size: 9.5px !important;
  }
  .lp-price-icon {
    width: 44px !important;
    height: 44px !important;
  }
  .lp-pricing-trust {
    font-size: 12.5px !important;
  }
}
@media (max-width: 479px) {
  .lp-price-card {
    padding: 18px 14px !important;
  }
  .lp-price-name {
    font-size: 17px !important;
  }
  .lp-price-story {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }
  .lp-price-amount {
    font-size: 22px !important;
  }
  .lp-price-interval {
    font-size: 11px !important;
  }
  .lp-price-detail {
    font-size: 12px !important;
    margin-bottom: 12px !important;
  }
  .lp-price-btn {
    font-size: 12px !important;
    padding: 7px 18px !important;
  }
  .lp-price-hero .lp-price-btn {
    font-size: 12px !important;
    padding: 7px 18px !important;
  }
  .lp-price-badge {
    font-size: 9px !important;
    padding: 2px 10px !important;
  }
  .lp-price-icon {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 10px !important;
  }
  .lp-pricing-trust {
    font-size: 11px !important;
  }
}

/* ── Accessibility: restore focus-visible outline for auth inputs (overrides outline:none !important) ── */
.auth-left .auth-box .input-group input:focus-visible {
  outline: 2px solid #1a1a1a !important;
  outline-offset: 2px !important;
}
[data-theme='dark'] .auth-left .auth-box .input-group input:focus-visible {
  outline: 2px solid #d97757 !important;
  outline-offset: 2px !important;
}

/* ── H9: Credit Warning Bar ── */
.credit-warning-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #fef3c7;
  border-bottom: 1px solid #fcd34d;
  font-size: 12.5px;
  color: #92400e;
  z-index: 100;
  animation: cwb-slide-in 0.25s ease-out;
}
@keyframes cwb-slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.credit-warning-icon {
  flex-shrink: 0;
  color: #d97706;
}
.credit-warning-text {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.credit-warning-btn {
  flex-shrink: 0;
  padding: 3px 12px;
  border: none;
  border-radius: 6px;
  background: #d97706;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.credit-warning-btn:hover {
  background: #b45309;
}
.credit-warning-dismiss {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #92400e;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.credit-warning-dismiss:hover {
  opacity: 1;
}

/* Dark theme */
[data-theme='dark'] .credit-warning-bar {
  background: rgba(146, 64, 14, 0.18);
  border-bottom-color: rgba(217, 119, 6, 0.25);
  color: #fbbf24;
}
[data-theme='dark'] .credit-warning-icon {
  color: #fbbf24;
}
[data-theme='dark'] .credit-warning-btn {
  background: #d97706;
  color: #fff;
}
[data-theme='dark'] .credit-warning-btn:hover {
  background: #f59e0b;
}
[data-theme='dark'] .credit-warning-dismiss {
  color: #fbbf24;
}

/* ── H9: Quick Credit Purchase Overlay ── */
.quick-credit-overlay {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.quick-credit-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.quick-credit-card {
  width: 340px;
  max-width: 92vw;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.2s ease;
}
.quick-credit-overlay.open .quick-credit-card {
  transform: translateY(0) scale(1);
}
.quick-credit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.quick-credit-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--canvas-900, #1a1a1a);
}
.quick-credit-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--canvas-500, #6b7280);
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.15s;
}
.quick-credit-close:hover {
  color: var(--canvas-900, #1a1a1a);
}
.quick-credit-packs {
  padding: 10px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quick-credit-pack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.quick-credit-pack:hover {
  border-color: rgba(217, 119, 87, 0.3);
  background: rgba(217, 119, 87, 0.04);
}
.quick-credit-pack-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.quick-credit-pack-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--canvas-900, #1a1a1a);
}
.quick-credit-pack-credits {
  font-size: 11.5px;
  color: var(--canvas-500, #6b7280);
}
.quick-credit-buy-btn {
  padding: 6px 16px;
  border: none;
  border-radius: 8px;
  background: var(--terra, #d97757);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.1s;
}
.quick-credit-buy-btn:hover {
  background: #c4684a;
}
.quick-credit-buy-btn:active {
  transform: scale(0.97);
}

/* ── Straight edges — no rounded corners for panels/pills in live session ── */
/* NOTE: .topbar-btn intentionally excluded — buttons use border-radius: 99px (pill) */
.live-panel,
.live-panel.panel-dragging,
#screen-live.screen-behind-mode .live-panel,
.topbar-end-btn,
.topbar-size-group,
.topbar-size-btn,
.topbar-reset-btn,
.answer-mode-pills,
.mode-pill,
.mode-pill.active,
.live-indicator,
.live-session-type,
.ref-keyword-item,
#screen-behind-exit-btn,
.sfb-comment,
.quick-credit-buy-btn,
.mc-btn {
  border-radius: 0 !important;
}

/* Dark theme — quick credit overlay */
[data-theme='dark'] .quick-credit-card {
  background: #1e1e1e;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .quick-credit-header {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .quick-credit-pack {
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .quick-credit-pack:hover {
  border-color: rgba(217, 119, 87, 0.3);
  background: rgba(217, 119, 87, 0.08);
}

/* Mobile: credit warning bar wraps */
@media (max-width: 600px) {
  .credit-warning-bar {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
  }
  .credit-warning-text {
    white-space: normal;
    font-size: 11.5px;
  }
  .quick-credit-card {
    width: 300px;
  }
}

/* Fix #13: Mobile touch targets — WCAG 44px minimum */
@media (max-width: 768px) {
  .topbar-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
  }
  .topbar-size-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .topbar-end-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Fix #21: Long JD / answer text overflow */
.ans-q-text,
.ans-body,
.t-text,
.u-text,
.u-ans-body {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── Narrow screen — auto-collapse side panels when window is too tight ──── */
/* At 900px: hide reference panel. At 680px: hide both side panels entirely. */
@media (max-width: 900px) {
  .live-main {
    /* PC/monitor stays 25/75 even at narrow desktop widths.
       Mobile breakpoint at 680px collapses to single-column chat UI. */
    grid-template-columns: 25% 1fr !important;
  }
  .reference-panel,
  #live-divider-right {
    display: none !important;
  }
  .panel-expand-right {
    display: none !important;
  }
}
@media (max-width: 680px) {
  .live-main {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }
  .live-col-left-wrap,
  #live-divider-left,
  #live-divider-right,
  .reference-panel {
    display: none !important;
  }
  .answers-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .panel-expand-left,
  .panel-expand-right {
    display: none !important;
  }
}

/* ── End Session Modal — two-option layout ───────────────────────────────── */
.end-session-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.end-session-option {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: var(--canvas-2, #f8f8f9);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.end-session-option:hover {
  background: var(--canvas-3, #f0f0f2);
  border-color: var(--border-strong, rgba(0, 0, 0, 0.15));
}

.eso-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eso-icon-end {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}
.eso-icon-close {
  background: rgba(217, 119, 87, 0.12);
  color: var(--terra, #d97757);
}

.eso-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.eso-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #111);
  line-height: 1.3;
}
.eso-desc {
  font-size: 11.5px;
  color: var(--text-secondary, #666);
  line-height: 1.4;
}

[data-theme='dark'] .end-session-option {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .end-session-option:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}
[data-theme='dark'] .eso-title {
  color: rgba(255, 255, 255, 0.9);
}
[data-theme='dark'] .eso-desc {
  color: rgba(255, 255, 255, 0.5);
}

/* ── Continue Interview modal ────────────────────────────────────────────── */
.continue-modal-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(217, 119, 87, 0.12);
  color: var(--terra, #d97757);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 4px;
}

#modal-continue-session .modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.continue-countdown-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.continue-countdown-track {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--canvas-3, #e8e8ec);
  overflow: hidden;
}
.continue-countdown-bar {
  height: 100%;
  width: 100%;
  background: var(--terra, #d97757);
  border-radius: 99px;
  transition: width 1s linear;
}
.continue-countdown-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, #888);
  min-width: 32px;
  text-align: right;
}

[data-theme='dark'] .continue-countdown-track {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Model Switcher ────────────────────────────────────────────────────────── */
.model-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.model-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  font-size: 10.5px;
  height: 28px !important;
  max-height: 28px !important;
  min-height: 28px !important;
  box-sizing: border-box !important;
  font-weight: 600;
  color: var(--text-secondary, #666);
  background: var(--canvas-2, #f5f5f7);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
  line-height: 1;
}
.model-switcher-btn:hover {
  background: var(--canvas-3, #eaeaed);
  color: var(--text-primary, #111);
  border-color: var(--border-strong, rgba(0, 0, 0, 0.15));
}
.model-switcher-btn .ms-caret,
.model-switcher-btn .model-switcher-caret {
  opacity: 0.5;
  transition: transform 0.15s;
}
.model-switcher-btn.open .ms-caret,
.model-switcher-btn.open .model-switcher-caret {
  transform: rotate(180deg);
  opacity: 0.8;
}

/* Dropdown menu */
.model-switcher-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  max-height: 70vh;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0, 0, 0, 0.1));
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  scrollbar-width: thin;
}
.model-switcher-menu.open {
  display: block;
}

.ms-group-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, #aaa);
  padding: 8px 10px 4px;
  display: block;
}

.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #111);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.ms-option:hover {
  background: var(--canvas-2, #f5f5f7);
}
.ms-option.active {
  color: var(--terra, #d97757);
  font-weight: 700;
  background: rgba(217, 119, 87, 0.07);
}
.ms-option .ms-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--terra, #d97757);
  opacity: 0;
}
.ms-option.active .ms-check {
  opacity: 1;
}
.ms-option-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ms-option-name {
  line-height: 1.2;
}
.ms-option-sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-tertiary, #aaa);
  line-height: 1.2;
}

/* Fullscreen variant — anchors to fs-top-right */
.model-switcher-fs .model-switcher-menu {
  right: 0;
  background: rgba(30, 30, 35, 0.97);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
/* Model switcher — dark text on light screen, light text on dark screen */
.model-switcher-fs .model-switcher-btn {
  background: var(--cg-topbar-btn-bg);
  border: 1px solid var(--cg-topbar-btn-border);
  border-radius: 20px;
  color: var(--cg-topbar-btn-text);
}
.model-switcher-fs .model-switcher-btn:hover {
  background: var(--cg-topbar-btn-hover);
  color: var(--cg-topbar-text);
}
.model-switcher-fs .ms-group-label {
  color: rgba(255, 255, 255, 0.35);
}
.model-switcher-fs .ms-option {
  color: rgba(255, 255, 255, 0.82);
}
.model-switcher-fs .ms-option:hover {
  background: rgba(255, 255, 255, 0.08);
}
.model-switcher-fs .ms-option.active {
  background: rgba(217, 119, 87, 0.15);
}
.model-switcher-fs .ms-option-sub {
  color: rgba(255, 255, 255, 0.35);
}

/* Mobile variant — upward anchor if near bottom */
.model-switcher-mobile .model-switcher-menu {
  right: 0;
  top: auto;
  bottom: calc(100% + 6px);
}

/* Dark theme */
[data-theme='dark'] .model-switcher-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
}
[data-theme='dark'] .model-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}
[data-theme='dark'] .model-switcher-menu {
  background: #1e1e23;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-theme='dark'] .ms-option {
  color: rgba(255, 255, 255, 0.82);
}
[data-theme='dark'] .ms-option:hover {
  background: rgba(255, 255, 255, 0.07);
}
[data-theme='dark'] .ms-option.active {
  background: rgba(217, 119, 87, 0.14);
}
[data-theme='dark'] .ms-option-sub {
  color: rgba(255, 255, 255, 0.35);
}
[data-theme='dark'] .ms-group-label {
  color: rgba(255, 255, 255, 0.3);
}

/* ── Answer Code Blocks ───────────────────────────────────────────────────── */
.ans-code-block {
  display: block;
  background: #1a1a22;
  color: #e2e2e9;
  font-family: 'Fira Mono', 'Cascadia Code', 'Consolas', 'Menlo', monospace;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 8px 0;
  overflow-x: auto;
  white-space: pre;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

[data-theme='dark'] .ans-code-block {
  background: #111118;
  border-color: rgba(255, 255, 255, 0.1);
}

/* ── Online IDE Guide Card ────────────────────────────────────────────────── */
/* Shown on technical/coding interview answers that contain code blocks or     */
/* when coding intent is detected in the question ("let's open the IDE", etc.) */

.ide-guide {
  margin: 8px 0 4px;
  border: 1px solid rgba(217, 119, 87, 0.28);
  border-left: 3px solid var(--terra, #d97757);
  border-radius: 8px;
  background: rgba(217, 119, 87, 0.05);
  overflow: hidden;
  font-size: 11px;
}

.ide-guide-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(217, 119, 87, 0.09);
  user-select: none;
}

.ide-guide-icon-svg {
  flex-shrink: 0;
  color: var(--terra, #d97757);
  opacity: 0.85;
}

.ide-guide-title {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--terra, #d97757);
  text-transform: uppercase;
}

.ide-guide-lang-badge {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(217, 119, 87, 0.15);
  color: var(--terra, #d97757);
  border: 1px solid rgba(217, 119, 87, 0.3);
  letter-spacing: 0.02em;
}

.ide-guide-toggle {
  margin-left: auto;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition:
    color 0.15s,
    background 0.15s;
}
.ide-guide-toggle:hover {
  color: rgba(0, 0, 0, 0.65);
  background: rgba(0, 0, 0, 0.06);
}

.ide-guide-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ide-guide-url-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ide-guide-ide-label {
  font-size: 10.5px;
  color: #555;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ide-guide-btn {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(217, 119, 87, 0.5);
  background: transparent;
  color: var(--terra, #d97757);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.ide-guide-btn:hover {
  background: var(--terra, #d97757);
  color: #fff;
}

.ide-guide-open-btn {
  background: rgba(217, 119, 87, 0.12);
}

.ide-guide-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  counter-reset: ide-step;
}

.ide-guide-steps li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 10.5px;
  line-height: 1.45;
  color: #444;
}

.ide-guide-step-num {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(217, 119, 87, 0.14);
  color: var(--terra, #d97757);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* Dark theme */
[data-theme='dark'] .ide-guide {
  background: rgba(217, 119, 87, 0.07);
  border-color: rgba(217, 119, 87, 0.22);
}
[data-theme='dark'] .ide-guide-head {
  background: rgba(217, 119, 87, 0.1);
}
[data-theme='dark'] .ide-guide-ide-label {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme='dark'] .ide-guide-steps li {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme='dark'] .ide-guide-toggle {
  color: rgba(255, 255, 255, 0.35);
}
[data-theme='dark'] .ide-guide-toggle:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Cross-Device Watch Mode Banner ──────────────────────────────────────── */
.watch-mode-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--terra, #d97757);
  background: rgba(217, 119, 87, 0.1);
  border: 1px solid rgba(217, 119, 87, 0.25);
  border-radius: 8px;
  margin-left: 8px;
}
[data-theme='dark'] .watch-mode-banner {
  background: rgba(217, 119, 87, 0.12);
  border-color: rgba(217, 119, 87, 0.3);
}

/* Emil Kowalski: reduced motion — keep opacity/color, remove movement */
@media (prefers-reduced-motion: reduce) {
  .answer-item,
  .answer-item .ans-question-label,
  .answer-item .ans-body,
  .answer-item .ans-meta,
  .flashcore-skeleton,
  .gen-stream-preview,
  .generating-indicator {
    animation-duration: 0.01ms !important;
  }
  .topbar-btn,
  .btn-send {
    transition-duration: 0.01ms !important;
  }
  .skel-line {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX-7: Session Checkpoint Toast
   Bottom-right non-blocking toast with 60s countdown.
   ═══════════════════════════════════════════════════════════════ */

.session-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 300px;
  z-index: 9999;
  background: rgba(15, 15, 15, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: 16px;
  transform: translateY(120%);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: all;
}
.session-toast.visible {
  transform: translateY(0);
}
.session-toast.hiding {
  transform: translateY(120%);
  transition: transform 0.25s ease-in;
}
.toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.toast-timer-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.toast-timer-label svg {
  width: 15px;
  height: 15px;
  stroke: rgba(255, 255, 255, 0.5);
}
.toast-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.toast-close:hover {
  color: rgba(255, 255, 255, 0.9);
}
.toast-close svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}
.toast-message {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12px;
}
.toast-progress-bar-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  margin-bottom: 4px;
  overflow: hidden;
}
.toast-progress-bar-fill {
  height: 100%;
  width: 100%;
  background: #ffffff;
  border-radius: 999px;
  transition:
    width 1s linear,
    background 0.3s ease;
}
.toast-countdown-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
  margin-bottom: 12px;
  transition: color 0.3s ease;
}
.toast-actions {
  display: flex;
  gap: 8px;
}
.toast-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 0.5px solid;
  transition: background 0.15s;
}
.toast-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  flex-shrink: 0;
}
.toast-btn-continue {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
.toast-btn-continue:hover {
  background: rgba(255, 255, 255, 0.18);
}
.toast-btn-end {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.toast-btn-end:hover {
  background: rgba(239, 68, 68, 0.25);
}

/* Urgency states */
.toast-urgent .toast-progress-bar-fill {
  background: #f59e0b;
}
.toast-urgent .toast-countdown-text {
  color: #f59e0b;
}
.toast-critical .toast-progress-bar-fill {
  background: #ef4444;
}
.toast-critical .toast-countdown-text {
  color: #ef4444;
}
@keyframes toast-pulse {
  0%,
  100% {
    border-color: rgba(239, 68, 68, 0.15);
  }
  50% {
    border-color: rgba(239, 68, 68, 0.6);
  }
}
.toast-critical {
  animation: toast-pulse 1s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORCE OVERRIDES — end of file, wins over everything above
   ══════════════════════════════════════════════════════════════════════════ */

/* Rounded buttons — Bullets/Full, A-/A+, Model switcher */
.answer-mode-pills,
.fs-top-right .answer-mode-pills {
  border-radius: 20px !important;
}
.mode-pill {
  border-radius: 16px !important;
}
/* Active pill (Full/Bullets) — MUST also be rounded */
.mode-pill.active {
  border-radius: 16px !important;
}
.topbar-size-group,
.fs-size-group {
  border-radius: 20px !important;
}
.topbar-size-btn,
.fs-size-group .topbar-size-btn {
  border-radius: 16px !important;
}
.model-switcher-btn {
  border-radius: 20px !important;
}

/* Kill ALL text-shadow everywhere — fullscreen + regular */
.fullscreen-overlay *,
.fs-topbar *,
.fs-top-center *,
.fs-top-right *,
.fs-top-left * {
  text-shadow: none !important;
}

/* Fullscreen header text — crisp white, no shadow, clearly visible */
.fs-topbar,
.fs-topbar * {
  color: rgba(255, 255, 255, 0.92) !important;
}
.fs-topbar .fs-tb-btn {
  color: rgba(255, 255, 255, 0.9) !important;
}
.fs-topbar .fs-timer {
  color: rgba(255, 255, 255, 0.7) !important;
}
.fs-topbar .mode-pill {
  color: rgba(255, 255, 255, 0.55) !important;
}
.fs-topbar .mode-pill.active {
  color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

/* Send button — perfect circle, NOT stretched. Override .btn padding from components.css */
.btn.btn-send,
.answer-compose .btn-send,
.fs-chatbar-send,
.unified-send-bar .btn-send {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  aspect-ratio: 1 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  align-self: center !important;
  line-height: 1 !important;
}

/* Hide duplicate listening wave from fullscreen transcript panel */
.fs-send-bar {
  display: none !important;
}

/* ── Active button — SAME look as other buttons, only red dot indicates ON ── */
.fs-topbar .fs-tb-btn.active,
.fullscreen-overlay .fs-tb-btn.active {
  background: var(--cg-topbar-btn-bg) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--cg-topbar-btn-border) !important;
}

/* ── Red dot — ALWAYS visible when button is active/ON ── */
.fs-topbar .fs-tb-btn .topbar-dot,
.fs-topbar .fs-tb-btn .capture-live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
  display: block !important;
}
.fs-topbar .fs-tb-btn.active .topbar-dot,
.fs-topbar .fs-tb-btn.active .capture-live-dot {
  background: #ef4444 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
  display: block !important;
}

/* ── End button — ALWAYS red, no hover change ── */
.topbar-btn.danger,
.topbar-btn.danger:hover,
.topbar-btn.danger:focus,
.topbar-btn.danger:active,
.fs-tb-btn.danger,
.fs-tb-btn.danger:hover,
.fs-tb-btn.danger:focus,
.fs-tb-btn.danger:active {
  background: var(--red-500, #ef4444) !important;
  color: #fff !important;
  border-color: var(--red-500, #ef4444) !important;
}

/* ── Answer Now — clear margin separation from other buttons ── */
.fs-answer-now-btn {
  margin-left: 12px !important;
  margin-right: 6px !important;
}
/* ── Capture button — gap before Bullets/Full on the right ── */
#fs-capture-btn {
  margin-right: 10px !important;
}

/* ── Fullscreen Shortcut Keys Strip — collapsed by default ── */
.fs-shortcuts-strip {
  position: relative;
  z-index: 50;
  margin: 0 6px;
  pointer-events: auto;
}
.fs-shortcuts-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font);
  font-size: 10px;
  cursor: pointer;
}
.fs-shortcuts-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
}
.fs-shortcuts-toggle-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fs-shortcuts-chevron {
  transition: transform 0.2s;
}
.fs-shortcuts-strip.collapsed .fs-shortcuts-chevron {
  transform: rotate(0deg);
}
.fs-shortcuts-strip:not(.collapsed) .fs-shortcuts-chevron {
  transform: rotate(180deg);
}
.fs-shortcuts-body {
  overflow: hidden;
  max-height: 40px;
  transition: max-height 0.2s ease;
}
.fs-shortcuts-strip.collapsed .fs-shortcuts-body {
  max-height: 0;
}
.fs-shortcuts-items {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.03);
}
.fs-shortcut-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}
.fs-shortcut-item kbd {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTO-INVERT: Light background detected → dark text + light glass panels
   JS toggles .fs-light-bg / .fs-dark-bg on .fullscreen-overlay
   Default (no class or .fs-dark-bg) = dark panels + white text
   ══════════════════════════════════════════════════════════════════════════ */
.fullscreen-overlay.fs-light-bg {
  --cg-panel-bg-idle: rgba(255, 255, 255, 0.35);
  --cg-panel-bg-active: rgba(255, 255, 255, 0.35);
  --cg-panel-bg-pinned: rgba(255, 255, 255, 0.35);
  --cg-panel-border: rgba(0, 0, 0, 0.08);
  --cg-head-bg: rgba(0, 0, 0, 0.03);
  --cg-divider: rgba(0, 0, 0, 0.06);
  --cg-text-primary: #1a1a1a;
  --cg-text-secondary: #555;
  --cg-text-accent: hsl(152, 55%, 28%);
  --cg-scrollbar-thumb: rgba(0, 0, 0, 0.12);
  --cg-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);
  --cg-chatbar-bg: rgba(255, 255, 255, 0.55);
  --cg-chatbar-border: rgba(0, 0, 0, 0.1);
  --cg-chatbar-placeholder: #888;
  --cg-topbar-bg: rgba(255, 255, 255, 0.88);
  --cg-topbar-border: rgba(0, 0, 0, 0.08);
  --cg-topbar-btn-bg: rgba(0, 0, 0, 0.06);
  --cg-topbar-btn-border: rgba(0, 0, 0, 0.1);
  --cg-topbar-btn-hover: rgba(0, 0, 0, 0.12);
}
/* Light bg: override text colors to dark */
.fullscreen-overlay.fs-light-bg .fs-topbar,
.fullscreen-overlay.fs-light-bg .fs-topbar * {
  color: #1a1a1a !important;
}
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-timer {
  color: #555 !important;
}
.fullscreen-overlay.fs-light-bg .fs-topbar .mode-pill {
  color: #777 !important;
}
.fullscreen-overlay.fs-light-bg .fs-topbar .mode-pill.active {
  color: #1a1a1a !important;
  background: rgba(0, 0, 0, 0.08) !important;
}
.fullscreen-overlay.fs-light-bg .fs-panel-head h3 {
  color: #555 !important;
}
.fullscreen-overlay.fs-light-bg .fs-panel-body .t-text,
.fullscreen-overlay.fs-light-bg .fs-panel-body .ans-body,
.fullscreen-overlay.fs-light-bg .fs-panel-body .ans-body li,
.fullscreen-overlay.fs-light-bg .fs-panel-body .ans-body strong {
  color: #1a1a1a !important;
}
.fullscreen-overlay.fs-light-bg .fs-panel-body .t-speaker-label {
  color: #777 !important;
}
.fullscreen-overlay.fs-light-bg .fs-panel-body .ans-question-label {
  color: #777 !important;
}
.fullscreen-overlay.fs-light-bg .fs-panel-body .ans-meta {
  color: #999 !important;
}
.fullscreen-overlay.fs-light-bg .ref-cat-title,
.fullscreen-overlay.fs-light-bg .ref-keyword-item.rk-dark.ref-keyword-heading {
  color: hsl(152, 55%, 28%) !important;
}
.fullscreen-overlay.fs-light-bg .ref-keyword,
.fullscreen-overlay.fs-light-bg .ref-keyword-item.rk-dark {
  color: #1a1a1a !important;
}
.fullscreen-overlay.fs-light-bg .fs-chatbar-input {
  color: #1a1a1a !important;
}
.fullscreen-overlay.fs-light-bg .fs-chatbar-input::placeholder {
  color: #888 !important;
}

/* 2026-05-08: extended inverse-color-intelligence pass — every overlay
   surface that wasn't already in the .fs-light-bg flip. Without these
   rules, when the user is sharing a bright/light screen (white doc,
   white IDE, beige PDF) the topbar buttons, collapsed listening pill,
   ⋮ overflow menu and history nav buttons go white-on-white = invisible.
   This block flips them to dark variants whenever JS detects a
   light-luminance shared screen. */

/* History nav (back / Live / next) inside the fs ticker strip.
   In .fs-dark-bg these are white at 0.78; light-bg flips to dark. */
.fullscreen-overlay.fs-light-bg .fs-answers-panel .hist-btn,
.fullscreen-overlay.fs-light-bg .fs-answers-panel .hist-counter {
  color: rgba(0, 0, 0, 0.78) !important;
}
.fullscreen-overlay.fs-light-bg .fs-answers-panel .hist-btn:hover:not(:disabled),
.fullscreen-overlay.fs-light-bg .fs-answers-panel .hist-counter:hover {
  color: #000 !important;
}
.fullscreen-overlay.fs-light-bg .fs-answers-panel .hist-counter .live-dot {
  /* Stay terra in both modes — the brand dot is already legible on either bg. */
  background: var(--terra-500, #d97757) !important;
}

/* Collapse / expand chevron — flip from white to dark on light bg. */
.fullscreen-overlay.fs-light-bg .ticker-collapse-btn,
.fullscreen-overlay.fs-light-bg .fs-ticker-collapse-btn {
  color: rgba(0, 0, 0, 0.85) !important;
}
.fullscreen-overlay.fs-light-bg .ticker-collapse-btn:hover,
.fullscreen-overlay.fs-light-bg .fs-ticker-collapse-btn:hover {
  color: var(--terra, #d97757) !important;
}

/* Listening waves — terra dots are visible on both, but bump alpha
   slightly on light bg so they don't fade out against white. */
.fullscreen-overlay.fs-light-bg .ticker-waves i {
  background: var(--terra-500, #d97757) !important;
  opacity: 0.95 !important;
}

/* Collapsed pill — flip from dark frosted glass to light surface
   with dark text + border so it reads on a bright shared screen. */
.fullscreen-overlay.fs-light-bg .ticker-strip.collapsed,
.fullscreen-overlay.fs-light-bg .fs-ticker-strip.collapsed {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  color: rgba(0, 0, 0, 0.85) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.fullscreen-overlay.fs-light-bg .ticker-strip.collapsed *,
.fullscreen-overlay.fs-light-bg .fs-ticker-strip.collapsed * {
  color: rgba(0, 0, 0, 0.85) !important;
}
.fullscreen-overlay.fs-light-bg .ticker-strip.collapsed .live-dot,
.fullscreen-overlay.fs-light-bg .fs-ticker-strip.collapsed .live-dot {
  background: var(--terra-500, #d97757) !important;
}

/* Topbar buttons (mic, sys-audio, screenshot, model picker, end, more,
   exit fullscreen). Default state has a translucent dark backdrop +
   white icon; light-bg flips to translucent light backdrop + dark icon. */
.fullscreen-overlay.fs-light-bg .fs-topbar .topbar-btn,
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-tb-btn,
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-overlay-close,
.fullscreen-overlay.fs-light-bg .fs-topbar .model-switcher-btn {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
.fullscreen-overlay.fs-light-bg .fs-topbar .topbar-btn:hover,
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-tb-btn:hover,
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-overlay-close:hover,
.fullscreen-overlay.fs-light-bg .fs-topbar .model-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.78) !important;
  color: #000 !important;
}
/* Topbar separator line */
.fullscreen-overlay.fs-light-bg .fs-tb-sep {
  background: rgba(0, 0, 0, 0.10) !important;
}
/* Answer Now stays terra — it's the focal CTA. */
.fullscreen-overlay.fs-light-bg .fs-topbar .btn-answer-now {
  background: var(--terra, #d97757) !important;
  color: #fff !important;
}

/* ⋮ overflow menu (Transparency / Text size / Auto answer dropdown). */
.fullscreen-overlay.fs-light-bg .fs-more-menu {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
.fullscreen-overlay.fs-light-bg .fs-more-menu *,
.fullscreen-overlay.fs-light-bg .fs-more-menu .fs-more-label {
  color: rgba(0, 0, 0, 0.85) !important;
}
.fullscreen-overlay.fs-light-bg .fs-more-row {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
.fullscreen-overlay.fs-light-bg .fs-size-plain-btn {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}
/* Auto-answer toggle styles — single canonical block lives near
   `.fs-more-menu .aa-switch` (~line 9582). Earlier overrides here were
   superseded; consolidated to avoid conflicting !important rules. */

/* Model switcher dropdown menu (when expanded). */
.fullscreen-overlay.fs-light-bg .model-switcher-menu {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(0, 0, 0, 0.10) !important;
  color: rgba(0, 0, 0, 0.85) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14) !important;
}
.fullscreen-overlay.fs-light-bg .model-switcher-menu *,
.fullscreen-overlay.fs-light-bg .model-switcher-menu .ms-option,
.fullscreen-overlay.fs-light-bg .model-switcher-menu .ms-option-name,
.fullscreen-overlay.fs-light-bg .model-switcher-menu .ms-option-sub,
.fullscreen-overlay.fs-light-bg .model-switcher-menu .ms-group-label {
  color: rgba(0, 0, 0, 0.85) !important;
}
.fullscreen-overlay.fs-light-bg .model-switcher-menu .ms-option:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
.fullscreen-overlay.fs-light-bg .model-switcher-menu .ms-group-label {
  color: rgba(0, 0, 0, 0.55) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ELECTRON DESKTOP — Expert-approved design system (2026-04-03)
   Dark panels rgba(10,10,15) + white text. Topbar solid #0a0a0f.
   Blur 12px. Slider: 0% = crystal clear glass → 100% = fully solid.
   Text color NEVER changes with slider.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Topbar: SOLID BLACK — never transparent, no blur */
body.is-electron .live-topbar {
  background: #0a0a0f !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
  height: 38px !important;
  padding: 0 12px !important;
  gap: 8px !important;
}
body.is-electron .live-topbar,
body.is-electron .live-topbar * {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: none !important;
}

/* Panels: dark glass — default 0.55, slider drives alpha via JS */
body.is-electron .live-panel {
  background: rgba(10, 10, 15, 0.55) !important;
  backdrop-filter: blur(12px) saturate(1.2) brightness(0.85) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) brightness(0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.is-electron .panel-head {
  background: rgba(10, 10, 15, 0.75) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 5px 10px !important;
  min-height: 0 !important;
}
body.is-electron .panel-head h3 {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.93) !important;
}
body.is-electron .panel-head h3 svg {
  color: rgba(255, 255, 255, 0.93) !important;
}
body.is-electron .panel-body {
  background: transparent !important;
}
body.is-electron .send-bar {
  background: rgba(10, 10, 15, 0.65) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* All live session text: WHITE — FIXED, never changes with slider */
body.is-electron #screen-live .live-panel,
body.is-electron #screen-live .live-panel * {
  color: rgba(255, 255, 255, 0.93) !important;
}
body.is-electron #screen-live .t-speaker-label {
  color: rgba(255, 255, 255, 0.6) !important;
}
body.is-electron #screen-live .t-speaker-label.candidate {
  color: var(--terra) !important;
}
body.is-electron #screen-live .ans-question-label {
  color: rgba(255, 255, 255, 0.85) !important;
}
body.is-electron .ans-q-text {
  color: rgba(255, 255, 255, 0.85) !important;
}
/* Collapsed state in Electron — single line truncation */
body.is-electron .ans-q-collapsed {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: inline !important;
}
/* Expanded state in Electron — full multi-line text with preserved newlines */
body.is-electron .ans-q-expanded {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  background: rgba(234, 88, 12, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-left: 2px solid var(--terra, #ea580c) !important;
}
body.is-electron #screen-live .ans-meta {
  color: rgba(255, 255, 255, 0.4) !important;
}
body.is-electron #screen-live .ref-keyword-item.ref-keyword-heading {
  color: var(--terra) !important;
}
body.is-electron #screen-live .ref-keyword-item {
  color: rgba(255, 255, 255, 0.9) !important;
  background: transparent !important;
}
body.is-electron #screen-live .empty-state p,
body.is-electron #screen-live .empty-state span {
  color: rgba(255, 255, 255, 0.45) !important;
}
body.is-electron .send-indicator {
  color: var(--terra) !important;
}

/* Session feedback banner — below hotkeys, above sessions list */
.session-feedback-banner {
  position: relative;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.06) 0%, rgba(217, 119, 87, 0.02) 100%);
  border: 1px solid rgba(217, 119, 87, 0.15);
  border-radius: 12px;
  margin: 0 0 14px 0;
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.session-feedback-banner:hover {
  border-color: rgba(217, 119, 87, 0.25);
  box-shadow: 0 2px 12px rgba(217, 119, 87, 0.08);
}
.sfb-banner-glow {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(217, 119, 87, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.sfb-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  position: relative;
}
.sfb-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.sfb-banner-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.sfb-banner-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--terra);
  background: rgba(217, 119, 87, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.3;
}
.sfb-banner-text {
  font-size: 12.5px;
  color: #2a2a2a;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sfb-banner-close {
  background: none;
  border: none;
  color: var(--canvas-400);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  flex-shrink: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.sfb-banner-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--canvas-600);
}
/* Inline star rating */
.sfb-inline-stars {
  display: flex;
  gap: 2px;
  align-items: center;
}
.sfb-star-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  color: var(--canvas-300);
  transition:
    color 0.15s,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sfb-star-btn:hover {
  transform: scale(1.2);
}
.sfb-star-btn svg path {
  transition:
    fill 0.15s,
    stroke 0.15s;
}
/* Hover: all stars up to hovered one turn gold filled */
.sfb-inline-stars:hover .sfb-star-btn {
  color: #f0a500;
}
.sfb-inline-stars:hover .sfb-star-btn svg path {
  fill: #f0a500;
}
.sfb-inline-stars .sfb-star-btn:hover ~ .sfb-star-btn {
  color: var(--canvas-300);
}
.sfb-inline-stars .sfb-star-btn:hover ~ .sfb-star-btn svg path {
  fill: none;
}
/* Selected state: stars with .sfb-star-selected stay filled */
.sfb-star-btn.sfb-star-selected {
  color: #f0a500 !important;
}
.sfb-star-btn.sfb-star-selected svg path {
  fill: #f0a500 !important;
}

/* ── Dark theme: feedback banner inverse colors ── */
[data-theme='dark'] .session-feedback-banner {
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.1) 0%, rgba(217, 119, 87, 0.04) 100%);
  border-color: rgba(217, 119, 87, 0.18);
}
[data-theme='dark'] .session-feedback-banner:hover {
  border-color: rgba(217, 119, 87, 0.28);
  box-shadow: 0 2px 16px rgba(217, 119, 87, 0.08);
}
[data-theme='dark'] .sfb-banner-glow {
  background: radial-gradient(circle, rgba(217, 119, 87, 0.12) 0%, transparent 70%);
}
[data-theme='dark'] .sfb-banner-label {
  background: rgba(217, 119, 87, 0.15);
  color: #e8a080;
}
[data-theme='dark'] .sfb-banner-text {
  color: #f0ede8 !important;
}
[data-theme='dark'] .sfb-banner-close {
  color: rgba(255, 255, 255, 0.4);
}
[data-theme='dark'] .sfb-banner-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
[data-theme='dark'] .sfb-star-btn {
  color: rgba(255, 255, 255, 0.25);
}
[data-theme='dark'] .sfb-inline-stars:hover .sfb-star-btn {
  color: #f0a500;
}
[data-theme='dark'] .sfb-inline-stars .sfb-star-btn:hover ~ .sfb-star-btn {
  color: rgba(255, 255, 255, 0.25);
}

/* ── Desktop (Electron) — frosted glass: light theme ── */
body.is-electron .session-feedback-banner {
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.1) 0%, rgba(217, 119, 87, 0.04) 100%) !important;
  border-color: rgba(217, 119, 87, 0.2) !important;
  backdrop-filter: blur(8px);
}
body.is-electron .session-feedback-banner:hover {
  border-color: rgba(217, 119, 87, 0.3) !important;
  box-shadow: 0 2px 16px rgba(217, 119, 87, 0.1) !important;
}
body.is-electron .sfb-banner-text {
  color: #1a1a1a !important;
  font-weight: 700;
}
body.is-electron .sfb-star-btn {
  color: #b09060 !important;
}
body.is-electron .sfb-inline-stars:hover .sfb-star-btn {
  color: #e8a800 !important;
}
body.is-electron .sfb-inline-stars:hover .sfb-star-btn svg path {
  fill: #e8a800 !important;
}
body.is-electron .sfb-inline-stars .sfb-star-btn:hover ~ .sfb-star-btn {
  color: #b09060 !important;
}
body.is-electron .sfb-inline-stars .sfb-star-btn:hover ~ .sfb-star-btn svg path {
  fill: none !important;
}
body.is-electron .sfb-banner-close {
  color: #666 !important;
}
/* ── Desktop (Electron) — frosted glass: dark theme ── */
[data-theme='dark'] body.is-electron .session-feedback-banner,
body.is-electron [data-theme='dark'] .session-feedback-banner {
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.14) 0%, rgba(217, 119, 87, 0.06) 100%) !important;
  border-color: rgba(217, 119, 87, 0.22) !important;
}
[data-theme='dark'] body.is-electron .sfb-banner-text,
body.is-electron [data-theme='dark'] .sfb-banner-text {
  color: #f0ede8 !important;
}
[data-theme='dark'] body.is-electron .sfb-star-btn,
body.is-electron [data-theme='dark'] .sfb-star-btn {
  color: rgba(255, 255, 255, 0.25) !important;
}
[data-theme='dark'] body.is-electron .sfb-inline-stars:hover .sfb-star-btn,
body.is-electron [data-theme='dark'] .sfb-inline-stars:hover .sfb-star-btn {
  color: #f0a500 !important;
}
[data-theme='dark'] body.is-electron .sfb-inline-stars:hover .sfb-star-btn svg path,
body.is-electron [data-theme='dark'] .sfb-inline-stars:hover .sfb-star-btn svg path {
  fill: #f0a500 !important;
}
[data-theme='dark'] body.is-electron .sfb-banner-close,
body.is-electron [data-theme='dark'] .sfb-banner-close {
  color: rgba(255, 255, 255, 0.5) !important;
}
/* ── Feedback banner — mobile: wrap to two rows ── */
@media (max-width: 480px) {
  .sfb-banner-content {
    flex-wrap: wrap;
    gap: 10px;
  }
  .sfb-banner-left {
    width: 100%;
    flex: none;
  }
  .sfb-banner-right {
    width: 100%;
    flex: none;
    justify-content: center;
  }
  .sfb-inline-stars {
    gap: 4px;
  }
  .sfb-star-btn svg {
    width: 28px;
    height: 28px;
  }
}

/* ── Focus Mode: latest Q&A at top, history stacks below naturally ── */
/* Desktop: history stays visible with subtle fade (existing behavior).
   Web: Phase 3 — history is completely hidden behind a "↓ N previous
   answers" toggle button above the feed so interviews stay calm and
   focused on the single current Q&A. The distinction is critical:
   a faded card still occupies visual real estate and pulls the
   candidate's eye mid-interview. Full hide + opt-in expand fixes that. */
.answer-item.ans-history {
  opacity: 0.45;
  transition: opacity 0.2s;
}
.answer-item.ans-history:hover {
  opacity: 0.85;
}

/* Web-only: hide history cards by default, show only when toggle is clicked */
body:not(.is-electron) #answers-feed .answer-item.ans-history {
  display: none;
}
body:not(.is-electron) #answers-feed.show-history .answer-item.ans-history {
  display: block;
  opacity: 0.55;
}
body:not(.is-electron) #answers-feed.show-history .answer-item.ans-history:hover {
  opacity: 0.9;
}

/* Same hide-history-by-default behavior for the fullscreen mirror feed.
   Cards are cloneNode'd from #answers-feed (so .ans-history class is
   preserved); without these rules the fs feed just shows everything
   stacked. Toggle button id `fs-ans-history-toggle` is injected via JS
   in _updateHistoryToggle. */
body:not(.is-electron) #fs-answers-feed .answer-item.ans-history {
  display: none;
}
body:not(.is-electron) #fs-answers-feed.show-history .answer-item.ans-history {
  display: block;
  opacity: 0.6;
}
body:not(.is-electron) #fs-answers-feed.show-history .answer-item.ans-history:hover {
  opacity: 0.95;
}
body:not(.is-electron) #fs-ans-history-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  margin: 0 0 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  font-family: var(--font, inherit);
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  letter-spacing: 0.2px;
}
body:not(.is-electron) #fs-ans-history-toggle:hover {
  color: var(--terra, #d97757);
  background: rgba(217, 119, 87, 0.08);
}

/* 2026-05-07: center Q/A cards in fullscreen so the answer text doesn't
   span the full panel width. The fs-answers-panel itself is 70% viewport
   width; we additionally constrain the ticker strip, history toggle and
   the answer cards to a 880px centered column so the AI Answers stack
   aligns under the topbar's "Answer Now" focal point. The chat bar
   stays at full panel width by design — user feedback was that the
   shrunken chat bar felt off in the larger frame. */
/* 2026-05-07: removed `.fs-ticker-strip` from this 880px constraint —
   user feedback was that the EXPANDED listening card looked shrunken in
   fullscreen and should match the regular live session window where the
   ticker spans the full panel width. Q/A cards stay at 880px (the focal
   reading column under the topbar's Answer Now button). The collapsed
   pill is unaffected since it uses position:absolute. */
.fullscreen-overlay #fs-ans-history-toggle,
.fullscreen-overlay #fs-answers-feed .answer-item {
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2026-05-07 v2: removed the over-aggressive padding shrink on the
   fullscreen ticker — user said "why did you shink the listening card".
   The strip now uses its base padding/margin from the .ticker-strip rule
   (margin: 4px auto, padding inherited). Q/A card still sits close to
   the topbar because of the slim panel-head + the panel-body's 8px top
   padding (set further down). */
.fullscreen-overlay .fs-panel-head {
  padding: 4px 12px;
  min-height: 0;
}
.fullscreen-overlay #fs-answers-feed {
  padding-top: 0;
}
.fullscreen-overlay #fs-answers-feed .answer-item:first-child {
  margin-top: 4px;
}
/* Collapsed listening card → small floating pill CENTERED horizontally
   below the AI ANSWERS header. Q/A card flows in at the top of the
   panel since the ticker is taken out of normal flow (position: absolute).
   The pill shows the listening waves + "Live"/Q-N counter + nav arrows
   + the expand chevron — same controls as the full strip, just
   compacted. Applies to BOTH the regular live session window AND the
   fullscreen overlay. */
.ticker-strip {
  position: relative;
  order: -1;
}
.ticker-strip.collapsed,
.fs-ticker-strip.collapsed {
  position: absolute !important;
  top: 6px;
  left: 50% !important;
  transform: translateX(-50%);
  z-index: 30;
  width: auto !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  height: 30px;
  overflow: visible;
  background: rgba(15, 15, 20, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex !important;
  align-items: center;
}
/* Regular session window has a light surface — pill matches the regular
   topbar pill style (white-ish bg with dark text, soft shadow). */
body:not(.is-electron) #screen-live .ticker-strip:not(.fs-ticker-strip).collapsed {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.ticker-strip.collapsed .ticker-head,
.fs-ticker-strip.collapsed .ticker-head {
  height: 28px;
  padding: 0 4px;
  gap: 6px;
}
.ticker-strip.collapsed .ticker-line,
.fs-ticker-strip.collapsed .ticker-line {
  display: none;
}
/* Hide the pushy spacer in pill mode so the icon-row hugs together. */
.ticker-strip.collapsed .ticker-spacer,
.fs-ticker-strip.collapsed .ticker-spacer {
  flex: 0;
  display: none;
}
/* 2026-05-07 BUG FIX: a duplicate rule here (`body:not(.is-electron)
   #screen-live .ticker-strip.collapsed { background: rgba(255,255,255,0.96) }`)
   was missing `:not(.fs-ticker-strip)` and so fired on the fullscreen
   collapsed pill too — producing white-on-white invisible content because
   `.fs-answers-panel .ticker-strip` forces white text. That duplicate is
   removed; the `:not(.fs-ticker-strip).collapsed` rule above handles the
   regular session pill correctly.
   In addition, the regular-session light-surface rule below
   (`body:not(.is-electron) #screen-live .ticker-strip` at the bottom of
   this file, specificity 1,2,1) ALSO matches the fs pill. Without an
   explicit fs override, removing the duplicate above just lets that rule
   paint a 4%-black near-transparent bg + dark text — still broken when
   the shared screen behind is dark. So we pin a dark-glass + white-text
   look on `.fs-ticker-strip` here with specificity (1,3,1) so it beats
   that regular-session rule. The `fs-light-bg` rules elsewhere still win
   over this when the JS detects a bright shared screen. */
body:not(.is-electron) #screen-live .fullscreen-overlay:not(.fs-light-bg) .fs-ticker-strip,
body:not(.is-electron) #screen-live .fullscreen-overlay:not(.fs-light-bg) .fs-ticker-strip.collapsed {
  background: rgba(15, 15, 20, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
/* Child elements inside the fs pill — explicit light colors to beat the
   regular-session `body:not(.is-electron) #screen-live .ticker-strip .X`
   rules at the bottom of this file (which would otherwise force them to
   dark `--canvas-*` values that disappear on the dark glass pill). */
body:not(.is-electron) #screen-live .fullscreen-overlay:not(.fs-light-bg) .fs-ticker-strip .hist-btn {
  color: rgba(255, 255, 255, 0.78) !important;
}
body:not(.is-electron) #screen-live .fullscreen-overlay:not(.fs-light-bg) .fs-ticker-strip .hist-counter {
  color: rgba(255, 255, 255, 0.85) !important;
}
body:not(.is-electron) #screen-live .fullscreen-overlay:not(.fs-light-bg) .fs-ticker-strip .ticker-text {
  color: rgba(255, 255, 255, 0.92) !important;
}
body:not(.is-electron) #screen-live .fullscreen-overlay:not(.fs-light-bg) .fs-ticker-strip .ticker-collapse-btn,
body:not(.is-electron) #screen-live .fullscreen-overlay:not(.fs-light-bg) .fs-ticker-strip .fs-ticker-collapse-btn {
  color: rgba(255, 255, 255, 0.85) !important;
}
/* The panel-body needs position:relative so the pill anchors to it. */
.answers-panel,
.answers-panel.live-panel,
.fs-answers-panel,
.fs-answers-panel.fs-panel {
  position: relative;
}

/* Collapse / expand chevron on either ticker-strip (regular or fullscreen).
   Pure icon — no card-style background. Default (expanded) rotates the
   ▼-shaped path 180° → ▲ "click to collapse"; collapsed leaves it at 0°
   → ▼ "click to expand". Direction matches the action the click will
   perform on the content. */
.ticker-collapse-btn,
.fs-ticker-collapse-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: auto;
  background: transparent;
  border: none;
  border-radius: 5px;
  /* 2026-05-07 v3: full opacity by default — user reported the chevron
     was only visible on hover. There is no hover-conditional opacity
     in our rules; the perceived invisibility was just the alpha being
     too low against the dark frosted-glass ticker. Now 0.95. */
  color: rgba(255, 255, 255, 0.95);
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer;
  transition: color 0.15s;
  flex-shrink: 0;
}
.ticker-collapse-btn svg,
.fs-ticker-collapse-btn svg {
  width: 14px;
  height: 14px;
  display: block;
  /* Refined easing — slight overshoot then settle, feels more crafted
     than a flat ease curve. */
  transition: transform 0.22s cubic-bezier(0.34, 1.18, 0.64, 1);
}
.ticker-collapse-btn:hover,
.fs-ticker-collapse-btn:hover {
  color: var(--terra, #d97757);
  background: transparent;
}
/* Regular live session window has a light-themed ticker strip — chevron
   uses dark inks so it is always visible against the white panel bg. */
body:not(.is-electron) #screen-live .ticker-collapse-btn {
  color: rgba(0, 0, 0, 0.4);
}
body:not(.is-electron) #screen-live .ticker-collapse-btn:hover {
  color: var(--terra, #d97757);
}

/* 2026-05-07 web-only: kill the card-style backgrounds on the
   prev / next / Live history navigation buttons. User wanted them to
   read as pure icons, color-shift on hover only. Electron answer-window
   has its own inline copy of these styles which is unchanged (request
   was scoped to web). */
body:not(.is-electron) .hist-btn {
  background: transparent !important;
  border-color: transparent !important;
}
body:not(.is-electron) .hist-btn:hover:not(:disabled) {
  background: transparent !important;
  border-color: transparent !important;
  color: #fff;
}
body:not(.is-electron) .hist-counter {
  background: transparent !important;
  border-color: transparent !important;
}
body:not(.is-electron) .hist-counter:hover {
  background: transparent !important;
  border-color: transparent !important;
}
/* 2026-05-07 v3: rotation rule applies to BOTH the regular ticker
   chevron AND the fullscreen one (was only applying to .fs- variant —
   so the regular session had no default rotation and pointed DOWN
   even when expanded). Now both behave the same:
   - Expanded (default): chevron points UP   → click to collapse
   - Collapsed:          chevron points DOWN → click to expand */
.ticker-collapse-btn svg,
.fs-ticker-collapse-btn svg {
  transform: rotate(180deg);
}
.ticker-strip.collapsed .ticker-collapse-btn svg,
.fs-ticker-strip.collapsed .fs-ticker-collapse-btn svg {
  transform: rotate(0deg);
}
.fs-ticker-strip.collapsed .ticker-line {
  display: none;
}

/* Toggle button: subtle, text-only, border-bottom separator */
.ans-history-toggle {
  display: none;
}
body:not(.is-electron) .ans-history-toggle,
body:not(.is-electron) #ans-history-toggle,
body:not(.is-electron) #fs-ans-history-toggle {
  /* 2026-05-07 v4: REMOVED entirely — back/next/Live in the listening
     card cover the same nav, so the toggle is duplicate UI noise. The
     Q/A card sits right under the listening card now. History items
     still auto-expand when the user navigates to them via back/next
     (see scrollAnswer in session.js). */
  display: none !important;
}
/* (toggle removed — see rule above. Old :hover and centering wrappers
    are obsolete and have been deleted.) */
/* Thin separator between latest and history */
.ans-history-indicator {
  display: none;
}
.ans-back-to-latest {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 5px 16px;
  font-size: 10.5px;
  font-weight: 600;
  font-family: var(--font);
  color: #fff;
  background: var(--terra);
  border: none;
  border-radius: 99px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    opacity 0.2s,
    transform 0.2s;
  animation: ansBackFadeIn 0.2s ease;
}
.ans-back-to-latest:hover {
  opacity: 0.9;
  transform: translateX(-50%) scale(1.03);
}
@keyframes ansBackFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 2026-05-07: Short / Longer response controls REMOVED per user — they
   were duplicate noise on every answer card. Belt-and-suspenders hide
   so any old cached JS render still doesn't show them. */
.ans-response-controls,
.answers-panel .ans-response-controls,
.fs-answers-panel .ans-response-controls {
  display: none !important;
}
.ans-history .ans-response-controls { display: none; }
.ans-control-btn {
  padding: 3px 11px;
  font-size: 10.5px;
  font-weight: 500;
  font-family: var(--font);
  letter-spacing: 0.02em;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 999px;
  background: transparent;
  color: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  line-height: 1.5;
}
.ans-control-btn:hover {
  background: rgba(217, 119, 87, 0.08);
  color: var(--terra, #d97757);
  border-color: rgba(217, 119, 87, 0.35);
  transform: translateY(-0.5px);
}
.ans-control-btn:active {
  transform: translateY(0);
}
[data-theme='dark'] .ans-response-controls {
  border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .ans-control-btn {
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.55);
}
[data-theme='dark'] .ans-control-btn:hover {
  background: rgba(217, 119, 87, 0.14);
  color: #d97757;
  border-color: rgba(217, 119, 87, 0.45);
}

/* Fullscreen overlay forces a dark backdrop independent of [data-theme],
 * so the data-theme=dark rules above never reach buttons rendered inside
 * .fullscreen-overlay. */
.fullscreen-overlay .ans-response-controls {
  border-top-color: rgba(255, 255, 255, 0.06);
}
.fullscreen-overlay .ans-control-btn {
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
}
.fullscreen-overlay .ans-control-btn:hover {
  background: rgba(217, 119, 87, 0.14);
  color: #d97757;
  border-color: rgba(217, 119, 87, 0.50);
}
/* Fullscreen with light video backdrop — flip back to dark text. */
.fullscreen-overlay.fs-light-bg .ans-control-btn {
  border-color: rgba(0, 0, 0, 0.10);
  color: rgba(0, 0, 0, 0.60);
}
.fullscreen-overlay.fs-light-bg .ans-control-btn:hover {
  background: rgba(217, 119, 87, 0.10);
  color: var(--terra, #d97757);
  border-color: rgba(217, 119, 87, 0.40);
}
body.is-electron .ans-control-btn {
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.55) !important;
  background: transparent !important;
}
body.is-electron .ans-control-btn:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
}

/* Transcript auto-scroll toggle — modern pill switch */
.transcript-autoscroll-wrap {
  position: absolute;
  bottom: 6px;
  right: 8px;
  z-index: 10;
}
.transcript-autoscroll-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 600;
  color: var(--canvas-500);
  cursor: default !important;
  user-select: none;
}
/* Hide native checkbox */
.transcript-autoscroll-label input[type='checkbox'] {
  display: none;
}
/* Toggle track */
.transcript-autoscroll-label .toggle-track {
  width: 28px;
  height: 16px;
  background: var(--canvas-200);
  border-radius: 99px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
/* Toggle knob */
.transcript-autoscroll-label .toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
/* ON state */
.transcript-autoscroll-label input:checked + .toggle-track {
  background: var(--terra);
}
.transcript-autoscroll-label input:checked + .toggle-track::after {
  transform: translateX(12px);
}
/* Desktop dark glass */
body.is-electron .transcript-autoscroll-label {
  color: rgba(255, 255, 255, 0.5) !important;
}
body.is-electron .transcript-autoscroll-label .toggle-track {
  background: rgba(255, 255, 255, 0.15);
}
body.is-electron .transcript-autoscroll-label input:checked + .toggle-track {
  background: var(--terra);
}
body.is-electron .transcript-autoscroll-label * {
  cursor: default !important;
}

/* Clear All button — match Bullets/Full pill size */
body.is-electron .transcript-clear-btn {
  font-size: 9px !important;
  padding: 0 8px !important;
  height: 20px !important;
  min-height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

/* CURSOR: ALWAYS arrow on desktop — ZERO exceptions */
body.is-electron,
body.is-electron *,
body.is-electron *::before,
body.is-electron *::after {
  cursor: default !important;
}

/* All panel headers — SAME compact height on desktop */
body.is-electron .panel-head {
  height: 28px !important;
  max-height: 28px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
}
body.is-electron .panel-head h3 {
  font-size: 10px !important;
  margin: 0 !important;
  line-height: 1 !important;
}
body.is-electron .panel-head h3 svg {
  width: 10px !important;
  height: 10px !important;
}
body.is-electron .transcript-clear-btn {
  font-size: 8px !important;
  padding: 1px 5px !important;
  height: 18px !important;
  line-height: 1 !important;
}
body.is-electron .panel-collapse-btn {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
}
body.is-electron .panel-collapse-btn svg {
  width: 10px !important;
  height: 10px !important;
}

/* AI Answer tab — NO separate bg for Q or A, all transparent */
body.is-electron .answer-item {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
body.is-electron .ans-body {
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.93) !important;
  border-left: none !important;
  padding-left: 0 !important;
}
body.is-electron .ans-question-label {
  background: transparent !important;
  box-shadow: none !important;
}
body.is-electron .generating-indicator {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: none !important;
}

/* Transcript — NO separate bg for question items */
body.is-electron .t-item {
  background: transparent !important;
  box-shadow: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.is-electron .t-item.is-question {
  background: transparent !important;
  box-shadow: none !important;
  border-left: none !important;
}

/* Chat bar — dark bg with white text so typing is visible */
body.is-electron .answer-compose {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
body.is-electron .answer-compose-input {
  color: rgba(255, 255, 255, 0.93) !important;
}
body.is-electron .answer-compose-input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* Topbar buttons: dark glass pill — rgba(255,255,255,0.12) */
body.is-electron .topbar-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none !important;
}
body.is-electron .topbar-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  transform: none !important;
}
body.is-electron .topbar-btn:active {
  transform: scale(0.96) !important;
}
body.is-electron .topbar-btn svg {
  width: 14px !important;
  height: 14px !important;
}
body.is-electron .topbar-btn.active {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* End button: always red */
body.is-electron .topbar-btn.danger {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: transparent !important;
}
body.is-electron .topbar-btn.danger:hover {
  background: #ef4444 !important;
}
body.is-electron .topbar-btn.danger svg rect {
  fill: #fff !important;
}

/* Answer Now: 28px pill, no hover color change */
body.is-electron .btn-answer-now {
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 14px !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.is-electron .btn-answer-now:hover {
  transform: none !important;
  box-shadow: none !important;
}
body.is-electron .btn-answer-now:active {
  transform: scale(0.96) !important;
}

/* Mode pills: dark glass */
body.is-electron .answer-mode-pills {
  height: 26px !important;
  padding: 2px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}
body.is-electron .mode-pill {
  height: 20px !important;
  padding: 0 10px !important;
  border-radius: 99px !important;
  font-size: 10.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
body.is-electron .mode-pill:hover {
  background: transparent !important;
}
body.is-electron .mode-pill.active {
  background: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600 !important;
}

/* Size group: dark glass */
body.is-electron .topbar-size-group {
  height: 26px !important;
  padding: 2px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.is-electron .topbar-size-btn {
  height: 20px !important;
  padding: 0 8px !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
body.is-electron .topbar-size-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: none !important;
}

/* Model switcher: 28px dark glass pill */
body.is-electron .model-switcher-btn {
  height: 28px !important;
  max-height: 28px !important;
  box-sizing: border-box !important;
  border-radius: 99px !important;
  padding: 0 10px !important;
  font-size: 10.5px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Tool buttons: dark glass */
body.is-electron .tool-btn {
  border-radius: 99px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.6) !important;
}
body.is-electron .tool-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}

/* Dividers */
body.is-electron .live-col-divider {
  background: rgba(255, 255, 255, 0.06) !important;
}
body.is-electron .live-col-divider:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Titlebar */
body.is-electron #electron-titlebar {
  background: #0a0a0f !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
body.is-electron .etb-title {
  color: rgba(255, 255, 255, 0.7) !important;
}
body.is-electron .etb-btn {
  color: rgba(255, 255, 255, 0.55) !important;
}
body.is-electron .etb-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Collapse btn — dark glass */
body.is-electron .panel-collapse-btn {
  color: rgba(255, 255, 255, 0.35) !important;
  background: transparent !important;
  border: none !important;
  cursor: default !important;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin-left: auto;
  -webkit-app-region: no-drag !important;
  pointer-events: auto !important;
  position: relative;
  z-index: 50;
}
body.is-electron .panel-collapse-btn:hover {
  color: rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Modal overlay */
body.is-electron .modal-overlay {
  background: rgba(0, 0, 0, 0.35) !important;
}

/* No hover effects — press only */
body.is-electron .btn:hover {
  transform: none !important;
  box-shadow: none !important;
}
body.is-electron .btn:active {
  transform: scale(0.96) !important;
}
body.is-electron .btn-primary:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * BACKGROUND-AWARE TEXT CONTRAST IN LIVE SESSION PANELS  (DESKTOP APP ONLY)
 *
 * Scope: ONLY inside the Electron desktop app (body.is-electron). The web
 * app is intentionally left alone so its native theme styles remain intact
 * — applying white glow text to the web app would render invisible on its
 * light themes (white-on-white).
 *
 * The desktop app uses a transparent glass window with a dark frosted bg,
 * so text should glow bright white like an LED. If the user is ever on a
 * light theme ([data-theme='light']), we flip to a "dark shine" — near-
 * black text with a soft dark halo so it stays readable on a light bg.
 *
 * Implementation: CSS custom properties define the text color + shadow
 * per theme, and the rules below consume those vars. This makes the
 * inversion automatic whenever the theme attribute flips.
 * ───────────────────────────────────────────────────────────────────────── */

/* Default (dark) — bright LED white glow */
body.is-electron #screen-live {
  --lsx-text-color: #ffffff;
  --lsx-text-shadow:
    0 0 1px rgba(255, 255, 255, 0.85), 0 0 4px rgba(255, 255, 255, 0.45), 0 0 8px rgba(255, 255, 255, 0.18);
  --lsx-text-shadow-soft: 0 0 1px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.4);
  --lsx-you-color: rgba(255, 255, 255, 0.92);
  --lsx-you-shadow: 0 0 1px rgba(255, 255, 255, 0.7), 0 0 4px rgba(255, 255, 255, 0.35);
}

/* Light theme — dark "shine" (near-black text with subtle dark halo) */
body.is-electron[data-theme='light'] #screen-live,
body.is-electron [data-theme='light'] #screen-live {
  --lsx-text-color: #0b0b10;
  --lsx-text-shadow: 0 0 1px rgba(0, 0, 0, 0.55), 0 0 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.6);
  --lsx-text-shadow-soft: 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.55);
  --lsx-you-color: rgba(11, 11, 16, 0.92);
  --lsx-you-shadow: 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.55);
}

body.is-electron #screen-live .t-text,
body.is-electron #screen-live .u-text,
body.is-electron #screen-live .ans-body,
body.is-electron #screen-live .ans-body *,
body.is-electron #screen-live .ans-q-text,
body.is-electron #screen-live .ans-q-collapsed,
body.is-electron #screen-live .ans-q-expanded,
body.is-electron #screen-live .answer-item .ans-q-text,
body.is-electron #screen-live .t-interim-text {
  color: var(--lsx-text-color) !important;
  text-shadow: var(--lsx-text-shadow) !important;
}

/* Speaker labels — "you" inherits the themed text color */
body.is-electron #screen-live .t-speaker-label.you {
  color: var(--lsx-you-color) !important;
  text-shadow: var(--lsx-you-shadow) !important;
}
/* Interviewer label stays terra on both themes — terra is high-contrast on either */
body.is-electron #screen-live .t-speaker-label.interviewer {
  color: var(--terra, #ea580c) !important;
  text-shadow:
    0 0 2px rgba(234, 88, 12, 0.7),
    0 0 6px rgba(234, 88, 12, 0.35) !important;
}

/* AI answer "Q:" label — themed text color */
body.is-electron #screen-live .ans-question-label,
body.is-electron #screen-live .ans-question-label * {
  color: var(--lsx-text-color) !important;
}
body.is-electron #screen-live .ans-q-linecount {
  color: var(--terra, #ea580c) !important;
  text-shadow:
    0 0 2px rgba(234, 88, 12, 0.6),
    0 0 5px rgba(234, 88, 12, 0.3) !important;
}

/* Bullets inside the answer body */
body.is-electron #screen-live .ans-body ul li,
body.is-electron #screen-live .ans-body li {
  color: var(--lsx-text-color) !important;
  text-shadow: var(--lsx-text-shadow-soft) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * MODEL SWITCHER DROPDOWN — fix white-on-white contrast bug
 *
 * The .ms-option / .model-switcher-menu elements were rendering with both
 * white background AND white text, making the dropdown unreadable. Force
 * a dark background with white text so the dropdown is always legible
 * regardless of theme.
 * ───────────────────────────────────────────────────────────────────────── */
/* Match the frosted-glass panel look of the live studio — no white,
 * no pure-orange hovers. Card reads as "part of the panels", not a
 * Windows popup. Same bg/blur/border/shadow recipe as .live-panel in
 * screen-behind mode (session.css:918-923). */
.model-switcher-menu,
#model-switcher-menu,
#model-switcher-menu-fs,
#model-switcher-menu-mobile {
  background: rgba(12, 12, 16, 0.72) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.15) !important;
  backdrop-filter: blur(22px) saturate(1.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
  color: rgba(255, 255, 255, 0.88) !important;
  padding: 6px !important;
}
.model-switcher-menu .ms-group-label,
#model-switcher-menu .ms-group-label,
#model-switcher-menu-fs .ms-group-label,
#model-switcher-menu-mobile .ms-group-label {
  color: rgba(255, 255, 255, 0.38) !important;
}
.model-switcher-menu .ms-option,
#model-switcher-menu .ms-option,
#model-switcher-menu-fs .ms-option,
#model-switcher-menu-mobile .ms-option {
  color: rgba(255, 255, 255, 0.88) !important;
  background: transparent !important;
  border-radius: 8px !important;
}
.model-switcher-menu .ms-option:hover,
#model-switcher-menu .ms-option:hover,
#model-switcher-menu-fs .ms-option:hover,
#model-switcher-menu-mobile .ms-option:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.96) !important;
}
.model-switcher-menu .ms-option.active,
#model-switcher-menu .ms-option.active,
#model-switcher-menu-fs .ms-option.active,
#model-switcher-menu-mobile .ms-option.active {
  background: rgba(217, 119, 87, 0.14) !important;
  color: rgba(255, 255, 255, 0.98) !important;
  font-weight: 600 !important;
}
.model-switcher-menu .ms-option.active .ms-check,
#model-switcher-menu .ms-option.active .ms-check,
#model-switcher-menu-fs .ms-option.active .ms-check,
#model-switcher-menu-mobile .ms-option.active .ms-check {
  color: var(--terra, #d97757) !important;
}
.model-switcher-menu .ms-option-sub,
#model-switcher-menu .ms-option-sub,
#model-switcher-menu-fs .ms-option-sub,
#model-switcher-menu-mobile .ms-option-sub {
  color: rgba(255, 255, 255, 0.42) !important;
}
/* Inner spans inherit the themed color */
.model-switcher-menu .ms-option .ms-option-name,
#model-switcher-menu .ms-option .ms-option-name,
#model-switcher-menu-fs .ms-option .ms-option-name,
#model-switcher-menu-mobile .ms-option .ms-option-name {
  color: inherit !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * COLLAPSED-WINDOW TITLEBAR GLOW  (Gemini chatbar style)
 *
 * When the user clicks the collapse chevron in the Electron titlebar, the
 * main window shrinks down to just the 36px titlebar strip. In that state
 * the strip can be easy to lose visually, so we wrap it in a continuously
 * moving conic-gradient glow reminiscent of Google Gemini's chat bar —
 * blue → purple → pink → cyan cycling around the perimeter on a 3s loop.
 *
 * Capture invisibility: the parent Electron window already has
 * `setContentProtection(true)`, so this glow is invisible to Zoom/Meet/
 * Teams/OBS screen capture automatically — no extra plumbing needed.
 *
 * Active ONLY when `body.window-collapsed` is set by index.html:7323.
 * ───────────────────────────────────────────────────────────────────────── */
@property --wispherflow-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes wispherflowGlowSpin {
  to {
    --wispherflow-glow-angle: 360deg;
  }
}

/* Fallback spin for browsers that don't support @property (non-Chromium) */
@keyframes wispherflowGlowSpinFallback {
  to {
    transform: rotate(360deg);
  }
}

body.window-collapsed #electron-titlebar {
  /* Electron reserves 10px padding above & below the 36px titlebar when
   * collapsed (desktop/main.js GLOW_PAD), so we shift the strip down 10px
   * and leave the rest transparent for the conic glow to bleed into. */
  position: fixed;
  top: 10px;
  overflow: visible;
  border-radius: 6px; /* rounded corners so the ring looks clean */
}
/* Hide everything below the titlebar in collapsed state — the Electron
 * window is only 56px tall anyway, but making the body transparent
 * guarantees the glow has a clean transparent field to bloom into. */
body.window-collapsed {
  background: transparent !important;
}
body.window-collapsed #screen-live,
body.window-collapsed .screen {
  /* Don't render studio content in the 56px collapsed viewport */
  visibility: hidden;
}
body.window-collapsed #electron-titlebar {
  visibility: visible;
}

/* The traveling conic gradient — sits BEHIND the titlebar, 2px larger on
 * each side, clipped to a ring by a mask so only the border shows. */
body.window-collapsed #electron-titlebar::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--wispherflow-glow-angle, 0deg),
    #4285f4 0%,
    /* Gemini blue */ #9b72ff 25%,
    /* purple */ #ff5fa2 50%,
    /* pink */ #00d4ff 75%,
    /* cyan */ #4285f4 100% /* back to blue */
  );
  /* Mask so only the ring (2px border) renders, not the interior */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: wispherflowGlowSpin 3s linear infinite;
  pointer-events: none;
}

/* Soft outer bloom — same gradient, blurred, no mask, so it glows into the
 * surrounding transparent desktop background. Capture-invisible too. */
body.window-collapsed #electron-titlebar::after {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: -2;
  border-radius: 10px;
  background: conic-gradient(
    from var(--wispherflow-glow-angle, 0deg),
    rgba(66, 133, 244, 0.55) 0%,
    rgba(155, 114, 255, 0.55) 25%,
    rgba(255, 95, 162, 0.55) 50%,
    rgba(0, 212, 255, 0.55) 75%,
    rgba(66, 133, 244, 0.55) 100%
  );
  filter: blur(10px);
  opacity: 0.7;
  animation: wispherflowGlowSpin 3s linear infinite;
  pointer-events: none;
}

/* ======================================================================
   WEB-ONLY LIVE-SESSION LIGHT THEME OVERRIDE  (Wave C3.1, 2026-04-19)
   REVISED 2026-04-19 evening: user's follow-up — "entire live session
   window, not just the Q&A cards, and no more terra color anywhere."

   Strategy: override the CSS variables at the #screen-live scope so
   every component that uses var(--canvas-*), var(--terra*), var(--bg)
   cascades to light-theme values regardless of the global
   [data-theme='dark'] on the html element. This fixes the topbar,
   sidebars, credit counter, timer, Quick Ref, ticker, answer cards
   and any terra-accented element all in one shot — no whack-a-mole.

   Terra palette → neutral greys so ZERO orange appears in the live
   session window. End Session button keeps red (explicit override).
   ---------------------------------------------------------------------- */
body:not(.is-electron) #screen-live,
body:not(.is-electron) #screen-live * {
  /* Canvas scale — invert from dark-theme (where 950=near-white) back to
     light-theme (where 950=near-black text on white canvas). */
  --canvas-50:  #fafafa !important;
  --canvas-100: #f4f4f5 !important;
  --canvas-200: #e4e4e7 !important;
  --canvas-300: #d4d4d8 !important;
  --canvas-400: #a1a1aa !important;
  --canvas-500: #71717a !important;
  --canvas-600: #52525b !important;
  --canvas-700: #3f3f46 !important;
  --canvas-800: #27272a !important;
  --canvas-900: #18181b !important;
  --canvas-950: #0f0f0e !important;
  /* Terra accent → neutral darks (no orange anywhere in the live window) */
  --terra:     #3f3f46 !important;
  --terra-50:  rgba(0, 0, 0, 0.03) !important;
  --terra-100: rgba(0, 0, 0, 0.06) !important;
  --terra-200: rgba(0, 0, 0, 0.1) !important;
  --terra-300: rgba(0, 0, 0, 0.16) !important;
  --terra-400: #71717a !important;
  --terra-500: #52525b !important;
  --terra-600: #3f3f46 !important;
  --terra-700: #27272a !important;
  --terra-800: #18181b !important;
  --terra-900: #0f0f0e !important;
  /* Surface tokens */
  --white:       #ffffff !important;
  --bg:          #ffffff !important;
  --bg-card:     #ffffff !important;
  --bg-elevated: #ffffff !important;
  --bg-subtle:   #fafafa !important;
  --text-primary:   #0f0f0e !important;
  --text-secondary: #3f3f46 !important;
  --text-muted:     #52525b !important;
  --dark-text:      #0f0f0e !important;
  --border:         rgba(0, 0, 0, 0.08) !important;
  --border-strong:  rgba(0, 0, 0, 0.12) !important;
}
/* The wrapper itself must actually render in white. */
body:not(.is-electron) #screen-live {
  background: #ffffff !important;
  color: #0f0f0e !important;
}

/* Original scoped override from the earlier patch (keeps explicit rules
   that can't come from variable-cascade alone — e.g. End-button red,
   ticker dim placeholder). The variable override above handles most
   elements; the block below handles the exceptions.
   ---------------------------------------------------------------------- */
/* The wrapper itself must actually render in white — duplicated here
   intentionally so any later block that changes --bg doesn't un-style us. */

/* (Historical comment retained below for traceability — original ask)
   User's literal ask: "premium white and all the text in black, the q
   and answer and no more terra color on the live window ... the header
   icon colors will turn from white to black and the end button will
   stay red in all the panels like the live transcript and the quick
   ref and the share screen. This is only for the web application not
   for the desktop app."

   Scoped to `body:not(.is-electron) #screen-live` so:
     - Desktop Electron app keeps its current dark theme untouched
     - Web app live-session window forces a readable high-contrast theme
     - Non-live-session pages (studio, auth, etc.) untouched

   Priority rule: use !important sparingly, only for variables that are
   cascaded from [data-theme="dark"] blocks elsewhere in this file.
   ====================================================================== */
body:not(.is-electron) #screen-live {
  background: #f5f5f4 !important;
  color: #0f0f0e !important;
}
body:not(.is-electron) #screen-live .live-main,
body:not(.is-electron) #screen-live .live-topbar {
  background: #ffffff !important;
}
body:not(.is-electron) #screen-live .live-panel {
  background: #ffffff !important;
  color: #0f0f0e !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
/* Panel header + body — flat white for regular view only. Scoped to
   .answers-panel so this does NOT paint the fullscreen feed white. */
body:not(.is-electron) #screen-live .answers-panel .panel-head,
body:not(.is-electron) #screen-live .answers-panel .panel-body {
  background: #ffffff !important;
  color: #0f0f0e !important;
}
body:not(.is-electron) #screen-live .panel-head h3,
body:not(.is-electron) #screen-live .panel-head .shared-preview-label {
  color: #27272a !important;
}
/* Core content — answer body, Q label, transcript text — pure black on white. */
body:not(.is-electron) #screen-live .ans-body,
body:not(.is-electron) #screen-live .ans-q-text,
body:not(.is-electron) #screen-live .ans-q-collapsed,
body:not(.is-electron) #screen-live .ans-q-expanded,
body:not(.is-electron) #screen-live .ans-q-raw,
body:not(.is-electron) #screen-live .t-text,
body:not(.is-electron) #screen-live .live-ticker-text {
  color: #0f0f0e !important;
}
/* Speaker labels in the transcript. "INTERVIEWER" / "YOU" — dark, not terra. */
body:not(.is-electron) #screen-live .t-speaker-label.interviewer,
body:not(.is-electron) #screen-live .t-speaker-label.you {
  color: #52525b !important;
}
/* Header icons / topbar buttons — black instead of white. */
body:not(.is-electron) #screen-live .topbar-btn,
body:not(.is-electron) #screen-live .panel-collapse-btn {
  color: #27272a !important;
}
body:not(.is-electron) #screen-live .topbar-btn:hover,
body:not(.is-electron) #screen-live .panel-collapse-btn:hover {
  color: #0f0f0e !important;
  background: rgba(0, 0, 0, 0.05) !important;
}
body:not(.is-electron) #screen-live .topbar-btn svg,
body:not(.is-electron) #screen-live .panel-collapse-btn svg {
  stroke: currentColor !important;
}
/* END SESSION button — stays red in BOTH themes. Explicit override so
   the black-text rule above doesn't bleed into it. */
body:not(.is-electron) #screen-live #end-btn,
body:not(.is-electron) #screen-live .btn-end-session,
body:not(.is-electron) #screen-live .end-session-btn {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #b91c1c !important;
}
body:not(.is-electron) #screen-live #end-btn:hover,
body:not(.is-electron) #screen-live .btn-end-session:hover,
body:not(.is-electron) #screen-live .end-session-btn:hover {
  background: #b91c1c !important;
}
/* Answer Now — keep its prominent accent but use a neutral dark, not terra. */
body:not(.is-electron) #screen-live .btn-answer-now {
  background: #111111 !important;
  color: #ffffff !important;
}
body:not(.is-electron) #screen-live .btn-answer-now:hover {
  background: #27272a !important;
}
/* Live ticker strip — neutral grey on white instead of terra on dark. */
body:not(.is-electron) #screen-live .live-ticker-strip {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
  color: #27272a !important;
}
body:not(.is-electron) #screen-live .live-ticker-text,
body:not(.is-electron) #screen-live .live-ticker-text .ticker-interim,
body:not(.is-electron) #screen-live .live-ticker-text.ticker-placeholder {
  color: #27272a !important;
}
/* Answer items — enterprise redesign: NO card chrome, plain text only.
   Scoped to #screen-live and NOT to #fullscreen-overlay. */
body:not(.is-electron) #screen-live .answers-panel .answer-item,
body:not(.is-electron) #screen-live .answers-panel .answer-item.ans-history {
  background: transparent !important;
  border: 0 !important;
  color: #0f0f0e !important;
  opacity: 1 !important;
}
/* Answer-mode pills (Bullets / Full) */
body:not(.is-electron) #screen-live .mode-pill {
  color: #52525b !important;
  background: transparent !important;
}
body:not(.is-electron) #screen-live .mode-pill.active {
  color: #0f0f0e !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
/* Shorter / Longer buttons on answer cards */
body:not(.is-electron) #screen-live .btn-shorter,
body:not(.is-electron) #screen-live .btn-longer {
  color: #27272a !important;
  background: #f4f4f5 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
/* Live transcript items */
body:not(.is-electron) #screen-live .t-item {
  color: #0f0f0e !important;
}
/* Input bar at the bottom — user explicitly asked to leave it alone.
   Inheriting whatever the parent chat-bar styling is; no override. */
/* Scrollbars on panel bodies — light-theme friendly */
body:not(.is-electron) #screen-live .panel-body {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}

/* ────────────────────────────────────────────────────────────────────
   Additional explicit overrides for topbar + sidebar + Quick Ref
   (things the variable-cascade above doesn't fully reach because of
   specific hardcoded colors in their original rules).
   ──────────────────────────────────────────────────────────────────── */
/* Topbar — the strip with timer / credits / Answer Now / model picker */
body:not(.is-electron) #screen-live .live-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #0f0f0e !important;
}
body:not(.is-electron) #screen-live .live-timer,
body:not(.is-electron) #screen-live .live-credit {
  color: #0f0f0e !important;
  background: transparent !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
/* Credit badge — was terra-orange. Neutral now. */
body:not(.is-electron) #screen-live .live-credit {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #27272a !important;
}
/* Auto-delay chip (200ms / 500ms etc.) */
body:not(.is-electron) #screen-live .auto-delay-chip {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #27272a !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
body:not(.is-electron) #screen-live .auto-delay-chip:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}
/* Left side: Shared Screen preview panel */
body:not(.is-electron) #screen-live .shared-preview-panel,
body:not(.is-electron) #screen-live .shared-preview-header,
body:not(.is-electron) #screen-live .shared-preview-placeholder {
  background: #ffffff !important;
  color: #0f0f0e !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
/* Right side: Quick Ref column */
body:not(.is-electron) #screen-live .quick-ref,
body:not(.is-electron) #screen-live .quick-ref-panel,
body:not(.is-electron) #screen-live .quick-ref-section,
body:not(.is-electron) #screen-live .quick-ref-header,
body:not(.is-electron) #screen-live .quick-ref-content {
  background: #ffffff !important;
  color: #0f0f0e !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body:not(.is-electron) #screen-live .quick-ref-section-title,
body:not(.is-electron) #screen-live .quick-ref h4,
body:not(.is-electron) #screen-live .quick-ref h3 {
  color: #18181b !important;
}
/* Inline term highlights (AWS SQS, S3, etc. — previously terra-tinted) */
body:not(.is-electron) #screen-live .term,
body:not(.is-electron) #screen-live .code-term,
body:not(.is-electron) #screen-live .technical-term,
body:not(.is-electron) #screen-live [class*='highlight'] {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #0f0f0e !important;
  border-color: transparent !important;
}
/* Live transcript sidebar (outer wrapper) */
body:not(.is-electron) #screen-live #transcript-feed,
body:not(.is-electron) #screen-live .transcript-panel {
  background: #ffffff !important;
  color: #0f0f0e !important;
}
/* Hide-previous-answers link at the top of the answer feed */
body:not(.is-electron) #screen-live .ans-history-toggle,
body:not(.is-electron) #screen-live #ans-history-toggle {
  color: #27272a !important;
  background: transparent !important;
}
/* Previous answers indicator arrow */
body:not(.is-electron) #screen-live .ans-q-arrow {
  color: #52525b !important;
}
/* "N MORE LINES" label next to Q */
body:not(.is-electron) #screen-live .ans-q-linecount {
  color: #52525b !important;
}
/* Volume meter / slider */
body:not(.is-electron) #screen-live .topbar-opacity-meter,
body:not(.is-electron) #screen-live input[type='range']::-webkit-slider-thumb,
body:not(.is-electron) #screen-live input[type='range']::-moz-range-thumb {
  background: #52525b !important;
  accent-color: #27272a !important;
}
body:not(.is-electron) #screen-live input[type='range'] {
  accent-color: #27272a !important;
}
/* Waveform candles — black in light theme, no terra glow */
body:not(.is-electron) #screen-live .vw-bar {
  background: #0f0f0e !important;
  box-shadow: none !important;
}
/* Model picker button (GPT Mini etc.) */
body:not(.is-electron) #screen-live .model-picker-btn,
body:not(.is-electron) #screen-live .live-model-chip {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #0f0f0e !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
/* Mode pills (Bullets / Full) */
body:not(.is-electron) #screen-live .mode-pill {
  color: #52525b !important;
  background: transparent !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
body:not(.is-electron) #screen-live .mode-pill.active {
  color: #ffffff !important;
  background: #18181b !important;
}
/* Answer Now button — neutral dark, NOT terra */
body:not(.is-electron) #screen-live .btn-answer-now {
  background: #111111 !important;
  color: #ffffff !important;
  border-color: #111111 !important;
}
/* Live ticker strip — subtle grey, not terra-tinted */
body:not(.is-electron) #screen-live .live-ticker-strip {
  background: rgba(0, 0, 0, 0.03) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #27272a !important;
}
/* Ticker visibility — show ONLY when the Live Transcript panel is
   collapsed. When transcript is visible, the ticker is redundant
   (user can read the live interviewer text directly in the transcript
   column). #live-main gets the .left-collapsed class from
   toggleLeftPanel() in session.js when the panel is hidden. */
/* Prior rule hid ticker when shared-screen was visible — desktop-parity design
   now keeps the listening card pinned at all times. */
body:not(.is-electron) #screen-live #live-main:not(.left-collapsed) #live-ticker-strip {
  display: block !important;
}
/* SVG icons inside the topbar — force currentColor so they inherit black */
body:not(.is-electron) #screen-live .topbar-btn svg *,
body:not(.is-electron) #screen-live .panel-collapse-btn svg *,
body:not(.is-electron) #screen-live .live-topbar svg * {
  stroke: currentColor !important;
}
/* Kill any lingering terra backgrounds on buttons/badges */
body:not(.is-electron) #screen-live [class*='terra'],
body:not(.is-electron) #screen-live [class*='Terra'] {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #0f0f0e !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* ── A-/A+ font-size buttons ── */
body:not(.is-electron) #screen-live .topbar-size-btn {
  color: #0f0f0e !important;
  background: transparent !important;
}
body:not(.is-electron) #screen-live .topbar-size-btn:hover {
  color: #0f0f0e !important;
  background: rgba(0, 0, 0, 0.05) !important;
  box-shadow: none !important;
}

/* ── Reset Layout button ── */
body:not(.is-electron) #screen-live .topbar-reset-btn {
  color: #0f0f0e !important;
  background: transparent !important;
}
body:not(.is-electron) #screen-live .topbar-reset-btn:hover {
  color: #0f0f0e !important;
  background: rgba(0, 0, 0, 0.05) !important;
}

/* ── Model switcher (GPT Mini) — plain text, no pill border ── */
body:not(.is-electron) #screen-live .model-switcher-btn {
  color: #0f0f0e !important;
  background: transparent !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
body:not(.is-electron) #screen-live .model-switcher-btn:hover {
  color: #0f0f0e !important;
  background: rgba(0, 0, 0, 0.05) !important;
}
body:not(.is-electron) #screen-live .model-switcher-name {
  color: #0f0f0e !important;
}

/* ── Input bar at bottom of AI Answers column — white surface ── */
body:not(.is-electron) #screen-live .answer-input-bar {
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body:not(.is-electron) #screen-live .answer-compose {
  background: #fafafa !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
body:not(.is-electron) #screen-live .answer-compose:focus-within {
  border-color: #27272a !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}
body:not(.is-electron) #screen-live .answer-compose-input {
  color: #0f0f0e !important;
}
body:not(.is-electron) #screen-live .answer-compose-input::placeholder {
  color: #a1a1aa !important;
}
body:not(.is-electron) #screen-live .answer-input-bar .send-indicator {
  color: #52525b !important;
}
/* Quick Ref headings (YOUR INTRO, KEY SKILLS, etc.) — bold black, not terra */
body:not(.is-electron) #screen-live .ref-keyword-item.ref-keyword-heading {
  color: #18181b !important;
  font-weight: 700 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   FULLSCREEN OVERLAY — dark glass; UNDO all light-theme overrides above.
   #fullscreen-overlay lives inside #screen-live so every rule above
   (#screen-live *) also applies to it. This block resets back to dark values.
   ════════════════════════════════════════════════════════════════════════ */
body:not(.is-electron) #screen-live #fullscreen-overlay,
body:not(.is-electron) #screen-live #fullscreen-overlay * {
  --canvas-500: rgba(255,255,255,0.55) !important;
  --canvas-600: rgba(255,255,255,0.70) !important;
  --canvas-700: rgba(255,255,255,0.80) !important;
  --canvas-800: rgba(255,255,255,0.90) !important;
  --canvas-900: rgba(255,255,255,0.95) !important;
  --canvas-950: #ffffff !important;
  --text-primary:   rgba(255,255,255,0.92) !important;
  --text-secondary: rgba(255,255,255,0.55) !important;
  --text-muted:     rgba(255,255,255,0.40) !important;
  --dark-text:      rgba(255,255,255,0.92) !important;
}
body:not(.is-electron) #screen-live #fullscreen-overlay .topbar-btn,
body:not(.is-electron) #screen-live #fullscreen-overlay .topbar-size-btn,
body:not(.is-electron) #screen-live #fullscreen-overlay .topbar-reset-btn {
  color: rgba(255,255,255,0.88) !important;
  background: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}
body:not(.is-electron) #screen-live #fullscreen-overlay .topbar-size-btn:hover,
body:not(.is-electron) #screen-live #fullscreen-overlay .topbar-reset-btn:hover,
body:not(.is-electron) #screen-live #fullscreen-overlay .topbar-btn:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.20) !important;
}
body:not(.is-electron) #screen-live #fullscreen-overlay .model-switcher-btn,
body:not(.is-electron) #screen-live #fullscreen-overlay .model-switcher-name {
  color: rgba(255,255,255,0.82) !important;
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.16) !important;
}
body:not(.is-electron) #screen-live #fullscreen-overlay .model-switcher-btn:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.20) !important;
}
body:not(.is-electron) #screen-live #fullscreen-overlay .mode-pill {
  color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
  border-color: rgba(255,255,255,0.12) !important;
}
body:not(.is-electron) #screen-live #fullscreen-overlay .mode-pill.active {
  color: rgba(255,255,255,0.95) !important;
  background: rgba(255,255,255,0.18) !important;
}
body:not(.is-electron) #screen-live #fullscreen-overlay .ref-keyword-item.ref-keyword-heading {
  color: #4ade80 !important;
}
body:not(.is-electron) #screen-live #fullscreen-overlay .vw-bar {
  background: rgba(255,255,255,0.80) !important;
  box-shadow: 0 0 4px rgba(255,255,255,0.25) !important;
}
body:not(.is-electron) #screen-live #fullscreen-overlay .topbar-btn svg *,
body:not(.is-electron) #screen-live #fullscreen-overlay .fs-topbar svg * {
  stroke: currentColor !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FINALIZED LIVE-SESSION UI (consumer + enterprise web)
   ═══════════════════════════════════════════════════════════════════
   Layout: 25% Shared Screen | 75% AI Answers (Transcript + Quick Ref panels removed).
   Topbar: Material Auto-answer toggle, full-work-screenshot icon, ⋮ overflow menu.
   ─────────────────────────────────────────────────────────────────── */

/* 25/75 split — overrides the legacy 3-column grid */
#screen-live .live-main {
  grid-template-columns: 25% 1fr !important;
  gap: 0;
}
/* Hide the now-unused dividers */
#screen-live .live-col-divider { display: none !important; }
/* Left column is now just the shared screen — fill the column fully */
#screen-live .live-col-left-wrap .shared-preview-panel { flex: 1 1 100%; }
/* CRITICAL: legacy CSS pins .answers-panel to grid-column:3 (5-col grid).
   With 2-col grid, that creates a phantom third column and the panel
   floats off to the right. Force it into column 2 of the new grid. */
#screen-live .live-main .answers-panel { grid-column: 2 !important; }
#screen-live .live-main .live-col-left-wrap { grid-column: 1 !important; }

/* ── Fullscreen overlay: AI Answers centered (15% margin each side) ───── */
.fullscreen-overlay .fs-main {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  padding: 0 !important;
}
.fullscreen-overlay .fs-answers-panel {
  width: 70% !important;
  max-width: 70% !important;
  flex: 0 0 70% !important;
  margin: 0 auto !important;
}

/* ── Material auto-answer toggle ───────────────────────────────── */
.auto-answer-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--canvas-50); border: 1px solid var(--canvas-200);
  cursor: pointer; user-select: none;
  /* 2026-05-07: keep the label on one line and don't let the topbar's
     flex squeeze break it into "Auto / answer" stacked. The toggle
     should always render as one horizontal pill at any topbar width. */
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px; font-weight: 500; color: var(--ink-700);
}
.auto-answer-toggle .auto-answer-label { line-height: 1; white-space: nowrap; }
.aa-switch {
  position: relative; display: inline-block;
  width: 32px; height: 18px;
}
.aa-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.aa-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--canvas-300); border-radius: 999px;
  transition: background 0.18s ease;
}
.aa-slider::before {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.18s ease;
}
.aa-switch input:checked + .aa-slider { background: var(--terra-500, #d97757); }
.aa-switch input:checked + .aa-slider::before { transform: translateX(14px); }

/* ═══════════════════════════════════════════════════════════════════
   Auto-answer toggle — fullscreen ⋮ menu (canonical block, 2026-05-07)
   ═══════════════════════════════════════════════════════════════════
   "Variant B — classic iOS dark" picked from c:/tmp/toggle-mockup.html.

   Dark menu (default fullscreen):
     OFF: faint white track 18% + 20% border, white thumb on the left
     ON:  bright white track 95% + 95% border, dark #1a1a1a thumb on right

   Light-bg menu (bright shared screen → menu flips white):
     OFF: faint black track 18% + 18% border, white thumb on the left
     ON:  solid #1a1a1a dark track + border, white thumb on the right

   The thumb color flips so it's always visible against whichever pill bg
   is active. Hardcoded everything — `var(--terra-500)` resolves to
   #52525b inside #screen-live (the "no orange in live session" override
   near line 9065) and would render the pill invisible against the
   menu's frosted-glass bg. See project_live_session_no_orange_var_trap.md.

   Earlier light-bg copy at the top of this file (~line 7587) was removed
   in favor of this single block.
   ═══════════════════════════════════════════════════════════════════ */
/* Bumped specificity from `.fs-more-menu` (0,2,0) to `#fs-more-menu`
   (1,1,0) so these rules absolutely cannot lose the cascade to any
   other class-only rule that touches `.aa-slider` from anywhere in the
   stylesheet. Also opacity bumped: 0.18 → 0.30 (OFF dark) so the pill
   reads on the rgba(20,20,25,0.92) menu bg without squinting. */
#fs-more-menu .aa-switch {
  width: 36px !important;
  height: 20px !important;
}
#fs-more-menu .aa-slider {
  background: rgba(255, 255, 255, 0.30) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 999px !important;
}
#fs-more-menu .aa-slider::before {
  width: 16px !important;
  height: 16px !important;
  top: 1px !important;
  left: 1px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.18s ease, background 0.18s ease !important;
}
#fs-more-menu .aa-switch input:checked + .aa-slider {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
}
#fs-more-menu .aa-switch input:checked + .aa-slider::before {
  transform: translateX(16px) !important;
  background: #1a1a1a !important;
}

/* Light-bg variant — invert the palette so contrast is preserved on the
   white menu surface that fs-light-bg flips to. */
.fullscreen-overlay.fs-light-bg #fs-more-menu .aa-slider {
  background: rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(0, 0, 0, 0.30) !important;
}
.fullscreen-overlay.fs-light-bg #fs-more-menu .aa-slider::before {
  background: #fff !important;
}
.fullscreen-overlay.fs-light-bg #fs-more-menu .aa-switch input:checked + .aa-slider {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}
.fullscreen-overlay.fs-light-bg #fs-more-menu .aa-switch input:checked + .aa-slider::before {
  background: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NEW auto-answer toggle — fs ⋮ menu (2026-05-07, post-rewrite)
   ═══════════════════════════════════════════════════════════════════
   Brand-new class names so no other rule in this 10k-line stylesheet
   can possibly conflict. The HTML carries inline !important on the
   pill + thumb base styles (off state); these rules only handle the
   :checked transitions.

   Dark menu (default fullscreen):
     OFF: rgba(255,255,255,0.30) pill, white thumb on left  (inline)
     ON:  rgba(255,255,255,0.95) pill, dark thumb on right

   Light-bg menu (bright shared screen):
     OFF: pill flips to rgba(0,0,0,0.25) (overrides the inline white-bg)
     ON:  solid #1a1a1a pill, white thumb on right
   ═══════════════════════════════════════════════════════════════════ */
.np-aa-toggle {
  display: inline-flex !important;
  align-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  flex-shrink: 0 !important;
}
.np-aa-toggle-input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  pointer-events: none !important;
}
/* ON state — dark menu. Specificity (0,2,0); !important locks it. */
.np-aa-toggle-input:checked + .np-aa-toggle-pill {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
}
.np-aa-toggle-input:checked + .np-aa-toggle-pill > .np-aa-toggle-thumb {
  transform: translateX(16px) !important;
  background: #1a1a1a !important;
}
/* Light-bg variant — invert palette */
.fullscreen-overlay.fs-light-bg .np-aa-toggle-pill {
  background: rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(0, 0, 0, 0.30) !important;
}
.fullscreen-overlay.fs-light-bg .np-aa-toggle-input:checked + .np-aa-toggle-pill {
  background: #1a1a1a !important;
  border-color: #1a1a1a !important;
}
.fullscreen-overlay.fs-light-bg .np-aa-toggle-input:checked + .np-aa-toggle-pill > .np-aa-toggle-thumb {
  background: #ffffff !important;
}


/* ── ⋮ overflow menu ────────────────────────────────────────────── */
.topbar-more { position: relative; display: inline-block; }
.topbar-more-btn { padding: 4px 6px; }
.topbar-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px; padding: 8px;
  background: var(--canvas-0, #fff);
  border: 1px solid var(--canvas-200);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  z-index: 100;
}
[data-theme='dark'] .topbar-more-menu {
  background: var(--canvas-100, #1a1a1a);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}
.more-menu-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 6px;
  font-size: 12px; color: var(--ink-700);
}
.more-menu-row + .more-menu-row { border-top: 1px solid var(--canvas-200); }
[data-theme='dark'] .more-menu-row + .more-menu-row { border-top-color: rgba(255,255,255,0.06); }
.more-menu-label { font-weight: 500; }
.more-menu-size { display: inline-flex; gap: 4px; }
.more-menu-row .opacity-slider { width: 110px; }

/* "Shortcuts" row as a clickable button (same visual footprint as the other rows) */
.more-menu-row-btn {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-700);
  text-align: left;
}
.more-menu-row-btn:hover {
  background: var(--canvas-50);
}
.more-menu-icon {
  font-size: 14px;
  color: var(--ink-500, var(--canvas-600));
  line-height: 1;
}

/* Inline shortcuts panel — expands INSIDE the ⋮ menu card, not as a banner */
.more-menu-shortcuts-panel {
  display: none;
  padding: 2px 6px 8px;
  border-top: 1px solid var(--canvas-200);
}
.more-menu-shortcuts-panel.open {
  display: block;
}
[data-theme='dark'] .more-menu-shortcuts-panel {
  border-top-color: rgba(255,255,255,0.06);
}
.more-menu-shortcuts-hint {
  font-size: 10.5px;
  color: var(--ink-500, var(--canvas-600));
  padding: 6px 0 8px;
}
.more-menu-shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.more-menu-shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-700);
  padding: 3px 0;
}
.more-menu-shortcut-item kbd {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--canvas-300);
  background: var(--canvas-50);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  color: var(--ink-800, var(--canvas-800));
}

/* ── Fullscreen topbar v2: labeled Screenshot, auto-answer toggle, ⋮ overflow ── */

/* Screenshot as word+icon pill (shape matches Answer Now, neutral glass color) */
.fs-topbar .fs-capture-btn-labeled {
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 99px !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  background: var(--cg-topbar-btn-bg) !important;
  border: 1px solid var(--cg-topbar-btn-border) !important;
  color: var(--cg-topbar-btn-text) !important;
}
.fs-topbar .fs-capture-btn-labeled .fs-capture-label {
  display: inline !important;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.fs-topbar .fs-capture-btn-labeled svg { flex-shrink: 0; }

/* Auto-answer labeled toggle in fullscreen topbar */
.fs-topbar .fs-auto-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 28px !important;
  padding: 0 10px 0 12px !important;
  border-radius: 99px !important;
  background: var(--cg-topbar-btn-bg) !important;
  border: 1px solid var(--cg-topbar-btn-border) !important;
  color: var(--cg-topbar-btn-text) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  user-select: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.fs-topbar .fs-auto-toggle:hover {
  background: var(--cg-topbar-btn-hover);
  color: var(--cg-topbar-text);
}
.fs-topbar .fs-auto-label { line-height: 1; white-space: nowrap; }
.fs-topbar .fs-aa-switch {
  position: relative; display: inline-block;
  width: 28px; height: 16px;
  background: rgba(255,255,255,0.2);
  border-radius: 99px;
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.fs-topbar .fs-aa-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.18s ease;
}
.fs-topbar .fs-auto-toggle.active .fs-aa-switch {
  background: var(--terra-500, #d97757);
}
.fs-topbar .fs-auto-toggle.active .fs-aa-thumb {
  transform: translateX(12px);
}

/* ⋮ overflow menu (glass dropdown) */
.fs-topbar .fs-more-wrap {
  position: relative;
  display: inline-block;
}
.fs-topbar .fs-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 10px;
  background: rgba(20,20,25,0.92);
  backdrop-filter: blur(var(--cg-blur)) saturate(var(--cg-saturate));
  -webkit-backdrop-filter: blur(var(--cg-blur)) saturate(var(--cg-saturate));
  border: 1px solid var(--cg-topbar-btn-border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  z-index: 200;
}
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-more-menu {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.1);
}
.fs-topbar .fs-more-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 4px 2px;
  font-size: 12px;
  color: var(--cg-topbar-btn-text);
}
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-more-row { color: #1a1a1a; }
.fs-topbar .fs-more-label { font-weight: 500; }
.fs-topbar .fs-more-menu .fs-size-group {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-more-menu .fs-size-group {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.1) !important;
}

/* ── Main (regular) topbar: Screenshot + Switch-screen as word+icon pills ── */
.live-topbar .topbar-btn.capture-btn-labeled,
.live-topbar .topbar-btn.switch-btn-labeled {
  width: auto !important;
  min-width: 0 !important;
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 99px !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: var(--canvas-700) !important;
  white-space: nowrap;
}
.live-topbar .topbar-btn.capture-btn-labeled:hover,
.live-topbar .topbar-btn.switch-btn-labeled:hover {
  background: rgba(0, 0, 0, 0.07) !important;
  color: var(--canvas-900) !important;
}
.live-topbar .topbar-btn.capture-btn-labeled span:not(.capture-live-dot),
.live-topbar .topbar-btn.switch-btn-labeled span {
  display: inline !important;
  font-size: 11px;
  font-weight: 600;
}
.live-topbar .topbar-btn.capture-btn-labeled svg,
.live-topbar .topbar-btn.switch-btn-labeled svg {
  flex-shrink: 0;
}
[data-theme='dark'] .live-topbar .topbar-btn.capture-btn-labeled,
[data-theme='dark'] .live-topbar .topbar-btn.switch-btn-labeled {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
[data-theme='dark'] .live-topbar .topbar-btn.capture-btn-labeled:hover,
[data-theme='dark'] .live-topbar .topbar-btn.switch-btn-labeled:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

/* Fullscreen topbar: Switch-screen as word+icon pill (same shape as Screenshot) */
.fs-topbar .fs-switch-btn-labeled {
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 99px !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  background: var(--cg-topbar-btn-bg) !important;
  border: 1px solid var(--cg-topbar-btn-border) !important;
  color: var(--cg-topbar-btn-text) !important;
}
.fs-topbar .fs-switch-btn-labeled span {
  display: inline !important;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.fs-topbar .fs-switch-btn-labeled svg { flex-shrink: 0; }

/* Opacity slider inside ⋮ menu — glass-styled compact range input */
.fs-topbar .fs-more-menu .opacity-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 99px;
  outline: none;
  cursor: pointer;
}
.fs-topbar .fs-more-menu .opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--terra-500, #d97757);
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.fs-topbar .fs-more-menu .opacity-slider::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--terra-500, #d97757);
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.9);
}
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-more-menu .opacity-slider {
  background: rgba(0,0,0,0.12);
}

/* ── Nav row under AI Answers ticker — prev / A-A+ / next ─────────── */
.ans-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.02);
  flex-shrink: 0;
}
[data-theme='dark'] .ans-nav-row {
  background: rgba(255,255,255,0.04);
  border-bottom-color: rgba(255,255,255,0.08);
}
.ans-nav-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--canvas-700);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ans-nav-btn:hover {
  background: rgba(0,0,0,0.08);
  color: var(--canvas-900);
}
.ans-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
[data-theme='dark'] .ans-nav-btn {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.85);
}
[data-theme='dark'] .ans-nav-btn:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.ans-nav-size {
  display: inline-flex;
  gap: 2px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 99px;
  padding: 2px;
}
[data-theme='dark'] .ans-nav-size {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}
.ans-size-btn {
  border: none;
  background: transparent;
  color: var(--canvas-700);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.ans-size-btn:hover {
  background: rgba(0,0,0,0.06);
}
[data-theme='dark'] .ans-size-btn {
  color: rgba(255,255,255,0.85);
}
[data-theme='dark'] .ans-size-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* Fullscreen variants — glass-styled to match fs-topbar */
.fs-answers-panel .live-ticker-strip,
.fs-answers-panel .fs-live-ticker-strip {
  background: rgba(0,0,0,0.2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.9);
}
.fs-answers-panel .live-ticker-text { color: rgba(255,255,255,0.92); }
.fs-answers-panel .ans-nav-row {
  background: rgba(255,255,255,0.06) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
}
.fs-answers-panel .ans-nav-btn {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: rgba(255,255,255,0.92) !important;
}
.fs-answers-panel .ans-nav-btn:hover {
  background: rgba(255,255,255,0.18) !important;
}
.fs-answers-panel .ans-nav-size {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.18) !important;
}
.fs-answers-panel .ans-size-btn {
  color: rgba(255,255,255,0.92) !important;
}
.fs-answers-panel .ans-size-btn:hover {
  background: rgba(255,255,255,0.14) !important;
}

/* ── Teams-style mutable buttons (mic + sys-audio) ──────────────────
   Default (OFF) = muted gray + slash visible
   .active (ON)  = bright + slash hidden
*/
.mutable-btn {
  color: rgba(0,0,0,0.35) !important;
  transition: color 0.15s ease;
}
.mutable-btn:hover { color: rgba(0,0,0,0.55) !important; }
.mutable-btn.active { color: var(--canvas-800) !important; }
.mutable-btn.active:hover { color: var(--canvas-900) !important; }
.mutable-btn .mute-slash { display: inline; opacity: 0.9; }
.mutable-btn.active .mute-slash { display: none; }

[data-theme='dark'] .mutable-btn { color: rgba(255,255,255,0.35) !important; }
[data-theme='dark'] .mutable-btn:hover { color: rgba(255,255,255,0.6) !important; }
[data-theme='dark'] .mutable-btn.active { color: #fff !important; }

/* Fullscreen variants inherit glass context */
.fs-topbar .mutable-btn {
  color: rgba(255,255,255,0.4) !important;
}
.fs-topbar .mutable-btn:hover { color: rgba(255,255,255,0.7) !important; }
.fs-topbar .mutable-btn.active { color: rgba(255,255,255,0.95) !important; }

/* ═══════════════════════════════════════════════════════════════════
   TICKER STRIP — 1:1 port of the desktop answer-window listening card
   Pinned at top of AI Answers panel (regular + fullscreen).
   ═══════════════════════════════════════════════════════════════════ */

/* KILL the bad ans-nav-row implementation I added earlier */
.ans-nav-row, .fs-ans-nav-row, .ans-nav-btn, .ans-nav-size, .ans-size-btn {
  all: unset !important;
  display: none !important;
}

.ticker-strip {
  width: auto;
  /* 2026-05-07: tighter top/bottom margin so the listening card hugs
     the panel-head and the answer card below sits closer too. */
  margin: 4px 10px 4px 10px;
  background: rgba(15,15,20,0.92);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  flex-shrink: 0;
  /* Smooth animation for collapse → pill transition. Box-shadow + radius
     fade together with the row height shrink for a coherent motion. */
  transition:
    border-radius 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    padding 0.22s ease;
}
.ticker-row {
  display: flex;
  align-items: center;
  padding: 0 10px 0 12px;
  gap: 10px;
  height: 36px;
}

/* Two-row Interviewer/You ticker — slim header (.ticker-head) holds the
   existing waves icon + hist-nav controls, then two .ticker-line rows
   below it stream the system-audio (Interviewer) and mic (You) STTs. */
.ticker-head {
  display: flex;
  align-items: center;
  padding: 0 10px 0 12px;
  gap: 10px;
  height: 30px;
}
.ticker-spacer { flex: 1; }
.ticker-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 32px;
  /* 2026-05-07: smooth collapse — rows fade + fold their height when
     the parent .ticker-strip toggles .collapsed. Chevron rotates in
     parallel via its own transform transition, so the whole motion
     reads as a single coordinated animation. */
  overflow: hidden;
  transition:
    max-height 0.24s ease,
    height 0.24s ease,
    opacity 0.18s ease,
    padding-top 0.24s ease,
    padding-bottom 0.24s ease,
    border-top-width 0.18s ease;
  max-height: 32px;
  opacity: 1;
}
.ticker-line + .ticker-line { border-top: 1px solid rgba(255,255,255,0.05); }
.ticker-strip.collapsed .ticker-line {
  max-height: 0;
  height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
}
.ticker-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  width: 78px;
  flex-shrink: 0;
}

/* Per-row clear button. Hover-only so the card stays calm; appears at
   right edge when the user mouses over the row. Click → blanks the row
   text + restores idle copy. Does NOT stop STT or wipe the underlying
   transcript history — only the visible row resets. */
.ticker-clear-btn {
  width: 20px; height: 20px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.12s, background 0.12s;
}
.ticker-line:hover .ticker-clear-btn,
.ticker-clear-btn:focus-visible {
  opacity: 1;
}
.ticker-clear-btn:hover {
  /* 2026-05-07: web user wanted no card-like bg on the X clear button —
     just an icon brightness change on hover. Background + border kept
     in the Electron answer-window (which has its own inline copy of
     these styles) since the user scoped this request to web only. */
  color: rgba(255,255,255,0.92);
  background: transparent;
  border-color: transparent;
}
.ticker-clear-btn svg { width: 11px; height: 11px; }
.ticker-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--terra-300, #e89878);
}
.ticker-waves {
  display: inline-flex; align-items: center; gap: 2px; height: 14px;
}
.ticker-waves i {
  display: inline-block;
  width: 2px;
  background: currentColor;
  border-radius: 99px;
  animation: tickerWave 900ms ease-in-out infinite alternate;
}
.ticker-waves i:nth-child(1) { animation-delay: 0s;    height: 6px; }
.ticker-waves i:nth-child(2) { animation-delay: 0.12s; height: 11px; }
.ticker-waves i:nth-child(3) { animation-delay: 0.24s; height: 8px; }
.ticker-waves i:nth-child(4) { animation-delay: 0.36s; height: 5px; }
@keyframes tickerWave {
  from { transform: scaleY(0.55); opacity: 0.65; }
  to   { transform: scaleY(1.0);  opacity: 1; }
}
.ticker-waves.idle i { animation-play-state: paused; opacity: 0.3; }

.hist-nav {
  display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0;
}
.hist-btn {
  width: 22px; height: 22px;
  display: inline-grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  transition: 0.12s;
  padding: 0;
}
.hist-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.14);
}
.hist-btn:disabled { opacity: 0.3; cursor: default !important; }
.hist-btn svg { width: 12px; height: 12px; }
.hist-counter {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 99px;
  color: rgba(255,255,255,0.85);
  font-size: 10.5px; font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: 0.12s;
}
.hist-counter:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.hist-counter .live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--terra-500, #d97757);
  box-shadow: 0 0 4px rgba(217,119,87,0.7);
}
.hist-counter.not-live .live-dot {
  background: rgba(255,255,255,0.30); box-shadow: none;
}

.ticker-text-wrap {
  flex: 1; min-width: 0;
  position: relative;
  /* MUST be 'scroll' (not 'auto') for programmatic wrap.scrollLeft = wrap.scrollWidth
     to actually advance — 'auto' creates a scroll container only when needed and
     resets scrollLeft to 0 on each text replacement, breaking auto-follow. */
  overflow-x: scroll;
  scroll-behavior: smooth;
}
.ticker-text-wrap::-webkit-scrollbar { height: 0; display: none; }
.ticker-text-wrap { scrollbar-width: none; }
.ticker-text {
  display: inline-block;
  color: rgba(255,255,255,0.92);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.ticker-text.idle {
  color: rgba(255,255,255,0.45);
  font-style: italic;
}

/* Light theme override — lighter card for the regular (non-fullscreen) view */
[data-theme='light'] #live-ticker-strip,
body:not([data-theme='dark']) #live-ticker-strip {
  background: rgba(15,15,20,0.92); /* keep dark card — it reads well on light panels */
}

/* Fullscreen variant inherits existing glass context, slightly transparent */
.fs-answers-panel .ticker-strip {
  background: rgba(10,10,15,0.70);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  margin: 8px 10px 6px 10px;
}

/* ⋮ menu — Auto-answer row with minimal switch (no ugly oval) */
.fs-topbar .fs-more-menu .fs-aa-pill {
  all: unset;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.fs-topbar .fs-more-menu .fs-aa-switch {
  position: relative;
  display: inline-block;
  width: 32px; height: 18px;
  background: rgba(255,255,255,0.2);
  border-radius: 99px;
  transition: background 0.18s ease;
}
.fs-topbar .fs-more-menu .fs-aa-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.18s ease;
}
.fs-topbar .fs-more-menu .fs-aa-pill.active .fs-aa-switch {
  background: var(--terra-500, #d97757);
}
.fs-topbar .fs-more-menu .fs-aa-pill.active .fs-aa-thumb {
  transform: translateX(14px);
}

/* ⋮ menu — plain A-/A+ text buttons (no oval pills) */
.fs-topbar .fs-more-menu .fs-size-plain {
  display: inline-flex;
  gap: 10px;
}
.fs-topbar .fs-more-menu .fs-size-plain-btn {
  all: unset;
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.12s;
}
.fs-topbar .fs-more-menu .fs-size-plain-btn:hover {
  color: #fff;
}
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-more-menu .fs-size-plain-btn {
  color: rgba(0,0,0,0.7);
}
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-more-menu .fs-size-plain-btn:hover {
  color: #000;
}

/* Bridge old placeholder class to new idle visual */
.ticker-text.ticker-placeholder { color: rgba(255,255,255,0.45); font-style: italic; }

/* No background on Live/Q-counter — plain text + dot, clickable */
.hist-counter {
  background: transparent !important;
  border: none !important;
  padding: 0 6px !important;
  color: rgba(255,255,255,0.85) !important;
}
.hist-counter:hover { background: rgba(255,255,255,0.06) !important; border-radius: 4px; }

/* When auto-answer toggle is .active — terra bg + thumb shifted */
.fs-aa-pill.active .fs-aa-switch {
  background: var(--terra-500, #d97757) !important;
}
.fs-aa-pill.active .fs-aa-thumb {
  transform: translateX(16px) !important;
}

/* ── Listening card — light theme match for the regular web session ─
   Overrides the dark desktop-parity defaults so the card blends with the
   rest of the light web UI. Fullscreen overlay keeps its glass/dark look. */
body:not(.is-electron) #screen-live .ticker-strip {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: var(--canvas-800, #1e1e24) !important;
}
body:not(.is-electron) #screen-live .ticker-strip .ticker-text {
  color: var(--canvas-800, #1e1e24) !important;
}
body:not(.is-electron) #screen-live .ticker-strip .ticker-text.idle,
body:not(.is-electron) #screen-live .ticker-strip .ticker-text.ticker-placeholder {
  color: var(--canvas-500, #8a8a96) !important;
  font-style: italic;
}
body:not(.is-electron) #screen-live .ticker-strip .hist-btn {
  color: var(--canvas-600, #5a5a66) !important;
}
body:not(.is-electron) #screen-live .ticker-strip .hist-btn {
  background: transparent !important;
  border-color: transparent !important;
}
body:not(.is-electron) #screen-live .ticker-strip .hist-btn:hover:not(:disabled) {
  /* 2026-05-07: pure-icon style on regular live session window — no
     card-like hover bg / border, color brightness only. Matches the
     fullscreen treatment the user already approved. */
  background: transparent !important;
  border-color: transparent !important;
  color: var(--canvas-900, #121216) !important;
}
body:not(.is-electron) #screen-live .ticker-strip .hist-counter {
  background: transparent !important;
  border: none !important;
  color: var(--canvas-700, #3e3e48) !important;
}
body:not(.is-electron) #screen-live .ticker-strip .hist-counter:hover {
  background: transparent !important;
}
body:not(.is-electron) #screen-live .ticker-strip .ticker-icon {
  color: var(--terra-500, #d97757) !important;
}

/* Dark-mode toggle (manual [data-theme=dark]) brings back the desktop-parity dark card */
[data-theme='dark'] body:not(.is-electron) #screen-live .ticker-strip,
body[data-theme='dark']:not(.is-electron) #screen-live .ticker-strip {
  background: rgba(15, 15, 20, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Fullscreen overlay is always dark-glass regardless of base theme */
.fs-answers-panel .ticker-strip {
  background: rgba(10, 10, 15, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.fs-answers-panel .ticker-strip .ticker-text { color: rgba(255,255,255,0.92) !important; }
.fs-answers-panel .ticker-strip .hist-btn { color: rgba(255,255,255,0.78) !important; }
.fs-answers-panel .ticker-strip .hist-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* Light-theme overrides for the two-row Interviewer/You ticker */
body:not(.is-electron) #screen-live .ticker-strip .ticker-line + .ticker-line {
  border-top-color: rgba(0,0,0,0.06) !important;
}
body:not(.is-electron) #screen-live .ticker-strip .ticker-label {
  color: var(--canvas-600, #5a5a66) !important;
}
body:not(.is-electron) #screen-live .ticker-strip .ticker-clear-btn {
  color: var(--canvas-500, #8a8a96) !important;
}
body:not(.is-electron) #screen-live .ticker-strip .ticker-clear-btn:hover {
  /* 2026-05-07: pure-icon style — no hover bg/border on the X clear
     button in the regular live session window. Color brightness only. */
  background: transparent !important;
  color: var(--canvas-900, #121216) !important;
  border-color: transparent !important;
}
[data-theme='dark'] body:not(.is-electron) #screen-live .ticker-strip .ticker-line + .ticker-line,
body[data-theme='dark']:not(.is-electron) #screen-live .ticker-strip .ticker-line + .ticker-line {
  border-top-color: rgba(255,255,255,0.05) !important;
}
[data-theme='dark'] body:not(.is-electron) #screen-live .ticker-strip .ticker-label,
body[data-theme='dark']:not(.is-electron) #screen-live .ticker-strip .ticker-label {
  color: rgba(255,255,255,0.55) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ENTERPRISE ANSWER — plain Q:/A: text, no card chrome
   Applies to both regular (.answers-panel) and fullscreen
   (.fs-answers-panel) AI Answers feeds.
   ═══════════════════════════════════════════════════════════════════ */

/* Container — pure flowing text, zero card chrome */
.answers-panel .panel-body .answer-item,
.fs-answers-panel .fs-panel-body .answer-item {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
}
.answers-panel .panel-body .answer-item + .answer-item,
.fs-answers-panel .fs-panel-body .answer-item + .answer-item {
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px dashed var(--canvas-200, rgba(0,0,0,0.1)) !important;
}
[data-theme='dark'] .answers-panel .panel-body .answer-item + .answer-item,
.fs-answers-panel .fs-panel-body .answer-item + .answer-item {
  border-top-color: rgba(255,255,255,0.1) !important;
}
/* Panel body — generous reading margins, no inner card.
   2026-05-07: top padding tightened from 22px → 8px so the first Q&A
   card sits closer to the listening card / history toggle. Side and
   bottom padding kept generous for reading comfort. */
.answers-panel .panel-body,
.fs-answers-panel .fs-panel-body {
  padding: 8px 30px 22px 30px !important;
  background: transparent !important;
}
/* KILL every bit of panel chrome — answers float on the live-session
   surface with zero box, border, shadow, blur, or radius. */
#screen-live .answers-panel,
#screen-live .answers-panel.live-panel,
#fullscreen-overlay .fs-answers-panel,
#fullscreen-overlay .fs-answers-panel.fs-panel {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#screen-live .answers-panel .panel-head,
#screen-live .answers-panel .panel-body,
#fullscreen-overlay .fs-answers-panel .fs-panel-head,
#fullscreen-overlay .fs-answers-panel .fs-panel-body {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#screen-live .answers-panel .panel-head,
#fullscreen-overlay .fs-answers-panel .fs-panel-head {
  padding-left: 30px !important;
}
#screen-live .answers-panel .panel-head::after,
#screen-live .answers-panel .panel-head::before,
#fullscreen-overlay .fs-answers-panel .fs-panel-head::after,
#fullscreen-overlay .fs-answers-panel .fs-panel-head::before {
  display: none !important;
}
/* Kill ALL chrome on the answer-item itself too */
#screen-live .answers-panel .answer-item,
#fullscreen-overlay .fs-answers-panel .answer-item {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* And kill the pending/streaming/updating state chrome too */
#screen-live .answers-panel .answer-item.ans-pending,
#screen-live .answers-panel .answer-item.ans-updating,
#fullscreen-overlay .fs-answers-panel .answer-item.ans-pending,
#fullscreen-overlay .fs-answers-panel .answer-item.ans-updating {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Add vertical spacing between listening card and first Q/A */
#screen-live .answers-panel .panel-body > :first-child,
#fullscreen-overlay .fs-answers-panel .fs-panel-body > :first-child {
  margin-top: 8px !important;
}

/* Hide the expand triangle — question is always visible */
.answer-item .ans-q-arrow { display: none !important; }
/* REGULAR live-session view = black text. Scoped under #screen-live so the
   rule does NOT match the fullscreen overlay even though they share DOM. */
#screen-live .answers-panel .answer-item .ans-question-label {
  color: #111 !important;
}
.answer-item .ans-question-label {
  cursor: default !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em;
}
[data-theme='dark'] .answer-item .ans-question-label {
  color: rgba(255,255,255,0.96) !important;
}
/* Fullscreen: luminance-aware — white on dark bg, dark on light bg */
.fullscreen-overlay.fs-dark-bg .answer-item .ans-question-label,
.fullscreen-overlay:not(.fs-light-bg) .answer-item .ans-question-label {
  color: rgba(255,255,255,0.96) !important;
}
.fullscreen-overlay.fs-light-bg .answer-item .ans-question-label {
  color: #0f0f14 !important;
}

/* Q / A prefix — bold colon label, terra accent, NO vertical rule */
.answer-item .ans-question-label::before {
  content: 'Q:';
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--terra-500, #d97757);
  margin-right: 10px;
  border: none !important;
  padding: 0 !important;
  vertical-align: baseline;
}

.answer-item .ans-body {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  /* NO !important on font-size — lets .live-main.text-size-N and
     .fs-main.text-size-N rules win so A−/A+ actually adjusts the size. */
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: -0.003em;
}
/* REGULAR live-session view = black body text. Scoped under #screen-live
   so this doesn't beat the fullscreen white-text rule. */
#screen-live .answers-panel .answer-item .ans-body {
  color: #111 !important;
}
[data-theme='dark'] .answer-item .ans-body {
  color: rgba(255,255,255,0.92) !important;
}
/* Fullscreen: luminance-aware — white on dark bg, dark on light bg */
.fullscreen-overlay.fs-dark-bg .answer-item .ans-body,
.fullscreen-overlay:not(.fs-light-bg) .answer-item .ans-body {
  color: rgba(255,255,255,0.92) !important;
}
.fullscreen-overlay.fs-light-bg .answer-item .ans-body {
  color: #1a1a1f !important;
}
.fullscreen-overlay.fs-light-bg .answer-item .ans-question-label::before,
.fullscreen-overlay.fs-light-bg .answer-item .ans-body::before {
  color: #b6552f !important;
  border-right-color: rgba(0,0,0,0.15) !important;
}
.answer-item .ans-body::before {
  content: 'A:';
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--terra-500, #d97757);
  margin-right: 10px;
  border: none !important;
  padding: 0 !important;
  vertical-align: baseline;
}
[data-theme='dark'] .answer-item .ans-question-label::before,
[data-theme='dark'] .answer-item .ans-body::before,
.fs-answers-panel .answer-item .ans-question-label::before,
.fs-answers-panel .answer-item .ans-body::before {
  color: var(--terra-300, #e89878);
  border-right-color: rgba(255,255,255,0.15) !important;
}

/* Collapsed-question truncation — show full question since no expand toggle */
.answer-item .ans-q-collapsed {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Strip controls from action toolbar only (fullscreen/screenshot mode) */
.answer-item .ans-actions,
.answer-item .ans-toolbar {
  display: none !important;
}

/* Hide the pulsing atom + "Thinking…" signature for enterprise plain look */
.answer-item .atlas-signature,
.answer-item .ai-label {
  display: none !important;
}

/* ── No browser autofill chrome on chat inputs — both regular + fullscreen,
   both consumer (apps/web) and enterprise (apps/enterprise) */
.answer-compose-input:-webkit-autofill,
.fs-chatbar-input:-webkit-autofill,
.answer-compose-input:-webkit-autofill:hover,
.fs-chatbar-input:-webkit-autofill:hover,
.answer-compose-input:-webkit-autofill:focus,
.fs-chatbar-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: inherit !important;
  background-color: transparent !important;
  transition: background-color 9999s ease-in-out 0s !important;
}
/* Kill datalist / history popup background styling wherever possible */
.answer-compose-input::-webkit-contacts-auto-fill-button,
.fs-chatbar-input::-webkit-contacts-auto-fill-button,
.answer-compose-input::-webkit-credentials-auto-fill-button,
.fs-chatbar-input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0; width: 0; margin: 0;
}

/* ── Fullscreen backdrop — hide the regular panel underneath ──────
   When the shared-screen video isn't active (or session just opened),
   the .fullscreen-overlay would otherwise be fully transparent and the
   regular #screen-live DOM bleeds through. Give it a luminance-matched
   solid backdrop; the .fs-bg-video (z-index:0) still sits above this
   when it's active, so nothing visual changes when a screen is shared. */
.fullscreen-overlay {
  background-color: rgba(15, 15, 20, 0.97) !important;
}
.fullscreen-overlay.fs-light-bg {
  background-color: rgba(245, 245, 248, 0.97) !important;
}
/* When the shared-screen video is active it sits on z-index:0 over this
   solid backdrop, so the backdrop only shows where the video has no
   pixels (letterboxing etc.) — that's desired. */

/* Hide sibling panels inside .live-main when fullscreen is open so they
   don't ghost through the overlay. IMPORTANT: .fullscreen-overlay is
   itself a child of .live-main — hiding .live-main would hide the
   overlay too. Target only its siblings. */
body.wispherflow-fs-open #screen-live > .live-layout > .live-topbar,
body.wispherflow-fs-open #screen-live .live-main > .live-col-left-wrap,
body.wispherflow-fs-open #screen-live .live-main > .live-panel,
body.wispherflow-fs-open #screen-live .live-main > .live-unified-feed {
  visibility: hidden !important;
}
/* Safety net — explicitly keep the overlay itself visible */
body.wispherflow-fs-open #fullscreen-overlay,
body.wispherflow-fs-open #fullscreen-overlay * {
  visibility: visible !important;
}

/* ══════════════════════════════════════════════════════════════════
   FULLSCREEN — editorial overlay (Arc Max / Teams captions pattern)
   Dual-layer scrim + vignette + text-shadow keeps the AI answers
   readable on ANY shared screen without brittle luminance probing.
   ══════════════════════════════════════════════════════════════════ */
.fullscreen-overlay {
  background-color: #0b0b10 !important;
  color-scheme: dark;
}
/* Layer 1 — even dim pass (dims video uniformly) */
.fullscreen-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 12, 0.62);
  z-index: 1;
  pointer-events: none;
}
/* Layer 2 — radial vignette (edges darken, center still readable) */
.fullscreen-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.32) 100%);
  z-index: 1;
  pointer-events: none;
}
/* Ensure content sits above both scrim layers.
   IMPORTANT: .fs-topbar gets a HIGHER z-index than .fs-main so the ⋮
   overflow menu (absolutely positioned inside the topbar with
   top: calc(100% + 8px)) pops out DOWN INTO the .fs-main region and
   still renders on top. If both were z:2, .fs-main (later in DOM) would
   paint over the dropdown and swallow clicks on the slider / A-/A+ /
   auto-answer toggle. */
.fullscreen-overlay > *:not(.fs-bg-video) {
  position: relative;
  z-index: 2;
}
.fullscreen-overlay .fs-main {
  position: relative;
  z-index: 2;
}
.fullscreen-overlay .fs-topbar {
  position: relative;
  z-index: 3;
}

/* ── Typography: editorial, crisp, vision-safe ───────────────────── */
.fullscreen-overlay .ans-body,
.fullscreen-overlay .ans-question-label,
.fullscreen-overlay .fs-panel-head h3,
.fullscreen-overlay .fs-panel-head h3 svg,
.fullscreen-overlay .ticker-text,
.fullscreen-overlay .fs-chatbar-input,
.fullscreen-overlay .empty-state,
.fullscreen-overlay .empty-state * {
  color: rgba(255, 255, 255, 0.96) !important;
}
/* Crisp type against any backdrop */
.fullscreen-overlay .answer-item .ans-question-label,
.fullscreen-overlay .answer-item .ans-body {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Fullscreen Q/A column — align left edge with the "L" in the
   "Listening…" transcript text of the ticker above. Ticker layout
   from the fs-panel-body content edge:
     ticker-strip margin 10 + row padding 12 + icon 18 + gap 10 +
     hist-nav (prev 22 + 2*gap 4 + counter ~60 + next 22) + gap 10
     ≈ 168 px. Bumped slightly so the Q/A column visually lines up
     with the "L" glyph across font-rendering variance. */
.fullscreen-overlay .answer-item {
  max-width: 78ch;
  margin-left: 180px !important;
  margin-right: auto !important;
}
/* Lock the hist-counter width so "Q N of M" doesn't shove the
   "Listening…" text (and therefore the visual Q/A column) rightward
   when the user navigates history. */
.fullscreen-overlay .ticker-strip .hist-counter {
  min-width: 60px;
  justify-content: center;
}
.fullscreen-overlay .answer-item .ans-body {
  /* NO !important on font-size — lets .fs-main.text-size-N .ans-body rules win */
  font-size: 15.5px;
  line-height: 1.72;
  letter-spacing: -0.003em;
  font-weight: 400 !important;
}
.fullscreen-overlay .answer-item .ans-question-label {
  font-size: 15.5px;
  font-weight: 500 !important;
  line-height: 1.55;
  margin-bottom: 14px !important;
}
/* Q / A micro-label — small-caps terra accent */
.fullscreen-overlay .ans-question-label::before,
.fullscreen-overlay .ans-body::before {
  color: #f2a987 !important;
  border-right-color: rgba(255, 255, 255, 0.22) !important;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.16em;
}
/* Dashed separator between successive Q/A pairs — subtle white */
.fullscreen-overlay .answer-item + .answer-item {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}

/* Neutralize the old fs-light-bg auto-invert — always white in FS */
.fullscreen-overlay.fs-light-bg .answer-item .ans-question-label,
.fullscreen-overlay.fs-light-bg .answer-item .ans-body {
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
.fullscreen-overlay.fs-light-bg .answer-item .ans-question-label::before,
.fullscreen-overlay.fs-light-bg .answer-item .ans-body::before {
  color: #f2a987 !important;
  border-right-color: rgba(255, 255, 255, 0.22) !important;
}

/* ── FINAL: fullscreen Q/A always pure white, highest specificity ──
   Wins over any scoped regular rule because this combines html+body
   with ID + 3-class chain. Placed last in the file to also win on
   later-rule tiebreakers. */
html body #fullscreen-overlay .fs-answers-panel .answer-item .ans-question-label,
html body #fullscreen-overlay .fs-answers-panel .answer-item .ans-body,
html body #fullscreen-overlay .fs-answers-panel .answer-item .ans-q,
html body #fullscreen-overlay .fs-answers-panel .answer-item .ans-q-text,
html body #fullscreen-overlay .fs-answers-panel .answer-item .ans-q-collapsed {
  color: #ffffff !important;
}
html body #fullscreen-overlay .fs-answers-panel .answer-item .ans-question-label::before,
html body #fullscreen-overlay .fs-answers-panel .answer-item .ans-body::before {
  color: #f2a987 !important;
}

/* Fullscreen ⋮ menu — force above every scrim/vignette layer, and force
   interactive so scrim pseudos can't intercept clicks. */
.fullscreen-overlay #fs-more-wrap,
.fullscreen-overlay #fs-more-menu,
.fullscreen-overlay #fs-more-menu * {
  pointer-events: auto !important;
  position: relative;
}
.fullscreen-overlay #fs-more-menu {
  position: absolute !important;
  z-index: 9999 !important;
}
/* Belt + suspenders: scrim pseudos never intercept clicks */
.fullscreen-overlay::before,
.fullscreen-overlay::after {
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   ENTERPRISE REGULAR-VIEW LIVE SESSION — force light panel even when
   <html data-theme="dark"> is set on the enterprise app. Scoped tight
   to #screen-live .answers-panel so enterprise's dark theme stays
   intact elsewhere and the fullscreen overlay's dark scrim is
   untouched (it uses .fs-answers-panel, not .answers-panel).
   ══════════════════════════════════════════════════════════════════ */
html[data-theme='dark'] body:not(.is-electron) #screen-live .answers-panel .panel-body,
html[data-theme='dark'] body:not(.is-electron) #screen-live .answers-panel .panel-head {
  background: #ffffff !important;
  color: #0f0f0e !important;
}
html[data-theme='dark'] body:not(.is-electron) #screen-live .answers-panel .answer-item .ans-question-label,
html[data-theme='dark'] body:not(.is-electron) #screen-live .answers-panel .answer-item .ans-body,
html[data-theme='dark'] body:not(.is-electron) #screen-live .answers-panel .answer-item .ans-q,
html[data-theme='dark'] body:not(.is-electron) #screen-live .answers-panel .answer-item .ans-q-text,
html[data-theme='dark'] body:not(.is-electron) #screen-live .answers-panel .answer-item .ans-q-collapsed {
  color: #111 !important;
  text-shadow: none !important;
}
/* Keep the Q:/A: terra accent readable on white */
html[data-theme='dark'] body:not(.is-electron) #screen-live .answers-panel .answer-item .ans-question-label::before,
html[data-theme='dark'] body:not(.is-electron) #screen-live .answers-panel .answer-item .ans-body::before {
  color: var(--terra-600, #c46a4c) !important;
}

/* Topbar icons + labels — force dark on white (was white-on-white on enterprise) */
html[data-theme='dark'] body:not(.is-electron) #screen-live .topbar-btn,
html[data-theme='dark'] body:not(.is-electron) #screen-live .topbar-size-btn,
html[data-theme='dark'] body:not(.is-electron) #screen-live .topbar-reset-btn {
  color: #0f0f0e !important;
}

/* Labeled topbar pills (Screenshot / Switch screen) — light translucent on white */
html[data-theme='dark'] body:not(.is-electron) #screen-live .live-topbar .topbar-btn.capture-btn-labeled,
html[data-theme='dark'] body:not(.is-electron) #screen-live .live-topbar .topbar-btn.switch-btn-labeled {
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  color: #0f0f0e !important;
}
html[data-theme='dark'] body:not(.is-electron) #screen-live .live-topbar .topbar-btn.capture-btn-labeled:hover,
html[data-theme='dark'] body:not(.is-electron) #screen-live .live-topbar .topbar-btn.switch-btn-labeled:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #0f0f0e !important;
}

/* Non-answers panels (shared-preview, transcript, quick-ref) — white bg, dark text */
html[data-theme='dark'] body:not(.is-electron) #screen-live .shared-preview-panel,
html[data-theme='dark'] body:not(.is-electron) #screen-live .transcript-panel,
html[data-theme='dark'] body:not(.is-electron) #screen-live .live-panel:not(.fs-answers-panel) .panel-head,
html[data-theme='dark'] body:not(.is-electron) #screen-live .live-panel:not(.fs-answers-panel) .panel-body {
  background: #ffffff !important;
  color: #0f0f0e !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-theme='dark'] body:not(.is-electron) #screen-live .live-panel:not(.fs-answers-panel) .panel-head h3 {
  color: #27272a !important;
}

/* Column divider hairlines — dark on white */
html[data-theme='dark'] body:not(.is-electron) #screen-live .live-col-divider::after,
html[data-theme='dark'] body:not(.is-electron) #screen-live .live-col-divider::before {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Chatbar (answer-compose) — white input, dark text */
html[data-theme='dark'] body:not(.is-electron) #screen-live .answer-compose {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}
html[data-theme='dark'] body:not(.is-electron) #screen-live .answer-compose:focus-within {
  border-color: rgba(0, 0, 0, 0.25) !important;
}
html[data-theme='dark'] body:not(.is-electron) #screen-live .answer-compose-input {
  color: #0f0f0e !important;
}
html[data-theme='dark'] body:not(.is-electron) #screen-live .answer-compose-input::placeholder {
  color: rgba(0, 0, 0, 0.45) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FULLSCREEN — Light-bg topbar explicit override (2026-05-09)
   The variable-based system works but the topbar background has no
   !important. On very bright shared screens the faint white glass bar
   can blend into the screen behind it. Force a more opaque, clearly
   separate surface + heavier buttons when fs-light-bg is active.
   ══════════════════════════════════════════════════════════════════════════ */
.fullscreen-overlay.fs-light-bg .fs-topbar {
  background: rgba(248, 248, 252, 0.97) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.13) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09) !important;
}
/* Bump button contrast — heavier white pill + stronger dark icon */
.fullscreen-overlay.fs-light-bg .fs-topbar .topbar-btn,
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-tb-btn,
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-overlay-close,
.fullscreen-overlay.fs-light-bg .fs-topbar .model-switcher-btn {
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid rgba(0, 0, 0, 0.13) !important;
  color: rgba(0, 0, 0, 0.82) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07) !important;
}
.fullscreen-overlay.fs-light-bg .fs-topbar .topbar-btn:hover,
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-tb-btn:hover,
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-overlay-close:hover,
.fullscreen-overlay.fs-light-bg .fs-topbar .model-switcher-btn:hover {
  background: rgba(255, 255, 255, 0.97) !important;
  color: #000 !important;
}
/* Active buttons (mic on, sys-audio on) — keep red dot but lighten base */
.fullscreen-overlay.fs-light-bg .fs-topbar .fs-tb-btn.active {
  background: rgba(255, 255, 255, 0.80) !important;
}
/* fs-chatbar light-bg — explicit surface so it reads on bright screens */
.fullscreen-overlay.fs-light-bg .fs-chatbar {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   FULLSCREEN — Gemini-style animated gradient border (2026-05-09)
   Collapsed listening pill + chatbar get a rotating conic-gradient ring.
   Uses @property to animate the conic-gradient start-angle (Chrome 85+).
   Animation pauses when chatbar is focused (user typing) and resumes
   after blur (send clears + blurs the input via session.js).
   Both disabled on .fs-light-bg (element surfaces turn white there).
   ══════════════════════════════════════════════════════════════════════════ */

@property --fs-gem-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes fs-gem-spin {
  to { --fs-gem-angle: 360deg; }
}

/* Collapsed listening pill */
.fullscreen-overlay .fs-ticker-strip.collapsed {
  isolation: isolate;
}
.fullscreen-overlay .fs-ticker-strip.collapsed::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  padding: 2px;
  background: conic-gradient(
    from var(--fs-gem-angle),
    rgba(217, 119,  87, 0.85)  0%,
    rgba( 74, 158, 255, 0.85) 28%,
    rgba(162,  89, 247, 0.85) 55%,
    rgba(  0, 212, 170, 0.85) 80%,
    rgba(217, 119,  87, 0.85) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: fs-gem-spin 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.fullscreen-overlay.fs-light-bg .fs-ticker-strip.collapsed::after {
  display: none !important;
}

/* Chatbar */
.fullscreen-overlay .fs-chatbar {
  isolation: isolate;
}
.fullscreen-overlay .fs-chatbar::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 28px;
  padding: 2px;
  background: conic-gradient(
    from var(--fs-gem-angle),
    rgba(217, 119,  87, 0.85)  0%,
    rgba( 74, 158, 255, 0.85) 28%,
    rgba(162,  89, 247, 0.85) 55%,
    rgba(  0, 212, 170, 0.85) 80%,
    rgba(217, 119,  87, 0.85) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: fs-gem-spin 5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
/* Pause while user is typing */
.fullscreen-overlay .fs-chatbar:focus-within::after {
  animation-play-state: paused;
}
.fullscreen-overlay.fs-light-bg .fs-chatbar::after {
  display: none !important;
}