/* apps/chat.css —— 聊天页自己的样式（页面骨架和通用零件在 ui.css）。 */

/* =========================================================================
   九、页面 1：聊天
   ========================================================================= */
.trpb-chat-list{
  flex:1 1 auto; overflow-y:auto; padding:18px 14px 10px;
  display:flex; flex-direction:column; gap:14px;
  scrollbar-width:thin; scrollbar-color:var(--trpb-scroll) transparent;
}

.trpb-msg{ display:flex; flex-direction:column; gap:6px; max-width:80%; }

.trpb-msg--char{ align-self:flex-start; align-items:flex-start; }

.trpb-msg--me{ align-self:flex-end; align-items:flex-end; }

.trpb-msg-meta{
  font-family:var(--trpb-mono); font-size:var(--trpb-font-small); letter-spacing:.06em;
  color:var(--trpb-text-dim);
}

.trpb-bubble{
  padding:10px 13px; border-radius:var(--trpb-radius);
  background:var(--trpb-surface); border:1px solid var(--trpb-line);
  color:var(--trpb-text); font-size:var(--trpb-font-body); box-shadow:var(--trpb-shadow-1);
}

.trpb-msg--me .trpb-bubble{
  background:var(--trpb-accent-soft); border-color:var(--trpb-accent-line);
  color:var(--trpb-text-strong); box-shadow:none;
}

.trpb-composer{
  flex:0 0 auto; display:flex; gap:9px; padding:10px 14px 16px;
  border-top:1px solid var(--trpb-line);
}

.trpb-send{
  appearance:none; flex:0 0 auto; width:40px; height:40px; border-radius:11px;
  background:var(--trpb-accent); border:1px solid var(--trpb-accent-line);
  color:var(--trpb-on-accent);
  display:grid; place-items:center; cursor:pointer;
  transition:transform 120ms ease, filter 120ms ease;
}

.trpb-send:active{ transform:translateY(1px); filter:brightness(.86); }

.trpb-send:focus-visible{ box-shadow:var(--trpb-ring); }