Kindroid responsive + customizations v3.xx by breat

/* ==UserStyle==
@name            Kindroid responsive + customizations v3.xx
@description     Kindroid website is more suitable for wide screens + add customizations (theme) + add new features (scripts).
@version         3.44.3
@author          BreatFR (https://breat.fr)
@namespace       https://gitlab.com/breatfr
@homepageURL     https://gitlab.com/breatfr/kindroid
@supportURL      https://discord.gg/fSgDHmekfG
@license         BY-NC-ND; https://creativecommons.org/licenses/by-nc-nd/4.0/
@preprocessor    stylus

@var select     actionsstyle                        "Actions texts style" {
    "Default": "actionsdefault",
    "Asterisks": "asterisks",
    "Asterisks + bold": "asterisksbold",
    "Asterisks + bold + no italic": "asterisksboldnoitalic",
    "Bold": "bold",
    "Bold + no italic": "boldnoitalic",
    "No italic": "noitalic"
}
@var color      actionscolor                        "Actions texts color choice"            rgb(136, 136, 136)
@var checkbox   avatarchoice                        "Avatar choice"                         0
@var text       avatarchoiceurl                     "Avatar choice URL"                     "URL between quotes"
@var select     avatarposition                      "Avatar position" {
    "Large Middle": "avatarlargemiddle",
    "Large Top": "avatarlargetop",
    "Large Bottom": "avatarlargebottom",
    "Small Middle": "avatarsmallmiddle",
    "Small Top": "avatarsmalltop",
    "Small Bottom": "avatarsmallbottom",
}
@var checkbox   avatarchat                          "Avatar chat mode (for chat page require: Avatar choice & Avatar choice for us, System bubbles Dark is recommanded, for group chat page require Avatar choice for us & Avatar Rectangle)"                           0
@var checkbox   ouravatarchoice                     "Avatar choice for us"                  0
@var text       ouravatarchoiceurl                  "Avatar choice for us URL"              "URL between quotes"
@var checkbox   avatarcircle                        "Avatar circle"                         0
@var checkbox   avatarcustomposition                "Avatar custom position"                0
@var text       avatarcustompositionvalue           "Avatar custom position value"          12vh
@var select     avatarsize                          "Avatar size" {
    "Large": "avatarlarge",
    "Small": "avatarsmall",
    "Hidden": "avatarhidden"
}
@var checkbox   avatarcustomsize                    "Avatar custom size"                    0
@var text       avatarcustomsizevalue               "Avatar custom size value"              512px
@var checkbox   avatarrectangle                     "Avatar rectangle"                      1
@var checkbox   avatarrectanglecustomheight         "Avatar rectangle custom height"        0
@var text       avatarrectanglecustomheightvalue    "Avatar custom height value"            256px
@var checkbox   avatarzoom                          "Avatar hoverzoom"                      0
@var select     avataron                            "Avatar on" {
    "Left side": "leftside",
    "Right side": "rightside"
}
@var select     bgchoice                            "Background choice" {
    "❤️ Hearts": "heartbg",
    "⬜ None": "nobg",
    "❔ Custom": "custombg"
}
@var color      bgcolor                             "Background color"                      #101010
@var text       custombgurl                         "Background URL"                        "URL between quotes"
@var checkbox   blurcontent                         "Blur content"                          0
@var color      bubblescolor                        "Bubbles font color"                    #cbcbcb
@var text       fontsize                            "Custom font size"                      1.2rem
@var checkbox   gradientregenerate                  "Gradient regenerate icon"              1
@var checkbox   hidenames                           "Hide names in bubbles"                 1
@var checkbox   manuallyedited                      "Manually edited"                       1
@var color      kinbubblesbgcolor                   "Kin bubbles background color"          rgb(33, 27, 25)
@var text       kinbubblesbgurl                     "Kin bubbles background URL"            "URL between quotes"
@var color      ourbubblesbgcolor                   "Our bubbles background color"          rgb(27, 28, 30)
@var text       ourbubblesbgurl                     "Our bubbles background URL"            "URL between quotes"
@var select     systembubblesstyle                  "System bubbles style" {
    "Left": "systembubblesleft",
    "Dark": "systembubblesdark",
    "Dark Wide": "systembubblesdarkwide"
}
@var checkbox   iconshover                          "Icons hover"                           1
@var checkbox   hidetrialbar                        "Hide trial bar"                        1

@var checkbox   imageborder                         "Image border on hover"                 1
@var checkbox   requestimage                        "Request image button at top"           1
@var checkbox   continueconvauto                    "Replace Continue/Pause conversation in group chat by an icon (only for automatic mode)"           1
@var checkbox   continueconvmanual                  "Optimize the avatar list in group chat for wide screen (only for manual mode)"           0
@var checkbox   continueconvmanualcenter            "Optimize the avatar list in group chat for wide screen and center them (only for manual mode)"           0
@var checkbox   modalsborder                        "Modals border"                         1
@var checkbox   biggerscreensharing                 "Bigger Screen Sharing (don't use if captions enabled)"                 0
@var checkbox   nosharring                          "No sharring"                           0
@var checkbox   noscrollbars                        "No scrollbars"                         1
@var checkbox   notranslateicon                     "No translate icon"                     0
@var checkbox   nodiscord                           "No discord banner"                     0
==/UserStyle== */

/* ==Credits==
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
==/Credits== */

/* ==Support==
ko-fi           https://ko-fi.com/breatfr
PayPal          https://paypal.me/breat
==/Support== */

@-moz-document domain("kindroid.ai") {
/* ===================================================================================================================================
    Whole kindroid domain
=================================================================================================================================== */
    /* Versions */
    :root {
        --themeversionpc: 'TPC v3.44.3';
        --themeversionmobile: 'TM v1.0.2';
        --customavatarsgroupchat: 'CAG v1.0.0';
        --chatversionpc: 'CPC v2.0.10';
        --chatversionmobile: 'CM v2.0.10';
        --selfiesversionpc: 'SPC v2.0.1';
        --selfiesversionmobile: 'SM v2.0.1';
        --notepadversion: 'NP v2.0.4';
        --trversion: 'TR v2.0.2';
        --tvversion: 'TV v2.0.3';
        --author: ' by BreatFR (https://breat.fr)';
        --install1: ' usercssjs.breat.fr ';
        --install2: ' gitlab.com/breatfr/kindroid ';
        --space: '\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0';
        --support1: ' ko-fi.com/breatfr ';
        --support2: ' paypal.me/breat ';
        --fontsize: fontsize;
    }

    @media screen and (min-width: 900px) {
        .css-x3odei::after,
        .css-z0osps::after {
            background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            content: "Versions (hover to show)";
            content: var(--themeversionpc) ' · ' var(--themeversionmobile)' · ' var(--customavatarsgroupchat) ' · ' var(--chatversionpc) ' · ' var(--chatversionmobile) ' · ' var(--selfiesversionpc) ' · ' var(--selfiesversionmobile) ' · ' var(--notepadversion) ' · ' var(--trversion) ' · ' var(--tvversion) var(--author) '\A''Install: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_breat.fr.png") var(--install1) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_gitlab.png") var(--install2) var(--space) ' Support me: ' url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_ko-fi.png") var(--support1) url("https://gitlab.com/breatfr/kindroid/-/raw/main/images/icon_paypal.png") var(--support2);
            display: block;
            font-family: var(--chakra-fonts-PoppinsRegular);
            font-size: 1.2rem;
            left: 50%;
            position: absolute;
            text-align: center;
            top: 49%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            width: 100%;
            white-space: pre-line;
        }

        @-moz-document url-prefix() {
            /* Fix for firefox */
            .css-x3odei::after,
            .css-z0osps::after {
                background: linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
                background: -moz-linear-gradient(88.55deg, rgb(139, 109, 255) 22.43%, rgb(254, 132, 132) 92.28%);
                background-clip: text;
                color: transparent;
                display: inline-block;
                font-family: var(--chakra-fonts-PoppinsRegular);
                font-size: 1.2rem;
                left: 0;
                position: absolute;
                text-align: center;
                top: 0;
                transform: translate(0, 0);
                width: 100%;
                white-space: pre-line;
            }
            body {
                overflow-y: hidden !important;
    ...