.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none !important; }
.chat-widget { position:fixed; right:24px; bottom:22px; z-index:80; font-family:'DM Sans',sans-serif; }
.chat-launcher { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 19px; border:1px solid rgba(255,255,255,.14); border-radius:999px; background:linear-gradient(110deg,#4b3cf5,#a33cf5); color:#fff; font:700 14px 'DM Sans',sans-serif; box-shadow:0 12px 34px rgba(88,51,228,.38); cursor:pointer; transition:transform .2s,box-shadow .2s; }
.chat-launcher:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(88,51,228,.48); }
.chat-launcher svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.chat-launcher-dot { width:8px; height:8px; margin-left:1px; border-radius:50%; background:#aaa2bb; box-shadow:0 0 0 3px rgba(255,255,255,.1); }
.chat-panel { position:absolute; right:0; bottom:68px; display:flex; flex-direction:column; width:min(370px,calc(100vw - 32px)); height:min(520px,calc(100dvh - 115px)); min-height:340px; overflow:hidden; border:1px solid rgba(162,143,255,.24); border-radius:20px; background:#0d101b; color:#f7f7fb; box-shadow:0 24px 75px rgba(0,0,0,.58),0 0 34px rgba(96,67,220,.16); visibility:hidden; opacity:0; pointer-events:none; transform:translateY(10px) scale(.98); transform-origin:bottom right; transition:opacity .2s ease,transform .2s ease,visibility .2s; }
.chat-panel.is-open { visibility:visible; opacity:1; pointer-events:auto; transform:none; }
.chat-header { display:flex; align-items:center; gap:11px; padding:16px 16px 14px; border-bottom:1px solid rgba(173,181,208,.13); background:radial-gradient(ellipse at 0 0,rgba(113,69,255,.2),transparent 70%),#101320; }
.chat-avatar { display:grid; place-items:center; flex:0 0 39px; width:39px; height:39px; border-radius:13px; background:linear-gradient(140deg,#6a49ff,#a244f2); color:#fff; font:800 19px 'Manrope',sans-serif; box-shadow:0 5px 17px rgba(114,70,245,.3); }
.chat-heading { display:flex; flex-direction:column; gap:3px; }
.chat-heading strong { font:700 14px 'Manrope',sans-serif; }
.chat-presence { display:inline-flex; align-items:center; gap:6px; color:#a2a8bb; font-size:11px; }
.chat-presence:before { content:""; width:7px; height:7px; border-radius:50%; background:#878c9a; }
.chat-presence[data-state="online"]:before { background:#42d392; box-shadow:0 0 9px rgba(66,211,146,.7); }
.chat-presence[data-state="error"]:before { background:#ff737d; }
.chat-close { margin-left:auto; width:34px; height:34px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.04); color:#c1c6d4; font-size:23px; line-height:1; cursor:pointer; }
.chat-close:hover { background:rgba(255,255,255,.1); color:#fff; }
.chat-history { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:12px; min-height:0; overflow-y:auto; padding:16px; scrollbar-color:#333850 transparent; }
.chat-welcome,.chat-bubble { max-width:92%; padding:12px 13px; border:1px solid rgba(173,181,208,.13); border-radius:5px 15px 15px 15px; background:#141927; color:#e4e6ed; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.chat-welcome > span,.chat-bubble-label { display:block; margin-bottom:5px; color:#ae99ff; font-size:10px; font-weight:700; letter-spacing:.04em; }
.chat-welcome p,.chat-bubble p { margin:0; white-space:pre-wrap; }
.chat-bubble time { display:block; margin-top:5px; color:#747f95; font-size:9px; text-align:right; }
.operator-bubble { border-color:rgba(173,181,208,.13); background:#141927; }
.visitor-bubble { align-self:flex-end; border-color:rgba(137,102,255,.34); border-radius:15px 5px 15px 15px; background:linear-gradient(135deg,rgba(91,67,202,.3),rgba(102,49,164,.25)); }
.chat-notice { width:100%; padding:9px 11px; border:1px solid rgba(237,184,95,.2); border-radius:10px; background:rgba(145,103,35,.09); color:#c8b78e; font-size:11px; line-height:1.5; }
.chat-quick-prompts { display:flex; flex-wrap:wrap; gap:7px; }
.chat-quick-prompts button { padding:7px 10px; border:1px solid rgba(155,128,255,.27); border-radius:999px; background:rgba(102,74,201,.1); color:#cbbdff; font-size:11px; cursor:pointer; }
.chat-quick-prompts button:hover { background:rgba(102,74,201,.22); }
.chat-compose { margin:0 13px 13px; padding:9px 10px 8px; border:1px solid rgba(163,171,196,.22); border-radius:14px; background:#090c14; }
.chat-compose:focus-within { border-color:rgba(140,108,255,.66); box-shadow:0 0 0 3px rgba(114,75,255,.1); }
.chat-compose textarea { display:block; width:100%; min-height:45px; max-height:105px; resize:vertical; border:0; outline:0; background:transparent; color:#f2f1f8; font:13px/1.5 'DM Sans',sans-serif; }
.chat-compose textarea::placeholder { color:#697286; }
.chat-compose textarea:disabled { opacity:.65; cursor:not-allowed; }
.chat-compose-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:7px; color:#788197; font-size:10px; }
.chat-compose-footer button { display:grid; place-items:center; width:34px; height:32px; border:0; border-radius:10px; background:linear-gradient(125deg,#5d4af5,#a13df0); color:white; cursor:pointer; box-shadow:0 5px 15px rgba(93,69,235,.22); }
.chat-compose-footer button:disabled { opacity:.45; cursor:not-allowed; box-shadow:none; }
.chat-compose-footer button:not(:disabled):hover { filter:brightness(1.12); }
.chat-compose-footer svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:680px) { .chat-widget { right:14px; bottom:14px; } .chat-panel { bottom:64px; width:min(370px,calc(100vw - 28px)); height:min(520px,calc(100dvh - 100px)); } .chat-launcher { min-height:50px; padding-inline:17px; font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .chat-panel,.chat-launcher { transition:none; } }
.chat-launcher-dot.is-online { background:#42d392; box-shadow:0 0 0 3px rgba(66,211,146,.14),0 0 12px rgba(66,211,146,.65); }
.chat-sound-toggle { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.04); color:#bbc3d4; cursor:pointer; }
.chat-sound-toggle:hover { background:rgba(255,255,255,.1); color:#fff; }
.chat-sound-toggle.is-enabled { color:#a7e2c3; border-color:rgba(66,211,146,.22); }
.chat-sound-toggle.is-muted svg { opacity:.5; }
.chat-sound-toggle svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }