/* Kuro Workspace - Exact Android layout specs */
/* Press Start 2P font for HI-SCORE and DAILY STREAK only */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ========== CSS VARIABLES ========== */
:root {
  /* These four are overwritten at runtime by applyTheme() in workspace.js. The
     values here are FALLBACKS for the first paint, before the theme is applied.
     They used to be written as `--accent: var(--accent)`, which is a self-reference
     — a CSS cycle that computes to invalid, so there was no fallback at all. */
  /* Text-size multiplier. Every font-size is calc(Npx * this), so one
     value scales the whole UI. Set at runtime from the Text size setting. */
  --font-scale: 1;
  --panel-bg: rgba(0, 0, 0, 0.72);
  --accent: #8de68d;
  --text-primary: #e8f5e8;
  --text-secondary: #9ab89a;

  /* Everything below DERIVES from --accent, so a theme change carries through
     automatically. These were hardcoded greens (--border alone is used 24 times),
     which is why so much of the UI ignored the accent colour. */
  --bg: color-mix(in srgb, var(--accent) 8%, #070907);
  --active: var(--accent);
  --button-fill: color-mix(in srgb, var(--accent) 28%, transparent);
  --border: color-mix(in srgb, var(--accent) 22%, transparent);

  /* Calendar glyph used as a MASK (not an image) so --accent paints through it. */
  --calendar-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2H7zM5 9h14v11H5V9z'/%3E%3C/svg%3E");
  /* Panel section separators — Android draws these as a ShuIro (var(--accent)) hairline */
  --divider: var(--accent);
  --warning: var(--text-secondary);
  --priority-high: #ff6b6b;
  --priority-medium: #ffa94d;
  --priority-low: var(--accent);
  --priority-none: var(--accent);

  /* Android spec values */
  --outer-margin: 24px;
  --panel-radius: 10px;
  --panel-padding: 14px;
  --input-height: 28px;
  --button-size: 28px;
}

/* ========== RESET ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== BODY & BACKGROUND ========== */
body {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  /* Base weight for anything that does not set its own. 500, not 400 — at the
     small sizes these panels use, 400 reads as thin. 600/bold rules are left
     alone so the emphasis tier still sits above this. */
  font-weight: 500;
  color: var(--text-primary);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

/* Background - dark radial glow + faint starfield (Android spec) */
/* Radial glow: circle 85vw at 50% 22%, #0E0E0E -> #050505 -> #000000 */
/* Starfield: 38 stars in top 70%, dot radius ~1.4px, color #D8D8E0, opacity 0.25-0.60 */
.bg-starry {
  background-color: #000000;
  background-image:
    /* Radial glow centered at 22% from top */
    radial-gradient(circle 85vw at 50% 22%, #0E0E0E 0%, #050505 50%, #000000 100%),
    /* Starfield - 38 stars in top 70% of screen, varying opacity 0.25-0.60, color #D8D8E0 */
    radial-gradient(2.8px 2.8px at 3% 8%, rgba(216,216,224,0.45), transparent),
    radial-gradient(2.8px 2.8px at 8% 15%, rgba(216,216,224,0.35), transparent),
    radial-gradient(2.8px 2.8px at 12% 5%, rgba(216,216,224,0.55), transparent),
    radial-gradient(2.8px 2.8px at 18% 22%, rgba(216,216,224,0.30), transparent),
    radial-gradient(2.8px 2.8px at 22% 12%, rgba(216,216,224,0.50), transparent),
    radial-gradient(2.8px 2.8px at 27% 35%, rgba(216,216,224,0.40), transparent),
    radial-gradient(2.8px 2.8px at 32% 8%, rgba(216,216,224,0.55), transparent),
    radial-gradient(2.8px 2.8px at 35% 28%, rgba(216,216,224,0.25), transparent),
    radial-gradient(2.8px 2.8px at 40% 18%, rgba(216,216,224,0.60), transparent),
    radial-gradient(2.8px 2.8px at 44% 42%, rgba(216,216,224,0.35), transparent),
    radial-gradient(2.8px 2.8px at 48% 6%, rgba(216,216,224,0.50), transparent),
    radial-gradient(2.8px 2.8px at 52% 32%, rgba(216,216,224,0.40), transparent),
    radial-gradient(2.8px 2.8px at 55% 15%, rgba(216,216,224,0.55), transparent),
    radial-gradient(2.8px 2.8px at 58% 48%, rgba(216,216,224,0.30), transparent),
    radial-gradient(2.8px 2.8px at 62% 10%, rgba(216,216,224,0.45), transparent),
    radial-gradient(2.8px 2.8px at 65% 38%, rgba(216,216,224,0.50), transparent),
    radial-gradient(2.8px 2.8px at 68% 22%, rgba(216,216,224,0.35), transparent),
    radial-gradient(2.8px 2.8px at 72% 55%, rgba(216,216,224,0.60), transparent),
    radial-gradient(2.8px 2.8px at 75% 12%, rgba(216,216,224,0.40), transparent),
    radial-gradient(2.8px 2.8px at 78% 45%, rgba(216,216,224,0.25), transparent),
    radial-gradient(2.8px 2.8px at 82% 8%, rgba(216,216,224,0.55), transparent),
    radial-gradient(2.8px 2.8px at 85% 32%, rgba(216,216,224,0.45), transparent),
    radial-gradient(2.8px 2.8px at 88% 18%, rgba(216,216,224,0.35), transparent),
    radial-gradient(2.8px 2.8px at 92% 52%, rgba(216,216,224,0.50), transparent),
    radial-gradient(2.8px 2.8px at 95% 5%, rgba(216,216,224,0.40), transparent),
    radial-gradient(2.8px 2.8px at 97% 28%, rgba(216,216,224,0.55), transparent),
    /* Additional stars for 38 total */
    radial-gradient(2.8px 2.8px at 5% 42%, rgba(216,216,224,0.30), transparent),
    radial-gradient(2.8px 2.8px at 15% 58%, rgba(216,216,224,0.45), transparent),
    radial-gradient(2.8px 2.8px at 25% 48%, rgba(216,216,224,0.35), transparent),
    radial-gradient(2.8px 2.8px at 38% 62%, rgba(216,216,224,0.50), transparent),
    radial-gradient(2.8px 2.8px at 45% 55%, rgba(216,216,224,0.40), transparent),
    radial-gradient(2.8px 2.8px at 55% 65%, rgba(216,216,224,0.55), transparent),
    radial-gradient(2.8px 2.8px at 60% 58%, rgba(216,216,224,0.30), transparent),
    radial-gradient(2.8px 2.8px at 70% 68%, rgba(216,216,224,0.45), transparent),
    radial-gradient(2.8px 2.8px at 80% 62%, rgba(216,216,224,0.35), transparent),
    radial-gradient(2.8px 2.8px at 88% 65%, rgba(216,216,224,0.50), transparent),
    radial-gradient(2.8px 2.8px at 10% 68%, rgba(216,216,224,0.40), transparent),
    radial-gradient(2.8px 2.8px at 50% 70%, rgba(216,216,224,0.55), transparent);
}

/* Midnight Blue - deep blue tones with subtle star glow */
.bg-midnight {
  background-color: #020410;
  background-image:
    radial-gradient(circle 85vw at 50% 22%, #0a1020 0%, #050810 50%, #020410 100%),
    /* Scattered blue-white stars */
    radial-gradient(2px 2px at 5% 10%, rgba(180,200,255,0.5), transparent),
    radial-gradient(2px 2px at 15% 25%, rgba(180,200,255,0.4), transparent),
    radial-gradient(2px 2px at 25% 8%, rgba(180,200,255,0.6), transparent),
    radial-gradient(2px 2px at 38% 18%, rgba(180,200,255,0.35), transparent),
    radial-gradient(2px 2px at 50% 12%, rgba(180,200,255,0.55), transparent),
    radial-gradient(2px 2px at 62% 22%, rgba(180,200,255,0.45), transparent),
    radial-gradient(2px 2px at 75% 6%, rgba(180,200,255,0.5), transparent),
    radial-gradient(2px 2px at 88% 15%, rgba(180,200,255,0.4), transparent),
    radial-gradient(2px 2px at 95% 28%, rgba(180,200,255,0.55), transparent);
}

/* Deep Space - darker with distant nebula hints */
.bg-deepspace {
  background-color: #000005;
  background-image:
    radial-gradient(ellipse 120vw 80vh at 30% 20%, rgba(40,20,60,0.3) 0%, transparent 50%),
    radial-gradient(ellipse 100vw 60vh at 70% 60%, rgba(20,30,50,0.2) 0%, transparent 50%),
    /* Distant tiny stars */
    radial-gradient(1.5px 1.5px at 8% 12%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 22% 5%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 35% 18%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.5px 1.5px at 48% 8%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 55% 25%, rgba(255,255,255,0.2), transparent),
    radial-gradient(1.5px 1.5px at 68% 12%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 82% 20%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.5px 1.5px at 92% 8%, rgba(255,255,255,0.35), transparent);
}

/* Dark Forest - greenish tint with firefly-like dots */
.bg-forest {
  background-color: #020805;
  background-image:
    radial-gradient(circle 85vw at 50% 80%, rgba(10,30,15,0.4) 0%, transparent 60%),
    radial-gradient(circle 60vw at 20% 50%, rgba(15,35,20,0.3) 0%, transparent 50%),
    /* Firefly-like glowing dots */
    radial-gradient(3px 3px at 12% 45%, rgba(150,220,100,0.5), transparent),
    radial-gradient(2.5px 2.5px at 28% 62%, rgba(150,220,100,0.4), transparent),
    radial-gradient(3px 3px at 42% 38%, rgba(150,220,100,0.55), transparent),
    radial-gradient(2.5px 2.5px at 55% 55%, rgba(150,220,100,0.35), transparent),
    radial-gradient(3px 3px at 68% 42%, rgba(150,220,100,0.5), transparent),
    radial-gradient(2.5px 2.5px at 78% 58%, rgba(150,220,100,0.45), transparent),
    radial-gradient(3px 3px at 88% 48%, rgba(150,220,100,0.4), transparent),
    radial-gradient(2.5px 2.5px at 35% 72%, rgba(150,220,100,0.5), transparent),
    radial-gradient(3px 3px at 60% 68%, rgba(150,220,100,0.35), transparent);
}

/* Ember - warm tones with glowing ember particles */
.bg-ember {
  background-color: #0a0505;
  background-image:
    radial-gradient(circle 80vw at 50% 90%, rgba(40,15,10,0.5) 0%, transparent 60%),
    radial-gradient(circle 50vw at 30% 70%, rgba(50,20,15,0.3) 0%, transparent 50%),
    /* Ember particles - warm orange/red dots */
    radial-gradient(3px 3px at 10% 55%, rgba(255,120,50,0.5), transparent),
    radial-gradient(2.5px 2.5px at 22% 68%, rgba(255,100,40,0.4), transparent),
    radial-gradient(3px 3px at 35% 52%, rgba(255,130,60,0.55), transparent),
    radial-gradient(2px 2px at 48% 72%, rgba(255,90,30,0.35), transparent),
    radial-gradient(3px 3px at 58% 58%, rgba(255,110,45,0.5), transparent),
    radial-gradient(2.5px 2.5px at 72% 65%, rgba(255,100,40,0.45), transparent),
    radial-gradient(3px 3px at 85% 55%, rgba(255,120,50,0.4), transparent),
    radial-gradient(2px 2px at 40% 78%, rgba(255,80,30,0.5), transparent),
    radial-gradient(2.5px 2.5px at 65% 75%, rgba(255,110,45,0.35), transparent);
}

/* Charcoal - subtle gray texture */
.bg-charcoal {
  background-color: #0d0d0d;
  background-image:
    radial-gradient(circle 85vw at 50% 22%, #151515 0%, #0d0d0d 50%, #080808 100%),
    /* Subtle gray speckles for texture */
    radial-gradient(1px 1px at 5% 8%, rgba(150,150,150,0.15), transparent),
    radial-gradient(1px 1px at 12% 22%, rgba(150,150,150,0.1), transparent),
    radial-gradient(1px 1px at 20% 12%, rgba(150,150,150,0.12), transparent),
    radial-gradient(1px 1px at 28% 28%, rgba(150,150,150,0.08), transparent),
    radial-gradient(1px 1px at 38% 15%, rgba(150,150,150,0.14), transparent),
    radial-gradient(1px 1px at 45% 25%, rgba(150,150,150,0.1), transparent),
    radial-gradient(1px 1px at 55% 10%, rgba(150,150,150,0.12), transparent),
    radial-gradient(1px 1px at 65% 20%, rgba(150,150,150,0.08), transparent),
    radial-gradient(1px 1px at 75% 8%, rgba(150,150,150,0.15), transparent),
    radial-gradient(1px 1px at 85% 18%, rgba(150,150,150,0.1), transparent),
    radial-gradient(1px 1px at 92% 12%, rgba(150,150,150,0.12), transparent);
}

.bg-black {
  background-color: #000000;
}

.bg-custom {
  background-image: url('/assets/workspace-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #000000;
}

/* ========== CUSTOM TITLE BAR ========== */
.titlebar-controls {
  -webkit-app-region: no-drag;
  display: flex;
  gap: 8px;
  /* Re-enable pointer events for the window control buttons */
  pointer-events: auto;
  /* Ensure controls are above menu bar (z-index: 1001) */
  position: relative;
  z-index: 1003;
  margin-left: auto;
}

.titlebar-btn {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: calc(14px * var(--font-scale));
  width: 30px;
  height: 24px;
  cursor: pointer;
  border-radius: 3px;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

.titlebar-btn:hover {
  background: rgba(255,255,255,0.1);
}

.titlebar-btn.close-btn:hover {
  background: #e8106a;
}

/* ========== MENU BAR ========== */
.menu-bar {
  -webkit-app-region: drag;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 24px;
  background-color: var(--panel-bg);
  display: flex;
  align-items: center;
  padding: 0 10px;
  z-index: 1001;
  border-bottom: none;
  /* Menu bar is draggable for window movement, but child elements override */
  pointer-events: auto;
}

.titlebar-logo {
  -webkit-app-region: drag;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(10px * var(--font-scale));
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--accent);
  user-select: none;
}

/* This selector went missing in an earlier edit — the properties below were left
   orphaned after .titlebar-logo's closing brace, so the menu labels lost their
   height/flex/cursor entirely and only the :hover rule below still applied. */
.menu-label {
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.1s;
}

.menu-label:hover,
.menu-item.open .menu-label {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.menu-dropdown {
  -webkit-app-region: no-drag;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--window-bg);   /* was a hardcoded dark green — ignored the theme */
  border: 1px solid var(--border);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 4px 0;
  z-index: 1000;
}

.menu-item.open .menu-dropdown {
  display: block;
}

.menu-option {
  -webkit-app-region: no-drag;
  color: var(--text-primary);
  font-size: calc(12px * var(--font-scale));
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.1s;
}

.menu-option:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ========== HEADER LAYOUT ========== */
header {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--outer-margin);
  z-index: 100;
  /* Unified top bar: one dark row holding KURO / hi-score / weather / streak / menu */
  background: var(--panel-bg);
}

footer {
  display: none;
}

/* ========== KURO WORDMARK - Top Left ========== */
/* Android: 22px font, wide letter-spacing, left: 36px */
.header-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 100;
}

.header-title .main-title {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(15px * var(--font-scale));
  font-weight: 500;   /* was 300 - read as thin next to the rest */
  letter-spacing: 0.35em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.header-title .sub-title {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(9px * var(--font-scale));
  color: var(--accent);
  letter-spacing: 0.28em;
  margin-top: 1px;
}

/* Header containers */
.header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.header-right {
  display: flex;
  align-items: center;
}

/* ========== STATS ROW - HI-SCORE and DAILY STREAK ========== */
/* Android: top: 72px, HI-SCORE left: 24px, DAILY STREAK right: 24px */
/* Press Start 2P font, label 7px, value 15px */
/* HI-SCORE + DAILY STREAK sit inline in the unified top bar. HI-SCORE lives in
   .header-left (left-aligned), DAILY STREAK in .header-right (right-aligned). */
.header-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.header-stat.hiscore { align-items: flex-start; }
.header-stat.streak  { align-items: flex-end; margin-right: 14px; }

.stat-label {
  font-family: 'Press Start 2P', monospace;
  font-size: calc(7px * var(--font-scale));
  letter-spacing: 1px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.stat-value {
  font-family: 'Press Start 2P', monospace;
  font-size: calc(11px * var(--font-scale));
  color: var(--accent);
}

.stat-value-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.streak-fire {
  font-size: calc(11px * var(--font-scale));
  line-height: 1;
}

.stat-unit {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(10px * var(--font-scale));
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-left: 4px;
}

/* ========== LEFT PANEL - TASKS ========== */
/* Android: top: 124px, left: 24px, width: 210px */
/* Translucent black ~50% opacity, corner radius 10px, inner padding 14px */
main {
  display: contents;
}

.panel {
  position: fixed;
  /* Top bar ends at 64px (24 titlebar + 40 header). Leave a uniform
     --outer-margin gap on all four sides of the panels. */
  top: calc(64px + var(--outer-margin));
  width: 250px;
  height: calc(100vh - 64px - var(--outer-margin) - 72px);
  background: var(--panel-bg);
  border-radius: var(--panel-radius);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* First panel (TASKS) - left side */
.panel:first-of-type {
  left: 24px;
}

/* Second panel (TIME LOG) - right side */
.panel:last-of-type {
  right: 24px;
  left: auto;
  width: 250px;
}

/* ========== PANEL HEADERS ========== */
/* Section headers: 11px, letter-spacing 3px, accent green */
.panel-header {
  position: relative;
  padding: var(--panel-padding);
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  flex-shrink: 0;
}

/* The separator sits ABOVE the header (like the left panel and Android), and is
   inset by the panel padding rather than running edge-to-edge. .panel has no
   padding of its own, so a plain border would be full-bleed. */
.panel-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--panel-padding);
  right: var(--panel-padding);
  border-top: 1px solid var(--divider);
}

/* First section in a panel gets no line above it. */
.panel-header:first-child::before { content: none; }

.panel-title {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-title .count {
  background: transparent;
  padding: 0;
  font-size: calc(11px * var(--font-scale));
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 1px;
}

/* TIME LOG panel: "Xh today" on the right */
.panel-title .total {
  font-size: calc(10px * var(--font-scale));
  color: var(--text-secondary);
  font-weight: 500;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 0;
  min-height: 0;
}

/* ========== TASK TABS ========== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px var(--panel-padding);
  flex-shrink: 0;
}

.tab-btn {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 4px 8px;
  font-size: calc(9px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.tab-btn:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.tab-btn.active {
  background: var(--button-fill);
  color: var(--accent);
}

/* ========== TASK LIST ========== */
.task-item {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--panel-padding);
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  border-radius: 4px;
}

.task-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.task-item.done .task-title {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.priority-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.task-title {
  flex: 1;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-due {
  font-size: calc(10px * var(--font-scale));
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Recurring-task marker: ↻ glyph (+ word in the main list) carries the meaning;
   colour is derived from the accent, never hardcoded. */
.task-repeat {
  font-size: calc(10px * var(--font-scale));
  color: color-mix(in srgb, var(--accent) 75%, var(--text-secondary));
  flex-shrink: 0;
  white-space: nowrap;
}

/* ========== ADD TASK ========== */
.add-task-btn {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  margin: 8px var(--panel-padding);
  padding: 8px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-secondary);
  font-size: calc(11px * var(--font-scale));
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.add-task-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.add-task-form {
  padding: 8px var(--panel-padding);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.add-task-form.hidden {
  display: none;
}

.add-task-form input[type="text"] {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  width: 100%;
  background: color-mix(in srgb, var(--accent) 8%, var(--window-bg));   /* was a hardcoded dark fill: unreadable under a light theme with dark text */
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px;
  font-size: calc(11px * var(--font-scale));
  border-radius: 4px;
  outline: none;
}

.add-task-form input[type="text"]:focus {
  border-color: var(--accent);
}

.add-task-row {
  display: flex;
  gap: 6px;
}

.add-task-form select,
.add-task-form input[type="date"] {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  flex: 1;
  background: color-mix(in srgb, var(--accent) 8%, var(--window-bg));   /* was a hardcoded dark fill: unreadable under a light theme with dark text */
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 8px;
  font-size: calc(10px * var(--font-scale));
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

/* Chromium's native calendar glyph is a fixed dark bitmap and ignores `color`,
   so the date field kept showing a grey/green icon on every theme. Replacing it
   with a mask lets the accent paint through it. */
.add-task-form input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  margin: 0;
  cursor: pointer;
  background-color: var(--accent);
  -webkit-mask: var(--calendar-glyph) center / contain no-repeat;
  mask: var(--calendar-glyph) center / contain no-repeat;
  opacity: 0.85;
}

.add-task-form input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.add-task-form select:focus,
.add-task-form input[type="date"]:focus {
  border-color: var(--accent);
}

.add-task-form select option {
  background: var(--bg);
  color: var(--text-primary);
}

.add-task-form input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(1) saturate(2) hue-rotate(80deg);
  cursor: pointer;
}

.add-task-buttons {
  display: flex;
  gap: 6px;
}

.add-task-form button {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  background: var(--button-fill);
  border: none;
  color: var(--accent);
  padding: 6px 10px;
  font-size: calc(10px * var(--font-scale));
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  flex: 1;
}

.add-task-form button:hover {
  background: var(--active);
  color: var(--bg);
}

.add-task-form button.cancel {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.add-task-form button.cancel:hover {
  border-color: var(--text-secondary);
}

/* ========== TIME LOG ========== */
.time-log-day {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  margin-bottom: 6px;
}

/* Day headers: var(--accent) 11px */
.time-log-date {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  padding: 8px 10px 4px;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}

.day-total {
  color: var(--accent);
  font-weight: 500;
}

/* Entry rows: 2-line format */
/* Line 1: time range + hours */
/* Line 2: company/description + tag */
.time-entry {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 6%, transparent);
}

.time-entry:last-child {
  border-bottom: none;
}

.time-entry:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* Line 1: company / description (prominent), with the delete button on the right */
.time-entry-line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.time-company-desc {
  color: var(--text-primary);
  font-size: calc(12px * var(--font-scale));
  font-weight: 500;
}

/* Line 2: "06:28 - 11:28 | 5h | 2h BILL | 3h NON-BILL" */
.time-entry-line2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  font-size: calc(11px * var(--font-scale));
}

.time-range {
  color: var(--text-secondary);
}

.time-total {
  color: var(--accent);
  font-weight: bold;
}

.time-bill {
  color: var(--text-secondary);
}

.time-sep {
  color: var(--text-secondary);
  opacity: 0.4;
}

/* BILL / NON-BILL — small caps in the theme green */
.time-bill .cap {
  font-size: calc(8px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.time-billable-indicator {
  width: 16px;
  text-align: center;
  color: var(--accent);
  font-weight: 700;
}

.time-entry.non-billable .time-billable-indicator {
  color: var(--text-secondary);
}

/* tag: 8px var(--accent) */
.entry-type {
  font-size: calc(8px * var(--font-scale));
  color: var(--accent);
  flex-shrink: 0;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.delete-time-entry-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: calc(14px * var(--font-scale));
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.time-entry:hover .delete-time-entry-btn {
  opacity: 1;
}

.delete-time-entry-btn:hover {
  color: #ff6b6b;
}

/* Delete (×) for Kuro to-dos — main list + left panel. Hidden until row hover. */
.delete-task-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: calc(16px * var(--font-scale));
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.task-item:hover .delete-task-btn,
.left-panel-task:hover .delete-task-btn {
  opacity: 1;
}

.delete-task-btn:hover {
  color: #ff6b6b;
}

/* Export Button - small square with chevron image */
.export-btn {
  background: transparent;
  border: none;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Was an <img src="download.png">. A flat PNG can't be recoloured by CSS, so the
   export button stayed green on every theme. Inline SVG inheriting currentColor
   is the only way to make an icon follow --accent. */
.export-btn {
  color: var(--accent);
}

.export-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}

.export-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Week summary */
.week-summary-container {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  padding: 8px var(--panel-padding);
  font-size: calc(10px * var(--font-scale));
  color: var(--text-primary);
  text-align: center;
  flex-shrink: 0;
}

.week-summary-container .highlight {
  color: var(--accent);
  font-weight: 500;
}

/* ========== KURO MASCOT - CENTER ========== */
/* 300px width, taller/narrower, moved down slightly */
/* Slow breathing scale animation (1.0 -> 1.02) */
.kuro-mascot {
  position: fixed;
  top: calc(50% - 30px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kuro-avatar {
  width: 300px;
  height: auto;
  opacity: 1;
  filter: none;
  object-fit: contain;
}

/* Old box-shadow "ball" retired — the glow now hugs the cat's silhouette below. */
.kuro-back-glow {
  display: none;
}

/* Feathered, shape-contoured glow that follows Kuro's outline (drop-shadow tracks
   the PNG alpha). Colour + alpha come from --glow-c (set in JS). */
.kuro-avatar.cat-glow {
  filter: drop-shadow(0 0 7px var(--glow-c)) drop-shadow(0 0 17px var(--glow-c));
  transition: filter 0.3s ease;
}
/* Breathing = the glow gently growing (very subtle). */
.kuro-avatar.cat-glow.breathing {
  animation: kuro-cat-breath 5s infinite ease-in-out;
}
@keyframes kuro-cat-breath {
  0%, 100% { filter: drop-shadow(0 0 6px var(--glow-c)) drop-shadow(0 0 13px var(--glow-c)); }
  50%      { filter: drop-shadow(0 0 11px var(--glow-c)) drop-shadow(0 0 24px var(--glow-c)); }
}

/* ========== COLLAPSIBLE SETTINGS SECTIONS ========== */
.settings-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.12em;
  padding: 13px 10px;
  margin-top: 2px;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 6px;
  user-select: none;
  margin-top: 6px;
}
.settings-section-header:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.settings-section-header .chevron {
  transition: transform 0.2s ease;
  font-size: calc(10px * var(--font-scale));
}
.settings-section-header.collapsed .chevron {
  transform: rotate(-90deg);
}
.settings-section-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 6px 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}
.settings-section-content.collapsed {
  max-height: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
  margin: 0 !important;
}

.settings-control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.settings-label {
  font-size: calc(11px * var(--font-scale));
  color: var(--text-secondary);
}

/* ========== BOTTOM CONTROLS ========== */
/* Android: anchored bottom-center, full width, aligned with panels */
.workspace-input-bar {
  position: fixed;
  bottom: 0;
  /* Line the input up with the panels' 24px outer margin (was 10px, which made
     the input noticeably wider than everything above it). */
  left: var(--outer-margin);
  right: var(--outer-margin);
  padding: 8px 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Pill section - single combined button */
.pill-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}

.pill-section.hidden {
  display: none;
}

/* Combined Nag button: shows the Nag name and time, clickable to mark as taken.
   Radius matched to the input buttons (8px) so every button is consistent. */
.pill-btn {
  background-color: var(--accent);
  color: var(--window-bg);
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(10px * var(--font-scale));
  font-weight: 700;   /* the most important control on screen — always bold */
  cursor: pointer;
  transition: background-color 0.15s;
  min-width: 130px;
  text-align: center;
  margin-bottom: 4px;
}

.pill-btn:last-child {
  margin-bottom: 0;
}

.pill-btn:hover {
  background-color: var(--accent);
}

/* Pill due state - strawberry red, glowing and pulsing */
.pill-btn.pill-due {
  background: linear-gradient(135deg, #FF6B6B, #FF4757) !important;
  color: #FFFFFF !important;
  animation: btnpulse 1.5s infinite ease-in-out;
  box-shadow: 0 0 12px rgba(255, 107, 107, 0.6);
  font-weight: bold;
}

.pill-btn.pill-due:hover {
  background: linear-gradient(135deg, #e85c5c, #ff3838) !important;
  box-shadow: 0 0 16px rgba(255, 107, 107, 0.8);
}

/* Small "Done for today" link under a due pill — mirrors Android. Text + underline
   carry it (never colour alone); satisfies the chain for the day, no phantom dose. */
.pill-done-link {
  background: none;
  border: none;
  color: var(--text-primary);
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 6px;
  margin-bottom: 4px;
  opacity: 0.85;
}
.pill-done-link:hover { opacity: 1; }
.pill-done-link:last-child { margin-bottom: 0; }

@keyframes btnpulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.6);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 18px rgba(255, 107, 107, 0.9);
  }
}

/* No red glow on the cat when a pill is due — the red "Due now" button and the
   bouncing pill signal it. (.due-active is still toggled but has no glow.) */

/* Bouncing floating pill in workspace */
.floating-pill {
  position: fixed;
  font-size: calc(28px * var(--font-scale));
  z-index: 9999;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(255, 107, 107, 0.8);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Response area */
/* In-flow inside the input bar so it sits BELOW the Next Pill button and ABOVE
   the input row, centered and narrow so it stays in the middle column and never
   overlays the Today / Time Log panels. */
.workspace-response {
  width: 100%;
  max-width: 340px;
  margin: 0 auto 8px;
  max-height: 300px;
  overflow-y: auto;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-primary);
  /* Match the panels' 60% translucency (was 0.85, darker than its own panels) */
  background: var(--panel-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
  text-align: left;
  box-sizing: border-box;
}
.workspace-response::-webkit-scrollbar { width: 6px; }
.workspace-response::-webkit-scrollbar-track { background: transparent; }
.workspace-response::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 3px; }
.workspace-response::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent) 60%, transparent); }

.workspace-response:empty {
  display: none;
}

/* Chat history: a scrollable You/KURO conversation inside the response panel. */
.chat-msg {
  margin-bottom: 10px;
  text-align: left;
}
.chat-msg:last-child {
  margin-bottom: 0;
}
.chat-msg-sender {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(9px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 2px;
}
.chat-msg.you .chat-msg-sender {
  color: var(--text-secondary);
}
.chat-msg.kuro .chat-msg-sender {
  color: var(--accent);
}
.chat-msg-text {
  font-size: calc(13px * var(--font-scale));
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-msg.you .chat-msg-text {
  color: var(--text-secondary);
}

/* Input row: height 36px, translucent black ~50%, rounded 6px */
/* Full width with padding, adaptive to screen size */
/* The row is now just a flex track: the text field is its own rounded box and the
   buttons sit BESIDE it (like Android), so they can't be clipped or mis-centred
   by the field's padding. */
.workspace-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  padding: 0;
}

.workspace-input-field {
  flex: 1;
  min-width: 0;
  height: var(--input-height);
  display: flex;
  align-items: center;
  /* Match the panels' 60% translucency */
  background: var(--panel-bg);
  border-radius: 8px;
}

#workspace-input {
  flex: 1;
  height: calc(var(--input-height) - 4px);
  border: none;
  border-radius: 4px;
  outline: none;
  background: transparent;
  padding: 4px 10px;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  line-height: 1.4;
  color: var(--text-primary);
  resize: none;
  overflow-y: hidden;
}

#workspace-input::placeholder {
  color: var(--text-secondary);
}

#workspace-input:focus {
  outline: none;
}

/* Buttons: 28x28px, transparent background, just show icon */
/* Unified icon buttons beside the input — green rounded squares with a black
   glyph, matching Android's SendIcon / MicIcon buttons exactly. Previously
   `send` was a PNG and `read` was a raw 🔊 emoji with border-radius:0. */
.workspace-input-bar .icon-btn {
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--button-size);
  height: var(--button-size);
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  background-color: var(--active);
  transition: filter 0.15s ease;
}

.workspace-input-bar .icon-btn svg {
  width: 15px;
  height: 15px;
  display: block;
  fill: #000000;
  stroke: #000000;
}

/* Read button uses the hand-drawn speaker glyph (black, transparent bg) on the
   same CSS green square as Send, so both buttons share identical chrome. */
.workspace-input-bar .icon-btn img {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
}

.workspace-input-bar .icon-btn:hover {
  filter: brightness(1.12);
}

.workspace-input-bar .icon-btn:active {
  filter: brightness(0.92);
}

/* Mic (widget only today) turns pink-ish while recording */
.workspace-input-bar .mic-btn.recording {
  background-color: #e8106a;
}

/* Typing indicator dots */
.workspace-response .dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 16px;
}
.workspace-response .dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: blinkdot 1.2s infinite ease-in-out both;
}
.workspace-response .dots i:nth-child(2) {
  animation-delay: 0.2s;
}
.workspace-response .dots i:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes blinkdot {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========== BACKGROUND SETTINGS ========== */
.bg-settings {
  position: relative;
  z-index: 100;
}

.bg-settings-btn {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-size: calc(14px * var(--font-scale));
  /* In-flow inside .header-right, after DAILY STREAK. (It used to be
     position:fixed, which collided with the streak stat and swallowed clicks —
     the "settings won't open" bug.) */
  position: relative;
  z-index: 100;
  flex-shrink: 0;
  /* Belt-and-suspenders: always clickable even if the top bar ever becomes a
     window-drag region (drag zones swallow real mouse clicks in Electron). */
  -webkit-app-region: no-drag;
  pointer-events: auto;
}

.bg-settings-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.bg-settings-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: color-mix(in srgb, var(--window-bg) 88%, transparent);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.bg-settings-dropdown.open {
  display: flex;
}

.settings-modal-card {
  width: 600px;
  max-width: 92vw;
  max-height: 88vh;
  background: rgba(13, 22, 13, 0.96);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-zoom-in 0.25s ease-out;
}

@keyframes modal-zoom-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.settings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.settings-modal-title {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--text-primary);
}

.settings-version {
  font-size: calc(11px * var(--font-scale));
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--accent);
  margin-left: 8px;
}

.settings-modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: calc(24px * var(--font-scale));
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.settings-modal-close:hover {
  color: var(--accent);
}

.settings-modal-body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  flex: 1;
  /* Without min-height:0 a flex item won't shrink below its content, so
     overflow-y:auto never scrolls and the card's overflow:hidden clips the
     bottom off — that was the "settings cut off / can't scroll" bug. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Children of the column flex body must NOT shrink. By default flex items have
   flex-shrink:1, so expanding a section compressed every child to fit the box
   instead of overflowing it — scrollHeight then equalled clientHeight, so no
   scrollbar ever appeared, and .settings-section-content's overflow:hidden
   clipped the squashed content away. That was the real "settings won't scroll /
   can't reach my settings" bug. */
.settings-modal-body > * {
  flex-shrink: 0;
}

/* Custom scrollbar for settings modal body — kept clearly visible so it's
   obvious the panel scrolls when its content is taller than the window. */
.settings-modal-body::-webkit-scrollbar {
  width: 10px;
}
.settings-modal-body::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 5px;
}
.settings-modal-body::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.settings-modal-body::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  background-clip: content-box;
}

.bg-settings-dropdown-title {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  padding: 10px 4px 6px;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.system-buttons-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.settings-action-btn {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: calc(12px * var(--font-scale));
  font-weight: 500;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.settings-action-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}

.settings-action-btn.quit:hover {
  background: rgba(232, 16, 106, 0.15);
  border-color: #e8106a;
  color: #e8106a;
}

/* ========== PROFILE — "Your name" field ========== */
.profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.profile-name-label {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-secondary);
  flex-shrink: 0;
}

.profile-name-input {
  flex: 1;
  min-width: 0;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 8%, var(--window-bg));   /* was a hardcoded dark fill: unreadable under a light theme with dark text */
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
}

.profile-name-input:focus {
  border-color: var(--accent);
}

.profile-name-input::placeholder {
  color: var(--text-secondary);
}

.profile-name-status {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  color: var(--text-secondary);
  min-height: 14px;
  margin-top: 4px;
}

.profile-name-status.ok  { color: var(--accent); }
.profile-name-status.err { color: #e8106a; }

/* ========== Consolidated settings — notes, time inputs, range slider ========== */
.settings-note {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 6px 4px;
}
.settings-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.settings-time-row .task-list-toggle { flex: 1; margin: 0; }
.settings-time-input {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 8%, var(--window-bg));   /* was a hardcoded dark fill: unreadable under a light theme with dark text */
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  outline: none;
  color-scheme: dark;
}
.settings-time-input:focus { border-color: var(--accent); }
.settings-range {
  width: 100%;
  accent-color: var(--accent);
  margin: 4px 0 2px;
}

/* Compact dropdowns inside the hamburger settings panel (replaces the old
   stacked pick-one lists for Background / Overlay / Calendar Range). */
.menu-select {
  width: calc(100% - 24px);
  margin: 0 12px 4px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--accent) 8%, var(--window-bg));   /* was a hardcoded dark fill: unreadable under a light theme with dark text */
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  cursor: pointer;
  outline: none;
}

.menu-select:focus {
  border-color: var(--accent);
}

.menu-select option {
  background: var(--window-bg);
  color: var(--text-primary);
}

/* Account connect rows inside the hamburger panel (moved from the Settings window). */
.menu-connect-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
}

.menu-connect-row .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #666;
  flex: 0 0 auto;
}

.menu-connect-row .dot.connected { background: var(--accent); }
.menu-connect-row .dot.disconnected { background: #b88282; }

.menu-connect-name {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-primary);
  flex: 0 0 auto;
}

.menu-connect-status {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-secondary);
  flex: 1 1 auto;
  text-align: right;
}

.menu-connect-btn {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(12px * var(--font-scale));
  padding: 4px 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--window-bg));   /* was a hardcoded dark fill: unreadable under a light theme with dark text */
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  flex: 0 0 auto;
}

.menu-connect-btn:hover:not(:disabled) { border-color: var(--accent); }
.menu-connect-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.menu-connect-note {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  color: var(--text-secondary);
  padding: 0 16px 4px;
  margin: 0;
}

.bg-option {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  padding: 12px 16px;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
}

.bg-option:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.bg-option.active {
  color: var(--accent);
}

.bg-option.active::before {
  content: '\2713';
  font-size: calc(12px * var(--font-scale));
}

.bg-option:not(.active)::before {
  content: '';
  display: inline-block;
  width: 12px;
}

.overlay-option {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  padding: 12px 16px;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
}

.overlay-option:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.overlay-option.active {
  color: var(--accent);
}

.overlay-option.active::before {
  content: '\2713';
  font-size: calc(12px * var(--font-scale));
}

.overlay-option:not(.active)::before {
  content: '';
  display: inline-block;
  width: 12px;
}

.bg-settings-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.user-photos-list {
  max-height: 150px;
  overflow-y: auto;
}

.no-user-photos {
  padding: 12px 16px;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-secondary);
  font-style: italic;
}

.user-photo-item {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  padding: 10px 16px;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: background 0.15s;
}

.user-photo-item:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.user-photo-item.active {
  color: var(--accent);
}

.user-photo-item.active::before {
  content: '\2713';
  font-size: calc(12px * var(--font-scale));
  margin-right: 6px;
}

.user-photo-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delete-photo-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: calc(10px * var(--font-scale));
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.15s;
  opacity: 0;
}

.user-photo-item:hover .delete-photo-btn {
  opacity: 1;
}

.delete-photo-btn:hover {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

.add-photo-btn {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  width: calc(100% - 24px);
  margin: 8px 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-secondary);
  font-size: calc(12px * var(--font-scale));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}

.add-photo-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ========== CALENDAR DAYS SELECTOR ========== */
.calendar-days-options {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  flex-wrap: wrap;
}

.cal-days-btn {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: calc(11px * var(--font-scale));
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.cal-days-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cal-days-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a1a2e;
  font-weight: 700;
}

.weather-settings-row {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  flex-wrap: wrap;
}

/* Type-ahead location search box + autocomplete dropdown. The row is the
   positioning context for the results list, which is absolutely positioned
   directly under the input. */
.weather-location-search-row {
  position: relative;
  padding: 0 12px 8px;
}

.weather-location-search {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: calc(11px * var(--font-scale));
  border-radius: 4px;
}

.weather-location-search:focus {
  outline: none;
  border-color: var(--accent);
}

.weather-location-results {
  position: absolute;
  top: calc(100% - 4px);
  left: 12px;
  right: 12px;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
  background: var(--window-bg);   /* was a hardcoded navy */
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.weather-location-results:not(.visible) {
  display: none;
}

.weather-location-result {
  padding: 7px 10px;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s, color 0.12s;
}

.weather-location-result:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}

/* ========== WEATHER BAR - Centered at top ========== */
/* Translucent black (50%), radius 8, padding 10x5 */
/* Five days separated by | (var(--text-secondary) at 50%) */
/* Weekday initial: bold, var(--accent); Temps + emoji: normal, var(--text-primary), all 11px */
.weather-bar {
  /* In-flow, centred by .header-center's flexbox — never overlaps the logo or
     streak, even on a narrow window. No background now that it's in the top bar. */
  position: static;
  transform: none;
  background: transparent;
  padding: 0;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.weather-bar:not(:empty) {
  display: flex;
  visibility: visible;
  opacity: 1;
}

.weather-bar:empty {
  display: none;
  visibility: hidden;
}

/* Resolved location label, sits just above the weather bar so the user can see
   which place the forecast is for (e.g. "📍 Kempsey, New South Wales, AU"). */
.weather-location {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 110;
  max-width: 320px;
  padding: 1px 8px;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(10px * var(--font-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #9FD89F;
  opacity: 0.85;
}

.weather-location:empty {
  display: none;
}

.weather-bar .weather-day {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.weather-bar .weather-day-initial {
  font-weight: bold;
  color: var(--accent);
}

.weather-bar .weather-temps {
  font-weight: 500;
  color: var(--text-primary);
}

.weather-bar .weather-separator {
  display: none;
}

/* ========== EMPTY & LOADING STATES ========== */
.empty-state,
.loading,
.error {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  padding: 24px var(--panel-padding);
  text-align: center;
  color: var(--text-secondary);
  font-size: calc(11px * var(--font-scale));
}

.error {
  color: var(--warning);
}

/* ========== SCROLLBAR ========== */
.panel-content::-webkit-scrollbar {
  width: 4px;
}

.panel-content::-webkit-scrollbar-track {
  background: transparent;
}

.panel-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ========== MODAL OVERLAY ========== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-overlay.show {
  display: flex;
}

.modal {
  background: var(--window-bg);   /* was a hardcoded dark green — ignored the theme */
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: calc(20px * var(--font-scale));
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.15s;
}

.modal-close:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.modal-content {
  padding: 20px;
}

.setting-group {
  margin-bottom: 20px;
}

.setting-group:last-child {
  margin-bottom: 0;
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-primary);
  cursor: pointer;
}

.setting-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.setting-label-text {
  display: block;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-primary);
  margin-bottom: 8px;
}

.setting-select {
  width: 100%;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--window-bg));   /* was a hardcoded dark fill: unreadable under a light theme with dark text */
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  cursor: pointer;
  outline: none;
}

.setting-select:focus {
  border-color: var(--accent);
}

.setting-select option {
  background: var(--window-bg);
  color: var(--text-primary);
}

.setting-description {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.4;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.modal-btn {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: calc(12px * var(--font-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.modal-btn.save {
  background: var(--accent);
  border: none;
  color: #000;
}

.modal-btn.save:hover {
  background: var(--active);
}

.modal-btn.cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

.modal-btn.cancel:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}

/* ========== DAILY PANEL (Left Panel) ========== */
.daily-panel {
  padding: 0;
}

.daily-panel-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding: var(--panel-padding);
}

/* Slim, clearly-visible themed scrollbar so it's obvious the panel scrolls
   (the meetings/tasks list runs past the bottom — it was scrollable all along,
   but the old 4px near-invisible bar made it look cut off). */
.daily-panel-scroll::-webkit-scrollbar {
  width: 6px;
}

.daily-panel-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.daily-panel-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 3px;
}

.daily-panel-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 60%, transparent);
}

/* TODAY header */
.today-header {
  margin-bottom: 16px;
}

.today-label {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
}

.today-date {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-primary);
  margin-top: 4px;
}

/* Section headers */
.section-header {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(10px * var(--font-scale));
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  padding: 12px 0 8px 0;
  border-top: 1px solid var(--divider);
}

/* Android only separates MEETINGS and the to-do block — the nested source
   headers (GOOGLE TASKS / MICROSOFT TO-DO) run on without a line. */
#google-tasks-header,
#microsoft-todo-header {
  border-top: none;
}

.section-header:first-of-type {
  border-top: none;
}

.section-header.tappable {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.15s;
}

.section-header.tappable:hover {
  color: var(--accent);
}

.section-header .chevron {
  font-size: calc(14px * var(--font-scale));
  color: var(--text-secondary);
  transition: color 0.15s;
}

.section-header.tappable:hover .chevron {
  color: var(--accent);
}

/* Add task plus button - small and subtle next to KURO'S TO-DO */
.add-task-plus-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: calc(14px * var(--font-scale));
  font-weight: 500;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.15s;
}

.add-task-plus-btn:hover {
  opacity: 0.7;
}

/* Meetings container */
.meetings-container {
  padding: 4px 0 8px 0;
  min-height: 24px;
}

.meetings-container .empty-state {
  padding: 8px 0;
  text-align: left;
  font-size: calc(11px * var(--font-scale));
}

/* Task list containers */
.task-list-container {
  padding: 4px 0 8px 0;
  min-height: 24px;
}

.task-list-container .loading {
  padding: 8px 0;
  text-align: left;
  font-size: calc(11px * var(--font-scale));
}

.task-list-container .empty-state {
  padding: 8px 0;
  text-align: left;
  font-size: calc(11px * var(--font-scale));
}

/* Left panel task items */
.left-panel-task {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.left-panel-task:hover {
  opacity: 0.7;
}

.task-bullet {
  font-size: calc(12px * var(--font-scale));
  line-height: 1.3;
  flex-shrink: 0;
}

.task-bullet.kuro-bullet {
  color: var(--accent);
}

.task-bullet.google-bullet,
.task-bullet.microsoft-bullet {
  color: var(--accent);
}

/* Priority-based bullet colors for left panel */
.task-bullet.priority-high-bullet {
  color: #FF6B6B;
}

.task-bullet.priority-medium-bullet {
  color: #FFA94D;
}

.task-bullet.priority-low-bullet {
  color: var(--accent);
}

.task-bullet.priority-none-bullet {
  color: var(--text-secondary);
}

.task-text {
  font-size: calc(11px * var(--font-scale));
  line-height: 1.3;
  color: var(--text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Due date in left panel task row */
.left-panel-due {
  font-size: calc(10px * var(--font-scale));
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
}

/* Meeting items */
.meeting-item {
  font-size: calc(11px * var(--font-scale));
  padding: 6px 0;
  line-height: 1.4;
}

.meeting-time {
  color: var(--accent);
  display: block;
  margin-bottom: 2px;
}

.meeting-title {
  color: var(--text-primary);
}

/* Connect prompt for disconnected services */
.connect-prompt {
  padding: 8px 0;
  font-size: calc(11px * var(--font-scale));
  color: var(--text-secondary);
  font-style: italic;
}

/* ========== ANIMATED OVERLAYS ========== */
/* Overlay container - renders on top of background */
.overlay-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Stars overlay - twinkling star particles */
.overlay-stars .overlay-container::before,
.overlay-stars .overlay-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(2px 2px at 10% 15%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 25% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 40% 22%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 55% 12%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 25%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 85% 18%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 15% 45%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 35% 55%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 60% 48%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 80% 52%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 92% 38%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 5% 72%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 28% 78%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 48% 68%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 75% 82%, rgba(255,255,255,0.7), transparent);
  animation: twinkle 3s ease-in-out infinite;
}

.overlay-stars .overlay-container::after {
  background-image:
    radial-gradient(1.5px 1.5px at 18% 28%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 33% 35%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 52% 32%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 68% 42%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 28%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 8% 58%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 42% 62%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 65% 58%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 82% 65%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 12% 88%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 38% 92%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 58% 85%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 78% 92%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 95% 78%, rgba(255,255,255,0.5), transparent);
  animation: twinkle 3s ease-in-out infinite 1.5s;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* Snow overlay - falling snowflakes */
.overlay-snow .overlay-container::before,
.overlay-snow .overlay-container::after {
  content: '';
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  background-image:
    radial-gradient(4px 4px at 5% 10%, rgba(255,255,255,0.9), transparent),
    radial-gradient(3px 3px at 12% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(5px 5px at 20% 5%, rgba(255,255,255,0.8), transparent),
    radial-gradient(3px 3px at 28% 35%, rgba(255,255,255,0.6), transparent),
    radial-gradient(4px 4px at 35% 15%, rgba(255,255,255,0.9), transparent),
    radial-gradient(3px 3px at 42% 45%, rgba(255,255,255,0.7), transparent),
    radial-gradient(5px 5px at 50% 8%, rgba(255,255,255,0.8), transparent),
    radial-gradient(3px 3px at 58% 30%, rgba(255,255,255,0.6), transparent),
    radial-gradient(4px 4px at 65% 20%, rgba(255,255,255,0.9), transparent),
    radial-gradient(3px 3px at 72% 50%, rgba(255,255,255,0.7), transparent),
    radial-gradient(5px 5px at 80% 12%, rgba(255,255,255,0.8), transparent),
    radial-gradient(3px 3px at 88% 40%, rgba(255,255,255,0.6), transparent),
    radial-gradient(4px 4px at 95% 25%, rgba(255,255,255,0.9), transparent);
  animation: snowfall 8s linear infinite;
}

.overlay-snow .overlay-container::after {
  background-image:
    radial-gradient(3px 3px at 8% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(4px 4px at 15% 32%, rgba(255,255,255,0.8), transparent),
    radial-gradient(3px 3px at 25% 12%, rgba(255,255,255,0.6), transparent),
    radial-gradient(5px 5px at 32% 42%, rgba(255,255,255,0.9), transparent),
    radial-gradient(3px 3px at 40% 22%, rgba(255,255,255,0.7), transparent),
    radial-gradient(4px 4px at 48% 55%, rgba(255,255,255,0.8), transparent),
    radial-gradient(3px 3px at 55% 18%, rgba(255,255,255,0.6), transparent),
    radial-gradient(5px 5px at 62% 38%, rgba(255,255,255,0.9), transparent),
    radial-gradient(3px 3px at 70% 28%, rgba(255,255,255,0.7), transparent),
    radial-gradient(4px 4px at 78% 48%, rgba(255,255,255,0.8), transparent),
    radial-gradient(3px 3px at 85% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(5px 5px at 92% 35%, rgba(255,255,255,0.9), transparent);
  animation: snowfall 12s linear infinite 2s;
}

@keyframes snowfall {
  0% { transform: translateY(-10%); }
  100% { transform: translateY(100%); }
}

/* Embers overlay - rising ember particles */
.overlay-embers .overlay-container::before,
.overlay-embers .overlay-container::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  background-image:
    radial-gradient(3px 3px at 8% 85%, rgba(255,120,50,0.9), transparent),
    radial-gradient(2px 2px at 15% 75%, rgba(255,100,40,0.7), transparent),
    radial-gradient(4px 4px at 22% 90%, rgba(255,140,60,0.8), transparent),
    radial-gradient(2px 2px at 30% 80%, rgba(255,90,30,0.6), transparent),
    radial-gradient(3px 3px at 38% 88%, rgba(255,110,45,0.9), transparent),
    radial-gradient(2px 2px at 45% 72%, rgba(255,130,55,0.7), transparent),
    radial-gradient(4px 4px at 52% 92%, rgba(255,100,40,0.8), transparent),
    radial-gradient(2px 2px at 60% 78%, rgba(255,120,50,0.6), transparent),
    radial-gradient(3px 3px at 68% 86%, rgba(255,140,60,0.9), transparent),
    radial-gradient(2px 2px at 75% 70%, rgba(255,90,30,0.7), transparent),
    radial-gradient(4px 4px at 82% 94%, rgba(255,110,45,0.8), transparent),
    radial-gradient(2px 2px at 90% 82%, rgba(255,130,55,0.6), transparent),
    radial-gradient(3px 3px at 95% 88%, rgba(255,100,40,0.9), transparent);
  animation: emberrise 10s ease-out infinite;
}

.overlay-embers .overlay-container::after {
  background-image:
    radial-gradient(2px 2px at 5% 78%, rgba(255,100,40,0.7), transparent),
    radial-gradient(3px 3px at 12% 88%, rgba(255,130,55,0.8), transparent),
    radial-gradient(2px 2px at 20% 72%, rgba(255,90,30,0.6), transparent),
    radial-gradient(4px 4px at 28% 92%, rgba(255,120,50,0.9), transparent),
    radial-gradient(2px 2px at 35% 82%, rgba(255,140,60,0.7), transparent),
    radial-gradient(3px 3px at 42% 70%, rgba(255,100,40,0.8), transparent),
    radial-gradient(2px 2px at 50% 90%, rgba(255,110,45,0.6), transparent),
    radial-gradient(4px 4px at 58% 76%, rgba(255,130,55,0.9), transparent),
    radial-gradient(2px 2px at 65% 94%, rgba(255,90,30,0.7), transparent),
    radial-gradient(3px 3px at 72% 84%, rgba(255,120,50,0.8), transparent),
    radial-gradient(2px 2px at 80% 68%, rgba(255,140,60,0.6), transparent),
    radial-gradient(4px 4px at 88% 86%, rgba(255,100,40,0.9), transparent);
  animation: emberrise 14s ease-out infinite 3s;
}

@keyframes emberrise {
  0% {
    transform: translateY(20%) translateX(0);
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100%) translateX(5%);
    opacity: 0;
  }
}

/* Fireflies overlay - floating glowing dots */
.overlay-fireflies .overlay-container::before,
.overlay-fireflies .overlay-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(4px 4px at 10% 30%, rgba(180,255,100,0.9), transparent),
    radial-gradient(3px 3px at 20% 55%, rgba(150,230,80,0.7), transparent),
    radial-gradient(5px 5px at 30% 20%, rgba(200,255,120,0.8), transparent),
    radial-gradient(3px 3px at 40% 70%, rgba(160,240,90,0.6), transparent),
    radial-gradient(4px 4px at 50% 40%, rgba(180,255,100,0.9), transparent),
    radial-gradient(3px 3px at 60% 65%, rgba(150,230,80,0.7), transparent),
    radial-gradient(5px 5px at 70% 25%, rgba(200,255,120,0.8), transparent),
    radial-gradient(3px 3px at 80% 50%, rgba(160,240,90,0.6), transparent),
    radial-gradient(4px 4px at 90% 35%, rgba(180,255,100,0.9), transparent);
  animation: fireflydrift 6s ease-in-out infinite, fireflyglow 2s ease-in-out infinite;
}

.overlay-fireflies .overlay-container::after {
  background-image:
    radial-gradient(3px 3px at 15% 45%, rgba(150,230,80,0.7), transparent),
    radial-gradient(4px 4px at 25% 75%, rgba(180,255,100,0.8), transparent),
    radial-gradient(3px 3px at 35% 35%, rgba(200,255,120,0.6), transparent),
    radial-gradient(5px 5px at 45% 60%, rgba(160,240,90,0.9), transparent),
    radial-gradient(3px 3px at 55% 25%, rgba(150,230,80,0.7), transparent),
    radial-gradient(4px 4px at 65% 80%, rgba(180,255,100,0.8), transparent),
    radial-gradient(3px 3px at 75% 45%, rgba(200,255,120,0.6), transparent),
    radial-gradient(5px 5px at 85% 70%, rgba(160,240,90,0.9), transparent);
  animation: fireflydrift 8s ease-in-out infinite 1s, fireflyglow 2.5s ease-in-out infinite 0.5s;
}

@keyframes fireflydrift {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(15px, -10px);
  }
  50% {
    transform: translate(-10px, 15px);
  }
  75% {
    transform: translate(10px, 10px);
  }
}

@keyframes fireflyglow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ========== TASK LIST VISIBILITY TOGGLES ========== */
.task-list-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}

.task-list-toggle:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.task-list-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

.task-list-toggle span {
  flex: 1;
}

.chat-toggle-handle {
  width: 44px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  margin: 6px auto;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}
.chat-toggle-handle:hover {
  background-color: rgba(255, 255, 255, 0.7);
}
.chat-toggle-handle.collapsed {
  transform: scaleX(0.7);
  background-color: rgba(255, 255, 255, 0.2);
}
.workspace-response.hidden {
  display: none !important;
}

/* ========== WELLBEING CHECK-IN (daily panel) ========== */
.checkin {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* It now sits directly inside .panel, which is a COLUMN FLEXBOX. Without
     flex-shrink:0 it gets compressed and its content clipped — the same trap
     that broke the settings modal's scrolling. */
  flex-shrink: 0;
  /* .panel has no padding of its own; the TIME LOG header below supplies the
     gap under this block via its own 14px top padding. */
  padding: 12px var(--panel-padding) 6px;
}

.checkin-q {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-primary);
}

.checkin-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkin-label {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 1px;
  color: var(--text-primary);
  text-transform: uppercase;
  width: 52px;
  flex-shrink: 0;
}

.checkin-dots { display: flex; gap: 4px; }

.checkin-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(12px * var(--font-scale));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}
.checkin-dot:hover { border-color: var(--accent); }
.checkin-dot.selected { background: var(--active); border-color: var(--active); color: var(--window-bg); font-weight: 600; }
.checkin-dot.energy.selected { background: #ffa94d; border-color: #ffa94d; }

.checkin-note {
  width: 100%;
  box-sizing: border-box;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 8%, var(--window-bg));   /* was a hardcoded dark fill: unreadable under a light theme with dark text */
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
}
.checkin-note:focus { border-color: var(--accent); }
.checkin-note::placeholder { color: var(--text-secondary); }

.checkin-save {
  align-self: flex-start;
  background: var(--active);
  color: var(--window-bg);
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  font-weight: 700;
  cursor: pointer;
}
.checkin-save:hover { filter: brightness(1.1); }
.checkin-save:disabled { opacity: 0.5; cursor: default; }

/* Collapse entirely when empty — it used to reserve 12px (plus the parent's 8px
   flex gap) under the Save button, which is where the dead space came from. */
.checkin-status { font-size: calc(10px * var(--font-scale)); color: var(--text-secondary); }
.checkin-status:empty { display: none; }
.checkin-status.ok  { color: var(--accent); }
.checkin-status.err { color: #e8106a; }

.checkin-summary {
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-primary);
}
.checkin-summary .val { color: var(--accent); font-weight: 600; }
.checkin-summary .val.energy { color: #ffa94d; }

.checkin-note-shown {
  font-size: calc(12px * var(--font-scale));
  color: var(--text-secondary);
  font-style: italic;
  word-wrap: break-word;
}

/* 7-day trend: one column per day, mood + energy bars side by side */
.checkin-trend { display: flex; align-items: flex-end; gap: 5px; }
.checkin-day { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.checkin-bars { display: flex; align-items: flex-end; gap: 2px; height: 32px; }
.checkin-bar { width: 5px; border-radius: 2px; }
.checkin-bar.mood   { background: var(--active); }
.checkin-bar.energy { background: #ffa94d; }
.checkin-bar.empty  { background: rgba(255, 255, 255, 0.08); }
.checkin-dow { font-size: calc(9px * var(--font-scale)); color: var(--text-secondary); }
.checkin-dow.today { color: var(--accent); font-weight: 600; }

.checkin-legend { display: flex; gap: 12px; font-size: calc(10px * var(--font-scale)); color: var(--text-secondary); }
.checkin-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.checkin-legend i.mood   { background: var(--active); }
.checkin-legend i.energy { background: #ffa94d; }

.checkin-edit {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: calc(11px * var(--font-scale));
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.checkin-edit:hover { color: var(--accent); }

/* ── Time-log period filter (week default, arrows, Week/Month/All) ── */
/* Column, not space-between: the panel is too narrow to fit the date navigator
   AND four chips on one line, so space-between + wrap dropped the add button onto
   a ragged third row. Two centred rows instead. */
.tl-filter { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 10px; }
.tl-nav { display: flex; align-items: center; justify-content: center; gap: 6px; }
.tl-label { font-size: calc(12px * var(--font-scale)); color: var(--text, var(--text-primary)); font-weight: 500; min-width: 108px; text-align: center; }
.tl-arrow { background: none; border: none; color: var(--accent); font-size: calc(18px * var(--font-scale)); line-height: 1; cursor: pointer; padding: 2px 8px; }
.tl-arrow:disabled { color: color-mix(in srgb, var(--accent) 25%, transparent); cursor: default; }
.tl-modes { display: flex; align-items: stretch; justify-content: center; gap: 5px; flex-wrap: wrap; }

/* .tl-add is grouped with .tl-mode so the "+" is the same box as the chips —
   it previously had its own padding and a border, which is why it sat a pixel
   or two off and never lined up with Day/Week/Month/All. */
.tl-mode,
.tl-add {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: none;
  color: var(--text, var(--text-primary));
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(11px * var(--font-scale));
  line-height: 1.2;
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  box-sizing: border-box;
}

.tl-mode:hover,
.tl-add:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.tl-mode.sel { background: var(--accent); color: var(--window-bg); font-weight: 600; }

/* The add button sits immediately after "All" and is deliberately narrower —
   it's an action, not a filter, so it reads as a distinct affordance. */
.tl-add {
  color: var(--accent);
  font-weight: 700;
  padding: 4px 9px;
}

/* ── Theming pickers (section / accent / text theme) ── */
.swatch-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 10px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
          border: 1px solid rgba(255,255,255,0.18); box-sizing: border-box; }
.swatch.sel { border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.chip { background: color-mix(in srgb, var(--accent) 10%, transparent); border: none; color: var(--text-primary);
        font-size: calc(11px * var(--font-scale)); border-radius: 6px; padding: 5px 12px; cursor: pointer; }
.chip:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.chip.sel { background: var(--accent); color: var(--window-bg); font-weight: 600; }

/* ── Window chrome follows the theme ─────────────────────────────────────── */
/* The app background is the user's section colour at FULL opacity — a themed
   panel over an untouched black window looked half-finished. */
body { background-color: var(--window-bg, #0D160D); }

/* Global scrollbars, not just the response box. */
* { scrollbar-color: var(--accent) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Input text was pinned to the top of the bar; centre it vertically. */
.workspace-input-bar, .workspace-input-row input, #workspace-input {
  display: flex; align-items: center;
}
#workspace-input { line-height: normal; padding-top: 0; padding-bottom: 0; }

/* The default (empty) message history box was unnecessarily tall. */
.workspace-response { max-height: 220px; }
.workspace-response:empty { min-height: 0; padding: 0; border: none; }

/* ── Manual time-log entry ─────────────────────────────────────────────────
   The "+ Add" chip in the time-log filter bar, and the form behind it. All
   colours derive from --accent so this follows the theme like everything else. */
.tl-add {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(9px * var(--font-scale));
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.tl-add:hover {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

.tl-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.tl-form-row label {
  flex: 0 0 64px;
  color: var(--text-secondary);
  font-size: calc(11px * var(--font-scale));
}

.tl-form-row input,
.tl-form-row select {
  flex: 1;
  background: color-mix(in srgb, var(--accent) 8%, var(--window-bg));   /* was a hardcoded dark fill: unreadable under a light theme with dark text */
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px 8px;
  font-size: calc(11px * var(--font-scale));
  border-radius: 4px;
  outline: none;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
}

.tl-form-row input:focus,
.tl-form-row select:focus {
  border-color: var(--accent);
}

/* Same mask trick as the task form — the native pickers ignore `color`. */
.tl-form-row input[type="date"]::-webkit-calendar-picker-indicator,
.tl-form-row input[type="time"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
  width: 11px;
  height: 11px;
  cursor: pointer;
  background-color: var(--accent);
  -webkit-mask: var(--calendar-glyph) center / contain no-repeat;
  mask: var(--calendar-glyph) center / contain no-repeat;
  opacity: 0.85;
}

.tl-form-total {
  margin-top: 10px;
  color: var(--accent);
  font-size: calc(11px * var(--font-scale));
  font-weight: 500;
}

.tl-form-total.invalid {
  color: var(--text-secondary);
}

/* ── Dr Kuro deep check-in ─────────────────────────────────────────────────
   Rendered from DRK_SCHEMA in workspace.js. All colours derive from --accent. */
.drk-modal {
  max-width: 560px;
  width: 90vw;
}

.drk-modal .modal-content {
  max-height: 62vh;
  overflow-y: auto;
}

.drk-intro {
  color: var(--text-secondary);
  font-size: calc(11px * var(--font-scale));
  margin-bottom: 10px;
}

.drk-cycle-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: calc(11px * var(--font-scale));
  margin-bottom: 12px;
  cursor: pointer;
}

.drk-cycle-toggle input { accent-color: var(--accent); cursor: pointer; }

.drk-group { margin-bottom: 14px; }

.drk-group-title {
  color: var(--accent);
  font-size: calc(10px * var(--font-scale));
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.drk-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.drk-label {
  flex: 0 0 150px;
  color: var(--text-primary);
  font-size: calc(11px * var(--font-scale));
}

.drk-controls {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}

.drk-chip {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--text-secondary);
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(10px * var(--font-scale));
  padding: 3px 9px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.drk-chip:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.drk-chip.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--window-bg);
  font-weight: 700;
}

.drk-num,
.drk-text {
  background: color-mix(in srgb, var(--accent) 8%, var(--window-bg));   /* was a hardcoded dark fill: unreadable under a light theme with dark text */
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 4px 7px;
  font-size: calc(11px * var(--font-scale));
  border-radius: 4px;
  outline: none;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
}

.drk-num { width: 70px; }
.drk-text { flex: 1; min-width: 140px; }

.drk-num:focus,
.drk-text:focus { border-color: var(--accent); }

.checkin-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.checkin-actions .checkin-save,
.checkin-actions .checkin-edit { flex: 1; }

/* Save (or "Update today") takes the width; the Dr Kuro "+" is a compact square
   beside it, same shape as the time log's add button so the two panels match. */
.drk-open {
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: none;
  color: var(--accent);
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(13px * var(--font-scale));
  font-weight: 700;
  line-height: 1;
  padding: 0 12px;
  align-self: stretch;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.drk-open:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ── Square icon buttons (time log "+" and CSV, check-in "+") ───────────────
   Fixed width == height so they're true squares, not rectangles. Both sit in
   the time-log filter bar beside the Day/Week/Month/All chips. */
.tl-icon-btn,
.drk-open {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: none;
  border-radius: 5px;
  color: var(--accent);
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.tl-icon-btn:hover,
.drk-open:hover { background: color-mix(in srgb, var(--accent) 32%, transparent); }

/* The check-in "+" matches the row height beside Save rather than being a
   22px square, so the pair fills the width cleanly. */
.checkin-actions .drk-open { height: auto; align-self: stretch; width: 30px; }

/* Destructive action. Red is NOT the only signal — the label itself changes to
   "Tap again to permanently delete", per the app-wide rule that colour never
   carries meaning on its own. */
.settings-action-btn.danger {
  background: color-mix(in srgb, #ff4757 22%, transparent);
  color: #ff6b6b;
  border: 1px solid color-mix(in srgb, #ff4757 45%, transparent);
}
.settings-action-btn.danger:hover { background: color-mix(in srgb, #ff4757 34%, transparent); }
.settings-action-btn.danger.armed {
  background: #ff4757;
  color: #fff;
  font-weight: 700;
}

/* ── Time-log client type-ahead (searches the shared clients list) ─────────── */
.tl-client-field { position: relative; flex: 1; display: flex; flex-direction: column; }
.tl-client-results {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
  background: var(--window-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.tl-client-results:not(.show) { display: none; }
.tl-client-results li {
  padding: 7px 10px;
  font-family: Calibri, "Segoe UI", Roboto, -apple-system, sans-serif;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-client-results li:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.tl-client-hint {
  margin: 4px 0 0;
  font-size: calc(10px * var(--font-scale));
  color: var(--text-secondary);
  line-height: 1.4;
}
.tl-client-hint:empty { display: none; }

/* ── Ad-hoc reminders countdown widget (above check-in) ─────────────────────── */
.reminders-widget { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.reminder-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 10px 12px; border-radius: 10px;
  color: var(--text-primary, #e9f3ea);
  background: color-mix(in srgb, var(--accent, #8de68d) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #8de68d) 35%, transparent);
}
/* Due state carried by fill + text ("now"), never colour alone (accessibility rule). */
.reminder-item.due {
  font-weight: 600;
  background: color-mix(in srgb, var(--accent, #8de68d) 30%, transparent);
  border-color: color-mix(in srgb, var(--accent, #8de68d) 60%, transparent);
}
.reminder-item .reminder-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-item .reminder-time { font-size: 12px; opacity: .85; white-space: nowrap; }

/* ============================================================================
   LAYOUT VIEWS  (per-device, saved to localStorage — see workspace.js)
   Mirrors the Android app:
     • PC        — the default desktop two-panel layout. No overrides; absence
                   of a data-layout attribute IS the PC view.
     • phone-min — "minimalist": faithful to the Android PHONE HOME — big centred
                   Kuro with a row of round accent-badge section icons directly
                   beneath it; each opens a centred sheet (dim scrim + ← back
                   header), exactly like Android's PhoneSectionSheet.
     • phone-max — "maximalist": a DASHBOARD — Kuro shrunk into the top corner
                   with every section shown at once as cards filling the screen.
   ============================================================================ */

/* Section bar + sheet chrome are hidden unless a phone view turns them on. */
.phone-section-bar { display: none; }
.phone-sheet-backdrop { display: none; }
.phone-sheet-close { display: none; }

/* ===== MINIMALIST — the Android phone home ================================= */
body[data-layout="phone-min"] {
  overflow-x: hidden;
  /* Centre the Kuro + icon-bar group between the fixed header and input bar. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
}
body[data-layout="phone-min"] .menu-bar { display: none; }   /* no desktop chrome */
body[data-layout="phone-min"] header { top: 0; }             /* thin bar at the top */

/* Big centred Kuro (the hero), out of its fixed centring and into the column. */
body[data-layout="phone-min"] .kuro-mascot {
  position: static;
  transform: none;
  margin: 0 auto;
}
body[data-layout="phone-min"] .kuro-avatar { width: 240px; }

/* The side panels are hidden — reachable only through the section bar. */
body[data-layout="phone-min"] main { display: contents; }
body[data-layout="phone-min"] .panel { display: none; }

/* Round accent-badge section icons, sitting directly under Kuro. */
body[data-layout="phone-min"] .phone-section-bar {
  display: flex;
  position: static;
  margin: 4px auto 0;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 340px;
}
body[data-layout="phone-min"] .phone-section-bar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-primary);
  font-size: calc(11px * var(--font-scale));
}
/* The badge: a filled accent circle carrying the cat artwork (same as Android's
   SectionIcon — the badge themes to the accent, the line-art cat stays fixed and
   legible via its own white outline). */
body[data-layout="phone-min"] .phone-section-bar .ps-glyph {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-layout="phone-min"] .phone-section-bar .ps-glyph img {
  width: 44px;         /* inset so the accent reads as a ring, like Android's 46/58 */
  height: 44px;
  object-fit: contain;
}

/* ===== MAXIMALIST — the dashboard ========================================= */
body[data-layout="phone-max"] {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 48px 0 96px;               /* clear the fixed header + input bar */
}
body[data-layout="phone-max"] .menu-bar { display: none; }
body[data-layout="phone-max"] header { top: 0; }

/* Kuro shrinks into the top-right corner so the sections own the screen. */
body[data-layout="phone-max"] .kuro-mascot {
  position: fixed;
  top: 44px;
  right: 8px;
  left: auto;
  transform: none;
  margin: 0;
  width: 76px;
  z-index: 6;
}
body[data-layout="phone-max"] .kuro-avatar { width: 76px; }

/* Every panel becomes a full-width card; they stack down the screen. */
body[data-layout="phone-max"] main { display: block; }
body[data-layout="phone-max"] .panel,
body[data-layout="phone-max"] .panel:first-of-type,
body[data-layout="phone-max"] .panel:last-of-type {
  position: static;
  left: auto;
  right: auto;
  width: calc(100% - 24px);
  max-width: 560px;
  height: auto;
  max-height: none;
  margin: 12px auto 0;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
body[data-layout="phone-max"] .daily-panel-scroll { overflow: visible; }
/* Give the first card room so it doesn't tuck under the little corner Kuro. */
body[data-layout="phone-max"] main > .panel:first-of-type { margin-top: 40px; }
body[data-layout="phone-max"] .workspace-input-bar {
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(560px, 100% - 24px);
}

/* ===== Section sheets (minimalist only) =================================== */
/* Dim scrim behind an open sheet; tap to close (like Android's scrim). */
body[data-layout="phone-min"][data-sheet] .phone-sheet-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}
/* Floating ← back control, top-left of the sheet. */
body[data-layout="phone-min"][data-sheet] .phone-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 26px;
  left: 12px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--panel-bg);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 22px;
  cursor: pointer;
  z-index: 1002;
}
/* The targeted panel becomes a centred opaque sheet. Rules come AFTER the
   `.panel { display:none }` above, so at equal specificity they win. */
body[data-layout="phone-min"][data-sheet="today"] .daily-panel,
body[data-layout="phone-min"][data-sheet="checkin"] main > .panel:not(.daily-panel),
body[data-layout="phone-min"][data-sheet="timelog"] main > .panel:not(.daily-panel) {
  display: flex;
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  width: 92vw;
  max-width: 460px;
  height: auto;
  max-height: calc(100dvh - 130px);
  margin: 0;
  z-index: 1001;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}

/* While a section sheet is open, hide the icon bar behind the scrim (the sheet
   is the focus, like Android's full-screen section). */
body[data-layout="phone-min"][data-sheet] .phone-section-bar { visibility: hidden; }