/* STS Android browser / PWA polish
   Loaded for everyone, only activates when android.js adds .android-device
   or when the viewport is phone sized. */

:root{
  --android-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.android-device,
.android-device body{
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

.android-device body{
  min-width: 0 !important;
  overflow-x: hidden !important;
  padding-bottom: calc(72px + var(--android-safe-bottom));
}

.android-device .page,
.android-device .v5-page,
.android-device main,
.android-device .dashboard-shell,
.android-device .dashboard-main,
.android-device .watch-page,
.android-device .browse-page,
.android-device .profile-page{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

/* Top nav becomes app-like */
.android-device .tw-topbar,
.android-device .sts-glass-nav{
  position: sticky;
  top: 0;
  z-index: 9000;
  height: auto !important;
  min-height: 62px;
  padding: 8px 10px !important;
  gap: 8px !important;
  overflow: visible !important;
}

.android-device .sts-nav-left{
  min-width: 0 !important;
  gap: 8px !important;
}

.android-device .sts-brand-card,
.android-device .tw-logo{
  width: 82px !important;
  min-width: 82px !important;
  height: 50px !important;
  padding: 6px !important;
}

.android-device .sts-brand-card strong{
  font-size: 20px !important;
}

.android-device .sts-brand-card small{
  font-size: 7px !important;
}

.android-device .sts-icon-nav,
.android-device .tw-main-nav{
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px !important;
  padding: 7px 8px calc(7px + var(--android-safe-bottom)) !important;
  background: rgba(6, 8, 14, .96) !important;
  border-top: 1px solid rgba(68,255,22,.35) !important;
  box-shadow: 0 -14px 40px rgba(0,0,0,.55), 0 0 22px rgba(153,62,255,.18) !important;
  backdrop-filter: blur(16px);
  overflow: hidden !important;
}

.android-device .sts-icon-nav a,
.android-device .tw-main-nav a{
  min-width: 0 !important;
  width: 100% !important;
  height: 54px !important;
  border-radius: 16px !important;
  padding: 6px 4px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 10px !important;
  white-space: nowrap;
}

.android-device .sts-icon-nav a:nth-child(n+6),
.android-device .tw-main-nav a:nth-child(n+6){
  display: none !important;
}

.android-device .nav-ico{
  font-size: 18px !important;
  line-height: 1;
}

.android-device .sts-nav-search,
.android-device .tw-search{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

.android-device .sts-nav-search input,
.android-device .tw-search input{
  height: 42px !important;
  font-size: 14px !important;
  padding: 0 12px !important;
}

.android-device .sts-user-actions,
.android-device .tw-actions{
  gap: 6px !important;
  flex: 0 0 auto !important;
}

.android-device .sts-user-actions .tw-btn:not(.primary),
.android-device .sts-user-actions .notification-bell-wrap,
.android-device .sts-user-actions .admin-menu-wrap,
.android-device .sts-user-actions form{
  display: none !important;
}

.android-device .sts-nav-profile{
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
}

.android-device .tw-btn.primary{
  height: 42px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}

/* Stream/watch page: player first, chat below */
.android-device .watch-layout,
.android-device .stream-layout,
.android-device .player-chat-layout{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.android-device .stream-player,
.android-device .player-card,
.android-device .video-shell,
.android-device .watch-player,
.android-device video{
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9;
  min-height: 0 !important;
  border-radius: 16px !important;
}

.android-device .chat-panel,
.android-device .stream-chat,
.android-device .chat-card{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: min(58vh, 560px) !important;
  max-height: 560px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.android-device .chat-messages,
.android-device #chatMessages{
  max-height: calc(100% - 112px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px !important;
}

.android-device .chat-message,
.android-device .message-row{
  max-width: 100% !important;
  overflow: visible !important;
  padding: 9px 10px !important;
  border-radius: 14px !important;
}

.android-device .chat-message-header,
.android-device .message-head{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.android-device .message-menu,
.android-device .chat-context-menu,
.android-device .reaction-popover{
  position: fixed !important;
  z-index: 20000 !important;
  max-width: calc(100vw - 18px) !important;
}

.android-device .chat-input-row,
.android-device .chat-form{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  padding: 9px !important;
}

.android-device .chat-input-row input,
.android-device .chat-form input,
.android-device #chatInput{
  min-width: 0 !important;
  height: 46px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
}

.android-device .chat-input-row button,
.android-device .chat-form button{
  height: 46px !important;
  border-radius: 14px !important;
  padding: 0 16px !important;
}

.android-device .chat-reactions,
.android-device .avatar-reaction-popover{
  max-width: min(320px, calc(100vw - 22px)) !important;
  padding: 7px !important;
  border-radius: 16px !important;
  gap: 5px !important;
  overflow: visible !important;
}

.android-device .chat-reactions button,
.android-device .avatar-reaction-popover button{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 11px !important;
  font-size: 18px !important;
}

/* Browse / creators / categories */
.android-device .creator-grid,
.android-device .stream-grid,
.android-device .cards-grid,
.android-device .featured-creators-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}

.android-device .creator-card,
.android-device .stream-card,
.android-device .category-card{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.android-device .live-categories,
.android-device .categories-row,
.android-device .category-row,
.android-device .sts-category-row{
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px !important;
}

.android-device .live-categories > *,
.android-device .categories-row > *,
.android-device .category-row > *,
.android-device .sts-category-row > *{
  flex: 0 0 78% !important;
  max-width: 320px !important;
  scroll-snap-align: start;
}

/* Dashboard becomes clean phone cards */
.android-device .dashboard-layout,
.android-device .creator-dashboard-layout,
.android-device .dash-shell{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 10px !important;
  overflow: hidden !important;
}

.android-device .dashboard-sidebar,
.android-device .creator-sidebar,
.android-device .dash-sidebar{
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 18px !important;
}

.android-device .dashboard-sidebar nav,
.android-device .creator-sidebar nav,
.android-device .dash-sidebar nav{
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}

.android-device .dashboard-sidebar a,
.android-device .creator-sidebar a,
.android-device .dash-sidebar a{
  flex: 0 0 auto !important;
  padding: 10px 12px !important;
  border-radius: 13px !important;
}

.android-device .dashboard-hero,
.android-device .creator-hero,
.android-device .dash-hero{
  min-height: auto !important;
  padding: 22px 16px !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

.android-device .dashboard-hero h1,
.android-device .creator-hero h1,
.android-device .dash-hero h1{
  font-size: clamp(34px, 12vw, 56px) !important;
  line-height: .95 !important;
  word-break: break-word;
}

.android-device .stats-grid,
.android-device .dashboard-stats,
.android-device .creator-stat-grid,
.android-device .quick-actions,
.android-device .dashboard-cards,
.android-device .creator-tools-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

.android-device .dashboard-card,
.android-device .stat-card,
.android-device .tool-card,
.android-device .panel-card{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  border-radius: 18px !important;
}

.android-device canvas,
.android-device svg,
.android-device img{
  max-width: 100%;
}

/* Forms */
.android-device input,
.android-device select,
.android-device textarea,
.android-device button{
  font-size: 16px;
}

.android-device .auth-card,
.android-device .form-card,
.android-device .account-card,
.android-device .settings-card{
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 20px !important;
}

@media (max-width: 768px){
  body:not(.android-device){
    overflow-x: hidden;
  }
  body:not(.android-device) .tw-topbar{
    flex-wrap: wrap;
  }
  body:not(.android-device) .watch-layout,
  body:not(.android-device) .stream-layout,
  body:not(.android-device) .dashboard-layout{
    display: flex;
    flex-direction: column;
  }
  body:not(.android-device) .creator-grid,
  body:not(.android-device) .stream-grid,
  body:not(.android-device) .stats-grid{
    grid-template-columns: 1fr !important;
  }
}

/* v5.6.72 - compact Android watch mode
   Goal: keep the stream and chat usable on a phone instead of giant desktop panels. */
.android-device body{
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.android-device .v53-watch,
.android-device .v586-watch-match,
.android-device body.streamx-v5 .v53-watch,
.android-device body.streamx-v5.twitch-v53 .v53-watch{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.android-device .v53-watch-main,
.android-device body.streamx-v5 .v53-watch-main,
.android-device body.streamx-v5.twitch-v53 .v53-watch-main{
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.android-device .v53-player,
.android-device body.streamx-v5.twitch-v53 .v53-player,
.android-device .mobile-webrtc-player,
.android-device .mobile-viewer-player{
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  max-height: 32vh !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  margin: 0 !important;
}

.android-device .v53-player video,
.android-device .v53-player img,
.android-device .mobile-webrtc-player video,
.android-device .mobile-viewer-player img{
  width: 100% !important;
  height: 100% !important;
  max-height: 32vh !important;
  object-fit: contain !important;
}

.android-device .v586-offline-hero{
  min-height: 32vh !important;
  padding: 18px 14px !important;
  border-radius: 0 !important;
}

.android-device .v586-offline-hero h2{
  font-size: 24px !important;
  line-height: 1 !important;
}

.android-device .v53-player-badges{
  top: 6px !important;
  left: 6px !important;
  right: 6px !important;
  font-size: 10px !important;
}

.android-device .v53-stream-info,
.android-device .v586-channel-info-row{
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

.android-device .v53-stream-info .avatar.big,
.android-device .v586-channel-info-row .avatar.big{
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  font-size: 13px !important;
}

.android-device .v53-stream-info h1,
.android-device .v586-channel-info-row h1{
  font-size: 16px !important;
  line-height: 1.15 !important;
  margin: 0 0 3px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.android-device .v53-stream-info p,
.android-device .v586-channel-info-row p,
.android-device .v53-stream-info small,
.android-device .v586-channel-info-row small{
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.android-device .tag-row,
.android-device .v586-watch-goals,
.android-device .channel-about,
.android-device .v586-watch-panels,
.android-device .v586-watch-server-list,
.android-device .pro-stream-actions,
.android-device .v586-channel-actions{
  display: none !important;
}

.android-device .chat-panel.upgraded,
.android-device .v53-chat,
.android-device body.streamx-v5.twitch-v53 .chat-panel,
.android-device .chat-panel.upgraded.v55-chat-ref{
  position: relative !important;
  top: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: calc((var(--sts-vh, 1vh) * 100) - 32vh - 126px) !important;
  min-height: 320px !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.android-device .chat-head,
.android-device .v55-chat-head{
  min-height: 42px !important;
  padding: 7px 9px !important;
  gap: 8px !important;
}

.android-device .v55-chat-title strong{
  font-size: 13px !important;
}

.android-device .v55-chat-title small,
.android-device .v55-chat-count,
.android-device .v55-chat-strip{
  font-size: 10px !important;
}

.android-device .v55-chat-strip{
  padding: 5px 9px !important;
  min-height: 24px !important;
}

.android-device .chat-head-glyph-btn{
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
}

.android-device .chat-messages,
.android-device #chatMessages,
.android-device .pro-messages{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding: 7px 8px !important;
  gap: 5px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.android-device .chat-line,
.android-device .pro-message{
  display: grid !important;
  grid-template-columns: 30px 1fr !important;
  gap: 7px !important;
  padding: 6px 7px !important;
  border-radius: 12px !important;
  min-width: 0 !important;
}

.android-device .chat-avatar-mini{
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  font-size: 11px !important;
}

.android-device .chat-bubble{
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.android-device .chat-meta{
  gap: 4px !important;
  min-height: 20px !important;
}

.android-device .chat-name,
.android-device .chat-name-link{
  font-size: 12px !important;
  max-width: 112px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.android-device .badge,
.android-device .chat-badge,
.android-device .sts-badge{
  transform: scale(.82) !important;
  transform-origin: left center !important;
}

.android-device .inline-mod-menu summary{
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  font-size: 12px !important;
}

.android-device .sts-message-reactions{
  margin-top: 4px !important;
  gap: 4px !important;
}

.android-device .sts-message-reaction-pill{
  min-height: 22px !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

.android-device .v53-emote-strip,
.android-device #emoteTray{
  flex: 0 0 auto !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 5px 7px !important;
  gap: 5px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.android-device .v53-emote-strip .emote-pick,
.android-device #emoteTray .emote-pick{
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 4px !important;
  border-radius: 10px !important;
}

.android-device .v53-emote-strip .emote-pick img,
.android-device #emoteTray .emote-pick img{
  width: 24px !important;
  height: 24px !important;
}

.android-device .v53-emote-strip .emote-pick span,
.android-device #emoteTray .emote-pick span{
  display: none !important;
}

.android-device .chat-form,
.android-device .pro-chat-form{
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 64px !important;
  gap: 6px !important;
  padding: 7px 8px calc(7px + var(--android-safe-bottom)) !important;
  min-height: 52px !important;
}

.android-device .chat-wave-btn,
.android-device .chat-form button:first-child{
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  font-size: 16px !important;
}

.android-device .chat-form input,
.android-device #chatInput{
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 12px !important;
  font-size: 14px !important;
}

.android-device .chat-form button:last-child{
  height: 38px !important;
  min-width: 64px !important;
  padding: 0 9px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

.android-device .chat-login-required,
.android-device .chat-locked{
  padding: 10px !important;
  font-size: 12px !important;
}

.android-device .avatar-reaction-popover,
.android-device .reaction-popover{
  max-width: 278px !important;
  padding: 6px !important;
  border-radius: 14px !important;
  gap: 4px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.6) !important;
}

.android-device .avatar-reaction-popover button,
.android-device .reaction-popover button{
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 9px !important;
  font-size: 16px !important;
}

@media (orientation: landscape) and (max-height: 540px){
  .android-device .v53-watch,
  .android-device .v586-watch-match{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(260px,34vw) !important;
    height: calc(var(--sts-vh, 1vh) * 100) !important;
  }
  .android-device .v53-watch-main{
    height: 100% !important;
  }
  .android-device .v53-player{
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  .android-device .v53-stream-info,
  .android-device .v586-channel-info-row{
    display: none !important;
  }
  .android-device .chat-panel.upgraded,
  .android-device .v53-chat,
  .android-device .chat-panel.upgraded.v55-chat-ref{
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    border-left: 1px solid rgba(83,252,24,.35) !important;
  }
}