/* Receptionist AR+AI demo — one deliberate dark HUD aesthetic.
   The camera feed is the whole point, so the chrome around it stays
   translucent and out of the way rather than following light/dark OS theme. */

:root{
  --ink:#f7fafc;
  --muted:#8fa3b8;
  --accent:#29aee4;
  --accent-ink:#f7fafc;
  --amber:#FFD60A;
  --danger:#FF5D5D;
  --glass-bg:rgba(7,27,46,.62);
  --glass-border:rgba(255,255,255,.14);
  --glass-bg-strong:rgba(3,16,28,.86);
}

*{box-sizing:border-box;}
/* .screen/.hud-layer/.panel all set their own `display`, which otherwise
   beats the browser's default [hidden]{display:none} rule — without this,
   toggling the `hidden` attribute from JS stops actually hiding anything. */
[hidden]{display:none !important;}
html,body{height:100%;}
body{
  margin:0;
  background:#03101c;
  color:var(--ink);
  font-family:"Manrope","Segoe UI",system-ui,sans-serif;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

#app{position:fixed;inset:0;overflow:hidden;}

#camera{
  position:fixed;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  background:#071b2e;
  transform:scaleX(var(--mirror,1));
}
#overlay{
  position:fixed;inset:0;
  width:100%;height:100%;
  pointer-events:none;
}
#snapshot{display:none;}

/* ---------------- start screen ---------------- */
.screen{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:radial-gradient(120% 120% at 50% 20%,#0d2540 0%,#03101c 70%);
}
.start-card{
  max-width:420px;
  width:100%;
  display:flex;flex-direction:column;gap:14px;
  text-align:left;
}
.eyebrow{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);font-weight:700;
}
.start-card h1{
  margin:0;font-size:clamp(24px,6vw,30px);line-height:1.2;
  text-wrap:balance;font-weight:600;
  font-family:"Poppins","Segoe UI",system-ui,sans-serif;
}
.start-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55;}
.fine-print{font-size:12px !important;color:#5b7286 !important;}

.btn{
  border:none;border-radius:10px;
  padding:13px 20px;
  font-size:15px;font-weight:600;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-primary{background:var(--accent);color:var(--accent-ink);margin-top:6px;}
.error-text{color:var(--danger);font-size:13.5px;margin:0;}

/* ---------------- default HUD (camera on, glasses off) ---------------- */
.hud-layer{position:fixed;inset:0;display:flex;flex-direction:column;pointer-events:none;}
.hud-layer > *{pointer-events:auto;}

.top-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:max(14px,env(safe-area-inset-top)) 16px 0;
}
.brand{
  font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:var(--ink);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  padding:6px 11px;border-radius:999px;
  backdrop-filter:blur(6px);
}
.top-bar-actions{display:flex;gap:8px;}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
}

.cta-wrap{
  margin-top:auto;
  display:flex;justify-content:center;
  padding:0 20px max(28px,env(safe-area-inset-bottom));
}
.btn-glasses{
  background:var(--glass-bg-strong);
  color:var(--ink);
  border:1px solid var(--accent);
  box-shadow:0 0 0 1px rgba(41,174,228,.15), 0 12px 30px -12px rgba(41,174,228,.5);
  backdrop-filter:blur(8px);
  padding:15px 24px;
}
.btn-glasses svg{color:var(--accent);}

/* ---------------- glasses HUD ---------------- */
.glasses-mode{justify-content:space-between;}

.glasses-frame{
  position:absolute;inset:0;
  pointer-events:none;
  /* Split into a top strip and a bottom strip (each scaled to full width
     independently) instead of one `cover`-scaled image — on a tall/narrow
     viewport, `cover` would blow the image up so much to fill the height
     that only a thin center sliver of width remains visible, losing the
     frame's actual curve. */
  background-image:
    url("assets/glasses-worn-top.webp"),
    url("assets/glasses-worn-bottom.webp");
  background-size:100% auto, 100% auto;
  background-position:top center, bottom center;
  background-repeat:no-repeat, no-repeat;
}

.status-bar{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;
  padding:max(12px,env(safe-area-inset-top)) 16px 0;
  font-family:"Roboto Mono","IBM Plex Mono",monospace;
  font-size:11.5px;
}
.status-chip{
  display:flex;align-items:center;gap:6px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  padding:5px 10px;border-radius:999px;
  backdrop-filter:blur(6px);
  color:var(--ink);
  letter-spacing:.03em;
}
.status-chip .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 6px var(--accent);
}
.status-batt{color:var(--amber);}
.status-right{display:flex;align-items:center;gap:8px;}
.status-clock{
  background:var(--glass-bg);border:1px solid var(--glass-border);
  padding:5px 10px;border-radius:999px;backdrop-filter:blur(6px);
}

.caption-strip{
  position:absolute;left:0;right:0;bottom:132px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:0 24px;
  z-index:1;
}
.caption-es{
  font-size:16px;font-weight:600;color:var(--ink);
  background:var(--glass-bg-strong);border:1px solid var(--glass-border);
  padding:8px 16px;border-radius:10px;
  text-align:center;backdrop-filter:blur(8px);
}
.caption-en{
  font-size:13px;color:var(--accent);font-weight:500;
}

/* ---------------- contextual panel ---------------- */
.panel{
  position:absolute;left:12px;right:12px;bottom:118px;
  max-height:46vh;
  display:flex;flex-direction:column;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:14px;
  backdrop-filter:blur(10px);
  overflow:hidden;
  z-index:2;
}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;
  font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:var(--accent);
  border-bottom:1px solid var(--glass-border);
  flex:0 0 auto;
}
.panel-close{
  background:none;border:none;color:var(--muted);font-size:15px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.panel-body{
  padding:12px 14px 14px;
  overflow-y:auto;
  font-size:13.5px;
  line-height:1.5;
  display:flex;flex-direction:column;gap:10px;
}

/* generic panel content pieces (built by app.js) */
.hint{color:var(--muted);}
.pulse-row{display:flex;align-items:center;gap:8px;color:var(--muted);}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.4s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.pulse-dot{animation:none;}}
@keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}

.result-card{display:flex;gap:12px;align-items:flex-start;}
.result-thumb{
  width:56px;height:56px;border-radius:8px;object-fit:cover;flex:0 0 auto;
  background:#0a1e30;border:1px solid var(--glass-border);
}
.result-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.result-name{font-weight:700;color:var(--ink);}
.result-detail{color:var(--muted);font-size:12.5px;}
.badge{
  align-self:flex-start;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;margin-top:2px;
}
.badge-known{background:rgba(41,174,228,.18);color:var(--accent);}
.badge-vip{background:rgba(255,214,10,.18);color:var(--amber);}
.badge-watchlist{background:rgba(255,93,93,.18);color:var(--danger);}

.list-row{
  display:flex;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.list-row:last-child{border-bottom:none;}
.list-row.is-match{
  background:rgba(41,174,228,.1);
  border-radius:8px;padding:8px 8px;
  margin:0 -8px;
}
.list-time{
  font-family:"Roboto Mono","IBM Plex Mono",monospace;
  color:var(--muted);font-size:12px;flex:0 0 auto;
}
.list-main{flex:1 1 auto;min-width:0;}
.list-title{font-weight:600;color:var(--ink);}
.list-sub{color:var(--muted);font-size:12px;}

.log-row{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.log-row:last-child{border-bottom:none;}
.log-thumb{
  width:34px;height:34px;border-radius:6px;object-fit:cover;flex:0 0 auto;
  background:#0a1e30;border:1px solid var(--glass-border);
}
.log-thumb.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);}
.log-thumb.placeholder svg{width:16px;height:16px;}

.alert-confirm{
  display:flex;align-items:center;gap:10px;
  color:var(--ink);font-weight:600;
}
.alert-confirm svg{color:var(--danger);flex:0 0 auto;}

.phrase-block{display:flex;flex-direction:column;gap:6px;}
.phrase-es{font-weight:700;color:var(--ink);font-size:14.5px;}
.phrase-en{color:var(--accent);}
.btn-secondary{
  align-self:flex-start;
  background:rgba(255,255,255,.08);
  color:var(--ink);
  border:1px solid var(--glass-border);
  border-radius:8px;
  padding:8px 14px;font-size:13px;font-weight:600;
  margin-top:4px;
}

/* ---------------- dock ---------------- */
.dock{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;gap:8px;
  padding:10px 12px max(14px,env(safe-area-inset-bottom));
}
.dock-btn{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  color:var(--ink);
  border-radius:12px;
  padding:9px 4px 8px;
  backdrop-filter:blur(6px);
}
.dock-btn svg{width:19px;height:19px;}
.dock-btn span{font-size:10px;font-weight:600;letter-spacing:.01em;white-space:nowrap;}
.dock-btn.is-active{
  background:rgba(41,174,228,.22);
  border-color:var(--accent);
  color:var(--accent);
}
.dock-btn-alert{color:var(--danger);}
.dock-btn-alert.is-active{background:rgba(255,93,93,.2);border-color:var(--danger);color:var(--danger);}

.exit-btn{
  width:auto;height:34px;padding:0 12px;border-radius:999px;
  gap:6px;font-size:12px;font-weight:600;
}
.exit-btn svg{width:14px;height:14px;}

/* ---------------- face bounding box (drawn on canvas, this is just for the fallback DOM box) ---------------- */
@media (max-width:380px){
  .dock-btn span{display:none;}
  .caption-es{font-size:14px;}
}