:root {
    --bg: #ffffff;
    --bg-subtle: #f6f7f9;
    --bg-sidebar: #f3f5f7;
    --border: #e5e7eb;
    --text: #111318;
    --text-muted: #6b7280;
    --primary: #0f8a68;
    --primary-soft: rgba(15, 138, 104, .10);
    --primary-contrast: #ffffff;
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #d97706;
    --sidebar-width: 248px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-card: 0 1px 2px rgba(17, 19, 24, .04);
    --shadow-pop: 0 10px 34px rgba(17, 19, 24, .16);
}

:root[data-theme="dark"] {
    --bg: #0e1117;
    --bg-subtle: #161a23;
    --bg-sidebar: #12151d;
    --border: #262b36;
    --text: #e6e8eb;
    --text-muted: #9aa1ac;
    --primary: #2fbf96;
    --primary-soft: rgba(47, 191, 150, .12);
    --primary-contrast: #0b1210;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-pop: 0 10px 34px rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0e1117;
        --bg-subtle: #161a23;
        --bg-sidebar: #12151d;
        --border: #262b36;
        --text: #e6e8eb;
        --text-muted: #9aa1ac;
        --primary: #2fbf96;
        --primary-soft: rgba(47, 191, 150, .12);
        --primary-contrast: #0b1210;
        --shadow-card: 0 1px 2px rgba(0, 0, 0, .25);
        --shadow-pop: 0 10px 34px rgba(0, 0, 0, .5);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

a { color: inherit; }

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ===================== Sidebar ===================== */

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    background: var(--bg-sidebar);
    padding: 14px 12px 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 14px;
    padding: 6px 10px 14px;
    letter-spacing: .01em;
}

.sidebar .brand .brand-mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
}

.sidebar .brand .brand-mark img { width: 100%; height: 100%; display: block; }

.sidebar .brand small {
    display: block;
    font-weight: 500;
    font-size: 10.5px;
    color: var(--text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Contesto corrente: chip con il tenant scelto e il ritorno all'elenco */
.nav-context {
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: var(--radius);
    padding: 8px 10px;
    margin: 0 2px 12px;
}

.nav-context .ctx-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 3px;
}

.nav-context .ctx-back:hover { color: var(--primary); }

.nav-context .ctx-back svg { width: 12px; height: 12px; }

.nav-context .ctx-name {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    word-break: break-word;
}

.nav-section {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 10px 5px;
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-muted);
    font-weight: 500;
    margin-bottom: 1px;
    border-left: 2px solid transparent;
    transition: background .12s ease, color .12s ease;
}

.sidebar nav a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: .85;
}

.sidebar nav a:hover {
    background: var(--border);
    color: var(--text);
}

.sidebar nav a.active {
    background: var(--primary-soft);
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 600;
}

/* --- Barra utente nella sidebar --- */
.sidebar-user {
    margin-top: auto;
    padding: 12px 10px 4px;
    border-top: 1px solid var(--border);
    font-size: 12px;
}
.sidebar-user .who { color: var(--text); font-weight: 600; word-break: break-all; }
.sidebar-user .role { color: var(--text-muted); margin-bottom: 8px; }

/* ===================== Area principale ===================== */

.main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.header {
    height: 54px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
    background: var(--bg);
}

.header h1 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.sidebar-toggle {
    display: none;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: var(--radius);
    padding: 6px 8px;
    cursor: pointer;
    line-height: 0;
}

.sidebar-toggle svg { width: 18px; height: 18px; }

.content {
    padding: 20px;
    overflow: auto;
    flex: 1;
    min-height: 0;
}

.theme-toggle {
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: var(--radius);
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}
.theme-toggle:hover { border-color: var(--text-muted); }

/* ===================== Componenti base ===================== */

/* Striscia di numeri (tenant totali, numeri collegati...): le card restano
   larghe quanto serve e si allineano a sinistra. Con 1fr una riga da tre
   diventava tre riquadri da 370px con dentro una cifra sola. */
.grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 260px));
    justify-content: start;
}

.card {
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-card);
}

.card .value {
    font-size: 24px;
    font-weight: 700;
    margin: 4px 0 0;
}

.card .label {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ===================== Griglia dei pannelli =====================
   Sta qui, non nelle singole viste: prima ogni pagina ne teneva una copia
   inline e le copie erano gia' divergenti.

   Due colonne fisse, non `auto-fit`: con `auto-fit` il numero di colonne
   dipendeva da quante card erano visibili in quel momento, e una card
   `.span2` bastava a far comparire una terza colonna vuota. Risultato:
   nello stesso pannello convivevano card da meta' schermo, da un terzo e a
   tutta larghezza. */

.panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    /* Le card affiancate chiudono la riga alla stessa altezza: e' la riga a
       finire dritta, non ogni card per conto suo. */
    align-items: stretch;
}

/* Senza questo una tabella larga dentro la card allarga la colonna. */
.panel-grid > .card,
.panel-grid > .card-stack { min-width: 0; }

/* Card a tutta larghezza: tabelle, elenchi, riquadri che in meta' schermo
   non ci stanno. */
.panel-grid > .card.span2 { grid-column: 1 / -1; }

.panel-grid .card h3 { margin: 0 0 10px; font-size: 14px; }

/* Piu' card corte impilate occupano una colonna sola: e' il modo di mettere
   due riquadri brevi accanto a uno lungo senza lasciare un buco. */
.card-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* L'ultimo riquadro della pila si prende l'altezza che avanza, cosi' la
   colonna finisce alla stessa quota di quella accanto invece di lasciare
   un gradino. Su schermo stretto la pila non ha vicini e la regola non
   ha effetto. */
.card-stack > .card:last-child { flex: 1 1 auto; }

/* In una card a tutta larghezza i campi non devono stirarsi per 1100px. */
.form-narrow { max-width: 560px; }

/* Banco di prova del bot: la chat vale piu' della colonna di stato accanto,
   quindi qui le due colonne non sono pari. Sotto i 1100px vale la regola
   generale e le card si impilano. */
.panel-grid.sim-grid { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); }

@media (max-width: 1100px) {
    .panel-grid,
    .panel-grid.sim-grid { grid-template-columns: minmax(0, 1fr); }
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
}

th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

tbody tr:hover td { background: var(--primary-soft); }
tbody tr.is-skeleton:hover td,
.card tbody tr:hover td { background: transparent; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .12s ease, background .12s ease;
    text-decoration: none;
}

.btn:hover { border-color: var(--text-muted); }

.btn-primary {
    background: var(--primary);
    color: var(--primary-contrast);
    border-color: var(--primary);
    font-weight: 600;
}

.btn-primary:hover { filter: brightness(1.06); border-color: var(--primary); }

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

input, select, textarea {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    margin-top: 10px;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 16px;
}

.modal-overlay.open { display: flex; }

.modal {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 420px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px;
    box-shadow: var(--shadow-pop);
}

.modal h2 { margin-top: 0; font-size: 16px; }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ===================== Selezione tenant ===================== */

.chooser-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.chooser-head h2 { margin: 0 0 2px; font-size: 20px; }
.chooser-head .sub { color: var(--text-muted); font-size: 13px; }

.chooser-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.chooser-tools input { width: 240px; }

.tenant-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.tenant-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-card);
    transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}

.tenant-card:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(17, 19, 24, .08);
}

.tenant-card .tc-top {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.tenant-card .tc-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.tenant-card .tc-name {
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.25;
    word-break: break-word;
}

.tenant-card .tc-id { color: var(--text-muted); font-size: 11.5px; margin-top: 1px; }

.tenant-card .tc-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.tenant-card .tc-actions {
    display: flex;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* ===================== Conversazioni ===================== */

.conversations-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.conversations-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    flex: 1;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg);
}

.conv-list {
    border-right: 1px solid var(--border);
    overflow-y: auto;
    background: var(--bg-subtle);
}

.conv-list-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.conv-list-item:hover { background: var(--border); }

.conv-list-item.active {
    background: var(--primary-soft);
    box-shadow: inset 2px 0 0 var(--primary);
}

.conv-list-item .name { font-weight: 600; }
.conv-list-item .preview {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.chat-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bubble {
    max-width: 60%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.4;
}

.bubble.in {
    align-self: flex-start;
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

.bubble.out {
    align-self: flex-end;
    background: var(--primary);
    color: var(--primary-contrast);
    border-bottom-right-radius: 4px;
}

.bubble .meta {
    display: block;
    font-size: 10px;
    opacity: .7;
    margin-top: 4px;
}

.chat-input {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border);
}

.chat-input textarea { flex: 1 1 160px; min-width: 0; }

.chat-input textarea {
    resize: none;
    height: 40px;
}

.select-tenant {
    max-width: 260px;
    margin-bottom: 16px;
}

.muted { color: var(--text-muted); }

/* --- Tab navigation (in pagina; la navigazione dei pannelli sta in sidebar) --- */
.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px;
    overflow-x: auto;
}

.tabs .tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 500;
    padding: 10px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.tabs .tab:hover { color: var(--text); }

.tabs .tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* --- Badge di stato --- */
.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    border: 1px solid var(--border);
    background: var(--bg-subtle);
    color: var(--text-muted);
}

.badge-ok { color: var(--success); border-color: var(--success); }
.badge-bad { color: var(--danger); border-color: var(--danger); }
.badge-warn { color: var(--warning); border-color: var(--warning); }

/* --- Utility varie --- */
.btn-sm { padding: 3px 9px; font-size: 12px; }
.btn-danger-outline { color: var(--danger); }
.btn-danger-outline:hover { border-color: var(--danger); }
.empty-state {
    color: var(--text-muted);
    text-align: center;
    padding: 24px 12px;
    font-size: 13px;
}

/* --- Card di stato (Panoramica) --- */
.status-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 12px;
}

.status-summary .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-summary.ok { border-color: var(--success); }
.status-summary.ok .dot { background: var(--success); }
.status-summary.warn { border-color: var(--warning); }
.status-summary.warn .dot { background: var(--warning); }
.status-summary.bad { border-color: var(--danger); }
.status-summary.bad .dot { background: var(--danger); }

.status-list { font-size: 13px; }
.status-list .srow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}
.status-list .srow:last-child { border-bottom: none; }
.status-list .srow .slabel { color: var(--text-muted); flex-shrink: 0; }
.status-list .srow .svalue { text-align: right; }
.status-list .srow .snote { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; }

/* --- Pagine di autenticazione --- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-subtle);
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-card);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.auth-brand .brand-mark {
    width: 24px;
    height: 24px;
    display: inline-flex;
}
.auth-brand .brand-mark img { width: 100%; height: 100%; display: block; }

.auth-title { font-size: 20px; margin: 0 0 4px; }
.auth-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 18px; }
.auth-submit { width: 100%; justify-content: center; margin-top: 18px; }

.auth-alert {
    border-radius: var(--radius);
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
}
.auth-alert.bad { border-color: var(--danger); color: var(--danger); }
.auth-alert.ok { border-color: var(--success); color: var(--success); }

.auth-foot {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}
.auth-foot a { color: var(--primary); text-decoration: none; font-weight: 500; }

/* --- Skeleton loading --- */
@keyframes skeleton-pulse {
    0% { opacity: .45; }
    50% { opacity: 1; }
    100% { opacity: .45; }
}
.skeleton-line {
    height: 13px;
    border-radius: 6px;
    background: var(--border);
    animation: skeleton-pulse 1.2s ease-in-out infinite;
    margin: 10px 0;
}

/* --- Stati di caricamento / vuoto della pagina conversazioni --- */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    vertical-align: -2px;
    margin-right: 7px;
}
.conv-list-state {
    padding: 14px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}
.conv-list-state strong { color: var(--text); }
.conv-list-state .btn { margin-top: 8px; }
.conv-list-item.is-skeleton { cursor: default; }
.conv-list-item.is-skeleton:hover { background: transparent; }
.chat-state {
    align-self: center;
    margin: auto;
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    max-width: 420px;
    line-height: 1.5;
}

/* --- Notifiche (toast in basso a destra) --- */
.toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 340px;
}

.toast {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--success);
    border-radius: var(--radius);
    padding: 11px 13px;
    box-shadow: var(--shadow-pop);
    cursor: pointer;
    animation: toast-in .22s ease-out;
}

.toast:hover { border-color: var(--primary); }

.toast .toast-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.toast .toast-from { font-weight: 600; font-size: 13px; }
.toast .toast-tenant { color: var(--text-muted); font-size: 11px; }
.toast .toast-body { font-size: 12px; color: var(--text-muted); line-height: 1.4; }

.toast .toast-close {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0 0 0 6px;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Pallino con il numero di messaggi non letti, accanto alla voce di menu */
.nav-badge {
    display: inline-block;
    min-width: 18px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    margin-left: auto;
}

/* Errore di invio sopra la barra di scrittura */
.chat-error {
    margin: 0 12px 8px;
    padding: 8px 10px;
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    color: var(--danger);
    font-size: 12px;
    line-height: 1.45;
}

/* --- Badge ambiente (staging / produzione) --- */
.env-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}
.env-badge .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.env-badge.prod { color: var(--success); border-color: var(--success); }
.env-badge.prod .dot { background: var(--success); }
.env-badge.staging { color: var(--warning); border-color: var(--warning); }
.env-badge.staging .dot { background: var(--warning); }
.env-badge.limited { color: var(--warning); border-color: var(--warning); }
.env-badge.limited .dot { background: var(--warning); }
.env-badge.none { color: var(--text-muted); }
.env-badge.none .dot { background: var(--text-muted); }

.env-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Elenco requisiti per la produzione */
.req-list { list-style: none; padding: 0; margin: 10px 0 0; font-size: 13px; }
.req-list li {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 7px 0; border-bottom: 1px solid var(--border);
}
.req-list li:last-child { border-bottom: none; }
.req-list .mark { flex-shrink: 0; font-weight: 700; width: 16px; }
.req-list .ok { color: var(--success); }
.req-list .ko { color: var(--danger); }
.req-list .txt small { display: block; color: var(--text-muted); font-size: 11px; margin-top: 2px; }

/* --- Chat: finestra 24h e invio template --- */
.win-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.win-badge .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.win-badge.open { color: var(--success); border-color: var(--success); }
.win-badge.open .dot { background: var(--success); }
.win-badge.closed { color: var(--warning); border-color: var(--warning); }
.win-badge.closed .dot { background: var(--warning); }

.tpl-panel {
    border-top: 1px solid var(--border);
    background: var(--bg-subtle);
    padding: 12px 14px;
    max-height: 46%;
    overflow-y: auto;
}
.tpl-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tpl-panel-head strong { font-size: 13px; }
.tpl-preview {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
}
.tpl-preview .hdr { font-weight: 700; display: block; margin-bottom: 4px; }
.tpl-preview .ftr { display: block; margin-top: 6px; color: var(--text-muted); font-size: 11px; }
.tpl-unsupported { color: var(--danger); font-size: 12px; margin-top: 8px; }

/* --- Avviso "numero di prova": la regola dei 5 destinatari abilitati --- */
.staging-banner {
    border: 1px solid var(--warning);
    color: var(--warning);
    background: rgba(217, 119, 6, .06);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    margin-bottom: 10px;
}
.staging-banner strong { color: inherit; }
.staging-banner a { color: inherit; font-weight: 600; }
.staging-banner ol { margin: 6px 0 0; padding-left: 18px; }
.staging-banner li { margin: 2px 0; }

/* --- Istruzioni operative dentro una card --- */
.how-to {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.55;
    background: var(--bg);
}
.how-to ol { margin: 6px 0 6px; padding-left: 18px; }
.how-to li { margin: 3px 0; }
.how-to .after { color: var(--text-muted); }
.tr-count { font-size: 12px; color: var(--text-muted); }

/* --- Messaggi non consegnati: Meta puo' accettarli e farli fallire dopo --- */
.bubble.failed,
.bubble.out.failed {
    background: rgba(220, 38, 38, .10);
    border: 1px solid var(--danger);
    color: var(--text);
}
.bubble .fail {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--danger);
    font-weight: 600;
}
.bubble .fail .btn { margin-top: 6px; font-weight: 500; }

/* --- Catalogo prodotti --- */
.prod-thumb { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-subtle); }
.catalog-state { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.catalog-state .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.catalog-state .mark.ok { color: var(--success); }
.catalog-state .mark.ko { color: var(--danger); }

/* ===================== Responsive ===================== */

/* Chat su schermi stretti: elenco sopra, conversazione sotto */
@media (max-width: 900px) {
    .conversations-layout {
        grid-template-columns: 1fr;
        /* L'elenco cede spazio alla conversazione sugli schermi bassi. */
        grid-template-rows: minmax(72px, 26%) minmax(0, 1fr);
    }
    .conv-list { border-right: none; border-bottom: 1px solid var(--border); }
}

/* Sidebar a scomparsa su mobile */
@media (max-width: 820px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: none;
    }
    body.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-pop);
    }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        z-index: 99;
    }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .sidebar-toggle { display: inline-flex; }
    .content { padding: 14px; }
    .header { padding: 0 14px; }
}