/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #dbeafe;
    --bg: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-sidebar: #f1f5f9;
    --text: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    --success: #10b981;
    --warning: #f59e0b;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.08);
    --radius: 12px;
    --radius-sm: 8px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
}

.app-container {
    display: flex;
    height: calc(100vh - 52px);
    width: 100vw;
    overflow: hidden;
}

/* Sidebar */
/* ===== 顶部栏右侧：搜索 / 通知 / 头像（1.2 隐藏式布局） ===== */
.site-nav-right { display: flex; align-items: center; gap: 8px; position: relative; }
.nav-search { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 4px 12px; }
.nav-search-icon { font-size: 11px; opacity: .8; }
.nav-search input { background: transparent; border: none; outline: none; color: #fff; font-size: 13px; width: 160px; font-family: inherit; }
.nav-search input::placeholder { color: rgba(255,255,255,.5); }
.nav-icon-btn { position: relative; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.nav-icon-btn:hover { background: rgba(255,255,255,.18); }
.nav-badge { position: absolute; top: 2px; right: 4px; color: #ff5a5f; font-size: 12px; line-height: 1; }
.nav-dropdown { position: absolute; top: 46px; right: 0; min-width: 200px; background: #fff; color: #1a1a2e; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.16); padding: 8px; display: none; z-index: 1100; text-align: left; }
.nav-dropdown.open { display: block; }
.nav-dropdown-title { font-size: 13px; font-weight: 700; color: #1a2b4a; margin-bottom: 8px; }
.nav-dropdown-body { font-size: 13px; color: #64748b; line-height: 1.6; }
.nav-menu-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 10px 10px; font-size: 14px; color: #1a2b4a; cursor: pointer; border-radius: 8px; text-decoration: none; font-family: inherit; }
.nav-menu-item:hover { background: #f3f5fb; }

/* ===== 左栏：产品类（上下排列，固定左侧） ===== */
.left-panel {
    position: fixed;
    left: 0;
    top: 52px;
    width: 260px;
    height: calc(100vh - 52px);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 16px;
    overflow: hidden;
    z-index: 90;
}
.left-panel-header { margin-bottom: 16px; }
.left-panel-header .logo { margin-bottom: 12px; }
.left-panel-header .logo img { display: block; }
.left-panel-header .logo img.brand-strip { height: 36px; width: auto; }
/* 左栏 Logo 作为「返回首页」入口：button reset + 鼠标悬停反馈 */
.left-panel-header .logo-btn {
    display: block;
    width: 100%;
    padding: 4px 6px;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.18s, border-color 0.18s, transform 0.18s;
}
.left-panel-header .logo-btn:hover {
    background-color: rgba(255, 138, 0, 0.10);
    border-color: rgba(255, 138, 0, 0.35);
    transform: translateY(-1px);
}
.left-panel-header .logo-btn:active {
    transform: translateY(0);
    background-color: rgba(255, 138, 0, 0.18);
}
.left-panel-header .logo-btn:focus-visible {
    outline: 2px solid rgba(255, 138, 0, 0.55);
    outline-offset: 2px;
}
.site-nav .brand img.brand-strip { height: 26px; width: auto; vertical-align: middle; }

.left-panel-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.left-panel .panel-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 10px;
    letter-spacing: 0.3px;
}

.left-panel-footer {
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.left-panel-footer .footer-link {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: none;
    margin-top: 4px;
}
.left-panel-footer .footer-link:hover { color: var(--primary); }

/* ===== 中间：聊天主区（左右留空给两栏） ===== */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 260px;
    margin-right: 0;
    background: var(--bg);
    min-width: 0;
    overflow: hidden;
    padding-bottom: 8px;
}

/* 欢迎态：整组内容上移到顶，紧贴顶部导航，不沉底也不居中留白 */
.chat-main.welcome-mode { justify-content: flex-start; }
.chat-main.welcome-mode .chat-container { overflow: visible; padding: 0 20px; }
.chat-main.welcome-mode .messages { display: none !important; flex: none; height: 0; min-height: 0; padding: 0; margin: 0; }
.chat-main.welcome-mode .role-selector { min-height: auto; padding: 24px 20px; }
/* logo/标题上移到顶部，减少 welcome-screen 上方空白 */
.chat-main.welcome-mode .welcome-screen { padding: 4px 20px 10px; align-items: flex-start; }
.chat-main.welcome-mode .welcome-content { padding-top: 0; margin-top: 0; margin-bottom: 0; }
.chat-main.welcome-mode .welcome-logo { width: 120px; height: 120px; margin-bottom: 6px; }
.chat-main.welcome-mode .welcome-content h1 { font-size: 22px; margin-bottom: 2px; }
.chat-main.welcome-mode .welcome-desc { font-size: 14px; }
.chat-main.welcome-mode .input-area { padding-top: 4px; padding-bottom: 16px; }

/* ===== 右栏：服务类（顶部横向滚动，固定右上） =====
   注：车主板主服务滑动条已承载 8 栏目入口，右栏内容与之重复，按需求收起以拓宽中间区域。 */
.right-panel {
    display: none;
    position: fixed;
    right: 0;
    top: 52px;
    width: 280px;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border);
    padding: 10px 12px;
    z-index: 90;
}
.right-panel-header { margin-bottom: 10px; }
.right-panel-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.3px;
}
.service-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}
.service-scroll .service-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 18px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.service-scroll .service-chip:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}
.service-scroll .service-chip .chip-icon { font-size: 16px; line-height: 1; }
.service-scroll .service-chip .chip-text { font-weight: 500; }

/* ===== 右侧服务栏：滑动切换控件 ===== */
.service-scroll-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.service-scroll-arrow {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-scroll-arrow:hover { background: var(--primary-light); color: var(--primary-dark); }
.service-scroll-arrow:disabled { opacity: 0.3; cursor: default; }
.service-scroll-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    padding-right: 16px;
}
.service-scroll-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: all 0.2s;
}
.service-scroll-dots .dot.active { background: var(--primary); width: 14px; border-radius: 3px; }

/* ===== 中间聊天区顶部：服务快捷滑动条（WorkBuddy 式，可收起） ===== */
.chat-service-bar {
    position: sticky;
    top: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(6px);
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.chat-service-bar.collapsed {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}
.chat-service-bar.collapsed .chat-service-toggle {
    position: fixed;
    right: 12px;
    top: 68px;
    transform: translateY(0) rotate(180deg);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.chat-service-toggle {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.chat-service-toggle:hover { background: var(--primary-light); color: var(--primary-dark); }
.chat-service-scroll-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
}
.chat-service-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.chat-service-scroll::-webkit-scrollbar { display: none; }
.chat-service-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 18px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.chat-service-chip:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}
.chat-service-chip .chip-icon { font-size: 16px; line-height: 1; }
.chat-service-chip .chip-text { font-weight: 500; }

/* 欢迎屏内的服务条：位于 LOGO 下方，不 sticky，居中滑动 */
.welcome-content .chat-service-bar {
    position: static;
    top: auto;
    z-index: auto;
    justify-content: center;
    background: transparent;
    border-bottom: none;
    backdrop-filter: none;
    padding: 12px 0 0;
    margin: 0 auto;
    max-width: 100%;
}
.welcome-content .chat-service-scroll-wrap {
    flex: 0 1 auto;
    max-width: 100%;
}

/* ===== 主服务滑动条：左箭头 + 横向滑动区 + 右箭头，紧接问答区上方 ===== */
.main-service-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--bg);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.main-service-arrow {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
    z-index: 2;
}
.main-service-arrow:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    transform: scale(1.08);
}
.main-service-arrow:active { transform: scale(0.95); }
.main-service-arrow:disabled { opacity: 0.25; cursor: default; transform: none; box-shadow: none; }
.main-service-arrow:disabled:hover { background: var(--bg-secondary); color: var(--text-secondary); border-color: var(--border); }
.main-service-scroll-wrap {
    flex: 1;
    min-width: 0;
    max-width: 1000px;
    overflow: hidden;
    position: relative;
}
.main-service-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.main-service-scroll::-webkit-scrollbar { display: none; }
.main-service-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.2s, background 0.2s, box-shadow 0.25s;
    white-space: nowrap;
}
.main-service-chip:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
    transform: translateY(-3px) translateX(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}
.main-service-chip:active {
    transform: translateY(-1px) translateX(-1px);
}
.main-service-chip .chip-icon { font-size: 16px; line-height: 1; }
.main-service-chip .chip-text { font-weight: 500; }

.sidebar-header {
    margin-bottom: 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.logo-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.5px;
}

.logo-sub {
    font-size: 16px;
    color: var(--text-muted);
    margin-left: 38px;
}

.role-badge {
    display: inline-block;
    margin-top: 8px;
    margin-left: 38px;
    padding: 4px 10px;
    background: var(--primary);
    color: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    width: fit-content;
}

.sidebar-section {
    margin-bottom: 20px;
}

.sidebar-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.quick-questions .quick-btn {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 16px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

.quick-questions .quick-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary-dark);
}

.settings .setting-item {
    margin-bottom: 14px;
}

.settings label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.settings input[type="password"],
.settings select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 16px;
    background: white;
    color: var(--text);
}

.settings input[type="password"]:focus,
.settings select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.settings small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.switch-role-btn {
    width: 100%;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--primary);
    border-radius: var(--radius-sm);
    font-size: 16px;
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s;
}

.switch-role-btn:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.settings {
    margin-top: auto;
}

.settings .setting-item:last-child {
    margin-bottom: 0;
}

.sidebar-footer {
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.sidebar-footer p {
    font-size: 16px;
    color: var(--text-muted);
}

.sidebar-footer .copyright {
    font-size: 12px;
    margin-top: 2px;
    opacity: 0.7;
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg);
}

.mobile-header {
    display: none;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    gap: 12px;
}

.current-role-tag {
    margin-left: auto;
    padding: 4px 10px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: none;
}

.menu-toggle {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text);
    padding: 4px;
}

.mobile-title {
    font-weight: 600;
    font-size: 16px;
}

/* Chat Container：默认收起（flex:0 0 auto），首屏/欢迎态输入框紧跟内容下方而不沉底；
   仅进入对话（chat-mode 或 messages.active）才撑满并滚动。这样即便 welcome-mode 因 JS 异常未挂上，布局也正确。 */
.chat-container {
    flex: 0 0 auto;
    overflow-y: auto;
    padding: 0 20px;
    min-height: 0;
}
.chat-main.chat-mode .chat-container,
.chat-main:has(.messages.active) .chat-container {
    flex: 1;
}

/* Role Selector */
.role-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--bg);
}

.role-selector-content {
    text-align: center;
    max-width: 560px;
}

.role-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px;
    display: block;
}

/* 首屏品牌横幅：WB 角色 + 车小得橙底白字（2026-08-22 上线；2026-08-27 方案A：480→360 缩 25% 防抢戏） */
.hero-banner {
    width: 100%;
    max-width: 360px;
    height: auto;
    border-radius: 0;
    margin: 0 auto 18px;
    display: block;
    box-shadow: none;
}

@media (max-width: 480px) {
    .hero-banner { max-width: 100%; border-radius: 0; }
}

.role-selector-content h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.role-desc {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 8px;
}

.role-sub {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.role-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.role-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 32px 24px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.role-card:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.role-icon {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 12px;
}

.role-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.role-intro {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Welcome Screen：轻量顶部展示 */
.welcome-screen {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 0;
    padding: 48px 20px 16px;
}

.welcome-content {
    text-align: center;
    max-width: 720px;
    width: 100%;
}

.welcome-logo {
    width: 180px;
    height: 180px;
    border-radius: 0;
    object-fit: cover;
    margin: 0 auto 14px;
    display: block;
    box-shadow: none;
}

.welcome-content h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.brand-slogan {
    font-family: "ChexiaodeXingshu","Kaiti SC","KaiTi","楷体",cursive;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #FF6A00;
    margin-bottom: 10px;
}

.welcome-desc {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.welcome-sub {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

/* News Section */
.news-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 28px;
    text-align: left;
}

.news-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
}

.news-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
}

.news-tabs {
    display: flex;
    gap: 8px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.news-tab {
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: white;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.news-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.news-tab:hover:not(.active) {
    border-color: var(--primary);
    color: var(--primary);
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.news-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

.news-index {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    margin-top: 2px;
}

.news-body {
    flex: 1;
    min-width: 0;
}

.news-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.news-tag {
    padding: 2px 8px;
    background: var(--primary-light);
    color: var(--primary-dark);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.news-source {
    font-size: 12px;
    color: var(--text-muted);
}

.news-cat {
    font-size: 16px;
    font-weight: 700;
    color: #1565C0;
    line-height: 1.4;
    margin-bottom: 4px;
}

.news-cat-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

.news-item-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 4px;
}

.news-item-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.news-item-summary {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
}

.news-tip {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 14px;
}

.welcome-cards {
    display: block;
    max-width: 720px;
    margin: 0 auto;
}

/* 移动端热门提问横滑条：桌面端隐藏，移动端显示为可横滑胶囊 */
.welcome-quick-wrap {
    display: none;
}

.welcome-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.welcome-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-icon {
    font-size: 32px;
    margin-bottom: 8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

/* 产品导航（左栏单列上下排列） */
.product-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}
.product-card:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}
.product-icon { font-size: 18px; line-height: 1; }
.product-text {
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 服务卡片按热度分层 */
.service-tier { margin-bottom: 18px; }
.service-tier-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-align: left;
}
.service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.service-tier-top .service-tier-title { color: var(--primary); }
.service-tier-top .welcome-card {
    border-color: var(--primary-light);
    background: var(--primary-light);
}

/* 移动端产品区（桌面端隐藏） */
.welcome-product-wrap { display: none; }
.welcome-product-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
    margin: 24px 0 10px;
}
.welcome-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.welcome-product-grid .product-card {
    font-size: 13px;
    padding: 10px 8px;
    justify-content: center;
}

/* Messages */
.messages {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 20px 0;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.messages.active {
    display: flex;
}

.message {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    animation: fadeIn 0.3s ease;
}

.message.user {
    background: var(--bg-secondary);
}

.message.assistant {
    background: transparent;
}

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

.message-avatar {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
    background: transparent;
}

.message.user .message-avatar {
    background: transparent;
}

.message.assistant .message-avatar {
    background: transparent;
}

.message-content {
    flex: 1;
    min-width: 0;
}

.message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.message-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.message-time {
    font-size: 12px;
    color: var(--text-muted);
}

.message-body {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text);
    white-space: pre-wrap;
}

.message-body p {
    margin-bottom: 8px;
}

.message-body p:last-child {
    margin-bottom: 0;
}

.message-body ul, .message-body ol {
    margin-left: 20px;
    margin-bottom: 8px;
}

.message-body li {
    margin-bottom: 4px;
}

.message-body strong {
    color: var(--primary-dark);
}

/* 一级/二级标题：大章节 */
.message-body h1,
.message-body h2 {
    font-weight: 700;
    color: var(--primary-dark);
    margin-top: 20px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2.5px solid var(--primary);
}

.message-body h1 {
    font-size: 1.4em;
}

.message-body h2 {
    font-size: 1.25em;
}

/* 三级标题（###）：大章节 */
.message-body h3 {
    font-weight: 700;
    color: var(--primary);
    margin-top: 18px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--primary);
    font-size: 1.15em;
    background: linear-gradient(90deg, var(--primary-light, #e8f0fe) 0%, transparent 100%);
    padding: 6px 10px;
    border-radius: 4px;
}

/* 四级标题（####）：小节标题 */
.message-body h4 {
    font-weight: 600;
    color: var(--primary-dark);
    margin-top: 14px;
    margin-bottom: 8px;
    padding-left: 12px;
    border-left: 4px solid var(--primary);
    font-size: 1.05em;
}

.message-body ol {
    margin-left: 20px;
    margin-bottom: 8px;
}

.message-body ol li {
    margin-bottom: 6px;
}

.message-body ol li strong {
    color: var(--primary-dark);
}

/* 有序列表内嵌套无序列表 */
.message-body ol > li > ul {
    margin-top: 4px;
    margin-bottom: 0;
    margin-left: 20px;
    padding-left: 0;
}

.message-body ol > li > ul > li {
    margin-bottom: 3px;
    font-size: 0.95em;
}

/* 表格样式 */
.message-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.95em;
}

.message-body th,
.message-body td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.message-body th {
    background-color: var(--bg-secondary);
    font-weight: 600;
}

/* Loading */
.loading-dots {
    display: flex;
    gap: 4px;
    padding: 8px 0;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Input Area */
.input-area {
    padding: 10px 24px 16px;
    border-top: none;
    background: var(--bg);
}

.input-box {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 16px 22px;
    min-height: 96px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-box:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.input-box textarea {
    flex: 1;
    border: none;
    background: transparent;
    resize: none;
    font-size: 16px;
    line-height: 1.6;
    padding: 8px 0;
    min-height: 56px;
    max-height: 220px;
    font-family: inherit;
    color: var(--text);
    outline: none;
}

.input-box textarea::placeholder {
    color: var(--text-muted);
}

.send-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.send-btn:hover {
    background: var(--primary-dark);
}

.send-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.input-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
}

.input-hint span {
    color: var(--primary);
    font-weight: 500;
}

/* Web Search Button */
.web-search-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    font-size: 16px;
}

.web-search-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.web-search-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Quick Add (+) Button — 1.3 多用途快捷入口 */
.quick-add-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    box-shadow: 0 3px 10px rgba(37,99,235,0.28);
}

.quick-add-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(37,99,235,0.35);
}

.quick-add-menu {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    min-width: 196px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
    padding: 6px;
    z-index: 200;
    display: none;
    animation: slideUp 0.18s ease-out;
}

.quick-add-menu.open {
    display: block;
}

.qa-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    transition: background 0.15s;
}

.qa-item:hover {
    background: var(--primary-light);
}

.qa-ico {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.qa-label {
    font-weight: 500;
}

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

/* News Modal */
.news-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.news-modal.show {
    display: flex;
}

.news-modal-content {
    background: var(--bg);
    border-radius: var(--radius);
    max-width: 680px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative;
}

.news-modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.news-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.5;
    padding-right: 40px;
}

.news-modal-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.news-modal-meta .news-date {
    font-size: 13px;
    color: var(--text-muted);
}

.news-modal-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-muted);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.news-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text);
}

.news-modal-body {
    padding: 24px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text);
}

/* 文末固定日期标记，强化品牌感 */
.news-modal-footer {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.news-modal-body p {
    margin-bottom: 12px;
}

.news-modal-body h3,
.news-modal-body h4 {
    margin-top: 18px;
    margin-bottom: 10px;
}

/* 新闻子标题（如「连锁扩张态势：」「对独立售后的冲击：」）彩色加粗标注 */
.news-subheading {
    display: inline-block;
    color: var(--primary, #1565C0);
    font-weight: 700;
    background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
    padding: 1px 8px;
    border-radius: 3px;
    line-height: 1.9;
}

.news-modal-body ul,
.news-modal-body ol {
    margin-left: 20px;
    margin-bottom: 12px;
}

.news-modal-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.95em;
}

.news-modal-body th,
.news-modal-body td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    vertical-align: top;
}

.news-modal-body th {
    background-color: var(--bg-secondary);
    font-weight: 600;
}

/* News Images */
.news-thumb {
    flex-shrink: 0;
    width: 144px;
    height: 96px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-hover);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.news-thumb:hover img {
    transform: scale(1.05);
}

.news-modal-img {
    width: 100%;
    margin-bottom: 16px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-hover);
    text-align: center;
}

.news-modal-img img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    display: block;
}



/* News 文字海报（image空或加载失败时显示）：渐变背景+标题关键词+角标，彻底解决"无图空白" */
.news-textcard {
    width: 104px;
    height: 72px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    cursor: pointer;
    transition: transform 0.2s;
}
.news-textcard:hover { transform: scale(1.03); }
.news-textcard-key {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    padding: 0 8px;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.20);
    letter-spacing: 0.5px;
    max-width: 92px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-textcard-corner {
    position: absolute;
    right: 4px;
    bottom: 3px;
    font-size: 9px;
    color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.18);
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 1px;
}

/* 新闻更新日期条（断层透明化：标明更新日，过期提示刷新时间） */
.news-date-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 10px;
    font-size: 13px;
    color: #555;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 6px;
}
.news-date-bar b { color: #222; font-weight: 600; }
.news-fresh { color: #18a058; font-size: 12px; }
.news-stale { color: #e6a23c; font-size: 12px; }

/* Modal Color Banner */
.news-modal-banner {
    width: calc(100% + 48px);
    margin: -24px -24px 16px -24px;
    padding: 24px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 16px 16px 0 0;
}

.news-modal-banner-emoji {
    font-size: 48px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.news-modal-banner-text {
    color: white;
}

.news-modal-banner-tag {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 2px;
}

.news-modal-banner-source {
    font-size: 13px;
    opacity: 0.85;
}

/* 弹窗图片遮罩层 - 让文字在背景图上清晰可见 */
.news-modal-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    border-radius: 16px 16px 0 0;
}

.news-modal-banner {
    position: relative;
}

/* 有背景图时，文字容器需要相对定位 */
.news-modal-banner-text {
    position: relative;
    z-index: 1;
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .left-panel {
        position: fixed;
        left: 0;
        top: 0;
        width: 280px;
        height: 100vh;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .left-panel.open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    }

    .left-panel-mask {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }
    .left-panel-mask.open {
        opacity: 1;
        visibility: visible;
    }

    .chat-main {
        margin-left: 0;
        margin-right: 0;
    }

    .right-panel {
        display: none;
    }

    .mobile-header {
        display: flex;
    }

    .role-cards {
        grid-template-columns: 1fr;
    }

    .news-header {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        position: static;
    }

    .news-tabs {
        position: static;
        top: auto;
        right: auto;
        transform: none;
    }

    .chat-container {
        padding: 16px 12px 0;
    }

    .welcome-screen {
        padding: 32px 12px 12px;
    }

    .welcome-logo {
        width: 120px;
        height: 120px;
    }

    .welcome-content h1 {
        font-size: 26px;
    }

    .welcome-desc {
        font-size: 15px;
    }

    .main-service-bar {
        padding: 6px 12px;
        gap: 8px;
    }
    .main-service-arrow {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
    .main-service-chip {
        padding: 7px 12px;
        font-size: 13px;
    }

    .message {
        padding: 12px;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===== 用户反馈按钮 ===== */
.msg-feedback {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.fb-hint {
    color: var(--text-muted);
    margin-right: 4px;
}

.fb-btn {
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 16px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    color: var(--text);
}

.fb-btn:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: scale(1.05);
}

.fb-btn:active {
    transform: scale(0.95);
}

.fb-done {
    color: var(--text-muted);
    font-size: 13px;
    padding: 4px 0;
}

/* ===== 1.2 移动端：隐藏顶栏搜索与边缘把手（移动端用汉堡菜单） ===== */
@media (max-width: 768px) {
    .nav-search { display: none; }
    .edge-rail { display: none !important; }
}

/* ===== 1.4 车主后台 · 提醒区 ===== */
.drawer-reminders { margin-bottom: 4px; }
.dr-item { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #eef0f5; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.dr-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.dr-body { flex: 1; min-width: 0; }
.dr-name { font-size: 13px; font-weight: 600; color: #1A2B4A; }
.dr-desc { font-size: 12px; color: #64748B; margin-top: 2px; line-height: 1.4; }
.dr-empty { font-size: 12px; color: #999; }

/* ===== 22:3x 补回 17:2x PC 极简（style-20260827a.css 漏掉）===== */
.nav-menu-toggle { display: none; }
.site-nav-right { display: none; }
@media (max-width: 768px) {
    .nav-menu-toggle { display: inline-block; }
    .site-nav-right { display: flex; align-items: center; gap: 8px; }
}

/* ===== 2026-08-26 22:5x 复原补丁：HY3 事故丢失的车主宝典/抽屉/qa 增量（源: style-20260826g.css） ===== */
.qa-item-disabled,
.qa-item-disabled:hover {
    cursor: not-allowed;
    background: transparent;
}
/* 未选身份时 + 菜单引导项 */
.qa-hint {
    font-size: 12px;
    color: var(--text-muted);
    padding: 8px 12px 4px;
    line-height: 1.5;
}

.qa-choose {
    color: var(--primary);
    font-weight: 600;
}
/* ===== 车主宝典（2026-08-27）：与用品百科视觉区分 + 工具结果抽屉 ===== */
.tool-card {
  position: relative;
  border-left: 3px solid var(--primary, #2563eb);
  background: #F4F8FF;
}
.tool-card:hover {
  background: #E9F2FF;
  border-color: var(--primary, #2563eb);
}

/* 工具表单选项 chips */
.tool-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tool-opt {
  font-size: 13px; padding: 6px 12px; border: 1px solid #d8dee8; border-radius: 16px;
  background: #fff; color: #444; cursor: pointer; user-select: none; transition: all .15s;
}
.tool-opt:hover { border-color: var(--primary, #2563eb); }
.tool-opt.active { background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; }

/* 工具结果抽屉（底部滑出，不进聊天区）
   🔒2026-08-29j：老板定调「手机操作全屏幕最舒服」——移动端 82vh → 92vh，与养车记录 sheet 拉齐。
   ⚠️ 只改这条基础规则（移动端生效）；PC 端由下方 @media (min-width:769px) 覆盖成
      max-height:none 的右侧悬浮卡片，**PC 代码一行未动、表现完全不变**。 */
.tool-result-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  max-height: 92vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  transform: translateY(100%); transition: transform .28s ease;
}
.tool-result-drawer.open { transform: translateY(0); }
.td-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #eef0f5; flex: 0 0 auto;
}
.td-title { font-size: 15px; font-weight: 600; color: #1A2B4A; }
.td-close { font-size: 13px; color: #888; cursor: pointer; }
.td-body { padding: 14px 18px; overflow-y: auto; flex: 1 1 auto; }
.td-loading { color: #888; font-size: 14px; padding: 20px 0; text-align: center; }
.td-error { color: #C0392B; font-size: 14px; padding: 16px 0; }
.td-md { font-size: 14px; line-height: 1.7; color: #1A2B4A; }
.td-md table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 13px; }
.td-md th, .td-md td { border: 1px solid #e3e3e3; padding: 6px 8px; text-align: left; }
.td-md th { background: #F4F8FF; font-weight: 600; }
.td-md ul, .td-md ol { padding-left: 20px; margin: 8px 0; }
.td-md li { margin: 4px 0; }
.td-disclaimer {
  margin-top: 14px; font-size: 12px; color: #98a2b3;
  border-top: 1px dashed #eee; padding-top: 10px; line-height: 1.5;
}
.td-footer {
  display: flex; gap: 12px; padding: 12px 18px;
  border-top: 1px solid #eef0f5; flex: 0 0 auto;
}
.td-btn {
  flex: 1; padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; border: none;
}
.td-btn-ghost { background: #F1EFE8; color: #444441; }
.td-btn-primary { background: linear-gradient(135deg, #FF6A00, #FF8F2E); color: #fff; }

/* ===== 车主宝典 · 工具通用居中弹窗（2026-08-29n 新增） =====
   老板定调：车主宝典所有项目（油耗·电耗 + 5 个 AI 工具）点击后都走屏幕中间弹窗，
   形态与记一笔逐条对齐：移动端底部 sheet（92vh + 顶部圆角 + grabber），
   PC 端 78vh 全圆角，内容区 overflow-y:auto 可内部上下滑动。
   ⚠️保留旧 .tool-result-drawer CSS（不再被 JS 引用），避免误删风险。 */
.tool-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 2000;
  display: flex; align-items: flex-end; justify-content: center;
}
.tool-card {
  position: relative; width: 100%; max-width: 420px; background: #fff;
  border-radius: 20px 20px 0 0; max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,.22); overflow: hidden; box-sizing: border-box;
}
.tool-grab { width: 36px; height: 5px; border-radius: 3px; background: #d8dce6; margin: 8px auto 2px; flex: none; }
.tool-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 18px 10px; flex: none; border-bottom: 1px solid #eef0f5;
}
.tool-head > span { font-size: 16px; font-weight: 600; color: #1a1a2e; }
.tool-x { background: none; border: none; font-size: 13px; color: #888; cursor: pointer; padding: 0; }
.tool-body { padding: 14px 18px; overflow-y: auto; flex: 1 1 auto; }
.tool-foot { display: flex; gap: 12px; padding: 12px 18px; border-top: 1px solid #eef0f5; flex: none; }
.tool-btn { flex: 1; padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; }
.tool-btn-ghost { background: #F1EFE8; color: #444441; }
.tool-btn-primary { background: linear-gradient(135deg, #FF6A00, #FF8F2E); color: #fff; }
@media (min-width: 769px) {
  .tool-modal { align-items: center; }
  .tool-card { max-height: 78vh; border-radius: 20px; box-shadow: 0 12px 48px rgba(0,0,0,.24); }
  .tool-grab { display: none; }
  .tool-head { padding-top: 16px; }
}

/* ===== 车主宝典 · 油耗·电耗实测（2026-08-29l 新增） =====
   🔒配色沿用记账分类色系：油 = 琥珀暖色，电 = 蓝色。 */
/* 🔒2026-08-29m：老板定调「放屏幕中间，类似记一笔中间一样」——
   外壳形态与记一笔 sheet 逐条对齐：移动端底部 sheet（92vh + 顶部圆角 + grabber），
   PC 端 78vh 全圆角卡片。⚠️完全不碰 .tool-result-drawer（其余 5 个 AI 工具在用）。 */
.en-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 2100;
  display: flex; align-items: flex-end; justify-content: center;
}
.en-card {
  position: relative; width: 100%; max-width: 420px; background: #fff;
  border-radius: 20px 20px 0 0; max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,.22); overflow: hidden; box-sizing: border-box;
}
.en-grab { width: 36px; height: 5px; border-radius: 3px; background: #d8dce6; margin: 8px auto 2px; flex: none; }
.en-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 18px 10px; flex: none; border-bottom: 1px solid #eef0f5;
}
.en-head > span { font-size: 16px; font-weight: 600; color: #1a1a2e; }
.en-x { background: none; border: none; font-size: 13px; color: #888; cursor: pointer; padding: 0; }
.en-body { padding: 14px 18px; overflow-y: auto; flex: 1 1 auto; }
.en-foot { display: flex; gap: 12px; padding: 12px 18px; border-top: 1px solid #eef0f5; flex: none; }
.en-btn { flex: 1; padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; }
.en-btn-ghost { background: #F1EFE8; color: #444441; }
.en-btn-primary { background: linear-gradient(135deg, #FF6A00, #FF8F2E); color: #fff; }
@media (min-width: 769px) {
  .en-modal { align-items: center; }
  .en-card { max-height: 78vh; border-radius: 20px; box-shadow: 0 12px 48px rgba(0,0,0,.24); }
  .en-grab { display: none; }
  .en-head { padding-top: 16px; }
}
.en-hd { font-size: 12px; color: #98a2b3; margin-bottom: 4px; }
.en-big { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 6px; }
.en-big b { font-size: 34px; font-weight: 600; line-height: 1.1; }
.en-big em { font-size: 13px; font-style: normal; color: #98a2b3; }
.en-t-fuel b { color: #BA7517; }
.en-t-elec b { color: #185FA5; }
.en-sub { font-size: 12px; color: #6b7280; margin-top: 8px; }
.en-km {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 10px; padding: 10px 12px; background: #f6f7f9; border-radius: 10px;
}
.en-km + .en-km { margin-top: 8px; }
.en-km span { font-size: 13px; color: #444441; }
.en-km b { font-size: 18px; font-weight: 600; color: #1A2B4A; }
/* 混动：成本结构三行，合计行用品牌橙强调 */
.en-km-total { background: #FFF1E6; }
.en-km-total span { color: #854F0B; }
.en-km-total b { color: #FF6A00; font-size: 20px; }
.en-tip {
  margin-top: 8px; font-size: 12px; color: #BA7517;
  background: #FAEEDA; border-radius: 8px; padding: 7px 10px; line-height: 1.5;
}
.en-price {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; font-size: 12px; color: #98a2b3;
}
.en-price b { font-weight: 400; color: #6b7280; }
.en-price u {
  margin-left: auto; text-decoration: none; color: #FF6A00;
  border: 1px solid #FFD9BC; border-radius: 7px; padding: 3px 10px; cursor: pointer;
}
.en-edit { margin-top: 10px; border-top: 1px dashed #eee; padding-top: 10px; }
.en-edit-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.en-edit-row:last-child { margin-bottom: 0; }
.en-edit-row > span { font-size: 12px; color: #98a2b3; width: 30px; flex: none; }
.en-edit-row u {
  text-decoration: none; font-size: 12px; color: #444441; background: #f6f7f9;
  border: 1px solid #e5e7eb; border-radius: 7px; padding: 5px 9px; cursor: pointer;
}
.en-edit-row u.on { background: #FFF1E6; border-color: #FF6A00; color: #FF6A00; }
.en-edit-row input {
  flex: 1; min-width: 90px; padding: 6px 9px; font-size: 13px;
  border: 1px solid #d8dee8; border-radius: 7px; outline: none;
}
.en-bad { padding: 10px 0; font-size: 14px; color: #C0392B; line-height: 1.6; }
.en-bad span { font-size: 12px; color: #98a2b3; }
.en-empty { text-align: center; padding: 14px 0 4px; }
.en-empty-t { font-size: 15px; font-weight: 600; color: #1A2B4A; }
.en-empty-d { margin-top: 6px; font-size: 13px; color: #6b7280; line-height: 1.6; }
.en-cta {
  margin-top: 14px; padding: 11px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #FF6A00, #FF8F2E); color: #fff; font-size: 14px; font-weight: 600;
}
.en-ref { margin-top: 16px; border-top: 1px dashed #eee; padding-top: 12px; }
.en-ref-t { font-size: 12px; color: #98a2b3; }
.en-ref-b { margin-top: 6px; }
.en-ref-b u { text-decoration: none; font-size: 13px; color: #185FA5; cursor: pointer; }

@media (min-width: 769px) {
  .tool-result-drawer {
    left: auto; right: 16px; width: 440px; top: 72px; bottom: 16px;
    max-height: none; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.2);
    transform: translateY(12px); opacity: 0; pointer-events: none; transition: all .25s ease;
  }
  .tool-result-drawer.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
}

/* ===== 记一笔中间弹窗（2026-08-28：与车主宝典 openTool 同位置） ===== */
.note-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 2100;
  display: flex; align-items: center; justify-content: center;
}
.note-modal-card {
  background: #fff; width: 360px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
  border-radius: 14px; padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
  box-sizing: border-box;
}
.note-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.note-modal-head span { font-size: 16px; font-weight: 600; color: #1a1a2e; }
.note-modal-x { background: none; border: none; font-size: 22px; color: #888; cursor: pointer; padding: 0; line-height: 1; }
.note-modal-field { margin-bottom: 12px; }
.note-modal-field label { display: block; font-size: 13px; color: #444; margin-bottom: 5px; font-weight: 500; }
.note-required { color: #ef4444; font-style: normal; font-weight: 400; }

/* ===== 2026-08-26 22:5x 第二轮复原：HY3 事故丢失的主服务条 2 层结构（flex-direction column + title/row 规则 + welcome-mode 收束）源 style-20260826g.css ===== */
/* 主区快捷服务条：仅在欢迎态显示，紧贴欢迎区与输入框 */
.chat-main:not(.welcome-mode) .main-service-bar { display: none !important; }
.chat-main.welcome-mode .main-service-bar { padding: 4px 20px; margin: 0; background: #f0f7ff; border-top: 1px solid #dbeafe; border-bottom: 1px solid #dbeafe; }

/* 主服务条：纵向 2 层（标题 + 左右箭头+滑动条），覆盖上面的单行 flex 简版 */
.main-service-bar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 6px 20px;
    background: var(--bg);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.main-service-title {
    flex: 0 0 auto;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: var(--primary-dark);
    margin: 0 0 2px;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.main-service-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
@media (max-width: 768px) {
    .main-service-bar { padding: 6px 12px; gap: 8px; }
    .main-service-title { font-size: 15px; }
}

/* ===== 2026-08-26 23:0x 第三轮复原：主服务条 chips 双排（原版 26g：flex-direction column + wrap + height 90px，chips 竖排满换列 = 视觉 2 排，好滑好找）。HY3 事故把 wrap 打成 nowrap 变单排 ===== */
.main-service-scroll {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    height: 90px;
}

/* ===== 2026-08-26 23:1x 输入区三件套：前后按钮缩小 + 未选身份灰态 + 有字后发送按钮高亮 ===== */
.input-box { transition: background 0.2s, opacity 0.2s; }

/* 未选身份时只灰按钮不动输入框（避免视觉误以为不可输入；用户能打字只是发不出） */
.input-box.role-required textarea {
    background: transparent;
    color: #6b7280;
}
/* 强行覆盖 .input-box:focus-within 的蓝边/光晕，防止视觉欺骗 */
.input-box.role-required,
.input-box.role-required:focus-within {
    border-color: #d1d5db !important;
    box-shadow: none !important;
}

/* 前后按钮（+快捷 / 发送）缩小到 32px，发送图标相应缩到 14px */
.quick-add-btn, .web-search-btn, .send-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
}
.send-btn svg { width: 14px; height: 14px; }
.quick-add-btn { font-size: 18px; line-height: 1; }

/* 发送按钮默认（disabled 态）：浅灰，与灰输入区协调 */
.send-btn:disabled {
    background: #d1d5db !important;
    color: #9ca3af !important;
    box-shadow: none;
    transform: none;
}
.send-btn:disabled:hover { transform: none; box-shadow: none; }

/* 有角色 + 有字 → 亮蓝 */
.send-btn.has-text:not(:disabled) {
    background: var(--primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.send-btn.has-text:not(:disabled):hover { background: var(--primary-dark) !important; }

/* ===== 2026-08-26 23:2x 输入区按钮钉底角 + 未选身份时＋/地球按钮置灰 ===== */
/* 三个按钮沉底：＋左底角、发送右底角（textarea 保持自身对齐不受影响） */
.quick-add-btn, .web-search-btn, .send-btn {
    align-self: flex-end;
    margin-bottom: -6px;
}
.input-box { padding-bottom: 12px; }

/* 未选身份：＋按钮从蓝改灰，地球按钮描边/图标也灰 */
.input-box.role-required .quick-add-btn {
    background: #d1d5db !important;
    color: #9ca3af !important;
    cursor: not-allowed;
    box-shadow: none;
}
.input-box.role-required .web-search-btn {
    border-color: #d1d5db !important;
    color: #b0b5bd !important;
    cursor: not-allowed;
}

/* ===== 2026-08-27 17:3x 手机版导航与滚动修复（全部在 @media ≤768px 内，PC 零改动）=====
   1) 手机端隐藏右上角搜索/铃铛/头像（.site-nav-right）
   2) LOGO 紧跟 ☰ 靠左（space-between 在右侧隐藏后会把 LOGO 推到最右）
   3) 欢迎页上下可滚动（原 overflow:visible + 外层锁死导致滑不动，改为内部滚动） */
@media (max-width: 768px) {
    .site-nav-right { display: none !important; }
    .nav-menu-toggle { display: none !important; }
    header.site-nav { justify-content: flex-start; gap: 14px; }
    .chat-main.welcome-mode .chat-container {
        overflow-y: auto;
        overflow-x: hidden;
        flex: 1 1 auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== 2026-08-28 B改良版：记一笔弹窗基础样式（补全，桌面/移动一致）===== */
.note-type-row { display: flex; gap: 8px; margin-bottom: 12px; }
.note-type {
    flex: 1; padding: 10px 6px; font-size: 13px; border: 1px solid #e3e3e3; background: #fff;
    border-radius: 9px; cursor: pointer; color: #555; font-family: inherit; transition: all .15s;
}
.note-type.active { border-color: #4a6cf7; background: #eef3ff; color: #4a6cf7; font-weight: 600; }
.note-input, .note-amt {
    width: 100%; box-sizing: border-box; padding: 10px 11px; font-size: 14px; font-family: inherit;
    border: 1px solid #e0e0e0; border-radius: 9px; color: #222; background: #fff; outline: none;
}
.note-input:focus, .note-amt:focus { border-color: #4a6cf7; box-shadow: 0 0 0 3px rgba(74,108,247,.12); }
.note-amt-row { display: flex; align-items: center; gap: 6px; }
.note-amt-row > span { color: #888; font-size: 14px; }
.note-amt-row input { flex: 1; width: auto; }
.note-add {
    width: 100%; margin-top: 6px; padding: 12px; font-size: 15px; font-weight: 600; font-family: inherit;
    border: none; border-radius: 10px; background: #4a6cf7; color: #fff; cursor: pointer; transition: background .15s;
}
.note-add:hover { background: #3f5ce0; }
.note-cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.note-cat-chip {
    font-size: 12px; padding: 5px 11px; border: 1px solid #e3e3e3; background: #fff; border-radius: 14px;
    color: #555; cursor: pointer; font-family: inherit; transition: all .15s;
}
.note-cat-chip.active { border-color: #4a6cf7; background: #eef3ff; color: #4a6cf7; font-weight: 600; }

/* 抽屉内快捷模板（方案C） */
.note-quick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.note-quick-label { font-size: 12px; color: #999; }
.note-quick-chip {
    font-size: 12px; padding: 5px 10px; border: 1px solid #e3e3e3; background: #fafbff;
    border-radius: 14px; color: #4a6cf7; cursor: pointer; text-decoration: none; font-family: inherit; transition: all .15s;
}
.note-quick-chip:hover { border-color: #4a6cf7; background: #eef3ff; }
.note-quick-chip:active { transform: scale(.96); }

/* 移动端：舒服自然（大点按区、16px 输入防 iOS 缩放） */
@media (max-width: 520px) {
    .note-modal-card { width: 100%; max-width: 94vw; padding: 16px; border-radius: 12px; }
    .note-modal-head span { font-size: 15px; }
    .note-type-row { gap: 6px; }
    .note-type { padding: 11px 4px; }
    .note-modal-field label { font-size: 13px; }
    #noteModalContent, #noteModalMileage, #noteModalAmount, #noteModalDueDate, #noteModalNext {
        font-size: 16px; padding: 11px 10px; min-height: 44px;
    }
    .note-add { font-size: 15px; padding: 13px; min-height: 46px; }
    .note-entry-btn { padding: 12px 0; font-size: 13px; }
    .note-quick-chip { padding: 7px 12px; }
}

/* ===== 记一笔：半屏卡片（2026-08-28 老板定稿） ===== */
.ns-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 2100;
  display: flex; align-items: flex-end; justify-content: center;
}
.ns-sheet {
  position: relative; width: 100%; max-width: 420px; background: #fff;
  /* 🔒2026-08-29i：老板定调「能提起来可以占屏幕」——半屏 62vh → 近乎全屏 92vh。
     留 8vh 顶部空隙是给 grabber（小横条）和下滑关闭手势留落点，也让车主看得出
     "这是浮起来的面板，不是整页跳走"。PC 端仍是 78vh 居中卡片（见下方 media query，不受影响）。 */
  border-radius: 20px 20px 0 0; max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,.22); overflow: hidden;
  box-sizing: border-box; transition: transform .18s ease;
}
.ns-grab { width: 36px; height: 5px; border-radius: 3px; background: #d8dce6; margin: 8px auto 2px; flex: none; touch-action: none; }
.ns-head { display: flex; align-items: center; gap: 8px; padding: 6px 16px 10px; flex: none; }
.ns-title { font-size: 16px; font-weight: 600; color: #1a1a2e; }
.ns-title.back { cursor: pointer; color: #4a6cf7; }
.ns-title.back::before { content: '‹ '; font-weight: 400; }
.ns-sum { margin-left: auto; font-size: 12px; color: #8a93a6; }
.ns-sum em { font-style: normal; color: #4a6cf7; cursor: pointer; font-weight: 500; }
.ns-x { background: #f5f6f9; border: 1px solid #e6e9f0; border-radius: 50%; width: 28px; height: 28px; font-size: 18px; color: #6b7383; cursor: pointer; padding: 0; line-height: 1; flex: none; display: flex; align-items: center; justify-content: center; }
.ns-x:active { background: #eceff5; }
/* 🔒2026-08-29k：顶部 tab 化导航。「我的记录」原本只是挤在合计文字里的一个蓝色 em
   （12px 灰字），老板反馈「真看不出」——核心复盘入口却零视觉身份。
   现在与「养车记录」并列成 tab。
   设计取舍：①用**下划线**而非 pill 底色——避免两个 tab 互抢注意力；
   ②**不做成按钮规格**——「切换视图」不是动作，做成大按钮会与底部「保存」抢主操作，
   还容易被误以为点了会保存/删除数据；③关闭按钮仍贴右，iOS/安卓双平台惯例。 */
.ns-tabs { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.ns-tab { position: relative; border: none; background: none; padding: 2px 0 6px; font-family: inherit;
  font-size: 15px; font-weight: 500; color: #8a93a6; cursor: pointer; white-space: nowrap; flex: none; }
.ns-tab.on { font-size: 16px; font-weight: 600; color: #1a1a2e; }
.ns-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px;
  background: #4a6cf7; border-radius: 2px; }
.ns-tab:active { opacity: .6; }
.ns-tab-badge { display: inline-block; min-width: 15px; height: 15px; line-height: 15px; text-align: center;
  background: #ef4444; color: #fff; font-size: 10px; font-style: normal; border-radius: 8px;
  padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.ns-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 8px; flex: 1 1 auto; }
.ns-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ns-cat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 2px; border: 1px solid #eceef3; background: #fff; border-radius: 12px;
  cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s;
}
.ns-cat i { font-style: normal; font-size: 19px; line-height: 1; }
.ns-cat span { font-size: 12px; color: #4a5160; }
.ns-cat.on { border-color: #4a6cf7; background: #eef3ff; }
.ns-cat.on span { color: #4a6cf7; font-weight: 600; }
.ns-more { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ns-more::-webkit-scrollbar { display: none; }
.ns-cat-s { flex: none; min-width: 62px; padding: 8px 6px; }

/* 🔒2026-08-30m：以下 5 条随「上次/本次 chip」结构一起下线，已确认前端零引用（死代码，删）
   .ns-mile / .ns-mile.open / .ns-mile-in（原展开动画容器）
   .ns-mile-top / .ns-mile-lb / .ns-mile-ok（原 chip 顶部行与"就是它"按钮）
   现由 .ns-milebar（顶部常驻当前里程行）取代。 */
.ns-req { color: #ef4444; font-style: normal; }
.ns-mile-row { display: flex; align-items: center; gap: 6px; border: 1px solid #eceef3; border-radius: 10px; padding: 0 10px; background: #fafbfd; }
.ns-mile-row:focus-within { border-color: #4a6cf7; box-shadow: 0 0 0 3px rgba(74,108,247,.1); }
.ns-mile-ipt { flex: 1; width: 100%; border: none; outline: none; background: transparent; font-size: 17px; padding: 11px 0; font-family: inherit; color: #1a1a2e; }
.ns-unit { font-size: 12px; color: #9aa2b1; flex: none; }
.ns-mile-hint { font-size: 11px; color: #a3aab8; margin: 6px 0 0; }
.ns-mile-hint.ok { color: #2e9e5b; }
.ns-mile-alt { display: inline-block; margin: 6px 0 0; border: 1px solid #d9e0ff; background: #f4f7ff; color: #4a6cf7; font-size: 12px; padding: 3px 10px; border-radius: 20px; cursor: pointer; font-family: inherit; }

.ns-amt-row { display: flex; align-items: center; gap: 6px; border-bottom: 1.5px solid #eceef3; padding: 4px 0 6px; margin-top: 12px; }
.ns-yen { font-size: 22px; color: #c3cede; font-weight: 600; }
.ns-amt { flex: 1; width: 100%; border: none; outline: none; font-size: 30px; font-weight: 600; color: #1a1a2e; padding: 6px 0; font-family: inherit; background: transparent; }
.ns-amt::placeholder { color: #dfe3ea; font-weight: 500; }

.ns-opts { display: flex; gap: 6px; margin-top: 12px; }
.ns-opt { border: 1px solid #eceef3; background: #fff; color: #6b7383; font-size: 12px; padding: 6px 11px; border-radius: 20px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ns-opt.on { border-color: #4a6cf7; background: #eef3ff; color: #4a6cf7; }
.ns-remark { display: none; width: 100%; margin-top: 8px; border: 1px solid #eceef3; border-radius: 10px; padding: 10px; font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; }
.ns-remark.open { display: block; }
.ns-datewrap { display: none; gap: 8px; align-items: center; margin-top: 8px; }
.ns-datewrap.open { display: flex; }
.ns-date { border: 1px solid #eceef3; border-radius: 10px; padding: 9px 10px; font-size: 14px; font-family: inherit; color: #1a1a2e; flex: 1; }
.ns-date-today { border: none; background: #f2f4f8; color: #6b7383; font-size: 12px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; }

.ns-foot { padding: 8px 16px calc(10px + env(safe-area-inset-bottom)); flex: none; border-top: 1px solid #f2f4f8; background: #fff; }
.ns-frow { display: flex; gap: 8px; }
.ns-clear { flex: 0 0 33%; background: #fff; border: 1px solid #d9dfeb; color: #6b7383; border-radius: 12px; padding: 13px 0; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ns-clear:active { background: #f5f6f9; }
.ns-save { flex: 1; background: #4a6cf7; color: #fff; border: none; border-radius: 12px; padding: 13px; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ns-save:active { background: #3f5ce0; }
.ns-toast {
  position: absolute; left: 16px; right: 16px; top: 56px; bottom: auto;
  background: #1f2430; color: #fff; font-size: 13px; padding: 9px 12px; border-radius: 10px;
  display: none; align-items: center; gap: 10px; z-index: 30;
}
.ns-toast.show { display: flex; }
.ns-toast span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-toast button { background: none; border: none; color: #7fa0ff; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 600; }

.ns-period { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ns-ptabs { display: flex; gap: 3px; background: #f2f4f8; border-radius: 9px; padding: 3px; flex: none; }
.ns-ptabs button { border: none; background: transparent; color: #6b7383; font-size: 12px; padding: 5px 11px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.ns-ptabs button.on { background: #fff; color: #1a1a2e; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.ns-rail { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ns-rb { border: none; background: #f2f4f8; color: #6b7383; width: 26px; height: 26px; padding: 0; border-radius: 7px; font-size: 14px; cursor: pointer; font-family: inherit; line-height: 1; flex: none; }
.ns-rb:disabled { opacity: .35; cursor: default; }
.ns-rt { font-size: 13px; font-weight: 600; color: #1a1a2e; cursor: pointer; min-width: 50px; text-align: center; }
.ns-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.ns-pick-i { border: 1px solid #eceef3; background: #fff; color: #4a5160; font-size: 12px; padding: 5px 11px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.ns-pick-i.on { border-color: #4a6cf7; background: #eef3ff; color: #4a6cf7; font-weight: 600; }
.ns-total { padding: 4px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.ns-total b { font-size: 26px; color: #1a1a2e; font-weight: 600; }
.ns-total span { font-size: 12px; color: #9aa2b1; }
.ns-bar-line { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: #f2f4f8; }
.ns-bar-line i { display: block; height: 100%; }
.ns-bar-lg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; font-size: 11px; color: #8a93a6; }
.ns-bar-lg span { display: flex; align-items: center; gap: 4px; }
.ns-bar-lg i { width: 7px; height: 7px; border-radius: 2px; display: block; }
.ns-todo { display: none; margin-top: 14px; border: 1px solid #eceef3; border-radius: 12px; padding: 10px 12px; }
.ns-todo.on { display: block; }
.ns-todo-hd { font-size: 13px; font-weight: 600; color: #1a1a2e; display: flex; align-items: center; }
.ns-todo-hd i { margin-left: auto; font-style: normal; color: #9aa2b1; font-size: 11px; font-weight: 400; }
.ns-close { background: #f5f6f9; border: 1px solid #e6e9f0; border-radius: 20px; color: #6b7383; font-size: 12px; padding: 6px 13px; cursor: pointer; font-family: inherit; flex: none; }
.ns-close:active { background: #eceff5; }
.ns-todo-list { margin-top: 4px; }
.ns-todo-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px dashed #f0f2f6; font-size: 13px; color: #4a5160; }
.ns-todo-row em { font-style: normal; font-size: 11px; color: #a3aab8; }
.ns-todo-row b { margin-left: auto; font-weight: 400; color: #4a6cf7; font-size: 12px; cursor: pointer; }
.ns-todo-form { display: none; gap: 6px; margin-top: 8px; }
.ns-todo-form.open { display: flex; }
.ns-todo-form input[type=text] { flex: 1; min-width: 0; border: 1px solid #eceef3; border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none; }
.ns-todo-form .ns-tdate { border: 1px solid #eceef3; border-radius: 8px; padding: 7px 6px; font-size: 12px; font-family: inherit; color: #4a5160; }
.ns-todo-form button { border: none; background: #4a6cf7; color: #fff; border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit; }
.ns-items { margin-top: 14px; padding-bottom: 6px; }
.ns-day { font-size: 12px; color: #8a93a6; padding: 10px 0 4px; display: flex; gap: 6px; align-items: baseline; }
.ns-day em { font-style: normal; font-size: 10px; color: #c3cede; }
.ns-item { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid #f5f6f9; }
.ns-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ns-it-main { flex: 1; min-width: 0; }
.ns-it-main span { font-size: 14px; color: #1a1a2e; display: flex; gap: 6px; align-items: baseline; }
.ns-it-main span em { font-style: normal; font-size: 11px; color: #a3aab8; }
.ns-it-main small { display: block; font-size: 11px; color: #9aa2b1; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-item b { font-size: 14px; color: #1a1a2e; font-weight: 600; }
.ns-item u { text-decoration: none; color: #c3cede; font-size: 16px; cursor: pointer; padding: 0 2px; flex: none; }
.ns-empty { text-align: center; color: #a3aab8; font-size: 13px; padding: 26px 0; line-height: 1.7; }
.ns-empty span { font-size: 11px; color: #c3cede; }

@media (min-width: 769px) {
  .ns-overlay { align-items: center; }
  .ns-sheet { max-height: 78vh; border-radius: 20px; box-shadow: 0 12px 48px rgba(0,0,0,.24); }
  .ns-grab { display: none; }
  .ns-head { padding-top: 16px; }
}

/* ===== 2026-08-29 养车记录改版 ===== */
.ns-tbar { display: none; background: #fffdf7; border: 1px solid #f3e7cd; border-radius: 11px; padding: 8px 11px; margin-top: 10px; }
.ns-tbar.on { display: block; }
.ns-tbar-hd { display: flex; align-items: center; font-size: 13px; font-weight: 600; color: #8a6a2b; cursor: pointer; }
.ns-tbar-hd em { font-style: normal; background: #4a6cf7; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 6px; font-weight: 600; }
.ns-tbar-hd i { margin-left: auto; font-style: normal; font-size: 11px; color: #b39158; font-weight: 400; }
.ns-tbar-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px dashed #f2e8d5; font-size: 13px; color: #4a5160; }
.ns-tbar-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-tbar-row em { font-style: normal; font-size: 11px; color: #a3aab8; flex: none; }
.ns-tbar-row b { margin-left: auto; font-weight: 400; color: #4a6cf7; font-size: 12px; cursor: pointer; flex: none; }
@keyframes nsflash { 0% { background: #ffe9a8; } 60% { background: #fff6dd; } 100% { background: transparent; } }
.ns-tbar-row.flash { animation: nsflash .9s ease; border-radius: 7px; }
/* 🔒2026-08-29h：待办点「完成」时整行淡出收起（0.28s），再真删刷新。
   目的不是防卡顿（行消失本身已是最强反馈），而是让用户看清"是哪一行没了"，避免怀疑点错行。 */
@keyframes nsleave { 0% { opacity: 1; max-height: 60px; } 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; } }
.ns-tbar-row.ns-leaving, .ns-todo-row.ns-leaving { animation: nsleave .28s ease forwards; overflow: hidden; pointer-events: none; }
.ns-tbar-form { display: flex; gap: 6px; margin-top: 7px; }
.ns-tbar-form input { flex: 1; min-width: 0; border: 1px solid #eceef3; border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; outline: none; }
.ns-tbar-form input:focus { border-color: #4a6cf7; }
.ns-tbar-form button { border: none; background: #4a6cf7; color: #fff; border-radius: 8px; padding: 7px 13px; font-size: 13px; cursor: pointer; font-family: inherit; flex: none; }

/* 🔒2026-08-30m：里程从「挂在加油/充电下的 chip」提升为顶部常驻的「当前里程」行。
   语义上里程是「车辆状态」不是「消费事件」，所以常驻在分类网格上方、不进分类网格。
   （旧的 .ns-mile-chip / 上次·本次两行 已随结构一并移除，样式同步删掉避免死代码） */
.ns-milebar { display: flex; align-items: center; gap: 10px; background: #f7f9ff; border: 1px solid #e3eaff; border-radius: 10px; padding: 9px 12px; }
.ns-milebar-main { flex: 1; min-width: 0; }
.ns-milebar-lb { font-size: 12px; color: #6b7383; }
.ns-milebar-val { display: flex; align-items: baseline; gap: 4px; margin-top: 1px; }
.ns-milebar-val b { font-size: 18px; font-weight: 600; color: #1a1a2e; }
.ns-milebar-u { font-size: 12px; color: #6b7383; }
.ns-milebar-btn { flex: none; border: 1px solid #c9d6ff; background: #fff; color: #4a6cf7; font-size: 12px; padding: 5px 12px; border-radius: 20px; cursor: pointer; font-family: inherit; }
.ns-mile-sub { font-size: 11px; color: #a3aab8; margin: 5px 0 0; }
.ns-mile-edit { max-height: 0; overflow: hidden; transition: max-height .2s ease; }
.ns-mile-edit.open { max-height: 210px; }
.ns-mile-edit .ns-mile-row { margin-top: 8px; }
/* 🔒2026-08-30m 铁律极窄豁免：本次油耗/电耗，一行纯文本结论。
   禁止图表、对比、趋势、预测——那些归车主宝典。缺数据时整行不显示（不占位）。 */
.ns-enbar { background: #f2f4f8; border-radius: 8px; padding: 7px 11px; font-size: 12px; color: #6b7383; margin: 0 0 10px; }

.ns-datebar { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; padding: 7px 0; cursor: pointer; }
.ns-datebar b { font-size: 14px; color: #1a1a2e; font-weight: 600; }
.ns-datebar span { font-size: 12px; color: #8a93a6; }
.ns-datebar i { font-style: normal; font-size: 10px; color: #c3cede; }
.ns-datebar.on b { color: #4a6cf7; }
.ns-remark-always { display: block; width: 100%; margin-top: 4px; border: 1px solid #eceef3; border-radius: 10px; padding: 10px; font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; background: #fff; }
.ns-remark-always:focus { border-color: #4a6cf7; box-shadow: 0 0 0 3px rgba(74,108,247,.1); }
.ns-cost-tag { font-style: normal; font-size: 11px; color: #6b7383; background: #f2f4f8; border-radius: 5px; padding: 2px 7px; flex: none; }