/**
 * Echo Sidebar - 莫代尔粉白重构版
 * Overrides the old sidebar styles in apps-styles.css
 */

/* ==================== 拟物风格变量系统（回响皮肤驱动） ====================
 * #echo-sidebar 是 #app-echo 子节点，皮肤变量 --echo-accent / --echo-tint-*
 * 级联进来。强调色家族绑皮肤变量（跟换肤实时变）；质感令牌(阴影/高光)与皮肤
 * 无关、照搬拟物稿；文字保持中性，避免浅色皮肤下文字消失。
 * 夜间在文件末尾 body.dark-mode/.night #echo-sidebar 段统一中和成黑灰。
 */
#echo-sidebar {
    /* ════════════════════════════════════════════════════════════════════
       侧边栏跟随【回响聊天界面】主题体系 = css/echo-nav-tags.css 的
       #app-echo[data-echo-theme="default/pure-white/oatmeal/mint/caramel/ash/custom"]
       这些变量(全实色)由 #app-echo 级联进本作用域(#echo-sidebar 是其 DOM 子节点)。
       echo-nav-tags 第 599 行设计注释明确：侧栏面板=卡片层、侧栏内层=底层。
       —— 故此处【不再覆盖】theme 已提供的变量(--bubble-me-bg / --bubble-me-text /
          --echo-inner-bg / --glass-bg / --bubble-other-bg / --navbar-border /
          --glass-border / --toggle-track-active / --sc-header-name-text /
          --topbar-name-color / --topbar-meta-color)，直接继承，换主题即跟随。
          只定义侧边栏【私有】令牌，并映射到 theme 基础令牌。
       ════════════════════════════════════════════════════════════════════ */
    --sb-warm-line: var(--navbar-border, rgba(0,0,0,0.05));
    --sb-warm-bg:   rgba(0,0,0,0.03);
    --sb-warm-hover: rgba(0,0,0,0.05);

    /* —— 关键别名：把组件层几十处遗留的 var(--echo-accent)(聊天列表 skin 色)
            在侧边栏作用域内【就地改指】聊天界面动作色，一处定义全量跟随主题。 —— */
    --echo-accent:           var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --echo-accent-text:      var(--dock-send-icon-color, #ffffff);
    /* 同理把遗留的紫芋/莫兰迪蓝/危险深色按钮文字色也改指主题动作色 */
    --icon-taro:             var(--dock-send-bg, var(--bubble-me-bg, #6b4e58));
    /* 「千面/persona」徽章紫 + 导航文字也跟主题，不再写死紫/蓝 */
    --badge-purple:          var(--dock-send-bg, var(--bubble-me-bg, #9c7bb5));
    --nav-text:              var(--topbar-name-color, #2C2A29);

    /* —— 强调色：用聊天界面的「深色动作色」--dock-send-bg(发送键/开关色)。
            填充按钮 / 开关 on / tab active / chip active / 照影卡 全跟它。 —— */
    --accent:                var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --bubble-me-bg:          var(--dock-send-bg, #2C2A29);
    --bubble-me-text:        var(--dock-send-icon-color, #ffffff);
    --switch-on-bg:          var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --tab-active-color:      var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --sc-chip-active-bg:     var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    /* 星轨【子面板底】= 浅色底层(非动作色)；星轨【入口卡】另用 --bubble-me-bg 深色，
       两者分开，避免子面板底变深、其内浅色深字不可读。 */
    --startrack-bg:          var(--echo-inner-bg, #f7f5f6);

    /* —— 表面：双层模型直接套用聊天界面令牌 ——
            外壳/滚动区/子面板底 = --echo-inner-bg(每主题的实色底层色调,跟主题)
            卡片/对方气泡/子面板卡 = --glass-bg(=卡片层,实色白)
            输入框 = --dock-input-bg(底层色调) —— */
    --sp-body-bg:            var(--glass-bg, #ffffff);
    --sp-back-bg:            var(--echo-inner-bg, #f5f4f1);
    --sp-input-bg:           var(--dock-input-bg, var(--echo-inner-bg, #f5f4f1));
    --sc-header-border-color:var(--navbar-border, rgba(0,0,0,0.08));

    /* —— 文字：跟聊天界面 topbar 文字色 —— */
    --text-main: var(--topbar-name-color, #2C2A29);
    --text-primary: var(--topbar-name-color, #2C2A29);
    --me-text: var(--topbar-name-color, #2C2A29);
    --topbar-text: var(--topbar-name-color, #2C2A29);
    --topbar-sub: var(--topbar-meta-color, #8C8580);
    --text-sub: var(--topbar-meta-color, #8C8580);
    --text-secondary: var(--topbar-meta-color, #8C8580);
    --text-muted: var(--topbar-meta-color, #b3aca7);
    --text-subtle: var(--topbar-meta-color, #b3aca7);
    --sp-back-color: var(--topbar-meta-color, #8C8580);
    --sp-back-hover-color: var(--topbar-name-color, #2C2A29);
    --sp-title-color: var(--topbar-name-color, #2C2A29);
    --sp-input-color: var(--topbar-name-color, #2C2A29);

    /* —— 圆角 + 拟物质感令牌（与皮肤无关，照搬拟物稿） —— */
    --glass-radius: 24px;
    --toggle-track: rgba(0,0,0,0.06);
    --shadow-bevel: inset 0 2px 4px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,1);
    --shadow-embed: inset 0 2px 5px rgba(0,0,0,0.12), 0 1px 1px rgba(255,255,255,0.9);
    --glass-reflection: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.05) 100%);
    --btn-highlight: linear-gradient(180deg, #FFFFFF 0%, #F0F0F0 100%);
    --shadow-pop: 0 12px 30px rgba(0,0,0,0.1), inset 0 1px 1px #fff;
    --glass-shadow: 0 6px 20px rgba(0,0,0,0.025);
    --echo-sidebar-shadow: -15px 0 50px rgba(0,0,0,0.08);
    --echo-sidebar-border: var(--echo-tint-border, rgba(0,0,0,0.05));
    --danger-col: #FF3B30;

    /* —— 品牌粉家族重绑主题色：消灭「换啥皮肤都是粉」。
            旧代码几十处引用 var(--brand-pink*) / 主按钮粉渐变，
            这里在侧边栏作用域统一指向聊天界面动作色 --dock-send-bg，全跟主题走。 —— */
    --brand-pink:            var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --brand-pink-hot:        var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --brand-pink-light:      color-mix(in srgb, var(--dock-send-bg, #2C2A29) 25%, transparent);
    --brand-blue:            var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --brand-purple:          var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --accent-blue:           var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --notice-accent:         var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --api-accent:            var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --nav-text:              var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --other-text:            var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --sp-btn-primary-bg:     var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
    --sp-btn-primary-color:  var(--dock-send-icon-color, #ffffff);
    --sp-btn-primary-shadow: 0 8px 25px rgba(0,0,0,0.1);
    --sp-btn-secondary-bg:   var(--glass-bg, #ffffff);
    --sp-btn-secondary-color:var(--dock-send-bg, var(--bubble-me-bg, #2C2A29));
}

:root {
    --echo-inner-bg:          #f7f5f6;
    --text-main:              #4a3b40;
    --text-sub:               #9a8b90;
    --text-muted:             #bdaeb3;
    --accent:                 #6b4e58;
    --border-line:            rgba(107, 78, 88, 0.12);

    --echo-sidebar-width:     320px;
    --echo-sidebar-right:     -320px;
    --echo-sidebar-right-open: 0;
    --echo-sidebar-z:         1100;
    --echo-sidebar-transition: 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    --echo-sidebar-blur:      0px;           /* 去毛玻璃，换实体白 */
    --echo-sidebar-border:    rgba(107, 78, 88, 0.08);
    --echo-sidebar-shadow:    -8px 0 32px rgba(107, 78, 88, 0.08);

    --mask-bg:                rgba(107, 78, 88, 0.22);
    --mask-z:                 1050;

    --glass-bg:               #ffffff;
    --glass-border:           rgba(107, 78, 88, 0.08);
    --glass-shadow:           0 4px 16px rgba(107, 78, 88, 0.04);
    --glass-radius:           14px;

    --sc-header-height:       56px;
    --sc-header-border-color: rgba(107, 78, 88, 0.08);
    --sc-header-name-text:    #4a3b40;
    --sc-header-back-icon:    #4a3b40;

    --toggle-track:           #e8dce0;
    --toggle-track-active:    #6b4e58;
    --toggle-knob:            #ffffff;
    --toggle-width:           44px;
    --toggle-height:          24px;
    --toggle-radius:          12px;

    --sc-area-text:           #4a3b40;
    --sc-area-text-muted:     #9a8b90;
    --sc-area-divider:        rgba(107, 78, 88, 0.08);
    --sp-title-color:         #4a3b40;
    --sp-back-color:          #9a8b90;
    --sp-back-hover-color:    #4a3b40;

    /* sub-panel 背景复用 glass */
    --sp-body-bg:             #ffffff;
    --sp-body-border:         rgba(107, 78, 88, 0.08);
    --sp-body-shadow:         0 4px 16px rgba(107, 78, 88, 0.06);
    --sp-back-bg:             #ffffff;
    --sp-back-border:         rgba(107, 78, 88, 0.10);
    --sp-back-hover-bg:       #faf8f8;

    /* input */
    --sp-input-bg:            #f7f5f6;
    --sp-input-color:         #4a3b40;
    --sp-input-focus-bg:      #ffffff;
    --sp-input-shadow:        inset 0 1px 3px rgba(107, 78, 88, 0.06);

    /* buttons —— 实色跟主题，禁渐变(脏源) */
    --sp-btn-primary-bg:      var(--dock-send-bg, #2C2A29);
    --sp-btn-primary-color:   var(--dock-send-icon-color, #ffffff);
    --sp-btn-primary-shadow:  0 4px 16px rgba(0,0,0,0.1);
    --sp-btn-secondary-bg:    var(--echo-inner-bg, rgba(0,0,0,0.04));
    --sp-btn-secondary-color: var(--dock-send-bg, #6b4e58);

    /* brand */
    --brand-pink:             #d4829c;
    --brand-pink-light:       rgba(212, 130, 156, 0.25);
    --brand-pink-hot:         #c4607a;
    --brand-blue:             #7ba7c9;
    --brand-purple:           #9c7bb5;
    --accent-blue:            #6a96bb;
    --white:                  #ffffff;

    /* icon */
    --icon-blue:              #42a5f5;
    --icon-taro:              #6b4e58;
    --icon-pink:              #f48fb1;
    --icon-red:               #b56b6f;  /* 砖红 */
    --icon-green:             #8a9a86;  /* 鼠尾草绿 */
    --icon-gold:              #bda077;  /* 哑光金 */
    --icon-orange:            #b07d62;  /* 陶土橘 */

    /* danger */
    --danger-bg:              #c4607a;
    --danger-hover:           #b04060;
    --danger-deep:            #922040;
    --data-danger-text:       #ef4444;

    /* notice */
    --notice-accent:          #7ba7c9;

    /* api */
    --api-accent:             #9a8b90;

    /* startrack */
    --startrack-bg:           #f7f5f6;

    /* scrollbar thumb */
    --sc-scroll-thumb-bg:     rgba(107, 78, 88, 0.15);

    /* badge */
    --badge-purple:           #9c7bb5;
    --sc-chip-active-bg:      rgba(107, 78, 88, 0.12);
    --me-text:                #4a3b40;
    --nav-text:               #6b4e58;
    --warn-color:             #b08060;
    --warn-amber:             #c09050;
    --text-secondary:         #9a8b90;
    --text-subtle:            #bdaeb3;
    --text-primary:           #4a3b40;
    --other-text:             #6b4e58;
    --switch-on-bg:           #6b4e58;
    --tab-active-color:       #6b4e58;
    --navbar-bg:              #ffffff;
}

/* 强调色家族已在上方 #echo-sidebar 作用域统一绑到 --echo-accent，
 * 换肤实时跟随，无需再做日间专属覆盖。夜间见文件末尾中和段。 */

/* ──────────────────────────────────────────────────────────────────────────
   🔧 自定义主题：侧边栏【底层】去透明（子面板穿透修复）
   ----------------------------------------------------------------------------
   预设主题的 --echo-inner-bg 是实色，子面板底有底不穿透；但自定义色那条路
   (echo-nav-tags.css custom 块) 把 --echo-inner-bg 接到了 --echo-custom-bg
   = rgba(r,g,b, .05) —— 仅 5% 不透明。聊天主页面底下压着实色页底/背景图，
   透一点正是设计意图(不动)；但侧边栏子面板底下没有实色垫底，5% 一叠就透。
   故仅在【侧边栏作用域 + 自定义主题 + 日间】把底层换成"同色铺白"的不透明
   等效色(视觉与 5%叠白底完全一致,只是不再透明)。#echo-sidebar 之外的主页面
   拿到的仍是原 rgba 透明值,分毫不动；夜间走 :not() 排除(底层另有黑灰实色)。
   惰性求值：覆盖 --echo-inner-bg/--dock-input-bg 后,本文件 30+ 处直接引用 +
   私有令牌(--startrack-bg/--sp-back-bg/--sp-input-bg)会全部自动跟随变实色。
   ────────────────────────────────────────────────────────────────────────── */
body:not(.dark-mode):not(.night) #app-echo[data-echo-theme="custom"] #echo-sidebar {
    --echo-inner-bg: color-mix(in srgb, var(--echo-custom-main, #2C2A29) 5%, #ffffff);
    --dock-input-bg: color-mix(in srgb, var(--echo-custom-main, #2C2A29) 5%, #ffffff);
}

/* ==================== Sidebar Shell ==================== */
#echo-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    right: var(--echo-sidebar-right, -320px);
    width: var(--echo-sidebar-width, 320px);
    max-width: 85vw;
    /* 外壳 = 聊天界面底层色(每主题实色,挡住后面聊天 + 跟主题)。卡片层叠在其上。 */
    background: var(--echo-inner-bg, #f7f5f6);
    z-index: var(--echo-sidebar-z, 1100);
    transition: right var(--echo-sidebar-transition, 0.4s cubic-bezier(0.34,1.56,0.64,1));
    box-shadow: var(--echo-sidebar-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 1px solid var(--echo-sidebar-border);
    pointer-events: none;
    isolation: isolate;
    contain: layout paint;
    transform: translateZ(0);
    backface-visibility: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#echo-sidebar.active {
    right: var(--echo-sidebar-right-open, 0);
    pointer-events: auto;
}

#sidebar-mask {
    position: fixed;
    inset: 0;
    background: var(--mask-bg);
    z-index: var(--mask-z, 1050);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    display: none;
}

#sidebar-mask.active {
    opacity: 1;
    pointer-events: auto;
    display: block;
}

/* ==================== Header ==================== */
#echo-sidebar .sb-header {
    padding: max(30px, env(safe-area-inset-top)) 20px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--navbar-border);
    flex-shrink: 0;
    background: var(--echo-inner-bg);
}

#echo-sidebar .sb-header::before {
    display: none;
}

#echo-sidebar .sb-header-title {
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    font-size: 20px;
    font-weight: 900;
    font-style: normal !important;
    letter-spacing: 1px;
    color: var(--sc-header-name-text);
    margin: 0;
}

#echo-sidebar .sb-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bubble-other-bg);
    border: 1px solid var(--navbar-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sc-header-back-icon);
    font-size: 22px;
    transition: 0.2s;
    flex-shrink: 0;
}

#echo-sidebar .sb-close:hover {
    opacity: 0.85;
}

#echo-sidebar .sb-close:active {
    transform: scale(0.9);
}

/* ==================== Scrollable Body ==================== */
#echo-sidebar .sb-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 24px;
    padding-bottom: max(50px, env(safe-area-inset-bottom));
    background: var(--echo-inner-bg);
    display: flex;
    flex-direction: column;
    gap: 24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: contain;
    min-height: 0;
    transform: translateZ(0);
    backface-visibility: hidden;
    contain: paint;
}

#echo-sidebar .sb-scroll::-webkit-scrollbar {
    display: none;
}

/* ==================== Section & Glass Card ==================== */
#echo-sidebar .sb-section {
    margin-bottom: 0;
}

#echo-sidebar .sb-section-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--topbar-sub);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    padding-left: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
}

#echo-sidebar .glass-card {
    background: var(--bubble-other-bg);
    border: 1px solid var(--navbar-border);
    border-radius: var(--glass-radius, 24px);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}

#echo-sidebar .gc-row {
    padding: 14px 18px;
    min-height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--navbar-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--topbar-text);
    cursor: pointer;
    transition: opacity 0.15s;
}

#echo-sidebar .gc-row:active {
    opacity: 0.6;
}

#echo-sidebar .gc-row:last-child,
#echo-sidebar .gc-row.no-border {
    border-bottom: none;
}

#echo-sidebar .gc-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

#echo-sidebar .gc-row-right {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--topbar-sub);
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
}

#echo-sidebar .gc-note {
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
    padding: 2px 18px 14px 18px;
    border-bottom: 1px solid var(--navbar-border);
}

#echo-sidebar .gc-note.no-border {
    border-bottom: none;
}

/* ==================== Toggle Switch ==================== */
#echo-sidebar .sw {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--toggle-track);
    position: relative;
    box-shadow: var(--shadow-embed);
    transition: 0.3s;
    cursor: pointer;
    flex-shrink: 0;
}

#echo-sidebar .sw.on {
    background: var(--toggle-track-active);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

#echo-sidebar .sw-dot {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--btn-highlight);
    transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 -1px 2px rgba(0,0,0,0.05);
    pointer-events: none;
}

#echo-sidebar .sw.on .sw-dot {
    transform: translateX(20px);
    left: 2px;
    background: #ffffff;
}

/* ==================== Chip Tags ==================== */
#echo-sidebar .gc-chip {
    flex: 1;
    min-width: fit-content;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    background: transparent;
    color: var(--topbar-sub);
    border: 1px solid transparent;
    cursor: pointer;
    margin: 0;
    transition: 0.2s;
    white-space: nowrap;
    text-align: center;
}

/* 选中 = 浅槽里浮起的白色凸块（深字 + 描边 + 投影），不带任何主题色，
   任何皮肤下都是白的（对齐美化稿截图）。 */
#echo-sidebar .gc-chip.active {
    background: var(--bubble-other-bg, #fff);
    color: var(--topbar-text);
    border: 1px solid var(--navbar-border);
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 夜间：白块翻成浅灰块 + 深字（美化稿 body.dark-mode 同款） */
body.dark-mode #echo-sidebar .gc-chip.active,
body.night #echo-sidebar .gc-chip.active {
    background: var(--bubble-me-bg);
    color: var(--bubble-me-text);
    border-color: transparent;
}

/* ==================== Directive Chips (导演指令快速插入) ==================== */
#echo-sidebar .directive-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: rgba(107, 78, 88, 0.04);
    border-radius: 8px;
    border: 1px dashed rgba(107, 78, 88, 0.12);
}

#echo-sidebar .directive-chip {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    background: rgba(107, 78, 88, 0.06);
    color: var(--accent);
    border: 1px solid rgba(107, 78, 88, 0.15);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

#echo-sidebar .directive-chip:hover {
    background: rgba(107, 78, 88, 0.12);
    border-color: rgba(107, 78, 88, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(107, 78, 88, 0.12);
}

#echo-sidebar .directive-chip:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(107, 78, 88, 0.08);
}

#echo-sidebar .directive-chip::before {
    content: '@';
    font-weight: 700;
    color: var(--accent);
}

/* ==================== Sub Panel ==================== */
#echo-sidebar .sub-panel {
    position: absolute;
    inset: 0;
    background: var(--echo-inner-bg);
    z-index: 10;
    transform: translateX(100%);
    transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    overflow-x: visible;
}

#echo-sidebar .sub-panel.open {
    transform: translateX(0);
}

/* === 自定义气泡面板专用样式 - 拟物实色 === */
#echo-sidebar #sub-bubble .sp-body {
    background: transparent;
    border-radius: 0;
    margin: 0;
    padding: 24px 20px;
    box-shadow: none;
    border: none;
}

/* 标题样式 - 与灵犀面板一致 */
#echo-sidebar #sub-bubble .sp-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-title-color);
    opacity: 0.7;
    margin-bottom: 12px;
    display: block;
}

/* 输入框 - 内凹质感 */
#echo-sidebar #sub-bubble .sp-textarea,
#echo-sidebar #sub-bubble .sp-input {
    width: 100%;
    border: none;
    background: var(--sp-input-bg);
    border-radius: 16px;
    padding: 16px;
    font-size: 13px;
    color: var(--sp-input-color);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    line-height: 1.5;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
    min-height: 120px;
    resize: vertical;
}

#echo-sidebar #sub-bubble .sp-textarea:focus {
    background: var(--sp-input-focus-bg);
}

/* 按钮容器 */
#echo-sidebar #sub-bubble .sp-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    margin-bottom: 10px;
}

/* 按钮 - 莫兰迪色系，柔和低饱和度 */
#echo-sidebar #sub-bubble .sp-save-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 100px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* 主按钮 - 陶瓷白凸块 */
#echo-sidebar #sub-bubble .sp-save-btn.primary,
#echo-sidebar #sub-bubble #sb-apply-bubble {
    background: var(--bubble-other-bg, #fff);
    color: var(--topbar-text);
    border: 1px solid var(--navbar-border);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

#echo-sidebar #sub-bubble .sp-save-btn.primary:hover,
#echo-sidebar #sub-bubble #sb-apply-bubble:hover {
    background: var(--echo-inner-bg, #f5f4f1);
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

#echo-sidebar #sub-bubble .sp-save-btn.primary:active,
#echo-sidebar #sub-bubble #sb-apply-bubble:active {
    transform: scale(0.98) translateY(0);
}

/* 次按钮 - 实色中性面，跟主题 */
#echo-sidebar #sub-bubble .sp-save-btn.secondary,
#echo-sidebar #sub-bubble #sb-save-bubble-config {
    background: var(--sp-btn-secondary-bg);
    color: var(--sp-btn-secondary-color);
    box-shadow: none;
}

#echo-sidebar #sub-bubble .sp-save-btn.secondary:hover,
#echo-sidebar #sub-bubble #sb-save-bubble-config:hover {
    background: var(--echo-inner-bg, rgba(0,0,0,0.06));
    transform: translateY(-1px);
}

/* 重置按钮 */
#echo-sidebar #sub-bubble #sb-reset-bubble {
    width: 100%;
    margin-top: 10px;
    background: rgba(109, 100, 102, 0.08);
    color: var(--text-muted);
    border: 1px solid rgba(109, 100, 102, 0.15);
    box-shadow: none;
}

#echo-sidebar #sub-bubble #sb-reset-bubble:hover {
    background: rgba(109, 100, 102, 0.12);
}

/* 格式参考区域 */
#echo-sidebar #sub-bubble .sp-reference-wrap {
    margin-top: 20px;
}

#echo-sidebar #sub-bubble .sp-reference-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #faf8f8;
    border-radius: 12px 12px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-title-color);
    opacity: 0.6;
}

#echo-sidebar #sub-bubble #sb-css-reference {
    display: none;
    background: rgba(248, 249, 250, 0.8);
    font-size: 11px;
    min-height: 180px;
    color: var(--text-secondary);
    border-radius: 0 0 12px 12px;
    border: none;
    margin-top: 0;
}

#echo-sidebar #sub-bubble #sb-css-reference.show {
    display: block;
}

/* 面板头部 - 拟物实色 */
#echo-sidebar #sub-bubble .sp-header {
    background: var(--bubble-other-bg);
    border-bottom: 1px solid var(--navbar-border);
    /* 🔧 padding 简写会覆盖基础规则的 padding-top:env(safe-area)，这里把安全区叠回去，否则气泡面板顶栏被灵动岛压住 */
    padding: calc(18px + env(safe-area-inset-top)) 16px 14px;
}

#echo-sidebar #sub-bubble .sp-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sp-title-color);
    opacity: 0.8;
}

/* 读取/删除按钮 */
#echo-sidebar #sub-bubble #sb-load-bubble-config,
#echo-sidebar #sub-bubble #sb-delete-bubble-config {
    flex: 0 0 auto;
    padding: 0 14px;
    min-width: 44px;
    background: var(--echo-inner-bg, rgba(0,0,0,0.04));
    color: var(--topbar-text);
    box-shadow: none;
}

#echo-sidebar #sub-bubble #sb-delete-bubble-config {
    background: rgba(255, 59, 48, 0.12);
    color: #c25;
}

#echo-sidebar #sub-bubble #sb-delete-bubble-config:hover {
    background: rgba(255, 59, 48, 0.2);
}

/* 禁用状态按钮 */
#echo-sidebar #sub-bubble .sp-save-btn[disabled],
#echo-sidebar #sub-bubble #sb-load-bubble-config[disabled],
#echo-sidebar #sub-bubble #sb-delete-bubble-config[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* 下拉选择框 */
#echo-sidebar #sub-bubble .sp-input {
    flex: 1;
    background: #faf8f8;
    border: 1px solid var(--sp-body-border);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--sp-title-color);
    box-shadow: none;
    margin-bottom: 0;
}

/* 气泡预览框 */
#echo-sidebar #sub-bubble .bubble-preview-box {
    background: rgba(107, 78, 88, 0.04);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #faf8f8;
}

#echo-sidebar #sub-bubble .bp-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

#echo-sidebar #sub-bubble .bp-row.right {
    flex-direction: row-reverse;
}

#echo-sidebar #sub-bubble .bp-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

#echo-sidebar #sub-bubble .bp-bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.4;
    /* 与真实气泡一致：让用户 ::before/::after 画的耳朵/尾巴锚定到气泡本身，
       而不是一路上飘锚到面板顶部（真气泡 .speech-bubble 本就是 relative） */
    position: relative;
}

/* 🔧 预览默认样式使用“示例同款选择器”，避免 id 选择器过强导致用户 CSS 无法覆盖 */
#echo-sidebar #sub-bubble .bp-row:not(.right) .bp-bubble {
    background: #ffffff;
    color: var(--sp-input-color);
    border-bottom-left-radius: 4px;
}

#echo-sidebar #sub-bubble .bp-row.right .bp-bubble {
    background: var(--sp-btn-primary-bg);
    color: var(--sp-title-color);
    border-bottom-right-radius: 4px;
}

#echo-sidebar .sp-header {
    /* 🔧 不写死 height：border-box 下 padding-top(安全区) 会被算进固定高里，把图标+标题挤扁成方块。
       改 min-height + box-sizing:content-box 让安全区内边距叠加在 60px 之上，顶栏整体长高而非压扁内容。 */
    min-height: var(--sc-header-height, 60px);
    box-sizing: content-box;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--navbar-border);
    flex-shrink: 0;
    background: var(--bubble-other-bg);
    padding-top: env(safe-area-inset-top);
}

#echo-sidebar .sp-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--echo-inner-bg);
    border: 1px solid var(--navbar-border);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--topbar-name-color, #2C2A29);
    font-size: 20px;
    transition: 0.2s;
    flex-shrink: 0;
}

#echo-sidebar .sp-back:hover {
    opacity: 0.85;
}

#echo-sidebar .sp-back:active {
    transform: scale(0.9);
}

/* 特殊子窗口的返回按钮 — 统一用主文字色，保证可见 */
#echo-sidebar #sub-notice .sp-back {
    color: var(--topbar-name-color, #2C2A29);
}

#echo-sidebar #sub-notice .sp-back:hover {
    opacity: 0.7;
}

/* 气泡设定 */
#echo-sidebar #sub-bubble .sp-back {
    color: var(--topbar-name-color, #2C2A29);
}

#echo-sidebar #sub-bubble .sp-back:hover {
    opacity: 0.7;
}

/* API 切换 */
#echo-sidebar #sub-api .sp-back {
    color: var(--topbar-name-color, #2C2A29);
}

#echo-sidebar #sub-api .sp-back:hover {
    opacity: 0.7;
}

#echo-sidebar .sp-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--sc-header-name-text);
}

#echo-sidebar .sp-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: visible;
    padding: 24px 20px;
    padding-bottom: max(40px, env(safe-area-inset-bottom));
    background: var(--echo-inner-bg);
    display: flex;
    flex-direction: column;
    gap: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#echo-sidebar .sp-body::-webkit-scrollbar {
    display: none;
}

#echo-sidebar .sp-block {
    margin-bottom: 20px;
}

#echo-sidebar .sp-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--topbar-sub);
    margin-bottom: 8px;
    margin-left: 6px;
}

#echo-sidebar .sp-input,
#echo-sidebar .sp-textarea {
    width: 100%;
    border: 1px solid var(--navbar-border);
    background: var(--sp-input-bg);
    border-radius: 20px;
    padding: 18px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-input-color);
    font-family: inherit;
    margin-bottom: 16px;
    box-sizing: border-box;
    box-shadow: var(--shadow-embed);
    outline: none;
    resize: none;
}

#echo-sidebar .sp-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

/* ==================== Buttons ====================
   全部按钮/入口卡：拒绝主题实色，统一【陶瓷白凸块】(白底+深字+描边+柔投影)。
   夜间在文件末尾 .dark-mode/.night 段翻成浅灰块+深字。 */
#echo-sidebar .sp-save-btn {
    width: 100%;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--navbar-border);
    background: var(--bubble-other-bg, #fff);
    color: var(--topbar-text);
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    margin-bottom: 10px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

#echo-sidebar .sp-save-btn:hover {
    background: var(--echo-inner-bg, #f5f4f1);
}

/* 陶瓷白按压感：按下陷进去（内阴影压过外投影）+ 轻微缩放下沉 */
#echo-sidebar .sp-save-btn:active {
    transform: scale(0.97) translateY(1px);
    background: var(--echo-inner-bg, #f0eeec);
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.04);
}

#echo-sidebar .sp-save-btn.secondary {
    background: transparent;
    border-color: color-mix(in srgb, var(--echo-accent, #2C2A29) 40%, transparent);
    color: var(--brand-pink);
    box-shadow: none;
}

#echo-sidebar .sp-save-btn.secondary:hover {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 10%, transparent);
}

#echo-sidebar .sp-warn-btn {
    width: 100%;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 59, 48, 0.25);
    background: rgba(255, 59, 48, 0.06);
    color: var(--danger-col);
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

#echo-sidebar .sp-warn-btn:active {
    background: rgba(255, 59, 48, 0.12);
}

#echo-sidebar .sp-warn-btn.danger {
    color: var(--danger-col);
    border-color: rgba(255, 59, 48, 0.4);
}

/* ==================== 自定义方案选择器 ==================== */
.echo-scheme-selector {
    position: relative;
    margin-bottom: 12px;
    z-index: 50;
}

.scheme-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid var(--sp-back-border);
    border-radius: 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-back-hover-color);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.scheme-display:hover {
    border-color: rgba(107, 78, 88, 0.25);
    background: var(--sp-back-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 78, 88, 0.08);
}

.echo-scheme-selector.open .scheme-display {
    border-color: rgba(107, 78, 88, 0.30);
    background: var(--sp-back-bg);
    box-shadow: 0 4px 16px rgba(107, 78, 88, 0.10);
}

.scheme-display i:first-child {
    font-size: 16px;
    color: var(--danger-bg);
}

.scheme-display i:last-child {
    font-size: 16px;
    color: var(--text-muted);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.echo-scheme-selector.open .scheme-display i:last-child {
    transform: rotate(180deg);
    color: var(--danger-bg);
}

.scheme-display span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scheme-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: var(--bubble-other-bg);
    border: 1px solid var(--navbar-border);
    border-radius: 14px;
    box-shadow:
        0 8px 32px rgba(107, 78, 88, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.06);
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scheme-dropdown::-webkit-scrollbar {
    width: 6px;
}

.scheme-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.scheme-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 107, 0.3);
    border-radius: 3px;
}

.scheme-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 78, 88, 0.30);
}

.echo-scheme-selector.open .scheme-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scheme-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(107, 78, 88, 0.10);
    transition: all 0.2s ease;
}

.scheme-item:first-child {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.scheme-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.scheme-item:hover {
    background: var(--echo-inner-bg, rgba(0,0,0,0.04));
}

.scheme-item-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-back-hover-color);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scheme-item-name::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--danger-bg);
    border-radius: 50%;
    flex-shrink: 0;
}

.scheme-item:hover .scheme-item-name {
    color: var(--sp-title-color);
    font-weight: 600;
}

.scheme-empty {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

.scheme-item-actions {
    display: flex;
    gap: 8px;
}

.scheme-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    font-size: 14px;
}

.scheme-action-btn.apply,
.scheme-action-btn.export {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 15%, transparent);
    color: var(--brand-pink);
}

.scheme-action-btn.apply:hover,
.scheme-action-btn.export:hover {
    background: var(--echo-accent, #2C2A29);
    color: var(--echo-accent-text, #fff);
}

.scheme-action-btn.delete {
    background: rgba(231, 76, 60, 0.15);
    color: var(--danger-hover);
}

.scheme-action-btn.delete:hover {
    background: var(--danger-hover);
    color: var(--white);
}

.scheme-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-subtle);
}

/* 方案导入 / 导出按钮行 */
.sb-scheme-io-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.sb-scheme-io-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 12px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--sp-input-color);
    background: rgba(107, 78, 88, 0.05);
    border: 1px solid rgba(107, 78, 88, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}

.sb-scheme-io-btn i {
    font-size: 15px;
    color: var(--danger-bg);
}

.sb-scheme-io-btn:hover {
    background: rgba(107, 78, 88, 0.1);
    border-color: rgba(107, 78, 88, 0.22);
}

.sb-scheme-io-btn:active {
    transform: scale(0.97);
}

/* ==================== 弹窗样式 ==================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-box {
    background: var(--sp-back-bg);
    border-radius: 24px;
    padding: 32px;
    width: 90%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--sp-back-border);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.show .modal-box {
    transform: scale(1) translateY(0);
}

.modal-icon {
    font-size: 40px;
    margin-bottom: 16px;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--sp-title-color);
    margin: 0 0 8px;
}

.modal-message {
    font-size: 14px;
    color: var(--text-subtle);
    margin: 0 0 20px;
    line-height: 1.5;
}

.modal-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--echo-accent, #2C2A29) 30%, transparent);
    border-radius: 14px;
    font-size: 14px;
    color: var(--sp-title-color);
    background: #ffffff;
    outline: none;
    margin-bottom: 20px;
    box-sizing: border-box;
    transition: all 0.2s;
}

.modal-input:focus {
    border-color: var(--brand-pink-light);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--echo-accent, #2C2A29) 15%, transparent);
}

.modal-buttons {
    display: flex;
    gap: 12px;
}

.modal-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 100px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-btn-secondary {
    background: rgba(109, 100, 102, 0.1);
    color: var(--text-muted);
}

.modal-btn-secondary:hover {
    background: rgba(109, 100, 102, 0.15);
}

.modal-btn-primary {
    background: var(--bubble-other-bg, #fff);
    color: var(--topbar-text);
    border: 1px solid var(--navbar-border);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.modal-btn-primary:hover {
    background: var(--echo-inner-bg, #f5f4f1);
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}

.modal-btn-primary:active {
    transform: scale(0.97) translateY(1px);
    background: var(--echo-inner-bg, #f0eeec);
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.04);
}

.modal-btn-danger {
    background: rgba(255,59,48,0.14);
    color: var(--danger-deep);
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.15);
}

.modal-btn-danger:hover {
    background: rgba(255,59,48,0.22);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.25);
}

/* ==================== Role Tags ==================== */
#echo-sidebar .sp-role-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

#echo-sidebar .sp-role-tag.me {
    background: var(--sc-chip-active-bg);
    color: var(--me-text, #4a3b40);
}

#echo-sidebar .sp-role-tag.other {
    background: rgba(107, 78, 88, 0.08);
    color: var(--nav-text, #546e7a);
}

/* ==================== Mini Tabs (Local / URL) ==================== */
#echo-sidebar .mini-tabs {
    display: flex;
    gap: 4px;
    background: var(--echo-inner-bg);
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-embed);
}

#echo-sidebar .mini-tab {
    flex: 1;
    padding: 8px 0;
    border-radius: 10px;
    border: none;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: var(--topbar-sub);
    text-align: center;
    transition: 0.2s;
}

#echo-sidebar .mini-tab.active {
    background: var(--bubble-other-bg);
    color: var(--topbar-text);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#echo-sidebar .toggle-area {
    display: none;
}

#echo-sidebar .toggle-area.show {
    display: block;
}

/* ==================== Bubble Preview ==================== */
#echo-sidebar .bubble-preview-box {
    background: var(--echo-inner-bg);
    border-radius: 20px;
    padding: 18px;
    border: 1px dashed var(--navbar-border);
    box-shadow: var(--shadow-embed);
    margin-bottom: 16px;
}

#echo-sidebar .bp-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

#echo-sidebar .bp-row.right {
    flex-direction: row-reverse;
}

#echo-sidebar .bp-row:last-child {
    margin-bottom: 0;
}

#echo-sidebar .bp-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--bubble-other-bg);
    box-shadow: var(--shadow-bevel);
    object-fit: cover;
    flex-shrink: 0;
}

#echo-sidebar .bp-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
    max-width: 75%;
    line-height: 1.5;
}

#echo-sidebar .bp-row:not(.right) .bp-bubble {
    color: var(--topbar-text);
    background: var(--bubble-other-bg);
    border: 1px solid var(--navbar-border);
    border-bottom-left-radius: 4px;
}

#echo-sidebar .bp-row.right .bp-bubble {
    color: var(--bubble-me-text, #fff);
    background: var(--bubble-me-bg);
    border-bottom-right-radius: 4px;
}

/* ==================== Video Avatar Slot ==================== */
#echo-sidebar .video-avatar-slot {
    width: 100%;
    aspect-ratio: 9/16;
    background: var(--echo-inner-bg);
    border-radius: 16px;
    border: 2px dashed var(--navbar-border);
    box-shadow: var(--shadow-embed);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

#echo-sidebar .video-avatar-slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

#echo-sidebar .video-avatar-slot.has-img img {
    display: block;
}

#echo-sidebar .video-avatar-slot .slot-icon {
    font-size: 32px;
    color: var(--text-subtle);
    position: relative;
    z-index: 1;
}

#echo-sidebar .video-avatar-slot .slot-text {
    font-size: 11px;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
    margin-top: 4px;
}

#echo-sidebar .video-avatar-slot.has-img .slot-icon,
#echo-sidebar .video-avatar-slot.has-img .slot-text {
    display: none;
}

/* ==================== Color Picker ==================== */
#echo-sidebar .picker-container {
    background: var(--white);
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

#echo-sidebar .color-board {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent);
    background-color: #f00;
    position: relative;
    margin-bottom: 16px;
    cursor: crosshair;
}

#echo-sidebar .color-cursor {
    width: 14px;
    height: 14px;
    border: 2px solid var(--white);
    border-radius: 50%;
    position: absolute;
    top: 30%;
    left: 60%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

#echo-sidebar .hue-bar {
    width: 100%;
    height: 16px;
    border-radius: 8px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    position: relative;
    margin-bottom: 20px;
    cursor: pointer;
}

#echo-sidebar .hue-slider {
    width: 16px;
    height: 16px;
    border: 2px solid var(--white);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

#echo-sidebar .rgb-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
}

#echo-sidebar .color-preview-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

#echo-sidebar .rgb-box {
    flex: 1;
    text-align: center;
    border: 1px solid rgba(107, 78, 88, 0.18);
    border-radius: 8px;
    padding: 6px;
    background: var(--white);
}

#echo-sidebar .rgb-box label {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
}

#echo-sidebar .rgb-box input {
    width: 100%;
    border: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--nav-text, #546e7a);
    background: transparent;
}

/* ==================== Affection Dashboard (profile-pod 拟物身份卡) ==================== */
#echo-sidebar .affection-card {
    padding: 24px;
    background: var(--bubble-other-bg);
    border-radius: 28px;
    margin-bottom: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 头像 + 名字 顶部行（JS 补的 .pod-top/.pod-avatar/.pod-info/.pod-name） */
#echo-sidebar .pod-top {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}
#echo-sidebar .pod-avatar {
    width: 56px; height: 56px; min-width: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: var(--shadow-bevel);
    border: 2px solid var(--bubble-other-bg);
    display: block;
}
#echo-sidebar .pod-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
#echo-sidebar .pod-name {
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    font-size: 22px; font-weight: 900;
    font-style: normal !important;
    letter-spacing: 1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--topbar-text);
}

#echo-sidebar .affection-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#echo-sidebar .affection-label {
    color: var(--topbar-sub);
}

#echo-sidebar .affection-level {
    color: var(--topbar-text);
}

#echo-sidebar .affection-bar-wrap {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-embed);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

#echo-sidebar .affection-bar-fill {
    height: 100%;
    background: var(--bubble-me-bg);
    border-radius: 6px;
    position: relative;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.15), inset 0 2px 3px rgba(255,255,255,0.3);
    transition: width 1s ease-out;
}

#echo-sidebar .affection-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    height: 50%;
    background: var(--glass-reflection);
    border-radius: 6px 6px 0 0;
}

#echo-sidebar .affection-value {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 800;
    color: var(--topbar-text);
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

#echo-sidebar .affection-value small {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ==================== Group Member Avatars ==================== */
#echo-sidebar .member-avatar-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

#echo-sidebar .member-avatar-row::-webkit-scrollbar {
    display: none;
}

#echo-sidebar .member-avatar-item {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 2px solid var(--bubble-other-bg);
    box-shadow: var(--shadow-bevel);
    object-fit: cover;
    flex-shrink: 0;
}

#echo-sidebar .member-add-btn {
    min-width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--echo-inner-bg);
    border: 2px dashed var(--navbar-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

/* ==================== Notice preview ==================== */
#echo-sidebar .notice-preview {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    max-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ==================== Avatar Setter ==================== */
#echo-sidebar .avatar-setter {
    display: flex;
    gap: 16px;
    align-items: center;
    background: #faf8f8;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(107, 78, 88, 0.12);
}

#echo-sidebar .avatar-setter img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    flex-shrink: 0;
}

#echo-sidebar .avatar-setter-controls {
    flex: 1;
    min-width: 0;
}

/* ==================== Video Grid ==================== */
#echo-sidebar .video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

#echo-sidebar .video-col {
    background: #faf8f8;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(107, 78, 88, 0.12);
}

/* ==================== Background Preview ==================== */
#echo-sidebar .bg-preview-strip {
    width: 100%;
    height: 80px;
    border-radius: 12px;
    margin-top: 10px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(107, 78, 88, 0.12);
    display: none;
}

#echo-sidebar .bg-preview-strip.show {
    display: block;
}

/* ==================== Number Input in Row ==================== */
#echo-sidebar .gc-row input[type="number"] {
    width: 60px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid rgba(107, 78, 88, 0.18);
    padding: 6px;
    background: var(--sp-body-bg);
    font-weight: 600;
    color: var(--nav-text, #546e7a);
    font-size: 14px;
    /* 🔧 隐藏浏览器原生 number spinner，避免干扰点击编辑 */
    -moz-appearance: textfield;
}
#echo-sidebar .gc-row input[type="number"]::-webkit-outer-spin-button,
#echo-sidebar .gc-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ==================== Token Threshold Input in Modal ==================== */
#token-threshold-input {
    -moz-appearance: textfield;
}
#token-threshold-input::-webkit-outer-spin-button,
#token-threshold-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ==================== Member List in Sub-panel ==================== */
/* 🔧 成员管理面板划不动根因修复：
   .glass-card 自带 overflow:hidden，它作为 .sp-body(flex column) 的 flex item 时，
   按 CSS 规范 min-height:auto 会被解析为 0，于是被默认 flex-shrink:1 压扁到剩余空间内，
   多出来的成员被 glass-card 的 overflow:hidden 裁掉 → sp-body 不溢出 → 没有滚动 → 看不见下面的成员。
   强制不压缩，让 glass-card 保持内容高度，sp-body 正常溢出滚动。 */
#echo-sidebar #sub-members .sp-body > .glass-card {
    flex-shrink: 0;
}

#echo-sidebar .member-list-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--navbar-border);
}

#echo-sidebar .member-list-item:last-child {
    border-bottom: none;
}

#echo-sidebar .member-list-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--white);
    object-fit: cover;
    flex-shrink: 0;
}

#echo-sidebar .member-list-item .member-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--topbar-name-color, #2C2A29);
}

#echo-sidebar .member-list-item .member-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--badge-purple);
    color: white;
}

#echo-sidebar .member-remove-icon {
    color: var(--data-danger-text);
    font-size: 18px;
    cursor: pointer;
    transition: 0.2s;
}

#echo-sidebar .member-remove-icon:active {
    transform: scale(0.9);
}

/* 好感度编辑控件 */
#echo-sidebar .affection-input {
    width: 56px;
    background: var(--glass-bg, #faf8f8);
    border: 1px solid var(--glass-border, rgba(107, 78, 88, 0.10));
    border-radius: 8px;
    color: var(--nav-text, #546e7a);
    font-size: 12px;
    padding: 3px 6px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}

#echo-sidebar .affection-input:focus {
    border-color: var(--echo-accent, #2C2A29);
}

#echo-sidebar .affection-save-btn {
    background: var(--echo-accent, #2C2A29);
    border: 1px solid var(--echo-accent, #2C2A29);
    border-radius: 8px;
    color: var(--echo-accent-text, #ffffff);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}

#echo-sidebar .affection-save-btn:active {
    opacity: 0.8;
    transform: scale(0.95);
}

/* 群成员通话声线选择（chip 横排，无内联下拉） */
#echo-sidebar .member-voice-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#echo-sidebar .member-voice-label {
    font-size: 12px;
    color: var(--nav-text, #546e7a);
    white-space: nowrap;
}

#echo-sidebar .member-voice-chips {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

#echo-sidebar .member-voice-chips::-webkit-scrollbar {
    height: 0;
}

#echo-sidebar .member-voice-chips .gc-chip {
    flex-shrink: 0;
}

/* ==================== Footer Version ==================== */
#echo-sidebar .sb-footer {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 20px;
    padding: 12px 0;
    border-top: 1px solid rgba(107, 78, 88, 0.10);
    margin-top: 12px;
}

#echo-sidebar .sb-footer span {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 12px;
    background: #faf8f8;
    font-weight: 500;
    transition: all 0.2s ease;
    user-select: none;
}

#echo-sidebar .sb-footer:hover span {
    background: #ffffff;
    color: var(--sp-back-hover-color);
    transform: translateY(-1px);
}

/* ==================== Token灵犀感知面板 ==================== */
.token-dashboard {
    margin-bottom: 0;
    padding: 20px;
    position: relative;
    border-radius: 24px;
    background: var(--bubble-other-bg);
    border: 1px solid var(--navbar-border);
    box-shadow: var(--glass-shadow);
    transition: all 0.4s ease;
}


.td-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--navbar-border);
    cursor: pointer;
}
.td-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--topbar-text);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.td-total-wrap {
    display: flex;
    align-items: baseline;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 12px;
    transition: 0.2s;
    background: var(--echo-inner-bg);
    box-shadow: var(--shadow-embed);
}
.td-total-wrap:hover {
    transform: scale(1.02);
}

.td-total {
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--topbar-text);
    transition: 0.4s;
}
.td-total-wrap small {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-subtle);
    margin-left: 2px;
}


.td-progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    margin-bottom: 18px;
    position: relative;
    box-shadow: var(--shadow-embed);
    overflow: hidden;
}
.td-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.2,0.8,0.2,1), background 0.4s ease, box-shadow 0.4s ease;
    background: var(--bubble-me-bg);
    box-shadow: inset 0 -2px 3px rgba(0,0,0,0.15), inset 0 2px 3px rgba(255,255,255,0.3);
    position: relative;
    overflow: hidden;
}

.td-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}


.td-threshold-marker {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 3px;
    background: var(--bubble-other-bg);
    border-radius: 2px;
    z-index: 2;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
    transition: left 0.4s ease;
}

.td-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 14px;
    align-items: stretch;
}
.td-item {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 14px 16px;
    background: var(--echo-inner-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-embed);
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.td-label {
    font-size: 10px;
    color: var(--topbar-sub);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.td-value {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--topbar-text);
}

.compress-box {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.c-orig {
    background: rgba(107, 78, 88, 0.07);
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 12px;
    text-decoration: line-through;
}
.c-arrow {
    color: var(--accent);
    font-size: 14px;
}
.c-sent {
    background: var(--echo-inner-bg);
    border: 1px solid var(--navbar-border);
    padding: 2px 8px;
    border-radius: 6px;
    color: var(--topbar-text);
    font-weight: 700;
    font-size: 13px;
    box-shadow: var(--shadow-embed);
}

.td-footer {
    font-size: 11px;
    color: var(--topbar-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px dashed var(--navbar-border);
}
.td-footer i {
    color: var(--accent);
    font-size: 14px;
}
.td-footer b {
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
}

/* ==================== 星轨面板 ==================== */
.startrack-card {
    padding: 18px;
    border-radius: 24px;
    background: var(--bubble-other-bg, #fff);
    color: var(--topbar-text);
    border: 1px solid var(--navbar-border);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s ease;
}
.startrack-card:hover {
    transform: translateY(-1px);
}
.startrack-card:active {
    transform: scale(0.98) translateY(1px);
    background: var(--echo-inner-bg, #f0eeec);
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.04);
}
.startrack-card-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.startrack-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--echo-inner-bg, rgba(0,0,0,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.startrack-icon i {
    font-size: 20px;
    color: var(--topbar-text);
}
.startrack-content {
    flex: 1;
    min-width: 0;
}
.startrack-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--topbar-text);
}
.startrack-preview {
    font-size: 11px;
    color: var(--topbar-sub);
    opacity: 1;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.startrack-arrow {
    font-size: 20px;
    color: var(--topbar-sub);
    opacity: 1;
    transition: all 0.2s;
}
.startrack-card:hover .startrack-arrow {
    transform: translateX(2px);
}

/* 星轨子面板 */
.startrack-body {
    background: var(--startrack-bg);
}
.startrack-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--echo-accent, #2C2A29);
    border-radius: 12px;
    margin-bottom: 16px;
}
.startrack-hint .hint-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--echo-inner-bg);
    box-shadow: var(--shadow-embed);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.startrack-hint .hint-icon i {
    font-size: 14px;
    color: var(--accent);
}
.startrack-hint .hint-text {
    font-size: 11px;
    color: var(--echo-accent-text, #ffffff);
    opacity: 0.92;
    line-height: 1.4;
}
.startrack-section {
    margin-bottom: 16px;
}
.startrack-section .section-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--topbar-sub);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.startrack-section .section-label i {
    color: var(--accent);
    font-size: 13px;
}
.startrack-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.startrack-chip {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 9px 14px;
    background: var(--bubble-other-bg);
    border: 1px solid var(--navbar-border);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--topbar-text);
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.startrack-chip .chip-at {
    color: var(--accent);
    font-weight: 700;
    margin-right: 1px;
}
.startrack-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.startrack-chip:active {
    transform: scale(0.95);
}
.startrack-chips .no-members {
    font-size: 12px;
    color: var(--text-subtle);
    text-align: center;
    padding: 16px;
    width: 100%;
}
.startrack-input {
    width: 100%;
    min-height: 120px;
    padding: 18px 20px;
    border: 1px solid var(--navbar-border);
    border-radius: 20px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--topbar-text);
    background: var(--sp-input-bg);
    resize: vertical;
    transition: all 0.25s ease;
    box-sizing: border-box;
    box-shadow: var(--shadow-embed);
}
.startrack-input:focus {
    outline: none;
    background: var(--sp-input-bg);
}
.startrack-input::placeholder {
    color: var(--text-subtle);
}
.startrack-btn {
    width: 100%;
    padding: 18px 20px;
    background: var(--bubble-other-bg, #fff);
    border: 1px solid var(--navbar-border);
    border-radius: 20px;
    color: var(--topbar-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.startrack-btn:hover {
    background: var(--echo-inner-bg, #f5f4f1);
}
.startrack-btn:active {
    transform: scale(0.97) translateY(1px);
    background: var(--echo-inner-bg, #f0eeec);
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.14), 0 1px 2px rgba(0,0,0,0.04);
}
.startrack-btn i {
    font-size: 16px;
}

/* ========================================================================== */
/* 🌙 Echo侧边栏 - 夜间拟物黑灰（变量驱动·统一中性·不随皮肤） */
/* ========================================================================== */

/* 夜间在侧边栏作用域内整体改写调色板，并把皮肤强调色中和成中性浅灰
   （落实「夜间统一黑灰、无分主题深色变体」）。日间组件全部消费这套变量，
   故此处覆盖即级联生效，无需再逐元素硬压色。 */
body.dark-mode #echo-sidebar,
body.night #echo-sidebar {
    /* —— 强调色：中和成中性浅灰，不跟皮肤 —— */
    --accent:              #E0E0E0;
    --bubble-me-bg:        #E0E0E0;
    --bubble-me-text:      #121212;
    --toggle-track-active: #E0E0E0;
    --switch-on-bg:        #E0E0E0;
    --tab-active-color:    #E0E0E0;
    --sc-chip-active-bg:   #E0E0E0;
    /* 星轨子面板底=黑灰底层(语义已与日间统一为底层,非动作色) */
    --startrack-bg:        #121212;

    /* —— 表面：黑灰三层 —— */
    --echo-inner-bg:       #121212;   /* 侧边栏 / 滚动区 / 子面板底 */
    --bubble-other-bg:     #1E1E1E;   /* 卡片实底 */
    --glass-bg:            #1E1E1E;
    --sp-body-bg:          #1E1E1E;
    --sp-back-bg:          #121212;
    --sp-input-bg:         #0A0A0A;   /* 内凹输入 */
    --navbar-border:       rgba(255,255,255,0.07);
    --glass-border:        rgba(255,255,255,0.07);
    --sc-header-border-color: rgba(255,255,255,0.07);
    --toggle-track:        rgba(255,255,255,0.1);

    /* —— 文字 —— */
    --text-main: #E0E0E0; --text-primary: #E0E0E0; --me-text: #E0E0E0;
    --sc-header-name-text: #E0E0E0; --sc-header-back-icon: #888888;
    --topbar-text: #E0E0E0; --topbar-sub: #777777;
    --text-sub: #888888; --text-secondary: #999999;
    --text-muted: #666666; --text-subtle: #666666;
    --sp-back-color: #888888; --sp-back-hover-color: #E0E0E0;
    --sp-title-color: #E0E0E0; --sp-input-color: #E0E0E0;

    /* —— 拟物质感令牌（夜间版：去白色高光，深黑内阴影） —— */
    --shadow-bevel: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.04);
    --shadow-embed: inset 0 2px 6px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.02);
    --glass-reflection: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%);
    --btn-highlight: linear-gradient(180deg, #2C2C2E 0%, #1A1A1A 100%);
    --shadow-pop: 0 15px 40px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.05);
    --glass-shadow: 0 4px 16px rgba(0,0,0,0.4);
    --echo-sidebar-shadow: -15px 0 50px rgba(0,0,0,0.5);
    --echo-sidebar-border: rgba(255,255,255,0.07);

    /* 品牌粉家族夜间中和：不跟皮肤，统一中性浅灰（同 --accent） */
    --brand-pink:            #E0E0E0;
    --brand-pink-hot:        #E0E0E0;
    --brand-pink-light:      rgba(224,224,224,0.18);
    --brand-blue:            #E0E0E0;
    --brand-purple:          #E0E0E0;
    --accent-blue:           #E0E0E0;
    --notice-accent:         #E0E0E0;
    --api-accent:            #E0E0E0;
    --nav-text:              #E0E0E0;
    --other-text:            #E0E0E0;
    --sp-btn-primary-bg:     #E0E0E0;
    --sp-btn-primary-color:  #121212;
    --sp-btn-primary-shadow: 0 8px 25px rgba(0,0,0,0.5);
    --sp-btn-secondary-bg:   #1E1E1E;
    --sp-btn-secondary-color:#E0E0E0;
}

/* 遮罩（无变量，单独给夜间） */
body.dark-mode #sidebar-mask,
body.night #sidebar-mask {
    background: rgba(0, 0, 0, 0.6);
}

/* 范围滑块（无变量，单独压色） */
body.dark-mode #echo-sidebar input[type=range]::-webkit-slider-runnable-track,
body.night #echo-sidebar input[type=range]::-webkit-slider-runnable-track {
    background: rgba(255,255,255,0.1);
}
body.dark-mode #echo-sidebar input[type=range]::-webkit-slider-thumb,
body.night #echo-sidebar input[type=range]::-webkit-slider-thumb {
    background: #E0E0E0;
}

/* 原生 select / option */
body.dark-mode #echo-sidebar select,
body.night #echo-sidebar select {
    background: #1E1E1E;
    color: #E0E0E0;
    border-color: rgba(255,255,255,0.07);
}
body.dark-mode #echo-sidebar select option,
body.night #echo-sidebar select option {
    background: #1E1E1E;
    color: #E0E0E0;
}

/* 兜底：子面板内任何残留浅底 div 强制贴夜间 */
body.dark-mode #echo-sidebar div[style*="background: #f"],
body.dark-mode #echo-sidebar div[style*="background:#f"],
body.dark-mode #echo-sidebar div[style*="background: white"],
body.dark-mode #echo-sidebar div[style*="background:white"],
body.night #echo-sidebar div[style*="background: #f"],
body.night #echo-sidebar div[style*="background:#f"],
body.night #echo-sidebar div[style*="background: white"],
body.night #echo-sidebar div[style*="background:white"] {
    background: #1E1E1E !important;
    color: #E0E0E0;
}

/* ===== 全局（非 #echo-sidebar 作用域）夜间项，必须保留 ===== */
/* 历史记录 / 礼物（在侧边栏外的容器里渲染） */
body.dark-mode .echo-history-item,
body.night .echo-history-item,
body.dark-mode .echo-gift-btn-history,
body.night .echo-gift-btn-history {
    background: #1E1E1E;
    border: 1px solid rgba(255,255,255,0.07);
    color: #E0E0E0;
}

/* sb-select 下拉（绝对定位，可能挂到 body 上，故全局压色） */
body.dark-mode .sb-select-dropdown,
body.dark-mode .sb-custom-select .sb-select-dropdown,
body.night .sb-select-dropdown,
body.night .sb-custom-select .sb-select-dropdown,
body.dark-mode #sb-api-config-dropdown,
body.night #sb-api-config-dropdown {
    background: #1E1E1E;
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
body.dark-mode .sb-select-option,
body.night .sb-select-option {
    color: #999999;
}
body.dark-mode .sb-select-option:hover,
body.night .sb-select-option:hover {
    background: rgba(255,255,255,0.05);
    color: #E0E0E0;
}
body.dark-mode .sb-custom-select .sb-select-trigger,
body.dark-mode [id*="sb-select-trigger"],
body.dark-mode [class*="sb-api-config-select"],
body.night .sb-custom-select .sb-select-trigger,
body.night [id*="sb-select-trigger"],
body.night [class*="sb-api-config-select"] {
    background: #0A0A0A;
    border: 1px solid rgba(255,255,255,0.07);
    color: #E0E0E0;
    box-shadow: none;
}

/* ==================== Utility Classes (replaces inline styles) ==================== */

/* gc-row 箭头图标 */
#echo-sidebar .gc-row-arrow {
    color: var(--sp-back-color);
    font-size: 16px;
    flex-shrink: 0;
}

/* 辅助说明文字 */
#echo-sidebar .sb-hint {
    font-size: 11px;
    color: var(--sp-back-color);
}
#echo-sidebar .sb-hint-sm {
    font-size: 11px;
    color: var(--sp-back-color);
    text-align: center;
    margin-top: 6px;
}
#echo-sidebar .sb-hint-center {
    font-size: 11px;
    color: var(--sp-back-color);
    text-align: center;
}
#echo-sidebar .sb-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-back-hover-color);
    margin-bottom: 8px;
}
#echo-sidebar .sb-section-label-sm {
    font-size: 11px;
    color: var(--sp-back-color);
    margin-bottom: 4px;
}

/* toggle 行 */
#echo-sidebar .sb-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}
#echo-sidebar .sb-toggle-item + .sb-toggle-item,
#echo-sidebar .sb-toggle-item.bordered {
    border-bottom: 1px solid var(--sc-header-border-color);
}

/* glass-card 紧凑变体 */
#echo-sidebar .glass-card-sm {
    padding: 10px;
}
#echo-sidebar .glass-card-md {
    padding: 12px;
}
#echo-sidebar .glass-card-lg {
    padding: 16px;
}

/* 危险警告卡片变体 */
#echo-sidebar .glass-card-warn {
    background: rgba(255, 235, 238, 0.4);
    border-color: rgba(255, 205, 210, 0.5);
}
body.dark-mode #echo-sidebar .glass-card-warn,
body.night #echo-sidebar .glass-card-warn {
    background: rgba(239, 83, 80, 0.08);
    border-color: rgba(239, 83, 80, 0.2);
}

/* status 文字 */
#echo-sidebar .sb-status-text {
    font-size: 11px;
    color: var(--sp-back-color);
}

/* 状态指示点 */
#echo-sidebar .sb-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    display: inline-block;
    flex-shrink: 0;
}

/* select 触发器 —— 复刻美化稿：浅内凹槽（写死内阴影，--shadow-embed 在本作用域=none） */
#echo-sidebar .sb-select-trigger {
    font-size: 14px;
    font-weight: 600;
    padding: 14px 16px;
    width: 100%;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--navbar-border);
    border-radius: 16px;
    color: var(--topbar-text);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.08);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}
#echo-sidebar .sb-select-trigger i {
    color: var(--topbar-sub);
    transition: transform 0.3s;
}
#echo-sidebar .sb-select-trigger.open i {
    transform: rotate(180deg);
    color: var(--topbar-text);
}
body.dark-mode #echo-sidebar .sb-select-trigger,
body.night #echo-sidebar .sb-select-trigger {
    background: rgba(0,0,0,0.25);
}

/* select 下拉卡 —— 白卡浮层（美化稿）：白底 + 圆角 + 柔投影 + 内边距 */
#echo-sidebar .sb-select-dropdown {
    background: var(--bubble-other-bg, #fff);
    border: 1px solid var(--navbar-border);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 6px;
}

/* select 选项行 —— 选中 = 陶瓷白凸块/浅内嵌（深字 + 描边），不带任何主题实色/粉 */
#echo-sidebar .sb-select-option {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--topbar-sub);
    transition: background 0.15s;
}
#echo-sidebar .sb-select-option:hover {
    background: rgba(0, 0, 0, 0.03);
}
#echo-sidebar .sb-select-option.active {
    background: var(--echo-inner-bg, #f5f4f1);
    color: var(--topbar-text);
    font-weight: 800;
    border: 1px solid var(--navbar-border);
}
body.dark-mode #echo-sidebar .sb-select-option.active,
body.night #echo-sidebar .sb-select-option.active {
    background: var(--bubble-me-bg);
    color: var(--bubble-me-text);
    border-color: transparent;
}

/* regex 文件夹行 */
#echo-sidebar .sb-regex-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 4px 0;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
#echo-sidebar .sb-regex-row:hover {
    background: rgba(0, 0, 0, 0.04);
}
#echo-sidebar .sb-regex-name {
    flex: 1;
    font-size: 13px;
    color: var(--sp-back-hover-color);
}
#echo-sidebar .sb-regex-count {
    font-size: 11px;
    color: var(--sp-back-color);
}
#echo-sidebar .sb-regex-empty {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

/* 好感度颜色态 */
#echo-sidebar .affection-fill-infinity {
    background: linear-gradient(90deg, #e91e63, #ff9800, #e91e63);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}
#echo-sidebar .affection-fill-negative {
    background: linear-gradient(90deg, #2c3e50, #34495e);
}

/* token 面板 */
#echo-sidebar .td-collapse {
    overflow: hidden;
    transition: max-height 0.3s ease;
}
#echo-sidebar .td-collapse-inner {
    padding-top: 8px;
}
#echo-sidebar .td-grid-2col {
    grid-template-columns: repeat(2, 1fr);
}
#echo-sidebar .td-context-section {
    margin-top: 8px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 5%, transparent);
    border-radius: 8px;
}
body.dark-mode #echo-sidebar .td-context-section,
body.night #echo-sidebar .td-context-section {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 4%, transparent);
}
#echo-sidebar .td-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#echo-sidebar .td-threshold-btn {
    font-size: 10px;
    color: var(--brand-pink, var(--topbar-text, #2C2A29));
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--echo-accent, #2C2A29) 20%, transparent);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
#echo-sidebar .td-threshold-btn:hover {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 15%, transparent);
}
#echo-sidebar .td-compress-wrap {
    margin-top: 4px;
}
#echo-sidebar .td-context-limit-label {
    font-size: 9px;
    color: var(--sp-back-color);
    margin-left: 6px;
}

/* 旁白频率/音色等行内面板 —— 装 chip 的 .sb-inner-row 也要做成凹槽
   （JS 里频率三连 chip 的父容器是 .sb-inner-row 而非 .sb-chip-wrap）。
   .sb-inner-row-pad 变体装的是按钮、不套槽，故 :not 排除。 */
#echo-sidebar .sb-inner-row:not(.sb-inner-row-pad) {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px;
    background: rgba(0,0,0,0.04);
    border-radius: 18px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.10);
    overflow-x: auto;
    scrollbar-width: none;
}
#echo-sidebar .sb-inner-row:not(.sb-inner-row-pad)::-webkit-scrollbar {
    display: none;
}
#echo-sidebar .sb-inner-row.sb-inner-row-pad {
    padding: 0 10px 10px;
}
body.dark-mode #echo-sidebar .sb-inner-row:not(.sb-inner-row-pad),
body.night #echo-sidebar .sb-inner-row:not(.sb-inner-row-pad) {
    background: rgba(0,0,0,0.22);
}
#echo-sidebar .sb-inner-label {
    font-size: 11px;
    color: var(--sp-back-color);
    margin-bottom: 6px;
}

/* 世界书/灵境 chip wrap —— 复刻美化稿的「内浅槽」：浅灰底 + 内阴影。
   注意：本作用域 --shadow-embed 被全局拍平成 none，故内阴影【写死】，
   否则槽不可见、chip 看着像裸贴（这是之前翻车的根因）。 */
#echo-sidebar .sb-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: rgba(0,0,0,0.04);
    border-radius: 18px;
    padding: 6px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.10);
}
#echo-sidebar .sb-chip-wrap.scrollable {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
#echo-sidebar .sb-chip-wrap.scrollable::-webkit-scrollbar {
    display: none;
}
body.dark-mode #echo-sidebar .sb-chip-wrap,
body.night #echo-sidebar .sb-chip-wrap {
    background: rgba(0,0,0,0.22);
}
#echo-sidebar .sb-chip-hint {
    font-size: 11px;
    color: var(--sp-back-color);
    margin-top: 8px;
}

/* ---- additional utility classes ---- */
#echo-sidebar .sb-notif-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--sp-back-hover-color);
    margin-bottom: 2px;
}
#echo-sidebar .sb-notif-desc {
    font-size: 12px;
    color: var(--text-muted);
}
#echo-sidebar .sb-icon-blue { color: var(--icon-blue, #2196f3); }
#echo-sidebar .sb-icon-orange { color: var(--icon-gold, #bda077); }

#echo-sidebar .sb-info-box {
    margin-top: 8px;
    padding: 8px;
    background: rgba(107, 78, 88, 0.05);
    border-radius: 6px;
    border-left: 3px solid var(--accent);
}
body.dark-mode #echo-sidebar .sb-info-box,
body.night #echo-sidebar .sb-info-box {
    background: rgba(107, 78, 88, 0.08);
}
#echo-sidebar .sb-info-text {
    font-size: 11px;
    color: var(--accent);
    line-height: 1.4;
}

#echo-sidebar .sb-mb-10 { margin-bottom: 10px; }
#echo-sidebar .sb-mr { margin-right: 6px; }

#echo-sidebar .sb-badge-pink {
    font-size: 9px;
    color: var(--brand-pink, #e991b4);
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 15%, transparent);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    margin-left: 4px;
}

/* ---- API 面板 / 空状态 工具类 ---- */
#echo-sidebar .sb-empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
}
#echo-sidebar .sb-empty-title {
    font-size: 14px;
    color: var(--sp-back-hover-color);
    margin-bottom: 16px;
    font-weight: 500;
}
#echo-sidebar .sb-empty-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
}

/* fetch models 按钮 */
#echo-sidebar .sb-fetch-btn {
    padding: 6px 14px;
    font-size: 11px;
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 12%, transparent);
    border: none;
    border-radius: 12px;
    color: var(--icon-taro, #6b4e58);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(107, 78, 88, 0.08);
    transition: all 0.2s;
}
#echo-sidebar .sb-fetch-btn:hover {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 20%, transparent);
    box-shadow: 0 4px 12px rgba(107, 78, 88, 0.14);
}
body.dark-mode #echo-sidebar .sb-fetch-btn,
body.night #echo-sidebar .sb-fetch-btn {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    box-shadow: none;
}

/* sp-card 内嵌卡片 */
#echo-sidebar .sp-card {
    background: var(--sp-back-bg);
    border-radius: 12px;
    border: 1px solid var(--sp-back-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    padding: 14px;
}
body.dark-mode #echo-sidebar .sp-card,
body.night #echo-sidebar .sp-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

/* sb-select-dropdown（sb-api-config-dropdown 等） */
#echo-sidebar .sb-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--sp-back-bg);
    border: 1px solid var(--sp-back-border);
    border-radius: 12px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
}
body.dark-mode #echo-sidebar .sb-select-dropdown,
body.night #echo-sidebar .sb-select-dropdown {
    background: var(--echo-inner-bg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ========================================================================== */
/* Utility Classes — added during JS inline-style cleanup                      */
/* ========================================================================== */

/* --- Layout helpers --- */
#echo-sidebar .sb-flex-center-gap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#echo-sidebar .sb-flex-gap-12     { display: flex; align-items: center; gap: 12px; }
#echo-sidebar .sb-flex-col-gap    { display: flex; flex-direction: column; gap: 8px; }
#echo-sidebar .sb-flex1           { flex: 1; }
#echo-sidebar .sb-self-end        { align-self: flex-end; }
#echo-sidebar .sb-cursor-pointer  { cursor: pointer; }
#echo-sidebar .sb-full-width      { width: 100%; }
#echo-sidebar .sb-rel-z80         { position: relative; z-index: 80; }
#echo-sidebar .sb-rel-z90         { position: relative; z-index: 90; }
#echo-sidebar .sp-card-z100       { position: relative; z-index: 100; }
#echo-sidebar .sb-select-z10      { position: relative; z-index: 10; }
#echo-sidebar .sb-select-z20      { position: relative; z-index: 20; }
#echo-sidebar .sb-select-rel      { position: relative; }
#echo-sidebar .sb-empty-center    { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; text-align: center; }

/* --- Spacing --- */
#echo-sidebar .sb-mb-8  { margin-bottom: 8px; }
#echo-sidebar .sb-mb-12 { margin-bottom: 12px; }
#echo-sidebar .sb-mb-16 { margin-bottom: 16px; }
#echo-sidebar .sb-mb-20 { margin-bottom: 20px; }
#echo-sidebar .sb-mt-8  { margin-top: 8px; }
#echo-sidebar .sb-mt-12 { margin-top: 12px; }
#echo-sidebar .sb-mt-16 { margin-top: 16px; }
#echo-sidebar .sb-mt-28 { margin-top: 28px; }

/* --- Icon helpers --- */
#echo-sidebar .sb-mr         { margin-right: 4px; }
#echo-sidebar .sb-icon-11    { font-size: 11px; }
#echo-sidebar .sb-icon-14    { font-size: 14px; }
#echo-sidebar .sb-icon-16    { font-size: 16px; }
#echo-sidebar .sb-icon-18    { font-size: 18px; }
#echo-sidebar .sb-icon-20    { font-size: 20px; }
#echo-sidebar .sb-icon-24    { font-size: 24px; }
#echo-sidebar .sb-icon-28    { font-size: 28px; }
#echo-sidebar .sb-icon-32    { font-size: 32px; }
#echo-sidebar .sb-icon-muted      { color: var(--sc-area-text-muted); }
#echo-sidebar .sb-icon-blue       { color: var(--icon-blue, #42a5f5); }
#echo-sidebar .sb-icon-blue-check { color: var(--icon-blue, #42a5f5); }
#echo-sidebar .sb-icon-blue-light { color: #90caf9; }
#echo-sidebar .sb-icon-orange     { color: var(--icon-gold, #bda077); }
#echo-sidebar .sb-icon-red        { color: var(--icon-red, #b56b6f); }

/* --- td-grid --- */
#echo-sidebar .td-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* --- Context panel --- */
#echo-sidebar .sb-ctx-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-area-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
#echo-sidebar .sb-ctx-set-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--sp-back-bg);
    border: 1px solid var(--sp-back-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--sc-area-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

/* --- Hints --- */
#echo-sidebar .sb-hint-indent { padding-left: 12px; font-size: 11px; color: var(--sc-area-text-muted); }
#echo-sidebar .sb-hint-pink   { font-size: 11px; color: var(--dock-send-bg, var(--topbar-text, #2C2A29)); font-weight: 700; }
#echo-sidebar .sb-hint-block  { font-size: 12px; color: var(--sc-area-text-muted); line-height: 1.5; padding: 6px 0; }
#echo-sidebar .sb-limit-val   { font-size: 11px; color: var(--sc-area-text-muted); }

/* --- Chip rows --- */
/* 角色视角/用户视角/语音频率三组的 chip 容器，与 .sb-chip-wrap 同款浅内凹槽。
   内阴影写死（本作用域 --shadow-embed 被全局拍平成 none）。 */
#echo-sidebar .sb-chip-nowrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(0,0,0,0.04);
    border-radius: 18px;
    padding: 6px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.10);
}
#echo-sidebar .sb-chip-nowrap::-webkit-scrollbar { display: none; }
body.dark-mode #echo-sidebar .sb-chip-nowrap,
body.night #echo-sidebar .sb-chip-nowrap {
    background: rgba(0,0,0,0.22);
}

/* --- Labels --- */
#echo-sidebar .sb-label-mt { margin-top: 10px; }
#echo-sidebar .sb-affection-inf { font-size: 22px; color: #e91e63; }
#echo-sidebar .sb-preamble-status { font-size: 11px; color: var(--sc-area-text-muted); }
#echo-sidebar .sb-preamble-status.set { color: var(--icon-green, #8a9a86); }
#echo-sidebar .sb-danger-title { font-size: 13px; font-weight: 600; color: var(--icon-red, #b56b6f); }

/* --- Inner voice freq wrap --- */
#echo-sidebar #sb-inner-voice-freq-wrap.hidden { display: none; }

/* --- Group chat row variants --- */
#echo-sidebar .gc-row-col {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
#echo-sidebar .sb-leave-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--icon-red, #b56b6f);
    font-size: 14px;
    cursor: pointer;
}

/* --- sp-header variants：用极淡主题色调染，标题/返回为深色仍可读（与夜间 7% 一致） --- */
#echo-sidebar .sp-header-api {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 6%, var(--bubble-other-bg, #fff));
}
#echo-sidebar .sp-header-bubble {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 6%, var(--bubble-other-bg, #fff));
}

/* --- sp-label variants --- */
#echo-sidebar .sp-label-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#echo-sidebar .sp-label-flex-gap {
    display: flex;
    align-items: center;
    gap: 8px;
}
#echo-sidebar .sp-label-lg {
    font-size: 15px;
    font-weight: 600;
}
#echo-sidebar .sp-hint-mt {
    margin-top: 6px;
    font-size: 11px;
    color: var(--sc-area-text-muted);
}
#echo-sidebar .sb-scheme-count {
    font-size: 11px;
    color: var(--sc-area-text-muted);
}
#echo-sidebar .sb-row-pad {
    padding: 8px 0;
}

/* --- Info/warn/tips cards --- */
#echo-sidebar .sb-info-card-teal {
    background: rgba(107, 78, 88, 0.08);
    border: 1px solid rgba(107, 78, 88, 0.22);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--icon-taro, #6b4e58);
}
#echo-sidebar .sb-warn-card {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.25);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--icon-gold, #bda077);
}
#echo-sidebar .sb-tips-card {
    background: rgba(107, 78, 88, 0.05);
    border: 1px solid rgba(107, 78, 88, 0.1);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--sc-area-text);
}

/* --- Streaming toggle row --- */
#echo-sidebar .sb-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}
#echo-sidebar .sb-setting-label {
    font-size: 13px;
    color: var(--sc-area-text);
}
#echo-sidebar .sb-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
#echo-sidebar .sb-toggle-input {
    display: none;
}
#echo-sidebar .sb-toggle-slider {
    position: relative;
    width: var(--toggle-width, 44px);
    height: var(--toggle-height, 24px);
    background: var(--toggle-track);
    border-radius: var(--toggle-radius, 12px);
    transition: background 0.3s;
    flex-shrink: 0;
}
#echo-sidebar .sb-toggle-slider::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: calc(var(--toggle-height, 24px) - 4px);
    height: calc(var(--toggle-height, 24px) - 4px);
    border-radius: 50%;
    background: var(--toggle-knob, #fff);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
#echo-sidebar .sb-toggle-input:checked + .sb-toggle-slider {
    background: var(--toggle-track-active);
}
#echo-sidebar .sb-toggle-input:checked + .sb-toggle-slider::after {
    transform: translateX(calc(var(--toggle-width, 44px) - var(--toggle-height, 24px)));
}
#echo-sidebar .sb-toggle-knob { display: none; }

/* --- Action buttons --- */
#echo-sidebar .sb-btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
#echo-sidebar .sb-btn-teal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 12%, transparent);
    border: 1px solid rgba(107, 78, 88, 0.28);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--icon-taro, #6b4e58);
    cursor: pointer;
    transition: all 0.2s;
}
#echo-sidebar .sb-btn-teal:hover {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 20%, transparent);
}
#echo-sidebar .sb-btn-teal-grad {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 14%, transparent);
    color: #6b4e58;
    border: none;
}
#echo-sidebar .sb-btn-fw {
    width: 100%;
    justify-content: center;
}
#echo-sidebar .sb-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}
#echo-sidebar .sb-btn-xs {
    padding: 4px 10px;
    font-size: 11px;
}
#echo-sidebar .sb-btn-nomargin {
    margin: 0;
}
#echo-sidebar .sb-btn-secondary {
    background: var(--sp-btn-secondary-bg);
    border: 1px solid var(--sp-back-border);
    color: var(--sp-btn-secondary-color);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}
#echo-sidebar .sb-invite-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(107, 78, 88, 0.08);
    border: 1px dashed rgba(107, 78, 88, 0.28);
    border-radius: 10px;
    font-size: 13px;
    color: var(--icon-taro, #6b4e58);
    cursor: pointer;
    width: 100%;
    justify-content: center;
}
#echo-sidebar .sb-api-test-result {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,0.04);
    color: var(--sc-area-text);
    margin-top: 6px;
    display: none;
}

/* --- Model custom input --- */
#echo-sidebar .sb-model-custom-input {
    flex: 1;
    background: var(--sp-input-bg);
    border: 1px solid var(--sp-back-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--sp-input-color);
}
#echo-sidebar .sb-select-trigger-sm {
    font-size: 12px;
    padding: 5px 10px;
}
#echo-sidebar .sb-select-hint-item {
    font-size: 11px;
    color: var(--sc-area-text-muted);
    padding: 2px 0;
}
#echo-sidebar .sb-select-hint-pad {
    padding: 6px 0;
}
#echo-sidebar .sb-select-option-custom {
    font-style: italic;
    color: var(--icon-blue, #42a5f5);
}

/* --- Bubble preview --- */
#echo-sidebar .sb-bubble-preview {
    background: var(--sp-body-bg);
    border: 1px solid var(--sp-body-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Grid 2col --- */
#echo-sidebar .sb-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* --- Reference textarea --- */
#echo-sidebar .sb-reference-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
#echo-sidebar .sb-reference-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-area-text);
}
#echo-sidebar .sb-arrow-anim {
    transition: transform 0.3s;
}
#echo-sidebar .sb-textarea-ref {
    width: 100%;
    min-height: 80px;
    background: var(--sp-input-bg);
    border: 1px solid var(--sp-back-border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--sp-input-color);
    resize: vertical;
    box-shadow: var(--sp-input-shadow);
}
#echo-sidebar .sb-textarea-code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
}
#echo-sidebar .sb-textarea-inherit {
    font-family: inherit;
}
#echo-sidebar .sb-textarea-compact {
    min-height: 60px;
    padding: 8px 10px;
}
#echo-sidebar .sb-textarea-tall {
    min-height: 120px;
}
#echo-sidebar .sb-textarea-xl {
    min-height: 160px;
}

/* --- Preview card --- */
#echo-sidebar .sb-preview-card {
    background: var(--sp-body-bg);
    border: 1px solid var(--sp-body-border);
    border-radius: 12px;
    padding: 12px 14px;
}
#echo-sidebar .sb-preview-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--sc-area-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
#echo-sidebar .sb-preview-text {
    font-size: 13px;
    color: var(--sc-area-text);
    line-height: 1.5;
}

/* --- sp-divider --- */
#echo-sidebar .sp-divider {
    height: 1px;
    background: var(--sc-area-divider);
    margin: 4px 0;
}

/* --- Narration slider --- */
#echo-sidebar .sp-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
#echo-sidebar .sp-slider-label {
    font-size: 13px;
    color: var(--sc-area-text);
    min-width: 60px;
    flex-shrink: 0;
}
#echo-sidebar .sp-font-size-val {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-area-text);
    min-width: 32px;
    text-align: right;
    flex-shrink: 0;
}

/* --- AI block --- */
#echo-sidebar .sb-ai-block {
    background: var(--echo-inner-bg, rgba(0,0,0,0.03));
    border: 1px solid rgba(107, 78, 88, 0.11);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#echo-sidebar .sb-ai-block-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--icon-taro, #6b4e58);
}
#echo-sidebar .sb-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-area-text-muted);
    margin-bottom: 4px;
}
#echo-sidebar .sb-gen-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 12%, transparent);
    border: 1px solid rgba(107, 78, 88, 0.28);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--icon-taro, #6b4e58);
    cursor: pointer;
    transition: all 0.2s;
}

/* --- Scenario hints --- */
#echo-sidebar .sb-scenario-hint {
    font-size: 11px;
    color: var(--sc-area-text-muted);
    line-height: 1.5;
    padding: 4px 0;
}

/* --- Role/center helpers --- */
#echo-sidebar .sb-role-center {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

/* --- Video section --- */
#echo-sidebar .sb-video-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--sc-area-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 12px 0 8px;
}
#echo-sidebar .sb-video-title-blue { color: var(--icon-blue, #42a5f5); }
#echo-sidebar .sb-video-title-red  { color: var(--icon-red, #b56b6f); }
#echo-sidebar .sb-video-sub-hint {
    font-size: 11px;
    color: var(--sc-area-text-muted);
    line-height: 1.5;
    margin-bottom: 8px;
}
#echo-sidebar .sb-video-fill {
    flex: 1;
    min-height: 0;
}
#echo-sidebar .sb-video-tip {
    font-size: 11px;
    color: var(--sc-area-text-muted);
    text-align: center;
    padding: 6px 0;
}
#echo-sidebar .sb-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    border: 2px dashed rgba(107, 78, 88, 0.2);
    border-radius: 12px;
    font-size: 13px;
    color: var(--sc-area-text-muted);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
#echo-sidebar .sb-drop-zone:hover {
    border-color: rgba(107, 78, 88, 0.35);
    background: rgba(107, 78, 88, 0.03);
}

/* --- Input helpers --- */
#echo-sidebar .sb-input-xs {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 8px;
}
#echo-sidebar .sb-input-nomargin {
    margin: 0;
}
#echo-sidebar .sb-label-center {
    text-align: center;
}
#echo-sidebar .sb-hint-center {
    text-align: center;
    font-size: 11px;
    color: var(--sc-area-text-muted);
}

/* --- Group avatar --- */
#echo-sidebar .sb-group-avatar-img {
    border-radius: 10px;
    object-fit: cover;
}
#echo-sidebar .sb-avatar-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius, 12px);
}
#echo-sidebar .sb-avatar-center {
    display: flex;
    justify-content: center;
}
#echo-sidebar .sb-avatar-hint {
    font-size: 11px;
    color: var(--sc-area-text-muted);
    text-align: center;
}

/* --- Member list --- */
#echo-sidebar .member-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--sc-area-divider);
}
#echo-sidebar .member-list-row:last-child {
    border-bottom: none;
}
#echo-sidebar .affection-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
#echo-sidebar .affection-label {
    font-size: 12px;
    color: var(--sc-area-text-muted);
    min-width: 60px;
}
#echo-sidebar .glass-card-no-mb {
    margin-bottom: 0;
}
#echo-sidebar .sb-persona-desc {
    font-size: 12px;
    color: var(--sc-area-text);
    line-height: 1.5;
}
#echo-sidebar .sb-member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
}

/* --- Empty state hints --- */
#echo-sidebar .sb-empty-hint {
    font-size: 13px;
    color: var(--sc-area-text-muted);
    text-align: center;
    padding: 16px;
}
#echo-sidebar .sb-empty-worldbook,
#echo-sidebar .sb-empty-voice {
    font-size: 12px;
    color: var(--sc-area-text-muted);
    text-align: center;
    padding: 12px;
}

/* --- Checkbox --- */
#echo-sidebar .sb-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--toggle-track-active);
    cursor: pointer;
    flex-shrink: 0;
}

/* --- Regex count badge --- */
#echo-sidebar .sb-regex-count {
    font-size: 11px;
    color: var(--sc-area-text-muted);
    margin-left: auto;
    flex-shrink: 0;
}

/* ====== Dark mode overrides for utility classes ====== */
body.dark-mode #echo-sidebar .sb-info-card-teal,
body.night #echo-sidebar .sb-info-card-teal {
    background: rgba(107, 78, 88, 0.04);
    border-color: rgba(107, 78, 88, 0.08);
}
body.dark-mode #echo-sidebar .sb-warn-card,
body.night #echo-sidebar .sb-warn-card {
    background: rgba(255, 193, 7, 0.05);
    border-color: rgba(255, 193, 7, 0.15);
}
body.dark-mode #echo-sidebar .sb-tips-card,
body.night #echo-sidebar .sb-tips-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}
body.dark-mode #echo-sidebar .sb-ai-block,
body.night #echo-sidebar .sb-ai-block {
    background: rgba(107, 78, 88, 0.02);
    border-color: rgba(107, 78, 88, 0.06);
}
body.dark-mode #echo-sidebar .sb-btn-teal,
body.night #echo-sidebar .sb-btn-teal {
    background: rgba(107, 78, 88, 0.06);
    border-color: rgba(107, 78, 88, 0.11);
}
body.dark-mode #echo-sidebar .sb-bubble-preview,
body.night #echo-sidebar .sb-bubble-preview {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode #echo-sidebar .sb-preview-card,
body.night #echo-sidebar .sb-preview-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode #echo-sidebar .sb-drop-zone,
body.night #echo-sidebar .sb-drop-zone {
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode #echo-sidebar .sb-avatar-card,
body.night #echo-sidebar .sb-avatar-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}
body.dark-mode #echo-sidebar .sb-textarea-ref,
body.night #echo-sidebar .sb-textarea-ref {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
body.dark-mode #echo-sidebar .sb-ctx-set-btn,
body.night #echo-sidebar .sb-ctx-set-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}
body.dark-mode #echo-sidebar .sb-btn-secondary,
body.night #echo-sidebar .sb-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}
body.dark-mode #echo-sidebar .sp-header-api,
body.night #echo-sidebar .sp-header-api {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 7%, transparent);
}
body.dark-mode #echo-sidebar .sp-header-bubble,
body.night #echo-sidebar .sp-header-bubble {
    background: color-mix(in srgb, var(--echo-accent, #2C2A29) 7%, transparent);
}

/* API type badge */
#echo-sidebar .sb-api-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    opacity: 0.9;
}

/* Chip selected state - 陶瓷白凸块（白底+深字+描边+投影），不带主题实色 */
.directive-chip.active, .sb-chip.active, .directive-chip:active {
    background: var(--bubble-other-bg, #fff) !important;
    color: var(--topbar-text) !important;
    border-color: var(--navbar-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transform: scale(1.05);
}
.startrack-chip.active, .startrack-chip:active {
    background: var(--bubble-other-bg, #fff) !important;
    color: var(--topbar-text) !important;
    border-color: var(--navbar-border) !important;
}
body.dark-mode .directive-chip.active, body.dark-mode .sb-chip.active,
body.dark-mode .startrack-chip.active {
    background: var(--bubble-me-bg) !important;
    color: var(--bubble-me-text) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* === API 测试结果（日夜共用，原 inline 颜色已搬到这里） === */
#echo-sidebar .sb-api-test-result {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.5;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#echo-sidebar .sb-api-test-result.sb-test-loading {
    background: rgba(107, 78, 88, 0.06);
    color: var(--accent);
    border: 1px solid rgba(107, 78, 88, 0.18);
}
#echo-sidebar .sb-api-test-result.sb-test-success {
    background: rgba(67, 206, 162, 0.12);
    color: #2e7d32;
    border: 1px solid rgba(67, 206, 162, 0.3);
}
#echo-sidebar .sb-api-test-result.sb-test-error {
    background: rgba(244, 67, 54, 0.12);
    color: #c62828;
    border: 1px solid rgba(244, 67, 54, 0.3);
}
body.dark-mode #echo-sidebar .sb-api-test-result.sb-test-loading,
body.night #echo-sidebar .sb-api-test-result.sb-test-loading {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode #echo-sidebar .sb-api-test-result.sb-test-success,
body.night #echo-sidebar .sb-api-test-result.sb-test-success {
    background: rgba(67, 206, 162, 0.15);
    color: #6ee7b7;
    border-color: rgba(67, 206, 162, 0.3);
}
body.dark-mode #echo-sidebar .sb-api-test-result.sb-test-error,
body.night #echo-sidebar .sb-api-test-result.sb-test-error {
    background: rgba(244, 67, 54, 0.18);
    color: #fca5a5;
    border-color: rgba(244, 67, 54, 0.35);
}

/* sb-select trigger open 态：日夜各自的 border 高亮 */
#echo-sidebar .sb-select-trigger.open {
    border-color: rgba(107, 78, 88, 0.35);
}
body.dark-mode #echo-sidebar .sb-select-trigger.open,
body.night #echo-sidebar .sb-select-trigger.open {
    border-color: rgba(255, 255, 255, 0.18);
}