/* Studio Korn — UI mobile (stile glass, irrobustito per leggibilità + performance) */
:root{
  --blue:#2D7DD2; --blue2:#3F94E8;
  --ink:#13283D;          /* testo principale, più scuro del prototipo per contrasto */
  --muted:#4C657E;        /* testo secondario, alzato per superare WCAG AA su vetro */
  --faint:#7E94AA;
  --pink:#F47BA0; --green:#34C29E; --orange:#E0822E; --purple:#7B61FF;
  --card:rgba(255,255,255,.78);   /* contenuti più opachi = leggibili */
  --card-line:rgba(255,255,255,.7);
  --chrome:rgba(255,255,255,.62);  /* header/tab bar: vetro più marcato */
  --shadow:0 8px 22px rgba(45,125,210,.12);
  --r:20px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:Nunito,system-ui,-apple-system,sans-serif;
  background:#cdd9e8;color:var(--ink);
  display:flex;align-items:stretch;justify-content:center;min-height:100vh;min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
.device{
  position:relative;width:100%;max-width:430px;height:100vh;height:100dvh;
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(165deg,#E3F0FC 0%,#EAF1F8 45%,#F6EAF3 100%);
  box-shadow:0 0 80px rgba(28,67,110,.18);
}
/* blob statici (niente animazione: meno carico GPU) */
.blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(40px);opacity:.4}
.b1{top:-70px;left:-50px;width:230px;height:230px;background:radial-gradient(circle,#5FB0F2,transparent 70%)}
.b2{top:36%;right:-70px;width:210px;height:210px;background:radial-gradient(circle,#F49BC0,transparent 70%)}
.b3{bottom:-30px;left:18%;width:240px;height:240px;background:radial-gradient(circle,#76E0CC,transparent 70%)}

.screen{flex:1;min-height:0;overflow-y:auto;position:relative;z-index:1;animation:pop .25s ease}
@keyframes pop{from{transform:translateY(6px);opacity:.4}to{transform:translateY(0);opacity:1}}
.scr::-webkit-scrollbar{width:0;height:0}.scr{scrollbar-width:none}

/* ---- header sticky (vetro) ---- */
.hdr{position:sticky;top:0;z-index:5;padding:54px 20px 14px;
  background:var(--chrome);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.5)}
.hdr.blue{background:linear-gradient(180deg,rgba(45,125,210,.95),rgba(45,125,210,.7));border:0;padding-bottom:28px}
.hdr h1{font-size:28px;font-weight:800}
.hdr .row{display:flex;align-items:center;justify-content:space-between}
.hdr .small{font-size:14px;font-weight:600;color:#E2F0FB}
.hdr .big{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.5px;margin-top:2px}
.avatar-dk{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;font-weight:800;color:var(--blue);box-shadow:0 4px 14px rgba(16,52,90,.18)}

.body{padding:14px 16px 24px;display:flex;flex-direction:column;gap:16px}
.section-label{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
  margin:4px 4px 0;display:flex;align-items:center;justify-content:space-between}
.link{color:var(--blue);font-weight:700;cursor:pointer}

/* ---- card generica ---- */
.card{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--card-line);border-radius:var(--r);box-shadow:var(--shadow)}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.stat{padding:14px 12px}
.stat .n{font-size:28px;font-weight:800;line-height:1}
.stat .l{font-size:12px;font-weight:600;color:var(--muted);margin-top:4px}

/* ---- hero appuntamento ---- */
.hero{border-radius:24px;padding:18px;color:#fff;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 14px 30px rgba(45,125,210,.3)}
.hero::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.14)}
.hero .grid{display:flex;align-items:center;gap:14px;position:relative}
.hero .ini{width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:800;font-size:18px}
.hero .name{font-size:18px;font-weight:800}
.hero .sub{font-size:13px;font-weight:600;color:#E7F2FC;margin-top:2px}
.hero .time{font-size:22px;font-weight:800;text-align:right}
.hero .when{font-size:12px;font-weight:600;color:#E7F2FC;text-align:right}

/* ---- quick actions ---- */
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick .qa{padding:16px;display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:700;font-size:14px}
.qa .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}

/* ---- list rows ---- */
.rowlist{padding:6px 4px}
.row{display:flex;align-items:center;gap:12px;padding:12px 12px;cursor:pointer;border-radius:14px}
.row:active{background:rgba(45,125,210,.06)}
.ini{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;flex:none;box-shadow:0 3px 8px rgba(16,52,90,.15)}
.ini.lg{width:48px;height:48px;font-size:16px}
.time-col{font-size:14px;font-weight:800;width:46px}
.row .main{flex:1;min-width:0}
.row .t{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{font-size:12.5px;font-weight:600;color:var(--muted)}
.pill{font-size:11px;font-weight:800;padding:4px 9px;border-radius:20px;flex:none}
.chev{flex:none}

/* ---- agenda ---- */
.weekstrip{display:flex;gap:8px;margin-top:14px;overflow-x:auto}
.day{flex:none;width:48px;text-align:center;padding:9px 0;border-radius:16px;cursor:pointer;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.6)}
.day.active{background:var(--blue);border-color:rgba(45,125,210,.5)}
.day .dow{font-size:11px;font-weight:700;color:var(--faint)}
.day.active .dow{color:#D6EBFB}
.day .num{font-size:18px;font-weight:800;margin-top:2px}
.day.active .num{color:#fff}
.agenda-item{display:flex;gap:12px;margin-bottom:8px}
.agenda-item .tc{width:52px;text-align:right;padding-top:14px;font-size:14px;font-weight:800}
.agenda-card{flex:1;padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;border-left:4px solid}
.agsep{font-size:12px;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px 4px}
.dnav{width:38px;height:38px;flex:none;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(45,125,210,.12);display:grid;place-items:center;font-size:22px;font-weight:800;color:var(--blue);cursor:pointer;user-select:none}

/* ---- patient detail ---- */
.pt-head{padding:54px 20px 26px;color:#fff;position:relative}
.back{display:flex;align-items:center;gap:6px;color:#fff;font-weight:700;font-size:14px;cursor:pointer;opacity:.94}
.pt-id{display:flex;align-items:center;gap:16px;margin-top:16px}
.pt-id .ava{width:72px;height:72px;border-radius:24px;background:rgba(255,255,255,.25);display:grid;place-items:center;font-weight:800;font-size:26px}
.pt-id .nm{font-size:24px;font-weight:800}
.pt-id .meta{font-size:14px;font-weight:600;color:rgba(255,255,255,.88);margin-top:2px}
.metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.metric{padding:13px;text-align:center}
.metric .v{font-size:18px;font-weight:800;color:var(--blue)}
.metric .k{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px}
.kv{padding:16px}
.kv .line{display:flex;justify-content:space-between;padding:7px 0;font-size:13.5px;font-weight:600}
.kv .line+.line{border-top:1px solid rgba(120,150,180,.18)}
.kv .k{color:var(--muted)}
.kv .v{font-weight:700}
.actions2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{border-radius:18px;padding:14px;text-align:center;font-size:14px;font-weight:700;cursor:pointer}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(45,125,210,.32)}
.btn.ghost{background:var(--card);border:1px solid var(--card-line);color:var(--blue)}
.parent-card{padding:16px}
.parent-card .lbl{font-size:13px;font-weight:800;margin-bottom:12px}
.parent-card .grid{display:flex;align-items:center;gap:12px}
.parent-card .ic{width:42px;height:42px;border-radius:50%;background:rgba(45,125,210,.14);display:grid;place-items:center}

/* ---- chat ---- */
.chat-wrap{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;z-index:1;animation:pop .25s ease}
.chat-hdr{flex:none;display:flex;align-items:center;gap:12px;padding:50px 16px 14px;
  background:var(--chrome);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.5);z-index:5}
.chat-msgs{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.bubble{max-width:75%;padding:11px 15px;border-radius:20px;font-size:14px;font-weight:600;line-height:1.4;box-shadow:0 4px 12px rgba(45,125,210,.1)}
.bubble.them{align-self:flex-start;background:rgba(255,255,255,.85);border:1px solid var(--card-line);border-bottom-left-radius:6px}
.bubble.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.bubble .tm{font-size:10.5px;font-weight:600;margin-top:3px;text-align:right;opacity:.7}
.composer{flex:none;display:flex;align-items:center;gap:10px;padding:12px 14px calc(env(safe-area-inset-bottom,0) + 16px);
  background:var(--chrome);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top:1px solid rgba(255,255,255,.5)}
.composer .field{flex:1;background:rgba(255,255,255,.6);border:1px solid var(--card-line);border-radius:22px;padding:11px 16px;font-size:14px;font-weight:600;color:var(--faint)}
.send{width:42px;height:42px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex:none;cursor:pointer;box-shadow:0 6px 16px rgba(45,125,210,.36)}

/* ---- search ---- */
.search{margin-top:14px;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:16px;
  background:rgba(255,255,255,.55);border:1px solid var(--card-line);color:var(--faint);font-weight:600;font-size:14.5px}

/* ---- tab bar (vetro flottante) ---- */
.tabbar{flex:none;z-index:10;padding:6px 16px calc(env(safe-area-inset-bottom,0) + 12px)}
.tabbar .inner{display:flex;justify-content:space-around;align-items:flex-start;border-radius:28px;padding:10px 8px;
  background:var(--chrome);backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 34px rgba(28,67,110,.18)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:5px 0;border-radius:16px;position:relative;background:none;border:0;font-family:inherit}
.tab.active{background:rgba(45,125,210,.12)}
.tab .lbl{font-size:10.5px;font-weight:700;color:var(--faint)}
.tab.active .lbl{color:var(--blue)}
.tab .badge{position:absolute;top:0;right:50%;margin-right:-22px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--pink);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 6px rgba(244,123,160,.5)}

.hidden{display:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.screen,.chat-wrap,.sheet{animation:none}}

/* ---- input reali (ricerca / chat) ---- */
input.field,textarea.field,select.field{
  font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.7);border:1px solid var(--card-line);border-radius:14px;
  padding:11px 14px;width:100%;outline:none}
input.field::placeholder,textarea.field::placeholder{color:var(--faint);font-weight:600}
.search input.field{background:none;border:0;padding:0;border-radius:0}
.composer input.field{border-radius:22px}

/* ---- modale / bottom sheet ---- */
.overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:flex-end;
  background:rgba(19,40,61,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-height:88%;overflow-y:auto;background:linear-gradient(180deg,#F4F9FE,#FBF4F8);
  border-radius:26px 26px 0 0;padding:8px 18px calc(env(safe-area-inset-bottom,0) + 20px);
  box-shadow:0 -10px 40px rgba(28,67,110,.25);animation:slideup .26s cubic-bezier(.22,1,.36,1)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:#C4D4E2;margin:8px auto 14px}
.sheet h2{font-size:20px;font-weight:800;margin-bottom:4px}
.sheet .hint{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:16px}
.form{display:flex;flex-direction:column;gap:12px}
.form label{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;
  display:block;margin-bottom:6px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .err{color:#E5484D;font-size:12.5px;font-weight:700;min-height:1px}
.form .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.picker{display:flex;gap:8px;overflow-x:auto;padding:2px 0}
.chip-pt{flex:none;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:20px;
  background:rgba(255,255,255,.7);border:1px solid var(--card-line);cursor:pointer;font-weight:700;font-size:13px;white-space:nowrap}
.chip-pt.sel{background:var(--blue);color:#fff;border-color:var(--blue)}
.chip-pt .d{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:800}

/* ---- toast ---- */
.toast{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);z-index:60;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:700;padding:11px 18px;border-radius:22px;
  box-shadow:0 8px 24px rgba(19,40,61,.35);animation:toastin .25s ease;max-width:86%;text-align:center}
@keyframes toastin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}