*{box-sizing:border-box}
html,body{margin:0;background:#141a26;color:#eef1f6;font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow-x:hidden;max-width:100%}
body{display:flex;flex-direction:column;height:100vh;height:100dvh}
#ai-notice{flex:none;z-index:10;background:#ffd34d;color:#1b1b1b;padding:6px 10px;font-size:13px;line-height:1.3;text-align:center}
#ai-notice a{color:#1b1b1b}
main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:12px;width:100%}
#stage{position:relative;background:radial-gradient(circle at 50% 35%,#34415c,#1a2131 70%);border-radius:16px;overflow:hidden;min-height:0;min-width:0}
#avatar{width:100%;height:100%;display:block}
#status{position:absolute;left:10px;right:10px;bottom:8px;font-size:12px;opacity:.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#voice-ind{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:#000a;border:1px solid #ffffff33;border-radius:999px;padding:3px 10px;font-size:12px;white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis}
#voice-ind[hidden]{display:none}
#chat{display:flex;flex-direction:column;min-height:0;min-width:0}
#log{flex:1;min-height:60px;overflow:auto;background:#1b2232;border-radius:12px;padding:10px;overscroll-behavior:contain}
.msg{margin:6px 0;padding:8px 10px;border-radius:10px;max-width:95%;overflow-wrap:anywhere}.me{background:#2f6fde;margin-left:auto}.bot{background:#2a3347}
.msg.wait{opacity:.85;font-style:italic}
.hits{font-size:12px;opacity:.9;margin-top:6px}
.hits .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.hits button.chip{font-size:12px;padding:4px 8px;max-width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#3c4a66}
.hits button.chip.on{background:#2f6fde}
/* Brano aperto: pannello nel flusso, sopra la casella di domanda, mai sovrapposto */
#passage{flex:none;margin-top:8px;background:#222b3e;border:1px solid #3c4a66;border-radius:12px;display:flex;flex-direction:column;max-height:38%;min-height:0}
#passage[hidden]{display:none}
#passage .ph{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 8px 2px 10px;font-size:13px}
#passage .ph b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#passage .ph button{flex:none;padding:4px 10px;font-size:13px}
#passage .pmeta{font-size:11px;opacity:.75;padding:0 10px}
#passage .pbody{overflow:auto;padding:6px 10px 10px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;overscroll-behavior:contain}
form{flex:none;display:flex;gap:6px;margin-top:8px;position:relative;z-index:5;min-width:0}
input[type=text]{flex:1;min-width:0;padding:10px;border-radius:10px;border:0;font-size:16px}
button,select{padding:8px 12px;border-radius:10px;border:0;background:#3c4a66;color:#fff;font-size:14px;cursor:pointer;max-width:100%}
button#send{background:#2f6fde;flex:none}button#ptt{flex:none;padding:8px 10px}button#ptt.rec{background:#d33}
#settings{flex:none;margin-top:8px;font-size:13px;min-width:0}
#settings summary{cursor:pointer;opacity:.85;padding:4px 2px}
#controls{display:flex;flex-direction:column;gap:8px;margin-top:6px;min-width:0;max-height:40vh;overflow:auto}
#controls label{display:flex;gap:6px;align-items:center;min-width:0}
#controls label select{flex:1;min-width:0;width:100%}
#controls .btns{display:flex;flex-wrap:wrap;gap:6px}
#info{position:fixed;inset:0;z-index:20;overflow:auto;background:#141a26f2;padding:12px 20px}
#info[hidden]{display:none}
#info a{color:#9cc3ff}#info-close{position:sticky;top:0;float:right}
@media (max-width:800px){
  main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(150px,34%) minmax(0,1fr);gap:8px;padding:8px}
  #controls{max-height:30vh}
}
@media (max-height:560px) and (max-width:800px){main{grid-template-rows:120px minmax(0,1fr)}}