/*
 * oraculum-canvas-d1.css — Override layer per fidelity 1:1 canvas Claude Design
 * Source authoritativo: Oraculum WOW 3 gradazioni.html (frame D1 desktop 1440x900).
 * Caricato per ULTIMO in head.html — vince per specificità su tutte le regole precedenti.
 *
 * Strategia: nascondo .fmenu pill + .dossier-panel drawer attuali, monto sopra
 * un layout grid 3-col (264 / 1fr / 340) con nuova .oc-canvas-* family.
 * Riuso ID JS-critici esistenti per non rompere oraculum-chat.js / oraculum-dossier.js.
 */

/* ============================================================
   1. BODY GRADIENT + PALETTE CANVAS
   ============================================================ */

body {
    font-family: "Titillium Web", "Helvetica Neue", Arial, system-ui, sans-serif !important;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, #F7FAFD 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, #EEF3F8 0%, transparent 50%),
        linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    background-attachment: fixed !important;
    color: #17324D;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Disattiva flex-column del legacy: lo gestiamo con grid */
    display: block !important;
    height: auto !important;
    min-height: 100vh;
}

/* Palette canvas applicata anche a :root come override (override --navy del base.css) */
:root {
    --navy: #0D1F3A;
    --canvas-primary: #0D1F3A;
    --canvas-primary-dark: #08122A;
    --canvas-primary-hover: #13294B;
    --canvas-primary-light: #E5EAF1;
    --canvas-focus: #FFC107;
    --canvas-text: #17324D;
    --canvas-text-2: #455B71;
    --canvas-text-3: #5C6F82;
    --canvas-text-4: #8C9DAD;
    --canvas-bg: #FFFFFF;
    --canvas-bg-2: #F4F5F7;
    --canvas-bg-3: #E9ECEF;
    --canvas-border: #D9DEE3;
    --canvas-border-2: #C1C9D2;
    --canvas-success: #008055;
    --canvas-warning: #A66300;
    --canvas-danger: #CC334D;
    --canvas-info: #005C99;
    --canvas-sans: "Titillium Web", "Helvetica Neue", Arial, system-ui, sans-serif;
    --canvas-serif: "Lora", Georgia, serif;
    --canvas-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   2. NASCONDI LEGACY (fmenu pill, history drawer, dossier drawer toggle)
   I JS continuano a manipolare gli ID, ma visualmente sono fuori scena.
   ============================================================ */

.fmenu { display: none !important; }
.history { display: none !important; }
.dossier-pill-wrap { display: none !important; }
.header,
.gov-strip { display: none !important; } /* gov+header legacy → sostituiti */
.page-stage { padding: 0 !important; }

/* ============================================================
   3. GOV-STRIP CANVAS (riga 342-353 del canvas)
   ============================================================ */

.oc-gov-strip {
    background: linear-gradient(180deg, #EEF1F4 0%, #E4E8EC 100%);
    border-bottom: 1px solid var(--canvas-border);
    font-size: 12px;
    color: var(--canvas-text-2);
    width: 100%;
}
.oc-gov-strip-inner {
    max-width: none;
    margin: 0;
    padding: 6px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.oc-gov-strip-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.oc-gov-strip-dir {
    color: var(--canvas-text-3);
}
.oc-gov-strip-right {
    display: flex;
    align-items: center;
    gap: 16px;
}
.oc-gov-strip-right a {
    color: var(--canvas-primary);
    text-decoration: none;
}
.oc-gov-strip-right a:hover {
    text-decoration: underline;
}
.oc-gov-strip-locale {
    color: var(--canvas-text-3);
}

/* ============================================================
   4. APP-HEADER CANVAS (riga 355-388)
   ============================================================ */

.oc-app-header {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
    border-bottom: 1px solid var(--canvas-border);
    box-shadow: 0 1px 0 rgba(23,50,77,0.02);
    width: 100%;
}
.oc-app-header-inner {
    max-width: none;
    margin: 0;
    padding: 12px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.oc-brand-lockup {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}
.oc-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2A5A91 0%, #0D1F3A 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    flex: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(16,40,72,0.30);
    font-family: var(--canvas-sans);
}
.oc-brand-text-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--canvas-text);
}
.oc-brand-text-sub {
    font-size: 12px;
    color: var(--canvas-text-3);
    line-height: 1.4;
}

.oc-search-wrap {
    flex: 1;
    max-width: 480px;
}
.oc-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--canvas-border);
    background: linear-gradient(180deg, #F7F9FB 0%, #EDF1F5 100%);
    box-shadow: inset 0 1px 2px rgba(23,50,77,0.04);
}
.oc-search input {
    flex: 1;
    background: transparent;
    outline: none;
    border: none;
    font-size: 13.5px;
    color: var(--canvas-text);
    font-family: var(--canvas-sans);
}
.oc-search input::placeholder {
    color: var(--canvas-text-3);
}
.oc-search svg {
    color: var(--canvas-text-3);
    flex: none;
}
.oc-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--canvas-bg);
    border: 1px solid var(--canvas-border-2);
    border-radius: 3px;
    font-family: var(--canvas-mono);
    font-size: 11px;
    color: var(--canvas-text-2);
    box-shadow: 0 1px 0 var(--canvas-border);
}

.oc-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}
.oc-corpus-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    background: linear-gradient(180deg, #F3F7F3 0%, #E4EEE3 100%);
    border: 1px solid #D2E0D2;
    font-size: 12.5px;
    color: var(--canvas-text-2);
}
.oc-corpus-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--canvas-success);
}
.oc-brand-pipe {
    width: 1px;
    height: 28px;
    background: var(--canvas-border);
}

.oc-user-pill {
    display: flex;
    align-items: center;
    gap: 8px;
}
.oc-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: #D6DEEA;
    color: var(--canvas-primary-dark);
}
.oc-user-info {
    font-size: 13px;
    line-height: 1.2;
}
.oc-user-name {
    display: block;
    font-weight: 600;
    color: var(--canvas-text);
}
.oc-user-role {
    display: block;
    font-size: 11.5px;
    color: var(--canvas-text-3);
    margin-top: 1px;
}

/* ============================================================
   5. SHELL GRID 3-COL (riga 390)
   ============================================================ */

/* Canvas D1 Hybrid (2026-05-16): pattern Claude.ai "Wide mode" + Linear.
   Shell full-bleed (niente max-width capped). Sidebar 264 fissa.
   Dossier 340→420 fluido via clamp() — espande a viewport ≥1600.
   Main 1fr prende tutto lo spazio residuo; il CONTENUTO interno
   (oc-main-empty, #chat, msg-*, composer) è cap a 680-760px con
   margin auto → lo spazio extra diventa breathing room simmetrica.
   Razionale: reading line-length 65-75ch preservata + dossier
   respira a 1600+ + niente gutter "morti" del cap totale. */
.oc-shell {
    margin: 0;
    display: grid;
    grid-template-columns: clamp(264px, 18vw, 320px) minmax(0, 1fr) clamp(340px, 22vw, 420px);
    min-height: calc(100vh - 101px);
    width: 100%;
}

/* ============================================================
   6. SIDEBAR CRONOLOGIA (riga 392-476)
   ============================================================ */

.oc-sidebar {
    background: linear-gradient(180deg, #F6F8FA 0%, #EEF2F5 100%);
    border-right: 1px solid var(--canvas-border);
    box-shadow: inset -1px 0 0 rgba(23,50,77,0.02);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 101px);
    position: sticky;
    top: 0;
    overflow: hidden;
}
.oc-sidebar-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding-right: 2px;
    /* Firefox */
    scrollbar-width: none;
    /* IE/Edge legacy */
    -ms-overflow-style: none;
}
/* Webkit (Chrome/Safari/Edge) */
.oc-sidebar-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.oc-sidebar-list::-webkit-scrollbar-thumb { background: transparent; }
.oc-sidebar-list::-webkit-scrollbar-track { background: transparent; }

/* Button primario canvas */
.oc-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    transition: all 160ms ease;
    cursor: pointer;
    border: 1px solid transparent;
    background: linear-gradient(180deg, #2A5A91 0%, #0D1F3A 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(16,40,72,0.28);
    font-family: var(--canvas-sans);
}
.oc-btn-primary:hover {
    background: linear-gradient(180deg, #234E76 0%, #13294B 100%);
}
.oc-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    background: transparent;
    color: var(--canvas-text-2);
    border: none;
    cursor: pointer;
    font-family: var(--canvas-sans);
}
.oc-btn-ghost:hover {
    background: var(--canvas-bg-2);
    color: var(--canvas-text);
}

.oc-sidebar-new-conv {
    width: 100%;
    margin-bottom: 20px;
}

.oc-sidebar-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    margin-bottom: 8px;
}
.oc-sidebar-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--canvas-text-3);
}
.oc-sidebar-section-count {
    font-size: 11px;
    color: var(--canvas-text-4);
}

.oc-sidebar-search {
    margin-bottom: 12px;
}
.oc-sidebar-search input {
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--canvas-border);
    background: var(--canvas-bg);
    color: var(--canvas-text);
    font-size: 13px;
    outline: none;
    font-family: var(--canvas-sans);
}
.oc-sidebar-search input:focus {
    border-color: var(--canvas-primary);
    box-shadow: 0 0 0 3px var(--canvas-primary-light);
}

.oc-sidebar-date-group {
    padding: 16px 8px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--canvas-text-4);
    white-space: nowrap;
    overflow: visible;
}
.oc-sidebar-date-group:first-of-type {
    padding-top: 8px;
}

.oc-hx-item {
    position: relative;
    padding: 10px 14px 10px 22px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 140ms ease;
    margin-bottom: 2px;
    display: block;
    color: inherit;
    text-decoration: none;
}
.oc-hx-item,
.oc-hx-item:hover,
.oc-hx-item:focus,
.oc-hx-item:visited,
.oc-hx-item *,
.oc-hx-item:hover *,
.oc-hx-item:focus * {
    text-decoration: none !important;
}
.oc-hx-item:hover {
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F6F9 100%);
}
.oc-hx-item.active {
    background: linear-gradient(180deg, #F3F6F9 0%, #E8EEF4 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(23,50,77,0.05);
}
.oc-hx-item.active::before {
    content: "▸";
    position: absolute;
    left: 8px;
    top: 10px;
    font-family: var(--canvas-serif);
    font-size: 13px;
    line-height: 1;
    color: var(--canvas-primary-dark);
    font-weight: 700;
}
.oc-hx-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.oc-hx-title {
    font-size: 13.5px;
    line-height: 1.25;
    color: var(--canvas-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-hx-item.active .oc-hx-title {
    color: var(--canvas-primary-dark);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: var(--canvas-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.oc-hx-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--canvas-primary);
    flex: none;
}
.oc-hx-preview {
    font-size: 12px;
    color: var(--canvas-text-3);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oc-hx-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}
.oc-hx-meta-ago {
    font-size: 11px;
    color: var(--canvas-text-4);
}
.oc-hx-meta-chip {
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--canvas-bg);
    color: var(--canvas-text-3);
    border: 1px solid var(--canvas-border);
}

.oc-sidebar-empty {
    padding: 24px 12px;
    font-size: 12.5px;
    color: var(--canvas-text-4);
    font-style: italic;
    text-align: center;
}

.oc-sidebar-foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--canvas-border);
}
.oc-sidebar-foot .oc-btn-ghost {
    width: 100%;
    justify-content: flex-start;
    font-size: 13px;
}

/* ============================================================
   7. MAIN COLUMN (riga 478+) — chat + composer
   ============================================================ */

.oc-main {
    padding: 28px 48px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Composer hero D2 (inline empty state) */
.oc-composer-hero {
    margin-top: 8px;
    margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(23,50,77,0.05), 0 2px 8px rgba(23,50,77,0.04), inset 0 1px 0 rgba(255,255,255,0.6) !important;
    border-color: var(--canvas-primary) !important;
    box-shadow: 0 0 0 3px var(--canvas-primary-light), 0 1px 3px rgba(23,50,77,0.05) !important;
}
.oc-composer-hero textarea {
    font-size: 15.5px !important;
    min-height: 90px;
}
.oc-composer-hero-foot {
    padding: 10px 14px !important;
}
.oc-composer-hero-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--canvas-text-4);
}
.oc-composer-hero-meta svg {
    color: var(--canvas-text-4);
}

.oc-main-empty {
    padding: 48px 0 40px;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
    text-align: left;
}
.oc-main.oc-main-empty-mode {
    justify-content: center;
}
.oc-main.oc-main-empty-mode .oc-composer-wrap {
    display: none !important;
}
.oc-main-empty-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--canvas-primary);
    margin-bottom: 12px;
}
.oc-main-empty-title {
    font-family: var(--canvas-serif);
    font-size: 42px;
    font-weight: 500;
    color: var(--canvas-text);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}
.oc-main-empty-title-em {
    color: var(--canvas-primary);
    font-style: italic;
    font-weight: 500;
}
.oc-main-empty-sub {
    font-size: 15.5px;
    color: var(--canvas-text-2);
    line-height: 1.55;
    max-width: 560px;
    margin-bottom: 32px;
}
.oc-main-empty-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--canvas-text-3);
    margin-bottom: 12px;
}
.oc-main-empty-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.oc-suggest-card {
    background: #fff;
    border: 1px solid var(--canvas-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(23,50,77,0.04);
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    transition: all 160ms ease;
    font-family: var(--canvas-sans);
}
.oc-suggest-card:hover {
    border-color: var(--canvas-primary);
    box-shadow: 0 4px 12px rgba(0,76,153,0.10);
    transform: translateY(-1px);
}
.oc-suggest-card-tag {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--canvas-primary);
    margin-bottom: 6px;
}
.oc-suggest-card-q {
    font-size: 13.5px;
    color: var(--canvas-text);
    line-height: 1.35;
}
/* Chip legacy preservata per composer suggerimenti */
.oc-main-empty-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================================
   CANVAS — message turns (user/AI), alert, callout, retrieval-strip,
   cite-ref, feedback-bar, badge, src-card. Allinea le classi che
   oraculum-chat.js genera con la palette canvas. Override layer.
   ============================================================ */

#chat {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

/* MSG-USER allineato a destra, bubble gradient bordo */
.msg-user, .message.user, .message-user, .turn .question, .question {
    background: linear-gradient(180deg, #F7F9FB 0%, #EEF2F5 100%);
    border: 1px solid var(--canvas-border);
    padding: 14px 18px;
    border-radius: 6px;
    max-width: 680px;
    margin-left: auto;
    margin-right: 0;
    margin-bottom: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(23,50,77,0.04);
    color: var(--canvas-text);
    font-size: 15px;
    line-height: 1.55;
}

/* MSG-AI con avatar pseudo-element O */
.msg-ai, .message.ai, .message-ai, .turn .answer, .answer {
    max-width: 760px;
    margin-right: auto;
    margin-bottom: 16px;
    color: var(--canvas-text);
    font-size: 15.5px;
    line-height: 1.65;
}
.msg-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.msg-ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2A5A91 0%, #08122A 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 4px rgba(16,40,72,0.28);
}

/* Citations inline + hover preview card (canvas D1 WOW). */
.cite-ref {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--canvas-sans);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: var(--canvas-primary);
    background: var(--canvas-primary-light);
    padding: 2px 6px;
    border-radius: 3px;
    margin: 0 2px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 160ms ease;
    position: relative;
    vertical-align: baseline;
    transform: translateY(-1px);
}
.cite-ref::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 5px;
    opacity: 0.7;
}
.cite-ref:hover,
.cite-ref:focus-visible {
    background: var(--canvas-primary);
    color: #fff;
}

/* Hover preview card — popup con fonte/title/meta/quote/link.
   Responsive: desktop 380, tablet 320, mobile (<640) full-viewport-cap. */
.cite-preview {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 380px;
    max-width: calc(100vw - 32px);
    padding: 14px 16px;
    background: var(--canvas-bg);
    border: 1px solid var(--canvas-border-2);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(23,50,77,0.12), 0 2px 6px rgba(23,50,77,0.06);
    font-family: var(--canvas-sans);
    font-weight: 400;
    color: var(--canvas-text);
    font-size: 13.5px;
    line-height: 1.5;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 180ms ease, transform 180ms ease;
    text-align: left;
}
.cite-ref:hover .cite-preview,
.cite-ref:focus-visible .cite-preview,
.cite-ref:focus-within .cite-preview {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.cite-preview::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: var(--canvas-bg);
    border-left: 1px solid var(--canvas-border-2);
    border-top: 1px solid var(--canvas-border-2);
    transform: rotate(45deg);
}
.cite-preview-tag {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--canvas-primary);
    margin-bottom: 6px;
}
.cite-preview-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--canvas-text);
    margin-bottom: 4px;
    line-height: 1.3;
}
.cite-preview-meta {
    display: block;
    font-size: 12px;
    color: var(--canvas-text-3);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--canvas-border);
}
.cite-preview-quote {
    display: block;
    font-family: var(--canvas-serif);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--canvas-text-2);
    padding-left: 10px;
    border-left: 2px solid var(--canvas-primary);
}
.cite-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--canvas-primary);
    font-weight: 600;
    text-decoration: none;
}
.cite-preview-link:hover { text-decoration: underline; }

/* ============================================================
   TAG BADGE (GAP #86 — personality TAG visibili nel turn AI)
   Mostrato accanto al timestamp dell'AI quando detectResponseTags
   rileva regola 11-bis o regola 13.
   ============================================================ */
.oc-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 3px;
    line-height: 1.4;
    font-family: var(--canvas-sans);
}
.oc-tag-warn {
    background: linear-gradient(180deg, #FFF8E0 0%, #FDEDBE 100%);
    color: var(--canvas-warning);
    border: 1px solid #F5D782;
}
.oc-tag-info {
    background: linear-gradient(180deg, #EFF5FB 0%, #DDE9F5 100%);
    color: var(--canvas-info);
    border: 1px solid #B3D1EC;
}

/* ============================================================
   GAP #82 — D7 Lista bandi raggruppata desktop (canvas D7).
   Header serif "X bandi corrispondono ai tuoi filtri" + 3 gruppi
   (Aperti / In apertura / Chiusi) con label + counter + cards.
   Attivato a viewport >=641px; sotto resta mobile flat-list.
   ============================================================ */
@media (min-width: 641px) {
    body.oc-page-mobile[data-page="bandi"] .oc-mobile-shell.oc-bandi-desktop-shell {
        max-width: 1100px;
        margin: 0 auto;
        padding: 32px 40px 80px;
        background: transparent;
    }
    .oc-bandi-eyebrow {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--canvas-primary);
        margin-bottom: 8px;
    }
    .oc-bandi-title-serif {
        font-family: var(--canvas-serif);
        font-size: 28px;
        font-weight: 500;
        letter-spacing: -0.015em;
        color: var(--canvas-text);
        line-height: 1.2;
        margin-bottom: 6px;
    }
    .oc-bandi-sub {
        font-size: 14px;
        color: var(--canvas-text-3);
        margin-bottom: 24px;
    }
    .oc-bandi-group {
        margin-bottom: 28px;
    }
    .oc-bandi-group-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        margin-bottom: 10px;
        border-radius: 4px;
        background: linear-gradient(180deg, #F7F9FB 0%, #EDF1F5 100%);
        border: 1px solid var(--canvas-border);
    }
    .oc-bandi-group-label {
        display: inline-flex;
        align-items: center;
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 3px 10px;
        border-radius: 3px;
    }
    .oc-bandi-group-open .oc-bandi-group-label { background: #D8F2E6; color: #046642; }
    .oc-bandi-group-soon .oc-bandi-group-label { background: #FFF4D6; color: var(--canvas-warning); }
    .oc-bandi-group-closed .oc-bandi-group-label { background: #E9ECEF; color: var(--canvas-text-3); }
    .oc-bandi-group-count {
        font-size: 13px;
        color: var(--canvas-text-2);
        font-weight: 500;
    }
    .oc-bandi-group-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .oc-bandi-card {
        background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
        border: 1px solid var(--canvas-border);
        border-radius: 6px;
        padding: 14px 18px;
        text-decoration: none;
        display: grid;
        grid-template-columns: 80px 1fr auto;
        gap: 18px;
        align-items: center;
        transition: all 160ms ease;
        box-shadow: 0 1px 2px rgba(23,50,77,0.03);
    }
    .oc-bandi-card:hover {
        border-color: var(--canvas-primary);
        box-shadow: 0 4px 12px rgba(0,76,153,0.10);
        transform: translateY(-1px);
    }
    .oc-bandi-card-badges {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }
    .oc-bandi-card-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--canvas-text) !important;
        line-height: 1.3;
        text-decoration: none;
    }
    .oc-bandi-card-meta {
        font-size: 13px;
        color: var(--canvas-text-3);
        margin-top: 4px;
    }
    /* Pagination su desktop */
    body.oc-page-mobile[data-page="bandi"] .oc-mobile-pagination {
        margin-top: 24px;
        padding-top: 18px;
        border-top: 1px solid var(--canvas-border);
    }
    /* Search + chips spacing su desktop */
    body.oc-page-mobile[data-page="bandi"] .oc-mobile-search,
    body.oc-page-mobile[data-page="bandi"] .oc-mobile-chips {
        margin-bottom: 18px;
    }
}

/* ============================================================
   GAP #83 — Pagina dettaglio bando (canvas M3 + desktop adapt).
   ============================================================ */
.oc-bando-detail-shell {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 28px 80px;
}
@media (min-width: 641px) {
    .oc-bando-detail-shell {
        padding: 32px 40px 80px;
    }
}
.oc-bando-detail-back {
    margin-bottom: 14px;
}
.oc-bando-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--canvas-text-2);
    text-decoration: none;
    padding: 6px 10px 6px 6px;
    border-radius: 4px;
    transition: background 140ms ease;
    font-family: var(--canvas-sans);
}
.oc-bando-back-link:hover {
    background: var(--canvas-bg-2);
    color: var(--canvas-text);
}
.oc-bando-detail-header {
    margin-bottom: 22px;
}
.oc-bando-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.oc-bando-detail-title {
    font-family: var(--canvas-serif);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--canvas-text);
    margin: 0 0 6px 0;
}
@media (min-width: 641px) {
    .oc-bando-detail-title { font-size: 36px; }
}
.oc-bando-detail-subtitle {
    font-size: 15px;
    color: var(--canvas-text-2);
    line-height: 1.5;
}
.oc-bando-detail-callout {
    background: linear-gradient(180deg, #F8FAFC 0%, #EDF1F5 100%);
    border: 1px solid var(--canvas-border);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.oc-bando-detail-callout-head {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--canvas-text-3);
    margin-bottom: 10px;
}
.oc-bando-detail-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--canvas-border);
    font-size: 14px;
}
.oc-bando-detail-row:last-child { border-bottom: none; }
.oc-bando-detail-label {
    color: var(--canvas-text-3);
    font-weight: 500;
}
.oc-bando-detail-value {
    color: var(--canvas-text);
    font-weight: 500;
}
.oc-bando-detail-value.tnum {
    font-variant-numeric: tabular-nums lining-nums;
}
.oc-bando-detail-section {
    margin-bottom: 22px;
}
.oc-bando-detail-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--canvas-text-3);
    margin: 0 0 10px 0;
}
.oc-bando-detail-paragraph {
    font-size: 15px;
    color: var(--canvas-text);
    line-height: 1.65;
    margin: 0;
}
.oc-bando-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.oc-chip-flat {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 14px;
    background: var(--canvas-bg-2);
    color: var(--canvas-text-2);
    font-size: 12.5px;
    border: 1px solid var(--canvas-border);
}
.oc-bando-detail-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--canvas-border);
}
.oc-bando-detail-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 4px;
    background: linear-gradient(180deg, #2A5A91 0%, #0D1F3A 100%);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(16,40,72,0.28);
    font-family: var(--canvas-sans);
    line-height: 1.2;
}
.oc-bando-detail-cta-primary:hover {
    background: linear-gradient(180deg, #234E76 0%, #13294B 100%);
}
.oc-bando-detail-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 4px;
    background: transparent;
    color: var(--canvas-primary);
    border: 1px solid var(--canvas-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    font-family: var(--canvas-sans);
    line-height: 1.2;
}
.oc-bando-detail-cta-outline:hover {
    background: var(--canvas-primary-light);
}
.oc-bando-detail-notfound {
    text-align: center;
    padding: 60px 24px;
}

/* ============================================================
   GAP #85 — THEME NOTTE (dark mode canvas Oraculum WOW NOTTE).
   Attivato via body[data-theme="notte"] (toggle JS in canvas-bridge).
   Override delle CSS variable canvas + body bg gradient navy deep.
   ============================================================ */
body[data-theme="notte"] {
    --canvas-primary: #5B8DEF;
    --canvas-primary-dark: #3A6FD8;
    --canvas-primary-hover: #4A7EE3;
    --canvas-primary-light: rgba(91,141,239,0.18);
    --canvas-text: #F1F5F9;
    --canvas-text-2: #CBD5E1;
    --canvas-text-3: #94A3B8;
    --canvas-text-4: #64748B;
    --canvas-bg: #0F1F3A;
    --canvas-bg-2: rgba(255,255,255,0.04);
    --canvas-bg-3: rgba(255,255,255,0.08);
    --canvas-border: rgba(148,163,184,0.18);
    --canvas-border-2: rgba(148,163,184,0.30);
    --canvas-success: #34D399;
    --canvas-warning: #FBBF24;
    --canvas-danger: #F87171;
    --canvas-info: #60A5FA;

    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(91,141,239,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(167,139,250,0.08) 0%, transparent 50%),
        linear-gradient(180deg, #0A1628 0%, #050B17 100%) !important;
    color: var(--canvas-text);
}

/* Adatta gradient elementi key al tema NOTTE */
body[data-theme="notte"] .oc-gov-strip {
    background: linear-gradient(180deg, rgba(5,11,23,0.85) 0%, rgba(5,11,23,0.65) 100%);
    border-bottom-color: var(--canvas-border);
    color: var(--canvas-text-3);
}
body[data-theme="notte"] .oc-gov-strip-dir,
body[data-theme="notte"] .oc-gov-strip-locale {
    color: var(--canvas-text-3);
}
body[data-theme="notte"] .oc-gov-strip-right a {
    color: var(--canvas-info);
}
body[data-theme="notte"] .oc-app-header {
    background: linear-gradient(180deg, rgba(15,31,58,0.95) 0%, rgba(10,22,40,0.92) 100%);
    border-bottom-color: var(--canvas-border);
    backdrop-filter: blur(8px);
}
body[data-theme="notte"] .oc-search {
    background: rgba(255,255,255,0.04);
    border-color: var(--canvas-border);
}
body[data-theme="notte"] .oc-search input { color: var(--canvas-text); }
body[data-theme="notte"] .oc-corpus-pill {
    background: rgba(52,211,153,0.10);
    border-color: rgba(52,211,153,0.30);
    color: #6EE7B7;
}
body[data-theme="notte"] .oc-sidebar {
    background: linear-gradient(180deg, rgba(15,31,58,0.85) 0%, rgba(10,22,40,0.80) 100%);
    border-right-color: var(--canvas-border);
}
body[data-theme="notte"] .oc-dossier-panel {
    background: linear-gradient(180deg, rgba(15,31,58,0.85) 0%, rgba(10,22,40,0.80) 100%);
    border-left-color: var(--canvas-border);
}
body[data-theme="notte"] .oc-panel,
body[data-theme="notte"] .oc-suggest-card,
body[data-theme="notte"] .src-card,
body[data-theme="notte"] .oc-bandi-card {
    background: rgba(255,255,255,0.04);
    border-color: var(--canvas-border);
    color: var(--canvas-text);
}
body[data-theme="notte"] .oc-panel-head {
    background: rgba(255,255,255,0.03);
    border-bottom-color: var(--canvas-border);
}
body[data-theme="notte"] .oc-main-empty-title,
body[data-theme="notte"] .oc-bando-detail-title,
body[data-theme="notte"] .msg-ai-body,
body[data-theme="notte"] .oc-main-empty-title-em {
    color: var(--canvas-text);
}
body[data-theme="notte"] .oc-main-empty-title-em {
    color: var(--canvas-info);
}
body[data-theme="notte"] .message.user,
body[data-theme="notte"] .msg-user {
    background: rgba(91,141,239,0.10);
    border-color: rgba(91,141,239,0.30);
    color: var(--canvas-text);
}
body[data-theme="notte"] .callout,
body[data-theme="notte"] .retrieval-strip,
body[data-theme="notte"] .feedback-bar {
    background: rgba(255,255,255,0.04);
    border-color: var(--canvas-border);
    color: var(--canvas-text-2);
}
body[data-theme="notte"] .alert-info {
    background: rgba(91,141,239,0.10);
    border-color: rgba(91,141,239,0.30);
    color: #BFDBFE;
}
body[data-theme="notte"] .alert-warn {
    background: rgba(251,191,36,0.08);
    border-color: rgba(251,191,36,0.30);
    color: #FDE68A;
}
body[data-theme="notte"] .cite-ref {
    background: rgba(91,141,239,0.18);
    color: #BFDBFE;
}
body[data-theme="notte"] .cite-ref:hover {
    background: var(--canvas-primary);
    color: #fff;
}
body[data-theme="notte"] .cite-preview {
    background: rgba(15,31,58,0.95);
    border-color: var(--canvas-border-2);
    color: var(--canvas-text);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
body[data-theme="notte"] .cite-preview::before {
    background: rgba(15,31,58,0.95);
}
body[data-theme="notte"] .oc-composer,
body[data-theme="notte"] .composer {
    background: rgba(255,255,255,0.04);
    border-color: var(--canvas-border);
}
body[data-theme="notte"] .oc-composer textarea,
body[data-theme="notte"] .composer textarea {
    color: var(--canvas-text);
}
body[data-theme="notte"] .oc-composer textarea::placeholder { color: var(--canvas-text-4); }
body[data-theme="notte"] .oc-chip {
    background: rgba(255,255,255,0.04);
    border-color: var(--canvas-border);
    color: var(--canvas-text-2);
}
body[data-theme="notte"] .oc-chip:hover {
    background: rgba(91,141,239,0.10);
    color: var(--canvas-info);
    border-color: rgba(91,141,239,0.30);
}
body[data-theme="notte"] .oc-hx-item:hover {
    background: rgba(255,255,255,0.04);
}
body[data-theme="notte"] .oc-hx-item.active {
    background: rgba(91,141,239,0.10);
}
body[data-theme="notte"] .oc-hx-item.active .oc-hx-title {
    color: #BFDBFE;
}
/* Badge in dark */
body[data-theme="notte"] .badge-open,
body[data-theme="notte"] .oc-badge-open { background: rgba(52,211,153,0.14); color: #6EE7B7; }
body[data-theme="notte"] .badge-soon,
body[data-theme="notte"] .oc-badge-soon { background: rgba(251,191,36,0.14); color: #FDE68A; }
body[data-theme="notte"] .badge-closed,
body[data-theme="notte"] .oc-badge-closed { background: rgba(148,163,184,0.14); color: #94A3B8; }
body[data-theme="notte"] .badge-fesr,
body[data-theme="notte"] .oc-badge-fesr { background: rgba(52,211,153,0.14); color: #6EE7B7; }
body[data-theme="notte"] .badge-fse,
body[data-theme="notte"] .oc-badge-fse { background: rgba(96,165,250,0.14); color: #93C5FD; }
body[data-theme="notte"] .badge-pnrr,
body[data-theme="notte"] .oc-badge-pnrr { background: rgba(167,139,250,0.14); color: #C4B5FD; }

/* ============================================================
   SKELETON SHIMMER ANIMATION (D3 streaming)
   ============================================================ */
@keyframes oc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.oc-skel,
.skel {
    background: linear-gradient(90deg, #EEF2F5 0%, #DDE3EA 50%, #EEF2F5 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: oc-shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .oc-skel,
    .skel { animation: none; }
}

/* Alert (info/warn) */
.alert {
    border-radius: 6px;
    padding: 14px 16px;
    border: 1px solid;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    margin: 14px 0;
}
.alert-info {
    background: linear-gradient(180deg, #EFF5FB 0%, #DDE9F5 100%);
    border-color: #B3D1EC;
    color: #0C3760;
}
.alert-warn {
    background: linear-gradient(180deg, #FFF8E0 0%, #FDEDBE 100%);
    border-color: #F5D782;
    color: #7A4B00;
}

/* Callout dati bando */
.callout {
    background: linear-gradient(180deg, #F8FAFC 0%, #EDF1F5 100%);
    border: 1px solid var(--canvas-border);
    border-radius: 6px;
    padding: 14px 18px;
    margin: 14px 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.callout-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--canvas-text-3);
    margin-bottom: 8px;
}

/* Retrieval strip */
.retrieval-strip {
    background: linear-gradient(180deg, #F5F8FB 0%, #E9F0F6 100%);
    border: 1px solid var(--canvas-border);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--canvas-text-2);
    margin: 12px 0;
}

/* Feedback bar (4-button) — override legacy chat.css */
.feedback-bar {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding: 10px 14px !important;
    background: linear-gradient(180deg, #F7F9FB 0%, #EDF1F5 100%) !important;
    border: 1px solid var(--canvas-border) !important;
    border-radius: 6px !important;
    margin-top: 16px !important;
    font-size: 13px !important;
    color: var(--canvas-text-3) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.fb-btn,
.feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid var(--canvas-border);
    background: var(--canvas-bg);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--canvas-text-2);
    cursor: pointer;
    transition: all 140ms ease;
    font-family: var(--canvas-sans);
}
.fb-btn:hover,
.feedback-btn:hover {
    border-color: var(--canvas-primary);
    color: var(--canvas-primary);
    background: var(--canvas-primary-light);
}

/* Badge color canvas */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.3;
}
.badge-open { background: #D8F2E6; color: #046642; }
.badge-soon { background: #FFF4D6; color: var(--canvas-warning); }
.badge-closed { background: #E9ECEF; color: var(--canvas-text-3); }
.badge-fesr { background: #D8F2E6; color: #046642; }
.badge-fse { background: #D6E9F7; color: #004C99; }
.badge-pnrr { background: #EADDF5; color: #5B2E91; }

/* Source card grid */
.src-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}
.src-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FB 100%);
    border: 1px solid var(--canvas-border);
    border-radius: 6px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 160ms ease;
    box-shadow: 0 1px 2px rgba(23,50,77,0.03);
}
.src-card:hover {
    border-color: var(--canvas-primary);
    box-shadow: 0 4px 12px rgba(0,102,204,0.10);
}

/* Chip (suggerimenti + composer) */
.oc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #F7F9FB 0%, #EDF1F5 100%);
    font-size: 13px;
    color: var(--canvas-text-2);
    border: 1px solid var(--canvas-border);
    cursor: pointer;
    transition: all 140ms ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    font-family: var(--canvas-sans);
}
.oc-chip:hover {
    background: linear-gradient(180deg, #EDF4FB 0%, #DDE9F5 100%);
    color: var(--canvas-primary);
    border-color: #B3D1EC;
}

/* ============================================================
   8. COMPOSER CANVAS (riga 730-)
   ============================================================ */

.oc-composer-wrap {
    margin-top: auto;
    padding-top: 16px;
    padding-bottom: 24px;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0, #FFFFFF 28px);
    width: 100%;
}
/* Canvas D1 Hybrid: composer interno cap a 760 + auto-center, allinea
   col contenuto chat (msg-user/msg-ai). Lo sticky-wrap resta full-width
   per il fade gradient bg. */
.oc-composer-wrap > .oc-composer {
    max-width: 760px;
    margin: 0 auto;
}
.dossier-generate-cta,
.dossier-resume-banner {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.oc-composer {
    border: 1px solid var(--canvas-border);
    border-radius: 6px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
    transition: border-color 160ms ease, box-shadow 160ms ease;
    box-shadow: 0 1px 3px rgba(23,50,77,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}
.oc-composer:focus-within {
    border-color: var(--canvas-primary);
    box-shadow: 0 0 0 3px var(--canvas-primary-light);
}
.oc-composer textarea {
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-family: var(--canvas-sans);
    font-size: 15px;
    line-height: 1.55;
    padding: 14px 16px;
    background: transparent;
    color: var(--canvas-text);
}
.oc-composer textarea::placeholder {
    color: var(--canvas-text-4);
}
.oc-composer-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-top: 1px solid var(--canvas-border);
    gap: 12px;
}
.oc-composer-suggestions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--canvas-text-3);
}
.oc-composer-send {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    background: linear-gradient(180deg, #2A5A91 0%, #0D1F3A 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(16,40,72,0.28);
    font-family: var(--canvas-sans);
    line-height: 1.2;
}
.oc-composer-send:hover {
    background: linear-gradient(180deg, #234E76 0%, #13294B 100%);
}

/* ============================================================
   9. DOSSIER PANEL ALWAYS-ON 340px
   ============================================================ */

.oc-dossier-panel {
    background: linear-gradient(180deg, #FAFBFD 0%, #F4F5F7 100%);
    border-left: 1px solid var(--canvas-border);
    padding: 20px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 101px);
    position: sticky;
    top: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.oc-dossier-panel::-webkit-scrollbar { width: 0; display: none; }
.oc-main {
    height: calc(100vh - 101px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.oc-main::-webkit-scrollbar { width: 0; display: none; }
.oc-panel {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
    border: 1px solid var(--canvas-border);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(23,50,77,0.04);
    margin-bottom: 16px;
}
.oc-panel-head {
    background: linear-gradient(180deg, #F6F8FB 0%, #EDF1F5 100%);
    border-bottom: 1px solid var(--canvas-border);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.oc-panel-head h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--canvas-text);
    letter-spacing: -0.005em;
    margin: 0;
}
.oc-panel-body {
    padding: 4px 0;
}
.oc-panel-row {
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    border-bottom: 1px solid var(--canvas-border);
    align-items: center;
}
.oc-panel-row:last-child {
    border-bottom: none;
}
.oc-panel-row-label {
    font-size: 12px;
    color: var(--canvas-text-3);
    font-weight: 500;
}
.oc-panel-row-value {
    font-size: 13px;
    color: var(--canvas-text);
    font-weight: 500;
    text-align: right;
}
.oc-panel-row-value .missing {
    color: var(--canvas-warning);
    font-weight: 600;
}
.oc-progress {
    height: 6px;
    background: var(--canvas-bg-3);
    border-radius: 3px;
    overflow: hidden;
    margin: 12px 14px;
}
.oc-progress-fill {
    height: 100%;
    background: var(--canvas-primary);
    border-radius: 3px;
    transition: width 400ms ease;
}
.oc-panel-meta {
    padding: 6px 14px 12px;
    font-size: 11.5px;
    color: var(--canvas-text-3);
}
.oc-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    font-size: 13px;
}
.oc-check-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}
.oc-check-ok {
    background: var(--canvas-success);
    color: #fff;
}
.oc-check-pending {
    background: #FFF4D6;
    color: var(--canvas-warning);
    border: 1.5px solid var(--canvas-warning);
}

/* ============================================================
   DOSSIER PANEL D2 — hero "Completa il profilo" (visibile solo
   quando .oc-dossier-panel ha classe .oc-empty-mode). I 3 panel
   completi (Profilo/Verifica/Collegamenti) sono nascosti.
   ============================================================ */
.oc-panel-hero { display: none; }
.oc-dossier-panel.oc-empty-mode .oc-panel-hero { display: block; }
.oc-dossier-panel.oc-empty-mode #ocPanelProfilo,
.oc-dossier-panel.oc-empty-mode #ocPanelRequisiti,
.oc-dossier-panel.oc-empty-mode #ocPanelLinks { display: none; }

.oc-panel-head-meta {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--canvas-text-3);
}
.oc-panel-hero-body {
    padding: 30px 20px 22px;
    text-align: center;
}
.oc-panel-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--canvas-bg-2);
    color: var(--canvas-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.oc-panel-hero-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--canvas-text);
    margin-bottom: 6px;
}
.oc-panel-hero-sub {
    font-size: 12px;
    color: var(--canvas-text-3);
    line-height: 1.5;
    margin-bottom: 18px;
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}
.oc-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    background: transparent;
    color: var(--canvas-primary);
    border: 1px solid var(--canvas-primary);
    cursor: pointer;
    transition: all 160ms ease;
    font-family: var(--canvas-sans);
    line-height: 1.2;
}
.oc-btn-outline:hover {
    background: var(--canvas-primary-light);
}
.oc-panel-hero-cta {
    width: calc(100% - 40px);
    margin: 0 20px;
}

/* ============================================================
   DOSSIER DRAWER D5 (⌘K full-screen overlay 540px slide da dx).
   Override del Phase 3 (.dossier-panel) per match canvas fidelity:
   header bianco con icona+serif+sub+⌘K+close, tab bar bianca con
   border-bottom active, rows grid 160/1fr, footer CTA navy.
   ============================================================ */

.dossier-panel {
    width: 540px !important;
    max-width: 92vw !important;
    background: #FFFFFF !important;
    box-shadow: -16px 0 32px rgba(23,50,77,0.15), 0 0 0 1px rgba(23,50,77,0.06) !important;
    font-family: var(--canvas-sans) !important;
    color: var(--canvas-text) !important;
}

.dossier-panel-backdrop {
    background: rgba(15, 30, 51, 0.45) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* Header bianco con icona + lockup + ⌘K kbd + close */
.dossier-panel-header {
    background: linear-gradient(180deg, #FAFBFD 0%, #F4F6F9 100%) !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    padding: 16px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: var(--canvas-text) !important;
}
.dossier-panel-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.dossier-panel-title > span:first-child {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--canvas-primary-light) !important;
    color: var(--canvas-primary) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex: none;
}
.dossier-panel-title > .dossier-panel-title-text,
.dossier-panel-title > span:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}
.dossier-panel-title-main {
    font-family: var(--canvas-serif) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    color: var(--canvas-text) !important;
    line-height: 1.2 !important;
}
.dossier-panel-title-sub {
    font-size: 12px !important;
    color: var(--canvas-text-3) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}
.dossier-panel-counter {
    font-family: var(--canvas-mono) !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    background: var(--canvas-bg-2) !important;
    color: var(--canvas-text-3) !important;
    border-radius: 3px !important;
    margin-left: 8px !important;
}
.dossier-panel-close {
    color: var(--canvas-text-3) !important;
    font-size: 20px !important;
    background: transparent !important;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    transition: background 140ms ease;
}
.dossier-panel-close:hover {
    background: var(--canvas-bg-2) !important;
}

/* Tab bar bianca con active border-bottom navy */
.dossier-tabs {
    background: var(--canvas-bg) !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    padding: 0 22px !important;
    display: flex !important;
    gap: 0 !important;
}
.dossier-tab {
    padding: 12px 4px !important;
    margin-right: 22px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    color: var(--canvas-text-3) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--canvas-sans) !important;
    transition: border-color 160ms ease, color 160ms ease;
}
.dossier-tab:hover {
    color: var(--canvas-text) !important;
}
.dossier-tab.active {
    color: var(--canvas-primary) !important;
    border-bottom-color: var(--canvas-primary) !important;
    font-weight: 600 !important;
}
.dossier-tab-badge {
    font-family: var(--canvas-mono) !important;
    font-size: 10.5px !important;
    color: var(--canvas-text-3) !important;
    background: transparent !important;
    padding: 0 !important;
    margin-left: 2px;
}
.dossier-tab.active .dossier-tab-badge {
    color: var(--canvas-text-3) !important;
}

/* Body panes — section headers + rows grid 160/1fr */
.dossier-panel-body {
    background: var(--canvas-bg) !important;
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.dossier-panel-body::-webkit-scrollbar { width: 0; display: none; }

.dossier-section {
    padding: 0 !important;
    border-bottom: 1px solid var(--canvas-border) !important;
}
.dossier-section-title {
    padding: 14px 22px 8px !important;
    background: #FAFBFC !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--canvas-text-3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}
.dossier-section-count {
    font-family: var(--canvas-mono) !important;
    font-variant-numeric: tabular-nums !important;
    background: transparent !important;
    color: var(--canvas-text-3) !important;
    font-weight: 600 !important;
    margin-left: auto !important;
    font-size: 10.5px !important;
}
.dossier-section-count[data-state="complete"],
.dossier-section-count.is-complete {
    color: var(--canvas-success) !important;
}
.dossier-section-count[data-state="partial"],
.dossier-section-count.is-partial {
    color: var(--canvas-warning) !important;
}
.dossier-section-count[data-state="empty"],
.dossier-section-count.is-empty {
    color: var(--canvas-danger) !important;
}

/* Field rows: 160px label + 1fr value */
.dossier-field {
    display: grid !important;
    grid-template-columns: 160px 1fr !important;
    gap: 10px !important;
    padding: 10px 22px !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    align-items: center !important;
}
.dossier-field:last-child {
    border-bottom: none !important;
}
.dossier-field-label,
.dossier-field > label,
.dossier-field > .label {
    font-size: 12px !important;
    color: var(--canvas-text-3) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.dossier-field-value {
    font-size: 13.5px !important;
    color: var(--canvas-text) !important;
    font-weight: 500 !important;
    text-align: right !important;
    font-family: var(--canvas-sans) !important;
}
.dossier-field-value .value-text {
    color: var(--canvas-text) !important;
}
/* Campo vuoto: text "—" già nel value-text, ma se text è solo "—" lo
   mostro come placeholder text-3 italics. */
.dossier-field.is-empty .dossier-field-value .value-text {
    color: var(--canvas-warning) !important;
    font-weight: 500 !important;
}
/* Input editabile: hidden di default, visibile solo quando .is-editing */
.dossier-field-edit,
.dossier-field input.dossier-field-edit {
    display: none !important;
    font-family: var(--canvas-sans) !important;
}
.dossier-field.is-editing .dossier-field-value { display: none !important; }
.dossier-field.is-editing .dossier-field-edit,
.dossier-field.is-editing input.dossier-field-edit {
    display: block !important;
    width: 100% !important;
    font-size: 13.5px !important;
    color: var(--canvas-text) !important;
    background: #fff !important;
    border: 1.5px solid var(--canvas-primary) !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--canvas-primary-light) !important;
}
.dossier-field-error {
    display: none;
}
.dossier-field.is-error .dossier-field-error {
    display: block;
    color: var(--canvas-danger);
    font-size: 11.5px;
    margin-top: 4px;
    grid-column: 1 / -1;
}
.dossier-field-value .missing {
    color: var(--canvas-warning) !important;
    font-weight: 500 !important;
}

/* Footer drawer: progress + CTA "Continua il profilo →" canvas D5 */
.dossier-eligibility-footer {
    background: linear-gradient(180deg, #FAFBFD 0%, #F4F6F9 100%) !important;
    border-top: 1px solid var(--canvas-border) !important;
    padding: 14px 22px !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dossier-eligibility-footer-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px;
    color: var(--canvas-text-3);
}
.dossier-eligibility-footer-label {
    font-size: 12px !important;
    color: var(--canvas-text-3) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.dossier-eligibility-footer-score {
    color: var(--canvas-primary) !important;
    font-weight: 600 !important;
    font-family: var(--canvas-mono) !important;
    font-size: 13px;
}
.dossier-eligibility-refresh {
    background: transparent;
    border: none;
    color: var(--canvas-text-3);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
}
.dossier-eligibility-refresh:hover {
    background: var(--canvas-bg-2);
}
.dossier-eligibility-content,
#dossierEligibilityContent {
    display: none;
}
.dossier-footer-progress {
    height: 6px;
    background: var(--canvas-bg-3);
    border-radius: 3px;
    overflow: hidden;
}
.dossier-footer-progress-fill {
    height: 100%;
    background: var(--canvas-primary);
    border-radius: 3px;
    transition: width 400ms ease;
}
.dossier-footer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px 18px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    background: linear-gradient(180deg, #2A5A91 0%, #0D1F3A 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(16,40,72,0.28);
    font-family: var(--canvas-sans);
    line-height: 1.2;
    margin-top: 4px;
}
.dossier-footer-cta:hover {
    background: linear-gradient(180deg, #234E76 0%, #13294B 100%);
}
.dossier-footer-kbd {
    font-family: var(--canvas-mono);
    font-size: 11px;
    color: var(--canvas-text-3);
    background: var(--canvas-bg-2);
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
}

/* ============================================================
   D6a/b PREPARA DOMANDA MODAL (Phase 4 + Canvas D6 fidelity 16/05).
   Override del Phase 4 (.oc-prep-*) — modal 720x580 centrato, header
   bianco con icona stato + serif title + sub, footer fisso con meta
   mono left + bottoni right (Apri portale outline + Scarica PDF bozza primary).
   Loading: progress bar grossa + 4-step canvas + alert info.
   Done: grid 1fr 280 (PDF preview | checklist allegati).
   ============================================================ */

.oc-prep-backdrop {
    background: rgba(15, 30, 51, 0.45) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.oc-prep-modal {
    width: 720px !important;
    max-width: 94vw !important;
    height: 580px !important;
    max-height: 92vh !important;
    background: #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: 0 24px 64px rgba(23,50,77,0.20), 0 0 0 1px rgba(23,50,77,0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    font-family: var(--canvas-sans) !important;
    color: var(--canvas-text) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

/* Header */
.oc-prep-header {
    background: var(--canvas-bg) !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    padding: 14px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex: none !important;
}
.oc-prep-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0;
}
.oc-prep-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.oc-prep-icon-loading {
    background: var(--canvas-primary-light);
    color: var(--canvas-primary);
}
.oc-prep-icon-done {
    background: #D8F2E6;
    color: var(--canvas-success);
}
/* state toggle: loading visibile in loading, done visibile in done */
.oc-prep-modal.oc-prep-state-loading .oc-prep-icon-done,
.oc-prep-modal.oc-prep-state-loading .oc-prep-title-done,
.oc-prep-modal.oc-prep-state-loading .oc-prep-meta-done,
.oc-prep-modal.oc-prep-state-loading .oc-prep-cta-outline,
.oc-prep-modal.oc-prep-state-loading .oc-prep-cta-primary,
.oc-prep-modal.oc-prep-state-loading .oc-prep-result {
    display: none !important;
}
.oc-prep-modal.oc-prep-state-done .oc-prep-icon-loading,
.oc-prep-modal.oc-prep-state-done .oc-prep-title-loading,
.oc-prep-modal.oc-prep-state-done .oc-prep-meta-loading,
.oc-prep-modal.oc-prep-state-done .oc-prep-cta-cancel,
.oc-prep-modal.oc-prep-state-done .oc-prep-loading {
    display: none !important;
}

.oc-prep-header-text { min-width: 0; }
.oc-prep-title {
    font-family: var(--canvas-serif) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: var(--canvas-text) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}
.oc-prep-subtitle {
    font-size: 12px !important;
    color: var(--canvas-text-3) !important;
    margin-top: 2px !important;
    font-family: var(--canvas-sans) !important;
}
.oc-prep-close {
    color: var(--canvas-text-3) !important;
    font-size: 22px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    line-height: 1;
}
.oc-prep-close:hover { background: var(--canvas-bg-2) !important; }

/* Body container */
.oc-prep-loading,
.oc-prep-result {
    flex: 1 !important;
    overflow-y: auto !important;
    /* Canvas CD: px-10 py-7 = 40 28 */
    padding: 28px 40px !important;
    background: var(--canvas-bg) !important;
}
.oc-prep-loading::-webkit-scrollbar,
.oc-prep-result::-webkit-scrollbar { width: 0; display: none; }
.oc-prep-loading {
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex !important;
    flex-direction: column !important;
    /* Canvas CD: gap-5 = 20 */
    gap: 20px;
}

/* Progress bar header — Canvas CD pattern: text-[12px] mb-2 */
.oc-prep-loading-prog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--canvas-text-3);
    margin-bottom: 8px;
}
.oc-prep-loading-prog-pct {
    font-family: var(--canvas-mono) !important;
    color: var(--canvas-primary) !important;
    font-weight: 600;
}
/* Canvas CD: progress-thick 8px height, gradient horizontal accent→primary */
.oc-prep-progress {
    height: 8px !important;
    background: var(--canvas-bg-3) !important;
    border-radius: 4px !important;
    overflow: hidden;
}
.oc-prep-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #2A5A91 0%, #0D1F3A 100%) !important;
    border-radius: 4px !important;
    transition: width 400ms ease;
}

/* Steps — Canvas CD pattern: gap-3 = 12 */
.oc-prep-steps {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.oc-prep-step {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 14px !important;
    color: var(--canvas-text-3) !important;
}
.oc-prep-step-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    background: #fff !important;
    color: var(--canvas-text-4) !important;
    border: 1.5px solid var(--canvas-border-2) !important;
}
.oc-prep-step[data-status="done"] .oc-prep-step-icon,
.oc-prep-step.is-done .oc-prep-step-icon {
    background: var(--canvas-success) !important;
    color: #fff !important;
    border-color: var(--canvas-success);
}
.oc-prep-step[data-status="done"] .oc-prep-step-icon::after,
.oc-prep-step.is-done .oc-prep-step-icon::after { content: "\2713"; }
.oc-prep-step[data-status="doing"] .oc-prep-step-icon,
.oc-prep-step.is-doing .oc-prep-step-icon {
    background: var(--canvas-primary) !important;
    color: #fff !important;
    border-color: var(--canvas-primary);
    animation: oc-prep-pulse 1.6s ease-in-out infinite;
}
.oc-prep-step[data-status="doing"] .oc-prep-step-icon::after,
.oc-prep-step.is-doing .oc-prep-step-icon::after { content: "\23F3"; font-size: 9px; }
@keyframes oc-prep-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
    .oc-prep-step[data-status="doing"] .oc-prep-step-icon,
    .oc-prep-step.is-doing .oc-prep-step-icon { animation: none; }
}
.oc-prep-step[data-status="doing"] .oc-prep-step-label,
.oc-prep-step.is-doing .oc-prep-step-label {
    color: var(--canvas-text) !important;
    font-weight: 600 !important;
}
.oc-prep-step-label {
    flex: 1 !important;
    font-size: 14px !important;
    color: inherit !important;
}
.oc-prep-step-status {
    font-family: var(--canvas-mono) !important;
    font-size: 11px !important;
    color: var(--canvas-text-3) !important;
    margin-left: auto !important;
}
.oc-prep-step[data-status="doing"] .oc-prep-step-status,
.oc-prep-step.is-doing .oc-prep-step-status {
    color: var(--canvas-primary) !important;
}

/* Banner alert */
.oc-prep-banner-info {
    background: linear-gradient(180deg, #EFF5FB 0%, #DDE9F5 100%) !important;
    border: 1px solid #B3D1EC !important;
    color: #0C3760 !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-top: auto !important;
}
.oc-prep-banner-success {
    background: linear-gradient(180deg, #E8F7EE 0%, #D8F2E6 100%) !important;
    border: 1px solid #B8DDC7 !important;
    color: #046642 !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    margin-bottom: 14px !important;
}
.oc-prep-banner-icon {
    color: inherit !important;
    flex: none !important;
}
.oc-prep-banner-icon svg { display: block; }

/* Done state grid 1fr 280 */
.oc-prep-result {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.oc-prep-result-grid {
    display: grid !important;
    grid-template-columns: 1fr 280px !important;
    gap: 22px !important;
    flex: 1 !important;
    min-height: 0;
    align-items: stretch;
}
.oc-prep-pdf-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.oc-prep-pdf-label { display: none; } /* sostituito da header serif modal */
.oc-prep-pdf-frame-wrap {
    flex: 1 !important;
    background: linear-gradient(180deg, #FAFBFD 0%, #F1F4F7 100%) !important;
    border: 1px solid var(--canvas-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 280px;
}
.oc-prep-pdf-frame {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
}
.oc-prep-pdf-loading {
    position: absolute !important;
    inset: 0 !important;
    padding: 24px 28px !important;
    font-family: var(--canvas-sans) !important;
    color: var(--canvas-text-2) !important;
    font-size: 11px !important;
    line-height: 1.65 !important;
    overflow: hidden;
}
/* Canvas D6b PDF preview placeholder — serif title + det + skeleton lines */
.oc-prep-pdf-preview {
    position: relative;
    height: 100%;
}
.oc-prep-pdf-preview-title {
    font-family: var(--canvas-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--canvas-text) !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.oc-prep-pdf-preview-det {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--canvas-text-3);
    margin-bottom: 14px;
    font-family: var(--canvas-sans);
}
.oc-prep-pdf-skel {
    height: 8px;
    background: linear-gradient(90deg, #E5EAF1 0%, #D9DEE3 50%, #E5EAF1 100%);
    border-radius: 3px;
    margin-bottom: 8px;
    opacity: 0.85;
}
.oc-prep-pdf-skel-1 { width: 60%; }
.oc-prep-pdf-skel-2 { width: 88%; }
.oc-prep-pdf-skel-3 { width: 74%; }
.oc-prep-pdf-skel-4 { width: 92%; }
.oc-prep-pdf-skel-5 { width: 78%; }
.oc-prep-pdf-skel-6 { width: 96%; }
.oc-prep-pdf-skel-7 { width: 88%; }
.oc-prep-pdf-section {
    font-weight: 700;
    color: var(--canvas-text);
    margin: 14px 0 6px;
    font-family: var(--canvas-sans);
    font-size: 11px;
}
.oc-prep-pdf-page {
    position: absolute;
    bottom: 14px;
    right: 18px;
    font-size: 10px;
    color: var(--canvas-text-4);
    font-family: var(--canvas-sans);
}

/* Canvas D6b: warning yellow per campi mancanti placeholder */
.oc-prep-missing-warn {
    margin-top: 12px;
    padding: 10px 12px;
    background: #FFF4D6;
    color: #7A4B00;
    border-radius: 4px;
    font-size: 11.5px;
    line-height: 1.5;
}
.oc-prep-missing-warn strong {
    color: #7A4B00;
    font-weight: 700;
}

.oc-prep-allegati-col {
    display: flex;
    flex-direction: column;
}
.oc-prep-allegati-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--canvas-text-3) !important;
    margin-bottom: 8px !important;
}
.oc-prep-allegati-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.oc-prep-allegati-list li,
.oc-prep-allegati-list .oc-prep-allegato {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    color: var(--canvas-text) !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
.oc-prep-allegati-list li::before {
    content: "\2713";
    color: var(--canvas-success);
    font-weight: 700;
    font-size: 13px;
}

/* Footer */
.oc-prep-footer {
    background: linear-gradient(180deg, #FAFBFD 0%, #F4F6F9 100%) !important;
    border-top: 1px solid var(--canvas-border) !important;
    padding: 12px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    flex: none !important;
}
.oc-prep-footer-meta {
    font-family: var(--canvas-mono) !important;
    font-size: 11.5px !important;
    color: var(--canvas-text-4) !important;
}
.oc-prep-footer-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.oc-prep-cta-cancel {
    padding: 6px 14px;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: var(--canvas-danger) !important;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--canvas-sans);
    cursor: pointer;
}
.oc-prep-cta-cancel:hover { background: rgba(204, 51, 77, 0.06); }
.oc-prep-cta-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 4px;
    background: transparent;
    color: var(--canvas-primary) !important;
    border: 1px solid var(--canvas-primary);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    font-family: var(--canvas-sans);
    line-height: 1.2;
    cursor: pointer;
}
.oc-prep-cta-outline:hover { background: var(--canvas-primary-light); }
.oc-prep-cta-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #2A5A91 0%, #0D1F3A 100%) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    font-family: var(--canvas-sans) !important;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(16,40,72,0.28);
    cursor: pointer;
    margin: 0 !important;
    width: auto !important;
}
.oc-prep-cta-primary:hover {
    background: linear-gradient(180deg, #234E76 0%, #13294B 100%) !important;
}
/* 2026-06-16: stato disabilitato CTA footer D6 (portale/download non ancora
   pronti o assenti) — evita che un click su href="#" salti in cima alla pagina. */
.oc-prep-cta-outline[aria-disabled="true"],
.oc-prep-cta-primary[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

/* ============================================================
   D9 WIZARD ONBOARDING (Phase 5 + Canvas D9 fidelity 16/05).
   Override del Phase 5 (.oc-ob-*) — overlay full-screen bg navy
   gradient, top bar bianco con brand-lockup glass + counter serif +
   6 dots progress + skip white, card centrale 560 bianca con eyebrow
   primary uppercase + serif title 28 + sub + step body + Indietro/Continua.
   ============================================================ */

.oc-ob-backdrop {
    background: radial-gradient(ellipse at 30% 10%, #1F4778 0%, #08122A 50%, #0B1F36 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000;
}
.oc-ob-modal {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-family: var(--canvas-sans) !important;
}

/* Top bar fixed top, color white, padding 24 36 */
.oc-ob-topbar {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    padding: 24px 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #fff !important;
    gap: 24px;
    background: transparent !important;
    border-bottom: none !important;
}

.oc-ob-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}
.oc-ob-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.2);
    font-family: var(--canvas-sans);
}
.oc-ob-brand-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.1;
}
.oc-ob-brand-sub {
    font-size: 11.5px;
    color: rgba(255,255,255,0.65);
    margin-top: 2px;
}

.oc-ob-progress {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1;
    justify-content: center;
    color: #fff;
}
.oc-ob-progress-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.65);
}
.oc-ob-counter {
    font-family: var(--canvas-serif) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #fff !important;
    background: transparent !important;
    padding: 0 !important;
}
.oc-ob-dots {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: 8px;
}
.oc-ob-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.20) !important;
    flex: none;
    transition: background 200ms ease, transform 200ms ease;
}
.oc-ob-dot-done,
.oc-ob-dot.done,
.oc-ob-dot[data-state="done"] {
    background: rgba(255,255,255,0.55) !important;
}
.oc-ob-dot-active,
.oc-ob-dot.active,
.oc-ob-dot[data-state="active"] {
    background: #fff !important;
    width: 24px !important;
    border-radius: 4px !important;
}

.oc-ob-skip {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.75) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    font-family: var(--canvas-sans) !important;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 160ms ease;
}
.oc-ob-skip:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
}

/* Card 560 centrale */
.oc-ob-card {
    width: 560px !important;
    max-width: 92vw !important;
    background: #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.25), 0 0 0 1px rgba(23,50,77,0.06) !important;
    padding: 32px 36px !important;
    margin: 0 !important;
    color: var(--canvas-text) !important;
}

.oc-ob-eyebrow {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--canvas-primary) !important;
    margin-bottom: 10px !important;
}
.oc-ob-step-title {
    font-family: var(--canvas-serif) !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.2 !important;
    color: var(--canvas-text) !important;
    margin: 0 0 8px 0 !important;
}
.oc-ob-step-subtitle {
    font-size: 14px !important;
    color: var(--canvas-text-2) !important;
    line-height: 1.5 !important;
    margin: 0 0 24px 0 !important;
}
.oc-ob-step-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.oc-ob-step-body::-webkit-scrollbar { width: 0; display: none; }

/* Option cards (canvas wizard-opt): icon + title + sub + ✓ on selected */
.oc-ob-option,
.oc-ob-step-body button {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border: 1px solid var(--canvas-border) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 160ms ease !important;
    text-align: left !important;
    font-family: var(--canvas-sans) !important;
    color: var(--canvas-text) !important;
    margin: 0 !important;
}
.oc-ob-option:hover,
.oc-ob-step-body button:hover {
    border-color: var(--canvas-primary-light) !important;
    background: #FAFBFD !important;
}
.oc-ob-option.is-selected,
.oc-ob-option.selected,
.oc-ob-option.oc-ob-option-active,
.oc-ob-step-body button.is-selected,
.oc-ob-step-body button.selected,
.oc-ob-step-body button.oc-ob-option-active {
    border-color: var(--canvas-primary) !important;
    background: var(--canvas-primary-light) !important;
}
.oc-ob-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--canvas-bg-2);
    color: var(--canvas-text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
.oc-ob-option.is-selected .oc-ob-option-icon,
.oc-ob-option.selected .oc-ob-option-icon {
    background: var(--canvas-primary);
    color: #fff;
}
.oc-ob-option-text {
    flex: 1;
    min-width: 0;
}
.oc-ob-option-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--canvas-text);
    line-height: 1.3;
}
.oc-ob-option-sub {
    font-size: 12px;
    color: var(--canvas-text-3);
    margin-top: 2px;
}
.oc-ob-option-check {
    color: var(--canvas-primary);
    flex: none;
    display: none;
}
.oc-ob-option.is-selected .oc-ob-option-check,
.oc-ob-option.selected .oc-ob-option-check {
    display: flex;
}

.oc-ob-step-error {
    background: linear-gradient(180deg, #FCE7EC 0%, #F8D6DE 100%);
    border: 1px solid #F0B5C0;
    color: var(--canvas-danger);
    padding: 10px 14px;
    border-radius: 6px;
    margin-top: 12px;
    font-size: 13px;
}

/* Footer del card */
.oc-ob-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 28px !important;
    padding-top: 24px !important;
    border-top: 1px solid var(--canvas-border) !important;
    background: transparent !important;
}
.oc-ob-btn-back {
    background: transparent !important;
    border: none !important;
    color: var(--canvas-text-2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--canvas-sans) !important;
}
.oc-ob-btn-back:hover {
    background: var(--canvas-bg-2) !important;
    color: var(--canvas-text) !important;
}
.oc-ob-btn-back[disabled],
.oc-ob-btn-back:disabled,
.oc-ob-btn-back.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.oc-ob-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 20px !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #2A5A91 0%, #0D1F3A 100%) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    font-family: var(--canvas-sans) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(16,40,72,0.28);
    transition: background 160ms ease;
}
.oc-ob-btn-primary:hover {
    background: linear-gradient(180deg, #234E76 0%, #13294B 100%) !important;
}
.oc-ob-btn-primary[disabled],
.oc-ob-btn-primary:disabled {
    background: var(--canvas-bg-3) !important;
    color: var(--canvas-text-4) !important;
    cursor: not-allowed;
    box-shadow: none;
}

/* ============================================================
   D7 FILTRI ATTIVI (canvas D7 fidelity 16/05).
   Sidebar mostra sezione "Filtri attivi" sopra la cronologia con
   chip-removable. Aggiunta dinamicamente da JS quando l'utente
   imposta filtri (status/fondo/destinatari/settori).
   ============================================================ */

.oc-sidebar-filters {
    padding: 0 8px 12px 8px;
    border-bottom: 1px solid var(--canvas-border);
    margin-bottom: 12px;
}
.oc-sidebar-filters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 8px;
}
.oc-sidebar-filters-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--canvas-primary);
}
.oc-sidebar-filters-clear {
    background: transparent;
    border: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--canvas-text-3);
    cursor: pointer;
    font-family: var(--canvas-sans);
    padding: 2px 4px;
    border-radius: 3px;
}
.oc-sidebar-filters-clear:hover {
    color: var(--canvas-danger);
    background: rgba(204,51,77,0.06);
}
.oc-sidebar-filters-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Chip removable (canvas style: pill + × tondo dentro) */
.oc-chip-removable {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 10px;
    border-radius: 14px;
    background: linear-gradient(180deg, #F7F9FB 0%, #EDF1F5 100%);
    border: 1px solid var(--canvas-border);
    font-size: 12px;
    color: var(--canvas-text-2);
    cursor: default;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    font-family: var(--canvas-sans);
    line-height: 1.2;
    transition: all 140ms ease;
}
.oc-chip-removable:hover {
    border-color: var(--canvas-primary);
    color: var(--canvas-primary);
}
.oc-chip-removable-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(23,50,77,0.06);
    color: var(--canvas-text-3);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    transition: background 140ms ease, color 140ms ease;
}
.oc-chip-removable-x:hover {
    background: rgba(204,51,77,0.12);
    color: var(--canvas-danger);
}
.oc-chip-removable.is-status { background: linear-gradient(180deg, #E8F5EB 0%, #D8F2E6 100%); border-color:#B8DDC7; color:#046642; }
.oc-chip-removable.is-region { background: linear-gradient(180deg, #EFF5FB 0%, #DDE9F5 100%); border-color:#B3D1EC; color:#0C3760; }
.oc-chip-removable.is-amount { background: linear-gradient(180deg, #FFF8E0 0%, #FDEDBE 100%); border-color:#F5D782; color:#7A4B00; }
.oc-chip-removable.is-target { background: linear-gradient(180deg, #F4E8F5 0%, #EADDF5 100%); border-color:#D4B3E0; color:#5B2E91; }

/* Sezione cronologia header con counter "X / Y" */
.oc-sidebar-section-head-count {
    font-family: var(--canvas-mono);
    font-size: 11px;
    color: var(--canvas-text-4);
}

/* ============================================================
   D9 L2 CHAIN WIZARD (canvas fidelity 16/05).
   L2 wizard step-by-step bando-specifico (oraculum-wizard.js) —
   apre via "Genera bozza" + chiede domande_validazione_cittadino[]
   del bando target → POST /api/dossier/generate-pdf-personalized.
   Override classi legacy .wizard-* → mappa allo shell D9 (bg navy
   full-screen + card centrale 560 bianca + footer Indietro/Continua).
   ============================================================ */

#wizardDrawer,
.wizard-drawer,
.wizard-container,
[id*="wizardOverlay"] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.wizard-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at 30% 10%, #1F4778 0%, #08122A 50%, #0B1F36 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    cursor: pointer;
}

.wizard-panel {
    position: relative !important;
    /* Reset positional legacy props (era top:480 left:640 transform:translate(-300,-190) per fake-center) */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 600px !important;
    max-width: 92vw !important;
    max-height: 86vh !important;
    background: #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.30), 0 0 0 1px rgba(23,50,77,0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    color: var(--canvas-text) !important;
    font-family: var(--canvas-sans) !important;
    overflow: hidden !important;
    margin: 0 !important;
}

/* Canvas D9 immersive topbar (16/05) — brand-lockup left + progress center + skip right.
   Posizionato FUORI dal panel, top fixed full-width per immersione totale. */
.wizard-topbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    padding: 24px 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #fff !important;
    gap: 24px;
    background: transparent !important;
    z-index: 1001;
    pointer-events: auto;
}
.wizard-topbar-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}
.wizard-topbar-mark {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.01em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.2);
    font-family: var(--canvas-sans);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.wizard-topbar-brand-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
    line-height: 1.1;
}
.wizard-topbar-brand-sub {
    font-size: 11.5px;
    color: rgba(255,255,255,0.65);
    margin-top: 2px;
}
.wizard-topbar-progress {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1;
    justify-content: center;
    color: #fff;
}
.wizard-topbar-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.65);
}
/* Step indicator riposizionato nel topbar: serif white grosso */
.wizard-step-indicator-topbar,
.wizard-topbar .wizard-step-indicator {
    font-family: var(--canvas-serif) !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #fff !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wizard-topbar-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}
.wizard-topbar-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.20);
    flex: none;
    transition: background 200ms ease, transform 200ms ease, width 200ms ease;
}
.wizard-topbar-dot.done {
    background: rgba(255,255,255,0.55);
}
.wizard-topbar-dot.active {
    background: #fff;
    width: 24px;
    border-radius: 4px;
}
.wizard-topbar-skip {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--canvas-sans);
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 160ms ease, background 160ms ease;
}
.wizard-topbar-skip:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
/* Quando topbar è presente, il panel deve lasciare spazio (top ~90px) */
.wizard-drawer:has(.wizard-topbar) .wizard-panel {
    margin-top: 60px !important;
}
/* Nascondi step indicator legacy nel header del panel (è ora nel topbar) */
.wizard-panel > .wizard-header {
    display: none !important;
}
/* Aggiungi close X come floating button in alto a destra del panel (canvas pattern) */
.wizard-panel::before {
    /* spacer top per visivamente separare panel da topbar */
    content: '';
    display: block;
    height: 0;
}

/* Header: bianco con icona + serif title + step indicator + close */
.wizard-header {
    background: linear-gradient(180deg, #FAFBFD 0%, #F4F6F9 100%) !important;
    border-bottom: 1px solid var(--canvas-border) !important;
    padding: 14px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    color: var(--canvas-text) !important;
    border-radius: 0 !important;
}
.wizard-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: var(--canvas-serif) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    color: var(--canvas-text) !important;
}
.wizard-step-indicator {
    font-family: var(--canvas-mono) !important;
    font-size: 11px !important;
    background: var(--canvas-bg-2) !important;
    color: var(--canvas-text-3) !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-left: auto !important;
    margin-right: 8px;
}
.wizard-close {
    background: transparent !important;
    border: none !important;
    color: var(--canvas-text-3) !important;
    font-size: 22px !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 !important;
    margin: 0 !important;
}
.wizard-close:hover { background: var(--canvas-bg-2) !important; }

/* Body scrollabile, padding canvas */
.wizard-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 24px 28px !important;
    background: var(--canvas-bg) !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.wizard-body::-webkit-scrollbar { width: 0; display: none; }

/* Intro card (bando target) */
.wizard-intro {
    margin-bottom: 0 !important;
}
.wizard-target-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 18px !important;
    background: linear-gradient(180deg, #E8F5EB 0%, #D8F2E6 100%) !important;
    border: 1px solid #B8DDC7 !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.wizard-target-check {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: var(--canvas-success) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    flex: none !important;
    box-shadow: 0 1px 2px rgba(4,102,66,0.25) !important;
}
.wizard-target-body { flex: 1; min-width: 0; }
.wizard-target-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: #046642 !important;
    margin-bottom: 4px !important;
}
.wizard-target-title {
    font-family: var(--canvas-serif) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: var(--canvas-text) !important;
    margin: 3px 0 0 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.wizard-target-fit {
    display: inline-block !important;
    margin-left: 6px !important;
    font-family: var(--canvas-mono) !important;
    font-size: 11px !important;
    color: #046642 !important;
    background: rgba(0,128,85,0.10) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}
.wizard-target-sub,
.wizard-target-desc,
.wizard-target-body p {
    font-size: 13px !important;
    color: #046642 !important;
    line-height: 1.5 !important;
    margin: 6px 0 0 0 !important;
}

/* Alt-details (bandi alternativi) — Canvas CD pattern: text-only summary
   con caret animato, lista option-card sotto (visibile quando open). */
.wizard-alt-details {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    margin-top: 6px !important;
}
.wizard-alt-details summary {
    cursor: pointer;
    color: var(--canvas-primary) !important;
    font-weight: 600;
    font-size: 13.5px;
    list-style: none;
    outline: none;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wizard-alt-details summary::-webkit-details-marker { display: none; }
.wizard-alt-details summary::before {
    content: "▸";
    font-size: 12px;
    color: var(--canvas-primary);
    transition: transform 160ms ease;
    display: inline-block;
}
.wizard-alt-details[open] summary::before {
    transform: rotate(90deg);
}
.wizard-alt-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wizard-alt-loading {
    font-size: 12.5px;
    color: var(--canvas-text-3);
    font-style: italic;
}

/* Step body — domanda corrente */
.wizard-step,
.wizard-question,
.wizard-intro {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.wizard-eyebrow,
.wizard-step-eyebrow,
.wizard-question-eyebrow {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--canvas-primary) !important;
    margin-bottom: 6px !important;
}
.wizard-step-title,
.wizard-question-title,
.wizard-body h2,
.wizard-body h3 {
    font-family: var(--canvas-serif) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
    color: var(--canvas-text) !important;
    margin: 0 0 6px 0 !important;
}
.wizard-step-sub,
.wizard-question-sub,
.wizard-body > p,
.wizard-intro > p {
    font-size: 14px !important;
    color: var(--canvas-text-2) !important;
    line-height: 1.5 !important;
    margin: 0 0 18px 0 !important;
}

/* Canvas D9 option cards per il wizard L2 (si/no e scelta singola).
   Identico pattern al canvas D9: icon left + text center + ✓ right. */
.wizard-option-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 8px;
}
.wizard-option-card {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border: 1.5px solid var(--canvas-border) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 160ms ease !important;
    text-align: left !important;
    font-family: var(--canvas-sans) !important;
    color: var(--canvas-text) !important;
}
.wizard-option-card:hover {
    border-color: var(--canvas-primary-light) !important;
    background: #FAFBFD !important;
}
.wizard-option-card.is-selected {
    border-color: var(--canvas-primary) !important;
    background: var(--canvas-primary-light) !important;
}
.wizard-option-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    background: var(--canvas-bg-2) !important;
    color: var(--canvas-text-3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
}
.wizard-option-card.is-selected .wizard-option-icon {
    background: var(--canvas-primary) !important;
    color: #fff !important;
}
.wizard-option-text {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.wizard-option-title {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--canvas-text) !important;
    line-height: 1.3 !important;
}
.wizard-option-sub {
    font-size: 12px !important;
    color: var(--canvas-text-3) !important;
}
.wizard-option-check {
    color: var(--canvas-primary) !important;
    flex: none !important;
    display: none !important;
}
.wizard-option-card.is-selected .wizard-option-check {
    display: flex !important;
}

/* Criticità bloccante badge inline accanto al titolo step */
.wizard-crit-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-family: var(--canvas-sans) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    line-height: 1.4 !important;
    margin-left: 8px !important;
    vertical-align: 4px !important;
}
.wizard-crit-blocking {
    background: linear-gradient(180deg, #FFF8E0 0%, #FDEDBE 100%) !important;
    color: #7A4B00 !important;
    border: 1px solid #F5D782 !important;
}

/* Input + select + textarea */
.wizard-body input[type="text"],
.wizard-body input[type="number"],
.wizard-body input[type="email"],
.wizard-body input[type="tel"],
.wizard-body input[type="date"],
.wizard-body select,
.wizard-body textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--canvas-border) !important;
    border-radius: 6px !important;
    background: #fff !important;
    font-size: 14px !important;
    color: var(--canvas-text) !important;
    font-family: var(--canvas-sans) !important;
    outline: none !important;
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
}
.wizard-body input:focus,
.wizard-body select:focus,
.wizard-body textarea:focus {
    border-color: var(--canvas-primary) !important;
    box-shadow: 0 0 0 3px var(--canvas-primary-light) !important;
}

/* Footer: prev / next / submit */
.wizard-footer {
    background: linear-gradient(180deg, #FAFBFD 0%, #F4F6F9 100%) !important;
    border-top: 1px solid var(--canvas-border) !important;
    padding: 14px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex: none !important;
}
.wizard-btn {
    /* display senza !important per permettere style="display:none" inline (toggle via JS) */
    display: inline-flex;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: var(--canvas-sans) !important;
    line-height: 1.2 !important;
    transition: all 140ms ease !important;
    border: 1px solid transparent !important;
}
.wizard-btn[style*="display: none"],
.wizard-btn[style*="display:none"] {
    display: none !important;
}
.wizard-btn-prev {
    background: transparent !important;
    color: var(--canvas-text-2) !important;
    border-color: transparent !important;
}
.wizard-btn-prev:hover {
    background: var(--canvas-bg-2) !important;
    color: var(--canvas-text) !important;
}
.wizard-btn-prev[disabled],
.wizard-btn-prev:disabled,
.wizard-btn.disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.wizard-btn-next {
    background: linear-gradient(180deg, #2A5A91 0%, #0D1F3A 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(16,40,72,0.28) !important;
    margin-left: auto !important;
}
.wizard-btn-next:hover {
    background: linear-gradient(180deg, #234E76 0%, #13294B 100%) !important;
}
.wizard-btn-next[disabled],
.wizard-btn-next:disabled {
    background: var(--canvas-bg-3) !important;
    color: var(--canvas-text-4) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}
.wizard-btn-submit {
    background: linear-gradient(180deg, #008055 0%, #046642 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(4,102,66,0.28) !important;
    margin-left: auto !important;
}
.wizard-btn-submit:hover {
    background: linear-gradient(180deg, #007048 0%, #035636 100%) !important;
}
.wizard-btn-submit[disabled],
.wizard-btn-submit:disabled {
    background: var(--canvas-bg-3) !important;
    color: var(--canvas-text-4) !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* ============================================================
   10. SHIM per chat-container e welcome legacy (resi compatibili
       con grid layout — chat live appare nel main column)
   ============================================================ */

.page-stage {
    display: contents !important; /* trasparente al grid */
}
.chat-container {
    flex: 1;
    display: block;
    padding: 0;
    background: transparent;
    box-shadow: none;
    max-width: none;
    margin: 0;
    overflow: visible;
}
.welcome {
    display: none !important; /* sostituito da .oc-main-empty */
}
.dossier-resume-banner {
    margin: 0 0 16px 0;
}

/* CTA Genera bozza: nascosta quando aria-hidden=true (default a 0%).
   JS oraculum-dossier.js toggla aria-hidden quando il dossier supera la soglia. */
.dossier-generate-cta[aria-hidden="true"] {
    display: none !important;
}
.dossier-generate-cta {
    margin: 0 0 16px 0;
    padding: 0;
}
.dossier-generate-cta-btn {
    background: linear-gradient(180deg, #2A5A91 0%, #0D1F3A 100%) !important;
    color: #fff !important;
    border-radius: 4px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(16,40,72,0.28) !important;
}

/* Input-area legacy → display:none (rimpiazzata da .oc-composer-wrap) */
.input-area { display: none !important; }

/* Stats (chunks indicizzati) — sposto/integro nel corpus-pill */
#stats { display: none !important; }

/* ============================================================
   11. FOCUS-VISIBLE GLOBALE CANVAS
   ============================================================ */
*:focus-visible {
    outline: 3px solid var(--canvas-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ============================================================
   12. RESPONSIVE DESKTOP — fidelity canvas Claude Design.
   Spec canvas: grid 264/1fr/340 fisso, capped a max-width 1440.
   Nessun collapse intermedio in desktop: sidebar e dossier sempre
   visibili a 264/340. Solo a <=640px (mobile) si collassa a 1-col.
   Il body gradient si estende oltre 1440 perché .oc-shell è capped
   ma il `<body>` no.
   ============================================================ */

/* Mobile <=640px — collapse fino a 1-col (allinea Phase 6 mobile) */
@media (max-width: 640px) {
    .oc-shell {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .oc-sidebar,
    .oc-dossier-panel { display: none; }
    .oc-main {
        padding: 16px 16px 80px;
        height: auto;
        overflow: visible;
    }
    .oc-search-wrap { display: none; }
    .oc-corpus-pill { display: none; }
    .oc-brand-pipe { display: none; }
    .oc-user-info { display: none; }
    .oc-main-empty-cards {
        grid-template-columns: 1fr;
    }
    .oc-app-header-inner,
    .oc-gov-strip-inner {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* GAP #84: cite-preview mobile responsive */
    .cite-preview {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        bottom: 80px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 100;
    }
    .cite-preview::before { display: none; }
}