:root {
  --cs-bg: #f5f9ff;
  --cs-surface: #fff;
  --cs-surface-blue: #f0f7ff;
  --cs-primary: #69aeff;
  --cs-primary-hover: #4e9cf6;
  --cs-primary-active: #368be8;
  --cs-primary-soft: #eaf4ff;
  --cs-border: #dcebfa;
  --cs-border-strong: #c6ddf5;
  --cs-text: #233247;
  --cs-text-secondary: #5f7188;
  --cs-text-muted: #74869c;
  --cs-success: #258a5d;
  --cs-success-soft: #eaf9f2;
  --cs-warning: #a96600;
  --cs-warning-soft: #fff6e5;
  --cs-danger: #c83f55;
  --cs-danger-soft: #fff0f2;
  --cs-shadow: 0 8px 24px rgba(61, 117, 178, .10);
  --cs-radius-sm: 8px;
  --cs-radius-md: 12px;
  --cs-radius-lg: 16px;
  --z-sticky: 20;
  --z-backdrop: 40;
  --z-modal: 50;
  --z-toast: 60;
  color-scheme: light;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--cs-text);
  background: var(--cs-bg);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--cs-bg); color: var(--cs-text); font-size: 14px; line-height: 1.6; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: var(--cs-primary-active); text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.is-hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--cs-text-muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }

:focus-visible { outline: 3px solid rgba(105, 174, 255, .36); outline-offset: 2px; }
input, textarea, select {
  width: 100%; min-height: 40px; border: 1px solid var(--cs-border); border-radius: 9px; background: #fff; padding: 8px 11px;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out;
}
textarea { resize: vertical; min-height: 84px; }
input::placeholder, textarea::placeholder { color: var(--cs-text-muted); opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: var(--cs-border-strong); }
input:focus, textarea:focus, select:focus { border-color: var(--cs-primary); box-shadow: 0 0 0 3px rgba(105, 174, 255, .18); outline: none; }
label { color: var(--cs-text-secondary); font-size: 13px; font-weight: 500; }
label input, label textarea, label select { margin-top: 6px; color: var(--cs-text); font-weight: 400; }

.button {
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; border: 1px solid transparent;
  padding: 7px 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; transition: background-color 180ms ease-out, border-color 180ms ease-out, transform 120ms ease-out;
}
.button:active { transform: translateY(1px); }
.button-primary { color: #fff; background: #1d75c1; border-color: #1d75c1; }
.button-primary:hover { background: #1768ad; border-color: #1768ad; }
.button-primary:active { background: #125990; border-color: #125990; }
.button-secondary { color: #2f72b7; background: #fff; border-color: var(--cs-border-strong); }
.button-secondary:hover { background: var(--cs-primary-soft); border-color: var(--cs-primary); }
.button-danger { color: var(--cs-danger); background: #fff; border-color: #f2cbd1; }
.button-complete { color: #fff; background: #218a63; border-color: #218a63; font-weight: 700; }
.button-complete:hover { background: #197451; }
.button-danger:hover { background: var(--cs-danger-soft); border-color: #e99aa7; }
.button-compact { min-height: 32px; padding: 5px 11px; font-size: 13px; }
.button-block { width: 100%; min-height: 42px; }
.icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--cs-border); border-radius: 10px; background: #fff; color: var(--cs-text-secondary); font-size: 18px; }
.icon-button:hover { background: var(--cs-primary-soft); color: var(--cs-primary-active); border-color: var(--cs-border-strong); }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cs-text); font-weight: 700; }
.brand-name { font-size: 17px; letter-spacing: -.01em; }
.brand-large .brand-name { font-size: 20px; }
.brand-mark { position: relative; width: 36px; height: 34px; flex: 0 0 36px; }
.brand-face { position: absolute; left: 3px; bottom: 1px; width: 30px; height: 25px; border-radius: 12px 12px 10px 10px; background: var(--cs-primary); box-shadow: inset 0 -4px 0 rgba(54, 139, 232, .14); }
.brand-face::after { content: ""; position: absolute; width: 6px; height: 4px; border-radius: 50%; background: #fff; left: 12px; top: 13px; }
.brand-face i { position: absolute; width: 3px; height: 5px; border-radius: 5px; background: #1e588f; top: 7px; }
.brand-face i:first-child { left: 8px; }
.brand-face i:last-child { right: 8px; }
.brand-ear { position: absolute; top: 0; width: 11px; height: 16px; border-radius: 8px 8px 3px 3px; background: var(--cs-primary); transform-origin: bottom; }
.brand-ear-left { left: 5px; transform: rotate(-15deg); }
.brand-ear-right { right: 5px; transform: rotate(15deg); }

.toast-region { position: fixed; z-index: var(--z-toast); top: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { max-width: min(380px, calc(100vw - 32px)); padding: 11px 14px; border: 1px solid var(--cs-border-strong); border-radius: 10px; color: var(--cs-text); background: #fff; box-shadow: var(--cs-shadow); animation: toast-in 180ms ease-out both; }
.toast-success { border-color: #bce4d2; background: var(--cs-success-soft); }
.toast-error { border-color: #f0c0c8; background: var(--cs-danger-soft); color: #9e2d40; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* 顾客前台 */
.customer-page { min-height: 100dvh; padding: 18px; background-image: radial-gradient(circle at 10% 0%, rgba(105,174,255,.10), transparent 35%); }
.customer-shell { width: min(960px, 100%); height: calc(100dvh - 36px); min-height: 560px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); box-shadow: var(--cs-shadow); }
.customer-header { min-height: 68px; padding: 12px 16px 12px 20px; display: flex; align-items: center; gap: 18px; border-bottom: 1px solid var(--cs-border); }
.customer-header .service-state { margin-left: auto; }
.service-state, .staff-presence { display: inline-flex; align-items: center; gap: 7px; color: var(--cs-text-secondary); font-size: 13px; }
.presence-dot, .staff-presence i { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-success); box-shadow: 0 0 0 4px var(--cs-success-soft); }
.service-state.is-connecting .presence-dot { background: var(--cs-warning); box-shadow: 0 0 0 4px var(--cs-warning-soft); }
.service-state.is-offline .presence-dot, .service-state.is-closed .presence-dot { background: var(--cs-text-muted); box-shadow: 0 0 0 4px #eef2f6; }
.order-strip { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 20px; color: #315b88; background: var(--cs-surface-blue); border-bottom: 1px solid var(--cs-border); }
.order-strip-label { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: #fff; border: 1px solid var(--cs-border); }
.message-viewport { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(14px, 4vw, 42px); scrollbar-gutter: stable; }
.message-list { display: flex; flex-direction: column; gap: 14px; }
.message-row { display: flex; align-items: flex-end; gap: 9px; }
.message-row.is-own { justify-content: flex-end; }
.message-avatar { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; display: grid; place-items: center; color: #2c6fae; background: var(--cs-primary-soft); font-size: 12px; font-weight: 700; }
.message-row.is-own .message-avatar { order: 2; color: #fff; background: var(--cs-primary); }
.message-content { max-width: min(72%, 620px); }
.message-meta { margin: 0 4px 4px; color: var(--cs-text-muted); font-size: 12px; }
.message-read-status { margin: 4px 4px 0; color: var(--cs-primary-active); font-size: 11px; line-height: 1.35; text-align: right; }
.message-time-divider { align-self: center; margin: 2px auto; padding: 3px 9px; border-radius: 10px; color: var(--cs-text-muted); background: rgba(231,239,247,.78); font-size: 11px; line-height: 1.4; }
.message-row.is-own .message-meta { text-align: right; }
.message-bubble { width: fit-content; max-width: 100%; padding: 10px 13px; border: 1px solid var(--cs-border); border-radius: 4px 14px 14px 14px; color: var(--cs-text); background: #fff; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-bubble-image { padding: 5px; }
.message-row.is-own .message-bubble { margin-left: auto; color: #17446f; background: var(--cs-primary-soft); border-color: #cfe5fb; border-radius: 14px 4px 14px 14px; }
.message-image { display: block; max-width: min(320px, 100%); max-height: 300px; border-radius: 11px; cursor: zoom-in; object-fit: cover; background: var(--cs-primary-soft); }
.message-image-button { display: block; max-width: 100%; padding: 0; border: 0; border-radius: 11px; background: transparent; }
.message-bubble { -webkit-touch-callout: none; user-select: none; }
.message-bubble > span { user-select: text; }
.message-quote { display: grid; gap: 2px; min-width: 120px; margin: -3px -5px 8px; padding: 7px 9px; border-left: 3px solid var(--cs-primary); border-radius: 7px; color: var(--cs-text-muted); background: rgba(83, 153, 219, .10); font-size: 12px; }
.message-quote strong { color: var(--cs-primary-active); font-size: 12px; }
.message-quote span { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-bubble-recalled { color: var(--cs-text-muted) !important; background: var(--cs-bg) !important; font-style: italic; }
.message-recalled-label { display: block; margin-top: 5px; color: var(--cs-text-muted); font-size: 11px; text-align: right; }
.message-action-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(13, 25, 38, .10); }
.message-action-sheet { --message-action-arrow-x: 50%; position: fixed; display: flex; align-items: stretch; justify-content: center; gap: 2px; padding: 8px; border-radius: 12px; color: #fff; background: #4a4c50; box-shadow: 0 10px 28px rgba(10, 24, 38, .28); }
.message-action-sheet::after { content: ""; position: absolute; left: var(--message-action-arrow-x); width: 12px; height: 12px; background: #4a4c50; transform: translateX(-50%) rotate(45deg); }
.message-action-sheet.is-above::after { bottom: -5px; }
.message-action-sheet.is-below::after { top: -5px; }
.message-action-sheet button { min-width: 0; min-height: 62px; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 7px 4px; border: 0; border-radius: 8px; color: #fff; background: transparent; font-size: 13px; line-height: 1.2; }
.message-action-sheet button:hover, .message-action-sheet button:focus-visible { outline: 0; background: rgba(255, 255, 255, .13); }
.message-action-sheet button:active { background: rgba(255, 255, 255, .20); }
.message-action-icon { width: 23px; height: 23px; display: grid; place-items: center; }
.message-action-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.load-history { display: block; margin: 0 auto 16px; border: 0; color: var(--cs-primary-active); background: transparent; }
.empty-state, .panel-empty, .detail-empty { height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; color: var(--cs-text-secondary); padding: 28px; }
.empty-state h1, .panel-empty h2 { margin: 15px 0 5px; color: var(--cs-text); font-size: 20px; }
.empty-state p, .panel-empty p { margin: 0; }
.empty-mascot { width: 68px; height: 62px; position: relative; }
.empty-mascot::before, .empty-mascot::after { content: ""; position: absolute; z-index: 0; top: 0; width: 20px; height: 30px; border-radius: 14px 14px 5px 5px; background: #cfe6ff; }
.empty-mascot::before { left: 8px; transform: rotate(-13deg); }
.empty-mascot::after { right: 8px; transform: rotate(13deg); }
.empty-mascot span { position: absolute; z-index: 1; inset: 12px 2px 0; border-radius: 27px 27px 20px 20px; background: var(--cs-primary-soft); border: 1px solid var(--cs-border-strong); }
.empty-mascot span::before { content: "••"; position: absolute; left: 21px; top: 11px; letter-spacing: 8px; color: #5784af; }
.empty-mascot span::after { content: ""; position: absolute; width: 9px; height: 6px; left: 27px; top: 31px; border-radius: 50%; background: var(--cs-primary); }
.connection-banner { padding: 7px 16px; text-align: center; color: #845300; background: var(--cs-warning-soft); border-top: 1px solid #f1dfb8; font-size: 13px; }
.composer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 13px 16px max(13px, env(safe-area-inset-bottom)); border-top: 1px solid var(--cs-border); background: #fff; }
.composer-quote { flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-left: 3px solid var(--cs-primary); border-radius: 8px; color: var(--cs-text-muted); background: var(--cs-primary-soft); }
.composer-quote > div { min-width: 0; display: grid; gap: 2px; }
.composer-quote strong { color: var(--cs-primary-active); font-size: 12px; }
.composer-quote span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.composer-quote button { width: 30px; height: 30px; flex: 0 0 30px; border: 0; border-radius: 50%; color: var(--cs-text-muted); background: rgba(255,255,255,.7); font-size: 20px; }
.composer textarea { width: auto; min-width: 0; min-height: 42px; max-height: 130px; flex: 1 1 auto; resize: none; }
.attach-button { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid var(--cs-border); border-radius: 10px; color: var(--cs-primary-active); background: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.attach-button:hover { background: var(--cs-primary-soft); }
.composer:has(input[type="file"]:focus-visible) .attach-button { outline: 3px solid rgba(105, 174, 255, .36); outline-offset: 2px; }
.send-button { min-width: 76px; height: 44px; }

dialog { border: 1px solid var(--cs-border); color: var(--cs-text); background: #fff; box-shadow: 0 20px 60px rgba(34, 72, 111, .22); }
dialog::backdrop { background: rgba(26, 48, 72, .35); }
body:has(dialog[open]) { overflow: hidden; }
.image-dialog { width: min(920px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); padding: 46px 14px 14px; border-radius: var(--cs-radius-lg); }
.image-dialog img { display: block; max-width: 100%; max-height: calc(100dvh - 100px); margin: auto; object-fit: contain; }
.dialog-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 9px; color: var(--cs-text-secondary); background: var(--cs-primary-soft); font-size: 22px; }
.image-dialog > .dialog-close { position: absolute; top: 10px; right: 10px; }
.image-save-button { position: absolute; top: 12px; left: 14px; }

/* 登录 */
.login-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: var(--cs-bg); }
.login-shell { width: min(980px, 100%); min-height: 590px; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; border: 1px solid var(--cs-border); border-radius: 22px; background: #fff; box-shadow: var(--cs-shadow); }
.login-intro { position: relative; padding: 52px; overflow: hidden; background: var(--cs-surface-blue); }
.login-intro::after { content: ""; position: absolute; width: 430px; height: 430px; right: -180px; bottom: -190px; border: 70px solid rgba(105,174,255,.11); border-radius: 50%; }
.login-intro h1 { margin: 98px 0 18px; font-size: 42px; line-height: 1.2; letter-spacing: -.035em; }
.login-intro > p { max-width: 34ch; color: var(--cs-text-secondary); font-size: 16px; }
.login-flow { position: absolute; left: 52px; bottom: 60px; display: flex; align-items: center; gap: 10px; color: #3e6995; }
.login-flow span { padding: 7px 10px; border: 1px solid var(--cs-border-strong); border-radius: 9px; background: rgba(255,255,255,.76); }
.login-flow i { width: 18px; height: 1px; background: var(--cs-primary); }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 56px; }
.login-heading { margin-bottom: 28px; }
.login-heading h2 { margin-bottom: 4px; font-size: 24px; }
.login-heading p { color: var(--cs-text-secondary); }
.form-stack { display: flex; flex-direction: column; gap: 17px; }
.form-error { margin: -6px 0 0; color: var(--cs-danger); font-size: 13px; }
.field-help { display: block; margin-top: 5px; color: var(--cs-text-muted); font-weight: 400; line-height: 1.5; }
.action-dialog .form-error:not(.is-hidden) { margin: 0; padding: 9px 11px; border: 1px solid #f0c0c8; border-radius: 8px; background: var(--cs-danger-soft); }
.login-customer-link { margin-top: 20px; align-self: center; color: var(--cs-text-secondary); }

/* 客服工作台 */
.staff-page { height: 100dvh; overflow: hidden; }
.app-topbar { height: 60px; display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid var(--cs-border); background: #fff; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.profile-button { min-height: 38px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; background: transparent; }
.profile-button:hover { background: var(--cs-primary-soft); }
.profile-button > span, .admin-user > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--cs-primary); font-weight: 700; }
.workbench { height: calc(100dvh - 60px); display: grid; grid-template-columns: minmax(280px, 310px) minmax(520px, 1fr) minmax(320px, 360px); }
.session-sidebar, .chat-panel, .detail-sidebar { min-width: 0; min-height: 0; background: #fff; }
.session-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--cs-border); }
.detail-sidebar { position: relative; overflow-y: auto; border-left: 1px solid var(--cs-border); background: #fbfdff; }
.session-heading { padding: 15px 15px 10px; display: flex; justify-content: space-between; align-items: center; }
.session-heading h1 { margin: 0; font-size: 20px; }
.session-heading p { margin: 2px 0 0; color: var(--cs-text-secondary); font-size: 12px; }
.search-field { position: relative; display: block; margin: 0 14px 10px; }
.search-field span { position: absolute; left: 11px; top: 8px; color: var(--cs-text-muted); }
.search-field input { padding-left: 32px; background: var(--cs-bg); }
.session-tabs { display: flex; gap: 5px; padding: 0 12px 10px; overflow-x: auto; }
.session-tabs button { min-height: 32px; flex: 0 0 auto; padding: 5px 9px; border: 0; border-radius: 8px; color: var(--cs-text-secondary); background: transparent; font-size: 12px; }
.session-tabs button:hover, .session-tabs button.is-active { color: #2e6fae; background: var(--cs-primary-soft); }
.session-tabs b { min-width: 18px; display: inline-grid; place-items: center; margin-left: 3px; padding: 0 4px; border-radius: 10px; background: #fff; font-size: 11px; }
.session-list { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--cs-border); }
.session-item { width: 100%; padding: 13px 14px; display: block; border: 0; border-bottom: 1px solid #edf4fb; text-align: left; background: #fff; }
.session-item:hover { background: #f8fbff; }
.session-item.is-active { background: #fff; }
.session-item-top { display: flex; align-items: center; gap: 8px; }
.session-item-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-item time { margin-left: auto; color: var(--cs-text-muted); font-size: 11px; }
.session-item p { margin: 5px 0 0; overflow: hidden; color: var(--cs-text-secondary); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.search-result-heading { padding: 10px 14px 7px; border-bottom: 1px solid #edf4fb; color: var(--cs-text-muted); background: #f8fbff; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.search-result-item mark, .workspace-result-item mark { padding: 0 2px; border-radius: 3px; color: inherit; background: #fff0a8; }
.search-result-item .search-match-meta { display: flex; gap: 7px; margin-top: 6px; color: var(--cs-text-muted); font-size: 11px; }
.search-result-item .search-match-content { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.session-item-foot { margin-top: 7px; display: flex; align-items: center; gap: 6px; }
.session-badge, .status-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 7px; border-radius: 7px; font-size: 11px; font-weight: 600; }
.status-queued { color: var(--cs-warning); background: var(--cs-warning-soft); }
.status-waiting_staff { color: #9e2d40; background: var(--cs-danger-soft); }
.status-waiting_customer, .status-assigned { color: #2d6ca8; background: var(--cs-primary-soft); }
.status-closed { color: var(--cs-success); background: var(--cs-success-soft); }
.unread-badge { min-width: 20px; height: 20px; display: inline-grid; place-items: center; margin-left: auto; border-radius: 10px; color: #fff; background: var(--cs-danger); font-size: 11px; }
.staff-bottom-nav { display: none; }
.staff-page-view { display: none; }
.staff-page-view.is-active { display: flex; flex-direction: column; min-height: 0; background: var(--cs-page-bg, #f5f9ff); }
.workbench.is-page-hidden { display: none; }
.staff-page-heading { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--cs-border); }
.staff-page-heading h1 { margin: 0; font-size: 28px; }
.staff-page-heading .icon-button { margin-left: auto; }
.page-back-button { width: 40px; height: 40px; border: 0; color: var(--cs-text); background: transparent; font-size: 34px; line-height: 1; }
.staff-page-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px; }
.settings-card, .profile-info-card { overflow: hidden; border: 1px solid var(--cs-border); border-radius: 18px; background: #fff; box-shadow: 0 3px 12px rgba(51,91,130,.06); }
.settings-row { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--cs-border); }
.settings-row:last-child { border-bottom: 0; }
.settings-row > div { min-width: 0; flex: 1; }
.settings-row strong { display: block; font-size: 18px; }
.settings-row p { margin: 4px 0 0; color: var(--cs-text-secondary); line-height: 1.5; }
.settings-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; color: var(--cs-primary); background: var(--cs-primary-soft); font-size: 25px; }
.switch { position: relative; display: block; width: 52px; height: 31px; flex: 0 0 52px; }
.switch input { position: absolute; opacity: 0; }
.switch i { position: absolute; inset: 0; display: block; border-radius: 18px; background: #bcc8d5; transition: background .2s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 25px; height: 25px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.16); }
.switch input:checked + i { background: var(--cs-primary); }
.switch input:checked + i::after { transform: translateX(21px); }
.settings-link-card { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 16px; padding: 18px 20px; border: 1px solid var(--cs-border); border-radius: 18px; text-align: left; background: #fff; box-shadow: 0 3px 12px rgba(51,91,130,.06); }
.settings-link-card > span:nth-child(2) { min-width: 0; flex: 1; }
.settings-link-card strong, .settings-link-card small { display: block; }
.settings-link-card strong { font-size: 18px; }
.settings-link-card small { margin-top: 4px; color: var(--cs-text-secondary); font-size: 13px; }
.settings-link-card > b { font-size: 28px; font-weight: 400; }
.auto-reply-section { margin-top: 20px; }
.auto-reply-section h2 { margin: 0 0 10px; font-size: 18px; }
.auto-reply-section textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--cs-border); border-radius: 14px; padding: 15px; font: inherit; resize: vertical; background: #fff; }
.character-count { margin: -28px 12px 17px auto; width: max-content; color: var(--cs-text-muted); }
.auto-reply-section p { color: var(--cs-text-muted); }
.profile-card-page { margin-bottom: 18px; border: 1px solid var(--cs-border); border-radius: 18px; background: #fff; box-shadow: 0 3px 12px rgba(51,91,130,.06); }
.profile-info-card > div { padding: 17px 20px; border-bottom: 1px solid var(--cs-border); }
.profile-info-card > div:last-child { border-bottom: 0; }
.profile-info-card p { margin: 5px 0 0; color: var(--cs-text-secondary); }
#profileLogoutButton { margin-top: 10px; }
.button-outline { border: 1px solid var(--cs-primary); color: var(--cs-primary); background: transparent; }
.staff-dialog { width: min(680px, calc(100vw - 28px)); max-height: min(760px, calc(100dvh - 28px)); padding: 0; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); color: var(--cs-text); background: #fff; box-shadow: 0 24px 70px rgba(30, 67, 103, .22); }
.staff-dialog::backdrop { background: rgba(25, 52, 78, .28); }
.staff-dialog-heading { display: flex; align-items: center; gap: 14px; padding: 18px 20px 15px; border-bottom: 1px solid var(--cs-border); background: #fbfdff; }
.staff-dialog-heading h2 { margin: 0; font-size: 20px; }
.staff-dialog-heading p { margin: 3px 0 0; color: var(--cs-text-muted); font-size: 12px; }
.staff-dialog-heading .dialog-close { margin-left: auto; }
.quick-reply-manager { padding: 18px 20px 22px; overflow-y: auto; }
.quick-reply-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--cs-border); }
.quick-reply-form .form-span { grid-column: 1 / -1; }
.quick-reply-form label { display: grid; gap: 6px; color: var(--cs-text-secondary); font-size: 12px; }
.quick-reply-form input:not([type="checkbox"]), .quick-reply-form textarea { width: 100%; border: 1px solid var(--cs-border); border-radius: 9px; padding: 9px 10px; color: var(--cs-text); background: #fff; font: inherit; }
.quick-reply-form textarea { resize: vertical; min-height: 76px; }
.quick-reply-enabled { display: flex !important; align-items: center; align-content: center; grid-column: 2; margin-top: 21px; }
.quick-reply-enabled input { width: 17px; height: 17px; accent-color: var(--cs-primary); }
.quick-reply-form-actions { display: flex; gap: 8px; align-items: center; }
.quick-reply-manager-list { display: grid; gap: 9px; margin-top: 16px; }
.quick-reply-manager-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--cs-border); border-radius: 10px; background: #fbfdff; }
.quick-reply-manager-body { min-width: 0; flex: 1; }
.quick-reply-manager-body strong { display: block; font-size: 14px; }
.quick-reply-manager-body p { margin: 5px 0; color: var(--cs-text-secondary); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.quick-reply-manager-body small { color: var(--cs-text-muted); }
.quick-reply-manager-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.profile-card { display: flex; align-items: center; gap: 14px; padding: 24px 22px; }
.profile-avatar { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: #fff; background: var(--cs-primary); font-size: 24px; font-weight: 700; }
.profile-card h3 { margin: 0; font-size: 18px; }
.profile-card p { margin: 4px 0 0; color: var(--cs-text-secondary); font-size: 13px; }
.profile-online { display: flex; align-items: center; gap: 5px; color: var(--cs-success) !important; }
.profile-online i { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-success); }
.staff-dialog-actions { display: flex; justify-content: flex-end; padding: 0 22px 20px; }
.chat-panel { position: relative; }
.chat-active { height: 100%; display: flex; flex-direction: column; }
.chat-header { min-height: 66px; padding: 10px 15px 10px 18px; display: flex; align-items: center; border-bottom: 1px solid var(--cs-border); }
.chat-header h2 { margin: 0; font-size: 16px; }
.chat-header p { margin: 1px 0 0; color: var(--cs-text-muted); font-size: 12px; }
.chat-more { position: relative; }
.chat-more-menu { position: absolute; z-index: 15; top: calc(100% + 7px); right: 0; width: 174px; overflow: hidden; padding: 5px; border: 1px solid var(--cs-border); border-radius: 11px; background: #fff; box-shadow: 0 14px 35px rgba(34,72,111,.18); }
.chat-more-menu button { width: 100%; padding: 9px 11px; border: 0; border-radius: 7px; text-align: left; color: var(--cs-text); background: transparent; }
.chat-more-menu button:hover { background: var(--cs-primary-soft); }
.chat-more-menu button:disabled { color: #aab6c2; background: transparent; cursor: not-allowed; }
.chat-more-menu button.is-danger { color: var(--cs-danger); }
.message-row.search-message-hit { animation: search-hit 1.8s ease-out; }
@keyframes search-hit { 0%,45% { filter: drop-shadow(0 0 8px rgba(255,185,35,.75)); transform: scale(1.015); } 100% { filter: none; transform: none; } }
.chat-actions { margin-left: auto; display: flex; gap: 7px; }
.mobile-back-button, .detail-close-button, .detail-toggle-button { display: none; }
.mobile-back-button, .detail-close-button { width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 0; border-radius: 9px; color: var(--cs-text-secondary); background: var(--cs-primary-soft); font-size: 24px; }
.detail-close-button { position: sticky; z-index: 1; top: 8px; margin: 8px 8px 0 auto; }
.staff-message-viewport { padding: 20px clamp(16px, 3vw, 36px); }
.quick-replies { min-height: 40px; display: flex; align-items: center; gap: 7px; padding: 6px 12px; overflow-x: auto; border-top: 1px solid var(--cs-border); }
.quick-replies button { flex: 0 0 auto; padding: 4px 9px; border: 1px solid var(--cs-border); border-radius: 8px; color: #3b6d9e; background: var(--cs-primary-soft); font-size: 12px; }
.staff-composer { padding-top: 9px; }
.detail-content > section { padding: 18px; border-bottom: 1px solid var(--cs-border); }
.detail-content h3 { margin: 0 0 12px; font-size: 14px; }
.detail-content dl { margin: 0; }
.detail-content dl div { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 6px 0; }
.detail-content dt { color: var(--cs-text-muted); }
.detail-content dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.note-list { display: flex; flex-direction: column; gap: 8px; }
.note-card { padding: 9px 10px; border: 1px solid #efdfb7; border-radius: 9px; background: var(--cs-warning-soft); }
.note-card p { margin: 0; }
.note-card small { color: #7e6a3c; }
.action-dialog { width: min(460px, calc(100vw - 28px)); padding: 20px; border-radius: var(--cs-radius-lg); }
.workspace-dialog { width: min(560px, calc(100vw - 28px)); max-height: min(720px, calc(100dvh - 28px)); padding: 0; overflow: hidden; border-radius: var(--cs-radius-lg); }
.workspace-dialog[open] { display: flex; flex-direction: column; }
.workspace-dialog-heading { display: flex; align-items: center; gap: 14px; padding: 16px 18px 13px; border-bottom: 1px solid var(--cs-border); background: #fbfdff; }
.workspace-dialog-heading > div { min-width: 0; }
.workspace-dialog-heading h2 { margin: 0; font-size: 18px; }
.workspace-dialog-heading p { margin: 2px 0 0; color: var(--cs-text-muted); font-size: 12px; }
.workspace-dialog-heading .dialog-close { margin-left: auto; flex: 0 0 auto; }
.dialog-search { margin: 13px 16px 10px; }
.workspace-result-list, .transfer-target-list { min-height: 180px; overflow-y: auto; padding: 4px 10px 14px; }
.workspace-result-item { width: 100%; display: block; padding: 11px 10px; border: 0; border-bottom: 1px solid #edf4fb; text-align: left; background: #fff; }
.workspace-result-item:hover { border-radius: 8px; background: var(--cs-primary-soft); }
.workspace-result-item strong { display: block; font-size: 13px; }
.workspace-result-item p { margin: 4px 0 0; color: var(--cs-text-secondary); font-size: 12px; line-height: 1.55; }
.workspace-result-item small { display: block; margin-top: 5px; color: var(--cs-text-muted); }
.dialog-empty { padding: 46px 18px; text-align: center; color: var(--cs-text-muted); }
.transfer-dialog form { min-height: 0; display: flex; flex-direction: column; }
.transfer-target-list { flex: 1 1 auto; }
.transfer-target { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 9px; border-bottom: 1px solid #edf4fb; cursor: pointer; }
.transfer-target:hover { border-radius: 8px; background: var(--cs-primary-soft); }
.transfer-target strong, .transfer-target small { display: block; }
.transfer-target small { margin-top: 2px; color: var(--cs-text-muted); }
.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: #b8c3ce; }
.presence-dot.is-online { background: #35b56f; box-shadow: 0 0 0 3px rgba(53,181,111,.12); }
.transfer-reason { margin: 0 18px 12px; color: var(--cs-text-secondary); font-size: 12px; }
.transfer-reason input { width: 100%; margin-top: 6px; }
.transfer-dialog .dialog-actions { padding: 0 18px 16px; }
.transfer-dialog .form-error { margin: 0 18px 10px; }
.action-dialog form { display: flex; flex-direction: column; gap: 15px; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-heading h2 { margin: 0; font-size: 18px; }
.action-dialog p { margin: 0; color: var(--cs-text-secondary); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; }

/* 管理后台 */
.admin-page { min-height: 100dvh; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.admin-sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; padding: 20px 14px 16px; border-right: 1px solid var(--cs-border); background: #fff; }
.admin-sidebar > .brand { margin: 3px 9px 27px; }
.admin-sidebar nav { display: flex; flex-direction: column; gap: 5px; }
.admin-sidebar nav button { min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 0; border-radius: 9px; color: var(--cs-text-secondary); text-align: left; background: transparent; }
.admin-sidebar nav button span { width: 22px; text-align: center; color: #6892bc; font-size: 17px; }
.admin-sidebar nav button:hover, .admin-sidebar nav button.is-active { color: #285f94; background: var(--cs-primary-soft); }
.admin-user { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 10px; border-top: 1px solid var(--cs-border); }
.admin-user div { min-width: 0; display: flex; flex-direction: column; }
.admin-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user a { color: var(--cs-text-muted); font-size: 12px; }
.admin-main { min-width: 0; padding: 0 clamp(20px, 4vw, 48px) 48px; }
.admin-topbar { min-height: 92px; display: flex; align-items: center; border-bottom: 1px solid var(--cs-border); }
.admin-topbar p { margin: 0; color: var(--cs-text-muted); font-size: 12px; }
.admin-topbar h1 { margin: 3px 0 0; font-size: 22px; }
.admin-topbar button { margin-left: auto; }
.admin-section { padding-top: 26px; }
.metrics-row { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); background: #fff; overflow: hidden; }
.metric { min-height: 118px; padding: 20px; border-right: 1px solid var(--cs-border); }
.metric:last-child { border-right: 0; }
.metric span { color: var(--cs-text-secondary); }
.metric strong { display: block; margin-top: 9px; font-size: 28px; line-height: 1.1; }
.metric small { color: var(--cs-text-muted); }
.admin-split { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 20px; }
.content-panel { border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); background: #fff; }
.content-panel > h2, .content-panel > h3 { padding: 18px 20px; margin: 0; border-bottom: 1px solid var(--cs-border); font-size: 16px; }
.overview-chart { min-height: 260px; display: flex; align-items: flex-end; gap: 18px; padding: 28px; }
.chart-bar { flex: 1; min-width: 58px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; color: var(--cs-text-secondary); }
.chart-bar i { width: min(70px, 80%); min-height: 8px; border-radius: 8px 8px 3px 3px; background: var(--cs-primary); }
.chart-bar .bar-level-1 { height: 17px; }
.chart-bar .bar-level-2 { height: 34px; }
.chart-bar .bar-level-3 { height: 51px; }
.chart-bar .bar-level-4 { height: 68px; }
.chart-bar .bar-level-5 { height: 85px; }
.chart-bar .bar-level-6 { height: 102px; }
.chart-bar .bar-level-7 { height: 119px; }
.chart-bar .bar-level-8 { height: 136px; }
.chart-bar .bar-level-9 { height: 153px; }
.chart-bar .bar-level-10 { height: 170px; }
.health-list { list-style: none; margin: 0; padding: 10px 20px; }
.health-list li { min-height: 50px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf4fb; }
.health-list li:last-child { border-bottom: 0; }
.status-ok { color: var(--cs-success); font-size: 13px; }
.status-error { color: var(--cs-danger); font-size: 13px; }
.section-toolbar { min-height: 68px; display: flex; align-items: center; gap: 16px; }
.section-toolbar h2 { margin: 0; font-size: 20px; }
.section-toolbar p { margin: 2px 0 0; color: var(--cs-text-secondary); }
.section-toolbar .button { margin-left: auto; }
.table-panel { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 15px; border-bottom: 1px solid #edf4fb; text-align: left; white-space: nowrap; }
th { color: var(--cs-text-secondary); background: #fbfdff; font-size: 12px; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfdff; }
.table-user { display: flex; align-items: center; gap: 9px; }
.table-user span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #326b9f; background: var(--cs-primary-soft); font-weight: 700; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.role-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.role-item { padding: 18px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); background: #fff; }
.role-item header { display: flex; align-items: center; justify-content: space-between; }
.role-item h3 { margin: 0; font-size: 16px; }
.role-item p { margin: 8px 0 14px; color: var(--cs-text-secondary); }
.permission-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.permission-chips span { padding: 2px 7px; border-radius: 6px; color: #326b9f; background: var(--cs-primary-soft); font-size: 11px; }
.settings-form { display: flex; flex-direction: column; gap: 18px; }
.checkbox-field { min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 8px 0; color: var(--cs-text); }
.checkbox-field input { width: 18px; min-height: 18px; margin: 0; box-shadow: none; }
.setting-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.setting-actions p { margin: 0; }
.email-test-status { width: 100%; min-height: 22px; margin: 0; font-size: 13px; line-height: 1.6; }
.email-test-status:empty { display: none; }
.email-test-status.is-sending { color: var(--cs-muted); }
.email-test-status.is-success { color: #087a55; }
.email-test-status.is-error { color: #b4233b; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; padding: 20px; }
.form-span { grid-column: 1 / -1; }
.admin-page .action-dialog label { display: block; }
.secret-output { padding: 10px; border-radius: 8px; color: #315b88; background: var(--cs-primary-soft); overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.field-with-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 6px; }
.field-with-action input { margin-top: 0; }
.field-with-action .button { min-height: 40px; }
.credential-output { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--cs-border); border-radius: 10px; background: var(--cs-border); }
.credential-output div { display: grid; gap: 3px; padding: 11px 12px; background: var(--cs-primary-soft); }
.credential-output span { color: var(--cs-text-secondary); font-size: 12px; }
.credential-output strong { color: #234f7b; font-size: 14px; overflow-wrap: anywhere; user-select: all; }
.danger-copy { padding: 10px 11px; border: 1px solid #f0c0c8; border-radius: 9px; color: #9e2d40 !important; background: var(--cs-danger-soft); }

.monitor-metrics { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.monitor-metrics article { min-height: 88px; padding: 14px 16px; border: 1px solid var(--cs-border); border-radius: 11px; background: #fff; }
.monitor-metrics span, .monitor-metrics small { display: block; color: var(--cs-text-muted); }
.monitor-metrics strong { margin-right: 5px; color: #285f94; font-size: 25px; line-height: 1.35; }
.monitor-filters { display: grid; grid-template-columns: minmax(170px, 1.5fr) repeat(4, minmax(130px, 1fr)) auto; align-items: end; gap: 10px; margin-bottom: 14px; padding: 14px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-md); background: #fff; }
.filter-actions { display: flex; gap: 7px; padding-bottom: 1px; }
.monitor-table td { vertical-align: middle; }
.monitor-table tr.is-overdue { background: #fffafb; }
.monitor-session-link { max-width: 230px; display: grid; gap: 1px; padding: 0; border: 0; color: inherit; text-align: left; background: transparent; }
.monitor-session-link strong, .monitor-session-link span, .monitor-session-link small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monitor-session-link span, .monitor-session-link small { color: var(--cs-text-muted); font-size: 11px; }
.monitor-session-link:hover strong { color: #1d75c1; }
.queue-owner { color: #966000; }
.reply-cell { width: 210px; display: grid; }
.reply-cell strong, .reply-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-cell span, .reply-cell small { color: var(--cs-text-muted); font-size: 11px; }
.read-state { color: #996400; }
.read-state.is-read { color: var(--cs-success); }
.overdue-text { color: var(--cs-danger); }
.performance-heading { margin-top: 22px; }
.session-monitor-dialog { width: min(900px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 32px)); padding: 0; overflow: hidden; border-radius: var(--cs-radius-lg); }
.session-monitor-dialog[open] { display: flex; flex-direction: column; }
.monitor-dialog-heading { min-height: 88px; flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--cs-border); background: #fbfdff; }
.monitor-dialog-heading > div { min-width: 0; }
.monitor-dialog-heading span { color: #4c7eae; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.monitor-dialog-heading h2 { margin: 1px 0 0; font-size: 20px; }
.monitor-dialog-heading p { margin: 0; color: var(--cs-text-muted); font-size: 12px; }
.monitor-dialog-heading .monitor-dialog-ip { margin-top: 2px; color: #365f87; font-weight: 600; }
.monitor-dialog-heading .dialog-close { margin-left: auto; flex: 0 0 auto; }
.monitor-dialog-actions { min-height: 55px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 20px; border-bottom: 1px solid var(--cs-border); }
.monitor-dialog-actions:empty { display: none; }
.monitor-dialog-actions > div { display: flex; flex-wrap: wrap; gap: 7px; }
.monitor-dialog-body { min-height: 0; flex: 1 1 0; overflow: hidden; }
.monitor-dialog-body > section { height: 100%; min-width: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 17px 20px 28px; }
.monitor-dialog-body h3 { position: sticky; z-index: 1; top: -17px; margin: -17px -20px 15px; padding: 13px 20px; border-bottom: 1px solid var(--cs-border); background: rgba(255,255,255,.96); font-size: 14px; }
.monitor-message-list { display: grid; gap: 10px; }
.monitor-message-group { width: fit-content; max-width: 78%; justify-self: start; display: grid; justify-items: start; gap: 3px; }
.monitor-message-group.from-staff { justify-self: end; justify-items: end; }
.monitor-message-group.has-image { max-width: min(100%, 292px); }
.monitor-message-meta { max-width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px; color: var(--cs-text-secondary); font-size: 11px; line-height: 1.35; }
.monitor-message { width: fit-content; min-width: 0; max-width: 100%; padding: 8px 10px; border: 1px solid var(--cs-border); border-radius: 4px 12px 12px; background: #fff; }
.monitor-message.from-staff { border-radius: 12px 4px 12px 12px; background: var(--cs-primary-soft); }
.monitor-message p { margin: 0; white-space: pre-wrap; line-break: strict; overflow-wrap: anywhere; }
.monitor-message-note { display: block; margin-top: 5px; color: var(--cs-text-muted); text-align: right; }
.monitor-read-status { padding: 0 3px; color: var(--cs-text-muted); font-size: 11px; line-height: 1.35; text-align: right; }
.monitor-message.has-image { padding: 5px; }
.monitor-message.has-image a { display: block; max-width: 100%; }
.monitor-message img { display: block; width: auto; max-width: 100%; max-height: 260px; border-radius: 8px; object-fit: contain; background: #fff; }
.empty-monitor { color: var(--cs-text-muted); text-align: center; }

.error-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.error-page main { text-align: center; }
.error-page h1 { margin: 18px 0 6px; }
.error-page p { color: var(--cs-text-secondary); margin-bottom: 20px; }

@media (max-width: 1199px) {
  .workbench { grid-template-columns: 280px minmax(480px, 1fr); }
  .detail-sidebar { position: fixed; z-index: var(--z-sticky); top: 60px; right: 0; width: min(360px, 90vw); height: calc(100dvh - 60px); transform: translateX(100%); box-shadow: -12px 0 30px rgba(51, 91, 130, .12); transition: transform 200ms ease-out; }
  .detail-sidebar.is-open { transform: translateX(0); }
  .detail-toggle-button { display: inline-flex; }
  .detail-close-button { display: grid; }
  .monitor-filters { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
}

@media (max-width: 840px) {
  .customer-page { height: var(--customer-visible-height, 100dvh); min-height: 0; overflow: hidden; padding: 0; }
  .customer-shell { height: var(--customer-visible-height, 100dvh); min-height: 0; border: 0; border-radius: 0; }
  .customer-header { min-height: 60px; padding-top: max(12px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .message-content { max-width: 84%; }
  .login-page { padding: 0; }
  .login-shell { min-height: 100dvh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
  .login-intro { display: none; }
  .login-panel { padding: 36px 24px; }
  .workbench { grid-template-columns: 1fr; }
  .session-sidebar { border-right: 0; }
  .session-list { padding-bottom: calc(70px + env(safe-area-inset-bottom)); scroll-padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .chat-panel { position: fixed; z-index: var(--z-sticky); inset: 60px 0 0; transform: translateX(100%); transition: transform 200ms ease-out; touch-action: pan-y; }
  .chat-panel.is-open { transform: translateX(0); }
  .mobile-back-button { display: grid; margin-right: 5px; }
  .topbar-actions .staff-presence, .topbar-actions > a { display: none; }
  .staff-bottom-nav { position: fixed; z-index: calc(var(--z-sticky) + 1); right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); height: 58px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--cs-border); background: rgba(255,255,255,.97); box-shadow: 0 -6px 20px rgba(51,91,130,.08); }
  body.staff-chat-open .staff-bottom-nav { display: none; }
  body.staff-chat-open .app-topbar { display: none; }
  body.staff-chat-open .chat-panel { inset: 0; }
  .staff-bottom-nav button { display: grid; place-items: center; align-content: center; gap: 2px; border: 0; color: var(--cs-text-muted); background: transparent; font: inherit; font-size: 11px; }
  .staff-bottom-nav button.is-active { color: var(--cs-primary); font-weight: 700; }
  .staff-nav-icon { font-size: 18px; line-height: 1; }
  .staff-page { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .staff-page-view.is-active { position: fixed; z-index: var(--z-sticky); inset: 60px 0 calc(58px + env(safe-area-inset-bottom)); display: block; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
  .staff-page-heading { min-height: 72px; padding-inline: 18px; }
  .staff-page-heading h1 { font-size: 28px; }
  .staff-page-scroll { min-height: auto; overflow: visible; padding: 18px 14px 34px; }
  .admin-page { display: block; }
  .admin-sidebar { position: sticky; z-index: var(--z-sticky); top: 0; height: auto; min-width: 0; padding: 10px 12px 8px; border-right: 0; border-bottom: 1px solid var(--cs-border); box-shadow: 0 8px 24px rgba(51, 91, 130, .06); }
  .admin-sidebar > .brand { margin: 2px 8px 12px; }
  .admin-sidebar nav { width: 100%; flex-direction: row; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .admin-sidebar nav::-webkit-scrollbar { display: none; }
  .admin-sidebar nav button { flex: 0 0 auto; }
  .admin-user { display: none; }
  .admin-main { width: 100%; min-width: 0; overflow: hidden; padding: 0 14px 32px; }
  .admin-topbar { min-height: 78px; }
  .admin-section { padding-top: 20px; }
  .metrics-row { grid-template-columns: repeat(2, 1fr); }
  .metric { border-bottom: 1px solid var(--cs-border); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-last-child(-n+2) { border-bottom: 0; }
  .admin-split { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-span { grid-column: auto; }
  .monitor-metrics { grid-template-columns: repeat(2, 1fr); }
  .monitor-dialog-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  .monitor-dialog-body > section { height: auto; min-height: 100%; overflow: visible; }
  .monitor-dialog-body h3 { position: static; margin: -17px -20px 15px; }
}

@media (max-width: 560px) {
  .customer-header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(9px, env(safe-area-inset-right)); }
  .customer-header .service-state { font-size: 12px; }
  .message-viewport { padding: 16px 12px; }
  .message-avatar { display: none; }
  .message-content { max-width: 88%; }
  .composer { gap: 7px; padding-inline: 9px; }
  .attach-button { width: 44px; flex-basis: 44px; }
  .send-button { min-width: 62px; padding-inline: 11px; }
  .app-topbar { padding: 0 11px; }
  .profile-button { font-size: 0; }
  .chat-header { min-height: 70px; padding-inline: 7px; }
  .chat-header > div:nth-child(2) { min-width: 0; }
  .chat-header > div:nth-child(2) p { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-actions { gap: 3px; }
  .chat-actions .button-compact { min-height: 38px; padding-inline: 7px; font-size: 12px; }
  .metrics-row { grid-template-columns: 1fr; }
  .metric { border-right: 0; border-bottom: 1px solid var(--cs-border) !important; }
  .metric:last-child { border-bottom: 0 !important; }
  .section-toolbar { min-height: 0; flex-wrap: wrap; align-items: flex-start; padding-bottom: 14px; }
  .section-toolbar .button { margin-left: 0; }
  .monitor-filters { grid-template-columns: 1fr; }
  .monitor-metrics { grid-template-columns: 1fr 1fr; }
  .session-monitor-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; border: 0; border-radius: 0; }
  .monitor-dialog-heading { padding-inline: 14px; }
  .monitor-dialog-actions { align-items: flex-start; flex-direction: column; padding-inline: 14px; }
  .monitor-message-group { max-width: 100%; }
  .settings-row { padding: 16px 14px; }
  .settings-row strong { font-size: 17px; }
  .settings-row p { font-size: 13px; }
  .settings-link-card { padding: 16px 14px; }
  .quick-reply-manager { padding: 0; }
  .staff-dialog { width: 100vw; max-width: none; max-height: calc(100dvh - 10px); margin: 5px 0 0; border-radius: 16px 16px 0 0; }
  .quick-reply-form { grid-template-columns: 1fr; }
  .quick-reply-form .form-span { grid-column: auto; }
  .quick-reply-enabled { grid-column: auto; margin-top: 0; }
  .quick-reply-manager-row { display: block; }
  .quick-reply-manager-actions { justify-content: flex-start; margin-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* After-sales intake */
.after-sales-entry-page { background: #f4f7fb; color: #17243a; }
.after-sales-shell { width: min(100% - 32px, 980px); margin: 0 auto; padding: 24px 0 34px; }
.after-sales-header { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.after-sales-header .brand { text-decoration: none; }
.after-sales-header-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #dbe5f3; border-radius: 999px; color: #55708f; background: rgba(255,255,255,.72); font-size: 13px; font-weight: 700; }
.after-sales-header-pill i { width: 7px; height: 7px; border-radius: 50%; background: #36c99b; box-shadow: 0 0 0 4px #e4faf2; }
.after-sales-hero { position: relative; overflow: hidden; margin: 30px 0 18px; padding: 34px 38px 38px; border-radius: 28px; background: linear-gradient(125deg,#173657 0%,#245a77 55%,#4b9b9a 100%); color: #fff; box-shadow: 0 22px 50px rgba(27,72,100,.18); }
.after-sales-hero::after { content: ''; position: absolute; width: 260px; height: 260px; right: -74px; top: -100px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.05),0 0 0 56px rgba(255,255,255,.035); }
.after-sales-eyebrow { position: relative; z-index: 1; display: inline-flex; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.12); color: #ccebe8; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.after-sales-hero h1 { position: relative; z-index: 1; margin: 18px 0 10px; font-size: clamp(28px,5vw,44px); line-height: 1.18; letter-spacing: -.04em; }
.after-sales-hero h1 em { color: #b9f1de; font-style: normal; }
.after-sales-hero p { position: relative; z-index: 1; max-width: 520px; margin: 0; color: rgba(255,255,255,.74); font-size: 15px; line-height: 1.8; }
.after-sales-card { padding: 26px; border: 1px solid #e1e9f3; border-radius: 26px; background: rgba(255,255,255,.94); box-shadow: 0 18px 48px rgba(32,62,96,.08); }
.after-sales-stepper { display: flex; align-items: center; width: min(100%, 620px); margin: 0 auto 28px; color: #a2afbf; }
.after-sales-stepper > span { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; min-width: 72px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.after-sales-stepper > span b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #edf1f6; color: #91a0b2; font-size: 13px; }
.after-sales-stepper > span.is-active { color: #1f7b78; }
.after-sales-stepper > span.is-active b { color: #fff; background: linear-gradient(135deg,#2aa68e,#267a9c); box-shadow: 0 5px 12px rgba(42,166,142,.22); }
.after-sales-stepper > strong { flex: 1; height: 2px; margin: -19px 10px 0; background: #e8edf3; }
.after-sales-stepper > strong.is-active { background: #8bd9c1; }
.after-sales-wizard { position: relative; }
.after-sales-wizard-page { display: flex; flex-direction: column; min-height: 420px; padding-top: 3px; }
.after-sales-wizard-page.is-active { animation: after-sales-page-in .2s ease-out both; }
@keyframes after-sales-page-in { from { opacity: .35; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.after-sales-page-hint { margin: 5px 0 0; color: #94a2b1; font-size: 12px; font-weight: 500; }
.after-sales-page-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 26px; }
.after-sales-page-actions .button-secondary { min-width: 104px; }
.after-sales-page-actions .after-sales-submit { width: auto; min-width: 210px; margin-top: 0; }
.after-sales-subcategory-grid-page { align-content: start; margin-top: 4px; }
.after-sales-subcategory-card { position: relative; padding-right: 34px; }
.after-sales-subcategory-card > b { position: absolute; top: 50%; right: 13px; color: #9baabd; font-size: 20px; font-weight: 400; transform: translateY(-50%); }
.after-sales-section { padding: 25px 0 2px; border-top: 1px solid #edf1f5; }
.after-sales-section:first-of-type { border-top: 0; padding-top: 0; }
.after-sales-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 17px; }
.after-sales-section-kicker { display: block; margin-bottom: 6px; color: #2a9e89; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.after-sales-section-heading h2 { margin: 0; color: #192942; font-size: 20px; letter-spacing: -.02em; }
.after-sales-required { padding: 5px 9px; border-radius: 999px; background: #f4f7fa; color: #8b9bad; font-size: 11px; font-weight: 700; white-space: nowrap; }
.after-sales-category-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.after-sales-category-card,.after-sales-subcategory-card { appearance: none; text-align: left; font: inherit; cursor: pointer; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.after-sales-category-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 112px; padding: 17px 14px; border: 1px solid #e5ebf2; border-radius: 18px; background: #fff; color: #263850; }
.after-sales-category-card:hover,.after-sales-category-card.is-selected { transform: translateY(-2px); border-color: #75cdb9; background: linear-gradient(145deg,#f8fffd,#f0faf8); box-shadow: 0 10px 24px rgba(43,146,126,.12); }
.after-sales-category-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #eaf8f4; color: #27977f; font-size: 20px; font-weight: 800; }
.after-sales-category-card strong,.after-sales-subcategory-card strong { display: block; color: #263850; font-size: 14px; }
.after-sales-category-card small,.after-sales-subcategory-card span { display: block; margin-top: 5px; color: #8a99aa; font-size: 11px; line-height: 1.5; }
.after-sales-category-card > b { color: #9baabd; font-size: 21px; font-weight: 400; }
.after-sales-subcategory-wrap { margin-top: 18px; padding: 16px; border-radius: 17px; background: #f7fafc; }
.after-sales-subcategory-title { margin-bottom: 11px; color: #65788e; font-size: 12px; font-weight: 800; }
.after-sales-subcategory-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.after-sales-subcategory-card { min-height: 68px; padding: 12px 14px; border: 1px solid #e2e9f0; border-radius: 13px; background: #fff; }
.after-sales-subcategory-card:hover,.after-sales-subcategory-card.is-selected { border-color: #56b99f; background: #effaf7; box-shadow: 0 5px 14px rgba(37,144,119,.1); }
.after-sales-details { margin-top: 24px; scroll-margin-top: 16px; }
.after-sales-selected-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 19px; padding: 12px 15px; border: 1px solid #dcefe9; border-radius: 12px; background: #f1faf7; color: #6b8290; font-size: 12px; }
.after-sales-selected-summary strong { color: #217d70; font-size: 13px; }
.after-sales-fields { display: grid; gap: 15px; }
.after-sales-field { position: relative; display: grid; gap: 8px; color: #536a83; font-size: 12px; font-weight: 800; }
.after-sales-field > span b,.after-sales-upload-heading b { color: #e36b68; }
.after-sales-field input,.after-sales-field textarea { width: 100%; box-sizing: border-box; border: 1px solid #dfe7ef; border-radius: 12px; padding: 12px 13px; color: #23344b; background: #fbfcfe; font: inherit; font-size: 14px; font-weight: 500; outline: none; transition: border-color .18s,box-shadow .18s,background .18s; }
.after-sales-field textarea { min-height: 105px; resize: vertical; line-height: 1.65; }
.after-sales-field input:focus,.after-sales-field textarea:focus { border-color: #58b9a2; background: #fff; box-shadow: 0 0 0 4px rgba(88,185,162,.13); }
.after-sales-field > small { position: absolute; right: 12px; bottom: 10px; color: #a1afbd; font-size: 11px; font-weight: 500; }
.after-sales-order-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.after-sales-upload-field { display: grid; gap: 10px; }
.after-sales-upload-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #536a83; font-size: 12px; font-weight: 800; }
.after-sales-upload-heading small { color: #9aa8b6; font-size: 11px; font-weight: 500; }
.after-sales-upload-box { display: none; }
.after-sales-preview-grid { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 92px; }
.after-sales-preview-item,.after-sales-preview-add { position: relative; width: 82px; height: 82px; box-sizing: border-box; overflow: hidden; border-radius: 12px; }
.after-sales-preview-item { background: #edf2f5; }
.after-sales-preview-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.after-sales-preview-remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 21px; height: 21px; border: 0; border-radius: 50%; background: rgba(16,29,45,.68); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }
.after-sales-preview-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1.5px dashed #9ccfc3; background: #f6fcfa; color: #328f80; cursor: pointer; transition: border-color .18s,background .18s,transform .18s; }
.after-sales-preview-add:hover { border-color: #4eae9f; background: #ecfaf5; transform: translateY(-1px); }
.after-sales-preview-add span { font-size: 30px; font-weight: 300; line-height: 1; }
.after-sales-preview-add small { color: #6f9e96; font-size: 11px; font-weight: 600; }
.after-sales-preview-count { align-self: center; color: #8d9dac; font-size: 12px; white-space: nowrap; }
.after-sales-chat-page { gap: 0; }
.after-sales-chat-prompt { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 10px 16px 0; padding: 12px 14px; border: 1px solid #cfe8e1; border-radius: 14px; background: #f4fbf8; color: #3c6f68; }
.after-sales-chat-prompt > div { display: grid; gap: 3px; min-width: 0; }
.after-sales-chat-prompt strong { color: #246f63; font-size: 13px; }
.after-sales-chat-prompt span { color: #78958f; font-size: 12px; }
.after-sales-chat-prompt .button { flex: 0 0 auto; min-height: 36px; padding: 7px 13px; border-radius: 10px; font-size: 12px; }
.after-sales-inline-panel { padding: 10px 12px 0; }
.after-sales-inline-panel .after-sales-card { width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box; }
.after-sales-inline-panel .after-sales-stepper { margin-bottom: 12px; }
.after-sales-inline-panel .after-sales-wizard-page { min-height: 0; }
.after-sales-inline-panel .after-sales-page-actions { margin-top: 15px; }
.after-sales-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 50px; margin-top: 22px; border: 0; border-radius: 14px; background: linear-gradient(100deg,#238f82,#267aa0); box-shadow: 0 10px 20px rgba(38,128,137,.2); font-size: 14px; }
.after-sales-submit i { font-size: 20px; font-style: normal; transition: transform .18s; }
.after-sales-submit:hover:not(:disabled) i { transform: translateX(4px); }
.after-sales-submit.is-loading { opacity: .74; cursor: wait; }
.after-sales-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.after-sales-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff3f1; color: #c95d59; font-size: 12px; line-height: 1.5; }
.after-sales-privacy { margin: 13px 0 0; color: #9aa8b6; font-size: 11px; line-height: 1.7; text-align: center; }
.after-sales-footer { margin-top: 18px; color: #9aa8b6; font-size: 11px; text-align: center; }
.after-sales-footer a { color: #4b8e8d; text-decoration: none; }
.after-sales-loading,.after-sales-empty-error { grid-column: 1/-1; padding: 28px; border-radius: 15px; background: #f7fafc; color: #91a0af; text-align: center; font-size: 13px; }

/* Staff-side structured after-sales card */
.after-sales-staff-card { height: auto !important; min-height: 0 !important; align-self: flex-start; border: 1px solid #d5eee6 !important; border-radius: 16px; background: linear-gradient(150deg,#f7fffc,#f3f8fc); }
.after-sales-staff-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.after-sales-staff-card-heading h3 { margin: 0; color: #1e3d55; font-size: 15px; }
.after-sales-staff-badge { padding: 4px 8px; border-radius: 999px; background: #dff6ed; color: #278b76; font-size: 10px; font-weight: 800; }
.after-sales-staff-card dl { display: grid; gap: 8px; min-height: 0; margin: 0; }
.after-sales-staff-card dl > div { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: start; min-height: 0; height: auto; }
.after-sales-staff-card dt { color: #8293a2; font-size: 11px; }
.after-sales-staff-card dd { min-width: 0; min-height: 0; height: auto; margin: 0; color: #31465d; font-size: 12px; line-height: 1.55; word-break: break-word; }
.after-sales-staff-description { white-space: pre-wrap; }
.after-sales-staff-attachments { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.after-sales-staff-attachment { width: 58px; height: 58px; padding: 0; overflow: hidden; border: 1px solid #d4e6e2; border-radius: 10px; background: #eaf3f1; cursor: pointer; }
.after-sales-staff-attachment img { width: 100%; height: 100%; object-fit: cover; }

/* Staff-only card shown directly in the conversation stream. */
/* Compact structured after-sales values: content-driven sizing. */
.after-sales-inline-card { max-width: 720px; height: auto !important; min-height: 0 !important; align-self: flex-start; margin: 0 auto 18px; padding: 12px 13px; border: 1px solid #cde9df; border-radius: 16px; background: linear-gradient(145deg, #f7fffc, #f4f8fc); box-shadow: 0 8px 24px rgba(39, 112, 101, .09); }
.after-sales-inline-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.after-sales-inline-heading div { display: grid; gap: 2px; }
.after-sales-inline-heading span { color: #278f7c; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.after-sales-inline-heading strong { color: #1e3d55; font-size: 15px; }
.after-sales-inline-heading i { padding: 4px 8px; border-radius: 999px; color: #278b76; background: #dff6ed; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.after-sales-inline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 9px; }
.after-sales-inline-grid > div { min-width: 0; min-height: 0 !important; height: auto !important; align-self: start; padding: 8px 9px; border: 1px solid #dfefe9; border-radius: 10px; background: rgba(255,255,255,.78); }
.after-sales-inline-grid small, .after-sales-inline-description small { display: block; margin-bottom: 3px; color: #8293a2; font-size: 10px; }
.after-sales-inline-grid b { display: block; overflow-wrap: anywhere; color: #31465d; font-size: 12px; line-height: 1.45; }
.after-sales-inline-description { min-height: 0; height: auto; margin-top: 9px; padding: 9px 10px; border: 1px solid #dfefe9; border-radius: 10px; background: rgba(255,255,255,.78); }
.after-sales-inline-description p { min-height: 0; height: auto; margin: 0; color: #31465d; font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.after-sales-inline-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.after-sales-inline-attachment { width: 64px; height: 64px; padding: 0; overflow: hidden; border: 1px solid #d4e6e2; border-radius: 10px; background: #eaf3f1; cursor: pointer; }
.after-sales-inline-attachment img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 760px) {
  .after-sales-shell { width: min(100% - 20px, 620px); padding-top: 12px; }
  .after-sales-hero { margin-top: 20px; padding: 27px 22px 29px; border-radius: 22px; }
  .after-sales-card { padding: 19px 16px 22px; border-radius: 21px; }
  .after-sales-category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
  .after-sales-category-card { min-height: 96px; grid-template-columns: minmax(0, 1fr) auto; padding: 13px 11px; gap: 8px; }
  .after-sales-category-card > b { display: none; }
  .after-sales-category-card small { font-size: 10px; }
  .after-sales-subcategory-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .after-sales-order-fields { grid-template-columns: 1fr; gap: 15px; }
  .after-sales-upload-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .after-sales-stepper > span { min-width: 56px; font-size: 10px; }
  .after-sales-stepper > strong { margin-left: 5px; margin-right: 5px; }
  .after-sales-wizard-page { min-height: 360px; }
  .after-sales-page-actions { padding-top: 20px; }
  .after-sales-page-actions .after-sales-submit { min-width: 0; flex: 1; }
  .after-sales-inline-card { margin-inline: 0; padding: 11px 10px; }
  .after-sales-inline-grid { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .after-sales-inline-grid > div:first-child { grid-column: auto; }
  .after-sales-inline-description { margin-top: 7px; padding: 8px 9px; }
  .after-sales-inline-attachments { margin-top: 8px; }
}

/* The regular chat page is a fixed mobile viewport.  The intake page is a
   document-length form and must keep the page-level scroll container. */
.after-sales-entry-page {
  height: auto !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px !important;
  overscroll-behavior-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

@media (max-width: 840px) {
  .after-sales-entry-page {
    min-height: 100dvh !important;
    padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
      calc(24px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  }
}