/* 主界面专属视觉层：只作用于聊天 tab 的对话列表与其底部导航。 */
html[data-active-theme^="floral"] #tab-chat #conversation-list {
    --home-bg-light: url("../assets/library/2026-10-24/bg-floral-morning.jpg");
    --home-bg-warm: url("../assets/library/2026-10-24/bg-floral-cream.jpg");
    --home-bg-dark: url("../assets/library/2026-10-24/bg-floral-moonlit.jpg");
    --home-card-light: url("../assets/library/2026-10-24/card-floral-strip.jpg");
    --home-card-still-life: url("../assets/library/2026-10-24/card-stilllife-tea.jpg");
    --home-card-dark: url("../assets/library/2026-10-24/card-moonlit-gilt.jpg");
    --home-band: url("../assets/library/2026-10-24/band-floral-collapsed.jpg");
    --home-line-bouquet: url("../assets/library/2026-10-24/line-bouquet-rose.png");
    --home-wreath: url("../assets/library/2026-10-24/wreath-rose-line.png");
    --home-bloom: url("../assets/library/2026-10-24/bloom-rose-watercolor.png");
    --home-ink: #554843;
    --home-rose: #9d7474;
    --home-gold: #ad8958;
    background-color: #f7f2ed;
    background-image:
        linear-gradient(180deg, rgba(255,252,250,.22) 0%, rgba(255,252,250,.36) 38%, rgba(249,246,242,.76) 100%),
        var(--home-bg-light);
    background-size: 100% 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat;
}

/* 方向二：暖调花艺静物；仅用于视觉对比，默认生产外观仍为晨光花笺。 */
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list {
    --home-ink: #5a473d;
    --home-rose: #a97870;
    --home-gold: #ae8750;
    background-color: #f5ede3;
    background-image:
        linear-gradient(180deg, rgba(255,250,245,.18) 0%, rgba(255,250,245,.34) 42%, rgba(248,242,235,.78) 100%),
        var(--home-bg-warm);
    background-size: 100% 100%, cover;
}

html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list {
    background-color: #252832;
    background-image:
        linear-gradient(180deg, rgba(29,31,40,.24) 0%, rgba(29,31,40,.42) 42%, rgba(29,31,40,.84) 100%),
        var(--home-bg-dark);
}

/* 页眉：字色与细节精修，不改原有排布和按钮尺寸。 */
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-title-en {
    color: var(--home-rose);
    letter-spacing: 2.2px;
    text-shadow: 0 1px 0 rgba(255,255,255,.78), 0 3px 12px rgba(156,112,106,.12);
    text-decoration: underline;
    text-decoration-color: rgba(173,137,88,.38);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-title-cn {
    color: var(--home-ink);
    letter-spacing: 3.8px;
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-header-right { gap: 8px; }
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-guest-btn {
    color: var(--home-rose);
    border-color: rgba(173,137,88,.34);
    background: linear-gradient(150deg, rgba(255,255,255,.88), rgba(250,245,240,.78));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 3px 12px rgba(119,91,71,.08);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-guest-btn:hover {
    border-color: rgba(173,137,88,.56);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 14px rgba(119,91,71,.12);
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-guest-btn:focus-visible,
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-collapse-btn:focus-visible {
    outline: 2px solid rgba(173,137,88,.58);
    outline-offset: 2px;
}
html[data-active-theme^="floral"] #tab-chat #conversation-list #weather-chip-host .wx-chip {
    border-color: rgba(173,137,88,.30);
    background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(250,245,240,.78));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 12px rgba(119,91,71,.07);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, box-shadow .22s ease;
}
html[data-active-theme^="floral"] #tab-chat #conversation-list #weather-chip-host .wx-chip:hover {
    border-color: rgba(173,137,88,.54);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 14px rgba(119,91,71,.11);
}
html[data-active-theme^="floral"] #tab-chat #conversation-list #weather-chip-host .wx-chip-temp { color: var(--home-rose); }
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cl-title-en,
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cl-guest-btn,
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list #weather-chip-host .wx-chip-temp { color: #9a675e; }

/* 会话行：保留原来的尺寸与顺序，只补纸页分隔、柔和按压和头像描边。 */
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-item {
    box-shadow: inset 0 -1px 0 rgba(157,116,116,.12);
    transition: background-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2,.8,.2,1);
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-item:hover {
    background: rgba(255,252,249,.42);
    box-shadow: inset 0 -1px 0 rgba(173,137,88,.18), 0 4px 14px rgba(117,91,75,.045);
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-item:active {
    background: rgba(255,249,245,.58);
    transform: scale(.992);
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-avatar {
    border: 1px solid rgba(173,137,88,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 3px 12px rgba(105,82,66,.13);
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-time { color: #93857c; }
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-preview { color: #7e746d; }
html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-badge {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 7px rgba(157,116,116,.20);
}
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cl-item { box-shadow: inset 0 -1px 0 rgba(169,126,103,.15); }

/* 陪伴卡展开态：花艺纸卡层次来自共用库素材；所有文字仍由页面原有 HTML 排版。 */
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-banner {
    border: 1px solid rgba(173,137,88,.42);
    border-radius: 19px;
    background-color: #fcf7f1;
    background-image:
        linear-gradient(180deg, rgba(255,253,250,.10) 0%, rgba(255,251,247,.34) 30%, rgba(252,247,241,.96) 72%, #fcf7f1 100%),
        var(--home-card-light);
    background-size: 100% 100%, 100% auto;
    background-position: center, center top;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.88), 0 7px 22px rgba(121,91,70,.12);
    transition: height .28s cubic-bezier(.22,.75,.25,1), box-shadow .24s ease, border-color .24s ease;
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-full { isolation: isolate; }
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-flower { display: none; }
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-topbar { position: relative; z-index: 1; }
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-topbar::before,
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-topbar::after {
    content: "";
    position: absolute;
    top: -3px;
    width: 28px;
    height: 34px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .42;
    pointer-events: none;
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-topbar::before {
    left: 1px;
    background-image: var(--home-line-bouquet);
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-topbar::after {
    right: 34px;
    width: 30px;
    height: 30px;
    background-image: var(--home-wreath);
    opacity: .35;
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-en {
    color: var(--home-rose);
    letter-spacing: 2.6px;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-num {
    color: #9d7474;
    text-shadow: 0 1px 0 rgba(255,255,255,.88), 0 3px 12px rgba(157,116,116,.14);
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-line {
    width: 54px;
    background: linear-gradient(90deg, transparent, rgba(173,137,88,.76), transparent);
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-banner .cp-full::after {
    content: "";
    position: absolute;
    right: 5px;
    bottom: 2px;
    width: 42px;
    height: 42px;
    background: var(--home-bloom) center / contain no-repeat;
    opacity: .25;
    pointer-events: none;
}
html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-banner.cp-collapsed {
    background-color: #f8f1eb;
    background-image: linear-gradient(90deg, rgba(255,251,247,.42), rgba(255,251,247,.18) 52%, rgba(255,251,247,.42)), var(--home-band);
    background-size: 100% 100%, 100% auto;
    background-position: center, center 52%;
    background-repeat: no-repeat;
    border-color: rgba(173,137,88,.36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 3px 12px rgba(121,91,70,.09);
}
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cp-banner {
    border-color: rgba(169,126,103,.43);
    background-color: #f6eee5;
    background-image: linear-gradient(90deg, rgba(250,246,240,.98) 0%, rgba(250,246,240,.90) 56%, rgba(250,246,240,.22) 100%), var(--home-card-still-life);
    background-size: 100% 100%, auto 122%;
    background-position: center, right 48%;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.34), inset 0 1px 0 rgba(255,255,255,.84), 0 7px 22px rgba(121,91,70,.11);
}
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cp-banner.cp-collapsed {
    background-image: linear-gradient(90deg, rgba(250,246,240,.34), rgba(250,246,240,.12) 52%, rgba(250,246,240,.34)), var(--home-band);
}
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cl-title-cn { color: #d8d0c7; }
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cl-title-en,
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cp-en { color: #d9bcae; }
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cl-guest-btn,
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list #weather-chip-host .wx-chip {
    color: #dbc5b7;
    border-color: rgba(221,190,163,.30);
    background: linear-gradient(145deg, rgba(48,46,52,.90), rgba(38,39,47,.86));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.16);
}
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cl-preview { color: #c2b9b1; }
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cl-time { color: #aaa098; }
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cl-item { box-shadow: inset 0 -1px 0 rgba(223,191,170,.14); }
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cl-item:hover { background: rgba(255,255,255,.045); }
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cl-avatar { border-color: rgba(221,190,163,.3); }
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cp-banner {
    border-color: rgba(221,190,163,.36);
    background-color: #2a2a32;
    background-image: linear-gradient(180deg, rgba(34,34,42,.08), rgba(34,34,42,.34)), var(--home-card-dark);
    background-size: 100% 100%, cover;
    background-position: center, center;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.035), inset 0 1px 0 rgba(255,255,255,.08), 0 7px 24px rgba(0,0,0,.26);
}
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cp-banner.cp-collapsed {
    background-image: linear-gradient(90deg, rgba(34,35,43,.78), rgba(34,35,43,.62) 52%, rgba(34,35,43,.78)), var(--home-band);
    background-size: 100% 100%, 100% auto;
    background-position: center, center 52%;
}
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cp-num { color: #e0c8b8; }
html[data-active-theme^="floral"][data-theme-mode="dark"] #tab-chat #conversation-list .cp-line { background: linear-gradient(90deg, transparent, rgba(221,190,163,.78), transparent); }

/* 底栏只在聊天首页激活时带入纸感；其它 tab 沿用现有样式。 */
html[data-active-theme^="floral"] #app:has(#tab-chat.active) #bottom-nav {
    background-color: rgba(251,247,242,.94);
    background-image: linear-gradient(180deg, rgba(255,255,255,.56), rgba(251,247,242,.90));
    border-top-color: rgba(173,137,88,.20);
    box-shadow: 0 -1px 0 rgba(255,255,255,.62) inset, 0 -5px 18px rgba(118,91,72,.075);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-active-theme^="floral"] #app:has(#tab-chat.active) #bottom-nav .nav-tab {
    transition: color .24s ease, transform .24s cubic-bezier(.2,.8,.2,1), background-color .24s ease;
}
html[data-active-theme^="floral"] #app:has(#tab-chat.active) #bottom-nav .nav-tab.active { color: #9d7474; }
html[data-active-theme^="floral"] #app:has(#tab-chat.active) #bottom-nav .nav-tab:active { transform: translateY(-1px); }
html[data-active-theme^="floral"] #app:has(#tab-chat.active) #bottom-nav .nav-tab .nav-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html[data-active-theme="floralAtelier"] #app:has(#tab-chat.active) #bottom-nav {
    background-color: rgba(249,243,235,.95);
    border-top-color: rgba(169,126,103,.22);
}
html[data-active-theme^="floral"][data-theme-mode="dark"] #app:has(#tab-chat.active) #bottom-nav {
    background-color: rgba(38,38,46,.96);
    background-image: linear-gradient(180deg, rgba(51,48,52,.78), rgba(38,38,46,.96));
    border-top-color: rgba(221,190,163,.17);
    box-shadow: 0 -1px 0 rgba(255,255,255,.04) inset, 0 -5px 18px rgba(0,0,0,.28);
}
html[data-active-theme^="floral"][data-theme-mode="dark"] #app:has(#tab-chat.active) #bottom-nav .nav-tab.active { color: #e0c2b3; }

@media (max-width: 370px) {
    html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-title-en { font-size: 20px; }
    html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-title-cn { letter-spacing: 3.3px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-item,
    html[data-active-theme^="floral"] #tab-chat #conversation-list .cl-guest-btn,
    html[data-active-theme^="floral"] #tab-chat #conversation-list #weather-chip-host .wx-chip,
    html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-banner,
    html[data-active-theme^="floral"] #tab-chat #conversation-list .cp-collapse-btn,
    html[data-active-theme^="floral"] #app:has(#tab-chat.active) #bottom-nav .nav-tab {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ============================================================
   花漾·暖调：照片边缘渐隐融合（2026-10-24 宝宝：中间那道割裂图边不要）
   做法：照片放在 ::before 里，上面再压一层由纸色渐变的遮罩，边缘自然化开。
   ============================================================ */
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cp-banner {
    background-image: linear-gradient(90deg, #f6eee5 0%, #f6eee5 34%, rgba(246,238,229,.96) 52%, rgba(246,238,229,.74) 78%, rgba(246,238,229,.46) 100%);
    background-size: 100% 100%;
    background-position: center;
}
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cp-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, #f6eee5 0%, #f6eee5 30%, rgba(246,238,229,.98) 46%, rgba(246,238,229,.86) 62%, rgba(246,238,229,.55) 80%, rgba(246,238,229,.25) 100%),
        var(--home-card-still-life) right 48% / auto 126% no-repeat;
}
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cp-banner.cp-collapsed::before { display: none; }
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cp-banner .cp-full,
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cp-banner .cp-topbar { z-index: 1; }
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cp-banner .cp-collapsed-row,
html[data-active-theme="floralAtelier"] #tab-chat #conversation-list .cp-banner .cp-collapse-btn { z-index: 2; }