/* ==UserStyle==
@name           MyGirl: Wide screen + customisations v1.xx
@description    Put MyGirl on whole page for screen and add customisations features.
@namespace      userstyles.world/user/breat
@version        1.00
@author         BreatFR
@license        GNU GPL v3 (https://www.gnu.org/licenses/quick-guide-gplv3.en.html)
@homepageURL    https://github.com/breatfr/MyGirl
@supportURL     https://discord.com/channels/1172088835358863410/1172482585918709840
@preprocessor   stylus

@var select     bgchoice                    "Background choice" {
    "❤️ Hearts": "heartbg",
    "⬜ None": "nobg",
    "❔ Custom": "custombg"
}
@var text       custombgurl                 "Background URL"                        "URL between quotes"

@var checkbox   bgcolor                     "Background color"                      0
@var checkbox   bgcolor                     "Background color"                      0
@var color      bgcolorvalue                "Background color value"                #292b41
@var checkbox   lisabgcolor                 "Lisa's custom bubble color"            0
@var color      lisabgcolorvalue            "Lisa's bubble color value"             #211b19
@var checkbox   ourbgcolor                  "Our custom bubble color"               0
@var color      ourbgcolorvalue             "Our bubble color value"                #1b1c1e
@var checkbox   lisatextscolor              "Lisa's font color"                     0
@var color      lisatextscolorvalue         "Lisa's font color value"               #e591ff
@var checkbox   ourtextscolor               "Our custom bubble color"               0
@var checkbox   ourtextscolor               "Our font color"                        0
@var color      ourtextscolorvalue          "Our font color"                        #cbcbcb
@var checkbox   blurcontent                 "Blur content in bubbles"               0
@var text       bubblestext                 "Bubbles font size"                     20px
@var text       chattextareasize            "Textarea font size"                    20px
@var checkbox   imageborder                 "Image border on hover"                 1
==/UserStyle== */

/* === Credits ===
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 === */
@-moz-document url("https://app.mygirl.tech/#/chat") {
/* ===================================================================================================================================
    Chat page
=================================================================================================================================== */
    /* Image border on hover */
    if imageborder {
        .el-image__preview {
            width: 215px !important;
        }
        .el-image__preview:hover {
            transition: 0.2s linear;
            border-radius: 16px;
        }
        .el-image:hover {
            border-radius: 16px;
            box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
            transition: 0.2s linear;
        }        
    }
    
    /* Image border on hover */
    if imageborder {
        .css-1regj17:hover {
            transition: 0.2s linear;
        }
        .css-1regj17:hover {
            border-radius: 16px;
            height: 300px;
            width: 300px;
        }
        .css-3vu8ng:hover {
            border-radius: 16px;
            box-shadow: rgba(139, 109, 255, 0.4) -5px -5px 5px 5px, rgba(254, 133, 133, 0.4) 5px 5px 5px 5px, rgba(254, 133, 133, 0.4) 5px -5px 5px 5px, rgba(139, 110, 255, 0.4) -5px 5px 5px 5px;
            transition: 0.2s linear;
        }        
    }    
    
    /* Background */
    if (bgchoice=="heartbg") {
        .chat__container,
        .messages__box {
            background: url(https://i.ibb.co/fYQkYyc/heart-pattern.png) bgcolorvalue fixed 100% !important;
        }
    }    
    if (bgchoice=="nobg") {
        /* No background */
        .chat__container,
        .messages__box {
            background: bgcolorvalue;
        }
    }    
    if (bgchoice=="custombg") {
        /* Custom background */
        .chat__container,
        .messages__box {
            background: url(custombgurl) bgcolorvalue fixed 100% !important;
        }
    }
    if bgcolor {
        .character-home,
        .chat__container,
        .chat__message-box,
        .sidebar {
            background-color: bgcolorvalue !important;
        }
    }
    
    if blurcontent {
        .message__item,
        .message__item--img {
            filter: blur(8px);
            -webkit-filter: blur(8px);
        }
    }
       
    /* Header */
    .sidebar {
        max-height: 60px;
        left: 0px;
        top: 0px;
        z-index: 9999;
    }
    .sidebar[data-v-e3b8cdb9] {
        height: 60px;
        width: 30.45%;
    }
    .sidebar > figure > img {
        left: 10px;
        margin-block-end: 0px;
        margin-block-start: 0px;
        margin-inline-end: 0px;
        margin-inline-start: 0px;
        max-height: 50px;
        max-width: 50px;
        position: absolute;
        top: 10px;
    }
    .sidebar__item.logout svg use {
        stroke: var(--el-color-danger);
    }
    .sidebar__item.download,
    .sidebar__item.setting > span,
    .sidebar__item.logout {
        display: none;
    }
    .sidebar__item.download > svg,
    .sidebar__item.setting > svg,
    .sidebar__item.logout > svg {
        height: 40px;
        width: 40px;
    }
    .sidebar > figure > figcaption {
        display: none;
    }
    .sidebar__footer {
        display: flex !important;
        column-gap: 20px;
        left: 15%;
        top: 20%;
        position: absolute;
        width: 100%;
        z-index: 9999;
    }
    
    .setting-btn-layout {
        column-gap: 20px;
        display: flex !important;
        left: 25% !important;
        position: absolute;
        top: -6.5% !important;
        z-index: 9999;
    }
    .setting-btn-layout > button,
    .setting-btn-layout > button:hover {
        background-color: transparent;
        border: none;
    }
    .setting:hover::after {
        background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
        border-radius: 5px;
        color: white;
        content: "Settings";        
        font-size: 18px !important;
        font-weight: 600 !important;
        left: -3%;
        padding: 5px;
        position: absolute;
        top: 100%;
    }
    .character-home.chat__main > div > button:nth-child(1):hover::after {
        background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
        border-radius: 5px;
        color: white;
        content: "Gift Shop";
        font-size: 18px !important;
        font-weight: 600 !important;
        left: -18%;
        padding: 5px;
        position: absolute;
        top: 100%;
    }
    .character-home.chat__main > div > button:nth-child(2) > span > svg {
        padding-top: 5px !important;
    }
    .character-home.chat__main > div > button:nth-child(2):hover::after {
        background: linear-gradient(90deg,#6a8bff 0%,#e591ff 100%);
        border-radius: 5px;
        color: white;
        content: "Avatar & Outfit";
        font-size: 18px !important;
        font-weight: 600 !important;
        left: 27%;
        padding: 5px;
        position: absolute;
        top: 100%;
    }
    .setting-btn {
        height: 40px !important;
        width: 40px !important;
    }
    .character-home.chat__main > div > button:nth-child(1) > span > svg {
        height: 40px !important;
        width: 40px !important;
    }
    .character-home.chat__main > div > button:nth-child(2) > span > svg {
        height: 80px !important;
        width: 80px !important;
    }
    
    /* Chat */
    .chat__container {
        grid-template-columns: 30% 70% !important;
        left: 0px;
        position: absolute;
        width: calc(100% + 30px);
    }
    .chat__message-box {
        bottom: 0px;
        height: 100%;
        padding: 0px 0px 10px 0px !important;
        position: fixed;
        top: 0px;        
    }
    /* Avatar */
    .character-home {
        background-color: #292b41;
        margin-top: 72px;
    }
    
    /* Chat */
    if bubblescolor {
        .message__item {
            color: bubblescolor !important;
        }
    }
    if bubblestext {
        .message__item {
            font-size: bubblestext !important;
        }
    } 
    if chattextareasize {
        input {
            font-size: chattextareasize !important;
        }
    }
    
    .messages__box {
        margin-bottom: 20px !important;
        padding: 0px 40px 0px 40px !important;
        z-index: 9999;
    }
    
    /* Save space between chat bubbles */
    .message-item__wrapper {
        margin: 10px 0px 10px 0px !important;
    }
    
    /* Topic */
    .topic {
        font-size: 14px !important;
    }
    
    /* Textarea */
    .el-input__wrapper {
        border-radius: 30px;
    }
    .el-input__wrapper.is-focus {
        border-radius: 30px;
        box-shadow: 0 0 0 1px var(--el-input-focus-border) !important;
    }
    
    /* Bubbles size */
    .messages__box {
        width: 100%;
    }
    .message-item__wrapper {
        display: flex !important;
        align-self: start !important;
        -webkit-box-pack: start !important;
        justify-content: start !important;
        height: fit-content !important;
    }
    .message__item {
        border-radius: 8px 20px 20px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: 80% !important;
    }
    .message-item__wrapper-is-me {
        align-self: end !important;
        display: flex !importan...