/* ============================================
           LF-006 v2 — Menu H5 (pill tall fissa) + Cronologia G5 (card rounded)
           Layout: main padre fisso, history e fmenu fixed (no reflow main).
           Spec: design/varianti-menu-2026-04-25/H5-pill-tall-5btn.html +
                  design/varianti-cronologia-v2-2026-04-25/G5-rounded-padded.html
           ============================================ */

        /* MENU LAUNCHER H5: pill tall, fixed left, centrato verticale, 5 bottoni */
        .fmenu {
            position: fixed;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            display: flex; flex-direction: column;
            background: #fff;
            border: 1px solid #E5EAF1;
            border-radius: 14px;
            box-shadow: 0 6px 22px rgba(15,23,42,0.10), 0 1px 3px rgba(15,23,42,0.04);
            padding: 8px 6px;
            gap: 2px;
            z-index: 65;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .m-cell {
            display: flex; flex-direction: column; align-items: center;
            gap: 2px;
            padding: 4px 0 6px;
            cursor: pointer;
            border-radius: 8px;
            transition: background 140ms ease;
            width: 48px;
            background: transparent; border: none; font-family: inherit;
        }
        .m-cell:hover { background: rgba(46,117,182,0.10); }
        .m-cell.active { background: rgba(46,117,182,0.12); }
        .m-cell.active .m-ic { background: #2e75b6; color: #fff; }
        .m-ic {
            width: 36px; height: 36px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-size: 15px; color: #52627A;
            position: relative;
            transition: background 140ms ease, color 140ms ease;
        }
        .m-ic .m-badge {
            position: absolute; top: -3px; right: -3px;
            background: #F59E0B; color: #fff;
            font-size: 8.5px; font-weight: 700;
            padding: 1px 4px; border-radius: 7px; line-height: 1;
        }
        .m-lab {
            font-size: 9px; color: #9E9E9E;
            text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
        }
        .m-cell.active .m-lab { color: #1e3a5f; }
        .m-cell:disabled { opacity: 0.45; cursor: not-allowed; }
        .m-cell:disabled:hover { background: transparent; }

        /* CRONOLOGIA G5: card rounded morbida + blur, 80%h, fixed left.
           Hidden di default; toggle classe .history-open la rivela. */
        .history {
            position: fixed;
            top: 10vh; bottom: 10vh; /* ~80% h */
            left: 84px; /* dopo fmenu (14 + 60 fmenu width + 10 gap) */
            width: 300px;
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(8px);
            border: 1px solid #E5EAF1;
            border-radius: 14px;
            box-shadow: 0 16px 48px rgba(15,23,42,0.16), 0 2px 6px rgba(15,23,42,0.06);
            display: flex; flex-direction: column;
            z-index: 60;
            overflow: hidden;
            opacity: 0; transform: translateX(-12px); pointer-events: none;
            transition: opacity 200ms ease, transform 200ms ease;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .history.open { opacity: 1; transform: translateX(0); pointer-events: auto; }

        .history-head {
            padding: 16px 18px 12px;
            border-bottom: 1px solid #EEF1F5;
            display: flex; justify-content: space-between; align-items: baseline;
        }
        .history-head h3 {
            margin: 0; font-size: 14px; font-weight: 600;
            color: #1e3a5f; letter-spacing: 0;
        }
        .history-count {
            font-size: 11px; color: #9E9E9E;
            background: #F0F0F0; padding: 1px 7px; border-radius: 9px; font-weight: 600;
        }
        .history-search { padding: 12px 16px; border-bottom: 1px solid #EEF1F5; }
        .history-search input {
            width: 100%; padding: 7px 10px; border: 1px solid #E0E0E0;
            border-radius: 6px; font-size: 13px;
            background: #FAFBFC; outline: none;
            font-family: inherit;
            transition: border-color 140ms ease, background 140ms ease;
        }
        .history-search input:focus { border-color: #2e75b6; background: #fff; }
        .history-list {
            flex: 1; overflow-y: auto;
            padding: 8px 12px 14px;
        }
        .history-group {
            padding: 10px 8px 4px;
            font-size: 10px; font-weight: 700;
            letter-spacing: 0.5px; color: #9E9E9E;
            text-transform: uppercase;
        }
        .history-item {
            padding: 10px 12px; margin: 2px 0;
            border-radius: 8px; cursor: pointer;
            border-left: 3px solid transparent;
            transition: background 140ms ease;
        }
        .history-item:hover { background: #F7F8FA; }
        .history-item.active {
            background: rgba(46,117,182,0.08);
            border-left-color: #2e75b6;
        }
        .history-item-title {
            font-size: 13px; font-weight: 500;
            color: #1e3a5f; line-height: 1.3;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .history-item-preview {
            font-size: 12px; color: #616161;
            line-height: 1.35; margin-top: 3px;
            display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .history-item-meta {
            display: flex; align-items: center; justify-content: space-between;
            margin-top: 5px;
            font-size: 11px; color: #9E9E9E;
        }
        .history-item-count {
            background: #F0F0F0; color: #616161;
            padding: 1px 6px; border-radius: 4px;
            font-size: 10px; font-weight: 600;
        }
        .history-empty { font-size: 12.5px; padding: 14px; }

        .history-foot {
            padding: 12px 16px;
            border-top: 1px solid #EEF1F5;
            background: transparent;
        }
        .history-new-btn {
            width: 100%;
            background: linear-gradient(180deg, #2e75b6 0%, #1e3a5f 100%);
            color: #fff; border: none; border-radius: 6px;
            padding: 10px 12px; font-size: 13px; font-weight: 600;
            cursor: pointer; font-family: inherit;
            box-shadow: 0 2px 4px rgba(46,117,182,0.25);
            transition: filter 140ms ease;
        }
        .history-new-btn:hover { filter: brightness(1.08); }

        /* Mobile: fmenu più compatta, history più stretta ma stessa struttura */
        @media (max-width: 1100px) {
            .history { width: min(82vw, 300px); }
        }
        @media (max-width: 768px) {
            .fmenu { left: 8px; padding: 6px 4px; }
            .m-cell { width: 42px; }
            .m-ic { width: 32px; height: 32px; font-size: 13.5px; }
            .m-lab { font-size: 8.5px; }
            .history { left: 60px; }
        }

        /* WRAPPER CENTRALE — solo desktop (>=1100px).
           .page-stage avvolge chat-container + dossier-generate-cta + input-area
           come UN'UNICA CARD ATOMICA. Background/border/radius/shadow vivono
           sul parent. I children perdono i loro stili card individuali.
           Min-width 720, max-width 1100, margin auto. Padding-left 96 riservato
           al menu pill H5. Mobile (<1100px) invariato (page-stage trasparente). */
        .page-stage {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
        }
        @media (min-width: 1100px) {
            .page-stage {
                min-width: 720px;
                max-width: 1100px;
                margin: 14px auto;
                background: #FFFFFF;
                border: 1px solid #E5EAF1;
                border-radius: 12px;
                box-shadow: 0 1px 3px rgba(15,23,42,0.04);
                overflow: hidden; /* clip degli angoli ai children */
                padding-left: 82px; /* spazio menu pill H5 (14 left + 60 + 8 gap) */
            }
            .page-stage .chat-container {
                background: transparent;
                border: none;
                border-radius: 0;
                padding: 28px 28px 12px 14px; /* padding-left 14 perché page-stage ha già 82 */
                box-shadow: none;
                margin: 0;
            }
            .page-stage .input-area {
                background: transparent;
                border: none;
                border-top: 1px solid #EEF1F5; /* divider sottile interno */
                border-radius: 0;
                padding: 14px 28px 14px 14px;
                box-shadow: none;
                margin: 0;
            }
        }

        /* ================================================================
           FILTRI DRAWER (gemello di .history, mutua esclusività via JS)
           Pill FILTRI del menu H5 lo apre/chiude.
           ================================================================ */
        .filters-drawer {
            position: fixed;
            top: 10vh; bottom: 10vh;
            left: 84px;
            width: 320px;
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(8px);
            border: 1px solid #E5EAF1;
            border-radius: var(--radius-2xl);
            box-shadow: 0 16px 48px rgba(15,23,42,0.16), 0 2px 6px rgba(15,23,42,0.06);
            display: flex; flex-direction: column;
            z-index: var(--z-drawer);
            overflow: hidden;
            opacity: 0; transform: translateX(-12px); pointer-events: none;
            transition: opacity var(--dur-base) ease, transform var(--dur-base) ease;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        .filters-drawer.open {
            opacity: 1; transform: translateX(0); pointer-events: auto;
        }
        .filters-head {
            padding: var(--sp-4) var(--sp-5) var(--sp-3);
            border-bottom: 1px solid #EEF1F5;
            display: flex; justify-content: space-between; align-items: baseline;
        }
        .filters-head h3 {
            margin: 0; font-size: 14px; font-weight: 600; color: var(--navy);
        }
        .filters-clear {
            background: transparent; border: none;
            color: var(--blue); font-size: 12px; font-weight: 600;
            cursor: pointer; padding: 0;
        }
        .filters-clear:hover { text-decoration: underline; }
        .filters-body {
            flex: 1; overflow-y: auto;
            padding: var(--sp-3) var(--sp-4);
        }
        /* Override .filter-bar dentro al drawer: stack vertical invece che horizontal */
        .filters-drawer .filter-bar {
            display: flex; flex-direction: column; gap: var(--sp-2);
            padding: 0; background: transparent; border: none;
        }
        .filters-drawer .filter-btn {
            width: 100%; justify-content: space-between;
        }
        .filters-drawer .active-filters {
            margin-top: var(--sp-3);
            padding-top: var(--sp-3);
            border-top: 1px solid #EEF1F5;
            display: flex; flex-wrap: wrap; gap: var(--sp-1);
        }
        @media (max-width: 1099px) {
            .filters-drawer { width: min(86vw, 320px); }
        }
        @media (max-width: 480px) {
            .filters-drawer {
                top: 0; bottom: 0; left: 0;
                width: 100vw;
                border-radius: 0;
                z-index: var(--z-modal);
            }
            /* su mobile sm i drawer occupano full screen */
            .history { top: 0; bottom: 0; left: 0; width: 100vw; border-radius: 0; z-index: var(--z-modal); }
        }

        /* Pill FILTRI del menu H5 (rimuovo lo state disabled — ora attivo) */
        .fmenu .m-cell[data-action="filters"] { opacity: 1; cursor: pointer; }
        .fmenu .m-cell[data-action="filters"]:hover { background: rgba(46,117,182,0.10); }

        /* ================================================================
           BREAKPOINT MATRIX
           sm  <480     mobile portrait
           md  480-1099 tablet, mobile landscape
           lg  1100-1439 desktop standard (default css di sopra)
           xl  >=1440   large desktop / 4K
           ================================================================ */
        @media (min-width: 1440px) {
            .page-stage {
                max-width: var(--stage-max-xl);
            }
            .page-stage .chat-container { padding: var(--sp-8) var(--sp-10) var(--sp-3) var(--sp-4); }
            .page-stage .input-area { padding: var(--sp-4) var(--sp-10) var(--sp-4) var(--sp-4); }
        }
        @media (max-width: 768px) {
            /* Su tablet/mobile small il pill menu H5 si compatta:
               40px wide, bottoni 32px, sub-label nascosti. */
            .fmenu { padding: var(--sp-1); gap: 0; }
            .m-cell { width: 40px; padding: 2px 0 4px; }
            .m-ic { width: 32px; height: 32px; font-size: 13px; }
            .m-lab { display: none; }
        }
        @media (max-width: 480px) {
            /* Su mobile sm: filter-bar legacy (se ancora visibile) full-width,
               composer più stretto, page-stage trasparente */
            .page-stage { padding: 0; }
            .filter-bar { padding: var(--sp-2) var(--sp-3); }
        }

        /* Banner sessione storica visualizzata (in cima al chat) */
        .history-historical-banner {
            margin: 14px 24px 0 24px;
            padding: 10px 14px;
            background: #FEF3C7;
            border-left: 3px solid #F59E0B;
            border-radius: 6px;
            font-size: 13px; color: #78350F;
            display: flex; align-items: center; gap: 10px;
        }
        .history-historical-banner a {
            margin-left: auto;
            color: #92400E; font-weight: 600;
            text-decoration: none; border-bottom: 1px solid transparent;
            transition: border-color 140ms ease;
        }
        .history-historical-banner a:hover { border-bottom-color: #92400E; }

        /* ============================================
           Fresh-search SP-C: msg #1 pending + msg #2 tabellare + badge
           Spec: docs/SUBAGENT_FRESH_SEARCH_SPEC.md §7.7 + regola 16+17 personality.
           ============================================ */
        .fresh-pending {
            border-left: 3px solid var(--navy, #0D1F3A);
            background: #F8FAFC;
            padding: 12px 16px;
            margin-top: 8px;
            border-radius: 6px;
            font-size: 14px;
            color: #1F2937;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }
        .fresh-pending .fresh-spinner {
            display: inline-block;
            width: 16px; height: 16px;
            border: 2px solid #CBD5E1;
            border-top-color: var(--navy, #0D1F3A);
            border-radius: 50%;
            animation: fresh-spin 1s linear infinite;
            flex-shrink: 0;
            margin-top: 3px;
        }
        @keyframes fresh-spin { to { transform: rotate(360deg); } }
        .fresh-pending.fresh-completed {
            background: #ECFDF5;
            border-left-color: #059669;
        }
        .fresh-pending.fresh-completed .fresh-spinner {
            border: 2px solid #059669;
            border-top-color: #059669;
            animation: none;
            position: relative;
        }
        .fresh-pending.fresh-completed .fresh-spinner::after {
            content: '✓';
            position: absolute;
            top: -2px; left: 1px;
            color: #059669;
            font-weight: bold;
            font-size: 11px;
        }
        .fresh-pending.fresh-failed {
            background: #FEF3C7;
            border-left-color: #D97706;
        }
        .fresh-msg2-anchor {
            display: inline-block;
            color: #059669;
            text-decoration: underline;
            cursor: pointer;
            margin-left: 6px;
            font-weight: 600;
        }
        /* Tabella multi-bando (regola 16 personality v2.0.12) */
        .fresh-bandi-table {
            width: 100%;
            border-collapse: collapse;
            margin: 12px 0;
            font-size: 13px;
        }
        .fresh-bandi-table th {
            text-align: left;
            background: #F1F5F9;
            color: #1E293B;
            padding: 10px 12px;
            border-bottom: 2px solid #CBD5E1;
            font-weight: 600;
        }
        .fresh-bandi-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #E2E8F0;
            vertical-align: top;
        }
        .fresh-bandi-table tr:last-child td { border-bottom: none; }
        .fresh-bandi-table .fresh-bando-titolo {
            color: var(--navy, #0D1F3A);
            font-weight: 600;
        }
        .fresh-bandi-table .fresh-bando-titolo a {
            color: var(--navy, #0D1F3A);
            text-decoration: underline;
        }
        .fresh-bandi-table .fresh-bando-scadenza-imminente {
            color: #B91C1C;
            font-weight: 600;
        }
        /* Badge fonte inline (Perplexity-like) */
        .fresh-source-badge {
            display: inline-block;
            font-size: 11px;
            background: #E2E8F0;
            color: #334155;
            padding: 2px 7px;
            border-radius: 10px;
            margin: 0 3px;
            cursor: pointer;
            text-decoration: none;
            border: 1px solid #CBD5E1;
            font-weight: 500;
        }
        .fresh-source-badge:hover {
            background: var(--navy, #0D1F3A);
            color: white;
            border-color: var(--navy, #0D1F3A);
        }
        .fresh-source-badge.fresh-tier-secondary {
            background: #FEF3C7;
            color: #78350F;
            border-color: #FCD34D;
        }
        /* Sezione "Per contesto, in altre regioni" — visivamente distinta da bandi[] primary */
        .fresh-context-extra {
            margin-top: 16px;
            padding: 12px 14px;
            background: #F9FAFB;
            border-left: 3px solid #94A3B8;
            border-radius: 4px;
            font-size: 13px;
        }
        .fresh-context-extra-title {
            font-size: 12px;
            font-weight: 600;
            color: #475569;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .fresh-context-extra ul {
            margin: 0;
            padding-left: 18px;
        }
        .fresh-context-extra li { margin-bottom: 4px; }
        /* Toast notifica msg #2 arrivato */
        .fresh-toast {
            position: fixed;
            bottom: 24px; right: 24px;
            background: var(--navy, #0D1F3A);
            color: white;
            padding: 12px 18px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            cursor: pointer;
            z-index: 9999;
            font-size: 14px;
            max-width: 320px;
            animation: fresh-toast-in 200ms ease-out;
        }
        @keyframes fresh-toast-in {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .fresh-toast:hover { background: #102D4A; }

        /* ============================================
           Phase 1 (2026-05-15) — Gov-strip istituzionale
           Banner navy/grigio sopra l'header. Sempre visibile, sia desktop che
           mobile. Su mobile (<=768px) padding ridotto e padding-top sicuro
           per notch iOS (env(safe-area-inset-top)).
           ============================================ */
        .gov-strip {
            background: var(--oc-gradient-gov,
                linear-gradient(180deg, #EEF1F4 0%, #E4E8EC 100%));
            color: var(--oc-text-2, #455B71);
            font-family: var(--oc-font-sans, -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, sans-serif);
            font-size: var(--oc-text-xs, 11px);
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            text-align: center;
            padding: 6px 16px;
            border-bottom: 1px solid var(--oc-border, #D9DEE3);
            line-height: 1.4;
        }
        @media (max-width: 768px) {
            .gov-strip {
                padding: 4px 10px;
                padding-top: calc(4px + env(safe-area-inset-top, 0px));
                font-size: 10px;
                letter-spacing: 0.03em;
            }
        }

        /* ============================================
           Phase 1 (2026-05-15) — User pill (header autenticato)
           Mostra avatar + nome + ruolo. Renderizzato solo se auth_user è nel
           context Jinja2 (vedi nav-menu.html {% if auth_user %}).
           ============================================ */
        .user-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 6px 12px 6px 6px;
            background: var(--oc-primary-light, #E5EAF1);
            border: 1px solid var(--oc-border, #D9DEE3);
            border-radius: var(--oc-radius-pill, 999px);
            font-family: var(--oc-font-sans, -apple-system, BlinkMacSystemFont,
                'Segoe UI', Roboto, sans-serif);
            color: var(--oc-text, #17324D);
            margin-left: 10px;
            box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(23,50,77,0.04));
        }
        .user-pill-avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--oc-gradient-brand,
                linear-gradient(135deg, #2A5A91 0%, #0D1F3A 100%));
            color: #fff;
            font-weight: 700;
            font-size: 13px;
            line-height: 1;
            flex: none;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
        }
        .user-pill-text {
            display: inline-flex;
            flex-direction: column;
            line-height: 1.15;
        }
        .user-pill-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--oc-primary, #0D1F3A);
        }
        .user-pill-role {
            font-size: 11px;
            color: var(--oc-text-3, #5C6F82);
            font-weight: 500;
        }
        @media (max-width: 768px) {
            .user-pill {
                padding: 4px 10px 4px 4px;
                gap: 6px;
                margin-left: 6px;
            }
            .user-pill-avatar { width: 24px; height: 24px; font-size: 11px; }
            .user-pill-name { font-size: 12px; }
            .user-pill-role { font-size: 10px; }
        }