/* BananaWeb — tokens, themes, reset, focus, motion, keyframes. Loaded first on every page. */

/* ════════════════════════════════════════════════════════════════════════════
   BananaWeb — Atmospheric Dark/Light Dashboard
   Fonts: Space Grotesk (UI) + JetBrains Mono (data/code)
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Google Fonts already loaded via <link> ─────────────────────────────── */

/* ─── CSS Variables ──────────────────────────────────────────────────────── */

:root {
  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --sidebar-w: 280px;

  /* ── Scales ────────────────────────────────────────────────────────────────
     Derived from what the stylesheets already used, not invented: the type
     sizes clustered at 10-14px with a few stray fractional values (11.5, 12.5,
     13.5), radii spread across fifteen values, and transitions used seven
     durations and four curves. The steps below keep the dense, technical feel
     and give the near-duplicates one home each. */

  /* Type. 15px stays the document base; the rest is the interface scale. */
  --fs-2xs: 10px;   /* section labels, dates */
  --fs-xs:  11px;   /* meta lines, hints */
  --fs-sm:  12px;
  --fs-md:  13px;   /* default UI text */
  --fs-lg:  14px;
  --fs-xl:  16px;
  --fs-2xl: 18px;
  --fs-3xl: 22px;
  --fs-4xl: 28px;
  --fs-display: 52px;

  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-loose: 1.65;

  /* Space. 4/6/8/10/12/16 carry the layout; the rest were one-offs. */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 16px;
  --sp-8: 20px;
  --sp-9: 24px;
  --sp-10: 32px;
  --sp-11: 40px;

  /* Radius. --radius / --radius-lg kept: existing rules reference them. */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-full: 999px;
  --radius: 10px;
  --radius-lg: 16px;

  /* Depth. The panel and the mobile drawer both sat at 200 and collided. */
  --z-base: 1;
  --z-sticky: 10;
  --z-dropdown: 150;
  --z-overlay: 200;
  --z-drawer: 210;
  --z-modal: 600;
  --z-lightbox: 700;
  --z-toast: 900;

  /* Motion. One curve for state changes, one for things entering. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-mid: 200ms;
  --dur-slow: 320ms;
  --transition: var(--dur-mid) var(--ease);

  /* Over photos, video and the lightbox: the same in both themes. */
  --on-media: #fff;
  --on-media-soft: rgba(255, 255, 255, 0.7);
  --media-glass: rgba(255, 255, 255, 0.15);
  --media-glass-hover: rgba(255, 255, 255, 0.25);
  --scrim: rgba(0, 0, 0, 0.55);
  --scrim-strong: rgba(0, 0, 0, 0.7);
  --scrim-lightbox: rgba(0, 0, 0, 0.88);
}

/* ─── Dark theme ─────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --bg-base:       #0d1117;
  --bg-sidebar:    #111820;
  --bg-surface:    #161e29;
  --bg-input:      #1a2233;
  --bg-hover:      #1e2d42;
  --bg-active:     #1a3a5c;
  --bg-card:       #131c28;
  --bg-message-u:  #1a2e44;
  --bg-message-a:  #161e29;
  --bg-code:       #0a0f17;

  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.14);

  --text-primary:  #e8f0f8;
  --text-secondary:#8ba4be;
  /* Was #4a6075 — about 3.3:1 on --bg-base, and it carries 10-11px text
     (section labels, dates, image metadata). Lifted to clear AA. */
  --text-muted:    #7d93a8;
  --text-accent:   #f5a623;   /* amber — no purple/blue */
  /* Readable text placed on top of --accent. Was #0d1117 hard-coded in five
     rules and only worked in the light theme by luck. */
  --text-on-accent: #0d1117;

  --accent:        #f5a623;
  --accent-hover:  #ffba47;
  --accent-dim:    rgba(245,166,35,0.15);
  --accent-glow:   rgba(245,166,35,0.25);

  --danger:        #e05555;
  --success:       #3dba7a;
  --warning:       #f5a623;
  --info:          #6fb3d4;

  --focus-ring:    0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);

  --shadow-md:     0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.7);

  /* Noise / pattern overlay opacity */
  --grid-opacity:  0.03;
}

/* ─── Light theme ────────────────────────────────────────────────────────── */

[data-theme="light"] {
  --bg-base:       #f5f0e8;
  --bg-sidebar:    #ede7d8;
  --bg-surface:    #fff9ef;
  --bg-input:      #fdf7ed;
  --bg-hover:      #ede2c8;
  --bg-active:     #e3d2a8;
  --bg-card:       #faf4e8;
  --bg-message-u:  #e9dfc8;
  --bg-message-a:  #fff9ef;
  --bg-code:       #f0ead8;

  --border:        rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.15);

  --text-primary:  #1c1408;
  --text-secondary:#6b5c3e;
  /* Was #a89070 — about 2.4:1 on --bg-base, well under AA. */
  --text-muted:    #7a6647;
  --text-accent:   #b35c00;
  --text-on-accent: #fff9ef;

  --accent:        #b35c00;
  --accent-hover:  #d46c00;
  --accent-dim:    rgba(179,92,0,0.12);
  --accent-glow:   rgba(179,92,0,0.2);

  --danger:        #c0392b;
  --success:       #27ae60;
  --warning:       #b35c00;
  --info:          #2b6a8f;

  --focus-ring:    0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent);

  --shadow-md:     0 4px 20px rgba(0,0,0,0.15);
  --shadow-lg:     0 8px 40px rgba(0,0,0,0.2);

  --grid-opacity:  0.05;
}

/* ─── Reset & Base ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  /* 100dvh = dynamic viewport height, excludes browser chrome on mobile */
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 15px;
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

html {
  min-height: -webkit-fill-available;
}

/* Atmospheric background — multi-layer gradient + noise texture */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 75% 10%, color-mix(in srgb, var(--accent) 8%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 15% 90%, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at 50% 50%, var(--bg-base) 0%, transparent 100%);
}

/* Subtle grid pattern */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: var(--grid-opacity);
}

.hidden { display: none !important; }

/* Read by screen readers, not drawn. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* !important: .icon-btn (display:flex) is declared later with the same
   specificity, so the sidebar's close button showed on desktop too. */

.mobile-only { display: none !important; }

/* ─── Focus ──────────────────────────────────────────────────────────────────
   Every text control sets `outline: none` and replaces it with a border, but
   buttons, chips, links and list items had no focus styling at all — tabbing
   through the interface showed nothing. One rule covers everything; :focus-visible
   keeps it off mouse clicks. */

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-xs);
}

/* Controls that already draw their own border on :focus keep it, and get the
   ring on top rather than instead. */

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: var(--accent);
}

@keyframes genSweep {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

@keyframes justChanged {
  0%   { box-shadow: 0 0 0 0 var(--accent); }
  25%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Motion preferences ─────────────────────────────────────────────────────
   The interface runs several infinite animations (floating icons, pulsing
   badges, spinners) plus an entrance animation per list item. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      /* Zeroing the duration alone still left staggered items waiting out their
         delay, so a cascade under this setting was just a slow blank list. */
      animation-delay: 0ms !important;
      transition-duration: 0.001ms !important;
      transition-delay: 0ms !important;
      scroll-behavior: auto !important;
    }
}

/* ─── Theme icon toggle ──────────────────────────────────────────────────── */

[data-theme="dark"] .icon-moon { display: none; }

[data-theme="dark"] .icon-sun  { display: block; }

[data-theme="light"] .icon-sun  { display: none; }

[data-theme="light"] .icon-moon { display: block; }

@keyframes exampleIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes arPanelOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(4px) scale(0.985); }
}

@keyframes arPanelIn {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Animations ─────────────────────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ─── Scrollbar global ───────────────────────────────────────────────────── */

* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* ─── Pulse animation (used by regen-loading) ────────────────────────────── */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* ─── Mobile responsive ──────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .mobile-only { display: flex !important; }
}