.chat-bubble { position: fixed; bottom: 24px; right: 24px; z-index: 998; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #3763f4, #2c4fc3); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 24px rgba(55,99,244,0.4); transition: transform .2s, box-shadow .2s; }
.chat-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 30px rgba(55,99,244,0.55); }
.chat-bubble svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-panel { position: fixed; bottom: 100px; right: 24px; z-index: 999; width: 400px; max-height: 540px; background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transform: translateY(16px) scale(0.95); transition: opacity .25s, transform .25s; }
#disChatPanel.chat-panel.open { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: linear-gradient(135deg, rgba(55,99,244,0.08), rgba(44,79,195,0.06)); border-bottom: 1px solid rgba(0,0,0,0.06); border-radius: 16px 16px 0 0; }
.chat-header h4 { font-family: 'Inter','Source Sans Pro',sans-serif; font-size: .95rem; font-weight: 700; margin: 0; color: #2d2d2d; display: flex; align-items: center; gap: 8px; }
.chat-header h4::before { content: ''; width: 8px; height: 8px; background: #00b779; border-radius: 50%; animation: dis-dotPulse 2s infinite; }
@keyframes dis-dotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.chat-close { background: none; border: none; color: #4e5d78; font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background .2s, color .2s; line-height: 1; }
.chat-close:hover { background: rgba(0,0,0,0.06); color: #2d2d2d; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; max-height: 360px; }
.chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: .88rem; line-height: 1.55; word-wrap: break-word; }
.chat-msg.bot { background: #f5f6f8; border: 1px solid rgba(0,0,0,0.06); align-self: flex-start; border-bottom-left-radius: 4px; color: #2d2d2d; }
.chat-msg.user { background: rgba(55,99,244,0.12); border: 1px solid rgba(55,99,244,0.2); align-self: flex-end; border-bottom-right-radius: 4px; color: #2d2d2d; }
.chat-msg.typing { color: #4e5d78; font-style: italic; }
.chat-msg.typing .dot { display: inline-block; animation: dis-dotB 1.4s infinite; }
.chat-msg.typing .dot:nth-child(2){animation-delay:.2s}
.chat-msg.typing .dot:nth-child(3){animation-delay:.4s}
@keyframes dis-dotB { 0%,80%,100% { opacity: 0.25; } 40% { opacity: 1; } }
.chat-input-area { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.06); background: #fafbfc; border-radius: 0 0 16px 16px; }
.chat-input { flex: 1; background: #ffffff; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 10px 14px; color: #2d2d2d; font-size: .88rem; font-family: 'Inter','Source Sans Pro',sans-serif; outline: none; transition: border-color .2s; }
.chat-input:focus { border-color: rgba(55,99,244,0.5); }
.chat-input::placeholder { color: #adb5bd; }
.chat-send { background: linear-gradient(135deg, #3763f4, #2c4fc3); color: #fff; border: none; border-radius: 10px; padding: 10px 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.chat-send:hover { transform: scale(1.05); }
.chat-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media(max-width:480px) { .chat-panel { width: calc(100vw - 24px); right: 12px; bottom: 12px; max-height: 45vh; } .chat-bubble { width: 52px; height: 52px; bottom: 16px; right: 12px; } }
#disChatPanel.chat-panel.keyboard-open { max-height: 45vh !important; bottom: 12px !important; transition: max-height .2s, bottom .2s; }