/* StormTube Channel Mobile v2
 * Mobile-first channel profile. Preserve desktop two-column watch layout and
 * existing HLS/IMA/VAST/chat logic. No player DOM replacement. */
.st-channel-chat-expand{display:none}
@media(max-width:900px){
 body.watching .content{padding:0 0 86px}
 body.watching .watch-layout{display:flex!important;flex-direction:column;gap:0;align-items:stretch;min-width:0;overflow:visible}
 body.watching .watch-layout>.watch-main{display:contents}
 body.watching .watch-layout .player-wrap{
   order:1;position:relative;aspect-ratio:16/9;width:100%;min-width:0;
   border:0!important;border-radius:0!important;overflow:hidden;
   background:#000;box-shadow:none
 }
 body.watching .watch-layout .player-wrap video{object-fit:contain}
 body.watching .watch-layout .watch-tools{order:2}
 body.watching .watch-layout .watch-details{
   order:3;width:100%;padding:0;margin:0;min-width:0;
   border-bottom:1px solid #28362f
 }
 body.watching .watch-layout .st-channel-overview{
   display:flex;flex-direction:column;min-width:0;
   padding:15px clamp(13px,3.5vw,27px) 17px;
   background:linear-gradient(165deg,#131b20 0%,#0d121a 75%);
 }
 body.watching .watch-layout .channel-identity{
   order:0;display:flex;align-items:center;gap:12px;min-width:0;margin:0 0 12px
 }
 body.watching .watch-layout .channel-identity>.online-avatar{flex:0 0 auto;display:inline-flex}
 body.watching .watch-layout .channel-identity>.online-avatar .avatar{
   width:50px;height:50px;font-size:17px;border:2px solid #59e891;border-radius:50%
 }
 body.watching .watch-layout .identity-main{min-width:0;gap:4px}
 body.watching .watch-layout .identity-main strong{
   font-size:16px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
 }
 body.watching .watch-layout .identity-main small{font-size:12px;color:#9daea7}
 body.watching .watch-layout .stream-heading{order:1;display:flex;flex-direction:column;gap:13px;align-items:stretch;min-width:0}
 body.watching .watch-layout .stream-heading>div:first-child{min-width:0;max-width:100%}
 body.watching .watch-layout .stream-heading h1{
   margin:0 0 8px;font-size:clamp(16px,2.1vw,20px);line-height:1.3;
   letter-spacing:-.35px;overflow-wrap:anywhere;display:-webkit-box;
   -webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden
 }
 body.watching .watch-layout .stream-heading p{
   display:flex;align-items:center;flex-wrap:wrap;gap:5px;
   font-size:11px;color:#adbac0;line-height:1.7
 }
 body.watching .watch-layout .live-views{font-size:11px}
 body.watching .watch-layout .detail-buttons{
   display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
   align-items:stretch;gap:8px;min-width:0;width:100%
 }
 body.watching .watch-layout .detail-buttons>.btn,
 body.watching .watch-layout .detail-buttons>button{
   display:inline-flex;align-items:center;justify-content:center;gap:7px;
   padding:10px 11px;min-width:0;min-height:43px;width:100%;
   line-height:1.25;border-radius:11px;font-size:12px;font-weight:800;
   white-space:normal;text-align:center;overflow-wrap:anywhere
 }
 body.watching .watch-layout .detail-buttons>.outline-green{
   grid-column:1 / -1;background:#183325;border-color:#397651;
   color:#aafdc4
 }
 body.watching .watch-layout .detail-buttons>.outline-green .st-vertical-icon{
   flex:0 0 17px;width:17px;height:17px
 }
 body.watching .watch-layout .st-support-actions{
   order:2;display:flex;align-items:center;gap:8px;
   margin:10px 0 0;min-width:0
 }
 body.watching .watch-layout .st-support-actions>.st-status-setup{display:none}
 body.watching .watch-layout .st-support-actions #st-subscribe{
   display:none
 }
 body.watching .watch-layout .st-support-actions>.st-support-btn{
   min-height:40px;padding:9px 13px;font-size:12px
 }
 body.watching .watch-layout .info-strip{
   order:3;margin:10px 0 0;min-width:0;gap:6px
 }
 body.watching .watch-layout .info-strip .tag{
   background:#1c332a;color:#c4f8d5;
   font-size:10px;padding:5px 9px
 }
 body.watching .watch-layout .chat{
   order:2;min-width:0;width:100%;
   height:clamp(290px,38dvh,370px)!important;
   min-height:285px;max-height:none;
   margin:0;padding:0;overflow:hidden;
   display:flex;flex-direction:column;position:relative;top:auto;
   border:0;border-bottom:1px solid #2b4138;border-radius:0;
   background:#0a0f16
 }
 body.watching .watch-layout.st-channel-chat-expanded .chat{
   height:min(74dvh,730px)!important;min-height:300px
 }
 body.watching .watch-layout .chat.collapsed{
   height:auto!important;min-height:0!important
 }
 body.watching .watch-layout .chat-title{
   display:flex;align-items:center;justify-content:space-between;
   gap:7px;min-height:50px;padding:9px 13px;
   background:#131e20;border-color:#2d4338
 }
 body.watching .watch-layout .chat-title strong{
   min-width:0;white-space:nowrap;font-size:0
 }
 body.watching .watch-layout .chat-title strong:before{
   content:'Chat ao vivo';font-size:14px;color:#ebfcf1;font-weight:850
 }
 body.watching .watch-layout .chat-title>div{
   gap:7px;flex:0 0 auto;display:flex;align-items:center
 }
 body.watching .watch-layout .st-channel-chat-expand{
   display:inline-flex;align-items:center;justify-content:center;
   min-height:35px;padding:7px 10px;border-radius:10px;
   border:1px solid #3a6550;background:#1b3829;
   color:#a5fdbe;font-size:11px;font-weight:800
 }
 body.watching .watch-layout .chat-collapse{
   width:35px;height:35px;font-size:22px;color:#c8d8d1;
   border-radius:9px;background:#222d30;
 }
 body.watching .watch-layout .st-chat-game-btn{
   display:inline-flex;align-items:center;min-height:35px;
   padding:6px 9px;font-size:11px
 }
 body.watching .watch-layout #chat-log{
   flex:1 1 auto;min-height:0;overscroll-behavior:contain;
   padding:10px 14px 12px
 }
 body.watching .watch-layout .chat-compose{
   display:grid;grid-template-columns:auto minmax(0,1fr);
   width:100%;padding:9px 12px max(9px,env(safe-area-inset-bottom,0px));
   border-top:1px solid #36503f;background:#111b21
 }
 body.watching .watch-layout .chat-compose .chat-signin{
   grid-column:2;min-width:0;white-space:normal;overflow-wrap:anywhere
 }
 body.watching .watch-layout .channel-tabs{
   order:4;display:flex;align-items:stretch;
   gap:17px;min-width:0;width:100%;overflow-x:auto;overflow-y:hidden;
   white-space:nowrap;scroll-snap-type:x proximity;scrollbar-width:none;
   overscroll-behavior-inline:contain;
   background:#11171d;margin:0;padding:0 clamp(14px,3.5vw,27px);
   border-bottom:1px solid #2b3439;
 }
 body.watching .watch-layout .channel-tabs::-webkit-scrollbar{display:none}
 body.watching .watch-layout .channel-tabs button{
   flex:0 0 auto;white-space:nowrap;scroll-snap-align:center;
   min-height:49px;padding:14px 0 12px;
   font-size:12px;font-weight:800;color:#aebec2;
   border-bottom-width:3px
 }
 body.watching .watch-layout .channel-tabs button.active{color:#f8fff9}
 body.watching .watch-layout .channel-tab-content{
   order:5;min-width:0;width:100%;min-height:120px;
   padding:14px clamp(13px,3.5vw,27px) 23px;
   background:#0d121a;
 }
 body.watching .watch-layout .channel-tab-content .about-panel{
   margin:0;padding:16px 17px;max-width:none;
   border:1px solid #2e4038;background:#151e22;border-radius:13px
 }
 body.watching .watch-layout .channel-tab-content .about-panel h3{font-size:15px}
 body.watching .watch-layout .channel-tab-content .about-panel p{
   font-size:12px;line-height:1.7;overflow-wrap:anywhere
 }
 body.watching .watch-layout .channel-cover{margin-bottom:12px}
 body.watching .watch-layout .social-links{gap:7px}
 body.watching .watch-layout .social-links a{font-size:11px;border-radius:9px}
 body.watching .recommendations{
   padding:13px clamp(13px,3.5vw,27px) 25px;
   min-width:0;overflow:hidden
 }
 body.watching .st-player-v3 .st-control:focus-visible,
 body.watching .detail-buttons .btn:focus-visible,
 body.watching .detail-buttons button:focus-visible,
 body.watching .st-channel-chat-expand:focus-visible{
   outline:2px solid #80ffac;outline-offset:2px
 }
}
@media(max-width:430px){
 body.watching .watch-layout .st-channel-overview{padding:13px 13px 15px}
 body.watching .watch-layout .identity-main strong{font-size:15px}
 body.watching .watch-layout .stream-heading h1{font-size:16px}
 body.watching .watch-layout .detail-buttons .btn{font-size:11px}
 body.watching .st-player-v3 #st-clip,
 body.watching .st-player-v3 #st-theater{display:none}
 body.watching .st-player-v3 .st-volume{width:36px}
 body.watching .st-player-v3 .st-controls{padding:14px 6px 5px}
}
@media(max-width:350px){
 body.watching .watch-layout .detail-buttons{gap:6px}
 body.watching .watch-layout .detail-buttons>.btn,
 body.watching .watch-layout .detail-buttons>button{padding:9px 6px;font-size:10px}
 body.watching .watch-layout .chat-title>div{gap:4px}
 body.watching .watch-layout .st-chat-game-btn{font-size:10px;padding:6px}
 body.watching .watch-layout .st-channel-chat-expand{padding:6px;font-size:10px}
 body.watching .watch-layout .st-channel-overview .info-strip{gap:4px}
}
@media(prefers-reduced-motion:reduce){
 body.watching .watch-layout .channel-tabs{scroll-behavior:auto}
}

/* v3 mobile priority: player directly followed by usable chat, profile later. */
@media(max-width:900px){
 body.watching .watch-layout #chat-panel{order:2}
 body.watching .watch-layout .chat-compose{position:relative;flex:0 0 auto}
 body.watching .watch-layout #chat-log{min-height:0;flex:1 1 auto;overflow-y:auto}
 body.watching .watch-layout #chat-panel{scroll-margin-top:8px}
}