/* =============================================================================
   Installed-app title bar (Window Controls Overlay)
   -----------------------------------------------------------------------------
   When the chat page runs as an installed desktop app whose manifest opts into
   `display_override: ["window-controls-overlay"]`, the OS title bar goes away
   and the window buttons are drawn over the page instead. The app header then
   IS the title bar, laid out left to right:

       window buttons · sidebar toggle · brand logo · rest of the header

   Supported by Chromium (Chrome, Edge) installed apps only. Safari web apps
   (macOS) have no equivalent API — the system title bar stays above the page —
   so none of this applies there, and outside this display mode nothing here
   matches at all.

   env(titlebar-area-*) describe the strip the page may use:
     x      — where it starts (after macOS's traffic lights; 0 on Windows)
     width  — how far it runs (stops before Windows' buttons on the right)
   ============================================================================= */

@media (display-mode: window-controls-overlay) {
    /* The headers stand in for the title bar, so they must move the window. */
    .sidebar .sidebar-header,
    .chat-area .chat-header {
        -webkit-app-region: drag;
        app-region: drag;
    }
    /* …while everything you can click in them stays clickable. */
    .sidebar .sidebar-header :is(button, a, input, [role="button"], [tabindex]),
    .chat-area .chat-header :is(button, a, input, select, textarea, label, [role="button"], [tabindex]) {
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }

    /* Left side (macOS): clear the traffic lights before the toggle. */
    .sidebar:not(.collapsed) .sidebar-header {
        padding-left: calc(env(titlebar-area-x, 0px) + 4px);
    }
    /* The collapsed rail is 60px — narrower than the traffic lights. Widen it
       just enough to seat the toggle after them. */
    .sidebar.collapsed {
        width: max(60px, calc(env(titlebar-area-x, 0px) + 44px));
    }
    .sidebar.collapsed .sidebar-header {
        justify-content: flex-start;
        padding-left: env(titlebar-area-x, 0px);
    }

    /* Right side (Windows/Linux): keep the header's own controls out from
       under the minimise / maximise / close buttons. Zero on macOS. */
    .chat-area .chat-header {
        padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 20px);
    }
}