Poe Chat by gamatek

/* ==UserStyle==
@name         Poe
@version      20240430.12.35
@namespace    https://userstyles.world/user/gamatek
@description  Discord Nitro "Retro Storm" theme on Poe.
@author       gamatek
@license      No License
==/UserStyle== */

@-moz-document domain("poe.com") {
:root {
    --bg-overlay-color: 0 0 0;
    --bg-overlay-color-inverse: 255 255 255;
    --bg-overlay-opacity-3: 0.7;
    --bg-overlay-opacity-chat: 0.8;
    --bg-overlay-opacity-selected: 0.4;
    --bg-overlay-opacity-selected-inverse: 0.15;

    --bg-gradient-retro-storm-1: hsl(202, 47%, 42.9%);
    --bg-gradient-retro-storm-2: hsl(241, 27.8%, 47.3%);
    --background-floating: hsl(220, 8.1%, 7.3%);
    --elevation-high: 0 8px 16px hsla(0, 0%, 0%, 0.24);
    --interactive-normal: hsl(215, 8.8%, 73.3%);
    --status-danger: hsl(359, 87.3%, 59.8%);
    --brand-560: hsl(235, 51.4%, 52.4%);

    --custom-theme-background: linear-gradient(
        148.71deg,
        var(--bg-gradient-retro-storm-1) 5.64%,
        var(--bg-gradient-retro-storm-2) 26.38%,
        var(--bg-gradient-retro-storm-2) 49.92%,
        var(--bg-gradient-retro-storm-1) 73.12%
    );

    --bg-overlay-3: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-3)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-3))
    ) fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;

    --bg-overlay-chat: linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-chat)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-chat))
    ) fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;
    
    --bg-overlay-selected: linear-gradient(
        rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-selected-inverse)),
        rgb(var(--bg-overlay-color-inverse) / var(--bg-overlay-opacity-selected-inverse))
     ) fixed 0 0 / cover,
    linear-gradient(
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-selected)),
        rgb(var(--bg-overlay-color) / var(--bg-overlay-opacity-selected))
     ) fixed 0 0 / cover,
    var(--custom-theme-background) fixed 0 0 / cover;
}

/* Home Chat */
.MainColumn_column__UEunw {
    width: 100%;
}

.ChatHomeMain_container__l4uRf {
    margin-top: var(--header-height);
}

.ChatHomeMain_inputContainer__9mgRh {
    margin-bottom: 10%;
}

.ChatMessageInputContainer_textArea__fNi6E:after,
.ChatMessageInputContainer_textArea__fNi6E>textarea {
    max-height: 500px;
    line-height: 22px;
}

/* Sidebar */
.MainLeftSidebar_sidebarContainer__yL1iH {
    background: var(--bg-overlay-3);
}

.MainLeftSidebar_sidebar__C6HpK,
.MainLeftSidebar_sidebar__C6HpK section {
    background: none;
}

.SidebarItem_item__24u_X[data-active=true] {
    background: var(--bg-overlay-selected);
}

/* Chat */
.ChatMessagesView_infiniteScroll__vk3VX {
    width: 100%;
}

.SidebarLayout_main__0ZApe,
.ChatPageMainFooter_footerInner__BEj26 {
    background: var(--bg-overlay-chat);
}

/* Context Menu */
.DropdownMenuItemList_itemList__JiLsy {
    font-size: 14px;
    border-radius: 4px;
    padding: 6px 8px;
    border: none;
    background: var(--background-floating);
    box-shadow: var(--elevation-high);
}

.DropdownMenuItem_item__EIRcp {
    padding: 6px 8px;
    margin: 2px 0;
    border-radius: 2px;
    max-height: 32px;
    flex-direction: row-reverse;
    font-weight: 500;
}

.DropdownMenuItem_item__EIRcp:not(.DropdownMenuItem_destructive__Bi9MD):hover {
    background: var(--brand-560);
    color: hsl(0, 0%, 100%);
}

.DropdownMenuItem_destructive__Bi9MD:hover {
    background: var(--status-danger);
    color: hsl(0, 0%, 100%);
}

.DropdownMenuItem_item__EIRcp + .DropdownMenuItem_item__EIRcp {
    border: none;
}

.DropdownMenuItem_item__EIRcp {
    color: var(--interactive-normal);
}

.DropdownMenuItem_destructive__Bi9MD {
    color: var(--status-danger);
}

.ChatMessageDropdownMenu_iconWrapper__NegmY {
    width: 18px;
    height: 18px;
    margin-left: auto;
}

.ChatMessageDropdownMenu_icon__zPQO6,
.ChatHistoryDropdownMenu_deleteIcon__Zq2zf,
.ChatMessageDropdownMenu_deleteIcon__S5pfm {
    fill: currentColor !important;
}

.Message_botMessageBubble__aYctV {
    max-width: 100%;
    background: none;
    padding: 0 0 0 58px;
    margin-top: -20px;
    font-size: 16px;
}

.ChatMessage_chatMessage__xkgHx .BotHeader_title__cURS_ {
    gap: 16px;
    font-weight: 500;
}

.ChatMessage_chatMessage__xkgHx .BotHeader_textContainer__kVf_I {
    overflow: visible;
}

.ChatMessage_chatMessage__xkgHx .BotHeader_textContainer__kVf_I:hover {
    text-decoration: underline;
}

.ChatMessage_chatMessage__xkgHx .BotImage_botImage__YvB45 {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.ChatMessage_chatMessage__xkgHx .ChatMessage_headerWrapper__UeGSI,
.ChatMessage_chatMessage__xkgHx .BotHeader_title__cURS_ {
    align-items: flex-start;
    line-height: 1;
}

/* Chat Input */
.ChatPageMainFooter_footerInner__BEj26 {
    width: 100%;
}

.ChatMessageInputFooter_footer__v4dFF {
    background: var(--bg-overlay-3);
    border-radius: 8px;
}

.ChatMessageInputFooter_footer__v4dFF .ChatMessageInputContainer_inputContainer__s2AGa,
.ChatMessageInputFooter_footer__v4dFF .ChatMessageInputContainer_inputContainer__s2AGa:focus-within:after{
    border: none;
}

.ChatMessageInputFooter_footer__v4dFF .ChatMessageInputContainer_textArea__fNi6E {
    padding: 10px 0 12.5px 0;
}

.ChatMessageInputFooter_footer__v4dFF .GrowingTextArea_textArea__ZWQbP {
    font-size: 16px;
}

.ChatMessageInputFooter_footer__v4dFF .ChatMessageInputFooter_chatBreakButton__sGik8 {
    margin-left: 0;
}
}