/* messages.html 页面样式：小红书式消息列表（移动画布 720px 内）。
   设计变量（--primary/--text-*/--border*）见 mobile-shell.css :root。 */
* { box-sizing: border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: #f7fafc;
    margin: 0;
    color: #333;
}

/* ---------- 顶部 Header：标题 + 添加按钮 ---------- */
.msg-header {
    height: 56px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    position: sticky;
    top: 0;
    /* 必须高于 .item-card.menu-open 的 z-index:30（itemcard.css）：
       卡片 ⋮ 菜单打开时整卡抬升到 30，若顶栏低于它，被半遮在顶栏下的卡片
       会反盖到顶栏上方，表现为「菜单一出顶栏就被盖住/消失」。
       顶栏保持 40、搜索栏 39，仍远低于 modal / PlainView（100+ / 4500）。 */
    z-index: 40;
}
.msg-header h1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 1.06rem;
    font-weight: 600;
    color: var(--text-1);
}
.msg-add-btn {
    margin-left: auto;
    width: 36px;
    height: 36px;
    /* 覆盖 mobile-shell.css 里 button 全局基线的 min-height: 44px，
       否则按钮会被撑成 36×44 的椭圆。圆形按钮只需 36×36。 */
    min-height: 36px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s, transform 0.1s;
}
.msg-add-btn:hover { background: var(--primary-2); }
.msg-add-btn:active { transform: scale(0.92); }
.msg-add-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    color: #b0b0b0;
}
/* 微信风格：未输入且未聚焦时「🔍 搜索」作为整体居中；
   一旦聚焦（或已有输入），占位符与图标消失、输入区占满整行，从最左侧开始输入。
   旧浏览器不支持 :has() 时退化为「仅占位文字居中」（图标留在左侧），不致命。 */
.msg-search-input:placeholder-shown:not(:focus) {
    text-align: center;
}
.msg-search-inner:has(.msg-search-input:placeholder-shown:not(:focus)) {
    justify-content: center;
}
.msg-search-inner:has(.msg-search-input:placeholder-shown:not(:focus)) .msg-search-input {
    flex: 0 0 auto;
    width: 2em;  /* 占位符「搜索」= 2 个汉字宽 */
    text-align: left;
}
/* 聚焦后「🔍 搜索」整体消失：占位符透明（保留无障碍朗读）、图标隐藏，
   input 回到 flex:1 占满整行，光标落在最左侧 */
.msg-search-input:focus::placeholder {
    color: transparent;
}
.msg-search-inner:focus-within .msg-search-icon {
    display: none;
}
/* 点击不出蓝色聚焦框：mobile-shell.css 的全局 input:focus-visible（特异性 0,1,1）
   会压过上面 .msg-search-input 里的 outline: none（0,1,0），需在此显式覆盖 */
.msg-search-input:focus,
.msg-search-input:focus-visible {
    outline: none;
}

/* 右键会话菜单（PlainView 弹层）样式已迁到 css/contacts.css
   （base.html 全局加载）。本文件不再保留，避免非 /messages 页面触发弹层时丢样式。 */

/* ---------- 列表容器 ----------
   「消息」列表项通常很少，常驻一屏内可装下。.app-view 用 overflow-y: auto，
   一旦内容总高 ≤ 视图高就会出现「不可滚」，iOS 风格的上下拉动→回弹也跟着失效，
   与「社区 / 我的」等其他板块的弹性交互不一致。
   把 min-height 撑得比视图高 1px：始终让 .app-view 处于「可滚」状态，
   iOS 弹性回弹 / Android over-pull 等原生手感自然保留；
   1px 视觉上不可见，不影响布局。 */
.msg-list-wrap {
    min-height: calc(100dvh - 56px - 52px - var(--tab-h) - env(safe-area-inset-bottom, 0px) + 1px);
}

/* ---------- 单个会话项（.item-card.conv-card） ---------- */
/* 会话卡片基础样式继承自 .item-card（itemcard.css），这里只覆盖会话特有的部分。

   紧凑两行布局（对齐微信会话列表高度）：
       行1：头像（48×48，跨两行）  会话名 [置顶] ………… 时间（绝对定位右上角）
       行2：                        消息预览 …… 未读红点 ⋮
   卡片高度由头像 48 + 上下 padding 10×2 = 68px 撑起，与微信会话项同高。
   只覆盖 .conv-card 分支：itemcard.css 与 conversationcard.js 的 DOM 均不动，
   社区 / 我的等页面的 .item-card 不受影响。

   注意：App Shell 里 itemcard.css 加载在 messages.css 之后（base.html 的全局
   link 排在 block head 之后），同特异性下本文件赢不了 .item-card 基础规则——
   所以这里用 .item-card.conv-card 双类把特异性抬到 (0,2,0)，与本文件其余
   「.conv-card .xxx」覆盖保持同一套路。 */
.item-card.conv-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 12px;
    min-height: 0;              /* 解除 .item-card 的 120px 下限 */
    padding: 10px 12px;
}

/* 头像区：缩到 48×48 圆形、跨两行垂直居中，覆盖 .item-cover-wrap 的 96 方框 */
.conv-card .item-cover-wrap.conv-avatar {
    width: 48px;
    height: 48px;
    grid-row: 1 / 3;
    align-self: center;
    border-radius: 50%;
    border: none;
    background: #eaf3fc;
    overflow: hidden;
}
/* 头像内部元素：居中显示（字号按 48px 头像适配） */
.conv-card .conv-avatar-inner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary);
    background: #eaf3fc;
}
/* emoji 头像 */
.conv-card .conv-avatar-inner.avatar-emoji {
    font-size: 1.75rem;
}

/* 行1 信息区：会话名 + 置顶标签；右侧 padding 给绝对定位的时间让位，
   长名称宁可省略号截断也不与时间重叠 */
.conv-card .item-info {
    grid-row: 1;
    grid-column: 2;
    padding-right: 56px;
}
/* 名称与置顶标签同行排布（标签 flex:none 不被挤换行） */
.conv-card .item-info-top {
    display: flex;
    align-items: center;
    min-width: 0;
}
.conv-card .item-info-top .item-name {
    flex: 0 1 auto;
    min-width: 0;
}

/* 会话名称：覆盖 .item-name 的颜色 */
.conv-card .conv-name {
    color: var(--text-1);
}

/* 置顶标签 */
.conv-card .msg-pin-tag {
    flex: none;
    font-size: 0.66rem;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 4px;
    padding: 0 4px;
    line-height: 1.4;
    margin-left: 8px;
}

/* Footer 区：消息预览 + 未读红点 + ⋮ 菜单，占行2、与名称左对齐。
   不再整卡宽独占一行（flex:1 0 100% 失效于 grid），分隔线一并去掉；
   时间已移到卡片右上角（见 .conv-card .conv-time） */
.conv-card .conv-footer {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}
.conv-card .conv-footer-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 消息预览文本 */
.conv-card .conv-preview {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 空消息提示 */
.conv-card .conv-preview.conv-preview-empty {
    color: var(--text-muted);
    font-style: italic;
}
/* Footer 右侧：时间 + 未读红点 */
.conv-card .conv-footer-right {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 时间显示：微信式浮在卡片右上角（锚点是 .item-card 自带的 position:relative），
   与行1 会话名同排；.item-info 的 padding-right 已为它留出位置 */
.conv-card .conv-time {
    position: absolute;
    top: 10px;
    right: 12px;
    flex: none;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ⋮ 菜单按钮：mobile-shell.css 的 button 全局基线给了 min-height: 44px，
   会把预览行撑到 44px、卡片变成 90px——同 .msg-add-btn 的覆盖套路，
   压到 22×22 让行2 收进头像 48px 之内，卡片守住 68px 总高 */
.conv-card .item-menu-trigger {
    width: 22px;
    height: 22px;
    min-height: 22px;
    font-size: 1rem;
}
/* 未读红点 */
.conv-card .conv-unread {
    flex: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #fa5151;
    color: #fff;
    font-size: 0.66rem;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}

/* 置顶会话：浅灰底 */
.conv-card.conv-card-pinned {
    background: #f5f6f8;
}
.conv-card.conv-card-pinned:hover {
    background: #eef0f3;
}

/* 首屏骨架对齐紧凑会话卡高度（68px），真实卡片替换时不产生跳动。
   作用域限消息列表 .msg-list-wrap，社区 / 我的的 .item-card.skeleton 不受影响 */
.msg-list-wrap .item-card.skeleton {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 3px 12px;
    min-height: 0;
    padding: 10px 12px;
}
.msg-list-wrap .item-card.skeleton .sk-cover {
    width: 48px;
    height: 48px;
    border-radius: 50%;         /* 对齐圆形会话头像 */
    grid-row: 1 / 3;
    align-self: center;
}
.msg-list-wrap .item-card.skeleton .sk-info {
    grid-column: 2;
    grid-row: 1 / 3;
    justify-content: center;    /* 两行占位线在头像高度内垂直居中 */
}
/* 紧凑卡片只有「名称 + 预览」两行，多余的占位行隐藏 */
.msg-list-wrap .item-card.skeleton .sk-line-excerpt-2,
.msg-list-wrap .item-card.skeleton .sk-info-bottom {
    display: none;
}

/* 右键操作菜单（PlainView 内）：整行大按钮 */
.msg-actions { display: flex; flex-direction: column; gap: 8px; }
.msg-action-btn {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text-1);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.1s;
}
.msg-action-btn:hover { background: #f7fafc; }
.msg-action-btn:active { background: #eef2f7; }
.msg-action-btn.danger { color: #fa5151; }

/* 通讯录（PlainView 弹层）样式已迁到 css/contacts.css
   （base.html 全局加载）。本文件不再保留，避免非 /messages 页面触发弹层时丢样式。 */

/* 添加好友弹层样式已迁到 css/addfriend.css（base.html 全局加载）。
   本文件不再保留：所有 .add-friend-form* 由 addfriend.css 单独负责，避免页面级 CSS
   漏加载时主页里的「添加好友」按钮弹出的弹层缺样式。 */

.msg-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.4;
}
.msg-empty-text { line-height: 1.8; color: var(--text-2); }
.msg-empty-text a { color: var(--primary); text-decoration: none; font-weight: 600; }
.msg-empty-sub { margin-top: 4px; font-size: 0.78rem; color: var(--text-muted); }
.msg-empty-sub strong { color: var(--primary); font-weight: 600; }
/* ---------- 空状态 / 加载占位 ---------- */
.msg-loading,
.msg-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 60px 24px;
    font-size: 0.88rem;
}
.msg-loading { padding: 40px 24px; }