/* Hallmark · macrostructure: Operations Console · tone: modern-minimal · anchor hue: cobalt
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (40–41)
 */

html,
body {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    margin: 0;
    min-height: 100%;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

button,
input,
select,
textarea {
    font: inherit;
}

a,
.btn-link {
    color: var(--color-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--rule-focus) solid var(--color-focus);
    outline-offset: var(--rule-focus);
}

h1,
h2,
h3 {
    color: var(--color-ink);
    font-style: normal;
}

h1 {
    overflow-wrap: anywhere;
}

code {
    font-family: var(--font-mono);
}

.configuration-header,
.workspace-header,
.templates-header,
.conversation-header {
    margin-block-end: var(--space-xl);
}

.configuration-header > p,
.context-line {
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    margin: 0 0 var(--space-xs);
}

.configuration-header h1,
.workspace-header h1,
.templates-header h1,
.conversation-header h1,
.page-state h1 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 650;
    letter-spacing: -.035em;
    margin: 0 0 var(--space-sm);
    min-width: 0;
    overflow-wrap: anywhere;
}

.configuration-header > span {
    color: var(--color-muted);
    display: block;
}

.configuration-panel,
.workbench-panel,
.template-list-panel,
.template-create-panel,
.message-history,
.conversation-layout,
.endpoint-summary,
.tenant-strip,
.meta-rules {
    border-radius: var(--radius-md);
}

.configuration-panel,
.workbench-panel,
.template-list-panel,
.template-create-panel,
.message-history {
    background: var(--color-surface);
    border: var(--rule-thin) solid var(--color-rule);
}

.field {
    min-width: 0;
}

.field label {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 650;
}

.helper,
.file-hint,
.validation-message {
    font-size: var(--text-xs);
    min-height: 1lh;
}

.helper,
.file-hint {
    color: var(--color-muted);
}

.validation-message {
    color: var(--color-error);
}

.control,
.conversation-search input,
.contact-editor input,
.reply-composer textarea,
.reply-composer select,
.attachment-composer input[type="file"],
.attachment-composer input[type="text"] {
    background: var(--color-paper);
    border: var(--rule-thin) solid var(--color-rule-strong);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    min-height: var(--control-height);
    min-width: 0;
    outline: var(--rule-focus) solid transparent;
    outline-offset: var(--rule-thin);
    padding-inline: var(--space-md);
}

.control:focus-visible,
.conversation-search input:focus-visible,
.contact-editor input:focus-visible,
.reply-composer textarea:focus-visible,
.reply-composer select:focus-visible,
.attachment-composer input:focus-visible {
    outline-color: var(--color-focus);
}

.control:disabled,
.conversation-search input:disabled,
.contact-editor input:disabled,
.reply-composer textarea:disabled,
.reply-composer select:disabled,
.attachment-composer input:disabled {
    color: var(--color-muted);
    cursor: not-allowed;
    opacity: .55;
}

.invalid,
.control.invalid {
    border-color: var(--color-error);
}

.valid.modified:not([type="checkbox"]) {
    border-color: var(--color-success);
}

.primary-action,
.secondary-action {
    align-items: center;
    border-radius: var(--radius-sm);
    display: inline-flex;
    justify-content: center;
    min-height: var(--control-height);
    padding-inline: var(--space-lg);
    text-decoration: none;
    white-space: nowrap;
}

.primary-action {
    background: var(--color-accent);
    border: var(--rule-thin) solid var(--color-accent);
    color: var(--color-accent-ink);
}

.secondary-action {
    background: var(--color-paper);
    border: var(--rule-thin) solid var(--color-rule-strong);
    color: var(--color-ink);
}

.primary-action:active,
.secondary-action:active {
    transform: translateY(var(--rule-thin));
}

.primary-action:disabled,
.secondary-action:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.token-state,
.provider-badge,
.status-badge,
.save-result,
.result-panel,
.template-alert {
    border-radius: var(--radius-sm);
}

.error-panel,
.save-result.is-error,
.result-panel.is-error,
.template-alert.is-error {
    background: var(--color-error-soft);
    border-color: var(--color-error);
    color: var(--color-error);
}

.page-state {
    background: var(--color-surface);
    border: var(--rule-thin) solid var(--color-rule);
    border-radius: var(--radius-md);
    max-width: 42rem;
    padding: clamp(var(--space-xl), 6vw, var(--space-2xl));
}

.page-state > p:not(.context-line) {
    color: var(--color-muted);
    max-width: 60ch;
}

.page-state dl {
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
    display: grid;
    gap: var(--space-xs);
    margin-block: var(--space-lg);
    padding: var(--space-md);
}

.page-state dt {
    color: var(--color-muted);
    font-size: var(--text-xs);
}

.page-state dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.page-state.is-error {
    border-color: var(--color-error);
}

.blazor-error-boundary {
    background: var(--color-error);
    color: var(--color-accent-ink);
    padding: var(--space-md);
}

.blazor-error-boundary::after {
    content: "Si è verificato un errore.";
}

@media (hover: hover) and (pointer: fine) {
    .control:hover,
    .secondary-action:hover {
        background: var(--color-surface-muted);
    }

    .primary-action:hover {
        transform: translateY(calc(var(--rule-thin) * -1));
    }
}

@media (max-width: 40rem) {
    .configuration-header,
    .workspace-header,
    .templates-header,
    .conversation-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .primary-action,
    .secondary-action {
        transition-duration: var(--dur-reduced);
    }
}
/* Portal login — pagine di accesso non ancora rifatte in questa fase (es. /no-access): restano
 * un'unica card centrata, ma ora nel sistema Dark Messivo invece dei token precedenti. */
.login-page {
    align-items: center;
    background: var(--msv-bg);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-xl);
}

.login-panel {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-card);
    color: var(--msv-text-primary);
    font-family: var(--msv-font-display);
    max-width: 28rem;
    padding: var(--space-xl);
    width: 100%;
}

.login-panel h1 {
    color: var(--msv-text-primary);
}

.login-panel .helper {
    color: var(--msv-text-secondary);
}

.login-panel .field label {
    color: var(--msv-text-primary);
}

.login-panel .control {
    background: var(--msv-surface-alt);
    border-color: var(--msv-border);
    color: var(--msv-text-primary);
}

.login-panel .control:focus-visible {
    outline-color: var(--msv-border-focus);
}

.login-panel .primary-action {
    background: var(--msv-accent);
    border-color: var(--msv-accent);
    color: var(--msv-accent-ink);
}

.login-panel .secondary-action {
    background: transparent;
    border-color: var(--msv-border);
    color: var(--msv-text-primary);
}

.login-panel .save-result.is-error {
    background: var(--msv-error-bg);
    border-color: var(--msv-error);
    color: var(--msv-error);
}

.login-panel form {
    display: grid;
    gap: var(--space-lg);
    margin-top: var(--space-lg);
}

.login-panel .field {
    display: grid;
    gap: var(--space-sm);
}

.login-panel .control {
    width: 100%;
}
/* Dashboard condivise dei tre ambiti del portale. */
.scope-dashboard-header {
    border-inline-start: .35rem solid var(--scope-color);
    margin-block-end: var(--space-xl);
    max-width: 70rem;
    padding-inline-start: var(--space-lg);
}

.scope-dashboard-header p {
    color: var(--scope-color);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    margin: 0 0 var(--space-xs);
    text-transform: uppercase;
}

.scope-dashboard-header h1 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    letter-spacing: -.035em;
    margin: 0 0 var(--space-sm);
}

.scope-dashboard-header span,
.panel-title p,
.summary-row span,
.metric-grid small,
.empty-state {
    color: var(--color-muted);
}

.provider-scope {
    --scope-color: #9a62df;
    --scope-soft: #f0e5ff;
}

.software-house-scope {
    --scope-color: #d89a00;
    --scope-soft: #fff2cc;
}

.client-demo-scope {
    --scope-color: #238de1;
    --scope-soft: #e0f1ff;
}

.metric-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-block-end: var(--space-lg);
}

.metric-grid article,
.scope-dashboard-panel {
    background: var(--color-surface);
    border: var(--rule-thin) solid var(--color-rule);
    border-radius: var(--radius-md);
}

.metric-grid article {
    border-block-start: .25rem solid var(--scope-color);
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-lg);
}

.metric-grid span {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.metric-grid strong {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
}

.scope-dashboard-panel {
    margin-block-end: var(--space-lg);
    padding: clamp(var(--space-lg), 4vw, var(--space-xl));
}

.panel-title {
    align-items: center;
    display: flex;
    gap: var(--space-lg);
    justify-content: space-between;
    margin-block-end: var(--space-md);
}

.panel-title h2,
.panel-title p {
    margin: 0;
}

.panel-title p {
    margin-block-start: var(--space-xs);
}

.summary-row {
    align-items: center;
    border-block-start: var(--rule-thin) solid var(--color-rule);
    display: flex;
    gap: var(--space-lg);
    justify-content: space-between;
    padding-block: var(--space-md);
}

.summary-row div {
    display: grid;
    gap: var(--space-xs);
}

.state-pill {
    background: var(--color-error-soft);
    border-radius: var(--radius-sm);
    color: var(--color-error);
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-sm);
}

.state-pill.is-active {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.action-link {
    align-items: center;
    display: inline-flex;
    text-decoration: none;
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

@media (max-width: 65rem) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .metric-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel-title,
    .summary-row {
        align-items: stretch;
        flex-direction: column;
    }
}

/* === Messivo — shell (Fase 1, estesa) ===
 * La classe .theme-dark / .theme-light viene messa da MainLayout.razor su .page in base al ruolo
 * (Provider = Light Technical, TenantOwner/User = Dark) e risolve i token --msv-* di tokens.css.
 * Lo sfondo di .page.theme-dark copre anche .content (compreso il suo padding, altrimenti
 * resterebbe --color-paper del <body> a fare da bordo chiaro intorno alle pagine — bug osservato
 * su Dashboard/Impostazioni tenant): tutte le pagine raggiungibili da TenantOwner/User oggi
 * vivono già dentro .tenant-scope-body (Home/Templates/Onboarding/Contatti/Dashboard/
 * Impostazioni), quindi non c'è più testo scuro-su-scuro da temere qui. Provider resta
 * .theme-light, invariato: il suo .content non riceve queste regole.
 */
.page.theme-dark {
    background: var(--msv-bg);
    color: var(--msv-text-primary);
}

.page.theme-dark > main > .content h1,
.page.theme-dark > main > .content h2,
.page.theme-dark > main > .content h3 {
    /* La regola globale "h1,h2,h3 { color: var(--color-ink) }" più sopra è scura per design
       (schermate Provider/auth) — qui va sovrascritta, altrimenti i titoli restano illeggibili
       su sfondo nero (le pagine .tenant-scope-body coprono solo alcuni titoli via selettori più
       specifici, es. .workspace-header h1). */
    color: var(--msv-text-primary);
}
/* Layout di base dello shell (.page > .sidebar + main > .top-row + .content): non dipende dal
 * tema, quindi vive fuori dalle regole .theme-dark/.theme-light. Mancava del tutto prima d'ora —
 * .sidebar/main si limitavano a impilarsi come blocchi normali, mai messi fianco a fianco a piena
 * altezza. Necessario perché l'inbox (Fase 3) deve occupare esattamente lo spazio disponibile,
 * non "quanto le serve".
 */
.page {
    align-items: stretch;
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.page > main {
    align-items: stretch;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    width: 100%;
}

.page > main > .content {
    align-items: stretch;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin-inline: auto;
    max-width: 76rem;
    min-height: 0;
    padding: clamp(var(--space-lg), 4vw, var(--space-2xl));
    width: 100%;
}

/* L'inbox (#1b) è l'unica schermata pensata per occupare tutto lo schermo, bordo a bordo — le
 * altre restano nella larghezza di lettura di sempre (76rem, centrata), come prima di questo
 * restyling. Non è una scelta estetica nuova: solo la conversazione l'ha mai chiesta. */
.page > main > .content:has(.inbox-shell) {
    margin-inline: 0;
    max-width: none;
    padding: 0;
}

/* La griglia clienti ha molte colonne + azioni su una riga: occupa tutta la larghezza disponibile
 * invece dei 76rem di lettura, così non compare lo scorrimento orizzontale. */
.page > main > .content:has(.clients-page) {
    max-width: none;
}

/* Solo per l'inbox (desktop, layout a 3 colonne): la pagina non deve scrollare, solo i pannelli
 * interni (lista conversazioni, thread) — .page/main/.content passano da "almeno 100vh" (le altre
 * pagine, che scrollano normalmente) a "esattamente 100vh + overflow:hidden", così lo scroll è
 * forzato a scendere fino a .inbox-conversation-rows/.inbox-message-list. Sotto i 68.75rem la
 * barra laterale col contesto sparisce già e .inbox-shell torna ad altezza naturale (vedi media
 * query più sotto): lì la pagina deve poter scrollare normalmente, quindi il vincolo si applica
 * solo sopra quella soglia — altrimenti .content taglierebbe il layout mobile impilato invece di
 * lasciarlo scrollare. */
@media (min-width: 68.75rem) {
    .page:has(.inbox-shell) {
        height: 100vh;
        overflow: hidden;
    }

    .page:has(.inbox-shell) > main {
        height: 100vh;
        overflow: hidden;
    }

    .page > main > .content:has(.inbox-shell) {
        overflow: hidden;
    }
}

/* Solo i wrapper Messivo (non le pagine non ancora ridisegnate: quelle restano a flusso normale,
 * altezza naturale, come sempre — nessun rischio di romperle). */
.page > main > .content > .provider-scope-body,
.page > main > .content > .tenant-scope-body {
    align-items: stretch;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.page.theme-dark .sidebar,
.page.theme-light .sidebar {
    background: var(--msv-sidebar-bg);
    border-right: var(--rule-thin) solid var(--msv-sidebar-border);
    color: var(--msv-sidebar-ink);
    display: flex;
    flex-direction: column;
    flex: 0 0 212px;
    font-family: var(--msv-font-display);
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm);
    width: 212px;
}

.page.theme-dark .sidebar .top-row,
.page.theme-light .sidebar .top-row {
    align-items: center;
    background: none;
    border-bottom: var(--rule-thin) solid var(--msv-sidebar-border);
    display: flex;
    height: auto;
    justify-content: flex-start;
    padding: 0 var(--space-xs) var(--space-md);
}

.page.theme-dark .sidebar .brand-block,
.page.theme-light .sidebar .brand-block {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.page.theme-dark .sidebar .navbar-brand,
.page.theme-light .sidebar .navbar-brand {
    align-items: center;
    color: var(--msv-sidebar-ink);
    display: inline-flex;
    font-size: 15px;
    font-weight: 800;
    gap: 8px;
    letter-spacing: -.02em;
    text-decoration: none;
}

.page.theme-dark .sidebar .navbar-brand img,
.page.theme-light .sidebar .navbar-brand img {
    display: block;
    height: 40px;
    width: auto;
}

.page.theme-dark .sidebar .brand-block span,
.page.theme-light .sidebar .brand-block span {
    color: var(--msv-sidebar-ink-muted);
    font-family: var(--msv-font-mono);
    font-size: 9.5px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.page.theme-dark .sidebar .navbar-toggler,
.page.theme-light .sidebar .navbar-toggler {
    display: none;
}

.page.theme-dark .sidebar .nav-scrollable,
.page.theme-light .sidebar .nav-scrollable {
    flex: 1;
    overflow-y: auto;
}

.page.theme-dark .sidebar .nav-tree,
.page.theme-light .sidebar .nav-tree {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.page.theme-dark .sidebar .nav-area header,
.page.theme-light .sidebar .nav-area header {
    align-items: center;
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-xs) var(--space-xs);
}

.page.theme-dark .sidebar .nav-area .area-marker,
.page.theme-light .sidebar .nav-area .area-marker {
    background: var(--msv-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--msv-accent) 16%, transparent);
    flex-shrink: 0;
    height: 6px;
    width: 6px;
}

/* Ambito "Gestione clienti" (NavMenu.razor): stesso marker del menu Tenant, in viola per
 * distinguere i due ambiti a colpo d'occhio. */
.page.theme-dark .sidebar .nav-area.clients-area .area-marker,
.page.theme-light .sidebar .nav-area.clients-area .area-marker {
    background: #a78bfa;
    box-shadow: 0 0 0 3px color-mix(in srgb, #a78bfa 16%, transparent);
}

.page.theme-dark .sidebar .nav-area header strong,
.page.theme-light .sidebar .nav-area header strong {
    color: var(--msv-sidebar-ink);
    display: block;
    font-size: 11.5px;
    font-weight: 700;
}

.page.theme-dark .sidebar .nav-area header small,
.page.theme-light .sidebar .nav-area header small {
    color: var(--msv-sidebar-ink-muted);
    font-family: var(--msv-font-mono);
    font-size: 9.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.page.theme-dark .sidebar .nav-link,
.page.theme-light .sidebar .nav-link {
    border-radius: var(--msv-radius-control);
    color: var(--msv-sidebar-ink-muted);
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    padding: 9px 10px;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.page.theme-dark .sidebar .nav-link:hover,
.page.theme-light .sidebar .nav-link:hover {
    background: var(--msv-sidebar-hover-bg);
    color: var(--msv-sidebar-ink);
}

.page.theme-dark .sidebar .nav-link.active,
.page.theme-light .sidebar .nav-link.active {
    background: var(--msv-sidebar-active-bg);
    color: var(--msv-sidebar-active-ink);
    font-weight: 600;
}

.page.theme-dark main > .top-row,
.page.theme-light main > .top-row {
    align-items: center;
    background: var(--msv-surface);
    border-bottom: var(--rule-thin) solid var(--msv-border);
    display: flex;
    font-family: var(--msv-font-display);
    gap: var(--space-lg);
    height: auto;
    justify-content: flex-end;
    padding: var(--space-sm) var(--space-lg);
}

.page.theme-dark main > .top-row .area-context,
.page.theme-light main > .top-row .area-context {
    align-items: center;
    display: flex;
    gap: var(--space-sm);
    margin-right: auto;
}

.page.theme-dark main > .top-row .area-context .context-marker,
.page.theme-light main > .top-row .area-context .context-marker {
    background: var(--msv-accent);
    border-radius: 50%;
    flex-shrink: 0;
    height: 6px;
    width: 6px;
}

.page.theme-dark main > .top-row .area-context small,
.page.theme-light main > .top-row .area-context small {
    color: var(--msv-text-tertiary);
    display: block;
    font-family: var(--msv-font-mono);
    font-size: 9px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.page.theme-dark main > .top-row .area-context strong,
.page.theme-light main > .top-row .area-context strong {
    color: var(--msv-text-primary);
    font-size: 12.5px;
    font-weight: 600;
}

.page.theme-dark main > .top-row .area-context-invited-by,
.page.theme-light main > .top-row .area-context-invited-by {
    color: var(--msv-text-tertiary);
    display: block;
    font-size: 11px;
}

.page.theme-dark main > .top-row .environment-label,
.page.theme-light main > .top-row .environment-label {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page.theme-dark main > .top-row .portal-user,
.page.theme-light main > .top-row .portal-user {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.page.theme-dark main > .top-row .portal-user span,
.page.theme-light main > .top-row .portal-user span {
    color: var(--msv-text-tertiary);
    font-size: 10.5px;
}

.page.theme-dark main > .top-row .portal-user strong,
.page.theme-light main > .top-row .portal-user strong {
    color: var(--msv-text-primary);
    font-size: 12px;
    font-weight: 600;
}

.page.theme-dark main > .top-row .lang-switch,
.page.theme-light main > .top-row .lang-switch {
    align-items: center;
    color: var(--msv-text-tertiary);
    display: flex;
    font-family: var(--msv-font-mono);
    font-size: var(--text-xs);
    gap: var(--space-xs);
}

.page.theme-dark main > .top-row .lang-switch a,
.page.theme-light main > .top-row .lang-switch a {
    color: var(--msv-text-tertiary);
    text-decoration: none;
}

.page.theme-dark main > .top-row .lang-switch a.is-active,
.page.theme-light main > .top-row .lang-switch a.is-active {
    color: var(--msv-accent);
    font-weight: 700;
}

.page.theme-dark main > .top-row .lang-switch a:hover,
.page.theme-light main > .top-row .lang-switch a:hover {
    color: var(--msv-text-primary);
}

.page.theme-dark main > .top-row .link-action,
.page.theme-light main > .top-row .link-action {
    background: none;
    border: none;
    border-radius: var(--msv-radius-control);
    color: var(--msv-text-secondary);
    cursor: pointer;
    font-size: 12px;
    padding: 6px 10px;
}

.page.theme-dark main > .top-row .link-action:hover,
.page.theme-light main > .top-row .link-action:hover {
    background: var(--msv-surface-alt);
    color: var(--msv-text-primary);
}

/* === Messivo — componenti base condivisi (Fase 1) ===
 * Classi con prefisso msv- (namespace separato da quelle sopra, che restano quelle del sistema
 * visivo precedente) pronte per essere consumate dalle schermate nelle Fasi 2-4: vanno usate
 * dentro un antenato .theme-dark o .theme-light. Nessuna pagina le consuma ancora in questa fase.
 */
.msv-card {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-card);
    padding: var(--space-md) var(--space-lg);
}

.msv-table {
    border-collapse: collapse;
    font-family: var(--msv-font-display);
    font-size: 11.5px;
    width: 100%;
}

/* Mai una cella stretta che tronca un dato (regola "Gli ID Meta si leggono", README) — meglio
 * scorrimento orizzontale del contenitore (.provider-table-scroll) che andare a capo. */
.msv-table th,
.msv-table td {
    white-space: nowrap;
}

.msv-table thead th {
    background: var(--msv-surface-alt);
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 11px var(--space-md);
    text-align: left;
    text-transform: uppercase;
}

.msv-table tbody td {
    border-top: var(--rule-thin) solid var(--msv-border-subtle);
    color: var(--msv-text-primary);
    padding: 11px var(--space-md);
}

.msv-table tbody tr:hover {
    background: var(--msv-surface-alt);
}

.msv-btn {
    align-items: center;
    border: var(--rule-thin) solid transparent;
    border-radius: var(--msv-radius-control);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--msv-font-display);
    font-size: 12.5px;
    font-weight: 700;
    gap: var(--space-xs);
    justify-content: center;
    padding: 11px var(--space-md);
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease-out);
}

.msv-btn:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.msv-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.msv-btn-primary {
    background: var(--msv-action-primary-bg);
    border-color: var(--msv-action-primary-bg);
    color: var(--msv-action-primary-ink);
}

.msv-btn-secondary {
    background: transparent;
    border-color: var(--msv-border);
    color: var(--msv-text-primary);
}

.msv-pill {
    border: var(--rule-thin) solid transparent;
    border-radius: var(--msv-radius-pill);
    display: inline-flex;
    font-family: var(--msv-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 4px 10px;
    text-transform: uppercase;
}

.msv-pill--accent {
    background: var(--msv-accent-soft);
    color: var(--msv-accent);
}

.msv-pill--ok {
    background: var(--msv-success-bg);
    color: var(--msv-success);
}

.msv-pill--warning {
    background: var(--msv-warning-bg);
    border-color: var(--msv-warning-border, transparent);
    color: var(--msv-warning);
}

.msv-pill--error {
    background: var(--msv-error-bg);
    border-color: var(--msv-error-border, transparent);
    color: var(--msv-error);
}

.msv-pill--neutral {
    background: var(--msv-surface-alt);
    color: var(--msv-text-tertiary);
}

.msv-badge-mono {
    background: var(--msv-surface-alt);
    border-radius: 6px;
    color: var(--msv-text-secondary);
    font-family: var(--msv-font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .03em;
    padding: 2px 6px;
}

.msv-status-dot {
    align-items: center;
    color: var(--msv-text-secondary);
    display: inline-flex;
    font-family: var(--msv-font-display);
    font-size: 11.5px;
    gap: 7px;
}

.msv-status-dot__mark {
    background: var(--msv-neutral-dot);
    border-radius: 50%;
    flex-shrink: 0;
    height: 7px;
    width: 7px;
}

.msv-status-dot--ok .msv-status-dot__mark {
    background: var(--msv-success);
}

.msv-status-dot--warning .msv-status-dot__mark {
    background: var(--msv-warning);
}

.msv-status-dot--error .msv-status-dot__mark {
    background: var(--msv-error);
}

.msv-status-dot.is-live .msv-status-dot__mark {
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent);
}

.msv-field-copy--secret {
    align-items: flex-start;
    width: 100%;
}

.msv-field-copy__raw {
    overflow-wrap: anywhere;
}

.msv-field-copy {
    align-items: center;
    background: var(--msv-surface-alt);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-control);
    color: var(--msv-text-primary);
    display: inline-flex;
    font-family: var(--msv-font-mono);
    font-size: 11px;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
}

.msv-field-copy__action {
    background: none;
    border: none;
    color: var(--msv-accent);
    cursor: pointer;
    font-family: var(--msv-font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 0;
    text-transform: uppercase;
}

.msv-field-copy__action:hover {
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .msv-btn {
        transition-duration: var(--dur-reduced);
    }
}

/* === Messivo — accesso (Fase "Accesso") ===
 * Login (/login) e selettore spazio (/spazio). Schermata #2a del README: split-grid a due
 * colonne, sempre nel sistema Dark. Solo queste due pagine usano .auth-*; NoAccess resta sulla
 * card singola sopra (.login-page/.login-panel), già portata ai token --msv-* in Fase 1.
 */
.auth-shell {
    background: var(--msv-bg);
    color: var(--msv-text-primary);
    display: grid;
    font-family: var(--msv-font-display);
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

/* /login: nessuna colonna destra (esiste solo su /spazio, con contenuto vero) — un'unica card
 * centrata nell'intero schermo, non nella metà sinistra di una griglia vuota. */
.auth-center {
    align-items: center;
    background: var(--msv-bg);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 44px;
}

.auth-col {
    display: flex;
    justify-content: center;
    padding: 44px;
}

.auth-col-left {
    background: var(--msv-bg);
}

.auth-col-right {
    background: var(--msv-surface-alt);
    border-left: var(--rule-thin) solid var(--msv-border);
}

.auth-content {
    margin: auto 0;
    width: 100%;
}

.auth-brand {
    align-items: center;
    color: var(--msv-text-primary);
    display: flex;
    font-size: 17px;
    font-weight: 700;
    gap: 10px;
    justify-content: center;
    margin-bottom: 32px;
    text-decoration: none;
    width: 100%;
}

.auth-logo {
    align-items: center;
    background: var(--msv-logo-gradient, linear-gradient(140deg, #4ade9f, #22b481));
    border-radius: 8px;
    color: #062015;
    display: inline-flex;
    font-size: 15px;
    font-weight: 800;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.auth-logo-image {
    display: block;
    height: 46px;
    width: auto;
}

.auth-logo-image--lg {
    height: 68px;
}

.auth-input-group {
    position: relative;
}

.auth-input-group .auth-input {
    padding-right: 42px;
}

.auth-input-toggle {
    background: none;
    border: none;
    color: var(--msv-text-tertiary);
    cursor: pointer;
    padding: 6px;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.auth-input-toggle:hover {
    color: var(--msv-text-primary);
}

.auth-title {
    color: var(--msv-text-primary);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.03em;
    margin: 0 0 8px;
}

.auth-title--sm {
    font-size: 20px;
}

.auth-subtitle {
    color: var(--msv-text-secondary);
    font-size: 13.5px;
    margin: 0 0 24px;
}

.auth-kicker {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .11em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.auth-error {
    background: var(--msv-error-bg);
    border: var(--rule-thin) solid var(--msv-error-border, var(--msv-error));
    border-radius: var(--msv-radius-control);
    color: var(--msv-error);
    font-size: 12px;
    margin: 0 0 16px;
    padding: 10px 12px;
}

.auth-field {
    margin-bottom: 18px;
}

.auth-field-heading {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
}

.auth-field label {
    color: var(--msv-text-tertiary);
    display: block;
    font-family: var(--msv-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .11em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.auth-link {
    color: var(--msv-accent);
    display: block;
    font-size: 10.5px;
    margin-top: 6px;
    text-align: right;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-link--inline {
    display: inline;
    margin-top: 0;
    text-align: left;
}

.auth-input {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: 9px;
    color: var(--msv-text-primary);
    font: inherit;
    padding: 11px 13px;
    width: 100%;
}

.auth-input:focus-visible {
    border-color: var(--msv-border-focus);
    outline: none;
}

/* Il browser forza uno sfondo chiaro sui campi con autofill/password salvate: senza questo
 * override sembra un input "rotto" nel tema scuro. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--msv-surface) inset;
    -webkit-text-fill-color: var(--msv-text-primary);
    box-shadow: 0 0 0 1000px var(--msv-surface) inset;
    caret-color: var(--msv-text-primary);
    transition: background-color 9999s ease-in-out 0s;
}

.phone-input-group {
    display: flex;
    gap: 8px;
}

.phone-prefix-select {
    flex: 0 0 auto;
    width: auto;
    max-width: 11rem;
}

.phone-local-input {
    flex: 1;
    min-width: 0;
}

.auth-field-error {
    color: var(--msv-error);
    display: block;
    font-size: 11px;
    min-height: 1lh;
    margin-top: 4px;
}

.auth-field--checkbox {
    margin-bottom: 22px;
}

.auth-checkbox {
    align-items: center;
    color: var(--msv-text-secondary);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    gap: 8px;
}

.auth-checkbox input[type="checkbox"] {
    accent-color: var(--msv-accent);
    cursor: pointer;
    height: 15px;
    margin: 0;
    width: 15px;
}

.auth-submit {
    background: var(--msv-accent);
    border: var(--rule-thin) solid var(--msv-accent);
    border-radius: 9px;
    color: var(--msv-accent-ink);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    padding: 12px;
    width: 100%;
}

.auth-submit:active {
    transform: translateY(1px);
}

.auth-secondary {
    background: transparent;
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: 9px;
    color: var(--msv-text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 11px;
    width: 100%;
}

.auth-secondary:disabled {
    cursor: not-allowed;
    opacity: .55;
}

.auth-footnote {
    color: var(--msv-text-disabled);
    font-size: 11px;
    margin: 22px 0 0;
}

.space-list {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.space-card {
    align-items: center;
    background: var(--msv-surface);
    border: var(--rule-thin) solid transparent;
    border-radius: 10px;
    color: inherit;
    display: flex;
    gap: 12px;
    padding: 13px 14px;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out);
}

.space-card:hover {
    border-color: var(--msv-border);
}

.space-card.is-current {
    border-color: var(--msv-border-focus);
}

.space-avatar {
    align-items: center;
    background: var(--msv-avatar-neutral-bg, var(--msv-surface-alt));
    border-radius: 9px;
    color: var(--msv-avatar-neutral-ink, var(--msv-text-secondary));
    display: flex;
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.space-card.is-current .space-avatar {
    background: var(--msv-avatar-active-bg, var(--msv-accent-soft));
    color: var(--msv-avatar-active-ink, var(--msv-accent));
}

.space-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.space-info strong {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.space-info small {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 10.5px;
}

.space-dot {
    background: var(--msv-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--msv-accent) 16%, transparent);
    flex-shrink: 0;
    height: 7px;
    margin-left: auto;
    width: 7px;
}

.space-card--add {
    border-style: dashed;
    border-color: var(--msv-border);
}

.space-avatar--add {
    background: transparent;
    border: 1px dashed var(--msv-border);
    color: var(--msv-text-tertiary);
    font-size: 16px;
    font-weight: 400;
}

.auth-staff-banner {
    align-items: center;
    color: var(--msv-text-secondary);
    display: flex;
    font-size: 11.5px;
    gap: 10px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 68.75rem) {
    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-col-right:empty {
        display: none;
    }
}

/* === Messivo — console provider (Light Technical, Fase 2) ===
 * Corpo pagina delle schermate #1d/#2e/#2d. `--msv-*` è già in eredità da .page.theme-light
 * (Fase 1), quindi basta questo wrapper per font/colore di base; i componenti .msv-* di Fase 1
 * fanno il resto.
 */
.provider-scope-body {
    color: var(--msv-text-primary);
    font-family: var(--msv-font-display);
}

.provider-page-header {
    align-items: flex-end;
    display: flex;
    gap: var(--space-lg);
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.provider-page-header h1 {
    color: var(--msv-text-primary);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 4px;
}

.provider-updated {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    margin: 0;
    text-transform: uppercase;
}

.provider-page-header__actions {
    align-items: center;
    display: flex;
    gap: var(--space-sm);
}

.provider-kpi-grid {
    display: grid;
    gap: var(--msv-gap-card);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--msv-gap-card);
}

.provider-kpi-card {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-card);
    display: grid;
    gap: 4px;
    padding: 13px 14px;
}

.provider-kpi-card.is-warning {
    border-color: var(--msv-warning-border, var(--msv-warning));
}

.provider-kpi-card.is-warning .provider-kpi-value {
    color: var(--msv-warning);
}

.provider-kpi-card.is-error .provider-kpi-value {
    color: var(--msv-error);
}

.provider-kpi-label {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.provider-kpi-value {
    color: var(--msv-text-primary);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.03em;
}

.provider-kpi-delta {
    color: var(--msv-text-tertiary);
    font-size: 10.5px;
}

.provider-table-card {
    margin-bottom: var(--msv-gap-card);
    padding: 0;
}

.provider-table-scroll {
    overflow-x: auto;
}

.provider-table-sub {
    color: var(--msv-text-tertiary);
    display: block;
    font-family: var(--msv-font-mono);
    font-size: 10.5px;
    margin-top: 2px;
}

.provider-tenants-table tr.is-warning-row td {
    background: var(--msv-warning-row, transparent);
}

.provider-tenants-table tr.is-error-row td {
    background: var(--msv-error-row, transparent);
}

.provider-panel-heading {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.provider-panel-heading h2 {
    color: var(--msv-text-primary);
    font-size: 13.5px;
    font-weight: 600;
    margin: 0;
}

.provider-empty-state {
    color: var(--msv-text-tertiary);
    font-size: 12px;
    margin: 0;
}

.provider-onboarding-list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.provider-onboarding-list a {
    align-items: center;
    background: var(--msv-surface-alt);
    border-radius: var(--msv-radius-control);
    color: var(--msv-text-primary);
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    text-decoration: none;
}

.provider-onboarding-list a:hover {
    background: var(--msv-border-subtle);
}

@media (max-width: 65rem) {
    .provider-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .provider-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .provider-kpi-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tenant abilitati (#2e): lista + scheda laterale. */
.provider-tenant-layout {
    display: grid;
    gap: var(--msv-gap-card);
    grid-template-columns: 1fr 340px;
    align-items: start;
}

.provider-list-header h1 {
    color: var(--msv-text-primary);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin: 0 0 4px;
}

.provider-search {
    margin: var(--space-md) 0;
    width: 100%;
}

.provider-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-md);
}

.provider-filter-pills .msv-pill {
    border: none;
    cursor: pointer;
}

.provider-tenants-table tbody tr {
    cursor: pointer;
}

.provider-tenants-table tr.is-selected-row td {
    background: var(--msv-accent-soft);
    border-left: 2px solid var(--msv-accent);
}

.provider-tenant-card {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-card);
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    position: sticky;
    top: var(--space-lg);
}

.provider-kicker {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    margin: 0;
    text-transform: uppercase;
}

.provider-tenant-card__name {
    color: var(--msv-text-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 2px 0 0;
}

.provider-alert-banner {
    border: var(--rule-thin) solid var(--msv-warning-border, var(--msv-warning));
    border-radius: var(--msv-radius-control);
    background: var(--msv-warning-bg);
    color: var(--msv-warning);
    padding: 10px 12px;
}

.provider-alert-banner.is-error {
    background: var(--msv-error-bg);
    border-color: var(--msv-error-border, var(--msv-error));
    color: var(--msv-error);
}

.provider-alert-banner p {
    color: inherit;
    font-size: 11.5px;
    margin: 4px 0 0;
}

.provider-detail-block h3 {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .09em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.provider-detail-list {
    display: grid;
    gap: 6px;
    margin: 0;
}

.provider-detail-list dt {
    color: var(--msv-text-tertiary);
    font-size: 11px;
}

.provider-detail-list dd {
    color: var(--msv-text-primary);
    font-family: var(--msv-font-mono);
    font-size: 11.5px;
    margin: 0 0 6px;
}

.provider-full-width {
    width: 100%;
}

.provider-detail-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.provider-action-danger {
    color: var(--msv-error);
}

.provider-confirm-box {
    background: var(--msv-surface-alt);
    border-radius: var(--msv-radius-control);
    display: grid;
    gap: 8px;
    padding: 10px;
}

.provider-confirm-box p {
    color: var(--msv-text-secondary);
    font-size: 11.5px;
    margin: 0;
}

.provider-confirm-box__actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 68.75rem) {
    .provider-tenant-layout {
        grid-template-columns: 1fr;
    }

    .provider-tenant-card {
        position: static;
    }
}

/* Configurazione Meta (#2d). */
.provider-config-grid {
    display: grid;
    gap: var(--msv-gap-card);
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--msv-gap-card);
}

.provider-config-full {
    grid-column: 1 / -1;
}

.provider-field-row {
    display: grid;
    gap: 6px;
    margin-bottom: var(--space-md);
}

.provider-field-row-pair {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr 1fr;
}

.provider-inline-form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.provider-inline-form .auth-input {
    flex: 1;
}

.provider-webhook-url {
    font-family: var(--msv-font-mono);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.provider-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.provider-saved-note {
    color: var(--msv-success);
    font-size: 11.5px;
    margin: 0;
}

.provider-connections-card {
    margin-top: var(--msv-gap-card);
}

.provider-onboarding-connection {
    display: grid;
    gap: var(--space-md);
}

.provider-onboarding-connection + .provider-onboarding-connection {
    border-top: var(--rule-thin) solid var(--msv-border-subtle);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
}

@media (max-width: 65rem) {
    .provider-config-grid {
        grid-template-columns: 1fr;
    }
}

/* === Messivo — app tenant (Dark, Fase 3) === */
.tenant-scope-body {
    background: var(--msv-bg);
    color: var(--msv-text-primary);
    font-family: var(--msv-font-display);
    min-height: 100%;
}

.tenant-scope-body .workspace-header,
.tenant-scope-body .configuration-header {
    padding: var(--space-lg) var(--space-xl) 0;
}

.tenant-scope-body .workspace-header h1,
.tenant-scope-body .configuration-header h1 {
    color: var(--msv-text-primary);
    font-size: 19px;
    letter-spacing: -.025em;
}

.tenant-scope-body .context-line,
.tenant-scope-body .configuration-header > p {
    color: var(--msv-text-tertiary);
}

/* Inbox (#1b) — schermata principale. */
.inbox-shell {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: 300px 1fr 268px;
    height: 100%;
    min-height: 0;
    width: 100%;
}

.inbox-shell--empty {
    /* .inbox-shell è display:grid con 3 colonne fisse: senza queste due righe il contenuto
     * restava incastrato nella prima colonna (300px) a sinistra invece che centrato nella pagina
     * — bug osservato, non solo mancanza di dati. */
    display: flex;
    grid-template-columns: none;
    align-items: center;
    flex-direction: column;
    gap: var(--space-md);
    justify-content: center;
    padding: var(--space-2xl);
    text-align: center;
}

.inbox-shell--empty .provider-empty-state {
    max-width: 22rem;
}

.inbox-error {
    background: var(--msv-error-bg, transparent);
    color: var(--msv-error, inherit);
    margin: var(--space-lg) var(--space-xl);
    padding: var(--space-md);
}

.inbox-list-col {
    border-right: var(--rule-thin) solid var(--msv-border-subtle);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: var(--space-md) var(--space-sm);
}

.inbox-search input {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-control);
    color: var(--msv-text-primary);
    font-size: 12px;
    padding: 9px 12px;
    width: 100%;
}

.inbox-filter-pills {
    align-items: center;
    display: flex;
    gap: 6px;
    margin: var(--space-sm) 0;
}

.inbox-filter-pills .msv-pill {
    border: none;
    cursor: pointer;
}

.inbox-new-conversation-trigger {
    margin: 0 0 var(--space-sm);
}

/* Modale "Nuova conversazione": overlay con blur, invece del pannello incastrato nella lista. */
.inbox-modal-backdrop {
    align-items: center;
    background: rgba(5, 7, 8, .6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: var(--space-lg);
    position: fixed;
    z-index: 500;
}

.inbox-modal-card {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-card);
    display: grid;
    gap: 6px;
    max-height: 85vh;
    max-width: 26rem;
    overflow-y: auto;
    padding: var(--space-lg);
    width: 100%;
}

.inbox-modal-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.inbox-modal-heading h2 {
    color: var(--msv-text-primary);
    font-size: 15px;
    font-weight: 700;
    margin: 0;
}

.inbox-modal-close {
    background: none;
    border: none;
    color: var(--msv-text-tertiary);
    cursor: pointer;
    font-size: 14px;
}

.inbox-modal-card label {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.inbox-conversation-rows {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

/* Scrollbar custom in tema, invece di quella nativa del browser — per tutti i pannelli interni
 * dell'inbox che scrollano (lista conversazioni, thread messaggi, pannello contesto). */
.inbox-conversation-rows,
.inbox-message-list,
.inbox-context-col {
    scrollbar-color: var(--msv-border) transparent;
    scrollbar-width: thin;
}

.inbox-conversation-rows::-webkit-scrollbar,
.inbox-message-list::-webkit-scrollbar,
.inbox-context-col::-webkit-scrollbar {
    width: 8px;
}

.inbox-conversation-rows::-webkit-scrollbar-track,
.inbox-message-list::-webkit-scrollbar-track,
.inbox-context-col::-webkit-scrollbar-track {
    background: transparent;
}

.inbox-conversation-rows::-webkit-scrollbar-thumb,
.inbox-message-list::-webkit-scrollbar-thumb,
.inbox-context-col::-webkit-scrollbar-thumb {
    background: var(--msv-border);
    border-radius: var(--msv-radius-pill);
}

.inbox-conversation-rows::-webkit-scrollbar-thumb:hover,
.inbox-message-list::-webkit-scrollbar-thumb:hover,
.inbox-context-col::-webkit-scrollbar-thumb:hover {
    background: var(--msv-text-disabled);
}

.inbox-row {
    align-items: center;
    background: none;
    border: none;
    border-bottom: var(--rule-thin) solid var(--msv-border-subtle);
    border-left: 2px solid transparent;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 13px 10px;
    text-align: left;
    width: 100%;
}

/* Visibile solo in hover sulla riga (non di continuo) — in linea con "tempo rimanente"
 * (.inbox-row-window-line), non più overlay assoluto. */
.inbox-row-delete-trigger {
    background: none;
    border: var(--rule-thin) solid var(--msv-error-border, var(--msv-error));
    border-radius: var(--msv-radius-pill);
    color: var(--msv-error);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 650;
    margin-left: auto;
    opacity: 0;
    padding: 2px 8px;
    transition: opacity .15s ease;
}

.inbox-row:hover .inbox-row-delete-trigger,
.inbox-row-delete-trigger:focus-visible {
    opacity: 1;
}

.inbox-row-delete-trigger:hover {
    background: var(--msv-error-bg);
}

/* Popup di conferma eliminazione — stesso pattern degli altri popup della pagina
 * (.inbox-modal-backdrop/.inbox-modal-card): overlay con blur al centro dello schermo, non un
 * pannello inline nella riga. */
.inbox-row-delete-option {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-control);
    color: var(--msv-text-primary);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 650;
    padding: 7px 10px;
    text-align: left;
}

.inbox-row-delete-option--danger {
    border-color: var(--msv-error-border, var(--msv-error));
    color: var(--msv-error);
}

.inbox-row-delete-hint {
    color: var(--msv-text-tertiary);
    font-size: 10px;
    margin: -2px 0 2px;
}

.inbox-row-delete-hint--danger {
    color: var(--msv-error);
}

.inbox-row:hover {
    background: var(--msv-surface);
}

.inbox-row.is-selected {
    background: var(--msv-accent-soft);
    border-left-color: var(--msv-accent);
}

.inbox-avatar {
    align-items: center;
    background: var(--msv-avatar-neutral-bg);
    border-radius: 50%;
    color: var(--msv-avatar-neutral-ink);
    display: flex;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.inbox-row-body {
    display: grid;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
}

.inbox-row-top {
    align-items: baseline;
    display: flex;
    gap: 6px;
    justify-content: space-between;
}

.inbox-row-top strong {
    color: var(--msv-text-primary);
    font-size: 12.5px;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-row-time {
    color: var(--msv-text-tertiary);
    flex-shrink: 0;
    font-family: var(--msv-font-mono);
    font-size: 9.5px;
}

.inbox-row-preview {
    color: var(--msv-text-secondary);
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-row-window-line {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.inbox-row-window {
    font-family: var(--msv-font-mono);
    font-size: 9.5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-row-window.is-open {
    color: var(--msv-accent);
}

.inbox-row-window.is-warning {
    color: var(--msv-warning);
}

.inbox-row-window.is-closed {
    color: var(--msv-text-tertiary);
}

/* Thread */
.inbox-thread-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 20px 24px;
}

.inbox-thread-placeholder {
    color: var(--msv-text-tertiary);
    margin: auto;
}

/* Card centrata, larghezza massima — non più bordo a bordo. */
.inbox-thread-inner {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border-focus);
    border-radius: var(--msv-radius-card);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    margin-inline: auto;
    max-width: 48rem;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

.inbox-thread-header {
    align-items: center;
    border-bottom: var(--rule-thin) solid var(--msv-border-subtle);
    display: flex;
    gap: 12px;
    padding: 13px 20px;
}

.inbox-thread-heading-text strong {
    color: var(--msv-text-primary);
    display: block;
    font-size: 13.5px;
    font-weight: 700;
}

.inbox-thread-sub {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 10.5px;
}

.inbox-rubrica-btn {
    cursor: pointer;
    margin-left: 10px;
}

.inbox-message-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 13px;
    overflow-y: auto;
    padding: 20px 24px;
}

.inbox-bubble-row {
    display: flex;
    flex-direction: column;
    max-width: 64%;
}

.inbox-bubble-row.is-outbound {
    align-items: flex-end;
    align-self: flex-end;
}

.inbox-bubble-row.is-inbound {
    align-items: flex-start;
    align-self: flex-start;
}

.inbox-bubble {
    background: var(--msv-bubble-in);
    border-radius: 14px 14px 14px 4px;
    color: var(--msv-text-primary);
    font-size: 13px;
    line-height: 1.5;
    padding: 9px 12px;
}

.inbox-bubble a {
    color: inherit;
}

.is-outbound .inbox-bubble {
    background: var(--msv-bubble-out);
    border-radius: 14px 14px 4px 14px;
    color: var(--msv-bubble-out-ink, var(--msv-text-primary));
}

.inbox-quoted-reply {
    background: rgba(127, 127, 127, 0.16);
    border-left: 3px solid var(--msv-accent);
    border-radius: 6px;
    margin-bottom: 6px;
    padding: 4px 8px;
}

.inbox-quoted-reply-author {
    color: var(--msv-accent);
    display: block;
    font-size: 10.5px;
    font-weight: 650;
}

.inbox-quoted-reply-text {
    color: inherit;
    display: block;
    font-size: 11.5px;
    opacity: 0.85;
}

.inbox-quoted-reply--missing .inbox-quoted-reply-text {
    font-style: italic;
    opacity: 0.65;
}

.inbox-quoted-reply--composer {
    padding-right: 26px;
    position: relative;
}

.inbox-quoted-reply-cancel {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.6;
    padding: 2px 6px;
    position: absolute;
    right: 2px;
    top: 2px;
}

.inbox-quoted-reply-cancel:hover {
    opacity: 1;
}

.inbox-bubble-meta {
    align-items: center;
    color: var(--msv-text-disabled);
    display: flex;
    font-family: var(--msv-font-mono);
    font-size: 9.5px;
    gap: 6px;
    margin-top: 4px;
}

.inbox-status-toggle {
    background: none;
    border: none;
    color: var(--msv-text-tertiary);
    cursor: pointer;
    font-family: var(--msv-font-mono);
    font-size: 9px;
    text-decoration: underline;
}

.inbox-status-history {
    background: var(--msv-surface-alt);
    border-radius: 8px;
    display: grid;
    font-size: 10.5px;
    gap: 4px;
    margin-top: 4px;
    padding: 8px;
}

.inbox-composer {
    background: var(--msv-surface-alt);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: 11px;
    display: grid;
    gap: 12px;
    margin: 0 24px 20px;
    padding: 14px 16px;
}

.inbox-composer textarea {
    background: none;
    border: none;
    color: var(--msv-text-primary);
    font: inherit;
    font-size: 13px;
    resize: vertical;
}

.inbox-composer textarea:focus-visible {
    outline: none;
}

.inbox-composer-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

/* Pulsante pillola azzurra: apre/chiude il pannello allegato (<details> nativo, nessun JS) —
 * stessa entità fa da apri e chiudi, basta ricliccarla. */
.inbox-attachment-summary {
    background: rgba(14, 165, 233, .16);
    border-radius: var(--msv-radius-pill);
    color: #0ea5e9;
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 650;
    list-style: none;
    padding: 5px 12px;
    width: fit-content;
}

.inbox-attachment-summary:hover {
    background: rgba(14, 165, 233, .26);
}

details[open] > .inbox-attachment-summary {
    background: rgba(14, 165, 233, .3);
}

/* Pannello allegato: bordato e staccato dal campo testo — prima si confondeva col resto del
 * composer, ora è chiaro dove inizia/finisce. */
.inbox-attachment-panel {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: 10px;
    display: grid;
    gap: 12px;
    margin-top: 10px;
    padding: 14px;
}

.inbox-attachment-file-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.inbox-attachment-file-row .provider-table-sub {
    color: var(--msv-text-tertiary);
    font-size: 11px;
}

.inbox-attachment-file-list {
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 0;
    max-height: 120px;
    overflow-y: auto;
    padding: 0;
}

.inbox-attachment-file-list li {
    align-items: center;
    background: var(--msv-surface-alt);
    border-radius: 6px;
    color: var(--msv-text-secondary);
    display: flex;
    font-size: 11px;
    gap: 8px;
    justify-content: space-between;
    padding: 5px 8px;
}

.inbox-attachment-file-remove {
    background: none;
    border: none;
    color: var(--msv-text-tertiary);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px;
}

.inbox-attachment-file-remove:hover {
    color: var(--msv-error);
}

.inbox-attachment-toggle input[type="file"] {
    color: var(--msv-text-tertiary);
    font-size: 11px;
}

.inbox-attachment-toggle input[type="file"]::file-selector-button {
    background: var(--msv-surface-alt);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-control);
    color: var(--msv-text-primary);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    margin-right: 8px;
    padding: 6px 10px;
}

.inbox-attachment-toggle input[type="file"]::file-selector-button:hover {
    background: var(--msv-bg);
}

/* Didascalia a destra del pulsante invece che sotto: meno spazio verticale occupato. */
.inbox-attachment-actions {
    align-items: center;
    display: flex;
    gap: 10px;
}

.inbox-attachment-actions .auth-input {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    padding: 8px 12px;
}

.inbox-attachment-actions .msv-btn {
    flex-shrink: 0;
}

.inbox-composer-hint {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 9.5px;
    margin-left: auto;
}

.inbox-send-button {
    align-items: center;
    background: var(--msv-accent);
    border: none;
    border-radius: 9px;
    color: var(--msv-accent-ink);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.inbox-send-button:not(:disabled) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--msv-accent) 25%, transparent);
}

.inbox-send-button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

/* In corso: niente aspetto "disabilitato/spento" (altrimenti sembra bloccato, non al lavoro). */
.inbox-send-button.is-sending:disabled {
    cursor: progress;
    opacity: 1;
}

.inbox-send-spinner {
    animation: inbox-send-spin .7s linear infinite;
    border: 2px solid color-mix(in srgb, var(--msv-accent-ink) 35%, transparent);
    border-radius: 50%;
    border-top-color: var(--msv-accent-ink);
    height: 14px;
    width: 14px;
}

@keyframes inbox-send-spin {
    to {
        transform: rotate(360deg);
    }
}

.inbox-composer--template {
    display: grid;
    gap: 8px;
    margin: 0 24px 20px;
}

.inbox-composer-hint-text {
    color: var(--msv-text-tertiary);
    font-size: 11.5px;
    margin: 0;
}

/* Pannello contesto — card arrotondata, staccata dal bordo dello schermo. */
.inbox-context-col {
    align-items: center;
    background: var(--msv-surface);
    border: var(--rule-thin) solid rgba(255, 255, 255, .14);
    border-radius: var(--msv-radius-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: 20px 20px 20px 0;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}

.inbox-window-ring {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(var(--msv-accent) 0 var(--ring-pct, 0%), var(--msv-border-subtle) var(--ring-pct, 0%) 100%);
    width: 96px;
}

.inbox-window-ring.is-warning {
    background: conic-gradient(var(--msv-warning) 0 var(--ring-pct, 0%), var(--msv-border-subtle) var(--ring-pct, 0%) 100%);
}

.inbox-window-ring.is-closed {
    background: var(--msv-error);
}

.inbox-window-ring__hole {
    align-items: center;
    background: var(--msv-sidebar-bg);
    border-radius: 50%;
    display: flex;
    height: 76px;
    justify-content: center;
    width: 76px;
}

.inbox-window-ring__hole strong {
    color: var(--msv-text-primary);
    font-size: 17px;
    font-weight: 700;
}

.inbox-window-caption {
    color: var(--msv-text-tertiary);
    font-size: 10.5px;
    text-align: center;
}

.inbox-context-block {
    border-top: var(--rule-thin) solid var(--msv-border-subtle);
    padding-top: var(--space-md);
    width: 100%;
}

.inbox-context-block h3 {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .09em;
    margin: 0 0 8px;
    text-transform: uppercase;
}

@media (max-width: 68.75rem) {
    .inbox-shell {
        grid-template-columns: 300px 1fr;
        height: auto;
    }

    .inbox-context-col {
        display: none;
    }
}

@media (max-width: 47.5rem) {
    .inbox-shell {
        grid-template-columns: 1fr;
    }

    .inbox-list-col {
        border-right: none;
    }
}

/* Template tenant (#2b). */
.tpl-header {
    align-items: flex-end;
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
    padding: 0 var(--space-xl) var(--space-md);
}

.tpl-header-actions {
    align-items: center;
    display: flex;
    gap: 8px;
}

.tpl-phone-select {
    max-width: 220px;
}

.tpl-sync-pill {
    cursor: pointer;
}

/* La select è uscita da qui (ora nella card "numero selezionato" accanto al titolo, vedi
 * .tpl-number-card) — restano solo Sincronizza e Nuovo template, che prendono più spazio. */
.tpl-header-actions--roomy .tpl-sync-pill {
    font-size: 11.5px;
    padding: 9px 16px;
}

.tpl-header-actions--roomy .msv-btn {
    padding: 13px 22px;
}

.tpl-header-actions--roomy {
    gap: var(--space-sm);
}

/* Nessun webhook per gli aggiornamenti dei template (stato/categoria) — solo il pulsante
 * "Sincronizza" li porta da Meta. Senza questo avviso non è ovvio che vada premuto a mano dopo
 * una mail di Meta. Riga a sé sotto l'header intero: dentro la riga del pulsante spingeva
 * l'allineamento fuori posto (il pulsante si schiacciava per fare spazio al testo su due righe). */
.tpl-sync-hint {
    margin: -4px 0 var(--space-md);
    padding: 0 var(--space-xl);
}

.tpl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 var(--space-xl) var(--space-md);
}

.tpl-filter-bar .msv-pill {
    border: none;
    cursor: pointer;
}

.tpl-status-note {
    color: var(--msv-accent);
    font-size: 11.5px;
    margin: 0 var(--space-xl) var(--space-md);
}

/* Stato "nessun numero WhatsApp configurato" — non è più instradato nell'errore generico
 * (.auth-field-error, pensato per i campi di un form, senza l'inset laterale var(--space-xl) di
 * .tpl-filter-bar/.tpl-status-note: risultava disallineato a sinistra) — vedi TemplateManager.razor. */
.tpl-empty-chip {
    margin: 0 var(--space-xl) var(--space-md);
    width: fit-content;
}

.tpl-layout {
    display: grid;
    gap: var(--msv-gap-card);
    grid-template-columns: 1fr 312px;
    padding: 0 var(--space-xl) var(--space-xl);
}

/* Creazione template spostata in modale (era il pannello a destra, sempre visibile anche senza
 * bisogno) — la lista template ora usa tutta la larghezza. */
.tpl-layout--full {
    grid-template-columns: 1fr;
}

.tpl-create-modal {
    max-width: 32rem;
}

.tpl-list {
    display: grid;
    gap: var(--msv-gap-card);
    align-content: start;
}

.tpl-card {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: 11px;
    padding: 14px 16px;
}

.tpl-card--approved {
    border-color: var(--msv-border-focus);
}

.tpl-card--pending {
    border-color: var(--msv-warning-border, var(--msv-warning));
}

.tpl-card--rejected {
    border-color: var(--msv-error-border, var(--msv-error));
}

.tpl-card-heading {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.tpl-card-heading strong {
    color: var(--msv-text-primary);
    font-size: 13.5px;
    font-weight: 700;
}

.tpl-card-meta {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 10.5px;
    margin: 6px 0;
}

.tpl-card-body {
    background: var(--msv-surface-alt);
    border-radius: 8px;
    color: var(--msv-text-secondary);
    font-size: 12.5px;
    line-height: 1.5;
    padding: 10px 12px;
}

.tpl-variable-chip {
    background: var(--msv-avatar-active-bg, var(--msv-accent-soft));
    border-radius: 5px;
    color: var(--msv-avatar-active-ink, var(--msv-accent));
    font-family: var(--msv-font-mono);
    padding: 1px 4px;
}

/* Chip trascinabili con i campi standard del contatto (nome, cognome, ...) e "Valore custom":
 * il rilascio dentro .tpl-body-editor le inserisce come elementi veri nel testo — vedi
 * templateEditor.js e .tpl-chip-inline più sotto. */
.tpl-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.tpl-chip {
    background: var(--msv-accent-soft);
    border: var(--rule-thin) solid var(--msv-border-focus);
    border-radius: var(--msv-radius-pill);
    color: var(--msv-accent);
    cursor: grab;
    font-family: var(--msv-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 3px 10px;
    user-select: none;
}

.tpl-chip:active {
    cursor: grabbing;
}

/* "Valore custom": non collegato al contatto, va deciso fisso o variabile — colore ambra per
 * distinguerlo a colpo d'occhio dalle chip-campo contatto (verdi/accento). */
.tpl-chip--custom {
    background: var(--msv-warning-bg);
    border-color: var(--msv-warning);
    color: var(--msv-warning);
}

/* Parametri di invio template (risposta in conversazione / nuova conversazione): chip col nome
 * del campo accanto al valore, non più una textarea "un parametro a riga" senza etichette — non
 * si capiva quale valore corrispondesse a quale variabile. */
.tpl-param-list {
    display: grid;
    gap: 8px;
}

.tpl-param-row {
    align-items: center;
    display: flex;
    gap: var(--space-sm);
}

.tpl-param-row__label {
    flex-shrink: 0;
    min-width: 5.5rem;
    text-align: center;
}

.tpl-param-row .auth-input {
    flex: 1;
}

.tpl-pill--custom {
    background: var(--msv-warning-bg);
    color: var(--msv-warning);
}

.tpl-param-row__label {
    white-space: nowrap;
}

/* Anteprima del template nel compositore della conversazione (testo con variabili evidenziate). */
.tpl-send-preview {
    background: var(--msv-surface-raised, var(--msv-accent-soft));
    border: var(--rule-thin) solid var(--msv-border-subtle);
    border-radius: 10px;
    display: grid;
    gap: 6px;
    padding: var(--space-sm) var(--space-md);
}

.tpl-send-preview__title {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tpl-send-preview p {
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.tpl-variable-chip--custom {
    background: var(--msv-warning-bg);
    color: var(--msv-warning);
}

.tpl-custom-source-config {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    margin-top: 6px;
}

.tpl-radio-inline {
    align-items: center;
    color: var(--msv-text-secondary);
    display: inline-flex;
    font-size: 11.5px;
    gap: 4px;
}

.tpl-variable-source-pill {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 4px 1px 8px;
    text-transform: none;
}

.tpl-variable-source-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 9px;
    padding: 0;
}

.tpl-card-footer {
    color: var(--msv-text-tertiary);
    font-size: 10.5px;
    margin-top: 8px;
}

.tpl-card-explain {
    border-radius: 6px;
    font-size: 11px;
    margin: 8px 0 0;
    padding: 6px 8px;
}

.tpl-card-explain.is-warning {
    background: var(--msv-warning-bg);
    color: var(--msv-warning);
}

.tpl-field {
    margin-bottom: 12px;
}

.tpl-field label {
    color: var(--msv-text-tertiary);
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
}

.tpl-field-row {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
}

.tpl-body-input {
    min-height: 5rem;
    resize: vertical;
}

/* Editor rich-text del corpo: le chip trascinate diventano elementi veri incorporati nel testo
 * (contenteditable=false, atomiche a backspace) invece del placeholder posizionale {{N}} in
 * chiaro — vedi templateEditor.js, che ricostruisce il testo piano per Meta camminando questi
 * nodi. */
.tpl-body-editor {
    cursor: text;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.tpl-body-editor:focus-visible {
    outline: none;
}

.tpl-body-editor:empty::before {
    color: var(--msv-text-tertiary);
    content: attr(data-placeholder);
    pointer-events: none;
}

.tpl-chip-inline {
    background: var(--msv-avatar-active-bg, var(--msv-accent-soft));
    border-radius: 5px;
    color: var(--msv-avatar-active-ink, var(--msv-accent));
    cursor: default;
    display: inline-block;
    font-family: var(--msv-font-mono);
    font-size: 11px;
    font-weight: 600;
    margin: 0 1px;
    padding: 1px 6px;
    user-select: none;
}

.tpl-chip-inline--custom {
    background: var(--msv-warning-bg);
    color: var(--msv-warning);
}

.tpl-preview {
    border-top: var(--rule-thin) solid var(--msv-border-subtle);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
}

.tpl-rules {
    border-top: var(--rule-thin) solid var(--msv-border-subtle);
    color: var(--msv-text-tertiary);
    font-size: 11px;
    line-height: 1.6;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
}

@media (max-width: 60rem) {
    .tpl-layout {
        grid-template-columns: 1fr;
    }
}

/* Attivazione numero tenant (#2c). */
.onb-header {
    align-items: flex-end;
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
    padding: 0 var(--space-xl) var(--space-sm);
}

.onb-header h1 {
    color: var(--msv-text-primary);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0 0 4px;
}

.onb-progress {
    display: flex;
    gap: 4px;
    padding: 0 var(--space-xl) var(--space-lg);
}

.onb-progress span {
    background: var(--msv-border);
    border-radius: 999px;
    flex: 1;
    height: 4px;
}

.onb-progress span.is-done {
    background: var(--msv-accent);
}

.onb-layout {
    display: grid;
    gap: var(--msv-gap-card);
    grid-template-columns: 1.25fr 1fr;
    padding: 0 var(--space-xl) var(--space-xl);
}

.onb-steps {
    display: grid;
    gap: var(--msv-gap-card);
    align-content: start;
}

.onb-step {
    border-radius: 12px;
    display: flex;
    gap: 14px;
    padding: 16px 18px;
}

.onb-step.is-future {
    opacity: .55;
}

.onb-step.is-current {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border-focus);
}

.onb-step.is-complete,
.onb-step.is-future {
    background: transparent;
}

.onb-step-marker {
    align-items: center;
    background: var(--msv-avatar-neutral-bg);
    border-radius: 50%;
    color: var(--msv-text-secondary);
    display: flex;
    flex-shrink: 0;
    font-weight: 700;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.onb-step.is-complete .onb-step-marker {
    background: var(--msv-accent-soft);
    color: var(--msv-accent);
}

.onb-step.is-current .onb-step-marker {
    background: var(--msv-accent);
    color: var(--msv-accent-ink);
}

.onb-step-body {
    min-width: 0;
}

.onb-step-body h3 {
    color: var(--msv-text-primary);
    font-size: 14.5px;
    font-weight: 700;
    margin: 0 0 6px;
}

.onb-step-body p {
    color: var(--msv-text-secondary);
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 10px;
}

/* Il tratto più lungo e "silenzioso" del collegamento è dopo che l'utente ha chiuso il popup
 * Meta: lì il server fa ancora diverse chiamate Graph API in sequenza (scambio token, WABA,
 * registrazione numero, sottoscrizione webhook) e il solo testo del bottone disabilitato passava
 * inosservato — sembrava tutto fermo. */
.onb-connecting {
    align-items: center;
    background: var(--msv-accent-soft);
    border: var(--rule-thin) solid var(--msv-border-focus);
    border-radius: var(--msv-radius-control);
    color: var(--msv-text-primary);
    display: flex;
    font-size: 12.5px;
    font-weight: 600;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
}

.onb-connecting-spinner {
    animation: inbox-send-spin .7s linear infinite;
    border: 2px solid color-mix(in srgb, var(--msv-accent) 35%, transparent);
    border-radius: 50%;
    border-top-color: var(--msv-accent);
    flex-shrink: 0;
    height: 16px;
    width: 16px;
}

.onb-webhook-refresh {
    margin-top: 10px;
}

.onb-technical {
    align-self: start;
}

.onb-pending {
    color: var(--msv-text-disabled) !important;
}

.onb-help {
    border-top: var(--rule-thin) solid var(--msv-border-subtle);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
}

.onb-help--dashed {
    border: 1px dashed var(--msv-border);
    border-radius: 8px;
    margin-top: var(--space-md);
    padding: var(--space-sm);
}

.onb-success {
    color: var(--msv-accent);
    margin: 0 var(--space-xl) var(--space-xl);
}

@media (max-width: 60rem) {
    .onb-layout {
        grid-template-columns: 1fr;
    }
}

.tpl-page-header {
    padding: var(--space-lg) var(--space-xl) 0;
}

/* Card "numero selezionato" accanto al titolo (Template, Tenant e Provider) — vedi
 * TemplateManager.razor (SectionContent "tpl-number-card") e i due outlet in Templates.razor/
 * ProviderTemplates.razor. Solo queste due varianti diventano flex: .tpl-page-header/
 * .workspace-header "nudi" (tutte le altre pagine) restano invariati, un solo figlio non cambia
 * aspetto in un flex row. flex-wrap per non rompere schermi stretti (nessun retrofit mobile
 * ancora fatto sull'area autenticata, vedi PROGRESS-landing-i18n-seo.md, Fase 4). */
.tpl-page-header--with-number-card,
.workspace-header--with-number-card {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
}

/* .tpl-page-header (Tenant) è a padding zero in basso (le pagine senza card numero non ne hanno
 * bisogno, es. CustomerDashboard: la griglia sotto porta il proprio margine) — con la card
 * "numero selezionato" ora qui dentro, mancava lo spazio prima della riga Sincronizza/Nuovo
 * template subito sotto (TemplateManager.razor, .tpl-header, anche lui a padding zero in alto).
 * .workspace-header (Provider) non serve: ha già margin-block-end proprio. */
.tpl-page-header--with-number-card {
    margin-bottom: var(--space-lg);
}

/* Stesso schema, riusabile ovunque un .tpl-page-header debba affiancare titolo+sottotitolo a un
 * singolo pulsante di azione a destra (es. ApiIntegrations.razor, "Genera nuova chiave" — prima
 * in .rubrica-toolbar sotto l'header, spostato qui su richiesta). */
.tpl-page-header--with-action {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    margin-bottom: var(--space-lg);
}

.tpl-number-card {
    display: grid;
    gap: var(--space-xs);
    min-width: 220px;
}

.tpl-number-card .provider-kicker {
    margin: 0;
}

.tpl-number-card .tpl-phone-select {
    max-width: none;
    width: 100%;
}

/* Stato centrale a pagina intera (es. connessione API non riuscita): stile preso dallo step
 * corrente dell'onboarding (.onb-step.is-current), bordo in accento invece del bordo neutro di
 * .msv-card, per farlo risaltare come un vero stato bloccante e non una card qualunque. */
.tenant-state-center {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 60vh;
    padding: var(--space-xl);
}

.tenant-state-card {
    border-color: var(--msv-border-focus);
    max-width: 26rem;
    text-align: center;
    width: 100%;
}

.tenant-state-card h2 {
    font-size: 14.5px;
    margin: 0 0 6px;
}

.tenant-state-card p {
    color: var(--msv-text-secondary);
    font-size: 12px;
    line-height: 1.6;
    margin: 0 0 var(--space-md);
}

.tpl-page-header .provider-table-sub {
    margin: 4px 0 0;
}

/* Dashboard tenant — nessuna schermata di riferimento nel redesign (vedi README, solo
 * login/inbox/template/attivazione), quindi qui si compongono i componenti condivisi msv-* già
 * usati da Onboarding/Template/Rubrica invece di seguire un mock dedicato. */
.dash-section {
    margin: var(--space-lg) var(--space-xl);
}

/* Solo verticale: per contenuti larghi (tabelle) che non devono perdere spazio orizzontale oltre
 * al padding già dato da .content — .dash-section normale ci aggiungeva un secondo strato di
 * inset laterale che .msv-card da solo non ha, e la tabella andava a capo prima del necessario
 * (Impostazioni WhatsApp, a differenza della stessa tabella lato Provider). */
.dash-section--full {
    margin: var(--space-lg) 0;
}

/* Un <h2> "nudo" (senza il wrapper .dash-status-panel__title, che lo stila già) dentro una di
 * queste due sezioni cadeva sulla regola globale "h2, h3 { color: var(--color-ink) }" del vecchio
 * sistema (Hallmark, pensato per sfondi chiari) SENZA font-size: restava alla dimensione di
 * default del browser, sproporzionato rispetto al resto di Messivo — visto su "Operazioni
 * disponibili" (WhatsAppSettings.razor) e "Inviti in sospeso"/"Invita una persona" (Team.razor).
 * Specificità pari a .dash-status-panel__title h2 (sotto, più avanti nel file): a parità vince
 * l'ultima regola nell'ordine del foglio, quindi qui sopra così il caso annidato (h2 dentro
 * .dash-status-panel__title dentro .dash-section) resta con la sua margin-bottom più stretta. */
.dash-section h2,
.dash-section--full h2 {
    color: var(--msv-text-primary);
    font-family: var(--msv-font-display);
    font-size: 14.5px;
    font-weight: 700;
    margin: 0 0 var(--space-md);
}

.dash-metric-grid {
    display: grid;
    gap: var(--msv-gap-card);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: var(--space-lg) var(--space-xl);
}

.dash-metric-card {
    border-block-start: .2rem solid var(--msv-accent);
    display: grid;
    gap: var(--space-xs);
}

.dash-metric-card strong {
    color: var(--msv-text-primary);
    font-family: var(--msv-font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.dash-status-panel__title {
    align-items: center;
    display: flex;
    gap: var(--space-lg);
    justify-content: space-between;
}

.dash-status-panel__title h2 {
    font-size: 14.5px;
    margin: 0 0 4px;
}

.dash-status-panel__title .provider-table-sub {
    margin: 0;
}

.dash-status-panel__actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

@media (max-width: 60rem) {
    .dash-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 30rem) {
    .dash-metric-grid {
        grid-template-columns: 1fr;
    }

    .dash-status-panel__title {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Rubrica (contatti). */
.rubrica-toolbar {
    align-items: center;
    display: flex;
    gap: var(--space-md);
    padding: 0 var(--space-xl) var(--space-lg);
}

/* Dentro l'header (Contacts.razor, in linea col titolo "Rubrica" su richiesta) invece che come
 * riga a sé sotto: l'inset laterale lo dà già .tpl-page-header. */
.rubrica-toolbar--inline {
    padding: 0;
}

.rubrica-search {
    flex: 1;
    max-width: 22rem;
}

.rubrica-list {
    display: grid;
    gap: var(--msv-gap-card);
    padding: 0 var(--space-xl) var(--space-xl);
}

.rubrica-row {
    align-items: center;
    display: flex;
    gap: var(--space-md);
    justify-content: space-between;
}

.rubrica-row-main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.rubrica-row-main strong {
    color: var(--msv-text-primary);
    font-size: 13px;
}

.rubrica-row-detail {
    color: var(--msv-text-tertiary);
    font-size: 11.5px;
}

.rubrica-row-notes {
    color: var(--msv-text-secondary);
    font-style: italic;
}

.tpl-page-header h1 {
    color: var(--msv-text-primary);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0;
}

/* Strumenti di test avanzati su Home.razor (fuori dal redesign, vedi commento nel markup):
 * solo un contenitore per non farli sedere a nudo sullo sfondo scuro. */
.legacy-tools {
    background: var(--msv-surface-alt);
    border-top: var(--rule-thin) solid var(--msv-border-subtle);
    margin-top: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
}

.legacy-tools > summary {
    color: var(--msv-text-tertiary);
    cursor: pointer;
    font-family: var(--msv-font-mono);
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* === Messivo — area pubblica (Home, Prezzi) ===
 * Vedi prompt-area-pubblica-1-design-home-prezzi.md, Task 1: stesso sistema --msv-* già in uso
 * per login/selettore spazio/app tenant (.theme-dark, Manrope + IBM Plex Mono, verde menta) — non
 * i vecchi token :root generici (Bahnschrift/Segoe UI), quelli restano solo per schermate non
 * ancora ridisegnate. PublicLayout applica .theme-dark alla sua radice.
 */
.public-shell {
    /* Sfondo a 4 livelli (gradiente di base + 2 glow sfocati + grana 5% + sheen) — tecnica fornita
       da Davide, verdi presi dal logo Messivo. overflow:hidden + position:relative qui perché i
       glow "escono" dai bordi (vedi .public-bg-glow) — non taglia il contenuto: la box cresce con
       il contenuto (min-height, non height fissa), overflow:hidden si applica solo a ciò che
       eccede quella box, mai il caso qui. */
    background: linear-gradient(140deg, #1c3a2a, #0a1712 60%);
    color: var(--msv-text-primary);
    display: flex;
    flex-direction: column;
    font-family: var(--msv-font-display);
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}

.public-header,
.public-main,
.public-footer {
    /* Sopra ai livelli decorativi di sfondo (z-index:0) — vedi sopra. */
    position: relative;
    z-index: 1;
}

.public-bg-glow {
    border-radius: 999px;
    filter: blur(90px);
    position: absolute;
    z-index: 0;
}

.public-bg-glow-1 {
    background: #6fcb92;
    height: 420px;
    left: -80px;
    opacity: .55;
    top: -140px;
    width: 420px;
}

.public-bg-glow-2 {
    /* Ancorato vicino alla hero (non al fondo dell'intera pagina, che qui è molto più lunga della
       singola sezione hero dell'esempio originale) — così l'effetto resta coerente in alto su
       tutte le pagine pubbliche, corte o lunghe che siano. */
    background: #3fa76b;
    height: 320px;
    opacity: .4;
    right: 10%;
    top: 280px;
    width: 320px;
}

.public-bg-grain {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    inset: 0;
    mix-blend-mode: overlay;
    opacity: .05;
    position: absolute;
    z-index: 0;
}

.public-bg-sheen {
    background: radial-gradient(ellipse 900px 300px at 30% -10%, rgba(255, 255, 255, .06), transparent 70%);
    inset: 0;
    position: absolute;
    z-index: 0;
}

.public-shell h1,
.public-shell h2,
.public-shell h3 {
    /* Stesso problema/stessa soluzione già documentata sopra per ".page.theme-dark > main >
       .content h1/h2/h3": la regola globale "h1,h2,h3 { color: var(--color-ink) }" (pensata per
       sfondi chiari) vince sempre sull'ereditarietà da .public-shell, anche se qui non c'è nessuna
       regola più specifica a coprirla — titoli neri su sfondo nero senza questa riga. */
    color: var(--msv-text-primary);
}

/* <FocusOnNavigate Selector="h1"> (Routes.razor, Blazor: sposta il focus sull'h1 a ogni
   navigazione, per l'accessibilità — annuncia il titolo della nuova pagina agli screen reader)
   mette tabindex="-1" e chiama .focus() sull'h1 a ogni caricamento — il browser disegna il suo
   anello di focus di default intorno al titolo, sembra "selezionato" per un utente vedente anche
   se non ha mai premuto Tab. Tolto solo qui (h1, non h2/h3: nessun altro elemento riceve focus
   così), l'h1 non è comunque mai raggiungibile da tastiera con Tab (tabindex="-1"), quindi non
   perde nessun indicatore utile a chi naviga da tastiera. */
.public-shell h1:focus {
    outline: none;
}

.public-header {
    /* Fissa, non il gradiente/glow dello shell dietro — vedi feedback Davide. */
    background: var(--msv-bg);
    align-items: center;
    border-bottom: var(--rule-thin) solid var(--msv-border);
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-xl);
}

.public-brand {
    display: flex;
    margin-right: auto;
}

.public-brand-logo {
    height: 28px;
}

.public-nav {
    display: flex;
    gap: var(--space-lg);
}

.public-nav a {
    color: var(--msv-text-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.public-nav a:hover {
    color: var(--msv-text-primary);
}

.public-header-actions {
    align-items: center;
    display: flex;
    gap: var(--space-md);
}

.public-lang-switch {
    display: flex;
    align-items: center;
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: var(--text-xs);
    gap: var(--space-xs);
}

.public-lang-switch a {
    color: var(--msv-text-tertiary);
    text-decoration: none;
}

.public-lang-switch a.is-active {
    color: var(--msv-accent);
    font-weight: 700;
}

.public-lang-switch a:hover {
    color: var(--msv-text-primary);
}

.public-header-cta {
    white-space: nowrap;
}

.public-main {
    flex: 1;
    margin: 0 auto;
    max-width: 68rem;
    padding: var(--space-2xl) var(--space-xl);
    width: 100%;
}

.public-hero {
    padding: var(--space-2xl) 0;
    text-align: center;
}

.public-hero--compact {
    padding-bottom: var(--space-lg);
}

.public-hero-logo {
    height: 120px;
    margin-bottom: var(--space-2xl);
}

.public-hero-kicker {
    color: var(--msv-accent);
    font-family: var(--msv-font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-hero h1 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.15;
    margin: var(--space-sm) 0 var(--space-md);
}

.public-hero-subtitle {
    color: var(--msv-text-secondary);
    font-size: var(--text-xl);
    line-height: 1.5;
    margin: 0 auto;
    max-width: 42rem;
}

.public-hero-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    margin-top: var(--space-xl);
}

.public-section {
    padding: var(--space-2xl) 0;
}

.public-section h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
    text-align: center;
}

.public-section-lead {
    color: var(--msv-text-secondary);
    font-size: var(--text-xl);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 46rem;
    text-align: center;
}

.public-features {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(3, 1fr);
    margin-top: var(--space-xl);
}

.public-feature-card {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-card);
    padding: var(--space-lg);
}

.public-feature-card h3 {
    font-size: var(--text-base);
    margin-bottom: var(--space-xs);
}

.public-feature-card p {
    color: var(--msv-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
}

.public-closing {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-card);
    margin: var(--space-xl) 0;
    padding: var(--space-2xl);
    text-align: center;
}

.public-closing h2 {
    margin-bottom: var(--space-sm);
}

.public-closing p {
    color: var(--msv-text-secondary);
    margin: 0 auto var(--space-lg);
    max-width: 34rem;
}

.public-footer {
    /* Fissa, non il gradiente/glow dello shell dietro — vedi feedback Davide. */
    background: var(--msv-bg);
    border-top: var(--rule-thin) solid var(--msv-border);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: space-between;
    padding: var(--space-xl);
}

.public-footer-brand {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-width: 20rem;
}

.public-footer-logo {
    height: 20px;
    opacity: .85;
}

.public-footer-brand p {
    color: var(--msv-text-tertiary);
    font-size: var(--text-xs);
    margin: 0;
}

.public-footer-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.public-footer-nav a {
    color: var(--msv-text-secondary);
    font-size: var(--text-sm);
    text-decoration: none;
}

.public-footer-nav a:hover {
    color: var(--msv-text-primary);
}

.public-footer-copy {
    color: var(--msv-text-disabled);
    font-family: var(--msv-font-mono);
    font-size: var(--text-xs);
    margin: 0;
}

/* Prezzi — due card affiancate, stesso peso visivo (Lite non deve sembrare un'opzione minore). */
.pricing-grid {
    display: grid;
    gap: var(--space-lg);
    grid-template-columns: repeat(2, 1fr);
    margin: var(--space-xl) 0;
}

.pricing-card {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-card);
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
}

.pricing-card--pro {
    border-color: var(--msv-accent);
}

.pricing-card-label {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pricing-card-header h2 {
    font-size: var(--text-xl);
    margin: var(--space-xs) 0 var(--space-sm);
}

.pricing-card-price {
    align-items: baseline;
    display: flex;
    gap: var(--space-xs);
    margin: 0 0 var(--space-lg);
}

.pricing-card-amount {
    font-size: 2.25rem;
    font-weight: 800;
}

.pricing-card-period {
    color: var(--msv-text-tertiary);
    font-size: var(--text-sm);
}

.pricing-feature-list {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: var(--space-sm);
    list-style: none;
    margin: 0 0 var(--space-xl);
    padding: 0;
}

.pricing-feature-list li {
    font-size: var(--text-sm);
    padding-left: 1.6em;
    position: relative;
}

.pricing-feature-list li.is-included::before {
    content: "✓";
    color: var(--msv-accent);
    font-weight: 700;
    left: 0;
    position: absolute;
}

.pricing-feature-list li.is-excluded {
    color: var(--msv-text-tertiary);
}

.pricing-feature-list li.is-excluded::before {
    content: "✕";
    color: var(--msv-text-disabled);
    font-weight: 700;
    left: 0;
    position: absolute;
}

.pricing-card-cta {
    width: 100%;
}

.pricing-note {
    background: var(--msv-accent-soft);
    border: var(--rule-thin) solid var(--msv-border-focus, var(--msv-accent));
    border-radius: var(--msv-radius-card);
    margin: var(--space-xl) 0;
    padding: var(--space-lg);
}

.pricing-note p {
    color: var(--msv-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.pricing-note a {
    color: var(--msv-accent);
    font-weight: 600;
}

.pricing-note--info {
    background: var(--msv-surface);
    border-color: var(--msv-border);
    text-align: center;
}

.pricing-note--info h2 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
}

.pricing-note--info p {
    margin: 0 auto var(--space-md);
    max-width: 34rem;
}

@media (max-width: 60rem) {
    .public-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 48rem) {
    .public-header {
        flex-wrap: wrap;
    }

    .public-nav {
        order: 3;
        width: 100%;
    }

    .public-hero-actions {
        flex-direction: column;
    }

    .public-hero-logo {
        height: 64px;
    }

    .public-features {
        grid-template-columns: 1fr;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .public-footer {
        flex-direction: column;
    }

    .docs-layout {
        grid-template-columns: 1fr;
    }

    .docs-sidebar {
        position: static;
    }
}

/* === Messivo — pagina Documentazione sviluppatori ===
 * Vedi prompt-area-pubblica-2-docs-legali.md, Task 1. Stesso sistema --msv-* di Home/Prezzi.
 */
.docs-layout {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: 15rem 1fr;
    padding: var(--space-2xl) 0;
}

.docs-card {
    /* Card nera separata (sommario e documentazione ciascuna nella propria) — feedback Davide. */
    background: var(--msv-bg);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-card);
    padding: var(--space-lg);
}

.docs-sidebar {
    align-self: start;
    position: sticky;
    top: var(--space-xl);
}

.docs-sidebar-title {
    color: var(--msv-text-tertiary);
    font-family: var(--msv-font-mono);
    font-size: var(--text-xs);
    letter-spacing: .06em;
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
}

.docs-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.docs-sidebar a {
    color: var(--msv-text-secondary);
    font-size: var(--text-sm);
    padding: 4px 0;
    text-decoration: none;
}

.docs-sidebar a:hover {
    color: var(--msv-accent);
}

.docs-openapi-link {
    border-top: var(--rule-thin) solid var(--msv-border);
    display: block;
    font-family: var(--msv-font-mono);
    font-size: var(--text-xs);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
}

.docs-content {
    min-width: 0;
}

.docs-section {
    border-top: var(--rule-thin) solid var(--msv-border);
    padding: var(--space-xl) 0;
    scroll-margin-top: var(--space-lg);
}

.docs-section:first-child {
    border-top: none;
    padding-top: 0;
}

.docs-section h2 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-sm);
}

.docs-section > p {
    color: var(--msv-text-secondary);
    line-height: 1.6;
}

.docs-endpoint {
    margin-top: var(--space-lg);
}

.docs-endpoint-signature {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.docs-method {
    border-radius: var(--radius-sm);
    font-family: var(--msv-font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
}

.docs-method-get {
    background: var(--msv-accent-soft);
    color: var(--msv-accent);
}

.docs-method-post {
    background: rgba(74, 222, 159, .12);
    color: var(--msv-accent);
}

.docs-method-put {
    background: var(--msv-warning-bg);
    color: var(--msv-warning);
}

.docs-method-delete {
    background: var(--msv-error-bg);
    color: var(--msv-error);
}

.docs-endpoint-path {
    color: var(--msv-text-primary);
    font-family: var(--msv-font-mono);
    font-size: var(--text-sm);
}

.docs-endpoint p {
    color: var(--msv-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
    margin: 0 0 var(--space-xs);
}

.docs-code {
    background: var(--msv-surface);
    border: var(--rule-thin) solid var(--msv-border);
    border-radius: var(--msv-radius-card);
    font-family: var(--msv-font-mono);
    font-size: 12.5px;
    line-height: 1.6;
    margin: var(--space-xs) 0 var(--space-sm);
    overflow-x: auto;
    padding: var(--space-md);
    white-space: pre;
}

.docs-limits {
    color: var(--msv-text-secondary);
    line-height: 1.6;
    padding-left: 1.2em;
}

.docs-limits li {
    margin-bottom: var(--space-sm);
}

/* === Messivo — pagine legali (Privacy, Termini, Eliminazione dati) ===
 * Vedi prompt-area-pubblica-2-docs-legali.md, Task 2. Prima non avevano CSS dedicato (solo stile
 * di default del browser) — stesso sistema --msv-* del resto dell'area pubblica.
 */
.public-document {
    margin: var(--space-xl) 0 var(--space-2xl);
    max-width: 42rem;
}

.public-document .context-line {
    color: var(--msv-accent);
    font-family: var(--msv-font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.public-document h1 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin: var(--space-xs) 0 var(--space-md);
}

.public-document h2 {
    font-size: var(--text-xl);
    margin: var(--space-xl) 0 var(--space-sm);
}

.public-document p,
.public-document li {
    color: var(--msv-text-secondary);
    line-height: 1.65;
}

.public-document ul {
    padding-left: 1.3em;
}

.public-document li {
    margin-bottom: var(--space-xs);
}

.public-document a {
    color: var(--msv-accent);
}

.public-document-notice {
    background: var(--msv-warning-bg);
    border: var(--rule-thin) solid var(--msv-warning-border, var(--msv-warning));
    border-radius: var(--msv-radius-card);
    color: var(--msv-warning) !important;
    margin-top: var(--space-xl);
    padding: var(--space-md);
}

/* Azioni per riga nella griglia Clienti (Chiave API / Modifica / Sospendi / Elimina). */
.client-actions {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    white-space: nowrap;
}

/* Pulsanti compatti, sempre su una riga (la tabella scorre in orizzontale se serve, mai a capo). */
.client-btn {
    font-size: 11.5px;
    padding: 7px 12px;
    white-space: nowrap;
}

/* Colori per azione (tinta su fondo scuro, testo chiaro): info = chiave API, warn = sospendi,
 * ok = riattiva, danger = elimina. Specificità sopra .msv-btn-* per sovrascriverne il fondo. */
.client-btn.client-btn--info {
    background: rgba(59, 130, 246, .22);
    border-color: rgba(59, 130, 246, .55);
    color: #9cc4ff;
}

.client-btn.client-btn--warn {
    background: rgba(245, 158, 11, .22);
    border-color: rgba(245, 158, 11, .55);
    color: #ffc766;
}

.client-btn.client-btn--ok {
    background: rgba(34, 197, 94, .22);
    border-color: rgba(34, 197, 94, .55);
    color: #86efac;
}

.client-btn.client-btn--danger {
    background: rgba(239, 68, 68, .22);
    border-color: rgba(239, 68, 68, .55);
    color: #fca5a5;
}

.client-btn.client-btn--info:hover,
.client-btn.client-btn--warn:hover,
.client-btn.client-btn--ok:hover,
.client-btn.client-btn--danger:hover {
    filter: brightness(1.25);
}

/* Prima colonna griglia Clienti: icona tipo cliente (computer = headless, persona = account KI). */
.client-type-col {
    width: 1%;
}

.client-type-icon {
    color: var(--msv-text-secondary);
    display: inline-flex;
}