/* ============================================================
   BeeBot re-skin layer
   Loaded last: restyles the shared shell (sidebar, navbar, main,
   cards, buttons, inputs, modals, toasts, footer) and the chat
   shell to the approved BeeBot RTL reference.
   NOTE: this file must never contain `.message*` selectors —
   message-thread styling lives in chat.css and must keep winning.
   ============================================================ */

:root {
    --bb-app-bg: linear-gradient(135deg, #f3f4f6 0%, #fbfbfc 38%, #f4f5f8 100%);
    --bb-main-bg:
        radial-gradient(ellipse at 28% 85%, rgba(246, 242, 255, 0.75), transparent 41%),
        radial-gradient(ellipse at 20% 35%, rgba(252, 253, 255, 0.95), transparent 55%);
    --bb-glass: rgba(251, 252, 253, 0.76);
    --bb-glass-border: rgba(255, 255, 255, 0.9);
    --bb-card: rgba(255, 255, 255, 0.9);
    --bb-card-border: rgba(229, 231, 235, 0.8);
    --bb-bee: #6e62c8;
    --bb-accent: #7566cf;
    --bb-accent-soft: #f0effd;
    --bb-accent-ink: #5c53ae;
    --bb-grad: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%);
    --bb-landing-grad: linear-gradient(135deg, #6f61ca 0%, #9b83e9 45%, #73cfe3 100%);
    --bb-shadow-soft: 0 20px 48px rgba(91, 93, 123, 0.08);
    --bb-shadow-panel: 0 12px 34px rgba(105, 109, 129, 0.06);
    --bb-shadow-hover: 0 18px 38px rgba(89, 78, 177, 0.12);
    --bb-scroll: #d9d6ef;
    --sidebar-w: 257px;
    --sidebar-text: #29292f;
    --sidebar-muted: #6b7280;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.7);
    --sidebar-hover-text: #5c53ae;
}

html[data-theme="dark"] {
    --bb-app-bg: linear-gradient(135deg, #11121a 0%, #171822 46%, #11121a 100%);
    --bb-main-bg:
        radial-gradient(ellipse at 28% 85%, rgba(83, 70, 148, 0.18), transparent 41%),
        radial-gradient(ellipse at 20% 35%, rgba(32, 34, 49, 0.9), transparent 55%);
    --bb-glass: rgba(26, 27, 39, 0.92);
    --bb-glass-border: rgba(103, 99, 151, 0.2);
    --bb-card: rgba(31, 32, 47, 0.82);
    --bb-card-border: #39384f;
    --bb-accent-soft: rgba(117, 102, 207, 0.18);
    --bb-accent-ink: #c3b9ff;
    --bb-shadow-soft: 0 20px 48px rgba(0, 0, 0, 0.3);
    --bb-shadow-panel: 0 12px 34px rgba(0, 0, 0, 0.24);
    --bb-shadow-hover: 0 18px 38px rgba(0, 0, 0, 0.35);
    --bb-scroll: #3f3c60;

    --bg-color: #11121a;
    --surface: #1d1e2b;
    --surface-2: #232437;
    --tint: #262738;
    --border-color: #343449;
    --text-color: #ececf4;
    --text-muted: #b8b6ca;
    --primary-ink: #c3b9ff;
    --sidebar-text: #ececf4;
    --sidebar-muted: #9a98b0;
    --sidebar-hover-bg: rgba(117, 102, 207, 0.14);
    --sidebar-hover-text: #c3b9ff;

    --bs-body-bg: #11121a;
    --bs-body-bg-rgb: 17, 18, 26;
    --bs-body-color: #ececf4;
    --bs-body-color-rgb: 236, 236, 244;
    --bs-tertiary-bg: #232437;
    --bs-secondary-bg: #262738;
    --bs-secondary-color: #b8b6ca;
    --bs-border-color: #343449;
    --bs-emphasis-color: #11121a;
    --bs-link-color: #b7adff;
    --bs-link-hover-color: #d5cdff;
    --bs-primary: #8b7ee0;
    --bs-primary-rgb: 139, 126, 224;
    --bs-dropdown-bg: #1d1e2b;
    --bs-dropdown-border-color: #343449;
    --bs-dropdown-link-color: #ececf4;
    --bs-dropdown-link-hover-bg: rgba(117, 102, 207, 0.18);
    --bs-dropdown-link-active-bg: #6e62c8;
    --bs-modal-bg: #1d1e2b;
    --bs-toast-bg: #26253a;
    --bs-toast-border-color: #4a4479;
}

/* ---------- Page canvas ---------- */
body {
    background-color: var(--bg-color);
    background-image: var(--bb-app-bg);
    background-attachment: fixed;
    background-size: cover;
}

.main-content {
    background-image: var(--bb-main-bg);
    padding: 3rem 0 1.5rem;
}

@media (max-width: 991.98px) {
    .main-content {
        padding: 1.75rem 0 1.25rem;
    }
}

/* ---------- Sidebar (glass rail) ---------- */
.app-sidebar {
    top: 1.75rem;
    bottom: 0;
    background: var(--bb-glass);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    border-left: 1px solid var(--bb-glass-border);
    border-top: 1px solid var(--bb-glass-border);
    border-radius: 1rem 0 0 0;
    box-shadow: var(--bb-shadow-panel);
    padding: 1rem 0.8rem 0.9rem;
    scrollbar-color: var(--bb-scroll) transparent;
}

.app-sidebar::-webkit-scrollbar-thumb {
    background: var(--bb-scroll);
    border-radius: 99px;
}

.side-brand-mark {
    background: var(--bb-grad);
    color: #fff;
    border: none;
    box-shadow: 0 8px 20px rgba(137, 127, 225, 0.24);
}

.side-brand-name {
    color: var(--sidebar-text);
    font-weight: 700;
}

.side-label {
    color: var(--sidebar-muted);
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.side-link {
    height: 2.25rem;
    border-radius: 0.5rem;
    color: var(--sidebar-muted);
    font-weight: 500;
}

.side-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}

.side-link.active {
    background: var(--bb-accent-soft);
    color: var(--bb-accent-ink);
    font-weight: 600;
}

.side-link.active::before {
    display: none;
}

.side-group-toggle {
    color: var(--sidebar-muted);
    border-radius: 0.5rem;
}

.side-group-toggle:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}

.side-theme-toggle,
.side-btn-outline {
    border-radius: 0.625rem;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.7);
    color: var(--sidebar-muted);
}

html[data-theme="dark"] .side-theme-toggle,
html[data-theme="dark"] .side-btn-outline {
    background: rgba(38, 39, 56, 0.7);
}

.side-theme-toggle:hover,
.side-btn-outline:hover {
    border-color: #dcd6fb;
    color: var(--bb-accent-ink);
}

.side-btn-primary {
    background: var(--bb-grad);
    border: none;
    color: #fff;
    border-radius: 0.625rem;
    box-shadow: 0 8px 20px rgba(137, 127, 225, 0.24);
}

.side-btn-primary:hover {
    filter: brightness(1.05);
    color: #fff;
}

.side-user {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
}

html[data-theme="dark"] .side-user {
    background: rgba(38, 39, 56, 0.6);
}

.side-user-avatar {
    background: var(--bb-grad);
    color: #fff;
}

/* ---------- Mobile navbar (light glass instead of blue gradient) ---------- */
.navbar-modern {
    background: var(--bb-glass);
    background-image: none;
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    border-bottom: 1px solid var(--bb-glass-border);
    box-shadow: var(--bb-shadow-panel);
}

.navbar-modern::after {
    display: none;
}

.brand-modern,
.brand-modern:hover,
.brand-mark {
    color: var(--bb-accent-ink) !important;
}

.nav-link-modern {
    color: var(--text-muted) !important;
    border-radius: 0.5rem;
}

.nav-link-modern:hover {
    background: var(--sidebar-hover-bg);
    color: var(--bb-accent-ink) !important;
}

.nav-link-modern.active {
    background: var(--bb-accent-soft);
    color: var(--bb-accent-ink) !important;
}

.theme-toggle-icon {
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0.5rem;
}

html[data-theme="dark"] .theme-toggle-icon {
    background: rgba(38, 39, 56, 0.7);
}

.btn-nav-outline,
.btn-nav-user {
    color: var(--text-color);
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0.5rem;
}

html[data-theme="dark"] .btn-nav-outline,
html[data-theme="dark"] .btn-nav-user {
    background: rgba(38, 39, 56, 0.8);
    color: var(--text-color);
}

.btn-nav-outline:hover,
.btn-nav-user:hover {
    border-color: #dcd6fb;
    color: var(--bb-accent-ink);
}

.btn-nav-primary {
    background: var(--bb-grad);
    border: none;
    color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(137, 127, 225, 0.24);
}

.btn-nav-primary:hover {
    filter: brightness(1.05);
    color: #fff;
}

.custom-toggler,
.navbar-toggler-icon {
    filter: none;
}

.custom-toggler {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

/* ---------- Surfaces ---------- */
.card,
.feature-card,
.card-link {
    background: var(--bb-card);
    border: 1px solid var(--bb-card-border);
    border-radius: 1rem;
    box-shadow: var(--bb-shadow-panel);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-link:hover,
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-shadow-hover);
    border-color: #dcd6fb;
}

html[data-theme="dark"] .card-link:hover,
html[data-theme="dark"] .feature-card:hover {
    border-color: #4b4878;
}

.card-header,
.card-footer {
    background: transparent;
    border-color: var(--bb-card-border);
}

.hero-section,
.page-hero {
    background: var(--bb-landing-grad);
    border: none;
    border-radius: 1.25rem;
    color: #fff;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-modern,
.btn-gradient {
    background: var(--bb-grad);
    border: none;
    color: #fff;
    border-radius: 0.625rem;
    box-shadow: 0 8px 20px rgba(137, 127, 225, 0.24);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-modern:hover,
.btn-gradient:hover {
    filter: brightness(1.05);
    color: #fff;
    background: var(--bb-grad);
}

.btn-outline-primary {
    color: var(--bb-accent-ink);
    border-color: #dcd6fb;
    border-radius: 0.625rem;
}

.btn-outline-primary:hover {
    background: var(--bb-accent-soft);
    color: var(--bb-accent-ink);
    border-color: #c9bffa;
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-radius: 0.625rem;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-color);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background: #262738;
    border-color: #414158;
    color: var(--text-color);
}

.form-control:focus,
.form-select:focus {
    border-color: #b9aef5;
    box-shadow: 0 0 0 3px rgba(117, 102, 207, 0.14);
}

/* ---------- Modals (auth panel look) ---------- */
.modal-content {
    border: 1px solid var(--bb-card-border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: var(--bb-shadow-soft);
}

html[data-theme="dark"] .modal-content {
    background: #1d1e2b;
    border-color: #3a3952;
}

.modal-header,
.modal-footer {
    border-color: var(--bb-card-border);
}

/* ---------- Toasts ---------- */
.toast,
.custom-toast {
    border-radius: 0.75rem;
    box-shadow: var(--bb-shadow-soft);
}

html[data-theme="dark"] .toast,
html[data-theme="dark"] .custom-toast {
    background: #26253a;
    border: 1px solid #4a4479;
    color: #dcd5ff;
}

/* ---------- Footer ---------- */
.footer {
    background: transparent;
    border-top: 1px solid var(--bb-card-border);
    box-shadow: none;
}

.footer-ornament {
    display: none;
}

.footer-text {
    color: var(--text-muted);
}

/* ---------- Chat shell ---------- */
.chat-header {
    background: transparent;
    border-bottom: 1px solid var(--bb-card-border);
}

.messages-container {
    background: transparent;
    scrollbar-color: var(--bb-scroll) transparent;
}

.messages-container::-webkit-scrollbar-thumb {
    background: var(--bb-scroll);
    border-radius: 99px;
}

.chat-input-container {
    background: transparent;
    border-top: none;
    padding: 0.75rem 1.5rem 1.25rem;
}

.chat-input-wrapper {
    max-width: 780px;
    margin: 0 auto;
    background: var(--bb-card);
    border: 1px solid var(--bb-card-border);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: var(--bb-shadow-soft);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.chat-input-wrapper:focus-within {
    border-color: #c9bffa;
    box-shadow: 0 0 0 3px rgba(117, 102, 207, 0.12), var(--bb-shadow-soft);
}

#historySidebar,
.history-sidebar {
    background: var(--bb-glass);
    border: 1px solid var(--bb-glass-border);
    border-radius: 1rem;
    box-shadow: var(--bb-shadow-panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Welcome orb — reference landing mark */
.welcome-message .welcome-icon {
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(142deg, #b69eff 5%, #8f86e7 38%, #8bc9ea 82%);
    box-shadow: 0 8px 20px rgba(137, 127, 225, 0.24);
    transform: rotate(28deg);
    color: #fff;
}

.welcome-message .welcome-icon>* {
    transform: rotate(-28deg);
}

/* ---------- Global scrollbars ---------- */
* {
    scrollbar-color: var(--bb-scroll) transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--bb-scroll);
    border-radius: 99px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {

    .card,
    .feature-card,
    .card-link {
        transition: none;
    }

    .card-link:hover,
    .feature-card:hover {
        transform: none;
    }
}

/* ---------- Conversation history list (compact reference rows) ---------- */
.chat-sidebar {
    background: transparent;
    border-left: 1px solid var(--bb-card-border);
}

.sidebar-header {
    padding: 0.9rem 0.85rem;
    border-bottom: 1px solid var(--bb-card-border);
}

.sidebar-header h5 {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.btn-new-chat {
    padding: 0.3rem 0.7rem;
    font-size: 0.7rem;
    border-radius: 0.5rem;
}

.sessions-list,
.mobile-sidebar-content {
    padding: 0.5rem 0.35rem;
}

.session-item {
    padding: 0.3rem 0.5rem;
    margin-bottom: 1px;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    font-size: 11px;
    line-height: 1.6;
}

.session-item:hover {
    background: var(--sidebar-hover-bg);
    border-color: transparent;
}

.session-item.active {
    background: var(--bb-accent-soft);
    border-color: transparent;
}

.session-item .session-title {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-item:hover .session-title {
    color: var(--text-color);
}

.session-item.active .session-title {
    color: var(--bb-accent-ink);
    font-weight: 600;
}

/* The reference row is a single truncated line: no preview, no per-item date. */
.session-item .session-preview,
.session-item .session-date {
    display: none;
}

.btn-delete-session {
    width: 18px;
    height: 18px;
    font-size: 0.9rem;
}

/* ---------- Collapsible sidebar panel (closed by default) ---------- */
.side-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.side-top .side-brand {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.side-rail-toggle {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.75);
    color: var(--sidebar-muted);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

html[data-theme="dark"] .side-rail-toggle {
    background: rgba(38, 39, 56, 0.75);
}

.side-rail-toggle:hover {
    border-color: #dcd6fb;
    color: var(--bb-accent-ink);
}

/* Closed state: a narrow icon rail. Add `sidebar-open` on <html> to expand. */
html:not(.sidebar-open) {
    --sidebar-w: 64px;
}

html:not(.sidebar-open) .app-sidebar {
    padding-inline: 0.5rem;
    align-items: center;
}

html:not(.sidebar-open) .side-top {
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

html:not(.sidebar-open) .side-brand {
    justify-content: center;
}

html:not(.sidebar-open) .side-brand-name,
html:not(.sidebar-open) .side-label,
html:not(.sidebar-open) .side-group-toggle,
html:not(.sidebar-open) .side-link span,
html:not(.sidebar-open) .side-user-info,
html:not(.sidebar-open) .side-user-logout,
html:not(.sidebar-open) .theme-toggle-label,
html:not(.sidebar-open) .side-btn-outline span,
html:not(.sidebar-open) .side-btn-primary span {
    display: none;
}

html:not(.sidebar-open) #sideAdminGroup {
    display: block !important;
    height: auto !important;
}

html:not(.sidebar-open) .side-link,
html:not(.sidebar-open) .side-theme-toggle,
html:not(.sidebar-open) .side-btn-outline,
html:not(.sidebar-open) .side-btn-primary,
html:not(.sidebar-open) .side-user {
    justify-content: center;
    padding-inline: 0;
    gap: 0;
}

html:not(.sidebar-open) .side-link.side-sub {
    padding-inline-start: 0;
}

html:not(.sidebar-open) .side-footer {
    width: 100%;
}


/* =====================================================================
   Chat reference fidelity — RTL agent workspace
   ===================================================================== */
/* v3.99.26 - Minimal, gap-free chat shell: the page used to reserve
   main-content's top/bottom padding plus the site footer below the
   chat shell, leaving a large empty gap under the composer with no
   footer ever visible in view. On the chat page there is no footer
   chrome left below the viewport, so the shell can use the full
   height and the right-side gap before the icon rail is tightened. */
body:has(.chat-container) .main-content { padding: 0; }
body:has(.chat-container) .footer { display: none; }
.chat-container { height: 100vh; max-height: 100vh; padding: 0 1.75rem 0 7.1%; }
.chat-container > .row { position: relative; flex: 1; }
.chat-sidebar { order: 2; flex: 0 0 257px; max-width: 257px; margin: 0 0 0 2rem; border: 1px solid var(--bb-glass-border); border-radius: 1rem 1rem 0 0; background: var(--bb-glass); box-shadow: var(--bb-shadow-panel); backdrop-filter: blur(17px); }
.chat-main { order: 1; position: relative; flex: 1 1 auto; width: auto; max-width: none; background: transparent; }
.chat-wrapper { padding-top: 0.1rem; }
.chat-header { min-height: 64px; padding: 0.5rem 0; border: 0; background: transparent; justify-content: flex-start; }
.chat-header > .d-flex:first-child { display: none !important; }
.chat-actions { margin-right: 0; }
.chat-actions > .btn-primary { order: -1; width: 34px; height: 34px; padding: 0; border-radius: .55rem; }
.chat-actions > .dropdown { display: none; }
.messages-container { padding: 1.25rem 1rem; background: transparent; }
.welcome-message { min-height: 0; transform: translateY(-1.25rem); }
.welcome-message h4 { font-size: 1.82rem; letter-spacing: -.04em; color: var(--text-color); margin-bottom: .3rem !important; }
.welcome-message p { font-size: 1.72rem; font-weight: 700; letter-spacing: -.05em; color: var(--text-color) !important; margin-bottom: 0 !important; }
.welcome-message p::first-letter { color: var(--bb-accent); }
.welcome-message .btn { display: none; }
.welcome-message .welcome-icon { width: 78px; height: 78px; margin-bottom: .8rem !important; border-radius: 43% 57% 55% 45% / 45% 40% 60% 55%; }
.chat-input-container { padding: .75rem 0 1rem; }
.chat-input-wrapper { min-height: 150px; max-width: 780px; padding: 1rem; align-items: flex-end; gap: .5rem; border-radius: 1rem; }
.chat-input { min-height: 76px; align-self: stretch; padding: .3rem .2rem; font-size: .78rem; line-height: 1.8rem; color: var(--text-color); }
.chat-input::placeholder { color: #8e8f98; }
.btn-file, .btn-stop, .btn-send { width: 32px; height: 32px; border-radius: .5rem; padding: .35rem; align-self: flex-end; }
.btn-file { order: 1; }
.btn-stop { order: 2; }
.btn-send { order: 3; margin-right: auto; }
.input-footer { text-align: center; padding-top: .35rem; font-size: .65rem; }
.input-footer small { font-size: .65rem; }
.sidebar-header { padding: .95rem .85rem .55rem; border: 0; }
.sidebar-header h5 { font-size: .72rem; font-weight: 500 !important; color: var(--text-muted); }
.btn-new-chat { width: 100%; justify-content: center; margin-top: .5rem; padding: .5rem .7rem; font-size: .7rem; }
.sidebar-header { flex-wrap: wrap; }
.sessions-list { padding: .6rem .45rem; }
.session-item { position: relative; padding: .34rem .55rem; margin: 0 0 .12rem; border: 0 !important; border-radius: .5rem; }
.session-item::before { content: 'تاریخچه'; display: block; margin-bottom: .3rem; color: var(--text-muted); font-size: .61rem; opacity: .72; }
.session-item .session-title { margin: 0; color: var(--text-muted); font-size: .69rem; line-height: 1.7; font-weight: 500; }
.session-item .session-preview, .session-item .session-date { display: none; }
.btn-delete-session { position: absolute; left: .25rem; top: 1.45rem; opacity: 0; }
.session-item:hover .btn-delete-session { opacity: 1; }
.agent-rail { position: absolute; top: 1rem; left: calc(-1 * min(21vw, 257px)); z-index: 3; width: min(21vw, 257px); min-width: 205px; padding: 1.2rem; border: 1px solid var(--bb-card-border); border-radius: 1rem; background: var(--bb-glass); box-shadow: var(--bb-shadow-panel); backdrop-filter: blur(14px); }
.agent-rail-heading { display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.agent-rail-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .7rem; background: var(--bb-accent-soft); color: var(--bb-accent); }
.agent-rail-heading strong { display: block; font-size: .72rem; color: var(--text-color); }
.agent-rail-heading small, .agent-rail-title small { display: block; margin-top: .12rem; color: var(--text-muted); font-size: .57rem; }
.agent-rail-status { display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem; padding: .62rem; border: 1px solid #e7e2ff; border-radius: .7rem; background: var(--bb-accent-soft); color: var(--bb-accent-ink); font-size: .64rem; }
.agent-rail-status > span:first-child { width: .4rem; height: .4rem; border-radius: 50%; background: var(--bb-accent); box-shadow: 0 0 0 4px rgba(117,102,207,.09); }
.agent-rail-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.agent-rail-title strong { font-size: .67rem; color: var(--text-color); }
.agent-results { display: grid; gap: .45rem; }
.agent-result { padding: .58rem; border: 1px solid var(--bb-card-border); border-radius: .7rem; background: var(--bb-card); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.agent-result:hover { border-color: #dcd6fb; }
.agent-result.is-active { border-color: var(--bb-accent); background: var(--bb-accent-soft); box-shadow: 0 0 0 2px rgba(117, 102, 207, .22); }
.agent-result .result-kind { display: block; font-size: .56rem; margin-bottom: .22rem; }
.result-kind em { color: var(--text-muted); font-style: normal; }
.result-kind.web { color: #059669; }.result-kind.library { color: #6366f1; }.result-kind.site { color: #0891b2; }
.agent-result strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .65rem; font-weight: 600; line-height: 1.65; color: var(--text-muted); }
@media (max-width: 1180px) { .agent-rail { display: none; }.chat-container { padding-left: 3%; }.chat-sidebar { margin-left: 1rem; } }
@media (max-width: 991.98px) { .chat-container { height: calc(100vh - 76px); padding: 0 1rem; }.chat-sidebar { display: none; }.chat-actions #agentSelect { min-width: 155px; }.chat-header { padding-top: .4rem; } }


/* History sits directly below the agent picker; only one new-chat action remains. */
.chat-history-panel { position: absolute; right: 0; top: 3.35rem; z-index: 4; width: 220px; max-height: calc(100% - 4.25rem); overflow: hidden; border: 1px solid var(--bb-card-border); border-radius: .9rem; background: var(--bb-glass); box-shadow: var(--bb-shadow-panel); backdrop-filter: blur(14px); }
.chat-history-header { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; justify-content: space-between; padding: .75rem; border-bottom: 1px solid var(--bb-card-border); color: var(--text-muted); font-size: .67rem; }
.chat-history-panel .btn-new-chat { width: 100%; margin: 0; padding: .42rem .6rem; font-size: .64rem; }
.chat-history-panel .sessions-list { max-height: min(47vh, 360px); padding: .45rem; overflow-y: auto; }
.chat-history-panel .session-item::before { content: none; }
.chat-history-panel .session-item { padding: .36rem .45rem; }
.chat-history-panel .session-title { padding-left: .5rem; }
.chat-actions > .btn-primary { display: none; }
@media (min-width: 992px) { .messages-container { padding-right: 242px; } .chat-input-container { padding-right: 242px; } }
/* v3.99.25 - Below 992px this same panel becomes the mobile history
   drawer instead of being hidden outright; see the mobile-drawer rules
   further down this file (they override position/width/transform). */


/* Compact sidebar: keep primary destinations visible and reveal secondary tools on demand. */
.side-primary-links { display: contents; }
.side-overflow-toggle { display: none; width: 100%; height: 2.25rem; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: .5rem; background: transparent; color: var(--sidebar-muted); cursor: pointer; }
.side-overflow-toggle:hover, .side-overflow-toggle[aria-expanded="true"] { background: var(--sidebar-hover-bg); color: var(--bb-accent-ink); }
.side-overflow-menu { display: block; }
.side-nav .side-link svg { stroke-width: 2; transition: transform .18s ease, stroke .18s ease; }
.side-nav .side-link:hover svg, .side-nav .side-link.active svg { transform: scale(1.08); stroke-width: 2.25; }
html.sidebar-open .side-overflow-toggle { display: none; }
html.sidebar-open .side-overflow-menu { display: block; position: static; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
html:not(.sidebar-open) .side-primary-links { display: grid; width: 100%; gap: .25rem; }
html:not(.sidebar-open) .side-primary-links .side-link { display: flex; height: 2.5rem; align-items: center; justify-content: center; }
html:not(.sidebar-open) .side-primary-links .side-link svg { width: 21px; height: 21px; }
html:not(.sidebar-open) .side-overflow-toggle { display: flex; margin-top: .3rem; }
html:not(.sidebar-open) .side-overflow-menu { display: none !important; }
html:not(.sidebar-open).sidebar-more-open .side-overflow-menu { position: absolute; top: 8.5rem; left: calc(100% + .6rem); z-index: 40; display: block !important; width: 220px; max-height: calc(100vh - 10rem); overflow-y: auto; padding: .55rem; border: 1px solid var(--bb-card-border); border-radius: .85rem; background: var(--bb-glass); box-shadow: var(--bb-shadow-soft); backdrop-filter: blur(17px); }
html:not(.sidebar-open).sidebar-more-open .side-overflow-menu .side-label { display: block; padding: .35rem .5rem; }
html:not(.sidebar-open).sidebar-more-open .side-overflow-menu .side-link,
html:not(.sidebar-open).sidebar-more-open .side-overflow-menu .side-group-toggle { display: flex; width: 100%; padding-inline: .65rem; gap: .65rem; justify-content: flex-start; }
html:not(.sidebar-open).sidebar-more-open .side-overflow-menu .side-link span,
html:not(.sidebar-open).sidebar-more-open .side-overflow-menu .side-group-toggle span { display: inline; }
html:not(.sidebar-open).sidebar-more-open #sideAdminGroup { display: none !important; }
html:not(.sidebar-open).sidebar-more-open #sideAdminGroup.show { display: block !important; }
.side-nav { position: relative; }


/* The collapsed sidebar sits on the right, so the More popover opens into the app (left). */
html:not(.sidebar-open).sidebar-more-open .side-overflow-menu { right: calc(100% + .6rem); left: auto; }


/* Native details makes the More control work without depending on JavaScript or CSP. */
.side-overflow-details { display: block; }
.side-overflow-details > summary { list-style: none; }
.side-overflow-details > summary::-webkit-details-marker { display: none; }
html.sidebar-open .side-overflow-details > summary { display: none; }
html:not(.sidebar-open) .side-overflow-details > summary { display: flex; }
html:not(.sidebar-open) .side-overflow-details .side-overflow-menu { display: none !important; }
html:not(.sidebar-open) .side-overflow-details[open] .side-overflow-menu { position: absolute; top: 8.5rem; right: calc(100% + .6rem); left: auto; z-index: 50; display: block !important; width: 220px; max-height: calc(100vh - 10rem); overflow-y: auto; padding: .55rem; border: 1px solid var(--bb-card-border); border-radius: .85rem; background: var(--bb-glass); box-shadow: var(--bb-shadow-soft); backdrop-filter: blur(17px); }
html:not(.sidebar-open) .side-overflow-details[open] .side-overflow-menu .side-label { display: block; padding: .35rem .5rem; }
html:not(.sidebar-open) .side-overflow-details[open] .side-overflow-menu .side-link,
html:not(.sidebar-open) .side-overflow-details[open] .side-overflow-menu .side-group-toggle { display: flex; width: 100%; padding-inline: .65rem; gap: .65rem; justify-content: flex-start; }
html:not(.sidebar-open) .side-overflow-details[open] .side-overflow-menu .side-link span,
html:not(.sidebar-open) .side-overflow-details[open] .side-overflow-menu .side-group-toggle span { display: inline; }
html:not(.sidebar-open) .side-overflow-details[open] #sideAdminGroup { display: none !important; }
html:not(.sidebar-open) .side-overflow-details[open] #sideAdminGroup.show { display: block !important; }

/* Keep the compact More menu above the page canvas and outside the sidebar clipping area. */
html:not(.sidebar-open) .app-sidebar { overflow: visible; }
html:not(.sidebar-open) .side-overflow-details[open] .side-overflow-menu {
    position: fixed;
    top: 8.75rem;
    right: calc(var(--sidebar-w) + .75rem);
    left: auto;
    z-index: 20000;
}


/* =====================================================================
   v3.99.21 - Reference fidelity pass (agent picker, history rows, results)
   Matches the approved BeeBot RTL mock exactly: the model-picker button
   and its dropdown menu, single-line text-only history rows (no hover
   fill), and the compact "نتایج پیدا شده" result cards.
   ===================================================================== */

/* ---------- Agent picker: reference "model button" look ---------- */
.agent-picker { position: relative; }
/* Keep the semantic select on top of the styled control. The previous
   `pointer-events: none` + `tabindex=-1` combination made the picker appear
   interactive while preventing keyboard and native-select interaction. */
.agent-picker-native {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.agent-picker-button {
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 2.5rem;
    min-width: 170px;
    max-width: 190px;
    padding: 0 .75rem;
    border: 1px solid #eeedf3;
    border-radius: .55rem;
    background: var(--bb-card);
    box-shadow: 0 2px 6px rgba(55, 55, 72, .05);
    color: var(--text-color);
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
}
html[data-theme="dark"] .agent-picker-button { border-color: #343449; }
.agent-picker-button:hover { border-color: #dcd6fb; }
.agent-picker-button.disabled,
.agent-picker-button:disabled { opacity: .55; cursor: not-allowed; }
.agent-picker-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: .4rem;
    background: var(--bb-accent-soft);
    color: var(--bb-accent);
    font-size: .68rem;
}
.agent-picker-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.agent-picker-chevron {
    flex-shrink: 0;
    margin-inline-start: .15rem;
    color: var(--text-muted);
    font-size: .65rem;
}
.agent-picker-menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 30;
    display: none;
    width: max(100%, 190px);
    max-height: 260px;
    overflow-y: auto;
    padding: .375rem;
    border: 1px solid var(--bb-card-border);
    border-radius: .85rem;
    background: var(--surface);
    box-shadow: var(--bb-shadow-soft);
}
.agent-picker-menu.open { display: block; }
.agent-picker-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    height: 2.25rem;
    padding: 0 .5rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--text-muted);
    font-size: .69rem;
    text-align: right;
    cursor: pointer;
}
.agent-picker-option:hover { background: var(--bb-accent-soft); color: var(--bb-accent-ink); }
.agent-picker-option.active { background: var(--bb-accent-soft); color: var(--bb-accent-ink); font-weight: 600; }
.agent-picker-option-icon { flex-shrink: 0; color: var(--bb-accent); font-size: .68rem; }
.agent-picker-option-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 991.98px) { .agent-picker-button { min-width: 150px; } }

/* ---------- History rows: single truncated line, text-only hover ----------
   The reference list never fills a background on hover/active; only the
   row's text color shifts (muted -> full -> accent for the open chat). */
.chat-history-panel .session-item {
    padding: .375rem .5rem;
    margin: 0 0 .05rem;
    border: 0 !important;
    border-radius: .4rem;
    background: transparent !important;
}
.chat-history-panel .session-item:hover,
.chat-history-panel .session-item.active {
    background: transparent !important;
}
.chat-history-panel .session-title {
    padding-left: 0;
    font-size: .6875rem;
    line-height: 1.45;
    font-weight: 400;
    color: var(--sidebar-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-history-panel .session-item:hover .session-title { color: var(--text-color); }
.chat-history-panel .session-item.active .session-title { color: var(--bb-accent-ink); font-weight: 600; }
.chat-history-panel .btn-delete-session { opacity: 0; }
.chat-history-panel .session-item:hover .btn-delete-session,
.chat-history-panel .session-item.active .btn-delete-session { opacity: 1; }

/* ---------- Results list: compact reference cards ---------- */
.agent-rail-heading strong { font-size: .75rem; font-weight: 700; }
.agent-rail-heading small { font-size: .5625rem; margin-top: .125rem; }
.agent-rail-title strong { font-size: .75rem; font-weight: 700; }
.agent-rail-title small { font-size: .5625rem; }
.agent-result { padding: .625rem; border-radius: .75rem; }
.agent-result .result-kind {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-bottom: 0;
    font-size: .5625rem;
}
.agent-result strong {
    display: -webkit-box;
    margin-top: .25rem;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .625rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--text-muted);
}
.result-kind.web { color: #059669; }
.result-kind.library { color: #4f46e5; }
.result-kind.site { color: #0891b2; }


/* =====================================================================
   v3.99.22 - Fix: results rail was clipped, not "not shown automatically"
   .chat-container inherited `overflow: hidden` from chat.css, and the
   rail was positioned with a NEGATIVE left offset (outside .chat-main's
   own box) to sit in the padding gutter. Any offset that fell outside
   the container's own border-box was clipped away, so the rail rendered
   off-screen in most viewport widths - it never "came up automatically"
   even though the JS always populated it. The reference keeps the rail
   flush with the main column's own left edge (never outside it), so we
   do the same here: no negative offset, nothing to clip, nothing that
   can bleed past the viewport and create a stray horizontal scrollbar.
   ===================================================================== */
.chat-container { overflow: visible; }
.agent-rail { left: 0; width: min(20vw, 230px); min-width: 190px; }
@media (min-width: 1181px) {
    .messages-container { padding-left: calc(min(20vw, 230px) + 1.5rem); }
}

/* Reference-width history panel (257px, matching the reference sidebar). */
.chat-history-panel { width: 257px; }
@media (min-width: 992px) {
    .messages-container { padding-right: 277px; }
    .chat-input-container { padding-right: 277px; }
}

/* =====================================================================
   v3.99.24 - History always visible + agent picker moved above history
   list (user-reported: the toggle defaulted to hidden and never showed
   automatically; the model/agent picker now lives at the top of the
   history panel instead of the chat header, so there is one switcher,
   not a duplicated control).
   `.chat-container.sidebar-collapsed` is kept as the mechanism behind the
   manual toggle button, it is simply no longer the default state.
   ===================================================================== */
@media (min-width: 992px) {
    .chat-container.sidebar-collapsed .chat-history-panel { display: none; }
    .chat-container.sidebar-collapsed .messages-container,
    .chat-container.sidebar-collapsed .chat-input-container {
        padding-right: 0;
    }
}

/* v3.99.26 - The (visually empty) .chat-header is a flex item with
   z-index: 10 (chat.css), so it painted over the top ~64px of the docked
   history panel (z-index: 4) and swallowed every click on the agent
   picker, making it look locked. Lift the docked side panels above the
   header on desktop (mobile drawer keeps its own z-index: 1045). */
@media (min-width: 992px) {
    .chat-history-panel,
    .agent-rail { z-index: 11; }
}

.chat-history-agent-picker {
    padding: .75rem .75rem .6rem;
    border-bottom: 1px solid var(--bb-card-border);
}
.chat-history-agent-picker .agent-picker-button {
    width: 100%;
    min-width: 0;
    max-width: none;
}
.chat-history-agent-picker .agent-picker-menu {
    width: 100%;
}

/* Sources & activities list: selecting the card matching a clicked
   citation number (handled in chat.js) gets the same visual treatment
   as Parsa's SourcesSidebar "active" card. */
.agent-result.is-active strong { color: var(--bb-accent-ink); }

/* =====================================================================
   v3.99.25 - Mobile history drawer + composer redesign to match the
   main (Parsa) frontend.

   1) History on small screens (<992px): the docked panel used to be
      hidden outright with `display: none` and a second, separate
      `#mobileSidebar` off-canvas drawer (with its own session list)
      stood in for it. That meant two places rendered the same
      sessions, a second agent picker would have been needed there too,
      and picking an old chat from it never closed the drawer. The ONE
      `#historySidebar` panel (agent picker + session list) now slides
      in from the inline-end edge as the mobile drawer as well, so
      there is still only one history list and one switcher anywhere in
      the page. `#mobileSidebar` / `#mobileSidebarOverlay` are no longer
      used by chat.html and can be removed from it; chat.js closes the
      drawer itself after creating or opening a chat on a small screen.
   2) Composer: restyled as a single rounded card (white, blue-ish
      focus ring) with the textarea on top and the attach/stop/send
      controls in a row underneath, matching the Parsa `.prs-composer`
      / `.prs-textarea-shell` / `.prs-controls` layout instead of the
      previous plain single-row bar.
   ===================================================================== */

@media (max-width: 991.98px) {
    .chat-history-panel {
        position: fixed;
        inset-inline-end: 0;
        inset-block: 0;
        top: 0;
        bottom: 0;
        z-index: 1045;
        width: min(86vw, 320px);
        max-height: none;
        border-radius: 0;
        border-inline-start: 1px solid var(--bb-card-border);
        box-shadow: var(--bb-shadow-soft);
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .25s ease, visibility .25s ease;
    }
    .chat-container.mobile-history-open .chat-history-panel {
        transform: translateX(0);
        visibility: visible;
    }
    .chat-history-panel .sessions-list {
        max-height: none;
        flex: 1 1 auto;
    }
    .mobile-history-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1044;
        background: rgba(17, 18, 26, 0.38);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }
    /* .chat-container and .mobile-history-backdrop are both direct children
       of base.html's `.container-fluid`, so the sibling selector reaches it
       regardless of what else (modals, the admin trace panel, ...) sits
       between them in the markup. */
    .chat-container.mobile-history-open ~ .mobile-history-backdrop {
        opacity: 1;
        visibility: visible;
    }
}

/* ---------- Composer: Parsa-style rounded card ---------- */
.chat-input-container { padding: .75rem 1rem 1.1rem; }
.chat-input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    max-width: 720px;
    padding: .4rem;
    border: none;
    border-radius: 1.3rem;
    background: var(--bb-card);
    box-shadow: var(--bb-shadow-soft);
}
.chat-input-wrapper:focus-within {
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--bb-accent), var(--bb-shadow-soft);
}
.chat-input-shell {
    border: 1px solid var(--bb-card-border);
    border-radius: 1rem;
    background: var(--bb-card);
    transition: border-color .2s ease;
}
.chat-input-wrapper:focus-within .chat-input-shell {
    border-color: var(--bb-accent);
}
.chat-input {
    display: block;
    width: 100%;
    min-height: 60px;
    max-height: 150px;
    padding: .65rem .75rem;
    font-size: .82rem;
    line-height: 1.7;
}
.chat-input-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    min-height: 2.5rem;
    padding: .3rem .25rem 0;
}
.chat-input-controls-start {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.btn-file, .btn-stop, .btn-send {
    width: 2.1rem;
    height: 2.1rem;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-radius: .6rem;
    align-self: center;
}
.btn-file {
    border: none;
    background: transparent;
    color: var(--bb-accent);
    margin-right: 0;
}
.btn-file:hover { background: var(--bb-accent-soft); }
.btn-send {
    background: var(--bb-grad);
    border: none;
    box-shadow: 0 6px 16px rgba(137, 127, 225, 0.28);
}
.btn-send:hover:not(:disabled) { filter: brightness(1.05); }
.btn-send:disabled { opacity: .5; box-shadow: none; }
.btn-stop {
    background: #ef4444;
    border: none;
    color: #fff;
}
.btn-stop:hover { background: #dc2626; }
.input-footer { padding-top: .3rem; }
@media (max-width: 639.98px) {
    .chat-input-wrapper { border-radius: 1.1rem; }
}

/* Mobile-only close button inside the history drawer header (desktop hides
   it via Bootstrap's d-lg-none utility already on the element itself). */
.chat-history-mobile-close {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border-radius: .5rem;
}
@media (max-width: 991.98px) {
    .chat-history-header { flex-wrap: nowrap; }
    .chat-history-header .btn-new-chat { width: auto; flex: 1 1 auto; }
}

/* Fill the desktop chat rails and keep the conversation area compact. */
@media (min-width: 992px) {
    .chat-container {
        padding-inline: .75rem;
    }

    .agent-rail,
    .chat-history-panel {
        top: .5rem;
        bottom: .75rem;
        max-height: none;
    }

    .agent-rail {
        width: min(22vw, 260px);
        min-width: 210px;
        display: flex;
        flex-direction: column;
        padding: 1rem;
    }

    .agent-results {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-inline-end: .2rem;
    }

    .chat-history-panel {
        width: min(23vw, 280px);
        display: flex;
        flex-direction: column;
    }

    .chat-history-panel .sessions-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    .messages-container {
        padding-right: calc(min(23vw, 280px) + 1.25rem);
        padding-left: calc(min(22vw, 260px) + 1.25rem);
    }

    .chat-input-container {
        padding-right: calc(min(23vw, 280px) + 1.25rem);
        padding-left: calc(min(22vw, 260px) + 1.25rem);
    }
}


/* Improve chat readability and make history entries easier to scan. */
.chat-history-header {
    color: #363342;
    font-size: .76rem;
    font-weight: 700;
}

.chat-history-panel .sessions-list {
    padding: .6rem .5rem;
}

.chat-history-panel .session-item {
    position: relative;
    margin: .2rem 0;
    padding: .58rem .68rem;
    border: 1px solid transparent !important;
    border-inline-start: 3px solid transparent !important;
    border-radius: .65rem;
    background: rgba(255, 255, 255, .46) !important;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.chat-history-panel .session-item:hover {
    border-color: #e4e0fa !important;
    border-inline-start-color: #a79be9 !important;
    background: #f7f5ff !important;
    transform: translateX(-2px);
}

.chat-history-panel .session-item.active {
    border-color: #dcd6fb !important;
    border-inline-start-color: var(--bb-accent) !important;
    background: #f0effd !important;
}

.chat-history-panel .session-title {
    font-size: .76rem;
    line-height: 1.55;
    font-weight: 500;
    color: #535061;
}

.chat-history-panel .session-item:hover .session-title {
    color: #302d3c;
}

.chat-history-panel .session-item.active .session-title {
    color: #51479a;
    font-weight: 700;
}

.agent-rail-heading strong,
.agent-rail-title strong {
    color: #393647;
}

.agent-rail-heading small,
.agent-rail-title small,
.agent-result strong {
    color: #605d6d;
}

.agent-result strong {
    font-size: .68rem;
    font-weight: 650;
}

/* v3.99.27 - Mobile (<992px): the only control that opens the history
   drawer (agent picker + session list) is the d-lg-none hamburger inside
   the header's first .d-flex, but `.chat-header > .d-flex:first-child`
   is hidden with `display: none !important` (desktop look), so on small
   screens the drawer could never be opened. Show that group on mobile
   only; the desktop-only toggle inside it stays hidden via d-none. */
@media (max-width: 991.98px) {
    .chat-header > .d-flex:first-child { display: flex !important; }
    .chat-header #chatTitle {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .95rem;
    }
}