/* =============================================================================
   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 colours ----------
   Health is green wherever it shows, the green of its mark; Love keeps the
   red (Elijah, 2 Nov). Health's topic red (--fg-topic-health) was too close
   to Love's to tell them apart. Business keeps its blue. */
:root {
  --fg-area-love:     var(--fg-topic-dating);
  --fg-area-health:   var(--color-soft-green-600);
  --fg-area-business: var(--fg-topic-business);
}

/* ---------- The keyboard on iPhone ----------
   With the keyboard open, the shell is the height of what's left above it
   (--app-h, set by $lib/keyboard.js), so the top bar stays on screen and
   the chat shrinks. Without it, web.css's 100dvh as before. */
.app { height: var(--app-h, 100dvh); }

/* ---------- Page entrance — the area pages ----------
   Love, Health and Business come in one piece after another on every load,
   as Home does (Elijah, 2 Nov): the mark runs its own motion, then Ela's
   greeting, the score card, the three cards left to right, Business's links,
   the starters and the composer, each rising as it fades in. `--i` is a
   piece's place in that order, 120ms apart; `--j` ripples a row 60ms
   apart, Home's rhythm. `backwards`, not `both`, so nothing keeps a
   transform once it's in (it would trap the composer's fixed-position menus,
   and the starters are sticky on desktop). */
.page-enter {
  animation: page-enter 400ms var(--ease-out) backwards;
  animation-delay: calc(300ms + var(--i, 0) * 120ms + var(--j, 0) * 60ms);
}
@keyframes page-enter { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .page-enter { animation: none; } }

/* ---------- Composer glow — Siri's edge light, inside, once ----------
   When the page loads (a reload too) and the composer rises in, light comes
   up inside its edge, runs once around it with a bright point travelling
   along the stroke, and fades for good: the light that ran around the
   iPhone's screen when Siri woke, before it moved into the Dynamic Island
   (Elijah, 3 Nov). In Ela's greens, the logo's ramp. It lies over the
   composer, clipped to its shape, and lets clicks through.
     ::before  the stroke: a turning gradient masked to a 2px ring, dark
               at its leading point and paling behind it, so it shimmers.
     ::after   the glow inside: the same turn, fading in from the edges.
   It starts with the composer's own entrance (`--enter-delay`, set on the
   host by the page's entrance class) and is gone within a second, so Home
   is all in under 2s. Pages ask $lib/welcome.js (takeComposerGlow) whether
   to show it, so it plays once per load, not on every return to Home. */
@property --glow-turn { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.composer-glow-host { position: relative; }
.composer-glow {
  position: absolute; inset: 0; overflow: hidden; border-radius: var(--br-ll);
  pointer-events: none; opacity: 0;
  animation: composer-glow-turn 1s var(--ease-in-out), composer-glow-fade 1s var(--ease-in-out);
  animation-delay: var(--enter-delay, 0ms);
}
.composer-glow::before,
.composer-glow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.composer-glow::before {
  padding: 2px;
  background: conic-gradient(from var(--glow-turn),
    var(--color-soft-green-200),
    var(--color-soft-green-300) 200deg,
    var(--color-soft-green-500) 290deg,
    var(--color-soft-green-800) 345deg,
    var(--color-soft-green-300) 355deg,
    var(--color-soft-green-200));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.composer-glow::after {
  opacity: 0.6;
  background: conic-gradient(from var(--glow-turn),
    var(--color-soft-green-100),
    var(--color-soft-green-300) 120deg,
    var(--color-soft-green-500) 300deg,
    var(--color-soft-green-100));
  -webkit-mask:
    linear-gradient(to right, #000, transparent 32px, transparent calc(100% - 32px), #000),
    linear-gradient(to bottom, #000, transparent 12px, transparent calc(100% - 12px), #000);
          mask:
    linear-gradient(to right, #000, transparent 32px, transparent calc(100% - 32px), #000),
    linear-gradient(to bottom, #000, transparent 12px, transparent calc(100% - 12px), #000);
}
@keyframes composer-glow-turn { to { --glow-turn: 360deg; } }
@keyframes composer-glow-fade { 25%, 65% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .composer-glow { animation: none; } }

/* ---------- 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-area-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-area-health);
  --stroke-brand:       var(--fg-area-health);
  --bg-brand-primary:   var(--fg-area-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;
  }
}

/* ---------- Touch targets (DES-402) ----------
   On a touch screen every small control gets a hit area of at least 44px
   each way (Apple's minimum) without changing how it looks: an invisible
   ::before, centred on the control. A mouse keeps the drawn size. The
   controls that are already positioned (the top bar's buttons, the carousel
   arrows, the photo edit) only take the ::before.
   Left out on purpose: the chat-history delete × (a bigger target beside the
   row it deletes invites mistakes) and the slider's stop labels (they sit on
   the track the thumb is dragged along). */
@media (pointer: coarse) {
  :is(.try-icon-btn, .try-chip, .try-nav__item, .tabs__tab, .btn--s, .btn--m,
      .input__upload, .input__send, .get-app-card__close, .app__brand-link,
      .app__icon-btn, .app__get-app, .listen, .store-badge,
      .profile-hero__name-edit, .social-link, .score-hero__exit,
      .otp-card__resend, .signin__forgot, .btn-signup) {
    position: relative;
  }
  :is(.try-icon-btn, .try-chip, .try-nav__item, .tabs__tab, .btn--s, .btn--m,
      .input__upload, .input__send, .get-app-card__close, .app__brand-link,
      .app__icon-btn, .app__get-app, .listen, .store-badge,
      .profile-hero__name-edit, .social-link, .score-hero__exit,
      .otp-card__resend, .signin__forgot, .btn-signup,
      .app__topbar-btn, .app__topbar-avatar, [class*="carousel__arrow"],
      .profile-hero__photo-edit)::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: max(100%, 44px); height: max(100%, 44px);
    transform: translate(-50%, -50%);
    z-index: 1;   /* above a later positioned layer (the /try hero) that would take the edge */
  }
}