/* ─────────────────────────────────────────────────────────────────────
 * chat.css — components specifici per la home chat (/)
 * Requires: tokens.css loaded first.
 * Pattern: BEM-light + utility classes. Componenti isolati,
 *          parameterizzati via custom properties (--*).
 * ───────────────────────────────────────────────────────────────────── */

/* ─── Reset + base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  background: var(--color-surface-0);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  line-height: var(--leading-normal);
  font-size: var(--text-base);
  letter-spacing: var(--tracking-normal);
}

/* Subtle industrial dotted texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.02) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

/* Visible focus ring (accessibility — never remove) */
:focus-visible {
  outline: 2px solid var(--color-brand-sky);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── HEADER ──────────────────────────────────────────────────────── */
header {
  position: sticky;
  /* Top=0 STRICT — fix 2026-05-31 user-segnalato fessura mobile:
     Chrome mobile address bar dinamico cambia viewport height, e top:0
     con backdrop-filter glass causava "saltare" del sticky lasciando
     fessura visibile tra viewport top e header. Fix: top:0 + margin:0
     + nessuna ancora dinamica + bg solido fallback se backdrop-filter
     non rispetta su iOS quando viewport shrinks. */
  top: 0;
  margin: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid var(--color-border-faint);
  background: var(--color-surface-glass);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile: bg SOLIDO (no glass) + safe-area-inset coverage per evitare
   fessura translucida durante scroll dinamico address-bar Chrome/Safari iOS.
   Fix 2026-06-02 user-segnalato: "navbar non attaccata in alto, fessura
   intravede sotto durante scroll".
   Cause root: viewport-fit=cover + sticky top:0 → top dell'header NON copre
   `env(safe-area-inset-top)` (notch iOS). Anche con bg solid, la zona
   safe-area resta trasparente → si vede main scrollare sotto.
   Fix:
    - padding-top sommato a safe-area-inset-top
    - bg extends a coprire la safe area via box-shadow inset (no clipping)
    - top: calc(0 - safe-area) per "agganciare" sopra il viewport visivo */
@media (max-width: 768px) {
  /* IMPORTANT 2026-06-02 — NON CAMBIARE A position:fixed.
     Una sessione precedente l'aveva fatto e provoca: navbar sparita
     + corpo non centrato (body display:flex column rompe il fixed layout).
     Vedi commento "RIPRISTINO sticky" più sotto in questo file.
     Per fixare lo sticky che non rimane su Samsung Internet, intervenire
     SUL FLOW SCROLL del body (rimuovere overflow interni di .chat o
     forzare body a scroll-root) — NON convertire header a fixed. */
  header {
    position: -webkit-sticky;
    position: sticky;
    top: 0 !important;
    background: var(--color-surface-0, #0b0b0d) !important;
    box-shadow: 0 -60px 0 0 var(--color-surface-0, #0b0b0d) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding-top: env(safe-area-inset-top, 0) !important;
  }
  html, body { margin-top: 0 !important; padding-top: 0 !important; }
}

/* ─── Nav CTA FlowForge — desktop + mobile, accanto a IT/EN ────────── */
/* Link "bello" verso flowforge.automazionezeli.com: pill brand-color con
   hover lift, sempre visibile (desktop + mobile, fuori dall'hamburger). */
.nav-flowforge-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.25);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  white-space: nowrap;
}
.nav-flowforge-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
  filter: brightness(1.08);
}
.nav-flowforge-cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.nav-flowforge-cta svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  display: block;
}
/* Default desktop: full text. Mobile (<=768px): short text. Definito con
   display:inline-block esplicito invece di affidarsi a default inline. */
.nav-flowforge-cta .cta-full { display: inline-block; }
.nav-flowforge-cta .cta-short { display: none; }
@media (max-width: 768px) {
  .nav-flowforge-cta {
    /* Fix user-segnalato 2026-06-02: "scritta FlowForge si legge malissimo
       su mobile, perfetta su desktop". Cause: font-size 12px + font-weight
       600 + gradient blu-violet bright = AA contrast borderline. Bump:
       font-size 13px, weight 700, text-shadow subtle per leggibilità. */
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.015em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    /* Gradient leggermente più saturo per contrasto migliore con testo bianco. */
    background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);
  }
  .nav-flowforge-cta .cta-full { display: none !important; }
  .nav-flowforge-cta .cta-short { display: inline-block !important; }
}
/* Quando il banner promo NON è presente nel DOM (es. dismissed in futuro),
   override via JS: document.documentElement.style.setProperty('--promo-banner-height','0px'). */

.header-inner {
  /* Allineato a --page-max / --page-gutter (definite in index.html :root)
     per width uniforme tra navbar e tutti i contenitori della pagina. */
  max-width: var(--page-max, 76rem);
  margin: 0 auto;
  padding: var(--space-4) var(--page-gutter, clamp(1rem, 3vw, 2rem));
  display: flex;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-brand-sky) 0%, var(--color-brand-deep) 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px var(--color-brand-edge), inset 0 1px 0 rgba(255,255,255,0.2);
  flex-shrink: 0;
}
.brand-mark svg { width: 22px; height: 22px; color: var(--color-text-on-accent); }

.brand-text { display: flex; flex-direction: column; line-height: var(--leading-tight); }
.brand-name { font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-primary); }
.brand-sub { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-tertiary); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-top: 2px; }
/* Logo image override HTML width/height attribute. Default desktop 40px, mobile 32px. */
.brand-logo-img { width: auto !important; height: 40px !important; max-width: 140px !important; object-fit: contain; flex-shrink: 0; display: block; }

.header-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/* Navbar links minimal pattern (Vercel/Linear/Notion) — no border boxes.
 * Pre-refactor 2026-05-29 usavamo border+bg → tasti rettangolari che
 * "fanno schifo" su display ad alta densita\` + wrappavano "Chi siamo"
 * su due righe per assenza di white-space:nowrap. */
.header-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  min-height: 32px;  /* tap target — accessibility */
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
}
.header-link:hover {
  color: var(--color-text-primary);
}
.header-link::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 1.5px;
  background: var(--color-brand-sky);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-out);
}
.header-link:hover::after { transform: scaleX(1); }
.header-link svg { width: 14px; height: 14px; }

/* ─── Lang switcher IT/EN — pillola allineata a legal.css ──────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-tertiary);
}
.lang-btn {
  background: none;
  border: none;
  padding: 8px 12px;
  min-width: 36px;
  min-height: 36px;
  cursor: pointer;
  font: inherit;
  /* Fix Lighthouse a11y 2026-06-03 — contrast ratio AAA: text-secondary
     ha contrasto >7:1 su bg scuro (era text-tertiary ~3.8:1, fail WCAG AA). */
  color: var(--color-text-secondary);
  border-radius: 4px;
  transition: color var(--duration-fast) var(--ease-out);
}
.lang-btn:hover,
.lang-btn:focus-visible { color: var(--color-text-primary); }
.lang-btn[aria-pressed="true"] {
  color: var(--color-text-primary);
  font-weight: 600;
}
.lang-sep { opacity: 0.6; }

.status-dot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-tertiary);
}
.status-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  box-shadow: 0 0 8px var(--color-success);
  animation: pulse 2s ease-in-out infinite;
}
.status-dot[data-state="offline"]::before {
  background: var(--color-danger, #ef4444);
  box-shadow: 0 0 8px var(--color-danger, #ef4444);
  animation: none;
}
.status-dot[data-state="unknown"]::before {
  background: var(--color-warning, #f59e0b);
  box-shadow: 0 0 8px var(--color-warning, #f59e0b);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ─── MAIN LAYOUT ─────────────────────────────────────────────────── */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: var(--layout-max-chat);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
  position: relative;
  z-index: var(--z-base);
}

.chat {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) 0 var(--space-4);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.chat::-webkit-scrollbar { width: 8px; }
.chat::-webkit-scrollbar-track { background: transparent; }
.chat::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: 4px; }
.chat::-webkit-scrollbar-thumb:hover { background: var(--color-border-strong); }

/* ─── WELCOME / HERO ──────────────────────────────────────────────── */
.welcome {
  text-align: center;
  padding: 56px 0 var(--space-8);
  animation: fadein var(--duration-slow) var(--ease-out);
}
.welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  border: 1px solid rgba(14, 165, 233, 0.2);
  color: var(--color-brand-sky);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
}
.welcome-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-sky);
  box-shadow: 0 0 6px var(--color-brand-sky);
}
.welcome h1, .welcome h2 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
}
.welcome h1 .highlight, .welcome h2 .highlight {
  background: linear-gradient(135deg, var(--color-brand-sky) 0%, var(--color-brand-sky-hover) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.welcome p {
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  max-width: 540px;
  margin: 0 auto var(--space-8);
}
.welcome p strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
  max-width: var(--layout-max-prose);
  margin: 0 auto;
}
.suggestion {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4) 18px;
  font-family: inherit;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
  min-height: 48px;     /* tap target — accessibility */
  transition: all var(--duration-fast) var(--ease-out);
  width: 100%;
  overflow: hidden;
}
.suggestion::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, var(--color-brand-sky) 0%, transparent 50%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.suggestion:hover, .suggestion:focus-visible {
  background: var(--color-surface-2);
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  outline: none;
}
.suggestion:hover::before, .suggestion:focus-visible::before { opacity: 0.6; }

.suggestion-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-brand-soft);
  color: var(--color-brand-sky);
  display: grid;
  place-items: center;
}
.suggestion-icon svg { width: 16px; height: 16px; }

.suggestion-text { flex: 1; line-height: 1.45; }
.suggestion-text strong {
  display: block;
  color: var(--color-text-primary);
  font-weight: 600;
  margin-bottom: 2px;
  font-size: 14px;
}

/* ─── MESSAGES ────────────────────────────────────────────────────── */
.msg {
  display: flex;
  gap: var(--space-4);
  padding: 18px 0;
  animation: msgIn 0.35s var(--ease-out) both;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg .avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.msg.user .avatar {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}
.msg.assistant .avatar {
  /* 2026-05-30: SVG sostituito con foto Liara (liara.png). Il gradient
     non si vede sotto l'immagine ma RESTA come fallback in caso di img
     broken. Lo shadow brand resta come "glow ring" attorno alla foto. */
  background: linear-gradient(135deg, var(--color-brand-sky) 0%, var(--color-brand-deep) 100%);
  color: var(--color-text-on-accent);
  box-shadow: 0 2px 8px var(--color-brand-edge), inset 0 1px 0 rgba(255,255,255,0.2);
  overflow: hidden;
}
.msg.assistant .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.msg-content {
  flex: 1;
  min-width: 0;
  padding-top: 5px;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-primary);
}
.msg-role {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-family: var(--font-mono);
}
.msg-content p { margin-bottom: 10px; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content pre {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  margin: var(--space-3) 0;
}
.msg-content code {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-default);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--color-brand-cyan);
}
.msg-content pre code { background: none; border: 0; padding: 0; color: var(--color-text-primary); }
.msg-content ul, .msg-content ol { margin: 10px 0 10px var(--space-6); color: var(--color-text-secondary); }
.msg-content li { margin-bottom: 6px; padding-left: 4px; }
.msg-content li::marker { color: var(--color-brand-sky); }
.msg-content a {
  color: var(--color-brand-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, 0.3);
  transition: border-color 0.15s;
}
.msg-content a:hover { border-color: var(--color-brand-cyan); }
.msg-content strong { color: var(--color-text-primary); font-weight: 600; }
.msg-content em { color: var(--color-text-secondary); font-style: italic; }

/* ─── TYPING INDICATOR + DYNAMIC STATUS ──────────────────────────── */
.typing {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
}
.typing-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
.typing-dots span {
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-brand-sky);
  animation: typingDot 1.4s infinite;
  opacity: 0.4;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40%           { opacity: 1;   transform: scale(1); }
}

.typing-status {
  font-size: 13px;
  color: var(--color-text-tertiary);
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  animation: typingStatusPulse 2.4s ease-in-out infinite;
}
@keyframes typingStatusPulse {
  0%, 100% { color: var(--color-text-tertiary); }
  50%      { color: var(--color-text-secondary); }
}

/* ─── ERROR BANNER ────────────────────────────────────────────────── */
.error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-error);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-edge);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 14px;
  margin: var(--space-3) 0;
  line-height: 1.5;
}
.error svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }

/* ─── COMPOSER ────────────────────────────────────────────────────── */
.composer-wrap {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: var(--space-4) 0 var(--space-5);
  background: linear-gradient(to top, var(--color-surface-0) 50%, transparent 100%);
}
.composer {
  position: relative;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-3) 56px var(--space-3) 18px;
  display: flex;
  align-items: flex-end;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-md);
}
.composer:focus-within {
  border-color: var(--color-brand-sky);
  box-shadow: var(--shadow-md), 0 0 0 4px var(--color-brand-glow);
}
.composer textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  resize: none;
  max-height: 200px;
  min-height: 26px;
  padding: 4px 0;
}
.composer textarea::placeholder { color: var(--color-text-tertiary); }

.send-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;        /* tap target — accessibility */
  height: 40px;
  border-radius: var(--radius-sm);
  border: 0;
  background: linear-gradient(135deg, var(--color-brand-sky) 0%, var(--color-brand-deep) 100%);
  color: var(--color-text-on-accent);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.15s var(--ease-out);
  box-shadow: 0 2px 6px var(--color-brand-edge);
}
.send-btn:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 12px var(--color-brand-edge-2);
}
.send-btn:active:not(:disabled) { transform: scale(0.96); }
.send-btn:disabled {
  background: var(--color-surface-2);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}
.send-btn svg { width: 18px; height: 18px; }

.composer-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: 10px;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  font-style: normal;
}
.composer-foot .foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.composer-foot .foot-row.legal {
  color: var(--color-text-disabled);
  font-size: 10.5px;
}
.composer-foot a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s;
  /* Fix Lighthouse a11y 2026-06-03 — touch target ≥ 44×44 (Apple HIG /
     Material). Era inline link senza padding → fail "tap target too small". */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
}
.composer-foot a:hover,
.composer-foot a:focus-visible { color: var(--color-brand-sky); }
.composer-foot .sep {
  color: var(--color-border-default);
  /* sep non è target → niente min-height, evita extra space */
  display: inline-block;
  padding: 0 2px;
}

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

/* ─── MOBILE HAMBURGER (zero-JS via <details>) ────────────────────── */
/* Visibile SOLO ≤768px; sopra: nav desktop standard (.header-meta). */
.zc-mobile-nav {
  display: none;
  margin-inline-start: auto;
}
.zc-mobile-nav > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text, #f5f5f8);
  transition: background 150ms ease, border-color 150ms ease;
}
.zc-mobile-nav > summary::-webkit-details-marker { display: none; }
.zc-mobile-nav > summary::marker { content: ''; }
.zc-mobile-nav > summary:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.zc-mobile-nav > summary:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: 2px;
}
.zc-mobile-nav__icon { inline-size: 22px; block-size: 22px; }
.zc-mobile-nav__icon--burger { display: block; }
.zc-mobile-nav__icon--close { display: none; }
.zc-mobile-nav[open] > summary .zc-mobile-nav__icon--burger { display: none; }
.zc-mobile-nav[open] > summary .zc-mobile-nav__icon--close { display: block; }
.zc-mobile-nav__panel {
  position: fixed;
  inset-block-start: 64px;
  inset-inline: 0;
  inset-block-end: 0;
  background: #0b0b0d;
  border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* z-index MAX 9999: deve stare SOPRA composer chat (~200), header sticky,
     promo banner, scroll lock. Bug user 2x 2026-05-31: "non si vede". */
  z-index: 9999;
  animation: zc-mobile-nav-in 200ms ease-out;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
}
.zc-mobile-nav[open] {
  position: relative;
  z-index: 9999;
}
.zc-mobile-nav[open] > summary {
  position: relative;
  z-index: 10000;
}
@keyframes zc-mobile-nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.zc-mobile-nav__link {
  display: block;
  padding: 14px 16px;
  min-block-size: 48px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  border-radius: 8px;
  transition: background 150ms ease;
}
.zc-mobile-nav__link:hover { background: rgba(255, 255, 255, 0.06); }
.zc-mobile-nav__link--cta {
  background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 100%);
  color: #fff;
  text-align: center;
  font-weight: 600;
  margin-block-end: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.zc-mobile-nav__link--cta:hover { filter: brightness(1.1); background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 100%); }
.zc-mobile-nav__sep {
  border: none;
  border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  margin-block: 8px;
}
.zc-mobile-nav__lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-block: 12px;
}

/* Lang switcher standalone — hidden default desktop (mobile lo mostra
   tramite media query !important). Bug user 2026-05-31: la rule default
   `display:none` era DOPO la media query → sovrascriveva la mobile.
   Soluzione: default PRIMA, media query DOPO + !important. */
.header-lang-mobile { display: none; }

/* ─── MOBILE ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  header {
    /* RIPRISTINO sticky (era stato cambiato a fixed con padding-top body
       che rompeva il layout flex column → navbar sparita + corpo non
       centrato). Sticky funziona finché body è scroll-root. Forziamo body
       a essere scrollabile naturalmente + chat senza overflow interno. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(11, 11, 13, 0.98);
  }
  .header-meta { display: none; }
  .zc-mobile-nav { display: block; }
  .header-inner { padding: 10px var(--space-4); gap: var(--space-2); }
  .brand-sub { display: none; }
  .brand-name { font-size: 14px; }
  /* Mobile: logo 32px max-width 64px → no spazio rubato a lang+hamburger */
  .brand-logo-img { height: 32px !important; max-width: 64px !important; }
  /* Header opaco solido mobile + rimosso blur (alcuni browser lo ignorano).
     Bug user: header trasparente quando scrolla. */
  header {
    background: #0b0b0d !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 90 !important;
  }
  /* Hero h1 word-break per evitare overflow su 360-375px viewport (utente
     vede titolo "nodi pronti all'uso" trasbordare con wrap rotto) */
  h1, .welcome h1, .pivot-hero h1 { word-break: break-word; overflow-wrap: anywhere; }
  /* Drawer mobile: full-screen opaco + anim disabled (bug user: form intravisti) */
  .zc-mobile-nav__panel {
    inset-block-start: 0 !important;
    padding-block-start: calc(64px + 16px) !important;
    background: #0b0b0d !important;
    z-index: 99999 !important;
    animation: none !important;
  }
  .zc-mobile-nav[open] { position: fixed !important; inset: 0 !important; z-index: 99999 !important; }
  .zc-mobile-nav[open] > summary {
    position: fixed !important;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    z-index: 100000 !important;
  }
  .zc-mobile-nav__link {
    font-size: 18px !important;
    padding: 14px 16px !important;
    min-block-size: 52px !important;
    border-radius: 10px !important;
    color: var(--color-text-primary) !important;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  }
  .zc-mobile-nav__link:hover, .zc-mobile-nav__link:active {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #38bdf8 !important;
    transform: translateX(4px);
  }
  .zc-mobile-nav__link--cta {
    background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
    color: #ffffff !important;
    text-align: center !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.25);
  }
  /* Lang switch standalone visibile fuori dall'hamburger.
     !important per battere il default global a riga seguente
     (bug user 2026-05-31: lang non visibile in mobile). */
  .header-lang-mobile {
    display: inline-flex !important;
    margin-inline-start: auto;
    margin-inline-end: 8px;
    position: relative;
    z-index: 100;
  }
  .header-lang-mobile .lang-btn { padding: 4px 8px; font-size: 13px; min-width: 24px; }
  /* Hamburger a destra con z-index alto */
  .zc-mobile-nav { position: relative; z-index: 100; }
  .zc-mobile-nav > summary { position: relative; z-index: 101; }

  /* Footer mobile — stili dedicati. Bug user 2026-05-31. */
  .site-footer {
    padding: 20px 16px;
    margin-block-start: 32px;
  }
  .site-footer__inner {
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
  }
  .site-footer__row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
  }
  .site-footer__row--legal {
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    opacity: 0.7;
  }
  .site-footer__row--legal .site-footer__sep { display: none; }
}

@media (max-width: 640px) {
  main { padding: 0 var(--space-4); }
  .welcome { padding: 40px 0 var(--space-6); }
  .welcome h1, .welcome h2 { font-size: 30px; }
  .suggestions { grid-template-columns: 1fr; }
  .msg { padding: 14px 0; gap: 12px; }
  .msg-content { font-size: 14px; }
  .composer { padding: 10px 50px 10px var(--space-4); }
  .send-btn { width: 40px; height: 40px; right: 8px; bottom: 8px; }
  /* Hero + product cards stretching */
  .pivot-hero { padding: 24px var(--space-4) 16px; }
  .pivot-hero h1 { font-size: 22px; }
  .pivot-hero .lede { font-size: 14px; line-height: 1.5; }
  .pivot-hero__chips span { font-size: 11px; padding: 4px 8px; }
  .pivot-products { padding: 16px var(--space-4); gap: 12px; }
  .pivot-card { padding: 16px; }
  .pivot-card h2 { font-size: 17px; }
  .pivot-card p { font-size: 13px; }
  .pivot-divider { margin: 16px var(--space-4); padding: 12px; font-size: 13px; }
}

@media (prefers-contrast: more) {
  :root {
    --color-border-default: #4a4a55;
    --color-text-secondary: #d4d4dc;
  }
}

/* ═══ LIARA FLOATING FAB + MODAL (2026-06-02 user-segnalato mobile UX) ═══
   Desktop (>768px): comportamento legacy invariato (chat inline visibile,
   FAB nascosto). Mobile (≤768px): chat default nascosta, FAB visible
   bottom-right, click → chat full-screen modal con backdrop blur. */

.liara-fab,
.liara-modal-close {
  display: none;
}

@media (max-width: 768px) {
  /* FAB bottom-right — ora apre la chat in fullscreen ZOOM (la chat è già
     visibile inline, il FAB serve per "ingrandire" il chatter quando si
     vuole digitare comodi su mobile). Etichetta cambiata di conseguenza. */
  .liara-fab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0));
    z-index: 9100;
    padding: 12px 18px 12px 14px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .liara-fab svg {
    width: 20px;
    height: 20px;
    color: #fff;
  }
  .liara-fab:active { transform: scale(0.95); }
  .liara-fab:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
  }
  /* Pulse animation per attirare attenzione (CSS-only, prefers-reduced-motion safe) */
  .liara-fab__pulse {
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.4), rgba(99, 102, 241, 0.4));
    z-index: -1;
    animation: liara-pulse 2.5s ease-out infinite;
  }
  @keyframes liara-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .liara-fab__pulse { animation: none; display: none; }
  }

  /* CHAT SEMPRE VISIBILE su mobile (fix 2026-06-02 user-segnalato:
     "il chatter di liara deve essere sempre visibile"). Rimosso il
     display:none precedente. La chat è inline come desktop. Il FAB
     resta per quick-zoom a fullscreen modal su chat lunghe. */

  /* When modal is open: chat diventa full-screen overlay */
  body.liara-modal-open {
    overflow: hidden;
  }
  body.liara-modal-open main {
    position: fixed;
    inset: 0;
    z-index: 9200;
    background: var(--color-surface-0, #0b0b0d);
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    overflow: hidden;
    animation: liara-modal-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.liara-modal-open main > .chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(env(safe-area-inset-top, 0) + 56px); /* spazio per close button */
  }
  body.liara-modal-open main > .composer-wrap {
    display: block;
    border-top: 1px solid var(--color-border-faint);
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--color-surface-1, #131318);
  }

  /* Close button — visibile solo quando modal è aperto */
  body.liara-modal-open .liara-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 12px);
    right: 16px;
    z-index: 9300;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    background: rgba(20, 20, 24, 0.85);
    backdrop-filter: blur(12px);
    color: #fff;
    cursor: pointer;
  }
  body.liara-modal-open .liara-modal-close svg {
    width: 20px; height: 20px;
  }
  body.liara-modal-open .liara-fab {
    display: none;
  }

  @keyframes liara-modal-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    body.liara-modal-open main { animation: none; }
  }
}

/* ═══ Hero CTAs + pivot-card--featured (refactor 2026-06-02) ═══════════ */

.hero-accent {
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pivot-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 28px 0 20px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
  white-space: nowrap;
}

.hero-cta--primary {
  background: linear-gradient(135deg, #0284c7 0%, #4f46e5 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.5);
  filter: brightness(1.1);
}

.hero-cta--secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary, #f5f5f7);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero-cta--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.hero-cta--ghost {
  background: transparent;
  color: var(--color-brand-sky, #0ea5e9);
  border: 1px dashed rgba(14, 165, 233, 0.4);
}

.hero-cta--ghost:hover {
  background: rgba(14, 165, 233, 0.08);
  border-style: solid;
}

@media (max-width: 480px) {
  .hero-cta { padding: 11px 18px; font-size: 14px; }
  .pivot-hero__actions { gap: 10px; }
}

/* Featured pivot card (FlowForge dominante) */
.pivot-card--featured {
  position: relative;
  border-color: var(--color-brand-sky, #0ea5e9) !important;
  background: linear-gradient(180deg, rgba(14, 165, 233, 0.06) 0%, var(--color-surface-1, #131318) 100%) !important;
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.3), 0 12px 32px rgba(14, 165, 233, 0.12);
}

.pivot-card--featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}

.pivot-card--featured .pivot-card__tag {
  color: var(--color-brand-sky, #0ea5e9);
  font-weight: 700;
}

.pivot-card--featured:hover {
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.5), 0 20px 48px rgba(14, 165, 233, 0.2);
  transform: translateY(-3px);
}

/* ═══ Fix centratura pivot-products grid + ff-showcase (2026-06-02) ═══ */

/* user-segnalato: "i riquadri non sono centrati". Pre-fix: pivot-products
   senza max-width + senza margin auto → larghezza variabile per viewport
   intermedi, visivamente disallineati col pivot-hero. */
.pivot-products {
  max-width: var(--page-max, 76rem);
  margin-inline: auto;
  padding-inline: var(--page-gutter, clamp(1rem, 3vw, 2rem));
  justify-content: center;
}

/* FF showcase grid — 3 screenshot prodotto FlowForge dentro la home zeli-chat */
.ff-showcase {
  max-width: var(--page-max, 76rem);
  margin: clamp(40px, 6vw, 72px) auto;
  padding-inline: var(--page-gutter, clamp(1rem, 3vw, 2rem));
}

.ff-showcase__head {
  text-align: center;
  margin-bottom: 32px;
}

.ff-showcase__eyebrow {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ff-showcase__head h2 {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--color-text-primary, #f5f5f7);
}

.ff-showcase__head p {
  font-size: 0.95rem;
  color: var(--color-text-secondary, #a5a5b3);
  margin: 0;
  max-width: 640px;
  margin-inline: auto;
  line-height: 1.55;
}

.ff-showcase__grid {
  display: grid;
  /* v6 — 3 per riga, riquadri piccoli (~300px), ultima riga centrata
     automaticamente. Mobile 1 col. */
  grid-template-columns: repeat(3, minmax(0, 300px));
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
  margin-bottom: 32px;
}

@media (max-width: 880px) {
  .ff-showcase__grid {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}

.ff-showcase__card {
  display: block;
  background: var(--color-surface-1, #131318);
  border: 1px solid var(--color-line, #2a2a32);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

.ff-showcase__card:hover {
  transform: translateY(-3px);
  border-color: var(--color-brand-sky, #0ea5e9);
  box-shadow: 0 14px 36px rgba(14, 165, 233, 0.18);
}

.ff-showcase__card img {
  display: block;
  width: 100%;
  /* v7 — altezza ESPLICITA (no aspect-ratio: era ignorato da HTML
     width/height attributi). Riquadro corto 16:9, contenuto coperto e
     scalato al box piccolo. */
  height: 168px;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid var(--color-line, #2a2a32);
}

.ff-showcase__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  font-size: 13px;
  color: var(--color-text-secondary, #a5a5b3);
  line-height: 1.5;
}

.ff-showcase__caption strong {
  font-size: 14px;
  color: var(--color-text-primary, #f5f5f7);
  font-weight: 700;
}

.ff-showcase__cta {
  display: flex;
  justify-content: center;
}

/* ═══ LIGHTBOX click-to-zoom screenshot (2026-06-02) ═══════════════════
   User-segnalato: "foto troppo strette, dovrebbero ingrandirsi al click".
   Pattern: <dialog id="ff-lightbox"> nativo HTML5 + JS minimal toggle.
   Backdrop click + ESC + close button → chiude. */

#ff-lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  border: none;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#ff-lightbox[open] { display: flex; }

#ff-lightbox::backdrop {
  background: transparent;
}

.ff-lightbox__inner {
  position: relative;
  width: min(92vw, 1400px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: lb-in 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ff-lightbox__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0b0b0d;
}

.ff-lightbox__caption {
  color: #f5f5f7;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
  padding: 0 16px;
  font-family: var(--font-sans);
}

.ff-lightbox__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(20, 20, 24, 0.9);
  color: #fff;
  font-size: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ff-lightbox__close:hover {
  background: rgba(40, 40, 48, 0.95);
  border-color: rgba(255, 255, 255, 0.35);
}

@keyframes lb-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ff-lightbox__inner { animation: none; }
}

/* Cursor pointer + zoom hint sulle thumb FlowForge */
.ff-showcase__card { cursor: zoom-in; }
.ff-showcase__card img {
  transition: transform 240ms ease;
}
.ff-showcase__card:hover img {
  transform: scale(1.02);
}

/* v5 2026-06-02 — duplicato rimosso. Regola unica .ff-showcase__grid
   sopra (1 col fissa, max-width 900px). Niente più override 2-col. */