/* STS v5.6.234 - Mobile browser live, watch + chat refresh */
@media (max-width: 860px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
    background: #050507 !important;
  }

  .tw-topbar.sts-glass-nav,
  .sts-mockup-header {
    position: sticky;
    top: 0;
    z-index: 5000;
    min-height: 58px;
    padding: 8px 10px !important;
    gap: 8px;
    background: rgba(5,5,7,.96) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(16px);
  }

  .sts-mock-brand img { max-width: 128px !important; height: auto !important; }
  .sts-mock-nav { display: none !important; }
  .sts-mock-search { display: none !important; }
  .sts-account-name, .sts-account-caret { display: none !important; }
  .sts-account-menu-button { min-width: 42px !important; padding: 4px !important; }

  .v53-watch,
  .v586-watch-match {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    min-height: 100dvh;
    padding: 0 !important;
    background: #050507 !important;
  }

  .v53-watch-main {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 10px 92px !important;
  }

  .v53-player {
    position: sticky !important;
    top: 58px !important;
    z-index: 1000;
    width: calc(100vw - 20px) !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 8px auto 10px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #000 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 16px 46px rgba(0,0,0,.55) !important;
  }

  .v53-player video,
  .v53-player iframe,
  .mobile-viewer-player,
  .mobile-webrtc-player,
  .mobile-viewer-player img,
  .mobile-webrtc-player video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: #000 !important;
  }

  .v53-player-badges {
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    gap: 6px !important;
  }

  .v53-player-badges span,
  .v53-live,
  .v53-viewers {
    font-size: 11px !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
  }

  .sts-player-widgets,
  .purple-native-player-note {
    display: none !important;
  }

  .v53-stream-info,
  .v586-channel-info-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin: 10px 0 !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: #0b0b10 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }

  .v53-channel-line,
  .v586-channel-line {
    gap: 10px !important;
    align-items: flex-start !important;
  }

  .v53-channel-line h1 {
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
  }

  .avatar.big { width: 46px !important; height: 46px !important; min-width: 46px !important; }
  .tag-row { display: flex !important; overflow-x: auto !important; padding-bottom: 2px !important; }

  .v53-stream-actions,
  .pro-stream-actions,
  .v586-channel-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .watch-action-btn,
  .v53-stream-actions form,
  .v53-stream-actions button,
  .v53-stream-actions a {
    width: 100% !important;
    min-height: 42px !important;
    justify-content: center !important;
  }

  .sts-paypal-support,
  .sts-chat-announcements,
  .v53-extra-info,
  .related-streams,
  .sts-reaction-overlay {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .chat-panel,
  .v53-chat,
  .v55-chat-ref {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: min(72dvh, 620px) !important;
    z-index: 7000 !important;
    transform: translateY(calc(100% - 58px));
    transition: transform .22s ease;
    border-radius: 18px 18px 0 0 !important;
    background: #07070a !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 -20px 60px rgba(0,0,0,.75) !important;
    overflow: hidden !important;
  }

  body.sts-mobile-chat-open .chat-panel,
  body.sts-mobile-chat-open .v53-chat,
  body.sts-mobile-chat-open .v55-chat-ref {
    transform: translateY(0) !important;
  }

  .chat-head,
  .v55-chat-head,
  .sts102-chat-head {
    min-height: 58px !important;
    cursor: pointer;
    background: #0b0b10 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .chat-messages,
  .pro-messages {
    height: calc(72dvh - 210px) !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding-bottom: 8px !important;
  }

  .v53-emote-strip,
  #emoteTray {
    max-height: 58px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding: 8px !important;
  }

  .chat-form,
  .pro-chat-form {
    display: grid !important;
    grid-template-columns: 42px 1fr 42px 72px !important;
    gap: 6px !important;
    padding: 8px !important;
    background: #050507 !important;
  }

  .chat-form input,
  #chatInput {
    min-width: 0 !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    background: #101016 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
  }

  .chat-form button,
  .chat-wave-btn,
  .chat-owned-emotes-btn {
    height: 42px !important;
    min-width: 0 !important;
    border-radius: 12px !important;
  }

  .sts-mobile-chat-toggle {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 7100;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: #101016;
    color: #fff;
    font-weight: 900;
    letter-spacing: .02em;
    box-shadow: 0 16px 42px rgba(0,0,0,.65);
    border: 1px solid rgba(255,255,255,.12);
  }

  body.sts-mobile-chat-open .sts-mobile-chat-toggle {
    bottom: calc(min(72dvh, 620px) + 10px);
    left: auto;
    right: 12px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  body.sts-mobile-chat-open .sts-mobile-chat-toggle .sts-mobile-chat-text { display: none; }
  body.sts-mobile-chat-open .sts-mobile-chat-toggle::after { content: '×'; font-size: 24px; }

  .mobile-live-hero,
  .mobile-live-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .mobile-live-hero {
    margin: 0 !important;
    background: #07070a !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }

  .mobile-live-hero h1 { font-size: 28px !important; line-height: 1.05 !important; }
  .mobile-live-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }

  .phone-broadcast-panel,
  .mobile-live-help,
  .mobile-live-chat-card {
    width: 100% !important;
    border-radius: 16px !important;
    background: #0b0b10 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }

  .phone-preview-frame {
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    max-height: 62dvh !important;
    border-radius: 16px !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  #mobilePreview {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .phone-control-row,
  .mobile-camera-tools {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .phone-control-row .v53-btn,
  .mobile-camera-tools .v53-btn,
  .mobile-camera-tools select,
  .mobile-live-actions .v53-btn {
    min-height: 46px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .mobile-live-chat-card {
    padding: 10px !important;
  }

  .mobile-live-chat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 4px 2px 10px;
  }

  .mobile-live-chat-head strong { color: #fff; }
  .mobile-live-chat-head span { color: #9dff7a; font-weight: 900; font-size: 12px; }
  .mobile-live-chat-frame {
    width: 100%;
    height: 420px;
    border: 0;
    border-radius: 14px;
    background: #050507;
  }
}