:root {
  --sq-toolbar-height: 32px;
}

html[data-sq-toolbar] body {
  margin: 0 !important;
  padding-top: var(--sq-toolbar-height) !important;
  box-sizing: border-box !important;
}

html[data-sq-toolbar] sq-collab-toolbar {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2147483647;
  width: 100%;
  height: var(--sq-toolbar-height);
  min-height: var(--sq-toolbar-height);
}

html[data-sq-toolbar="chat"] #react-root,
html[data-sq-toolbar="docs"] #root,
html[data-sq-toolbar="project"] #app,
html[data-sq-toolbar="files"] #opencloud {
  height: calc(100vh - var(--sq-toolbar-height)) !important;
  min-height: calc(100vh - var(--sq-toolbar-height)) !important;
  max-height: calc(100vh - var(--sq-toolbar-height)) !important;
}

@supports (height: 100dvh) {
  html[data-sq-toolbar="chat"] #react-root,
  html[data-sq-toolbar="docs"] #root,
  html[data-sq-toolbar="project"] #app,
  html[data-sq-toolbar="files"] #opencloud {
    height: calc(100dvh - var(--sq-toolbar-height)) !important;
    min-height: calc(100dvh - var(--sq-toolbar-height)) !important;
    max-height: calc(100dvh - var(--sq-toolbar-height)) !important;
  }
}

html[data-sq-toolbar="chat"] body {
  padding-top: 0 !important;
  overflow: hidden !important;
}

html[data-sq-toolbar="chat"] #react-root {
  position: fixed !important;
  inset: var(--sq-toolbar-height) 0 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  transform: translateZ(0);
}

html[data-sq-toolbar="docs"] #sidebar {
  top: var(--sq-toolbar-height) !important;
  height: calc(100vh - var(--sq-toolbar-height)) !important;
  max-height: calc(100vh - var(--sq-toolbar-height)) !important;
}

@supports (height: 100dvh) {
  html[data-sq-toolbar="docs"] #sidebar {
    height: calc(100dvh - var(--sq-toolbar-height)) !important;
    max-height: calc(100dvh - var(--sq-toolbar-height)) !important;
  }
}

/* [설명] OpenCloud의 위쪽 툴팁은 보이게 두고, 공통 메뉴가 열릴 때만 툴바를 최상위로 올립니다. */
html[data-sq-toolbar="files"] sq-collab-toolbar:not([data-menu-open="true"]) {
  z-index: 40;
}

html[data-sq-toolbar="files"] body {
  overflow: hidden !important;
}

html[data-sq-toolbar="files"] #opencloud #web,
html[data-sq-toolbar="files"] #opencloud #web-content {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}

html[data-sq-toolbar="project"] #app > header.navbar {
  top: var(--sq-toolbar-height) !important;
}

html[data-sq-toolbar="project"] #app .menu-hide-button {
  top: calc(8px + var(--sq-toolbar-height)) !important;
}

html[data-sq-toolbar="project"] #app .menu-container {
  top: calc(64px + var(--sq-toolbar-height)) !important;
  height: calc(100dvh - 64px - var(--sq-toolbar-height)) !important;
}

html[data-sq-toolbar="project"] #app .mobile-overlay {
  top: var(--sq-toolbar-height) !important;
}

html[data-sq-toolbar="git"] .full.height {
  min-height: calc(100vh - var(--sq-toolbar-height)) !important;
}

html[data-sq-toolbar="storybook"] #root {
  height: calc(100vh - var(--sq-toolbar-height)) !important;
  min-height: calc(100vh - var(--sq-toolbar-height)) !important;
}

html[data-sq-toolbar="sdk"] body {
  padding-top: 0 !important;
}

html[data-sq-toolbar="sdk"] .page > header.header {
  inset-block-start: var(--sq-toolbar-height) !important;
}

html[data-sq-toolbar="sdk"] .sidebar-pane {
  inset-block-start: calc(var(--sl-nav-height) + var(--sq-toolbar-height)) !important;
}

html[data-sq-toolbar="sdk"] .main-frame {
  padding-top:
    calc(
      var(--sl-nav-height) + var(--sl-mobile-toc-height) + var(--sq-toolbar-height)
    ) !important;
}

html[data-sq-toolbar="sdk"] .right-sidebar {
  height: calc(100vh - var(--sq-toolbar-height)) !important;
  padding-top: calc(var(--sl-nav-height) + var(--sq-toolbar-height)) !important;
}

html[data-sq-toolbar="sdk"] mobile-starlight-toc > nav {
  top: calc(var(--sl-nav-height) + var(--sq-toolbar-height) - 1px) !important;
}

html[data-sq-toolbar="sdk"] starlight-menu-button button {
  top:
    calc(
      var(--sq-toolbar-height) +
        (var(--sl-nav-height) - var(--sl-menu-button-size)) / 2
    ) !important;
}

html[data-sq-toolbar="sdk"] .sl-skip-link {
  top: calc(12px + var(--sq-toolbar-height)) !important;
}

/* [설명] Scalar는 자체 컨테이너를 뷰포트에 고정하므로 본문 패딩 대신 고정 영역 자체를 툴바 아래로 내립니다. */
html[data-sq-toolbar="api"] body {
  padding-top: 0 !important;
  overflow: hidden !important;
}

html[data-sq-toolbar="api"] #scalar-container {
  --full-height: calc(100vh - var(--sq-toolbar-height));
  position: fixed !important;
  inset: var(--sq-toolbar-height) 0 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* [설명] Scalar가 내부에서 100dvh를 다시 선언하므로 실제 레이아웃 변수와 최소 높이도 툴바를 제외한 값으로 맞춥니다. */
html[data-sq-toolbar="api"] #scalar-container .references-layout {
  --full-height: calc(100vh - var(--sq-toolbar-height));
  min-height: calc(100vh - var(--sq-toolbar-height)) !important;
}

/* [설명] Grafana와 Langfuse는 앱 루트가 뷰포트 높이를 직접 점유하므로 툴바 아래의 고정 영역으로 제한합니다. */
html[data-sq-toolbar="service-board"] body,
html[data-sq-toolbar="agent-board"] body {
  padding-top: 0 !important;
  overflow: hidden !important;
}

html[data-sq-toolbar="service-board"] #reactRoot,
html[data-sq-toolbar="agent-board"] #__next {
  position: fixed !important;
  inset: var(--sq-toolbar-height) 0 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

html[data-sq-toolbar="sdk"] {
  scroll-padding-top:
    calc(
      1.5rem + var(--sl-nav-height) + var(--sl-mobile-toc-height) +
        var(--sq-toolbar-height)
    ) !important;
}

@supports (min-height: 100dvh) {
  html[data-sq-toolbar="git"] .full.height,
  html[data-sq-toolbar="storybook"] #root {
    min-height: calc(100dvh - var(--sq-toolbar-height)) !important;
  }

  html[data-sq-toolbar="storybook"] #root {
    height: calc(100dvh - var(--sq-toolbar-height)) !important;
  }

  html[data-sq-toolbar="sdk"] .right-sidebar {
    height: calc(100dvh - var(--sq-toolbar-height)) !important;
  }

  html[data-sq-toolbar="api"] #scalar-container {
    --full-height: calc(100dvh - var(--sq-toolbar-height));
  }

  html[data-sq-toolbar="api"] #scalar-container .references-layout {
    --full-height: calc(100dvh - var(--sq-toolbar-height));
    min-height: calc(100dvh - var(--sq-toolbar-height)) !important;
  }

}