.incognito-toggle {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #f9fafb;
  color: #4b5563;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}
.incognito-toggle:hover { background: #f3f4f6; }
.incognito-toggle:focus-visible { outline: 2px solid #d97706; outline-offset: 2px; }
.incognito-toggle[data-active='true'] { border-color: #d97706; background: #fffbeb; color: #92400e; }
.incognito-toggle__switch { display: flex; align-items: center; width: 28px; height: 16px; border-radius: 999px; background: #d1d5db; }
.incognito-toggle__switch > span { width: 12px; height: 12px; margin-left: 2px; border-radius: 50%; background: white; }
.incognito-toggle[data-active='true'] .incognito-toggle__switch { background: #fbbf24; }
.incognito-toggle[data-active='true'] .incognito-toggle__switch > span { transform: translateX(12px); }
.incognito-toggle__icon, .incognito-toggle__indicator { display: none; }
.incognito-toggle--compact { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
.incognito-toggle--compact .incognito-toggle__switch, .incognito-toggle--compact .incognito-toggle__label { display: none; }
.incognito-toggle--compact .incognito-toggle__icon { display: block; }
.incognito-toggle--compact .incognito-toggle__indicator { display: grid; }
.incognito-toggle__indicator { position: absolute; right: 1px; top: 1px; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #fbbf24; color: #422006; font-size: 10px; font-weight: 700; line-height: 1; }
html:is(.dark, .crm-glass) .incognito-toggle { border-color: #ffffff26; background: #ffffff06; color: var(--dk-text-muted, #a6b7c3); }
html:is(.dark, .crm-glass) .incognito-toggle:hover { background: #ffffff12; }
html:is(.dark, .crm-glass) .incognito-toggle[data-active='true'] { border-color: #fbbf2480; background: #fbbf241f; color: #fcd34d; }
@media (max-width: 767px) {
  .whatsapp-header button.incognito-toggle { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 12px; }
  .incognito-toggle .incognito-toggle__switch, .incognito-toggle .incognito-toggle__label { display: none; }
  .incognito-toggle .incognito-toggle__icon { display: block; }
  .incognito-toggle .incognito-toggle__indicator { display: grid; }
}

/* The launcher coordinates are for the desktop popover. A mobile sheet must
   stay inside the viewport even when provider options make it taller. */
@media (max-width: 767px) {
  .chat-voice-layer { z-index: 10040; }
  .chat-voice-dismiss { background: rgb(10 23 33 / 45%); }
  .chat-voice-layer .chat-voice-panel {
    box-sizing: border-box;
    top: auto !important;
    right: 0 !important;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 12px - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px));
    padding: 0 max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    border-radius: 22px 22px 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-top: 80px;
    -webkit-overflow-scrolling: touch;
  }
  .chat-voice-panel .chat-voice-heading {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 72px;
    padding-block: 12px;
    margin-bottom: 12px;
    background: inherit;
    border-bottom: 1px solid #90aa9933;
  }
  .chat-voice-heading > div { min-width: 0; }
  .chat-voice-heading button { flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .chat-voice-panel :is(.chat-voice-start, .chat-voice-stop, .chat-voice-secondary, .chat-voice-modes button, .chat-voice-options summary, .chat-call-default summary, .chat-call-links button) { min-height: 44px; }
  .chat-voice-panel .chat-call-links button { min-width: 44px; }
  .chat-voice-panel .chat-voice-device select { font-size: 16px; }
  .chat-voice-panel .chat-voice-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-voice-panel .chat-voice-modes svg { flex: none; }
}
