.support-chat{
  height:min(640px,78dvh);
  min-height:480px;
  background:var(--surface);
  border:1px solid var(--border);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.support-chat header{
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
}
.support-chat .avatar{
  width:42px;
  height:42px;
  border-radius:0;
  background:var(--primary);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
}
.support-chat header div:nth-child(2){display:grid;gap:4px}
.support-chat header strong{font-size:15px}
.support-chat header span{font-size:12px;color:var(--muted)}
.support-chat header span i{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:#2f8f4e;margin-right:6px;
}
.support-chat .reset{
  margin-left:auto;
  width:40px;height:40px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
  font-size:18px;
}
.support-chat .messages{
  overflow:auto;
  padding:18px;
  display:grid;
  align-content:start;
  gap:12px;
  background:var(--background);
}
.support-chat .day{
  text-align:center;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.support-chat .bubble{
  max-width:42ch;
  padding:12px 14px;
  border:1px solid var(--border);
  background:var(--surface);
}
.support-chat .bubble p{margin:0 0 6px;font-size:15px;line-height:1.5}
.support-chat .bubble time{font-size:12px;color:var(--muted)}
.support-chat .bubble.user{
  margin-left:auto;
  background:var(--surface-2);
}
.support-chat .bubble.pending{opacity:.7}
.support-chat form{border-top:1px solid var(--border);background:var(--surface)}
.support-chat .identity{
  display:grid;
  gap:10px;
  padding:14px 16px 0;
}
.support-chat .identity label,
.support-chat .composer{
  display:grid;
  gap:6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
.support-chat input,
.support-chat textarea{
  font:400 16px/1.4 var(--font);
  color:var(--ink);
  border:1px solid var(--border);
  background:#fff;
  padding:10px 12px;
  text-transform:none;
  letter-spacing:0;
  width:100%;
}
.support-chat .composer{
  padding:14px 16px 10px;
  grid-template-columns:1fr auto;
  align-items:end;
}
.support-chat .composer textarea{min-height:48px;resize:none}
.support-chat .composer button{
  height:48px;
  padding:0 16px;
  border:0;
  background:var(--primary);
  color:#fff;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}
.support-chat .status{
  margin:0;
  padding:0 16px 14px;
  font-size:13px;
  color:var(--muted);
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
}
.support-chat .status.error{color:#9A3D20}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (max-width:899px){
  .support-chat{min-height:420px;height:min(560px,70dvh)}
}