.help-page{display:flex;flex-direction:column;gap:18px;padding:20px 20px 90px;max-width:960px;margin:0 auto;width:100%;box-sizing:border-box}
.help-card{display:block;background:var(--surface,#fff);border:1px solid var(--border,#e4e0dc);border-radius:16px;padding:20px;color:inherit;overflow-wrap:anywhere}
.help-card>span,.help-card>small{display:block;margin-top:8px;color:var(--muted,#6b6863)}
.help-card summary{cursor:pointer;font-weight:700;line-height:1.6}
.help-form{display:flex;flex-direction:column;gap:14px}
.help-form label{display:flex;flex-direction:column;gap:7px;font-weight:650}
.help-form input,.help-form textarea,.help-form select{box-sizing:border-box;width:100%;max-width:100%;padding:11px 12px;border:1px solid #d8d3cc;border-radius:12px;background-color:#fff;color:#282522;font:inherit}
.help-form textarea{resize:vertical}
.help-form button{align-self:flex-start}
.help-form button:not([class*="button"]),.help-card button:not([class*="button"]){display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 20px;border:1px solid transparent;border-radius:999px;background:var(--color-primary,#c2652a);color:#fff;font-weight:650;line-height:1;box-shadow:0 8px 20px rgba(194,101,42,.16);cursor:pointer;transition:transform .18s ease,background-color .18s ease}
.help-form button:not([class*="button"]):hover,.help-card button:not([class*="button"]):hover{background:var(--color-primary-dark,#9e4c1e);transform:translateY(-1px)}
.help-page-more{display:table;margin:12px auto;text-align:center}
.help-text{white-space:pre-wrap;line-height:1.8;margin:14px 0}
.help-thread{display:flex;flex-direction:column;gap:14px}
.help-message header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.help-message time{font-size:13px;color:#6b6863}
.help-message[data-sender="A"]{background:#f4f8f1}
.help-actions{display:flex;gap:16px;flex-wrap:wrap}
.help-card h2,.help-form h2{margin:0}
.help-card a{overflow-wrap:anywhere}
.help-form select:not([multiple]){padding-right:38px}

/* ============================================================
   現代客服聊天室 (Support Chatroom Styles)
   ============================================================ */
.chat-page{max-width:860px;height:calc(100vh - 120px);min-height:560px;display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
.chat-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;background:var(--surface,#fff);border:1px solid var(--border,#e4e0dc);border-radius:18px;box-shadow:0 4px 16px rgba(0,0,0,.03)}
.chat-header__info{display:flex;align-items:center;gap:14px}
.chat-header__avatar{position:relative;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary,#c2652a),#e07a3c);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(194,101,42,.2)}
.chat-header__title{font-size:18px;font-weight:750;margin:0;color:var(--text,#1f1c19);line-height:1.2}
.chat-header__desc{font-size:13px;color:var(--muted,#75716b);margin:3px 0 0}
.status-indicator{position:absolute;bottom:1px;right:1px;width:11px;height:11px;border-radius:50%;border:2px solid #fff;background:#22c55e}
.status-indicator--online{box-shadow:0 0 0 2px rgba(34,197,94,.2)}

.help-notice-banner{padding:10px 16px;background:#eef7ee;color:#1e4620;border:1px solid #c7e6c9;border-radius:12px;margin:0;font-size:14px;font-weight:600}
.chat-status-banner{padding:10px 16px;background:#fff8e6;color:#855500;border:1px solid #ffe199;border-radius:12px;font-size:13px;line-height:1.5}

.chat-stream-card{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--surface,#fff);border:1px solid var(--border,#e4e0dc);border-radius:20px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.04)}
.chat-load-more{padding:10px;text-align:center;border-bottom:1px solid #f0ece8;background:#faf8f5}
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}

.chat-empty{margin:auto;text-align:center;padding:40px 20px;max-width:440px}
.chat-empty__icon{font-size:42px;margin-bottom:12px}
.chat-empty h2{font-size:18px;margin:0 0 8px}
.chat-empty p{font-size:14px;color:var(--muted,#75716b);line-height:1.6;margin:0}

.chat-row{display:flex;align-items:flex-end;gap:10px;max-width:85%}
.chat-row--user{align-self:flex-end;flex-direction:row-reverse}
.chat-row--agent{align-self:flex-start}

.chat-bubble-avatar{width:32px;height:32px;border-radius:50%;background:#e4e0dc;color:#5a554f;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-bubble-group{display:flex;flex-direction:column;gap:4px}
.chat-row--user .chat-bubble-group{align-items:flex-end}
.chat-bubble-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted,#8c8780);padding:0 4px}
.chat-bubble-author{font-weight:650}
.chat-bubble{padding:12px 16px;border-radius:18px;position:relative;word-break:break-word;overflow-wrap:anywhere;line-height:1.6}
.chat-row--user .chat-bubble{background:var(--color-primary,#c2652a);color:#fff;border-bottom-right-radius:4px;box-shadow:0 4px 14px rgba(194,101,42,.18)}
.chat-row--agent .chat-bubble{background:#f3f0ec;color:#23201d;border-bottom-left-radius:4px}
.chat-bubble-text{margin:0;white-space:pre-wrap;font-size:15px}

.chat-composer{display:flex;align-items:flex-end;gap:10px;padding:14px 16px;border-top:1px solid var(--border,#e8e4df);background:#faf8f5}
.chat-composer__input-wrap{flex:1;position:relative}
.chat-composer textarea{width:100%;min-height:48px;max-height:160px;padding:12px 16px;border:1px solid #d5cfc7;border-radius:16px;background:#fff;color:inherit;font:inherit;font-size:15px;line-height:1.5;box-sizing:border-box;resize:none;transition:border-color .18s,box-shadow .18s}
.chat-composer textarea:focus{outline:none;border-color:var(--color-primary,#c2652a);box-shadow:0 0 0 3px rgba(194,101,42,.15)}
.chat-composer__send-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 20px;border:none;border-radius:16px;background:var(--color-primary,#c2652a);color:#fff;font-weight:700;font-size:15px;cursor:pointer;flex-shrink:0;transition:transform .15s,background-color .15s,box-shadow .15s;box-shadow:0 4px 12px rgba(194,101,42,.2)}
.chat-composer__send-btn:hover{background:var(--color-primary-dark,#a85420);transform:translateY(-1px)}
.chat-composer__send-btn:active{transform:translateY(0)}

@media(max-width:600px){
    .chat-page{height:calc(100vh - 80px);padding:10px 10px 16px}
    .chat-header{padding:10px 14px;border-radius:14px}
    .chat-header__title{font-size:16px}
    .chat-header__desc{display:none}
    .chat-stream-card{border-radius:14px}
    .chat-messages{padding:14px}
    .chat-row{max-width:92%}
    .chat-composer{padding:10px 12px}
    .chat-composer__send-btn span{display:none}
    .chat-composer__send-btn{padding:0 14px;min-width:48px}
}