/* Stati di validazione Blazor: tre soli stati in Timbaly, nessuna ambra (§3). */
.valid.modified:not([type=checkbox]) {
    outline: var(--tb-bw) solid var(--tb-ok);
}

.invalid {
    outline: var(--tb-bw) solid var(--tb-danger);
}

.validation-message {
    color: var(--tb-danger);
    font-size: var(--tb-fs-sm);
}

#blazor-error-ui {
    color-scheme: light only;
    background: var(--tb-danger-wash);
    color: var(--tb-danger);
    border-top: var(--tb-bw) solid var(--tb-danger);
    bottom: 0;
    box-shadow: var(--tb-sh-2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: var(--tb-s-3) var(--tb-s-6);
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: var(--tb-fs-sm);
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: var(--tb-danger);
    padding: var(--tb-s-4);
    color: var(--tb-surface);
    border-radius: var(--tb-r-md);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ===== Schermata di boot (pre-WASM) =====
   È il primo fotogramma del prodotto e vive fuori da Blazor: nessun token
   MudBlazor disponibile, solo i --tb-*. Nessuna animazione in loop (§6): la
   barra avanza sulla percentuale reale di caricamento pubblicata da Blazor. */

.boot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--tb-s-6);
    background: var(--tb-ground);
}

.boot__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tb-s-4);
}

.boot__mark {
    width: 56px;
    height: 56px;
    color: var(--tb-brass);
}

.boot__name {
    margin: 0;
    font-family: var(--tb-font-display);
    font-size: var(--tb-fs-2xl);
    font-weight: 900;
    letter-spacing: var(--tb-ls-display);
    color: var(--tb-petrol);
    line-height: 1;
}

.boot__bar {
    width: 176px;
    height: 3px;
    background: var(--tb-rule);
    overflow: hidden;
}

.boot__bar-fill {
    display: block;
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background: var(--tb-brass);
    transition: width var(--tb-dur) var(--tb-ease);
}

code {
    font-family: var(--tb-font-mono);
    font-size: 0.9em;
    color: var(--tb-brass-text);
}

/* ============================================================
   BRAND — lockup Timbaly
   Simbolo inline (currentColor) + logotipo in Fraunces 900.
   Il tracking -0.035em è quello del logotipo ufficiale.
   ============================================================ */

.tb-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--tb-s-2);
    color: inherit;
    line-height: 1;
}

.tb-logo__mark {
    flex-shrink: 0;
    color: var(--tb-brass);
}

.tb-logo__word {
    font-family: var(--tb-font-display);
    font-weight: 900;
    letter-spacing: var(--tb-ls-display);
    /* Fraunces ha un'altezza-x generosa: l'allineamento ottico col simbolo
       vuole un filo di correzione, non un valore fuori scala. */
    margin-top: -1px;
}

.tb-logo--bar .tb-logo__mark {
    width: 24px;
    height: 24px;
}

.tb-logo--bar .tb-logo__word {
    font-size: 19px;
}

.tb-logo--hero .tb-logo__mark {
    width: 40px;
    height: 40px;
}

.tb-logo--hero .tb-logo__word {
    font-size: 30px;
}

.tb-logo--mark .tb-logo__mark {
    width: 20px;
    height: 20px;
}

/* Sotto 600px il nome del sito vale più del nostro logotipo: resta il simbolo,
   il wordmark cede lo spazio al selettore. */
@media (max-width: 599px) {
    .tb-logo--bar .tb-logo__word {
        display: none;
    }
}

/* Sigla di lingua: mono perché è un codice, non una parola (§4). */
.tb-lang-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 0 var(--tb-s-1);
    border: var(--tb-bw) solid var(--tb-rule);
    border-radius: var(--tb-r-sm);
    font-family: var(--tb-font-mono);
    font-size: var(--tb-fs-xs);
    letter-spacing: var(--tb-ls-mono);
    color: var(--tb-petrol-soft);
}

/* ============================================================
   SELETTORE SITO
   La lista può arrivare a venti voci: scorre dentro il dialog
   invece di allungarlo oltre lo schermo, e ogni riga resta un
   bersaglio alto quanto un target tattile (§5).
   ============================================================ */

.tb-site-list {
    display: flex;
    flex-direction: column;
    gap: var(--tb-s-1);
    max-height: 46vh;
    overflow-y: auto;
}

.tb-site-row {
    display: flex;
    align-items: center;
    gap: var(--tb-s-1);
    border: var(--tb-bw) solid transparent;
    border-radius: var(--tb-r-sm);
}

/* Il sito attivo si distingue con superficie e bordo, non col solo colore (§3):
   la riga porta anche l'icona di spunta. */
.tb-site-row--current {
    background: var(--tb-surface-alt);
    border-color: var(--tb-rule);
}

.tb-site-row__pick {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--tb-s-3);
    min-height: var(--tb-tap);
    padding: var(--tb-s-2) var(--tb-s-3);
    background: transparent;
    border: 0;
    border-radius: var(--tb-r-sm);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--tb-dur) var(--tb-ease);
}

    .tb-site-row__pick:hover {
        background: var(--tb-rule-soft);
    }

    .tb-site-row__pick .mud-icon-root {
        flex-shrink: 0;
    }

.tb-site-row__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Nessuna ellissi sul nome: è l'etichetta che serve a decidere, e in tedesco
   cresce del 30% (§7). Va a capo, non si taglia. */
.tb-site-row__name {
    font-size: var(--tb-fs-md);
    font-weight: 500;
    line-height: var(--tb-lh-snug);
    overflow-wrap: break-word;
}

.tb-site-row__domain {
    font-size: var(--tb-fs-sm);
    line-height: var(--tb-lh-snug);
    color: var(--tb-grey);
    overflow-wrap: anywhere;
}

/* ============================================================
   DASHBOARD
   Una soglia in petrolio con una sola azione primaria, poi le
   quattro misure che dicono come sta il sito. Niente raggi né
   colori inline nei razor (§5): stanno qui, solo token.
   ============================================================ */

.tb-hero {
    background: var(--tb-petrol);
    color: var(--tb-ground);
}

.tb-hero__sub {
    margin-top: var(--tb-s-1);
    max-width: 58ch;
    opacity: .92;
}

/* Tessera di stato: cliccabile tutta, così il bersaglio è grande (§8.5).
   Si separa col bordo, non con l'ombra (§5). */
.tb-stat {
    display: flex;
    flex-direction: column;
    gap: var(--tb-s-1);
    height: 100%;
    padding: var(--tb-s-4);
    background: var(--tb-surface);
    border: var(--tb-bw) solid var(--tb-rule);
    border-radius: var(--tb-r-md);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--tb-dur) var(--tb-ease);
}

.tb-stat:hover {
    border-color: var(--tb-petrol);
}

.tb-stat__label {
    display: flex;
    align-items: center;
    gap: var(--tb-s-2);
    font-size: var(--tb-fs-sm);
    color: var(--tb-petrol-soft);
    overflow-wrap: break-word;
}

    .tb-stat__label .mud-icon-root {
        flex-shrink: 0;
        font-size: var(--tb-fs-lg);
        color: var(--tb-grey);
    }

/* Il valore è un dato misurato: mono e cifre tabellari, così la riga non balla
   quando i numeri si aggiornano (§4). */
.tb-stat__value {
    font-family: var(--tb-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--tb-ls-mono);
    font-size: var(--tb-fs-2xl);
    line-height: var(--tb-lh-snug);
    color: var(--tb-petrol);
}

.tb-stat__foot {
    display: flex;
    align-items: center;
    gap: var(--tb-s-1);
    margin-top: auto;
    padding-top: var(--tb-s-2);
    font-size: var(--tb-fs-sm);
    line-height: 1.35;
    color: var(--tb-grey);
    overflow-wrap: break-word;
}

    .tb-stat__foot .mud-icon-root {
        flex-shrink: 0;
        font-size: var(--tb-fs-md);
    }

/* Lo stato non è mai solo colore: ogni variante porta anche un'icona e il testo (§3). */
.tb-stat__foot--up {
    color: var(--tb-ok);
}

.tb-stat__foot--down {
    color: var(--tb-danger);
}

.tb-stat__foot--todo {
    color: var(--tb-brass-text);
}

/* ============================================================
   CHAT AI
   Aspetto derivato dai token Timbaly. Nessun gradiente di marca
   (§11), raggi 2/4px (§5), due sole ombre.
   ============================================================ */

.chat-root {
    position: relative;
    overflow: hidden;
    border-radius: var(--tb-r-md);
    background: var(--tb-surface);
}

/* Container altezza pagina chat - usa dvh per gestire virtual keyboard mobile */
.chat-page-container {
    height: calc(100dvh - 168px);
    min-height: 440px;
}

@media (max-width: 599px) {
    .chat-page-container {
        height: calc(100dvh - 116px);
        min-height: 320px;
    }
}

/* ===== Shell: sidebar + area chat ===== */

.chat-shell {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.chat-sidebar {
    width: 272px;
    min-width: 272px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--tb-surface);
    border-right: 1px solid var(--tb-rule);
}

.chat-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background:
        radial-gradient(1200px 420px at 85% -10%, var(--tb-surface-alt), transparent 60%),
        var(--tb-ground);
}

/* ===== Header ===== */

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 60px;
    padding: 10px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--tb-rule);
    background: var(--tb-surface);
    z-index: 5;
}

.chat-header-title {
    font-weight: 600;
    font-size: var(--tb-fs-md);
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46vw;
}

/* Avatar AI a gradiente — firma visiva premium */
.chat-ai-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--tb-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tb-surface);
    flex-shrink: 0;
    background: var(--tb-petrol);
    box-shadow: var(--tb-sh-1);
}

    .chat-ai-avatar .mud-icon-root {
        font-size: var(--tb-fs-lg);
    }

.chat-ai-avatar--sm {
    width: 28px;
    height: 28px;
    border-radius: var(--tb-r-md);
}

    .chat-ai-avatar--sm .mud-icon-root {
        font-size: var(--tb-fs-md);
    }

/* ===== Thread (area messaggi) ===== */

.chat-thread {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.chat-thread-scroll {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 18px clamp(12px, 4vw, 40px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* scrollbar discreta */
.chat-thread-scroll::-webkit-scrollbar,
.chat-sidebar-list::-webkit-scrollbar {
    width: 9px;
}

.chat-thread-scroll::-webkit-scrollbar-thumb,
.chat-sidebar-list::-webkit-scrollbar-thumb {
    background: var(--tb-rule);
    border-radius: var(--tb-r-full);
    border: 3px solid transparent;
    background-clip: padding-box;
}

    .chat-thread-scroll::-webkit-scrollbar-thumb:hover,
    .chat-sidebar-list::-webkit-scrollbar-thumb:hover {
        background: var(--tb-grey-mute);
        background-clip: padding-box;
    }

/* ===== Bolle messaggi ===== */

.chat-row {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-bottom: 14px;
    align-items: flex-start;
}

.chat-row--user {
    justify-content: flex-end;
}

.chat-bubble-user {
    max-width: min(86%, 640px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.chat-bubble-assistant {
    max-width: min(94%, 760px);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (min-width: 600px) {
    .chat-bubble-user {
        max-width: min(72%, 640px);
    }

    .chat-bubble-assistant {
        max-width: min(86%, 760px);
        flex: 1;
    }
}

.chat-paper-user {
    background: var(--tb-petrol);
    color: var(--tb-surface);
    border-radius: var(--tb-r-md) var(--tb-r-md) 6px var(--tb-r-md);
    padding: 11px 15px;
    box-shadow: var(--tb-sh-1);
}

    .chat-paper-user .chat-user-text {
        white-space: pre-wrap;
        word-break: break-word;
        color: var(--tb-surface);
        font-size: var(--tb-fs-md);
        line-height: 1.5;
    }

.chat-paper-assistant {
    background: var(--tb-surface);
    border: 1px solid var(--tb-rule);
    border-radius: 6px var(--tb-r-md) var(--tb-r-md) var(--tb-r-md);
    padding: 12px 16px;
    box-shadow: var(--tb-sh-1);
}

.chat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: var(--tb-fs-xs);
    color: var(--tb-grey);
    opacity: 0.85;
}

/* Avatar nascosti su mobile per guadagnare larghezza */
.chat-avatar-mobile-hide {
    display: none !important;
}

@media (min-width: 600px) {
    .chat-avatar-mobile-hide {
        display: flex !important;
    }
}

/* ===== Lista conversazioni (full-screen su mobile) ===== */

.chat-mobile-list-screen {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    background: var(--tb-surface);
    border-radius: var(--tb-r-md);
    overflow: hidden;
    animation: chatSlideIn 0.24s cubic-bezier(.22, 1, .36, 1) both;
}

.chat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    flex-shrink: 0;
}

.chat-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 10px 12px;
}

/* item conversazione */
.chat-conv-item {
    position: relative;
    cursor: pointer;
    border-radius: var(--tb-r-sm);
    padding: 10px 12px 10px 14px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

    .chat-conv-item:hover {
        background: var(--tb-surface-alt);
    }

    .chat-conv-item::before {
        content: "";
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%) scaleY(0);
        width: 3px;
        height: 56%;
        border-radius: var(--tb-r-full);
        background: var(--tb-petrol);
        transition: transform .18s cubic-bezier(.22, 1, .36, 1);
    }

.chat-conv-item--active {
    background: var(--tb-surface-alt);
    border-color: var(--tb-rule);
}

    .chat-conv-item--active::before {
        transform: translateY(-50%) scaleY(1);
    }

.chat-conv-title {
    font-weight: 500;
    font-size: var(--tb-fs-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-conv-preview {
    font-size: var(--tb-fs-sm);
    color: var(--tb-grey);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.chat-conv-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    font-size: var(--tb-fs-xs);
    color: var(--tb-grey);
}

/* ===== Composer (input) ===== */

.chat-composer {
    flex-shrink: 0;
    padding: 8px clamp(10px, 3vw, 24px) 14px;
}

.chat-composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

/* EU AI Act Art. 50(1) — disclosure "stai interagendo con un'AI" */
.chat-ai-disclosure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 6px;
    font-size: var(--tb-fs-xs);
    line-height: 1.3;
    text-align: center;
    opacity: 0.6;
}

.chat-ai-disclosure .mud-icon-root {
    font-size: var(--tb-fs-md);
}

/* pill auto-approve */
.chat-autopill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--tb-rule);
    background: transparent;
    color: var(--tb-grey);
    font: inherit;
    font-size: var(--tb-fs-sm);
    font-weight: 600;
    padding: 5px 11px;
    border-radius: var(--tb-r-full);
    cursor: pointer;
    transition: all .18s ease;
}

    .chat-autopill .mud-icon-root {
        font-size: var(--tb-fs-md);
    }

    .chat-autopill:hover {
        border-color: var(--tb-danger);
        color: var(--tb-danger);
    }

.chat-autopill--on {
    background: var(--tb-danger-wash);
    border-color: var(--tb-danger);
    color: var(--tb-danger);
}

/* campo input pill */
.chat-input-shell {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    border-radius: var(--tb-r-md);
    background: var(--tb-surface);
    border: 1.5px solid var(--tb-rule);
    box-shadow: var(--tb-sh-1);
    transition: border-color .18s ease, box-shadow .18s ease;
}

    .chat-input-shell:focus-within {
        border-color: var(--tb-brass);
        box-shadow: 0 0 0 3px rgba(168, 121, 46, .14);
    }

.chat-input-field {
    flex: 1;
    min-width: 0;
}

    /* reset look MudTextField dentro la pill */
    .chat-input-field .mud-input.mud-input-text {
        margin-top: 0;
    }

    .chat-input-field .mud-input-slot {
        padding: 8px 0 !important;
        font-size: var(--tb-fs-md) !important;
        line-height: 1.45 !important;
    }

/* bottone invio circolare a gradiente */
.chat-send-btn.mud-button-root {
    min-width: 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--tb-petrol);
    color: var(--tb-surface);
    box-shadow: var(--tb-sh-1);
    transition: transform .15s ease, opacity .15s ease, filter .15s ease;
}

    .chat-send-btn.mud-button-root:hover:not(:disabled) {
        transform: translateY(-1px) scale(1.04);
        filter: brightness(1.05);
    }

    .chat-send-btn.mud-button-root:disabled {
        background: var(--tb-rule-soft);
        color: var(--tb-grey-mute);
        box-shadow: none;
    }

.chat-input-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px 0;
    font-size: var(--tb-fs-xs);
    color: var(--tb-grey);
    opacity: 0.7;
}

/* ===== Welcome / empty state ===== */

.chat-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 24px;
    animation: chatMessageFadeIn .3s ease-out both;
}

/* Nessun galleggiamento: §6 vieta le animazioni ambientali nel pannello.
   L'elemento resta fermo, la gerarchia la porta la forma, non il movimento. */
.chat-welcome-orb {
    width: 76px;
    height: 76px;
    border-radius: var(--tb-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tb-surface);
    background: var(--tb-petrol);
    box-shadow: var(--tb-sh-1);
}

    .chat-welcome-orb .mud-icon-root {
        font-size: var(--tb-fs-2xl);
    }

.chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 540px;
    margin-top: 4px;
}

.chat-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-align: left;
    border: 1px solid var(--tb-rule);
    background: var(--tb-surface);
    color: var(--tb-petrol);
    border-radius: var(--tb-r-md);
    padding: 11px 15px;
    font: inherit;
    font-size: var(--tb-fs-sm);
    cursor: pointer;
    box-shadow: var(--tb-sh-1);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

    .chat-suggestion .mud-icon-root {
        font-size: var(--tb-fs-lg);
        color: var(--tb-petrol);
    }

    .chat-suggestion:hover {
        transform: translateY(-2px);
        border-color: var(--tb-petrol);
        box-shadow: var(--tb-sh-1);
    }

/* ===== Indicatore "sta scrivendo" ===== */

.chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .chat-typing span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--tb-grey);
        opacity: 0.5;
        animation: chatTyping 1.3s infinite ease-in-out;
    }

    .chat-typing span:nth-child(2) {
        animation-delay: 0.18s;
    }

    .chat-typing span:nth-child(3) {
        animation-delay: 0.36s;
    }

@keyframes chatTyping {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* ===== Animazioni ===== */

@keyframes chatMessageFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chatSlideIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.chat-message-enter {
    animation: chatMessageFadeIn 0.24s cubic-bezier(.22, 1, .36, 1) both;
}

/* I token disattivano già ogni animazione con prefers-reduced-motion; questo blocco
   resta perché con movimento ridotto la schermata deve restare COMPLETA (§6), e i
   nostri elementi entrano con opacity 0: senza questo sparirebbero.
   L'indicatore "sta scrivendo" è tenuto in loop di proposito: comunica uno stato di
   attesa come uno spinner, non è movimento ambientale. */
@media (prefers-reduced-motion: reduce) {
    .chat-message-enter,
    .chat-mobile-list-screen,
    .chat-welcome,
    .chat-typing span {
        animation: none !important;
    }
}

/* ===== Markdown ===== */

.chat-md-content {
    font-size: var(--tb-fs-md);
    line-height: 1.65;
    word-break: break-word;
}

.chat-md-line {
    display: inline;
}

.chat-md-h2 {
    display: block;
    font-size: 1.15em;
    font-weight: 700;
    margin: 0.9em 0 0.3em;
    line-height: 1.3;
}

.chat-md-h3 {
    display: block;
    font-size: 1.05em;
    font-weight: 700;
    margin: 0.7em 0 0.25em;
    line-height: 1.3;
}

.chat-md-h4 {
    display: block;
    font-size: 1em;
    font-weight: 600;
    margin: 0.5em 0 0.2em;
    line-height: 1.3;
}

.chat-md-list {
    margin: 0.35em 0 0.5em 1.4em;
    padding: 0;
}

    .chat-md-list li {
        margin-bottom: 0.25em;
        line-height: 1.55;
    }

code.chat-code-inline {
    background: var(--tb-surface-alt);
    padding: 0.12em 0.4em;
    border-radius: 4px;
    font-size: 0.875em;
    font-family: "JetBrains Mono", "Cascadia Code", "Consolas", monospace;
    color: var(--tb-petrol);
    border: 1px solid var(--tb-rule-soft);
}

pre.chat-code-block {
    background: var(--tb-petrol);
    color: var(--tb-ground);
    padding: 1em 1.2em;
    border-radius: var(--tb-r-md);
    overflow-x: auto;
    margin: 0.6em 0;
    font-size: 0.84em;
    font-family: "JetBrains Mono", "Cascadia Code", "Consolas", monospace;
    line-height: 1.6;
    border: var(--tb-bw) solid var(--tb-petrol-soft);
}

    pre.chat-code-block code {
        font-size: inherit;
        background: none;
        border: none;
        padding: 0;
        color: inherit;
    }

.chat-md-link {
    color: var(--tb-petrol);
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .chat-md-link:hover {
        opacity: 0.8;
    }

/* ===== Copy button ===== */

.chat-bubble-assistant-wrapper {
    position: relative;
}

.chat-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 1;
}

.chat-bubble-assistant-wrapper:hover .chat-copy-btn {
    opacity: 1;
}

/* ===== Scroll-to-bottom floating button ===== */

.chat-scroll-bottom-btn {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: chatMessageFadeIn 0.18s ease-out both;
}

    .chat-scroll-bottom-btn .mud-fab {
        box-shadow: var(--tb-sh-2);
        min-width: 38px !important;
        width: 38px !important;
        height: 38px !important;
    }

/* ============================================================
   AUTH — Login / Registrazione
   Split-screen: pannello valore (a gradiente, firma visiva del
   prodotto) + un solo form. Riusa i token condivisi sopra.
   ============================================================ */

.auth-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tb-s-6);
    background:
        radial-gradient(900px 420px at 10% -10%, var(--tb-surface-alt), transparent 62%),
        radial-gradient(720px 380px at 100% 110%, var(--tb-surface-alt), transparent 60%),
        var(--tb-ground);
}

.auth-card {
    width: 100%;
    max-width: 980px;
    display: grid;
    grid-template-columns: 1fr;
    border-radius: var(--tb-r-md);
    overflow: hidden;
    background: var(--tb-surface);
    border: 1px solid var(--tb-rule);
    box-shadow: var(--tb-sh-2);
    animation: chatMessageFadeIn .28s cubic-bezier(.22, 1, .36, 1) both;
}

@media (min-width: 900px) {
    .auth-card {
        grid-template-columns: 0.92fr 1.08fr;
    }
}

/* ===== Pannello brand / valore atteso ===== */

/* Petrolio pieno: il bianco ci sta a 12.35:1, quindi lo scrim che serviva a
   salvare il contrasto sul vecchio gradiente rosa non ha più ragione di esistere.
   Nessun gradiente di marca (§11), nessun blur (§11 vieta il glassmorphism). */
.auth-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--tb-s-4);
    padding: var(--tb-s-8) var(--tb-s-6);
    background: var(--tb-petrol);
    color: var(--tb-ground);
}

@media (min-width: 900px) {
    .auth-brand {
        gap: var(--tb-s-8);
        padding: var(--tb-s-12) var(--tb-s-8);
    }
}

/* Sul petrolio il simbolo va in ottone chiaro: il --tb-brass pieno su fondo
   scuro perde stacco, ed è il caso per cui esiste --tb-brass-light. */
.auth-brand .tb-logo__mark {
    color: var(--tb-brass-light);
}

.auth-brand-title {
    margin: 0;
    max-width: 24ch;
    font-family: var(--tb-font-display);
    font-size: var(--tb-fs-2xl);
    font-weight: 800;
    line-height: var(--tb-lh-snug);
    letter-spacing: var(--tb-ls-display);
}

@media (min-width: 900px) {
    .auth-brand-title {
        font-size: var(--tb-fs-h2);
    }
}

.auth-brand-sub {
    margin: var(--tb-s-3) 0 0;
    max-width: 46ch;
    font-size: var(--tb-fs-lg);
    line-height: var(--tb-lh-base);
    opacity: .92;
}

.auth-benefits {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-direction: column;
    gap: var(--tb-s-3);
}

/* Su mobile il form deve restare sopra il fold: resta solo l'essenziale. */
@media (min-width: 900px) {
    .auth-benefits {
        display: flex;
    }
}

.auth-benefit {
    display: flex;
    align-items: flex-start;
    gap: var(--tb-s-3);
    font-size: var(--tb-fs-md);
    line-height: var(--tb-lh-base);
    opacity: .95;
}

    .auth-benefit .mud-icon-root {
        flex-shrink: 0;
        margin-top: 1px;
        font-size: var(--tb-fs-xl);
    }

.auth-brand-foot {
    display: flex;
    align-items: center;
    gap: var(--tb-s-2);
    margin-top: auto;
    font-size: var(--tb-fs-sm);
    line-height: 1.4;
    opacity: .9;
}

    .auth-brand-foot .mud-icon-root {
        font-size: var(--tb-fs-md);
    }

/* ===== Pannello form ===== */

.auth-form-panel {
    display: flex;
    flex-direction: column;
    gap: var(--tb-s-6);
    padding: var(--tb-s-8) var(--tb-s-6);
    background: var(--tb-surface);
}

@media (min-width: 900px) {
    .auth-form-panel {
        padding: var(--tb-s-12) var(--tb-s-8);
    }
}

.auth-form-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.auth-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Barra di sicurezza password: progresso visibile, non un divieto */
.auth-strength {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-strength-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--tb-fs-sm);
    color: var(--tb-grey);
}

/* "Password dimenticata?": azione terziaria, allineata a destra sotto il campo */
.auth-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Stato di esito: link inviato, oppure link scaduto/non valido sulla pagina di reset */
.auth-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 0 8px;
    text-align: center;
    animation: chatMessageFadeIn .24s cubic-bezier(.22, 1, .36, 1) both;
}

.auth-sent-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 4px;
    color: var(--tb-ok);
    background: var(--tb-ok-wash);
}

.auth-sent-icon--warn {
    color: var(--tb-danger);
    background: var(--tb-danger-wash);
}

.auth-sent .mud-button-root {
    margin-top: 12px;
}

.auth-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--tb-rule);
    font-size: var(--tb-fs-sm);
    color: var(--tb-grey);
}

@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .auth-sent {
        animation: none !important;
    }
}

/* ===== Form floating placeholder ===== */

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}