/* Chat widget shell — quiet-card hero styling.
   Palette/motion mirror the hero: Inter, ink #161826, headline gradient
   #93B8E4→#F2A8CE, ring gradient #9184D9→#F2A8CE→#B5ABFC, 700ms entrance. */

#jpw { position: fixed; right: 20px; bottom: 20px; z-index: 99990; isolation: isolate;
  font-family: Inter, system-ui, sans-serif; display: flex;
  flex-direction: column; align-items: flex-end; gap: 12px; }
#jpw * { box-sizing: border-box; }

/* launcher */
#jpw .jpw-fab { width: 56px; height: 56px; border-radius: 50%;
  background: #161826; color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(22,24,38,.28); position: relative;
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s, transform .7s; }
#jpw.jpw-ready .jpw-fab { opacity: 1; transform: none; }
#jpw .jpw-fab::before { content: ""; position: absolute; inset: -2px;
  border-radius: 50%; z-index: -1;
  background: linear-gradient(90deg,#9184D9 40%,#F2A8CE,#B5ABFC); }
#jpw .jpw-fab svg { width: 24px; height: 24px; }

/* teaser bubble */
#jpw .jpw-teaser { max-width: 240px; background: #fff; color: #161826;
  border: 1px solid #ececf2; border-radius: 10px; padding: 10px 30px 10px 12px;
  font-size: 13px; line-height: 1.4; box-shadow: 0 10px 28px rgba(22,24,38,.14);
  position: relative; cursor: pointer;
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
#jpw .jpw-teaser.jpw-in { opacity: 1; transform: none; }
#jpw .jpw-teaser .jpw-x { position: absolute; top: 4px; right: 6px;
  border: 0; background: none; color: #9a9aa5; font-size: 14px;
  cursor: pointer; padding: 2px; line-height: 1; }

/* panel — the quiet card */
#jpw .jpw-panel { width: min(340px, calc(100vw - 32px)); background: #fff;
  border: 1px solid #ececf2; border-radius: 12px; padding: 16px;
  box-shadow: 0 18px 44px rgba(22,24,38,.16); display: none; isolation: isolate;
  opacity: 0; transform: translateY(48px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
#jpw .jpw-panel.jpw-open { display: block; }
#jpw .jpw-panel.jpw-in { opacity: 1; transform: none; }

#jpw .jpw-title { margin: 0 0 2px; font-size: 15px; font-weight: 700;
  color: #161826; letter-spacing: -.01em; }
#jpw .jpw-title .jpw-grad { background: linear-gradient(90deg,#93B8E4,#F2A8CE,#93B8E4);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
#jpw .jpw-sparkle { display: inline-block; color: #B5ABFC;
  animation: jpw-wiggle 1.6s ease-in-out infinite; transform-origin: center; }
@keyframes jpw-wiggle { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
#jpw .jpw-sub { font-size: 11.5px; color: #6b6b78; margin: 0 0 12px; }

/* tabs */
#jpw .jpw-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
#jpw .jpw-tab { flex: 1; text-align: center; font-size: 11.5px; font-weight: 600;
  padding: 8px 0; border-radius: 8px; background: #f4f4f8; color: #6b6b78;
  border: 0; cursor: pointer; position: relative; font-family: inherit; }
#jpw .jpw-tab[aria-selected="true"] { background: #161826; color: #fff; }
#jpw .jpw-tab[aria-selected="true"]::before { content: ""; position: absolute;
  inset: -1.5px; border-radius: 9.5px; z-index: -1;
  background: linear-gradient(90deg,#9184D9 40%,#F2A8CE,#B5ABFC); }

#jpw .jpw-fab:focus-visible, #jpw .jpw-tab:focus-visible,
#jpw .jpw-teaser .jpw-x:focus-visible, #jpw .jpw-link:focus-visible {
  outline: 2px solid #B5ABFC; outline-offset: 2px; }

/* tab bodies */
#jpw .jpw-body { min-height: 220px; display: none; }
#jpw .jpw-body.jpw-on { display: block; }
#jpw .jpw-chathost { background: #fafafc; border: 1px solid #ececf2;
  border-radius: 8px; height: 300px; overflow: hidden; position: relative; }
#jpw .jpw-chathost iframe, #jpw .jpw-chathost chat-widget {
  width: 100% !important; height: 100% !important; border: 0; }

/* channel link rows (WhatsApp / Text tabs + chat fallback) */
#jpw .jpw-link { display: flex; align-items: center; gap: 10px; width: 100%;
  background: #fafafc; border: 1px solid #ececf2; border-radius: 8px;
  padding: 12px; margin-bottom: 8px; font-size: 13px; font-weight: 600;
  color: #161826; text-decoration: none; }
#jpw .jpw-link:hover { border-color: #B5ABFC; }
#jpw .jpw-link .jpw-ico { width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; flex-shrink: 0; }
#jpw .jpw-link small { display: block; font-weight: 400; font-size: 11px; color: #6b6b78; }
#jpw .jpw-ico-wa { background: #25D366; }
#jpw .jpw-ico-sms { background: linear-gradient(135deg,#3A3560,#8B6FA8); }
#jpw .jpw-note { font-size: 11px; color: #6b6b78; margin: 6px 0 0; }

@media (max-width: 480px) {
  #jpw { right: 12px; bottom: 12px; }
  #jpw .jpw-chathost { height: min(300px, 50vh); }
}
@media (prefers-reduced-motion: reduce) {
  #jpw .jpw-fab, #jpw .jpw-teaser, #jpw .jpw-panel { transition: none; }
  #jpw .jpw-sparkle { animation: none; }
}