:root {
    --bg:#F4F6FA; --surface:#FFFFFF; --border:#E2E7F0;
    --ink:#1B2138; --text:#474D63; --muted:#98A0B3;
    --accent:#4F5DE0; --accent-600:#3C49C4;
    --bot:#F1F3F9; --btn-ghost:#EEF1F8; --code:#EDEFF6;
}
[data-theme="dark"] {
    --bg:#13151C; --surface:#1B1E27; --border:#2A2E3A;
    --ink:#E8EAF1; --text:#AAB1C2; --muted:#6E7689;
    --accent:#6675F2; --accent-600:#7E8BF6;
    --bot:#232733; --btn-ghost:#262B37; --code:#2A2F3D;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

.hidden {
	display: none !important;
}

body {
    font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    margin:0; color:var(--text); background:var(--bg);
    transition: background .2s, color .2s;
    container-type: inline-size;
}

.app {
    display:flex; flex-direction:column;
    height:100%;
    min-height:0;
    width:100%;
    max-width:960px; margin:0 auto;
    padding:20px 22px;
}

.hidden {
	display: none !important;
}

/* ---------- Header ---------- */
header {
    display:flex; align-items:center; gap:14px;
    padding-bottom:16px; margin-bottom:16px;
    border-bottom:1px solid var(--border);
    flex:0 0 auto;
    user-select: none;
}
header img { height:30px; width:auto; display:block; }
[data-theme="dark"] header img { filter:brightness(0) invert(1); }
header .titles { display:flex; flex-direction:column; line-height:1.2; }
header h1 { margin:0; font-size:17px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); }
header span { font-size:12.5px; font-weight:500; color:var(--muted); }
.theme-toggle {
    margin-left:auto; width:38px; height:38px;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border); background:var(--surface); color:var(--ink);
    border-radius:8px; cursor:pointer; transition:border-color .15s;
}
.theme-toggle:hover { border-color:var(--accent); }
.theme-toggle svg { width:18px; height:18px; }
.theme-toggle .moon { display:none; }
[data-theme="dark"] .theme-toggle .sun  { display:none; }
[data-theme="dark"] .theme-toggle .moon { display:block; }

/* ---------- Chat (riempie lo spazio) ---------- */
#chatbox {
    flex:1 1 auto; min-height:0;
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    overflow-y:auto; padding:6px;
    display:flex; flex-direction:column; gap:14px;
    transition: background .2s, border-color .2s;
}
#chatbox::-webkit-scrollbar { width:9px; }
#chatbox::-webkit-scrollbar-thumb { background:var(--border); border-radius:9px; border:3px solid var(--surface); }

.empty { margin:auto; text-align:center; color:var(--muted); font-size:14px; font-weight:500; max-width:340px; }
.empty strong { color:var(--ink); display:block; font-size:15.5px; font-weight:600; margin-bottom:5px; }

.row { display:flex; flex-direction:column; gap:6px; max-width:80%; }
.row.user { align-self:flex-end; align-items:flex-end; }
.row.bot  { align-self:flex-start; align-items:flex-start; }

.message {
    padding:11px 15px; border-radius:10px;
    width:fit-content; max-width:100%;
    word-wrap:break-word; overflow-wrap:anywhere;
    line-height:1.55; font-size:14.5px;
}
.user .message { background:var(--accent); color:#fff; white-space:pre-wrap; }
.bot  .message { background:var(--bot); color:var(--ink); border:1px solid var(--border); }

/* markdown nelle risposte del bot */
.bot .message > :first-child { margin-top:0; }
.bot .message > :last-child  { margin-bottom:0; }
.bot .message p { margin:.5em 0; }
.bot .message ul, .bot .message ol { margin:.5em 0; padding-left:1.3em; }
.bot .message li { margin:.2em 0; }
.bot .message strong { font-weight:600; color:var(--ink); }
.bot .message a { color:var(--accent); }
.bot .message h1,.bot .message h2,.bot .message h3 { margin:.6em 0 .3em; line-height:1.3; color:var(--ink); }
.bot .message h1 { font-size:1.25em; } .bot .message h2 { font-size:1.15em; } .bot .message h3 { font-size:1.05em; }
.bot .message code {
    background:var(--code); padding:.1em .4em; border-radius:5px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
}
.bot .message pre {
    background:var(--code); padding:12px 14px; border-radius:8px;
    overflow-x:auto; margin:.6em 0;
}
.bot .message pre code { background:none; padding:0; }
.bot .message blockquote {
    margin:.6em 0; padding:.2em .9em; border-left:3px solid var(--border); color:var(--muted);
}
.bot .message table { border-collapse:collapse; margin:.6em 0; font-size:.92em; }
.bot .message th, .bot .message td { border:1px solid var(--border); padding:5px 9px; text-align:left; }

/* thinking */
.bot .message.thinking { animation:breathe 1.9s ease-in-out infinite; }
@keyframes breathe { 0%,100%{ box-shadow:0 0 0 0 rgba(79,93,224,0);} 50%{ box-shadow:0 0 0 4px rgba(79,93,224,.10);} }
.typing { display:inline-flex; gap:5px; align-items:center; padding:3px 2px; }
.typing span { width:6px; height:6px; border-radius:50%; background:var(--muted); animation:wave 1.3s ease-in-out infinite; }
.typing span:nth-child(2){ animation-delay:.16s; } .typing span:nth-child(3){ animation-delay:.32s; }
@keyframes wave { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
.waiting-phrase { display:block; margin-top:6px; color:var(--muted); font-style:italic; font-size:13.5px; }

.speak-btn {
    display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
    border:1px solid var(--border); background:var(--btn-ghost); color:var(--muted);
    border-radius:7px; font:inherit; font-size:12px; font-weight:500; cursor:pointer;
    transition:color .15s, border-color .15s;
}
.speak-btn:hover, .speak-btn.playing { color:var(--accent); border-color:var(--accent); }
.speak-btn svg { width:13px; height:13px; }

/* ---------- Composer ---------- */
#input-container { display:flex; gap:10px; margin-top:14px; flex:0 0 auto; }
input {
    flex:1; padding:13px 15px; border:1px solid var(--border);
    background:var(--surface); color:var(--ink); border-radius:8px; outline:none;
    font:inherit; font-size:14.5px; transition:border-color .15s, box-shadow .15s, background .2s;
}
input::placeholder { color:var(--muted); }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,93,224,0.14); }

.icon-btn {
    width:48px; flex:0 0 48px; display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border); background:var(--surface); color:var(--ink);
    border-radius:8px; cursor:pointer; transition:border-color .15s, background .15s, color .15s;
}
.icon-btn:hover { border-color:var(--accent); color:var(--accent); }
.icon-btn svg { width:18px; height:18px; }
.mic-btn.listening {
    background:var(--accent); border-color:var(--accent); color:#fff;
    animation:micpulse 1.4s ease-in-out infinite;
}

#send {
    padding:0 26px; border:none; background:var(--accent); color:#fff;
    border-radius:8px; cursor:pointer; font:inherit; font-weight:600; font-size:14.5px;
    transition:background .15s; flex:0 0 auto;
}
#send:hover:not(:disabled){ background:var(--accent-600); }
#send:disabled { opacity:.5; cursor:not-allowed; }
/* Richiesta in corso: il bottone diventa "Stop" e permette di annullarla */
#send.stop { background:#c0392b; }
#send.stop:hover:not(:disabled) { background:#a93226; }

/* ---- Larghezza ridotta: iframe stretti / mobile ---- */
@container (max-width:520px) {
    .app      { padding:2px; }
    .row      { max-width:90%; }
    #chatbox  { padding:16px; }
    #send     { padding:0 16px; }
}
@container (max-width:400px) {
    .app          { padding:10px; }
    header        { gap:10px; padding-bottom:12px; margin-bottom:12px; }
    header img    { height:24px; }
    header h1     { font-size:15px; }
    header span   { font-size:11px; }
    #chatbox      { padding:13px; gap:11px; }
    .row          { max-width:94%; }
    .message      { font-size:14px; padding:10px 13px; }
    input         { padding:11px 13px; font-size:14px; }
    .icon-btn     { width:42px; flex-basis:42px; }
    #input-container { gap:7px; }
}
@container (max-width:320px) {
    .app        { padding:0px; }
    header span { display:none; }      /* sottotitolo via su iframe minuscoli */
    #chatbox    { padding:11px; }
    #send       { padding:0 12px; }
}

/* ---- Altezza ridotta: iframe bassi ---- */
@media (max-height:480px) {
    header           { padding-bottom:8px; margin-bottom:8px; }
    header img       { height:24px; }
    #chatbox         { padding:12px; }
    #input-container { margin-top:8px; }
    input, #send     { padding-top:10px; padding-bottom:10px; }
}

@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }

/* ---------- Animazione Onda Vocale ---------- */
.voice-wave-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 8px;
    height: 48px;
}

.wave-bar {
    width: 3px;
    height: 8px;
    background-color: var(--accent);
    border-radius: 3px;
    animation: sound-wave 1.2s ease-in-out infinite;
}

/* Sfalsa i tempi delle barre per creare l'effetto onda naturale */
.wave-bar:nth-child(1) { animation-delay: 0.1s; }
.wave-bar:nth-child(2) { animation-delay: 0.4s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.6s; }
.wave-bar:nth-child(5) { animation-delay: 0.3s; }

@keyframes sound-wave {
    0%, 100% { height: 8px; }
    50% { height: 28px; }
}

@keyframes micpulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79,93,224,.4); transform: scale(1); }
    50% { box-shadow: 0 0 0 8px rgba(79,93,224,0); transform: scale(0.95); }
}

/* ---------- Pannello di configurazione (drawer laterale) ---------- */
#cfgOverlay {
    position:fixed; inset:0; background:rgba(15,18,28,.45);
    opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; z-index:40;
}
#cfgOverlay.open { opacity:1; visibility:visible; }

#cfgPanel {
    position:fixed; top:0; right:0; height:100dvh; width:min(340px, 92vw); max-width:88vw;
    background:var(--surface); border-left:1px solid var(--border);
    box-shadow:-12px 0 32px rgba(15,18,28,.16);
    transform:translateX(100%); transition:transform .2s ease;
    z-index:41; display:flex; flex-direction:column;
    padding:22px; gap:20px; overflow-y:auto;
}
#cfgPanel.open { transform:translateX(0); }

#cfgPanel .cfg-head { display:flex; align-items:center; gap:10px; }
#cfgPanel .cfg-head h2 { margin:0; font-size:16px; font-weight:600; color:var(--ink); }
#cfgPanel .cfg-close {
    margin-left:auto; width:34px; height:34px; display:inline-flex;
    align-items:center; justify-content:center; cursor:pointer;
    border:1px solid var(--border); background:var(--surface); color:var(--ink);
    border-radius:8px; transition:border-color .15s;
}
#cfgPanel .cfg-close:hover { border-color:var(--accent); }
#cfgPanel .cfg-close svg { width:16px; height:16px; }

#cfgPanel .cfg-field { display:flex; flex-direction:column; gap:7px; }
#cfgPanel .cfg-field label { font-size:13px; font-weight:600; color:var(--ink); }
#cfgPanel .cfg-field .hint { font-size:12px; color:var(--muted); font-weight:400; }
#cfgPanel select {
    padding:11px 13px; border:1px solid var(--border); border-radius:8px;
    background:var(--surface); color:var(--ink); font:inherit; font-size:14px;
    outline:none; cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
#cfgPanel select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,93,224,.14); }

#cfgSave {
    margin-top:auto; padding:13px; border:none; background:var(--accent); color:#fff;
    border-radius:8px; cursor:pointer; font:inherit; font-weight:600; font-size:14.5px;
    transition:background .15s;
}
#cfgSave:hover { background:var(--accent-600); }

/* interruttore on/off per la conferma azioni */
#cfgPanel .cfg-switch-row { display:flex; align-items:center; gap:14px; }
#cfgPanel .cfg-switch-row label[for] { flex:1; }
.switch { position:relative; display:inline-block; width:46px; height:26px; flex:0 0 auto; cursor:pointer; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider {
    position:absolute; inset:0; background:var(--border); border-radius:26px;
    transition:background .2s;
}
.switch .slider::before {
    content:""; position:absolute; height:20px; width:20px; left:3px; top:3px;
    background:#fff; border-radius:50%; transition:transform .2s;
}
.switch input:checked + .slider { background:var(--accent); }
.switch input:checked + .slider::before { transform:translateX(20px); }
.switch input:focus-visible + .slider { box-shadow:0 0 0 3px rgba(79,93,224,.25); }