/* ══════════════════════════════════════════════════════════
   reno-call.css — main-app voice call controls (phone + call bar)
   Scoped to #reno-call-* so it never affects other composer buttons.
   ══════════════════════════════════════════════════════════ */

/* The phone button reuses the existing .icon-btn base styles; only its
   active (in-call) state is themed here. */
#reno-call-btn[hidden] { display: none !important; }
#reno-call-btn:disabled { opacity: .45; cursor: not-allowed; }
#reno-call-btn.in-call {
  color: #fff;
  background: #d64545;
  border-color: #d64545;
  animation: reno-call-pulse 1.8s ease-in-out infinite;
}
@keyframes reno-call-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 69, .45); }
  50%      { box-shadow: 0 0 0 6px rgba(214, 69, 69, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #reno-call-btn.in-call { animation: none; }
}

/* Contextual call bar — only visible during connect/live. */
#reno-call-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 4px 0;
  padding: 7px 12px;
  border-radius: 12px;
  background: rgba(214, 69, 69, .10);
  border: 1px solid rgba(214, 69, 69, .30);
  font-size: .78rem;
  color: var(--rh-cream, #F8F4EA);
}
#reno-call-bar[hidden] { display: none !important; }
#reno-call-bar .rc-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #d64545; flex: 0 0 auto;
  animation: reno-call-blink 1.4s ease-in-out infinite;
}
@keyframes reno-call-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #reno-call-bar .rc-dot { animation: none; } }

#reno-call-status { font-weight: 600; }
#reno-call-timer {
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  opacity: .85;
  letter-spacing: .02em;
}
#reno-call-bar button {
  border: 1px solid rgba(248, 244, 234, .28);
  background: rgba(248, 244, 234, .06);
  color: inherit;
  border-radius: 999px;
  padding: .28rem .7rem;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}
#reno-call-bar button:hover { background: rgba(248, 244, 234, .14); }
#reno-call-end {
  border-color: rgba(214, 69, 69, .55) !important;
  color: #ffd9d9 !important;
  background: rgba(214, 69, 69, .18) !important;
}
#reno-call-mute[hidden] { display: none !important; }
#reno-call-bar button[aria-pressed="true"]{background:#245e48;border-color:#79d8b1}
#reno-call-bar button:not([hidden]){min-height:36px}