:root {
  --bg: #05060a;
  --bg-2: #080b14;
  --panel: rgba(16, 20, 34, 0.72);
  --line: rgba(120, 160, 255, 0.12);
  --text: #eaf2ff;
  --text-dim: #8ea0c8;
  --cyan: #38e1ff;
  --azure: #2f7bff;
  --violet: #7b5cff;
  --iris-core: #6ff0ff;
  --iris-mid: #2f7bff;
  --iris-edge: #10204f;
  --ok: #34f0c0;
  --warn: #ffcf5a;
  --err: #ff6b8a;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Colori dell'iride animabili: registrati come <color> per transizioni fluide */
@property --eye-glow  { syntax: "<color>"; inherits: true; initial-value: #8a5cff; }
@property --eye-ring-a{ syntax: "<color>"; inherits: true; initial-value: #2f7bff; }
@property --eye-ring-b{ syntax: "<color>"; inherits: true; initial-value: #7b5cff; }
@property --eye-accent{ syntax: "<color>"; inherits: true; initial-value: #7fd6ff; }


* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

.login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 24px;
  background: #05060a;
}
.login-screen[hidden] { display: none; }
.login-card {
  width: min(100%, 380px); padding: 30px;
  border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(16, 20, 34, .94), rgba(8, 11, 20, .96));
  box-shadow: var(--shadow);
}
.login-mark { margin-bottom: 24px; color: var(--text); font-size: 28px; letter-spacing: 5px; }
.login-mark span { color: var(--cyan); font-weight: 600; }
.login-card h1 { margin: 0; font-size: 24px; font-weight: 500; }
.login-subtitle { margin: 8px 0 24px; color: var(--text-dim); }
.login-card label { display: block; margin: 14px 0 7px; color: var(--text-dim); font-size: 13px; }
.login-card input {
  width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: rgba(4, 8, 18, .8); color: var(--text); font: inherit; outline: none;
}
.login-card input:focus { border-color: rgba(56, 225, 255, .6); box-shadow: 0 0 0 3px rgba(56, 225, 255, .1); }
.login-submit, .logout-btn {
  width: 100%; margin-top: 22px; padding: 12px 16px; border: 1px solid rgba(56, 225, 255, .4);
  border-radius: 10px; background: linear-gradient(120deg, var(--cyan), var(--violet));
  color: #07101d; font: inherit; font-weight: 600; cursor: pointer;
}
.login-error { margin: 14px 0 0; color: var(--err); font-size: 13px; }
.settings .logout-btn {
  display: block;
  width: max-content;
  min-height: 46px;
  margin: 28px auto 4px auto;
  padding: 11px 24px;
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(56, 225, 255, 0.42);
  color: var(--text);
  font-size: 14px;
}
.settings .logout-btn:hover {
  color: var(--cyan);
  border-color: rgba(56, 225, 255, 0.7);
  background: rgba(56, 225, 255, 0.08);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 760px;
  margin: 0 auto;
  z-index: 1;
}

/* ---------- Sfondo profondo ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 45% at 50% 22%, rgba(47, 123, 255, 0.12) 0%, transparent 60%),
    radial-gradient(50% 40% at 80% 80%, rgba(123, 92, 255, 0.10) 0%, transparent 60%),
    radial-gradient(45% 35% at 10% 90%, rgba(56, 225, 255, 0.06) 0%, transparent 60%),
    var(--bg);
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 14px) 20px 6px;
}
.wordmark {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 4px;
  color: var(--text);
  text-transform: none;
}
.wordmark__ai {
  font-weight: 600;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Indicatore stato server nella topbar */
.status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  margin-right: 14px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  user-select: none;
}
.status__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim);
  transition: background 0.3s, box-shadow 0.3s;
}
.status__label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: var(--text-dim);
}
.status.is-online .status__dot {
  background: var(--ok);
  box-shadow: 0 0 10px rgba(52, 240, 192, 0.7);
  animation: status-pulse 2.2s ease-in-out infinite;
}
.status.is-online .status__label { color: var(--ok); }
.status.is-offline .status__dot {
  background: var(--err);
  box-shadow: 0 0 10px rgba(255, 107, 138, 0.6);
}
.status.is-offline .status__label { color: var(--err); }
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.settings-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.settings-btn:hover { color: var(--cyan); border-color: rgba(56, 225, 255, 0.4); }
.settings-btn:active { transform: rotate(45deg); }

/* ---------- Stage: l'iride ---------- */
.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 4px;
  flex: 0 0 auto;
  transition: padding 0.4s ease;
}

.eye {
  --size: clamp(150px, 40vw, 230px);
  /* Palette di stato (transizioni fluide grazie a @property) */
  --eye-glow: #8a5cff;
  --eye-ring-a: #2f7bff;
  --eye-ring-b: #7b5cff;
  --eye-accent: #7fd6ff;
  --spin: 40s; /* piano (idle) */
  --circuit-uri: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.1%27%20stroke-linecap%3D%27square%27%20stroke-linejoin%3D%27miter%27%3E%3Cpath%20d%3D%27M141.8%2099.0%20L169.8%2098.3%20L168.2%2085.1%27%2F%3E%3Cpath%20d%3D%27M149.0%20113.7%20L162.2%20117.4%20L164.1%20107.9%27%2F%3E%3Cpath%20d%3D%27M140.3%20120.3%20L164.2%20132.3%20L169.5%20118.7%27%2F%3E%3Cpath%20d%3D%27M128.5%20129.1%20L148.2%20149.4%20L157.4%20138.4%27%2F%3E%3Cpath%20d%3D%27M119.8%20138.7%20L129.1%20156.7%20L138.0%20151.2%27%2F%3E%3Cpath%20d%3D%27M109.7%20140.1%20L116.1%20166.9%20L125.5%20163.9%27%2F%3E%3Cpath%20d%3D%27M102.5%20140.6%20L103.9%20164.4%20L92.0%20164.0%27%2F%3E%3Cpath%20d%3D%27M86.0%20142.1%20L79.5%20161.7%20L90.7%20164.3%27%2F%3E%3Cpath%20d%3D%27M76.4%20139.9%20L63.1%20162.4%20L55.0%20156.9%27%2F%3E%3Cpath%20d%3D%27M69.9%20133.5%20L52.5%20152.9%20L64.1%20161.3%27%2F%3E%3Cpath%20d%3D%27M63.3%20118.1%20L38.4%20130.4%20L34.8%20121.5%27%2F%3E%3Cpath%20d%3D%27M52.1%20112.8%20L39.3%20116.3%20L43.9%20128.2%27%2F%3E%3Cpath%20d%3D%27M59.3%2099.1%20L29.6%2098.4%20L30.5%2089.0%27%2F%3E%3Cpath%20d%3D%27M61.4%2088.7%20L35.2%2081.0%20L32.9%2092.1%27%2F%3E%3Cpath%20d%3D%27M61.5%2079.8%20L37.3%2067.0%20L42.7%2058.3%27%2F%3E%3Cpath%20d%3D%27M66.1%2069.8%20L48.7%2054.4%20L41.0%2065.0%27%2F%3E%3Cpath%20d%3D%27M76.3%2061.8%20L65.1%2043.6%20L77.3%2037.7%27%2F%3E%3Cpath%20d%3D%27M87.1%2059.2%20L80.4%2038.2%20L92.5%2035.6%27%2F%3E%3Cpath%20d%3D%27M98.7%2058.3%20L97.9%2031.6%20L111.8%2032.6%27%2F%3E%3Cpath%20d%3D%27M112.4%2054.2%20L118.3%2032.3%20L107.8%2030.3%27%2F%3E%3Cpath%20d%3D%27M126.7%2059.9%20L138.0%2042.8%20L146.0%2048.9%27%2F%3E%3Cpath%20d%3D%27M129.3%2071.7%20L145.2%2056.4%20L138.2%2050.1%27%2F%3E%3Cpath%20d%3D%27M136.0%2079.9%20L160.1%2066.4%20L152.0%2055.0%27%2F%3E%3Cpath%20d%3D%27M140.3%2086.6%20L163.1%2079.0%20L166.1%2092.2%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27white%27%3E%3Crect%20x%3D%27165.6%27%20y%3D%2782.5%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%27155.8%27%20cy%3D%2798.6%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%27161.5%27%20y%3D%27105.3%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%27155.6%27%20cy%3D%27115.6%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%27166.9%27%20y%3D%27116.1%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%27154.8%27%20y%3D%27135.8%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%27138.4%27%20cy%3D%27139.3%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%27135.4%27%20y%3D%27148.6%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%27122.9%27%20y%3D%27161.3%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2789.4%27%20y%3D%27161.4%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%27103.2%27%20cy%3D%27152.5%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%2788.1%27%20y%3D%27161.7%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%2782.8%27%20cy%3D%27151.9%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%2752.4%27%20y%3D%27154.3%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2761.5%27%20y%3D%27158.7%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%2761.2%27%20cy%3D%27143.2%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%2732.2%27%20y%3D%27118.9%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%2750.9%27%20cy%3D%27124.3%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%2741.3%27%20y%3D%27125.6%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%2745.7%27%20cy%3D%27114.6%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%2727.9%27%20y%3D%2786.4%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%2744.4%27%20cy%3D%2798.7%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%2730.3%27%20y%3D%2789.5%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%2748.3%27%20cy%3D%2784.8%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%2740.1%27%20y%3D%2755.7%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2738.4%27%20y%3D%2762.4%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2774.7%27%20y%3D%2735.1%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%2770.7%27%20cy%3D%2752.7%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%2789.9%27%20y%3D%2733.0%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%2783.7%27%20cy%3D%2748.7%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%27109.2%27%20y%3D%2730.0%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%27105.2%27%20y%3D%2727.7%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%27143.4%27%20y%3D%2746.3%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%27132.4%27%20cy%3D%2751.3%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%27135.6%27%20y%3D%2747.5%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Ccircle%20cx%3D%27137.3%27%20cy%3D%2764.1%27%20r%3D%271.6%27%2F%3E%3Crect%20x%3D%27149.4%27%20y%3D%2752.4%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%27163.5%27%20y%3D%2789.6%27%20width%3D%275.2%27%20height%3D%275.2%27%20rx%3D%271%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  position: relative;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  transition:
    width 0.5s ease, height 0.5s ease,
    --eye-glow 0.6s ease, --eye-ring-a 0.6s ease,
    --eye-ring-b 0.6s ease, --eye-accent 0.6s ease;
}

/* Stati: l'occhio cambia colore SOLO in base a cosa fa mAI
   (pensa / conclusione / allerta). A riposo e mentre si scrive resta il tema base. */
.eye[data-state="thinking"] {
  --eye-glow: #c86bff;
  --eye-ring-a: #7b5cff;
  --eye-ring-b: #d24bff;
  --eye-accent: #f0a6ff;
  --spin: 6s; /* veloce: sta ragionando */
}
.eye[data-state="conclusion"] {
  --eye-glow: #2ff0c0;
  --eye-ring-a: #26e0b0;
  --eye-ring-b: #4affd8;
  --eye-accent: #b8fff0;
  --spin: 22s; /* rallenta: ha concluso */
}
.eye[data-state="alert"] {
  --eye-glow: #ff5a7a;
  --eye-ring-a: #ff7a3c;
  --eye-ring-b: #ff466e;
  --eye-accent: #ffd0b0;
  --spin: 9s; /* deciso: allerta */
}

/* Bagliore diffuso dietro l'iride */
.eye__aura {
  position: absolute;
  width: 155%; height: 155%;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--eye-glow) 40%, transparent) 0%,
    color-mix(in srgb, var(--eye-ring-a) 22%, transparent) 34%,
    transparent 66%);
  filter: blur(10px);
  animation: aura-breathe 6s ease-in-out infinite;
}
@keyframes aura-breathe {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}

/* Onde che si propagano quando mAI pensa */
.eye__ripple {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--eye-glow) 60%, transparent);
  opacity: 0;
}
.eye[data-state="thinking"] .eye__ripple { animation: ripple 2.2s ease-out infinite; }
.eye[data-state="thinking"] .eye__ripple--2 { animation-delay: 1.1s; }
@keyframes ripple {
  0% { transform: scale(0.82); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Corpo dell'iride bionica: fondo nero-blu profondo con bordo tecnologico */
.iris {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #0a1233 0%,
      #060a22 40%,
      #03040f 72%,
      #010208 100%);
  box-shadow:
    inset 0 0 26px rgba(0, 0, 0, 0.7),
    inset 0 0 60px color-mix(in srgb, var(--eye-ring-a) 18%, transparent),
    0 0 46px color-mix(in srgb, var(--eye-glow) 40%, transparent);
  overflow: hidden;
}

/* Anelli-contorno fatti di trattini: fermi al centro, ruotano solo su se stessi (orario) */
.iris__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: 50% 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.iris__ring--outer {
  background: repeating-conic-gradient(from 0deg,
    var(--eye-ring-a) 0deg 2.2deg,
    transparent 2.2deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 84%, #000 86%, #000 99%, transparent 100%);
          mask: radial-gradient(circle, transparent 84%, #000 86%, #000 99%, transparent 100%);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--eye-ring-a) 70%, transparent));
  animation: spin var(--spin) linear infinite;
}
.iris__ring--mid {
  background: repeating-conic-gradient(from 1.5deg,
    var(--eye-ring-b) 0deg 1.4deg,
    transparent 1.4deg 4.4deg);
  -webkit-mask: radial-gradient(circle, transparent 68%, #000 70%, #000 80%, transparent 82%);
          mask: radial-gradient(circle, transparent 68%, #000 70%, #000 80%, transparent 82%);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--eye-ring-b) 65%, transparent));
  animation: spin calc(var(--spin) * 1.25) linear infinite;
}
.iris__ring--inner {
  background: repeating-conic-gradient(from 0deg,
    var(--eye-accent) 0deg 1deg,
    transparent 1deg 3deg);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%, #000 63%, transparent 65%);
          mask: radial-gradient(circle, transparent 52%, #000 54%, #000 63%, transparent 65%);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--eye-accent) 80%, transparent));
  animation: spin calc(var(--spin) * 0.85) linear infinite;
}

.iris__ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--eye-accent) 45%, transparent) 0deg 0.5deg,
    transparent 0.5deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 90%, #000 92%, #000 98%, transparent 100%);
          mask: radial-gradient(circle, transparent 90%, #000 92%, #000 98%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.iris__filaments {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 8deg,
    transparent 0deg,
    color-mix(in srgb, var(--eye-accent) 18%, transparent) 0.8deg,
    transparent 2.4deg);
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 55%, transparent 66%);
          mask: radial-gradient(circle, transparent 40%, #000 55%, transparent 66%);
  mix-blend-mode: screen;
}

/* Piste elettriche / circuito: ferme, si tingono col colore di stato */
.iris__circuit {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--eye-accent) 92%, white 8%) 0%,
      var(--eye-ring-a) 100%);
  -webkit-mask: var(--circuit-uri) center / contain no-repeat;
          mask: var(--circuit-uri) center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--eye-accent) 70%, transparent));
}
.eye[data-state="thinking"] .iris__circuit { animation: circuit-flicker 1.1s steps(6, end) infinite; }
@keyframes circuit-flicker {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.55; }
}

/* Nucleo luminoso attorno alla pupilla */
.iris__core {
  position: absolute;
  top: 50%; left: 50%;
  width: 46%; height: 46%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--eye-glow) 85%, white 10%) 0%,
    var(--eye-glow) 30%,
    color-mix(in srgb, var(--eye-glow) 40%, transparent) 60%,
    transparent 74%);
  box-shadow:
    0 0 26px color-mix(in srgb, var(--eye-glow) 75%, transparent),
    inset 0 0 20px rgba(0, 0, 0, 0.55);
  animation: core-glow 3.4s ease-in-out infinite;
}
@keyframes core-glow {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
.eye[data-state="thinking"] .iris__core { animation-duration: 1.3s; }

/* Pupilla nera: si dilata/contrae in base a cosa fa l'IA */
.iris__pupil {
  position: absolute;
  top: 50%; left: 50%;
  width: 28%; height: 28%;
  border-radius: 50%;
  background: radial-gradient(circle, #000 55%, #05010f 100%);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 16px rgba(0, 0, 0, 0.9),
    inset 0 0 0 2px color-mix(in srgb, var(--eye-accent) 65%, transparent),
    0 0 10px color-mix(in srgb, var(--eye-glow) 60%, transparent);
  transition: width 0.6s cubic-bezier(.2,.8,.2,1), height 0.6s cubic-bezier(.2,.8,.2,1);
  animation: pupil-idle 5s ease-in-out infinite;
}
@keyframes pupil-idle {
  0%, 100% { width: 28%; height: 28%; }
  50% { width: 25%; height: 25%; }
}
.eye[data-state="thinking"] .iris__pupil { animation: pupil-think 0.9s ease-in-out infinite; }
@keyframes pupil-think {
  0%, 100% { width: 16%; height: 16%; }
  50% { width: 22%; height: 22%; }
}
.eye[data-state="conclusion"] .iris__pupil { width: 34%; height: 34%; animation: none; }

/* Scatto della pupilla quando inizio a scrivere (una sola volta, discreto) */
.eye.is-twitch .iris__pupil { animation: pupil-twitch 0.32s ease-out; }
@keyframes pupil-twitch {
  0%   { transform: translate(-50%, -50%) scale(1); }
  45%  { transform: translate(-50%, -50%) scale(0.9); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Reazione a un evento: dilatazione rapida + lampo dell'aura */
.eye.is-alert .iris__pupil { animation: pupil-alert 0.7s ease-out; }
@keyframes pupil-alert {
  0%   { transform: translate(-50%, -50%) scale(1); }
  25%  { transform: translate(-50%, -50%) scale(1.45); }
  55%  { transform: translate(-50%, -50%) scale(0.7); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.eye.is-alert .eye__aura { animation: aura-flash 0.7s ease-out; }
@keyframes aura-flash {
  0%, 100% { opacity: 0.72; }
  30% { opacity: 1; transform: scale(1.12); }
}

/* Linea di scansione che attraversa l'occhio mentre pensa */
.iris__scan {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--eye-accent) 90%, transparent) 50%, transparent);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 46%, transparent 50%);
          mask: radial-gradient(circle at 50% 50%, #000 46%, transparent 50%);
  opacity: 0;
}
.eye[data-state="thinking"] .iris__scan {
  opacity: 1;
  animation: scan 1.6s ease-in-out infinite;
}
@keyframes scan {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(180deg); }
}

/* Riflesso speculare */
.iris__glint {
  position: absolute;
  top: 30%; left: 34%;
  width: 12%; height: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.1) 55%, transparent 70%);
  filter: blur(1px);
}

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.stage__hint {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.4px;
  color: var(--text-dim);
  min-height: 18px;
  text-align: center;
  transition: opacity 0.3s;
}

/* Quando c'è conversazione, l'iride si fa più compatta e cede spazio alla chat */
.app.has-chat .stage {
  padding: 4px 0 2px;
  position: relative;
  z-index: 2; /* l'occhio resta sopra il velo di raccordo */
}
.app.has-chat .eye { --size: clamp(58px, 15vw, 86px); }
.app.has-chat .stage__hint { display: none; }

/* Velo di raccordo RIMOSSO: creava una fascia orizzontale con un bordo netto
   dietro l'occhio. Meglio sfondo pulito. */
.stage::after { display: none; }

/* ---------- Chat ---------- */
.chat {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  /* Dissolvenza ai bordi: i messaggi sfumano avvicinandosi all'occhio (in alto)
     e al composer (in basso), amalgamando la grafica senza bordi netti. */
  -webkit-mask: linear-gradient(to bottom,
    transparent 0, #000 56px,
    #000 calc(100% - 20px), transparent 100%);
          mask: linear-gradient(to bottom,
    transparent 0, #000 56px,
    #000 calc(100% - 20px), transparent 100%);
}
.chat::-webkit-scrollbar { width: 0; }

.msg {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 15.5px;
  line-height: 1.5;
  font-weight: 300;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: rise 0.24s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.msg--ai {
  align-self: flex-start;
  background: linear-gradient(180deg, rgba(30, 44, 82, 0.55), rgba(18, 26, 50, 0.55));
  border: 1px solid rgba(90, 140, 255, 0.18);
  border-bottom-left-radius: 5px;
  backdrop-filter: blur(6px);
}
.msg--user {
  align-self: flex-end;
  color: #eaf6ff;
  background: linear-gradient(135deg, rgba(47, 123, 255, 0.92), rgba(123, 92, 255, 0.88));
  border: 1px solid rgba(140, 170, 255, 0.35);
  border-bottom-right-radius: 5px;
  box-shadow: 0 6px 20px rgba(47, 123, 255, 0.25);
}
.msg--system {
  align-self: center;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
  max-width: 90%;
  padding: 2px 10px;
}
.msg--event {
  align-self: center;
  background: rgba(56, 225, 255, 0.08);
  border: 1px solid rgba(56, 225, 255, 0.28);
  color: #bff1ff;
  font-size: 12.5px;
  border-radius: 999px;
  padding: 6px 14px;
  letter-spacing: 0.3px;
}

/* ---------- Notifiche / eventi (a destra, all'altezza dell'occhio) ---------- */
.notifs-wrap {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 96px);
  right: 0;
  width: min(64%, 420px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  padding: 0 16px;
  z-index: 3;
  pointer-events: none;
}
.notifs-more {
  pointer-events: auto;
  border: 1px solid rgba(120, 160, 255, 0.22);
  background: rgba(16, 22, 40, 0.55);
  color: var(--text-dim);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.4px;
  padding: 2px 9px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: color 0.2s, border-color 0.2s;
}
.notifs-more:hover { color: var(--cyan); border-color: rgba(56, 225, 255, 0.4); }

.notifs {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  width: 100%;
  pointer-events: none;
}
.notifs:empty { display: none; }

/* Oltre 4 notifiche: pannello a altezza fissa con barra di scorrimento laterale */
.notifs.is-scroll {
  pointer-events: auto;
  overflow-y: auto;
  max-height: min(34dvh, 168px);
  padding-right: 10px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 92, 255, 0.55) transparent;
  -webkit-mask: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
          mask: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.notifs.is-scroll::-webkit-scrollbar { width: 5px; }
.notifs.is-scroll::-webkit-scrollbar-track { background: transparent; }
.notifs.is-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  box-shadow: 0 0 6px rgba(123, 92, 255, 0.5);
}

.notif {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 92%;
  padding: 5px 10px;
  border-radius: 11px;
  border-bottom-right-radius: 4px;
  background: linear-gradient(180deg, rgba(56, 225, 255, 0.10), rgba(47, 123, 255, 0.08));
  border: 1px solid rgba(56, 225, 255, 0.26);
  box-shadow: 0 4px 12px rgba(10, 20, 50, 0.30);
  backdrop-filter: blur(6px);
  animation: notifIn 0.26s ease;
}
@keyframes notifIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

.notif__dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(56, 225, 255, 0.85);
  animation: notifPulse 1.8s ease-in-out infinite;
}
@keyframes notifPulse { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1); } }

.notif__body { display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.25; }
.notif__label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: #d9f6ff;
}
.notif__meta {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  white-space: nowrap;
}
.notif__cam { color: #8fd0ff; }
.notif__cam::before { content: "◉ "; opacity: 0.8; }
.notif__time { color: var(--text-dim); }

/* ---------- Visione AI ---------- */
.cam-card__thumb { position: relative; }
.ai-badge {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--text-dim);
  background: rgba(10, 16, 30, 0.7);
  border: 1px solid rgba(120, 160, 255, 0.25);
  backdrop-filter: blur(4px);
}
.ai-badge.is-on {
  color: #0a1020;
  background: linear-gradient(120deg, var(--cyan), var(--ok));
  border-color: transparent;
}
.ai-soon {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ---------- Soggetti noti (persone/animali) ---------- */
.face-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 4px 0 12px;
}
.face-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: center;
}
.face-card__photo {
  position: relative;
  width: 62px; height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--azure), var(--violet));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 500; font-size: 22px;
}
.face-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.face-card__kind {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(6, 10, 20, 0.9);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.face-card__name {
  font-size: 13px; font-weight: 400; color: var(--text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.face-card__count { font-size: 11px; font-weight: 300; color: var(--text-dim); }
.face-card__del {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 107, 138, 0.14);
  color: var(--err);
  font-size: 15px; line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}
.face-card--add {
  border-style: dashed;
  border-color: rgba(120, 160, 255, 0.35);
  background: transparent;
  color: var(--text-dim);
  justify-content: center;
  min-height: 108px;
}
.face-card__plus { font-size: 30px; font-weight: 200; line-height: 1; color: var(--cyan); }
.face-card__addlabel { font-size: 12px; }

.face-card--creator {
  grid-column: 1 / -1;
  cursor: default;
  align-items: stretch;
  gap: 8px;
  padding: 12px;
}
.kind-seg { display: flex; gap: 6px; }
.kind-seg__btn {
  flex: 1 1 0;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(10, 14, 26, 0.5);
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
}
.kind-seg__btn.is-active {
  color: #0a1020;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  border-color: transparent;
  font-weight: 500;
}
.face-name {
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(10, 14, 26, 0.6);
  color: var(--text);
  font-size: 14px;
  width: 100%;
}
.face-name::placeholder { color: var(--text-dim); }
.creator-row { display: flex; gap: 8px; }
.creator-ok {
  flex: 1 1 auto;
  padding: 9px 14px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  color: #0a1020;
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
}
.creator-cancel {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 13.5px;
  cursor: pointer;
}

/* ---------- Lista eventi (pagina dedicata) ---------- */
.evlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.evrow {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.evrow__dot {
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(56, 225, 255, 0.7);
}
.evrow__dot.is-animal { background: var(--ok); box-shadow: 0 0 8px rgba(52, 240, 192, 0.7); }
.evrow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.evrow__label { font-size: 14.5px; font-weight: 400; color: var(--text); }
.evrow__meta { font-size: 12px; font-weight: 300; color: var(--text-dim); }
.evrow__meta .notif__cam { color: #8fd0ff; }
.evrow__time { flex: 0 0 auto; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.typing { display: inline-flex; gap: 5px; align-items: center; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(56, 225, 255, 0.7);
  animation: blink 1.2s infinite both;
}
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }

/* ---------- Composer ---------- */
.composer {
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 12px);
}
.composer__form { width: 100%; }
.composer__field {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 18px;
  border-radius: 26px;
  background: rgba(14, 20, 38, 0.7);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.composer__field:focus-within {
  border-color: rgba(56, 225, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(56, 225, 255, 0.08), 0 8px 30px rgba(47, 123, 255, 0.12);
}
.composer__input {
  flex: 1;
  font: inherit; font-size: 16px; font-weight: 300;
  color: var(--text);
  background: transparent;
  border: none; outline: none;
  padding: 8px 0;
}
.composer__input::placeholder { color: var(--text-dim); }

/* Pulsante invio: un "core" luminoso coerente con l'iride, non una freccia */
.composer__core {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #0b1836, #060c1e);
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s;
}
.composer__core::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(from 0deg, var(--cyan), var(--violet), var(--azure), var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 4s linear infinite;
}
.composer__core-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, var(--iris-core), var(--azure));
  box-shadow: 0 0 12px rgba(56, 225, 255, 0.8);
  transition: transform 0.15s;
}
.composer__core:active { transform: scale(0.9); }
.composer__core:disabled { opacity: 0.5; cursor: not-allowed; }
.composer__core:disabled .composer__core-dot { animation: pulse-dot 1s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { transform: scale(0.7); } 50% { transform: scale(1.1); } }

/* ---------- Voce: pulsante topbar (mAI parla) ---------- */
.voice-btn.is-on {
  color: var(--ok);
  border-color: rgba(52, 240, 192, 0.45);
  box-shadow: 0 0 12px rgba(52, 240, 192, 0.25);
}
.voice-btn:active { transform: scale(0.92); }

/* ---------- Voce: microfono nel composer ---------- */
.composer__mic {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.composer__mic:hover { color: var(--cyan); border-color: rgba(56, 225, 255, 0.4); }
.composer__mic:active { transform: scale(0.9); }
.composer__mic.is-listening {
  color: var(--err);
  border-color: rgba(255, 107, 138, 0.6);
  box-shadow: 0 0 0 0 rgba(255, 107, 138, 0.5);
  animation: mic-listen 1.4s ease-out infinite;
}
@keyframes mic-listen {
  0% { box-shadow: 0 0 0 0 rgba(255, 107, 138, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(255, 107, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 138, 0); }
}

/* ---------- Voce: controlli nel drawer ---------- */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  transition: background 0.2s;
}
.switch__slider::before {
  content: ""; position: absolute;
  height: 18px; width: 18px; left: 3px; top: 3px;
  background: var(--text); border-radius: 50%;
  transition: transform 0.2s;
}
.switch input:checked + .switch__slider {
  background: linear-gradient(120deg, var(--cyan), var(--violet));
}
.switch input:checked + .switch__slider::before { transform: translateX(18px); }

.voice-select {
  max-width: 190px;
  font: inherit; font-size: 13px;
  color: var(--text);
  background: rgba(14, 20, 38, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  outline: none;
}
.voice-test {
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.voice-test:hover { color: var(--cyan); border-color: rgba(56, 225, 255, 0.4); }

/* ---------- Hub: controlli nel drawer ---------- */
.hub-url {
  width: 190px; max-width: 55vw;
  font: inherit; font-size: 13px;
  color: var(--text);
  background: rgba(14, 20, 38, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
  outline: none;
}
.hub-url:focus { border-color: rgba(56, 225, 255, 0.45); }
.hub-msg { font-size: 12px; color: var(--text-dim); }

/* ---------- Dropdown voce elegante (custom, non nativo) ---------- */
.vsel { position: relative; min-width: 190px; max-width: 60vw; }
.vsel__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: inherit; font-size: 13px; color: var(--text);
  background: rgba(14, 20, 38, 0.7);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 12px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.vsel__btn:hover { border-color: rgba(56, 225, 255, 0.4); }
.vsel.is-open .vsel__btn { border-color: rgba(56, 225, 255, 0.5); box-shadow: 0 0 0 3px rgba(56, 225, 255, 0.08); }
.vsel__chev { color: var(--text-dim); transition: transform 0.2s; flex: 0 0 auto; }
.vsel.is-open .vsel__chev { transform: rotate(180deg); }
.vsel__list {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 100%; max-height: 240px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: linear-gradient(180deg, rgba(18, 24, 44, 0.98), rgba(12, 16, 30, 0.98));
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
  z-index: 60;
}
.vsel.is-open .vsel__list { opacity: 1; transform: translateY(0); pointer-events: auto; }
.vsel__opt {
  padding: 9px 12px; border-radius: 9px; font-size: 13px; color: var(--text);
  cursor: pointer; white-space: nowrap; transition: background 0.15s;
}
.vsel__opt:hover { background: rgba(56, 225, 255, 0.10); }
.vsel__opt.is-sel { background: linear-gradient(120deg, rgba(56, 225, 255, 0.18), rgba(123, 92, 255, 0.18)); }
.vhint { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }

/* ---------- Telecamere: voce compatta + pagina dedicata ---------- */
.nav-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; background: transparent; border: 0;
  color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.nav-row__label { font-weight: 400; }
.nav-row__chev { color: var(--text-dim); transition: color .2s, transform .15s; }
.nav-row:hover .nav-row__label { color: var(--cyan); }
.nav-row:hover .nav-row__chev { color: var(--cyan); transform: translateX(2px); }

#cameras { z-index: 61; }
.cam-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
.cam-card {
  text-align: left; padding: 0; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden; background: #000; cursor: pointer;
  transition: border-color .2s, transform .1s;
}
.cam-card:hover { border-color: rgba(56, 225, 255, 0.4); }
.cam-card:active { transform: scale(0.99); }
.cam-card__thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.cam-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-card__label {
  padding: 10px 12px; background: var(--panel); color: var(--text);
  font-size: 13px; font-weight: 500;
}
.cam-fs {
  position: absolute; inset: 0; background: #000;
  display: none; align-items: center; justify-content: center; z-index: 5;
}
.cam-fs.is-open { display: flex; }
.cam-fs__img { width: 100%; height: 100%; object-fit: contain; }
.cam-fs__close {
  position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.45); color: #fff;
  display: grid; place-items: center; cursor: pointer; z-index: 6;
}

/* ---------- Pagina Impostazioni (schermo intero) ---------- */
.settings {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(47, 123, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #0a0d18, var(--bg));
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
  overflow: hidden;
}
.settings.is-open { transform: translateY(0); pointer-events: auto; }
.settings__bar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(8, 11, 22, 0.6);
  backdrop-filter: blur(10px);
}
.settings__back {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255, 255, 255, 0.02); color: var(--text);
  cursor: pointer; transition: color 0.2s, border-color 0.2s, transform 0.15s;
}
.settings__back:hover { color: var(--cyan); border-color: rgba(56, 225, 255, 0.4); }
.settings__back:active { transform: scale(0.92); }
.settings__title { margin: 0; font-size: 18px; font-weight: 400; letter-spacing: 0.5px; }
.settings__spacer { margin-left: auto; }
.settings__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 18px 18px calc(env(safe-area-inset-bottom) + 28px);
  max-width: 720px; width: 100%; margin: 0 auto;
}
.settings__foot {
  text-align: center; color: var(--text-dim);
  font-size: 11.5px; letter-spacing: 0.5px; margin: 10px 0 0;
}
.settings .panel {
  background: linear-gradient(180deg, rgba(16, 20, 34, 0.66), rgba(12, 16, 30, 0.66));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 4px 16px 8px;
  margin-bottom: 16px;
}
.settings .panel__title { padding-top: 12px; }
.settings .row:last-child { border-bottom: none; }

/* Modalita compatta per display molto piccoli e uso senza mouse. */
@media (max-width: 420px) and (max-height: 500px) {
  .topbar { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 2px; }
  .wordmark { font-size: 18px; }
  .alarm { margin-left: 6px; }
  .alarm__seg { font-size: 11px; padding: 4px 7px; }
  .status { margin-right: 6px; padding: 4px 7px; }
  .status__label { font-size: 11px; }
  .settings-btn { width: 34px; height: 34px; }
  .stage { padding: 2px 0 0; }
  .eye { --size: clamp(72px, 24vw, 112px); }
  .stage__hint { display: none; }
  .notifs-wrap { display: none; }
  .chat { padding: 4px 12px; gap: 6px; }
  .msg { max-width: 90%; padding: 8px 11px; font-size: 15px; line-height: 1.25; }
  .composer { padding: 4px 10px max(6px, env(safe-area-inset-bottom)); }
  .composer__field { min-height: 42px; padding-left: 12px; }
  .composer__input { font-size: 16px; }
  .composer__core, .composer__mic { width: 34px; height: 34px; }
}

/* Ray-Ban Meta Display: modalità esplicita, essenziale e navigabile da tastiera/voce. */
html.is-display .app {
  width: 100%;
  max-width: 520px;
}
html.is-display .topbar {
  padding: max(10px, env(safe-area-inset-top)) 16px 6px;
}
html.is-display .wordmark { font-size: 24px; letter-spacing: 3px; }
html.is-display .alarm,
html.is-display #settings-btn,
html.is-display .notifs-wrap { display: none; }
html.is-display .status {
  margin-left: auto;
  margin-right: 0;
  padding: 7px 12px;
}
html.is-display .status__label { font-size: 15px; }
html.is-display .stage { padding: 8px 0 2px; }
html.is-display .eye { --size: clamp(88px, 25vw, 132px); }
html.is-display .stage__hint {
  display: block;
  margin-top: 8px;
  font-size: 16px;
}
html.is-display .chat {
  padding: 12px 16px 10px;
  gap: 10px;
  -webkit-mask: none;
          mask: none;
}
html.is-display .msg {
  max-width: 94%;
  padding: 11px 14px;
  font-size: 19px;
  line-height: 1.3;
}
html.is-display .composer { padding: 8px 12px max(12px, env(safe-area-inset-bottom)); }
html.is-display .composer__field {
  min-height: 58px;
  padding-left: 16px;
  border-radius: 18px;
}
html.is-display .composer__input { font-size: 19px; padding: 12px 0; }
html.is-display .composer__mic,
html.is-display .composer__core {
  width: 50px;
  height: 50px;
}
html.is-display .composer__mic svg,
html.is-display .composer__core svg { width: 24px; height: 24px; }
html.is-display button:focus-visible,
html.is-display input:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

/* ---------- Allarme domestico (topbar, segmentato) ---------- */
.alarm {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 14px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.alarm__seg {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-dim); font: inherit; font-size: 12px; font-weight: 500;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s;
}
.alarm__seg:hover { color: var(--text); }
.alarm.is-off .alarm__seg.is-active { background: rgba(255, 255, 255, 0.10); color: var(--text); }
.alarm.is-perimeter .alarm__seg.is-active {
  background: linear-gradient(120deg, rgba(255, 207, 90, 0.26), rgba(255, 180, 60, 0.26));
  color: var(--warn); box-shadow: 0 0 12px rgba(255, 207, 90, 0.22);
}
.alarm.is-full .alarm__seg.is-active {
  background: linear-gradient(120deg, rgba(255, 107, 138, 0.30), rgba(255, 80, 110, 0.30));
  color: var(--err); box-shadow: 0 0 12px rgba(255, 107, 138, 0.28);
}

/* ---------- Drawer Impostazioni ---------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.drawer.is-open { pointer-events: auto; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(3, 5, 12, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s;
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(420px, 88vw);
  background: linear-gradient(180deg, rgba(12, 16, 30, 0.96), rgba(8, 11, 22, 0.98));
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.drawer__title { margin: 0; font-size: 17px; font-weight: 400; letter-spacing: 0.5px; }
.drawer__close {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.03); color: var(--text-dim);
  cursor: pointer; transition: color 0.2s;
}
.drawer__close:hover { color: var(--cyan); }

.drawer__body { padding: 14px 20px 24px; overflow-y: auto; }
.panel { margin-bottom: 22px; }
.panel__title {
  margin: 0 0 10px; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--text-dim);
}
.panel__count { color: var(--cyan); font-weight: 600; }

.row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(120, 160, 255, 0.07);
  font-size: 14px;
}
.row__key { color: var(--text-dim); font-weight: 300; }
.row__val { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.row__val.is-alarm { color: var(--err); }

.dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim);
}
.dot.is-online { background: var(--ok); box-shadow: 0 0 10px rgba(52,240,192,0.7); }
.dot.is-offline { background: var(--err); box-shadow: 0 0 10px rgba(255,107,138,0.6); }

.devices { list-style: none; margin: 0; padding: 0; }
.device {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(120, 160, 255, 0.07);
}
.device__icon {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(47, 123, 255, 0.12);
  border: 1px solid rgba(90, 140, 255, 0.18);
  font-size: 18px;
}
.device__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.device__name { font-size: 14.5px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device__meta { font-size: 12px; color: var(--text-dim); font-weight: 300; }
.device__status {
  flex: 0 0 auto; font-size: 11px; font-weight: 500;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(52, 240, 192, 0.12); color: var(--ok);
  text-transform: capitalize;
}
.device__status.is-off { background: rgba(255, 107, 138, 0.12); color: var(--err); }