.browser-call-panel {
  position: fixed; z-index: 1100; top: max(12px, env(safe-area-inset-top)); right: 14px;
  width: min(390px, calc(100vw - 28px)); padding: 20px; border-radius: 20px;
  background: #183d2b; color: #fff; box-shadow: 0 12px 50px #0007;
  border: 1px solid #ffffff40; font: inherit;
}
.browser-call-panel[hidden], .browser-call-panel [hidden] { display: none !important; }
.browser-call-heading { display: flex; flex-direction: column; gap: 5px; overflow-wrap: anywhere; }
.browser-call-heading strong { font-size: 20px; }
.browser-call-heading span, .browser-call-panel p { opacity: .85; }
.browser-call-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.browser-call-panel button { min-height: 44px; border: 0; border-radius: 12px; padding: 10px 14px;
  color: #fff; background: #ffffff29; cursor: pointer; font: inherit; }
.browser-call-panel button:focus-visible { outline: 3px solid #ffdd75; outline-offset: 2px; }
.browser-call-panel button:disabled { opacity: .5; cursor: wait; }
.browser-call-panel button[data-call-action="accept"] { background: #287a39; }
.browser-call-panel .browser-call-hangup { background: #ba2738; flex-grow: 1; }
.browser-call-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 14px; }
.browser-call-keypad button { font-size: 22px; }
@media (max-width: 600px) {
  .browser-call-panel { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
}