/* =============================================================================
   Ela Web (SvelteKit) — app-shell globals
   -----------------------------------------------------------------------------
   Rules that must be global because they bridge the layout and page slots:
   the per-area accent palettes are set on `.app__main[data-area]` (a layout
   element) but style page/slot content (the composer, chat bubbles). Ported
   verbatim from web-prototype/chat.html.
   ============================================================================= */

/* ---------- Area accents — one palette per conversation context ---------- */
.app__main[data-area="love"] {
  --area-accent: var(--fg-topic-dating);
  --chat-bubble-bg: var(--color-red-100);
  --chat-typing-color: var(--area-accent);
}
.app__main[data-area="love"] .input--composer {
  --fg-brand:           var(--fg-topic-dating);
  --stroke-brand:       var(--fg-topic-dating);
  --bg-brand-primary:   var(--fg-topic-dating);
  --bg-brand-secondary: var(--color-red-100);
  --bg-brand-light:     var(--color-red-50);
}
.app__main[data-area="health"] {
  --area-accent: var(--fg-topic-health);
  --chat-bubble-bg: var(--color-soft-green-100);
  --chat-typing-color: var(--area-accent);
}
.app__main[data-area="health"] .input--composer {
  --fg-brand:           var(--fg-topic-health);
  --stroke-brand:       var(--fg-topic-health);
  --bg-brand-primary:   var(--fg-topic-health);
  --bg-brand-secondary: var(--color-soft-green-100);
  --bg-brand-light:     var(--color-soft-green-50);
}
.app__main[data-area="business"] {
  --area-accent: var(--fg-topic-business);
  --chat-bubble-bg: var(--color-blue-100);
  --chat-typing-color: var(--area-accent);
}
.app__main[data-area="business"] .input--composer {
  --fg-brand:           var(--fg-topic-business);
  --stroke-brand:       var(--fg-topic-business);
  --bg-brand-primary:   var(--fg-topic-business);
  --bg-brand-secondary: var(--color-blue-100);
  --bg-brand-light:     var(--color-blue-50);
}

/* ---------- Page → chat: the composer carries over ----------
   Sending from Home or an area page opens the chat. (app)/+layout.svelte runs
   that navigation as a view transition: the composer glides from where it
   sat into the chat's footer while the rest of the page crossfades. Only the
   page's main composer carries the name (a name must be unique on the page),
   which is why the check-in and quiz composers, nested deeper, don't. */
.app__footer > .input--composer,
.home-ask > .input--composer {
  view-transition-name: ela-composer;
}
::view-transition-group(ela-composer) {
  animation-duration: var(--dur-panel);
  animation-timing-function: var(--ease-in-out);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--dur-base);
}
/* Reduced motion: gentler, not none. The page still crossfades; the composer
   just fades with it instead of travelling. */
@media (prefers-reduced-motion: reduce) {
  .app__footer > .input--composer,
  .home-ask > .input--composer {
    view-transition-name: none;
  }
}