@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--canvas:#f6f6f8;--surface:#fff;--line:#e7e7ec;--text:#1d1d22;--muted:#6c6c78;--faint:#9b9ba7;--accent:#625df5;--accent-hover:#524cec;--accent-soft:#efeeff;--brand:#f5a665;--mono:'IBM Plex Mono',Consolas,monospace}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--canvas);color:var(--text);font:14px/1.5 'DM Sans','Segoe UI',sans-serif;display:flex;flex-direction:column}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none;padding:0}button:disabled{cursor:default}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
svg{width:18px;height:18px;flex:none}
kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--surface);font:500 11px var(--mono);color:var(--muted)}

/* Header */
header{height:72px;flex:none;display:flex;align-items:center;gap:16px;padding:0 28px;background:var(--surface);border-bottom:1px solid var(--line)}
.brandmark{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--brand);color:#2b1d14;font-weight:700;font-size:21px;letter-spacing:-2px;padding-right:2px;text-decoration:none;flex:none}
.title-block{min-width:0;flex:1}h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.subtitle{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.subtitle select{border:0;background:none;padding:0 2px;color:var(--muted);max-width:340px;cursor:pointer}.subtitle select:hover{color:var(--text)}
#saveState:not(:empty)::before{content:'·';margin-right:8px}
.header-actions{display:flex;gap:10px;flex:none}
.primary,.ghost{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;font-weight:600;white-space:nowrap}
.primary{background:var(--accent);color:#fff}.primary:hover:not(:disabled){background:var(--accent-hover)}.primary:disabled{background:#d9d8ef;color:#fff}.primary svg{fill:currentColor;width:16px;height:16px}
.ghost{border:1px solid var(--line);background:var(--surface)}.ghost:hover{background:var(--canvas)}
.primary.small{height:30px;padding:0 13px;font-size:13px}
.link{color:var(--muted);font-size:13px;font-weight:500}.link:hover{color:var(--text)}

/* Stage and player */
main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 400px}
.stage{padding:28px 36px;overflow:auto;display:flex;flex-direction:column;align-items:center}
.player{width:100%;max-width:1280px;background:#0c0c0f;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(20,20,40,.06),0 8px 30px rgba(20,20,40,.08)}
.player:fullscreen{max-width:none;border-radius:0;display:flex;flex-direction:column}.player:fullscreen .screen{flex:1;aspect-ratio:auto;max-height:none}
.screen{position:relative;aspect-ratio:16/9;max-height:calc(100vh - 250px);margin:auto}
video{display:block;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:#a3a3b0;background:#0c0c0f;pointer-events:none;padding:20px;text-align:center}
.big-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 24px rgba(0,0,0,.25);transition:transform .15s}.big-play:hover{transform:scale(1.06)}.big-play svg{width:32px;height:32px;fill:var(--text);margin-left:4px}.big-play[hidden]{display:none}
.controls{padding:14px 16px 10px;color:#ececf2}
.track{position:relative;height:22px}
#seek{position:absolute;inset:auto 0 0;width:100%;margin:0;height:6px;accent-color:var(--accent);cursor:pointer}
.pins{position:absolute;inset:0 0 9px;pointer-events:none}
.pin{position:absolute;top:2px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent);border:2px solid #0c0c0f;pointer-events:auto;transition:transform .12s}
.pin.range{height:6px;top:4px;margin-left:0;min-width:10px;border-radius:3px;border:0;background:rgba(122,117,255,.75)}
.pin.done{background:#55555f}.pin.range.done{background:rgba(120,120,130,.6)}
.pin:hover,.pin:focus-visible{transform:scale(1.25);z-index:2}.pin.range:hover{transform:scaleY(1.4)}
.pin-tip{display:none;position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:max-content;max-width:260px;padding:7px 10px;border-radius:8px;background:#fff;color:var(--text);font-size:12px;line-height:1.4;text-align:left;box-shadow:0 6px 20px rgba(0,0,0,.25);white-space:normal}
.pin-tip b{color:var(--accent);font-weight:600;margin-right:3px}
.pin:hover .pin-tip,.pin:focus-visible .pin-tip{display:block}.pin.range .pin-tip{left:0;transform:none}
.control-row{display:flex;align-items:center;gap:4px;margin-top:6px}
.ctl{height:34px;min-width:34px;display:grid;place-items:center;border-radius:8px;color:#ececf2}.ctl:hover{background:rgba(255,255,255,.1)}
.ctl svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#play svg{fill:currentColor;stroke:none;width:20px;height:20px}
.ctl.text{padding:0 10px;font-size:12px;font-weight:600}
.time{margin-left:8px;font:13px var(--mono);white-space:nowrap}.time .dim{color:#8d8d9b}.time small{margin-left:10px;color:#8d8d9b;font-size:11px}
.spacer{flex:1}
.below-player{width:100%;max-width:1280px;display:flex;align-items:center;justify-content:center;gap:24px;margin-top:22px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:600;font-size:15px;box-shadow:0 1px 2px rgba(20,20,40,.04)}.pill:hover{border-color:#cfcfda}
.pill svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}.pill kbd{margin-left:2px}
.shortcuts{margin:0;color:var(--faint);font-size:12px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}.shortcuts kbd{margin-left:6px}.shortcuts kbd+kbd{margin-left:0}

/* Sidebar */
.sidebar{background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.composer{margin:20px 20px 4px;border:1px solid var(--line);border-radius:22px;padding:8px 10px 8px 8px;transition:border-color .15s,box-shadow .15s,border-radius .15s}
.composer.open,.composer:focus-within{border:2px solid var(--accent);padding:7px 9px 9px 7px;border-radius:14px;box-shadow:0 0 0 4px var(--accent-soft)}
.composer-input{display:flex;gap:10px;align-items:flex-start}
.avatar{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:#ffe8d6;color:#c2622a;font-size:12px;font-weight:700}
.avatar.ai{background:var(--accent-soft);color:var(--accent);font-size:10px}
#noteText{flex:1;border:0;outline:0;resize:none;background:none;padding:3px 0;min-height:26px;line-height:1.45;font-size:14px}
#noteText::placeholder{color:var(--faint)}
.composer-tools{display:none;align-items:center;gap:8px;margin-top:10px;padding-left:2px}
.composer.open .composer-tools,.composer:focus-within .composer-tools{display:flex}
.stamp{height:28px;padding:0 9px;border-radius:7px;background:var(--accent-soft);color:var(--accent);font:500 12px var(--mono)}.stamp:hover{background:#e4e2ff}
#saveNote{height:34px;padding:0 15px;font-size:13px}
.range-editor{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.range-editor[hidden]{display:none}
.range-editor label{font-size:11px;color:var(--muted);font-weight:500}
.range-editor input{display:block;width:100%;margin-top:4px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;font:12px var(--mono);background:var(--canvas)}
.range-editor p{grid-column:1/3;margin:0;color:var(--faint);font-size:11px}
#error{margin:8px 2px 0;color:#d03b3b;font-size:12px}#error:empty{display:none}
.list-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 10px;margin:0 0 0;border-bottom:1px solid var(--line)}
.list-head h2{margin:0;font-size:16px;font-weight:600}
.filters{display:flex;gap:2px;background:var(--canvas);border-radius:9px;padding:3px}
.filters button{padding:4px 11px;border-radius:7px;font-size:12px;font-weight:500;color:var(--muted)}.filters button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(20,20,40,.08)}
.comments{flex:1;overflow:auto;padding:8px 8px 24px}
.comment{display:flex;gap:10px;padding:12px;border-radius:12px;position:relative;transition:background .15s}
.comment:hover{background:#fafafc}.comment.active{background:var(--accent-soft)}.comment.flash{animation:flash .9s}
@keyframes flash{0%,40%{background:#dcd9ff}}
.comment-main{flex:1;min-width:0}
.comment-meta{display:flex;align-items:center;gap:7px;min-height:26px;font-size:13px}
.comment-meta b{font-weight:600}
.ts{color:var(--accent);font-weight:600;font-size:13px}.ts:hover{text-decoration:underline}
.ago{color:var(--faint);font-size:12px;flex:1}
.resolve{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:var(--faint)}.resolve:hover{color:#2f9e63;background:#e9f7ef}
.resolve svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}
.comment.done .resolve{color:#fff}.comment.done .resolve svg circle{fill:#2f9e63;stroke:#2f9e63}.comment.done .resolve:hover{background:none}
.comment .text{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;cursor:pointer}
.comment.done .text{color:var(--muted)}
.comment-actions{display:flex;gap:14px;margin-top:6px;opacity:0;transition:opacity .12s}
.comment:hover .comment-actions,.comment:focus-within .comment-actions{opacity:1}
.reply{display:flex;gap:9px;margin-top:10px;padding-left:12px;border-left:2px solid var(--line)}
.reply b{font-size:13px;font-weight:600}.reply p{margin:1px 0 0;font-size:13px;color:#3d3d48;white-space:pre-wrap;overflow-wrap:anywhere}
.reply .avatar{width:22px;height:22px}
.edit-box{width:100%;margin-top:6px;border:2px solid var(--accent);border-radius:10px;padding:8px 10px;resize:vertical;outline:0;line-height:1.45}
.edit-row{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:8px}
.empty{text-align:center;padding:48px 24px;color:var(--muted)}
.empty-art{position:relative;width:170px;height:118px;margin:0 auto 22px}
.empty-art span{position:absolute;width:150px;height:62px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 2px 8px rgba(20,20,40,.05)}
.empty-art span::before{content:'';position:absolute;left:12px;top:12px;width:18px;height:18px;border-radius:50%;background:#ececf2;box-shadow:28px 0 0 -2px transparent}
.empty-art span::after{content:'';position:absolute;left:40px;right:16px;top:15px;height:7px;border-radius:4px;background:#ececf2;box-shadow:0 14px 0 #f1f1f5,-20px 28px 0 #f4f4f7}
.empty-art span:first-child{left:0;top:0}.empty-art span:last-child{right:0;bottom:0}
.empty strong{display:block;color:var(--text);font-size:16px;font-weight:600}
.empty p{margin:6px 0 0;font-size:13px}

/* Toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);display:flex;align-items:center;gap:16px;padding:11px 16px;border-radius:12px;background:#1d1d22;color:#fff;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:10;max-width:calc(100vw - 40px)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}.toast.error{background:#b42f2f}
.toast button{color:#b9b6ff;font-weight:600}.toast button[hidden]{display:none}

@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 340px}.stage{padding:20px}.time small{display:none}}
@media(max-width:820px){body{display:block}header{padding:0 16px}.header-actions .ghost{display:none}main{display:block}.sidebar{border-left:0;border-top:1px solid var(--line)}.comments{overflow:visible}.shortcuts{display:none}.screen{max-height:none}}
.reply-meta{display:flex;align-items:baseline;gap:7px}.reply-meta .ago{flex:none}
.reply+.reply{margin-top:8px}.reply-box{margin-top:8px}

/* Header actions: add video, agent connection and the more menu */
.ghost svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;width:16px;height:16px}
.icon-only{width:38px;padding:0;justify-content:center}.icon-only svg{fill:currentColor;stroke:none}
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:250px;max-width:320px;padding:6px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 32px rgba(20,20,40,.14);z-index:20}
.menu[hidden]{display:none}
.menu button{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:8px;font-size:13px;font-weight:500}.menu button:hover{background:var(--canvas)}
.menu button[hidden]{display:none}
.menu .danger{color:#c03535}
.menu p{margin:4px 11px 8px;color:var(--muted);font-size:12px;line-height:1.5}
#agentBtn .dot{display:none;width:8px;height:8px;border-radius:50%;background:#2fae66}
#agentBtn.live .dot,#agentBtn.waiting .dot{display:inline-block}
#agentBtn.waiting .dot{background:#e8a23b;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){#agentBtn.waiting .dot{animation:none}}

/* The player asks for the file when the browser does not have it (yet) */
.gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;text-align:center;color:#ececf2;background:radial-gradient(circle at 50% 40%,#1d1c2b,#0c0c0f 70%)}
.gate[hidden]{display:none}
.gate strong{font-size:20px;font-weight:600}
.gate p{margin:0 0 8px;max-width:440px;color:#a9a9b8;font-size:14px}
.gate .primary{height:44px;padding:0 22px;font-size:15px;max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* Add a video */
.dialog{border:0;border-radius:16px;padding:24px;width:min(440px,calc(100vw - 32px));box-shadow:0 24px 60px rgba(20,20,40,.25)}
.dialog::backdrop{background:rgba(20,20,30,.45)}
.dialog h2{margin:0;font-size:18px;font-weight:600}
.dialog-note{margin:4px 0 14px;color:var(--muted);font-size:13px}
.file-chip{margin:0 0 14px;padding:8px 11px;border-radius:8px;background:var(--canvas);font:12px var(--mono);overflow-wrap:anywhere}
.dialog label{display:block;margin-bottom:12px;font-size:12px;font-weight:600;color:var(--muted)}
.dialog input,.dialog select{display:block;width:100%;margin-top:5px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:9px;font-size:14px;color:var(--text);background:var(--surface)}
.dialog small{display:block;margin-top:5px;font-weight:400;color:var(--faint)}
.dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:16px;margin-top:18px}
.drop-hint{position:fixed;inset:12px;display:grid;place-items:center;border:3px dashed var(--accent);border-radius:20px;background:rgba(98,93,245,.08);color:var(--accent);font-size:22px;font-weight:600;pointer-events:none;z-index:30}
.drop-hint[hidden]{display:none}
#videoSelect[hidden]{display:none}
#videoSelect[hidden]+#saveState::before{content:none}