Kindroid AI: Wide screen v2 by breat

/* ==UserStyle==
@name         Kindroid AI: Wide screen
@version      20240129.15.41
@namespace    https://userstyles.world/user/breat
@description  Put Kindroid on whole page for screen with width 1440px and more.
@author       breat
@license      No License
==/UserStyle== */

@-moz-document domain("kindroid.ai") {
/* === Credits ===
Created by      BreatFR
Creatied on     2023/08/27
Version         2.19
@description    Put Kindroid on whole page for screen with width 990px and more.
@namespace      userstyles.world/user/breat
Changelog       https://www.reddit.com/r/KindroidAI/comments/164darb/make_kindroid_love_wide_screens/
Changelog       https://discord.com/channels/1116127115574779905/1195415564101886102
Help            https://discord.com/channels/1116127115574779905/1145809654044176485
@license        GNU GPL v3
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 === */

/* Hide scrollbars */
.css-1lbk8wf,
:root ::-webkit-scrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    width: 0px;
}    
::-webkit-scrollbar {
    display: none;
    width: 0px;
}

/* Loading bar */
#nprogress .bar {
    background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
}

/* ========================================================================
   Header and menu
======================================================================== */
/* Header background color */
.css-x3odei {
    background-color: var(--chakra-colors-primaryBlack) !important;
}

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

/* Put Biling in yellow */
.css-1fu7n7b > div > p {
    color: var(--chakra-colors-yellow-400);
}

/* Put FAQs and Terms & Privacy in blue */
.css-j7qwjs > div:nth-child(8) > p,
.css-j7qwjs > div:nth-child(9) > p {
    color: var(--chakra-colors-blue-400);
}

/* Put email and timer in white */
.css-1dodils,
.css-1g7lxfg {
    color: var(--chakra-colors-secondaryWhite);
    margin-top: 10px;
}

/* Put Upload Photo text in custom avatar in white to be more visible */
.css-1jcj2pk {
    color: white;
}

/* Billing error box */
.css-dixmdy {
    background-color: #161616;
    border: 1px solid #6C6C6C;
    border-radius: 10px;
    color: var(--chakra-colors-secondaryWhite);
}

/* ========================================================================
   Chat page
======================================================================== */
/* Add border to textarea when focus */
.css-ymugf1: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-ymugf1:not(:focus),
.css-ymugf1:focus {
    resize: none;
}
    
/* Hide voice counter and reduce button on avatar */
/* Text button */
.css-2bir3m,
/* Voice button */
.css-y0ybx5,
/* Reduce button */
.css-fk8dne {
    display: none;
}

/* Hide names in bubbles to save place */
.css-ppua9z,
.css-19hb772 {
    display: none;
}
.css-127w3cl {
    margin-left: 0px;
}

/* 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-1j9xj7u {
    border-radius: 20px 8px 20px 20px;
}

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

/* Bigger text in bubbles and textarea */
.css-6obdga,
.css-1gi22a8,
.css-w2nlit {
    font-size: 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;
}

/* Put Regenerate and Journal buttons inline */
.css-1lvpjll > div.chatScrollParent.css-735j5d > div.css-1lbk8wf > div:nth-child(20) > div.css-1jby15f {
    bottom: 100px;
    right: 10px;
    position: fixed;
}
.css-100dd8p {
    gap: 120px !important;
    flex-direction: row-reverse !important;
}

/* Heart background */
.css-1lvpjll {
    background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) var(--chakra-colors-secondaryBlack) fixed 100%;
}

/* Initial letter */
.css-70qvj9 {
    height: 0px;
}
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-127w3cl,
.css-yhhl9h > .css-teti0a > .css-70qvj9 > .css-1yzcrgj {
    height: 36px;
    width: 36px;
    margin-left: -70px;
}
.css-yhhl9h {
    margin-left: 50px;
}
.css-qfa1mb {
    display: none;
}

/* Put Regenerate and Journal buttons on left side 
.css-100dd8p {
    bottom: 80px;
    flex-direction: row-reverse !important;
    gap: 80px;
    right: 73%;
    position: absolute;
} */

/* ========================================================================
   Selfie page
======================================================================== */
/* Wide selfie page */   
.css-1ivym2n,
.css-10ytma2 {
    max-width: 100%;
}
.css-13da5b {
    display: none;
}
.css-1dq4ssc {
    padding-bottom: 30px;
}
.css-1dq4ssc,
.css-2cd1of {
    gap: 20px;
    justify-content: center;
}
.css-1fltgj7 {
    padding: 0px 40px;
}
.css-fskrnz {
    width: 84vh;
}
.css-3vu8ng,
.css-kuf6b {
    height: auto;
    width: 290px;
}
.css-j8mh8q,
.css-mtk9ei {
    color: var(--chakra-colors-secondaryWhite);
    font-size: 18px;
}
.css-105olw3 {
    max-width: 96%;
}
/* Request selfie button */
.css-1ygmn3g {
    max-width: 1060px;
}

/* Load More button */
.css-dvxtzn,
.css-1q03dzc {    
    background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
    border-radius: 56px;
    height: fit-content;
    padding-bottom: var(--chakra-space-2);
    padding-top: var(--chakra-space-2);
    width: fit-content;
}
.css-1q03dzc:hover {
    text-decoration: none;
}

.css-1q03dzc,
.css-1mepe2v {
    color: var(--chakra-colors-pureWhite);    
    font-size: 18px;
}

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

/* Put delete image button in red */
.css-jh1suc,
.css-15g5rpl,
.css-15g5rpl svg path {
    color: var(--chakra-colors-red);
}

/* ========================================================================
   Voice call page
======================================================================== */
/* Add a border on the modal */
#chakra-modal-\:r12k\: {
    border: 1px solid #6C6C6C;
}

/* Bigger text */
.css-14mmx5r,
.css-1vqt2yh {
    font-size: 16px;    
}

/* ========================================================================
   For 900p wide screen and more
======================================================================== */
@media screen and (min-width: 900px) {
/* ========================================================================
   Menu
======================================================================== */
    /* Large menu */
    .css-1raxatq,
    .css-xhpjzu {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Email box */
    .css-1dodils {
        align-self: center;
        gap: 0px;
        margin-top: 5% !important;
        padding-right: 15px;
    }

    /* Subcriber icon */
    .css-1dodils > img {
        height: auto !important;
        width: 44px;
    }

    /* Email */
    .css-gnnge1 {
        font-size: 24px;
        padding-bottom: 5px;
        padding-left: 5px;
    }

    /* Menu */
    .css-1raxatq > div > div > div > div.css-j7qwjs {
        display: grid;
        align-content: center;
        gap: 50px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        margin-top: 10%;
        justify-content: space-between !important
    }

    /* Subscribe button */
    .css-1fu7n7b,
    .css-o32bv9 {
        order: 2;
    }

    /* Log out button */
    .css-j7qwjs > div:nth-child(10) {
        position: absolute;
        right: 5%;
        top: 70%;
    }

    /* Reset Kindroid button */
    .css-16qb61r {
        position: absolute;
        right: 4%;
        top: 80%;
    }

    /* Bigger menu text */
    .css-dghbxk,
    .css-1jbciej,
    .css-3sp0ue {
        font-size: 30px
    }
    
    /* Move and fix the Save button in all menu page */
    .css-cbfcqn,
    .css-1raxatq > div.css-1xh8vw6 > button,
    .css-1raxatq > div.css-ouwkos > button {
        bottom: 50px;
        margin: 39% 0px 0px 83%;
        position: fixed;
    }

    /* Backstory and Key memories */
    .css-1xh8vw6 > .css-188uayk > .css-j7qwjs > .css-1kxonj9 > .css-126ipcs > textarea.css-1y068e {
        height: 600px !important;
    }
    #accordion-panel-\:r6i\: > div.css-mifb2i > div.css-1uyzhnb > p.chakra-text.css-7wdzg1,
    #accordion-panel-\:r6f\: > p.chakra-text.css-7wdzg1 {
        min-width: 100% !important;
    }

    /* Voice */
    .css-1raxatq > div.css-ouwkos > div > p.chakra-text.css-7wdzg1 {
        max-width: 100% !important;
    }

    /* Split menu for avatars */
    .css-7nleni,
    .css-1jk1ov6 {
        max-width: 50% !important;
    }
    .css-1yxzzu5 > div > p {
        display: block;
        margin-left: 47%;
        position: absolute;
        top: 10px;
        max-width: 50% !important;
    }
    .css-n4vub9 {
        margin-left: 47%;
        position: absolute;
        top: 8%;
        max-width: 45% !important;
    }
    .css-ue4bfp {
        display: block;
        margin-left: 95% !important;
        position: absolute;
        max-width: 45% !important;
    }
    .css-mifb2i {
        width: 50%;
    }

    /* 1st avatar size */
    .css-1k5gc4r,
    .css-dfpqc0 {
        height: auto;
        margin-left: 25%;
        width: 50%;
    }

    /* 2nd avatar size */
    ...