/* opencode mobile — foglio di stile unico, senza framework.
   Token di colore, scala tipografica e scala di spaziatura: tre scelte ripetute
   con coerenza valgono più di qualsiasi effetto grafico. */

:root {
    --bg:        #ffffff;
    --superficie:#f6f7f9;
    --sup-alta:  #eceff3;
    --testo:     #16191d;
    --tenue:     #5b636e;
    --bordo:     #e3e6ea;
    --accento:   #2563eb;
    --ok:        #15803d;
    --attenzione:#b45309;
    --errore:    #b91c1c;

    --s1: .25rem; --s2: .5rem; --s3: 1rem; --s4: 1.5rem; --s5: 2.5rem;
    --raggio: 10px;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="chiaro"]) {
        --bg:        #0d1014;
        --superficie:#161a1f;
        --sup-alta:  #1f252c;
        --testo:     #e8eaed;
        --tenue:     #9aa3ad;
        --bordo:     #262b32;
        --accento:   #60a5fa;
        --ok:        #4ade80;
        --attenzione:#fbbf24;
        --errore:    #f87171;
    }
}

* { box-sizing: border-box; }

/* La scala tipografica e' tutta in rem, quindi fa capo a html: alzare questo
   valore ingrandisce l'intera interfaccia in modo coerente, invece di ritoccare
   decine di regole. A 20px i glifi misurano circa 46px a 3x, cioe' quanto il
   testo dell'app di Claude Code su iPhone; 22px risultavano eccessivi. */
html {
    font-size: 20px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--testo);
    font: 1rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    /* Niente scorrimento orizzontale: il difetto più fastidioso su telefono */
    overflow-x: hidden;
}

h1 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.02em; margin: 0; }
h2 { font-size: 1.05rem; line-height: 1.3;  letter-spacing: -.01em; margin: 0; }

a { color: var(--accento); }

/* --- impalcatura ------------------------------------------------------- */

.schermata {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.barra {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    padding-top: calc(var(--s2) + env(safe-area-inset-top));
    background: var(--bg);
    border-bottom: 1px solid var(--bordo);
    position: sticky;
    top: 0;
    z-index: 10;
}

.barra .titolo { flex: 1; min-width: 0; }
/* Il troncamento va messo sui titoli, non sul contenitore: h1 e h2 sono blocchi
   e sborderebbero comunque, finendo sotto i pulsanti della barra. */
.barra .titolo h1,
.barra .titolo h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra .sotto   { font-size: .78rem; color: var(--tenue); }

.corpo {
    flex: 1;
    padding: var(--s3);
    padding-bottom: var(--s5);
    max-width: 52rem;
    width: 100%;
    margin: 0 auto;
}

/* --- controlli ---------------------------------------------------------- */

button, .bottone {
    font: inherit;
    font-size: .95rem;
    padding: .6rem 1rem;
    min-height: 44px;              /* area toccabile adeguata */
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--superficie);
    color: var(--testo);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
button:hover:not(:disabled) { background: var(--sup-alta); }
button:disabled { opacity: .5; cursor: default; }
button.primario { background: var(--accento); border-color: var(--accento); color: #fff; }
button.primario:hover:not(:disabled) { filter: brightness(1.08); }
button.discreto { background: transparent; border-color: transparent; color: var(--tenue); padding: .4rem .6rem; }
button.pericolo { color: var(--errore); }

input, textarea {
    font: inherit;
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--bg);
    color: var(--testo);
}
input:focus, textarea:focus, button:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 1px;
}

/* --- elenco sessioni ----------------------------------------------------- */

.sessione {
    position: relative;
    width: 100%;
    padding: var(--s3);
    margin-bottom: var(--s2);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--superficie);
}
/* Il pulsante di eliminazione non puo' stare dentro il collegamento (annidare un
   button in un anchor non e' HTML valido): sta accanto, posizionato sopra. */
.sessione > .apri {
    display: block;
    text-align: left;
    text-decoration: none;
    color: inherit;
    padding-right: 4rem;
}
.sessione:hover { background: var(--sup-alta); }
.sessione > .azioni {
    position: absolute;
    top: calc(var(--s3) - .35rem);
    right: calc(var(--s3) - .5rem);
    display: flex;
    gap: 0;
}
.sessione > .azioni > button {
    min-height: 0;
    padding: .25rem .45rem;
    line-height: 1;
}
.sessione > .rinomina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
}
.sessione > .rinomina input { flex: 1 1 100%; }
.sessione > .conferma {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2);
    margin-top: var(--s2);
    padding-top: var(--s2);
    border-top: 1px solid var(--bordo);
    font-size: .85rem;
    color: var(--tenue);
}
.sessione .riga1 { display: flex; align-items: center; gap: var(--s2); }
.sessione .nome  { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessione .meta  { font-size: .8rem; color: var(--tenue); margin-top: var(--s1); }

.pallino { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tenue); }
.pallino.attivo { background: var(--ok); animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* --- chat ---------------------------------------------------------------- */

.messaggi { display: flex; flex-direction: column; gap: var(--s3); }

.msg { max-width: 100%; }
.msg.utente {
    align-self: flex-end;
    max-width: 85%;
    background: var(--accento);
    color: #fff;
    padding: .65rem .9rem;
    border-radius: var(--raggio);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.msg.assistente { align-self: stretch; }
/* Il testo dell'assistente e' markdown reso in HTML: "pre-wrap" raddoppierebbe
   le interlinee gia' prodotte dai paragrafi, quindi qui non va. */
.msg.assistente .testo { overflow-wrap: anywhere; }
.testo > :first-child { margin-top: 0; }
.testo > :last-child  { margin-bottom: 0; }
.testo p { margin: 0 0 var(--s3); }
.testo h1, .testo h2, .testo h3, .testo h4 {
    margin: var(--s4) 0 var(--s2);
    line-height: 1.25;
    font-weight: 650;
}
.testo h1 { font-size: 1.25rem; }
.testo h2 { font-size: 1.12rem; }
.testo h3 { font-size: 1rem; }
.testo h4 { font-size: .95rem; color: var(--tenue); }
.testo ul, .testo ol { margin: 0 0 var(--s3); padding-left: 1.25rem; }
.testo li { margin: var(--s1) 0; }
.testo li > p { margin: 0; }
.testo a { color: var(--accento); overflow-wrap: anywhere; }
.testo strong { font-weight: 650; }
.testo hr { border: 0; border-top: 1px solid var(--bordo); margin: var(--s4) 0; }
.testo blockquote {
    margin: 0 0 var(--s3);
    padding-left: var(--s3);
    border-left: 3px solid var(--bordo);
    color: var(--tenue);
}
.testo code {
    font-family: var(--mono);
    font-size: .85em;
    background: var(--sup-alta);
    padding: .1em .32em;
    border-radius: 5px;
}
/* I blocchi di codice scorrono per conto loro: senza questo una riga lunga
   allargherebbe l'intera pagina e comparirebbe lo scorrimento orizzontale. */
.testo pre {
    margin: 0 0 var(--s3);
    padding: var(--s3);
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.testo pre code {
    background: none;
    padding: 0;
    font-size: .82rem;
    line-height: 1.5;
    white-space: pre;
}
/* Il contenitore scorre, la tabella resta una tabella vera: con
   "display: block" sull'elemento table le colonne non si allineano più. */
.testo .tabella {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 var(--s3);
    max-width: 100%;
    /* Bordo accennato: fa capire che il contenuto continua oltre il margine. */
    border-radius: var(--raggio);
}
.testo table {
    border-collapse: collapse;
    margin: 0;
    font-size: .88rem;
    width: max-content;
    max-width: none;
}
.testo th, .testo td { white-space: nowrap; }
.testo th, .testo td {
    border: 1px solid var(--bordo);
    padding: .35rem .6rem;
    text-align: left;
}
.testo th { background: var(--superficie); font-weight: 600; }
.testo img { max-width: 100%; height: auto; border-radius: var(--raggio); }

.ragionamento {
    margin-bottom: var(--s2);
    font-size: .88rem;
    color: var(--tenue);
}
.ragionamento summary { cursor: pointer; }
.ragionamento .contenuto {
    margin-top: var(--s2);
    padding-left: var(--s3);
    border-left: 2px solid var(--bordo);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.strumento {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-family: var(--mono);
    font-size: .82rem;
    padding: .45rem .7rem;
    margin: var(--s2) 0;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    color: var(--tenue);
    overflow-wrap: anywhere;
}
.strumento.corso   { border-color: var(--attenzione); }
.strumento.errore  { border-color: var(--errore); color: var(--errore); }

.modello { font-size: .75rem; color: var(--tenue); margin-top: var(--s1); }

/* --- barra di invio ------------------------------------------------------ */

.invio {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--bordo);
    padding: var(--s2) var(--s3);
    padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom));
    display: flex;
    gap: var(--s2);
    align-items: center;
}
.invio textarea { resize: none; max-height: 9rem; overflow-y: auto; }
/* Pulsante d'invio quadrato: con il testo "Invia" rubava alla casella la
   larghezza necessaria al segnaposto, che andava a capo e veniva tagliato. */
.invio button.primario {
    flex: 0 0 auto;
    width: 48px;
    min-width: 48px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    line-height: 1;
}

/* --- permessi ------------------------------------------------------------ */

.permesso {
    border: 1px solid var(--attenzione);
    border-radius: var(--raggio);
    padding: var(--s3);
    margin-bottom: var(--s3);
    background: var(--superficie);
}
.permesso .azione { font-family: var(--mono); font-size: .85rem; overflow-wrap: anywhere; }
.permesso .scelte { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }

/* --- stati --------------------------------------------------------------- */

.vuoto  { color: var(--tenue); text-align: center; padding: var(--s5) var(--s3); }
.errore-riquadro {
    border: 1px solid var(--errore);
    color: var(--errore);
    border-radius: var(--raggio);
    padding: var(--s3);
    margin-bottom: var(--s3);
}

.avvio { display: grid; place-items: center; min-height: 100dvh; color: #9aa3ad; gap: var(--s3); }
.avvio-punto { width: 10px; height: 10px; border-radius: 50%; background: #60a5fa; animation: pulsa 1.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- errore di Blazor ----------------------------------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
    background: var(--attenzione); color: #000;
    padding: var(--s3); text-align: center;
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* Riassunto di compattazione: un separatore discreto, non un messaggio.
   Senza, la cronologia sembrerebbe interrompersi senza motivo. */
details.compattazione {
    margin: var(--s3) 0;
    border-top: 1px solid var(--bordo);
    border-bottom: 1px solid var(--bordo);
    padding: var(--s2) 0;
}
details.compattazione > summary {
    cursor: pointer;
    color: var(--tenue);
    font-size: .8rem;
    text-align: center;
    list-style: none;
}
details.compattazione > summary::-webkit-details-marker { display: none; }
details.compattazione > .contenuto {
    margin-top: var(--s2);
    color: var(--tenue);
    font-size: .85rem;
    white-space: pre-wrap;
}

/* --- composizione del messaggio ------------------------------------------ */

.nascosto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.invio .riga-invio { display: flex; gap: var(--s2); align-items: center; }
.invio button.piu {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1;
    display: grid;
    place-items: center;
    color: var(--testo);
}

.pastiglie { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s2); }
.pastiglia {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    background: var(--sup-alta);
    border: 1px solid var(--bordo);
    border-radius: 999px;
    padding: .15rem .25rem .15rem .6rem;
    font-size: .78rem;
    max-width: 100%;
}
.pastiglia.comando { border-color: var(--accento); color: var(--accento); }
.pastiglia.shell   { border-color: var(--attenzione); color: var(--attenzione); font-family: var(--mono); }
.pastiglia > button {
    min-height: 0;
    padding: 0 .3rem;
    border: 0;
    background: none;
    color: inherit;
    font-size: .95rem;
    line-height: 1;
}

/* Foglio che sale dal basso: su telefono un menu a tendina sarebbe inservibile. */
.velo {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 20;
}
.foglio {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 21;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg);
    border-top: 1px solid var(--bordo);
    border-radius: var(--raggio) var(--raggio) 0 0;
    padding: var(--s2) var(--s2) calc(var(--s3) + env(safe-area-inset-bottom));
}
.foglio-titolo {
    padding: var(--s2) var(--s2) var(--s1);
    color: var(--tenue);
    font-size: .8rem;
}
.foglio input { margin: var(--s1) 0 var(--s2); }
.foglio .voce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: var(--raggio);
    background: none;
    padding: .7rem var(--s2);
    cursor: pointer;
    color: inherit;
}
.foglio .voce:hover { background: var(--superficie); }
.foglio .voce > span { display: flex; flex-direction: column; min-width: 0; }
.foglio .voce small { color: var(--tenue); font-size: .78rem; }
.foglio .voce .percorso {
    font-family: var(--mono);
    font-size: .8rem;
    overflow-wrap: anywhere;
}
.foglio .voce kbd {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--tenue);
    background: var(--sup-alta);
    border-radius: 5px;
    padding: .1rem .35rem;
    flex: none;
}

/* Il titolo della chat si tocca per rinominare: va segnalato con discrezione,
   senza farlo sembrare un collegamento. */
.barra .titolo h2.modificabile { cursor: pointer; }
.barra .titolo h2.modificabile:hover { text-decoration: underline dotted var(--bordo); }
.barra .titolo input { font: inherit; font-size: 1.05rem; padding: .3rem .5rem; }

/* Pulsante tondo nella barra: a questa dimensione del testo una scritta
   rubava metà larghezza al titolo della pagina. */
.barra button.tondo {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    line-height: 1;
}

/* I pulsanti della barra vanno centrati sulla PRIMA riga del titolo, non sul
   blocco intero: col sottotitolo sotto, "align-items: center" li faceva
   scendere a metà fra le due righe. Lo scarto negativo riallinea il pulsante
   da 44px al centro della riga di testo, che è più bassa. */
.barra { align-items: flex-start; }
.barra > button { align-self: flex-start; }
.barra:has(h1) > button { margin-top: calc((1.3rem * 1.25 - 44px) / 2); }
.barra:has(h2) > button { margin-top: calc((1.05rem * 1.3 - 44px) / 2); }

/* Anche i pulsanti discreti della barra vanno a 44px quadri: col solo padding
   risultavano alti 53px e il loro centro cadeva 4,5px sotto quello del titolo. */
.barra > button.discreto {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    line-height: 1;
}

/* Indicatore di elaborazione: senza, l'attesa di un modello locale (decine di
   secondi) sembra un blocco dell'applicazione. */
.elaborazione {
    display: flex;
    align-items: center;
    gap: var(--s2);
    color: var(--tenue);
    font-size: .88rem;
    padding: var(--s1) 0;
}
.elaborazione .punti { display: inline-flex; gap: 4px; }
.elaborazione .punti i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accento);
    animation: saltella 1.1s ease-in-out infinite;
}
.elaborazione .punti i:nth-child(2) { animation-delay: .15s; }
.elaborazione .punti i:nth-child(3) { animation-delay: .3s; }
@keyframes saltella {
    0%, 80%, 100% { opacity: .25; transform: translateY(0); }
    40%           { opacity: 1;   transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
    .elaborazione .punti i { animation: none; opacity: .6; }
}

/* Testo ancora in arrivo: a capo rispettati, perché non è ancora passato dal
   convertitore markdown. */
.testo.vivo { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Il sottotitolo della barra non deve andare a capo: con "Ferma" accanto
   raddoppiava l'altezza dell'intestazione. */
.barra .sotto {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.precedenti { display: flex; justify-content: center; margin-bottom: var(--s3); }

/* Il campo file copre interamente la voce di menu ed è trasparente: il tocco
   arriva all'input, che è l'unico modo affidabile di aprire il selettore su iOS. */
.foglio .voce-file { position: relative; }
.foglio .voce-file input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;      /* su iOS un input file alto quanto il testo ignora height */
}

/* I blocchi non sono più annidati in un contenitore per messaggio: le regole
   che erano agganciate a ".msg.assistente" vanno applicate direttamente. */
.messaggi > .testo { overflow-wrap: anywhere; }
.messaggi { gap: var(--s2); }
.messaggi > .msg.utente { margin-top: var(--s3); }
.messaggi > details.ragionamento,
.messaggi > .strumento { margin-bottom: 0; }
.messaggi > .modello { margin-top: 0; margin-bottom: var(--s2); }