/* bebert skin — the warm brand theme over the chat-home shell.
   Loads AFTER chathome.css and wins the cascade: bebert is warm cream in BOTH
   color schemes (overrides the dark default and the light @media block).
   Palette = the brand set from styles.css: cream / persimmon / aubergine. */
:root {
  --ch-bg: #eef0e6;
  --ch-panel-bg: #e3ece0;
  --ch-chat-bg: #f2f5ec;
  --ch-surface: #ffffff;
  --ch-ink: #2a1b3d;
  --ch-muted: #83758f;
  --ch-line: rgba(42, 27, 61, 0.12);
  --ch-divider-line: rgba(42, 27, 61, 0.16);
  --ch-grip: rgba(42, 27, 61, 0.28);
  --ch-grip-strong: rgba(42, 27, 61, 0.5);
  --ch-accent: #3f7d5a;
}

/* warm depth: the whiteboard is a near-white one step toward the chat cream
   (#f2f5ec) — same warm family, clearly distinct so the two thirds read apart. */
.ch-panel { background: #fbfcf7; }

/* bubbles: peach gradient for you, soft white for the AI */
.ch-bubble.you {
  background: linear-gradient(135deg, #5a9d76, #3f7d5a);
  box-shadow: 0 3px 10px rgba(255, 110, 77, 0.28);
}
.ch-bubble.ai { box-shadow: 0 2px 8px rgba(42, 27, 61, 0.06); }

/* composer */
.ch-input { box-shadow: inset 0 1px 3px rgba(42, 27, 61, 0.05); }
.ch-input:focus { border-color: #5a9d76; box-shadow: 0 0 0 3px rgba(255, 110, 77, 0.15); }
.ch-send {
  background: linear-gradient(135deg, #5a9d76, #3f7d5a);
  box-shadow: 0 3px 10px rgba(255, 110, 77, 0.3);
}

/* the fun hello — greets the upper third on load; doubles as the warm all-clear */
.ch-hello {
  min-height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 7px; padding: 18px 24px; animation: ch-pop 0.25s ease;
}
.ch-hello-face { font-size: 46px; line-height: 1; animation: ch-hello-bob 3.2s ease-in-out infinite; }
.ch-hello-h { margin: 4px 0 0; font-size: 25px; font-weight: 650; letter-spacing: -0.02em; color: var(--ch-ink); }
.ch-hello-sub { margin: 0; max-width: 340px; color: var(--ch-muted); font-size: 13.5px; line-height: 1.5; }
@keyframes ch-hello-bob { 0%, 100% { transform: translateY(1px) rotate(-5deg); } 50% { transform: translateY(-6px) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .ch-hello-face { animation: none; } }

/* surfaces that assumed a dark backdrop */
.ch-bar { background: rgba(42, 27, 61, 0.08); }
.ch-toast, .ch-menu-sheet { box-shadow: 0 14px 32px rgba(74, 27, 12, 0.18); }
.ch-menu-backdrop { background: rgba(42, 27, 61, 0.25); }
.ch-sandbox-stage { background: #fbfcf7; }

/* ── the calendar (daybook) whiteboard skin ──────────────────────────────────
   The daybook has its OWN --db-* token system this skin didn't cover, so the
   classic chat-home mount pins it to data-theme="light" (book.js `theme` opt) and
   we paint THAT to MATCH the rest of the whiteboard (.ch-panel #fbfcf7) — near-white,
   one step toward the chat cream, so the whole top third reads as one surface that's
   distinct from the chat below (an earlier pass wrongly matched it to the chat cream).
   Scoped to [data-theme="light"], which only the classic mount sets; world mode drives
   #daybook's data-theme per game-skin and never uses "light", so it's untouched. */
#daybook[data-theme="light"] {
  --db-paper: #fbfcf7;        /* = .ch-panel — the whiteboard near-white */
  --db-paper-sunk: #f8f3ea;   /* closed / off-hours — a hair deeper, still near-white (was cream #e6ecdd, which left the calendar BODY reading cream while only the chrome went near-white) */
  --db-ink: #2a1b3d;          /* = --ch-ink (aubergine) */
  --db-ink-soft: #83758f;     /* = --ch-muted */
  --db-chrome: #fbfcf7;       /* the slim date bar blends into the paper */
  --db-rule: #e2e9dd;         /* warm ruling lines */
  --db-open: #ffffff;         /* open slots stay the brightest surface */
  --db-open-edge: #dfe7dd;
  --db-open-glow: rgba(255, 110, 77, 0.10);
  --db-open-ink: #83758f;
}
/* the chrome / slim-nav was drawn for a DARK bar (white text + pale buttons); on
   cream it needs warm ink. Scoped so only the classic bebert book is affected. */
#daybook[data-theme="light"] .db-chrome { color: var(--db-ink); }
#daybook[data-theme="light"] .db-daydate { color: var(--db-ink); }
#daybook[data-theme="light"] .db-slimbtn {
  color: var(--db-ink-soft);
  border-color: var(--db-rule);
  background: rgba(42, 27, 61, 0.04);
}
#daybook[data-theme="light"] .db-slimbtn:hover { background: rgba(42, 27, 61, 0.09); }