/* Mobile forum performance overrides.
   Loaded last so these rules can flatten expensive forum/topic chrome on phones. */

@media (max-width: 768px) {
  /* Topic list: remove card glows, transforms, and decorative overlays. */
  .sidebar .topic-card,
  .sidebar .topic-card::before,
  .sidebar .topic-card::after,
  .sidebar .topic-card .topic-author-avatar,
  .sidebar .topic-card .reply-count,
  .sidebar .topic-card .reply-count-inline,
  .sidebar .sidebar-search-btn,
  .sidebar .filter-btn,
  .sidebar .forum-tab,
  .sidebar .btn-create-topic {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .sidebar .topic-card {
    background: var(--bg-card, var(--bg-surface, #1f1f22)) !important;
    background-image: none !important;
  }

  .sidebar .topic-card:hover,
  .sidebar .topic-card:active,
  .sidebar .topic-card.bump-flash,
  .sidebar .topic-card.hot:hover,
  .sidebar .sidebar-search-btn:hover,
  .sidebar .sidebar-search-btn:active,
  .sidebar .filter-btn:hover,
  .sidebar .forum-tab:hover,
  .sidebar .btn-create-topic:hover,
  .sidebar .btn-create-topic:active {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  /* Topic header and main forum chrome: solid surfaces only. */
  .main-content.topic-layout .topic-header,
  .main-content.topic-layout .topic-header::before,
  .main-content.topic-layout .topic-header::after,
  .main-content.topic-layout .topic-header.topic-header--frosted,
  .mobile-bottom-nav {
    background: var(--bg-body, #111) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    /* ANDROID FIX: Keep transform transition for smart-nav hide/show.
       Without this, the nav gets stuck at translateY(100%) after scroll. */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .editor-container,
  #reply-form {
    background: var(--bg-body, #111) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Fixed reply form — flatten expensive effects but keep border transition for focus */
  .fixed-reply-form {
    background: var(--bg-body, #111) !important;
    background-image: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: border-color 0.2s ease !important;
  }

  /* Keep editor-wrapper interactive: focus ring + border transitions are cheap */
  .chat-editor-wrapper {
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  .main-content.topic-layout .fixed-reply-form {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s ease !important;
    will-change: transform;
  }


  .main-content.topic-layout #reply-form,
  .main-content.topic-layout #topic-reply-state {
    background: transparent !important;
    background-image: none !important;
  }

  .main-content.topic-layout #reply-form,
  .main-content.topic-layout #topic-reply-state {
    overflow: visible !important;
  }

  .main-content.topic-layout .fixed-reply-form.reply-chrome-no-anim {
    transition: none !important;
  }

  .main-content.topic-layout #topic-reply-state.reply-chrome-no-anim {
    transition: none !important;
  }

  .main-content.topic-layout .topic-header {
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08)) !important;
  }

  .main-content.topic-layout .topic-title,
  .main-content.topic-layout .topic-header h1 {
    text-shadow: none !important;
    transition: none !important;
  }

  /* Buttons in topic view: keep only instant color feedback. */
  .main-content.topic-layout .topic-back-btn,
  .main-content.topic-layout .topic-header .btn-admin,
  #scroll-top-btn,
  #scroll-bottom-btn,
  .main-content.topic-layout .reaction-badge,
  .main-content.topic-layout .reaction-add-btn,
  .main-content.topic-layout .post-actions button,
  .main-content.topic-layout .post-actions a,
  .main-content.topic-layout .post-actions .action-btn {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transform: none !important;
    transition:
      background-color 120ms linear,
      border-color 120ms linear,
      color 120ms linear !important;
  }

  .main-content.topic-layout .topic-back-btn:hover,
  .main-content.topic-layout .topic-back-btn:active,
  .main-content.topic-layout .topic-header .btn-admin:hover,
  .main-content.topic-layout .topic-header .btn-admin:active,
  #scroll-top-btn:hover,
  #scroll-top-btn:active,
  #scroll-bottom-btn:hover,
  #scroll-bottom-btn:active,
  .main-content.topic-layout .reaction-badge:hover,
  .main-content.topic-layout .reaction-badge:focus-visible,
  .main-content.topic-layout .reaction-add-btn:hover,
  .main-content.topic-layout .reaction-add-btn:active,
  .main-content.topic-layout .post-actions button:hover,
  .main-content.topic-layout .post-actions a:hover,
  .main-content.topic-layout .post-actions .action-btn:hover {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  /* Posts: flat surfaces, no glass, no animated chrome. */
  .main-content.topic-layout .post,
  .main-content.topic-layout .post::before,
  .main-content.topic-layout .post::after,
  .main-content.topic-layout .post-header-row,
  .main-content.topic-layout .post-content,
  .main-content.topic-layout .post-signature,
  .main-content.topic-layout .post-reactions,
  .main-content.topic-layout .post-reply-context,
  .main-content.topic-layout .post-poll,
  .main-content.topic-layout .post-separator {
    box-shadow: none !important;
    filter: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .main-content.topic-layout .post,
  .main-content.topic-layout .post:hover,
  .main-content.topic-layout .post.highlight,
  .main-content.topic-layout .post.post-flash-updated,
  .main-content.topic-layout .post.post-flash-staff-edit {
    background: var(--bg-card, var(--bg-surface, #1f1f22)) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  .main-content.topic-layout .post-reply-context,
  .main-content.topic-layout .post-content blockquote {
    background: var(--bg-surface-alt, rgba(255, 255, 255, 0.04)) !important;
    background-image: none !important;
    border-color: var(--border-color, rgba(255, 255, 255, 0.08)) !important;
  }

  .main-content.topic-layout .post-content img,
  .main-content.topic-layout .post-image,
  .main-content.topic-layout .media-grid img,
  .main-content.topic-layout .post-content iframe,
  .main-content.topic-layout .post-content video,
  .main-content.topic-layout .post-content embed,
  .main-content.topic-layout .post-content object,
  .main-content.topic-layout .media-grid-overflow::after {
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .main-content.topic-layout .post-content img:hover,
  .main-content.topic-layout .post-image:hover,
  .main-content.topic-layout .media-grid img:hover {
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  /* Remove premium-only decorative forum/topic artifacts on mobile. */
  .post-hover-pill,
  .gold-particle-canvas,
  .post-aura,
  .context-portal,
  .portal-dim-overlay,
  .semantic-minimap,
  .minimap-tooltip,
  .presence-orbit,
  .liquid-dropzone,
  .thread-weaver-svg,
  .dieu-dechu-watermark,
  .poire-artiste-watermark {
    display: none !important;
  }

  .main-content.topic-layout .post.is-top-violator,
  .main-content.topic-layout .post.is-dieu-dechu,
  .main-content.topic-layout .post.is-poire-artiste,
  .main-content.topic-layout .post.is-poire,
  .main-content.topic-layout .post.is-artist,
  .main-content.topic-layout .post.is-juge-supreme,
  .main-content.topic-layout .post.is-createur {
    background: var(--bg-card, var(--bg-surface, #1f1f22)) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .main-content.topic-layout .post.is-top-violator::before,
  .main-content.topic-layout .post.is-top-violator::after,
  .main-content.topic-layout .post.is-dieu-dechu::before,
  .main-content.topic-layout .post.is-dieu-dechu::after,
  .main-content.topic-layout .post.is-poire-artiste::before,
  .main-content.topic-layout .post.is-poire-artiste::after {
    display: none !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .sidebar .topic-card,
  .main-content.topic-layout .post,
  .main-content.topic-layout .post-content .sticker,
  .main-content.topic-layout .post-content img.sticker,
  .sticker-grid img,
  .sticker-thumb,
  .sticker-tab-btn,
  .inline-sticker-picker .sticker-tab-btn,
  .inline-sticker-thumb {
    -webkit-tap-highlight-color: transparent;
  }

  .sidebar .topic-card:not(.active):hover,
  .sidebar .topic-card:not(.active):active,
  .sidebar .topic-card:not(.active).hot:hover,
  .sidebar .topic-card:not(.active).topic-deleted:hover,
  .sidebar .topic-card:not(.active).topic-noir:hover,
  .sidebar .topic-card:not(.active).topic-werewolf:hover {
    background: var(--bg-card, var(--bg-surface, #1f1f22)) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  .sidebar .topic-card:hover .topic-author-avatar,
  .sidebar .topic-card:active .topic-author-avatar {
    border-color: inherit !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .sidebar .topic-card:hover .topic-card-title,
  .sidebar .topic-card:active .topic-card-title {
    color: inherit !important;
  }

  .sidebar .topic-card:hover .reply-count,
  .sidebar .topic-card:hover .reply-count i,
  .sidebar .topic-card:active .reply-count,
  .sidebar .topic-card:active .reply-count i,
  .sidebar .topic-card:hover .reply-count.hot,
  .sidebar .topic-card:hover .reply-count.hot i,
  .sidebar .topic-card:active .reply-count.hot,
  .sidebar .topic-card:active .reply-count.hot i {
    background: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    opacity: inherit !important;
    transform: none !important;
  }

  .main-content.topic-layout .post:hover,
  .main-content.topic-layout .post:active {
    background: var(--bg-card, var(--bg-surface, #1f1f22)) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  .main-content.topic-layout .post-content .sticker:hover,
  .main-content.topic-layout .post-content .sticker:active,
  .main-content.topic-layout .post-content img.sticker:hover,
  .main-content.topic-layout .post-content img.sticker:active,
  .sticker-grid img:hover,
  .sticker-grid img:active,
  .sticker-thumb:hover,
  .sticker-thumb:active {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    transform: none !important;
    position: static !important;
    z-index: auto !important;
  }

  .inline-sticker-thumb:hover,
  .inline-sticker-thumb:active {
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
    filter: none !important;
    outline: none !important;
    transform: none !important;
    position: static !important;
    z-index: auto !important;
  }

  .sticker-tab-btn:not(.active):hover,
  .sticker-tab-btn:not(.active):active,
  .inline-sticker-picker .sticker-tab-btn:not(.active):hover,
  .inline-sticker-picker .sticker-tab-btn:not(.active):active {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted) !important;
    filter: none !important;
    transform: none !important;
  }
}