/* A single viewing surface. Monochrome controls use the shared graphite tokens. */
.lesson-watch{--watch-viewport:100dvh;container:lesson-watch / inline-size;margin:0 0 24px;min-width:0;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;scroll-margin-top:96px}
.watch-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--line);background:var(--card);position:relative;z-index:2;flex:none}
.watch-modes{display:flex;gap:4px;align-items:center;min-width:0}.watch-modes{padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.watch-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;font:inherit;font-size:14px;line-height:1.3;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.watch-toolbar svg{width:20px;height:20px;flex:none}.watch-modes button[aria-pressed=true]{background:var(--action);color:var(--on-action)}.watch-toolbar button:hover{background:var(--soft);color:var(--ink)}.watch-modes button[aria-pressed=true]:hover{background:var(--ink);color:var(--on-action)}.watch-toolbar button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.watch-toolbar button:disabled{opacity:.55;cursor:wait}
.watch-body{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;min-height:0;background:#101010}
.watch-video{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;overflow:hidden;background:#101010}
.watch-video .video-frame{border-radius:0;background:#101010;width:100%;aspect-ratio:16/9;height:auto}
.watch-wait{padding:24px;min-height:240px;text-align:center;color:#f3f3f1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.watch-wait h2,.watch-wait p{margin:0}.watch-wait svg{width:32px;height:32px}.watch-wait .btn{background:#f3f3f1;color:#191919}
.lesson-watch[data-watch-mode=chat] .watch-body{grid-template-columns:minmax(0,1fr) minmax(280px,320px)}
.lesson-watch[data-watch-mode=video] #lesson-chat{display:none!important}
.lesson-watch #lesson-chat{margin:0;border:0;border-left:1px solid var(--line);border-radius:0;background:var(--card);min-width:0;min-height:0;contain:size;display:flex;flex-direction:column;overflow:hidden;color:var(--ink)}
.watch-chat-loading{padding:20px;color:var(--muted)}
.lesson-watch .chat-head{padding:12px 16px;min-height:64px;flex:none}.lesson-watch .chat-head h2{font-size:16px;margin:0 0 4px}.lesson-watch .chat-head small{font-size:12px}.lesson-watch .chat-head .btn{padding:8px;min-width:44px}
.lesson-watch .chat-help{padding:8px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);flex:none}.lesson-watch .chat-help summary{list-style:revert;cursor:pointer;min-height:24px;line-height:24px}.lesson-watch .chat-help p{margin:8px 0;line-height:1.5}
.lesson-watch [data-chat-body]{display:flex;flex-direction:column;min-height:0;flex:1}.lesson-watch .chat-messages{height:auto;min-height:56px;flex:1;overflow:auto;overscroll-behavior:contain;padding:12px;scrollbar-gutter:stable}
.lesson-watch .chat-empty{padding:24px 8px;line-height:1.5;font-size:14px}.lesson-watch .chat-empty p{margin:8px 0}.lesson-watch .chat-pin{flex:none;max-height:100px;overflow:auto;padding:10px 16px}.lesson-watch .chat-pin p{font-size:13px;margin:4px 0}.lesson-watch .chat-pin strong{font-size:12px}
.lesson-watch .chat-mode{padding:8px 12px;margin:0;flex:none;font-size:12px;gap:8px}.lesson-watch .chat-mode select{font-size:14px;min-height:40px;padding:8px;flex:1}
.lesson-watch [data-chat-warning]{padding:12px 16px;font-size:14px}.lesson-watch .chat-identity{display:none}
.lesson-watch .chat-compose{display:grid;grid-template-columns:36px minmax(0,1fr) 44px;align-items:end;gap:6px;flex:none;padding:10px 12px}.lesson-watch .chat-compose textarea{grid-column:2;grid-row:1;min-height:44px;height:44px;max-height:100px;resize:vertical;padding:10px;font-size:16px;line-height:22px}.lesson-watch .chat-emoji-picker{grid-column:1;grid-row:1}.lesson-watch .chat-emoji-picker summary{width:36px;height:44px;border:0}.lesson-watch .chat-send{grid-column:3;grid-row:1}.lesson-watch .chat-send small{display:none}.lesson-watch .chat-send .btn{min-width:44px;min-height:44px;padding:10px}.lesson-watch .chat-send .btn svg{width:20px;height:20px}.lesson-watch .chat-send .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lesson-watch .chat-status{flex:none;margin:0;padding:8px 12px;font-size:12px}.lesson-watch .chat-status:empty{display:none}.lesson-watch .chat-new{flex:none;font-size:12px;min-height:36px;margin:4px auto;display:flex;align-items:center;gap:6px}.lesson-watch .chat-new svg{width:16px;height:16px}
.lesson-watch-details{margin-top:24px}.lesson-watch-details .lesson-aside{position:static}.lesson-watch-details .lesson-content:empty{display:none}
@container lesson-watch (max-width:740px){
 .lesson-watch[data-watch-mode=chat] .watch-body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(230px,1fr);height:auto}
 .lesson-watch #lesson-chat{border-left:0;border-top:1px solid var(--line);height:clamp(230px,calc(var(--watch-viewport) - 420px),400px)}
 .lesson-watch .watch-toolbar{padding:8px;gap:6px}.watch-toolbar button{padding:8px;font-size:13px;gap:6px}.watch-modes{padding:3px;gap:2px}.watch-modes svg{display:none}
 .lesson-watch .chat-head{padding:8px 12px;min-height:52px}.lesson-watch .chat-head h2{font-size:15px}.lesson-watch .chat-head small{font-size:11px}.lesson-watch .chat-help{padding:4px 12px}.lesson-watch .chat-messages{padding:8px}.lesson-watch .chat-message p{font-size:14px}.lesson-watch .chat-message header{font-size:12px}.lesson-watch .chat-message time{font-size:11px}
 .lesson-watch.watch-short .chat-help{display:none}.lesson-watch.watch-short .chat-head{min-height:36px;padding:4px 12px}.lesson-watch.watch-short .chat-head small{display:none}.lesson-watch.watch-short .chat-head .btn{min-height:32px;padding:4px}.lesson-watch.watch-short .chat-compose{padding:6px 8px}
 .watch-wait{min-height:100px;padding:12px}.watch-wait h2{font-size:16px}.watch-wait p{font-size:13px}.watch-wait svg{display:none}
}
@media(prefers-reduced-motion:reduce){.lesson-watch *{scroll-behavior:auto!important;transition:none!important}}
.lesson-watch .chat-compose:has(textarea:disabled){display:none}
.lesson-watch .watch-chat-error{padding:20px;gap:12px}.watch-chat-error h2{font-size:18px;margin:0}.watch-chat-error p{font-size:14px;line-height:1.5;color:var(--muted);margin:0}.watch-chat-error .btn{align-self:flex-start}

.lesson-watch.watch-short .chat-pin{max-height:52px}
.lesson-watch.watch-short .chat-status{max-height:44px;overflow:auto}
.lesson-watch.watch-short #lesson-chat:has(.chat-mode) .chat-head{display:none}

@container lesson-watch (min-width:741px) and (max-width:1000px){
 .lesson-watch .chat-help{display:none}
 .lesson-watch #lesson-chat:has(.chat-mode) .chat-head{display:none}
}