/* =============================================================================
   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 a sidebar-panel glyph whose left column is FILLED while the sidebar is
   open and only outlined when it is collapsed. 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; }
/* Open: the panel column is filled. Collapsed: outline only. */
.sidebar.collapsed .sidebar-header .sidebar-toggle__fill { display: none; }
/* A phone drawer keeps the desktop `.collapsed` preference while it is open. */
body.mobile-standalone .sidebar.collapsed.mobile-drawer-open .sidebar-header .sidebar-toggle__fill { display: inline; }

.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; }
}