/* ══════════════════════════════════════════════════════════════════════════
   ASAS-AI — Aurora + Finite-Element interface   (v4.18.0)
   Pairs with assets/js/asas-aurora.js. Loaded LAST so it layers over the
   theme rules. Selectors use #asas-app.asas-fx-on[data-theme] (2,2,0) to
   out-rank the theme's #asas-app[data-theme] #x rules (2,1,0).

   Readability contract: this file never changes a response bubble, table,
   diagram card or code block — those keep their opaque backgrounds. Only
   the app shell (background, sidebar, command bar, composer) becomes glass.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Layering ─────────────────────────────────────────────────────── */
#asas-bgfx {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; contain: strict;
  --mx: -999px; --my: -999px;
}
#asas-bgfx > div { position: absolute; inset: 0; }
#asas-bgfx svg { width: 100%; height: 100%; display: block; }
#asas-app.asas-fx-on > #asas-sidebar,
#asas-app.asas-fx-on > #asas-main { position: relative; z-index: 1; }

/* ── 2. Base: theme colour fading gradually to black ─────────────────── */
.asas-fx-base {
  background: linear-gradient(180deg, #0a0f1e 0%, #05070d 60%, #010204 100%);   /* fallback */
  background:
    radial-gradient(120% 70% at 70% 0%, color-mix(in srgb, var(--bg, #0a0f1e) 100%, transparent) 0%, transparent 60%),
    linear-gradient(180deg,
      var(--bg, #0a0f1e) 0%,
      color-mix(in srgb, var(--bg, #0a0f1e) 62%, #000) 45%,
      color-mix(in srgb, var(--bg, #0a0f1e) 22%, #000) 78%,
      #010204 100%);
}

/* ── 3. Aurora bands ─────────────────────────────────────────────────── */
.asas-fx-aurora { opacity: .85; }
.asas-fx-aurora i {
  position: absolute; display: block; border-radius: 50%;
  mix-blend-mode: screen; will-change: transform;
  animation: asas-aurora-drift 38s ease-in-out infinite alternate;
}
.asas-fx-aurora .a1 { width: 70vw; height: 30vh; left: -10vw; top: 4vh; transform: rotate(-9deg);
  background: radial-gradient(closest-side, rgba(20,184,166,.42), rgba(20,184,166,.14) 55%, transparent); }
.asas-fx-aurora .a2 { width: 60vw; height: 26vh; left: 22vw; top: 26vh; transform: rotate(7deg);
  background: radial-gradient(closest-side, rgba(139,92,246,.36), rgba(139,92,246,.12) 55%, transparent);
  animation-duration: 46s; animation-delay: -12s; }
.asas-fx-aurora .a3 { width: 52vw; height: 34vh; right: -12vw; top: 28vh; transform: rotate(-14deg);
  background: radial-gradient(closest-side, rgba(212,168,71,.30), rgba(212,168,71,.09) 55%, transparent);
  animation-duration: 52s; animation-delay: -24s; }
.asas-fx-aurora .a4 { width: 70vw; height: 24vh; left: 10vw; bottom: -10vh; transform: rotate(4deg);
  background: radial-gradient(closest-side, rgba(59,130,246,.22), transparent 70%);
  animation-duration: 60s; animation-delay: -6s; }
@keyframes asas-aurora-drift {
  0%   { translate: 0 0;        scale: 1; }
  50%  { translate: 4vw 2vh;    scale: 1.08; }
  100% { translate: -3vw 3vh;   scale: .96; }
}

/* ── 4. Finite-element mesh, fading gradually to transparent ─────────── */
.asas-fx-mesh {
  color: #8fb3e6; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 58% 80% at 81% 75%, #000 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.18) 50%, transparent 72%);
          mask-image: radial-gradient(ellipse 58% 80% at 81% 75%, #000 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.18) 50%, transparent 72%);
}
.asas-fx-mesh .fx-edges { stroke-opacity: .55; }
.asas-fx-mesh .fx-nodes { opacity: .7; }

/* Cursor glow: a brighter copy of the mesh, revealed only near the pointer */
.asas-fx-glow {
  color: #f0cf7a; opacity: .9;
  -webkit-mask-image: radial-gradient(230px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
          mask-image: radial-gradient(230px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.35) 45%, transparent 75%);
}
.asas-fx-glow .fx-edges { stroke-opacity: .55; }

.asas-fx-vignette {
  background:
    radial-gradient(140% 100% at 50% 0%, transparent 55%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35) 100%);
}

/* ── 5. Shell becomes glass (content surfaces untouched) ─────────────── */
#asas-app.asas-fx-on[data-theme] #asas-main,
#asas-app.asas-fx-on[data-theme] #asas-feed-wrap,
#asas-app.asas-fx-on #asas-main,
#asas-app.asas-fx-on #asas-feed-wrap,
#asas-app.asas-fx-on #asas-welcome { background: transparent !important; }

#asas-app.asas-fx-on[data-theme] #asas-sidebar,
#asas-app.asas-fx-on #asas-sidebar {
  background: rgba(13,20,40,.82) !important;           /* fallback */
  background: color-mix(in srgb, var(--sb, #0d1428) 70%, transparent) !important;
  background-image: none !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-right: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 1px 0 0 rgba(212,168,71,.06), 12px 0 40px -24px rgba(0,0,0,.6);
}
#asas-app.asas-fx-on[data-theme] #asas-composer,
#asas-app.asas-fx-on #asas-composer {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sb, #0d1428) 45%, transparent), color-mix(in srgb, var(--sb, #0d1428) 78%, transparent)) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,.07) !important;
}
#asas-app.asas-fx-on[data-theme] #asas-topbar,
#asas-app.asas-fx-on #asas-topbar {
  background: color-mix(in srgb, var(--sb, #0d1428) 72%, transparent) !important;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
#asas-app.asas-fx-on:not([data-theme^="light-"]) #asas-command-bar {
  background: linear-gradient(180deg, rgba(14,20,36,.58), rgba(9,13,24,.70));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(212,168,71,.08);
}
/* A thin aurora sheen along the top of the command console */
#asas-app.asas-fx-on #asas-command-bar::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(20,184,166,.6), rgba(139,92,246,.55), rgba(212,168,71,.6), transparent);
  opacity: .7;
}


/* ── 5b. Reading card for AI responses ───────────────────────────────
   Themes draw AI responses with NO card (transparent), which would put the
   mesh and aurora directly behind response text. With the new background
   on, responses sit on a frosted card instead: 88% opaque plus blur, so
   anything behind dissolves into a smooth tint and the text reads exactly
   as before. Content inside (tables, diagrams, code) is untouched.        */
#asas-app.asas-fx-on[data-theme] .asas-msg.ai .asas-bubble,
#asas-app.asas-fx-on .asas-msg.ai .asas-bubble {
  background: rgba(10,15,30,.95) !important;          /* fallback: browsers without color-mix() */
  background: color-mix(in srgb, var(--bg, #0a0f1e) 94%, transparent) !important;
  /* No backdrop-filter here on purpose: a long conversation would carry one
     live blur layer per reply and cost scrolling performance. At 94% opacity
     the card alone keeps the background out of the text (measured).       */
  border: 1px solid rgba(255,255,255,.07) !important;
  border-left: 2px solid rgba(212,168,71,.55) !important;
  border-radius: 4px 14px 14px 14px !important;
  padding: 14px 18px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -22px rgba(0,0,0,.8) !important;
}
#asas-app.asas-fx-on[data-theme^="light-"] .asas-msg.ai .asas-bubble {
  background: rgba(248,249,251,.96) !important;       /* fallback */
  background: color-mix(in srgb, var(--bg, #f8f9fb) 95%, transparent) !important;
  border-color: rgba(0,0,0,.08) !important;
  border-left-color: rgba(184,134,11,.6) !important;
  box-shadow: 0 12px 30px -22px rgba(0,0,0,.35) !important;
}

/* ── 6. Glow under the cursor on interactive surfaces ────────────────── */
#asas-app.asas-fx-on :is(.asas-cbc, .asas-cl-pill, .asas-cbtab, .asas-history-item, .asas-new-btn,
  #asas-search-btn, #asas-bg-btn, .asas-profile-pill, #asas-input-wrap, .asas-dl-btn, .asas-vis-btn,
  #asas-set-project-btn, #asas-create-folder-btn, .asas-cb-search) {
  position: relative; isolation: isolate;
}
#asas-app.asas-fx-on :is(.asas-cbc, .asas-cl-pill, .asas-cbtab, .asas-history-item, .asas-new-btn,
  #asas-search-btn, #asas-bg-btn, .asas-profile-pill, #asas-input-wrap, .asas-dl-btn, .asas-vis-btn,
  #asas-set-project-btn, #asas-create-folder-btn, .asas-cb-search)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(150px circle at var(--gx, -300px) var(--gy, -300px),
              color-mix(in srgb, var(--glow, #D4A847) 30%, transparent), transparent 70%);
  opacity: 0; transition: opacity .25s ease;
}
#asas-app.asas-fx-on :is(.asas-cbc, .asas-cl-pill, .asas-cbtab, .asas-history-item, .asas-new-btn,
  #asas-search-btn, #asas-bg-btn, .asas-profile-pill, #asas-input-wrap, .asas-dl-btn, .asas-vis-btn,
  #asas-set-project-btn, #asas-create-folder-btn, .asas-cb-search):hover::before { opacity: 1; }

#asas-app.asas-fx-on .asas-cbc,
#asas-app.asas-fx-on .asas-cbtab      { --glow: var(--cl-accent, #D4A847); }
#asas-app.asas-fx-on .asas-cl-pill    { --glow: var(--pill-accent, #D4A847); }
#asas-app.asas-fx-on .asas-cbc:hover {
  border-color: color-mix(in srgb, var(--glow) 60%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--glow) 30%, transparent),
              0 12px 30px -14px color-mix(in srgb, var(--glow) 85%, transparent);
}
#asas-app.asas-fx-on .asas-history-item:hover,
#asas-app.asas-fx-on .asas-new-btn:hover,
#asas-app.asas-fx-on #asas-search-btn:hover,
#asas-app.asas-fx-on #asas-bg-btn:hover,
#asas-app.asas-fx-on #asas-set-project-btn:hover {
  box-shadow: 0 0 0 1px rgba(212,168,71,.28), 0 8px 22px -12px rgba(212,168,71,.7);
}
#asas-app.asas-fx-on #asas-input-wrap:focus-within {
  box-shadow: 0 0 0 1px rgba(212,168,71,.35), 0 0 0 4px rgba(212,168,71,.08),
              0 14px 34px -16px rgba(20,184,166,.45), 0 14px 34px -18px rgba(139,92,246,.45);
}

/* ── 7. Glass icon tiles ─────────────────────────────────────────────── */
.asas-ico { display: block; flex-shrink: 0; }
#asas-command-bar .asas-cl-ico {
  width: 24px; height: 24px; border-radius: 8px; display: inline-grid; place-items: center;
  color: color-mix(in srgb, var(--pill-accent) 30%, #fff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--pill-accent) 42%, transparent),
                                      color-mix(in srgb, var(--pill-accent) 10%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px color-mix(in srgb, var(--pill-accent) 50%, transparent),
              0 4px 12px -5px color-mix(in srgb, var(--pill-accent) 80%, transparent);
  font-size: 0;
}
#asas-command-bar .asas-cbt-ico {
  width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center;
  margin-right: 6px; vertical-align: -5px; color: var(--ico, #D4A847);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ico, #D4A847) 26%, transparent),
                                      color-mix(in srgb, var(--ico, #D4A847) 6%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px color-mix(in srgb, var(--ico, #D4A847) 35%, transparent);
}
#asas-command-bar .asas-cbtab .asas-cbt-dot { display: none; }
#asas-command-bar .asas-cbc-icon {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  color: var(--ico, #D4A847);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ico, #D4A847) 32%, transparent),
                                      color-mix(in srgb, var(--ico, #D4A847) 7%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px color-mix(in srgb, var(--ico, #D4A847) 40%, transparent),
              0 6px 14px -8px color-mix(in srgb, var(--ico, #D4A847) 90%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
#asas-command-bar .asas-cbc:hover .asas-cbc-icon {
  transform: translateY(-1px) scale(1.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px color-mix(in srgb, var(--ico, #D4A847) 60%, transparent),
              0 8px 20px -6px color-mix(in srgb, var(--ico, #D4A847) 100%, transparent);
}
/* On a solid featured (active) tab the tile goes dark-glass so it stays visible */
#asas-app .asas-cbtab.asas-cbtab-featured.active .asas-cbt-ico {
  color: #1a1005; background: rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(0,0,0,.15);
}

/* ── 8. Light themes: no black fade, softer mesh and aurora ──────────── */
#asas-app.asas-fx-on[data-theme^="light-"] .asas-fx-base {
  background: linear-gradient(180deg, var(--bg, #f8f9fb) 0%, color-mix(in srgb, var(--bg, #f8f9fb) 88%, #1e3a5f) 100%);
}
#asas-app.asas-fx-on[data-theme^="light-"] .asas-fx-mesh { color: #1e3a5f; opacity: .22; }
#asas-app.asas-fx-on[data-theme^="light-"] .asas-fx-glow { color: #b8860b; opacity: .55; }
#asas-app.asas-fx-on[data-theme^="light-"] .asas-fx-aurora { opacity: .45; }
#asas-app.asas-fx-on[data-theme^="light-"] .asas-fx-aurora i { mix-blend-mode: multiply; }
#asas-app.asas-fx-on[data-theme^="light-"] .asas-fx-vignette { display: none; }
#asas-app.asas-fx-on[data-theme^="light-"] #asas-sidebar,
#asas-app.asas-fx-on[data-theme^="light-"] #asas-composer {
  background: color-mix(in srgb, var(--sb, #eef0f4) 80%, transparent) !important;
  border-color: rgba(0,0,0,.08) !important;
}

/* ── 9. Accessibility and output ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .asas-fx-aurora i { animation: none !important; }
  #asas-app.asas-fx-on :is(.asas-cbc, .asas-cl-pill, .asas-cbtab)::before { transition: none; }
  #asas-command-bar .asas-cbc:hover .asas-cbc-icon { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  #asas-app.asas-fx-on[data-theme] #asas-sidebar,
  #asas-app.asas-fx-on[data-theme] #asas-composer { background: var(--sb, #0d1428) !important; backdrop-filter: none; }
  .asas-fx-aurora, .asas-fx-glow { display: none; }
}
@media print { #asas-bgfx { display: none !important; } }

/* ── 10. Light themes — readable text on light surfaces ──────────────────
   The command bar follows the theme (light on Cloud/Paper/Arctic/Sage), but
   the cluster console and the emphasis markers used light, dark-theme text
   colours — near-invisible on a light background. Dark text variants here,
   each measured ≥ 4.5:1 (WCAG AA).                                        */
#asas-app[data-theme^="light-"] .asas-em-crit {
  color: #8B1A12 !important; -webkit-text-fill-color: #8B1A12 !important;
  background: rgba(239,68,68,.13) !important; border-color: rgba(220,38,38,.45) !important;
}
#asas-app[data-theme^="light-"] .asas-em-warn {
  color: #7A4300 !important; -webkit-text-fill-color: #7A4300 !important;
  background: rgba(245,158,11,.17) !important; border-color: rgba(217,119,6,.5) !important;
}
#asas-app[data-theme^="light-"] .asas-em-ok {
  color: #14532D !important; -webkit-text-fill-color: #14532D !important;
  background: rgba(34,197,94,.16) !important; border-color: rgba(22,163,74,.45) !important;
}
#asas-app[data-theme^="light-"] .asas-cl-pill {
  color: #3A4660; background: rgba(255,255,255,.72); border-color: rgba(15,23,42,.10);
}
#asas-app[data-theme^="light-"] .asas-cl-pill:hover { color: #0F172A; border-color: rgba(15,23,42,.22); }
#asas-app[data-theme^="light-"] .asas-cl-pill.active {
  color: #0F172A;
  background: linear-gradient(150deg, color-mix(in srgb, var(--pill-accent) 22%, #fff), color-mix(in srgb, var(--pill-accent) 8%, #fff));
}
#asas-app[data-theme^="light-"] .asas-cl-n { background: rgba(15,23,42,.07); color: #475569; }
#asas-app[data-theme^="light-"] .asas-cl-pill.active .asas-cl-n { color: #0F172A; }
#asas-app[data-theme^="light-"] #asas-command-bar .asas-cl-ico {
  color: color-mix(in srgb, var(--pill-accent) 70%, #000);
  background: linear-gradient(145deg, color-mix(in srgb, var(--pill-accent) 26%, #fff), color-mix(in srgb, var(--pill-accent) 8%, #fff));
}
#asas-app[data-theme^="light-"] .asas-cb-search {
  background: rgba(255,255,255,.85); border-color: rgba(15,23,42,.12); color: #475569;
}
#asas-app[data-theme^="light-"] #asas-cb-search-input { color: #0F172A !important; -webkit-text-fill-color: #0F172A !important; }
#asas-app[data-theme^="light-"] #asas-cb-search-input::placeholder { color: #5B6475; -webkit-text-fill-color: #5B6475; }
#asas-app[data-theme^="light-"] .asas-cb-kbd { color: #475569; border-color: rgba(15,23,42,.14); background: rgba(15,23,42,.04); }
#asas-app[data-theme^="light-"] .asas-cbc-desc { color: #4B5563 !important; }
#asas-app[data-theme^="light-"] .asas-cbc { background: rgba(255,255,255,.7) !important; }
/* Card descriptions were rgba(255,255,255,.35) — 3.2:1 on the dark default
   theme, below WCAG AA. Raised to pass on every dark theme. */
#asas-app:not([data-theme^="light-"]) #asas-command-bar .asas-cbc-desc { color: rgba(226,232,240,.72); }

/* ── 11. Welcome mode cards: glass icon tiles + cursor glow ──────────── */
#asas-app .asas-wlc-mode-icon[style*="--ico"] {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: 0; flex-shrink: 0; color: color-mix(in srgb, var(--ico) 35%, #fff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ico) 40%, transparent), color-mix(in srgb, var(--ico) 10%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px color-mix(in srgb, var(--ico) 50%, transparent),
              0 6px 16px -8px color-mix(in srgb, var(--ico) 90%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
#asas-app .asas-wlc-mode:hover .asas-wlc-mode-icon[style*="--ico"] { transform: translateY(-1px) scale(1.06); }
#asas-app[data-theme^="light-"] .asas-wlc-mode-icon[style*="--ico"] { color: color-mix(in srgb, var(--ico) 75%, #000); }
#asas-app.asas-fx-on .asas-wlc-mode { position: relative; isolation: isolate; --glow: #D4A847;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#asas-app.asas-fx-on .asas-wlc-mode::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(170px circle at var(--gx, -300px) var(--gy, -300px), rgba(212,168,71,.22), transparent 70%);
  opacity: 0; transition: opacity .25s ease;
}
#asas-app.asas-fx-on .asas-wlc-mode:hover::before { opacity: 1; }
#asas-app.asas-fx-on .asas-wlc-mode:hover { box-shadow: 0 0 0 1px rgba(212,168,71,.3), 0 12px 30px -14px rgba(212,168,71,.6); }

/* ── 12. Ported from the unloaded asas-chat-base.css ─────────────────────
   These were written into asas-chat-base.css in v4.16, but that file is not
   enqueued, so they never reached production. Now in a loaded stylesheet. */
#asas-app.asas-fx-on #asas-input-wrap {
  background: rgba(20,27,44,.72);                                    /* fallback */
  background: color-mix(in srgb, var(--sf, #141b2c) 72%, transparent);
  backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 6px 16px -8px rgba(0,0,0,.3);
}
#asas-app.asas-fx-on[data-theme^="light-"] #asas-input-wrap { background: rgba(255,255,255,.82); }
#asas-app.asas-fx-on .asas-msg.user .asas-bubble {
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 20px -10px rgba(0,0,0,.30);
}
/* "Send as written" option in the deck-theme picker */
#asas-deck-theme-picker .asas-tp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#asas-deck-theme-picker .asas-tp-skip {
  background: none; border: 1px solid rgba(255,255,255,.14); color: #cbd5e1; border-radius: 8px;
  padding: 7px 12px; font: 600 12px/1.2 inherit; font-family: inherit; cursor: pointer;
}
#asas-deck-theme-picker .asas-tp-skip:hover { border-color: #D4A847; color: #fff; }
/* Welcome-screen hint and section label on light themes — both used light,
   dark-theme greys (2.4:1 and 2.6:1 on Cloud). */
#asas-app[data-theme^="light-"] .asas-wlc-hint     { color: #4B5563 !important; }
#asas-app[data-theme^="light-"] .asas-wlc-mode-lbl { color: #7A5A0C !important; }

/* ══ 13. Text visibility in every theme ═══════════════════════════════════
   Found by scanning every visible text element in every theme. Theme text
   tokens (--tx / --t2 / --t3 / --ac) are tuned to ≥ AA on all surfaces in
   asas-chat.css; these rules point the stragglers at them.               */

/* Input placeholders — all themes */
#asas-app #asas-input::placeholder,
#asas-app #asas-search-input::placeholder { color: var(--t3) !important; -webkit-text-fill-color: var(--t3) !important; opacity: 1; }
#asas-app:not([data-theme^="light-"]) #asas-cb-search-input::placeholder { color: #8b98b1; -webkit-text-fill-color: #8b98b1; }
#asas-app:not([data-theme^="light-"]) .asas-cb-kbd { color: #8b98b1; }

/* Links inside replies were unstyled browser blue (2.0:1 on dark) */
#asas-app .asas-bubble a:not(.asas-dl-btn):not([class*="btn"]) {
  color: var(--ac) !important; -webkit-text-fill-color: var(--ac) !important;
  text-decoration: underline; text-underline-offset: 2px;
}

/* Secondary text that used fixed dark-theme greys */
#asas-app[data-theme] #asas-footer-note,
#asas-app[data-theme] .asas-tier-pill.free,
#asas-app[data-theme] .asas-pill-tier.free { color: var(--t2) !important; }

/* Inline-styled text in the template (project button, profile panel) */
#asas-app #asas-set-project-btn [style*="color:#D4A847"],
#asas-app [style*="color:var(--gold"] { color: var(--ac) !important; opacity: 1 !important; }
#asas-app #asas-set-project-btn [style*="color:rgba(136,153,184"] { color: var(--t2) !important; }
#asas-app[data-theme^="light-"] [style*="color:#27ae60"] { color: #166534 !important; }

/* Brand gold used as TEXT on light surfaces → the theme's tuned accent */
#asas-app[data-theme^="light-"] .asas-logo-ai,
#asas-app[data-theme^="light-"] .asas-wlc-name,
#asas-app[data-theme^="light-"] #asas-upgrade-link,
#asas-app[data-theme^="light-"] #asas-create-folder-btn,
#asas-app[data-theme^="light-"] #asas-create-folder-btn span { color: var(--ac) !important; -webkit-text-fill-color: var(--ac) !important; }

/* Concept Boards tab (inactive) — pale lilac on a light purple wash */
#asas-app[data-theme^="light-"] .asas-cbtab.asas-cbtab-featured[data-cat="concept"]:not(.active) { color: #5b21b6 !important; }

/* Colour-theme picker: its panel stays dark in every theme */
/* the picker is attached to <body>, outside #asas-app */
#asas-theme-picker .asas-theme-lbl       { color: #cbd1dc !important; }
#asas-theme-picker .asas-theme-group-lbl { color: #9ca3af !important; opacity: 1 !important; }

/* NEW badge on the Concept tab renders under the tab's shimmer overlay,
   which lightens it — one step darker so it stays ≥ AA as rendered. */
#asas-app .asas-cbtab.asas-cbtab-featured[data-cat="concept"] .asas-cbt-new { background: #6d28d9 !important; }

/* Drawer sidebar (≤ 768px — where asas-command-bar.css turns it into a drawer — and landscape phones): opaque, not glass.
   As a drawer it sits over a dark dimming overlay; frosted glass let that
   overlay show through and turned the light-theme sidebar mid-grey
   (text fell to 3.6–4.1:1). Desktop keeps the glass sidebar. */
@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) {
  #asas-app.asas-fx-on[data-theme] #asas-sidebar,
  #asas-app.asas-fx-on #asas-sidebar {
    background: var(--sb, #0d1428) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
}

/* Accent text on an accent-TINTED button (New conversation): the tint lowers
   contrast below the plain-surface value the theme tokens were tuned for. */
#asas-app[data-theme^="light-"] .asas-new-btn,
#asas-app[data-theme^="light-"] #asas-upgrade-link {
  color: var(--ac) !important;                                              /* fallback */
  color: color-mix(in srgb, var(--ac) 80%, #000) !important;
  -webkit-text-fill-color: var(--ac) !important;
  -webkit-text-fill-color: color-mix(in srgb, var(--ac) 80%, #000) !important;
}
/* "New Folder" used gold at 75% opacity — semi-transparent text. Solid accent in every theme. */
#asas-app[data-theme] #asas-create-folder-btn,
#asas-app[data-theme] #asas-create-folder-btn span { color: var(--ac) !important; -webkit-text-fill-color: var(--ac) !important; }

/* Project Context dialog: its panel is dark in every theme; inputs used the
   browser's default grey placeholder (3.2:1 on that panel). */
#asas-proj-ctx-modal input::placeholder { color: #8b98b1; -webkit-text-fill-color: #8b98b1; opacity: 1; }
/* Concept-image cards stay dark in every theme — their download button must
   not take a light theme's dark-gold accent (was 2.7:1). */
#asas-app .asas-concept-wrap .asas-dl-btn { color: #e8c14e !important; -webkit-text-fill-color: #e8c14e !important; }


/* ══ 14. Mobile — drawer, layout and components ════════════════════════════
   One drawer breakpoint (768px, matching asas-command-bar.css) plus landscape
   phones, which previously got the desktop layout with a permanent sidebar
   squeezed into ~390px of height.                                         */
#asas-sidebar-close { display: none; }
html.asas-drawer-open, html.asas-drawer-open body { overflow: hidden !important; overscroll-behavior: none; }

@media (max-width: 768px), (max-width: 1024px) and (max-height: 500px) {
  #asas-app #asas-topbar { display: flex !important; }
  #asas-app #asas-sidebar {
    position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important;
    height: 100vh !important; height: 100dvh !important;            /* dvh: iOS toolbars can't cut the bottom off */
    width: min(300px, 86vw) !important; z-index: 200 !important;
    transform: translateX(-100%) !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
    padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  #asas-app #asas-sidebar.open { transform: translateX(0) !important; }
  #asas-app #asas-sidebar-overlay {
    display: none; position: fixed; inset: 0; z-index: 199;
    background: rgba(0,0,0,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  #asas-app #asas-sidebar-overlay.active { display: block; }
  #asas-sidebar-close {
    display: grid; place-items: center; position: absolute; z-index: 5;
    top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px; width: 36px; height: 36px;
    border-radius: 10px; border: 1px solid var(--bd, rgba(255,255,255,.12));
    background: var(--sf, #131c2e); color: var(--tx, #e8eaf2); cursor: pointer;
  }
  #asas-sidebar-close:focus-visible { outline: 2px solid var(--ac, #D4A847); outline-offset: 2px; }
  #asas-app .asas-sb-head { padding-right: 52px; }                  /* room for the close button */
  /* composer and topbar clear the home indicator / notch */
  #asas-app #asas-composer { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  #asas-app #asas-topbar { padding-top: env(safe-area-inset-top, 0px) !important; }
}

@media (max-width: 640px) {
  /* Mode cards: grid columns may shrink below their content (nowrap names used to
     push the grid past the screen edge) */
  #asas-app .asas-wlc-modes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; width: 100%; }
  #asas-app .asas-wlc-mode { min-width: 0; }
  #asas-app .asas-wlc-mode-name { white-space: normal; overflow: visible; }
  #asas-app #asas-welcome { padding-left: 14px; padding-right: 14px; box-sizing: border-box; max-width: 100%; }
  /* Token row: wrap instead of truncating "Upgrade" */
  #asas-app #asas-token-quota-row { flex-wrap: wrap; row-gap: 4px; }
  #asas-app #asas-token-quota-txt { white-space: normal; }
  /* Composer: attachment tools on their own row so the text box gets the full width */
  #asas-app #asas-input-wrap { flex-wrap: wrap; }
  #asas-app #asas-attach-toolbar { order: -1; width: 100%; display: flex; }
  #asas-app #asas-input { flex: 1 1 0; min-width: 0; }
  /* Pickers and dialogs fit the screen */
  #asas-theme-picker { max-width: calc(100vw - 20px); left: 10px !important; right: 10px !important; }
  #asas-proj-ctx-modal > div { max-height: calc(100dvh - 32px); overflow-y: auto; }
}
@media (max-width: 380px) {
  #asas-app .asas-wlc-modes { grid-template-columns: 1fr !important; }
}

/* ══ 15. My Account panel — new interface ═════════════════════════════════ */
#asas-app.asas-fx-on #asas-panel {
  background: var(--sb, #111827);                                           /* fallback */
  /* aurora sheen = first background layer (the panel's ::before is the phone
     bottom-sheet drag handle in asas-command-bar.css, so it can't be reused) */
  background:
    linear-gradient(90deg, transparent, rgba(20,184,166,.75), rgba(139,92,246,.7), rgba(212,168,71,.75), transparent) top / 100% 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--sf, #131c2e) 96%, transparent), var(--sb, #111827)) !important;
  border: 1px solid var(--bd, rgba(255,255,255,.08));
  box-shadow: 0 -18px 50px -20px rgba(0,0,0,.6);
}
#asas-app.asas-fx-on #asas-panel .asas-stat-card,
#asas-app.asas-fx-on #asas-panel .asas-panel-card {
  background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--sf, #131c2e) !important;
  border: 1px solid var(--bd, rgba(255,255,255,.08)) !important; border-radius: 12px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}
#asas-app.asas-fx-on[data-theme^="light-"] #asas-panel .asas-stat-card,
#asas-app.asas-fx-on[data-theme^="light-"] #asas-panel .asas-panel-card { background: var(--sf, #fff) !important; }
#asas-app.asas-fx-on #asas-panel .asas-nav-link { position: relative; isolation: isolate; border-radius: 12px; transition: background .18s, box-shadow .18s; }
#asas-app.asas-fx-on #asas-panel .asas-nav-link:hover {
  background: var(--ad, rgba(212,168,71,.1)); box-shadow: 0 0 0 1px var(--bd, rgba(212,168,71,.2));
}
#asas-app.asas-fx-on #asas-panel .asas-nav-icon:not(.asas-nav-icon-danger) {
  border-radius: 10px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ac, #D4A847) 30%, transparent), color-mix(in srgb, var(--ac, #D4A847) 8%, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px color-mix(in srgb, var(--ac, #D4A847) 40%, transparent);
  color: var(--ac, #D4A847) !important;
}

/* NEW badges on the featured tabs sat UNDER the tab's animated shimmer
   (::after, absolutely positioned), which periodically washed them out
   (measured 4.06:1 mid-sweep on Cosmic). Keep them above it. */
#asas-app .asas-cbtab.asas-cbtab-featured .asas-cbt-new { position: relative; z-index: 1; }

/* Welcome mode cards: equal columns. They were content-sized (162/185/192px),
   which looked uneven once the sixth card completed the 3×2 grid. */
@media (min-width: 641px) {
  #asas-app .asas-wlc-modes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #asas-app .asas-wlc-mode { min-width: 0; }
}