:root {
  color-scheme: light;
  --blue: #2468e8;
  --blue-hover: #1855c7;
  --blue-soft: #edf4ff;
  --ink: #18314e;
  --muted: #73859c;
  --line: #e5edf6;
  --surface: #fff;
  --danger: #b83843;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: var(--ink); font-size: 14px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
button, a, label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
button, input, textarea, select { outline: none; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .file-label:focus-within { outline: 3px solid #8eb7ff; outline-offset: 3px; }
a { color: var(--blue); text-decoration: none; }
svg { width: 20px; height: 20px; vertical-align: middle; }
.hidden, [hidden] { display: none !important; }
.customer-page { background: radial-gradient(ellipse at 10% 0%, #dfeeff 0, transparent 45%), radial-gradient(ellipse at 100% 90%, #e4f6ff 0, transparent 45%), #f2f6fc; padding: 28px 16px; height: 100vh; height: 100dvh; overflow: hidden; }
.chat-shell { display: flex; flex-direction: column; width: 100%; max-width: 760px; height: 100%; min-height: 0; margin: auto; background: var(--surface); border: 1px solid rgba(255, 255, 255, .9); border-radius: 24px; overflow: hidden; box-shadow: 0 20px 70px rgba(33, 76, 130, .1), 0 2px 8px rgba(33, 76, 130, .03); }
.chat-header { display: flex; align-items: center; gap: 13px; padding: 22px 26px 19px; flex-shrink: 0; background: linear-gradient(110deg, #fff, #f6faff); border-bottom: 1px solid var(--line); }
.brand-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #4387ff, #2468e8); box-shadow: 0 5px 14px #2468e829; font-size: 22px; font-weight: 700; }
.brand-icon svg { width: 25px; height: 25px; }
.header-copy { min-width: 0; flex: 1; }
.header-copy h1, .header-copy h2 { font-size: 20px; line-height: 1.35; letter-spacing: .4px; margin: 0 0 4px; font-weight: 700; }
.eyebrow { color: var(--muted); font-size: 10px; letter-spacing: 1.7px; font-weight: 600; text-transform: uppercase; margin: 0 0 3px; }
.status-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 12px; }
.status-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #2fb58a; box-shadow: 0 0 0 3px #2fb58a12; }
.status-dot.offline { background: #a7b5c6; box-shadow: none; }
.channel-tabs { display: flex; align-items: center; gap: 8px; padding: 14px 26px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.channel-tabs button { flex: 1; min-width: 0; padding: 9px 12px; background: #f5f8fc; color: #637992; border: 1px solid transparent; border-radius: 10px; transition: .16s ease; }
.channel-tabs button:hover { color: var(--blue); background: #edf4ff; }
.channel-tabs button.active { color: var(--blue); font-weight: 600; border-color: #cfdefb; background: #edf4ff; }
.chat-intro { margin: 20px 24px 4px; padding: 15px 18px; border: 1px solid #dceaff; border-radius: 13px; background: linear-gradient(110deg, #f0f6ff, #f8fbff); color: #627f9e; font-size: 12px; flex-shrink: 0; }
.chat-intro h2, .chat-intro strong { display: block; color: #315d91; margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.chat-intro p { margin: 0; }
.notice, .connection-banner { padding: 10px 15px; border: 1px solid #dceaff; border-radius: 10px; background: #f1f7ff; color: #426a9b; font-size: 12px; line-height: 1.6; flex-shrink: 0; }
.notice { margin: 12px 24px 0; }
.notice.error { border-color: #f5dadd; background: #fff4f5; color: #ad4450; }
.notice.success { border-color: #cfece1; background: #effaf5; color: #278363; }
.connection-banner { margin: 0; border-radius: 0; border-width: 0 0 1px; text-align: center; background: #fff9eb; color: #99722a; }
.message-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: #fafcff; scrollbar-width: thin; scrollbar-color: #d4dfec transparent; padding: 20px 24px 26px; }
.message-scroll::-webkit-scrollbar { width: 6px; }
.message-scroll::-webkit-scrollbar-thumb { background: #d4dfec; border-radius: 5px; }
.messages { display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.message-row { display: flex; gap: 10px; align-items: flex-start; width: 100%; }
.avatar { width: 33px; height: 33px; flex: 0 0 33px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #e7f0ff; color: var(--blue); font-weight: 700; font-size: 12px; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.message-stack { min-width: 0; max-width: min(79%, 490px); }
.message-meta { font-size: 11px; color: #8c9caf; margin: 0 0 5px; display: flex; gap: 8px; align-items: center; }
.bubble { padding: 11px 15px; background: #fff; border: 1px solid #e5edf6; border-radius: 0 14px 14px 14px; box-shadow: 0 2px 4px #18314e03; color: #2a415d; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.75; }
.bubble a { text-decoration: underline; }
.message-time { display: block; font-size: 10px; color: #91a0b2; margin-top: 5px; }
.message-row.mine { flex-direction: row-reverse; }
.message-row.mine .avatar { background: #f0f2f6; color: #8391a4; }
.message-row.mine .message-meta { justify-content: flex-end; }
.message-row.mine .bubble { color: #fff; background: #2d70eb; border-color: #2d70eb; border-radius: 14px 0 14px 14px; box-shadow: 0 4px 10px #2468e812; }
.message-row.mine .bubble a { color: #fff; }
.message-row.mine .message-time { text-align: right; }
.message-row.system { justify-content: center; font-size: 11px; color: #8d9caf; }
.message-row.system .bubble { background: #eef3f9; border: 0; box-shadow: none; border-radius: 100px; padding: 5px 13px; font-size: 11px; color: #8697ac; text-align: center; }
.image-button { display: block; padding: 0; margin: 0; border: 0; border-radius: 9px; background: transparent; max-width: 100%; line-height: 0; overflow: hidden; cursor: zoom-in; }
.image-message { display: block; max-width: min(100%, 240px); max-height: 240px; width: auto; height: auto; border-radius: 9px; cursor: zoom-in; object-fit: contain; }
.message-row.system .avatar, .message-row.system .message-meta { display: none; }
.message-row.system .message-stack { max-width: 95%; }
.message-row.system .message-time { text-align: center; }
.pending-label { display: block; color: #96a3b3; text-align: right; font-size: 10px; margin-top: 4px; }
.load-earlier { display: block; padding: 6px 14px; border: 1px solid var(--line); background: #fff; color: #7f93aa; border-radius: 100px; margin: 0 auto 20px; font-size: 11px; }
.load-earlier:hover { color: var(--blue); border-color: #c5d9fd; }
.composer { background: #fff; padding: 12px 24px 14px; border-top: 1px solid var(--line); flex-shrink: 0; }
.composer-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 30px; }
.icon-button, .file-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; min-height: 32px; padding: 5px 8px; border: none; border-radius: 8px; background: transparent; color: #7388a0; cursor: pointer; font-size: 12px; }
.icon-button:hover, .file-label:hover { background: #f0f5fc; color: var(--blue); }
.file-label input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.composer-input { display: block; resize: none; border: 1px solid #e4ecf6; border-radius: 11px; color: var(--ink); width: 100%; min-height: 74px; max-height: 130px; padding: 11px 13px; background: #f8fafd; line-height: 1.6; transition: border-color .15s; }
.composer-input:focus { border-color: #9dbdf4; background: #fff; }
.composer-input::placeholder { color: #a1afbf; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: #9aa8b8; font-size: 11px; }
.send-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--blue); border-radius: 9px; background: var(--blue); color: #fff; padding: 9px 22px; font-weight: 600; line-height: 1.5; white-space: nowrap; transition: background .15s; }
.send-button:hover:not(:disabled), .primary-button:hover:not(:disabled) { background: var(--blue-hover); border-color: var(--blue-hover); }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border: 1px solid #dce5f0; border-radius: 9px; color: #647b95; background: #fff; line-height: 1.5; }
.secondary-button:hover { background: #f4f8ff; border-color: #bcd1ef; }
.attachment-preview { display: flex; align-items: center; gap: 10px; padding: 9px; margin-bottom: 9px; background: #f4f8fe; border: 1px dashed #c8d9ef; border-radius: 10px; color: #71859c; font-size: 12px; }
.attachment-preview img { width: 54px; height: 54px; border-radius: 7px; object-fit: cover; background: #fff; }
.attachment-preview span { min-width: 0; overflow-wrap: anywhere; flex: 1; }
.attachment-preview button { margin-left: auto; }
.empty-state { margin: auto; padding: 38px 24px; text-align: center; color: #93a4b8; font-size: 13px; }
.empty-state h2, .empty-state h3 { color: #4c6989; font-size: 17px; font-weight: 600; margin: 14px 0 8px; }
.empty-state p { margin: 6px 0; }
.empty-state .brand-icon { margin: 0 auto 15px; }
.empty-state strong { display: block; color: #617e9d; font-weight: 500; }
.empty-state svg { width: 42px; height: 42px; color: #a1bee7; }
.login-panel { margin: auto; max-width: 400px; padding: 42px 28px; text-align: center; }
.login-panel h2 { margin: 18px 0 10px; font-size: 21px; color: #2a486b; }
.login-panel p { color: var(--muted); font-size: 13px; margin: 0 0 24px; }
.login-panel .brand-icon { margin: auto; width: 60px; height: 60px; border-radius: 20px; }
.modal { position: fixed; inset: 0; z-index: 100; background: #172d4c70; backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-card { width: 100%; max-width: 420px; max-height: 90vh; max-height: 90dvh; overflow: auto; background: #fff; border-radius: 20px; padding: 25px; box-shadow: 0 18px 70px #15264140; }
.modal-card h2, .modal-card h3 { margin: 0 0 12px; font-size: 18px; color: #264466; }
.modal-card p { color: var(--muted); }
.modal-card img { display: block; max-width: 100%; max-height: 75vh; margin: auto; object-fit: contain; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.chat-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 76px 20px 24px; background: #0d1b30ed; backdrop-filter: blur(7px); }
.chat-lightbox > img { display: block; width: auto; height: auto; max-width: 90vw; max-height: min(85vh, calc(100vh - 110px)); max-height: min(85dvh, calc(100dvh - 110px)); border-radius: 8px; object-fit: contain; box-shadow: 0 8px 45px #0005; }
.chat-lightbox > button { position: absolute; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); min-height: 40px; padding: 9px 17px; border: 1px solid #ffffff73; border-radius: 9px; background: #ffffff20; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.5; }
.chat-lightbox > button:hover { background: #ffffff38; border-color: #fff; }
#newMessages { align-self: center; flex-shrink: 0; font-size: 11px; padding: 7px 16px; margin: 7px 0; background: #edf4ff; color: var(--blue); border-color: #d7e5fc; border-radius: 100px; }
@media (max-width: 600px) {
  .customer-page { padding: 0; background: #fff; }
  .chat-shell { border: 0; border-radius: 0; box-shadow: none; }
  .chat-header { padding: max(16px, env(safe-area-inset-top)) 17px 15px; gap: 11px; }
  .header-copy h1, .header-copy h2 { font-size: 18px; }
  .brand-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
  .channel-tabs { padding: 12px 16px; gap: 6px; }
  .channel-tabs button { font-size: 12px; padding: 8px 4px; }
  .chat-intro { margin: 14px 16px 0; padding: 12px 14px; }
  .notice { margin: 10px 16px 0; }
  .message-scroll { padding: 18px 14px 22px; }
  .messages { gap: 19px; }
  .message-row { gap: 8px; }
  .message-stack { max-width: 81%; }
  .avatar { width: 30px; height: 30px; flex-basis: 30px; border-radius: 10px; font-size: 11px; }
  .bubble { padding: 9px 12px; font-size: 14px; }
  .image-message { max-height: 240px; }
  .composer { padding: 9px 15px max(11px, env(safe-area-inset-bottom)); }
  .composer-input { min-height: 64px; max-height: 110px; font-size: 16px; }
  .composer-footer { font-size: 10px; margin-top: 8px; }
  .send-button { padding: 8px 20px; font-size: 13px; }
}
@media (max-height: 600px) {
  .customer-page { padding-top: 0; padding-bottom: 0; }
  .chat-shell { border-radius: 0; }
  .chat-header { padding-top: 10px; padding-bottom: 10px; }
  .chat-intro { margin-top: 9px; padding-top: 8px; padding-bottom: 8px; }
  .composer-input { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Delivery status and recall are shared by the customer page and the workbench. */
.message-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; min-height: 16px; color: #91a0b2; font-size: 10px; }
.message-footer .message-time { margin-top: 0; }
.message-row.mine .message-footer { justify-content: flex-end; }
.message-receipt { color: #8b96a4; white-space: nowrap; }
.message-receipt.is-read { color: #24826c; }
.message-recall { border: 0; padding: 1px 3px; background: transparent; color: #7e8ea3; font-size: 10px; line-height: 1.6; }
.message-recall:hover:not(:disabled) { color: var(--blue); text-decoration: underline; }
.message-row.recalled .bubble, .message-row.mine.recalled .bubble { background: #f0f3f7; border-color: transparent; box-shadow: none; color: #8b98a8; font-size: 12px; }
.message-row.system .message-footer { justify-content: center; }