/* ===== App Layout (三栏) ===== */
.app-layout{display:flex;height:var(--app-vh,100dvh);overflow:hidden}

/* ===== Sidebar - 频道列表 ===== */
.sidebar{width:260px;background:#1e1f2e;color:#fff;display:flex;flex-direction:column;flex-shrink:0;transition:transform .3s ease;z-index:100}
.sidebar-header{padding:16px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}
.sidebar-header h2{font-size:16px;font-weight:600}
.sidebar-header .btn-icon{background:none;border:none;color:rgba(255,255,255,.6);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:6px}
.sidebar-header .btn-icon:hover{background:rgba(255,255,255,.1);color:#fff}
.channel-list{flex:1;overflow-y:auto;padding:8px}
.channel-item{padding:10px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:10px;margin-bottom:2px;transition:background .15s;position:relative}
.channel-item:hover{background:rgba(255,255,255,.08)}
.channel-item.active{background:rgba(102,126,234,.3)}
.channel-item .ch-icon{font-size:18px;opacity:.7;flex-shrink:0}
.channel-item .ch-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.channel-item .ch-badge{background:#dc2626;color:#fff;font-size:11px;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;font-weight:600}
.sidebar-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px}
.sidebar-footer img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.sidebar-footer .user-name{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-footer .btn-icon{background:none;border:none;color:rgba(255,255,255,.5);font-size:16px;cursor:pointer;padding:4px;border-radius:4px}
.sidebar-footer .btn-icon:hover{color:#fff}
.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:99;opacity:0;pointer-events:none;transition:opacity .3s ease}

/* ===== Main Area Header ===== */
.main-area{flex:1;display:flex;flex-direction:column;min-width:0;background:#f0f2f5}
.chat-header{background:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,.06);flex-shrink:0;z-index:10}
.chat-header-left{display:flex;align-items:center;gap:10px;min-width:0}
.chat-header-left .menu-btn{display:none;background:none;border:none;font-size:22px;cursor:pointer;padding:4px;color:#333}
.chat-header-left h3{font-size:16px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-header-left .ch-desc{font-size:12px;color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-header-right{display:flex;align-items:center;gap:6px}
.chat-header-right .online-tag{font-size:12px;color:#667eea;background:rgba(102,126,234,.1);padding:2px 8px;border-radius:10px;white-space:nowrap}
.chat-header-right .btn-icon{background:none;border:none;font-size:18px;cursor:pointer;padding:4px;border-radius:4px;color:#666}
.chat-header-right .btn-icon:hover{background:#f0f0f0;color:#333}

/* ===== Members Panel (桌面右栏 / 手机抽屉) ===== */
.members-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:100;opacity:0;pointer-events:none;transition:opacity .3s ease}
.members-panel{width:240px;background:#fff;border-left:1px solid #e5e7eb;display:none;flex-direction:column;flex-shrink:0}
.members-panel.open{display:flex}
.members-panel-header{padding:14px 16px;border-bottom:1px solid #e5e7eb;font-size:14px;font-weight:600;color:#333;display:flex;align-items:center;justify-content:space-between;gap:8px}
.members-close-btn{background:none;border:none;font-size:16px;color:#999;cursor:pointer;padding:4px 10px;border-radius:6px;display:none;line-height:1}
.members-close-btn:hover{background:#f0f0f0;color:#333}
.members-hint{padding:8px 16px;font-size:11px;color:#888;background:#fafafa;border-bottom:1px solid #eee;line-height:1.4}
.members-list{flex:1;overflow-y:auto;padding:8px 12px}
.member-item{display:flex;align-items:center;gap:8px;padding:8px 6px;border-radius:6px;cursor:pointer;user-select:none;-webkit-user-select:none}
.member-item:hover{background:#f8f9fa}
.member-item:active{background:#eef0ff}
.member-item img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.member-item .member-name{font-size:13px;color:#333;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-item .member-role{font-size:11px;color:#999;background:#f0f0f0;padding:1px 6px;border-radius:4px}
.member-item .online-dot{width:8px;height:8px;border-radius:50%;background:#ccc;flex-shrink:0}
.member-item .online-dot.on{background:#22c55e}
.member-item .ai-tag{display:inline-block;font-size:10px;color:#667eea;background:#eef;padding:1px 5px;border-radius:3px;margin-right:4px;vertical-align:middle;font-weight:500}
.typing-bubble{padding:10px 14px !important;display:inline-flex;align-items:center;min-height:30px}
.typing-dots{display:inline-flex;gap:4px;align-items:center}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:#999;animation:typing-bounce 1.2s infinite ease-in-out}
.typing-dots span:nth-child(2){animation-delay:0.2s}
.typing-dots span:nth-child(3){animation-delay:0.4s}
@keyframes typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.typing-msg .msg-bubble{background:#f3f4f6 !important}