/* v2.6.2.1 — targeted ONLY fixes on top of the exact v2.6.2 mobile baseline.
   Scope: (1) real three-dot popup, (2) hide app-module bottom nav inside chat,
   (3) composer layout: + / emoji / text / camera / mic-or-send.
   No other v2.6.2 visual rules are changed. */

@media (max-width: 720px) {
  /* 1) A chat should own the full viewport. Hide the app-module nav ONLY while
     a chat is open; list/admin pages keep the original v2.6.2 nav unchanged. */
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active > #main-nav.nav.td-mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active #app-view.app {
    padding-bottom: 0 !important;
  }
  html[data-theme="whatsapp"] body[data-build="0.8.11"][data-targeted-mobile-release="2.6.2.1"].mobile-chat-active .chat-panel.mobile-open {
    bottom: 0 !important;
  }

  /* 2) Composer: flatten the existing nested controls into one compact row,
     matching the user's v2.6.2 target reference. The DOM and send logic stay
     untouched. */
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active .composer {
    padding: 6px 8px max(8px, env(safe-area-inset-bottom)) !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active .composer-input-shell {
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 6px 5px 8px !important;
    border-radius: 27px !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active .composer-bottom-bar,
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active .composer-tools,
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active .composer-actions {
    display: contents !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active #attach-button { order: 1 !important; }
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active #emoji-button { order: 2 !important; }
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active #quick-reply-button {
    display: none !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active #message-input {
    order: 3 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    max-height: 108px !important;
    padding: 7px 7px !important;
    font-size: 15.5px !important;
    line-height: 1.35 !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active #camera-gesture-button {
    order: 4 !important;
    flex: 0 0 34px !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active #message-send,
  html[data-theme="whatsapp"] body[data-targeted-mobile-release="2.6.2.1"].mobile-chat-active #voice-button {
    order: 5 !important;
    flex: 0 0 42px !important;
  }

  /* 3) Real three-dot popup. This is an extra layer only; it does not restyle
     the v2.6.2 chat header. */
  .td-v2621-chat-menu {
    position: fixed !important;
    z-index: 5000 !important;
    width: min(218px, calc(100vw - 24px)) !important;
    padding: 6px !important;
    border: 1px solid #e1e6e8 !important;
    border-radius: 13px !important;
    background: #fff !important;
    color: #111b21 !important;
    box-shadow: 0 10px 30px rgba(11,20,26,.18) !important;
    overflow: hidden !important;
  }
  .td-v2621-chat-menu.hidden { display: none !important; }
  .td-v2621-chat-menu button {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #111b21 !important;
    font: inherit !important;
    font-size: 15px !important;
    font-weight: 550 !important;
    text-align: left !important;
    touch-action: manipulation !important;
  }
  .td-v2621-chat-menu button:active,
  .td-v2621-chat-menu button:focus-visible {
    background: #f0f2f5 !important;
    outline: none !important;
  }
  .td-v2621-chat-menu .td-v2621-menu-icon {
    width: 24px !important;
    flex: 0 0 24px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #008069 !important;
    font-size: 19px !important;
  }
}


/* v2.6.2.2 — targeted additions ONLY on top of v2.6.2.1:
   A) compact WhatsApp-like mobile video preview,
   B) persistent FORWARD icon for text/image/video/file/contact messages,
   C) long-press quick reaction bar is handled in app.js,
   D) three-dot menu rows become invoice / translation / auto-service. */
@media (max-width: 720px) {
  /* A) Portrait videos should not consume the whole chat viewport. The preview
     is intentionally cropped like WhatsApp's compact media card. */
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .bubble:has(> video.chat-history-video) {
    width: auto !important;
    max-width: min(74vw, 320px) !important;
    overflow: visible !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] video.chat-history-video {
    display: block !important;
    width: min(72vw, 310px) !important;
    height: min(72vw, 310px) !important;
    max-width: min(72vw, 310px) !important;
    max-height: min(72vw, 310px) !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 10px !important;
  }

  /* B) Mobile: keep exactly one lightweight forward shortcut beside every
     non-revoked bubble. Reaction icon itself stays hidden; long-press opens the
     emoji strip instead, matching the requested WhatsApp mobile behavior. */
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .message-row .bubble {
    overflow: visible !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .message-row .message-quick-actions {
    position: absolute !important;
    z-index: 30 !important;
    top: 50% !important;
    right: -42px !important;
    left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(-50%) !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .message-row.outbound .message-quick-actions {
    right: auto !important;
    left: -42px !important;
    flex-direction: row !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .message-quick-actions .message-quick-reaction {
    display: none !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .message-quick-actions .message-quick-forward {
    position: static !important;
    inset: auto !important;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(17,27,33,.08) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: #54656f !important;
    box-shadow: 0 1px 4px rgba(11,20,26,.18) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    touch-action: manipulation !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .message-quick-actions .message-quick-forward svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* C) Quick reaction strip generated by app.js after long-press. */
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .td-quick-reaction-bar {
    z-index: 5200 !important;
    min-height: 46px !important;
    padding: 4px 7px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 10px 30px rgba(11,20,26,.22) !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .td-quick-reaction-bar button {
    min-width: 38px !important;
    height: 38px !important;
    font-size: 22px !important;
    border-radius: 19px !important;
  }

  /* D) Updated three-dot popup controls. */
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .td-v2621-chat-menu {
    width: min(286px, calc(100vw - 24px)) !important;
    padding: 7px !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .td-v2621-chat-menu button {
    min-height: 52px !important;
    gap: 10px !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .td-v2621-menu-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .td-v2621-menu-switch {
    width: 43px !important;
    height: 25px !important;
    flex: 0 0 43px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px !important;
    border-radius: 999px !important;
    background: #d4dbe0 !important;
    transition: background .15s ease !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .td-v2621-menu-switch i {
    width: 21px !important;
    height: 21px !important;
    display: block !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.18) !important;
    transform: translateX(0) !important;
    transition: transform .15s ease !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .td-v2621-toggle-row.is-on .td-v2621-menu-switch {
    background: #00a884 !important;
  }
  html[data-theme="whatsapp"] body[data-targeted-media-release="2.6.2.2"] .td-v2621-toggle-row.is-on .td-v2621-menu-switch i {
    transform: translateX(18px) !important;
  }
}