Kindroid AI: Wide screen v1 by breat

/* ==UserStyle==
@name         Kindroid AI: Wide screen v1
@version      20230907.13.01
@namespace    ?
==/UserStyle== */

@-moz-document domain("kindroid.ai") {
/* === Credits ===
Created by  BreatFR
Creatied on 2023/08/27
Version     1.0
Changelog   https://www.reddit.com/r/KindroidAI/comments/164darb/make_kindroid_love_wide_screens/
Changelog   https://discord.com/channels/1116127115574779905/1145809654044176485
Website     https://breat.fr
facebook    https://www.facebook.com/breatfroff
mastodon    https://mastodon.social/@breat_fr
telegram    https://t.me/+5ZLC2qntf6xmYmI0
vk          https://vk.com/breatfroff
X (twitter) https://x.com/breatfroff
=== Credits === */

/* ================================================================================================================================================
   For all resolutions
================================================================================================================================================ */
/* Hide scrollbars */
:root ::-webkit-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 0px;
}    
::-webkit-scrollbar {
    display: none;
    width: 0px;
}

/* ========================================================================
   Header and menu
======================================================================== */
/* Hide header */
.css-x3odei {
    padding: 0px;
    height: 0px;
}

/* Hide reddit, discord and kindroid icons */
.css-1rdhwuq {
    display: none;
}
    
/* Remove the space between the header and the chat*/
.css-g2goff {
    padding: 0px;
}
    
/* Put menu on all height */
.css-1raxatq {
    height: 100%;
    left: initial;
    right: 0px;
    top: 0px;
    z-index: 1
}
.css-8dluwc {
    display: none;
}


/* Put Log out in orange */
.css-j7qwjs > div:nth-child(9) > p {
    color: var(--chakra-colors-orange);
}

/* ========================================================================
   Chat page
======================================================================== */
/* Add border to textarea when focus */
.css-w2nlit:focus {
    border: 0px;
    border-radius: 32px;
    box-shadow: 0 0 0 1px rgb(139, 109, 255), 0 0 0 2px rgb(254, 132, 132);
}
/* Remove the resize icon on textarea on chat page */
.css-w2nlit:not(:focus),
.css-w2nlit:focus {
    resize: none;
}
    
/* Hide voice counter and reduce button on avatar */
 /* Voice button */
/* .css-2bir3m, */
/* Reduce button */
.css-fk8dne {
    display: none;
}

/* Hide names in bubbles to save place */
.css-ppua9z,
.css-19hb772 {
    display: none;
}

/* Put our name and text aligned on the right */
.css-19hb772,
.css-13683nx {
    align-items: end;
    text-align: right;
}

/* Modification of rounded corners for our bubbles */
.css-13683nx {
    border-radius: 20px 8px 20px 20px;
}

/* Modification of rounded corners for AI bubbles */
.css-1ulhpcc,
.css-1tg26k8,
.css-1t9c0mz {
    border-radius: 8px 20px 20px 20px;
}

/* Put a not allowed cursor on spinner, microphone icon, play button, picture generating when needed */
.chakra-spinner,
.css-zkr1dl,
.css-jy2vee,
.css-kjafn5 [disabled] + button {
    cursor: not-allowed;
}

/* Dark system bubbles */
.css-do4s31,
.css-94x4at{
    background-color: #161616;
    border-color: #6C6C6C;
    color: white;
}

/* ========================================================================
   Selfie page
======================================================================== */
/* Image border on hover */
div.css-3vu8ng > .css-1regj17:hover {
    border: 5px solid rgb(254, 132, 132);
    border-radius: 16px;
}

/* ================================================================================================================================================
   For width more than 1440px
================================================================================================================================================ */
@media screen and (min-width: 1440px) {
/* ========================================================================
   Header and menu
======================================================================== */
    /* Put menu and selfiles album at the bottom right */
    .css-1gp92l3 {
        gap: 0px;
        margin-left: 94.7%;
        margin-top: 93%;
        position: absolute;
    }
    
    /* Resize the textarea */
    .css-g9r8dt {
        margin-right: 9%;
        width: 71%;
    }

    /* Put avatar and chat on whole page */
    .css-1lvpjll {
        min-height: 100%;
        top: 0px;
    }
    
/* ========================================================================
   Chat page
======================================================================== */
    /* Bigger avatar */    
    .css-oies6c {
        border-radius: 0px;
        height: 100dvh;
        left: 0px;
        position: absolute;
        width: 100dvh;
    }
    
    /* Put chat and textarea more on right*/
    .css-735j5d {
        margin-left: 26.3%;
        padding-right: 20.5%;
    }
    .css-kjafn5 {
        width:94%;
    }
    .css-lerapk,
    .css-86r3aw {
        bottom: 0px;
        margin-bottom: 15px;
        margin-left: 42.5%;
        position: fixed;
    }
    
/* ========================================================================
   Selfie page
 ======================================================================= */
    /* Wide selfie page */    
    .css-1ivym2n,
    .css-10ytma2 {
        max-width: 100%;
    }
    .css-13da5b {
        display: none;
    }
    .css-2cd1of {
        gap: 20px;
        justify-content: center;
        margin-bottom: 30px;
    }
    .css-1fltgj7 {
        padding: 0px 40px;
    }
    .css-fskrnz {
        width: 84vh;
    }
    .css-3vu8ng,
    .css-kuf6b {
        height: auto;
        width: 290px;
    }    
    .css-j8mh8q {
        font-size: 18px;
    }
    
    /* Put Request image button at the top */
    .css-65tag0 {
        margin-bottom: 39%;
        position: fixed;
        z-index: 9999;
    }
}

/* ================================================================================================================================================
   For height 1080px
================================================================================================================================================ */
@media screen and (height: 1080px) {
/* ========================================================================
   Header and menu
======================================================================== */
    /* Put menu and selfiles album at the bottom right */
    .css-1gp92l3 {
        gap: 0px;
        margin-left: 95%;
        margin-top: 108%;
        position: absolute;
    }
    
/* ========================================================================
   Chat page
======================================================================== */
    /* Bigger avatar */
    .css-oies6c {
        border-radius: 0px 20px 20px 0px;
        height: 1080px;
        left: 0px;
        position: absolute;
        width: 1080px;
    }
    
    /* Put chat and textarea more on right*/
    .css-735j5d {
        margin-left: 34.8%;
        padding-right: 29.9%;
    }
    .css-kjafn5 {
        width:93%;
    }
    .css-lerapk,
    .css-86r3aw {
        bottom: 0px;
        margin-bottom: 15px;
        margin-left: 35.7%;
        position: fixed;
    }
    
/* ========================================================================
   Selfie page
======================================================================== */    
    /* Put Request image button at the top */
    .css-65tag0 {
        margin-bottom: 46.8%;
        position: fixed;
        z-index: 9999;
    }
}

/* ================================================================================================================================================
   For 4K
================================================================================================================================================ */
@media screen and (min-height: 1760px) {
/* ========================================================================
   Header and menu
======================================================================== */
    /* Put menu and selfiles album at the bottom right */
    .css-1gp92l3 {
        gap: 0px;
        margin-left: 94.7%;
        margin-top: 93%;
        position: absolute;
    }
    
    /* Resize the textarea */
    .css-g9r8dt {
        margin-right: 9%;
        width: 71%;
    }

    /* Put avatar and chat on whole page */
    .css-1lvpjll {
        min-height: 100%;
        top: 0px;
    }
    
/* ========================================================================
   Chat page
======================================================================== */
    /* Bigger avatar */    
    .css-oies6c {
        border-radius: 0px;
        height: 100dvh;
        left: 0px;
        position: absolute;
        width: 48.5%;
    }
    
    /* Put chat and textarea more on right*/
    .css-735j5d {
        margin-left: 31.5%;
        padding-right: 27%;
    }
    .css-kjafn5 {
        width:94%;
    }
    .css-lerapk,
    .css-86r3aw {
        bottom: 0px;
        margin-bottom: 15px;
        margin-left: 42.5%;
        position: fixed;
    }
    
/* ========================================================================
   Selfie page
======================================================================== */
    /* Wide selfie page */    
    .css-1ivym2n,
    .css-10ytma2 {
        max-width: 100%;
    }
    .css-13da5b {
        display: none;
    }
    .css-2cd1of {...