/* ============================================================
   心予客服台 · 液态玻璃皮肤 (Liquid Glass UI)
   仅视觉层：不改动任何功能、布局尺寸与业务逻辑。
   调品牌色只需改下面 --g-brand / --g-brand-2 两个值。
   ============================================================ */

:root {
    --g-brand: #ff7a5c;
    --g-brand-2: #ff9d4d;
    --g-brand-3: #6a5cff;
    --g-brand-soft: rgba(255, 122, 92, .14);

    --g-ink: #1b1a22;
    --g-ink-2: #55535f;
    --g-ink-3: #8a8896;

    --g-glass: rgba(255, 255, 255, .55);
    --g-glass-strong: rgba(255, 255, 255, .74);
    --g-glass-flat: rgba(255, 255, 255, .62);
    --g-line: rgba(255, 255, 255, .72);
    --g-line-soft: rgba(255, 255, 255, .5);
    --g-blur: 22px;
    --g-radius: 18px;
    --g-radius-sm: 12px;
    --g-shadow: 0 12px 32px rgba(31, 25, 58, .10), 0 2px 8px rgba(31, 25, 58, .05);
    --g-shadow-hi: 0 18px 46px rgba(31, 25, 58, .16), 0 3px 10px rgba(31, 25, 58, .07);
}

/* ---------- 1. 底纹：柔和渐变网格（替代全站死白底） ---------- */
html {
    background-color: #f4f1fa !important;
    background-image:
        radial-gradient(1200px 820px at 4% -12%, rgba(255, 126, 96, .72), transparent 60%),
        radial-gradient(1050px 780px at 100% 0%, rgba(104, 88, 255, .58), transparent 62%),
        radial-gradient(950px 760px at 88% 100%, rgba(40, 210, 175, .50), transparent 60%),
        radial-gradient(880px 700px at 4% 96%, rgba(255, 146, 206, .55), transparent 62%),
        radial-gradient(1000px 720px at 46% 44%, rgba(160, 148, 255, .30), transparent 66%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    min-height: 100%;
}

body {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--g-ink);
}

/* 客服台的手机预览区、聊天画布保持纯白（模拟真实手机屏） */
.fullscreen-preview,
.fullscreen-preview .preview-content,
.fullscreen-preview .preview-content-wrap,
.preview-content,
.phone-preview {
    background-color: #fff !important;
}

/* ---------- 2. JS 打标的玻璃面 ---------- */
.gx-glass {
    box-sizing: border-box !important;
    background-color: transparent !important;
    background-image: linear-gradient(155deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .40) 100%) !important;
    -webkit-backdrop-filter: blur(var(--g-blur)) saturate(185%);
    backdrop-filter: blur(var(--g-blur)) saturate(185%);
    border: 1px solid rgba(255, 255, 255, .78) !important;
    box-shadow: 0 12px 34px rgba(48, 32, 84, .10), inset 0 1px 0 rgba(255, 255, 255, .85) !important;
    border-radius: var(--g-radius) !important;
    transition: box-shadow .28s ease, background-color .28s ease, transform .28s ease;
}

.gx-glass:hover {
    box-shadow: var(--g-shadow-hi) !important;
}

/* 嵌套在玻璃面里的白块：只做半透，不再叠一层模糊（省性能） */
.gx-glass-flat {
    box-sizing: border-box !important;
    background-color: transparent !important;
    background-image: linear-gradient(155deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .52) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    border-radius: var(--g-radius-sm) !important;
}

/* 整页级白底容器：透明，露出底纹（不改任何尺寸） */
.gx-clear {
    box-sizing: border-box !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* 品牌渐变填充（原蓝色/黑色主按钮） */
.gx-brand {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, var(--g-brand) 0%, var(--g-brand-2) 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(255, 122, 92, .32), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
    transition: box-shadow .25s ease, transform .25s ease, filter .25s ease !important;
}

.gx-brand:hover {
    box-shadow: 0 12px 28px rgba(255, 122, 92, .42), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
    filter: brightness(1.04);
}

.gx-brand:active {
    transform: translateY(1px);
}

/* 深色遮罩 → 毛玻璃 */
.gx-mask {
    background-color: rgba(20, 16, 38, .34) !important;
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
}

/* ---------- 3. 后台壳定点精修 ---------- */
.sidebar {
    background-color: transparent !important;
    background-image: linear-gradient(175deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .52)) !important;
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    backdrop-filter: blur(26px) saturate(180%);
    border-right: 1px solid rgba(255, 255, 255, .7) !important;
    box-shadow: 6px 0 34px rgba(31, 25, 58, .10) !important;
}

.sidebar-brand {
    color: var(--g-ink) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .6) !important;
    background: linear-gradient(120deg, var(--g-brand), var(--g-brand-3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-nav a,
.nav-group-header {
    border-radius: 12px !important;
}

.sidebar-nav a:active,
.nav-group-header:active,
.nav-sub a:active {
    background-color: rgba(255, 255, 255, .72) !important;
}

.sidebar-nav a.active,
.nav-group-header.active {
    background-image: linear-gradient(120deg, rgba(255, 122, 92, .16), rgba(106, 92, 255, .12)) !important;
    color: var(--g-ink) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 4px 14px rgba(31, 25, 58, .07) !important;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, .6) !important;
    color: var(--g-ink-3) !important;
}

.header {
    background-color: rgba(255, 255, 255, .58) !important;
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, .65) !important;
    box-shadow: 0 6px 24px rgba(31, 25, 58, .06) !important;
}

.tabs-bar {
    background-color: rgba(255, 255, 255, .42) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom: 1px solid rgba(255, 255, 255, .55) !important;
}

.tabs-bar .tab-item {
    border-radius: 10px 10px 0 0 !important;
}

.tabs-bar .tab-item.active {
    background-color: rgba(255, 255, 255, .85) !important;
    color: var(--g-ink) !important;
    box-shadow: 0 -2px 10px rgba(31, 25, 58, .06) !important;
}

.content {
    background-color: transparent !important;
    padding-top: 18px !important;
}

.header-right .dropdown-menu {
    background-color: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    backdrop-filter: blur(20px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .8) !important;
    border-radius: 14px !important;
    box-shadow: var(--g-shadow-hi) !important;
    overflow: hidden;
}

.header-right .dropdown-menu a:hover {
    background-color: rgba(255, 122, 92, .10) !important;
}

.header-right .dropdown-menu .divider {
    background-color: rgba(31, 25, 58, .08) !important;
}

/* 弹窗 */
.pwd-modal {
    background-color: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .85) !important;
    border-radius: 20px !important;
    box-shadow: var(--g-shadow-hi) !important;
}

.pwd-modal-mask {
    background-color: rgba(20, 16, 38, .34) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.pwd-btn-ok,
.btn-primary,
.btn-submit,
.btn-save {
    background-image: linear-gradient(135deg, var(--g-brand), var(--g-brand-2)) !important;
    background-color: transparent !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px rgba(255, 122, 92, .30) !important;
}

/* ---------- 4. 表单控件统一 ---------- */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input:not([type]),
select,
textarea {
    background-color: rgba(255, 255, 255, .68) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 1px 2px rgba(31, 25, 58, .06) !important;
    color: var(--g-ink) !important;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input:not([type]):focus,
select:focus,
textarea:focus {
    outline: none !important;
    border-color: rgba(255, 122, 92, .65) !important;
    background-color: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 0 0 4px var(--g-brand-soft), inset 0 1px 2px rgba(31, 25, 58, .04) !important;
}

::placeholder {
    color: #a9a7b6 !important;
}

/* 复选框 / 单选框 */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--g-brand);
}

/* ---------- 5. 表格 ---------- */
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

table thead th {
    background-color: rgba(255, 255, 255, .62) !important;
    color: var(--g-ink-2) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid rgba(31, 25, 58, .08) !important;
}

table tbody tr:hover {
    background-color: rgba(255, 255, 255, .55) !important;
}

table td {
    border-bottom: 1px solid rgba(31, 25, 58, .06) !important;
}

/* ---------- 6. 滚动条 / 选中态 / 焦点 ---------- */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(31, 25, 58, .16);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(31, 25, 58, .26);
}

::selection {
    background: rgba(255, 122, 92, .24);
}

a {
    transition: color .2s ease;
}

/* 登录页 */
.login-form {
    background-color: transparent !important;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .46)) !important;
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, .85) !important;
    box-shadow: 0 24px 60px rgba(48, 32, 84, .18), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    border-radius: 24px !important;
    box-shadow: var(--g-shadow-hi) !important;
    padding: 36px 30px 30px !important;
    box-sizing: border-box;
}

.login-form .avatar {
    border-radius: 20px !important;
    box-shadow: 0 10px 26px rgba(255, 122, 92, .28) !important;
}

.login-form .form-group input {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, .95) !important;
    background-color: rgba(255, 255, 255, .7) !important;
    padding: 14px 16px !important;
    box-shadow: inset 0 1px 2px rgba(31, 25, 58, .06) !important;
}

.login-form .form-group input:focus {
    border-color: rgba(255, 122, 92, .65) !important;
    box-shadow: 0 0 0 4px var(--g-brand-soft) !important;
}

.btn-login {
    background-image: linear-gradient(135deg, var(--g-brand), var(--g-brand-2)) !important;
    background-color: transparent !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(255, 122, 92, .34) !important;
    letter-spacing: .5px;
}

.btn-login:hover {
    filter: brightness(1.05);
}

/* ---------- 7. 移动端：降模糊保流畅 ---------- */
@media (max-width: 767px) {
    :root {
        --g-blur: 14px;
        --g-radius: 16px;
        --g-shadow: 0 8px 22px rgba(31, 25, 58, .10);
    }

    .sidebar {
        -webkit-backdrop-filter: blur(18px) saturate(170%);
        backdrop-filter: blur(18px) saturate(170%);
    }

    html {
        background-image:
            radial-gradient(680px 520px at 0% -8%, rgba(255, 138, 110, .55), transparent 62%),
            radial-gradient(620px 520px at 100% 2%, rgba(106, 92, 255, .38), transparent 64%),
            radial-gradient(560px 480px at 90% 100%, rgba(58, 214, 180, .32), transparent 62%) !important;
    }
}

/* 不支持 backdrop-filter 的浏览器：退回高不透明度白面 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .gx-glass,
    .sidebar,
    .header,
    .tabs-bar,
    .login-form {
        background-color: rgba(255, 255, 255, .94) !important;
    }
}

/* 打印 / 导出：回到干净白底 */
@media print {
    html {
        background: #fff !important;
    }

    .gx-glass,
    .sidebar,
    .header {
        backdrop-filter: none !important;
        background: #fff !important;
        box-shadow: none !important;
    }
}