:root {
  font-family: Inter, system-ui, sans-serif;
  color: #111827;
  background: #f4f5f7;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, textarea { font: inherit; }

.demo-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.demo-card {
  width: min(650px, 100%);
  padding: 48px;
  border-radius: 24px;
  background: white;
  box-shadow: 0 20px 50px rgba(17, 24, 39, .12);
}

.eyebrow { font-weight: 800; letter-spacing: .16em; }
.demo-card h1 { font-size: clamp(2rem, 5vw, 4rem); margin: 12px 0; }

.launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  border: 0;
  border-radius: 999px;
  padding: 15px 18px;
  color: white;
  background: #111827;
  box-shadow: 0 18px 40px rgba(17, 24, 39, .25);
}

.panel {
  position: fixed;
  right: 22px;
  bottom: 88px;
  width: min(390px, calc(100vw - 24px));
  height: min(680px, calc(100vh - 116px));
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  overflow: hidden;
  border-radius: 20px;
  background: white;
  box-shadow: 0 20px 50px rgba(17, 24, 39, .22);
}

.panel[hidden] { display: none; }

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  color: white;
  background: #111827;
}

.header small { display: block; margin-top: 4px; color: #86efac; }
.header button {
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  color: white;
  background: rgba(255,255,255,.12);
}

.messages {
  overflow-y: auto;
  padding: 16px;
}

.message {
  width: fit-content;
  max-width: 82%;
  margin-bottom: 12px;
  padding: 11px 13px;
  border-radius: 16px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.bot { background: #f3f4f6; }
.user { margin-left: auto; color: white; background: #111827; }

.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-actions button {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 8px 10px;
  background: white;
}

.typing { padding: 8px 16px; color: #6b7280; border-top: 1px solid #e5e7eb; }
.error {
  margin: 8px 16px 0;
  padding: 10px 12px;
  border-radius: 10px;
  color: #be123c;
  background: #fff1f2;
}

footer { padding: 10px 12px 12px; border-top: 1px solid #e5e7eb; }
.handoff {
  width: 100%;
  margin-bottom: 8px;
  padding: 9px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: white;
}

form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
textarea {
  min-height: 46px;
  max-height: 120px;
  resize: none;
  padding: 11px 12px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
}

#send {
  width: 46px;
  border: 0;
  border-radius: 12px;
  color: white;
  background: #111827;
}

.disclaimer { display: block; margin-top: 8px; text-align: center; color: #6b7280; }

@media (max-width: 560px) {
  .panel { inset: 0; width: 100%; height: 100dvh; border-radius: 0; }
  .launcher { right: 12px; bottom: 12px; }
}

.footer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
dialog{border:0;border-radius:16px;padding:0;box-shadow:0 20px 60px #11182744}
dialog::backdrop{background:#11182788}
.lead-form{display:grid;gap:10px;width:min(360px,90vw);padding:22px;background:#fff}
.lead-form h3{margin:0 0 5px}.lead-form input,.lead-form textarea{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:9px}
.lead-form div{display:flex;justify-content:flex-end;gap:8px}


[hidden]{display:none!important}
:root{
  --bg:#f4f5f7;--surface:#fff;--surface-soft:#f3f4f6;--text:#111827;
  --muted:#6b7280;--border:#e5e7eb;--brand:#111827;--brand-text:#fff;
}
:root[data-theme="dark"]{
  --bg:#0f172a;--surface:#111827;--surface-soft:#1f2937;--text:#f9fafb;
  --muted:#9ca3af;--border:#374151;--brand:#2563eb;--brand-text:#fff;
}
body{background:var(--bg);color:var(--text);transition:background .2s,color .2s}
.demo-card,.panel,.lead-form{background:var(--surface);color:var(--text)}
.bot{background:var(--surface-soft);color:var(--text)}
.user,.header,#send,.launcher{background:var(--brand);color:var(--brand-text)}
.quick-actions button,.handoff,.header button{border-color:var(--border)}
.quick-actions button,.handoff,.lead-form input,.lead-form textarea,textarea{background:var(--surface);color:var(--text)}
textarea,.lead-form input,.lead-form textarea{border-color:var(--border)}
.typing{display:flex;align-items:center;gap:4px;color:var(--muted)}
.typing span{width:6px;height:6px;border-radius:50%;background:currentColor;animation:typingPulse 1.2s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes typingPulse{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.message{animation:messageIn .18s ease-out}
@keyframes messageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#connectionStatus.offline{color:#fca5a5}#connectionStatus.online{color:#86efac}
#send:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:560px){
  .header{padding-top:max(16px,env(safe-area-inset-top))}
  footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}
}