/* Shared by module cards, headers, onboarding, support and subscriptions. */
.sv-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.sv-buttons:empty{display:none}
.sv-button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:36px;padding:8px 12px;border:1px solid var(--sv-button-border,var(--border,#cbd5e1));
  border-radius:10px;background:var(--sv-button-bg,var(--panel,#fff));
  color:var(--sv-button-color,var(--text,#172033));
  font:inherit;font-size:13px;font-weight:650;line-height:1.35;
  cursor:pointer;text-decoration:none;transition:background .15s ease,box-shadow .15s ease;
}
.sv-button:hover{
  background:var(--sv-button-hover-bg,var(--panel2,#f1f5f9));
  border-color:var(--sv-button-border,#8b5cf6);
  color:var(--sv-button-color,var(--text,#172033));
}
.sv-button:focus-visible{outline:3px solid #a78bfa;outline-offset:3px}
.sv-button[hidden]{display:none!important}
.sv-button[data-video-kind="quick"]{
  --sv-button-bg:#6d4be8;--sv-button-border:#6d4be8;
  --sv-button-color:#fff;--sv-button-hover-bg:#5635c5;
  box-shadow:0 2px 5px rgba(75,48,168,.16);
}
.sv-button[data-video-kind="tutorial"],#sv-full-tutorial{
  --sv-button-bg:#0d7280;--sv-button-border:#0d7280;
  --sv-button-color:#fff;--sv-button-hover-bg:#095b66;
  box-shadow:0 2px 5px rgba(13,114,128,.16);
}

/* Module-card previews are secondary to Open/Start Module. Other placements
   retain their full-size, colored video buttons. */
.sv-buttons--compact{
  align-items:center;gap:4px 8px;margin:10px 0 0;padding-top:6px;
  border-top:1px solid var(--border,#d9e2ec);
}
.sv-buttons--compact:not(:has(.sv-button)){display:none}
.sv-card-video-label{font-size:11px;font-weight:500;color:var(--muted,#526176)}
.sv-buttons--compact .sv-button{
  --sv-button-bg:transparent;--sv-button-border:transparent;
  --sv-button-color:var(--muted,#526176);--sv-button-hover-bg:var(--panel2,#f4f0ff);
  min-height:28px;width:auto;flex:0 0 auto;padding:4px;
  border-radius:5px;box-shadow:none;font-size:12px;font-weight:500;line-height:1.4;gap:4px;
}
.sv-buttons--compact .sv-button:hover{text-decoration:underline;text-underline-offset:3px}
.sv-card-video-icon{display:block;width:14px;height:14px;flex:0 0 14px}

/* Fit the full frame in the viewport, including the close and tutorial buttons.
   The height-based width leaves room for player chrome on shorter screens. */
.sv-modal{
  box-sizing:border-box;
  width:min(1600px,calc(100vw - 24px),calc((100dvh - 150px) * 1.777778 + 26px));
  max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);
  margin:auto;overflow:auto;padding:12px;
  border:1px solid var(--border,#cbd5e1);border-radius:16px;
  background:var(--panel,#fff);color:var(--text,#172033);
  box-shadow:0 24px 80px rgba(5,12,26,.35);
}
.sv-modal[open]{display:flex;flex-direction:column;gap:10px}
.sv-modal::backdrop{background:rgba(5,12,26,.72)}
.sv-player-head{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  margin-bottom:12px;flex:0 0 auto;
}
.sv-player-head strong{min-width:0;overflow-wrap:anywhere}
.sv-player-head .sv-button{flex:0 0 auto}
.sv-player{background:#000;aspect-ratio:16/9;min-width:0}
.sv-player:empty{display:none}
.sv-player video,.sv-player iframe{display:block;width:100%;height:100%;border:0}
.sv-player video{object-fit:contain}
.sv-player-foot{display:flex;justify-content:flex-end;margin-top:12px;flex:0 0 auto}
.sv-player-foot:has(#sv-full-tutorial[hidden]){display:none}
.sv-modal .sv-player-head,.sv-modal .sv-player-foot{margin:0}
.sv-modal .sv-player{flex:0 1 auto;min-height:0;overflow:hidden}
.sv-error{color:#b91c1c}
.sv-side-panel{
  position:fixed;z-index:11900;right:0;top:0;bottom:0;
  width:min(520px,40vw);padding:18px;
  background:var(--panel,#fff);color:var(--text,#172033);
  border-left:1px solid var(--border,#cbd5e1);overflow:auto;
}
#sumeria-tutorial-panel[hidden],.sv-error[hidden]{display:none!important}
.sv-small{font-size:12px;color:var(--muted,#475569)}
.sv-intro{padding:24px;max-width:1100px;margin:20px auto}
.sv-intro-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.sv-library-row{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--border,#cbd5e1);
}
.sv-library-group{margin-top:24px}
.sv-label{display:block;font-size:12px;font-weight:600}
.sv-workflow-buttons{margin-top:12px}
.sv-header-actions{display:flex;justify-content:flex-end;align-items:center;padding:4px 0;gap:10px}

/* A compact assistant keeps the tutorial, conversation and composer visible. */
.ask-sumeria-drawer{display:flex;flex-direction:column;min-height:0}
.ask-sumeria-head,.sv-support-videos{flex:0 0 auto}
.sv-support-videos{padding:0 14px}
.sv-support-videos:not(:has([data-video-kind])){display:none}
.ask-sumeria-chat{flex:1 1 auto;min-height:0}
.ask-sumeria-foot{flex:0 0 auto;max-height:48dvh;overflow:auto}
.sv-in-ask{
  padding:10px 14px;flex:0 0 auto;max-height:50dvh;overflow:auto;
  border-bottom:1px solid var(--border,#cbd5e1);
}
.sv-in-ask .sv-player-head{font-size:13px;gap:8px}
.sv-in-ask .sv-player-head .sv-button{font-size:12px;padding:7px 9px}
.ask-sumeria-drawer:has(.sv-in-ask:not([hidden])) .sv-support-videos{display:none}
.ask-sumeria-drawer:has(.sv-in-ask:not([hidden])) .ask-sumeria-chat{min-height:70px}
.ask-sumeria-drawer:has(.sv-in-ask:not([hidden])) .ask-sumeria-foot{max-height:38dvh}

@media(min-width:761px){
  body.sv-side-open>header,body.sv-side-open>main,body.sv-side-open>.wrap{
    width:calc(100% - min(520px,40vw));margin-right:min(520px,40vw);
  }
}
@media(max-width:760px){
  .sv-side-panel{width:100%;top:auto;height:78dvh}
  .sv-library-row{align-items:flex-start;flex-direction:column;gap:4px}
  .sv-modal{padding:10px;border-radius:12px}
  .sv-modal .sv-player-head{font-size:13px;gap:8px}
  .sv-header-actions{justify-content:flex-start}
  .ask-sumeria-drawer:has(.sv-in-ask:not([hidden])) .ask-sumeria-chat{padding:10px}
  .sv-in-ask{max-height:46dvh}
}
/* Short windows can scroll the whole panel instead of clipping its controls. */
@media(max-height:600px){
  .ask-sumeria-drawer{overflow:auto}
  .ask-sumeria-chat{flex:1 0 auto;max-height:32dvh}
  .ask-sumeria-foot,
  .ask-sumeria-drawer:has(.sv-in-ask:not([hidden])) .ask-sumeria-foot{max-height:none;overflow:visible}
  .sv-in-ask{max-height:none;overflow:visible}
}
html[data-theme="dark"] .sv-side-panel,html[data-theme="dark"] .sv-modal{
  background:#101a2e;color:#f8fafc;border-color:#475569;
}
html[data-theme="dark"] .sv-button{
  background:var(--sv-button-bg,#101a2e);color:var(--sv-button-color,#f8fafc);
  border-color:var(--sv-button-border,#475569);
}
html[data-theme="dark"] .sv-button:hover{background:var(--sv-button-hover-bg,#1e293b)}
html[data-theme="dark"] .sv-error{color:#fca5a5}
@media(prefers-reduced-motion:reduce){.sv-button{transition:none}}