/* peachy skin — the warm brand theme over the chat-home shell.
   Loads AFTER chathome.css and wins the cascade: peachy 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: #fff3e4;
  --ch-panel-bg: #ffe9d2;
  --ch-chat-bg: #fff6e8;
  --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: #ff6e4d;
}

/* warm depth: the space glows peach, the chat sits on cream */
.ch-panel { background: linear-gradient(180deg, #ffe4c7, #ffefdc); }

/* bubbles: peach gradient for you, soft white for the AI */
.ch-bubble.you {
  background: linear-gradient(135deg, #ff8a5c, #ff5a3c);
  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: #ff8a5c; box-shadow: 0 0 0 3px rgba(255, 110, 77, 0.15); }
.ch-send {
  background: linear-gradient(135deg, #ff8a5c, #ff5a3c);
  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: rgba(255, 110, 77, 0.06); }