/* 
  CHS Communicate Global Stylesheet
  - Consolidated from index.html internal styles
*/

/* -------------------------------------------------------------------------- */
/* Part 1: Global Styles & Overrides                                          */
/* -------------------------------------------------------------------------- */
html,
body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    height: 100dvh;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* 禁止背景滚动 */
.no-scroll {
    overflow: hidden !important;
    touch-action: none;
}

/* 打印优化样式 */
@media print {
    body {
        background: white !important;
    }

    body>*:not(#extensionPage) {
        display: none !important;
    }

    #extensionPage {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        display: flex !important;
        z-index: 9999 !important;
        background: white !important;
    }

    #extensionPage>div:first-child {
        display: none !important;
    }

    #extensionPage>div:last-child {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    #extensionIframe {
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }

    .fixed,
    .absolute {
        visibility: hidden;
    }

    #extensionPage,
    #extensionPage * {
        visibility: visible;
    }
}

/* 聊天主容器布局补丁 */
#chatBox {
    overflow-x: hidden !important;
}

#chatComposerWrap {
    background: linear-gradient(to top, rgba(242, 242, 247, 0.4), rgba(242, 242, 247, 0));
}

#chatInputPill {
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(242, 242, 247, 0.75); /* very light gray matching iOS F2F2F7 base, clean and premium */
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
        inset 0 1px 1.5px rgba(255, 255, 255, 0.55),
        inset 0 -1px 1.5px rgba(15, 23, 42, 0.06),
        0 10px 24px rgba(15, 23, 42, 0.04); /* softened shadow to remove dirty/blackish look */
}

#chatInputPill.liquid-glass-active,
#chatCameraBtn.chat-fab-btn.liquid-glass-active {
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.5),
        inset 0 -1px 2px rgba(15, 23, 42, 0.05),
        0 8px 32px rgba(15, 23, 42, 0.08) !important;
}



#quoteArea {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        0 6px 20px rgba(15, 23, 42, 0.06);
}

#chatCameraBtn.chat-fab-btn {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 1px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(242, 242, 247, 0.75); /* very light gray matching iOS F2F2F7 base, clean and premium */
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow:
        inset 0 1px 1.5px rgba(255, 255, 255, 0.55),
        inset 0 -1px 1.5px rgba(15, 23, 42, 0.06),
        0 10px 22px rgba(15, 23, 42, 0.04); /* softened shadow to remove dirty/blackish look */
}

.chat-fab-btn svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    margin: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.dark #chatComposerWrap {
    background: linear-gradient(to top, rgba(8, 10, 16, 0.34), rgba(8, 10, 16, 0));
}

.dark #chatInputPill {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(52, 52, 55, 0.7); /* middle-ground grey in dark mode */
    box-shadow:
        inset 0 1px 1.5px rgba(255, 255, 255, 0.14),
        inset 0 -1px 1.5px rgba(0, 0, 0, 0.28),
        0 12px 34px rgba(0, 0, 0, 0.34);
}

.dark #chatInputPill.liquid-glass-active,
.dark #chatCameraBtn.chat-fab-btn.liquid-glass-active {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.4),
        0 12px 38px rgba(0, 0, 0, 0.45) !important;
}



.dark #quoteArea {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(28, 28, 30, 0.92);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.2);
}

.dark #chatCameraBtn.chat-fab-btn {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(52, 52, 55, 0.7); /* middle-ground grey in dark mode */
    box-shadow:
        inset 0 1px 1.5px rgba(255, 255, 255, 0.14),
        inset 0 -1px 1.5px rgba(0, 0, 0, 0.32),
        0 12px 30px rgba(0, 0, 0, 0.35);
}

/* 全站自定义滚动条设计 (Webkit 专用) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

/* 针对特定侧边栏和容器的超细滚动条 (4px) */
#sidebarSubList::-webkit-scrollbar,
#sidebarList::-webkit-scrollbar,
#chatBox::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
    width: 4px;
}

#sidebarSubList::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}

#sidebarSubList::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 120, 0.1);
    border-radius: 10px;
}

#sidebarSubList::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 120, 0.4);
}

.dark #sidebarSubList::-webkit-scrollbar-thumb,
.dark .overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
}

.dark #sidebarSubList::-webkit-scrollbar-thumb:hover,
.dark .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 视觉补丁 */
#sidebarSubList>div,
#sidebarSubList>button {
    margin-right: -4px !important;
    padding-right: 4px !important;
}

#sidebarSubList {
    overflow-x: hidden !important;
}

/* 彻底隐藏搜索结果框的滚动条，确保有无滚动条时都完美贴边 */
#searchResultList {
    scrollbar-width: none !important; /* Firefox */
}
#searchResultList::-webkit-scrollbar {
    display: none !important; /* Safari and Chrome */
    width: 0 !important;
    height: 0 !important;
}



/* Compensate right-side scrollbar gutter so News cards align with top header pill width */
#newsAnnouncementsScrollArea {
    --news-scrollbar-comp: 4px;
    padding-right: calc(1.25rem - var(--news-scrollbar-comp)) !important;
}

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

/* -------------------------------------------------------------------------- */
/* Part 2: Core Animation System                                             */
/* -------------------------------------------------------------------------- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(8px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes applePush {
    from {
        transform: translateX(15px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes applePop {
    from {
        transform: translateX(-15px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes sidebarPush {
    from {
        transform: translateX(20px);
        opacity: 0.4;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes sidebarPop {
    from {
        transform: translateX(-15px);
        opacity: 0.4;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes tabPop {
    0% {
        transform: scale(0.96);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sidebarFullSlideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes sidebarFullSlidePop {
    from {
        transform: translateX(-30%);
    }
    to {
        transform: translateX(0);
    }
}


@keyframes popIn {
    0% {
        transform: scale(0.95) translateY(10px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes highlightPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.02);
    }
}

.animate-in {
    animation-duration: 500ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in {
    animation: fadeIn 0.25s ease-out forwards;
}

.fade-out {
    animation: fadeOut 0.25s ease-in forwards;
}

.slide-in-from-bottom-2 {
    animation-name: slideInFromBottom;
}

.duration-500 {
    animation-duration: 500ms;
}

.sidebar-push {
    animation: sidebarPush 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.sidebar-pop {
    animation: sidebarPop 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.tab-pop-animation {
    animation: tabPop 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.tab-fade-up {
    animation: fadeUp 0.3s ease forwards;
}

.sidebar-full-slide-in {
    animation: sidebarFullSlideIn 0.3s ease-in-out forwards;
}

.sidebar-full-slide-pop {
    animation: sidebarFullSlidePop 0.3s ease-in-out forwards;
}

#sidebarList {
    position: relative;
}

#sidebarLevel2Container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

@keyframes sidebarFullSlideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.sidebar-full-slide-out {
    animation: sidebarFullSlideOut 0.3s ease-in-out forwards;
}


.msg-pop {
    animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.highlight-pulse {
    animation: highlightPulse 0.4s ease-in-out 2;
}

.apple-morph {
    transition: all 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}

.tab-transition {
    transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), color 250ms ease-out;
}

/* Search jump highlight for announcement cards: no opacity dimming. */
.news-jump-highlight {
    outline: 2px solid #007AFF;
    outline-offset: 0;
    animation: newsJumpOutline 0.6s ease-in-out 2;
}

@keyframes newsJumpOutline {
    0%, 100% {
        outline-color: #007AFF;
        outline-offset: 0;
    }
    50% {
        outline-color: #0A84FF;
        outline-offset: 3px;
    }
}

.slide-up {
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* -------------------------------------------------------------------------- */
/* Part 3: UI Components & Layouts                                           */
/* -------------------------------------------------------------------------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.app-container {
    height: 100vh;
    height: 100dvh;
    --news-panel-width: 370px;
    --desktop-overlay-left: 320px;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ios-glass {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.dark .ios-glass {
    background: #1C1C1E !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.pass-gradient {
    background: linear-gradient(135deg, #007AFF 0%, #00C6FF 100%);
}

.ticket-cutout {
    position: relative;
}

.ticket-cutout::before,
.ticket-cutout::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #F2F2F7;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.dark .ticket-cutout::before,
.dark .ticket-cutout::after {
    background: #000;
}

.ticket-cutout::before {
    left: -10px;
}

.ticket-cutout::after {
    right: -10px;
}

/* -------------------------------------------------------------------------- */
/* Part 4: Desktop Smart Sidebar                                             */
/* -------------------------------------------------------------------------- */
#sidebarTrigger,
#sidebarHandle {
    display: none;
}

@media (min-width: 1024px) {
    #sidebarTrigger {
        display: block;
    }

    #sidebarHandle {
        position: fixed;
        left: -45px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 90px;
        background: #007AFF;
        border-radius: 0 16px 16px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        box-shadow: none;
        z-index: 41;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }

    #sidebarHandle.is-transitioning {
        pointer-events: none !important;
    }

    .dark #sidebarHandle {
        background: #0A84FF;
    }

    /* Message list color themes for sidebarHandle only when collapsed/shrunk */
    body.sidebar-collapsed .msg-theme-orange#sidebarHandle {
        background: #F97316 !important;
    }
    .dark body.sidebar-collapsed .msg-theme-orange#sidebarHandle {
        background: #FB923C !important;
    }
    body.sidebar-collapsed .msg-theme-blue#sidebarHandle {
        background: #007AFF !important;
    }
    .dark body.sidebar-collapsed .msg-theme-blue#sidebarHandle {
        background: #0A84FF !important;
    }
    body.sidebar-collapsed .msg-theme-green#sidebarHandle {
        background: #34C759 !important;
    }
    .dark body.sidebar-collapsed .msg-theme-green#sidebarHandle {
        background: #95FF14 !important;
    }
    body.sidebar-collapsed .msg-theme-purple#sidebarHandle {
        background: #AF52DE !important;
    }
    .dark body.sidebar-collapsed .msg-theme-purple#sidebarHandle {
        background: #A724FF !important;
    }
    body.sidebar-collapsed .msg-theme-custom#sidebarHandle {
        background: var(--msg-accent-color) !important;
    }
    .dark body.sidebar-collapsed .msg-theme-custom#sidebarHandle {
        background: var(--msg-accent-color-dark) !important;
    }

    #newsSection {
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: left center;
        overflow: hidden;
        flex-shrink: 0;
        z-index: 20;
    }

    #newsSection > * {
        width: 320px !important;
        flex-shrink: 0 !important;
    }

    body.sidebar-collapsed #newsSection {
        width: 0 !important;
        min-width: 0 !important;
        opacity: 0;
        pointer-events: none;
        border-right-width: 0;
        visibility: hidden;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.5s;
    }

    #sidePanel,
    #chatSection {
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.5s ease;
    }

    body.sidebar-collapsed #sidePanel,
    body.sidebar-collapsed #chatSection {
        transform: scale(1) translateX(0);
    }

    body:not(.sidebar-collapsed) #sidePanel {
        transform: none;
    }

    body:not(.sidebar-collapsed) #chatSection {
        transform: none;
        transform-origin: left center;
    }

    #sidebarTrigger {
        position: fixed;
        left: 0;
        top: 0;
        width: 12px;
        height: 100vh;
        z-index: 40;
        cursor: pointer;
    }

    #sidebarHandle:hover {
        width: 38px;
    }

    body.sidebar-collapsed #sidebarTrigger:hover+#sidebarHandle,
    body.sidebar-collapsed #sidebarHandle:hover {
        left: 0 !important;
    }

    body.sidebar-collapsed #sidebarHandle {
        left: -28px;
        transform: translateY(-50%) scaleX(1);
    }

    body:not(.sidebar-collapsed) #sidebarHandle {
        left: 320px;
        width: 16px;
        height: 60px;
        background: #8E8E93;
        opacity: 0.4;
        transform: translateY(-50%) translateX(-100%) scaleX(-1);
        box-shadow: none;
    }

    body:not(.sidebar-collapsed) #sidebarHandle:hover {
        opacity: 1;
        width: 22px;
        box-shadow: none;
        background: var(--ann-accent-color) !important;
    }

    .dark body:not(.sidebar-collapsed) #sidebarHandle:hover {
        background: var(--ann-accent-color-dark) !important;
    }

    body.is-fullscreen #sidebarHandle,
    body.is-fullscreen #sidebarTrigger {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    body:not(.sidebar-collapsed) #sidebarHandle {
        left: var(--news-panel-width);
    }

    body:not(.sidebar-collapsed) #newsSection {
        width: var(--news-panel-width) !important;
        min-width: var(--news-panel-width) !important;
        max-width: var(--news-panel-width) !important;
        border-right: 0 !important;
    }

    #newsSection > * {
        width: var(--news-panel-width) !important;
        flex-shrink: 0 !important;
    }

    #sidePanel {
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        flex: 0 0 320px !important;
        border-right: 0 !important;
    }

    #chatSection {
        min-width: 0;
        flex: 1 1 auto;
    }

    #newsSideDivider {
        width: 1px;
        min-width: 1px;
        height: 100%;
        cursor: col-resize;
        position: relative;
        z-index: 25;
        user-select: none;
        touch-action: none;
        background: #ffffff; /* Solid white background under the border ensures no background bleeding */
        border-left: 1px solid rgba(229, 231, 235, 0.95);
        border-right: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    .dark #newsSideDivider {
        background: #1C1C1E; /* Dark background under the border */
        border-left-color: rgba(55, 65, 81, 0.78);
    }

    #newsSideDivider::before {
        content: none;
    }

    body.is-resizing-news #newsSideDivider,
    #newsSideDivider:hover {
        border-left-color: rgba(0, 122, 255, 0.95);
    }
}

@media (min-width: 1024px) {
    .desktop-dynamic-left {
        left: var(--desktop-overlay-left, 320px) !important;
    }
}

/* --- Joined Clubs Styles --- */
@keyframes cascadeDrop {
    0% {
        opacity: 0;
        transform: translateY(-24px);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: none;
    }
}

.club-icon-animate {
    opacity: 0;
    animation: cascadeDrop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.club-avatar-btn {
    position: relative;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.club-avatar-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.15), 0 3px 5px -2px rgba(0, 0, 0, 0.05);
}

.club-avatar-btn:active {
    transform: scale(0.96);
}

.club-avatar-btn::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    border: 2px solid transparent;
    transition: border-color 0.25s ease;
    pointer-events: none;
}

.club-avatar-btn.active::after {
    border-color: #007AFF;
}
.dark .club-avatar-btn.active::after {
    border-color: #0A84FF;
}

#clubGlobalTooltip {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform: translateX(-5px);
    display: none;
    opacity: 0;
}

.dark #clubGlobalTooltip {
    background: rgba(255, 255, 255, 0.95);
    color: black;
}

.club-card-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.club-card-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

/* iOS 26 Liquid Glass Design System */
.ios26-liquid-glass {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(20px) saturate(190%);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.6), 
        0 12px 30px 0 rgba(0, 0, 0, 0.08) !important;
}

.dark .ios26-liquid-glass {
    background: rgba(15, 15, 15, 0.72) !important;
    backdrop-filter: blur(32px) saturate(210%);
    -webkit-backdrop-filter: blur(32px) saturate(210%);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 
        inset 0 1px 2px 0 rgba(255, 255, 255, 0.15), 
        inset 0 -1.5px 2px 0 rgba(0, 0, 0, 0.4), 
        0 16px 48px 0 rgba(0, 0, 0, 0.55) !important;
}

:root {
    --lg-brightness: brightness(1.04);
}

.dark {
    --lg-brightness: brightness(1.14);
}

.ios26-liquid-glass.liquid-glass-active {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.6), 
        0 12px 32px rgba(0, 0, 0, 0.08) !important;
}

.ios26-liquid-glass.liquid-glass-fallback {
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        inset 0 1px 1.5px rgba(255, 255, 255, 0.4), 
        0 10px 24px rgba(15, 23, 42, 0.04) !important;
}

.dark .ios26-liquid-glass.liquid-glass-active {
    background: rgba(15, 15, 15, 0.68) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.15), 
        inset 0 -1px 1.5px rgba(0, 0, 0, 0.5), 
        0 16px 48px rgba(0, 0, 0, 0.55) !important;
}

.dark .ios26-liquid-glass.liquid-glass-fallback {
    background: rgba(15, 15, 15, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 
        inset 0 1px 1.5px rgba(255, 255, 255, 0.1), 
        inset 0 -1px 1px rgba(0, 0, 0, 0.3), 
        0 12px 30px rgba(0, 0, 0, 0.3) !important;
}

.ios26-active-pill {
    background: rgba(0, 0, 0, 0.08) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.ios26-active-pill.liquid-glass-fallback {
    background: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.dark .ios26-active-pill {
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 
        inset 0 1px 1.5px rgba(255, 255, 255, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.dark .ios26-active-pill.liquid-glass-fallback {
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 
        inset 0 1px 1.5px rgba(255, 255, 255, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

/* iOS resets for bottom navigation buttons and their descendants */
#bottomNav button,
#bottomNavContainer button,
#bottomNav button *,
#bottomNavContainer button * {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -webkit-focus-ring-color: transparent !important;
    user-select: none;
}

#bottomNav button {
    border: 1px solid transparent !important;
}

/* iOS-style Slide-In and Slide-Out Animations for Mobile Chat View */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.slide-in-right {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1000 !important;
    animation: slideInRight 0.32s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.slide-out-right {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1000 !important;
    animation: slideOutRight 0.32s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Responsive Navigation Headers and Announcement Buttons */
@media (max-width: 1023px) {
    /* Hide top Hub and Tools headers on mobile/narrow windows */
    #headTabNews, #headTabTools {
        display: none !important;
    }

    /* Hide the whole top tabs row so content moves up */
    #newsTopTabsRowDesktop {
        display: none !important;
    }

    #newsTopTabsRowMobile {
        display: flex !important;
    }

    /* Match Hub/Tool header spacing to Messages header spacing on mobile */
    #newsHeader {
        padding-top: 1.5rem !important;   /* same as Messages: pt-6 */
        padding-bottom: 0.75rem !important; /* same as Messages: pb-3 */
    }
    #newsSubTabsWrapper {
        margin-top: 0.75rem !important; /* same as Messages search row: mt-3 */
    }
    
    /* Hide the top-right desktop announcement plus button on mobile */
    #addAnnouncementBtn {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    #newsTopTabsRowMobile {
        display: none !important;
    }
}

/* Unify add button behavior across all screen sizes:
   only use inline + next to School/Club News labels. */
#addAnnouncementBtn {
    display: none !important;
}

.inline-news-add {
    transition: opacity 180ms ease, transform 180ms ease, max-width 180ms ease, margin-left 180ms ease;
    max-width: 18px;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.inline-news-add.is-hidden {
    max-width: 0;
    margin-left: 0 !important;
    opacity: 0;
    transform: scale(0.7);
    pointer-events: none;
    overflow: hidden;
}

/* ==========================================================================
   Hub Theme: Dynamic Accent Colors (Split Announcement & Messaging)
   ========================================================================== */

/* Keep header utility buttons matching the theme color */

/* =========================================
   Part A: Announcement Panel Accent (ann-theme-*)
   ========================================= */

/* 1. Announcement Theme: Orange Mode */
.ann-theme-orange .text-\[\#007AFF\] {
    color: #F97316 !important;
}
.ann-theme-orange .dark\:text-\[\#0A84FF\] {
    color: #FB923C !important;
}
.ann-theme-orange .text-blue-500 {
    color: #F97316 !important;
}
.ann-theme-orange .bg-\[\#007AFF\] {
    background-color: #F97316 !important;
}
.ann-theme-orange .dark\:bg-\[\#0A84FF\] {
    background-color: #FB923C !important;
}
.ann-theme-orange .bg-blue-50 {
    background-color: rgba(249, 115, 22, 0.1) !important;
}
.ann-theme-orange .dark\:bg-blue-500\/10 {
    background-color: rgba(251, 146, 60, 0.1) !important;
}
.ann-theme-orange .border-t-\[\#007AFF\] {
    border-top-color: #F97316 !important;
}
.ann-theme-orange .dark\:border-t-\[\#0A84FF\] {
    border-top-color: #FB923C !important;
}
.ann-theme-orange .border-\[\#007AFF\] {
    border-color: #F97316 !important;
}
.ann-theme-orange .dark\:border-\[\#0A84FF\] {
    border-color: #FB923C !important;
}
.ann-theme-orange .hover\:border-\[\#007AFF\]:hover {
    border-color: #F97316 !important;
}
.ann-theme-orange .dark\:hover\:border-\[\#007AFF\]:hover {
    border-color: #FB923C !important;
}
.ann-theme-orange .shadow-blue-500\/20 {
    box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.2), 0 2px 4px -2px rgba(249, 115, 22, 0.2) !important;
}
.ann-theme-orange .bg-\[\#007AFF\]\/10 {
    background-color: rgba(249, 115, 22, 0.1) !important;
}
.ann-theme-orange .text-blue-700 {
    color: #C2410C !important;
}
.ann-theme-orange .dark\:text-blue-300 {
    color: #FDBA74 !important;
}
.ann-theme-orange .bg-blue-100 {
    background-color: #FFEDD5 !important;
}
.ann-theme-orange .dark\:bg-blue-500\/15 {
    background-color: rgba(251, 146, 60, 0.15) !important;
}
.ann-theme-orange .news-jump-highlight {
    outline-color: #F97316 !important;
}

/* 2. Announcement Theme: Blue Mode */
/* Default blue values apply automatically */

/* 3. Announcement Theme: Green Mode */
.ann-theme-green .text-\[\#007AFF\] {
    color: #34C759 !important; /* iOS Green */
}
.ann-theme-green .dark\:text-\[\#0A84FF\] {
    color: #95FF14 !important; /* Neon Green */
}
.ann-theme-green .text-blue-500 {
    color: #34C759 !important;
}
.ann-theme-green .dark\:text-blue-300 {
    color: #95FF14 !important;
}
.ann-theme-green .bg-\[\#007AFF\] {
    background-color: #34C759 !important;
}
.ann-theme-green .dark\:bg-\[\#0A84FF\] {
    background-color: #95FF14 !important;
}
.ann-theme-green .bg-blue-50 {
    background-color: rgba(52, 199, 89, 0.1) !important;
}
.ann-theme-green .dark\:bg-blue-500\/10 {
    background-color: rgba(149, 255, 20, 0.1) !important;
}
.ann-theme-green .border-t-\[\#007AFF\] {
    border-top-color: #34C759 !important;
}
.ann-theme-green .dark\:border-t-\[\#0A84FF\] {
    border-top-color: #95FF14 !important;
}
.ann-theme-green .border-\[\#007AFF\] {
    border-color: #34C759 !important;
}
.ann-theme-green .dark\:border-\[\#0A84FF\] {
    border-color: #95FF14 !important;
}
.ann-theme-green .hover\:border-\[\#007AFF\]:hover {
    border-color: #34C759 !important;
}
.ann-theme-green .dark\:hover\:border-\[\#007AFF\]:hover {
    border-color: #95FF14 !important;
}
.ann-theme-green .shadow-blue-500\/20 {
    box-shadow: 0 4px 6px -1px rgba(52, 199, 89, 0.2), 0 2px 4px -2px rgba(52, 199, 89, 0.2) !important;
}
.dark .ann-theme-green .shadow-blue-500\/20 {
    box-shadow: 0 4px 6px -1px rgba(149, 255, 20, 0.2), 0 2px 4px -2px rgba(149, 255, 20, 0.2) !important;
}
.ann-theme-green .bg-\[\#007AFF\]\/10 {
    background-color: rgba(52, 199, 89, 0.1) !important;
}
.ann-theme-green .text-blue-700 {
    color: #1E824C !important;
}
.ann-theme-green .bg-blue-100 {
    background-color: #E8F8F5 !important;
}
.ann-theme-green .dark\:bg-blue-500\/15 {
    background-color: rgba(149, 255, 20, 0.15) !important;
}
.ann-theme-green .news-jump-highlight {
    outline-color: #34C759 !important;
}
.dark .ann-theme-green .news-jump-highlight {
    outline-color: #95FF14 !important;
}

/* 4. Announcement Theme: Purple Mode */
.ann-theme-purple .text-\[\#007AFF\] {
    color: #AF52DE !important; /* iOS Purple */
}
.ann-theme-purple .dark\:text-\[\#0A84FF\] {
    color: #A724FF !important; /* Neon Purple */
}
.ann-theme-purple .text-blue-500 {
    color: #AF52DE !important;
}
.ann-theme-purple .dark\:text-blue-300 {
    color: #A724FF !important;
}
.ann-theme-purple .bg-\[\#007AFF\] {
    background-color: #AF52DE !important;
}
.ann-theme-purple .dark\:bg-\[\#0A84FF\] {
    background-color: #A724FF !important;
}
.ann-theme-purple .bg-blue-50 {
    background-color: rgba(175, 82, 222, 0.1) !important;
}
.ann-theme-purple .dark\:bg-blue-500\/10 {
    background-color: rgba(167, 36, 255, 0.1) !important;
}
.ann-theme-purple .border-t-\[\#007AFF\] {
    border-top-color: #AF52DE !important;
}
.ann-theme-purple .dark\:border-t-\[\#0A84FF\] {
    border-top-color: #A724FF !important;
}
.ann-theme-purple .border-\[\#007AFF\] {
    border-color: #AF52DE !important;
}
.ann-theme-purple .dark\:border-\[\#0A84FF\] {
    border-color: #A724FF !important;
}
.ann-theme-purple .hover\:border-\[\#007AFF\]:hover {
    border-color: #AF52DE !important;
}
.ann-theme-purple .dark\:hover\:border-\[\#007AFF\]:hover {
    border-color: #A724FF !important;
}
.ann-theme-purple .shadow-blue-500\/20 {
    box-shadow: 0 4px 6px -1px rgba(175, 82, 222, 0.2), 0 2px 4px -2px rgba(175, 82, 222, 0.2) !important;
}
.dark .ann-theme-purple .shadow-blue-500\/20 {
    box-shadow: 0 4px 6px -1px rgba(167, 36, 255, 0.2), 0 2px 4px -2px rgba(167, 36, 255, 0.2) !important;
}
.ann-theme-purple .bg-\[\#007AFF\]\/10 {
    background-color: rgba(175, 82, 222, 0.1) !important;
}
.ann-theme-purple .text-blue-700 {
    color: #6C3483 !important;
}
.ann-theme-purple .bg-blue-100 {
    background-color: #F5EEF8 !important;
}
.ann-theme-purple .dark\:bg-blue-500\/15 {
    background-color: rgba(167, 36, 255, 0.15) !important;
}
.ann-theme-purple .news-jump-highlight {
    outline-color: #AF52DE !important;
}
.dark .ann-theme-purple .news-jump-highlight {
    outline-color: #A724FF !important;
}

/* 5. Announcement Theme: Custom Color Mode */
.ann-theme-custom .text-\[\#007AFF\],
.ann-theme-custom .text-blue-500,
.ann-theme-custom .text-blue-700 {
    color: var(--ann-accent-color) !important;
}
.dark .ann-theme-custom .text-\[\#007AFF\],
.dark .ann-theme-custom .dark\:text-\[\#0A84FF\],
.dark .ann-theme-custom .text-blue-500,
.dark .ann-theme-custom .dark\:text-blue-300,
.dark .ann-theme-custom .text-blue-700 {
    color: var(--ann-accent-color-dark) !important;
}
.ann-theme-custom .bg-\[\#007AFF\] {
    background-color: var(--ann-accent-color) !important;
}
.dark .ann-theme-custom .bg-\[\#007AFF\],
.dark .ann-theme-custom .dark\:bg-\[\#0A84FF\] {
    background-color: var(--ann-accent-color-dark) !important;
}
.ann-theme-custom .bg-blue-50,
.ann-theme-custom .bg-blue-100,
.ann-theme-custom .bg-\[\#007AFF\]\/10 {
    background-color: var(--ann-accent-color-alpha10) !important;
}
.dark .ann-theme-custom .bg-blue-50,
.dark .ann-theme-custom .dark\:bg-blue-500\/10,
.dark .ann-theme-custom .bg-blue-100,
.dark .ann-theme-custom .dark\:bg-blue-500\/15,
.dark .ann-theme-custom .bg-\[\#007AFF\]\/10 {
    background-color: var(--ann-accent-color-dark-alpha10) !important;
}
.ann-theme-custom .border-t-\[\#007AFF\],
.ann-theme-custom .border-\[\#007AFF\] {
    border-color: var(--ann-accent-color) !important;
}
.dark .ann-theme-custom .border-t-\[\#007AFF\],
.dark .ann-theme-custom .dark\:border-t-\[\#0A84FF\],
.dark .ann-theme-custom .border-\[\#007AFF\],
.dark .ann-theme-custom .dark\:border-\[\#0A84FF\] {
    border-color: var(--ann-accent-color-dark) !important;
}
.ann-theme-custom .hover\:border-\[\#007AFF\]:hover {
    border-color: var(--ann-accent-color) !important;
}
.dark .ann-theme-custom .hover\:border-\[\#007AFF\]:hover,
.dark .ann-theme-custom .dark\:hover\:border-\[\#007AFF\]:hover {
    border-color: var(--ann-accent-color-dark) !important;
}
.ann-theme-custom .shadow-blue-500\/20 {
    box-shadow: 0 4px 6px -1px var(--ann-accent-color-alpha20), 0 2px 4px -2px var(--ann-accent-color-alpha20) !important;
}
.dark .ann-theme-custom .shadow-blue-500\/20 {
    box-shadow: 0 4px 6px -1px var(--ann-accent-color-dark-alpha20), 0 2px 4px -2px var(--ann-accent-color-dark-alpha20) !important;
}
.ann-theme-custom .news-jump-highlight {
    outline-color: var(--ann-accent-color) !important;
}
.dark .ann-theme-custom .news-jump-highlight {
    outline-color: var(--ann-accent-color-dark) !important;
}


/* =========================================
   Part B: Messaging / Sidebar Accent (msg-theme-*)
   ========================================= */

/* 1. Messaging Theme: Orange Mode */
.msg-theme-orange .text-\[\#007AFF\] {
    color: #F97316 !important;
}
.dark .msg-theme-orange .text-\[\#007AFF\],
.dark .msg-theme-orange .dark\:text-\[\#0A84FF\] {
    color: #FB923C !important;
}
.msg-theme-orange .bg-\[\#007AFF\] {
    background-color: #F97316 !important;
}
.dark .msg-theme-orange .bg-\[\#007AFF\],
.dark .msg-theme-orange .dark\:bg-\[\#0A84FF\] {
    background-color: #FB923C !important;
}
.msg-theme-orange .peer-checked\:bg-\[\#007AFF\] {
    background-color: #F97316 !important;
}
.dark .msg-theme-orange .peer-checked\:bg-\[\#007AFF\],
.dark .msg-theme-orange .dark\:peer-checked\:bg-\[\#007AFF\] {
    background-color: #FB923C !important;
}
.msg-theme-orange .focus\:border-\[\#007AFF\]:focus {
    border-color: #F97316 !important;
}
.dark .msg-theme-orange .focus\:border-\[\#007AFF\]:focus,
.dark .msg-theme-orange .dark\:focus\:border-\[\#007AFF\]:focus {
    border-color: #FB923C !important;
}
.msg-theme-orange .bg-blue-500\/10,
.msg-theme-orange .bg-\[\#007AFF\]\/10 {
    background-color: rgba(249, 115, 22, 0.1) !important;
}
.dark .msg-theme-orange .bg-blue-500\/10,
.dark .msg-theme-orange .dark\:bg-blue-500\/10,
.dark .msg-theme-orange .bg-\[\#007AFF\]\/10 {
    background-color: rgba(251, 146, 60, 0.1) !important;
}

/* 2. Messaging Theme: Blue Mode */
/* Default blue values apply automatically */

/* 3. Messaging Theme: Green Mode */
.msg-theme-green .text-\[\#007AFF\] {
    color: #34C759 !important;
}
.dark .msg-theme-green .text-\[\#007AFF\],
.dark .msg-theme-green .dark\:text-\[\#0A84FF\] {
    color: #95FF14 !important;
}
.msg-theme-green .bg-\[\#007AFF\] {
    background-color: #34C759 !important;
}
.dark .msg-theme-green .bg-\[\#007AFF\],
.dark .msg-theme-green .dark\:bg-\[\#0A84FF\] {
    background-color: #95FF14 !important;
}
.msg-theme-green .peer-checked\:bg-\[\#007AFF\] {
    background-color: #34C759 !important;
}
.dark .msg-theme-green .peer-checked\:bg-\[\#007AFF\],
.dark .msg-theme-green .dark\:peer-checked\:bg-\[\#007AFF\] {
    background-color: #95FF14 !important;
}
.msg-theme-green .focus\:border-\[\#007AFF\]:focus {
    border-color: #34C759 !important;
}
.dark .msg-theme-green .focus\:border-\[\#007AFF\]:focus,
.dark .msg-theme-green .dark\:focus\:border-\[\#007AFF\]:focus {
    border-color: #95FF14 !important;
}
.msg-theme-green .bg-blue-500\/10,
.msg-theme-green .bg-\[\#007AFF\]\/10 {
    background-color: rgba(52, 199, 89, 0.1) !important;
}
.dark .msg-theme-green .bg-blue-500\/10,
.dark .msg-theme-green .dark\:bg-blue-500\/10,
.dark .msg-theme-green .bg-\[\#007AFF\]\/10 {
    background-color: rgba(149, 255, 20, 0.1) !important;
}

/* 4. Messaging Theme: Purple Mode */
.msg-theme-purple .text-\[\#007AFF\] {
    color: #AF52DE !important;
}
.dark .msg-theme-purple .text-\[\#007AFF\],
.dark .msg-theme-purple .dark\:text-\[\#0A84FF\] {
    color: #A724FF !important;
}
.msg-theme-purple .bg-\[\#007AFF\] {
    background-color: #AF52DE !important;
}
.dark .msg-theme-purple .bg-\[\#007AFF\],
.dark .msg-theme-purple .dark\:bg-\[\#0A84FF\] {
    background-color: #A724FF !important;
}
.msg-theme-purple .peer-checked\:bg-\[\#007AFF\] {
    background-color: #AF52DE !important;
}
.dark .msg-theme-purple .peer-checked\:bg-\[\#007AFF\],
.dark .msg-theme-purple .dark\:peer-checked\:bg-\[\#007AFF\] {
    background-color: #A724FF !important;
}
.msg-theme-purple .focus\:border-\[\#007AFF\]:focus {
    border-color: #AF52DE !important;
}
.dark .msg-theme-purple .focus\:border-\[\#007AFF\]:focus,
.dark .msg-theme-purple .dark\:focus\:border-\[\#007AFF\]:focus {
    border-color: #A724FF !important;
}
.msg-theme-purple .bg-blue-500\/10,
.msg-theme-purple .bg-\[\#007AFF\]\/10 {
    background-color: rgba(175, 82, 222, 0.1) !important;
}
.dark .msg-theme-purple .bg-blue-500\/10,
.dark .msg-theme-purple .dark\:bg-blue-500\/10,
.dark .msg-theme-purple .bg-\[\#007AFF\]\/10 {
    background-color: rgba(167, 36, 255, 0.1) !important;
}

/* 5. Messaging Theme: Custom Color Mode */
.msg-theme-custom .text-\[\#007AFF\] {
    color: var(--msg-accent-color) !important;
}
.dark .msg-theme-custom .text-\[\#007AFF\],
.dark .msg-theme-custom .dark\:text-\[\#0A84FF\] {
    color: var(--msg-accent-color-dark) !important;
}
.msg-theme-custom .bg-\[\#007AFF\] {
    background-color: var(--msg-accent-color) !important;
}
.dark .msg-theme-custom .bg-\[\#007AFF\],
.dark .msg-theme-custom .dark\:bg-\[\#0A84FF\] {
    background-color: var(--msg-accent-color-dark) !important;
}
.msg-theme-custom .peer-checked\:bg-\[\#007AFF\] {
    background-color: var(--msg-accent-color) !important;
}
.dark .msg-theme-custom .peer-checked\:bg-\[\#007AFF\],
.dark .msg-theme-custom .dark\:peer-checked\:bg-\[\#007AFF\] {
    background-color: var(--msg-accent-color-dark) !important;
}
.msg-theme-custom .focus\:border-\[\#007AFF\]:focus {
    border-color: var(--msg-accent-color) !important;
}
.dark .msg-theme-custom .focus\:border-\[\#007AFF\]:focus {
    border-color: var(--msg-accent-color-dark) !important;
}
.msg-theme-custom .bg-blue-500\/10,
.msg-theme-custom .bg-\[\#007AFF\]\/10 {
    background-color: var(--msg-accent-color-alpha10) !important;
}
.dark .msg-theme-custom .bg-blue-500\/10,
.dark .msg-theme-custom .bg-\[\#007AFF\]\/10 {
    background-color: var(--msg-accent-color-dark-alpha10) !important;
}


/* =========================================
   Part C: Custom Elements
   ========================================= */

/* Teacher badge follows announcement theme via :root CSS variables */
.teacher-badge {
    color: var(--ann-accent-color, #007AFF) !important;
}
.dark .teacher-badge {
    color: var(--ann-accent-color-dark, #0A84FF) !important;
}

/* Active chat item background color */
.active-chat-item {
    background-color: rgba(0, 0, 0, 0.05) !important;
}
.dark .active-chat-item {
    background-color: rgba(255, 255, 255, 0.05) !important;
}


/* =========================================
   Part D: Chat Message & Send Button Accent (chat-theme-*)
   ========================================= */

.chat-theme-orange .chat-accent-bg {
    background-color: #F97316 !important;
}
.dark .chat-theme-orange .chat-accent-bg {
    background-color: #FB923C !important;
}

.chat-theme-blue .chat-accent-bg {
    background-color: #007AFF !important;
}
.dark .chat-theme-blue .chat-accent-bg {
    background-color: #0A84FF !important;
}

.chat-theme-green .chat-accent-bg {
    background-color: #34C759 !important;
}
.dark .chat-theme-green .chat-accent-bg {
    background-color: #95FF14 !important;
}

.chat-theme-purple .chat-accent-bg {
    background-color: #AF52DE !important;
}
.dark .chat-theme-purple .chat-accent-bg {
    background-color: #A724FF !important;
}

.chat-theme-custom .chat-accent-bg {
    background-color: var(--chat-accent-color) !important;
}
.dark .chat-theme-custom .chat-accent-bg {
    background-color: var(--chat-accent-color-dark) !important;
}


/* =========================================
   Part E: Other Messages Bubble Accent (other-theme-*)
   ========================================= */

/* Default (gray) - matches original */
.other-accent-bg {
    background-color: #E9E9EB;
    color: #000;
}
.dark .other-accent-bg {
    background-color: #3A3A3C;
    color: #fff;
}

.other-theme-gray .other-accent-bg {
    background-color: #E9E9EB !important;
    color: #000 !important;
}
.dark .other-theme-gray .other-accent-bg {
    background-color: #3A3A3C !important;
    color: #fff !important;
}

.other-theme-orange .other-accent-bg {
    background-color: #F97316 !important;
    color: #fff !important;
}
.dark .other-theme-orange .other-accent-bg {
    background-color: #FB923C !important;
    color: #fff !important;
}

.other-theme-blue .other-accent-bg {
    background-color: #007AFF !important;
    color: #fff !important;
}
.dark .other-theme-blue .other-accent-bg {
    background-color: #0A84FF !important;
    color: #fff !important;
}

.other-theme-green .other-accent-bg {
    background-color: #34C759 !important;
    color: #000 !important;
}
.dark .other-theme-green .other-accent-bg {
    background-color: #95FF14 !important;
    color: #000 !important;
}

.other-theme-purple .other-accent-bg {
    background-color: #AF52DE !important;
    color: #fff !important;
}
.dark .other-theme-purple .other-accent-bg {
    background-color: #A724FF !important;
    color: #fff !important;
}

.other-theme-custom .other-accent-bg {
    background-color: var(--other-accent-color) !important;
    color: #fff !important;
}
.dark .other-theme-custom .other-accent-bg {
    background-color: var(--other-accent-color-dark) !important;
    color: #fff !important;
}

/* iOS Switch Toggle */
.ios-switch-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.ios-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ios-switch-track {
    width: 46px;
    height: 26px;
    background-color: rgba(120, 120, 128, 0.16);
    border-radius: 999px;
    position: relative;
    transition: background-color 0.2s ease;
}

.dark .ios-switch-track {
    background-color: rgba(255, 255, 255, 0.15);
}

.ios-switch-thumb {
    width: 22px;
    height: 22px;
    background-color: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ios-switch-input:checked + .ios-switch-track {
    background-color: var(--msg-accent-color, #34C759);
}

.dark .ios-switch-input:checked + .ios-switch-track {
    background-color: var(--msg-accent-color-dark, #30D158);
}

.ios-switch-input:checked + .ios-switch-track .ios-switch-thumb {
    transform: translateX(20px);
}

/* Custom styling to improve readability of chat input and camera icon on Liquid Glass backgrounds */
#u-msg::placeholder {
    color: rgba(0, 0, 0, 0.7) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.7) !important;
}

.dark #u-msg::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.75) !important;
}

/* Force high contrast when input is disabled (e.g. system notification only) */
#u-msg:disabled {
    color: rgba(0, 0, 0, 0.8) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.8) !important;
}

.dark #u-msg:disabled {
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

#u-msg:disabled::placeholder {
    color: rgba(0, 0, 0, 0.8) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(0, 0, 0, 0.8) !important;
}

.dark #u-msg:disabled::placeholder {
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

/* Custom override for the camera SVG color to prevent blending into grey messages */
#chatCameraBtn svg {
    color: rgba(0, 0, 0, 0.75) !important;
}

.dark #chatCameraBtn svg {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Custom rounded checkbox */
.rounded-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 1.5px solid rgba(120, 120, 128, 0.4);
    background-color: transparent;
    outline: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.2s ease;
}

.rounded-checkbox:checked {
    background-color: #007AFF;
    border-color: #007AFF;
}

.rounded-checkbox:checked::after {
    content: '';
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.dark .rounded-checkbox {
    border-color: rgba(255, 255, 255, 0.3);
}

.dark .rounded-checkbox:checked {
    background-color: #0A84FF;
    border-color: #0A84FF;
}

/* Sidebar tab active underline indicator animation */
.sidebar-tab-indicator {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-tab-indicator.active {
    width: 24px;
    height: 3px;
    border-radius: 9999px;
    opacity: 1;
    transform: scale(1);
}

/* Synchronize sidebar tab text color transition with the underline animation */
.sidebar-tabs button {
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hide native scrollbar for sidebar sub lists to use custom animated scrollbars */
#sidebarSubList {
    scrollbar-width: none !important;
}
#sidebarSubList::-webkit-scrollbar {
    display: none !important;
}

/* Custom animated scrollbar */
.custom-scrollbar-track {
    pointer-events: auto;
    user-select: none;
}
.custom-scrollbar-thumb {
    background: rgba(120, 120, 120, 0.1) !important;
    border-radius: 10px;
    width: 4px;
    right: 0px;
}
.custom-scrollbar-track:hover .custom-scrollbar-thumb,
.custom-scrollbar-thumb:hover {
    background: rgba(120, 120, 120, 0.4) !important;
}

.dark .custom-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05) !important;
}
.dark .custom-scrollbar-track:hover .custom-scrollbar-thumb,
.dark .custom-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Ensure list item borders/separators in dark mode are neutral and clean (not blueish) */
.dark .dark\:border-gray-800,
.dark #sidebarSubList .border-b {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Delay empty chat placeholder display by 0.5s to prevent flashing during message loading */
@keyframes placeholderFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.chat-placeholder-delay {
    animation: placeholderFadeIn 0.2s ease-out 0.5s both;
}

/* Disable text selection globally to prevent accidental selection on mobile/fast clicks */
body {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Allow text selection in chat section, news/announcement section, and all inputs/textareas */
#chatSection,
#newsSection,
#chatBox,
#newsAnnouncementsScrollArea,
input,
textarea,
[contenteditable="true"] {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Custom class for chat back button visibility */
.chat-back-btn {
    display: flex;
}
@media (min-width: 800px) {
    .chat-back-btn {
        display: none !important;
    }
}

@media (min-width: 800px) and (max-width: 1023px) {
    /* When Messages/Chat is active (desktop-like two-panel layout) */
    body.desktop-messages-layout-active #newsSection {
        display: none !important;
    }
    body.desktop-messages-layout-active #sidePanel {
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        flex: 0 0 320px !important;
        display: flex !important;
    }
    body.desktop-messages-layout-active #chatSection {
        display: flex !important;
        flex: 1 1 auto !important;
    }
    body.desktop-messages-layout-active #bottomNavContainer {
        display: flex !important;
        left: 160px !important;
        transform: translateX(-50%) !important;
        width: 290px !important;
        bottom: 12px !important;
        z-index: 50 !important;
    }

    /* When Hub/Tools is active (mobile-like single-panel layout) */
    body.mobile-layout-active #newsSection {
        display: flex !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    body.mobile-layout-active #sidePanel {
        display: none !important;
    }
    body.mobile-layout-active #chatSection {
        display: none !important;
    }
    body.mobile-layout-active #bottomNavContainer {
        display: flex !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 32px) !important;
        max-width: 380px !important;
        bottom: 24px !important;
        z-index: 50 !important;
    }
}

/* In 800-1024px two-panel messages layout: hide search button (it's accessible from the messages panel).
   In mobile-layout-active (Hub/Tool full screen), keep the search button visible like true mobile. */
@media (min-width: 800px) and (max-width: 1023px) {
    body.desktop-messages-layout-active #tabBtn-search {
        display: none !important;
    }
}