/* Canonity — design tokens + base reset + small util classes.
   Vibe: tech-minimal / Linear-like, warmth of Claude. Warm paper + ink black,
   editorial Instrument Serif italic for headlines, Onest grotesk for UI,
   JetBrains Mono for technical details. */

:root {
  /* Spacing scale (4-base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 80px; --s-11: 120px; --s-12: 160px;

  /* Light (default) — warm paper */
  --bg:        #f5effa;
  --bg-soft:   #ede3f2;
  --bg-panel:  #FFFFFF;
  --ink:       #14130F;
  --ink-soft:  #3C3933;
  --ink-mute:  #807A6E;
  --line:      rgba(18, 15, 20, 0.1);
  --line-strong: rgba(18, 15, 20, 0.2);
  --shadow-sm: 0 1px 0 rgba(19, 15, 20, 0.04), 0 0 0 1px rgba(19, 15, 20, 0.04);
  --shadow-md: 0 4px 16px rgba(19, 15, 20, 0.06), 0 0 0 1px rgba(18, 15, 20, 0.06);
  --shadow-lg: 0 18px 48px rgba(19, 15, 20, 0.1), 0 0 0 1px rgba(19, 15, 20, 0.06);

  /* Accent (default = canonity orange). Overridable via Tweaks. */
  --accent:        #701ad9;
  --accent-soft:   #e6dafb;
  --accent-ink:    #44066b;

  /* Type */
  --f-display: "Fraunces", "Times New Roman", serif;
  
  --f-ui: "Fraunces", "Inter Tight", system-ui, -apple-system, "Helvetica Neue", sans-serif;

  --f-mono: "Fraunces", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-mono-xs: 11px;
  --fs-mono-sm: 12px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 36px;
  --fs-3xl: 56px;
  --fs-4xl: 88px;
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.55;

  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pill: 999px;

  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Dark — Linear-like ink */
body.theme-dark {
  --bg:        #0C0C0A;
  --bg-soft:   #141411;
  --bg-panel:  #1A1A16;
  --ink:       #ece3f4;
  --ink-soft:  #c0b3c9;
  --ink-mute:  #746e83;
  --line:      rgba(244, 239, 227, 0.10);
  --line-strong: rgba(238, 227, 244, 0.22);
  --shadow-sm: 0 1px 0 rgba(0,0,0,0.4), 0 0 0 1px rgba(244,239,227,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45), 0 0 0 1px rgba(244,239,227,0.07);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(244,239,227,0.07);
  --accent-soft: rgba(217, 83, 26, 0.18);
  --accent-ink:  #FBE7DA;
}

/* Density */
body.density-compact { --s-pad-row: 10px; --s-pad-col: 14px; --fs-base: 14px; }
body.density-comfy   { --s-pad-row: 14px; --s-pad-col: 18px; }

/* Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root {
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* Container */
.container { width: min(1240px, 100% - 48px); margin-inline: auto; }
.container-narrow { width: min(880px, 100% - 48px); margin-inline: auto; }

/* Headlines */
.h-display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
.h-italic { font-style: italic; }
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lead { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.5; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  font-size: var(--fs-sm);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--bg-soft); }
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
body.theme-dark .btn-primary {
  background: var(--ink); color: var(--bg);
}
.btn-primary:hover { background: var(--ink-soft); }
.btn-accent {
  background: var(--accent); color: #FFFFFF; border-color: var(--accent);
}
.btn-accent:hover { filter: brightness(1.06); }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--line); }
.btn-sm { padding: 6px 10px; font-size: var(--fs-xs); }
.btn-lg { padding: 14px 22px; font-size: var(--fs-base); }

/* Pill */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-soft);
  background: transparent;
}
.pill-accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Card */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-sm);
}

/* Subtle dotted bg */
.dot-bg {
  background-image: radial-gradient(rgba(20,19,15,0.07) 1px, transparent 1px);
  background-size: 16px 16px;
}
body.theme-dark .dot-bg {
  background-image: radial-gradient(rgba(244,239,227,0.08) 1px, transparent 1px);
}

/* Section spacing */
.section { padding: var(--s-11) 0; }
.section-tight { padding: var(--s-9) 0; }

/* Hide scrollbars where wanted */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Attachments panel — always visible on desktop, hidden on mobile */
@media (max-width: 860px) {
  .attachments-panel { display: none !important; }
}

/* Chat main — sits between sidebar bg-soft and the pure-white composer */
.chat-main {
  background: var(--cb-composer);
  color: var(--ink);
}
body.theme-dark .chat-main {
  background: var(--cb-composer);
  color: var(--ink);
}
.chat-composer {
  background: var(--cb-composer);
  color: var(--ink);
}
body.theme-dark .chat-composer {
  background: var(--cb-composer);
  color: var(--ink);
}
.chat-composer textarea {
  color: var(--ink);
}

/* Footer chatbox: micro-link (privacy / cifratura / tos) — diventano
   violetti al hover/focus per segnalare la cliccabilità e staccarli
   dal disclaimer della riga sopra. */
.cb-foot-link:hover,
.cb-foot-link:focus-visible {
  color: var(--accent);
}

/* Chatbox surfaces — token dedicati alle aree del chatbox (sidebar, header,
   composer, item attivo, bolla user). Mantengono i colori lilla originali
   in light, e diventano scuri coerenti in dark. */
:root {
  --cb-bg:         rgb(247, 243, 248);
  --cb-header:     rgb(251, 244, 251);
  --cb-composer:   rgb(253, 248, 252);
  --cb-active:     rgb(253, 239, 253);
}
body.theme-dark {
  --cb-bg:         #0C0C0A;
  --cb-header:     #141411;
  --cb-composer:   #1a1a16;
  --cb-active:     #333;
}

/* Body background per le pagine /e/chat.php e /home_new.php — segue il theme */
body.theme-light { background-color: var(--cb-bg); color: var(--ink); }
body.theme-dark  { background-color: var(--cb-bg); color: var(--ink); }

/* Code blocks dentro i messaggi della chat: sfondo e bordo che reagiscono al theme.
   Light = grigio chiaro; Dark = scuro con testo chiaro (così rimane leggibile). */
.chat-main pre,
.chat-main code {
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12.5px;
}
.chat-main pre {
  background: #f5f3f7;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  line-height: 1.45;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #14130F;
  margin: 8px 0;
}
.chat-main code {
  background: #f5f3f7;
  padding: 1px 5px;
  border-radius: 3px;
  color: #14130F;
}
.chat-main pre code { background: transparent; padding: 0; color: inherit; }

body.theme-dark .chat-main pre {
  background: #333 !important;
  border-color: rgba(244, 239, 227, 0.14) !important;
  color: #e8e4ed !important;
}
body.theme-dark .chat-main code {
  background: #2a2a2a !important;
  color: #e8e4ed !important;
}
body.theme-dark .chat-main pre code { background: transparent !important; color: inherit !important; }

/* Tabelle nei messaggi assistant (rendering markdown via htmlToReact, wrapper
   .cn-rich-text in chat.jsx). Header con ink/bg invertiti rispetto al body —
   `--ink` e `--bg` si scambiano automaticamente fra light e dark, quindi
   l'header risulta scuro su light e chiaro su dark senza override extra.
   Zebra: righe pari su `--bg-soft`, dispari trasparenti per ereditare il bg
   della bolla messaggio. */
.cn-rich-text table {
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.95em;
  width: 100%;
}
.cn-rich-text th,
.cn-rich-text td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.cn-rich-text thead th,
.cn-rich-text th {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  border-color: var(--ink);
}
.cn-rich-text tbody tr:nth-child(even) td {
  background: var(--bg-soft);
}

/* ── Dark mode: fix puntuali ──────────────────────────────────────────── */

/* (2) Composer card (l'area dove l'utente scrive): in dark forziamo bg scuro
       coerente col resto, e textarea trasparente eredita il bg scuro.
       !important per scavalcare gli inline style={{ background: var(--bg-panel) }}. */
body.theme-dark .chat-composer .card {
  background: #1f1f1c !important;
  border-color: rgba(244, 239, 227, 0.15) !important;
}
body.theme-dark .chat-composer textarea { color: var(--ink) !important; }
body.theme-dark .chat-composer textarea::placeholder { color: rgba(236, 227, 244, 0.4); }

/* Tutti i ".card" generici (composer, search bar sidebar, model pills, typing indicator,
   attachment chip non-image, ecc.) in dark vanno scuri. Vince sugli inline `var(--bg-panel)`. */
body.theme-dark .card { background: #1f1f1c !important; border-color: rgba(244, 239, 227, 0.14) !important; color: var(--ink); }

/* ModelPicker pills (pill orizzontali con i nomi dei modelli sotto il composer) */
body.theme-dark .pill { background: #2a2a26 !important; border-color: rgba(244, 239, 227, 0.18) !important; color: var(--ink) !important; }
body.theme-dark .pill-accent { background: rgba(122, 77, 229, 0.25) !important; color: var(--accent-ink) !important; }

/* Search bar nella sidebar ("Cerca tra le chat…") */
body.theme-dark .cb-search { background: #2a2a26 !important; border-color: rgba(244, 239, 227, 0.15) !important; }

/* AttachmentsPanel a destra: aside ha background di default chiaro, scuro in dark */
body.theme-dark aside { color: var(--ink); }
body.theme-dark .attachments-panel { background: var(--cb-header); }

/* (3) Bottone "Nuova chat" e tutti i btn-primary: in dark devono restare
       evidenti (sfondo scuro #333, testo chiaro) invece di invertirsi. */
body.theme-dark .btn-primary {
  background: #333;
  color: #fff;
  border-color: #444;
}
body.theme-dark .btn-primary:hover { background: #444; }

/* (5) Attachment chip / file caricati: forziamo bg scuro coerente in dark
       (override di .card e dei gradient ereditati da bg-soft/bg-panel). */
body.theme-dark .card[data-attachment],
body.theme-dark [data-attachment-chip] {
  background: #2a2a26 !important;
  border-color: rgba(244, 239, 227, 0.18) !important;
  color: var(--ink) !important;
}

/* (6) Scrollbar custom — WebKit (Chrome/Edge/Safari) + Firefox.
       Light: track trasparente con thumb grigio scuro semitrasparente.
       Dark: track scuro con thumb più chiaro. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(20, 19, 15, 0.22);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(20, 19, 15, 0.4); background-clip: padding-box; }
html { scrollbar-color: rgba(20, 19, 15, 0.3) transparent; scrollbar-width: thin; }

body.theme-dark ::-webkit-scrollbar-track { background: #141411; }
body.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(244, 239, 227, 0.18);
  border: 2px solid #141411;
  background-clip: padding-box;
}
body.theme-dark ::-webkit-scrollbar-thumb:hover { background: rgba(244, 239, 227, 0.32); background-clip: padding-box; }
body.theme-dark html,
body.theme-dark { scrollbar-color: rgba(244, 239, 227, 0.25) #141411; }

/* Focus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Dividers */
.hr { height: 1px; background: var(--line); border: 0; }

/* Tags */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--r-1);
  background: var(--bg-soft); border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: var(--fs-mono-xs);
  color: var(--ink-soft);
}

/* Animations */
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.cursor::after { content: "▍"; margin-left: 2px; animation: blink 1s steps(1) infinite; color: var(--accent); }

/* Logo */
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-size: 22px;
  letter-spacing: -0.01em;
}
.logo-mark {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}