/* AMBITION web: styled after YouTube's desktop dark theme (home grid, theater watch page + live chat) */
:root { --bg:#0f0f0f; --panel:#272727; --panel-hover:#3f3f3f; --line:#303030; --text:#f1f1f1; --muted:#aaa; --accent:#3ea6ff; --accent-ink:#0f0f0f; --red:#f00; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font:14px/20px Roboto,"YouTube Sans","Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif; }
[hidden] { display:none !important; }
.muted { color:var(--muted); }
.row { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.btn { background:var(--panel); color:var(--text); border:0; border-radius:18px; padding:0 16px; height:36px; font:500 14px/20px inherit; font-family:inherit; font-weight:500; cursor:pointer; }
.btn:hover { background:var(--panel-hover); }
.btn.primary { background:#f1f1f1; color:#0f0f0f; }
.btn.big { font-size:18px; min-width:130px; height:56px; padding:0 26px; border-radius:18px; }
.btn.big small { font-weight:400; opacity:.7; margin-left:6px; }
.tag { align-self:flex-start; font-size:11px; line-height:16px; padding:0 8px; border-radius:8px; background:#3f3f3f; color:#e6e6e6; }
.tag[hidden] { display:none; }
.plain-link { font-size:12px; color:var(--accent); word-break:break-all; user-select:text; }
.links { margin:4px 0 0; padding-left:16px; font-size:13px; }
.links a { color:var(--accent); word-break:break-all; }
img.blank { background:#333 !important; }

/* ---- top bar ---- */
.top { position:sticky; top:0; z-index:40; display:grid; grid-template-columns:240px 1fr 240px; align-items:center; height:56px; padding:0 16px; background:var(--bg); }
.top-left { display:flex; align-items:center; gap:18px; }
.burger { width:20px; height:14px; border-top:2px solid #fff; border-bottom:2px solid #fff; position:relative; }
.burger::after { content:""; position:absolute; left:0; right:0; top:4px; border-top:2px solid #fff; }
.logo { display:flex; align-items:center; gap:4px; font-size:20px; font-weight:700; letter-spacing:-.5px; }
.logo-mark { width:28px; height:20px; border-radius:6px; background:var(--red); position:relative; }
.logo-mark::after { content:""; position:absolute; left:11px; top:5px; border-left:8px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.top-center { display:flex; justify-content:center; }
.chips { display:flex; align-items:center; gap:14px; min-width:320px; max-width:640px; height:40px; padding:0 18px; border:1px solid var(--line); border-radius:40px; background:#121212; }
.chip { font-size:13px; color:var(--muted); white-space:nowrap; }
.chip:empty { display:none; }
.chip.mic-on { color:#3ddc84; }
.chip.mic-error { color:#ff8a8a; }
.chip b { color:var(--text); }
.top-right { display:flex; justify-content:flex-end; }
.avatar { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#8e44ad; color:#fff; font-weight:500; flex:none; }
.avatar.big { width:40px; height:40px; }

/* ---- landing ---- */
.landing { text-align:center; margin-top:14vh; padding:0 16px; }
.landing h1 { font-size:32px; }
.start-btn { font:inherit; font-size:40px; font-weight:700; padding:36px 120px; margin:32px 0 16px; border-radius:60px; border:0; background:#f1f1f1; color:#0f0f0f; cursor:pointer; }
.start-btn:disabled { opacity:.5; }

/* ---- home: YouTube grid ---- */
.home { padding:0 24px 24px; }
.chipbar { display:flex; align-items:center; gap:12px; height:56px; }
.fchip { height:32px; line-height:32px; padding:0 12px; border-radius:8px; background:var(--panel); font-weight:500; }
.fchip.active { background:#f1f1f1; color:#0f0f0f; }
.chipbar .hint { color:var(--muted); font-size:14px; margin-left:8px; }
.video-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:32px 16px; margin-top:8px; }
@media (min-width:1700px) { .video-grid { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:1699px) { .vcard:nth-child(n+7) { display:none; } }
.vcard { position:relative; border-radius:12px; padding:6px 6px 10px; }
.vthumb { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16 / 9; background:#222; }
.vthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vdur { position:absolute; right:8px; bottom:8px; background:#000c; color:#fff; font-size:12px; font-weight:500; line-height:16px; padding:1px 4px; border-radius:4px; }
.vbadge { position:absolute; left:8px; top:8px; background:#cc0000; color:#fff; font-weight:500; font-size:12px; padding:1px 8px; border-radius:4px; }
.vinfo { display:flex; gap:12px; margin-top:12px; }
.vtxt { min-width:0; }
.vtitle { font-size:16px; line-height:22px; font-weight:700; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vch, .vmeta { color:var(--muted); font-size:14px; line-height:20px; }
.vcard.pending .vthumb img { filter:grayscale(1) brightness(.55); }
.vcard.pending { opacity:.75; }

/* ---- watch: theater + live chat ---- */
.watch { --arn:1.7778; --ar:16 / 9; display:grid; grid-template-columns:minmax(0, 1fr) 402px; gap:24px; padding:12px 24px 0; height:calc(100vh - 56px); overflow:hidden; }
.primary { min-width:0; overflow:hidden; }
.player-wrap { position:relative; width:min(100%, calc((100vh - 300px) * var(--arn))); }
.player { width:100%; aspect-ratio:var(--ar); background:#000; border-radius:12px; overflow:hidden; isolation:isolate; }
.player video, .player iframe { width:100%; height:100%; display:block; object-fit:contain; border:0; }
.watch-title { font-size:20px; line-height:28px; font-weight:700; margin:12px 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.owner-row { display:flex; align-items:center; gap:12px; }
.owner-meta { display:flex; flex-direction:column; min-width:0; flex:1; }
.owner-meta strong { font-size:16px; font-weight:500; }
.watch-actions { display:flex; gap:12px; }
.watch-actions .btn { min-width:130px; }

/* captures: chapters-style strip */
.chapters { margin-top:12px; }
.chapters-h { font-weight:700; font-size:16px; margin-bottom:8px; display:flex; gap:8px; align-items:center; }
.chapters-h .count { font-weight:400; color:var(--muted); font-size:13px; }
.chapters #captures-empty { margin:0; }
.captures { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.strip { display:flex !important; gap:12px; overflow-x:auto; overflow-y:hidden; padding-bottom:6px; }
.cap { display:flex; gap:12px; background:var(--panel); border-radius:12px; padding:8px; }
.strip .cap { flex:none; width:290px; height:92px; }
.cap img { width:128px; height:76px; object-fit:cover; border-radius:8px; flex:none; background:#222; }
.meta { display:flex; flex-direction:column; min-width:0; font-size:13px; line-height:18px; }
.meta .time { color:var(--accent); font-variant-numeric:tabular-nums; font-weight:500; }
.meta .label { font-size:14px; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta .kind, .meta .desc, .meta .extra { display:none; }
.cap.none .label { color:var(--muted); font-weight:400; }

/* right column */
.secondary { display:flex; flex-direction:column; gap:12px; min-height:0; height:100%; padding-bottom:12px; }
.wishbox { border:1px solid var(--line); border-radius:12px; overflow:hidden; flex:none; }
.wish-head { display:flex; align-items:center; gap:10px; width:100%; height:56px; padding:0 16px; background:var(--panel); color:var(--text); border:0; font:500 16px/20px inherit; font-family:inherit; font-weight:500; cursor:pointer; text-align:left; }
.wish-head b { background:#f1f1f1; color:#0f0f0f; border-radius:10px; min-width:22px; padding:0 7px; text-align:center; font-size:12px; line-height:20px; }
.chev { margin-left:auto; width:10px; height:10px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); transition:transform .2s; margin-top:-4px; }
.wishbox:not(.collapsed) .chev { transform:rotate(-135deg); margin-top:4px; }
.wish-body { max-height:34vh; overflow:auto; padding:10px 12px; }
.wishbox.collapsed .wish-body { display:none; }
.wish-body h2 { display:none; }
.cap.wish { background:#1c1c1c; padding:6px; }
.wish-body .cap img { width:64px; height:64px; }
.wish-body .meta .label { white-space:normal; font-weight:500; }
.livechat { flex:1; min-height:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.lc-head { display:flex; align-items:baseline; gap:8px; height:48px; padding:0 16px; line-height:48px; border-bottom:1px solid var(--line); font-weight:500; font-size:16px; }
.lc-head span { font-size:12px; color:var(--muted); font-weight:400; }
.chat-feed { flex:1; overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:10px; }
.lc-foot { padding:10px 16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
.msg { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:18px; }
.msg .av { width:24px; height:24px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:500; background:#8e44ad; color:#fff; }
.msg.agent .av { background:#cc0000; }
.msg.cap-msg .av { background:#2a5db0; }
.msg .mb { min-width:0; flex:1; }
.msg .who { color:var(--muted); font-weight:500; margin-right:8px; }
.msg.agent .who { color:#ff9c9c; }
.msg .txt { color:var(--text); white-space:pre-wrap; word-break:break-word; }
.msg .mini { display:flex; gap:10px; margin-top:6px; background:var(--panel); border-radius:10px; padding:6px; }
.msg .mini img { width:84px; height:50px; object-fit:cover; border-radius:6px; flex:none; background:#222; }
.msg .mini .t { color:var(--accent); font-size:12px; }
.msg .item { margin-top:6px; background:var(--panel); border-radius:10px; padding:8px 10px; display:grid; grid-template-columns:1fr auto; gap:0 10px; }
.msg .item .price { font-weight:700; color:#ffd479; }
.msg .item .plain-link { grid-column:1 / -1; }

/* ---- bubbles over the lower third of the player (captions / cards look) ---- */
#bubble-slot { position:absolute; left:4%; right:4%; bottom:54px; z-index:20; pointer-events:none; }
.bubble { pointer-events:auto; background:rgba(15,15,15,.86); color:#fff; font-size:21px; line-height:30px; padding:16px 24px; border-radius:12px; backdrop-filter:blur(4px); }
.bubble p { margin:0 0 6px; font-size:22px; font-weight:500; }
.bubble .btn { font-size:18px; height:48px; padding:0 22px; }
.bubble .links, .bubble .links a { font-size:17px; }
.bubble .links a { color:var(--accent); }
.chat-items { display:flex; flex-direction:column; gap:6px; margin-top:6px; }
.chat-item { display:grid; grid-template-columns:1fr auto; gap:0 12px; background:var(--panel); border-radius:10px; padding:6px 12px; font-size:17px; line-height:24px; }
.chat-item .price { font-weight:700; color:#ffd479; }
.chat-item .plain-link { grid-column:1 / -1; font-size:14px; }

/* voice caption bar */
#caption { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:22; display:flex; gap:10px; align-items:center; max-width:min(720px, 92%); background:#000c; border-radius:8px; padding:4px 14px; font-size:14px; }
#caption-text { color:#e6e6e6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:560px; }
#caption-text.interim { color:var(--muted); font-style:italic; }
#caption-input { background:transparent; border:0; border-left:1px solid #555; color:var(--text); font:inherit; padding:2px 8px; width:240px; outline:0; }

/* ---- dwell: ring fills while the gaze rests on an element ---- */
.dwell { position:relative; --dp:0deg; transition:transform .15s; }
.dwell.hot { transform:scale(1.03); }
.dwell::after { content:""; position:absolute; inset:-5px; border-radius:inherit; padding:4px; pointer-events:none;
  background:conic-gradient(var(--accent) var(--dp), transparent 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.vcard.dwell::after { inset:-3px; border-radius:16px; }

/* ---- overlays: setup, calibration, summary ---- */
.overlay { position:fixed; inset:0; z-index:50; background:#0f0f0ff2; display:flex; align-items:center; justify-content:center; }
.setup-box { text-align:center; max-width:420px; padding:0 16px; }
.calib { background:#0f0f0f; z-index:60; }
.calib-msg { position:absolute; top:34%; left:0; right:0; text-align:center; color:var(--muted); pointer-events:none; }
.calib-field { position:absolute; inset:0; }
.calib-pt { position:absolute; width:40px; height:40px; margin:-20px 0 0 -20px; border-radius:50%; border:2px solid #ffb347; background:#ff5a3c; color:#fff; font-weight:700; cursor:pointer; }
.calib-pt.check { background:#ffb347; border-color:#fff; animation:pulse 1s infinite; pointer-events:none; }
.calib-pt.auto { pointer-events:none; background:#ffb347; border:2px solid #fff; width:26px; height:26px; margin:-13px 0 0 -13px; }
.calib-pt.auto::after { content:""; position:absolute; inset:-30px; border-radius:50%; border:3px solid #ffb347; animation:shrink var(--dur,1.4s) linear forwards; }
@keyframes pulse { 50% { transform:scale(1.25); } }
@keyframes shrink { from { transform:scale(1.8); opacity:.4; } to { transform:scale(.55); opacity:1; } }
.calib-result { text-align:center; }
.calib-result .row { justify-content:center; }
.calib-skip { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); }
.summary { overflow:auto; align-items:flex-start; z-index:70; }
.summary-box { width:min(980px, 100%); padding:32px 16px; }
.summary-actions { display:flex; gap:16px; margin-bottom:18px; }
.summary-box h2 { margin:6px 0; font-size:20px; }
.say { font-size:18px; font-weight:500; }
.rec-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:12px; margin:16px 0; }
.rec { display:flex; gap:12px; background:var(--panel); border-radius:12px; padding:8px; }
.rec img { width:96px; height:96px; object-fit:cover; border-radius:8px; flex:none; background:#222; }
.rec .meta .desc { display:block; color:var(--muted); }
.rec .meta .time { font-size:13px; }

/* ---- gaze dot, badge, hud, toasts ---- */
#gaze-dot { position:fixed; left:-14px; top:-14px; width:28px; height:28px; border-radius:50%; z-index:100; pointer-events:none; opacity:0;
  background:radial-gradient(circle, #ff5a3c 0 4px, #ff5a3c33 5px 100%); border:2px solid #ff5a3c; }
#gaze-dot.active { border-color:#3cff9a; }
#gaze-dot::after { content:""; position:absolute; inset:-6px; border-radius:50%; background:conic-gradient(#ffb347 var(--p,0deg), transparent 0); -webkit-mask:radial-gradient(circle, transparent 15px, #000 16px); mask:radial-gradient(circle, transparent 15px, #000 16px); }
body.grabbing #gaze-dot { visibility:hidden; }
#gesture-badge { position:fixed; left:50%; top:64px; z-index:130; padding:6px 14px; border-radius:99px; font-weight:700; opacity:0; transform:translateX(-50%) translateY(-6px); transition:.2s; pointer-events:none; }
#gesture-badge.show { opacity:1; transform:translateX(-50%); }
#gesture-badge.ok { background:#1f6f43; color:#eaffef; }
#gesture-badge.no { background:#8a2b2b; color:#ffeaea; }
.hud { position:fixed; right:8px; top:60px; z-index:120; font:11px monospace; background:#000a; padding:3px 6px; border-radius:4px; white-space:pre; }
#toasts { position:fixed; right:16px; bottom:16px; z-index:200; display:grid; gap:8px; }
.toast { background:#2a1f1f; border:1px solid #6b3030; color:#ffd7d7; padding:8px 12px; border-radius:8px; font-size:13px; max-width:340px; }
#webgazerVideoContainer { position:fixed !important; left:12px !important; bottom:12px !important; top:auto !important; width:160px !important; height:120px !important; z-index:55 !important; pointer-events:none !important; border-radius:8px; overflow:hidden; opacity:.85; }
body:not(.debug) #webgazerVideoContainer { display:none !important; }
#webgazerVideoContainer video, #webgazerVideoCanvas { width:160px !important; height:120px !important; }
@media (max-width:1000px) { .watch { grid-template-columns:1fr; height:auto; overflow:visible; } .top { grid-template-columns:auto 1fr; } .top-right { display:none; } }