/* ============================================================
   theme-modes.css
   Per-mode overrides applied via body class.

   Most of what separated the old modes — surfaces, text, borders, radii,
   fonts — is now expressed purely as tokens, written onto :root by
   js/themePreload.js. What remains here is the handful of things a token
   can't say: Mono squares off inherited radii, and Light needs a couple of
   surfaces that would otherwise read as muddy.
   ============================================================ */

/* ── Font + cursor come from the mode's tokens ── */
body {
  font-family: var(--font-body, var(--font-sans));
  cursor: var(--cursor-style, default);
  letter-spacing: var(--text-spacing, 0);
}
h1, h2, h3, .chatHeaderARIA, .bootAriaLogo {
  font-family: var(--font-head, var(--font-sans));
}
pre, code, .userPara, kbd {
  font-family: var(--font-mono, var(--font-mono-stack));
}

/* ════════════════════════════════════════════════════════════
   MONO MODE — square corners throughout
   The radii tokens cover anything that reads var(--radius-*) or var(--r*),
   but plenty of rules still carry a literal px radius.
   ════════════════════════════════════════════════════════════ */
body.mode-mono *,
body.mode-mono *::before,
body.mode-mono *::after {
  border-radius: 0 !important;
}
body.mode-mono .swatchDot,
body.mode-mono .esp32StatusDot,
body.mode-mono .statusDot,
body.mode-mono .colorWheelCanvas,
body.mode-mono .colorWheelMarker,
body.mode-mono .themeSwatchV2 {
  border-radius: 50% !important;
}
body.mode-mono * {
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════
   LIGHT MODE
   A few rules paint translucent white over the surface to lift it. On a
   white page that does nothing, so they get a real tint instead.
   ════════════════════════════════════════════════════════════ */
body.mode-light .msg.user {
  color: #fff;
}
body.mode-light .homeCard,
body.mode-light .emptyChatSuggestion {
  background: var(--bg-card);
  border-color: var(--border);
}
body.mode-light .msg.aria {
  color: var(--text);
}


/* ════════════════════════════════════════════════════════════
   COLOR WHEEL PICKER UI
   ════════════════════════════════════════════════════════════ */
.colorWheelV2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-cut);
  border-radius: var(--radius-md);
}
.colorWheelWrap {
  position: relative;
  width: 240px;
  height: 240px;
  cursor: pointer;
}
.colorWheelCanvas {
  display: block;
  border-radius: 50%;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--bg-inset) 50%, transparent);
}
.colorWheelMarker {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px #000, 0 2px 4px color-mix(in srgb, var(--bg-inset) 50%, transparent);
  transition: left 0.05s, top 0.05s;
}
.colorWheelControls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}
.cwCurrentPreview {
  display: flex;
  gap: 12px;
  align-items: center;
}
.cwSwatch {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-inset) 30%, transparent), 0 0 12px var(--red-core);
}
.cwValues {
  flex: 1;
}
.cwHexInput {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg-abyss);
  border: 1px solid var(--border-cut);
  border-radius: var(--radius-sm);
  color: var(--text-blaze);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
}
.cwHsl {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  font-family: var(--font-mono);
}
.cwSliderRow {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
}
.cwSliderRow input[type="range"] {
  width: 100%;
  accent-color: var(--red-core);
}
.cwSaveBtn {
  padding: 8px;
  background: transparent;
  border: 1px solid var(--red-core);
  border-radius: var(--radius-sm);
  color: var(--red-core);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.02em;
  transition: all 0.15s;
}
.cwSaveBtn:hover {
  background: var(--red-core);
  color: var(--bg-void);
}

/* ════════════════════════════════════════════════════════════
   THEME MODE CARDS (pick mode in settings)
   ════════════════════════════════════════════════════════════ */
.themeModeGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.themeModeCard {
  padding: 12px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border-cut);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.themeModeCard:hover {
  border-color: var(--red-core);
  transform: translateY(-2px);
}
.themeModeCard.active {
  border-color: var(--red-core);
  background: linear-gradient(
    135deg,
    var(--bg-panel) 0%,
    rgba(var(--accent-h, 0), var(--accent-s, 100%), var(--accent-l, 50%), 0.05) 100%
  );
  box-shadow: none;
}
.themeModeCard.active::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--red-core);
  font-size: 14px;
}
.themeModeLabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-blaze);
  margin-bottom: 4px;
}
.themeModeDesc {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════
   ACCENT COLOR SWATCH GRID (V2)
   ════════════════════════════════════════════════════════════ */
.accentColorGrid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin: 8px 0;
}
.themeSwatchV2 {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--swatch-color, #f00);
}
.themeSwatchV2:hover {
  transform: scale(1.1);
}
.themeSwatchV2.active {
  border-color: #fff;
  box-shadow: none;
}
.themeSwatchV2.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  text-shadow: none;
}
.themeSwatchV2 .swatchLabel {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s;
}
.themeSwatchV2:hover .swatchLabel {
  opacity: 1;
}

/* Custom colors row */
.customColorsRow {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.customColorChip {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.customColorChip .delBtn {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  color: #fff;
  border: 1px solid var(--red-core);
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.customColorChip:hover .delBtn {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════
   ESP32 DEVICES TAB (new in settings)
   ════════════════════════════════════════════════════════════ */
.esp32DeviceList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.esp32DeviceCard {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-cut);
  border-radius: var(--radius-sm);
}
.esp32StatusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #444;
  box-shadow: none;
}
.esp32StatusDot.online {
  background: var(--success);
  box-shadow: none;
}
.esp32DeviceMeta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.esp32DeviceName {
  font-size: 13px;
  color: var(--text-blaze);
  font-weight: 600;
}
.esp32SendCmdBtn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--red-core);
  color: var(--red-core);
  border-radius: var(--radius-sm);
  font-size: 10px;
  cursor: pointer;
  font-family: var(--font-body);
}
.esp32SendCmdBtn:hover {
  background: var(--red-core);
  color: var(--bg-void);
}
.esp32AddDeviceHint {
  margin-top: 12px;
  padding: 10px;
  background: var(--bg-abyss);
  border: 1px dashed var(--border-cut);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}
.esp32AddDeviceHint code {
  background: var(--bg-void);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--red-core);
  font-size: 10px;
}

/* ════════════════════════════════════════════════════════════
   UNSTYLED ELEMENT GUARDS — fallback styling so nothing looks raw
   These catch elements that don't have explicit class styling.
   ════════════════════════════════════════════════════════════ */
input[type="text"]:not([class]),
input[type="number"]:not([class]),
input[type="email"]:not([class]),
input[type="password"]:not([class]),
input[type="search"]:not([class]),
textarea:not([class]) {
  background: var(--bg-abyss);
  border: 1px solid var(--border-cut);
  border-radius: var(--radius-sm);
  color: var(--text-blaze);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
input[type="text"]:not([class]):focus,
input[type="number"]:not([class]):focus,
textarea:not([class]):focus {
  border-color: var(--red-core);
}

button:not([class]):not([id]) {
  background: transparent;
  border: 1px solid var(--border-cut);
  border-radius: var(--radius-sm);
  color: var(--text-blaze);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
button:not([class]):not([id]):hover {
  border-color: var(--red-core);
  color: var(--red-core);
}

select:not([class]) {
  background: var(--bg-abyss);
  border: 1px solid var(--border-cut);
  border-radius: var(--radius-sm);
  color: var(--text-blaze);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
}

/* Scrollbars — themeable */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-abyss);
}
::-webkit-scrollbar-thumb {
  background: var(--red-deep);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--red-core);
}

/* ════════════════════════════════════════════════════════════
   NEW SETTINGS: font size, density, animation speed
   ════════════════════════════════════════════════════════════ */
html[data-font-size="small"] { font-size: 13px; }
html[data-font-size="medium"] { font-size: 15px; }
html[data-font-size="large"] { font-size: 17px; }
html[data-font-size="xlarge"] { font-size: 19px; }

body[data-density="compact"] .msg { padding: 6px 10px; margin-block: 4px; }
body[data-density="normal"] .msg { padding: 10px 14px; margin-block: 8px; }
body[data-density="spacious"] .msg { padding: 16px 20px; margin-block: 14px; }

body[data-anim="off"] *,
body[data-anim="off"] *::before,
body[data-anim="off"] *::after {
  animation: none !important;
  transition: none !important;
}
body[data-anim="reduced"] *,
body[data-anim="reduced"] *::before {
  animation-duration: 0.1s !important;
  transition-duration: 0.05s !important;
}