/*!
 * AI 能量风设计系统（科技能量风 / sci-fi energy）
 * 仅作用于聊天相关容器，新增类为主、对 .ai-chat-* 做质感增强；不影响 dashboard 其它部分。
 * 配合 ai-energy-bg.js（WebGL 流光背景）+ ai-energy-card.js（3D 卡片/上下文%）使用。
 */

/* ===== 新增调色（追加到既有 :root，不覆盖） ===== */
:root {
    --neon-cyan: #22d3ee;
    --neon-blue: #38bdf8;
    --neon-purple: #2dd4bf;
    --neon-violet: #a3e635;
    --energy-deep: #020617;
    --energy-glow: 0 0 24px rgba(34, 211, 238, 0.35);
    --glass-energy: rgba(13, 20, 45, 0.55);
    --glass-energy-border: rgba(120, 180, 255, 0.18);
    --ai-radius: 8px;
}
@property --ai-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ===== WebGL 流光背景 canvas ===== */
.ai-energy-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    display: block;
    opacity: 0.5;
    background: #020617;
    contain: strict;
    transition: opacity .24s ease, filter .24s ease;
}

.ai-chat-section.ai-is-generating .ai-energy-bg,
.ai-fullscreen-container.ai-is-generating .ai-energy-bg {
    opacity: 0.72;
    filter: saturate(0.86) brightness(0.82);
}

/* ===== 聊天区整体（dashboard + 全屏 + hero） ===== */
.ai-chat-section,
.ai-fullscreen-container {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 800px at 20% 10%, rgba(34,211,238,0.10), transparent 60%),
                radial-gradient(1000px 700px at 85% 90%, rgba(139,92,246,0.12), transparent 60%),
                var(--tech-dark, #020617);
    isolation: isolate;
}
/* 全屏容器：固定铺满视口、内容不外溢 */
.ai-fullscreen-container {
    position: fixed !important;
    inset: 0;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    height: 100dvh;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* 让原有玻璃容器透明，露出 canvas 流光 */
.ai-chat-section .ai-chat-container,
.ai-fullscreen-container .ai-chat-container {
    background: transparent !important;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-height: 0;           /* 关键：flex 子项可收缩，消息区才能滚动、composer 才能贴底 */
    display: flex;
    flex-direction: column;
}
.ai-chat-section .ai-chat-messages,
.ai-fullscreen-container .ai-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background: transparent;
}
.ai-chat-section .ai-chat-header,
.ai-fullscreen-container .ai-chat-header {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, rgba(7, 11, 31, 0.72), rgba(7, 11, 31, 0.25));
    border-bottom: 1px solid var(--glass-energy-border);
    backdrop-filter: blur(14px);
}
.ai-chat-section .ai-chat-header h2,
.ai-fullscreen-container .ai-chat-header h2 {
    background: linear-gradient(90deg, #fff, var(--neon-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0;
}

/* ===== 能量卡片：玻璃 + 流光描边 ===== */
.ai-energy-card {
    position: relative;
    border-radius: var(--ai-radius);
    background: var(--glass-energy);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.18s ease;
}
/* 流光描边（conic + mask；@property 不支持时退化为静态渐变描边） */
.ai-energy-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.2px;
    background: conic-gradient(from var(--ai-ang),
        transparent 0%, var(--neon-cyan) 12%, var(--neon-purple) 26%,
        transparent 42%, transparent 60%, var(--neon-blue) 74%,
        var(--neon-violet) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    animation: none; /* 克制的能量感：取消旋转流光描边，保留静态质感 */
}
@keyframes ai-ang-spin { to { --ai-ang: 360deg; } }
.ai-energy-card-inner {
    position: relative;
    z-index: 1;
    transform: translateZ(40px);
    transform-style: preserve-3d;
}
.ai-energy-card.ai-tilt { transition: none; }

/* ===== 上下文进度卡（标题/副标题/数值/进度条） ===== */
.ai-ctx-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ai-ctx-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
    text-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
    display: inline-flex; align-items: center; gap: 6px;
}
.ai-ctx-title i { color: var(--neon-cyan); }
.ai-ctx-sub {
    font-size: 12px;
    color: rgba(180, 200, 230, 0.72);
}
.ai-ctx-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ai-ctx-reading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
}
.ai-ctx-val {
    font-size: 12px;
    color: rgba(200, 215, 240, 0.85);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ai-ctx-used,
.ai-ctx-limit,
.ai-ctx-percent {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-variant-numeric: tabular-nums;
}
.ai-ctx-used { color: #f8fafc; }
.ai-ctx-separator { margin: 0 4px; color: rgba(148, 163, 184, 0.75); }
.ai-ctx-limit { color: var(--neon-cyan); }
.ai-ctx-percent {
    min-width: 58px;
    padding: 4px 8px;
    border: 1px solid rgba(45, 212, 191, 0.28);
    border-radius: 6px;
    background: rgba(13, 148, 136, 0.12);
    color: #5eead4;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
.ai-ctx-percent.is-warn {
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.38);
    background: rgba(245, 158, 11, 0.12);
}
.ai-ctx-bar {
    position: relative;
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.ai-ctx-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-cyan), var(--neon-purple));
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);
    animation: ai-ctx-flow 2.4s linear infinite;
    transition: width 0.5s cubic-bezier(.22,.61,.36,1);
}
@keyframes ai-ctx-flow { to { background-position: 200% 0; } }
.ai-ctx-fill.is-warn {
    background: linear-gradient(90deg, #f59e0b, #ef4444, #f59e0b);
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.7);
}
.ai-ctx-bar.is-unlimited .ai-ctx-fill {
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
    opacity: 0.55;
}

/* ===== 底部 composer 卡（模型选择 + 上下文 + 输入） ===== */
.ai-composer {
    padding: clamp(12px, 2.4vw, 18px);
    margin: 10px 0 0;
}
.ai-composer .ai-composer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.ai-composer .ai-composer-top .ai-chat-modelbar { flex: 1 1 auto; min-width: 0; }
.ai-composer-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}
.ai-composer .ai-agent-mode-btn,
.ai-composer .ai-billing-mode-btn,
.ai-composer .ai-composer-top .ai-new-chat-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-energy-border);
    color: rgba(200, 215, 240, 0.85);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s, border-color .2s, background-color .2s, box-shadow .2s;
}
.ai-composer .ai-agent-mode-btn:hover,
.ai-composer .ai-billing-mode-btn:hover,
.ai-composer .ai-composer-top .ai-new-chat-btn:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.ai-composer .ai-agent-mode-btn:focus-visible,
.ai-composer .ai-billing-mode-btn:focus-visible,
.ai-composer .ai-new-chat-btn:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: 2px;
}
.ai-composer .ai-agent-mode-btn.is-active {
    color: #d9f99d;
    border-color: rgba(163, 230, 53, 0.68);
    background: rgba(77, 124, 15, 0.2);
    box-shadow: 0 0 16px rgba(163, 230, 53, 0.16);
}
.ai-composer .ai-billing-mode-btn[data-mode="balance"] {
    color: #fdba74;
    border-color: rgba(249, 115, 22, 0.45);
    background: rgba(154, 52, 18, 0.16);
}
.ai-composer .ai-chat-input {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
}
.ai-composer .ai-chat-input textarea {
    flex: 1 1 auto;
    min-height: 44px;
    max-height: 140px;
    resize: none;
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid var(--glass-energy-border);
    background: rgba(7, 11, 31, 0.6);
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.ai-composer .ai-chat-input textarea:focus {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}
.ai-composer .ai-chat-input textarea::placeholder { color: rgba(160, 180, 210, 0.5); }
.ai-composer .ai-chat-input button#aiChatSend,
.ai-composer .ai-chat-input button#aiChatSendFs {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--neon-blue), var(--neon-cyan));
    color: #04122b;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.4);
    transition: transform .12s, box-shadow .2s, filter .2s;
}
.ai-composer .ai-chat-input button#aiChatSend:hover:not(:disabled),
.ai-composer .ai-chat-input button#aiChatSendFs:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: 0 8px 26px rgba(34, 211, 238, 0.55);
}
.ai-composer .ai-chat-input button#aiChatSend:focus-visible,
.ai-composer .ai-chat-input button#aiChatSendFs:focus-visible {
    outline: 2px solid #f8fafc;
    outline-offset: 3px;
}
.ai-composer .ai-chat-input button#aiChatSend.is-stopping,
.ai-composer .ai-chat-input button#aiChatSendFs.is-stopping {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    box-shadow: 0 6px 22px rgba(239, 68, 68, 0.38);
}
.ai-composer .ai-chat-input button#aiChatSend.is-stopping:hover,
.ai-composer .ai-chat-input button#aiChatSendFs.is-stopping:hover {
    box-shadow: 0 8px 28px rgba(239, 68, 68, 0.5);
}
.ai-composer .ai-chat-input button:disabled { opacity: 0.5; cursor: not-allowed; }

/* composer 内的模型选择器（从顶部 modelbar 移入） */
.ai-composer .ai-chat-modelbar {
    padding: 0;
    border: none;
    background: transparent;
    margin-bottom: 8px;
}
.ai-composer .ai-chat-model-select {
    border: 1px solid var(--glass-energy-border);
    background: rgba(7, 11, 31, 0.7);
    color: #e8f0ff;
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 13px;
    max-width: 100%;
    width: min(100%, 360px);
    cursor: pointer;
}
.ai-composer .ai-chat-model-caption { color: rgba(180, 200, 230, 0.7); font-size: 12px; }

/* ===== 消息气泡重塑（玻璃 + 发光头像 + 打字光标） ===== */
.ai-chat-section .ai-chat-messages,
.ai-fullscreen-container .ai-chat-messages {
    position: relative;
    z-index: 1;
}

/* ===== 欢迎页 LOGO 动画（漂浮 + 呼吸光晕 + 自旋色相） ===== */
.ai-chat-welcome i {
    animation: ai-welcome-float 3.6s ease-in-out infinite, ai-welcome-glow 2.8s ease-in-out infinite;
    will-change: transform, filter;
}
.ai-chat-welcome h4 {
    background: linear-gradient(90deg, #fff, var(--neon-cyan), var(--neon-purple), #fff);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: none; /* 克制的能量感：标题渐变保留，取消流光扫动 */
}
@keyframes ai-welcome-float {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(3deg); }
}
@keyframes ai-welcome-glow {
    0%,100% { filter: drop-shadow(0 0 6px rgba(34,211,238,.45)); }
    50% { filter: drop-shadow(0 0 22px rgba(139,92,246,.85)); }
}
@keyframes ai-title-shimmer { to { background-position: 200% center; } }

/* ===== 全屏容器：内容不溢出/不产生页面滚动 ===== */
.ai-fullscreen-container { overflow: hidden; }

/* 背景切换按钮（聊天头） */
.ai-bg-switch {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--glass-energy-border);
    color: rgba(200,215,240,0.85); padding: 6px 12px; border-radius: 6px;
    font-size: 12px; cursor: pointer; transition: color .2s, border-color .2s;
}
.ai-bg-switch:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }
.ai-bg-switch:focus-visible,
.ai-new-chat-btn:focus-visible,
.ai-chat-model-select:focus-visible,
.ai-composer .ai-chat-input button:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: 2px;
}
.ai-message-content.ai-message-error {
    color: var(--error, #f87171);
}

.ai-is-generating .ai-composer {
    animation: none; /* 克制的能量感：取消输入框呼吸脉冲 */
}

@keyframes ai-composer-pulse {
    0%, 100% { border-color: rgba(34, 211, 238, 0.2); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); }
    50% { border-color: rgba(34, 211, 238, 0.52); box-shadow: 0 0 26px rgba(34, 211, 238, 0.16); }
}
.ai-chat-section .ai-message,
.ai-fullscreen-container .ai-message {
    position: relative;
}
.ai-chat-section .ai-message.assistant .ai-message-content,
.ai-fullscreen-container .ai-message.assistant .ai-message-content {
    background: rgba(13, 20, 45, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-energy-border);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.ai-chat-section .ai-message.assistant .ai-message-avatar i,
.ai-fullscreen-container .ai-message.assistant .ai-message-avatar i {
    color: var(--neon-cyan);
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.7));
}
/* 打字光标 */
.ai-message-content.ai-typing::after {
    content: '▍';
    color: var(--neon-cyan);
    animation: ai-blink 1s steps(2) infinite;
    margin-left: 2px;
}
@keyframes ai-blink { 50% { opacity: 0; } }

/* loading 指示点能量化 */
.ai-message-loading span {
    display: inline-block;
    width: 7px; height: 7px;
    margin: 0 2px;
    border-radius: 50%;
    background: var(--neon-cyan);
    box-shadow: 0 0 8px var(--neon-cyan);
    animation: ai-dot 1.2s infinite ease-in-out both;
}
.ai-message-loading span:nth-child(1) { animation-delay: -.32s; }
.ai-message-loading span:nth-child(2) { animation-delay: -.16s; }
@keyframes ai-dot { 0%,80%,100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

.ai-loading-message .ai-message-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: min(100%, 290px);
}
.ai-message-loading {
    flex: 0 0 auto;
    white-space: nowrap;
}
.ai-wait-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(203, 213, 225, 0.78);
    font-variant-numeric: tabular-nums;
}
.ai-wait-copy strong {
    overflow: hidden;
    color: #e2e8f0;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-message-cancelled {
    color: rgba(226, 232, 240, 0.86);
    border-color: rgba(148, 163, 184, 0.3) !important;
}
.ai-message-cancelled i { margin-right: 6px; color: #f97316; }
.ai-agent-orbit {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(163, 230, 53, 0.38);
    border-radius: 50%;
    color: #bef264;
    box-shadow: inset 0 0 10px rgba(163, 230, 53, 0.12), 0 0 14px rgba(163, 230, 53, 0.12);
}
.ai-agent-orbit i { animation: ai-agent-spin 1.1s linear infinite; }
@keyframes ai-agent-spin { to { transform: rotate(360deg); } }

/* ===== 聊天计费切换弹窗 ===== */
.ai-billing-modal-content { max-width: 520px; }
.ai-billing-balance-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-secondary, #f8fafc);
}
.ai-billing-balance-strip span { min-width: 0; color: var(--text-secondary, #475569); font-size: 13px; }
.ai-billing-balance-strip strong { color: var(--text-primary, #0f172a); font-variant-numeric: tabular-nums; }
.ai-billing-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.ai-billing-option {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #0f172a);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.ai-billing-option:hover { border-color: var(--primary-color, #06b6d4); }
.ai-billing-option:has(input:checked) {
    border-color: var(--primary-color, #06b6d4);
    background: color-mix(in srgb, var(--primary-color, #06b6d4) 9%, var(--bg-primary, #fff));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color, #06b6d4) 16%, transparent);
}
.ai-billing-option > i { font-size: 20px; color: var(--primary-color, #06b6d4); }
.ai-billing-option span { display: grid; min-width: 0; gap: 2px; }
.ai-billing-option strong { font-size: 14px; }
.ai-billing-option small { overflow: hidden; color: var(--text-secondary, #475569); text-overflow: ellipsis; white-space: nowrap; }
.ai-billing-option.is-disabled { cursor: not-allowed; opacity: .5; }
.ai-billing-impact {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 14px 0 0;
    color: var(--text-secondary, #475569);
    font-size: 12px;
    line-height: 1.5;
}

/* ===== 响应式 ===== */
@media (max-width: 1024px) {
    .ai-energy-card-inner { transform: translateZ(28px); }
}
@media (max-width: 640px) {
    .ai-composer .ai-chat-input { flex-wrap: wrap; }
    .ai-composer .ai-chat-input textarea { min-height: 40px; }
    .ai-composer .ai-chat-input button#aiChatSend,
    .ai-composer .ai-chat-input button#aiChatSendFs { width: 44px; height: 44px; }
    .ai-ctx-meta { flex-wrap: wrap; }
    .ai-energy-card-inner { transform: translateZ(0); }
}
/* reduced-motion：关闭流光/倾斜/打字动画 */
@media (prefers-reduced-motion: reduce) {
    .ai-energy-card::before,
    .ai-ctx-fill,
    .ai-message-content.ai-typing::after,
    .ai-message-loading span { animation: none !important; }
    .ai-is-generating .ai-composer { animation: none !important; }
    .ai-energy-card-inner { transform: none !important; }
}

/* ===== 聊天工作区布局：全端满幅、稳定尺寸、无嵌套卡片感 ===== */
.ai-chat-section,
.ai-fullscreen-container,
.ai-chat-section *,
.ai-fullscreen-container * {
    box-sizing: border-box;
}

.ai-chat-section {
    height: 100vh;
    min-height: 620px;
    padding: clamp(12px, 1.5vw, 24px);
}

.ai-chat-section .ai-chat-header,
.ai-fullscreen-container .ai-chat-header {
    min-height: 64px;
    margin: 0 0 10px;
    padding: 12px clamp(14px, 2vw, 26px);
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(2, 6, 23, 0.3);
}

.ai-fullscreen-container .ai-chat-header {
    flex: 0 0 auto;
    margin: 0;
    padding-top: max(12px, env(safe-area-inset-top));
    border-width: 0 0 1px;
    border-radius: 0;
}

.ai-chat-section .ai-chat-header h2,
.ai-fullscreen-container .ai-chat-header h2 {
    min-width: 0;
    margin: 0;
    font-size: 22px;
    letter-spacing: 0;
}

.ai-chat-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-chat-actions .btn,
.ai-chat-actions .ai-bg-switch {
    min-height: 38px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.ai-chat-actions .btn:hover,
.ai-chat-actions .ai-bg-switch:hover {
    transform: none;
    background-color: rgba(34, 211, 238, 0.1);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.14);
}

.ai-chat-section .ai-chat-container,
.ai-fullscreen-container .ai-chat-container {
    width: 100%;
    border-radius: 0;
}

.ai-chat-section .ai-chat-messages,
.ai-fullscreen-container .ai-chat-messages {
    width: min(100%, 1120px);
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(18px, 3vw, 36px) clamp(10px, 2.2vw, 24px);
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 211, 238, 0.42) rgba(15, 23, 42, 0.35);
}

.ai-chat-section .ai-chat-messages::-webkit-scrollbar,
.ai-fullscreen-container .ai-chat-messages::-webkit-scrollbar { width: 7px; }
.ai-chat-section .ai-chat-messages::-webkit-scrollbar-thumb,
.ai-fullscreen-container .ai-chat-messages::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: rgba(34, 211, 238, 0.42);
}

.ai-chat-section .ai-composer,
.ai-fullscreen-container .ai-composer {
    flex: 0 0 auto;
    width: min(calc(100% - 20px), 1120px);
    max-width: 1120px;
    margin: 0 auto max(10px, env(safe-area-inset-bottom));
    padding: clamp(12px, 1.8vw, 18px);
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.ai-chat-section .ai-composer {
    margin-bottom: 0;
}

.ai-energy-card-inner {
    transform: none;
}

.ai-composer .ai-composer-top {
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-bottom: 8px;
}

.ai-composer .ai-chat-modelbar {
    display: grid;
    grid-template-columns: auto minmax(160px, 360px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
}

.ai-composer .ai-chat-model-caption {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-composer .ai-new-chat-btn {
    min-height: 34px;
    border-radius: 6px;
    white-space: nowrap;
}

.ai-ctx-meta {
    display: grid;
    grid-template-columns: auto minmax(100px, 1fr);
    align-items: center;
    gap: 10px 14px;
    min-width: 0;
    margin: 8px 0 12px;
}

.ai-ctx-bar {
    width: 100%;
    min-width: 100px;
    height: 7px;
}

.ai-composer .ai-chat-input textarea {
    width: 100%;
    min-width: 0;
    border-radius: 6px;
    background: rgba(2, 6, 23, 0.72);
}

.ai-composer .ai-chat-input button#aiChatSend,
.ai-composer .ai-chat-input button#aiChatSendFs {
    border-radius: 6px;
}

.ai-message {
    align-items: flex-start;
}

.ai-chat-section .ai-message-content,
.ai-fullscreen-container .ai-message-content {
    max-width: min(78%, 820px);
    border-radius: 8px;
}

.ai-chat-section .ai-message.user .ai-message-content,
.ai-fullscreen-container .ai-message.user .ai-message-content {
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.92), rgba(13, 148, 136, 0.92));
    box-shadow: 0 8px 24px rgba(8, 145, 178, 0.2);
}

.ai-chat-welcome {
    position: relative;
    width: min(100%, 620px);
    margin: auto;
    padding: clamp(48px, 10vh, 110px) 20px;
}

.ai-chat-welcome::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(170px, 28vw, 300px);
    aspect-ratio: 1;
    border: 1px solid rgba(34, 211, 238, 0.12);
    border-radius: 50%;
    transform: translate(-50%, -58%);
    box-shadow: 0 0 28px rgba(34, 211, 238, 0.06), inset 0 0 28px rgba(45, 212, 191, 0.05);
    animation: none; /* 克制的能量感：脉冲环降为静态低透明 */
    opacity: 0.7;
    pointer-events: none;
}

.ai-chat-welcome > * { position: relative; z-index: 1; }

@keyframes ai-core-pulse {
    0%, 100% { opacity: .58; transform: translate(-50%, -58%) scale(.96); }
    50% { opacity: 1; transform: translate(-50%, -58%) scale(1.04); }
}

@media (max-width: 900px) {
    .ai-chat-section { min-height: 560px; padding: 12px; }
    .ai-composer .ai-chat-modelbar {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .ai-composer .ai-chat-model-caption {
        grid-column: 2;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .ai-chat-section {
        height: 100dvh;
        min-height: 0;
        padding: 8px;
    }
    .ai-chat-section .ai-chat-header,
    .ai-fullscreen-container .ai-chat-header {
        min-height: 0;
        padding: 10px 12px;
        gap: 8px;
    }
    .ai-chat-section .ai-chat-header h2,
    .ai-fullscreen-container .ai-chat-header h2 {
        font-size: 17px;
    }
    .ai-chat-actions {
        width: 100%;
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    }
    .ai-chat-actions .btn,
    .ai-chat-actions .ai-bg-switch {
        justify-content: center;
        width: 100%;
        min-width: 0;
        padding-inline: 8px;
    }
    .ai-chat-section .ai-chat-messages,
    .ai-fullscreen-container .ai-chat-messages {
        padding: 18px 8px;
    }
    .ai-chat-section .ai-composer,
    .ai-fullscreen-container .ai-composer {
        width: calc(100% - 12px);
        padding: 10px;
        margin-bottom: max(6px, env(safe-area-inset-bottom));
    }
    .ai-composer .ai-composer-top {
        flex-wrap: wrap;
    }
    .ai-composer-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .ai-composer .ai-agent-mode-btn,
    .ai-composer .ai-billing-mode-btn,
    .ai-composer .ai-new-chat-btn {
        justify-content: center;
        min-height: 44px;
        margin: 0;
    }
    .ai-composer .ai-chat-input {
        flex-wrap: nowrap;
    }
    .ai-composer .ai-chat-modelbar {
        flex: 1 1 100%;
        width: 100%;
    }
    .ai-composer .ai-new-chat-btn {
        margin-left: auto;
    }
    .ai-ctx-meta {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ai-ctx-reading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        width: 100%;
        min-width: 0;
    }
    .ai-ctx-sub {
        overflow: hidden;
        min-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .ai-ctx-percent { min-width: 54px; }
    .ai-chat-section .ai-message-content,
    .ai-fullscreen-container .ai-message-content {
        max-width: calc(100% - 46px);
        padding: 10px 12px;
    }
    .ai-message-avatar { width: 32px; height: 32px; }
    .ai-loading-message .ai-message-content { min-width: 0; }
    .ai-billing-balance-strip,
    .ai-billing-options { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .ai-chat-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-composer .ai-chat-model-select { font-size: 12px; padding-inline: 8px; }
    .ai-composer .ai-chat-model-caption { font-size: 11px; }
    .ai-ctx-reading { gap: 6px; }
    .ai-ctx-percent { min-width: 48px; padding-inline: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-chat-welcome i,
    .ai-chat-welcome h4,
    .ai-chat-welcome::before {
        animation: none !important;
    }
    .ai-agent-orbit i { animation: none !important; }
}

/* ===== 代码块：头部(语言/复制/下载/预览) + 安全 HTML 预览分栏 ===== */
.ai-message-content .ai-code-block {
    margin: 10px 0;
    border: 1px solid var(--glass-energy-border);
    border-radius: 8px;
    overflow: hidden;
    background: #0d1117;
}
.ai-message-content .ai-code-block > pre { margin: 0; background: transparent; }
.ai-message-content .ai-code-block pre code {
    display: block;
    padding: 12px 14px;
    overflow-x: auto;
    background: transparent;
    font-size: 13px;
    line-height: 1.55;
    color: #c9d1d9;
}
.ai-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ai-code-lang {
    font-size: 12px;
    color: rgba(200, 215, 240, 0.7);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}
.ai-code-actions { display: flex; gap: 6px; }
.ai-code-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(220, 230, 245, 0.85);
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.ai-code-btn:hover { background: rgba(34, 211, 238, 0.16); color: #fff; border-color: rgba(34, 211, 238, 0.4); }
.ai-code-btn i { font-size: 13px; }
.ai-code-preview-btn { color: #d9f99d; border-color: rgba(163, 230, 53, 0.35); }
.ai-code-preview-btn:hover { background: rgba(163, 230, 53, 0.16); color: #ecfccb; border-color: rgba(163, 230, 53, 0.6); }
.ai-code-run-btn { color: #93c5fd; border-color: rgba(96, 165, 250, 0.35); }
.ai-code-run-btn:hover { background: rgba(96, 165, 250, 0.16); color: #dbeafe; border-color: rgba(96, 165, 250, 0.6); }
.ai-py-output {
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: #0b1020;
    color: #c9d1d9;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
}
.ai-py-output.ai-py-running { color: #93c5fd; }
.ai-py-output.ai-py-done { color: #b9f6ca; }
.ai-py-output.ai-py-error { color: #fca5a5; }

/* ===== AI 历史会话列表 ===== */
.ai-history-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; }
.ai-history-loading, .ai-history-empty { padding: 24px 12px; text-align: center; color: var(--text-secondary, #64748b); font-size: 13px; }
.ai-history-item { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; background: var(--bg-primary, #fff); overflow: hidden; transition: border-color .2s, background-color .2s; }
.ai-history-item:hover { border-color: var(--primary-color, #06b6d4); }
.ai-history-item.is-current { border-color: var(--primary-color, #06b6d4); background: color-mix(in srgb, var(--primary-color, #06b6d4) 9%, var(--bg-primary, #fff)); }
.ai-history-item-main { flex: 1 1 auto; min-width: 0; padding: 10px 12px; cursor: pointer; }
.ai-history-title { font-size: 14px; color: var(--text-primary, #0f172a); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-history-meta { font-size: 12px; color: var(--text-secondary, #64748b); margin-top: 3px; }
.ai-history-del { flex: 0 0 auto; width: 42px; border: 0; border-left: 1px solid var(--border-color, #e5e7eb); background: transparent; color: var(--text-secondary, #94a3b8); cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s, color .2s; }
.ai-history-del:hover { background: color-mix(in srgb, #ef4444 12%, transparent); color: #ef4444; }

/* ===== MCP 服务端管理项 ===== */
.ai-mcp-item { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px; background: var(--bg-primary, #fff); padding: 8px 10px; }
.ai-mcp-main { flex: 1 1 auto; min-width: 0; }
.ai-mcp-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary, #0f172a); display: flex; align-items: center; gap: 6px; }
.ai-mcp-url { font-size: 11.5px; color: var(--text-secondary, #64748b); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-mcp-errtext { font-size: 11px; color: #ef4444; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-mcp-ok { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: rgba(16,185,129,.14); color: #059669; }
.ai-mcp-err { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: rgba(239,68,68,.14); color: #dc2626; }
.ai-mcp-new { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; background: rgba(100,116,139,.14); color: #64748b; }
.ai-mcp-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-secondary, #64748b); cursor: pointer; white-space: nowrap; }

/* 右侧 HTML 预览：.ai-chat-container 激活时切 grid 分栏（普通/全屏两容器通用） */
.ai-preview-pane {
    display: none;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: rgba(13, 20, 45, 0.55);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-energy-border);
    border-radius: 8px;
    overflow: hidden;
}
.ai-chat-container.ai-preview-active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 42%);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 12px;
}
.ai-chat-container.ai-preview-active > .ai-chat-messages { grid-column: 1; grid-row: 1; }
.ai-chat-container.ai-preview-active > .ai-composer { grid-column: 1; grid-row: 2; }
.ai-chat-container.ai-preview-active > .ai-preview-pane { display: flex; grid-column: 2; grid-row: 1 / span 2; }
.ai-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--glass-energy-border);
    background: rgba(7, 11, 31, 0.5);
}
.ai-preview-title { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(220, 230, 245, 0.9); }
.ai-preview-title i { color: var(--neon-cyan); }
.ai-preview-close {
    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(220, 230, 245, 0.85);
}
.ai-preview-close:hover { background: rgba(239, 68, 68, 0.2); color: #fff; }
.ai-preview-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; }
@media (max-width: 900px) {
    /* 窄屏：预览改为下方抽屉，避免挤压聊天区 */
    .ai-chat-container.ai-preview-active {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto minmax(240px, 48vh);
    }
    .ai-chat-container.ai-preview-active > .ai-preview-pane { grid-column: 1; grid-row: 3; }
}

/* 平台内置 MCP 联网搜索按钮：复用 Agent 模式按钮的视觉规范 */
.ai-composer .ai-web-search-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-energy-border);
    color: rgba(200, 215, 240, 0.85);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s, border-color .18s, background .18s, box-shadow .18s;
}
.ai-composer .ai-web-search-btn:hover {
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
}
.ai-composer .ai-web-search-btn:focus-visible {
    outline: 2px solid var(--neon-cyan);
    outline-offset: 2px;
}
.ai-composer .ai-web-search-btn.is-active {
    color: #7dd3fc;
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(8, 47, 73, 0.35);
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.18);
}
@media (max-width: 640px) {
    .ai-composer .ai-web-search-btn {
        justify-content: center;
        min-height: 44px;
        margin: 0;
    }
}