/* ==========================================================================
   echo-nav-tags.css
   单聊导航栏第二行 m-tag 横滚条 + 三个新抽屉 (IF / Theme / Role) +
   底栏羽毛笔下移样式

   规则：
   - 不使用 backdrop-filter（毛玻璃禁用）
   - 不使用 !important
   - 不使用内联 style
   - 全部基于 CSS 变量，方便用户自定义 CSS 覆盖
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   1. 变量层（默认值；与现有 --topbar-* / --navbar-* / --drawer-* 体系兼容）
   ────────────────────────────────────────────────────────────────────────── */
.single-chat-page {
    --etag-bg:           var(--navbar-bg, #F5F4F1);
    --etag-border:       var(--navbar-border, rgba(0, 0, 0, 0.08));
    --etag-text:         var(--topbar-name-color, #2C2A29);
    --etag-sub:          var(--topbar-meta-color, #8C8580);
    --etag-active-bg:    var(--bubble-me-bg, #2C2A29);
    --etag-active-text:  var(--bubble-me-text, #F5F4F1);

    --etag-row-pad-x:    16px;
    --etag-row-pad-y:    4px 16px 10px;
    --etag-gap:          8px;
    --etag-h:            26px;
    --etag-radius:       6px;
    --etag-fz:           11px;
    --etag-icon-fz:      13px;

    --enav-drawer-bg:        var(--drawer-bg, var(--bg-base, #F5F4F1));
    --enav-drawer-border:    var(--drawer-border, var(--navbar-border, rgba(0, 0, 0, 0.08)));
    --enav-drawer-item-bg:   var(--drawer-item-bg, rgba(0, 0, 0, 0.03));
    --enav-drawer-radius:    12px;

    --enav-toggle-w:         44px;
    --enav-toggle-h:         24px;
    --enav-toggle-track:     rgba(0, 0, 0, 0.1);
    --enav-toggle-track-on:  var(--etag-active-bg);
    --enav-toggle-knob:      #ffffff;
}

/* 暗色：托底覆盖 ——  绑到项目原生变量（--navbar-bg / --topbar-name-color / --topbar-meta-color），
   让单聊 m-tag 在夜间能跟着 7 套主题各自的暗色走，而不是退化到固定 fallback */
body.dark-mode .single-chat-page {
    --etag-bg:          var(--navbar-bg, #121212);
    --etag-border:      var(--navbar-border, rgba(255, 255, 255, 0.08));
    --etag-text:        var(--topbar-name-color, #E0E0E0);
    --etag-sub:         var(--topbar-meta-color, #888);
    --etag-active-bg:   var(--bubble-me-bg, #E0E0E0);
    --etag-active-text: var(--bubble-me-text, #121212);

    --enav-toggle-track: rgba(255, 255, 255, 0.15);
    --enav-toggle-knob:  #2c2a29;
}

/* ──────────────────────────────────────────────────────────────────────────
   2. 第二行：m-tag 横滚条（替代旧的 .sc-nav-row-2）
   ────────────────────────────────────────────────────────────────────────── */
.sc-nav-row-2.is-tags {
    display: flex;
    align-items: center;
    gap: var(--etag-gap);
    height: auto;
    padding: var(--etag-row-pad-y);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sc-nav-row-2.is-tags::-webkit-scrollbar { display: none; }

.m-tag {
    background: var(--etag-bg);
    border: 1px solid var(--etag-border);
    height: var(--etag-h);
    padding: 0 10px;
    border-radius: var(--etag-radius);
    font-size: var(--etag-fz);
    font-weight: 600;
    color: var(--etag-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.15s;
    user-select: none;
}
.m-tag:active {
    transform: scale(0.95);
    background: var(--etag-active-bg);
    color: var(--etag-active-text);
    border-color: var(--etag-active-bg);
}
.m-tag i {
    font-size: var(--etag-icon-fz);
    color: var(--etag-sub);
    transition: color 0.25s;
}
.m-tag:active i { color: var(--etag-active-text); }

/* 签名 m-tag：可输入态 */
.m-tag.bio-tag {
    font-weight: 500;
    color: var(--etag-sub);
    border-style: dashed;
    max-width: 60vw;
    overflow: hidden;
}
.m-tag.bio-tag i { color: var(--etag-sub); }
.m-tag.bio-tag .p-bio {
    flex: 1;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    outline: none;
    padding: 0;
    min-width: 60px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.m-tag.bio-tag .p-bio::placeholder { color: var(--etag-sub); opacity: 0.6; }
.m-tag.bio-tag .sc-bio-refresh {
    font-size: var(--etag-icon-fz);
    color: var(--etag-sub);
    cursor: pointer;
    flex-shrink: 0;
    padding: 2px;
}

/* IF / Theme / Role 三个 tag 选中态（抽屉打开时高亮） */
.m-tag.is-active {
    background: var(--etag-active-bg);
    color: var(--etag-active-text);
    border-color: var(--etag-active-bg);
}
.m-tag.is-active i { color: var(--etag-active-text); }

/* 抽屉遮罩（点击外部关闭抽屉） */
.enav-drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 899;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.enav-drawer-mask.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ──────────────────────────────────────────────────────────────────────────
   3. 三个新抽屉：复用现有 .clean-drawer 容器风格但走独立类名 .enav-drawer
       —— 不复用 .clean-drawer 是为了避开它内部那一堆 !important
   ────────────────────────────────────────────────────────────────────────── */
.enav-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom));
    z-index: 900;
    background: var(--enav-drawer-bg);
    border-top: 1px solid var(--enav-drawer-border);
    border-radius: 24px 24px 0 0;
    padding: 12px 16px 20px;
    display: none;
    flex-direction: column;
    gap: 12px;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    max-height: 60vh;
    overflow-y: auto;
}
.enav-drawer.is-open {
    display: flex;
    transform: translateY(0);
}
.enav-drawer .panel-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--enav-drawer-border);
    margin: 0 auto;
    flex-shrink: 0;
}
.enav-drawer .drawer-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--etag-sub);
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* 通用行（toggle 行 / 跳转行） */
.enav-row {
    background: var(--enav-drawer-item-bg);
    border: 1px solid var(--enav-drawer-border);
    border-radius: var(--enav-drawer-radius);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.enav-row-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--etag-text);
}
/* 抽屉行内的辅助说明小字（如夜间模式下"非全局"提示） */
.enav-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.enav-row-hint {
    font-size: 11px;
    color: var(--etag-sub);
    opacity: 0.8;
    line-height: 1.2;
}

/* toggle 开关 */
.enav-toggle {
    width: var(--enav-toggle-w);
    height: var(--enav-toggle-h);
    border-radius: calc(var(--enav-toggle-h) / 2);
    background: var(--enav-toggle-track);
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
    flex-shrink: 0;
}
.enav-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(var(--enav-toggle-h) - 4px);
    height: calc(var(--enav-toggle-h) - 4px);
    border-radius: 50%;
    background: var(--enav-toggle-knob);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}
.enav-toggle.is-on { background: var(--enav-toggle-track-on); }
.enav-toggle.is-on::after {
    transform: translateX(calc(var(--enav-toggle-w) - var(--enav-toggle-h)));
}

/* ───── IF 抽屉 ───── */
.enav-if-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.enav-if-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--enav-drawer-radius);
    background: var(--enav-drawer-item-bg);
    border: 1px solid var(--enav-drawer-border);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, border-color 0.2s;
}
.enav-if-item:active { transform: scale(0.98); }
.enav-if-item.is-active { border-color: var(--etag-text); }
.enav-if-item img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.enav-if-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.enav-if-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--etag-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enav-if-preview {
    font-size: 12px;
    color: var(--etag-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.enav-if-item-mark {
    color: var(--etag-text);
    font-size: 18px;
    flex-shrink: 0;
}
/* 管理按钮(重命名 / 删除) - 仅非原始线显示 */
.enav-if-manage {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 4px;
}
.enav-if-mgr-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--etag-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s, transform 0.1s, color 0.15s;
    padding: 0;
}
.enav-if-mgr-btn:active {
    background: rgba(0,0,0,0.06);
    transform: scale(0.92);
}
.enav-if-mgr-btn.enav-if-del:active {
    color: #d44;
}
body.dark-mode .enav-if-mgr-btn:active,
body.night .enav-if-mgr-btn:active {
    background: rgba(255,255,255,0.08);
}

/* 新建分支按钮 */
.enav-if-create {
    border-style: dashed;
    color: var(--etag-sub);
    justify-content: center;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 14px;
    gap: 6px;
}
.enav-if-create i { font-size: 16px; }

/* ───── Theme 抽屉 ───── */
.enav-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 6px 0 4px;
}
.enav-color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}
.enav-color-dot.is-active {
    border-color: var(--etag-text);
    transform: scale(1.1);
}
.enav-color-dot.custom {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    display: flex;
    align-items: center;
    justify-content: center;
}
.enav-color-dot.custom i {
    color: #ffffff;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    position: relative;
    z-index: 1;
}
.enav-color-dot.custom input[type="color"] {
    position: absolute;
    inset: -25%;
    width: 150%;
    height: 150%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* ───── Role 抽屉 ───── */
.enav-role-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 6px 4px 14px;
    scrollbar-width: none;
}
.enav-role-grid::-webkit-scrollbar { display: none; }
.enav-role-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s, transform 0.15s;
    flex-shrink: 0;
    min-width: 56px;
}
.enav-role-item:active { transform: scale(0.95); }
.enav-role-item.is-active { opacity: 1; }
.enav-role-item img {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.enav-role-item.is-active img {
    border-color: var(--etag-text);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.enav-role-item span {
    font-size: 11px;
    font-weight: 600;
    color: var(--etag-text);
    max-width: 60px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. 内置主题色（可被用户自定义 CSS 覆盖）
       —— 通过 #app-echo[data-echo-theme="..."] 限定到聊天页，不污染其他页
   ────────────────────────────────────────────────────────────────────────── */
#app-echo[data-echo-theme="default"] {
    /* 莫代尔粉（颜色(1).txt 默认） */
    --bg-color: #F0ECEE; --bg-screen: #F0ECEE; --echo-inner-bg: #F7F5F6;
    --dock-input-bg: #F0ECEE; --drawer-item-bg: #F0ECEE;
    --navbar-bg: var(--echo-card-bg, #FFFFFF); --dock-bg: var(--echo-card-bg, #FFFFFF);
    --drawer-bg: var(--echo-card-bg, #FFFFFF); --glass-bg: var(--echo-card-bg, #FFFFFF);
    --topbar-name-color: #3D2F34; --topbar-meta-color: #85767B; --topbar-bio-color: #85767B;
    --dock-input-text-color: #3D2F34; --dock-input-placeholder: rgba(154, 139, 144, 0.5);
    --dock-btn-icon-color: #85767B; --drawer-icon: #3D2F34;
    --sc-header-name-text: #3D2F34; --sc-header-back-icon: #3D2F34;
    --narr-ai: #85767B; --narr-user: #5C4751;
    --bubble-me-bg: #DFD0D5; --bubble-me-text: #4A3B40;
    --bubble-other-bg: var(--echo-card-bg, #FFFFFF); --bubble-other-text: #3D2F34;
    --dock-send-bg: #6B4E58; --dock-send-icon-color: var(--echo-card-bg, #FFFFFF);
    --toggle-track-active: #6B4E58;
    --navbar-border: rgba(107, 78, 88, 0.15); --dock-border: rgba(107, 78, 88, 0.15);
    --drawer-border: rgba(107, 78, 88, 0.15); --glass-border: rgba(107, 78, 88, 0.15);
    --topbar-line-color: rgba(107, 78, 88, 0.18);
}
#app-echo[data-echo-theme="pure-white"] {
    --bg-color: #FFFFFF; --bg-screen: #FFFFFF; --echo-inner-bg: #F9F9F9;
    --dock-input-bg: #F9F9F9; --drawer-item-bg: #F9F9F9;
    --navbar-bg: var(--echo-card-bg, #FFFFFF); --dock-bg: var(--echo-card-bg, #FFFFFF);
    --drawer-bg: var(--echo-card-bg, #FFFFFF); --glass-bg: var(--echo-card-bg, #FFFFFF);
    --topbar-name-color: #111111; --topbar-meta-color: #999999; --topbar-bio-color: #999999;
    --dock-input-text-color: #111111; --dock-input-placeholder: rgba(0, 0, 0, 0.35);
    --dock-btn-icon-color: #999999; --drawer-icon: #111111;
    --sc-header-name-text: #111111; --sc-header-back-icon: #111111;
    --narr-ai: #999999; --narr-user: #111111;
    --bubble-me-bg: #111111; --bubble-me-text: var(--echo-card-bg, #FFFFFF);
    --bubble-other-bg: var(--echo-card-bg, #FFFFFF); --bubble-other-text: #111111;
    --dock-send-bg: #111111; --dock-send-icon-color: var(--echo-card-bg, #FFFFFF);
    --toggle-track-active: #111111;
    --navbar-border: rgba(0, 0, 0, 0.06); --dock-border: rgba(0, 0, 0, 0.06);
    --drawer-border: rgba(0, 0, 0, 0.06); --glass-border: rgba(0, 0, 0, 0.06);
    --topbar-line-color: rgba(0, 0, 0, 0.12);
}
#app-echo[data-echo-theme="oatmeal"] {
    /* 燕麦（颜色(1).txt 新增） */
    --bg-color: #F3EFEA; --bg-screen: #F3EFEA; --echo-inner-bg: #EAE4DC;
    --dock-input-bg: #F3EFEA; --drawer-item-bg: #F3EFEA;
    --navbar-bg: var(--echo-card-bg, #FFFFFF); --dock-bg: var(--echo-card-bg, #FFFFFF);
    --drawer-bg: var(--echo-card-bg, #FFFFFF); --glass-bg: var(--echo-card-bg, #FFFFFF);
    --topbar-name-color: #4A3C31; --topbar-meta-color: #968A82; --topbar-bio-color: #968A82;
    --dock-input-text-color: #4A3C31; --dock-input-placeholder: rgba(150, 138, 130, 0.5);
    --dock-btn-icon-color: #968A82; --drawer-icon: #4A3C31;
    --sc-header-name-text: #4A3C31; --sc-header-back-icon: #4A3C31;
    --narr-ai: #968A82; --narr-user: #4A3C31;
    --bubble-me-bg: #4A3C31; --bubble-me-text: var(--echo-card-bg, #FFFFFF);
    --bubble-other-bg: var(--echo-card-bg, #FFFFFF); --bubble-other-text: #4A3C31;
    --dock-send-bg: #4A3C31; --dock-send-icon-color: var(--echo-card-bg, #FFFFFF);
    --toggle-track-active: #4A3C31;
    --navbar-border: rgba(74, 60, 49, 0.10); --dock-border: rgba(74, 60, 49, 0.10);
    --drawer-border: rgba(74, 60, 49, 0.10); --glass-border: rgba(74, 60, 49, 0.10);
    --topbar-line-color: rgba(74, 60, 49, 0.18);
}
#app-echo[data-echo-theme="mint"] {
    --bg-color: #E2EDE5; --bg-screen: #E2EDE5; --echo-inner-bg: #D4DFD8;
    --dock-input-bg: #E2EDE5; --drawer-item-bg: #E2EDE5;
    --navbar-bg: var(--echo-card-bg, #FFFFFF); --dock-bg: var(--echo-card-bg, #FFFFFF);
    --drawer-bg: var(--echo-card-bg, #FFFFFF); --glass-bg: var(--echo-card-bg, #FFFFFF);
    --topbar-name-color: #2B4A3B; --topbar-meta-color: #7A9E88; --topbar-bio-color: #7A9E88;
    --dock-input-text-color: #2B4A3B; --dock-input-placeholder: rgba(122, 158, 136, 0.5);
    --dock-btn-icon-color: #7A9E88; --drawer-icon: #2B4A3B;
    --sc-header-name-text: #2B4A3B; --sc-header-back-icon: #2B4A3B;
    --narr-ai: #7A9E88; --narr-user: #2B4A3B;
    --bubble-me-bg: #2B4A3B; --bubble-me-text: var(--echo-card-bg, #FFFFFF);
    --bubble-other-bg: var(--echo-card-bg, #FFFFFF); --bubble-other-text: #2B4A3B;
    --dock-send-bg: #2B4A3B; --dock-send-icon-color: var(--echo-card-bg, #FFFFFF);
    --toggle-track-active: #2B4A3B;
    --navbar-border: rgba(43, 74, 59, 0.10); --dock-border: rgba(43, 74, 59, 0.10);
    --drawer-border: rgba(43, 74, 59, 0.10); --glass-border: rgba(43, 74, 59, 0.10);
    --topbar-line-color: rgba(43, 74, 59, 0.18);
}
#app-echo[data-echo-theme="caramel"] {
    /* 焦糖（颜色(1).txt 新色：偏红棕） */
    --bg-color: #F2EAE1; --bg-screen: #F2EAE1; --echo-inner-bg: #E3D6CA;
    --dock-input-bg: #F2EAE1; --drawer-item-bg: #F2EAE1;
    --navbar-bg: var(--echo-card-bg, #FFFFFF); --dock-bg: var(--echo-card-bg, #FFFFFF);
    --drawer-bg: var(--echo-card-bg, #FFFFFF); --glass-bg: var(--echo-card-bg, #FFFFFF);
    --topbar-name-color: #5C3D2E; --topbar-meta-color: #A68A7C; --topbar-bio-color: #A68A7C;
    --dock-input-text-color: #5C3D2E; --dock-input-placeholder: rgba(166, 138, 124, 0.5);
    --dock-btn-icon-color: #A68A7C; --drawer-icon: #5C3D2E;
    --sc-header-name-text: #5C3D2E; --sc-header-back-icon: #5C3D2E;
    --narr-ai: #A68A7C; --narr-user: #5C3D2E;
    --bubble-me-bg: #8C5A35; --bubble-me-text: var(--echo-card-bg, #FFFFFF);
    --bubble-other-bg: var(--echo-card-bg, #FFFFFF); --bubble-other-text: #5C3D2E;
    --dock-send-bg: #8C5A35; --dock-send-icon-color: var(--echo-card-bg, #FFFFFF);
    --toggle-track-active: #8C5A35;
    --navbar-border: rgba(92, 61, 46, 0.10); --dock-border: rgba(92, 61, 46, 0.10);
    --drawer-border: rgba(92, 61, 46, 0.10); --glass-border: rgba(92, 61, 46, 0.10);
    --topbar-line-color: rgba(92, 61, 46, 0.18);
}
#app-echo[data-echo-theme="ash"] {
    /* 冷岩（颜色(1).txt 新色：偏蓝灰） */
    --bg-color: #E2E8F0; --bg-screen: #E2E8F0; --echo-inner-bg: #D1D4DB;
    --dock-input-bg: #E2E8F0; --drawer-item-bg: #E2E8F0;
    --navbar-bg: var(--echo-card-bg, #FFFFFF); --dock-bg: var(--echo-card-bg, #FFFFFF);
    --drawer-bg: var(--echo-card-bg, #FFFFFF); --glass-bg: var(--echo-card-bg, #FFFFFF);
    --topbar-name-color: #1E293B; --topbar-meta-color: #64748B; --topbar-bio-color: #64748B;
    --dock-input-text-color: #1E293B; --dock-input-placeholder: rgba(100, 116, 139, 0.5);
    --dock-btn-icon-color: #64748B; --drawer-icon: #1E293B;
    --sc-header-name-text: #1E293B; --sc-header-back-icon: #1E293B;
    --narr-ai: #64748B; --narr-user: #1E293B;
    --bubble-me-bg: #334155; --bubble-me-text: var(--echo-card-bg, #FFFFFF);
    --bubble-other-bg: var(--echo-card-bg, #FFFFFF); --bubble-other-text: #1E293B;
    --dock-send-bg: #334155; --dock-send-icon-color: var(--echo-card-bg, #FFFFFF);
    --toggle-track-active: #334155;
    --navbar-border: rgba(30, 41, 59, 0.10); --dock-border: rgba(30, 41, 59, 0.10);
    --drawer-border: rgba(30, 41, 59, 0.10); --glass-border: rgba(30, 41, 59, 0.10);
    --topbar-line-color: rgba(30, 41, 59, 0.18);
}
/* 自定义色：JS 通过 #app-echo.style.setProperty 写入 5 个语义变量后映射到项目原生变量
   设计（按颜色.txt 双层模型）：
     - 底层 4%（页面/输入框/抽屉项/侧栏内层）= --echo-custom-bg
     - 卡片层（顶栏/底栏/抽屉/侧栏面板/对方气泡）= --echo-card-bg（默认 #FFFFFF，外层可覆盖）
     - 主色（我方气泡/名字/发送键/图标/输入字）= --echo-custom-main
     - 次色（副字/旁白 ai/占位/底栏图标）= --echo-custom-sub
     - 边框（5 处）= --echo-custom-border
*/
#app-echo[data-echo-theme="custom"] {
    /* 底层 4 处 */
    --bg-color: var(--echo-custom-bg, #F5F4F1); --bg-screen: var(--echo-custom-bg, #F5F4F1);
    --echo-inner-bg: var(--echo-custom-bg, #F5F4F1);
    --dock-input-bg: var(--echo-custom-bg, #F5F4F1);
    --drawer-item-bg: var(--echo-custom-bg, #F5F4F1);
    /* 卡片层 4 处（统一 echo-card-bg 变量层） */
    --navbar-bg: var(--echo-card-bg, #FFFFFF); --dock-bg: var(--echo-card-bg, #FFFFFF);
    --drawer-bg: var(--echo-card-bg, #FFFFFF); --glass-bg: var(--echo-card-bg, #FFFFFF);
    /* 文字图标主色/次色 */
    --topbar-name-color: var(--echo-custom-main, #2C2A29);
    --topbar-meta-color: var(--echo-custom-sub, #8C8580);
    --topbar-bio-color: var(--echo-custom-sub, #8C8580);
    --dock-input-text-color: var(--echo-custom-main, #2C2A29);
    --dock-input-placeholder: var(--echo-custom-sub, #8C8580);
    --dock-btn-icon-color: var(--echo-custom-sub, #8C8580);
    --drawer-icon: var(--echo-custom-main, #2C2A29);
    --sc-header-name-text: var(--echo-custom-main, #2C2A29);
    --sc-header-back-icon: var(--echo-custom-main, #2C2A29);
    --narr-ai: var(--echo-custom-sub, #8C8580); --narr-user: var(--echo-custom-main, #2C2A29);
    /* 气泡（me 主色 + 卡片色字，other 卡片色 + 主色字） */
    --bubble-me-bg: var(--echo-custom-main, #2C2A29);
    --bubble-me-text: var(--echo-card-bg, #FFFFFF);
    --bubble-other-bg: var(--echo-card-bg, #FFFFFF);
    --bubble-other-text: var(--echo-custom-main, #2C2A29);
    /* 发送键 + 开关 */
    --dock-send-bg: var(--echo-custom-main, #2C2A29);
    --dock-send-icon-color: var(--echo-card-bg, #FFFFFF);
    --toggle-track-active: var(--echo-custom-main, #2C2A29);
    /* 边框 5 处 */
    --navbar-border: var(--echo-custom-border, rgba(0, 0, 0, 0.10));
    --dock-border: var(--echo-custom-border, rgba(0, 0, 0, 0.10));
    --drawer-border: var(--echo-custom-border, rgba(0, 0, 0, 0.10));
    --glass-border: var(--echo-custom-border, rgba(0, 0, 0, 0.10));
    --topbar-line-color: var(--echo-custom-border, rgba(0, 0, 0, 0.16));
}

/* ──────────────────────────────────────────────────────────────────────────
   5b. 夜间模式 - 统一极简黑灰风格（所有主题共用一套，不再"花"）
   日间各主题色保留，夜间无差别全部退化为以下中性深色
   ────────────────────────────────────────────────────────────────────────── */
body.dark-mode #app-echo,
body.dark-mode #app-echo[data-echo-theme],
body.dark-mode #app-echo[data-echo-theme="default"],
body.dark-mode #app-echo[data-echo-theme="pure-white"],
body.dark-mode #app-echo[data-echo-theme="oatmeal"],
body.dark-mode #app-echo[data-echo-theme="mint"],
body.dark-mode #app-echo[data-echo-theme="caramel"],
body.dark-mode #app-echo[data-echo-theme="ash"],
body.dark-mode #app-echo[data-echo-theme="custom"] {
    --bg-color: #000000;
    --bg-screen: #000000;
    --echo-inner-bg: #000000;
    --dock-input-bg: #000000;
    --drawer-item-bg: #000000;

    --navbar-bg: #1A1A1A;
    --dock-bg: #1A1A1A;
    --drawer-bg: #1A1A1A;
    --glass-bg: #1A1A1A;

    --topbar-name-color: #E5E5E5;
    --topbar-meta-color: #888888;
    --topbar-bio-color: #888888;
    --dock-input-text-color: #E5E5E5;
    --dock-input-placeholder: rgba(136, 136, 136, 0.6);
    --dock-btn-icon-color: #888888;
    --drawer-icon: #E5E5E5;
    --sc-header-name-text: #E5E5E5;
    --sc-header-back-icon: #E5E5E5;

    /* AI 旁白主色高亮，用户旁白次要灰 */
    --narr-ai: #E5E5E5;
    --narr-user: #888888;

    --bubble-me-bg: #333333;
    --bubble-me-text: #E5E5E5;
    --bubble-other-bg: #1A1A1A;
    --bubble-other-text: #E5E5E5;

    --dock-send-bg: #E5E5E5;
    --dock-send-icon-color: #000000;
    --toggle-track-active: #E5E5E5;

    --navbar-border: rgba(255, 255, 255, 0.08);
    --dock-border: rgba(255, 255, 255, 0.08);
    --drawer-border: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.08);
    --topbar-line-color: rgba(255, 255, 255, 0.10);
}

/* 极简排版：第一行只显示 AI 名字（居中），隐藏头像 / 连线 / 天气 / Me 整列
   HTML 实际结构：.sc-nav-row-1 > .sc-nav-side.sc-left（AI 头像+名字）
                              + .sc-nav-line-wrap（连线+天气）
                              + .sc-nav-side.sc-right（Me 头像+名字）*/
#app-echo.echo-simple-nav .sc-nav-row-1 .sc-nav-side.sc-right,
#app-echo.echo-simple-nav .sc-nav-row-1 .sc-nav-side.sc-left .sc-nav-avatar {
    display: none;
}
/* 极简模式：连线藏起来，但交互键保留并紧贴名字右侧（让它跟着名字宽度变化自由调整） */
#app-echo.echo-simple-nav .sc-nav-line-wrap {
    flex: none;
    margin: 0 0 0 6px;
    min-width: 0;
    gap: 0;
}
#app-echo.echo-simple-nav .sc-nav-line-wrap .sc-nav-line {
    display: none;
}
/* 双保险：用 ID 直接锁住 char 头像和 user 头像，避免被任何 class 级别规则越过 */
#app-echo.echo-simple-nav #hero-avatar-img,
#app-echo.echo-simple-nav #user-nav-avatar,
#app-echo.echo-simple-nav #user-nav-name {
    display: none;
}
#app-echo.echo-simple-nav .sc-nav-row-1 {
    justify-content: center;
}
#app-echo.echo-simple-nav .sc-nav-row-1 .sc-nav-side.sc-left {
    justify-content: center;
    flex: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   6. 群聊导航：在 .gc-navbar-thin 下追加 m-tag 横滚条
       原第一行 .gc-nav-content 完全不动，仅把容器改为纵向布局
   ────────────────────────────────────────────────────────────────────────── */
.gc-navbar-thin {
    flex-direction: column;
    align-items: stretch;
}
.gc-nav-row-tags.is-tags {
    display: flex;
    align-items: center;
    gap: var(--etag-gap, 8px);
    padding: 4px 16px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.gc-nav-row-tags.is-tags::-webkit-scrollbar { display: none; }

/* 群聊导航栏空间压缩：第一行减底部留白，整体收紧
   删了九宫格 + 公告 m-tag 后再次压缩内边距 */
.gc-navbar-thin .gc-nav-content {
    padding: 4px 48px 0;
}
.gc-navbar-thin .gc-nav-row-tags.is-tags {
    padding: 2px 16px 6px;
}
/* 第一行行高也再收一档 */
.gc-navbar-thin .gc-name-bio-stack .gc-name-row {
    line-height: 1.15;
}
.gc-navbar-thin .gc-bio-mini {
    padding: 0;
    line-height: 1.2;
}

/* 群聊也复用单聊的 m-tag 变量体系（.single-chat-page 顶部已声明，#app-echo 与之同元素，不再重复） */

/* ──────────────────────────────────────────────────────────────────────────
   7. 底栏：左侧雪花（顶替羽毛笔位置）+ 圆形 add↔send
   雪花外层保留 #top-interaction-btn ID（沿用 triggerAIInteraction 逻辑）
   雪花内层保留 .custom-pen-icon class（沿用 wobbling / is-clicked / is-waiting）
   ────────────────────────────────────────────────────────────────────────── */
.echo-dock .dock-left-icons {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.echo-dock .btn-snowflake {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--dock-icon, var(--topbar-meta-color));
    cursor: pointer;
    flex-shrink: 0;
    background: transparent;
    border: none;
    will-change: transform;
}
.echo-dock .btn-snowflake:active { opacity: 0.7; }

/* AI 思考中：硬件加速旋转（来自群聊参考稿） */
.echo-dock .btn-snowflake.thinking {
    animation: enav-hardware-spin 2s linear infinite;
    color: var(--topbar-text);
}
@keyframes enav-hardware-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 兼容现有 wobbling/is-waiting class（沿用 echo.js 已有逻辑）
   - is-waiting 加在外层 #top-interaction-btn（btn-snowflake）→ 整体硬件加速旋转
   - wobbling 加在内层 .custom-pen-icon / i → 旧式摆动（保留兼容）
   - 交互键已从 dock 搬到导航栏 .sc-nav-interaction / .gc-nav-interaction，规则同步扩展 */
.echo-dock .btn-snowflake.is-waiting,
.btn-snowflake.is-waiting,
#top-interaction-btn.is-waiting,
#g-interaction-btn.is-waiting {
    animation: enav-hardware-spin 2s linear infinite;
    color: var(--topbar-text);
}
.echo-dock .btn-snowflake .custom-pen-icon.wobbling,
.btn-snowflake .wobbling,
#top-interaction-btn.wobbling i,
#g-interaction-btn.wobbling i {
    animation: enav-pen-writing 1.2s ease-in-out infinite;
    transform-origin: center;
    color: var(--topbar-text);
}
@keyframes enav-pen-writing {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

/* is-clicked 反馈（点击瞬时）：沿用 echo.js 现有 class */
.echo-dock .btn-snowflake.is-clicked i,
.echo-dock .btn-snowflake .custom-pen-icon.is-clicked,
#top-interaction-btn.is-clicked i,
#g-interaction-btn.is-clicked i {
    animation: enav-pen-tap 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes enav-pen-tap {
    0%   { transform: scale(1) rotate(0deg); }
    40%  { transform: scale(0.8) rotate(-25deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ──────────────────────────────────────────────────────────────────────────
   11. 底栏圆形按钮尺寸统一（34×34，对齐参考稿 .btn-circle-solid）
       —— 仅调尺寸/视觉，不动 ID（保 echo.js 17 处绑定不破）
       —— 同特异性 0,1,2,0，echo-nav-tags.css 后于 apps-styles.css 加载胜出
   ────────────────────────────────────────────────────────────────────────── */
.echo-dock #echo-send-icon,
.echo-dock #echo-plus-btn {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-bottom: 3px;
}
.echo-dock #echo-send-icon i {
    font-size: 14px;
}
.echo-dock #echo-plus-btn i {
    font-size: 22px;
}
.echo-dock .btn-snowflake {
    width: 30px;
    height: 30px;
}

/* AI 旁白色补绑：项目里 .narration.user 已绑 var(--narr-user)，但 .narration.ai 漏了，
   导致 AI 旁白不跟主题。这里补上，限定到 #app-echo 不污染其他页 */
#app-echo .narration.ai {
    color: var(--narr-ai);
}

/* ──────────────────────────────────────────────────────────────────────────
   12. 群聊画报排版（参考用户图 1）：单行群名+人数+头像+菜单
       - 隐藏签名输入框 (#groupBio) 和天气 (#g-w-label)，节点保留供 echo.js 写入
       - 群名 Playfair Display 18px 加粗，左对齐
       - 成员叠层 26×26 重叠 -10px
       - 父级 .gc-navbar-thin padding 改 0（让两行各自管水平 padding，第二行才能紧贴 16px）
   ────────────────────────────────────────────────────────────────────────── */
.gc-navbar-thin {
    padding: 0;
}
.gc-navbar-thin .gc-nav-content {
    padding: 0 48px;
    height: 44px;
    align-items: center;
    gap: 12px;
}
.gc-navbar-thin .gc-bio-mini,
.gc-navbar-thin .gc-time-weather-mini {
    display: none;
}
.gc-navbar-thin .gc-name-bio-stack {
    flex: 1 1 0;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px;
    min-width: 0;
}
.gc-navbar-thin .gc-name-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    flex: 1 1 0;
}
.gc-navbar-thin .gc-name {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--topbar-name-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.gc-navbar-thin .gc-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--topbar-meta-color);
    flex-shrink: 0;
}
.gc-navbar-thin .gc-meta-stack {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    max-width: 130px;
}
.gc-navbar-thin .g-members-mini {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.gc-navbar-thin .g-members-mini img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--navbar-bg);
    margin-left: -10px;
}
.gc-navbar-thin .g-members-mini img:first-child {
    margin-left: 0;
}
/* 头像叠层最多显示 4 个，多余的让位给群名 */
.gc-navbar-thin .g-members-mini img:nth-child(n+5) {
    display: none;
}
.gc-navbar-thin .gc-nav-row-tags.is-tags {
    padding: 4px 16px 8px;
}

/* 修羽毛笔变雪花：apps-styles.css:16493 的 .custom-pen-icon 用 mask-image 把元素涂成笔形，
   覆盖了 i 上的 ri-snowflake-line 字体。这里在 .echo-dock 范围内关掉 mask，
   让雪花字体重新显示。.bottle-btn 等其他位置的笔渲染不受影响。 */
.echo-dock .btn-snowflake .custom-pen-icon {
    -webkit-mask-image: none;
    mask-image: none;
    background-color: transparent;
    width: auto;
    height: auto;
    opacity: 1;
    font-size: 24px;
    color: var(--dock-btn-icon-color, var(--topbar-meta-color));
}
.echo-dock .btn-snowflake.is-waiting .custom-pen-icon {
    color: var(--topbar-name-color);
}

/* ──────────────────────────────────────────────────────────────────────────
   8. 单聊导航栏：禁毛玻璃（覆盖 apps-styles.css:16349 的 blur(16px)）
       —— 同特异性 0,0,2,0，echo-nav-tags.css 在 apps-styles.css 后加载，胜出
   ────────────────────────────────────────────────────────────────────────── */
.single-chat-page .echo-navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   9. 拓展抽屉：禁毛玻璃（覆盖 apps-styles.css:2922 的 var(--drawer-blur)）
   ────────────────────────────────────────────────────────────────────────── */
#app-echo .clean-drawer,
.single-chat-page .clean-drawer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   10. 侧边栏：禁毛玻璃（echo-sidebar.css 的 glass-bg + 任何 backdrop blur）
   ────────────────────────────────────────────────────────────────────────── */
#echo-sidebar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   13. 群聊 nav-editorial 画报排版（按用户参考稿，响应式不依赖固定屏幕尺寸）
       - 限定 .nav-editorial 范围，不污染其他页
       - 颜色统一走项目变量（不写死白色，跟随主题）
   ────────────────────────────────────────────────────────────────────────── */
.nav-editorial .top-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    height: 44px; padding: 0 48px;
}
.nav-editorial .left-info {
    flex: 1 1 0; display: flex; align-items: baseline; gap: 6px; min-width: 0;
    justify-content: flex-start;
}
.nav-editorial .left-info .title {
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 700;
    color: var(--topbar-name-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1 1 auto; min-width: 0;
}
.nav-editorial .left-info .count {
    font-size: 12px; font-weight: 600;
    color: var(--topbar-meta-color); flex-shrink: 0;
}
.nav-editorial .avatar-stack {
    display: flex; align-items: center;
    cursor: pointer; flex-shrink: 0; transition: opacity 0.2s;
}
.nav-editorial .avatar-stack:active { opacity: 0.7; }
.nav-editorial .avatar-stack .g-members-mini {
    display: flex; align-items: center;
}
.nav-editorial .avatar-stack img {
    width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--navbar-bg);
    margin-left: -10px;
    transition: border-color 0.4s;
}
.nav-editorial .avatar-stack img:first-child { margin-left: 0; }
/* 响应式：第 5 个起的头像自动隐藏，纯 CSS 限数量不依赖屏幕宽 */
.nav-editorial .avatar-stack img:nth-child(n+5) { display: none; }

/* 第二行 m-tag 行（参考稿 .tags-row + .tag-item）*/
.nav-editorial .tags-row {
    display: flex; gap: 8px;
    overflow-x: auto; padding: 4px 16px 8px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nav-editorial .tags-row::-webkit-scrollbar { display: none; }
.nav-editorial .tag-item {
    background: transparent;
    border: 1px solid var(--navbar-border);
    height: 26px; padding: 0 10px; border-radius: 6px;
    font-size: 10px; font-weight: 700;
    color: var(--topbar-meta-color);
    text-transform: uppercase; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap; flex-shrink: 0;
    cursor: pointer; transition: 0.2s;
}
.nav-editorial .tag-item:active {
    background: var(--bubble-me-bg);
    color: var(--bubble-me-text);
    border-color: var(--bubble-me-bg);
}
.nav-editorial .tag-item i { font-size: 12px; }
.nav-editorial .tag-item.notice { border-style: dashed; }