/* =============================================================
   聊天主界面 v3 样式（莫兰迪高级审美重写）
   设计哲学：
   - 莫兰迪配色：所有颜色低饱和、高灰度，无任何鲜艳刺眼色
   - 深色：夜紫罗兰（Night Mauve）—— 深岩蓝紫底 + 莫兰迪紫重点
   - 浅色：亚麻米（Cream Linen） —— 米色调底 + 莫兰迪紫重点
   - 背景 3 层：底 → 表面 → 浮层，明度差小于 8% 但看得见层次
   - 文字 4 级：主/次/弱/极弱，靠明度不用纯度
   - 主题切换 0.3s 过渡，所有相关元素平滑切换
   ============================================================= */
/* ============================================================
   主题变量
   ============================================================ */
/* ===== 默认深色：Night Mauve ===== */
:root,
[data-theme="dark"] {
    /* === 背景层级（明度差 ≤ 6%，眼睛舒适） === */
    --bg-page:        #1F2430;   /* 深岩蓝紫，最深 */
    --bg-surface:     #262B38;   /* 表面：卡片、面板 */
    --bg-surface-2:   #2E3342;   /* hover/激活 */
    --bg-floating:    #1A1E28;   /* 浮层：输入框，比底更暗 = 陷下去 */
    --bg-topbar:      rgba(31, 36, 48, 0.78);
    --bg-msg-self:    linear-gradient(135deg, rgba(155, 149, 201, 0.18), rgba(181, 160, 201, 0.18));
    --bg-msg-other:   rgba(255, 255, 255, 0.035);
    /* === 边框（极低对比，靠存在不靠强烈） === */
    --border-soft: rgba(255, 255, 255, 0.06);
    --border-mid:  rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);
    /* === 文字层级（4 级，全偏蓝紫调） === */
    --text-primary:   #E8E9EE;   /* 主文字，柔和白 */
    --text-secondary: #B0B3BD;   /* 次文字 */
    --text-muted:     #85888F;   /* 弱文字 */
    --text-faint:     #5C5F66;   /* 极弱（占位/分隔） */
    --text-on-accent: #FFFFFF;
    /* === 主色：莫兰迪紫（同色相家族） === */
    --accent:         #9B95C9;
    --accent-hover:   #B0AAD6;
    --accent-press:   #8A84B8;
    --accent-2:       #B5A0C9;
    --accent-grad:    linear-gradient(135deg, #9B95C9 0%, #B5A0C9 100%);
    --accent-grad-soft: linear-gradient(135deg, rgba(155, 149, 201, 0.14) 0%, rgba(181, 160, 201, 0.14) 100%);
    --accent-soft:    rgba(155, 149, 201, 0.14);
    --accent-border:  rgba(155, 149, 201, 0.32);
    /* === 状态色（莫兰迪化） === */
    --danger:  #D69A98;
    --danger-soft: rgba(214, 154, 152, 0.14);
    --danger-border: rgba(214, 154, 152, 0.32);
    --success: #88C9A1;
    --success-soft: rgba(136, 201, 161, 0.12);
    --warning: #D4B888;
    --warning-soft: rgba(212, 184, 136, 0.14);
    --warning-border: rgba(212, 184, 136, 0.30);
    /* === 阴影（极轻，主色微晕） === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.26);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.34);
    --shadow-glow: 0 6px 24px rgba(155, 149, 201, 0.18);
    /* === 页面背景（极淡径向光晕，几乎看不出来） === */
    --page-bg:
        radial-gradient(900px 600px at 12% -8%, rgba(155, 149, 201, 0.06) 0%, transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(181, 160, 201, 0.05) 0%, transparent 60%),
        var(--bg-page);
}
/* ===== 浅色：Cream Linen ===== */
[data-theme="light"] {
    --bg-page:        #F5F2EC;   /* 亚麻米，温暖不刺眼 */
    --bg-surface:     #FFFFFF;   /* 卡片纯白浮于米底 */
    --bg-surface-2:   #EDE9E0;   /* hover */
    --bg-floating:    #FAF8F4;   /* 输入框 */
    --bg-topbar:      rgba(255, 255, 255, 0.82);
    --bg-msg-self:    linear-gradient(135deg, rgba(155, 149, 201, 0.16), rgba(181, 160, 201, 0.16));
    --bg-msg-other:   #FAF8F4;
    --border-soft:    rgba(45, 40, 55, 0.06);
    --border-mid:     rgba(45, 40, 55, 0.10);
    --border-strong:  rgba(45, 40, 55, 0.16);
    --text-primary:   #3D3A47;   /* 紫黑，比纯黑柔 */
    --text-secondary: #6B6873;
    --text-muted:     #95939B;
    --text-faint:     #B8B6BC;
    --text-on-accent: #FFFFFF;
    --accent:         #7E78A8;
    --accent-hover:   #6E6896;
    --accent-press:   #605A85;
    --accent-2:       #A89AB8;
    --accent-grad:    linear-gradient(135deg, #8B83B0 0%, #A89AB8 100%);
    --accent-grad-soft: linear-gradient(135deg, rgba(139, 131, 176, 0.10) 0%, rgba(168, 154, 184, 0.10) 100%);
    --accent-soft:    rgba(126, 120, 168, 0.10);
    --accent-border:  rgba(126, 120, 168, 0.28);
    --danger:  #B57674;
    --danger-soft: rgba(181, 118, 116, 0.10);
    --danger-border: rgba(181, 118, 116, 0.28);
    --success: #6B9F84;
    --success-soft: rgba(107, 159, 132, 0.10);
    --warning: #B89B6E;
    --warning-soft: rgba(184, 155, 110, 0.10);
    --warning-border: rgba(184, 155, 110, 0.28);
    --shadow-xs: 0 1px 2px rgba(45, 40, 55, 0.04);
    --shadow-sm: 0 2px 8px rgba(45, 40, 55, 0.05);
    --shadow-md: 0 4px 16px rgba(45, 40, 55, 0.06), 0 1px 3px rgba(45, 40, 55, 0.04);
    --shadow-lg: 0 12px 36px rgba(45, 40, 55, 0.08), 0 4px 12px rgba(126, 120, 168, 0.06);
    --shadow-glow: 0 6px 24px rgba(126, 120, 168, 0.18);
    --page-bg:
        radial-gradient(900px 600px at 10% -8%, rgba(139, 131, 176, 0.06) 0%, transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(168, 154, 184, 0.05) 0%, transparent 60%),
        var(--bg-page);
}
/* 圆角（主题无关） */
:root {
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition-theme: background-color 0.3s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    /* 强调渐变（按钮/重点点缀用）—— 与首页同款：#667eea → #764ba2 */
    --btn-grad: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --btn-grad-soft: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    --btn-glow: 0 6px 20px rgba(102, 126, 234, 0.30);
}
/* =/* 基础布局 —— v7.x：用 flex:1 + min-height:0 替代固定 height:100vh，避免被父容器 padding 挤出白边 */
.chat-page {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--page-bg);
    color: var(--text-primary);
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    overflow: hidden;
    transition: var(--transition-theme);
}
/* v8.x：防御性——保证 chat-page 在 is-full 父级下占满高度 */
.page.is-full .chat-page {
    height: 100%;
    width: 100%;
    max-height: 100%;
}
/* ============================================================
   顶栏
   ============================================================ */
.chat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: var(--bg-topbar);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
    z-index: 20;
    transition: var(--transition-theme);
}
.topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}
/* ========== 品牌 ========== */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.15s;
}
.brand:hover { background: var(--accent-soft); }
/* v11.6:静态品牌(非链接) —— 不给 hover / 手型光标,避免误导成可点击 */
.brand.brand-static {
    cursor: default;
    user-select: none;
}
.brand.brand-static:hover { background: transparent; }
.brand-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-grad);
    color: var(--text-on-accent);
    border-radius: 8px;
    font-size: 0.95rem;
    box-shadow: var(--btn-glow);
}
.brand-text {
    background: var(--btn-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.02em;
}
.brand-sep {
    width: 1px;
    height: 18px;
    background: var(--border-mid);
    margin: 0 0.25rem;
}
/* ========== 房间切换 ========== */
.room-switcher { position: relative; }
.room-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.85rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.room-trigger:hover {
    background: var(--bg-surface-2);
    border-color: var(--border-mid);
}
.room-trigger-arrow {
    color: var(--text-muted);
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.room-switcher.open .room-trigger-arrow { transform: rotate(180deg); }
.room-trigger-cd {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    background: var(--warning-soft);
    border: 1px solid var(--warning-border);
    color: var(--warning);
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 999px;
    margin-left: 0.4rem;
    font-variant-numeric: tabular-nums;
}
.room-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 280px;
    background: var(--bg-surface);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.4rem;
    z-index: 30;
    animation: menu-down 0.18s ease;
}
@keyframes menu-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.room-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.88rem;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.12s;
    position: relative;
}
.room-menu-item:hover { background: var(--bg-surface-2); }
.room-menu-item.active {
    background: var(--accent-soft);
    color: var(--accent);
}
.room-menu-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-2);
    border-radius: 8px;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.room-menu-item.active .room-menu-icon {
    background: var(--btn-grad);
    color: var(--text-on-accent);
}
.room-menu-text { flex: 1; min-width: 0; }
.room-menu-title { font-weight: 500; }
.room-menu-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1px;
}
.room-menu-check { color: var(--accent); font-weight: 700; }
/* ============================================================
   顶栏右侧
   ============================================================ */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.online-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    background: var(--success-soft);
    border: 1px solid rgba(136, 201, 161, 0.30);
    color: var(--success);
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 999px;
    transition: var(--transition-theme);
}
[data-theme="light"] .online-pill {
    border-color: rgba(107, 159, 132, 0.28);
}
.online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px rgba(136, 201, 161, 0.5);
    animation: dot-pulse 2.2s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}
/* ============================================================
   顶栏图标按钮（主题切换 / 退出登录）
   ============================================================ */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-soft);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}
.icon-btn:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-border);
    transform: translateY(-1px);
}
.icon-btn:active { transform: translateY(0); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.8; }
.icon-btn.danger:hover {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger-border);
}
/* =============================================================
   Chat 主布局 wrapper（profile-panel 左 / chat-body 中 / cmd-panel 右）
   v10.3：grid 三列布局,各列可独立拖拽调整宽度,高度统一 100%
   ============================================================= */
.chat-layout {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    /* 三列布局
   ★ v3.0: 回到 inline grid-template-columns 直接驱动 (不用 CSS 变量 setProperty)
   原因: CSS 变量 setProperty 在某些浏览器/场景下不触发 grid 重排
   折叠态: Razor 端根据 LayoutCssClass 把对应列宽写为 0 (不再用 !important)
   拖拽: JS 直接写 inline grid-template-columns, 中栏始终 minmax(0, 1fr) 占满剩余
*/
.chat-layout {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    display: grid;
    /* 默认值(仅当 inline style 缺省时生效), 具体值由 Razor inline 注入 */
    grid-template-columns: 480px minmax(0, 1fr) 480px;
    grid-template-rows: 1fr;
    gap: 0;
    overflow: hidden;
    width: 100%;
}

/* chat-body 自身需要占满 grid 单元并提供内部 flex 上下文 */
.chat-layout > .chat-body {
    height: 100%;
    min-width: 0;
}
/* ============================================================
   消息列表
   ============================================================ */
.chat-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* 消息流容器 —— 必须有 flex:1 + min-height:0，否则消息列表无法被 cmd-panel 挤压而上移 */
.message-panel {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.message-list {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 1.25rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    scroll-behavior: smooth;
    transition: var(--transition-theme);
}
.message-list::-webkit-scrollbar { width: 6px; }
.message-list::-webkit-scrollbar-thumb {
    background: var(--border-mid);
    border-radius: 3px;
}
.message-list::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }
.msg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: var(--text-faint);
    font-size: 0.88rem;
    gap: 0.6rem;
    margin: auto;
}
.msg-empty-icon { font-size: 2.2rem; opacity: 0.5; }
/* ========== 消息气泡 ========== */
.msg-bubble {
    display: flex;
    gap: 0.65rem;
    max-width: 78%;
    align-self: flex-start;
    animation: msg-in 0.22s ease;
}
@keyframes msg-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.msg-bubble.mine {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.msg-bubble.is-system {
    align-self: flex-start;
    max-width: 90%;
}
/* v7.x：系统消息不再用警告条样式 —— 改用普通气泡 + 机器人头像 */
.msg-bubble.is-system .msg-body {
    background: var(--bg-msg-other);
    border: 1px solid var(--accent-border);
    color: var(--text-primary);
    text-align: left;
    font-size: 0.92rem;
    padding: 0.6rem 0.85rem;
    box-shadow: var(--shadow-xs);
}
/* 系统消息名称样式（"Bot" 字样） */
.msg-bubble.is-system .msg-name {
    color: var(--accent);
    font-weight: 700;
}
/* v7.x：强制系统消息时间显示（防止任何父级样式覆盖） */
.msg-bubble.is-system .msg-time {
    display: inline-block !important;
    visibility: visible !important;
    color: var(--text-faint) !important;
    font-size: 0.7rem !important;
    margin-left: auto !important;
}
/* 系统消息的机器人头像样式 */
.msg-avatar-bot {
    background: var(--btn-grad);
    border: 1px solid var(--accent-border);
}
.msg-avatar-bot .msg-avatar-emoji {
    font-size: 1.2rem;
    line-height: 1;
}
.msg-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    background: var(--accent-grad-soft);
    border: 1px solid var(--accent-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.02em;
}
.msg-bubble.mine .msg-avatar {
    background: var(--btn-grad);
    color: var(--text-on-accent);
    border-color: transparent;
}
.msg-body {
    background: var(--bg-msg-other);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.85rem;
    min-width: 0;
    max-width: 100%;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-theme);
}
/* 我方消息：淡紫渐变 + 圆角方向反转（"信封"感） */
.msg-bubble.mine .msg-body {
    background: var(--bg-msg-self);
    border-color: var(--accent-border);
    color: var(--text-primary);
}
.msg-bubble.mine .msg-name,
.msg-bubble.mine .msg-level,
.msg-bubble.mine .msg-job,
.msg-bubble.mine .msg-time {
    color: var(--accent);
}
.msg-bubble.mine .msg-content { color: var(--text-primary); }
.msg-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
    flex-wrap: wrap;
}
.msg-name   { color: var(--text-secondary); font-weight: 600; }
.msg-level  {
    font-size: 0.7rem;
    padding: 1px 6px;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 4px;
}
.msg-job    { color: var(--text-faint); font-size: 0.7rem; }
.msg-time   { color: var(--text-faint); font-size: 0.7rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.msg-bubble.mine .msg-time { margin-left: 0; margin-right: auto; }
.msg-content {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.25;
    white-space: pre-wrap;
    word-break: break-word;
}
/* vNEXT+：空内容时不渲染文本节点，但仍可能有图片；确保容器不撑出空行 */
.msg-content:empty { display: none; }
.msg-content.is-empty { font-size: 0; line-height: 0; }   /* 兜底：万一 Razor 渲染了空文本 */
/* ============================================================
   输入栏
   ============================================================ */
.input-bar {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0.75rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    /* v7.x：底色 + 顶部透明渐变叠层，让 input-bar 跟页面背景自然融合，消除底部白边 */
    background:
        linear-gradient(180deg, transparent 0%, var(--bg-topbar) 60%),
        var(--bg-topbar);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--border-soft);
    flex-shrink: 0;
    position: relative;
    z-index: 8;
    box-shadow: var(--shadow-sm);
    min-height: 64px;
    transition: var(--transition-theme);
}
.cmd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.85rem;
    background: var(--bg-floating);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    height: 42px;
}
.cmd-toggle:hover {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent);
}
.cmd-toggle.is-active {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent);
}
.cmd-toggle-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-grad);
    color: var(--text-on-accent);
    border-radius: 4px;
    font-size: 0.7rem;
    box-shadow: var(--btn-glow);
}
/* ========== 输入框 + 清空按钮 ========== */
.msg-input-wrap {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
}
.msg-input-wrap .msg-input {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}
.msg-input {
    padding: 0.6rem 2.3rem 0.6rem 0.95rem;
    background: var(--bg-floating);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.92rem;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    transition: all 0.18s;
    resize: none;
    min-height: 42px;
    max-height: 140px;
    /* v10.5：防御性 — 保证 input-bar 内被其他元素覆盖时仍可点击/输入 */
    position: relative;
    z-index: 1;
    pointer-events: auto;
}
.msg-input::placeholder {
    color: var(--text-faint);
}
.msg-input:focus {
    background: var(--bg-surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.msg-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.msg-clear-btn {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--text-faint);
    color: var(--bg-page);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
    transition: all 0.15s ease;
}
.msg-input-wrap.has-text .msg-clear-btn { display: inline-flex; }
.msg-clear-btn:hover {
    background: var(--danger);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}
/* ========== 发送按钮 ========== */
.send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0 1.1rem;
    height: 42px;
    background: var(--btn-grad);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-on-accent);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    flex-shrink: 0;
    box-shadow: var(--btn-glow);
    letter-spacing: 0.02em;
}
.send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35);
    filter: brightness(1.05);
}
.send-btn:active:not(:disabled) { transform: translateY(0); }
.send-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.send-icon { font-size: 0.95rem; }
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ============================================================
   指令面板
   v10.3:grid 右列,100% 高度,左侧可拖拽改宽 (--cmd-grid-w 驱动)
   实际宽度 = .chat-layout 的 --cmd-grid-w,这里不再二次限制
   ============================================================ */
.cmd-panel {
    --cmd-min-w: 280px;
    --cmd-max-w: 720px;
    width: 100%;              /* 撑满 grid 单元(列宽由 --cmd-grid-w 决定) */
    min-width: 0;
    max-width: none;
    height: 100%;
    background: var(--bg-topbar);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-left: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
    z-index: 7;
    display: flex;
    flex-direction: column;
    overflow: visible;        /* ★ 修复：允许 cmd-resize 溢出到左侧(原 overflow:hidden 会裁掉拖拽条) */
    animation: cmd-slide-in 0.22s ease;
    transition: var(--transition-theme);
    position: relative;
}
@keyframes cmd-slide-in {
    from { transform: translateX(12px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* 拖拽条(在 cmd-panel 左侧,与 profile-panel 镜像) — 区域大、明显、永远可见 */
.cmd-resize {
    position: absolute;
    top: 0;
    left: 0;                  /* 贴栏左边界 */
    transform: translateX(-50%); /* 自身宽度一半溢出到栏外 */
    width: 12px;
    height: 100%;
    cursor: ew-resize;
    z-index: 50;              /* 高于栏内一切(覆盖卡片/标题) */
    background: transparent;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}
.cmd-resize::before {
    /* 永远可见的中央灰线 */
    content: '';
    width: 2px;
    height: 100%;
    background: var(--border-soft, rgba(0,0,0,0.08));
    transition: background 0.15s, height 0.15s, width 0.15s;
    border-radius: 1px;
}
.cmd-resize::after {
    /* hover/拖拽时显示中点高亮 */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 56px;
    border-radius: 2px;
    background: transparent;
    transition: background 0.15s, height 0.15s, box-shadow 0.15s;
    pointer-events: none;
}
.cmd-resize:hover::before,
.cmd-resize.is-dragging::before {
    background: var(--accent, #6366f1);
}
.cmd-resize:hover::after,
.cmd-resize.is-dragging::after {
    background: var(--accent, #6366f1);
    height: 96px;
    box-shadow: 0 0 8px var(--accent-soft, rgba(99,102,241,0.4));
}
.cmd-panel-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-surface);
    flex-shrink: 0;
    min-height: 44px;
    transition: var(--transition-theme);
}
.cmd-panel-icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-grad);
    color: var(--text-on-accent);
    border-radius: 6px;
    font-size: 0.78rem;
    box-shadow: var(--btn-glow);
    flex-shrink: 0;
}
.cmd-panel-title-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
.cmd-panel-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.55rem;
    height: 32px;
    background: var(--bg-floating);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.82rem;
    transition: all 0.15s;
}
.cmd-panel-search:focus-within {
    border-color: var(--accent);
    background: var(--bg-surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.cmd-panel-search input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-family: inherit;
}
.cmd-panel-search input::placeholder { color: var(--text-faint); }
.cmd-panel-search-icon { font-size: 0.85rem; opacity: 0.7; }
.cmd-panel-close {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.cmd-panel-close:hover {
    background: var(--danger-soft);
    color: var(--danger);
}
.cmd-panel-search-standalone {
    flex: 1;
    min-width: 0;
    height: 32px;
    background: var(--bg-floating);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 0 0.65rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
}
.cmd-panel-search-standalone:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.cmd-panel-body {
    display: flex;
    min-height: 0;
    flex: 1 1 0;
    overflow: hidden;
    background: var(--bg-page);
    transition: var(--transition-theme);
}
.cmd-sidebar {
    width: 180px;
    flex-shrink: 0;
    overflow-y: auto;
    padding: 0.5rem;
    border-right: 1px solid var(--border-soft);
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: var(--transition-theme);
}
.cmd-sidebar::-webkit-scrollbar { width: 4px; }
.cmd-sidebar::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 2px; }
.cmd-cat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
    text-align: left;
    width: 100%;
    min-width: 0;
}
.cmd-cat:hover {
    background: var(--bg-surface-2);
    color: var(--text-primary);
}
.cmd-cat.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent-border);
}
.cmd-cat-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface-2);
    border-radius: 5px;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: all 0.12s;
}
.cmd-cat.active .cmd-cat-icon {
    background: var(--btn-grad);
    color: var(--text-on-accent);
    box-shadow: var(--btn-glow);
}
.cmd-cat-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-cat-count {
    font-size: 0.7rem;
    color: var(--text-faint);
    background: var(--bg-floating);
    padding: 0 5px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
    min-width: 18px;
    text-align: center;
}
.cmd-cat.active .cmd-cat-count {
    background: var(--accent);
    color: var(--text-on-accent);
}
.cmd-content {
    flex: 1;
    min-width: 0;
    min-height: 0;            /* v10.4:让 flex:1 在 flex column 里真正撑满 */
    overflow-y: auto;
    padding: 0.5rem 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: var(--transition-theme);
}
.cmd-content::-webkit-scrollbar { width: 6px; }
.cmd-content::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
/* 分类颜色（莫兰迪化） */
.cs-blue   { --accent: #8FA8C4; --accent-soft: rgba(143, 168, 196, 0.14); }
.cs-green  { --accent: #88C9A1; --accent-soft: rgba(136, 201, 161, 0.14); }
.cs-pink   { --accent: #C9A0AE; --accent-soft: rgba(201, 160, 174, 0.14); }
.cs-cyan   { --accent: #8FB8B8; --accent-soft: rgba(143, 184, 184, 0.14); }
.cs-amber  { --accent: #D4B888; --accent-soft: rgba(212, 184, 136, 0.14); }
.cs-purple { --accent: #A89AB8; --accent-soft: rgba(168, 154, 184, 0.14); }
.cs-teal   { --accent: #8FB8AE; --accent-soft: rgba(143, 184, 174, 0.14); }
.cs-orange { --accent: #C9A788; --accent-soft: rgba(201, 167, 136, 0.14); }
.cs-violet { --accent: #A89AB8; --accent-soft: rgba(168, 154, 184, 0.14); }
.cs-indigo { --accent: #9590B8; --accent-soft: rgba(149, 144, 184, 0.14); }
.cs-red    { --accent: #C49A98; --accent-soft: rgba(196, 154, 152, 0.14); }
.cs-rose   { --accent: #C99EAA; --accent-soft: rgba(201, 158, 170, 0.14); }
.cmd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.45rem;
    min-height: 0;
    align-content: start;
}
.cmd-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.14s;
    text-align: left;
    min-width: 0;
    box-shadow: var(--shadow-xs);
}
.cmd-item:hover {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.cmd-item-cmd {
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    font-size: 0.8rem;
    color: var(--accent);
    word-break: break-all;
    line-height: 1.3;
    font-weight: 500;
}
.cmd-item-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.35;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cmd-empty, .cmd-sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--text-faint);
    font-size: 0.85rem;
}
.cmd-empty-icon { font-size: 2.2rem; opacity: 0.5; }
.cmd-sidebar-empty {
    padding: 1rem 0.5rem;
    font-size: 0.78rem;
    color: var(--text-faint);
}
/* ============================================================
   响应式
   v10.4:PC 3 栏 grid 可拖拽;平板 3 栏紧凑;手机单栏 + 抽屉
   ============================================================ */

/* 平板(<1024px):grid 紧凑,最小列宽收窄 */
@media (max-width: 1024px) {
    .chat-layout {
        grid-template-columns:
            var(--pp-grid-w, 320px)
            minmax(0, 1fr)
            var(--cmd-grid-w, 300px);
    }
    .chat-layout.left-collapsed  { grid-template-columns: 0 minmax(0, 1fr) var(--cmd-grid-w, 300px); }
    .chat-layout.right-collapsed { grid-template-columns: var(--pp-grid-w, 320px) minmax(0, 1fr) 0; }
}

/* ★ v10.6 移动端兜底：JS 在 body 加 .is-mobile,这里用 class 强制覆盖,
   这样不受 media query 误判 / 浏览器缓存 / 用户缩放 影响 */
body.is-mobile .chat-topbar {
    padding: 0.5rem 0.65rem !important;
    gap: 0.3rem !important;
    flex-wrap: nowrap !important;
}
body.is-mobile .topbar-left {
    gap: 0.35rem !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
body.is-mobile .topbar-right {
    gap: 0.25rem !important;
    flex-shrink: 0 !important;
}
body.is-mobile .brand { padding: 0.25rem 0.4rem !important; }
body.is-mobile .brand-icon { width: 26px !important; height: 26px !important; font-size: 0.85rem !important; border-radius: 6px !important; }
body.is-mobile .brand-text { display: none !important; }
body.is-mobile .room-trigger { padding: 0.3rem 0.5rem !important; font-size: 0.76rem !important; gap: 0.3rem !important; }
body.is-mobile .room-trigger-name { max-width: 50px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.is-mobile .room-cd-badge { display: none !important; }
body.is-mobile .online-pill { display: none !important; }
body.is-mobile .layout-btn-text { display: none !important; }
body.is-mobile .layout-btn { --btn-w: var(--btn-h) !important; padding: 0 6px !important; }
body.is-mobile .layout-btn-sep { display: none !important; }
body.is-mobile .layout-toggles { margin: 0 2px !important; padding: 3px 4px !important; gap: 0 !important; }
body.is-mobile .icon-btn { width: 32px !important; height: 32px !important; }

body.is-mobile .chat-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
}
body.is-mobile .chat-layout > .profile-panel,
body.is-mobile .chat-layout > .cmd-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
    z-index: 50;
    animation: drawer-up 0.22s ease !important;
}
body.is-mobile .chat-layout > .profile-panel.is-closed,
body.is-mobile .chat-layout > .cmd-panel { display: none; }
body.is-mobile .chat-layout > .profile-panel:not(.is-closed) { display: flex !important; }
body.is-mobile .chat-layout > .cmd-panel:not([style*="display: none"]) { display: flex !important; }

body.is-mobile .chat-layout > .profile-panel::before,
body.is-mobile .chat-layout > .cmd-panel::before {
    content: '';
    position: absolute;
    top: auto !important;
    bottom: 8px !important;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: var(--border-mid);
    border-radius: 2px;
    z-index: 1;
}
body.is-mobile .chat-layout::before { content: none; }
body.is-mobile .chat-layout.fullscreen::before,
body.is-mobile .chat-layout.left-collapsed.right-collapsed::before { display: none; }

body.is-mobile .pp-resize,
body.is-mobile .cmd-resize { display: none !important; }
body.is-mobile .pp-refresh,
body.is-mobile .pp-close { top: 12px !important; right: 12px !important; }
body.is-mobile .cmd-panel-header { min-height: 48px !important; padding: 0.6rem 0.85rem !important; }
body.is-mobile .cmd-panel-title-text { display: none !important; }
body.is-mobile .cmd-sidebar { width: 130px !important; }
body.is-mobile .cmd-grid { grid-template-columns: 1fr !important; }
body.is-mobile .cmd-toggle-text { display: none !important; }
body.is-mobile .cmd-toggle { padding: 0.55rem 0.7rem !important; }
body.is-mobile .message-list { padding: 0.85rem 0.85rem 0.5rem !important; }
body.is-mobile .msg-bubble { max-width: 88% !important; }
body.is-mobile .input-bar { padding: 0.6rem 0.85rem 0.85rem !important; gap: 0.4rem !important; }

/* 手机(<768px):改成纵向单栏 + 抽屉 */
/* 1) grid 变 1 行 1 列,profile / cmd 变成浮层覆盖 */
@media (max-width: 768px) {
    .chat-topbar     { padding: 0.5rem 0.65rem; gap: 0.3rem; flex-wrap: nowrap; }
    .topbar-left     { gap: 0.35rem; flex: 1 1 auto; min-width: 0; }
    .topbar-right    { gap: 0.25rem; flex-shrink: 0; }
    .brand           { padding: 0.25rem 0.4rem; }
    .brand-icon      { width: 26px; height: 26px; font-size: 0.85rem; border-radius: 6px; }
    .brand-text      { display: none; }
    .room-trigger    { padding: 0.3rem 0.5rem; font-size: 0.76rem; gap: 0.3rem; }
    .room-trigger-name { max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .room-cd-badge   { display: none; }
    .message-list    { padding: 0.85rem 0.85rem 0.5rem; }
    .msg-bubble      { max-width: 88%; }
    .input-bar       { padding: 0.6rem 0.85rem 0.85rem; gap: 0.4rem; }
    .cmd-toggle-text { display: none; }
    .cmd-toggle      { padding: 0.55rem 0.7rem; }
    /* 顶栏宽度紧张, 直接在 <768px 隐藏 online-pill (移动端有顶栏的"指令"按钮能切换面板) */
    .online-pill     { display: none; }
    .cmd-sidebar     { width: 130px; }
    .cmd-grid        { grid-template-columns: 1fr; }
    .cmd-panel-title-text { display: none; }
    .cmd-panel-search { height: 28px; }

    /* 单栏布局:profile-panel 和 cmd-panel 都变成全屏抽屉浮层(占满顶栏以下到屏幕底) */
    .chat-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
    }
    .chat-layout > .profile-panel,
    .chat-layout > .cmd-panel {
        position: fixed !important;
        top: 0 !important;            /* ★ 顶到屏幕最上方, 上下都铺满 */
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;         /* ★ 底到屏幕最下方 */
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;     /* ★ 全屏高度 */
        height: 100dvh !important;    /* dvh 优先 (移动浏览器地址栏适配) */
        max-height: 100dvh !important;
        border-radius: 0 !important;  /* ★ 取消顶部圆角, 真正全屏 */
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        box-shadow: none !important;
        z-index: 50;
        animation: drawer-up 0.22s ease !important;
    }
    .chat-layout > .profile-panel.is-closed,
    .chat-layout > .cmd-panel { display: none; }

    /* 抽屉打开时显示 */
    .chat-layout > .profile-panel:not(.is-closed) { display: flex !important; }
    .chat-layout > .cmd-panel:not([style*="display: none"]) { display: flex !important; }
    /* 注:cmd-panel 由 Razor @if 控制,不存在 DOM 不会有此元素,无需额外处理 */

    /* 抽屉顶部加个拉手条(用 ::before) — 全屏下放到底部, 提示"下拉关闭" */
    .chat-layout > .profile-panel::before,
    .chat-layout > .cmd-panel::before {
        content: '';
        position: absolute;
        top: auto !important;
        bottom: 8px !important;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--border-mid);
        border-radius: 2px;
        z-index: 1;
    }

    /* 抽屉背景遮罩 — 全屏时不需要遮罩, 不显示 */
    .chat-layout::before {
        content: none;
    }
    /* 全屏(无抽屉)时不显示遮罩 */
    .chat-layout.left-collapsed:not(.right-collapsed),
    .chat-layout.right-collapsed:not(.left-collapsed) {
        /* 单抽屉打开时显示遮罩,聊天区仍可见 */
    }
    .chat-layout.fullscreen::before,
    .chat-layout.left-collapsed.right-collapsed::before { display: none; }

    /* 移动端隐藏拖拽条(用滑动手势或按钮关) */
    .pp-resize, .cmd-resize { display: none !important; }
    .pp-refresh, .pp-close { top: 12px !important; right: 12px !important; }
    /* cmd-panel-close 在 header 内部, header 已经在顶部, 不需要额外定位 */
    .cmd-panel-header { min-height: 48px; padding: 0.6rem 0.85rem; }

    @keyframes drawer-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    @keyframes fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

@media (max-width: 480px) {
    .room-menu     { min-width: 240px; }
    .room-menu-desc { display: none; }
    /* 全屏抽屉在 <480px 也保持全屏 (已经全屏, 这里只微调) */
    .chat-layout > .profile-panel,
    .chat-layout > .cmd-panel {
        height: 100dvh !important;
        max-height: 100dvh !important;
    }
}

/* ============================================================
   三栏拖拽条强化 v2.0
   - pp-resize / cmd-resize 视觉一致化
   - 拖拽中实时宽度 tooltip (.pane-drag-tooltip, JS 注入)
   - 拖拽条键盘聚焦样式 (Tab + ← → Home)
   ============================================================ */

/* 1) 拖拽条整体强化: 透明背景给一个非常淡的"hover hint"色,
      hover/拖拽/聚焦时整条变紫(不只中央灰线) */
.pp-resize,
.cmd-resize {
    /* 沿用既有 position/cursor/width=12px 等, 这里只覆盖 background 渐变 */
    background: transparent;
}
.pp-resize:hover,
.cmd-resize:hover,
.pp-resize:focus-visible,
.cmd-resize:focus-visible {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-soft, rgba(99, 102, 241, 0.10)) 50%,
        transparent 100%);
    outline: none;
}
/* 拖拽中: 更明显的紫光晕 */
.pp-resize.is-dragging,
.cmd-resize.is-dragging {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-soft, rgba(99, 102, 241, 0.22)) 50%,
        transparent 100%);
}

/* 2) 中央灰线 & 中点高亮在拖拽时更明显 */
.pp-resize.is-dragging::before,
.cmd-resize.is-dragging::before {
    background: var(--accent, #6366f1) !important;
    box-shadow: 0 0 6px var(--accent-soft, rgba(99, 102, 241, 0.5));
}
.pp-resize.is-dragging::after,
.cmd-resize.is-dragging::after {
    background: var(--accent, #6366f1) !important;
    height: 110px !important;
    box-shadow:
        0 0 12px var(--accent-soft, rgba(99, 102, 241, 0.6)),
        0 0 4px rgba(99, 102, 241, 0.8);
}

/* 3) 拖拽条键盘聚焦环 (无障碍) */
.pp-resize:focus-visible,
.cmd-resize:focus-visible {
    box-shadow: inset 0 0 0 1px var(--accent, #6366f1);
}

/* 4) 拖拽过程中的全局 body 状态(由 JS 加类) */
body.pane-drag-active {
    cursor: col-resize !important;
    user-select: none !important;
}
body.pane-drag-active * {
    cursor: col-resize !important;
}

/* 5) 实时宽度 tooltip —— 由 chat-resize.js 动态注入 */
.pane-drag-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, calc(-100% - 14px));
    padding: 0.35rem 0.65rem;
    background: var(--bg-floating, rgba(20, 22, 32, 0.92));
    color: var(--text-primary, #E8E9EE);
    border: 1px solid var(--accent-border, rgba(155, 149, 201, 0.32));
    border-radius: 8px;
    font-family: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.4),
        0 0 12px var(--accent-soft, rgba(155, 149, 201, 0.25));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: pane-drag-tooltip-in 0.12s ease;
}
.pane-drag-tooltip::after {
    /* 拖拽条端的小三角, 指向拖拽条中点 */
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--bg-floating, rgba(20, 22, 32, 0.92));
}
@keyframes pane-drag-tooltip-in {
    from { opacity: 0; transform: translate(-50%, calc(-100% - 8px)); }
    to   { opacity: 1; transform: translate(-50%, calc(-100% - 14px)); }
}