.zcsbot-root { position: fixed; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 999999; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.zcsbot-fab { width: 56px; height: 56px; border-radius: 999px; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-weight: 600; }
.zcsbot-root.light .zcsbot-fab { background: #111827; color: #fff; }
.zcsbot-root.dark  .zcsbot-fab { background: #f9fafb; color: #111827; }

.zcsbot-panel { position: absolute; left: 0; bottom: 70px; width: 380px; max-width: calc(100vw - 36px); height: 520px; max-height: calc(100vh - 120px); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.22); transform: translateY(10px); opacity: 0; pointer-events: none; transition: .18s ease; display: flex; flex-direction: column; }
.zcsbot-root.light .zcsbot-panel { background: #fff; color: #111827; border: 1px solid rgba(0,0,0,.08); }
.zcsbot-root.dark  .zcsbot-panel { background: #0b1220; color: #e5e7eb; border: 1px solid rgba(255,255,255,.10); }

.zcsbot-panel.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.zcsbot-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px; }
.zcsbot-title { font-weight: 700; }
.zcsbot-close { border: none; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: inherit; opacity: .7; }
.zcsbot-close:hover { opacity: 1; }

.zcsbot-body { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.zcsbot-footer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(0,0,0,.08); }
.zcsbot-root.dark .zcsbot-footer { border-top: 1px solid rgba(255,255,255,.10); }

.zcsbot-input { flex: 1; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); padding: 10px 10px; outline: none; }
.zcsbot-root.dark .zcsbot-input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #e5e7eb; }
.zcsbot-send { border-radius: 10px; padding: 10px 12px; border: none; cursor: pointer; font-weight: 600; }
.zcsbot-root.light .zcsbot-send { background: #111827; color: #fff; }
.zcsbot-root.dark  .zcsbot-send { background: #f9fafb; color: #111827; }

.zcsbot-msg { display: flex; flex-direction: column; gap: 6px; }
.zcsbot-msg.user { align-items: flex-end; }
.zcsbot-msg.assistant { align-items: flex-start; }
.zcsbot-bubble { max-width: 86%; display: inline-block; padding: 10px 10px; border-radius: 12px; font-size: 14px; line-height: 1.35; white-space: pre-wrap; }
.zcsbot-msg.user .zcsbot-bubble { background: rgba(17,24,39,.10); }
.zcsbot-root.dark .zcsbot-msg.user .zcsbot-bubble { background: rgba(255,255,255,.10); }
.zcsbot-msg.assistant .zcsbot-bubble { background: rgba(0,0,0,.06); }
.zcsbot-root.dark .zcsbot-msg.assistant .zcsbot-bubble { background: rgba(255,255,255,.08); }

.zcsbot-sources { margin-top: 2px; max-width: 86%; font-size: 12px; opacity: .9; }
.zcsbot-sources-title { font-weight: 700; margin-bottom: 4px; }
.zcsbot-sources ul { margin: 0; padding-left: 18px; }
.zcsbot-sources li { margin: 2px 0; }
.zcsbot-sources a { color: inherit; text-decoration: underline; }

.zcsbot-lead { margin-top: 10px; padding: 10px; border-radius: 12px; border: 1px solid rgba(0,0,0,.10); }
.zcsbot-root.dark .zcsbot-lead { border: 1px solid rgba(255,255,255,.14); }
.zcsbot-lead-title { font-weight: 800; margin-bottom: 6px; }
.zcsbot-lead-text { font-size: 13px; opacity: .9; margin-bottom: 10px; }
.zcsbot-lead-input, .zcsbot-lead-textarea { width: 100%; box-sizing: border-box; margin: 6px 0; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); outline: none; font-size: 14px; }
.zcsbot-root.dark .zcsbot-lead-input, .zcsbot-root.dark .zcsbot-lead-textarea { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #e5e7eb; }
.zcsbot-lead-textarea { min-height: 70px; resize: vertical; }
.zcsbot-lead-submit { width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 10px; border: none; cursor: pointer; font-weight: 700; }
.zcsbot-root.light .zcsbot-lead-submit { background: #111827; color: #fff; }
.zcsbot-root.dark  .zcsbot-lead-submit { background: #f9fafb; color: #111827; }
.zcsbot-lead-status { margin-top: 8px; font-size: 13px; opacity: .9; }
.zcsbot-sources a { word-break: break-word; }

/* Overlay (mobile) + scroll lock */
.zcsbot-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.40); opacity: 0; pointer-events: none; transition: .18s ease; }
.zcsbot-overlay.open { opacity: 1; pointer-events: auto; }
body.zcsbot-no-scroll { overflow: hidden !important; }

/* Header + footer polish */
.zcsbot-header { border-bottom: 1px solid rgba(0,0,0,.08); }
.zcsbot-root.dark .zcsbot-header { border-bottom: 1px solid rgba(255,255,255,.10); }
.zcsbot-footer { background: rgba(0,0,0,.02); }
.zcsbot-root.dark .zcsbot-footer { background: rgba(255,255,255,.04); }

/* Better buttons + focus */
.zcsbot-fab { display:flex; align-items:center; justify-content:center; }
.zcsbot-send, .zcsbot-lead-submit { transition: transform .06s ease, opacity .12s ease; }
.zcsbot-send:active, .zcsbot-lead-submit:active { transform: scale(.98); }
.zcsbot-input:focus, .zcsbot-lead-input:focus, .zcsbot-lead-textarea:focus { box-shadow: 0 0 0 3px rgba(59,130,246,.20); }

/* Mobile responsive */
@media (max-width: 520px) {
  .zcsbot-root { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .zcsbot-overlay { display: block; }
  .zcsbot-panel { position: fixed; left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); width: auto; max-width: none; height: min(72vh, 680px); max-height: none; border-radius: 16px; }
  .zcsbot-body { padding: 12px; gap: 12px; }
  .zcsbot-bubble { font-size: 15px; line-height: 1.45; }
  .zcsbot-input { font-size: 16px; } /* prevent iOS zoom */
  .zcsbot-send { padding: 10px 14px; }
}

@media (min-width: 521px) {
  .zcsbot-overlay { display: none; }
}


/* Modern SaaS v0.2.9 */
.zcsbot-panel{box-shadow:0 18px 55px rgba(0,0,0,.20);}
.zcsbot-root.dark .zcsbot-panel{box-shadow:0 18px 55px rgba(0,0,0,.55);}
.zcsbot-header{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.zcsbot-header-left{display:flex;align-items:center;gap:10px;min-width:0;}
.zcsbot-title{font-weight:700;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.zcsbot-brandmark{width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(59,130,246,.12);overflow:hidden;flex:0 0 34px;}
.zcsbot-root.dark .zcsbot-brandmark{background:rgba(59,130,246,.22);}
.zcsbot-logo{width:100%;height:100%;object-fit:contain;padding:6px;}
.zcsbot-logo-fallback{font-size:18px;}
.zcsbot-row{display:flex;gap:10px;align-items:flex-end;}
.zcsbot-msg.user .zcsbot-row{justify-content:flex-end;}
.zcsbot-msg.assistant .zcsbot-row{justify-content:flex-start;}
.zcsbot-avatar{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.06);overflow:hidden;flex:0 0 30px;}
.zcsbot-root.dark .zcsbot-avatar{background:rgba(255,255,255,.10);}
.zcsbot-avatar-img{width:100%;height:100%;object-fit:contain;padding:5px;}
.zcsbot-avatar-fallback{font-size:16px;}
.zcsbot-bubble{border-radius:16px;padding:10px 12px;}
.zcsbot-msg.assistant .zcsbot-bubble{border-top-left-radius:8px;}
.zcsbot-msg.user .zcsbot-bubble{border-top-right-radius:8px;}
.zcsbot-typing .zcsbot-bubble{min-height:22px;display:flex;align-items:center;}
.zcsbot-dots{display:flex;gap:6px;padding:2px 0;}
.zcsbot-dot{width:6px;height:6px;border-radius:999px;background:currentColor;opacity:.35;animation:zcsbotDot 1s infinite;}
.zcsbot-dot:nth-child(2){animation-delay:.15s;}
.zcsbot-dot:nth-child(3){animation-delay:.30s;}
@keyframes zcsbotDot{0%,80%,100%{transform:translateY(0);opacity:.35;}40%{transform:translateY(-4px);opacity:.8;}}
.zcsbot-suggestions{padding:10px 12px 0 12px;}
.zcsbot-suggestions.hide{display:none;}
.zcsbot-suggestions-title{font-size:12px;opacity:.7;margin-bottom:8px;}
.zcsbot-suggestions-chips{display:flex;flex-wrap:wrap;gap:8px;}
.zcsbot-chip{border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.02);padding:8px 10px;border-radius:999px;font-size:13px;cursor:pointer;}
.zcsbot-chip:hover{background:rgba(0,0,0,.05);}
.zcsbot-root.dark .zcsbot-chip{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06);}
.zcsbot-root.dark .zcsbot-chip:hover{background:rgba(255,255,255,.10);}
@media (max-width:520px){
  .zcsbot-avatar{width:28px;height:28px;flex-basis:28px;}
  .zcsbot-brandmark{width:32px;height:32px;border-radius:12px;}
  .zcsbot-chip{font-size:14px;}
}