/* =========================================================
       Urbica (codename: ConTech) — brand identity v2 (handoff 0307)
       Terracotta + crema + aurora AI · Schibsted Grotesk (unico font)
       ========================================================= */

    :root {
      /* ============ BRAND URBICA v2 (reskin 2026-07-03) ============
         Handoff "Aedicode brand identity redesign 0307". Nomi token
         invariati per retrocompat: cambiano solo i valori → superfici,
         grigi e stati si ribaltano ovunque senza toccare i call-site.
         Fonte di verità: ui/prototypes/design_handoff_urbica_0307/. */

      /* Superfici — sabbia piatta (shell) + main bianco-caldo (aurora) */
      --shell:        #F2F0EA;   /* sfondo shell / sidebar (piatto, niente mesh) */
      --paper:        #FFFFFF;   /* card / superfici sollevate: header, bolle, input */
      --paper-2:      #F5F4EF;   /* hover tenue */
      --paper-3:      #F1F0EC;   /* hover/active più marcato + badge icona neutro */
      --paper-4:      #ECEAE2;   /* riempimenti neutri */

      /* Testo (scala grigi handoff 0307) */
      --ink:          #16181C;   /* nero di marca */
      --ink-2:        #54565E;   /* secondario (anche #5D5F66 nel mock: unificato qui) */
      --ink-3:        #6E7078;   /* terziario */
      --ink-4:        #85878F;   /* timestamp / muted */
      --ink-5:        #8E9098;   /* placeholder */
      --chevron:      #9B9DA5;   /* chevron "›" / decorazioni */

      /* Hairline / bordi caldi */
      --rule:         #E4E2DA;   /* bordo unico card/input */
      --rule-soft:    #F0EEE7;   /* divisori leggeri */
      --rule-shell:   #E4E0D6;   /* hairline sx del pannello main (prototipo) */

      /* ---- Accento di marca: TERRACOTTA (uso parsimonioso) ---- */
      --accent:       #D97757;
      --accent-700:   #C2502E;   /* hover / press */
      --accent-bg:    #FCF3EE;   /* wash tenue / bg avviso caldo */
      --highlight:    #F7E1D3;   /* highlight crema */
      --hint-ink:     #9A5A41;   /* testo avviso caldo (hint AI) su --accent-bg */

      /* Alias storici → puntano all'accento (retrocompat ~90 usi blueprint/cinabro) */
      --blueprint:    var(--accent);
      --blueprint-2:  var(--accent-700);
      --blueprint-bg: var(--accent-bg);
      --blueprint-700:var(--accent-700);
      --cinabro:      var(--accent);
      --cinabro-2:    var(--accent-700);
      --cinabro-bg:   var(--accent-bg);

      /* Stati semantici (verdetti / badge) — handoff 0307 */
      --moss:         #1F7A4D;   /* conforme / in vigore (testo) */
      --moss-bg:      #EAF4EE;
      --amber:        #B07C10;   /* "da verificare" (testo) */
      --amber-bg:     #FBF3DC;
      --bad:          #B3362B;   /* "non conforme" (testo) */
      --bad-bg:       #FBEDEB;
      --warn:         #C2502E;   /* rilievo verifica (icone/pill check, prototipo) */
      --warn-2:       #B45B3C;   /* "da confermare" / Scopri perché */
      --warn-bg:      #FCE9E2;
      --warn-bg-2:    #FCF3EE;
      --warn-border:  #F2D9CC;
      --err:          #C2502E;

      /* Type — UN SOLO FONT: Schibsted Grotesk (handoff 0307, mono eliminato).
         --f-mono resta come alias per i call-site storici: punta a Schibsted. */
      --f-serif:      'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
      --f-sans:       'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
      --f-mono:       'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
      --f-display:    'Schibsted Grotesk', system-ui, -apple-system, sans-serif;

      /* Forme (scala raggi handoff: bottoni 9–10 · campi 11 · card 14 · card grandi 16) */
      --radius:       10px;      /* bottoni */
      --radius-field: 11px;      /* input / textarea / badge icona 40px */
      --radius-card:  14px;      /* card standard / righe lista */
      --radius-lg:    16px;      /* card grandi (composer, card risposta) */

      /* Selezione testo + scrollbar (handoff 0307) */
      --selection:    #C4D7F2;
      --scrollbar:    #E2E0D8;

      /* Profondità (ombre brand) + motion */
      --canvas:       #FCFBF8;   /* sfondo area main (base mesh) */
      --shadow-sm:    0 1px 2px rgba(20,20,40,.04);
      --shadow-md:    0 1px 2px rgba(20,20,40,.04), 0 14px 40px rgba(20,20,50,.06);
      --shadow-lg:    0 2px 6px rgba(20,20,40,.05), 0 24px 60px -12px rgba(20,20,50,.12);
      --shadow-drawer:-20px 0 50px rgba(20,20,50,.14);
      --ease:         cubic-bezier(.2,.7,.2,1);
      --dur:          160ms;
      --dur-slow:     280ms;

      /* ---- Aurora AI (handoff 0307): 4 radial morbidi dall'angolo alto-destro,
              SOLO sul pannello main. CSS puro, nessuna immagine, nessuna animazione.
              La shell resta piatta (--shell). ---- */
      --mesh-main:
        radial-gradient(52% 44% at 96% -6%, rgba(217,119,87,.14) 0%, rgba(217,119,87,0) 100%),
        radial-gradient(46% 40% at 68% -4%, rgba(238,178,92,.10) 0%, rgba(238,178,92,0) 100%),
        radial-gradient(50% 46% at 100% 22%, rgba(151,134,224,.08) 0%, rgba(151,134,224,0) 100%),
        radial-gradient(44% 42% at 82% 12%, rgba(122,166,233,.07) 0%, rgba(122,166,233,0) 100%);
      /* Gradient aurora per il nome utente nel saluto (background-clip:text) */
      --aurora-text: linear-gradient(100deg, #D97757 0%, #E8A050 32%, #9786E0 68%, #7AA6E9 100%);
    }

    * { box-sizing: border-box; }
    /* Selezione testo di marca (handoff 0307): leggibile anche sulla bolla
       utente scura — azzurro chiaro + nero di marca ovunque. */
    *::selection { background: var(--selection); color: var(--ink); }

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: var(--shell);
      color: var(--ink);
      font-family: var(--f-sans);
      font-size: 15px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Sfondo shell: sabbia piatta (handoff 0307 — l'aurora vive solo sul main). */
    body { background: var(--shell); }

    /* Modalita' manutenzione 2026-08: il prodotto resta nel documento per il
       solo bypass admin, ma parte hidden per evitare qualsiasi flash pubblico. */
    .maintenance-screen {
      min-height: 100%;
      min-height: 100dvh;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      place-items: center;
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: max(32px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
               max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
      background:
        radial-gradient(55% 46% at 98% -4%, rgba(217,119,87,.18) 0%, rgba(217,119,87,0) 100%),
        radial-gradient(48% 42% at 70% 0%, rgba(238,178,92,.12) 0%, rgba(238,178,92,0) 100%),
        radial-gradient(52% 48% at 100% 24%, rgba(151,134,224,.10) 0%, rgba(151,134,224,0) 100%),
        radial-gradient(46% 44% at 82% 14%, rgba(122,166,233,.09) 0%, rgba(122,166,233,0) 100%),
        var(--shell);
    }
    .maintenance-screen::after {
      content: "";
      position: absolute;
      inset: auto -12vw -26vh 18vw;
      height: 52vh;
      z-index: -1;
      background: radial-gradient(ellipse at center, rgba(255,255,255,.72), rgba(255,255,255,0) 68%);
      pointer-events: none;
    }
    .maintenance-content {
      width: 100%;
      max-width: 680px;
      min-width: 0;
      text-align: center;
    }
    .maintenance-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: clamp(42px, 8vh, 72px);
    }
    .maintenance-brand .app-wordmark {
      color: var(--ink);
      font-family: var(--f-display);
      font-size: 25px;
      font-weight: 600;
      letter-spacing: -.025em;
    }
    .maintenance-title {
      margin: 0;
      color: var(--ink);
      font-family: var(--f-display);
      font-size: clamp(34px, 6vw, 58px);
      font-weight: 600;
      line-height: 1.04;
      letter-spacing: -.045em;
      text-wrap: balance;
    }
    .maintenance-message {
      max-width: 590px;
      margin: 24px auto 0;
      color: var(--ink-2);
      font-size: clamp(17px, 2.3vw, 21px);
      line-height: 1.55;
      letter-spacing: -.012em;
      text-wrap: balance;
    }
    .maintenance-return {
      color: var(--accent-700);
      font-weight: 600;
      white-space: nowrap;
    }
    @media (max-width: 560px) {
      .maintenance-content { transform: translateY(-3vh); }
      .maintenance-brand { margin-bottom: 38px; }
      .maintenance-message { margin-top: 20px; }
    }

    /* Scrollbar di marca (handoff 0307) */
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; border: 3px solid #FBFAF8; }

    button { font-family: inherit; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { color: var(--accent-700); text-decoration: underline; text-underline-offset: 3px; }

    .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; }

    /* ─── Tabular numerals ovunque ci siano cifre ────────────── */
    .num, .msg-meta, .doc-card-meta, .docs-pagination, #char-count {
      font-variant-numeric: tabular-nums;
    }

    /* ============================================================
       REFRESH 2026 — profondità + tipografia + motion (disciplinato)
       Token-driven: ripple coerente su tutto il prodotto; le schermate
       dense ereditano superfici/tipo, la motion resta sotto i ~280ms e
       rispetta prefers-reduced-motion. Audacia spesa solo sul signature "§".
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
      }
    }
    @keyframes ae-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

    /* Card sollevate: ombra a riposo, lift morbido all'hover */
    .prj-card, .home-cta-card, .doc-hub-card {
      box-shadow: var(--shadow-sm);
      border-color: var(--rule-soft);
      border-radius: var(--radius-lg);
      transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    .prj-card:hover, .home-cta-card:hover, .doc-hub-card:hover {
      box-shadow: var(--shadow-md);
      transform: translateY(-2px);
      border-color: var(--ink);
    }
    .prj-card:active, .home-cta-card:active, .doc-hub-card:active { transform: translateY(-1px); }

    /* Signature "§/eyebrow": barretta accento a sinistra del marcatore normativo */
    .empty-state-header-num { position: relative; padding-left: 14px; font-weight: 600; }
    .empty-state-header-num::before {
      content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
      width: 4px; height: 13px; border-radius: 2px; background: var(--ink-3);
    }

    /* Titolo hero: metrica mock (31px) — definita nella regola base più sotto */

    /* Reveal orchestrato al load (home + progetto): stagger leggero */
    .empty-state > * { animation: ae-rise var(--dur-slow) var(--ease) both; }
    .empty-state .empty-state-header { animation-delay: 20ms; }
    .empty-state h2 { animation-delay: 60ms; }
    .empty-state p { animation-delay: 110ms; }
    .empty-state .example-pills { animation-delay: 160ms; }
    .empty-state .home-cta { animation-delay: 220ms; }

    /* Pills -> card-suggerimento sollevate (era una lista numerata piatta).
       Stesso contenuto, ma superfici che galleggiano sul canvas e si alzano all'hover. */
    .example-pills { border-top: 0; gap: 10px; }
    .example-pill {
      background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 12px;
      box-shadow: var(--shadow-sm); padding: 16px 18px;
      transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    .example-pill:hover { background: var(--paper); box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--blueprint); }
    .example-pill:active { transform: translateY(-1px); }

    /* Bottone primario scuro: press feedback + ombra */
    .prj-new-btn { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease); }
    .prj-new-btn:hover { box-shadow: var(--shadow-md); }
    .prj-new-btn:active { transform: translateY(1px); }

    /* Header workspace progetto: ombra morbida per staccarlo dal canvas */
    .project-workspace-bar { box-shadow: 0 1px 0 var(--rule), 0 8px 18px -14px rgba(16,25,40,.20); }

    /* Composer: galleggia sul canvas (ombra a riposo) e si "accende" al focus */
    .input-wrapper { box-shadow: var(--shadow-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
    .input-wrapper:focus-within { box-shadow: 0 0 0 3px var(--blueprint-bg), var(--shadow-md); }

    /* Header e sidebar restano bianchi: galleggiano sul canvas con un filo d'ombra */
    .app-header, header.header { box-shadow: 0 1px 0 var(--rule-soft), 0 4px 14px -10px rgba(16,25,40,.12); position: relative; z-index: 5; }
    /* NB: Step 1 (display) + Step 2 (profondità dense) sono in fondo al 2° <style>,
       per vincere sull'ordine-sorgente sui componenti (es. .empty-state h2 setta font-family). */

    /* =========================================================
       LAYOUT PRINCIPALE — tavola tecnica con margine numerato
       ========================================================= */

    .app {
      display: flex;
      flex-direction: column;
      min-height: 100%;
      height: 100%;
      background: transparent;   /* la shell crema+mesh vive su body */
      position: relative;
    }

    /* Tick marks sul margine sinistro — riferimento riga tavola progetto */
    .app::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 36px;
      background-image: repeating-linear-gradient(
        to bottom,
        transparent 0 19px,
        var(--rule-soft) 19px 20px
      );
      pointer-events: none;
      opacity: 0.5;
      display: none; /* tick marks rimossi nel redesign 2026-06-08 */
    }

    /* =========================================================
       HEADER — frontespizio tipografico
       ========================================================= */

    .app-header {
      border-bottom: 1px solid var(--rule);
      background: var(--paper);
      position: sticky;
      top: 0;
      z-index: 30;
      backdrop-filter: blur(4px);
    }

    .app-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 28px;
      gap: 24px;
    }

    /* Marca: serif display + matricola inline */
    .app-header-left {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      gap: 14px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .app-wordmark {
      font-family: var(--f-sans);
      font-weight: 600;
      font-size: 19px;
      line-height: 1.05;
      letter-spacing: -0.012em;
      color: var(--ink);
      display: flex;
      align-items: baseline;
      gap: 12px;
      white-space: nowrap;
      min-width: 0;
      overflow: hidden;
    }
    .app-wordmark::before { content: none; }   /* § timbro rimosso */
    .app-wordmark span {
      font-family: var(--f-sans);
      font-size: 12px;
      font-weight: 450;
      letter-spacing: 0;
      color: var(--ink-3);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }
    .app-wordmark span::before {
      content: '·';
      color: var(--ink-4);
      margin-right: 10px;
    }

    /* Nav tabs — riusati dai rail-item del menu unico e dalla mobile-tab-bar */
    .nav-tab {
      background: transparent;
      border: 1px solid transparent;
      border-radius: var(--radius);
      padding: 7px 12px;
      font-family: var(--f-sans);
      font-size: 13.5px;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--ink-2);
      cursor: pointer;
      transition: color 120ms ease, background 120ms ease;
      position: relative;
    }
    .nav-tab:hover { color: var(--ink); background: var(--paper-2); }
    .nav-tab.active {
      color: var(--ink);
      background: var(--paper-3);
    }

    /* =========================================================
       SIDEBAR — chat history
       ========================================================= */

    .app-layout {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .sidebar {
      width: 256px;
      flex-shrink: 0;
      background: transparent;   /* mostra la shell crema+mesh del body */
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    /* P2: nascondibile (la classe forza display:flex, l'attributo hidden da solo non basta).
       Usata per dare alla libreria progetti tutta la larghezza. */
    .sidebar[hidden] { display: none; }

    /* Sezione Progetti — lista espansa sempre visibile (pattern ChatGPT/
       Claude Projects: sezione dedicata sopra la history, icona cartella,
       CTA nuovo progetto persistente) */
    .sidebar-section-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px 6px;
      font-family: var(--f-sans);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--ink-4);
    }
    .sidebar-section-add {
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--f-sans);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--blueprint);
      padding: 2px 4px;
    }
    .sidebar-section-add:hover { color: var(--blueprint-2); }
    .sidebar-projects {
      max-height: 38vh;
      overflow-y: auto;
      border-bottom: 1px solid var(--rule-soft);
      padding-bottom: 8px;
      flex-shrink: 0;
    }
    .sidebar-project {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      cursor: pointer;
      border-left: 3px solid transparent;
      transition: background 100ms ease;
    }
    .sidebar-project:hover { background: var(--paper-2); }
    .sidebar-project.active {
      background: var(--paper-2);
      border-left-color: var(--cinabro);
    }
    .sidebar-project-icon {
      color: var(--ink-4);
      flex-shrink: 0;
      display: inline-flex;
    }
    .sidebar-project.active .sidebar-project-icon { color: var(--cinabro); }
    .sidebar-project-info { flex: 1; min-width: 0; }
    .sidebar-project-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }
    .sidebar-project-meta {
      font-family: var(--f-mono);
      font-size: 10px;
      color: var(--ink-4);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sidebar-project-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 100ms ease;
      flex-shrink: 0;
    }
    .sidebar-project:hover .sidebar-project-actions { opacity: 1; }
    .sidebar-project-action-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--ink-5);
      font-size: 13px;
      padding: 2px 4px;
    }
    .sidebar-project-action-btn:hover { color: var(--cinabro); }
    .sidebar-projects-empty {
      padding: 10px 16px 6px;
      font-family: var(--f-serif);
      font-style: italic;
      font-size: 12px;
      color: var(--ink-4);
      line-height: 1.5;
    }
    .sidebar-projects-empty button {
      display: inline;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      font: inherit;
      font-style: italic;
      color: var(--blueprint);
      text-decoration: underline;
    }
    .sidebar-projects-empty button:hover { color: var(--cinabro); }

    /* Breadcrumb progetto attivo sopra l'area messaggi */
    .project-context-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 28px;
      border-bottom: 1px solid var(--rule-soft);
      background: var(--paper-2);
      font-family: var(--f-sans);
      font-size: 12.5px;
      letter-spacing: 0;
      color: var(--ink-3);
      flex-shrink: 0;
    }
    .project-context-bar[hidden] { display: none; }
    .project-context-bar .sidebar-project-icon { color: var(--ink-3); }
    .project-context-clear {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--ink-5);
      font-size: 14px;
      padding: 0 2px;
      margin-left: auto;
      line-height: 1;
    }
    .project-context-clear:hover { color: var(--cinabro); }

    /* Menu "Sposta in progetto" su singola chat */
    .session-move-menu {
      position: fixed;
      z-index: 80;
      background: var(--paper);
      border: 1px solid var(--rule);
      box-shadow: 0 4px 12px rgba(14,14,12,0.14);
      min-width: 200px;
      max-height: 40vh;
      overflow-y: auto;
    }
    .session-move-menu-label {
      padding: 8px 12px 4px;
      font-family: var(--f-mono);
      font-size: 9.5px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--ink-4);
    }
    .session-move-item {
      display: block;
      width: 100%;
      text-align: left;
      padding: 8px 12px;
      background: none;
      border: none;
      cursor: pointer;
      font-family: var(--f-sans);
      font-size: 12.5px;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .session-move-item:hover { background: var(--paper-2); }
    .session-move-item--none { color: var(--ink-4); font-style: italic; }

    /* Citazioni in chat (F5) */
    .references-group-label { padding: 8px 12px 4px; font-family: var(--f-mono); font-size: 9.5px;
      text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-4); border-top: 1px solid var(--rule-soft); }
    .references-group-label:first-child { border-top: none; }
    #references-btn { background: none; border: none; cursor: pointer; color: var(--ink-3); padding: 4px;
      display: inline-flex; align-items: center; }
    #references-btn:hover { color: var(--ink); }
    #references-chip-host { display: flex; flex-wrap: wrap; gap: 6px; }
    #references-chip-host:not(:empty) { padding: 0 0 8px; }
    .ref-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--paper-2);
      border: 1px solid var(--rule-soft); border-radius: 14px; padding: 3px 6px 3px 10px;
      font-size: 11.5px; color: var(--ink-2); max-width: 240px; }
    .ref-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ref-chip-x { background: none; border: none; cursor: pointer; color: var(--ink-4);
      font-size: 14px; line-height: 1; padding: 0 2px; }
    .ref-chip-x:hover { color: var(--cinabro); }

    .project-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(14,14,12,0.45);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .project-modal {
      background: var(--paper);
      border: 1px solid var(--rule);
      width: 90%;
      max-width: 440px;
      padding: 28px;
      box-shadow: 0 8px 32px rgba(14,14,12,0.2);
    }
    .project-modal h3 {
      font-family: var(--f-serif);
      font-size: 18px;
      font-weight: 600;
      margin: 0 0 20px;
      color: var(--ink);
    }
    .project-modal label {
      display: block;
      font-family: var(--f-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--ink-3);
      margin-bottom: 4px;
    }
    .project-modal input,
    .project-modal textarea {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--rule-soft);
      background: var(--paper);
      font-family: var(--f-sans);
      font-size: 14px;
      color: var(--ink);
      margin-bottom: 14px;
      box-sizing: border-box;
    }
    .project-modal textarea { height: 80px; resize: vertical; }
    .project-modal select {
      width: 100%; padding: 8px 10px; border: 1px solid var(--rule-soft);
      background: var(--paper); font-family: var(--f-sans); font-size: 14px;
      color: var(--ink); margin-bottom: 14px; box-sizing: border-box;
    }
    .project-modal input:focus,
    .project-modal textarea:focus { border-color: var(--ink); outline: none; }
    /* P6: wizard creazione progetto a 2 step */
    .proj-steps { display: flex; gap: 8px; margin: -6px 0 18px; }
    .proj-step-dot {
      font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.04em;
      text-transform: uppercase; color: var(--ink-4);
      padding: 3px 8px; border: 1px solid var(--rule-soft); border-radius: 20px;
    }
    .proj-step-dot.active { color: var(--ink); border-color: var(--ink); }
    .project-modal-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 8px;
    }
    .project-modal-btn {
      padding: 8px 18px;
      font-family: var(--f-mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border: 1px solid var(--rule);
      cursor: pointer;
      background: var(--paper);
      color: var(--ink-3);
    }
    .project-modal-btn:hover { background: var(--paper-2); }
    .project-modal-btn-primary {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
    }
    .project-modal-btn-primary:hover { background: var(--ink-2); }

    .sidebar-header {
      padding: 14px 16px;
      border-bottom: 1px solid var(--rule-soft);
    }

    .sidebar-new-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 10px 14px;
      background: var(--paper);
      color: var(--ink);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      font-family: var(--f-sans);
      font-size: 13.5px;
      font-weight: 500;
      letter-spacing: 0;
      cursor: pointer;
      transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    }
    .sidebar-new-btn:hover { background: var(--paper-3); border-color: var(--ink); color: var(--ink); }

    .sidebar-sessions {
      flex: 1;
      overflow-y: auto;
      padding: 4px 0;
    }
    .sidebar-sessions::-webkit-scrollbar { width: 6px; }
    .sidebar-sessions::-webkit-scrollbar-track { background: transparent; }
    .sidebar-sessions::-webkit-scrollbar-thumb { background: var(--paper-3); }

    .sidebar-session {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 10px 16px;
      cursor: pointer;
      border-left: 3px solid transparent;
      transition: background 100ms ease;
      gap: 6px;
    }
    .sidebar-session:hover { background: var(--paper-2); }
    .sidebar-session.active {
      background: var(--paper-2);
      border-left-color: var(--cinabro);
    }

    .sidebar-session-info {
      flex: 1;
      min-width: 0;
    }

    .sidebar-session-title {
      font-size: 13px;
      font-weight: 500;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }

    .sidebar-session-meta {
      font-family: var(--f-mono);
      font-size: 10px;
      color: var(--ink-4);
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-session-delete {
      background: none;
      border: none;
      color: var(--ink-5);
      cursor: pointer;
      font-size: 16px;
      padding: 0 2px;
      opacity: 0;
      transition: opacity 100ms ease, color 100ms ease;
      flex-shrink: 0;
      line-height: 1;
    }
    .sidebar-session:hover .sidebar-session-delete { opacity: 1; }
    .sidebar-session-delete:hover { color: var(--bad); }

    .sidebar-session-move {
      background: none;
      border: none;
      color: var(--ink-5);
      cursor: pointer;
      padding: 0 2px;
      opacity: 0;
      transition: opacity 100ms ease, color 100ms ease;
      flex-shrink: 0;
      line-height: 1;
      display: inline-flex;
    }
    .sidebar-session:hover .sidebar-session-move { opacity: 1; }
    .sidebar-session-move:hover { color: var(--ink); }

    .sidebar-empty {
      padding: 24px 16px;
      font-family: var(--f-serif);
      font-style: italic;
      font-size: 13px;
      color: var(--ink-4);
      text-align: center;
    }

    .app-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
      /* Pannello main: bianco-caldo + aurora AI dall'alto-destra, angoli
         arrotondati solo a sinistra, staccato dalla sidebar con 4px +
         hairline + ombra sottile (handoff 0307). */
      background: var(--mesh-main), var(--canvas);
      border-left: 1px solid var(--rule-shell);
      border-radius: 18px 0 0 18px;
      margin: 0 0 0 4px;
      box-shadow: -1px 0 4px rgba(20,20,40,.03);
    }

    .sidebar-toggle {
      display: none;
      background: none;
      border: 1px solid var(--rule-soft);
      cursor: pointer;
      padding: 5px 8px;
      color: var(--ink-3);
      font-size: 18px;
      line-height: 1;
      flex-shrink: 0;
      transition: color 120ms ease, border-color 120ms ease;
    }
    .sidebar-toggle:hover {
      color: var(--ink);
      border-color: var(--ink);
    }

    .sidebar-backdrop {
      display: none;
    }

    /* ── Rail unico: brand + nav viste + profilo (menu unico, ex header) ── */
    .sidebar-brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 18px 14px 14px;
    }
    /* Lockup di marca: logo SVG (quadrato nero + "U" + punto terracotta) + wordmark */
    .brand-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; cursor: pointer; }
    .brand-mark { flex: none; }
    .sidebar-brand .app-wordmark {
      font-family: var(--f-display);
      font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
      color: var(--ink);
    }
    .rail-collapse {
      flex-shrink: 0;
      background: none;
      border: 1px solid var(--rule-soft);
      border-radius: var(--radius);
      width: 26px; height: 26px;
      cursor: pointer;
      color: var(--ink-3);
      font-size: 15px; line-height: 1;
      transition: color 120ms ease, border-color 120ms ease, transform 160ms ease;
    }
    .rail-collapse:hover { color: var(--ink); border-color: var(--ink-5); }

    .rail-nav {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 16px 10px 4px;   /* mock: nav staccata ~30px dal logo */
    }
    .rail-nav-item {
      display: flex;
      align-items: center;
      gap: 13px;
      width: 100%;
      padding: 10px 10px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: var(--radius);
      cursor: pointer;
      font-family: var(--f-sans);
      font-size: 14.5px;
      font-weight: 500;
      letter-spacing: 0;
      color: var(--ink-2);
      text-align: left;
      transition: color 120ms ease, background 120ms ease;
    }
    .rail-nav-item:hover { color: var(--ink); background: var(--paper-2); }
    .rail-nav-item.active { color: var(--ink); background: var(--paper-3); font-weight: 600; }
    /* Mock: l'icona segue il colore del testo della voce (stroke currentColor) */
    .rail-nav-item .rail-ico { flex-shrink: 0; display: inline-flex; color: inherit; }
    .rail-sep { height: 1px; background: var(--rule-soft); margin: 6px 16px 4px; }

    /* Il blocco visibile (chat history o pratiche) riempie lo spazio centrale e
       fa scrollare la lista, così il profilo resta ancorato in fondo al rail. */
    #sidebar-chat-content,
    #sidebar-pratiche {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .sidebar-foot {
      margin-top: auto;
      padding: 10px 16px;
      border-top: 1px solid var(--rule-soft);
      min-height: 0;
    }
    .sidebar-foot:empty { display: none; }

    /* ── Mobile tab bar (display: none on desktop, flex on ≤760px) ── */
    .mobile-tab-bar {
      display: none;
      background: var(--paper);
      border-bottom: 1px solid var(--rule);
      flex-shrink: 0;
    }
    .mobile-tab-bar .nav-tab {
      flex: 1;
      padding: 10px 4px;
      font-size: 11px;
      border: none;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      margin-bottom: 0;
      text-align: center;
    }
    .mobile-tab-bar .nav-tab.active {
      border: none;
      border-bottom: 2px solid var(--cinabro);
      background: transparent;
      box-shadow: none;
      margin-bottom: 0;
    }
    .mobile-tab-bar .nav-tab.active::after { display: none; }

    @media (max-width: 760px) {
      .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 100;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 200ms ease;
        box-shadow: none;
      }
      .sidebar.open {
        transform: translateX(0);
        box-shadow: 4px 0 20px rgba(14,14,12,0.15);
      }
      .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(14,14,12,0.3);
        z-index: 99;
      }
      .sidebar-backdrop.visible { display: block; }
      .sidebar-toggle { display: inline-block; }
    }

    /* =========================================================
       MESSAGES VIEW
       ========================================================= */

    .app-messages {
      flex: 1;
      overflow-y: auto;
      padding: 36px 28px 32px;
      position: relative;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    /* Scrollbar area messaggi: eredita la scrollbar globale di marca. */

    /* ── Empty state — indice tavole ────────────────────────── */
    .empty-state {
      max-width: 760px;
      margin: 0 auto;
      padding: 24px 0 20px;
    }
    .empty-state-icon {
      display: none; /* sostituito da heading editoriale */
    }
    .empty-state-header {
      display: flex;
      align-items: baseline;
      gap: 16px;
      padding-bottom: 14px;
      border-bottom: 2px solid var(--rule);
      margin-bottom: 22px;
    }
    .empty-state-header-num {
      font-family: var(--f-sans);
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink-3);
      font-weight: 600;
    }
    .empty-state h2 {
      /* Mock homepage: H1 31px, ls -.03em, lh 1.12 */
      font-family: var(--f-sans);
      font-weight: 600;
      font-size: 31px;
      line-height: 1.12;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin: 0;
    }
    .empty-state h2 em {
      /* Nome utente in gradiente aurora (handoff 0307): solo la parola del nome. */
      font-style: normal;
      font-weight: 600;
      background: var(--aurora-text);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }
    .empty-state p {
      font-family: var(--f-sans);
      font-style: normal;
      font-size: 15.5px;
      line-height: 1.6;
      color: var(--ink-3);
      margin: 0 0 18px;
      max-width: 580px;
    }

    /* R2 — 2×2 su desktop: dimezza l'altezza del blocco così la CTA "Apri un
       progetto" resta sopra la fold (su mobile torna a colonna singola). */
    .example-pills {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 28px;
      row-gap: 0;
      border-top: 1px solid var(--rule);
    }

    /* P3/R1 — CTA "Apri un progetto" sotto le pill, solo in home. */
    .home-cta { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; }
    /* Mock: "oppure" 12px, letter-spacing .14em, minuscolo, #85878F */
    .home-cta-or {
      font-family: var(--f-sans); font-size: 12px; letter-spacing: 0.14em;
      color: var(--ink-4); text-align: center;
    }
    .home-cta-card {
      display: flex; align-items: center; gap: 14px;
      text-align: left; border: 1px solid var(--rule); border-radius: var(--radius-card);
      background: var(--paper); padding: 14px 20px; cursor: pointer;
      font-family: var(--f-sans); transition: border-color .15s, box-shadow .15s;
    }
    .home-cta-card:hover { border-color: var(--ink); box-shadow: 0 6px 20px rgba(20,20,50,.06); }
    /* Mock: badge icona su card-CTA = #FBFAF8 + bordo, icona scura */
    .home-cta-card-ico {
      width: 40px; height: 40px; flex: none; border-radius: var(--radius-field);
      background: #FBFAF8; border: 1px solid var(--rule);
      display: flex; align-items: center; justify-content: center;
    }
    .home-cta-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .home-cta-card-title { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
    .home-cta-card-sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
    /* Mock: bottone secondario "Apri →" — stessa taglia del primario (11×18, raggio 10) */
    .home-cta-card-arrow {
      display: inline-flex; align-items: center; gap: 8px; flex: none;
      font-size: 13.5px; font-weight: 600; color: var(--ink);
      border: 1px solid var(--rule); background: #FBFAF8;
      border-radius: var(--radius); padding: 11px 18px;
    }
    /* Card-destinazione coming soon (Controlla una pratica, decisione 2026-07-03) */
    .home-cta-card--soon { opacity: .5; cursor: not-allowed; }
    .home-cta-card--soon:hover { border-color: var(--rule); box-shadow: none; }
    .example-pill {
      display: grid;
      grid-template-columns: 56px 1fr auto;
      gap: 18px;
      align-items: center;
      padding: 16px 6px 16px 2px;
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--rule-soft);
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      font-size: 15px;
      line-height: 1.45;
      color: var(--ink-2);
      transition: background 140ms ease, color 140ms ease;
      position: relative;
    }
    .example-pill::after {
      content: '↗';
      font-family: var(--f-mono);
      color: var(--ink-4);
      font-size: 16px;
      transition: color 140ms ease, transform 140ms ease;
      grid-column: 3;
    }
    .example-pill:hover {
      background: var(--paper-2);
      color: var(--ink);
    }
    .example-pill:hover::after {
      color: var(--cinabro);
      transform: translate(2px, -2px);
    }
    .example-pill:nth-child(1)::before { content: '01.'; }
    .example-pill:nth-child(2)::before { content: '02.'; }
    .example-pill:nth-child(3)::before { content: '03.'; }
    .example-pill:nth-child(4)::before { content: '04.'; }
    .example-pill::before {
      font-family: var(--f-mono);
      font-size: 13px;
      color: var(--cinabro);
      font-weight: 500;
      grid-column: 1;
      text-align: right;
    }
    .example-pill-label {
      display: block;
      font-family: var(--f-sans);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--blueprint);
      margin-bottom: 4px;
    }

    /* ── Message rows — niente "card" bordate ─────────────── */
    .msg-row {
      display: flex;
      max-width: 820px;
      margin: 0 auto 20px;
      padding: 0;
    }
    .msg-row--user { justify-content: flex-end; }
    .msg-row--bot  { justify-content: flex-start; }

    /* USER: bolla domanda nera, testo crema, angoli morbidi (brand) */
    .msg-user {
      /* Mock: bolla domanda 14/14/5/14, padding 12×16 (8 sotto), max 82% */
      max-width: 82%;
      background: var(--ink);
      color: #FBFAF8;
      padding: 12px 16px 8px;
      font-size: 14.5px;
      line-height: 1.5;
      font-family: var(--f-sans);
      letter-spacing: -0.005em;
      white-space: pre-wrap;
      word-break: break-word;
      border-radius: 14px 14px 5px 14px;
    }
    /* Icona copia dentro la bolla, in basso a destra (mock) */
    .msg-user-copyrow { display: flex; justify-content: flex-end; margin-top: 6px; }
    .msg-user-copy {
      display: inline-flex; padding: 4px; border-radius: 6px; cursor: pointer;
      background: none; border: 0; color: var(--ink-4);
      transition: background 120ms ease, color 120ms ease;
    }
    .msg-user-copy:hover { background: #2C2E35; color: #FBFAF8; }

    /* BOT: paragrafo aperto, nessun marker a margine */
    .msg-bot {
      max-width: 90%;
      width: 100%;
      padding: 0;
      position: relative;
    }
    .msg-bot::before { content: none; }
    .msg-bot-inner {
      font-family: var(--f-sans);
      font-size: 15px;
      line-height: 1.62;
      color: var(--ink);
      max-width: 75ch;
    }

    /* Markdown styling within bot turn */
    .markdown-body p { margin: 0 0 0.7em; }
    .markdown-body p:last-child { margin-bottom: 0; }
    .markdown-body p:first-child { margin-top: 0; }
    .markdown-body strong { color: var(--ink); font-weight: 600; }
    .markdown-body em { color: var(--ink-2); }
    .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
      font-family: var(--f-serif);
      font-weight: 600;
      letter-spacing: -0.012em;
      margin: 1.4em 0 0.5em;
      line-height: 1.2;
      color: var(--ink);
    }
    .markdown-body h1 { font-size: 22px; }
    .markdown-body h2 { font-size: 19px; }
    .markdown-body h3 { font-size: 16.5px; }
    .markdown-body h4 { font-size: 14px; letter-spacing: 0; font-family: var(--f-sans); font-weight: 600; color: var(--ink-2); }
    .markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin: 0.65em 0 0.9em; }
    .markdown-body ul { list-style: disc outside; }
    .markdown-body ol { list-style: decimal outside; }
    .markdown-body li { margin: 0.32em 0; padding-left: 0.18em; }
    .markdown-body ul li::marker { color: var(--cinabro); }
    .markdown-body ol li::marker { font-family: var(--f-mono); font-size: 13px; color: var(--cinabro); }
    .markdown-body code {
      font-family: var(--f-mono);
      font-size: 0.86em;
      background: var(--paper-2);
      border: 1px solid var(--rule-soft);
      padding: 1px 6px;
      border-radius: 2px;
      color: var(--ink-2);
    }
    .markdown-body pre {
      background: var(--ink);
      color: var(--paper-2);
      padding: 14px 16px;
      border-radius: 2px;
      overflow-x: auto;
      font-family: var(--f-mono);
      font-size: 12.5px;
      line-height: 1.55;
      margin: 1em 0;
    }
    .markdown-body pre code { background: transparent; border: 0; padding: 0; color: inherit; }
    /* Nota / callout: box verde tecnico (inderogabilità, prevalenza norma, avvertenze).
       I blockquote nelle risposte Urbica sono sempre note di questo tipo. */
    .markdown-body blockquote {
      border-left: 3px solid var(--moss);
      background: #eef6f0;
      margin: 1em 0;
      padding: 10px 14px;
      border-radius: 0 var(--radius) var(--radius) 0;
      font-style: normal;
      color: var(--ink-2);
    }
    .markdown-body blockquote p { margin: 0; }
    .markdown-body blockquote p + p { margin-top: 0.5em; }
    .markdown-body blockquote strong { color: var(--moss); }
    .markdown-body a { color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: color 120ms ease, border-color 120ms ease; }
    .markdown-body a:hover { color: var(--ink); border-bottom-color: var(--ink); text-decoration: none; }
    .markdown-body a.chat-pdf-link { background: var(--cinabro-bg); padding: 1px 6px 2px; border-radius: 2px; border-bottom: 0; color: var(--cinabro); font-family: var(--f-mono); font-size: 0.85em; }
    .markdown-body a.chat-pdf-link::before { content: '⤓ '; font-weight: 700; }
    .markdown-body a.chat-pdf-link:hover { background: var(--cinabro); color: var(--paper); }
    /* Dual-link: secondary "fonte ufficiale" su dominio autoritativo (Normattiva/Gazzetta/Lombardia/comune) — visivamente secondaria */
    .markdown-body a[href*="normattiva.it"],
    .markdown-body a[href*="gazzettaufficiale"],
    .markdown-body a[href*="normelombardia"],
    .markdown-body a[href*="regione.lombardia"],
    .markdown-body a.fonte-ufficiale {
      font-size: 0.85em;
      color: var(--ink-3);
      border-bottom: 1px dotted var(--ink-3);
    }
    .markdown-body a[href*="normattiva.it"]:hover,
    .markdown-body a[href*="gazzettaufficiale"]:hover,
    .markdown-body a[href*="normelombardia"]:hover,
    .markdown-body a[href*="regione.lombardia"]:hover,
    .markdown-body a.fonte-ufficiale:hover {
      color: var(--blueprint); border-bottom-color: var(--blueprint);
    }
    .markdown-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 13.5px; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
    .markdown-body th { background: var(--paper-2); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; font-family: var(--f-sans); color: var(--ink-3); }
    .markdown-body td { padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); }
    .markdown-body tr:last-child td { border-bottom: 0; }
    /* Riferimenti in cella tabella -> pill compatta. Scope: SOLO link dentro <td>.
       Escludiamo chat-pdf-link (mantiene il badge ⤓ che apre il PDF). Gli altri
       link in cella (norma generica o fonte ufficiale) diventano pill blu
       uniformi: in una colonna "Riferimento" conta la leggibilità, non la
       gerarchia dual-link (preservata invece nella prosa, fuori da td). Il testo
       puro non-link resta invariato (CSS non puo' pillare testo senza wrapper). */
    .markdown-body td a:not(.chat-pdf-link) { display: inline-block; background: var(--blueprint-bg); color: var(--blueprint); font-family: var(--f-mono); font-size: 11.5px; line-height: 1.45; padding: 2px 8px; border-radius: 5px; border-bottom: 0; white-space: nowrap; }
    .markdown-body td a:not(.chat-pdf-link)::before { content: '→ '; opacity: 0.6; }
    .markdown-body td a:not(.chat-pdf-link):hover { background: var(--blueprint); color: #fff; border-bottom: 0; }
    .markdown-body hr { border: 0; border-top: 1px dashed var(--rule-soft); margin: 1.4em 0; }

    /* Fonti collapsible */
    .fonti-details {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--rule-soft);
      font-family: var(--f-sans);
      font-size: 13px;
      color: var(--ink-3);
    }
    .fonti-details summary {
      cursor: pointer;
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--ink-2);
      letter-spacing: 0;
      font-weight: 500;
    }
    .fonti-details summary::-webkit-details-marker { display: none; }
    .fonti-details summary:hover { color: var(--ink); }
    .fonti-details .caret { transition: transform 140ms ease; display: inline-block; font-size: 9px; }
    .fonti-details[open] .caret { transform: rotate(90deg); }
    .fonti-list { list-style: none; padding: 8px 0 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
    .fonti-list li { display: flex; align-items: baseline; gap: 8px; }
    .fonti-list code { background: var(--paper-2); padding: 1px 6px; border: 1px solid var(--rule-soft); border-radius: 2px; font-size: 11px; }
    /* Testo informativo piccolo: minimo --ink-3 (contrasto WCAG AA su crema;
       --ink-4/--ink-5 restano per placeholder/disabled/bordi — feedback
       utente ipovedente 2026-07-02). Stesso criterio nelle regole sotto. */
    .fonti-list span { color: var(--ink-3); font-size: 10.5px; }

    /* Meta del turno */
    .msg-meta {
      margin-top: 10px;
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: 0;
      color: var(--ink-4);
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }
    .msg-meta-sep { width: 12px; height: 1px; background: var(--rule-soft); display: inline-block; }

    /* Feedback su risposta */
    .msg-feedback {
      margin-top: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    /* Pollici mock: 32px, icona SVG, toggle; tooltip via [data-tip-up] */
    .feedback-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px;
      background: transparent;
      border: 0;
      border-radius: 8px;
      color: var(--ink-4);
      cursor: pointer;
      line-height: 1;
      transition: background 0.15s, color 0.15s, opacity 0.15s;
    }
    .feedback-btn:hover { background: var(--paper-3); color: var(--ink); }
    .feedback-btn.selected { background: var(--paper-3); color: var(--ink); }
    .feedback-btn:disabled { opacity: 0.45; cursor: default; }
    .feedback-thanks {
      font-size: 12px;
      color: var(--ink-3);
    }
    .feedback-comment {
      flex-basis: 100%;
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-width: 420px;
    }
    .feedback-textarea {
      width: 100%;
      border: 1px solid var(--rule);
      border-radius: var(--radius-field);
      padding: 10px 12px;
      font-family: inherit;
      font-size: 13.5px;
      line-height: 1.5;
      resize: vertical;
      background: #FBFAF8;
      color: var(--ink);
    }
    .feedback-textarea:focus { outline: none; border-color: var(--ink); }
    .feedback-submit {
      align-self: flex-start;
      background: var(--ink);
      color: #FBFAF8;
      border: none;
      border-radius: var(--radius);
      padding: 8px 14px;
      font-size: 12.5px;
      font-weight: 600;
      font-family: var(--f-sans);
      cursor: pointer;
      min-height: 32px;
    }
    .feedback-submit:hover { background: #2C2E35; }

    /* Tooltip verso l'alto (mock [data-tip-up]) — pollici, icona copia bolla */
    [data-tip-up] { position: relative; }
    [data-tip-up]:hover::after {
      content: attr(data-tip-up);
      position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
      background: var(--ink); color: #FBFAF8;
      font-size: 12px; font-weight: 500;
      padding: 6px 10px; border-radius: 8px; white-space: nowrap; z-index: 60;
      box-shadow: 0 8px 24px rgba(20,20,40,.22); pointer-events: none;
    }
    [data-tip-up]:hover::before {
      content: ''; position: absolute; bottom: calc(100% + 5px); left: 50%;
      transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px;
      background: var(--ink); border-radius: 2px; z-index: 60; pointer-events: none;
    }

    /* Divider tra turni (mock): hairline · "Domanda N · ora" · hairline */
    .msg-divider {
      max-width: 820px;
      margin: 18px auto 6px;
      display: flex; align-items: center; gap: 12px;
      width: 100%;
    }
    .msg-divider-line { flex: 1; height: 1px; background: #E8E6DE; }
    .msg-divider-label {
      font-size: 12px; letter-spacing: 0.14em; color: var(--ink-3);
      white-space: nowrap;
    }
    /* Typing indicator */
    .typing-indicator {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 8px 0;
    }
    .typing-dot {
      width: 7px;
      height: 7px;
      background: var(--cinabro);
      border-radius: 50%;
      animation: typing-bounce 1.1s infinite ease-in-out;
    }
    .typing-dot:nth-child(1) { animation-delay: -0.32s; }
    .typing-dot:nth-child(2) { animation-delay: -0.16s; }
    @keyframes typing-bounce {
      0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
      40% { transform: scale(1); opacity: 1; }
    }

    /* Streaming bubble (Refactor 3) — phase indicator + meta footer */
    .msg-stream-phase {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      font-family: var(--f-mono);
      font-size: 10.5px;
      letter-spacing: 0.08em;
      color: var(--ink-4);
      text-transform: uppercase;
    }
    .msg-stream-dot {
      width: 7px;
      height: 7px;
      background: var(--cinabro);
      border-radius: 50%;
      animation: typing-bounce 1.1s infinite ease-in-out;
    }
    .msg-row--streaming [data-stream-text] {
      /* Il markdown viene renderizzato una volta sola al done. */
      word-wrap: break-word;
      min-height: 1.2em;
    }
    .msg-stream-meta {
      margin-top: 10px;
      font-family: var(--f-mono);
      font-size: 10px;
      letter-spacing: 0.1em;
      color: var(--ink-4);
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .msg-stream-meta[hidden] { display: none; }

    /* Thinking section (solo lifecycle + tool trace), separata dalla risposta. */
    .msg-thinking {
      margin-bottom: 12px;
      border-left: 2px solid var(--rule-soft);
      padding-left: 12px;
    }
    .msg-thinking-header {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: none;
      border: none;
      padding: 0;
      cursor: default;
      font-family: var(--f-mono);
      font-size: 10.5px;
      letter-spacing: 0.08em;
      color: var(--ink-4);
      text-transform: uppercase;
    }
    .msg-thinking--done .msg-thinking-header { cursor: pointer; }
    .msg-thinking-caret {
      display: none;
      font-size: 9px;
      transition: transform 0.15s ease;
    }
    .msg-thinking--done .msg-thinking-caret { display: inline; }
    .msg-thinking--expanded .msg-thinking-caret { transform: rotate(90deg); }
    .msg-thinking-body {
      margin-top: 8px;
      font-size: 13px;
      font-style: italic;
      line-height: 1.55;
      color: var(--ink-4);
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .msg-thinking-body:empty { display: none; }
    .msg-thinking--done:not(.msg-thinking--expanded) .msg-thinking-body { display: none; }
    .msg-thinking-step {
      display: block;
      font-family: var(--f-mono);
      font-style: normal;
      font-size: 11px;
      letter-spacing: 0.04em;
      color: var(--ink-5);
      margin: 6px 0 2px;
    }
    /* Shimmer sul label attivo: equivalente moderno dello spinner per la
       fase pre-token (NN/g: indicatore indeterminato animato, mai statico). */
    .msg-thinking--active .msg-thinking-label {
      background: linear-gradient(90deg, var(--ink-4) 35%, var(--ink-2) 50%, var(--ink-4) 65%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: thinking-shimmer 1.6s linear infinite;
    }
    @keyframes thinking-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    /* Error bubble */
    .msg-error {
      font-family: var(--f-mono);
      font-size: 13px;
      color: var(--cinabro);
      background: var(--cinabro-bg);
      border-left: 3px solid var(--cinabro);
      padding: 10px 14px;
      border-radius: 0;
      max-width: 92%;
    }

    /* Nota non-bloccante sotto una risposta recuperata dopo stream interrotto
       (deploy Fly mid-stream): la risposta resta, la nota informa. */
    .msg-stream-notice {
      font-family: var(--f-mono);
      font-size: 12px;
      color: var(--ink-3);
      border-left: 3px solid var(--rule);
      padding: 6px 14px;
      margin-top: 8px;
    }

    /* =========================================================
       INPUT — barra inchiostro netta in fondo
       ========================================================= */

    .app-input {
      border-top: 1px solid var(--rule);
      background: var(--paper);
      padding: 14px 28px 18px;
      padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }
    #chat-form {
      max-width: 820px;
      margin: 0 auto;
    }
    .input-wrapper {
      display: flex;
      gap: 12px;
      align-items: flex-end;
      border: 1px solid var(--rule);
      border-radius: 12px;
      background: var(--paper);
      padding: 6px 6px 6px 16px;
      transition: border-color 140ms ease, box-shadow 140ms ease;
    }
    .input-wrapper:focus-within {
      border-color: var(--blueprint);
      box-shadow: 0 0 0 3px var(--blueprint-bg);
    }
    #question {
      flex: 1;
      min-height: 38px;
      max-height: 160px;
      resize: none;
      border: 0;
      background: transparent;
      font-family: var(--f-sans);
      font-size: 15px;
      line-height: 1.5;
      color: var(--ink);
      padding: 8px 0;
      outline: 0;
    }
    #question::placeholder {
      color: var(--ink-4);
      font-style: normal;
      font-family: var(--f-sans);
    }
    .input-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 2px;
    }
    #char-count {
      font-family: var(--f-mono);
      font-size: 10px;
      color: var(--ink-4);
      letter-spacing: 0.08em;
      white-space: nowrap;
    }
    #send-btn {
      background: var(--ink);
      color: #FBFAF8;
      border: 0;
      border-radius: 8px;
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 140ms ease, transform 100ms ease;
    }
    #send-btn:hover:not(:disabled) { background: #2b2d33; }
    #send-btn:active:not(:disabled) { transform: translate(1px, 1px); }
    #send-btn:disabled { background: var(--ink-5); cursor: not-allowed; }

    /* ── Homepage: layout IDENTICO al handoff (hero centrato + composer card 2 righe
       + card "crea progetto"). Il composer (.app-input) è spostato DENTRO #empty-state
       da applyHomeComposer; qui lo ri-stiliamo come nel mock. ── */
    .app-main.home-mode #messages {
      display: flex; flex-direction: column;
      justify-content: center; align-items: center;
      padding: 40px 32px;
    }
    .app-main.home-mode .empty-state {
      max-width: 640px; width: 100%; padding: 0; margin: 0;
    }
    /* saluto: 31px, centrato, niente sottotitolo né eyebrow */
    .app-main.home-mode .empty-state h2 {
      text-align: center; font-size: 31px; letter-spacing: -0.03em; line-height: 1.12;
    }
    .app-main.home-mode .empty-state > p,
    .app-main.home-mode .empty-state-header { display: none; }

    /* composer = card bianca a 2 righe (textarea sopra, azioni sotto) */
    #empty-state .app-input { border-top: 0; background: transparent; padding: 0; margin: 28px 0 0; }
    #empty-state #chat-form { max-width: 100%; }
    #empty-state .input-wrapper {
      flex-direction: column; align-items: stretch; gap: 0;
      border: 1px solid #E4E2DA; border-radius: 16px; background: #fff;
      box-shadow: 0 1px 2px rgba(20,20,40,.04), 0 16px 40px rgba(20,20,50,.05);
      padding: 18px 20px 14px;
    }
    #empty-state #question { min-height: 46px; padding: 0; font-size: 15.5px; }
    #empty-state .input-actions {
      justify-content: space-between; align-items: center; gap: 12px;
      margin-top: 10px; padding-bottom: 0; width: 100%;
    }
    #empty-state .composer-attach { display: inline-flex; }
    #empty-state #char-count { display: none; }
    #empty-state #references-btn { display: none; }  /* "cita riferimento": solo in progetto, non in home */
    /* bottone "Chiedi ad Urbica →" nero, come nel mock */
    #empty-state #send-btn {
      width: auto; height: auto; border-radius: 10px;
      padding: 11px 18px; gap: 8px; font-size: 13.5px; font-weight: 600;
    }
    #empty-state #send-btn .send-label { display: inline; }
    #empty-state #home-cta { margin-top: 18px; gap: 14px; width: 100%; }
    /* ── Topbar desktop (mock): toggle + titolo sezione + azione contestuale ── */
    .main-topbar {
      flex: none;
      display: flex; align-items: center; gap: 14px;
      padding: 16px 26px;
      border-bottom: 1px solid var(--rule-soft);
    }
    .topbar-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; flex: none;
      background: none; border: 0; border-radius: 9px;
      color: var(--ink-2); cursor: pointer;
      transition: background 120ms ease, color 120ms ease;
    }
    .topbar-toggle:hover { background: var(--paper-3); color: var(--ink); }
    .topbar-title { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
    .topbar-spacer { flex: 1; }
    .topbar-new {
      display: inline-flex; align-items: center; gap: 7px;
      background: none; border: 0; border-radius: 9px;
      padding: 7px 12px; cursor: pointer;
      font-family: var(--f-sans); font-size: 15px; font-weight: 600;
      color: var(--ink); letter-spacing: -0.01em;
      transition: background 120ms ease;
    }
    .topbar-new[hidden] { display: none; }
    .topbar-new:hover { background: var(--paper-3); }
    /* Il collapse vive nella topbar (mock): via il bottone dalla sidebar-brand */
    .rail-collapse { display: none; }
    @media (max-width: 760px) { .main-topbar { display: none; } }

    /* ── Card risposta (mock "Chiedi ad Urbica") ─────────────────────────── */
    .msg-readline {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; color: var(--ink-3);
      margin: 0 0 10px 2px;
    }
    .msg-readline svg { flex: none; }
    .answer-card {
      background: #fff;
      border: 1px solid #E4E2DA;
      border-radius: 16px;
      box-shadow: var(--shadow-md);
      padding: 18px 22px;
    }
    /* Mock: "Visualizza le fonti" = bottone bianco bordato come le altre azioni,
       conteggio in grigio 12px. */
    .card-fonti-btn {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff;
      border: 1px solid var(--rule);
      border-radius: 9px;
      padding: 8px 14px;
      font-family: var(--f-sans); font-size: 13px; font-weight: 600;
      color: var(--ink); cursor: pointer;
      transition: border-color 120ms ease;
    }
    .card-fonti-btn:hover { border-color: var(--ink); }
    .card-fonti-btn .cf-n { font-size: 12px; color: var(--ink-3); font-weight: 400; }
    .cit-n {
      font-family: var(--f-mono); font-size: 11px; font-weight: 600;
      color: var(--ink-2); margin-left: 2px;
    }
    .card-actions {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      clear: both;
      border-top: 1px solid var(--rule-soft);
      margin-top: 16px; padding-top: 14px;
    }
    .card-act {
      /* Mock: azioni bianche bordate 13px w600, raggio 9, padding 8×14 */
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; border: 1px solid var(--rule); border-radius: 9px;
      padding: 8px 14px;
      font-family: var(--f-sans); font-size: 13px; font-weight: 600;
      color: var(--ink); cursor: pointer;
      transition: border-color 120ms ease;
    }
    .card-act:hover:not(:disabled) { border-color: var(--ink); }
    .card-act--soon { opacity: .45; cursor: not-allowed; }
    .card-actions-spacer { flex: 1; }
    .card-actions .msg-feedback { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
    .card-actions .feedback-btn {
      transition: opacity 120ms ease, background 120ms ease;
    }
    .card-actions .feedback-btn:hover { opacity: 1; background: var(--paper-2); }
    /* Nel corpo della risposta i link-citazione restano discreti (mock): ink, non accento */
    .answer-card .markdown-body a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
    .answer-card .markdown-body a:hover { color: var(--ink); }
    /* Mock 0307: il separatore "Domanda N · ora" esiste, PRIMA di ogni domanda dal 2° turno */
    .card-actions .feedback-comment { width: 100%; }

    /* ── Storico conversazioni: pagina con righe (mock) ──────────────────── */
    .storico-wrap { max-width: 860px; margin: 0 auto; padding: 34px 24px 40px; }
    .storico-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
    .storico-head h2 {
      font-family: var(--f-display); font-size: 28px; font-weight: 600;
      letter-spacing: -0.02em; color: var(--ink); margin: 0;
    }
    .storico-count { font-size: 12px; color: var(--ink-3); }
    /* Tab mock: sottolineatura attiva, conteggi grigi */
    .storico-tabs {
      display: flex; align-items: center; gap: 22px;
      margin: 20px 0 18px; border-bottom: 1px solid var(--rule);
    }
    .storico-tab {
      display: inline-flex; align-items: baseline; gap: 7px;
      background: none; border: 0; cursor: pointer;
      font-family: var(--f-sans); font-size: 13.5px; font-weight: 500;
      color: var(--ink-2); padding: 0 0 11px;
      border-bottom: 2px solid transparent; margin-bottom: -1px;
      transition: color 120ms ease;
    }
    .storico-tab:hover { color: var(--ink); }
    .storico-tab.active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
    .storico-tab-n { font-size: 12px; font-weight: 400; color: var(--ink-3); }
    /* Header gruppo per progetto (mock) */
    .storico-group-head { display: flex; align-items: baseline; gap: 10px; margin: 12px 2px 0; }
    .storico-group-name {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
    }
    .storico-group-name svg { color: var(--ink-2); }
    .storico-group-meta { font-size: 12px; color: var(--ink-3); }
    .storico-list { display: flex; flex-direction: column; gap: 10px; }
    .storico-empty { color: var(--ink-3); font-size: 14px; padding: 24px 4px; }
    .storico-row {
      display: flex; align-items: center; gap: 14px;
      width: 100%; text-align: left;
      background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-card);
      padding: 14px 18px; cursor: pointer;
      font-family: var(--f-sans);
      transition: border-color .15s;
    }
    .storico-row:hover { border-color: var(--ink); }
    .storico-row-ico {
      width: 36px; height: 36px; flex: none; border-radius: 10px;
      background: var(--paper-3); color: var(--ink-2);
      display: flex; align-items: center; justify-content: center;
    }
    .storico-row-ico svg { width: 17px; height: 17px; }
    .storico-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .storico-row-title {
      font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .storico-row-sub { display: flex; align-items: center; gap: 9px; min-width: 0; }
    /* Badge progetto sulla riga (mock, solo in "Tutte") */
    .storico-row-badge {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 12px; font-weight: 600; color: var(--ink);
      background: var(--paper-3); border-radius: 6px; padding: 2px 8px;
      white-space: nowrap;
    }
    .storico-row-badge svg { width: 11px; height: 11px; color: var(--ink-2); }
    .storico-row-comune {
      font-size: 12px; color: var(--ink-3);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .storico-row-when { font-size: 12px; color: var(--ink-4); flex: none; white-space: nowrap; }
    .storico-row-arrow { color: var(--chevron); font-size: 18px; line-height: 1; flex: none; display: inline-flex; }

    /* ── Pannello destro "Tutte le fonti": spinge il contenuto ───────────── */
    .app-main { transition: margin-right 220ms var(--ease); }
    .fonti-panel {
      /* Mock: aside 344px affiancato, spinge il centro (mai overlay) */
      position: fixed; top: 0; right: 0; bottom: 0;
      width: 344px; max-width: 100vw;
      background: var(--canvas);
      border-left: 1px solid var(--rule);
      box-shadow: var(--shadow-drawer);
      z-index: 400;
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform 220ms var(--ease);
    }
    body.fonti-open .fonti-panel { transform: none; }
    body.fonti-open .app-main { margin-right: 344px; }
    /* ── Drawer Archivio del Comune (mock §6: overlay 460px + scrim) ── */
    .arch-drawer { position: fixed; inset: 0; z-index: 500; display: flex; justify-content: flex-end; }
    .arch-scrim { position: absolute; inset: 0; background: rgba(20,20,30,.18); }
    .arch-panel {
      position: relative; width: 460px; max-width: 94vw; height: 100%;
      border-left: 1px solid var(--rule); background: var(--canvas);
      display: flex; flex-direction: column; box-shadow: var(--shadow-drawer);
    }
    .arch-head {
      flex: none; display: flex; align-items: center; justify-content: space-between;
      padding: 18px 20px 14px; border-bottom: 1px solid var(--rule); background: #fff;
    }
    .arch-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
    .arch-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
    .arch-tools { flex: none; padding: 14px 16px 12px; background: #fff; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 9px; }
    .arch-search {
      display: flex; align-items: center; gap: 8px;
      background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 9px 12px;
    }
    .arch-search input { border: 0; outline: 0; flex: 1; min-width: 0; font-family: var(--f-sans); font-size: 13px; color: var(--ink); background: transparent; }
    .arch-tools select {
      font-family: var(--f-sans); font-size: 12.5px; color: var(--ink);
      background: #FBFAF8; border: 1px solid var(--rule); border-radius: 9px; padding: 8px 10px;
      outline: none; cursor: pointer;
    }
    .arch-body { flex: 1; overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 8px; }
    .arch-cont {
      background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-card);
      padding: 14px 15px; margin-bottom: 4px;
    }
    .arch-cont-head { display: flex; align-items: center; gap: 9px; }
    .arch-cont-ico { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--paper-3); display: flex; align-items: center; justify-content: center; }
    .arch-cont-t { font-size: 13.5px; font-weight: 600; line-height: 1.2; color: var(--ink); }
    .arch-cont-s { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
    .arch-cont-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
    .arch-cont-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); }
    .arch-cont-k { font-size: 12px; color: var(--ink-3); width: 54px; flex: none; }
    .arch-cont-pec { border-bottom: 1.5px solid #C9C7BE; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .arch-docs-label { font-size: 11px; color: var(--ink-4); margin: 6px 0 2px; }
    .arch-doc {
      display: flex; align-items: center; gap: 11px; background: #fff;
      border: 1px solid var(--rule); border-radius: var(--radius-field);
      padding: 11px 13px; cursor: pointer; transition: border-color .15s;
      text-align: left; width: 100%; font-family: var(--f-sans);
    }
    .arch-doc:hover { border-color: var(--ink); }
    .arch-doc-tag { font-size: 11px; font-weight: 500; color: var(--ink); background: var(--paper-3); border-radius: 6px; padding: 3px 7px; flex: none; }
    .arch-doc-name { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; flex: 1; min-width: 0; }
    .arch-doc-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
    .arch-empty { font-size: 13px; color: var(--ink-3); padding: 14px 4px; }
    /* Entry sulla barra workspace */
    .pws-archivio {
      display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
      background: none; border: 1px solid var(--rule); border-radius: 9px;
      padding: 6px 11px; cursor: pointer; font-family: var(--f-sans);
      font-size: 12.5px; font-weight: 600; color: var(--ink);
      transition: border-color .15s;
    }
    .pws-archivio:hover { border-color: var(--ink); }
    .pws-archivio-comune { font-weight: 400; color: var(--ink-3); }

    /* Header di gruppo per domanda (mock): etichetta + hairline */
    .fp-group-head {
      display: flex; align-items: center; gap: 10px; margin: 2px 2px 0;
    }
    .fp-group-label {
      font-size: 12px; font-weight: 600; color: var(--ink);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
    }
    .fp-group-line { flex: 1; height: 1px; background: #E8E6DE; }
    .fp-head {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
      padding: 20px 20px 14px;
      border-bottom: 1px solid var(--rule-soft);
      flex: none;
    }
    .fp-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
    .fp-sub { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }
    .fp-close {
      background: none; border: 0; cursor: pointer;
      color: var(--ink-4); padding: 6px; border-radius: 8px; flex: none;
    }
    .fp-close:hover { color: var(--ink); background: var(--paper-3); }
    .fp-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
    .fp-card {
      background: #fff; border: 1px solid var(--rule); border-radius: 12px;
      padding: 14px 16px; box-shadow: var(--shadow-sm);
    }
    .fp-card-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 10px;
      align-items: start;
    }
    /* Mock: tag fonte 12px w500 su #F1F0EC, raggio 6 (le sigle restano sigle) */
    .fp-badge {
      font-family: var(--f-sans); font-size: 12px; font-weight: 500;
      color: var(--ink); background: var(--paper-3);
      border-radius: 6px; padding: 3px 8px;
      grid-column: 1; justify-self: start; max-width: 100%;
      overflow-wrap: anywhere;
    }
    .fp-card-title {
      grid-column: 1 / -1;
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
      font-size: 14.5px; font-weight: 600;
      line-height: 1.4; letter-spacing: -0.01em; color: var(--ink);
    }
    .fp-num {
      grid-column: 2; grid-row: 1;
      align-self: start; white-space: nowrap;
      font-size: 12px; font-weight: 600; color: var(--ink);
    }
    .fp-card-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 9px; }
    .fp-comune { font-size: 12px; color: var(--ink-3); }
    /* Mock: pill vigenza con pallino, 12px w600 */
    .fp-vig {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 12px; font-weight: 600;
      border-radius: 999px; padding: 3px 9px; white-space: nowrap;
    }
    .fp-vig--ok { color: var(--moss); background: var(--moss-bg); }
    .fp-vig--no { color: var(--warn); background: var(--warn-bg); }
    /* Mock: citazione in box #FAF9F5, bordo divisore, raggio 11, 13.5px/1.65 */
    .fp-excerpt {
      margin-top: 12px;
      background: #FAF9F5;
      border: 1px solid var(--rule-soft);
      border-radius: var(--radius-field);
      padding: 14px 16px;
      font-size: 13.5px; line-height: 1.65; color: #3C3E45;
      display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
    }
    .fp-link {
      display: inline-block; margin-top: 8px;
      background: none; border: 0; padding: 0; cursor: pointer;
      font-family: var(--f-sans); font-size: 12.5px; color: var(--accent);
    }
    .fp-link:hover { color: var(--accent-700); text-decoration: underline; }
    @media (max-width: 760px) {
      body.fonti-open .app-main { margin-right: 0; }
      .fonti-panel { width: 100vw; }
    }

    /* Elementi visibili solo nel composer della homepage (nascosti altrove). */
    .send-label { display: none; }
    .composer-attach {
      display: none; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 500; color: var(--ink-3); cursor: pointer;
    }
    .composer-attach:hover { color: var(--ink); }

    /* =========================================================
       FOOTER — colophon tecnico
       ========================================================= */

    .app-footer {
      border-top: 1px solid var(--rule);
      padding: 10px 28px 14px;
      padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
      background: var(--paper-2);
    }
    .app-footer p {
      margin: 0;
      font-family: var(--f-sans);
      font-size: 11.5px;
      line-height: 1.5;
      letter-spacing: 0;
      color: var(--ink-4);
      text-align: center;
    }

    /* =========================================================
       DOCUMENTI VIEW — catalogo archivio
       ========================================================= */

    #documents-view { padding: 0; }
    .docs-container {
      max-width: 1080px;
      margin: 0 auto;
      padding: 36px 28px 60px;
    }

    .docs-header {
      display: flex;
      align-items: baseline;
      gap: 18px;
      padding-bottom: 14px;
      border-bottom: 2px solid var(--rule);
      margin-bottom: 22px;
    }
    .docs-header-num {
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--cinabro);
      font-weight: 600;
    }
    .docs-header h2 {
      font-family: var(--f-serif);
      font-weight: 600;
      font-size: 32px;
      line-height: 1;
      letter-spacing: -0.018em;
      margin: 0;
      color: var(--ink);
    }
    .docs-header p {
      font-family: var(--f-serif);
      font-style: italic;
      color: var(--ink-3);
      margin: 0;
      font-size: 14px;
    }

    /* Toolbar — campo + selettori in stile tecnico */
    .docs-toolbar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      margin-bottom: 24px;
      align-items: end;
    }
    .docs-search-field,
    .docs-filter-field {
      display: grid;
      gap: 6px;
      min-width: 0;
    }
    .docs-search-field > span,
    .docs-filter-field > span {
      font-family: var(--f-sans);
      font-size: 11px;
      line-height: 1;
      font-weight: 600;
      color: var(--ink-3);
    }
    .docs-toolbar input[type="text"],
    .docs-toolbar select {
      /* Mock: campo ricerca bianco, bordo unico, raggio 10 */
      font-family: var(--f-sans);
      font-size: 14px;
      padding: 10px 13px;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      color: var(--ink);
      outline: 0;
      transition: border-color 120ms ease, box-shadow 120ms ease;
      width: 100%;
      appearance: none;
      -webkit-appearance: none;
    }
    .docs-toolbar input[type="text"]::placeholder { color: var(--ink-5); }
    .docs-toolbar select {
      background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                        linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
      background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
      background-size: 5px 5px;
      background-repeat: no-repeat;
      padding-right: 28px;
      cursor: pointer;
      font-family: var(--f-mono);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .docs-toolbar input:focus, .docs-toolbar select:focus {
      border-color: var(--ink);
      box-shadow: 2px 2px 0 var(--cinabro);
    }
    #doc-filter-reset {
      background: var(--paper);
      border: 1px solid var(--rule);
      color: var(--ink);
      min-height: 38px;
      padding: 0 16px;
      cursor: pointer;
      font-family: var(--f-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-weight: 500;
      transition: background 120ms ease, color 120ms ease;
    }
    #doc-filter-reset:hover { background: var(--ink); color: var(--paper); }
    .docs-filterbar {
      display: grid;
      grid-template-columns: repeat(6, minmax(120px, 1fr));
      gap: 9px;
      align-items: end;
      margin: -8px 0 24px;
    }
    .docs-filterbar input,
    .docs-filterbar select {
      width: 100%;
      min-width: 0;
      padding: 9px 10px;
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      background: var(--paper);
      color: var(--ink);
      font-family: var(--f-sans);
      font-size: 12px;
      outline: none;
    }
    .docs-filterbar input:focus,
    .docs-filterbar select:focus { border-color: var(--ink); }
    @media (max-width: 980px) {
      .docs-filterbar { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
    }
    @media (max-width: 620px) {
      .docs-filterbar { grid-template-columns: 1fr 1fr; }
    }
    .library-results-guide {
      display: grid;
      grid-template-columns: minmax(170px, .32fr) 1fr;
      gap: 18px;
      padding: 16px 18px;
      margin: 0 0 22px;
      border: 1px solid #bdcce3;
      border-radius: var(--radius-card);
      background: var(--blueprint-bg);
      color: var(--ink-2);
    }
    .library-results-guide[hidden] { display: none; }
    .library-results-guide h3 {
      margin: 0;
      font: 600 14px/1.3 var(--f-sans);
      color: var(--ink);
    }
    .library-results-guide p {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.55;
    }
    .library-results-guide strong { color: var(--ink); }
    @media (max-width: 700px) {
      .library-results-guide { grid-template-columns: 1fr; gap: 5px; }
    }

    /* Grid — più che card, righe da catalogo */
    .docs-grid {
      /* Mock: card per Comune in griglia 3 colonne, gap 14 */
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 14px;
    }
    /* Mock: riga documento — tag pill, nome + tipo·meta, azione a destra */
    .doc-card {
      display: flex;
      align-items: center;
      gap: 13px;
      min-width: 0;
      padding: 14px 16px;
      border: 1px solid var(--rule);
      border-radius: var(--radius-card);
      background: var(--paper);
      transition: border-color .15s;
    }
    .doc-card:hover { border-color: var(--ink); }

    .doc-card-tag {
      font-size: 12px; font-weight: 500; color: var(--ink);
      background: var(--paper-3); border-radius: 7px; padding: 5px 9px;
      flex: none; white-space: nowrap;
    }
    .doc-card-body { flex: 1; min-width: 0; }
    .doc-card-title {
      font-family: var(--f-sans);
      font-weight: 600;
      font-size: 14px;
      line-height: 1.3;
      color: var(--ink);
      letter-spacing: -0.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .doc-card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 3px;
    }
    .doc-card-open {
      flex: none;
      background: var(--paper);
      border: 1px solid var(--rule);
      border-radius: 7px;
      padding: 5px 11px;
      font-family: var(--f-sans);
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
      cursor: pointer;
      transition: border-color 120ms ease;
    }
    .doc-card-open:hover { border-color: var(--ink); }
    /* Livello file: righe su 2 colonne (mock) */
    .docs-grid--files { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    @media (max-width: 900px) { .docs-grid--files { grid-template-columns: 1fr; } }

    /* Skeleton mentre carica */
    .docs-skeleton-grid .doc-card {
      pointer-events: none;
    }
    .docs-skeleton-grid .doc-card-title {
      background: linear-gradient(90deg, var(--paper-2), var(--paper-3), var(--paper-2));
      background-size: 200% 100%;
      color: transparent;
      height: 1.5em;
      animation: shimmer 1.4s linear infinite;
    }
    .docs-skeleton-grid .doc-card-meta span { color: transparent; }
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .docs-empty {
      grid-column: 1 / -1;
      padding: 48px 20px;
      text-align: center;
      font-family: var(--f-serif);
      font-style: italic;
      font-size: 16px;
      color: var(--ink-3);
      border-right: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
    }
    .docs-empty button {
      font-family: var(--f-mono);
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--cinabro);
      background: none;
      border: 0;
      border-bottom: 1.5px solid var(--cinabro);
      cursor: pointer;
      padding: 2px 0;
      margin-left: 8px;
    }

    .docs-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px;
      margin-top: 26px;
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--ink-3);
      text-transform: uppercase;
    }
    .docs-pagination button {
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 7px 14px;
      background: var(--paper);
      border: 1px solid var(--rule);
      color: var(--ink);
      cursor: pointer;
      transition: background 120ms ease, color 120ms ease;
    }
    .docs-pagination button:hover:not(:disabled) {
      background: var(--ink);
      color: var(--paper);
    }
    .docs-pagination button:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    /* ── Archivio drill-down: Comune › Sezione › File ────────── */
    .biblio-breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin: -8px 0 18px;
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .biblio-breadcrumb[hidden] { display: none; }
    .biblio-crumb {
      background: none; border: 0; padding: 0;
      cursor: pointer; font: inherit; color: var(--ink-2);
    }
    .biblio-crumb:hover { color: var(--ink); text-decoration: underline; }
    .biblio-crumb.current { color: var(--ink); cursor: default; text-decoration: none; font-weight: 600; }
    .biblio-crumb-sep { color: var(--ink-4); }

    .biblio-card {
      /* Mock: card Comune bianca, bordo unico, raggio 14, hover bordo nero + ombra */
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 20px;
      border: 1px solid var(--rule);
      border-radius: var(--radius-card);
      background: var(--paper);
      cursor: pointer;
      text-align: left;
      position: relative;
      transition: border-color .15s, box-shadow .15s;
    }
    .biblio-card:hover { border-color: var(--ink); box-shadow: 0 6px 20px rgba(20,20,50,.06); }
    .biblio-card--municipality .biblio-card-badge {
      font-family: var(--f-mono);
      font-size: 11px;
      letter-spacing: .08em;
      font-weight: 600;
      text-transform: uppercase;
    }
    .biblio-card--municipality .biblio-card-title {
      font-size: 18px;
    }
    .biblio-card-toprow {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
    }
    .biblio-card-badge {
      width: 38px; height: 38px; border-radius: var(--radius-field);
      background: var(--paper-3); color: var(--ink-2);
      display: flex; align-items: center; justify-content: center;
    }
    .biblio-card-sub {
      font-size: 12px;
      color: var(--ink-3);
    }
    .biblio-card-title {
      font-family: var(--f-sans);
      font-weight: 600;
      font-size: 16px;
      letter-spacing: -0.015em;
      line-height: 1.3;
      color: var(--ink);
    }
    .biblio-card-count {
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 4px;
    }
    .biblio-card-arrow {
      font-size: 18px;
      line-height: 1;
      color: var(--chevron);
    }
    .library-source-card {
      align-items: stretch;
      padding: 18px 20px;
    }
    .library-source-card .doc-card-title {
      margin-top: 6px;
      font-size: 18px;
      line-height: 1.25;
      white-space: normal;
      overflow: visible;
    }
    .library-source-card .doc-card-meta {
      margin-top: 5px;
      line-height: 1.45;
    }
    .library-source-level {
      color: var(--ink-3);
      font-family: var(--f-mono);
      font-size: 9.5px;
      letter-spacing: .055em;
      text-transform: uppercase;
    }
    .library-indexed-preview {
      margin-top: 14px;
      padding: 12px 13px;
      border-radius: 9px;
      background: var(--paper-2);
    }
    .library-indexed-preview-label {
      color: var(--ink-3);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .055em;
      text-transform: uppercase;
    }
    .library-indexed-preview ul {
      display: grid;
      gap: 5px;
      padding: 0;
      margin: 8px 0 0;
      list-style: none;
    }
    .library-indexed-preview li {
      color: var(--ink-2);
      font-size: 12px;
      line-height: 1.35;
    }
    .library-indexed-preview li span {
      color: var(--ink);
      font-weight: 650;
    }
    .library-indexed-preview .library-preview-more {
      color: var(--ink-3);
      font-style: italic;
    }
    .library-status-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }
    .library-status-item {
      padding-top: 9px;
      border-top: 1px solid var(--rule-soft);
    }
    .library-status-key {
      display: block;
      color: var(--ink-4);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .library-status-title {
      display: block;
      margin-top: 3px;
      color: var(--ink);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
    }
    .library-status-item--warning .library-status-title { color: #8a5a10; }
    .library-status-item--verified .library-status-title { color: var(--moss); }
    .library-status-detail {
      display: block;
      margin-top: 3px;
      color: var(--ink-3);
      font-size: 11px;
      line-height: 1.4;
    }
    @media (max-width: 560px) {
      .library-status-list { grid-template-columns: 1fr; }
    }
    .library-source-actions {
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
    }
    .library-source-actions a,
    .library-source-actions button {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 32px; padding: 6px 11px; border: 1px solid var(--rule);
      border-radius: 7px; background: var(--paper); color: var(--ink);
      font: 600 12px var(--f-sans); text-decoration: none; cursor: pointer;
    }
    .library-source-actions .primary {
      background: var(--ink); color: var(--paper); border-color: var(--ink);
    }
    .library-detail {
      border: 1px solid var(--rule); border-radius: var(--radius-card);
      background: var(--paper); padding: 24px; margin-top: 4px;
    }
    .library-detail[hidden] { display: none; }
    .library-detail h3 {
      margin: 10px 0 6px; font: 600 25px/1.2 var(--f-serif);
      letter-spacing: -.015em; color: var(--ink);
    }
    .library-detail-meta { color: var(--ink-3); font-size: 13px; line-height: 1.5; }
    .library-article-list { display: grid; gap: 8px; margin-top: 20px; }
    .library-article {
      border-top: 1px solid var(--rule-soft); padding: 10px 0;
    }
    .library-article summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--ink); }
    .library-article p { color: var(--ink-2); font-size: 13px; line-height: 1.55; margin: 8px 0 0; }

    /* =========================================================
       LOGIN OVERLAY — modulo certificazione tecnica
       ========================================================= */

    .login-overlay {
      position: fixed;
      inset: 0;
      /* Aurora su bianco-caldo (mesh-shell eliminata col v2; redesign completo in F5) */
      background: var(--mesh-main), var(--canvas);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 20px;
    }
    #login-form {
      background: var(--paper);
      border: 1px solid var(--rule);
      padding: 0;
      width: 400px;
      max-width: 100%;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      position: relative;
      overflow: hidden;
    }
    #login-form::before { content: none; }   /* via il timbro "PROTOCOLLO N. 001" */
    .login-form-inner {
      padding: 30px 28px 24px;
    }
    #login-form .login-head {
      padding-bottom: 2px;
      margin-bottom: 14px;
    }
    .login-brand { align-items: center; gap: 12px; cursor: default; }
    .login-brand .app-wordmark {
      font-family: var(--f-display);
      font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
      color: var(--ink);
    }
    #login-form .login-num { display: none; }   /* via l'overline "§ Accesso · Sez." */
    #login-form h2 {
      font-family: var(--f-display);
      font-weight: 600;
      font-size: 24px;
      line-height: 1;
      margin: 0;
      color: var(--ink);
      letter-spacing: -0.02em;
    }
    #login-form p.login-desc {
      font-family: var(--f-sans);
      font-style: normal;
      font-size: 14px;
      line-height: 1.55;
      color: var(--ink-3);
      margin: 0 0 18px;
    }
    #login-form label {
      /* Brand v2: label form 13px w600 sentence case (scala mock) */
      display: block;
      margin-bottom: 14px;
      font-family: var(--f-sans);
      font-size: 13px;
      color: #3A3C42;
      font-weight: 600;
      letter-spacing: -0.005em;
    }
    #login-form input {
      display: block;
      width: 100%;
      margin-top: 6px;
      padding: 10px 12px;
      border: 1px solid var(--rule);
      background: var(--paper);
      color: var(--ink);
      font-family: var(--f-sans);
      font-size: 14px;
      outline: 0;
      border-radius: var(--radius);
      transition: border-color 120ms ease, box-shadow 120ms ease;
    }
    #login-form input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-bg);
    }
    #login-form button[type="submit"] {
      width: 100%;
      padding: 12px;
      background: var(--ink);
      color: #FBFAF8;
      border: 0;
      border-radius: var(--radius);
      font-family: var(--f-sans);
      font-size: 14px;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 600;
      cursor: pointer;
      margin-top: 6px;
      transition: background 140ms ease;
    }
    #login-form button[type="submit"]:hover { background: var(--accent); }

    /* ── Supabase tab bar + Google btn + status ── */
    .login-tabs {
      display: flex;
      gap: 0;
      margin-bottom: 16px;
      border-bottom: 1px solid var(--rule);
    }
    .login-tab {
      /* Brand v2: sentence case, sottolineatura come i tab del workspace */
      flex: 1;
      padding: 8px 10px 11px;
      background: transparent;
      border: 0;
      border-bottom: 2px solid transparent;
      font-family: var(--f-sans);
      font-size: 13.5px;
      font-weight: 500;
      color: var(--ink-2);
      cursor: pointer;
      transition: color 120ms, border-color 120ms;
    }
    .login-tab.active {
      color: var(--ink);
      border-bottom-color: var(--ink);
      font-weight: 600;
    }
    .login-tab:hover:not(.active) { color: var(--ink-2); }
    .login-panel { display: block; }
    .login-form-email { margin-bottom: 10px; }
    .login-help {
      font-family: var(--f-sans);
      font-style: normal;
      font-size: 12.5px;
      color: var(--ink-3);
      margin: 8px 0 12px;
    }
    .login-google {
      width: 100%;
      padding: 11px;
      background: var(--paper);
      color: var(--ink);
      border: 1px solid var(--rule);
      border-radius: var(--radius);
      font-family: var(--f-sans);
      font-size: 13.5px;
      letter-spacing: 0;
      text-transform: none;
      font-weight: 500;
      cursor: pointer;
      margin-top: 10px;
      transition: background 120ms, border-color 120ms;
    }
    .login-google:hover { background: var(--paper-2); border-color: var(--ink-5); }
    #login-form .login-consent {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin: 4px 0 12px;
      font-family: var(--f-sans);
      font-size: 12px;
      line-height: 1.45;
      color: var(--ink-3);
      cursor: pointer;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 400;
    }
    #login-form .login-consent input[type="checkbox"] {
      display: inline-block;
      width: auto;
      min-width: 15px;
      height: 15px;
      margin: 2px 0 0;
      padding: 0;
      flex: 0 0 auto;
      accent-color: var(--cinabro);
      cursor: pointer;
    }
    #login-form .login-consent a { color: var(--cinabro); text-decoration: underline; text-underline-offset: 2px; }
    .login-legal-foot {
      /* Brand v2: sentence case, scala metadati 12px */
      margin: 14px 0 0;
      text-align: center;
      font-family: var(--f-sans);
      font-size: 12px;
      color: var(--ink-4);
    }
    .login-legal-foot a { color: var(--ink-4); text-decoration: none; }
    .login-legal-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
    .login-legal-foot span { margin: 0 6px; }
    .login-status {
      margin-top: 12px;
      font-family: var(--f-sans);
      font-size: 12.5px;
      min-height: 1.2em;
    }
    .login-status.ok { color: var(--ink-2); }
    .login-status.err { color: var(--cinabro); }

    /* User badge nel header (post-login) */
    /* User block (mock): avatar nero con iniziale + nome + email mono + icona esci.
       La linea sottile di demarcazione sopra è il border-top di .sidebar-foot. */
    .user-badge {
      display: none;           /* mostrato flex da updateUserBadge */
      align-items: center;
      gap: 10px;
      width: 100%;
      font-family: var(--f-sans);
    }
    .user-avatar {
      width: 34px; height: 34px; flex: none;
      border-radius: 9px; background: var(--ink); color: #FBFAF8;
      font-size: 15px; font-weight: 600;
      display: flex; align-items: center; justify-content: center;
    }
    .user-id { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
    .user-name {
      font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--ink);
      display: flex; align-items: center; gap: 6px;
    }
    .user-email {
      font-family: var(--f-mono);
      font-size: 10.5px; font-weight: 400; color: var(--ink-4);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .user-admin-tag {
      background: var(--ink);
      color: #FBFAF8;
      padding: 1px 5px;
      border-radius: 4px;
      font-family: var(--f-mono);
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.08em;
    }
    .user-logout {
      background: transparent;
      border: 0;
      flex: none;
      padding: 6px;
      cursor: pointer;
      color: var(--ink-4);
      display: inline-flex;
    }
    .user-logout:hover { color: var(--ink); }

    /* =========================================================
       RESPONSIVE
       ========================================================= */

    @media (max-width: 760px) {
      .app-header-row {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
      }
      .app-header-left {
        flex: 1;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      .app-wordmark {
        font-size: 19px;
        white-space: nowrap;
        overflow: hidden;
        flex-wrap: nowrap;
      }
      .app-wordmark::before { font-size: 18px; }
      .app-wordmark span { display: none; }
      .mobile-tab-bar { display: flex; }
      .app-messages { padding: 24px 16px 24px; }
      .empty-state h2 { font-size: 26px; }
      .empty-state p { font-size: 14.5px; }
      .example-pill { grid-template-columns: 38px 1fr auto; gap: 12px; padding: 14px 4px 14px 2px; font-size: 14px; }
      .msg-row { margin-bottom: 18px; }
      .msg-bot { max-width: 100%; }
      .msg-bot::before { display: none; }
      .msg-user { max-width: 86%; }
      #question { font-size: 16px; max-height: 120px; }
      .app-input { padding: 12px 16px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
      .example-pill { min-height: 44px; }
      .app-footer { display: none; }
      .docs-container { padding: 24px 16px 40px; }
      .docs-header { flex-direction: column; gap: 4px; align-items: flex-start; }
      .docs-header h2 { font-size: 24px; }
      .docs-toolbar { grid-template-columns: 1fr; }
      /* R2: su mobile le pill tornano a colonna singola. */
      .example-pills { grid-template-columns: 1fr; }
      /* Nel drawer mobile la nav vive già nella mobile-tab-bar + header:
         niente rail nav/brand duplicati, il drawer resta cronologia + profilo. */
      .sidebar-brand, .rail-nav, .rail-sep { display: none; }
    }

    /* Desktop: l'header in alto è nascosto (menu unico nel rail) e il rail è
       comprimibile a sole icone. */
    @media (min-width: 761px) {
      .app-header { display: none; }

      .sidebar.collapsed { width: 70px; }   /* mock: 256 -> 70 */
      .sidebar.collapsed .app-wordmark,
      .sidebar.collapsed .rail-lbl,
      .sidebar.collapsed #sidebar-chat-content,
      .sidebar.collapsed #sidebar-pratiche,
      .sidebar.collapsed .user-id,
      .sidebar.collapsed .user-logout { display: none; }
      /* Mock: da collassata resta il quadrato nero con l'iniziale */
      .sidebar.collapsed .sidebar-foot { padding: 10px 0; display: flex; justify-content: center; }
      .sidebar.collapsed .user-badge { width: auto; }
      .sidebar.collapsed .sidebar-brand { justify-content: center; padding: 16px 0 12px; }
      .sidebar.collapsed .rail-collapse { transform: rotate(180deg); }
      .sidebar.collapsed .rail-nav { padding: 16px 8px 4px; }
      .sidebar.collapsed .rail-nav-item { justify-content: center; padding: 10px 0; gap: 0; }

      /* Tooltip a destra sulle voci del rail collassato (mock [data-tip]) */
      [data-tip] { position: relative; }
      .sidebar.collapsed [data-tip]:hover::after {
        content: attr(data-tip);
        position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
        background: var(--ink); color: #FBFAF8;
        font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em;
        padding: 7px 11px; border-radius: 9px; white-space: nowrap; z-index: 60;
        box-shadow: 0 8px 24px rgba(20,20,40,.22); pointer-events: none;
      }
      .sidebar.collapsed [data-tip]:hover::before {
        content: ''; position: absolute; left: calc(100% + 9px); top: 50%;
        transform: translateY(-50%) rotate(45deg); width: 9px; height: 9px;
        background: var(--ink); border-radius: 2px; z-index: 60; pointer-events: none;
      }
    }

    /* =========================================================
       Preflight statico (ex Tailwind Play CDN v3.4.17, MIT) —
       self-host del reset che il CDN iniettava. Bonifica 2026-07-06.

       Il file non usa NESSUNA utility Tailwind (unica classe compilata
       dal JIT: .sr-only, gia' definita anche nel CSS custom sopra).
       Lo script del Play CDN caricava ~300KB di compilatore a ogni load
       da CDN terzo (GDPR — stesso principio del self-host font in
       ui/fonts/) solo per iniettare questo reset. Il test statico
       test_html_no_tailwind_cdn blocca la reintroduzione dell'URL.

       CSS estratto BYTE-EXACT dal <style> che il Play CDN appendeva in
       fondo all'head: questo blocco DEVE restare ultimo nell'head per
       conservare l'ordine di cascata (dopo lo style custom sopra, prima
       dello <style> nel body). Escluso solo il boilerplate di variabili
       --tw-* (2.2KB, inerte: nessun var(--tw-...) e' consumato nel file).
       ========================================================= */
    /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
    ::after,::before{--tw-content:''}
    :host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}
    body{margin:0;line-height:inherit}
    hr{height:0;color:inherit;border-top-width:1px}
    abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
    h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
    a{color:inherit;text-decoration:inherit}
    b,strong{font-weight:bolder}
    code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}
    small{font-size:80%}
    sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
    sub{bottom:-.25em}
    sup{top:-.5em}
    table{text-indent:0;border-color:inherit;border-collapse:collapse}
    button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
    button,select{text-transform:none}
    button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}
    :-moz-focusring{outline:auto}
    :-moz-ui-invalid{box-shadow:none}
    progress{vertical-align:baseline}
    ::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}
    [type=search]{-webkit-appearance:textfield;outline-offset:-2px}
    ::-webkit-search-decoration{-webkit-appearance:none}
    ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
    summary{display:list-item}
    blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}
    fieldset{margin:0;padding:0}
    legend{padding:0}
    menu,ol,ul{list-style:none;margin:0;padding:0}
    dialog{padding:0}
    textarea{resize:vertical}
    input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
    [role=button],button{cursor:pointer}
    :disabled{cursor:default}
    audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}
    img,video{max-width:100%;height:auto}
    [hidden]:where(:not([hidden=until-found])){display:none}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}

      .assev-container{display:flex;height:100%;overflow:hidden}
      .assev-sidebar{width:280px;min-width:240px;border-right:1px solid var(--rule-soft);
        background:var(--paper-2);display:flex;flex-direction:column;overflow:hidden}
      .assev-sidebar-head{display:flex;align-items:center;justify-content:space-between;
        gap:10px;padding:14px 16px;border-bottom:1px solid var(--rule-soft)}
      .assev-new-btn{background:var(--blueprint);color:#fff;border:0;border-radius:7px;
        padding:6px 11px;font-size:12.5px;cursor:pointer;font-family:var(--f-sans)}
      .assev-new-btn:hover{background:var(--blueprint-2)}
      .assev-sessions{flex:1;overflow:auto;padding:8px}
      .assev-sess{padding:9px 11px;border:1px solid transparent;border-radius:8px;
        cursor:pointer;margin-bottom:4px}
      .assev-sess:hover{background:var(--paper-3)}
      .assev-sess.active{border-color:var(--blueprint);background:var(--blueprint-bg)}
      .assev-sess .st{font-weight:600;font-size:13px;color:var(--ink-2)}
      .assev-sess .sm{font-size:11.5px;color:var(--ink-4);margin-top:2px}
      .assev-sessions-empty{color:var(--ink-4);font-size:12.5px;padding:12px}
      .assev-doc{flex:1;overflow:auto;padding:22px 26px;background:var(--paper)}
      .assev-doc-empty{color:var(--ink-4);font-size:13px;margin-top:40px;text-align:center}
      .assev-doc h2{font-size:18px;margin:0 0 4px;font-family:var(--f-serif);color:var(--ink)}
      .assev-doc-sub{color:var(--ink-4);font-size:12.5px;margin-bottom:18px}
      .assev-progress{height:6px;background:var(--paper-3);border-radius:999px;
        overflow:hidden;margin-bottom:20px}
      .assev-progress > i{display:block;height:100%;background:var(--moss);width:0;transition:width .3s}
      .assev-frame{border:1px solid var(--rule-soft);border-radius:10px;padding:12px 14px;
        margin-bottom:16px;background:var(--paper-2)}
      .assev-frame .ft{font-size:11px;text-transform:uppercase;letter-spacing:.6px;
        color:var(--ink-4);margin-bottom:8px}
      .assev-fld{margin:6px 0;font-size:12.5px}
      .assev-fld .q{color:var(--ink-3)}
      .assev-fld .v{color:var(--ink);font-weight:600}
      .assev-fld .v.none{color:var(--ink-5);font-weight:400}
      .assev-sec{border:1px solid var(--rule-soft);background:var(--paper);border-radius:10px;
        padding:13px 15px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
      .assev-sec:hover{border-color:var(--blueprint)}
      .assev-sec.open{box-shadow:0 0 0 1px var(--blueprint) inset}
      .assev-sec.reverify{border-color:var(--assev-rev)}
      .assev-sec.overridden{border-color:var(--assev-over)}
      .assev-sec.empty{opacity:.66}
      .assev-sec .h{display:flex;align-items:center;gap:10px}
      .assev-sec .h .car{color:var(--ink-4);font-size:11px;width:12px;transition:transform .15s}
      .assev-sec.open .h .car{transform:rotate(90deg)}
      .assev-sec .h .t{font-weight:600;color:var(--ink-2);font-size:13.5px}
      .assev-sec .h .pg{color:var(--ink-5);font-size:11.5px;font-family:var(--f-mono)}
      .assev-sec .h .spacer{flex:1}
      .assev-badge{font-size:11px;padding:2px 9px;border-radius:999px;
        border:1px solid var(--rule-soft);white-space:nowrap}
      .assev-b-ok{color:var(--moss);border-color:var(--moss);background:var(--moss-bg)}
      .assev-b-empty{color:var(--ink-5)}
      .assev-b-rev{color:var(--assev-rev);border-color:var(--assev-rev)}
      .assev-b-over{color:var(--assev-over);border-color:var(--assev-over)}
      .assev-detail{display:none;margin-top:12px;border-top:1px solid var(--rule-soft);padding-top:10px}
      .assev-sec.open .assev-detail{display:block}
      .assev-node{display:flex;gap:8px;align-items:baseline;font-size:12.5px;margin:3px 0;color:var(--ink-3)}
      .assev-node .nid{color:var(--blueprint);font-family:var(--f-mono);font-size:11.5px;flex-shrink:0}
      .assev-node .nlb{color:var(--ink-2)}
      .assev-node .nv{margin-left:auto;color:var(--moss);font-weight:600;font-size:11.5px}
      .assev-node .req{color:var(--cinabro);font-size:10.5px}
      .assev-node-empty{color:var(--ink-5);font-size:12px;margin:3px 0}

      /* ── F2 step 2.2 — compilazione + anchor + marker live ───────────── */
      /* Header pratica: azioni (ancora chat / elimina) */
      .assev-doc-head{display:flex;align-items:flex-start;gap:12px}
      .assev-doc-head .hd-main{flex:1;min-width:0}
      .assev-doc-actions{display:flex;gap:6px;flex-shrink:0}
      .assev-act-btn{background:none;border:1px solid var(--rule-soft);border-radius:7px;
        padding:5px 10px;font-size:11.5px;cursor:pointer;color:var(--ink-3);
        font-family:var(--f-sans);white-space:nowrap}
      .assev-act-btn:hover{border-color:var(--blueprint);color:var(--blueprint)}
      .assev-act-btn.danger:hover{border-color:var(--cinabro);color:var(--cinabro)}
      /* Bottone "ancora chat" per quadro (nell'header del quadro) */
      .assev-anchor-btn{background:none;border:1px solid var(--rule-soft);border-radius:6px;
        padding:2px 8px;font-size:11px;cursor:pointer;color:var(--ink-4);
        font-family:var(--f-sans);white-space:nowrap}
      .assev-anchor-btn:hover{border-color:var(--blueprint);color:var(--blueprint)}
      .assev-sec.anchored{box-shadow:0 0 0 1px var(--blueprint) inset}
      .assev-sec.anchored .assev-anchor-btn{background:var(--blueprint);color:#fff;border-color:var(--blueprint)}
      /* Controlli input nodi (compilazione via UI) */
      .assev-node .nctl{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
      .assev-node .nctl input[type=checkbox]{width:15px;height:15px;cursor:pointer;accent-color:var(--blueprint)}
      .assev-node .nctl input[type=text]{border:1px solid var(--rule-soft);border-radius:5px;
        padding:2px 6px;font-size:11.5px;font-family:var(--f-sans);width:130px;background:var(--paper)}
      .assev-node .nctl select{border:1px solid var(--rule-soft);border-radius:5px;
        padding:2px 6px;font-size:11.5px;font-family:var(--f-sans);background:var(--paper);max-width:200px}
      .assev-node.reverify .nid{color:var(--assev-rev)}
      .assev-fld select{border:1px solid var(--rule-soft);border-radius:5px;padding:3px 7px;
        font-size:12.5px;font-family:var(--f-sans);background:var(--paper);margin-top:3px}
      /* Banner incoerenza (constraint hard) + note soft (💡) */
      .assev-flags{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
      .assev-flag-hard{border:1px solid var(--cinabro);border-left:4px solid var(--cinabro);
        border-radius:8px;padding:9px 12px;background:rgba(193,57,43,.05);
        font-size:12.5px;color:var(--ink-2)}
      .assev-flag-hard .ft{font-weight:600;color:var(--cinabro);font-size:11px;
        text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
      .assev-flag-soft{border:1px dashed var(--rule);border-radius:8px;padding:8px 12px;
        background:var(--paper-2);font-size:12.5px;color:var(--ink-3)}
      .assev-flag-soft .si{margin-right:6px}
      /* Chip anchor sul composer chat */
      .assev-chip{max-width:820px;margin:0 auto 8px;display:flex;align-items:center;gap:8px;
        background:var(--blueprint-bg);border:1px solid var(--blueprint);border-radius:7px;
        padding:5px 10px;font-size:12px;color:var(--ink-2)}
      .assev-chip .cx{margin-left:auto;background:none;border:0;cursor:pointer;
        color:var(--ink-4);font-size:14px;line-height:1;padding:0 2px}
      .assev-chip .cx:hover{color:var(--cinabro)}

      /* ── F2 step 2.3 — revisione a ritroso (modale + azioni nodo) ────── */
      /* Azioni su nodo da riverificare: Riconferma / Mantieni comunque */
      .assev-node.reverify{background:rgba(122,79,176,.05);border-radius:6px}
      .assev-node.overridden .nid{color:var(--assev-over)}
      .assev-node-act{margin-left:8px;display:inline-flex;gap:5px;flex-shrink:0}
      .assev-node-act button{background:none;border:1px solid var(--rule-soft);border-radius:5px;
        padding:1px 7px;font-size:10.5px;cursor:pointer;font-family:var(--f-sans);color:var(--ink-3)}
      .assev-node-act .reconf:hover{border-color:var(--moss);color:var(--moss)}
      .assev-node-act .keepov:hover{border-color:var(--assev-over);color:var(--assev-over)}
      /* Modale warning revisione a ritroso */
      .assev-modal-overlay{position:fixed;inset:0;background:rgba(14,14,12,.55);
        display:flex;align-items:center;justify-content:center;z-index:9998;padding:20px}
      .assev-modal{background:var(--paper);border:1px solid var(--assev-rev);border-radius:12px;
        max-width:440px;width:100%;padding:20px 22px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
      .assev-modal h3{margin:0 0 8px;font-size:15px;color:var(--assev-rev)}
      .assev-modal p{margin:0 0 10px;font-size:13px;color:var(--ink-2);line-height:1.5}
      .assev-modal .reflist{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);
        background:var(--paper-2);border-radius:6px;padding:8px 10px;margin:0 0 14px;
        max-height:120px;overflow:auto}
      .assev-modal .acts{display:flex;gap:8px;justify-content:flex-end}
      .assev-modal .acts button{border-radius:7px;padding:6px 13px;font-size:12.5px;cursor:pointer;
        font-family:var(--f-sans);border:1px solid var(--rule-soft);background:none;color:var(--ink-2)}
      .assev-modal .acts .confirm{background:var(--assev-rev);border-color:var(--assev-rev);color:#fff}
      .assev-modal .acts .cancel:hover{border-color:var(--ink-3)}

      /* ════════════════════════════════════════════════════════════════
         L — Vista guidata 2-colonne (compilazione a 4 mani + relazione curata)
         ════════════════════════════════════════════════════════════════ */
      #asseverazione-view{--assev-rev:#7a4fb0;--assev-prop:#b5751f;--assev-err:var(--err);height:100%}
      /* [hidden] deve vincere su display:flex/block delle classi sottostanti */
      #asseverazione-view [hidden]{display:none !important}
      .a2-root{display:flex;flex-direction:column;height:100%;overflow:hidden}
      .a2-top{display:flex;align-items:center;gap:10px;padding:9px 14px;
        border-bottom:1px solid var(--rule);background:var(--paper);flex-shrink:0}
      .a2-top .a2-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-4)}
      .a2-top select{font-size:13px;color:var(--ink);background:var(--paper);
        border:1px solid var(--rule);border-radius:7px;padding:6px 10px;min-width:280px;max-width:440px}
      .a2-top .a2-spacer{flex:1}
      .a2-top button{background:var(--paper);color:var(--ink-2);border:1px solid var(--rule);
        border-radius:7px;padding:6px 11px;font-size:12.5px;cursor:pointer}
      .a2-top button:hover{border-color:var(--blueprint);color:var(--blueprint)}
      .a2-top button.a2-new{background:var(--blueprint);color:#fff;border-color:var(--blueprint)}
      .a2-top button.a2-new:hover{background:var(--blueprint-2)}
      .a2-top button.danger:hover{border-color:var(--cinabro);color:var(--cinabro)}
      .a2-cost-badge{font-size:10.5px;color:var(--ink-4);font-family:var(--f-mono)}
      .a2-active-title{font-size:13.5px;font-weight:600;color:var(--ink);max-width:420px;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      /* sidebar pratiche (vista asseverazione) */
      .sidebar [hidden]{display:none !important}
      .a2-side-item{padding:9px 11px;border:1px solid transparent;border-radius:8px;
        cursor:pointer;margin-bottom:4px;position:relative}
      .a2-side-item:hover{background:var(--paper-2)}
      .a2-side-item.active{border-color:var(--blueprint);background:var(--blueprint-bg)}
      .a2-side-item .st{font-weight:600;font-size:13px;color:var(--ink-2);
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:44px}
      .a2-side-item .sm{font-size:11.5px;color:var(--ink-4);margin-top:2px;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .a2-side-item .acts{position:absolute;top:8px;right:8px;display:flex;gap:3px;
        opacity:0;transition:opacity .12s}
      .a2-side-item:hover .acts{opacity:1}
      .a2-side-item .acts button{background:var(--paper);border:1px solid var(--rule-soft);
        border-radius:5px;font-size:11px;cursor:pointer;padding:1px 5px;color:var(--ink-3)}
      .a2-side-item .acts button:hover{border-color:var(--blueprint);color:var(--blueprint)}
      .a2-side-item .acts button.del:hover{border-color:var(--cinabro);color:var(--cinabro)}
      /* P5: l'indice del Fascicolo impila hub + allegati -> top-aligned scrollabile
         (era centrato per il solo hub). */
      .a2-empty{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow:auto;
        color:var(--ink-4);font-size:13px;padding:24px;text-align:center}
      .fasc-index{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:900px}
      .fasc-index .doc-hub{padding-top:8px}
      /* Allegati dentro l'indice: niente centratura forzata, separatore in alto. */
      .fasc-att{max-width:680px;width:100%;margin:0 auto;padding:24px 8px 16px;text-align:left;
        border-top:1px solid var(--rule);margin-top:8px}
      /* Hub stato vuoto Documenti: scelta del tipo di documento da redigere */
      .doc-hub{display:flex;flex-direction:column;gap:0;max-width:620px;padding:24px;margin:0 auto}
      .dp-title{font-size:24px;font-weight:600;letter-spacing:-.025em;color:var(--ink);margin:0}
      .dp-sub{font-size:14px;color:var(--ink-2);margin:8px 0 0;line-height:1.55}
      .dp-divider{display:flex;align-items:center;gap:8px;margin:24px 0 12px;font-size:12px;color:var(--ink-3)}
      .dp-divider-line{flex:1;height:1px;background:var(--paper-4)}
      .dp-divider-hint{font-size:12px;color:var(--ink-3)}
      .dp-rows{display:flex;flex-direction:column;gap:9px}
      .dp-row{display:flex;align-items:center;gap:12px;border:1px solid var(--rule);border-radius:12px;
        background:#fff;padding:13px 15px}
      .dp-row--soon{opacity:.55}
      .dp-row-ico{width:32px;height:32px;flex:none;border-radius:9px;background:var(--paper-3);
        display:flex;align-items:center;justify-content:center}
      .dp-row-body{flex:1;min-width:0}
      .dp-row-name{font-size:14px;font-weight:600;line-height:1.25;color:var(--ink)}
      .dp-row-sub{font-size:12px;color:var(--ink-3);margin-top:3px}
      .dp-badge{font-size:12px;padding:4px 9px;border-radius:999px;white-space:nowrap;flex:none}
      .dp-badge--req{background:var(--ink);color:#FBFAF8}
      .dp-badge--conf{display:inline-flex;align-items:center;gap:5px;background:#fff;
        border:1px solid #E0C3B6;color:var(--warn-2)}
      .dp-badge--conf::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}
      .dp-badge--soon{background:var(--paper-3);color:var(--ink-3)}
      .dp-crea{font-size:12px;font-weight:600;color:#FBFAF8;background:var(--ink);border:0;
        border-radius:8px;padding:7px 13px;cursor:pointer;white-space:nowrap;font-family:var(--f-sans)}
      .dp-crea:hover{background:#2C2E35}
      .dp-catalog{display:flex;flex-direction:column}
      .dp-cat-label{font-size:12px;color:var(--ink-3);margin:16px 0 8px}
      .dp-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
      .dp-cat-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--rule);
        border-radius:11px;padding:11px 13px;opacity:.55}
      .dp-cat-item-name{font-size:13px;font-weight:600;color:var(--ink);flex:1;min-width:0;line-height:1.25}
      .dp-cat-item-soon{font-size:11px;color:var(--ink-4);white-space:nowrap}
      .doc-hub-title{font-size:16px;font-weight:600;color:var(--ink-2)}
      .doc-hub-cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
      .doc-hub-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:248px;
        padding:18px 18px 16px;border:1px solid var(--rule-soft);border-radius:12px;background:var(--paper);
        cursor:pointer;text-align:left;transition:border-color .12s,box-shadow .12s}
      .doc-hub-card:hover{border-color:var(--blueprint);box-shadow:0 2px 10px rgba(0,0,0,.06)}
      .doc-hub-card-icon{font-family:var(--f-mono);font-size:18px;color:var(--blueprint)}
      .doc-hub-card-name{font-weight:600;font-size:15px;color:var(--ink)}
      .doc-hub-card-sub{font-size:12px;color:var(--ink-3);line-height:1.4}
      .doc-hub-card-cta{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--blueprint)}
      .doc-hub-note{font-size:12px;color:var(--ink-4)}
      .a2-wrap{display:flex;flex:1;min-height:0}
      /* sinistra: chat guidata */
      .a2-chat{width:38%;min-width:340px;border-right:1px solid var(--rule);
        display:flex;flex-direction:column;background:var(--paper);min-height:0}
      .a2-msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
      .a2-msg{max-width:90%;padding:9px 12px;border-radius:11px;white-space:pre-wrap;font-size:13px;line-height:1.5}
      .a2-msg.user{align-self:flex-end;background:var(--blueprint);color:#fff}
      .a2-msg.bot{align-self:flex-start;background:var(--paper-2);border:1px solid var(--rule-soft);color:var(--ink)}
      .a2-msg.bot p{margin:0 0 6px}
      .a2-msg.bot p:last-child{margin-bottom:0}
      .a2-msg.bot a{word-break:break-all}
      .a2-msg.sys{align-self:center;background:transparent;color:var(--ink-4);font-size:11.5px;
        border:1px dashed var(--rule);border-radius:8px;padding:5px 9px}
      /* Thread unico (fusione drawer #415): card consultiva inline nella chat
         guidata. Bordo blueprint = registro diverso dal consulente-compilatore;
         il badge dichiara che il consulto NON compila il modulo (I1). */
      .a2-msg.consult{align-self:flex-start;max-width:94%;background:var(--paper);
        border:1px solid var(--blueprint);color:var(--ink-2)}
      .a2-consult-badge{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
        color:var(--blueprint);margin-bottom:5px}
      .a2-consult-chip{display:flex;align-items:center;gap:7px;font-size:12px;margin:0 0 6px;
        background:var(--blueprint-bg);border:1px solid var(--rule);border-radius:7px;
        padding:5px 10px;color:var(--ink-2)}
      .a2-consult-chip b{color:var(--blueprint)}
      .a2-consult-chip .cx{margin-left:auto;background:none;border:none;color:var(--ink-3);
        cursor:pointer;font-size:14px;line-height:1}
      .a2-ask{align-self:flex-start;max-width:94%;background:var(--blueprint-bg);
        border:1px solid var(--blueprint);border-radius:11px;padding:10px 12px;font-size:13px;line-height:1.5}
      .a2-ask .qh{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--blueprint);margin-bottom:4px}
      .a2-ask .opts{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
      .a2-ask .opts button{background:var(--paper);border:1px solid var(--rule);border-radius:999px;
        padding:4px 11px;font-size:12px;cursor:pointer;color:var(--ink-2)}
      .a2-ask .opts button:hover{border-color:var(--blueprint);color:var(--blueprint)}
      .a2-ask .opts button.sel{background:var(--blueprint);color:#fff;border-color:var(--blueprint)}
      .a2-ask .a2-multi-send{background:var(--blueprint);color:#fff;border-color:var(--blueprint);font-weight:600}
      .a2-ask .a2-multi-send:disabled{opacity:.45;cursor:default}
      .a2-ask .a2-multi-send:not(:disabled):hover{background:var(--blueprint-2);color:#fff}
      .a2-composer{border-top:1px solid var(--rule);padding:11px;display:flex;gap:8px;align-items:center;flex-shrink:0}
      .a2-composer input{flex:1;background:var(--paper);border:1px solid var(--rule);
        border-radius:8px;color:var(--ink);padding:9px 11px;font-size:13px}
      .a2-composer select{font-size:10px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3);border:1px solid var(--rule);border-radius:6px;padding:6px 6px;background:var(--paper);cursor:pointer}
      .a2-composer select:hover{border-color:var(--ink-5);color:var(--ink-2)}
      .a2-composer button.send{background:var(--blueprint);border:0;color:#fff;border-radius:8px;padding:0 15px;height:36px;cursor:pointer}
      .a2-composer button.send:disabled{opacity:.5;cursor:default}
      /* destra: relazione curata */
      .a2-doc{flex:1;overflow:auto;padding:20px 24px;background:var(--paper-2);min-height:0}
      .a2-doc-inner{max-width:780px;margin:0 auto;background:var(--paper);border:1px solid var(--rule);
        border-radius:12px;padding:20px 24px}
      .a2-doc-inner h2{font-size:18px;margin:0 0 4px;color:var(--ink);font-family:var(--f-serif)}
      .a2-sub{color:var(--ink-3);font-size:12.5px;margin-bottom:8px}
      .a2-procbar{display:flex;align-items:center;gap:7px;margin:8px 0 14px;flex-wrap:wrap}
      .a2-procbar .pill{font-size:12px;border-radius:999px;padding:3px 11px;border:1px solid var(--rule);
        background:var(--paper-2);color:var(--ink-2)}
      .a2-progress-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
      .a2-progress{flex:1;height:6px;background:var(--paper-3);border-radius:999px;overflow:hidden}
      .a2-pct{font-size:11.5px;font-family:var(--f-mono);color:var(--ink-3);min-width:38px;text-align:right}
      .a2-progress>i{display:block;height:100%;background:var(--moss);width:0;transition:width .3s}
      .a2-disc{font-size:11.5px;color:var(--assev-prop);background:#fbf4e9;border:1px solid #e9d3a8;
        border-radius:8px;padding:8px 11px;margin-bottom:16px;line-height:1.45}
      .a2-disc b{color:var(--assev-prop)}
      /* Badge revisione perizia (F3 residui) */
      .pz-rev{font-size:11.5px;border-radius:8px;padding:8px 11px;margin-bottom:8px;line-height:1.45}
      .pz-rev-ok{color:var(--moss);background:var(--moss-bg);border:1px solid #CBE3D2}
      .pz-rev-todo{color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-border)}
      .pz-rev-hint{color:var(--ink-3);background:var(--paper-2);border:1px solid var(--rule-soft)}
      .pz-da-confermare{font-size:9.5px;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-border);
        border-radius:5px;padding:1px 6px;margin-left:6px;text-transform:uppercase;letter-spacing:.4px}
      /* Griglia MCA (F6b) */
      .pz-mca-wrap{margin:8px 0;border:1px solid var(--rule-soft);border-radius:9px;padding:10px;background:var(--paper-2)}
      .pz-mca-title{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
      .pz-mca-hint{font-weight:400;font-size:10.5px;color:var(--ink-4)}
      .pz-mca-scroll{overflow-x:auto}
      table.pz-mca{border-collapse:collapse;font-size:11px;min-width:520px}
      table.pz-mca th,table.pz-mca td{border:1px solid var(--rule-soft);padding:3px 5px;text-align:center}
      table.pz-mca th{background:var(--paper-3,#eee);font-weight:600}
      table.pz-mca .pz-mca-lbl{text-align:left;white-space:nowrap}
      table.pz-mca input,table.pz-mca select{width:74px;font-size:11px;padding:2px 3px;border:1px solid var(--rule-soft);border-radius:4px}
      table.pz-mca .pz-mca-mode{width:96px}
      .a2-sec{border:1px solid var(--rule-soft);background:var(--paper);border-radius:10px;
        padding:13px 15px;margin-bottom:11px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
      .a2-sec:hover{border-color:var(--blueprint)}
      .a2-sec.open{box-shadow:0 0 0 1px var(--blueprint) inset;border-color:var(--blueprint)}
      .a2-sec.incoerente{border-color:var(--assev-err)}
      .a2-sec.deselezionato,.a2-sec.vuoto{opacity:.62}
      .a2-sec .h{display:flex;align-items:center;gap:10px}
      .a2-sec .h .car{color:var(--ink-4);font-size:11px;width:12px;transition:transform .15s}
      .a2-sec.open .h .car{transform:rotate(90deg)}
      .a2-sec .h .t{font-weight:600;color:var(--ink-2);font-size:13.5px}
      .a2-sec .h .ref{color:var(--ink-5);font-size:11px;font-family:var(--f-mono)}
      .a2-sec .h .spacer{flex:1}
      .a2-sec .h .count{font-size:11px;color:var(--ink-4);font-family:var(--f-mono);white-space:nowrap}
      .a2-badge{font-size:10.5px;padding:2px 9px;border-radius:999px;border:1px solid var(--rule);white-space:nowrap;color:var(--ink-4)}
      .a2-b-completo{color:var(--moss);border-color:var(--moss)}
      .a2-b-parziale{color:var(--assev-prop);border-color:#d9c48a}
      .a2-b-incoerente{color:var(--assev-err);border-color:var(--assev-err)}
      .a2-b-deselezionato{color:var(--ink-4)}
      .a2-detail{display:none;margin-top:11px;border-top:1px solid var(--rule-soft);padding-top:11px}
      .a2-sec.open .a2-detail{display:block}
      .a2-blk{margin-bottom:13px}
      .a2-blk .bt{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px;
        display:flex;align-items:center;gap:6px}
      .a2-blk.done .bt{color:var(--moss)}
      .a2-blk.todo .bt{color:var(--assev-prop)}
      .a2-blk .bt .dot{width:7px;height:7px;border-radius:50%}
      .a2-blk.done .bt .dot{background:var(--moss)}
      .a2-blk.todo .bt .dot{background:var(--assev-prop)}
      .a2-dec{margin:0 0 10px;padding-left:11px;border-left:2px solid var(--moss)}
      .a2-dec .dq{font-size:11.5px;color:var(--ink-4)}
      .a2-dec .ds{font-size:13px;font-weight:600;margin:1px 0;color:var(--ink);
        display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
      .a2-dec .ds .ck{color:var(--moss);font-weight:700}
      .a2-dec .ds .cid{color:var(--blueprint);font-family:var(--f-mono);font-size:11px;font-weight:500}
      .a2-dec .dr{font-size:12px;color:var(--ink-3);margin-top:2px}
      .a2-dec .conf{font-size:11px;color:var(--assev-prop);margin-top:5px;display:flex;align-items:center;gap:8px}
      .a2-dec .conf .doit{cursor:pointer;border:1px solid var(--assev-prop);border-radius:5px;
        padding:2px 9px;color:var(--assev-prop);background:var(--paper)}
      .a2-dec .conf .doit:hover{background:var(--assev-prop);color:#fff}
      .a2-dec .conf .rev{cursor:pointer;border-bottom:1px dotted var(--assev-prop)}
      .a2-todoit{display:flex;gap:8px;align-items:baseline;font-size:12.5px;margin:5px 0;color:var(--ink-2)}
      .a2-todoit .box{color:var(--ink-5);font-weight:700;flex-shrink:0}
      .a2-todoit .tt{flex:1}
      .a2-todoit .ts{font-size:10px;color:var(--assev-prop);border:1px solid #d9c48a;border-radius:5px;padding:1px 6px;flex-shrink:0}
      .a2-secflag{margin-top:9px;font-size:12px;border-radius:7px;padding:7px 10px;
        color:var(--assev-err);background:#fbecea;border:1px solid #f0c9c4}
      .a2-reopen{margin-top:2px;background:var(--paper);color:var(--ink-2);border:1px solid var(--rule);
        border-radius:7px;padding:6px 11px;font-size:12px;cursor:pointer}
      .a2-reopen:hover{border-color:var(--blueprint);color:var(--blueprint)}
      .a2-gen{margin-top:14px;border-top:1px solid var(--rule-soft);padding-top:12px}
      .a2-gen .bt{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--assev-prop);margin-bottom:7px}
      .a2-firmabile-back{margin:10px 14px}

      /* ── A2C — drawer consultazione Urbica (#415) ──────────────
         Pannello laterale fixed: consultazione ancorata alla pratica senza
         cambiare tab. Gotcha [hidden] vs display:flex: visibilità via classe
         .open (display:none di default), MAI hidden + display:flex. */
      #a2c-open-btn{background:var(--paper);border:1px solid var(--blueprint);color:var(--blueprint);
        border-radius:7px;padding:6px 12px;font-size:12px;cursor:pointer;font-family:var(--f-sans)}
      #a2c-open-btn:hover{background:var(--blueprint-bg)}
      .a2c-deepen{margin-top:7px;font-size:12px;color:var(--blueprint);cursor:pointer;display:inline-block;
        border-bottom:1px dotted var(--blueprint)}
      .a2c-ask{margin-top:2px;margin-left:8px;background:var(--paper);color:var(--blueprint);
        border:1px solid var(--blueprint);border-radius:7px;padding:6px 11px;font-size:12px;cursor:pointer}
      .a2c-ask:hover{background:var(--blueprint-bg)}
      .a2c-drawer{display:none;position:fixed;top:0;right:0;bottom:0;width:460px;max-width:92vw;
        background:var(--paper);border-left:1px solid var(--rule);
        box-shadow:var(--shadow-drawer);flex-direction:column;z-index:500}
      .a2c-drawer.open{display:flex}
      .a2c-head{display:flex;align-items:center;gap:9px;padding:13px 16px;border-bottom:1px solid var(--rule);flex-shrink:0}
      .a2c-num{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--blueprint);font-family:var(--f-mono)}
      .a2c-title{font-weight:600;color:var(--ink);font-size:14px}
      .a2c-spacer{flex:1}
      .a2c-close{background:none;border:none;font-size:20px;color:var(--ink-3);cursor:pointer;line-height:1;padding:2px 6px}
      .a2c-close:hover{color:var(--ink)}
      .a2c-anchor{margin:10px 16px 0;display:flex;align-items:center;gap:7px;font-size:12px;flex-shrink:0;
        background:var(--blueprint-bg);border:1px solid var(--rule);border-radius:7px;padding:6px 10px;color:var(--ink-2)}
      .a2c-anchor b{color:var(--blueprint)}
      .a2c-anchor .cx{margin-left:auto;background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:14px}
      .a2c-msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
      .a2c-msg{max-width:93%;font-size:13px;line-height:1.55;border-radius:9px;padding:9px 12px;overflow-wrap:break-word}
      .a2c-msg.user{align-self:flex-end;background:var(--blueprint);color:#fff}
      .a2c-msg.bot{align-self:flex-start;background:var(--paper-2);border:1px solid var(--rule-soft);color:var(--ink-2)}
      .a2c-msg.bot a{color:var(--blueprint)}
      .a2c-msg.bot p{margin:.3em 0}
      .a2c-msg.sys{align-self:center;font-size:12px;color:var(--ink-3);background:none;padding:2px 6px}
      /* Verifica finale (status:validating) nella chat ancorata: stesso segnale
         provvisorio della chat principale (feedback 2026-07-08). Riusa il
         keyframe validating-pulse definito sopra. */
      .a2c-msg.a2c-validating > *, .a2-msg.a2c-validating > *{filter:blur(7px);opacity:.45;user-select:none;pointer-events:none;transition:filter 200ms,opacity 200ms}
      .a2c-msg.a2c-validating::before, .a2-msg.a2c-validating::before{content:'Verifica in corso — la risposta definitiva comparirà tra poco';display:block;font-family:var(--f-mono);font-size:10.5px;font-weight:600;color:var(--cinabro);border-left:3px solid var(--cinabro);padding:4px 8px;margin-bottom:8px;animation:validating-pulse 1.6s ease-in-out infinite}
      .a2c-empty{font-size:12.5px;color:var(--ink-3);text-align:center;margin-top:18px;padding:0 10px}
      .a2c-note{font-size:11px;color:var(--ink-3);padding:8px 16px 0;border-top:1px solid var(--rule-soft);flex-shrink:0}
      .a2c-composer{display:flex;gap:8px;padding:10px 16px 14px;flex-shrink:0}
      .a2c-composer input{flex:1;border:1px solid var(--rule);border-radius:7px;padding:8px 11px;font-size:13px;
        font-family:var(--f-sans);color:var(--ink);min-width:0}
      .a2c-composer select{border:1px solid var(--rule);border-radius:7px;font-size:10px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.4px;color:var(--ink-3);background:var(--paper);cursor:pointer}
      .a2c-composer select:hover{border-color:var(--ink-5);color:var(--ink-2)}
      .a2c-composer .send{background:var(--blueprint);color:#fff;border:none;border-radius:7px;
        padding:8px 16px;font-size:13px;cursor:pointer}
      .a2c-composer .send:disabled{opacity:.55;cursor:default}

      @media (max-width: 760px) {
        .assev-container { flex-direction: column; }
        .assev-sidebar {
          width: 100%;
          min-width: 0;
          border-right: none;
          border-bottom: 1px solid var(--rule-soft);
          max-height: 200px;
          flex-shrink: 0;
        }
        .assev-doc { padding: 14px 16px; }
        .a2-wrap { flex-direction: column; }
        .a2-chat { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--rule); max-height: 45vh; }
        .a2-doc { min-height: 0; }
      }

      /* ── Type picker modal — "+ Nuova pratica" ─────────────── */
      .np-modal-backdrop{display:none;position:fixed;inset:0;background:rgba(22,25,29,.35);
        z-index:600;align-items:center;justify-content:center}
      .np-modal-backdrop.open{display:flex}
      .np-modal{background:var(--paper);border:1px solid var(--rule);border-radius:14px;
        padding:22px 22px 14px;max-width:380px;width:92vw;box-shadow:0 12px 44px rgba(22,25,29,.18)}
      .np-modal-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:14px}
      .np-picker-btn{display:flex;align-items:flex-start;gap:12px;padding:12px 13px;
        border:1px solid var(--rule);border-radius:10px;margin-bottom:8px;
        background:var(--paper);cursor:pointer;width:100%;text-align:left;transition:border-color .12s}
      .np-picker-btn:hover{border-color:var(--blueprint);background:var(--blueprint-bg)}
      .np-picker-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center;color:var(--ink-3)}
      .np-picker-label{font-size:13.5px;font-weight:600;color:var(--ink);display:block}
      .np-picker-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px;display:block}
      .np-picker-btn.proponi{border-style:dashed}
      .np-picker-btn.proponi:hover{border-color:var(--ink-3);background:var(--paper-2)}
      .np-cancel{display:block;width:100%;background:none;border:none;font-size:12.5px;
        color:var(--ink-3);cursor:pointer;padding:10px 0 4px;text-align:center}
      .np-cancel:hover{color:var(--ink)}
      /* Modal form/conferma riusabile (sostituisce prompt()/confirm() nativi) */
      .fm-field{margin-bottom:12px}
      .fm-label{display:block;font-size:11px;font-weight:600;color:var(--ink-3);
        margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
      .fm-input{width:100%;border:1px solid var(--rule);border-radius:8px;padding:9px 11px;
        font-size:13px;font-family:var(--f-sans);color:var(--ink);background:var(--paper);
        box-sizing:border-box}
      .fm-input:focus{outline:none;border-color:var(--blueprint)}
      .fm-msg{font-size:13px;color:var(--ink-2);line-height:1.55;margin-bottom:14px}
      .fm-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:6px}
      .fm-btn{border:1px solid var(--rule);border-radius:8px;padding:8px 16px;
        font-size:12.5px;background:var(--paper);color:var(--ink-2);cursor:pointer}
      .fm-btn:hover{border-color:var(--ink-3);color:var(--ink)}
      .fm-btn.primary{background:var(--blueprint);border-color:var(--blueprint);
        color:#fff;font-weight:600}
      .fm-btn.primary:hover{opacity:.9}
      .fm-btn.danger{background:#b3362b;border-color:#b3362b;color:#fff;font-weight:600}
      .fm-btn.danger:hover{opacity:.9}
      /* Type badge nelle pratiche sidebar */
      /* Badge tipo pratica: sta PRIMA del titolo → spazio a destra (il vecchio
         margin-left lo incollava al testo). Stile sobrio coerente col design
         istituzionale (niente viola fuori palette: neutro + accento blueprint). */
      .a2-type-badge{font-size:9px;padding:1px 5px;border-radius:3px;font-family:var(--f-mono);
        margin-right:7px;border:1px solid var(--rule);color:var(--ink-4);
        text-transform:uppercase;letter-spacing:.4px;display:inline-block;
        line-height:1.5;vertical-align:1px;flex-shrink:0}
      .a2-type-badge.assev{border-color:var(--rule);color:var(--ink-4);background:var(--paper-2,transparent)}
      .a2-type-badge.perizia{border-color:var(--blueprint);color:var(--blueprint);background:var(--blueprint-bg)}

      /* ── Perizia guided view ────────────────────────────────── */
      #perizia-guided{height:100%}
      #perizia-guided [hidden]{display:none !important}
      /* Repeatable groups */
      .pz-rep-container{margin:6px 0 2px;border:1px solid var(--rule-soft);border-radius:9px;overflow:hidden}
      .pz-rep-instance{border-bottom:1px solid var(--rule-soft)}
      .pz-rep-instance:last-of-type{border-bottom:none}
      .pz-rep-instance-header{display:flex;align-items:center;gap:8px;padding:8px 12px;
        background:var(--paper-2);border-bottom:1px solid var(--rule-soft)}
      .pz-rep-label{font-size:12px;font-weight:600;color:var(--ink-2);flex:1}
      .pz-rep-remove{background:none;border:1px solid var(--rule-soft);border-radius:5px;
        font-size:11px;color:var(--ink-3);cursor:pointer;padding:2px 7px}
      .pz-rep-remove:hover{border-color:var(--err);color:var(--err)}
      .pz-rep-body{padding:4px 10px 8px}
      .pz-rep-add{display:block;width:100%;background:var(--paper);border:1px dashed var(--rule);
        border-radius:7px;font-size:12px;color:var(--blueprint);cursor:pointer;
        padding:7px 13px;margin-top:6px;text-align:left}
      .pz-rep-add:hover{border-color:var(--blueprint);background:var(--blueprint-bg)}
      /* Perizia node elements */
      .pz-node{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px solid var(--rule-soft)}
      .pz-node:last-child{border-bottom:none}
      .pz-node .pz-nid{font-size:10px;font-family:var(--f-mono);color:var(--ink-5);
        min-width:140px;flex-shrink:0;padding-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .pz-node .pz-nlb{font-size:12.5px;color:var(--ink-2);flex:1;line-height:1.4}
      .pz-node.group-node .pz-nlb{font-weight:600;color:var(--ink);font-size:13px}
      .pz-node .pz-nctl{flex-shrink:0;min-width:140px}
      .pz-node .pz-nctl input[type=text],.pz-node .pz-nctl select{width:100%;
        border:1px solid var(--rule);border-radius:6px;padding:4px 8px;font-size:12px;
        font-family:var(--f-sans);color:var(--ink);background:var(--paper)}
      .pz-node .pz-nctl input[type=checkbox]{width:15px;height:15px;cursor:pointer}
      .pz-node .pz-nctl input[type=number]{width:100%;border:1px solid var(--rule);
        border-radius:6px;padding:4px 8px;font-size:12px;color:var(--ink);background:var(--paper)}
      .pz-node .pz-nctl .pz-computed{font-size:12px;color:var(--ink-3);font-family:var(--f-mono);padding:4px 0}
      .pz-node .pz-prefill{font-size:10px;color:var(--blueprint);margin-top:2px}
      .pz-group-header{padding:8px 0 4px;font-size:12px;font-weight:700;color:var(--ink-2);
        text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--rule-soft);margin-bottom:4px}
      /* ── Progetti: libreria + workspace (F1) ─────────────────── */
      /* P4: accento sinistro + tinta tenue per segnalare "sei dentro un progetto"
         (distingue il workspace dalla home, che ha lo stesso empty-state). */
      .project-workspace-bar{border-bottom:1px solid var(--rule);border-left:3px solid var(--blueprint);
        background:linear-gradient(180deg, rgba(31,93,134,0.05), var(--paper) 60%);
        padding:10px 18px 0;flex-shrink:0}
      .pws-head{display:flex;align-items:center;gap:12px}
      .pws-back{background:none;border:1px solid var(--rule-soft);border-radius:6px;
        padding:4px 10px;font-family:var(--f-sans);font-size:12.5px;color:var(--ink-2);cursor:pointer;flex-shrink:0}
      .pws-back:hover{border-color:var(--rule);color:var(--ink)}
      .pws-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
      .pws-name{font-weight:700;font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .pws-meta{font-size:12px;color:var(--ink-3);font-family:var(--f-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .pws-edit{background:none;border:none;color:var(--ink-3);cursor:pointer;font-size:15px;padding:4px 6px;flex-shrink:0}
      .pws-edit:hover{color:var(--ink)}
      .pws-tabs{display:flex;gap:2px;margin-top:8px}
      .pws-tab{background:none;border:none;border-bottom:2px solid transparent;padding:7px 14px;
        font-family:var(--f-sans);font-size:13px;color:var(--ink-3);cursor:pointer}
      .pws-tab:hover{color:var(--ink-2)}
      .pws-tab.active{color:var(--ink);border-bottom-color:var(--ink);font-weight:600}
      /* ── Progetti (mock 0307): H1 + conteggio, CTA nera, righe con azioni hover ── */
      .prj-library{max-width:780px;margin:0 auto;padding:38px 36px 56px;width:100%}
      .prj-library-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
      .prj-library-head h2{margin:0;font-size:26px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
      .prj-count{font-size:12px;color:var(--ink-3)}
      .prj-new-cta{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
        margin-top:22px;background:var(--ink);color:#FBFAF8;border:0;border-radius:var(--radius-card);
        padding:16px 20px;cursor:pointer;font-family:var(--f-sans)}
      .prj-new-plus{width:32px;height:32px;flex:none;border-radius:9px;background:#2A2C32;
        display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1}
      .prj-new-text{flex:1;display:flex;flex-direction:column;gap:1px}
      .prj-new-title{font-size:15px;font-weight:600}
      .prj-new-sub{font-size:12.5px;color:#9A9CA8}
      .prj-new-arrow{font-size:16px;color:#9A9CA8}
      .prj-section-label{font-size:13px;font-weight:600;color:var(--ink-2);margin:26px 0 12px}
      .prj-grid{display:flex;flex-direction:column;gap:10px}
      .prj-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--rule);
        border-radius:var(--radius-card);padding:15px 18px;cursor:pointer;transition:border-color .15s}
      .prj-row:hover{border-color:#D8D6CD}
      .prj-row-badge{width:38px;height:38px;flex:none;border-radius:10px;background:var(--paper-3);
        color:var(--ink-2);display:flex;align-items:center;justify-content:center}
      .prj-row-body{flex:1;min-width:0}
      .prj-row-name{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .prj-row-sub{font-size:12px;color:var(--ink-3);margin-top:3px}
      .prj-row-date{font-size:12px;color:var(--ink-4);white-space:nowrap}
      .prj-row-actions{display:none;align-items:center;gap:4px}
      .prj-row:hover .prj-row-actions{display:flex}
      .prj-row:hover .prj-row-date{display:none}
      .prj-row-act{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
        flex:none;border-radius:8px;background:none;border:0;cursor:pointer;color:var(--ink-3);
        transition:background .12s,color .12s}
      .prj-row-act:hover{background:var(--paper-3);color:var(--ink)}
      .prj-row-act--del:hover{background:var(--bad-bg);color:var(--bad)}
      .prj-rename{display:flex;align-items:center;gap:8px}
      .prj-rename input{flex:1;min-width:0;font-family:var(--f-sans);font-size:15px;font-weight:600;
        color:var(--ink);border:1px solid var(--ink);border-radius:8px;padding:6px 10px;outline:none}
      .prj-rename-ok{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
        border-radius:8px;border:1px solid #BFE0CD;background:none;color:var(--moss);cursor:pointer}
      .prj-rename-ok:hover{background:var(--moss-bg)}
      .prj-rename-no{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;
        border-radius:8px;border:1px solid var(--rule);background:none;color:var(--ink-3);cursor:pointer}
      .prj-rename-no:hover{background:var(--paper-3);color:var(--ink)}
      .prj-archived-empty{font-size:13.5px;color:var(--ink-3);padding:4px 2px}
      .prj-empty{color:var(--ink-3);font-size:13.5px;padding:32px;text-align:center;
        border:1px dashed var(--rule);border-radius:10px}
      .prj-row--archived{background:#FAF9F5}
      .prj-row--archived .prj-row-name{color:#6E707A}
      .prj-restore{font-size:13px;font-weight:600;color:var(--ink);border:1px solid var(--rule);
        background:#fff;border-radius:8px;padding:7px 13px;cursor:pointer;flex:none}
      .prj-restore:hover{border-color:var(--ink)}

      /* ── Workspace rail (mock 0307 §6): colonna sinistra 252px nel pannello main.
         Layout a griglia: topbar sopra tutto, rail a sx di contenuto+composer+footer.
         Gli elementi display:none (main nascosti, bar mobile) non occupano celle. ── */
      .app-main.ws-rail{display:grid;
        grid-template-columns:252px minmax(0,1fr);
        grid-template-rows:auto minmax(0,1fr) auto auto;
        grid-template-areas:"topbar topbar" "rail main" "rail input" "rail footer"}
      .app-main.ws-rail > .main-topbar{grid-area:topbar}
      .app-main.ws-rail > .pws-rail{grid-area:rail}
      .app-main.ws-rail > .app-messages{grid-area:main;min-height:0}
      .app-main.ws-rail > .app-input{grid-area:input}
      .app-main.ws-rail > .app-footer{grid-area:footer}
      /* su desktop il rail sostituisce la barra orizzontale */
      .app-main.ws-rail > .project-workspace-bar{display:none}
      .pws-rail{display:flex;flex-direction:column;min-height:0;
        border-right:1px solid var(--rule-soft);padding:16px 14px 14px}
      .pws-rail[hidden]{display:none}
      .pws-rail-back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
        background:none;border:0;padding:5px 8px 5px 5px;margin-left:-5px;border-radius:8px;cursor:pointer;
        font-family:var(--f-sans);font-size:13.5px;font-weight:600;color:var(--ink-2);
        transition:background 120ms ease,color 120ms ease}
      .pws-rail-back:hover{background:var(--paper-3);color:var(--ink)}
      .pws-rail-tabs{display:flex;gap:20px;margin-top:12px;border-bottom:1px solid var(--rule-soft)}
      .pws-rail-tab{background:none;border:0;padding:8px 2px 10px;cursor:pointer;
        font-family:var(--f-sans);font-size:14px;font-weight:500;color:var(--ink-2);
        border-bottom:2px solid transparent;margin-bottom:-1px;letter-spacing:-.01em;
        transition:color 120ms ease}
      .pws-rail-tab:hover{color:var(--ink)}
      .pws-rail-tab.active{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
      .pws-rail-body{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:14px}
      .pws-rail-body[hidden]{display:none}
      .pws-rail-new{display:block;width:100%;background:var(--ink);color:#FBFAF8;border:0;
        border-radius:10px;padding:11px 14px;cursor:pointer;
        font-family:var(--f-sans);font-size:13.5px;font-weight:600;text-align:center;
        transition:background 120ms ease}
      .pws-rail-new:hover{background:#2A2C32}
      .pws-rail-list{flex:1;min-height:0;overflow-y:auto;margin-top:10px}
      .pws-rail-list::-webkit-scrollbar{width:6px}
      .pws-rail-list::-webkit-scrollbar-thumb{background:var(--paper-3)}
      .pws-rail-item{display:block;width:100%;text-align:left;background:none;border:0;
        border-radius:9px;padding:9px 9px;cursor:pointer;font-family:var(--f-sans);
        transition:background 100ms ease}
      .pws-rail-item:hover{background:var(--paper-2)}
      .pws-rail-item.active{background:var(--paper-3)}
      .pws-rail-item-t{display:block;font-size:13.5px;font-weight:500;color:var(--ink);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
      .pws-rail-item-d{display:block;font-size:12px;color:var(--ink-4);margin-top:2px}
      .pws-rail-empty{font-size:12.5px;color:var(--ink-3);padding:10px 8px;line-height:1.5}
      .pws-rail-arch{display:flex;align-items:center;gap:10px;width:100%;
        margin-top:12px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;
        padding:11px 12px;cursor:pointer;font-family:var(--f-sans);text-align:left;
        color:var(--ink);transition:border-color 150ms var(--ease)}
      .pws-rail-arch:hover{border-color:var(--ink)}
      .pws-rail-arch-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
      .pws-rail-arch-t{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
      .pws-rail-arch-c{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .pws-rail-arch-chev{color:var(--chevron);flex:none}
      /* Gotcha [hidden] vs display:flex (stessa regola che viveva in .sidebar):
         dentro il rail l'attributo hidden vince sempre sulle classi di layout */
      .pws-rail [hidden]{display:none !important}
      /* Fascicolo nel rail: il blocco pratiche perde la cornice da sidebar */
      .pws-rail #sidebar-pratiche{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:14px}
      .pws-rail #sidebar-pratiche[hidden]{display:none}
      .pws-rail #sidebar-pratiche .sidebar-header{padding:0;border-bottom:0}
      .pws-rail #sidebar-pratiche .sidebar-new-btn{background:var(--ink);color:#FBFAF8;border:0;
        border-radius:10px;padding:11px 14px;font-weight:600}
      .pws-rail #sidebar-pratiche .sidebar-new-btn:hover{background:#2A2C32;color:#FBFAF8}
      .pws-rail #sidebar-pratiche .sidebar-section-label{padding:12px 2px 4px;
        text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
      .pws-rail #sidebar-pratiche .sidebar-sessions{padding:0}
      /* Empty state nel workspace (mock §6): kicker "Progetto · Comune" centrato,
         piccolo e grigio — visibile anche in home-mode (che in home lo nasconde) */
      .app-main.home-mode.ws-rail .empty-state-header{display:flex;justify-content:center;
        margin-bottom:10px;border-bottom:0;padding-bottom:0}
      .app-main.ws-rail .empty-state-header-num{padding-left:0;font-size:12.5px;font-weight:500;
        color:var(--ink-3);letter-spacing:.01em;text-transform:none}
      .app-main.ws-rail .empty-state-header-num::before{display:none}
      /* mobile: rail via, torna la barra orizzontale */
      @media (max-width: 760px){
        .app-main.ws-rail{display:flex;flex-direction:column}
        .app-main.ws-rail > .pws-rail{display:none}
        .app-main.ws-rail > .project-workspace-bar{display:block}
      }

      /* ── Wizard Nuovo Progetto (mock 0307 §5) ─────────────────────────── */
      .np-wrap{max-width:660px;margin:0 auto;padding:32px 36px 64px;width:100%}
      .np-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
        color:var(--ink-2);cursor:pointer;background:none;border:0;font-family:var(--f-sans)}
      .np-back:hover{color:var(--ink)}
      .np-stepper{display:flex;align-items:center;background:#fff;border:1px solid var(--rule);
        border-radius:var(--radius-card);box-shadow:0 1px 2px rgba(20,20,40,.03);
        padding:13px 16px;margin-top:22px;max-width:540px}
      .np-step{display:flex;align-items:center;gap:8px;flex:none;min-width:0}
      .np-step-dot{width:26px;height:26px;flex:none;border-radius:50%;
        display:flex;align-items:center;justify-content:center;font-size:12px}
      .np-step-lbl{font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap}
      .np-step-sub{font-size:12px;color:var(--ink-5);margin-top:1px;white-space:nowrap;
        overflow:hidden;text-overflow:ellipsis;max-width:92px}
      .np-step-line{flex:1;min-width:8px;height:2px;margin:0 8px;border-radius:2px}
      .np-wrap h1{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.12;
        margin:34px 0 0;color:var(--ink)}
      .np-sub{font-size:15px;color:var(--ink-2);margin-top:9px;line-height:1.5;max-width:480px}
      .np-body{margin-top:30px;max-width:540px}
      .np-field{margin-bottom:18px;position:relative}
      .np-field label{font-size:13px;font-weight:600;letter-spacing:-.005em;color:#3A3C42;
        display:block;margin-bottom:7px}
      .np-field input,.np-field textarea{width:100%;font-family:var(--f-sans);font-size:15px;
        color:var(--ink);border:1px solid var(--rule);border-radius:var(--radius-field);
        padding:12px 15px;outline:none;resize:none;background:#fff}
      .np-field input:focus,.np-field textarea:focus{border-color:var(--ink)}
      .np-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
      .np-suggs{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;
        border:1px solid var(--rule);border-radius:var(--radius-field);
        box-shadow:0 12px 32px rgba(20,20,50,.10);padding:6px;z-index:30;max-height:224px;overflow:auto}
      .np-sugg{display:block;width:100%;font-family:var(--f-sans);font-size:14px;color:var(--ink);
        padding:9px 11px;border-radius:8px;cursor:pointer;border:0;background:#fff;text-align:left}
      .np-sugg:hover,.np-sugg:focus{background:var(--paper-3);outline:none}
      .np-sugg-main{font-weight:600;line-height:1.25}
      .np-sugg-sub{font-size:12px;color:var(--ink-3);line-height:1.3;margin-top:2px}
      .np-powered{font-family:Roboto,Arial,sans-serif;font-size:12px;font-weight:400;
        color:#5e5e5e;text-align:right;padding:7px 8px 3px;white-space:nowrap}
      .np-field-hint{font-size:12px;color:var(--ink-3);line-height:1.4;margin-top:6px}
      .np-field-hint.ok{color:var(--moss)}
      .np-field-hint.err{color:var(--cinabro)}
      .np-cat-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
        margin:24px 0 9px}
      .np-cat-title{font-size:13px;font-weight:600;color:#3A3C42}
      .np-cat-optional{font-size:12px;color:var(--ink-4);font-weight:400}
      .np-cat-card{position:relative;border:1px solid var(--rule);border-radius:var(--radius-field);
        background:#fff;padding:13px 13px 2px;margin-bottom:10px}
      .np-cat-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr 1fr .8fr;gap:10px}
      .np-cat-grid .np-field{margin-bottom:11px}
      .np-cat-grid .np-field label{font-size:11.5px;margin-bottom:5px;color:var(--ink-3)}
      .np-cat-grid .np-field input{font-size:13.5px;padding:10px 10px}
      .np-cat-remove{position:absolute;right:8px;top:7px;border:0;background:none;color:var(--ink-4);
        cursor:pointer;font-size:16px;line-height:1;padding:3px}
      .np-cat-remove:hover{color:var(--cinabro)}
      .np-cat-add{border:0;background:none;padding:2px 0;cursor:pointer;font-family:var(--f-sans);
        color:var(--ink-2);font-size:12.5px;font-weight:600}
      .np-cat-add:hover{color:var(--ink)}
      .np-legacy-cat{font-size:12px;line-height:1.45;color:var(--warn);background:var(--warn-bg);
        border-radius:8px;padding:8px 10px;margin-bottom:10px}
      @media (max-width:760px){
        .np-wrap{padding-left:20px;padding-right:20px}
        .np-cat-grid{grid-template-columns:1fr 1fr}
        .np-cat-grid .np-field:first-child{grid-column:1/-1}
      }
      .np-chips{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px}
      .np-chip{display:flex;align-items:center;justify-content:space-between;gap:10px;
        background:#fff;border:1.5px solid #E8E6DE;border-radius:var(--radius-card);
        padding:15px 17px;cursor:pointer;font-family:var(--f-sans);font-size:14px;
        font-weight:600;color:var(--ink);text-align:left}
      .np-chip.sel{background:#FAF9F5;border-color:var(--ink)}
      .np-qcard{border:1px solid var(--rule);border-radius:var(--radius-lg);background:#fff;
        padding:22px 24px;box-shadow:0 1px 2px rgba(20,20,40,.04)}
      .np-qhead{display:flex;align-items:center;gap:8px}
      .np-qn{font-size:12px;color:var(--ink-3)}
      .np-qdots{margin-left:auto;display:flex;gap:8px;align-items:center}
      .np-qdot{width:7px;height:7px;border-radius:50%;background:var(--ink)}
      .np-qtitle{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-top:14px}
      .np-qsub{font-size:13.5px;color:var(--ink-2);margin-top:7px;line-height:1.5}
      .np-qbtns{display:flex;gap:10px;margin-top:20px}
      .np-qbtn{flex:1;text-align:center;font-size:14.5px;font-weight:600;color:var(--ink);
        border:1px solid var(--rule);background:#fff;border-radius:var(--radius-field);
        padding:13px;cursor:pointer;font-family:var(--f-sans)}
      .np-qbtn:hover{border-color:var(--ink);background:#FAF9F5}
      .np-qback{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
        color:var(--ink-3);cursor:pointer;margin-top:14px;background:none;border:0;font-family:var(--f-sans)}
      .np-qback:hover{color:var(--ink)}
      .np-done{border:1px solid var(--rule);border-radius:var(--radius-lg);background:#fff;
        padding:20px 22px;display:flex;align-items:center;gap:14px}
      .np-done-ico{width:40px;height:40px;flex:none;border-radius:var(--radius-field);
        background:var(--moss-bg);display:flex;align-items:center;justify-content:center;color:var(--moss)}
      .np-done-t{font-size:15px;font-weight:600;letter-spacing:-.01em}
      .np-done-s{font-size:13px;color:var(--ink-2);margin-top:2px}
      .np-review{font-size:12.5px;font-weight:600;color:var(--ink);border:1px solid var(--rule);
        border-radius:8px;padding:7px 12px;cursor:pointer;white-space:nowrap;background:#fff}
      .np-review:hover{border-color:var(--ink)}
      .np-drop{border:1.5px dashed #DAD8CF;border-radius:var(--radius-field);padding:20px;
        display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;color:var(--ink-2)}
      .np-drop:hover{border-color:var(--ink);color:var(--ink)}
      .np-drop-hint{font-size:12px;color:var(--ink-4);margin-left:6px}
      .np-files{margin-top:10px;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2)}
      .np-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;
        margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);max-width:540px}
      .np-btn-back{font-size:14px;font-weight:600;color:var(--ink);border:1px solid var(--rule);
        background:#fff;border-radius:var(--radius);padding:11px 20px;cursor:pointer;font-family:var(--f-sans)}
      .np-btn-back:hover{border-color:var(--ink)}
      .np-btn-next{font-size:14px;font-weight:600;border:0;border-radius:var(--radius);
        padding:11px 20px;cursor:pointer;font-family:var(--f-sans)}
      .att-panel{max-width:880px;margin:0 auto;padding:40px 24px;width:100%}
      .att-empty{color:var(--ink-3);font-size:14px;text-align:center;padding:40px;
        border:1px dashed var(--rule);border-radius:10px}
      .att-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
      .att-head h2{font-size:18px;font-weight:600;color:var(--ink);margin:0}
      .att-upload-btn{background:var(--blueprint);color:#fff;border:0;border-radius:7px;
        padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;display:inline-block}
      .att-upload-btn:hover{background:var(--blueprint-2)}
      .att-sub{font-size:12.5px;color:var(--ink-3);margin:0 0 18px}
      .att-list{display:flex;flex-direction:column;gap:8px}
      .att-item{display:flex;align-items:center;gap:12px;padding:11px 13px;
        border:1px solid var(--rule-soft);border-radius:9px;background:var(--paper)}
      .att-item-main{flex:1;min-width:0}
      .att-item-name{font-weight:600;font-size:13.5px;color:var(--ink);
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .att-item-meta{font-size:11.5px;color:var(--ink-4);font-family:var(--f-mono);margin-top:2px}
      .att-item-acts{display:flex;gap:6px;flex-shrink:0}
      .att-act{border:1px solid var(--rule-soft);background:var(--paper);border-radius:6px;
        padding:4px 9px;font-size:12px;color:var(--ink-2);cursor:pointer}
      .att-act:hover:not(:disabled){background:var(--paper-2)}
      .att-act:disabled{opacity:.5;cursor:default}
      .att-act.att-del{color:var(--cinabro)}

      /* ============================================================
         REFRESH 2026 — Step 1 (display) + Step 2 (profondità dense).
         In fondo all'ultimo <style>: vince per ordine-sorgente sui
         componenti che settano gli stessi property (es. font-family).
         ============================================================ */
      /* Step 1 — titoli su --f-display (Schibsted Grotesk) */
      .empty-state h2, .docs-header h2, .prj-library-head h2, .att-head h2,
      .a2-doc-inner h2, .assev-doc h2, .doc-hub-title, .doc-hub-card-name,
      .pws-name, .project-modal h3, .np-modal-title, .a2c-title,
      .markdown-body h1, .markdown-body h2, .markdown-body h3 {
        font-family: var(--f-display); letter-spacing: -0.01em;
      }
      .empty-state h2 { letter-spacing: -0.03em; }

      /* Mock 0307: righe documento piatte, hover = bordo nero; focus campi = bordo nero */
      .docs-toolbar input:focus, .docs-toolbar select:focus { border-color: var(--ink); outline: none; }
      .a2-top { box-shadow: 0 1px 0 var(--rule), 0 8px 18px -14px rgba(16,25,40,.20); }
      .a2-doc-inner { box-shadow: var(--shadow-md); }
      .a2-sec { box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
      .a2-sec:hover { box-shadow: var(--shadow-md); }
      .a2-composer, .a2c-composer { box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
      .a2-composer:focus-within, .a2c-composer:focus-within { box-shadow: 0 0 0 3px var(--blueprint-bg), var(--shadow-md); }
      .a2-disc { box-shadow: var(--shadow-sm); }
      .pz-rep-container, .pz-rev { box-shadow: var(--shadow-sm); }
      .a2-msg.user, .a2-msg.bot, .a2c-msg.user, .a2c-msg.bot, .msg-user { box-shadow: var(--shadow-sm); }