/* Shared support surfaces use the site's theme, with no phone-demo selectors. */
.support-chat, .support-dialog, .support-admin-page { --support-surface: var(--surface, #fff); --support-ink: var(--ink, #202326); --support-muted: var(--muted, #687076); --support-border: var(--border, #dce0e1); --support-soft: var(--surface-soft, #f5f6f6); --support-brand: var(--brand, #fc4505); color: var(--support-ink); font: 14px/1.5 var(--font-body, system-ui, sans-serif); }
.support-chat *, .support-dialog *, .support-admin-page * { box-sizing: border-box; }
.support-chat [hidden], .support-dialog [hidden], .support-admin-page [hidden], .support-launcher [hidden] { display: none !important; }
.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-chat button, .support-dialog button, .support-admin-page button, .support-contact input, .support-admin-page select { font: inherit; }
.support-chat button, .support-dialog button, .support-admin-page button { cursor: pointer; }
.support-chat button:disabled, .support-dialog button:disabled { cursor: wait; opacity: .65; }
.support-chat :focus-visible, .support-dialog :focus-visible, .support-launcher:focus-visible, .support-admin-page :focus-visible { outline: 3px solid var(--support-brand, #fc4505); outline-offset: 3px; }
.support-launcher.support-button { position: fixed; z-index: 120; inset: auto 20px 20px auto; margin: 0; width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--border, #dce0e1); border-radius: 16px; background: var(--ink, #202326); color: #fff; box-shadow: 0 8px 28px #20232626; cursor: pointer; }
.support-launcher.support-button::after { display: none; }
.support-launcher svg { width: 26px; height: 26px; }
.support-unread { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px; border: 2px solid #fff; border-radius: 20px; background: var(--brand, #fc4505); color: #fff; font: 700 11px/18px system-ui, sans-serif; }
.support-dialog { z-index: 130; position: fixed; inset: auto 20px 88px auto; margin: 0; padding: 0; width: min(410px, calc(100vw - 32px)); max-width: none; height: min(660px, calc(var(--support-viewport-height, 100dvh) - 110px)); max-height: none; border: 1px solid var(--support-border); border-radius: 20px; background: var(--support-surface); box-shadow: 0 20px 80px #20232633; overflow: hidden; }
.support-dialog[open] { display: flex; flex-direction: column; }
.support-dialog::backdrop { background: #20232612; }
.support-header { display: flex; align-items: center; flex: 0 0 auto; gap: 12px; padding: 18px 20px; background: var(--surface, #fff); border-bottom: 1px solid var(--border, #dce0e1); }
.support-header h2 { margin: 0; color: var(--ink, #202326); font: 700 17px/1.3 var(--font-body, system-ui, sans-serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
.support-header p { margin: 3px 0 0; color: var(--muted, #687076); font-size: 12px; }
.support-header .support-icon-button { margin-left: auto; flex-shrink: 0; }
.support-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--brand, #fc4505); background: var(--brand-soft, #fff1e9); }
.support-chat { padding: 0; margin: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; background: var(--support-surface); }
.support-history { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }
.support-log { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px; scroll-behavior: auto; }
.support-log:empty::after { display: block; padding: 24px 14px; content: "Welcome to HiveReach Support. Send a message or screenshot to start a conversation."; color: var(--support-muted); text-align: center; }
.support-older { display: block; align-self: center; flex-shrink: 0; margin: 8px auto 0; padding: 8px 12px; background: transparent; border: 0; border-radius: 8px; color: var(--support-muted); font-size: 12px; text-decoration: underline; }
.support-message { display: flex; margin: 0 0 12px; }
.support-message--user { justify-content: flex-end; }
.support-message__bubble { max-width: 90%; padding: 11px 14px; border: 1px solid var(--support-border); border-radius: 14px 14px 14px 3px; background: var(--support-soft); overflow-wrap: anywhere; min-width: 0; }
.support-message--user .support-message__bubble { border-color: var(--brand-line, #fbd3bc); border-radius: 14px 14px 3px 14px; background: var(--brand-soft, #fff1e9); }
.support-message__sender { display: block; font-size: 12px; margin-bottom: 5px; }
.support-message__body { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.support-message__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; font-size: 10px; color: var(--support-muted); }
.support-message__attachment { display: grid; gap: 5px; color: inherit; font-size: 11px; margin-top: 7px; }
.support-message__attachment img { display: block; max-width: 100%; max-height: 230px; object-fit: contain; border-radius: 8px; }
.support-composer { flex: 0 0 auto; padding: 12px 16px 10px; border-top: 1px solid var(--support-border); }
.support-composer-row { display: flex; gap: 8px; align-items: end; }
.support-composer textarea { flex: 1; min-width: 0; max-height: 140px; padding: 11px 12px; border: 1px solid var(--support-border); border-radius: 11px; background: var(--support-surface); color: var(--support-ink); resize: none; font: inherit; }
.support-icon-button { display: inline-grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink, #202326); text-decoration: none; }
.support-icon-button:hover { background: var(--surface-soft, #f5f6f6); }
.support-attach { cursor: pointer; }
.support-composer:has(input[type=file]:focus-visible) .support-attach { outline: 3px solid var(--support-brand); outline-offset: 2px; }
.support-send { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 43px; padding: 10px 12px; border: 0; border-radius: 11px; color: #fff; background: var(--support-brand); font-weight: 650 !important; }
.support-send svg { width: 19px; height: 19px; }
.support-help, .support-status { margin: 7px 0 0; font-size: 10px; color: var(--support-muted); }
.support-status:empty, .support-contact [role=status]:empty { display: none; }
.support-error { margin: 8px 0 0; font-size: 12px; color: var(--error, #b42318); overflow-wrap: anywhere; }
.support-preview { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; font-size: 11px; }
.support-preview > img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.support-preview > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.support-contact { flex: 0 0 auto; padding: 11px 16px 14px; background: var(--support-soft); border-top: 1px solid var(--support-border); font-size: 11px; }
.support-contact label { display: block; margin-bottom: 6px; font-weight: 600; }
.support-contact label span { font-weight: 400; }
.support-contact-row { display: flex; gap: 6px; }
.support-contact-row input { min-width: 0; width: 100%; padding: 8px; border: 1px solid var(--support-border); border-radius: 7px; background: var(--support-surface); color: var(--support-ink); }
.support-contact-row button { padding: 6px 8px; border: 1px solid var(--support-border); border-radius: 7px; background: var(--support-surface); color: var(--support-ink); }
.support-contact p { margin: 6px 0 0; color: var(--support-muted); font-size: 10px; }
.support-dashboard { display: flex; flex-direction: column; height: min(760px, calc(100dvh - 245px)); min-height: 440px; border: 1px solid var(--border, #dce0e1); border-radius: 18px; overflow: hidden; }
.support-dashboard .support-log { padding: 24px; }
.support-admin-page { margin: 0; background: var(--canvas, #f5f6f6); }
.support-admin-shell { max-width: 1500px; margin: 0 auto; padding: 28px; }
.support-admin-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.support-admin-top h1 { margin: 14px 0 4px; font-size: 32px; letter-spacing: -.03em; }
.support-admin-top p { margin: 0; color: var(--support-muted); }
.support-admin-top nav { display: flex; gap: 20px; }
.support-admin-top a { color: var(--ink, #202326); }
.support-admin-top .brand-lockup { max-width: 200px; }
.support-admin-top .brand-lockup img, .support-admin-top .brand-lockup svg { width: 42px; height: 42px; flex-basis: 42px; }
.support-admin-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 20px; height: calc(100dvh - 210px); min-height: 500px; }
.support-queue, .support-admin-conversation { background: var(--surface, #fff); border: 1px solid var(--border, #dce0e1); border-radius: 16px; min-width: 0; overflow: hidden; }
.support-queue { display: flex; flex-direction: column; padding: 16px; }
.support-queue > label { font-weight: 700; margin-bottom: 8px; }
.support-queue select { width: 100%; background: var(--surface, #fff); color: var(--ink, #202326); border: 1px solid var(--border, #dce0e1); padding: 10px; border-radius: 9px; }
.support-queue-list { overflow-y: auto; margin-top: 14px; }
.support-queue-item { display: grid; gap: 6px; width: 100%; margin-bottom: 8px; border: 1px solid var(--border, #dce0e1); border-radius: 10px; background: var(--surface, #fff); color: var(--ink, #202326); padding: 13px; text-align: left; overflow-wrap: anywhere; }
.support-queue-item[aria-pressed=true] { border-color: var(--brand, #fc4505); background: var(--brand-soft, #fff1e9); }
.support-queue-item time { color: var(--muted, #687076); font-size: 11px; }
.support-needs-reply { color: var(--brand-ink, #b43300); font-size: 11px; font-weight: 700; }
.support-answered { color: var(--muted, #687076); font-size: 11px; }
.support-admin-conversation, .support-admin-chat-host { display: flex; flex-direction: column; min-height: 0; }
.support-admin-chat-host { flex: 1; }
.support-empty { padding: 20px; color: var(--muted, #687076); }
@media (max-width: 600px) {
  .support-launcher.support-button { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .support-dialog { inset: var(--support-viewport-top, 0px) 0 auto; width: 100%; height: var(--support-viewport-height, 100dvh); border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .support-header { padding: 12px 16px; }
  .support-composer { padding: 10px 12px; }
  .support-composer textarea, .support-contact input { font-size: 16px; }
  .support-send span { display: none; }
  .support-log { padding: 14px; }
  .support-contact { padding: 8px 12px; }
  .support-contact p { font-size: 9px; }
  .support-dashboard { min-height: 480px; }
  .support-admin-shell { padding: 16px; }
  .support-admin-top { align-items: start; }
  .support-admin-top nav { flex-direction: column; gap: 8px; }
  .support-admin-layout { grid-template-columns: 1fr; height: auto; }
  .support-queue { max-height: 260px; }
  .support-admin-conversation { height: 650px; max-height: 95dvh; }
}