/* ============================================================
   智蝶AI · 获客助手 —— v1.4「精密层」
   ------------------------------------------------------------
   背景：谷总 2026-09-27 反馈「UI 还不是太理想，缺乏科技感高端感，
        或者可以炫一点」。

   设计取向（刻意避开"炫光乱闪"）：
       科技感 ≠ 更多光效。柔光球 v1.3 已经做到位了，
       现在缺的是与之对比的**硬结构** —— 精密仪器的味道：
         · 内高光 + 极细描边  → 玻璃"立"起来，不再像贴纸
         · 分段控制器 + 刻度环 → 操作元件像仪表，不像网页按钮
         · 取景角标（局部、克制）→ 精密设备的视觉语言
         · 数字等宽 + 字距微调 → "读数"感
       ⛔ 不加满屏网格底纹 —— style.css 里已注明那是"工程/监控味"的元凶。

   ⚠️ 本文件是**叠加层**：从模板摘掉 <link> 即可完整回退到 v1.3。
   ⚠️ 颜色变量在 style.css 的 :root，改色只改那里；本文件只加局部变量。
   ⚠️ 加载顺序必须在 theme-v13.css 之后。
   ============================================================ */

:root {
    /* 本层专用，不污染全局 */
    --v14-hair: rgba(255, 255, 255, 0.075);        /* 顶部 1px 内高光 */
    --v14-mark: rgba(45, 212, 255, 0.42);          /* 取景角标 */
    --v14-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --v14-sink: inset 0 1px 3px rgba(0, 0, 0, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

/* ============ 1. 顶部状态栏：浮起的控制条 ============ */

.topbar {
    position: relative;
    padding: 9px 14px;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.026));
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 0 var(--v14-hair), 0 10px 32px rgba(4, 6, 20, 0.44);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* 顶部一道极光细边（与 v13 的面板处理保持同一语言） */
.topbar::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 16%;
    right: 16%;
    height: 1px;
    border-radius: 1px;
    background: var(--accent);
    opacity: 0.45;
    pointer-events: none;
}

.topbar-left {
    align-items: center;          /* 原来是 baseline，装了图标要居中 */
}

/* 品牌记号：极简蝶形，暗示"智蝶" */
.topbar-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 8px;
    background: linear-gradient(150deg, rgba(45, 212, 255, 0.14), rgba(139, 92, 246, 0.14));
    border: 1px solid rgba(45, 212, 255, 0.24);
    box-shadow: inset 0 0 14px rgba(139, 92, 246, 0.26);
}

/* ============ 2. 额度芯片：带刻度环的仪表 ============ */

/* ⚠️ 定位锚放在 .topbar-right 上（而不是 details 自己）：
   details 在 flex 换行后可能不在最右侧，right:0 会算到它自己身上、
   浮层就跑到屏幕外。锚在容器上则永远对齐状态栏右内边距。 */
.topbar-right {
    position: relative;
}

.quota-chip {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 50px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028));
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-muted);
    transition: border-color 0.2s var(--v14-ease), box-shadow 0.2s var(--v14-ease), color 0.2s;
}

.quota-chip > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 6px;
    border-radius: 50px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.quota-chip > summary::-webkit-details-marker { display: none; }
.quota-chip > summary::marker { content: ''; }

.quota-chip:hover,
.quota-chip[open] {
    border-color: rgba(45, 212, 255, 0.42);
    color: var(--text);
    box-shadow: 0 0 20px rgba(45, 212, 255, 0.16);
}

/* 不限量账号：不是可点元件，保持朴素 */
.quota-chip.quota-plain {
    padding: 3px 12px;
    cursor: default;
}

.quota-chip.quota-plain:hover {
    border-color: var(--line);
    color: var(--text-muted);
    box-shadow: none;
}

/* 刻度环：剩余占比。--q-pct 由模板内联传入 */
.quota-ring {
    position: relative;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: conic-gradient(var(--cyan) var(--q-pct, 0%), rgba(255, 255, 255, 0.13) 0);
    box-shadow: 0 0 10px rgba(45, 212, 255, 0.28);
}

.quota-ring::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--bg-elevated);
}

.quota-label {
    font-size: 0.72rem;
    /* ⚠️ 不能用 --text-dim（#7C8BAE）：在顶栏的玻璃底上实测对比度只有 4.33，
       低于正文门槛 4.5。这里的小字更要保证可读。 */
    color: var(--text-muted);
    font-family: inherit;
}

.quota-num {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ============ 3. 额度换算浮层 ============ */

.quota-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 80;
    width: 302px;
    max-width: calc(100vw - 28px);
    padding: 14px 15px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(25, 33, 72, 0.975), rgba(16, 23, 54, 0.975));
    border: 1px solid var(--line-strong);
    box-shadow: 0 26px 64px rgba(2, 4, 14, 0.62), inset 0 1px 0 var(--v14-hair);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: quotaIn 0.18s var(--v14-ease);
}

@keyframes quotaIn {
    from { opacity: 0; transform: translateY(-6px); }
}

/* ⚠️⚠️ 手机上必须换成 position:fixed —— 这不是"顺手优化"，是硬修正。
   ------------------------------------------------------------
   实测（tools/diagnose_ui_v14.py）：`panel.offsetParent` 返回的是
   **`DETAILS.quota-chip`** —— 也就是说 <details> 自己成了 absolute 后代的
   包含块（Chromium 给 <details> 建了独立的布局包含块）。

   于是 `right: 0` 对齐的是**芯片**的右边缘，而不是状态栏的右边缘。
   手机上 chip 被 space-between 排在中间，而浮层宽 292~362px，
   结果右边缘停在 197px、**左边缘跑到 -95px**，整块飘到屏幕外看不见。

   fixed 的包含块取最近的 filter / backdrop-filter 祖先，这里正好是 .topbar
   （它有 backdrop-filter: blur），所以 left/right + top:100% 就贴着
   状态栏下沿铺开，等于一张全宽卡片 —— 手机上也更好点、更好读。 */
@media (max-width: 640px) {
    .quota-panel {
        position: fixed;
        left: 11px;
        right: 11px;
        top: calc(100% + 8px);
        width: auto;
        max-width: none;
    }
}

.quota-panel-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text);
}

.quota-panel-sub {
    font-size: 0.67rem;
    font-weight: 400;
    color: var(--text-dim);
}

.quota-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.quota-list li {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 5px 0;
    font-size: 0.79rem;
    color: var(--text-muted);
}

.quota-list li + li {
    border-top: 1px dashed rgba(255, 255, 255, 0.062);
}

.quota-row-name {
    white-space: nowrap;
}

/* 引导点线：把名称与数量拉到两端，是"报价单/仪表"的观感 */
.quota-dots {
    flex: 1;
    height: 1px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}

.quota-row-qty {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--cyan);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* AI 图生视频：唯一"真贵"的一项，单独框出来 */
.quota-ai {
    margin-top: 10px;
    padding: 9px 11px 10px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(45, 212, 255, 0.09));
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.quota-ai-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--text);
}

.quota-ai-head b {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    color: var(--pink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quota-ai-note {
    margin-top: 5px;
    font-size: 0.67rem;
    line-height: 1.55;
    /* 同上：--text-dim 在这块紫青渐变底上只有 4.08，必须提到 --text-muted */
    color: var(--text-muted);
}

.quota-panel-foot {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.67rem;
    line-height: 1.6;
    color: var(--text-dim);
}

/* ============ 4. 主导航：分段控制器 ============ */

.nav-menu {
    gap: 4px;
    padding: 5px;
    border-radius: 14px;
    /* 内凹：容器"沉"下去，选中项才"浮"得起来 */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.1));
    border: 1px solid var(--line);
    box-shadow: var(--v14-sink);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.nav-item {
    position: relative;
    padding: 9px 21px;
    border-radius: 10px;
    letter-spacing: 0.2px;
    transition: color 0.2s var(--v14-ease), background 0.25s var(--v14-ease),
                box-shadow 0.25s var(--v14-ease);
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.055);
}

/* ⚠️ 覆盖 v13 的 active 样式必须显式把 border 清掉，
   否则会同时吃到 v13 的 1px 描边 + 本层的渐变底，边上多一圈。
   文字色保持浅色：active 底是半透明浅渐变（不是实心强调色），
   所以这里是"浅色底上的浅色字"里的特殊情况 —— 底仍然足够深。 */
.nav-item.active {
    background: linear-gradient(180deg, rgba(45, 212, 255, 0.17), rgba(139, 92, 246, 0.15));
    border: none;
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.17), 0 3px 16px rgba(45, 212, 255, 0.2);
}

/* 选中项底部一道发光刻度 */
.nav-item.active::after {
    content: '';
    position: absolute;
    left: 28%;
    right: 28%;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.75);
    pointer-events: none;
}

/* ============ 5. 容器：玻璃层次 + 取景角标 ============ */

.panel,
.chat-container,
.auth-card,
.studio-card {
    box-shadow: 0 18px 54px rgba(4, 6, 20, 0.46), inset 0 1px 0 var(--v14-hair);
}

/* 取景角标：只给主对话容器，且只画四个角 —— 精密设备的视觉语言。
   ⚠️ 若觉得过"仪器感"，把这条整块注释掉即可，其余视觉不受影响。 */
.chat-container::before {
    content: '';
    position: absolute;
    inset: 9px;
    z-index: 3;
    pointer-events: none;
    border-radius: 14px;
    opacity: 0.4;
    background:
        linear-gradient(var(--v14-mark), var(--v14-mark)) left top / 12px 1px no-repeat,
        linear-gradient(var(--v14-mark), var(--v14-mark)) left top / 1px 12px no-repeat,
        linear-gradient(var(--v14-mark), var(--v14-mark)) right top / 12px 1px no-repeat,
        linear-gradient(var(--v14-mark), var(--v14-mark)) right top / 1px 12px no-repeat,
        linear-gradient(var(--v14-mark), var(--v14-mark)) left bottom / 12px 1px no-repeat,
        linear-gradient(var(--v14-mark), var(--v14-mark)) left bottom / 1px 12px no-repeat,
        linear-gradient(var(--v14-mark), var(--v14-mark)) right bottom / 12px 1px no-repeat,
        linear-gradient(var(--v14-mark), var(--v14-mark)) right bottom / 1px 12px no-repeat;
}

/* ============ 6. 主按钮：内高光 + 悬停流光 ============ */

.btn-primary {
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 6px 22px rgba(45, 212, 255, 0.3);
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -62%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s var(--v14-ease);
    pointer-events: none;
}

.btn-primary:hover:not(:disabled)::after {
    left: 125%;
}

/* 输入框内凹一点，和"浮起来"的按钮形成对比 */
#messageInput,
.form-group input,
.form-group textarea,
.form-group select {
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

/* ============ 7. 移动端 ============ */

@media (max-width: 720px) {
    /* 收窄一点，避免在窄屏上顶到边 */
    .topbar {
        padding: 8px 11px;
    }

    /* ⛔ 这里刻意**不写** .quota-panel 的宽度。
       本块在文件里排在「≤640px → position:fixed」之后，
       同优先级下后写的会赢，一旦在这里写 width，
       就会把手机上那张全宽卡片的 `width:auto` 顶掉（改前实测就是这样）。
       宽度一律由浮层自己的基础块 + ≤640 的 fixed 规则决定。 */

    /* 手机屏幕小，取景角标变成噪点，去掉 */
    .chat-container::before {
        display: none;
    }

    /* 触屏没有 hover，流光只在按下时给一次反馈 */
    .btn-primary:active::after {
        left: 125%;
    }
}

/* ⚠️⚠️ 这一段不是"顺便调的"，是必须写的修正。
   v14 基础块里的 `.nav-item { padding: 9px 21px }` 与 style.css 移动端
   块里的 `.nav-item { padding: 10px 15px }` **优先级完全相同**（都是单类选择器），
   于是由**加载顺序**决定胜负 —— v14 后加载，会把移动端的内边距也一起顶掉，
   5 个入口在 360~390px 上就会被挤出容器（工具箱直接看不见）。
   ⇒ 凡是"基础块 + 媒体查询块"分层改同一个选择器，都要在两档里各写一次。 */
@media (max-width: 640px) {
    .nav-item {
        padding: 10px 13px;
        font-size: 0.84rem;
    }
}

@media (max-width: 400px) {
    /* 320~400px：品牌副标题让位给额度与操作 */
    .topbar-sub {
        display: none;
    }

    /* 浮层宽度不用在这里管：≤640px 已是 position:fixed + left/right 定位的全宽卡片 */
}

/* ============ 9. 不限量账号的额度 chip 也能点开 ============ */
/* 2026-09-27 改：以前 quota_total==0（不限量）时整个面板不渲染，
   于是内部账号既看不到换算、也看不到 AI 视频钱包余额。
   现在它也是 <details>，所以光标要恢复成可点的样子 ——
   否则用户看到"不限量"两个字以为只是标签，就不会去点。 */

.quota-chip.quota-plain {
    cursor: pointer;
}

.quota-chip.quota-plain summary {
    cursor: pointer;
}

.quota-chip.quota-plain .quota-label {
    color: var(--text-muted);
}

/* 钱包与次数是两套账，浮层底部那行提醒别和上面的清单混在一起看 */
.quota-panel-foot {
    white-space: normal;
}

/* ============ 10. 无障碍 ============ */

@media (prefers-reduced-motion: reduce) {
    .quota-panel {
        animation: none;
    }

    .btn-primary::after {
        display: none;
    }

    .nav-item,
    .quota-chip {
        transition-duration: 0.01ms;
    }
}