/* AGI CHAT — Compact Messages + Composer / 2026-10-22
   Design review: content-sized bubbles, metadata outside, minimal bottom controls. */
.chat-wall .msg-row{
  width:fit-content;
  max-width:min(91%,680px);
  min-width:0;
  margin-bottom:10px;
  gap:7px;
}
.chat-wall .msg-stack{
  display:flex;
  flex-direction:column;
  min-width:0;
  max-width:100%;
  align-items:flex-start;
}
.chat-wall .msg-row.mine .msg-stack{align-items:flex-end}
.chat-wall .bubble{
  box-sizing:border-box;
  display:block;
  flex:0 1 auto;
  width:max-content;
  min-width:0;
  max-width:100%;
  padding:8px 12px 7px;
  border-radius:16px 16px 16px 6px;
  font-size:14px;
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:normal;
  box-shadow:none;
}
.chat-wall .mine .bubble{border-radius:16px 16px 6px 16px}
.chat-wall .message-meta{
  display:flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  justify-content:flex-end;
  align-self:flex-end;
  flex-wrap:nowrap;
  gap:6px;
  margin:3px 2px 0;
  min-height:18px;
  font-size:10px;
  line-height:1.2;
  opacity:.8;
  font-variant-numeric:tabular-nums;
}
.chat-wall .theirs .message-meta{align-self:flex-start}
.chat-wall .message-menu-trigger{
  height:25px;
  min-width:27px;
  width:27px;
  margin:0 0 0 1px;
  padding:0;
  color:var(--muted,#74816d);
  opacity:.8;
  border-radius:8px;
  font-size:19px;
}
.chat-wall .mine .delivery-status{color:#639749}
.chat-wall .msg-actions{max-width:min(88vw,380px)}
.chat-wall .msg-row .bubble img{max-width:100%}
.chat-wall .msg-row .bubble:has(.message-photo){padding:4px}
.chat-wall .msg-row .bubble:has(.quoted-message){max-width:min(100%,360px)}
/* The sender input should feel like one concise control, not a toolbar with a footer. */
.composer-area{
  padding:7px 12px calc(7px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line,#e9ece5);
}
.composer-inner{max-width:690px}
.composer{
  min-height:48px;
  gap:3px;
  padding:3px 5px 3px 7px;
  border:1px solid #dfe7d6;
  border-radius:27px;
  background:#f5f6f1;
  box-shadow:none;
}
.composer .icon-btn,.composer .emoji-toggle{
  width:37px;
  min-width:37px;
  height:40px;
  border-radius:50%;
}
.composer textarea,.composer textarea:focus{
  min-height:24px;
  padding:4px 1px;
  line-height:1.4;
  font-size:16px;
  align-self:center;
}
.composer .send-btn{
  width:40px;
  min-width:40px;
  height:40px;
  border-radius:50%;
}
.composer:focus-within{
  border-color:#a5d765;
  box-shadow:0 0 0 2px #b5e8781a;
}
.composer-warning{
  color:#ab4d60;
  font-size:11px;
  line-height:1.5;
  margin:8px 3px 0;
}
.composer-hint{display:none!important}
@media(max-width:700px){
  .chat-wall .msg-row{max-width:92%;margin-bottom:8px}
  .chat-wall .bubble{
    padding:7px 11px 6px;
    font-size:14px;
    border-radius:15px 15px 15px 5px;
    line-height:1.44;
  }
  .chat-wall .mine .bubble{border-radius:15px 15px 5px 15px}
  .chat-wall .message-meta{font-size:10px;gap:5px;margin-top:2px}
  .composer-area{padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px))}
  .composer{min-height:47px;padding:3px 5px;gap:2px}
  .composer .icon-btn,.composer .emoji-toggle{width:36px;min-width:36px;height:39px}
  .composer .send-btn{width:40px;min-width:40px;height:40px}
  .composer textarea{min-height:25px;padding:3px 1px}
}
@media(max-width:370px){
  .composer-area{padding-left:7px;padding-right:7px}
  .composer .icon-btn,.composer .emoji-toggle{width:33px;min-width:33px}
  .chat-wall .msg-row{max-width:94%}
}
html[data-theme="dark"] .composer{background:#283028;border-color:#3a4938}
html[data-theme="dark"] .chat-wall .message-menu-trigger{color:#b2bfb1}
html[data-theme="dark"] .chat-wall .mine .message-meta{color:#abbfa1}
html[data-theme="dark"] .chat-wall .mine .delivery-status{color:#85bd6f}
@media(prefers-reduced-motion:reduce){.composer,.bubble{transition:none}}