/* ══════════════════════════════════════════════════════════════════════════
   CX POLISH — v1
   Load LAST, after style.css / cx-citations.css / cx-upgrades.css.

   Three jobs:
     A. Welcome screen matches the design (emblem, accent greeting, chips)
     B. Every animation runs on the compositor (transform + opacity only)
     C. Icons are one consistent stroke family, no Font Awesome
   ══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   0. ICON SYSTEM
   One optical weight everywhere. Stroke scales with the box,
   never with the font, so icons stay crisp at any size.
   ────────────────────────────────────────────────────────────── */
.cx-ico {
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.cx-ico-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Hamburger ⇄ X — three bars, morphed with transform only.
   Zero paint: no box-shadow, no width/height, no border-radius animation. */
.cx-burger {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
  pointer-events: none;
}
.cx-burger > span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: 50% 50%;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1),
              opacity   .16s linear;
}
.cx-burger > span:nth-child(1) { top: 0; }
.cx-burger > span:nth-child(2) { top: 5px; }
.cx-burger > span:nth-child(3) { top: 10px; }

/* app.js already sets .active on #sidebar-toggle — we key off that,
   so the old .fa-bars/.fa-xmark toggles stay harmless no-ops. */
#sidebar-toggle.active .cx-burger > span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
#sidebar-toggle.active .cx-burger > span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
#sidebar-toggle.active .cx-burger > span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ──────────────────────────────────────────────────────────────
   1. WELCOME SCREEN
   ────────────────────────────────────────────────────────────── */
.welcome {
  /* Center the block in the scroll area instead of pinning it to the top —
     this is what stops the emblem colliding with the composer on short
     viewports (the overlap in the current build). */
  justify-content: center;
  min-height: 100%;
  padding: 32px 20px 24px;
  gap: 0;
  box-sizing: border-box;
}

/* The glow was `background: var(--accent)` on a 500×360 box — a hard cyan
   rectangle, not a glow. A radial gradient costs the same to paint and
   actually falls off at the edges. No blur filter needed. */
.welcome-glow {
  /* style.css hides this below 700px because the old version was expensive.
     A radial gradient is a single cheap paint with no blur pass, so it can
     stay on at every width. */
  display: block;
  top: -40px;
  width: min(460px, 90vw);
  height: 320px;
  background: radial-gradient(
    circle at 50% 42%,
    var(--accent-glow) 0%,
    var(--accent-soft) 38%,
    transparent 68%
  );
  opacity: .9 !important;
}

/* Emblem — the hero. Rounded tile with a soft cyan bloom, as in the design. */
.welcome-logo { margin-bottom: 26px; }
.welcome-emblem {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  /* One drop-shadow, not a stack. Each extra shadow is another blur pass. */
  filter: drop-shadow(0 0 28px var(--accent-glow));
}

/* Greeting: near-solid text with a single accent word — the gradient-clipped
   full heading in the current build washes out and fails contrast on light. */
.welcome-heading {
  font-size: clamp(1.6rem, 6.4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin-bottom: 10px;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--text-1);
  text-wrap: balance;
}
.welcome-accent { color: var(--accent); }

.welcome-sub {
  font-family: var(--font-brand);
  font-size: clamp(.95rem, 3.6vw, 1.06rem);
  font-weight: 500;
  color: var(--text-2);
  max-width: 30ch;
  margin-bottom: 26px;
  line-height: 1.45;
  text-wrap: balance;
}

/* ── Suggestion chips ─────────────────────────────────────────
   Centered pill flow. `gap` does the spacing, so nothing can overlap
   however the labels wrap. */
.welcome-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  position: relative;
  z-index: 1;
  /* Inherits the .welcome > * stagger; land just after the subtitle. */
  animation-delay: .26s !important;
}

.welcome-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-full, 999px);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  font-family: var(--font-brand);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* Named properties only. `transition: all` re-evaluates every animatable
     property on the element each frame — including layout ones. */
  transition: background-color .18s var(--ease),
              border-color     .18s var(--ease),
              color            .18s var(--ease),
              transform        .18s var(--ease-spring);
}
.welcome-chip .cx-ico { color: var(--text-4); transition: color .18s var(--ease); }

@media (hover: hover) {
  .welcome-chip:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
  }
  .welcome-chip:hover .cx-ico { color: var(--accent); }
}
.welcome-chip:active { transform: scale(.96); }
.welcome-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────
   2. GPU BUDGET
   ────────────────────────────────────────────────────────────── */

/* 2a. Kill the box-shadow pulses.
   micPulse / stopPulse / respondPulse animate box-shadow spread on an
   infinite loop. box-shadow is not compositable — every frame repaints the
   button AND everything beneath it. Same look, rebuilt as a pseudo-element
   ring that only scales and fades. */
.mic-btn.mic-recording,
.send-btn.stop,
.send-btn.responding {
  animation: none !important;
  box-shadow: none !important;
  position: relative;
  isolation: isolate;
}
.mic-btn.mic-recording::after,
.send-btn.stop::after,
.send-btn.responding::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: currentColor;
  opacity: .35;
  animation: cxRing 1.5s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes cxRing {
  0%   { transform: scale(1);    opacity: .35; }
  70%  { transform: scale(1.85); opacity: 0;   }
  100% { transform: scale(1.85); opacity: 0;   }
}

/* 2b. Release the layers.
   `will-change` is a promise to the browser, not a speed-up — it pins a
   compositor layer (and its VRAM) for the life of the element. Nine of these
   sat permanently on idle nodes. Promote on interaction, release after. */
.welcome-card,
.chat-scroll,
.messages,
.msg,
.sidebar {
  will-change: auto;
}
@media (hover: hover) {
  .welcome-card:hover { will-change: transform; }
}

/* 2c. Cap the compositing cost of long transcripts. Offscreen messages skip
   layout, paint and compositing entirely. */
.messages > .msg {
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}

/* 2d. Nothing animates while it can't be seen. */
.cx-paused *,
.cx-offscreen * {
  animation-play-state: paused !important;
}

/* 2e. Backdrop-filter is the single most expensive property in the sheet.
   Keep it on the topbar (small, fixed, always composited) and drop it on
   large or scrolling surfaces, where it forces a full-viewport re-blur. */
@media (max-width: 768px) {
  .modal-overlay,
  .sidebar {
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

/* ──────────────────────────────────────────────────────────────
   3. LAYOUT SAFETY — no overlap, no clipped edges
   ────────────────────────────────────────────────────────────── */

/* Notch / home-indicator safe areas. The composer sat under the iOS home bar. */
.composer-area {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.topbar {
  padding-top: env(safe-area-inset-top);
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
}

/* The scroll area owns the space between topbar and composer, so the welcome
   block can never grow underneath either. */
.chat-scroll {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Touch targets: 44px minimum, per WCAG 2.2 / HIG. */
.topbar-icon {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px) {
  .welcome { padding: 20px 16px 16px; }
  .welcome-emblem { width: 76px; height: 76px; border-radius: 21px; }
  .welcome-logo { margin-bottom: 20px; }
  .welcome-chip { padding: 10px 15px; font-size: .87rem; }
  .welcome-chips { gap: 8px; }
  /* Glow stays — it's now a cheap gradient, not the old blurred rectangle. */
  .welcome-glow { display: block; height: 260px; opacity: .75 !important; }
}

/* ──────────────────────────────────────────────────────────────
   4. MOTION PREFERENCES
   ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .welcome > * { opacity: 1 !important; transform: none !important; }
  .welcome-glow { display: none; }
}