/* Lily Web: cuộc gọi video kiểu FaceTime, dọc 9:16, có chế độ Hologram */
:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --holo-size: 92;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; background: #000; color: #fff; overflow: hidden; overscroll-behavior: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ---- Gương mặt: khung 9:16 phủ kín màn hình (điện thoại cao hơn 9:16 -> cắt bớt hai bên) ---- */
.stage { position: fixed; inset: 0; overflow: hidden; background: #101312; }
.holo-stage { position: absolute; inset: 0; transition: transform .3s; }
.frame {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, calc(100dvh * 0.5625)); aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 3/4) { .frame { width: calc(100dvh * 0.5625); } }  /* máy tính: cột dọc giữa màn hình */
/* Lắc lư nhẹ (nhịp lấy từ video tham chiếu "face image/lac lu.MP4"): hoạt ảnh CSS do bộ dựng hình chạy,
   không tốn luồng chính (JS 120 lần/giây trước đây làm gói âm thanh bị trễ -> mất chữ trên iPhone).
   .sway: đung đưa + nghiêng quanh ngực (75% chiều cao); .rig: thở + phóng vừa đủ che mép (--cover, app.js). */
.frame .sway { position: absolute; inset: 0; transform-origin: 50% 75%; animation: lily-sway 12.6s linear infinite; will-change: transform; }
.frame .rig { position: absolute; inset: 0; animation: lily-breath 3.7s ease-in-out infinite; will-change: transform; }
@keyframes lily-breath {
  0%, 100% { transform: scale(var(--cover, 1.03)); }
  50% { transform: translateY(-0.25%) scale(calc(var(--cover, 1.03) * 1.004)); }
}
@keyframes lily-sway {
  0.00% { transform: translate(0.401%, 0.061%) rotate(0.847deg); }
  2.38% { transform: translate(0.838%, 0.101%) rotate(0.934deg); }
  4.76% { transform: translate(1.155%, 0.131%) rotate(0.866deg); }
  7.14% { transform: translate(1.285%, 0.150%) rotate(0.645deg); }
  9.52% { transform: translate(1.198%, 0.156%) rotate(0.302deg); }
  11.90% { transform: translate(0.901%, 0.148%) rotate(-0.107deg); }
  14.29% { transform: translate(0.441%, 0.127%) rotate(-0.515deg); }
  16.67% { transform: translate(-0.104%, 0.094%) rotate(-0.850deg); }
  19.05% { transform: translate(-0.640%, 0.053%) rotate(-1.054deg); }
  21.43% { transform: translate(-1.073%, 0.008%) rotate(-1.093deg); }
  23.81% { transform: translate(-1.328%, -0.039%) rotate(-0.959deg); }
  26.19% { transform: translate(-1.361%, -0.082%) rotate(-0.675deg); }
  28.57% { transform: translate(-1.170%, -0.117%) rotate(-0.292deg); }
  30.95% { transform: translate(-0.792%, -0.142%) rotate(0.125deg); }
  33.33% { transform: translate(-0.297%, -0.155%) rotate(0.504deg); }
  35.71% { transform: translate(0.224%, -0.154%) rotate(0.784deg); }
  38.10% { transform: translate(0.679%, -0.139%) rotate(0.922deg); }
  40.48% { transform: translate(0.991%, -0.112%) rotate(0.901deg); }
  42.86% { transform: translate(1.111%, -0.075%) rotate(0.737deg); }
  45.24% { transform: translate(1.029%, -0.031%) rotate(0.467deg); }
  47.62% { transform: translate(0.773%, 0.016%) rotate(0.149deg); }
  50.00% { transform: translate(0.401%, 0.061%) rotate(-0.157deg); }
  52.38% { transform: translate(-0.005%, 0.101%) rotate(-0.394deg); }
  54.76% { transform: translate(-0.366%, 0.131%) rotate(-0.523deg); }
  57.14% { transform: translate(-0.610%, 0.150%) rotate(-0.530deg); }
  59.52% { transform: translate(-0.697%, 0.156%) rotate(-0.426deg); }
  61.90% { transform: translate(-0.619%, 0.148%) rotate(-0.244deg); }
  64.29% { transform: translate(-0.403%, 0.127%) rotate(-0.033deg); }
  66.67% { transform: translate(-0.104%, 0.094%) rotate(0.155deg); }
  69.05% { transform: translate(0.203%, 0.053%) rotate(0.274deg); }
  71.43% { transform: translate(0.447%, 0.008%) rotate(0.296deg); }
  73.81% { transform: translate(0.567%, -0.039%) rotate(0.216deg); }
  76.19% { transform: translate(0.534%, -0.082%) rotate(0.052deg); }
  78.57% { transform: translate(0.350%, -0.117%) rotate(-0.155deg); }
  80.95% { transform: translate(0.052%, -0.142%) rotate(-0.357deg); }
  83.33% { transform: translate(-0.297%, -0.155%) rotate(-0.500deg); }
  85.71% { transform: translate(-0.620%, -0.154%) rotate(-0.544deg); }
  88.10% { transform: translate(-0.841%, -0.139%) rotate(-0.467deg); }
  90.48% { transform: translate(-0.905%, -0.112%) rotate(-0.273deg); }
  92.86% { transform: translate(-0.785%, -0.075%) rotate(0.009deg); }
  95.24% { transform: translate(-0.491%, -0.031%) rotate(0.331deg); }
  97.62% { transform: translate(-0.071%, 0.016%) rotate(0.630deg); }
  100.00% { transform: translate(0.401%, 0.061%) rotate(0.847deg); }
}
@media (prefers-reduced-motion: reduce) { .frame .sway, .frame .rig { animation: none; } }
.frame .rig > * {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
.frame img.still { z-index: 1; opacity: 0; }
.frame .blink { z-index: 3; clip-path: inset(0 0 60% 0); }   /* chớp mắt: chỉ phủ 40% trên, miệng không bị che */
.frame .blink img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.frame video { z-index: 4; opacity: 0; background: transparent; }
.frame video.trans { z-index: 6; }

/* ---- Tên + trạng thái trên cùng ---- */
.shade-top, .shade-bottom { position: fixed; left: 0; right: 0; pointer-events: none; }
.shade-top { top: 0; height: calc(160px + var(--safe-top)); background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.shade-bottom { bottom: 0; height: calc(220px + var(--safe-bottom)); background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5)); }
.top {
  position: fixed; left: 0; right: 0; top: calc(var(--safe-top) + 16px);
  text-align: center; pointer-events: none; text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.top .name { font-size: 30px; font-weight: 600; letter-spacing: .2px; pointer-events: auto; display: inline-block; padding: 0 12px; }
.top .sub { font-size: 15px; margin-top: 3px; opacity: .92; font-variant-numeric: tabular-nums; min-height: 18px; }

/* ---- Trước cuộc gọi ---- */
.lobby {
  position: fixed; left: 0; right: 0; bottom: 0; text-align: center;
  padding: 0 24px calc(var(--safe-bottom) + 30px);
}
.note { min-height: 20px; font-size: 15px; margin: 0 0 20px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.lobby-actions { display: flex; justify-content: space-around; max-width: 300px; margin: 0 auto; }
.act { background: none; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; }
.act small { font-size: 13px; }
.circle { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; }
.circle svg { width: 34px; height: 34px; }
.green { background: #34C759; }
.glass { background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.act:active .circle { filter: brightness(.85); }
.tip { font-size: 12.5px; line-height: 1.45; opacity: .88; max-width: 300px; margin: 20px auto 0; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* ---- Thanh điều khiển trong cuộc gọi ---- */
.controls {
  position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 22px); transform: translateX(-50%);
  display: flex; gap: 22px; padding: 14px 22px; border-radius: 36px;
  background: rgba(30,30,30,.42); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
  transition: opacity .25s, transform .25s;
}
.controls.away { opacity: 0; transform: translate(-50%, 18px); pointer-events: none; }
.ctl { width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0; color: #fff; background: rgba(255,255,255,.22); display: grid; place-items: center; }
.ctl svg { width: 27px; height: 27px; }
.ctl .slash { display: none; }
.ctl.on { background: #fff; color: #111; }
.ctl.on .slash { display: inline; }
.ctl.red { background: #FF3B30; }
.ctl:active { filter: brightness(.85); }

/* ---- Hologram: nền đen, Lily giữa màn hình, lật hình theo hộp phản chiếu ---- */
body.holo .stage { background: #000; }
body.holo .top, body.holo .controls, body.holo .shade-top, body.holo .shade-bottom, body.holo .lobby { display: none !important; }
body.holo .frame { width: min(100vw, calc(var(--holo-size) * 1dvh * 0.5625)); }
.holo-stage.flip-y { transform: scaleY(-1); }
.holo-stage.flip-x { transform: scaleX(-1); }
.holo-stage.flip-y.flip-x { transform: scale(-1, -1); }
.holo-hint {
  position: fixed; left: 0; right: 0; bottom: calc(var(--safe-bottom) + 26px); z-index: 20;
  text-align: center; color: #A9E4F2; font-size: 14px; padding: 0 16px; transition: opacity .6s;
}
.holo-hint p { margin: 4px 0; }
.holo-hint.fade { opacity: 0; pointer-events: none; }
.holo-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.holo-tools button { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.07); color: #fff; border-radius: 16px; padding: 9px 13px; font-size: 14px; }
.holo-tools button.on { background: #fff; color: #111; }

/* ---- Kích hoạt / thông báo ---- */
.sheet {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.card { width: 100%; max-width: 340px; background: rgba(28,28,30,.97); border-radius: 22px; padding: 22px; text-align: center; }
.card h2 { margin: 0 0 8px; font-size: 20px; }
.card p { margin: 0 0 10px; font-size: 15px; line-height: 1.45; opacity: .9; }
.code { font-size: 42px; font-weight: 700; letter-spacing: 8px; margin: 12px 0 16px; font-variant-numeric: tabular-nums; -webkit-user-select: text; user-select: text; }
.code:empty { display: none; }
.wide { width: 100%; border: 0; border-radius: 14px; padding: 14px; background: #34C759; color: #fff; font-size: 16px; font-weight: 600; }

/* ---- Bảng đo âm thanh (chạm tên "Lily" 5 lần) ---- */
.diag {
  position: fixed; left: 12px; right: 12px; top: calc(var(--safe-top) + 92px); z-index: 30; margin: 0;
  padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.62); color: #B9F6CA;
  font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; pointer-events: none;
}