/* Support uses the portal's shared palette and controls. Domain state and handlers stay in app.js. */
#support-inbox-panel .support-chat-stage-navigation { flex-wrap: nowrap; }
#support-inbox-panel .support-chat-stage-tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; }
#support-inbox-panel .support-chat-stage-tabs button { white-space: nowrap; }
#support-inbox-panel .support-chat-search-controls { padding-top: 12px; }
#support-inbox-panel .support-chat-ai-indicator { display: inline-flex; flex: 0 0 26px; align-self: end; align-items: center; justify-content: center; width: 26px; height: 40px; color: var(--support-muted); }
#support-inbox-panel .support-chat-ai-status { display: inline-flex; }
#support-inbox-panel .support-chat-ai-status svg { width: 18px; height: 18px; }
#support-inbox-panel .support-chat-ai-status.is-ready { color: var(--support-accent); }
#support-inbox-panel .support-chat-compose-row:has(.support-chat-ai-indicator) { grid-template-columns: 40px 40px minmax(0, 1fr) 26px 44px; }
@media (max-width: 600px) {
  #support-inbox-panel .support-chat-compose-row:has(.support-chat-ai-indicator) { grid-template-columns: 40px 40px minmax(0, 1fr) 26px 44px; gap: 4px; }
  #support-inbox-panel .support-chat-compose-row:has(.support-chat-ai-indicator) .support-chat-ai-indicator { grid-column: 4; }
  #support-inbox-panel .support-chat-compose-row:has(.support-chat-ai-indicator) .support-chat-compose-send { grid-column: 5; }
}
#support-inbox-panel .support-chat-ai-status.is-running svg { animation: support-chat-ai-spin 1s linear infinite; }
@keyframes support-chat-ai-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #support-inbox-panel .support-chat-ai-status.is-running svg { animation: none; } }
#support-inbox-panel, #app-shell dialog[id^="support-"] {
  --support-surface: var(--portal-surface); --support-soft: var(--portal-soft);
  --support-text: var(--portal-text); --support-muted: var(--portal-muted);
  --support-line: var(--portal-line); --support-accent: var(--portal-accent);
  color: var(--support-text); background: var(--support-surface); font-size: 14px;
}
#support-inbox-panel { min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
#support-inbox-panel [hidden], #app-shell dialog[id^="support-"] [hidden] { display: none !important; }
#support-inbox-panel :is(section, aside, form, fieldset, .support-chat-detail-heading > div) { min-width: 0; }
#support-inbox-panel :is(h2, h3, h4, .support-inbox-product strong, .support-chat-list-copy strong, .support-chat-sidebar-head, .support-inbox-record-message) { color: var(--support-text); }
#support-inbox-panel :is(.support-inbox-summary, .support-feedback-heading p, .support-inbox-product span, .support-chat-product-card span, .support-chat-list-copy > span, .support-chat-preview, .support-chat-list-item time, .support-chat-detail-heading p, .support-chat-compose-footer, .support-chat-workspace-note) { color: var(--support-muted); }
#support-inbox-panel :is(h2, h3, h4, p, label, summary) { overflow-wrap: anywhere; }
#support-inbox-panel :is(.support-inbox-area-bar, .support-inbox-tabs, .support-inbox-areas, .support-chat-stage-area, .support-chat-sidebar, .support-chat-sidebar-head, .support-chat-detail-heading, .support-chat-product-card, .support-chat-compose, .support-chat-workspace-note) { border-color: var(--support-line); }
#support-inbox-panel .support-inbox-area-bar { gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
#support-inbox-panel .support-inbox-sync-status { margin: 0; padding-left: 5px; color: var(--support-muted); }
#support-inbox-panel :is(.support-inbox-areas, .support-inbox-tabs, .support-inbox-toolbar, .support-inbox-answer-status, .support-chat-queue-filters, .support-chat-stage-navigation) { min-width: 0; gap: 8px; flex-wrap: wrap; }
#support-inbox-panel :is(.support-inbox-areas, .support-inbox-tabs) button { min-height: 40px; padding: 8px 10px; font-size: 13px; color: var(--support-muted); background: transparent; border-color: transparent; border-radius: 0; }
#support-inbox-panel :is(.support-inbox-areas, .support-inbox-tabs) button[aria-selected="true"] { color: var(--support-accent); border-bottom: 2px solid var(--support-accent); }
#support-inbox-panel :is(.support-inbox-tabs, .support-inbox-areas) button::after { display: none; }
#support-inbox-panel :is(.support-inbox-tabs span, .support-inbox-areas span, .support-inbox-answer-status span, .support-chat-sidebar-head > div > span, .support-chat-stage-tabs span, .support-chat-queue-filters span) { color: var(--support-accent); background: var(--support-soft); }
#support-inbox-panel .support-inbox-answer-status { padding: 4px; border: 1px solid var(--support-line); border-radius: 6px; background: var(--support-soft); }
#support-inbox-panel :is(.support-inbox-answer-status button, .support-chat-queue-filters button, .support-chat-more-stages, .support-chat-topic-filters button, .support-chat-group-toggle) { min-height: 36px; border: 1px solid transparent; border-radius: 6px; color: var(--support-muted); background: transparent; box-shadow: none; }
#support-inbox-panel :is(.support-inbox-answer-status button, .support-chat-queue-filters button, .support-chat-topic-filters button, .support-chat-group-toggle)[aria-pressed="true"] { color: var(--support-accent); border-color: var(--support-accent); background: var(--support-surface); }
#support-inbox-panel :is(.button, .support-inbox-sort select, .support-chat-search-toggle, .support-chat-filter-toggle) { min-height: 40px; border-radius: 6px; }
#support-inbox-panel :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-width: 0; max-width: 100%; border-color: var(--support-line); border-radius: 6px; color: var(--support-text); background: var(--support-surface); box-shadow: none; }
#support-inbox-panel :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 40px; }
#support-inbox-panel .support-inbox-filter-panel { border-color: var(--support-line); border-radius: 6px; background: var(--support-soft); }
#support-inbox-panel .support-inbox-filter-panel label { color: var(--support-muted); }
#support-inbox-panel .support-inbox-filter-panel label:has(select) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
#support-inbox-panel .support-inbox-toolbar .table-search-field { flex: 1 1 320px; width: auto; min-width: 0; max-width: none; }
#support-inbox-panel .support-inbox-toolbar .table-search-field input { width: 100%; }
#support-inbox-panel .support-inbox-filter-toggle.is-active { color: var(--support-accent); border-color: var(--support-accent); background: var(--support-soft); }
#support-inbox-panel .support-inbox-list.is-support-record-table { border: 1px solid var(--support-line); border-radius: 6px; box-shadow: none; }
#support-inbox-panel :is(.support-inbox-record-head, .support-inbox-record) { border-color: var(--support-line); background: var(--support-surface); }
#support-inbox-panel .support-inbox-record-head { color: var(--support-muted); background: var(--support-soft); }
#support-inbox-panel .support-inbox-record:hover { background: var(--support-soft); }
#support-inbox-panel .support-inbox-record-message p span, #support-inbox-panel .support-inbox-record-rating time { color: var(--support-muted); }
#support-inbox-panel .support-inbox-record-kind { color: var(--support-accent); background: var(--support-soft); }
#support-inbox-panel .support-inbox-product-photo { border-radius: 6px; background: var(--support-soft); border-color: var(--support-line); }
#support-inbox-panel .support-chat-workspace { border: 1px solid var(--support-line); border-radius: 6px; box-shadow: none; background: var(--support-surface); }
#support-inbox-panel :is(.support-chat-sidebar, .support-chat-sidebar-head, .support-chat-detail-heading, .support-chat-product-card, .support-chat-compose) { background: var(--support-surface); }
#support-inbox-panel :is(.support-chat-workspace-detail, .support-chat-workspace-note) { background: var(--support-soft); }
#support-inbox-panel .support-chat-sidebar-head { padding: 12px; gap: 8px; }
#support-inbox-panel .support-chat-sidebar-head > div:first-child > strong { font-size: 18px; }
#support-inbox-panel :is(.support-chat-stage-tabs, .support-chat-more-stage-tabs) button { min-height: 40px; color: var(--support-muted); border-color: transparent; background: transparent; }
#support-inbox-panel :is(.support-chat-stage-tabs, .support-chat-more-stage-tabs) button[aria-selected="true"] { color: var(--support-accent); border-bottom-color: var(--support-accent); }
#support-inbox-panel .support-chat-stage-tabs button[aria-selected="true"]::after { background: var(--support-accent); }
#support-inbox-panel :is(.support-chat-search-controls, .support-chat-more-stage-tabs, .support-chat-advanced-filters, .support-chat-workflow-details-body, .support-chat-suggestions) { color: var(--support-text); background: var(--support-surface); border-color: var(--support-line); }
#support-inbox-panel :is(.support-chat-filter-toggle, .support-chat-workflow-details > summary, .support-chat-order-panel-trigger, .support-chat-topic-quality-button) { color: var(--support-text); background: var(--support-surface); border: 1px solid var(--support-line); border-radius: 6px; }
#support-inbox-panel :is(.support-chat-product-placeholder, .support-chat-photo-placeholder) { color: var(--support-muted); background: var(--support-soft); border-radius: 6px; }
#support-inbox-panel :is(.support-chat-product-meta, .support-chat-product-meta span, .support-chat-dialog-dates, .support-chat-dialog-dates span, .support-chat-freshness, .support-chat-freshness b, .support-chat-freshness time, .support-chat-compose-footer small) { color: var(--support-muted); }
#support-inbox-panel .support-chat-list-status i { background: var(--support-accent); }
html[data-theme="dark"] #support-inbox-panel .support-chat-topic-badge { color: var(--support-text); background: var(--support-soft); border: 1px solid var(--support-line); }
#support-inbox-panel .support-chat-list-item { border-color: var(--support-line); background: var(--support-surface); color: var(--support-text); }
#support-inbox-panel .support-chat-list-item:hover { background: var(--support-soft); }
#support-inbox-panel .support-chat-list-item.is-active { background: var(--support-soft); box-shadow: inset 3px 0 var(--support-accent); }
#support-inbox-panel :is(.support-chat-list-status, .support-chat-dialog-status)::before { background: var(--support-accent); }
#support-inbox-panel .support-chat-product-card strong { color: var(--support-accent); }
#support-inbox-panel :is(.support-chat-detail-heading, .support-chat-product-card) { padding: 12px 16px; }
#support-inbox-panel .support-chat-conversation { padding: 16px; background: var(--support-soft); }
#support-inbox-panel .support-chat-workspace-message:not(.is-photo-only) { border-radius: 6px; color: var(--support-text); background: var(--support-surface); border: 1px solid var(--support-line); }
#support-inbox-panel .support-chat-workspace-message.is-seller { border-left: 3px solid var(--support-accent); }
#support-inbox-panel .support-chat-workspace-message :is(.support-chat-message-author, time) { color: var(--support-muted); }
#support-inbox-panel .support-chat-workspace-message.is-failed { border-color: var(--portal-danger); }
#support-inbox-panel .support-chat-workspace-message.is-operator_review_required { border-color: var(--portal-warning); border-width: 2px; }
#support-inbox-panel .support-chat-compose-icon { border: 1px solid var(--support-line); border-radius: 6px; color: var(--support-text); background: var(--support-surface); }
#support-inbox-panel .support-chat-compose-icon.is-agent { color: var(--support-accent); background: var(--support-soft); }
#support-inbox-panel .support-chat-compose-send:not(:disabled) { color: var(--portal-on-primary); background: var(--portal-primary); border-radius: 6px; }
#support-inbox-panel .support-chat-compose-send:disabled { color: var(--support-muted); background: var(--support-soft); border-radius: 6px; }
#support-inbox-panel :is(button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--support-accent); outline-offset: 2px; }
#support-inbox-panel .support-chat-order-panel-drawer { color: var(--support-text); background: var(--support-surface); border-radius: 6px 0 0 6px; box-shadow: none; }
#support-inbox-panel .support-chat-order-panel-drawer > header { padding: 16px 68px 16px 16px; }
#support-inbox-panel .support-chat-order-panel-drawer h3 { font-size: 22px; }
#support-inbox-panel .support-chat-order-panel-close { left: auto; top: 12px; right: 12px; width: 40px; height: 40px; color: var(--support-text); background: var(--support-soft); border-radius: 6px; box-shadow: none; }
#support-inbox-panel .support-chat-order-panel-body { padding: 16px; }
#support-inbox-panel :is(.support-chat-order-panel-tabs, .support-chat-order-panel-empty) { color: var(--support-muted); background: var(--support-soft); border-radius: 6px; }
#support-inbox-panel .support-chat-order-panel-tabs { margin: 0 16px; }
#support-inbox-panel .support-chat-order-panel-tabs button { color: var(--support-muted); border-radius: 6px; }
#support-inbox-panel .support-chat-order-panel-tabs button.is-active { color: var(--support-accent); background: var(--support-surface); box-shadow: none; }
#support-inbox-panel :is(.support-chat-order-panel-empty strong, .support-chat-order-panel-product strong, .support-chat-order-panel-facts dd) { color: var(--support-text); }
#app-shell dialog[id^="support-"] { border: 1px solid var(--support-line); border-radius: 6px; box-shadow: none; }
#app-shell dialog[id^="support-"] :is(h2, h3, h4, p, label, strong, small, span:not(.is-active), summary) { color: var(--support-text); overflow-wrap: anywhere; }
#app-shell dialog[id^="support-"] :is(header, footer, .support-record-drawer-card, .support-record-drawer-compose, .support-review-compose) { background: var(--support-surface); border-color: var(--support-line); box-shadow: none; }
#app-shell dialog[id^="support-"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .button-secondary) { color: var(--support-text); background: var(--support-surface); border-color: var(--support-line); border-radius: 6px; }
#app-shell dialog[id^="support-"] .button-primary { color: var(--portal-on-primary); background: var(--portal-primary); border-color: var(--portal-primary); border-radius: 6px; }
#app-shell #support-record-drawer { width: min(760px, 100%); max-width: 100%; }
#app-shell #support-record-drawer :is(.support-record-drawer-head, .support-record-drawer-compose) { padding: 16px; }
#app-shell #support-record-drawer .support-record-drawer-card { margin: 16px; padding: 16px; border: 1px solid var(--support-line); border-radius: 6px; }
#app-shell #support-record-drawer .support-record-drawer-text { font-size: 15px; }
#app-shell #support-record-drawer .support-record-answer { background: var(--support-soft); border-radius: 6px; }
@media (max-width: 760px) {
  #support-inbox-panel .support-inbox-area-bar { align-items: flex-start; }
  #support-inbox-panel .support-inbox-toolbar > * { min-width: 0; max-width: 100%; }
  #support-inbox-panel .support-inbox-toolbar .table-search-field { flex-basis: 100%; width: 100%; }
  #support-inbox-panel .support-inbox-areas { width: 100%; }
  #support-inbox-panel :is(.support-chat-detail-heading, .support-chat-product-card) { padding: 10px 12px; }
  #support-inbox-panel .support-chat-detail-heading { position: relative; }
  #support-inbox-panel .support-chat-workflow-details { position: static; }
  #support-inbox-panel .support-chat-workflow-details-body { left: 12px; right: 12px; width: auto; }
  #support-inbox-panel .support-chat-workspace-message:not(.has-photo) { max-width: 100%; }
  #app-shell #support-record-drawer { width: 100%; border-radius: 0; }
}
#support-inbox-panel .support-chat-dialog-dates span b { color: var(--support-text); }
#support-inbox-panel .support-chat-product-photo.is-placeholder { color: var(--support-muted); background: var(--support-soft); border-radius: 6px; }
/* Keep the conversation as the primary scroll region; metadata wraps, not scrolls. */
#support-inbox-panel :is(.support-chat-detail-heading, .support-chat-product-card) { max-height:none; overflow:visible; min-width:0; }
#support-inbox-panel .support-chat-product-card { flex-wrap:wrap; }
#support-inbox-panel .support-chat-product-card > * { min-width:0; max-width:100%; overflow-wrap:anywhere; }
#support-inbox-panel .support-chat-product-meta { white-space:normal; overflow-wrap:anywhere; }
@media(max-width:760px) {
 #support-inbox-panel .support-chat-detail-heading { flex-wrap:wrap; gap:6px; padding:8px 12px; }
 #support-inbox-panel .support-chat-detail-heading h3 { font-size:16px; }
 #support-inbox-panel .support-chat-detail-actions { width:100%; justify-content:space-between; }
 #support-inbox-panel .support-chat-product-card { padding:8px 12px; gap:6px; }

 #support-inbox-panel .support-chat-product-card strong { font-size:13px; }

}
#app-shell #support-record-drawer .support-inbox-status { color: var(--support-accent); background: var(--support-soft); }
#app-shell #support-record-drawer .support-inbox-status.is-muted { color: var(--support-muted); }
#app-shell #support-record-drawer .support-inbox-rating span { color: var(--support-muted); }
#app-shell #support-record-drawer .support-inbox-rating .is-active { color: var(--portal-rating); }
#support-inbox-panel .support-chat-day span { color: var(--support-muted); background: var(--support-surface); border: 1px solid var(--support-line); }

#support-inbox-panel .support-chat-product-disclosure { min-width:0; background:var(--support-surface); border-bottom:1px solid var(--support-line); }
#support-inbox-panel .support-chat-product-disclosure > summary { cursor:pointer; padding:8px 12px 8px 36px; color:var(--support-text); }
#support-inbox-panel .support-chat-product-disclosure[open] { max-height:35dvh; overflow:auto; }
/* Short landscape windows must scroll the heading instead of painting its
   controls over the following product disclosure. */
@media (max-height:600px) {
 #support-inbox-panel .support-chat-detail-heading {
  max-height:calc(var(--support-chat-viewport-height, 100dvh) * .23);
  overflow:auto;
 }
}
#support-inbox-panel .support-inbox-areas [data-support-count] { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; margin-left: 4px; border-radius: 999px; padding: 2px 6px; font-size: .56em; vertical-align: middle; }

/* Keep the native scrollbar's geometry stable; reveal only its paint on scroll. */
#support-inbox-panel .support-chat-stage-tabs::-webkit-scrollbar { height: 6px; }
#support-inbox-panel .support-chat-stage-tabs::-webkit-scrollbar-track,
#support-inbox-panel .support-chat-stage-tabs::-webkit-scrollbar-thumb { background: transparent; }
#support-inbox-panel .support-chat-stage-tabs::-webkit-scrollbar-button { display: none; }
#support-inbox-panel .support-chat-stage-tabs.is-scrolling { scrollbar-color: var(--support-muted) transparent; }
#support-inbox-panel .support-chat-stage-tabs.is-scrolling::-webkit-scrollbar-thumb { background: var(--support-muted); border-radius: 999px; }