src/styles/theme.css

/* ═══════════════════════════════════════════════════════════════════
   THEME SYSTEM — Safari/iPhone stabilized
   All CSS variables use direct color values (rgba/hsl) so they work
   both in CSS rules AND in React inline styles (no hsl() wrapper needed).
   ═══════════════════════════════════════════════════════════════════ */

@import './z-index.css';

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME (default)
   ═══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  /* ─── Base surfaces — Glow Glass ─── */
  --bg:        #0d1117;
  --bg2:       #0d1020;
  --bg3:       #111526;
  --bg4:       #161b2e;
  --bg-surface: #111526;

  /* ─── Borders ─── */
  --border:        rgba(255, 255, 255, 0.08);
  --border2:       rgba(255, 255, 255, 0.12);
  --border-indigo: rgba(99, 102, 241, 0.28);
  --border-cyan:   rgba(0, 212, 255, 0.30);
  --border-glow:   rgba(99, 102, 241, 0.50);

  /* ─── Text ─── */
  --text:       #f0f0ff;
  --text-muted: #b8bcd4;
  --text-dim:   #6e7494;

  /* ─── Primary / accent ─── */
  --primary:       #6366f1;
  --primary-light: #818cf8;
  --primary-dark:  #4f46e5;
  --primary-glow:  rgba(99, 102, 241, 0.12);
  --accent:        #00d4ff;
  --accent-dim:    rgba(0, 212, 255, 0.14);
  --accent-glow:   rgba(0, 212, 255, 0.18); /* P10-CSS: -55% */
  --accent-cyan:   #00d4ff;
  --accent-purple: rgb(139, 92, 246);

  /* ─── Avatar & brand ─── */
  --avatar-primary: #6366f1;
  --avatar-accent:  #00d4ff;
  --narration-text: rgba(0, 212, 255, 0.70);

  /* ─── Glass / terminal surfaces ─── */
  --glass-bg:      rgba(8, 10, 24, 0.58);
  --glass-border:  rgba(255, 255, 255, 0.10);
  --glass-blur:    blur(8px) saturate(120%); /* P10-CSS: ridotto per performance */
  --glass-surface: rgba(13, 16, 36, 0.58);

  /* ─── Glow colors ─── */
  --glow-indigo:  rgba(99, 102, 241, 0.15); /* P10-CSS: -57% */
  --glow-cyan:    rgba(0, 212, 255, 0.12);  /* P10-CSS: -60% */
  --glow-violet:  rgba(139, 92, 246, 0.12); /* P10-CSS: -57% */

  /* ─── Terminal / log panel (always dark) ─── */
  --terminal-bg:          rgba(10, 12, 22, 0.90);
  --terminal-border:      rgba(255, 255, 255, 0.07);
  --terminal-header-bg:   rgba(0, 0, 0, 0.20);
  --replit-thought-bg:    rgba(255, 255, 255, 0.02);
  --replit-thought-border: rgba(255, 255, 255, 0.06);
  --replit-action-log-color:     rgba(148, 163, 184, 0.80);
  --replit-action-explain-color: rgba(129, 140, 248, 0.90);
  --replit-result-color:         rgba(74, 222, 128, 0.90);
  --replit-test-pass:    rgba(74, 222, 128, 0.85);
  --replit-test-fail:    rgba(248, 113, 113, 0.85);

  /* ─── Footer buttons ─── */
  --footer-btn-color:  #a8aac8;
  --footer-btn-bg:     rgba(255, 255, 255, 0.04);
  --footer-btn-border: rgba(255, 255, 255, 0.08);

  /* ─── Chip / action card tokens ─── */
  --chip-bg:       rgba(255, 255, 255, 0.09);
  --chip-border:   rgba(255, 255, 255, 0.15);
  --chip-bg-hover: rgba(255, 255, 255, 0.14);
  --suggest-label-color: rgba(255, 255, 255, 0.30);

  /* ─── Component tokens ─── */
  --card-bg:               rgba(8, 10, 28, 0.72);
  --card-bg-error:         rgba(30, 8, 8, 0.80);
  --card-bg-streaming:     rgba(16, 18, 40, 0.48);
  --card-border-idle:      rgba(99, 102, 241, 0.14);
  --card-border-streaming: rgba(0, 212, 255, 0.42);
  --card-border-error:     rgba(239, 68, 68, 0.36);
  --card-shadow-idle:
    0 0 0 1px rgba(99, 102, 241, 0.08),
    0 4px 20px rgba(0, 0, 0, 0.30);
  --card-shadow-streaming:
    0 0 0 1px rgba(0, 212, 255, 0.18),
    0 0 28px 0 rgba(0, 212, 255, 0.14),
    0 8px 32px rgba(0, 0, 0, 0.40);
  --stream-progress-color: rgba(99, 102, 241, 0.70);

  --user-bubble-bg:     rgba(99, 102, 241, 0.16);
  --user-bubble-border: rgba(99, 102, 241, 0.32);
  --user-bubble-text:   #e8eaff;

  --divider-line: rgba(255, 255, 255, 0.04);

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* ─── Base surfaces ─── */
  --bg:        rgb(249, 250, 252);   /* hsl(210,20%,98%) */
  --bg2:       rgb(235, 239, 245);   /* hsl(210,16%,94%) */
  --bg3:       rgb(220, 225, 235);   /* hsl(210,14%,89%) */
  --bg4:       rgb(197, 204, 218);   /* hsl(210,12%,80%) */

  /* ─── Borders ─── */
  --border:    rgb(210, 218, 230);   /* hsl(210,14%,86%) */
  --border2:   rgb(192, 200, 214);   /* hsl(210,12%,78%) */

  /* ─── Text ─── */
  --text:       rgb(23, 26, 37);     /* hsl(220,25%,12%) */
  --text-muted: rgb(101, 110, 130);  /* hsl(220,12%,44%) */
  --text-dim:   rgba(55, 65, 100, 0.82); /* Bug#1: contrast fix — was 0.55 opacity, fails WCAG AA */

  /* ─── Primary / accent ─── */
  --primary:       rgb(79,  82, 224);
  --primary-light: rgb(99, 102, 241);
  --primary-dark:  rgb(60,  63, 205);
  --primary-glow:  rgba(99, 102, 241, 0.10);
  --accent-cyan:   rgb(2, 132, 199);
  --accent-purple: rgb(109, 40, 217);

  /* ─── Glass / terminal surfaces (always dark for readability) ─── */
  --glass-surface:  rgba(245, 246, 252, 0.90);
  --glass-blur:     blur(12px);

  /* ─── Terminal / log panel — ALWAYS dark even in light theme ─── */
  --terminal-bg:          rgba(14, 16, 28, 0.93);
  --terminal-border:      rgba(255, 255, 255, 0.08);
  --terminal-header-bg:   rgba(0,  0,  0, 0.22);
  --replit-action-log-color: rgba(178, 192, 220, 0.80);
  --replit-test-pass:     rgba(74, 222, 128, 0.90);
  --replit-test-fail:     rgba(248, 113, 113, 0.90);

  /* ─── Typography ─── */
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", Menlo, monospace;

  /* ─── Component tokens ─── */
  --card-bg:               rgba(255, 255, 255, 0.92);
  --card-bg-error:         rgba(239, 68, 68, 0.04);
  --card-border-idle:      rgba(0, 0, 0, 0.08);
  --card-border-streaming: rgba(99, 102, 241, 0.28);
  --card-border-error:     rgba(239, 68, 68, 0.22);
  --card-shadow-idle:      0 2px 12px rgba(0, 0, 0, 0.06);
  --card-shadow-streaming: 0 4px 20px rgba(99, 102, 241, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.12);

  --user-bubble-bg:     rgba(99, 102, 241, 0.10);
  --user-bubble-border: rgba(99, 102, 241, 0.25);
  --user-bubble-text:   rgba(22, 22, 50, 0.92);

  --divider-line:      rgba(0, 0, 0, 0.06);
  --suggest-label-color: rgba(60, 70, 110, 0.55); /* QF-1: label visibile su sfondo chiaro */
  --footer-btn-color:  rgba(70, 70, 110, 0.65);
  --footer-btn-bg:     rgba(0, 0, 0, 0.03);
  --footer-btn-border: rgba(0, 0, 0, 0.09);

  /* ─── Chip / action card tokens — matching screenshot (light gray on white) ─── */
  --chip-bg:       rgba(0, 0, 0, 0.07);
  --chip-border:   rgba(0, 0, 0, 0.13);
  --chip-bg-hover: rgba(0, 0, 0, 0.11);
  --chip-bg-active: rgba(99, 102, 241, 0.12); /* QF-2: chip attivo più visibile */
  --narration-text: rgba(2, 132, 199, 0.80); /* QF-3: narration su light theme */

  color-scheme: light;
}

:root {
  /* ─────────────────────────────────────────
     SPACING
     ───────────────────────────────────────── */

  --spacing-xs:  0.25rem;
  --spacing-sm:  0.5rem;
  --spacing-md:  1rem;
  --spacing-lg:  1.5rem;
  --spacing-xl:  2rem;
  --spacing-2xl: 3rem;

  /* ─────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────── */

  --font-display: "Geist", "Inter", sans-serif;
  --font-family-base:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    sans-serif; /* Bug#5: emoji font normalization across browsers/OS */

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;

  /* ─── Type scale shortcuts ─── */
  --text-xs:   0.70rem;
  --text-sm:   0.82rem;
  --text-base: 0.92rem;
  --text-md:   1.00rem;
  --text-lg:   1.10rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.50rem;

  /* ─────────────────────────────────────────
     ANIMATIONS
     ───────────────────���───────────────────── */

  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─────────────────────────────────────────
     RADIUS
     ───────────────────────────────────────── */

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ─────────────────────────────────────────
     SHADOWS
     ───────────────────────────────────────── */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.24);

  /* ─────────────────────────────────────────
     LAYOUT
     ───────────��───────────────────────────── */

  --header-height: 52px;

  color-scheme: dark;

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  font-synthesis: none;
  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────
   GLOBAL RESET
   ───────────────────────────────────────── */

html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;

  background: var(--bg);

  -webkit-tap-highlight-color: transparent;

  overscroll-behavior-y: none;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;

  overflow-x: hidden;

  background: var(--bg);
  color: var(--text);

  font-family: var(--font-family-base);

  -webkit-font-smoothing: antialiased;

  touch-action: manipulation;
}

/* Safari viewport fix */
#root {
  min-height: 100vh;
  min-height: 100dvh;

  width: 100%;
  overflow-x: hidden;
}

/* ─────────────────────────────────────────
   SCROLLBAR
   ��──────────────────────────────────────── */

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--bg4);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bg4) transparent;
}

/* ─────────────────────────────────────────
   MEDIA
   ───────────────────────────────────────── */

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────
   INPUT FIXES IOS
   ───────────────────────────────────────── */

input,
textarea,
select,
button {
  font: inherit;
}

input,
textarea {
  font-size: 16px;
}

/* evita zoom automatico iOS */
@media screen and (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────── */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-dot {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: scale(0.9);
  }

  40% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes brain-glow {
  0%,100% { filter: drop-shadow(0 0 3px rgba(167,139,250,0.4)); }
  50%      { filter: drop-shadow(0 0 8px rgba(167,139,250,0.8)); }
}

/* ─────────────────────────────────────────
   AGENT STEP CARDS — terminal log panel
   Always dark regardless of theme (like a real terminal).
   ───────────────────────────────────────── */

.agent-terminal-panel {
  background: var(--terminal-bg) !important;
  border-color: var(--terminal-border) !important;
}

/* Step cards chip grid */
.agent-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.agent-chip {
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  opacity: 0.60;
  transition: all 0.14s ease;
}

.agent-chip:hover {
  background: var(--chip-bg-hover);
  opacity: 0.85;
}

.agent-chip.selected {
  opacity: 1;
}

/* ─────────────────────────────────────────
   CHAT STREAMING ANIMATION
   ────────────────────────────��──────────── */

@keyframes chat-card-pulse {
  0%, 100% { border-color: rgba(99, 102, 241, 0.30); }
  50%       { border-color: rgba(99, 102, 241, 0.55); }
}

.chat-card-streaming {
  animation: chat-card-pulse 2.4s ease-in-out infinite;
}

/* ─────────────────────────────────────────
   S443: BARRA PROGRESSO INDETERMINATE
   1px in cima alla AI card durante streaming.
   CSS puro — zero JS, zero GPU pesante.
   ───────────────────────────────────────── */

@keyframes stream-progress-slide {
  0%   { transform: translateX(-100%); width: 45%; }
  50%  { transform: translateX(60%);   width: 45%; }
  100% { transform: translateX(200%);  width: 45%; }
}

.stream-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 45%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--stream-progress-color, rgba(99,102,241,0.70)) 40%,
    rgba(0, 212, 255, 0.80) 60%,
    transparent 100%
  );
  animation: stream-progress-slide 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  border-radius: 1px;
}

/* ───────────────────────────────���─────────
   S659: CARD SCAFFOLD ENTER ANIMATION
   First-mount lift for AI reply cards
   ───────────────────────────────────────── */

@keyframes card-scaffold-enter {
  from {
    opacity: 1;
    transform: translateY(4px) scale(0.996);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-card-enter {
  animation: card-scaffold-enter 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}