/* First-party contact widget.
   Built on styles.css tokens so it reads as part of the site rather than a
   bolted-on third-party bubble. Sits below Crisp's z-index band (99990) —
   the two never show together, but if they ever did, Crisp would win rather
   than the two fighting. */

.sc-root {
   position: fixed;
   right: 20px;
   bottom: 20px;
   z-index: 9990;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 10px;
   font-family: inherit;
}

/* ── launcher ───────────────────────────────────────────────────────────── */
.sc-launch {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 1px solid rgba(240, 165, 30, .42);
   background: linear-gradient(135deg, #F0A51E, #D08C14);
   color: #111116;
   font: inherit;
   font-size: 14px;
   font-weight: 700;
   padding: 12px 18px;
   border-radius: 100px;
   cursor: pointer;
   box-shadow: 0 8px 26px rgba(0, 0, 0, .38);
   transition: transform .16s cubic-bezier(.22, 1, .36, 1), filter .16s ease;
}
.sc-launch:hover { filter: brightness(1.06); }
.sc-launch:active { transform: translateY(1px); }
.sc-launch:focus-visible { outline: 2px solid #F5BC45; outline-offset: 3px; }
.sc-root.is-open .sc-launch { display: none; }

/* ── panel ──────────────────────────────────────────────────────────────── */
.sc-panel {
   width: min(370px, calc(100vw - 32px));
   background: #1F1F2A;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 16px;
   box-shadow: 0 18px 52px rgba(0, 0, 0, .55);
   overflow: hidden;
   animation: sc-rise .22s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes sc-rise {
   from { opacity: 0; transform: translateY(10px) scale(.985); }
   to   { opacity: 1; transform: none; }
}

.sc-head {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 15px 16px;
   background: linear-gradient(135deg, rgba(240, 165, 30, .13), rgba(240, 165, 30, .04));
   border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sc-head strong {
   flex: 1;
   font-size: 15px;
   font-weight: 700;
   color: #F0F0F5;
}
.sc-x {
   flex: none;
   display: inline-flex;
   border: 0;
   background: transparent;
   color: #9A9AAE;
   cursor: pointer;
   padding: 4px;
   border-radius: 7px;
}
.sc-x:hover { color: #F0F0F5; }
.sc-x:focus-visible { outline: 2px solid #F0A51E; outline-offset: 1px; }

.sc-body { padding: 16px; }
.sc-blurb {
   margin: 0 0 14px;
   font-size: 13px;
   line-height: 1.6;
   color: #9A9AAE;
}

.sc-field { display: block; margin-bottom: 12px; }
.sc-field > span {
   display: block;
   margin-bottom: 5px;
   font-size: 12px;
   font-weight: 650;
   color: #9A9AAE;
}
.sc-field textarea,
.sc-field input {
   width: 100%;
   background: #09090C;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 10px;
   padding: 10px 12px;
   color: #F0F0F5;
   font: inherit;
   font-size: 14px;
   line-height: 1.55;
   resize: vertical;
}
.sc-field textarea:focus,
.sc-field input:focus {
   outline: none;
   border-color: rgba(240, 165, 30, .6);
}

.sc-err {
   margin: 0 0 12px;
   font-size: 12.5px;
   line-height: 1.5;
   color: #FF8A7A;
}

.sc-send {
   width: 100%;
   border: 0;
   background: linear-gradient(135deg, #F0A51E, #D08C14);
   color: #111116;
   font: inherit;
   font-size: 14px;
   font-weight: 700;
   padding: 11px 16px;
   border-radius: 10px;
   cursor: pointer;
}
.sc-send:hover:not(:disabled) { filter: brightness(1.06); }
.sc-send:disabled { opacity: .65; cursor: default; }
.sc-send:focus-visible { outline: 2px solid #F5BC45; outline-offset: 2px; }

.sc-done {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 7px;
   padding: 20px 16px;
}
.sc-done strong { font-size: 15px; color: #F0F0F5; }
.sc-done span { font-size: 13px; line-height: 1.6; color: #9A9AAE; }
.sc-again {
   margin-top: 6px;
   border: 1px solid rgba(255, 255, 255, .14);
   background: transparent;
   color: #9A9AAE;
   font: inherit;
   font-size: 13px;
   font-weight: 650;
   padding: 8px 14px;
   border-radius: 9px;
   cursor: pointer;
}
.sc-again:hover { color: #F0F0F5; border-color: rgba(255, 255, 255, .26); }

/* Light mode: the public pages flip to a light ground on some templates. */
html.light-mode .sc-panel { background: #FFFFFF; border-color: rgba(17, 17, 22, .12); }
html.light-mode .sc-head strong,
html.light-mode .sc-done strong { color: #15151C; }
html.light-mode .sc-blurb,
html.light-mode .sc-field > span,
html.light-mode .sc-done span { color: #56566A; }
html.light-mode .sc-field textarea,
html.light-mode .sc-field input {
   background: #F5F5F8;
   border-color: rgba(17, 17, 22, .14);
   color: #15151C;
}
html.light-mode .sc-err { color: #B82216; }

@media (max-width: 640px) {
   .sc-root { right: 14px; bottom: 14px; }
   .sc-launch { padding: 11px 15px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce) {
   .sc-panel { animation: none; }
   .sc-launch { transition: none; }
   .sc-launch:active { transform: none; }
}