/**
 * ControlsPanel — slim docked toolbar under MOVES rail.
 * Single row: Resign · Eval · Hits · New  (chess.com density).
 */

/* ── Hidden modes ── */
.controls-panel-module.is-mode-hidden,
#controls-panel-module.is-mode-hidden,
#controls-panel-module[data-controls-mode='hidden'],
#controls-panel-module[hidden],
.match-actions.is-mode-hidden,
.match-actions[data-controls-mode='hidden'],
.match-actions[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

body.chess-page.is-drill-minigame #controls-panel-module,
body.chess-page.is-puzzle-mode #controls-panel-module,
body.chess-page.is-opening-mode #controls-panel-module,
body.chess-page.is-puzzle-ladder #controls-panel-module,
body.chess-page.is-opening-ladder #controls-panel-module,
body.chess-page.is-vision-mode #controls-panel-module,
body.chess-page.controls-panel-hidden #controls-panel-module,
body.m-body-chess.is-drill-minigame #controls-panel-module,
body.m-body-chess.is-puzzle-mode #controls-panel-module,
body.m-body-chess.is-opening-mode #controls-panel-module {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ── Docked footer shell (minimal chrome) ── */
body.chess-page #controls-panel-module.controls-panel-module--docked,
body.chess-page #match-history-module #controls-panel-module,
body.chess-page .match-history-module .match-actions,
body.chess-page #match-history-module .match-actions {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;

  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 4px 0 0 !important;
  padding: 5px 0 0 !important;
  box-sizing: border-box !important;

  border: none !important;
  border-top: 1px solid rgba(0, 255, 136, 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  font-family: "Courier New", monospace;
  font-size: 0.58rem;
  color: #9fdfb0;
  line-height: 1.1;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  transform: none !important;
  animation: none !important;
  pointer-events: auto !important;
  user-select: none;
  contain: none !important;
}

body.chess-page aside.chess-controls-rail:not(.match-actions) {
  display: none !important;
}

/* Connection / link quality is in PAGE FOOTER only — never in this rail */
body.chess-page #controls-panel-module #chess-net-status,
body.chess-page #controls-panel-module .match-actions__status,
body.chess-page #controls-panel-module .match-net-status,
body.chess-page .match-actions #chess-net-status {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ── Single slim toolbar row ── */
body.chess-page .match-actions__bar,
body.chess-page #controls-panel-module .match-actions__bar,
body.chess-page #controls-panel-module .match-actions__row {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 0;
  position: relative !important;
  z-index: 2 !important;
  flex: 0 0 auto !important;
  order: 1 !important;
}

body.chess-page .match-actions__block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

body.chess-page #controls-panel-module .match-actions__clock,
body.chess-page #controls-panel-module .chess-encounter-clock {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.55rem !important;
  opacity: 0.8;
  margin: 0 !important;
  line-height: 1.15;
  color: #a8d8b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Sleek thin buttons ── */
body.chess-page #controls-panel-module .match-action-btn,
body.chess-page #controls-panel-module .btn-zoom,
body.chess-page #controls-panel-module button {
  font: inherit !important;
  font-size: 0.58rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.18rem 0.28rem !important;
  border: 1px solid rgba(0, 255, 136, 0.22) !important;
  border-radius: 3px !important;
  background: rgba(0, 255, 136, 0.05) !important;
  color: #b0e0c0 !important;
  cursor: pointer;
  flex: 1 1 0;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 1.55rem !important;
  max-height: 1.55rem !important;
  line-height: 1 !important;
  max-width: none !important;
  white-space: nowrap !important;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
  box-shadow: none !important;
}

body.chess-page #controls-panel-module button:hover {
  background: rgba(0, 255, 136, 0.14) !important;
  border-color: rgba(0, 255, 136, 0.4) !important;
  color: #fff !important;
}

body.chess-page #controls-panel-module button:active {
  background: rgba(0, 255, 136, 0.2) !important;
}

body.chess-page #controls-panel-module .is-resign-btn,
body.chess-page #controls-panel-module .is-flee-btn {
  border-color: rgba(255, 100, 100, 0.32) !important;
  color: #f0a8a8 !important;
  background: rgba(60, 12, 12, 0.28) !important;
  flex: 0 1 auto;
  min-width: 3.2rem !important;
  max-width: 4.5rem;
}
body.chess-page #controls-panel-module .is-resign-btn:hover,
body.chess-page #controls-panel-module .is-flee-btn:hover {
  background: rgba(100, 20, 20, 0.42) !important;
  border-color: rgba(255, 120, 120, 0.5) !important;
  color: #ffe0e0 !important;
}

body.chess-page #controls-panel-module .is-primary-ctrl,
body.chess-page #controls-panel-module .match-action-btn--primary {
  border-color: rgba(0, 255, 136, 0.38) !important;
  color: #3dffa0 !important;
  background: rgba(0, 255, 136, 0.08) !important;
  font-weight: 700;
  flex: 0 1 auto;
  min-width: 2.6rem !important;
  max-width: 3.6rem;
}

body.chess-page #controls-panel-module #chess-eval-toggle.is-on,
body.chess-page #controls-panel-module #chess-coach-toggle.is-on {
  border-color: rgba(0, 255, 136, 0.42) !important;
  color: #3dffa0 !important;
  background: rgba(0, 255, 136, 0.1) !important;
}

body.chess-page #controls-panel-module .chess-zone-feed {
  max-height: 3.2rem;
  overflow-y: auto;
  font-size: 0.55rem;
  opacity: 0.8;
}
body.chess-page #controls-panel-module .chess-zone-feed-list {
  margin: 0;
  padding-left: 0.9rem;
}

/* Pin footer under log */
body.chess-page .match-rail-body > .match-actions,
body.chess-page .match-rail-body > #controls-panel-module {
  margin-top: auto !important;
  flex: 0 0 auto !important;
}

body.chess-page .match-history-block {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Mobile: still compact, slightly taller tap target */
body.m-body-chess #controls-panel-module.controls-panel-module--docked,
body.m-body-battle #controls-panel-module.controls-panel-module--docked {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  margin-top: 4px !important;
  padding-top: 4px !important;
  gap: 2px !important;
}

body.m-body-chess #controls-panel-module button,
body.m-body-battle #controls-panel-module button {
  height: 1.85rem !important;
  max-height: 1.85rem !important;
  font-size: 0.62rem !important;
  padding: 0.22rem 0.3rem !important;
}