:root{
  --bubble-radius: 14px;
  --bubble-pad-v: 10px;
  --bubble-pad-h: 14px;

  --sky-600: #0284c7;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --white: #ffffff;

  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.06);
}

/* bubbles */
.bubble{
  max-width: 80%;
  border-radius: var(--bubble-radius);
  padding: var(--bubble-pad-v) var(--bubble-pad-h);
  word-break: break-word;
  box-shadow: var(--shadow);
  line-height: 1.5;
  font-size: .95rem;
  animation: bubbleIn .18s ease-out both;
}
.bubble pre{ white-space: pre-wrap; word-break: break-word; }
@keyframes bubbleIn { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* links must be clickable */
.bubble a{ color:#0369a1; text-decoration: underline; pointer-events:auto; }
.bubble a:hover{ text-decoration-thickness: 2px; }

/* typing */
.typing{ opacity:.85; display:inline-flex; align-items:center; gap:4px; }
.typing .dot{ width:6px; height:6px; border-radius:9999px; background:#CBD5E1; animation: blink 1s infinite ease-in-out; }
.typing .dot:nth-child(2){ animation-delay:.15s; }
.typing .dot:nth-child(3){ animation-delay:.3s; }
@keyframes blink{ 0%,80%,100%{opacity:.3;transform:translateY(0)} 40%{opacity:1;transform:translateY(-2px)} }

/* chips */
.chip{
  border:1px solid var(--slate-200);
  background:var(--white);
  color:#334155;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:6px 10px; border-radius:9999px; font-size:12px; font-weight:500;
  cursor:pointer; transition:all .18s ease; user-select:none;
}
.chip:hover{ background:#f8fafc; }
.chip.active{ background:var(--sky-600); border-color:#0ea5e9; color:#fff; box-shadow:0 1px 2px rgba(2,132,199,.25); }
.dot{ width:6px; height:6px; border-radius:9999px; background:#22c55e; }

/* scroll */
#messages{ background:#fff; scroll-behavior:smooth; overscroll-behavior:contain; }
#messages::-webkit-scrollbar{ height:10px; width:10px; }
#messages::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:9999px; }
#messages::-webkit-scrollbar-track{ background:transparent; }

/* form fallbacks */
button[disabled]{ opacity:.6; cursor:not-allowed; }
input[type="text"],input[type="email"],textarea{ background:#fff; border:1px solid var(--slate-200); border-radius:.75rem; outline:none; }
input[type="text"]:focus,input[type="email"]:focus,textarea:focus{ border-color:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.25); }

/* error box */
#err{ border:1px solid #fecaca; background:#ffe4e6; color:#9f1239; border-radius:.75rem; }