/* Website chat bubble and panel */
.wtc { --chat: #1d4ed8; position: fixed; right: 20px; bottom: 20px; z-index: 1050; font-family: inherit; }
.wtc-bubble { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--chat); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(15,23,42,.28); transition: transform .15s; position: relative; }
.wtc-bubble:hover { transform: scale(1.06); }
.wtc.open .wtc-bubble { transform: scale(.9); }
.wtc-badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; padding: 0 5px; box-shadow: 0 0 0 2px #fff; }
.wtc-badge[hidden] { display: none; }
.wtc-panel { position: absolute; right: 0; bottom: 74px; width: 370px; max-width: calc(100vw - 24px); height: min(600px, calc(100vh - 110px)); background: #fff; color: #0f172a; border-radius: 18px; box-shadow: 0 24px 60px rgba(15,23,42,.3); display: flex; flex-direction: column; overflow: hidden; }
.wtc-panel[hidden] { display: none; }
.wtc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 12px 18px; background: var(--chat); color: #fff; }
.wtc-head div { display: flex; flex-direction: column; } .wtc-head strong { font-size: 1.02rem; } .wtc-head small { opacity: .85; font-size: .8rem; }
.wtc-x { border: 0; background: rgba(255,255,255,.15); color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.wtc-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f8fafc; }
.wtc-msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: .93rem; line-height: 1.45; overflow-wrap: anywhere; }
.wtc-msg.them { align-self: flex-start; background: #fff; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
.wtc-msg.staff { border-color: color-mix(in srgb, var(--chat) 35%, #fff); }
.wtc-msg.me { align-self: flex-end; background: var(--chat); color: #fff; border-bottom-right-radius: 4px; }
.wtc-msg a { color: inherit; text-decoration: underline; }
.wtc-who { display: block; font-size: .75rem; color: var(--chat); margin-bottom: 2px; }
.wtc-sys { align-self: center; text-align: center; font-size: .8rem; color: #64748b; background: #eef2f7; border-radius: 10px; padding: 6px 10px; max-width: 92%; }
.wtc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wtc-acts a { text-decoration: none !important; border: 1px solid var(--chat); color: var(--chat) !important; border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: .85rem; background: #fff; }
.wtc-acts a.p { background: var(--chat); color: #fff !important; }
.wtc-typing { display: flex; gap: 4px; padding: 12px 14px; }
.wtc-typing span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: wtc-dot 1s infinite ease-in-out; }
.wtc-typing span:nth-child(2) { animation-delay: .15s; } .wtc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wtc-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.wtc-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 0; background: #f8fafc; }
.wtc-quick[hidden] { display: none; }
.wtc-quick button { border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 6px 11px; font: inherit; font-size: .82rem; cursor: pointer; color: #0f172a; }
.wtc-quick button:hover { border-color: var(--chat); color: var(--chat); }
.wtc-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid #e2e8f0; background: #fff; }
.wtc-form textarea { flex: 1; resize: none; border: 1px solid #cbd5e1; border-radius: 12px; padding: 9px 12px; font: inherit; font-size: .93rem; max-height: 110px; outline: none; }
.wtc-form textarea:focus { border-color: var(--chat); }
.wtc-form button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--chat); color: #fff; cursor: pointer; display: grid; place-items: center; flex: none; }
.wtc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wtc-foot { padding: 6px 12px 10px; font-size: .75rem; color: #64748b; text-align: center; background: #fff; }
.wtc-foot a, .wtc-foot button { color: var(--chat); font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.wtc-foot span { display: block; margin-top: 3px; font-size: .7rem; }
@media (max-width: 520px) {
  .wtc { right: 14px; bottom: 14px; }
  .wtc.open { right: 0; bottom: 0; left: 0; top: 0; }
  .wtc.open .wtc-bubble { display: none; }
  .wtc-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; border-radius: 0; bottom: 0; }
}