/* ==========================================================================
   WR Pro Painters — Chat widget (wr-chat.css)
   Self-contained: every rule is scoped under .wrc so it can never touch the site.
   ========================================================================== */
.wrc, .wrc *, .wrc *::before, .wrc *::after { box-sizing: border-box; }
.wrc {
  --wrc-navy: #0B1F3A;
  --wrc-navy-2: #14294B;
  --wrc-navy-3: #1D3660;
  --wrc-gold: #D9A544;
  --wrc-gold-2: #E6C177;
  --wrc-gold-d: #B8863A;
  --wrc-cream: #F7F5F0;
  --wrc-line: #E6E2D6;
  --wrc-ink: #1C2230;
  --wrc-muted: #5B6270;
  --wrc-ok: #2FBF71;
  --wrc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrc-display: "Fredoka", "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrc-gap: 20px;
  --wrc-z: 9990;
  font-family: var(--wrc-font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--wrc-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
:where(.wrc) :where(button, input) { font: inherit; color: inherit; }
:where(.wrc) button { cursor: pointer; border: 0; background: none; padding: 0; }
.wrc [hidden] { display: none !important; }

/* ---------- Launcher ---------- */
.wrc-launcher {
  position: fixed;
  right: calc(var(--wrc-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--wrc-gap) + env(safe-area-inset-bottom, 0px));
  z-index: var(--wrc-z);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--wrc-gold-2) 0%, var(--wrc-gold) 55%, var(--wrc-gold-d) 100%);
  box-shadow: 0 10px 28px rgba(11, 31, 58, .38), 0 0 0 3px rgba(255,255,255,.9), inset 0 2px 0 rgba(255,255,255,.55);
  display: grid; place-items: center;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.3), box-shadow .25s ease, opacity .2s ease;
}
.wrc-launcher:hover { transform: translateY(-2px) scale(1.06); }
.wrc-launcher:active { transform: scale(.96); }
.wrc-launcher:focus-visible, .wrc-x:focus-visible, .wrc-call:focus-visible, .wrc-send:focus-visible,
.wrc-chip:focus-visible, .wrc-act:focus-visible, .wrc-teaser__x:focus-visible, .wrc-teaser__open:focus-visible {
  outline: 3px solid var(--wrc-navy); outline-offset: 3px; box-shadow: 0 0 0 6px #fff;
}
.wrc-launcher svg { grid-area: 1 / 1; width: 34px; height: 34px; transition: transform .3s ease, opacity .2s ease; }
.wrc-launcher .wrc-ico-close { opacity: 0; transform: rotate(-80deg) scale(.6); }
.wrc.is-open .wrc-launcher .wrc-ico-chat { opacity: 0; transform: rotate(80deg) scale(.6); }
.wrc.is-open .wrc-launcher .wrc-ico-close { opacity: 1; transform: none; }
.wrc-launcher::after { /* pulse ring */
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--wrc-gold); opacity: 0; pointer-events: none;
}
.wrc-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: #E5484D; color: #fff;
  font: 700 12px/22px var(--wrc-font); text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.wrc.is-open .wrc-badge { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .wrc:not(.is-open):not(.is-seen) .wrc-launcher { animation: wrc-wiggle 5.5s ease-in-out 2.5s infinite; }
  .wrc:not(.is-open):not(.is-seen) .wrc-launcher::after { animation: wrc-pulse 2.8s ease-out 1.5s infinite; }
}
@keyframes wrc-pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes wrc-wiggle {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-10deg); } 90% { transform: rotate(9deg); }
  94% { transform: rotate(-5deg); } 97% { transform: rotate(3deg); }
}

/* ---------- Teaser bubble ---------- */
.wrc-teaser {
  position: fixed;
  right: calc(var(--wrc-gap) + 64px + 14px + env(safe-area-inset-right, 0px));
  bottom: calc(var(--wrc-gap) + 8px + env(safe-area-inset-bottom, 0px));
  z-index: var(--wrc-z);
  max-width: 270px;
  background: #fff;
  border-radius: 18px 18px 6px 18px;
  box-shadow: 0 14px 34px rgba(11, 31, 58, .24), 0 0 0 1px rgba(11, 31, 58, .06);
  opacity: 0; transform: translateY(10px) scale(.96); transform-origin: bottom right;
  pointer-events: none; visibility: hidden;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.9,.3,1.2), visibility 0s linear .35s;
}
.wrc-teaser.is-on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.wrc.is-open .wrc-teaser { display: none; }
.wrc-teaser__open { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 38px 11px 12px; text-align: left; border-radius: inherit; }
.wrc-teaser__ico {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--wrc-navy); display: grid; place-items: center;
}
.wrc-teaser__ico svg { width: 20px; height: 20px; }
.wrc-teaser__t1 { display: block; font: 600 16px/1.2 var(--wrc-display); color: var(--wrc-navy); letter-spacing: .1px; }
.wrc-teaser__t2 { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--wrc-muted); }
.wrc-teaser__x {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--wrc-muted);
}
.wrc-teaser__x:hover { background: #F0EDE4; color: var(--wrc-navy); }
.wrc-teaser__x svg { width: 12px; height: 12px; }

/* ---------- Panel ---------- */
.wrc-panel {
  position: fixed;
  right: calc(var(--wrc-gap) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--wrc-gap) + 64px + 14px + env(safe-area-inset-bottom, 0px));
  z-index: var(--wrc-z);
  width: 392px;
  height: min(640px, calc(100vh - 130px));
  height: min(640px, calc(100dvh - 130px));
  display: flex; flex-direction: column;
  background: var(--wrc-cream);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(11, 31, 58, .38), 0 0 0 1px rgba(11, 31, 58, .08);
  transform-origin: bottom right;
  opacity: 0; transform: translateY(18px) scale(.94);
  visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .3s cubic-bezier(.2,.9,.3,1.1), visibility 0s linear .3s;
}
.wrc.is-open .wrc-panel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }

.wrc-head {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 14px 24px 16px;
  background:
    radial-gradient(120% 140% at 100% 0%, var(--wrc-navy-3) 0%, transparent 55%),
    linear-gradient(160deg, var(--wrc-navy-2), var(--wrc-navy));
  color: #fff;
}
.wrc-avatar {
  position: relative; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--wrc-navy) center / cover no-repeat;
  box-shadow: 0 0 0 2px var(--wrc-gold), 0 4px 10px rgba(0,0,0,.3);
  display: grid; place-items: center;
  font: 700 15px var(--wrc-display); color: var(--wrc-gold);
}
.wrc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.wrc-avatar::after {
  content: ""; position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--wrc-ok); box-shadow: 0 0 0 2.5px var(--wrc-navy);
}
.wrc-who { flex: 1 1 auto; min-width: 0; }
.wrc-name { display: block; font: 600 18px/1.15 var(--wrc-display); letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrc-sub { display: block; margin-top: 2px; font-size: 12.5px; color: #B9C4DA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrc-call, .wrc-x {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.1); transition: background .2s ease, transform .2s ease;
}
.wrc-call:hover, .wrc-x:hover { background: rgba(255,255,255,.2); }
.wrc-call { color: var(--wrc-gold-2); }
.wrc-call svg, .wrc-x svg { width: 19px; height: 19px; }
.wrc-call:focus-visible, .wrc-x:focus-visible { outline-color: var(--wrc-gold); box-shadow: none; }
.wrc-drips { position: absolute; left: 0; right: 0; bottom: -17px; width: 100%; height: 18px; display: block; pointer-events: none; }
.wrc-drips .d { transform-box: fill-box; transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
  .wrc.is-open .wrc-drips .d { animation: wrc-drip 5s ease-in-out infinite; }
  .wrc.is-open .wrc-drips .d:nth-child(2) { animation-delay: 1.1s; }
  .wrc.is-open .wrc-drips .d:nth-child(3) { animation-delay: 2.3s; }
  .wrc.is-open .wrc-drips .d:nth-child(4) { animation-delay: .6s; }
  .wrc.is-open .wrc-drips .d:nth-child(5) { animation-delay: 3.4s; }
}
@keyframes wrc-drip { 0%, 62%, 100% { transform: scaleY(.55); } 80% { transform: scaleY(1.12); } 90% { transform: scaleY(.95); } }

/* ---------- Conversation ---------- */
.wrc-log {
  position: relative; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 26px 14px 10px;
  background:
    radial-gradient(circle at 12px 12px, rgba(11,31,58,.045) 1.2px, transparent 1.6px) 0 0 / 24px 24px,
    var(--wrc-cream);
  scroll-behavior: smooth;
}
.wrc-log::-webkit-scrollbar { width: 6px; }
.wrc-log::-webkit-scrollbar-thumb { background: rgba(11,31,58,.18); border-radius: 3px; }
.wrc-msg { display: flex; flex-direction: column; margin: 0 0 9px; max-width: 86%; }
.wrc-msg.is-bot { align-items: flex-start; }
.wrc-msg.is-user { align-items: flex-end; margin-left: auto; }
.wrc-b {
  padding: 10px 14px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  font-size: 15px; line-height: 1.45;
}
.is-bot .wrc-b { background: #fff; color: var(--wrc-ink); border-radius: 18px 18px 18px 5px; box-shadow: 0 1px 2px rgba(11,31,58,.08), 0 0 0 1px var(--wrc-line); }
.is-user .wrc-b { background: linear-gradient(145deg, var(--wrc-gold-2), var(--wrc-gold)); color: var(--wrc-navy); font-weight: 600; border-radius: 18px 18px 5px 18px; box-shadow: 0 2px 6px rgba(184,134,58,.35); }
@media (prefers-reduced-motion: no-preference) {
  .wrc-msg.is-new { animation: wrc-in .28s cubic-bezier(.2,.9,.3,1.15) both; }
  .wrc-msg.is-user.is-new { transform-origin: right bottom; }
  .wrc-msg.is-bot.is-new { transform-origin: left bottom; }
}
@keyframes wrc-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

.wrc-typing { display: inline-flex; align-items: flex-end; gap: 5px; height: 40px; padding: 11px 15px 8px; background: #fff; border-radius: 18px 18px 18px 5px; box-shadow: 0 1px 2px rgba(11,31,58,.08), 0 0 0 1px var(--wrc-line); margin-bottom: 9px; }
.wrc-typing i { display: block; width: 8px; height: 8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--wrc-gold); }
@media (prefers-reduced-motion: no-preference) {
  .wrc-typing i { animation: wrc-dot 1.15s ease-in-out infinite; transform-origin: top; }
  .wrc-typing i:nth-child(2) { animation-delay: .16s; } .wrc-typing i:nth-child(3) { animation-delay: .32s; }
}
@keyframes wrc-dot { 0%, 60%, 100% { transform: translateY(0) scaleY(1); } 30% { transform: translateY(-7px) scaleY(1.25); } }

.wrc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.wrc-chip {
  min-height: 40px; padding: 8px 15px; border-radius: 999px;
  background: #fff; color: var(--wrc-navy); font-size: 14px; font-weight: 600; line-height: 1.2;
  box-shadow: inset 0 0 0 1.5px var(--wrc-gold);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wrc-chip:hover { background: var(--wrc-gold); transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--wrc-gold), 0 4px 10px rgba(184,134,58,.35); }
.wrc-chip:active { transform: scale(.97); }
.wrc-chip.is-primary { background: var(--wrc-navy); color: #fff; box-shadow: none; }
.wrc-chip.is-primary:hover { background: var(--wrc-navy-3); }
.wrc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wrc-act {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; border-radius: 12px;
  background: var(--wrc-navy); color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none !important;
}
.wrc-act:hover { background: var(--wrc-navy-3); }
.wrc-act svg { width: 16px; height: 16px; color: var(--wrc-gold-2); }
.wrc-act.is-alt { background: #fff; color: var(--wrc-navy) !important; box-shadow: inset 0 0 0 1.5px var(--wrc-navy); }
.wrc-act.is-alt svg { color: var(--wrc-gold-d); }

.wrc-summary { background: #fff; border-radius: 14px; padding: 10px 14px; margin: 0 0 6px; box-shadow: 0 0 0 1px var(--wrc-line); font-size: 14px; max-width: 92%; }
.wrc-summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
.wrc-summary dt { color: var(--wrc-muted); } .wrc-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Dock + composer ---------- */
.wrc-dock {
  flex: 0 0 auto; display: flex; gap: 7px; overflow-x: auto; padding: 8px 12px 2px; background: #fff;
  border-top: 1px solid var(--wrc-line); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.wrc-dock::-webkit-scrollbar { display: none; }
.wrc-dock .wrc-chip { flex: 0 0 auto; min-height: 34px; padding: 5px 12px; font-size: 13px; background: var(--wrc-cream); }
.wrc-form {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff;
}
.wrc-input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px;
  background: var(--wrc-cream); border: 1.5px solid transparent; outline: 0;
  font-size: 16px; color: var(--wrc-ink); transition: border-color .2s ease, background .2s ease;
}
.wrc-input::placeholder { color: #7A8190; }
.wrc-input:focus { border-color: var(--wrc-gold); background: #fff; }
.wrc-send {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(145deg, var(--wrc-gold-2), var(--wrc-gold)); color: var(--wrc-navy);
  display: grid; place-items: center; box-shadow: 0 4px 10px rgba(184,134,58,.4);
  transition: transform .2s ease, filter .2s ease;
}
.wrc-send:hover { transform: scale(1.06); filter: brightness(1.04); }
.wrc-send:active { transform: scale(.94); }
.wrc-send svg { width: 20px; height: 20px; }
.wrc-foot { flex: 0 0 auto; text-align: center; font-size: 11.5px; color: var(--wrc-muted); background: #fff; padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0px)); margin-top: -4px; }
.wrc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mobile: full-screen sheet ---------- */
@media (max-width: 560px), (max-height: 520px) {
  .wrc { --wrc-gap: 16px; }
  .wrc-launcher { width: 60px; height: 60px; }
  .wrc-teaser {
    right: calc(var(--wrc-gap) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--wrc-gap) + 60px + 12px + env(safe-area-inset-bottom, 0px));
    max-width: min(300px, calc(100vw - 2 * var(--wrc-gap)));
    border-radius: 18px 18px 6px 18px;
  }
  .wrc-panel {
    right: 0; left: 0; bottom: auto; top: var(--wrc-vt, 0px);
    width: 100%; height: var(--wrc-vh, 100vh); height: var(--wrc-vh, 100dvh);
    border-radius: 0; box-shadow: none; transform-origin: bottom center; transform: translateY(24px);
  }
  .wrc.is-open .wrc-launcher { opacity: 0; pointer-events: none; transform: scale(.6); }
  .wrc-head { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .wrc-msg { max-width: min(90%, 560px); }
}
@media (max-height: 520px) {
  .wrc-dock, .wrc-foot { display: none; }
  .wrc-head { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: 18px; }
  .wrc-avatar { flex-basis: 38px; width: 38px; height: 38px; }
  .wrc-sub { display: none; }
}
html.wrc-lock, html.wrc-lock body { overflow: hidden !important; }
@media print { .wrc { display: none !important; } }
@media (forced-colors: active) { .wrc-launcher, .wrc-send, .wrc-chip { border: 2px solid ButtonText; } }