/* Base & Layout */
body, button, td, th, .overlay {
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: #2e2e2e;
  color: #eee;
  transition: background 0.3s ease, color 0.3s ease;
  overflow-x: hidden;
}
body.light-theme {
  background: #fff;
  color: #222;
}
body.light-theme #controls {
  background: #f0f0f0;
}
body.light-theme #moves {
  background: #e0e0e0;
  color: #222;
}
body.light-theme #credits {
  color: #888;
}

/* Titles */
#pageTitle {
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4px;
}
#pageTitle a {
  color: #90caf9;
}
body.light-theme #pageTitle a {
  color: #1565c0;
}

#pageSubtitle {
  font-size: 1em;
  color: #ccc;
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.4;
  transition: color 0.3s ease;
}
body.light-theme #pageSubtitle {
  color: #444;
}

/* Board & Facts Link */
#board-container {
  text-align: center;
}
#board {
  width: 480px;
  height: 480px;
  position: relative;
  touch-action: none;
}

#facts-link a {
  font-size: 0.9em;
  text-decoration: none;
  color: var(--facts-link-color, #90caf9);
}
body.light-theme #facts-link a {
  color: var(--facts-link-color-light, #1565c0);
}

/* Overlays */
.overlay {
  position: absolute;
  top: 2px;
  left: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 22px;
  max-width: calc(100% - 4px);
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1.05;
  pointer-events: auto;
  font-size: var(--overlay-font);
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 999px;
  color: #fff;
  transition: opacity 0.3s ease;
  z-index: 500;
}
.overlay.best {
  left: auto;
  right: 2px;
  background: rgba(0,123,255,0.8);
  z-index: 510; /* This line ensures blue badges appear on top */
}
.overlay.positive {
  background: rgba(40,167,69,0.8);
}
.overlay.negative {
  background: rgba(200,20,20,0.8);
}
.overlay.zero {
  background: rgba(128,128,128,0.8);
}

.highlightSquare {
  box-shadow: inset 0 0 0 4px rgba(255,235,59,0.7);
  transition: box-shadow 0.3s ease;
}
.square-55d63 {
  transition: transform 0.2s ease;
}

#board img {
  width: calc(100% * var(--piece-scale)) !important;
  height: auto                  !important;
}


/* Controls */
#controls {
  display: flex;
  flex-direction: column;
  margin-left: 32px;  /* increased gutter */
  width: 300px;
  transition: background 0.3s ease;
}
.btn {
  margin: 2px;
  padding: 8px 12px;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: filter 0.2s ease, transform 0.1s ease;
}
.btn:hover {
  filter: brightness(1.2);
}
.btn:active {
  transform: scale(0.97);
  filter: brightness(0.9);
}
#prev, #next {
  font-size: 24px;     /* Larger text */
  padding: 8px 12px;   /* Keep padding same as other buttons */
  line-height: 1;      /* Keeps vertical alignment nice */
}
/*#prev, #next, #first, #last {*/
/*  font-size: 24px;     /* Larger text */
/*  padding: 8px 12px;   /* Keep padding same as other buttons */
/*  line-height: 1;      /* Keeps vertical alignment nice */
/*}*/
.btn-group {
  display: flex;
  gap: 4px;
}
.btn-group .btn {
  flex: 1;
}
.top-buttons {
  margin-top: 10px;
}
.bottom-controls {
  display: flex;
  gap: 4px;
  margin-top: 1em;
}
.bottom-controls .btn {
  flex: 1;
}
.btn-fen {
  background: #4caf50;
}
.btn-pgn {
  background: #2196f3;
}
.btn-nav {
  background: #555;
}
body.light-theme .btn-nav {
  background: #888;
}
#btnEval {
  display: none;
  margin: 4px 0;
  background: #6f42c1;
  width: 100%;
}

/* Panels */
#settingsPanel,
#popularGamesPanel {
  display: none;
  background: #444;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  margin-top: 8px;
}
#settingsPanel.open,
#popularGamesPanel.open {
  display: block;
}

/* Move history */
#moves {
  overflow: auto;
  background: #333;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
  font-size: var(--moves-font);
  transition: background 0.3s ease, color 0.3s ease;
  scroll-behavior: smooth;
}
body.light-theme #moves {
  background: #eee;
  color: #222;
}
#moves table {
  width: 100%;
  border-collapse: collapse;
}
#moves td {
  padding: 8px;
  font-size: var(--moves-font);
  line-height: 1.6;
}
#moves tr.selected {
  background: #555;
}
#moves td.current {
  font-weight: bold;
  color: #ffeb3b;
}

/* Mark the divergence point in orange (all viewports) */
#moves td.diverged {
  background-color: #ff5722 !important;
  color: #fff              !important;
}

/* Game title above history */
.game-title {
  font-size: 1rem;
  color: #ccc;
  text-align: center;
  margin: 8px 0;
  transition: color 0.3s ease;
}
body.light-theme .game-title {
  color: #666;
}

/* Credits & spacer */
.spacer {
  height: 1em;
}
#credits {
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
  transition: color 0.3s ease;
}

/* Settings panel one‑per‑line */
#settingsPanel label {
  display: block;
  margin-top: 8px;
}
#settingsPanel select {
  width: 100%;
  margin: 4px 0 12px;
  display: block;
}


/* Responsive & layout rules v1.44 */
body {
  display: flex;
  flex-direction: column;
}
#main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  scroll-margin-top: 10px;
}

@media (max-width: 600px) {
  body {
    flex-direction: column;
    height: auto;
    padding: 10px;
    align-items: center;
    justify-content: flex-start;
  }
  #main {
    flex-direction: column;
    align-items: center;
  }
  .word-your {
    display: none;
  }
  .mobile-only {
    display: inline;
  }

  /* mobile board sizing */
  #board {
    width: 90vw !important;
    height: 90vw !important;
    margin: 0 auto;
  }

  #controls {
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 10px;
  }

}

.mobile-only {
  display: none;
}

/* Fix overlay clipping on Safari + always center pieces */
[class^="square-"] {
  overflow: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}


/* Next‑move dot: lighter gray with black border */
.next-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #888;  /* lighter gray */
  border: 2px solid #000;  /* black edge */
  box-sizing: border-box;
  border-radius: 50%;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  pointer-events: none;
  z-index: 600;
}

/* Next‑move dot: yellow with black border, positioned bottom‑left */
.next-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #ffeb3b;    /* yellow */
  border: 2px solid #8B0000;  /* dark gray: #333 or #444 or #555, dark red: #8B0000 */
  box-sizing: border-box;
  border-radius: 50%;

  bottom: 4px;
  left: 4px;
  top: auto;
  right: auto;

  pointer-events: none;
  z-index: 600;
}

/* light-green variant for book moves */
.book-dot {
  background: #a5e79f;  /* light green */
  border: 2px solid #2e7d32;
}


/* New: spacing & sizing for the Games dropdowns */
#popularGamesPanel label {
  margin-top: 8px;
}

#popularGamesPanel select {
  width: 100%;
  margin: 4px 0 12px;
}

/* make games dropdowns more legible on small screens */
@media (max-width: 600px) {

  #popularGamesPanel label {
    font-size: 1.25rem;
  }
  
  #popularGamesPanel select {
    font-size: 1rem;
    font-weight: bold;
    padding: 8px 12px;
    color: #222;
  }
  
  #settingsPanel select {
  font-size: 1rem;
  font-weight: bold;
  padding: 8px 12px;
  color: #222;
 }
 
	 /* override the chessboard-1.0.0 default sizing & positioning */
	#board .piece {
	  position: absolute !important;
	  top: 50%           !important;
	  left: 50%          !important;
	  transform: translate(-50%, -50%) scale(var(--piece-scale)) !important;
	  transform-origin: center center !important;
	}

	/* ===== Center & scale pieces based on --piece-scale ===== */
	#board .piece {
	  position: absolute !important;
	  top: 50%           !important;
	  left: 50%          !important;
	  transform: translate(-50%, -50%) scale(var(--piece-scale)) !important;
	  transform-origin: center center !important;
	  /* Ensure the image’s own sizing doesn’t override our scale: */
	  width: auto       !important;
	  height: auto      !important;
	  max-width: none   !important;
	}
	
	/* ensure piece images never distort and always fit their square */
	.square-55d63 img,
	#board img.piece {
	  width: auto !important;
	  height: auto !important;
	  max-width: 100% !important;
	  max-height: 100% !important;
	  object-fit: contain;
	  object-position: center;
	}

}
/* ══════════════════════════════════════════════════════════════════
   MDL+DCC EVAL LAYER — v0.5.0 Styles
   ══════════════════════════════════════════════════════════════════ */

/* ── DCC Trend Arrows ─────────────────────────────────────────── */
.dcc-arrow {
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.dcc-trend-rising  { color: #4cff4c; }
.dcc-trend-falling { color: #ff4c4c; }
.dcc-trend-stable  { color: #ccc; }

/* ── DCC Loading indicator ────────────────────────────────────── */
.dcc-loading {
  font-size: 0.7em;
  color: #aaa;
  animation: dccPulse 1s infinite;
  margin-left: 2px;
  line-height: 1;
}
@keyframes dccPulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* ── DCC Stability Borders ────────────────────────────────────── */
.overlay.dcc-stable {
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.85),
              0 0 6px rgba(52, 211, 153, 0.3);
}
.overlay.dcc-unstable {
  box-shadow: 0 0 0 2px rgba(255, 76, 76, 0.85),
              0 0 6px rgba(255, 76, 76, 0.3);
}

/* ── MDL Tiebreaker Star ──────────────────────────────────────── */
.dcc-mdl-pick {
  position: relative;
}
.dcc-mdl-star {
  color: #f59e0b;
  font-size: 0.9em;
  line-height: 1;
  text-shadow: 0 0 4px rgba(245, 158, 11, 0.6);
}

/* ── DCC Info Panel ───────────────────────────────────────────── */
#dccInfoPanel {
  display: none;
  background: rgba(20, 20, 25, 0.95);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 4px;
  padding: 8px 12px;
  margin: 6px 0;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #ddd;
  line-height: 1.6;
}
body.light-theme #dccInfoPanel {
  background: rgba(240, 240, 245, 0.95);
  border-color: rgba(0, 100, 200, 0.2);
  color: #333;
}
.dcc-info-path {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
  white-space: nowrap;
  overflow-x: auto;
  padding: 4px 0;
}
.dcc-path-move {
  color: #90caf9;
  font-weight: 600;
  margin: 0 2px;
}
body.light-theme .dcc-path-move { color: #1565c0; }

.dcc-path-eval {
  color: #aaa;
  margin: 0 1px;
  font-size: 11px;
}
body.light-theme .dcc-path-eval { color: #666; }

.dcc-path-arrow {
  color: #555;
  margin: 0 3px;
}
.dcc-info-summary {
  font-size: 12px;
  color: #999;
  margin-top: 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 4px;
}
body.light-theme .dcc-info-summary {
  color: #777;
  border-top-color: rgba(0,0,0,0.08);
}

/* ── DCC Accuracy Panel ───────────────────────────────────────── */
#dccAccuracyPanel {
  display: none;
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 4px;
  padding: 6px 10px;
  margin: 6px 0;
  font-size: 12px;
  color: #bbb;
  text-align: center;
}
body.light-theme #dccAccuracyPanel {
  background: rgba(255, 248, 230, 0.9);
  border-color: rgba(200, 140, 0, 0.2);
  color: #555;
}
.acc-label { color: #999; }
.acc-val { color: #eee; font-weight: 600; font-family: monospace; }
body.light-theme .acc-val { color: #222; }
.acc-better { color: #4cff4c !important; }
body.light-theme .acc-better { color: #16a34a !important; }
.acc-count { color: #666; font-size: 11px; margin-left: 4px; }

/* ── DCC Settings Section ─────────────────────────────────────── */
.dcc-settings-group {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 12px;
  padding-top: 8px;
}
.dcc-settings-group .dcc-settings-title {
  font-weight: 700;
  font-size: 13px;
  color: #00e5ff;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
body.light-theme .dcc-settings-group .dcc-settings-title {
  color: #0277bd;
}
body.light-theme .dcc-settings-group {
  border-top-color: rgba(0,0,0,0.1);
}

/* ── DCC Thresholds toggle ────────────────────────────────────── */
#toggleThresholds { cursor: pointer; }
.hidden { display: none; }

/* ── Preview square highlight ─────────────────────────────────── */
.preview-square {
  box-shadow: inset 0 0 0 3px rgba(144, 202, 249, 0.5) !important;
}

/* ── Disabled setting ─────────────────────────────────────────── */
.disabled-setting {
  opacity: 0.5;
  pointer-events: none;
}

/* ── Double-size board ────────────────────────────────────────── */
#board.scaled {
  width: 720px !important;
  height: 720px !important;
}

/* ── Opening name ─────────────────────────────────────────────── */
#openingName {
  text-align: center;
  font-size: 0.85em;
  color: #999;
  margin-bottom: 4px;
  min-height: 1.2em;
}
body.light-theme #openingName { color: #777; }

/* ── 8Z branding subtle ──────────────────────────────────────── */
.dcc-badge-label {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 10px;
  color: rgba(0, 229, 255, 0.4);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.1em;
}
body.light-theme .dcc-badge-label { color: rgba(0, 120, 200, 0.3); }

/* ── DCC Analysis Panel (toggle view) ─────────────────────────── */
#dccAnalysisPanel {
  overflow: auto;
  background: #2a2a30;
  color: #ddd;
  padding: 8px;
  border-radius: 4px;
  font-size: 13px;
  height: 140px;
  scroll-behavior: smooth;
}
body.light-theme #dccAnalysisPanel {
  background: #e8eaef;
  color: #333;
}
.dcc-analysis-empty {
  color: #888;
  text-align: center;
  padding: 20px 0;
  font-style: italic;
}
.dcc-analysis-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 12px;
}
.dcc-analysis-header th {
  text-align: left;
  color: #888;
  font-weight: 400;
  font-size: 10px;
  padding: 2px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.light-theme .dcc-analysis-header th { border-bottom-color: rgba(0,0,0,0.08); }
.dcc-analysis-row td {
  padding: 3px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.dcc-analysis-row:hover {
  background: rgba(0,229,255,0.06);
}
body.light-theme .dcc-analysis-row:hover {
  background: rgba(0,100,200,0.06);
}
.dcc-rank { color: #666; width: 20px; }
.dcc-move-name { color: #90caf9; font-weight: 600; }
body.light-theme .dcc-move-name { color: #1565c0; }
.dcc-eval-cell { color: #ccc; }
body.light-theme .dcc-eval-cell { color: #555; }
.dcc-stab-high { color: #34d399; font-weight: 600; }
.dcc-stab-mid  { color: #ccc; }
.dcc-stab-low  { color: #ff4c4c; font-weight: 600; }
.dcc-analysis-pv {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 11px;
  color: #888;
}
body.light-theme .dcc-analysis-pv { border-top-color: rgba(0,0,0,0.08); color: #777; }

/* ── DCC Only mode badge label ────────────────────────────────── */
.dcc-only-label {
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
}

/* ── View toggle button active state ──────────────────────────── */
#btnViewToggle {
  transition: background 0.2s, color 0.2s;
}

/* ── ADSR shape label on badges ───────────────────────────────── */
.dcc-adsr-label {
  font-size: 0.8em;
  margin-left: 1px;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
}
.dcc-adsr-info {
  font-size: 0.95em;
}

/* ── Simulation Stats Panel ───────────────────────────────────── */
#simStatsPanel {
  background: rgba(20, 25, 20, 0.95);
  border: 1px solid rgba(52, 211, 153, 0.2);
  border-radius: 4px;
  padding: 12px;
  margin: 6px 0;
  font-family: 'Segoe UI', sans-serif;
}
body.light-theme #simStatsPanel {
  background: rgba(240, 245, 240, 0.95);
  border-color: rgba(20, 140, 80, 0.2);
}
.sim-stats-header {
  text-align: center;
  margin-bottom: 10px;
}
.sim-title {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: #34d399;
}
body.light-theme .sim-title { color: #16a34a; }
.sim-subtitle {
  font-size: 11px;
  color: #888;
}
.sim-stats-grid {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.light-theme .sim-stats-grid { border-bottom-color: rgba(0,0,0,0.08); }
.sim-stat { text-align: center; }
.sim-num {
  font-family: 'Consolas', monospace;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.sim-label {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.sim-games-list {
  max-height: 100px;
  overflow-y: auto;
}
.sim-game-row {
  display: flex;
  justify-content: space-between;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* ── Sim Status Bar ───────────────────────────────────────────── */
#simStatusBar {
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.15);
  border-radius: 3px;
  padding: 4px 8px;
  margin: 4px 0;
  font-family: 'Consolas', monospace;
  font-size: 11px;
  color: #34d399;
  text-align: center;
}
body.light-theme #simStatusBar {
  background: rgba(20, 140, 80, 0.08);
  border-color: rgba(20, 140, 80, 0.15);
  color: #16a34a;
}

/* ── DCCT per-color breakdown ─────────────────────────────────── */
.sim-color-breakdown {
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  color: #bbb;
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
}
body.light-theme .sim-color-breakdown {
  border-bottom-color: rgba(0,0,0,0.08);
  color: #666;
}

/* ── Play Modal + Coach Panel (v0.7.0 experimental) ───────────────── */
.sim-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 11000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.sim-modal-card {
  width: min(420px, 94vw);
  background: #2a2a2f;
  color: #eee;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
body.light-theme .sim-modal-card {
  background: #f6f7fb;
  color: #222;
  border-color: rgba(0,0,0,0.08);
}
.sim-modal-title {
  font-weight: 700;
  color: #ffd966;
  margin-bottom: 12px;
  font-size: 15px;
}
.sim-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  cursor: pointer;
}
.sim-inline-note {
  color: #999;
  font-size: 12px;
}
.sim-subgrid,
.sim-form-grid {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px 10px;
  align-items: center;
  margin: 10px 0;
}
.sim-modal-card select,
.sim-modal-card input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  background: #333;
  color: #eee;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 7px 9px;
}
body.light-theme .sim-modal-card select,
body.light-theme .sim-modal-card input[type="text"] {
  background: #fff;
  color: #222;
  border-color: #bbb;
}
.sim-fairplay-note {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 217, 102, 0.08);
  border: 1px solid rgba(255, 217, 102, 0.18);
  color: #e6d18a;
  font-size: 12px;
  line-height: 1.45;
}
body.light-theme .sim-fairplay-note {
  background: rgba(255, 217, 102, 0.18);
  color: #6d5600;
}
.sim-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.sim-start-btn,
.sim-cancel-btn,
.coach-mini-btn,
.coach-ask-btn {
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.sim-start-btn {
  flex: 1;
  background: #00e5ff;
  color: #000;
  padding: 9px 12px;
  font-weight: 700;
}
.sim-cancel-btn {
  flex: 1;
  background: #555;
  color: #eee;
  padding: 9px 12px;
}
.coach-panel {
  margin: 8px 0 6px;
  background: rgba(30, 27, 18, 0.95);
  border: 1px solid rgba(255, 217, 102, 0.18);
  border-radius: 8px;
  overflow: hidden;
}
body.light-theme .coach-panel {
  background: rgba(255, 249, 230, 0.95);
  border-color: rgba(180, 140, 20, 0.18);
}
.coach-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.light-theme .coach-panel-header {
  border-bottom-color: rgba(0,0,0,0.08);
}
.coach-title {
  font-weight: 700;
  color: #ffd966;
}
.coach-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
#coachModeSelect {
  background: #333;
  color: #eee;
  border: 1px solid #555;
  border-radius: 5px;
  padding: 4px 6px;
  max-width: 132px;
  font-size: 12px;
}
body.light-theme #coachModeSelect {
  background: #fff;
  color: #222;
  border-color: #bbb;
}
.coach-mini-btn {
  background: #444;
  color: #eee;
  padding: 4px 8px;
  font-size: 12px;
}
.coach-messages {
  max-height: 210px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coach-msg {
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.45;
  font-size: 13px;
}
.coach-msg.system {
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.12);
}
.coach-msg.coach {
  background: rgba(255,255,255,0.04);
}
body.light-theme .coach-msg.coach {
  background: rgba(0,0,0,0.04);
}
.coach-msg.user {
  background: rgba(255, 217, 102, 0.12);
  align-self: flex-end;
}
.coach-msg-meta {
  display: block;
  font-size: 11px;
  color: #999;
  margin-bottom: 3px;
}
.coach-notice {
  margin: 0 10px 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 217, 102, 0.08);
  border: 1px solid rgba(255, 217, 102, 0.14);
  color: #e6d18a;
  font-size: 12px;
}
body.light-theme .coach-notice {
  color: #6d5600;
}
.coach-input-row {
  display: flex;
  gap: 8px;
  padding: 0 10px 10px;
}
#coachAskInput {
  flex: 1;
  min-width: 0;
  background: #333;
  color: #eee;
  border: 1px solid #555;
  border-radius: 6px;
  padding: 8px 10px;
}
body.light-theme #coachAskInput {
  background: #fff;
  color: #222;
  border-color: #bbb;
}
.coach-ask-btn {
  background: #ffd966;
  color: #000;
  padding: 8px 12px;
  font-weight: 700;
}
#btnCoach.coach-active {
  background: #ffd966 !important;
  color: #000 !important;
}
#board-container.live-thinking {
  position: relative;
}
#board-container.live-thinking::after {
  content: '…';
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.72);
  color: #ffd966;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 7px;
  z-index: 900;
  animation: dccPulse 1s infinite;
}
@media (max-width: 600px) {
  .coach-panel-header {
    flex-direction: column;
    align-items: stretch;
  }
  .coach-header-actions {
    width: 100%;
    justify-content: space-between;
  }
  #coachModeSelect {
    max-width: none;
    flex: 1;
  }
}