/* ---------- the desktop app's title bar ----------
   Only for `html.desktop-app` (desktop-boot.js): the Orbit desktop app on Windows, where the shell draws the system
   minimize, maximize and close buttons over the top right corner of the page. The top bar becomes the window's title
   bar: slimmer and denser, it moves the window (a double click maximizes), and its right end stays clear of the system
   buttons. The `titlebar-area-*` values come from the browser (Window Controls Overlay); the fallbacks match the
   shell's 36px bar with Windows' three 46px buttons. The website never gets any of this. */
html.desktop-app {
  --tb-h: env(titlebar-area-height, 36px);
  /* the width the system buttons take at the right edge of the window */
  --tb-reserve: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, calc(100vw - 138px)));
  --top-h: var(--tb-h);
}

html.desktop-app .app { grid-template-rows: var(--tb-h) minmax(0, 1fr); padding-top: 0; row-gap: 6px; }
html.desktop-app .topbar {
  -webkit-app-region: drag; user-select: none; height: var(--tb-h); gap: 6px;
  padding-left: env(titlebar-area-x, 0px);
  /* runs to the window's right edge, then leaves the system buttons their corner */
  margin-right: calc(-10px - env(safe-area-inset-right)); padding-right: calc(var(--tb-reserve) + 8px);
}
/* Everything you can click in the bar takes clicks instead of moving the window. Dialogs, menus and toasts that open
   over the bar's strip do too. */
html.desktop-app .topbar :is(button, a, input, [tabindex], .tab-wrap, .voice-panel, .top-actions),
html.desktop-app #layer > *, html.desktop-app #toasts > *, html.desktop-app .skip-link { -webkit-app-region: no-drag; }

/* the logo, above the server rail */
html.desktop-app .brand-tile { width: 28px; height: 28px; border-radius: 8px; }
html.desktop-app .brand-tile img { width: 22px; height: 22px; }
html.desktop-app .update-dot { top: -3px; right: -3px; width: 10px; height: 10px; }

/* back and forward */
.tb-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.tb-btn {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--soft);
  transition: background .12s, color .12s;
}
.tb-btn:hover:not(:disabled) { background: var(--raised); color: var(--text); }
.tb-btn:disabled { color: var(--faint); opacity: .55; cursor: default; }
.tb-btn:focus-visible { outline-offset: 0; }

/* the name of the current place when that is not a server, centred in the room the tabs leave */
html.desktop-app .tabs { flex: 0 1 auto; }
/* on the website the title stays empty and takes no room (nor a gap) in the top bar */
.tb-title:empty { display: none; }
html.desktop-app .tb-title {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--soft); white-space: nowrap; overflow: hidden;
}
.tb-title span { overflow: hidden; text-overflow: ellipsis; }
.tb-title svg { color: var(--muted); }

/* server tabs: one line, with the picture, the name and the unread count */
html.desktop-app .tabs { gap: 6px; padding: 0 2px; align-self: stretch; }
html.desktop-app .tab {
  min-width: 128px; max-width: 210px; height: 28px; gap: 7px; padding: 0 28px 0 4px; border-radius: 8px;
}
html.desktop-app .tab.active { box-shadow: 0 0 0 2px var(--accent-soft); }
html.desktop-app .tab .tile.sm { width: 20px; height: 20px; border-radius: 6px; font-size: 8.5px; }
html.desktop-app .tab .info { display: flex; flex-direction: row; align-items: center; gap: 6px; }
html.desktop-app .tab .name { font-size: 13px; flex: 0 1 auto; min-width: 0; }
html.desktop-app .tab .meta { margin-top: 0; flex: none; }
html.desktop-app .tab .chip-online { display: none; }
html.desktop-app .tab-close { right: 4px; width: 20px; height: 20px; border-radius: 6px; }

/* the actions and the voice connection, at the bar's height */
html.desktop-app .top-actions { padding: 0 2px; gap: 2px; height: 30px; border-radius: 9px; }
html.desktop-app .top-actions :is(.dust-btn, .status-btn) { height: 26px; font-size: 13px; padding-inline: 8px; border-radius: 7px; }
html.desktop-app .top-actions .icon-btn { width: 26px; height: 26px; border-radius: 7px; }
html.desktop-app .topbar .voice-panel { height: 30px; padding: 0 3px 0 10px; border-radius: 9px; gap: 4px; }
html.desktop-app .topbar .vp-info { line-height: 1.1; }
html.desktop-app .topbar .vp-info strong { font-size: 12px; }
html.desktop-app .topbar .vp-where { font-size: 11px; }
html.desktop-app .topbar .voice-panel :is(.icon-btn, .vp-leave) { width: 26px; height: 26px; }

/* sign in and loading: no top bar, so a strip along the top moves the window */
.titlebar-drag { display: none; }
html.desktop-app .titlebar-drag {
  display: block; position: fixed; top: 0; left: 0; right: var(--tb-reserve); height: var(--tb-h); z-index: 1;
  -webkit-app-region: drag;
}
html.desktop-app body:has(.app) .titlebar-drag { display: none; }
html.desktop-app .auth { padding-top: calc(var(--tb-h) + 16px); }

/* Full-window and top-anchored surfaces keep clear of the system buttons' corner and the bar's height. */
/* the roles, members, bans and channel permission screens start below the bar */
html.desktop-app .admin-nav { padding-top: calc(var(--tb-h) + 8px); }
html.desktop-app .admin-main { padding-top: calc(var(--tb-h) + 8px); }
/* dialogs that fill the window's height stop short of the bar */
html.desktop-app .scrim { padding-top: calc(var(--tb-h) + 8px); }
html.desktop-app .modal { max-height: calc(100dvh - var(--tb-h) - 24px); }
/* the image viewer's buttons sit just under the bar */
html.desktop-app .lightbox .bar { top: calc(var(--tb-h) + 8px); }
/* the side sheet (narrow layouts) starts below the bar */
html.desktop-app .sheet.side { padding-top: var(--tb-h); }