/* Font self-hosted: il CSP del server non ammette host esterni. */
@font-face{font-family:"Familjen Grotesk";font-weight:400;font-display:swap;src:url(../fonts/FamiljenGrotesk-400.ttf) format("truetype")}
@font-face{font-family:"Familjen Grotesk";font-weight:500;font-display:swap;src:url(../fonts/FamiljenGrotesk-500.ttf) format("truetype")}
@font-face{font-family:"Familjen Grotesk";font-weight:600;font-display:swap;src:url(../fonts/FamiljenGrotesk-600.ttf) format("truetype")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-display:swap;src:url(../fonts/HankenGrotesk-400.ttf) format("truetype")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-display:swap;src:url(../fonts/HankenGrotesk-500.ttf) format("truetype")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-display:swap;src:url(../fonts/HankenGrotesk-600.ttf) format("truetype")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(../fonts/JetBrainsMono-400.ttf) format("truetype")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(../fonts/JetBrainsMono-500.ttf) format("truetype")}
/* Koda 3: stile "giorno". Caricato per ultimo, ridefinisce solo l'aspetto, mai la struttura.
   Idea: la giornata è una linea e Koda sta sull'ora attuale. Superfici piatte, niente gradienti, niente emoji.
   Colore: ogni sezione ha la sua tinta pastello; l'arancio è il colore dominante: azioni, accenti e linea dell'"adesso". */
:root{
  --f-disp:"Familjen Grotesk",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  /* cinque tinte di sezione; nei temi scuri sono più chiare e la tinta sulla superficie è più forte */
  --h1:#FF5A4E;--h2:#F5A524;--h3:#12B886;--h4:#FF7A1A;--h5:#E8508B;--tint:14%;
}
:root[data-theme=sera],:root[data-theme=notte],:root[data-theme=mocha],:root[data-theme=nord],:root[data-theme=rosepine],:root[data-theme=dracula],:root[data-theme=contrasto],:root[data-theme=brace-sera],:root[data-theme=brace-notte]{--h1:#FF7A70;--h2:#F7BB52;--h3:#3DD6A3;--h4:#FF9A4D;--h5:#FF7AA8;--tint:16%}

body{font-family:var(--f-body)}
h1,h2,h3,.btn,.chip,.pill,.badge,nav.tabs button{font-family:var(--f-disp)}
h1{font-weight:600;letter-spacing:-.02em}
h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
.clock,.radar-cd,.timeline time,.meter-row span:last-child,.fring-in b{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---- superfici: piatte, una tinta per sezione ---- */
.card{border:0;border-radius:20px;box-shadow:none;background:var(--c-card,var(--surface))}
.view>.card:nth-of-type(5n+1),.view>.view>.card:nth-of-type(5n+1){--c-card:var(--surface)}
.view>.card:nth-of-type(5n+2),.view>.view>.card:nth-of-type(5n+2){--c-card:color-mix(in srgb,var(--h3) var(--tint),var(--surface))}
.view>.card:nth-of-type(5n+3),.view>.view>.card:nth-of-type(5n+3){--c-card:color-mix(in srgb,var(--h2) var(--tint),var(--surface))}
.view>.card:nth-of-type(5n+4),.view>.view>.card:nth-of-type(5n+4){--c-card:color-mix(in srgb,var(--h5) var(--tint),var(--surface))}
.view>.card:nth-of-type(5n),.view>.view>.card:nth-of-type(5n){--c-card:color-mix(in srgb,var(--h1) var(--tint),var(--surface))}
.card h2{color:var(--text)}
.card .chip,.card .pill,.card select,.card input[type=text]{background:color-mix(in srgb,var(--surface) 78%,transparent);border-color:color-mix(in srgb,var(--text) 14%,transparent)}
.hero2{background:color-mix(in srgb,var(--koda) 22%,var(--surface))}
.home-head{background:var(--surface)}

/* ---- la frase che dice cosa fare adesso ---- */
.hero-tip{display:grid;justify-items:start;gap:14px}
.hero-tip p{font:600 clamp(24px,6.4vw,32px)/1.1 var(--f-disp);letter-spacing:-.02em;text-wrap:balance}
.hero-tip .btn{min-height:46px;padding:0 22px}

/* ---- bottoni e chip ---- */
.btn{border-radius:999px;background:var(--accent);color:var(--ink);font-weight:600}
.btn.ghost{background:transparent;border:1.5px solid color-mix(in srgb,var(--text) 22%,transparent);color:var(--text)}
.btn.small{border-radius:999px}
.chip,.pill,.badge{border:0;background:color-mix(in srgb,var(--text) 9%,var(--surface));font-weight:600}
button.chip[aria-pressed=true],.pill.on,.pill[aria-pressed=true]{background:var(--accent);color:var(--ink)}
.badge{color:var(--text)}
.badge.good{background:color-mix(in srgb,var(--h3) 24%,var(--surface))}
.badge.warn{background:color-mix(in srgb,var(--h2) 28%,var(--surface))}
.badge.bad{background:color-mix(in srgb,var(--h1) 24%,var(--surface))}
.badge[style*="--c"]{background:color-mix(in srgb,var(--c) 22%,var(--surface))}

/* ---- navigazione ---- */
nav.tabs{background:color-mix(in srgb,var(--bg) 88%,transparent);border-color:color-mix(in srgb,var(--text) 10%,transparent)}
nav.tabs button{border-radius:16px}
nav.tabs button[aria-current=page]{background:color-mix(in srgb,var(--accent) 16%,var(--bg));color:var(--text)}
nav.tabs button[aria-current=page] svg{color:var(--accent)}
.fab{background:var(--accent);box-shadow:none}

/* ---- comandi rapidi: ognuno la sua tinta, senza emoji ---- */
.qcmd{border:0;border-radius:16px;min-height:76px;align-content:space-between;font-family:var(--f-disp);font-weight:600}
.qi{width:14px;height:14px;border-radius:50%;background:var(--q,var(--accent));font-size:0}
.qgrid .qcmd:nth-child(1){--q:var(--h2);background:color-mix(in srgb,var(--h2) 26%,var(--surface))}
.qgrid .qcmd:nth-child(2){--q:var(--h5);background:color-mix(in srgb,var(--h5) 22%,var(--surface))}
.qgrid .qcmd:nth-child(3){--q:var(--h1);background:color-mix(in srgb,var(--h1) 22%,var(--surface))}
.qgrid .qcmd:nth-child(4){--q:var(--h4);background:color-mix(in srgb,var(--h4) 22%,var(--surface))}
.qcmd:hover{border:0;filter:brightness(.97)}

/* ---- priorità: gruppo colorato ---- */
.prio-h::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--h3)}
.prio-h.p0::before{background:var(--h1)}.prio-h.p1::before{background:var(--h2)}
.check span{border-color:color-mix(in srgb,var(--text) 40%,transparent)}

/* ---- radar: conto alla rovescia grande, colore della categoria ---- */
.radar-main{border-left:0;border-radius:16px;background:color-mix(in srgb,var(--c) 20%,var(--surface));padding:14px 16px}
.radar-cd{font-size:34px;font-weight:500;color:var(--text)}
.radar-t{font:600 20px var(--f-disp)}

/* ---- budget e barre ---- */
.meter-bar{border:0;height:8px;background:color-mix(in srgb,var(--text) 12%,transparent)}
.meter:nth-of-type(5n+1) .meter-bar i{background:var(--h4)}.meter:nth-of-type(5n+2) .meter-bar i{background:var(--h5)}.meter:nth-of-type(5n+3) .meter-bar i{background:var(--h3)}
.meter.warn .meter-bar i{background:var(--h2)}.meter.bad .meter-bar i{background:var(--h1)}
.xp{border:0;background:color-mix(in srgb,var(--text) 12%,transparent)}
.xp i{background:var(--koda)}

/* ---- la giornata come linea: ora a sinistra, filo verticale, punto del colore della categoria ---- */
.dayline{position:relative;gap:0}
.dayline::before{content:"";position:absolute;left:68px;top:6px;bottom:6px;width:2px;background:color-mix(in srgb,var(--text) 14%,transparent);border-radius:1px}
.dayline li{position:relative;grid-template-columns:56px 1fr;gap:0 26px;padding:9px 0;align-items:start}
.dayline li::before{content:"";position:absolute;left:63px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--c,var(--accent));box-shadow:0 0 0 4px var(--c-card,var(--surface))}
.dayline time{font-size:13px;font-weight:500;color:var(--muted);text-align:right;padding-top:2px}
.dayline li b{font:600 17px/1.25 var(--f-disp)}
.dayline li.past{opacity:.55}.dayline li.past b{text-decoration:line-through;text-decoration-thickness:1px}
/* adesso: riga arancio con Koda seduto sopra */
.dayline li.now{display:block;min-height:64px;padding:0}
.dayline li.now::before{left:60px;right:0;top:auto;bottom:6px;width:auto;height:2px;border-radius:0;background:var(--koda);box-shadow:none}
.dayline li.now time{position:absolute;left:0;bottom:-2px;width:56px;color:var(--koda2);font-weight:600}
.dayline li.now>span{position:absolute;left:124px;bottom:14px;font:500 12px var(--f-mono);color:var(--muted)}
.now-pet{position:absolute;left:62px;bottom:7px;width:52px;height:52px}
.now-pet svg{width:100%;height:100%;display:block}
:root[data-theme=giorno] .dayline li.now time{color:#A53F00}
@media (prefers-reduced-motion:no-preference){.now-pet{animation:kbob 2.6s ease-in-out infinite}}
@keyframes kbob{50%{transform:translateY(-3px)}}

/* ---- cibo ---- */
.fring .bg{stroke:color-mix(in srgb,var(--text) 12%,transparent)}
.food-grid>.card:nth-of-type(odd),.food-side>.card:nth-of-type(odd){--c-card:var(--surface)}
.food-grid>.card:nth-of-type(even),.food-side>.card:nth-of-type(even){--c-card:color-mix(in srgb,var(--h2) var(--tint),var(--surface))}
.food-side>.card:nth-of-type(3n){--c-card:color-mix(in srgb,var(--h3) var(--tint),var(--surface))}
.fdetail,.fday{--c-card:color-mix(in srgb,var(--h3) var(--tint),var(--surface))}
.fday-h h2{font:600 22px var(--f-disp)}
.fring-in b{font-size:34px;font-weight:500}
.fring circle{stroke-width:10}
.fmeal{border-top:0;padding:8px 0}
.fcell,.fgrid .fcell{border:0;background:color-mix(in srgb,var(--text) 6%,var(--surface));border-radius:10px}
.fcell.today,.fgrid .fcell.today{box-shadow:inset 0 0 0 2px var(--koda)}
.fcell[aria-pressed=true]{background:var(--text);color:var(--bg);box-shadow:none}
.fcell[aria-pressed=true] .fk{color:var(--bg)}
.fbar{height:6px;background:color-mix(in srgb,var(--text) 14%,transparent)}
.st-ok .fbar i{background:var(--good)}.st-low .fbar i{background:var(--h2)}.st-high .fbar i{background:var(--h1)}
input,select,textarea{border-radius:12px}
.card input:not([type=checkbox]),.card select{background:color-mix(in srgb,var(--surface) 80%,transparent);border:1.5px solid color-mix(in srgb,var(--text) 14%,transparent)}

/* ---- icone al posto delle emoji ---- */
.qi{width:auto;height:auto;border-radius:0;background:none;color:var(--q,var(--accent))}
.sic,.nic,.fic{color:var(--accent)}
.sic svg,.nic svg,.fic svg{display:block}

/* Modulo impegno (stile Apple/Google Calendar): titolo grande, gruppi a righe, niente griglie strette. */
.ev-form{gap:14px}
.ev-form .ev-title{font-size:20px;font-weight:600;border:0;border-bottom:2px solid var(--line);border-radius:0;background:transparent;padding:6px 2px}
.ev-form .ev-title:focus{border-bottom-color:var(--accent);outline:none}
.ev-group{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface2);padding:4px 14px}
.ev-group > .label{padding-top:10px}.ev-group .cat-pick{padding:8px 0}.ev-group .ev-note{padding-bottom:10px;margin:0}
.ev-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;border-bottom:1px solid var(--line)}
.ev-row:last-child{border-bottom:0}
.ev-row label,.ev-row > span:first-child{font-weight:500}
.ev-row input{width:auto;min-width:9.5em;text-align:right;border:0;background:transparent;font:inherit;color:var(--text)}
.ev-span{font-variant-numeric:tabular-nums}
/* Parla: cronologia per giorno */
.chat-h .hist-btn{margin-left:auto}
.hist-days{display:grid;gap:6px;list-style:none;padding:0;margin:0}
.hist-days button{width:100%;display:flex;justify-content:space-between;gap:12px;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface2);color:var(--text);font:inherit;cursor:pointer}
.hist-days button:hover,.hist-days button:focus-visible{border-color:var(--accent)}
.hist-log{display:grid;gap:8px;max-height:60vh;overflow:auto}
/* Tu e Impostazioni */
.me-links{display:flex;gap:8px;flex-wrap:wrap}
.app-card{display:flex;align-items:center;gap:14px}.app-card .grow{flex:1}
/* Home: lock screen. Koda è lo sfondo, ora/widget/notifiche stanno sopra su una velatura. */
.lock{position:relative;overflow:hidden;border-radius:calc(var(--r) * 1.6);min-height:440px;background:var(--surface2);isolation:isolate}
.lock-bg{position:absolute;inset:0;z-index:-1}
.lock-bg .stage,.lock-bg .stage-frame{width:100%;height:100%;max-width:none}
.lock-bg .stage-cv{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;border:0;border-radius:0}
.lock::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.08) 38%,rgba(0,0,0,.5));pointer-events:none}
.lock-fg{display:grid;gap:14px;padding:22px 18px;color:#fff;max-width:560px;margin-inline:auto}
.lock-clock{display:grid;justify-items:center;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.lock-date{font-size:16px;font-weight:500;text-transform:capitalize}
.lock-time{font-size:clamp(64px,18vw,96px);line-height:1;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lock-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lock-w{display:grid;gap:2px;justify-items:start;text-align:left;padding:10px 12px;border:0;border-radius:18px;background:rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;font:inherit;cursor:pointer;min-width:0}
.lock-w b{font-size:18px;white-space:nowrap}.lock-w small{opacity:.85;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lock-w:hover,.lock-w:focus-visible{background:rgba(255,255,255,.28)}
.lock-feed{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lock-n{padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.82);color:#111;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;display:grid;gap:4px}
.lock-n.lock-tip{cursor:default;background:rgba(255,255,255,.92)}
.lock-n p{margin:0;font-size:14px;color:#333}.lock-n .actions{margin-top:4px}
.lock-nh{display:flex;justify-content:space-between;gap:8px;font-size:14px}.lock-nh time{opacity:.6;font-size:12px}
.lock-empty{text-align:center;opacity:.85;font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
/* Briefing: disegno della giornata */
.daystrip{width:100%;height:auto;display:block;margin:6px 0}
.ds-track{fill:var(--surface2);stroke:var(--line)}.ds-tick{stroke:var(--line)}.ds-lbl{fill:var(--muted);font-size:12px}
.ds-ev{opacity:.9}.ds-now{stroke:var(--accent);stroke-width:4;stroke-linecap:round}
/* JARVIS: barra scorrevole */
.qbar{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.qbar .qcmd{flex:0 0 auto;scroll-snap-align:start;min-width:104px}
.home-controls{display:grid;gap:8px}
/* Modalità coppia: palco rosato */
.stage.couple .stage-frame{box-shadow:0 0 0 3px #ff8fb1 inset}
/* Computer: lock screen e briefing affiancati, poi le schede a tutta larghezza, i controlli del pet in fondo. */
@media (min-width:1000px){
  .view:has(> .home-grid){grid-template-areas:"lock brief" "grid grid" "ctl ctl"}
  .view:has(> .home-grid) > .lock{grid-area:lock}
  .view:has(> .home-grid) > .briefing{grid-area:brief;align-self:stretch}
  .view:has(> .home-grid) > .home-controls{grid-area:ctl}
}
/* «Solo l'icona»: resta Koda della lock screen, senza ora e schede */
body.pet-only .briefing,body.pet-only .home-controls,body.pet-only .lock-fg,body.pet-only .lock::after{display:none!important}
body.pet-only .lock{background:transparent;min-height:320px}
/* Lock screen v2: Koda protagonista. Ora piccola in alto, spazio libero per il pet, notifiche impilate in basso. */
.lock{display:grid;grid-template-rows:auto 1fr auto;min-height:620px;padding:20px 16px 18px;color:#fff}
.lock::after{background:linear-gradient(180deg,rgba(0,0,0,.40),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 55%,rgba(0,0,0,.50))}
.lock-time{font-size:clamp(46px,11vw,62px)}
.lock-space{pointer-events:none}
.lock-bottom{display:grid;gap:8px;width:100%;max-width:520px;margin-inline:auto}
.lock-feed{list-style:none;margin:0;padding:0;display:grid;gap:8px;position:relative}
.lock-n{position:relative;animation:lock-up .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 90ms);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.lock-app{display:inline-flex;align-items:center;gap:6px;font-weight:600}
@keyframes lock-up{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
/* pila chiusa: la prima intera, le due successive come bordi che spuntano sotto */
.lock-feed.stacked{gap:0}
.lock-feed.stacked .lock-n:nth-child(n+2){height:12px;padding:0;overflow:hidden;margin:-4px 14px 0;border-radius:0 0 16px 16px;box-shadow:none;background:rgba(255,255,255,.62)}
.lock-feed.stacked .lock-n:nth-child(3){margin:-2px 28px 0;background:rgba(255,255,255,.42)}
.lock-feed.stacked .lock-n:nth-child(n+2) > *{visibility:hidden}
.lock-feed.stacked .lock-n:nth-child(n+4){display:none}
.lock-feed.stacked .lock-n:first-child{z-index:3}
.lock-more{justify-self:center;border:0;border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.22);color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lock-more:hover,.lock-more:focus-visible{background:rgba(255,255,255,.34)}
@media (prefers-reduced-motion:reduce){.lock-n{animation:none}}
/* Mood di Koda sopra le notifiche: vetro scuro, icona col colore dello stato */
.lock-mood{display:flex;align-items:center;gap:10px;justify-self:center;padding:8px 16px 8px 8px;border-radius:999px;background:rgba(0,0,0,.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;max-width:100%}
.lock-mood > span:last-child{display:grid;line-height:1.25;min-width:0}
.lock-mood b{font-size:15px}.lock-mood small{font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lock-mood-i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.16);color:#a7f3d0;flex:none}
.lock-mood[data-state="dorme"] .lock-mood-i{color:#c4b5fd}
.lock-mood[data-state="concentrato"] .lock-mood-i,.lock-mood[data-state="pronto"] .lock-mood-i{color:#93c5fd}
.lock-mood[data-state="allerta"] .lock-mood-i,.lock-mood[data-state="carico"] .lock-mood-i{color:#fdba74}
body.pet-only .lock-mood{display:none}
/* widget StandBy dentro il briefing: su scheda chiara, non più su vetro */
.briefing .lock-widgets{margin:4px 0 6px}
.briefing .lock-w{background:var(--surface2);color:var(--text);border:1px solid var(--line);backdrop-filter:none;-webkit-backdrop-filter:none}
.briefing .lock-w:hover,.briefing .lock-w:focus-visible{border-color:var(--accent);background:var(--surface2)}
.briefing .lock-w small{opacity:1;color:var(--muted)}
@media (max-width:999px){.lock{min-height:540px}}
@media (min-width:1000px){
  .view:has(> .home-grid){grid-template-columns:minmax(440px,540px) minmax(0,1fr)} /* lock più larga: Koda intero, meno ritaglio */
  .lock{min-height:600px}
}
.briefing{align-content:start}
/* Cambio pagina: dissolvenza con lieve salita del contenuto; barra delle schede e + fermi */
#view{view-transition-name:page}
nav.tabs{view-transition-name:tabs}
.fab{view-transition-name:fab}
::view-transition-old(page){animation:vt-out .16s ease-in both}
::view-transition-new(page){animation:vt-in .28s cubic-bezier(.2,.8,.2,1) .06s both}
::view-transition-group(tabs),::view-transition-group(fab){animation:none}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
/* nota «solo lettura» nel Cibo */
.ro-note{margin:-4px 0 4px;font-size:14px}
/* Briefing: testo lungo chiuso a 3 righe, si apre al tocco */
.brief-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;margin:6px 0}
.brief-text.open{display:block}
.brief-text:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* Widget: su due righe invece di troncare a metà parola */
.lock-w small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
@media (max-width:480px){.lock-widgets{gap:6px}.lock-w{padding:8px 10px}.lock-w b{font-size:16px}}
/* Koda fuori dall'app: una riga compatta di comandi, non tre blocchi a tutta larghezza */
.home-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.home-controls h2{flex:1 0 100%}
.home-controls .float-btn{width:auto;flex:0 0 auto;min-height:40px;padding:0 16px}
.home-controls .hh-pills{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.home-controls select{width:auto;min-width:150px}
/* Tu: i riquadri riempiono la riga, niente tessera sola a capo */
section[aria-label="I tuoi numeri"] .kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* JARVIS: bordo destro sfumato = «c'è altro, scorri» */
.qbar{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:40px}
/* Parla: intestazione in alto, messaggi che riempiono e stanno in basso (come una chat), composer mai più largo dello schermo */
.view.chat{grid-template-rows:auto 1fr auto}
.view.chat > *{min-width:0}
.view.chat .log{align-content:end}
.composer .chips.scroll{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.composer .chips.scroll::-webkit-scrollbar{display:none}
/* Personalizza Koda: griglie che si adattano alla larghezza (su telefono niente specie/accessori tagliati a destra) */
.view > details.sec,.view > section{min-width:0}
.species{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))!important}
.sp{min-width:0}
.sp svg,.sp canvas{max-width:100%;height:auto}
.accs{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.composer form input{border:0!important;background:transparent!important;box-shadow:none!important;padding:0 4px}