/* Rabbit OS 3 — struttura dell'app */
@layer shell{

.app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100dvh}

/* ---------- sidebar: un registro d'inchiostro --------------------------------
   Righe di quaderno appena percettibili che sfumano verso il basso: il richiamo
   al registro di protocollo. */
.side{
  position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;
  color:var(--side-text);padding:18px 12px 12px;overflow:hidden;z-index:50;
  background:
    repeating-linear-gradient(to bottom,transparent 0 31px,var(--side-lines) 31px 32px),
    linear-gradient(180deg,var(--side-bg),var(--side-bg-2));
  background-attachment:local,scroll;
  border-right:1px solid rgb(0 0 0 / .2);
}
.side::after{ /* le righe svaniscono: niente effetto "griglia" */
  content:"";position:absolute;inset:auto 0 0 0;height:45%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--side-bg-2));
}
.side>*{position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 18px;color:#fff;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-mark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;overflow:hidden;box-shadow:0 0 0 1px rgb(255 255 255 / .14),0 4px 12px rgb(0 0 0 / .3)}
.brand-mark img{width:36px;height:36px;display:block}
.brand b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.15}
.brand small{display:block;font-size:var(--fs-xs);color:var(--side-muted);line-height:1.3}
.side-search{display:flex;align-items:center;gap:9px;height:34px;padding:0 10px;margin:0 2px 12px;border-radius:var(--r-ctl);border:1px solid var(--side-rule);background:rgb(255 255 255 / .035);color:var(--side-muted);font-size:var(--fs-sm);width:calc(100% - 4px);transition:border-color var(--t-fast),color var(--t-fast),background-color var(--t-fast)}
.side-search:hover{color:var(--side-text);border-color:color-mix(in oklch,var(--side-mark) 40%,var(--side-rule));background:rgb(255 255 255 / .06)}
.side-search kbd{margin-left:auto;background:transparent;border-color:var(--side-rule);color:var(--side-muted)}
.nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:1px;margin:0 -4px;padding:0 4px 8px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav-section{font-size:var(--fs-xs);font-weight:600;color:var(--side-muted);padding:16px 10px 6px;letter-spacing:.01em}
.nav a{display:flex;align-items:center;gap:11px;height:35px;padding:0 10px;border-radius:var(--r-ctl);color:var(--side-text);font-size:var(--fs-md);font-weight:500;text-decoration:none;position:relative;transition:background-color var(--t-fast),color var(--t-fast)}
.nav a:hover{background:var(--side-hover);color:#fff}
.nav a[aria-current="page"]{
  background:var(--side-active);color:#fff;font-weight:600;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),0 4px 12px -4px rgb(0 0 0 / .35);
}
.nav a svg{color:var(--side-muted);transition:color var(--t-fast)}
.nav a:hover svg{color:color-mix(in oklch,var(--side-mark) 70%,white)}
.nav a[aria-current="page"] svg{color:#fff}
.nav a .badge{margin-left:auto;background:color-mix(in oklch,var(--brand) 55%,white);color:#06231b}
.nav a[aria-current="page"] .badge{background:#fff;color:var(--brand)}
.nav a .badge.red{background:var(--stamp)}
.side-foot{border-top:1px solid var(--side-rule);margin-top:6px;padding-top:10px;display:flex;align-items:center;gap:10px}
.me-btn{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:0;padding:6px;border-radius:var(--r-ctl);color:var(--side-text);text-align:left}
.me-btn:hover{background:var(--side-hover)}
.me-btn b{display:block;color:#fff;font-size:var(--fs-sm);font-weight:600;line-height:1.25}
.me-btn small{display:block;color:var(--side-muted);font-size:var(--fs-xs)}
.side .av[data-presence]::after{border-color:var(--side-bg-2)}

/* ---------- area principale ------------------------------------------------- */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:40;height:var(--top-h);display:flex;align-items:center;gap:var(--s3);padding:0 var(--s8);
  background:color-mix(in oklch,var(--bg) 84%,transparent);backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid transparent;transition:border-color var(--t-med),box-shadow var(--t-med);
}
.topbar.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 18px -14px rgb(var(--tint-shadow) / .35)}
/* Dove il browser lo supporta, l'ombra segue lo scorrimento senza JavaScript */
@supports (animation-timeline:scroll()){
  .topbar{animation:topbar-lift linear both;animation-timeline:scroll(root);animation-range:0 48px}
  @keyframes topbar-lift{to{border-bottom-color:var(--line);box-shadow:0 6px 18px -14px rgb(var(--tint-shadow) / .35)}}
}
.topbar .crumbs{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--fs-sm);color:var(--muted)}
.topbar .crumbs a{color:var(--muted)}
.topbar .crumbs a:hover{color:var(--text)}
.topbar .crumbs b{color:var(--text);font-weight:600;font-size:var(--fs-md)}
.menu-toggle{display:none}
.view{flex:1;padding:var(--s2) var(--s8) 96px;min-width:0;outline:none}
.page-head{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin:var(--s2) 0 var(--s5)}
.page-head h1{font-size:var(--fs-3xl);letter-spacing:var(--track-tight)}
.page-head .lead{color:var(--muted);margin-top:4px;font-size:var(--fs-md)}
.page-head .lead b{color:var(--text)}
.page-head .actions{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap}
.toolbar{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.toolbar .searchbox{width:260px}

/* Pattern lista + dettaglio: il banco di lavoro di ogni modulo */
.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr);gap:var(--s4);align-items:start}
.split>.panel:last-child{position:sticky;top:calc(var(--top-h) + 8px);max-height:calc(100dvh - var(--top-h) - 24px);overflow:auto;box-shadow:var(--e2)}

/* ---------- cambio pagina: la nuova sezione entra con un leggero scorrimento -- */
.view.enter>*{animation:page-in var(--t-slow) var(--ease-out) backwards}
.view.enter>*:nth-child(2){animation-delay:30ms}
.view.enter>*:nth-child(3){animation-delay:60ms}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}}

/* ---------- dock AIris + chat ----------------------------------------------- */
.dock{position:fixed;right:22px;bottom:22px;display:flex;align-items:center;gap:12px;z-index:200}
.dock button{position:relative;border:0;display:grid;place-items:center;transition:transform var(--t-med) var(--spring),box-shadow var(--t-med)}
.dock button:hover{transform:translateY(-3px)}
.dock button:active{transform:translateY(0) scale(.96)}
.dock .chat{width:50px;height:50px;border-radius:50%;background:var(--surface-raised);color:var(--accent);border:1px solid var(--line);box-shadow:var(--shadow-pop)}
.dock .airis{
  width:56px;height:56px;border-radius:17px;color:#fff;
  background:conic-gradient(from 210deg at 50% 50%,#1b8a8f,var(--brand),#5a3fb4,#1b8a8f);
  box-shadow:0 12px 26px -8px color-mix(in oklch,var(--brand) 70%,transparent),inset 0 1px 0 rgb(255 255 255 / .25);
}
.dock .airis::before{ /* bagliore lento, solo al passaggio */
  content:"";position:absolute;inset:-3px;border-radius:20px;background:inherit;filter:blur(10px);opacity:0;z-index:-1;transition:opacity var(--t-med)
}
.dock .airis:hover::before{opacity:.55}
.dock .airis svg{width:24px;height:24px}
.dock .badge{position:absolute;top:-4px;right:-4px;border:2px solid var(--bg)}

/* ---------- pannello AIris -------------------------------------------------- */
.airis-panel{position:fixed;right:22px;bottom:92px;width:min(420px,calc(100vw - 24px));height:min(620px,calc(100dvh - 120px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sheet);box-shadow:var(--shadow-sheet);display:flex;flex-direction:column;z-index:210;overflow:hidden;animation:pop-in var(--t-slow) var(--spring);transform-origin:bottom right}
@keyframes pop-in{from{opacity:0;transform:translateY(12px) scale(.96)}}
.airis-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line-soft);background:radial-gradient(100% 140% at 0% 0%,color-mix(in oklch,var(--brand) 8%,transparent),transparent 60%)}
.airis-orb{width:32px;height:32px;border-radius:10px;background:conic-gradient(from 210deg,#1b8a8f,var(--brand),#5a3fb4,#1b8a8f);display:grid;place-items:center;color:#fff;box-shadow:inset 0 1px 0 rgb(255 255 255 / .25)}
.airis-log{flex:1;overflow:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:88%;padding:9px 12px;border-radius:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;animation:msg-in var(--t-med) var(--ease-out)}
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line-soft);border-bottom-left-radius:4px}
.msg.typing{color:var(--muted);font-style:italic}
.msg.typing::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:dots 1.2s steps(4) infinite;overflow:hidden;vertical-align:bottom}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.airis-suggest{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.airis-suggest button{border:1px solid var(--line);background:var(--surface);border-radius:15px;padding:5px 11px;font-size:var(--fs-sm);color:var(--text-2);transition:border-color var(--t-fast),color var(--t-fast),background-color var(--t-fast)}
.airis-suggest button:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.airis-panel form{padding:10px 12px;border-top:1px solid var(--line-soft)}

/* ---------- ricerca globale (Ctrl K) ---------------------------------------- */
.palette{position:fixed;inset:0;z-index:600;background:var(--scrim);backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;animation:fade var(--t-med)}
.palette-box{width:min(620px,calc(100vw - 24px));background:var(--surface);border-radius:var(--r-sheet);box-shadow:var(--shadow-sheet);overflow:hidden;border:1px solid var(--line);animation:pop-in var(--t-slow) var(--spring);transform-origin:top center}
.palette-input{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line-soft)}
.palette-input svg{color:var(--accent)}
.palette-input input{flex:1;border:0;outline:0;background:none;height:56px;font-size:var(--fs-lg)}
.palette-results{max-height:52vh;overflow:auto;padding:6px}
.palette-results .grp{font-size:var(--fs-xs);font-weight:600;color:var(--muted);padding:10px 10px 4px}
.palette-results button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;border-radius:8px;text-align:left}
.palette-results button[aria-selected="true"]{background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 22%,transparent)}
.palette-results button small{color:var(--muted);margin-left:auto;font-size:var(--fs-sm)}

/* ---------- notifiche ------------------------------------------------------- */
.notif-panel{position:fixed;top:calc(var(--top-h) - 6px);right:24px;width:min(400px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-pop);z-index:400;animation:menuin var(--t-med) var(--ease-out);transform-origin:top right}
.notif{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line-soft);text-decoration:none;color:inherit}
.notif:hover{background:var(--surface-2);text-decoration:none}
.notif.unread{background:color-mix(in oklch,var(--accent) 5%,var(--surface))}
.notif.unread::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none}

/* ---------- accesso: il momento in cui si presenta Rabbit ------------------- */
.auth{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,1fr)}
.auth-art{
  color:#e9eef7;padding:48px 56px;display:flex;flex-direction:column;position:relative;overflow:hidden;isolation:isolate;
  background:
    repeating-linear-gradient(to bottom,transparent 0 35px,rgb(255 255 255 / .03) 35px 36px),
    radial-gradient(80% 60% at 85% 100%,color-mix(in oklch,var(--brand) 38%,transparent),transparent 70%),
    linear-gradient(160deg,var(--side-bg),var(--side-bg-2));
}
.auth-art::before{ /* margine rosso del registro */
  content:"";position:absolute;top:0;bottom:0;left:40px;width:1px;background:color-mix(in oklch,var(--stamp) 55%,transparent);opacity:.55;z-index:-1
}
.auth-art .brand{padding:0}
.auth-art h1{font-size:clamp(32px,3.4vw + 8px,52px);line-height:1.04;letter-spacing:-.035em;font-weight:600;margin-top:auto;max-width:13ch}
.auth-art p{color:color-mix(in oklch,var(--brand) 18%,#c9d6d0);font-size:var(--fs-lg);margin-top:16px;max-width:42ch;line-height:1.55}
.auth-stamps{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;align-items:center}
.auth-stamps .stamp{--st:#a8dcc6;height:30px;font-size:var(--fs-md);box-shadow:inset 0 0 0 1.5px var(--side-bg),inset 0 0 0 2.5px color-mix(in oklch,currentColor 30%,transparent);background:transparent}
.auth-stamps .stamp:nth-child(1){transform:rotate(-2.5deg)}
.auth-stamps .stamp:nth-child(2){--st:#f08a80;transform:rotate(1.8deg) translateY(-3px)}
.auth-stamps .stamp:nth-child(3){--st:#79cdb2;transform:rotate(-1deg)}
.auth-stamps .stamp:nth-child(4){--st:#e9d9a6;transform:rotate(2.2deg) translateY(2px)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--surface)}
.auth-form form{width:min(380px,100%);display:flex;flex-direction:column;gap:var(--s4)}
.auth-form h2{font-size:var(--fs-2xl);letter-spacing:-.015em}
.boot{min-height:100dvh;display:grid;place-items:center;color:var(--muted)}
.boot .stamp{--st:var(--accent);animation:stamp-press 1.4s var(--ease) infinite}
@keyframes stamp-press{0%,100%{opacity:.35;transform:scale(1.04)}45%{opacity:1;transform:scale(1)}}

/* ---------- responsive ------------------------------------------------------ */
@media (max-width:1180px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split>.panel:last-child{position:static;max-height:none}
}
@media (max-width:920px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(290px,86vw);transform:translateX(-100%);transition:transform var(--t-slow) var(--ease-out)}
  .app.nav-open .side{transform:none;box-shadow:var(--shadow-sheet)}
  .app.nav-open::after{content:"";position:fixed;inset:0;background:var(--scrim);z-index:45;animation:fade var(--t-med)}
  .menu-toggle{display:inline-flex}
  .topbar{padding:0 var(--s4)}
  .view{padding:var(--s2) var(--s4) 110px}
  .toolbar .searchbox{width:100%}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-art{padding:28px 24px 32px 56px;min-height:auto}
  .auth-art h1{margin-top:28px}
  .auth-stamps{display:none}
  .dock{right:14px;bottom:14px}
  .airis-panel{right:12px;bottom:80px}
  .props{grid-template-columns:110px minmax(0,1fr)}
}

/* ---------- stampa: una pratica o un report escono come un documento -------- */
@media print{
  @page{margin:16mm 14mm}
  :root{--bg:#fff;--surface:#fff;--surface-2:#fff;--line:#bbb;--line-soft:#ddd;color-scheme:light}
  body{background:#fff;font-size:11pt}
  .side,.topbar,.dock,.airis-panel,.toolbar,.page-head .actions,.case-head .actions,.btn,.drawer-foot,.composer,.palette,.notif-panel,.toasts{display:none !important}
  .app{display:block}
  .view{padding:0}
  .panel{box-shadow:none;break-inside:avoid;border-color:#ccc}
  .split,.case-grid,.home-grid{display:block}
  .split>.panel:last-child{position:static;max-height:none;overflow:visible;margin-top:12px}
  a{color:inherit}
  .stamp{box-shadow:none}
  table.t th{position:static;backdrop-filter:none}
}
}
@layer shell{
  @media (max-width:920px){ .app.nav-open ~ .dock{opacity:0;pointer-events:none} }
}
@layer shell{
  .boot-card{color:var(--text);width:min(520px,calc(100vw - 32px));padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--e2)}
  .boot-card p{line-height:1.55}
}

@layer shell{
  /* Barra laterale chiara: testi scuri, voce attiva piena nel colore dello studio */
  :root[data-sidebar="light"] .side{border-right:1px solid var(--line)}
  :root[data-sidebar="light"] .brand{color:var(--text)}
  :root[data-sidebar="light"] .nav a:hover{color:var(--text)}
  :root[data-sidebar="light"] .nav a:hover svg{color:var(--accent)}
  :root[data-sidebar="light"] .nav a[aria-current="page"]{color:#fff}
  :root[data-sidebar="light"] .me-btn b{color:var(--text)}
  :root[data-sidebar="light"] .side-search{background:var(--surface-2)}
  :root[data-sidebar="light"] .side-search:hover{color:var(--text)}
  :root[data-sidebar="light"] .nav a .badge{background:color-mix(in oklch,var(--brand) 14%,var(--surface));color:var(--accent)}
  :root[data-sidebar="light"] .nav a[aria-current="page"] .badge{background:#fff;color:var(--brand)}
  .brand-mark svg{width:36px;height:36px;display:block}
  .brand-mark.has-logo{background:#fff}
  .brand-mark .studio-logo{width:36px;height:36px;object-fit:contain;display:block}
}