/* =====================================================================
 *  在线客服系统 · 访客端聊天页（chat.css）
 *  视觉语言：深藏青头部 + 浅灰底 + 白色气泡 + 蓝色发送按钮
 *  基础组件在 app.css，本文件只写访客端专属部分
 * ===================================================================== */

:root {
    --ch-head: #1b2942;
    --ch-head-2: #22355a;
    --ch-page-bg: #eef1f7;
    --ch-bd: #e9edf5;
    --ch-bubble-bd: #e6eaf2;
    --ch-pill-bg: #e9edf5;
}

/* ---------------------------------------------------------------------
 *  1. 页面容器
 * ------------------------------------------------------------------- */
.cs-chat-body {
    margin: 0;
    background: var(--ch-page-bg);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.cs-chat-page {
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
}

.cs-chat-shell {
    position: relative;
    width: 100%;
    max-width: none;            /* 桌面端铺满视口；超宽屏由下方 media query 限宽居中内容 */
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

/* 首屏加载 */
.cs-chat-boot {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--c-muted);
    background: #fff;
    font-size: 13.5px;
}
.cs-chat-boot .brand svg { display: block; }
.cs-chat-boot .brand {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    font-size: 25px;
    color: #fff;                 /* 线性图标跟随文字色 */
    border-radius: 16px;
    background: linear-gradient(140deg, #3d7bff, #7c5cff);
    box-shadow: 0 10px 26px rgba(43, 108, 255, .34);
}
.cs-chat-boot.done { display: none; }

/* 挂件嵌入模式：去掉外框，铺满 iframe */
.cs-embed .cs-chat-page { padding: 0; }
.cs-embed .cs-chat-shell { max-width: none; border-radius: 0; box-shadow: none; border: 0; }

/* ---------------------------------------------------------------------
 *  2. 深色头部
 * ------------------------------------------------------------------- */
.cs-chat-head {
    flex: none;
    background: linear-gradient(120deg, var(--ch-head), var(--ch-head-2));
    color: #fff;
}
.cs-chat-head-in {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    min-height: 70px;
}

.cs-head-av {
    flex: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .14);
}
.cs-head-av img { width: 100%; height: 100%; object-fit: cover; }
.cs-head-av .ph {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    font-size: 19px;
}

.cs-chat-head-info { flex: 1; min-width: 0; }
.cs-chat-head-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cs-chat-head-title .cs-ellipsis {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .2px;
    min-width: 0;
}
.cs-chat-head-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, .62);
    min-width: 0;
}
.cs-chat-head-sub .sb-a,
.cs-chat-head-sub .sb-b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cs-chat-head-sub .sb-sep {
    flex: none;
    width: 1px; height: 10px;
    background: rgba(255, 255, 255, .3);
}

.cs-chat-pill {
    flex: none;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .24);
}
.cs-chat-pill.on   { background: rgba(52, 211, 153, .24); border-color: rgba(52, 211, 153, .5); color: #a7f3d0; }
.cs-chat-pill.off  { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .78); }
.cs-chat-pill.busy { background: rgba(245, 158, 11, .22); border-color: rgba(245, 158, 11, .5); color: #fcd9a0; }

.cs-chat-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.cs-head-act {
    height: 34px;
    min-width: 34px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 10px;
    transition: background .15s, transform .1s;
}
.cs-head-act:hover { background: rgba(255, 255, 255, .24); }
.cs-head-act:active { transform: scale(.96); }
/* 头部按钮内的线性图标：显式尺寸（iOS 必须） */
.cs-head-act > svg { width: 17px; height: 17px; display: block; stroke: currentColor; }
.cs-head-act.is-close {
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    background: #e5484d;
    border-color: #e5484d;
    box-shadow: 0 6px 16px rgba(229, 72, 77, .34);
}
.cs-head-act.is-close:hover { background: #d13b40; }
.cs-head-act.is-min { font-size: 16px; }

/* 兼容旧按钮类 */
.cs-chat-hbtn {
    height: 34px; min-width: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-radius: 10px;
}
.cs-chat-hbtn:hover { background: rgba(255, 255, 255, .24); }
.cs-chat-hbtn.is-close { background: #e5484d; }

/* ---------------------------------------------------------------------
 *  3. 消息区
 * ------------------------------------------------------------------- */
.cs-msgs {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 22px 10px;
    background: #fff;
    overscroll-behavior: contain;
}
.cs-msgs::-webkit-scrollbar { width: 7px; }
.cs-msgs::-webkit-scrollbar-thumb { background: #d8dee9; border-radius: 4px; }

/* 消息行 */
.cs-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.cs-msg-col { flex: 1; min-width: 0; max-width: min(620px, calc(100% - 56px)); }

.cs-msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 11.5px;
    color: var(--c-muted-2);
}
.cs-msg-name { font-size: 12px; font-weight: 600; color: var(--c-muted); }
.cs-msg-tag {
    padding: 0 6px;
    font-size: 10.5px;
    line-height: 16px;
    border-radius: 4px;
    background: var(--ch-pill-bg);
    color: var(--c-muted);
}
.cs-msg-body { display: flex; }
.cs-msg-state { margin-top: 4px; font-size: 11px; color: var(--c-muted-2); }

/* 访客自己的消息靠右 */
.cs-msg-self { flex-direction: row-reverse; }
.cs-msg-self .cs-msg-meta { justify-content: flex-end; }
.cs-msg-self .cs-msg-body { justify-content: flex-end; }
.cs-msg-self .cs-msg-col { display: flex; flex-direction: column; align-items: flex-end; }

/* 气泡 */
.cs-bubble {
    position: relative;
    max-width: 100%;
    padding: 10px 13px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--c-ink);
    background: #fff;
    border: 1px solid var(--ch-bubble-bd);
    border-radius: 12px;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.cs-msg-self .cs-bubble {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(43, 108, 255, .22);
}
.cs-bubble-text { white-space: pre-wrap; }

.cs-bubble-img { padding: 5px; }
.cs-bubble-img img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(230px, 58vw);
    max-height: 270px;
    object-fit: cover;
    border-radius: 9px;
    cursor: zoom-in;
}
.cs-bubble-video { padding: 5px; }
.cs-bubble-video video { max-width: 260px; max-height: 300px; border-radius: 9px; }
.cs-bubble-voice {
    display: flex; align-items: center; gap: 9px;
    min-width: 108px;
    cursor: pointer;
}
/* 语音条喇叭图标：线性 SVG + 显式尺寸（替换原 🔊 emoji，iOS 缺字形会空白） */
.cs-bubble-voice .vi { display: inline-flex; align-items: center; flex: none; }
.cs-bubble-voice .vi svg { width: 16px; height: 16px; display: block; stroke: currentColor; }
.cs-bubble-voice .wave { display: flex; align-items: flex-end; gap: 2px; height: 15px; }
.cs-bubble-voice .wave i {
    width: 2.5px;
    background: currentColor;
    opacity: .55;
    border-radius: 2px;
    animation: ch-wave 1.1s ease-in-out infinite;
}
.cs-bubble-voice .wave i:nth-child(1) { height: 6px; animation-delay: 0s; }
.cs-bubble-voice .wave i:nth-child(2) { height: 12px; animation-delay: .15s; }
.cs-bubble-voice .wave i:nth-child(3) { height: 8px; animation-delay: .3s; }
.cs-bubble-voice .wave i:nth-child(4) { height: 14px; animation-delay: .45s; }
.cs-bubble-voice .dur { font-size: 12px; opacity: .8; }
@keyframes ch-wave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }

.cs-bubble-file { display: flex; align-items: center; gap: 10px; min-width: 190px; color: inherit; }
.cs-bubble-file .fi { flex: none; display: inline-flex; align-items: center; }
.cs-bubble-file .fi svg { width: 22px; height: 22px; display: block; stroke: currentColor; }
.cs-bubble-file .dl { flex: none; display: inline-flex; align-items: center; opacity: .75; }
.cs-bubble-file .dl svg { width: 15px; height: 15px; display: block; stroke: currentColor; }
.cs-bubble-file .ft { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-bubble-file .fn {
    font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-bubble-file .fs { font-size: 11.5px; opacity: .7; }
.cs-bubble-file .dl { flex: none; font-size: 15px; opacity: .8; }

/* 图片 / 视频下方的尺寸说明 */
.cs-bubble-img .cap,
.cs-bubble-video .cap {
    margin-top: 5px;
    font-size: 11px;
    color: var(--c-muted-2);
}
.cs-msg-self .cs-bubble-img .cap,
.cs-msg-self .cs-bubble-video .cap { color: rgba(255, 255, 255, .78); }
.cs-bubble-img .cap[data-st],
.cs-bubble-video .cap[data-st] { font-weight: 600; }
.cs-msg.is-failed .cs-bubble { border-color: #fecdca; background: #fffbfa; }

.cs-bubble-sticker { padding: 2px; border: 0; background: transparent; box-shadow: none; }
.cs-bubble-sticker img { width: 108px; }
/* 表情消息里的 emoji：显式跨端字体栈，避免 iOS/部分安卓渲染成空白方块 */
.cs-bubble-sticker {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Segoe UI Symbol", "Android Emoji", "EmojiOne Color",
                 var(--font);
    font-size: 34px;
    line-height: 1.25;
}

/* 上传进度（结构：.cs-bubble-progress > .cs-bar > i + .pct） */
.cs-bubble-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.cs-bubble-progress .cs-bar {
    flex: 1;
    min-width: 0;
    height: 4px;
    background: rgba(0, 0, 0, .1);
    border-radius: 999px;
    overflow: hidden;
}
.cs-bubble-progress .cs-bar > i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--c-primary);
    border-radius: 999px;
    transition: width .2s;
}
.cs-bubble-progress .pct { flex: none; font-size: 11px; color: var(--c-muted-2); }
.cs-msg-self .cs-bubble-progress .cs-bar { background: rgba(255, 255, 255, .32); }
.cs-msg-self .cs-bubble-progress .cs-bar > i { background: #fff; }
.cs-msg-self .cs-bubble-progress .pct { color: rgba(255, 255, 255, .8); }
/* 旧结构兜底 */
.cs-bubble-progress > i { display: block; height: 100%; width: 0; background: var(--c-primary); }

.cs-retry {
    margin-top: 5px;
    padding: 3px 10px;
    font-size: 11.5px;
    color: var(--c-danger);
    background: var(--c-danger-50);
    border-radius: 999px;
}

/* 日期分隔 */
.cs-msg-day { display: flex; justify-content: center; margin: 16px 0 14px; }
.cs-msg-day span {
    padding: 3px 13px;
    font-size: 11.5px;
    color: var(--c-muted);
    background: var(--ch-pill-bg);
    border-radius: 999px;
}

/* 系统提示 / 日期分隔（居中红色药丸，醒目提示） */
.cs-msg-sys { justify-content: center; }
.cs-msg-sys > span {
    display: inline-block;
    max-width: 86%;
    padding: 5px 14px;
    font-size: 12px;
    line-height: 1.6;
    color: #e0392f;
    background: #fff1f0;
    border: 1px solid #ffc9c4;
    border-radius: 999px;
    text-align: center;
    word-break: break-word;
}

/* 加载更早消息 */
.cs-msg-loadmore { display: flex; justify-content: center; margin-bottom: 12px; }
.cs-msg-loadmore button {
    padding: 5px 14px;
    font-size: 12px;
    color: var(--c-muted);
    background: var(--ch-pill-bg);
    border-radius: 999px;
}
.cs-msg-loadmore button:hover { color: var(--c-primary); background: var(--c-primary-50); }

/* ---------------------------------------------------------------------
 *  4. 底部输入区
 * ------------------------------------------------------------------- */
.cs-foot {
    flex: none;
    background: #fff;
    border-top: 1px solid var(--ch-bd);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.cs-recording {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 13px;
    color: #b42318;
    background: #fef3f2;
    border-bottom: 1px solid #fee4e2;
}
.cs-recording.open { display: flex; }
.cs-recording .rdot {
    flex: none;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #e5484d;
    animation: ch-blink 1s ease-in-out infinite;
}
@keyframes ch-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.cs-recording .rtx { flex: 1; min-width: 0; }
.cs-recording .rtime {
    flex: none;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #b42318;
}
.cs-recording .cs-btn { flex: none; }

/* 4.1 工具行 */
.cs-tools { display: flex; align-items: center; gap: 8px; padding: 9px 16px 0; }
.cs-tools-left { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.cs-tools-right { display: flex; align-items: center; gap: 10px; flex: none; }
.cs-kbd-tip { font-size: 11.5px; color: var(--c-muted-2); white-space: nowrap; }

.cs-tool {
    width: 32px; height: 32px; flex: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: var(--c-ink-2);
    border-radius: 9px;
    transition: background .15s, opacity .15s;
}
/* 工具行的线性图标：显式设定尺寸
   ⚠️ iOS 修复要点：必须写死 width/height，不能只依赖 viewBox */
.cs-tool > svg {
    width: 19px; height: 19px;
    display: block;
    stroke: currentColor;
}
.cs-tool:hover { background: #f3f5fa; }
.cs-tool:disabled { opacity: .32; cursor: not-allowed; }
.cs-tool.active { background: var(--c-primary-50); color: var(--c-primary); }
.cs-tools .sp { flex: 1; }

/* 4.2 输入行 */
.cs-input-row { display: flex; align-items: flex-end; gap: 10px; padding: 9px 16px 12px; }
.cs-input-box {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--ch-bubble-bd);
    border-radius: 12px;
    padding: 2px 4px;
    transition: border-color .15s, box-shadow .15s;
}
.cs-input-box:focus-within {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-50);
}
.cs-input-box textarea {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    max-height: 132px;
    padding: 9px 10px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-ink);
    background: transparent;
    border: 0;
    outline: none;
    resize: none;
    font-family: inherit;
}
.cs-input-box textarea::placeholder { color: var(--c-muted-2); }

.cs-send {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--c-primary);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(43, 108, 255, .26);
    transition: background .15s, transform .1s;
}
.cs-send:hover:not(:disabled) { background: var(--c-primary-600); }
.cs-send:active:not(:disabled) { transform: scale(.98); }
.cs-send:disabled {
    background: #c9d3e4;
    box-shadow: none;
    cursor: not-allowed;
    color: #fff;
}

/* 4.3 底部说明 / 结束条 */
.cs-foot-tip {
    padding: 0 16px 10px;
    font-size: 11px;
    color: var(--c-muted-2);
    text-align: center;
}
.cs-closed-bar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    font-size: 13px;
    color: var(--c-muted);
    background: #f5f7fb;
    border-top: 1px solid var(--ch-bd);
}
.cs-closed-bar.open { display: flex; }
.cs-closed-bar button {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--c-primary);
    border-radius: 999px;
}

/* ---------------------------------------------------------------------
 *  5. 表情面板 / 贴纸
 * ------------------------------------------------------------------- */
.cs-stickers {
    display: none;
    max-height: 232px;
    overflow-y: auto;
    padding: 10px 14px;
    background: #f7f9fc;
    border-top: 1px solid var(--ch-bd);
}
.cs-stickers.open { display: block; }
.cs-sticker-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.cs-sticker-tabs button {
    padding: 5px 12px;
    font-size: 12.5px;
    color: var(--c-muted);
    background: #fff;
    border: 1px solid var(--ch-bd);
    border-radius: 999px;
}
.cs-sticker-tabs button.active { color: #fff; background: var(--c-primary); border-color: var(--c-primary); }
.cs-sticker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 4px;
}
.cs-sticker-grid button {
    height: 42px;
    font-size: 22px;
    border-radius: 9px;
    transition: background .12s;
    /* 表情包本质是 emoji 文本，这里显式给出跨端 emoji 字体栈，
       避免某些安卓 ROM 用中文字体去渲染 emoji 导致「黑白方块」 */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 "Segoe UI Symbol", "Android Emoji", "EmojiOne Color",
                 var(--font);
    line-height: 1.1;
    overflow: hidden;
}
.cs-sticker-grid button:hover { background: #fff; }
.cs-sticker-grid img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------
 *  6. 问题引导菜单
 * ------------------------------------------------------------------- */
.cs-guide {
    margin: 4px 0 14px;
    padding: 14px 16px;
    background: #f7f9fc;
    border: 1px solid var(--ch-bd);
    border-radius: 14px;
}
.cs-guide-head { margin-bottom: 12px; }
.cs-guide-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-ink);
}
.cs-guide-sub { margin-top: 3px; font-size: 12px; color: var(--c-muted); }
.cs-guide-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-guide-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    font-size: 13px;
    color: var(--c-primary);
    background: #fff;
    border: 1px solid var(--c-primary-100);
    border-radius: 999px;
    transition: background .15s, transform .1s;
}
.cs-guide-item .ar { font-size: 15px; opacity: .55; }
.cs-guide-item.is-primary {
    color: #fff;
    background: var(--c-primary);
    border-color: var(--c-primary);
    box-shadow: 0 6px 16px rgba(43, 108, 255, .24);
}
.cs-guide-item:hover { background: var(--c-primary-50); }
.cs-guide-item.is-primary:hover { background: var(--c-primary-600); }
.cs-guide-item:active { transform: scale(.98); }
.cs-guide-tips {
    display: flex; align-items: center; gap: 6px;
    margin-top: 11px;
    font-size: 11.5px;
    color: var(--c-muted-2);
}
/* 引导菜单里的线性图标：与工具行图标统一风格 */
.cs-guide .em { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cs-guide .em svg { display: block; }
.cs-guide-item .em svg { opacity: .95; }
.cs-guide-title .em svg { color: var(--c-primary); }
.cs-guide-tips .em svg { color: var(--c-muted-2); }

/* ---------------------------------------------------------------------
 *  7. 状态提示条 / 评价
 * ------------------------------------------------------------------- */
.cs-notice {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--c-muted);
    background: var(--ch-pill-bg);
    border-radius: 10px;
}
.cs-notice .em { flex: none; font-size: 15px; display: inline-flex; align-items: center; }
.cs-notice .em svg { display: block; }
.cs-notice.ok { color: #05603a; background: #e6f7ef; }
.cs-notice.warn { color: #93600a; background: var(--c-warn-50); }

.cs-bar {
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 12px;
    padding: 9px 13px;
    font-size: 12.5px;
    color: var(--c-muted);
    background: #f7f9fc;
    border-radius: 10px;
}

.cs-rating {
    margin: 6px 0 16px;
    padding: 18px;
    text-align: center;
    background: #f7f9fc;
    border: 1px solid var(--ch-bd);
    border-radius: 14px;
}
.cs-rating h4 { font-size: 14.5px; font-weight: 700; color: var(--c-ink); }
.cs-rating .sub { margin: 4px 0 14px; font-size: 12px; color: var(--c-muted); }
.cs-stars { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.cs-stars button {
    font-size: 30px;
    line-height: 1;
    color: #dfe4ee;
    transition: color .15s, transform .12s;
    display: inline-flex; align-items: center; justify-content: center;
}
/* 星星改为线性 SVG（原 ★ 字符在部分 iOS 字体下不显示） */
.cs-stars button > svg { width: 30px; height: 30px; display: block; }
.cs-stars button svg path { fill: currentColor; }
.cs-stars button.on { color: #f5a524; }
.cs-stars button:hover { transform: scale(1.12); }
.cs-rating textarea {
    width: 100%;
    min-height: 66px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--c-ink);
    background: #fff;
    border: 1px solid var(--ch-bd);
    border-radius: 10px;
    resize: none;
    outline: none;
}

/* ---------------------------------------------------------------------
 *  8. 图片灯箱 / 上下文菜单
 * ------------------------------------------------------------------- */
.cs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(9, 14, 26, .88);
}
.cs-lightbox.show { display: flex; animation: ch-fade .18s ease; }
.cs-lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.cs-lightbox-close {
    position: absolute;
    top: 18px; right: 20px;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-radius: 50%;
}
.cs-lightbox-close:hover { background: rgba(255, 255, 255, .26); }
@keyframes ch-fade { from { opacity: 0; } to { opacity: 1; } }

.cs-ctx {
    position: fixed;
    z-index: 210;
    min-width: 132px;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--ch-bd);
    border-radius: 10px;
    box-shadow: var(--sh-md);
}
.cs-ctx button {
    display: block;
    width: 100%;
    padding: 8px 11px;
    font-size: 13px;
    color: var(--c-ink-2);
    border-radius: 7px;
    text-align: left;
}
.cs-ctx button:hover { background: var(--c-bg-2); }

/* ---------------------------------------------------------------------
 *  9. 自适应
 * ------------------------------------------------------------------- */
/* 电脑端：铺满整个视口（全屏聊天界面，不再是居中的窄卡片） */
@media (min-width: 1240px) {
    .cs-chat-page { padding: 0; }
    .cs-chat-shell {
        max-width: none;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
        border: 0;
    }
}

/* 大屏：头部 / 消息 / 输入行内容限宽居中，避免一行文字被拉得过长
   （外壳仍铺满整屏，只是内容有留白，视觉上更像专业客服台而不是拉伸的网页） */
@media (min-width: 1280px) {
    .cs-chat-head-in,
    .cs-msgs,
    .cs-foot {
        width: 100%;
        max-width: 1240px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 900px) {
    .cs-msgs { padding: 14px 14px 8px; }
    .cs-msg-col { max-width: calc(100% - 50px); }
    .cs-chat-head-in { padding: 10px 14px; min-height: 64px; }
    .cs-tools { padding: 8px 12px 0; }
    .cs-input-row { padding: 8px 12px 10px; }
    .cs-kbd-tip { display: none; }
}

/* 手机端：全屏铺满 */
@media (max-width: 720px) {
    .cs-chat-page { padding: 0; }
    .cs-chat-shell { max-width: none; border-radius: 0; box-shadow: none; border: 0; }
    .cs-chat-head-sub .sb-b { display: none; }
    .cs-chat-head-sub .sb-sep { display: none; }
    .cs-head-av { width: 38px; height: 38px; }
    .cs-head-act.is-close { padding: 0 13px; }
    .cs-bubble-img img { max-width: 190px; }
    .cs-bubble-video video { max-width: 210px; }
    .cs-send { width: 42px; padding: 0; justify-content: center; border-radius: 12px; }
    .cs-send span { display: none; }
    .cs-guide { padding: 12px; }
    .cs-guide-item { padding: 7px 12px; font-size: 12.5px; }
}

@media (max-width: 420px) {
    .cs-chat-head-title .cs-ellipsis { font-size: 14.5px; }
    .cs-head-act.is-min { display: none; }
}