/* ── Messages ── */
.messages { flex: 1; overflow-y: auto; padding: 18px 0; scroll-behavior: smooth; }
.messages::-webkit-scrollbar { width: 3px; }
.messages::-webkit-scrollbar-thumb { background: var(--b1); border-radius: 2px; }

.msg-row {
  display: flex; padding: 3px 18px; gap: 9px;
  max-width: 760px; margin: 0 auto; width: 100%;
  animation: msg-in .18s ease;
}

.av {
  width: 25px; height: 25px; border-radius: 6px;
  flex-shrink: 0; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; margin-top: 2px;
}
.av-bot  { background: var(--ac); color: #fff; }
.av-user { background: var(--panel); color: var(--t2); border: 1px solid var(--b2); }

.bubble    { flex: 1; min-width: 0; }
.bub-name  { font-size: 10px; color: var(--t3); font-weight: 500; margin-bottom: 3px; font-family: var(--mono); }
.bub-text  { font-size: 14px; line-height: 1.65; color: var(--t1); }
.bub-text p              { margin-bottom: 6px; }
.bub-text p:last-child   { margin-bottom: 0; }

.stage-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
  padding: 2px 8px; background: var(--acbg); border-radius: 20px;
  font-size: 10px; font-family: var(--mono); color: var(--t3);
}
.stage-tag-dot { width: 5px; height: 5px; background: var(--ac); border-radius: 50%; }

/* Typing dots */
.typing { display: flex; gap: 4px; padding: 3px 0; }
.typing span { width: 5px; height: 5px; background: var(--t3); border-radius: 50%; animation: bounce 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 0%,60%,100%{transform:none} 30%{transform:translateY(-5px)} }

/* Empty state */
.empty-state {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 9px; color: var(--t3); padding: 32px; text-align: center;
}
.empty-icon {
  width: 42px; height: 42px; background: var(--panel);
  border: 1px solid var(--b2); border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 3px;
}
.empty-title { font-size: 15px; font-weight: 500; color: var(--t2); }
.empty-sub   { font-size: 12px; max-width: 270px; line-height: 1.6; }

.quick-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.quick-btn {
  padding: 6px 12px; background: var(--panel); border: 1px solid var(--b2);
  color: var(--t2); border-radius: 20px; font-size: 12px; font-family: var(--sans);
  cursor: pointer; transition: .15s;
}
.quick-btn:hover { background: var(--acbg); border-color: rgba(59,124,247,.3); color: var(--ac); }

/* ── Input area ── */
.input-area { padding: 11px 18px 15px; flex-shrink: 0; background: linear-gradient(transparent, var(--bg) 28%); }
.input-box {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 7px;
  background: var(--surface); border: 1px solid var(--b2);
  border-radius: 11px; padding: 8px 8px 8px 13px; transition: .15s;
}
.input-box:focus-within { border-color: rgba(59,124,247,.5); box-shadow: 0 0 0 3px rgba(59,124,247,.06); }

.input-box textarea {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--t1); font-family: var(--sans); font-size: 14px;
  line-height: 1.5; resize: none; min-height: 22px; max-height: 130px;
}
.input-box textarea::placeholder { color: var(--t3); }

.send-btn {
  width: 31px; height: 31px; background: var(--ac); border: none;
  border-radius: 7px; color: #fff; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0; transition: .15s;
}
.send-btn:hover   { background: var(--ac2); }
.send-btn:active  { transform: scale(.93); }
.send-btn:disabled { background: var(--b2); cursor: not-allowed; }

.input-hint { max-width: 760px; margin: 4px auto 0; font-size: 11px; color: var(--t3); display: flex; gap: 10px; padding: 0 3px; }
.input-hint kbd { font-family: var(--mono); padding: 1px 4px; background: var(--panel); border-radius: 3px; border: 1px solid var(--b2); }