/* ============================================================
   Mobile / Android WebView — last in cascade, all themes
   Keeps headers, chips, composer and send button from overlapping
   ============================================================ */

@media (max-width: 900px) {
  /* Themes used display:grid !important on .chat-pane, which stacked
     the empty "Выберите чат" panel under the chat list. Hide it. */
  html[data-theme] .app-shell:not(.mobile-chat-open) .chat-pane {
    display: none !important;
  }
  html[data-theme] .app-shell.mobile-chat-open .sidebar {
    display: none !important;
  }
  html[data-theme] .app-shell.mobile-chat-open .chat-pane {
    display: grid !important;
    grid-template-rows: auto 1fr auto auto !important;
  }
  html[data-theme] .app-shell.mobile-chat-open.info-open .chat-pane {
    display: none !important;
  }
  html[data-theme] .app-shell.mobile-chat-open.info-open .info-panel {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    width: 100% !important;
    max-width: 100vw !important;
    border-left: 0 !important;
    background: var(--panel) !important;
  }
  html[data-theme] .info-search-block {
    display: block !important;
  }

  html[data-theme] .chat-header-right .btn-msg-search-mobile-hide,
  html[data-theme] #btn-msg-search,
  html[data-theme] #btn-notify {
    display: none !important;
  }
  html[data-theme] .btn-jump-bottom {
    right: 0.75rem !important;
    left: auto !important;
    bottom: 0.75rem !important;
    z-index: 40 !important;
  }

  html[data-theme] .emoji-panel:not(.hidden) {
    max-height: min(52vh, 420px) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html[data-theme] .sticker-grid,
  html[data-theme] .emoji-grid,
  html[data-theme] .anim-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    align-content: start !important;
  }
  html[data-theme] .sticker-grid .emoji-cat,
  html[data-theme] .emoji-grid .emoji-cat {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html[data-theme] .app-shell,
  html[data-theme] .app-shell.info-open {
    padding: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  html[data-theme] .sidebar-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.4rem !important;
    min-width: 0;
  }
  html[data-theme] .sidebar-header .brand-lockup {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden;
  }
  html[data-theme] .sidebar-header .brand {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
  html[data-theme] .sidebar-header .sidebar-actions {
    flex: 0 0 auto !important;
    margin-left: 0.25rem !important;
    position: relative !important;
    z-index: 4 !important;
  }

  /* Decorative Pip-Boy tabs collide with + / logout on phones */
  html[data-theme="fallout"] .sidebar-header::after,
  html[data-theme="fallout"] .chat-header::after {
    display: none !important;
  }

  html[data-theme] .me-chip {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    gap: 0.35rem !important;
  }
  html[data-theme] .me-chip .icon-btn,
  html[data-theme] .me-chip .lock-pill {
    flex: 0 0 auto !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
  html[data-theme] .me-chip-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html[data-theme] .chat-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.4rem !important;
    min-width: 0;
  }
  html[data-theme] .chat-header-left > div:last-child {
    min-width: 0 !important;
    overflow: hidden;
  }
  html[data-theme] #chat-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html[data-theme] .chat-header-right {
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    min-width: 0;
  }
  html[data-theme] .pixel-rpg-hud,
  html[data-theme] .composer-hints,
  html[data-theme] .composer-prompt {
    display: none !important;
  }

  html[data-theme] .composer {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  html[data-theme] .composer-field {
    min-width: 0 !important;
  }
  html[data-theme] .composer-field input,
  html[data-theme] #message-input {
    min-width: 0 !important;
    width: 100% !important;
    padding-left: 0.85rem !important;
  }
  html[data-theme] .send-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    white-space: nowrap;
    overflow: hidden;
  }
  html[data-theme] .send-btn .send-label-pixel {
    display: none !important;
  }
  html[data-theme] .send-btn .send-ico-default {
    display: block !important;
  }
  html[data-theme] .composer::after {
    display: none !important;
  }

  html[data-theme] .filter-chips {
    min-width: 0;
  }
  html[data-theme] .chip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html[data-theme] .messages-stage.has-fallout-art .fallout-art {
    opacity: 0.2;
  }
}

@media (max-width: 420px) {
  html[data-theme] .me-chip .lock-pill {
    display: none !important;
  }
  html[data-theme] .sidebar-header .brand-logo {
    width: 36px !important;
    height: 36px !important;
  }
  html[data-theme] .icon-btn {
    width: 36px !important;
    height: 36px !important;
  }
  html[data-theme] .send-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }
  html[data-theme] .chat-header-right .icon-btn {
    width: 36px !important;
    height: 36px !important;
  }
}