/* ============================================================
   css/conversation-list.css — 微信式对话列表
   韩法唯美风：暖奶油底 + 衬线 + 花字装饰，无 emoji。
   ============================================================ */

#conversation-list {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #F8F4EF);
}

/* ---- 列表头部 ---- */
.cl-header {
    flex-shrink: 0;
    padding: 56px 22px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cl-title { display: flex; flex-direction: column; gap: 2px; }
.cl-title-en {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 22px;
    letter-spacing: 2px;
    color: var(--accent, #C9A8A8);
}
.cl-title-cn {
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--text-secondary, #8A8278);
}
.cl-guest-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border: 1px solid rgba(201, 168, 168, 0.5);
    border-radius: 18px;
    background: rgba(255, 252, 249, 0.85);
    color: var(--accent, #C9A8A8);
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(160, 145, 130, 0.08);
}
.cl-guest-btn:active { transform: scale(0.95); }
.cl-guest-btn svg { width: 15px; height: 15px; }

/* ---- 列表区 ---- */
.cl-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 14px 20px;
    -webkit-overflow-scrolling: touch;
}
.cl-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 10px;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}
/* 新插入的列表项才有入场动画（首次加载），后续刷新无动画 */
.cl-item-new {
    animation: slideInUp 0.35s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.cl-item:hover { background: rgba(201, 168, 168, 0.08); }
.cl-item:active { background: rgba(201, 168, 168, 0.14); transform: scale(0.99); }

/* Kstar 官方公告入口 */
.cl-item-kstar {
    border-left: 2px solid var(--gold);
    background: rgba(196,168,106,0.04);
}
.cl-item-kstar:hover { background: rgba(196,168,106,0.08); }
/* Kstar 官方公告头像：用双类选择器提高优先级。**关键**：容器背景直接用这张图本身（background-image），
   底色设为透明——不管 <img> 先渲还是慢一拍，出的都是同一张图，绝不闪出紫/金等任何别的颜色。
   （此前用渐变色做占位底只是换颜色、仍在闪；这就是甲方「别闪了」的真正解法。） */
.cl-avatar.cl-avatar-kstar {
    background-color: transparent;
    background-image: url('../img/kstar-avatar.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(196,168,106,0.35);
}

.cl-avatar-wrap { position: relative; flex-shrink: 0; }
.cl-avatar {
    width: 52px; height: 52px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #C9A8A8, #B89BC4);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 3px 10px rgba(160,145,130,0.18);
}
.cl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cl-avatar-inner {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.75);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.7), rgba(255,255,255,0.1) 70%);
}
.cl-live-dot {
    position: absolute;
    right: -1px; bottom: -1px;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary, #F8F4EF);
    background: var(--online, #8BC9A0);
    animation: breathe 2.4s ease-in-out infinite;
}

.cl-info { flex: 1; min-width: 0; }
.cl-name {
    font-family: 'Noto Serif SC', 'STSong', serif;
    font-size: 15px;
    color: var(--text-primary, #1E1C1A);
    margin-bottom: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-preview {
    font-size: 12.5px;
    color: var(--text-secondary, #8A8278);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 草稿标签：玫瑰色，让草稿在列表中醒目 */
.cl-draft-tag {
    color: var(--accent, #C9A8A8);
    font-weight: 500;
}

/* 发送失败标记：与聊天气泡里的重发感叹号同款（细线玫瑰色圆圈感叹号），统一两处风格 */
.cl-failed-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    color: #c49797;
    line-height: 1;
    margin-right: 6px;
    vertical-align: -2px;
}

/* 未读红点：有未读消息时显示在头像旁
   ★ 2028-09：下面这条连同 #conversation-list 前缀一起来——根因是「小窝 → 通话记录」那边
   也定义了同名的 .cl-badge（panels-nest-home.css 在 index.html 里排在本文件之后 →
   同权重时后者胜），万一将来把通话记录嵌进会话列表容器，主页未读角标会被换成紫灰底。
   挂上容器前缀既能保证主页角标永远是「固定未读红」，也不动小窝那套。 */
#conversation-list .cl-unread-dot {
    position: absolute;
    right: -1px; bottom: -1px;
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary, #F8F4EF);
    /* ★ 2026-10 甲方定：小红点一律跟主题色走（--rose），不再用固定未读红 */
    background: var(--rose, #C9A8A8);
    box-shadow: 0 0 6px rgba(201, 168, 168, 0.45);
    animation: breathe 2.4s ease-in-out infinite;
}

.cl-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.cl-time { font-size: 11px; color: var(--text-muted, #BFB8AE); }
#conversation-list .cl-badge {
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    /* ★ 2026-10 甲方定：角标底色跟主题色走（--rose）。
       数字用暖褐 #3A322B（与 chat-pins.css #pins-badge 同口径）——原白字在浅色 --rose 上看不清。
       前缀 #conversation-list 是为了压过 panels-nest-home.css 里同名的 .cl-badge（见上方注释）。 */
    background: var(--rose, #C9A8A8);
    color: #3A322B;
    font-size: 10px;
    line-height: 18px;
    text-align: center;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(201,168,168,0.4);
}

.cl-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--text-muted, #BFB8AE);
    font-size: 13px;
    font-family: 'Noto Serif SC', 'STSong', serif;
    letter-spacing: 1px;
}

/* 窄屏 <370px */
@media (max-width: 370px) {
    .cl-header { padding: 48px 16px 12px; }
    .cl-avatar { width: 46px; height: 46px; }
    .cl-item { padding: 11px 8px; gap: 10px; }
}

/* ===== 页面切换 =====
   由 chat-view 滑动动画接管，不再用 opacity 过渡 */

/* ============================================================
   伪 3D 晃动不许漏边（宝宝 2026-10-29：「上面有层淡淡的黑色遮罩，这个遮罩会和图一起晃动，
   导致漏边」）
   ------------------------------------------------------------
   根因（跟 JS 无关，纯 CSS 位移）：底图和那层雾是**这个元素自己的 background-image**，
   而晃动就是直接改它的 background-position（css/theme-craft-base.css 里跟着
   --skin-depth-x/y 位移，最多 ±9px；变量由 js/theme-skin.js:458 写进 <html>）。
   它的 background-size 是 100% 100% / cover，正好铺满一屏 —— 只要一偏，偏开的那一侧
   就会露出元素自己的 background-color，看起来就是一条硬边。
   修法：把「会晃的那一层」搬到一块**比可视区更大**的独立图层上（四边各多 14px > 9px 上限），
        晃动用 transform 完成（合成层动画，也不用每帧重绘整屏底图），
        多出来的部分由 overflow:hidden 裁掉 → 任何一帧都盖满，永远不漏。
        图和雾都走 background: inherit 继承，主题换图／换雾强度时这层自动跟着变，
        这里不复写任何一个颜色或图片地址。
        那个 overflow:hidden 是必须的：这块图层比自己大 28px，不裁的话 #tab-chat
        （.tab-panel 的 overflow-y:auto 会让横向也变成 auto）会多出 14px 可横拖的余量，
        手机上一划整页会左右跑。裁掉既解决横拖，又保证漏不出来。
        代价：cover 铺在比自己大 28px 的框上，照片会放大约 3%（取景整体轻微推近一点点，
        不会变模糊、也不改变观感）。这是「要留余量又不许露底」必须付的那一点，别再改小到 9px 以内。
        实测（360 / 390 / 430 三档，最大位移 9px，每档 50 帧）：修前最差 3288 / 3558 / 3918 个
        像素露出底色，修后每一帧都是 0，而且整页也划不走了。 */
html[data-theme-skin] #tab-chat #conversation-list {
    overflow: hidden;
}

html[data-theme-skin] #tab-chat #conversation-list::before {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -1;
    pointer-events: none;
    background: inherit;
    background-size: 100% 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    transform: translate3d(var(--skin-depth-x, 0px), var(--skin-depth-y, 0px), 0);
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}

/* 开了「减弱动态」就跟主题里其它景深层一样，只留一张静止的图 */
@media (prefers-reduced-motion: reduce) {
    html[data-theme-skin] #tab-chat #conversation-list::before {
        transform: none;
        transition: none;
    }
}