/* ======================================================================
   Unitec HelpDesk — frontend unificato (Chat + Voce)
   Design system condiviso (estratto dalla chatbot) + stili modalità voce.
   ====================================================================== */

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

:root {
    /* Brand palette — Unitec corporate (blu estratto dal logo #003a79) */
    --paper: #ffffff;
    --paper-2: #f5f6f7;
    --paper-3: #eaecef;
    --blue: #003a79;
    --blue-dim: #002c5e;
    --ink: #0f1e33;
    --ink-dim: #48576e;
    --fog: #7a8594;
    --rule: #e5e7eb;
    --rule-ink: #003a79;
    --rosso: #c8102e;
    --rosso-dim: #a00d26;

    /* 4 aree assistente tecnico — palette monocroma blu Unitec */
    --mecc: #2e4a73;
    --mecc-bg: rgba(46, 74, 115, 0.08);
    --elet: #003a79;
    --elet-bg: rgba(0, 58, 121, 0.08);
    --elettron: #1d7ccc;
    --elettron-bg: rgba(29, 124, 204, 0.08);
    --tracc: #0e7b8f;
    --tracc-bg: rgba(14, 123, 143, 0.08);
    --verde: #1f9966;

    /* Unico font del prodotto: Lato (stack Unitec). La gerarchia titoli/etichette/
       paragrafi si fa con peso, dimensione, spaziatura e maiuscolo — non con un
       secondo typeface. --mono resta per compat dei tanti usi esistenti, ma punta
       allo stesso stack (le "etichette tecniche" restano tali via letter-spacing
       + uppercase, in Lato). */
    --sans: 'Lato', Helvetica, Arial, Lucida, sans-serif;
    --mono: 'Lato', Helvetica, Arial, Lucida, sans-serif;

    /* Elevazione — sistema Apple-style: ombre NEUTRE, morbide, stratificate
       (ambient diffusa + contatto stretta), bassa opacità. Niente tinte forti
       che "colano" sugli elementi sotto. Raggi gentili coerenti col brand. */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --elev-1: 0 1px 2px rgba(15, 30, 51, 0.05), 0 2px 6px rgba(15, 30, 51, 0.05);
    --elev-2: 0 2px 6px rgba(15, 30, 51, 0.06), 0 10px 24px -6px rgba(15, 30, 51, 0.10);
    --elev-3: 0 4px 10px rgba(15, 30, 51, 0.07), 0 20px 40px -12px rgba(15, 30, 51, 0.13);
    --elev-hover: 0 6px 14px rgba(15, 30, 51, 0.08), 0 26px 52px -14px rgba(0, 58, 121, 0.18);

    --amp: 0;
    color-scheme: light;
}

html, body { height: 100%; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

.hidden { display: none !important; }

/* ====================================================== */
/* MONO / EYEBROW UTILITIES                                */
/* ====================================================== */
.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-dim);
}
.eyebrow.dim { color: var(--fog); }

.pulse-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--blue);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    animation: pulse 1.8s ease-in-out infinite;
    position: relative;
    top: -1px;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 58, 121, 0.45); }
    50% { box-shadow: 0 0 0 7px rgba(0, 58, 121, 0); }
}

/* ====================================================== */
/* START SCREEN                                            */
/* ====================================================== */
.start {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 40px 56px 32px;
    max-width: 1280px;
    margin: 0 auto;
}

.start-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    height: 38px;
    width: auto;
}

.brand-txt {
    font-family: var(--sans);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.brand-txt em {
    font-style: italic;
    font-weight: 400;
    color: var(--blue);
}

.start-meta {
    display: flex;
    align-items: center;
    gap: 18px;
}

.start-meta .eyebrow { color: var(--ink); }

/* Ingresso voce-only: colonna unica centrata, struttura identica PC/mobile. */
.start-main {
    display: grid;
    /* safe center: centra quando c'è spazio, ma se il contenuto è più alto della
       riga centrale allinea in alto invece di sbordare su header/footer; lo
       scroll interno lo rende sempre raggiungibile. */
    align-content: safe center;
    justify-items: center;
    gap: 32px;
    padding: 28px 0;
    min-height: 0;
    overflow-y: auto;
}

.start-col-l { max-width: 640px; }

.start-col-l .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.display {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 24px;
    animation: displayIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.display em {
    font-style: normal;
    font-weight: 700;
    color: var(--blue);
}

@keyframes displayIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.lede {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-dim);
    max-width: 480px;
    margin-bottom: 40px;
}

.start-col-r {
    padding: 36px 32px;
    background: var(--blue);
    color: #ffffff;
    position: relative;
    box-shadow: 0 30px 60px -30px rgba(0, 58, 121, 0.4);
}

.start-col-r .eyebrow { color: rgba(255, 255, 255, 0.6); }

.access-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 18px 0 12px;
}

.access-label-main {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    color: var(--paper);
}

.field-num {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
}

.access-input {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    transition: border-color 0.25s;
}

.access-input:focus-within {
    border-color: #ffffff;
}

.access-input input {
    background: transparent;
    border: none;
    padding: 20px 22px;
    color: #ffffff;
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    outline: none;
    width: 100%;
}

.access-input input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    text-transform: none;
    letter-spacing: 0;
}

/* --- MODE PICKER (Chat / Voce) --- */
.mode-picker {
    margin-top: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mode-picker .eyebrow { color: rgba(255, 255, 255, 0.55); }

.mode-picker-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffffff;
    color: var(--blue);
    border: 1px solid #ffffff;
    padding: 16px 18px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mode-btn svg { width: 18px; height: 18px; }
.mode-btn:hover {
    background: var(--blue-dim);
    color: #ffffff;
    border-color: var(--blue-dim);
}
.mode-btn:active { transform: scale(0.98); }

.access-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ------------------------------------------------------ */
/* PILOT DROPDOWN — menù a tendina degli 8 pilota         */
/* ------------------------------------------------------ */
.pilot-wrap {
    margin-top: 22px;
    position: relative;
}

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

.pilot-head .eyebrow { color: rgba(255, 255, 255, 0.55); }

.pilot-trigger {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm);
    color: #ffffff;
    padding: 13px 16px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 0.18s, border-color 0.18s;
}

.pilot-trigger:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

.pilot-trigger:focus-visible {
    outline: none;
    border-color: #ffffff;
}

.pilot-wrap.open .pilot-trigger {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.pilot-trigger-label {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -0.005em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pilot-trigger-label.has-value {
    font-family: var(--mono);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.02em;
    font-size: 13px;
}

.pilot-trigger-meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    white-space: nowrap;
}

.pilot-chevron {
    width: 11px;
    height: 11px;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}

.pilot-wrap.open .pilot-chevron { transform: rotate(180deg); }

.pilot-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--blue-dim);
    border: 1px solid #ffffff;
    border-radius: var(--radius-md);
    z-index: 30;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.40), 0 4px 10px rgba(0, 0, 0, 0.18);
    overflow: hidden auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.pilot-options.flip-up {
    top: auto;
    bottom: calc(100% + 4px);
}

.pilot-options::-webkit-scrollbar { width: 6px; }
.pilot-options::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); }

.pilot-wrap.open .pilot-options {
    animation: dropIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.pilot-wrap.open .pilot-options.flip-up {
    animation: dropInUp 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes dropInUp {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.pilot-option {
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    padding: 11px 16px 11px 19px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 0.12s;
    position: relative;
}

.pilot-option:last-child { border-bottom: none; }

.pilot-option:hover {
    background: rgba(255, 255, 255, 0.07);
}

.pilot-option.selected {
    background: rgba(255, 255, 255, 0.11);
}

.pilot-option-code {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
}

.pilot-option-cliente {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pilot-option-meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    white-space: nowrap;
}

.pilot-option[data-paese="IT"] { --paese-color: #008c45; }
.pilot-option[data-paese="ES"] { --paese-color: #ffc400; }
.pilot-option[data-paese="CL"] { --paese-color: #d52b1e; }
.pilot-option[data-paese="US"] { --paese-color: #b22234; }

.access-err {
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 12px;
    color: #ff8591;
    padding: 10px 14px;
    background: rgba(200, 16, 46, 0.15);
    border-left: 2px solid var(--rosso);
}

.start-foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fog);
}

/* ====================================================== */
/* INGRESSO VOCE-ONLY + LOGIN + DEV (2026-06-18)          */
/* ====================================================== */
.login-main {
    display: grid;
    place-content: center;
    justify-items: center;
    min-height: 0;
    padding: 40px 0;
}

/* Pannello blu d'accesso (login e ingresso): iconico Unitec, centrato. */
.access-panel {
    width: 100%;
    max-width: 460px;
    background: var(--blue);
    color: #fff;
    padding: 34px 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-3);
    position: relative;
}
.access-panel .eyebrow,
.access-eyebrow { color: rgba(255, 255, 255, 0.6); display: block; }
.access-title {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 10px 0 24px;
}
.access-field-label {
    display: block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 8px;
}
.access-field-label + .access-input { margin-bottom: 16px; }
/* Login: niente maiuscolo forzato — le credenziali sono case-sensitive e
   l'utente deve vedere esattamente cosa digita (il codice impianto invece
   resta uppercase, è il comportamento voluto su #impiantoInput). */
#loginUser, #loginPass {
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 18px;
}
#loginUser::placeholder, #loginPass::placeholder { letter-spacing: 0; }
.access-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 20px 0 16px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}
.access-divider::before,
.access-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.18); }
.access-panel .pilot-wrap { margin-top: 0; }

/* CTA primaria (Avvia chiamata / Accedi): touch target ampio */
.cta-voice {
    margin-top: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    color: var(--blue);
    border: 1px solid #fff;
    padding: 18px;
    min-height: 56px;
    font-family: var(--sans);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: var(--radius-md);
    box-shadow:
        0 1px 2px rgba(0, 12, 28, 0.10),
        0 8px 20px -8px rgba(0, 12, 28, 0.22);
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.cta-voice:hover {
    background: var(--blue-dim);
    color: #fff;
    border-color: var(--blue-dim);
    transform: translateY(-1px);
    box-shadow:
        0 2px 6px rgba(0, 12, 28, 0.16),
        0 14px 30px -10px rgba(0, 12, 28, 0.32);
}
.cta-voice:active { transform: translateY(0) scale(0.99); }
.cta-voice svg { width: 22px; height: 22px; }

/* Strumenti operatore (Storico / Consulta CASE) sotto il pannello */
.entry-tools {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 460px;
}
.entry-tool {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 16px 18px;
    cursor: pointer;
    text-align: left;
    border-radius: var(--radius-md);
    box-shadow: var(--elev-1);
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
}
.entry-tool:hover {
    border-color: rgba(0, 58, 121, 0.30);
    background: var(--paper);
    transform: translateY(-2px);
    box-shadow: var(--elev-hover);
}
.entry-tool:active { transform: translateY(0); }
.entry-tool-label { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink); }
.entry-tool-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fog); }

/* Footer ingresso: solo il link dev, e solo per ruolo dev. */
.dev-link {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fog);
    transition: color 0.15s;
    padding: 0;
}
.dev-link:hover { color: var(--blue); }
body:not(.role-dev) .start-foot { display: none; }

/* Dev screen — riservato sviluppatori */
.dev-shell {
    max-width: 1080px;
    margin: 0 auto;
    min-height: 100dvh;
    padding: 26px 30px 48px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
}
.dev-head { display: flex; align-items: center; gap: 16px; }
.dev-head h2 {
    font-family: var(--sans);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}
.dev-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    max-width: 520px;
}

/* ====================================================== */
/* CHAT SHELL                                              */
/* ====================================================== */
.chat-shell {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 40px 18px;
}

/* --- top utility strip --- */
.chat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}

.chat-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-brand .brand-mark {
    height: 22px;
    width: auto;
}

.chat-top-meta {
    display: flex;
    align-items: center;
    gap: 18px;
}

.chat-top-meta .eyebrow {
    display: inline-flex;
    align-items: center;
    color: var(--ink);
}

.btn-reset {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.btn-reset:hover {
    background: var(--ink);
    color: var(--paper);
    box-shadow: var(--elev-2);
}

.btn-reset svg { width: 11px; height: 11px; }

/* --- HERO: impianto in assistenza --- */
.impianto-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    padding: 14px 0 14px;
    border-bottom: 1px solid var(--rule);
    align-items: end;
}

.imp-primary .eyebrow {
    display: block;
    margin-bottom: 6px;
}

.imp-code {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(24px, 3.2vw, 34px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}

.imp-sub {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--ink-dim);
}

.imp-sub strong {
    color: var(--ink);
    font-weight: 600;
}

.imp-secondary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 32px;
    border-left: 1px solid var(--rule);
    align-self: stretch;
    justify-content: end;
    min-width: 140px;
}

.imp-secondary .eyebrow {
    margin-bottom: 2px;
}

.imp-value {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.variant-badge {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rule-ink);
    border: 1px solid var(--rule);
    padding: 4px 8px;
}

/* --- PANEL --- */
.panel {
    padding: 20px 0 22px;
    border-bottom: 1px solid var(--rule);
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}

/* --- INDICATORE AREA · 4 banner (scelto pieno, altri 3 attenuati) --- */
.area-banners {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.area-banner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--area-color, var(--fog));
    background: var(--area-bg, transparent);
    transition: opacity 0.35s, border-color 0.35s, background 0.35s;
}
.area-banner .ab-name {
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(11px, 1.05vw, 15px);
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--area-color, var(--ink));
}
.area-banner .ab-conf {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--area-color, var(--fog));
    font-variant-numeric: tabular-nums;
}
/* Prima della classificazione: tutti neutri. */
.area-banners.pending .area-banner {
    --area-color: var(--fog);
    --area-bg: transparent;
    opacity: 0.55;
}
/* Dopo: il classificato pieno, gli altri 3 piu' trasparenti. */
.area-banner.chosen { opacity: 1; }
.area-banner.chosen .ab-name { font-weight: 800; }
.area-banner.dimmed { opacity: 0.3; }
.area-banner[data-area="MECCANICO"]    { --area-color: var(--mecc);     --area-bg: var(--mecc-bg); }
.area-banner[data-area="ELETTRICO"]    { --area-color: var(--elet);     --area-bg: var(--elet-bg); }
.area-banner[data-area="ELETTRONICO"]  { --area-color: var(--elettron); --area-bg: var(--elettron-bg); }
.area-banner[data-area="TRACCIABILITÀ"]{ --area-color: var(--tracc);    --area-bg: var(--tracc-bg); }

/* --- CHAT · WhatsApp-style bubbles --- */
.chat {
    padding: 22px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 58, 121, 0.2) transparent;
    background: #f4f6f9;
    background-image: radial-gradient(circle, rgba(0, 58, 121, 0.07) 1px, transparent 1px);
    background-size: 20px 20px;
    min-height: 0;
}

.chat::-webkit-scrollbar { width: 6px; }
.chat::-webkit-scrollbar-thumb {
    background: rgba(0, 58, 121, 0.2);
}

.message {
    max-width: 72%;
    padding: 9px 14px 6px;
    font-size: 15px;
    line-height: 1.5;
    font-family: var(--sans);
    position: relative;
    animation: msgIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

@keyframes msgIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.message .bubble-body { white-space: pre-wrap; }

.message .bubble-time {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-top: 3px;
    text-align: right;
    opacity: 0.65;
}

.message.agent {
    align-self: flex-start;
    background: #ffffff;
    border: 1px solid var(--rule);
    color: var(--ink);
    border-radius: 12px 12px 12px 2px;
    box-shadow: 0 1px 2px rgba(15, 30, 51, 0.06);
    margin-top: 8px;
}

.message.user {
    align-self: flex-end;
    background: var(--blue);
    color: #ffffff;
    border-radius: 12px 12px 2px 12px;
    box-shadow: 0 1px 2px rgba(0, 58, 121, 0.18);
    margin-top: 8px;
}

.message.agent + .message.agent {
    border-radius: 12px 12px 12px 12px;
    margin-top: 2px;
}
.message.user + .message.user {
    border-radius: 12px 12px 12px 12px;
    margin-top: 2px;
}

.message.system {
    align-self: center;
    margin: 10px 0;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--rule);
    box-shadow: 0 1px 2px rgba(15, 30, 51, 0.04);
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    max-width: fit-content;
}

/* --- TYPING --- */
.typing {
    align-self: flex-start;
    padding: 14px 18px;
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: 12px 12px 12px 2px;
    box-shadow: 0 1px 2px rgba(15, 30, 51, 0.06);
    margin-top: 8px;
    display: none;
}

.typing.visible { display: flex; gap: 6px; }

.typing-dot {
    width: 6px;
    height: 6px;
    background: var(--fog);
    border-radius: 50%;
    animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* --- INPUT --- */
.input-area {
    padding: 18px 0 8px;
    border-top: 1px solid var(--rule);
}

.input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: stretch;
}

.input-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    transition: border-color 0.2s;
}

.input-wrap:focus-within { border-color: var(--ink); }

.input-wrap .eyebrow {
    padding: 8px 18px 0;
    font-size: 10px;
    letter-spacing: 0.14em;
}

.input-field {
    background: transparent;
    border: none;
    padding: 4px 18px 12px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    outline: none;
}

.input-field::placeholder { color: var(--fog); }
.input-field:disabled { opacity: 0.4; cursor: not-allowed; }

.btn {
    width: 54px;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.btn:hover { background: var(--paper-3); }
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; }

.btn-send {
    background: var(--blue);
    color: #ffffff;
    border-color: var(--blue);
}

.btn-send:hover { background: var(--blue-dim); border-color: var(--blue-dim); }
.btn-send:disabled {
    background: var(--rule);
    color: var(--fog);
    border-color: var(--rule);
    cursor: not-allowed;
    transform: none;
}
.btn-send:disabled:hover { background: var(--rule); }

.history-shortcut {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-top: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.history-shortcut:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.history-shortcut-label {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    display: block;
    margin-top: 4px;
}

.history-shortcut-sub {
    font-family: var(--mono);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.04em;
    display: block;
    margin-top: 3px;
}

/* ====================================================== */
/* HISTORY · Industrial WhatsApp (Unitec palette)          */
/* ====================================================== */
.history-shell {
    display: grid;
    grid-template-columns: 380px 1fr;
    height: 100dvh;
    max-width: 1440px;
    margin: 0 auto;
    background: var(--paper);
    overflow: hidden;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
}

.hist-side {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-right: 1px solid var(--rule);
    overflow: hidden;
}

.hist-side-head {
    padding: 22px 22px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--rule);
}

.hist-back {
    width: 34px; height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--elev-1);
    transition: all 0.15s;
    flex-shrink: 0;
}
.hist-back:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #ffffff;
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
}
.hist-back svg { width: 14px; height: 14px; }

.hist-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hist-title .eyebrow { letter-spacing: 0.18em; }
.hist-title h2 {
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--ink);
}

.hist-search {
    margin: 12px 16px 14px;
    padding: 9px 14px;
    border-radius: 980px;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--paper-3);
    transition: background 0.15s, box-shadow 0.15s;
}
.hist-search:focus-within {
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(0, 58, 121, 0.30), var(--elev-1);
}
.hist-search svg {
    width: 15px; height: 15px;
    color: var(--fog);
    flex-shrink: 0;
}
.hist-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    letter-spacing: -0.005em;
}
.hist-search input::placeholder {
    color: var(--fog);
    font-weight: 400;
}

.conv-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}
.conv-list::-webkit-scrollbar { width: 6px; }
.conv-list::-webkit-scrollbar-thumb { background: var(--rule); }

.conv-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    margin: 2px 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.conv-item:hover { background: var(--paper-2); }
.conv-item.selected { background: rgba(0, 58, 121, 0.08); }

.conv-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.02em;
    user-select: none;
}

.conv-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

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

.conv-imp {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-time {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--fog);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.conv-cliente {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-preview {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--fog);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.conv-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-right: 2px;
}

.conv-area-tag {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 980px;
    color: #ffffff;
    background: var(--area-color, var(--fog));
    white-space: nowrap;
}
.conv-area-tag.pending {
    background: transparent;
    color: var(--fog);
    border: 1px solid var(--rule);
}

.conv-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 980px;
    background: var(--blue);
    color: #ffffff;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.conv-item[data-area="MECCANICO"] { --area-color: var(--mecc); }
.conv-item[data-area="ELETTRICO"] { --area-color: var(--elet); }
.conv-item[data-area="ELETTRONICO"] { --area-color: var(--elettron); }
.conv-item[data-area="TRACCIABILITÀ"] { --area-color: var(--tracc); }
.conv-item[data-area="in_corso"] { --area-color: var(--fog); }

.hist-empty-list {
    padding: 50px 24px;
    text-align: center;
    color: var(--fog);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hist-pane {
    display: flex;
    flex-direction: column;
    background: #fbfbfd;
    overflow: hidden;
    position: relative;
}

.pane-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--ink-dim);
    text-align: center;
    padding: 40px;
}
.pane-empty svg {
    width: 56px;
    height: 56px;
    color: var(--blue);
    opacity: 0.4;
}
.pane-empty p {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
}
.pane-empty .eyebrow {
    color: var(--fog);
}

.pane-head {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    z-index: 1;
}

.pane-back {
    display: none;
    width: 34px; height: 34px;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    box-shadow: var(--elev-1);
    flex-shrink: 0;
}
.pane-back svg { width: 14px; height: 14px; }

.pane-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 15px;
}

.pane-head-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pane-head-title {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.pane-head-title span {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-dim);
    margin-left: 8px;
    letter-spacing: 0.02em;
}

.pane-head-sub {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--fog);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pane-head-area {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 13px;
    border-radius: 980px;
    background: var(--area-color, var(--fog));
    color: #ffffff;
}
.pane-head-area.pending {
    background: transparent;
    color: var(--fog);
    border: 1px solid var(--rule);
}
.pane-head[data-area="MECCANICO"] { --area-color: var(--mecc); }
.pane-head[data-area="ELETTRICO"] { --area-color: var(--elet); }
.pane-head[data-area="ELETTRONICO"] { --area-color: var(--elettron); }
.pane-head[data-area="TRACCIABILITÀ"] { --area-color: var(--tracc); }

.pane-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 28px 8% 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 58, 121, 0.2) transparent;
}
.pane-msgs::-webkit-scrollbar { width: 6px; }
.pane-msgs::-webkit-scrollbar-thumb { background: rgba(0, 58, 121, 0.2); }

.day-sep {
    align-self: center;
    margin: 16px 0 10px;
    padding: 2px 12px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--fog);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.bubble {
    max-width: 70%;
    padding: 8px 15px 6px;
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.4;
    position: relative;
    animation: bubbleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.bubble-body {
    white-space: pre-wrap;
}

.bubble-time {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-top: 3px;
    text-align: right;
    opacity: 0.65;
}

.bubble.agent {
    align-self: flex-start;
    background: #e9e9eb;
    color: var(--ink);
    border-radius: 18px 18px 18px 5px;
}

.bubble.user {
    align-self: flex-end;
    background: var(--blue);
    color: #ffffff;
    border-radius: 18px 18px 5px 18px;
}

.bubble + .bubble.agent { margin-top: 2px; }
.bubble + .bubble.user { margin-top: 2px; }

/* Bolle consecutive dello stesso mittente: angoli pieni (gruppo iMessage) */
.bubble.agent + .bubble.agent { border-radius: 18px; }
.bubble.user + .bubble.user { border-radius: 18px; }

/* ====================================================== */
/* VOICE SHELL — console audio nativa                      */
/* ====================================================== */
.shell {
    height: 100dvh;
    display: grid;
    /* rows: top · hero · panel · chat(1fr) · esito-slot(auto) · dock */
    grid-template-rows: auto auto auto 1fr auto auto;
    max-width: 1240px;
    margin: 0 auto;
    padding: 18px 40px 20px;
    gap: 0;
}

.shell .top {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}
.shell .top .brand { margin-right: auto; }

.shell .brand-rule {
    width: 1px;
    height: 30px;
    background: var(--rule);
}
.shell .brand-mark { height: 30px; }
.shell .brand-txt {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: -0.005em;
}
.shell .brand-txt em {
    font-style: italic;
    font-weight: 400;
    color: var(--blue);
    display: block;
    font-size: 12.5px;
}

.mode-block {
    display: grid;
    grid-template-columns: auto;
    justify-items: end;
    gap: 4px;
    padding-left: 24px;
    border-left: 1px solid var(--rule);
}
.mode-block .eyebrow { color: var(--ink-dim); }
.mode-block .mode-desc {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--fog);
    letter-spacing: 0.05em;
    text-transform: none;
    line-height: 1.3;
    max-width: 320px;
    text-align: right;
}

/* Voice hero (flex, 4 celle) */
.shell .impianto-hero {
    display: flex;
    align-items: end;
    gap: 24px;
    padding: 16px 0 18px;
    border-bottom: 1px solid var(--rule);
}
.shell .imp-primary { margin-right: auto; }
.shell .imp-primary .eyebrow { display: block; margin-bottom: 6px; }
.shell .imp-sub {
    display: flex;
    align-items: center;
    gap: 10px;
}
.imp-flag-bar {
    width: 22px; height: 3px;
    background: var(--paese-color, var(--fog));
    display: inline-block;
    flex-shrink: 0;
}
.imp-cell {
    display: flex; flex-direction: column;
    gap: 4px;
    align-self: stretch;
    justify-content: end;
    padding-left: 24px;
    border-left: 1px solid var(--rule);
    min-width: 90px;
}
.imp-cell .eyebrow { margin-bottom: 2px; }
.imp-cell-val {
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
    color: var(--blue);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}
.imp-cell-val.small {
    font-size: 16px;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Live tag (panel-head dx) */
.live-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fog);
}
.live-tag-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--fog);
}
.live-tag[data-state="live"]     { color: var(--verde); }
.live-tag[data-state="live"]     .live-tag-dot { background: var(--verde); animation: pulse 1.1s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(31,153,102,.45); }
.live-tag[data-state="speaking"] { color: var(--elettron); }
.live-tag[data-state="speaking"] .live-tag-dot { background: var(--elettron); animation: pulse 0.8s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(29,124,204,.45); }
.live-tag[data-state="closed"]   { color: var(--ink-dim); }
.live-tag[data-state="closed"]   .live-tag-dot { background: var(--ink-dim); }
.live-tag[data-state="err"]      { color: var(--rosso); }
.live-tag[data-state="err"]      .live-tag-dot { background: var(--rosso); animation: pulse 0.7s ease-in-out infinite; }

/* Voice meters */
.meters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.meter {
    position: relative;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
    transition: opacity 0.4s, border-color 0.4s;
}
.meter::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 0;
    height: 2px;
    background: var(--meter-color, var(--blue));
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.meter.active::before { width: 100%; }
.meter .meter-head {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}
.meter .meter-num {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--fog);
    letter-spacing: 0.1em;
}
.meter .meter-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--ink-dim);
    letter-spacing: -0.005em;
}
.meter.active .meter-name { color: var(--meter-color, var(--blue)); }
.meter .meter-val {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 22px;
    color: var(--ink);
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.meter .meter-val .unit {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--fog);
    margin-left: 4px;
    letter-spacing: 0.04em;
}
.meter .meter-val .mono {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.meter.active .meter-val { color: var(--meter-color, var(--blue)); }
.meter[data-status="live"]     { --meter-color: var(--verde); }
.meter[data-status="speaking"] { --meter-color: var(--elettron); }
.meter[data-status="closed"]   { --meter-color: var(--fog); }
.meter[data-status="err"]      { --meter-color: var(--rosso); }
.meter[data-status="idle"]     { --meter-color: var(--fog); }

/* Regione trascrizione: wrapper grid-child della chat (riga 4 della shell).
   In chiamata occupa 1fr e la chat scorre dentro; a chiamata conclusa
   (.shell.esito-open) si comprime sotto il toggle — vedi blocco esito-open. */
.transcript-region {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.transcript-region .chat { flex: 1 1 auto; }

/* Toggle "Trascrizione · N" — nascosto durante la chiamata, compare a conclusione */
.transcript-toggle { display: none; }

/* Voice transcript bubbles */
.shell .chat {
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
}
.turn {
    max-width: 72%;
    padding: 9px 14px 6px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    position: relative;
    animation: bubbleIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.turn .who {
    font-family: var(--mono);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 3px;
    opacity: 0.65;
}
.turn.assistant {
    align-self: flex-start;
    background: #ffffff;
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 12px 12px 12px 2px;
    box-shadow: 0 1px 2px rgba(15, 30, 51, 0.06);
    margin-top: 8px;
}
.turn.user {
    align-self: flex-end;
    background: var(--blue);
    color: #ffffff;
    border-radius: 12px 12px 2px 12px;
    box-shadow: 0 1px 2px rgba(0, 58, 121, 0.18);
    margin-top: 8px;
}
.turn.assistant + .turn.assistant { border-radius: 12px; margin-top: 2px; }
.turn.user + .turn.user { border-radius: 12px; margin-top: 2px; }
.turn.partial { opacity: 0.62; font-style: italic; }

.chat-empty {
    align-self: center;
    margin: auto 0;
    text-align: center;
    color: var(--fog);
    max-width: 320px;
}
.chat-empty svg {
    width: 64px; height: 64px;
    color: var(--blue);
    opacity: 0.28;
    margin-bottom: 18px;
}
.chat-empty .eyebrow {
    color: var(--ink-dim);
    margin-bottom: 8px;
    display: block;
}
.chat-empty p {
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.chat-empty span.hint {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--fog);
    text-transform: uppercase;
}

/* MIC DOCK */
.dock {
    padding: 18px 0 0;
    border-top: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
}
.dock-l {
    display: flex; flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.dock-l-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.dock-l-head .eyebrow { color: var(--ink); }
.dock-l-head .chunks {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--fog);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.wave-wrap {
    position: relative;
    height: 64px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    overflow: hidden;
}
.wave-wrap::before {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1px;
    background: var(--rule);
}
.wave-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.dock-c {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 10px;
}
.mic-wrap {
    position: relative;
    width: 124px; height: 124px;
    display: grid;
    place-items: center;
}
.ring {
    position: absolute; inset: 0;
    border: 1.5px dashed var(--rule);
    border-radius: 50%;
    pointer-events: none;
    transform: scale(0.7);
    opacity: 0.8;
}
.stage[data-phase="live"] .ring,
.stage[data-phase="speaking"] .ring {
    border-style: solid;
    opacity: 0;
    animation: radar 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.ring:nth-child(2) { animation-delay: 0.7s; }
.ring:nth-child(3) { animation-delay: 1.4s; }
.stage[data-phase="live"]     .ring { border-color: var(--verde); }
.stage[data-phase="speaking"] .ring { border-color: var(--elettron); animation-duration: 1.6s; }
@keyframes radar {
    0%   { transform: scale(0.7); opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}

.mic-btn {
    position: relative;
    width: 92px; height: 92px;
    border-radius: 50%;
    /* Sfera: highlight in alto a sx + fondo più scuro → volume 3D */
    background: radial-gradient(circle at 38% 30%,
        color-mix(in srgb, var(--blue) 74%, #ffffff) 0%,
        var(--blue) 52%,
        color-mix(in srgb, var(--blue) 80%, #000000) 100%);
    color: #fff;
    border: 3px solid var(--paper);
    box-shadow:
        0 0 0 1px var(--blue),
        0 18px 36px -16px rgba(0, 58, 121, 0.55),
        inset 0 -6px 14px rgba(0, 0, 0, 0.18),
        inset 0 6px 12px rgba(255, 255, 255, 0.22);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s, box-shadow 0.2s, filter 0.2s;
    transform: scale(calc(1 + var(--amp) * 0.07));
}
/* Hover: il pulsante si "solleva" verso di te — più luce + ombra portata.
   Uso filter (non transform) per non interferire con la scala audio-reattiva. */
.mic-btn:hover:not(:disabled) {
    filter: brightness(1.08) drop-shadow(0 12px 20px rgba(0, 58, 121, 0.42));
}
.mic-btn:active { transform: scale(0.96); }
.mic-btn:disabled { cursor: wait; opacity: 0.65; }
.stage[data-phase="live"]     .mic-btn { background: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 0 0 4px rgba(31,153,102,0.18), 0 18px 36px -16px rgba(0,58,121,0.5), inset 0 -6px 14px rgba(0,0,0,0.16); }
.stage[data-phase="speaking"] .mic-btn { background: var(--elettron); box-shadow: 0 0 0 1px var(--elettron), 0 18px 36px -16px rgba(29,124,204,0.5), inset 0 -6px 14px rgba(0,0,0,0.16); }
.stage[data-phase="closed"]   .mic-btn { background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--fog) 68%, #ffffff) 0%, var(--fog) 55%, color-mix(in srgb, var(--fog) 78%, #000000) 100%); box-shadow: 0 0 0 1px var(--fog), 0 14px 28px -14px rgba(15,30,51,0.4), inset 0 -6px 14px rgba(0,0,0,0.12), inset 0 6px 12px rgba(255,255,255,0.18); }
.stage[data-phase="err"]      .mic-btn { background: var(--rosso); box-shadow: 0 0 0 1px var(--rosso), 0 18px 36px -16px rgba(200,16,46,0.5), inset 0 -6px 14px rgba(0,0,0,0.16); }

.mic-btn svg { width: 36px; height: 36px; stroke: #fff; fill: none; stroke-width: 2; }
.mic-btn .icon-stop { display: none; }
.stage:not([data-phase="idle"]):not([data-phase="closed"]):not([data-phase="err"]) .mic-btn .icon-mic  { display: none; }
.stage:not([data-phase="idle"]):not([data-phase="closed"]):not([data-phase="err"]) .mic-btn .icon-stop { display: block; }

.mic-cta {
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-dim);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
}

.dock-r {
    display: flex; flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.dock-r-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.dock-r-head .eyebrow { color: var(--ink); }
.dock-r-head .chunks {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--fog);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shortcut-card {
    background: var(--paper-2);
    border: 1px solid var(--rule);
    height: 64px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.shortcut-card kbd {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    box-shadow: 0 1px 0 var(--paper-3);
    padding: 4px 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.shortcut-label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
    letter-spacing: 0.04em;
    line-height: 1.35;
}

/* ESITO card — slot fisso fuori dal transcript */
.esito-slot {
    padding: 18px 0 0;
    /* Tetto d'altezza + scroll interno: un esito lungo (diagnostica espansa)
       scorre dentro di sé invece di rubare l'altezza alla trascrizione. Con la
       diagnostica collassata di default il box resta corto e il tetto non si
       attiva quasi mai. */
    max-height: 46vh;
    overflow-y: auto;
}
.esito-slot.hidden { display: none; }
.esito-slot::-webkit-scrollbar { width: 6px; }
.esito-slot::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }

/* ======================================================
   STATO "esito-open" — chiamata conclusa, focus per fase
   La griglia .shell si ribalta: l'esito diventa l'area focale (1fr), la
   trascrizione si comprime sotto un toggle e il dock si ritira a barra.
   Pensato per il singolo schermo (mobile-first): una cosa importante alla
   volta, niente doppio scroll. La fase live resta invariata.
   ====================================================== */
.shell.esito-open {
    /* top · hero · panel · transcript(auto) · ESITO(1fr) · dock */
    grid-template-rows: auto auto auto auto 1fr auto;
}

/* L'esito riempie la riga focale: niente più tetto a 46vh, scrolla dentro di sé
   solo se davvero lungo (diagnostica espansa). */
.shell.esito-open .esito-slot {
    max-height: none;
    min-height: 0;
    /* Stessa riga d'attacco della trascrizione: border-top + header (esito-head)
       a pari altezza del toggle → i due box partono allineati. */
    border-top: 1px solid var(--rule);
    padding-top: 0;
}

/* Trascrizione compressa: il toggle compare, la chat è nascosta finché non
   la si apre. Aperta, è limitata e scrolla internamente — non ruba il focus. */
.shell.esito-open .transcript-region { border-top: 1px solid var(--rule); }
.shell.esito-open .transcript-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 14px 2px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}
.shell.esito-open .transcript-toggle .eyebrow { color: var(--ink); }
.transcript-toggle-meta {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fog);
}
.tt-chev { font-size: 12px; line-height: 1; transition: transform 0.2s ease; }

/* A chiamata conclusa la trascrizione è sempre visibile (niente overlay).
   Il toggle diventa un'intestazione statica. */
.shell.esito-open .transcript-toggle { pointer-events: none; }
.shell.esito-open .transcript-toggle .tt-chev { display: none; }
.shell.esito-open .transcript-region .chat {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ===== Layout revisione a due colonne (desktop) ===== */
@media (min-width: 860px) {
    .shell.esito-open {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto 1fr auto;
        grid-template-areas:
            "top    top"
            "hero   hero"
            "panel  panel"
            "trans  esito"
            "dock   dock";
        column-gap: 28px;
    }
    .shell.esito-open .top           { grid-area: top; }
    .shell.esito-open .impianto-hero { grid-area: hero; }
    .shell.esito-open .panel         { grid-area: panel; }
    .shell.esito-open .transcript-region { grid-area: trans; min-height: 0; }
    .shell.esito-open .esito-slot    { grid-area: esito; min-height: 0; overflow-y: auto; max-height: none; }
    .shell.esito-open .dock          { grid-area: dock; }
}

/* ===== Mobile concluso: pagina scrollabile (stack) ===== */
@media (max-width: 859px) {
    .shell.esito-open { height: auto; min-height: 100dvh; }
    .shell.esito-open .transcript-region .chat { max-height: 50vh; }
}

/* ===== Card feedback (collaudo) ===== */
.feedback-card {
    margin-top: 16px;
    padding: 18px 20px 20px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--elev-1);
}
.feedback-q { font-weight: 700; font-size: 15px; color: var(--ink); margin: 6px 0 12px; }
.feedback-vote { display: flex; gap: 10px; margin-bottom: 12px; }
.fb-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--ink-dim);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.fb-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.fb-btn:hover { border-color: var(--blue); color: var(--blue); }
.fb-btn.selected { background: var(--blue); border-color: var(--blue); color: #fff; }
.feedback-note {
    width: 100%;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font: inherit;
    resize: vertical;
    outline: none;
    margin-bottom: 12px;
}
.fb-save {
    padding: 9px 20px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--blue);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.fb-save:disabled { opacity: 0.6; cursor: default; }
.fb-confirm {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--verde, #008c45);
}

/* ===== Collaudo nel pannello Storico: scenario (read-only) + feedback (editabile) ===== */
.pane-collaudo {
    flex-shrink: 0;
    border-top: 1px solid var(--rule);
    background: var(--paper);
    padding: 16px 20px 18px;
    overflow-y: auto;
    max-height: 44vh;
}
.pane-collaudo > .eyebrow { color: var(--ink-dim); display: block; margin-bottom: 12px; }
.collaudo-scenario { display: grid; gap: 7px; margin-bottom: 16px; }
.collaudo-scenario .cs-line { display: flex; gap: 12px; align-items: baseline; }
.collaudo-scenario .cs-k {
    flex-shrink: 0;
    min-width: 84px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fog);
}
.collaudo-scenario .cs-v { color: var(--ink); font-size: 14px; line-height: 1.45; }
.pc-feedback .fb-confirm { margin-top: 0; margin-left: 12px; }

/* Dock ritirato: l'oscilloscopio è morto a chiamata conclusa, il mic diventa
   il pulsante "nuova chiamata" — compatto, centrato. */
.shell.esito-open .dock { padding-top: 14px; }
.shell.esito-open .dock-l { display: none; }
.shell.esito-open .mic-wrap { width: 76px; height: 76px; }
.shell.esito-open .mic-btn { width: 56px; height: 56px; }
.shell.esito-open .mic-btn svg { width: 24px; height: 24px; }

.esito-card {
    background: var(--paper);
    color: var(--ink);
    padding: 22px 24px 24px 26px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-2);
    position: relative;
    overflow: hidden;
    animation: esitoIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    align-self: stretch;
    max-width: none;
}
@keyframes esitoIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Rail verticale blu Unitec sul lato della card. */
.esito-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--blue);
}
/* Header gemello del toggle trascrizione: stessa altezza/padding così la card
   esito e il box chat partono allineati. */
.esito-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 2px;
    /* Resta ancorato in cima come l'header trascrizione mentre la card scorre.
       Lo slot (.esito-slot) è il contenitore di scroll; lo sfondo opaco copre
       il contenuto che gli scorre sotto. */
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--paper);
}
.esito-head .eyebrow { color: var(--ink); }
.esito-head-meta {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fog);
}
.esito-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--blue);
}
.esito-area { margin-bottom: 18px; }
.esito-area-k {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-dim);
    margin-bottom: 6px;
}
.esito-area-name {
    display: block;
    font-weight: 800;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--blue);
}
.esito-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 28px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
}
.esito-cell .eyebrow {
    color: var(--ink-dim);
    margin-bottom: 4px;
    display: block;
}
.esito-cell-val {
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--ink);
}

/* Error bar */
.err-bar {
    background: rgba(200, 16, 46, 0.10);
    border-left: 2px solid var(--rosso);
    color: var(--rosso);
    font-family: var(--mono);
    font-size: 12px;
    padding: 8px 12px;
    margin-top: 8px;
    display: none;
    grid-column: 1 / -1;
}
.err-bar.visible { display: block; }

/* ====================================================== */
/* RESPONSIVE                                              */
/* ====================================================== */
@media (max-width: 1080px) {
    .shell .impianto-hero .imp-cell:nth-of-type(3) { display: none; }
    .mode-block .mode-desc { display: none; }
}

@media (max-width: 960px) {
    /* Mobile: sblocca l'altezza del documento E lo scroll del body (il body base
       ha overflow:hidden, che bloccava lo scroll); le schermate crescono col
       contenuto, così la pagina scorre e i bottoni in fondo restano raggiungibili. */
    html, body { height: auto; }
    body { overflow: visible; }
    /* Clip orizzontale a livello viewport: niente sbordo/scroll laterale,
       ma lo scroll verticale resta (html diventa il contenitore di scroll). */
    html { overflow-x: hidden; }
    .start { padding: 28px 32px; height: auto; min-height: 100dvh; }
    .start-main { grid-template-columns: 1fr; gap: 40px; padding: 40px 0; }
    .chat-shell { padding: 20px 24px; }
    .display { font-size: clamp(32px, 7vw, 48px); }
    .impianto-hero { gap: 24px; }
    .history-shell { grid-template-columns: 320px 1fr; }
}

@media (max-width: 860px) {
    .shell { padding: 14px 22px 16px; }
    .shell .top .build { display: none; }
    .mode-block { padding-left: 14px; }
    .shell .impianto-hero { gap: 18px; flex-wrap: wrap; }
    .meters { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .dock { grid-template-columns: 1fr; gap: 16px; }
    .dock-r { text-align: left; }
}

@media (max-width: 720px) {
    .history-shell { grid-template-columns: 1fr; }
    .hist-side { border-right: none; }
    .history-shell.show-pane .hist-side { display: none; }
    .history-shell:not(.show-pane) .hist-pane { display: none; }
    .pane-msgs { padding: 20px 14px; }
    .bubble { max-width: 85%; }
    .pane-head {
        padding: 14px 16px;
        grid-template-columns: auto 40px 1fr auto;
    }
    .pane-back { display: inline-flex; }
    .pane-avatar { width: 40px; height: 40px; font-size: 14px; }
}

@media (max-width: 640px) {
    .start { padding: 24px 20px; }
    .chat-shell { padding: 18px 16px; }
    .message { max-width: 88%; }
    .start-foot { flex-direction: column; gap: 8px; }
    .mode-picker-row { grid-template-columns: 1fr; }
    .chat-top-meta { gap: 12px; }
    .chat-top-meta .eyebrow { font-size: 10px; }
    .impianto-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 0 18px;
    }
    .imp-secondary {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--rule);
        padding-top: 14px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .imp-code { font-size: 38px; }
    .esito-area-name { font-size: 26px; }
    .meter .meter-val { font-size: 18px; }
    .meter .meter-val .mono { font-size: 14px; }
}

/* ====================================================== */
/* DASHBOARD SEGNALAZIONI                                  */
/* ====================================================== */
.dash-shell {
    max-width: 1080px;
    margin: 0 auto;
    min-height: 100dvh;
    padding: 26px 30px 48px;
    background: var(--paper);
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
}
.dash-shell .hist-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    border: 0;
}
.dash-shell .hist-head h2 {
    font-family: var(--sans);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

/* Toolbar filtri — controlli squadrati, label mono come il resto dell'app */
.dash-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-filters select {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    box-shadow: var(--elev-1);
    height: 38px;
    /* Freccia nativa rimossa → chevron SVG coerente con gli altri controlli,
       allineato a destra e centrato verticalmente. */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2348576e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding: 0 36px 0 14px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dash-filters select:hover { border-color: rgba(0, 58, 121, 0.30); box-shadow: var(--elev-2); }
.dash-filters select:focus { outline: none; border-color: var(--blue); }
.dash-filters button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    box-shadow: var(--elev-1);
    height: 38px;
    padding: 0 16px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.dash-filters button svg { width: 15px; height: 15px; flex-shrink: 0; }
.dash-filters button:hover { border-color: rgba(0, 58, 121, 0.30); color: var(--blue); box-shadow: var(--elev-2); transform: translateY(-1px); }
.dash-filters button:active { transform: translateY(0); }
.dash-filters button:focus-visible { outline: none; border-color: var(--blue); }

/* KPI strip — 4 celle, numero Archivo blu + label mono maiuscola */
.dash-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dash-kpi .kpi-cell {
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--paper);
    box-shadow: var(--elev-1);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow 0.18s, transform 0.18s;
}
.dash-kpi .kpi-cell:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }
.dash-kpi .kpi-cell b {
    font-family: var(--sans);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--blue);
}
.dash-kpi .kpi-cell span {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fog);
}

/* Tab a sottolineatura (stile editoriale/tecnico) */
.dash-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); }
.dash-tab {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-dim);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 11px 16px;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.dash-tab:hover { color: var(--blue); }
.dash-tab.on { color: var(--blue); border-bottom-color: var(--blue); }

/* Pannello grafico — altezza fissa, il canvas la riempie (maintainAspectRatio:false) */
.dash-panel {
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: 18px;
    height: 420px;
    position: relative;
}
.dash-panel canvas { display: block; }

@media (max-width: 760px) {
    .dash-shell { padding: 20px 16px 40px; }
    .dash-kpi { grid-template-columns: repeat(2, 1fr); }
    .dash-panel { height: 340px; }
}

/* ====================================================== */
/* TIER TELEFONO (≤480px) — rifinitura mobile             */
/* In fondo al file: vince la cascata sui breakpoint      */
/* superiori e sul blocco dashboard @760.                 */
/* ====================================================== */
@media (max-width: 480px) {
    /* Chat e voce: su telefono scorrono come pagina invece di restare bloccate
       a 100dvh (il contenuto impilato eccede lo schermo). */
    .chat-shell, .shell { height: auto; min-height: 100dvh; }

    /* --- Touch target ≥44px sui controlli piccoli --- */
    .btn-reset { padding: 10px 14px; min-height: 40px; }
    .hist-back, .pane-back { width: 42px; height: 42px; }
    .dash-tab { padding: 13px 14px; }
    .dash-filters { gap: 8px; }
    .dash-filters select, .dash-filters button { height: 44px; flex: 1 1 0; min-width: 0; }

    /* --- Start (flusso operatore) --- */
    .start { padding: 22px 16px; }
    /* Header: su telefono non entra in una riga (logo+brand+stato+orologio+esci).
       Lascio wrappare, riduco il brand e nascondo l'orologio (rumore su mobile). */
    .start-head { flex-wrap: wrap; gap: 10px 12px; padding-bottom: 16px; }
    .brand { gap: 10px; min-width: 0; }
    .brand-mark { height: 32px; }
    .brand-txt { font-size: 13px; }
    .start-meta { gap: 12px; flex-wrap: wrap; }
    .start-meta .eyebrow { font-size: 10px; }
    #startClock { display: none; }
    .access-input input { font-size: 18px; padding: 16px 16px; }
    .display { font-size: clamp(30px, 8vw, 40px); }

    /* --- Chat: banner aree 4→2 colonne, code più piccolo --- */
    .chat-shell { padding: 16px 14px; }
    .area-banners { grid-template-columns: repeat(2, 1fr); }
    .imp-code { font-size: 28px; }

    /* --- Voice: padding compatti, niente overflow celle hero --- */
    .shell { padding: 14px 16px 16px; }
    .imp-cell { min-width: 72px; }
    .imp-cell-val { font-size: 20px; }
    .esito-area { font-size: 24px; }
    /* Niente sbordo orizzontale: i figli flex/grid possono restringersi e i
       contenitori/canvas non superano la larghezza schermo. */
    .panel, .dock, .impianto-hero, .chat, .esito-slot { max-width: 100%; }
    .meters .meter, .dock-l, .dock-r, .imp-primary { min-width: 0; }
    .wave-wrap, .wave-wrap canvas, #wave { max-width: 100%; }
    .meter-val .mono { word-break: break-word; }
    /* Hero voce: è `display:flex` con `.shell .imp-primary{margin-right:auto}`
       (specificità 0,2,0) → la regola di collasso generica non la batte. Qui la
       impilo con la STESSA specificità: impianto a piena riga, livello/paese sotto. */
    .shell .impianto-hero { flex-wrap: wrap; gap: 14px 16px; }
    .shell .imp-primary { margin-right: 0; flex: 1 1 100%; }
    .shell .imp-sub { flex-wrap: wrap; }
    .shell .meters { grid-template-columns: 1fr 1fr; }
    /* Header voce: anche `.top` non deve sbordare */
    .shell .top { flex-wrap: wrap; gap: 10px; }
    .shell .top .mode-block { display: none; }

    /* --- Dashboard --- */
    .dash-shell { padding: 18px 14px 36px; }
    .dash-kpi { gap: 8px; }
    .dash-kpi .kpi-cell { padding: 13px 12px; }
    .dash-kpi .kpi-cell b { font-size: 22px; }
    .dash-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dash-tab { flex: 0 0 auto; white-space: nowrap; }
    .dash-panel { height: 300px; padding: 12px; }
}

/* Telefoni molto stretti (≤360px) */
@media (max-width: 360px) {
    .imp-code { font-size: 24px; }
    .display { font-size: 28px; }
    .access-input input { font-size: 17px; }
}

/* --- Consulta CASE --- */
.cases-head-row, .cases-row {
    display: grid;
    grid-template-columns: 152px 110px 90px 90px 1fr 18px;
    gap: 8px;
    align-items: center;
}
.cases-head-row {
    padding: 6px 12px;
    font: 600 11px/1.4 ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fog, #888);
    border-bottom: 1px solid var(--rule, #e3e3e3);
}
.cases-list { display: flex; flex-direction: column; overflow: auto; }
.cases-row {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--rule, #eee);
    padding: 10px 12px;
    cursor: pointer;
    font: inherit;
}
.cases-row:hover { background: var(--paper, #f6f6f6); }
.cases-caseid { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; font-size: 12.5px; color: var(--blue); letter-spacing: .01em; white-space: nowrap; }
.cases-area { font-weight: 600; }
/* Affordance "clicca per espandere": chevron a destra, hover marcato, riga aperta */
.cases-chev {
    justify-self: end;
    color: var(--fog, #aaa);
    font-size: 18px;
    line-height: 1;
    transition: transform .15s ease, color .15s ease;
}
.cases-row:hover { background: var(--paper, #eef2fb); }
.cases-row:hover .cases-chev { color: var(--blue, #6b8cce); transform: translateX(2px); }
/* La lista è un flex column scrollabile: le righe non devono MAI restringersi
   (con overflow:hidden sull'item aperto il flex lo comprimerebbe a 0, nascondendo
   il dettaglio su schermi bassi). Deve scrollare il contenitore, non la riga. */
.case-item { flex-shrink: 0; }

/* Riga espansa = card raggruppata Apple-style: arrotondata, sollevata, niente
   barra blu dura a sinistra. Il bordo-divisore della riga sparisce dentro la card. */
.case-item.open {
    border-radius: var(--radius-md);
    background: var(--paper-2);
    box-shadow: var(--elev-2);
    overflow: hidden;
    margin: 6px 0;
}
.case-item.open .cases-row { background: transparent; border-bottom: 1px solid var(--rule); }
.case-item.open .cases-chev { transform: rotate(90deg); color: var(--blue, #6b8cce); }
.cases-empty { padding: 20px; color: var(--fog, #888); text-align: center; }

/* Dettaglio INLINE: si espande sotto la riga, dentro la lista (le righe sotto
   scorrono giù). Niente pannello che copre la lista. Visibile solo da aperto. */
.case-inline {
    display: none;
    padding: 12px 16px 18px;
    background: var(--paper-2);
}
.case-item.open .case-inline { display: block; }
.case-detail-title {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fog);
}
.case-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.case-dl {
    text-decoration: none;
    font-weight: 600;
    border: 1px solid var(--blue, #6b8cce);
    color: var(--blue, #6b8cce);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    box-shadow: var(--elev-1);
    transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.case-dl:hover {
    background: var(--blue);
    color: #fff;
    box-shadow: var(--elev-2);
    transform: translateY(-1px);
}
.case-field {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px;
    padding: 5px 0;
    border-bottom: 1px solid var(--rule, #f0f0f0);
}
.case-field-k { color: var(--fog, #888); font-size: 13px; }
.case-field-v { white-space: pre-wrap; }

/* Layout Consulta CASE: altezza viewport, lista scrollabile, dettaglio in basso.
   Sovrascrive .dash-shell (che cresce col contenuto) solo per #casesScreen. */
#casesScreen {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}
#casesScreen .cases-list {
    flex: 1 1 auto;
    min-height: 0;        /* indispensabile perché overflow:auto scrolli in flex */
    overflow-y: auto;
}

/* --- Consulta CASE su telefono ---
   Il grid a 6 colonne fisse (~620px) non entra in uno schermo da ~345px → le
   colonne collassano e i valori si disallineano dall'intestazione. Su mobile
   passo a una riga IMPILATA (card): l'intestazione tabellare sparisce, ogni CASE
   mostra ID + area sulla prima riga e data · impianto · canale come meta sotto. */
@media (max-width: 600px) {
    .cases-head-row { display: none; }
    .cases-head-row, .cases-row {
        grid-template-columns: auto auto auto 1fr auto;
        grid-template-areas:
            "caseid caseid caseid area chev"
            "date   imp    canale .    .";
        column-gap: 8px;
        row-gap: 5px;
        align-items: center;
    }
    .cases-row { padding: 14px 16px; }
    .cases-caseid { grid-area: caseid; font-size: 13.5px; }
    .cases-area   { grid-area: area; justify-self: end; text-align: right; font-size: 13px; }
    .cases-chev   { grid-area: chev; align-self: center; }
    .cases-date   { grid-area: date; }
    .cases-imp    { grid-area: imp; }
    .cases-canale { grid-area: canale; }
    .cases-date, .cases-imp, .cases-canale {
        font-size: 12px;
        color: var(--fog);
        white-space: nowrap;
    }
    /* L'area aperta resta una card raggruppata: ok così. */
}

/* ===== Collaudo: scenario pre-chiamata ===== */
/* ===== Collaudo: scenario pre-chiamata (sezione di test nel pannello blu) =====
   Vive dentro .access-panel (testo bianco su blu). Staccata dalla scelta
   impianto con una hairline, con respiro verticale tra label, campo, area e chip. */
.collaudo-pre {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.collaudo-pre .access-field-label { margin-bottom: 10px; }
.collaudo-pre .access-input { margin-bottom: 20px; }
.collaudo-pre textarea {
    width: 100%;
    border: none;
    background: transparent;
    padding: 14px 16px;
    min-height: 62px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    color: #ffffff;
    resize: vertical;
    outline: none;
}
.collaudo-pre textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
/* "Area attesa" eyebrow: respiro prima dei chip */
.collaudo-pre .eyebrow { margin-bottom: 11px; }
.area-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.area-chip {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 8px 17px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.area-chip:hover:not(.disabled) {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}
.area-chip.selected {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--blue);
}
.area-chip.disabled {
    opacity: 0.32;
    cursor: not-allowed;
    background: transparent;
}

.case-scenario {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fog);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 1px 6px;
}