/* =========================================================
   5/5 · 模块层 modules/message.css —— 留言本
   ---------------------------------------------------------
   留言本与询价是**两条独立业务**：
     询价 = 要报价，挂询价车；留言 = 说句话，公开可见。
   所以它自成模块，不与 cart / inquiry 混。
   本文件只被留言页加载（theme.json 的 styles.pages.message）。

   类名前缀：.msg-*
   ⚠️ 表单零件（.field / .req / .cap-* / .hp）在 components 与 inquiry 模块，
      这里只管「留言列表 + 留言页自己的骨架」。

   ⚠️ 1.9.x 修过的坑：
      message.htm 顶部的说明注释漏了闭合标记 `*}`，
      编译器按非贪婪规则一路找到几十行后那个 `*}` 才收尾 ——
      把整段页首通栏和 `<section class="section"><div class="wrap">`
      一起当成注释删掉了。症状是「页面能开、但顶部通栏没了、版心也没了」，
      全程零报错。**模板注释必须成对**，这是最典型的静默失效。
   ========================================================= */

/* ---------------- 留言页骨架 ---------------- */

.msg-form { margin-bottom: 32px; }          /* 表单卡片与下方列表的间距 */

.msg-list-h { font-size: 19px; margin: 0 0 4px; }
.msg-count  { font-size: 13px; font-weight: 400; color: var(--muted); }

.msg-more {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid var(--line-soft);
}

/* 一条留言都还没有时的空态（与列表同宽，避免版面塌陷） */
.msg-empty {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 36px 20px; text-align: center; color: var(--muted);
}
.msg-empty p { margin: 0 0 6px; }
.msg-empty p.small { margin: 0; font-size: 13.5px; }

/* ---------------- 留言列表 ---------------- */

.msg-list { border-top: 1px solid var(--line-soft); }
.msg-item { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }

.msg-head {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin-bottom: 9px;
}
.msg-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.msg-prod {
    font-size: 12.5px; color: var(--primary);
    text-decoration: none; max-width: 40%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.msg-prod:hover { text-decoration: underline; }
.msg-time { margin-inline-start: auto; font-size: 12px; color: var(--muted-2); font-style: normal; }

.msg-body {
    font-size: 15px; line-height: 1.85; color: var(--ink);
    white-space: pre-wrap; word-break: break-word;
}

.msg-ext { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.msg-tag {
    font-size: 12.5px; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--line-soft);
    border-radius: 6px; padding: 2px 8px;
}
.msg-tag b { font-weight: 600; color: var(--ink); }

/* 商家回复：左侧一条竖线区分，公开页最容易被误认成访客留言 */
.msg-reply {
    margin-top: 14px; padding: 12px 16px;
    background: var(--surface-2);
    /* 引用块左侧的强调竖线：RTL 时整块要镜像到右边（含圆角），
       所以竖线与圆角都写成逻辑属性。只改 border 不改圆角 = 阿拉伯语下
       竖线跑到右边、圆角却还在左边，看起来很脏。 */
    border-inline-start: 3px solid var(--primary);
    border-start-start-radius: 0; border-start-end-radius: 8px;
    border-end-end-radius: 8px;   border-end-start-radius: 0;
}
.msg-reply b {
    display: block; font-size: 12.5px; font-weight: 600;
    color: var(--primary); margin-bottom: 4px;
}
.msg-reply p {
    margin: 0; font-size: 14.5px; line-height: 1.8;
    color: var(--ink); white-space: pre-wrap; word-break: break-word;
}

@media (max-width: 640px) {
    .msg-prod { max-width: 100%; }
    .msg-time { margin-inline-start: 0; width: 100%; }
}