/* ════════════════════════════════════════════════════════════════════════════
   COACH AI — DESIGN TOKENS (definitive 2026-05-15)
   ────────────────────────────────────────────────────────────────────────────
   CATEGORIE PIANI — emoji + colore brand. Usare SEMPRE questi mapping
   ovunque (plan-tile, drawer-tab, widget, menu-item, modal title, iframe h1,
   chat hero card, welcome p, ecc).

   | Categoria      | Emoji | Color var    | RGB var       |
   |----------------|-------|--------------|---------------|
   | Alimentazione  | 🍽    | --food       | --food-rgb    |
   | Allenamento    | 💪    | --warm       | --warm-rgb    |
   | Stretching     | 🧘    | --str        | --str-rgb     |
   | Spesa          | 🛒    | --shop       | --shop-rgb    |

   EMOJI SECONDARIE (NON cambiare):
   - 🛋️ Riposo (giorno non workout nel meal day-tags)
   - 🌙 Recovery serale, 🌅 Mattutino (stretch tags)
   - 🍳 Meal prep, 🥩 Proteine, 🥦 Verdure (prep helpers)
   - 💡 Tip · 📋 Scheda · ⚠️ Disclaimer AI · 👋 Saluto
   - ▶ Avvia · ✓ Completato · ▾ Dropdown
   ════════════════════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  /* ── Colors ── */
  --bg:#0a0a0a;--sf:#141414;--sf2:#1c1c1c;--sf3:#262626;--sf4:#333;
  --tx:#f0f0f0;--tx2:#b0b0b0;--tx3:#777;
  --ac:#1D9E75;--ac2:#25c98f;--warm:#e8a44a;--str:#c084fc;
  --shop:#5ba8d4;--shop2:#7ebee0;--food:#c27259;--food2:#d08668;--err:#e05a3a;
  --ac-rgb:29,158,117;--ac2-rgb:37,201,143;--warm-rgb:232,164,74;
  --str-rgb:192,132,252;--shop-rgb:91,168,212;--food-rgb:194,114,89;--err-rgb:224,90,58;
  /* ── Spacing scale (base 4, design audit 2026-05-16) ── */
  --sp-1:2px;--sp-2:4px;--sp-3:8px;--sp-4:12px;--sp-5:16px;
  --sp-6:20px;--sp-7:24px;--sp-8:32px;--sp-9:40px;--sp-10:48px;
  /* ── Border radius scale ── */
  --r-xs:6px;--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-2xl:20px;--r-full:9999px;
  --r:14px; /* legacy alias = --r-lg */
  /* ── Letter-spacing scale (uppercase) ── */
  --ls-tight:0.02em;  /* mixed-case display (greeting) */
  --ls-snug:0.06em;   /* compact uppercase (h1, hero) */
  --ls-wide:0.10em;   /* standard uppercase labels */
  --ls-loose:0.14em;  /* hero section labels */
  /* ── Layout ── */
  --topbar-h:56px;
  /* ── z-index ── */
  --z-drawer:70;--z-fab:75;--z-chat:78;--z-menu-overlay:80;--z-menu-drawer:90;--z-modal:95;--z-login:200;--z-modal-top:300;
}
@media(prefers-color-scheme:light){
  :root{--bg:#f8f9fa;--sf:#ffffff;--sf2:#f0f0f0;--sf3:#e2e2e2;--sf4:#cccccc;--tx:#111111;--tx2:#555555;--tx3:#888888;
    /* Accent calibrato per contrast WCAG AA su sfondo chiaro */
    --ac:#0f7752;--ac2:#108b62;--ac-rgb:15,119,82;--ac2-rgb:16,139,98;
  }
}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--tx);height:100dvh;display:flex;flex-direction:column;overflow:hidden}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── LOGIN ── */
#loginScreen{position:fixed;inset:0;background:var(--bg);z-index:var(--z-login);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px}
#loginScreen::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 65% 50% at 50% 42%,rgba(var(--ac-rgb),.07) 0%,transparent 70%),radial-gradient(ellipse 45% 35% at 85% 16%,rgba(var(--warm-rgb),.06) 0%,transparent 65%),radial-gradient(ellipse 40% 30% at 14% 86%,rgba(var(--warm-rgb),.045) 0%,transparent 65%);pointer-events:none}
#loginScreen.hide{display:none}
.login-logo{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:rgba(var(--ac-rgb),.08);border:1px solid rgba(var(--ac-rgb),.18);border-radius:var(--r-2xl);margin-bottom:28px;animation:fadeUp .5s ease both;flex-shrink:0}
.login-title{font-family:'Barlow Semi Condensed',sans-serif;font-size:45.5px;font-weight:700;letter-spacing:var(--ls-snug);text-transform:uppercase;color:var(--tx);line-height:1;margin-bottom:14px;animation:fadeUp .5s .08s ease both}
.login-accent{width:28px;height:2px;background:var(--ac);border-radius:1px;margin-bottom:14px;animation:fadeUp .5s .14s ease both}
.login-tagline{font-size:12.5px;font-weight:500;letter-spacing:var(--ls-loose);text-transform:uppercase;color:var(--tx3);margin-bottom:32px;animation:fadeUp .5s .2s ease both}
.login-legal{font-size:12.5px;line-height:1.55;color:var(--tx3);margin-top:32px;max-width:360px;text-align:center;animation:fadeUp .5s .5s ease both;opacity:.85}
.login-legal strong{color:var(--tx2);font-weight:600}
.login-footer{font-size:12.5px;color:var(--tx3);margin-top:14px;max-width:360px;text-align:center;opacity:.65;display:flex;justify-content:center;align-items:center;gap:var(--sp-3)}
.login-footer a{color:var(--tx3);text-decoration:none;border-bottom:1px dotted var(--tx3);transition:color .14s,border-color .14s}
.login-footer a:hover{color:var(--tx2);border-bottom-color:var(--tx2)}
.login-footer .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tx3);opacity:.5;animation:bop 1.2s infinite;font-size:0}
.menu-footer{padding:8px;border-top:1px solid var(--sf3)}
.menu-version{font-size:12.5px;color:var(--tx3);padding:14px 18px 10px;text-align:center;opacity:.6;display:flex;justify-content:center;align-items:center;gap:var(--sp-3)}
.menu-version a{color:var(--tx3);text-decoration:none;border-bottom:1px dotted var(--tx3)}
.menu-version a:hover{color:var(--tx2);border-bottom-color:var(--tx2)}
.login-form{width:100%;max-width:320px;display:flex;flex-direction:column;gap:var(--sp-4);animation:fadeUp .5s .28s ease both}
.login-input{background:var(--sf);border:1px solid var(--sf3);border-radius:var(--r-md);padding:15px 16px;color:var(--tx);font-size:16.5px;font-family:inherit;outline:none;width:100%;transition:border-color .18s}
.login-input::placeholder{color:var(--tx3)}
.login-input:focus{border-color:var(--ac)}
.login-btn{background:var(--ac);color:#fff;border:none;border-radius:var(--r-md);padding:15px;font-size:15.5px;font-weight:600;font-family:inherit;letter-spacing:var(--ls-snug);cursor:pointer;width:100%;transition:background .18s,transform .1s}
.login-btn:hover:not(:disabled){background:var(--ac2)}
.login-btn:active:not(:disabled){transform:scale(.98)}
.login-btn:disabled{opacity:.45;cursor:not-allowed}
.login-msg{font-size:13.5px;color:var(--tx3);text-align:center;line-height:1.5;min-height:20px;margin-top:4px}
.login-msg.ok{color:var(--ac2)}.login-msg.err{color:var(--err)}
.login-link{font-size:13.5px;color:var(--tx3);text-align:right;cursor:pointer;transition:color .15s;margin-top:-2px}
.login-link:hover{color:var(--ac)}
.login-toggle{font-size:15px;color:var(--tx2);text-align:center;margin-top:6px}
.login-toggle-link{color:var(--ac);cursor:pointer;margin-left:6px;font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.login-toggle-link:hover{color:var(--ac2)}
.login-legal-accept{font-size:13.5px;color:var(--tx2);line-height:1.5;margin-top:4px;display:none}
.login-legal-accept label{display:flex;align-items:flex-start;gap:var(--sp-3);cursor:pointer}
.login-legal-accept input{margin:3px 0 0;flex-shrink:0;cursor:pointer;accent-color:var(--ac)}
.login-legal-accept a{color:var(--ac2);text-decoration:underline}
.legal-modal .modal{max-width:480px}
.legal-modal h3{font-family:'Barlow Semi Condensed',sans-serif;font-size:21.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-tight);margin:0 0 8px}
.legal-modal .sub{color:var(--tx2);font-size:15.5px;line-height:1.55;margin:0 0 14px}
.legal-modal .legal-check-row{display:flex;align-items:flex-start;gap:var(--sp-3);margin:14px 0;padding:12px 14px;background:var(--sf2);border:1px solid var(--sf3);border-radius:var(--r-md);font-size:14.5px;color:var(--tx);line-height:1.5}
.legal-modal .legal-check-row input{margin:3px 0 0;flex-shrink:0;cursor:pointer;accent-color:var(--ac)}
.legal-modal .legal-check-row a{color:var(--ac2);text-decoration:underline}
.legal-modal .modal-btns{flex-direction:column;gap:var(--sp-3)}
.legal-modal .modal-btns .btn{width:100%}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── HEADER ── */
/* Topbar 3-col grid v9: brand sx · greeting CENTER (viewport-aligned) · user-menu dx.
   Pattern 1fr auto 1fr: le colonne laterali sono uguali → center auto è
   centrato sul viewport, non sbilanciato dalle larghezze diverse di brand/menu.
   Mobile <600px: greeting wrappa su 2a riga sotto. */
.hdr{padding:12px 16px;border-bottom:1px solid var(--sf3);flex-shrink:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-5);background:var(--bg)}
.hdr .hdr-left{justify-self:start}
.hdr .hdr-right{justify-self:end}
.hdr-left{min-width:0;overflow:hidden;display:flex;align-items:center;gap:var(--sp-4)}
.hdr-text{min-width:0;overflow:hidden}
.hdr h1{font-size:19.5px;font-weight:700;font-family:'Barlow Semi Condensed',sans-serif;text-transform:uppercase;letter-spacing:var(--ls-snug)}
.hdr p{font-size:12.5px;color:var(--tx3);margin-top:1px;text-transform:uppercase;letter-spacing:var(--ls-snug);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Barlow Semi Condensed',sans-serif}
.hdr-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);min-width:0;text-align:center}
.hdr-center .hdr-date{font-family:'Barlow Semi Condensed',sans-serif;font-size:13.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:var(--ls-wide);font-weight:600;line-height:1}
.hdr-center .hdr-greet{font-family:'Barlow Semi Condensed',sans-serif;font-size:17.5px;color:var(--tx);font-weight:700;line-height:1.15;letter-spacing:var(--ls-tight)}
.hdr-center .hdr-greet b{color:var(--ac2);font-weight:700}
@media(max-width:600px){
  .hdr{grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:var(--sp-3)}
  .hdr-left{grid-row:1;grid-column:1}
  .hdr-right{grid-row:1;grid-column:2;justify-self:end}
  .hdr-center{grid-row:2;grid-column:1/-1;padding-top:var(--sp-4);border-top:1px solid var(--sf3)}
}
/* Brand mark — logo SVG riusabile in topbar, welcome modal, chat panel
   (3 punti strategici di brand placement, fix UX 2026-05-15) */
.brand-mark{flex-shrink:0;display:block}
.brand-mark-xs{width:22px;height:22px}
.brand-mark-sm{width:32px;height:32px}
.brand-mark-lg{width:64px;height:64px;filter:drop-shadow(0 2px 8px rgba(var(--warm-rgb),.25))}
.welcome-brand{display:flex;justify-content:center;margin-bottom:18px;animation:brandFloat 3.6s ease-in-out infinite}
@keyframes brandFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.chat-panel-hdr .brand-mark{margin-left:4px}
.hdr-right{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.badge{font-size:13.5px;background:var(--sf);padding:5px 10px;border-radius:var(--r-2xl);color:var(--tx3);cursor:pointer;border:1px solid transparent;white-space:nowrap}
.badge.active{border-color:var(--ac);color:var(--ac2)}
.icon-btn{width:32px;height:32px;border-radius:var(--r-sm);background:var(--sf2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--tx3);font-size:15.5px;flex-shrink:0}

/* ── MESSAGES ── */
.msgs{flex:1;overflow-y:auto;padding:14px 14px 8px;display:flex;flex-direction:column;gap:var(--sp-4)}
.msgs::-webkit-scrollbar{width:3px}
.msgs::-webkit-scrollbar-thumb{background:var(--sf3);border-radius:2px}
.msg{max-width:88%;line-height:1.55;font-size:16.5px}
.msg.user{align-self:flex-end;background:var(--ac);color:#fff;padding:10px 14px;border-radius:var(--r-xl) var(--r-xl) 4px var(--r-xl);word-break:break-word}
.msg.ai{align-self:flex-start;background:var(--sf);border:1px solid var(--sf3);padding:11px 14px;border-radius:4px var(--r-xl) var(--r-xl) var(--r-xl);color:var(--tx2)}
.msg.ai strong{color:var(--tx)}
.msg.sys{align-self:center;background:none;color:var(--tx3);font-size:13.5px;text-align:center}
.msg.sys.ok{color:var(--ac2)}.msg.sys.err{color:var(--err)}.msg.sys.info{color:var(--warm)}
.typing-wrap{align-self:flex-start;background:var(--sf);padding:13px 16px;border-radius:4px var(--r-xl) var(--r-xl) var(--r-xl)}
.dots{display:flex;gap:var(--sp-2);align-items:center}
.dots .dot{width:6px;height:6px;border-radius:50%;background:var(--tx3);animation:bop 1.2s infinite}
.dots .dot:nth-child(2){animation-delay:.2s}.dots .dot:nth-child(3){animation-delay:.4s}
@keyframes bop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}

/* ── HOME CARDS ── */
.dl{flex-shrink:0;display:none}
.dl.show{display:block}
.dl-label{font-family:'Barlow Semi Condensed',sans-serif;font-size:16.5px;color:var(--warm);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-loose);margin:14px 14px 8px}
/* Footer su 1 riga: disclaimer + version inline con separatore · v9.
   Mobile wrap a 2 righe se non sta. */
.home-footer{margin:18px 14px 14px;display:flex;justify-content:center;align-items:center;gap:var(--sp-4);flex-wrap:wrap;color:var(--tx3);font-size:12.5px;line-height:1.6}
.home-version::before{content:'·';margin-right:var(--sp-2);color:var(--sf4)}
.home-disclaimer{margin-bottom:6px;opacity:.85}
.home-disclaimer strong{color:var(--tx2)}
.home-version{opacity:.6;font-size:11.5px;letter-spacing:var(--ls-snug)}

.home-day-card{margin:14px 14px 0;padding:18px 20px;background:var(--sf);border:1px solid var(--sf3);border-radius:var(--r-lg);position:relative;flex-shrink:0}
.home-day-card::before{content:'';position:absolute;top:18px;left:0;width:3px;height:calc(100% - 36px);background:var(--ac);border-radius:0 2px 2px 0;opacity:.7}
.home-day-date{font-size:12.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:var(--ls-wide);font-weight:600;margin-bottom:4px}
.home-day-greeting{font-size:27.5px;font-weight:700;font-family:'Barlow Semi Condensed',sans-serif;letter-spacing:var(--ls-tight);color:var(--tx);line-height:1.1}
.home-day-meta{font-size:14.5px;color:var(--tx2);margin-top:10px;display:flex;gap:var(--sp-6);flex-wrap:wrap}
.home-day-meta-item{display:flex;align-items:baseline;gap:var(--sp-2)}
.home-day-meta-item .k{color:var(--tx3);font-size:12.5px;text-transform:uppercase;letter-spacing:var(--ls-snug);font-weight:600}
.home-day-meta-item .v{color:var(--tx);font-weight:700;font-family:'Barlow Semi Condensed',sans-serif;font-size:16.5px;letter-spacing:var(--ls-tight)}
.home-day-meta-delta{font-size:12.5px;padding:1px 7px;border-radius:var(--r-md);background:var(--sf2);color:var(--tx3);font-weight:600;margin-left:2px}
.home-day-meta-delta.up{color:var(--warm);background:rgba(var(--warm-rgb),.12)}
.home-day-meta-delta.down{color:var(--ac2);background:rgba(var(--ac2-rgb),.12)}

.home-chart-card{margin:14px;background:var(--sf);border:1px solid var(--sf3);border-radius:var(--r-lg);padding:14px 16px;display:none;flex-shrink:0}
.home-chart-card.shown{display:block}
/* Chart header v9: SX = "Andamento" + info inline (peso/target/settimana).
   DX = filtro dropdown + last value. Mobile: wrappa flex. */
.home-chart-header{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);margin-bottom:10px;flex-wrap:wrap}
.home-chart-header-left{display:flex;align-items:baseline;gap:var(--sp-4);flex-wrap:wrap;min-width:0;flex:1}
.home-chart-header-right{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.home-chart-title{font-size:15.5px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:var(--ls-loose);line-height:1;white-space:nowrap;font-family:'Barlow Semi Condensed',sans-serif}
/* v9 fix: last value RIMOSSO (era 65kg verde a destra del filtro, ridondante
   con il PESO nell'info inline a sinistra). Nascosto via CSS senza toccare
   markup HTML — renderHomeMiniChart continua a popolarlo ma è hidden. */
.home-chart-last{display:none}
.home-chart-info-inline{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:baseline}
.home-chart-info-item{display:flex;align-items:baseline;gap:var(--sp-2)}
.home-chart-info-item .k{font-family:'Barlow Semi Condensed',sans-serif;font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:var(--ls-wide);font-weight:600;line-height:1}
.home-chart-info-item .v{font-family:'Barlow Semi Condensed',sans-serif;font-size:15.5px;font-weight:700;color:var(--ac2);letter-spacing:.01em;line-height:1}
.home-chart-info-item .v small{font-size:12px;font-weight:500;color:var(--tx3);margin-left:var(--sp-1)}
/* v9 fix: TUTTI i valori info-item ora verdi prominenti (era solo first-child).
   Pattern uniforme: peso, target, settimana — tutti color var(--ac2). */
.home-chart-info-delta{font-family:'Barlow Semi Condensed',sans-serif;font-size:11px;font-weight:700;padding:2px 6px;border-radius:var(--r-xs);letter-spacing:var(--ls-tight);line-height:1.2;align-self:center}
.home-chart-info-delta.down{background:rgba(var(--ac-rgb),.16);color:var(--ac2);border:1px solid rgba(var(--ac-rgb),.3)}
.home-chart-info-delta.up{background:rgba(var(--err-rgb),.16);color:var(--err);border:1px solid rgba(var(--err-rgb),.3)}
.home-chart-card canvas{max-height:80px;height:80px!important;width:100%!important}
@media(min-width:760px){.home-chart-card canvas{max-height:110px;height:110px!important}}
.home-chart-hint{font-size:13.5px;color:var(--tx3);font-style:italic;padding:10px 12px;background:rgba(var(--ac-rgb),0.06);border-left:2px solid var(--ac2);border-radius:var(--r-xs);line-height:1.4;margin-top:4px}

/* Plan tiles — adaptive grid (design audit 2026-05-16).
   Mobile <520px: 2-col (2x2). Tablet/desktop ≥520px: 4-col fila.
   Pre-fix v9 era 4-col forzato con !important shrink → cramped su iPhone SE. */
.plan-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);margin:0 14px 14px;flex-shrink:0}
@media(min-width:520px){
  .plan-tiles{grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
}
.plan-tile{background:var(--sf);border:1px solid var(--sf3);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:var(--sp-4);position:relative;overflow:hidden;transition:border-color .16s,transform .16s}
.plan-tile::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--ac)}
.plan-tile.meal::before{background:var(--food)}
.plan-tile.work::before{background:var(--warm)}
.plan-tile.str::before{background:var(--str)}
.plan-tile.shop::before{background:var(--shop)}
.plan-tile-head{display:flex;align-items:center;gap:var(--sp-4)}
.plan-tile-icon{font-size:23.5px;line-height:1;flex-shrink:0;filter:grayscale(0)}
.plan-tile-name{font-family:'Barlow Semi Condensed',sans-serif;font-size:16.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-snug);color:var(--tx)}
.plan-tile-body{display:flex;flex-direction:column;gap:var(--sp-3);min-height:38px}
.plan-tile-status{font-size:14.5px;color:var(--tx3);font-weight:500;line-height:1.35}
.plan-tile-status.ok{color:var(--ac2)}
.plan-tile-status.err{color:var(--err)}
.plan-tile-status.gen{color:var(--warm)}
.plan-tile-status.empty{color:var(--tx3)}
.plan-tile-status.integrated{color:#c084fc}
.plan-progress{height:3px;background:var(--sf3);border-radius:2px;overflow:hidden}
.plan-progress-bar{height:100%;background:var(--ac);transition:width .4s ease;width:0}
.plan-tile.meal .plan-progress-bar{background:var(--food)}
.plan-tile.work .plan-progress-bar{background:var(--warm)}
.plan-tile.str .plan-progress-bar{background:var(--str)}
.plan-tile.shop .plan-progress-bar{background:var(--shop)}
.plan-tile-cta{background:var(--sf2);color:var(--tx2);border:1px solid var(--sf3);padding:10px 12px;border-radius:var(--r-md);font-weight:600;font-size:14.5px;cursor:pointer;font-family:inherit;transition:background .14s,border-color .14s,color .14s;margin-top:auto}
.plan-tile-cta:hover:not(:disabled){background:var(--sf3);color:var(--tx)}
.plan-tile-cta:disabled{opacity:.4;cursor:not-allowed}
.plan-tile-cta.primary{background:var(--ac);color:#fff;border-color:var(--ac)}
.plan-tile-cta.primary:hover:not(:disabled){background:var(--ac2);border-color:var(--ac2)}
.plan-tile.meal .plan-tile-cta.primary{background:var(--food);border-color:var(--food)}
.plan-tile.meal .plan-tile-cta.primary:hover:not(:disabled){background:var(--food2);border-color:var(--food2)}
.plan-tile.work .plan-tile-cta.primary{background:var(--warm);border-color:var(--warm)}
.plan-tile.work .plan-tile-cta.primary:hover:not(:disabled){background:#f0b563;border-color:#f0b563}
.plan-tile.str .plan-tile-cta.primary{background:var(--str);border-color:var(--str)}
.plan-tile.str .plan-tile-cta.primary:hover:not(:disabled){background:#d4a4ff;border-color:#d4a4ff}
.plan-tile.shop .plan-tile-cta.primary{background:var(--shop);border-color:var(--shop)}
.plan-tile.shop .plan-tile-cta.primary:hover:not(:disabled){background:var(--shop2);border-color:var(--shop2)}
.plan-tile-cta.danger{background:rgba(var(--err-rgb),.1);color:var(--err);border-color:rgba(var(--err-rgb),.28)}
.plan-tile-cta.danger:hover:not(:disabled){background:rgba(var(--err-rgb),.2)}

/* Desktop dashboard layout */
@media(min-width:760px){
  /* gap:var(--sp-7) uniforme tra TUTTI i grid item del #homeArea (block-to-block).
     Per ridurre il gap label→content sotto (es. "Oggi"→widgets a 4px) uso
     margin negative -20px sul section-label (24 - 20 = 4). */
  #homeArea{padding:24px max(24px,calc((100% - 1120px) / 2)) 24px;width:100%;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-7);align-content:start;box-sizing:border-box}
  .home-day-card{grid-column:1/-1;margin:0}
  .home-chart-card{grid-column:1/-1;margin:0}
  .home-section-label{grid-column:1/-1;margin:0 0 -20px;padding:0}
  .home-widgets-row{grid-column:1/-1;margin:0}
  .dl{grid-column:1/-1;display:block}
  .home-footer{grid-column:1/-1;margin:0}
  .dl-label{margin:0 0 4px}
  .plan-tiles{grid-template-columns:repeat(4,1fr);margin:0;gap:var(--sp-5)}
  .plan-tile{padding:18px;gap:var(--sp-5)}
  .plan-tile-name{font-size:18.5px}
  .plan-tile.shop{grid-column:2}
}

/* ── INPUT ── */
.input-row{display:flex;gap:var(--sp-3);padding:10px 14px;border-top:1px solid var(--sf3);flex-shrink:0}
.input-wrap{flex:1;background:var(--sf);border-radius:var(--r-md);display:flex;align-items:center;padding:0 12px;border:1px solid transparent}
.input-wrap:focus-within{border-color:var(--sf4)}
.inp{flex:1;background:none;border:none;color:var(--tx);font-size:16.5px;font-family:inherit;padding:11px 0;outline:none;resize:none;max-height:90px;overflow-y:auto}
.inp::placeholder{color:var(--tx3)}
.send{width:42px;height:42px;border-radius:var(--r-md);background:var(--ac);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.send:disabled{opacity:.35;cursor:not-allowed}
.send svg{width:20px;height:20px;fill:#fff}

/* ── MODALS ── */
/* Modal z-index 95: sopra plan-drawer (70), chat-panel (78), menu-overlay (80),
   menu-drawer (90). Fix 2026-05-15 — pre-fix i modali aperti dal menu (Profilo,
   Account, Misurazioni) finivano sotto al drawer piani/chat. */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:var(--z-modal);display:none;align-items:flex-end;justify-content:center}
.modal-bg.show{display:flex}
.modal{background:var(--sf);border-radius:var(--r-2xl) var(--r-2xl) 0 0;padding:var(--sp-6) var(--sp-6) var(--sp-9);width:100%;max-width:520px;border-top:1px solid var(--sf3);max-height:90dvh;overflow-y:auto;overflow-x:hidden}
.modal h3{font-size:18.5px;font-weight:700;margin-bottom:4px}
.modal .sub{font-size:14.5px;color:var(--tx3);margin-bottom:16px;line-height:1.5}
/* BKL-003: minmax(0,1fr) evita che il min-content di select con option lunghi
   (es. "Aumentare massa muscolare") espanda la colonna oltre il viewport mobile. */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-5)}
.fld{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.fld label,.fld .fld-lbl{font-size:13.5px;color:var(--tx3);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-snug)}
.fld input,.fld select,.fld textarea{background:var(--sf2);border:1px solid var(--sf3);border-radius:var(--r-md);padding:10px 12px;color:var(--tx);font-size:15.5px;font-family:inherit;outline:none;width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--ac)}
.fld textarea{resize:none;height:60px;line-height:1.5}
.fld select option{background:var(--sf2)}
.full{grid-column:1/-1}
.sec-lbl{font-size:13.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:var(--ls-snug);margin-top:6px;margin-bottom:10px;grid-column:1/-1}
.check-group{display:flex;flex-wrap:wrap;gap:var(--sp-3);grid-column:1/-1}
.chk{display:flex;align-items:center;gap:var(--sp-3);background:var(--sf2);border:1px solid var(--sf3);border-radius:var(--r-sm);padding:6px 10px;cursor:pointer;user-select:none}
.chk input{display:none}
.chk.sel{border-color:var(--ac);background:rgba(var(--ac-rgb),.12);color:var(--ac2)}
.chk span{font-size:14.5px;font-weight:500}
.modal-btns{display:flex;gap:var(--sp-3);margin-top:18px}
/* ── ANNOUNCEMENT MODAL BODY (parseLightMarkdown output) ── */
.announcement-body{font-size:14px;line-height:1.55;color:var(--tx2)}
.announcement-body p{margin:0 0 12px 0}
.announcement-body p:last-child{margin-bottom:0}
.announcement-body strong{color:var(--tx);font-weight:700}
.announcement-body em{font-style:italic;color:var(--tx2)}
.announcement-body ul{margin:4px 0 14px 0;padding-left:20px;list-style:disc}
.announcement-body li{margin-bottom:6px;line-height:1.5}
.announcement-body li:last-child{margin-bottom:0}
.announcement-body a{color:var(--ac);text-decoration:none;border-bottom:1px dotted var(--ac)}
.announcement-body a:hover{color:var(--ac2);border-bottom-color:var(--ac2)}
.btn{padding:11px 18px;border-radius:var(--r-md);border:none;font-size:15.5px;font-weight:600;font-family:inherit;cursor:pointer}
.btn-primary{background:var(--ac);color:#fff;flex:1}.btn-ghost{background:var(--sf2);color:var(--tx3)}.btn-cancel{background:transparent;color:var(--err);border:1px solid rgba(var(--err-rgb),.35)}.btn-cancel:hover{background:rgba(var(--err-rgb),.08)}.btn-danger{background:var(--err);color:#fff;flex:1}
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:40;display:none;align-items:flex-end;justify-content:center}
.sheet-bg.show{display:flex}
.sheet{background:var(--sf);border-radius:20px 20px 0 0;padding:20px 18px 40px;width:100%;max-width:480px;border-top:1px solid var(--sf3)}
.sheet h3{font-size:17px;font-weight:700;margin-bottom:14px}
.pr{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--sf2);font-size:14px}
.pr:last-child{border:none}.pr .k{color:var(--tx3)}.pr .v{color:var(--tx);font-weight:500;text-align:right;max-width:65%;word-break:break-word}
.sheet-btns{display:flex;gap:8px;margin-top:18px}

/* ── WELCOME WIZARD ── */
.welcome-modal-inner{position:relative;padding-top:34px}
.welcome-skip{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--tx3);font-size:14.5px;font-weight:600;font-family:inherit;cursor:pointer;padding:6px 4px;letter-spacing:var(--ls-tight)}
.welcome-skip:hover{color:var(--tx2)}
.welcome-slides{position:relative;min-height:220px}
.welcome-slide{display:none;animation:welcomeFade 200ms ease-out}
.welcome-slide.is-current{display:block}
.welcome-slide h3{font-size:20.5px;font-weight:700;margin-bottom:14px;line-height:1.3}
.welcome-slide p{font-size:15.5px;color:var(--tx2);line-height:1.55;margin-bottom:10px}
.welcome-slide p:last-child{margin-bottom:0}
.welcome-dots{display:flex;gap:var(--sp-3);justify-content:center;margin:20px 0 16px;list-style:none;padding:0}
.welcome-dot{width:8px;height:8px;border-radius:50%;background:var(--sf3);border:none;padding:0;cursor:pointer;transition:background 150ms,transform 150ms}
.welcome-dot.is-active{background:var(--ac);transform:scale(1.3)}
.welcome-dot:hover:not(.is-active){background:var(--sf4)}
.welcome-cta-row{display:flex}
.welcome-cta{flex:1}
@keyframes welcomeFade{from{opacity:0}to{opacity:1}}

/* ── MEASUREMENTS ── */
.meas-tabs{display:flex;gap:var(--sp-3);margin-bottom:16px}
.meas-tab{flex:1;padding:9px 0;border:none;border-radius:var(--r-md);font-size:14.5px;font-weight:600;font-family:inherit;cursor:pointer;background:var(--sf2);color:var(--tx3)}
.meas-tab.on{background:var(--ac);color:#fff}
.meas-filter-row{display:flex;gap:var(--sp-3);margin-bottom:12px;align-items:center}
.meas-filter{padding:5px 12px;border:1px solid var(--sf3);border-radius:var(--r-sm);background:none;color:var(--tx3);font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer}
.meas-filter.on{border-color:var(--ac);color:var(--ac)}
.meas-metric-sel{margin-left:auto;background:var(--sf2);border:1px solid var(--sf3);border-radius:var(--r-sm);padding:5px 8px;color:var(--tx);font-size:13.5px;font-family:inherit}
.meas-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--sf2);font-size:14.5px}
.meas-item:last-child{border-bottom:none}
.meas-item-date{color:var(--tx3);font-size:13.5px}
.meas-item-val{font-weight:600;color:var(--tx);margin-top:2px}
.meas-item-del{background:none;border:none;color:var(--tx3);cursor:pointer;font-size:17.5px;padding:0 4px;line-height:1}
.chart-wrap{margin-bottom:16px;background:var(--sf2);border-radius:var(--r-md);padding:10px}

/* ── HOME AREA ── */
#homeArea{position:relative;flex:1;overflow-y:auto;display:flex;flex-direction:column}
/* Ambient lights — 3 punti luce sparsi (1 verde + 2 warm), opacity bassa
   come login, niente animazioni. Stesso vibe ambient della maschera auth. */
#homeArea::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 60% 40% at 18% 14%,rgba(var(--ac-rgb),.085) 0%,transparent 65%),radial-gradient(ellipse 55% 45% at 82% 48%,rgba(var(--warm-rgb),.075) 0%,transparent 65%),radial-gradient(ellipse 50% 35% at 22% 86%,rgba(var(--warm-rgb),.055) 0%,transparent 65%)}
#homeArea > *{position:relative;z-index:1}
@media(min-width:760px){#homeArea{display:grid;flex-direction:row;overflow-y:auto}}
.home-welcome{margin:0 14px 14px;padding:14px 16px;background:var(--sf);border:1px solid var(--sf3);border-radius:var(--r-lg);font-size:15.5px;color:var(--tx2);line-height:1.6}
.home-welcome strong{color:var(--tx)}

/* ── CHAT FAB ── */
/* chat-fab z-index 75: sopra plan-drawer (70) così richiamabile da dentro
   tab piani. Nascosto quando la chat è aperta (regola :has sotto). */
.chat-fab{position:fixed;bottom:24px;right:20px;width:56px;height:56px;border-radius:50%;background:var(--ac);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:25.5px;box-shadow:0 4px 20px rgba(var(--ac-rgb),.38);z-index:var(--z-fab);transition:transform .15s,box-shadow .15s}
body:has(#chatPanel.open) .chat-fab{display:none}
body.chat-open .chat-fab{display:none}
.chat-fab:hover{transform:scale(1.07);box-shadow:0 6px 24px rgba(var(--ac-rgb),.5)}
.chat-fab:active{transform:scale(.95)}

/* ── CHAT PANEL ── */
/* Chat panel: stesso layout di .plan-drawer (top:56px lascia topbar, radius,
   shadow). Header semplificato: brand + titolo + close ✕ (no più freccia back
   redundant). Unifica grammatica visiva con drawer piani. */
/* z-index 78: sopra plan-drawer (70) — così aprire la chat con il drawer
   piani aperto la sovrappone correttamente. Sotto menu-overlay (80) e
   menu-drawer (90) per non bloccare il menu utente. */
.chat-panel{position:fixed;top:var(--topbar-h,56px);right:0;bottom:0;left:0;z-index:var(--z-chat);display:flex;flex-direction:column;background:var(--bg);transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 -4px 20px rgba(0,0,0,.3);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.chat-panel.open{transform:translateY(0)}
.chat-panel-hdr{display:flex;align-items:center;justify-content:flex-end;padding:12px 14px;border-bottom:1px solid var(--sf3);flex-shrink:0;background:var(--bg)}

/* Hero empty state — visibile quando .msgs è vuoto (toggle JS via
   updateChatHeroVisibility). Logo + saluto + 3 starter cards che pre-
   compilano la textarea al click. Pattern stile ChatGPT/Claude empty state. */
.chat-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 18px;text-align:center;gap:var(--sp-5);overflow-y:auto}
.chat-hero[hidden]{display:none}
/* Quando hero è visibile, .msgs (anch'esso flex:1) non deve dividersi lo
   spazio — collassa a 0 fin quando non ci sono messaggi. */
.chat-hero:not([hidden]) ~ .msgs{flex:0;padding:0;min-height:0}
.chat-hero-logo{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:rgba(var(--ac-rgb),.08);border:1px solid rgba(var(--ac-rgb),.18);border-radius:var(--r-xl);flex-shrink:0}
.chat-hero-title{font-family:'Barlow Semi Condensed',sans-serif;font-size:23.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-snug);color:var(--tx);line-height:1.1}
.chat-hero-sub{font-size:14.5px;color:var(--tx3);max-width:280px;line-height:1.5;margin-bottom:6px}
.chat-hero-cards{width:100%;max-width:320px;display:flex;flex-direction:column;gap:var(--sp-3)}
.chat-hero-card{background:var(--sf);border:1px solid var(--sf3);border-radius:var(--r-md);padding:13px 14px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:var(--sp-4);transition:border-color .2s,transform .2s,box-shadow .25s,background .2s;color:var(--tx);font-family:inherit;width:100%}
.chat-hero-card:hover{border-color:var(--ac);transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(var(--ac-rgb),.35)}
.chat-hero-card:active{transform:translateY(0) scale(.99)}
.chat-hero-card-ico{font-size:19.5px;flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:var(--sf2);border-radius:var(--r-sm)}
.chat-hero-card-txt{flex:1;font-size:14.5px;font-weight:500;line-height:1.3}
.chat-hero-card-txt small{display:block;font-size:12.5px;color:var(--tx3);margin-top:2px;font-weight:400}

/* Desktop widget popup ≥1024px — chat diventa "floating bubble" ancorata
   in basso a destra (stile Intercom/Drift). Aperture: pop-up con scale+fade.
   Mobile <1024px resta full-screen slide-up come oggi. */
@media (min-width:1024px){
  .chat-panel{top:auto;bottom:24px;right:24px;left:auto;width:380px;height:min(540px,calc(100dvh - 96px));border-radius:var(--r-xl);border:1px solid var(--sf3);box-shadow:0 25px 70px -15px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02);transform:translateY(16px) scale(.96);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .25s ease}
  .chat-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
  .chat-hero{padding:18px 16px;gap:var(--sp-4)}
  .chat-hero-logo{width:50px;height:50px;border-radius:var(--r-lg)}
  .chat-hero-title{font-size:19.5px}
  .chat-hero-sub{font-size:13.5px}
  .chat-hero-card{padding:11px 12px}
  .chat-hero-card-ico{width:28px;height:28px;font-size:17.5px}
}

/* ── PLAN DRAWER ── */
/* Fix UX 2026-05-15:
   - top:56px lascia visibile la topbar `.hdr` (Coach AI + menu utente)
   - .collapsed: drawer abbassato (mostra solo handle+tabs, ~120px). Drag-down minimize.
   - Tabs grandi card-like full-width invece di chips small allineate a sinistra.
*/
.plan-drawer{position:fixed;top:var(--topbar-h,56px);right:0;bottom:0;left:0;z-index:var(--z-drawer);display:flex;flex-direction:column;background:var(--bg);transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 -4px 20px rgba(0,0,0,.3);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.plan-drawer.open{transform:translateY(0)}
.plan-drawer.collapsed{transform:translateY(calc(100% - 140px))}
.plan-drawer-handle{padding:8px 0 4px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none;flex-shrink:0;-webkit-user-select:none;user-select:none}
.plan-drawer-handle:active{cursor:grabbing}
.plan-drawer-handle-bar{width:40px;height:4px;border-radius:2px;background:var(--sf4);transition:background .15s}
.plan-drawer-handle:hover .plan-drawer-handle-bar{background:var(--tx3)}
.plan-drawer-hdr{display:flex;align-items:stretch;gap:var(--sp-3);padding:8px 12px 12px 12px;border-bottom:1px solid var(--sf3);flex-shrink:0;background:var(--bg)}
.plan-drawer-tabs{display:flex;gap:var(--sp-4);flex:1;min-width:0;padding:var(--sp-2) 0}
/* Bold direction 2026-05-15: tab attivo è ELEVATED + GLOWING + bg gradient.
   Inactive subtle depth, hover lift leggero. Niente più flat boring.
   Pattern: card con accent-tinted gradient + colored glow box-shadow. */
.plan-drawer-tab{--glow:var(--ac-rgb);flex:1;min-width:0;padding:var(--sp-2) var(--sp-3) 3px;border-radius:var(--r-lg);border:1px solid var(--sf3);background:linear-gradient(180deg,var(--sf2),var(--sf));color:var(--tx2);font-size:12.5px;font-weight:700;font-family:'Barlow Semi Condensed',sans-serif;cursor:pointer;flex-shrink:1;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .35s ease,border-color .25s,color .2s,background .25s;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);line-height:1.2;text-transform:uppercase;letter-spacing:var(--ls-snug);overflow:hidden;isolation:isolate}
.plan-drawer-tab[data-tab="meal"]{--glow:var(--food-rgb)}
.plan-drawer-tab[data-tab="workout"]{--glow:var(--warm-rgb)}
.plan-drawer-tab[data-tab="stretch"]{--glow:var(--str-rgb)}
.plan-drawer-tab[data-tab="spesa"]{--glow:var(--shop-rgb)}
.plan-drawer-tab::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--ac);opacity:.3;transition:opacity .2s,box-shadow .25s;z-index:1}
.plan-drawer-tab[data-tab="meal"]::before{background:var(--food)}
.plan-drawer-tab[data-tab="workout"]::before{background:var(--warm)}
.plan-drawer-tab[data-tab="stretch"]::before{background:var(--str)}
.plan-drawer-tab[data-tab="spesa"]::before{background:var(--shop)}
/* Radial glow base — SEGUE il puntatore (mouse o dito) via --mx/--my set dal
   JS in coach/index.html (pointer-tracker che attacca a .plan-tile e
   .plan-drawer-tab). Default invisibile (opacity:0); diventa visibile su
   hover/.is-touched/.active. Stesso pattern di .plan-tile in home. */
.plan-drawer-tab::after{content:'';position:absolute;inset:0;background:radial-gradient(180px circle at var(--mx,50%) var(--my,100%),rgba(var(--glow),.22),rgba(var(--glow),.06) 40%,transparent 70%);opacity:0;transition:opacity .35s ease;z-index:0;pointer-events:none}
/* Active: ambient bottom-center FISSO (presente anche senza mouse) + radial
   follow circle sopra (segue mouse/dito). Due gradients sovrapposti. */
.plan-drawer-tab.active::after{background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(var(--glow),.2),rgba(var(--glow),.06) 40%,transparent 70%),radial-gradient(120% 80% at 50% 100%,rgba(var(--glow),.22) 0%,rgba(var(--glow),0) 70%);opacity:1}
.plan-drawer-tab .pdt-icon{font-size:19.5px;line-height:1;filter:grayscale(.5) brightness(.85);transition:filter .25s,transform .25s;position:relative;z-index:2}
.plan-drawer-tab .pdt-label{font-size:12.5px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;position:relative;z-index:2}
/* ACTIVE: lift + glow + bg gradient brighter + colored label */
.plan-drawer-tab.active{transform:translateY(-3px);color:var(--tx);background:linear-gradient(180deg,var(--sf),var(--sf2))}
.plan-drawer-tab.active::before{opacity:1;box-shadow:0 0 12px currentColor}
.plan-drawer-tab.active .pdt-icon{filter:grayscale(0) brightness(1);transform:scale(1.08)}
.plan-drawer-tab[data-tab="meal"].active{color:var(--food2,#d08668);border-color:rgba(var(--food-rgb),.5);box-shadow:0 8px 24px -6px rgba(var(--food-rgb),.45),0 0 0 1px rgba(var(--food-rgb),.15) inset}
.plan-drawer-tab[data-tab="workout"].active{color:var(--warm);border-color:rgba(var(--warm-rgb),.5);box-shadow:0 8px 24px -6px rgba(var(--warm-rgb),.45),0 0 0 1px rgba(var(--warm-rgb),.15) inset}
.plan-drawer-tab[data-tab="stretch"].active{color:var(--str);border-color:rgba(var(--str-rgb),.5);box-shadow:0 8px 24px -6px rgba(var(--str-rgb),.45),0 0 0 1px rgba(var(--str-rgb),.15) inset}
.plan-drawer-tab[data-tab="spesa"].active{color:var(--shop2,#7ebee0);border-color:rgba(var(--shop-rgb),.5);box-shadow:0 8px 24px -6px rgba(var(--shop-rgb),.45),0 0 0 1px rgba(var(--shop-rgb),.15) inset}
/* Hover/touched non-active: il radial nell'::after diventa visibile (segue il
   cursore via --mx/--my come la home). Lift + border tinted in più. NO bg
   gradient pesante: nasconderebbe il follow. Mobile usa .is-touched. */
@media(hover:hover){
  .plan-drawer-tab:not(.active):hover::after{opacity:1}
  .plan-drawer-tab:not(.active):hover{transform:translateY(-2px);border-color:rgba(var(--glow),.4);color:var(--tx);box-shadow:0 10px 24px -10px rgba(var(--glow),.45),0 0 0 1px rgba(var(--glow),.1) inset}
  .plan-drawer-tab:not(.active):hover::before{opacity:.9;box-shadow:0 0 10px rgba(var(--glow),.5)}
  .plan-drawer-tab:not(.active):hover .pdt-icon{filter:grayscale(.1) brightness(1)}
}
.plan-drawer-tab:not(.active).is-touched::after{opacity:1}
.plan-drawer-tab:not(.active).is-touched{transform:translateY(-1px);border-color:rgba(var(--glow),.4);color:var(--tx);box-shadow:0 10px 24px -10px rgba(var(--glow),.45),0 0 0 1px rgba(var(--glow),.1) inset}
.plan-drawer-tab:not(.active).is-touched::before{opacity:.9;box-shadow:0 0 10px rgba(var(--glow),.5)}
.plan-drawer-tab:not(.active).is-touched .pdt-icon{filter:grayscale(.1) brightness(1)}
.plan-drawer-tab:active{transform:translateY(-1px) scale(.98)}
/* Close X button — stile btn-cancel (Annulla): bg transparent, border tinted
   err, glyph rosso. Pattern UX coerente con i bottoni "Annulla" rossi outline.
   margin-block:4px nel drawer (allineamento ai tab annidati), min-height:42px
   nella chat (no stretch). Fix 2026-05-15. */
.plan-drawer-close{width:42px;min-height:42px;margin-block:4px;border-radius:var(--r-md);background:transparent;border:1px solid rgba(var(--err-rgb),.35);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--err);font-size:21.5px;font-weight:600;flex-shrink:0;transition:background .14s,color .14s,border-color .14s,transform .1s;line-height:1}
.plan-drawer-close:hover{background:rgba(var(--err-rgb),.08);color:var(--err)}
.plan-drawer-close:active{transform:scale(.95)}
.plan-drawer-frames{flex:1;overflow:hidden;position:relative}
.plan-drawer-frame{width:100%;height:100%;border:none;display:block;background:var(--bg)}
.plan-drawer-frame.hidden{display:none}
/* Riduce iframe in collapsed (no più scroll/click su content nascosto) */
.plan-drawer.collapsed .plan-drawer-frames{pointer-events:none;opacity:.3;transition:opacity .15s}

/* ── QUICK ACTIONS ── */
.quick-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:32px 20px;gap:var(--sp-5)}
.quick-label{font-size:12.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:var(--ls-wide);font-weight:600}
.quick-btns{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}
.quick-btn{padding:11px 18px;border-radius:var(--r-md);border:1px solid var(--sf3);background:var(--sf);color:var(--tx2);font-size:14.5px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .14s,border-color .14s,color .14s;display:flex;align-items:center;gap:var(--sp-3)}
.quick-btn:hover{background:var(--sf2);border-color:var(--sf4);color:var(--tx)}
/* ── MEASUREMENT VIEW ── */
.meas-view-date{font-size:12.5px;color:var(--tx3);text-align:center;margin-bottom:12px;text-transform:uppercase;letter-spacing:var(--ls-snug)}
.meas-view-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:16px}
.meas-view-item{background:var(--sf2);border-radius:var(--r-md);padding:10px 12px}
.meas-view-lbl{font-size:11.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:var(--ls-snug);font-weight:600;margin-bottom:4px}
.meas-view-val{font-size:18.5px;font-weight:700;color:var(--tx)}
.meas-view-unit{font-size:12.5px;color:var(--tx3);font-weight:400;margin-left:2px}

/* ── USER MENU BUTTON ── */
/* v9: nome utente nascosto dal button (era ridondante — Gabriele già nel
   greeting topbar + chat hero). Solo avatar + chevron. */
.user-menu-btn{display:flex;align-items:center;gap:var(--sp-3);background:var(--sf);border:1px solid var(--sf3);border-radius:var(--r-full);padding:5px;cursor:pointer;color:var(--tx2);font-size:14.5px;font-family:inherit;font-weight:500;transition:border-color .18s,background .18s;flex-shrink:0}
.user-menu-btn .user-name-sm{display:none}
.user-menu-btn:hover{border-color:var(--sf4);background:var(--sf2)}
.user-menu-btn.active{border-color:var(--ac)}
.user-avatar-sm{width:24px;height:24px;border-radius:50%;background:rgba(var(--ac-rgb),.12);border:1px solid rgba(var(--ac-rgb),.28);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:var(--ac2);font-family:'Barlow Semi Condensed',sans-serif;flex-shrink:0}
.user-name-sm{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chevron{width:14px;height:14px;stroke:var(--tx3);flex-shrink:0;transition:transform .22s ease}
.user-menu-btn.open .user-chevron{transform:rotate(180deg)}

/* ── MENU DRAWER ── */
.menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:var(--z-menu-overlay);display:none;opacity:0;transition:opacity .22s ease;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.menu-overlay.show{display:block;opacity:1}
.menu-drawer{position:fixed;top:0;right:0;bottom:0;width:264px;background:var(--sf);z-index:var(--z-menu-drawer);transform:translateX(100%);transition:transform .27s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;border-left:1px solid var(--sf3)}
.menu-drawer.open{transform:translateX(0)}
.menu-drawer-head{padding:26px 18px 18px;border-bottom:1px solid var(--sf3)}
.menu-drawer-avatar{width:46px;height:46px;border-radius:var(--r-lg);background:rgba(var(--ac-rgb),.1);border:1px solid rgba(var(--ac-rgb),.22);display:flex;align-items:center;justify-content:center;font-size:23.5px;font-weight:700;color:var(--ac2);font-family:'Barlow Semi Condensed',sans-serif;letter-spacing:var(--ls-tight);margin-bottom:10px}
.menu-drawer-name{font-size:18.5px;font-weight:700;color:var(--tx);font-family:'Barlow Semi Condensed',sans-serif;letter-spacing:var(--ls-snug);line-height:1}
.menu-drawer-sub{font-size:12.5px;color:var(--tx3);margin-top:8px;text-transform:uppercase;letter-spacing:var(--ls-wide)}
.menu-items{flex:1;padding:10px 8px;overflow-y:auto}
.menu-item{display:flex;align-items:center;gap:var(--sp-4);padding:12px 12px;border-radius:var(--r-md);cursor:pointer;color:var(--tx2);font-size:15.5px;font-weight:500;border:none;background:none;font-family:inherit;width:100%;text-align:left;transition:background .14s,color .14s}
.menu-item:hover{background:var(--sf2);color:var(--tx)}
.menu-item-icon{font-size:18.5px;width:26px;text-align:center;flex-shrink:0}
.menu-item.danger{color:var(--err)}
.menu-item.danger:hover{background:rgba(var(--err-rgb),.08);color:var(--err)}
.menu-divider{height:1px;background:var(--sf3);margin:6px 8px}

/* ── INTERACTIVE FX (spotlight, glow, shimmer, pulse) ── */
.plan-tile{--glow:var(--ac-rgb);--mx:50%;--my:50%;cursor:pointer;transition:border-color .25s ease,transform .25s ease,box-shadow .35s ease,background .25s ease}
.plan-tile.meal{--glow:var(--food-rgb)}
.plan-tile.work{--glow:var(--warm-rgb)}
.plan-tile.str{--glow:var(--str-rgb)}
.plan-tile.shop{--glow:var(--shop-rgb)}
.plan-tile::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(380px circle at var(--mx) var(--my),rgba(var(--glow),.18),rgba(var(--glow),.04) 35%,transparent 60%);opacity:0;transition:opacity .35s ease;z-index:0}
.plan-tile-head,.plan-tile-body,.plan-tile-cta,.plan-progress{position:relative;z-index:1}
.plan-tile::before{transition:width .25s ease,box-shadow .35s ease,opacity .25s ease;z-index:1}
@media(hover:hover){
  .plan-tile:hover::after{opacity:1}
  .plan-tile:hover{border-color:rgba(var(--glow),.45);box-shadow:0 0 0 1px rgba(var(--glow),.14),0 22px 48px -22px rgba(var(--glow),.55),0 0 60px -10px rgba(var(--glow),.18);transform:translateY(-2px);background:linear-gradient(180deg,rgba(var(--glow),.04),transparent 60%),var(--sf)}
  .plan-tile:hover::before{width:4px;box-shadow:0 0 18px 2px rgba(var(--glow),.6),0 0 36px 4px rgba(var(--glow),.25)}
}
.plan-tile.is-touched::after{opacity:1}
.plan-tile.is-touched{border-color:rgba(var(--glow),.45);box-shadow:0 0 0 1px rgba(var(--glow),.14),0 22px 48px -22px rgba(var(--glow),.55),0 0 60px -10px rgba(var(--glow),.18);transform:translateY(-1px);background:linear-gradient(180deg,rgba(var(--glow),.04),transparent 60%),var(--sf)}
.plan-tile.is-touched::before{width:4px;box-shadow:0 0 18px 2px rgba(var(--glow),.6),0 0 36px 4px rgba(var(--glow),.25)}

/* CTA shimmer sweep + lift */
.plan-tile-cta{position:relative;overflow:hidden;isolation:isolate;transition:background .14s,border-color .14s,color .14s,transform .14s,box-shadow .25s}
.plan-tile-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-110%);transition:transform .65s ease;pointer-events:none}
@media(hover:hover){
  .plan-tile-cta:hover:not(:disabled){transform:translateY(-1px)}
  .plan-tile-cta:hover:not(:disabled)::after{transform:translateX(110%)}
  .plan-tile-cta.primary:hover:not(:disabled){box-shadow:0 10px 24px -10px rgba(var(--glow),.65)}
}
.plan-tile-cta:active:not(:disabled){transform:translateY(0) scale(.98)}
.plan-tile .plan-tile-cta.primary{box-shadow:0 6px 18px -10px rgba(var(--glow),.55)}

/* Status "Pronto" pulsing dot */
.plan-tile-status.ok{display:inline-flex;align-items:center;gap:var(--sp-3)}
.plan-tile-status.ok::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ac2);box-shadow:0 0 0 0 rgba(var(--ac2-rgb),.6);animation:plan-dot-pulse 2.1s cubic-bezier(.4,0,.6,1) infinite;flex-shrink:0}
@keyframes plan-dot-pulse{0%{box-shadow:0 0 0 0 rgba(var(--ac2-rgb),.55)}70%{box-shadow:0 0 0 8px rgba(var(--ac2-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--ac2-rgb),0)}}

/* Home day card — spotlight + glow SEMPRE attivi, intensificati in hover/touch */
.home-day-card{--mx:50%;--my:50%;border-color:rgba(var(--ac-rgb),.32);box-shadow:0 22px 60px -28px rgba(var(--ac-rgb),.5),0 0 60px -10px rgba(var(--ac-rgb),.12);transition:border-color .35s ease,box-shadow .45s ease}
.home-day-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(540px circle at var(--mx) var(--my),rgba(var(--ac-rgb),.16),rgba(var(--ac-rgb),.04) 38%,transparent 62%);opacity:1;transition:background .25s ease;z-index:0}
.home-day-card>*{position:relative;z-index:1}
.home-day-card::before{animation:accent-breath 4.5s ease-in-out infinite;z-index:1}
@media(hover:hover){
  .home-day-card:hover{border-color:rgba(var(--ac-rgb),.45);box-shadow:0 24px 60px -22px rgba(var(--ac-rgb),.6),0 0 80px -10px rgba(var(--ac-rgb),.18)}
}
.home-day-card.is-touched{border-color:rgba(var(--ac-rgb),.45);box-shadow:0 24px 60px -22px rgba(var(--ac-rgb),.6),0 0 80px -10px rgba(var(--ac-rgb),.18)}
@keyframes accent-breath{0%,100%{opacity:.55;box-shadow:0 0 8px 0 rgba(var(--ac-rgb),.2)}50%{opacity:.95;box-shadow:0 0 22px 1px rgba(var(--ac-rgb),.55)}}

/* Light theme — stesso effetto calibrato per sfondo chiaro (meno saturazione, ombra ridotta) */
@media(prefers-color-scheme:light){
  .home-day-card{border-color:rgba(var(--ac-rgb),.28);box-shadow:0 18px 40px -22px rgba(var(--ac-rgb),.4),0 0 36px -10px rgba(var(--ac-rgb),.14)}
  .home-day-card::after{background:radial-gradient(540px circle at var(--mx) var(--my),rgba(var(--ac-rgb),.11),rgba(var(--ac-rgb),.03) 38%,transparent 62%)}
  .home-day-card:hover,
  .home-day-card.is-touched{border-color:rgba(var(--ac-rgb),.42);box-shadow:0 22px 50px -22px rgba(var(--ac-rgb),.5),0 0 56px -10px rgba(var(--ac-rgb),.22)}
}

/* Chat FAB idle ring + breath */
.chat-fab{isolation:isolate}
.chat-fab::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(circle,rgba(var(--ac-rgb),.45) 0%,transparent 65%);opacity:.7;animation:fab-breath 2.6s ease-in-out infinite;z-index:-1;pointer-events:none}
.chat-fab::after{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(var(--ac2-rgb),.7);animation:fab-ring 2.6s ease-out infinite;pointer-events:none}
@keyframes fab-breath{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.08);opacity:.8}}
@keyframes fab-ring{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.5);opacity:0}}
.chat-fab:hover::after{animation-duration:1.6s}

@media(prefers-reduced-motion:reduce){
  .plan-tile,.plan-tile::after,.plan-tile::before,.plan-tile-cta,.plan-tile-cta::after,.home-day-card,.home-day-card::after,.home-day-card::before,.chat-fab,.chat-fab::before,.chat-fab::after,.plan-tile-status.ok::before{animation:none!important;transition-duration:.05s!important}
  .plan-tile:hover,.plan-tile.is-touched,.plan-tile-cta:hover:not(:disabled){transform:none!important}
}

/* ════════════════════════════════════════════════════════════════════════════
   HOME REDESIGN v7 (PR home-widgets)
   Layout: Welcome → Chart con dropdown → Widget Oggi (3) → Piani 4 tile rich.
   Vars già definite in :root: --sp-1..5 (BKL-064), --r:14px (legacy).
   ──────────────────────────────────────────────────────────────────────────── */

/* Chart card: dropdown selettore metrica accanto al titolo */
.home-chart-title-wrap{display:flex;align-items:center;gap:var(--sp-3)}
.home-chart-select{
  appearance:none;-webkit-appearance:none;
  background:var(--sf2);border:1px solid var(--sf3);
  color:var(--tx);font-family:'Barlow Semi Condensed',sans-serif;
  font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-wide);
  padding:6px 26px 6px 10px;border-radius:var(--r-sm);cursor:pointer;line-height:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0L5 6L10 0Z' fill='%23777'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;
  transition:border-color .2s,background-color .2s;
}
.home-chart-select:hover{border-color:var(--sf4);background-color:var(--sf3)}
.home-chart-select:focus{outline:none;border-color:var(--ac)}
.home-chart-select option:disabled{color:var(--tx3)}

/* Section label per "Oggi" + "I tuoi piani" + altri. Visibility upgrade
   2026-05-15: era 11px tx3 (anonimo), ora 13px ac2 (verde brand) bold per
   spiccare sui due temi senza usare colori brutali. */
.home-section-label{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-size:16.5px;color:var(--ac2);
  text-transform:uppercase;letter-spacing:var(--ls-loose);font-weight:700;
}

/* Widget row "Oggi" — 3 widget Kcal/Workout/Stretch */
.home-widgets-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-4);
  flex-shrink:0;
}

/* Mobile only — margin laterale 14px (su desktop ≥760 il grid #homeArea
   con grid-column:1/-1 gestisce già l'allineamento full-width).
   IMPORTANTE: questa regola va DOPO la regola base per garantire override. */
@media(max-width:759px){
  .home-section-label{margin:14px 18px 8px}
  .home-widgets-row{margin:0 14px}
}
.home-widget{
  --glow:var(--food-rgb);--mx:50%;--my:50%;
  background:linear-gradient(180deg,var(--sf),var(--sf2));
  border:1px solid var(--sf3);
  border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-3);
  position:relative;overflow:hidden;cursor:pointer;
  transition:transform .25s cubic-bezier(.4,0,.2,1),
             border-color .25s,box-shadow .35s ease,background .25s;
  isolation:isolate;
  min-height:120px;
}
.home-widget.kcal{--glow:var(--food-rgb)}
.home-widget.workout{--glow:var(--warm-rgb)}
.home-widget.stretch{--glow:var(--str-rgb)}
.home-widget::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(var(--glow),.16),rgba(var(--glow),.04) 35%,transparent 60%);opacity:0;transition:opacity .35s ease;z-index:0}
.home-widget>*{position:relative;z-index:1}
@media(hover:hover){
  .home-widget:hover{transform:translateY(-2px);border-color:rgba(var(--glow),.45);box-shadow:0 18px 40px -18px rgba(var(--glow),.5),0 0 0 1px rgba(var(--glow),.12) inset;background:linear-gradient(180deg,rgba(var(--glow),.05),transparent 60%),var(--sf)}
  .home-widget:hover::after{opacity:1}
}
.home-widget.is-touched{transform:translateY(-1px);border-color:rgba(var(--glow),.45);box-shadow:0 18px 40px -18px rgba(var(--glow),.5);background:linear-gradient(180deg,rgba(var(--glow),.05),transparent 60%),var(--sf)}
.home-widget.is-touched::after{opacity:1}
.hw-hdr{display:flex;align-items:center;gap:var(--sp-3);color:var(--tx3)}
.hw-icon{font-size:14.5px;line-height:1}
.hw-label{font-family:'Barlow Semi Condensed',sans-serif;font-size:13.5px;font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--tx3)}
.hw-body{display:flex;flex-direction:column;flex:1;justify-content:center}
.hw-num{font-family:'Barlow Semi Condensed',sans-serif;font-size:23.5px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--tx);transition:font-size .15s}
.hw-num.small{font-size:15.5px}
.hw-num small{font-size:13.5px;font-weight:600;color:var(--tx3);margin-left:var(--sp-2)}
.hw-meta{font-size:11.5px;color:var(--tx3);margin-top:var(--sp-2);font-weight:500;line-height:1.3}
.hw-meta strong{color:rgba(var(--glow),1);font-weight:600}
.hw-foot{margin-top:auto}
.hw-progress{height:4px;background:var(--sf3);border-radius:var(--r-full);overflow:hidden}
.hw-progress-bar{height:100%;background:linear-gradient(90deg,rgba(var(--glow),1),rgba(var(--glow),.7));border-radius:var(--r-full);transition:width .8s cubic-bezier(.4,0,.2,1)}
.hw-cta{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  background:rgba(var(--glow),.12);
  border:1px solid rgba(var(--glow),.4);
  color:rgba(var(--glow),1);
  font-family:'Barlow Semi Condensed',sans-serif;
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-snug);
  padding:7px var(--sp-3);border-radius:var(--r-sm);
  cursor:pointer;transition:background .2s,transform .1s;
  width:100%;line-height:1;
}
.hw-cta:hover:not(:disabled){background:rgba(var(--glow),.22)}
.hw-cta:active:not(:disabled){transform:scale(.97)}
.hw-cta:disabled{opacity:.4;cursor:default}
.hw-cta .play{display:inline-block;font-size:10.5px;transform:translateY(-.5px)}

/* Plan-tile rich variant — info macro (settimana/streak/lista). Si abilita
   aggiungendo .has-mini al tile (così retrocompat con tile basic invariate). */
.plan-tile.meal{--glow:var(--food-rgb)}
.plan-tile.work{--glow:var(--warm-rgb)}
.plan-tile.str{--glow:var(--str-rgb)}
.plan-tile.shop{--glow:var(--shop-rgb)}
.plan-tile-mini{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.plan-tile-mini .pt-num{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-size:23.5px;font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--tx);
}
.plan-tile-mini .pt-num small{font-size:13.5px;font-weight:600;color:var(--tx3);margin-left:var(--sp-2)}
.plan-tile-mini .pt-label{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-size:11px;color:var(--tx3);text-transform:uppercase;letter-spacing:var(--ls-wide);font-weight:600;
}
.plan-tile-mini .pt-progress{height:4px;background:var(--sf3);border-radius:var(--r-full);overflow:hidden;margin-top:var(--sp-2)}
.plan-tile-mini .pt-progress-bar{
  height:100%;
  background:linear-gradient(90deg,rgba(var(--glow,29,158,117),1),rgba(var(--glow,29,158,117),.6));
  border-radius:var(--r-full);transition:width .8s cubic-bezier(.4,0,.2,1);
}

/* Mobile-only polish (≤600px) — chart header griglia 2×2 e footer in colonna.
   Desktop ≥601px resta invariato (flex row con bullet separator). */
@media(max-width:600px){
  .home-chart-header{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    column-gap:var(--sp-3);
    row-gap:var(--sp-3);
    align-items:center;
  }
  .home-chart-header-left{display:contents}
  .home-chart-title{grid-row:1;grid-column:1;justify-self:start}
  .home-chart-info-inline{grid-row:2;grid-column:1/-1;gap:var(--sp-3) var(--sp-4)}
  .home-chart-header-right{grid-row:1;grid-column:2;justify-self:end}
  .home-chart-select{padding:5px 22px 5px 8px;font-size:11.5px;width:78px;box-sizing:border-box}

  .home-footer{flex-direction:column;gap:var(--sp-3);text-align:center;margin:20px 14px 18px}
  .home-version::before{display:none}
  .home-disclaimer{margin-bottom:0}
}