/* --- START OF FILE css/agentv2_theme.css --- */
/*
 * Tema pagina "Magistralis AI" (Chat 3 / agent_v2).
 * Valori conformi a docs/MAGISTRALIS_DESIGN_TOKENS.md (grafica v1).
 * Le variabili --agentv2-* concentrano i valori del tema: il futuro
 * passaggio alla grafica v2 ridefinisce queste variabili (o questo file),
 * senza toccare il markup generato da agentv2_view.js.
 */

.agentv2-page {
    --agentv2-gold-main: #c5a059;
    --agentv2-gold-light: #ffd277;
    --agentv2-gold-text: #c5b89a;
    --agentv2-gold-border: rgba(197, 160, 89, 0.15);
    --agentv2-gold-outline: rgba(197, 160, 89, 0.25);
    --agentv2-gold-bg-medium: rgba(197, 160, 89, 0.08);
    --agentv2-ice: #b3e5fc;
    --agentv2-red-main: #e74c3c;
    --agentv2-bg-card: rgba(14, 22, 38, 0.95);
    --agentv2-bg-night: #141e30;
    --agentv2-bg-element: rgba(8, 14, 24, 0.7);
    --agentv2-text-muted: #b0bec5;
    --agentv2-font-title: 'Cinzel', serif;
    --agentv2-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 24px 16px;
    font-family: var(--agentv2-font-body);
}

/* ── Header ─────────────────────────────────────────────────── */

.agentv2-header {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    text-align: center;
    padding: 10px 0 6px;
}

/* ── Wordmark "Mnotebook" — componente condiviso, riusato sia nel
   pulsante header (piccolo) sia nel reveal del pannello (grande). Font e
   colori fissati da Emanuele 22/7: M Cinzel oro, resto font di sistema
   colore ghiaccio (--agentv2-ice, NON il toggle "Glacial Style" pagina
   intera), apice logo Magistralis. Dimensione via font-size sul wrapper,
   M/rest/sup restano in em cosi' scalano insieme in ogni contesto. ── */

.agentv2-mnotebook-wordmark {
    display: inline-flex;
    align-items: flex-start;
    line-height: 1;
    white-space: nowrap;
    /* Non deve mai ereditare text-transform:uppercase da un titolo
       ancestor (es. .nbm-h4 nel manuale) -- "notebook" va sempre
       minuscolo, MAI tutto maiuscolo, regola del brand fissata da
       Emanuele. */
    text-transform: none;
}

.agentv2-mnotebook-m {
    font-family: var(--agentv2-font-title);
    font-weight: 700;
    color: var(--agentv2-gold-main);
    font-size: 1.2em;
}

.agentv2-mnotebook-rest {
    font-family: var(--agentv2-font-body);
    font-weight: 600;
    color: var(--agentv2-ice);
    letter-spacing: 0.5px;
    font-size: 1em;
}

.agentv2-mnotebook-sup {
    width: 0.9em;
    height: 0.9em;
    margin-left: 2px;
    object-fit: contain;
    opacity: 0.9;
}

.agentv2-notebook-trigger-btn {
    position: absolute;
    top: 6px;
    right: 0;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--agentv2-gold-bg-medium);
    border: 1px solid var(--agentv2-gold-outline);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.agentv2-notebook-trigger-btn:hover {
    border-color: var(--agentv2-gold-main);
    background: rgba(197, 160, 89, 0.14);
}

.agentv2-notebook-trigger-btn .agentv2-mnotebook-wordmark {
    font-size: 1rem;
}

.agentv2-title {
    margin: 0;
    font-family: var(--agentv2-font-title);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--agentv2-gold-main);
    text-transform: uppercase;
    letter-spacing: 4px;
}

.agentv2-subtitle {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--agentv2-text-muted);
    letter-spacing: 1px;
}

/* ── Area messaggi ──────────────────────────────────────────── */

.agentv2-messages {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 88%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    box-sizing: border-box;
    background: var(--agentv2-bg-card);
    border: 2px solid var(--agentv2-gold-main);
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    scrollbar-width: none;
}

.agentv2-messages::-webkit-scrollbar { display: none; }

/* ── Bolle ──────────────────────────────────────────────────── */

.agentv2-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 1rem;
    line-height: 1.5;
}

.agentv2-bubble-ai {
    align-self: flex-start;
    background: var(--agentv2-bg-element);
    border: 1px solid var(--agentv2-gold-outline);
    color: var(--agentv2-gold-text);
}

.agentv2-bubble-user {
    align-self: flex-end;
    background: var(--agentv2-bg-night);
    border: 1px solid var(--agentv2-gold-border);
    color: var(--agentv2-gold-text);
}

.agentv2-bubble-header {
    margin-bottom: 6px;
}

.agentv2-ai-logo {
    height: 26px;
    width: auto;
    display: block;
}

.agentv2-bubble-content i {
    color: var(--agentv2-text-muted);
}

.agentv2-bubble-error {
    color: var(--agentv2-red-main);
}

/* Ragionamento del modello (thinking) — visivamente secondario rispetto
   alla risposta vera, per non confonderlo col contenuto principale. */
.agentv2-bubble-thinking {
    margin-bottom: 8px;
    padding: 6px 10px;
    border-left: 2px solid var(--agentv2-gold-border);
    font-size: 0.8rem;
    font-style: italic;
    color: var(--agentv2-text-muted);
    white-space: pre-wrap;
}

.agentv2-bubble-thinking[hidden] {
    display: none;
}

/* Bottone "Prepara richiesta" — appare solo se la risposta conteneva il
   marker [PREPARA_RICHIESTA]. Apre e pre-compila, non invia/firma mai. */
.agentv2-prepara-btn {
    display: block;
    margin-top: 10px;
    padding: 8px 14px;
    font-family: var(--agentv2-font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--agentv2-bg-night);
    background: var(--agentv2-gold-main);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.agentv2-prepara-btn:hover {
    background: var(--agentv2-gold-light);
    transform: translateY(-1px);
}

/* Domande suggerite — marker [DOMANDE_SUGGERITE], vedi cerca_knowledge_base
   in agent_v2.py. Stesso ruolo del bottone "Prepara richiesta" ma multiplo
   e disposto in colonna. */
.agentv2-suggested-questions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.agentv2-suggested-label {
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    color: var(--agentv2-text-muted);
}

.agentv2-suggested-btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-family: var(--agentv2-font-body);
    font-size: 0.85rem;
    text-align: left;
    color: var(--agentv2-gold-text);
    background: var(--agentv2-gold-bg-medium);
    border: 1px solid var(--agentv2-gold-outline);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.agentv2-suggested-btn:hover {
    background: var(--agentv2-gold-main);
    color: var(--agentv2-bg-night);
    border-color: var(--agentv2-gold-main);
}

/* Footer con modello/token/costo — solo dopo la risposta completa. */
.agentv2-bubble-footer {
    margin-top: 8px;
    font-size: 0.7rem;
    letter-spacing: 0.3px;
    color: var(--agentv2-text-muted);
    font-variant-numeric: tabular-nums;
}

.agentv2-bubble-footer[hidden] {
    display: none;
}

/* Indicatore "sta scrivendo" — visibile tra l'invio e il primo delta. */
.agentv2-typing-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 3px;
    background-color: var(--agentv2-gold-main);
    border-radius: 50%;
    animation: agentv2-typing 1s infinite;
}

.agentv2-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.agentv2-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes agentv2-typing {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-6px); opacity: 1; }
}

/* Indicatore esteso: puntini + messaggio rotante + secondi trascorsi —
   evita che l'attesa sembri bloccata su domande lunghe (report, analisi). */
.agentv2-thinking-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.agentv2-thinking-dots {
    display: inline-flex;
    align-items: center;
}

.agentv2-thinking-text {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--agentv2-text-muted);
    animation: agentv2-thinking-fade 0.4s ease;
}

@keyframes agentv2-thinking-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.agentv2-thinking-timer {
    font-size: 0.75rem;
    color: var(--agentv2-text-muted);
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* ── Barra input ────────────────────────────────────────────── */

.agentv2-input-bar {
    flex-shrink: 0;
    width: 100%;
    max-width: 88%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.agentv2-input-field {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    font-family: var(--agentv2-font-body);
    font-size: 1rem;
    color: var(--agentv2-gold-text);
    background: var(--agentv2-bg-night);
    border: 1px solid var(--agentv2-gold-outline);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.2s ease;
}

.agentv2-input-field:focus {
    border-color: var(--agentv2-gold-main);
}

.agentv2-input-field::placeholder {
    color: var(--agentv2-text-muted);
}

.agentv2-send-btn,
.agentv2-mic-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--agentv2-gold-main);
    background: var(--agentv2-bg-night);
    border: 1px solid var(--agentv2-gold-outline);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.2s ease, transform 0.3s ease;
}

.agentv2-send-btn:hover {
    background: var(--agentv2-gold-main);
    color: var(--agentv2-bg-night);
    transform: scale(1.05);
}

.agentv2-send-btn:disabled,
.agentv2-mic-btn:disabled {
    color: var(--agentv2-text-muted);
    border-color: var(--agentv2-gold-border);
    cursor: not-allowed;
    transform: none;
}

.agentv2-mic-btn[hidden] {
    display: none;
}

/* Registrazione attiva — feedback visivo chiaro: l'utente deve sempre sapere
   se il microfono sta ascoltando (attivazione/disattivazione solo manuale). */
.agentv2-mic-btn.recording {
    color: var(--agentv2-red-main);
    border-color: var(--agentv2-red-main);
    animation: agentv2-mic-pulse 1.2s infinite;
}

.agentv2-mic-btn.transcribing {
    color: var(--agentv2-gold-light);
    cursor: wait;
}

@keyframes agentv2-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); }
}

/* ── Allegati (Fase 1) ──────────────────────────────────────── */

.agentv2-file-input {
    display: none;
}

.agentv2-attach-wrapper {
    position: relative;
    flex-shrink: 0;
}

.agentv2-attach-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
    color: var(--agentv2-gold-main);
    background: var(--agentv2-bg-night);
    border: 1px solid var(--agentv2-gold-outline);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.2s ease, transform 0.3s ease;
}

.agentv2-attach-btn:hover {
    background: var(--agentv2-gold-main);
    color: var(--agentv2-bg-night);
    transform: scale(1.05);
}

/* Tendina "+": si apre verso l'alto (bottom: 100%) perche' la barra input
   sta in fondo alla pagina -- verso il basso finirebbe fuori schermo. */
.agentv2-attach-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    display: flex;
    flex-direction: column;
    min-width: 230px;
    background: var(--agentv2-bg-card);
    border: 1px solid var(--agentv2-gold-outline);
    border-radius: 10px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    z-index: 20;
}

.agentv2-attach-menu[hidden] {
    display: none;
}

.agentv2-attach-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--agentv2-gold-border);
    color: var(--agentv2-gold-text);
    font-family: var(--agentv2-font-body);
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.agentv2-attach-menu-item:last-child {
    border-bottom: none;
}

.agentv2-attach-menu-item:hover:not(:disabled) {
    background: var(--agentv2-gold-bg-medium);
}

.agentv2-attach-menu-item:disabled {
    color: var(--agentv2-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.agentv2-attach-menu-badge {
    flex-shrink: 0;
    font-size: 0.65rem;
    letter-spacing: 0.3px;
    color: var(--agentv2-text-muted);
    border: 1px solid var(--agentv2-gold-border);
    border-radius: 6px;
    padding: 2px 6px;
    white-space: nowrap;
}

/* Nascosta di default (max-height 0), si apre solo quando ci sono allegati
   -- stesso pattern di .file-preview-container nella chat "Assistente AI". */
.agentv2-file-preview {
    width: 100%;
    max-width: 88%;
    margin: 0 auto;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.agentv2-file-preview.active {
    max-height: 100px;
    overflow-y: auto;
    padding: 8px 0;
}

.agentv2-file-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: var(--agentv2-gold-bg-medium);
    border: 1px solid var(--agentv2-gold-outline);
    border-radius: 15px;
    color: var(--agentv2-gold-text);
    font-size: 0.8rem;
}

.agentv2-file-chip span {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.agentv2-file-remove-btn {
    background: none;
    border: none;
    color: var(--agentv2-red-main);
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 2px;
    line-height: 1;
}

.agentv2-file-remove-btn:hover {
    color: var(--agentv2-gold-light);
}

/* ── Layout split (card grafica, marker [REPORT_GRAFICO]) ─────── */
/* Il titolo "Magistralis AI" (.agentv2-header) resta un figlio diretto di
   .agentv2-page, SOPRA questa riga -- centrato sulla pagina intera sempre,
   non fa parte di cio' che si comprime. .agentv2-body-row e' SEMPRE "row"
   (mai column, mai un flip di asse): a riposo .agentv2-report-col e'
   larga 0 e .agentv2-chat-col (flex:1) riempie tutto lo spazio, sembra
   una singola colonna ma l'asse flex non cambia mai. Cambiare
   flex-direction A META' di una transizione e' comportamento indefinito
   nei browser (width/flex-basis significano assi diversi prima/dopo) --
   causava bolle renderizzate alla larghezza sbagliata dopo la chiusura
   (bug osservato 17/7). Solo larghezze/gap si animano ora, mai l'asse. */

.agentv2-body-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    flex: 1;
    gap: 0;
    transition: gap 0.4s ease;
}

.agentv2-chat-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    transition: flex-basis 0.4s ease;
}

.agentv2-body-row--split {
    gap: 16px;
}

.agentv2-body-row--split .agentv2-chat-col {
    flex: 0 0 38%;
}

.agentv2-body-row--split .agentv2-messages,
.agentv2-body-row--split .agentv2-input-bar {
    max-width: 100%; /* dentro una colonna gia' stretta, l'88% aggiuntivo la rende angusta */
}

/* Card grafica: niente attributo "hidden" (incompatibile con transizioni,
   display:none non si anima) -- resta sempre nel DOM a larghezza zero,
   invisibile e non cliccabile, e "si costruisce" allargandosi da destra
   verso sinistra solo quando .agentv2-body-row--split e' attivo. Default:
   MAI visibile, come richiesto -- solo all'occorrenza. */
.agentv2-report-col {
    flex: 0 0 auto;
    width: 0;
    min-width: 0;
    box-sizing: border-box; /* senza, border-width 2px aggiunto in apertura
        sballa la larghezza reale oltre il calc() e causa overflow
        orizzontale della pagina -- bug trovato 22/7 verificando Mnotebook,
        stesso difetto preesisteva anche qui */
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    background: var(--agentv2-bg-card);
    border: 0 solid var(--agentv2-gold-main);
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: width 0.4s ease, opacity 0.3s ease 0.1s, border-width 0.4s ease;
}

.agentv2-body-row--split .agentv2-report-col {
    flex: 0 0 calc(62% - 16px);
    width: calc(62% - 16px);
    opacity: 1;
    pointer-events: auto;
    border-width: 2px;
}

.agentv2-report-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--agentv2-gold-border);
}

.agentv2-report-titolo {
    font-family: var(--agentv2-font-title);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--agentv2-gold-main);
    letter-spacing: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentv2-report-actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
}

.agentv2-report-action-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--agentv2-gold-bg-medium);
    border: 1px solid var(--agentv2-gold-outline);
    border-radius: 8px;
    color: var(--agentv2-gold-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.agentv2-report-action-btn:hover {
    border-color: var(--agentv2-gold-main);
    color: var(--agentv2-gold-light);
}

.agentv2-report-body {
    flex: 1;
    min-height: 0;
    padding: 12px;
    overflow: auto;
}

/* ── Layout split — pannello Mnotebook ─────────────────────────
   Indipendente dal pannello grafico sopra (classi/colonna proprie,
   .agentv2-body-row--split-nb / #agentv2-notebook-col): i due non toccano
   mai lo stesso selettore, cosi' non serve rinominare il meccanismo del
   grafico gia' verificato in produzione. Stesso principio: solo
   width/opacity si animano, mai flex-direction. */

.agentv2-body-row--split-nb {
    gap: 16px;
    overflow-x: hidden; /* rete di sicurezza anti-overflow */
}

.agentv2-body-row--split-nb .agentv2-chat-col {
    flex: 0 0 26%;
}

.agentv2-body-row--split-nb .agentv2-messages,
.agentv2-body-row--split-nb .agentv2-input-bar {
    max-width: 100%;
}

/* Il recupero di padding laterale (24px->14px, provato in due round
   precedenti) e' stato rimosso: era l'unica differenza di layout tra
   questo pannello e .agentv2-report-col (che non tocca mai il padding
   pagina ed e' l'unico dei due mai segnalato con bordo tagliato).
   Padding pagina resta sempre il default di .agentv2-page. */
.agentv2-page--notebook-open {
    overflow-x: hidden; /* rete di sicurezza anti-overflow */
}

.agentv2-notebook-col {
    flex: 0 0 auto;
    width: 0;
    min-width: 0;
    box-sizing: border-box; /* vedi nota su .agentv2-report-col -- stesso bug */
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    background: var(--agentv2-bg-card);
    border: 0 solid var(--agentv2-gold-main);
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: width 0.4s ease, opacity 0.3s ease 0.1s, border-width 0.4s ease;
}

/* -32px invece di -16px: 16px di margine fisso in piu', mai riempito,
   cosi' il bordo destro resta staccato dal limite della riga qualunque
   sia l'arrotondamento introdotto da ViewportScaler (zoom frazionario
   su baseWidth 1600) alla larghezza reale della pagina. */
.agentv2-body-row--split-nb .agentv2-notebook-col {
    flex: 0 0 calc(74% - 32px);
    width: calc(74% - 32px);
    opacity: 1;
    pointer-events: auto;
    border-width: 2px;
}

/* Header proprio, stessa struttura/spaziatura di .agentv2-report-header --
   prima la card aveva solo un pulsante chiudi flottante sopra al contenuto,
   diversa da ogni altra card della pagina (report incluso). */
.agentv2-notebook-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--agentv2-gold-border);
}

/* Corpo scrollabile -- stessa rete di sicurezza di .agentv2-report-body
   (overflow: auto): se il contenuto non entra nello spazio verticale
   disponibile, scrolla invece di essere tagliato in silenzio da
   .agentv2-notebook-col { overflow: hidden }. */
.agentv2-notebook-body {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    box-sizing: border-box;
}

/* ── Stadio 1: presentazione (wordmark+tagline) ──────────────────
   Ripristinata dopo essere stata rimossa per errore in un giro
   precedente: NON va tolta quando si aggiunge la lista notebook, le due
   convivono in sequenza -- richiesta esplicita di Emanuele 22/7. Reveal
   piccolo/invisibile -> grande: la classe --reveal viene aggiunta via JS
   solo dopo che il pannello ha gia' preso larghezza (vedi
   _apriCardNotebook), cosi' l'animazione parte da uno spazio gia'
   stabile invece di accavallarsi alla transizione di width. Coreografia
   in tre tempi, mai in parallelo: (1) il wordmark cresce da piccolo/
   invisibile a grande, (2) SOLO dopo che (1) e' finito la tagline si
   allarga dal centro verso i lati (clip-path, non fade), (3) SOLO dopo
   che anche la tagline e' finita compare il bottone "Entra in
   Mnotebook" (vedi piu' sotto). */
.agentv2-notebook-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 24px;
}

.agentv2-notebook-col--list .agentv2-notebook-intro {
    display: none;
}

/* Figlio DIRETTO apposta (non discendente): il selettore con spazio
   prendeva anche il wordmark piccolo annidato dentro
   #agentv2-notebook-enter (bottone dentro .agentv2-notebook-intro),
   ereditando 3.4rem e la scala/opacity dello splash -- bug reale
   trovato in verifica 22/7, il bottone "Entra in Mnotebook" veniva
   mostruosamente grande e mai a piena opacita' di suo. */
.agentv2-notebook-intro > .agentv2-mnotebook-wordmark {
    font-size: 3.4rem;
    opacity: 0;
    transform: scale(0.25);
    transition: opacity 2s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.agentv2-notebook-tagline {
    max-width: 420px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--agentv2-text-muted);
    clip-path: inset(0 50% 0 50%);
    transition: clip-path 2s cubic-bezier(0.2, 0.8, 0.2, 1) 2.5s;
}

.agentv2-notebook-col--reveal .agentv2-notebook-intro > .agentv2-mnotebook-wordmark {
    opacity: 1;
    transform: scale(1);
}

.agentv2-notebook-col--reveal .agentv2-notebook-tagline {
    clip-path: inset(0 0 0 0);
}

/* Stadio 2: bottone "Entra in Mnotebook" -- compare solo a coreografia
   sopra finita (timing in JS, non qui), mai a meta' di un'altra
   transizione.
   REGOLA DEL BRAND, da non dimenticare mai (gia' rotta una volta 22/7):
   "Mnotebook" nel testo e' SEMPRE il wordmark vero (M Cinzel oro +
   "notebook" ghiaccio + apice logo, vedi .agentv2-mnotebook-wordmark),
   MAI testo semplice -- text-transform:none e' gia' protetto sul
   wordmark condiviso, ma il markup deve comunque includere il wordmark
   stesso, non solo la parola. Vedi anche
   agentv2_notebook_manual.js riga di testa e feedback in memoria Claude
   (feedback_mnotebook_wordmark_sempre_stilizzato).
   STILE PULSANTE: riuso diretto di .gold-btn-action (global_buttons.css)
   -- il vero "pulsante stile Magistralis" usato in tutta l'app (Stampa
   Turni, Funzionalita' Avanzate, Salva Turno in Gestione Turnazioni),
   NON .logout-mag-gold (quello e' solo per il Logout in header, corretto
   23/7 dopo che Emanuele ha fatto notare che i due non sono la stessa
   cosa). Non inventare varianti nuove. */
/* .gold-btn-action span (global_buttons.css, caricato PRIMA di questo
   file) styla ogni <span> DISCENDENTE in modo generico (oro maiuscolo
   Cinzel, specificita' classe+tag) -- prenderebbe anche gli span interni
   del wordmark (M e "notebook"), scrivendo "NOTEBOOK" tutto maiuscolo e
   ricolorando entrambi uguali. Override scoped a 2 classi (specificita'
   piu' alta) per ridare a M e "notebook" i loro colori/font veri. */
.agentv2-notebook-enter-btn .agentv2-mnotebook-wordmark {
    font-size: 1rem;
}
.agentv2-notebook-enter-btn .agentv2-mnotebook-m {
    color: var(--agentv2-gold-main);
    font-family: var(--agentv2-font-title);
    font-weight: 700;
    font-size: 1.2em;
    letter-spacing: normal;
    text-shadow: none;
    line-height: 1;
}
.agentv2-notebook-enter-btn .agentv2-mnotebook-rest {
    color: var(--agentv2-ice);
    font-family: var(--agentv2-font-body);
    font-weight: 600;
    font-size: 1em;
    letter-spacing: 0.5px;
    text-shadow: none;
    text-transform: none;
    line-height: 1;
}

#agentv2-notebook-enter {
    gap: 8px;
}

.agentv2-notebook-enter-btn {
    margin-top: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.agentv2-notebook-col--enter-ready .agentv2-notebook-enter-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ── Stadio 3: vista lista notebook -- nascosta finche' non si clicca
   "Entra in Mnotebook" (.agentv2-notebook-col--list). Stesso principio
   della griglia di file/notebook di NotebookLM: bottone "crea nuovo"
   speciale e separato dalla griglia (non piu' una tile in mezzo alle
   altre -- corretto dopo feedback di Emanuele 22/7), tile piu' grandi. */
.agentv2-notebook-list-header,
.agentv2-notebook-grid {
    display: none;
}

/* Specificita' alzata apposta (.agentv2-notebook-body come ancestor):
   .agentv2-notebook-create-btn riusa .gold-btn-action, che porta gia'
   "display:flex" di suo (global_buttons.css) -- a parita' di
   specificita' rischierebbe di vincere lui, mostrando il pulsante anche
   prima dello stadio lista. Stesso identico bug gia' trovato e fixato
   oggi sulla griglia. */
.agentv2-notebook-body .agentv2-notebook-create-btn {
    display: none;
}

.agentv2-notebook-col--list .agentv2-notebook-list-header,
.agentv2-notebook-col--list .agentv2-notebook-body .agentv2-notebook-create-btn {
    display: flex;
}

.agentv2-notebook-col--list .agentv2-notebook-body {
    align-items: stretch;
    justify-content: flex-start;
    padding: 20px 24px;
    gap: 18px;
}

.agentv2-notebook-list-header {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.agentv2-notebook-list-header .agentv2-mnotebook-wordmark {
    font-size: 1.6rem;
}

.agentv2-notebook-create-btn {
    flex-shrink: 0;
    align-self: center;
}

.agentv2-notebook-grid {
    flex: 1;
    min-height: 0;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    align-content: start;
    gap: 18px;
    overflow-y: auto;
}

.agentv2-notebook-col--list .agentv2-notebook-grid {
    display: grid;
}

.agentv2-notebook-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 1 / 1;
    padding: 18px;
    background: var(--agentv2-bg-element);
    border: 1px solid var(--agentv2-gold-border);
    border-radius: 14px;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.agentv2-notebook-card:hover {
    border-color: var(--agentv2-gold-main);
    background: var(--agentv2-gold-bg-medium);
    transform: translateY(-2px);
}

.agentv2-notebook-card-icon {
    font-size: 2.3rem;
    opacity: 0.75;
}

.agentv2-notebook-card-title {
    font-family: var(--agentv2-font-title);
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    color: var(--agentv2-gold-text);
    text-align: center;
}

.agentv2-notebook-card-meta {
    font-size: 0.78rem;
    color: var(--agentv2-text-muted);
}

/* ── Manuale Mnotebook (bottone "ⓘ" in header) ─────────────────
   Toggle di visibilita' via classe sul col, mai sostituzione di
   innerHTML: .agentv2-notebook-body resta nel DOM (solo display:none),
   cosi' aprire/chiudere il manuale non tocca lo stato di cio' che c'e'
   sotto -- richiesta esplicita di Emanuele 22/7. Stile ispirato al
   "dossier tecnico" del documento SIAE (nexora/moduli/relazione-tecnica-
   magistralis.html: pannelli scuri, card con bordo laterale colorato,
   badge, sezioni numerate) ma sui token Magistralis, non sul CSS di
   nexora. */
.agentv2-notebook-col--manual .agentv2-notebook-body {
    display: none;
}

.agentv2-notebook-manual {
    display: none;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 22px 32px 28px;
    flex-direction: column;
    text-align: left;
}

.agentv2-notebook-col--manual .agentv2-notebook-manual {
    display: flex;
}

/* Bottone "torna al notebook" -- visibile SOLO col manuale aperto, cosi'
   c'e' sempre un modo esplicito e ovvio per uscire dal manuale senza
   passare dalla "X" (che altrimenti chiuderebbe l'intero pannello per
   errore -- segnalato da Emanuele 22/7). L'informazione "ⓘ" si nasconde
   nello stesso momento: aprirla di nuovo mentre e' gia' aperta non ha
   senso. */
.agentv2-notebook-torna-btn {
    display: none;
    font-family: var(--agentv2-font-title);
    font-size: 1rem;
    font-weight: 700;
}

.agentv2-notebook-col--manual .agentv2-notebook-torna-btn {
    display: flex;
}

.agentv2-notebook-col--manual #agentv2-notebook-info {
    display: none;
}

/* Pulsante info: "i" cerchiata disegnata (non glifo Unicode, reso male
   su alcuni sistemi -- segnalato "fa pena" 22/7) + tooltip descrittivo
   in Cinzel, stesso pattern visivo del tooltip del menu laterale
   (menu_sidebar.css .text) ma scoped a questo bottone. Glifo: serif
   italic (non Cinzel) -- scelta di Emanuele tra 4 alternative mostrate,
   puntino della "i" piu' leggibile della versione Cinzel/Unicode. */
.agentv2-notebook-info-btn {
    position: relative;
}

.agentv2-notebook-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--agentv2-gold-main);
    border-radius: 50%;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--agentv2-gold-main);
}

.agentv2-notebook-info-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: var(--agentv2-bg-card);
    border: 1px solid var(--agentv2-gold-outline);
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--agentv2-font-title);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.3px;
    line-height: 1.6;
    text-transform: none;
    color: var(--agentv2-gold-text);
    text-align: left;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 30;
}

.agentv2-notebook-info-btn:hover .agentv2-notebook-info-tooltip,
.agentv2-notebook-info-btn:focus-visible .agentv2-notebook-info-tooltip {
    opacity: 1;
    transform: translateY(0);
}

.nbm-badge {
    align-self: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-family: var(--agentv2-font-title);
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--agentv2-gold-main);
    background: var(--agentv2-gold-bg-medium);
    border: 1px solid var(--agentv2-gold-outline);
    margin-bottom: 8px;
}

/* Titoli centrati, dimensioni riallineate al documento di riferimento
   (relazione-tecnica-magistralis.html usa una scala ~1em/16px di base,
   qui prima erano troppo piccoli per un pannello destinato a lettura). */
.nbm-h4 {
    margin: 22px 0 10px;
    text-align: center;
    font-family: var(--agentv2-font-title);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--agentv2-gold-main);
}

.nbm-h4:first-of-type {
    margin-top: 4px;
}

.nbm-p {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--agentv2-text-muted);
}

.nbm-list {
    margin: 0 0 12px;
    padding-left: 22px;
}

.nbm-list li {
    margin-bottom: 7px;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--agentv2-gold-text);
}

.nbm-list strong {
    color: var(--agentv2-ice);
}

/* Card "info", stessa idea del .card.info del documento SIAE (bordo
   sinistro colorato che distingue il box dal flusso di testo normale). */
.nbm-card {
    margin-top: 8px;
    padding: 16px 18px;
    background: var(--agentv2-bg-element);
    border: 1px solid var(--agentv2-gold-border);
    border-left: 3px solid var(--agentv2-ice);
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--agentv2-text-muted);
}

.nbm-card strong {
    color: var(--agentv2-ice);
}

.nbm-meta {
    margin: 16px 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.3px;
    color: var(--agentv2-text-muted);
    opacity: 0.75;
    font-style: italic;
    text-align: center;
}

/* Griglia piani/limiti -- stesso schema del .stat-grid del documento SIAE
   (numero grande + etichetta), qui sui 4 livelli Base/Pro/Ultra/Team. */
.nbm-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin: 4px 0 14px;
}

.nbm-stat {
    background: var(--agentv2-bg-element);
    border: 1px solid var(--agentv2-gold-border);
    border-radius: 8px;
    padding: 14px 10px;
    text-align: center;
}

.nbm-stat .nbm-stat-num {
    font-family: var(--agentv2-font-title);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--agentv2-gold-main);
    line-height: 1;
}

.nbm-stat .nbm-stat-label {
    margin-top: 6px;
    font-family: var(--agentv2-font-title);
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--agentv2-text-muted);
}

.nbm-stat--active {
    border-color: var(--agentv2-gold-main);
    box-shadow: inset 0 0 16px rgba(197, 160, 89, 0.15);
}

.nbm-stat--active .nbm-stat-label {
    color: var(--agentv2-ice);
}

.agentv2-report-chart {
    width: 100%;
    height: 100%;
    min-height: 320px;
}

.agentv2-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: var(--agentv2-gold-text);
}

.agentv2-report-table th,
.agentv2-report-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--agentv2-gold-border);
    text-align: left;
    white-space: nowrap;
}

.agentv2-report-table th {
    font-family: var(--agentv2-font-title);
    color: var(--agentv2-gold-main);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agentv2-report-table tr:hover td {
    background: var(--agentv2-gold-bg-medium);
}

/* Stampa: solo il pannello report, il resto della pagina sparisce */
@media print {
    body * { visibility: hidden; }
    .agentv2-report-col, .agentv2-report-col * { visibility: visible; }
    .agentv2-report-col {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: none;
        box-shadow: none;
    }
    .agentv2-report-actions { display: none; }
}
/* --- END OF FILE css/agentv2_theme.css --- */