#chat-toggle {
  overflow:visible;
  padding:0;
  border:3px solid #fff;
  background:#131820
}
#chat-toggle img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:52% 24%;
  border-radius:50%
}
.avatar-status {
  position:absolute;
  right:-1px;
  bottom:1px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#48df92;
  border:3px solid #0b0e14
}
#chat header .chat-identity {
  display:flex;
  align-items:center;
  gap:12px
}
#chat header .chat-identity>img {
  width:47px;
  height:47px;
  border-radius:50%;
  object-fit:cover;
  object-position:52% 24%;
  border:2px solid rgba(255, 255, 255, .8)
}
#chat header .chat-identity div {
  display:block
}
#chat header .chat-identity b {
  line-height:1.3
}
.calendar-note {
  display:flex;
  align-items:flex-start;
  gap:9px
}
.live-dot {
  flex:0 0 auto;
  width:8px;
  height:8px;
  margin-top:8px;
  border-radius:50%;
  background:#48df92;
  box-shadow:0 0 12px rgba(72, 223, 146, .7)
}
.availability {
  margin:18px 0 22px;
  padding:18px;
  background:#0b0f15;
  border:1px solid #29303b;
  border-radius:10px;
  min-height:130px
}
.availability-head {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  margin-bottom:14px
}
.availability-head strong {
  font-size:13px
}
.schedule-state {
  font-size:11px;
  color:#9ba5b4
}
.schedule-state.open {
  color:#48df92
}
.schedule-state.closed {
  color:#ff8865
}
.time-slots {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px
}
.time-slot {
  padding:9px 6px;
  border:1px solid #313946;
  border-radius:7px;
  background:#141a23;
  color:#dce2e9;
  font:600 12px "Segoe UI", sans-serif;
  box-shadow:none;
  cursor:pointer
}
.time-slot:hover:not(:disabled), .time-slot.selected {
  border-color:#E75526;
  background:rgba(231, 85, 38, .18);
  transform:none;
  box-shadow:none
}
.time-slot:disabled {
  opacity:.32;
  cursor:not-allowed;
  text-decoration:line-through
}
.slot-placeholder {
  grid-column:1/-1;
  color:#77818e;
  font-size:12px;
  padding:14px 0
}
.availability.loading {
  opacity:.65
}
.availability.loading .schedule-state {
  color:#ffb196
}
@media(max-width:520px) {
  .time-slots {
    grid-template-columns:repeat(3, 1fr)
  }
}