/* ════ CHATBOT STYLES ════ */
#chat-toggle { position:fixed; bottom:24px; right:24px; width:60px; height:60px; border-radius:50%; background:var(--accent); color:#fff; border:none; cursor:pointer; box-shadow:0 8px 24px rgba(0,71,171,.3); z-index:9999; display:flex; align-items:center; justify-content:center; transition:transform .3s; }
#chat-toggle:hover { transform:scale(1.05); }
#chat-toggle .close-icon { display:none; }
#chat-toggle.open .chat-icon { display:none; }
#chat-toggle.open .close-icon { display:block; width:28px; height:28px; fill:#fff; }
#chat-toggle .chat-icon { width:28px; height:28px; fill:#fff; }
#chat-toggle .dot { position:absolute; top:12px; right:14px; width:10px; height:10px; background:var(--green); border-radius:50%; border:2px solid var(--accent); }
#chat-window { position:fixed; bottom:100px; right:24px; width:360px; height:520px; max-height:calc(100vh - 120px); background:#fff; border-radius:12px; box-shadow:0 12px 48px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.05); z-index:9998; display:flex; flex-direction:column; overflow:hidden; opacity:0; pointer-events:none; transform:translateY(20px); transition:all .3s ease; }
#chat-window.open { opacity:1; pointer-events:auto; transform:translateY(0); }
.chat-header { background:var(--navy); color:#fff; padding:16px 20px; display:flex; align-items:center; gap:12px; }
.chat-header .avatar { font-size:24px; }
.chat-header .brand-name { font-weight:800; font-size:15px; letter-spacing:.02em; }
.chat-header .brand-name span { color:var(--green); }
.chat-header .status { font-size:11px; color:rgba(255,255,255,.7); }
.restart-btn { margin-left:auto; background:rgba(255,255,255,.1); border:none; color:#fff; padding:6px 10px; border-radius:4px; font-size:11px; cursor:pointer; transition:background .2s; font-family:inherit; }
.restart-btn:hover { background:rgba(255,255,255,.2); }
#chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px; background:var(--surface); }
.msg-label { font-size:10px; font-weight:700; text-transform:uppercase; color:var(--muted); margin-bottom:-8px; margin-left:12px; }
.user-label { align-self:flex-end; margin-right:12px; margin-left:0; }
.msg { max-width:85%; padding:12px 16px; border-radius:16px; font-size:13.5px; line-height:1.5; }
.msg.bot { background:#fff; color:var(--navy); align-self:flex-start; border-bottom-left-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.msg.user { background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
#quick-reply-area { padding:0 20px 16px; background:var(--surface); display:flex; flex-wrap:wrap; gap:8px; }
.quick-btn { background:#fff; border:1px solid var(--accent); color:var(--accent); padding:7px 14px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; transition:all .2s; font-family:inherit; }
.quick-btn:hover { background:var(--accent); color:#fff; }
.chat-input-row { display:flex; padding:16px; background:#fff; border-top:1px solid var(--border); gap:12px; }
#chat-input { flex:1; border:none; background:var(--surface); padding:10px 16px; border-radius:20px; font-size:13px; outline:none; font-family:inherit; }
#chat-input:focus { box-shadow:0 0 0 2px rgba(0,71,171,.2); }
#send-btn { background:var(--accent); border:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:transform .2s; }
#send-btn:hover { transform:scale(1.05); }
#send-btn svg { width:20px; height:20px; fill:#fff; margin-left:-2px; }
.chat-footer { text-align:center; padding:0 0 12px; background:#fff; font-size:10.5px; color:var(--muted); }
.typing { display:flex; gap:4px; padding:14px 16px; background:#fff; border-radius:16px; align-self:flex-start; border-bottom-left-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.typing span { width:6px; height:6px; background:var(--muted); border-radius:50%; animation:typing 1.4s infinite ease-in-out; opacity:.5; }
.typing span:nth-child(1) { animation-delay:0s; }
.typing span:nth-child(2) { animation-delay:.2s; }
.typing span:nth-child(3) { animation-delay:.4s; }
@keyframes typing { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@media(max-width:560px) { #chat-window { bottom:90px; right:16px; width:calc(100% - 32px); max-height:calc(100vh - 110px); } #chat-toggle { bottom:16px; right:16px; } }