/* ============================================================
   CowAgent Console — Premium Overlay v1.0
   ============================================================
   现代化覆盖层：深色玻璃质感 + 霓虹渐变（方案 A）
   设计资产复用 premium.css 变量；本文件最后加载，负责覆盖
   chat.html / console.css 内联 Tailwind class 的深色观感。

   原则：
   - 仅覆盖 `.dark` 深色主题，浅色主题保持原样不破坏
   - 纯 CSS，不改 console.js 任何行为
   ============================================================ */

/* ------------------------------------------------------------
   0. 主题作用域开关 —— 本套样式只吃深色
   ------------------------------------------------------------ */
html:not(.dark) body { background: #f8fafc !important; }
html:not(.dark) body::before { display: none !important; }

html.dark body,
html.dark #login-overlay {
    background: #0a0a0f !important;
}

/* 网格霓虹光晕（premium body::before 被 Tailwind class 压掉，这里补回） */
html.dark body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--gradient-mesh);
    pointer-events: none;
}

html.dark #app,
html.dark #main-content,
html.dark .view,
html.dark #login-overlay > * {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
   1. 侧边栏 — 玻璃化 + 字体/间距优化
   ------------------------------------------------------------ */
html.dark #sidebar {
    background: rgba(12, 12, 20, 0.72) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* 分组标签 — 字体加大、颜色提亮 */
html.dark .menu-group > button {
    font-size: 12px !important;
    color: #b0b8c4 !important;
    letter-spacing: 0.05em !important;
    padding-top: 16px !important;
    padding-bottom: 8px !important;
    font-weight: 600 !important;
}

html.dark .menu-group > button:hover {
    color: #d1d5db !important;
}

/* 菜单项 */
html.dark #sidebar .sidebar-item {
    font-size: 13px !important;
    color: #d1d5db !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    gap: 10px !important;
}

html.dark #sidebar .sidebar-item.active {
    /* v1.7（第二刀 §2.2-a）：Apple 式纯淡背景圆角取代「左竖条」——
       去掉 border-left 与 inset glow 后，深浅切换的 active 位移/跳变（审计 §2.8.3-3）一并消失 */
    background: rgba(139, 92, 246, 0.16) !important;
    border-left: none !important;
    padding-left: 12px !important;
    box-shadow: none !important;
    color: #fff !important;
}

html.dark #sidebar .sidebar-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f3f4f6 !important;
}

html.dark #sidebar .sidebar-item .item-icon {
    transition: filter 0.2s ease, color 0.2s ease;
    font-size: 13px !important;
    width: 16px !important;
    text-align: center !important;
}

html.dark #sidebar .sidebar-item:hover .item-icon,
html.dark #sidebar .sidebar-item.active .item-icon {
    filter: drop-shadow(0 0 6px currentColor);
}

html.dark #sidebar .sidebar-item.active .item-icon {
    color: var(--neon-blue) !important;
}

/* ------------------------------------------------------------
   2. Session 面板 — 与侧边栏同调
   ------------------------------------------------------------ */
html.dark .session-panel {
    background: rgba(15, 15, 24, 0.85) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html.dark .session-item.active {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.16), transparent) !important;
}

html.dark .session-item.active .session-icon { color: var(--neon-blue) !important; }

html.dark .session-panel-new {
    border-color: rgba(0, 212, 255, 0.25);
    color: #8ea3b8;
    transition: all 0.2s ease;
}

html.dark .session-panel-new:hover {
    border-color: rgba(0, 212, 255, 0.6);
    color: var(--neon-blue);
    background: rgba(0, 212, 255, 0.06);
}

/* ------------------------------------------------------------
   3. 顶栏 — 玻璃化 + 间距统一
   ------------------------------------------------------------ */
html.dark header {
    background: rgba(10, 10, 15, 0.78) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    padding-left: 20px !important;
    padding-right: 20px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
}

html.dark header::after {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.35), transparent);
    pointer-events: none;
}

/* 顶栏 logo 区域 */
html.dark header .logo-area,
html.dark header .logo-area a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

html.dark header .logo-area img {
    height: 24px !important;
    width: 24px !important;
}

html.dark header .logo-area span {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #f3f4f6 !important;
}

/* 顶栏右侧按钮组 */
html.dark header .header-actions {
    gap: 6px !important;
    align-items: center !important;
}

html.dark header .header-actions button,
html.dark header .header-actions a {
    padding: 8px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ------------------------------------------------------------
   4. 登录页 — 玻璃卡片 + logo 光晕
   ------------------------------------------------------------ */
html.dark #login-overlay .max-w-sm {
    background: rgba(18, 18, 28, 0.6);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px 28px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.dark #login-overlay img {
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.45), 0 0 48px rgba(0, 212, 255, 0.2);
}

html.dark #login-overlay h1 {
    background: var(--gradient-blue-purple);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.dark #login-password {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

html.dark #login-password:focus {
    border-color: rgba(0, 212, 255, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}

html.dark #login-btn {
    background: var(--gradient-blue-purple) !important;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
    transition: all 0.2s ease;
}

html.dark #login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.5);
}

/* ------------------------------------------------------------
   5. 欢迎屏 — CowAgent 标题霓虹 + 示例卡玻璃化 + 对齐优化
   ------------------------------------------------------------ */
html.dark #welcome-title {
    background: linear-gradient(135deg, #fff 0%, #a78bfa 60%, #00d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    margin-top: 16px !important;
    margin-bottom: 12px !important;
}

html.dark #welcome-subtitle {
    font-size: 14px !important;
    color: #a8b0bc !important;
    line-height: 1.7 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

html.dark #welcome-screen img {
    box-shadow: 0 0 28px rgba(139, 92, 246, 0.4), 0 0 60px rgba(0, 212, 255, 0.18);
    margin-bottom: 16px !important;
}

html.dark #welcome-screen .example-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border-radius: 16px;
    padding: 20px !important;
    transition: all 0.25s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

html.dark #welcome-screen .example-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(0, 212, 255, 0.35) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.08);
}

html.dark #welcome-screen .example-card .card-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}

html.dark #welcome-screen .example-card .card-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #e5e7eb !important;
    margin-bottom: 6px !important;
}

html.dark #welcome-screen .example-card .card-desc {
    font-size: 13px !important;
    color: #a8b0bc !important;
    line-height: 1.5 !important;
}

/* ------------------------------------------------------------
   6. 消息区 — 非对称气泡 + 柔和阴影 + 操作条浮现
   ------------------------------------------------------------ */

/* 6.1 对话容器轻微缩窄，阅读更聚焦 */
html.dark .bot-message-group > div,
html.dark .user-message-group > div {
    max-width: min(72%, 720px);
}

/* 6.2 Bot 气泡 — 玻璃 + 非对称圆角（左侧小、右侧大，指向说话者） */
html.dark .bot-message-group .msg-content {
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border-radius: 18px 18px 18px 6px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
    color: #e2e8f0 !important;
    padding: 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* 6.3 用户气泡 — 蓝紫霓虹渐变 + 反向非对称圆角 */
html.dark .user-message-group .msg-content {
    background: var(--gradient-blue-purple) !important;
    border: none !important;
    border-radius: 6px 18px 18px 18px !important;
    box-shadow: 0 6px 22px rgba(139, 92, 246, 0.35);
    color: #fff !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* 6.4 Bot 头像微光晕 */
html.dark .bot-message-group > img {
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.35);
    border-radius: 10px;
    width: 36px !important;
    height: 36px !important;
}

/* 6.5 消息操作条 — hover 才浮现（时间戳常显，图标淡入） */
html.dark .bot-message-group .copy-msg-btn,
html.dark .bot-message-group .speak-msg-btn,
html.dark .bot-message-group .regenerate-msg-btn,
html.dark .user-message-group .edit-msg-btn,
html.dark .user-message-group .delete-msg-btn {
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

html.dark .bot-message-group:hover .copy-msg-btn,
html.dark .bot-message-group:hover .speak-msg-btn,
html.dark .bot-message-group:hover .regenerate-msg-btn,
html.dark .user-message-group:hover .edit-msg-btn,
html.dark .user-message-group:hover .delete-msg-btn {
    opacity: 1;
    transform: translateY(0);
}

html.dark .bot-message-group .regenerate-msg-btn,
html.dark .user-message-group .edit-msg-btn {
    color: var(--neon-blue) !important;
}

html.dark .bot-message-group:hover .regenerate-msg-btn { font-weight: 600; }

/* 6.6 时间戳提亮一档 */
html.dark .bot-message-group .mt-1\.5 span,
html.dark .user-message-group .mt-1\.5 span {
    color: #9aa6b8 !important;
}

/* 6.7 Agent 步骤（thinking / tool）折叠区 */
html.dark .agent-thinking-step .thinking-full,
html.dark .agent-tool-step {
    color: #a0adc0;
}

html.dark .agent-tool-step .tool-header:hover { color: var(--neon-blue); }

/* ------------------------------------------------------------
   7. 输入区 Compose Bar — 毛玻璃 + 高度优化
   ------------------------------------------------------------ */
html.dark .border-t.bg-white {
    background: rgba(10, 10, 15, 0.85) !important;
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-top-color: rgba(255, 255, 255, 0.07) !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

html.dark #chat-input {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
    caret-color: var(--neon-blue);
    font-size: 14px !important;
    line-height: 1.5 !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    max-height: 120px !important;
    resize: none !important;
    color: #e5e7eb !important;
}

html.dark #chat-input::placeholder {
    color: #6b7280 !important;
}

html.dark #chat-input:focus {
    border-color: rgba(0, 212, 255, 0.45) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1), inset 0 1px 0 rgba(255,255,255,0.06);
    color: #f3f4f6 !important;
}

/* 发送按钮 — 蓝紫霓虹渐变 */
html.dark #send-btn {
    background: var(--gradient-blue-purple) !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
    transition: all 0.2s ease;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
}

html.dark #send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(139, 92, 246, 0.55);
}

html.dark #send-btn:disabled {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none;
    width: 40px !important;
    height: 40px !important;
}

/* 顶排小按钮 hover */
html.dark #new-chat-btn:hover,
html.dark #attach-btn:hover,
html.dark #mic-btn:hover {
    color: var(--neon-blue);
    background: rgba(0, 212, 255, 0.08) !important;
}

/* 顶排小按钮尺寸统一 */
html.dark #new-chat-btn,
html.dark #clear-context-btn,
html.dark #attach-btn,
html.dark #mic-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
}

/* ------------------------------------------------------------
   8. 代码块 — 深色层次 + 霓虹高光 header
   ------------------------------------------------------------ */
html.dark .msg-content pre {
    background: #131321 !important;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    overflow-x: auto !important;
}

html.dark .code-block-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: #131321;
    margin: 12px 0 !important;
}

html.dark .code-block-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(0, 212, 255, 0.12);
    padding: 10px 16px !important;
    font-size: 12px !important;
}

html.dark .code-block-lang { color: var(--neon-blue); font-weight: 600; }

html.dark .code-copy-btn:hover { color: var(--neon-blue); }

/* 行内代码 */
html.dark .msg-content :not(pre) > code {
    background: rgba(139, 92, 246, 0.18) !important;
    color: #c4b5fd !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}

/* ------------------------------------------------------------
   9. 微动效 — view 入场 + 气泡淡入
   ------------------------------------------------------------ */
html.dark .view.active {
    animation: cowViewIn 0.25s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

@keyframes cowViewIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 输入内容出现时气泡淡入（SSE 新消息） */
html.dark .bot-message-group:not(:first-of-type) {
    animation: cowBubbleIn 0.3s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

@keyframes cowBubbleIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 示例卡片 hover 光晕 */
html.dark #welcome-screen .example-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(139, 92, 246, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

html.dark #welcome-screen .example-card:hover::before {
    opacity: 1;
}

html.dark #welcome-screen .example-card {
    position: relative;
}

/* ------------------------------------------------------------
   10. Markdown 细节色
   ------------------------------------------------------------ */
html.dark .msg-content a { color: #7dd3fc !important; text-decoration: underline; text-decoration-color: rgba(125, 211, 252, 0.3); }
html.dark .msg-content a:hover { color: #38bdf8 !important; text-decoration-color: #38bdf8; }
html.dark .msg-content blockquote {
    background: rgba(139, 92, 246, 0.1) !important;
    border-left-color: var(--neon-purple) !important;
    padding: 12px 16px !important;
    border-radius: 0 8px 8px 0 !important;
    font-size: 14px !important;
}
html.dark .msg-content table th,
html.dark .msg-content table td { border-color: rgba(255, 255, 255, 0.12); padding: 10px 14px !important; font-size: 13px !important; }
html.dark .msg-content table th { background: rgba(255, 255, 255, 0.04); font-weight: 600; }
html.dark .msg-content ul, html.dark .msg-content ol { padding-left: 24px !important; font-size: 14px !important; }
html.dark .msg-content li { margin-bottom: 6px !important; }

/* ------------------------------------------------------------
   11. 滚动条 — 霓虹 thumb
   ------------------------------------------------------------ */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html.dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.35), rgba(139, 92, 246, 0.35));
    border-radius: 4px;
}
html.dark ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.6), rgba(139, 92, 246, 0.6));
}
html.dark ::-webkit-scrollbar-track {
    background: transparent;
}

/* ------------------------------------------------------------
   12. 滚动到底 FAB — 统一霓虹 hover
   ------------------------------------------------------------ */
html.dark #scroll-to-bottom-btn {
    background: rgba(20, 20, 30, 0.85);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.12);
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
}

html.dark #scroll-to-bottom-btn:hover {
    color: var(--neon-blue) !important;
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.25);
    border-color: rgba(0, 212, 255, 0.3) !important;
}/* ============================================================
   v1.4 — 对比度 / 图谱 / 收件箱 / 图表深色适配
   ============================================================ */

/* ------------------------------------------------------------
   13. 深色模式全局对比度提升 —— 次级文字统一提亮
   dark:text-slate-400(#94a3b8) → #a8b3c5 / slate-500 → #93a1b5
   ------------------------------------------------------------ */
html.dark .text-slate-400 { color: #a8b3c5 !important; }
html.dark .text-slate-500 { color: #93a1b5 !important; }
html.dark .text-slate-600 { color: #b4bfd0 !important; }
html.dark .text-neutral-400 { color: #a8b3c5 !important; }
html.dark .text-neutral-500 { color: #93a1b5 !important; }

/* 主面板卡片 —— 比 #1A1A1A 更亮的玻璃，增强与背景的区分 */
html.dark .bg-\[\#1A1A1A\] {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}

/* 次级卡片（bg-slate-800 / bg-slate-50 深色变体） */
html.dark .bg-slate-800 { background: rgba(255, 255, 255, 0.05) !important; }
html.dark .bg-slate-900 { background: rgba(255, 255, 255, 0.04) !important; }

/* ------------------------------------------------------------
   14. 好奇心兴趣图谱 —— 深色 label + 溢出修复
   ------------------------------------------------------------ */
html.dark #curiosity-graph svg text {
    fill: #c7d0dd !important;
    font-size: 11px !important;
    paint-order: stroke;
    stroke: rgba(10, 10, 15, 0.6);
    stroke-width: 2.5px;
    stroke-linejoin: round;
}

#curiosity-graph svg text {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    pointer-events: none;
}

/* 图谱容器：允许内部滚动、防右侧溢出 */
#curiosity-graph {
    overflow: auto !important;
    max-width: 100% !important;
}
#curiosity-graph svg {
    display: block;
    margin: 0 auto;
}

/* 话题列表长英文单词换行，防溢出 */
#curiosity-topic-list .flex-1 { min-width: 0; }
#curiosity-topic-list .truncate {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
}

/* ------------------------------------------------------------
   15. 所有 dashboard/图表卡 via dark:bg-[#1A1A1A] —— 已覆盖于 §13
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   16. 收件箱 —— 玻璃化容器 + 频道高亮
   ------------------------------------------------------------ */
html.dark #inbox-content .inbox-filter-item.active {
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.2), rgba(0, 212, 255, 0.06)) !important;
    color: #fff !important;
}
html.dark #inbox-content .inbox-session-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px;
}
html.dark #inbox-content .inbox-session-item {
    transition: background 0.2s ease;
}

/* ------------------------------------------------------------
   17. 性格摘要 —— 大卡玻璃统一
   ------------------------------------------------------------ */
html.dark .rounded-3xl {
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* ============================================================
   v1.5 — 移动端可读性阶梯（<768px）
   证据：review/mobile-research/measure.md §3.2；裁决 C2 后本块不含任何背景规则。
   特异度：html .x = (0,1,1) > JIT 工具类 (0,1,0)，与注入顺序无关（实证
   overlay_check_390.txt RAMP_INJECT: 10px→11.5px，注入位 JIT <style> 之后仍生效）。
   桌面 ≥768px 不进本 media query，零变化。
   ============================================================ */
@media not all and (min-width: 768px) {   /* 与现场 JIT 的 max-md 真实媒体串逐字同值（R1-13 实测，
                                   probe_media.txt：MEDIA{1 rules}: not all and (min-width: 768px)）——
                                   视口段判据双标问题随本串消除；T0-A 的 overflow 规则共用本串 */
    html .text-\[9px\]  { font-size: 10px; }
    html .text-\[10px\] { font-size: 11.5px; line-height: 1.5; }
    html .text-\[11px\] { font-size: 12.5px; line-height: 1.45; }
    /* th 例外（mustFix-7 → R2-14 重订）：th 自带 text-[11px]（L1691/1904/1947），不进阶梯——
       R1 轮行「table th{…}」特异度 (0,0,2) 输给本块 (0,1,1) 行，headless 实测 th=12.5px=死代码；
       下行为实证修正：(0,1,2)>(0,1,1)，实测 th=11px 且控制组（非 th 的 11px 文本）仍 12.5px
       （th_spec_result.txt）。标的格副行 10px（L1286/1553/1703/1915）仍在阶梯内→C 宽以重采为准。 */
    html th.text-\[11px\] { font-size: 11px; line-height: normal; }
    /* line-height 声明：以上阶梯行的 line-height (0,1,1) 会压过元素自身的 leading-* 工具类
       （#stock-panel-footer L618 就带 leading-relaxed，390 档被压为 1.5）——有意为之。 */
    /* T0-2 条 13 配套：侧栏 21 个导航行一次覆盖（chat.html 静态类不动；验收=§6-7 CDP 一行式） */
    .sidebar-item { min-height: 44px; }
    /* T0-8：数字等宽，横滚中列不抖（MOB-32） */
    table { font-variant-numeric: tabular-nums; }
}

/* ============================================================
   v1.5 T0-A — max-md:overflow-x-auto 显式兜底（mustFix-6；<768px）
   与 JIT 若生成时的 max-md:overflow-x-auto 规则体逐字段等价：JIT 双份则同值幂等无害；
   JIT 漏扫则本条是唯一来源——“漏保”。特异度 (0,1,0) 与 JIT 平级，注入位序实证见
   overlay_check_390.txt RAMP_INJECT.jit_style_is_last_before_inject=false，
   同值声明谁后注入谁赢——内容相同故无所谓。
   ============================================================ */
@media not all and (min-width: 768px) {
    .max-md\:overflow-x-auto { overflow-x: auto; }
}

/* ============================================================
   v1.6 — 浅色主题玻璃卡回退（审计 A-1 / 2.1-4 / 2.3-1）
   浅色下 .premium-card/.glow-card 由深色半透明玻璃 → 白卡 +
   slate 描边 + 轻阴影，与同屏 Tailwind 白卡（bg-white …）视觉同构。
   html:not(.dark) 前缀特异度 (0,1,1) > premium.css 基类 (0,1,0)，
   无需 !important；glow 描边渐变在浅色禁用。
   ============================================================ */
html:not(.dark) .premium-card,
html:not(.dark) .glow-card {
    background: #ffffff;
    border-color: #e2e8f0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

html:not(.dark) .premium-card:hover,
html:not(.dark) .glow-card:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10);
}

html:not(.dark) .glow-card::before {
    opacity: 0;
}

/* ============================================================
   v1.6 — 全站 reduced-motion 兜底（审计 A-4 / 2.8.3-5）
   用户系统级「减少动态效果」时压掉所有动画/过渡时长。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   v1.7 — 第二刀：苹果化视觉（2026-09-14）
   token 全部来自 apple-tokens.css（纯变量）；本块是唯一系统性
   覆盖层：侧栏/顶栏玻璃、卡片/按钮/胶囊/高亮、收件箱 v2 组件。
   html.xxx 前缀手法沿用本文件既有约定，深浅两主题都写。
   ============================================================ */

/* (a) 侧栏：深浅两主题玻璃 + Apple active（淡背景圆角，非左竖条）。
       深色 active 已随上方 75 行原位替换（见替换说明），此处只写浅色 + 深色玻璃基座 */
html:not(.dark) #sidebar {
    background: var(--apple-glass-bg) !important;
    backdrop-filter: var(--apple-glass-blur);
    -webkit-backdrop-filter: var(--apple-glass-blur);
    border-right: var(--apple-border);
}
html:not(.dark) #sidebar { color: #475569 !important; }            /* text-neutral-400 提深 */
html:not(.dark) #sidebar .menu-group > button {
    color: #64748b !important;
    border-radius: 6px;
}
html:not(.dark) #sidebar .sidebar-item {
    color: #475569 !important;
    border-radius: var(--apple-radius-item) !important;
}
html:not(.dark) #sidebar .sidebar-item:hover {
    background: rgba(15,23,42,.06) !important;
    color: #1e293b !important;
}
/* active：浅色淡蓝圆底（深色淡紫已原位替换）；去掉两边 border-left（overlay:77-80 同步替换） */
html:not(.dark) #sidebar .sidebar-item.active {
    background: rgba(0,113,227,.10) !important;
    color: #005bbf !important;
    border-left: none !important;
    padding-left: 12px !important;      /* 补偿原 border 移除后的回退 */
}
html:not(.dark) #sidebar .sidebar-item.active .item-icon { color: var(--apple-accent) !important; }
/* 浅色侧栏底部 footer 也回浅 */
html:not(.dark) #sidebar .border-white\/10 { border-top-color: rgba(15,23,42,.08) !important; }
html:not(.dark) #sidebar .text-neutral-600 { color: #64748b !important; }
/* Sprint 2a — WCAG AA ≥4.5:1 浅色主题文字对比度修复 */
/* dashboard 内容区 .text-slate-400/#94a3b8≈2.9:1 FAIL → 提深到#475569(slate-600≈4.67:1) */
html:not(.dark) .text-slate-400 { color: #475569 !important; }                /* 正文≥4.5:1 */
/* dash-system-sub 等小字子标题进一步提深到 #334155(slate-700≈7.4:1 AAA) */
html:not(.dark) .dash-system-sub,
html:not(.dark) .dash-curiosity-sub,
html:not(.dark) .stat-label { color: #334155 !important; }                   /* ≥7:1 ★AAA *//* Sprint 2a: WCAG AA ≥4.5:1 — dashboard 浅色小字提深 */
html:not(.dark) .stat-subline,
html:not(.dark) .dash-system-sub,
html:not(.dark) .dash-curiosity-sub { color: #334155 !important; }      /* slate-700 ≈7.4:1 ✓AAA */
html:not(.dark) .text-xs.text-slate-400:not(#sidebar *) { color: #475569 !important; }    /* slate-600 ≈4.67:1 ✓AA (排除sidebar自身已覆盖的) */

/* (b) 顶栏：两主题玻璃 + hairline；附带修复审计 §2.8.3-1 的 header::after 锚定（一行） */
html:not(.dark) header {
    background: var(--apple-glass-strong) !important;
    backdrop-filter: var(--apple-glass-blur);
    -webkit-backdrop-filter: var(--apple-glass-blur);
    border-bottom: var(--apple-border) !important;
}
html.dark header { position: relative; }

/* (c) Apple 卡片统一（配合映射表使用）：给既有 rounded-xl/2xl 容器补双层阴影；
       不新增 .apple-card，直接增强既有类，零 JS */
html:not(.dark) .bg-white.rounded-xl,
html:not(.dark) .bg-white.rounded-2xl {
    box-shadow: var(--apple-shadow-sm);
}
html.dark .bg-white.rounded-xl,
html.dark .bg-white.rounded-2xl {
    box-shadow: var(--apple-shadow-sm);
}

/* (c) Apple 按钮：胶囊主/次（供收件箱 搜索/回复/继续 使用） */
.apple-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; padding: 0 16px; border: none; border-radius: var(--apple-radius-pill);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: background var(--apple-duration-fast) var(--apple-ease),
                transform var(--apple-duration-fast) var(--apple-ease-move);
}
.apple-btn:active { transform: scale(.97); }
.apple-btn-primary { background: var(--apple-accent); color: #fff; }
.apple-btn-primary:hover { background: var(--apple-accent-hover); }
.apple-btn-secondary {
    background: transparent; border: var(--apple-border-strong); color: inherit;
}
.apple-btn-secondary:hover { background: rgba(120,120,128,.08); }

/* (c) 频道彩色小胶囊（收件箱会话项/搜索项/详情头共用）
   S5：nowrap + flex-shrink:0 —— 窄列 flex-wrap 下「企业微信」曾被压成两行竖排 */
.apple-chip {
    display: inline-flex; align-items: center; gap: 4px; height: 20px;
    padding: 0 8px; border-radius: var(--apple-radius-pill);
    font-size: 11px; font-weight: 500; letter-spacing: .01em;
    white-space: nowrap; flex-shrink: 0;
}
.chip-telegram   { background: rgba(0,136,204,.12); color: #0086CC; }
.chip-wecom_bot  { background: rgba(11,179,126,.12); color: #0BA37E; }
.chip-weixin     { background: rgba(7,193,96,.12);  color: #07C160; }
.chip-web        { background: rgba(100,116,139,.12); color: #475569; }
.chip-feishu     { background: rgba(51,112,255,.12);  color: #3370FF; }
.chip-dingtalk   { background: rgba(22,119,255,.12);  color: #1677FF; }
.chip-qq         { background: rgba(18,183,245,.12);  color: #12B7F5; }
.chip-slack      { background: rgba(97,31,105,.12);   color: #611F69; }
.chip-discord    { background: rgba(88,101,242,.12);  color: #5865F2; }
.chip-unknown    { background: rgba(100,116,139,.12); color: #475569; }
/* J·a：system 桶配色（WO-INBOX-BE-01 后 unknown 归一 system；锌灰族，与 web 蓝灰区分） */
.chip-system     { background: rgba(82,82,91,.12);    color: #52525B; }
html.dark .chip-telegram  { background: rgba(56,189,248,.15); color: #7dd3fc; }
html.dark .chip-wecom_bot { background: rgba(52,211,153,.15); color: #6ee7b7; }
html.dark .chip-weixin    { background: rgba(74,222,128,.15); color: #86efac; }
html.dark .chip-web       { background: rgba(148,163,184,.15); color: #cbd5e1; }
html.dark .chip-feishu    { background: rgba(147,197,253,.15); color: #93c5fd; }
html.dark .chip-dingtalk  { background: rgba(147,197,253,.15); color: #93c5fd; }
html.dark .chip-qq        { background: rgba(103,232,249,.15); color: #a5f3fc; }
html.dark .chip-slack     { background: rgba(216,180,254,.15); color: #e9d5ff; }
html.dark .chip-discord   { background: rgba(165,180,252,.15); color: #c7d2fe; }
html.dark .chip-unknown   { background: rgba(148,163,184,.15); color: #cbd5e1; }
html.dark .chip-system    { background: rgba(161,161,170,.16); color: #d4d4d8; }

/* (c) 搜索高亮（后端 inbox.py:422 已输出 <span class="highlight">，
       全站此前无 .highlight 定义 → 搜索结果高亮隐形，本规则补齐） */
.highlight {
    background: rgba(255,214,10,.45); color: inherit;
    border-radius: 3px; padding: 0 1px;
}
html.dark .highlight { background: rgba(255,214,10,.25); color: #fef3c7; }

/* (c) 未读蓝点（替代红点，Apple 消息惯例） */
.inbox-unread-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--apple-accent); flex-shrink: 0;
}
html.dark .inbox-unread-dot { background: #0a84ff; }

/* (d) 收件箱 v2 组件（第二刀 §三；JS 只挂类名，样式统一落在这里） */

/* 空态引导三步卡（复用 .state-empty 三态体系） */
.inbox-guide .state-sub { font-size: 13px; opacity: .85; }
.inbox-guide-steps {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 16px; text-align: left;
    width: 100%; max-width: 420px;
}
.inbox-guide-step {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 12px; border-radius: var(--apple-radius-item);
    background: rgba(15,23,42,.03);
}
html.dark .inbox-guide-step { background: rgba(255,255,255,.04); }
.inbox-guide-step-icon {
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0,113,227,.10); color: var(--apple-accent);
    font-size: 12px; flex-shrink: 0; margin-top: 1px;
}
html.dark .inbox-guide-step-icon { background: rgba(10,132,255,.15); color: #0a84ff; }
.inbox-guide-step-title { font-size: 13px; font-weight: 600; color: #334155; }
html.dark .inbox-guide-step-title { color: #e2e8f0; }
.inbox-guide-step-desc { font-size: 12px; color: #64748b; margin-top: 2px; line-height: 1.5; }
html.dark .inbox-guide-step-desc { color: #94a3b8; }

/* 有消息后的「怎么用？」可收起小条 */
.inbox-guide-toggle {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 6px 10px; margin-bottom: 8px;
    background: rgba(0,113,227,.06); color: var(--apple-accent);
    border: 1px solid rgba(0,113,227,.16); border-radius: var(--apple-radius-item);
    font-size: 12px; font-weight: 500; cursor: pointer; text-align: left;
    transition: background var(--apple-duration-fast) var(--apple-ease);
}
.inbox-guide-toggle .guide-chevron { margin-left: auto; font-size: 10px; transition: transform var(--apple-duration-fast) var(--apple-ease); }
.inbox-guide-toggle.open .guide-chevron { transform: rotate(180deg); }
html.dark .inbox-guide-toggle { background: rgba(10,132,255,.10); color: #0a84ff; border-color: rgba(10,132,255,.22); }

/* J·c（票K）：system 桶折叠组 —— 「系统消息 N 条 · 默认折叠」中性灰条，展开后复用会话项模板 */
.inbox-system-group { margin-top: 6px; }
.inbox-system-toggle {
    display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 6px 10px; margin-bottom: 2px;
    background: rgba(15,23,42,.04); color: #64748b;
    border: 1px solid rgba(15,23,42,.08); border-radius: var(--apple-radius-item);
    font-size: 12px; font-weight: 500; cursor: pointer; text-align: left;
    transition: background var(--apple-duration-fast) var(--apple-ease);
}
.inbox-system-toggle:hover { background: rgba(15,23,42,.07); }
.inbox-system-toggle .guide-chevron { margin-left: auto; font-size: 10px; transition: transform var(--apple-duration-fast) var(--apple-ease); }
.inbox-system-toggle.open .guide-chevron { transform: rotate(180deg); }
html.dark .inbox-system-toggle { background: rgba(255,255,255,.05); color: #94a3b8; border-color: rgba(255,255,255,.10); }

/* S4（票K）：详情气泡改 renderMarkdown 输出，块级标签吃掉气泡内边距 → 首尾 margin 归零 */
.inbox-msg-bubble > :first-child { margin-top: 0; }
.inbox-msg-bubble > :last-child { margin-bottom: 0; }
.inbox-msg-bubble p, .inbox-msg-bubble ul, .inbox-msg-bubble ol { margin: 0 0 6px; }
.inbox-msg-bubble pre { background: rgba(15,23,42,.06); border-radius: 6px; padding: 8px; overflow-x: auto; margin: 6px 0; }
html.dark .inbox-msg-bubble pre { background: rgba(0,0,0,.35); }
.inbox-msg-bubble a { text-decoration: underline; }

/* 会话分组标题（今天/昨天/更早）：11px 大写，sticky 顶部 + 背景渐隐 */
.inbox-group-label {
    position: sticky; top: 0; z-index: 1;
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: #64748b; padding: 8px 8px 4px;
    background: linear-gradient(180deg, #ffffff 70%, rgba(255,255,255,0));
}
html.dark .inbox-group-label {
    color: #94a3b8;
    background: linear-gradient(180deg, rgb(30 41 59 / .95) 70%, rgba(30,41,59,0));
}

/* 预览两行截断（替代单行 truncate） */
.inbox-preview {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.45;
}

/* hover 操作（照 knowledge-actions 模式 console.css:1264-1276；移动端恒显） */
.inbox-item-actions {
    display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px;
    opacity: 0; transition: opacity var(--apple-duration-fast) var(--apple-ease);
}
.inbox-session-item:hover .inbox-item-actions,
.inbox-session-item:focus-within .inbox-item-actions { opacity: 1; }
.inbox-item-action {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--apple-radius-pill);
    background: transparent; color: #64748b; cursor: pointer;
    transition: background var(--apple-duration-fast) var(--apple-ease),
                color var(--apple-duration-fast) var(--apple-ease);
}
.inbox-item-action:hover { background: rgba(15,23,42,.06); color: var(--apple-accent); }
html.dark .inbox-item-action { color: #94a3b8; }
html.dark .inbox-item-action:hover { background: rgba(255,255,255,.08); color: #0a84ff; }
@media not all and (min-width: 1024px) {
    .inbox-item-actions { opacity: 1; }
}

/* 详情头（胶囊 + 标题 + 继续按钮）+ 移动端返回按钮 */
.inbox-detail-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-bottom: 10px; margin-bottom: 10px;
    border-bottom: var(--apple-border);
}
.inbox-back-btn {
    display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 12px;
    border: var(--apple-border-strong); border-radius: var(--apple-radius-pill);
    background: transparent; color: inherit; font-size: 12px; font-weight: 500;
    cursor: pointer; margin-bottom: 8px;
    transition: background var(--apple-duration-fast) var(--apple-ease);
}
.inbox-back-btn:hover { background: rgba(120,120,128,.08); }

/* Spotlight 搜索浮层：深浅卡 + --apple-shadow-lg + 滚动 */
.inbox-search-panel { box-shadow: var(--apple-shadow-lg); }

/* 频道栏未读蓝胶囊计数 */
.inbox-filter-count {
    display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
    margin-left: 6px; border-radius: var(--apple-radius-pill);
    font-size: 10px; font-weight: 600; line-height: 1;
    background: rgba(0,113,227,.10); color: var(--apple-accent);
}
html.dark .inbox-filter-count { background: rgba(10,132,255,.18); color: #0a84ff; }

/* WO-CHART-01 · 资产页净值卡「当前持仓占比条」调色板：
   颜色=静态事实走 class（面板区红队 #10c 禁 style 拼变量），宽度=动态数值走
   stkStyleNum 净化器内联；本文件在 TW-BUILD coverage 语料内，零构建依赖。 */
.stk-ratio-seg { display: block; height: 100%; }
.stk-ratio-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.stk-ratio-seg-0 { background: #10b981; }
.stk-ratio-seg-1 { background: #3b82f6; }
.stk-ratio-seg-2 { background: #f59e0b; }
.stk-ratio-seg-3 { background: #8b5cf6; }
.stk-ratio-seg-4 { background: #06b6d4; }
.stk-ratio-seg-5 { background: #ec4899; }
.stk-ratio-seg-6 { background: #14b8a6; }
.stk-ratio-seg-other { background: #64748b; }

/* ------------------------------------------------------------
   UI-005 布局整改（REQ-009「布局太丑」·2026-09-23）
   纯排版层：记忆页矢量 tab 的分节留白／热力格子描边／暗色对比度／移动端吸顶压缩。
   零行为改动、零新 tailwind 类（选择器全挂既有 id＋chat.html 既有类＋本文件自定类）。
   ------------------------------------------------------------ */

/* 1. 命中来源占比与热度日历同卡两节：补分隔与留白（原来挤成一坨） */
#memory-hit-viz > div > .mb-3 {
    padding-bottom: .75rem;
    border-bottom: 1px dashed rgba(148, 163, 184, .35);
    margin-bottom: .85rem !important;
}
html.dark #memory-hit-viz > div > .mb-3 { border-bottom-color: rgba(148, 163, 184, .22); }

/* 2. 热力格内描边（GitHub 式）：浅绿不再融进卡底。
   MEMRESP-001 改挂钩子：选择器**不再认像素字面**（旧形 `div[style*="width:11px"]` 在格宽
   由容器实宽算出后会静默失配＝暗色"无"格融回卡底），改认 memory.js 落的 data-memviz-* 契约。 */
html.dark #memory-hit-viz div[data-memviz-cell] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    border-radius: 2px;
}
/* 来源占比条轨道：暗色下同给内描边（同款改挂钩子） */
html.dark #memory-hit-viz [data-memviz-share-track] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}
/* 月度合计条轨道（MEMRESP-001 新块）：暗色下同给内描边，浅灰轨不融进卡底 */
html.dark #memory-hit-viz [data-memviz-month-track] {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

/* 3. 暗色对比度：口径/说明 10px 长文从 slate-500 提到 slate-400 同档 */
html.dark #memory-vector-caliber p,
html.dark #memory-hit-viz p,
html.dark #memory-hit-timeline p { color: #9ca3af; }

/* 4. 移动端（≤640px）：吸顶头再压一档；页签条拉满整行、三签均分防折行错位 */
@media (max-width: 640px) {
    #memory-tabs-bar { padding: .5rem .75rem .5rem !important; }
    #memory-tabs-bar .memory-tab-strip { width: 100% !important; }
    #memory-tabs-bar .memory-tab-strip .memory-tab { flex: 1 1 auto; text-align: center; }
}

/* ------------------------------------------------------------
   MEMRESP-001 · 记忆页图表自适应（REQ-009 第四次验收差距原话：『手机端不太明显；热力图
   过分做对齐；电脑端右边缺一半；建议自适应宽度和高度』·2026-09-24）
   分工＝宽度上限/格宽/轴长由 memory.js 按容器**实宽**算出（inline style＋data-memviz-* 契约），
   本文件只补三件 JS 侧拿不到的：统计卡随宽自动铺满、暗色月度条轨道描边、≤640px 阅读兜底。
   零新 tailwind 类（选择器全挂既有 id 与 data-* 契约＝tailwind 产物不重建）。
   ------------------------------------------------------------ */

/* 1. 记忆统计仪表盘：写死列数（grid-cols-2 / sm:grid-cols-3 / lg:grid-cols-6）在 1440 下
      右侧留半张空白、在 390 下把数字挤断行。改 auto-fit＋minmax＝列数随容器长、
      卡高随内容长（align-items:stretch 让同行卡等高，不再一高一矮假对齐）。 */
#memory-vector-stats,
#memory-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    align-items: stretch;
}
#memory-vector-stats > div,
#memory-stats > div { min-height: 4.25rem; }

/* 2. 命中热度卡内三段（日历／月度合计／说明）一律吃满可用宽：宽屏右侧空白换成信息 */
#memory-hit-viz [data-memviz-cal] { max-width: 100%; min-width: 0; }
#memory-hit-viz [data-memviz-scroll] { max-width: 100%; -webkit-overflow-scrolling: touch; }
#memory-hit-viz [data-memviz-months] { max-width: 100%; }

/* 3. ≤640px 阅读兜底：月度条与统计卡收一档（"手机端不太明显"的前两因＝格宽 11px 写死＋
      配色 0.28 太淡，已在 memory.js 侧治；这里治版式这最后一因）。 */
@media (max-width: 640px) {
    #memory-vector-stats > div,
    #memory-stats > div { min-height: 3.75rem; }
    #memory-hit-viz [data-memviz-month-row] { gap: 4px; }
}

/* =====================================================================
   A77 UI-刀2 · 对话页设计落地层（v1.0 · 2026-11-01）
   ---------------------------------------------------------------------
   票面：tickets-a77/A77-UI-刀2-对话页-票面.md §1
   设计：tickets-a77/A77-UI-0-设计定稿.md §1–§4（§7 升格映射表为准绳）
   方向：tickets-a76/A76-uiux-direction.md §1、§5、§10

   家法三条（验收件 tests/web_ui/a77_ui2_chat_design_assert.mjs 机判）：
   ① 只换样式层：本层零 DOM 改动、零 JS 改动、零文案改动；选择器全挂既有
      id/class（#view-chat 域内六类可视组件），零新增类名、零新 tailwind 类。
   ② 主题单轨：令牌只取名册（apple-tokens.css 的 --apple-* 族），本层**零自定义
      属性声明**、零预览件第二套前缀、零方括号主题属性、零暗色专用选择器——
      明暗差异全部由名册在面板暗色类下自行翻转承担（面板家法：一条轨，两个值）。
   ③ 间距 4px 基准：本层 padding/margin/gap 字面量一律 ∈ {0,4,8,12,16,24,32,48}。

   如实申报未做面（详见施工结论件「未证明边界」）：
   · 主色/强调色（预览件绿 vs 名册 Apple 蓝）＝设计定稿 §7.2 明列「须 Owner
     业务裁定」，本层零改；用户气泡渐变与欢迎屏渐变标题同属色彩面，一并留原状。
   · 圆角新档 14/18/22 属 §7.3「改基础 token 文件＝面板全局视觉变更＝另票」，
     本层只用名册 8/12/16 三档＋pill，不新造档位。
   · z 轴档位：chat.html 文末 M9 总表是冻结钉，本层零改。
   · 响应式/触控/安全区：归 chat-resp.css，本层不重复声明（防压掉 env() 回退）。
   ===================================================================== */

/* ==== A77-UI2-DESIGN-LAYER:BEGIN ==== */

/* 1. 阅读列（设计 §4：中央阅读列最大 768px）。消息行与任务卡同一列宽居中；
      <768px 时 max-width 不生效，移动端页边距仍由既有 px-4=16 承担。 */
#view-chat #chat-messages > .bot-message-group,
#view-chat #chat-messages > .user-message-group,
#view-chat #chat-messages > .ctk-zone {
    max-width: 768px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 2. 桌面页边距 32（设计 §1：桌面 32、窄屏 16）。只在 ≥768px 生效，
      <768px 保留既有 px-4=16，避免与 chat-resp.css 的窄屏规则打架。 */
@media (min-width: 768px) {
    #view-chat #chat-messages > .bot-message-group,
    #view-chat #chat-messages > .user-message-group {
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* 3. 消息气泡（设计 §3 卡片/§4 对话）：圆角归名册 card 档（16）、内距 16、
      正文 16/26、去投影——设计 §1「普通区域用底色与 1px 边线分层，浮层才用
      阴影」。暗色 overlay 6.2/6.3 以 !important 钉了 18px 非对称圆角与 14px 字，
      本层 id 选择器权重更高＋同为 !important ⇒ 后来者胜。 */
#view-chat .bot-message-group .msg-content,
#view-chat .user-message-group .msg-content {
    border-radius: var(--apple-radius-card) !important;
    padding: 16px !important;
    font-size: 16px !important;
    line-height: 26px !important;
    box-shadow: none !important;
}

/* 3.1 气泡内列表字号随正文（暗色 overlay 钉 14px；正文已 16 ⇒ 同块拉平） */
#view-chat .msg-content ul,
#view-chat .msg-content ol {
    font-size: 16px !important;
}

/* 3.2 代码块＝气泡内嵌卡：圆角归名册 panel 档（12），与气泡 16 分档 */
#view-chat .msg-content pre {
    border-radius: var(--apple-radius-panel);
}

/* 4. 输入区 composer（设计 §4：底部一个 composer 面板，最大宽与阅读列对齐）：
      768 居中＋顶内距 16＋hairline 上边线＋card 档上圆角＋轻投影抬升层次。
      为什么带 !important：本文件 7 段（`.border-t.bg-white`）在暗色下把同一个
      元素的 max-width 钉成 720px、padding-top 钉成 14px 且带 !important——
      不加同级 !important，暗色（默认主题）就停在 720/14、亮色才是 768/16，
      同一组件两套内距＝本票要治的"两张皮"。加后两主题同为 768/16。
      下内距（codex 门禁复核·甲 整改）：**保留既有暗色基线 14px**，再在其上叠加
      安全区 env()——整改前写 calc(12px + env()) 把暗色 14→12px（−2px，改变既有避让）。
      现形 env=0 ⇒ 14px（与整改前逐像素同值）；env≠0 ⇒ 14px + env（安全区真正生效）。 */
#view-chat .chat-composer {
    max-width: 768px !important;
    margin-left: auto;
    margin-right: auto;
    padding-top: 16px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: var(--apple-border) !important;
    border-radius: var(--apple-radius-card) var(--apple-radius-card) 0 0;
    box-shadow: var(--apple-shadow-sm);
}

/* 4.1 输入框（设计 §3 表单：控件圆角 8）。只改圆角——高度/内距/麦克风避让位
      归 chat-resp.css 与 console.js autoGrowChatInput，本层零声明防压掉避让。 */
#view-chat #chat-input {
    border-radius: var(--apple-radius-item);
}

/* 5.1 欢迎屏示例卡＝主卡档（设计 §3 信息卡 12–16；主卡取 16） */
#view-chat .example-card {
    border-radius: var(--apple-radius-card);
}

/* 5.2 对话任务卡（chat_task_card.js 注入的 .ctk-zone）：圆角取 panel 档（12，
      与模块内联值同值＝零视觉回退，只是改为名册引用）；内距 12→16 归 4px 档。
      注意：模块内联的边框/底色是 A76 暗色可见性冻结钉
      （test_a76_w1_chat_task_card::test_chat_task_card_scoped_container_style），
      本层**不碰颜色**，只补圆角/内距。 */
#view-chat .ctk-zone {
    border-radius: var(--apple-radius-panel);
    padding: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* 6. 抽屉（设计 §3 抽屉：桌面宽 440–480、圆角、浮层阴影、内距 24/16）。
      shell 三件＝宽/圆角/阴影，内件只有 header/body 内距；窄屏仍吃既有
      min(340px, 88vw) 兜底（本层 ≥768px 才放大）。 */
#chat-status-drawer {
    border-radius: var(--apple-radius-card) 0 0 var(--apple-radius-card);
    border-left: var(--apple-border);
    box-shadow: var(--apple-shadow-lg);
}

#chat-status-drawer .chat-status-drawer-header {
    padding: 16px 24px;
}

#chat-status-drawer .chat-status-drawer-body {
    padding: 24px;
}

@media (min-width: 768px) {
    #chat-status-drawer {
        width: min(440px, 92vw);
    }
}

/* ==== A77-UI2-DESIGN-LAYER:END ==== */

/* =====================================================================
   A77 UI-福仔-01 · 对话内计划卡设计落地层（v1.0 · 2026-11-01）
   ---------------------------------------------------------------------
   票面：tickets-a77/A77-UI-福仔-01-工单.md §二 页3
   设计：tickets-a77/A77-UI-0-设计定稿.md §3–§4（计划卡）＋
         ui-frontend-design/task-card.html＋README-实施映射.md
   落点说明：模块 chat_task_card.js 的 .ctk-zone 内联串被 A76 暗色可见性
   冻结钉（test_a76_w1_chat_task_card::test_chat_task_card_scoped_container_style）
   逐字节钉死，且确认区样式为 JS 内联——故本页样式全部经本作用域层覆盖，
   模块 DOM／digest-revision 校验链／收起展开／二次确认零改动（票面铁律 1）。

   家法同刀2 三条：
   ① 只换样式层：选择器全挂模块既有 class（.ctk-heading 等，零新增类名）。
   ② 主题单轨：令牌只取名册（--apple-* 族），零自定义属性、零方括号主题属性、
      零 html.dark 分支；颜色面零改动（正文色/状态色沿用既有，刀2 同口径）。
   ③ 间距 4px 基准＋圆角零字面 px：padding/margin/gap 字面量 ∈
      {0,4,8,12,16,24,32,48}；圆角只落 --apple-radius-*。
   限域：全部选择器挂 #view-chat（任务卡宿主＝#chat-messages，位于
   #view-chat 内；模块降级挂 body 时无样式覆盖＝与改造前同样形，不越界污染）。
   ===================================================================== */

/* ==== A77-UI3-DESIGN-LAYER:BEGIN ==== */

/* 1. 标题行（任务计划/运行卡）：15/650，层级在目标行之上（设计 §4 计划卡
      「默认紧凑摘要」；宽度/圆角/内距已由刀2 §5.2 承担，本节零重复声明）。 */
#view-chat #ctk-root .ctk-heading {
    font-size: 15px;
    font-weight: 650;
    line-height: 20px;
    margin: 0 0 8px;
}

/* 2. 目标行＝卡片主信息：14/600，长目标文本换行不溢出。 */
#view-chat #ctk-root .ctk-objective {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

/* 3. 明细行（交付要求/资料范围/能力与权限快照/预算摘要）：辅助 13/20；
      值为 JSON 长串——overflow-wrap 保证窄屏无横向溢出（票面页3 判据）。 */
#view-chat #ctk-root .ctk-deliverables,
#view-chat #ctk-root .ctk-scope,
#view-chat #ctk-root .ctk-capability,
#view-chat #ctk-root .ctk-budget {
    font-size: 13px;
    line-height: 20px;
    margin: 4px 0;
    overflow-wrap: anywhere;
}

/* 4. digest 校验行＝明确诊断区（设计 §4：校验数据保留在校验链和诊断区）：
      12/18 弱化层级，零截断零改值（只显示模块已给出的值）。 */
#view-chat #ctk-root .ctk-digest {
    font-size: 12px;
    line-height: 18px;
    margin: 8px 0 0;
    overflow-wrap: anywhere;
}

/* 5. 元信息行（授权/事件计数/结果摘要元行/找回提示）：12/18 辅助档。 */
#view-chat #ctk-root .ctk-meta,
#view-chat #ctk-root .ctk-events,
#view-chat #ctk-root .ctk-result-meta,
#view-chat #ctk-root .ctk-recovered {
    font-size: 12px;
    line-height: 18px;
    margin: 4px 0;
    overflow-wrap: anywhere;
}

/* 6. 运行卡状态行与失败行：14 正文档；失败文本换行。 */
#view-chat #ctk-root .ctk-state,
#view-chat #ctk-root .ctk-failure {
    font-size: 14px;
    line-height: 20px;
    margin: 4px 0;
    overflow-wrap: anywhere;
}

/* 7. 结果正文＝卡内嵌块：边线走名册 --apple-border（明暗自动翻转），
      圆角 item 档；模块内联的 max-height/overflow/pre-wrap 避让属性不覆盖
      （刀2·甲 教训：既有行为基线只叠加不改动）。 */
#view-chat #ctk-root .ctk-result {
    font-size: 14px;
    line-height: 22px;
    margin-top: 8px;
    padding: 12px;
    border: var(--apple-border);
    border-radius: var(--apple-radius-item);
    overflow-wrap: anywhere;
}

/* 8. 错误行：结构层级 13/600；颜色面零改动（状态色归属留 Owner，刀2 同口径）。 */
#view-chat #ctk-root .ctk-error {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 8px;
    overflow-wrap: anywhere;
}

/* 9. 动作组间距：确认/重新生成/收起/展开/暂不处理（.ctk-button）与取消（.ctk-cancel）
      逐枚 8px 间距＋换行各占一行余量；按钮圆角/配色由既有 tailwind 类与
      .ctk-confirm 内联承担，本节零染指（二次确认行为不变）。 */
#view-chat #ctk-root .ctk-button,
#view-chat #ctk-root .ctk-cancel {
    margin: 8px 8px 0 0;
}

/* 10. 收起态摘要行：文案与展开按钮同行，窄屏整体换行。 */
#view-chat #ctk-root .ctk-plan-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 20px;
    overflow-wrap: anywhere;
}

/* 11. 二次确认条内警告行：13/600 与后果文本同层级；确认框本体（背景/内距/
      圆角）为模块 JS 内联既有基线（--apple-warn 底＋8px 圆角＋8px 上边距），
      本节不覆盖，只排警告文本行。 */
#view-chat #ctk-root .ctk-warning {
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

/* 12. 工作台链接：13 辅助档＋换行，动作区下方独立行。 */
#view-chat #ctk-root .ctk-link {
    display: inline-flex;
    font-size: 13px;
    line-height: 20px;
    margin: 8px 8px 0 0;
    overflow-wrap: anywhere;
}

/* ==== A77-UI3-DESIGN-LAYER:END ==== */