/* =============================================================================
   Sidebar brand logo
   -----------------------------------------------------------------------------
   The chat page's sidebar header shows the company logo instead of a text title
   on the three main tabs (Ask AI, Feed, Chat). Settings keeps its "Settings"
   title: there the heading names a place to navigate, not the product.

   #sidebarTitle is still rendered, visually hidden, so screen readers keep the
   section name and header-tabs.js can keep setting it per mode.

   One image per theme — the light logo has dark lettering, the dark one light
   lettering — switched on the app's own `body.dark-theme` class. Loaded after
   mobile-chat.css so its title rules are overridden here. All selectors are
   scoped to `.sidebar .sidebar-header` (CLAUDE.md rule 2).

   The collapse toggle sits LEFT of the logo (first in the header's DOM) and
   draws one sidebar-panel glyph for both states. On phones it is the drawer's
   close button and is pushed back to the right edge in mobile-chat.css.
   ============================================================================= */

/* Toggle, then logo/title — packed left. main-chat.css spreads the header
   with space-between, which would push the Settings title to the far edge. */
.sidebar:not(.collapsed) .sidebar-header {
    justify-content: flex-start;
    gap: 2px;
    padding-left: 12px;
}

.sidebar .sidebar-header .sidebar-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    color: var(--icon-color);
    transition: background-color .15s ease, color .15s ease;
}
.sidebar .sidebar-header .sidebar-toggle:hover {
    background: var(--surface-hover-bg);
    color: var(--text-color);
}
.sidebar .sidebar-header .sidebar-toggle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}
.sidebar .sidebar-header .sidebar-toggle__icon { display: block; }

.sidebar .sidebar-header .sidebar-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    padding: 0 8px 0 6px;
}

.sidebar .sidebar-header .sidebar-brand__logo {
    display: block;
    height: 23px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    user-select: none;
    -webkit-user-drag: none;
}

.sidebar .sidebar-header .sidebar-brand__logo--dark { display: none; }
body.dark-theme .sidebar .sidebar-header .sidebar-brand__logo--light { display: none; }
body.dark-theme .sidebar .sidebar-header .sidebar-brand__logo--dark { display: block; }

/* Logo instead of the title everywhere but Settings. */
.sidebar:not([data-mode="settings"]) .sidebar-header #sidebarTitle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.sidebar[data-mode="settings"] .sidebar-header .sidebar-brand { display: none; }

/* A collapsed sidebar is a 60px rail: only the toggle fits. */
.sidebar.collapsed .sidebar-header .sidebar-brand { display: none; }

/* Phones: the drawer header is 50px, so the logo steps down with it. */
body.mobile-standalone .sidebar .sidebar-header .sidebar-brand { padding-left: 0; }
body.mobile-standalone .sidebar .sidebar-header .sidebar-brand__logo { height: 22px; }

/* Phones, Teams mode: the Chats/Teams segmented control owns the drawer
   header (teams-sidebar.css shows it under this same query). Logo + control +
   close button do not fit in a ~350px drawer — the logo squeezed the control
   until its labels and icons spilled over each other. */
@media (max-width: 768px) {
    .sidebar[data-mode="teams"] .sidebar-header .sidebar-brand { display: none; }
}