/* Diego — tema azzurro Napoli/Argentina */
:root {
  --azz: #0a7bbd; --azz-dark: #075a8a; --azz-light: #d6ecf7;
  --bg: #f4f8fb; --fg: #16232e; --card: #fff; --border: #c9dcea;
  --ok: #1d9e55; --warn: #d78c00; --ko: #cc3344; --gold: #f2c94c;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--fg);
}
section { display: flex; flex-direction: column; height: 100dvh; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: .3em 0; }
h3 { font-size: .95rem; color: var(--azz-dark); margin-top: 1.2em; }
.muted { color: #7a8b98; font-size: .85rem; }
.err { color: var(--ko); }
.spacer { flex: 1; }
.pad { padding: 12px; overflow-y: auto; flex: 1; }

/* barre */
.bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--azz); color: #fff; flex-shrink: 0;
  padding-top: calc(8px + env(safe-area-inset-top));
}
.bar h2 { font-size: 1.05rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head { min-width: 0; }

/* login */
#view-login { align-items: center; justify-content: center; background: linear-gradient(160deg, var(--azz) 0%, var(--azz-dark) 100%); }
.login-box { background: #fff; border-radius: 16px; padding: 28px 24px; width: min(340px, 90vw); text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
.login-box .tag { color: #7a8b98; margin-top: -6px; font-size: .85rem; font-style: italic; }
.logo { font-size: 48px; position: relative; display: inline-block; }
.logo span { position: absolute; bottom: -2px; right: -14px; background: var(--gold); color: #333; font-size: 14px; font-weight: 700; border-radius: 50%; width: 24px; height: 24px; line-height: 24px; }
.logo.sm { font-size: 22px; }
form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
input, textarea {
  font: inherit; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; color: var(--fg); width: 100%;
}
input:focus, textarea:focus { outline: 2px solid var(--azz); border-color: transparent; }

/* bottoni */
button { font: inherit; border: 0; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
button.primary { background: var(--azz); color: #fff; font-weight: 600; }
button.primary:active { background: var(--azz-dark); }
button.ghost { background: transparent; color: inherit; border: 1px solid var(--border); padding: 6px 10px; }
.bar button.ghost { color: #fff; border-color: rgba(255,255,255,.4); }
button.wide { width: 100%; margin: 6px 0; }
button.mic { background: var(--azz-light); border-radius: 50%; width: 42px; height: 42px; padding: 0; font-size: 19px; flex-shrink: 0; }
button.mic.big { width: 48px; height: 48px; }
button.mic.rec { background: var(--ko); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }

/* card */
.cards { display: flex; flex-direction: column; gap: 8px; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.card:active { background: var(--azz-light); }
.card .ttl { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .sub { font-size: .78rem; color: #7a8b98; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .grow { flex: 1; min-width: 0; }
.card .ico { font-size: 20px; flex-shrink: 0; }
.searchrow { display: flex; gap: 8px; align-items: center; }

/* badge */
.badges { display: flex; gap: 5px; margin-top: 2px; flex-wrap: wrap; }
.badge { font-size: .68rem; padding: 1px 8px; border-radius: 20px; background: rgba(255,255,255,.25); color: #fff; }
.badge.mode-bypassPermissions { background: var(--ko); font-weight: 700; }
.badge.mode-acceptEdits { background: var(--warn); }
.badge.mode-plan { background: #7b5cc9; }
.badge.warn { background: var(--gold); color: #333; }

/* messaggi chat */
#messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 92%; border-radius: 14px; padding: 8px 13px; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--azz); color: #fff; white-space: pre-wrap; }
.msg.assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--border); }
.msg.assistant .voceline { color: var(--azz-dark); font-style: italic; font-size: .85rem; border-bottom: 1px dashed var(--border); padding-bottom: 4px; margin-bottom: 6px; }
.msg.assistant pre { background: #0e1a24; color: #d8e6f0; padding: 10px; border-radius: 8px; overflow-x: auto; font-size: .8rem; }
.msg.assistant code { background: var(--azz-light); border-radius: 4px; padding: 0 4px; font-size: .85em; }
.msg.assistant pre code { background: none; padding: 0; }
.msg.assistant p { margin: .4em 0; }
.msg.sys { align-self: center; font-size: .75rem; color: #7a8b98; background: none; padding: 0 8px; text-align: center; }
.msg.tool { align-self: flex-start; font-size: .75rem; color: #55708a; font-family: ui-monospace, monospace; background: var(--azz-light); padding: 4px 10px; border-radius: 8px; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.err { align-self: center; color: var(--ko); font-size: .8rem; }
.typing { align-self: flex-start; color: #7a8b98; font-size: .8rem; }

/* card permessi */
#permcards { flex-shrink: 0; }
.permcard {
  margin: 6px 12px; background: #fff8e6; border: 2px solid var(--gold);
  border-radius: 12px; padding: 10px 12px;
}
.permcard .tool { font-weight: 700; }
.permcard .inp { font-family: ui-monospace, monospace; font-size: .72rem; color: #55708a; word-break: break-all; max-height: 60px; overflow-y: auto; margin: 4px 0; }
.permcard .row { display: flex; gap: 8px; margin-top: 6px; }
.permcard .row button { flex: 1; }
.permcard .allow { background: var(--ok); color: #fff; }
.permcard .deny { background: var(--ko); color: #fff; }

/* barra comandi + input */
#cmdbar {
  display: flex; gap: 6px; padding: 6px 10px; overflow-x: auto; flex-shrink: 0;
  background: var(--card); border-top: 1px solid var(--border);
  scrollbar-width: none;
}
#cmdbar::-webkit-scrollbar { display: none; }
button.cmd { background: var(--azz-light); color: var(--azz-dark); font-size: .78rem; padding: 6px 10px; white-space: nowrap; flex-shrink: 0; }
button.cmd.active { background: var(--azz); color: #fff; }
button.cmd.stop { background: #ffe1e5; color: var(--ko); }
#inputbar {
  display: flex; gap: 8px; padding: 8px 10px; align-items: flex-end; flex-shrink: 0;
  background: var(--card); border-top: 1px solid var(--border);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
#chat-input { resize: none; max-height: 120px; }
#btn-send { width: 48px; height: 48px; padding: 0; font-size: 20px; flex-shrink: 0; }

/* dialog */
dialog { border: 0; border-radius: 14px; padding: 18px; width: min(340px, 90vw); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog .row { flex-direction: row; display: flex; gap: 8px; }
dialog .row button { flex: 1; }
label { display: flex; gap: 8px; align-items: center; font-size: .9rem; }
label input[type="checkbox"] { width: auto; }