/* V13 WhatsApp-Like Design Stabilization + System Preservation
   Markers preserved from earlier revisions: V3 WhatsApp-like 1:1 polish; V4 profile update polish; V5 WhatsApp 1:1 chat-page professional correction; V6 total chat UI correction; V7 profile modal professional correction; V8 logout confirmation + group modal professional correction; V10 status + contact modal professional compact correction; V11 call, ringtone, notification, and WhatsApp receipt polish; V12 deep audit cleanup + production hardening polish; CALL LOG HISTORY WHATSAPP-LIKE.
*/
:root {
  --wa-app-bg: #0b141a;
  --wa-panel: #111b21;
  --wa-panel-2: #202c33;
  --wa-panel-3: #182229;
  --wa-row-hover: #1f2c33;
  --wa-row-active: #2a3942;
  --wa-border: rgba(134, 150, 160, 0.18);
  --wa-border-soft: rgba(134, 150, 160, 0.11);
  --wa-text: #e9edef;
  --wa-text-soft: #d1d7db;
  --wa-muted: #8696a0;
  --wa-muted-2: #667781;
  --wa-green: #60a5fa;
  --wa-green-2: #93c5fd;
  --wa-green-dark: #3b82f6;
  --wa-danger: #ef4444;
  --wa-warning: #f59e0b;
  --wa-blue: #53bdeb;
  --wa-bubble-in: #202c33;
  --wa-bubble-out: #1e3a5f;
  --wa-radius: 14px;
  --wa-radius-sm: 9px;
  --shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 28px rgba(0, 0, 0, 0.28);
  --shadow-btn: 0 4px 14px rgba(96, 165, 250, 0.22);
  --sidebar-w: 410px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (min-width: 981px) {
  .call-overlay.is-group-call.is-video-call .call-video-grid,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    align-content: stretch;
  }

  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-3,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid.call-size-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }

  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-4,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid.call-size-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-5,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-6,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid.call-size-5,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid.call-size-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-7,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-8,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-9,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-10,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-11,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-12 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
}

/* V93 hard override: remove every dark veil from mobile 1:1 video call. */
@media (max-width: 720px) {
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call),
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-body,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-video-grid,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #localTile {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-controls-wa {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) video {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }
}

/* V94 production audit fixes: one clean call layer, tighter composer, status controls, and reliable menus. */
#statusViewerMenuBtn,
#statusViewerMenu {
  display: none !important;
}

.status-viewer-story {
  transition: opacity 160ms ease;
}

.status-story-full video::-webkit-media-controls,
.status-story-full video::-webkit-media-controls-panel,
.status-story-full video::-webkit-media-controls-play-button,
.status-story-full video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.status-upload-box {
  position: relative;
}

.status-media-preview {
  position: relative;
}

.status-upload-progress {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(9, 18, 24, .84);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
}

.status-upload-progress-bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .16);
}

.status-upload-progress-bar i {
  display: block;
  width: var(--status-upload-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--wa-green-2);
  transition: width 140ms ease;
}

.status-upload-progress strong {
  font-size: 13px;
  line-height: 1;
}

.status-upload-progress span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 700;
}

.composer-field,
.composer-field.is-multiline {
  border-radius: 11px !important;
}

.composer-field #messageInput,
.composer-field.is-multiline #messageInput {
  min-height: 40px;
  max-height: 132px;
  border-radius: 8px !important;
  overflow-y: auto;
  line-height: 1.32;
}

.message {
  overflow: visible;
}

.message.is-tools-open {
  position: relative;
  z-index: 90;
}

.message.is-tools-open .message-tools {
  z-index: 2100;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (max-width: 720px) {
  .call-overlay .call-controls-wa,
  html.is-capacitor-native .call-overlay .call-controls-wa {
    gap: 7px !important;
    min-height: 58px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .call-overlay.is-outgoing-call .call-controls,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-controls-wa,
  html.is-capacitor-native .call-overlay.is-outgoing-call .call-controls,
  html.is-capacitor-native .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-controls-wa,
  html.is-capacitor-native .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-controls-wa,
  html.is-capacitor-native .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-controls-wa,
  html.is-capacitor-native .call-overlay.is-group-call:not(.is-outgoing-call) .call-controls-wa,
  html.is-capacitor-native .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-controls-wa {
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .call-overlay .call-controls-wa .call-action-btn,
  html.is-capacitor-native .call-overlay .call-controls-wa .call-action-btn {
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 50% !important;
  }

  .call-overlay .call-controls-wa .call-action-glyph,
  html.is-capacitor-native .call-overlay .call-controls-wa .call-action-glyph,
  .call-overlay #addCallParticipantBtn::before,
  html.is-capacitor-native .call-overlay #addCallParticipantBtn::before {
    width: 42px !important;
    height: 42px !important;
    font-size: 17px !important;
  }

  .call-overlay #endCallBtn,
  html.is-capacitor-native .call-overlay #endCallBtn {
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(255, 255, 255, .9) !important;
  }

  .call-overlay #endCallBtn .call-action-glyph,
  html.is-capacitor-native .call-overlay #endCallBtn .call-action-glyph {
    color: #ef4444 !important;
    background: transparent !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-controls-wa {
    background: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-video-grid,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #localTile {
    background: transparent !important;
    background-image: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote #localTile,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local .remote-videos .video-card {
    width: min(31vw, 126px) !important;
    height: min(43vw, 174px) !important;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 18px !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote .remote-videos .video-card,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local #localTile {
    background: #000 !important;
  }

  .call-tile-host-actions {
    gap: 4px;
  }

  .call-tile-host-actions button {
    min-height: 24px;
    padding: 0 7px;
    font-size: 9px;
  }
}

/* V93 hard override: remove every dark veil from mobile 1:1 video call. */
@media (max-width: 720px) {
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call),
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-body,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-video-grid,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #localTile {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-controls-wa {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) video {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }
}

@media (max-width: 720px) {
  .call-overlay .call-controls-wa button:not(.hidden),
  html.is-capacitor-native .call-overlay .call-controls-wa button:not(.hidden) {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .call-overlay .call-controls-wa .call-action-glyph,
  html.is-capacitor-native .call-overlay .call-controls-wa .call-action-glyph,
  .call-overlay #addCallParticipantBtn::before,
  html.is-capacitor-native .call-overlay #addCallParticipantBtn::before {
    width: 40px !important;
    height: 40px !important;
  }
}

/* V91 final layer guard: incoming foreground UI must not sit behind chat/call surfaces. */
#incomingCall.call-toast.incoming-call-screen {
  z-index: 2600 !important;
}

/* V92 mobile call clarity: no dark veil over video, slightly larger controls. */
@media (max-width: 720px) {
  .call-overlay .call-controls-wa .call-action-btn,
  html.is-capacitor-native .call-overlay .call-controls-wa .call-action-btn {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
  }

  .call-overlay .call-controls-wa .call-action-glyph,
  html.is-capacitor-native .call-overlay .call-controls-wa .call-action-glyph,
  .call-overlay #addCallParticipantBtn::before,
  html.is-capacitor-native .call-overlay #addCallParticipantBtn::before {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-window > header {
    background: linear-gradient(180deg, rgba(0, 0, 0, .24), rgba(0, 0, 0, 0) 82%) !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-group-call.is-video-call:not(.is-outgoing-call) .call-controls-wa {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .22) 74%) !important;
    backdrop-filter: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) video,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) video,
  .call-overlay.is-group-call.is-video-call:not(.is-outgoing-call) video {
    filter: none !important;
    opacity: 1 !important;
  }
}

/* V91 foreground incoming call must always sit above any stale call overlay during transitions. */
#incomingCall.call-toast.incoming-call-screen {
  z-index: 2600;
}

/* V91 Android/mobile call polish: keep bottom controls above nav bar and make tap targets fully visible. */
@media (max-width: 720px) {
  .call-overlay .call-controls-wa,
  html.is-capacitor-native .call-overlay .call-controls-wa {
    overflow: visible !important;
    min-height: 64px !important;
    max-height: none !important;
    padding: 8px 8px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .call-overlay.is-outgoing-call .call-controls,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-controls-wa {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.is-capacitor-native .call-overlay.is-outgoing-call .call-controls,
  html.is-capacitor-native .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-controls-wa,
  html.is-capacitor-native .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-controls-wa,
  html.is-capacitor-native .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-controls-wa,
  html.is-capacitor-native .call-overlay.is-group-call:not(.is-outgoing-call) .call-controls-wa,
  html.is-capacitor-native .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-controls-wa {
    bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote #localTile,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local .remote-videos .video-card {
    bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html.is-capacitor-native .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote #localTile,
  html.is-capacitor-native .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local .remote-videos .video-card {
    bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .call-overlay.is-outgoing-call .outgoing-call-panel {
    padding-bottom: calc(164px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .incoming-call-screen .incoming-call-actions {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}
* { box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--wa-app-bg); color: var(--wa-text); }
body { overflow: hidden; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.hidden { display: none !important; }
.mobile-only { display: none; }
img, video { max-width: 100%; height: auto; }

/* AUTH */
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, rgba(96,165,250,.17), transparent 34%), var(--wa-app-bg); }
.auth-card { width: min(450px, 100%); background: var(--wa-panel); border: 1px solid var(--wa-border); border-radius: 22px; padding: 28px; box-shadow: var(--shadow-soft); }
.brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.brand-logo { width: 52px; height: 52px; border-radius: 14px; object-fit: contain; display: block; flex: 0 0 auto; }
.welcome-logo { width: 54px; height: 54px; border-radius: 14px; object-fit: contain; display: block; margin: 0 auto 12px; }
.eyebrow { display: block; color: var(--wa-green-2); font-size: 11px; text-transform: uppercase; letter-spacing: .11em; font-weight: 800; }
.auth-card h1 { margin: 3px 0 0; font-size: 28px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--wa-panel-2); border-radius: 999px; padding: 5px; margin-bottom: 16px; }
.tabs button { border: 0; border-radius: 999px; background: transparent; color: var(--wa-muted); padding: 10px 12px; font-weight: 700; }
.tabs button.active { background: var(--wa-green); color: #0f172a; }
.form-stack { display: grid; gap: 12px; }
.form-stack label, .form-field, .ux-caption-field, .ux-add-code-card label { display: grid; gap: 7px; color: var(--wa-text-soft); font-size: 13px; font-weight: 700; }
.form-stack input, .form-field input, .form-field textarea, .ux-caption-field textarea, .ux-add-code-card input, #messageInput, .search-box input, .call-chat-form input { width: 100%; border: 1px solid var(--wa-border); background: var(--wa-panel-2); color: var(--wa-text); border-radius: 11px; padding: 12px 13px; outline: none; }
.form-stack input:focus, .form-field input:focus, .form-field textarea:focus, .ux-caption-field textarea:focus, .ux-add-code-card input:focus, #messageInput:focus, .search-box input:focus, .call-chat-form input:focus { border-color: rgba(96,165,250,.72); box-shadow: 0 0 0 2px rgba(96,165,250,.14); }
.form-stack button, .dialog-card menu button, .contact-card button, .status-headline button, .call-log-redial, .toolbar-primary, .toolbar-icon, .call-btn, .ghost-btn, .composer button:not(.composer-icon-btn):not(.composer-emoji-btn):not(.composer-send-btn), .file-btn, .profile-upload-btn, .item-action-pill { border: 0; border-radius: 999px; min-height: 38px; padding: 9px 14px; background: var(--wa-green); color: #0f172a; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none; }
.form-stack button:hover, .dialog-card menu button:hover, .contact-card button:hover, .status-headline button:hover, .toolbar-primary:hover, .call-btn:hover, .composer button:not(.composer-icon-btn):not(.composer-emoji-btn):not(.composer-send-btn):hover { filter: brightness(1.05); }
#authMsg { display: block; min-height: 18px; color: var(--wa-warning); margin-top: 10px; }

/* APP SHELL */
.app { height: 100vh; width: 100vw; display: grid; grid-template-columns: var(--sidebar-w) 1fr; background: var(--wa-app-bg); }
.sidebar { min-width: 0; background: var(--wa-panel); border-right: 1px solid var(--wa-border); display: flex; flex-direction: column; height: 100vh; }
.side-header { min-height: 64px; padding: 10px 14px; background: var(--wa-panel-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--wa-border-soft); }
.profile-mini { min-width: 0; display: flex; align-items: center; gap: 12px; }
.profile-mini > div:last-child { min-width: 0; }
.profile-mini strong, .item-title strong, .chat-head-text strong { display: block; color: var(--wa-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-mini strong { font-size: 15px; max-width: 220px; }
.profile-mini span, .chat-head-text span { display: block; color: var(--wa-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-header-actions { display: inline-flex; align-items: center; gap: 8px; }
.top-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--wa-muted); font-size: 18px; display: grid; place-items: center; }
.top-icon-btn:hover { background: rgba(134,150,160,.14); color: var(--wa-text); }
.logout-action:hover { color: #ffb4b4; }

.avatar { flex: 0 0 auto; width: 45px; height: 45px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #6b7280, #374151); color: white; font-weight: 800; overflow: hidden; text-transform: uppercase; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.premium-avatar { width: 43px; height: 43px; background: linear-gradient(145deg, var(--wa-green-2), #3b82f6); color: #0f172a; }

.side-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--wa-panel); border-bottom: 1px solid var(--wa-border-soft); }
.side-tab { position: relative; border: 0; background: transparent; color: var(--wa-muted); padding: 14px 4px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .035em; font-weight: 800; }
.side-tab::after { content: ""; position: absolute; left: 16%; right: 16%; bottom: 0; height: 3px; border-radius: 999px 999px 0 0; background: transparent; }
.side-tab.active { color: var(--wa-green-2); }
.side-tab.active::after { background: var(--wa-green); }
.search-box { padding: 8px 12px; background: var(--wa-panel); border-bottom: 1px solid var(--wa-border-soft); }
.search-box input { height: 38px; border: 0; border-radius: 999px; padding-left: 44px; background: var(--wa-panel-2); color: var(--wa-text-soft); }
.search-box { position: relative; }
.search-box::before { content: "⌕"; position: absolute; left: 28px; top: 16px; color: var(--wa-muted); font-size: 17px; z-index: 1; }
.tab-panel { display: none; min-height: 0; overflow-y: auto; padding-bottom: 14px; }
.tab-panel.active { display: block; }
.panel-label, .status-section-title { padding: 11px 16px 8px; color: var(--wa-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; }
.panel-label.inline { padding: 0; display: block; }
.muted-empty { color: var(--wa-muted); padding: 18px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.compact-actions, .chat-toolbar { padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.toolbar-primary { height: 36px; min-height: 36px; padding: 0 13px; background: var(--wa-green); font-size: 13px; }
.toolbar-icon { width: 36px; height: 36px; min-height: 36px; padding: 0; background: var(--wa-panel-2); color: var(--wa-muted); }
.toolbar-icon:hover { color: var(--wa-text); background: var(--wa-row-hover); }
.list { display: grid; }
.whatsapp-row, .item { min-height: 72px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--wa-border-soft); background: transparent; transition: background .15s ease; }
.whatsapp-row:hover { background: var(--wa-row-hover); }
.whatsapp-row.active { background: var(--wa-row-active); }
.item-main { min-width: 0; flex: 1; display: grid; gap: 4px; }
.item-title { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.item-title strong { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-title-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; }
.row-time { flex: 0 0 auto; color: var(--wa-muted); font-size: 11px; }
.item-main p { margin: 0; color: var(--wa-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-side-meta { flex: 0 0 auto; display: grid; place-items: center; min-width: 34px; }
.conversation-item { position: relative; }
.conversation-item .chat-row-menu-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wa-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.conversation-item:hover .chat-row-menu-btn,
.conversation-item:focus-within .chat-row-menu-btn,
.conversation-item .chat-row-menu-btn:focus-visible {
  opacity: 1;
}
.conversation-item .chat-row-menu-btn:hover,
.conversation-item .chat-row-menu-btn:focus-visible {
  background: rgba(134,150,160,.16);
  color: var(--wa-text);
}
.chat-row-menu {
  position: fixed;
  z-index: 1200;
  min-width: 220px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--wa-border-soft);
  background: var(--wa-panel-2);
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
  display: grid;
  gap: 2px;
}
.chat-row-menu.hidden { display: none; }
.chat-row-menu button {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--wa-text);
  text-align: left;
  padding: 11px 12px;
  font-size: 14px;
  cursor: pointer;
}
.chat-row-menu button:hover,
.chat-row-menu button:focus-visible {
  background: rgba(134,150,160,.14);
}
.chat-row-menu .chat-menu-danger { color: #ff9aa7; }
.chat-row-menu .chat-menu-danger:hover,
.chat-row-menu .chat-menu-danger:focus-visible {
  background: rgba(241,92,109,.12);
  color: #ffb4b4;
}
.unread-badge { min-width: 21px; height: 21px; border-radius: 999px; padding: 0 6px; display: grid; place-items: center; color: #0f172a; background: var(--wa-green-2); font-size: 11px; }
.chat-kind { color: var(--wa-muted-2); font-size: 11px; }
.item-action-pill { min-height: 28px; padding: 0 11px; font-size: 12px; background: rgba(96,165,250,.13); color: var(--wa-green-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wa-muted-2); display: inline-block; margin-left: 8px; }
.dot.online { background: var(--wa-green-2); }
.empty-tab-card { margin: 14px; padding: 20px; border-radius: 16px; background: var(--wa-panel-2); color: var(--wa-muted); border: 1px solid var(--wa-border-soft); text-align: center; }
.empty-tab-card strong { color: var(--wa-text); display: block; margin-bottom: 6px; }
.empty-tab-card button { margin-top: 10px; }

/* STATUS / CONTACT / CALL PANELS */
.production-card { margin: 12px; padding: 14px; border-radius: 16px; background: var(--wa-panel-2); border: 1px solid var(--wa-border-soft); }
.status-headline, .calls-headline, .contact-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-headline strong, .calls-headline strong, .contact-card strong { display: block; margin-top: 2px; color: var(--wa-text); }
.status-headline p, .calls-headline p, .contact-card p { margin: 4px 0 0; color: var(--wa-muted); font-size: 12px; line-height: 1.35; }
.status-row { width: 100%; border: 0; border-bottom: 1px solid var(--wa-border-soft); background: transparent; color: inherit; min-height: 76px; padding: 10px 14px; display: flex; align-items: center; gap: 13px; text-align: left; }
.status-row:hover { background: var(--wa-row-hover); }
.status-ring { width: 54px; height: 54px; border-radius: 50%; padding: 3px; background: var(--wa-muted-2); display: grid; place-items: center; flex: 0 0 54px; position: relative; }
.status-ring.is-unviewed { background: var(--wa-green); }
.status-ring.is-viewed { background: var(--wa-muted-2); }
.status-ring.is-empty { background: var(--wa-muted-2); }
.status-ring-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--wa-panel-2); }
.status-ring-inner .avatar.status-ring-avatar { width: 100%; height: 100%; font-size: 16px; border-radius: 50%; }
.status-add-badge { position: absolute; right: -1px; bottom: -1px; width: 22px; height: 22px; border-radius: 50%; background: var(--wa-green); color: #0f172a; font-size: 16px; font-weight: 900; display: grid; place-items: center; border: 2px solid var(--wa-panel); }
.status-preview { width: 100%; height: 100%; border-radius: 50%; background: var(--wa-panel-2); display: grid; place-items: center; color: var(--wa-text); font-weight: 800; background-size: cover; background-position: center; overflow: hidden; }
.status-preview.video { background: #0f172a; color: white; }
.status-row-main { min-width: 0; flex: 1; display: grid; gap: 4px; }
.status-row-main strong { color: var(--wa-text); font-size: 15px; }
.status-row-main small, .status-privacy-note { color: var(--wa-muted); font-size: 12px; }
.status-row-arrow { color: var(--wa-muted); font-size: 22px; }
.status-privacy-note { padding: 9px 16px 4px; line-height: 1.45; }
.call-log-item.missed .item-main p, .call-log-item.missed .call-log-icon { color: #ff8d8d; }
.call-log-icon { color: var(--wa-green-2); display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.call-log-redial { width: 38px; height: 38px; min-height: 38px; padding: 0; background: transparent; color: var(--wa-green-2); font-size: 18px; }
.call-log-redial:hover { background: rgba(96,165,250,.12); }

/* CHAT PANEL */
.chat-panel { min-width: 0; height: 100vh; display: flex; flex-direction: column; background: #0b141a; position: relative; }
.chat-panel::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 21px 21px; opacity: .42; pointer-events: none; }
.chat-header { min-height: 64px; padding: 10px 16px; background: var(--wa-panel-2); border-bottom: 1px solid var(--wa-border-soft); display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; }
.chat-head-tap { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; display: flex; align-items: center; gap: 12px; padding: 4px 6px 4px 0; border-radius: 12px; text-align: left; cursor: pointer; }
.chat-head-tap:hover { background: rgba(134,150,160,.1); }
.chat-head-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.chat-head-text strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-text span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wa-muted); }
.chat-call-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.chat-icon-btn { width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0; border-radius: 50%; font-size: 18px; }
.chat-menu-trigger { font-size: 22px; letter-spacing: -1px; }
#chatHeaderMenu.chat-row-menu { z-index: 12; min-width: 210px; }
.composer { position: relative; z-index: 2; min-height: 64px; padding: 9px 14px; display: flex; align-items: center; gap: 6px; background: var(--wa-panel-2); border-top: 1px solid var(--wa-border-soft); }
.hidden-file-input { display: none !important; }
.composer-icon-btn { width: 42px; height: 42px; min-width: 42px; min-height: 42px; padding: 0; border-radius: 50%; background: transparent; color: var(--wa-muted); font-size: 22px; font-weight: 400; }
.composer-icon-btn:hover { background: rgba(134,150,160,.14); color: var(--wa-text); }
.composer-send-btn { width: 43px; height: 43px; min-height: 43px; padding: 0; font-size: 18px; }
.composer-send-btn.hidden, .composer-icon-btn.hidden { display: none !important; }
#messageInput { flex: 1; min-width: 0; height: 43px; border: 0; border-radius: 999px; background: var(--wa-panel); padding: 0 16px; }
.emoji-picker { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); max-height: 240px; overflow: auto; padding: 10px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; background: var(--wa-panel); border: 1px solid var(--wa-border-soft); border-radius: 14px; box-shadow: var(--shadow-soft); z-index: 5; }
.emoji-picker.hidden { display: none; }
.emoji-picker button { width: 100%; aspect-ratio: 1; border: 0; border-radius: 8px; background: transparent; font-size: 22px; cursor: pointer; }
.emoji-picker button:hover { background: rgba(134,150,160,.16); }
.attach-menu { position: absolute; left: 10px; bottom: calc(100% + 6px); min-width: 210px; padding: 6px; background: var(--wa-panel); border: 1px solid var(--wa-border-soft); border-radius: 14px; box-shadow: var(--shadow-soft); z-index: 5; display: grid; gap: 2px; }
.attach-menu.hidden { display: none; }
.attach-menu button { border: 0; background: transparent; color: var(--wa-text); min-height: 44px; padding: 10px 12px; border-radius: 10px; text-align: left; font-weight: 600; }
.attach-menu button:hover { background: var(--wa-row-hover); }
.privacy-mode-list { display: grid; gap: 0; padding: 0 20px 12px; }
.privacy-radio { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--wa-border-soft); cursor: pointer; }
.privacy-radio:last-child { border-bottom: 0; }
.privacy-radio input { width: 18px; height: 18px; accent-color: var(--wa-green); }
.status-row-split { display: flex; align-items: center; gap: 13px; width: 100%; padding: 10px 16px; min-height: 72px; }
.status-ring-open { border: 0; background: transparent; padding: 0; border-radius: 50%; cursor: pointer; }
.status-row-text-btn { flex: 1; min-width: 0; padding: 0; min-height: auto; }
.group-member-info-row { align-items: center; }
.group-member-copy { flex: 1; min-width: 0; }
.group-member-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.member-action-btn { min-height: 32px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--wa-border-soft); background: var(--wa-panel-2); color: var(--wa-text-soft); font-size: 12px; font-weight: 700; }
.member-remove-btn { color: #ff9aa7; border-color: rgba(255,154,167,.35); }
.group-info-inline-btn { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--wa-border-soft); background: var(--wa-panel-2); color: var(--wa-text); font-weight: 700; }
.group-member-search { margin-bottom: 8px; }
.group-member-info-row.hidden { display: none; }
.call-btn, .ghost-btn { height: 38px; min-height: 38px; padding: 0 11px; border-radius: 999px; background: transparent; color: var(--wa-muted); font-weight: 700; }
.call-btn:hover, .ghost-btn:hover { background: rgba(134,150,160,.14); color: var(--wa-text); }
.call-btn.voice { color: var(--wa-green-2); }
.group-member-btn { color: var(--wa-blue); }
.call-text { margin-left: 4px; font-size: 12px; }
.messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 24px min(7vw, 76px) 18px; display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; overscroll-behavior: contain; }
.messages:not(.empty-state) { justify-content: flex-start; }
.chat-messages-loading {
  align-self: center;
  margin: auto;
  color: var(--wa-muted);
  font-size: 13px;
}
.empty-state { justify-content: center; align-items: center; }
.welcome-card { width: min(410px, 92%); text-align: center; padding: 28px; background: rgba(32,44,51,.86); border: 1px solid var(--wa-border-soft); border-radius: 20px; box-shadow: var(--shadow-soft); }
.welcome-card h2 { margin: 0 0 8px; }
.welcome-card p { color: var(--wa-muted); line-height: 1.55; margin: 0; }
.message { max-width: min(68%, 720px); display: grid; margin: 2px 0; position: relative; }
.message.me { align-self: flex-end; }
.message.other { align-self: flex-start; }
.message > * { min-width: 0; }
.message { padding: 7px 9px 5px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.2); color: var(--wa-text); }
.message.me { background: var(--wa-bubble-out); border-top-right-radius: 3px; }
.message.other { background: var(--wa-bubble-in); border-top-left-radius: 3px; }
.message-sender { color: var(--wa-green-2); font-size: 12px; font-weight: 800; margin-bottom: 4px; }
.message-text { font-size: 14px; line-height: 1.42; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-link { color: #53bdeb; text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.message-link-preview {
  width: min(310px, 100%);
  margin-top: 7px;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  color: var(--wa-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
.message-link-preview:hover { background: rgba(83,189,235,.12); border-color: rgba(83,189,235,.22); }
.message-link-preview-icon {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.message-link-preview-icon::before {
  content: attr(data-fallback);
  color: rgba(233,237,239,.72);
  font-size: 14px;
  font-weight: 900;
}
.message-link-preview-icon img {
  position: absolute;
  width: 24px;
  height: 24px;
  object-fit: contain;
  background: transparent;
}
.message-link-preview-copy { min-width: 0; display: grid; gap: 2px; }
.message-link-preview-copy strong { color: var(--wa-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-link-preview-copy small { color: var(--wa-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message .meta { color: rgba(233,237,239,.66); font-size: 11px; text-align: right; margin-top: 2px; display: flex; justify-content: flex-end; align-items: center; gap: 5px; }
.sent-check { color: rgba(233,237,239,.72); letter-spacing: -2px; font-weight: 800; font-size: 13px; padding-left: 3px; }
.sent-check.read { color: #53bdeb; }
.message-attachment.image { border: 0; padding: 0; background: transparent; cursor: pointer; display: block; max-width: 100%; text-align: left; }
.message-attachment.image img { border-radius: 8px; max-height: 310px; object-fit: cover; display: block; margin-bottom: 4px; width: 100%; }
.message-attachment.file { display: inline-flex; align-items: center; gap: 8px; color: var(--wa-text); background: rgba(0,0,0,.17); border-radius: 8px; padding: 10px 12px; margin-bottom: 4px; text-decoration: none; border: 1px solid rgba(255,255,255,.06); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.message-attachment.file:hover { background: rgba(147,197,253,.12); border-color: rgba(147,197,253,.22); }
.message-attachment.video { position: relative; max-width: min(100%, 320px); }
.message-attachment.video video { border-radius: 8px; max-height: 280px; width: 100%; display: block; margin-bottom: 4px; background: #000; }
.media-video-open-btn { position: absolute; right: 8px; bottom: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0,0,0,.62); color: #fff; font-size: 14px; cursor: pointer; backdrop-filter: blur(4px); }
.media-video-open-btn:hover { background: rgba(147,197,253,.35); }
.typing { position: relative; z-index: 1; padding: 0 22px 8px; color: var(--wa-muted); font-size: 12px; }

/* DIALOGS */
dialog { border: 0; padding: 0; background: transparent; color: var(--wa-text); }
dialog::backdrop { background: rgba(11,20,26,.76); backdrop-filter: blur(2px); }
dialog:not(.status-fullscreen-dialog):not(.media-viewer-dialog):not(.status-composer-dialog) {
  position: fixed;
  inset: 0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  max-width: calc(100vw - 24px);
  max-height: calc(
    100dvh
    - 24px
    - env(safe-area-inset-top, 0px)
    - env(safe-area-inset-bottom, 0px)
  );
}
.dialog-card,
.chat-modal {
  width: min(520px, calc(100vw - 28px));
  height: fit-content;
  max-height: min(86dvh, 720px);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--wa-panel);
  border: 1px solid var(--wa-border);
  border-radius: 17px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.modal-compact,
.dialog-card.modal-compact,
.logout-dialog-card.modal-compact,
.pwa-dialog-card.modal-compact,
.call-detail-dialog-card.modal-compact {
  width: min(420px, calc(100vw - 28px));
  max-height: none;
  height: fit-content;
}
.chat-modal:not(.modal-compact) {
  width: min(560px, calc(100vw - 24px));
  max-height: min(88dvh, 760px);
}
.chat-modal-list,
.member-picker,
.viewer-list,
.forward-picker,
.global-search-results,
.search-results-list,
.privacy-picker,
.call-participant-picker {
  flex: 0 1 auto;
  max-height: min(42dvh, 360px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.profile-dialog-body,
.group-dialog-body,
.group-info-body,
.ux-contact-body,
.ux-status-body,
.chat-modal-body {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(50dvh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-compact .profile-dialog-body,
.modal-compact .chat-modal-body,
.modal-compact .viewer-list {
  flex: none;
  max-height: none;
}
.dialog-card h3 { margin: 0; font-size: 20px; }
.dialog-card p { margin: 5px 0 0; color: var(--wa-muted); line-height: 1.45; font-size: 13px; }
.dialog-card header, .ux-modal-head, .group-dialog-header, .profile-dialog-header, .logout-dialog-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--wa-border-soft); background: var(--wa-panel-2); }
.dialog-card > .group-dialog-body, .dialog-card > .profile-dialog-body, .dialog-card > .group-info-body, .ux-contact-body, .ux-status-body, .dialog-card > .member-picker, .call-participant-picker, .add-member-dialog-card > p, .add-member-dialog-card > .form-field, .add-member-dialog-card > .panel-label, .add-member-dialog-card > .member-picker, .add-member-dialog-card > .dialog-msg { padding-left: 20px; padding-right: 20px; }
.profile-dialog-body, .group-dialog-body, .group-info-body, .ux-contact-body, .ux-status-body { padding-top: 16px; padding-bottom: 16px; display: grid; gap: 14px; }
.dialog-card menu, .ux-modal-actions, .profile-dialog-actions, .group-dialog-actions, .logout-dialog-actions { margin: 0; padding: 14px 20px; border-top: 1px solid var(--wa-border-soft); background: var(--wa-panel); display: flex; justify-content: flex-end; gap: 10px; }
.dialog-card menu button:first-child, #cancelProfileBtn, #cancelStatusBtn, #cancelGroupBtn, #cancelLogoutBtn, #cancelCallParticipantBtn, #closeContactDialog, #stopScanBtn { background: var(--wa-panel-2); color: var(--wa-text-soft); border: 1px solid var(--wa-border-soft); }
.danger-btn, #confirmLogoutBtn { background: var(--wa-danger) !important; color: white !important; }
.dialog-msg, .ux-dialog-note { color: var(--wa-muted); font-size: 12px; line-height: 1.45; }
.profile-photo-editor { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 14px; background: var(--wa-panel-2); border: 1px solid var(--wa-border-soft); }
.profile-preview-avatar { width: 74px; height: 74px; font-size: 22px; }
.profile-photo-copy { flex: 1; min-width: 0; }
.profile-upload-btn { min-height: 34px; margin-top: 8px; width: max-content; background: rgba(96,165,250,.14); color: var(--wa-green-2); }
.profile-upload-btn input { display: none; }
.form-field textarea, .ux-caption-field textarea { min-height: 92px; resize: vertical; }
.member-picker { display: grid; gap: 7px; padding-bottom: 8px; }
.member-picker-head { display: flex; justify-content: space-between; color: var(--wa-muted); font-size: 12px; padding-top: 2px; }
.member-option { display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 10px; border-radius: 13px; background: var(--wa-panel-2); border: 1px solid transparent; color: var(--wa-text); }
.member-option:hover { border-color: var(--wa-border); background: var(--wa-row-hover); }
.member-option input { width: 18px; height: 18px; accent-color: var(--wa-green); }
.member-option-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #3b4a54; font-weight: 800; }
.member-option-text { display: grid; gap: 2px; min-width: 0; }
.member-option-text small { color: var(--wa-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-info-readonly { display: grid; gap: 8px; padding: 14px 16px; border-radius: 13px; background: var(--wa-panel-2); color: var(--wa-text); }
.group-info-readonly p { margin: 0; }
.group-info-readonly small { color: var(--wa-muted); }
.add-member-limit-note { font-weight: 500; color: var(--wa-muted); }
.member-search-more { margin-top: 8px; padding-top: 0; background: transparent; }
.logout-dialog-header { display: flex; align-items: center; gap: 13px; }
.app-prompt-field { padding: 0 20px 16px; }
.app-prompt-field .form-field { margin: 0; }
.app-prompt-field input,
.app-prompt-field textarea { width: 100%; }
.logout-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(239,68,68,.13); color: #ffb4b4; font-size: 21px; }
.ux-code-card, .ux-qr-card, .ux-add-code-card, .status-upload-box { border: 1px solid var(--wa-border-soft); background: var(--wa-panel-2); border-radius: 15px; padding: 13px; }
.ux-code-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ux-code-card span { display: block; color: var(--wa-muted); font-size: 12px; margin-bottom: 3px; }
.ux-code-card strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; }
.ux-qr-card { display: grid; place-items: center; text-align: center; gap: 8px; }
.ux-qr-frame {
  width: 196px;
  height: 196px;
  max-width: 100%;
  border-radius: 16px;
  padding: 0;
  background: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ux-qr-frame canvas,
#qrCanvas {
  display: block;
  width: 196px;
  height: 196px;
  max-width: 100%;
  max-height: 100%;
}
.ux-add-code-card { display: grid; gap: 10px; }
.scanner-box { overflow: hidden; border-radius: 14px; background: #000; max-height: 230px; }
.scanner-box video { width: 100%; display: block; }
.status-upload-box { min-height: 118px; display: grid; place-items: center; text-align: center; gap: 5px; color: var(--wa-muted); cursor: pointer; }
.status-upload-box input { display: none; }
.status-upload-box.is-selected { border-color: rgba(96,165,250,.7); background: rgba(96,165,250,.08); color: var(--wa-text); }
.ux-upload-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(96,165,250,.13); color: var(--wa-green-2); font-size: 22px; }

/* STATUS FULLSCREEN */
.status-fullscreen-dialog { width: 100vw; height: 100vh; max-width: none; max-height: none; }
.status-viewer-fullscreen { width: 100vw; height: 100vh; margin: 0; background: #050505; position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.status-progress { position: absolute; top: 8px; left: 12px; right: 12px; display: flex; gap: 5px; z-index: 5; }
.status-progress-segment { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.28); overflow: hidden; }
.status-progress-segment i { display: block; height: 100%; width: 0; background: white; transition: width 0.08s linear; }
.status-progress-segment.done { background: rgba(255,255,255,.95); }
.fullscreen-head { padding: 22px 18px 12px; display: flex; align-items: center; gap: 11px; z-index: 4; background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent); }
.fullscreen-head > div:nth-child(2) { flex: 1; min-width: 0; }
.fullscreen-head span { color: rgba(255,255,255,.72); font-size: 12px; }
.status-close-btn, .status-nav-btn { border: 0; color: white; background: rgba(255,255,255,.12); border-radius: 50%; width: 40px; height: 40px; font-size: 24px; display: grid; place-items: center; }
.status-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 70px; border-radius: 999px; }
.status-nav-btn.prev { left: 16px; }
.status-nav-btn.next { right: 16px; }
.status-viewer-content { min-height: 0; display: grid; place-items: center; }
.status-story-full { width: 100%; height: 100%; display: grid; place-items: center; }
.status-story-full img, .status-story-full video { max-width: 100%; max-height: 100%; object-fit: contain; }
.status-text-full { width: min(560px, 90vw); text-align: center; padding: 34px; border-radius: 24px; background: linear-gradient(145deg, #3b82f6, #3b82f6); }
.status-text-full strong { font-size: 42px; }
.status-text-full p { font-size: 25px; line-height: 1.35; }
.status-viewer-caption { padding: 14px 18px 22px; z-index: 4; background: linear-gradient(to top, rgba(0,0,0,.72), transparent); }
.status-viewer-footer { padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 4; background: linear-gradient(to top, rgba(0,0,0,.78), transparent); display: grid; gap: 8px; }
.status-viewer-caption-text { margin: 0; color: #fff; font-size: 15px; line-height: 1.4; }
.status-viewer-caption-text.hidden { display: none; }
.status-reply-bar { display: flex; align-items: center; gap: 8px; }
.status-reply-bar.hidden { display: none; }
.status-reply-bar input { flex: 1; min-width: 0; height: 42px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; padding: 0 16px; outline: none; }
.status-reply-bar input::placeholder { color: rgba(255,255,255,.62); }
.status-reply-bar button { width: 42px; height: 42px; min-height: 42px; padding: 0; border: 0; border-radius: 50%; background: var(--wa-green); color: #0f172a; font-size: 18px; }
.status-menu-btn { border: 0; color: white; background: rgba(255,255,255,.12); border-radius: 50%; width: 40px; height: 40px; font-size: 22px; display: grid; place-items: center; }
.status-viewer-caption p { margin: 0 0 4px; }
.status-viewer-caption small { color: rgba(255,255,255,.7); }

/* CALL */
.call-toast { position: fixed; right: 20px; top: 20px; z-index: 40; min-width: 320px; max-width: calc(100vw - 40px); padding: 14px; border-radius: 18px; background: var(--wa-panel-2); border: 1px solid var(--wa-border); box-shadow: var(--shadow-soft); display: flex; align-items: center; gap: 10px; }
.call-toast div { flex: 1; min-width: 0; }
.call-toast strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-toast span { color: var(--wa-muted); font-size: 12px; }
.call-toast button { min-height: 36px; padding: 0 12px; }
.call-overlay { position: fixed; inset: 0; z-index: 2400; background: rgba(0,0,0,.78); display: grid; place-items: center; padding: 20px; }
.call-window { width: min(1180px, 100%); max-height: min(860px, 96vh); background: var(--wa-panel); border: 1px solid var(--wa-border); border-radius: 22px; box-shadow: var(--shadow-soft); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.call-window > header { padding: 16px 18px; background: var(--wa-panel-2); border-bottom: 1px solid var(--wa-border-soft); display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.call-window h3, .call-window p { margin: 2px 0; }
.call-window p { color: var(--wa-muted); font-size: 13px; }
.call-body { min-height: 0; display: grid; grid-template-columns: 1fr 330px; gap: 0; }
.call-video-grid { min-height: 430px; padding: 14px; display: grid; gap: 10px; background: #050505; }
.call-video-grid.call-size-1 { grid-template-columns: 1fr; }
.call-video-grid.call-size-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.call-video-grid.call-size-3, .call-video-grid.call-size-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(190px, 1fr); }
.remote-videos { display: contents; }
.video-card, .remote-empty-state { position: relative; min-height: 190px; border-radius: 16px; overflow: hidden; background: #111827; border: 1px solid rgba(255,255,255,.08); display: grid; place-items: center; }
.video-card video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.call-overlay video::-webkit-media-controls,
.call-overlay video::-webkit-media-controls-panel,
.call-overlay video::-webkit-media-controls-play-button,
.call-overlay video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.video-card.is-video-pending video,
.video-card video.is-video-not-ready {
  opacity: 0;
  pointer-events: none;
}
.video-card.is-video-pending::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(147,197,253,.9);
  animation: attachmentSpin .9s linear infinite;
}
.video-card span { position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,.56); color: white; font-size: 12px; }
.audio-avatar { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--wa-green); color: #0f172a; font-weight: 900; }
.remote-empty-state { padding: 22px; text-align: center; color: var(--wa-muted); }
.remote-empty-state strong { color: var(--wa-text); display: block; margin-bottom: 6px; }
.call-chat-panel { border-left: 1px solid var(--wa-border-soft); background: var(--wa-panel); display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.call-chat-panel header { padding: 14px; border-bottom: 1px solid var(--wa-border-soft); }
.call-chat-panel header span { display: block; color: var(--wa-muted); font-size: 12px; margin-top: 3px; }
.call-chat-messages { overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.call-chat-empty { color: var(--wa-muted); text-align: center; padding: 18px; }
.call-chat-message { max-width: 88%; border-radius: 12px; padding: 8px 10px; background: var(--wa-panel-2); }
.call-chat-message.me { align-self: flex-end; background: var(--wa-green-dark); }
.call-chat-message strong { font-size: 11px; color: var(--wa-green-2); }
.call-chat-message p { margin: 3px 0 0; color: var(--wa-text); font-size: 13px; }
.call-chat-form { padding: 10px; border-top: 1px solid var(--wa-border-soft); display: flex; gap: 7px; }
.call-chat-form button { min-height: 38px; }
.call-controls { padding: 12px; background: var(--wa-panel-2); border-top: 1px solid var(--wa-border-soft); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.call-controls button { min-height: 40px; }

/* TOAST */
.app-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; min-width: 260px; max-width: min(520px, calc(100vw - 28px)); padding: 12px 16px; border-radius: 999px; background: var(--wa-panel-2); border: 1px solid var(--wa-border); color: var(--wa-text); box-shadow: var(--shadow-soft); text-align: center; }
.app-toast.error { border-color: rgba(239,68,68,.45); color: #fecaca; }
.app-toast.success { border-color: rgba(96,165,250,.45); color: var(--wa-green-2); }

/* RESPONSIVE */
@media (max-width: 980px) {
  body { overflow: hidden; }
  .app { grid-template-columns: 1fr; }
  .sidebar { width: 100%; }
  .chat-panel { position: fixed; inset: 0; transform: translateX(0); transition: transform .18s ease; z-index: 10; }
  .app.show-list .chat-panel { transform: translateX(100%); }
  .mobile-only { display: inline-flex; }
  .messages { padding: 18px 12px 14px; }
  .message { max-width: 86%; }
  .call-text { display: none; }
  .call-body { grid-template-columns: 1fr; }
  .call-chat-panel { border-left: 0; border-top: 1px solid var(--wa-border-soft); max-height: 240px; }
  .call-video-grid { min-height: 360px; }
  .call-window { max-height: 96vh; }
}
/* V14 Voice Note composer */
.mic-btn { min-width: 42px; width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; background: #1e3a5f; color: #dbeafe; border: 1px solid rgba(147, 197, 253, .2); }
.mic-btn:hover { background: #1e40af; }
.voice-recorder { margin: 0 16px 8px; width: auto; background: #eff6ff; color: #1e293b; border: 1px solid rgba(59,130,246, .24); border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 26px rgba(11, 20, 26, .10); position: relative; z-index: 1; flex-shrink: 0; }
.voice-recorder.hidden { display: none; }
.voice-record-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, .45); animation: voicePulse 1.2s infinite; }
.voice-recorder strong { font-variant-numeric: tabular-nums; color: #0b7b69; }
.voice-recorder span:not(.voice-record-dot) { flex: 1; color: #4b625d; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-recorder audio { max-width: 210px; height: 32px; }
.voice-recorder button { border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; font-weight: 700; }
#cancelVoiceBtn { background: #eef2f1; color: #53615e; }
#sendVoiceBtn { background: #3b82f6; color: white; }
#sendVoiceBtn:disabled { opacity: .5; cursor: not-allowed; }
.message-attachment.voice-note { min-width: 245px; display: flex; align-items: center; gap: 10px; padding: 5px 0 2px; }
.voice-note-icon { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: rgba(59,130,246, .14); color: #3b82f6; }
.message-attachment.voice-note audio { width: min(260px, 58vw); height: 34px; }
@keyframes voicePulse { 70% { box-shadow: 0 0 0 9px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@media (max-width: 720px) { .voice-recorder { margin: 0 8px 8px; border-radius: 14px; flex-wrap: wrap; } .voice-recorder audio { flex-basis: 100%; max-width: 100%; } }


/* V15 Voice Note Polish + Production QA Fix */
.date-separator { align-self: center; margin: 12px 0 8px; padding: 5px 12px; border-radius: 999px; background: rgba(11,20,26,.44); color: rgba(233,237,239,.74); font-size: 12px; font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.message.is-grouped { margin-top: -1px; }
.message.me.is-grouped { border-top-right-radius: 8px; }
.message.other.is-grouped { border-top-left-radius: 8px; }
.message.is-grouped .message-sender { display: none; }
.wa-voice-note { width: min(320px, 70vw); display: flex; align-items: center; gap: 10px; padding: 4px 0 0; }
.voice-note-play { width: 38px; height: 38px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(96,165,250,.18); color: var(--wa-green-2); font-weight: 900; cursor: pointer; flex: 0 0 auto; }
.voice-note-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.voice-note-wave { height: 24px; display: flex; align-items: center; gap: 3px; opacity: .92; overflow: hidden; }
.voice-note-wave span { width: 3px; border-radius: 999px; background: rgba(233,237,239,.50); }
.voice-note-wave span:nth-child(3n+1) { height: 9px; }
.voice-note-wave span:nth-child(3n+2) { height: 18px; }
.voice-note-wave span:nth-child(3n) { height: 13px; }
.voice-note-caption { display: flex; justify-content: space-between; gap: 12px; color: rgba(233,237,239,.75); font-size: 12px; }
.voice-note-caption span { color: var(--wa-text); font-weight: 700; }
.wa-voice-note audio { width: 100%; height: 28px; opacity: .001; position: absolute; pointer-events: none; }
.voice-recorder { border-radius: 18px; }
.voice-recorder #voicePreview { opacity: 1; position: static; }
@media (max-width: 720px) { .wa-voice-note { width: min(280px, 74vw); } .date-separator { margin-top: 10px; } }


/* V16 maturity polish */
.calls-actions, .call-log-actions { display: flex; gap: 8px; align-items: center; }
.danger-lite { color: #f15c6d !important; }
.call-log-delete { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--wa-muted); font-size: 18px; }
.call-log-delete:hover { background: rgba(241,92,109,.12); color: #f15c6d; }
.message-info-btn { margin-left: 5px; border: 0; background: transparent; color: inherit; opacity: .65; font-size: 11px; cursor: pointer; }
.message-info-btn:hover { opacity: 1; }
.viewer-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; }
.viewer-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; background: rgba(255,255,255,.04); }
.viewer-row .avatar { width: 38px; height: 38px; flex: 0 0 38px; }
.viewer-row div { display: grid; gap: 2px; min-width: 0; }
.viewer-row small { color: var(--wa-muted); }
.info-state { margin-left: auto; color: var(--wa-muted); font-weight: 800; }
.info-state.read { color: #53bdeb; }
.info-state.delivered { color: var(--wa-text); }
.status-viewers-btn { align-self: flex-start; border: 0; border-radius: 999px; padding: 6px 10px; background: rgba(255,255,255,.12); color: #fff; font-size: 12px; }
.status-viewer-content { touch-action: manipulation; user-select: none; }


/* V19 Feature Maturity + Call Timeout Fix */
.reply-preview { margin: 0 16px 8px; padding: 9px 12px; border-radius: 14px; background: rgba(32,44,51,.94); border-left: 4px solid var(--wa-green-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--wa-text); }
.reply-preview.hidden { display: none; }
.reply-preview div { min-width: 0; display: grid; gap: 2px; }
.reply-preview strong { font-size: 12px; color: var(--wa-green-2); }
.reply-preview span { font-size: 13px; color: var(--wa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--wa-text); cursor: pointer; }

/* Upload preview (composer) */
.upload-preview {
  margin: 0 16px 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(32, 44, 51, 0.96);
  border: 1px solid var(--wa-border-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.upload-preview.hidden { display: none; }
.upload-preview-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
}
.upload-preview-thumb img,
.upload-preview-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.upload-preview-file-icon { font-size: 26px; line-height: 1; }
.upload-preview-meta {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.upload-preview-meta strong {
  font-size: 13px;
  color: var(--wa-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-preview-meta span {
  font-size: 11px;
  color: var(--wa-muted);
}
.upload-preview-cancel {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--wa-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.status-media-preview {
  width: 100%;
  max-height: 180px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.status-upload-box.is-selected .ux-upload-icon,
.status-upload-box.is-selected > span:nth-of-type(2) {
  display: none;
}
.status-upload-box.is-selected .status-media-preview:not(.hidden) + .ux-upload-icon {
  display: none;
}
.status-media-preview img,
.status-media-preview video {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  display: block;
}
.message-attachment.video video {
  border-radius: 8px;
  max-height: 310px;
  max-width: 100%;
  display: block;
  margin-bottom: 4px;
  background: #000;
}
.message-attachment.image,
.message-attachment.video {
  position: relative;
  min-width: 180px;
  min-height: 132px;
  overflow: hidden;
  background: rgba(255,255,255,.055);
}
.message-attachment.image.is-loading img,
.message-attachment.video.is-loading video {
  opacity: 0;
}
.message-attachment.image.is-loaded,
.message-attachment.video.is-loaded {
  min-height: 0;
}
.attachment-loading-shimmer {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(255,255,255,.05) 8%, rgba(255,255,255,.13) 18%, rgba(255,255,255,.05) 33%);
  background-size: 200% 100%;
  animation: attachmentLoadingShimmer 1.15s linear infinite;
  z-index: 0;
}
.message-attachment.is-loaded .attachment-loading-shimmer,
.message-attachment.is-media-error .attachment-loading-shimmer {
  display: none;
}
@keyframes attachmentLoadingShimmer {
  to { background-position-x: -200%; }
}
@keyframes attachmentSpin {
  to { transform: rotate(360deg); }
}
.message-attachment.file,
.message-attachment.is-media-error {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 10px;
  min-width: min(260px, 68vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: var(--wa-text);
  text-align: left;
}
.message-attachment.file small,
.message-attachment.is-media-error small {
  grid-column: 2;
  color: var(--wa-muted);
  font-size: 11px;
}
.attachment-file-badge {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(96,165,250,.18);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}
.message-reply-block { width: 100%; border: 0; border-left: 3px solid var(--wa-green-2); border-radius: 10px; padding: 7px 9px; margin-bottom: 6px; display: grid; gap: 2px; text-align: left; background: rgba(0,0,0,.18); color: inherit; cursor: pointer; }
.message-reply-block strong { font-size: 12px; color: var(--wa-green-2); }
.message-reply-block span { font-size: 12px; color: rgba(233,237,239,.72); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-actions-mini { display: flex; gap: 4px; flex-wrap: wrap; opacity: 0; max-height: 0; overflow: hidden; transition: .16s ease; }
.message:hover .message-actions-mini, .message:focus-within .message-actions-mini { opacity: 1; max-height: 36px; margin-top: 6px; }
.message-action-btn { border: 0; border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,.08); color: rgba(233,237,239,.78); font-size: 11px; cursor: pointer; }
.message-action-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.message-action-btn.danger { color: #ff9aa7; }
.deleted-message { color: rgba(233,237,239,.58); font-style: italic; }
.message-highlight { outline: 2px solid rgba(96,165,250,.55); outline-offset: 3px; }
#leaveGroupBtn { color: #ffbdc6; }
@media (max-width: 720px) { .reply-preview { margin: 0 8px 8px; } .upload-preview { margin: 0 8px 8px; } }

.current-member-option { display: flex; align-items: center; gap: 10px; }
.remove-member-btn { margin-left: auto; border: 0; border-radius: 999px; padding: 7px 10px; background: rgba(241,92,109,.14); color: #ff9aa7; font-weight: 800; cursor: pointer; }
.remove-member-btn:hover { background: rgba(241,92,109,.24); }

/* V20 WhatsApp Feature Completeness Patch */
.message-actions-mini{display:flex;gap:4px;flex-wrap:nowrap}.message-action-btn{border:0;background:rgba(255,255,255,.08);color:var(--wa-muted);border-radius:999px;padding:3px 8px;font-size:11px;cursor:pointer}.message-action-btn:hover{background:rgba(147,197,253,.16);color:var(--wa-text)}.message-action-btn.danger{color:#ffb4b4}.message-info-btn{border:0;background:transparent;color:var(--wa-muted);cursor:pointer;margin-left:4px}.search-results-list .viewer-row,.forward-picker .member-option,.group-info-body .viewer-row{cursor:pointer}.media-gallery-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:8px 0 12px}.media-chip{display:block;text-decoration:none;color:var(--wa-text);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:9px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-block-btn,.call-log-detail{border:0;border-radius:999px;background:rgba(255,255,255,.08);color:var(--wa-muted);padding:6px 9px;cursor:pointer}.contact-block-btn:hover,.call-log-detail:hover{color:var(--wa-text);background:rgba(147,197,253,.16)}.group-info-body .form-field{margin-bottom:10px}.group-info-body select{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--wa-text);border-radius:12px;padding:10px}.status-reply-actions{display:flex;gap:8px;margin-top:8px}.status-reply-actions button{border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;padding:8px 12px;cursor:pointer}.info-state.read,.sent-check.read{color:#53bdeb}.message .meta{gap:4px}.call-detail-list .viewer-row{align-items:center}

/* V21 WhatsApp Advanced Feature Completeness */
.mini-row-actions{display:flex;gap:4px;opacity:.15;transition:.16s;align-items:center}.conversation-item:hover .mini-row-actions{opacity:1}.mini-row-actions button,.row-actions button{border:0;background:#e9edef;color:#54656f;border-radius:999px;padding:5px 7px;cursor:pointer}.conversation-item.is-pinned strong{color:#2563eb}.conversation-item.is-muted p{opacity:.72}.toolbar-icon.active,.call-filter-tabs button.active{background:#dbeafe;color:#2563eb}.call-filter-tabs,.media-filter-tabs{display:flex;gap:6px;padding:8px 12px;overflow:auto}.call-filter-tabs button,.media-filter-tabs button{border:0;border-radius:999px;background:#eef2f3;color:#54656f;padding:8px 12px;cursor:pointer}.message-quick-reactions{display:flex;gap:3px;margin-top:4px;opacity:0;transform:translateY(2px);transition:.15s}.message:hover .message-quick-reactions{opacity:1;transform:none}.message-quick-reactions button{border:0;background:rgba(255,255,255,.55);border-radius:999px;padding:2px 5px;cursor:pointer}.message-reactions{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}.reaction-chip{border:1px solid rgba(0,0,0,.08);background:#fff;border-radius:999px;padding:3px 7px;font-size:12px;cursor:pointer}.reaction-chip.mine{background:#dbeafe;border-color:#b7e4ae}.message.is-pinned{box-shadow:0 0 0 1px rgba(0,128,105,.22)}.global-search-results .viewer-row{width:100%;text-align:left}.group-invite-box{display:grid;gap:8px;background:#f0f2f5;border-radius:14px;padding:10px}.group-invite-box code{word-break:break-all;color:#2563eb}.switch-row{display:flex;gap:9px;align-items:center;background:#f7f8f9;padding:9px;border-radius:12px}.status-reaction-bar{display:flex;gap:7px;align-items:center;justify-content:center}.status-reaction-bar button{border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:7px 9px;cursor:pointer}.privacy-picker{max-height:260px;overflow:auto}.contact-block-btn[data-favorite-user]{font-size:16px}.media-gallery-mini{display:flex;gap:8px;flex-wrap:wrap}.media-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-action-pill{white-space:nowrap}

/* V22 Call Completeness + Busy State Patch */
.call-device-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.call-device-bar select{min-width:150px;border:1px solid rgba(134,150,160,.22);border-radius:999px;background:#111b21;color:#e9edef;padding:8px 10px;font-size:12px;outline:none}
.call-device-bar select:disabled{opacity:.45}
#joinActiveCallBtn:not(.hidden) {
  display: grid !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent !important;
  color: var(--wa-muted) !important;
  padding: 0 !important;
  min-height: 40px;
}
#upgradeVideoBtn{background:#60a5fa;color:#0f172a;font-weight:700}
.call-log-item .call-log-icon.failed{color:#ff9f43}

/* V23 PWA install + mobile push notification polish */
.top-icon-btn.install-action,
.top-icon-btn.push-action{background:#1f2c33;color:#d1f4e7;border:1px solid rgba(134,150,160,.18)}
.top-icon-btn.push-action.is-active{background:#60a5fa;color:#0f172a;border-color:#60a5fa}
.pwa-dialog-card{max-width:420px}
.pwa-install-steps{display:grid;gap:10px;margin:12px 0 4px}
.pwa-install-steps div{display:grid;gap:3px;padding:12px;border-radius:14px;background:#111b21;border:1px solid rgba(134,150,160,.16)}
.pwa-install-steps strong{font-size:14px;color:#e9edef}
.pwa-install-steps span{font-size:12px;color:#8696a0;line-height:1.45}

/* V26 Deep Design Consistency + Socket/Media Logic Fix
   Final dark WhatsApp-like consistency layer for V20/V21 feature UI. */
.forward-dialog-card,
.global-search-dialog-card,
.chat-search-dialog-card,
.group-info-dialog-card,
.message-info-dialog-card,
.call-detail-dialog-card,
.viewers-dialog-card,
.status-privacy-dialog-card,
.call-participant-dialog-card,
.add-member-dialog-card,
.group-dialog-card,
.contact-dialog-card,
.status-dialog-card,
.profile-dialog-card,
.logout-dialog-card,
.pwa-dialog-card {
  background: var(--wa-panel);
  color: var(--wa-text);
  border: 1px solid var(--wa-border);
  box-shadow: var(--shadow-soft);
}
.forward-dialog-card .dialog-body,
.global-search-dialog-card .dialog-body,
.chat-search-dialog-card .dialog-body,
.group-info-dialog-card .dialog-body,
.message-info-dialog-card .dialog-body,
.call-detail-dialog-card .dialog-body,
.viewers-dialog-card .dialog-body,
.status-privacy-dialog-card .dialog-body {
  background: linear-gradient(180deg, rgba(17,27,33,.98), rgba(11,20,26,.98));
}
.search-result-row,
.viewer-row,
.group-member-info-row,
.forward-picker .member-option,
.group-info-body .viewer-row,
.call-log-item,
.contact-item,
.status-item,
.member-option {
  background: rgba(255,255,255,.035);
  color: var(--wa-text);
  border: 1px solid rgba(134,150,160,.12);
  border-radius: 14px;
}
.search-result-row:hover,
.viewer-row:hover,
.group-member-info-row:hover,
.forward-picker .member-option:hover,
.call-log-item:hover,
.contact-item:hover,
.status-item:hover,
.member-option:hover {
  background: rgba(255,255,255,.06);
}
.search-result-row small,
.viewer-row small,
.group-member-info-row small,
.call-log-item small,
.contact-item small,
.status-item small { color: var(--wa-muted); }
.mini-row-actions { opacity: .42; }
.conversation-item:hover .mini-row-actions,
.conversation-item:focus-within .mini-row-actions { opacity: 1; }
.mini-row-actions button,
.row-actions button,
.call-filter-tabs button,
.media-filter-tabs button,
.item-action-pill,
.contact-block-btn,
.call-log-detail,
.call-log-delete,
.status-reply-actions button,
.status-viewers-btn,
.message-action-btn,
.message-info-btn {
  background: rgba(255,255,255,.075);
  color: var(--wa-muted);
  border: 1px solid rgba(134,150,160,.14);
}
.mini-row-actions button:hover,
.row-actions button:hover,
.call-filter-tabs button:hover,
.media-filter-tabs button:hover,
.item-action-pill:hover,
.contact-block-btn:hover,
.call-log-detail:hover,
.call-log-delete:hover,
.status-reply-actions button:hover,
.status-viewers-btn:hover,
.message-action-btn:hover,
.message-info-btn:hover {
  background: rgba(96,165,250,.16);
  color: var(--wa-text);
  border-color: rgba(96,165,250,.26);
}
.toolbar-icon.active,
.call-filter-tabs button.active,
.media-filter-tabs button.active,
.reaction-chip.mine {
  background: rgba(96,165,250,.22);
  color: var(--wa-green-2);
  border-color: rgba(96,165,250,.34);
}
.conversation-item.is-pinned strong { color: var(--wa-green-2); }
.conversation-item.is-muted p { opacity: .62; }
.group-invite-box,
.switch-row,
.pwa-install-steps div,
.media-chip,
.reaction-chip {
  background: rgba(255,255,255,.045);
  color: var(--wa-text);
  border: 1px solid rgba(134,150,160,.13);
}
.group-invite-box code { color: var(--wa-green-2); }
.switch-row { justify-content: space-between; }
.switch-row input { accent-color: var(--wa-green); }
.media-gallery-mini { gap: 10px; }
.media-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 13px;
}
.media-chip:hover { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.24); }
.message-quick-reactions {
  opacity: 0;
  transform: translateY(2px);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.message:hover .message-quick-reactions,
.message:focus-within .message-quick-reactions { opacity: 1; transform: none; }
.message-quick-reactions button {
  background: rgba(32,44,51,.96);
  color: var(--wa-text);
  border: 1px solid rgba(134,150,160,.16);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.message-reactions { align-items: center; }
.reaction-chip { cursor: pointer; color: var(--wa-text); }
.message-actions-mini {
  gap: 5px;
  align-items: center;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.message:hover .message-actions-mini,
.message:focus-within .message-actions-mini {
  opacity: 1;
  max-height: 42px;
  margin-top: 6px;
}
.message-action-btn {
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
}
.message-action-btn.danger,
.danger-lite,
.call-log-delete:hover { color: #ff9aa7 !important; }
.voice-recorder {
  background: rgba(32,44,51,.98);
  color: var(--wa-text);
  border: 1px solid rgba(134,150,160,.18);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}
.voice-recorder strong { color: var(--wa-green-2); }
.voice-recorder span:not(.voice-record-dot) { color: var(--wa-muted); }
.voice-recorder button {
  background: rgba(255,255,255,.08);
  color: var(--wa-text);
  border: 1px solid rgba(134,150,160,.15);
  border-radius: 999px;
}
.voice-recorder button:hover { background: rgba(96,165,250,.16); }
.voice-recorder audio { filter: invert(.9) hue-rotate(160deg); opacity: .86; }
.call-window { background: #0b141a; }
.call-device-bar {
  padding-top: 6px;
  border-top: 1px solid rgba(134,150,160,.10);
}
.call-device-bar select,
.group-info-body select,
.status-privacy-dialog-card select {
  background: rgba(17,27,33,.95);
  color: var(--wa-text);
  border: 1px solid rgba(134,150,160,.20);
}
.call-chat-panel { background: #111b21; }
.call-chat-form input,
.call-chat-form textarea {
  background: rgba(255,255,255,.06);
  color: var(--wa-text);
  border: 1px solid rgba(134,150,160,.14);
}
.call-log-actions { flex-wrap: wrap; }
.call-logs-list,
.contacts-list,
.status-tray { display: grid; gap: 4px; }
@media (max-width: 720px) {
  .call-window { width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .call-window > header { padding: 12px; }
  .call-body { grid-template-rows: minmax(0, 1fr) minmax(112px, 34vh); }
  .call-video-grid { min-height: 0; padding: 8px; gap: 7px; }
  .call-chat-panel { max-height: 34vh; }
  .call-controls { max-height: 142px; overflow: auto; justify-content: flex-start; padding: 10px; }
  .call-controls button { min-height: 36px; padding: 0 10px; font-size: 12px; }
  .call-device-bar { width: 100%; }
  .call-device-bar select { flex: 1 1 140px; min-width: 0; }
  .voice-recorder { margin: 0 8px 8px; border-radius: 14px; flex-wrap: wrap; }
}

/* V27 Mobile responsive + contacts QR scan */
.scanner-box:not(.is-scanning) { display: none; }
.scanner-box.is-scanning {
  display: block;
  min-height: 180px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(18, 184, 150, 0.28);
  background: #000;
}
.scanner-box.is-scanning video {
  display: block;
  width: 100%;
  min-height: 180px;
  max-height: min(42vh, 280px);
  object-fit: cover;
  background: #000;
}
.contact-scan-card { display: grid; gap: 12px; }
.contact-scan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.contact-scan-head strong { display: block; margin-top: 2px; color: var(--wa-text); }
.contact-scan-head p { margin: 4px 0 0; color: var(--wa-muted); font-size: 12px; line-height: 1.35; }
.contact-scan-actions { display: flex; gap: 8px; flex-shrink: 0; }
.contact-scan-status { margin: 0; color: var(--wa-muted); font-size: 12px; line-height: 1.45; }
.contact-manual-add { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.contact-manual-add input { width: 100%; border: 1px solid var(--wa-border); background: var(--wa-panel); color: var(--wa-text); border-radius: 11px; padding: 11px 12px; outline: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.contact-manual-add input:focus { border-color: rgba(96,165,250,.72); box-shadow: 0 0 0 2px rgba(96,165,250,.14); }
.contacts-scanner-box.is-scanning { max-height: min(42vh, 280px); }

/* V28 Responsive polish */
.contact-item { align-items: center; position: relative; }
.contact-item .item-main { flex: 1; min-width: 0; }
.contact-item .item-title .dot { flex: 0 0 auto; }
.contact-item .item-main p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-row-meta {
  display: block;
  color: var(--wa-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-item .contact-row-menu-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wa-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.contact-item:hover .contact-row-menu-btn,
.contact-item:focus-within .contact-row-menu-btn,
.contact-item .contact-row-menu-btn:focus-visible {
  opacity: 1;
}
.contact-item .contact-row-menu-btn:hover,
.contact-item .contact-row-menu-btn:focus-visible {
  background: rgba(134,150,160,.16);
  color: var(--wa-text);
}
.contact-detail-body {
  display: grid;
  gap: 14px;
  padding: 0 20px 8px;
  max-height: min(70vh, 640px);
  overflow: auto;
}
.contact-detail-section { display: grid; gap: 10px; }
.contact-detail-info-grid {
  display: grid;
  gap: 8px;
}
.contact-detail-info-grid > div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--wa-border-soft);
}
.contact-detail-info-grid span {
  color: var(--wa-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.contact-detail-info-grid strong {
  color: var(--wa-text);
  font-size: 14px;
  word-break: break-word;
}
.contact-detail-code-card { margin-top: 2px; }
.contact-detail-qr-frame {
  margin: 0 auto;
  width: min(100%, 220px);
}
.contact-detail-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.contact-detail-quick-actions button {
  min-height: 42px;
}
.contact-detail-actions {
  flex-wrap: wrap;
}
.contact-detail-dialog-card {
  width: min(520px, calc(100vw - 24px));
}
.contact-detail-hero small {
  display: block;
  margin-top: 4px;
  color: var(--wa-muted);
  font-size: 12px;
}
.contact-scan-actions button:not(#contactsStopScanBtn),
.contact-manual-add button,
#contactsAddByCodeBtn {
  background: var(--wa-green);
  color: #0f172a;
}
#contactsStopScanBtn {
  background: var(--wa-panel-2);
  color: var(--wa-text-soft);
  border: 1px solid var(--wa-border-soft);
}

/* V29 Mobile Consolidation — canonical mobile layer */
@media (max-width: 980px) {
  html, body, .app {
    overflow-x: hidden;
    max-width: 100%;
  }
  .app {
    width: 100%;
    grid-template-columns: 1fr;
    height: 100dvh;
    max-height: 100dvh;
  }
  .sidebar {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .chat-panel {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
  }
  .chat-header {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    flex-shrink: 0;
  }
  .app.show-list .chat-panel {
    visibility: hidden;
    pointer-events: none;
  }
  .app:not(.show-list) .chat-panel {
    visibility: visible;
    pointer-events: auto;
  }
  .tab-panel { flex: 1; min-height: 0; }
  .tab-panel.active {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .composer {
    flex-shrink: 0;
    padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  }
  .voice-recorder,
  .reply-preview,
  .upload-preview {
    flex-shrink: 0;
  }
  .side-header-actions .top-icon-btn {
    width: 44px;
    height: 44px;
  }
  .app-toast, .call-toast {
    max-width: min(520px, calc(100% - 28px));
  }
}

@media (max-width: 560px) {
  :root { --sidebar-w: 100%; }

  /* Auth */
  .auth-screen {
    padding: max(20px, env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
    align-items: center;
    justify-items: center;
  }
  .auth-card {
    width: min(100%, 420px);
    max-width: 420px;
    padding: 24px 20px;
    border-radius: 20px;
  }
  .auth-card h1 { font-size: 24px; }

  /* Sidebar header & tabs */
  .side-header { padding-inline: 10px; gap: 8px; }
  .side-header-actions { gap: 4px; }
  .top-icon-btn { width: 44px; height: 44px; }
  .profile-mini strong { max-width: 168px; }
  .side-tab { font-size: 11px; letter-spacing: 0; padding-top: 12px; }
  .production-card { margin-inline: 10px; }

  /* Chat header */
  .chat-header {
    gap: 8px;
    padding: max(6px, env(safe-area-inset-top, 0px)) 10px 8px;
    min-height: 56px;
    background: linear-gradient(180deg, rgba(32, 44, 51, 0.98), rgba(32, 44, 51, 0.94));
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(134, 150, 160, 0.14);
  }
  .chat-header-avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
  .chat-back-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: var(--wa-text);
    background: transparent;
    flex-shrink: 0;
  }
  .chat-head-tap {
    flex: 1;
    min-width: 0;
    gap: 10px;
    padding-right: 2px;
  }
  .chat-head-text {
    flex: 1;
    min-width: 0;
    padding-right: 0;
  }
  .chat-head-text strong {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
  }
  .chat-head-text span {
    font-size: 11px;
    line-height: 1.25;
  }
  .chat-call-actions {
    flex: 0 0 auto;
    max-width: none;
    min-width: 0;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 0;
    padding: 0;
  }
  .chat-call-actions .call-btn,
  .chat-call-actions .chat-icon-btn {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    font-size: 17px;
    line-height: 1;
    border-radius: 50%;
    background: transparent;
    color: var(--wa-muted);
    font-weight: 400;
  }
  .chat-call-actions .call-btn.voice { color: var(--wa-green-2); }
  .chat-call-actions .call-btn:hover:not(:disabled),
  .chat-call-actions .chat-icon-btn:hover:not(:disabled) {
    background: rgba(134, 150, 160, 0.14);
    color: var(--wa-text);
  }
  .chat-call-actions .call-btn:disabled,
  .chat-call-actions .chat-icon-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
  }
  .chat-call-actions .call-text { display: none; }
  .chat-call-actions .call-text { display: none !important; }

  /* Composer */
  .composer {
    flex-shrink: 0;
    gap: 6px;
    padding-top: 8px;
    padding-inline: 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  #messageInput {
    min-width: 0;
    flex: 1;
    min-height: 44px;
  }
  .file-btn, .composer button[type="submit"], .mic-btn { flex-shrink: 0; }

  /* Lists — chat & contacts */
  .conversation-item, .contact-item { padding-inline: 10px; }
  .conversation-item .chat-row-menu-btn { opacity: 0.72; }
  .contact-item { flex-wrap: nowrap; overflow: hidden; }
  .contact-item .contact-row-menu-btn { opacity: 0.72; }
  .contact-detail-quick-actions { grid-template-columns: 1fr; }

  /* Contact scan card */
  .contact-scan-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .contact-scan-actions { width: 100%; }
  .contact-scan-actions button { flex: 1; min-height: 44px; }
  .contact-manual-add { grid-template-columns: 1fr; }
  .contact-manual-add button { width: 100%; min-height: 44px; }
  .tab-contact-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .tab-contact-card button { width: 100%; }

  /* Status & calls headlines */
  .status-headline, .calls-headline, .contact-card {
    align-items: flex-start;
  }
  .status-headline, .calls-headline {
    flex-direction: column;
    align-items: stretch;
  }
  .status-headline > div:last-child,
  .calls-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .status-headline button, .calls-actions button {
    flex: 1 1 auto;
    min-height: 44px;
  }
  .call-filter-tabs, .media-filter-tabs {
    padding-inline: 10px;
    scrollbar-width: none;
  }
  .call-filter-tabs::-webkit-scrollbar,
  .media-filter-tabs::-webkit-scrollbar { display: none; }
  .call-filter-tabs button, .media-filter-tabs button {
    min-height: 40px;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(255,255,255,.08);
    color: var(--wa-muted);
  }
  .call-filter-tabs button.active, .media-filter-tabs button.active {
    background: rgba(147,197,253,.18);
    color: var(--wa-green-2);
  }
  .toolbar-icon.active {
    background: rgba(147,197,253,.18);
    color: var(--wa-green-2);
  }

  /* V21 dark-theme harmonization */
  .mini-row-actions button, .row-actions button {
    background: rgba(255,255,255,.1);
    color: var(--wa-text);
    min-height: 32px;
    padding: 5px 8px;
  }
  .group-invite-box {
    background: var(--wa-panel-2);
    border: 1px solid var(--wa-border-soft);
  }
  .group-invite-box code { color: var(--wa-green-2); }
  .switch-row {
    background: var(--wa-panel-2);
    border: 1px solid var(--wa-border-soft);
  }
  .reaction-chip {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.12);
    color: var(--wa-text);
  }
  .reaction-chip.mine {
    background: rgba(147,197,253,.18);
    border-color: rgba(147,197,253,.35);
    color: var(--wa-green-2);
  }

  /* Modals — responsive height (fit content, scroll lists only) */
  dialog:not(.status-fullscreen-dialog):not(.media-viewer-dialog):not(.status-composer-dialog) {
    position: fixed;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    max-width: calc(100vw - 16px);
    max-height: calc(
      100dvh
      - 16px
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
    );
  }
  .dialog-card:not(.modal-compact),
  .contact-dialog-card:not(.modal-compact),
  .group-dialog-card:not(.modal-compact),
  .chat-modal:not(.modal-compact) {
    width: min(560px, calc(100vw - 16px));
    height: fit-content;
    max-height: min(90dvh, 760px);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .dialog-card.modal-compact,
  .logout-dialog-card.modal-compact,
  .pwa-dialog-card.modal-compact,
  .call-detail-dialog-card.modal-compact {
    width: min(420px, calc(100vw - 16px));
    max-height: none;
    height: fit-content;
  }
  .dialog-card header, .ux-modal-head, .group-dialog-header,
  .profile-dialog-header, .logout-dialog-header {
    flex-shrink: 0;
  }
  .ux-contact-body, .profile-dialog-body, .group-dialog-body,
  .ux-status-body, .dialog-body, .chat-modal-body {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(48dvh, 380px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-compact .ux-contact-body,
  .modal-compact .profile-dialog-body,
  .modal-compact .group-dialog-body,
  .modal-compact .chat-modal-body,
  .modal-compact .dialog-body {
    flex: none;
    max-height: none;
  }
  .ux-modal-actions, .dialog-card menu,
  .profile-dialog-actions, .group-dialog-actions {
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--wa-border-soft);
  }
  .ux-modal-actions button, .dialog-card menu button {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
  }
  .profile-photo-editor { align-items: flex-start; }
  .ux-qr-frame {
    width: min(168px, 56vw);
    height: min(168px, 56vw);
  }
  .ux-qr-frame canvas,
  #qrCanvas {
    width: 100%;
    height: 100%;
  }
  .member-picker,
  .chat-modal-list,
  .viewer-list,
  .forward-picker {
    max-height: min(38dvh, 280px);
  }

  /* Call overlay & toast */
  .call-toast {
    left: 10px;
    right: 10px;
    top: max(10px, env(safe-area-inset-top));
    min-width: 0;
    max-width: none;
  }
  .call-overlay { padding: 8px; }
  .call-window > header { align-items: flex-start; }
  .call-video-grid.call-size-2,
  .call-video-grid.call-size-3,
  .call-video-grid.call-size-4 {
    grid-template-columns: 1fr 1fr;
  }

  /* Status fullscreen */
  .status-fullscreen-dialog, .status-viewer-fullscreen {
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
  }
  .status-nav-btn {
    width: 36px;
    height: 56px;
  }
  .status-nav-btn.prev { left: 6px; }
  .status-nav-btn.next { right: 6px; }
}

/* V30 Mobile full audit — all pages & modals */
@media (max-width: 980px) {
  .auth-screen {
    min-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 560px) {
  .brand-row { gap: 12px; }
  .brand-logo { width: 46px; height: 46px; }
  .form-stack button, .tabs button { min-height: 44px; }
  .form-stack input { min-height: 44px; }

  /* Sidebar lists & toolbar */
  .search-box { padding-inline: 10px; }
  .search-box input { min-height: 40px; }
  .compact-actions, .chat-toolbar { flex-wrap: wrap; padding-inline: 10px; }
  .toolbar-primary { min-height: 40px; }
  .toolbar-icon { width: 40px; height: 40px; min-height: 40px; }
  .whatsapp-row, .item, .conversation-item { min-height: 68px; }
  .call-log-item { padding-inline: 10px; }
  .status-item { padding-inline: 10px; }
  .welcome-card { width: 100%; padding: 22px 18px; margin-inline: 8px; }
  .welcome-card h2 { font-size: 20px; }
  .welcome-card p { font-size: 14px; }
  .messages { padding-inline: 10px; }
  .typing { padding-inline: 12px; }
  .reply-preview { margin-inline: 8px; }

  /* All modal sheets — fit content; tall modals cap height */
  .dialog-card:not(.modal-compact),
  .forward-dialog-card,
  .global-search-dialog-card,
  .chat-search-dialog-card,
  .group-info-dialog-card,
  .message-info-dialog-card,
  .call-detail-dialog-card:not(.modal-compact),
  .viewers-dialog-card,
  .status-privacy-dialog-card,
  .call-participant-dialog-card,
  .add-member-dialog-card,
  .status-dialog-card,
  .profile-dialog-card,
  .contact-dialog-card,
  .group-dialog-card,
  .chat-modal:not(.modal-compact) {
    width: min(560px, calc(100vw - 16px));
    height: fit-content;
    max-height: min(90dvh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .logout-dialog-card.modal-compact,
  .pwa-dialog-card.modal-compact,
  .dialog-card.modal-compact,
  .call-detail-dialog-card.modal-compact {
    width: min(420px, calc(100vw - 16px));
    max-height: none;
    height: fit-content;
  }
  .dialog-card header,
  .ux-modal-head,
  .group-dialog-header,
  .profile-dialog-header,
  .logout-dialog-header {
    padding: 14px 16px 12px;
  }
  .dialog-card h3,
  .ux-modal-head h3,
  .profile-dialog-header h3,
  .group-dialog-header h3,
  .logout-dialog-header h3 {
    font-size: 18px;
    line-height: 1.25;
  }
  .dialog-card header p,
  .ux-modal-head p {
    font-size: 12px;
    line-height: 1.4;
  }
  .dialog-card > .group-dialog-body,
  .dialog-card > .profile-dialog-body,
  .dialog-card > .member-picker,
  .dialog-card > .form-field,
  .dialog-card > .panel-label,
  .dialog-card > p,
  .dialog-card > small,
  .add-member-dialog-card > p,
  .add-member-dialog-card > .form-field,
  .add-member-dialog-card > .panel-label,
  .add-member-dialog-card > .member-picker,
  .add-member-dialog-card > .dialog-msg {
    padding-inline: 16px;
  }
  .forward-dialog-card .dialog-body,
  .global-search-dialog-card .dialog-body,
  .global-search-dialog-card .form-field,
  .chat-search-dialog-card .dialog-body,
  .chat-search-dialog-card .form-field,
  .group-info-dialog-card .dialog-body,
  .message-info-dialog-card .dialog-body,
  .call-detail-dialog-card .dialog-body,
  .viewers-dialog-card .dialog-body,
  .status-privacy-dialog-card .form-field,
  .status-privacy-dialog-card .dialog-msg,
  .call-participant-picker,
  .add-member-dialog-card .member-picker,
  .ux-contact-body,
  .profile-dialog-body,
  .group-dialog-body,
  .ux-status-body,
  .pwa-install-steps {
    padding-inline: 16px;
  }
  .forward-dialog-card .dialog-body,
  .global-search-dialog-card .dialog-body,
  .chat-search-dialog-card .dialog-body,
  .group-info-dialog-card .dialog-body,
  .message-info-dialog-card .dialog-body,
  .call-detail-dialog-card .dialog-body,
  .viewers-dialog-card .dialog-body,
  .viewer-list,
  .forward-picker,
  .global-search-results,
  .search-results-list,
  .group-info-body,
  .call-participant-picker,
  .privacy-picker,
  .member-picker,
  .chat-modal-list {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(42dvh, 320px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ux-contact-body,
  .profile-dialog-body,
  .group-dialog-body,
  .ux-status-body,
  .chat-modal-body {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(46dvh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .form-field input,
  .form-field textarea,
  .form-field select,
  .ux-caption-field textarea,
  .ux-add-code-card input {
    min-height: 44px;
  }
  .form-field textarea,
  .ux-caption-field textarea {
    min-height: 88px;
  }
  .profile-photo-editor {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .profile-upload-btn { width: 100%; justify-content: center; }
  .status-upload-box { min-height: 100px; padding: 16px; }
  .ux-code-card { flex-direction: column; align-items: stretch; gap: 10px; }
  .ux-code-card button { width: 100%; min-height: 44px; }
  .ux-add-code-card button { width: 100%; min-height: 44px; }
  .logout-dialog-actions button,
  .profile-dialog-actions button,
  .group-dialog-actions button {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
  }
  .logout-dialog-header { align-items: flex-start; }

  /* Incoming call + toasts */
  #incomingCall.call-toast {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
  }
  #incomingCall.call-toast > div {
    flex: 1 1 100%;
    min-width: 0;
  }
  #incomingCall.call-toast strong,
  #incomingCall.call-toast span {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  #incomingCall .ringtone-unlock-hint {
    display: block;
    margin-top: 4px;
  }
  #incomingCall.call-toast button {
    min-height: 44px;
    flex: 1 1 calc(50% - 4px);
  }
  .app-toast {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    width: auto;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
  }

  /* Call overlay fullscreen mobile */
  .call-overlay {
    padding: 0;
    align-items: stretch;
  }
  .call-window {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: 0;
  }
  .call-window > header {
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px 12px;
    flex-wrap: wrap;
    gap: 10px;
  }
  .call-window > header > div { flex: 1; min-width: 0; }
  .call-window > header .danger-btn {
    min-height: 44px;
    flex-shrink: 0;
  }
  .call-controls {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .call-controls button { min-height: 44px; }

  /* Status viewer safe areas */
  .status-viewer-caption {
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .fullscreen-head {
    padding-top: max(22px, env(safe-area-inset-top, 0px));
  }
  .status-text-full {
    width: min(92vw, 560px);
    padding: 24px 18px;
  }
  .status-text-full strong { font-size: 28px; }
  .status-text-full p { font-size: 18px; }

  /* PWA dialog */
  .pwa-dialog-card { max-width: 100%; }
  .pwa-install-steps div { padding: 14px; }
}

/* V31 Premium UI polish — contacts, shell, buttons */
.btn-primary,
.empty-tab-card .btn-primary,
.empty-tab-card button[data-open-contact-tools] {
  border: 0;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 18px;
  background: linear-gradient(135deg, var(--wa-green-2), var(--wa-green));
  color: #04241d;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .01em;
  box-shadow: var(--shadow-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-primary:hover,
.empty-tab-card button[data-open-contact-tools]:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); filter: brightness(.98); }

.btn-secondary,
#contactsStopScanBtn {
  border: 1px solid var(--wa-border);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 16px;
  background: rgba(32, 44, 51, 0.92);
  color: var(--wa-text-soft);
  font-weight: 700;
  font-size: 13px;
}
.btn-secondary:hover,
#contactsStopScanBtn:hover {
  background: var(--wa-row-hover);
  color: var(--wa-text);
}

.sidebar .side-header {
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(32, 44, 51, 0.98), rgba(32, 44, 51, 0.88));
  backdrop-filter: blur(8px);
}
html.is-capacitor-native.lumi-statusbar-css-inset .sidebar .side-header {
  min-height: calc(64px + max(env(safe-area-inset-top, 0px), 24px));
  padding-top: calc(12px + max(env(safe-area-inset-top, 0px), 24px));
}
html.is-capacitor-native .sidebar .side-header {
  min-height: calc(64px + max(env(safe-area-inset-top, 0px), 24px));
  padding-top: calc(12px + max(env(safe-area-inset-top, 0px), 24px));
}
.sidebar .top-icon-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--wa-border-soft);
  background: rgba(17, 27, 33, 0.55);
  font-size: 16px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sidebar .top-icon-btn:hover {
  background: var(--wa-row-hover);
  border-color: rgba(134, 150, 160, 0.28);
}
.sidebar .push-action {
  border-color: rgba(18, 184, 150, 0.35);
  background: rgba(96, 165, 250, 0.12);
  color: var(--wa-green-2);
}

.sidebar .side-tab {
  font-size: 11px;
  letter-spacing: .08em;
  padding: 15px 4px 13px;
}
.sidebar .side-tab.active { color: var(--wa-text); font-weight: 800; }
.sidebar .side-tab.active::after {
  left: 22%;
  right: 22%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--wa-green-2), transparent);
}

.sidebar .search-box { padding: 10px 14px 12px; }
.sidebar .search-box input {
  height: 42px;
  border: 1px solid var(--wa-border-soft);
  background: rgba(32, 44, 51, 0.72);
  font-size: 14px;
}
.sidebar .search-box input:focus {
  border-color: rgba(18, 184, 150, 0.45);
  box-shadow: 0 0 0 3px rgba(18, 184, 150, 0.12);
}
.sidebar .search-box::before { left: 30px; top: 18px; opacity: .85; }

.contact-panel-stack .production-card,
#tabStatus .production-card,
#tabCalls .production-card {
  padding: 16px 16px 15px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(32, 44, 51, 0.98), rgba(24, 34, 41, 0.98));
  border: 1px solid var(--wa-border-soft);
  box-shadow: var(--shadow-card);
}
.contact-panel-stack .production-card { margin: 0; }
#tabStatus .production-card,
#tabCalls .production-card { margin: 12px; }
.contact-panel-stack {
  display: grid;
  gap: 12px;
  padding: 12px 12px 0;
}
.section-list-label {
  padding: 8px 4px 6px;
  margin: 0;
}
.card-copy {
  margin: 6px 0 0;
  color: var(--wa-muted);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
}
.contact-code-block { min-width: 0; flex: 1; }
.contact-code-display,
#myContactCode {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.02rem;
  letter-spacing: .1em;
  font-weight: 700;
  color: #d7f7ef;
  text-shadow: 0 0 18px rgba(18, 184, 150, 0.18);
}
.tab-contact-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.tab-contact-card .btn-primary {
  flex-shrink: 0;
  align-self: center;
  min-width: 108px;
}
.contact-scan-card { gap: 14px; }
.contact-scan-head strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.contact-scan-status {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(11, 20, 26, 0.55);
  border: 1px dashed var(--wa-border-soft);
  font-size: 12px;
}
.contact-manual-add {
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding-top: 2px;
}
.contact-manual-add input {
  min-height: 42px;
  border-radius: 12px;
  background: rgba(11, 20, 26, 0.65);
  font-size: 13px;
}
.contact-manual-add .btn-primary { min-width: 92px; }
.contact-scan-actions .btn-primary,
.contact-scan-actions .btn-secondary { min-height: 40px; }

.empty-tab-card {
  margin: 0 12px 14px;
  padding: 22px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(32, 44, 51, 0.96), rgba(24, 34, 41, 0.96));
  border: 1px solid var(--wa-border-soft);
  box-shadow: var(--shadow-card);
}
.empty-tab-card strong {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}
.empty-tab-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--wa-muted);
}
.empty-tab-card .btn-primary,
.empty-tab-card button[data-open-contact-tools] {
  margin-top: 14px;
  width: 100%;
  max-width: 240px;
}

.status-headline strong,
.calls-headline strong,
.contact-card strong,
.contact-scan-head strong {
  letter-spacing: -.01em;
}
.sidebar .panel-label,
.sidebar .status-section-title,
.sidebar .section-list-label {
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--wa-muted-2);
}

.premium-avatar {
  box-shadow: 0 0 0 2px rgba(18, 184, 150, 0.18), 0 6px 16px rgba(0, 0, 0, 0.28);
}

@media (max-width: 980px) {
  .tab-contact-card {
    flex-direction: column;
    align-items: stretch;
  }
  .tab-contact-card .btn-primary {
    width: 100%;
    align-self: stretch;
    min-height: 44px;
  }
  .contact-panel-stack { padding: 10px 10px 0; gap: 10px; }
  .empty-tab-card .btn-primary,
  .empty-tab-card button[data-open-contact-tools] { max-width: none; }
}

/* Auth — isolated from app shell V31 (login/register tidak ikut polish sidebar) */
.auth-screen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(circle at top, rgba(18, 184, 150, 0.12), transparent 38%), var(--wa-app-bg);
}
.auth-card {
  box-shadow: var(--shadow-soft);
}
.auth-card .brand-row { margin-bottom: 20px; }
.auth-card h1 { margin: 0; line-height: 1.15; }
.auth-card .tabs { margin-bottom: 18px; }
.auth-card .tabs button {
  min-height: 42px;
  box-shadow: none;
  transform: none;
}
.auth-card .tabs button.active {
  background: var(--wa-green);
  color: #0f172a;
}
.auth-card .form-stack button[type="submit"] {
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
  box-shadow: none;
  transform: none;
}
.auth-card .form-stack button[type="submit"]:hover {
  transform: none;
  filter: brightness(1.05);
}
.auth-card .form-stack input {
  border-radius: 12px;
  min-height: 44px;
}

.auth-google-wrap {
  margin-top: 14px;
}
.auth-card .form-stack .auth-google-wrap {
  margin-top: 14px;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--wa-muted);
  font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--wa-border);
}
.btn-google {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--wa-border);
  border-radius: 12px;
  background: #fff;
  color: #1f2937;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, border-color .15s ease;
}
.btn-google:hover:not(:disabled) {
  filter: brightness(0.98);
  border-color: rgba(96, 165, 250, .45);
}
.btn-google:disabled {
  opacity: .65;
  cursor: wait;
}
.btn-google-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

/* V35 WhatsApp-style call layouts + disconnect stability UI */
.call-duration {
  margin: 4px 0 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--wa-green-2);
  font-variant-numeric: tabular-nums;
}

/* V39 Direct call group-like features — chat, device bar, add participant on 1:1 calls */

/* Direct audio — voice call with optional chat sidebar */
.call-overlay.is-direct-call.audio-call {
  background: radial-gradient(circle at 50% 18%, rgba(0, 168, 132, 0.18), transparent 42%), #0b141a;
}

.call-overlay.is-direct-call.audio-call .call-window {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.call-overlay.is-direct-call.audio-call .call-window > header {
  background: transparent;
  border-bottom: 0;
  position: relative;
  z-index: 4;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
}

.call-overlay.is-direct-call.audio-call .call-window > header .danger-btn {
  display: none;
}

.call-overlay.is-direct-call.audio-call .call-window > header .eyebrow {
  color: rgba(255, 255, 255, 0.62);
}

.call-overlay.is-direct-call.audio-call .call-window h3 {
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 700;
}

.call-overlay.is-direct-call.audio-call .call-window > header p {
  color: rgba(255, 255, 255, 0.72);
}

.call-overlay.is-direct-call.audio-call .call-duration {
  color: rgba(255, 255, 255, 0.88);
}

.call-overlay.is-direct-call.audio-call .call-video-grid {
  min-height: 430px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: transparent;
}

.call-overlay.is-direct-call.audio-call .call-video-grid.call-size-1,
.call-overlay.is-direct-call.audio-call .call-video-grid.call-size-2 {
  grid-template-columns: 1fr;
}

.call-overlay.is-direct-call.audio-call #localTile {
  order: 2;
  width: min(96px, 24vw);
  height: min(96px, 24vw);
  min-height: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.call-overlay.is-direct-call.audio-call #localTile span,
.call-overlay.is-direct-call.audio-call .remote-videos .video-card span {
  display: none;
}

.call-overlay.is-direct-call.audio-call #localTile video {
  display: none !important;
}

.call-overlay.is-direct-call.audio-call .remote-videos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.call-overlay.is-direct-call.audio-call .remote-videos .video-card {
  width: min(220px, 58vw);
  height: min(220px, 58vw);
  min-height: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  animation: call-audio-pulse 2.4s ease-in-out infinite;
  overflow: visible;
}

.call-overlay.is-direct-call.audio-call .remote-videos .video-card video {
  display: none !important;
}

.call-overlay.is-direct-call.audio-call .audio-avatar {
  width: min(120px, 32vw);
  height: min(120px, 32vw);
  font-size: clamp(28px, 8vw, 42px);
}

.call-overlay.is-direct-call.audio-call .remote-empty-state {
  width: min(220px, 58vw);
  height: min(220px, 58vw);
  min-height: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  padding: 24px;
}

.call-overlay.is-direct-call.audio-call .call-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: linear-gradient(180deg, transparent, rgba(11, 20, 26, 0.92) 28%);
  border-top: 0;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.call-overlay.is-direct-call.audio-call .call-controls button:not(.danger-btn) {
  border-radius: 999px;
  min-width: 112px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
}

.call-overlay.is-direct-call.audio-call .call-controls .danger-btn {
  border-radius: 999px;
  min-width: 132px;
}

@keyframes call-audio-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 168, 132, 0.22); }
  50% { box-shadow: 0 0 0 18px rgba(0, 168, 132, 0); }
}

/* V40 Direct video P2P — WhatsApp fullscreen + PiP (2 orang) */
@media (min-width: 721px) {
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) #localTile {
    display: none;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-body,
  .call-overlay.is-direct-conference:not(.is-outgoing-call) .call-body {
    grid-template-columns: 1fr;
    position: relative;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-chat-panel:not(.hidden),
  .call-overlay.is-direct-conference:not(.is-outgoing-call) .call-chat-panel:not(.hidden) {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: 14px;
    width: min(360px, calc(100% - 28px));
    z-index: 12;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .34);
  }
}

.call-overlay.is-direct-p2p.is-video-call {
  background: #000;
}

.call-overlay.is-direct-p2p.is-video-call .call-window {
  background: #000;
  border: 0;
  max-height: 100dvh;
}

.call-overlay.is-direct-p2p.is-video-call .call-body {
  grid-template-columns: 1fr;
}

.call-overlay.is-direct-p2p.is-video-call .call-window > header {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  z-index: 4;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.62), transparent);
  border-bottom: 0;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
}

.call-overlay.is-direct-p2p.is-video-call .call-window > header .danger-btn {
  display: none;
}

.call-overlay.is-direct-p2p.is-video-call .call-window h3,
.call-overlay.is-direct-p2p.is-video-call .call-window .eyebrow,
.call-overlay.is-direct-p2p.is-video-call .call-duration,
.call-overlay.is-direct-p2p.is-video-call #callStatus {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.call-overlay.is-direct-p2p.is-video-call .call-video-grid {
  position: relative;
  min-height: calc(100dvh - 120px);
  padding: 0;
  display: block;
  background: #000;
}

.call-overlay.is-direct-p2p.is-video-call #localTile {
  position: absolute;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width: 112px;
  height: 152px;
  min-height: 0;
  z-index: 4;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.call-overlay.is-direct-p2p.is-video-call #localTile span {
  font-size: 10px;
  left: 6px;
  bottom: 6px;
}

.call-overlay.is-direct-p2p.is-video-call .remote-videos {
  display: block;
}

.call-overlay.is-direct-p2p.is-video-call .remote-videos .video-card {
  position: absolute;
  inset: 0;
  min-height: calc(100dvh - 120px);
  border-radius: 0;
  border: 0;
}

.call-overlay.is-direct-p2p.is-video-call .remote-empty-state {
  position: absolute;
  inset: 0;
  min-height: calc(100dvh - 120px);
  border-radius: 0;
  border: 0;
  background: #111;
}

.call-overlay.is-direct-p2p.is-video-call .call-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72) 36%);
  border-top: 0;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.call-overlay.is-direct-p2p.is-video-call .call-controls button:not(.danger-btn) {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}

.call-overlay.is-direct-p2p.is-video-call .call-action-label {
  color: rgba(255, 255, 255, 0.82);
}

.call-overlay.is-direct-p2p.is-video-call .call-chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  width: min(320px, calc(100% - 24px));
  max-height: min(52vh, 420px);
  z-index: 6;
  border-radius: 16px 0 0 16px;
  border: 1px solid var(--wa-border-soft);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.call-overlay.is-direct-p2p.is-video-call .call-chat-panel.hidden {
  display: none !important;
}

.call-overlay.is-direct-p2p.is-video-call #toggleCallChatBtn.is-active {
  background: rgba(0, 168, 132, 0.28);
  border-color: rgba(0, 168, 132, 0.45);
}

/* V40 Direct video conference — grid saat 3+ peserta */
@media (min-width: 981px) {
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) {
    padding: 0;
    place-items: stretch;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-body,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-video-grid,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-empty-state {
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-empty-state {
    inset: 0;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos .video-card video {
    object-fit: contain;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #localTile video {
    object-fit: cover;
  }
}

.call-overlay.is-direct-conference .call-body {
  grid-template-columns: 1fr 330px;
}

.call-overlay.is-direct-conference .call-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(160px, 1fr);
  gap: 10px;
  min-height: 360px;
  padding: 12px;
}

.call-overlay.is-direct-conference #localTile {
  position: relative;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  min-height: 160px;
  border-radius: 16px;
}

.call-overlay.is-direct-conference .remote-videos {
  display: contents;
}

.call-overlay.is-direct-conference .remote-videos .video-card {
  position: relative;
  inset: auto;
  min-height: 160px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.call-overlay.is-direct-conference .call-controls {
  position: relative;
  background: var(--wa-panel-2);
  border-top: 1px solid var(--wa-border-soft);
}

/* Group video/audio — grid + chat sidebar */
.call-overlay.is-group-call .call-window > header .eyebrow {
  color: var(--wa-green-2);
}

.call-overlay.is-group-call.is-video-call .call-video-grid {
  min-height: 420px;
}

.call-overlay.is-group-call.audio-call .call-video-grid {
  min-height: 380px;
  background: radial-gradient(circle at top, rgba(0, 168, 132, 0.08), #050505 42%);
}

.call-overlay.is-group-call.audio-call .video-card video {
  display: none !important;
}

.call-overlay.is-group-call.audio-call .audio-avatar {
  width: 72px;
  height: 72px;
}

@media (max-width: 980px) {
  .call-overlay.is-group-call .call-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .call-overlay.is-group-call .call-chat-panel {
    max-height: 34dvh;
    border-left: 0;
    border-top: 1px solid var(--wa-border-soft);
  }

  .call-overlay.is-direct-p2p.is-video-call #localTile {
    width: 96px;
    height: 132px;
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .call-overlay.is-direct-conference .call-body {
    grid-template-columns: 1fr;
  }

  .call-overlay.is-direct-conference .call-chat-panel {
    max-height: 34dvh;
    border-left: 0;
    border-top: 1px solid var(--wa-border-soft);
  }
}

/* V36 upload audit — composer uploading state + protected media chips */
.composer.is-uploading {
  opacity: 0.78;
}

.media-chip {
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

button.message-attachment.file {
  cursor: pointer;
  font: inherit;
  width: 100%;
  border: 0;
}

/* V37 Call UI audit — WhatsApp-style controls + incoming/group layouts */
#incomingCall.is-audio-ring {
  border-color: rgba(0, 168, 132, 0.55);
  box-shadow: 0 0 0 1px rgba(0, 168, 132, 0.18), var(--shadow-soft);
}

#incomingCall.is-video-ring {
  border-color: rgba(83, 189, 235, 0.55);
  box-shadow: 0 0 0 1px rgba(83, 189, 235, 0.18), var(--shadow-soft);
}

#incomingCall.is-group-ring strong::before {
  content: '👥 ';
}

.call-controls-wa {
  gap: 14px;
  align-items: flex-end;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
}

.call-action-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 72px;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--wa-text);
  cursor: pointer;
}

.call-action-glyph {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.call-action-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
}

.call-action-secondary .call-action-glyph {
  background: rgba(255, 255, 255, 0.14);
}

.call-action-btn.is-muted .call-action-glyph,
.call-action-btn.is-off .call-action-glyph {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.35);
}

.call-action-end .call-action-glyph {
  background: #ef4444;
  border-color: #ef4444;
  transform: rotate(135deg);
}

.call-overlay.is-direct-call.audio-call .call-action-label {
  color: rgba(255, 255, 255, 0.82);
}

.call-overlay.is-group-call.is-video-call .call-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(160px, 1fr);
  gap: 10px;
  min-height: 360px;
  padding: 12px;
}

.call-overlay.is-group-call.is-video-call .call-video-grid.call-size-5,
.call-overlay.is-group-call.is-video-call .call-video-grid.call-size-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, 1fr);
}

.call-overlay.is-group-call.is-video-call .call-video-grid.call-size-7,
.call-overlay.is-group-call.is-video-call .call-video-grid.call-size-8 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(140px, 1fr);
}

.call-overlay.is-group-call .call-body {
  min-height: 0;
  overflow: hidden;
}

.call-overlay.is-group-call .call-video-grid {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-content: start;
}

.call-overlay.is-group-call .video-card,
.call-overlay.is-group-call .remote-empty-state {
  min-height: 140px;
}

.call-overlay.is-group-call.is-video-call #localTile,
.call-overlay.is-group-call.audio-call #localTile {
  position: relative;
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  min-height: 160px;
  border-radius: 16px;
}

.call-overlay.is-group-call.is-video-call .remote-videos {
  display: contents;
}

.call-overlay.is-group-call.audio-call .call-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, 1fr);
  gap: 10px;
}

.call-overlay.is-group-call.audio-call .call-video-grid.call-size-5,
.call-overlay.is-group-call.audio-call .call-video-grid.call-size-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(130px, 1fr);
}

.call-overlay.is-group-call.audio-call .call-video-grid.call-size-7,
.call-overlay.is-group-call.audio-call .call-video-grid.call-size-8 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(120px, 1fr);
}

.call-overlay.is-group-call .call-participants {
  display: block;
}

@media (max-width: 980px) {
  .call-controls-wa {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: hidden;
    gap: 10px 12px;
  }

  .call-action-btn {
    min-width: 64px;
    flex-shrink: 0;
  }

  .call-action-glyph {
    width: 52px;
    height: 52px;
  }

  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-5,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-6,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-7,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-8,
  .call-overlay.is-group-call.audio-call .call-video-grid.call-size-5,
  .call-overlay.is-group-call.audio-call .call-video-grid.call-size-6,
  .call-overlay.is-group-call.audio-call .call-video-grid.call-size-7,
  .call-overlay.is-group-call.audio-call .call-video-grid.call-size-8 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(120px, 1fr);
  }

  .call-overlay.is-group-call .video-card,
  .call-overlay.is-group-call .remote-empty-state {
    min-height: 120px;
  }
}

/* V75 Call UI polish — fullscreen shells + conference audio + header hierarchy */
.call-overlay:not(.hidden) {
  padding: 0;
  display: block;
}

.call-overlay.is-direct-call.audio-call,
.call-overlay.is-group-call,
.call-overlay.is-direct-p2p.is-video-call,
.call-overlay.is-direct-conference {
  background: #0b141a;
}

.call-overlay.is-direct-call.audio-call .call-window,
.call-overlay.is-group-call .call-window,
.call-overlay.is-direct-p2p.is-video-call .call-window,
.call-overlay.is-direct-conference .call-window {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.call-window > header > div {
  min-width: 0;
  flex: 1;
}

.call-window > header .eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.call-window > header h3 {
  margin: 0;
  font-size: clamp(18px, 4vw, 24px);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.call-window > header #callStatus {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;
}

.call-participants {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--wa-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(640px, 72vw);
}

.call-overlay.is-direct-p2p.is-video-call .call-participants,
.call-overlay.is-direct-call.audio-call.is-direct-p2p .call-participants {
  display: none;
}

/* Direct audio 1:1 — centered avatar hero */
.call-overlay.is-direct-call.audio-call.is-direct-p2p .call-window > header {
  justify-content: center;
  text-align: center;
}

.call-overlay.is-direct-call.audio-call.is-direct-p2p .call-window > header > div {
  text-align: center;
}

.call-overlay.is-direct-call.audio-call.is-direct-p2p .call-body {
  grid-template-columns: 1fr 320px;
}

.call-overlay.is-direct-call.audio-call.is-direct-p2p .call-video-grid {
  flex: 1;
  min-height: 0;
  width: 100%;
  justify-content: center;
}

.call-overlay.is-direct-call.audio-call.is-direct-p2p .remote-videos {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.call-overlay.is-direct-call.audio-call.is-direct-p2p #localTile {
  flex-shrink: 0;
  margin-top: 8px;
}

.call-overlay.is-direct-call.audio-call.is-direct-p2p .remote-empty-state {
  animation: call-audio-pulse 2.4s ease-in-out infinite;
}

.call-overlay.is-direct-call.audio-call.is-direct-p2p .remote-empty-state strong {
  font-size: 15px;
  margin-bottom: 4px;
}

.call-overlay.is-direct-call.audio-call.is-direct-p2p .remote-empty-state span {
  font-size: 12px;
  line-height: 1.4;
  max-width: 160px;
}

/* Direct audio conference — grid like group */
.call-overlay.is-direct-conference.audio-call .call-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, 1fr);
  gap: 10px;
  min-height: 360px;
  padding: 12px;
  align-items: stretch;
  justify-items: stretch;
  flex-direction: unset;
}

.call-overlay.is-direct-conference.audio-call #localTile {
  order: unset;
  width: auto;
  height: auto;
  min-height: 150px;
  border-radius: 16px;
  box-shadow: none;
}

.call-overlay.is-direct-conference.audio-call .remote-videos {
  display: contents;
}

.call-overlay.is-direct-conference.audio-call .remote-videos .video-card {
  width: auto;
  height: auto;
  min-height: 150px;
  border-radius: 16px;
  animation: none;
}

.call-overlay.is-direct-conference.audio-call .remote-empty-state {
  width: auto;
  height: auto;
  min-height: 150px;
  border-radius: 16px;
  animation: none;
}

.call-overlay.is-direct-conference.audio-call .audio-avatar {
  width: 72px;
  height: 72px;
  font-size: 24px;
}

.call-overlay.is-direct-conference.audio-call .call-controls {
  position: relative;
  background: var(--wa-panel-2);
  border-top: 1px solid var(--wa-border-soft);
}

/* Group calls — consistent grid + header */
.call-overlay.is-group-call .call-window > header {
  padding-top: max(14px, env(safe-area-inset-top, 0px));
}

.call-overlay.is-group-call .call-duration {
  color: var(--wa-green-2);
}

.call-overlay.is-group-call.audio-call .remote-videos .video-card {
  animation: call-audio-pulse 2.4s ease-in-out infinite;
}

.call-overlay.is-group-call.audio-call .remote-videos .video-card span {
  display: block;
  font-size: 11px;
}

.call-overlay.is-group-call.is-video-call .video-card span {
  backdrop-filter: blur(6px);
}

.call-overlay.is-group-call .call-controls-wa {
  justify-content: center;
}

/* Direct video P2P — tighten header + PiP */
.call-overlay.is-direct-p2p.is-video-call .call-window > header h3 {
  font-size: clamp(17px, 4.5vw, 22px);
}

.call-overlay.is-direct-p2p.is-video-call #callStatus {
  font-size: 12px;
  opacity: 0.88;
}

.call-overlay.is-direct-p2p.is-video-call .call-duration {
  font-size: 14px;
  margin-top: 2px;
}

.call-overlay.is-direct-p2p.is-video-call .remote-empty-state {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
}

.call-overlay.is-direct-p2p.is-video-call .remote-empty-state strong {
  color: #fff;
  font-size: 16px;
}

.call-overlay.is-direct-p2p.is-video-call .remote-empty-state span {
  font-size: 13px;
  max-width: 280px;
  line-height: 1.45;
}

/* Direct video conference */
.call-overlay.is-direct-conference.is-video-call .call-window > header .danger-btn {
  display: inline-flex;
}

.call-overlay.is-direct-conference .call-participants {
  display: block;
}

/* Shared control bar polish */
.call-controls-wa {
  justify-content: center;
  flex-wrap: wrap;
}

.call-overlay .call-controls-wa .call-action-btn.hidden {
  display: none !important;
}

@media (max-width: 980px) {
  .call-overlay.is-direct-call.audio-call.is-direct-p2p .call-body,
  .call-overlay.is-group-call .call-body,
  .call-overlay.is-direct-conference .call-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) minmax(120px, 32dvh);
  }

  .call-overlay.is-direct-p2p.is-video-call .call-body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .call-participants {
    max-width: calc(100vw - 120px);
  }

  .call-controls-wa {
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 720px) {
  .call-controls {
    max-height: none;
    overflow: visible;
    justify-content: center;
  }
}

/* V38 Voice note composer position — recorder above chat input (WhatsApp-style stack) */
.composer-stack .voice-recorder,
.chat-panel > .voice-recorder {
  order: 0;
}

/* V40 Call close fix + WhatsApp direct video modes */

/* V41 Chat info modal + contacts search polish */
/* V50 Contacts professional list + detail modal */
.sidebar.is-contacts-tab > .search-box:not(.contacts-search-box) {
  display: none;
}

.contacts-search-box {
  padding: 0 0 8px;
  border-bottom: 0;
  background: transparent;
}

.contacts-search-box::before {
  left: 16px;
  top: 10px;
}

.contacts-search-box input {
  height: 40px;
  border: 1px solid var(--wa-border-soft);
  background: rgba(32, 44, 51, 0.72);
}

.chat-info-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: var(--wa-panel-2);
  border: 1px solid var(--wa-border-soft);
}

.chat-info-hero-avatar {
  width: 64px;
  height: 64px;
  font-size: 20px;
  flex-shrink: 0;
}

.chat-info-hero-copy {
  min-width: 0;
  flex: 1;
}

.chat-info-hero-copy strong {
  display: block;
  font-size: 17px;
  color: var(--wa-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-info-hero-copy p {
  margin: 4px 0 0;
  color: var(--wa-muted);
  font-size: 12px;
  line-height: 1.45;
}

.chat-info-section {
  display: grid;
  gap: 10px;
}

.chat-info-section > .panel-label {
  padding: 0;
}

.group-info-body .group-photo-field {
  display: grid;
  gap: 8px;
  color: var(--wa-text-soft);
  font-size: 13px;
  font-weight: 700;
}

.group-photo-upload {
  width: max-content;
}

.group-info-hero {
  align-items: center;
}

.group-photo-editor {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: default;
}

.group-photo-editor.is-editable {
  cursor: pointer;
}

.group-photo-editor .group-photo-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
}

.group-photo-editor .group-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-photo-camera {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wa-green);
  color: #0f172a;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.group-photo-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.group-composer-lock {
  margin: 0 12px 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.22);
  color: var(--wa-text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.composer.is-group-locked {
  opacity: 0.72;
  pointer-events: none;
}

.chat-menu-trigger {
  position: relative;
}

.chat-header-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

.group-info-body .group-invite-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
}

.group-info-body .group-invite-box button,
.group-info-body .group-member-info-row > button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: var(--wa-text-soft);
  border: 1px solid rgba(134, 150, 160, 0.14);
  font-weight: 700;
  font-size: 12px;
}

.group-info-body .group-invite-box button:hover,
.group-info-body .group-member-info-row > button:hover {
  background: rgba(0, 168, 132, 0.16);
  color: var(--wa-text);
  border-color: rgba(0, 168, 132, 0.26);
}

.group-info-body .media-filter-tabs {
  padding: 0;
  margin: 0;
}

.group-info-body .media-gallery-mini {
  display: grid;
  gap: 6px;
  margin: 0;
}

.group-info-body .media-list-row,
.group-info-body .media-chip {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--wa-text);
  border: 1px solid rgba(134, 150, 160, 0.13);
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.group-info-body .media-list-row:hover,
.group-info-body .media-chip:hover {
  background: rgba(0, 168, 132, 0.1);
  border-color: rgba(0, 168, 132, 0.24);
}

.media-list-row-icon {
  flex: 0 0 auto;
  font-size: 16px;
}

.media-list-row-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-list-row-chevron {
  flex: 0 0 auto;
  color: var(--wa-muted);
  font-size: 18px;
}

.group-info-dialog-card .group-info-body + .dialog-msg {
  padding: 0 20px 8px;
}

.group-info-dialog-card .ux-modal-actions button:only-child {
  flex: 1 1 100%;
}

.chat-info-empty {
  color: var(--wa-muted);
  font-size: 12px;
}

/* V42 Video call front/back camera switch */

/* V44 Delete chat with confirmation dialog */
.chat-info-danger-zone { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(241, 92, 109, 0.18); }
.chat-delete-btn { width: 100%; border: 1px solid rgba(241, 92, 109, 0.35); border-radius: 12px; padding: 10px 14px; background: rgba(241, 92, 109, 0.08); cursor: pointer; font-weight: 600; }
.chat-delete-btn:hover { background: rgba(241, 92, 109, 0.16); }
.row-actions.mini-row-actions button[data-delete-chat] { color: #ff9aa7; }
.row-actions.mini-row-actions button[data-delete-chat]:hover { background: rgba(241, 92, 109, 0.14); }

/* V45 System default notification + call ringtone (native Android + web Notification API) */

/* V46 Chat list row menu — single overflow menu instead of inline action icons */
.message.notification-highlight { outline: 2px solid rgba(147,197,253,.55); box-shadow: 0 0 0 4px rgba(147,197,253,.12); }
.sound-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--wa-border-soft);
  border-radius: 12px;
  background: rgba(17, 27, 33, 0.42);
  color: var(--wa-text);
}
.sound-toggle-row span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.sound-toggle-row strong { font-size: 13px; }
.sound-toggle-row small {
  color: var(--wa-muted);
  font-size: 12px;
  line-height: 1.35;
}
.sound-toggle-row input {
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  accent-color: var(--wa-green);
}

/* V47 Android native notifications + background call retention */

/* V52 WhatsApp-style status tray + viewer */
/* V54 WhatsApp status 100% parity */
.wa-status-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 8px;
  background: var(--wa-panel);
  position: sticky;
  top: 0;
  z-index: 3;
  border-bottom: 1px solid var(--wa-border-soft);
}
.wa-status-page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--wa-text);
}
.wa-status-page-actions { display: flex; gap: 6px; }
.wa-status-head-btn {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wa-muted);
  font-size: 20px;
}
.wa-status-head-btn:hover { background: rgba(134,150,160,.16); color: var(--wa-text); }
.wa-status-camera-btn { color: var(--wa-green-2); font-size: 22px; }
.wa-status-tray { padding-bottom: 12px; }
.wa-status-row { border-bottom: 1px solid var(--wa-border-soft); }
.wa-my-status-row {
  background: linear-gradient(180deg, rgba(147,197,253,.06), transparent 72%);
}
.status-bubble {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  min-height: 72px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
}
.status-bubble:hover { background: var(--wa-row-hover); }
.status-row-main-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  min-height: 72px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
}
.status-row-main-btn:hover { background: var(--wa-row-hover); }
.status-ring-wrap { position: relative; flex: 0 0 56px; width: 56px; height: 56px; }
.status-ring { width: 56px; height: 56px; padding: 3px; }
.status-add-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--wa-panel);
  border-radius: 50%;
  background: var(--wa-green);
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
  display: grid;
  place-items: center;
  z-index: 2;
}
.status-row-time {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--wa-muted);
  font-size: 12px;
  white-space: nowrap;
}
.status-empty-note { padding: 16px; margin: 0; color: var(--wa-muted); font-size: 13px; line-height: 1.45; }
.status-empty-card {
  margin: 12px 16px 18px;
  padding: 18px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(32, 44, 51, 0.96), rgba(24, 34, 41, 0.96));
  border: 1px solid var(--wa-border-soft);
  box-shadow: var(--shadow-card);
}
.status-empty-card strong {
  display: block;
  color: var(--wa-text);
  font-size: 15px;
  margin-bottom: 6px;
}
.status-empty-card p {
  margin: 0;
  color: var(--wa-muted);
  font-size: 13px;
  line-height: 1.5;
}

.status-composer-dialog {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border: 0;
  padding: 0;
  background: #0b141a;
}
.status-composer {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: #0b141a;
  color: var(--wa-text);
}
.status-composer-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--wa-panel-2);
  border-bottom: 1px solid var(--wa-border-soft);
}
.status-composer-head strong { text-align: center; font-size: 16px; }
.status-back-btn {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wa-text);
  font-size: 28px;
  line-height: 1;
}
.status-send-btn {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--wa-green);
  color: #0f172a;
  font-weight: 800;
}
.status-send-btn:disabled { opacity: .45; }
.status-composer-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
}
.status-composer-tab {
  min-height: 38px;
  border: 1px solid var(--wa-border-soft);
  border-radius: 999px;
  background: var(--wa-panel-2);
  color: var(--wa-muted);
  font-weight: 700;
}
.status-composer-tab.active {
  background: rgba(96,165,250,.16);
  border-color: rgba(96,165,250,.45);
  color: var(--wa-green-2);
}
.status-composer-pane {
  min-height: 0;
  overflow: auto;
  padding: 12px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.status-text-preview {
  min-height: 220px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}
.status-text-preview p {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 4vw, 32px);
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.status-text-input-wrap textarea,
.status-caption-field textarea {
  width: 100%;
  border: 1px solid var(--wa-border-soft);
  border-radius: 12px;
  background: var(--wa-panel-2);
  color: var(--wa-text);
  padding: 12px;
  resize: vertical;
}
.status-bg-picker {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.status-bg-chip {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
}
.status-bg-chip.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.status-composer-msg { padding: 0 12px 12px; color: #ffb4b4; font-size: 12px; }

.status-viewer-shell {
  width: 100vw;
  height: 100vh;
  background: #000;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.status-fullscreen-dialog { padding: 0; border: 0; background: #000; }
.status-fullscreen-dialog::backdrop { background: #000; }
.status-viewer-head {
  padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 4;
  background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
}
.status-viewer-head-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.status-viewer-head-text strong { color: #fff; font-size: 15px; }
.status-viewer-head-text span { color: rgba(255,255,255,.72); font-size: 12px; }
.status-viewer-head-avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 13px; }
.status-progress { position: absolute; top: calc(6px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; z-index: 6; display: flex; gap: 4px; }
.status-progress-segment { flex: 1; height: 3px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.28); }
.status-progress-segment.done { background: rgba(255,255,255,.95); }
.status-progress-segment i { display: block; height: 100%; width: 0; background: #fff; border-radius: inherit; transition: width 80ms linear; }
.status-pause-play-btn {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.status-pause-play-btn:hover,
.status-pause-play-btn.is-paused {
  background: rgba(147,197,253,.24);
}
.status-pause-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.status-viewer-content { min-height: 0; background: #000; touch-action: manipulation; user-select: none; }
.status-story-full { width: 100%; height: 100%; display: grid; place-items: center; }
.status-story-full img,
.status-story-full video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.status-story-full.is-loading img,
.status-story-full.is-loading video {
  opacity: 0;
}
.status-story-full:not(.is-loading) .status-media-loading {
  display: none;
}
.status-media-loading,
.status-media-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.74);
  background: #000;
  font-size: 13px;
  font-weight: 700;
  z-index: 1;
}
.status-media-loading::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: rgba(147,197,253,.9);
  animation: attachmentSpin .9s linear infinite;
}
.status-story-full.text { place-items: stretch; }
.status-story-full.text .status-text-full {
  width: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 0;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  text-align: center;
}
.status-story-full.text .status-text-full p {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.35;
  white-space: pre-wrap;
}
.status-viewer-footer {
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
  display: grid;
  gap: 8px;
}
.status-owner-footer { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.status-delete-btn {
  border: 1px solid rgba(255,154,167,.45);
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255,154,167,.12);
  color: #ff9aa7;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.status-delete-btn:hover,
.status-delete-btn:focus-visible {
  background: rgba(255,154,167,.22);
  color: #ffb8c0;
}
.status-viewers-pill {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.status-reply-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.status-reply-footer.hidden { display: none; }
.status-reply-footer:focus-within .status-reply-bar input {
  border-color: rgba(147,197,253,.55);
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 2px rgba(147,197,253,.12);
}
.status-reply-bar input {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 0 16px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
#tabStatus .status-section-title {
  padding: 16px 16px 6px;
  color: var(--wa-green-2);
  font-size: 11px;
  letter-spacing: .08em;
}
.wa-status-tray {
  padding-bottom: 16px;
}
.wa-status-row:last-child {
  border-bottom: 0;
}
.status-row-main strong {
  display: block;
  font-size: 15px;
  color: var(--wa-text);
  line-height: 1.25;
}
.status-row-main small {
  display: block;
  margin-top: 2px;
  color: var(--wa-muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(420px, 58vw);
}
.status-react-toggle {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 20px;
}
.status-reaction-bar {
  position: absolute;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px;
  border-radius: 999px;
  background: rgba(17,27,33,.92);
}
.status-reaction-bar.hidden { display: none; }
.status-reaction-bar button {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 22px;
  padding: 4px;
}
.status-reply-bar { flex: 1; min-width: 0; }
.status-reply-bar input {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  padding: 0 16px;
  outline: none;
}
.status-reply-bar input::placeholder { color: rgba(255,255,255,.62); }
.status-menu-btn {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 22px;
}
#tabStatus .status-section-title { padding-top: 14px; }

/* V55 chat header, composer WA, group info parity */
.chat-header {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.chat-head-tap {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
.chat-head-text {
  overflow: hidden;
}
.chat-head-text strong,
.chat-head-text span {
  display: block;
  max-width: 100%;
}
.chat-call-actions {
  flex: 0 0 auto;
  flex-shrink: 0;
}
.chat-header-menu-call {
  display: none;
}
.system-message {
  display: flex;
  justify-content: center;
  margin: 8px 0;
  padding: 0 24px;
}
.system-message-text {
  max-width: 92%;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(17, 27, 33, 0.72);
  color: var(--wa-muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.message-gift {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 4px;
}
.message-gift-emoji {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22));
}
.message-gift-label {
  font-size: 12px;
  color: var(--wa-muted);
  font-weight: 700;
}
.message-contact-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(134, 150, 160, 0.14);
  margin-bottom: 4px;
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
}
.message-contact-card.is-clickable {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.message-contact-card.is-clickable:hover,
.message-contact-card.is-clickable:focus-visible {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.28);
}
.message-contact-card.is-clickable:active {
  transform: scale(0.985);
}
.message-contact-card strong {
  display: block;
  font-size: 14px;
}
.message-contact-card small {
  display: block;
  color: var(--wa-muted);
  font-size: 12px;
  margin-top: 2px;
}
.group-join-requests {
  display: grid;
  gap: 8px;
}
.group-join-request-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--wa-panel-2);
  border: 1px solid var(--wa-border-soft);
}
.group-join-request-row .group-member-copy {
  flex: 1;
  min-width: 0;
}
.group-join-request-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.group-join-request-actions button {
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.group-join-approve {
  background: var(--wa-green);
  color: #0f172a;
}
.group-join-reject {
  background: rgba(134, 150, 160, 0.18);
  color: var(--wa-text);
}
.attach-sheet {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 6px);
  padding: 12px 10px 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 8px;
  background: var(--wa-panel);
  border: 1px solid var(--wa-border-soft);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  z-index: 6;
}
.attach-sheet.hidden { display: none; }
.attach-sheet-item {
  border: 0;
  background: transparent;
  color: var(--wa-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}
.attach-sheet-item:hover { background: var(--wa-row-hover); }
.attach-sheet-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.attach-icon-doc { background: #7f66ff; color: #fff; }
.attach-icon-camera { background: #ff6b6b; color: #fff; }
.attach-icon-gallery { background: #ff85c0; color: #fff; }
.attach-icon-gift { background: #ff9f43; color: #fff; }
.attach-icon-contact { background: #54a0ff; color: #fff; }
.attach-icon-audio { background: #ff6b81; color: #fff; font-size: 14px; letter-spacing: -0.5px; }
.attach-icon-gif { background: #5f27cd; color: #fff; font-size: 14px; letter-spacing: -0.5px; }
.gift-picker {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(100% + 6px);
  max-height: 220px;
  overflow: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  background: var(--wa-panel);
  border: 1px solid var(--wa-border-soft);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  z-index: 6;
}
.gift-picker.hidden { display: none; }
.gift-picker button {
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 159, 67, 0.12);
  font-size: 28px;
  cursor: pointer;
}
.gift-picker button:hover { background: rgba(255, 159, 67, 0.24); }
.share-contact-picker { max-height: 320px; overflow-y: auto; }
@media (max-width: 980px) {
  .chat-call-actions .chat-call-primary { display: none !important; }
  .chat-header-menu-call { display: block; }
  .chat-header-menu-call.hidden { display: none !important; }
}
@media (max-width: 560px) {
  .chat-header-avatar {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }
  .chat-head-tap { gap: 8px; }
  .chat-head-text strong { font-size: 15px; font-weight: 700; }
  .chat-head-text span { font-size: 12px; }
  .chat-call-actions .chat-icon-btn,
  .chat-call-actions .call-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }
  .composer { gap: 4px; padding-inline: 6px; }
  .composer-icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    font-size: 20px;
  }
  .attach-sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 4px; }
  .attach-sheet-icon { width: 46px; height: 46px; font-size: 20px; }
}
@media (max-width: 380px) {
  .attach-sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* V61 focused fixes: multiline composer, location preview, group info, status tags */
.composer-field textarea#messageInput {
  width: 100%;
  min-height: 24px;
  max-height: 132px;
  resize: none;
  overflow-y: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--wa-text);
  font: inherit;
  line-height: 1.35;
  padding: 10px 44px 10px 0;
}
.composer-field textarea#messageInput::placeholder { color: var(--wa-muted); }
.location-preview-card { width: min(520px, calc(100vw - 28px)); max-height: min(760px, calc(100dvh - 28px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.location-preview-body { min-height: 0; overflow: auto; display: grid; gap: 12px; }
.location-preview-map { min-height: 280px; border-radius: 14px; overflow: hidden; border: 1px solid var(--wa-border-soft); background: #0b141a; }
.location-preview-map iframe { width: 100%; height: 100%; min-height: 280px; border: 0; display: block; }
.location-preview-meta { display: grid; gap: 4px; color: var(--wa-muted); }
.location-preview-meta strong { color: var(--wa-text); }
.location-preview-meta a { color: var(--wa-green-2); text-decoration: none; font-weight: 700; }
.status-tag-panel { padding: 0 16px 12px; display: grid; gap: 8px; }
.status-tag-contacts { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.status-tag-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--wa-border-soft); border-radius: 999px; padding: 6px 10px 6px 6px; background: var(--wa-panel-2); color: var(--wa-text); cursor: pointer; font-size: 12px; font-weight: 800; }
.status-tag-chip input { accent-color: var(--wa-green); }
.status-tag-avatar { width: 28px; height: 28px; flex: 0 0 28px; }
.group-info-dialog-card,
.chat-modal {
  max-height: min(880px, calc(100dvh - 24px));
}
.chat-modal-body,
.group-info-body {
  min-height: 0;
  overflow: auto;
}
.group-info-hero { padding-left: 14px; }
.group-photo-editor { margin-left: 0; flex: 0 0 auto; }
.group-photo-camera { right: -2px; left: auto; }
.group-block-candidate { width: 100%; border: 0; color: inherit; text-align: left; cursor: pointer; }
.calls-actions { flex-wrap: wrap; justify-content: flex-end; }
.call-filter-tabs { position: sticky; top: 0; z-index: 2; background: var(--wa-bg); }
.calls-list, #callLogs { min-height: 0; }
.call-overlay.is-direct-p2p .call-window { width: min(760px, 100%); }
.call-overlay.is-direct-p2p.audio-call .call-body { grid-template-columns: 1fr; }
.call-overlay.is-direct-p2p.audio-call .call-chat-panel { display: none; }
.call-overlay.is-direct-p2p .call-participants { display: none; }
.call-overlay.is-direct-p2p .call-device-bar { display: none !important; }
.call-overlay.is-direct-p2p .call-controls { gap: 12px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.call-overlay.is-direct-p2p .call-action-secondary { border-radius: 50%; width: 54px; height: 54px; min-height: 54px; padding: 0; }
.call-overlay.is-direct-p2p .call-action-label { font-size: 11px; }
@media (max-width: 720px) {
  .location-preview-card,
  .group-info-dialog-card,
  .chat-modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin-top: max(8px, env(safe-area-inset-top, 0px));
    margin-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  .location-preview-map,
  .location-preview-map iframe { min-height: 230px; }
}

/* V56 Status — WhatsApp parity polish */
.wa-status-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.wa-status-icon-lock {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}
.wa-status-icon-camera {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l2-2h6l2 2h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l2-2h6l2 2h3a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
}
.wa-status-privacy-btn { color: var(--wa-muted); }
.wa-status-camera-btn { color: var(--wa-green-2); }
.wa-my-status-row .status-row-split { padding: 10px 16px; min-height: 72px; }
.wa-my-status-row .status-ring-wrap { overflow: visible; }
.wa-my-status-row .status-row-text-btn {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.wa-my-status-row .status-row-text-btn:hover { background: transparent; }
.status-row-main-btn .status-row-main small {
  display: block;
  color: var(--wa-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-composer-dialog {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
}
.status-composer { height: 100dvh; }
.status-text-pane {
  grid-template-rows: 1fr auto;
  align-content: stretch;
  padding: 0;
  gap: 0;
}
.status-text-canvas {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 24px 20px;
  background: #3b82f6;
  transition: background 0.2s ease;
}
.status-text-canvas textarea {
  width: min(560px, 100%);
  min-height: 180px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.35;
  text-align: center;
  resize: none;
  outline: none;
  padding: 0;
}
.status-text-canvas textarea::placeholder { color: rgba(255,255,255,.55); }
.status-text-pane .status-bg-picker {
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--wa-panel-2);
  border-top: 1px solid var(--wa-border-soft);
}
.status-media-pane { gap: 14px; }
.status-media-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.status-media-action-btn {
  min-height: 44px;
  border: 1px solid var(--wa-border-soft);
  border-radius: 12px;
  background: var(--wa-panel-2);
  color: var(--wa-text);
  font-weight: 700;
  cursor: pointer;
}
.status-media-action-btn:hover { background: var(--wa-row-hover); }
.status-media-preview {
  width: 100%;
  max-height: 320px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}
.status-media-preview img,
.status-media-preview video {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
  display: block;
  background: #000;
  border-radius: 14px;
}
.status-viewer-content { position: relative; }
.status-viewer-story {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.status-tap-zones {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 32% 36% 32%;
  pointer-events: none;
}
.status-tap-zone {
  border: 0;
  background: transparent;
  pointer-events: auto;
  cursor: default;
}
.status-reaction-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  padding-bottom: 2px;
}
.status-reaction-chips.hidden { display: none; }
.status-reaction-chip {
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.status-reaction-chip.mine { background: rgba(147,197,253,.28); }
.status-reaction-bar button.active { background: rgba(255,255,255,.16); border-radius: 999px; }
.status-reply-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-reply-send-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wa-green);
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}
.status-reply-send-btn:disabled { opacity: 0.45; }
.status-eye-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.status-react-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #fff;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Ccircle cx='9' cy='10' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='15' cy='10' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Ccircle cx='9' cy='10' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='15' cy='10' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.status-story-full img,
.status-story-full video { object-fit: contain; background: #000; }
.status-story-full video.is-unmuted { cursor: pointer; }
.status-viewer-shell { height: 100dvh; }
.status-progress {
  display: flex;
  gap: 4px;
}
.status-progress-segment {
  flex: 1;
  border-radius: 999px;
  overflow: hidden;
}
@media (max-width: 560px) {
  .status-reaction-bar {
    left: 8px;
    right: 8px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* V57 Chat column — professional WA composer + footer stack */
.chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
}
.chat-footer {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--wa-panel-2);
  border-top: 1px solid var(--wa-border-soft);
}
.chat-footer .typing {
  padding: 6px 16px 0;
  margin: 0;
}
.chat-footer .reply-preview,
.chat-footer .upload-preview,
.chat-footer .voice-recorder {
  margin: 8px 10px 0;
}
.chat-footer .composer {
  border-top: 0;
  background: transparent;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  min-height: 0;
  flex-direction: column;
  align-items: stretch;
}
.composer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.composer-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px 0 14px;
  border-radius: 999px;
  background: var(--wa-panel);
  border: 1px solid rgba(134, 150, 160, 0.12);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.composer-field:focus-within {
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.12);
}
.composer-field #messageInput {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.composer-field #messageInput:focus {
  box-shadow: none;
  border-color: transparent;
}
.composer-emoji-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent !important;
  color: var(--wa-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.composer-emoji-btn:hover {
  background: rgba(134, 150, 160, 0.14);
  color: var(--wa-text);
}
.composer-attach-btn,
.composer-mic-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent !important;
  border: 0 !important;
  color: var(--wa-muted) !important;
  font-weight: 400 !important;
  padding: 0 !important;
  filter: none !important;
}
.composer-attach-btn:hover,
.composer-mic-btn:hover {
  background: rgba(134, 150, 160, 0.14) !important;
  color: var(--wa-text) !important;
}
.composer-send-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  padding: 0 !important;
  border: 0;
  border-radius: 50%;
  background: var(--wa-green) !important;
  color: #0f172a !important;
  display: grid;
  place-items: center;
  filter: none !important;
}
.composer-send-btn:hover { filter: brightness(1.05) !important; }
.composer-send-btn.hidden { display: none !important; }
.composer-plus-icon,
.composer-emoji-icon,
.composer-mic-icon,
.composer-send-icon,
.chat-header-icon {
  display: block;
  width: 22px;
  height: 22px;
  background: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.composer-plus-icon {
  width: 22px;
  height: 22px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.composer-emoji-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Ccircle cx='9' cy='10' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='15' cy='10' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Ccircle cx='9' cy='10' r='1' fill='black' stroke='none'/%3E%3Ccircle cx='15' cy='10' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
}
.composer-mic-icon {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1'/%3E%3Cpath d='M12 18v4'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1'/%3E%3Cpath d='M12 18v4'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E");
}
.composer-send-icon {
  width: 20px;
  height: 20px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22 11 13 2 9l20-7z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22 11 13 2 9l20-7z'/%3E%3C/svg%3E");
}
.chat-header-action {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wa-muted);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.chat-header-action:hover:not(:disabled) {
  background: rgba(134, 150, 160, 0.14);
  color: var(--wa-text);
}
.chat-header-action:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.chat-header-icon-video {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1'/%3E%3Cpath d='m22 8-6 4 6 4V8z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 16v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1'/%3E%3Cpath d='m22 8-6 4 6 4V8z'/%3E%3C/svg%3E");
}
.chat-header-icon-phone {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.86.3 1.7.54 2.5a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.58-1.06a2 2 0 0 1 2.11-.45c.8.24 1.64.42 2.5.54A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.86.3 1.7.54 2.5a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.58-1.06a2 2 0 0 1 2.11-.45c.8.24 1.64.42 2.5.54A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.chat-header-icon-join {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
}
.chat-header-icon-menu {
  width: 20px;
  height: 20px;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='19' r='1.8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5' r='1.8'/%3E%3Ccircle cx='12' cy='12' r='1.8'/%3E%3Ccircle cx='12' cy='19' r='1.8'/%3E%3C/svg%3E");
}
.chat-header .chat-header-action.hidden { display: none !important; }
.chat-head-text span {
  font-size: 12px;
  color: var(--wa-muted);
}
.attach-sheet {
  left: 10px;
  right: 10px;
  bottom: calc(100% + 8px);
  max-width: 420px;
  margin: 0 auto;
}
.emoji-picker,
.gift-picker {
  left: 10px;
  right: 10px;
  bottom: calc(100% + 8px);
  max-width: 420px;
  margin: 0 auto;
}
.mic-btn {
  background: transparent !important;
  color: var(--wa-muted) !important;
  border: 0 !important;
}
@media (max-width: 980px) {
  .chat-call-actions .chat-call-primary { display: none !important; }
  .chat-header-menu-call { display: block; }
  .chat-header-menu-call.hidden { display: none !important; }
}
@media (max-width: 560px) {
  .chat-footer .composer { padding-inline: 8px; }
  .composer-bar { gap: 6px; }
  .composer-attach-btn,
  .composer-mic-btn,
  .composer-send-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .composer-field { min-height: 40px; padding-left: 12px; }
  .composer-field #messageInput { height: 40px; }
  .messages { padding-inline: 10px; }
}

/* V58 Chat audit — professional WA modals, footer, bubbles, attach icons */
.chat-head-text span.is-online,
.online-text {
  color: var(--wa-green-2);
  font-weight: 600;
}
.chat-head-text span.is-typing {
  color: var(--wa-green-2);
  font-weight: 600;
}
.conversation-item p .convo-presence-online {
  color: var(--wa-green-2);
  font-weight: 600;
}
.conversation-item p .convo-presence-offline {
  color: var(--wa-muted);
  font-weight: 600;
}
.chat-back-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.chat-back-icon {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.welcome-card .welcome-logo {
  border-radius: 14px;
  margin-bottom: 14px;
}
.welcome-note {
  display: block;
  margin-top: 14px;
  color: var(--wa-muted-2);
  font-size: 12px;
  line-height: 1.45;
}

/* Footer stack — reply, upload, voice */
.chat-footer .reply-preview {
  margin: 8px 10px 0;
  padding: 10px 12px 10px 0;
  border-radius: 12px;
  background: var(--wa-panel);
  border: 1px solid var(--wa-border-soft);
  border-left: 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow: hidden;
}
.reply-preview-bar {
  width: 4px;
  flex-shrink: 0;
  border-radius: 12px 0 0 12px;
  background: var(--wa-green);
}
.reply-preview-content {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  align-content: center;
}
.reply-preview-content strong {
  font-size: 12px;
  color: var(--wa-green-2);
  font-weight: 700;
}
.reply-preview-content span {
  font-size: 13px;
  color: var(--wa-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reply-preview-close,
.upload-preview-cancel {
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin-right: 4px;
  align-self: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wa-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.reply-preview-close span,
.upload-preview-cancel span {
  display: block;
  width: 14px;
  height: 14px;
  background: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.reply-preview-close:hover,
.upload-preview-cancel:hover {
  background: rgba(134, 150, 160, 0.14);
  color: var(--wa-text);
}
.chat-footer .upload-preview {
  margin: 8px 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--wa-panel);
  border: 1px solid var(--wa-border-soft);
}
.chat-footer .voice-recorder {
  margin: 8px 10px 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.voice-recorder-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--wa-panel);
  border: 1px solid var(--wa-border-soft);
}
.voice-record-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff6b6b;
  flex-shrink: 0;
  animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.88); }
}
.voice-recorder-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.voice-recorder-main strong {
  font-size: 15px;
  color: var(--wa-text);
  font-variant-numeric: tabular-nums;
}
.voice-recorder-main span {
  font-size: 12px;
  color: var(--wa-muted);
}
.voice-recorder-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.voice-recorder-btn {
  border: 0;
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.voice-recorder-cancel {
  background: rgba(134, 150, 160, 0.14);
  color: var(--wa-text-soft);
}
.voice-recorder-stop {
  background: rgba(255, 107, 107, 0.16);
  color: #ffb4b4;
}
.voice-recorder-send {
  background: var(--wa-green);
  color: #0f172a;
}
.voice-recorder-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Attach sheet — SVG glyphs */
.attach-icon-glyph {
  display: block;
  width: 24px;
  height: 24px;
  background: #fff;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.attach-icon-glyph-doc {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E");
}
.attach-icon-glyph-camera {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}
.attach-icon-glyph-gallery {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}
.attach-icon-glyph-gift {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='1'/%3E%3Cpath d='M12 8v13M3 12h18M7.5 8C6 8 5 6.8 5 5.5 5 4.1 6.1 3 7.5 3 9.4 3 12 8 12 8s2.6-5 4.5-5C17.9 3 19 4.1 19 5.5 19 6.8 18 8 16.5 8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='1'/%3E%3Cpath d='M12 8v13M3 12h18M7.5 8C6 8 5 6.8 5 5.5 5 4.1 6.1 3 7.5 3 9.4 3 12 8 12 8s2.6-5 4.5-5C17.9 3 19 4.1 19 5.5 19 6.8 18 8 16.5 8'/%3E%3C/svg%3E");
}
.attach-icon-glyph-contact {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.attach-icon-glyph-audio {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}
.attach-icon-glyph-gif {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ctext x='2' y='17' font-size='14' font-weight='800' font-family='Arial,sans-serif'%3EGIF%3C/text%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Ctext x='2' y='17' font-size='14' font-weight='800' font-family='Arial,sans-serif'%3EGIF%3C/text%3E%3C/svg%3E");
}
.attach-sheet-icon {
  display: grid;
  place-items: center;
}

/* Chat modals — WA professional */
.chat-modal {
  height: fit-content;
  max-height: min(88dvh, 760px);
}
.chat-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
}
.chat-modal-head-copy {
  min-width: 0;
  flex: 1;
}
.chat-modal-head-copy h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}
.chat-modal-head-copy p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--wa-muted);
  line-height: 1.4;
}
.chat-modal-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wa-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.chat-modal-close:hover {
  background: rgba(134, 150, 160, 0.14);
  color: var(--wa-text);
}
.chat-modal-body {
  padding: 14px 18px 16px;
  overflow: auto;
  display: grid;
  gap: 12px;
  min-height: 0;
}
.chat-modal-body.group-info-body {
  padding-top: 0;
  gap: 0;
}
.chat-modal-field {
  margin: 0;
}
.chat-modal-list {
  max-height: min(42vh, 360px);
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 2px;
}
.chat-modal-msg {
  padding: 0 18px 10px;
}
.chat-modal-actions {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--wa-border-soft);
  background: var(--wa-panel);
}
.chat-modal-actions button[type="submit"],
.chat-modal-actions #sendForwardBtn,
.chat-modal-actions #addMemberSubmit,
.chat-modal-actions #saveGroupInfoBtn {
  background: var(--wa-green);
  color: #0f172a;
  border: 0;
  font-weight: 700;
}
.chat-info-section {
  padding: 14px 0;
  border-bottom: 1px solid var(--wa-border-soft);
}
.chat-info-section:last-child {
  border-bottom: 0;
}
.chat-info-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0 16px;
}
.chat-info-hero-copy strong {
  display: block;
  font-size: 17px;
  margin-bottom: 4px;
}
.chat-info-hero-copy p {
  margin: 0;
  font-size: 13px;
  color: var(--wa-muted);
  line-height: 1.4;
}
.chat-info-empty {
  color: var(--wa-muted);
  font-size: 13px;
}

/* V58 bubble rules superseded by V63 below */

/* Chat header menu */
#chatHeaderMenu.chat-row-menu button,
#chatRowMenu.chat-row-menu button {
  font-size: 14px;
  font-weight: 500;
  padding: 12px 14px;
}
#chatHeaderMenu.chat-row-menu button + button,
#chatRowMenu.chat-row-menu button + button {
  margin-top: 0;
}

@media (max-width: 720px) {
  .chat-modal:not(.modal-compact) {
    width: min(560px, calc(100vw - 16px));
    max-height: min(90dvh, 760px);
    border-radius: 16px;
  }
  dialog:has(.chat-modal)::backdrop {
    background: rgba(11, 20, 26, 0.92);
  }
  .chat-footer .reply-preview,
  .chat-footer .upload-preview,
  .chat-footer .voice-recorder {
    margin-inline: 8px;
  }
}

/* V65 — bubble chat + action sheet portal (fix transform/fixed bug) */
.message-tools-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 20, 26, 0.58);
  z-index: 2200;
}
.message-tools-backdrop.hidden { display: none; }
.message-action-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2201;
  padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--wa-panel);
  border-radius: 16px 16px 0 0;
  border-top: 1px solid var(--wa-border-soft);
  box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.42);
}
.message-action-sheet.hidden { display: none; }
.message-action-sheet .message-tools {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  max-width: none !important;
  width: 100%;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 0;
}
.message-action-sheet .message-tools-handle {
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: rgba(134, 150, 160, 0.35);
}
.message {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 2px 0 6px;
  max-width: min(88%, 520px);
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 0;
}
.message.me { align-self: flex-end; }
.message.other { align-self: flex-start; }
.message-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  max-width: 100%;
}
.message.me .message-row { justify-content: flex-end; }
.message.other .message-row { justify-content: flex-start; }
.message-bubble {
  position: relative;
  padding: 6px 10px 5px;
  border-radius: 8px;
  color: var(--wa-text);
  min-width: 64px;
  max-width: 100%;
  flex: 0 1 auto;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.16);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.message.is-pressing .message-bubble {
  filter: brightness(0.92);
  transform: scale(0.985);
  transition: filter 0.12s ease, transform 0.12s ease;
}
.message-more-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--wa-muted);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  display: grid;
  place-items: center;
  padding: 0;
  align-self: flex-end;
  -webkit-tap-highlight-color: transparent;
}
.message:hover .message-more-btn,
.message.is-tools-open .message-more-btn,
.message.is-pressing .message-more-btn {
  opacity: 0.72;
}
.message-more-btn:hover,
.message-more-btn:active,
.message.is-tools-open .message-more-btn {
  background: rgba(134, 150, 160, 0.14);
  color: var(--wa-text);
  opacity: 1;
}
.message.me .message-bubble {
  background: var(--wa-bubble-out);
  border-top-right-radius: 0;
}
.message.other .message-bubble {
  background: var(--wa-bubble-in);
  border-top-left-radius: 0;
}
.message.is-grouped.me .message-bubble { border-top-right-radius: 8px; }
.message.is-grouped.other .message-bubble { border-top-left-radius: 8px; }
.message:not(.is-grouped).me .message-bubble { border-bottom-right-radius: 8px; }
.message:not(.is-grouped).other .message-bubble { border-bottom-left-radius: 8px; }
.message-menu-btn { display: none !important; }
.message-bubble-more { display: none !important; }
.message-bubble .message-sender { margin-bottom: 3px; }
.message-content-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px 10px;
}
.message.other .message-content-row { justify-content: flex-start; }
.message-bubble .message-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.42;
}
.message-bubble .message-reply-block { margin-bottom: 5px; width: 100%; }
.message-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}
.message-bubble .meta {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font-size: 10px;
  line-height: 1.2;
  gap: 3px;
  color: rgba(233, 237, 239, 0.55);
  white-space: nowrap;
  align-self: flex-end;
}
.message-bubble .meta-edited { opacity: 0.72; font-size: 9px; }
.message-bubble .sent-check { font-size: 12px; padding-left: 2px; }
.message-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 2px 0 3px;
  width: 100%;
}
.message-bubble .reaction-chip {
  background: rgba(0, 0, 0, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: var(--wa-text) !important;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  line-height: 1.35;
}
.message.me .message-bubble .reaction-chip.mine {
  background: rgba(96, 165, 250, 0.2) !important;
  border-color: rgba(96, 165, 250, 0.28) !important;
}
.message-menu-btn { display: none !important; }
.message-tools {
  position: absolute;
  bottom: calc(100% + 6px);
  display: grid;
  gap: 0;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--wa-panel);
  border: 1px solid var(--wa-border-soft);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 26;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
  max-width: min(calc(100vw - 24px), 320px);
}
.message-tools-handle { display: none; }
.message.me .message-tools { right: 0; }
.message.other .message-tools { left: 0; }
.message.is-tools-open .message-tools {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
@media (min-width: 981px) {
  .message:hover .message-tools,
  .message:focus-within .message-tools,
  .message.is-tools-open .message-tools {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}
.message-tools .message-quick-reactions {
  display: flex;
  gap: 2px;
  flex-wrap: nowrap;
  justify-content: center;
  opacity: 1 !important;
  transform: none !important;
  margin: 0 !important;
  max-height: none !important;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.message-tools .message-quick-reactions button {
  border: 0;
  background: transparent;
  font-size: 20px;
  padding: 5px 7px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1;
}
.message-tools .message-quick-reactions button:hover {
  background: var(--wa-row-hover);
}
.message-tools .message-actions-mini {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px !important;
  opacity: 1 !important;
  max-height: none !important;
  margin: 6px 0 0 !important;
  overflow: visible !important;
  padding-top: 8px;
  border-top: 1px solid var(--wa-border-soft);
}
.message-tools .message-action-btn {
  border: 0 !important;
  background: var(--wa-panel-2) !important;
  color: var(--wa-text-soft) !important;
  font-size: 11px !important;
  font-weight: 600;
  padding: 8px 6px !important;
  border-radius: 10px !important;
  white-space: nowrap;
  min-height: 0;
  text-align: center;
}
.message-tools .message-action-btn:hover {
  background: var(--wa-row-hover) !important;
  color: var(--wa-text) !important;
  border-color: transparent !important;
}
.message-tools .message-action-btn.danger {
  color: #ff9aa7 !important;
  grid-column: span 3;
}
@media (max-width: 980px) {
  .messages { padding-inline: 8px 6px; }
  .message { max-width: min(94%, 520px); margin-bottom: 4px; }
  .message-more-btn { opacity: 0.38; }
  .message.is-tools-open .message-more-btn,
  .message.is-pressing .message-more-btn { opacity: 0.85; }
  .message .message-tools {
    display: none;
  }
  .message-action-sheet .message-tools {
    display: grid !important;
  }
}
@media (min-width: 981px) {
  .message-more-btn { opacity: 0; }
  .message:hover .message-more-btn,
  .message.is-tools-open .message-more-btn {
    opacity: 0.55;
  }
}

/* V80 in-app media viewer */
.media-viewer-dialog {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: #050505;
}
.media-viewer-dialog::backdrop { background: rgba(0,0,0,.92); }
.media-viewer-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow: hidden;
  background: #050505;
  color: #fff;
}
.media-viewer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.78), transparent);
  z-index: 3;
}
.media-viewer-back-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.media-viewer-head-text { min-width: 0; flex: 1; display: grid; gap: 2px; }
.media-viewer-head-text strong {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-viewer-head-text span {
  color: rgba(255,255,255,.68);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-viewer-counter {
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.media-viewer-body {
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  overflow: auto;
}
.media-viewer-body img,
.media-viewer-body video {
  max-width: 100%;
  max-height: calc(100vh - 180px);
  object-fit: contain;
  border-radius: 8px;
}
.media-viewer-body iframe {
  width: min(960px, 100%);
  height: min(72vh, 720px);
  border: 0;
  border-radius: 8px;
  background: #fff;
}
.media-viewer-loading {
  color: rgba(255,255,255,.72);
  font-size: 14px;
}
.media-viewer-file-card {
  width: min(420px, 92vw);
  padding: 28px 24px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  text-align: center;
  display: grid;
  gap: 12px;
}
.media-viewer-file-icon { font-size: 54px; line-height: 1; }
.media-viewer-file-card strong {
  font-size: 16px;
  word-break: break-word;
}
.media-viewer-file-card small {
  color: rgba(255,255,255,.68);
  font-size: 12px;
}
.media-viewer-file-card button {
  justify-self: center;
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--wa-green);
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
}
.media-viewer-caption {
  padding: 0 16px 8px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  text-align: center;
}
.media-viewer-caption.hidden { display: none; }
.media-viewer-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
  z-index: 3;
}
.media-viewer-footer-btn {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.media-viewer-footer-btn:hover { background: rgba(147,197,253,.24); }
.media-viewer-footer-btn:disabled { opacity: .35; cursor: not-allowed; }
.media-viewer-download-btn { background: rgba(147,197,253,.18); }
.media-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 72px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: transparent;
  cursor: pointer;
  z-index: 2;
}
.media-viewer-nav-prev { left: 8px; }
.media-viewer-nav-next { right: 8px; }
.media-viewer-nav:disabled { opacity: 0; pointer-events: none; }

/* V156 image editor before send */
.image-edit-dialog {
  inset: 0;
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: #050505;
  overflow: hidden;
}
#imageEditDialog.image-edit-dialog[open] {
  position: fixed !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
}
.image-edit-dialog::backdrop { background: rgba(0,0,0,.9); }
.image-edit-shell {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  background: #050505;
  color: #fff;
  overflow: hidden;
}
.image-edit-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: rgba(11,20,26,.96);
  border-bottom: 1px solid rgba(134,150,160,.18);
}
.image-edit-head > div { min-width: 0; flex: 1; display: grid; gap: 2px; }
.image-edit-head strong { font-size: 16px; }
.image-edit-head span {
  color: rgba(233,237,239,.64);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.image-edit-icon-btn,
.image-edit-tool,
.image-edit-send-btn {
  border: 0;
  min-height: 38px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}
.image-edit-icon-btn {
  width: 38px;
  background: rgba(255,255,255,.1);
  color: #fff;
}
.image-edit-send-btn {
  padding: 0 18px;
  background: var(--wa-green);
  color: #0f172a;
}
.image-edit-send-btn:disabled,
.image-edit-tool:disabled { opacity: .45; cursor: not-allowed; }
.image-edit-stage {
  min-height: 0;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.image-edit-stage.is-drawing { cursor: crosshair; }
.image-edit-stage.is-cropping { cursor: move; }
.image-edit-canvas {
  width: min(94vw, 76vh);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  background: #111;
  box-shadow: 0 18px 60px rgba(0,0,0,.4);
  touch-action: none;
  object-fit: contain;
}
.image-edit-tools {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  background: rgba(11,20,26,.96);
  border-top: 1px solid rgba(134,150,160,.16);
}
.image-edit-tool {
  flex: 0 0 auto;
  padding: 0 14px;
  background: rgba(255,255,255,.1);
  color: #fff;
}
.image-edit-tool.is-active {
  background: rgba(37,211,102,.22);
  color: #d1f4e7;
  box-shadow: inset 0 0 0 1px rgba(37,211,102,.42);
}
.image-edit-control {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(233,237,239,.76);
  font-size: 12px;
  font-weight: 800;
}
.image-edit-control input[type="color"] {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.image-edit-control input[type="range"] {
  width: 118px;
  accent-color: var(--wa-green);
}
.image-crop-panel {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(8,15,20,.98);
  border-top: 1px solid rgba(134,150,160,.16);
}
.image-crop-panel.hidden { display: none; }
.image-crop-ratios {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.image-crop-ratios::-webkit-scrollbar { display: none; }
.image-crop-ratio {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(233,237,239,.8);
  font-weight: 800;
  cursor: pointer;
}
.image-crop-ratio.is-active {
  color: #d1f4e7;
  background: rgba(37,211,102,.2);
  box-shadow: inset 0 0 0 1px rgba(37,211,102,.38);
}
.image-crop-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.image-edit-caption-row {
  min-height: 0;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(11,20,26,.96);
}
.image-edit-caption-row textarea {
  width: 100%;
  min-height: 44px;
  max-height: 110px;
  resize: none;
  border: 1px solid rgba(134,150,160,.18);
  border-radius: 16px;
  padding: 11px 14px;
  background: #111b21;
  color: var(--wa-text);
  outline: none;
}
@media (max-width: 720px) {
  .image-edit-shell { grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
  .image-edit-head { gap: 9px; padding-left: 10px; padding-right: 10px; }
  .image-edit-head strong { font-size: 15px; }
  .image-edit-stage { padding: 8px; }
  .image-edit-canvas { width: auto; max-width: 100%; max-height: 100%; }
  .image-edit-tools { gap: 6px; padding: 8px; }
  .image-edit-tool { padding: 0 11px; min-height: 36px; }
  .image-edit-control { min-height: 36px; }
  .image-crop-panel { align-items: stretch; flex-direction: column; padding: 8px; gap: 8px; }
  .image-crop-actions { justify-content: flex-end; }
  .image-crop-ratio { min-height: 32px; padding: 0 10px; }
}

/* Avatar crop dialog */
.avatar-crop-dialog {
  width: min(420px, calc(100vw - 24px));
  max-height: min(92vh, 720px);
  padding: 0;
  border: 0;
  background: transparent;
}
.avatar-crop-dialog::backdrop { background: rgba(0,0,0,.72); }
.avatar-crop-shell {
  display: grid;
  gap: 14px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: var(--wa-panel);
  border: 1px solid var(--wa-border);
  box-shadow: var(--shadow-soft);
}
.avatar-crop-head h3 { margin: 0; font-size: 18px; }
.avatar-crop-head p { margin: 6px 0 0; font-size: 13px; color: var(--wa-muted); line-height: 1.4; }
.avatar-crop-stage {
  position: relative;
  width: min(100%, 360px);
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #0b141a;
  touch-action: none;
  cursor: grab;
}
.avatar-crop-stage.is-dragging { cursor: grabbing; }
.avatar-crop-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.avatar-crop-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.52);
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 2px;
}
.avatar-crop-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar-crop-zoom-label {
  flex: 1;
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--wa-muted);
}
.avatar-crop-zoom-label input[type="range"] { width: 100%; accent-color: var(--wa-green); }
.avatar-crop-rotate-btn {
  border: 1px solid var(--wa-border-soft);
  background: rgba(255,255,255,.04);
  color: var(--wa-text);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}
.avatar-crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.avatar-crop-actions button {
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  background: rgba(255,255,255,.06);
  color: var(--wa-text);
}
.avatar-crop-save-btn {
  background: var(--wa-green) !important;
  color: #0f172a !important;
  font-weight: 700;
}

/* Chat upload progress in bubble */
.message.is-pending .message-bubble { opacity: 0.96; }
.message.is-upload-failed .message-bubble { opacity: 0.72; }
.message-attachment.is-pending-media { position: relative; }
.upload-progress-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.38);
  border-radius: 8px;
  pointer-events: none;
}
.upload-progress-ring {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: conic-gradient(var(--wa-green) calc(var(--upload-progress, 0) * 360deg), rgba(255,255,255,.22) 0);
  display: grid;
  place-items: center;
  position: relative;
}
.upload-progress-ring::after {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(11,20,26,.82);
}
.upload-progress-label {
  position: absolute;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  z-index: 1;
}
.upload-progress-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}
.upload-progress-bar i {
  display: block;
  height: 100%;
  width: calc(var(--upload-progress, 0) * 100%);
  background: var(--wa-green);
  transition: width 0.12s linear;
}
.pending-upload-failed-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #ff9aa7;
}

.attach-icon-video { background: #e17055; color: #fff; }
.attach-icon-glyph-video {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='5' width='15' height='14' rx='2'/%3E%3Cpath d='M17 8l5-3v14l-5-3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='5' width='15' height='14' rx='2'/%3E%3Cpath d='M17 8l5-3v14l-5-3'/%3E%3C/svg%3E");
}

/* Outgoing call polish: only before the receiver accepts. */
.outgoing-call-panel {
  display: none;
}

.call-overlay.is-outgoing-call {
  background: radial-gradient(circle at 50% 18%, rgba(56, 189, 248, 0.16), transparent 34%), #0b141a;
}

.call-overlay.is-outgoing-call .call-window {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.call-overlay.is-outgoing-call .call-window > header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 6;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  background: transparent;
  border: 0;
}

.call-overlay.is-outgoing-call .call-window > header > div,
.call-overlay.is-outgoing-call .call-window > header .danger-btn,
.call-overlay.is-outgoing-call #callVideoGrid,
.call-overlay.is-outgoing-call #callChatPanel,
.call-overlay.is-outgoing-call #addCallParticipantBtn,
.call-overlay.is-outgoing-call #toggleCallChatBtn {
  display: none !important;
}

.call-overlay.is-outgoing-call .call-body {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  min-height: 0;
}

.call-overlay.is-outgoing-call .outgoing-call-panel {
  min-height: 100%;
  padding: calc(76px + env(safe-area-inset-top, 0px)) 22px calc(128px + env(safe-area-inset-bottom, 0px));
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  color: #f8fafc;
}

.outgoing-call-panel.hidden {
  display: none !important;
}

.outgoing-call-avatar-ring {
  width: min(184px, 46vw);
  height: min(184px, 46vw);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 70px rgba(0, 0, 0, 0.34);
}

.outgoing-call-avatar-ring::before,
.outgoing-call-avatar-ring::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: inherit;
  border: 1px solid rgba(96, 165, 250, 0.28);
  animation: outgoing-call-ring 2.2s ease-out infinite;
}

.outgoing-call-avatar-ring::after {
  animation-delay: 0.75s;
}

.call-overlay.is-outgoing-ringing .outgoing-call-avatar-ring::before,
.call-overlay.is-outgoing-ringing .outgoing-call-avatar-ring::after {
  border-color: rgba(34, 197, 94, 0.34);
  animation-duration: 1.55s;
}

.outgoing-call-avatar {
  position: relative;
  z-index: 1;
  width: min(148px, 37vw);
  height: min(148px, 37vw);
}

.outgoing-call-avatar .avatar {
  width: 100%;
  height: 100%;
  font-size: clamp(42px, 11vw, 64px);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.outgoing-call-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.outgoing-call-label {
  margin: 0 0 9px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.66);
}

.outgoing-call-panel h2 {
  max-width: min(680px, calc(100vw - 44px));
  margin: 0;
  font-size: clamp(30px, 8vw, 48px);
  line-height: 1.12;
  font-weight: 800;
  color: #fff;
  overflow-wrap: anywhere;
}

.outgoing-call-status {
  margin: 14px 0 0;
  font-size: clamp(16px, 4vw, 19px);
  line-height: 1.4;
  color: rgba(248, 250, 252, 0.86);
}

.outgoing-call-meta {
  margin: 8px 0 0;
  max-width: min(520px, calc(100vw - 44px));
  font-size: 13px;
  line-height: 1.45;
  color: rgba(203, 213, 225, 0.68);
}

.call-overlay.is-outgoing-call .call-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  padding: 22px 14px calc(20px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(11, 20, 26, 0), rgba(11, 20, 26, 0.92) 34%, #0b141a);
  border: 0;
}

.call-overlay.is-outgoing-call .call-controls button:not(.call-action-end) {
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
}

.call-overlay.is-outgoing-call .call-controls .call-action-end {
  box-shadow: 0 14px 34px rgba(239, 68, 68, 0.28);
}

@keyframes outgoing-call-ring {
  0% {
    transform: scale(0.92);
    opacity: 0.72;
  }
  100% {
    transform: scale(1.22);
    opacity: 0;
  }
}

@media (max-width: 720px) {
  .call-overlay.is-outgoing-call .outgoing-call-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .outgoing-call-avatar-ring {
    width: min(164px, 48vw);
    height: min(164px, 48vw);
    margin-bottom: 22px;
  }

  .outgoing-call-avatar {
    width: min(132px, 39vw);
    height: min(132px, 39vw);
  }

  .call-overlay.is-outgoing-call .call-controls {
    gap: 10px;
  }
}

/* Incoming call fullscreen polish */
#incomingCall.call-toast.incoming-call-screen {
  position: fixed;
  inset: 0;
  z-index: 45;
  min-width: 0;
  max-width: none;
  padding: max(28px, env(safe-area-inset-top, 0px)) 18px max(24px, env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 0;
  background: radial-gradient(circle at 50% 22%, rgba(96, 165, 250, 0.16), transparent 34%), #0b141a;
  box-shadow: none;
  display: grid;
  place-items: center;
}

#incomingCall.call-toast.incoming-call-screen.hidden {
  display: none !important;
}

.incoming-call-card {
  width: min(520px, 100%);
  min-height: min(720px, calc(100dvh - 48px));
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  color: #f8fafc;
}

.incoming-call-label {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.68);
}

.incoming-call-avatar-ring {
  width: min(190px, 48vw);
  height: min(190px, 48vw);
  margin-bottom: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 26px 70px rgba(0,0,0,.36);
}

.incoming-call-avatar-ring::before,
.incoming-call-avatar-ring::after {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: inherit;
  border: 1px solid rgba(34, 197, 94, 0.34);
  animation: incoming-call-ring 1.7s ease-out infinite;
}

.incoming-call-avatar-ring::after {
  animation-delay: .6s;
}

.incoming-call-avatar {
  position: relative;
  z-index: 1;
  width: min(150px, 38vw);
  height: min(150px, 38vw);
}

.incoming-call-avatar .avatar {
  width: 100%;
  height: 100%;
  border: 0;
  font-size: clamp(42px, 11vw, 64px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

#incomingCall.call-toast.incoming-call-screen strong#incomingCallName {
  max-width: min(700px, calc(100vw - 36px));
  font-size: clamp(28px, 7vw, 46px);
  line-height: 1.12;
  color: #fff;
  white-space: normal;
  overflow-wrap: anywhere;
}

#incomingCall.call-toast.incoming-call-screen span#incomingCallText {
  display: block;
  max-width: min(560px, calc(100vw - 36px));
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(203, 213, 225, 0.78);
  white-space: normal;
}

.incoming-call-actions {
  width: min(440px, 100%);
  margin-top: clamp(48px, 12vh, 96px);
  display: flex;
  justify-content: center;
  gap: 22px;
}

#incomingCall.call-toast .incoming-call-actions button {
  width: 116px;
  min-height: 88px;
  padding: 12px;
  border: 0;
  border-radius: 28px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.incoming-call-actions button span {
  font-size: 11px;
  color: rgba(255,255,255,.72);
}

.incoming-call-actions button strong {
  font-size: 15px;
}

.incoming-call-accept {
  background: #22c55e !important;
  box-shadow: 0 18px 44px rgba(34, 197, 94, .28);
}

.incoming-call-decline {
  background: #ef4444 !important;
  box-shadow: 0 18px 44px rgba(239, 68, 68, .24);
}

@keyframes incoming-call-ring {
  0% { transform: scale(.92); opacity: .76; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* Status reply bubble polish */
.message-status-reply-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 8px;
  padding: 9px;
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.12);
  border-left: 3px solid #60a5fa;
}

.message.me .message-status-reply-card {
  background: rgba(255, 255, 255, 0.12);
  border-left-color: rgba(255, 255, 255, 0.68);
}

.status-reply-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(15, 23, 42, .42);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 22px;
  background-size: cover;
  background-position: center;
}

.status-reply-thumb-video {
  background: linear-gradient(135deg, #0f172a, #334155);
}

.message-status-reply-copy {
  min-width: 0;
}

.message-status-reply-copy strong,
.message-status-reply-copy span,
.message-status-reply-copy p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-status-reply-copy strong {
  font-size: 12px;
  color: #dbeafe;
}

.message.me .message-status-reply-copy strong {
  color: #fff;
}

.message-status-reply-copy span {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(226, 232, 240, .72);
  white-space: nowrap;
}

.message-status-reply-copy p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(248, 250, 252, .86);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Video call polish */
.call-overlay.is-video-call:not(.is-outgoing-call) .call-window > header {
  backdrop-filter: blur(12px);
}

.call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header {
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px 74px;
}

.call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos .video-card video,
.call-overlay.is-group-call.is-video-call .video-card video,
.call-overlay.is-direct-conference.is-video-call .video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #localTile {
  width: clamp(104px, 22vw, 148px);
  height: clamp(142px, 30vw, 198px);
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
}

.call-overlay.is-video-call:not(.is-outgoing-call) .video-card span {
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: max-content;
  max-width: calc(100% - 20px);
  backdrop-filter: blur(10px);
  background: rgba(15, 23, 42, .58);
}

.call-overlay.is-group-call.is-video-call .call-video-grid,
.call-overlay.is-direct-conference.is-video-call .call-video-grid {
  padding: 14px;
  gap: 12px;
  background: #071016;
}

.call-overlay.is-group-call.is-video-call .video-card,
.call-overlay.is-group-call.is-video-call .remote-empty-state,
.call-overlay.is-direct-conference.is-video-call .video-card,
.call-overlay.is-direct-conference.is-video-call .remote-empty-state {
  aspect-ratio: 16 / 10;
  min-height: 0;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}

.call-overlay.is-group-call.is-video-call #localTile,
.call-overlay.is-direct-conference.is-video-call #localTile {
  min-height: 0;
}

.call-overlay.is-group-call.is-video-call .call-window > header,
.call-overlay.is-direct-conference.is-video-call .call-window > header {
  background: rgba(17, 27, 33, .94);
}

@media (max-width: 720px) {
  .incoming-call-actions {
    gap: 16px;
  }

  #incomingCall.call-toast .incoming-call-actions button {
    width: 104px;
    min-height: 82px;
    border-radius: 24px;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #localTile {
    width: 96px;
    height: 132px;
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  .call-overlay.is-group-call.is-video-call .call-video-grid,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }

  .call-overlay.is-group-call.is-video-call .video-card,
  .call-overlay.is-direct-conference.is-video-call .video-card {
    aspect-ratio: 1 / 1.12;
  }
}


/* V24: status composer safe-area, forgot password, location share, pagination, and production call polish */
.auth-link-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #0f8f63;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 6px;
  border-radius: 999px;
  text-align: center;
}

.auth-link-btn:hover,
.auth-link-btn:focus-visible {
  background: rgba(15, 143, 99, .09);
  outline: none;
}

.auth-help-text {
  margin: 0 0 10px;
  color: #5c6b66;
  line-height: 1.45;
  font-size: .92rem;
}

.forgot-step.hidden {
  display: none !important;
}

html.is-capacitor-native .status-composer-dialog .status-composer-head,
body.is-capacitor-native .status-composer-dialog .status-composer-head,
.capacitor-native .status-composer-dialog .status-composer-head {
  padding-top: calc(14px + max(env(safe-area-inset-top, 0px), 24px));
  min-height: calc(58px + max(env(safe-area-inset-top, 0px), 24px));
}

html.is-capacitor-native .status-composer-dialog .status-composer,
body.is-capacitor-native .status-composer-dialog .status-composer,
.capacitor-native .status-composer-dialog .status-composer {
  max-height: 100dvh;
}

.attach-icon-location {
  background: linear-gradient(135deg, #10b981, #0f766e);
}

.attach-icon-glyph-location::before {
  content: "📍";
  font-size: 22px;
  line-height: 1;
}

.message-location-card {
  width: min(280px, 100%);
  border: 0;
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  text-align: left;
  color: #0f2f24;
  background: linear-gradient(135deg, #e8fff6, #dff7ee);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .2);
}

.message-location-card:hover,
.message-location-card:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .4), 0 10px 24px rgba(16, 185, 129, .18);
}

.location-pin {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 118, 110, .14);
}

.location-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.location-copy strong {
  font-size: .95rem;
}

.location-copy small {
  color: #477062;
}

.contacts-load-more,
.group-info-load-more {
  width: calc(100% - 24px);
  margin: 10px 12px 14px;
  border: 0;
  border-radius: 999px;
  padding: 11px 14px;
  background: #e7f8f1;
  color: #0f6f52;
  font-weight: 800;
  cursor: pointer;
}

.contacts-load-more:disabled,
.group-info-load-more:disabled {
  opacity: .65;
  cursor: progress;
}

.group-member-panel-label {
  margin-top: 14px;
}

.group-member-list .chat-info-empty {
  display: block;
  padding: 12px;
}

.group-info-dialog-card,
.profile-dialog-card,
.contact-dialog-card {
  height: min(92dvh, 820px);
  max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

.group-info-dialog-card .chat-modal-body,
.profile-dialog-card .profile-dialog-body,
.contact-dialog-card .ux-contact-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app,
.chat-panel,
.conversations .item,
.contacts-list .item {
  transition-timing-function: cubic-bezier(.22, .9, .24, 1);
}

.chat-panel {
  transition-duration: .26s;
  will-change: transform, opacity;
}

@media (min-width: 981px) {
  .chat-panel {
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app,
  .chat-panel,
  .conversations .item,
  .contacts-list .item {
    transition: none !important;
  }
}

.call-overlay {
  background:
    radial-gradient(circle at top left, rgba(34, 197, 94, .28), transparent 36%),
    radial-gradient(circle at bottom right, rgba(20, 184, 166, .2), transparent 34%),
    linear-gradient(160deg, rgba(5, 20, 16, .96), rgba(7, 43, 33, .98));
  padding: max(14px, env(safe-area-inset-top, 0px)) 14px max(14px, env(safe-area-inset-bottom, 0px));
}

.call-window {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(5, 20, 16, .72);
  backdrop-filter: blur(24px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
}

.call-window > header {
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  color: #ffffff;
}

.call-window .eyebrow {
  color: #a7f3d0;
  letter-spacing: .08em;
}

.call-window #callTitle {
  color: #ffffff;
  font-size: clamp(1.28rem, 2.4vw, 2rem);
}

.call-window #callStatus,
.call-window .call-participants,
.call-window .call-duration {
  color: rgba(255, 255, 255, .74);
}

.outgoing-call-panel {
  color: #ffffff;
  text-align: center;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.outgoing-call-avatar-ring,
.incoming-call-avatar-ring {
  box-shadow: 0 0 0 10px rgba(16, 185, 129, .10), 0 0 48px rgba(16, 185, 129, .34);
}

.outgoing-call-label,
.incoming-call-label {
  color: #a7f3d0;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}

.call-video-grid,
.video-card,
.remote-videos {
  border-radius: 28px;
}

.video-card,
.remote-empty-state {
  background: linear-gradient(145deg, rgba(15, 23, 42, .72), rgba(15, 118, 110, .36));
  border: 1px solid rgba(255, 255, 255, .10);
}

.video-card span,
.remote-empty-state {
  color: rgba(255, 255, 255, .82);
}

.call-chat-panel {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #ffffff;
  backdrop-filter: blur(18px);
}

.call-chat-panel header span,
.call-chat-messages {
  color: rgba(255, 255, 255, .76);
}

.call-chat-form input {
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .16);
}

.call-chat-form input::placeholder {
  color: rgba(255, 255, 255, .58);
}

.call-controls-wa {
  padding: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.call-action-btn {
  min-width: 76px;
  min-height: 58px;
  border-radius: 22px;
  font-weight: 800;
}

.call-action-secondary {
  background: rgba(255, 255, 255, .12);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, .10);
}

.call-action-secondary.is-active,
.call-action-secondary:hover {
  background: rgba(16, 185, 129, .24);
}

.call-action-end {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(239, 68, 68, .28);
}

.incoming-call-screen {
  background:
    radial-gradient(circle at top, rgba(16, 185, 129, .32), transparent 34%),
    linear-gradient(160deg, rgba(5, 20, 16, .98), rgba(6, 78, 59, .96));
}

.incoming-call-card {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(24px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
}

.incoming-call-card strong,
.incoming-call-card span {
  color: #ffffff;
}

@media (max-width: 720px) {
  .call-window {
    min-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px);
    border-radius: 0;
  }

  .call-window > header {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
  }

  .call-body {
    gap: 12px;
  }

  .call-action-btn {
    min-width: 62px;
    min-height: 56px;
    border-radius: 20px;
  }
}

/* V62 focused fixes: modal fit, location preview, calls tab, status fullscreen, and status tags */
.chat-header {
  overflow: visible;
}

.chat-call-actions,
.chat-menu-trigger {
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

#chatHeaderMenu {
  z-index: 1500;
}

.sidebar {
  min-height: 0;
}

.tab-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.tab-panel.active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#tabCalls {
  padding-bottom: 0;
}

#tabCalls .tab-calls-card {
  flex: 0 0 auto;
}

#tabCalls .call-filter-tabs {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--wa-panel);
  border-bottom: 1px solid var(--wa-border-soft);
}

#callLogsList.call-logs-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

#tabChats.tab-panel.active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

#tabChats .chat-toolbar,
#tabChats .panel-label {
  flex: 0 0 auto;
}

#conversationList.conversations {
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
  grid-auto-rows: max-content;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#conversationList.conversations .conversation-item.item {
  min-height: 66px;
  padding-block: 6px;
}

#conversationList.conversations .conversation-item.item .item-main {
  gap: 2px;
}

@media (max-width: 560px) {
  #conversationList.conversations .conversation-item.item {
    min-height: 64px;
    padding-block: 5px;
  }
}

@media (max-width: 980px) {
  .sidebar {
    touch-action: pan-y;
  }
  .sidebar.is-tab-swiping .tab-panel.active {
    transition: none !important;
    transform: translate3d(var(--tab-swipe-x, 0px), 0, 0);
    will-change: transform;
  }
  .sidebar.tab-swipe-next .tab-panel.active {
    animation: mobileTabSwipeNext 160ms cubic-bezier(.2,.9,.22,1);
  }
  .sidebar.tab-swipe-prev .tab-panel.active {
    animation: mobileTabSwipePrev 160ms cubic-bezier(.2,.9,.22,1);
  }
  #callLogsList.call-logs-list .call-log-item.item {
    min-height: 62px;
    padding-block: 6px;
    gap: 9px;
  }
  #callLogsList.call-logs-list .call-log-item .item-main {
    gap: 2px;
  }
  #callLogsList.call-logs-list .call-log-actions {
    gap: 3px;
  }
  .composer-field textarea#messageInput {
    transition: height 90ms ease;
    overflow-anchor: none;
  }
}

@media (max-width: 560px) {
  #callLogsList.call-logs-list .call-log-item.item {
    min-height: 58px;
    padding-block: 5px;
  }
}

@keyframes mobileTabSwipeNext {
  from { opacity: .72; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes mobileTabSwipePrev {
  from { opacity: .72; transform: translateX(-22px); }
  to { opacity: 1; transform: translateX(0); }
}

dialog:not(.status-fullscreen-dialog):not(.media-viewer-dialog):not(.status-composer-dialog):has(.chat-modal:not(.modal-compact)),
dialog:not(.status-fullscreen-dialog):not(.media-viewer-dialog):not(.status-composer-dialog):has(.location-preview-card) {
  align-items: center;
  justify-content: center;
  margin: auto;
}

.group-info-dialog-card,
.profile-dialog-card,
.contact-dialog-card,
.location-preview-card,
.chat-modal:not(.modal-compact) {
  max-height: calc(100dvh - 20px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
}

.group-info-dialog-card,
.profile-dialog-card,
.contact-dialog-card {
  height: min(92dvh, 820px);
}

.chat-modal-head,
.ux-modal-head,
.chat-modal-actions,
.ux-modal-actions {
  flex: 0 0 auto;
}

.chat-modal-body,
.group-info-body,
.profile-dialog-body,
.ux-contact-body,
.location-preview-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.chat-info-hero,
.group-info-hero {
  padding-left: 0;
  gap: 14px;
}

.group-photo-editor {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.group-photo-editor .group-photo-preview,
.chat-info-hero-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
}

.group-photo-camera {
  right: 0;
  bottom: 0;
  left: auto;
  transform: translate(10%, 10%);
}

/* V164 mobile UX/media focused fixes */
.message-attachment.video {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    radial-gradient(circle at center, rgba(147,197,253,.14), transparent 42%),
    #050b12;
  overflow: hidden;
}
.message-attachment.video video {
  margin-bottom: 0;
  object-fit: cover;
  min-height: 154px;
}
.message-attachment.video.has-video-poster video,
.message-attachment.video.is-loaded video {
  opacity: 1;
}
.message-attachment.video.video-poster-fallback video:not([poster]) {
  opacity: .32;
}
.message-attachment.video video::-webkit-media-controls,
.message-attachment.video video::-webkit-media-controls-panel,
.message-attachment.video video::-webkit-media-controls-play-button,
.message-attachment.video video::-webkit-media-controls-start-playback-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.media-video-open-btn {
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 17px;
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
}
.media-viewer-video-wrap {
  position: relative;
  width: min(100%, 1080px);
  height: 100%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(147,197,253,.12), transparent 42%),
    #050505;
}
.media-viewer-video-wrap video {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.media-viewer-center-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
}
.media-viewer-center-play.hidden {
  display: none;
}
.media-viewer-body.is-image-zoomable {
  overflow: hidden;
  touch-action: none;
}
.media-viewer-body .media-viewer-image-zoom {
  transform-origin: center center;
  will-change: transform;
  cursor: zoom-in;
}
.media-viewer-body.is-image-zoomed .media-viewer-image-zoom {
  cursor: grab;
}
.media-viewer-body video {
  background-color: #050505;
}
.media-viewer-body.has-video-poster video {
  object-fit: contain;
}
.status-preview.video {
  background-size: cover;
  background-position: center;
  position: relative;
}
.status-preview.video.has-thumb span {
  background: rgba(0,0,0,.48);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 10px;
}
.status-preview.video.thumb-failed {
  background:
    radial-gradient(circle at center, rgba(147,197,253,.18), transparent 46%),
    #0f172a;
}
.status-preview.text {
  color: #fff;
  font-size: 18px;
  letter-spacing: 0;
}
.image-edit-dialog.is-sending .image-edit-shell::after {
  content: "Menyiapkan...";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.42);
  color: #fff;
  font-weight: 800;
  z-index: 6;
  pointer-events: none;
}
.image-edit-dialog.is-sending .image-edit-shell {
  position: relative;
}
.profile-dialog-card input[readonly] {
  color: var(--wa-muted);
  cursor: default;
}

@media (max-width: 720px) {
  .status-composer {
    height: 100dvh;
    max-height: 100dvh;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .status-composer-tabs {
    padding: 7px 10px;
    gap: 6px;
  }
  .status-composer-pane {
    padding: 8px 10px;
    gap: 8px;
  }
  .status-upload-box {
    min-height: 88px;
    padding: 10px;
    gap: 4px;
  }
  .status-media-preview {
    max-height: min(42dvh, 320px);
    margin-bottom: 4px;
  }
  .status-media-preview img,
  .status-media-preview video {
    max-height: min(42dvh, 320px);
    object-fit: contain;
  }
  .status-caption-field textarea,
  .status-text-input-wrap textarea {
    min-height: 42px;
    padding: 10px;
  }
  .status-tag-panel {
    padding: 0 10px 8px;
    gap: 6px;
  }
  .status-tag-contacts {
    gap: 6px;
  }
  .status-tag-chip {
    min-height: 34px;
    padding: 4px 9px 4px 5px;
  }
  dialog:not(.status-fullscreen-dialog):not(.media-viewer-dialog):not(.status-composer-dialog) {
    max-width: 100vw;
    max-height: 100dvh;
  }
  .group-info-dialog-card,
  .profile-dialog-card,
  .contact-dialog-card,
  .group-dialog-card,
  .chat-modal:not(.modal-compact) {
    width: calc(100vw - 12px);
    height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 14px;
  }
  .profile-dialog-body,
  .group-dialog-body,
  .ux-contact-body,
  .group-info-body,
  .chat-modal-body {
    gap: 10px;
    padding-block: 10px;
  }
  .profile-dialog-header,
  .group-dialog-header,
  .ux-modal-head,
  .chat-modal-head {
    padding-block: 12px;
  }
  .profile-dialog-actions,
  .group-dialog-actions,
  .ux-modal-actions,
  .chat-modal-actions {
    padding-block: 10px;
  }
}

.location-preview-card {
  height: min(90dvh, 760px);
}

.location-preview-loading {
  min-height: 240px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--wa-border-soft);
  border-radius: 14px;
  color: var(--wa-muted);
  background: rgba(255, 255, 255, .04);
  text-align: center;
}

.location-preview-loading.is-error {
  border-style: solid;
  border-color: rgba(239, 68, 68, .32);
  color: #fecaca;
  background: rgba(239, 68, 68, .08);
  padding: 18px;
}

dialog.status-fullscreen-dialog[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.status-viewer-shell {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  max-height: 100dvh;
}

html.is-capacitor-native dialog.status-fullscreen-dialog[open],
html.is-capacitor-native .status-viewer-shell {
  height: 100dvh;
  min-height: 100dvh;
}

html.is-capacitor-native .status-viewer-head {
  padding-top: calc(10px + max(env(safe-area-inset-top, 0px), 24px));
}

html.is-capacitor-native .status-progress {
  top: calc(6px + max(env(safe-area-inset-top, 0px), 24px));
}

html.is-capacitor-native .status-viewer-footer {
  padding-bottom: calc(14px + max(env(safe-area-inset-bottom, 0px), 16px));
}

.status-composer {
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.status-composer-pane {
  min-height: 0;
  overflow-y: auto;
}

.status-tag-panel {
  flex: 0 0 auto;
  max-height: min(210px, 30dvh);
  overflow-y: auto;
  border-top: 1px solid var(--wa-border-soft);
  background: var(--wa-panel);
  -webkit-overflow-scrolling: touch;
}

.status-tag-search {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--wa-border-soft);
  border-radius: 999px;
  background: var(--wa-panel-2);
  color: var(--wa-text);
  padding: 0 14px;
  outline: none;
}

.status-tag-search:focus {
  border-color: rgba(147, 197, 253, .5);
  box-shadow: 0 0 0 2px rgba(147, 197, 253, .12);
}

.status-tag-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  overflow: visible;
}

.status-tag-chip {
  width: 100%;
  min-width: 0;
}

.status-tag-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-tag-load-more {
  min-height: 38px;
  border: 1px solid var(--wa-border-soft);
  border-radius: 999px;
  background: var(--wa-panel-2);
  color: var(--wa-green-2);
  font-weight: 800;
}

@media (max-width: 720px) {
  .group-info-dialog-card,
  .profile-dialog-card,
  .contact-dialog-card,
  .location-preview-card,
  .chat-modal:not(.modal-compact) {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 14px;
  }

  .status-tag-panel {
    max-height: min(230px, 36dvh);
  }
}

@media (max-width: 720px) {
  .status-composer {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  }

  .status-composer-pane {
    padding: 6px 10px;
    gap: 6px;
  }

  .status-media-pane {
    align-content: start;
  }

  .status-media-actions {
    gap: 6px;
  }

  .status-media-action-btn {
    min-height: 38px;
  }

  .status-upload-box {
    min-height: 72px;
    padding: 8px;
    gap: 3px;
  }

  .status-upload-box.is-selected {
    min-height: 0;
  }

  .status-media-preview {
    max-height: min(34dvh, 260px);
    margin-bottom: 2px;
  }

  .status-media-preview img,
  .status-media-preview video {
    max-height: min(34dvh, 260px);
    object-fit: contain;
  }

  .status-caption-field {
    display: grid;
    gap: 4px;
  }

  .status-caption-field textarea {
    min-height: 40px;
    max-height: 86px;
    padding: 8px 10px;
  }

  .status-tag-panel {
    max-height: min(150px, 24dvh);
    padding: 7px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 5px;
  }

  .status-tag-search {
    min-height: 34px;
    padding-inline: 12px;
  }

  .status-tag-contacts {
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    gap: 5px;
  }

  .status-tag-chip {
    min-height: 30px;
    padding: 3px 8px 3px 4px;
    gap: 5px;
  }

  .status-tag-avatar {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .status-tag-load-more {
    min-height: 32px;
  }
}

/* V63 focused fixes: mobile status viewer fullscreen feed + Contacts tab scroll. */
#tabContacts.tab-panel.active {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#tabContacts .contact-panel-stack {
  min-height: min-content;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

#tabContacts .contacts-list,
#tabContacts .contact-results,
#tabContacts #usersList {
  overflow: visible;
}

@media (max-width: 720px) {
  dialog.status-fullscreen-dialog[open] {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    padding: 0;
    overflow: hidden;
    background: #000;
  }

  .status-viewer-shell {
    position: relative;
    display: block;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    background: #000;
  }

  .status-viewer-content,
  .status-viewer-story,
  .status-story-full {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
  }

  .status-story-full img,
  .status-story-full video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    background: #000;
  }

  .status-story-full.text .status-text-full {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }

  .status-viewer-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
    padding-top: calc(14px + env(safe-area-inset-top, 0px));
    padding-bottom: 22px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.38) 62%, transparent);
  }

  .status-progress {
    position: absolute;
    top: calc(6px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    z-index: 10;
  }

  .status-viewer-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8;
    padding-top: 56px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.32) 62%, transparent);
  }

  .status-caption {
    max-height: 24dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .status-reaction-bar {
    position: relative;
    z-index: 9;
  }

  .status-tap-zones {
    z-index: 4;
  }

  html.is-capacitor-native .status-viewer-head {
    padding-top: calc(14px + max(env(safe-area-inset-top, 0px), 24px));
  }

  html.is-capacitor-native .status-progress {
    top: calc(6px + max(env(safe-area-inset-top, 0px), 24px));
  }

  html.is-capacitor-native .status-viewer-footer {
    padding-bottom: calc(14px + max(env(safe-area-inset-bottom, 0px), 16px));
  }
}

/* V64 focused polish: group sender avatars, compact main header menu, one-row call controls. */
.side-header {
  position: relative;
  z-index: 1900;
}

.side-header-actions > .install-action,
.side-header-actions > .push-action,
.side-header-actions > .profile-action,
.side-header-actions > .logout-action {
  display: none !important;
}

.side-header-menu-trigger {
  flex: 0 0 auto;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}

.side-header-menu {
  min-width: 230px;
  position: fixed !important;
  z-index: 2000 !important;
  gap: 4px;
  grid-auto-rows: 46px;
  align-items: stretch;
}

.side-header-menu button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 10px;
  min-height: 46px;
  height: 46px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}

.side-header-menu button span {
  width: 24px;
  display: grid;
  place-items: center;
  font-size: 15px;
}

.side-header-menu button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 700;
}

.side-header-menu button.is-active {
  color: var(--wa-green-2);
}

/* V68 mobile chat must sit above the main header while a conversation is open. */
@media (max-width: 980px) {
  .app:not(.show-list) .chat-panel {
    z-index: 1950;
  }

  .app:not(.show-list) .sidebar {
    pointer-events: none;
  }

  .app:not(.show-list) .chat-panel,
  .app:not(.show-list) .call-overlay {
    pointer-events: auto;
  }

  .call-overlay:not(.hidden) {
    z-index: 2600;
  }
}

.message.has-group-avatar {
  max-width: min(92%, 580px);
}

.message-group-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  margin: 0 2px 2px 0;
}

.message-group-avatar.is-spacer {
  visibility: hidden;
}

.message-group-avatar-inner {
  width: 30px;
  height: 30px;
  font-size: 11px;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.message.has-group-avatar .message-row {
  align-items: flex-end;
}

.message.has-group-avatar .message-bubble {
  max-width: calc(100% - 36px);
}

.call-overlay .call-controls-wa {
  display: flex;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.call-overlay .call-controls-wa .call-action-btn {
  flex: 0 0 auto;
  min-width: 54px !important;
  width: 54px;
  min-height: 52px !important;
  padding: 0 !important;
  border-radius: 16px;
}

.call-overlay .call-controls-wa .call-action-glyph {
  width: 42px !important;
  height: 42px !important;
  font-size: 17px;
}

.call-overlay .call-controls-wa .call-action-label {
  font-size: 9px;
  line-height: 1;
  max-width: 54px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.call-overlay #addCallParticipantBtn {
  font-size: 0;
}

.call-overlay #addCallParticipantBtn::before {
  content: "+";
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

@media (max-width: 720px) {
  .call-overlay .call-controls-wa {
    gap: 5px;
    justify-content: flex-start;
    padding-inline: 8px;
  }

  .call-overlay .call-controls-wa .call-action-btn {
    min-width: 46px !important;
    width: 46px;
    min-height: 44px !important;
  }

  .call-overlay .call-controls-wa .call-action-glyph {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px;
  }

  .call-overlay .call-controls-wa .call-action-label {
    display: none;
  }
}

/* V67 focused fixes: mobile call controls one-row + multiline composer shape. */
.composer-field.is-multiline {
  align-items: flex-end;
  border-radius: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-color: rgba(134, 150, 160, 0.22);
}

.composer-field.is-multiline #messageInput {
  height: auto;
  min-height: 42px;
  border-radius: 9px;
  padding-top: 2px;
  padding-bottom: 2px;
}

@media (max-width: 720px) {
  .call-overlay .call-controls-wa,
  html.is-capacitor-native .call-overlay .call-controls-wa {
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    min-height: 48px;
    max-height: 56px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .call-overlay .call-controls-wa .call-action-btn,
  html.is-capacitor-native .call-overlay .call-controls-wa .call-action-btn {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden;
    gap: 0;
    font-size: 0;
  }

  .call-overlay .call-controls-wa .call-action-glyph,
  html.is-capacitor-native .call-overlay .call-controls-wa .call-action-glyph {
    width: 34px !important;
    height: 34px !important;
    font-size: 15px !important;
    border-radius: 50%;
  }

  .call-overlay .call-controls-wa .call-action-label,
  html.is-capacitor-native .call-overlay .call-controls-wa .call-action-label {
    display: none !important;
  }

  .call-overlay #addCallParticipantBtn::before,
  html.is-capacitor-native .call-overlay #addCallParticipantBtn::before {
    content: "+";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    background: rgba(255, 255, 255, .12);
    color: #fff;
  }

  .call-overlay .call-controls-wa .call-action-btn.hidden {
    display: none !important;
  }
}

/* V70 mobile 1:1 video fullscreen + draggable PiP polish. */
@media (max-width: 720px) {
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) {
    background: #000;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
    overflow: hidden;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 12;
    min-height: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 34px;
    border: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .46), rgba(0, 0, 0, 0));
    backdrop-filter: none;
    pointer-events: none;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header > div {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    width: 100%;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header .eyebrow,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header h3,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header .call-participants,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header .call-device-bar,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header .danger-btn {
    display: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-duration,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #callStatus {
    display: inline !important;
    margin: 0;
    color: #fff;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .58);
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #callStatus {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-body,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-video-grid {
    position: absolute;
    inset: 0;
    min-height: 100dvh;
    width: 100%;
    height: 100dvh;
    padding: 0;
    display: block;
    border-radius: 0;
    background: #000;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 0;
    background: transparent;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #localTile {
    background: transparent;
    border: 0;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote .remote-videos .video-card,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local #localTile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote #localTile,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local .remote-videos .video-card {
    position: absolute;
    left: var(--call-pip-left, auto);
    top: var(--call-pip-top, auto);
    right: var(--call-pip-left, max(14px, env(safe-area-inset-right, 0px)));
    bottom: var(--call-pip-top, calc(86px + env(safe-area-inset-bottom, 0px)));
    width: 96px;
    height: 132px;
    min-height: 0;
    border-radius: 16px;
    overflow: hidden;
    z-index: 10;
    cursor: grab;
    touch-action: none;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .16);
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).is-pip-dragging #localTile,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).is-pip-dragging .remote-videos .video-card {
    cursor: grabbing;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .video-card span,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #localTileLabel {
    display: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-empty-state {
    position: absolute;
    inset: 0;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    background: #000;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-chat-panel {
    z-index: 14;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-controls-wa {
    z-index: 15;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72) 58%);
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #endCallBtn {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 8px 24px rgba(239, 68, 68, .18);
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #endCallBtn .call-action-glyph {
    color: #ef4444 !important;
    background: transparent !important;
  }
}

/* V70 add participant modal polish. */
.call-participant-dialog-card {
  width: min(430px, calc(100vw - 16px));
  max-height: min(86dvh, 640px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.call-participant-search-wrap {
  display: grid;
  gap: 6px;
  color: var(--wa-muted);
  font-size: 12px;
  font-weight: 700;
}

.call-participant-search-wrap input {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(134, 150, 160, .24);
  background: rgba(11, 20, 26, .62);
  color: var(--wa-text);
  padding: 0 12px;
  font: inherit;
}

.call-participant-picker {
  overflow-y: auto;
  max-height: min(42dvh, 300px);
  padding: 2px;
}

.call-participant-option {
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, .035);
}

.call-participant-option:has(input:checked) {
  border-color: rgba(90, 167, 255, .46);
  background: rgba(90, 167, 255, .12);
}

.call-participant-empty {
  margin: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(134, 150, 160, .14);
}

.call-tile-host-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  display: flex;
  gap: 5px;
}

.call-tile-host-actions button {
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(0, 0, 0, .48);
  color: #fff;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.call-tile-host-actions button.is-active {
  background: rgba(239, 68, 68, .82);
  border-color: rgba(254, 202, 202, .65);
}

.call-muted-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  border-radius: 999px;
  background: rgba(239, 68, 68, .78);
  color: #fff;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 800;
}

.video-card.is-host-muted audio,
.video-card.is-host-muted video {
  opacity: .72;
}

/* V79 mobile direct video conference: compact header + stable 2-column grid up to 6. */
@media (max-width: 720px) {
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) {
    background: #020807;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-window {
    position: relative;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #020807;
    box-shadow: none;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-window > header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 18;
    min-height: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 30px;
    border: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, 0));
    backdrop-filter: none;
    pointer-events: none;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-window > header > div {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-window > header .eyebrow,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-window > header h3,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-window > header .call-participants,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-window > header .call-device-bar,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-window > header .danger-btn {
    display: none !important;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-duration,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) #callStatus {
    display: inline !important;
    margin: 0;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.2;
    letter-spacing: 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .62);
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-duration {
    flex: 0 0 auto;
    font-weight: 800;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) #callStatus {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-body {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 0;
    overflow: hidden;
    background: #020807;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-video-grid {
    position: absolute;
    inset: calc(42px + env(safe-area-inset-top, 0px)) 0 calc(58px + env(safe-area-inset-bottom, 0px)) 0;
    width: 100%;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-video-grid.call-size-3,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-video-grid.call-size-4 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-video-grid.call-size-5,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-video-grid.call-size-6 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .remote-videos {
    display: contents;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) #localTile,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .remote-empty-state {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(4, 17, 16, .88);
    box-shadow: none;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .video-card span {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 4px 7px;
    font-size: 10px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0, 0, 0, .50);
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-chat-panel {
    position: absolute;
    inset: calc(52px + env(safe-area-inset-top, 0px)) 8px calc(70px + env(safe-area-inset-bottom, 0px)) 8px;
    z-index: 20;
    border-radius: 18px;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-chat-panel.hidden {
    display: none !important;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) .call-controls-wa {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 22;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78) 54%);
    border: 0;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) #endCallBtn {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(255, 255, 255, .86) !important;
  }

  .call-overlay.is-direct-conference.is-video-call:not(.is-outgoing-call) #endCallBtn .call-action-glyph {
    color: #ef4444 !important;
    background: transparent !important;
  }
}

/* V82 mobile audio/group parity: same compact call shell and responsive participant grid. */
@media (max-width: 720px) {
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) {
    background: #020807;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-window {
    position: relative;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: radial-gradient(circle at 50% 24%, rgba(90, 167, 255, .16), transparent 38%), #020807;
    box-shadow: none;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-window > header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 18;
    min-height: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 30px;
    border: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, 0));
    backdrop-filter: none;
    pointer-events: none;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-window > header > div {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-window > header .eyebrow,
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-window > header h3,
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-window > header .call-participants,
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-window > header .call-device-bar,
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-window > header .danger-btn {
    display: none !important;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-duration,
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) #callStatus {
    display: inline !important;
    margin: 0;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.2;
    letter-spacing: 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .62);
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-duration {
    flex: 0 0 auto;
    font-weight: 800;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) #callStatus {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-body {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 0;
    overflow: hidden;
    background: transparent;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-video-grid {
    position: absolute;
    inset: calc(42px + env(safe-area-inset-top, 0px)) 0 calc(58px + env(safe-area-inset-bottom, 0px)) 0;
    display: block;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
    padding: 0;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .remote-videos {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .remote-empty-state {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .remote-videos .audio-avatar,
  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .remote-empty-state strong {
    width: 128px;
    height: 128px;
    font-size: 34px;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .remote-videos .video-card > span {
    left: 50%;
    right: auto;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    max-width: calc(100% - 44px);
    padding: 6px 10px;
    text-align: center;
    font-size: 12px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(12, 22, 27, .62);
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) #localTile {
    position: absolute;
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 14;
    width: min(31vw, 126px);
    height: min(31vw, 126px);
    min-height: 0;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(17, 34, 42, .78);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .32);
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) #localTile .audio-avatar {
    width: 58px;
    height: 58px;
    font-size: 17px;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) #localTileLabel {
    left: 8px;
    right: 8px;
    bottom: 7px;
    padding: 3px 6px;
    font-size: 9px;
    line-height: 1.1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(0, 0, 0, .40);
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-chat-panel {
    position: absolute;
    inset: calc(52px + env(safe-area-inset-top, 0px)) 8px calc(70px + env(safe-area-inset-bottom, 0px)) 8px;
    z-index: 20;
    border-radius: 18px;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-chat-panel.hidden {
    display: none !important;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-controls-wa {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 22;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78) 54%);
    border: 0;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) #endCallBtn {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(255, 255, 255, .86) !important;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) #endCallBtn .call-action-glyph {
    color: #ef4444 !important;
    background: transparent !important;
  }

  .call-overlay.is-direct-call.audio-call.is-direct-p2p:not(.is-outgoing-call) .call-tile-host-actions {
    top: calc(54px + env(safe-area-inset-top, 0px));
    right: 12px;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call),
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) {
    background: #020807;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-window,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-window {
    position: relative;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #020807;
    box-shadow: none;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-window > header,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-window > header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 18;
    min-height: 0;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 10px 30px;
    border: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .50), rgba(0, 0, 0, 0));
    backdrop-filter: none;
    pointer-events: none;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-window > header > div,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-window > header > div {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-window > header .eyebrow,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-window > header h3,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-window > header .call-participants,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-window > header .call-device-bar,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-window > header .danger-btn,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-window > header .eyebrow,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-window > header h3,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-window > header .call-participants,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-window > header .call-device-bar,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-window > header .danger-btn {
    display: none !important;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-duration,
  .call-overlay.is-group-call:not(.is-outgoing-call) #callStatus,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-duration,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) #callStatus {
    display: inline !important;
    margin: 0;
    color: #fff;
    font-size: 12.5px;
    line-height: 1.2;
    letter-spacing: 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .62);
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-duration,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-duration {
    flex: 0 0 auto;
    font-weight: 800;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) #callStatus,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) #callStatus {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-body,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-body {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 0;
    overflow: hidden;
    background: #020807;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-video-grid {
    position: absolute;
    inset: calc(42px + env(safe-area-inset-top, 0px)) 0 calc(58px + env(safe-area-inset-bottom, 0px)) 0;
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    overflow-y: auto;
    border-radius: 0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-1,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-2,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-video-grid.call-size-1,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-video-grid.call-size-2 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-3,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-4,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-video-grid.call-size-3,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-video-grid.call-size-4 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-5,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-6,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-video-grid.call-size-5,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-video-grid.call-size-6 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-7,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-8,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-9,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-10,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-11,
  .call-overlay.is-group-call:not(.is-outgoing-call) .call-video-grid.call-size-12 {
    grid-auto-rows: minmax(150px, 28dvh);
    align-content: start;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .remote-videos,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .remote-videos {
    display: contents;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) #localTile,
  .call-overlay.is-group-call:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-group-call:not(.is-outgoing-call) .remote-empty-state,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) #localTile,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .remote-empty-state {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(4, 17, 16, .88);
    box-shadow: none;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .audio-avatar,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .audio-avatar {
    width: 74px;
    height: 74px;
    font-size: 22px;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-chat-panel,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-chat-panel {
    position: absolute;
    inset: calc(52px + env(safe-area-inset-top, 0px)) 8px calc(70px + env(safe-area-inset-bottom, 0px)) 8px;
    z-index: 20;
    border-radius: 18px;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-chat-panel.hidden,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-chat-panel.hidden {
    display: none !important;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) .call-controls-wa,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) .call-controls-wa {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 22;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78) 54%);
    border: 0;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) #endCallBtn,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) #endCallBtn {
    background: rgba(255, 255, 255, .94) !important;
    border-color: rgba(255, 255, 255, .86) !important;
  }

  .call-overlay.is-group-call:not(.is-outgoing-call) #endCallBtn .call-action-glyph,
  .call-overlay.is-direct-conference.audio-call:not(.is-outgoing-call) #endCallBtn .call-action-glyph {
    color: #ef4444 !important;
    background: transparent !important;
  }
}

/* V91 final layer guard: incoming foreground UI must not sit behind chat/call surfaces. */
#incomingCall.call-toast.incoming-call-screen {
  z-index: 2600 !important;
}

@media (min-width: 981px) {
  .call-overlay.is-group-call.is-video-call .call-video-grid,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    align-content: stretch;
  }

  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-3,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid.call-size-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }

  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-4,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid.call-size-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-5,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-6,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid.call-size-5,
  .call-overlay.is-direct-conference.is-video-call .call-video-grid.call-size-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-7,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-8,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-9,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-10,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-11,
  .call-overlay.is-group-call.is-video-call .call-video-grid.call-size-12 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
}

/* V93 final hard override: remove every dark veil from mobile 1:1 video call. */
@media (max-width: 720px) {
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call),
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-body,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-video-grid,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos .video-card,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #localTile {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window > header,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-controls-wa {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) video {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }
}

/* V94 mobile call finish: keep controls reachable, larger, and close to the safe-area bottom. */
@media (max-width: 720px) {
  .call-overlay:not(.is-outgoing-call) .call-controls-wa {
    bottom: max(2px, env(safe-area-inset-bottom, 0px)) !important;
    min-height: 54px !important;
    padding: 2px 6px 0 !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .call-overlay:not(.is-outgoing-call) .call-controls-wa .call-action-btn,
  .call-overlay:not(.is-outgoing-call) .call-controls-wa button {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    border-radius: 999px !important;
  }

  .call-overlay:not(.is-outgoing-call) .call-controls-wa .call-action-glyph {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) #localTile,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos .video-card {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-tile-host-actions {
    top: 6px !important;
    right: 6px !important;
    gap: 3px !important;
    max-width: calc(100% - 12px) !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-tile-host-actions button {
    min-height: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* V98 call lifecycle polish: true fullscreen incoming and bottom-anchored mobile controls. */
@media (max-width: 720px) {
  #incomingCall.call-toast.incoming-call-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(circle at 50% 24%, rgba(34, 197, 94, .18), transparent 38%),
      #020807 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #incomingCall.call-toast.incoming-call-screen .incoming-call-card {
    width: 100vw !important;
    min-height: 100dvh !important;
    padding:
      calc(28px + env(safe-area-inset-top, 0px))
      20px
      calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .call-overlay:not(.hidden) .call-controls-wa,
  html.is-capacitor-native .call-overlay:not(.hidden) .call-controls-wa {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: max(4px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 2605 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100vw !important;
    min-height: 58px !important;
    max-height: 68px !important;
    padding: 2px 8px 4px !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .call-overlay:not(.hidden) .call-controls-wa .call-action-btn,
  html.is-capacitor-native .call-overlay:not(.hidden) .call-controls-wa .call-action-btn,
  .call-overlay:not(.hidden) .call-controls-wa button,
  html.is-capacitor-native .call-overlay:not(.hidden) .call-controls-wa button {
    flex: 0 0 54px !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    max-width: 54px !important;
    max-height: 54px !important;
    border-radius: 999px !important;
  }

  .call-overlay:not(.hidden) .call-controls-wa .call-action-glyph,
  html.is-capacitor-native .call-overlay:not(.hidden) .call-controls-wa .call-action-glyph,
  .call-overlay:not(.hidden) #addCallParticipantBtn::before,
  html.is-capacitor-native .call-overlay:not(.hidden) #addCallParticipantBtn::before {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    font-size: 20px !important;
  }

  .call-overlay:not(.hidden) #endCallBtn,
  html.is-capacitor-native .call-overlay:not(.hidden) #endCallBtn {
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(255, 255, 255, .92) !important;
  }

  .call-overlay:not(.hidden) #endCallBtn .call-action-glyph,
  html.is-capacitor-native .call-overlay:not(.hidden) #endCallBtn .call-action-glyph {
    color: #ef4444 !important;
    background: transparent !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote #localTile,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local .remote-videos .video-card,
  html.is-capacitor-native .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote #localTile,
  html.is-capacitor-native .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local .remote-videos .video-card {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-tile-host-actions,
  html.is-capacitor-native .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-tile-host-actions {
    top: calc(34px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !important;
  }
}

@media (min-width: 981px) {
  .chat-panel {
    will-change: auto;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) {
    padding: 0 !important;
    display: block !important;
    background: #000 !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-window {
    position: relative !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-body,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .call-video-grid {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-videos {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote .remote-videos .video-card,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local #localTile,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) .remote-empty-state {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote #localTile,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local .remote-videos .video-card {
    position: absolute !important;
    left: auto !important;
    top: auto !important;
    right: 24px !important;
    bottom: 104px !important;
    width: clamp(156px, 14vw, 220px) !important;
    height: clamp(206px, 18vw, 280px) !important;
    min-height: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .16) !important;
    z-index: 10 !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call) video {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote .remote-videos .video-card video,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local #localTile video {
    object-fit: contain !important;
  }

  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-remote #localTile video,
  .call-overlay.is-direct-p2p.is-video-call:not(.is-outgoing-call).p2p-main-local .remote-videos .video-card video {
    object-fit: cover !important;
  }

  dialog.status-fullscreen-dialog[open],
  dialog.status-fullscreen-dialog[open] .status-viewer-shell {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  dialog.status-fullscreen-dialog[open] .status-viewer-shell {
    position: relative !important;
    display: block !important;
    background: #000 !important;
  }

  dialog.status-fullscreen-dialog[open] .status-viewer-content,
  dialog.status-fullscreen-dialog[open] .status-viewer-story,
  dialog.status-fullscreen-dialog[open] .status-story-full {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  dialog.status-fullscreen-dialog[open] .status-story-full img,
  dialog.status-fullscreen-dialog[open] .status-story-full video {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: auto !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  dialog.status-fullscreen-dialog[open] .status-viewer-head,
  dialog.status-fullscreen-dialog[open] .status-viewer-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 8 !important;
    pointer-events: auto !important;
  }

  dialog.status-fullscreen-dialog[open] .status-viewer-head {
    top: 0 !important;
  }

  dialog.status-fullscreen-dialog[open] .status-viewer-footer {
    bottom: 0 !important;
  }

  dialog.status-fullscreen-dialog[open] .status-progress {
    z-index: 9 !important;
  }
}