/* =============================================
   Chat — usa tokens do /css/global-pages.css
   ============================================= */

/* Layout da barra de status */
.statusbar__body{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.statusbar__left, .statusbar__right{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}

/* Fase + Timer */
.phase{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:var(--brand-50); color:var(--brand); font-weight:700;
  border:1px solid var(--line);
}
.phase__label{ opacity:.75 }
.timer{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:#0f766e; font-weight:700;
}

/* Parceiro */
.partner{ display:flex; align-items:center; gap:10px; }
.partner__avatar{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-weight:800;
  background:#f1f5f9; border:1px solid var(--line); color:var(--ink);
}
.partner__meta{ display:flex; flex-direction:column; line-height:1.15 }
.partner__name{ font-weight:800 }
.partner__sub{ font-size:.9rem }

/* Área do chat */
.chat{ display:flex; flex-direction:column; }
.chat__body{ padding:12px 12px 0 12px; }
.chat__list{
  height:60svh; overflow:auto; display:flex; flex-direction:column; gap:10px;
}

/* Mensagens */
.msg{
  max-width:72%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.msg--recv{ align-self:flex-start; background:#f8fafc; }
.msg--sent{ align-self:flex-end;   background:var(--brand-50); border-color:rgba(255,106,0,.25); }
.msg__meta{
  display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.86rem; margin-bottom:4px;
}
.msg__name{ font-weight:700; color:var(--ink); }
.msg__age{ font-weight:600 }
.msg__time{ margin-left:auto; white-space:nowrap }
.msg__text{ white-space:pre-wrap; word-wrap:break-word; }

/* Mensagem de sistema (dentro do fluxo) */
.msg--system{
  align-self:center; max-width:90%;
  background:#f1f5f9; border:1px solid var(--line);
  text-align:center; font-style:italic;
}

/* Composer */
.chat__footer{
  border-top:1px solid var(--line);
  padding:12px; background:#fff; border-radius:0 0 var(--radius) var(--radius);
}
.composer{ display:flex; gap:10px; }
.composer__input{ flex:1; }

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