/* Shared touch-first shell for the mobile website and Telegram Mini App. */
@media (max-width: 800px) {
  html { height: 100%; }
  body {
    min-height: 100dvh;
    overscroll-behavior-x: none;
    -webkit-tap-highlight-color: transparent;
    background: #10151f !important;
  }
  .aurora, .grain, .light-beam { display: none !important; }
  button, select, input, textarea { touch-action: manipulation; }
  input, select, textarea { font-size: 16px !important; }
  .app-header {
    position: sticky !important;
    top: 0;
    z-index: 90;
    background: #151b27 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .header-shell { min-height: 48px; gap: 6px; }
  .app-header .brand-logo,
  .app-header .header-actions .header-action-btn[onclick*="openDesignSettingsModal"],
  .app-header .plan-pill { display: none !important; }
  .app-header .header-left { flex: 0 0 auto; }
  .header-center { min-width: 0; flex: 1; }
  .header-chat-title-text { max-width: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
  body:has(.mobile-nav .m-tab:not([data-tab="chat"]).active) .header-chat-title-text {
    font-size: 0 !important;
  }
  body:has(.mobile-nav .m-tab:not([data-tab="chat"]).active) .header-chat-title-text::after {
    font-size: 14px;
    letter-spacing: .01em;
  }
  body:has(.mobile-nav .m-tab[data-tab="images"].active) .header-chat-title-text::after { content: "Арт-студия"; }
  body:has(.mobile-nav .m-tab[data-tab="community"].active) .header-chat-title-text::after { content: "Сообщество"; }
  body:has(.mobile-nav .m-tab[data-tab="plans"].active) .header-chat-title-text::after { content: "Тарифы"; }
  body:has(.mobile-nav .m-tab[data-tab="dashboard"].active) .header-chat-title-text::after { content: "Мой Flux"; }
  .sidebar-toggle-btn, .header-action-btn { min-width: 42px !important; min-height: 42px !important; border-radius: 14px !important; }
  .header-actions { gap: 4px !important; }
  .header-actions .plan-pill { padding-inline: 7px !important; }
  .shell { padding-left: 0 !important; padding-right: 0 !important; }
  .tab-panel:not(#panel-chat) { padding: 12px 12px 0; animation: flux-mobile-enter .2s ease-out both; }
  .tab-panel:not(#panel-chat) .card {
    border-radius: 20px;
    background: #1a2230 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  #panel-chat .chat-window-card {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  #panel-chat .chat-top-bar {
    margin: 4px 12px 0;
    padding: 5px 8px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 17px !important;
    background: #1a2230 !important;
    box-shadow: none !important;
  }
  #panel-chat .chat-character-bar { margin: 4px 12px 0 !important; border-radius: 16px !important; }
  #panel-chat .chat-messages-container {
    padding: 12px 15px !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  #panel-chat .chat-chips-carousel { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #panel-chat .chat-chips-carousel::-webkit-scrollbar { display: none; }
  #panel-chat .chat-composer-form {
    margin: 6px 10px 0 !important;
    padding: 7px !important;
    gap: 5px !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 22px !important;
    background: #252e3d !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  #panel-chat .chat-composer-form textarea { min-height: 44px !important; max-height: 140px !important; line-height: 1.4; resize: none; }
  #panel-chat .chat-composer-form .icon-btn,
  #panel-chat .chat-composer-form .send-btn { min-width: 44px !important; min-height: 44px !important; flex: 0 0 44px; border-radius: 15px !important; }
  #panel-chat .chat-composer-form .send-btn { box-shadow: none !important; }
  body:not(.hide-bottom-bar):not(.keyboard-open) .mobile-nav.flux-dock {
    width: calc(100% - 16px) !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
    gap: 0 !important;
    padding: 4px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 22px !important;
    background: #222b39 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .mobile-nav.flux-dock .dock-main,
  .mobile-nav.flux-dock .dock-profile {
    border: 0 !important;
    border-radius: 17px !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .mobile-nav.flux-dock .dock-main::before,
  .mobile-nav.flux-dock .dock-profile::before { display: none !important; }
  .mobile-nav.flux-dock .m-tab { color: #b1beca !important; }
  .mobile-nav.flux-dock .m-tab.active,
  .mobile-nav.flux-dock .m-tab.dock-profile.active {
    color: #87e7d0 !important;
    background: #294c50 !important;
    box-shadow: none !important;
  }
  .mobile-nav.flux-dock .m-tab.active .m-lbl { color: #87e7d0 !important; }
  .mobile-nav.flux-dock .m-tab.dock-profile { flex-basis: 70px !important; width: 70px !important; height: 62px !important; }
  .card::before, .card::after, .liquid-glass::before, .preset-glow { display: none !important; }
  .card, .btn, .chat-chip, .liquid-glass, .art-preset-card {
    box-shadow: none !important;
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .art-preset-card,
  .liquid-glass {
    background: #202b3a !important;
    border: 1px solid rgba(255,255,255,.11) !important;
  }
  .art-preset-card:active { background: #2b3c4c !important; }
  #imageForm .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
  #imageForm input[type="file"] {
    width: 100%;
    max-width: 100%;
    padding: 8px;
    color: #c9d5df;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: #202b3a;
  }
  #imageForm input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 9px 12px;
    color: #d9fbf2;
    border: 0;
    border-radius: 10px;
    background: #315b5c;
  }
  .modal-card {
    background: #202838 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .modal-backdrop:not(.hidden) .modal-card { padding-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important; }
  .mobile-nav.flux-dock .m-tab:focus-visible,
  .sidebar-toggle-btn:focus-visible,
  .header-action-btn:focus-visible,
  .send-btn:focus-visible { outline: 2px solid #80ead6; outline-offset: 2px; }
  @keyframes flux-mobile-enter {
    from { opacity: .78; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  .tab-panel:not(#panel-chat) { animation: none; }
}