/* ===== Top Bar - Thanh tiêu đề cổng thông tin ===== */
.top-bar {
    width: 100%;
    height: var(--top-bar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Gradient đỏ đậm với hiệu ứng sáng nhẹ ở giữa */
    background: linear-gradient(90deg, 
        #4A0000 0%, 
        #6B0F0F 15%, 
        #7A1A1A 35%, 
        #8B2020 50%, 
        #7A1A1A 65%, 
        #6B0F0F 85%, 
        #4A0000 100%);
    position: relative;
    z-index: 101;
    /* Viền trang trí phía dưới */
    border-bottom: 2px solid #C5A028;
    box-shadow: 0 2px 8px rgba(74, 0, 0, 0.4);
}

/* Chữ tiêu đề trên top bar */
.top-bar-text {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #F0C840;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== App Header - Gradient xanh với trống đồng Đông Sơn ===== */
.app-header {
    height: var(--header-height);
    /* Grid 3 cột: 2 cột bên co giãn đều nhau (tối thiểu bằng nội dung) để
       title ở giữa căn đúng tâm trang khi đủ rộng, không bao giờ đè logo */
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
    align-items: center;
    padding: 0 var(--spacing-xl);
    /* Gradient: sáng loang ở giữa, đậm dần sang 2 bên */
    background:
        radial-gradient(ellipse 55% 130% at 50% 50%, rgba(82, 200, 245, 0.4) 0%, transparent 70%),
        linear-gradient(90deg, #03437A 0%, #0968AD 22%, #2AA3DC 50%, #0968AD 78%, #03437A 100%);
    position: sticky;
    top: 0;
    z-index: 100;
    /* Bù trừ cho top bar khi sticky */
    /* top: var(--top-bar-height) đã không cần vì top bar không sticky */
    overflow: hidden;
    border-bottom: none;
    box-shadow: 0 2px 10px rgba(3, 67, 122, 0.35);
}

/* Trống đồng Đông Sơn - hình nền mờ trang trí */
.header-drum-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: auto;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
    object-fit: contain;
    filter: brightness(3) grayscale(1);
}

/* Logo 2 bên header */
.header-logo-left,
.header-logo-right {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Gán cột cố định: khi .header-title bị ẩn (màn hình hẹp), logo phải vẫn
   nằm đúng cột 3 thay vì bị auto-placement đẩy vào cột giữa */
.header-logo-left {
    grid-column: 1;
    justify-self: start;
}

.header-logo-right {
    grid-column: 3;
    justify-self: end;
}

.logo-link {
    display: flex;
    align-items: center;
}

.header-logo-img {
    height: 48px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

/* 2 logo sở (SCT + SVHTT) — huy hiệu tròn/elip kèm text 2 dòng bên cạnh,
   màu vàng lấy từ chữ trong logo SCT gốc (#F8EF6E) */
.logo-link-dept {
    gap: 8px;
}

.dept-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.25;
}

.dept-text span {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase; /* desktop viết hoa; mobile bỏ để hẹp + dễ đọc hơn */
    color: #F8EF6E;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Tiêu đề chính giữa header — cột giữa của grid, không dùng absolute
   để không bao giờ đè lên 2 cụm logo dù cụm trái đã rộng thêm (SCT + SVHTT). */
.header-title {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    z-index: 1;
    text-align: center;
    padding: 0 var(--spacing-md);
    pointer-events: none; /* Cho phép click xuyên qua tới logo phía dưới nếu cần */
}

.header-subtitle {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 2px;
}

.header-heading {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.header-desc {
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    margin: 2px 0 0;
    line-height: 1.3;
}

/* Logo trái - chứa cả menu toggle */
.header-logo-left {
    gap: var(--spacing-sm);
}

/* Nút điều chỉnh cỡ chữ */
.font-adjuster {
    display: flex;
    border-radius: var(--radius-round);
    padding: 2px;
}

/* Style khi trong sidebar */
.sidebar-font-adjuster {
    background-color: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-sm);
    justify-content: center;
}

.sidebar-font-adjuster button {
    color: var(--color-ink);
}

.sidebar-font-adjuster button:hover {
    background-color: var(--color-border);
}

.font-adjuster button {
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-round);
    font-size: var(--font-size-caption);
    font-weight: 600;
    transition: background-color 0.2s;
}

/* Menu toggle cho responsive */
.menu-toggle {
    display: none;
    padding: var(--spacing-xs);
    color: white;
}

/* Main Layout Grid — body là cột flex (base.css), phần này chiếm hết chỗ còn lại.
   KHÔNG dùng calc(100vh - ...) vì 100vh sai trên iOS Safari. */
.top-bar,
.app-header,
.mobile-partners-strip {
    flex-shrink: 0;
}

.app-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0; /* bắt buộc để chat-container scroll được trong flex */
    width: 100%;
}

.sidebar-left {
    width: var(--sidebar-left-width);
    flex-shrink: 0;
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-hub {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Important for flex child to not overflow */
    min-height: 0; /* Critical for vertical scroll inside flex child */
    background-color: var(--color-bg);
    height: 100%;
    position: relative;
}

.sidebar-right {
    width: var(--sidebar-right-width);
    flex-shrink: 0;
    background-color: var(--color-bg);
    border-left: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--spacing-lg);
    overflow-y: auto;
}

/* Responsive Breakpoints */

/* Cụm logo trái (2 huy hiệu + text) ~490px + VECOM ~170px + title ~430px:
   dưới 1200px (lúc menu toggle xuất hiện) không đủ chỗ → ẩn title. */
@media (max-width: 1199px) {
    .header-title {
        display: none;
    }
}

/* Dưới 768px (mobile): vẫn giữ text 2 sở (2 dòng) nhưng font nhỏ, bỏ viết hoa
   (chữ thường hẹp hơn ~15%, dễ đọc hơn ở cỡ nhỏ), thu gọn gap + logo VECOM */
@media (max-width: 767px) {
    .dept-text span {
        font-size: 10px;
        letter-spacing: 0;
        line-height: 1.2;
        text-transform: none;
    }

    .logo-link-dept {
        gap: 4px;
    }

    .header-logo-left {
        gap: 6px;
    }

    .header-logo-right .header-logo-img {
        height: 22px;
    }
}

@media (max-width: 1199px) {
    /* Sidebar thành drawer full-height phủ lên trên (đóng khi chạm ra ngoài) */
    .sidebar-left {
        position: fixed;
        left: -100%;
        top: 0;
        height: 100vh;
        height: 100dvh;
        width: min(320px, 85vw);
        z-index: 200;
        transition: left 0.3s ease;
        box-shadow: var(--shadow-lg);
        padding-top: var(--spacing-md);
    }

    .sidebar-left.active {
        left: 0;
    }

    .menu-toggle {
        display: block;
    }

    /* Menu toggle ra sát mép trái, giữ nguyên thứ tự SCT → SVHTT như desktop */
    .menu-toggle {
        order: -1;
    }
}

@media (max-width: 900px) {
    .sidebar-right {
        display: none;
    }

    .mobile-partners-strip {
        display: block !important;
        background-color: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 6px 4px; /* 2026-07-23: hẹp lại (8→4) để đủ chỗ 7 logo */
        scrollbar-width: none; /* Firefox */
    }

    .mobile-partners-strip::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .mobile-partners-track {
        display: flex;
        gap: 3px; /* 2026-07-23: 6→3px, khít lại để đủ chỗ 7 logo (thêm Droppii) */
        align-items: center;
        min-width: max-content;
        justify-content: center;
        width: 100%;
    }

    .mobile-partner-link {
        display: flex;
        align-items: center;
    }

    /* 2026-07-19: toàn bộ logo mobile to thêm 10% theo yêu cầu (gap giữ 6px).
       max-width cũng x1.1 (60→66px) vì các logo ngang bị nghẽn theo chiều rộng.
       Ở đúng 375px dải có thể tràn nhẹ ~25px → strip vốn overflow-x:auto (ẩn scrollbar). */
    .mobile-partner-img {
        height: 24px;
        width: auto;
        max-width: 66px;
        object-fit: contain;
        opacity: 0.75;
    }

    /* Logo khu hỗ trợ (Hợp Luật, OneAds) — nhỏ hơn hẳn nhóm chính */
    .mobile-partner-img.partner-logo-sm {
        height: 18px;
    }

    /* Logo được yêu cầu to hơn 10% so với nhóm (Localis, IM Group, Hợp Luật) */
    .mobile-partner-img.partner-logo-lg {
        height: 26px;
    }

    .mobile-partner-img.partner-logo-sm.partner-logo-lg {
        height: 20px;
    }

    /* Clead ngắn lại 20% trên mobile (2026-07-23) — chỉ set height, width auto
       nên tỷ lệ rộng:cao giữ nguyên, không méo */
    .mobile-partner-img[alt="Clead"] {
        height: 19px;
    }
}

/* Điện thoại hẹp (≤430px): thu logo + gap để 8 logo (thêm Droppii, KLIC 2026-07-24)
   nằm gọn 1 hàng không tràn ngang */
@media (max-width: 430px) {
    .mobile-partners-track {
        gap: 2px;
    }

    .mobile-partner-img {
        height: 18px;
        max-width: 48px;
    }

    .mobile-partner-img.partner-logo-sm {
        height: 14px;
    }

    .mobile-partner-img.partner-logo-lg {
        height: 20px;
    }

    .mobile-partner-img.partner-logo-sm.partner-logo-lg {
        height: 15px;
    }

    .mobile-partner-img[alt="Clead"] {
        height: 14px; /* 18px - 20% */
    }
}

@media (max-width: 768px) {
    :root {
        --header-height: 56px; /* giữ nguyên hoặc nhỏ hơn xíu */
    }

    .header-title {
        display: none !important;
    }
    
    .header-logo-img {
        height: 36px;
    }

    .app-header {
        padding: 0 var(--spacing-md);
    }
}

@media (max-width: 480px) {
    :root {
        --header-height: 50px;
        --top-bar-height: 20px;
    }

    .top-bar-text {
        font-size: 10px;
        letter-spacing: 2px;
    }

    /* Phone hẹp: giảm đồng bộ huy hiệu + font text + VECOM để vừa 360-480px */
    .header-logo-img {
        height: 26px;
    }

    .dept-text span {
        font-size: 8px;
        font-weight: 700;
    }

    .header-logo-right .header-logo-img {
        height: 20px;
    }

    .app-header {
        gap: 0;
        padding: 0 8px;
    }
}

/* Phone rất nhỏ (≤344px): thu nhỏ thêm để không tràn */
@media (max-width: 344px) {
    .header-logo-img {
        height: 20px;
    }

    .dept-text span {
        font-size: 7px;
    }

    .header-logo-right .header-logo-img {
        height: 18px;
    }

    .logo-link-dept {
        gap: 3px;
    }

    .header-logo-left {
        gap: 4px;
    }

    .menu-toggle svg {
        width: 20px;
        height: 20px;
    }

    .app-header {
        padding: 0 6px;
    }
}