:root {
  --os-wco-title-x: env(titlebar-area-x, 0px);
  --os-wco-title-width: env(titlebar-area-width, 100vw);
  --os-wco-title-height: env(titlebar-area-height, 0px);
  --os-wco-safe-left: env(titlebar-area-x, 0px);
  --os-wco-safe-right: max(0px, calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw)));
}

@media (display-mode: window-controls-overlay) {
  /* All interactive title-bar content is kept inside the measured Chromium
     title area. These declarations are authoritative across every layout. */
  body.os-app-shell:not(.os-module-shell) .os-app-header,
  body.os-app-shell:not(.os-module-shell) .os-app-navbar {
    background: #126b45 !important;
    -webkit-app-region: drag !important;
  }

  body.os-app-shell:not(.os-module-shell) .os-app-navbar-inner {
    box-sizing: border-box !important;
    margin-left: var(--os-wco-safe-left) !important;
    margin-right: var(--os-wco-safe-right) !important;
    max-width: none !important;
    width: calc(100% - var(--os-wco-safe-left) - var(--os-wco-safe-right)) !important;
  }

  body.os-app-shell:not(.os-module-shell) .os-app-navbar a,
  body.os-app-shell:not(.os-module-shell) .os-app-navbar button,
  body.os-app-shell:not(.os-module-shell) .os-app-navbar input,
  body.os-app-shell:not(.os-module-shell) .os-app-navbar select,
  body.os-app-shell:not(.os-module-shell) .os-app-navbar [role="button"] {
    -webkit-app-region: no-drag !important;
  }

  .os-public-window-navigation {
    align-items: center !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    gap: 0.12rem !important;
    margin-inline-end: 0.45rem !important;
    -webkit-app-region: no-drag !important;
  }

  .os-public-window-navigation__button {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 0.35rem !important;
    color: #fff !important;
    display: inline-flex !important;
    flex: 0 0 2rem !important;
    height: 1.85rem !important;
    justify-content: center !important;
    padding: 0 !important;
    text-decoration: none !important;
    width: 2rem !important;
  }

  .os-public-window-navigation__button:hover,
  .os-public-window-navigation__button:focus-visible {
    background: rgba(255, 255, 255, 0.2) !important;
    outline: none !important;
  }

  body.os-module-shell.has-sidebar {
    padding-top: var(--os-wco-title-height) !important;
  }

  body.os-module-shell.has-sidebar .os-window-nav-strip:not(.app-sidebar__window-navigation),
  body.os-module-shell.has-sidebar::before {
    left: var(--os-wco-title-x) !important;
    width: var(--os-wco-title-width) !important;
    height: var(--os-wco-title-height) !important;
  }

  /* Marketing pages retain their own header design, but its contents are
     narrowed by the physical left/right caption reservations. */
  body.mk-page > .mk-nav {
    box-sizing: border-box !important;
    padding-left: var(--os-wco-safe-left) !important;
    padding-right: var(--os-wco-safe-right) !important;
    -webkit-app-region: drag !important;
  }

  body.mk-page > .mk-nav .mk-nav-inner {
    box-sizing: border-box !important;
    max-width: min(1180px, 100%) !important;
    width: 100% !important;
  }

  body.mk-page > .mk-nav a,
  body.mk-page > .mk-nav button,
  body.mk-page > .mk-nav [role="button"] {
    -webkit-app-region: no-drag !important;
  }

  /* Every standalone account/login layout uses the same physical safe-right
     edge, independent of LTR/RTL direction and of later page-specific CSS. */
  body.login-shell.login-shell-branded > .login-theme-toggle {
    left: auto !important;
    right: calc(var(--os-wco-safe-right) + 0.65rem) !important;
    top: 0.4rem !important;
    -webkit-app-region: no-drag !important;
  }

  body.login-shell.login-shell-branded > .login-welcome-language-bar:not(.os-howitworks-topbar) {
    left: auto !important;
    right: calc(var(--os-wco-safe-right) + 3.8rem) !important;
    top: 0.4rem !important;
    -webkit-app-region: no-drag !important;
  }

  body.login-shell.login-shell-organic > .login-vendor-mark {
    left: calc(var(--os-wco-safe-left) + 0.65rem) !important;
    right: auto !important;
    top: 0.4rem !important;
    -webkit-app-region: no-drag !important;
  }

  body.login-shell.login-shell-organic > .os-login-window-titlebar {
    background: #126b45 !important;
    display: block !important;
    height: max(var(--os-wco-title-height), 3.5rem) !important;
    left: 0 !important;
    position: fixed !important;
    top: 0 !important;
    width: 100vw !important;
    z-index: 1190 !important;
    -webkit-app-region: drag !important;
  }

  body.login-shell.login-shell-organic > .login-branded-layout {
    padding-top: max(calc(var(--login-chrome-control-size, 2.65rem) + 1.2rem), calc(var(--os-wco-title-height) + 0.45rem)) !important;
  }

  body.os-howitworks > .login-welcome-language-bar.os-howitworks-topbar {
    box-sizing: border-box !important;
    margin-left: var(--os-wco-safe-left) !important;
    margin-right: var(--os-wco-safe-right) !important;
    margin-top: calc(var(--os-wco-title-height) + 0.35rem) !important;
    max-width: none !important;
    width: calc(100% - var(--os-wco-safe-left) - var(--os-wco-safe-right)) !important;
    -webkit-app-region: drag !important;
  }

  body.os-howitworks > .login-welcome-language-bar.os-howitworks-topbar a,
  body.os-howitworks > .login-welcome-language-bar.os-howitworks-topbar button,
  body.os-howitworks > .login-welcome-language-bar.os-howitworks-topbar [role="button"] {
    -webkit-app-region: no-drag !important;
  }
}