/* mobile.css - Mobile layout overrides only */

@media(max-width:960px){
    .home-card{margin:16px;padding:28px 24px}
    .home-actions{flex-direction:column;gap:16px;align-items:stretch}
    .sideBySide{flex-direction:column;gap:14px}
    .blog-list,.blog-single,.static-page{margin:16px;padding:24px 22px}
    .video-layout{flex-direction:column;height:calc(100dvh - 54px)}
    .video-col{flex:none;flex-direction:row;height:35vh;min-height:180px;padding:4px}
    .chat-col .chat-messages{min-height:200px}
    .page-video{overflow:auto}
}

@media(max-width:768px){
    /* Header */
    header{padding:8px 14px;height:54px}
    .logoLink img.logo{height:48px}
    .tagline{display:none}
    .headerDiscord{display:none}
    .userCount{font-size:16px}
    .onlineText{font-size:13px}
    .rightSide{gap:10px}

    /* HOMEPAGE */
    .home-card{
        margin:12px;
        padding:24px 20px;
        border-radius:16px;
        display:flex;
        flex-direction:column
    }
    .home-card h1{font-size:1.7rem;margin-bottom:16px;order:1}
    .home-card > p:first-of-type{order:2}
    .home-actions{order:3;flex-direction:column;gap:16px;align-items:stretch;margin-top:0;margin-bottom:8px}
    .warningBanner{order:4}
    .home-extra-text{order:5}
    .home-socials-mobile{order:6;display:flex;gap:10px;margin-top:5px}
    .sideBySide .socials{display:none}
    .sideBySide{flex-direction:column;gap:10px}
    .startachat{font-size:1.2rem}
    .choiceButton{padding:14px 40px;font-size:18px;border-radius:10px}
    .interestsEnter{padding:14px;min-height:48px;border-radius:10px}
    .interestsEnter textarea{font-size:15px}
    .interestHeader{font-size:15px}

    /* TEXT CHAT */
    .page-chat{overflow:hidden}
    .text-layout{height:calc(100dvh - 54px)}
    .text-layout .chat-rules{padding:14px 18px;font-size:15px;line-height:1.65}
    .text-layout .chat-messages{flex:1;min-height:0;padding:12px 16px}
    .text-layout .chat-bar button{padding:16px 22px;font-size:16px}
    .text-layout .chat-bar input{padding:16px 18px;font-size:16px}

    /* VIDEO - taller remote, shorter local PIP, input visible */
    .page-video{overflow:hidden}
    .video-layout{flex-direction:column;height:calc(100dvh - 54px)}
    .video-col{
        flex:none;
        height:65vw;
        min-height:260px;
        max-height:400px;
        padding:4px;
        position:relative;
        flex-direction:row
    }
    .video-col #remote{flex:1;border-radius:6px}
    .video-col #local{
        position:absolute;
        top:8px;
        right:10px;
        width:100px;
        height:75px;
        flex:none;
        border:2px solid #fff;
        border-radius:6px;
        z-index:5;
        box-shadow:0 2px 8px rgba(0,0,0,.4)
    }
    /* Report flag on LEFT side of remote on mobile */
    .page-video .report-flag{left:10px;right:auto}
    
    .chat-col{flex:1;display:flex;flex-direction:column;min-height:0}
    .chat-col .chat-rules{padding:8px 14px;font-size:13px;line-height:1.5}
    .chat-col .chat-rules .red{font-size:13px}
    .chat-col .chat-rules .lastWarning{display:none}
    .chat-col .chat-messages{flex:1;min-height:0;padding:8px 12px}
    .chat-col .chat-bar{flex-shrink:0}
    .chat-col .chat-bar button{padding:14px 18px;font-size:16px}
    .chat-col .chat-bar input{padding:14px 16px;font-size:16px}

    /* Blog & static */
    .blog-list,.blog-single,.static-page{margin:12px;padding:20px 18px;border-radius:14px}
    .blog-list h1,.blog-single h1{font-size:1.4rem}
    .static-page h1{font-size:1.3rem}
    .footer{font-size:13px;padding:14px 10px}
}

@media(max-width:400px){
    header{height:48px;padding:6px 10px}
    .logoLink img.logo{height:42px}
    .switch{width:42px;height:22px}
    .slider:before{height:16px;width:16px}
    input:checked+.slider:before{transform:translateX(20px)}
    .userCount{font-size:14px}
    .home-card h1{font-size:1.45rem}
    .home-card p{font-size:14px}
    .choiceButton{padding:12px 32px;font-size:16px}
    .text-layout{height:calc(100dvh - 48px)}
    .video-layout{height:calc(100dvh - 48px)}
    .video-col{height:55vw;min-height:220px}
    .video-col #local{width:95px;height:74px}
}