.form_f75fb0 { display: grid; grid-template-areas: "floatingBars floatingBars floatingBars" "stackedBars stackedBars stackedBars" "stickerPreviews stickerPreviews stickerPreviews" "stickerPreviewDivider stickerPreviewDivider stickerPreviewDivider" "channelAttachmentArea channelAttachmentArea channelAttachmentArea" "textArea textArea textArea" "accessoryBarLeft accessoryBarText accessoryBarRight"; grid-template-columns: [start] min-content [textBar-start] 1fr [textBar-end] min-content [end]; background: var(--background-gradient-highest,var(--chat-background-default)); border: 1px solid var(--border-faint); border-radius: var(--radius-sm); margin-left: var(--space-xs); margin-right: var(--space-xs); margin-bottom: var(--space-xs); padding: 0 !important; transition: border-color .2s ease; &:focus-within { border-color: var(--border-subtle); } > div:not([class]), .channelBottomBarArea_f75fb0, .channelTextArea__74017, .scrollableContainer__74017, .inner__74017 { display: contents; } .floatingBars__74017 { grid-area: floatingBars; } .stackedBars__74017 { grid-area: stackedBars; } .stickerPreviews_a4cf0b { grid-area: stickerPreviews; } .stickerPreviewDivider_a4cf0b { grid-area: stickerPreviewDivider; } .channelAttachmentArea_b77158 { grid-area: channelAttachmentArea; } .textArea__74017 { grid-area: textArea; height: unset !important; > div { max-height: 144px; overflow: hidden scroll; &::-webkit-scrollbar { width: 12px; height: 12px } &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-track { background-clip: padding-box; border: 4px solid transparent } &::-webkit-scrollbar-track { border-width: medium; border-width: initial } &::-webkit-scrollbar-thumb { background-color: hsl(var(--primary-800-hsl)/.6); border-radius: 8px } } } div:is(.attachWrapper__0923f, .attachButton__74017) + .textArea__74017:after { content: ""; position: absolute; bottom: -1px; left: 8px; right: 8px; border-top: 1px solid var(--background-mod-subtle); height: 1px; } .slateTextArea_ec4baf.slateTextArea_ec4baf { margin-left: 15px; } .attachWrapper__0923f, .attachButton__74017 { grid-area: accessoryBarLeft; } .attachWrapper__0923f { display: flex; padding: 0; padding-left: 12px; } .attachButton__74017 { background: transparent !important; grid-area: accessoryBarLeft; margin: 0; pointer-events: none; } .attachButtonInner__0923f { pointer-events: all; } .icon__4d3a9 { align-items: center; box-sizing: border-box; display: flex; height: var(--accessoryHeight); min-height: 100%; padding: var(--space-4) var(--space-12) var(--space-4) var(--space-md); } .wrapper__1a58a, .wrapper__1a58a svg, .wrapper_ca5f52, .wrapper_ca5f52 svg { width: 20px !important; height: 20px !important; } .buttons__74017 { height: var(--accessoryHeight); min-height: 100%; grid-area: accessoryBarRight; padding-right: 12px; &:empty, &:has(.separator_aa63ab:first-child) { display: none; } } } .scroller__36d07:is(.gradientDefault_36d07, .typingGradientNotAtBottom__36d07) { -webkit-mask: linear-gradient(180deg,#000,transparent) bottom /100% 16px no-repeat,linear-gradient(#000,#000) top /100% calc(100% - 15px) no-repeat; mask: linear-gradient(180deg,#000,transparent) bottom /100% 16px no-repeat,linear-gradient(#000,#000) top /100% calc(100% - 15px) no-repeat; } .chatGradientBase__36d07 { background: linear-gradient(to bottom,transparent,var(--background-base-lower) 8px,var(--background-base-lower) 100%); height: 16px; } .base_b88801.base_b88801 { grid-area: accessoryBarText; height: var(--accessoryHeight); min-height: 100%; padding-left: var(--space-xs); position: unset; } .text_b88801.text_b88801 { margin-left: var(--space-xs); } .cooldownWrapper_b21699 { padding: 0; margin: 0 var(--space-xs); &:after { content: ""; background-color: var(--border-faint); height: var(--chat-markup-line-height); margin-left: var(--space-xs); width: 1px; } } .form_f75fb0:has(.channelTextAreaDisabled__74017) .cooldownWrapper_b21699:after { display: none; } .uploadInput__0923f { display: none; } .expressionPickerPositionLayer__74017 { top: unset !important; right: 74px !important; bottom: 74px; } .wrapper__44df5.wrapper__44df5 { grid-area: floatingBars; margin: 0; border: 0; } .density-compact { --accessoryHeight: 36px; } .density-default { --accessoryHeight: 44px; } .density-cozy { --accessoryHeight: 52px; }