/* ==========================================================================
   Chat di assistenza: pagina pubblica /assistenza, console /admin/chat, pulsante flottante.
   File locale caricato da entrambi i layout (nessuno stile inline: CSP).
   ========================================================================== */
:root {
    --chat-ink: #14213d;
    --chat-muted: #5b6577;
    --chat-line: #e3e6ec;
    --chat-bg: #f5f6f9;
    --chat-primary: #2a5bd7;
    --chat-primary-d: #1f47ad;
    --chat-accent: #f59f0b;
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.chat-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1.5rem; align-items: start; }
.chat-panel { background: #fff; border: 1px solid var(--chat-line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
.chat-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--chat-line); background: #fafbfd; }
.chat-panel__head > div { display: grid; gap: .1rem; }
.chat-panel__note { padding: 0 1.1rem .8rem; margin: 0; }

.chat-log { list-style: none; margin: 0; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .65rem; min-height: 280px; max-height: 60vh; overflow-y: auto; background: linear-gradient(180deg, #fbfcfe, #f6f8fc); scroll-behavior: smooth; }
.chat-log--static { max-height: none; }
.chat-empty { color: var(--chat-muted); text-align: center; margin: auto; max-width: 36ch; font-size: .95rem; }

.chat-msg { display: grid; gap: .2rem; max-width: 78%; padding: .6rem .8rem; border-radius: 14px; line-height: 1.45; font-size: .95rem; }
.chat-msg__meta { font-size: .72rem; font-weight: 600; letter-spacing: .02em; opacity: .75; }
.chat-msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Visitatore: a destra nella pagina pubblica */
.chat-msg--visitor { align-self: flex-end; background: var(--chat-primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg--staff { align-self: flex-start; background: #fff; color: var(--chat-ink); border: 1px solid var(--chat-line); border-bottom-left-radius: 4px; }
.chat-msg--system { align-self: center; max-width: 92%; background: #fff7e6; color: #7a4b00; border: 1px dashed #f3cf8b; font-size: .85rem; text-align: center; border-radius: 10px; }
/* Console: i messaggi dello staff sono "i miei" (a destra) */
.chat-panel--admin .chat-msg--visitor { align-self: flex-start; background: #fff; color: var(--chat-ink); border: 1px solid var(--chat-line); border-radius: 14px; border-bottom-left-radius: 4px; }
.chat-panel--admin .chat-msg--staff { align-self: flex-end; background: var(--chat-primary); color: #fff; border: 0; border-radius: 14px; border-bottom-right-radius: 4px; }
.chat-panel--admin { padding: 0; }

.chat-form { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: end; padding: .85rem 1.1rem; border-top: 1px solid var(--chat-line); background: #fff; }
.chat-form textarea { width: 100%; resize: vertical; min-height: 2.8rem; max-height: 12rem; font: inherit; padding: .6rem .75rem; border: 1px solid #cfd5e1; border-radius: 10px; }
.chat-form textarea:focus { outline: 2px solid var(--chat-primary); outline-offset: 1px; border-color: var(--chat-primary); }
.chat-form .btn { display: inline-flex; align-items: center; gap: .35rem; }
.chat-form__error { grid-column: 1 / -1; margin: 0; color: #c23a3a; font-size: .85rem; min-height: 0; }
.chat-form__error:empty { display: none; }

.chat-side { display: grid; gap: 1rem; }
.chat-side__card { background: #fff; border: 1px solid var(--chat-line); border-radius: 14px; padding: 1rem 1.1rem; }
.chat-side__card h2 { font-size: 1rem; margin: 0 0 .5rem; }
.chat-side__card--ok { border-color: #bfe3d0; background: #f3fbf7; }
.chat-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.chat-actions a { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border-radius: 8px; color: var(--chat-ink); text-decoration: none; font-weight: 600; font-size: .92rem; }
.chat-actions a:hover { background: var(--chat-bg); color: var(--chat-primary); }
.stack-form { display: grid; gap: .25rem; }

.chat-admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.nav-count { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--chat-accent); color: #1d1300; font-size: .72rem; font-weight: 800; margin-left: .35rem; }
.row--unread td { font-weight: 600; }

/* Pulsante flottante sulle pagine pubbliche */
.chat-fab { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: .45rem; padding: .75rem 1.05rem; border-radius: 999px; background: var(--chat-ink); color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 10px 28px rgba(20, 33, 61, .28); transition: transform .15s, background .15s; }
.chat-fab:hover, .chat-fab:focus-visible { background: var(--chat-primary-d); color: #fff; transform: translateY(-2px); }
.chat-fab .icon { width: 1.25rem; height: 1.25rem; color: var(--chat-accent); }

@media (max-width: 900px) {
    .chat-layout { grid-template-columns: 1fr; }
    .chat-msg { max-width: 92%; }
}
@media (max-width: 560px) {
    .chat-fab span { display: none; }
    .chat-fab { padding: .85rem; }
}
@media print { .chat-fab { display: none; } }
.chat-request summary { cursor: pointer; list-style: none; display: grid; gap: .1rem; }
.chat-request summary::-webkit-details-marker { display: none; }
.chat-request summary { position: relative; padding-right: 1.5rem; }
.chat-request summary::after { content: "+"; position: absolute; right: 0; top: 0; font-weight: 700; font-size: 1.1rem; color: var(--chat-primary); }
.chat-request[open] summary::after { content: "−"; }
.chat-request[open] summary { margin-bottom: .75rem; }
.chat-request .field input, .chat-request .field textarea { width: 100%; }