/* Shared native player controls, sourced from Study Desk. */
.shared-media-player .skipGroup {
  display: flex;
  align-items: center;
}
.shared-media-player select, .shared-media-player input {
  font: 15px Assistant, Arial, sans-serif;
  border: 1px solid var(--control-border);
  border-radius: 6px;
  padding: 4px;
  box-sizing: border-box;
  height: 34px;
}
.shared-media-player .playerControls {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 12px;
  padding: 12px 4px;
  flex-wrap: wrap;
}
.desk-speed-control, .desk-skip-control {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  font: 14px Assistant, Arial, sans-serif;
  color: var(--reading-ink);
}
.shared-media-player .skipGroup {
  direction: ltr;
  gap: 6px;
}
.shared-media-player .skipGroup button {
  width: 36px;
  height: 36px;
  padding: 7px;
}
.shared-media-player .skipGroup svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shared-media-player .desk-media-download svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  fill: none;
  stroke: var(--accent-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.desk-captions-control {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  font: 14px Assistant, Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  color: var(--reading-ink);
}
.desk-captions-control[hidden] {
  display: none;
}
.shared-media-player .desk-captions-control input {
  width: 16px;
  height: 16px;
  margin: 0px;
  accent-color: var(--accent-primary);
}
.shared-media-player .desk-lesson-navigation input {
  accent-color: var(--accent-primary);
  width: 16px;
  height: 16px;
  margin: 0px;
  flex: 0 0 16px;
  padding: 0px;
}
.shared-media-player .playerControls > .desk-media-download {
  flex: 0 0 auto;
  height: 34px;
  padding: 5px 8px;
  font-size: 14px;
  box-sizing: border-box;
}
.shared-media-player .playerControls > .desk-media-download, .shared-media-player .playerControls > .desk-media-share {
  width: 36px;
  height: 36px;
  padding: 7px;
  flex: 0 0 36px;
  box-sizing: border-box;
}
.shared-media-player .playerControls > .desk-media-download svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.desk-media-share svg {
  display: block;
  width: 20px;
  height: 20px;
}
.desk-media-share-status {
  font-size: 13px;
}

/* Keep native media and loading feedback inside one clean clipped surface. */
.shared-media-player{container-type:inline-size}
.shared-player-toolbar{display:flex;align-items:flex-end;gap:12px;width:100%;direction:rtl}
.shared-media-player .shared-player-toolbar .playerControls{flex:1;min-width:0;justify-content:center;padding:12px 0}
.shared-player-toolbar .media-companion-link{margin-bottom:12px}

#dywFloatBody video{border-radius:8px;overflow:hidden}
#dywFloatBody .desk-media-status{border-radius:0;margin-top:0}

.shared-media-surface.is-video{border-radius:10px;overflow:hidden;clip-path:inset(0 round 10px);background:var(--media-bg,#181614)}
.shared-media-surface video,#dywFloatBody .shared-media-surface video{display:block;border-radius:0;margin:0}
.shared-media-surface+.desk-media-status{position:static;border:0;border-radius:0;box-shadow:none;background:var(--panel-bg);margin:0}

.shared-media-surface.is-video{border:2px solid var(--accent-primary);box-sizing:border-box;clip-path:none;border-radius:10px;overflow:hidden}
.shared-media-surface.is-video video{clip-path:inset(0 round 7px)}

.shared-media-surface{position:relative}
.shared-media-surface::after{content:"";position:absolute;inset:50% auto auto 50%;width:28px;height:28px;margin:-16px;border:3px solid rgba(255,255,255,.35);border-top-color:var(--accent-primary);border-radius:50%;opacity:0;pointer-events:none;transition:opacity .15s}
.shared-media-surface.is-buffering::after{opacity:1;animation:media-buffer-spin .9s linear infinite}
@keyframes media-buffer-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.shared-media-surface::after{transition:none}.shared-media-surface.is-buffering::after{animation:none}}

.shared-media-player{container-type:inline-size}
.shared-media-player .playerControls{display:flex!important;flex-direction:row;align-items:flex-end!important;gap:10px!important;flex-wrap:nowrap!important}
.media-primary-controls,.media-secondary-controls{display:flex;align-items:flex-end;justify-content:center;gap:12px;flex-wrap:nowrap;max-width:100%}
.shared-media-player .shared-player-toolbar{display:flex;align-items:flex-end;gap:12px}
.media-secondary-controls .media-companion-link{margin:0}
.media-secondary-controls .desk-media-download,.media-secondary-controls .desk-media-share,.media-secondary-controls .desk-media-fullscreen{width:36px;height:36px;padding:7px;flex:0 0 36px}



.shared-media-player .desk-media-status{min-height:48px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel-bg);color:var(--text-body);padding:10px 14px;border-radius:0;box-shadow:none}
.shared-media-player .desk-media-status[hidden],.shared-media-player .desk-media-status button[hidden]{display:none}
.shared-media-player .desk-media-spinner{display:none}
.shared-media-player .is-loading .desk-media-spinner{display:block;width:16px;height:16px;border:2px solid var(--accent-border);border-top-color:var(--accent-primary);border-radius:50%;animation:shared-media-spin 1s linear infinite}
@keyframes shared-media-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.shared-media-player .desk-media-spinner{animation:none!important}}

.shared-player-toolbar>.media-companion-link{flex:0 0 auto;margin:0 0 12px auto}
.shared-player-toolbar .media-primary-controls,.shared-player-toolbar .media-secondary-controls{flex:0 0 auto;max-width:none}
.shared-player-toolbar.is-compact>.media-companion-link{width:46px;min-width:46px;padding:10px}
.shared-player-toolbar.is-compact .companion-label{display:none}
.shared-player-toolbar.is-stacked .playerControls{flex-direction:column;align-items:center!important}
.shared-player-toolbar.is-stacked{align-items:flex-end}

.shared-media-player .desk-media-fullscreen{box-sizing:border-box;min-width:36px;min-height:36px}
.shared-media-player .desk-media-fullscreen svg{display:block;width:20px;height:20px;flex:0 0 20px}