/* MOON — modalità telefono ("solo avatar"): il volto riempie lo schermo e non viene coperto; in alto a sinistra solo il marchio;
   comandi in una barra in basso (menu, chat, microfono, stop); sottotitoli in basso; "solo volto" nasconde tutto tranne il marchio.
   Si attiva con html.telefono (telefono/tablet, viewport ≤ 800 px o ?telefono=1; ?telefono=0 per la pagina normale). */
html.telefono, html.telefono body { height: 100%; overflow: hidden; overscroll-behavior: none; background: #0B0406; }
html.telefono body { font-family: 'Jost', 'Helvetica Neue', system-ui, sans-serif; }
html.telefono .app-shell { padding: 0; max-width: none; }
html.telefono main { display: block; }
html.telefono .intro, html.telefono .session-bar, html.telefono .site-footer, html.telefono .stage-top, html.telefono .studio-arch,
html.telefono .studio-floor, html.telefono .version-pill, html.telefono .connection-pill, html.telefono .chat-header,
html.telefono .avatar-overlay > div:first-child, html.telefono .view-controls, html.telefono #mic-hint, html.telefono .brand-secondary,
html.telefono .brand-divider, html.telefono #mic-monitor, html.telefono .header-actions, html.telefono #thinking, html.telefono #welcome .prompt-list { display: none !important; }
/* testata: solo il marchio */
html.telefono .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: auto; min-height: 0; border: 0; background: none;
  padding: max(12px, env(safe-area-inset-top)) 16px 8px; pointer-events: none; }
html.telefono .brand { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #F6E7E4;
  font-family: 'Sora', 'Helvetica Neue', system-ui, sans-serif; font-weight: 200; letter-spacing: .30em; font-size: 17px; line-height: 1; }
html.telefono .brand-mark { width: 30px; height: 30px; border-radius: 0; background: none; box-shadow: none; padding: 0; }
html.telefono .brand-mark svg { width: 30px; height: 30px; }
/* palco */
html.telefono .workspace { display: block; height: auto; min-height: 0; gap: 0; }
html.telefono .avatar-card { position: fixed; inset: 0; height: 100dvh; min-height: 0; border-radius: 0; border: 0; z-index: 1; background: #0B0406; }
html.telefono #avatar { position: absolute; inset: 0; }
html.telefono #avatar video.flusso-video { object-fit: cover !important; object-position: center 0% !important; }
html.telefono .avatar-loading { z-index: 2; }
/* stato ("In ascolto", "Ti sta parlando"): piccolo, in basso a sinistra sopra la barra */
html.telefono .avatar-overlay { position: fixed; left: 16px; right: auto; top: auto; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 6; pointer-events: none; }
html.telefono #activity-pill { pointer-events: auto; font-size: 11px; padding: 6px 10px; background: #0B0406aa; border-color: #3A1A1E; }
/* sottotitoli: due righe, in basso, non coprono il viso */
html.telefono #didascalia { position: fixed; left: 14px; right: 14px; bottom: calc(126px + env(safe-area-inset-bottom)); z-index: 8; margin: 0;
  padding: 8px 12px; border-radius: 12px; background: #0B0406b3; color: #F6E7E4; font-size: 14px; line-height: 1.4; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.telefono #didascalia:empty { display: none; }
html.telefono #didascalia.pensa { color: #9A7F82; font-style: italic; }
/* barra dei comandi */
html.telefono .composer-controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; display: grid;
  grid-template-columns: 46px 46px minmax(0, 1fr) 46px; gap: 8px; align-items: center;
  padding: 10px max(14px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: linear-gradient(#0B040600, #0B0406e6 45%); border: 0; box-shadow: none; backdrop-filter: none; }
html.telefono .composer-controls .mic-button { min-height: 54px; font-size: 15px; border-radius: 27px; justify-content: center; background: #E02020; border-color: #E02020; color: #fff; font-family: 'Sora', system-ui, sans-serif; font-weight: 600; letter-spacing: .02em; }
html.telefono .composer-controls .mic-button.session-live { background: #0B0406cc; border-color: #E02020; color: #F6E7E4; }
html.telefono .composer-controls .mic-button:disabled { opacity: .55; }
html.telefono .composer-controls .stop-button { min-width: 0; width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; font-size: 0; justify-content: center; }
html.telefono .composer-controls .stop-button svg { width: 18px; height: 18px; margin: 0; }
html.telefono .tasto-tondo { width: 46px; height: 46px; border-radius: 50%; border: 1px solid #3A1A1E; background: #0B0406cc; color: #F6E7E4;
  display: flex; align-items: center; justify-content: center; font-size: 18px; position: relative; padding: 0; }
html.telefono #chat-toggle[data-nuovi]:not([data-nuovi="0"])::after { content: attr(data-nuovi); position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  border-radius: 9px; background: #E02020; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* pannelli a scomparsa (chat e menu) */
html.telefono .chat-card, html.telefono #menu-telefono { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 25; border-radius: 22px 22px 0 0;
  transform: translateY(105%); transition: transform .28s ease; background: #16090c; border: 1px solid #3A1A1E; border-bottom: 0; box-shadow: 0 -10px 40px #00000080; }
html.telefono .chat-card { height: min(70dvh, 620px); display: flex; flex-direction: column; }
html.telefono.chat-aperta .chat-card, html.telefono.menu-aperto #menu-telefono { transform: none; }
html.telefono .chat-card::before, html.telefono #menu-telefono::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: #3A1A1E; margin: 10px auto 4px; flex: none; }
html.telefono .messages { flex: 1; padding: 12px 16px; }
html.telefono .composer-area { padding: 10px 14px calc(88px + env(safe-area-inset-bottom)); }
html.telefono #menu-telefono { z-index: 46; padding: 6px 18px calc(22px + env(safe-area-inset-bottom)); color: #F6E7E4; }
html.telefono #menu-telefono h3 { font-family: 'Sora', system-ui, sans-serif; font-weight: 200; letter-spacing: .3em; font-size: 13px; color: #9A7F82; margin: 14px 0 8px; }
html.telefono #menu-telefono .riga { display: flex; gap: 8px; flex-wrap: wrap; }
html.telefono #menu-telefono button, html.telefono #menu-telefono a { flex: 1; min-width: 70px; min-height: 46px; border-radius: 12px; border: 1px solid #3A1A1E; background: #0B0406; color: #F6E7E4;
  font: inherit; font-size: 15px; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
html.telefono #menu-telefono .selezionato { background: #E02020; border-color: #E02020; color: #fff; }
html.telefono #menu-telefono .esci { margin-top: 16px; color: #9A7F82; border-color: transparent; }
/* avvisi */
html.telefono #notice { position: fixed; left: 14px; right: 14px; top: calc(64px + env(safe-area-inset-top)); z-index: 45; margin: 0; }
/* avvio con un tocco */
html.telefono #avvio-telefono { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 24px calc(120px + env(safe-area-inset-bottom)); background: linear-gradient(#0B040600 40%, #0B0406d9); }
html.telefono #avvio-telefono button { min-height: 60px; padding: 0 34px; border-radius: 30px; border: 0; background: #E02020; color: #fff;
  font-family: 'Sora', system-ui, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: .04em; box-shadow: 0 10px 30px #E0202055; }
html.telefono #avvio-telefono p { color: #9A7F82; font-size: 13px; margin: 14px 0 0; text-align: center; max-width: 320px; line-height: 1.5; }
html.telefono #avvio-telefono[hidden] { display: none; }
/* "solo volto": resta solo il marchio; un tocco sul viso mostra la barra per qualche secondo */
html.telefono.solo-volto #didascalia, html.telefono.solo-volto .avatar-overlay { display: none !important; }
html.telefono.solo-volto .composer-controls { transform: translateY(110%); transition: transform .25s ease, opacity .25s; opacity: 0; }
html.telefono.solo-volto.comandi-visibili .composer-controls { transform: none; opacity: 1; }

/* prima dell'avvio: niente pulsanti di riserva del lettore sopra il tasto principale */
html.telefono.avvio-in-attesa .flusso-audio, html.telefono.avvio-in-attesa .flusso-avvio { display: none !important; }