/* ==== Responsive (audit P2-5 / UI_UX U-01): due breakpoint minimi ====
   File separato perché app.css è root-owned (vedi docs/audit/TECH_DEBT.md T-07).
   Caricato DOPO app.css da index.html. */

.menu-btn { display: none; }

/* Tablet: griglie dense → 2/1 colonne, wrap fluido. */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .cfg-grid { grid-template-columns: 1fr; }
  .wrap { max-width: 100%; }
}

/* Telefono: sidebar off-canvas (hamburger in topbar), griglie inline → 1 colonna.
   L'override !important serve per battere gli stili inline delle view (griglie
   costruite con style= nel JS): su schermi stretti si impilano. */
@media (max-width: 860px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60;
             transform: translateX(-100%); transition: transform .18s ease; }
  .sidebar.open { transform: translateX(0); box-shadow: 0 0 44px rgba(0,0,0,.28); }
  .menu-btn { display: inline-flex; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .db-grid { grid-template-columns: 1fr 100px !important; }
}

/* ============================ Pulsanti: hover coerente ============================
   Sotto il mouse un pulsante cambia colore ma la scritta resta SEMPRE leggibile.

   Il bug: le view usano `class="btn btn-dark"` (14 punti + i tab attivi). Le due
   regole di app.css non confliggono — `.btn:hover` tocca `background`, `.btn-dark:hover`
   tocca `filter` — quindi si SOMMANO: il fondo diventava chiaro (--bg #f5f6f8) mentre
   il testo restava bianco (--btn-dark color:#fff) → scritta invisibile.
   Qui `.btn.btn-dark` (2 classi) batte `.btn` per specificità e riporta il fondo scuro.
   app.css è root-owned: si corregge da qui. */
.btn.btn-dark:hover,
.btn.btn-dark:focus-visible { background: #232a36; filter: none; color: #fff; }

/* Stesso hover per i pulsanti scuri "puri": brightness(1.12) su #11151c era
   impercettibile (rgb 17,21,28 → 19,23,31). Un fondo esplicito rende il feedback
   visibile e identico ovunque. */
.btn-dark:hover,
.btn-dark:focus-visible { background: #232a36; filter: none; }

/* Pulsanti senza alcun feedback al hover (link-btn/seg-btn/incl-btn): allineati agli
   altri. Solo fondo/bordo — mai il colore del testo, così la scritta non sparisce. */
.link-btn:hover, .incl-btn:hover { background: var(--bg); }
.seg-btn:hover:not(.active) { background: rgba(20,24,33,.05); }

/* Il testo del pulsante non si seleziona per sbaglio al doppio clic. */
.btn, .btn-dark, .link-btn, .seg-btn, .incl-btn, .x-btn, .icon-btn, .btn-cancel { user-select: none; }

/* Azione distruttiva (es. "Elimina personaggio"): si deve riconoscere a colpo d'occhio
   da un'azione qualsiasi. Al hover il rosso si rinforza — testo sempre leggibile. */
.btn.danger { color: var(--red); border-color: #f3d2d2; }
.btn.danger:hover { background: #fdf2f2; border-color: var(--red); color: var(--red); }

/* ---- Pannello vocale (voice-first): overlay persistente in basso a destra --- */
.voice-panel { position: fixed; right: 20px; bottom: 20px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.vp-mic { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--accent); color: #fff; font-size: 22px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .12s ease, background .2s; }
.vp-mic:hover { transform: translateY(-1px); }
.vp-mic.on { background: var(--red); animation: vp-pulse 1.4s infinite; }
@keyframes vp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224,49,49,.4); }
  50% { box-shadow: 0 0 0 8px rgba(224,49,49,0); }
}
.vp-body { width: 320px; max-width: calc(100vw - 40px); background: var(--bg);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
  overflow: hidden; display: flex; flex-direction: column; }
.vp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 14px; font-weight: 600; border-bottom: 1px solid var(--border); }
.vp-hint { font-size: 11px; font-weight: 400; color: var(--text-3); }
.vp-log { padding: 10px 14px; max-height: 260px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.4; }
.vp-log:empty::before { content: 'Premi 🎙 e parla — es. «come siamo messi?»'; color: var(--text-3); font-size: 12px; }
.vp-line { padding: 6px 10px; border-radius: 10px; max-width: 90%; word-wrap: break-word; }
.vp-user { align-self: flex-end; background: var(--accent-weak, #eef2ff); color: var(--text); }
.vp-agent { align-self: flex-start; background: rgba(20,24,33,.05); color: var(--text); }
.vp-err { align-self: stretch; color: var(--red); font-size: 12px; }
.vp-status { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); }
/* Riduci/espandi: da ridotto resta solo il micro, non copre i bottoni sottostanti */
.vp-min { border: none; background: transparent; color: var(--text-3); font-size: 20px;
  line-height: 1; cursor: pointer; padding: 0 2px; }
.vp-min:hover { color: var(--text); }
.vp-expand { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg); color: var(--text-2); font-size: 15px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); display: none; align-items: center; justify-content: center; }
.vp-expand:hover { color: var(--text); transform: translateY(-1px); }
.voice-panel.vp-collapsed .vp-body { display: none; }
.voice-panel.vp-collapsed .vp-expand { display: flex; }