:root{
  --kda-bg:#ffffff;
  --kda-border:#e2e8f0;
  --kda-muted:#64748b;
  --kda-surface:#f8fafc;
  --kda-accent:#3b82f6; /* default, can be overridden inline on widget */
  --kda-bubble-u:#e8f0ff;
  --kda-bubble-a:#f1f5f9;
  --kda-shadow:0 12px 28px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --kda-bg:#0b1220;
    --kda-border:#1f2a44;
    --kda-muted:#8aa0c2;
    --kda-surface:#0f172a;
    --kda-accent:#60a5fa;
    --kda-bubble-u:#0b2a5a;
    --kda-bubble-a:#111827;
    --kda-shadow:0 12px 28px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.4);
  }
}

/* Floating positions */
.kda-pos-br{ right:16px; bottom:16px; }
.kda-pos-bl{ left:16px; bottom:16px; }

/* Launcher */
.kda-launcher{
  position:fixed; z-index:999999; width:56px; height:56px; border-radius:999px;
  border:1px solid var(--kda-border); background:var(--kda-bg); box-shadow:var(--kda-shadow);
  font-size:22px; line-height:56px; text-align:center; cursor:pointer;
}
.kda-launcher.kda-hide{ display:none; }

/* Widget */
.kda-widget{
  border:1px solid var(--kda-border); border-radius:14px; max-width:380px; width:380px;
  background:var(--kda-bg); box-shadow:var(--kda-shadow); overflow:hidden;
  color:#0f172a; position:relative;
}
.kda-floating{ position:fixed; z-index:999999; }
@media (max-width: 640px){
  .kda-widget.kda-floating{ width:calc(100vw - 24px); max-width:none; left:12px !important; right:12px !important; bottom:12px !important; }
}
.kda-hidden{ display:none; }

.kda-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--kda-border);background:var(--kda-surface);}
.kda-title-wrap{display:flex;flex-direction:column;gap:2px}
.kda-title{font-weight:700}
.kda-sub{font-size:12px;color:var(--kda-muted)}
.kda-actions{display:flex;gap:6px}
.kda-actions button{
  background:#f1f5f9;color:#111;border:1px solid #cbd5e1;border-radius:10px;padding:6px 8px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s; font-weight:700;
}
.kda-actions button:hover{ background:var(--kda-accent);color:#fff;border-color:var(--kda-accent); }

.kda-messages{height:340px;overflow:auto;padding:12px;scrollbar-width:thin}
.kda-messages::-webkit-scrollbar{width:10px}
.kda-messages::-webkit-scrollbar-thumb{background:var(--kda-border);border-radius:10px}

.kda-msg{padding:8px 10px;border-radius:12px;margin:6px 0;white-space:pre-wrap;line-height:1.4; font-size:14px}
.kda-u{background:var(--kda-bubble-u);align-self:flex-end}
.kda-a{background:var(--kda-bubble-a)}

.kda-form{display:flex;gap:6px;padding:10px;border-top:1px solid var(--kda-border);background:var(--kda-surface); align-items:center}
.kda-input{flex:1;border:1px solid var(--kda-border);border-radius:10px;padding:10px 12px;outline:none; min-width:0}
.kda-input:focus{border-color:var(--kda-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--kda-accent) 30%, transparent)}
.kda-send{width:44px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--kda-accent);background:var(--kda-accent);color:#fff;border-radius:10px;font-weight:700;cursor:pointer}
.kda-send:hover{filter:brightness(0.95)}
.kda-mic{border:1px solid var(--kda-border);background:var(--kda-bg);border-radius:10px;padding:10px 12px;cursor:pointer;height:42px}
.kda-footnote{font-size:12px;color:var(--kda-muted);padding:8px 12px}