:root {
  color-scheme: light;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  color: #272431;
  background: #eceaf1;
  font-synthesis: none;
  --ink: #272431;
  --muted: #777382;
  --line: #ddd9e5;
  --panel: #ffffff;
  --canvas: #f1eff5;
  --nav: #191724;
  --nav-soft: #292536;
  --accent: #7652d6;
  --accent-strong: #6440c5;
  --accent-soft: #eee9fb;
  --accent-border: #cfc2ef;
  --green: #168b62;
  --green-strong: #0e704e;
  --green-soft: #e2f3eb;
  --blue: #347497;
  --blue-soft: #e5f1f7;
  --red: #c94f49;
  --amber: #c18128;
  --sidebar: #f7f6fa;
  --conversation-list: #efedf5;
  --timeline: #f1eff6;
  --composer-surface: #f8f7fa;
  --incoming: #eaf4f7;
  --outgoing: #7652d6;
  --shadow-sm: 0 2px 8px #211b340d;
  --shadow-md: 0 10px 28px #211b3417;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; min-width: 320px; overflow: hidden; background: #eceaf1; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #a995e4;
  outline-offset: 1px;
}

.icon-sprite { position: fixed; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ui-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { display: grid; grid-template-rows: 66px minmax(0, 1fr); height: 100dvh; }
.appbar {
  z-index: 3;
  display: grid;
  grid-template-columns: 326px minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  color: #f7f9fa;
  background: var(--nav);
  border-bottom: 1px solid #302b40;
  box-shadow: 0 3px 14px #100d192e;
}
.brand { display: flex; align-items: center; gap: 12px; height: 100%; padding: 0 18px; border-right: 1px solid #332e43; min-width: 0; }
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid #987ae8;
  border-radius: 8px;
  color: #ffffff;
  background: var(--accent);
  box-shadow: inset 0 0 0 3px #ffffff12, 0 5px 16px #7652d647;
  font-size: 16px;
  font-weight: 800;
}
.brand-mark::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border: 2px solid var(--nav); border-radius: 50%; background: #48d698; box-shadow: 0 0 0 3px #48d69812; }
.brand > div { display: grid; min-width: 0; }
.brand strong { overflow: hidden; font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.brand span { margin-top: 2px; color: #aaa5b7; font-size: 11px; line-height: 1.35; }
.appbar-context { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 20px; }
.appbar-context::before { content: ""; width: 3px; height: 18px; border-radius: 2px; background: #9a75ef; }
.appbar-context strong { font-size: 15px; }
.appbar-context span { color: #9994a7; font-size: 11px; }
.appbar-actions { display: flex; align-items: center; gap: 8px; padding-right: 14px; }
.trial-session { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 4px 0 10px; border: 1px solid #55467a; border-radius: 7px; color: #d9cff4; background: #2b2540; font-size: 10px; white-space: nowrap; }
.trial-logout { width: 27px; height: 27px; color: #cfc5eb; }
.trial-logout .ui-icon { width: 15px; height: 15px; }
.trial-logout:hover { color: #ffffff; background: #ffffff12; }
body.trial-mode #trial-access-section { display: none; }
.connection { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; margin-right: 4px; padding: 0 12px; border: 1px solid #3c374b; border-radius: 7px; color: #cbc7d4; background: #242130; box-shadow: inset 0 1px 0 #ffffff08; font-size: 11px; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #d49239; box-shadow: 0 0 0 3px #d4923921; }
.connection.online .status-dot { background: #45d596; box-shadow: 0 0 0 4px #45d5961f; animation: status-pulse 2.4s ease-in-out infinite; }
.connection.warning { color: #e1bd8a; border-color: #554936; background: #2b2924; }
.connection.error .status-dot { background: #ed6c62; box-shadow: 0 0 0 3px #ed6c6221; }
.icon-button, .settings-button, .customer-note-button, .tool-button, .filter-button, .send-button, .primary-button, .secondary-button { border: 0; cursor: pointer; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 7px; color: inherit; background: transparent; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .12s ease; }
.appbar-icon { color: #c5ced1; }
.appbar-icon { border: 1px solid transparent; }
.appbar-icon:hover { color: #ffffff; border-color: #4b435f; background: #2b2739; }
.appbar-icon:hover .ui-icon { transform: rotate(40deg); }
.appbar-icon .ui-icon { transition: transform .22s ease; }
.settings-button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 1px solid #8c6cdb; border-radius: 7px; color: #ffffff; background: var(--accent); box-shadow: inset 0 1px 0 #ffffff17, 0 4px 12px #0c091724; font-size: 12px; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease; }
.settings-button:hover { border-color: #a68deb; background: var(--accent-strong); box-shadow: 0 5px 14px #0c091735; }
.settings-button:active, .icon-button:active, .tool-button:active, .send-button:active, .primary-button:active, .secondary-button:active { transform: translateY(1px); }

.chat-workspace { display: grid; grid-template-columns: 326px minmax(0, 1fr); min-height: 0; background: var(--timeline); }
.conversation-sidebar { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); min-width: 0; background: var(--sidebar); border-right: 1px solid #d7d2df; box-shadow: 4px 0 16px #211b340d; }
.sidebar-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 82px; padding: 16px 16px 12px; }
.sidebar-heading > div { display: grid; gap: 3px; min-width: 0; }
.sidebar-eyebrow { color: #75689b; font-size: 9px; font-weight: 800; letter-spacing: 0; }
.sidebar-heading h1 { margin: 0; color: #282433; font-size: 20px; letter-spacing: 0; }
.inbox-count { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--accent-border); border-radius: 6px; color: #6545bd; background: var(--accent-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }
.service-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 14px 13px; }
.service-stat { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; min-height: 58px; padding: 8px 10px; border: 1px solid #e1dde8; border-radius: 7px; background: #ffffff; box-shadow: 0 2px 7px #211b3408; }
.stat-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; }
.stat-icon .ui-icon { width: 17px; height: 17px; }
.stat-icon-history { color: #346f8d; background: #e3f0f6; }
.stat-icon-today { color: #a86717; background: #fff0d9; }
.stat-content { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 4px; min-width: 0; }
.stat-content > span { grid-column: 1 / -1; margin-bottom: 3px; color: #758187; font-size: 9px; white-space: nowrap; }
.stat-content strong { color: #1b282d; font-size: 18px; line-height: 1.1; }
.stat-content em { color: #8b969b; font-size: 9px; font-style: normal; }
.search-field { display: flex; align-items: center; gap: 8px; height: 40px; margin: 0 14px 11px; padding: 0 11px; border: 1px solid #ddd8e5; border-radius: 7px; color: #918c9b; background: #ffffff; box-shadow: var(--shadow-sm); transition: border-color .16s ease, box-shadow .16s ease; }
.search-field:focus-within { border-color: #a68ee2; box-shadow: 0 0 0 3px #7652d616, var(--shadow-sm); }
.search-field .ui-icon { width: 16px; height: 16px; }
.search-field input { min-width: 0; width: 100%; border: 0; outline: 0; color: #263035; background: transparent; font-size: 12px; }
.search-field input::placeholder { color: #9aa4a8; }
.conversation-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 14px 12px; padding: 4px; border-radius: 7px; background: #ebe8f0; }
.filter-button { min-height: 31px; border-radius: 5px; color: #6e797e; background: transparent; font-size: 11px; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.filter-button:hover { color: #6545bd; }
.filter-button.active { color: #6545bd; background: #ffffff; box-shadow: 0 2px 7px #211b3412; font-weight: 700; }
.conversation-list { min-height: 0; overflow-y: auto; padding: 8px; border-top: 1px solid #d9d4e1; background: var(--conversation-list); scrollbar-width: thin; }
.conversation-empty { padding: 38px 24px; color: #899499; font-size: 12px; line-height: 1.7; text-align: center; }
.conversation-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 11px; width: 100%; min-height: 82px; margin-bottom: 7px; padding: 12px 12px; border: 1px solid #ded9e6; border-radius: 7px; color: #302c3a; background: #fbfafd; box-shadow: 0 2px 7px #211b3408; cursor: pointer; text-align: left; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.conversation-row:hover { border-color: #cbbfea; background: #f7f4fd; box-shadow: inset 3px 0 0 #a995e4, 0 3px 10px #211b340d; }
.conversation-row.selected { border-color: var(--accent-border); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent), 0 4px 12px #7652d61a; }
.conversation-avatar, .chat-avatar, .message-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #6545bd; background: #ebe6f8; font-weight: 700; overflow: hidden; }
.conversation-avatar img, .chat-avatar img, .message-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.conversation-avatar { position: relative; width: 44px; height: 44px; border: 1px solid #d6caef; font-size: 15px; box-shadow: 0 3px 9px #7652d612; }
.conversation-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border: 2px solid #fbfdfe; border-radius: 50%; background: #3fc788; }
.conversation-row.selected .conversation-avatar::after { border-color: var(--accent-soft); }
.conversation-body { display: grid; gap: 7px; min-width: 0; align-self: center; }
.conversation-heading { display: flex; align-items: center; gap: 7px; min-width: 0; }
.conversation-name { flex: 0 1 auto; overflow: hidden; color: #202a2f; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-preview { display: block; overflow: hidden; color: #7e898e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row.search-result { border-color: #d7c48f; }
.conversation-row.search-result:hover { border-color: #c8aa59; }
.search-mark { padding: 0 2px; border-radius: 3px; color: #66430d; background: #ffe3a0; font-weight: 700; }
.conversation-meta { display: grid; justify-items: end; align-content: center; gap: 9px; }
.conversation-time { color: #929ca0; font-size: 10px; white-space: nowrap; }
.unread-badge { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; color: #ffffff; background: #d95850; font-size: 9px; font-weight: 700; }

.chat-panel { display: grid; grid-template-rows: 72px minmax(0, 1fr) auto; min-width: 0; min-height: 0; background: var(--timeline); }
.chat-header { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 0 20px; background: #faf9fc; border-bottom: 1px solid #d7d2df; box-shadow: 0 3px 12px #211b3410; }
.chat-avatar { width: 40px; height: 40px; border: 1px solid #d6caef; font-size: 14px; box-shadow: 0 3px 10px #7652d614; }
.chat-person { display: grid; gap: 4px; min-width: 0; }
.chat-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-person strong { overflow: hidden; color: #20292e; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.chat-person > span { overflow: hidden; color: #879297; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.chat-online { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 5px 9px; border: 1px solid #d4eadd; border-radius: 6px; color: #247353; background: #f0faf5; font-size: 10px; font-weight: 700; white-space: nowrap; }
.chat-online i { width: 6px; height: 6px; border-radius: 50%; background: #38be80; box-shadow: 0 0 0 3px #38be801c; }
.customer-note-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; min-width: 66px; height: 34px; padding: 0 10px; border: 1px solid #d2c7eb; border-radius: 7px; color: #6445b9; background: #f3effc; font-size: 11px; font-weight: 700; transition: border-color .15s ease, background .15s ease, transform .12s ease; }
.customer-note-button:hover { border-color: #af9adc; background: #eae3fa; }
.customer-note-button:disabled { cursor: default; opacity: .42; }
.customer-note-button .ui-icon { width: 15px; height: 15px; }
.empty-chat { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 0; color: #6d7d84; background: var(--timeline); }
.empty-chat-mark { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 4px; border: 1px solid #d9d0ee; border-radius: 8px; color: var(--accent); background: var(--accent-soft); }
.empty-chat-mark .ui-icon { width: 24px; height: 24px; }
.empty-chat strong { color: #4a565b; font-size: 14px; }
.empty-chat p { margin: 0; color: #909a9e; font-size: 11px; }
.chat-timeline { min-height: 0; overflow-y: auto; padding: 24px 30px 30px; background: var(--timeline); scrollbar-width: thin; }
.timeline-day { display: flex; justify-content: center; max-width: 1060px; margin: 5px auto 20px; }
.timeline-day span { padding: 4px 9px; border: 1px solid #dcd7e3; border-radius: 6px; color: #817c89; background: #faf9fc; box-shadow: 0 1px 4px #211b3408; font-size: 9px; }
.message-row { display: flex; align-items: flex-start; gap: 9px; max-width: 1060px; margin: 0 auto 17px; }
.message-row.outbound { flex-direction: row-reverse; }
.message-avatar { width: 34px; height: 34px; border: 1px solid #bfd2da; color: #44616e; background: #eaf3f7; font-size: 11px; box-shadow: 0 2px 6px #17212612; }
.message-row.outbound .message-avatar { color: #ffffff; background: #5f44b0; border-color: #8065c8; }
.message-stack { display: grid; gap: 5px; max-width: min(68%, 640px); }
.message-row.outbound .message-stack { justify-items: end; }
.message-row.search-hit .bubble, .message-row.search-hit .message-image, .message-row.search-hit .file-bubble { outline: 3px solid #e2a62d; outline-offset: 3px; box-shadow: 0 0 0 7px #f1ba4b1f, 0 7px 20px #7f581d24; }
.system-message.search-hit span { outline: 3px solid #e2a62d; outline-offset: 3px; background: #fff0c8; color: #63430f; }
.bubble { position: relative; min-width: 38px; padding: 9px 12px; border: 1px solid #c8dce3; border-radius: 8px; color: #27383e; background: var(--incoming); box-shadow: 0 4px 12px #28434d14; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-row.outbound .bubble { border-color: #7652d6; color: #ffffff; background: var(--outgoing); box-shadow: 0 4px 12px #7652d624; }
.message-row.failed .bubble { border-color: #efb8b3; color: #7d332e; background: #ffe5e2; }
.message-time { color: #98a1a5; font-size: 9px; }
.message-row.outbound .message-time { text-align: right; }
.delivery-state { max-width: 320px; font-size: 9px; line-height: 1.45; text-align: right; }
.delivery-state.submitted { color: var(--amber); }
.delivery-state.failed { color: var(--red); }
.message-image { display: block; width: min(280px, 46vw); max-height: 360px; border: 1px solid #dce3e5; border-radius: 7px; object-fit: contain; background: #ffffff; }
.file-bubble { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 11px; align-items: center; width: min(300px, 48vw); text-decoration: none; }
.file-icon { display: grid; place-items: center; width: 40px; height: 46px; border: 1px solid #d5dde0; border-radius: 5px; color: #5a6b73; background: #f8fafb; font-size: 9px; font-weight: 700; }
.file-bubble strong, .file-bubble span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-bubble strong { color: #283338; font-size: 11px; }
.file-bubble span { margin-top: 4px; color: #7d898e; font-size: 9px; }
.voice-bubble { display: flex; align-items: center; justify-content: space-between; gap: 13px; width: clamp(110px, 18vw, 220px); min-height: 41px; cursor: pointer; }
.voice-wave { display: inline-flex; align-items: center; gap: 2px; height: 20px; }
.voice-wave i { display: block; width: 2px; border-radius: 2px; background: currentColor; opacity: .72; }
.voice-wave i:nth-child(1) { height: 6px; }
.voice-wave i:nth-child(2) { height: 12px; }
.voice-wave i:nth-child(3) { height: 18px; }
.voice-duration { font-size: 11px; font-style: normal; white-space: nowrap; }
.system-message { display: flex; justify-content: center; max-width: 1060px; margin: 2px auto 16px; }
.system-message span { max-width: min(80%, 650px); padding: 5px 10px; border: 1px solid #c8d8de; border-radius: 6px; color: #66777e; background: #dbe7eb; font-size: 9px; line-height: 1.45; text-align: center; }

.composer { padding: 11px 20px 13px; background: var(--composer-surface); border-top: 1px solid #d5d0dc; box-shadow: 0 -7px 20px #211b3410; }
.attachment-tray { display: flex; gap: 7px; overflow-x: auto; max-width: 1060px; margin: 0 auto; padding: 0 0 8px; }
.composer-tools { display: flex; align-items: center; gap: 4px; max-width: 1060px; height: 34px; margin: 0 auto; }
.emoji-picker-wrap { position: relative; display: inline-flex; }
.tool-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 6px; color: #5c6a70; background: transparent; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease; }
.image-tool { color: #347497; }
.file-tool { color: #8a662f; }
.emoji-tool { color: #a45d79; }
.tool-button:hover { border-color: #d8cef0; color: #6545bd; background: var(--accent-soft); }
.tool-button.active { border-color: #d0c1ef; color: #6545bd; background: var(--accent-soft); }
.tool-button .ui-icon { width: 18px; height: 18px; }
.emoji-picker { position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: 288px; padding: 9px; border: 1px solid #d6cdea; border-radius: 9px; background: #ffffff; box-shadow: 0 12px 28px #211b3424, 0 2px 7px #211b3410; }
.emoji-choice { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; cursor: pointer; font-size: 19px; line-height: 1; transition: background .12s ease, border-color .12s ease, transform .12s ease; }
.emoji-choice:hover { border-color: #d8cef0; background: var(--accent-soft); transform: scale(1.08); }
.composer-hint { margin-left: 4px; color: #98a2a6; font-size: 10px; }
.composer textarea { display: block; width: 100%; max-width: 1060px; height: 70px; min-height: 70px; max-height: 150px; margin: 2px auto 8px; padding: 10px 11px; border: 1px solid #d2ccda; border-radius: 8px; outline: 0; resize: none; color: #302c39; background: #ffffff; box-shadow: inset 0 1px 2px #211b3408, 0 2px 7px #211b340a; font-size: 13px; line-height: 1.6; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.composer textarea:focus { border-color: #9e84df; background: #ffffff; box-shadow: 0 0 0 3px #7652d616; }
.composer textarea::placeholder { color: #a0aaae; }
.composer-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; max-width: 1060px; margin: 0 auto; }
.composer-footer > span { color: #98a2a6; font-size: 9px; }
.send-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 88px; height: 37px; border-radius: 7px; color: #ffffff; background: var(--accent); box-shadow: 0 5px 14px #7652d62b; font-size: 12px; font-weight: 700; transition: background .15s ease, box-shadow .15s ease, transform .12s ease; }
.send-button .ui-icon { width: 14px; height: 14px; }
.send-button:hover { background: var(--accent-strong); box-shadow: 0 6px 17px #5a35bd2e; }
.send-button:disabled { cursor: wait; opacity: .55; }
.attachment-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; min-height: 32px; padding: 4px 7px; border: 1px solid #d9e1e3; border-radius: 5px; color: #5c686e; background: #f4f7f8; font-size: 10px; }
.attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-chip button { flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border: 0; color: #768287; background: transparent; cursor: pointer; font-size: 15px; }

.drawer-backdrop { position: fixed; inset: 0; z-index: 10; background: #0b151aad; backdrop-filter: blur(2px); }
.settings-drawer, .customer-drawer { position: fixed; z-index: 11; top: 0; right: 0; height: 100dvh; background: #f5f3f8; box-shadow: -18px 0 48px #0e0b1640; transform: translateX(100%); transition: transform .22s ease; }
.settings-drawer { width: min(580px, 100vw); }
.customer-drawer { width: min(440px, 100vw); }
.settings-drawer.open, .customer-drawer.open { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 22px; color: #f7f9fa; background: var(--nav); border-bottom: 1px solid #332e43; }
.drawer-header h2 { margin: 0; font-size: 17px; }
.drawer-header p { margin: 4px 0 0; color: #9eacb1; font-size: 10px; }
.drawer-header .icon-button:hover { background: #ffffff12; }
.drawer-content { height: calc(100dvh - 72px); overflow-y: auto; }
.customer-drawer-content { height: calc(100dvh - 72px); overflow-y: auto; background: #ffffff; }
.customer-profile-summary { display: flex; align-items: center; gap: 13px; padding: 22px; border-bottom: 1px solid #e3dfe8; background: #f7f4fd; }
.customer-profile-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border: 1px solid #d6caef; border-radius: 8px; color: #6545bd; background: #ebe6f8; font-size: 16px; font-weight: 700; overflow: hidden; }
.customer-profile-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.customer-profile-summary > div { display: grid; gap: 5px; min-width: 0; }
.customer-profile-summary strong, .customer-profile-summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-profile-summary strong { color: #292532; font-size: 14px; }
.customer-profile-summary span { color: #817b89; font-size: 10px; }
.customer-note-form { padding: 24px 22px; }
.settings-form input { height: 38px; padding: 0 9px; }
.customer-note-form textarea { min-height: 170px; }
.customer-note-updated { color: #918b99; font-size: 10px; }
.customer-note-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.customer-note-actions .primary-button { min-width: 108px; }
.settings-section { padding: 23px 22px; border-bottom: 1px solid #e0dce6; background: #ffffff; }
.settings-section + .settings-section { margin-top: 8px; border-top: 1px solid #e0dce6; }
.settings-description { margin: -4px 0 16px; color: #6e777c; font-size: 11px; line-height: 1.65; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.section-heading span { color: #7f8a8f; font-size: 10px; }
.section-heading h3 { position: relative; margin: 4px 0 0; padding-left: 10px; color: #263035; font-size: 15px; }
.section-heading h3::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--accent); }
.scope-badge { padding: 4px 7px; border: 1px solid #b5dac9; border-radius: 4px; color: #1d7551 !important; background: #edf8f3; }
.entry-layout { display: grid; grid-template-columns: 156px minmax(0, 1fr); gap: 17px; align-items: start; }
.entry-layout img { display: block; width: 156px; height: 156px; padding: 7px; border: 1px solid #d5e0e2; border-radius: 8px; background: #ffffff; box-shadow: var(--shadow-sm); image-rendering: pixelated; }
.entry-layout p { min-height: 34px; margin: 0 0 9px; color: #606d72; font-size: 11px; line-height: 1.5; }
.entry-layout input, .settings-form input, .settings-form textarea, .settings-form select { width: 100%; border: 1px solid #cfdadd; border-radius: 7px; color: #283237; background: #ffffff; outline: 0; transition: border-color .16s ease, box-shadow .16s ease; }
.entry-layout input:focus, .settings-form input:focus, .settings-form textarea:focus, .settings-form select:focus { border-color: #9e84df; box-shadow: 0 0 0 3px #7652d61f; }
.entry-layout input { height: 36px; padding: 0 9px; font-size: 10px; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.avatar-editor { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 16px; align-items: center; }
.service-avatar-preview { display: grid; place-items: center; width: 78px; height: 78px; overflow: hidden; border: 1px solid #b9dce1; border-radius: 50%; color: #147b9c; background: #e7f5f7; box-shadow: 0 8px 18px rgba(20, 123, 156, .14); font-size: 22px; font-weight: 800; }
.service-avatar-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-editor-copy { min-width: 0; }
.avatar-editor-copy p { margin: 0 0 10px; color: #607079; font-size: 11px; line-height: 1.6; }
.avatar-picker { display: grid; gap: 6px; color: #4f5d63; font-size: 11px; font-weight: 700; }
.avatar-picker input { width: 100%; min-height: 36px; color: #66747a; font-size: 10px; }
.avatar-actions { margin-top: 10px; }
.avatar-actions .primary-button, .avatar-actions .secondary-button { min-height: 34px; }
.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border-radius: 7px; text-decoration: none; font-size: 11px; font-weight: 700; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.primary-button { color: #ffffff; background: var(--accent); box-shadow: 0 4px 12px #7652d624; }
.primary-button:hover { background: var(--accent-strong); }
.secondary-button { border: 1px solid #cbd7da; color: #48585f; background: #ffffff; box-shadow: 0 1px 3px #17212608; }
.secondary-button:hover { border-color: #b7a7df; color: #5d42ad; background: #f7f4fd; }
.settings-form { display: grid; gap: 13px; }
.settings-form label { display: grid; gap: 6px; color: #4f5d63; font-size: 11px; font-weight: 700; }
.settings-form select { height: 38px; padding: 0 9px; }
.settings-form textarea { min-height: 96px; padding: 9px; resize: vertical; line-height: 1.5; }
.settings-form .primary-button { justify-self: end; min-width: 132px; }
.trial-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.trial-form-actions .primary-button { min-width: 132px; }
.upload-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-top: 17px; }
.upload-picker { display: grid; gap: 6px; color: #4f5d63; font-size: 11px; font-weight: 700; }
.upload-picker input { width: 100%; min-height: 36px; color: #66747a; font-size: 10px; }
.media-list { display: grid; gap: 8px; margin-top: 13px; }
.media-empty { padding: 12px; border: 1px dashed #cbd5d8; border-radius: 5px; color: #859095; font-size: 10px; text-align: center; }
.media-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border: 1px solid #dce3e5; border-radius: 6px; background: #ffffff; }
.media-row img { width: 52px; height: 52px; border-radius: 5px; object-fit: cover; }
.media-info { min-width: 0; }
.media-info strong { display: block; overflow: hidden; color: #283237; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.media-info span { display: block; margin-top: 4px; color: #859095; font-size: 9px; }
.danger-button { min-height: 30px; padding: 0 8px; border: 1px solid #ecc6c2; border-radius: 4px; color: #a63f39; background: #fff3f2; cursor: pointer; font: inherit; font-size: 10px; }
.runtime-status { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 15px; border: 1px solid #d8e2e4; border-left: 4px solid #cf913e; border-radius: 7px; background: #ffffff; box-shadow: var(--shadow-sm); }
.runtime-status.online { border-left-color: #25a870; background: #fbfefd; }
.runtime-status.error { border-left-color: #d25951; background: #fffdfd; }
.runtime-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #d18c32; box-shadow: 0 0 0 4px #d18c321c; }
.runtime-status.online .runtime-dot { background: #34bd79; box-shadow: 0 0 0 4px #34bd791c; }
.runtime-status.error .runtime-dot { background: #de584e; box-shadow: 0 0 0 4px #de584e1c; }
.runtime-status div { display: grid; gap: 4px; min-width: 0; }
.runtime-status strong { color: #303a3f; font-size: 12px; }
.runtime-status div span { color: #7c888d; font-size: 10px; }
.trial-scope.online { border-color: #abd9c4; color: #13724e !important; background: #eaf7f1; }
.trial-scope.expired, .trial-scope.error { border-color: #edc0bc; color: #a9413a !important; background: #fff1f0; }
.trial-access-panel { display: grid; gap: 11px; margin-top: 18px; padding-top: 17px; border-top: 1px solid #e6e1eb; }
.trial-access-summary { display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 10px 12px; border: 1px solid #d8e0e2; border-left: 4px solid #c58a38; border-radius: 7px; background: #fbfcfc; }
.trial-access-panel.online .trial-access-summary { border-left-color: #21a36e; background: #f7fcfa; }
.trial-access-panel.error .trial-access-summary { border-left-color: #d25951; background: #fffafa; }
.trial-access-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #d29139; box-shadow: 0 0 0 4px #d291391c; }
.trial-access-panel.online .trial-access-dot { background: #2fba7d; box-shadow: 0 0 0 4px #2fba7d1c; }
.trial-access-panel.error .trial-access-dot { background: #dc5b53; box-shadow: 0 0 0 4px #dc5b531c; }
.trial-access-summary > div { display: grid; gap: 3px; min-width: 0; }
.trial-access-summary strong { color: #30383c; font-size: 12px; }
.trial-access-summary span { color: #7b858a; font-size: 10px; line-height: 1.45; }
.trial-access-panel > input { width: 100%; height: 36px; padding: 0 9px; border: 1px solid #cfdadd; border-radius: 7px; color: #39464b; background: #ffffff; outline: 0; font-size: 10px; }
.trial-access-panel .primary-button { gap: 7px; }
.trial-access-panel .primary-button .ui-icon { width: 14px; height: 14px; }
.primary-button:disabled, .secondary-button:disabled { cursor: not-allowed; opacity: .48; }
pre { max-height: 170px; overflow: auto; margin: 0; padding: 11px; border: 1px solid #dce3e5; border-radius: 5px; color: #59676d; background: #ffffff; font-family: Consolas, monospace; font-size: 9px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.toast { position: fixed; z-index: 20; right: 20px; bottom: 20px; max-width: min(420px, calc(100vw - 40px)); padding: 11px 13px; border: 1px solid #455159; border-radius: 6px; color: #ffffff; background: #263137; box-shadow: 0 10px 28px #10191d30; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; font-size: 11px; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: #bb5d56; background: #a8443e; }
.mobile-menu, .mobile-close { display: none; }

@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #45d5961c; }
  50% { box-shadow: 0 0 0 6px #45d59608; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation: none !important; }
}

@media (max-width: 900px) {
  .appbar { grid-template-columns: 280px minmax(0, 1fr) auto; }
  .brand { padding: 0 14px; }
  .chat-workspace { grid-template-columns: 300px minmax(0, 1fr); }
  .message-stack { max-width: 76%; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-rows: 60px minmax(0, 1fr); }
  .appbar { grid-template-columns: minmax(0, 1fr) auto; }
  .brand { border-right: 0; }
  .appbar-context, .connection { display: none; }
  .appbar-actions { padding-right: 10px; }
  .trial-session > span { display: none; }
  .trial-session { padding-left: 4px; }
  .settings-button { width: 36px; padding: 0; justify-content: center; }
  .settings-button span { display: none; }
  .chat-workspace { grid-template-columns: 1fr; position: relative; }
  .conversation-sidebar { position: absolute; z-index: 6; inset: 0 15% 0 0; box-shadow: 14px 0 34px #10191d2b; transform: translateX(-110%); transition: transform .2s ease; }
  .conversation-sidebar.open { transform: translateX(0); }
  .sidebar-heading { padding-right: 58px; }
  .mobile-menu, .mobile-close { display: grid; }
  .mobile-close { position: absolute; right: 9px; top: 18px; color: #59666c; }
  .mobile-menu { margin-left: -8px; color: #526066; }
  .chat-header { padding: 0 12px; }
  .customer-note-button { min-width: 36px; width: 36px; padding: 0; }
  .customer-note-button span { display: none; }
  .chat-timeline { padding: 18px 13px 22px; }
  .message-stack { max-width: 80%; }
  .composer { padding: 8px 12px 11px; }
  .composer textarea { height: 64px; min-height: 64px; }
  .composer-hint { display: none; }
  .entry-layout { grid-template-columns: 118px minmax(0, 1fr); }
  .entry-layout img { width: 118px; height: 118px; }
  .settings-section { padding: 20px 16px; }
}

@media (max-width: 430px) {
  .brand span { display: none; }
  .conversation-sidebar { inset-right: 8%; }
  .chat-online { display: none; }
  .entry-layout { grid-template-columns: 1fr; }
  .entry-layout img { width: 156px; height: 156px; }
  .inline-actions { gap: 5px; }
  .message-image { width: min(230px, 65vw); }
  .file-bubble { width: min(260px, 66vw); }
}

/* Social-inbox details inspired by the reference client view. */
.conversation-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filter-button { min-width: 0; padding: 0 3px; white-space: nowrap; }
.filter-with-count { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.filter-with-count b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; color: #ffffff; background: #d95762; font-size: 9px; }
.conversation-heading { gap: 6px; }
.conversation-availability { flex: 0 0 auto; padding: 2px 5px; border: 1px solid #b7dfc9; border-radius: 4px; color: #087c5c; background: #e8f7f1; font-size: 8px; font-weight: 700; }
.conversation-availability.locked { border-color: #e5c1c5; color: #b84951; background: #fff0f1; }
.chat-technical-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 13px; min-width: 0; margin-left: auto; padding: 7px 12px; border-left: 1px solid #e5dff2; color: #71808a; background: #fbfaff; font-size: 9px; line-height: 1.25; }
.chat-technical-meta span { display: inline-flex; gap: 4px; min-width: 0; white-space: nowrap; }
.chat-technical-meta b { color: #9a7a3c; font-weight: 700; }
.chat-technical-meta strong { overflow: hidden; color: #465660; font-weight: 600; text-overflow: ellipsis; }
.context-details { grid-template-columns: 1fr 1fr; }
.context-contact-info { margin: 0 15px 12px; padding: 12px 0 2px; border-top: 1px solid #eadcc5; }
.context-contact-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.context-contact-heading strong { color: #8e6427; font-size: 12px; }
.context-edit-button { border: 0; color: #a17431; background: transparent; cursor: pointer; font-size: 10px; }
.context-edit-button:hover { color: #6f4814; }
.context-contact-info > div:not(.context-contact-heading) { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 29px; border-bottom: 1px solid #f0e6d5; }
.context-contact-info > div span { color: #9a8c78; font-size: 10px; }
.context-contact-info > div strong { overflow: hidden; color: #4b5860; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.context-blacklist-button { width: calc(100% - 30px); margin: 0 15px 8px; border-color: #e2b6b9; color: #b84951; background: #fff7f7; }
.context-blacklist-button:hover, .context-blacklist-button.active { border-color: #d95762; color: #ffffff; background: #d95762; }
.customer-note-form input[type="tel"], .customer-note-form input[type="email"] { height: 38px; }

@media (max-width: 1180px) {
  .chat-technical-meta { display: none; }
}

@media (max-width: 760px) {
  .conversation-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 客服号独立入口隐藏运行维护与试用管理，保留接待、客户资料、二维码和自动欢迎。 */
.account-mode #trial-access-section,
.account-mode #runtime-heading,
.account-mode #restart-button,
.account-mode #trial-session { display: none !important; }
.account-mode #account-session { display: inline-flex !important; }
.account-mode .settings-drawer .settings-section[aria-labelledby="runtime-heading"] { display: none; }

/* Professional realtime-workbench theme. */
:root {
  --ink: #15202b;
  --muted: #6c7b88;
  --line: #d8e1e8;
  --panel: #ffffff;
  --canvas: #edf2f7;
  --nav: #101820;
  --nav-soft: #192630;
  --accent: #465bd8;
  --accent-strong: #3548bd;
  --accent-soft: #eef0ff;
  --accent-border: #cbd2f7;
  --green: #0c9b73;
  --green-strong: #087c5c;
  --green-soft: #e2f6ef;
  --blue: #147b9c;
  --blue-soft: #e2f3f7;
  --red: #d95358;
  --amber: #cf8123;
  --sidebar: #f7f9fc;
  --conversation-list: #eef2f6;
  --timeline: #f3f6f9;
  --composer-surface: #ffffff;
  --incoming: #ffffff;
  --outgoing: #465bd8;
  --shadow-sm: 0 3px 10px rgba(25, 40, 52, .07);
  --shadow-md: 0 16px 36px rgba(25, 40, 52, .14);
}

body { background: #e8eef3; }
.app-shell { grid-template-rows: 82px minmax(0, 1fr); }
.appbar {
  grid-template-columns: 340px minmax(320px, 1fr) auto;
  background-color: var(--nav);
  border-bottom: 2px solid #2ac7bf;
  box-shadow: 0 7px 24px rgba(8, 16, 23, .24);
}
.brand { gap: 13px; padding: 0 22px; border-right-color: #273640; }
.brand-mark {
  width: 44px;
  height: 44px;
  border-color: #54d9d1;
  border-radius: 8px;
  color: #09252d;
  background: #55d9d1;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .2), 0 7px 20px rgba(35, 202, 194, .22);
}
.brand-mark::after { border-color: var(--nav); background: #f0b14b; }
.brand strong { color: #f7fbfd; font-size: 16px; }
.brand span { color: #8fa4b3; font-size: 11px; }
.appbar-context {
  display: grid;
  grid-template-columns: 130px minmax(150px, 1fr) 130px;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 28px;
}
.appbar-context::before { display: none; }
.service-identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding-left: 13px;
  border-left: 3px solid #f0b14b;
}
.service-identity span { color: #8298a8; font-size: 10px; white-space: nowrap; }
.service-identity strong { overflow: hidden; color: #f0b14b; font-size: 21px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.live-session-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  color: #ffffff;
}
.live-session-title i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #36d3a1;
  box-shadow: 0 0 0 5px rgba(54, 211, 161, .12), 0 0 18px rgba(54, 211, 161, .4);
  animation: status-pulse 2.4s ease-in-out infinite;
}
.live-session-title strong { font-size: 19px; line-height: 1; white-space: nowrap; }
.appbar-actions { gap: 10px; padding-right: 18px; }
.trial-session { height: 38px; border-color: #344650; color: #bdd0da; background: #17232c; }
.connection { min-height: 38px; border-color: #31414b; color: #c6d2d8; background: #17232c; }
.settings-button {
  min-height: 40px;
  padding: 0 15px;
  border-color: #6979e3;
  border-radius: 7px;
  background: #465bd8;
  box-shadow: 0 8px 20px rgba(70, 91, 216, .25);
  font-size: 12px;
}
.settings-button:hover { border-color: #8290e9; background: #3548bd; }
.account-mode #account-session { width: 36px; padding: 0; border: 0; background: transparent; }
.account-mode #account-session > span { display: none; }
.account-mode #account-session .trial-logout { width: 36px; height: 36px; border: 1px solid #31414b; background: #17232c; }

.chat-workspace { grid-template-columns: 340px minmax(0, 1fr); background: var(--timeline); }
.conversation-sidebar { background: var(--sidebar); border-right-color: #d5dfe6; box-shadow: 7px 0 24px rgba(26, 42, 54, .08); }
.sidebar-heading { min-height: 94px; padding: 20px 18px 14px; }
.sidebar-eyebrow { color: #147b9c; font-size: 9px; }
.sidebar-heading h1 { color: #172630; font-size: 22px; }
.inbox-count { padding: 5px 9px; border-color: #cbd2f7; color: #4055c8; background: #eef0ff; }
.service-stats { gap: 10px; margin: 0 16px 15px; }
.service-stat { min-height: 66px; padding: 10px; border-color: #dce5ea; border-radius: 8px; box-shadow: var(--shadow-sm); }
.stat-icon { width: 36px; height: 36px; border-radius: 8px; }
.stat-icon-history { color: #147b9c; background: #e2f3f7; }
.stat-icon-today { color: #bd6f16; background: #fff0dc; }
.stat-content > span { color: #71818d; font-size: 10px; }
.stat-content strong { color: #172630; font-size: 19px; }
.search-field { height: 44px; margin: 0 16px 12px; border-color: #d8e1e8; border-radius: 8px; box-shadow: var(--shadow-sm); }
.search-field:focus-within { border-color: #4fb9c4; box-shadow: 0 0 0 3px rgba(79, 185, 196, .13), var(--shadow-sm); }
.conversation-filters { margin: 0 16px 13px; padding: 4px; background: #e7edf2; }
.filter-button { min-height: 34px; color: #647583; }
.filter-button:hover { color: #4055c8; }
.filter-button.active { color: #4055c8; background: #ffffff; box-shadow: var(--shadow-sm); }
.conversation-list { padding: 10px; border-top-color: #d5dfe6; background: var(--conversation-list); }
.conversation-row {
  min-height: 80px;
  margin-bottom: 8px;
  padding: 12px;
  border-color: #dbe4ea;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(25, 40, 52, .05);
}
.conversation-row:hover { border-color: #a9cfd5; background: #f7fcfd; box-shadow: inset 4px 0 0 #42aeb8, 0 6px 16px rgba(25, 40, 52, .08); }
.conversation-row.selected { border-color: #c8cff5; background: #eef0ff; box-shadow: inset 4px 0 0 #465bd8, 0 7px 18px rgba(70, 91, 216, .12); }
.conversation-avatar, .chat-avatar, .message-avatar { border-radius: 50%; color: #4055c8; background: #e8ebff; }
.conversation-avatar { border-color: #cbd2f7; box-shadow: 0 4px 12px rgba(70, 91, 216, .12); }
.conversation-row.selected .conversation-avatar::after { border-color: #eef0ff; }
.conversation-name { color: #172630; font-size: 14px; }
.conversation-preview { color: #72818d; }
.unread-badge { background: #e45d62; }

.chat-panel { grid-template-rows: 76px minmax(0, 1fr) auto; }
.chat-header { padding: 0 24px; border-bottom-color: #d8e1e8; background: #ffffff; box-shadow: 0 5px 18px rgba(25, 40, 52, .07); }
.chat-avatar { width: 44px; height: 44px; border-color: #cbd2f7; box-shadow: 0 5px 14px rgba(70, 91, 216, .12); }
.chat-person strong { color: #172630; font-size: 15px; }
.chat-person > span { color: #758692; font-size: 11px; }
.chat-online { border-color: #bfe7d8; color: #087c5c; background: #eaf8f3; }
.chat-online.locked { border-color: #e08a8f; color: #9f2f37; background: #fff0f1; }
.chat-online.locked i { background: #d95358; box-shadow: 0 0 0 3px rgba(217, 83, 88, .14); }
.customer-note-button { border-color: #cbd2f7; color: #4055c8; background: #f0f2ff; }
.customer-note-button:hover { border-color: #aeb8ef; background: #e8ebff; }
.empty-chat { color: #70818e; background-color: var(--timeline); }
.empty-chat-mark { border-color: #b9dce1; color: #147b9c; background: #e7f5f7; }
.chat-timeline {
  padding: 28px 34px 34px;
  background-color: var(--timeline);
  background-image: linear-gradient(rgba(76, 112, 132, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 112, 132, .035) 1px, transparent 1px);
  background-size: 34px 34px;
}
.timeline-day span { border-color: #d6e0e6; color: #748490; background: rgba(255, 255, 255, .9); }
.message-row { gap: 11px; margin-bottom: 19px; }
.message-avatar { width: 38px; height: 38px; border-color: #bcd9df; color: #176c82; background: #e3f3f6; }
.message-row.outbound .message-avatar { border-color: #7182e3; color: #ffffff; background: #465bd8; }
.bubble { padding: 10px 13px; border-color: #d7e2e8; border-radius: 8px; color: #25343d; background: #ffffff; box-shadow: 0 6px 16px rgba(25, 40, 52, .08); }
.message-row.outbound .bubble { border-color: #465bd8; background: #465bd8; box-shadow: 0 7px 18px rgba(70, 91, 216, .2); }
.system-message span { border-color: #cddce2; color: #667984; background: #e5edf1; }
.message-image { border-color: #d2dfe5; border-radius: 8px; box-shadow: var(--shadow-sm); }

.composer { padding: 12px 22px 14px; border-top-color: #d6e0e7; background: #ffffff; box-shadow: 0 -8px 26px rgba(25, 40, 52, .07); }
.tool-button { width: 34px; height: 34px; border-radius: 7px; }
.image-tool { color: #147b9c; }
.file-tool { color: #bd711c; }
.video-tool { color: #7057c8; }
.voice-tool { color: #318d78; }
.emoji-tool { color: #c05278; }
.tool-button:hover, .tool-button.active { border-color: #b9dce1; color: #147b9c; background: #e7f5f7; }
.composer textarea { height: 72px; min-height: 72px; border-color: #d5dfe6; background: #f8fafc; box-shadow: inset 0 1px 2px rgba(25, 40, 52, .04); }
.composer textarea:focus { border-color: #4fb9c4; background: #ffffff; box-shadow: 0 0 0 3px rgba(79, 185, 196, .13); }
.composer.locked .composer-tools { height: auto; min-height: 34px; flex-wrap: wrap; row-gap: 7px; }
.composer-hint.locked {
  display: flex;
  flex: 1 1 100%;
  order: 2;
  align-items: center;
  min-height: 38px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #e08a8f;
  border-left: 5px solid #d95358;
  border-radius: 7px;
  color: #9f2f37;
  background: #fff0f1;
  box-shadow: 0 4px 12px rgba(217, 83, 88, .12);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  white-space: normal;
}
.composer-hint.locked::before {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  color: #ffffff;
  background: #d95358;
  content: "!";
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
.composer.locked .composer-footer > span { color: #b33c42; font-weight: 700; }
.composer.locked .send-button { border-color: #e2b2b5; color: #9f2f37; background: #f7dfe1; box-shadow: none; }
.send-button { min-width: 94px; height: 40px; background: #0c9b73; box-shadow: 0 7px 18px rgba(12, 155, 115, .22); }
.send-button:hover { background: #087c5c; box-shadow: 0 8px 20px rgba(12, 155, 115, .27); }
.emoji-picker { border-color: #cfdbe1; border-radius: 8px; box-shadow: var(--shadow-md); }
.emoji-choice:hover { border-color: #b9dce1; background: #e7f5f7; }

.drawer-backdrop { background: rgba(7, 16, 24, .68); backdrop-filter: blur(4px); }
.settings-drawer, .customer-drawer { background: #eef3f6; box-shadow: -24px 0 60px rgba(5, 15, 23, .28); }
.settings-drawer { width: min(620px, 100vw); }
.drawer-header { height: 82px; padding: 0 26px; border-bottom: 2px solid #2ac7bf; background: #101820; }
.drawer-header h2 { font-size: 19px; }
.drawer-header p { color: #8fa4b3; font-size: 11px; }
.drawer-content { height: calc(100dvh - 82px); }
.customer-drawer-content { height: calc(100dvh - 82px); }
.settings-section { padding: 26px; border-bottom-color: #d8e1e8; }
.settings-section + .settings-section { margin-top: 8px; border-top-color: #d8e1e8; }
.section-heading h3 { color: #172630; font-size: 16px; }
.section-heading h3::before { background: #465bd8; }
.scope-badge { border-color: #b7dfd2; color: #087c5c !important; background: #e7f7f1; }
.entry-layout { grid-template-columns: 178px minmax(0, 1fr); gap: 22px; }
.entry-layout img { width: 178px; height: 178px; padding: 9px; border-color: #b9dce1; border-radius: 8px; box-shadow: 0 10px 24px rgba(20, 123, 156, .12); }
.download-qr-button { gap: 7px; }
.download-qr-button .ui-icon { width: 16px; height: 16px; }
.primary-button { background: #465bd8; box-shadow: 0 6px 16px rgba(70, 91, 216, .18); }
.primary-button:hover { background: #3548bd; }
.secondary-button { border-color: #ccd9df; color: #455865; }
.secondary-button:hover { border-color: #9eced5; color: #147b9c; background: #f0fafb; }
.settings-form input, .settings-form textarea, .settings-form select, .entry-layout input { border-color: #ccd9df; }
.settings-form input:focus, .settings-form textarea:focus, .settings-form select:focus, .entry-layout input:focus { border-color: #4fb9c4; box-shadow: 0 0 0 3px rgba(79, 185, 196, .13); }

.account-mode #entry-status,
.account-mode #entry-url,
.account-mode #entry-open,
.account-mode #entry-copy,
.account-mode #entry-scope { display: none !important; }
.account-mode .entry-layout { grid-template-columns: 1fr; justify-items: center; gap: 10px; padding: 6px 0 2px; }
.account-mode .entry-layout > div { display: grid; justify-items: center; }
.account-mode .entry-layout img { width: 236px; height: 236px; padding: 11px; }
.account-mode .entry-layout .inline-actions { justify-content: center; margin-top: 2px; }
.account-mode .download-qr-button { width: 42px; min-height: 42px; padding: 0; border-color: #b9dce1; color: #147b9c; background: #e7f5f7; }
.account-mode .download-qr-button span { display: none; }

@media (max-width: 1180px) {
  .appbar { grid-template-columns: 300px minmax(260px, 1fr) auto; }
  .chat-workspace { grid-template-columns: 300px minmax(0, 1fr); }
  .appbar-context { grid-template-columns: 95px minmax(140px, 1fr) 95px; padding: 0 16px; }
  .service-identity span { display: none; }
  .connection { padding: 0 9px; }
  .connection > span:last-child { display: none; }
}

@media (max-width: 900px) {
  .appbar { grid-template-columns: 260px minmax(220px, 1fr) auto; }
  .brand { padding: 0 14px; }
  .chat-workspace { grid-template-columns: 300px minmax(0, 1fr); }
  .appbar-context { grid-template-columns: 58px minmax(130px, 1fr) 58px; padding: 0 10px; }
  .service-identity { padding-left: 9px; }
  .service-identity strong { font-size: 18px; }
  .live-session-title strong { font-size: 17px; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-rows: 72px minmax(0, 1fr); }
  .appbar { grid-template-columns: 58px minmax(142px, 1fr) auto; }
  .brand { justify-content: center; padding: 0; border-right: 1px solid #273640; }
  .brand > div { display: none; }
  .brand-mark { width: 38px; height: 38px; }
  .appbar-context { display: grid; grid-template-columns: 42px minmax(96px, 1fr); gap: 7px; padding: 0 8px; }
  .service-identity { padding-left: 7px; }
  .service-identity strong { font-size: 16px; }
  .live-session-title { justify-content: flex-start; gap: 7px; }
  .live-session-title strong { font-size: 15px; }
  .live-session-title i { width: 7px; height: 7px; }
  .appbar-actions { gap: 5px; padding-right: 7px; }
  .connection { display: none; }
  .settings-button { width: 40px; min-height: 40px; padding: 0; }
  .settings-button span { display: none; }
  .chat-workspace { grid-template-columns: 1fr; position: relative; }
  .chat-panel { grid-template-rows: 72px minmax(0, 1fr) auto; }
  .conversation-sidebar { inset: 0 12% 0 0; }
  .chat-header { padding: 0 12px; }
  .chat-timeline { padding: 20px 14px 24px; }
  .composer { padding: 9px 12px 12px; }
  .settings-section { padding: 22px 17px; }
  .entry-layout { grid-template-columns: 132px minmax(0, 1fr); }
  .entry-layout img { width: 132px; height: 132px; }
}

@media (max-width: 430px) {
  .appbar { grid-template-columns: 52px minmax(124px, 1fr) auto; }
  .brand .brand-mark { display: grid; }
  .brand-mark { width: 34px; height: 34px; font-size: 14px; }
  .appbar-context { grid-template-columns: 46px minmax(82px, 1fr); padding: 0 5px; }
  .service-identity { border-left-width: 2px; padding-left: 5px; }
  .service-identity strong { font-size: 15px; }
  .live-session-title strong { font-size: 14px; }
  .appbar-icon { width: 34px; height: 34px; }
  .account-mode #account-session { width: 32px; }
  .account-mode #account-session .trial-logout { width: 32px; height: 34px; }
  .settings-button { width: 36px; min-height: 36px; }
  .conversation-sidebar { inset-right: 7%; }
  .entry-layout { grid-template-columns: 1fr; }
  .entry-layout img { width: 170px; height: 170px; }
  .account-mode .entry-layout img { width: 220px; height: 220px; }
}

/* Deliberately distinct work surfaces: contact list, conversation, composer. */
.conversation-sidebar { background: #edf5f8; }
.conversation-list { background: #e6f0f5; border-top-color: #cedfe7; }
.chat-panel { background: #f4f0f8; }
.chat-timeline {
  background-color: #f4f0f8;
  background-image: linear-gradient(rgba(123, 96, 164, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(123, 96, 164, .045) 1px, transparent 1px);
}
.empty-chat { background-color: #f4f0f8; }
.composer { border-top-color: #cde4d8; background: #eef8f3; }
.composer textarea { border-color: #cfe2d8; background: #ffffff; }
.composer textarea:focus { border-color: #48ad86; box-shadow: 0 0 0 3px rgba(72, 173, 134, .14); }

/* Framed tech surfaces echo the visual language of the login screen. */
.chat-workspace {
  gap: 10px;
  padding: 10px;
  background-color: #0d171f;
  background-image: linear-gradient(rgba(76, 188, 193, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 188, 193, .055) 1px, transparent 1px);
  background-size: 32px 32px;
}
.conversation-sidebar {
  overflow: hidden;
  border: 1px solid #61b7c4;
  border-top: 3px solid #2ac7bf;
  border-radius: 8px;
  background: #edf5f8;
  box-shadow: 0 0 0 1px rgba(42, 199, 191, .1), 0 12px 30px rgba(2, 15, 23, .22);
}
.sidebar-heading { border-bottom: 1px solid #c8e1e7; background: #f6fbfc; }
.service-stat:first-child { border-top: 2px solid #2ab8c0; }
.service-stat:last-child { border-top: 2px solid #e1a24a; }
.conversation-list { border-top-color: #bfd9e2; background: #e4f0f5; }
.chat-panel {
  overflow: hidden;
  border: 1px solid #8c80c5;
  border-top: 3px solid #7165c5;
  border-radius: 8px;
  background: #111922;
  box-shadow: 0 0 0 1px rgba(113, 101, 197, .12), 0 12px 30px rgba(2, 15, 23, .24);
}
.chat-header { border-bottom-color: #c9c1e6; background: #fcfbff; }
.chat-timeline {
  margin: 10px 10px 6px;
  border: 1px solid #c4bae3;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(113, 101, 197, .05), 0 6px 18px rgba(11, 18, 29, .12);
}
.empty-chat {
  margin: 10px 10px 6px;
  border: 1px solid #c4bae3;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(113, 101, 197, .05);
}
.composer {
  margin: 0 10px 10px;
  border: 1px solid #83c9aa;
  border-top: 3px solid #2da375;
  border-radius: 8px;
  background: #eef8f3;
  box-shadow: 0 0 0 1px rgba(45, 163, 117, .08), 0 8px 22px rgba(2, 15, 23, .18);
}
.settings-section { border-left: 3px solid #2ab8c0; }
.settings-section:nth-child(2) { border-left-color: #7165c5; }
.settings-section:nth-child(3) { border-left-color: #d79b3c; }
.settings-section:nth-child(4) { border-left-color: #dc6770; }

@media (max-width: 760px) {
  .chat-workspace { gap: 6px; padding: 6px; }
  .conversation-sidebar { inset: 6px 12% 6px 6px; }
  .chat-timeline, .empty-chat { margin: 6px 6px 4px; }
  .composer { margin: 0 6px 6px; }
}

@media (max-width: 430px) {
  .conversation-sidebar { inset-right: 7%; }
}

/* Three-pane customer service layout for wide screens. */
.chat-workspace { grid-template-columns: 340px minmax(520px, 1fr) 280px; }
.conversation-sidebar { grid-template-rows: auto auto auto auto auto minmax(0, 1fr); }
.agent-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  margin: 0 16px 12px;
  padding: 8px 10px;
  border: 1px solid #b9dce3;
  border-left: 3px solid #2ab8c0;
  border-radius: 8px;
  background: #f7fcfd;
}
.agent-overview > div { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.agent-overview > div span { color: #718692; font-size: 10px; white-space: nowrap; }
.agent-overview > div strong { color: #147b9c; font-size: 17px; }
.agent-overview-status { display: inline-flex; align-items: center; gap: 6px; color: #a06e25; font-size: 10px; white-space: nowrap; }
.agent-overview-status i { width: 7px; height: 7px; border-radius: 50%; background: #d69a3c; box-shadow: 0 0 0 3px rgba(214, 154, 60, .12); }
.agent-overview-status.online { color: #087c5c; }
.agent-overview-status.online i { background: #2da375; box-shadow: 0 0 0 3px rgba(45, 163, 117, .12); }
.agent-overview-status.error { color: #b84951; }
.agent-overview-status.error i { background: #dc6770; box-shadow: 0 0 0 3px rgba(220, 103, 112, .12); }

.customer-context-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d2a55a;
  border-top: 3px solid #e2a747;
  border-radius: 8px;
  color: #26323a;
  background: #fbf7ef;
  box-shadow: 0 0 0 1px rgba(226, 167, 71, .1), 0 12px 30px rgba(2, 15, 23, .22);
}
.context-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 76px;
  padding: 14px 15px;
  border-bottom: 1px solid #e4d4b8;
  background: #fffaf2;
}
.context-panel-heading > div { min-width: 0; }
.context-panel-heading > div > span { display: block; color: #a17431; font-size: 8px; font-weight: 800; }
.context-panel-heading h2 { margin: 4px 0 0; color: #242e35; font-size: 17px; }
.context-status { flex: 0 0 auto; padding: 4px 7px; border: 1px solid #e1cfaf; border-radius: 6px; color: #9c6d25; background: #fff6e7; font-size: 9px; font-weight: 700; }
.context-status.active { border-color: #adddc9; color: #087c5c; background: #e8f7f1; }
.context-status.unread { border-color: #c9d0f7; color: #4055c8; background: #eef0ff; }
.context-status.locked { border-color: #e6c2c4; color: #b84951; background: #fff0f1; }
.context-empty { display: grid; place-items: center; align-content: center; gap: 10px; color: #8a7b66; }
.context-empty-mark { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #e4d1ad; border-radius: 8px; color: #b27c2a; background: #fff5e4; }
.context-empty-mark .ui-icon { width: 22px; height: 22px; }
.context-empty strong { font-size: 12px; }
.context-content { min-height: 0; overflow-y: auto; padding-bottom: 16px; }
.context-profile { display: flex; align-items: center; gap: 11px; padding: 18px 15px; border-bottom: 1px solid #eadcc5; background: #fffdf9; }
.context-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; overflow: hidden; border: 1px solid #d7bf97; border-radius: 50%; color: #9c6d25; background: #fff1d9; font-size: 15px; font-weight: 700; }
.context-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.context-profile > div { display: grid; gap: 4px; min-width: 0; }
.context-profile strong, .context-profile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.context-profile strong { color: #253039; font-size: 14px; }
.context-profile span { color: #8c806f; font-size: 10px; }
.context-details { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-bottom: 1px solid #eadcc5; }
.context-details > div { min-width: 0; padding: 12px 13px; border-bottom: 1px solid #eee2ce; }
.context-details > div:nth-child(odd) { border-right: 1px solid #eee2ce; }
.context-details > div:nth-last-child(-n + 2) { border-bottom: 0; }
.context-details dt { color: #968873; font-size: 9px; }
.context-details dd { overflow: hidden; margin: 5px 0 0; color: #39444b; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.context-search-form { padding: 14px 15px; border-bottom: 1px solid #eadcc5; }
.context-search-field { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 8px 0 10px; border: 1px solid #dcc69e; border-radius: 7px; color: #a17431; background: #fffdf9; transition: border-color .16s ease, box-shadow .16s ease; }
.context-search-field:focus-within { border-color: #d49b45; box-shadow: 0 0 0 3px rgba(212, 155, 69, .13); }
.context-search-field .ui-icon { flex: 0 0 auto; width: 15px; height: 15px; }
.context-search-field input { min-width: 0; width: 100%; border: 0; outline: 0; color: #39444b; background: transparent; font-size: 11px; }
.context-search-field input::placeholder { color: #aa9b88; }
.context-search-clear { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; color: #9b7e54; background: transparent; cursor: pointer; }
.context-search-clear:hover { color: #805314; background: #fff0d7; }
.context-search-clear .ui-icon { width: 14px; height: 14px; }
.context-search-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; margin-top: 7px; }
.context-search-meta > span:first-child { color: #9b8d79; font-size: 9px; }
.context-search-nav { display: inline-flex; gap: 4px; }
.context-search-nav button { display: grid; place-items: center; width: 27px; height: 27px; padding: 0; border: 1px solid #ddc59d; border-radius: 5px; color: #98681f; background: #fffaf2; cursor: pointer; }
.context-search-nav button:hover:not(:disabled) { border-color: #d4a85d; color: #805314; background: #fff0d7; }
.context-search-nav button:disabled { cursor: not-allowed; opacity: .42; }
.context-search-nav .ui-icon { width: 15px; height: 15px; }
.context-latest { padding: 15px; }
.context-latest span { color: #a17431; font-size: 9px; font-weight: 800; }
.context-latest p { display: -webkit-box; overflow: hidden; margin: 7px 0 0; color: #58656d; font-size: 11px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
.context-jump-button { width: calc(100% - 30px); margin: 0 15px; border-color: #ddc59d; color: #98681f; background: #fffaf2; }
.context-jump-button:hover { border-color: #d4a85d; color: #805314; background: #fff3dd; }
.transfer-button { border-color: #b7c9f0; color: #3d5eb6; background: #f4f7ff; }
.transfer-button:hover:not(:disabled) { border-color: #718ddd; color: #ffffff; background: #526fc5; }
.transfer-dialog { width: min(430px, calc(100vw - 32px)); padding: 0; border: 1px solid #cdd7ec; border-radius: 12px; color: #24314a; background: #ffffff; box-shadow: 0 22px 70px rgba(35, 52, 83, .28); }
.transfer-dialog::backdrop { background: rgba(19, 30, 51, .46); backdrop-filter: blur(2px); }
.transfer-dialog form { display: grid; margin: 0; }
.transfer-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid #e4e9f3; background: #f8faff; }
.transfer-dialog-header > div > span { color: #526fc5; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.transfer-dialog-header h2 { margin: 5px 0 0; color: #24314a; font-size: 19px; }
.transfer-dialog-body { display: grid; gap: 14px; padding: 18px 20px 20px; }
.transfer-description { margin: 0; color: #68758a; font-size: 12px; line-height: 1.65; }
.transfer-target-label { display: grid; gap: 7px; color: #526078; font-size: 11px; font-weight: 700; }
.transfer-target-label select { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid #cbd5e8; border-radius: 7px; color: #273650; background: #ffffff; font: inherit; }
.transfer-target-label select:focus { border-color: #6f8bd9; outline: 0; box-shadow: 0 0 0 3px rgba(82, 111, 197, .14); }
.transfer-message { min-height: 18px; margin: 0; color: #6b778b; font-size: 11px; line-height: 1.55; }
.transfer-message.error { color: #b34450; font-weight: 700; }
.transfer-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 18px; }
.transfer-dialog-actions button { min-width: 82px; }

@media (min-width: 1600px) {
  .chat-workspace { grid-template-columns: 360px minmax(560px, 1fr) 310px; }
}

@media (max-width: 1180px) {
  .chat-workspace { grid-template-columns: 300px minmax(0, 1fr); }
  .customer-context-panel { display: none; }
}

@media (max-width: 760px) {
  .chat-workspace { grid-template-columns: 1fr; }
  .agent-overview { margin: 0 14px 11px; }
}