/* 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;
}

/* 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;
}

.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 .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 {
    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;
}

/* 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);
}

.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-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;
}

/* 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;
}

.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);
}

.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;
}