/* 网页端站内私信(2026-09-19)。
   字大(正文 ≥16px)、偏粗、不密;按钮/可点区域 ≥48px;手机无横向滚动。
   电脑:左会话列表 + 右对话窗;≤768px:两屏切换(.msg-app[data-view=list|chat])。 */

.msg-body {
    background: #F4F4F5;
    overflow-x: hidden;
}
.msg-page [hidden],
.msg-viewer[hidden] { display: none !important; }

.msg-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.msg-page {
    --msg-orange: #F58C45;
    --msg-orange-dark: #D9661C;
    --msg-text: #1F2023;
    --msg-sub: #5F6168;
    --msg-line: #E6E6E9;
    /* 头部 64 + 主导航 80(电脑端) */
    margin-top: calc(var(--header-height, 64px) + 80px);
    padding: 16px 16px 16px;
    box-sizing: border-box;
    color: var(--msg-text);
}
.msg-page *, .msg-page *::before, .msg-page *::after { box-sizing: border-box; }

/* ---------- 通用按钮 ---------- */
.msg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    border: 2px solid transparent;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.msg-btn-primary {
    background: var(--msg-orange-dark);
    color: #fff;
}
.msg-btn-primary:hover { background: #C4570F; }
.msg-btn-primary:disabled {
    background: #E9B892;
    cursor: default;
}
.msg-btn-ghost {
    background: #fff;
    color: var(--msg-orange-dark);
    border-color: #F1C9AA;
}
.msg-btn-ghost:hover { background: #FFF4EC; }
.msg-btn:focus-visible,
.msg-icon-btn:focus-visible,
.msg-back:focus-visible,
.msg-item-btn:focus-visible {
    outline: 3px solid #2F6FEB;
    outline-offset: 2px;
}

/* ---------- 未登录 ---------- */
.msg-gate {
    display: flex;
    justify-content: center;
    padding: 40px 0 80px;
}
.msg-gate-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 16px;
    padding: 36px 24px 32px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
.msg-gate-icon { color: var(--msg-orange); margin-bottom: 12px; }
.msg-gate-title { margin: 0 0 10px; font-size: 24px; font-weight: 800; }
.msg-gate-desc { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--msg-sub); font-weight: 500; }
.msg-gate .msg-btn { width: 100%; max-width: 320px; }

/* ---------- 两栏容器 ---------- */
.msg-app {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    height: calc(100vh - var(--header-height, 64px) - 80px - 32px);
    height: calc(100dvh - var(--header-height, 64px) - 80px - 32px);
    min-height: 460px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* ---------- 会话列表 ---------- */
.msg-list-pane {
    flex: 0 0 360px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--msg-line);
    min-width: 0;
}
.msg-list-head {
    flex: 0 0 auto;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--msg-line);
}
.msg-list-title { margin: 0; font-size: 22px; font-weight: 800; }
.msg-list-status {
    padding: 0 20px;
    font-size: 16px;
    color: var(--msg-sub);
    font-weight: 500;
}
.msg-list-status:not(:empty) { padding: 28px 20px; text-align: center; line-height: 1.6; }
.msg-list {
    flex: 1 1 0;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.msg-item-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 80px;
    padding: 14px 20px;
    border: 0;
    border-bottom: 1px solid #F0F0F2;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.msg-item-btn:hover { background: #FAFAFB; }
.msg-item.is-active .msg-item-btn { background: #FFF4EC; }
.msg-avatar {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #EEE;
}
.msg-item-main { flex: 1 1 auto; min-width: 0; }
.msg-item-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.msg-item-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-item-time {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--msg-sub);
    font-weight: 500;
}
.msg-item-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.msg-item-last {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    color: var(--msg-sub);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-item.has-unread .msg-item-last { color: var(--msg-text); font-weight: 700; }
.msg-unread {
    flex: 0 0 auto;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: #E5322D;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
}

/* ---------- 对话窗 ---------- */
.msg-chat-pane {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #F7F7F8;
}
.msg-chat-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #9A9CA3;
    font-size: 17px;
    font-weight: 600;
    padding: 24px;
    text-align: center;
}
.msg-chat {
    /* flex-basis 必须是 0:用 auto 时聊天记录一长,Chrome 手机布局里这一块会按内容高度算,
       把对话头顶到固定头部下面去(实测) */
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.msg-chat-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 8px 20px;
    background: #fff;
    border-bottom: 1px solid var(--msg-line);
}
.msg-chat-head .msg-avatar { width: 44px; height: 44px; }
.msg-peer-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 19px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-back {
    display: none; /* 只在手机上显示 */
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-left: -12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--msg-text);
    cursor: pointer;
}
.msg-back:hover { background: #F2F2F4; }

.msg-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 20px 20px;
}
.msg-more-wrap { display: flex; justify-content: center; }
.msg-more { margin: 4px 0 8px; font-size: 16px; }
.msg-stream { display: flex; flex-direction: column; }

.msg-time {
    align-self: center;
    margin: 14px 0 6px;
    padding: 3px 12px;
    border-radius: 10px;
    background: #E9E9EC;
    color: #555860;
    font-size: 14px;
    font-weight: 600;
}
.msg-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
    max-width: 100%;
}
.msg-row .msg-avatar { width: 40px; height: 40px; }
.msg-row.is-mine { flex-direction: row-reverse; }
.msg-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: min(560px, 78%);
}
.msg-row.is-mine .msg-col { align-items: flex-end; }
.msg-bubble {
    padding: 11px 15px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #E4E4E8;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}
.msg-row.is-mine .msg-bubble {
    background: #FFE4CF;
    border-color: #FFD2AF;
}
.msg-bubble a { color: #1A56C9; text-decoration: underline; font-weight: 600; }
.msg-trans {
    margin-top: 4px;
    padding: 0 4px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--msg-sub);
    font-weight: 500;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.msg-state {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #8A8C93;
}
.msg-state.is-failed { color: #D0302B; }
.msg-retry {
    margin-left: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 2px solid #F0B8B6;
    background: #fff;
    color: #D0302B;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* 图片消息 */
.msg-img-link {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #E4E4E8;
    background: #EEE;
    line-height: 0;
    cursor: zoom-in;
    width: fit-content;
    max-width: 100%;
}
.msg-img {
    display: block;
    /* 用固定上限,别用百分比:父级是按内容收缩的,百分比会按图片原始宽度算,右边留一块灰 */
    max-width: 260px;
    max-height: 320px;
    width: auto;
    height: auto;
    min-width: 80px;
    min-height: 80px;
    object-fit: cover;
}
.msg-img-link.is-uploading { opacity: .55; cursor: default; }

/* 报价单 / 案例卡片 */
.msg-card {
    display: block;
    width: 280px;
    max-width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #E4E4E8;
    border-left: 5px solid var(--msg-orange);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
a.msg-card:hover { background: #FFFAF6; }
.msg-card-kicker { font-size: 14px; font-weight: 700; color: var(--msg-orange-dark); }
.msg-card-title {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.msg-card-meta { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--msg-sub); }
.msg-card-total { color: var(--msg-text); font-weight: 800; }
.msg-card-cta { margin-top: 10px; font-size: 16px; font-weight: 700; color: #1A56C9; }
.msg-card-img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-top: 8px;
    background: #EEE;
}

.msg-notice {
    flex: 0 0 auto;
    padding: 10px 20px;
    background: #FFF4E5;
    color: #8A4B00;
    font-size: 16px;
    font-weight: 600;
    border-top: 1px solid #F6DDBA;
}
.msg-notice.is-error { background: #FDECEC; color: #A61B17; border-top-color: #F4C6C4; }

/* 输入栏 */
.msg-compose {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid var(--msg-line);
}
.msg-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: #45474D;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.msg-icon-btn:hover { background: #F2F2F4; }
.msg-icon-btn.is-disabled { opacity: .4; pointer-events: none; }
.msg-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    max-height: 150px;
    padding: 11px 14px;
    border: 2px solid #DADAE0;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--msg-text);
    resize: none;
    overflow-y: auto;
}
.msg-input:focus { outline: none; border-color: var(--msg-orange); }
.msg-input:disabled { background: #F2F2F4; color: #8A8C93; }
.msg-send { flex: 0 0 auto; padding: 0 20px; }

/* 看大图 */
.msg-viewer {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .88);
}
.msg-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.msg-viewer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- 手机:两屏切换 ---------- */
@media (max-width: 768px) {
    .msg-page {
        margin-top: var(--header-height, 64px);
        padding: 0;
    }
    .msg-gate { padding: 24px 16px 60px; }
    .msg-app {
        height: calc(100vh - var(--header-height, 64px));
        height: calc(100dvh - var(--header-height, 64px));
        min-height: 360px;
        border-radius: 0;
        box-shadow: none;
    }
    .msg-list-pane {
        flex: 1 1 auto;
        max-width: none;
        border-right: 0;
    }
    .msg-app[data-view="list"] .msg-chat-pane { display: none; }
    .msg-app[data-view="chat"] .msg-list-pane { display: none; }
    .msg-back { display: inline-flex; }
    .msg-chat-head { padding: 6px 12px 6px 16px; }
    .msg-list-head { padding: 16px 16px 12px; }
    .msg-item-btn { padding: 12px 16px; }
    .msg-scroll { padding: 10px 12px 16px; }
    .msg-col { max-width: 80%; }
    .msg-compose { padding-left: 10px; padding-right: 10px; gap: 8px; }
    .msg-send { padding: 0 16px; }
    .msg-notice { padding: 10px 16px; }
}