/* Scoped support UI: preserve storefront typography, layout and source theme. */
#emily-support {
  --support-bg: #fff;
  --support-text: #242424;
  --support-muted: #595959;
  --support-border: #d8d8d8;
  --support-accent: #dab68c;
  --support-soft: #f9f9f9;
  font-family: inherit;
  color: var(--support-text);
}
#emily-support *, #emily-support *::before, #emily-support *::after { box-sizing: border-box; }
#emily-support button, #emily-support textarea { font: inherit; font-size: 14px; }
#emily-support button { cursor: pointer; min-height: 44px; border: 1px solid var(--support-border); border-radius: 3px; background: var(--support-bg); color: var(--support-text); padding: 8px 12px; line-height: 1.4; }
#emily-support button:disabled { cursor: wait; opacity: .55; }
#emily-support [hidden] { display: none !important; }
#emily-support :focus-visible { outline: 2px solid var(--support-text); outline-offset: 3px; }
#emily-support .support-launcher { position: fixed; right: 20px; bottom: 80px; z-index: 9990; border-color: #000; background: #000; color: #fff; box-shadow: 0 3px 12px #0002; padding: 10px 18px; }
#emily-support .support-panel { position: fixed; inset: auto 20px 24px auto; width: 390px; max-width: calc(100vw - 32px); height: 570px; max-height: calc(var(--support-view-height, 100dvh) - 32px); margin: 0; padding: 0; border: 1px solid var(--support-border); border-top: 3px solid var(--support-accent); border-radius: 4px; background: var(--support-bg); color: var(--support-text); box-shadow: 0 8px 36px #0003; overflow: hidden; }
/* Theme reset rules must not override native dialog visibility. */
#emily-support .support-panel:not([open]) { display: none !important; }
#emily-support .support-panel[open] { display: flex !important; flex-direction: column; }
#emily-support .support-panel::backdrop { background: #0003; }
#emily-support .support-header { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 16px; border-bottom: 1px solid var(--support-border); flex-shrink: 0; }
#emily-support .support-header h2 { margin: 0 0 6px; font-size: 17px; line-height: 1.4; font-weight: 600; }
#emily-support .support-header p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--support-muted); }
#emily-support .support-close { flex-shrink: 0; width: 44px; padding: 0; font-size: 26px; line-height: 1; }
#emily-support .support-history { flex: 1; min-height: 60px; padding: 16px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
#emily-support .support-message { background: var(--support-soft); padding: 12px; margin: 0 0 12px; border-left: 2px solid var(--support-accent); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
#emily-support .support-message-user { border-color: var(--support-border); margin-left: 20px; }
#emily-support .support-message strong { display: block; font-size: 12px; margin-bottom: 4px; }
#emily-support .support-message p { margin: 0; white-space: pre-wrap; }
#emily-support .support-message ul { margin: 8px 0 0; padding-left: 18px; }
#emily-support .support-message a { color: var(--support-text); text-decoration: underline; display: inline-block; padding: 6px 0; }
#emily-support .support-state { padding: 0 16px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; flex-shrink: 0; }
#emily-support .support-state:empty { display: none; }
#emily-support .support-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px; flex-shrink: 0; }
#emily-support .support-actions button { font-size: 12px; }
#emily-support .support-reset { margin-left: auto; }
#emily-support .support-form { margin: 0; padding: 12px 16px 16px; border-top: 1px solid var(--support-border); flex-shrink: 0; }
#emily-support .support-form label { display: block; font-size: 13px; margin-bottom: 6px; }
#emily-support .support-compose { display: flex; gap: 8px; align-items: stretch; }
#emily-support textarea { display: block; min-width: 0; width: 100%; resize: none; border: 1px solid var(--support-border); border-radius: 3px; background: var(--support-bg); color: var(--support-text); padding: 8px; line-height: 1.5; max-height: 90px; }
#emily-support .support-send { background: #000; border-color: #000; color: #fff; }
#emily-support .support-note { font-size: 11px; line-height: 1.5; color: var(--support-muted); margin: 8px 0 0; }
@media (max-width: 600px) {
  #emily-support .support-launcher { right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  #emily-support .support-panel { top: calc(var(--support-view-top, 0px) + 8px); right: 8px; bottom: auto; left: 8px; width: auto; max-width: none; height: calc(var(--support-view-height, 100dvh) - 16px); max-height: none; }
  #emily-support textarea { font-size: 16px; }
  #emily-support .support-header { padding: 12px; }
  #emily-support .support-form { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
}
@media (max-height: 480px) {
  #emily-support .support-header p, #emily-support .support-note { display: none; }
  #emily-support .support-header, #emily-support .support-form { padding: 8px 12px; }
  #emily-support .support-actions { padding: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) { #emily-support *, #emily-support *::before, #emily-support *::after { scroll-behavior: auto; transition: none; animation: none; } }
#emily-support.hidden, #emily-support[hidden] { display: none !important; }
#emily-support .support-launcher { display: inline-flex; align-items: center; gap: 8px; }
#emily-support .support-launcher svg { flex-shrink: 0; }
#emily-support .support-suggestions { display: flex; gap: 6px; flex-wrap: wrap; max-height: 112px; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 8px; flex-shrink: 0; }
#emily-support .support-suggestions:empty { display: none; }
#emily-support .support-suggestions button { text-align: left; font-size: 12px; overflow-wrap: anywhere; max-width: 100%; }
#emily-support .support-handoff { display: block; color: var(--support-text); text-decoration: underline; padding: 8px 16px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; flex-shrink: 0; }
@media (max-height: 480px) { #emily-support .support-suggestions { max-height: 52px; } #emily-support .support-handoff { padding-block: 4px; } }
#emily-support .support-panel.support-compact .support-suggestions,
#emily-support .support-panel.support-compact .support-handoff,
#emily-support .support-panel.support-compact .support-header p,
#emily-support .support-panel.support-compact .support-note { display: none; }
#emily-support .support-panel.support-compact .support-header,
#emily-support .support-panel.support-compact .support-form { padding: 8px 12px; }
#emily-support .support-panel.support-compact .support-actions { padding: 4px 12px; }
#emily-support .support-panel.support-compact textarea { height: 48px; }
#emily-support .support-panel.support-compact .support-history { min-height: 32px; padding: 8px 12px; }