/* Website chat box (WEBCHATEPIT1030), from Sanyi's WEBCHAT1030 mockup. Uses the site's tokens (style.css :root); own classes carry the wc- prefix. */
.wc { --wc-bubble: #ffffff; --wc-field: #ffffff; --wc-field-line: #cdd5e1; --wc-ok-bg: #e9f8ee; --wc-ok-line: #bfe6cb; --wc-ok-ink: #1d3b28; --wc-ok-mark: #0c8a3c;
  --wc-err-bg: #fdecec; --wc-err-line: #f3c4c4; --wc-err-ink: #7a1f1f; --wc-req: #d13438; font-family: var(--font); }
@media (prefers-color-scheme: dark) {
  .wc { --wc-bubble: #1b2a44; --wc-field: #101a2b; --wc-field-line: #33435c; --wc-ok-bg: #12301f; --wc-ok-line: #1f5233; --wc-ok-ink: #c9ecd5; --wc-ok-mark: #4cd384;
    --wc-err-bg: #3a1717; --wc-err-line: #6b2a2a; --wc-err-ink: #f4c7c7; --wc-req: #ff8a8a; }
}
.wc [hidden] { display: none !important; }
.wc svg.wc-i { width: 20px; height: 20px; flex: none; }

/* launcher */
.wc-launch { position: fixed; right: 24px; bottom: 24px; z-index: 1000; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 18px;
  border: 0; border-radius: 999px; background: var(--brand); color: var(--on-brand); font: 600 15.5px var(--font); box-shadow: 0 10px 30px -6px rgba(31, 111, 235, .55), var(--shadow-md); cursor: pointer; }
.wc-launch:focus-visible, .wc-x:focus-visible, .wc-send:focus-visible, .wc-comp button:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 2px; }
.wc-launch svg.wc-i { width: 24px; height: 24px; }
.wc-launch.open { width: 56px; padding: 0; justify-content: center; }
.wc-launch.open span { display: none; }
.wc-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #e5484d; color: #fff; border: 2px solid var(--bg);
  font: 700 12px/18px var(--font); text-align: center; }

/* panel */
.wc-panel { position: fixed; right: 24px; bottom: 96px; z-index: 1000; width: 384px; max-height: min(680px, calc(100vh - 120px)); max-height: min(680px, calc(100dvh - 120px)); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px -12px rgba(16, 32, 46, .35); overflow: hidden; color: var(--ink); }
.wc-hd { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--bg-dark); color: #fff; }
.wc-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.wc-hd .wc-av { width: 44px; height: 44px; border: 2px solid rgba(255, 255, 255, .25); }
.wc-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.wc-who b { font: 700 16px var(--font-display); }
.wc-who > span { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.wc-who small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, .85); }
.wc-dot { width: 8px; height: 8px; border-radius: 50%; background: #3dd68c; box-shadow: 0 0 0 3px rgba(61, 214, 140, .25); flex: none; }
.wc-off .wc-dot { background: #f5a524; box-shadow: 0 0 0 3px rgba(245, 165, 36, .25); }
.wc-x { align-self: flex-start; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.wc-x svg.wc-i { width: 18px; height: 18px; }
.wc-body { flex: 1; min-height: 0; overflow: auto; padding: 16px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 12px; }

.wc-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.wc-msg .wc-av { width: 28px; height: 28px; }
.wc-b { padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.wc-msg.in .wc-b { background: var(--wc-bubble); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.wc-msg.out { align-self: flex-end; flex-direction: column; align-items: flex-end; gap: 3px; }
.wc-msg.out .wc-b { background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 5px; }
.wc-msg small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-soft); }
.wc-msg.in small { margin: 3px 0 0 4px; }
.wc svg.wc-tick { width: 14px; height: 14px; color: var(--accent); }

.wc-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--wc-bubble); border: 1px solid var(--line); border-radius: 14px; }
.wc-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.wc-f { display: flex; flex-direction: column; gap: 4px; }
.wc-f > span { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.wc-f em, .wc-req em, .wc-ck em { font-style: normal; color: var(--wc-req); }
.wc-f i { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.wc-hint { font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.wc-f input, .wc-f textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--wc-field-line); border-radius: var(--radius-sm); background: var(--wc-field); color: var(--ink);
  font: 16px/1.45 var(--font); resize: none; }
.wc-f input:focus, .wc-f textarea:focus, .wc-comp textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: transparent; }
.wc-f [aria-invalid="true"] { border-color: var(--wc-req); }
.wc-ck { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.wc-ck input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.wc-ck a, .wc-foot a { color: var(--brand-ink); }
.wc-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wc-ts { min-height: 0; }
.wc-ts:not(:empty) { min-height: 65px; }
.wc-send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: var(--radius-sm); background: var(--brand); color: var(--on-brand);
  font: 600 15px var(--font); cursor: pointer; }
.wc-send[disabled] { opacity: .6; cursor: progress; }
.wc-send svg.wc-i { width: 18px; height: 18px; }
.wc-req { margin: 0; font-size: 12px; color: var(--ink-soft); }
.wc-err { margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--wc-err-bg); border: 1px solid var(--wc-err-line); color: var(--wc-err-ink); font-size: 13px; line-height: 1.45; }

.wc-ack { display: flex; gap: 10px; padding: 12px 13px; border-radius: 14px; background: var(--wc-ok-bg); border: 1px solid var(--wc-ok-line); font-size: 13.5px; line-height: 1.5; color: var(--wc-ok-ink); }
.wc-ack > svg.wc-i { color: var(--wc-ok-mark); width: 22px; height: 22px; margin-top: 1px; }
.wc-ack div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wc-ack .wc-mail { font-weight: 600; overflow-wrap: anywhere; }
.wc-note { align-self: center; max-width: 92%; padding: 8px 12px; border-radius: 12px; background: var(--wc-bubble); border: 1px solid var(--line); color: var(--ink-soft); font-size: 13px; line-height: 1.45; text-align: center; }

.wc-comp { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--line); background: var(--surface); }
.wc-comp textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 11px 14px; border: 1px solid var(--wc-field-line); border-radius: 22px; background: var(--wc-field);
  font: 16px/1.4 var(--font); color: var(--ink); resize: none; }
.wc-comp button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--brand); color: var(--on-brand); flex: none; cursor: pointer; }
.wc-comp button[disabled] { opacity: .6; cursor: progress; }
.wc-comp svg.wc-i { width: 18px; height: 18px; }
.wc-foot { margin: 0; padding: 8px 14px 10px; background: var(--surface); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; line-height: 1.4; text-align: center; }
.wc-comp + .wc-foot { border-top: 0; padding-top: 0; }

/* unread preview above the launcher */
.wc-peek { position: fixed; right: 24px; bottom: 92px; z-index: 1000; display: flex; gap: 10px; width: 300px; padding: 12px 14px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-md); text-align: left; color: inherit; font: inherit; cursor: pointer; }
.wc-peek div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wc-peek b { font-size: 14px; color: var(--ink); }
.wc-peek span { font-size: 13px; line-height: 1.45; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 600px) {
  .wc-panel { inset: 0; width: auto; max-height: none; border-radius: 0; border: 0; }
  .wc-launch.open { display: none; }
  .wc-launch { right: 16px; bottom: 16px; width: 60px; height: 60px; padding: 0; justify-content: center; }
  .wc-launch span { display: none; }
  .wc-launch svg.wc-i { width: 27px; height: 27px; }
  .wc-peek { right: 16px; left: 16px; bottom: 90px; width: auto; }
  .wc-row2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .wc-panel { animation: wc-in .18s ease-out; }
  @keyframes wc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media print { .wc { display: none; } }