/* Keep mobile voice playback and its transcript on one shared surface. */
@layer nextiVoiceLayout {
  @media (max-width: 767px), (pointer: coarse) and (max-device-width: 767px), (pointer: coarse) and (max-device-height: 767px) {
    .tg-chat-container:not(.is-desktop) .tg-chat-container__audio-card.is-voice {
      --nx-voice-surface: var(--mobile-theme-incoming, #132a42);
      box-sizing: border-box !important;
      background: var(--nx-voice-surface) !important;
      color: var(--mobile-theme-text, #edf6ff) !important;
      border: 1px solid var(--mobile-theme-line, #75acc32c) !important;
      border-radius: 14px !important;
      box-shadow: 0 2px 8px var(--mobile-theme-shadow, #00000018) !important;
      padding: 0 !important;
      min-width: 0 !important;
      isolation: isolate;
    }

    .tg-chat-container:not(.is-desktop) .tg-chat-container__message.is-mine .tg-chat-container__audio-card.is-voice {
      --nx-voice-surface: var(--mobile-theme-outgoing, #0a684f);
    }

    .tg-chat-container:not(.is-desktop) .tg-chat-container__audio-card.is-voice .tg-chat-container__voice-shell {
      background: transparent !important;
      border: 0 !important;
      border-radius: 13px !important;
      box-shadow: none !important;
      padding: 10px 12px !important;
    }

    .tg-chat-container:not(.is-desktop) .tg-chat-container__audio-card.is-voice .tg-chat-container__voice-transcript {
      box-sizing: border-box !important;
      width: auto !important;
      max-width: 100% !important;
      margin: 0 12px !important;
      padding: 9px 0 11px !important;
      background: transparent !important;
      border: 0 !important;
      border-top: 1px solid var(--mobile-theme-line, #75acc32c) !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      color: inherit !important;
      overflow-wrap: anywhere;
      white-space: pre-wrap;
      line-height: 1.45;
    }

    .tg-chat-container:not(.is-desktop) .tg-chat-container__audio-card.is-voice .tg-chat-container__voice-transcript.is-error {
      color: var(--mobile-theme-danger, #ff9da9) !important;
    }

    /* Text messages need only the height of their metadata, not the voice reaction slot. */
    .tg-chat-container:not(.is-desktop) .tg-chat-container__message:is(.variant-default,.variant-reply,.variant-forwarded):not(.has-attachments):not(.is-emoji-only) > .tg-chat-container__message-body > .tg-chat-container__message-footer {
      height: auto !important;
      min-height: 14px !important;
      max-height: none !important;
    }

    .tg-chat-container:not(.is-desktop) .tg-chat-container__message.variant-default:not(.has-attachments):not(.is-emoji-only) > .tg-chat-container__message-body {
      padding: 5px 10px 4px !important;
    }

    .tg-chat-container:not(.is-desktop).is-compact-appearance .tg-chat-container__message.variant-default:not(.has-attachments):not(.is-emoji-only) > .tg-chat-container__message-body {
      padding: 4px 8px 3px !important;
    }

    .tg-chat-container:not(.is-desktop) .tg-chat-container__message.variant-default:not(.has-attachments):not(.is-emoji-only) > .tg-chat-container__message-body > .tg-chat-container__meta {
      margin-bottom: 3px !important;
    }

    /* The footer occupies the same space with zero, one or many reactions. */
    .tg-chat-container:not(.is-desktop) .tg-chat-container__message-footer {
      box-sizing: border-box !important;
      height: 28px !important;
      min-height: 28px !important;
      max-height: 28px !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 5px !important;
    }

    .tg-chat-container:not(.is-desktop) .tg-chat-container__message-footer > :not(.tg-chat-container__reactions) {
      flex: 0 0 auto !important;
      white-space: nowrap !important;
    }

    .tg-chat-container:not(.is-desktop) .tg-chat-container__message-footer .tg-chat-container__reactions {
      box-sizing: border-box !important;
      flex: 0 1 auto !important;
      min-width: 0 !important;
      max-width: 100% !important;
      height: 28px !important;
      flex-wrap: nowrap !important;
      justify-content: flex-start !important;
      align-items: center !important;
      gap: 4px !important;
      margin: 0 auto 0 0 !important;
      overflow: auto hidden !important;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .tg-chat-container:not(.is-desktop) .tg-chat-container__message-footer .tg-chat-container__reactions::-webkit-scrollbar {
      display: none;
    }

    .tg-chat-container:not(.is-desktop) .tg-chat-container__message-footer .tg-chat-container__reaction-pill {
      flex: 0 0 auto !important;
      box-sizing: border-box !important;
      height: 25px !important;
      margin-block: 0 !important;
    }
  }
}