#radar-local-titlebar[hidden] { display: none; }

#radar-local-titlebar {
  position: fixed;
  z-index: 2147483647;
  top: env(titlebar-area-y, 0px);
  left: env(titlebar-area-x, 0px);
  width: env(titlebar-area-width, 100%);
  height: env(titlebar-area-height, 32px);
  display: flex;
  align-items: center;
  gap: 2px;
  padding-inline: 6px;
  color: var(--radar-local-frame-ink, var(--cp-ink, var(--page-ink, #151515)));
  background: var(--radar-local-frame-background, var(--cp-bg, var(--page-bg, #f6f8fb)));
  user-select: none;
  -webkit-app-region: drag;
  app-region: drag;
}

/* Continue the sidebar surface behind the native window controls as well. */
#radar-local-titlebar::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: env(titlebar-area-height, 32px);
  z-index: -1;
  background: inherit;
  pointer-events: none;
}

#radar-local-content-corner[hidden] { display: none; }
#radar-local-content-corner {
  position: fixed;
  top: var(--radar-local-content-top, env(titlebar-area-height, 32px));
  left: var(--radar-local-sidebar-width, 0px);
  width: 16px;
  height: 16px;
  z-index: 80;
  background: radial-gradient(circle at bottom right, transparent 16px, var(--radar-local-frame-background) 16px);
  pointer-events: none;
}

/* Continue Classic's sidebar divider around the content's rounded corner.
   The extra pixel covers the old straight divider behind that corner. */
html[data-cp-mode=classic] #radar-local-content-corner {
  top: var(--radar-local-content-top);
  left: calc(var(--radar-local-sidebar-width) - 1px);
  width: 17px;
  height: 17px;
  background: radial-gradient(circle at bottom right,
    transparent 16px, var(--cp-line) 16px, var(--cp-line) 17px,
    var(--radar-local-frame-background) 17px);
}
html[data-cp-mode=classic] #radar-local-content-corner::after {
  content: '';
  position: fixed;
  top: var(--radar-local-content-top);
  left: calc(var(--radar-local-sidebar-width) + 16px);
  right: 0;
  height: 1px;
  background: var(--cp-line);
}

#radar-local-titlebar button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  flex: none;
  padding: 5px;
  border: 0;
  border-radius: 5px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

#radar-local-titlebar button:hover:not(:disabled) { background: var(--cp-soft, #e8eaed); }
#radar-local-titlebar button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
#radar-local-titlebar button:disabled { opacity: .3; cursor: default; }
#radar-local-titlebar svg { width: 18px; height: 18px; }

/* Native window controls sit above the document's modal backdrop. Leave the
   whole titlebar outside that backdrop so its center and edges stay uniform. */
html[data-radar-local-titlebar] dialog::backdrop {
  clip-path: inset(env(titlebar-area-height, 32px) 0 0);
}

/* The existing header inset also positions docks, sticky controls and results.
   Preserve document scrolling and the viewport used by fixed feature panels. */
html[data-radar-local-titlebar] #root .cp-header {
  top: env(titlebar-area-height, 32px);
  height: calc(var(--cp-header-height) - env(titlebar-area-height, 32px));
}
html[data-radar-local-titlebar] #root .cp-app[data-layout=sidebar] .cp-navigation {
  height: calc(100dvh - env(titlebar-area-height, 32px));
}
html[data-radar-local-titlebar] #root .cp-navigation-toggle {
  top: calc(12px + env(titlebar-area-height, 32px));
}
html[data-radar-local-titlebar] #root:not(:has(.cp-app)),
html[data-radar-local-titlebar] body:not(:has(#root)) {
  padding-top: env(titlebar-area-height, 32px);
}
html[data-radar-local-titlebar] .site-header {
  top: env(titlebar-area-height, 32px);
}