.sg-chat-widget { position: fixed; right: 24px; bottom: 24px; z-index: 1010; font-family: inherit; }
.sg-chat-widget--creator-inquiry .sg-chat-fab { max-width: calc(100vw - 48px); min-height: 56px; height: auto; padding-top: 16px; padding-bottom: 16px; }
.sg-chat-widget--creator-inquiry .sg-chat-fab > svg { flex-shrink: 0; }
.sg-chat-widget--creator-inquiry .sg-chat-fab > span:not(.sg-chat-unread) { overflow-wrap: anywhere; text-align: start; }
.sg-chat-widget [hidden] { display: none !important; }
.sg-chat-fab { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 24px; border: 1px solid rgb(var(--color-primary) / .24); border-radius: 999px; background: rgb(var(--color-brand-cta-start)); color: rgb(var(--color-brand-cta-foreground)); font-size: 14px; font-weight: 700; box-shadow: 0 8px 24px rgb(var(--color-primary) / .24); cursor: pointer; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.sg-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgb(var(--color-primary) / .32); }
.sg-chat-fab svg { width: 24px; height: 24px; }
.sg-chat-fab:focus-visible, .sg-chat-tool:focus-visible { outline: 2px solid rgb(var(--color-primary)); outline-offset: 4px; }
.sg-chat-unread { position: absolute; right: -4px; top: -4px; min-width: 24px; height: 24px; padding: 0 4px; border: 2px solid rgb(var(--color-surface-card)); border-radius: 999px; background: rgb(var(--color-brand-cta-start)); color: rgb(var(--color-brand-cta-foreground)); font-size: 11px; line-height: 20px; }
.sg-chat-float { display: flex; flex-direction: column; width: 400px; height: min(640px, calc(100dvh - 48px)); overflow: hidden; border: 1px solid rgb(var(--color-primary) / .18); border-radius: 24px; background: rgb(var(--color-bgbody)); color: rgb(var(--color-ink)); box-shadow: 0 16px 64px rgb(var(--color-ink) / .18); animation: sg-chat-enter .2s ease-out; }
.sg-chat-float-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 64px; padding: 8px 8px 8px 24px; border-bottom: 1px solid rgb(var(--color-primary) / .12); background: rgb(var(--color-surface-card)); }
.sg-chat-float-header > div { display: flex; flex-direction: column; gap: 2px; }
.sg-chat-float-header strong { font-size: 16px; line-height: 24px; }
.sg-chat-float-header span { color: rgb(var(--color-ink-muted)); font-size: 11px; line-height: 16px; }
.sg-chat-float-actions { display: flex; gap: 0; }
.sg-chat-tool { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: rgb(var(--color-ink-muted)); cursor: pointer; }
.sg-chat-tool:hover { background: rgb(var(--color-surface-hover)); color: rgb(var(--color-primary)); }
.sg-chat-tool svg { width: 20px; height: 20px; }
.sg-chat-float iframe { display: block; flex: 1; min-height: 0; width: 100%; border: 0; background: rgb(var(--color-bgbody)); }
@keyframes sg-chat-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) {
  .sg-chat-widget { right: 16px; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  .sg-chat-fab { width: 56px; padding: 0; }
  .sg-chat-fab > span:not(.sg-chat-unread) { display: none; }
  .sg-chat-widget--creator-inquiry { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .sg-chat-widget--creator-inquiry .sg-chat-fab { width: auto; max-width: calc(100vw - 32px); padding-left: 16px; padding-right: 16px; }
  .sg-chat-widget--creator-inquiry .sg-chat-fab > span:not(.sg-chat-unread) { display: inline; }
  .sg-chat-widget[data-open="true"] { right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--sg-chat-viewport-bottom, 0px)); }
  .sg-chat-float { width: min(400px, calc(100vw - 16px)); height: min(640px, calc(var(--sg-chat-viewport-height, 100dvh) - 16px - env(safe-area-inset-bottom, 0px))); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .sg-chat-float-header { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sg-chat-float { animation: none; } .sg-chat-fab { transition: none; } }