/*
 * Contenitore in vetro per i risultati del prompt (stat-box, data-table,
 * ...) - separato dalla card del prompt, che ha gia' il suo trattamento in
 * vetro e resta fuori. Creato/riusato da hero.js la prima volta che arriva
 * un risultato. Le card al suo interno restano scatole vere e proprie (non
 * trasparenti del tutto, altrimenti spariscono), ma con un bianco
 * semi-trasparente piu' leggero di quello di una card normale, cosi' si
 * vede ancora il vetro/lo sfondo colorato dietro.
 */
.results-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: rgba(251, 250, 248, 0.42);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.6) inset, var(--shadow-card);
}

/* Creato sempre (vedi hero.js getOrCreatePanel), ma sulla home vuota resta
   senza contenuto - un box in vetro vuoto non deve comunque comparire. */
.results-panel:empty {
    display: none;
}

.results-panel > .card {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 2px rgba(18, 51, 63, 0.06);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}

/*
 * Quadratino con l'effetto riflesso (stessa ricetta degli avatar: velo
 * diagonale bianco sopra un fondo pieno) invece del link a piena riga con
 * etichetta di prima - costava una riga intera solo per tornare indietro
 * (segnalato dall'utente). Margine negativo per accorciare lo spazio
 * verso il contenuto sotto (il gap normale di .results-panel e' 14px):
 * cosi' il quadratino legge come "attaccato" al titolo del risultato
 * appena sotto invece che come una riga a se' separata.
 */
.results-panel__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 34px;
    height: 34px;
    margin-bottom: -8px;
    border: none;
    border-radius: var(--radius-md);
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%);
    background-color: var(--color-petrol);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 0;
}

.results-panel__back:hover {
    background-color: #0b2430;
}

.results-panel__back .icon svg {
    width: 18px;
    height: 18px;
    color: #fff;
    display: block;
}

/*
 * Transcript della conversazione (bolle utente/assistente, non piu' un
 * elenco piatto di sole richieste), dentro la stessa card del prompt,
 * sopra la casella di testo. Nascosto di default (anche se non vuoto):
 * ha senso solo nel layout a sidebar qui sotto, in modalita' compatta la
 * card deve restare come prima, senza storico visibile al suo interno.
 */
.hero__messages {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 0;
}

/* Bolla utente: angoli arrotondati tranne quello in basso a destra, che
   resta vivo - la "punta" verso l'input sotto, stesso trucco grafico di
   qualunque chat. E' anche il vecchio pulsante "richiama questo
   risultato" (era .hero__message): resta cliccabile, solo restyled. */
.hero__bubble--user {
    align-self: flex-end;
    max-width: 85%;
    padding: 9px 13px;
    border: none;
    border-radius: 14px 14px 4px 14px;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 58%);
    background-color: var(--color-petrol);
    color: #fff;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.hero__bubble--user.hero__bubble--active {
    box-shadow: 0 0 0 2px rgba(18, 51, 63, 0.35);
}

.hero__bubble-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

/*
 * Avatar dell'assistente: il logo quadrato vero dell'app (stesso asset
 * del pulsante wizard di prima), non un personaggio inventato. Solo
 * dimensione, nessun contorno/sfondo/riflesso propri (segnalato
 * dall'utente): il PNG e' gia' una sferetta con bordi arrotondati e
 * riflesso incorporati nell'immagine stessa - incorniciarlo in un'altra
 * icona quadrata con lo stesso trattamento creava un "box dentro al box"
 * e rimpiccioliva il logo vero dentro un riquadro colorato che non
 * serviva.
 */
.hero__mascot {
    width: 30px;
    height: 30px;
    flex: none;
    display: block;
}

/* Bolla assistente: stessa idea della bolla utente ma speculare (l'angolo
   vivo e' in alto a sinistra, verso l'avatar) e chiara invece che scura. */
.hero__bubble--assistant {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border-radius: 4px 14px 14px 14px;
    background: #fff;
    border: 1px solid rgba(18, 51, 63, 0.1);
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(18, 51, 63, 0.78);
}

.hero__bubble--assistant strong {
    color: var(--color-petrol);
    font-weight: 600;
}

/* Chip "prova a chiedere": domande di follow-up dichiarate dal tool
   (vedi PromptConversationalInterface lato server), non generate a ogni
   risposta - un click le esegue davvero come nuovo prompt. */
.hero__suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 2px;
}

.hero__suggestions-label {
    padding: 0 4px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(18, 51, 63, 0.5);
}

/* Bordo/sfondo bianco translucido invece di un colore pieno: .hero__card
   e' gia' vetro smerigliato (background rgba + backdrop-filter, vedi
   sotto), la chip riprende la stessa lucentezza invece di stonare come
   un blocco opaco sopra. */
.hero__suggestion-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font: 500 12.5px var(--font-body);
    color: var(--color-petrol);
    cursor: pointer;
    text-align: left;
}

.hero__suggestion-chip:hover {
    background: #fff;
}

.hero__suggestion-chip .icon svg {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--color-lilac);
    display: block;
}

/*
 * Layout a sidebar: si attiva solo quando c'e' gia' uno storico (classe
 * .has-history, aggiunta da hero.js al primo risultato) E lo schermo e'
 * abbastanza largo da ospitarla senza stringere il contenuto - a schermata
 * vuota, o sotto la soglia, resta tutto impilato e centrato come prima
 * (nessun cambiamento in quei casi).
 *
 * Le due colonne diventano un "app shell" a se': altezza fissa pari alla
 * viewport meno il padding verticale di .page-stack (32px sopra + 32px
 * sotto), ognuna scorre per conto proprio - non e' piu' la pagina intera a
 * scorrere, come il menu laterale di un gestionale classico che non si
 * muove insieme al contenuto.
 */
@media (min-width: 1280px) {
    .page-stack:has(.component-stack.has-history) {
        max-width: none;
    }

    .component-stack.has-history {
        display: grid;
        grid-template-columns: 340px 1fr;
        grid-template-areas: 'prompt content';
        gap: 24px;
        height: calc(100vh - 64px);
    }

    .component-stack.has-history .hero-wrap {
        grid-area: prompt;
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    /* .hero__card e' gia' un flex column-friendly .card (vedi sopra): qui
       lo si fa crescere per riempire tutta l'altezza della colonna, con i
       messaggi che si prendono lo spazio che avanza e scorrono, mentre
       casella e pulsanti restano della loro altezza naturale in fondo. */
    .component-stack.has-history .hero__card {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .component-stack.has-history .hero__messages {
        display: flex;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .component-stack.has-history .results-panel {
        grid-area: content;
        height: 100%;
        overflow-y: auto;
    }
}

.hero-wrap {
    width: 100%;
    margin: 10vh auto 0;
    transition: margin 0.4s ease;
}

.hero-wrap--top {
    margin-top: 0;
}

.hero-wrap--top .hero__intro {
    display: none;
}

.hero__intro {
    display: flex;
    align-items: center;
    gap: 18px;
    justify-content: center;
    margin: 0 0 22px;
}

.hero__logo--big {
    display: block;
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
}

.hero__greeting {
    text-align: left;
}

.hero__greeting-line1 {
    margin: 0 0 4px;
    color: var(--color-petrol);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 26px;
}

.hero__greeting-line2 {
    margin: 0;
    color: var(--color-teal);
    font-size: 16px;
}

.hero__card {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    background: rgba(251, 250, 248, 0.5);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 1px rgba(255, 255, 255, 0.6) inset, var(--shadow-card);
}

/*
 * Riflesso leggero tipo metallo, non un vero effetto lucido: una fascia
 * diagonale chiara e sfumata, ferma (niente animazione - "non esagerato").
 * Dipinto prima dei figli (::before = primo nell'ordine di stacking), quindi
 * il box bianco opaco della textarea e i pulsanti restano sopra e cliccabili.
 */
.hero__card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0%, transparent 22%, transparent 78%, rgba(255, 255, 255, 0.22) 100%);
    pointer-events: none;
}

/*
 * Riquadro bianco opaco per la textarea, distinto dalla card trasparente
 * che lo contiene: sotto, nella zona che resta trasparente, vanno i
 * pulsanti della toolbar.
 */
.hero__input-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(18, 51, 63, 0.1);
}

.hero__input {
    display: block;
    flex: 1;
    min-width: 0;
    min-height: 44px;
    resize: none;
    font: inherit;
    font-size: 14.5px;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
}

.hero__input:focus {
    outline: none;
}

.hero__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.hero__toolbar-spacer {
    flex: 1;
}

/* Nascosto (non eliminato dal markup, vedi hero.js) su richiesta
   dell'utente: Invio da tastiera basta per eseguire, il pulsante era
   ridondante. Per farlo ricomparire basta togliere questa regola. */
.hero__toolbar-execute {
    display: none;
}

/*
 * Stessa struttura/logica del menu azioni di data-table.js
 * (.data-table__actions-*: trigger + pannello assoluto, .is-open a
 * comparire, chiusura sul click fuori) ma in un namespace suo perche'
 * vive nella toolbar del prompt, non in una riga di tabella - due usi
 * troppo diversi per condividere le stesse classi senza accoppiarli.
 */
.hero__profile-dropdown {
    position: relative;
    display: inline-flex;
}

/* left:0 (non piu' right:0) - il profilo e' finito a sinistra della
   toolbar insieme a casa/menu (prima stava a destra, vicino a Esegui):
   aprire verso sinistra da li' lo faceva sporgere fuori dalla card,
   verso destra c'e' invece tutto lo spazio libero della toolbar. */
.hero__profile-menu {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 10;
    min-width: 190px;
    background: var(--color-panel);
    border: var(--hairline);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: 6px;
}

.hero__profile-menu.is-open {
    display: block;
}

/*
 * Chi e' collegato, come prima voce del menu invece che come box a se'
 * in cima alla home (segnalato dall'utente: la stessa informazione
 * viveva in due posti). Stesso linguaggio (cerchietto+nome+ruolo) del
 * vecchio dashboard-header__user, solo spostato qui.
 */
.hero__profile-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}

.hero__profile-identity-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-petrol);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
}

.hero__profile-identity-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.hero__profile-identity-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-petrol);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero__profile-identity-role {
    font-size: 11px;
    color: rgba(18, 51, 63, 0.55);
}

/* Non tocca i bordi laterali del dropdown (segnalato dall'utente) -
   margine invece di un bordo a piena larghezza sul contenitore. */
.hero__profile-menu-divider {
    height: 1px;
    margin: 6px 10px;
    background: rgba(18, 51, 63, 0.08);
}

/*
 * Puo' essere sia <a> (profilo/logout) sia <button> (wizard, "Cosa posso
 * fare?" - non ha una sua pagina) - i reset qui sotto (bordo/sfondo/
 * font/cursore/allineamento/larghezza) servono solo al caso <button>,
 * stesso bug gia' preso una volta con .data-table__actions-menu-item.
 */
.hero__profile-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 9px;
    padding: 8px 10px;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--color-petrol);
    text-decoration: none;
}

.hero__profile-menu-item:hover {
    background: rgba(18, 51, 63, 0.06);
}

.hero__profile-menu-item .icon svg {
    width: 16px;
    height: 16px;
    display: block;
    flex: 0 0 auto;
}

.hero__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    border: var(--hairline);
    background: var(--color-canvas);
    color: var(--color-petrol);
    cursor: pointer;
    padding: 0;
}

.hero__icon-btn:hover {
    background: rgba(18, 51, 63, 0.08);
}

.hero__icon-btn .icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.hero__icon-btn--alert {
    background: var(--color-danger-bg);
    border-color: rgba(162, 59, 44, 0.35);
    color: var(--color-danger);
}

.hero__icon-btn--alert:hover {
    background: #f0d5cf;
}

.hero__icon-btn--alert[hidden] {
    display: none;
}

.hero__icon-btn.is-listening {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
    animation: heroMicPulse 1.4s ease-in-out infinite;
}

@keyframes heroMicPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(162, 59, 44, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(162, 59, 44, 0); }
}

.hero__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 4px;
}

.hero__attachments:empty {
    display: none;
}

.hero__attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-canvas);
    border: var(--hairline);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 12px;
}

.hero__attachment-remove {
    border: none;
    background: none;
    color: var(--color-danger);
    font: inherit;
    cursor: pointer;
    padding: 0;
}

/*
 * Menu riorganizzato in sezioni filtrabili + ricerca (vedi menu-grid.js
 * e ShowMenuTool::SECTIONS per la tassonomia) - prima era una griglia
 * piatta senza alcuna gerarchia/filtro, andava bene con 5-6 voci ma non
 * scalava oltre. Eyebrow + titolo a sinistra, filtri + ricerca a destra
 * sulla stessa fascia, a capo su schermi stretti.
 */
.menu-grid__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.menu-grid__eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-teal);
    margin: 0 0 4px;
}

.menu-grid__heading .card__title {
    margin: 0;
}

.menu-grid__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/*
 * Bianco (non piu' canvas) e con un bordo per definirsi da solo sul
 * grigio della pagina - prima "galleggiava" dentro la card bianca del
 * menu e bastava un tono leggermente piu' cupo per distinguersi. Stesso
 * motivo per cui la voce attiva sotto e' diventata una tinta piena
 * invece di un altro bianco (bianco su bianco sarebbe invisibile).
 */
.menu-grid__tabs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    background: var(--color-panel);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    padding: 4px;
}

/*
 * Elemento a se', non il colore del bottone attivo (vedi createSlidingIndicator
 * in dom.js) - scorre/si allarga verso il tab cliccato invece di
 * "comparire" gia' colorato in un punto diverso (segnalato dall'utente).
 */
.menu-grid__tab-indicator {
    position: absolute;
    background: var(--color-petrol);
    border-radius: var(--radius-md);
    transition: left 0.25s ease, width 0.25s ease, top 0.25s ease;
    z-index: 0;
    pointer-events: none;
}

.menu-grid__tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    padding: 7px 12px;
    font: inherit;
    font-size: 13px;
    color: var(--color-petrol);
    cursor: pointer;
    transition: color 0.2s ease;
}

.menu-grid__tab:hover {
    background: rgba(18, 51, 63, 0.06);
}

.menu-grid__tab.is-active {
    color: #fff;
    font-weight: 600;
}

.menu-grid__tab.is-active:hover {
    background: none;
}

.menu-grid__tab-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.menu-grid__search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid rgba(18, 51, 63, 0.16);
    border-radius: var(--radius-md);
}

.menu-grid__search-wrap .icon svg {
    width: 15px;
    height: 15px;
    color: rgba(18, 51, 63, 0.45);
    display: block;
}

.menu-grid__search {
    border: none;
    background: none;
    outline: none;
    font: inherit;
    font-size: 13.5px;
    min-width: 160px;
    color: var(--color-petrol);
}

.menu-grid__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.menu-grid__empty {
    text-align: center;
    color: rgba(18, 51, 63, 0.55);
    font-size: 13.5px;
    padding: 28px 0 8px;
}

/*
 * Padding quasi raddoppiato (16px -> 26px) rispetto alla primissima
 * versione - segnalato dall'utente come "streminziti", voleva almeno il
 * 50% in piu'. flex-column con il footer spinto in fondo (margin-top:
 * auto su .menu-grid__item-footer) invece di centrare tutto il
 * contenuto, cosi' badge/contatore restano sempre in alto e il tag di
 * sezione sempre in basso anche quando la descrizione varia di lunghezza.
 *
 * Sfondo bianco (var(--color-panel), non piu' canvas) con ombra a
 * riposo come una .card normale, non solo in hover: da quando il menu
 * non e' piu' avvolto in una card bianca (vedi menu-grid.js), queste
 * tessere sono l'UNICA superficie bianca sullo sfondo grigio della
 * pagina - prima potevano restare canvas perche' galleggiavano dentro
 * un contenitore bianco piu' grande, ora sarebbero grigio su grigio.
 */
.menu-grid__item {
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--color-panel);
    border: var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 22px;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: opacity 0.35s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.menu-grid__item:hover {
    transform: translateY(-2px);
}

.menu-grid__item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

/* Stessa lingua "squircle" di .avatar in kit.css (radius fisso, non
   50%) invece di un cerchio pieno - coerente col resto del design system. */
.menu-grid__badge {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
}

.menu-grid__count {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 20px;
    color: var(--color-petrol);
}

.menu-grid__label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15.5px;
    margin-bottom: 6px;
}

.menu-grid__description {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-teal);
}

.menu-grid__item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: var(--hairline);
}

.menu-grid__item-tag {
    font-size: 12px;
    color: rgba(18, 51, 63, 0.55);
}

.menu-grid__item-arrow {
    color: var(--color-teal);
    transition: transform 0.15s ease;
}

.menu-grid__item-arrow .icon svg {
    width: 13px;
    height: 13px;
    display: block;
}

.menu-grid__item:hover .menu-grid__item-arrow {
    transform: translateX(3px);
}