/* CutGo web-local workspace — website-only chrome on the shared Studio shell.
 * Geometry follows extension density tokens. Do not force 16px title padding
 * or 28px compact export; those made the site feel looser and greener. */

html.cutgo-web-local {
  color-scheme: dark;
  /* Website chrome may differ; shared program/timeline surfaces may not. */
  --program-chrome-bg: var(--cg-surface);
  /* Match TIMELINE_DEFAULT_SHARE before workspace.js sets exact px (slow network first paint). */
  --workspace-timeline-h: max(280px, calc((100dvh - var(--workspace-title-h, 52px)) * 0.3));
}

/* Timeline + AI column share one plane. Do not invent a second website gray. */
html.cutgo-web-local :is(
  .workspace-right,
  .workspace-transport-stack,
  .timeline-wrapper,
  .timeline-audio-meter,
  .timeline-module,
  .timeline-module > .timeline-stack-row,
  .timeline-pr-headers,
  .timeline-pr-header-corner,
  .timeline-pr-header-cell,
  .timeline-container,
  #timelineTrack,
  #rulerCanvas,
  .timeline-video-lane,
  .timeline-audio-lane,
  .timeline-wave-viewport,
  .scrollbar-track
) {
  background: var(--cg-surface) !important;
  background-color: var(--cg-surface) !important;
}

html.cutgo-web-local #waveformCanvas[hidden],
html.cutgo-web-local #scoutCanvas[hidden] {
  display: none !important;
}

html.cutgo-web-local #waveformCanvas,
html.cutgo-web-local #scoutCanvas {
  background: transparent !important;
}

html.cutgo-web-local .scene-detect-modal-card {
  background-color: var(--cg-surface-2) !important;
  background-image: none !important;
  opacity: 1;
  filter: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.cutgo-web-local #sceneDetectConfigModal:not(.is-fading, .is-behind-confirm) .scene-detect-modal-card {
  opacity: 1 !important;
  filter: none !important;
}

html.cutgo-web-local body {
  --cutgo-web-banner-h: 0px;
}

/* Installed app only: occupy the native title-bar area and keep standalone as fallback. */
@media (display-mode: window-controls-overlay) {
  html.cutgo-web-local {
    --workspace-title-h: max(40px, env(titlebar-area-height, 40px));
    --cutgo-wco-left-safe: max(var(--workspace-pad, 8px), env(titlebar-area-x, 0px));
    --cutgo-wco-right-safe: max(
      var(--workspace-pad, 8px),
      calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw))
    );
  }

  html.cutgo-web-local.cutgo-platform-mac {
    --cutgo-wco-left-safe: max(92px, env(titlebar-area-x, 0px));
  }

  html.cutgo-web-local .title-bar,
  html.cutgo-web-local[data-density] .title-bar,
  html.cutgo-web-local:root[data-density] .title-bar {
    height: var(--workspace-title-h) !important;
    min-height: var(--workspace-title-h) !important;
    padding-left: var(--cutgo-wco-left-safe) !important;
    padding-right: var(--cutgo-wco-right-safe) !important;
    -webkit-app-region: drag;
    app-region: drag;
  }

  html.cutgo-web-local .title-bar :is(button, a, nav, input, select, textarea, [role='button']) {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
}

/* Keep title menus visible; padding/height come from eagle-parity compact tokens. */
html.cutgo-web-local .title-bar,
html.cutgo-web-local[data-density] .title-bar,
html.cutgo-web-local:root[data-density] .title-bar {
  overflow: visible !important;
}


html.cutgo-web-local .cutgo-web-title-note {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(320px, 28vw);
  color: rgba(245, 245, 247, 0.6);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

html.cutgo-web-local .cutgo-web-title-note:hover {
  color: rgba(245, 245, 247, 0.88);
}

html.cutgo-web-local .cutgo-web-action-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}

html.cutgo-web-local .cutgo-web-action-svg {
  display: block;
  width: 16px;
  height: 16px;
}

@media (max-width: 1180px) {
  html.cutgo-web-local .cutgo-web-title-note {
    display: none;
  }
}

@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  html.cutgo-web-local #btnInstallStudioApp,
  html.cutgo-web-local .cutgo-home-install {
    display: none !important;
  }
}

html.cutgo-web-local .top-export-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--ws-title-gap, 8px);
  min-width: 0;
  margin-left: auto;
}

/* Website-only title actions — same hit height as left chrome / 导出. */
html.cutgo-web-local .cutgo-web-title-btn,
html.cutgo-web-local .cutgo-web-back-home {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: var(--ws-title-btn-h, 28px);
  padding: 0 var(--ws-title-btn-pad-x, 12px);
  margin: 0;
  border-radius: var(--cg-radius-sm, 5px);
  font-size: var(--ws-title-btn-font, 12px);
  font-weight: 650;
  line-height: 1;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  flex-shrink: 0;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* 返回官网 — match 导入 (neutral outline, not brand green). */
html.cutgo-web-local .cutgo-web-back-home,
html.cutgo-web-local a.cutgo-web-back-home:link,
html.cutgo-web-local a.cutgo-web-back-home:visited {
  background: transparent !important;
  border: 1px solid var(--cg-line, rgba(255, 255, 255, 0.09)) !important;
  color: var(--cg-text-secondary, rgba(174, 174, 178, 0.9)) !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

html.cutgo-web-local a.cutgo-web-back-home:hover,
html.cutgo-web-local a.cutgo-web-back-home:active {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--cg-text, rgba(245, 245, 247, 0.94)) !important;
  text-decoration: none !important;
}

html.cutgo-web-local .cutgo-web-back-home:focus-visible {
  outline: 2px solid rgba(163, 230, 53, 0.55);
  outline-offset: 2px;
}

/* 安装扩展 — the only extra brand-outline action. */
html.cutgo-web-local .cutgo-web-title-btn.is-outline,
html.cutgo-web-local a.cutgo-web-title-btn.is-outline:link,
html.cutgo-web-local a.cutgo-web-title-btn.is-outline:visited {
  background: transparent !important;
  border: 1px solid rgba(163, 230, 53, 0.55) !important;
  color: var(--cg-brand, #a3e635) !important;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
}

html.cutgo-web-local .cutgo-web-title-btn.is-outline:hover,
html.cutgo-web-local a.cutgo-web-title-btn.is-outline:active {
  background: rgba(163, 230, 53, 0.12) !important;
  border-color: var(--cg-brand, #a3e635) !important;
  color: var(--cg-brand-hover, #b8f04a) !important;
  text-decoration: none !important;
}

html.cutgo-web-local .cutgo-web-title-btn:focus-visible {
  outline: 2px solid rgba(163, 230, 53, 0.55);
  outline-offset: 2px;
}

/* Hide in-page shell chrome that only applies inside extension iframe */
html.cutgo-web-local .inpage-shell-meta,
html.cutgo-web-local #btnInpageClose {
  display: none !important;
}

/*
 * Export open: demote web title chrome (安装扩展 / 官网 / 导出)
 * to match extension AI-panel / export-button treatment.
 * Note: .cutgo-web-title-actions uses display:contents — demote its children, not the wrapper.
 */
html.cutgo-web-local body.export-popout-open .cutgo-web-title-btn,
html.cutgo-web-local body.export-popout-open .cutgo-web-back-home,
html.cutgo-web-local body.export-popout-open .top-export-btn,
html.cutgo-web-local body.export-popout-open #btnInstallStudioApp {
  position: relative !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: blur(2.5px) brightness(0.42) !important;
  opacity: 0.38 !important;
}

html.cutgo-web-local body.export-popout-open .cutgo-web-title-btn::after,
html.cutgo-web-local body.export-popout-open .cutgo-web-back-home::after,
html.cutgo-web-local body.export-popout-open .top-export-btn::after,
html.cutgo-web-local body.export-popout-open #btnInstallStudioApp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(6, 6, 8, 0.62);
  pointer-events: none;
  z-index: 6;
}

/*
 * Kill page-player floating transport if extension is still injected on cutgo.cn
 * (builtin blacklist + this CSS). Workspace already has its own dashboard + timeline.
 */
html.cutgo-web-local #cutgo-page-transport,
html.cutgo-web-local #cutgo-inpage-transport-slot,
html.cutgo-web-local #cutgo-transport-hover-zone,
html.cutgo-web-local #cutgo-page-settings-fab,
html.cutgo-web-local #cutgo-page-settings,
html.cutgo-web-local #cutgo-page-settings-panel,
html.cutgo-web-local .cutgo-entry-wrap,
html.cutgo-web-local #cutgoEntryBtn,
html.cutgo-web-local [data-cutgo-entry],
html.cutgo-web-local .cutgo-fab,
html.cutgo-web-local #cutgo-player-badge {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Legacy sticky banner (removed from HTML; keep safe if cached) */
.cutgo-web-banner {
  display: none !important;
}

/* Website surface — show web-only blocks; hide true extension-only chrome.
   Do NOT blanket-hide `.cutgo-ext-only`: per EAGLE_VS_BROWSER rules that class means
   「扩展 + 官网可见、Eagle 隐藏」. Export dest UI (更改… / 按视频建夹 / 打开文件夹 /
   导出完整视频 / 设置里导出文件夹项) must match extension new-tab local video. */
html.cutgo-web-local .cutgo-web-only,
html.cutgo-web-local .update-surface-web {
  display: block !important;
}
html.cutgo-web-local .cutgo-home-intro {
  gap: 0;
}
html.cutgo-web-local .cutgo-home-intro > .cutgo-home-tagline:not(.cutgo-web-only) {
  display: none !important;
}
html.cutgo-web-local .cutgo-home-intro > .cutgo-home-tagline.cutgo-web-only {
  margin-top: 8px;
  max-width: none;
  color: rgba(232, 232, 237, 0.78);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
html.cutgo-web-local .cutgo-home-intro > .cutgo-home-lede.cutgo-web-only {
  margin-top: 4px;
  max-width: 100%;
  overflow: hidden;
  color: rgba(142, 142, 147, 0.92);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
html.cutgo-web-local .cutgo-home-intro > .cutgo-home-guide-wrap.cutgo-web-only {
  margin-top: 8px;
}
html.cutgo-web-local .cutgo-home-guide {
  color: rgba(174, 174, 178, 0.95);
  font-size: 12px;
  font-weight: 650;
}
@media (max-width: 720px) {
  html.cutgo-web-local .cutgo-home-intro > .cutgo-home-tagline.cutgo-web-only {
    white-space: normal;
  }
}
html.cutgo-web-local .empty-state > .cutgo-home-tagline.cutgo-web-only {
  display: block !important;
  margin: 0 auto;
  max-width: min(28em, 100%);
  overflow: hidden;
  color: rgba(232, 232, 237, 0.78);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 720px) {
  html.cutgo-web-local .empty-state > .cutgo-home-tagline.cutgo-web-only {
    white-space: normal;
    text-overflow: unset;
  }
}
html.cutgo-web-local .inpage-shell-close.cutgo-ext-only,
html.cutgo-web-local .settings-tab.cutgo-ext-only[data-tab='cache'],
html.cutgo-web-local .settings-page.cutgo-ext-only[data-page='cache'],
html.cutgo-web-local .settings-ai-sync-hint.cutgo-ext-only,
html.cutgo-web-local .update-surface-ext {
  display: none !important;
}