/* Reader workspace: shared header, then player left / tutor right edge-to-edge. */
html:has(.video-workspace-body) { overflow: hidden; scrollbar-gutter: auto; }
.video-workspace-body { margin: 0; height: 100dvh; overflow: hidden; overscroll-behavior: none; background: #fff; color: #10203b; }
.video-workspace-body .site-main { width: 100%; height: calc(100dvh - var(--topbar-height, 64px)); min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.video-workspace-body.site-header-overlay .site-main > .video-study-page { margin-top: 0; padding-top: 0; }
.video-workspace-body .support-launcher, .video-workspace-body .support-panel { display: none; }
.video-study-page { width: 100%; height: 100%; margin: 0; direction: rtl; }
.video-study-page *, .video-study-page *::before, .video-study-page *::after { box-sizing: border-box; }
.video-detail-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.video-workspace { --video-tutor-width: clamp(260px, 25vw, 360px); --tutor-ink: #10203b; --tutor-muted: #586d82; --tutor-border: #d9e6ec; --tutor-surface: #f4f8fb; --tutor-accent: #007da8; width: 100%; height: var(--video-workspace-height, 100%); min-height: 0; overflow: hidden; background: #000; }
.video-workspace [hidden] { display: none !important; }
.video-workspace :is(button, a, textarea):focus-visible { outline: 3px solid #0076a8; outline-offset: 2px; }
.video-workspace-panels { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--video-tutor-width); height: 100%; gap: 0; min-height: 0; min-width: 0; overflow: hidden; direction: ltr; }
.video-workspace-player { position: relative; grid-column: 1; grid-row: 1; min-width: 0; min-height: 0; overflow: hidden; background: #000; direction: rtl; }
.video-workspace-tutor { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; overflow: hidden; border-inline-start: 1px solid var(--tutor-border); direction: rtl; }
.video-workspace.is-tutor-closed .video-workspace-panels { grid-template-columns: minmax(0, 1fr); }
.player-frame { position: relative; height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; background: #000; }
.video-player { display: block; width: 100%; height: 100%; min-height: 0; max-height: none; border: 0; object-fit: contain; background: #000; }
.video-player[data-embedded-video-player] { position: absolute; top: 50%; right: 0; width: var(--video-embed-width, 100%); height: var(--video-embed-height, 100%); transform: translateY(-50%); }
.video-tutor-reopen { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--tutor-border); border-radius: 12px; background: #fff; color: var(--tutor-ink); font: inherit; font-size: .8rem; cursor: pointer; box-shadow: 0 3px 12px #0002; }
.video-tutor-reopen > svg { width: 20px; height: 20px; }
.video-tutor-reopen:hover { background: #e6f6f3; }
.video-player-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; background: #101318; color: #fff; font-size: .85rem; line-height: 1.8; text-align: center; pointer-events: none; transition: opacity 180ms ease, visibility 180ms ease; }
.video-player-loading.is-ready { opacity: 0; visibility: hidden; }
.video-player-spinner { width: 30px; height: 30px; border: 3px solid #fff5; border-block-start-color: #fff; border-radius: 50%; animation: video-player-spin 800ms linear infinite; }
@keyframes video-player-spin { to { transform: rotate(360deg); } }
.video-tutor-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100%; min-height: 0; width: 100%; margin: 0; overflow: hidden; border: 0; border-radius: 0; background: var(--tutor-surface); color: var(--tutor-ink); font-family: var(--site-font), Tahoma, sans-serif; box-shadow: none; direction: rtl; }
.video-tutor-introduction { display: flex; align-items: center; gap: 8px; height: 48px; margin: 0; padding: 0 12px; border: 0; border-bottom: 1px solid var(--tutor-border); background: #fff; color: var(--tutor-ink); text-align: right; }
.video-tutor-introduction > svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--tutor-accent); }
.video-tutor-introduction h2 { flex: 1; margin: 0; color: var(--tutor-ink); font-size: 13px; font-weight: 750; line-height: 1.8; }
.video-tutor-close { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 12px; border: 0; border-radius: 10px; background: transparent; color: var(--tutor-muted); cursor: pointer; }
.video-tutor-close > svg { width: 20px; height: 20px; }
.video-tutor-close:hover { background: var(--tutor-surface); }
.video-tutor-messages { display: flex; flex-direction: column; gap: 14px; min-height: 0; margin: 0; padding: 16px 16px 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b8cfd9 transparent; }
.video-tutor-message { flex: 0 0 auto; width: fit-content; max-width: 92%; padding: 10px 13px; border-radius: 14px; color: var(--tutor-ink); font-size: 13px; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; box-shadow: none; }
.video-tutor-message.assistant { align-self: flex-end; border: 1px solid var(--tutor-border); border-bottom-left-radius: 4px; background: #fff; }
.video-tutor-message.user { align-self: flex-start; border-bottom-right-radius: 4px; background: #10203b; color: #fff; }
.video-tutor-login { display: inline-flex; align-self: flex-start; min-height: 44px; align-items: center; padding: 7px 12px; border: 1px solid #a8ddd1; border-radius: 10px; background: #e6f6f3; color: #086e60; font-size: 12px; font-weight: 700; text-decoration: none; }
.video-tutor-login:hover { background: #d3efe8; }
.video-tutor-form { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: end; gap: 5px; margin: 0 12px; padding: 5px; border: 1px solid #b8cfd9; border-radius: 16px; background: #fff; }
.video-tutor-form:focus-within { border-color: var(--tutor-accent); box-shadow: 0 0 0 3px #007da815; }
.video-tutor-form textarea { display: block; width: 100%; min-width: 0; height: 44px; min-height: 44px; max-height: 132px; padding: 9px; border: 0; border-radius: 0; background: transparent; color: var(--tutor-ink); font: inherit; font-size: 12px; line-height: 1.9; resize: none; direction: rtl; text-align: right; box-shadow: none; }
.video-tutor-form textarea:focus { outline: 0; box-shadow: none; }
.video-tutor-form textarea::placeholder { color: #586d82; opacity: 1; }
.video-tutor-form button { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; margin: 0; padding: 10px; border: 0; border-radius: 12px; background: var(--tutor-accent); color: #fff; cursor: pointer; box-shadow: none; }
.video-tutor-form button:hover:not(:disabled) { background: #006586; }
.video-tutor-form button:disabled { background: #e3ebf0; color: #617486; cursor: not-allowed; }
.video-tutor-form button svg { width: 22px; height: 22px; }
.video-tutor-note { min-width: 0; min-height: 26px; margin: 0; padding: 7px 14px max(9px, env(safe-area-inset-bottom)); color: var(--tutor-muted); font-size: 10px; line-height: 1.6; text-align: right; overflow-wrap: anywhere; }
.video-workspace-resizer { position: absolute; inset-block: 0; right: calc(var(--video-tutor-width) - 4px); z-index: 10; width: 8px; touch-action: none; cursor: col-resize; }
.video-workspace-resizer::after { position: absolute; top: calc(50% - 12px); left: 3px; width: 2px; height: 24px; border-radius: 2px; background: #7fa5b7; content: ""; }
.video-workspace-resizer:hover, .video-workspace-resizer:focus-visible { background: #007da818; outline: 2px solid var(--tutor-accent); outline-offset: -2px; }
.video-workspace.is-resizing { user-select: none; }
.video-workspace.is-resizing .video-player { pointer-events: none; }
@media (max-width: 900px) {
  .video-workspace-panels { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--video-mobile-player-height, min(56.25vw, 38%)) minmax(0, 1fr); }
  .video-workspace-player { grid-column: 1; grid-row: 1; width: 100%; }
  .video-workspace-tutor { grid-column: 1; grid-row: 2; width: 100%; border-inline-start: 0; border-block-start: 1px solid var(--tutor-border); }
  .video-workspace.is-tutor-closed .video-workspace-panels { grid-template-rows: minmax(0, 1fr); }
  .video-tutor-introduction { height: 44px; }
  .video-tutor-messages { gap: 10px; padding: 12px; }
  .video-tutor-message { padding: 9px 12px; font-size: 12px; }
  .video-tutor-form textarea { font-size: 16px; }
  .video-workspace-resizer { inset: calc(var(--video-mobile-player-height, min(56.25vw, 38%)) - 12px) auto auto calc(50% - 48px); width: 96px; height: 24px; cursor: row-resize; }
  .video-workspace-resizer::after { top: 11px; left: calc(50% - 16px); width: 32px; height: 3px; }
  .video-workspace.is-keyboard-open.is-tutor-closed .video-workspace-panels { grid-template-rows: minmax(0, 1fr); }
  .video-workspace.is-keyboard-open .video-tutor-note { padding-block: 2px; }
}
@media (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {
  .video-workspace-panels { grid-template-columns: minmax(0, 1fr) var(--video-tutor-width); grid-template-rows: minmax(0, 1fr); }
  .video-workspace-tutor { grid-column: 2; grid-row: 1; border-block-start: 0; border-inline-start: 1px solid var(--tutor-border); }
  .video-workspace-resizer { inset-block: 0; top: 0; right: calc(var(--video-tutor-width) - 4px); left: auto; width: 8px; height: auto; cursor: col-resize; }
  .video-workspace-resizer::after { top: calc(50% - 12px); left: 3px; width: 2px; height: 24px; }
  .video-workspace.is-tutor-closed .video-workspace-panels { grid-template-columns: minmax(0, 1fr); }
  .video-tutor-note { padding-block: 2px; font-size: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .video-workspace *, .video-workspace *::before, .video-workspace *::after { animation: none; transition: none; }
}