/* Menu bar styles (admin/staff/public top bars, dropdowns, mobile bars). Moved out of
   header_menubars.php's inline <style> so browsers cache it; linked at the same spot. */
@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(249, 118, 22, 0.5);
        text-shadow: 0 0 5px rgba(249, 118, 22, 0.5);
    }
    50% { 
        box-shadow: 0 0 20px rgba(249, 118, 22, 0.8), 0 0 30px rgba(249, 118, 22, 0.6);
        text-shadow: 0 0 10px rgba(249, 118, 22, 0.8), 0 0 20px rgba(249, 118, 22, 0.6);
    }
}
.glow {
    animation: glow 2s ease-in-out infinite;
    border-radius: 50%;
    padding: 2px;
}

/* Sysadmin header status dots (admin bar + mobile header) */
.sysadmin-status-cluster {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sysadmin-status-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: default;
    line-height: 1;
}
a.sysadmin-status-item {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}
.sysadmin-status-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.55);
    text-transform: lowercase;
    user-select: none;
}
.sysadmin-status-value {
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.9);
    min-width: 1.1em;
    user-select: none;
}
.sysadmin-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.sysadmin-status-dot--green { background: #2ecc71; }
.sysadmin-status-dot--yellow { background: #f1c40f; }
.sysadmin-status-dot--red { background: #e74c3c; }
.sysadmin-status-dot--na { background: #7f8c8d; }
.sysadmin-status-dot-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}
@media (max-width: 600px) {
    .header .sysadmin-status-dot {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
    }
    .header .sysadmin-status-label {
        color: rgba(0, 0, 0, 0.45);
    }
    .header .sysadmin-status-value {
        color: rgba(0, 0, 0, 0.75);
    }
}

/* Admin Top Menu Bar Styles */
.admin-top-menu {
    background: #21252a;
    border-bottom: 2px solid #444;
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.admin-menu-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.admin-menu-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.admin-logo {
    height: 40px;
    border-radius: 6px;
}

.admin-menu-category {
    position: relative;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
    color: #fff;
    font-weight: 500;
}

.admin-menu-category:hover {
    background-color: rgba(255,255,255,0.1);
    color: #ff7616;
}

/* Discrete orange dot on a category when one of its items has a pending badge */
.admin-menu-category .menu-attention-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff7616;
    box-shadow: 0 0 4px rgba(255,118,22,0.85);
}

.admin-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #21252a;
    border: 1px solid #444;
    border-radius: 8px;
    min-width: 230px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.65), 0 6px 16px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1001;
}

/* Event Prep is the only dropdown that spans the full prep workflow; lay it
   out as three side-by-side columns so the whole menu fits above the fold on a
   13" laptop without a scrollbar. */
.admin-dropdown.admin-dropdown-prep {
    min-width: 840px;
    display: flex;
    align-items: stretch;
    padding: 0;
}
.admin-dropdown.admin-dropdown-prep .admin-dropdown-prep-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.admin-dropdown.admin-dropdown-prep .admin-dropdown-prep-col + .admin-dropdown-prep-col {
    border-left: 1px solid #444;
}
/* Per-column last-item border cleanup: the global :last-child rule already
   handles the very last item, but we also want the last item in each
   non-final column to look terminal rather than carry a bottom border. */
.admin-dropdown.admin-dropdown-prep .admin-dropdown-prep-col > :last-child.admin-dropdown-item {
    border-bottom: none;
}

/* Wider dropdown when locked features are shown - but not too wide */
.admin-dropdown.has-locked-feature {
    min-width: 270px;
    max-width: 320px;
}

/* Extra width for Tools dropdown on free tier (multiple Core locks) */
.admin-dropdown.has-locked-feature.tools-dropdown-free {
    min-width: 320px;
    max-width: 360px;
}

/* Live Event: longer item labels (e.g. On-site profile updates) */
.admin-dropdown.admin-dropdown-live-event {
    min-width: 300px;
    max-width: 400px;
}

/* System setup: longer item labels (e.g. On-site profile updates fields + lock badges) */
.admin-dropdown.admin-dropdown-system-setup {
    min-width: 320px;
    max-width: 420px;
}

/* Wider dropdown for App Preview */
.app-preview-menu .admin-dropdown {
    min-width: 250px;
}

.admin-menu-category:hover .admin-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Profile dropdown positioning */
.admin-menu-category.profile-dropdown .admin-dropdown {
    right: 0;
    left: auto;
}

/* Remove background hover for profile dropdown */
.admin-menu-category.profile-dropdown:hover {
    background-color: transparent;
}

/* Hide manager dropdown on mobile screens */
@media (max-width: 768px) {
    .admin-menu-category.profile-dropdown .admin-dropdown {
        display: none !important;
    }
    
    .admin-menu-category.profile-dropdown {
        cursor: default !important;
    }
    
    .admin-menu-category.profile-dropdown:hover .admin-dropdown {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

.admin-dropdown-item {
    display: block;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #444;
    transition: all 0.2s ease;
}

/* Prevent line break for Matchmaking menu item - only when badge is present */
.advanced-fighter-analysis-item.locked-feature-item {
    white-space: nowrap;
    min-width: 320px;
}

/* For non-core tiers, just prevent line break without forcing width */
.advanced-fighter-analysis-item:not(.locked-feature-item) {
    white-space: nowrap;
}

/* Prevent line break for API menu item when badge is present - but don't force dropdown width */
.api-menu-item.locked-feature-item {
    white-space: nowrap;
}

.admin-dropdown-item:last-child {
    border-bottom: none;
}

.admin-dropdown-item:hover {
    background-color: #ff7616;
    color: #fff;
}

/* Section divider inside admin dropdowns — small uppercase label that breaks
   up long menus into workflow groups (e.g. "Logistics", "Day-of"). */
.admin-dropdown-section {
    padding: 10px 20px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    background: #1f1f1f;
    border-bottom: 1px solid #444;
    pointer-events: none;
    user-select: none;
}
.admin-dropdown-section + .admin-dropdown-item {
    border-top: none;
}

/* Label-less variant — a thin horizontal gap that breaks the visual run of
   items without claiming an entire section heading. Use for trailing
   singletons (e.g. Cue Cards) that don't deserve their own group label. */
.admin-dropdown-divider {
    height: 8px;
    background: #1f1f1f;
    border-bottom: 1px solid #444;
    pointer-events: none;
}
.admin-dropdown-divider + .admin-dropdown-item {
    border-top: none;
}

.admin-menu-icon {
    color: #fff;
    font-size: 18px;
    transition: color 0.3s ease;
}

.admin-menu-icon:hover {
    color: #ff7616;
}

/* Help getting started tip */
.help-start-tip {
    position: absolute;
    top: 36px;
    right: -16px;
    width: 230px;
    background: #ffffff;
    color: #111;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    border: 1px solid #f0f0f0;
    z-index: 1002;
    font-size: 13px;
    line-height: 1.35;
    display: none;
}

.help-start-tip.is-visible {
    display: block;
}

.help-start-tip::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 18px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
}

.help-start-tip-title {
    font-weight: 700;
    margin-bottom: 4px;
    color: #222;
}

.help-start-tip-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px;
}

.help-start-tip-close:hover {
    color: #111;
}

.help-video-dropdown.suppress-dropdown .admin-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
}

/* Public Top Menu Bar (events.php, camps.php, etc.) - mirror admin bar styling exactly */
.public-top-menu {
    background: #21252a;
    border-bottom: 2px solid #444;
    height: 60px;
    padding: 0 20px;
    padding-left: calc(20px + constant(safe-area-inset-left));
    padding-left: calc(20px + env(safe-area-inset-left));
    padding-right: calc(20px + constant(safe-area-inset-right));
    padding-right: calc(20px + env(safe-area-inset-right));
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.public-menu-left {
    display: flex;
    align-items: center;
    gap: 30px;
}

.public-menu-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.public-logo {
    height: 40px;
    flex-shrink: 0;
}

.public-nav-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.public-nav-tab {
    position: relative;
    padding: 10px 15px;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.public-nav-tab:hover {
    color: #ff7616;
    background-color: rgba(255,255,255,0.1);
}

.public-nav-tab.active {
    color: #ff7616;
}

.public-nav-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: #ff7616;
    border-radius: 1px;
}

.public-nav-tab.coming-soon {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.public-nav-tab.coming-soon[title] {
    cursor: help;
}

.public-soon-badge {
    font-size: 10px;
    padding: 3px 6px;
    margin-left: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.2);
    font-weight: 500;
    vertical-align: middle;
}

.public-promoters-link {
    color: #ff7616;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.public-promoters-link:hover {
    color: #fff;
    background-color: rgba(255, 118, 22, 0.25);
}

.public-login-btn {
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.35);
    color: rgba(255,255,255,0.9);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.public-menu-profile a,
.public-menu-profile img {
    font-size: 15px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}

.public-login-btn:hover {
    background-color: #ff7616;
    border-color: #ff7616;
    color: #fff;
}

.public-menu-profile {
    position: relative;
    cursor: pointer;
    padding: 0;
}

.public-menu-profile .admin-dropdown {
    right: 0;
    left: auto;
}

.public-menu-profile:hover .admin-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Public menu: same page-content padding as admin bar */
body.public-menu-active {
    padding-top: 0;
}

body.public-menu-active .page-content.header-clear-medium {
    padding-top: 78px !important;
    padding-top: calc(78px + constant(safe-area-inset-top) * 0.8) !important;
    padding-top: calc(78px + env(safe-area-inset-top) * 0.8) !important;
}

@media (min-width: 992px) {
    body.public-menu-active .page-content.header-clear-medium {
        padding-top: 83px !important;
        padding-top: calc(83px + constant(safe-area-inset-top) * 0.8) !important;
        padding-top: calc(83px + env(safe-area-inset-top) * 0.8) !important;
    }
}

@media (max-width: 768px) {
    body.public-menu-active .page-content.header-clear-medium {
        padding-top: 68px !important;
        padding-top: calc(68px + constant(safe-area-inset-top) * 0.8) !important;
        padding-top: calc(68px + env(safe-area-inset-top) * 0.8) !important;
    }
    .public-nav-tabs { display: none; }
    .public-top-menu .public-promoters-link span { display: none; }
    .public-top-menu .public-promoters-link::before { content: "Promoters"; }
}

/* Hamburger toggle for public nav on mobile */
.public-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .public-nav-toggle { display: block; }
    .public-nav-tabs.public-nav-open { display: flex; flex-direction: column; position: absolute; top: 60px; left: 0; right: 0; background: #21252a; padding: 12px; gap: 8px; border-bottom: 2px solid #444; z-index: 999; }
}

/* ── White-label isolated event switcher nav ───────────────── */
.wl-isolated-nav {
    /* Inherits .public-top-menu layout; override gradient with account primary color fallback */
    background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(20,20,30,0.95) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(255,255,255,0.08);
}

.wl-isolated-logo {
    height: 36px;
    max-width: 180px;
    object-fit: contain;
    flex-shrink: 0;
}

.wl-isolated-brand {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

/* Do not add body padding for admin - .page-content handles clearance; otherwise we double-count (body 60px + page-content 68px = 128px) */
body.admin-menu-active,
body.staff-menu-active {
    padding-top: 0;
}

/* STAFF CONSOLE top bar — reuses .admin-top-menu chrome, with a distinct left
   "STAFF" pill + accent so staff and admins can tell the two consoles apart. */
.staff-top-menu {
    border-bottom: 2px solid #ff7616;
}
.staff-top-menu .admin-menu-left {
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
}
/* Tools collapse into category submenus so the fixed 60px bar chrome stays on a
   single line for any role mix (single-tool groups render as a direct link). */
.staff-top-menu .staff-menu-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: nowrap;
    min-width: 0;
    /* No overflow clipping here — it would hide the absolutely-positioned
       submenu panels. Grouping keeps the row compact enough to stay one line. */
}
.staff-top-menu .staff-menu-tools .admin-menu-category {
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.staff-top-menu .admin-menu-category > i {
    margin-right: 7px;
    opacity: 0.85;
}
.staff-top-menu .staff-caret {
    margin-left: 7px;
    margin-right: 0 !important;
    font-size: 11px;
    opacity: 0.6;
}
/* Messages envelope icon on the right (links to the private inbox). */
.staff-top-menu .staff-mail-icon {
    display: inline-flex;
    align-items: center;
    color: #fff;
    position: relative;
    text-decoration: none;
}
.staff-top-menu .staff-mail-icon > i {
    margin-right: 0;
    font-size: 18px;
    opacity: 0.85;
}
.staff-top-menu .staff-mail-badge {
    position: absolute;
    top: 2px;
    right: -2px;
    background: #ff7616;
    color: #fff;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
/* Standalone help icon on the right (mirrors the admin bar's help icon). */
.staff-top-menu .staff-help-icon {
    display: inline-flex;
    align-items: center;
    color: #fff;
    position: relative;
}
.staff-top-menu .staff-help-icon > i {
    margin-right: 0;
    font-size: 18px;
    opacity: 0.85;
}
/* Right-align the help dropdown so it doesn't overflow the viewport edge. */
.staff-top-menu .staff-help-dropdown {
    right: 0;
    left: auto;
    min-width: 200px;
}
/* Right-aligned current-event switcher — makes it obvious which event the staff
   member is working on, and opens a dropdown of the promotion's other events. */
.staff-top-menu .staff-event-switcher {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    max-width: 260px;
}
.staff-top-menu .staff-event-switcher .staff-ev-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.staff-top-menu .staff-event-dropdown {
    right: 0;
    left: auto;
    min-width: 260px;
    max-height: 70vh;
    overflow-y: auto;
}
.staff-top-menu .staff-event-dropdown .staff-event-item {
    display: flex;
    align-items: center;
    gap: 11px;
}
.staff-top-menu .staff-event-poster {
    width: 30px;
    height: 42px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: #000;
}
.staff-top-menu .staff-event-poster-fallback {
    width: 30px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2a2d33;
    border-radius: 4px;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    flex-shrink: 0;
}
.staff-top-menu .staff-event-item-name {
    flex: 1;
    min-width: 0;
}

/* Promotion switcher — the "SWITCH PROMOTION" rows at the top of the profile
   dropdown, for people who manage several promoter accounts. Same shape as the
   staff event switcher above, but with a square logo: promotion logos are not
   poster-shaped. Not scoped to .staff-top-menu, since this appears in every copy
   of the profile dropdown (admin bar, legacy header, public nav). */
.admin-dropdown .promo-switch-item {
    display: flex;
    align-items: center;
    gap: 11px;
}
.admin-dropdown .promo-switch-item.is-active {
    background: #2a2119;
}
.promo-switch-logo {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: #000;
}
.promo-switch-logo-fallback {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2a2d33;
    border-radius: 6px;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}
.promo-switch-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.promo-switch-check {
    color: #ff7616;
    font-size: 13px;
    flex-shrink: 0;
}
/* Keep a long promotion list scrollable inside the hover dropdown. */
.admin-dropdown {
    max-height: 80vh;
    overflow-y: auto;
}

/* The notification bell carries far more rows than any other menu, so give it
   the full height the viewport allows and let only the list scroll — the
   header and "See all" footer stay pinned instead of scrolling away. */
.notif-bell-dropdown .admin-dropdown {
    max-height: calc(100vh - 90px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.notif-bell-dropdown .admin-dropdown #adminNotifDropdownContent {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Top-bar chip naming the promotion currently being worked on, and the control
   for switching between them: hover reveals the list, clicking opens the full
   picker page. Only rendered for people who manage more than one (plus
   licensees), so the bar is unchanged for everyone else. */
.promo-chip-wrap {
    position: relative;
    padding: 0;
}
.promo-chip-wrap:hover { background-color: transparent; }
/* Right-aligned like the staff event switcher: the chip sits at the right-hand
   end of the bar, so a left-aligned menu would run off the edge. */
.promo-chip-wrap .promo-chip-dropdown {
    right: 0;
    left: auto;
    min-width: 260px;
}
.promo-chip-caret {
    font-size: 11px;
    opacity: .55;
    margin-left: 2px;
}
.promo-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid #3a3d45;
    border-radius: 999px;
    background: #1e2128;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    font-weight: 600;
    max-width: 220px;
    white-space: nowrap;
    text-decoration: none;
}
.promo-chip:hover { color: #fff; border-color: #ff7616; }
.promo-chip-logo {
    width: 20px; height: 20px; border-radius: 4px; object-fit: cover;
    background: #000; flex-shrink: 0;
}
.promo-chip-name { overflow: hidden; text-overflow: ellipsis; }
/* Hide at the SAME breakpoint the profile dropdown disappears at (768px), not
   earlier: the chip is now the only desktop way to switch, so a gap between the
   two would leave 768-991px with no control at all. Below 768px the burger side
   menu carries "Switch promotion". */
@media (max-width: 768px) { .promo-chip-wrap { display: none; } }

/* Admin: bar height + 18px gap - universal (desktop 60px bar, mobile 50px header) */
body.admin-menu-active .page-content.header-clear-medium,
body.staff-menu-active .page-content.header-clear-medium {
    padding-top: 78px !important;
    padding-top: calc(78px + constant(safe-area-inset-top) * 0.8) !important;
    padding-top: calc(78px + env(safe-area-inset-top) * 0.8) !important;
}

@media (min-width: 992px) {
    body.admin-menu-active .page-content.header-clear-medium,
body.staff-menu-active .page-content.header-clear-medium {
        padding-top: 83px !important;
        padding-top: calc(83px + constant(safe-area-inset-top) * 0.8) !important;
        padding-top: calc(83px + env(safe-area-inset-top) * 0.8) !important;
    }
}

@media (max-width: 768px) {
    body.admin-menu-active .page-content.header-clear-medium,
body.staff-menu-active .page-content.header-clear-medium {
        padding-top: 68px !important;
        padding-top: calc(68px + constant(safe-area-inset-top) * 0.8) !important;
        padding-top: calc(68px + env(safe-area-inset-top) * 0.8) !important;
    }
}

/* Hide gear icon on small screens - removed admin menu hiding rule */

/* Chat Interface Responsive Improvements */
@media (max-width: 768px) {
    .speech-bubble {
        max-width: calc(100vw - 120px) !important;
        font-size: 14px;
        padding: 12px 16px;
        margin-bottom: 12px;
    }
    
    .speech-left {
        max-width: calc(100vw - 120px) !important;
    }
    
    .speech-right {
        max-width: calc(100vw - 120px) !important;
    }
    
    #chatContainer {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .privateChatFooterBar {
        /* padding: 8px 12px !important; */
    }
    
    .speach-input input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0 16px !important;
    }
    
    .speach-icon a {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
    }
    
    #quoteBar {
        width: 95% !important;
        left: 2.5% !important;
        transform: none !important;
        font-size: 14px;
        padding: 12px 16px;
    }
}

/* Enhanced Chat Bubble Styling */
.speech-bubble {
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 5px !important; /* Reduced from 15px */
}

.speech-bubble:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Improved Typing Indicator */
.dot-flashing {
    background-color: #007bff;
}

.dot-flashing::before,
.dot-flashing::after {
    background-color: #007bff;
}

/* Connection Status Indicator */
.connection-status {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    z-index: 1001;
    transition: all 0.3s ease;
}

.connection-status.online {
    background-color: #28a745;
    color: white;
}

.connection-status.offline {
    background-color: #dc3545;
    color: white;
}

.connection-status.reconnecting {
    background-color: #ffc107;
    color: #212529;
}

/* Message Loading Animation */
.message-loading {
    opacity: 0.6;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.3; }
}

/* Improved Scroll Behavior */
#chatContainer {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Notification Animations */
@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
}

/* Enhanced Input Field */
.speach-input input:focus {
    outline: none;
    border: 2px solid #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

    /* Better Touch Targets for Mobile */
@media (max-width: 768px) {
    .speach-icon a,
    .speach-icon button {
        min-width: 44px;
        min-height: 44px;
    }
    
    .speech-bubble {
        touch-action: manipulation;
    }
    
    /* Ensure footer content is properly contained */
    .privateChatFooterBar .d-flex {
        align-items: center;
        min-height: 44px;
        transform: translateY(-4px);
    }
    
    .speach-input input {
        min-height: 44px;
        max-height: 60px;
    }
    
    .speach-icon {
        flex-shrink: 0;
    }
    
    /* Fix for keyboard visibility issue */
    .privateChatFooterBar {
        position: fixed !important;
        bottom: 10px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        background: white !important;
        border-top: 1px solid #e0e0e0 !important;
        padding: 0px 10px !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        max-height: 70px !important;
        margin: 0 8px !important;
        border-radius: 12px !important;
    }
    
    /* Ensure chat container doesn't overlap with fixed footer */
    #chatContainer {
        padding-bottom: calc(0px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Typing indicator positioning fix */
    #typingIndicator {
        margin-bottom: 10px !important;
    }
    
    /* Quote bar positioning fix */
    #quoteBar {
        bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        z-index: 99 !important;
    }
    
    /* Keyboard open state adjustments */
    body.keyboard-open .privateChatFooterBar {
        position: fixed !important;
        bottom: 10px !important;
        transform: translateY(0) !important;
        padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
        margin: 0 8px !important;
        border-radius: 12px !important;
    }
    
    body.keyboard-open #chatContainer {
        padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    }
    
    /* Prevent auto-scroll when keyboard is open */
    body.keyboard-open #typingIndicator {
        margin-bottom: 10px !important;
    }
}

/* Scroll to Bottom Button */
.scroll-to-bottom-btn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #007bff;
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
    opacity: 0.9;
}

.scroll-to-bottom-btn:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.scroll-to-bottom-btn:active {
    transform: translateY(0);
}

/* Show scroll button when keyboard is open and there are new messages */
body.keyboard-open .scroll-to-bottom-btn {
    display: flex !important;
}

/* Screen Reader Only Content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus indicators for accessibility */
.speech-bubble:focus,
.speach-input input:focus,
.speach-icon a:focus,
.speach-icon button:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .speech-bubble {
        border: 2px solid currentColor;
    }
    
    .connection-status {
        border: 2px solid currentColor;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .speech-bubble,
    .connection-status,
    .notification {
        transition: none;
        animation: none;
    }
    
    .dot-flashing {
        animation: none;
        background-color: #007bff;
    }
}

/* Locked Feature Menu Item Styling */
.locked-feature-item {
    opacity: 0.6;
    cursor: default !important;
    transition: opacity 0.3s ease;
    display: flex !important;
    align-items: center;
    white-space: nowrap;
}

.locked-feature-item:hover {
    opacity: 1 !important;
    background-color: rgba(255,255,255,0.1) !important;
    cursor: pointer !important;
}

.locked-feature-badge {
    transition: background-color 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.locked-feature-item:hover .locked-feature-badge {
    background-color: #0dcaf0 !important; /* Bootstrap info color */
}

/* Modern Bottom Menu Bar Styling */
@media (max-width: 768px) {
    #footer-bar {
        height: 80px !important;
        min-height: 80px !important;
        /* The bar is a plain flex row and an event can light up a lot of entries at
           once (fighter info, to-do, checklist, contacts, coupons, backstage…). Without
           this the items keep their content width, spill past the right edge and the
           last one is sliced in half. */
        overflow-x: hidden !important;
    }
    #footer-bar a {
        padding-top: 8px !important;
        /* flex-basis 0 + min-width 0: share the width evenly and allow shrinking below
           the label's natural width (flex items default to min-width:auto, which is
           what made them overflow). */
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    #footer-bar a span {
        margin-top: 2px !important;
        font-size: 9px !important;
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    #footer-bar a i {
        font-size: 16px !important;
    }
}

/* Modern Top Menu Bar Styling */
@media (max-width: 768px) {
    .header {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: none !important;
    }
}