/* Chat widget for the web demos. Flat on purpose: a bordered panel and plain
   bubbles, sitting above the sticky demo nav (z-index 50). */

.cb-launch{
  position:fixed;right:18px;bottom:18px;z-index:60;
  width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;
  background:var(--brand);color:var(--brand-on);box-shadow:var(--shadow-2);
}
.cb-launch svg{width:26px;height:26px}

.cb-panel{
  position:fixed;right:18px;bottom:86px;z-index:61;
  width:360px;max-height:min(560px,calc(100vh - 120px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line-strong);
  border-radius:var(--radius);box-shadow:var(--shadow-2);
}
.cb-panel[hidden]{display:none}

.cb-head{
  display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.cb-head b{font-size:16px;line-height:1.4}
.cb-head small{grid-column:1/-1;color:var(--muted);font-size:12.5px;line-height:1.4}
.cb-close{border:0;background:none;cursor:pointer;color:var(--muted);font-size:22px;line-height:1.3;padding:2px 6px}

.cb-log{
  flex:1;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;gap:8px;background:var(--bg-alt);
}
.cb-msg{max-width:85%;padding:8px 11px;border-radius:var(--radius-sm);font-size:15px;line-height:1.55;white-space:pre-line}
.cb-bot{align-self:flex-start;background:var(--card);border:1px solid var(--line)}
.cb-you{align-self:flex-end;background:var(--brand);color:var(--brand-on)}

.cb-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:1px solid var(--line)}
.cb-chips:empty{display:none}
.cb-chips button,.cb-copy{
  border:1px solid var(--brand-line);background:var(--brand-soft);color:var(--brand-ink);
  border-radius:999px;padding:5px 11px;font:inherit;font-size:14px;line-height:1.4;cursor:pointer;
}
.cb-copy{border-radius:var(--radius-sm);margin-top:6px}

.cb-form{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--line)}
.cb-form input{
  flex:1;min-width:0;padding:8px 10px;font:inherit;font-size:15px;line-height:1.4;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
}
.cb-form button{
  border:0;border-radius:var(--radius-sm);padding:8px 14px;cursor:pointer;
  background:var(--brand);color:var(--brand-on);font:inherit;font-size:15px;line-height:1.4;
}

.cb-out{
  display:block;width:100%;min-height:130px;resize:none;padding:8px;
  font:13.5px/1.55 var(--font-bn);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-sm);
}

@media (max-width:480px){
  .cb-panel{left:0;right:0;bottom:0;width:auto;max-height:80vh;border-radius:var(--radius) var(--radius) 0 0}
}