:root {
    color-scheme: dark;
    --bg: #090d14;
    --bg-elevated: #0d121c;
    --surface: #121823;
    --surface-2: #171e2b;
    --surface-hover: #1d2534;
    --border: #273041;
    --border-strong: #384256;
    --primary: #7c3aed;
    --primary-hover: #8b5cf6;
    --primary-active: #6d28d9;
    --primary-soft: rgba(124, 58, 237, .14);
    --text: #fff;
    --text-secondary: #c3bfcc;
    --text-muted: #9298a9;
    --success: #22c55e;
    --danger: #ef4444;
    --focus: 0 0 0 4px rgba(139, 92, 246, .35);
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --z-sticky: 20;
    --z-modal-backdrop: 40;
    --z-modal: 50;
}

* { box-sizing: border-box; }
html { min-width: 320px; height: 100%; background: var(--bg); }
body { min-height: 100%; margin: 0; color: var(--text); background: var(--bg); font: 400 15px/1.55 Inter, "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }
button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; color: #fff; border-radius: 8px; background: var(--primary); text-decoration: none; transform: translateY(-160%); transition: transform 180ms var(--ease-out); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: none; box-shadow: var(--focus); }

.support-shell { display: grid; height: 100dvh; min-height: 0; grid-template-columns: 320px minmax(0, 1fr); overflow: hidden; }
.support-sidebar { display: flex; min-width: 0; min-height: 0; padding: 28px 24px 22px; overflow-y: auto; flex-direction: column; border-right: 1px solid var(--border); background: var(--bg-elevated); }
.sidebar-head { display: flex; gap: 16px; flex-direction: column; }
.wordmark { display: inline-flex; width: max-content; color: var(--text); font-size: 20px; font-weight: 800; letter-spacing: -.025em; text-decoration: none; }
.wordmark span { color: #a466ff; }
.back-link { display: inline-flex; width: max-content; min-height: 44px; padding: 8px 6px 8px 0; gap: 7px; align-items: center; color: var(--text-secondary); font-size: 13px; text-decoration: none; }
.back-link svg { width: 18px; transition: transform 180ms var(--ease-out); }
.back-link:hover { color: var(--text); }
.back-link:hover svg { transform: translateX(-3px); }

.support-intro { display: flex; gap: 12px; align-items: center; padding: 24px 0 22px; }
.support-mark { position: relative; display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; color: #d7c3ff; border-radius: 12px; background: var(--primary-soft); }
.support-mark svg { width: 25px; height: 25px; }
.support-mark > span { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border: 3px solid var(--bg-elevated); border-radius: 50%; background: var(--success); }
.support-intro h1 { margin: 0; font-size: 16px; line-height: 1.35; letter-spacing: -.01em; }
.support-intro p { display: flex; gap: 6px; align-items: center; margin: 3px 0 0; color: var(--text-secondary); font-size: 12px; }
.online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.topic-section { padding-top: 18px; border-top: 1px solid var(--border); }
.topic-section h2 { margin: 0 0 10px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.topic-list { display: flex; gap: 4px; flex-direction: column; }
.topic-button { display: flex; width: 100%; min-height: 46px; padding: 9px 10px 9px 12px; justify-content: space-between; gap: 12px; align-items: center; color: var(--text-secondary); border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out); }
.topic-button svg { width: 16px; opacity: .55; transition: transform 180ms var(--ease-out); }
.topic-button:hover { color: var(--text); background: var(--surface); }
.topic-button.is-active { color: #f3edff; background: var(--primary-soft); font-weight: 650; }
.topic-button.is-active svg { color: #b993ff; opacity: 1; transform: translateX(2px); }
.topic-button[aria-current="true"] { cursor: default; }
.topic-button[aria-current="true"]:hover { color: #f3edff; background: var(--primary-soft); }
.channel-section { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--border); }
.channel-section__heading { display: flex; min-height: 28px; justify-content: space-between; gap: 12px; align-items: baseline; }
.channel-section__heading h2 { margin: 0; color: var(--text-secondary); font-size: 12px; font-weight: 650; }
.channel-section__heading > span { color: var(--text-muted); font-size: 10px; }
.channel-section__intro { margin: 2px 0 10px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.channel-list { display: flex; flex-direction: column; }
.channel-link { display: grid; min-height: 52px; padding: 8px 5px; grid-template-columns: 34px minmax(0, 1fr) 18px; gap: 10px; align-items: center; color: var(--text); border-radius: 9px; text-decoration: none; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out); }
.channel-link + .channel-link { border-top: 1px solid rgba(39, 48, 65, .72); border-radius: 0 0 9px 9px; }
.channel-link:hover { background: var(--surface); }
.channel-link.is-unavailable { color: var(--text-secondary); cursor: not-allowed; }
.channel-link.is-unavailable:hover { background: transparent; }
.channel-mark { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; border-radius: 9px; font-size: 13px; font-weight: 800; }
.channel-mark--line, .channel-mark--telegram { background: transparent; }
.channel-mark--web { color: #dfd1ff; background: var(--primary-soft); }
.channel-mark svg { width: 17px; height: 17px; }
.channel-mark img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: contain; }
.channel-copy { display: flex; min-width: 0; flex-direction: column; }
.channel-copy strong { overflow: hidden; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.channel-copy small { margin-top: 2px; color: var(--text-muted); font-size: 10px; }
.channel-external { width: 16px; height: 16px; color: var(--text-muted); }
.security-note { display: flex; padding: 16px 0; margin-top: auto; gap: 11px; border-top: 1px solid var(--border); }
.security-note > svg { flex: 0 0 auto; width: 20px; color: #b895f8; }
.security-note strong { display: block; font-size: 12px; }
.security-note p { margin: 4px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.sidebar-foot { margin: 0; color: var(--text-muted); font-size: 11px; }
.sidebar-foot strong { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.conversation { display: grid; min-width: 0; min-height: 0; grid-template-rows: 72px minmax(0, 1fr) auto; background: radial-gradient(circle at 50% 0, rgba(124, 58, 237, .055), transparent 34%), var(--bg); }
.conversation-head { position: relative; z-index: var(--z-sticky); display: flex; min-width: 0; padding: 0 28px; gap: 12px; align-items: center; border-bottom: 1px solid var(--border); background: rgba(9, 13, 20, .96); }
.agent-avatar, .message-avatar { position: relative; display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: var(--primary); font-weight: 750; }
.agent-avatar { width: 42px; height: 42px; border-radius: 12px; }
.agent-avatar span { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border: 3px solid var(--bg); border-radius: 50%; background: var(--success); }
.agent-meta { min-width: 0; }
.agent-meta h2 { margin: 0; overflow: hidden; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.agent-meta p { margin: 2px 0 0; color: var(--text-secondary); font-size: 11px; }
.agent-meta p span { margin-inline: 3px; color: var(--text-muted); }
.mobile-back, .mobile-info, .mobile-channels, .mobile-case-info { display: none; }
.message-list { min-height: 0; padding: 28px max(28px, calc((100% - 820px) / 2)); overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; scroll-behavior: smooth; scrollbar-gutter: stable; }
.date-divider { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--text-muted); font-size: 11px; text-align: center; }
.date-divider::before, .date-divider::after { height: 1px; flex: 1; content: ""; background: var(--border); }
.system-message { display: flex; max-width: 620px; padding: 10px 12px; margin: 0 auto 26px; gap: 9px; align-items: flex-start; color: var(--text-secondary); border-radius: 9px; background: rgba(23, 30, 43, .75); font-size: 11px; }
.system-message svg { flex: 0 0 auto; width: 16px; color: #b895f8; }
.message-row { display: flex; width: 100%; gap: 10px; margin-top: 20px; }
.message-row--agent { justify-content: flex-start; }
.message-row--member { justify-content: flex-end; }
.message-avatar { width: 34px; height: 34px; margin-top: 21px; border-radius: 9px; font-size: 12px; }
.message-content { display: flex; max-width: min(76%, 580px); flex-direction: column; align-items: flex-start; }
.message-row--member .message-content { align-items: flex-end; }
.sender-name { margin: 0 0 5px 2px; color: var(--text-muted); font-size: 11px; }
.message-bubble { padding: 11px 14px; color: var(--text); border-radius: 5px 12px 12px; background: var(--surface-2); }
.message-row--member .message-bubble { border-radius: 12px 5px 12px 12px; background: var(--primary); }
.message-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-bubble--media { padding: 5px; overflow: hidden; }
.message-image-link { display: block; border-radius: 8px; }
.message-image { display: block; width: auto; max-width: min(320px, 52vw); max-height: min(380px, 52vh); border-radius: 8px; object-fit: contain; }
.message-image--sticker { max-width: 150px; max-height: 150px; }
.message-video { display: block; width: min(360px, 54vw); max-width: 100%; max-height: min(420px, 55vh); border-radius: 8px; background: #03060a; }
.message-content time { margin-top: 5px; color: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.message-file { display: flex; margin-top: 8px; gap: 6px; align-items: center; font-size: 11px; opacity: .88; }
.message-file svg { width: 15px; }
.typing-indicator .message-bubble { display: flex; height: 40px; align-items: center; gap: 4px; }
.typing-indicator i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-secondary); animation: typing 1.1s ease-in-out infinite; }
.typing-indicator i:nth-child(2) { animation-delay: 140ms; }
.typing-indicator i:nth-child(3) { animation-delay: 280ms; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.transaction-feed-item { width: min(100%, 620px); margin: 20px auto 0; list-style: none; }
.transaction-card {
    --transaction-accent: #8b5cf6;
    --transaction-soft: rgba(139, 92, 246, .14);
    --transaction-ink: #c4b5fd;
    overflow: hidden;
    border-radius: 14px;
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border);
}
.transaction-card--deposit { --transaction-accent: #22c55e; --transaction-soft: rgba(34, 197, 94, .14); --transaction-ink: #86efac; }
.transaction-card--pending, .transaction-card--processing { --status-soft: rgba(245, 158, 11, .14); --status-ink: #fcd34d; --status-accent: #f59e0b; }
.transaction-card--success { --status-soft: rgba(34, 197, 94, .14); --status-ink: #86efac; --status-accent: #22c55e; }
.transaction-card--failed, .transaction-card--cancelled { --status-soft: rgba(239, 68, 68, .14); --status-ink: #fca5a5; --status-accent: #ef4444; }
.transaction-card--expired { --status-soft: rgba(148, 163, 184, .13); --status-ink: #cbd5e1; --status-accent: #94a3b8; }
.transaction-card__summary { padding: 16px; }
.transaction-card__header { display: flex; min-width: 0; justify-content: space-between; gap: 12px; align-items: flex-start; }
.transaction-card__identity { display: flex; min-width: 0; gap: 11px; align-items: center; }
.transaction-card__icon { position: relative; display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; color: var(--transaction-ink); border-radius: 11px; background: var(--transaction-soft); }
.transaction-card__icon > svg { width: 22px; height: 22px; }
.transaction-card__flow-icon { position: absolute; top: 2px; right: 3px; font-size: 11px; font-weight: 800; line-height: 1; }
.transaction-card__status-icon { position: absolute; right: -4px; bottom: -4px; display: grid; width: 17px; height: 17px; place-items: center; color: #08100b; border: 2px solid var(--surface); border-radius: 50%; background: var(--status-accent); font-size: 10px; font-weight: 900; line-height: 1; }
.transaction-card--failed .transaction-card__status-icon, .transaction-card--cancelled .transaction-card__status-icon { color: #fff; }
.transaction-card__heading { min-width: 0; }
.transaction-card__type { display: block; margin-bottom: 1px; color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .11em; line-height: 1.3; }
.transaction-card__heading h3 { margin: 0; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.transaction-card__controls { display: flex; flex: 0 0 auto; gap: 3px; align-items: center; }
.transaction-card__status { padding: 4px 8px; color: var(--status-ink); border-radius: 999px; background: var(--status-soft); font-size: 10px; font-weight: 700; line-height: 1.3; }
.transaction-card__toggle { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; color: var(--text-muted); border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.transaction-card__toggle:hover { color: var(--text); background: var(--surface-hover); }
.transaction-card__toggle svg { width: 17px; height: 17px; transition: transform 180ms var(--ease-out); }
.transaction-card.is-expanded .transaction-card__toggle svg { transform: rotate(180deg); }
.transaction-card__amount { display: grid; min-height: 54px; padding: 10px 12px; margin-top: 13px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px; align-items: center; border-radius: 10px; background: #0b111a; }
.transaction-card__amount > span { color: var(--text-muted); font-size: 10px; }
.transaction-card__amount > strong { color: var(--text); font-size: 23px; font-variant-numeric: tabular-nums; letter-spacing: -.025em; line-height: 1; }
.transaction-card--success .transaction-card__amount > strong { color: #4ade80; }
.transaction-card__amount > small { align-self: end; padding-bottom: 1px; color: var(--text-secondary); font-size: 9px; font-weight: 750; }
.transaction-card__panel { padding: 0 16px 16px; animation: transaction-panel-in 180ms var(--ease-out); }
.transaction-card__panel::before { display: block; height: 1px; margin-bottom: 11px; content: ""; background: var(--border); }
.transaction-card__detail { display: grid; padding: 4px 0; grid-template-columns: minmax(90px, 1fr) minmax(0, 2fr); gap: 12px; align-items: baseline; font-size: 11px; }
.transaction-card__detail > span { color: var(--text-muted); }
.transaction-card__detail > strong, .transaction-card__detail > time { color: var(--text-secondary); font-weight: 550; text-align: right; overflow-wrap: anywhere; }
.transaction-card__reference { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.transaction-card__reason { padding: 9px 10px; margin: 9px 0 0; color: var(--status-ink); border-radius: 9px; background: var(--status-soft); font-size: 11px; line-height: 1.5; }
.transaction-card__action { display: flex; min-height: 42px; padding: 8px 14px; margin-top: 11px; align-items: center; justify-content: center; color: #fff; border-radius: 9px; background: var(--primary); font-size: 12px; font-weight: 700; text-decoration: none; }
.transaction-card__action:hover { background: var(--primary-hover); }
@keyframes transaction-panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.composer { padding: 12px max(28px, calc((100% - 820px) / 2)) 18px; border-top: 1px solid var(--border); background: var(--bg-elevated); }
.chat-notice { display: flex; min-height: 42px; padding: 8px 10px; margin-bottom: 9px; justify-content: space-between; gap: 12px; align-items: center; color: #ffd7dc; border-radius: 9px; background: rgba(239, 68, 68, .14); font-size: 11px; }
.chat-notice button { flex: 0 0 auto; min-height: 34px; padding: 5px 10px; color: #fff; border: 1px solid rgba(255, 215, 220, .38); border-radius: 8px; background: transparent; cursor: pointer; font-weight: 650; }
.chat-notice button:hover { background: rgba(255, 255, 255, .08); }
.quick-replies { display: flex; padding: 1px 0 10px; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.quick-replies::-webkit-scrollbar { display: none; }
.quick-replies button { min-height: 36px; padding: 7px 11px; flex: 0 0 auto; color: #d6c5f6; border: 1px solid #49386a; border-radius: 999px; background: transparent; font-size: 11px; cursor: pointer; transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background-color 180ms var(--ease-out); }
.quick-replies button:hover { color: #fff; border-color: #7253a3; background: var(--primary-soft); }
.composer-row { display: flex; min-width: 0; min-height: 52px; gap: 7px; align-items: flex-end; }
.attach-button, .send-button { display: grid; flex: 0 0 auto; width: 48px; min-height: 48px; place-items: center; border-radius: 10px; cursor: pointer; }
.attach-button { color: var(--text-secondary); background: var(--surface); }
.attach-button:hover { color: var(--text); background: var(--surface-hover); }
.composer.is-sending .attach-button { color: #777d8d; cursor: wait; pointer-events: none; }
.attach-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attach-button:has(input:focus-visible) { box-shadow: var(--focus); }
.message-field { display: flex; min-width: 0; flex: 1; }
.message-field textarea { width: 100%; min-height: 48px; max-height: 128px; padding: 13px 14px; resize: none; overflow-y: auto; color: var(--text); caret-color: #b895f8; border: 1px solid var(--border); border-radius: 12px; outline: none; background: #090e16; line-height: 1.45; transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.message-field textarea::placeholder { color: #969cad; opacity: 1; }
.message-field textarea:hover { border-color: var(--border-strong); background: #0b111a; }
.message-field textarea:focus-visible { border-color: var(--primary-hover); box-shadow: var(--focus); }
.send-button { width: auto; min-width: 74px; padding: 0 14px; grid-auto-flow: column; gap: 7px; color: #fff; border: 0; background: var(--primary); font-weight: 700; transition: background-color 180ms var(--ease-out), transform 180ms var(--ease-out); }
.send-button:hover:not(:disabled) { background: var(--primary-hover); }
.send-button:active:not(:disabled) { background: var(--primary-active); transform: scale(.98); }
.send-button:disabled { color: #777d8d; background: #242b37; cursor: not-allowed; }
.send-button svg { width: 18px; }
.composer-meta { display: flex; min-height: 18px; padding: 4px 2px 0; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 10px; }
.attachment-preview { display: flex; width: max-content; max-width: 100%; min-height: 36px; padding: 6px 6px 6px 10px; margin-bottom: 8px; gap: 8px; align-items: center; color: var(--text-secondary); border-radius: 8px; background: var(--surface); font-size: 11px; }
.attachment-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview button { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: var(--text-muted); border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
.attachment-preview button:hover { color: var(--text); background: var(--surface-hover); }
.attachment-preview svg { width: 15px; }

.channel-dialog { width: min(calc(100% - 32px), 460px); max-height: min(720px, calc(100dvh - 32px)); padding: 0; overflow: auto; color: var(--text); border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-elevated); box-shadow: 0 8px 8px rgba(0, 0, 0, .28); }
.channel-dialog::backdrop { background: rgba(2, 5, 10, .78); }
.channel-dialog__handle { display: none; }
.channel-dialog__head { display: flex; padding: 22px 22px 14px; justify-content: space-between; gap: 16px; align-items: flex-start; }
.channel-dialog__head h2 { margin: 0; font-size: 19px; line-height: 1.35; letter-spacing: -.015em; }
.channel-dialog__head p { margin: 4px 0 0; color: var(--text-secondary); font-size: 12px; }
.dialog-close { display: grid; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; place-items: center; color: var(--text-secondary); border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.dialog-close:hover { color: var(--text); background: var(--surface); }
.web-chat-current { display: grid; min-height: 64px; padding: 10px 22px; grid-template-columns: 40px 1fr; gap: 11px; align-items: center; background: var(--primary-soft); }
.web-chat-current .channel-mark { width: 40px; height: 40px; }
.web-chat-current > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.web-chat-current strong { font-size: 13px; }
.web-chat-current small { display: flex; margin-top: 3px; gap: 6px; align-items: center; color: #cfc1e9; font-size: 11px; }
.web-chat-current small i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.channel-dialog__divider { display: flex; padding: 16px 22px 6px; color: var(--text-muted); font-size: 11px; }
.channel-list--dialog { padding: 0 16px 8px; }
.channel-list--dialog .channel-link { min-height: 60px; padding-inline: 7px; grid-template-columns: 40px minmax(0, 1fr) 18px; }
.channel-list--dialog .channel-mark { width: 40px; height: 40px; }
.channel-list--dialog .channel-copy strong { font-size: 13px; }
.channel-list--dialog .channel-copy small { font-size: 11px; }
.channel-dialog__note { display: flex; padding: 13px 22px 18px; margin: 0; gap: 8px; align-items: flex-start; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.channel-dialog__note svg { flex: 0 0 auto; width: 16px; color: #b895f8; }

.image-viewer { width: min(calc(100vw - 48px), 1080px); height: min(calc(100dvh - 48px), 820px); max-width: none; max-height: none; padding: 0; overflow: hidden; color: var(--text); border: 0; border-radius: 14px; background: #05080d; box-shadow: 0 8px 8px rgba(0, 0, 0, .45); }
.image-viewer[open] { animation: image-viewer-in 180ms var(--ease-out); }
.image-viewer::backdrop { background: rgba(2, 5, 10, .88); backdrop-filter: blur(5px); }
.image-viewer__shell { position: relative; width: 100%; height: 100%; }
.image-viewer__stage { display: grid; width: 100%; height: 100%; padding: 58px 24px 24px; overflow: auto; place-items: center; overscroll-behavior: contain; touch-action: pinch-zoom; }
.image-viewer__stage > * { grid-area: 1 / 1; }
.image-viewer__stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; transition: opacity 140ms var(--ease-out); }
.image-viewer.is-loading .image-viewer__stage img { opacity: .18; }
.image-viewer__status { padding: 8px 12px; margin: 0; color: var(--text-secondary); border-radius: 8px; background: var(--surface); font-size: 12px; pointer-events: none; }
.image-viewer__close { position: absolute; z-index: 1; top: 12px; right: 12px; display: grid; width: 44px; height: 44px; padding: 0; place-items: center; color: #fff; border: 0; border-radius: 10px; background: rgba(23, 30, 43, .92); cursor: pointer; }
.image-viewer__close:hover { background: var(--surface-hover); }
@keyframes image-viewer-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 760px) {
    .support-shell { display: block; min-height: 0; }
    .support-sidebar { display: none; }
    .conversation {
        height: 100vh;
        height: var(--chat-viewport-height, 100dvh);
        grid-template-areas:
            "header"
            "case"
            "messages"
            "composer";
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        background: var(--bg);
    }
    .conversation-head {
        grid-area: header;
        min-height: 64px;
        padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
        background: var(--bg);
    }
    .mobile-back, .mobile-info, .mobile-channels { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; color: var(--text-secondary); border: 0; border-radius: 9px; background: transparent; text-decoration: none; }
    .mobile-back:hover, .mobile-info:hover, .mobile-channels:hover { color: var(--text); background: var(--surface); }
    .agent-avatar { width: 38px; height: 38px; border-radius: 10px; }
    .agent-meta { flex: 1; }
    .mobile-case-info { grid-area: case; padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--border); background: var(--surface); }
    .mobile-case-info:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
    .mobile-case-info > div { display: flex; min-width: 0; flex-direction: column; }
    .mobile-case-info span { color: var(--text-muted); font-size: 10px; }
    .mobile-case-info strong { overflow: hidden; margin-top: 2px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-case-info p { display: flex; grid-column: 1 / -1; margin: 2px 0 0; gap: 7px; align-items: center; color: var(--text-secondary); font-size: 10px; }
    .mobile-case-info p svg { flex: 0 0 auto; width: 15px; color: #b895f8; }
    .message-list { grid-area: messages; padding: 18px max(14px, env(safe-area-inset-right)) 24px max(14px, env(safe-area-inset-left)); scrollbar-gutter: auto; }
    .date-divider { margin-bottom: 16px; }
    .system-message { margin-bottom: 20px; }
    .message-row { margin-top: 16px; }
    .message-content { max-width: min(84%, 34rem); }
    .message-avatar { width: 30px; height: 30px; margin-top: 20px; border-radius: 8px; }
    .message-bubble { padding: 10px 12px; font-size: 14px; }
    .message-bubble--media { padding: 4px; }
    .message-image { max-width: min(280px, 70vw); max-height: 44vh; }
    .message-video { width: min(320px, 72vw); max-height: 46vh; }
    .transaction-feed-item { margin-top: 16px; }
    .transaction-card__summary { padding: 13px; }
    .transaction-card__panel { padding: 0 13px 13px; }
    .composer {
        grid-area: composer;
        min-width: 0;
        padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
        background: var(--bg-elevated);
    }
    .chat-notice { align-items: flex-start; }
    .quick-replies { width: calc(100% + max(10px, env(safe-area-inset-right))); padding-right: max(10px, env(safe-area-inset-right)); overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
    .quick-replies button { min-height: 40px; padding-inline: 13px; scroll-snap-align: start; font-size: 12px; }
    .composer-row { gap: 6px; }
    .attach-button { width: 46px; min-height: 50px; }
    .message-field textarea { min-height: 50px; padding-block: 13px; font-size: 16px; }
    .send-button { min-width: 50px; min-height: 50px; padding: 0; }
    .send-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .composer-meta span:last-child { display: none; }
    .composer-meta { justify-content: flex-end; }
    .channel-dialog { width: 100%; max-width: none; max-height: min(84dvh, 720px); margin: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 16px 16px 0 0; }
    .channel-dialog__handle { display: block; width: 38px; height: 4px; margin: 9px auto 0; border-radius: 999px; background: var(--border-strong); }
    .channel-dialog__head { padding: 12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
    .channel-dialog__head h2 { font-size: 18px; }
    .web-chat-current { padding-inline: max(16px, env(safe-area-inset-left)); }
    .channel-list--dialog { padding-right: max(10px, env(safe-area-inset-right)); padding-left: max(10px, env(safe-area-inset-left)); }
    .channel-dialog__note { padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(18px, env(safe-area-inset-bottom)); padding-left: max(16px, env(safe-area-inset-left)); }
    .image-viewer { width: 100vw; height: 100vh; height: var(--chat-viewport-height, 100dvh); margin: 0; border-radius: 0; }
    .image-viewer__stage { padding: calc(60px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
    .image-viewer__stage img { border-radius: 6px; }
    .image-viewer__close { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
}

@media (max-width: 380px) {
    .conversation-head { gap: 6px; padding-right: max(6px, env(safe-area-inset-right)); padding-left: max(6px, env(safe-area-inset-left)); }
    .mobile-back, .mobile-info, .mobile-channels { width: 42px; flex-basis: 42px; }
    .agent-avatar { display: none; }
    .message-content { max-width: 86%; }
    .message-avatar { display: none; }
    .transaction-card__header { gap: 7px; }
    .transaction-card__identity { gap: 8px; }
    .transaction-card__icon { flex-basis: 38px; width: 38px; height: 38px; }
    .transaction-card__status { padding-inline: 6px; }
    .transaction-card__toggle { width: 36px; }
    .transaction-card__amount > strong { font-size: 20px; }
    .composer { padding-right: max(8px, env(safe-area-inset-right)); padding-left: max(8px, env(safe-area-inset-left)); }
    .attach-button { width: 44px; }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 520px) {
    .conversation-head { min-height: 56px; padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 6px; }
    .agent-avatar { width: 36px; height: 36px; }
    .message-list { padding-top: 12px; padding-bottom: 14px; }
    .date-divider, .system-message { margin-bottom: 12px; }
    .quick-replies { padding-bottom: 7px; }
    .quick-replies button { min-height: 36px; }
    .composer { padding-top: 7px; }
}

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