:root{
  --bg:#050814;
  --bg-deep:#02040b;
  --surface:rgba(12,18,34,.82);
  --surface-strong:#0c1324;
  --surface-soft:rgba(20,30,52,.58);
  --line:rgba(148,163,184,.14);
  --line-strong:rgba(148,163,184,.24);
  --text:#f8fafc;
  --muted:#8fa1bf;
  --muted-2:#667795;
  --cyan:#45d7ff;
  --cyan-strong:#23bdf5;
  --violet:#8b7cff;
  --green:#42e6a4;
  --amber:#f7c96b;
  --danger:#fb7185;
  --shadow:0 28px 80px rgba(0,0,0,.34);
  --radius-xl:30px;
  --radius-lg:22px;
  --radius-md:16px;
}

*{box-sizing:border-box}
html{background:var(--bg-deep);color-scheme:dark}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(69,215,255,.12), transparent 34%),
    radial-gradient(circle at 88% 4%, rgba(139,124,255,.10), transparent 30%),
    linear-gradient(180deg,#040714 0%,#050814 46%,#02040b 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
.is-hidden{display:none!important}

.app-shell{
  width:min(1480px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:24px 28px max(24px,env(safe-area-inset-bottom));
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  position:relative;
  width:42px;height:42px;border-radius:15px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(69,215,255,.18),rgba(139,124,255,.16));
  border:1px solid rgba(130,220,255,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(22,154,210,.12);
}
.brand-mark::before{
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 20px rgba(69,215,255,.75);
}
.brand-copy strong{display:block;font-size:14px;letter-spacing:.22em;text-transform:uppercase}
.brand-copy span{display:block;margin-top:2px;color:var(--muted-2);font-size:12px}
.top-actions{display:flex;align-items:center;gap:10px}
.status-pill,.memory-link{
  min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:8px;background:rgba(11,17,31,.66);
  color:#d9e4f5;font-size:12px;font-weight:650;backdrop-filter:blur(18px);
}
.status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 14px rgba(66,230,164,.65)}
.memory-link{color:#a8dcff;transition:.2s ease}
.memory-link:hover{border-color:rgba(69,215,255,.34);background:rgba(24,50,72,.54);transform:translateY(-1px)}

.intro{margin:0 0 20px}
.intro h1{margin:0;font-size:clamp(28px,3vw,44px);letter-spacing:-.045em;line-height:1.02;font-weight:720}
.intro p{margin:9px 0 0;max-width:720px;color:var(--muted);font-size:14px;line-height:1.6}

.workspace{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(380px,.82fr);
  gap:18px;
  align-items:stretch;
}
.panel{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg,rgba(13,20,37,.92),rgba(7,12,24,.96));
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.035);
}

.vision-panel{min-height:640px}
.camera-stage{
  position:relative;
  min-height:500px;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#03060e;
}
.camera-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,16,.08) 55%,rgba(4,7,16,.72) 100%);
}
#camera,#visionOverlay{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)
}
#visionOverlay{pointer-events:none;z-index:2}
.camera-placeholder{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:42px;text-align:center;
  background:
    radial-gradient(circle at 50% 40%,rgba(69,215,255,.075),transparent 34%),
    linear-gradient(180deg,#0c1324,#070b15);
}
.placeholder-inner{max-width:420px}
.placeholder-orb{
  width:92px;height:92px;margin:0 auto 24px;border-radius:50%;position:relative;display:grid;place-items:center;
  border:1px solid rgba(130,220,255,.16);background:rgba(20,31,55,.68);box-shadow:inset 0 0 36px rgba(69,215,255,.05)
}
.placeholder-orb::before{content:"";width:24px;height:24px;border:2px solid #eaf7ff;border-radius:50%;box-shadow:0 0 0 7px rgba(69,215,255,.08),0 0 25px rgba(69,215,255,.16)}
.placeholder-inner h2{margin:0;font-size:20px;letter-spacing:-.025em}
.placeholder-inner p{margin:10px auto 0;color:var(--muted);font-size:14px;line-height:1.6}

.camera-hud{position:absolute;inset:0;z-index:5;pointer-events:none}
.hud-row{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;gap:12px}
.hud-chip{
  min-height:36px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.11);background:rgba(2,5,13,.58);backdrop-filter:blur(18px);
  color:#eef6ff;font-size:12px;font-weight:650;
}
.presence-dot{width:8px;height:8px;border-radius:50%;background:#64748b;transition:.25s ease}
.presence-dot[data-tone="scanning"]{background:var(--cyan);box-shadow:0 0 16px rgba(69,215,255,.8)}
.presence-dot[data-tone="recognized"]{background:var(--green);box-shadow:0 0 16px rgba(66,230,164,.8)}
.presence-dot[data-tone="warning"]{background:var(--amber);box-shadow:0 0 16px rgba(247,201,107,.65)}
.presence-dot[data-tone="danger"]{background:var(--danger);box-shadow:0 0 16px rgba(251,113,133,.65)}

.scan-line{
  position:absolute;z-index:4;left:8%;right:8%;height:1px;top:20%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(69,215,255,.85),transparent);
  box-shadow:0 0 22px rgba(69,215,255,.35);
  animation:scan 3.2s ease-in-out infinite;opacity:0;
}
.vision-panel[data-mode="scanning"] .scan-line,
.vision-panel[data-mode="enrolling"] .scan-line{opacity:1}
.vision-panel[data-mode="recognized"] .scan-line{opacity:0;animation:none}
@keyframes scan{0%,100%{top:18%;opacity:.28}50%{top:78%;opacity:.92}}

.identity-dock{
  position:relative;z-index:6;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  min-height:138px;padding:24px 26px 26px;
  border-top:1px solid var(--line);background:rgba(9,15,28,.92)
}
.identity-copy{min-width:0}
.identity-label{margin:0;color:var(--muted-2);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.identity-name{margin:7px 0 0;font-size:clamp(22px,2.4vw,32px);line-height:1.05;letter-spacing:-.035em;font-weight:720}
.identity-message{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.vision-panel[data-mode="recognized"] .identity-name{color:#effff8}
.vision-panel[data-mode="recognized"]{border-color:rgba(66,230,164,.20)}
.vision-panel[data-mode="recognized"] .camera-stage{box-shadow:inset 0 -80px 120px rgba(18,71,56,.08)}
.camera-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.btn{
  min-height:46px;border:0;border-radius:15px;padding:0 18px;font-weight:750;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s ease
}
.btn-primary{color:#021019;background:linear-gradient(135deg,#6be4ff,#38c8ff);box-shadow:0 12px 30px rgba(56,200,255,.20)}
.btn-primary:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn-secondary{color:#e5edf8;background:#172238;border:1px solid var(--line)}
.btn-secondary:hover{background:#1b2942;border-color:var(--line-strong)}
.btn-ghost{color:#a9bad2;background:transparent;border:1px solid var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.decision-panel{
  border-top:1px solid var(--line);padding:20px 24px 22px;background:rgba(9,15,28,.96)
}
.decision-panel.warning{background:linear-gradient(180deg,rgba(80,58,16,.16),rgba(9,15,28,.96))}
.decision-panel.info{background:linear-gradient(180deg,rgba(14,65,92,.15),rgba(9,15,28,.96))}
.decision-panel h3{margin:0;font-size:15px}
.decision-panel p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.enroll-grid{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:16px}
.field{
  width:100%;min-height:48px;border-radius:15px;border:1px solid var(--line);background:#070d1b;color:var(--text);padding:0 14px;outline:none;transition:.18s ease
}
.field::placeholder{color:#596985}
.field:focus{border-color:rgba(69,215,255,.55);box-shadow:0 0 0 3px rgba(69,215,255,.08)}
.consent{display:flex;align-items:flex-start;gap:10px;margin-top:13px;color:var(--muted);font-size:12px;line-height:1.5}
.consent input{margin-top:2px;accent-color:var(--cyan)}
.progress{margin-top:12px;border:1px solid var(--line);border-radius:13px;background:#070d1b;padding:11px 12px;color:#c9d7e9;font-size:12px}

.conversation-panel{
  min-height:640px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(12,18,34,.96),rgba(6,10,20,.98))
}
.conversation-head{
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 20px 18px;border-bottom:1px solid var(--line)
}
.assistant-identity{display:flex;align-items:center;gap:12px;min-width:0}
.bot-orb{
  width:44px;height:44px;border-radius:50%;position:relative;flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%,#9decff 0,#4bd9ff 18%,#2868d4 48%,#17132f 74%);
  box-shadow:inset -7px -8px 16px rgba(8,8,33,.38),0 0 24px rgba(69,215,255,.16)
}
.bot-orb::before,.bot-orb::after{content:"";position:absolute;border-radius:50%;inset:-5px;border:1px solid rgba(69,215,255,.18)}
.bot-orb::after{inset:-10px;border-color:rgba(139,124,255,.09);animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.96);opacity:.35}50%{transform:scale(1.04);opacity:.85}}
.assistant-copy strong{display:block;font-size:15px;letter-spacing:-.01em}
.assistant-copy span{display:block;margin-top:2px;color:var(--muted-2);font-size:12px}
.encounter-pill{flex:0 0 auto;border-radius:999px;background:#111c31;border:1px solid var(--line);padding:7px 10px;color:#90a2bf;font-size:11px}

.persona-panel{
  margin:16px 16px 0;padding:16px;border-radius:19px;border:1px solid rgba(139,124,255,.22);
  background:linear-gradient(135deg,rgba(34,38,70,.72),rgba(13,22,42,.82));box-shadow:inset 0 1px 0 rgba(255,255,255,.035)
}
.persona-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.persona-head h3{margin:0;font-size:14px}
.persona-head p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.5}
.persona-dismiss{border:0;background:transparent;color:#7889a5;font-size:12px;padding:2px 0}
.persona-form{display:grid;grid-template-columns:1fr;gap:12px;margin-top:14px}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.segmented label{position:relative}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented span{
  min-height:42px;border:1px solid var(--line);border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:#9fb0ca;background:rgba(4,9,19,.45);font-size:12px;font-weight:700;transition:.18s ease
}
.segmented input:checked+span{color:#f1f4ff;border-color:rgba(139,124,255,.48);background:rgba(88,75,190,.22);box-shadow:0 0 0 3px rgba(139,124,255,.06)}
.persona-actions{display:flex;gap:8px;align-items:center}
.persona-feedback{color:var(--muted);font-size:11px;min-height:16px}

.chat-log{
  flex:1;min-height:340px;max-height:560px;overflow-y:auto;padding:20px 18px 12px;scrollbar-width:thin;scrollbar-color:#26334d transparent
}
.chat-empty{height:100%;min-height:290px;display:grid;place-items:center;text-align:center;color:var(--muted-2);font-size:13px;padding:36px}
.message-row{display:flex;margin:0 0 12px;animation:message-in .22s ease both}
.message-row.user{justify-content:flex-end}
.message-row.assistant{justify-content:flex-start}
.message-bubble{max-width:88%;padding:11px 13px;border-radius:17px;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.message-row.user .message-bubble{color:#03111a;background:linear-gradient(135deg,#6de3ff,#39caff);border-bottom-right-radius:6px;font-weight:550}
.message-row.assistant .message-bubble{color:#eef5ff;background:#121d32;border:1px solid rgba(148,163,184,.10);border-bottom-left-radius:6px}
@keyframes message-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.composer-wrap{padding:12px 16px 16px;border-top:1px solid rgba(148,163,184,.08)}
.composer{display:grid;grid-template-columns:1fr auto;gap:8px;padding:7px;border-radius:18px;background:#08101f;border:1px solid var(--line);transition:.18s ease}
.composer:focus-within{border-color:rgba(69,215,255,.34);box-shadow:0 0 0 3px rgba(69,215,255,.05)}
.composer input{min-width:0;height:42px;border:0;background:transparent;color:var(--text);outline:none;padding:0 9px;font-size:13px}
.composer input::placeholder{color:#596985}
.send-btn{width:42px;height:42px;border-radius:13px;border:0;background:linear-gradient(135deg,#72e7ff,#35c4ff);color:#031019;display:grid;place-items:center;font-size:18px;font-weight:800;transition:.18s ease}
.send-btn:hover:not(:disabled){transform:translateY(-1px)}
.send-btn:disabled{background:#172238;color:#61708a;cursor:not-allowed}

.trust-strip{
  margin-top:16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:0 4px;color:#7183a0;font-size:11px
}
.trust-item{display:flex;align-items:center;gap:7px}
.trust-item::before{content:"";width:5px;height:5px;border-radius:50%;background:#354762}

@media (max-width:1080px){
  .workspace{grid-template-columns:1fr}.vision-panel,.conversation-panel{min-height:auto}.camera-stage{min-height:430px}.conversation-panel{min-height:600px}.chat-log{max-height:480px}
}
@media (max-width:720px){
  .app-shell{padding:16px 14px max(18px,env(safe-area-inset-bottom))}
  .topbar{margin-bottom:18px}.brand-copy span{display:none}.memory-link{padding:0 11px}.status-pill{display:none}
  .intro{margin-bottom:16px}.intro h1{font-size:30px}.intro p{font-size:13px}
  .workspace{gap:13px}.panel{border-radius:24px}
  .camera-stage{aspect-ratio:4/5;min-height:0}.identity-dock{align-items:stretch;flex-direction:column;padding:20px;gap:16px}.camera-actions{justify-content:stretch}.camera-actions .btn{flex:1}
  .decision-panel{padding:18px}.enroll-grid{grid-template-columns:1fr}.conversation-head{padding:17px}.chat-log{min-height:330px;padding:17px 14px 10px}.message-bubble{max-width:92%}
  .segmented{grid-template-columns:1fr}.persona-actions{flex-direction:column;align-items:stretch}.persona-actions .btn{width:100%}
  .trust-strip{padding:0 2px;gap:10px 16px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.scan-line,.bot-orb::after,.message-row{animation:none!important}.btn,.memory-link,.segmented span{transition:none!important}}