/* DFSK SA Chatbot Widget */
#dfsk-chatbot-root {
  --dfsk-red:    #E8212A;
  --dfsk-dark:   #0a0a0a;
  --dfsk-panel:  #161616;
  --dfsk-text:   #f5f5f5;
  --dfsk-muted:  rgba(245,245,245,.5);
  --dfsk-border: rgba(255,255,255,.08);
  --dfsk-input:  rgba(255,255,255,.07);
  --dfsk-radius: 14px;
}
#dfsk-chat-btn {
  position: fixed; bottom: 88px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--dfsk-red); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 99998; box-shadow: 0 4px 20px rgba(232,33,42,.4);
  transition: transform .2s, opacity .2s;
}
#dfsk-chat-btn:hover { transform: scale(1.08); }
#dfsk-chat-btn.dfsk-right { right: 24px; }
#dfsk-chat-btn.dfsk-left  { left:  24px; }
#dfsk-chat-btn svg { width: 24px; height: 24px; fill: #fff; }
#dfsk-chat-btn .dfsk-pulse {
  position: absolute; top: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid #0a0a0a;
}
#dfsk-chat-window {
  position: fixed; bottom: 156px; width: 370px; height: 560px;
  background: var(--dfsk-dark); border-radius: var(--dfsk-radius);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 99999; box-shadow: 0 8px 40px rgba(0,0,0,.6);
  transition: opacity .2s, transform .2s;
  border: 1px solid rgba(232,33,42,.2);
}
#dfsk-chat-window.dfsk-right { right: 24px; }
#dfsk-chat-window.dfsk-left  { left:  24px; }
#dfsk-chat-window.dfsk-hidden { opacity:0; transform:translateY(12px) scale(.97); pointer-events:none; }

.dfsk-header {
  background: var(--dfsk-red); padding: 14px 16px;
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.dfsk-logo {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: 1px;
}
.dfsk-header-name { font-size: 13.5px; font-weight: 600; color: #fff; }
.dfsk-header-sub  { font-size: 11px; color: rgba(255,255,255,.7); margin-top: 1px; }
.dfsk-online { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; flex-shrink: 0; margin-left: auto; }
.dfsk-close-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.7); padding: 4px; display: flex; align-items: center;
}
.dfsk-close-btn:hover { color: #fff; }
.dfsk-close-btn svg { width: 18px; height: 18px; }

.dfsk-messages {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.dfsk-messages::-webkit-scrollbar { width: 3px; }
.dfsk-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

.dfsk-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 92%; }
.dfsk-msg.dfsk-bot  { align-self: flex-start; }
.dfsk-msg.dfsk-user { align-self: flex-end; flex-direction: row-reverse; }
.dfsk-av {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--dfsk-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; flex-shrink: 0; letter-spacing: .5px;
}
.dfsk-bubble { padding: 9px 13px; font-size: 13px; line-height: 1.55; word-break: break-word; }
.dfsk-bot  .dfsk-bubble { background: var(--dfsk-panel); color: var(--dfsk-text); border-radius: 4px 14px 14px 14px; }
.dfsk-user .dfsk-bubble { background: var(--dfsk-red); color: #fff; border-radius: 14px 14px 4px 14px; font-weight: 500; }

.dfsk-typing { display:flex; gap:3px; align-items:center; padding:9px 13px; }
.dfsk-typing span { width:5px; height:5px; border-radius:50%; background:#555; animation:dfsk-bounce 1.2s infinite; }
.dfsk-typing span:nth-child(2){animation-delay:.2s} .dfsk-typing span:nth-child(3){animation-delay:.4s}
@keyframes dfsk-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

.dfsk-chips {
  padding: 6px 12px 8px; display:flex; gap:5px; flex-wrap:wrap;
  border-top: 1px solid var(--dfsk-border); background: var(--dfsk-dark); flex-shrink:0;
}
.dfsk-chip {
  font-size: 11.5px; border: 1px solid rgba(232,33,42,.4);
  border-radius: 14px; padding: 4px 11px; cursor: pointer;
  background: transparent; color: #ff6666; font-family: inherit;
  transition: all .15s; white-space: nowrap;
}
.dfsk-chip:hover { background: var(--dfsk-red); color: #fff; border-color: var(--dfsk-red); }

.dfsk-input-row {
  display:flex; gap:8px; padding:10px 12px;
  background: var(--dfsk-dark); border-top: 1px solid var(--dfsk-border); flex-shrink:0;
}
.dfsk-input {
  flex:1; background: var(--dfsk-input); border: 1px solid var(--dfsk-border);
  border-radius: 18px; padding: 8px 14px; font-size: 13px;
  color: var(--dfsk-text); outline: none; font-family: inherit;
}
.dfsk-input::placeholder { color: rgba(255,255,255,.25); }
.dfsk-input:focus { border-color: rgba(232,33,42,.5); }
.dfsk-send {
  width:34px; height:34px; border-radius:50%;
  background: var(--dfsk-red); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.dfsk-send:hover { opacity:.85; }
.dfsk-send:disabled { opacity:.4; cursor:not-allowed; }
.dfsk-send svg { width:16px; height:16px; }

/* Dealer cards */
.dfsk-dealer-cards { display:flex; gap:8px; overflow-x:auto; padding:6px 0 4px; }
.dfsk-dealer-cards::-webkit-scrollbar { height:3px; }
.dfsk-dealer-cards::-webkit-scrollbar-thumb { background:rgba(232,33,42,.3); border-radius:3px; }
.dfsk-dealer-card {
  background: var(--dfsk-panel); border: 1px solid rgba(232,33,42,.2);
  border-radius: 10px; padding: 12px; flex-shrink:0; width: 200px;
}
.dfsk-dealer-name { font-size: 12.5px; font-weight: 600; color: var(--dfsk-text); margin-bottom: 2px; }
.dfsk-dealer-city { font-size: 11px; color: #ff6666; margin-bottom: 6px; }
.dfsk-dealer-addr { font-size: 11.5px; color: rgba(245,245,245,.55); line-height:1.5; margin-bottom:6px; }
.dfsk-dealer-dist { font-size: 11px; color: #4ade80; margin-bottom: 6px; }
.dfsk-dealer-btns { display:flex; gap:5px; margin-top:6px; }
.dfsk-dealer-btn {
  font-size: 11px; border-radius: 6px; padding: 4px 8px; cursor:pointer;
  font-family: inherit; flex:1; text-align:center; transition:all .15s;
  text-decoration: none; display:block;
  border: 1px solid rgba(232,33,42,.4); background: transparent; color: #ff6666;
}
.dfsk-dealer-btn:hover, .dfsk-dealer-btn.solid { background: var(--dfsk-red); color:#fff; border-color: var(--dfsk-red); }
.dfsk-dealer-btn.solid:hover { opacity:.85; }

/* Lead / form */
.dfsk-lead-form { background: var(--dfsk-panel); border-radius:10px; padding:12px; margin-top:4px; width:100%; }
.dfsk-lead-form p { font-size:12px; color:#888; margin-bottom:8px; }
#dfsk-chatbot-root input.dfsk-lead-input {
  all: unset; display:block !important; width:100% !important; box-sizing:border-box !important;
  background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important; padding: 8px 11px !important; font-size: 13px !important;
  color: #f5f5f5 !important; font-family: inherit !important; margin-bottom: 7px !important; outline:none !important;
}
#dfsk-chatbot-root input.dfsk-lead-input::placeholder { color: rgba(255,255,255,.3) !important; }
#dfsk-chatbot-root input.dfsk-lead-input:focus { border-color: rgba(232,33,42,.6) !important; }
.dfsk-lead-submit {
  width:100%; background: var(--dfsk-red); color:#fff; border:none;
  border-radius:8px; padding:9px; font-size:13px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:opacity .15s;
}
.dfsk-lead-submit:hover { opacity:.85; }
.dfsk-lead-submit:disabled { opacity:.5; cursor:not-allowed; }

.dfsk-loc-btn {
  display:flex; align-items:center; gap:6px;
  background: rgba(232,33,42,.12); border: 1px solid rgba(232,33,42,.3);
  color: #ff6666; border-radius:8px; padding: 6px 12px;
  font-size: 12px; cursor:pointer; font-family:inherit; margin: 4px 0; transition:all .15s;
}
.dfsk-loc-btn:hover { background: var(--dfsk-red); color:#fff; }

@media(max-width:420px){
  #dfsk-chat-window { width:calc(100vw - 24px); right:12px !important; left:12px !important; bottom:140px; }
  #dfsk-chat-btn { bottom:76px; }
}