/* ==========================================================================
   Falcon AI — "glitter" layer.

   Loaded AFTER each page's inline <style> block so it wins the cascade without
   needing surgery on the ~2k lines of inline CSS in index.html. Three jobs:

     1. Personality — sparkle field, gradient fills, glow, soft rounding.
     2. Layout — the ChatGPT-style app shell (left sidebar + slim topbar +
        centered content column) and the chat transcript/composer.
     3. Controls — a real base style for bare <button> elements, which used to
        fall through to native browser chrome, plus the report modal rebuild.

   Base colours come from the :root tokens in app.css / each page's inline
   <style>. Nothing here should hard-code a palette value that already exists
   as a token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sparkle field.

   Two fixed layers behind everything: soft colour blooms, then a tiled
   star/glitter pattern that drifts. Both are pointer-events:none and sit at
   z-index 0 with page content lifted to 1.
   -------------------------------------------------------------------------- */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20vmax;
  pointer-events: none;
  z-index: 0;
}

/* Colour blooms — hot pink top-right, purple bottom-left, slow breathe. */
body::before {
  background:
    radial-gradient(42vmax 34vmax at 84% 4%, rgba(255, 90, 190, 0.42), transparent 64%),
    radial-gradient(38vmax 32vmax at 6% 94%, rgba(160, 70, 250, 0.40), transparent 64%),
    radial-gradient(30vmax 26vmax at 52% 46%, rgba(255, 127, 207, 0.18), transparent 72%),
    radial-gradient(24vmax 24vmax at 14% 12%, rgba(255, 150, 220, 0.16), transparent 70%);
  animation: glitter-breathe 14s ease-in-out infinite;
}

/* The actual glitter: several star sizes, tiled and drifting diagonally. */
body::after {
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255, 255, 255, 1), transparent 62%),
    radial-gradient(1.5px 1.5px at 68% 8%, rgba(255, 190, 235, 1), transparent 62%),
    radial-gradient(2.6px 2.6px at 84% 62%, rgba(255, 255, 255, 0.92), transparent 62%),
    radial-gradient(1.8px 1.8px at 34% 74%, rgba(224, 178, 255, 1), transparent 62%),
    radial-gradient(1.3px 1.3px at 92% 32%, rgba(255, 255, 255, 0.95), transparent 62%),
    radial-gradient(2.3px 2.3px at 22% 46%, rgba(255, 214, 245, 0.9), transparent 62%),
    radial-gradient(1.4px 1.4px at 56% 88%, rgba(255, 255, 255, 1), transparent 62%),
    radial-gradient(2px 2px at 46% 26%, rgba(210, 165, 255, 0.9), transparent 62%),
    radial-gradient(1.6px 1.6px at 76% 82%, rgba(255, 235, 250, 0.95), transparent 62%),
    radial-gradient(1.2px 1.2px at 6% 62%, rgba(255, 255, 255, 0.9), transparent 62%);
  background-size: 260px 260px, 200px 200px, 330px 330px, 230px 230px,
                   170px 170px, 300px 300px, 220px 220px, 280px 280px,
                   190px 190px, 240px 240px;
  opacity: 0.95;
  animation: glitter-drift 42s linear infinite, glitter-twinkle 5.5s ease-in-out infinite;
}

@keyframes glitter-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes glitter-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  to {
    background-position:
      260px 260px, -200px 200px, 330px -330px, -230px 230px,
      170px 170px, -300px 300px, 220px -220px, -280px 280px,
      190px 190px, -240px 240px;
  }
}
@keyframes glitter-twinkle {
  0%, 100% { opacity: 0.62; }
  50%      { opacity: 1; }
}

/* Lift the page content above the sparkle. Overlays (FAB, modals, tour) are
   already position:fixed with a high z-index, so they stack above this without
   needing a position override here -- setting one would break them. */
.app-shell { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none; }
}

/* --------------------------------------------------------------------------
   2. App shell — ChatGPT-style sidebar + topbar + content column.
   -------------------------------------------------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w, 264px) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 180ms ease;
}
.app-shell.sidebar-collapsed { --sidebar-w: 0px; }

/* ---- Sidebar ---- */
.app-sidebar {
  grid-column: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 0.7rem 0.7rem;
  background:
    linear-gradient(180deg, rgba(255, 110, 200, 0.22), rgba(160, 70, 250, 0.16)),
    var(--panel);
  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 rgba(255, 150, 220, 0.25);
}
.sidebar-collapsed .app-sidebar {
  padding-left: 0;
  padding-right: 0;
  border-right-color: transparent;
}
.sidebar-collapsed .app-sidebar > * { opacity: 0; pointer-events: none; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.15rem 0.35rem 0.1rem;
  min-width: 0;
}
.sidebar-brand .brand-home {
  width: 34px; height: 34px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 12px;
  overflow: visible;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  line-height: 0;
  box-shadow: var(--glow-pink);
  transition: transform 160ms ease;
}
.sidebar-brand .brand-home img {
  width: 34px; height: 34px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}
.sidebar-brand .brand-home:hover,
.sidebar-brand .brand-home:hover:not(:disabled) {
  transform: scale(1.18);
  background: transparent;
  border-color: transparent;
  color: inherit;
  filter: none;
}
.sidebar-brand .brand-home:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sidebar-brand .brand-text strong {
  font-size: 1rem; font-weight: 700; letter-spacing: 0.01em;
  background: linear-gradient(100deg, #ffd6f2 0%, var(--accent-bright) 45%, var(--accent-2-bright) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.sidebar-brand .brand-text span {
  /* Tight tracking so the full strapline fits the 264px sidebar without
     ellipsizing. */
  font-size: 0.64rem; color: var(--muted);
  letter-spacing: 0.01em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-brand .sidebar-close {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 10px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.sidebar-brand .sidebar-close:hover {
  color: var(--accent-bright);
  background: var(--accent-dim);
  border-color: rgba(255, 127, 207, 0.3);
}

/* "New chat" primary call to action, ChatGPT-style full-width pill. */
.sidebar-new {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(255, 127, 207, 0.35);
  border-radius: var(--radius-pill);
  background: var(--grad-soft);
  color: var(--text);
  font-size: 0.88rem; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.sidebar-new .icon { color: var(--accent-bright); }
.sidebar-new:hover {
  background: var(--grad-hot);
  color: #fff;
  box-shadow: var(--glow-pink);
  transform: translateY(-1px);
}
.sidebar-new:hover .icon { color: #fff; }

/* Nav list. Overrides the old horizontal `nav { display:flex }` rule. */
.app-sidebar nav#mainNav {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.2rem 0.1rem 0.4rem;
  border-bottom: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 127, 207, 0.35) transparent;
}
.app-sidebar nav#mainNav::-webkit-scrollbar { width: 8px; }
.app-sidebar nav#mainNav::-webkit-scrollbar-thumb {
  background: rgba(255, 127, 207, 0.3);
  border-radius: 999px;
}
.nav-group-label {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  padding: 0.7rem 0.6rem 0.28rem;
  opacity: 0.8;
}
.nav-group-label:first-child { padding-top: 0.15rem; }

.app-sidebar nav#mainNav button.tab {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.52rem 0.7rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.app-sidebar nav#mainNav button.tab .icon { color: inherit; opacity: 0.85; flex-shrink: 0; }
.app-sidebar nav#mainNav button.tab:hover {
  background: rgba(255, 127, 207, 0.10);
  color: var(--text);
}
.app-sidebar nav#mainNav button.tab.active {
  background: var(--grad-soft);
  border-color: rgba(255, 127, 207, 0.42);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 127, 207, 0.12);
}
.app-sidebar nav#mainNav button.tab.active .icon { color: var(--accent-bright); opacity: 1; }

/* Sidebar footer: account pill. */
.sidebar-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
}
.sidebar-foot .who {
  display: flex; align-items: center; gap: 0.55rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.5rem;
  border-radius: 14px;
  background: rgba(255, 127, 207, 0.06);
  border: 1px solid var(--border);
}
.sidebar-foot .who .avatar {
  background: var(--grad-hot);
  box-shadow: var(--glow-pink);
}
.sidebar-foot .who .who-text { flex: 1 1 6rem; min-width: 0; }
.sidebar-foot .who .who-text strong,
.sidebar-foot .who .who-text span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.sidebar-foot .who .admin-badge,
.sidebar-foot .who button { flex-shrink: 0; }
.sidebar-foot .who button {
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.7rem;
}

/* ---- Main column ---- */
.app-main {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.app-main > header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 0.6rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg, rgba(255, 110, 200, 0.16), rgba(160, 70, 250, 0.12)),
    rgba(58, 21, 71, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.app-main > header .bar { align-items: center; gap: 0.9rem; flex-wrap: nowrap; }
.app-main > header h1 {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.02rem; font-weight: 700;
  white-space: nowrap;
}
.app-main > header h1 .brand-home,
.app-main > header h1 .logo {
  color: var(--accent-bright);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  border-radius: 8px;
  overflow: visible;
  transition: transform 160ms ease;
}
.app-main > header h1 .brand-home img,
.app-main > header h1 .logo img {
  width: 28px; height: 28px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.app-main > header h1 .brand-home:hover,
.app-main > header h1 .logo:hover,
.app-main > header h1 .brand-home:hover:not(:disabled) {
  transform: scale(1.18);
  background: transparent;
  border-color: transparent;
  filter: none;
}
.app-main > header h1 .brand-home:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
/* Strapline is supporting text in a slim bar: keep it to one line and drop it
   entirely once there isn't room. */
.app-main > header .bar > p {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1100px) {
  .app-main > header .bar > p { display: none; }
}

.topbar-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 11px;
  width: 34px; height: 34px;
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.topbar-toggle:hover { color: var(--accent-bright); border-color: var(--accent); background: var(--accent-dim); }
/* Shown when the sidebar is collapsed (desktop) or always (mobile drawer). */
.sidebar-collapsed .topbar-toggle { display: inline-flex; }

.app-main > main {
  flex: 1 1 auto;
  padding: 1.4rem 1.5rem 5rem;
  max-width: 1040px;
  width: 100%;
  margin: 0 auto;
}

/* Mobile: sidebar becomes an off-canvas drawer. */
.sidebar-scrim {
  position: fixed; inset: 0;
  background: rgba(24, 10, 32, 0.66);
  backdrop-filter: blur(3px);
  z-index: 60;
  display: none;
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(84vw, 300px);
    z-index: 70;
    transform: translateX(-102%);
    transition: transform 200ms ease;
    box-shadow: 24px 0 60px rgba(20, 4, 28, 0.6);
  }
  .app-shell.sidebar-open .app-sidebar { transform: translateX(0); }
  .app-shell.sidebar-open .sidebar-scrim { display: block; }
  .sidebar-collapsed .app-sidebar { padding-left: 0.7rem; padding-right: 0.7rem; }
  .sidebar-collapsed .app-sidebar > * { opacity: 1; pointer-events: auto; }
  .app-main { grid-column: 1; }
  .topbar-toggle { display: inline-flex; }
  .app-main > main { padding: 1.1rem 1rem 5rem; }
}

/* --------------------------------------------------------------------------
   3. Base controls.

   index.html only styled `button.primary`, so every bare <button> (Cancel,
   Submit another, Refresh, Back, the tour controls...) rendered as a native
   grey/white browser button. Give them a real default.
   -------------------------------------------------------------------------- */
button {
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--text);
  background: rgba(255, 127, 207, 0.07);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease, transform 130ms ease;
}
button:hover:not(:disabled) {
  background: rgba(255, 127, 207, 0.16);
  border-color: rgba(255, 127, 207, 0.45);
  color: #fff;
}
button:disabled { opacity: 0.5; cursor: not-allowed; }
button:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
/* Opt-outs: elements that are semantically buttons but visually not. */
button.icon-btn,
button.link-btn,
button.btn-link,
button.tab,
button.msg-pin-btn,
button.ask-msg-report-btn,
button.sidebar-close,
button.topbar-toggle,
.thread-actions button,
.folder-actions button {
  background: transparent;
  border-color: transparent;
  border-radius: 10px;
  padding: 0.2rem 0.35rem;
}

/* Primary / secondary fills become the pink→purple gradient. */
button.primary,
.btn-primary,
button.btn-primary,
.sidebar-new:hover,
.report-fab,
.ask-threads button.new,
.ask-send-row button,
.tour-tooltip button.primary {
  background: var(--grad-hot);
  color: #fff;
  border: 1px solid rgba(255, 127, 207, 0.5);
  box-shadow: var(--glow-pink);
}
button.primary,
.btn-primary,
button.btn-primary {
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.01em;
}
button.primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  filter: brightness(1.12) saturate(1.1);
  transform: translateY(-1px);
  color: #fff;
}
button.primary:active:not(:disabled),
.btn-primary:active:not(:disabled) {
  transform: scale(0.94);
  filter: brightness(1.18) saturate(1.15);
}
/* Shimmer sweep across primary fills. The FAB is deliberately excluded from
   the `position: relative` here -- it must stay `fixed` -- but it still forms a
   containing block for the ::after sweep. */
button.primary,
.btn-primary { position: relative; }
button.primary,
.btn-primary,
.report-fab { overflow: hidden; }
button.primary::after,
.btn-primary::after,
.report-fab::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: glitter-sweep 4.5s ease-in-out infinite;
}
@keyframes glitter-sweep {
  0%, 62%  { left: -60%; }
  88%, 100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  button.primary::after,
  .btn-primary::after,
  .report-fab::after { animation: none; opacity: 0; }
}

.btn-secondary,
button.btn-secondary {
  background: rgba(255, 127, 207, 0.08);
  border: 1px solid rgba(255, 127, 207, 0.3);
  color: var(--text);
  border-radius: var(--radius-pill);
  font-weight: 600;
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 127, 207, 0.18);
  border-color: var(--accent-bright);
}

/* Pink links (the brighter token so small text clears contrast on the plum bg). */
a,
.link,
.link-btn,
.btn-link { color: var(--accent-bright); }
a:hover, .link:hover { color: #ffd6f2; }

/* Inputs get the cute rounding + a pink focus ring. */
input, select, textarea {
  border-radius: 12px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-bright) !important;
  box-shadow: 0 0 0 3px rgba(255, 127, 207, 0.18);
}
/* Native checkboxes/radios render as white chrome on a dark theme, which read
   as holes in the layout. Replace them with pink controls. Components that
   build their own control (the report modal tiles, the anonymous toggle)
   override these further down the file. */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.1rem; height: 1.1rem;
  margin: 0;
  border: 1.5px solid var(--border);
  background: rgba(255, 127, 207, 0.08);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
input[type="checkbox"] { border-radius: 6px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before,
input[type="radio"]::before {
  content: "";
  background: #fff;
  transform: scale(0);
  transition: transform 120ms ease;
}
input[type="checkbox"]::before {
  width: 0.68rem; height: 0.68rem;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
input[type="radio"]::before {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
}
input[type="checkbox"]:hover, input[type="radio"]:hover {
  border-color: var(--accent-bright);
  background: rgba(255, 127, 207, 0.18);
}
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--grad-hot);
  border-color: var(--accent-bright);
}
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before { transform: scale(1); }

/* File pickers ship a native light-grey button that reads as a foreign object
   on a dark theme. Restyle the button part. */
input[type="file"] {
  padding: 0.42rem 0.55rem;
  color: var(--muted);
  font-size: 0.84rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 0.65rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 127, 207, 0.35);
  border-radius: var(--radius-pill);
  background: var(--grad-soft);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}
input[type="file"]::file-selector-button:hover {
  background: var(--grad-hot);
  border-color: var(--accent-bright);
  color: #fff;
}

/* Cards, panels, transcripts: softer corners + a pink hairline and wash. */
.quick-card, .kpi-card, .modal, .ask-threads, .chat-composer,
.ask-transcript, .chat-transcript, .welcome-hero, .report-options {
  border-radius: var(--radius-lg);
}
.quick-card, .kpi-card {
  background:
    linear-gradient(150deg, rgba(255, 127, 207, 0.13), rgba(155, 63, 245, 0.07)),
    var(--card);
  border-color: rgba(255, 150, 220, 0.26);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.quick-card:hover {
  border-color: var(--accent-bright);
  box-shadow: var(--glow-pink);
  transform: translateY(-3px);
}
.quick-card .card-icon {
  background: var(--grad-soft);
  color: var(--accent-bright);
}

.welcome-hero {
  background:
    linear-gradient(135deg, rgba(255, 110, 200, 0.32), rgba(160, 70, 250, 0.22)),
    var(--panel);
  border-color: rgba(255, 150, 220, 0.38);
  box-shadow: var(--shadow-card);
}

/* Generic panels/sections in the content column pick up a light pink wash so
   the whole page reads pink rather than just the chrome. */
.panel .card,
.panel details.advanced-disclosure,
.panel .ask-sources-bar,
.panel .out,
.section-card {
  border-color: rgba(255, 150, 220, 0.22);
}
.welcome-hero h2,
.page-header h2 {
  background: linear-gradient(100deg, #fff 0%, var(--accent-bright) 60%, var(--accent-2-bright) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* The gradient clip would swallow the icon chip, so keep it painted. */
.page-header h2 .ph-icon {
  -webkit-text-fill-color: initial;
  background: var(--grad-soft);
  color: var(--accent-bright);
}

/* --------------------------------------------------------------------------
   4. Chat — ChatGPT-style transcript and composer.
   -------------------------------------------------------------------------- */
.ask-layout {
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) {
  .ask-layout { grid-template-columns: minmax(0, 1fr); }
}
.ask-threads {
  background: rgba(255, 127, 207, 0.04);
  border-color: var(--border);
  padding: 0.6rem;
}
.ask-threads header h4 {
  font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.ask-threads button.new {
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  font-size: 0.74rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.ask-threads li { border-radius: 11px; padding: 0.45rem 0.6rem; }
.ask-threads li:hover { background: rgba(255, 127, 207, 0.09); border-color: transparent; }
.ask-threads li.active {
  background: var(--grad-soft);
  border-color: rgba(255, 127, 207, 0.42);
}

/* Transcript: full-height scroll column, no boxed frame (ChatGPT-like). */
.ask-transcript,
.chat-transcript {
  background: transparent;
  border: none;
  padding: 0.25rem 0.15rem 0.5rem;
  max-height: min(70vh, 760px);
  gap: 1.15rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 127, 207, 0.35) transparent;
}
.ask-transcript::-webkit-scrollbar,
.chat-transcript::-webkit-scrollbar { width: 9px; }
.ask-transcript::-webkit-scrollbar-thumb,
.chat-transcript::-webkit-scrollbar-thumb {
  background: rgba(255, 127, 207, 0.3);
  border-radius: 999px;
}

/* User turn: compact pink bubble on the right. */
.ask-msg.user {
  align-self: flex-end;
  max-width: 76%;
  padding: 0.65rem 0.95rem;
  border-radius: 20px 20px 6px 20px;
  background: var(--grad-hot);
  border: 1px solid rgba(255, 127, 207, 0.5);
  color: #fff;
  font-size: 0.9rem;
  box-shadow: 0 6px 20px rgba(214, 31, 140, 0.28);
}
/* Assistant turn: full width, unframed, like ChatGPT. */
.ask-msg.assistant {
  align-self: stretch;
  max-width: 100%;
  background: transparent;
  border: none;
  border-left: 2px solid rgba(255, 127, 207, 0.28);
  border-radius: 0;
  padding: 0.1rem 0 0.1rem 0.9rem;
  font-size: 0.92rem;
  line-height: 1.62;
}
.ask-msg.assistant.msg-pinned {
  border-left-color: var(--warn);
  background: rgba(255, 209, 102, 0.05);
  border-radius: 0 14px 14px 0;
  padding-right: 0.7rem;
}

.chat-empty { min-height: 240px; gap: 0.8rem; }
.chat-empty .icon-xl {
  width: 2.6rem; height: 2.6rem;
  color: var(--accent-bright);
  filter: drop-shadow(0 0 14px rgba(255, 127, 207, 0.6));
  animation: glitter-breathe 4s ease-in-out infinite;
}
.chat-empty strong {
  font-size: 1.55rem;
  font-weight: 700;
  background: linear-gradient(100deg, #fff 0%, var(--accent-bright) 55%, var(--accent-2-bright) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.chat-empty p { max-width: 44ch; }

/* Starter chips — the "does this thing do anything?" affordance on an empty
   thread. Click prefills the composer. */
.starter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  max-width: 46rem;
}
.starter-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 127, 207, 0.3);
  background: rgba(255, 127, 207, 0.07);
  color: var(--text);
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.starter-chip .icon { color: var(--accent-bright); }
.starter-chip:hover {
  background: var(--grad-soft);
  border-color: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(214, 31, 140, 0.28);
  color: #fff;
}

/* Composer: one rounded pill card, send button tucked inside on the right. */
.composer-slot {
  position: sticky;
  bottom: 0.5rem;
  z-index: 6;
}
.chat-composer {
  border-radius: 26px;
  padding: 0.65rem 0.7rem 0.5rem 0.85rem;
  background: rgba(50, 20, 61, 0.92);
  border: 1px solid rgba(255, 127, 207, 0.28);
  box-shadow: 0 10px 32px rgba(60, 6, 44, 0.45), inset 0 1px 0 rgba(255, 127, 207, 0.10);
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.chat-composer:focus-within {
  border-color: var(--accent-bright);
  box-shadow: 0 12px 38px rgba(60, 6, 44, 0.5), 0 0 0 3px rgba(255, 127, 207, 0.16);
}
.chat-composer textarea { min-height: 48px !important; }
.chat-composer textarea::placeholder { color: var(--muted); opacity: 0.75; }
/* Actions become a compact row of circular icon buttons. */
.chat-composer .composer-actions {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  align-self: end;
  padding-bottom: 0.15rem;
}
.chat-composer .composer-actions .btn-primary,
.chat-composer .composer-actions .btn-secondary {
  min-width: 0;
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.95rem;
  font-size: 0.83rem;
  white-space: nowrap;
}
.chat-composer .composer-hint { font-size: 0.7rem; opacity: 0.8; }
@media (max-width: 640px) {
  .chat-composer { grid-template-columns: minmax(0, 1fr); }
  .chat-composer .composer-actions { justify-content: flex-end; flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   5. Feedback / report system.

   The old modal used raw radio inputs at ~1rem with 0.72rem captions, a 640px
   max width, and unstyled Cancel/Submit buttons. Rebuilt as: real card tiles
   with a check affordance, a segmented severity control, and a footer with
   full-size buttons that never fall below a 44px tap target.
   -------------------------------------------------------------------------- */
.report-fab {
  padding: 0.7rem 1.15rem 0.7rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
}
.report-fab:hover { transform: translateY(-2px) scale(1.03); }
.report-fab > span[aria-hidden="true"] {
  width: 1.6rem; height: 1.6rem;
  background: rgba(255, 255, 255, 0.24);
}
/* The FAB outranks the mobile drawer on z-index, so it would hover over an
   open drawer. Hide it while the drawer is showing. */
.app-shell.sidebar-open ~ .report-fab { display: none; }
/* On narrow screens the sticky composer pins to the viewport bottom, right
   underneath the FAB. Raise the sticky offset so the two never collide (a
   bottom margin can't help -- sticky offsets ignore it). */
@media (max-width: 640px) {
  .composer-slot { bottom: 4.6rem; }
}

.modal-backdrop {
  background: rgba(20, 6, 28, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 900;
}
.modal {
  border-radius: 24px;
  border-color: rgba(255, 127, 207, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 127, 207, 0.09), rgba(155, 63, 245, 0.04)),
    var(--panel);
  box-shadow: 0 26px 70px rgba(20, 4, 28, 0.7), 0 0 0 1px rgba(255, 127, 207, 0.12);
}
.modal.modal-wide { max-width: 760px; padding: 1.4rem 1.6rem 1.25rem; }
.modal-head h2 {
  font-size: 1.18rem; font-weight: 700;
  background: linear-gradient(100deg, #fff, var(--accent-bright) 70%, var(--accent-2-bright));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.modal .icon-btn {
  width: 34px; height: 34px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.modal .icon-btn:hover { background: var(--accent-dim); color: var(--accent-bright); }

.report-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 0.45rem;
}

/* ---- Kind tiles ---- */
.report-kind-row {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.55rem;
}
.report-kind {
  position: relative;
  align-items: center;
  gap: 0.65rem;
  min-height: 62px;
  padding: 0.7rem 2.2rem 0.7rem 0.8rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 127, 207, 0.05);
  transition: border-color 130ms ease, background 130ms ease, transform 130ms ease;
}
.report-kind:hover {
  border-color: rgba(255, 127, 207, 0.5);
  background: rgba(255, 127, 207, 0.1);
  transform: translateY(-1px);
}
/* Hide the native radio; the tile itself is the control. */
.report-kind input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
/* Checkmark affordance in the top-right of the selected tile. */
.report-kind::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: transparent;
  transition: background 130ms ease, border-color 130ms ease;
}
.report-kind:has(input[type="radio"]:checked) {
  border-color: var(--accent-bright);
  background: var(--grad-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 127, 207, 0.2);
}
.report-kind:has(input[type="radio"]:checked)::after {
  background: var(--grad-hot);
  border-color: var(--accent-bright);
  box-shadow: 0 0 12px rgba(255, 127, 207, 0.55);
}
.report-kind:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.report-kind-icon {
  width: 2.1rem; height: 2.1rem;
  border-radius: 12px;
  background: rgba(255, 127, 207, 0.12);
  border-color: rgba(255, 127, 207, 0.28);
  color: var(--accent-bright);
}
.report-kind:has(input[type="radio"]:checked) .report-kind-icon {
  background: var(--grad-hot);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--glow-pink);
}
.report-kind-text { font-size: 0.86rem; gap: 0.15rem; }
.report-kind-text strong { font-size: 0.88rem; }
.report-kind-text em { font-size: 0.75rem; }
.report-kind:has(input[type="radio"]:checked) .report-kind-text strong { color: #fff; }

/* ---- Severity: segmented pill control instead of three tiny radios ---- */
.report-severity-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
@media (max-width: 560px) {
  .report-severity-row { grid-template-columns: minmax(0, 1fr); }
}
.report-severity-row label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 54px;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 127, 207, 0.05);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease;
}
.report-severity-row .sev-text {
  display: flex; flex-direction: column; gap: 0.1rem;
  line-height: 1.25;
}
.report-severity-row .sev-text strong { font-size: 0.88rem; font-weight: 700; }
.report-severity-row .sev-text em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.85;
}
.report-severity-row label:hover {
  border-color: rgba(255, 127, 207, 0.5);
  background: rgba(255, 127, 207, 0.1);
  color: var(--text);
}
.report-severity-row input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
.report-severity-row label:has(input[type="radio"]:checked) {
  background: var(--grad-hot);
  border-color: var(--accent-bright);
  color: #fff;
  box-shadow: var(--glow-pink);
}
.report-severity-row label:has(input[type="radio"]:checked) .sev-text em { opacity: 0.92; }
.report-severity-row label:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

/* ---- Anonymous switch: real toggle instead of a bare checkbox ---- */
.report-options {
  border: 1px dashed rgba(255, 127, 207, 0.3);
  background: rgba(255, 127, 207, 0.05);
  padding: 0.8rem 0.9rem;
}
.report-switch { align-items: center; gap: 0.75rem; min-height: 44px; }
.report-switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  margin: 0;
  width: 46px; height: 26px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 127, 207, 0.12);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
/* This one is a slider, not a tick box -- drop the inherited checkmark. */
.report-switch input[type="checkbox"]::before { content: none; }
.report-switch input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 150ms ease, background 150ms ease;
}
.report-switch input[type="checkbox"]:checked {
  background: var(--grad-hot);
  border-color: var(--accent-bright);
}
.report-switch input[type="checkbox"]:checked::after {
  transform: translateX(20px);
  background: #fff;
}
.report-switch input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.report-switch span { font-size: 0.86rem; }
.report-switch span em { font-size: 0.76rem; }

#reportTitleField,
#reportDescField { border-radius: 14px; padding: 0.7rem 0.85rem; font-size: 0.9rem; }
#reportDescField { min-height: 130px; }

.report-context > summary {
  font-size: 0.82rem;
  padding: 0.45rem 0.1rem;
  color: var(--accent-bright);
}

/* ---- Footer: full-size buttons, always reachable ---- */
.modal.modal-wide #reportForm > .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(38, 16, 47, 0.4), var(--panel) 45%);
  border-top: 1px solid rgba(255, 127, 207, 0.22);
  padding-top: 0.9rem;
  padding-bottom: 0.15rem;
  gap: 0.75rem;
}
.report-actions-secondary,
.report-actions-primary {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
#reportForm > .actions button,
#reportSuccess .actions button,
#reportMineBox button {
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0;
}
#btnSubmitReport {
  min-width: 180px;
  font-weight: 700;
}
#btnCancelReport { min-width: 108px; }
#reportSuccess .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
@media (max-width: 620px) {
  .modal.modal-wide #reportForm > .actions { flex-direction: column; align-items: stretch; }
  .report-actions-secondary,
  .report-actions-primary { width: 100%; }
  .report-actions-secondary button,
  .report-actions-primary button { flex: 1 1 0; }
}

.report-success-icon {
  width: 3.4rem; height: 3.4rem;
  background: var(--grad-hot);
  box-shadow: var(--glow-pink);
}
.report-success h3 { font-size: 1.15rem; }
.report-mine-item { border-radius: 16px; background: rgba(255, 127, 207, 0.05); }

/* Inline per-answer feedback widget: give the thumbs/flag row real hit areas. */
.fb-row,
.ask-msg-actions { gap: 0.4rem; }
.fb-btn,
.ask-msg-actions button {
  min-width: 34px;
  min-height: 34px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}
.fb-btn:hover { background: var(--accent-dim); color: var(--accent-bright); }
.ask-msg-report-btn {
  padding: 0.3rem 0.6rem;
  font-size: 0.76rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1px solid transparent;
}
.ask-msg-report-btn:hover {
  color: var(--accent-bright);
  background: var(--accent-dim);
  border-color: rgba(255, 127, 207, 0.3);
}

/* --------------------------------------------------------------------------
   6. Misc pink polish.
   -------------------------------------------------------------------------- */
.avatar, .admin-badge .dot { box-shadow: 0 0 10px rgba(255, 127, 207, 0.5); }
.admin-badge {
  background: var(--grad-soft);
  border-color: rgba(255, 127, 207, 0.45);
  color: var(--accent-bright);
}
.segmented .mode-btn.active {
  background: var(--grad-hot);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--glow-pink);
}
.upgrade-banner {
  background: linear-gradient(120deg, rgba(255, 127, 207, 0.2), rgba(155, 63, 245, 0.14));
  border-color: rgba(255, 127, 207, 0.4);
}
::selection { background: rgba(255, 127, 207, 0.35); color: #fff; }
* { scrollbar-color: rgba(255, 127, 207, 0.35) transparent; }

.ui-reward {
  animation: ui-reward-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ui-reward-pop {
  0% { transform: scale(0.9); filter: brightness(1); }
  38% { transform: scale(1.1); filter: brightness(1.25) saturate(1.2); }
  100% { transform: scale(1); filter: none; }
}
.msg-pin-btn.ui-reward,
.thread-menu-btn.ui-reward,
.folder-menu-btn.ui-reward {
  animation: ui-pin-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ui-pin-pop {
  0% { transform: scale(0.7) rotate(-18deg); }
  55% { transform: scale(1.28) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}
.folder-row.ui-reward,
.ask-threads .folder-toolbar button.ui-reward {
  animation: ui-folder-pop 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ui-folder-pop {
  0% { transform: scale(0.92) translateY(4px); opacity: 0.6; }
  60% { transform: scale(1.04) translateY(-2px); opacity: 1; }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-reward,
  .msg-pin-btn.ui-reward,
  .folder-row.ui-reward { animation: none; }
}