/* ============================================
   SEAGM-inspired dark gaming theme
   ============================================ */

/* Base fade-in */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in 0.5s ease-out forwards;
    opacity: 0;
}

/* Toast slide-in */
@keyframes slide-in {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

.animate-slide-in {
    animation: slide-in 0.3s ease-out forwards;
}

/* ============================================
   Scroll reveal
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 300ms; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 360ms; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 420ms; }

/* ============================================
   SEAGM dark hero gradient
   ============================================ */
.seagm-hero {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1040 40%, #0d1530 70%, #0a0a1a 100%);
}

@keyframes aurora {
    0%, 100% { opacity: 0.3; transform: scale(1) translateY(0); }
    50% { opacity: 0.6; transform: scale(1.1) translateY(-10px); }
}

.aurora-blob {
    animation: aurora 6s ease-in-out infinite;
}

.aurora-blob:nth-child(2) {
    animation-delay: -2s;
    animation-duration: 8s;
}

.aurora-blob:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 7s;
}

/* ============================================
   Gaming card
   ============================================ */
.game-card-seagm {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.8), rgba(15, 15, 35, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease,
                border-color 0.3s ease;
    backdrop-filter: blur(8px);
}

.game-card-seagm:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.3),
                0 0 0 1px rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
}

.game-card-seagm:hover .game-icon-seagm {
    transform: scale(1.08);
}

.game-icon-seagm {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   Price shimmer (neon blue)
   ============================================ */
@keyframes price-glow {
    0%, 100% { text-shadow: 0 0 8px rgba(99, 102, 241, 0.4); }
    50% { text-shadow: 0 0 16px rgba(99, 102, 241, 0.7), 0 0 30px rgba(139, 92, 246, 0.3); }
}

.price-neon {
    animation: price-glow 2s ease-in-out infinite;
}

/* ============================================
   Neon glow button
   ============================================ */
@keyframes neon-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(99, 102, 241, 0.4), 0 0 30px rgba(99, 102, 241, 0.1); }
    50% { box-shadow: 0 0 20px rgba(99, 102, 241, 0.6), 0 0 50px rgba(99, 102, 241, 0.2); }
}

.neon-btn {
    animation: neon-pulse 2.5s ease-in-out infinite;
}

/* ============================================
   Category pill
   ============================================ */
.cat-pill {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
}

.dark .cat-pill {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

.cat-pill:hover,
.cat-pill.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    border-color: transparent;
    color: white !important;
    box-shadow: 0 4px 15px -3px rgba(79, 70, 229, 0.4);
}

/* ============================================
   Feature card (glass)
   ============================================ */
.glass-card {
    background: linear-gradient(145deg, rgba(30, 30, 50, 0.6), rgba(15, 15, 35, 0.7));
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
}

/* ============================================
   Banner progress bar
   ============================================ */
@keyframes banner-progress {
    from { width: 0%; }
    to { width: 100%; }
}

.banner-progress-bar {
    animation: banner-progress 5s linear forwards;
}

/* Banner slide fade */
@keyframes banner-fade-in {
    from { opacity: 0; transform: scale(1.02); }
    to { opacity: 1; transform: scale(1); }
}

.banner-slide-active {
    animation: banner-fade-in 0.6s ease-out forwards;
}

/* Banner badge glow */
@keyframes badge-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.7); }
}

.banner-badge {
    animation: badge-glow 2s ease-in-out infinite;
}

/* ============================================
   Smooth scroll
   ============================================ */
html {
    scroll-behavior: smooth;
}

/* ============================================
   Header navigation active states
   ============================================ */
/* Desktop nav link: when active, brand color + bold */
.nav-link.is-active {
    color: rgb(79 70 229); /* brand-600 */
    background-color: rgb(238 242 255); /* brand-50 */
    font-weight: 600;
}
.dark .nav-link.is-active {
    color: rgb(165 180 252); /* brand-300 */
    background-color: rgba(99, 102, 241, 0.10);
}
.nav-link.is-active .nav-indicator {
    width: 1.5rem;
}

/* User menu dropdown label: when any child is active, mark parent too */
#navUserMenuBtn.is-active {
    color: rgb(79 70 229);
    background-color: rgb(238 242 255);
    font-weight: 600;
}
.dark #navUserMenuBtn.is-active {
    color: rgb(165 180 252);
    background-color: rgba(99, 102, 241, 0.10);
}
#navUserMenuBtn.is-active #navUserMenuChevron {
    color: rgb(79 70 229);
}
.dark #navUserMenuBtn.is-active #navUserMenuChevron {
    color: rgb(165 180 252);
}

/* Dropdown link active */
.nav-dropdown-link.is-active {
    color: rgb(79 70 229);
    background-color: rgb(238 242 255);
    font-weight: 600;
}
.dark .nav-dropdown-link.is-active {
    color: rgb(165 180 252);
    background-color: rgba(99, 102, 241, 0.10);
}
.nav-dropdown-link.is-active svg {
    color: rgb(99 102 241);
}

/* Mobile drawer link active */
.mobile-nav-link.is-active {
    color: rgb(79 70 229);
    background-color: rgb(238 242 255);
    font-weight: 600;
}
.dark .mobile-nav-link.is-active {
    color: rgb(165 180 252);
    background-color: rgba(99, 102, 241, 0.10);
}
.mobile-nav-link.is-active svg {
    color: rgb(99 102 241);
}

/* Mobile bottom nav active — bigger icon, brand color, top dot indicator */
.mobile-bottom-link.is-active {
    color: rgb(79 70 229);
    font-weight: 700;
}
.dark .mobile-bottom-link.is-active {
    color: rgb(165 180 252);
}
.mobile-bottom-link.is-active svg {
    stroke-width: 2.2;
}
.mobile-bottom-link {
    position: relative;
}
.mobile-bottom-link.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 2px;
    background-color: rgb(79 70 229);
    border-radius: 2px;
}
.dark .mobile-bottom-link.is-active::before {
    background-color: rgb(165 180 252);
}

/* ============================================
   Hide scrollbar on mobile horizontal carousel
   (only #homeGameGrid — keep global scrollbar)
   ============================================ */
#homeGameGrid::-webkit-scrollbar {
    display: none;
}
#homeGameGrid {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ============================================
   Custom scrollbar (dark theme)
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0a0a1a;
}

::-webkit-scrollbar-thumb {
    background: #2a2a4a;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3a5a;
}

/* ============================================
   Bonus badge pulse
   ============================================ */
@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.bonus-badge {
    animation: badge-pulse 2s ease-in-out infinite;
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-in {
        animation: none;
        opacity: 1;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .aurora-blob,
    .price-neon,
    .neon-btn,
    .bonus-badge {
        animation: none;
    }
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ============================================
   User dashboard (sidebar + cards)
   ============================================ */
.user-dashboard-page {
    --dashboard-sidebar-bg: #0f172a;
}

.dashboard-stat-card {
    background: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dark .dashboard-stat-card {
    background: #161b29;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.dashboard-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dashboard-stat-label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-transform: none;
}

.dark .dashboard-stat-label {
    color: #94a3b8;
}

.dashboard-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.dark .dashboard-stat-value {
    color: #f8fafc;
}

.dashboard-panel {
    background: #ffffff;
    border: 1px solid #eef0f4;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.dark .dashboard-panel {
    background: #161b29;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.dashboard-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #eef0f4;
}

.dark .dashboard-panel-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dashboard-panel-link {
    font-size: 13px;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
    transition: color 0.2s ease;
}

.dashboard-panel-link:hover {
    color: #3730a3;
}

.dark .dashboard-panel-link {
    color: #818cf8;
}

.dark .dashboard-panel-link:hover {
    color: #a5b4fc;
}

.dashboard-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    #dashboardSidebar {
        display: flex !important;
        /* relative (không phải static) để nút #dashboardSidebarCollapse
           (`lg:absolute -right-3`, nằm trong aside) bám đúng mép phải sidebar;
           overflow visible để nút không bị cắt khi nhô ra ngoài 12px — phần cắt
           bo góc của card đã do `#dashboardSidebar > div { overflow: hidden }`. */
        position: relative !important;
        transform: none !important;
        margin-left: 0 !important;
        width: 260px !important;
        height: calc(100dvh - 6rem);
        max-height: none;
        overflow: visible;
        z-index: auto !important;
    }

    #dashboardSidebar > div {
        height: 100%;
        overflow: hidden;
    }
    
    #dashboardSidebar nav {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: none;
    }
}

/* Mobile & Tablet - Sidebar as drawer */
@media (max-width: 1023px) {
    #dashboardSidebar {
        display: none !important;
        position: fixed !important;
        inset-y-0 !important;
        left: 0 !important;
        z-index: 60 !important;
        width: 85vw !important;
        max-width: 320px !important;
        /* Đẩy drawer ra ngoài màn hình. Vì có !important, JS KHÔNG thể mở drawer
           bằng inline style — phải toggle class .sidebar-open bên dưới
           (xem openSidebar/closeSidebar trong templates/partials/_sidebar_script.html). */
        transform: translateX(-100%) !important;
        max-height: none;
        overflow: visible;
    }

    #dashboardSidebar.sidebar-open {
        display: flex !important;
        transform: translateX(0) !important;
    }
    
    #dashboardSidebar > div {
        max-height: none;
    }
}

/* Hide overlay/button controls on desktop */
@media (min-width: 1024px) {
    #dashboardSidebarOverlay {
        display: none !important;
    }

    #dashboardSidebarToggle {
        display: none !important;
    }
}

/* Desktop sidebar collapsible state */
#dashboardSidebar.sidebar-collapsed {
    width: 80px !important;
    overflow: hidden !important;
}

#dashboardSidebar.sidebar-collapsed > div {
    overflow: hidden !important;
}

#dashboardSidebar.sidebar-collapsed .truncate {
    display: none !important;
}

#dashboardSidebar.sidebar-collapsed > div > div > span.font-semibold {
    display: none !important;
}

#dashboardSidebar.sidebar-collapsed nav {
    padding: 0 !important;
    overflow: hidden !important;
    max-height: calc(100dvh - 6rem) !important;
}

#dashboardSidebar.sidebar-collapsed .dashboard-nav-link {
    justify-content: center;
    padding: 0.75rem 0 !important;
    min-height: auto !important;
    text-align: center;
}

#dashboardSidebar.sidebar-collapsed .dashboard-nav-link svg {
    margin: 0 !important;
}

#dashboardSidebar.sidebar-collapsed #sidebarAvatar {
    width: 40px !important;
    height: 40px !important;
    margin: 0 auto;
    display: block;
}

#dashboardSidebar.sidebar-collapsed > div > div:first-child {
    padding: 1rem 0 !important;
}

#dashboardSidebar.sidebar-collapsed .mb-2,
#dashboardSidebar.sidebar-collapsed .mt-4,
#dashboardSidebar.sidebar-collapsed .mt-6 {
    display: none !important;
}

/* Hide message badge when collapsed */
#dashboardSidebar.sidebar-collapsed #sidebarMsgBadge {
    display: none !important;
}

/* Hide user info section when collapsed */
#dashboardSidebar.sidebar-collapsed > div > div[id="sidebarAvatar"] ~ div {
    display: none !important;
}

/* Smooth transitions for collapse/expand */
#dashboardSidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ensure nav only scrolls when needed on desktop */
@media (min-width: 1024px) {
    .scrollbar-visible {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
    }
    
    .scrollbar-visible::-webkit-scrollbar {
        width: 6px;
    }
    
    .scrollbar-visible::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .scrollbar-visible::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35);
        border-radius: 3px;
    }
    
    .scrollbar-visible::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }
}

/* Active link styling when collapsed */
#dashboardSidebar.sidebar-collapsed .dashboard-nav-link[aria-current="page"] {
    background: rgba(79, 70, 229, 0.15) !important;
    border-left: 3px solid #6366f1;
}

/* Desktop collapse button hover states */
#dashboardSidebarCollapse:hover {
    transform: scale(1.1);
}

#dashboardSidebarCollapse:active {
    transform: scale(0.95);
}

/* Mobile-focused styles for better touch interaction */
@media (max-width: 1023.98px) {
    #dashboardSidebar {
        display: none;
    }
    #dashboardSidebar.flex {
        display: flex !important;
    }
    
    /* Improve tap targets on mobile */
    #dashboardSidebar .dashboard-nav-link {
        min-height: 44px;
    }
    
    #dashboardSidebarToggle,
    #dashboardSidebarClose {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Smooth entrance animation */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

#dashboardSidebar[data-animate="true"] {
    animation: slideInFromLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus visible styles for keyboard navigation */
.dashboard-nav-link:focus-visible,
#dashboardSidebarToggle:focus-visible,
#dashboardSidebarClose:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #dashboardSidebar,
    #dashboardSidebarOverlay,
    #dashboardSidebarCollapse svg {
        transition: none;
        animation: none;
    }
}

body[data-page="dashboard"] #navLinks a[href="/dashboard"],
body[data-page="dashboard"] #navLinks a[href="/admin"],
body[data-page="dashboard"] #navLinks a#logoutBtn,
body[data-page="dashboard"] #mobileMenu a[href="/dashboard"],
body[data-page="dashboard"] #mobileMenu a[href="/admin"] {
    display: none !important;
}

/* ============================================
   Chat image styles
   ============================================ */
.chat-image {
    max-width: 280px;
    max-height: 280px;
    border-radius: 12px;
    cursor: pointer;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.chat-image:hover {
    opacity: 0.85;
}

.chat-image-preview {
    position: relative;
    display: inline-block;
}

.chat-image-preview img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
}

.dark .chat-image-preview img {
    border-color: #374151;
}

.chat-image-preview button {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image lightbox */
.chat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: fade-in 0.2s ease-out forwards;
}

.chat-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
}

/* Emoji picker */
.emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15);
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
}

.dark .emoji-picker {
    background: #1e2235;
    border-color: #374151;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
}

.emoji-picker button {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.emoji-picker button:hover {
    background: #f1f5f9;
}

.dark .emoji-picker button:hover {
    background: #374151;
}

/* Quick replies */
.quick-replies {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 0 8px;
}

.quick-reply-chip {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.dark .quick-reply-chip {
    background: #1e2235;
    border-color: #374151;
    color: #94a3b8;
}

.quick-reply-chip:hover {
    background: #4f46e5;
    color: white;
    border-color: #4f46e5;
}

.quick-reply-add {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px dashed #cbd5e1;
    background: transparent;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
}

.dark .quick-reply-add {
    border-color: #4b5563;
    color: #6b7280;
}

/* File chip */
.file-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    max-width: 260px;
}

.file-chip:hover {
    background: rgba(255,255,255,0.25);
}

.dark .file-chip {
    background: rgba(255,255,255,0.08);
}

.file-chip-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-chip-name {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-chip-size {
    font-size: 11px;
    opacity: 0.6;
}

/* Message actions */
.msg-wrapper {
    position: relative;
}

.msg-wrapper:hover .msg-actions {
    opacity: 1;
    pointer-events: auto;
}

.msg-actions {
    position: absolute;
    top: 4px;
    opacity: 0;
    pointer-events: none;
    display: flex;
    gap: 2px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 3px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 10;
    transition: opacity 0.15s;
}

.dark .msg-actions {
    background: #1e2235;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.msg-wrapper.justify-end .msg-actions {
    right: calc(100% + 4px);
}

.msg-wrapper.justify-start .msg-actions {
    left: calc(100% + 4px);
}

.msg-actions button {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.15s;
}

.msg-actions button:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.dark .msg-actions button:hover {
    background: #374151;
    color: #f1f5f9;
}

.msg-actions button.delete-btn:hover {
    background: #fef2f2;
    color: #ef4444;
}

.dark .msg-actions button.delete-btn:hover {
    background: #450a0a;
    color: #fca5a5;
}

/* Deleted message */
.msg-deleted {
    font-style: italic;
    opacity: 0.5;
    font-size: 13px;
}

/* Edited label */
.msg-edited {
    font-size: 10px;
    opacity: 0.5;
    font-style: italic;
}

/* Tick marks */
.tick-mark {
    font-size: 10px;
    margin-left: 2px;
    font-weight: 700;
}

.tick-sent { color: rgba(255,255,255,0.5); }
.tick-read { color: #60a5fa; }

.dark .tick-sent { color: rgba(255,255,255,0.4); }
.dark .tick-read { color: #60a5fa; }

/* Load more button */
.load-more-btn {
    display: block;
    margin: 0 auto 12px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.dark .load-more-btn {
    background: #1e2235;
    border-color: #374151;
    color: #94a3b8;
}

.load-more-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.dark .load-more-btn:hover {
    background: #374151;
    color: #f1f5f9;
}

/* Search bar */
.chat-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.dark .chat-search {
    background: #1e2235;
    border-color: #374151;
}

.chat-search input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 13px;
    color: inherit;
}

.chat-search input::placeholder {
    color: #94a3b8;
}

/* Highlighted search result */
.search-highlight {
    background: #fef08a;
    border-radius: 2px;
    padding: 0 2px;
}

.dark .search-highlight {
    background: #854d0e;
    color: #fef08a;
}

/* ============================================
   Notification system
   ============================================ */
.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
    background: transparent;
    border: none;
    color: inherit;
}

.notif-bell:hover {
    background: rgba(0, 0, 0, 0.05);
}

.dark .notif-bell:hover {
    background: rgba(255, 255, 255, 0.08);
}

.notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* Panel thông báo.
   Rộng tối đa 360px nhưng KHÔNG bao giờ vượt quá màn hình: trước đây panel cố
   định 360px + neo `right: 0` vào nút chuông, mà nút chuông không nằm sát mép
   phải (còn nút menu/đổi theme) → trên máy hẹp panel tràn ra ngoài viewport.
   Vị trí ngang do positionDropdown() trong static/js/main.js kẹp lại mỗi lần mở. */
.notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(360px, calc(100vw - 24px));
    max-height: 440px;              /* fallback cho trình duyệt chưa biết dvh */
    max-height: min(440px, 70dvh);  /* không cao quá 70% màn hình */
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.15);
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
}

.dark .notif-dropdown {
    background: #1a1d2e;
    border-color: #2d3148;
    box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.5);
}

.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.dark .notif-dropdown-header {
    border-bottom-color: #2d3148;
}

.notif-dropdown-header h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.notif-mark-read {
    font-size: 12px;
    color: #6366f1;
    cursor: pointer;
    background: none;
    border: none;
    font-weight: 500;
}

.notif-mark-read:hover {
    text-decoration: underline;
}

.notif-list {
    flex: 1;
    min-height: 0; /* cần cho con của flex column co lại để danh sách tự cuộn */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.35) transparent;
}

.notif-list::-webkit-scrollbar {
    width: 6px;
}

.notif-list::-webkit-scrollbar-track {
    background: transparent;
}

.notif-list::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.35);
    border-radius: 999px;
}

.notif-list::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.55);
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none;
    color: inherit;
}

.dark .notif-item {
    border-bottom-color: #2d3148;
}

.notif-item:hover {
    background: #f8fafc;
}

.dark .notif-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.notif-item.unread {
    background: #f0f4ff;
}

.dark .notif-item.unread {
    background: rgba(99, 102, 241, 0.08);
}

.notif-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6366f1;
    flex-shrink: 0;
    margin-top: 6px;
}

.notif-item.unread .notif-item-dot {
    display: block;
}

.notif-item:not(.unread) .notif-item-dot {
    display: none;
}

.notif-item-content {
    flex: 1;
    min-width: 0;
}

.notif-item-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item-body {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item-time {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.notif-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 13px;
}

/* Màn hình hẹp: panel gần như full width nên giảm padding cho dễ đọc */
@media (max-width: 480px) {
    .notif-dropdown {
        top: calc(100% + 6px);
        border-radius: 14px;
        box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.28);
    }

    .notif-dropdown-header {
        padding: 12px 14px;
    }

    .notif-item {
        padding: 11px 14px;
        gap: 10px;
    }

    .notif-empty {
        padding: 32px 16px;
    }
}

/* Details/Summary arrow rotation */
details[open] .rotate-arrow {
    transform: rotate(180deg);
}

/* ============================================
   Native <select> in dark mode
   ============================================
   <option> thừa hưởng `color` từ <select> (ví dụ class dark:text-white) trong khi
   popup của trình duyệt mặc định là nền sáng → chữ trắng trên nền trắng, người
   dùng thấy dropdown "rỗng" dù dữ liệu đã render (bug ở dropdown "Chọn game"
   của trang thanh toán dịch vụ). Ép nền/chữ tường minh cho <option>, đồng thời
   khai báo color-scheme để popup (nền, thanh cuộn) khớp theme của trang. */
select {
    color-scheme: light;
}

.dark select {
    color-scheme: dark;
}

select option {
    color: #18181b;            /* zinc-900 */
    background-color: #ffffff;
}

.dark select option {
    color: #f4f4f5;            /* zinc-100 */
    background-color: #27272a; /* zinc-800 */
}

/* ============================================
   Announcement popup (phía khách)
   ============================================
   Tailwind lo phần layout; ở đây chỉ khai báo keyframes vì Tailwind CDN
   không biết animation tự chế. Card chỉ translateY nhẹ nên chạy tốt cho cả
   desktop (pop giữa màn hình) lẫn mobile (bottom sheet trượt lên từ đáy). */
@keyframes ann-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ann-card-in {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ann-card-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(14px) scale(0.97); }
}

/* Nền tối hiện dần khi popup mở. */
#announcePopup {
    animation: ann-backdrop-in 0.22s ease-out both;
}

/* .ann-enter / .ann-leave do JS gắn — mỗi thông báo trong hàng đợi được gắn lại
   nên animation luôn chạy lại (display:none không tự restart animation). */
.ann-card.ann-enter {
    animation: ann-card-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 0.17s khớp EXIT_MS trong templates/partials/_announcement_popup.html. */
.ann-card.ann-leave {
    animation: ann-card-out 0.17s ease-in both;
}

@media (prefers-reduced-motion: reduce) {
    #announcePopup,
    .ann-card.ann-enter,
    .ann-card.ann-leave {
        animation: none;
    }
}

/* Nội dung thông báo dài thì cuộn trong card: thanh cuộn mảnh, màu brand để
   không phá bố cục (mặc định của trình duyệt khá thô trên card bo góc). */
#announceBody {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.35) transparent;
}

#announceBody::-webkit-scrollbar {
    width: 6px;
}

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

#announceBody::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.35);
    border-radius: 999px;
}

#announceBody::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.55);
}

/* ============================================
   Định dạng nội dung thông báo (markdown-lite)
   ============================================
   Nội dung admin nhập được render bằng static/js/markdown-lite.js ở CẢ popup
   khách lẫn khung xem trước trong admin → dùng chung class .ann-md.
   Tailwind preflight đã reset <ul>/<ol> (mất dấu đầu dòng) và <code>, nên phần
   hiển thị định dạng phải khai báo tại đây. */
.ann-md b,
.ann-md strong {
    font-weight: 700;
    color: #18181b;            /* zinc-900 */
}

.dark .ann-md b,
.dark .ann-md strong {
    color: #ffffff;
}

.ann-md i,
.ann-md em {
    font-style: italic;
}

.ann-md a {
    color: #4f46e5;            /* brand-600 */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.ann-md a:hover {
    color: #6366f1;            /* brand-500 */
}

.dark .ann-md a {
    color: #a5b4fc;            /* brand-300 */
}

.ann-md ul,
.ann-md ol {
    margin: 0.35rem 0;
    padding-left: 1.15rem;
}

.ann-md ul { list-style: disc; }
.ann-md ol { list-style: decimal; }

.ann-md li { margin: 0.1rem 0; }

.ann-md li::marker {
    color: #6366f1;
}

.dark .ann-md li::marker {
    color: #818cf8;
}

.ann-md code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.1rem 0.35rem;
    border-radius: 0.375rem;
    background: #f4f4f5;       /* zinc-100 */
    color: #3730a3;            /* brand-800 */
}

.dark .ann-md code {
    background: rgba(255, 255, 255, 0.08);
    color: #c7d2fe;            /* brand-200 */
}

/* Khung xem trước trong admin: cuộn như nội dung thật trong popup. */
#annBodyPreview {
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

/* ============================================
   Trình soạn nội dung (admin)
   ============================================
   Nút công cụ/tab cần style theo TRẠNG THÁI (aria-pressed / aria-selected) —
   đúng việc của CSS, và giữ markup không lặp 20 class Tailwind cho mỗi nút. */
.ann-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    color: #52525b;            /* zinc-600 */
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ann-tool:hover {
    background-color: #f4f4f5;
    color: #18181b;
}

.ann-tool:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.55);
}

.ann-tool[aria-pressed="true"] {
    background-color: #eef2ff; /* brand-50 */
    color: #4338ca;            /* brand-700 */
}

.ann-tool-symbol {
    font-size: 0.95rem;
}

.dark .ann-tool {
    color: rgba(255, 255, 255, 0.6);
}

.dark .ann-tool:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.dark .ann-tool[aria-pressed="true"] {
    background-color: rgba(99, 102, 241, 0.18);
    color: #c7d2fe;
}

.ann-tab {
    padding: 0.3rem 0.6rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.2;
    color: #71717a;            /* zinc-500 */
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ann-tab[aria-selected="true"] {
    background-color: #ffffff;
    color: #18181b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.dark .ann-tab {
    color: rgba(255, 255, 255, 0.55);
}

.dark .ann-tab[aria-selected="true"] {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    box-shadow: none;
}