/* Vben Admin 风格布局（基于 Ant Design Vue 的侧边栏框架） */

:root {
    --vben-sider-width: 210px;
    --vben-sider-width-collapsed: 68px;
    --vben-header-height: 64px;
    --vben-border-color: var(--el-border-color, #e5e7eb);
    --vben-bg: var(--el-bg-color, #f7f9fc);
    --vben-sider-bg: var(--el-bg-color, #ffffff);
    --vben-text: var(--el-text-color-primary, #1f2937);
    --vben-text-secondary: var(--el-text-color-secondary, #6b7280);
    --vben-primary: #409eff;
    --vben-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}

html, body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* ===== 移动端键盘白屏核弹级修复 =====
   问题：vben-layout/vben-main 写死 height:100dvh + overflow:hidden
   导致移动端页面高度锁死，键盘收起后无法回弹，底部留白卡死。
   解决：移动端全面取消固定高度，改用 min-height + 自然流动。 */
@media (max-width: 991px) {
    html, body {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;        /* 解除 hidden 锁定 */
    }
    .vben-app {
        height: auto !important;
        min-height: 100svh !important;      /* svh = 小视口高度，最保守最稳定 */
    }
    .vben-layout {
        height: auto !important;            /* 关键：取消 100dvh 固定高度 */
        min-height: 100svh !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        flex-direction: column !important;
    }
    .vben-main {
        height: auto !important;            /* 关键：取消 100dvh 固定高度 */
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;     /* 解除 hidden，让内容自然流动 */
        flex: 1 !important;
    }
    .vben-content {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        padding-bottom: 20px !important;
    }
    .vben-sider {
        height: 100dvh !important;          /* 侧边栏保留 dvh，它是 fixed 定位 */
    }
}
/* ========== Vben 风格主题切换动画 (View Transitions) ========== */

/* 在全局样式中添加 */
::view-transition-group(root) {
    animation-duration: 0.5s;
}

/* 1. 关闭默认的淡入淡出效果 */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* 2. 移除 z-index — 原来的 9999 会在移动端点击交互时白屏遮盖内容 */
::view-transition-new(root) {
    /* z-index: 9999; 已移除 */
}

/* 3. 移动端完全禁用 View Transition，防止任何交互触发白屏 */
@media (max-width: 991px) {
    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
        animation-duration: 0s !important;
    }
}

/* 3. 兼容性设置：如果浏览器不支持 View Transition，则使用普通的背景过渡 */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}
.vben-app {
    min-height: 100dvh;
    background: var(--vben-bg);
    color: var(--vben-text);
}

.vben-layout {
    display: flex;
    min-height: 100dvh;
    background: var(--vben-bg);
    color: var(--vben-text);
    overflow-x: hidden;
    height: 100dvh;
}

.vben-sider {
    position: sticky;
    top: 0;
    height: 100dvh;
    width: var(--vben-sider-width);
    background: var(--vben-sider-bg);
    border-right: 1px solid var(--vben-border-color);
    transition: width 0.24s ease, transform 0.24s ease;
    z-index: 10;
    display: flex;
    flex-direction: column;
    box-shadow: inset -1px 0 0 rgba(0,0,0,0.03);
}

.vben-sider.is-collapsed {
    width: var(--vben-sider-width-collapsed);
    box-shadow: none !important;
    border-right: none !important;
}

.vben-sider__logo {
    height: var(--vben-header-height);
    min-height: var(--vben-header-height);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-bottom: 1px solid var(--vben-border-color);
}

.vben-sider__logo .logo-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
}

.vben-sider__logo img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.vben-sider__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 0;
    /* 滚动条样式优化 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.vben-sider__scroll::-webkit-scrollbar {
    width: 6px;
}

.vben-sider__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.vben-sider__scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.vben-sider__scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.dark .vben-sider__scroll::-webkit-scrollbar-thumb,
[data-theme='dark'] .vben-sider__scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

.dark .vben-sider__scroll::-webkit-scrollbar-thumb:hover,
[data-theme='dark'] .vben-sider__scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.vben-sider__footer {
    flex-shrink: 0;
    padding: 12px 16px;
    text-align: center;
    border-top: 1px solid var(--vben-border-color);
    color: var(--vben-text-secondary);
    font-size: 12px;
}

.vben-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    color: inherit;
}

.vben-menu__list,
.vben-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vben-menu__item {
    position: relative;
}

.vben-menu__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 18px;
    color: inherit;
    text-decoration: none !important;
    border-radius: 8px;
    margin: 2px 10px;
    transition: all 0.18s ease;
    font-weight: 500;
    font-size: 14px;
}

/* 确保所有链接状态都没有下划线 */
.vben-menu__link,
.vben-menu__link:link,
.vben-menu__link:visited,
.vben-menu__link:hover,
.vben-menu__link:active,
.vben-menu__link:focus {
    text-decoration: none !important;
}

/* ========== 明亮主题下的样式 ========== */
/* 明亮主题下的 hover 状态 */
.vben-menu__link:hover {
    background: var(--el-color-primary-light-9, rgba(64, 158, 255, 0.08));
    color: var(--vben-primary);
    text-decoration: none !important;
}

/* 明亮主题下的 active 状态 */
/* 首页（一级菜单且没有 has-children）选中时：仅蓝色字体，无方块 */
.vben-menu__item:not(.has-children).active > .vben-menu__link,
.vben-menu__item:not(.has-children) > .vben-menu__link.active {
    color: var(--vben-primary);
    background: transparent;
    box-shadow: none;
    text-decoration: none;
}

/* 一级菜单（有子菜单的）active 时：默认仅蓝色字体，无方块 */
/* 当子菜单被选中时，一级菜单只显示蓝色字体 */
.vben-menu__item.has-children.active > .vben-menu__link {
    color: var(--vben-primary);
    background: transparent;
    box-shadow: none;
    text-decoration: none;
}

/* 二级菜单（有三级子菜单的）active 时：仅蓝色字体，无方块 */
/* 当三级菜单被选中时，二级菜单只显示蓝色字体 */
.vben-submenu .has-children.active > .vben-menu__link {
    color: var(--vben-primary);
    background: transparent;
    box-shadow: none;
    text-decoration: none;
}

/* 二级/三级菜单（实际页面标签页）选中时：和 hover 一样的样式（无边框） */
.vben-submenu .vben-menu__link.active {
    color: var(--vben-primary);
    background: var(--el-color-primary-light-9, rgba(64, 158, 255, 0.08));
    box-shadow: none;
    text-decoration: none;
}

/* ========== 暗黑主题下的样式 ========== */
/* 暗黑主题下的 hover 状态 - 使用 CSS 变量 */
.dark .vben-menu__link:hover,
[data-theme='dark'] .vben-menu__link:hover {
    background: var(--el-fill-color-light, rgba(255, 255, 255, 0.08)) !important;
    color: var(--el-text-color-primary, inherit) !important;
    text-decoration: none !important;
}

/* 暗黑主题下的 active 状态 - 使用 CSS 变量 */
.dark .vben-menu__item.active > .vben-menu__link,
.dark .vben-menu__link.active,
[data-theme='dark'] .vben-menu__item.active > .vben-menu__link,
[data-theme='dark'] .vben-menu__link.active {
    color: var(--el-text-color-primary, inherit) !important;
    background: var(--el-fill-color-dark, rgba(255, 255, 255, 0.12)) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* 暗黑主题下一级菜单（有子菜单的）active 时：仅文字变化（变亮），无背景方块 */
.dark .vben-menu__item.has-children.active > .vben-menu__link,
[data-theme='dark'] .vben-menu__item.has-children.active > .vben-menu__link {
    color: var(--el-text-color-primary, rgba(255, 255, 255, 0.9)) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* 暗黑主题下二级菜单（有三级子菜单的）active 时：仅文字变化（变亮），无背景方块 */
.dark .vben-submenu .has-children.active > .vben-menu__link,
[data-theme='dark'] .vben-submenu .has-children.active > .vben-menu__link {
    color: var(--el-text-color-primary, rgba(255, 255, 255, 0.9)) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* 暗黑主题下子菜单的 active 状态 - 使用 CSS 变量 */
.dark .vben-submenu .vben-menu__link.active,
[data-theme='dark'] .vben-submenu .vben-menu__link.active {
    color: var(--el-text-color-primary, inherit) !important;
    background: var(--el-fill-color-dark, rgba(255, 255, 255, 0.12)) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.vben-menu__text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vben-menu__arrow {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.vben-menu__arrow.susuicon2 {
    transform: rotate(0deg);
    transition: transform .25s ease;
}

.has-children.open > .vben-menu__link .vben-menu__arrow,
.has-children.open > .vben-menu__link .vben-menu__arrow.susuicon2 {
    transform: rotate(180deg);
}

.has-children .vben-menu__link {
    cursor: pointer;
}

.vben-submenu {
    display: none;
    padding-left: 10px;
}

.has-children.open > .vben-submenu {
    display: block;
}

.has-children.open > .vben-menu__link .vben-menu__arrow {
    transform: rotate(180deg);
}

.vben-sider.is-collapsed .vben-menu__text,
.vben-sider.is-collapsed .vben-menu__arrow,
.vben-sider.is-collapsed .logo-text {
    display: none;
}

.vben-sider.is-collapsed .vben-submenu {
    display: none;
}

.vben-main {
    flex: 1;
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--vben-bg);
    overflow-x: hidden;
    overflow-y: hidden;
}

.vben-header {
    height: var(--vben-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: var(--vben-sider-bg);
    border-bottom: 1px solid var(--vben-border-color);
    position: sticky;
    top: 0;
    z-index: 8;
    box-shadow: none;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vben-icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease;
}

.vben-icon-btn:hover {
    background: var(--el-fill-color-light, rgba(0, 0, 0, 0.04));
}

.dark .vben-icon-btn:hover,
[data-theme='dark'] .vben-icon-btn:hover {
    background: var(--el-fill-color-light, rgba(255, 255, 255, 0.08));
}

.navbar-page-title {
    font-size: 16px;
    font-weight: 700;
}

.vben-content {
    flex: 1;
    padding: 20px;
    background: var(--vben-bg);
    min-height: calc(100dvh - var(--vben-header-height));
    overflow-x: hidden;
    overflow-y: auto;
}

/* 折叠态浮层子菜单样式 */
.vben-submenu-pop {
    position: absolute;
    min-width: 180px;
    background: var(--el-bg-color, #fff);
    border: 1px solid var(--el-border-color, #e5e7eb);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding: 6px 4px;
    z-index: 99999;
    display: block !important;
    overflow: visible;
}

.vben-submenu-pop .vben-menu__link {
    margin: 2px 6px;
    padding: 10px 12px;
}

.vben-submenu-pop li {
    position: relative;
}

.vben-submenu-pop .vben-submenu {
    display: none;
    padding-left: 0;
    position: absolute;
    top: 0;
    left: calc(100% + 6px);
    min-width: 180px;
    background: var(--el-bg-color, #fff);
    border: 1px solid var(--el-border-color, #e5e7eb);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
}

.dark .vben-submenu-pop,
[data-theme='dark'] .vben-submenu-pop {
    background: var(--el-bg-color, #111827);
    border-color: var(--el-border-color, #2d2f3a);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.dark .vben-submenu-pop .vben-submenu,
[data-theme='dark'] .vben-submenu-pop .vben-submenu {
    background: var(--el-bg-color, #111827);
    border-color: var(--el-border-color, #2d2f3a);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.vben-mask {
    position: fixed;
    inset: 0;
    background: var(--el-mask-color, rgba(0,0,0,0.45));
    z-index: 9;
}

/* ========== Element UI 图标样式 ========== */
.susuicon {
    font-size: 1.2em;
    vertical-align: -0.15em;
    flex-shrink: 0;
    display: inline-block;
}

.susuicon2 {
    font-size: 1em;
    vertical-align: -0.15em;
    display: inline-block;
}

.vben-menu__link .susuicon {
    position: relative;
}

.el-icon {
    font-size: inherit;
    color: inherit;
}

/* ========== 顶部按钮和图标按钮样式 ========== */
.btn-theme-control,
.btn-theme-control:focus,
.btn-theme-control:hover {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--el-text-color-primary, inherit) !important;
}

/* 暗黑主题下主题切换按钮样式 */
.dark .btn-theme-control,
[data-theme='dark'] .btn-theme-control {
    color: var(--el-text-color-primary, #ffffff) !important;
}

.dark .btn-theme-control:hover,
[data-theme='dark'] .btn-theme-control:hover {
    background: var(--el-fill-color-light, rgba(255, 255, 255, 0.08)) !important;
}

.table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.table-scroll-wrapper .el-table {
    min-width: 1200px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.btn-icon i {
    font-size: 18px;
}

.btn-icon:focus,
.btn-icon:active,
.btn-theme-control:focus,
.btn-theme-control:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* ========== 用户菜单样式 ========== */
.user-menu {
    display: flex;
    align-items: center;
}

.user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border: none;
    background: transparent;
    color: inherit;
    text-decoration: none;
}

.user-trigger:hover,
.user-trigger:focus {
    color: inherit;
    text-decoration: none;
}

.user-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.user-name {
    font-weight: 600;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.caret-icon {
    font-size: 18px;
    color: inherit;
}

/* ========== 下拉菜单样式 ========== */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: var(--el-bg-color, #fff);
    border: 1px solid var(--el-border-color, #e5e7eb);
    min-width: 200px;
    width: auto;
    padding: 0;
    border-radius: 12px;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.dark .dropdown-menu,
[data-theme='dark'] .dropdown-menu {
    background-color: var(--el-bg-color, #1f2937);
    border-color: var(--el-border-color, #374151);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.user-menu-header {
    padding: 12px 16px;
    background-color: transparent;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar-large {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--el-border-color, #e5e7eb);
}

.dark .user-avatar-large,
[data-theme='dark'] .user-avatar-large {
    border-color: var(--el-border-color, #4b5563);
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name-large {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--el-text-color-primary, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dark .user-name-large,
[data-theme='dark'] .user-name-large {
    color: var(--el-text-color-primary, #f9fafb);
}

.dropdown-menu .divider {
    height: 1px;
    margin: 8px 0;
    padding: 0;
    background-color: var(--el-border-color, #e5e7eb);
    list-style: none;
}

.dark .dropdown-menu .divider,
[data-theme='dark'] .dropdown-menu .divider {
    background-color: var(--el-border-color, #374151);
}

.dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--el-text-color-primary, #374151);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dropdown-menu > li > a i {
    font-size: 18px;
    width: 20px;
    text-align: center;
    font-weight: normal;
    transition: all 0.2s ease;
    color: inherit;
    opacity: 0.75;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--el-fill-color-light, #f3f4f6);
    color: var(--el-text-color-primary, #1f2937);
}

.dropdown-menu > li > a:hover i,
.dropdown-menu > li > a:focus i {
    opacity: 1;
}

.dark .dropdown-menu > li > a,
[data-theme='dark'] .dropdown-menu > li > a {
    color: var(--el-text-color-primary, #e5e7eb);
}

.dark .dropdown-menu > li > a i,
[data-theme='dark'] .dropdown-menu > li > a i {
    color: var(--el-text-color-primary, #e5e7eb);
    opacity: 0.8;
}

.dark .dropdown-menu > li > a:hover,
[data-theme='dark'] .dropdown-menu > li > a:hover,
.dark .dropdown-menu > li > a:focus,
[data-theme='dark'] .dropdown-menu > li > a:focus {
    background-color: var(--el-fill-color-dark, #374151);
    color: var(--el-text-color-primary, #f9fafb);
}

.dark .dropdown-menu > li > a:hover i,
[data-theme='dark'] .dropdown-menu > li > a:hover i,
.dark .dropdown-menu > li > a:focus i,
[data-theme='dark'] .dropdown-menu > li > a:focus i {
    opacity: 1;
    color: var(--el-text-color-primary, #f9fafb);
}

.dropdown-menu-right {
    left: auto;
    right: 0;
    width: auto;
    min-width: 170px;
}

/* ========== 侧边栏底部样式 ========== */
.sidebar-footer {
    padding: 14px;
    text-align: center;
    border-top: 1px solid var(--el-border-color, rgba(0,0,0,0.08));
    color: var(--el-text-color-secondary, #6b7280);
    font-size: 12px;
}

.dark .sidebar-footer,
[data-theme='dark'] .sidebar-footer {
    color: var(--el-text-color-secondary, #9ca3af);
    border-top-color: var(--el-border-color, #2d2f3a);
}

/* ========== 侧边栏头部样式 ========== */
.sidebar-header {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 16px;
}

#logo .navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.lyear-layout-sidebar {
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.lyear-layout-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
}

.lyear-layout-sidebar-scroll.ps {
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* 响应式 */
@media (max-width: 991px) {
    :root {
        --vben-sider-width: 210px;
    }
    .vben-sider {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 210px !important; /* 移动端始终保持全宽 */
        transform: translateX(-100%); /* 默认移出屏幕 */
        z-index: 9999;
        transition: transform 0.3s ease-in-out;
        box-shadow: none;
    }
    /* 2. 激活状态：滑入屏幕 */
    .vben-sider.mobile-open {
        transform: translateX(0) !important; /* 滑入 */
        width: 210px !important; /* 强制全宽，覆盖 is-hidden 或 is-collapsed */
        display: flex !important;
        border-right: none;
        box-shadow: 0 0 20px rgba(0,0,0,0.5); /* 加个阴影更好看 */
    }
    /* 3. 移动端打开时，强制显示 Logo 和 菜单文字，防止被 is-collapsed 隐藏 */
    .vben-sider.mobile-open .vben-sider__logo,
    .vben-sider.mobile-open .vben-menu__text,
    .vben-sider.mobile-open .vben-menu__arrow,
    .vben-sider.mobile-open .logo-text,
    .vben-sider.mobile-open .vben-sider__footer {
        display: flex !important;
        opacity: 1 !important;
    }
    
    /* 4. 移动端隐藏底部的折叠按钮（手机上不需要半折叠状态） */
    .vben-sider.mobile-open #siderCollapseToggle {
        display: none !important;
    }
    .vben-sider.is-collapsed {
        transform: translateX(-100%);
    }
    .vben-sider.is-collapsed.show,
    .vben-sider:not(.is-collapsed) {
        transform: translateX(0);
    }
    .vben-layout {
        flex-direction: column;
    }
    .vben-main {
        width: 100%;
        margin-left: 0;
    }
}
/* ========== 新增：侧边栏完全隐藏状态 ========== */

/* 1. 定义完全隐藏的样式 */
.vben-sider.is-hidden {
    /* 强制宽度为 0 */
    width: 0 !important;
    min-width: 0 !important;
    
    /* 移除边框和阴影，防止留下“一条线” */
    border-right: none !important;
    box-shadow: none !important;
    
    /* 确保内容不可见 */
    overflow: hidden !important;
    
    /* 保持 padding 为 0 */
    padding: 0 !important;
}

/* 2. 确保 Logo 在隐藏时也不占位 */
.vben-sider.is-hidden .vben-sider__logo,
.vben-sider.is-hidden .vben-sider__scroll,
.vben-sider.is-hidden .vben-sider__footer {
    display: none !important;
    opacity: 0;
}

/* 3. 优化过渡动画，确保宽度变化丝滑 */
.vben-sider {
    /* 确保包含 width 的过渡 */
    transition: width 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.3s ease;
    will-change: width;
}


/* 表单样式优化 */
.frosss {
    height: 38px;
    border-radius: 8px !important;
    border: 2px solid rgb(236, 236, 236);
    border-color: #ebebeb;
    padding: 5px 12px;
    line-height: inherit;
    transition: 0.2s linear;
    box-shadow: none;
}

.frosss2 {
    border-radius: 8px !important;
    border: 2px solid rgb(236, 236, 236);
    display: block;
    width: 100%;
    height: 38px;
    border-color: #ebebeb;
    padding: 5px 12px;
    line-height: inherit;
    transition: 0.2s linear;
    box-shadow: none;
}

/* 表格样式优化 */
.table > thead > tr > th {
    padding: 20px;
}

/* 模态框基础样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
}







/* --- 全局字体与容器 --- */
.custom-chat-dialog {
    font-family: var(--el-font-family); 
    -webkit-font-smoothing: antialiased;
}

/* 弹窗主体 */
.custom-chat-dialog {
    height: 75vh !important;
    max-height: 800px;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: var(--el-border-radius-base);
}
.custom-chat-dialog .el-dialog__body {
    flex: 1;
    padding: 0 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 布局 */
.chat-layout { display: flex; height: 100%; width: 100%; overflow: hidden; background-color: var(--el-bg-color); }

/* 左侧列表 */
.chat-sidebar {
    width: 260px;
    border-right: 1px solid var(--el-border-color-light);
    background-color: var(--el-bg-color-overlay);
    display: flex; flex-direction: column; flex-shrink: 0;
}
.sidebar-header {
    padding: 0 15px;
    border-bottom: 1px solid var(--el-border-color-light);
    font-weight: bold;
    color: var(--el-text-color-primary);
    height: 55px;
    display: flex; align-items: center;
}
.session-item {
    display: flex; padding: 12px 12px; cursor: pointer; transition: background-color 0.2s; border-bottom: 1px solid transparent; align-items: center;
}
.session-item:hover { background-color: var(--el-fill-color); }
.session-item.active { background-color: var(--el-color-primary-light-9); position: relative; }
.session-item.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: var(--el-color-primary); }

.session-avatar { margin-right: 10px; position: relative; display: flex; align-items: center; }
.session-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.session-top { display: flex; justify-content: space-between; align-items: center; }
.session-name { font-size: 14px; font-weight: 500; color: var(--el-text-color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.session-time { font-size: 12px; color: var(--el-text-color-placeholder); }
.session-preview { font-size: 12px; color: var(--el-text-color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 右侧主区域 */
.chat-main { flex: 1; display: flex; flex-direction: column; background-color: var(--el-bg-color); min-width: 0; position: relative; }
.empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--el-text-color-secondary); }
.chat-header { height: 55px; border-bottom: 1px solid var(--el-border-color-light); display: flex; align-items: center; padding: 0 20px; justify-content: space-between; background-color: var(--el-bg-color-overlay); flex-shrink: 0; }
.header-user-info {
    font-weight: bold;
    font-size: 16px;
}
.chat-message-area { flex: 1; height: 0; overflow-y: auto; background-color: var(--el-bg-color); }
.chat-time-tag { text-align: center; margin: 20px 0; }
.chat-time-tag span { background-color: var(--el-fill-color-darker); color: var(--el-text-color-secondary); padding: 4px 12px; border-radius: 12px; font-size: 12px; }

/* 气泡与头像 */
.message-item { display: flex; margin-bottom: 18px; align-items: flex-start; padding: 0 20px; gap: 8px; }
.message-item.self { flex-direction: row-reverse; }
.message-item .el-avatar, .session-avatar .el-avatar { border-radius: 6px !important; background-color: var(--el-fill-color); }
.bubble { max-width: 70%; padding: 10px 14px; border-radius: 6px; font-size: 14px; line-height: 1.6; word-break: break-word; position: relative; box-shadow: var(--el-box-shadow-light); }
.message-item.self .bubble { background-color: var(--el-color-primary-light-9); border: 1px solid var(--el-color-primary-light-7); color: var(--el-text-color-primary); }
.message-item.other .bubble { background-color: var(--el-fill-color-light); border: 1px solid var(--el-border-color-lighter); color: var(--el-text-color-primary); }
/* 气泡内的图片样式微调 */
.bubble .chat-img-preview {
    max-width: 200px; /* 限制图片最大宽度，避免撑破气泡 */
    height: auto;
    cursor: pointer;
}
/* 消除气泡内第一项的顶部间距和最后一项的底部间距，看起来更紧凑 */
.bubble > :first-child { margin-top: 0 !important; }
.bubble > :last-child { margin-bottom: 0 !important; }
/* --- 底部输入区 (重点修复) --- */
.chat-footer-input {
    background-color: var(--el-bg-color-overlay);
    border-top: 1px solid var(--el-border-color-light);
    padding: 12px 20px;
}

/* 图标工具栏 */
.chat-tool-bar {
    display: flex;
    gap: 20px; /* 增加图标间距，防止拥挤 */
    margin-bottom: 10px;
    align-items: center;
    height: 30px; /* 固定高度，防止上传组件撑开 */
}

/* 按钮样式 (FontAwesome) */
.tool-btn {
    font-size: 20px;
    color: var(--el-text-color-regular);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tool-btn:hover {
    color: var(--el-color-primary);
    transform: scale(1.1);
}

/* 纯图标上传组件修复 */
.pure-icon-upload {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
/* 隐藏 Element Upload 的外层包裹 */
.pure-icon-upload .el-upload {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    padding: 0;
}
.pure-icon-upload .el-upload:focus {
    color: var(--el-color-primary);
}
/* 【核心】强制隐藏原生文件输入框的文字提示 */
.pure-icon-upload input[type="file"], 
.pure-icon-upload .el-upload__input {
    display: none !important;
}

/* 输入框 */
.input-group { display: flex !important; gap: 10px; align-items: flex-end; }
.input-group .el-textarea { flex: 1; }
.input-group .el-textarea__inner { background: var(--el-fill-color-lighter); box-shadow: none; padding: 10px; }
.input-group .el-textarea__inner:focus { background-color: var(--el-bg-color); box-shadow: 0 0 0 1px var(--el-color-primary) inset; }
.input-group .el-button { height: 40px !important; padding: 0 24px; border-radius: 6px; }

/* 表情面板 */
.emoji-scroll-container {
    padding: 12px;
    /* 核心修改：使用 Grid 布局 */
    display: grid;
    /* 自动计算列数：每个格子最小 34px，不够就换行，够了就自动拉伸 */
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 5px; /* 格子之间的间距 */
    overflow-x: hidden; /* 强制禁止左右滑动 */
    box-sizing: border-box; /* 确保 padding 不会撑大宽度 */
    width: 100%; /* 占满父容器 */
}
.emoji-item {
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    padding: 4px;
    /* 增加宽高限制，确保点击区域是正方形 */
    width: 100%;
    aspect-ratio: 1 / 1; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    user-select: none; /* 防止双击选中文字 */
}

.emoji-item:hover {
    background-color: var(--el-fill-color);
}

/* 移动端适配 */
/* --- 移动端适配核心样式 --- */
@media (max-width: 768px) {
    /* 1. 弹窗全屏化 */
    .custom-chat-dialog {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: none !important;
    }
    .custom-chat-dialog .el-dialog__header {
        padding: 15px; /* 调整头部高度 */
    }

    /* 2. 布局逻辑：默认只显示列表，隐藏聊天主区域 */
    .chat-layout {
        position: relative;
    }
    
    /* 状态A: 在列表页时 */
    .chat-layout:not(.mobile-chat-open) .chat-sidebar {
        width: 100%;
        display: flex;
        border-right: none;
    }
    .chat-layout:not(.mobile-chat-open) .chat-main {
        display: none;
    }
    
    /* 状态B: 在聊天页时 */
    .chat-layout.mobile-chat-open .chat-sidebar {
        display: none;
    }
    .chat-layout.mobile-chat-open .chat-main {
        display: flex;
        width: 100%;
    }

    /* 3. 列表项样式复原与优化 */
    .session-item {
        padding: 15px; /* 更大的点击区域 */
    }
    /* 恢复在原来的移动端CSS中被隐藏的内容，让列表宽屏显示 */
    .session-content { display: flex !important; } 
    .session-avatar { margin-right: 12px !important; }
    
    /* 4. 删除按钮适配 */
    .session-actions {
        opacity: 1 !important; /* 手机端始终显示操作按钮 */
        padding-left: 10px;
    }

    /* 5. 聊天头部增加返回按钮区域 */
    .chat-header {
        padding: 0 10px;
    }
    
    /* 6. 输入区域优化 */
    .chat-footer-input {
        padding: 10px;
    }
    .input-group .el-button {
        padding: 0 15px; /* 按钮稍微缩窄以留出空间 */
    }
    
    /* 7. 表情面板自适应 */
    .emoji-scroll-container {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); /* 表情图标更大 */
    }
    .emoji-item {
        font-size: 28px;
    }
}

/* 返回按钮样式 (仅在移动端显示逻辑中用到，但定义在这里方便) */
.mobile-back-btn {
    display: none; /* PC端隐藏 */
    margin-right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: var(--el-text-color-primary);
}
@media (max-width: 768px) {
    .mobile-back-btn {
        display: block; /* 移动端显示 */
    }
}
/* 删除按钮区域 */
.session-actions {
    margin-left: 5px;
    opacity: 0; /* 默认隐藏 */
    transition: opacity 0.2s;
}

/* 鼠标悬停时显示删除按钮 */
.session-item:hover .session-actions {
    opacity: 1;
}





/* 图片预览区域样式 */
.image-preview-area {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #f5f7fa;
    border-top: 1px solid #e4e7ed;
    overflow-x: auto;
}
.preview-item {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #dcdfe6;
}
.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.preview-item .remove-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
}

/* 进度条遮罩样式 */
.upload-progress-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 4px; /* 如果整个 footer 有圆角的话 */
}



/* ========== 核心：深色侧边栏/顶栏 覆盖样式 (Element Plus 官方暗黑风) ========== */
/* ========== 设置抽屉精美 UI (线框选中风格) ========== */

.setting-drawer-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
}

.setting-group-title {
    font-size: 14px;
    color: var(--el-text-color-primary);
    font-weight: 600;
    margin-bottom: 12px;
}

/* --- 1. 主题模式 (线框风格) --- */
.theme-mode-list {
    display: flex;
    gap: 16px;
}
.theme-mode-item {
    flex: 1;
    cursor: pointer;
    /* 默认灰色边框 */
    border: 1px solid var(--el-border-color);
    border-radius: 8px;
    padding: 12px 0;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background-color: transparent; /* 背景透明 */
    color: var(--el-text-color-primary); /* 默认文字颜色 */
}

/* 悬浮状态 */
.theme-mode-item:hover {
    color: var(--vben-primary);
    border-color: var(--vben-primary);
}

/* 选中状态 (核心修改：背景不变色，只变边框) */
.theme-mode-item.active {
    /* 2px 粗边框，颜色跟随自定义颜色 */
    border: 2px solid var(--vben-primary);
    /* 文字颜色保持默认，不受自定义颜色影响 (符合您的要求) */
    color: var(--el-text-color-primary); 
    background-color: transparent; 
}

.theme-mode-item .el-icon {
    font-size: 22px;
    margin-bottom: 4px;
}
.theme-mode-item span {
    font-size: 13px;
}

/* --- 2. 局部开关 --- */
.setting-switch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--el-text-color-regular);
}

/* --- 3. 主题色 (色块) --- */
.theme-color-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.color-block-item {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.1);
}
/* 选中打勾 */
.color-block-item.active .el-icon {
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* --- 4. 布局选择 (线框风格) --- */
.layout-mode-list {
    display: flex;
    gap: 16px;
}
.layout-item {
    position: relative;
    cursor: pointer;
    /* 默认透明边框，预留位置 */
    border: 2px solid transparent; 
    border-radius: 6px;
    padding: 2px;
    transition: all 0.2s;
}

/* 选中状态：布局也只变边框 */
.layout-item.active {
    border-color: var(--vben-primary);
}

/* 缩略图容器 */
.layout-thumb {
    width: 70px;
    height: 50px;
    background: #f0f2f5;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer;
}
.dark .layout-thumb { background: #1d1e1f; }

/* 垂直布局图示 */
.thumb-vertical .sider { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: #273352; z-index: 1;}
.thumb-vertical .header { position: absolute; left: 0; top: 0; right: 0; height: 25%; background: #fff; z-index: 2;}
.dark .thumb-vertical .header { background: #414243; }

/* 全屏布局图示 */
.thumb-fullscreen .content { position: absolute; inset: 6px; background: #fff; border: 1px dashed #999; border-radius: 4px;}
.dark .thumb-fullscreen .content { background: #414243; border-color: #666; }

.layout-name {
    text-align: center;
    font-size: 12px;
    margin-top: 8px;
    color: var(--el-text-color-regular);
}

/* --- 5. 底部按钮 --- */
.setting-footer {
    margin-top: auto;
    padding-top: 20px;
}
.btn-reset {
    width: 100%;
    background-color: #fff0f0;
    border-color: #ffcccc;
    color: #f56c6c;
    border-radius: 8px;
    height: 40px;
    font-size: 14px;
}
.btn-reset:hover {
    background-color: #fde2e2;
    border-color: #fbb;
    color: #f56c6c;
}
/* 暗黑模式适配 */
.dark .btn-reset {
    background-color: #2b1d1d;
    border-color: #442b2b;
    color: #f78989;
}
/* ========== 全屏模式下的悬浮设置按钮 ========== */
.setting-trigger-float {
    position: fixed;
    bottom: 50px;
    right: 30px;
    width: 48px;
    height: 48px;
    background-color: var(--vben-primary);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    color: #fff;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    font-size: 20px;
}

.setting-trigger-float:hover {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* 适配暗黑模式 */
.dark .setting-trigger-float {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* ========== 核心：深色侧边栏/顶栏 覆盖样式 (Element Plus 官方暗黑色 #141414) ========== */

/* -----------------------------------------------------------------
   1. 深色侧边栏逻辑修复
   核心改动：不再修改 --vben-sider-bg 变量，而是直接覆盖 .vben-sider 的样式，
   防止影响到引用了该变量的 Header
----------------------------------------------------------------- */

/* 仅在【非暗黑模式】且【开启深色侧边栏】时生效 */
html:not(.dark) body.sidebar-dark-mode .vben-sider {
    background-color: #141414 !important; /* 强制覆盖背景 */
    border-right: 1px solid #4C4D4F !important; /* 暗黑分割线 */
    color: #CFD3DC; /* 默认文字灰白 */
}

/* 侧边栏 Logo 区域 */
html:not(.dark) body.sidebar-dark-mode .vben-sider__logo {
    border-bottom: 1px solid #2a2c2e !important;
}
/* Logo 文字变白 */
html:not(.dark) body.sidebar-dark-mode .vben-sider__logo .logo-text {
    color: #FFFFFF !important;
}

/* 菜单链接文字颜色 */
html:not(.dark) body.sidebar-dark-mode .vben-menu__link {
    color: #CFD3DC !important;
}

/* 菜单 Hover 状态：深灰背景 + 纯白文字 */
html:not(.dark) body.sidebar-dark-mode .vben-menu__link:hover {
    color: #FFFFFF !important;
    background-color: #1d1e1f !important; 
}

/* 菜单选中状态：使用主题色背景 + 纯白文字 */
html:not(.dark) body.sidebar-dark-mode .vben-menu__item.active > .vben-menu__link,
html:not(.dark) body.sidebar-dark-mode .vben-submenu .vben-menu__link.active {
    background-color: var(--vben-primary) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

/* -----------------------------------------------------------------
   2. 深色顶栏逻辑
----------------------------------------------------------------- */

/* 仅在【非暗黑模式】且【开启深色顶栏】时生效 */
html:not(.dark) body.header-dark-mode .vben-header {
    background-color: #141414 !important; /* 强制覆盖背景 */
    border-bottom: 1px solid #2a2c2e !important;
    color: #CFD3DC;
}

/* 顶栏图标按钮颜色 */
html:not(.dark) body.header-dark-mode .vben-icon-btn,
html:not(.dark) body.header-dark-mode .btn-theme-control,
html:not(.dark) body.header-dark-mode .user-trigger,
html:not(.dark) body.header-dark-mode .user-menu .user-name {
    color: #CFD3DC !important;
}

/* 顶栏按钮 Hover */
html:not(.dark) body.header-dark-mode .vben-icon-btn:hover,
html:not(.dark) body.header-dark-mode .btn-theme-control:hover {
    background-color: #1d1e1f !important;
    color: #FFFFFF !important;
}

/* -----------------------------------------------------------------
   3. 修复暗黑模式下的边框冲突
   确保在真正的 Dark 模式下，这些强制样式不会捣乱
----------------------------------------------------------------- */
html.dark .vben-sider,
html.dark .vben-header {
    background-color: #141414; /* 保持 Element 默认暗黑背景 */
    border-color: #4C4D4F;
}
/* ========== 全局极简滚动条美化（无箭头版） ========== */

/* 1. Webkit 核心样式 (Chrome, Edge, Safari) */
/* 设置滚动条整体宽度和高度 */
::-webkit-scrollbar {
    width: 6px;  /* 纵向滚动条宽度，设置得细一些更显精致 */
    height: 6px; /* 横向滚动条高度 */
}

/* 滚动条轨道（背景）：设置为透明，让页面内容自然透出 */
::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

/* 滚动条滑块（移动部分）：使用半透明的灰色，配合圆角 */
::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.3); /* Element UI 风格的柔和灰 */
    border-radius: 3px; /* 圆角设计 */
    transition: background-color 0.3s; /* 添加过渡动画，体验更好 */
}

/* 鼠标悬停在滑块上时加深颜色，提供交互反馈 */
::-webkit-scrollbar-thumb:hover {
    background: rgba(144, 147, 153, 0.5);
}

/* 【核心重点】隐藏滚动条两端的按钮（箭头） */
::-webkit-scrollbar-button {
    display: none !important;
    width: 0;
    height: 0;
}

/* 隐藏滚动条角落（横纵交接处） */
::-webkit-scrollbar-corner {
    background: transparent;
}


/* 2. Firefox 浏览器支持 */
/* Firefox 的滚动条样式属性较少，只能设置宽度和颜色 */
* {
    scrollbar-width: thin; /* 设置为细滚动条 */
    scrollbar-color: rgba(144, 147, 153, 0.3) transparent; /* 滑块颜色 / 轨道颜色 */
}


/* 3. Vben Admin 暗黑模式适配 */
/* 确保在暗黑主题下滚动条依然清晰可见 */
html.dark ::-webkit-scrollbar-thumb,
[data-theme='dark'] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2); /* 使用半透明白色 */
}

html.dark ::-webkit-scrollbar-thumb:hover,
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Firefox 暗黑模式 */
html.dark *,
[data-theme='dark'] * {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
/* ========== 修复：暗黑模式/深色侧边栏下 父级菜单的高亮适配 ========== */

/* 1. 全局暗黑模式 (Dark Mode) 下的父级菜单高亮 */
html.dark .vben-menu__item.has-children.active > .vben-menu__link,
[data-theme='dark'] .vben-menu__item.has-children.active > .vben-menu__link {
    /* 核心修复：文字变为主题色，一眼识别父级 */
    color: var(--vben-primary) !important; 
    
    /* 可选：增加极淡的背景色，体现层级块感 (如果不想要背景块，可删掉这一行) */
    background-color: rgba(255, 255, 255, 0.05) !important; 
    
    /* 保持无阴影，避免脏感 */
    box-shadow: none !important;
}

/* 2. 浅色模式开启“深色侧边栏” (Light Mode + Dark Sidebar) 下的父级菜单高亮 */
html:not(.dark) body.sidebar-dark-mode .vben-menu__item.has-children.active > .vben-menu__link {
    /* 核心修复：文字变为主题色 */
    color: var(--vben-primary) !important;
    
    /* 可选：增加极淡的背景色 */
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 3. 额外优化：让箭头图标在父级选中时也变色，视觉更统一 */
/* ========== 修复：JS预加载类名适配 (防止刷新闪烁) ========== */
/* 兼容 JS 将类名加在 html 标签上的情况 */
html.sidebar-dark-mode .vben-sider {
    background-color: #141414 !important;
    border-right: 1px solid #4C4D4F !important;
}
html.sidebar-dark-mode .vben-sider .vben-menu__link {
    color: #CFD3DC;
}
html.sidebar-dark-mode .vben-sider__logo {
    border-bottom: 1px solid #2a2c2e !important;
}
html.sidebar-dark-mode .vben-sider__logo .logo-text {
    color: #FFFFFF !important;
}

/* ========== 修复：暗黑模式/深色侧边栏 菜单选中颜色不对 ========== */
/* 场景：暗黑模式 OR 浅色模式+深色侧边栏 */
html.dark .vben-menu__item.active > .vben-menu__link,
html.dark .vben-submenu .vben-menu__link.active,
html.sidebar-dark-mode .vben-menu__item.active > .vben-menu__link,
html.sidebar-dark-mode .vben-submenu .vben-menu__link.active {
    /* 1. 强制去除浅色主题的背景色 (解决那个浅红色/橙色背景块的问题) */
    background-color: transparent !important; 
    /* 或者使用极淡的背景: background-color: rgba(255, 255, 255, 0.05) !important; */

    /* 2. 强制文字变为主题色 */
    color: var(--vben-primary) !important;
    
    /* 3. 去除阴影 */
    box-shadow: none !important;
}

/* ========== 修复：父级菜单 (如"网课学习") 高亮状态 ========== */
/* 当子菜单被选中时，父级菜单也应该高亮 */
html.dark .vben-menu__item.has-children.active > .vben-menu__link,
html.sidebar-dark-mode .vben-menu__item.has-children.active > .vben-menu__link {
    color: var(--vben-primary) !important; /* 文字变色 */
    font-weight: 600; /* 加粗 */
}

/* 让父级菜单的箭头也跟着变色 */
html.dark .vben-menu__item.has-children.active > .vben-menu__link .vben-menu__arrow,
html.sidebar-dark-mode .vben-menu__item.has-children.active > .vben-menu__link .vben-menu__arrow {
    color: var(--vben-primary) !important;
    opacity: 1;
}

/* ========== 修复：Hover 状态的颜色 ========== */
/* 鼠标移上去时，背景变深灰，而不是浅色主题的浅蓝 */
html.dark .vben-menu__link:hover,
html.sidebar-dark-mode .vben-menu__link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #FFFFFF !important;
    opacity: 1;
}  
/* ========== 修复：聊天组件暗黑模式适配 ========== */

/* 1. 左侧会话列表选中状态 - 暗黑模式修复 */
html.dark .custom-chat-dialog .session-item.active,
[data-theme='dark'] .custom-chat-dialog .session-item.active {
    /* 核心修复：原来是极亮的 light-9，现在改为深色半透明背景 */
    background-color: rgba(255, 255, 255, 0.08) !important;
    /* 可选：如果你希望它带一点点主题色的倾向，可以用下面这行代替上面那行 */
    /* background-color: var(--el-color-primary-light-9) !important; filter: brightness(0.2); */
}

/* 2. 右侧“我自己”的消息气泡 - 暗黑模式修复 */
html.dark .custom-chat-dialog .message-item.self .bubble,
[data-theme='dark'] .custom-chat-dialog .message-item.self .bubble {
    /* 核心修复：背景改为深色系的主题色 (dark-2)，而不是浅色系 */
    background-color: var(--el-color-primary-dark-2) !important;
    
    /* 边框颜色同步 */
    border-color: var(--el-color-primary-dark-2) !important;
    
    /* 强制文字颜色为白色，确保在深蓝背景上清晰可见 */
    color: #ffffff !important;
    
    /* 增加微弱的阴影提升层次感 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 3. 补充优化：左侧列表 hover 状态在暗黑模式下的表现 */
html.dark .custom-chat-dialog .session-item:hover,
[data-theme='dark'] .custom-chat-dialog .session-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 4. 补充优化：输入框在暗黑模式下的背景 */
html.dark .custom-chat-dialog .input-group .el-textarea__inner,
[data-theme='dark'] .custom-chat-dialog .input-group .el-textarea__inner {
    background-color: var(--el-fill-color-dark) !important;
    color: var(--el-text-color-primary) !important;
}






/**
 * 侧边栏收起模式样式 - 必须添加到全局CSS
 * 支持两种收起模式：保留图标 / 完全隐藏
 */

/* ========== 项目配置面板中的预览样式 ========== */
.collapse-mode-preview {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}

.collapse-mode-preview .preview-item {
    flex: 1;
    cursor: pointer;
    text-align: center;
    padding: 8px;
    border-radius: var(--el-border-radius-base, 4px);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.collapse-mode-preview .preview-item:hover {
    background: var(--el-fill-color-light, #f5f7fa);
}

.collapse-mode-preview .preview-item.active {
    border-color: var(--el-color-primary, #409eff);
    background: var(--el-color-primary-light-9, #ecf5ff);
}

.collapse-mode-preview .preview-thumb {
    width: 100%;
    height: 60px;
    border-radius: 4px;
    background: var(--el-fill-color, #f0f2f5);
    position: relative;
    overflow: hidden;
    margin-bottom: 8px;
}

.collapse-mode-preview .preview-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 12px;
    background: var(--el-color-primary-light-7, #c6e2ff);
}

.collapse-mode-preview .preview-sidebar-icon {
    position: absolute;
    top: 12px;
    left: 0;
    width: 16px;
    bottom: 0;
    background: var(--el-border-color, #dcdfe6);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
    gap: 4px;
}

.collapse-mode-preview .icon-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--el-text-color-placeholder, #a8abb2);
}

.collapse-mode-preview .preview-content {
    position: absolute;
    top: 16px;
    left: 20px;
    right: 4px;
    bottom: 4px;
    background: var(--el-bg-color, #ffffff);
    border-radius: 2px;
}

.collapse-mode-preview .preview-content-full {
    position: absolute;
    top: 16px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: var(--el-bg-color, #ffffff);
    border-radius: 2px;
}

.collapse-mode-preview .preview-label {
    font-size: 12px;
    color: var(--el-text-color-regular, #606266);
}

.collapse-mode-preview .preview-item.active .preview-label {
    color: var(--el-color-primary, #409eff);
    font-weight: 500;
}