/* SereneGoods lead chatbot. Self-contained so it works on any page. */
.sgc {
  --sgc-night: #0c1410;
  --sgc-green: #24402f;
  --sgc-cream: #f4efe3;
  --sgc-paper: #f6f3ec;
  --sgc-ink: #17211b;
  --sgc-muted: #545b52;
  --sgc-line: #dcdfd3;
  --sgc-accent: #ec8c62;
  --sgc-gold: #e6c99d;
  --sgc-ease: cubic-bezier(.2, .7, .2, 1);
  font: 16px/1.5 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--sgc-ink);
}
.sgc *, .sgc *::before, .sgc *::after { box-sizing: border-box; }
.sgc button { font: inherit; cursor: pointer; }
.sgc :focus-visible { outline: 3px solid var(--sgc-accent); outline-offset: 2px; }
.sgc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sgc-icon { width: 1.2em; height: 1.2em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Launcher */
.sgc-launcher { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 8px; border: 0; border-radius: 999px; background: var(--sgc-night); color: var(--sgc-cream); font-weight: 600; box-shadow: 0 16px 40px -12px rgb(0 0 0 / .55), 0 0 0 1px rgb(244 239 227 / .12); transition: transform .25s var(--sgc-ease), box-shadow .25s var(--sgc-ease); }
.sgc-launcher:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px rgb(0 0 0 / .6), 0 0 0 1px rgb(236 140 98 / .5); }
.sgc-avatar { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--sgc-gold), var(--sgc-accent)); color: var(--sgc-night); font: italic 600 22px/1 'Playfair Display', Georgia, serif; }
.sgc-avatar::after { content: ''; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: #7fd49a; border: 2px solid var(--sgc-night); }
.sgc-launcher[aria-expanded="true"] { display: none; }

.sgc-teaser { position: fixed; right: 20px; bottom: 88px; z-index: 90; display: flex; align-items: flex-start; gap: 8px; max-width: 280px; padding: 14px 10px 14px 16px; border-radius: 16px 16px 4px 16px; background: #fff; box-shadow: 0 18px 40px -16px rgb(0 0 0 / .35); animation: sgc-pop .4s var(--sgc-ease); }
.sgc-teaser-text { border: 0; background: none; padding: 0; text-align: left; color: var(--sgc-ink); font-size: 15px; }
.sgc-teaser-text b { display: block; }
.sgc-teaser-close { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; margin: -6px 0 0; border: 0; border-radius: 50%; background: none; color: var(--sgc-muted); }
.sgc-teaser-close:hover { background: var(--sgc-paper); }

/* Panel */
.sgc-panel { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: flex; flex-direction: column; width: 390px; height: min(640px, calc(100vh - 40px)); border-radius: 22px; overflow: hidden; background: var(--sgc-paper); box-shadow: 0 30px 80px -24px rgb(0 0 0 / .55), 0 0 0 1px rgb(0 0 0 / .06); animation: sgc-open .35s var(--sgc-ease); }
.sgc-panel[hidden] { display: none; }
.sgc-head { display: flex; align-items: center; gap: 12px; padding: 16px 14px 16px 16px; background: radial-gradient(circle at 90% -40%, rgb(236 140 98 / .35), transparent 60%), var(--sgc-night); color: var(--sgc-cream); }
.sgc-head-text { flex: 1; min-width: 0; }
.sgc-head h2 { margin: 0; font: 600 17px/1.2 'Inter', system-ui, sans-serif; letter-spacing: 0; color: var(--sgc-cream); }
.sgc-head p { margin: 2px 0 0; font-size: 13px; color: #b4c0b2; }
.sgc-head-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgb(244 239 227 / .08); color: var(--sgc-cream); }
.sgc-head-btn:hover { background: rgb(244 239 227 / .16); }

.sgc-log { flex: 1; overflow-y: auto; padding: 18px 14px 8px; scroll-behavior: smooth; }
.sgc-msg { display: flex; gap: 8px; margin-bottom: 10px; animation: sgc-in .35s var(--sgc-ease); }
.sgc-msg p { margin: 0; }
.sgc-bubble { max-width: 85%; padding: 11px 14px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05); font-size: 15px; }
.sgc-bubble a { color: #a8432a; font-weight: 600; }
.sgc-bubble p + p, .sgc-bubble p + ul, .sgc-bubble ul + p { margin-top: 8px; }
.sgc-bubble ul { margin: 6px 0 0; padding-left: 18px; }
.sgc-msg.sgc-user { justify-content: flex-end; }
.sgc-user .sgc-bubble { border-radius: 16px 4px 16px 16px; background: var(--sgc-green); color: #fff; }
.sgc-mini { width: 28px; height: 28px; font-size: 15px; }
.sgc-mini::after { display: none; }
.sgc-typing .sgc-bubble { display: flex; gap: 4px; padding: 14px; }
.sgc-typing i { width: 7px; height: 7px; border-radius: 50%; background: #a9b0a6; animation: sgc-dot 1s infinite; }
.sgc-typing i:nth-child(2) { animation-delay: .15s; }
.sgc-typing i:nth-child(3) { animation-delay: .3s; }

.sgc-options { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 4px 0 14px; animation: sgc-in .35s var(--sgc-ease); }
.sgc-option { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--sgc-green); border-radius: 999px; background: #fff; color: var(--sgc-green); font-size: 14px; font-weight: 600; text-align: left; transition: background .2s var(--sgc-ease), color .2s var(--sgc-ease); }
.sgc-option:hover { background: var(--sgc-green); color: #fff; }
.sgc-option.sgc-primary { background: var(--sgc-green); color: #fff; }
.sgc-option.sgc-primary:hover { background: var(--sgc-night); }

.sgc-summary { width: 100%; margin: 0; padding: 0; border-radius: 14px; background: #fff; border: 1px solid var(--sgc-line); font-size: 14px; }
.sgc-summary div { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--sgc-line); }
.sgc-summary div:last-child { border-bottom: 0; }
.sgc-summary dt { color: var(--sgc-muted); }
.sgc-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sgc-consent { margin: 8px 2px 0; font-size: 13px; color: var(--sgc-muted); }
.sgc-consent a { color: var(--sgc-ink); }

.sgc-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--sgc-line); background: #fff; }
.sgc-form input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--sgc-line); border-radius: 12px; background: var(--sgc-paper); color: var(--sgc-ink); font: inherit; }
.sgc-form input:focus { outline: none; border-color: var(--sgc-green); background: #fff; }
.sgc-form input:disabled { opacity: .6; }
.sgc-send { display: grid; place-items: center; width: 46px; border: 0; border-radius: 12px; background: var(--sgc-green); color: #fff; }
.sgc-send:disabled { opacity: .4; cursor: not-allowed; }
.sgc-error { margin: 0; padding: 0 14px 8px; background: #fff; font-size: 13px; font-weight: 600; color: #b42318; }
.sgc-error:empty { display: none; }
.sgc-foot { margin: 0; padding: 0 12px 10px; background: #fff; font-size: 12px; color: var(--sgc-muted); text-align: center; }

@keyframes sgc-open { from { opacity: 0; transform: translateY(20px) scale(.96); transform-origin: bottom right; } }
@keyframes sgc-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes sgc-pop { from { opacity: 0; transform: scale(.9); transform-origin: bottom right; } }
@keyframes sgc-dot { 50% { opacity: .3; transform: translateY(-2px); } }

@media (max-width: 520px) {
  .sgc-panel { inset: 0; width: auto; height: 100%; border-radius: 0; }
  .sgc-launcher { right: 14px; bottom: 14px; padding: 0 8px; }
  .sgc-launcher-label { display: none; }
  .sgc-teaser { right: 14px; bottom: 80px; max-width: calc(100vw - 28px); }
}
@media (prefers-reduced-motion: reduce) {
  .sgc *, .sgc *::before, .sgc *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}