/* Mobile Chat Overrides */
body.chat-page {
    background: #fff;
}

body.chat-page #main {
    padding: 0 !important;
}
.page-index{padding-bottom: 0;}

body.chat-page #main .inner-wrap,
body.chat-page #content,
body.chat-page #primary {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.chat-app {
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}
.chat-app::before, .chat-app::after{content: none;}

#chatConversationList{
    max-height: none;
    overflow: unset;
}
.chat-thread-list{
    flex: none;
    min-height: auto;
    overflow: hidden;
}

/* Hide Topbar */
.chat-topbar {
    display: none !important;
}

/* Layout Container */
.chat-layout {
    display: block; /* Disable grid */
    padding: 0;
    padding-bottom: 56px;
    position: relative;
    max-height: none;
    overflow: visible !important; /* 关键：允许 sticky 穿透 */
    height: auto !important;
}

/* Columns */
.chat-column {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    height: 100%;
    width: 100%;
    background: var(--chat-bg);
    /* transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); TRANSITION REMOVED TO FIX FIXED POS */
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: visible !important; /* 允许 sticky 生效 */
    height: auto !important; /* 允许内容撑开高度 */
}

.chat-column-right {
    display: none !important;
}

/* View Switching Logic - Repurposed for Fixed Positioning Support */
/* Using display toggle instead of transform to avoid creating a containing block for fixed position elements */

.chat-layout.view-list .chat-column-left {
    display: flex !important;
}
.chat-layout.view-list .chat-column-stage {
    display: none !important;
}

.chat-layout.view-chat .chat-column-left {
    display: none !important;
}
.chat-layout.view-chat .chat-column-stage {
    /* Let the active panel logic determine display:flex */
    transform: none !important; 
    z-index: 20;
}

/* Left Column Content */
.chat-profile-card {
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid var(--chat-border);
}

.chat-left-actions {
    padding: 12px 16px;
    border-bottom: 1px solid var(--chat-border);
    background: #fcfcfc;
}

.chat-thread-header {
    padding: 12px 16px;
    background: #f5f1e6;
}

.chat-thread-list li {
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    border-radius: 0;
    background: #fff;
    margin: 0;
}

/* Chat Stage Content */
.chat-stage-heading {
    padding: 10px;
    background: #fff; /* 确保不透明 */
    border-bottom: 1px solid var(--chat-border);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: -webkit-sticky; /* Safari 兼容 */
    position: sticky; /* Global sticky for other panels */
    top: 0;
    z-index: 100;
    width: 100%; /* 确保占满宽度 */
    box-sizing: border-box; /* 包含 padding */
    flex-direction: row;
    justify-content: space-evenly;
}

/* 消息面板专用头部包裹层：整体固定 */
.chat-header-group {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    width: 100%;
}
/* 包裹层内的标题不再独立固定 */
.chat-header-group .chat-stage-heading {
    position: static;
    z-index: auto;
}
.chat-stage-heading > :first-child {
  flex: 0 0 32px;
  margin-right: auto;
}
.chat-stage-heading > div {
  margin: auto;
}
.chat-column-left .chat-stage-heading > div{margin: 0 auto 0 0;}

#chatPinsBar {
    /* 移除之前的 sticky 设置，作为 header-group 的一部分自然排列 */
    background: #fff;
    border-bottom: 1px solid var(--chat-border);
    width: 100%;
}

.chat-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--chat-primary);
    cursor: pointer;
    margin-right: -4px;
}
.chat-back-btn svg {
    width: 24px;
    height: 24px;
}

.chat-messages {
    background: var(--chat-bg);
    padding: 16px;
    border: none;
    border-radius: 0;
    flex: 1;
}

.chat-composer-tools {
    background: #fff;
    margin: 0;
    padding: 8px 16px;
    border-top: 1px solid var(--chat-border);
}

.chat-composer {
    flex-direction: row;
    align-items: center;
    border-radius: 0;
    border: none;
    padding: 8px 16px;
    background: #fff;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

.chat-composer textarea {
    background: #f5f5f5;
    border-radius: 20px;
    padding: 8px 12px;
    min-height: 40px;
    max-height: 100px;
    overflow-y: auto;
}
.chat-composer textarea:focus{height: 100px;}

/* Bottom Navigation */
.chat-bottom-nav {
    position: fixed;
    width: 10rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    height: 56px;
    background: #fff;
    border-top: 1px solid var(--chat-border);
    justify-content: space-around;
    align-items: center;
    z-index: 50;
}

.chat-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #999;
    font-size: 10px;
    gap: 4px;
    cursor: pointer;
    height: 100%;
}

.chat-nav-item.active {
    color: var(--chat-primary);
}

.chat-nav-item svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.chat-nav-indicator {
    top: 4px;
    right: 30%;
}

/* Adjustments for various panels */
.chat-main-panel {
    display: none; /* Controlled by JS manual logic or class, override defaults */
}
/* 强制在列表视图下隐藏消息面板 (覆盖 active-panel 的 display: flex) */
.chat-layout.view-list .chat-main-panel[data-main-panel="messages"] {
    display: none !important;
}
.chat-main-panel.active-panel {
    display: flex !important;
    flex-direction: column;
}

/* 确保 stage 也不限制滚动，以支持 sticky */
.chat-column-stage {
    overflow: visible !important;
    height: auto !important;
}

/* Fix modal positioning on mobile */
.chat-modal-content {
    width: 90%;
    max-height: 80%;
}

.chat-setting-content, 
.chat-manage-list {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

/* Mobile specific hide/show */
.mobile-hidden { display: none !important; }
.mobile-visible { display: block !important; }
#chatAuditList li{
    flex-direction: column;
}
#chatAuditList li .chat-notify-main{width: 100%;}
@media (max-width: 768px) {
    .chat-stage-actions {
        width: auto;
        gap: 8px;
    }
}
.chat-stage-heading h2{font-size: 16px;}
.chat-announcement{padding: 0 16px;}
.chat-announcement-close{align-self: self-start;}
.chat-stage-actions .chat-link-btn {padding: 6px;}
/* Mobile Chat Layout - Flexbox Implementation */
/* Ensures the chat panel renders as a full-height flex column */
.chat-layout.view-chat .chat-main-panel[data-main-panel="messages"].active-panel {
    display: flex !important;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* Mobile viewport height */
    position: fixed; /* Fix the whole panel to the screen */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500; /* High z-index to overlap everything */
    background: #fff;
    padding-bottom: 0;
}

/* Header - Natural height, no sticky needed in flex container */
.chat-header-group {
    position: relative !important;
    top: auto;
    width: 100%;
    flex-shrink: 0;
    z-index: 10;
}

/* Messages - Fills remaining space */
.chat-messages {
    flex: 1;
    height: auto !important; /* Reset specific height */
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 10px !important;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

/* Input Area - Natural height at bottom */
.chat-input-area-fixed {
    position: relative !important;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    flex-shrink: 0;
    background: #fff;
    border-top: 1px solid var(--chat-border);
    z-index: 200;
    padding-bottom: env(safe-area-inset-bottom);
    /* Keyboard offset is updated in several quick passes; avoid visible "lift then fall". */
    transition: none;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.chat-input-area-fixed.keyboard-shifted,
.chat-input-area-fixed.keyboard-pending {
    padding-bottom: 0;
}
.chat-input-area-fixed.keyboard-shifted .chat-composer,
.chat-input-area-fixed.keyboard-pending .chat-composer {
    padding-bottom: 8px;
}
.chat-input-area-fixed.keyboard-pending {
    opacity: 0;
    pointer-events: none;
}

/* Hide input area when not in chat view */
.chat-layout.view-list .chat-input-area-fixed {
    display: none;
}
.chat-nav-item img{width: auto;height: 30px;}

.chat-column[data-main-panel="messages"] .chat-stage-heading > :first-child,
.chat-column[data-main-panel="groups"] .chat-stage-heading > :first-child,
.chat-column[data-main-panel="friends"] .chat-stage-heading > :first-child,
.chat-column[data-main-panel="audit"] .chat-stage-heading > :first-child,
.chat-column[data-main-panel="notifications"] .chat-stage-heading > :first-child {margin-right: 0;}
.chat-column[data-main-panel="groups"] .chat-stage-heading > div,
.chat-column[data-main-panel="friends"] .chat-stage-heading > div,
.chat-column[data-main-panel="audit"] .chat-stage-heading > div,
.chat-column[data-main-panel="notifications"] .chat-stage-heading > div {margin: 0;flex: 1;display: flex;justify-content: space-evenly;}
.chat-column[data-main-panel="messages"] .chat-stage-heading .chat-stage-actions,
.chat-column[data-main-panel="audit"] .chat-stage-heading .chat-stage-actions,
.chat-column[data-main-panel="notifications"] .chat-stage-heading .chat-stage-actions {flex: none;}
.chat-column[data-main-panel="groups"] .chat-stage-heading p,
.chat-column[data-main-panel="friends"] .chat-stage-heading p,
.chat-column[data-main-panel="audit"] .chat-stage-heading p,
.chat-column[data-main-panel="notifications"] .chat-stage-heading p {margin: 0;line-height: 1.6;}