#media_panel{

    display:none;

    position:fixed; /* FONTOS */
    bottom:70px;
    left:10px;

    width:440px;
    max-width:calc(100vw - 20px); /* MOBIL FIX */

    max-height:75vh;

    background:rgba(15,15,15,.96);
    backdrop-filter:blur(10px);

    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 15px 35px rgba(0,0,0,.6);

    padding:10px;
    z-index:9999;

    overflow:hidden;
}
@media (max-width:600px){

    #media_panel{
        left:50%;
        transform:translateX(-50%);
        width:95vw;
        bottom:80px;
    }

    #gif_results{
        grid-template-columns:repeat(2,1fr);
    }

    .yt-thumb{
        width:90px;
    }

}
/* ================= TABS ================= */

.media_tabs{
    display:flex;
    gap:6px;
    margin-bottom:10px;
}

.media_tab{
    flex:1;
    text-align:center;
    padding:6px;
    cursor:pointer;
    border-radius:8px;
    background:#111;
    transition:.2s;
}

.media_tab:hover{
    background:#222;
}

.media_tab.active{
    background:#ff0000;
}


/* ================= CONTENT ================= */

.media_content{
    display:none;
}

.media_content.active{
    display:block;
}


/* ================= EMOJI ================= */

#emoji_container{
    font-size:22px;
    line-height:2;
    cursor:pointer;
}


/* ================= INPUT ================= */

#gif-search-field,
#yt-search-field{

    width:100%;
    padding:8px;

    background:#000;
    border:1px solid #333;
    border-radius:8px;
    color:#fff;
}


/* ================= GIF GRID ================= */

#gif_results{
    margin-top:10px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    max-height:300px;
    overflow-y:auto;
}

.gif_item{
    width:100%;
    border-radius:8px;
    cursor:pointer;
    transition:.2s;
}

.gif_item:hover{
    transform:scale(1.08);
}


/* ================= YOUTUBE ================= */

#youtube_results{
    max-height:300px;
    overflow-y:auto;
}

.yt-item{
    display:flex;
    gap:10px;
    padding:8px;
    cursor:pointer;
    border-radius:8px;
}

.yt-item:hover{
    background:#222;
}

.yt-thumb{
    width:120px;
    border-radius:6px;
}

.yt-title{
    font-size:13px;
}