/* JARVIS — stile della pagina */
  /* Font serviti dal sito (assets/vendor), senza chiamate a server esterni */
  @font-face{font-family:Inter;font-style:normal;font-weight:400 500;font-display:swap;
             src:url(vendor/inter-latin.woff2) format("woff2")}
  @font-face{font-family:Orbitron;font-style:normal;font-weight:500 700;font-display:swap;
             src:url(vendor/orbitron-latin.woff2) format("woff2")}
  :root{
    --bg1:#04060d; --bg2:#0b1733;
    --accent:#5ee7ff; --accent2:#8b7bff; --rec:#ff5c8a;
    --text:#e8f6ff; --muted:#7f9bb5;
    --panel:rgba(10,24,48,.78); --line:rgba(94,231,255,.32);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden}
  body{
    background:radial-gradient(ellipse at 50% 42%,var(--bg2) 0%,var(--bg1) 70%);
    color:var(--text);font-family:Inter,system-ui,sans-serif;
    -webkit-tap-highlight-color:transparent;
  }
  #c{position:fixed;inset:0;display:block;width:100%;height:100%;user-select:none}
  .grid{
    position:fixed;inset:0;pointer-events:none;
    background-image:linear-gradient(rgba(94,231,255,.05) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(94,231,255,.05) 1px,transparent 1px);
    background-size:42px 42px;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 15%,transparent 72%);
            mask-image:radial-gradient(ellipse at center,#000 15%,transparent 72%);
  }
  .hud{position:fixed;top:18px;left:20px;pointer-events:none}
  .hud h1{font-family:Orbitron,sans-serif;font-weight:700;font-size:20px;letter-spacing:.32em;color:var(--accent);
          text-shadow:0 0 14px rgba(94,231,255,.55)}
  .hud p{font-size:12px;color:var(--muted);margin-top:4px;letter-spacing:.06em}
  .status{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--text)}
  .dot{width:8px;height:8px;border-radius:50%;background:#4dffb0;box-shadow:0 0 10px #4dffb0;animation:pulse 1.6s infinite}
  .dot.sleep{background:var(--accent2);box-shadow:0 0 10px var(--accent2)}
  .dot.nobrain{background:#ffc35c;box-shadow:0 0 10px #ffc35c}
  @keyframes pulse{50%{opacity:.35}}
  .tele{position:fixed;top:18px;right:20px;text-align:right;font-size:11px;color:var(--muted);
        font-family:Orbitron,sans-serif;letter-spacing:.12em;line-height:1.9;pointer-events:none}
  .tele b{color:var(--accent);font-weight:500}

  #bubble{
    position:fixed;left:50%;top:20%;
    transform:translate(-50%,-100%) scale(.85);opacity:0;
    transition:opacity .25s ease,transform .3s cubic-bezier(.3,1.6,.5,1);
    max-width:min(400px,88vw);padding:14px 18px;border-radius:18px;
    background:var(--panel);border:1px solid var(--line);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 0 34px rgba(94,231,255,.16);
    font-size:16px;line-height:1.45;pointer-events:none;text-align:center;
  }
  #bubble.show{opacity:1;transform:translate(-50%,-100%) scale(1)}
  #bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:13px;height:13px;
    background:inherit;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
    transform:translateX(-50%) rotate(45deg)}
  #bubble.zz{font-family:Orbitron,sans-serif;letter-spacing:.2em;color:var(--accent2)}
  #bubble.listen{color:#7dffd0;font-style:italic}
  .caret{display:inline-block;width:7px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--accent);
         animation:pulse .7s infinite}
  #bubble.done .caret,#bubble.zz .caret,#bubble.listen .caret{display:none}
  .dots i{display:inline-block;width:8px;height:8px;margin:0 3px;border-radius:50%;background:var(--accent);
          animation:hop 1s infinite ease-in-out}
  .dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
  @keyframes hop{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}

  .hint{position:fixed;left:50%;bottom:142px;transform:translateX(-50%);font-size:12px;color:var(--muted);
        white-space:nowrap;pointer-events:none;opacity:.8}
  .controls{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);display:flex;flex-wrap:wrap;
            justify-content:center;gap:8px;width:calc(100% - 32px);max-width:760px}
  button{font:500 14px Inter,sans-serif;color:var(--text);cursor:pointer}
  .controls button{
    padding:9px 15px;border-radius:999px;border:1px solid var(--line);
    background:rgba(10,24,48,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    transition:background .2s,box-shadow .2s,transform .1s;
  }
  .controls button:hover{background:rgba(94,231,255,.14);box-shadow:0 0 18px rgba(94,231,255,.25)}
  .controls button:active{transform:scale(.95)}
  .controls button.on{border-color:var(--accent);color:var(--accent)}

  .chat{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);width:calc(100% - 32px);max-width:640px;
        padding:6px;border-radius:26px;background:var(--panel);border:1px solid var(--line);z-index:3;
        -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 30px rgba(94,231,255,.1)}
  .chat:focus-within{border-color:var(--accent);box-shadow:0 0 26px rgba(94,231,255,.25)}
  .chat .bar{display:flex;align-items:flex-end;gap:6px}
  .chat textarea{flex:1;min-width:0;height:40px;max-height:160px;resize:none;background:transparent;border:0;outline:0;color:var(--text);
        font:15px/1.4 Inter,sans-serif;padding:9px 4px}
  .chat textarea::placeholder{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .chips{display:flex;flex-wrap:wrap;gap:6px}
  .chips span{display:inline-flex;align-items:center;gap:6px;margin:2px 2px 6px;padding:4px 6px 4px 10px;border-radius:999px;font-size:12px;
        background:rgba(94,231,255,.1);border:1px solid var(--line);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chips button{border:0;background:transparent;color:var(--muted);font-size:12px;padding:0 4px}
  .icon{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid var(--line);background:rgba(94,231,255,.08);
        display:grid;place-items:center;font-size:17px;transition:background .2s,transform .1s}
  .icon:hover{background:rgba(94,231,255,.2)}
  .icon:active{transform:scale(.92)}
  .icon.send{background:var(--accent);color:#04121c;border-color:var(--accent);font-weight:700}
  .icon.rec{background:rgba(255,92,138,.25);border-color:var(--rec);animation:recp 1s infinite}
  @keyframes recp{50%{box-shadow:0 0 0 7px rgba(255,92,138,.18)}}

  .backdrop{z-index:5;position:fixed;inset:0;background:rgba(2,4,10,.6);opacity:0;pointer-events:none;transition:opacity .2s}
  .backdrop.open{opacity:1;pointer-events:auto}
  .panel{z-index:6;position:fixed;left:50%;top:50%;transform:translate(-50%,-46%);opacity:0;pointer-events:none;
         width:min(430px,92vw);padding:24px;border-radius:20px;background:#0a1830;border:1px solid var(--line);
         box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(94,231,255,.12);transition:opacity .2s,transform .25s}
  .panel.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}
  .panel{max-height:92vh;overflow-y:auto;color-scheme:dark}
  .panel h2{font-family:Orbitron,sans-serif;font-size:16px;letter-spacing:.14em;color:var(--accent)}
  .panel .sub{font-size:13px;color:var(--muted);margin:6px 0 18px}
  .panel label{display:block;font-size:13px;color:var(--text);margin-bottom:14px}
  .panel input[type=password],.panel input[type=text],.panel input[type=datetime-local],.panel select{
    display:block;width:100%;margin-top:6px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
    background:#061022;color:var(--text);font:14px Inter,sans-serif;outline:0}
  .panel input:focus,.panel select:focus{border-color:var(--accent)}
  .panel .row{display:flex;align-items:center;gap:8px;color:var(--muted)}
  .panel a{display:inline-block;font-size:13px;color:var(--accent);margin:-6px 0 16px;text-decoration:none}
  .panel a:hover{text-decoration:underline}
  .panel .msg{font-size:12px;line-height:1.5;padding:10px 12px;border-radius:10px;margin-bottom:14px;
              background:rgba(255,107,138,.08);border:1px solid rgba(255,107,138,.3);display:none}
  .panel .msg.show{display:block}
  .panel .note{font-size:12px;color:var(--muted);line-height:1.5;padding:10px 12px;border-radius:10px;
               background:rgba(255,195,92,.07);border:1px solid rgba(255,195,92,.22);margin-bottom:18px}
  .actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
  .actions button{padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:transparent}
  .actions button:hover{background:rgba(94,231,255,.1)}
  .actions .primary{background:var(--accent);color:#04121c;border-color:var(--accent)}
  .actions .primary:hover{background:#8ff0ff}

  @media (max-width:860px){
    .hint{display:none}
  }
  @media (max-width:560px){
    .tele{display:none}
    .controls{bottom:76px;gap:6px}
    .controls button{padding:8px 11px;font-size:13px}
  }
  .tele b.warn{color:#ffc35c}
  .panel details{margin-bottom:14px;font-size:13px;color:var(--muted)}
  .panel summary{cursor:pointer;margin-bottom:10px}
  .panel .links{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
  .panel .links a{margin:0 auto 0 0}
  .panel .links button{padding:6px 12px;border-radius:10px;border:1px solid var(--line);background:transparent;font-size:13px}
  .panel .two{display:flex;gap:10px}
  .panel .two label{flex:1;min-width:0}
  .rlist{list-style:none;margin-bottom:16px;max-height:34vh;overflow-y:auto}
  .rlist li{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(94,231,255,.14);font-size:14px}
  .rlist li div{flex:1;min-width:0;overflow-wrap:anywhere}
  .rlist small{display:block;color:var(--muted);font-size:12px}
  .rlist button{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent}
  .rlist .empty{color:var(--muted);font-size:13px;border:0}

  /* ---------- Pannello chat ---------- */
  .drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);display:flex;flex-direction:column;z-index:4;
          background:rgba(6,14,30,.94);border-left:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
          transform:translateX(102%);transition:transform .28s ease;color-scheme:dark}
  .drawer.open{transform:none;box-shadow:-20px 0 60px rgba(0,0,0,.45)}
  .drawer header{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .drawer header h2{flex:1;min-width:0;font:500 14px Orbitron,sans-serif;letter-spacing:.08em;color:var(--accent);
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
  .drawer header button{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;font-size:15px}
  .drawer header button:hover,.drawer header button.on{background:rgba(94,231,255,.14);border-color:var(--accent)}
  .dhist{display:none;padding:10px 14px;border-bottom:1px solid var(--line);max-height:46vh;overflow-y:auto}
  .dhist.open{display:block}
  .dhist .rlist{max-height:none;margin-bottom:10px}
  .dhist [data-open]{cursor:pointer}
  .dhist li.cur [data-open]{color:var(--accent)}
  button.danger{padding:6px 12px;border-radius:10px;border:1px solid rgba(255,107,138,.45);background:transparent;color:#ff8fa6;font-size:13px}
  .dmsgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:14px}
  .dmsgs .empty{margin:auto;text-align:center;color:var(--muted);font-size:14px;line-height:1.6}
  .dfoot{padding:10px 12px 14px;border-top:1px solid var(--line)}
  .dfoot .chat{position:static;transform:none;width:100%;max-width:none;box-shadow:none}
  .m{max-width:100%;font-size:14px;line-height:1.55}
  .m.user{align-self:flex-end;max-width:88%;padding:9px 13px;border-radius:16px 16px 4px 16px;background:rgba(94,231,255,.13);
          border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
  .m.model .said{color:var(--accent);font-style:italic;overflow-wrap:anywhere}
  .m.model .said.working{color:var(--muted);animation:pulse 1.2s infinite}
  .m.err .said{color:#ff8fa6;font-style:normal}
  .m .files{font-size:12px;color:var(--muted)}
  .m .files:empty,.m .body:empty{display:none}
  .m .body{margin-top:8px;overflow-wrap:anywhere}
  .md p,.md ul,.md ol,.md pre,.md blockquote,.md .tw{margin:0 0 10px}
  .md h3,.md h4,.md h5,.md h6{font:500 15px Inter,sans-serif;color:var(--accent);margin:14px 0 6px}
  .md h3{font-size:17px}
  .md ul,.md ol{padding-left:22px}
  .md li{margin:2px 0}
  .md a{color:var(--accent)}
  .md code{font:13px/1.5 ui-monospace,Consolas,Menlo,monospace;background:#061022;padding:1px 5px;border-radius:5px}
  .md pre{position:relative;background:#040b18;border:1px solid var(--line);border-radius:10px;padding:30px 12px 12px;overflow-x:auto}
  .md pre code{background:none;padding:0;white-space:pre;display:block}
  .md pre .lang{position:absolute;top:7px;left:12px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
  .md pre .copy{position:absolute;top:5px;right:6px;padding:2px 9px;border-radius:7px;border:1px solid var(--line);background:#0a1830;font-size:11px}
  .md blockquote{border-left:3px solid var(--line);padding-left:10px;color:var(--muted)}
  .md hr{border:0;border-top:1px solid var(--line);margin:12px 0}
  .md .tw{overflow-x:auto}
  .md table{border-collapse:collapse;font-size:13px}
  .md th,.md td{border:1px solid rgba(94,231,255,.2);padding:5px 9px;text-align:left}
  .md th{color:var(--accent);font-weight:500}

  /* ---------- Agenda, profilo ---------- */
  .panel .tabs{display:flex;gap:6px;margin:12px 0 14px;flex-wrap:wrap}
  .panel .tabs button{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;font-size:13px}
  .panel .tabs button.on{border-color:var(--accent);color:var(--accent);background:rgba(94,231,255,.08)}
  .panel textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
        background:#061022;color:var(--text);font:14px/1.45 Inter,sans-serif;outline:0;resize:vertical}
  .panel input[type=time]{padding:6px 8px;border-radius:8px;border:1px solid var(--line);background:#061022;color:var(--text);font:14px Inter,sans-serif}
  .panel .two>input{flex:1;min-width:0;margin:0}
  .panel .two>button{flex:none;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:transparent}
  .panel details .rlist{max-height:22vh;margin-bottom:10px}
  .panel details label{color:var(--text)}
  .led{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted)}
  .led.up{background:#4dffb0;box-shadow:0 0 8px #4dffb0}
  .led.down{background:#ff5c8a;box-shadow:0 0 8px #ff5c8a}
  .rlist button:disabled{opacity:.4}

  @media (min-width:1180px){
    body.drawer-open .controls{left:calc((100% - 560px)/2);max-width:calc(100% - 560px - 32px)}
    body.drawer-open .tele,body.drawer-open .hint{display:none}
  }
  @media (max-width:1179px){
    body.drawer-open .controls,body.drawer-open .hint,body.drawer-open #bubble{display:none}
  }

  /* ---------- Telefono ---------- */
  /* iOS ingrandisce la pagina quando si tocca un campo con testo più piccolo di 16px, e la manda
     fuori dai bordi: sui dispositivi touch tutti i campi usano 16px, così lo zoom non scatta. */
  @media (max-width:860px), (pointer:coarse){
    .chat textarea,.panel input[type=password],.panel input[type=text],.panel input[type=datetime-local],
    .panel input[type=time],.panel select,.panel textarea{font-size:16px}
  }
  html,body{overflow-x:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .drawer{bottom:auto;height:100vh;height:100dvh}
  @media (max-width:560px){
    .panel{width:calc(100vw - 20px);padding:18px 16px;max-height:calc(100dvh - 20px)}
    .panel .two{flex-wrap:wrap}
    .panel .two label{flex:1 1 140px}
    .chat{bottom:10px;width:calc(100% - 20px)}
    .controls{bottom:74px;width:calc(100% - 20px)}
    .dfoot{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
    .dmsgs{padding:12px 10px}
    .m.user{max-width:94%}
  }