/* ============================================================
   Zaal 22 - contact page FAQ chat widget
   Scoped to .zbot-* classes, reuses styles.css design tokens
   ============================================================ */

.zbot{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(22px,3vw,32px);
}

/* ---------- Launcher ---------- */
.zbot-launcher{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.zbot-launcher[hidden]{display:none}
.zbot-launcher h2{margin:0 0 8px}
.zbot-launcher .muted{max-width:52ch;margin:0}

/* ---------- Panel ---------- */
.zbot-panel{
  display:flex;flex-direction:column;
  max-height:520px;
}
.zbot-panel[hidden]{display:none}
.zbot-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.zbot-panel-title{font-weight:700;font-size:1.15rem;color:var(--ink);margin:0}
.zbot-close{
  background:none;border:0;cursor:pointer;color:var(--ink-soft);
  font-size:1.5rem;line-height:1;padding:4px 8px;
}
.zbot-close:hover{color:var(--terra)}

.zbot-log{
  overflow-y:auto;padding-right:4px;margin-bottom:14px;
  display:flex;flex-direction:column;gap:10px;
}
.zbot-msg{
  max-width:80%;padding:10px 16px;border-radius:14px;
  font-size:.98rem;line-height:1.5;
}
.zbot-msg a{color:inherit;text-decoration:underline}
.zbot-msg-bot{
  align-self:flex-start;background:var(--paper);border:1px solid var(--line);
  color:var(--ink);border-bottom-left-radius:4px;
}
.zbot-msg-user{
  align-self:flex-end;background:var(--ink);color:var(--paper);
  border-bottom-right-radius:4px;
}

.zbot-topics{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;
}
.zbot-topic-btn{
  background:transparent;border:1px solid var(--line-strong);border-radius:999px;
  padding:8px 16px;font-size:.88rem;color:var(--ink);cursor:pointer;
  transition:border-color .15s,color .15s;
}
.zbot-topic-btn:hover{border-color:var(--terra);color:var(--terra-deep)}

.zbot-form{display:flex;gap:10px}
.zbot-input{
  flex:1;padding:12px 16px;border-radius:999px;border:1px solid var(--ink);
  background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;
}
.zbot-input:focus{outline:2px solid var(--terra);outline-offset:1px}
.zbot-send{padding:12px 22px}

@media (max-width:640px){
  .zbot-launcher{align-items:flex-start}
  .zbot-panel{max-height:70vh}
  .zbot-msg{max-width:92%}
}