/* Design system "Modernist" (da Claude Design) + estensioni specifiche dell'app (chat,
   menu mobile). Sezioni: 1) token e stili base del design system, 2) componenti del design
   system, 3) layout condiviso (.wrap, nav, footer), 4) componenti specifici dell'app (chat,
   piani, account, auth split), 5) media query mobile in fondo. */

/* Font self-hosted (invece di @import da fonts.googleapis.com): evita la richiesta di terze
   parti verso Google rilevata dagli scanner privacy (IP del visitatore altrimenti condiviso
   senza base giuridica, vedi sentenza LG München I 2022). File variabile: la stessa risorsa
   copre i tre pesi usati (400/600/800). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
}

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
}

html {
  background: var(--color-bg);
  overflow-x: hidden;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.hr {
  height: 2px;
  border: 0;
  margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* ── bottoni ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-block { width: 100%; }

/* ── form ── */
.field > label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.error-text {
  color: var(--color-accent-700);
  font-size: 13px;
  font-weight: 600;
}

/* ── tag ── */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ── tabelle (dal design system, non usata nei mockup originali ma serve per /admin) ── */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.table-wrap { overflow-x: auto; }

/* ── navigazione ── */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 18px;
  margin-right: auto;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  line-height: 1;
}
.nav-logo {
  display: block;
  flex-shrink: 0;
}
.nav-brand-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page']:not(.btn) { color: var(--color-accent); }
.nav form { display: inline; margin: 0; }
.nav button.btn { font: inherit; }
/* #site-nav è il contenitore del menu (voci + gruppo bottoni): serve un layout esplicito
   qui, altrimenti sopra i 640px resta un <div> a blocco e le voci vanno a capo a caso. La
   versione mobile (display:none / .nav-open) è definita più sotto, nella media query. */
#site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
/* Stesso gap del contenitore padre: così Piani/Privacy/Account/Esci/Vai alla chat risultano
   tutti equidistanti tra loro, invece di avere uno spazio diverso dentro il gruppo bottoni. */
.nav-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* ── layout condiviso ── */
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}

.site-footer {
  padding: 28px clamp(20px, 5vw, 72px);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 2px solid var(--color-divider);
}
.site-footer span { margin-right: auto; }
.site-footer a { color: inherit; }

main { flex: 1; }
body { display: flex; flex-direction: column; min-height: 100vh; }

/* ── hamburger mobile (non fa parte del design system, aggiunta nostra) ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: 1px solid var(--color-divider);
  background: var(--color-bg);
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--color-text);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-open span:nth-child(2) { opacity: 0; }
.nav-toggle-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── auth split (login/registrati) ── */
.auth-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.auth-col {
  display: flex;
  align-items: center;
  padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 72px);
}
.auth-col-inner { width: 100%; margin-left: auto; }
.auth-aside {
  background: var(--color-accent);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  padding: clamp(40px, 6vw, 88px) clamp(20px, 5vw, 72px);
}
.auth-aside-divider { height: 2px; background: var(--color-bg); opacity: 0.4; margin: 32px 0; }
.auth-feature { padding: 18px 0; border-top: 2px solid color-mix(in srgb, var(--color-bg) 40%, transparent); }
.auth-feature:last-child { border-bottom: 2px solid color-mix(in srgb, var(--color-bg) 40%, transparent); }
.auth-feature-title { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin: 0 0 4px; color: var(--color-bg); }
.auth-feature-body { font-size: 13.5px; line-height: 1.55; margin: 0; color: var(--color-bg); opacity: 0.9; }

/* ── account ── */
.acct-panel { border: 2px solid var(--color-divider); }
.acct-row {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--color-divider);
}
.acct-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.acct-grid > div { padding: 24px 28px; }
.acct-grid > div:first-child { border-right: 2px solid var(--color-divider); }
.usage-bar { height: 10px; background: var(--color-neutral-200); overflow: hidden; margin-top: 8px; }
.usage-bar-fill { height: 100%; background: var(--color-accent); }
.status-dot { width: 8px; height: 8px; background: var(--color-accent); display: inline-block; }

/* ── piani ── */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 2px solid var(--color-divider);
}
.plan-col {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  border-right: 2px solid var(--color-divider);
}
.plan-col:last-child { border-right: none; }
.plan-col.highlighted { background: var(--color-accent); color: var(--color-bg); }
.plan-price { margin: 16px 0 0; font-family: var(--font-heading); font-weight: 800; font-size: 44px; line-height: 1; }
.plan-price span { font-family: var(--font-body); font-weight: 400; font-size: 15px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.plan-col.highlighted .plan-price span { color: var(--color-bg); opacity: 0.8; }
.plan-features { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.plan-features li { padding-top: 12px; border-top: 1px solid var(--color-divider); }
.plan-col.highlighted .plan-features li { border-top: 1px solid color-mix(in srgb, var(--color-bg) 40%, transparent); }
.plan-badge { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--color-bg); color: var(--color-accent); padding: 3px 8px; }

/* ── chat ── */
.chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 2px solid var(--color-divider);
  background: var(--color-neutral-100);
  height: min(72vh, 760px);
}
.chat-panel-head {
  padding: 16px 20px;
  border-bottom: 2px solid var(--color-divider);
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
}
.msg { max-width: 88%; }
.msg-user { max-width: 82%; align-self: flex-end; }
.msg-role {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 6px;
}
.msg-user .msg-role { text-align: right; }
.msg-bubble {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}
.msg-bubble p { margin: 0 0 10px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble ul, .msg-bubble ol { margin: 0 0 10px; padding-left: 18px; }
.msg-bubble li { margin-bottom: 4px; }
.msg-assistant .msg-bubble { background: var(--color-neutral-100); border: 1px solid var(--color-divider); }
.msg-user .msg-bubble { background: var(--color-accent); color: var(--color-bg); }
.msg-citations { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.msg-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  border: 1px dashed var(--color-divider);
  padding: 5px 10px;
  margin-bottom: 8px;
  max-width: 100%;
  overflow-wrap: break-word;
}
.chat-form {
  border-top: 2px solid var(--color-divider);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-form input[type="text"] { flex: 1; }
.chat-attach-label {
  flex-shrink: 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  border: 1px dashed var(--color-divider);
  padding: 9px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ── drag & drop e chip allegati (chat) ── */
.chat-panel { position: relative; }
#chat-dropzone-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15px;
  color: var(--color-accent-700);
  background: color-mix(in srgb, var(--color-accent-100) 92%, transparent);
  border: 2px dashed var(--color-accent);
  pointer-events: none;
  z-index: 5;
}
.chat-panel.is-dragover #chat-dropzone-overlay { display: flex; }

#chat-attachments-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px 0;
}
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  padding: 5px 6px 5px 10px;
  max-width: 14rem;
}
.attachment-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-chip button {
  all: unset;
  cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}
.attachment-chip button:hover { color: var(--color-accent-700); }

.msg-typing .msg-bubble { display: inline-flex; align-items: center; gap: 5px; }
.typing-dot {
  width: 6px;
  height: 6px;
  background: color-mix(in srgb, var(--color-text) 55%, transparent);
  animation: typing-bounce 1.1s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.chat-history-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.history-item {
  all: unset;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 10px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-item:hover { background: var(--color-surface); }
.history-item.is-active { background: var(--color-accent-100); color: var(--color-accent-700); font-weight: 600; }

.rail-card { border: 2px solid var(--color-divider); padding: 18px 20px; }
.rail-card-accent { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.rail-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin: 0 0 10px;
}
.rail-suggest { display: flex; flex-direction: column; }
.rail-suggest button {
  all: unset;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 10px 0;
  border-top: 1px solid var(--color-divider);
  color: var(--color-text);
}
.rail-suggest button:hover { color: var(--color-accent); }

/* ── home ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 4vw, 56px);
}
.stat-number { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 3.4vw, 46px); color: var(--color-accent); margin: 0; line-height: 1; }
.stat-label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 65%, transparent); margin: 14px 0 0; }

.feature-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 24px clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding: 28px 0;
  border-top: 2px solid var(--color-divider);
}
.feature-row:last-child { border-bottom: 2px solid var(--color-divider); }
.feature-index { font-family: var(--font-heading); font-weight: 800; font-size: 15px; margin: 0; }
.feature-title { font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.feature-body { font-size: 15.5px; line-height: 1.6; margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 52ch; }

.quote-block { border-left: 2px solid var(--color-accent); padding: 8px 0 8px 24px; max-width: 64ch; }

.cta-band { background: var(--color-accent); color: var(--color-bg); }
.cta-band h2 { color: var(--color-bg); max-width: 18ch; }

/* ══════════════════════════ mobile ══════════════════════════ */
@media (max-width: 760px) {
  .auth-grid { grid-template-columns: 1fr !important; }
  .auth-aside { display: none !important; }
}

@media (max-width: 720px) {
  .acct-grid { grid-template-columns: 1fr !important; }
  .acct-grid > div:first-child { border-right: none; border-bottom: 2px solid var(--color-divider); }
}

@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr !important; }
  .plan-col { border-right: none !important; border-bottom: 2px solid var(--color-divider); }
  .plan-col:last-child { border-bottom: none; }
}

@media (max-width: 900px) {
  .chat-layout { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .nav { padding: 14px 16px; flex-wrap: wrap; row-gap: 0.75rem; }
  .nav-brand { font-size: 15px; max-width: calc(100% - 3.5rem); }
  .nav-brand-sub { display: block; font-size: 9.5px; }

  .nav-toggle { display: flex; }

  #site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 0.25rem;
  }
  #site-nav.nav-open { display: flex; }
  .nav-group { flex-direction: column; align-items: stretch; width: 100%; gap: 0.6rem; }
  .nav-group .btn, .nav-group form, .nav-group form button { width: 100%; }

  .wrap { padding: 0 1rem; }
  h1 { font-size: 1.75rem; }

  .chat-attach-label { max-width: none; white-space: normal; overflow-wrap: break-word; text-align: center; }
  .chat-form { flex-wrap: wrap; row-gap: 0.6rem; }
  .chat-form input[type="text"] { order: 1; flex: 1 1 100%; min-width: 0; }
  .chat-attach-label { order: 2; flex: 1 1 auto; }
  .chat-form button { order: 3; flex: 1 1 auto; }
  .msg, .msg-user { max-width: 95%; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-row { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .feature-index { color: var(--color-accent); }
}