/* 手机端 / 微信内置浏览器全屏客服页（/chat-page）
   配色与悬浮窗 chat-widget.css 保持一致；页面自带 Slim 页脚，不加载全站 footer/floaters。 */
.chatpage {
    --pc-brand: #4c9f38;
    --pc-brand-dark: #33761b;
    --pc-ink: #1e1b18;
    --pc-surface: #fffdf9;
    --pc-line: #dce8cf;
    --pc-muted: #6b7a5f;
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--header-h, 76px));
    min-height: 420px;
    max-width: 760px;
    margin: 0 auto;
    background: #f7faf3;
    border-left: 1px solid var(--pc-line);
    border-right: 1px solid var(--pc-line);
    font-size: 15px;
    color: var(--pc-ink);
}

/* 客服页不需要全站顶栏（品牌条 + 热线），只留站头导航 */
.front-active-chat-page .topbar { display: none; }

/* 2026-10-28：标题栏恢复绿色渐变底，标题白字（撤掉此前用过的红字） */
.chatpage__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--pc-brand), var(--pc-brand-dark));
    color: #fff;
    flex: 0 0 auto;
}
.chatpage__avatar {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .22);
    font-size: 13px; font-weight: 700; letter-spacing: .5px;
}
.chatpage__headmain { flex: 1; min-width: 0; line-height: 1.35; }
.chatpage__headmain strong { display: block; font-size: 15px; color: #fff; }
.chatpage__headmain em { display: block; font-size: 12px; opacity: .85; font-style: normal; }
.chatpage__call {
    display: inline-flex; align-items: center; gap: 5px;
    height: 32px; padding: 0 12px;
    border-radius: 16px; background: rgba(255, 255, 255, .18);
    color: #fff; font-size: 13px; font-weight: 600; text-decoration: none;
}
.chatpage__call svg { width: 15px; height: 15px; }
.chatpage__call:active { background: rgba(255, 255, 255, .34); }

.chatpage__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    background: #f7faf3;
}

.chatpage__off {
    background: #fff; border: 1px solid var(--pc-line); border-radius: 14px;
    padding: 18px 16px; line-height: 2; font-size: 14px;
}
.chatpage__off a { color: var(--pc-brand-dark); font-weight: 600; }

.chatpage__msg { margin: 0 0 12px; display: flex; align-items: flex-start; gap: 8px; }
.chatpage__msg.user { justify-content: flex-end; }
/* 2026-10-27：消息带头像，一眼分清客户和智能客服（客户=通用用户图标，客服=悬浮球那张） */
.chatpage__msgava {
    flex: 0 0 30px; width: 30px; height: 30px; margin-top: 1px;
    border-radius: 50%; overflow: hidden;
    display: grid; place-items: center;
    background: #fff; border: 1px solid var(--pc-line);
    font-size: 11px; font-weight: 700; color: var(--pc-brand);
}
.chatpage__msgava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chatpage__msgava--user {
    background: #eef2e8; border-color: #dbe3cf; color: #6b7a5e;
}
.chatpage__msgava--user svg { width: 17px; height: 17px; }
.chatpage__bubble {
    max-width: 84%;
    padding: 10px 13px;
    border-radius: 14px;
    line-height: 1.7;
    word-break: break-word;
    font-size: 14px;
    white-space: pre-wrap;
}
.chatpage__msg.ai .chatpage__bubble {
    background: #fff;
    border: 1px solid var(--pc-line);
    border-top-left-radius: 4px;
}
.chatpage__msg.user .chatpage__bubble {
    background: var(--pc-brand);
    color: #fff;
    border-top-right-radius: 4px;
}
.chatpage__msg.system .chatpage__bubble {
    background: #fff6e5;
    border: 1px solid #f0dcae;
    color: #6b4a0c;
    font-size: 13px;
}
/* 答里带的工具页链接要能一眼看出可点（chat-page.js 把 URL 转成了 a 标签） */
.chatpage__bubble a {
    color: #2f7d1d;
    text-decoration: underline;
    word-break: break-all;
}
.chatpage__msg.user .chatpage__bubble a {
    color: #fff;
}
.chatpage__typing { display: inline-flex; gap: 4px; align-items: center; }
.chatpage__typing i {
    width: 6px; height: 6px; border-radius: 50%; background: var(--pc-brand);
    animation: chatpage-blink 1.2s infinite ease-in-out;
}
.chatpage__typing i:nth-child(2) { animation-delay: .2s; }
.chatpage__typing i:nth-child(3) { animation-delay: .4s; }
@keyframes chatpage-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.chatpage__quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.chatpage__quick button {
    border: 1px solid var(--pc-line);
    background: #fff;
    color: var(--pc-brand-dark);
    border-radius: 14px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
}
.chatpage__quick button:active { background: var(--pc-brand); border-color: var(--pc-brand); color: #fff; }

.chatpage__lead {
    border-top: 1px solid var(--pc-line);
    background: #fff;
    padding: 10px 14px 12px;
    flex: 0 0 auto;
}
.chatpage__lead[hidden] { display: none; }
.chatpage__lead p { margin: 0 0 8px; font-size: 13px; color: var(--pc-muted); }
.chatpage__leadrow { display: flex; gap: 8px; }
.chatpage__leadrow input {
    flex: 1; min-width: 0; height: 38px; padding: 0 12px;
    border: 1px solid var(--pc-line); border-radius: 10px; font-size: 14px;
    background: #fff; color: var(--pc-ink);
}
.chatpage__leadrow input:focus { outline: none; border-color: var(--pc-brand); }
.chatpage__leadrow button {
    height: 38px; padding: 0 16px; border: 0; border-radius: 10px;
    background: var(--pc-brand); color: #fff; font-size: 14px; cursor: pointer;
}
.chatpage__leadrow button:disabled { opacity: .6; cursor: not-allowed; }
.chatpage__leadtip { display: block; margin-top: 6px; font-size: 12px; color: var(--pc-brand-dark); }
.chatpage__leadtip.error { color: #d92d20; }

.chatpage__input {
    display: flex; gap: 8px; padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pc-line); background: #fff;
    flex: 0 0 auto;
}
.chatpage__input input {
    flex: 1; min-width: 0; height: 40px; padding: 0 12px;
    border: 1px solid var(--pc-line); border-radius: 12px; font-size: 14px;
    background: #fff; color: var(--pc-ink);
}
.chatpage__input input:focus { outline: none; border-color: var(--pc-brand); }
.chatpage__input button {
    height: 40px; padding: 0 18px; border: 0; border-radius: 12px;
    background: var(--pc-brand); color: #fff; font-size: 14px; cursor: pointer;
}
.chatpage__input button:disabled { opacity: .6; cursor: not-allowed; }

.chatpage__contact {
    display: flex; gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pc-line);
    background: #fff;
    flex: 0 0 auto;
}
.chatpage__contactitem {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--pc-line); border-radius: 12px;
    background: var(--pc-surface);
    text-decoration: none; color: var(--pc-ink);
    font-size: 13px; text-align: left; cursor: pointer;
}
.chatpage__contactitem svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--pc-brand-dark); }
.chatpage__contactitem span { min-width: 0; display: block; line-height: 1.3; }
.chatpage__contactitem b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatpage__contactitem em { display: block; font-size: 11px; color: var(--pc-muted); font-style: normal; }
.chatpage__contactitem:active { border-color: var(--pc-brand); }

.chatpage__foot {
    flex: 0 0 auto;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #f0f5ea;
    border-top: 1px solid var(--pc-line);
    font-size: 12px; color: var(--pc-muted);
    text-align: center;
}
.chatpage__foot a { color: var(--pc-brand-dark); text-decoration: none; margin: 0 2px; }

.chatpage__copytip {
    position: fixed; left: 50%; bottom: 132px; transform: translateX(-50%);
    background: rgba(30, 27, 24, .86); color: #fff;
    font-size: 13px; padding: 8px 14px; border-radius: 18px;
    z-index: 50; pointer-events: none;
}

@media (max-width: 640px) {
    .chatpage { border-left: 0; border-right: 0; }
}