/* ===== Chat — estilos específicos, usando tokens do global.css ===== */

/* layout geral do chat */
.chat-layout{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ---------- Friendbar ---------- */
.friendbar__body{
  padding:16px;
  display:flex;
  align-items:center;
  gap:14px;
}
.friendbar__avatar{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:3px solid var(--brand);
}
.friendbar__info{min-width:0; flex:1}
.friendbar__row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.friendbar__name{line-height:1}

/* ---------- Chat card ---------- */
.chat__body{ padding:0 }
.chat{
  display:flex; flex-direction:column;
}
.chat__list{
  list-style:none;
  height:60svh;
  overflow:auto;
  padding:16px;
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}

/* Separador de dia */
.day-sep{
  align-self:center; font-size:.85rem; color:var(--muted);
  background:#f8fafc; border:1px solid var(--line); padding:4px 10px; border-radius:999px; margin:8px 0 2px;
}

/* Mensagens */
.msg{
  max-width:72%;
  padding:10px 12px;
  border-radius:14px;
  position:relative;
  display:flex; flex-direction:column; gap:4px;
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
  color:var(--ink);
}
.msg--in{  align-self:flex-start;  background:#f8fafc; }
.msg--out{ align-self:flex-end;    background:var(--brand-50); border-color:#ffd7bf; }

.msg__text{ white-space:pre-wrap; word-wrap:break-word }
.msg__meta{
  display:flex; align-items:center; gap:8px; justify-content:flex-end;
  color:var(--muted); font-size:.82rem;
}
.msg__status{ display:inline-flex; align-items:center; gap:4px; opacity:.9 }
.msg__status .fa-check{ opacity:.85 }
.msg__status.read .fa-check-double{ opacity:1 }
.msg__status.read .fa-check{ display:none }
.msg__status:not(.read) .fa-check-double{ display:none }

/* Rodapé do chat + form */
.chat__footer{
  border-top:1px solid var(--line);
  padding:12px; background:#fff;
  border-radius:0 0 var(--radius) var(--radius);
}
.chat__form{ display:flex; gap:10px }
.chat__input{ flex:1 }

/* Responsivo */
@media (max-width: 520px){
  .msg{ max-width:86% }
}