.callbar {
  position: fixed; z-index: 45; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; min-width: 430px;
  padding: 11px 13px 11px 17px; border-radius: 14px;
  background: #20211e; color: white; box-shadow: 0 14px 45px #0005;
}
.callbar div { display: flex; flex-direction: column; min-width: 130px; }
.callbar small { color: #b9bbb4; }
.call-pulse { width: 11px; height: 11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px #d9f84a22; }
.callbar.ended .call-pulse, .callbar.failed .call-pulse { background: #fff; box-shadow: none; }
.callbar.ended, .callbar.failed { min-width: 330px; }
.callbar.failed { background: #9f2f2a; }
.hangup { border: 0; border-radius: 9px; background: #db554b; color: white; padding: 9px 13px; cursor: pointer; }
.callbar .secondary { background: #383a35; color: white; border-color: #51534c; }
.callbar #call-timer { font-variant-numeric: tabular-nums; color: #cfd1ca; }
@media (max-width: 520px) {
  .callbar { min-width: 0; width: calc(100% - 20px); gap: 8px; }
  .callbar div { min-width: 0; flex: 1; }
  .callbar #call-timer { display: none; }
}