.sg-support-main { margin-left: var(--w-side-small); padding: 24px; color: rgb(var(--color-ink)); min-width: 0; }
.sg-support-main *, .sg-support-main *::before, .sg-support-main *::after { box-sizing: border-box; }
.sg-support-main [hidden] { display: none !important; }
.sg-support-main h1, .sg-support-main h2, .sg-support-main h3, .sg-support-main p { margin: 0; }
.sg-support-main h1, .sg-support-main h2, .sg-support-main h3 { font-weight: 700; }
.sg-support-main button, .sg-support-main input, .sg-support-main select, .sg-support-main textarea { font: inherit; }
.sg-support-main a, .sg-support-main button, .sg-support-main select, .sg-support-main label.support-button { -webkit-tap-highlight-color: transparent; transition: background 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out, opacity 300ms ease-out; }
.sg-support-main :focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.sg-support-main .rounded-card { border-radius: 16px; }
.sg-support-main .rounded-btn { border-radius: 8px; }
.sg-support-main .shadow-card { box-shadow: 0 8px 24px rgb(var(--color-primary) / 0.06); }
.support-hero, .support-title-group, .support-hero-actions, .support-panel-heading, .support-thread-actions, .support-composer-actions, .support-attach-actions { display: flex; align-items: center; gap: 16px; }
.support-hero { justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; }
.support-title-group { min-width: 0; }
.support-title-group > div:last-child { min-width: 0; }
.support-title-group p { color: rgb(var(--color-ink-muted)); margin-top: 8px; }
.support-brand-icon { flex: 0 0 48px; height: 48px; display: grid; place-items: center; background: rgb(var(--color-primary-soft)); color: rgb(var(--color-ink-muted)); font-size: 24px; }
.support-hero-actions { flex-wrap: wrap; gap: 8px; }
.support-push-settings { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.support-push-settings span { flex: 1; min-width: 160px; }
.support-push-settings button { min-width: 120px; }
.support-push-settings button[aria-busy="true"]::before { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: support-spin 800ms linear infinite; }
.support-theme-label { color: rgb(var(--color-ink-muted)); }
.support-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; border: 1px solid rgb(var(--color-primary) / 0.16); background: rgb(var(--color-surface-card)); color: rgb(var(--color-ink)); padding: 8px 16px; cursor: pointer; text-decoration: none; font-weight: 600; font-size: 14px; }
.support-button:hover { background: rgb(var(--color-surface-hover)); }
.support-button:disabled { opacity: 0.6; cursor: default; }
.support-button[aria-pressed="true"] { background: rgb(var(--color-primary-soft)); color: rgb(var(--color-ink)); border-color: rgb(var(--color-primary)); }
.support-primary { background: linear-gradient(135deg, rgb(var(--color-brand-cta-start)), rgb(var(--color-brand-cta-end))); color: rgb(var(--color-brand-cta-foreground)); border-color: transparent; min-width: 112px; }
.support-primary:hover { background: rgb(var(--color-brand-cta-start)); }
.support-control { min-height: 44px; padding: 8px 16px !important; border: 1px solid rgb(var(--color-primary) / 0.16) !important; color: rgb(var(--color-ink)) !important; background: rgb(var(--color-surface-hover)) !important; font-size: 16px !important; max-width: 100%; }
.support-control::placeholder { color: rgb(var(--color-ink-muted)) !important; }
.support-theme-label + select { width: auto; }
.support-workspace { display: grid; grid-template-columns: 256px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; height: calc(100dvh - 176px); min-height: 640px; max-height: 1040px; }
.support-workspace > *, .support-panel { min-height: 0; min-width: 0; }
.support-panel { background: rgb(var(--color-surface-card)); border: 1px solid rgb(var(--color-primary) / 0.12); overflow: hidden; }
.support-inbox { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.support-panel-heading { gap: 8px; justify-content: space-between; }
.support-panel-heading h2 { min-width: 0; }
.support-count { font-size: 14px; color: rgb(var(--color-ink-muted)); font-weight: 500; }
.support-case-list { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; }
.support-case { display: flex; flex-direction: column; text-align: left; align-items: stretch; gap: 8px; width: 100%; min-height: 104px; padding: 16px; flex-shrink: 0; }
.support-case-head { display: flex; align-items: start; gap: 8px; justify-content: space-between; }
.support-case-head strong, .support-case-subject, .support-case-summary { overflow-wrap: anywhere; }
.support-case-subject { font-size: 14px; font-weight: 700; }
.support-case-summary { font-size: 13px; font-weight: 400; color: rgb(var(--color-ink-muted)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.support-case-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: rgb(var(--color-ink-muted)); font-size: 12px; font-weight: 400; }
.support-unread { color: rgb(var(--color-ink)); background: rgb(var(--color-primary-soft)); padding: 0 8px; border-radius: 8px; }
.support-thread { display: flex; flex-direction: column; }
.support-thread-header { padding: 16px; display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; border-bottom: 1px solid rgb(var(--color-primary) / 0.12); flex-shrink: 0; }
.support-thread-title { min-width: 0; flex: 1 1 240px; }
.support-thread-title h2 { overflow-wrap: anywhere; }
.support-thread-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 13px; color: rgb(var(--color-ink-muted)); overflow-wrap: anywhere; }
.support-thread-actions { gap: 8px; flex-wrap: wrap; }
.support-messages { flex: 1 1 0; min-height: 0; overflow: auto; padding: 24px; background: rgb(var(--color-bgbody)); overscroll-behavior: contain; }
.support-message { max-width: 88%; margin-bottom: 16px; overflow-wrap: anywhere; }
.support-message[data-author="customer"] { margin-left: auto; }
.support-message-bubble { border: 1px solid rgb(var(--color-primary) / 0.16); background: rgb(var(--color-surface-card)); padding: 16px; }
.support-message[data-author="customer"] .support-message-bubble { background: rgb(var(--color-primary-soft)); }
.support-message[data-visibility="internal"] .support-message-bubble { background: rgb(var(--color-surface-hover)); border-style: dashed; }
.support-message-label { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: rgb(var(--color-ink-muted)); margin-bottom: 8px; }
.support-message-body { white-space: pre-wrap; font-size: 15px; line-height: 1.6; }
.support-message-time { display: block; margin-top: 8px; font-size: 12px; color: rgb(var(--color-ink-muted)); }
.support-message-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.support-message-attachment { max-width: 100%; justify-content: start; text-align: left; overflow-wrap: anywhere; }
.support-message-more { flex-shrink: 0; margin: 8px 16px; }
.support-composer { border-top: 1px solid rgb(var(--color-primary) / 0.12); padding: 16px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.support-audience { display: flex; gap: 8px; flex-wrap: wrap; }
.support-composer textarea { width: 100%; height: 80px; min-height: 64px; max-height: 200px; resize: vertical; line-height: 1.5; }
.support-composer-actions { gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.support-attach-actions { gap: 8px; flex-wrap: wrap; }
.support-composer-help, .support-composer .text-tiny, #support-note-warning { color: rgb(var(--color-ink-muted)); }
.support-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#support-file-label { position: relative; }
#support-file-label:focus-within { outline: 2px solid rgb(var(--color-primary)); outline-offset: 2px; }
.support-draft-attachments { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; max-height: 184px; overflow: auto; }
.support-draft-attachment { border: 1px solid rgb(var(--color-primary) / 0.16); display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; padding: 8px; align-items: center; }
.support-draft-attachment img, .support-draft-attachment video { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.support-draft-attachment .support-draft-icon { font-size: 24px; text-align: center; }
.support-draft-info { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.support-draft-info strong { display: block; font-size: 13px; }
.support-draft-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.support-draft-actions .support-button { flex: 1; }
.support-context { display: none; flex-direction: column; gap: 24px; padding: 16px; overflow: auto; overscroll-behavior: contain; }
.support-context p { color: rgb(var(--color-ink-muted)); line-height: 1.6; }
.support-context h3 { margin-bottom: 8px; }
.support-context dl { margin: 16px 0 0; display: grid; grid-template-columns: minmax(0, 104px) minmax(0, 1fr); gap: 8px; font-size: 13px; }
.support-context dt { color: rgb(var(--color-ink-muted)); }
.support-context dd { margin: 0; overflow-wrap: anywhere; }
.support-context-card { border: 1px solid rgb(var(--color-primary) / 0.16); padding: 16px; margin-top: 16px; }
.support-context-card h4 { margin: 0; font-weight: 700; }
.support-context-card p { margin-top: 8px; }
.support-context-collapse { display: none; }
.support-customer-identity { display: flex; align-items: center; gap: 16px; }
.support-customer-identity-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.support-customer-identity-info h3 { margin-bottom: 0; }
.support-customer-name { display: flex; align-items: center; gap: 8px; }
.support-customer-name span { min-width: 0; }
.support-verified-badge { width: 20px; height: 20px; flex-shrink: 0; object-fit: contain; }
.support-customer-avatar { width: 48px; height: 48px; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%; background: rgb(var(--color-primary-soft)); color: rgb(var(--color-ink)); font-size: 32px; }
.support-profile-link { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: rgb(var(--color-ink)); text-decoration: underline; text-underline-offset: 4px; }
.support-profile-link:hover { color: rgb(var(--color-ink-muted)); }
.support-new-fields { padding: 16px; border-bottom: 1px solid rgb(var(--color-primary) / 0.12); display: flex; flex-direction: column; gap: 16px; flex-shrink: 0; }
.support-new-fields label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: rgb(var(--color-ink-muted)); }
.support-guest-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.support-notice { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px; margin-bottom: 16px; background: rgb(var(--color-primary-soft)); border: 1px solid rgb(var(--color-primary) / 0.2); color: rgb(var(--color-ink)); line-height: 1.5; flex-wrap: wrap; }
.support-error { background: rgb(var(--color-surface-hover)); border-style: dashed; }
.support-composer .support-notice { margin: 0; }
.support-toast { position: fixed; bottom: calc(88px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); z-index: 80; background: rgb(var(--color-surface-card)); color: rgb(var(--color-ink)); border: 1px solid rgb(var(--color-primary)); padding: 16px; box-shadow: 0 8px 24px rgb(var(--color-ink) / 0.16); }
.support-empty { display: flex; min-height: 200px; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px; text-align: center; color: rgb(var(--color-ink-muted)); }
.support-empty i { font-size: 32px; }
.support-empty p { line-height: 1.6; }
.support-skeleton { height: 104px; flex-shrink: 0; background: rgb(var(--color-primary) / 0.08); animation: support-pulse 1.5s ease-in-out infinite; }
.support-spinner { width: 16px; height: 16px; display: inline-block; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: support-spin 800ms linear infinite; flex-shrink: 0; }
.support-load-more { display: flex; justify-content: center; align-items: center; gap: 8px; color: rgb(var(--color-ink-muted)); animation: support-fade 200ms ease-out; }
.support-end { color: rgb(var(--color-ink-subtle)); text-align: center; }
.support-mobile-tabs { display: none; }
.support-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; }
.support-encoding-source { position: fixed; width: 1px; height: 1px; top: 0; left: 0; opacity: 0; pointer-events: none; }
.sg-support-main[data-view="context"] .support-workspace[data-staff="true"] .support-thread { display: none; }
.sg-support-main[data-view="context"] .support-context { display: flex; }
@keyframes support-spin { to { transform: rotate(360deg); } }
@keyframes support-pulse { 50% { opacity: 0.5; } }
@keyframes support-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1280px) { .sg-support-main { margin-left: var(--w-side-md); } }
@media (min-width: 1536px) { .sg-support-main { margin-left: var(--w-side); } }
@media (min-width: 1440px) {
    .support-workspace[data-staff="true"] { grid-template-columns: 256px minmax(0, 1fr) 288px; }
    .support-context { display: flex; }
    .support-context-back, #support-context-button { display: none; }
    .support-context-collapse { display: inline-flex; }
    .sg-support-main[data-context-collapsed="true"] .support-workspace[data-staff="true"] { grid-template-columns: 256px minmax(0, 1fr); }
    .sg-support-main[data-context-collapsed="true"] .support-context { display: none; }
    .sg-support-main[data-context-collapsed="true"] #support-context-button { display: inline-flex; }
    .sg-support-main[data-view="context"] .support-workspace[data-staff="true"] .support-thread { display: flex; }
}
@media (max-width: 1023px) {
    .sg-support-main { padding: 16px; }
    .support-workspace { grid-template-columns: 224px minmax(0, 1fr); }
    .support-thread-actions { gap: 8px; }
    .support-thread-actions .support-button { padding: 8px; }
    .support-messages { padding: 16px; }
    .support-message { max-width: 96%; }
}
@media (max-width: 767px) {
    .sg-support-main { margin-left: 0; padding: 80px 16px calc(104px + env(safe-area-inset-bottom)); }
    .support-hero { gap: 16px; margin-bottom: 16px; }
    .support-title-group { align-items: start; gap: 8px; }
    .support-title-group p { font-size: 14px; }
    .support-mobile-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 16px; }
    .support-mobile-tabs .support-button { flex: 1; flex-shrink: 0; white-space: nowrap; }
    .support-workspace, .support-workspace[data-staff="true"] { display: flex; flex-direction: column; height: min(760px, calc(100dvh - 352px)); min-height: 448px; }
    .support-workspace > * { flex: 1 1 0; }
    .support-thread, .support-context { display: none; }
    .sg-support-main[data-view="thread"] .support-inbox, .sg-support-main[data-view="context"] .support-inbox { display: none; }
    .sg-support-main[data-view="thread"] .support-thread { display: flex; }
    .sg-support-main[data-view="context"] .support-context { display: flex; }
    .support-thread-header, .support-composer { padding: 16px; }
    .support-thread-header { gap: 8px; }
    .support-thread-title { flex-basis: 100%; }
    .support-thread-title h2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
    .support-thread-actions { flex: 1 1 100%; }
    .support-thread-actions .support-button { flex: 1 1 auto; }
    .support-messages { min-height: 64px; }
    .support-composer { flex-shrink: 1; min-height: 160px; max-height: 60%; overflow-y: auto; }
    .support-composer textarea { height: 72px; }
    .support-message { max-width: 100%; }
    .support-guest-fields { grid-template-columns: 1fr; }
    .support-new-fields { max-height: 232px; min-height: 80px; flex-shrink: 1; overflow-y: auto; }
    .support-composer-actions { align-items: stretch; }
    .support-composer-actions > .support-button { margin-left: auto; }
    .support-composer-actions #support-file-label { padding: 8px; }
    .support-draft-attachments { max-height: 136px; }
}
@media (prefers-reduced-motion: reduce) {
    .sg-support-main *, .sg-support-main *::before, .sg-support-main *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The customer surface is a chat room. History occupies this same surface only
   when requested, while the human staff workspace retains its inbox columns. */
.sg-support-main[data-mode="customer"] .support-hero { max-width: 800px; margin-left: auto; margin-right: auto; }
.sg-support-main[data-mode="customer"] .support-workspace { display: block; position: relative; max-width: 800px; height: min(800px, calc(100dvh - 240px)); min-height: 480px; margin: 0 auto; }
.sg-support-main[data-mode="customer"] .support-thread { display: flex; height: 100%; }
.sg-support-main[data-mode="customer"] .support-inbox { display: flex; position: absolute; inset: 0; z-index: 20; }
.sg-support-main[data-mode="customer"] .support-thread-header { align-items: center; flex-wrap: nowrap; gap: 8px; }
.sg-support-main[data-mode="customer"] .support-thread-title { flex: 1 1 auto; }
.sg-support-main[data-mode="customer"] .support-thread-title h2 { font-size: 16px; line-height: 24px; }
.sg-support-main[data-mode="customer"] .support-thread-meta { margin-top: 0; }
.sg-support-main[data-mode="customer"] .support-thread-actions { flex: 0 0 auto; gap: 8px; flex-wrap: nowrap; }
.support-chat-toolbar .support-button { padding: 8px; width: 44px; flex: 0 0 44px; }
.support-chat-toolbar a.support-button { width: auto; flex-basis: auto; }
.support-chat-agent-avatar, .support-message-avatar { display: inline-grid; place-items: center; border-radius: 50%; background: rgb(var(--color-primary-soft)); color: rgb(var(--color-ink)); flex-shrink: 0; }
.support-chat-agent-avatar { width: 40px; height: 40px; font-size: 24px; }
.support-message-avatar { width: 32px; height: 32px; font-size: 18px; margin-top: 24px; }
.support-chat-agent-avatar img, .support-message-avatar img, .support-customer-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sg-support-main[data-mode="staff"] .support-message[data-author="agent"], .sg-support-main[data-mode="staff"] .support-message[data-author="staff"] { display: flex; align-items: flex-start; gap: 8px; }
.sg-support-main[data-mode="staff"] .support-message-content { flex: 1; min-width: 0; }
.sg-support-main[data-mode="customer"] .support-message { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; }
.sg-support-main[data-mode="customer"] .support-message[data-author="customer"] { flex-direction: row-reverse; }
.sg-support-main[data-mode="customer"] .support-message-content { max-width: min(88%, 560px); min-width: 0; }
.sg-support-main[data-mode="customer"] .support-message-bubble { padding: 8px 16px; border-radius: 16px; }
.sg-support-main[data-mode="customer"] .support-message[data-author="customer"] .support-message-bubble { border-top-right-radius: 8px; }
.sg-support-main[data-mode="customer"] .support-message:not([data-author="customer"]) .support-message-bubble { border-top-left-radius: 8px; }
.sg-support-main[data-mode="customer"] .support-message[data-author="customer"] .support-message-label { justify-content: flex-end; }
.sg-support-main[data-mode="customer"] .support-message-time { font-size: 11px; }
.support-chat-welcome { max-width: 320px; margin: auto; padding: 32px 16px; text-align: center; color: rgb(var(--color-ink-muted)); }
.support-chat-welcome .support-chat-agent-avatar { width: 64px; height: 64px; font-size: 32px; margin-bottom: 16px; }
.support-chat-welcome h3 { color: rgb(var(--color-ink)); font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
.support-chat-welcome p { font-size: 14px; line-height: 1.6; }
.sg-support-main[data-mode="customer"] .support-composer { flex-shrink: 1; min-height: 144px; max-height: 55%; overflow-y: auto; }
.sg-support-main[data-mode="customer"] .support-composer textarea { height: 48px; min-height: 44px; max-height: 120px; resize: none; }
.sg-support-main[data-mode="customer"] .support-composer .support-primary { min-width: 88px; }
.sg-support-main[data-mode="customer"] .support-composer-help { font-size: 11px; line-height: 1.5; }
.sg-support-main[data-mode="customer"] .support-new-fields { padding: 0; min-height: 44px; max-height: 192px; border: 0; overflow-y: auto; }
.support-guest-contact summary { cursor: pointer; min-height: 44px; padding: 8px 16px; font-size: 12px; line-height: 28px; color: rgb(var(--color-ink-muted)); }
.support-guest-contact .support-guest-fields { padding: 8px 16px 16px; gap: 8px; }
.sg-support-main[data-mode="customer"] .support-notice { max-width: 800px; margin-left: auto; margin-right: auto; padding: 8px 16px; font-size: 12px; margin-bottom: 8px; }
.sg-support-main[data-mode="customer"] #support-session-notice { background: transparent; border: 0; }
.support-embedded-body { margin: 0; padding: 0; overflow: hidden; height: 100dvh; }
.support-embedded-body #wrapper { height: 100%; min-height: 0; }
.sg-support-main[data-embedded="true"] { margin: 0; padding: 0; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.sg-support-main[data-embedded="true"] .support-workspace { flex: 1 1 0; width: 100%; min-height: 0; max-height: none; height: auto; margin: 0; }
.sg-support-main[data-embedded="true"] .support-thread, .sg-support-main[data-embedded="true"] .support-inbox { border: 0; border-radius: 0; box-shadow: none; }
.sg-support-main[data-embedded="true"] .support-notice { flex-shrink: 0; width: 100%; margin: 0; border-radius: 0; }
.sg-support-main[data-embedded="true"] .support-thread-header { padding: 8px 16px; }
.sg-support-main[data-embedded="true"] .support-messages { padding: 16px; min-height: 64px; }
.sg-support-main[data-embedded="true"] .support-composer { padding: 8px 16px; }
.sg-support-main[data-embedded="true"] .support-toast { bottom: 16px; font-size: 12px; }
@media (max-width: 767px) {
    .sg-support-main[data-mode="customer"] .support-workspace { height: min(760px, calc(100dvh - 352px)); min-height: 448px; }
    .sg-support-main[data-mode="customer"] .support-thread-title { flex-basis: auto; }
    .sg-support-main[data-mode="customer"] .support-thread-actions .support-button { flex: 0 0 44px; }
    .sg-support-main[data-mode="customer"] .support-thread-actions a.support-button { flex-basis: auto; }
    .sg-support-main[data-mode="customer"] .support-message-content { max-width: calc(100% - 40px); }
    .sg-support-main[data-embedded="true"] .support-workspace { min-height: 0; height: auto; }
    .sg-support-main[data-embedded="true"] .support-guest-fields { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
    .sg-support-main[data-mode="customer"] .support-thread-header { flex-wrap: wrap; }
    .sg-support-main[data-mode="customer"] .support-thread-title { flex-basis: calc(100% - 48px); }
    .sg-support-main[data-mode="customer"] .support-thread-actions { flex: 1 0 100%; justify-content: flex-end; }
}