/*!
 * Vendored from Zulip (https://github.com/zulip/zulip), commit 1d46e04.
 * Copyright the Zulip project contributors. Licensed under the Apache License,
 * Version 2.0. A copy of the licence and the project NOTICE are kept at
 * site/matrix/DONOR-LICENSES/zulip/.
 *
 * Compiled from web/styles/*.css through Zulip's own PostCSS pipeline
 * (postcss-extend-rule, postcss-simple-vars with web/src/css_variables.ts,
 * postcss-preset-env). No rule here was rewritten: this is the donor's
 * stylesheet, not a paraphrase of it.
 *
 * Not modified. The Aurekai surface that loads it supplies its own DOM.
 */

/* ---- app_variables.css ---- */
:root {
    /* Zulip color palette */
    /* stylelint-disable color-no-hex */
    /* grey */
    --grey-0: #f7f8fc;
    --grey-50: #f2f3f7;
    --grey-100: #e9ebf2;
    --grey-150: #dfe1e8;
    --grey-200: #cbcdd6;
    --grey-250: #bbbdc8;
    --grey-300: #aaadba;
    --grey-350: #9ea1ae;
    --grey-400: #9194a3;
    --grey-450: #858897;
    --grey-500: #767988;
    --grey-550: #626573;
    --grey-600: #535663;
    --grey-650: #444754;
    --grey-700: #393c49;
    --grey-750: #2d303c;
    --grey-800: #242631;
    --grey-850: #181a25;
    --grey-900: #11131e;
    --grey-950: #0a0c17;
    --grey-1000: #070812;

    /* purple */
    --purple-0: #f3f2fd;
    --purple-50: #ededfc;
    --purple-100: #e5e5fc;
    --purple-150: #dbdaff;
    --purple-200: #c9c7fd;
    --purple-250: #b8b4ff;
    --purple-300: #aba5fd;
    --purple-350: #9e94fd;
    --purple-400: #9283fd;
    --purple-450: #8a70fc;
    --purple-500: #7f63ee;
    --purple-550: #7153dc;
    --purple-600: #5f3cc5;
    --purple-650: #522ab4;
    --purple-700: #4615a3;
    --purple-750: #370386;
    --purple-800: #2c0070;
    --purple-850: #200154;
    --purple-900: #13013a;
    --purple-950: #0d002c;
    --purple-1000: #070020;

    /* violet */
    --violet-0: #f1f3fe;
    --violet-50: #eceefc;
    --violet-100: #e3e6fd;
    --violet-150: #d8dcfc;
    --violet-200: #c3c9fe;
    --violet-250: #b1b7fe;
    --violet-300: #a3a9fc;
    --violet-350: #9398fd;
    --violet-400: #8688fd;
    --violet-450: #7977fe;
    --violet-500: #6e69f3;
    --violet-550: #6159e1;
    --violet-600: #4f42c9;
    --violet-650: #4331b8;
    --violet-700: #381da7;
    --violet-750: #2b0e8a;
    --violet-800: #230773;
    --violet-850: #180557;
    --violet-900: #0e033c;
    --violet-950: #08012e;
    --violet-1000: #050121;

    /* blue */
    --blue-0: #eff3fe;
    --blue-50: #e5edfe;
    --blue-100: #dae5fd;
    --blue-150: #cbdbfd;
    --blue-200: #b4cafd;
    --blue-250: #97b6fe;
    --blue-300: #84a8fd;
    --blue-350: #7199fe;
    --blue-400: #5f8bfc;
    --blue-450: #4d7bfd;
    --blue-500: #406ef6;
    --blue-550: #325ce3;
    --blue-600: #2145cb;
    --blue-650: #1633b9;
    --blue-700: #0f23ac;
    --blue-750: #0a089b;
    --blue-800: #06037c;
    --blue-850: #03025c;
    --blue-900: #020145;
    --blue-950: #010034;
    --blue-1000: #010024;

    /* green */
    --green-0: #ebffee;
    --green-50: #d0fed8;
    --green-100: #b4ffc3;
    --green-150: #a3f9b5;
    --green-200: #82e89a;
    --green-250: #6bd586;
    --green-300: #57c273;
    --green-350: #41ae61;
    --green-400: #2f9f52;
    --green-450: #158f44;
    --green-500: #07833c;
    --green-550: #087736;
    --green-600: #09672e;
    --green-650: #035926;
    --green-700: #054f22;
    --green-750: #05401b;
    --green-800: #013112;
    --green-850: #03260e;
    --green-900: #001d07;
    --green-950: #011505;
    --green-1000: #010d03;

    /* orange */
    --orange-0: #fef4e3;
    --orange-50: #ffeccd;
    --orange-100: #ffda9b;
    --orange-150: #fecb6f;
    --orange-200: #febe3d;
    --orange-250: #f8b325;
    --orange-300: #eba002;
    --orange-350: #db920d;
    --orange-400: #c8850d;
    --orange-450: #ba7401;
    --orange-500: #a96a05;
    --orange-550: #9c5c00;
    --orange-600: #88520c;
    --orange-650: #764607;
    --orange-700: #623b0c;
    --orange-750: #4f2e06;
    --orange-800: #3f2404;
    --orange-850: #321c04;
    --orange-900: #291602;
    --orange-950: #200f01;
    --orange-1000: #180c03;

    /* red */
    --red-0: #fcf3f2;
    --red-50: #ffe4e0;
    --red-100: #ffd4cd;
    --red-150: #ffbfb5;
    --red-200: #fea497;
    --red-250: #ff8b7c;
    --red-300: #fd7465;
    --red-350: #fd5f50;
    --red-400: #f34c3e;
    --red-450: #e1392e;
    --red-500: #d22720;
    --red-550: #c0070a;
    --red-600: #ac0508;
    --red-650: #960708;
    --red-700: #7c0203;
    --red-750: #650102;
    --red-800: #4f0001;
    --red-850: #400101;
    --red-900: #330201;
    --red-950: #280100;
    --red-1000: #1a0200;

    --csstools-color-scheme--light: initial;

    color-scheme: light;

    /* Variable for setting the viewport to full height.
       As of late 2025, we still support browsers (e.g.,
       Chrome 105) that do not support dynamic viewport
       units. 100% is the legacy full-height value. */
    --full-height-dynamic-viewport: 100%;

    /* Exposed so callers can reserve matching padding on a
       resizable box, keeping handles out of the clickable content
       area. Consumed by box_resize.css. */
    --resizable-box-handle-size: 10px;

    /* GIF picker overlay: resize bounds are expressed in columns so
       the picker resizes to useful sizes. Tweaking these retunes the
       bounds, grid columns, and gap together. */
    --gif-picker-gif-column-min-width: 200px;
    --gif-picker-gif-column-gap: 6px;
    /* Horizontal chrome inside .gif-grid-in-popover around the grid
       columns, measured against its border-box. Breakdown: 3px × 2
       .gif-scrolling-container margin, 2px × 2 .gif-picker-content
       padding, and handle-size padding on each side reserved for
       resize handles. SimpleBar's scrollbar is a positioned overlay
       and doesn't take content width, so nothing extra is reserved
       for it. Keep in sync with popovers.css. */
    --gif-picker-grid-horizontal-chrome: calc(
        10px + 2 * var(--resizable-box-handle-size)
    );
    --gif-picker-viewport-safe-margin: 20px;

    /* Min = 1 column. Max = 5 columns, capped at viewport minus safe
       margins. */
    --gif-picker-grid-min-width: calc(
        var(--gif-picker-gif-column-min-width) +
            var(--gif-picker-grid-horizontal-chrome)
    );
    --gif-picker-grid-max-width: min(
        calc(
            5 * var(--gif-picker-gif-column-min-width) + 4 *
                var(--gif-picker-gif-column-gap) +
                var(--gif-picker-grid-horizontal-chrome)
        ),
        calc(100vw - 2 * var(--gif-picker-viewport-safe-margin))
    );
    /* Room for the search input, one row of GIFs, the footer, and
       the outer handle-size padding on the top and bottom. */
    --gif-picker-grid-min-height: calc(
        300px + 2 * var(--resizable-box-handle-size)
    );
    --gif-picker-grid-max-height: calc(
        100vh - 2 * var(--gif-picker-viewport-safe-margin)
    );
}
@supports (height: 100dvh) {
:root {
        --full-height-dynamic-viewport: 100dvh;
        --gif-picker-grid-max-height: calc(
            100dvh - 2 * var(--gif-picker-viewport-safe-margin)
        );
}
    }
:root {

    /*
    This is the header, aka the navbar.
    */
    --header-height: 2.5em; /* 40px at 16px em */
    --header-line-height: 40px;
    /*
    At 600px, the header starts taking up more than 5%
    of the screen. We make it shorter to leave more space
    to see the rest of the app. */
}
@media (max-height: 599.98px) {
:root {
        --header-height: 1.875em; /* 30px at 16px em */
}
    }
:root {

    /*
    Height of the search box, which appears in the header.
    */
    --search-box-height: 2em; /* 32px at 16px em */
    --search-box-width: 9.375em; /* 150px at 16px em */
}
@media (max-width: 767.98px) {
:root {
        --search-box-width: 2.5em; /* 40px at 16px em */
}
    }
/*
        On very short screens, the search box's height becomes
        is reduced to fit the available space.
    */
@media (max-height: 599.98px) {
:root {
        --search-box-height: 1.75em; /* 28px at 16px em */
}
    }
:root {

    --search-pill-label-min-width: 2.5em; /* 35px at 14px/em */

    /*
    This is the space for the searchbar's search icon, and the left padding
    for the search suggestions so they match up with searchbar content.
    */
    --search-left-padding: 35px;

    /*
    Since #navbar_alerts_wrapper can take variable height depending upon
    window width / language, we sync its height in navbar_alerts.js
    */
    --navbar-alerts-wrapper-height: 0px;
    --navbar-fixed-height: calc(
        var(--header-height) + var(--navbar-alerts-wrapper-height)
    );
    /* Keep content from colliding with the search box. */
    --navbar-content-righthand-offset: 5px;

    /*
    We have a 10px gutter below the header,
    which often needs to be respected by both
    the elements above it and below it on
    the y-axis, due to absolute positioning.
    */
    --header-padding-bottom: 10px;

    /*
    Our sidebars (and anything that top-align
    with them) go beneath the header.
    */
    /* The width of the empty space in the sidebar to separate
       content from the edge of the window */
    --left-sidebar-padding-left: 8px;
    /* The empty space between left-sidebar row icons and
       the row content.
       7px at 16px/1em */
    --left-sidebar-icon-content-gap: 0.4375em;
    /* The space allotted in gridded rows for the toggle icon. */
    --left-sidebar-header-icon-toggle-width: 20px;
    /* 26px at 16px/1em */
    --left-sidebar-vdots-width: 1.625em;
    /* Other rows need an offset to preserve a column the
       entire height of the left sidebar for where toggles sit. */
    --left-sidebar-toggle-width-offset: var(
        --left-sidebar-header-icon-toggle-width
    );
    --right-sidebar-header-icon-toggle-width: 20px;
    --right-sidebar-toggle-width-offset: calc(
        var(--right-sidebar-header-icon-toggle-width) - 4px
    );
    /* This represents the space in the sidebar reserved for symbols like
       the #; labels like the stream name go to the right of this. */
    --left-sidebar-icon-column-width: 1em;
    /* Offset on unreads to make New topic button appear centered. */
    --left-sidebar-unread-offset: 6.5px;
    /* space direct message / stream / topic names from unread counters
    and @ mention indicators by 3px on the right */
    --left-sidebar-before-unread-count-padding: 3px;
    /* 15px is the approximate width of a single-digit
       unread marker. */
    /* 15px at 8px/1em (masked unreads are sized to 0.5em) */
    --left-sidebar-single-digit-unread-width: 1.875em;
    --left-sidebar-right-margin: 12px;
    /* 289px at 14px/1em */
    --left-sidebar-max-width: calc(
        20.6429em - var(--left-sidebar-right-margin)
    );
    --realm-logo-max-width: 12.5em; /* 200px at 16px em */
    /* Value updated on realm_logo.render() */
    --realm-logo-current-width: var(--realm-logo-max-width);
    /* 10px is just extra margin for content separation */
    --middle-column-left-margin-fluid-layout: calc(
        var(--header-height) + var(--realm-logo-current-width) + 10px
    );
    /* Sidebar width is 1/3 of the screen at smaller
       sizes, but gets held to the left sidebar's max width.
       This is very useful for areas in the CSS codebase
       that rely on this value, but not necessarily as
       applied to `width:` or `max-width:`. */
    --left-sidebar-width: min(33.3333vw, var(--left-sidebar-max-width));
    --right-sidebar-left-spacing: 5px;
    /* 50px per icon * 4 icons + 3px space (legacy) = 203px at 20px/1em */
    --right-column-collapsed-sidebar-width: 10.15em;
    /* 288px at 14px/1em */
    --right-sidebar-max-width: 20.57em;
    /* We open the right sidebar at xl_min at a size of 240px,
       here expressed as precisely 20% of the viewport. */
    --right-sidebar-width: min(20vw, var(--right-sidebar-max-width));
    /* 25px at 16px/1em */
    --right-sidebar-vdots-width: 1.5625em;
    /* The width of the icon is reduced by 2px, to account for 2px
       of top and bottom margin needed for hover backgrounds to
       not touch the row outline. */
    --left-sidebar-header-icon-width: calc(1.7142em - 2px); /* 24px / 14px em */
    /* Space between section in the left sidebar. */
    --left-sidebar-sections-vertical-gutter: 8px;
    /* The legacy value here is 25px; that's the unitless legacy line-height
       of 20px, plus 5px at 14px/1em */
    --left-sidebar-bottom-scrolling-buffer: calc(
        (var(--legacy-body-line-height-unitless) * 1em) + 0.3571em
    );
    /* Used in both left and right sidebar at the bottom, to allow
       the user to scroll past the bottom-most elements a little bit.

       Value is chosen to avoid elements overlapping with the browser's URL
       display when hovering links, and should not scale with font size. */
    --sidebar-bottom-spacing: 25px;
    --sidebar-filter-bottom-spacing: 3px;

    /* 5px / 16px em */
    --left-sidebar-direct-messages-bottom-divider-padding: 0.3125em;

    /* Left sidebar modal */
    /* Close area height chosen by playing around with different heights and this one felt best. */
    --left-sidebar-modal-close-area-height: 1.9em;
    --left-sidebar-modal-close-area-padding-top: calc(
        1.9em + var(--header-padding-bottom)
    );

    /* We base sidebar row heights on their line heights.
       Prominent rows include things like headers (e.g., VIEWS)
       as well as navigation items. Everything else takes
       the smaller line-height. */
    --line-height-sidebar-row-prominent: 1.7142em; /* 24px / 14px em */
    --line-height-sidebar-row: 1.5714em; /* 22px / 14px em */
    --line-height-sidebar-row-with-avatars: 1.3571em; /* 19px / 14px em */
    --line-height-sidebar-topic-inner: 1.2em;
    /* This spacing value is to compensate for the
       additional space of the prominent row-height
       from within the inner topic value. */
    --spacing-top-bottom-sidebar-topic-inner: calc(
        (
                var(--line-height-sidebar-row-prominent) -
                    var(--line-height-sidebar-topic-inner)
            ) /
            2
    );

    /* Right sidebar */
    /* Vlad's design adds 2px of extra padding beyond the
       space created by the padding-left on .right-sidebar,
       which separates the right sidebar from the message area. */
    --right-sidebar-padding-left: 2px;
    --right-sidebar-heading-left-spacing: 5px;
    --right-sidebar-avatar-width: 2em;
    --right-sidebar-avatar-height: var(--right-sidebar-avatar-width);
    --right-sidebar-avatar-right-margin: 0.85ch;
    --right-sidebar-presence-circle-width: 1.4285em; /* 20px at 14px em */
    /* toggle + avatar + avatar margin + 2px border */
    --right-sidebar-text-indent-with-avatar: calc(
        var(--right-sidebar-header-icon-toggle-width) / 2 +
            var(--right-sidebar-avatar-width) +
            var(--right-sidebar-avatar-right-margin) + 2px
    );
    --right-sidebar-text-indent-without-avatar: calc(
        var(--right-sidebar-toggle-width-offset) +
            var(--right-sidebar-presence-circle-width)
    );

    /* Tippy popover related values */
    --navbar-popover-menu-min-width: 230px;
    --message-actions-popover-min-width: 230px;
    --user-group-info-popover-min-width: 16.4285em; /* 230px / 14px em */
    --topic-actions-popover-min-width: 200px;
    --user-card-popover-min-width: 200px;
    --stream-card-popover-min-width: 16.4285em;

    /* Image and video thumbnail sizing; updated via JavaScript */
    --media-preview-max-height: 10em;

    /* Information density and typography values */
    /* The legacy values here are updated via JavaScript */
    --base-font-size-px: 14px;
    --base-line-height-unitless: 1.214;
    --base-maximum-block-height-em: 1.425em;
    --line-fitted-vertical-align-offset-em: 0;
    --markdown-interelement-space-px: 5px;
    --markdown-interelement-doubled-space-px: calc(
        var(--markdown-interelement-space-px) * 2
    );
    --markdown-interelement-halved-space-px: calc(
        var(--markdown-interelement-space-px) / 2
    );
    /* Certain elements need to be fitted perfectly to
       the line height; the length here can be used to set
       precise heights, and in the case of square elements,
       a matching precise width as well. */
    --length-line-fitted-block: calc(var(--base-line-height-unitless) * 1em);
    /* Emoji elements are allowed to exceed the perfectly-fit
       line-height. Classic Zulip emoji sizing is a 20px square
       emoji at a 14px font-size, for 1.4286em at 14px/1em. */
    --length-line-oversize-block: 1.4286em;
    /* To avoid disturbing the flow of text around emoji or other
       oversize inline blocks, we calculate a negative margin
       adjustment for offsetting the emoji, top and bottom. */
    --length-line-oversize-block-margin-adjust: calc(
        (
                (
                        min(
                            var(--base-maximum-block-height-em),
                            var(--length-line-fitted-block)
                        )
                    ) -
                    var(--length-line-oversize-block)
            ) /
            2
    );

    /* Legacy values */
    --legacy-body-line-height-unitless: calc(20 / 14);

    /* Special effects */
    --pulse-unread-scale-max: 1.5;

    /* Message area */
    /* In the legacy layout at 16px/1em density, 918.6px is
       the widest the message area gets, so we preserve this
       value to better present a readable message area across
       different info densities and the manual hiding of the
       left and right sidebars.
       918.6px at 16px/1em
    */
    --message-area-max-width: 57.4125em;

    /* Box shadow for overlays across the web app */
    --box-shadow-overlay: none;

    /* Shared sidebar typography and effects values. */
    --font-weight-sidebar-heading: 600;
    --font-weight-sidebar-action-heading: 370;
    --font-variant-sidebar-action-heading: all-small-caps;
    --font-feature-settings-sidebar-action-heading: "c2sc", "smcp";
    /* 17px at 16px/1em = 1.0625em */
    --font-size-sidebar-action-heading: 1.0625em;
    --text-transform-sidebar-action-heading: uppercase;
    --letter-spacing-sidebar-heading: 0.0469em;
    --opacity-sidebar-heading: 0.7;
    --opacity-sidebar-heading-icon: 0.5;
    --opacity-sidebar-heading-hover: 0.9;
    --opacity-left-sidebar-muted: 0.55;
    --opacity-left-sidebar-muted-hover: 0.75;
    --opacity-unread-mention-info: 0.5;
    /* Since --opacity-unread-mention-info is too close to
       --opacity-left-sidebar-muted */
    --opacity-left-sidebar-muted-mentions: 0.3;
    --opacity-right-sidebar-subheading: 0.65;
    --opacity-right-sidebar-subheading-hover: 0.9;
    --opacity-readonly-modal-input: 0.5;
    --opacity-disabled-profile-field-choice-input: 0.7;

    /*
    Message box elements and values.
    */
    /* At very tight line-heights, the focus ring on
       links can get cut off on paragraphs and list
       items that open the senderless message area.
       This padding fixes the cut-off problem, and
       can be used to adjust padding elsewhere in the
       message area as needed.
       2px at 20px/1em */
    --message-box-link-focus-ring-block-padding: 0.1em;
    /* 35px at 14px/1em */
    --message-box-avatar-width: 2.5em;
    --message-box-avatar-height: var(--message-box-avatar-width);
    /* 46px at 14px/1em */
    --message-box-avatar-column-width: 3.2857em;
    /* Increase the margin here to account for the
       focus ring, which is offset by -1px, as well
       as the vertical height between the hover icons
       and focus ring. */
    --message-box-vertical-margin: calc(
        var(--markdown-interelement-space-px) * 1.4
    );
    --message-box-markdown-aligned-vertical-space: var(
        --markdown-interelement-space-px
    );
    /* 22px matches to the width of the padded icon.
       22px at 16px/1em
    */
    --message-box-icon-width: 1.375em;
    /* 25px at 16px/1em */
    --message-box-icon-height: 1.6667em;
    --message-box-height-senderless-single-line-message: calc(
        var(--base-line-height-unitless) * var(--base-font-size-px) +
            calc(var(--markdown-interelement-space-px) * 2)
    );
    /* The line-height on the sender line should coordinate with the
       height of a single-line, senderless message, but never be smaller
       than the height of the hover icons. The sender line never wraps,
       so this just keeps everything in line with the grid definition. */
    --message-box-sender-line-height: max(
        var(--message-box-icon-height),
        var(--message-box-height-senderless-single-line-message)
    );
    /* This width is updated with an exact pixel
       width upon UI initialization. */
    --message-box-timestamp-column-width: 0;
    --last-message-row-border-radius: 0 0 7px 7px;

    /* This length is the primary reference for height
       and image width on URL preview embeds. 112px
       comes from the height of a two-line title and a
       two-line description at a +2 (maximum)
       line-height setting.
       112px at 16px/1em */
    --length-message-preview-embeds: 7em;

    /*
    Reaction container UI scaling.
    */
    --scale-message-reaction-active: 0.96;

    /* Message group bookend and date row UI */
    --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.15);
    --color-border-message-group-spacer-line: var(--csstools-light-dark-toggle--25, rgba(0, 0, 0, 0.15));

    /*
    Left position of unread marker. Only needs to be tracked if it is negative so that
    it doesn't leak through message header.
    */
    --unread-marker-left: -1px;

    /*
    Compose-recipient box minimum height. Used in a flexbox context to
    allow elements like DM pills to stack without breaking out of their
    flex item. 2em is 32px at 16px/1em.
    */
    --compose-recipient-box-min-height: 2em;
    /* 28px at 14px/1em */
    /* Note that this variable can only be used in contexts where
       the font-size doesn't deviate from the base font-size;
       that excludes contexts like .compose_control_button, which
       uses font-sizing to adjust the size of the icon. Related
       values have been noted in comments with this variable name,
       to make their coordination a little less painful. */
    --compose-formatting-buttons-row-height: 2em;

    /*
    Width of the area where the compose box buttons are placed, "inside"
    the right edge of the compose box. This is used for the negative right
    margin and the right padding of the textbox to extend it into the compose
    expand / collapse buttons area, but keep the text from showing under the
    the buttons.
    */
    --composebox-buttons-width: 24px;

    /*
    Width of the send menu area with the Send button, Draft(s) button
    and the vdots.
    */
    --compose-send-controls-width: 112px;
}

@supports (color: light-dark(red, red)) {
:root {
    --color-border-message-group-spacer-line: light-dark(
        rgba(0, 0, 0, 0.15),
        rgba(255, 255, 255, 0.15)
    );
}
}
@supports not (color: light-dark(tan, tan)) {
:root * {
    --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.15);
    --color-border-message-group-spacer-line: var(--csstools-light-dark-toggle--25, rgba(0, 0, 0, 0.15));
    }
}
@media ((min-width: 576px) and (max-width: 848.98px)) {
:root {
        --compose-send-controls-width: 62px;
}
    }
@media (max-width: 575.98px) {
:root {
        --compose-send-controls-width: 28px;
}
    }
:root {

    /* Compose-specific transitions and delays. */
    --compose-recipient-row-transition-delay: 100ms;
    --compose-recipient-row-transition: 150ms ease;

    /*
    User group info popover elements and values.
    */
    --user-group-popover-horizontal-padding: 0.6666em; /* 10px at 15px/1em */
    --user-group-popover-icon-text-gap: 0.3125em; /* 5px at 16px/1em */

    /*
    This isn't scaled with font-size because the flatpickr is a third
    party component that doesn't scale with font size.
    */
    --flatpickr-confirm-button-font-size: 18px;

    /*
    Width to be reserved for document scrollbar when scrolling is disabled.
    Using `scrollbar-gutter` would be more appropriate but doesn't has wide
    support and doesn't work for `fixed` elements.
    */
    --disabled-scrollbar-width: 0px;

    /*
    Right offset of simplebar scrollbar for `.column-right` when browser has
    overlay scrollbars which don't occupy any space. Currently only
    known to present on Mac (all browsers) and Firefox (all OS?). This seems
    more than enough to differentiate right sidebar scrollbar and browser
    scrollbar even if the browser scrollbar is wider.
    */
    --browser-overlay-scrollbar-width: 10px;

    /*
    Sometimes it's necessary to keep elements, especially those with hover
    controls or other interactivity, from appearing beneath Simplebar scroll
    bars.
    */
    --width-simplebar-scroll: 11px;
    --width-simplebar-scroll-hover: 15px;

    /* This is the height occupied by Recent Conversations filters,
       based on the height of the new filter elements in the sidebars
       and for the topics filter. 31px at 16px/1em. */
    --recent-topics-filters-height: 1.9375em;
    /* Legacy margin/flex-gap value for filters. 10px at 14px/1em. */
    --recent-topics-filters-gap: 0.7142em;

    /* Pill dimensions. */
    /* 1.5714em is 22px (border-inclusive) at 14px/1em */
    --height-input-pill: 1.5714em;
    /* Reduce user pill height by 2px to preserve an apparent border
       around them even under `box-sizing: border-box` in the area. */
    --length-user-pill-height: calc(var(--height-input-pill) - 2px);
    /* Fills whole pill height. */
    --length-search-pill-image: var(--length-user-pill-height);
    --length-input-pill-exit: 1.1429em; /* 16px at 14px/em */
    /* Right margin reserved next to .exit and .expand in input_pill.css.
       Anything aligning to the exit button must include this margin. */
    --length-input-pill-exit-margin: 2px;
    --input-pill-side-padding: 0.3571em; /* 5px at 14px/em */
    --vertical-spacing-input-pill: 2px;
    --outer-spacing-input-pill-container: var(--vertical-spacing-input-pill);
    --horizontal-spacing-input-pill: 6px;

    /* User circles. */
    /* 8px at 14px/1em */
    --length-user-status-circle: 0.5714em;
    /* Shrink the user activity circle for the Recent Conversations context. */
    /* 7px at 14px/1em */
    --length-user-status-circle-recent-conversations: 0.5em;
    --length-user-status-circle-popover-menu: 8px;
    --length-user-popover-menu-avatar: 64px;

    /* Buttons */
    --icon-button-padding: 0.375em;

    /* Overlay heights for streams modal */
    --overlay-container-height: 95vh;
    --overlay-container-max-height: 1000px;
    /* The width of the settings sidebar. */
    --settings-sidebar-width: 18.2142em; /* 255px at 14px/em */
    /* .two-pane-settings-header and .settings-header */
    --settings-overlay-header-height: 3.2143em; /* 45px at 14px/em */
    /* .display-type and .list-toggler-container
       in subscriptions and user group settings overlays */
    --settings-overlay-subheader-height: 3.1429em; /* 44px at 14px/em */
    --settings-overlay-header-button-height: 2em;
    /* Informational overlay */
    --informational-overlay-max-width: 43.75em;
    --modal-input-width: 23.2142em;
    /* Dropdown menu width. This is a legacy value that comes from bootstrap.
       See 1c6bed55e4e800b5bad7150f6bdd274cd7f6504e for more context. */
    --width-dropdown-widget-button: 206px;
    /* User profile modal */
    --user-profile-modal-height: 75dvh;
    --user-profile-modal-body-margin-bottom: 20px;
    /* Dropdown list item */
    --dropdown-list-item-label-icon-gap: 0.3125em; /* 5px at 16px/em */

    /* Height of the button for filter dropdown in stream settings UI.
    It is set equal to the height of the search input, i.e. 1.4em (input
    height with font size set to 90%) + 8px (top and bottom paddings)
    + 2px (top and bottom borders). */
    --folder-filter-dropdown-widget-button-height: calc(
        1.4 * 0.9 * var(--base-font-size-px) + 8px + 2px
    );

    /*
    Maximum height of the compose box when it is not in maximised state. This
    is equal to the height of `#bottom_whitespace`. We expect resize.ts to
    replace it with its pixel calculation since even if `vh` has great support,
    it can change depending on browser / OS on mobile devices.
    */
    --max-unmaximized-compose-height: 40vh;

    /* Maximum height of the message-edit and preview areas. */
    --max-message-edit-height: 24em;

    /*
    Line height of the message buttons in compose box. Here it's necessary
    to control this value uniformly and precisely to avoid issues with
    layout shifts originating with non-Latin characters in this area.
    1.429em is 20px at 14px em.
    */
    --line-height-compose-buttons: 1.429em;

    /*
    Maximum height of the subscribers list in stream settings so that
    it doesn't cause the container to have a second scrollbar.
    This value will be overridden when stream settings is opened.
    */
    --stream-subscriber-list-max-height: 100%;
    /*
      Reusable dimensions and offsets.
    */
    --margin-bottom-field-description: 3px;
    /* Gap between tabs in the tab picker */
    --grid-gap-tab-picker: 2px;
    /* 10px at 16px */
    --view-only-field-horizontal-padding: 0.625em;

    /*
    The tippy arrow which matches the color of the popover's border,
    is formed by stacking two arrows on top of each other, via the
    use of `::before` and `::after` pseudo-elements. This value overrides
    the offset of the `::before` pseudo element to create a thicker border,
    visually consistent with that of it's parent popover.
    */
    --popover-tippy-arrow-before-offset: -6.5px;

    /* Decorated channel name related values */
    --decorated-channel-name-privacy-icon-gap: 0.3125em; /* 5px at 16px/em */
    --inline-decorated-channel-name-privacy-icon-gap: 0.125em; /* 2px at 16px/em */
    --inline-decorated-channel-name-padding-left: 0.0937em; /* 1.5px at 16px/em */

    /* Color picker popover values */
    --size-color-swatch: 1em;
    --grid-gap-color-swatch: 1em;
    --padding-color-swatch-list: 0.6666em;
    --gradient-custom-swatch: conic-gradient(from 0deg at 50% 50%, rgb(255, 0, 151) 0%, rgb(255, 0, 0), rgb(255, 103, 0), rgb(182, 163, 0), rgb(0, 200, 0), rgb(0, 210, 166), rgb(0, 191, 255), rgb(0, 150, 255), rgb(160, 101, 255), rgb(241, 52, 255), rgb(255, 0, 151) 100%);

    /* Banner grid layout variables */
    --banner-horizontal-padding: 0.8125em; /* 13px at 16px/1em */
    --banner-vertical-padding: 0.3125em; /* 5px at 16px/1em */
    --banner-grid-template-areas: " . . banner-close-button banner-close-button"
        ". banner-content banner-close-button banner-close-button"
        ". . banner-close-button banner-close-button";
    --banner-grid-template-columns: var(--banner-horizontal-padding)
        minmax(0, 1fr) minmax(0, auto) var(--banner-horizontal-padding);
    --banner-grid-template-rows: 0.3125em auto 0.3125em; /* 5px at 16px/1em */

    /* Popup banner related variables */
    --popup-banner-translate-y-distance: 100px;

    /* Input grid layout variables */
    --input-icon-starting-offset: 0.5em; /* 8px at 16px/1em */
    --input-icon-width: 1em; /* 16px at 16px/1em */
    --input-icon-content-gap: 0.4375em; /* 7px at 16px/1em */
    --input-button-content-gap: 0.25em; /* 4px at 16px/1em */
    --input-button-width: 1.5em; /* 24px at 16px/1em */
    --input-button-ending-offset: 0.125em; /* 2px at 16px/1em */

    /* Input padding and border variables */
    --input-horizontal-padding: 6px;
    --input-vertical-padding: 4px;
    --schedule-reminder-note-padding: 3px;
    --input-border-width: 1px;

    /* Message date divider variables */
    --date-divider-text-padding: 12px;
    --date-divider-line-gap: 4px;
    --date-divider-right-edge-offset: 2px;
    --date-divider-line-inset: calc(
        var(--date-divider-text-padding) - var(--date-divider-line-gap)
    );

    /* Colors used across the app */
    --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
    --color-date: var(--csstools-light-dark-toggle--26, hsla(0, 0%, 15%, 0.75));
    --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) hsl(46, 15%, 20%);
    --color-background-private-message-header: var(--csstools-light-dark-toggle--27, hsl(46, 35%, 93%));
    --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) hsl(46, 7%, 16%);
    --color-background-private-message-content: var(--csstools-light-dark-toggle--28, hsl(45, 20%, 96%));
    --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) hsl(0, 0%, 14%);
    --color-background-stream-message-content: var(--csstools-light-dark-toggle--29, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) hsla(217, 64%, 59%, 0.7);
    --color-selected-message-outline: var(--csstools-light-dark-toggle--30, hsla(217, 64%, 59%, 0.6));
    --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) hsl(217, 95%, 59%);
    --color-selected-gif-in-grid-picker: var(--csstools-light-dark-toggle--31, hsl(217, 75%, 59%));
    --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) hsla(217, 95%, 59%, 0.6);
    --color-hovered-gif-in-grid-picker: var(--csstools-light-dark-toggle--32, hsla(217, 75%, 59%, 0.5));
    --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    --color-message-list-border: var(--csstools-light-dark-toggle--33, hsla(0, 0%, 0%, 0.16));
    --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-message-header-contents-border: var(--csstools-light-dark-toggle--34, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.48);
    --color-private-message-header-border: var(--csstools-light-dark-toggle--35, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-message-header-contents-border-bottom: var(--csstools-light-dark-toggle--36, hsla(0, 0%, 0%, 0.05));
    --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.37);
    --color-private-message-header-border-bottom: var(--csstools-light-dark-toggle--37, hsla(0, 0%, 0%, 0.07));
    --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
    --color-message-header-icon-non-interactive: var(--csstools-light-dark-toggle--38, hsla(0, 0%, 0%, 0.3));
    --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-message-header-icon-interactive: var(--csstools-light-dark-toggle--39, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    --color-background: var(--csstools-light-dark-toggle--40, hsl(0, 0%, 94%));
    --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) hsl(225, 6%, 10%);
    --color-background-widget-input: var(--csstools-light-dark-toggle--41, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-widget-button: var(--csstools-light-dark-toggle--42, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) hsl(0, 0%, 13%);
    --color-background-navbar: var(--csstools-light-dark-toggle--43, hsl(0, 0%, 97%));
    --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-text-sidebar-row: var(--csstools-light-dark-toggle--44, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) hsl(0, 0%, 90%);
    --color-text-active-narrow-filter: var(--csstools-light-dark-toggle--45, hsl(0, 0%, 15%));
    --csstools-light-dark-toggle--873: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    --color-background-active-narrow-filter: var(--csstools-light-dark-toggle--873, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--874: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    --color-background-hover-narrow-filter: var(--csstools-light-dark-toggle--874, hsl(0, 0%, 97%));
    --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
    --color-shadow-sidebar-row-hover: var(--csstools-light-dark-toggle--46, hsla(0, 0%, 0%, 0.3));
    /* Layered drop shadow for sticky sidebar headers when scrolled content
       passes beneath them. Dark mode overrides to full-opacity black in the
       dark-theme block below, since shadows over a dark background need more
       contrast to read as "something is floating above." */
    --box-shadow-sidebar-sticky-header-drop:
        0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
    --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-sidebar-action: var(--csstools-light-dark-toggle--47, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
    --color-sidebar-action-hover: var(--csstools-light-dark-toggle--48, hsl(240, 100%, 15%));
    --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
    --color-background-sidebar-action-hover: var(--csstools-light-dark-toggle--49, hsl(240, 100%, 93%));
    --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
    --color-background-navigation-item-hover: var(--csstools-light-dark-toggle--50, hsla(240, 100%, 50%, 0.07));
    --color-background-sidebar-action-heading-hover: var(
        --color-background-navigation-item-hover
    );
    --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-navbar-bottom-border: var(--csstools-light-dark-toggle--51, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.15);
    --color-left-sidebar-direct-messages-bottom-divider: var(--csstools-light-dark-toggle--52, hsla(0, 0%, 0%, 0.15));
    --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
    --color-left-sidebar-inner-box-shadow: var(--csstools-light-dark-toggle--53, hsla(0, 0%, 0%, 0.2));
    --color-left-sidebar-middle-box-shadow: var(--color-background);
    --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) hsla(0, 0%, 11%, 0.3);
    --color-left-sidebar-outer-box-shadow: var(--csstools-light-dark-toggle--54, hsla(0, 0%, 94%, 0.2));
    --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) hsl(240, 19%, 24%);
    --color-left-sidebar-middle-box-shadow-hover: var(--csstools-light-dark-toggle--55, hsl(244, 36%, 91%));
    --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
    --color-left-sidebar-outer-box-shadow-hover: var(--csstools-light-dark-toggle--56, hsla(240, 100%, 50%, 0.07));
    --color-unread-marker: hsl(217, 64%, 59%);
    --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) hsl(0, 0%, 30%);
    --color-masked-unread-marker: var(--csstools-light-dark-toggle--57, hsl(0, 0%, 80%));
    --color-failed-message-send-icon: hsl(4, 99%, 66%);
    --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-active-row-modal: var(--csstools-light-dark-toggle--58, hsl(0, 0%, 98%));
    --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) hsla(212, 28%, 8%, 0.75);
    --color-background-overlay: var(--csstools-light-dark-toggle--59, hsla(0, 0%, 13%, 0.8));
    --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) hsla(212, 28%, 8%, 0.75);
    --color-background-non-empty-overlay-indicator: var(--csstools-light-dark-toggle--60, hsla(0, 0%, 100%, 0.9));
    --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-modal-selectable-icon: var(--csstools-light-dark-toggle--61, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
    --color-modal-selectable-icon-hover: var(--csstools-light-dark-toggle--62, hsl(240, 100%, 15%));
    --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
    --background-color-modal-selectable-icon-hover: var(--csstools-light-dark-toggle--63, hsla(240, 100%, 50%, 0.07));
    --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) hsl(240, 7%, 17%);
    --background-color-readonly-modal-input: var(--csstools-light-dark-toggle--64, hsl(240, 7%, 93%));
    --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --background-color-textarea: var(--csstools-light-dark-toggle--65, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --background-color-disabled-textarea: var(--csstools-light-dark-toggle--66, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.3);
    --background-color-view-only-textarea: var(--csstools-light-dark-toggle--67, hsla(0, 0%, 100%, 0.6));
    --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --border-color-textarea: var(--csstools-light-dark-toggle--68, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
    --focus-border-color-textarea: var(--csstools-light-dark-toggle--69, hsla(207, 80%, 62%, 0.8));
    --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-pill-container-without-placeholder: var(--csstools-light-dark-toggle--70, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-unmuted-or-followed-topic-list-item: var(--csstools-light-dark-toggle--71, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.19);
    --color-topic-indent-border: var(--csstools-light-dark-toggle--72, hsla(0, 0%, 0%, 0.19));
    --color-outline-focus: hsl(215, 47%, 50%);
    --focus-ring-width-in-views: 1.5px;
    /* Standard focus ring stroke; used by `:focus-visible`
       outlines on inbox rows, recent-view rows, action-button
       wrappers, unread badges, etc. so that a future width or
       color change touches one place. */
    --focus-ring-outline: var(--focus-ring-width-in-views) solid
        var(--color-outline-focus);
    /* Negative-offset paired with `--focus-ring-outline` to pull
       the painted ring inside the element by its own stroke
       width, so the ring sits flush with the element edges (used
       by inbox row outlines that would otherwise clip against the
       row's `overflow: hidden`). */
    --focus-ring-outline-offset-in-views: calc(
        -1 * var(--focus-ring-width-in-views)
    );
    --unread-count-focus-outline-radius-in-views: 0.5em; /* 8px at 16px/1em */
    --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
    --color-background-search: var(--csstools-light-dark-toggle--73, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) hsl(0, 0%, 20%);
    --color-background-search-collapsed: var(--csstools-light-dark-toggle--74, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) hsl(0, 0%, 20%);
    --color-background-search-option-hover: var(--csstools-light-dark-toggle--75, hsl(0, 0%, 94%));
    --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.3);
    --color-search-box-hover-shadow: var(--csstools-light-dark-toggle--76, hsla(0, 0%, 0%, 0.1));
    --color-search-shadow-wide: hsla(0, 0%, 0%, 0.25);
    --color-search-shadow-tight: hsla(0, 0%, 0%, 0.1);
    --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.35);
    --color-search-dropdown-top-border: var(--csstools-light-dark-toggle--77, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) hsl(0, 0%, 78%);
    --color-search-icons: var(--csstools-light-dark-toggle--78, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.1);
    --color-background-image-loader: var(--csstools-light-dark-toggle--79, hsla(0, 0%, 0%, 0.1));
    --color-icon-purple: hsl(240, 35%, 60%);
    --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
    --color-background-popover-menu: var(--csstools-light-dark-toggle--80, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    --color-border-popover-menu-separator: var(--csstools-light-dark-toggle--81, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) hsl(225, 100%, 84%);
    --color-hotkey-hint: var(--csstools-light-dark-toggle--82, hsl(227, 78%, 59%));
    --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) hsl(0, 0%, 65%);
    --color-popover-hotkey-hint: var(--csstools-light-dark-toggle--83, hsl(0, 0%, 40%));
    --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) hsla(0, 0%, 65%, 0.5);
    --color-border-popover-hotkey-hint: var(--csstools-light-dark-toggle--84, hsla(0, 0%, 40%, 0.5));
    --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) hsla(220, 12%, 95%, 0.05);
    --color-background-hover-popover-menu: var(--csstools-light-dark-toggle--85, hsla(220, 12%, 5%, 0.05));
    --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) hsla(220, 12%, 95%, 0.07);
    --color-background-active-popover-menu: var(--csstools-light-dark-toggle--86, hsla(220, 12%, 5%, 0.07));
    --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-border-popover-menu: var(--csstools-light-dark-toggle--87, hsla(0, 0%, 0%, 0.4));
    --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.2);
    --color-border-personal-menu-avatar: var(--csstools-light-dark-toggle--88, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) hsl(240, 18%, 34%);
    --color-background-unread-counter-prominent: var(--csstools-light-dark-toggle--89, hsla(240, 10%, 50%, 0.7));
    --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) hsla(240, 10%, 50%, 0.35);
    --color-background-unread-counter-normal: var(--csstools-light-dark-toggle--90, hsla(240, 10%, 50%, 0.2));
    --color-background-unread-counter-quiet: transparent;
    --box-shadow-unread-counter-normal: inset 0 0 1px hsla(0, 0%, 0%, 0.3);
    --color-unread-counter-prominent: hsl(0, 0%, 100%);
    --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-unread-counter-normal: var(--csstools-light-dark-toggle--91, hsla(0, 0%, 0%, 0.9));
    --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) hsl(240, 15%, 65%);
    --color-unread-counter-quiet: var(--csstools-light-dark-toggle--92, hsl(240, 15%, 50%));
    /* Legacy unread-counter color value. */
    --color-background-unread-counter: var(
        --color-background-unread-counter-prominent
    );
    --color-unread-counter-muted: hsla(240, 10%, 50%, 0.35);
    --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) hsl(0, 0%, 67%);
    --color-border-add-subscription-button-focus: var(--csstools-light-dark-toggle--93, hsl(0, 0%, 20%));
    /* When unreads are hovered on the condensed
       views, they should not have an alpha.
       The first color corresponds to
       --color-background-unread-counter-normal.
       The second color aligns with light mode's
       --color-background. */
    --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) rgb(58, 58, 67);
    --color-background-unread-counter-no-alpha: var(--csstools-light-dark-toggle--94, rgb(215, 215, 220));
    --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-background-unread-counter-dot: var(--csstools-light-dark-toggle--95, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) hsl(105, 2%, 50%);
    --color-border-unread-counter: var(--csstools-light-dark-toggle--96, var(--color-background-unread-counter));
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--color-border-unread-counter);
    --color-border-unread-counter-popover-menu: var(--csstools-light-dark-toggle--0, inherit);
    --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.3);
    --color-background-tab-picker-container: var(--csstools-light-dark-toggle--97, hsla(0, 0%, 0%, 0.07));
    --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --color-background-tab-picker-selected-tab: var(--csstools-light-dark-toggle--98, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.12);
    --color-outline-tab-picker-tab-option: var(--csstools-light-dark-toggle--99, hsla(0, 0%, 0%, 0.3));
    --csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
    --color-background-tab-picker-tab-option-hover: var(--csstools-light-dark-toggle--100, hsla(0, 0%, 100%, 0.6));
    --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.03);
    --color-background-tab-picker-tab-option-active: var(--csstools-light-dark-toggle--101, hsla(0, 0%, 100%, 0.35));
    --csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
    --color-background-popover: var(--csstools-light-dark-toggle--102, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) hsl(18, 100%, 75%);
    --color-background-alert-word: var(--csstools-light-dark-toggle--103, hsl(18, 100%, 84%));
    --color-buddy-list-highlighted-user: var(
        --color-background-hover-narrow-filter
    );
    --csstools-light-dark-toggle--104: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.1);
    --color-buddy-list-avatar-loading: var(--csstools-light-dark-toggle--104, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-border-sidebar: var(--csstools-light-dark-toggle--105, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--106: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-text-sidebar-base: var(--csstools-light-dark-toggle--106, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.15);
    --color-border-sidebar-subheader: var(--csstools-light-dark-toggle--107, hsla(0, 0%, 0%, 0.15));
    --csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-request-progress-status-alert-text: var(--csstools-light-dark-toggle--108, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--109: var(--csstools-color-scheme--light) hsla(46, 28%, 38%, 0.27);
    --color-background-tip: var(--csstools-light-dark-toggle--109, hsl(46, 63%, 95%));
    --csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) hsl(49, 38%, 46%);
    --color-border-tip: var(--csstools-light-dark-toggle--110, hsl(49, 20%, 84%));
    --csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.666);
    --color-box-shadow-animated-purple-button-focus: var(--csstools-light-dark-toggle--111, hsl(235, 18%, 7%));
    --csstools-light-dark-toggle--112: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    --color-background-animated-button: var(--csstools-light-dark-toggle--112, hsl(0, 0%, 90%));
    --csstools-light-dark-toggle--113: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-animated-button-text: var(--csstools-light-dark-toggle--113, hsl(0, 0%, 0%));
    --color-background-animated-button-hover: hsl(240, 96%, 68%);
    --csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) hsl(3, 73%, 74%);
    --color-invalid-input-border: var(--csstools-light-dark-toggle--114, hsl(3, 57%, 33%));
    --invalid-input-box-shadow: 0 0 2px var(--color-invalid-input-box-shadow);
    --csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) hsl(3, 73%, 74%);
    --color-invalid-input-box-shadow: var(--csstools-light-dark-toggle--115, hsl(3, 57%, 33%));
    --csstools-light-dark-toggle--116: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-white-box: var(--csstools-light-dark-toggle--116, hsl(0, 0%, 100%));
    --color-stream-group-row-checked-icon: hsl(240, 96%, 68%);
    --color-stream-group-row-checked-icon-hover: hsl(240, 41%, 50%);
    --csstools-light-dark-toggle--117: var(--csstools-color-scheme--light) hsla(240, 96%, 68%, 0.5);
    --color-stream-group-row-checked-icon-disabled: var(--csstools-light-dark-toggle--117, hsl(240, 96%, 68%));
    --csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) hsl(218, 14%, 33%);
    --color-stream-group-row-plus-icon: var(--csstools-light-dark-toggle--118, hsl(0, 0%, 72%));
    --csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) hsl(230, 11%, 67%);
    --color-stream-group-row-plus-icon-hover: var(--csstools-light-dark-toggle--119, hsl(0, 0%, 27%));
    --csstools-light-dark-toggle--120: var(--csstools-color-scheme--light) hsla(218, 14%, 33%, 0.5);
    --color-stream-group-row-plus-icon-disabled: var(--csstools-light-dark-toggle--120, hsl(0, 0%, 87%));

    /* Recent view */
    --recent-view-body-border-width: 1px;
    --recent-view-header-border-width: 1px;
    --recent-view-row-left-padding: 0.75em; /* 12px at 16px / 1em */
    --recent-view-max-avatars: 4;
    --recent-view-participant-item-width: 1.5em; /* 24px at 16px / 1em */
    --recent-view-participant-item-padding-x: 0.0938em; /* 1.5px at 16px / 1em */
    --recent-view-participants-padding-x-start: 0.25em; /* 4px at 16px / 1em */
    --color-border-recent-view-table: var(
        --color-border-inbox-folder-component
    );
    --color-background-recent-view-row: var(--color-background-inbox-row);
    --color-background-recent-view-row-hover: var(
        --color-background-inbox-row-hover
    );
    --csstools-light-dark-toggle--121: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.9);
    --color-recent-view-link-unread: var(--csstools-light-dark-toggle--121, hsl(0, 0%, 5%));
    --csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
    --color-recent-view-link: var(--csstools-light-dark-toggle--122, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-recent-filters-button-focus: var(--csstools-light-dark-toggle--123, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-recent-filters-button-disabled: var(--csstools-light-dark-toggle--124, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-border-recent-filters-button-disabled: var(--csstools-light-dark-toggle--125, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-recent-view-participant-overflow-text: var(--csstools-light-dark-toggle--126, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--127: var(--csstools-color-scheme--light) hsl(211, 18%, 25%);
    --color-background-recent-view-participant-overflow: var(--csstools-light-dark-toggle--127, hsl(0, 0%, 88%));
    --csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
    --color-background-recent-view-table-thead-th: var(--csstools-light-dark-toggle--128, hsl(0, 0%, 97%));
    --csstools-light-dark-toggle--129: var(--csstools-color-scheme--light) hsla(230, 9%, 60%, 0.14);
    --color-background-recent-view-table-thead-sort-header: var(--csstools-light-dark-toggle--129, hsla(229, 9%, 36%, 0.07));
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) var(--grey-300);
    --color-text-recent-view-table-thead-th: var(--csstools-light-dark-toggle--1, var(--grey-600));
    --csstools-light-dark-toggle--130: var(--csstools-color-scheme--light) hsla(229, 10%, 70%, 0.5);
    --color-arrow-recent-view-table-thead-th: var(--csstools-light-dark-toggle--130, hsla(229, 9%, 36%, 0.5));
    --csstools-light-dark-toggle--131: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
    --color-text-recent-view-last-msg-time: var(--csstools-light-dark-toggle--131, hsla(0, 0%, 15%, 0.75));
    --csstools-light-dark-toggle--132: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.58);
    --color-text-recent-view-last-msg-time-unread: var(--csstools-light-dark-toggle--132, hsla(0, 0%, 0%, 0.75));

    /* Compose box colors */
    --csstools-light-dark-toggle--133: var(--csstools-color-scheme--light) hsl(228, 11%, 17%);
    --color-compose-box-background: var(--csstools-light-dark-toggle--133, hsl(232, 30%, 92%));
    --csstools-light-dark-toggle--134: var(--csstools-color-scheme--light) color-mix(
            in srgb,
            var(--color-compose-box-background),
            hsl(0, 0%, 0%) 20%
        );
    --color-compose-message-content-background: var(--csstools-light-dark-toggle--134, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--135: var(--csstools-color-scheme--light) hsl(3, 50%, 12%);
    --color-compose-message-content-background-over-limit: var(--csstools-light-dark-toggle--135, hsl(3, 35%, 90%));
    --csstools-light-dark-toggle--136: var(--csstools-color-scheme--light) hsl(50, 75%, 12%);
    --color-compose-message-content-background-approaching-limit: var(--csstools-light-dark-toggle--136, hsl(50, 75%, 92%));
    --csstools-light-dark-toggle--137: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    --color-border-compose-content: var(--csstools-light-dark-toggle--137, hsla(0, 0%, 0%, 0.1));
    --color-compose-send-button-icon-color: hsl(0, 0%, 100%);
    --color-compose-send-button-background: var(
        --color-background-modal-confirm-button
    );
    --color-compose-send-button-background-interactive: var(
        --color-background-modal-confirm-button-hover
    );
    --color-compose-send-button-focus-border: hsl(232, 20%, 10%);
    --csstools-light-dark-toggle--138: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.8);
    --color-compose-send-button-focus-shadow: var(--csstools-light-dark-toggle--138, hsl(230, 100%, 20%));
    --csstools-light-dark-toggle--139: var(--csstools-color-scheme--light) hsl(240, 30%, 70%);
    --color-compose-send-control-button: var(--csstools-light-dark-toggle--139, hsla(240, 30%, 50%, 0.95));
    --color-compose-send-control-button-background: transparent;
    --csstools-light-dark-toggle--140: var(--csstools-color-scheme--light) var(--color-compose-send-control-button);
    --color-compose-send-control-button-interactive: var(--csstools-light-dark-toggle--140, hsl(240, 30%, 50%));
    --csstools-light-dark-toggle--141: var(--csstools-color-scheme--light) hsla(235, 100%, 70%, 0.11);
    --color-compose-send-control-button-background-interactive: var(--csstools-light-dark-toggle--141, hsla(240, 100%, 30%, 0.05));
    --color-compose-send-control-button-focus-shadow: var(
        --color-compose-send-button-focus-shadow
    );
    --color-compose-recipient-box-text-color: inherit;
    --csstools-light-dark-toggle--142: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-compose-recipient-box-background-color: var(--csstools-light-dark-toggle--142, hsl(0, 0%, 100%));
    /* Because of how the background color is assigned on
       recipient-row elements, we need here to mix down the
       border color from the compose text area,
       --color-message-content-container-border,
       with the compose box's background color,
       --color-compose-box-background. */
    --csstools-light-dark-toggle--875: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
    --color-compose-recipient-box-border-color: var(--csstools-light-dark-toggle--875, rgb(207, 208, 215));
    --csstools-light-dark-toggle--143: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.12);
    --color-compose-recipient-box-hover: var(--csstools-light-dark-toggle--143, hsl(0, 0%, 69%));
    --csstools-light-dark-toggle--144: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.27);
    --color-compose-recipient-box-has-focus: var(--csstools-light-dark-toggle--144, hsl(0, 0%, 57%));
    --csstools-light-dark-toggle--145: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-compose-collapsed-reply-button-area-background: var(--csstools-light-dark-toggle--145, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--146: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.15);
    --color-compose-collapsed-reply-button-area-background-interactive: var(--csstools-light-dark-toggle--146, var(--color-compose-collapsed-reply-button-area-background));
    --csstools-light-dark-toggle--147: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-compose-collapsed-reply-button-area-border: var(--csstools-light-dark-toggle--147, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--148: var(--csstools-color-scheme--light) var(--color-compose-collapsed-reply-button-area-border);
    --color-compose-collapsed-reply-button-area-border-interactive: var(--csstools-light-dark-toggle--148, hsl(0, 0%, 60%));
    --csstools-light-dark-toggle--149: var(--csstools-color-scheme--light) hsl(231, 30%, 65%);
    --color-compose-embedded-button-text-color: var(--csstools-light-dark-toggle--149, hsl(231, 20%, 46%));
    --csstools-light-dark-toggle--150: var(--csstools-color-scheme--light) hsl(231, 30%, 70%);
    --color-compose-embedded-button-text-color-hover: var(--csstools-light-dark-toggle--150, hsl(231, 20%, 30%));
    --color-compose-embedded-button-background: transparent;
    --csstools-light-dark-toggle--151: var(--csstools-color-scheme--light) hsla(235, 100%, 70%, 0.11);
    --color-compose-embedded-button-background-hover: var(--csstools-light-dark-toggle--151, hsla(231, 100%, 90%, 0.5));
    --csstools-light-dark-toggle--152: var(--csstools-color-scheme--light) hsla(235, 100%, 70%, 0.2);
    --color-compose-embedded-button-background-interactive: var(--csstools-light-dark-toggle--152, hsla(231, 100%, 90%, 0.9));
    --csstools-light-dark-toggle--153: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-compose-new-message-button: var(--csstools-light-dark-toggle--153, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--154: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.15);
    --color-background-compose-new-message-button-hover: var(--csstools-light-dark-toggle--154, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--155: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-compose-new-message-button-active: var(--csstools-light-dark-toggle--155, hsl(0, 0%, 95%));
    --csstools-light-dark-toggle--156: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-compose-new-message-button: var(--csstools-light-dark-toggle--156, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--157: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-compose-new-message-button-hover: var(--csstools-light-dark-toggle--157, hsl(0, 0%, 60%));
    --csstools-light-dark-toggle--158: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-compose-new-message-button-active: var(--csstools-light-dark-toggle--158, hsl(0, 0%, 60%));
    --color-compose-chevron-arrow: hsl(0, 0%, 58%);
    --csstools-light-dark-toggle--159: var(--csstools-color-scheme--light) hsl(38, 100%, 70%);
    --color-limit-indicator: var(--csstools-light-dark-toggle--159, hsl(38, 100%, 36%));
    --csstools-light-dark-toggle--160: var(--csstools-color-scheme--light) hsl(3, 80%, 60%);
    --color-limit-indicator-over-limit: var(--csstools-light-dark-toggle--160, hsl(3, 80%, 40%));
    --csstools-light-dark-toggle--161: var(--csstools-color-scheme--light) hsla(227, 80%, 60%, 0.25);
    --color-narrow-to-compose-recipients-background: var(--csstools-light-dark-toggle--161, hsla(227, 100%, 70%, 0.25));
    --csstools-light-dark-toggle--162: var(--csstools-color-scheme--light) hsla(227, 80%, 60%, 0.35);
    --color-narrow-to-compose-recipients-background-hover: var(--csstools-light-dark-toggle--162, hsla(227, 100%, 70%, 0.35));
    --csstools-light-dark-toggle--163: var(--csstools-color-scheme--light) hsl(224, 28%, 81%);
    --color-narrow-to-compose-recipients: var(--csstools-light-dark-toggle--163, hsl(227, 76%, 64%));
    --csstools-light-dark-toggle--164: var(--csstools-color-scheme--light) hsl(221, 100%, 95%);
    --color-narrow-to-compose-recipients-hover: var(--csstools-light-dark-toggle--164, hsl(227, 78%, 59%));
    --csstools-light-dark-toggle--165: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.55);
    --color-composebox-button: var(--csstools-light-dark-toggle--165, hsla(0, 0%, 0%, 0.55));
    --color-composebox-button-hover: var(--color-text-default);
    --csstools-light-dark-toggle--166: var(--csstools-color-scheme--light) hsla(231, 8%, 14%, 0.8);
    --color-composebox-button-background: var(--csstools-light-dark-toggle--166, hsla(0, 0%, 100%, 0.6));
    --csstools-light-dark-toggle--167: var(--csstools-color-scheme--light) hsl(231, 12%, 18%);
    --color-composebox-button-background-hover: var(--csstools-light-dark-toggle--167, hsl(0, 0%, 95%));
    --csstools-light-dark-toggle--168: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.08);
    --color-message-formatting-controls-container: var(--csstools-light-dark-toggle--168, hsl(232, 30%, 96%));
    --csstools-light-dark-toggle--169: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
    --color-message-content-container-border: var(--csstools-light-dark-toggle--169, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--170: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.27);
    --color-message-content-container-border-focus: var(--csstools-light-dark-toggle--170, hsl(0, 0%, 57%));
    --color-message-content-container-border-over-limit: hsl(0, 76%, 65%);
    --color-message-content-container-border-approaching-limit: hsl(38, 70%, 50%);
    --csstools-light-dark-toggle--171: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
    --color-compose-control-button-background-hover: var(--csstools-light-dark-toggle--171, hsla(0, 0%, 0%, 0.05));
    --csstools-light-dark-toggle--172: var(--csstools-color-scheme--light) hsla(236, 33%, 90%, 0.25);
    --color-compose-formatting-button-divider: var(--csstools-light-dark-toggle--172, hsl(0, 0%, 75%));
    --csstools-light-dark-toggle--173: var(--csstools-color-scheme--light) hsl(0, 0%, 67%);
    --color-compose-focus-ring: var(--csstools-light-dark-toggle--173, var(--color-outline-focus));
    --color-compose-scroll-icon: hsl(0, 0%, 50%);
    --csstools-light-dark-toggle--174: var(--csstools-color-scheme--light) hsl(234, 21%, 24%);
    --csstools-light-dark-toggle--175: var(--csstools-color-scheme--light) hsla(234, 21%, 24%, 0.769);
    --gradient-compose-scroll-backward: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--174, hsl(234, 100%, 95%)) 35%,
        var(--csstools-light-dark-toggle--175, hsl(234, 100%, 95%)) 50%,
        transparent 100%
    );
    --csstools-light-dark-toggle--176: var(--csstools-color-scheme--light) hsl(234, 30%, 28%);
    --csstools-light-dark-toggle--177: var(--csstools-color-scheme--light) hsla(234, 30%, 28%, 0.769);
    --gradient-compose-scroll-backward-hover: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--176, hsl(234, 100%, 93%)) 35%,
        var(--csstools-light-dark-toggle--177, hsl(234, 100%, 93%)) 50%,
        transparent 100%
    );
    --csstools-light-dark-toggle--178: var(--csstools-color-scheme--light) hsl(234, 35%, 30%);
    --gradient-compose-scroll-backward-active: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--178, hsl(234, 100%, 90%)) 45%,
        transparent 100%
    );
    --csstools-light-dark-toggle--179: var(--csstools-color-scheme--light) hsla(234, 21%, 24%, 0.769);
    --csstools-light-dark-toggle--180: var(--csstools-color-scheme--light) hsl(234, 21%, 24%);
    --gradient-compose-scroll-forward: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--179, hsl(234, 100%, 95%)) 50%,
        var(--csstools-light-dark-toggle--180, hsl(234, 100%, 95%)) 65%
    );
    --csstools-light-dark-toggle--181: var(--csstools-color-scheme--light) hsla(234, 30%, 28%, 0.769);
    --csstools-light-dark-toggle--182: var(--csstools-color-scheme--light) hsl(234, 30%, 28%);
    --gradient-compose-scroll-forward-hover: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--181, hsl(234, 100%, 93%)) 50%,
        var(--csstools-light-dark-toggle--182, hsl(234, 100%, 93%)) 65%
    );
    --csstools-light-dark-toggle--183: var(--csstools-color-scheme--light) hsl(234, 35%, 30%);
    --gradient-compose-scroll-forward-active: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--183, hsl(234, 100%, 90%)) 55%
    );

    /* Text colors */
    --csstools-light-dark-toggle--184: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    --color-text-default: var(--csstools-light-dark-toggle--184, hsl(0, 0%, 20%));
    /* Unlike the light theme, the dark theme renders message
       text in the default color. */
    --csstools-light-dark-toggle--185: var(--csstools-color-scheme--light) var(--color-text-default);
    --color-text-message-default: var(--csstools-light-dark-toggle--185, hsl(0, 0%, 15%));
    --csstools-light-dark-toggle--186: var(--csstools-color-scheme--light) hsla(0, 0%, 87%, 0.4);
    --color-text-message-blockquote-border: var(--csstools-light-dark-toggle--186, hsla(0, 0%, 15%, 0.25));
    --color-text-message-header-archived: hsl(0, 0%, 50%);
    --csstools-light-dark-toggle--187: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-text-message-view-header: var(--csstools-light-dark-toggle--187, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--188: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-text-message-header: var(--csstools-light-dark-toggle--188, hsl(0, 0%, 15%));
    /* Light and dark mode both use the same hover color on
       sender names. */
    --color-text-sender-name-hover: hsl(200, 100%, 40%);
    --csstools-light-dark-toggle--189: var(--csstools-color-scheme--light) hsl(0, 0%, 95%);
    --color-text-dropdown-input: var(--csstools-light-dark-toggle--189, hsl(0, 0%, 13%));
    --csstools-light-dark-toggle--190: var(--csstools-color-scheme--light) hsl(240, 100%, 88%);
    --color-text-self-direct-mention: var(--csstools-light-dark-toggle--190, hsl(240, 52%, 45%));
    --csstools-light-dark-toggle--191: var(--csstools-color-scheme--light) hsl(184, 52%, 63%);
    --color-text-self-group-mention: var(--csstools-light-dark-toggle--191, hsl(183, 52%, 26%));
    --csstools-light-dark-toggle--192: var(--csstools-color-scheme--light) hsl(240, 30%, 65%);
    --color-text-show-more-less-button: var(--csstools-light-dark-toggle--192, hsl(240, 52%, 53%));
    --csstools-light-dark-toggle--193: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
    --color-text-search: var(--csstools-light-dark-toggle--193, hsl(0, 0%, 35%));
    --csstools-light-dark-toggle--194: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-text-search-hover: var(--csstools-light-dark-toggle--194, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--195: var(--csstools-color-scheme--light) hsl(0, 0%, 55%);
    --color-text-placeholder: var(--csstools-light-dark-toggle--195, hsl(0, 0%, 45%));
    --csstools-light-dark-toggle--196: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
    --color-text-search-placeholder: var(--csstools-light-dark-toggle--196, hsl(0, 0%, 50%));
    --csstools-light-dark-toggle--197: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.8);
    --color-text-popover-menu: var(--csstools-light-dark-toggle--197, hsl(0, 0%, 15%));
    --csstools-light-dark-toggle--198: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-text-full-name: var(--csstools-light-dark-toggle--198, hsl(0, 0%, 15%));
    --csstools-light-dark-toggle--199: var(--csstools-color-scheme--light) hsl(0, 0%, 50%);
    --color-text-item: var(--csstools-light-dark-toggle--199, hsl(0, 0%, 40%));
    --csstools-light-dark-toggle--200: var(--csstools-color-scheme--light) hsl(0deg 0% 100% 35%);
    --color-text-personal-menu-no-status: var(--csstools-light-dark-toggle--200, hsl(0, 0%, 50%));
    --csstools-light-dark-toggle--201: var(--csstools-color-scheme--light) hsl(0deg 0% 100% 50%);
    --color-text-personal-menu-some-status: var(--csstools-light-dark-toggle--201, hsl(0, 0%, 40%));
    --csstools-light-dark-toggle--202: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
    --color-text-sidebar-heading: var(--csstools-light-dark-toggle--202, hsl(216, 65%, 20%));
    --csstools-light-dark-toggle--203: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-text-sidebar-action-heading: var(--csstools-light-dark-toggle--203, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--204: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
    --color-text-sidebar-action-heading-hover: var(--csstools-light-dark-toggle--204, hsl(240, 100%, 15%));
    --csstools-light-dark-toggle--205: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-text-sidebar-popover-menu: var(--csstools-light-dark-toggle--205, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--grey-400);
    --color-text-user-card-secondary: var(--csstools-light-dark-toggle--2, var(--grey-550));
    --color-text-url: hsl(200, 100%, 40%);
    --csstools-light-dark-toggle--206: var(--csstools-color-scheme--light) hsl(200, 79%, 66%);
    --color-text-url-hover: var(--csstools-light-dark-toggle--206, hsl(200, 100%, 25%));
    --csstools-light-dark-toggle--207: var(--csstools-color-scheme--light) hsl(0, 0%, 52%);
    --color-text-settings-field-hint: var(--csstools-light-dark-toggle--207, hsl(0, 0%, 57%));
    --csstools-light-dark-toggle--208: var(--csstools-color-scheme--light) hsl(236, 33%, 80%);
    --color-text-clear-search-button: var(--csstools-light-dark-toggle--208, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--209: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-text-clear-search-button-hover: var(--csstools-light-dark-toggle--209, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--210: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-text-settings-plus-button: var(--csstools-light-dark-toggle--210, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--211: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-settings-plus-button: var(--csstools-light-dark-toggle--211, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--212: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-settings-plus-button: var(--csstools-light-dark-toggle--212, hsl(0, 0%, 80%));

    /* User Profile Modal */
    --csstools-light-dark-toggle--213: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-user-profile-field-name: var(--csstools-light-dark-toggle--213, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--214: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    --color-border-user-profile-table: var(--csstools-light-dark-toggle--214, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--215: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.2);
    --color-border-manage-profile-footer: var(--csstools-light-dark-toggle--215, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--216: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
    --color-border-user-profile-list-container: var(--csstools-light-dark-toggle--216, hsla(0, 0%, 0%, 0.35));
    --csstools-light-dark-toggle--217: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
    --background-color-user-profile-list-container: var(--csstools-light-dark-toggle--217, hsl(0, 0%, 100%));

    /* Link colors */
    --csstools-light-dark-toggle--218: var(--csstools-color-scheme--light) hsl(200, 100%, 50%);
    --color-text-link: var(--csstools-light-dark-toggle--218, hsl(210, 94%, 42%));
    --csstools-light-dark-toggle--219: var(--csstools-color-scheme--light) rgba(0, 170, 255, 0.2);
    --color-text-link-decoration: var(--csstools-light-dark-toggle--219, rgba(6, 107, 208, 0.2));
    --csstools-light-dark-toggle--220: var(--csstools-color-scheme--light) hsl(200, 100%, 60%);
    --color-text-link-hover: var(--csstools-light-dark-toggle--220, hsl(212, 100%, 50%));
    --csstools-light-dark-toggle--221: var(--csstools-color-scheme--light) rgba(51, 187, 255, 0.7);
    --color-text-link-decoration-hover: var(--csstools-light-dark-toggle--221, rgba(0, 119, 255, 0.7));
    --csstools-light-dark-toggle--222: var(--csstools-color-scheme--light) hsl(200, 100%, 50%);
    --color-text-link-active: var(--csstools-light-dark-toggle--222, hsl(212, 100%, 30%));
    /* These colors are from Bootstrap. */
    --color-text-generic-link: #08c;
    --csstools-light-dark-toggle--223: var(--csstools-color-scheme--light) hsl(200, 79%, 66%);
    --color-text-generic-link-interactive: var(--csstools-light-dark-toggle--223, #005580);

    /* Tippy colors */
    --csstools-light-dark-toggle--224: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-background-tippy-box: var(--csstools-light-dark-toggle--224, hsl(0, 0%, 20%));

    /* Widgets colors */
    --csstools-light-dark-toggle--225: var(--csstools-color-scheme--light) hsl(240, 5%, 16%);
    --color-background-dropdown-widget: var(--csstools-light-dark-toggle--225, hsl(240, 20%, 98%));
    --csstools-light-dark-toggle--226: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-border-dropdown-widget: var(--csstools-light-dark-toggle--226, hsla(0, 0%, 0%, 0.4));
    --csstools-light-dark-toggle--227: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-dropdown-widget-button: var(--csstools-light-dark-toggle--227, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--228: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-dropdown-widget-button: var(--csstools-light-dark-toggle--228, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--229: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-disabled-dropdown-widget-button: var(--csstools-light-dark-toggle--229, hsl(0, 0%, 93%));
    /* Poll Widget */
    --csstools-light-dark-toggle--230: var(--csstools-color-scheme--light) hsl(185, 35%, 65%);
    --color-poll-vote: var(--csstools-light-dark-toggle--230, hsl(156, 41%, 40%));
    --csstools-light-dark-toggle--231: var(--csstools-color-scheme--light) hsl(185, 50%, 70%);
    --color-poll-vote-hover: var(--csstools-light-dark-toggle--231, hsl(156, 41%, 40%));
    --csstools-light-dark-toggle--232: var(--csstools-color-scheme--light) hsl(185, 50%, 65%);
    --color-poll-vote-focus: var(--csstools-light-dark-toggle--232, hsl(156, 41%, 40%));
    --csstools-light-dark-toggle--233: var(--csstools-color-scheme--light) hsl(185, 35%, 35%);
    --color-border-poll-vote: var(--csstools-light-dark-toggle--233, hsl(156, 28%, 70%));
    --csstools-light-dark-toggle--234: var(--csstools-color-scheme--light) hsl(185, 40%, 40%);
    --color-border-poll-vote-hover: var(--csstools-light-dark-toggle--234, hsl(156, 30%, 50%));
    --csstools-light-dark-toggle--235: var(--csstools-color-scheme--light) hsl(185, 40%, 50%);
    --color-border-poll-vote-focus: var(--csstools-light-dark-toggle--235, hsl(156, 30%, 50%));
    --csstools-light-dark-toggle--236: var(--csstools-color-scheme--light) hsl(185, 20%, 20%);
    --color-background-poll-vote-hover: var(--csstools-light-dark-toggle--236, var(--color-background-widget-button));
    --csstools-light-dark-toggle--237: var(--csstools-color-scheme--light) hsl(185, 40%, 35%);
    --color-background-poll-vote-focus: var(--csstools-light-dark-toggle--237, hsl(156, 41%, 90%));
    --csstools-light-dark-toggle--238: var(--csstools-color-scheme--light) hsl(236, 15%, 70%);
    --color-poll-names: var(--csstools-light-dark-toggle--238, hsl(0, 0%, 45%));
    /* TODO Widget */
    --csstools-light-dark-toggle--876: var(--csstools-color-scheme--light) rgba(69, 153, 161, 0.7);
    --color-border-todo-checkbox: var(--csstools-light-dark-toggle--876, hsl(156, 28%, 70%));
    --csstools-light-dark-toggle--239: var(--csstools-color-scheme--light) hsl(185, 40%, 35%);
    --color-border-todo-checkbox-hover: var(--csstools-light-dark-toggle--239, hsl(156, 30%, 50%));
    --csstools-light-dark-toggle--240: var(--csstools-color-scheme--light) hsl(185, 40%, 45%);
    --color-border-todo-checkbox-checked: var(--csstools-light-dark-toggle--240, hsl(156, 41%, 40%));
    --csstools-light-dark-toggle--241: var(--csstools-color-scheme--light) hsl(185, 20%, 20%);
    --color-background-todo-checkbox-hover: var(--csstools-light-dark-toggle--241, transparent);
    --csstools-light-dark-toggle--242: var(--csstools-color-scheme--light) hsl(185, 40%, 45%);
    --color-background-todo-checkbox-checked: var(--csstools-light-dark-toggle--242, hsl(156, 41%, 40%));

    /* KBD colors */
    --csstools-light-dark-toggle--243: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    --color-kbd-background: var(--csstools-light-dark-toggle--243, hsl(0, 0%, 98%));
    --csstools-light-dark-toggle--244: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    --color-kbd-border: var(--csstools-light-dark-toggle--244, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--245: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-kbd-text: var(--csstools-light-dark-toggle--245, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--246: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-kbd-enter-sends: var(--csstools-light-dark-toggle--246, hsl(0, 0%, 40%));

    /* Settings */
    --csstools-light-dark-toggle--247: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-realm-enable-spectator-access-link: var(--csstools-light-dark-toggle--247, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--248: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-stream-email: var(--csstools-light-dark-toggle--248, hsl(0, 0%, 98%));
    --csstools-light-dark-toggle--249: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-integration-url: var(--csstools-light-dark-toggle--249, transparent);
    --csstools-light-dark-toggle--250: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-tbody-th-odd: var(--csstools-light-dark-toggle--250, transparent);
    /* Markdown colors */
    --csstools-light-dark-toggle--251: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-rendered-markdown-thead: var(--csstools-light-dark-toggle--251, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--252: var(--csstools-color-scheme--light) hsl(0, 0%, 33%);
    --color-border-rendered-markdown-table: var(--csstools-light-dark-toggle--252, hsl(0, 0%, 80%));

    /* Tab-switcher colors */
    /* The non-selected colors here are shared with numerous other
       inputs and buttons in dark theme. A refactor here would make
       more generic names for those colors, and help to clean out
       the huge stack of selectors in the dark theme CSS file. */
    --csstools-light-dark-toggle--253: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-tab-switcher-ind-tab: var(--csstools-light-dark-toggle--253, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--254: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-tab-switcher-ind-tab-selected: var(--csstools-light-dark-toggle--254, hsl(0, 0%, 53%));
    --csstools-light-dark-toggle--255: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-tab-switcher-ind-tab: var(--csstools-light-dark-toggle--255, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--256: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
    --color-border-tab-switcher-ind-tab-selected: var(--csstools-light-dark-toggle--256, hsl(0, 0%, 47%));
    --csstools-light-dark-toggle--257: var(--csstools-color-scheme--light) hsla(0, 0%, 42%, 0.9);
    --color-text-tab-switcher-ind-tab-disabled: var(--csstools-light-dark-toggle--257, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--258: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-tab-switcher-ind-tab-disabled: var(--csstools-light-dark-toggle--258, hsl(0, 0%, 87%));

    /* Settings table colors */
    --csstools-light-dark-toggle--259: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-background-table-header: var(--csstools-light-dark-toggle--259, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--260: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    --color-background-table-header-sortable-hover: var(--csstools-light-dark-toggle--260, hsl(0, 0%, 95%));
    --csstools-light-dark-toggle--261: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-border-table-striped: var(--csstools-light-dark-toggle--261, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--262: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-border-table-bordered: var(--csstools-light-dark-toggle--262, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--263: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-border-table-subscriber-list: var(--csstools-light-dark-toggle--263, hsl(0, 0%, 87%));

    /* Markdown code colors */
    --csstools-light-dark-toggle--264: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-markdown-code-text: var(--csstools-light-dark-toggle--264, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--265: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.08);
    --color-markdown-code-background: var(--csstools-light-dark-toggle--265, hsla(0, 0%, 0%, 0.06));
    --csstools-light-dark-toggle--266: var(--csstools-color-scheme--light) var(--color-markdown-code-background);
    --color-markdown-code-background-mentions: var(--csstools-light-dark-toggle--266, hsla(0, 0%, 0%, 0.07));
    --color-markdown-pre-text: var(--color-markdown-code-text);
    --color-markdown-pre-border: transparent;
    --csstools-light-dark-toggle--267: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.04);
    --color-markdown-pre-background: var(--csstools-light-dark-toggle--267, hsla(0, 0%, 0%, 0.04));
    --csstools-light-dark-toggle--268: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
    --color-markdown-pre-background-mentions: var(--csstools-light-dark-toggle--268, hsla(0, 0%, 0%, 0.04));
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--color-markdown-pre-border);
    --color-markdown-pre-border-mentions: var(--csstools-light-dark-toggle--3, transparent);
    --csstools-light-dark-toggle--269: var(--csstools-color-scheme--light) hsl(51, 100%, 72%);
    --color-background-search-highlight: var(--csstools-light-dark-toggle--269, hsl(51, 100%, 79%));
    --csstools-light-dark-toggle--270: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-text-search-highlight: var(--csstools-light-dark-toggle--270, currentcolor);
    --csstools-light-dark-toggle--271: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-text-alert-word: var(--csstools-light-dark-toggle--271, currentcolor);
    --csstools-light-dark-toggle--272: var(--csstools-color-scheme--light) var(--color-text-generic-link);
    --color-markdown-link: var(--csstools-light-dark-toggle--272, hsl(200, 100%, 40%));
    --color-markdown-code-link: var(--color-markdown-link);
    --csstools-light-dark-toggle--273: var(--csstools-color-scheme--light) var(--color-text-generic-link-interactive);
    --color-markdown-link-hover: var(--csstools-light-dark-toggle--273, hsl(200, 100%, 25%));
    --color-markdown-code-link-hover: var(--color-markdown-link-hover);
    --csstools-light-dark-toggle--274: var(--csstools-color-scheme--light) hsl(210, 100%, 25%);
    --color-markdown-link-highlight: var(--csstools-light-dark-toggle--274, hsl(200, 100%, 40%));
    --csstools-light-dark-toggle--275: var(--csstools-color-scheme--light) hsl(210, 100%, 18%);
    --color-markdown-link-highlight-hover: var(--csstools-light-dark-toggle--275, hsl(200, 100%, 25%));
    --csstools-light-dark-toggle--276: var(--csstools-color-scheme--light) hsl(210, 100%, 25%);
    --color-markdown-link-alert-word: var(--csstools-light-dark-toggle--276, hsl(200, 100%, 40%));
    --csstools-light-dark-toggle--277: var(--csstools-color-scheme--light) hsl(210, 100%, 18%);
    --color-markdown-link-alert-word-hover: var(--csstools-light-dark-toggle--277, hsl(200, 100%, 25%));
    --csstools-light-dark-toggle--278: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.03);
    --color-background-image-thumbnail: var(--csstools-light-dark-toggle--278, hsla(0, 0%, 0%, 0.03));
    --csstools-light-dark-toggle--279: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.35);
    --color-background-image-thumbnail-hover: var(--csstools-light-dark-toggle--279, hsla(0, 0%, 0%, 0.3));

    /* Icon colors */
    --csstools-light-dark-toggle--280: var(--csstools-color-scheme--light) hsl(180, 5%, 50%);
    --color-icon-bot: var(--csstools-light-dark-toggle--280, hsl(180, 8%, 65%));
    --csstools-light-dark-toggle--281: var(--csstools-color-scheme--light) hsla(217, 41%, 90%, 0.5);
    --color-message-action-visible: var(--csstools-light-dark-toggle--281, hsla(216, 43%, 20%, 0.5));
    --csstools-light-dark-toggle--282: var(--csstools-color-scheme--light) hsl(217, 41%, 90%);
    --color-message-action-interactive: var(--csstools-light-dark-toggle--282, hsl(216, 43%, 20%));
    --color-message-star-action: hsl(41, 100%, 47%);
    --csstools-light-dark-toggle--283: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-left-sidebar-follow-icon-hover: var(--csstools-light-dark-toggle--283, hsl(0, 0%, 0%));
    /* The gray on the filter icons is the same as
       what's set on ul.filters, but with 70% opacity. */
    --csstools-light-dark-toggle--284: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-left-sidebar-navigation-icon: var(--csstools-light-dark-toggle--284, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--285: var(--csstools-color-scheme--light) hsl(240, 35%, 58%);
    --color-left-sidebar-dm-partners-icon: var(--csstools-light-dark-toggle--285, hsl(240, 30%, 60%));
    --csstools-light-dark-toggle--286: var(--csstools-color-scheme--light) hsl(240, 35%, 38%);
    --color-vdots-hint: var(--csstools-light-dark-toggle--286, hsl(240, 30%, 80%));
    --csstools-light-dark-toggle--287: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-vdots-visible: var(--csstools-light-dark-toggle--287, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--288: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
    --color-vdots-hover: var(--csstools-light-dark-toggle--288, hsl(240, 100%, 15%));
    --csstools-light-dark-toggle--289: var(--csstools-color-scheme--light) hsl(0, 0%, 80%);
    --color-tab-picker-icon: var(--csstools-light-dark-toggle--289, hsl(200, 100%, 40%));
    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) #4cdc75;
    --color-user-circle-active: var(--csstools-light-dark-toggle--4, #43a35e);
    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) #ae640a;
    --color-user-circle-idle: var(--csstools-light-dark-toggle--5, #f5b266);
    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) #545764;
    --color-user-circle-offline: var(--csstools-light-dark-toggle--6, #bcc0cf);
    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) #646671;
    --color-user-circle-offline-typeahead-highlight: var(--csstools-light-dark-toggle--7, #adb2c5);
    --color-user-circle-deactivated: hsl(0, 0%, 50%);
    /* The gradient is also recreated inside the `user-circle-idle` SVG
       file. That is needed for the new help center since it does not
       do the SVG to font conversion that the web app does. We
       re-apply it here since the linearGradient there is stripped off
       when that SVG is converted to font for the web app. Any changes
       to this gradient should be reflected in the SVG file as well. */
    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) var(--color-user-circle-idle);
    --gradient-user-circle-idle: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        var(--csstools-light-dark-toggle--8, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    transparent
                ))
            25%,
        transparent 100%
    );
    /* To avoid the avatar bleeding through, we rewrite
       the gradient with an explicit background color. */
    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) var(--color-user-circle-idle);
    --gradient-user-circle-idle-avatar: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        var(--csstools-light-dark-toggle--9, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    var(--color-background)
                ))
            25%,
        var(--color-background) 100%
    );
    --csstools-light-dark-toggle--290: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-copy-button: var(--csstools-light-dark-toggle--290, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) var(--grey-300);
    --color-copy-button-hover: var(--csstools-light-dark-toggle--10, var(--grey-600));
    --csstools-light-dark-toggle--291: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-copy-button-square-bg-hover: var(--csstools-light-dark-toggle--291, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--292: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-copy-button-active: var(--csstools-light-dark-toggle--292, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) var(--grey-300);
    --color-copy-button-square-active: var(--csstools-light-dark-toggle--11, var(--grey-600));
    --csstools-light-dark-toggle--293: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-copy-button-square-bg-active: var(--csstools-light-dark-toggle--293, rgba(84, 87, 100, 0.11));
    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) var(--green-300);
    --color-copy-button-success: var(--csstools-light-dark-toggle--12, var(--green-500));

    /* Reaction container colors */
    --csstools-light-dark-toggle--294: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.15);
    --color-message-reaction-border: var(--csstools-light-dark-toggle--294, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--295: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.7);
    --color-message-reaction-border-reacted: var(--csstools-light-dark-toggle--295, hsla(0, 0%, 0%, 0.45));
    --csstools-light-dark-toggle--296: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.3);
    --color-message-reaction-background: var(--csstools-light-dark-toggle--296, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--297: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
    --color-message-reaction-background-reacted: var(--csstools-light-dark-toggle--297, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--298: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.1);
    --color-message-reaction-background-hover: var(--csstools-light-dark-toggle--298, hsl(210, 30%, 96%));
    --csstools-light-dark-toggle--299: var(--csstools-color-scheme--light) transparent;
    --color-message-reaction-shadow-inner: var(--csstools-light-dark-toggle--299, hsla(210, 50%, 50%, 0.08));
    --csstools-light-dark-toggle--300: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
    --color-message-reaction-text: var(--csstools-light-dark-toggle--300, hsl(210, 20%, 25%));
    --csstools-light-dark-toggle--301: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-message-reaction-text-reacted: var(--csstools-light-dark-toggle--301, hsl(210, 20%, 20%));
    --csstools-light-dark-toggle--302: var(--csstools-color-scheme--light) var(--color-message-reaction-text);
    --color-message-reaction-button-text: var(--csstools-light-dark-toggle--302, hsla(210, 20%, 20%, 0.6));
    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) var(--color-message-reaction-text-reacted);
    --color-message-reaction-button-text-hover: var(--csstools-light-dark-toggle--13, var(--color-message-reaction-text));
    --color-message-reaction-button-background: inherit;
    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) var(--color-message-reaction-background-hover);
    --color-message-reaction-button-background-hover: var(--csstools-light-dark-toggle--14, var(--color-message-reaction-background));
    --color-message-reaction-button-border: transparent;
    --color-message-reaction-button-border-hover: var(
        --color-message-reaction-border
    );
    --font-weight-message-reaction: 600;

    /* Message feed loading indicator colors */
    --csstools-light-dark-toggle--303: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
    --color-zulip-logo: var(--csstools-light-dark-toggle--303, hsla(0, 0%, 0%, 0.34));
    --csstools-light-dark-toggle--304: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-zulip-logo-loading: var(--csstools-light-dark-toggle--304, hsl(0, 0%, 27%));
    --csstools-light-dark-toggle--305: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.6);
    --color-recent-view-loading-spinner: var(--csstools-light-dark-toggle--305, hsl(0, 0%, 27%));
    --csstools-light-dark-toggle--306: var(--csstools-color-scheme--light) hsl(214, 27%, 18%);
    --color-zulip-logo-z: var(--csstools-light-dark-toggle--306, hsl(0, 0%, 100%));

    /* Message collapsing/condensing button colors */
    --csstools-light-dark-toggle--307: var(--csstools-color-scheme--light) hsla(240, 44%, 56%, 0.15);
    --color-show-more-less-button-background: var(--csstools-light-dark-toggle--307, hsla(240, 44%, 56%, 0.08));
    --csstools-light-dark-toggle--308: var(--csstools-color-scheme--light) hsla(240, 44%, 56%, 0.25);
    --color-show-more-less-button-background-hover: var(--csstools-light-dark-toggle--308, hsla(240, 44%, 56%, 0.15));
    --csstools-light-dark-toggle--309: var(--csstools-color-scheme--light) hsla(240, 44%, 56%, 0.15);
    --color-show-more-less-button-background-active: var(--csstools-light-dark-toggle--309, hsla(240, 44%, 56%, 0.2));

    /* Message edit history colors */
    --csstools-light-dark-toggle--310: var(--csstools-color-scheme--light) hsl(122, 100%, 81%);
    --color-message-edit-history-text-inserted: var(--csstools-light-dark-toggle--310, hsl(122, 72%, 30%));
    --csstools-light-dark-toggle--311: var(--csstools-color-scheme--light) hsla(120, 64%, 95%, 0.3);
    --color-message-edit-history-background-inserted: var(--csstools-light-dark-toggle--311, hsl(120, 64%, 95%));
    --csstools-light-dark-toggle--312: var(--csstools-color-scheme--light) hsl(0, 90%, 67%);
    --color-message-edit-history-text-deleted: var(--csstools-light-dark-toggle--312, hsl(0, 100%, 50%));
    --csstools-light-dark-toggle--313: var(--csstools-color-scheme--light) hsla(7, 54%, 62%, 0.38);
    --color-message-edit-history-background-deleted: var(--csstools-light-dark-toggle--313, hsl(7, 90%, 92%));

    /* Mention pill colors */
    --csstools-light-dark-toggle--314: var(--csstools-color-scheme--light) hsl(240, 13%, 16%);
    --color-background-direct-mention: var(--csstools-light-dark-toggle--314, hsl(240, 52%, 95%));
    --csstools-light-dark-toggle--315: var(--csstools-color-scheme--light) hsl(180, 13%, 14%);
    --color-background-group-mention: var(--csstools-light-dark-toggle--315, hsl(180, 40%, 94%));
    --csstools-light-dark-toggle--316: var(--csstools-color-scheme--light) hsla(240, 52%, 60%, 0.25);
    --color-background-text-direct-mention: var(--csstools-light-dark-toggle--316, hsla(240, 70%, 70%, 0.2));
    --csstools-light-dark-toggle--317: var(--csstools-color-scheme--light) hsla(240, 52%, 60%, 0.45);
    --color-background-text-hover-direct-mention: var(--csstools-light-dark-toggle--317, hsla(240, 70%, 70%, 0.3));
    --csstools-light-dark-toggle--318: var(--csstools-color-scheme--light) hsla(183, 52%, 40%, 0.2);
    --color-background-text-group-mention: var(--csstools-light-dark-toggle--318, hsla(183, 60%, 45%, 0.18));
    --csstools-light-dark-toggle--319: var(--csstools-color-scheme--light) hsla(183, 52%, 40%, 0.3);
    --color-background-text-hover-group-mention: var(--csstools-light-dark-toggle--319, hsla(183, 60%, 45%, 0.3));

    /* Input pills */
    --csstools-light-dark-toggle--320: var(--csstools-color-scheme--light) hsla(240, 65%, 60%, 0.38);
    --color-background-input-pill: var(--csstools-light-dark-toggle--320, hsl(237, 68%, 94%));
    /* Tuned pill for the search bar in dark mode. */
    --csstools-light-dark-toggle--321: var(--csstools-color-scheme--light) hsla(240, 65%, 60%, 0.3);
    --color-background-input-pill-search: var(--csstools-light-dark-toggle--321, hsl(237, 68%, 94%));
    --csstools-light-dark-toggle--322: var(--csstools-color-scheme--light) hsla(240, 52%, 60%, 0.45);
    --color-background-input-pill-hover: var(--csstools-light-dark-toggle--322, hsla(240, 70%, 70%, 0.3));
    --csstools-light-dark-toggle--323: var(--csstools-color-scheme--light) hsla(240, 65%, 60%, 0.6);
    --color-border-input-pill-image: var(--csstools-light-dark-toggle--323, hsla(237, 68%, 94%, 0.5));
    --csstools-light-dark-toggle--324: var(--csstools-color-scheme--light) hsla(240, 65%, 60%, 0.22);
    --color-outline-low-attention-input-pill: var(--csstools-light-dark-toggle--324, hsl(237, 68%, 88%));
    --csstools-light-dark-toggle--325: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.6);
    --color-focus-outline-input-pill: var(--csstools-light-dark-toggle--325, hsl(240, 50%, 50%));
    --csstools-light-dark-toggle--326: var(--csstools-color-scheme--light) hsl(240, 50%, 74%);
    --color-input-pill-close: var(--csstools-light-dark-toggle--326, hsl(240, 60%, 65%));
    --csstools-light-dark-toggle--327: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --color-background-input-pill-exit-hover: var(--csstools-light-dark-toggle--327, hsla(240, 70%, 70%, 0.15));
    --csstools-light-dark-toggle--328: var(--csstools-color-scheme--light) hsl(0, 97%, 25%);
    --color-background-deactivated-user-pill: var(--csstools-light-dark-toggle--328, hsl(8, 96%, 91%));
    --csstools-light-dark-toggle--329: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.7);
    --color-focus-outline-deactivated-user-pill: var(--csstools-light-dark-toggle--329, hsl(4, 75%, 53%));
    --csstools-light-dark-toggle--330: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-close-deactivated-user-pill: var(--csstools-light-dark-toggle--330, hsl(4, 75%, 53%));
    --csstools-light-dark-toggle--331: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --color-background-exit-hover-deactivated-user-pill: var(--csstools-light-dark-toggle--331, hsla(4, 75%, 53%, 0.15));
    --csstools-light-dark-toggle--332: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    --color-background-user-pill: var(--csstools-light-dark-toggle--332, hsla(0, 0%, 100%, 0.85));
    --csstools-light-dark-toggle--333: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-pill-container: var(--csstools-light-dark-toggle--333, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--334: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-pill-container-input-disabled: var(--csstools-light-dark-toggle--334, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--335: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-pill-container: var(--csstools-light-dark-toggle--335, hsla(0, 0%, 0%, 0.15));

    /* Inbox view constants - Values from Figma design */
    --inbox-view-folder-component-border-width: 0.5px;
    --width-inbox-search: calc(27.4375em); /* 439px / 16px em */
    --width-inbox-filters-dropdown: 10.7142em; /* 150px / 14px em */
    --csstools-light-dark-toggle--336: var(--csstools-color-scheme--light) hsl(147, 40%, 55%);
    --color-background-inbox-no-unreads-illustration: var(--csstools-light-dark-toggle--336, hsl(147, 57%, 25%));
    --color-background-inbox: var(--color-background);
    --color-border-inbox-folder-component: hsla(0, 0%, 0%, 0.13);
    --csstools-light-dark-toggle--337: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-icon-search-inbox: var(--csstools-light-dark-toggle--337, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--338: var(--csstools-color-scheme--light) hsl(0, 0%, 95%);
    --color-inbox-search-text: var(--csstools-light-dark-toggle--338, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--339: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.2);
    --color-border-inbox-search: var(--csstools-light-dark-toggle--339, hsla(229, 22%, 10%, 0.3));
    --csstools-light-dark-toggle--340: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.4);
    --color-border-inbox-search-hover: var(--csstools-light-dark-toggle--340, hsla(229, 22%, 10%, 0.6));
    --csstools-light-dark-toggle--341: var(--csstools-color-scheme--light) hsl(225, 6%, 10%);
    --color-background-inbox-search: var(--csstools-light-dark-toggle--341, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--342: var(--csstools-color-scheme--light) hsl(225, 6%, 8%);
    --color-background-inbox-search-hover: var(--csstools-light-dark-toggle--342, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--343: var(--csstools-color-scheme--light) hsl(225, 6%, 7%);
    --color-background-inbox-search-focus: var(--csstools-light-dark-toggle--343, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--344: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
    --color-border-inbox-search-focus: var(--csstools-light-dark-toggle--344, hsla(229, 22%, 10%, 0.8));
    --csstools-light-dark-toggle--345: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.4);
    --color-box-shadow-inbox-search-focus: var(--csstools-light-dark-toggle--345, hsla(228, 10%, 20%, 0.3));
    --csstools-light-dark-toggle--346: var(--csstools-color-scheme--light) hsl(0, 0%, 14%);
    --color-background-inbox-row: var(--csstools-light-dark-toggle--346, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--347: var(--csstools-color-scheme--light) rgb(47, 47, 47);
    --color-background-inbox-row-hover: var(--csstools-light-dark-toggle--347, rgb(242, 242, 242));
    --csstools-light-dark-toggle--348: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
    --color-background-button-inbox-selected: var(--csstools-light-dark-toggle--348, hsla(0, 0%, 0%, 0.05));
    --csstools-light-dark-toggle--349: var(--csstools-color-scheme--light) hsl(0, 0%, 20%);
    --color-background-button-inbox-focus: var(--csstools-light-dark-toggle--349, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--350: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-icons-inbox: var(--csstools-light-dark-toggle--350, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--351: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
    --color-folder-header: var(--csstools-light-dark-toggle--351, hsl(216, 43%, 20%));
    /* Light mode uses the --grey-600 equivalent;
       dark mode uses the --grey-300 equivalent. */
    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) #aaadba;
    --color-inbox-row-chevron: var(--csstools-light-dark-toggle--15, #535663);

    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.11px 0 hsla(0, 0%, 0%, 0.06),
        0 5.5113px 8.5783px 0 hsla(0, 0%, 0%, 0.07),
        0 8.438px 13.9271px 0 hsla(0, 0%, 0%, 0.08),
        0 12.177px 21.4737px 0 hsla(0, 0%, 0%, 0.09),
        0 18.7257px 35.4802px 0 hsla(0, 0%, 0%, 0.09),
        0 41px 80px 0 hsla(0, 0%, 0%, 0.13);
    --box-shadow-gear-menu:
        0 2.7798px 4.1129px 0 hsla(0, 0%, 0%, 0.1),
        0 5.5113px 8.5783px 0 hsla(0, 0%, 0%, 0.09),
        0 8.4377px 13.9271px 0 hsla(0, 0%, 0%, 0.11),
        0 12.177px 21.4737px 0 hsla(0, 0%, 0%, 0.11),
        0 18.7257px 35.4802px 0 hsla(0, 0%, 0%, 0.15),
        0 41px 80px 0 hsla(0, 0%, 0%, 0.2);
    --csstools-light-dark-toggle--352: var(--csstools-color-scheme--light) hsl(240, 35%, 60%);
    --color-navbar-icon: var(--csstools-light-dark-toggle--352, hsl(240, 20%, 50%));
    --csstools-light-dark-toggle--353: var(--csstools-color-scheme--light) hsl(240, 55%, 72%);
    --color-navbar-spectator-low-attention-brand-button-text: var(--csstools-light-dark-toggle--353, hsl(240, 40%, 50%));
    --color-navbar-spectator-low-attention-brand-button-background: transparent;
    --csstools-light-dark-toggle--354: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.1);
    --color-navbar-spectator-low-attention-brand-button-background-hover: var(--csstools-light-dark-toggle--354, hsla(240, 100%, 30%, 0.05));
    --csstools-light-dark-toggle--355: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.13);
    --color-navbar-spectator-low-attention-brand-button-background-active: var(--csstools-light-dark-toggle--355, hsla(240, 100%, 30%, 0.08));
    --csstools-light-dark-toggle--356: var(--csstools-color-scheme--light) hsl(240, 64%, 76%);
    --color-navbar-spectator-medium-attention-brand-button-text: var(--csstools-light-dark-toggle--356, hsl(240, 40%, 40%));
    --csstools-light-dark-toggle--357: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.12);
    --color-navbar-spectator-medium-attention-brand-button-background: var(--csstools-light-dark-toggle--357, hsla(244, 64%, 47%, 0.1));
    --csstools-light-dark-toggle--358: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.17);
    --color-navbar-spectator-medium-attention-brand-button-background-hover: var(--csstools-light-dark-toggle--358, hsla(244, 64%, 47%, 0.15));
    --csstools-light-dark-toggle--359: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.12);
    --color-navbar-spectator-medium-attention-brand-button-background-active: var(--csstools-light-dark-toggle--359, hsla(244, 64%, 47%, 0.18));
    --csstools-light-dark-toggle--360: var(--csstools-color-scheme--light) hsl(0, 0%, 50%);
    --color-gear-menu-lighter-text: var(--csstools-light-dark-toggle--360, hsl(0, 0%, 40%));
    --csstools-light-dark-toggle--361: var(--csstools-color-scheme--light) hsl(217, 100%, 65%);
    --color-gear-menu-blue-text: var(--csstools-light-dark-toggle--361, hsl(217, 100%, 50%));
    --csstools-light-dark-toggle--362: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.04);
    --color-header-button-hover: var(--csstools-light-dark-toggle--362, hsla(0, 0%, 0%, 0.05));
    /* This is a technique for directing CSS to do
       the color mixing ordinarily handled by the
       alpha channel in hsl(); here, the alpha value
       is omitted from the hsl() syntax and instead
       used as the percentage for mixing over top of
       the navbar background. This is needed so that
       elements like the unread-count dot can make
       use of the color, but neither compound alpha
       values or apply alpha values over different
       colors, such as the background color on the
       unread dot.

       The second color value aligns with
       --color-background-navbar. We use the value
       directly so that this gets compiled down to
       an rgb() value by PostCSS Preset Env. */
    --csstools-light-dark-toggle--363: var(--csstools-color-scheme--light) rgb(42, 42, 42);
    --color-header-button-hover-no-alpha: var(--csstools-light-dark-toggle--363, rgb(235, 235, 235));
    --csstools-light-dark-toggle--364: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --color-header-button-focus: var(--csstools-light-dark-toggle--364, hsla(0, 0%, 0%, 0.08));
    /* The second color value aligns with
       --color-background-navbar */
    --csstools-light-dark-toggle--365: var(--csstools-color-scheme--light) rgb(49, 49, 49);
    --color-header-button-focus-no-alpha: var(--csstools-light-dark-toggle--365, rgb(228, 228, 228));
    --color-fill-hover-copy-icon: hsl(200, 100%, 40%);
    --csstools-light-dark-toggle--366: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-fill-user-invite-copy-icon: var(--csstools-light-dark-toggle--366, hsl(0, 0%, 47%));
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23333333' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z'/%3E%3C/svg%3E");

    /* Button colors on modals and message editing. */
    /* Don't define light theme colors for modal here
       since the modal is also used on billing pages and
       this file is not imported on billing pages. */

    /* Zulip-style button colors. */
    --csstools-light-dark-toggle--367: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-zulip-button: var(--csstools-light-dark-toggle--367, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--368: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.15);
    --color-background-zulip-button-hover: var(--csstools-light-dark-toggle--368, var(--color-background-zulip-button));
    --csstools-light-dark-toggle--369: var(--csstools-color-scheme--light) var(--color-background-zulip-button-hover);
    --color-background-zulip-button-active: var(--csstools-light-dark-toggle--369, hsl(0, 0%, 95%));
    --csstools-light-dark-toggle--370: var(--csstools-color-scheme--light) var(--color-background-zulip-button);
    --color-background-zulip-button-disabled: var(--csstools-light-dark-toggle--370, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--371: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-zulip-button: var(--csstools-light-dark-toggle--371, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--372: var(--csstools-color-scheme--light) var(--color-border-zulip-button);
    --color-border-zulip-button-interactive: var(--csstools-light-dark-toggle--372, hsl(0, 0%, 60%));

    /* Zulip-style checkbox values. */
    --csstools-light-dark-toggle--373: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.4);
    --color-border-rendered-checkbox: var(--csstools-light-dark-toggle--373, hsla(0, 0%, 0%, 0.6));
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url("../images/checkbox.svg");
    /* Nested checkboxes in settings menu */
    --settings-nested-checkbox-vertical-margins: 0.3125em 0; /* 5px at 16px */

    /* Theme-dependent SVGs */
    --svg-url-thumbnail-loader: url("../images/loading/loader-black.svg");

    /* Zulip resizer handle svg */
    --svg-resize-handle: url("../images/resize-handle-black.svg");

    /* Emoji-picker colors */
    --csstools-light-dark-toggle--374: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-emoji-picker-popover: var(--csstools-light-dark-toggle--374, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--375: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-emoji-picker-popover-tab-item-active: var(--csstools-light-dark-toggle--375, hsla(0, 0%, 100%, 0.2));
    --csstools-light-dark-toggle--376: var(--csstools-color-scheme--light) hsla(212, 28%, 8%, 0.75);
    --color-background-emoji-picker-emoji-focus: var(--csstools-light-dark-toggle--376, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--377: var(--csstools-color-scheme--light) hsl(0, 0%, 98%);
    --color-box-shadow-emoji-picker-emoji-focus: var(--csstools-light-dark-toggle--377, transparent);
    --csstools-light-dark-toggle--378: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-emoji-picker-emoji-reacted: var(--csstools-light-dark-toggle--378, hsl(195, 50%, 95%));
    --csstools-light-dark-toggle--379: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
    --color-border-emoji-picker-emoji-reacted: var(--csstools-light-dark-toggle--379, hsl(195, 52%, 79%));
    --csstools-light-dark-toggle--380: var(--csstools-color-scheme--light) hsla(0, 0%, 20%, 0.7);
    --color-background-emoji-picker-emoji-reacted-focus: var(--csstools-light-dark-toggle--380, hsl(195, 55%, 88%));
    /* Same color as background color of header / footer */
    --csstools-light-dark-toggle--381: var(--csstools-color-scheme--light) hsl(212, 33%, 11%);
    --color-border-emoji-picker-tippy-arrow: var(--csstools-light-dark-toggle--381, hsl(0, 0%, 93%));

    /* Dropdown / Typeahead constants */
    --csstools-light-dark-toggle--382: var(--csstools-color-scheme--light) hsl(0, 0%, 75%);
    --color-dropdown-item: var(--csstools-light-dark-toggle--382, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) hsl(0deg 0% 75% 60%);
    --color-dropdown-item-link-underline: var(--csstools-light-dark-toggle--16, hsl(0deg 0% 20% 60%));
    --csstools-light-dark-toggle--383: var(--csstools-color-scheme--light) hsl(0, 0%, 90%);
    --color-active-dropdown-item: var(--csstools-light-dark-toggle--383, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--384: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --background-color-active-dropdown-item: var(--csstools-light-dark-toggle--384, hsla(220, 12%, 5%, 0.05));
    --background-color-current-selection-dropdown-item: color-mix(
        in srgb,
        var(--color-active-dropdown-item) 2%,
        transparent
    );
    --background-color-current-setting-dropdown-item: color-mix(
        in srgb,
        var(--purple-500) 13%,
        transparent
    );
    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) var(--purple-300);
    --color-current-setting-dropdown-item: var(--csstools-light-dark-toggle--17, var(--purple-700));
    --csstools-light-dark-toggle--385: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --background-color-active-typeahead-item: var(--csstools-light-dark-toggle--385, hsla(220, 12%, 5%, 0.05));
    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) var(--grey-400);
    --color-typeahead-option-label: var(--csstools-light-dark-toggle--18, var(--grey-500));

    /* Shared button CSS variables */
    --csstools-light-dark-toggle--386: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-outline-button-focus: var(--csstools-light-dark-toggle--386, hsl(0, 0%, 0%));
    --outline-width-button-focus: 1.5px;
    --outline-offset-button-focus: 0;
    /* Actions buttons */
    --csstools-light-dark-toggle--387: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.21);
    --color-inner-shadow-action-button: var(--csstools-light-dark-toggle--387, rgba(0, 0, 0, 0.2));
    /* Action buttons -- Neutral Variant */
    --csstools-light-dark-toggle--877: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-neutral-solid-action-button: var(--csstools-light-dark-toggle--877, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--388: var(--csstools-color-scheme--light) hsl(229, 9%, 36%);
    --color-background-neutral-solid-action-button: var(--csstools-light-dark-toggle--388, hsl(229, 7%, 50%));
    --csstools-light-dark-toggle--389: var(--csstools-color-scheme--light) hsl(229, 8%, 42%);
    --color-background-neutral-solid-action-button-hover: var(--csstools-light-dark-toggle--389, hsl(229, 7%, 47%));
    --csstools-light-dark-toggle--390: var(--csstools-color-scheme--light) hsl(229, 9%, 36%);
    --color-background-neutral-solid-action-button-active: var(--csstools-light-dark-toggle--390, hsl(232, 7%, 44%));
    --csstools-light-dark-toggle--391: var(--csstools-color-scheme--light) hsl(231, 11%, 76%);
    --color-text-neutral-subtle-action-button: var(--csstools-light-dark-toggle--391, hsl(229, 12%, 25%));
    --csstools-light-dark-toggle--392: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    --color-background-neutral-subtle-action-button: var(--csstools-light-dark-toggle--392, rgba(119, 122, 136, 0.12));
    --csstools-light-dark-toggle--393: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.17);
    --color-background-neutral-subtle-action-button-hover: var(--csstools-light-dark-toggle--393, rgba(119, 122, 136, 0.17));
    --csstools-light-dark-toggle--394: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    --color-background-neutral-subtle-action-button-active: var(--csstools-light-dark-toggle--394, rgba(119, 122, 136, 0.22));
    --csstools-light-dark-toggle--395: var(--csstools-color-scheme--light) hsl(229, 10%, 70%);
    --color-text-neutral-text-action-button: var(--csstools-light-dark-toggle--395, hsl(229, 9%, 36%));
    --csstools-light-dark-toggle--396: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-background-neutral-text-action-button-hover: var(--csstools-light-dark-toggle--396, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--397: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-background-neutral-text-action-button-active: var(--csstools-light-dark-toggle--397, rgba(84, 87, 100, 0.11));
    /* Action buttons -- Brand Variant */
    --csstools-light-dark-toggle--878: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-brand-solid-action-button: var(--csstools-light-dark-toggle--878, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--398: var(--csstools-color-scheme--light) hsl(261, 79%, 43%);
    --color-background-brand-solid-action-button: var(--csstools-light-dark-toggle--398, hsl(254, 99%, 68%));
    --csstools-light-dark-toggle--399: var(--csstools-color-scheme--light) hsl(258, 66%, 51%);
    --color-background-brand-solid-action-button-hover: var(--csstools-light-dark-toggle--399, hsl(255, 81%, 61%));
    --csstools-light-dark-toggle--400: var(--csstools-color-scheme--light) hsl(261, 79%, 43%);
    --color-background-brand-solid-action-button-active: var(--csstools-light-dark-toggle--400, hsl(258, 66%, 51%));
    --csstools-light-dark-toggle--401: var(--csstools-color-scheme--light) hsl(244, 96%, 82%);
    --color-text-brand-subtle-action-button: var(--csstools-light-dark-toggle--401, hsl(264, 95%, 34%));
    --csstools-light-dark-toggle--402: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
    --color-background-brand-subtle-action-button: var(--csstools-light-dark-toggle--402, rgba(130, 93, 254, 0.12));
    --csstools-light-dark-toggle--403: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.17);
    --color-background-brand-subtle-action-button-hover: var(--csstools-light-dark-toggle--403, rgba(130, 93, 254, 0.17));
    --csstools-light-dark-toggle--404: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
    --color-background-brand-subtle-action-button-active: var(--csstools-light-dark-toggle--404, rgba(130, 93, 254, 0.22));
    --csstools-light-dark-toggle--405: var(--csstools-color-scheme--light) hsl(246, 96%, 79%);
    --color-text-brand-text-action-button: var(--csstools-light-dark-toggle--405, hsl(255, 54%, 50%));
    --csstools-light-dark-toggle--406: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.14);
    --color-background-brand-text-action-button-hover: var(--csstools-light-dark-toggle--406, rgba(45, 0, 112, 0.05));
    --csstools-light-dark-toggle--407: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.18);
    --color-background-brand-text-action-button-active: var(--csstools-light-dark-toggle--407, rgba(45, 0, 112, 0.1));
    /* Action buttons -- Info Variant */
    --csstools-light-dark-toggle--879: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-info-solid-action-button: var(--csstools-light-dark-toggle--879, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--408: var(--csstools-color-scheme--light) hsl(228, 75%, 47%);
    --color-background-info-solid-action-button: var(--csstools-light-dark-toggle--408, hsl(226, 100%, 62%));
    --color-background-info-solid-action-button-hover: hsl(226, 83%, 55%);
    --color-background-info-solid-action-button-active: hsl(228, 75%, 47%);
    --csstools-light-dark-toggle--409: var(--csstools-color-scheme--light) hsl(222, 98%, 79%);
    --color-text-info-subtle-action-button: var(--csstools-light-dark-toggle--409, hsl(231, 82%, 36%));
    --csstools-light-dark-toggle--410: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.12);
    --color-background-info-subtle-action-button: var(--csstools-light-dark-toggle--410, rgba(61, 106, 255, 0.12));
    --csstools-light-dark-toggle--411: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.17);
    --color-background-info-subtle-action-button-hover: var(--csstools-light-dark-toggle--411, rgba(61, 106, 255, 0.17));
    --csstools-light-dark-toggle--412: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.12);
    --color-background-info-subtle-action-button-active: var(--csstools-light-dark-toggle--412, rgba(61, 106, 255, 0.22));
    --csstools-light-dark-toggle--413: var(--csstools-color-scheme--light) hsl(222, 97%, 75%);
    --color-text-info-text-action-button: var(--csstools-light-dark-toggle--413, hsl(227, 70%, 46%));
    --csstools-light-dark-toggle--414: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.12);
    --color-background-info-text-action-button-hover: var(--csstools-light-dark-toggle--414, rgba(5, 3, 124, 0.05));
    --csstools-light-dark-toggle--415: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.17);
    --color-background-info-text-action-button-active: var(--csstools-light-dark-toggle--415, rgba(5, 3, 124, 0.09));
    /* Action buttons -- Success Variant */
    --csstools-light-dark-toggle--880: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-success-solid-action-button: var(--csstools-light-dark-toggle--880, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--416: var(--csstools-color-scheme--light) hsl(144, 84%, 22%);
    --color-background-success-solid-action-button: var(--csstools-light-dark-toggle--416, hsl(146, 90%, 27%));
    --color-background-success-solid-action-button-hover: hsl(145, 87%, 25%);
    --color-background-success-solid-action-button-active: hsl(144, 84%, 22%);
    --csstools-light-dark-toggle--417: var(--csstools-color-scheme--light) hsl(135, 56%, 63%);
    --color-text-success-subtle-action-button: var(--csstools-light-dark-toggle--417, hsl(144, 88%, 16%));
    --csstools-light-dark-toggle--418: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.12);
    --color-background-success-subtle-action-button: var(--csstools-light-dark-toggle--418, rgba(7, 131, 61, 0.13));
    --csstools-light-dark-toggle--419: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.17);
    --color-background-success-subtle-action-button-hover: var(--csstools-light-dark-toggle--419, rgba(7, 131, 61, 0.18));
    --csstools-light-dark-toggle--420: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.12);
    --color-background-success-subtle-action-button-active: var(--csstools-light-dark-toggle--420, rgba(7, 131, 61, 0.23));
    --csstools-light-dark-toggle--421: var(--csstools-color-scheme--light) hsl(136, 47%, 55%);
    --color-text-success-text-action-button: var(--csstools-light-dark-toggle--421, hsl(146, 90%, 27%));
    --csstools-light-dark-toggle--422: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.12);
    --color-background-success-text-action-button-hover: var(--csstools-light-dark-toggle--422, rgba(9, 103, 47, 0.08));
    --csstools-light-dark-toggle--423: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.17);
    --color-background-success-text-action-button-active: var(--csstools-light-dark-toggle--423, rgba(9, 103, 47, 0.12));
    /* Action buttons -- Warning Variant */
    --csstools-light-dark-toggle--424: var(--csstools-color-scheme--light) rgba(0, 0, 0, 0.9);
    --color-text-warning-solid-action-button: var(--csstools-light-dark-toggle--424, rgba(0, 0, 0, 0.88));
    --csstools-light-dark-toggle--425: var(--csstools-color-scheme--light) hsl(39, 89%, 45%);
    --color-background-warning-solid-action-button: var(--csstools-light-dark-toggle--425, hsl(40, 99%, 62%));
    --csstools-light-dark-toggle--426: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
    --color-background-warning-solid-action-button-hover: var(--csstools-light-dark-toggle--426, hsl(40, 94%, 56%));
    --csstools-light-dark-toggle--427: var(--csstools-color-scheme--light) hsl(39, 89%, 45%);
    --color-background-warning-solid-action-button-active: var(--csstools-light-dark-toggle--427, hsl(41, 98%, 46%));
    --csstools-light-dark-toggle--428: var(--csstools-color-scheme--light) hsl(40, 94%, 56%);
    --color-text-warning-subtle-action-button: var(--csstools-light-dark-toggle--428, hsl(34, 89%, 25%));
    --csstools-light-dark-toggle--429: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.12);
    --color-background-warning-subtle-action-button: var(--csstools-light-dark-toggle--429, rgba(232, 159, 2, 0.18));
    --csstools-light-dark-toggle--430: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.17);
    --color-background-warning-subtle-action-button-hover: var(--csstools-light-dark-toggle--430, rgba(232, 159, 2, 0.23));
    --csstools-light-dark-toggle--431: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.12);
    --color-background-warning-subtle-action-button-active: var(--csstools-light-dark-toggle--431, rgba(232, 159, 2, 0.28));
    --csstools-light-dark-toggle--432: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
    --color-text-warning-text-action-button: var(--csstools-light-dark-toggle--432, hsl(37, 94%, 34%));
    --csstools-light-dark-toggle--433: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.12);
    --color-background-warning-text-action-button-hover: var(--csstools-light-dark-toggle--433, rgba(168, 106, 5, 0.1));
    --csstools-light-dark-toggle--434: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.17);
    --color-background-warning-text-action-button-active: var(--csstools-light-dark-toggle--434, rgba(168, 106, 5, 0.14));
    /* Action buttons -- Danger Variant */
    --csstools-light-dark-toggle--881: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-danger-solid-action-button: var(--csstools-light-dark-toggle--881, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--435: var(--csstools-color-scheme--light) hsl(2, 74%, 47%);
    --color-background-danger-solid-action-button: var(--csstools-light-dark-toggle--435, hsl(4, 75%, 51%));
    --csstools-light-dark-toggle--436: var(--csstools-color-scheme--light) hsl(4, 75%, 53%);
    --color-background-danger-solid-action-button-hover: var(--csstools-light-dark-toggle--436, hsl(2, 74%, 47%));
    --csstools-light-dark-toggle--437: var(--csstools-color-scheme--light) hsl(2, 92%, 33%);
    --color-background-danger-solid-action-button-active: var(--csstools-light-dark-toggle--437, hsl(359, 93%, 39%));
    --csstools-light-dark-toggle--438: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-text-danger-subtle-action-button: var(--csstools-light-dark-toggle--438, hsl(359, 94%, 35%));
    --csstools-light-dark-toggle--439: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.12);
    --color-background-danger-subtle-action-button: var(--csstools-light-dark-toggle--439, rgba(225, 57, 45, 0.13));
    --csstools-light-dark-toggle--440: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.17);
    --color-background-danger-subtle-action-button-hover: var(--csstools-light-dark-toggle--440, rgba(225, 57, 45, 0.18));
    --csstools-light-dark-toggle--441: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.12);
    --color-background-danger-subtle-action-button-active: var(--csstools-light-dark-toggle--441, rgba(225, 57, 45, 0.23));
    --csstools-light-dark-toggle--442: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-text-danger-text-action-button: var(--csstools-light-dark-toggle--442, hsl(359, 93%, 39%));
    --csstools-light-dark-toggle--443: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.12);
    --color-background-danger-text-action-button-hover: var(--csstools-light-dark-toggle--443, rgba(192, 7, 10, 0.09));
    --csstools-light-dark-toggle--444: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.17);
    --color-background-danger-text-action-button-active: var(--csstools-light-dark-toggle--444, rgba(192, 7, 10, 0.13));

    /* Icon buttons */
    /* Icon buttons -- Neutral Variant */
    --csstools-light-dark-toggle--445: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-text-neutral-icon-button: var(--csstools-light-dark-toggle--445, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--446: var(--csstools-color-scheme--light) hsl(229, 10%, 70%);
    --color-text-neutral-icon-button-hover: var(--csstools-light-dark-toggle--446, hsl(229, 9%, 36%));
    --csstools-light-dark-toggle--447: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-text-neutral-icon-button-active: var(--csstools-light-dark-toggle--447, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--448: var(--csstools-color-scheme--light) hsl(229, 10%, 70%);
    --color-text-neutral-icon-button-square-active: var(--csstools-light-dark-toggle--448, hsl(229, 9%, 36%));
    --csstools-light-dark-toggle--449: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-background-neutral-icon-button-square-hover: var(--csstools-light-dark-toggle--449, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--450: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-background-neutral-icon-button-square-active: var(--csstools-light-dark-toggle--450, rgba(84, 87, 100, 0.11));
    /* Icon buttons -- Brand Variant */
    --csstools-light-dark-toggle--451: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.7);
    --color-text-brand-icon-button: var(--csstools-light-dark-toggle--451, rgba(93, 59, 196, 0.7));
    --csstools-light-dark-toggle--452: var(--csstools-color-scheme--light) hsl(246, 96%, 79%);
    --color-text-brand-icon-button-hover: var(--csstools-light-dark-toggle--452, hsl(255, 54%, 50%));
    --csstools-light-dark-toggle--453: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.7);
    --color-text-brand-icon-button-active: var(--csstools-light-dark-toggle--453, rgba(93, 59, 196, 0.7));
    --csstools-light-dark-toggle--454: var(--csstools-color-scheme--light) hsl(246, 96%, 79%);
    --color-text-brand-icon-button-square-active: var(--csstools-light-dark-toggle--454, hsl(255, 54%, 50%));
    --csstools-light-dark-toggle--455: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.14);
    --color-background-brand-icon-button-square-hover: var(--csstools-light-dark-toggle--455, rgba(45, 0, 112, 0.05));
    --csstools-light-dark-toggle--456: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.18);
    --color-background-brand-icon-button-square-active: var(--csstools-light-dark-toggle--456, rgba(45, 0, 112, 0.1));
    /* Icon buttons -- Info Variant */
    --csstools-light-dark-toggle--457: var(--csstools-color-scheme--light) rgba(129, 167, 253, 0.7);
    --color-text-info-icon-button: var(--csstools-light-dark-toggle--457, rgba(35, 71, 199, 0.7));
    --csstools-light-dark-toggle--458: var(--csstools-color-scheme--light) hsl(222, 97%, 75%);
    --color-text-info-icon-button-hover: var(--csstools-light-dark-toggle--458, hsl(227, 70%, 46%));
    --csstools-light-dark-toggle--459: var(--csstools-color-scheme--light) rgba(129, 167, 253, 0.7);
    --color-text-info-icon-button-active: var(--csstools-light-dark-toggle--459, rgba(35, 71, 199, 0.7));
    --csstools-light-dark-toggle--460: var(--csstools-color-scheme--light) hsl(222, 97%, 75%);
    --color-text-info-icon-button-square-active: var(--csstools-light-dark-toggle--460, hsl(227, 70%, 46%));
    --csstools-light-dark-toggle--461: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.12);
    --color-background-info-icon-button-square-hover: var(--csstools-light-dark-toggle--461, rgba(5, 3, 124, 0.05));
    --csstools-light-dark-toggle--462: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.17);
    --color-background-info-icon-button-square-active: var(--csstools-light-dark-toggle--462, rgba(5, 3, 124, 0.09));
    /* Icon buttons -- Success Variant */
    --csstools-light-dark-toggle--463: var(--csstools-color-scheme--light) rgba(86, 194, 115, 0.7);
    --color-text-success-icon-button: var(--csstools-light-dark-toggle--463, rgba(7, 131, 61, 0.7));
    --csstools-light-dark-toggle--464: var(--csstools-color-scheme--light) hsl(136, 47%, 55%);
    --color-text-success-icon-button-hover: var(--csstools-light-dark-toggle--464, hsl(146, 90%, 27%));
    --csstools-light-dark-toggle--465: var(--csstools-color-scheme--light) rgba(86, 194, 115, 0.7);
    --color-text-success-icon-button-active: var(--csstools-light-dark-toggle--465, rgba(7, 131, 61, 0.7));
    --csstools-light-dark-toggle--466: var(--csstools-color-scheme--light) hsl(136, 47%, 55%);
    --color-text-success-icon-button-square-active: var(--csstools-light-dark-toggle--466, hsl(146, 90%, 27%));
    --csstools-light-dark-toggle--467: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.12);
    --color-background-success-icon-button-square-hover: var(--csstools-light-dark-toggle--467, rgba(9, 103, 47, 0.08));
    --csstools-light-dark-toggle--468: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.17);
    --color-background-success-icon-button-square-active: var(--csstools-light-dark-toggle--468, rgba(9, 103, 47, 0.12));
    /* Icon buttons -- Warning Variant */
    --csstools-light-dark-toggle--469: var(--csstools-color-scheme--light) rgba(232, 159, 2, 0.7);
    --color-text-warning-icon-button: var(--csstools-light-dark-toggle--469, rgba(168, 106, 5, 0.7));
    --csstools-light-dark-toggle--470: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
    --color-text-warning-icon-button-hover: var(--csstools-light-dark-toggle--470, hsl(37, 94%, 34%));
    --csstools-light-dark-toggle--471: var(--csstools-color-scheme--light) rgba(232, 159, 2, 0.7);
    --color-text-warning-icon-button-active: var(--csstools-light-dark-toggle--471, rgba(168, 106, 5, 0.7));
    --csstools-light-dark-toggle--472: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
    --color-text-warning-icon-button-square-active: var(--csstools-light-dark-toggle--472, hsl(37, 94%, 34%));
    --csstools-light-dark-toggle--473: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.12);
    --color-background-warning-icon-button-square-hover: var(--csstools-light-dark-toggle--473, rgba(168, 106, 5, 0.1));
    --csstools-light-dark-toggle--474: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.17);
    --color-background-warning-icon-button-square-active: var(--csstools-light-dark-toggle--474, rgba(168, 106, 5, 0.14));
    /* Icon buttons -- Danger Variant */
    --csstools-light-dark-toggle--475: var(--csstools-color-scheme--light) rgba(255, 138, 122, 0.7);
    --color-text-danger-icon-button: var(--csstools-light-dark-toggle--475, rgba(192, 7, 10, 0.7));
    --csstools-light-dark-toggle--476: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-text-danger-icon-button-hover: var(--csstools-light-dark-toggle--476, hsl(359, 93%, 39%));
    --csstools-light-dark-toggle--477: var(--csstools-color-scheme--light) rgba(255, 138, 122, 0.7);
    --color-text-danger-icon-button-active: var(--csstools-light-dark-toggle--477, rgba(192, 7, 10, 0.7));
    --csstools-light-dark-toggle--478: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-text-danger-icon-button-square-active: var(--csstools-light-dark-toggle--478, hsl(359, 93%, 39%));
    --csstools-light-dark-toggle--479: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.12);
    --color-background-danger-icon-button-square-hover: var(--csstools-light-dark-toggle--479, rgba(192, 7, 10, 0.09));
    --csstools-light-dark-toggle--480: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.17);
    --color-background-danger-icon-button-square-active: var(--csstools-light-dark-toggle--480, rgba(192, 7, 10, 0.13));

    /* Banners */
    /* NOTE: These colors are also used in starlight help center for
       aside colors. Do grep for these variable when changing them
       and confirm on CZO on whether the colors there need to change
       as well. */
    --color-text-link-banner: hsl(210, 94%, 42%);
    /* Banners - Neutral Variant */
    --csstools-light-dark-toggle--481: var(--csstools-color-scheme--light) hsl(231, 11%, 76%);
    --color-text-neutral-banner: var(--csstools-light-dark-toggle--481, hsl(229, 12%, 25%));
    --csstools-light-dark-toggle--482: var(--csstools-color-scheme--light) rgba(162, 162, 174, 0.4);
    --color-border-neutral-banner: var(--csstools-light-dark-toggle--482, rgba(75, 75, 78, 0.4));
    --csstools-light-dark-toggle--483: var(--csstools-color-scheme--light) hsl(240, 7%, 17%);
    --color-background-neutral-banner: var(--csstools-light-dark-toggle--483, hsl(240, 7%, 93%));
    /* Banners - Brand Variant */
    --csstools-light-dark-toggle--484: var(--csstools-color-scheme--light) hsl(244, 96%, 82%);
    --color-text-brand-banner: var(--csstools-light-dark-toggle--484, hsl(264, 95%, 34%));
    --csstools-light-dark-toggle--485: var(--csstools-color-scheme--light) rgba(216, 207, 247, 0.4);
    --color-border-brand-banner: var(--csstools-light-dark-toggle--485, rgba(87, 51, 204, 0.4));
    --csstools-light-dark-toggle--486: var(--csstools-color-scheme--light) hsl(254, 49%, 16%);
    --color-background-brand-banner: var(--csstools-light-dark-toggle--486, hsl(254, 42%, 94%));
    /* Banners - Info Variant */
    --csstools-light-dark-toggle--487: var(--csstools-color-scheme--light) hsl(221, 93%, 89%);
    --color-text-info-banner: var(--csstools-light-dark-toggle--487, hsl(241, 95%, 25%));
    --csstools-light-dark-toggle--488: var(--csstools-color-scheme--light) rgba(130, 184, 222, 0.4);
    --color-border-info-banner: var(--csstools-light-dark-toggle--488, rgba(38, 81, 110, 0.4));
    --csstools-light-dark-toggle--489: var(--csstools-color-scheme--light) hsl(204, 100%, 12%);
    --color-background-info-banner: var(--csstools-light-dark-toggle--489, hsl(204, 58%, 92%));
    /* Banners - Success Variant */
    --csstools-light-dark-toggle--490: var(--csstools-color-scheme--light) hsl(135, 56%, 63%);
    --color-text-success-banner: var(--csstools-light-dark-toggle--490, hsl(144, 88%, 16%));
    --csstools-light-dark-toggle--491: var(--csstools-color-scheme--light) rgba(74, 191, 131, 0.4);
    --color-border-success-banner: var(--csstools-light-dark-toggle--491, rgba(27, 100, 60, 0.4));
    --csstools-light-dark-toggle--492: var(--csstools-color-scheme--light) hsl(146, 90%, 7%);
    --color-background-success-banner: var(--csstools-light-dark-toggle--492, hsl(147, 43%, 92%));
    /* Banners - Warning Variant */
    --csstools-light-dark-toggle--493: var(--csstools-color-scheme--light) hsl(40, 94%, 56%);
    --color-text-warning-banner: var(--csstools-light-dark-toggle--493, hsl(34, 89%, 25%));
    --csstools-light-dark-toggle--494: var(--csstools-color-scheme--light) rgba(206, 186, 130, 0.4);
    --color-border-warning-banner: var(--csstools-light-dark-toggle--494, rgba(99, 77, 39, 0.4));
    --csstools-light-dark-toggle--495: var(--csstools-color-scheme--light) hsl(50, 100%, 10%);
    --color-background-warning-banner: var(--csstools-light-dark-toggle--495, hsl(50, 75%, 92%));
    /* Banners - Danger Variant */
    --csstools-light-dark-toggle--496: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-text-danger-banner: var(--csstools-light-dark-toggle--496, hsl(359, 94%, 35%));
    --csstools-light-dark-toggle--497: var(--csstools-color-scheme--light) rgba(237, 145, 140, 0.4);
    --color-border-danger-banner: var(--csstools-light-dark-toggle--497, rgba(132, 41, 36, 0.4));
    --csstools-light-dark-toggle--498: var(--csstools-color-scheme--light) hsl(0, 52%, 18%);
    --color-background-danger-banner: var(--csstools-light-dark-toggle--498, hsl(0, 35%, 92%));

    /* Inputs */
    /* Legacy input colors */
    /* TODO: Remove these variables after migrating all the inputs to use the new input colors. */
    --csstools-light-dark-toggle--499: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-legacy-input: var(--csstools-light-dark-toggle--499, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--500: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-legacy-input: var(--csstools-light-dark-toggle--500, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--501: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
    --color-border-legacy-input-focus: var(--csstools-light-dark-toggle--501, hsla(206, 80%, 62%, 0.8));
    --csstools-light-dark-toggle--502: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-disabled-settings-select: var(--csstools-light-dark-toggle--502, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--503: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-disabled-modal-select: var(--csstools-light-dark-toggle--503, hsl(0, 0%, 90%));
    --csstools-light-dark-toggle--504: var(--csstools-color-scheme--light) hsl(0, 0%, 95%);
    --color-text-input: var(--csstools-light-dark-toggle--504, hsl(0, 0%, 14%));
    /* TODO: Light mode uses browser-default white
       backgrounds; we should extend the use of this
       color variable to 1) explicitly set the
       background color of inputs, and 2) clean up a
       lingering stack of selectors in dark_theme.css. */
    --csstools-light-dark-toggle--505: var(--csstools-color-scheme--light) hsl(225, 6%, 10%);
    --color-background-input: var(--csstools-light-dark-toggle--505, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--506: var(--csstools-color-scheme--light) hsl(225, 6%, 7%);
    --color-background-input-focus: var(--csstools-light-dark-toggle--506, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--507: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.2);
    --color-outline-input: var(--csstools-light-dark-toggle--507, rgba(20, 22, 31, 0.3));
    --csstools-light-dark-toggle--508: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.4);
    --color-outline-input-hover: var(--csstools-light-dark-toggle--508, rgba(20, 22, 31, 0.6));
    --csstools-light-dark-toggle--509: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.5);
    --color-outline-input-focus: var(--csstools-light-dark-toggle--509, rgba(20, 22, 31, 0.8));
    --csstools-light-dark-toggle--510: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.4);
    --color-box-shadow-input-focus: var(--csstools-light-dark-toggle--510, rgba(46, 48, 56, 0.3));

    /* .main-view-banner colors */
    --csstools-light-dark-toggle--511: var(--csstools-color-scheme--light) hsl(147, 51%, 80%);
    --color-success-main-view-banner: var(--csstools-light-dark-toggle--511, hsl(147, 57%, 25%));
    --csstools-light-dark-toggle--512: var(--csstools-color-scheme--light) hsl(147, 100%, 8%);
    --color-background-success-main-view-banner: var(--csstools-light-dark-toggle--512, hsl(147, 43%, 92%));
    --csstools-light-dark-toggle--513: var(--csstools-color-scheme--light) hsla(149, 48%, 52%, 0.4);
    --color-border-success-main-view-banner: var(--csstools-light-dark-toggle--513, hsla(147, 57%, 25%, 0.4));
    --csstools-light-dark-toggle--514: var(--csstools-color-scheme--light) hsla(147, 51%, 55%, 0.5);
    --color-success-main-view-banner-close-button: var(--csstools-light-dark-toggle--514, hsla(147, 57%, 25%, 0.5));
    --csstools-light-dark-toggle--515: var(--csstools-color-scheme--light) hsl(147, 51%, 55%);
    --color-success-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--515, hsl(147, 57%, 25%));
    --csstools-light-dark-toggle--516: var(--csstools-color-scheme--light) hsla(147, 51%, 55%, 0.75);
    --color-success-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--516, hsla(147, 57%, 25%, 0.75));
    --csstools-light-dark-toggle--517: var(--csstools-color-scheme--light) hsla(147, 51%, 55%, 0.1);
    --color-background-success-main-view-banner-action-button: var(--csstools-light-dark-toggle--517, hsla(147, 57%, 25%, 0.1));
    --csstools-light-dark-toggle--518: var(--csstools-color-scheme--light) hsla(147, 51%, 55%, 0.15);
    --color-background-success-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--518, hsla(147, 57%, 25%, 0.12));
    --csstools-light-dark-toggle--519: var(--csstools-color-scheme--light) hsla(147, 51%, 55%, 0.2);
    --color-background-success-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--519, hsla(147, 57%, 25%, 0.15));
    --csstools-light-dark-toggle--520: var(--csstools-color-scheme--light) hsl(50, 45%, 80%);
    --color-warning-main-view-banner: var(--csstools-light-dark-toggle--520, hsl(38, 44%, 27%));
    --csstools-light-dark-toggle--521: var(--csstools-color-scheme--light) hsl(53, 100%, 11%);
    --color-background-warning-main-view-banner: var(--csstools-light-dark-toggle--521, hsl(50, 75%, 92%));
    --csstools-light-dark-toggle--522: var(--csstools-color-scheme--light) hsla(38, 44%, 60%, 0.4);
    --color-border-warning-main-view-banner: var(--csstools-light-dark-toggle--522, hsla(38, 44%, 27%, 0.4));
    --csstools-light-dark-toggle--523: var(--csstools-color-scheme--light) hsla(50, 45%, 61%, 0.5);
    --color-warning-main-view-banner-close-button: var(--csstools-light-dark-toggle--523, hsla(38, 44%, 27%, 0.5));
    --csstools-light-dark-toggle--524: var(--csstools-color-scheme--light) hsl(50, 45%, 61%);
    --color-warning-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--524, hsl(38, 44%, 27%));
    --csstools-light-dark-toggle--525: var(--csstools-color-scheme--light) hsla(50, 45%, 61%, 0.75);
    --color-warning-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--525, hsla(38, 44%, 27%, 0.75));
    --csstools-light-dark-toggle--526: var(--csstools-color-scheme--light) hsl(50, 45%, 61%);
    --color-warning-main-view-banner-action-button: var(--csstools-light-dark-toggle--526, inherit);
    --csstools-light-dark-toggle--527: var(--csstools-color-scheme--light) hsla(50, 45%, 61%, 0.1);
    --color-background-warning-main-view-banner-action-button: var(--csstools-light-dark-toggle--527, hsla(38, 44%, 27%, 0.1));
    --csstools-light-dark-toggle--528: var(--csstools-color-scheme--light) hsla(50, 45%, 61%, 0.15);
    --color-background-warning-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--528, hsla(38, 44%, 27%, 0.12));
    --csstools-light-dark-toggle--529: var(--csstools-color-scheme--light) hsla(50, 45%, 61%, 0.2);
    --color-background-warning-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--529, hsla(38, 44%, 27%, 0.15));
    --csstools-light-dark-toggle--530: var(--csstools-color-scheme--light) hsl(3, 73%, 80%);
    --color-error-main-view-banner: var(--csstools-light-dark-toggle--530, hsl(4, 58%, 33%));
    --csstools-light-dark-toggle--531: var(--csstools-color-scheme--light) hsl(0, 60%, 19%);
    --color-background-error-main-view-banner: var(--csstools-light-dark-toggle--531, hsl(4, 35%, 90%));
    --csstools-light-dark-toggle--532: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.4);
    --color-border-error-main-view-banner: var(--csstools-light-dark-toggle--532, hsla(3, 57%, 33%, 0.4));
    --csstools-light-dark-toggle--533: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.5);
    --color-error-main-view-banner-close-button: var(--csstools-light-dark-toggle--533, hsla(4, 58%, 33%, 0.5));
    --csstools-light-dark-toggle--534: var(--csstools-color-scheme--light) hsl(3, 73%, 74%);
    --color-error-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--534, hsl(4, 58%, 33%));
    --csstools-light-dark-toggle--535: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.75);
    --color-error-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--535, hsla(4, 58%, 33%, 0.75));
    --csstools-light-dark-toggle--536: var(--csstools-color-scheme--light) hsl(3, 73%, 74%);
    --color-error-main-view-banner-action-button: var(--csstools-light-dark-toggle--536, inherit);
    --csstools-light-dark-toggle--537: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.1);
    --color-background-error-main-view-banner-action-button: var(--csstools-light-dark-toggle--537, hsla(3, 57%, 33%, 0.1));
    --csstools-light-dark-toggle--538: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.15);
    --color-background-error-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--538, hsla(3, 57%, 33%, 0.12));
    --csstools-light-dark-toggle--539: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.2);
    --color-background-error-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--539, hsla(3, 57%, 33%, 0.15));
    --csstools-light-dark-toggle--540: var(--csstools-color-scheme--light) hsl(205, 58%, 80%);
    --color-info-main-view-banner: var(--csstools-light-dark-toggle--540, hsl(204, 49%, 29%));
    --csstools-light-dark-toggle--541: var(--csstools-color-scheme--light) hsl(204, 100%, 12%);
    --color-background-info-main-view-banner: var(--csstools-light-dark-toggle--541, hsl(204, 58%, 92%));
    --csstools-light-dark-toggle--542: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.4);
    --color-border-info-main-view-banner: var(--csstools-light-dark-toggle--542, hsla(204, 49%, 29%, 0.4));
    --csstools-light-dark-toggle--543: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.5);
    --color-info-main-view-banner-close-button: var(--csstools-light-dark-toggle--543, hsla(204, 49%, 29%, 0.5));
    --csstools-light-dark-toggle--544: var(--csstools-color-scheme--light) hsl(205, 58%, 69%);
    --color-info-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--544, hsl(204, 49%, 29%));
    --csstools-light-dark-toggle--545: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.75);
    --color-info-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--545, hsla(204, 49%, 29%, 0.75));
    --csstools-light-dark-toggle--546: var(--csstools-color-scheme--light) hsl(205, 58%, 69%);
    --color-info-main-view-banner-action-button: var(--csstools-light-dark-toggle--546, inherit);
    --csstools-light-dark-toggle--547: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.1);
    --color-background-info-main-view-banner-action-button: var(--csstools-light-dark-toggle--547, hsla(204, 49%, 29%, 0.1));
    --csstools-light-dark-toggle--548: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.15);
    --color-background-info-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--548, hsla(204, 49%, 29%, 0.12));
    --csstools-light-dark-toggle--549: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.2);
    --color-background-info-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--549, hsla(204, 49%, 29%, 0.15));
    --csstools-light-dark-toggle--550: var(--csstools-color-scheme--light) hsl(200, 100%, 50%);
    --color-main-view-banner-action-link: var(--csstools-light-dark-toggle--550, var(--color-text-generic-link));
    --csstools-light-dark-toggle--551: var(--csstools-color-scheme--light) hsl(204, 63%, 18%);
    --color-background-main-view-banner-moving-bar: var(--csstools-light-dark-toggle--551, hsl(204, 63%, 85%));

    /* Info density update UI */
    --csstools-light-dark-toggle--552: var(--csstools-color-scheme--light) hsla(0, 0%, 90%, 0.2);
    --color-info-density-control-border: var(--csstools-light-dark-toggle--552, hsla(0, 0%, 0%, 0.2));
    --csstools-light-dark-toggle--553: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.8);
    --color-info-density-button-icon: var(--csstools-light-dark-toggle--553, hsl(229, 9%, 36%));
    --csstools-light-dark-toggle--554: var(--csstools-color-scheme--light) hsla(229, 10%, 50%, 0.3);
    --color-info-density-button-hover-background: var(--csstools-light-dark-toggle--554, hsla(229, 9%, 36%, 0.07));
}

@supports (color: color(display-p3 0 0 0%)) {
:root {
    --gradient-custom-swatch: conic-gradient(from 0deg at 50% 50%, rgb(255, 87, 153) 0%, rgb(255, 103, 61), rgb(215, 140, 0), rgb(168, 164, 0), rgb(0, 192, 40), rgb(0, 184, 161), rgb(0, 177, 207), rgb(72, 162, 255), rgb(155, 138, 255), rgb(238, 64, 255), rgb(255, 87, 153) 100%);
}

@media (color-gamut: rec2020) {
:root {
    --gradient-custom-swatch: conic-gradient(from 0deg at 50% 50%, color(display-p3 1.03576 0.16402 0.58559) 0%, color(display-p3 1.0712 0.22315 -0.16387), color(display-p3 0.95969 0.44471 -0.37436), color(display-p3 0.70114 0.64225 -0.37766), color(display-p3 0.15111 0.76888 -0.07977), color(display-p3 -0.50711 0.80212 0.65378), color(display-p3 -0.51273 0.73019 1.04482), color(display-p3 -0.18305 0.57586 1.26541), color(display-p3 0.59635 0.40747 1.2413), color(display-p3 0.87121 0.27781 0.98482), color(display-p3 1.03576 0.16402 0.58559) 100%);
}
}
}

@supports (background: conic-gradient(in oklch, red 0deg, red 0deg 1deg, red 2deg)) and (color: oklab(0% 0 0%)) {
:root {
    --gradient-custom-swatch: conic-gradient(
        from 0deg at 50% 50% in oklch longer hue,
        rgb(255, 87, 153) 0%,
        rgb(255, 87, 153) 100%
    );
}

@media (color-gamut: rec2020) {
:root {
    --gradient-custom-swatch: conic-gradient(
        from 0deg at 50% 50% in oklch longer hue,
        oklch(70% 0.3 0deg) 0%,
        oklch(70% 0.3 0deg) 100%
    );
}
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-date: light-dark(hsla(0, 0%, 15%, 0.75), hsla(0, 0%, 100%, 0.75));
    --color-background-private-message-header: light-dark(
        hsl(46, 35%, 93%),
        hsl(46, 15%, 20%)
    );
    --color-background-private-message-content: light-dark(
        hsl(45, 20%, 96%),
        hsl(46, 7%, 16%)
    );
    --color-background-stream-message-content: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 14%)
    );
    --color-selected-message-outline: light-dark(
        hsla(217, 64%, 59%, 0.6),
        hsla(217, 64%, 59%, 0.7)
    );
    --color-selected-gif-in-grid-picker: light-dark(
        hsl(217, 75%, 59%),
        hsl(217, 95%, 59%)
    );
    --color-hovered-gif-in-grid-picker: light-dark(
        hsla(217, 75%, 59%, 0.5),
        hsla(217, 95%, 59%, 0.6)
    );
    --color-message-list-border: light-dark(
        hsla(0, 0%, 0%, 0.16),
        hsla(0, 0%, 0%, 0.4)
    );
    --color-message-header-contents-border: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-private-message-header-border: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 0%, 0.48)
    );
    --color-message-header-contents-border-bottom: light-dark(
        hsla(0, 0%, 0%, 0.05),
        hsla(0, 0%, 0%, 0.5)
    );
    --color-private-message-header-border-bottom: light-dark(
        hsla(0, 0%, 0%, 0.07),
        hsla(0, 0%, 0%, 0.37)
    );
    --color-message-header-icon-non-interactive: light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
    --color-message-header-icon-interactive: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
    --color-background: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    --color-background-widget-input: light-dark(
        hsl(0, 0%, 100%),
        hsl(225, 6%, 10%)
    );
    --color-background-widget-button: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-navbar: light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 13%));
    --color-text-sidebar-row: light-dark(
        hsl(0, 0%, 20%),
        hsla(0, 0%, 100%, 0.85)
    );
    --color-text-active-narrow-filter: light-dark(
        hsl(0, 0%, 15%),
        hsl(0, 0%, 90%)
    );
    --color-background-active-narrow-filter: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
    --color-background-hover-narrow-filter: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
    --color-shadow-sidebar-row-hover: light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
    --color-sidebar-action: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
    --color-sidebar-action-hover: light-dark(
        hsl(240, 100%, 15%),
        hsl(240, 100%, 90%)
    );
    --color-background-sidebar-action-hover: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
    --color-background-navigation-item-hover: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
    --color-navbar-bottom-border: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-left-sidebar-direct-messages-bottom-divider: light-dark(
        hsla(0, 0%, 0%, 0.15),
        hsla(0, 0%, 100%, 0.15)
    );
    --color-left-sidebar-inner-box-shadow: light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 0%, 0.8)
    );
    --color-left-sidebar-outer-box-shadow: light-dark(
        hsla(0, 0%, 94%, 0.2),
        hsla(0, 0%, 11%, 0.3)
    );
    --color-left-sidebar-middle-box-shadow-hover: light-dark(
        hsl(244, 36%, 91%),
        hsl(240, 19%, 24%)
    );
    --color-left-sidebar-outer-box-shadow-hover: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
    --color-masked-unread-marker: light-dark(
        hsl(0, 0%, 80%),
        hsl(0, 0%, 30%)
    );
    --color-active-row-modal: light-dark(
        hsl(0, 0%, 98%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-overlay: light-dark(
        hsla(0, 0%, 13%, 0.8),
        hsla(212, 28%, 8%, 0.75)
    );
    --color-background-non-empty-overlay-indicator: light-dark(
        hsla(0, 0%, 100%, 0.9),
        hsla(212, 28%, 8%, 0.75)
    );
    --color-modal-selectable-icon: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
    --color-modal-selectable-icon-hover: light-dark(
        hsl(240, 100%, 15%),
        hsl(240, 100%, 90%)
    );
    --background-color-modal-selectable-icon-hover: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
    --background-color-readonly-modal-input: light-dark(
        hsl(240, 7%, 93%),
        hsl(240, 7%, 17%)
    );
    --background-color-textarea: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --background-color-disabled-textarea: light-dark(
        hsl(0, 0%, 93%),
        hsla(0, 0%, 0%, 0.2)
    );
    --background-color-view-only-textarea: light-dark(
        hsla(0, 0%, 100%, 0.6),
        hsla(0, 0%, 0%, 0.3)
    );
    --border-color-textarea: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    --focus-border-color-textarea: light-dark(
        hsla(207, 80%, 62%, 0.8),
        hsla(0, 0%, 0%, 0.9)
    );
    --color-background-pill-container-without-placeholder: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-unmuted-or-followed-topic-list-item: light-dark(
        hsl(0, 0%, 20%),
        hsl(236, 33%, 90%)
    );
    --color-topic-indent-border: light-dark(
        hsla(0, 0%, 0%, 0.19),
        hsla(0, 0%, 100%, 0.19)
    );
    --color-background-search: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 17%));
    --color-background-search-collapsed: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 20%)
    );
    --color-background-search-option-hover: light-dark(
        hsl(0, 0%, 94%),
        hsl(0, 0%, 20%)
    );
    --color-search-box-hover-shadow: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 0%, 0.3)
    );
    --color-search-dropdown-top-border: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 0%, 0.35)
    );
    --color-search-icons: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 78%));
    --color-background-image-loader: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 100%, 0.1)
    );
    --color-background-popover-menu: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 17%)
    );
    --color-border-popover-menu-separator: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 0%, 0.4)
    );
    --color-hotkey-hint: light-dark(hsl(227, 78%, 59%), hsl(225, 100%, 84%));
    --color-popover-hotkey-hint: light-dark(hsl(0, 0%, 40%), hsl(0, 0%, 65%));
    --color-border-popover-hotkey-hint: light-dark(
        hsla(0, 0%, 40%, 0.5),
        hsla(0, 0%, 65%, 0.5)
    );
    --color-background-hover-popover-menu: light-dark(
        hsla(220, 12%, 5%, 0.05),
        hsla(220, 12%, 95%, 0.05)
    );
    --color-background-active-popover-menu: light-dark(
        hsla(220, 12%, 5%, 0.07),
        hsla(220, 12%, 95%, 0.07)
    );
    --color-border-popover-menu: light-dark(
        hsla(0, 0%, 0%, 0.4),
        hsl(0, 0%, 0%)
    );
    --color-border-personal-menu-avatar: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 100%, 0.2)
    );
    --color-background-unread-counter-prominent: light-dark(
        hsla(240, 10%, 50%, 0.7),
        hsl(240, 18%, 34%)
    );
    --color-background-unread-counter-normal: light-dark(
        hsla(240, 10%, 50%, 0.2),
        hsla(240, 10%, 50%, 0.35)
    );
    --color-unread-counter-normal: light-dark(
        hsla(0, 0%, 0%, 0.9),
        hsla(0, 0%, 100%, 0.85)
    );
    --color-unread-counter-quiet: light-dark(
        hsl(240, 15%, 50%),
        hsl(240, 15%, 65%)
    );
    --color-border-add-subscription-button-focus: light-dark(
        hsl(0, 0%, 20%),
        hsl(0, 0%, 67%)
    );
    --color-background-unread-counter-no-alpha: light-dark(
        rgb(215, 215, 220),
        rgb(58, 58, 67)
    );
    --color-background-unread-counter-dot: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
    --color-border-unread-counter: light-dark(
        var(--color-background-unread-counter),
        hsl(105, 2%, 50%)
    );
    --color-border-unread-counter-popover-menu: light-dark(
        inherit,
        var(--color-border-unread-counter)
    );
    --color-background-tab-picker-container: light-dark(
        hsla(0, 0%, 0%, 0.07),
        hsla(0, 0%, 0%, 0.3)
    );
    --color-background-tab-picker-selected-tab: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 100%, 0.07)
    );
    --color-outline-tab-picker-tab-option: light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.12)
    );
    --color-background-tab-picker-tab-option-hover: light-dark(
        hsla(0, 0%, 100%, 0.6),
        hsla(0, 0%, 100%, 0.05)
    );
    --color-background-tab-picker-tab-option-active: light-dark(
        hsla(0, 0%, 100%, 0.35),
        hsla(0, 0%, 100%, 0.03)
    );
    --color-background-popover: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 17%));
    --color-background-alert-word: light-dark(
        hsl(18, 100%, 84%),
        hsl(18, 100%, 75%)
    );
    --color-buddy-list-avatar-loading: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 100%, 0.1)
    );
    --color-border-sidebar: light-dark(hsl(0, 0%, 87%), hsla(0, 0%, 0%, 0.2));
    --color-text-sidebar-base: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
    --color-border-sidebar-subheader: light-dark(
        hsla(0, 0%, 0%, 0.15),
        hsla(0, 0%, 100%, 0.15)
    );
    --color-request-progress-status-alert-text: light-dark(
        hsl(0, 0%, 20%),
        hsl(236, 33%, 90%)
    );
    --color-background-tip: light-dark(
        hsl(46, 63%, 95%),
        hsla(46, 28%, 38%, 0.27)
    );
    --color-border-tip: light-dark(hsl(49, 20%, 84%), hsl(49, 38%, 46%));
    --color-box-shadow-animated-purple-button-focus: light-dark(
        hsl(235, 18%, 7%),
        hsla(0, 0%, 100%, 0.666)
    );
    --color-background-animated-button: light-dark(
        hsl(0, 0%, 90%),
        hsl(211, 29%, 14%)
    );
    --color-animated-button-text: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
    --color-invalid-input-border: light-dark(
        hsl(3, 57%, 33%),
        hsl(3, 73%, 74%)
    );
    --color-invalid-input-box-shadow: light-dark(
        hsl(3, 57%, 33%),
        hsl(3, 73%, 74%)
    );
    --color-background-white-box: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-stream-group-row-checked-icon-disabled: light-dark(
        hsl(240, 96%, 68%),
        hsla(240, 96%, 68%, 0.5)
    );
    --color-stream-group-row-plus-icon: light-dark(
        hsl(0, 0%, 72%),
        hsl(218, 14%, 33%)
    );
    --color-stream-group-row-plus-icon-hover: light-dark(
        hsl(0, 0%, 27%),
        hsl(230, 11%, 67%)
    );
    --color-stream-group-row-plus-icon-disabled: light-dark(
        hsl(0, 0%, 87%),
        hsla(218, 14%, 33%, 0.5)
    );
    --color-recent-view-link-unread: light-dark(
        hsl(0, 0%, 5%),
        hsla(0, 0%, 100%, 0.9)
    );
    --color-recent-view-link: light-dark(
        hsl(0, 0%, 20%),
        hsla(0, 0%, 100%, 0.75)
    );
    --color-background-recent-filters-button-focus: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.5)
    );
    --color-background-recent-filters-button-disabled: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.5)
    );
    --color-border-recent-filters-button-disabled: light-dark(
        hsl(0, 0%, 80%),
        hsl(0, 0%, 0%)
    );
    --color-recent-view-participant-overflow-text: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
    --color-background-recent-view-participant-overflow: light-dark(
        hsl(0, 0%, 88%),
        hsl(211, 18%, 25%)
    );
    --color-background-recent-view-table-thead-th: light-dark(
        hsl(0, 0%, 97%),
        hsl(0, 0%, 17%)
    );
    --color-background-recent-view-table-thead-sort-header: light-dark(
        hsla(229, 9%, 36%, 0.07),
        hsla(230, 9%, 60%, 0.14)
    );
    --color-text-recent-view-table-thead-th: light-dark(
        var(--grey-600),
        var(--grey-300)
    );
    --color-arrow-recent-view-table-thead-th: light-dark(
        hsla(229, 9%, 36%, 0.5),
        hsla(229, 10%, 70%, 0.5)
    );
    --color-text-recent-view-last-msg-time: light-dark(
        hsla(0, 0%, 15%, 0.75),
        hsla(0, 0%, 100%, 0.5)
    );
    --color-text-recent-view-last-msg-time-unread: light-dark(
        hsla(0, 0%, 0%, 0.75),
        hsla(0, 0%, 100%, 0.58)
    );
    --color-compose-box-background: light-dark(
        hsl(232, 30%, 92%),
        hsl(228, 11%, 17%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: light-dark(red, red)) {
:root {
    --color-compose-message-content-background: light-dark(
        hsl(0, 0%, 100%),
        color-mix(
            in srgb,
            var(--color-compose-box-background),
            hsl(0, 0%, 0%) 20%
        )
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-compose-message-content-background-over-limit: light-dark(
        hsl(3, 35%, 90%),
        hsl(3, 50%, 12%)
    );
    --color-compose-message-content-background-approaching-limit: light-dark(
        hsl(50, 75%, 92%),
        hsl(50, 75%, 12%)
    );
    --color-border-compose-content: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 0%, 0.4)
    );
    --color-compose-send-button-focus-shadow: light-dark(
        hsl(230, 100%, 20%),
        hsla(0, 0%, 100%, 0.8)
    );
    --color-compose-send-control-button: light-dark(
        hsla(240, 30%, 50%, 0.95),
        hsl(240, 30%, 70%)
    );
    --color-compose-send-control-button-interactive: light-dark(
        hsl(240, 30%, 50%),
        var(--color-compose-send-control-button)
    );
    --color-compose-send-control-button-background-interactive: light-dark(
        hsla(240, 100%, 30%, 0.05),
        hsla(235, 100%, 70%, 0.11)
    );
    --color-compose-recipient-box-background-color: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-compose-recipient-box-border-color: light-dark(
        rgb(207, 208, 215),
        hsla(0, 0%, 0%, 0.8)
    );
    --color-compose-recipient-box-hover: light-dark(
        hsl(0, 0%, 69%),
        hsla(0, 0%, 100%, 0.12)
    );
    --color-compose-recipient-box-has-focus: light-dark(
        hsl(0, 0%, 57%),
        hsla(0, 0%, 100%, 0.27)
    );
    --color-compose-collapsed-reply-button-area-background: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-compose-collapsed-reply-button-area-background-interactive: light-dark(
        var(--color-compose-collapsed-reply-button-area-background),
        hsla(0, 0%, 0%, 0.15)
    );
    --color-compose-collapsed-reply-button-area-border: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-compose-collapsed-reply-button-area-border-interactive: light-dark(
        hsl(0, 0%, 60%),
        var(--color-compose-collapsed-reply-button-area-border)
    );
    --color-compose-embedded-button-text-color: light-dark(
        hsl(231, 20%, 46%),
        hsl(231, 30%, 65%)
    );
    --color-compose-embedded-button-text-color-hover: light-dark(
        hsl(231, 20%, 30%),
        hsl(231, 30%, 70%)
    );
    --color-compose-embedded-button-background-hover: light-dark(
        hsla(231, 100%, 90%, 0.5),
        hsla(235, 100%, 70%, 0.11)
    );
    --color-compose-embedded-button-background-interactive: light-dark(
        hsla(231, 100%, 90%, 0.9),
        hsla(235, 100%, 70%, 0.2)
    );
    --color-background-compose-new-message-button: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-compose-new-message-button-hover: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.15)
    );
    --color-background-compose-new-message-button-active: light-dark(
        hsl(0, 0%, 95%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-border-compose-new-message-button: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-border-compose-new-message-button-hover: light-dark(
        hsl(0, 0%, 60%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-border-compose-new-message-button-active: light-dark(
        hsl(0, 0%, 60%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-limit-indicator: light-dark(
        hsl(38, 100%, 36%),
        hsl(38, 100%, 70%)
    );
    --color-limit-indicator-over-limit: light-dark(
        hsl(3, 80%, 40%),
        hsl(3, 80%, 60%)
    );
    --color-narrow-to-compose-recipients-background: light-dark(
        hsla(227, 100%, 70%, 0.25),
        hsla(227, 80%, 60%, 0.25)
    );
    --color-narrow-to-compose-recipients-background-hover: light-dark(
        hsla(227, 100%, 70%, 0.35),
        hsla(227, 80%, 60%, 0.35)
    );
    --color-narrow-to-compose-recipients: light-dark(
        hsl(227, 76%, 64%),
        hsl(224, 28%, 81%)
    );
    --color-narrow-to-compose-recipients-hover: light-dark(
        hsl(227, 78%, 59%),
        hsl(221, 100%, 95%)
    );
    --color-composebox-button: light-dark(
        hsla(0, 0%, 0%, 0.55),
        hsla(0, 0%, 100%, 0.55)
    );
    --color-composebox-button-background: light-dark(
        hsla(0, 0%, 100%, 0.6),
        hsla(231, 8%, 14%, 0.8)
    );
    --color-composebox-button-background-hover: light-dark(
        hsl(0, 0%, 95%),
        hsl(231, 12%, 18%)
    );
    --color-message-formatting-controls-container: light-dark(
        hsl(232, 30%, 96%),
        hsla(0, 0%, 0%, 0.08)
    );
    --color-message-content-container-border: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 0%, 0.8)
    );
    --color-message-content-container-border-focus: light-dark(
        hsl(0, 0%, 57%),
        hsla(0, 0%, 100%, 0.27)
    );
    --color-compose-control-button-background-hover: light-dark(
        hsla(0, 0%, 0%, 0.05),
        hsla(0, 0%, 100%, 0.05)
    );
    --color-compose-formatting-button-divider: light-dark(
        hsl(0, 0%, 75%),
        hsla(236, 33%, 90%, 0.25)
    );
    --color-compose-focus-ring: light-dark(
        var(--color-outline-focus),
        hsl(0, 0%, 67%)
    );
    --gradient-compose-scroll-backward: linear-gradient(
        90deg,
        light-dark(hsl(234, 100%, 95%), hsl(234, 21%, 24%)) 35%,
        light-dark(hsl(234, 100%, 95%), hsla(234, 21%, 24%, 0.769)) 50%,
        transparent 100%
    );
    --gradient-compose-scroll-backward-hover: linear-gradient(
        90deg,
        light-dark(hsl(234, 100%, 93%), hsl(234, 30%, 28%)) 35%,
        light-dark(hsl(234, 100%, 93%), hsla(234, 30%, 28%, 0.769)) 50%,
        transparent 100%
    );
    --gradient-compose-scroll-backward-active: linear-gradient(
        90deg,
        light-dark(hsl(234, 100%, 90%), hsl(234, 35%, 30%)) 45%,
        transparent 100%
    );
    --gradient-compose-scroll-forward: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234, 100%, 95%), hsla(234, 21%, 24%, 0.769)) 50%,
        light-dark(hsl(234, 100%, 95%), hsl(234, 21%, 24%)) 65%
    );
    --gradient-compose-scroll-forward-hover: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234, 100%, 93%), hsla(234, 30%, 28%, 0.769)) 50%,
        light-dark(hsl(234, 100%, 93%), hsl(234, 30%, 28%)) 65%
    );
    --gradient-compose-scroll-forward-active: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234, 100%, 90%), hsl(234, 35%, 30%)) 55%
    );
    --color-text-default: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    --color-text-message-default: light-dark(
        hsl(0, 0%, 15%),
        var(--color-text-default)
    );
    --color-text-message-blockquote-border: light-dark(
        hsla(0, 0%, 15%, 0.25),
        hsla(0, 0%, 87%, 0.4)
    );
    --color-text-message-view-header: light-dark(
        hsl(0, 0%, 20%),
        hsla(0, 0%, 100%, 0.85)
    );
    --color-text-message-header: light-dark(
        hsl(0, 0%, 15%),
        hsla(0, 0%, 100%, 0.85)
    );
    --color-text-dropdown-input: light-dark(
        hsl(0, 0%, 13%),
        hsl(0, 0%, 95%)
    );
    --color-text-self-direct-mention: light-dark(
        hsl(240, 52%, 45%),
        hsl(240, 100%, 88%)
    );
    --color-text-self-group-mention: light-dark(
        hsl(183, 52%, 26%),
        hsl(184, 52%, 63%)
    );
    --color-text-show-more-less-button: light-dark(
        hsl(240, 52%, 53%),
        hsl(240, 30%, 65%)
    );
    --color-text-search: light-dark(hsl(0, 0%, 35%), hsla(0, 0%, 100%, 0.75));
    --color-text-search-hover: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
    --color-text-placeholder: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 55%));
    --color-text-search-placeholder: light-dark(
        hsl(0, 0%, 50%),
        hsla(0, 0%, 100%, 0.5)
    );
    --color-text-popover-menu: light-dark(
        hsl(0, 0%, 15%),
        hsla(0, 0%, 100%, 0.8)
    );
    --color-text-full-name: light-dark(hsl(0, 0%, 15%), hsl(0, 0%, 100%));
    --color-text-item: light-dark(hsl(0, 0%, 40%), hsl(0, 0%, 50%));
    --color-text-personal-menu-no-status: light-dark(
        hsl(0, 0%, 50%),
        hsl(0deg 0% 100% 35%)
    );
    --color-text-personal-menu-some-status: light-dark(
        hsl(0, 0%, 40%),
        hsl(0deg 0% 100% 50%)
    );
    --color-text-sidebar-heading: light-dark(
        hsl(216, 65%, 20%),
        hsl(216, 50%, 75%)
    );
    --color-text-sidebar-action-heading: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
    --color-text-sidebar-action-heading-hover: light-dark(
        hsl(240, 100%, 15%),
        hsl(240, 100%, 90%)
    );
    --color-text-sidebar-popover-menu: light-dark(
        hsl(0, 0%, 20%),
        hsl(236, 33%, 90%)
    );
    --color-text-user-card-secondary: light-dark(
        var(--grey-550),
        var(--grey-400)
    );
    --color-text-url-hover: light-dark(
        hsl(200, 100%, 25%),
        hsl(200, 79%, 66%)
    );
    --color-text-settings-field-hint: light-dark(
        hsl(0, 0%, 57%),
        hsl(0, 0%, 52%)
    );
    --color-text-clear-search-button: light-dark(
        hsl(0, 0%, 80%),
        hsl(236, 33%, 80%)
    );
    --color-text-clear-search-button-hover: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
    --color-text-settings-plus-button: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
    --color-background-settings-plus-button: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-border-settings-plus-button: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-user-profile-field-name: light-dark(
        hsl(0, 0%, 20%),
        hsl(236, 33%, 90%)
    );
    --color-border-user-profile-table: light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 0%, 0.4)
    );
    --color-border-manage-profile-footer: light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 100%, 0.2)
    );
    --color-border-user-profile-list-container: light-dark(
        hsla(0, 0%, 0%, 0.35),
        hsla(0, 0%, 100%, 0.3)
    );
    --background-color-user-profile-list-container: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 17%)
    );
    --color-text-link: light-dark(hsl(210, 94%, 42%), hsl(200, 100%, 50%));
    --color-text-link-decoration: light-dark(
        rgba(6, 107, 208, 0.2),
        rgba(0, 170, 255, 0.2)
    );
    --color-text-link-hover: light-dark(
        hsl(212, 100%, 50%),
        hsl(200, 100%, 60%)
    );
    --color-text-link-decoration-hover: light-dark(
        rgba(0, 119, 255, 0.7),
        rgba(51, 187, 255, 0.7)
    );
    --color-text-link-active: light-dark(
        hsl(212, 100%, 30%),
        hsl(200, 100%, 50%)
    );
    --color-text-generic-link-interactive: light-dark(
        #005580,
        hsl(200, 79%, 66%)
    );
    --color-background-tippy-box: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 0%));
    --color-background-dropdown-widget: light-dark(
        hsl(240, 20%, 98%),
        hsl(240, 5%, 16%)
    );
    --color-border-dropdown-widget: light-dark(
        hsla(0, 0%, 0%, 0.4),
        hsl(0, 0%, 0%)
    );
    --color-border-dropdown-widget-button: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-background-dropdown-widget-button: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-disabled-dropdown-widget-button: light-dark(
        hsl(0, 0%, 93%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-poll-vote: light-dark(hsl(156, 41%, 40%), hsl(185, 35%, 65%));
    --color-poll-vote-hover: light-dark(
        hsl(156, 41%, 40%),
        hsl(185, 50%, 70%)
    );
    --color-poll-vote-focus: light-dark(
        hsl(156, 41%, 40%),
        hsl(185, 50%, 65%)
    );
    --color-border-poll-vote: light-dark(
        hsl(156, 28%, 70%),
        hsl(185, 35%, 35%)
    );
    --color-border-poll-vote-hover: light-dark(
        hsl(156, 30%, 50%),
        hsl(185, 40%, 40%)
    );
    --color-border-poll-vote-focus: light-dark(
        hsl(156, 30%, 50%),
        hsl(185, 40%, 50%)
    );
    --color-background-poll-vote-hover: light-dark(
        var(--color-background-widget-button),
        hsl(185, 20%, 20%)
    );
    --color-background-poll-vote-focus: light-dark(
        hsl(156, 41%, 90%),
        hsl(185, 40%, 35%)
    );
    --color-poll-names: light-dark(hsl(0, 0%, 45%), hsl(236, 15%, 70%));
    --color-border-todo-checkbox: light-dark(
        hsl(156, 28%, 70%),
        rgba(69, 153, 161, 0.7)
    );
    --color-border-todo-checkbox-hover: light-dark(
        hsl(156, 30%, 50%),
        hsl(185, 40%, 35%)
    );
    --color-border-todo-checkbox-checked: light-dark(
        hsl(156, 41%, 40%),
        hsl(185, 40%, 45%)
    );
    --color-background-todo-checkbox-hover: light-dark(
        transparent,
        hsl(185, 20%, 20%)
    );
    --color-background-todo-checkbox-checked: light-dark(
        hsl(156, 41%, 40%),
        hsl(185, 40%, 45%)
    );
    --color-kbd-background: light-dark(hsl(0, 0%, 98%), hsl(211, 29%, 14%));
    --color-kbd-border: light-dark(hsl(0, 0%, 80%), hsl(211, 29%, 14%));
    --color-kbd-text: light-dark(hsl(0, 0%, 20%), hsl(236, 33%, 90%));
    --color-kbd-enter-sends: light-dark(hsl(0, 0%, 40%), hsl(236, 33%, 90%));
    --color-realm-enable-spectator-access-link: light-dark(
        hsl(0, 0%, 20%),
        hsl(236, 33%, 90%)
    );
    --color-background-stream-email: light-dark(
        hsl(0, 0%, 98%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-integration-url: light-dark(
        transparent,
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-tbody-th-odd: light-dark(
        transparent,
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-rendered-markdown-thead: light-dark(
        hsl(0, 0%, 93%),
        hsla(0, 0%, 0%, 0.5)
    );
    --color-border-rendered-markdown-table: light-dark(
        hsl(0, 0%, 80%),
        hsl(0, 0%, 33%)
    );
    --color-background-tab-switcher-ind-tab: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-tab-switcher-ind-tab-selected: light-dark(
        hsl(0, 0%, 53%),
        hsla(0, 0%, 0%, 0.5)
    );
    --color-border-tab-switcher-ind-tab: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-border-tab-switcher-ind-tab-selected: light-dark(
        hsl(0, 0%, 47%),
        hsla(0, 0%, 0%, 0.9)
    );
    --color-text-tab-switcher-ind-tab-disabled: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 42%, 0.9)
    );
    --color-border-tab-switcher-ind-tab-disabled: light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-background-table-header: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 0%)
    );
    --color-background-table-header-sortable-hover: light-dark(
        hsl(0, 0%, 95%),
        hsl(211, 29%, 14%)
    );
    --color-border-table-striped: light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-border-table-bordered: light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-border-table-subscriber-list: light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-markdown-code-text: light-dark(
        hsl(0, 0%, 0%),
        hsla(0, 0%, 100%, 0.85)
    );
    --color-markdown-code-background: light-dark(
        hsla(0, 0%, 0%, 0.06),
        hsla(0, 0%, 100%, 0.08)
    );
    --color-markdown-code-background-mentions: light-dark(
        hsla(0, 0%, 0%, 0.07),
        var(--color-markdown-code-background)
    );
    --color-markdown-pre-background: light-dark(
        hsla(0, 0%, 0%, 0.04),
        hsla(0, 0%, 100%, 0.04)
    );
    --color-markdown-pre-background-mentions: light-dark(
        hsla(0, 0%, 0%, 0.04),
        hsla(0, 0%, 100%, 0.05)
    );
    --color-markdown-pre-border-mentions: light-dark(
        transparent,
        var(--color-markdown-pre-border)
    );
    --color-background-search-highlight: light-dark(
        hsl(51, 100%, 79%),
        hsl(51, 100%, 72%)
    );
    --color-text-search-highlight: light-dark(currentcolor, hsl(0, 0%, 0%));
    --color-text-alert-word: light-dark(currentcolor, hsl(0, 0%, 0%));
    --color-markdown-link: light-dark(
        hsl(200, 100%, 40%),
        var(--color-text-generic-link)
    );
    --color-markdown-link-hover: light-dark(
        hsl(200, 100%, 25%),
        var(--color-text-generic-link-interactive)
    );
    --color-markdown-link-highlight: light-dark(
        hsl(200, 100%, 40%),
        hsl(210, 100%, 25%)
    );
    --color-markdown-link-highlight-hover: light-dark(
        hsl(200, 100%, 25%),
        hsl(210, 100%, 18%)
    );
    --color-markdown-link-alert-word: light-dark(
        hsl(200, 100%, 40%),
        hsl(210, 100%, 25%)
    );
    --color-markdown-link-alert-word-hover: light-dark(
        hsl(200, 100%, 25%),
        hsl(210, 100%, 18%)
    );
    --color-background-image-thumbnail: light-dark(
        hsla(0, 0%, 0%, 0.03),
        hsla(0, 0%, 100%, 0.03)
    );
    --color-background-image-thumbnail-hover: light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.35)
    );
    --color-icon-bot: light-dark(
        hsl(180, 8%, 65%),
        hsl(180, 5%, 50%)
    );
    --color-message-action-visible: light-dark(
        hsla(216, 43%, 20%, 0.5),
        hsla(217, 41%, 90%, 0.5)
    );
    --color-message-action-interactive: light-dark(
        hsl(216, 43%, 20%),
        hsl(217, 41%, 90%)
    );
    --color-left-sidebar-follow-icon-hover: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
    --color-left-sidebar-navigation-icon: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
    --color-left-sidebar-dm-partners-icon: light-dark(
        hsl(240, 30%, 60%),
        hsl(240, 35%, 58%)
    );
    --color-vdots-hint: light-dark(hsl(240, 30%, 80%), hsl(240, 35%, 38%));
    --color-vdots-visible: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
    --color-vdots-hover: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
    --color-tab-picker-icon: light-dark(hsl(200, 100%, 40%), hsl(0, 0%, 80%));
    --color-user-circle-active: light-dark(#43a35e, #4cdc75);
    --color-user-circle-idle: light-dark(#f5b266, #ae640a);
    --color-user-circle-offline: light-dark(#bcc0cf, #545764);
    --color-user-circle-offline-typeahead-highlight: light-dark(
        #adb2c5,
        #646671
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: light-dark(red, red)) {
:root {
    --gradient-user-circle-idle: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        light-dark(
                color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    transparent
                ),
                var(--color-user-circle-idle)
            )
            25%,
        transparent 100%
    );
    --gradient-user-circle-idle-avatar: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        light-dark(
                color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    var(--color-background)
                ),
                var(--color-user-circle-idle)
            )
            25%,
        var(--color-background) 100%
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-copy-button: light-dark(
        
        rgba(84, 87, 100, 0.7),
        
        rgba(171, 174, 186, 0.7)
    );
    --color-copy-button-hover: light-dark(var(--grey-600), var(--grey-300));
    --color-copy-button-square-bg-hover: light-dark(
        
        rgba(84, 87, 100, 0.07),
        
        rgba(144, 147, 162, 0.14)
    );
    --color-copy-button-active: light-dark(
        
        rgba(84, 87, 100, 0.7),
        
        rgba(171, 174, 186, 0.7)
    );
    --color-copy-button-square-active: light-dark(
        var(--grey-600),
        var(--grey-300)
    );
    --color-copy-button-square-bg-active: light-dark(
        
        rgba(84, 87, 100, 0.11),
        
        rgba(144, 147, 162, 0.18)
    );
    --color-copy-button-success: light-dark(var(--green-500), var(--green-300));
    --color-message-reaction-border: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 100%, 0.15)
    );
    --color-message-reaction-border-reacted: light-dark(
        hsla(0, 0%, 0%, 0.45),
        hsla(0, 0%, 100%, 0.7)
    );
    --color-message-reaction-background: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.3)
    );
    --color-message-reaction-background-reacted: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.8)
    );
    --color-message-reaction-background-hover: light-dark(
        hsl(210, 30%, 96%),
        hsla(0, 0%, 100%, 0.1)
    );
    --color-message-reaction-shadow-inner: light-dark(
        hsla(210, 50%, 50%, 0.08),
        transparent 
    );
    --color-message-reaction-text: light-dark(
        hsl(210, 20%, 25%),
        hsla(0, 0%, 100%, 0.75)
    );
    --color-message-reaction-text-reacted: light-dark(
        hsl(210, 20%, 20%),
        hsla(0, 0%, 100%, 0.85)
    );
    --color-message-reaction-button-text: light-dark(
        hsla(210, 20%, 20%, 0.6),
        var(--color-message-reaction-text)
    );
    --color-message-reaction-button-text-hover: light-dark(
        var(--color-message-reaction-text),
        var(--color-message-reaction-text-reacted)
    );
    --color-message-reaction-button-background-hover: light-dark(
        var(--color-message-reaction-background),
        var(--color-message-reaction-background-hover)
    );
    --color-zulip-logo: light-dark(
        hsla(0, 0%, 0%, 0.34),
        hsla(0, 0%, 100%, 0.5)
    );
    --color-zulip-logo-loading: light-dark(hsl(0, 0%, 27%), hsl(0, 0%, 100%));
    --color-recent-view-loading-spinner: light-dark(
        hsl(0, 0%, 27%),
        hsla(0, 0%, 100%, 0.6)
    );
    --color-zulip-logo-z: light-dark(hsl(0, 0%, 100%), hsl(214, 27%, 18%));
    --color-show-more-less-button-background: light-dark(
        hsla(240, 44%, 56%, 0.08),
        hsla(240, 44%, 56%, 0.15)
    );
    --color-show-more-less-button-background-hover: light-dark(
        hsla(240, 44%, 56%, 0.15),
        hsla(240, 44%, 56%, 0.25)
    );
    --color-show-more-less-button-background-active: light-dark(
        hsla(240, 44%, 56%, 0.2),
        hsla(240, 44%, 56%, 0.15)
    );
    --color-message-edit-history-text-inserted: light-dark(
        hsl(122, 72%, 30%),
        hsl(122, 100%, 81%)
    );
    --color-message-edit-history-background-inserted: light-dark(
        hsl(120, 64%, 95%),
        hsla(120, 64%, 95%, 0.3)
    );
    --color-message-edit-history-text-deleted: light-dark(
        hsl(0, 100%, 50%),
        hsl(0, 90%, 67%)
    );
    --color-message-edit-history-background-deleted: light-dark(
        hsl(7, 90%, 92%),
        hsla(7, 54%, 62%, 0.38)
    );
    --color-background-direct-mention: light-dark(
        hsl(240, 52%, 95%),
        hsl(240, 13%, 16%)
    );
    --color-background-group-mention: light-dark(
        hsl(180, 40%, 94%),
        hsl(180, 13%, 14%)
    );
    --color-background-text-direct-mention: light-dark(
        hsla(240, 70%, 70%, 0.2),
        hsla(240, 52%, 60%, 0.25)
    );
    --color-background-text-hover-direct-mention: light-dark(
        hsla(240, 70%, 70%, 0.3),
        hsla(240, 52%, 60%, 0.45)
    );
    --color-background-text-group-mention: light-dark(
        hsla(183, 60%, 45%, 0.18),
        hsla(183, 52%, 40%, 0.2)
    );
    --color-background-text-hover-group-mention: light-dark(
        hsla(183, 60%, 45%, 0.3),
        hsla(183, 52%, 40%, 0.3)
    );
    --color-background-input-pill: light-dark(
        hsl(237, 68%, 94%),
        hsla(240, 65%, 60%, 0.38)
    );
    --color-background-input-pill-search: light-dark(
        hsl(237, 68%, 94%),
        hsla(240, 65%, 60%, 0.3)
    );
    --color-background-input-pill-hover: light-dark(
        hsla(240, 70%, 70%, 0.3),
        hsla(240, 52%, 60%, 0.45)
    );
    --color-border-input-pill-image: light-dark(
        hsla(237, 68%, 94%, 0.5),
        hsla(240, 65%, 60%, 0.6)
    );
    --color-outline-low-attention-input-pill: light-dark(
        hsl(237, 68%, 88%),
        hsla(240, 65%, 60%, 0.22)
    );
    --color-focus-outline-input-pill: light-dark(
        hsl(240, 50%, 50%),
        hsla(0, 0%, 100%, 0.6)
    );
    --color-input-pill-close: light-dark(
        hsl(240, 60%, 65%),
        hsl(240, 50%, 74%)
    );
    --color-background-input-pill-exit-hover: light-dark(
        hsla(240, 70%, 70%, 0.15),
        hsla(0, 0%, 100%, 0.07)
    );
    --color-background-deactivated-user-pill: light-dark(
        hsl(8, 96%, 91%),
        hsl(0, 97%, 25%)
    );
    --color-focus-outline-deactivated-user-pill: light-dark(
        hsl(4, 75%, 53%),
        hsla(0, 0%, 100%, 0.7)
    );
    --color-close-deactivated-user-pill: light-dark(
        hsl(4, 75%, 53%),
        hsl(7, 100%, 74%)
    );
    --color-background-exit-hover-deactivated-user-pill: light-dark(
        hsla(4, 75%, 53%, 0.15),
        hsla(0, 0%, 100%, 0.07)
    );
    --color-background-user-pill: light-dark(
        hsla(0, 0%, 100%, 0.85),
        hsla(0, 0%, 0%, 0.4)
    );
    --color-background-pill-container: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-pill-container-input-disabled: light-dark(
        hsl(0, 0%, 93%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-border-pill-container: light-dark(
        hsla(0, 0%, 0%, 0.15),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-background-inbox-no-unreads-illustration: light-dark(
        hsl(147, 57%, 25%),
        hsl(147, 40%, 55%)
    );
    --color-icon-search-inbox: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
    --color-inbox-search-text: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 95%));
    --color-border-inbox-search: light-dark(
        hsla(229, 22%, 10%, 0.3),
        hsla(0, 0%, 100%, 0.2)
    );
    --color-border-inbox-search-hover: light-dark(
        hsla(229, 22%, 10%, 0.6),
        hsla(0, 0%, 100%, 0.4)
    );
    --color-background-inbox-search: light-dark(
        hsl(0, 0%, 100%),
        hsl(225, 6%, 10%)
    );
    --color-background-inbox-search-hover: light-dark(
        hsl(0, 0%, 100%),
        hsl(225, 6%, 8%)
    );
    --color-background-inbox-search-focus: light-dark(
        hsl(0, 0%, 100%),
        hsl(225, 6%, 7%)
    );
    --color-border-inbox-search-focus: light-dark(
        hsla(229, 22%, 10%, 0.8),
        hsla(0, 0%, 100%, 0.5)
    );
    --color-box-shadow-inbox-search-focus: light-dark(
        hsla(228, 10%, 20%, 0.3),
        hsla(0, 0%, 100%, 0.4)
    );
    --color-background-inbox-row: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 14%)
    );
    --color-background-inbox-row-hover: light-dark(
        rgb(242, 242, 242),
        rgb(47, 47, 47)
    );
    --color-background-button-inbox-selected: light-dark(
        hsla(0, 0%, 0%, 0.05),
        hsla(0, 0%, 100%, 0.05)
    );
    --color-background-button-inbox-focus: light-dark(
        hsl(0, 0%, 80%),
        hsl(0, 0%, 20%)
    );
    --color-icons-inbox: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
    --color-folder-header: light-dark(hsl(216, 43%, 20%), hsl(216, 50%, 75%));
    --color-inbox-row-chevron: light-dark(#535663, #aaadba);
    --color-navbar-icon: light-dark(hsl(240, 20%, 50%), hsl(240, 35%, 60%));
    --color-navbar-spectator-low-attention-brand-button-text: light-dark(
        hsl(240, 40%, 50%),
        hsl(240, 55%, 72%)
    );
    --color-navbar-spectator-low-attention-brand-button-background-hover: light-dark(
        hsla(240, 100%, 30%, 0.05),
        hsla(240, 56%, 70%, 0.1)
    );
    --color-navbar-spectator-low-attention-brand-button-background-active: light-dark(
        hsla(240, 100%, 30%, 0.08),
        hsla(240, 56%, 70%, 0.13)
    );
    --color-navbar-spectator-medium-attention-brand-button-text: light-dark(
        hsl(240, 40%, 40%),
        hsl(240, 64%, 76%)
    );
    --color-navbar-spectator-medium-attention-brand-button-background: light-dark(
        hsla(244, 64%, 47%, 0.1),
        hsla(240, 56%, 70%, 0.12)
    );
    --color-navbar-spectator-medium-attention-brand-button-background-hover: light-dark(
        hsla(244, 64%, 47%, 0.15),
        hsla(240, 56%, 70%, 0.17)
    );
    --color-navbar-spectator-medium-attention-brand-button-background-active: light-dark(
        hsla(244, 64%, 47%, 0.18),
        hsla(240, 56%, 70%, 0.12)
    );
    --color-gear-menu-lighter-text: light-dark(
        hsl(0, 0%, 40%),
        hsl(0, 0%, 50%)
    );
    --color-gear-menu-blue-text: light-dark(
        hsl(217, 100%, 50%),
        hsl(217, 100%, 65%)
    );
    --color-header-button-hover: light-dark(
        hsla(0, 0%, 0%, 0.05),
        hsla(0, 0%, 100%, 0.04)
    );
    --color-header-button-hover-no-alpha: light-dark(
        rgb(235, 235, 235),
        rgb(42, 42, 42)
    );
    --color-header-button-focus: light-dark(
        hsla(0, 0%, 0%, 0.08),
        hsla(0, 0%, 100%, 0.07)
    );
    --color-header-button-focus-no-alpha: light-dark(
        rgb(228, 228, 228),
        rgb(49, 49, 49)
    );
    --color-fill-user-invite-copy-icon: light-dark(
        hsl(0, 0%, 47%),
        hsl(236, 33%, 90%)
    );
    --color-background-zulip-button: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-zulip-button-hover: light-dark(
        var(--color-background-zulip-button),
        hsla(0, 0%, 0%, 0.15)
    );
    --color-background-zulip-button-active: light-dark(
        hsl(0, 0%, 95%),
        var(--color-background-zulip-button-hover)
    );
    --color-background-zulip-button-disabled: light-dark(
        hsl(0, 0%, 93%),
        var(--color-background-zulip-button)
    );
    --color-border-zulip-button: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-border-zulip-button-interactive: light-dark(
        hsl(0, 0%, 60%),
        var(--color-border-zulip-button)
    );
    --color-border-rendered-checkbox: light-dark(
        hsla(0, 0%, 0%, 0.6),
        hsla(0, 0%, 100%, 0.4)
    );
    --color-background-emoji-picker-popover: light-dark(
        hsl(0, 0%, 93%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-emoji-picker-popover-tab-item-active: light-dark(
        hsla(0, 0%, 100%, 0.2),
        hsla(0, 0%, 0%, 0.5)
    );
    --color-background-emoji-picker-emoji-focus: light-dark(
        hsl(0, 0%, 93%),
        hsla(212, 28%, 8%, 0.75)
    );
    --color-box-shadow-emoji-picker-emoji-focus: light-dark(
        transparent,
        hsl(0, 0%, 98%)
    );
    --color-background-emoji-picker-emoji-reacted: light-dark(
        hsl(195, 50%, 95%),
        hsla(0, 0%, 0%, 0.5)
    );
    --color-border-emoji-picker-emoji-reacted: light-dark(
        hsl(195, 52%, 79%),
        hsla(0, 0%, 0%, 0.9)
    );
    --color-background-emoji-picker-emoji-reacted-focus: light-dark(
        hsl(195, 55%, 88%),
        hsla(0, 0%, 20%, 0.7)
    );
    --color-border-emoji-picker-tippy-arrow: light-dark(
        hsl(0, 0%, 93%),
        hsl(212, 33%, 11%)
    );
    --color-dropdown-item: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 75%));
    --color-dropdown-item-link-underline: light-dark(
        hsl(0deg 0% 20% 60%),
        hsl(0deg 0% 75% 60%)
    );
    --color-active-dropdown-item: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 90%));
    --background-color-active-dropdown-item: light-dark(
        hsla(220, 12%, 5%, 0.05),
        hsla(0, 0%, 100%, 0.07)
    );
    --color-current-setting-dropdown-item: light-dark(
        var(--purple-700),
        var(--purple-300)
    );
    --background-color-active-typeahead-item: light-dark(
        hsla(220, 12%, 5%, 0.05),
        hsla(0, 0%, 100%, 0.07)
    );
    --color-typeahead-option-label: light-dark(
        var(--grey-500),
        var(--grey-400)
    );
    --color-outline-button-focus: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
    --color-inner-shadow-action-button: light-dark(
        rgba(0, 0, 0, 0.2),
        rgba(255, 255, 255, 0.21)
    );
    --color-text-neutral-solid-action-button: light-dark(
        hsl(0, 0%, 100%),
        rgba(255, 255, 255, 0.85)
    );
    --color-background-neutral-solid-action-button: light-dark(
        hsl(229, 7%, 50%),
        hsl(229, 9%, 36%)
    );
    --color-background-neutral-solid-action-button-hover: light-dark(
        hsl(229, 7%, 47%),
        hsl(229, 8%, 42%)
    );
    --color-background-neutral-solid-action-button-active: light-dark(
        hsl(232, 7%, 44%),
        hsl(229, 9%, 36%)
    );
    --color-text-neutral-subtle-action-button: light-dark(
        hsl(229, 12%, 25%),
        hsl(231, 11%, 76%)
    );
    --color-background-neutral-subtle-action-button: light-dark(
        rgba(119, 122, 136, 0.12),
        rgba(187, 189, 201, 0.12)
    );
    --color-background-neutral-subtle-action-button-hover: light-dark(
        rgba(119, 122, 136, 0.17),
        rgba(187, 189, 201, 0.17)
    );
    --color-background-neutral-subtle-action-button-active: light-dark(
        rgba(119, 122, 136, 0.22),
        rgba(187, 189, 201, 0.12)
    );
    --color-text-neutral-text-action-button: light-dark(
        hsl(229, 9%, 36%),
        hsl(229, 10%, 70%)
    );
    --color-background-neutral-text-action-button-hover: light-dark(
        rgba(84, 87, 100, 0.07),
        rgba(144, 147, 162, 0.14)
    );
    --color-background-neutral-text-action-button-active: light-dark(
        rgba(84, 87, 100, 0.11),
        rgba(144, 147, 162, 0.18)
    );
    --color-text-brand-solid-action-button: light-dark(
        hsl(0, 0%, 100%),
        rgba(255, 255, 255, 0.85)
    );
    --color-background-brand-solid-action-button: light-dark(
        hsl(254, 99%, 68%),
        hsl(261, 79%, 43%)
    );
    --color-background-brand-solid-action-button-hover: light-dark(
        hsl(255, 81%, 61%),
        hsl(258, 66%, 51%)
    );
    --color-background-brand-solid-action-button-active: light-dark(
        hsl(258, 66%, 51%),
        hsl(261, 79%, 43%)
    );
    --color-text-brand-subtle-action-button: light-dark(
        hsl(264, 95%, 34%),
        hsl(244, 96%, 82%)
    );
    --color-background-brand-subtle-action-button: light-dark(
        rgba(130, 93, 254, 0.12),
        rgba(160, 150, 253, 0.12)
    );
    --color-background-brand-subtle-action-button-hover: light-dark(
        rgba(130, 93, 254, 0.17),
        rgba(160, 150, 253, 0.17)
    );
    --color-background-brand-subtle-action-button-active: light-dark(
        rgba(130, 93, 254, 0.22),
        rgba(160, 150, 253, 0.12)
    );
    --color-text-brand-text-action-button: light-dark(
        hsl(255, 54%, 50%),
        hsl(246, 96%, 79%)
    );
    --color-background-brand-text-action-button-hover: light-dark(
        rgba(45, 0, 112, 0.05),
        rgba(138, 112, 255, 0.14)
    );
    --color-background-brand-text-action-button-active: light-dark(
        rgba(45, 0, 112, 0.1),
        rgba(138, 112, 255, 0.18)
    );
    --color-text-info-solid-action-button: light-dark(
        hsl(0, 0%, 100%),
        rgba(255, 255, 255, 0.85)
    );
    --color-background-info-solid-action-button: light-dark(
        hsl(226, 100%, 62%),
        hsl(228, 75%, 47%)
    );
    --color-text-info-subtle-action-button: light-dark(
        hsl(231, 82%, 36%),
        hsl(222, 98%, 79%)
    );
    --color-background-info-subtle-action-button: light-dark(
        rgba(61, 106, 255, 0.12),
        rgba(149, 180, 254, 0.12)
    );
    --color-background-info-subtle-action-button-hover: light-dark(
        rgba(61, 106, 255, 0.17),
        rgba(149, 180, 254, 0.17)
    );
    --color-background-info-subtle-action-button-active: light-dark(
        rgba(61, 106, 255, 0.22),
        rgba(149, 180, 254, 0.12)
    );
    --color-text-info-text-action-button: light-dark(
        hsl(227, 70%, 46%),
        hsl(222, 97%, 75%)
    );
    --color-background-info-text-action-button-hover: light-dark(
        rgba(5, 3, 124, 0.05),
        rgba(78, 125, 253, 0.12)
    );
    --color-background-info-text-action-button-active: light-dark(
        rgba(5, 3, 124, 0.09),
        rgba(78, 125, 253, 0.17)
    );
    --color-text-success-solid-action-button: light-dark(
        hsl(0, 0%, 100%),
        rgba(255, 255, 255, 0.85)
    );
    --color-background-success-solid-action-button: light-dark(
        hsl(146, 90%, 27%),
        hsl(144, 84%, 22%)
    );
    --color-text-success-subtle-action-button: light-dark(
        hsl(144, 88%, 16%),
        hsl(135, 56%, 63%)
    );
    --color-background-success-subtle-action-button: light-dark(
        rgba(7, 131, 61, 0.13),
        rgba(65, 175, 98, 0.12)
    );
    --color-background-success-subtle-action-button-hover: light-dark(
        rgba(7, 131, 61, 0.18),
        rgba(65, 175, 98, 0.17)
    );
    --color-background-success-subtle-action-button-active: light-dark(
        rgba(7, 131, 61, 0.23),
        rgba(65, 175, 98, 0.12)
    );
    --color-text-success-text-action-button: light-dark(
        hsl(146, 90%, 27%),
        hsl(136, 47%, 55%)
    );
    --color-background-success-text-action-button-hover: light-dark(
        rgba(9, 103, 47, 0.08),
        rgba(47, 157, 82, 0.12)
    );
    --color-background-success-text-action-button-active: light-dark(
        rgba(9, 103, 47, 0.12),
        rgba(47, 157, 82, 0.17)
    );
    --color-text-warning-solid-action-button: light-dark(
        rgba(0, 0, 0, 0.88),
        rgba(0, 0, 0, 0.9)
    );
    --color-background-warning-solid-action-button: light-dark(
        hsl(40, 99%, 62%),
        hsl(39, 89%, 45%)
    );
    --color-background-warning-solid-action-button-hover: light-dark(
        hsl(40, 94%, 56%),
        hsl(41, 98%, 46%)
    );
    --color-background-warning-solid-action-button-active: light-dark(
        hsl(41, 98%, 46%),
        hsl(39, 89%, 45%)
    );
    --color-text-warning-subtle-action-button: light-dark(
        hsl(34, 89%, 25%),
        hsl(40, 94%, 56%)
    );
    --color-background-warning-subtle-action-button: light-dark(
        rgba(232, 159, 2, 0.18),
        rgba(217, 145, 13, 0.12)
    );
    --color-background-warning-subtle-action-button-hover: light-dark(
        rgba(232, 159, 2, 0.23),
        rgba(217, 145, 13, 0.17)
    );
    --color-background-warning-subtle-action-button-active: light-dark(
        rgba(232, 159, 2, 0.28),
        rgba(217, 145, 13, 0.12)
    );
    --color-text-warning-text-action-button: light-dark(
        hsl(37, 94%, 34%),
        hsl(41, 98%, 46%)
    );
    --color-background-warning-text-action-button-hover: light-dark(
        rgba(168, 106, 5, 0.1),
        rgba(201, 135, 13, 0.12)
    );
    --color-background-warning-text-action-button-active: light-dark(
        rgba(168, 106, 5, 0.14),
        rgba(201, 135, 13, 0.17)
    );
    --color-text-danger-solid-action-button: light-dark(
        hsl(0, 0%, 100%),
        rgba(255, 255, 255, 0.85)
    );
    --color-background-danger-solid-action-button: light-dark(
        hsl(4, 75%, 51%),
        hsl(2, 74%, 47%)
    );
    --color-background-danger-solid-action-button-hover: light-dark(
        hsl(2, 74%, 47%),
        hsl(4, 75%, 53%)
    );
    --color-background-danger-solid-action-button-active: light-dark(
        hsl(359, 93%, 39%),
        hsl(2, 92%, 33%)
    );
    --color-text-danger-subtle-action-button: light-dark(
        hsl(359, 94%, 35%),
        hsl(7, 100%, 74%)
    );
    --color-background-danger-subtle-action-button: light-dark(
        rgba(225, 57, 45, 0.13),
        rgba(253, 93, 78, 0.12)
    );
    --color-background-danger-subtle-action-button-hover: light-dark(
        rgba(225, 57, 45, 0.18),
        rgba(253, 93, 78, 0.17)
    );
    --color-background-danger-subtle-action-button-active: light-dark(
        rgba(225, 57, 45, 0.23),
        rgba(253, 93, 78, 0.12)
    );
    --color-text-danger-text-action-button: light-dark(
        hsl(359, 93%, 39%),
        hsl(7, 100%, 74%)
    );
    --color-background-danger-text-action-button-hover: light-dark(
        rgba(192, 7, 10, 0.09),
        rgba(243, 78, 63, 0.12)
    );
    --color-background-danger-text-action-button-active: light-dark(
        rgba(192, 7, 10, 0.13),
        rgba(243, 78, 63, 0.17)
    );
    --color-text-neutral-icon-button: light-dark(
        rgba(84, 87, 100, 0.7),
        rgba(171, 174, 186, 0.7)
    );
    --color-text-neutral-icon-button-hover: light-dark(
        hsl(229, 9%, 36%),
        hsl(229, 10%, 70%)
    );
    --color-text-neutral-icon-button-active: light-dark(
        rgba(84, 87, 100, 0.7),
        rgba(171, 174, 186, 0.7)
    );
    --color-text-neutral-icon-button-square-active: light-dark(
        hsl(229, 9%, 36%),
        hsl(229, 10%, 70%)
    );
    --color-background-neutral-icon-button-square-hover: light-dark(
        rgba(84, 87, 100, 0.07),
        rgba(144, 147, 162, 0.14)
    );
    --color-background-neutral-icon-button-square-active: light-dark(
        rgba(84, 87, 100, 0.11),
        rgba(144, 147, 162, 0.18)
    );
    --color-text-brand-icon-button: light-dark(
        rgba(93, 59, 196, 0.7),
        rgba(160, 150, 253, 0.7)
    );
    --color-text-brand-icon-button-hover: light-dark(
        hsl(255, 54%, 50%),
        hsl(246, 96%, 79%)
    );
    --color-text-brand-icon-button-active: light-dark(
        rgba(93, 59, 196, 0.7),
        rgba(160, 150, 253, 0.7)
    );
    --color-text-brand-icon-button-square-active: light-dark(
        hsl(255, 54%, 50%),
        hsl(246, 96%, 79%)
    );
    --color-background-brand-icon-button-square-hover: light-dark(
        rgba(45, 0, 112, 0.05),
        rgba(138, 112, 255, 0.14)
    );
    --color-background-brand-icon-button-square-active: light-dark(
        rgba(45, 0, 112, 0.1),
        rgba(138, 112, 255, 0.18)
    );
    --color-text-info-icon-button: light-dark(
        rgba(35, 71, 199, 0.7),
        rgba(129, 167, 253, 0.7)
    );
    --color-text-info-icon-button-hover: light-dark(
        hsl(227, 70%, 46%),
        hsl(222, 97%, 75%)
    );
    --color-text-info-icon-button-active: light-dark(
        rgba(35, 71, 199, 0.7),
        rgba(129, 167, 253, 0.7)
    );
    --color-text-info-icon-button-square-active: light-dark(
        hsl(227, 70%, 46%),
        hsl(222, 97%, 75%)
    );
    --color-background-info-icon-button-square-hover: light-dark(
        rgba(5, 3, 124, 0.05),
        rgba(78, 125, 253, 0.12)
    );
    --color-background-info-icon-button-square-active: light-dark(
        rgba(5, 3, 124, 0.09),
        rgba(78, 125, 253, 0.17)
    );
    --color-text-success-icon-button: light-dark(
        rgba(7, 131, 61, 0.7),
        rgba(86, 194, 115, 0.7)
    );
    --color-text-success-icon-button-hover: light-dark(
        hsl(146, 90%, 27%),
        hsl(136, 47%, 55%)
    );
    --color-text-success-icon-button-active: light-dark(
        rgba(7, 131, 61, 0.7),
        rgba(86, 194, 115, 0.7)
    );
    --color-text-success-icon-button-square-active: light-dark(
        hsl(146, 90%, 27%),
        hsl(136, 47%, 55%)
    );
    --color-background-success-icon-button-square-hover: light-dark(
        rgba(9, 103, 47, 0.08),
        rgba(47, 157, 82, 0.12)
    );
    --color-background-success-icon-button-square-active: light-dark(
        rgba(9, 103, 47, 0.12),
        rgba(47, 157, 82, 0.17)
    );
    --color-text-warning-icon-button: light-dark(
        rgba(168, 106, 5, 0.7),
        rgba(232, 159, 2, 0.7)
    );
    --color-text-warning-icon-button-hover: light-dark(
        hsl(37, 94%, 34%),
        hsl(41, 98%, 46%)
    );
    --color-text-warning-icon-button-active: light-dark(
        rgba(168, 106, 5, 0.7),
        rgba(232, 159, 2, 0.7)
    );
    --color-text-warning-icon-button-square-active: light-dark(
        hsl(37, 94%, 34%),
        hsl(41, 98%, 46%)
    );
    --color-background-warning-icon-button-square-hover: light-dark(
        rgba(168, 106, 5, 0.1),
        rgba(201, 135, 13, 0.12)
    );
    --color-background-warning-icon-button-square-active: light-dark(
        rgba(168, 106, 5, 0.14),
        rgba(201, 135, 13, 0.17)
    );
    --color-text-danger-icon-button: light-dark(
        rgba(192, 7, 10, 0.7),
        rgba(255, 138, 122, 0.7)
    );
    --color-text-danger-icon-button-hover: light-dark(
        hsl(359, 93%, 39%),
        hsl(7, 100%, 74%)
    );
    --color-text-danger-icon-button-active: light-dark(
        rgba(192, 7, 10, 0.7),
        rgba(255, 138, 122, 0.7)
    );
    --color-text-danger-icon-button-square-active: light-dark(
        hsl(359, 93%, 39%),
        hsl(7, 100%, 74%)
    );
    --color-background-danger-icon-button-square-hover: light-dark(
        rgba(192, 7, 10, 0.09),
        rgba(243, 78, 63, 0.12)
    );
    --color-background-danger-icon-button-square-active: light-dark(
        rgba(192, 7, 10, 0.13),
        rgba(243, 78, 63, 0.17)
    );
    --color-text-neutral-banner: light-dark(
        hsl(229, 12%, 25%),
        hsl(231, 11%, 76%)
    );
    --color-border-neutral-banner: light-dark(
        rgba(75, 75, 78, 0.4),
        rgba(162, 162, 174, 0.4)
    );
    --color-background-neutral-banner: light-dark(
        hsl(240, 7%, 93%),
        hsl(240, 7%, 17%)
    );
    --color-text-brand-banner: light-dark(
        hsl(264, 95%, 34%),
        hsl(244, 96%, 82%)
    );
    --color-border-brand-banner: light-dark(
        rgba(87, 51, 204, 0.4),
        rgba(216, 207, 247, 0.4)
    );
    --color-background-brand-banner: light-dark(
        hsl(254, 42%, 94%),
        hsl(254, 49%, 16%)
    );
    --color-text-info-banner: light-dark(
        hsl(241, 95%, 25%),
        hsl(221, 93%, 89%)
    );
    --color-border-info-banner: light-dark(
        rgba(38, 81, 110, 0.4),
        rgba(130, 184, 222, 0.4)
    );
    --color-background-info-banner: light-dark(
        hsl(204, 58%, 92%),
        hsl(204, 100%, 12%)
    );
    --color-text-success-banner: light-dark(
        hsl(144, 88%, 16%),
        hsl(135, 56%, 63%)
    );
    --color-border-success-banner: light-dark(
        rgba(27, 100, 60, 0.4),
        rgba(74, 191, 131, 0.4)
    );
    --color-background-success-banner: light-dark(
        hsl(147, 43%, 92%),
        hsl(146, 90%, 7%)
    );
    --color-text-warning-banner: light-dark(
        hsl(34, 89%, 25%),
        hsl(40, 94%, 56%)
    );
    --color-border-warning-banner: light-dark(
        rgba(99, 77, 39, 0.4),
        rgba(206, 186, 130, 0.4)
    );
    --color-background-warning-banner: light-dark(
        hsl(50, 75%, 92%),
        hsl(50, 100%, 10%)
    );
    --color-text-danger-banner: light-dark(
        hsl(359, 94%, 35%),
        hsl(7, 100%, 74%)
    );
    --color-border-danger-banner: light-dark(
        rgba(132, 41, 36, 0.4),
        rgba(237, 145, 140, 0.4)
    );
    --color-background-danger-banner: light-dark(
        hsl(0, 35%, 92%),
        hsl(0, 52%, 18%)
    );
    --color-background-legacy-input: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-border-legacy-input: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    --color-border-legacy-input-focus: light-dark(
        hsla(206, 80%, 62%, 0.8),
        hsla(0, 0%, 0%, 0.9)
    );
    --color-background-disabled-settings-select: light-dark(
        hsl(0, 0%, 93%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-background-disabled-modal-select: light-dark(
        hsl(0, 0%, 90%),
        hsla(0, 0%, 0%, 0.2)
    );
    --color-text-input: light-dark(hsl(0, 0%, 14%), hsl(0, 0%, 95%));
    --color-background-input: light-dark(hsl(0, 0%, 100%), hsl(225, 6%, 10%));
    --color-background-input-focus: light-dark(
        hsl(0, 0%, 100%),
        hsl(225, 6%, 7%)
    );
    --color-outline-input: light-dark(
        rgba(20, 22, 31, 0.3),
        rgba(255, 255, 255, 0.2)
    );
    --color-outline-input-hover: light-dark(
        rgba(20, 22, 31, 0.6),
        rgba(255, 255, 255, 0.4)
    );
    --color-outline-input-focus: light-dark(
        rgba(20, 22, 31, 0.8),
        rgba(255, 255, 255, 0.5)
    );
    --color-box-shadow-input-focus: light-dark(
        rgba(46, 48, 56, 0.3),
        rgba(255, 255, 255, 0.4)
    );
    --color-success-main-view-banner: light-dark(
        hsl(147, 57%, 25%),
        hsl(147, 51%, 80%)
    );
    --color-background-success-main-view-banner: light-dark(
        hsl(147, 43%, 92%),
        hsl(147, 100%, 8%)
    );
    --color-border-success-main-view-banner: light-dark(
        hsla(147, 57%, 25%, 0.4),
        hsla(149, 48%, 52%, 0.4)
    );
    --color-success-main-view-banner-close-button: light-dark(
        hsla(147, 57%, 25%, 0.5),
        hsla(147, 51%, 55%, 0.5)
    );
    --color-success-main-view-banner-close-button-hover: light-dark(
        hsl(147, 57%, 25%),
        hsl(147, 51%, 55%)
    );
    --color-success-main-view-banner-close-button-active: light-dark(
        hsla(147, 57%, 25%, 0.75),
        hsla(147, 51%, 55%, 0.75)
    );
    --color-background-success-main-view-banner-action-button: light-dark(
        hsla(147, 57%, 25%, 0.1),
        hsla(147, 51%, 55%, 0.1)
    );
    --color-background-success-main-view-banner-action-button-hover: light-dark(
        hsla(147, 57%, 25%, 0.12),
        hsla(147, 51%, 55%, 0.15)
    );
    --color-background-success-main-view-banner-action-button-active: light-dark(
        hsla(147, 57%, 25%, 0.15),
        hsla(147, 51%, 55%, 0.2)
    );
    --color-warning-main-view-banner: light-dark(
        hsl(38, 44%, 27%),
        hsl(50, 45%, 80%)
    );
    --color-background-warning-main-view-banner: light-dark(
        hsl(50, 75%, 92%),
        hsl(53, 100%, 11%)
    );
    --color-border-warning-main-view-banner: light-dark(
        hsla(38, 44%, 27%, 0.4),
        hsla(38, 44%, 60%, 0.4)
    );
    --color-warning-main-view-banner-close-button: light-dark(
        hsla(38, 44%, 27%, 0.5),
        hsla(50, 45%, 61%, 0.5)
    );
    --color-warning-main-view-banner-close-button-hover: light-dark(
        hsl(38, 44%, 27%),
        hsl(50, 45%, 61%)
    );
    --color-warning-main-view-banner-close-button-active: light-dark(
        hsla(38, 44%, 27%, 0.75),
        hsla(50, 45%, 61%, 0.75)
    );
    --color-warning-main-view-banner-action-button: light-dark(
        inherit,
        hsl(50, 45%, 61%)
    );
    --color-background-warning-main-view-banner-action-button: light-dark(
        hsla(38, 44%, 27%, 0.1),
        hsla(50, 45%, 61%, 0.1)
    );
    --color-background-warning-main-view-banner-action-button-hover: light-dark(
        hsla(38, 44%, 27%, 0.12),
        hsla(50, 45%, 61%, 0.15)
    );
    --color-background-warning-main-view-banner-action-button-active: light-dark(
        hsla(38, 44%, 27%, 0.15),
        hsla(50, 45%, 61%, 0.2)
    );
    --color-error-main-view-banner: light-dark(
        hsl(4, 58%, 33%),
        hsl(3, 73%, 80%)
    );
    --color-background-error-main-view-banner: light-dark(
        hsl(4, 35%, 90%),
        hsl(0, 60%, 19%)
    );
    --color-border-error-main-view-banner: light-dark(
        hsla(3, 57%, 33%, 0.4),
        hsla(3, 73%, 74%, 0.4)
    );
    --color-error-main-view-banner-close-button: light-dark(
        hsla(4, 58%, 33%, 0.5),
        hsla(3, 73%, 74%, 0.5)
    );
    --color-error-main-view-banner-close-button-hover: light-dark(
        hsl(4, 58%, 33%),
        hsl(3, 73%, 74%)
    );
    --color-error-main-view-banner-close-button-active: light-dark(
        hsla(4, 58%, 33%, 0.75),
        hsla(3, 73%, 74%, 0.75)
    );
    --color-error-main-view-banner-action-button: light-dark(
        inherit,
        hsl(3, 73%, 74%)
    );
    --color-background-error-main-view-banner-action-button: light-dark(
        hsla(3, 57%, 33%, 0.1),
        hsla(3, 73%, 74%, 0.1)
    );
    --color-background-error-main-view-banner-action-button-hover: light-dark(
        hsla(3, 57%, 33%, 0.12),
        hsla(3, 73%, 74%, 0.15)
    );
    --color-background-error-main-view-banner-action-button-active: light-dark(
        hsla(3, 57%, 33%, 0.15),
        hsla(3, 73%, 74%, 0.2)
    );
    --color-info-main-view-banner: light-dark(
        hsl(204, 49%, 29%),
        hsl(205, 58%, 80%)
    );
    --color-background-info-main-view-banner: light-dark(
        hsl(204, 58%, 92%),
        hsl(204, 100%, 12%)
    );
    --color-border-info-main-view-banner: light-dark(
        hsla(204, 49%, 29%, 0.4),
        hsla(205, 58%, 69%, 0.4)
    );
    --color-info-main-view-banner-close-button: light-dark(
        hsla(204, 49%, 29%, 0.5),
        hsla(205, 58%, 69%, 0.5)
    );
    --color-info-main-view-banner-close-button-hover: light-dark(
        hsl(204, 49%, 29%),
        hsl(205, 58%, 69%)
    );
    --color-info-main-view-banner-close-button-active: light-dark(
        hsla(204, 49%, 29%, 0.75),
        hsla(205, 58%, 69%, 0.75)
    );
    --color-info-main-view-banner-action-button: light-dark(
        inherit,
        hsl(205, 58%, 69%)
    );
    --color-background-info-main-view-banner-action-button: light-dark(
        hsla(204, 49%, 29%, 0.1),
        hsla(205, 58%, 69%, 0.1)
    );
    --color-background-info-main-view-banner-action-button-hover: light-dark(
        hsla(204, 49%, 29%, 0.12),
        hsla(205, 58%, 69%, 0.15)
    );
    --color-background-info-main-view-banner-action-button-active: light-dark(
        hsla(204, 49%, 29%, 0.15),
        hsla(205, 58%, 69%, 0.2)
    );
    --color-main-view-banner-action-link: light-dark(
        var(--color-text-generic-link),
        hsl(200, 100%, 50%)
    );
    --color-background-main-view-banner-moving-bar: light-dark(
        hsl(204, 63%, 85%),
        hsl(204, 63%, 18%)
    );
    --color-info-density-control-border: light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 90%, 0.2)
    );
    --color-info-density-button-icon: light-dark(
        hsl(229, 9%, 36%),
        hsla(0, 0%, 100%, 0.8)
    );
    --color-info-density-button-hover-background: light-dark(
        hsla(229, 9%, 36%, 0.07),
        hsla(229, 10%, 50%, 0.3)
    );
}
}
@supports not (color: light-dark(tan, tan)) {
:root * {
    --csstools-light-dark-toggle--873: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    --color-background-active-narrow-filter: var(--csstools-light-dark-toggle--873, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--874: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    --color-background-hover-narrow-filter: var(--csstools-light-dark-toggle--874, hsl(0, 0%, 97%));
    --csstools-light-dark-toggle--875: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
    --color-compose-recipient-box-border-color: var(--csstools-light-dark-toggle--875, rgb(207, 208, 215));
    --csstools-light-dark-toggle--876: var(--csstools-color-scheme--light) rgba(69, 153, 161, 0.7);
    --color-border-todo-checkbox: var(--csstools-light-dark-toggle--876, hsl(156, 28%, 70%));
    --csstools-light-dark-toggle--877: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-neutral-solid-action-button: var(--csstools-light-dark-toggle--877, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--878: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-brand-solid-action-button: var(--csstools-light-dark-toggle--878, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--879: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-info-solid-action-button: var(--csstools-light-dark-toggle--879, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--880: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-success-solid-action-button: var(--csstools-light-dark-toggle--880, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--881: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    --color-text-danger-solid-action-button: var(--csstools-light-dark-toggle--881, hsl(0, 0%, 100%));
    }
}
@supports not (color: light-dark(tan, tan)) {
:root * {
    --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
    --color-date: var(--csstools-light-dark-toggle--26, hsla(0, 0%, 15%, 0.75));
    --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) hsl(46, 15%, 20%);
    --color-background-private-message-header: var(--csstools-light-dark-toggle--27, hsl(46, 35%, 93%));
    --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) hsl(46, 7%, 16%);
    --color-background-private-message-content: var(--csstools-light-dark-toggle--28, hsl(45, 20%, 96%));
    --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) hsl(0, 0%, 14%);
    --color-background-stream-message-content: var(--csstools-light-dark-toggle--29, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) hsla(217, 64%, 59%, 0.7);
    --color-selected-message-outline: var(--csstools-light-dark-toggle--30, hsla(217, 64%, 59%, 0.6));
    --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) hsl(217, 95%, 59%);
    --color-selected-gif-in-grid-picker: var(--csstools-light-dark-toggle--31, hsl(217, 75%, 59%));
    --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) hsla(217, 95%, 59%, 0.6);
    --color-hovered-gif-in-grid-picker: var(--csstools-light-dark-toggle--32, hsla(217, 75%, 59%, 0.5));
    --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    --color-message-list-border: var(--csstools-light-dark-toggle--33, hsla(0, 0%, 0%, 0.16));
    --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-message-header-contents-border: var(--csstools-light-dark-toggle--34, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.48);
    --color-private-message-header-border: var(--csstools-light-dark-toggle--35, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-message-header-contents-border-bottom: var(--csstools-light-dark-toggle--36, hsla(0, 0%, 0%, 0.05));
    --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.37);
    --color-private-message-header-border-bottom: var(--csstools-light-dark-toggle--37, hsla(0, 0%, 0%, 0.07));
    --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
    --color-message-header-icon-non-interactive: var(--csstools-light-dark-toggle--38, hsla(0, 0%, 0%, 0.3));
    --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-message-header-icon-interactive: var(--csstools-light-dark-toggle--39, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    --color-background: var(--csstools-light-dark-toggle--40, hsl(0, 0%, 94%));
    --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) hsl(225, 6%, 10%);
    --color-background-widget-input: var(--csstools-light-dark-toggle--41, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-widget-button: var(--csstools-light-dark-toggle--42, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) hsl(0, 0%, 13%);
    --color-background-navbar: var(--csstools-light-dark-toggle--43, hsl(0, 0%, 97%));
    --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-text-sidebar-row: var(--csstools-light-dark-toggle--44, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) hsl(0, 0%, 90%);
    --color-text-active-narrow-filter: var(--csstools-light-dark-toggle--45, hsl(0, 0%, 15%));
    --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
    --color-shadow-sidebar-row-hover: var(--csstools-light-dark-toggle--46, hsla(0, 0%, 0%, 0.3));
    --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-sidebar-action: var(--csstools-light-dark-toggle--47, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
    --color-sidebar-action-hover: var(--csstools-light-dark-toggle--48, hsl(240, 100%, 15%));
    --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
    --color-background-sidebar-action-hover: var(--csstools-light-dark-toggle--49, hsl(240, 100%, 93%));
    --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
    --color-background-navigation-item-hover: var(--csstools-light-dark-toggle--50, hsla(240, 100%, 50%, 0.07));
    --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-navbar-bottom-border: var(--csstools-light-dark-toggle--51, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.15);
    --color-left-sidebar-direct-messages-bottom-divider: var(--csstools-light-dark-toggle--52, hsla(0, 0%, 0%, 0.15));
    --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
    --color-left-sidebar-inner-box-shadow: var(--csstools-light-dark-toggle--53, hsla(0, 0%, 0%, 0.2));
    --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) hsla(0, 0%, 11%, 0.3);
    --color-left-sidebar-outer-box-shadow: var(--csstools-light-dark-toggle--54, hsla(0, 0%, 94%, 0.2));
    --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) hsl(240, 19%, 24%);
    --color-left-sidebar-middle-box-shadow-hover: var(--csstools-light-dark-toggle--55, hsl(244, 36%, 91%));
    --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
    --color-left-sidebar-outer-box-shadow-hover: var(--csstools-light-dark-toggle--56, hsla(240, 100%, 50%, 0.07));
    --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) hsl(0, 0%, 30%);
    --color-masked-unread-marker: var(--csstools-light-dark-toggle--57, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-active-row-modal: var(--csstools-light-dark-toggle--58, hsl(0, 0%, 98%));
    --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) hsla(212, 28%, 8%, 0.75);
    --color-background-overlay: var(--csstools-light-dark-toggle--59, hsla(0, 0%, 13%, 0.8));
    --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) hsla(212, 28%, 8%, 0.75);
    --color-background-non-empty-overlay-indicator: var(--csstools-light-dark-toggle--60, hsla(0, 0%, 100%, 0.9));
    --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-modal-selectable-icon: var(--csstools-light-dark-toggle--61, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
    --color-modal-selectable-icon-hover: var(--csstools-light-dark-toggle--62, hsl(240, 100%, 15%));
    --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
    --background-color-modal-selectable-icon-hover: var(--csstools-light-dark-toggle--63, hsla(240, 100%, 50%, 0.07));
    --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) hsl(240, 7%, 17%);
    --background-color-readonly-modal-input: var(--csstools-light-dark-toggle--64, hsl(240, 7%, 93%));
    --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --background-color-textarea: var(--csstools-light-dark-toggle--65, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --background-color-disabled-textarea: var(--csstools-light-dark-toggle--66, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.3);
    --background-color-view-only-textarea: var(--csstools-light-dark-toggle--67, hsla(0, 0%, 100%, 0.6));
    --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --border-color-textarea: var(--csstools-light-dark-toggle--68, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
    --focus-border-color-textarea: var(--csstools-light-dark-toggle--69, hsla(207, 80%, 62%, 0.8));
    --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-pill-container-without-placeholder: var(--csstools-light-dark-toggle--70, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-unmuted-or-followed-topic-list-item: var(--csstools-light-dark-toggle--71, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.19);
    --color-topic-indent-border: var(--csstools-light-dark-toggle--72, hsla(0, 0%, 0%, 0.19));
    --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
    --color-background-search: var(--csstools-light-dark-toggle--73, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) hsl(0, 0%, 20%);
    --color-background-search-collapsed: var(--csstools-light-dark-toggle--74, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) hsl(0, 0%, 20%);
    --color-background-search-option-hover: var(--csstools-light-dark-toggle--75, hsl(0, 0%, 94%));
    --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.3);
    --color-search-box-hover-shadow: var(--csstools-light-dark-toggle--76, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.35);
    --color-search-dropdown-top-border: var(--csstools-light-dark-toggle--77, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) hsl(0, 0%, 78%);
    --color-search-icons: var(--csstools-light-dark-toggle--78, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.1);
    --color-background-image-loader: var(--csstools-light-dark-toggle--79, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
    --color-background-popover-menu: var(--csstools-light-dark-toggle--80, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    --color-border-popover-menu-separator: var(--csstools-light-dark-toggle--81, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) hsl(225, 100%, 84%);
    --color-hotkey-hint: var(--csstools-light-dark-toggle--82, hsl(227, 78%, 59%));
    --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) hsl(0, 0%, 65%);
    --color-popover-hotkey-hint: var(--csstools-light-dark-toggle--83, hsl(0, 0%, 40%));
    --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) hsla(0, 0%, 65%, 0.5);
    --color-border-popover-hotkey-hint: var(--csstools-light-dark-toggle--84, hsla(0, 0%, 40%, 0.5));
    --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) hsla(220, 12%, 95%, 0.05);
    --color-background-hover-popover-menu: var(--csstools-light-dark-toggle--85, hsla(220, 12%, 5%, 0.05));
    --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) hsla(220, 12%, 95%, 0.07);
    --color-background-active-popover-menu: var(--csstools-light-dark-toggle--86, hsla(220, 12%, 5%, 0.07));
    --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-border-popover-menu: var(--csstools-light-dark-toggle--87, hsla(0, 0%, 0%, 0.4));
    --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.2);
    --color-border-personal-menu-avatar: var(--csstools-light-dark-toggle--88, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) hsl(240, 18%, 34%);
    --color-background-unread-counter-prominent: var(--csstools-light-dark-toggle--89, hsla(240, 10%, 50%, 0.7));
    --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) hsla(240, 10%, 50%, 0.35);
    --color-background-unread-counter-normal: var(--csstools-light-dark-toggle--90, hsla(240, 10%, 50%, 0.2));
    --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-unread-counter-normal: var(--csstools-light-dark-toggle--91, hsla(0, 0%, 0%, 0.9));
    --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) hsl(240, 15%, 65%);
    --color-unread-counter-quiet: var(--csstools-light-dark-toggle--92, hsl(240, 15%, 50%));
    --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) hsl(0, 0%, 67%);
    --color-border-add-subscription-button-focus: var(--csstools-light-dark-toggle--93, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) rgb(58, 58, 67);
    --color-background-unread-counter-no-alpha: var(--csstools-light-dark-toggle--94, rgb(215, 215, 220));
    --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-background-unread-counter-dot: var(--csstools-light-dark-toggle--95, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) hsl(105, 2%, 50%);
    --color-border-unread-counter: var(--csstools-light-dark-toggle--96, var(--color-background-unread-counter));
    --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.3);
    --color-background-tab-picker-container: var(--csstools-light-dark-toggle--97, hsla(0, 0%, 0%, 0.07));
    --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --color-background-tab-picker-selected-tab: var(--csstools-light-dark-toggle--98, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.12);
    --color-outline-tab-picker-tab-option: var(--csstools-light-dark-toggle--99, hsla(0, 0%, 0%, 0.3));
    --csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
    --color-background-tab-picker-tab-option-hover: var(--csstools-light-dark-toggle--100, hsla(0, 0%, 100%, 0.6));
    --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.03);
    --color-background-tab-picker-tab-option-active: var(--csstools-light-dark-toggle--101, hsla(0, 0%, 100%, 0.35));
    --csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
    --color-background-popover: var(--csstools-light-dark-toggle--102, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) hsl(18, 100%, 75%);
    --color-background-alert-word: var(--csstools-light-dark-toggle--103, hsl(18, 100%, 84%));
    --csstools-light-dark-toggle--104: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.1);
    --color-buddy-list-avatar-loading: var(--csstools-light-dark-toggle--104, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-border-sidebar: var(--csstools-light-dark-toggle--105, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--106: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-text-sidebar-base: var(--csstools-light-dark-toggle--106, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.15);
    --color-border-sidebar-subheader: var(--csstools-light-dark-toggle--107, hsla(0, 0%, 0%, 0.15));
    --csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-request-progress-status-alert-text: var(--csstools-light-dark-toggle--108, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--109: var(--csstools-color-scheme--light) hsla(46, 28%, 38%, 0.27);
    --color-background-tip: var(--csstools-light-dark-toggle--109, hsl(46, 63%, 95%));
    --csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) hsl(49, 38%, 46%);
    --color-border-tip: var(--csstools-light-dark-toggle--110, hsl(49, 20%, 84%));
    --csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.666);
    --color-box-shadow-animated-purple-button-focus: var(--csstools-light-dark-toggle--111, hsl(235, 18%, 7%));
    --csstools-light-dark-toggle--112: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    --color-background-animated-button: var(--csstools-light-dark-toggle--112, hsl(0, 0%, 90%));
    --csstools-light-dark-toggle--113: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-animated-button-text: var(--csstools-light-dark-toggle--113, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) hsl(3, 73%, 74%);
    --color-invalid-input-border: var(--csstools-light-dark-toggle--114, hsl(3, 57%, 33%));
    --csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) hsl(3, 73%, 74%);
    --color-invalid-input-box-shadow: var(--csstools-light-dark-toggle--115, hsl(3, 57%, 33%));
    --csstools-light-dark-toggle--116: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-white-box: var(--csstools-light-dark-toggle--116, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--117: var(--csstools-color-scheme--light) hsla(240, 96%, 68%, 0.5);
    --color-stream-group-row-checked-icon-disabled: var(--csstools-light-dark-toggle--117, hsl(240, 96%, 68%));
    --csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) hsl(218, 14%, 33%);
    --color-stream-group-row-plus-icon: var(--csstools-light-dark-toggle--118, hsl(0, 0%, 72%));
    --csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) hsl(230, 11%, 67%);
    --color-stream-group-row-plus-icon-hover: var(--csstools-light-dark-toggle--119, hsl(0, 0%, 27%));
    --csstools-light-dark-toggle--120: var(--csstools-color-scheme--light) hsla(218, 14%, 33%, 0.5);
    --color-stream-group-row-plus-icon-disabled: var(--csstools-light-dark-toggle--120, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--121: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.9);
    --color-recent-view-link-unread: var(--csstools-light-dark-toggle--121, hsl(0, 0%, 5%));
    --csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
    --color-recent-view-link: var(--csstools-light-dark-toggle--122, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-recent-filters-button-focus: var(--csstools-light-dark-toggle--123, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-recent-filters-button-disabled: var(--csstools-light-dark-toggle--124, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-border-recent-filters-button-disabled: var(--csstools-light-dark-toggle--125, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-recent-view-participant-overflow-text: var(--csstools-light-dark-toggle--126, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--127: var(--csstools-color-scheme--light) hsl(211, 18%, 25%);
    --color-background-recent-view-participant-overflow: var(--csstools-light-dark-toggle--127, hsl(0, 0%, 88%));
    --csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
    --color-background-recent-view-table-thead-th: var(--csstools-light-dark-toggle--128, hsl(0, 0%, 97%));
    --csstools-light-dark-toggle--129: var(--csstools-color-scheme--light) hsla(230, 9%, 60%, 0.14);
    --color-background-recent-view-table-thead-sort-header: var(--csstools-light-dark-toggle--129, hsla(229, 9%, 36%, 0.07));
    --csstools-light-dark-toggle--130: var(--csstools-color-scheme--light) hsla(229, 10%, 70%, 0.5);
    --color-arrow-recent-view-table-thead-th: var(--csstools-light-dark-toggle--130, hsla(229, 9%, 36%, 0.5));
    --csstools-light-dark-toggle--131: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
    --color-text-recent-view-last-msg-time: var(--csstools-light-dark-toggle--131, hsla(0, 0%, 15%, 0.75));
    --csstools-light-dark-toggle--132: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.58);
    --color-text-recent-view-last-msg-time-unread: var(--csstools-light-dark-toggle--132, hsla(0, 0%, 0%, 0.75));
    --csstools-light-dark-toggle--133: var(--csstools-color-scheme--light) hsl(228, 11%, 17%);
    --color-compose-box-background: var(--csstools-light-dark-toggle--133, hsl(232, 30%, 92%));
    --csstools-light-dark-toggle--134: var(--csstools-color-scheme--light) color-mix(
            in srgb,
            var(--color-compose-box-background),
            hsl(0, 0%, 0%) 20%
        );
    --color-compose-message-content-background: var(--csstools-light-dark-toggle--134, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--135: var(--csstools-color-scheme--light) hsl(3, 50%, 12%);
    --color-compose-message-content-background-over-limit: var(--csstools-light-dark-toggle--135, hsl(3, 35%, 90%));
    --csstools-light-dark-toggle--136: var(--csstools-color-scheme--light) hsl(50, 75%, 12%);
    --color-compose-message-content-background-approaching-limit: var(--csstools-light-dark-toggle--136, hsl(50, 75%, 92%));
    --csstools-light-dark-toggle--137: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    --color-border-compose-content: var(--csstools-light-dark-toggle--137, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--138: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.8);
    --color-compose-send-button-focus-shadow: var(--csstools-light-dark-toggle--138, hsl(230, 100%, 20%));
    --csstools-light-dark-toggle--139: var(--csstools-color-scheme--light) hsl(240, 30%, 70%);
    --color-compose-send-control-button: var(--csstools-light-dark-toggle--139, hsla(240, 30%, 50%, 0.95));
    --csstools-light-dark-toggle--140: var(--csstools-color-scheme--light) var(--color-compose-send-control-button);
    --color-compose-send-control-button-interactive: var(--csstools-light-dark-toggle--140, hsl(240, 30%, 50%));
    --csstools-light-dark-toggle--141: var(--csstools-color-scheme--light) hsla(235, 100%, 70%, 0.11);
    --color-compose-send-control-button-background-interactive: var(--csstools-light-dark-toggle--141, hsla(240, 100%, 30%, 0.05));
    --csstools-light-dark-toggle--142: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-compose-recipient-box-background-color: var(--csstools-light-dark-toggle--142, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--143: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.12);
    --color-compose-recipient-box-hover: var(--csstools-light-dark-toggle--143, hsl(0, 0%, 69%));
    --csstools-light-dark-toggle--144: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.27);
    --color-compose-recipient-box-has-focus: var(--csstools-light-dark-toggle--144, hsl(0, 0%, 57%));
    --csstools-light-dark-toggle--145: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-compose-collapsed-reply-button-area-background: var(--csstools-light-dark-toggle--145, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--146: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.15);
    --color-compose-collapsed-reply-button-area-background-interactive: var(--csstools-light-dark-toggle--146, var(--color-compose-collapsed-reply-button-area-background));
    --csstools-light-dark-toggle--147: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-compose-collapsed-reply-button-area-border: var(--csstools-light-dark-toggle--147, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--148: var(--csstools-color-scheme--light) var(--color-compose-collapsed-reply-button-area-border);
    --color-compose-collapsed-reply-button-area-border-interactive: var(--csstools-light-dark-toggle--148, hsl(0, 0%, 60%));
    --csstools-light-dark-toggle--149: var(--csstools-color-scheme--light) hsl(231, 30%, 65%);
    --color-compose-embedded-button-text-color: var(--csstools-light-dark-toggle--149, hsl(231, 20%, 46%));
    --csstools-light-dark-toggle--150: var(--csstools-color-scheme--light) hsl(231, 30%, 70%);
    --color-compose-embedded-button-text-color-hover: var(--csstools-light-dark-toggle--150, hsl(231, 20%, 30%));
    --csstools-light-dark-toggle--151: var(--csstools-color-scheme--light) hsla(235, 100%, 70%, 0.11);
    --color-compose-embedded-button-background-hover: var(--csstools-light-dark-toggle--151, hsla(231, 100%, 90%, 0.5));
    --csstools-light-dark-toggle--152: var(--csstools-color-scheme--light) hsla(235, 100%, 70%, 0.2);
    --color-compose-embedded-button-background-interactive: var(--csstools-light-dark-toggle--152, hsla(231, 100%, 90%, 0.9));
    --csstools-light-dark-toggle--153: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-compose-new-message-button: var(--csstools-light-dark-toggle--153, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--154: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.15);
    --color-background-compose-new-message-button-hover: var(--csstools-light-dark-toggle--154, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--155: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-compose-new-message-button-active: var(--csstools-light-dark-toggle--155, hsl(0, 0%, 95%));
    --csstools-light-dark-toggle--156: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-compose-new-message-button: var(--csstools-light-dark-toggle--156, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--157: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-compose-new-message-button-hover: var(--csstools-light-dark-toggle--157, hsl(0, 0%, 60%));
    --csstools-light-dark-toggle--158: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-compose-new-message-button-active: var(--csstools-light-dark-toggle--158, hsl(0, 0%, 60%));
    --csstools-light-dark-toggle--159: var(--csstools-color-scheme--light) hsl(38, 100%, 70%);
    --color-limit-indicator: var(--csstools-light-dark-toggle--159, hsl(38, 100%, 36%));
    --csstools-light-dark-toggle--160: var(--csstools-color-scheme--light) hsl(3, 80%, 60%);
    --color-limit-indicator-over-limit: var(--csstools-light-dark-toggle--160, hsl(3, 80%, 40%));
    --csstools-light-dark-toggle--161: var(--csstools-color-scheme--light) hsla(227, 80%, 60%, 0.25);
    --color-narrow-to-compose-recipients-background: var(--csstools-light-dark-toggle--161, hsla(227, 100%, 70%, 0.25));
    --csstools-light-dark-toggle--162: var(--csstools-color-scheme--light) hsla(227, 80%, 60%, 0.35);
    --color-narrow-to-compose-recipients-background-hover: var(--csstools-light-dark-toggle--162, hsla(227, 100%, 70%, 0.35));
    --csstools-light-dark-toggle--163: var(--csstools-color-scheme--light) hsl(224, 28%, 81%);
    --color-narrow-to-compose-recipients: var(--csstools-light-dark-toggle--163, hsl(227, 76%, 64%));
    --csstools-light-dark-toggle--164: var(--csstools-color-scheme--light) hsl(221, 100%, 95%);
    --color-narrow-to-compose-recipients-hover: var(--csstools-light-dark-toggle--164, hsl(227, 78%, 59%));
    --csstools-light-dark-toggle--165: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.55);
    --color-composebox-button: var(--csstools-light-dark-toggle--165, hsla(0, 0%, 0%, 0.55));
    --csstools-light-dark-toggle--166: var(--csstools-color-scheme--light) hsla(231, 8%, 14%, 0.8);
    --color-composebox-button-background: var(--csstools-light-dark-toggle--166, hsla(0, 0%, 100%, 0.6));
    --csstools-light-dark-toggle--167: var(--csstools-color-scheme--light) hsl(231, 12%, 18%);
    --color-composebox-button-background-hover: var(--csstools-light-dark-toggle--167, hsl(0, 0%, 95%));
    --csstools-light-dark-toggle--168: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.08);
    --color-message-formatting-controls-container: var(--csstools-light-dark-toggle--168, hsl(232, 30%, 96%));
    --csstools-light-dark-toggle--169: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
    --color-message-content-container-border: var(--csstools-light-dark-toggle--169, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--170: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.27);
    --color-message-content-container-border-focus: var(--csstools-light-dark-toggle--170, hsl(0, 0%, 57%));
    --csstools-light-dark-toggle--171: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
    --color-compose-control-button-background-hover: var(--csstools-light-dark-toggle--171, hsla(0, 0%, 0%, 0.05));
    --csstools-light-dark-toggle--172: var(--csstools-color-scheme--light) hsla(236, 33%, 90%, 0.25);
    --color-compose-formatting-button-divider: var(--csstools-light-dark-toggle--172, hsl(0, 0%, 75%));
    --csstools-light-dark-toggle--173: var(--csstools-color-scheme--light) hsl(0, 0%, 67%);
    --color-compose-focus-ring: var(--csstools-light-dark-toggle--173, var(--color-outline-focus));
    --csstools-light-dark-toggle--174: var(--csstools-color-scheme--light) hsl(234, 21%, 24%);
    --csstools-light-dark-toggle--175: var(--csstools-color-scheme--light) hsla(234, 21%, 24%, 0.769);
    --gradient-compose-scroll-backward: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--174, hsl(234, 100%, 95%)) 35%,
        var(--csstools-light-dark-toggle--175, hsl(234, 100%, 95%)) 50%,
        transparent 100%
    );
    --csstools-light-dark-toggle--176: var(--csstools-color-scheme--light) hsl(234, 30%, 28%);
    --csstools-light-dark-toggle--177: var(--csstools-color-scheme--light) hsla(234, 30%, 28%, 0.769);
    --gradient-compose-scroll-backward-hover: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--176, hsl(234, 100%, 93%)) 35%,
        var(--csstools-light-dark-toggle--177, hsl(234, 100%, 93%)) 50%,
        transparent 100%
    );
    --csstools-light-dark-toggle--178: var(--csstools-color-scheme--light) hsl(234, 35%, 30%);
    --gradient-compose-scroll-backward-active: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--178, hsl(234, 100%, 90%)) 45%,
        transparent 100%
    );
    --csstools-light-dark-toggle--179: var(--csstools-color-scheme--light) hsla(234, 21%, 24%, 0.769);
    --csstools-light-dark-toggle--180: var(--csstools-color-scheme--light) hsl(234, 21%, 24%);
    --gradient-compose-scroll-forward: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--179, hsl(234, 100%, 95%)) 50%,
        var(--csstools-light-dark-toggle--180, hsl(234, 100%, 95%)) 65%
    );
    --csstools-light-dark-toggle--181: var(--csstools-color-scheme--light) hsla(234, 30%, 28%, 0.769);
    --csstools-light-dark-toggle--182: var(--csstools-color-scheme--light) hsl(234, 30%, 28%);
    --gradient-compose-scroll-forward-hover: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--181, hsl(234, 100%, 93%)) 50%,
        var(--csstools-light-dark-toggle--182, hsl(234, 100%, 93%)) 65%
    );
    --csstools-light-dark-toggle--183: var(--csstools-color-scheme--light) hsl(234, 35%, 30%);
    --gradient-compose-scroll-forward-active: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--183, hsl(234, 100%, 90%)) 55%
    );
    --csstools-light-dark-toggle--184: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    --color-text-default: var(--csstools-light-dark-toggle--184, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--185: var(--csstools-color-scheme--light) var(--color-text-default);
    --color-text-message-default: var(--csstools-light-dark-toggle--185, hsl(0, 0%, 15%));
    --csstools-light-dark-toggle--186: var(--csstools-color-scheme--light) hsla(0, 0%, 87%, 0.4);
    --color-text-message-blockquote-border: var(--csstools-light-dark-toggle--186, hsla(0, 0%, 15%, 0.25));
    --csstools-light-dark-toggle--187: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-text-message-view-header: var(--csstools-light-dark-toggle--187, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--188: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-text-message-header: var(--csstools-light-dark-toggle--188, hsl(0, 0%, 15%));
    --csstools-light-dark-toggle--189: var(--csstools-color-scheme--light) hsl(0, 0%, 95%);
    --color-text-dropdown-input: var(--csstools-light-dark-toggle--189, hsl(0, 0%, 13%));
    --csstools-light-dark-toggle--190: var(--csstools-color-scheme--light) hsl(240, 100%, 88%);
    --color-text-self-direct-mention: var(--csstools-light-dark-toggle--190, hsl(240, 52%, 45%));
    --csstools-light-dark-toggle--191: var(--csstools-color-scheme--light) hsl(184, 52%, 63%);
    --color-text-self-group-mention: var(--csstools-light-dark-toggle--191, hsl(183, 52%, 26%));
    --csstools-light-dark-toggle--192: var(--csstools-color-scheme--light) hsl(240, 30%, 65%);
    --color-text-show-more-less-button: var(--csstools-light-dark-toggle--192, hsl(240, 52%, 53%));
    --csstools-light-dark-toggle--193: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
    --color-text-search: var(--csstools-light-dark-toggle--193, hsl(0, 0%, 35%));
    --csstools-light-dark-toggle--194: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-text-search-hover: var(--csstools-light-dark-toggle--194, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--195: var(--csstools-color-scheme--light) hsl(0, 0%, 55%);
    --color-text-placeholder: var(--csstools-light-dark-toggle--195, hsl(0, 0%, 45%));
    --csstools-light-dark-toggle--196: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
    --color-text-search-placeholder: var(--csstools-light-dark-toggle--196, hsl(0, 0%, 50%));
    --csstools-light-dark-toggle--197: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.8);
    --color-text-popover-menu: var(--csstools-light-dark-toggle--197, hsl(0, 0%, 15%));
    --csstools-light-dark-toggle--198: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-text-full-name: var(--csstools-light-dark-toggle--198, hsl(0, 0%, 15%));
    --csstools-light-dark-toggle--199: var(--csstools-color-scheme--light) hsl(0, 0%, 50%);
    --color-text-item: var(--csstools-light-dark-toggle--199, hsl(0, 0%, 40%));
    --csstools-light-dark-toggle--200: var(--csstools-color-scheme--light) hsl(0deg 0% 100% 35%);
    --color-text-personal-menu-no-status: var(--csstools-light-dark-toggle--200, hsl(0, 0%, 50%));
    --csstools-light-dark-toggle--201: var(--csstools-color-scheme--light) hsl(0deg 0% 100% 50%);
    --color-text-personal-menu-some-status: var(--csstools-light-dark-toggle--201, hsl(0, 0%, 40%));
    --csstools-light-dark-toggle--202: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
    --color-text-sidebar-heading: var(--csstools-light-dark-toggle--202, hsl(216, 65%, 20%));
    --csstools-light-dark-toggle--203: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-text-sidebar-action-heading: var(--csstools-light-dark-toggle--203, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--204: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
    --color-text-sidebar-action-heading-hover: var(--csstools-light-dark-toggle--204, hsl(240, 100%, 15%));
    --csstools-light-dark-toggle--205: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-text-sidebar-popover-menu: var(--csstools-light-dark-toggle--205, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--206: var(--csstools-color-scheme--light) hsl(200, 79%, 66%);
    --color-text-url-hover: var(--csstools-light-dark-toggle--206, hsl(200, 100%, 25%));
    --csstools-light-dark-toggle--207: var(--csstools-color-scheme--light) hsl(0, 0%, 52%);
    --color-text-settings-field-hint: var(--csstools-light-dark-toggle--207, hsl(0, 0%, 57%));
    --csstools-light-dark-toggle--208: var(--csstools-color-scheme--light) hsl(236, 33%, 80%);
    --color-text-clear-search-button: var(--csstools-light-dark-toggle--208, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--209: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-text-clear-search-button-hover: var(--csstools-light-dark-toggle--209, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--210: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-text-settings-plus-button: var(--csstools-light-dark-toggle--210, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--211: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-settings-plus-button: var(--csstools-light-dark-toggle--211, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--212: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-settings-plus-button: var(--csstools-light-dark-toggle--212, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--213: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-user-profile-field-name: var(--csstools-light-dark-toggle--213, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--214: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    --color-border-user-profile-table: var(--csstools-light-dark-toggle--214, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--215: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.2);
    --color-border-manage-profile-footer: var(--csstools-light-dark-toggle--215, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--216: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
    --color-border-user-profile-list-container: var(--csstools-light-dark-toggle--216, hsla(0, 0%, 0%, 0.35));
    --csstools-light-dark-toggle--217: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
    --background-color-user-profile-list-container: var(--csstools-light-dark-toggle--217, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--218: var(--csstools-color-scheme--light) hsl(200, 100%, 50%);
    --color-text-link: var(--csstools-light-dark-toggle--218, hsl(210, 94%, 42%));
    --csstools-light-dark-toggle--219: var(--csstools-color-scheme--light) rgba(0, 170, 255, 0.2);
    --color-text-link-decoration: var(--csstools-light-dark-toggle--219, rgba(6, 107, 208, 0.2));
    --csstools-light-dark-toggle--220: var(--csstools-color-scheme--light) hsl(200, 100%, 60%);
    --color-text-link-hover: var(--csstools-light-dark-toggle--220, hsl(212, 100%, 50%));
    --csstools-light-dark-toggle--221: var(--csstools-color-scheme--light) rgba(51, 187, 255, 0.7);
    --color-text-link-decoration-hover: var(--csstools-light-dark-toggle--221, rgba(0, 119, 255, 0.7));
    --csstools-light-dark-toggle--222: var(--csstools-color-scheme--light) hsl(200, 100%, 50%);
    --color-text-link-active: var(--csstools-light-dark-toggle--222, hsl(212, 100%, 30%));
    --csstools-light-dark-toggle--223: var(--csstools-color-scheme--light) hsl(200, 79%, 66%);
    --color-text-generic-link-interactive: var(--csstools-light-dark-toggle--223, #005580);
    --csstools-light-dark-toggle--224: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-background-tippy-box: var(--csstools-light-dark-toggle--224, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--225: var(--csstools-color-scheme--light) hsl(240, 5%, 16%);
    --color-background-dropdown-widget: var(--csstools-light-dark-toggle--225, hsl(240, 20%, 98%));
    --csstools-light-dark-toggle--226: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-border-dropdown-widget: var(--csstools-light-dark-toggle--226, hsla(0, 0%, 0%, 0.4));
    --csstools-light-dark-toggle--227: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-dropdown-widget-button: var(--csstools-light-dark-toggle--227, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--228: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-dropdown-widget-button: var(--csstools-light-dark-toggle--228, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--229: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-disabled-dropdown-widget-button: var(--csstools-light-dark-toggle--229, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--230: var(--csstools-color-scheme--light) hsl(185, 35%, 65%);
    --color-poll-vote: var(--csstools-light-dark-toggle--230, hsl(156, 41%, 40%));
    --csstools-light-dark-toggle--231: var(--csstools-color-scheme--light) hsl(185, 50%, 70%);
    --color-poll-vote-hover: var(--csstools-light-dark-toggle--231, hsl(156, 41%, 40%));
    --csstools-light-dark-toggle--232: var(--csstools-color-scheme--light) hsl(185, 50%, 65%);
    --color-poll-vote-focus: var(--csstools-light-dark-toggle--232, hsl(156, 41%, 40%));
    --csstools-light-dark-toggle--233: var(--csstools-color-scheme--light) hsl(185, 35%, 35%);
    --color-border-poll-vote: var(--csstools-light-dark-toggle--233, hsl(156, 28%, 70%));
    --csstools-light-dark-toggle--234: var(--csstools-color-scheme--light) hsl(185, 40%, 40%);
    --color-border-poll-vote-hover: var(--csstools-light-dark-toggle--234, hsl(156, 30%, 50%));
    --csstools-light-dark-toggle--235: var(--csstools-color-scheme--light) hsl(185, 40%, 50%);
    --color-border-poll-vote-focus: var(--csstools-light-dark-toggle--235, hsl(156, 30%, 50%));
    --csstools-light-dark-toggle--236: var(--csstools-color-scheme--light) hsl(185, 20%, 20%);
    --color-background-poll-vote-hover: var(--csstools-light-dark-toggle--236, var(--color-background-widget-button));
    --csstools-light-dark-toggle--237: var(--csstools-color-scheme--light) hsl(185, 40%, 35%);
    --color-background-poll-vote-focus: var(--csstools-light-dark-toggle--237, hsl(156, 41%, 90%));
    --csstools-light-dark-toggle--238: var(--csstools-color-scheme--light) hsl(236, 15%, 70%);
    --color-poll-names: var(--csstools-light-dark-toggle--238, hsl(0, 0%, 45%));
    --csstools-light-dark-toggle--239: var(--csstools-color-scheme--light) hsl(185, 40%, 35%);
    --color-border-todo-checkbox-hover: var(--csstools-light-dark-toggle--239, hsl(156, 30%, 50%));
    --csstools-light-dark-toggle--240: var(--csstools-color-scheme--light) hsl(185, 40%, 45%);
    --color-border-todo-checkbox-checked: var(--csstools-light-dark-toggle--240, hsl(156, 41%, 40%));
    --csstools-light-dark-toggle--241: var(--csstools-color-scheme--light) hsl(185, 20%, 20%);
    --color-background-todo-checkbox-hover: var(--csstools-light-dark-toggle--241, transparent);
    --csstools-light-dark-toggle--242: var(--csstools-color-scheme--light) hsl(185, 40%, 45%);
    --color-background-todo-checkbox-checked: var(--csstools-light-dark-toggle--242, hsl(156, 41%, 40%));
    --csstools-light-dark-toggle--243: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    --color-kbd-background: var(--csstools-light-dark-toggle--243, hsl(0, 0%, 98%));
    --csstools-light-dark-toggle--244: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    --color-kbd-border: var(--csstools-light-dark-toggle--244, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--245: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-kbd-text: var(--csstools-light-dark-toggle--245, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--246: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-kbd-enter-sends: var(--csstools-light-dark-toggle--246, hsl(0, 0%, 40%));
    --csstools-light-dark-toggle--247: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-realm-enable-spectator-access-link: var(--csstools-light-dark-toggle--247, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--248: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-stream-email: var(--csstools-light-dark-toggle--248, hsl(0, 0%, 98%));
    --csstools-light-dark-toggle--249: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-integration-url: var(--csstools-light-dark-toggle--249, transparent);
    --csstools-light-dark-toggle--250: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-tbody-th-odd: var(--csstools-light-dark-toggle--250, transparent);
    --csstools-light-dark-toggle--251: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-rendered-markdown-thead: var(--csstools-light-dark-toggle--251, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--252: var(--csstools-color-scheme--light) hsl(0, 0%, 33%);
    --color-border-rendered-markdown-table: var(--csstools-light-dark-toggle--252, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--253: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-tab-switcher-ind-tab: var(--csstools-light-dark-toggle--253, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--254: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-tab-switcher-ind-tab-selected: var(--csstools-light-dark-toggle--254, hsl(0, 0%, 53%));
    --csstools-light-dark-toggle--255: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-tab-switcher-ind-tab: var(--csstools-light-dark-toggle--255, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--256: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
    --color-border-tab-switcher-ind-tab-selected: var(--csstools-light-dark-toggle--256, hsl(0, 0%, 47%));
    --csstools-light-dark-toggle--257: var(--csstools-color-scheme--light) hsla(0, 0%, 42%, 0.9);
    --color-text-tab-switcher-ind-tab-disabled: var(--csstools-light-dark-toggle--257, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--258: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-tab-switcher-ind-tab-disabled: var(--csstools-light-dark-toggle--258, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--259: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-background-table-header: var(--csstools-light-dark-toggle--259, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--260: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    --color-background-table-header-sortable-hover: var(--csstools-light-dark-toggle--260, hsl(0, 0%, 95%));
    --csstools-light-dark-toggle--261: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-border-table-striped: var(--csstools-light-dark-toggle--261, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--262: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-border-table-bordered: var(--csstools-light-dark-toggle--262, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--263: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-border-table-subscriber-list: var(--csstools-light-dark-toggle--263, hsl(0, 0%, 87%));
    --csstools-light-dark-toggle--264: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-markdown-code-text: var(--csstools-light-dark-toggle--264, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--265: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.08);
    --color-markdown-code-background: var(--csstools-light-dark-toggle--265, hsla(0, 0%, 0%, 0.06));
    --csstools-light-dark-toggle--266: var(--csstools-color-scheme--light) var(--color-markdown-code-background);
    --color-markdown-code-background-mentions: var(--csstools-light-dark-toggle--266, hsla(0, 0%, 0%, 0.07));
    --csstools-light-dark-toggle--267: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.04);
    --color-markdown-pre-background: var(--csstools-light-dark-toggle--267, hsla(0, 0%, 0%, 0.04));
    --csstools-light-dark-toggle--268: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
    --color-markdown-pre-background-mentions: var(--csstools-light-dark-toggle--268, hsla(0, 0%, 0%, 0.04));
    --csstools-light-dark-toggle--269: var(--csstools-color-scheme--light) hsl(51, 100%, 72%);
    --color-background-search-highlight: var(--csstools-light-dark-toggle--269, hsl(51, 100%, 79%));
    --csstools-light-dark-toggle--270: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-text-search-highlight: var(--csstools-light-dark-toggle--270, currentcolor);
    --csstools-light-dark-toggle--271: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
    --color-text-alert-word: var(--csstools-light-dark-toggle--271, currentcolor);
    --csstools-light-dark-toggle--272: var(--csstools-color-scheme--light) var(--color-text-generic-link);
    --color-markdown-link: var(--csstools-light-dark-toggle--272, hsl(200, 100%, 40%));
    --csstools-light-dark-toggle--273: var(--csstools-color-scheme--light) var(--color-text-generic-link-interactive);
    --color-markdown-link-hover: var(--csstools-light-dark-toggle--273, hsl(200, 100%, 25%));
    --csstools-light-dark-toggle--274: var(--csstools-color-scheme--light) hsl(210, 100%, 25%);
    --color-markdown-link-highlight: var(--csstools-light-dark-toggle--274, hsl(200, 100%, 40%));
    --csstools-light-dark-toggle--275: var(--csstools-color-scheme--light) hsl(210, 100%, 18%);
    --color-markdown-link-highlight-hover: var(--csstools-light-dark-toggle--275, hsl(200, 100%, 25%));
    --csstools-light-dark-toggle--276: var(--csstools-color-scheme--light) hsl(210, 100%, 25%);
    --color-markdown-link-alert-word: var(--csstools-light-dark-toggle--276, hsl(200, 100%, 40%));
    --csstools-light-dark-toggle--277: var(--csstools-color-scheme--light) hsl(210, 100%, 18%);
    --color-markdown-link-alert-word-hover: var(--csstools-light-dark-toggle--277, hsl(200, 100%, 25%));
    --csstools-light-dark-toggle--278: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.03);
    --color-background-image-thumbnail: var(--csstools-light-dark-toggle--278, hsla(0, 0%, 0%, 0.03));
    --csstools-light-dark-toggle--279: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.35);
    --color-background-image-thumbnail-hover: var(--csstools-light-dark-toggle--279, hsla(0, 0%, 0%, 0.3));
    --csstools-light-dark-toggle--280: var(--csstools-color-scheme--light) hsl(180, 5%, 50%);
    --color-icon-bot: var(--csstools-light-dark-toggle--280, hsl(180, 8%, 65%));
    --csstools-light-dark-toggle--281: var(--csstools-color-scheme--light) hsla(217, 41%, 90%, 0.5);
    --color-message-action-visible: var(--csstools-light-dark-toggle--281, hsla(216, 43%, 20%, 0.5));
    --csstools-light-dark-toggle--282: var(--csstools-color-scheme--light) hsl(217, 41%, 90%);
    --color-message-action-interactive: var(--csstools-light-dark-toggle--282, hsl(216, 43%, 20%));
    --csstools-light-dark-toggle--283: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-left-sidebar-follow-icon-hover: var(--csstools-light-dark-toggle--283, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--284: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-left-sidebar-navigation-icon: var(--csstools-light-dark-toggle--284, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--285: var(--csstools-color-scheme--light) hsl(240, 35%, 58%);
    --color-left-sidebar-dm-partners-icon: var(--csstools-light-dark-toggle--285, hsl(240, 30%, 60%));
    --csstools-light-dark-toggle--286: var(--csstools-color-scheme--light) hsl(240, 35%, 38%);
    --color-vdots-hint: var(--csstools-light-dark-toggle--286, hsl(240, 30%, 80%));
    --csstools-light-dark-toggle--287: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    --color-vdots-visible: var(--csstools-light-dark-toggle--287, hsl(240, 30%, 40%));
    --csstools-light-dark-toggle--288: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
    --color-vdots-hover: var(--csstools-light-dark-toggle--288, hsl(240, 100%, 15%));
    --csstools-light-dark-toggle--289: var(--csstools-color-scheme--light) hsl(0, 0%, 80%);
    --color-tab-picker-icon: var(--csstools-light-dark-toggle--289, hsl(200, 100%, 40%));
    --csstools-light-dark-toggle--290: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-copy-button: var(--csstools-light-dark-toggle--290, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--291: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-copy-button-square-bg-hover: var(--csstools-light-dark-toggle--291, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--292: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-copy-button-active: var(--csstools-light-dark-toggle--292, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--293: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-copy-button-square-bg-active: var(--csstools-light-dark-toggle--293, rgba(84, 87, 100, 0.11));
    --csstools-light-dark-toggle--294: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.15);
    --color-message-reaction-border: var(--csstools-light-dark-toggle--294, hsla(0, 0%, 0%, 0.1));
    --csstools-light-dark-toggle--295: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.7);
    --color-message-reaction-border-reacted: var(--csstools-light-dark-toggle--295, hsla(0, 0%, 0%, 0.45));
    --csstools-light-dark-toggle--296: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.3);
    --color-message-reaction-background: var(--csstools-light-dark-toggle--296, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--297: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
    --color-message-reaction-background-reacted: var(--csstools-light-dark-toggle--297, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--298: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.1);
    --color-message-reaction-background-hover: var(--csstools-light-dark-toggle--298, hsl(210, 30%, 96%));
    --csstools-light-dark-toggle--299: var(--csstools-color-scheme--light) transparent;
    --color-message-reaction-shadow-inner: var(--csstools-light-dark-toggle--299, hsla(210, 50%, 50%, 0.08));
    --csstools-light-dark-toggle--300: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
    --color-message-reaction-text: var(--csstools-light-dark-toggle--300, hsl(210, 20%, 25%));
    --csstools-light-dark-toggle--301: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    --color-message-reaction-text-reacted: var(--csstools-light-dark-toggle--301, hsl(210, 20%, 20%));
    --csstools-light-dark-toggle--302: var(--csstools-color-scheme--light) var(--color-message-reaction-text);
    --color-message-reaction-button-text: var(--csstools-light-dark-toggle--302, hsla(210, 20%, 20%, 0.6));
    --csstools-light-dark-toggle--303: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
    --color-zulip-logo: var(--csstools-light-dark-toggle--303, hsla(0, 0%, 0%, 0.34));
    --csstools-light-dark-toggle--304: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-zulip-logo-loading: var(--csstools-light-dark-toggle--304, hsl(0, 0%, 27%));
    --csstools-light-dark-toggle--305: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.6);
    --color-recent-view-loading-spinner: var(--csstools-light-dark-toggle--305, hsl(0, 0%, 27%));
    --csstools-light-dark-toggle--306: var(--csstools-color-scheme--light) hsl(214, 27%, 18%);
    --color-zulip-logo-z: var(--csstools-light-dark-toggle--306, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--307: var(--csstools-color-scheme--light) hsla(240, 44%, 56%, 0.15);
    --color-show-more-less-button-background: var(--csstools-light-dark-toggle--307, hsla(240, 44%, 56%, 0.08));
    --csstools-light-dark-toggle--308: var(--csstools-color-scheme--light) hsla(240, 44%, 56%, 0.25);
    --color-show-more-less-button-background-hover: var(--csstools-light-dark-toggle--308, hsla(240, 44%, 56%, 0.15));
    --csstools-light-dark-toggle--309: var(--csstools-color-scheme--light) hsla(240, 44%, 56%, 0.15);
    --color-show-more-less-button-background-active: var(--csstools-light-dark-toggle--309, hsla(240, 44%, 56%, 0.2));
    --csstools-light-dark-toggle--310: var(--csstools-color-scheme--light) hsl(122, 100%, 81%);
    --color-message-edit-history-text-inserted: var(--csstools-light-dark-toggle--310, hsl(122, 72%, 30%));
    --csstools-light-dark-toggle--311: var(--csstools-color-scheme--light) hsla(120, 64%, 95%, 0.3);
    --color-message-edit-history-background-inserted: var(--csstools-light-dark-toggle--311, hsl(120, 64%, 95%));
    --csstools-light-dark-toggle--312: var(--csstools-color-scheme--light) hsl(0, 90%, 67%);
    --color-message-edit-history-text-deleted: var(--csstools-light-dark-toggle--312, hsl(0, 100%, 50%));
    --csstools-light-dark-toggle--313: var(--csstools-color-scheme--light) hsla(7, 54%, 62%, 0.38);
    --color-message-edit-history-background-deleted: var(--csstools-light-dark-toggle--313, hsl(7, 90%, 92%));
    --csstools-light-dark-toggle--314: var(--csstools-color-scheme--light) hsl(240, 13%, 16%);
    --color-background-direct-mention: var(--csstools-light-dark-toggle--314, hsl(240, 52%, 95%));
    --csstools-light-dark-toggle--315: var(--csstools-color-scheme--light) hsl(180, 13%, 14%);
    --color-background-group-mention: var(--csstools-light-dark-toggle--315, hsl(180, 40%, 94%));
    --csstools-light-dark-toggle--316: var(--csstools-color-scheme--light) hsla(240, 52%, 60%, 0.25);
    --color-background-text-direct-mention: var(--csstools-light-dark-toggle--316, hsla(240, 70%, 70%, 0.2));
    --csstools-light-dark-toggle--317: var(--csstools-color-scheme--light) hsla(240, 52%, 60%, 0.45);
    --color-background-text-hover-direct-mention: var(--csstools-light-dark-toggle--317, hsla(240, 70%, 70%, 0.3));
    --csstools-light-dark-toggle--318: var(--csstools-color-scheme--light) hsla(183, 52%, 40%, 0.2);
    --color-background-text-group-mention: var(--csstools-light-dark-toggle--318, hsla(183, 60%, 45%, 0.18));
    --csstools-light-dark-toggle--319: var(--csstools-color-scheme--light) hsla(183, 52%, 40%, 0.3);
    --color-background-text-hover-group-mention: var(--csstools-light-dark-toggle--319, hsla(183, 60%, 45%, 0.3));
    --csstools-light-dark-toggle--320: var(--csstools-color-scheme--light) hsla(240, 65%, 60%, 0.38);
    --color-background-input-pill: var(--csstools-light-dark-toggle--320, hsl(237, 68%, 94%));
    --csstools-light-dark-toggle--321: var(--csstools-color-scheme--light) hsla(240, 65%, 60%, 0.3);
    --color-background-input-pill-search: var(--csstools-light-dark-toggle--321, hsl(237, 68%, 94%));
    --csstools-light-dark-toggle--322: var(--csstools-color-scheme--light) hsla(240, 52%, 60%, 0.45);
    --color-background-input-pill-hover: var(--csstools-light-dark-toggle--322, hsla(240, 70%, 70%, 0.3));
    --csstools-light-dark-toggle--323: var(--csstools-color-scheme--light) hsla(240, 65%, 60%, 0.6);
    --color-border-input-pill-image: var(--csstools-light-dark-toggle--323, hsla(237, 68%, 94%, 0.5));
    --csstools-light-dark-toggle--324: var(--csstools-color-scheme--light) hsla(240, 65%, 60%, 0.22);
    --color-outline-low-attention-input-pill: var(--csstools-light-dark-toggle--324, hsl(237, 68%, 88%));
    --csstools-light-dark-toggle--325: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.6);
    --color-focus-outline-input-pill: var(--csstools-light-dark-toggle--325, hsl(240, 50%, 50%));
    --csstools-light-dark-toggle--326: var(--csstools-color-scheme--light) hsl(240, 50%, 74%);
    --color-input-pill-close: var(--csstools-light-dark-toggle--326, hsl(240, 60%, 65%));
    --csstools-light-dark-toggle--327: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --color-background-input-pill-exit-hover: var(--csstools-light-dark-toggle--327, hsla(240, 70%, 70%, 0.15));
    --csstools-light-dark-toggle--328: var(--csstools-color-scheme--light) hsl(0, 97%, 25%);
    --color-background-deactivated-user-pill: var(--csstools-light-dark-toggle--328, hsl(8, 96%, 91%));
    --csstools-light-dark-toggle--329: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.7);
    --color-focus-outline-deactivated-user-pill: var(--csstools-light-dark-toggle--329, hsl(4, 75%, 53%));
    --csstools-light-dark-toggle--330: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-close-deactivated-user-pill: var(--csstools-light-dark-toggle--330, hsl(4, 75%, 53%));
    --csstools-light-dark-toggle--331: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --color-background-exit-hover-deactivated-user-pill: var(--csstools-light-dark-toggle--331, hsla(4, 75%, 53%, 0.15));
    --csstools-light-dark-toggle--332: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    --color-background-user-pill: var(--csstools-light-dark-toggle--332, hsla(0, 0%, 100%, 0.85));
    --csstools-light-dark-toggle--333: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-pill-container: var(--csstools-light-dark-toggle--333, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--334: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-pill-container-input-disabled: var(--csstools-light-dark-toggle--334, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--335: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-pill-container: var(--csstools-light-dark-toggle--335, hsla(0, 0%, 0%, 0.15));
    --csstools-light-dark-toggle--336: var(--csstools-color-scheme--light) hsl(147, 40%, 55%);
    --color-background-inbox-no-unreads-illustration: var(--csstools-light-dark-toggle--336, hsl(147, 57%, 25%));
    --csstools-light-dark-toggle--337: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-icon-search-inbox: var(--csstools-light-dark-toggle--337, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--338: var(--csstools-color-scheme--light) hsl(0, 0%, 95%);
    --color-inbox-search-text: var(--csstools-light-dark-toggle--338, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--339: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.2);
    --color-border-inbox-search: var(--csstools-light-dark-toggle--339, hsla(229, 22%, 10%, 0.3));
    --csstools-light-dark-toggle--340: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.4);
    --color-border-inbox-search-hover: var(--csstools-light-dark-toggle--340, hsla(229, 22%, 10%, 0.6));
    --csstools-light-dark-toggle--341: var(--csstools-color-scheme--light) hsl(225, 6%, 10%);
    --color-background-inbox-search: var(--csstools-light-dark-toggle--341, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--342: var(--csstools-color-scheme--light) hsl(225, 6%, 8%);
    --color-background-inbox-search-hover: var(--csstools-light-dark-toggle--342, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--343: var(--csstools-color-scheme--light) hsl(225, 6%, 7%);
    --color-background-inbox-search-focus: var(--csstools-light-dark-toggle--343, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--344: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
    --color-border-inbox-search-focus: var(--csstools-light-dark-toggle--344, hsla(229, 22%, 10%, 0.8));
    --csstools-light-dark-toggle--345: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.4);
    --color-box-shadow-inbox-search-focus: var(--csstools-light-dark-toggle--345, hsla(228, 10%, 20%, 0.3));
    --csstools-light-dark-toggle--346: var(--csstools-color-scheme--light) hsl(0, 0%, 14%);
    --color-background-inbox-row: var(--csstools-light-dark-toggle--346, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--347: var(--csstools-color-scheme--light) rgb(47, 47, 47);
    --color-background-inbox-row-hover: var(--csstools-light-dark-toggle--347, rgb(242, 242, 242));
    --csstools-light-dark-toggle--348: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
    --color-background-button-inbox-selected: var(--csstools-light-dark-toggle--348, hsla(0, 0%, 0%, 0.05));
    --csstools-light-dark-toggle--349: var(--csstools-color-scheme--light) hsl(0, 0%, 20%);
    --color-background-button-inbox-focus: var(--csstools-light-dark-toggle--349, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--350: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-icons-inbox: var(--csstools-light-dark-toggle--350, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--351: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
    --color-folder-header: var(--csstools-light-dark-toggle--351, hsl(216, 43%, 20%));
    --csstools-light-dark-toggle--352: var(--csstools-color-scheme--light) hsl(240, 35%, 60%);
    --color-navbar-icon: var(--csstools-light-dark-toggle--352, hsl(240, 20%, 50%));
    --csstools-light-dark-toggle--353: var(--csstools-color-scheme--light) hsl(240, 55%, 72%);
    --color-navbar-spectator-low-attention-brand-button-text: var(--csstools-light-dark-toggle--353, hsl(240, 40%, 50%));
    --csstools-light-dark-toggle--354: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.1);
    --color-navbar-spectator-low-attention-brand-button-background-hover: var(--csstools-light-dark-toggle--354, hsla(240, 100%, 30%, 0.05));
    --csstools-light-dark-toggle--355: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.13);
    --color-navbar-spectator-low-attention-brand-button-background-active: var(--csstools-light-dark-toggle--355, hsla(240, 100%, 30%, 0.08));
    --csstools-light-dark-toggle--356: var(--csstools-color-scheme--light) hsl(240, 64%, 76%);
    --color-navbar-spectator-medium-attention-brand-button-text: var(--csstools-light-dark-toggle--356, hsl(240, 40%, 40%));
    --csstools-light-dark-toggle--357: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.12);
    --color-navbar-spectator-medium-attention-brand-button-background: var(--csstools-light-dark-toggle--357, hsla(244, 64%, 47%, 0.1));
    --csstools-light-dark-toggle--358: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.17);
    --color-navbar-spectator-medium-attention-brand-button-background-hover: var(--csstools-light-dark-toggle--358, hsla(244, 64%, 47%, 0.15));
    --csstools-light-dark-toggle--359: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.12);
    --color-navbar-spectator-medium-attention-brand-button-background-active: var(--csstools-light-dark-toggle--359, hsla(244, 64%, 47%, 0.18));
    --csstools-light-dark-toggle--360: var(--csstools-color-scheme--light) hsl(0, 0%, 50%);
    --color-gear-menu-lighter-text: var(--csstools-light-dark-toggle--360, hsl(0, 0%, 40%));
    --csstools-light-dark-toggle--361: var(--csstools-color-scheme--light) hsl(217, 100%, 65%);
    --color-gear-menu-blue-text: var(--csstools-light-dark-toggle--361, hsl(217, 100%, 50%));
    --csstools-light-dark-toggle--362: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.04);
    --color-header-button-hover: var(--csstools-light-dark-toggle--362, hsla(0, 0%, 0%, 0.05));
    --csstools-light-dark-toggle--363: var(--csstools-color-scheme--light) rgb(42, 42, 42);
    --color-header-button-hover-no-alpha: var(--csstools-light-dark-toggle--363, rgb(235, 235, 235));
    --csstools-light-dark-toggle--364: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --color-header-button-focus: var(--csstools-light-dark-toggle--364, hsla(0, 0%, 0%, 0.08));
    --csstools-light-dark-toggle--365: var(--csstools-color-scheme--light) rgb(49, 49, 49);
    --color-header-button-focus-no-alpha: var(--csstools-light-dark-toggle--365, rgb(228, 228, 228));
    --csstools-light-dark-toggle--366: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    --color-fill-user-invite-copy-icon: var(--csstools-light-dark-toggle--366, hsl(0, 0%, 47%));
    --csstools-light-dark-toggle--367: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-zulip-button: var(--csstools-light-dark-toggle--367, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--368: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.15);
    --color-background-zulip-button-hover: var(--csstools-light-dark-toggle--368, var(--color-background-zulip-button));
    --csstools-light-dark-toggle--369: var(--csstools-color-scheme--light) var(--color-background-zulip-button-hover);
    --color-background-zulip-button-active: var(--csstools-light-dark-toggle--369, hsl(0, 0%, 95%));
    --csstools-light-dark-toggle--370: var(--csstools-color-scheme--light) var(--color-background-zulip-button);
    --color-background-zulip-button-disabled: var(--csstools-light-dark-toggle--370, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--371: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-zulip-button: var(--csstools-light-dark-toggle--371, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--372: var(--csstools-color-scheme--light) var(--color-border-zulip-button);
    --color-border-zulip-button-interactive: var(--csstools-light-dark-toggle--372, hsl(0, 0%, 60%));
    --csstools-light-dark-toggle--373: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.4);
    --color-border-rendered-checkbox: var(--csstools-light-dark-toggle--373, hsla(0, 0%, 0%, 0.6));
    --csstools-light-dark-toggle--374: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-emoji-picker-popover: var(--csstools-light-dark-toggle--374, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--375: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-emoji-picker-popover-tab-item-active: var(--csstools-light-dark-toggle--375, hsla(0, 0%, 100%, 0.2));
    --csstools-light-dark-toggle--376: var(--csstools-color-scheme--light) hsla(212, 28%, 8%, 0.75);
    --color-background-emoji-picker-emoji-focus: var(--csstools-light-dark-toggle--376, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--377: var(--csstools-color-scheme--light) hsl(0, 0%, 98%);
    --color-box-shadow-emoji-picker-emoji-focus: var(--csstools-light-dark-toggle--377, transparent);
    --csstools-light-dark-toggle--378: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
    --color-background-emoji-picker-emoji-reacted: var(--csstools-light-dark-toggle--378, hsl(195, 50%, 95%));
    --csstools-light-dark-toggle--379: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
    --color-border-emoji-picker-emoji-reacted: var(--csstools-light-dark-toggle--379, hsl(195, 52%, 79%));
    --csstools-light-dark-toggle--380: var(--csstools-color-scheme--light) hsla(0, 0%, 20%, 0.7);
    --color-background-emoji-picker-emoji-reacted-focus: var(--csstools-light-dark-toggle--380, hsl(195, 55%, 88%));
    --csstools-light-dark-toggle--381: var(--csstools-color-scheme--light) hsl(212, 33%, 11%);
    --color-border-emoji-picker-tippy-arrow: var(--csstools-light-dark-toggle--381, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--382: var(--csstools-color-scheme--light) hsl(0, 0%, 75%);
    --color-dropdown-item: var(--csstools-light-dark-toggle--382, hsl(0, 0%, 20%));
    --csstools-light-dark-toggle--383: var(--csstools-color-scheme--light) hsl(0, 0%, 90%);
    --color-active-dropdown-item: var(--csstools-light-dark-toggle--383, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--384: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --background-color-active-dropdown-item: var(--csstools-light-dark-toggle--384, hsla(220, 12%, 5%, 0.05));
    --csstools-light-dark-toggle--385: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
    --background-color-active-typeahead-item: var(--csstools-light-dark-toggle--385, hsla(220, 12%, 5%, 0.05));
    --csstools-light-dark-toggle--386: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    --color-outline-button-focus: var(--csstools-light-dark-toggle--386, hsl(0, 0%, 0%));
    --csstools-light-dark-toggle--387: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.21);
    --color-inner-shadow-action-button: var(--csstools-light-dark-toggle--387, rgba(0, 0, 0, 0.2));
    --csstools-light-dark-toggle--388: var(--csstools-color-scheme--light) hsl(229, 9%, 36%);
    --color-background-neutral-solid-action-button: var(--csstools-light-dark-toggle--388, hsl(229, 7%, 50%));
    --csstools-light-dark-toggle--389: var(--csstools-color-scheme--light) hsl(229, 8%, 42%);
    --color-background-neutral-solid-action-button-hover: var(--csstools-light-dark-toggle--389, hsl(229, 7%, 47%));
    --csstools-light-dark-toggle--390: var(--csstools-color-scheme--light) hsl(229, 9%, 36%);
    --color-background-neutral-solid-action-button-active: var(--csstools-light-dark-toggle--390, hsl(232, 7%, 44%));
    --csstools-light-dark-toggle--391: var(--csstools-color-scheme--light) hsl(231, 11%, 76%);
    --color-text-neutral-subtle-action-button: var(--csstools-light-dark-toggle--391, hsl(229, 12%, 25%));
    --csstools-light-dark-toggle--392: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    --color-background-neutral-subtle-action-button: var(--csstools-light-dark-toggle--392, rgba(119, 122, 136, 0.12));
    --csstools-light-dark-toggle--393: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.17);
    --color-background-neutral-subtle-action-button-hover: var(--csstools-light-dark-toggle--393, rgba(119, 122, 136, 0.17));
    --csstools-light-dark-toggle--394: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    --color-background-neutral-subtle-action-button-active: var(--csstools-light-dark-toggle--394, rgba(119, 122, 136, 0.22));
    --csstools-light-dark-toggle--395: var(--csstools-color-scheme--light) hsl(229, 10%, 70%);
    --color-text-neutral-text-action-button: var(--csstools-light-dark-toggle--395, hsl(229, 9%, 36%));
    --csstools-light-dark-toggle--396: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-background-neutral-text-action-button-hover: var(--csstools-light-dark-toggle--396, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--397: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-background-neutral-text-action-button-active: var(--csstools-light-dark-toggle--397, rgba(84, 87, 100, 0.11));
    --csstools-light-dark-toggle--398: var(--csstools-color-scheme--light) hsl(261, 79%, 43%);
    --color-background-brand-solid-action-button: var(--csstools-light-dark-toggle--398, hsl(254, 99%, 68%));
    --csstools-light-dark-toggle--399: var(--csstools-color-scheme--light) hsl(258, 66%, 51%);
    --color-background-brand-solid-action-button-hover: var(--csstools-light-dark-toggle--399, hsl(255, 81%, 61%));
    --csstools-light-dark-toggle--400: var(--csstools-color-scheme--light) hsl(261, 79%, 43%);
    --color-background-brand-solid-action-button-active: var(--csstools-light-dark-toggle--400, hsl(258, 66%, 51%));
    --csstools-light-dark-toggle--401: var(--csstools-color-scheme--light) hsl(244, 96%, 82%);
    --color-text-brand-subtle-action-button: var(--csstools-light-dark-toggle--401, hsl(264, 95%, 34%));
    --csstools-light-dark-toggle--402: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
    --color-background-brand-subtle-action-button: var(--csstools-light-dark-toggle--402, rgba(130, 93, 254, 0.12));
    --csstools-light-dark-toggle--403: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.17);
    --color-background-brand-subtle-action-button-hover: var(--csstools-light-dark-toggle--403, rgba(130, 93, 254, 0.17));
    --csstools-light-dark-toggle--404: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
    --color-background-brand-subtle-action-button-active: var(--csstools-light-dark-toggle--404, rgba(130, 93, 254, 0.22));
    --csstools-light-dark-toggle--405: var(--csstools-color-scheme--light) hsl(246, 96%, 79%);
    --color-text-brand-text-action-button: var(--csstools-light-dark-toggle--405, hsl(255, 54%, 50%));
    --csstools-light-dark-toggle--406: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.14);
    --color-background-brand-text-action-button-hover: var(--csstools-light-dark-toggle--406, rgba(45, 0, 112, 0.05));
    --csstools-light-dark-toggle--407: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.18);
    --color-background-brand-text-action-button-active: var(--csstools-light-dark-toggle--407, rgba(45, 0, 112, 0.1));
    --csstools-light-dark-toggle--408: var(--csstools-color-scheme--light) hsl(228, 75%, 47%);
    --color-background-info-solid-action-button: var(--csstools-light-dark-toggle--408, hsl(226, 100%, 62%));
    --csstools-light-dark-toggle--409: var(--csstools-color-scheme--light) hsl(222, 98%, 79%);
    --color-text-info-subtle-action-button: var(--csstools-light-dark-toggle--409, hsl(231, 82%, 36%));
    --csstools-light-dark-toggle--410: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.12);
    --color-background-info-subtle-action-button: var(--csstools-light-dark-toggle--410, rgba(61, 106, 255, 0.12));
    --csstools-light-dark-toggle--411: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.17);
    --color-background-info-subtle-action-button-hover: var(--csstools-light-dark-toggle--411, rgba(61, 106, 255, 0.17));
    --csstools-light-dark-toggle--412: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.12);
    --color-background-info-subtle-action-button-active: var(--csstools-light-dark-toggle--412, rgba(61, 106, 255, 0.22));
    --csstools-light-dark-toggle--413: var(--csstools-color-scheme--light) hsl(222, 97%, 75%);
    --color-text-info-text-action-button: var(--csstools-light-dark-toggle--413, hsl(227, 70%, 46%));
    --csstools-light-dark-toggle--414: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.12);
    --color-background-info-text-action-button-hover: var(--csstools-light-dark-toggle--414, rgba(5, 3, 124, 0.05));
    --csstools-light-dark-toggle--415: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.17);
    --color-background-info-text-action-button-active: var(--csstools-light-dark-toggle--415, rgba(5, 3, 124, 0.09));
    --csstools-light-dark-toggle--416: var(--csstools-color-scheme--light) hsl(144, 84%, 22%);
    --color-background-success-solid-action-button: var(--csstools-light-dark-toggle--416, hsl(146, 90%, 27%));
    --csstools-light-dark-toggle--417: var(--csstools-color-scheme--light) hsl(135, 56%, 63%);
    --color-text-success-subtle-action-button: var(--csstools-light-dark-toggle--417, hsl(144, 88%, 16%));
    --csstools-light-dark-toggle--418: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.12);
    --color-background-success-subtle-action-button: var(--csstools-light-dark-toggle--418, rgba(7, 131, 61, 0.13));
    --csstools-light-dark-toggle--419: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.17);
    --color-background-success-subtle-action-button-hover: var(--csstools-light-dark-toggle--419, rgba(7, 131, 61, 0.18));
    --csstools-light-dark-toggle--420: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.12);
    --color-background-success-subtle-action-button-active: var(--csstools-light-dark-toggle--420, rgba(7, 131, 61, 0.23));
    --csstools-light-dark-toggle--421: var(--csstools-color-scheme--light) hsl(136, 47%, 55%);
    --color-text-success-text-action-button: var(--csstools-light-dark-toggle--421, hsl(146, 90%, 27%));
    --csstools-light-dark-toggle--422: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.12);
    --color-background-success-text-action-button-hover: var(--csstools-light-dark-toggle--422, rgba(9, 103, 47, 0.08));
    --csstools-light-dark-toggle--423: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.17);
    --color-background-success-text-action-button-active: var(--csstools-light-dark-toggle--423, rgba(9, 103, 47, 0.12));
    --csstools-light-dark-toggle--424: var(--csstools-color-scheme--light) rgba(0, 0, 0, 0.9);
    --color-text-warning-solid-action-button: var(--csstools-light-dark-toggle--424, rgba(0, 0, 0, 0.88));
    --csstools-light-dark-toggle--425: var(--csstools-color-scheme--light) hsl(39, 89%, 45%);
    --color-background-warning-solid-action-button: var(--csstools-light-dark-toggle--425, hsl(40, 99%, 62%));
    --csstools-light-dark-toggle--426: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
    --color-background-warning-solid-action-button-hover: var(--csstools-light-dark-toggle--426, hsl(40, 94%, 56%));
    --csstools-light-dark-toggle--427: var(--csstools-color-scheme--light) hsl(39, 89%, 45%);
    --color-background-warning-solid-action-button-active: var(--csstools-light-dark-toggle--427, hsl(41, 98%, 46%));
    --csstools-light-dark-toggle--428: var(--csstools-color-scheme--light) hsl(40, 94%, 56%);
    --color-text-warning-subtle-action-button: var(--csstools-light-dark-toggle--428, hsl(34, 89%, 25%));
    --csstools-light-dark-toggle--429: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.12);
    --color-background-warning-subtle-action-button: var(--csstools-light-dark-toggle--429, rgba(232, 159, 2, 0.18));
    --csstools-light-dark-toggle--430: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.17);
    --color-background-warning-subtle-action-button-hover: var(--csstools-light-dark-toggle--430, rgba(232, 159, 2, 0.23));
    --csstools-light-dark-toggle--431: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.12);
    --color-background-warning-subtle-action-button-active: var(--csstools-light-dark-toggle--431, rgba(232, 159, 2, 0.28));
    --csstools-light-dark-toggle--432: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
    --color-text-warning-text-action-button: var(--csstools-light-dark-toggle--432, hsl(37, 94%, 34%));
    --csstools-light-dark-toggle--433: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.12);
    --color-background-warning-text-action-button-hover: var(--csstools-light-dark-toggle--433, rgba(168, 106, 5, 0.1));
    --csstools-light-dark-toggle--434: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.17);
    --color-background-warning-text-action-button-active: var(--csstools-light-dark-toggle--434, rgba(168, 106, 5, 0.14));
    --csstools-light-dark-toggle--435: var(--csstools-color-scheme--light) hsl(2, 74%, 47%);
    --color-background-danger-solid-action-button: var(--csstools-light-dark-toggle--435, hsl(4, 75%, 51%));
    --csstools-light-dark-toggle--436: var(--csstools-color-scheme--light) hsl(4, 75%, 53%);
    --color-background-danger-solid-action-button-hover: var(--csstools-light-dark-toggle--436, hsl(2, 74%, 47%));
    --csstools-light-dark-toggle--437: var(--csstools-color-scheme--light) hsl(2, 92%, 33%);
    --color-background-danger-solid-action-button-active: var(--csstools-light-dark-toggle--437, hsl(359, 93%, 39%));
    --csstools-light-dark-toggle--438: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-text-danger-subtle-action-button: var(--csstools-light-dark-toggle--438, hsl(359, 94%, 35%));
    --csstools-light-dark-toggle--439: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.12);
    --color-background-danger-subtle-action-button: var(--csstools-light-dark-toggle--439, rgba(225, 57, 45, 0.13));
    --csstools-light-dark-toggle--440: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.17);
    --color-background-danger-subtle-action-button-hover: var(--csstools-light-dark-toggle--440, rgba(225, 57, 45, 0.18));
    --csstools-light-dark-toggle--441: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.12);
    --color-background-danger-subtle-action-button-active: var(--csstools-light-dark-toggle--441, rgba(225, 57, 45, 0.23));
    --csstools-light-dark-toggle--442: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-text-danger-text-action-button: var(--csstools-light-dark-toggle--442, hsl(359, 93%, 39%));
    --csstools-light-dark-toggle--443: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.12);
    --color-background-danger-text-action-button-hover: var(--csstools-light-dark-toggle--443, rgba(192, 7, 10, 0.09));
    --csstools-light-dark-toggle--444: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.17);
    --color-background-danger-text-action-button-active: var(--csstools-light-dark-toggle--444, rgba(192, 7, 10, 0.13));
    --csstools-light-dark-toggle--445: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-text-neutral-icon-button: var(--csstools-light-dark-toggle--445, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--446: var(--csstools-color-scheme--light) hsl(229, 10%, 70%);
    --color-text-neutral-icon-button-hover: var(--csstools-light-dark-toggle--446, hsl(229, 9%, 36%));
    --csstools-light-dark-toggle--447: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    --color-text-neutral-icon-button-active: var(--csstools-light-dark-toggle--447, rgba(84, 87, 100, 0.7));
    --csstools-light-dark-toggle--448: var(--csstools-color-scheme--light) hsl(229, 10%, 70%);
    --color-text-neutral-icon-button-square-active: var(--csstools-light-dark-toggle--448, hsl(229, 9%, 36%));
    --csstools-light-dark-toggle--449: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
    --color-background-neutral-icon-button-square-hover: var(--csstools-light-dark-toggle--449, rgba(84, 87, 100, 0.07));
    --csstools-light-dark-toggle--450: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    --color-background-neutral-icon-button-square-active: var(--csstools-light-dark-toggle--450, rgba(84, 87, 100, 0.11));
    --csstools-light-dark-toggle--451: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.7);
    --color-text-brand-icon-button: var(--csstools-light-dark-toggle--451, rgba(93, 59, 196, 0.7));
    --csstools-light-dark-toggle--452: var(--csstools-color-scheme--light) hsl(246, 96%, 79%);
    --color-text-brand-icon-button-hover: var(--csstools-light-dark-toggle--452, hsl(255, 54%, 50%));
    --csstools-light-dark-toggle--453: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.7);
    --color-text-brand-icon-button-active: var(--csstools-light-dark-toggle--453, rgba(93, 59, 196, 0.7));
    --csstools-light-dark-toggle--454: var(--csstools-color-scheme--light) hsl(246, 96%, 79%);
    --color-text-brand-icon-button-square-active: var(--csstools-light-dark-toggle--454, hsl(255, 54%, 50%));
    --csstools-light-dark-toggle--455: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.14);
    --color-background-brand-icon-button-square-hover: var(--csstools-light-dark-toggle--455, rgba(45, 0, 112, 0.05));
    --csstools-light-dark-toggle--456: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.18);
    --color-background-brand-icon-button-square-active: var(--csstools-light-dark-toggle--456, rgba(45, 0, 112, 0.1));
    --csstools-light-dark-toggle--457: var(--csstools-color-scheme--light) rgba(129, 167, 253, 0.7);
    --color-text-info-icon-button: var(--csstools-light-dark-toggle--457, rgba(35, 71, 199, 0.7));
    --csstools-light-dark-toggle--458: var(--csstools-color-scheme--light) hsl(222, 97%, 75%);
    --color-text-info-icon-button-hover: var(--csstools-light-dark-toggle--458, hsl(227, 70%, 46%));
    --csstools-light-dark-toggle--459: var(--csstools-color-scheme--light) rgba(129, 167, 253, 0.7);
    --color-text-info-icon-button-active: var(--csstools-light-dark-toggle--459, rgba(35, 71, 199, 0.7));
    --csstools-light-dark-toggle--460: var(--csstools-color-scheme--light) hsl(222, 97%, 75%);
    --color-text-info-icon-button-square-active: var(--csstools-light-dark-toggle--460, hsl(227, 70%, 46%));
    --csstools-light-dark-toggle--461: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.12);
    --color-background-info-icon-button-square-hover: var(--csstools-light-dark-toggle--461, rgba(5, 3, 124, 0.05));
    --csstools-light-dark-toggle--462: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.17);
    --color-background-info-icon-button-square-active: var(--csstools-light-dark-toggle--462, rgba(5, 3, 124, 0.09));
    --csstools-light-dark-toggle--463: var(--csstools-color-scheme--light) rgba(86, 194, 115, 0.7);
    --color-text-success-icon-button: var(--csstools-light-dark-toggle--463, rgba(7, 131, 61, 0.7));
    --csstools-light-dark-toggle--464: var(--csstools-color-scheme--light) hsl(136, 47%, 55%);
    --color-text-success-icon-button-hover: var(--csstools-light-dark-toggle--464, hsl(146, 90%, 27%));
    --csstools-light-dark-toggle--465: var(--csstools-color-scheme--light) rgba(86, 194, 115, 0.7);
    --color-text-success-icon-button-active: var(--csstools-light-dark-toggle--465, rgba(7, 131, 61, 0.7));
    --csstools-light-dark-toggle--466: var(--csstools-color-scheme--light) hsl(136, 47%, 55%);
    --color-text-success-icon-button-square-active: var(--csstools-light-dark-toggle--466, hsl(146, 90%, 27%));
    --csstools-light-dark-toggle--467: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.12);
    --color-background-success-icon-button-square-hover: var(--csstools-light-dark-toggle--467, rgba(9, 103, 47, 0.08));
    --csstools-light-dark-toggle--468: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.17);
    --color-background-success-icon-button-square-active: var(--csstools-light-dark-toggle--468, rgba(9, 103, 47, 0.12));
    --csstools-light-dark-toggle--469: var(--csstools-color-scheme--light) rgba(232, 159, 2, 0.7);
    --color-text-warning-icon-button: var(--csstools-light-dark-toggle--469, rgba(168, 106, 5, 0.7));
    --csstools-light-dark-toggle--470: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
    --color-text-warning-icon-button-hover: var(--csstools-light-dark-toggle--470, hsl(37, 94%, 34%));
    --csstools-light-dark-toggle--471: var(--csstools-color-scheme--light) rgba(232, 159, 2, 0.7);
    --color-text-warning-icon-button-active: var(--csstools-light-dark-toggle--471, rgba(168, 106, 5, 0.7));
    --csstools-light-dark-toggle--472: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
    --color-text-warning-icon-button-square-active: var(--csstools-light-dark-toggle--472, hsl(37, 94%, 34%));
    --csstools-light-dark-toggle--473: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.12);
    --color-background-warning-icon-button-square-hover: var(--csstools-light-dark-toggle--473, rgba(168, 106, 5, 0.1));
    --csstools-light-dark-toggle--474: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.17);
    --color-background-warning-icon-button-square-active: var(--csstools-light-dark-toggle--474, rgba(168, 106, 5, 0.14));
    --csstools-light-dark-toggle--475: var(--csstools-color-scheme--light) rgba(255, 138, 122, 0.7);
    --color-text-danger-icon-button: var(--csstools-light-dark-toggle--475, rgba(192, 7, 10, 0.7));
    --csstools-light-dark-toggle--476: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-text-danger-icon-button-hover: var(--csstools-light-dark-toggle--476, hsl(359, 93%, 39%));
    --csstools-light-dark-toggle--477: var(--csstools-color-scheme--light) rgba(255, 138, 122, 0.7);
    --color-text-danger-icon-button-active: var(--csstools-light-dark-toggle--477, rgba(192, 7, 10, 0.7));
    --csstools-light-dark-toggle--478: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-text-danger-icon-button-square-active: var(--csstools-light-dark-toggle--478, hsl(359, 93%, 39%));
    --csstools-light-dark-toggle--479: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.12);
    --color-background-danger-icon-button-square-hover: var(--csstools-light-dark-toggle--479, rgba(192, 7, 10, 0.09));
    --csstools-light-dark-toggle--480: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.17);
    --color-background-danger-icon-button-square-active: var(--csstools-light-dark-toggle--480, rgba(192, 7, 10, 0.13));
    --csstools-light-dark-toggle--481: var(--csstools-color-scheme--light) hsl(231, 11%, 76%);
    --color-text-neutral-banner: var(--csstools-light-dark-toggle--481, hsl(229, 12%, 25%));
    --csstools-light-dark-toggle--482: var(--csstools-color-scheme--light) rgba(162, 162, 174, 0.4);
    --color-border-neutral-banner: var(--csstools-light-dark-toggle--482, rgba(75, 75, 78, 0.4));
    --csstools-light-dark-toggle--483: var(--csstools-color-scheme--light) hsl(240, 7%, 17%);
    --color-background-neutral-banner: var(--csstools-light-dark-toggle--483, hsl(240, 7%, 93%));
    --csstools-light-dark-toggle--484: var(--csstools-color-scheme--light) hsl(244, 96%, 82%);
    --color-text-brand-banner: var(--csstools-light-dark-toggle--484, hsl(264, 95%, 34%));
    --csstools-light-dark-toggle--485: var(--csstools-color-scheme--light) rgba(216, 207, 247, 0.4);
    --color-border-brand-banner: var(--csstools-light-dark-toggle--485, rgba(87, 51, 204, 0.4));
    --csstools-light-dark-toggle--486: var(--csstools-color-scheme--light) hsl(254, 49%, 16%);
    --color-background-brand-banner: var(--csstools-light-dark-toggle--486, hsl(254, 42%, 94%));
    --csstools-light-dark-toggle--487: var(--csstools-color-scheme--light) hsl(221, 93%, 89%);
    --color-text-info-banner: var(--csstools-light-dark-toggle--487, hsl(241, 95%, 25%));
    --csstools-light-dark-toggle--488: var(--csstools-color-scheme--light) rgba(130, 184, 222, 0.4);
    --color-border-info-banner: var(--csstools-light-dark-toggle--488, rgba(38, 81, 110, 0.4));
    --csstools-light-dark-toggle--489: var(--csstools-color-scheme--light) hsl(204, 100%, 12%);
    --color-background-info-banner: var(--csstools-light-dark-toggle--489, hsl(204, 58%, 92%));
    --csstools-light-dark-toggle--490: var(--csstools-color-scheme--light) hsl(135, 56%, 63%);
    --color-text-success-banner: var(--csstools-light-dark-toggle--490, hsl(144, 88%, 16%));
    --csstools-light-dark-toggle--491: var(--csstools-color-scheme--light) rgba(74, 191, 131, 0.4);
    --color-border-success-banner: var(--csstools-light-dark-toggle--491, rgba(27, 100, 60, 0.4));
    --csstools-light-dark-toggle--492: var(--csstools-color-scheme--light) hsl(146, 90%, 7%);
    --color-background-success-banner: var(--csstools-light-dark-toggle--492, hsl(147, 43%, 92%));
    --csstools-light-dark-toggle--493: var(--csstools-color-scheme--light) hsl(40, 94%, 56%);
    --color-text-warning-banner: var(--csstools-light-dark-toggle--493, hsl(34, 89%, 25%));
    --csstools-light-dark-toggle--494: var(--csstools-color-scheme--light) rgba(206, 186, 130, 0.4);
    --color-border-warning-banner: var(--csstools-light-dark-toggle--494, rgba(99, 77, 39, 0.4));
    --csstools-light-dark-toggle--495: var(--csstools-color-scheme--light) hsl(50, 100%, 10%);
    --color-background-warning-banner: var(--csstools-light-dark-toggle--495, hsl(50, 75%, 92%));
    --csstools-light-dark-toggle--496: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    --color-text-danger-banner: var(--csstools-light-dark-toggle--496, hsl(359, 94%, 35%));
    --csstools-light-dark-toggle--497: var(--csstools-color-scheme--light) rgba(237, 145, 140, 0.4);
    --color-border-danger-banner: var(--csstools-light-dark-toggle--497, rgba(132, 41, 36, 0.4));
    --csstools-light-dark-toggle--498: var(--csstools-color-scheme--light) hsl(0, 52%, 18%);
    --color-background-danger-banner: var(--csstools-light-dark-toggle--498, hsl(0, 35%, 92%));
    --csstools-light-dark-toggle--499: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-legacy-input: var(--csstools-light-dark-toggle--499, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--500: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    --color-border-legacy-input: var(--csstools-light-dark-toggle--500, hsl(0, 0%, 80%));
    --csstools-light-dark-toggle--501: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
    --color-border-legacy-input-focus: var(--csstools-light-dark-toggle--501, hsla(206, 80%, 62%, 0.8));
    --csstools-light-dark-toggle--502: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-disabled-settings-select: var(--csstools-light-dark-toggle--502, hsl(0, 0%, 93%));
    --csstools-light-dark-toggle--503: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    --color-background-disabled-modal-select: var(--csstools-light-dark-toggle--503, hsl(0, 0%, 90%));
    --csstools-light-dark-toggle--504: var(--csstools-color-scheme--light) hsl(0, 0%, 95%);
    --color-text-input: var(--csstools-light-dark-toggle--504, hsl(0, 0%, 14%));
    --csstools-light-dark-toggle--505: var(--csstools-color-scheme--light) hsl(225, 6%, 10%);
    --color-background-input: var(--csstools-light-dark-toggle--505, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--506: var(--csstools-color-scheme--light) hsl(225, 6%, 7%);
    --color-background-input-focus: var(--csstools-light-dark-toggle--506, hsl(0, 0%, 100%));
    --csstools-light-dark-toggle--507: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.2);
    --color-outline-input: var(--csstools-light-dark-toggle--507, rgba(20, 22, 31, 0.3));
    --csstools-light-dark-toggle--508: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.4);
    --color-outline-input-hover: var(--csstools-light-dark-toggle--508, rgba(20, 22, 31, 0.6));
    --csstools-light-dark-toggle--509: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.5);
    --color-outline-input-focus: var(--csstools-light-dark-toggle--509, rgba(20, 22, 31, 0.8));
    --csstools-light-dark-toggle--510: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.4);
    --color-box-shadow-input-focus: var(--csstools-light-dark-toggle--510, rgba(46, 48, 56, 0.3));
    --csstools-light-dark-toggle--511: var(--csstools-color-scheme--light) hsl(147, 51%, 80%);
    --color-success-main-view-banner: var(--csstools-light-dark-toggle--511, hsl(147, 57%, 25%));
    --csstools-light-dark-toggle--512: var(--csstools-color-scheme--light) hsl(147, 100%, 8%);
    --color-background-success-main-view-banner: var(--csstools-light-dark-toggle--512, hsl(147, 43%, 92%));
    --csstools-light-dark-toggle--513: var(--csstools-color-scheme--light) hsla(149, 48%, 52%, 0.4);
    --color-border-success-main-view-banner: var(--csstools-light-dark-toggle--513, hsla(147, 57%, 25%, 0.4));
    --csstools-light-dark-toggle--514: var(--csstools-color-scheme--light) hsla(147, 51%, 55%, 0.5);
    --color-success-main-view-banner-close-button: var(--csstools-light-dark-toggle--514, hsla(147, 57%, 25%, 0.5));
    --csstools-light-dark-toggle--515: var(--csstools-color-scheme--light) hsl(147, 51%, 55%);
    --color-success-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--515, hsl(147, 57%, 25%));
    --csstools-light-dark-toggle--516: var(--csstools-color-scheme--light) hsla(147, 51%, 55%, 0.75);
    --color-success-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--516, hsla(147, 57%, 25%, 0.75));
    --csstools-light-dark-toggle--517: var(--csstools-color-scheme--light) hsla(147, 51%, 55%, 0.1);
    --color-background-success-main-view-banner-action-button: var(--csstools-light-dark-toggle--517, hsla(147, 57%, 25%, 0.1));
    --csstools-light-dark-toggle--518: var(--csstools-color-scheme--light) hsla(147, 51%, 55%, 0.15);
    --color-background-success-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--518, hsla(147, 57%, 25%, 0.12));
    --csstools-light-dark-toggle--519: var(--csstools-color-scheme--light) hsla(147, 51%, 55%, 0.2);
    --color-background-success-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--519, hsla(147, 57%, 25%, 0.15));
    --csstools-light-dark-toggle--520: var(--csstools-color-scheme--light) hsl(50, 45%, 80%);
    --color-warning-main-view-banner: var(--csstools-light-dark-toggle--520, hsl(38, 44%, 27%));
    --csstools-light-dark-toggle--521: var(--csstools-color-scheme--light) hsl(53, 100%, 11%);
    --color-background-warning-main-view-banner: var(--csstools-light-dark-toggle--521, hsl(50, 75%, 92%));
    --csstools-light-dark-toggle--522: var(--csstools-color-scheme--light) hsla(38, 44%, 60%, 0.4);
    --color-border-warning-main-view-banner: var(--csstools-light-dark-toggle--522, hsla(38, 44%, 27%, 0.4));
    --csstools-light-dark-toggle--523: var(--csstools-color-scheme--light) hsla(50, 45%, 61%, 0.5);
    --color-warning-main-view-banner-close-button: var(--csstools-light-dark-toggle--523, hsla(38, 44%, 27%, 0.5));
    --csstools-light-dark-toggle--524: var(--csstools-color-scheme--light) hsl(50, 45%, 61%);
    --color-warning-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--524, hsl(38, 44%, 27%));
    --csstools-light-dark-toggle--525: var(--csstools-color-scheme--light) hsla(50, 45%, 61%, 0.75);
    --color-warning-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--525, hsla(38, 44%, 27%, 0.75));
    --csstools-light-dark-toggle--526: var(--csstools-color-scheme--light) hsl(50, 45%, 61%);
    --color-warning-main-view-banner-action-button: var(--csstools-light-dark-toggle--526, inherit);
    --csstools-light-dark-toggle--527: var(--csstools-color-scheme--light) hsla(50, 45%, 61%, 0.1);
    --color-background-warning-main-view-banner-action-button: var(--csstools-light-dark-toggle--527, hsla(38, 44%, 27%, 0.1));
    --csstools-light-dark-toggle--528: var(--csstools-color-scheme--light) hsla(50, 45%, 61%, 0.15);
    --color-background-warning-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--528, hsla(38, 44%, 27%, 0.12));
    --csstools-light-dark-toggle--529: var(--csstools-color-scheme--light) hsla(50, 45%, 61%, 0.2);
    --color-background-warning-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--529, hsla(38, 44%, 27%, 0.15));
    --csstools-light-dark-toggle--530: var(--csstools-color-scheme--light) hsl(3, 73%, 80%);
    --color-error-main-view-banner: var(--csstools-light-dark-toggle--530, hsl(4, 58%, 33%));
    --csstools-light-dark-toggle--531: var(--csstools-color-scheme--light) hsl(0, 60%, 19%);
    --color-background-error-main-view-banner: var(--csstools-light-dark-toggle--531, hsl(4, 35%, 90%));
    --csstools-light-dark-toggle--532: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.4);
    --color-border-error-main-view-banner: var(--csstools-light-dark-toggle--532, hsla(3, 57%, 33%, 0.4));
    --csstools-light-dark-toggle--533: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.5);
    --color-error-main-view-banner-close-button: var(--csstools-light-dark-toggle--533, hsla(4, 58%, 33%, 0.5));
    --csstools-light-dark-toggle--534: var(--csstools-color-scheme--light) hsl(3, 73%, 74%);
    --color-error-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--534, hsl(4, 58%, 33%));
    --csstools-light-dark-toggle--535: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.75);
    --color-error-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--535, hsla(4, 58%, 33%, 0.75));
    --csstools-light-dark-toggle--536: var(--csstools-color-scheme--light) hsl(3, 73%, 74%);
    --color-error-main-view-banner-action-button: var(--csstools-light-dark-toggle--536, inherit);
    --csstools-light-dark-toggle--537: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.1);
    --color-background-error-main-view-banner-action-button: var(--csstools-light-dark-toggle--537, hsla(3, 57%, 33%, 0.1));
    --csstools-light-dark-toggle--538: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.15);
    --color-background-error-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--538, hsla(3, 57%, 33%, 0.12));
    --csstools-light-dark-toggle--539: var(--csstools-color-scheme--light) hsla(3, 73%, 74%, 0.2);
    --color-background-error-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--539, hsla(3, 57%, 33%, 0.15));
    --csstools-light-dark-toggle--540: var(--csstools-color-scheme--light) hsl(205, 58%, 80%);
    --color-info-main-view-banner: var(--csstools-light-dark-toggle--540, hsl(204, 49%, 29%));
    --csstools-light-dark-toggle--541: var(--csstools-color-scheme--light) hsl(204, 100%, 12%);
    --color-background-info-main-view-banner: var(--csstools-light-dark-toggle--541, hsl(204, 58%, 92%));
    --csstools-light-dark-toggle--542: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.4);
    --color-border-info-main-view-banner: var(--csstools-light-dark-toggle--542, hsla(204, 49%, 29%, 0.4));
    --csstools-light-dark-toggle--543: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.5);
    --color-info-main-view-banner-close-button: var(--csstools-light-dark-toggle--543, hsla(204, 49%, 29%, 0.5));
    --csstools-light-dark-toggle--544: var(--csstools-color-scheme--light) hsl(205, 58%, 69%);
    --color-info-main-view-banner-close-button-hover: var(--csstools-light-dark-toggle--544, hsl(204, 49%, 29%));
    --csstools-light-dark-toggle--545: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.75);
    --color-info-main-view-banner-close-button-active: var(--csstools-light-dark-toggle--545, hsla(204, 49%, 29%, 0.75));
    --csstools-light-dark-toggle--546: var(--csstools-color-scheme--light) hsl(205, 58%, 69%);
    --color-info-main-view-banner-action-button: var(--csstools-light-dark-toggle--546, inherit);
    --csstools-light-dark-toggle--547: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.1);
    --color-background-info-main-view-banner-action-button: var(--csstools-light-dark-toggle--547, hsla(204, 49%, 29%, 0.1));
    --csstools-light-dark-toggle--548: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.15);
    --color-background-info-main-view-banner-action-button-hover: var(--csstools-light-dark-toggle--548, hsla(204, 49%, 29%, 0.12));
    --csstools-light-dark-toggle--549: var(--csstools-color-scheme--light) hsla(205, 58%, 69%, 0.2);
    --color-background-info-main-view-banner-action-button-active: var(--csstools-light-dark-toggle--549, hsla(204, 49%, 29%, 0.15));
    --csstools-light-dark-toggle--550: var(--csstools-color-scheme--light) hsl(200, 100%, 50%);
    --color-main-view-banner-action-link: var(--csstools-light-dark-toggle--550, var(--color-text-generic-link));
    --csstools-light-dark-toggle--551: var(--csstools-color-scheme--light) hsl(204, 63%, 18%);
    --color-background-main-view-banner-moving-bar: var(--csstools-light-dark-toggle--551, hsl(204, 63%, 85%));
    --csstools-light-dark-toggle--552: var(--csstools-color-scheme--light) hsla(0, 0%, 90%, 0.2);
    --color-info-density-control-border: var(--csstools-light-dark-toggle--552, hsla(0, 0%, 0%, 0.2));
    --csstools-light-dark-toggle--553: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.8);
    --color-info-density-button-icon: var(--csstools-light-dark-toggle--553, hsl(229, 9%, 36%));
    --csstools-light-dark-toggle--554: var(--csstools-color-scheme--light) hsla(229, 10%, 50%, 0.3);
    --color-info-density-button-hover-background: var(--csstools-light-dark-toggle--554, hsla(229, 9%, 36%, 0.07));
    }
}
@supports not (color: light-dark(tan, tan)) {
:root * {
    --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) var(--color-border-unread-counter);
    --color-border-unread-counter-popover-menu: var(--csstools-light-dark-toggle--0, inherit);
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) var(--grey-300);
    --color-text-recent-view-table-thead-th: var(--csstools-light-dark-toggle--1, var(--grey-600));
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) var(--grey-400);
    --color-text-user-card-secondary: var(--csstools-light-dark-toggle--2, var(--grey-550));
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) var(--color-markdown-pre-border);
    --color-markdown-pre-border-mentions: var(--csstools-light-dark-toggle--3, transparent);
    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) #4cdc75;
    --color-user-circle-active: var(--csstools-light-dark-toggle--4, #43a35e);
    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) #ae640a;
    --color-user-circle-idle: var(--csstools-light-dark-toggle--5, #f5b266);
    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) #545764;
    --color-user-circle-offline: var(--csstools-light-dark-toggle--6, #bcc0cf);
    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) #646671;
    --color-user-circle-offline-typeahead-highlight: var(--csstools-light-dark-toggle--7, #adb2c5);
    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) var(--color-user-circle-idle);
    --gradient-user-circle-idle: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        var(--csstools-light-dark-toggle--8, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    transparent
                ))
            25%,
        transparent 100%
    );
    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) var(--color-user-circle-idle);
    --gradient-user-circle-idle-avatar: linear-gradient(
        to right,
        var(--color-user-circle-idle) 5%,
        var(--csstools-light-dark-toggle--9, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    var(--color-background)
                ))
            25%,
        var(--color-background) 100%
    );
    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) var(--grey-300);
    --color-copy-button-hover: var(--csstools-light-dark-toggle--10, var(--grey-600));
    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) var(--grey-300);
    --color-copy-button-square-active: var(--csstools-light-dark-toggle--11, var(--grey-600));
    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) var(--green-300);
    --color-copy-button-success: var(--csstools-light-dark-toggle--12, var(--green-500));
    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) var(--color-message-reaction-text-reacted);
    --color-message-reaction-button-text-hover: var(--csstools-light-dark-toggle--13, var(--color-message-reaction-text));
    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) var(--color-message-reaction-background-hover);
    --color-message-reaction-button-background-hover: var(--csstools-light-dark-toggle--14, var(--color-message-reaction-background));
    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) #aaadba;
    --color-inbox-row-chevron: var(--csstools-light-dark-toggle--15, #535663);
    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) hsl(0deg 0% 75% 60%);
    --color-dropdown-item-link-underline: var(--csstools-light-dark-toggle--16, hsl(0deg 0% 20% 60%));
    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) var(--purple-300);
    --color-current-setting-dropdown-item: var(--csstools-light-dark-toggle--17, var(--purple-700));
    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) var(--grey-400);
    --color-typeahead-option-label: var(--csstools-light-dark-toggle--18, var(--grey-500));
    }
}

@media screen {
    .dark-theme:root {
    /* There is no lefthand border to cover in dark mode, so
       don't apply negative margin that would otherwise pull
       the unread marker to the left. */
    --unread-marker-left: 0;

    /* Box shadow for overlays across the web app */
    --box-shadow-overlay: 0 0 30px hsl(212, 32%, 7%);

    /* Shadow layers use full-opacity black on dark backgrounds so the drop
       shadow still reads as a crisp separation. */
    --box-shadow-sidebar-sticky-header-drop:
        0 1px 1px -1px hsl(0, 0%, 0%), 0 3px 4px -5px hsl(0, 0%, 0%),
        0 4px 9px -10px hsl(0, 0%, 0%), 0 12px 12px -13px hsl(0, 0%, 0%);

    /* Colors used across the app */
    --color-recipient-bar-controls-spinner: hsl(0, 0%, 100%);
    --box-shadow-unread-counter-normal: none;

    /* Text colors */
    --color-text-sender-name: hsla(0, 0%, 100%, 0.85);
    --color-text-other-mention: hsla(0, 0%, 100%, 0.8);
    --color-text-empty-list-message: hsl(0, 0%, 67%);

    /* Settings table colors */
    --color-background-notification-table-thead: hsla(0, 0%, 0%, 0.2);

    /* Custom profile field choice editor */
    --opacity-disabled-profile-field-choice-input: 0.5;

    /* Reaction container colors */
    --font-weight-message-reaction: 550;
    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.12px 0 hsla(0, 0%, 0%, 0.1),
        0 5.5113px 8.5783px 0 hsla(0, 0%, 0%, 0.09),
        0 8.4377px 13.9271px 0 hsla(0, 0%, 0%, 0.11),
        0 12.177px 21.4737px 0 hsla(0, 0%, 0%, 0.11),
        0 18.7257px 35.4802px 0 hsla(0, 0%, 0%, 0.15),
        0 41px 80px 0 hsla(0, 0%, 0%, 0.2);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23DEDEDE' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z'/%3E%3C/svg%3E");

    /* Button colors on modals and message editing. */
    --color-exit-button-text: hsl(0, 0%, 100%);
    --color-exit-button-background: hsla(226, 1%, 30%, 0.5);
    --color-exit-button-background-interactive: hsla(226, 1%, 30%, 0.65);

    /* Zulip-style checkbox values. */
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url("../images/checkbox-dark-mode.svg");

    /* Theme-dependent SVGs */
    --svg-url-thumbnail-loader: url("../images/loading/loader-white.svg");

    /* Zulip resizer handle svg */
    --svg-resize-handle: url("../images/resize-handle-white.svg");
    --recent-view-body-border-width: 0.1875em; /* 3px at 16px/1em */
    }
    .dark-theme:root {
    --csstools-color-scheme--light:  ;
    color-scheme: dark;
    }
    .dark-theme:root kbd {
        text-shadow: none;
    }
    .dark-theme:root #message-formatting kbd, .dark-theme:root #keyboard-shortcuts kbd {
            --csstools-light-dark-toggle--1078: var(--csstools-color-scheme--light) hsl(225, 100%, 84%);
            border: 1px solid hsl(227, 78%, 59%);
            border: 1px solid var(--csstools-light-dark-toggle--1078, hsl(227, 78%, 59%));
            border: 1px solid light-dark(hsl(227, 78%, 59%), hsl(225, 100%, 84%));
            border: 1px solid var(--color-hotkey-hint);
            border-radius: 3px;
            --csstools-light-dark-toggle--1079: var(--csstools-color-scheme--light) hsl(225, 100%, 84%);
            color: hsl(227, 78%, 59%);
            color: var(--csstools-light-dark-toggle--1079, hsl(227, 78%, 59%));
            color: light-dark(hsl(227, 78%, 59%), hsl(225, 100%, 84%));
            color: var(--color-hotkey-hint);
            opacity: 0.8;
    }
    .dark-theme:root .enter_sends_choices {
        color: hsl(236, 33%, 90%);
    }
    .dark-theme:root .enter_sends_choices .enter_sends_minor {
            color: hsl(0, 0%, 80%);
    }
    .dark-theme:root .dropdown-list-delete {
        /* hsl(7deg 100% 74%) corresponds to var(--red-250) */
        color: rgba(255, 138, 122, 0.7) !important;
    }
    .dark-theme:root .dropdown-list-delete:hover {
            color: hsl(7, 100%, 74%) !important;
    }
    .dark-theme:root .popover a {
        color: inherit;
    }
    .dark-theme:root input:not([type="radio"]):not(.modal_text_input):-moz-read-only {
        color: inherit;
        opacity: 0.5;
    }
    .dark-theme:root button:disabled:not(.action-button):not(.icon-button):not(.info-density-button), .dark-theme:root option:disabled, .dark-theme:root select:disabled, .dark-theme:root input:disabled:not(.modal_text_input), .dark-theme:root input:not([type="radio"]):not(.modal_text_input):read-only, .dark-theme:root #organization-permissions .dropdown-widget-button:disabled, .dark-theme:root #organization-settings .dropdown-widget-button:disabled {
        color: inherit;
        opacity: 0.5;
    }
    .dark-theme:root button.info-density-button:disabled {
        color: inherit;
        opacity: 0.4;
    }
    .dark-theme:root .popover-filter-input-wrapper .popover-filter-input:focus {
        background-color: hsl(225, 6%, 7%);
        border: 1px solid hsla(0, 0%, 100%, 0.5);
        box-shadow: 0 0 5px hsla(0, 0%, 100%, 0.4);
    }
    .dark-theme:root select option {
        --csstools-light-dark-toggle--872: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background-color: hsl(0, 0%, 94%);
        background-color: var(--csstools-light-dark-toggle--872, hsl(0, 0%, 94%));
        background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background-color: var(--color-background);
        color: hsl(236, 33%, 90%);
    }
    .dark-theme:root .pill-container.not-editable-by-user, .dark-theme:root .group_setting_disabled .pill-container {
        opacity: 0.5;
    }
    .dark-theme:root #searchbox .navbar-search:not(.expanded) #searchbox-input-container:hover .search_icon {
            opacity: 0.75;
    }
    .dark-theme:root textarea.schedule-reminder-note:focus {
        border-color: hsla(0, 0%, 0%, 0.9);
    }
    .dark-theme:root .popover hr, .dark-theme:root hr {
        opacity: 0.2;
    }
    .dark-theme:root #recent-view-content-table {
        border-bottom-width: 1px;
    }
    .dark-theme:root .drafts-container .header-body .delete-drafts-group > *:focus {
        background-color: hsl(228, 11%, 17%);
    }
    .dark-theme:root .table-striped tbody tr:nth-child(even) td {
        border-color: hsla(0, 0%, 0%, 0.2);
        background-color: color-mix(
            in srgb,
            hsl(0, 0%, 0%) 20%,
            var(--color-background-modal)
        );
    }
    .dark-theme:root .overlay-message-row .message_header_private_message .message_label_clickable {
        padding: 4px 6px 3px;
        color: inherit;
    }
    .dark-theme:root time {
        background: hsla(0, 0%, 0%, 0.2);
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.4);
    }
    .dark-theme:root .tip {
        color: inherit;
    }
    .dark-theme:root .alert.home-error-bar {
        color: hsl(236, 33%, 90%);
        background-color: hsla(35, 84%, 62%, 0.25);
        border: 1px solid hsl(11, 46%, 54%);
    }
    .dark-theme:root .alert.alert-success {
        color: inherit;
        background-color: hsla(161, 60%, 46%, 0.2);
        border-color: hsl(165, 68%, 37%);
    }
    .dark-theme:root .alert.alert-info {
        color: hsl(205, 58%, 80%);
        background-color: hsl(204, 100%, 12%);
        border-color: hsla(205, 58%, 69%, 0.4);
    }
    .dark-theme:root .alert.alert-error, .dark-theme:root .alert.alert-danger {
        background-color: hsl(318, 12%, 21%);
        color: inherit;
        border: 1px solid hsl(0, 75%, 65%);
    }
    .dark-theme:root .alert-box .alert, .dark-theme:root .alert-box .stacktrace, .dark-theme:root .alert.alert-error {
        background-color: hsl(318, 12%, 21%);
        color: inherit;
        border: 1px solid hsl(0, 75%, 65%);
    }
    .dark-theme:root .alert-box .alert.alert-error::before {
            color: hsl(0, 75%, 65%);
    }
    .dark-theme:root .stacktrace {
        color: hsl(314, 22%, 85%);
        background-color: hsl(318, 12%, 21%);
        border: 1px solid hsl(0, 75%, 65%);
    }
    .dark-theme:root .stacktrace .expand {
            color: hsl(318, 14%, 36%);
    }
    .dark-theme:root .stacktrace .subtle {
            color: hsl(314, 19%, 63%);
    }
    .dark-theme:root .stacktrace .stacktrace-more-info {
            background-color: hsl(312, 7%, 14%);
    }
    .dark-theme:root .stacktrace .code-context {
            color: hsl(314, 27%, 82%);
            background-color: hsl(312, 7%, 14%);
            box-shadow:
                inset 0 11px 10px -10px hsl(0, 0%, 6%),
                inset 0 -11px 10px -10px hsl(0, 0%, 6%);
    }
    .dark-theme:root .stacktrace .code-context .line-number {
                color: hsl(318, 14%, 44%);
    }
    .dark-theme:root .stacktrace .code-context .focus-line {
                background-color: hsl(307, 9%, 19%);
    }
    .dark-theme:root .top-messages-logo {
        opacity: 0.7;
    }
    .dark-theme:root .history-limited-box {
        background-color: hsla(0, 0%, 0%, 0.2);
    }
    .dark-theme:root .searching-for-more-topics img {
        filter: invert(100%);
    }
    .dark-theme:root .simplebar-track .simplebar-scrollbar::before {
        background-color: hsl(0, 0%, 100%);
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.33);
    }
    .dark-theme:root .collapse-settings-button:hover {
        color: hsl(200, 79%, 66%);
    }
    .dark-theme:root #loading_older_messages_indicator path, .dark-theme:root #recent_view_loading_messages_indicator path {
            fill: hsl(0, 0%, 100%);
    }
    .dark-theme:root a:not(:active):focus, .dark-theme:root button:not(.action-button):not(.icon-button):focus-visible, .dark-theme:root i.fa:focus, .dark-theme:root i.zulip-icon:focus, .dark-theme:root [role="button"]:focus {
        outline-color: hsl(0, 0%, 67%);
    }
    .dark-theme:root .color_animated_button .zulip-icon {
            color: hsl(0, 0%, 100%);
    }
    .dark-theme:root .panel_user_list > .pill-container:hover, .dark-theme:root .creator_details > .display_only_pill:hover {
            color: inherit;
    }
    .dark-theme:root .panel_user_list > .pill-container > .pill:focus, .dark-theme:root .creator_details > .display_only_pill > .pill:focus, .dark-theme:root .panel_user_list > .pill-container > .pill:hover, .dark-theme:root .creator_details > .display_only_pill > .pill:hover {
                color: inherit;
    }
    .dark-theme:root .help_link_widget:hover {
        color: inherit;
    }
    .dark-theme:root #uppy-editor .uppy-ImageCropper .cropper-modal {
            opacity: 0.7;
            background-color: hsl(0, 0%, 0%);
    }
    .dark-theme:root #uppy-editor .uppy-ImageCropper .cropper-view-box {
            background: repeating-conic-gradient(
                    hsl(0, 1%, 17%) 0%,hsl(0, 1%, 17%) 25%,
                    hsl(0, 0%, 0%) 0%, hsl(0, 0%, 0%) 50%
                )
                50%/16px 16px;
            background: repeating-conic-gradient(
                    hsl(0, 1%, 17%) 0% 25%,
                    hsl(0, 0%, 0%) 0% 50%
                )
                50%/16px 16px;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
    /* There is no lefthand border to cover in dark mode, so
       don't apply negative margin that would otherwise pull
       the unread marker to the left. */
    --unread-marker-left: 0;

    /* Box shadow for overlays across the web app */
    --box-shadow-overlay: 0 0 30px hsl(212, 32%, 7%);

    /* Shadow layers use full-opacity black on dark backgrounds so the drop
       shadow still reads as a crisp separation. */
    --box-shadow-sidebar-sticky-header-drop:
        0 1px 1px -1px hsl(0, 0%, 0%), 0 3px 4px -5px hsl(0, 0%, 0%),
        0 4px 9px -10px hsl(0, 0%, 0%), 0 12px 12px -13px hsl(0, 0%, 0%);

    /* Colors used across the app */
    --color-recipient-bar-controls-spinner: hsl(0, 0%, 100%);
    --box-shadow-unread-counter-normal: none;

    /* Text colors */
    --color-text-sender-name: hsla(0, 0%, 100%, 0.85);
    --color-text-other-mention: hsla(0, 0%, 100%, 0.8);
    --color-text-empty-list-message: hsl(0, 0%, 67%);

    /* Settings table colors */
    --color-background-notification-table-thead: hsla(0, 0%, 0%, 0.2);

    /* Custom profile field choice editor */
    --opacity-disabled-profile-field-choice-input: 0.5;

    /* Reaction container colors */
    --font-weight-message-reaction: 550;
    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.12px 0 hsla(0, 0%, 0%, 0.1),
        0 5.5113px 8.5783px 0 hsla(0, 0%, 0%, 0.09),
        0 8.4377px 13.9271px 0 hsla(0, 0%, 0%, 0.11),
        0 12.177px 21.4737px 0 hsla(0, 0%, 0%, 0.11),
        0 18.7257px 35.4802px 0 hsla(0, 0%, 0%, 0.15),
        0 41px 80px 0 hsla(0, 0%, 0%, 0.2);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23DEDEDE' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z'/%3E%3C/svg%3E");

    /* Button colors on modals and message editing. */
    --color-exit-button-text: hsl(0, 0%, 100%);
    --color-exit-button-background: hsla(226, 1%, 30%, 0.5);
    --color-exit-button-background-interactive: hsla(226, 1%, 30%, 0.65);

    /* Zulip-style checkbox values. */
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url("../images/checkbox-dark-mode.svg");

    /* Theme-dependent SVGs */
    --svg-url-thumbnail-loader: url("../images/loading/loader-white.svg");

    /* Zulip resizer handle svg */
    --svg-resize-handle: url("../images/resize-handle-white.svg");
    --recent-view-body-border-width: 0.1875em; /* 3px at 16px/1em */
    }
    .color-scheme-automatic:root {
    --csstools-color-scheme--light:  ;
    color-scheme: dark;
    }
    .color-scheme-automatic:root kbd {
        text-shadow: none;
    }
    .color-scheme-automatic:root #message-formatting kbd, .color-scheme-automatic:root #keyboard-shortcuts kbd {
            --csstools-light-dark-toggle--1078: var(--csstools-color-scheme--light) hsl(225, 100%, 84%);
            border: 1px solid hsl(227, 78%, 59%);
            border: 1px solid var(--csstools-light-dark-toggle--1078, hsl(227, 78%, 59%));
            border: 1px solid light-dark(hsl(227, 78%, 59%), hsl(225, 100%, 84%));
            border: 1px solid var(--color-hotkey-hint);
            border-radius: 3px;
            --csstools-light-dark-toggle--1079: var(--csstools-color-scheme--light) hsl(225, 100%, 84%);
            color: hsl(227, 78%, 59%);
            color: var(--csstools-light-dark-toggle--1079, hsl(227, 78%, 59%));
            color: light-dark(hsl(227, 78%, 59%), hsl(225, 100%, 84%));
            color: var(--color-hotkey-hint);
            opacity: 0.8;
    }
    .color-scheme-automatic:root .enter_sends_choices {
        color: hsl(236, 33%, 90%);
    }
    .color-scheme-automatic:root .enter_sends_choices .enter_sends_minor {
            color: hsl(0, 0%, 80%);
    }
    .color-scheme-automatic:root .dropdown-list-delete {
        /* hsl(7deg 100% 74%) corresponds to var(--red-250) */
        color: rgba(255, 138, 122, 0.7) !important;
    }
    .color-scheme-automatic:root .dropdown-list-delete:hover {
            color: hsl(7, 100%, 74%) !important;
    }
    .color-scheme-automatic:root .popover a {
        color: inherit;
    }
    .color-scheme-automatic:root input:not([type="radio"]):not(.modal_text_input):-moz-read-only {
        color: inherit;
        opacity: 0.5;
    }
    .color-scheme-automatic:root button:disabled:not(.action-button):not(.icon-button):not(.info-density-button), .color-scheme-automatic:root option:disabled, .color-scheme-automatic:root select:disabled, .color-scheme-automatic:root input:disabled:not(.modal_text_input), .color-scheme-automatic:root input:not([type="radio"]):not(.modal_text_input):read-only, .color-scheme-automatic:root #organization-permissions .dropdown-widget-button:disabled, .color-scheme-automatic:root #organization-settings .dropdown-widget-button:disabled {
        color: inherit;
        opacity: 0.5;
    }
    .color-scheme-automatic:root button.info-density-button:disabled {
        color: inherit;
        opacity: 0.4;
    }
    .color-scheme-automatic:root .popover-filter-input-wrapper .popover-filter-input:focus {
        background-color: hsl(225, 6%, 7%);
        border: 1px solid hsla(0, 0%, 100%, 0.5);
        box-shadow: 0 0 5px hsla(0, 0%, 100%, 0.4);
    }
    .color-scheme-automatic:root select option {
        --csstools-light-dark-toggle--872: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background-color: hsl(0, 0%, 94%);
        background-color: var(--csstools-light-dark-toggle--872, hsl(0, 0%, 94%));
        background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background-color: var(--color-background);
        color: hsl(236, 33%, 90%);
    }
    .color-scheme-automatic:root .pill-container.not-editable-by-user, .color-scheme-automatic:root .group_setting_disabled .pill-container {
        opacity: 0.5;
    }
    .color-scheme-automatic:root #searchbox .navbar-search:not(.expanded) #searchbox-input-container:hover .search_icon {
            opacity: 0.75;
    }
    .color-scheme-automatic:root textarea.schedule-reminder-note:focus {
        border-color: hsla(0, 0%, 0%, 0.9);
    }
    .color-scheme-automatic:root .popover hr, .color-scheme-automatic:root hr {
        opacity: 0.2;
    }
    .color-scheme-automatic:root #recent-view-content-table {
        border-bottom-width: 1px;
    }
    .color-scheme-automatic:root .drafts-container .header-body .delete-drafts-group > *:focus {
        background-color: hsl(228, 11%, 17%);
    }
    .color-scheme-automatic:root .table-striped tbody tr:nth-child(even) td {
        border-color: hsla(0, 0%, 0%, 0.2);
        background-color: color-mix(
            in srgb,
            hsl(0, 0%, 0%) 20%,
            var(--color-background-modal)
        );
    }
    .color-scheme-automatic:root .overlay-message-row .message_header_private_message .message_label_clickable {
        padding: 4px 6px 3px;
        color: inherit;
    }
    .color-scheme-automatic:root time {
        background: hsla(0, 0%, 0%, 0.2);
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.4);
    }
    .color-scheme-automatic:root .tip {
        color: inherit;
    }
    .color-scheme-automatic:root .alert.home-error-bar {
        color: hsl(236, 33%, 90%);
        background-color: hsla(35, 84%, 62%, 0.25);
        border: 1px solid hsl(11, 46%, 54%);
    }
    .color-scheme-automatic:root .alert.alert-success {
        color: inherit;
        background-color: hsla(161, 60%, 46%, 0.2);
        border-color: hsl(165, 68%, 37%);
    }
    .color-scheme-automatic:root .alert.alert-info {
        color: hsl(205, 58%, 80%);
        background-color: hsl(204, 100%, 12%);
        border-color: hsla(205, 58%, 69%, 0.4);
    }
    .color-scheme-automatic:root .alert.alert-error, .color-scheme-automatic:root .alert.alert-danger {
        background-color: hsl(318, 12%, 21%);
        color: inherit;
        border: 1px solid hsl(0, 75%, 65%);
    }
    .color-scheme-automatic:root .alert-box .alert, .color-scheme-automatic:root .alert-box .stacktrace, .color-scheme-automatic:root .alert.alert-error {
        background-color: hsl(318, 12%, 21%);
        color: inherit;
        border: 1px solid hsl(0, 75%, 65%);
    }
    .color-scheme-automatic:root .alert-box .alert.alert-error::before {
            color: hsl(0, 75%, 65%);
    }
    .color-scheme-automatic:root .stacktrace {
        color: hsl(314, 22%, 85%);
        background-color: hsl(318, 12%, 21%);
        border: 1px solid hsl(0, 75%, 65%);
    }
    .color-scheme-automatic:root .stacktrace .expand {
            color: hsl(318, 14%, 36%);
    }
    .color-scheme-automatic:root .stacktrace .subtle {
            color: hsl(314, 19%, 63%);
    }
    .color-scheme-automatic:root .stacktrace .stacktrace-more-info {
            background-color: hsl(312, 7%, 14%);
    }
    .color-scheme-automatic:root .stacktrace .code-context {
            color: hsl(314, 27%, 82%);
            background-color: hsl(312, 7%, 14%);
            box-shadow:
                inset 0 11px 10px -10px hsl(0, 0%, 6%),
                inset 0 -11px 10px -10px hsl(0, 0%, 6%);
    }
    .color-scheme-automatic:root .stacktrace .code-context .line-number {
                color: hsl(318, 14%, 44%);
    }
    .color-scheme-automatic:root .stacktrace .code-context .focus-line {
                background-color: hsl(307, 9%, 19%);
    }
    .color-scheme-automatic:root .top-messages-logo {
        opacity: 0.7;
    }
    .color-scheme-automatic:root .history-limited-box {
        background-color: hsla(0, 0%, 0%, 0.2);
    }
    .color-scheme-automatic:root .searching-for-more-topics img {
        filter: invert(100%);
    }
    .color-scheme-automatic:root .simplebar-track .simplebar-scrollbar::before {
        background-color: hsl(0, 0%, 100%);
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.33);
    }
    .color-scheme-automatic:root .collapse-settings-button:hover {
        color: hsl(200, 79%, 66%);
    }
    .color-scheme-automatic:root #loading_older_messages_indicator path, .color-scheme-automatic:root #recent_view_loading_messages_indicator path {
            fill: hsl(0, 0%, 100%);
    }
    .color-scheme-automatic:root a:not(:active):focus, .color-scheme-automatic:root button:not(.action-button):not(.icon-button):focus-visible, .color-scheme-automatic:root i.fa:focus, .color-scheme-automatic:root i.zulip-icon:focus, .color-scheme-automatic:root [role="button"]:focus {
        outline-color: hsl(0, 0%, 67%);
    }
    .color-scheme-automatic:root .color_animated_button .zulip-icon {
            color: hsl(0, 0%, 100%);
    }
    .color-scheme-automatic:root .panel_user_list > .pill-container:hover, .color-scheme-automatic:root .creator_details > .display_only_pill:hover {
            color: inherit;
    }
    .color-scheme-automatic:root .panel_user_list > .pill-container > .pill:focus, .color-scheme-automatic:root .creator_details > .display_only_pill > .pill:focus, .color-scheme-automatic:root .panel_user_list > .pill-container > .pill:hover, .color-scheme-automatic:root .creator_details > .display_only_pill > .pill:hover {
                color: inherit;
    }
    .color-scheme-automatic:root .help_link_widget:hover {
        color: inherit;
    }
    .color-scheme-automatic:root #uppy-editor .uppy-ImageCropper .cropper-modal {
            opacity: 0.7;
            background-color: hsl(0, 0%, 0%);
    }
    .color-scheme-automatic:root #uppy-editor .uppy-ImageCropper .cropper-view-box {
            background: repeating-conic-gradient(
                    hsl(0, 1%, 17%) 0%,hsl(0, 1%, 17%) 25%,
                    hsl(0, 0%, 0%) 0%, hsl(0, 0%, 0%) 50%
                )
                50%/16px 16px;
            background: repeating-conic-gradient(
                    hsl(0, 1%, 17%) 0% 25%,
                    hsl(0, 0%, 0%) 0% 50%
                )
                50%/16px 16px;
    }
}

/* ---- zulip.css ---- */
#download-mac-alt {
    margin-top: 10px;
}

html {
    overflow-x: hidden;
    overflow-y: scroll;
    overflow: hidden scroll;
    overscroll-behavior-y: none;
    width: calc(100% - 0px);
    width: calc(100% - var(--disabled-scrollbar-width));
}

body,
html {
    height: 100%;
    height: var(--full-height-dynamic-viewport);
    touch-action: manipulation;
}

.column-middle,
#main_div {
    --csstools-light-dark-toggle--555: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--555, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);
}

#app-loading.loaded {
    display: none !important; /* We are now loaded, by definition. */
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-size: var(--base-font-size-px);
    /* The line-height used in most of the UI should be at least
       its legacy value, but should expand with larger base
       line-height values. */
    line-height: max(
        calc(20 / 14),
        1.214
    );
    line-height: max(
        var(--legacy-body-line-height-unitless),
        var(--base-line-height-unitless)
    );
    font-family: "Source Sans 3 VF", sans-serif;
    --csstools-light-dark-toggle--598: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--598, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    --csstools-light-dark-toggle--599: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--599, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);

    /* Implementation for fluid layout width setting. */
}

body .header-main,body .app .app-main,body #compose-container {
        max-width: calc(
            (
        20.6429em - 12px
    ) + 57.4125em +
                20.57em
        );
        max-width: calc(
            calc(
        20.6429em - 12px
    ) + 57.4125em +
                20.57em
        );
        max-width: calc(
            var(--left-sidebar-max-width) + var(--message-area-max-width) +
                var(--right-sidebar-max-width)
        );
    }

/* When sidebars are manually hidden, we set the max-width
       for the layout to a different maximum width. This keeps
       the message area predictably readable. */

body.hide-left-sidebar:not(.fluid_layout_width) .header-main,body.hide-left-sidebar:not(.fluid_layout_width) .app .app-main,body.hide-left-sidebar:not(.fluid_layout_width) #compose-container {
            max-width: calc(
                57.4125em + 20.57em
            );
            max-width: calc(
                var(--message-area-max-width) + var(--right-sidebar-max-width)
            );

            /* When we're less than the xl_min breakpoint, we instead
               constrain to just the message area's max-width, since
               the right column will be hidden below that point. */
        }

@container header-container (width < 75em) {

body.hide-left-sidebar:not(.fluid_layout_width) .header-main,body.hide-left-sidebar:not(.fluid_layout_width) .app .app-main,body.hide-left-sidebar:not(.fluid_layout_width) #compose-container {
                max-width: 57.4125em;
                max-width: var(--message-area-max-width);
        }
            }

@container app (width < 75em) {

body.hide-left-sidebar:not(.fluid_layout_width) .header-main,body.hide-left-sidebar:not(.fluid_layout_width) .app .app-main,body.hide-left-sidebar:not(.fluid_layout_width) #compose-container {
                max-width: 57.4125em;
                max-width: var(--message-area-max-width);
        }
            }

/* Fallback media query. */

@media (max-width: 1199.98px) {
            body.without-container-query-support.hide-left-sidebar:not(.fluid_layout_width) .header-main,body.without-container-query-support.hide-left-sidebar:not(.fluid_layout_width) .app .app-main,body.without-container-query-support.hide-left-sidebar:not(.fluid_layout_width) #compose-container {
                max-width: 57.4125em;
                max-width: var(--message-area-max-width);
            }
    }

body.hide-right-sidebar:not(.fluid_layout_width) .header-main,body.hide-right-sidebar:not(.fluid_layout_width) .app .app-main,body.hide-right-sidebar:not(.fluid_layout_width) #compose-container {
            max-width: calc(
                (
        20.6429em - 12px
    ) + 57.4125em
            );
            max-width: calc(
                calc(
        20.6429em - 12px
    ) + 57.4125em
            );
            max-width: calc(
                var(--left-sidebar-max-width) + var(--message-area-max-width)
            );
        }

body.hide-left-sidebar.hide-right-sidebar:not(.fluid_layout_width) .header-main,body.hide-left-sidebar.hide-right-sidebar:not(.fluid_layout_width) .app .app-main,body.hide-left-sidebar.hide-right-sidebar:not(.fluid_layout_width) #compose-container {
            max-width: 57.4125em;
            max-width: var(--message-area-max-width);
        }

body.fluid_layout_width .header-main,body.fluid_layout_width .app .app-main,body.fluid_layout_width #compose-container {
            max-width: inherit;
        }

input,
button {
    /* Browsers default to inline-block,
       so preserve this value. */
    vertical-align: middle;
    /* Preserve normal font-weight, though
       it appears UA stylesheets do not set
       the weight to other values. */
    font-weight: normal;
    /* Likewise with zeroed margin. */
    margin: 0;

    /* Reset these values from Firefox's
       UA stylesheet (still present in
       April 2025) */
}

input::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

button::-moz-focus-inner {
        padding: 0;
        border: 0;
    }

blockquote p {
    font-weight: normal;
}

/* These colors are typically overridden,
   but referencing them as variables prevents
   specificity wars and ugly :not() selectors,
   especially in dark theme. */
a {
    cursor: pointer;
    color: #08c;
    color: var(--color-text-generic-link);
    -webkit-text-decoration: none;
    text-decoration: none;
}

a:hover,
a:focus {
    --csstools-light-dark-toggle--600: var(--csstools-color-scheme--light) hsl(200, 79%, 66%);
    color: #005580;
    color: var(--csstools-light-dark-toggle--600, #005580);
    color: light-dark(
        #005580,
        hsl(200, 79%, 66%)
    );
    color: var(--color-text-generic-link-interactive);
    -webkit-text-decoration: underline;
    text-decoration: underline;
}

a:hover code,a:focus code {
        --csstools-light-dark-toggle--882: var(--csstools-color-scheme--light) hsl(200, 79%, 66%);
        color: #005580;
        color: var(--csstools-light-dark-toggle--882, #005580);
        color: light-dark(
        #005580,
        hsl(200, 79%, 66%)
    );
        color: var(--color-text-generic-link-interactive);
    }

code,
pre {
    font-family: "Source Code Pro", monospace;
}

.no-select {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.text-select {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}

p.n-margin {
    margin: 10px 0 0;
}

.small-line-height {
    line-height: 1.1;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.float-clear {
    clear: both;
}

.no-margin {
    margin: 0;
}

.all-messages-search-caution,
.combined-feed-notice {
    display: none;
}

.all-messages-search-caution .all-messages-search-caution-info,.combined-feed-notice .all-messages-search-caution-info,.all-messages-search-caution .combined-feed-notice-info,.combined-feed-notice .combined-feed-notice-info {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

.history-limited-box,
.all-messages-search-caution,
.combined-feed-notice {
    margin: 0 auto 12px;
    padding: 5px;
}

.history-limited-box p,.all-messages-search-caution p,.combined-feed-notice p {
        margin: 0;
        padding: 4px;
    }

.history-limited-box {
    border-radius: 4px;
    display: none;
    /* Difference should be 16px to accommodate the icon. */
    /* This emulates hanging indent. */
    padding-left: 26px;
    text-indent: -10px;
    color: hsl(16, 60%, 45%);
    border: 1px solid hsl(16, 60%, 45%);
    box-shadow: 0 0 2px hsl(16, 60%, 45%);
}

.messages-logo-svg {
    width: 1.7188em; /* 27.5px at 16px/1em */
}

.bottom-messages-logo {
    display: none;
}

.top-messages-logo,
.bottom-messages-logo {
    width: 1.7143em; /* 24px at 14px/em */
    height: 1.7143em;
    margin: 0 auto 0.8571em; /* 12px at 14px/em */
}

.top-messages-logo svg circle,.bottom-messages-logo svg circle {
            --csstools-light-dark-toggle--883: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
            fill: hsla(0, 0%, 0%, 0.34);
            fill: var(--csstools-light-dark-toggle--883, hsla(0, 0%, 0%, 0.34));
            fill: light-dark(
        hsla(0, 0%, 0%, 0.34),
        hsla(0, 0%, 100%, 0.5)
    );
            fill: var(--color-zulip-logo);
            --csstools-light-dark-toggle--884: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
            stroke: hsla(0, 0%, 0%, 0.34);
            stroke: var(--csstools-light-dark-toggle--884, hsla(0, 0%, 0%, 0.34));
            stroke: light-dark(
        hsla(0, 0%, 0%, 0.34),
        hsla(0, 0%, 100%, 0.5)
    );
            stroke: var(--color-zulip-logo);
        }

.top-messages-logo svg path,.bottom-messages-logo svg path {
            --csstools-light-dark-toggle--885: var(--csstools-color-scheme--light) hsl(214, 27%, 18%);
            fill: hsl(0, 0%, 100%);
            fill: var(--csstools-light-dark-toggle--885, hsl(0, 0%, 100%));
            fill: light-dark(hsl(0, 0%, 100%), hsl(214, 27%, 18%));
            fill: var(--color-zulip-logo-z);
            --csstools-light-dark-toggle--886: var(--csstools-color-scheme--light) hsl(214, 27%, 18%);
            stroke: hsl(0, 0%, 100%);
            stroke: var(--csstools-light-dark-toggle--886, hsl(0, 0%, 100%));
            stroke: light-dark(hsl(0, 0%, 100%), hsl(214, 27%, 18%));
            stroke: var(--color-zulip-logo-z);
        }

.loading.top-messages-logo circle,.loading.bottom-messages-logo circle {
        --csstools-light-dark-toggle--887: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
        fill: hsl(0, 0%, 27%);
        fill: var(--csstools-light-dark-toggle--887, hsl(0, 0%, 27%));
        fill: light-dark(hsl(0, 0%, 27%), hsl(0, 0%, 100%));
        fill: var(--color-zulip-logo-loading);
        --csstools-light-dark-toggle--888: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
        stroke: hsl(0, 0%, 27%);
        stroke: var(--csstools-light-dark-toggle--888, hsl(0, 0%, 27%));
        stroke: light-dark(hsl(0, 0%, 27%), hsl(0, 0%, 100%));
        stroke: var(--color-zulip-logo-loading);
    }

.top-messages-logo {
    /* Since padding under message header is not transparent
       we need to position it below the padding. */
    padding-top: 10px;
    padding-top: var(--header-padding-bottom);
}

/* See https://web.dev/animations-guide/#triggers before adding any funny animation properties here. */
@keyframes feedback-slide-in {
    from {
        transform: translateY(-120%);
        opacity: 0;
    }

    to {
        transform: translateY(50px);
        opacity: 1;
    }
}

@keyframes feedback-slide-out {
    from {
        transform: translateY(50px);
        opacity: 1;
    }

    to {
        transform: translateY(-120%);
        opacity: 0;
    }
}

#feedback-container-content-wrapper {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    max-width: calc(100% - 20px);
    padding: 15px;
    background-color: var(--color-background-modal);
    border-radius: 5px;
    box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.25);
    box-sizing: border-box;
}

#feedback_container {
    display: none;
    position: fixed;
    width: 100%;
    z-index: 110;
}

@container app (width < 48em) {

#feedback_container {
        width: calc(90% - 30px);
        left: 5%;
        top: 5%;
}
    }

#feedback_container.show-feedback-container {
        display: block;
        animation: feedback-slide-in 0.6s forwards;
    }

#feedback_container.slide-out-feedback-container {
        animation: feedback-slide-out 0.6s;
    }

#feedback_container h3 {
        font-size: 16pt;
        margin-top: 2px;
        font-weight: 300;
    }

#feedback_container .exit-me {
        margin: 0 0 0 5px;
    }

#feedback_container .float-header {
        display: flex;
        align-items: center;
    }

#feedback_container .feedback-button-container {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

#navbar-fixed-container {
    position: fixed;
    top: 0;
    z-index: 102;
}

/* Adjust width of any fixed / absolute positioned elements that might be visible in
   the background when a overlay / modal is open. */
#navbar-fixed-container,
#compose {
    width: calc(100% - 0px);
    width: calc(100% - var(--disabled-scrollbar-width));
}

.header {
    width: 100%;
    height: 2.5em;
    height: var(--header-height);
    /* Since the headers are sticky, we need non-transparent background. */
    --csstools-light-dark-toggle--556: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--556, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);
    /* Add 1px box-shadow below header so that if there is a gap between sticky header
       and header at some zoom level, it is covered by this */
    --csstools-light-dark-toggle--557: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    box-shadow: 0 1px 0 0 hsl(0, 0%, 94%);
    box-shadow: 0 1px 0 0 var(--csstools-light-dark-toggle--557, hsl(0, 0%, 94%));
    box-shadow: 0 1px 0 0 light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    box-shadow: 0 1px 0 0 var(--color-background);
}

#navbar-middle .column-middle-inner,
.header,
#message_view_header {
    --csstools-light-dark-toggle--558: var(--csstools-color-scheme--light) hsl(0, 0%, 13%);
    background-color: hsl(0, 0%, 97%);
    background-color: var(--csstools-light-dark-toggle--558, hsl(0, 0%, 97%));
    background-color: light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 13%));
    background-color: var(--color-background-navbar);
    --csstools-light-dark-toggle--559: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    box-shadow: inset 0 -1px 0 hsl(0, 0%, 80%);
    box-shadow: inset 0 -1px 0 var(--csstools-light-dark-toggle--559, hsl(0, 0%, 80%));
    box-shadow: inset 0 -1px 0 light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    box-shadow: inset 0 -1px 0 var(--color-navbar-bottom-border);
}

.app {
    min-width: 100%;
    min-height: 100%;
    min-height: var(--full-height-dynamic-viewport);
    z-index: 99;
}

.app-main,
.header-main {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

/* Move simplebar scrollbar to the left so that
       browser scrollbar doesn't overlap with it. */

body.has-overlay-scrollbar .app-main .column-right .simplebar-track.simplebar-vertical {
        right: 10px;
        right: var(--browser-overlay-scrollbar-width);
    }

/* Styles for popovers rendered as an overlay at the
   center of the screen, primarily used in mobile sizes. */
#popover-overlay-background {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    /* Needs to be higher than the 105 for div.overlay so that the
       emoji picker can render on top of the user status picker. */
    z-index: 106;
    background-color: hsla(0, 0%, 0%, 0.7);
}

.white-space-preserve-wrap {
    white-space: pre-wrap;
}

.white-space-preserve {
    white-space: pre;
}

.white-space-nowrap {
    white-space: nowrap;
}

/* Set flex display on login buttons only in the
   spectator view. We want them to display none
   otherwise. */
.spectator-view #top_navbar .column-right .spectator_login_buttons {
    display: flex;
}

/* This applies to column-left both in navbar and app. */
.column-right {
    width: min(20vw, 20.57em);
    width: var(--right-sidebar-width);
    max-width: 20.57em;
    max-width: var(--right-sidebar-max-width);
    position: absolute;
    right: 0;
    top: 0;
}
.column-right .spectator_login_buttons {
        /* Allow the login buttons flexbox to
           grow and shrink to fit the available
           area. */
        flex: 1 1 0;
        /* Use a flexbox gap of 7px between the
           buttons to reflect the outer 7px of space. */
        gap: 7px;
        /* Don't allow login buttons flexbox to
           break out of the allotted right-column
           space. */
        overflow: hidden;
        /* This should be removed once the navbar
           has been rewritten entirely with modern
           layout methods. For now, we pull this up
           so that the buttons and search box are
           the same height and their boxes sit on the
           same invisible line. */
        margin-top: -1px;
        /* Prevent collisions with the search box. */
        margin-left: 15px;
    }
.column-right .spectator_login_buttons a {
            font-size: calc(16em / 14);
            /* Vertically size the buttons to
               match the search box. */
            line-height: 28px;
            font-weight: 450;
            letter-spacing: 0.03ch;
            /* Allow individual buttons to grow
               and shrink inside their containers,
               with padding to prevent text from
               sitting against the edge of the button. */
            flex: 1 1 0;
            padding: 0 4px;
            /* Center the text nodes within the
               flex items. */
            text-align: center;
            /* Internationalization: disallow wrapping,
               and display an ellipsis when there's not
               space enough to accommodate the button
               text. */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /* Button curvature and transitions. */
            border-radius: 4px;
            transition: transform 100ms ease-out;
        }
.column-right .spectator_login_buttons a:hover,.column-right .spectator_login_buttons a:focus {
                -webkit-text-decoration: none;
                text-decoration: none;
            }
.column-right .spectator_login_buttons a:active {
                transform: scale(0.98);
            }
.column-right .spectator_login_buttons a i {
                margin-right: 3px;
            }
.column-right .spectator_login_buttons .login_button {
            --csstools-light-dark-toggle--889: var(--csstools-color-scheme--light) hsl(240, 64%, 76%);
            color: hsl(240, 40%, 40%);
            color: var(--csstools-light-dark-toggle--889, hsl(240, 40%, 40%));
            color: light-dark(
        hsl(240, 40%, 40%),
        hsl(240, 64%, 76%)
    );
            color: var(
                --color-navbar-spectator-medium-attention-brand-button-text
            );
            --csstools-light-dark-toggle--890: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.12);
            background-color: hsla(244, 64%, 47%, 0.1);
            background-color: var(--csstools-light-dark-toggle--890, hsla(244, 64%, 47%, 0.1));
            background-color: light-dark(
        hsla(244, 64%, 47%, 0.1),
        hsla(240, 56%, 70%, 0.12)
    );
            background-color: var(
                --color-navbar-spectator-medium-attention-brand-button-background
            );
        }
.column-right .spectator_login_buttons .login_button:hover,.column-right .spectator_login_buttons .login_button:focus {
                --csstools-light-dark-toggle--891: var(--csstools-color-scheme--light) hsl(240, 64%, 76%);
                color: hsl(240, 40%, 40%);
                color: var(--csstools-light-dark-toggle--891, hsl(240, 40%, 40%));
                color: light-dark(
        hsl(240, 40%, 40%),
        hsl(240, 64%, 76%)
    );
                color: var(
                    --color-navbar-spectator-medium-attention-brand-button-text
                );
                --csstools-light-dark-toggle--892: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.17);
                background-color: hsla(244, 64%, 47%, 0.15);
                background-color: var(--csstools-light-dark-toggle--892, hsla(244, 64%, 47%, 0.15));
                background-color: light-dark(
        hsla(244, 64%, 47%, 0.15),
        hsla(240, 56%, 70%, 0.17)
    );
                background-color: var(
                    --color-navbar-spectator-medium-attention-brand-button-background-hover
                );
            }
.column-right .spectator_login_buttons .login_button:active {
                --csstools-light-dark-toggle--893: var(--csstools-color-scheme--light) hsl(240, 64%, 76%);
                color: hsl(240, 40%, 40%);
                color: var(--csstools-light-dark-toggle--893, hsl(240, 40%, 40%));
                color: light-dark(
        hsl(240, 40%, 40%),
        hsl(240, 64%, 76%)
    );
                color: var(
                    --color-navbar-spectator-medium-attention-brand-button-text
                );
                --csstools-light-dark-toggle--894: var(--csstools-color-scheme--light) hsla(240, 56%, 70%, 0.12);
                background-color: hsla(244, 64%, 47%, 0.18);
                background-color: var(--csstools-light-dark-toggle--894, hsla(244, 64%, 47%, 0.18));
                background-color: light-dark(
        hsla(244, 64%, 47%, 0.18),
        hsla(240, 56%, 70%, 0.12)
    );
                background-color: var(
                    --color-navbar-spectator-medium-attention-brand-button-background-active
                );
            }
.column-right .spectator_narrow_login_button {
        position: absolute;
        top: 0;
        right: 0;
        height: 2.5em;
        height: var(--header-height);
        width: 2.5em;
        width: var(--header-height);
    }
@media (min-width: 1200px) and (min-height: 600px) {
.column-right .spectator_narrow_login_button {
            display: none;
    }
        }
.column-right .spectator_narrow_login_button .login_button {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
.column-right .spectator_narrow_login_button .login_button:hover {
                -webkit-text-decoration: none;
                text-decoration: none;
            }
.column-right .spectator_narrow_login_button .login_button i {
                --csstools-light-dark-toggle--895: var(--csstools-color-scheme--light) hsl(240, 35%, 60%);
                color: hsl(240, 20%, 50%);
                color: var(--csstools-light-dark-toggle--895, hsl(240, 20%, 50%));
                color: light-dark(hsl(240, 20%, 50%), hsl(240, 35%, 60%));
                color: var(--color-navbar-icon);
                font-size: 1.6em;
            }

/* This applies to column-left both in navbar and app. */
.column-left {
    width: min(33.3333vw, calc(
        20.6429em - 12px
    ));
    width: var(--left-sidebar-width);
    max-width: min(33.3333vw, calc(
        20.6429em - 12px
    ));
    max-width: var(--left-sidebar-width);
    position: absolute;
    left: 0;
    top: 0;
}

.app-main .column-right.expanded,
.app-main .column-left.expanded {
    /* We share a baseline z-index to make
       sure overlays respect the .topmost-overlay
       below. */
    z-index: 10;
}

.app-main .column-right.expanded.topmost-overlay,
.app-main .column-left.expanded.topmost-overlay {
    z-index: 15;
}

#message_feed_container,
.app-main .column-left .left-sidebar,
.app-main .column-right .right-sidebar {
    padding-top: calc(
        (
        2.5em + 0px
    ) + 10px
    );
    padding-top: calc(
        calc(
        2.5em + 0px
    ) + 10px
    );
    padding-top: calc(
        var(--navbar-fixed-height) + var(--header-padding-bottom)
    );
}

.app-main {
    height: 100%;
    min-height: 100%;
    min-height: var(--full-height-dynamic-viewport);
}

.app-main::after {
        /* We use `content` values to determine
           viewport state from JavaScript; this
           hides the values without disrupting
           the document flow. */
        position: absolute;
        display: none;
    }

.app-main .column-left .left-sidebar,.app-main .column-right .right-sidebar {
        position: fixed;
        z-index: 100;
    }

.app-main .column-left .left-sidebar {
        width: min(33.3333vw, calc(
        20.6429em - 12px
    ));
        width: var(--left-sidebar-width);
        padding-left: 8px;
        padding-left: var(--left-sidebar-padding-left);
    }

.app-main .column-right .right-sidebar {
        box-sizing: border-box;
        padding-left: 5px;
        padding-left: var(--right-sidebar-left-spacing);
        width: min(20vw, 20.57em);
        width: var(--right-sidebar-width);
    }

.app-main .column-middle {
        min-height: 100%;
        min-height: var(--full-height-dynamic-viewport);
        /* We need `overflow-y: visible` for sticky headers to work. */
    }

/* We test for spec-aligned container query support
   using these styles. */
.container-query-test {
    /* Keep the test div from rendering. */
    visibility: hidden;
    /* Establish a container. */
    container: test-container / inline-size;
    /* Establish a positioning context that
       conforming browsers will ignore. */
    position: relative;
    top: 100px;
}
.container-query-test .container-query-test-child {
        /* Non-spec aligned browsers will keep
           this element to the top of the containing
           <div>; spec-aligned browsers move it to the
           top of the viewport. We check for this in
           information_density.ts */
        position: fixed;
        top: 0;
    }

/* With spec-aligned container support, we
       can establish em-aware containers to
       query as needed.
       Note that container queries can only
       act on children of the container, so
       at least for now, we include separate
       queries for #header-container in the
       navbar as well as .app-main in capable
       browsers.
    */

.with-container-query-support #header-container {
        container: header-container / inline-size;
    }

.with-container-query-support .app {
        container: app / inline-size;
    }

.column-middle,
#compose-content {
    margin-right: min(20vw, 20.57em);
    margin-right: var(--right-sidebar-width);
    margin-left: calc(
        min(33.3333vw, calc(
        20.6429em - 12px
    )) + 8px
    );
    margin-left: calc(
        var(--left-sidebar-width) + var(--left-sidebar-padding-left)
    );
    position: relative;
}

/* Override browsers that use
   `cursor: default` */
label,
button {
    cursor: pointer;
}

/* Override Bootstrap's fixed sizes for various elements */
label {
    font-size: inherit;
    line-height: inherit;
}

button:focus {
    outline: 0;
}

/* Bootstrap's focus outline uses -webkit-focus-ring-color which doesn't exist in Firefox */
a:not(:active):focus,
button:focus-visible,
label.checkbox input[type="checkbox"]:focus ~ .rendered-checkbox,
i.fa:focus,
i.zulip-icon:focus-visible,
[role="button"]:focus {
    outline: 2px solid hsl(215, 47%, 50%);
    outline: 2px solid var(--color-outline-focus);
    /* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
}

/* List of text-like input types taken from Bootstrap */
input[type="text"]:not(.input-element),input[type="password"]:not(.input-element),input[type="email"]:not(.input-element),input[type="url"]:not(.input-element),input[type="color"]:not(.input-element) {
        font-size: inherit;
        height: 1.4em;
        --csstools-light-dark-toggle--601: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--601, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
        background-color: var(--color-background-legacy-input);
        --csstools-light-dark-toggle--602: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
        border-color: hsl(0, 0%, 80%);
        border-color: var(--csstools-light-dark-toggle--602, hsl(0, 0%, 80%));
        border-color: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
        border-color: var(--color-border-legacy-input);
    }
input[type="text"]:not(.input-element):focus,input[type="password"]:not(.input-element):focus,input[type="email"]:not(.input-element):focus,input[type="url"]:not(.input-element):focus,input[type="color"]:not(.input-element):focus {
            --csstools-light-dark-toggle--896: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
            border-color: hsla(206, 80%, 62%, 0.8);
            border-color: var(--csstools-light-dark-toggle--896, hsla(206, 80%, 62%, 0.8));
            border-color: light-dark(
        hsla(206, 80%, 62%, 0.8),
        hsla(0, 0%, 0%, 0.9)
    );
            border-color: var(--color-border-legacy-input-focus);
        }

li,
.table th,
.table td {
    line-height: inherit;
}

/* Classes which style copy buttons */
.copy_button_base {
    outline-color: hsl(0, 0%, 73%);
    height: 18px;
    width: 10px;
    padding: 6px;
    display: block;
    /* The below two avoids the padded element from displaying
    its own border and background color */
    border: none;
    background-clip: content-box;
}
.copy_button_base:hover svg path {
        fill: hsl(200, 100%, 40%);
        fill: var(--color-fill-hover-copy-icon);
    }

.copy_message {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 1em;
    backdrop-filter: blur(20px);
    --csstools-light-dark-toggle--560: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
    outline: 1px solid rgba(84, 87, 100, 0.11);
    outline: 1px solid var(--csstools-light-dark-toggle--560, rgba(84, 87, 100, 0.11));
    outline: 1px solid light-dark(
        
        rgba(84, 87, 100, 0.11),
        
        rgba(144, 147, 162, 0.18)
    );
    outline: 1px solid var(--color-copy-button-square-bg-active);
}

/* Classes for hiding and showing controls */

.notdisplayed {
    display: none !important;
}

.notvisible {
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
}

/* Lighter strong */

strong {
    font-weight: 600;
}

.preserve_spaces {
    white-space: pre-wrap;
}

.logout {
    white-space: nowrap;
}

.buddy_list_tooltip_content {
    text-align: left;
    word-wrap: break-word;
    /* 280px at 14px/1em */
    max-width: 20em;
}

#change_visibility_policy_button_tooltip {
    text-align: left;
}

#change_visibility_policy_button_tooltip .tooltip-privacy-icon {
        position: relative;
        display: inline-block;
    }

#change_visibility_policy_button_tooltip .tooltip-privacy-icon .zulip-icon-lock {
        margin-top: -0.15em !important;
    }

#change_visibility_policy_button_tooltip .tooltip-privacy-icon i {
        position: absolute;
        top: 0.1667em;
    }

#change_visibility_policy_button_tooltip .privacy-tooltip-stream-name {
        margin-left: 1.25em;
    }

.narrow-filter {
    display: block;
    position: relative;
}

@keyframes pulse-unread {
    /* Only unread dots in collapsed Views
       have offset variables set; all others
       will fall back to 0 (no offset). */
    0% {
        transform: scale(1) translateX(0);
        transform: scale(1) translateX(var(--unread-dot-x-offset, 0));
    }

    50% {
        transform: scale(1.5)
            translateX(0);
        transform: scale(var(--pulse-unread-scale-max))
            translateX(var(--unread-dot-x-offset-scaled, 0));
    }

    100% {
        transform: scale(1) translateX(0);
        transform: scale(1) translateX(var(--unread-dot-x-offset, 0));
    }
}

.new-unread .unread_count {
    animation: 2s ease-in-out 2 pulse-unread;
}

.messagebox-content .slow-send-spinner {
    display: block;
    font-size: 0.8571em; /* 12px at 14px/em */
    text-align: right;
    opacity: 0.8;
    --csstools-light-dark-toggle--561: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--561, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    animation: rotate 1s infinite linear;
}

.star:hover {
        cursor: pointer;
    }

.copy-paste-text {
    /* Hide the text that we want copy paste to capture */
    position: absolute;
    left: -99999px;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

@keyframes fadeInMessage {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeInEditNotice {
    0% {
        transform: translateX(-10px);
    }

    100% {
        transform: translateX(0);
    }
}

.selected_message .messagebox-content {
        /* We add an outline and shift it inside the message so that without
           any vertical padding changes, we can have the outline surrounding
           the message without overflowing the boundary of the message in any case. */
        --csstools-light-dark-toggle--603: var(--csstools-color-scheme--light) hsla(217, 64%, 59%, 0.7);
        outline: 1px solid hsla(217, 64%, 59%, 0.6);
        outline: 1px solid var(--csstools-light-dark-toggle--603, hsla(217, 64%, 59%, 0.6));
        outline: 1px solid light-dark(
        hsla(217, 64%, 59%, 0.6),
        hsla(217, 64%, 59%, 0.7)
    );
        outline: 1px solid var(--color-selected-message-outline);
        border-radius: 5px;
        outline-offset: -1px;
    }

@media (hover: none) {
        .selected_msg_for_touchscreen .message_reactions .reaction_button {
            visibility: visible;
            pointer-events: all;
        }
    }

/* Make the action icon on the message row
   always visible while the popover is open */
.has_actions_popover .actions_hover {
    visibility: visible !important;
    pointer-events: all !important;
    opacity: 1 !important;
}
.has_actions_popover .actions_hover i:focus {
        /* Avoid displaying a focus outline outside the popover on the \vdots
           icon when opened via the mouse. */
        outline: 0 !important;
    }

.has_actions_popover .info {
    opacity: 1;
    visibility: visible;
}

.small {
    font-size: 80%;
}

.tiny {
    font-size: 60%;
}

div.message-list {
    border-collapse: separate;
    margin-left: auto;
    display: none;
    width: 100%;
}

div.focused-message-list {
    display: block;
}

/* In conversation view, always show the recipient bar action buttons */
div.focused-message-list.is-conversation-view .recipient_row .recipient_bar_controls {
        opacity: 1;
        transition: opacity 0.15s ease-in;
    }

.rtl {
    direction: rtl;
}

.topic_edit {
    display: none;
    flex-grow: 1;
}

.topic_edit .alert {
        display: inline-block;
        margin: 0;
        padding: 0 10px;
        line-height: 17px;
    }

.topic_edit_form {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding-right: 5px;
    position: relative;
}

.inline_topic_edit {
    flex: 1;
    line-height: 1.2142em;
    padding: 0 5px;
    --csstools-light-dark-toggle--604: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--604, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    border-radius: 4px;
    border: 1px solid hsl(0, 0%, 80%);
    font-family: inherit;

    transition:
        border-color linear 0.2s, box-shadow linear 0.2s;
}

.inline_topic_edit:focus {
        border-color: hsla(206, 80%, 62%, 0.8);
        outline: 0;
        box-shadow:
            inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
            0 0 8px hsla(206, 80%, 62%, 0.6);
    }

.inline_topic_edit.empty-topic-display::-moz-placeholder {
        color: inherit;
    }

.inline_topic_edit.empty-topic-display::placeholder {
        color: inherit;
    }

.inline-topic-edit-placeholder {
    position: absolute;
    left: 5px;
    max-width: 65%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    visibility: hidden;
}

.inline-topic-edit-placeholder-visible {
    visibility: visible;
}

.topic_edit_save {
    --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    border-color: hsla(0, 0%, 0%, 0.1);
    border-color: var(--csstools-light-dark-toggle--19, hsla(0, 0%, 0%, 0.1));
    border-color: light-dark(hsla(0, 0%, 0%, 0.1), hsla(0, 0%, 0%, 0.6));
    border-width: 1px;
    border-style: solid;
    background-clip: padding-box;
}

.topic_edit_save,
.topic_edit_cancel {
    /* Adjust top and bottom padding to fit into the recipient row. */
    padding: 0.125em 0.625em; /* 2px 10px at 16px/em */
}

.information-settings .user-profile-picture,
.user_sidebar_entry.with_avatar .user-profile-picture,
.inline_profile_picture {
    display: inline-block;
    /* Don't inherit the line-height from message-avatar;
       this preserves the dimensions and rounded corners
       on the image itself. */
    line-height: 1;
    vertical-align: top;
    border-radius: 4px;
    overflow: hidden;
}

.information-settings .user-profile-picture.guest-avatar:not(.does-not-exist)::after {
        outline: 2px solid hsl(0, 0%, 100%);
    }

.user_sidebar_entry.with_avatar .user-profile-picture.guest-avatar::after {
        outline: 2px solid hsl(0, 0%, 100%);
    }

.guest-avatar.inline_profile_picture:not(.does-not-exist):not(.does-not-exist)::after {
        outline: 2px solid hsl(0, 0%, 100%);
    }

.inline_profile_picture {
    width: 2.5em;
    width: var(--message-box-avatar-width);
    height: 2.5em;
    height: var(--message-box-avatar-height);
}

.information-settings .user-profile-picture,
.user_sidebar_entry.with_avatar .user-profile-picture {
    width: 2em;
    width: var(--right-sidebar-avatar-width);
    height: 2em;
    height: var(--right-sidebar-avatar-height);
    margin-right: 0.85ch;
    margin-right: var(--right-sidebar-avatar-right-margin);
}

.streamname {
    font-weight: bold;
}

.top-navbar-container {
    /* Calculate right margin so that title and description
       elements can truncate and not collide with or run underneath
       with the search section. */
    margin-right: calc(
        9.375em + 5px
    );
    margin-right: calc(
        var(--search-box-width) + var(--navbar-content-righthand-offset)
    );
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-navbar-container-allow-description-extension {
    overflow: visible;
}

#streamlist-toggle {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

.hide-streamlist-toggle-visibility,
.hide-navbar-buttons-visibility {
    visibility: hidden;
}

#header-container .left-sidebar-toggle-button {
    -webkit-text-decoration: none;
    text-decoration: none;
    --csstools-light-dark-toggle--605: var(--csstools-color-scheme--light) hsl(240, 35%, 60%);
    color: hsl(240, 20%, 50%);
    color: var(--csstools-light-dark-toggle--605, hsl(240, 20%, 50%));
    color: light-dark(hsl(240, 20%, 50%), hsl(240, 35%, 60%));
    color: var(--color-navbar-icon);
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 2.5em;
    width: var(--header-height);
    height: 2.5em;
    height: var(--header-height);
}

#header-container .left-sidebar-toggle-button:hover {
        --csstools-light-dark-toggle--897: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.04);
        background-color: hsla(0, 0%, 0%, 0.05);
        background-color: var(--csstools-light-dark-toggle--897, hsla(0, 0%, 0%, 0.05));
        background-color: light-dark(
        hsla(0, 0%, 0%, 0.05),
        hsla(0, 0%, 100%, 0.04)
    );
        background-color: var(--color-header-button-hover);
    }

#header-container .left-sidebar-toggle-button:hover .left-sidebar-toggle-unreadcount {
            --csstools-light-dark-toggle--898: var(--csstools-color-scheme--light) rgb(42, 42, 42);
            border-color: rgb(235, 235, 235);
            border-color: var(--csstools-light-dark-toggle--898, rgb(235, 235, 235));
            border-color: light-dark(
        rgb(235, 235, 235),
        rgb(42, 42, 42)
    );
            border-color: var(--color-header-button-hover-no-alpha);
        }

#header-container .left-sidebar-toggle-button:active {
        --csstools-light-dark-toggle--899: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
        background-color: hsla(0, 0%, 0%, 0.08);
        background-color: var(--csstools-light-dark-toggle--899, hsla(0, 0%, 0%, 0.08));
        background-color: light-dark(
        hsla(0, 0%, 0%, 0.08),
        hsla(0, 0%, 100%, 0.07)
    );
        background-color: var(--color-header-button-focus);
    }

#header-container .left-sidebar-toggle-button:focus {
        outline: 0;
    }

#header-container .left-sidebar-toggle-button:focus-visible {
        outline: none;
        --csstools-light-dark-toggle--900: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
        background-color: hsla(0, 0%, 0%, 0.08);
        background-color: var(--csstools-light-dark-toggle--900, hsla(0, 0%, 0%, 0.08));
        background-color: light-dark(
        hsla(0, 0%, 0%, 0.08),
        hsla(0, 0%, 100%, 0.07)
    );
        background-color: var(--color-header-button-focus);
    }

#header-container .left-sidebar-toggle-button:active .left-sidebar-toggle-unreadcount {
            --csstools-light-dark-toggle--901: var(--csstools-color-scheme--light) rgb(49, 49, 49);
            border-color: rgb(228, 228, 228);
            border-color: var(--csstools-light-dark-toggle--901, rgb(228, 228, 228));
            border-color: light-dark(
        rgb(228, 228, 228),
        rgb(49, 49, 49)
    );
            border-color: var(--color-header-button-focus-no-alpha);
        }

#header-container .left-sidebar-toggle-button:focus-visible .left-sidebar-toggle-unreadcount {
            --csstools-light-dark-toggle--902: var(--csstools-color-scheme--light) rgb(49, 49, 49);
            border-color: rgb(228, 228, 228);
            border-color: var(--csstools-light-dark-toggle--902, rgb(228, 228, 228));
            border-color: light-dark(
        rgb(228, 228, 228),
        rgb(49, 49, 49)
    );
            border-color: var(--color-header-button-focus-no-alpha);
        }

.left-sidebar-toggle-unreadcount {
    position: absolute;
    display: none;
    /* 6px at 16px/1em */
    height: 0.375em;
    width: 0.375em;
    --csstools-light-dark-toggle--562: var(--csstools-color-scheme--light) hsl(240, 35%, 60%);
    background-color: hsl(240, 20%, 50%);
    background-color: var(--csstools-light-dark-toggle--562, hsl(240, 20%, 50%));
    background-color: light-dark(hsl(240, 20%, 50%), hsl(240, 35%, 60%));
    background-color: var(--color-navbar-icon);

    /* 2px at 16px/1em */
    --csstools-light-dark-toggle--563: var(--csstools-color-scheme--light) hsl(0, 0%, 13%);
    border: 0.125em solid hsl(0, 0%, 97%);
    border: 0.125em solid var(--csstools-light-dark-toggle--563, hsl(0, 0%, 97%));
    border: 0.125em solid light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 13%));
    border: 0.125em solid var(--color-background-navbar);
    /* 6px at 16px/1em */
    border-radius: 0.375em;
    padding: 0;

    /* At 16px/1em, the toggle icon is 20px on a side, which is
       half the width of its container (40px on a side). To
       place the 10px-wide unread counter correctly, then, we
       set it to 25% of the right of the container, or 10px,
       and likewise 25% down from the top of the container,
       also 10px. */

    top: 25%;
    right: 25%;
}

nav .column-left {
        text-align: left;
        display: flex;
        justify-content: left;
        gap: 4px;
    }

nav .column-left .brand {
            display: flex;
            align-items: center;
        }

nav .column-left .nav-logo {
            display: inline-block;
            height: 1.25em; /* 20px at 16px em */
            max-width: 12.5em;
            max-width: var(--realm-logo-max-width);
        }

@media (max-height: 599.98px) {

nav .column-left .nav-logo {
                height: 0.9375em; /* 15px at 16px em */
        }
            }

nav .column-left .left-sidebar-toggle-button .left-sidebar-toggle-unreadcount {
            /* The toggle icon is half the width of its container
            and is at the center of the container.
            So, the left width starts from left 25% of the container
            and ends till 75% of the container's width.
            Similarly, vertically, the dot is starts at the top 25% of
            the container's height and ends at 75% of the total height

            So, the top right corner of the icon is at 25% from top and
            75% from the right. This is the location where we place the
            unread indicator dot. */
            top: 25%;
            right: 25%;
        }

nav a.no-style:hover {
            -webkit-text-decoration: none;
            text-decoration: none;
            cursor: pointer;
        }

nav a .no-style {
            -webkit-text-decoration: none;
            text-decoration: none;
        }

#bottom_whitespace {
    display: block;
    height: 40vh;
    height: var(--max-unmaximized-compose-height);
}

.operator_value {
    font-family: "Source Code Pro", monospace;
    color: hsl(353, 70%, 65%);
}

.operator {
    font-family: "Source Code Pro", monospace;
}

#loading_older_messages_indicator,
#loading_more_indicator {
    margin: 10px;
}

#loading_older_messages_indicator_box_container,
#loading_more_indicator_box_container {
    position: absolute;
    left: 50%;

    /* Override the base rules in app_components.css, which would require
       coordination with loading.make_indicator */
}

#loading_older_messages_indicator_box_container .loading_indicator_spinner,#loading_more_indicator_box_container .loading_indicator_spinner {
        height: 2.7143em; /* 38px at 14px/em */
        width: 2.7143em; /* 38px at 14px/em */
    }

#loading_older_messages_indicator_box,
#loading_more_indicator_box {
    position: relative;
    left: -1.3571em; /* 50% of 38px = 19px at 14px/em */
    top: -3.0714em; /* -43px at 14px/em */
    z-index: 1;
    border-radius: 6px;
}

#page_loading_indicator {
    margin: 10px auto;
}

#page_loading_indicator_box_container {
    position: absolute;
    left: 50%;
}

#page_loading_indicator_box {
    position: relative;
    /* 50% of 38px = 19px at 14px/1em */
    left: -1.3571em;
    /* -43px at 14px/1em */
    top: -3.0714em;
    z-index: 1;
    border-radius: 6px;
}

#create_stream_subscribers {
    margin-top: 10px;
}

#create_stream_subscribers .checkbox {
        display: block;
    }

#create_stream_subscribers .checkbox input[type="checkbox"] {
            margin: 5px 0;
            float: none;
        }

.sub_button_row {
    text-align: center;
}

div.topic_edit_spinner {
    display: flex;
    align-items: center;
    width: 1.2em; /* 18px at 15px/em  (from font size set in .message-header-contents) */
    height: 1.2em; /* 18px at 15px/em */
}

div.topic_edit_spinner .loading_indicator_spinner {
    width: 0.9333em; /* 14px at 15px/em  (from font size set in .message-header-contents) */
    height: 0.9333em; /* 14px at 15px/em */
}

div.topic_edit_spinner .loading_indicator_spinner path {
        fill: var(--color-recipient-bar-controls-spinner);
    }

.custom-time-input-value,
#invite-user-form {
    margin: 0;
}

.invite-user-select {
    vertical-align: middle;
}

.invite-user-modal-banners {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invite-user-modal-banners:has(.banner) {
        /* Only apply bottom margin if there is a banner present. */
        margin-bottom: 10px;
    }

.invite-user-modal-banners .banner-wrapper:empty {
        /* Avoid unnecessary spacing between empty banner
           wrappers due to the flex gap property. */
        display: none;
    }

.copy-invite-link-banner .banner-content {
        white-space: nowrap;
    }

.copy-invite-link-banner .banner-label {
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
    }

@container banner (width >= 25em) {
    #copy_generated_invite_link .action-button-label {
        display: none;
    }
}

.invite-tips-list {
    /* Override default bottom margin of ul tags in bootstrap. */
    margin-bottom: 0;
}

#invite-user-form .loading_indicator_spinner {
    height: 1em;
    width: -moz-fit-content;
    width: fit-content;
    display: inline-block;
    float: none;
    margin: 0 5px;
}

.add-user-group-container,
.add_streams_container {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

#invite_welcome_custom_message_text {
    height: 8em;
}

.custom-time-input-value {
    width: 5ch;
    margin-right: 15px;

    padding: 4px 6px;

    padding: var(--input-vertical-padding) var(--input-horizontal-padding);
    --csstools-light-dark-toggle--606: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--606, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    border-radius: 4px;
    --csstools-light-dark-toggle--607: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    border: 1px solid hsl(0, 0%, 80%);
    border: 1px solid var(--csstools-light-dark-toggle--607, hsl(0, 0%, 80%));
    border: 1px solid light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    border: var(--input-border-width) solid var(--color-border-legacy-input);
    --csstools-light-dark-toggle--608: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    background-color: hsl(0, 0%, 100%);
    background-color: var(--csstools-light-dark-toggle--608, hsl(0, 0%, 100%));
    background-color: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    background-color: var(--color-background-legacy-input);
    box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
    transition:
        border-color linear 0.2s, box-shadow linear 0.2s;
    font-family: inherit;
}

.custom-time-input-value:focus {
        --csstools-light-dark-toggle--609: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
        border-color: hsla(206, 80%, 62%, 0.8);
        border-color: var(--csstools-light-dark-toggle--609, hsla(206, 80%, 62%, 0.8));
        border-color: light-dark(
        hsla(206, 80%, 62%, 0.8),
        hsla(0, 0%, 0%, 0.9)
    );
        border-color: var(--color-border-legacy-input-focus);
        outline: 0;
        box-shadow:
            inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
            0 0 8px hsla(206, 80%, 62%, 0.6);
    }

.custom-time-input-unit {
    width: auto;
}

.empty_feed_notice {
    max-width: 42.8571em;
    margin: 0 auto;
    padding: 3em 1em;
    text-align: center;
}

.empty-feed-notice-title {
    font-size: 1.5em;
    font-weight: 400;
    line-height: inherit;
    margin: 10px 0;
    word-wrap: break-word;
}

.empty-feed-notice-description {
    font-size: 1.1em;
}

.empty-feed-notice-description .search-query-word {
        word-wrap: break-word;
    }

.empty-feed-notice-action {
    display: none;
    font-size: 1.1em;
}

.empty-feed-notice-action .search-shared-history {
        display: inline-block;
        margin-top: 10px;
    }

.message-fade,
.user_sidebar_entry.user-fade {
    opacity: 0.4;
}

.emoji {
    height: 25px;
    width: 25px;
    /* Maintain `vertical-align` for inline-block styles in messages: */
    vertical-align: middle;
    /* But, for all others, use flexbox and its align-self property.
      What is excellent about this is that flexbox will ignore the
      `vertical-align` value, while inline-block contexts will ignore
      the `align-self` property: */
    align-self: center;
}

.status-emoji {
    /* 16px at 14px/1em */
    height: 1.1429em;
    width: 1.1429em;
    /* We are setting minimum width here because when the user's name is very long,
    emoji's width decreases and causes it to break. */
    min-width: 1.1429em;
    /* In most contexts, status emoji appear immediately after a name
      field with no margin. Position the status emoji with 3px of left
      margin to space it from the name, and set no right margin so
      that any components to the right appear equally distant as they
      would be from a name. */
    margin-left: 3px;
    margin-right: 0;
}

#pw_strength {
    width: 100%;
    height: 10px;
    margin-bottom: 0;
}

.screen {
    position: absolute;
    left: 0;
    top: 0;
    background-color: hsl(0, 0%, 0%);
    z-index: 20000;
}

.deactivated_user .deactivated-user-icon {
    color: inherit;
    margin-left: 2px;
    font-size: 0.9em;
}

.no-drag {
    -webkit-user-drag: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

/* Hide the up and down arrows in the Flatpickr datepicker year */

.flatpickr-calendar .flatpickr-months .numInputWrapper span {
        display: none;
    }

.flatpickr-calendar .flatpickr-time-separator {
        position: relative;
        left: 5px;
    }

.flatpickr-calendar .flatpickr-time input {
        margin: 0 5px;
        min-height: 30px;
    }

.flatpickr-calendar .flatpickr-confirm {
        color: hsl(0, 0%, 100%);
        background-color: hsl(213, 90%, 65%);
        font-size: 18px;
        font-size: var(--flatpickr-confirm-button-font-size);
        font-weight: 600;
    }

@media (max-width: 767.98px) {

.flatpickr-calendar {
        /* Center align flatpickr on mobile
         * devices so that it doesn't go out of
         * the viewport. */
        left: 0 !important;
        right: 0 !important;
        margin: auto;
}

        .flatpickr-calendar::after,.flatpickr-calendar::before {
            border-top-width: 0 !important;
        }
    }

#about-zulip .exit {
        font-size: 1.5rem;
        font-weight: 600;
        font-family: inherit;
        background-color: transparent;
        border: none;
        position: absolute;
        right: 8px;
        z-index: 1;
        color: hsl(0, 0%, 67%);
    }

#about-zulip .overlay-content {
        width: 440px;
        border-radius: 4px;
    }

#about-zulip .zulip-version-info,#about-zulip .zulip-merge-base-info {
        display: flex;
        align-items: center;
        gap: 5px;
    }

#about-zulip .about-zulip-logo {
        text-align: center;
        margin: 30px;
    }

#about-zulip .about-zulip-logo img {
        height: 40px;
    }

#about-zulip .overlay-body {
        max-height: 60vh;
        padding: 15px;
    }

@media (max-width: 1199.98px) or (max-height: 599.98px) {
        .spectator-view #navbar-middle {
            /* = (width of button, square with header) * 3 (number of buttons) + 10px extra margin. */
            margin-right: calc(2.5em * 3 + 10px);
            margin-right: calc(var(--header-height) * 3 + 10px);
        }

        .spectator-view #help-menu,.spectator-view #gear-menu {
            position: relative;
            right: 2.5em;
            right: var(--header-height);
        }

        .spectator-view #top_navbar .column-right .spectator_login_buttons {
            display: none;
        }

    .header-main .column-right {
        /* For a diminutive right column in the navbar,
           allow the width to be that of the flexing
           button elements. */
        width: auto;
    }
}

@media (max-width: 767.98px) {
        .spectator-view #navbar-middle {
            /* = (width of button, square with header) * 3 (number of buttons) */
            margin-right: calc(2.5em * 3);
            margin-right: calc(var(--header-height) * 3);
        }

        .spectator-view .header-main .column-right {
            width: calc(2.5em * 3);
            width: calc(var(--header-height) * 3);
        }
}

.hide-right-sidebar .app-main .column-right {
        display: none;
    }

.hide-right-sidebar .app-main .column-right.expanded {
            /* In the extended state, we open the sidebar
               to its maximum possible size (otherwise, it
               would be unnecessarily too narrow). */
            --right-sidebar-width: var(--right-sidebar-max-width);
            display: block;
            position: absolute;
            float: none;
            right: 15px;
            top: 0;
    }

.hide-right-sidebar .app-main .column-right.expanded .simplebar-track.simplebar-vertical {
                right: 0;
    }

.hide-right-sidebar .app-main .column-right.expanded .right-sidebar {
                box-shadow: 0 -2px 3px 0 hsla(0, 0%, 0%, 0.1);
                --csstools-light-dark-toggle--903: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
                border-left: 1px solid hsl(0, 0%, 87%);
                border-left: 1px solid var(--csstools-light-dark-toggle--903, hsl(0, 0%, 87%));
                border-left: 1px solid light-dark(hsl(0, 0%, 87%), hsla(0, 0%, 0%, 0.2));
                border-left: 1px solid var(--color-border-sidebar);
                height: 100%;
                width: min(20vw, 20.57em);
                width: var(--right-sidebar-width);
                right: 0;
                --csstools-light-dark-toggle--904: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
                background-color: hsl(0, 0%, 94%);
                background-color: var(--csstools-light-dark-toggle--904, hsl(0, 0%, 94%));
                background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
                background-color: var(--color-background);
    }

.hide-right-sidebar #navbar-middle {
        margin-right: 10.15em;
        margin-right: var(--right-column-collapsed-sidebar-width);
    }

.hide-right-sidebar #compose-content,.hide-right-sidebar .app-main .column-middle {
        margin-right: 7px;
    }

.hide-right-sidebar-by-visibility .app-main .column-right {
    visibility: hidden;
}

.left-sidebar-toggle-button .zulip-icon-panel-left {
    display: none;
}

.column-middle.expanded .left-sidebar-toggle-button .zulip-icon-panel-left {
        display: none;
    }

.column-middle.expanded .left-sidebar-toggle-button .zulip-icon-panel-left-dashed {
        display: block;
    }

.hide-left-sidebar .app-main .left-sidebar-toggle-button .zulip-icon-panel-left {
        display: block;
    }

.hide-left-sidebar .app-main .left-sidebar-toggle-button .zulip-icon-panel-left-dashed {
        display: none;
    }

.hide-left-sidebar .app-main .column-left {
        display: none;
    }

.hide-left-sidebar .app-main .column-left.expanded {
            /* In the extended state, we open the sidebar
               to its maximum possible size (otherwise, it
               would be unnecessarily too narrow). */
            --left-sidebar-width: var(--left-sidebar-max-width);
            display: block;
            position: absolute;
            float: none;
            left: 0;
            top: 0;
    }

.hide-left-sidebar .app-main .column-left.expanded .left-sidebar {
                --csstools-light-dark-toggle--905: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
                background-color: hsl(0, 0%, 94%);
                background-color: var(--csstools-light-dark-toggle--905, hsl(0, 0%, 94%));
                background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
                background-color: var(--color-background);
                box-shadow: 0 2px 3px 0 hsla(0, 0%, 0%, 0.1);
                --csstools-light-dark-toggle--906: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
                border-right: 1px solid hsl(0, 0%, 87%);
                border-right: 1px solid var(--csstools-light-dark-toggle--906, hsl(0, 0%, 87%));
                border-right: 1px solid light-dark(hsl(0, 0%, 87%), hsla(0, 0%, 0%, 0.2));
                border-right: 1px solid var(--color-border-sidebar);
                height: 100%;
                padding-left: 10px;
                width: min(33.3333vw, calc(
        20.6429em - 12px
    ));
                width: var(--left-sidebar-width);
    }

.hide-left-sidebar #compose-content,.hide-left-sidebar .app-main .column-middle {
        margin-left: 7px;
    }

@container header-container (width > 48em) {
        .hide-left-sidebar #navbar-middle {
            margin-left: calc(
        2.5em + 12.5em + 10px
    );
            margin-left: var(--middle-column-left-margin-fluid-layout);
        }
    }

@container header-container (width < 75em) {
        .hide-left-sidebar #top_navbar .column-left {
            width: auto;
        }
    }

@container header-container (width < 48em) {
        .hide-left-sidebar #navbar-middle {
            margin-left: 0;
        }
    }

@container app (width < 75em) {
        .hide-left-sidebar #compose-content,.hide-left-sidebar .app-main .column-middle {
            margin-left: 7px;
        }
    }

/* Media-query fallback for the cinched-up logo presentation. */
@media (min-width: 768.02px) {
            .without-container-query-support.hide-left-sidebar #navbar-middle {
                margin-left: calc(
        2.5em + 12.5em + 10px
    );
                margin-left: var(--middle-column-left-margin-fluid-layout);
            }
}

/* User can clearly see the unread count in the left sidebar. So,
       we don't need an indicator here as it will only serve as a disctraction. */

body:not(.hide-left-sidebar) #header-container .column-left .left-sidebar-toggle-unreadcount {
        display: none !important;
    }

/* The large Log In button for spectators makes this rule
       inappropriate for that view. */

@container header-container (width < 75em) {
        body:not(.spectator-view) #navbar-middle {
            /* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
            margin-right: 10.15em;
            margin-right: var(--right-column-collapsed-sidebar-width);
        }
    }

/* We have some regrettable but temporarily necessary code duplication
   in the queries that follow.

   In browsers that support spec-aligned, em-aware container queries,
   we query on the app-main container. That enables breakpoints that
   look best at a chose base font size.

   However, in browsers that lag the spec, we fall back to the original
   media queries. The layout will not look as good as it could, but
   essential scrolling behavior will be maintained. */

@container app (width < 75em) {
    .app-main .column-right {
        display: none;
    }
    .app-main .column-right.expanded {
            /* In the extended state, we open the sidebar
               to its maximum possible size (otherwise, it
               would be unnecessarily too narrow). */
            --right-sidebar-width: var(--right-sidebar-max-width);
            display: block;
            position: absolute;
            float: none;
            right: 15px;
            top: 0;
    }
    .app-main .column-right.expanded .simplebar-track.simplebar-vertical {
                right: 0;
    }
    .app-main .column-right.expanded .right-sidebar {
                box-shadow: 0 -2px 3px 0 hsla(0, 0%, 0%, 0.1);
                --csstools-light-dark-toggle--903: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
                border-left: 1px solid hsl(0, 0%, 87%);
                border-left: 1px solid var(--csstools-light-dark-toggle--903, hsl(0, 0%, 87%));
                border-left: 1px solid light-dark(hsl(0, 0%, 87%), hsla(0, 0%, 0%, 0.2));
                border-left: 1px solid var(--color-border-sidebar);
                height: 100%;
                width: min(20vw, 20.57em);
                width: var(--right-sidebar-width);
                right: 0;
                --csstools-light-dark-toggle--904: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
                background-color: hsl(0, 0%, 94%);
                background-color: var(--csstools-light-dark-toggle--904, hsl(0, 0%, 94%));
                background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
                background-color: var(--color-background);
    }

        .app-main .column-middle {
            margin-right: 7px;
        }

    #typing_notifications,
    #scheduled_message_indicator,
    #compose-content {
        margin-right: 7px;
    }
}

@container header-container (width < 48em) {
    .header-main .column-left {
        display: none;
    }

    #navbar-middle {
        margin-left: 0;
    }

    #streamlist-toggle {
        display: block;
    }

    .top-navbar-container {
        /* The --header-height variable is used to make
        the squared toggle area, so we offset it
        accordingly. */
        margin-left: 2.5em;
        margin-left: var(--header-height);
    }
}

@container app (width < 48em) {
    .app-main .left-sidebar-toggle-button .zulip-icon-panel-left {
        display: block;
    }
    .app-main .left-sidebar-toggle-button .zulip-icon-panel-left-dashed {
        display: none;
    }
    .app-main .column-left {
        display: none;
    }
    .app-main .column-left.expanded {
            /* In the extended state, we open the sidebar
               to its maximum possible size (otherwise, it
               would be unnecessarily too narrow). */
            --left-sidebar-width: var(--left-sidebar-max-width);
            display: block;
            position: absolute;
            float: none;
            left: 0;
            top: 0;
    }
    .app-main .column-left.expanded .left-sidebar {
                --csstools-light-dark-toggle--905: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
                background-color: hsl(0, 0%, 94%);
                background-color: var(--csstools-light-dark-toggle--905, hsl(0, 0%, 94%));
                background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
                background-color: var(--color-background);
                box-shadow: 0 2px 3px 0 hsla(0, 0%, 0%, 0.1);
                --csstools-light-dark-toggle--906: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
                border-right: 1px solid hsl(0, 0%, 87%);
                border-right: 1px solid var(--csstools-light-dark-toggle--906, hsl(0, 0%, 87%));
                border-right: 1px solid light-dark(hsl(0, 0%, 87%), hsla(0, 0%, 0%, 0.2));
                border-right: 1px solid var(--color-border-sidebar);
                height: 100%;
                padding-left: 10px;
                width: min(33.3333vw, calc(
        20.6429em - 12px
    ));
                width: var(--left-sidebar-width);
    }

        .app-main .column-middle {
            margin-left: 7px;
            margin-right: 7px;
        }

        .app-main .column-middle .column-middle-inner {
            margin-left: 0;
            margin-right: 0;
        }

    #typing_notifications,
    #scheduled_message_indicator,
    #compose-content {
        margin-left: 7px;
    }
}

@container app (width <= 26.5625em) {
    .column-right.expanded,
    .column-left.expanded {
        width: 100vw;
        max-width: 100%;
    }

    .app-main .column-right.expanded .right-sidebar,
    .app-main .column-left.expanded .left-sidebar,
    .app-main #left-sidebar.zoom-in-topics #left-sidebar-modal,
    .app-main #left-sidebar.zoom-in-conversations #left-sidebar-modal {
        width: 100vw;
        max-width: 100%;
    }
}

@container header-container (width <= 36em) {
    .narrow_description {
        display: none;
    }
}

/* Begin fallback media queries. */
@media (max-width: 1199.98px) {
        .without-container-query-support .app-main .column-right {
        display: none;
        }
        .without-container-query-support .app-main .column-right.expanded {
            /* In the extended state, we open the sidebar
               to its maximum possible size (otherwise, it
               would be unnecessarily too narrow). */
            --right-sidebar-width: var(--right-sidebar-max-width);
            display: block;
            position: absolute;
            float: none;
            right: 15px;
            top: 0;
        }
        .without-container-query-support .app-main .column-right.expanded .simplebar-track.simplebar-vertical {
                right: 0;
        }
        .without-container-query-support .app-main .column-right.expanded .right-sidebar {
                box-shadow: 0 -2px 3px 0 hsla(0, 0%, 0%, 0.1);
                --csstools-light-dark-toggle--903: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
                border-left: 1px solid hsl(0, 0%, 87%);
                border-left: 1px solid var(--csstools-light-dark-toggle--903, hsl(0, 0%, 87%));
                border-left: 1px solid light-dark(hsl(0, 0%, 87%), hsla(0, 0%, 0%, 0.2));
                border-left: 1px solid var(--color-border-sidebar);
                height: 100%;
                width: min(20vw, 20.57em);
                width: var(--right-sidebar-width);
                right: 0;
                --csstools-light-dark-toggle--904: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
                background-color: hsl(0, 0%, 94%);
                background-color: var(--csstools-light-dark-toggle--904, hsl(0, 0%, 94%));
                background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
                background-color: var(--color-background);
        }

            .without-container-query-support .app-main .column-middle {
                margin-right: 7px;
            }

        .without-container-query-support #navbar-middle {
            /* = (width of button, square with header) * 4 (number of buttons) + 3px extra margin. */
            margin-right: calc(2.5em * 4 + 3px);
            margin-right: calc(var(--header-height) * 4 + 3px);
        }

        .without-container-query-support #typing_notifications,.without-container-query-support #scheduled_message_indicator,.without-container-query-support #compose-content {
            margin-right: 7px;
        }
            .without-container-query-support .hide-left-sidebar #compose-content,.without-container-query-support .hide-left-sidebar .app-main .column-middle {
                margin-left: 7px;
            }

            .without-container-query-support .hide-left-sidebar #top_navbar .column-left {
                width: auto;
            }
}

@media (max-width: 767.98px) {
        .without-container-query-support .app-main .left-sidebar-toggle-button .zulip-icon-panel-left {
        display: block;
        }
        .without-container-query-support .app-main .left-sidebar-toggle-button .zulip-icon-panel-left-dashed {
        display: none;
        }
        .without-container-query-support .app-main .column-left {
        display: none;
        }
        .without-container-query-support .app-main .column-left.expanded {
            /* In the extended state, we open the sidebar
               to its maximum possible size (otherwise, it
               would be unnecessarily too narrow). */
            --left-sidebar-width: var(--left-sidebar-max-width);
            display: block;
            position: absolute;
            float: none;
            left: 0;
            top: 0;
        }
        .without-container-query-support .app-main .column-left.expanded .left-sidebar {
                --csstools-light-dark-toggle--905: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
                background-color: hsl(0, 0%, 94%);
                background-color: var(--csstools-light-dark-toggle--905, hsl(0, 0%, 94%));
                background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
                background-color: var(--color-background);
                box-shadow: 0 2px 3px 0 hsla(0, 0%, 0%, 0.1);
                --csstools-light-dark-toggle--906: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
                border-right: 1px solid hsl(0, 0%, 87%);
                border-right: 1px solid var(--csstools-light-dark-toggle--906, hsl(0, 0%, 87%));
                border-right: 1px solid light-dark(hsl(0, 0%, 87%), hsla(0, 0%, 0%, 0.2));
                border-right: 1px solid var(--color-border-sidebar);
                height: 100%;
                padding-left: 10px;
                width: min(33.3333vw, calc(
        20.6429em - 12px
    ));
                width: var(--left-sidebar-width);
        }

            .without-container-query-support .app-main .column-middle {
                margin-left: 7px;
                margin-right: 7px;
            }

            .without-container-query-support .app-main .column-middle .column-middle-inner {
                margin-left: 0;
                margin-right: 0;
            }

        .without-container-query-support .header-main .column-left {
            display: none;
        }

        .without-container-query-support #navbar-middle {
            margin-left: 0;
        }

        .without-container-query-support #streamlist-toggle {
            display: block;
        }

        .without-container-query-support .top-navbar-container {
            margin-left: 40px;
        }

        .without-container-query-support #feedback_container {
            width: calc(90% - 30px);
            left: 5%;
            top: 5%;
        }

        .without-container-query-support #typing_notifications,.without-container-query-support #scheduled_message_indicator,.without-container-query-support #compose-content {
            margin-left: 7px;
        }
}

@media (max-width: 425px) {
        .without-container-query-support .column-right.expanded,.without-container-query-support .column-left.expanded {
            width: 100vw;
            max-width: 100%;
        }

        .without-container-query-support .app-main .column-right.expanded .right-sidebar,.without-container-query-support .app-main .column-left.expanded .left-sidebar {
            width: 100vw;
            max-width: 100%;
        }
}

@media (max-width: 576px) {
        .without-container-query-support .narrow_description {
            display: none;
        }
}

/* End fallback media queries. */

/* Begin viewport state queries. */

/* We sometimes need the state of the viewport in JavaScript;
   by setting values on `content:`, we can query instead for
   those, independent of whether it's a container or media query
   responsible for layout. See for example `sidebar_ui.ts`.

   These queries for greater than or equal to should be ordered
   smallest to largest. */

/* Adjustments for smaller viewports are critical
   regardless of info-density settings, so we
   don't include a container-query check here. */
@media (max-width: 767.98px) {
    .app-main::after {
        content: "lt_md_min";
    }
}

@container app (width >= 48em) {
    .app-main::after {
        content: "gte_md_min";
    }
}

@media (min-width: 768px) {
        .without-container-query-support .app-main::after {
            content: "gte_md_min";
        }
}

@container app (width >= 75em) {
    .app-main::after {
        content: "gte_md_min gte_xl_min";
    }
}

@media (min-width: 1200px) {
        .without-container-query-support .app-main::after {
            content: "gte_md_min gte_xl_min";
        }
}

/* End viewport state queries. */

@media (max-height: 599.98px) {
    .app-main .column-right.expanded .right-sidebar,
    .app-main .column-left.expanded .left-sidebar {
        margin-top: calc(
        2.5em + 0px
    );
        margin-top: var(--navbar-fixed-height);
        /* For very short screen sizes, skip the relatively large top padding. */
        padding-top: 0;
    }

    /* TODO: Properly and accurately align the
       topmost headers on the left and right
       sidebar. */
    .app-main .column-right.expanded .right-sidebar-items {
        margin-top: 10px;
    }

    .app-main .column-left.expanded .left-sidebar-navigation-area {
        margin-top: 10px;
    }

    /* Usually the styling is applied directly to the icon, but here
    the icon is `position: static`, so we can't. */
    .search_closed {
        top: 5px;
    }

    #streamlist-toggle,
    #message_view_header,
    #searchbox,
    .header {
        line-height: 2.5em;
        line-height: var(--header-height);
        height: 2.5em;
        height: var(--header-height);
    }

    .spectator_narrow_login_button {
        height: 2.5em !important;
        height: var(--header-height) !important;
    }

    .left-sidebar-toggle-button {
        height: 2.5em;
        height: var(--header-height);
    }

    nav
        .column-left
        .left-sidebar-toggle-button
        .left-sidebar-toggle-unreadcount {
        top: 5px;
        left: 16px;
    }

    .left-sidebar-toggle-unreadcount {
        /* Adjust in response to shorter navbar. */
        top: 5px;
        right: 4px;
    }

    #top_navbar .column-right #personal-menu .header-button-avatar {
        width: 1.25em; /* 20px at 16px em */
        height: 1.25em; /* 20px at 16px em */
    }
}

/* As these adjustments are properly the province of
   the viewport, we do not present these mm_min queries
   in a corresponding container query block. */
@media (max-width: 374.98px) {
    html {
        overflow-x: hidden;
    }

    /* We don't want user to experience Zulip below this width since
       we don't develop features for below this width. */
    body,
    html,
    .app-main,
    .header-main {
        min-width: 320px;
    }

    #compose #compose-content {
        margin-right: 5px;
        margin-left: 5px;
    }
}

#scroll-to-bottom-button-container {
    display: block;
    position: absolute;
    bottom: 41px;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition:
        visibility 500ms, opacity 500ms ease-in-out;
}

#scroll-to-bottom-button-container.show {
        visibility: visible;
        opacity: 1;
    }

#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area {
        width: 3.75em; /* 60px at 16px em */
        height: 3.75em; /* 60px at 16px em */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area #scroll-to-bottom-button,#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area #scroll-to-bottom-button-underlay {
            width: 2.5em; /* 40px at 16px em */
            height: 2.5em; /* 40px at 16px em */
            border-radius: 50%;
        }

#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area #scroll-to-bottom-button  > .zulip-icon {
                /* We increase the icon size for better visibility */
                font-size: 1.5em; /* 24px at 16px em */
            }

#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area #scroll-to-bottom-button:active {
                clip-path: none;
            }

#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area #scroll-to-bottom-button-underlay {
            position: absolute;
            --csstools-light-dark-toggle--907: var(--csstools-color-scheme--light) hsl(0, 0%, 14%);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--907, hsl(0, 0%, 100%));
            background-color: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 14%)
    );
            background-color: var(--color-background-stream-message-content);
            opacity: 0.7;
            z-index: -1;
        }

#scroll-to-bottom-button-container #scroll-to-bottom-button-clickable-area:hover #scroll-to-bottom-button {
            backdrop-filter: blur(40px);
        }

.spectator_login_for_image_button {
    max-width: 250px;
    height: 50px;
}

.spectator_login_for_image_button :hover {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.spectator_login_for_image_button .login_button {
        padding: 5px;
        margin-top: 5px;
    }

.spectator_login_for_image_button .login_button .fa {
            top: 1px;
        }

.simplebar-content-wrapper {
    /* `simplebar-content-wrapper` has `tabindex=-1` set, which makes sure
       that it does not get focus when navigating via a keyboard.

       But in a few situations, we programmatically focus this
       element, and in this case, we don't want to see the outline. */
    outline: none;

    /* This prevents the popover from closing once the top/bottom is reached */
    overscroll-behavior: contain;
}

.popover-filter-input-wrapper {
    display: flex;
}

.popover-filter-input-wrapper .popover-filter-input {
        --csstools-light-dark-toggle--610: var(--csstools-color-scheme--light) hsl(225, 6%, 10%);
        background: hsl(0, 0%, 100%);
        background: var(--csstools-light-dark-toggle--610, hsl(0, 0%, 100%));
        background: light-dark(
        hsl(0, 0%, 100%),
        hsl(225, 6%, 10%)
    );
        background: var(--color-background-widget-input);
        --csstools-light-dark-toggle--611: var(--csstools-color-scheme--light) hsl(0, 0%, 95%);
        color: hsl(0, 0%, 13%);
        color: var(--csstools-light-dark-toggle--611, hsl(0, 0%, 13%));
        color: light-dark(
        hsl(0, 0%, 13%),
        hsl(0, 0%, 95%)
    );
        color: var(--color-text-dropdown-input);
        width: 100%;
        margin: 4px 4px 2px;
    }

.popover-filter-input-wrapper .popover-filter-input:focus {
            background: hsl(0, 0%, 100%);
            border: 1px solid hsla(229, 22%, 10%, 0.8);
            box-shadow: 0 0 6px hsla(228, 10%, 20%, 0.3);
        }

/* For hidden searchbox dropdowns, when the user uses a click to open
       the dropdown, we focus this container, so that the rest of the
       keyboard navigation has the right container. That itself doesn't
       introduce focus-visible. But hotkeys.ts uses a programmatic click
       which goes through the same path and invokes focus-visible.
    */

.dropdown-list-container:focus-visible {
        outline: none;
    }

.dropdown-list-container .dropdown-list-viewport-padding {
        padding-top: 4px;
        padding-bottom: 4px;
    }

.dropdown-list-container .dropdown-list-wrapper {
        /* Sync with `max-height` in dropdown_widget. */
        max-height: 210px;
        /* 200px/14px */
        min-width: 14.285em;
    }

.dropdown-list-container .dropdown-list-wrapper .dropdown-list {
            list-style: none;
            margin: 0;
        }

.dropdown-list-container .dropdown-list-wrapper .dropdown-list .zulip-icon-preview {
                font-size: 1.125em;
            }

.dropdown-list-container .no-dropdown-items {
        color: hsl(0, 0%, 60%);
        display: none;
        padding: 3px 10px 3px 8px;
        font-weight: 400;
        line-height: 20px;
        white-space: normal;
    }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles {
        display: grid;
        grid-template:
            "item-label" min-content
            "item-description" minmax(0, min-content)
            / minmax(0, 1fr);
        --csstools-light-dark-toggle--612: var(--csstools-color-scheme--light) hsl(0, 0%, 75%);
        color: hsl(0, 0%, 20%);
        color: var(--csstools-light-dark-toggle--612, hsl(0, 0%, 20%));
        color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 75%));
        color: var(--color-dropdown-item);
        padding: 3px 10px 3px 8px;
        font-weight: 400;
        white-space: normal;
        /* Keep the line-height stable, instead of using the
           user-set line-height, so that the icon is always
           vertically centered properly. */
        line-height: 1.214;
    }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .decorated-channel-name-wrapper,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-direct-message,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-setting-disabled-option,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-channel-mapping {
            grid-area: item-label;
            display: flex;
            gap: 0.3125em;
            gap: var(--dropdown-list-item-label-icon-gap);
        }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .decorated-channel-name-wrapper .zulip-icon,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-direct-message .zulip-icon,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-setting-disabled-option .zulip-icon,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-channel-mapping .zulip-icon {
                font-size: 0.9375em; /* 15px at 16px/1em */
            }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .decorated-channel-name-wrapper .channel-privacy-type-icon,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-icon {
            line-height: 1.214;
        }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-channel-mapping .zulip-icon {
            position: relative;
            /* Calculated from visual inspection
               to look good for 12px-20px font sizes. */
            top: 0.1467em; /* 2.2px at 15px/1em */
        }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-description {
            grid-area: item-description;
        }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-name {
            grid-area: item-label;
            display: grid;
            grid-template:
                "item-text item-buttons" minmax(0, auto)
                "item-text .           " minmax(0, auto) / minmax(0, 1fr)
                minmax(0, auto);
            align-items: center;
        }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-name:has(.dropdown-list-buttons) {
                grid-template-rows: 1.75em minmax(0, auto);
                align-items: start;
            }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-name:has(.dropdown-list-buttons) .dropdown-list-text-neutral {
                    padding-top: 0.2em;
                    align-self: start;
                }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-name .dropdown-list-text-neutral {
                grid-area: item-text;
                align-self: center;
            }

/* This correctly places neutral text items
           appearing without a wrapping
           `.dropdown-list-item-name` class. */

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-text-neutral {
            grid-area: item-label;
            align-self: center;
        }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-buttons {
            grid-area: item-buttons;
            display: flex;
            visibility: hidden;
        }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:focus,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:hover {
            --csstools-light-dark-toggle--908: var(--csstools-color-scheme--light) hsl(0, 0%, 75%);
            color: hsl(0, 0%, 20%);
            color: var(--csstools-light-dark-toggle--908, hsl(0, 0%, 20%));
            color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 75%));
            color: var(--color-dropdown-item);
            -webkit-text-decoration: none;
            text-decoration: none;
            --csstools-light-dark-toggle--909: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
            background-color: hsla(220, 12%, 5%, 0.05);
            background-color: var(--csstools-light-dark-toggle--909, hsla(220, 12%, 5%, 0.05));
            background-color: light-dark(
        hsla(220, 12%, 5%, 0.05),
        hsla(0, 0%, 100%, 0.07)
    );
            background-color: var(--background-color-active-dropdown-item);
            outline: none;
        }

.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:focus .dropdown-list-delete,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:hover .dropdown-list-delete,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:focus .dropdown-list-edit,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:hover .dropdown-list-edit,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:focus .dropdown-list-manage-folder,.dropdown-list-container .dropdown-list .dropdown-list-item-common-styles:hover .dropdown-list-manage-folder {
                visibility: visible;
            }

.dropdown-list-container .list-item {
        border-radius: 4px;
        margin: 0 4px;
        position: relative;
        --csstools-light-dark-toggle--613: var(--csstools-color-scheme--light) hsl(0, 0%, 75%);
        color: hsl(0, 0%, 20%);
        color: var(--csstools-light-dark-toggle--613, hsl(0, 0%, 20%));
        color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 75%));
        color: var(--color-dropdown-item);
    }

.dropdown-list-container .list-item:focus,.dropdown-list-container .list-item.current_selection {
            outline: none;
            --csstools-light-dark-toggle--910: var(--csstools-color-scheme--light) hsl(0, 0%, 90%);
            background-color: rgba(0, 0, 0, 0.02);
            background-color: color-mix(
        in srgb,
        light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 90%)) 2%,
        transparent
    );
            background-color: var(
                --background-color-current-selection-dropdown-item
            );
        }

@supports (color: color-mix(in lch, red, blue)) {
.dropdown-list-container .list-item:focus,.dropdown-list-container .list-item.current_selection {
            background-color: color-mix(
        in srgb,
        var(--csstools-light-dark-toggle--910, hsl(0, 0%, 0%)) 2%,
        transparent
    );
        }
}

.dropdown-list-container .list-item:focus:not(.highlight_value):hover,.dropdown-list-container .list-item.current_selection:not(.highlight_value):hover {
                background-color: transparent;
            }

.dropdown-list-container .list-item:focus::before {
            content: "";
            position: absolute;
            left: -3px;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: hsl(215, 47%, 50%);
            background-color: var(--color-outline-focus);
            border-radius: 4px;
        }

.dropdown-list-container .list-item.current_selection::before {
            content: "";
            position: absolute;
            left: -3px;
            top: 0;
            bottom: 0;
            width: 3px;
            background-color: hsl(215, 47%, 50%);
            background-color: var(--color-outline-focus);
            border-radius: 4px;
        }

.dropdown-list-container .list-item .dropdown-list-item-common-styles {
            padding: 5px 6px;
            border-radius: 4px;
        }

.dropdown-list-container .list-item.highlight_value {
            background-color: rgba(127, 99, 238, 0.13);
            background-color: var(
                --background-color-current-setting-dropdown-item
            );
        }

.dropdown-list-container .list-item.highlight_value .dropdown-list-text-selected,.dropdown-list-container .list-item.highlight_value .setting-disabled-option-text {
                --csstools-light-dark-toggle--614: var(--csstools-color-scheme--light) #aba5fd;
                color: #4615a3;
                color: var(--csstools-light-dark-toggle--614, #4615a3);
                color: light-dark(
        #4615a3,
        #aba5fd
    );
                color: var(--color-current-setting-dropdown-item);
            }

.dropdown-list-container.folder_id-dropdown-list-container,.dropdown-list-container.new_channel_folder_id-dropdown-list-container {
        width: calc(23.2142em * 0.75);
        width: calc(var(--modal-input-width) * 0.75);

        /* Alignment adjustments on the channel-folder selector. */
    }

.dropdown-list-container.folder_id-dropdown-list-container .dropdown-list .dropdown-list-item-name,.dropdown-list-container.new_channel_folder_id-dropdown-list-container .dropdown-list .dropdown-list-item-name {
            /* We hold the first row height to 28px at 16px/1em
               for the sake of the buttons plus their padding.
               Unlike the base rules above, we apply this to rows
               without buttons, too, so that the "None" row is the
               same height as the folder rows. */
            grid-template-rows: 1.75em minmax(0, auto);
            /* We also align everything to start, so that we can
               offset the text from the top to align it with the
               buttons. */
            align-items: start;
        }

.dropdown-list-container.folder_id-dropdown-list-container .dropdown-list .dropdown-list-item-name .dropdown-list-text-neutral,.dropdown-list-container.new_channel_folder_id-dropdown-list-container .dropdown-list .dropdown-list-item-name .dropdown-list-text-neutral {
                /* 0.2em is an eyeballed value that keeps the buttons
                   well aligned with the first/only line of text. */
                padding-top: 0.2em;
                align-self: start;
            }

.dropdown-list-item-common-styles .dropdown-list-text-selected {
    font-weight: 600;
}

#scheduled_messages_overlay .error-icon-message-recipient {
    width: 15px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: hsl(4, 99%, 66%);
    color: var(--color-failed-message-send-icon);
}

#scheduled_messages_overlay .error-icon-message-recipient .zulip-icon {
        padding: 5px;
    }

.emoji-popover-tab-item .zulip-icon-star {
        position: relative;
        top: 2px;
    }

.header-main .column-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header-main .column-right a:focus {
        filter: none;
        outline: 0;
    }

.header-button {
    width: 2.5em;
    width: var(--header-height);
    height: 2.5em;
    height: var(--header-height);
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-button:hover,.header-button:focus {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.header-button:hover,.navbar-item.active-navbar-menu .header-button {
        --csstools-light-dark-toggle--615: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.04);
        background-color: hsla(0, 0%, 0%, 0.05);
        background-color: var(--csstools-light-dark-toggle--615, hsla(0, 0%, 0%, 0.05));
        background-color: light-dark(
        hsla(0, 0%, 0%, 0.05),
        hsla(0, 0%, 100%, 0.04)
    );
        background-color: var(--color-header-button-hover);
    }

.header-button:active {
        --csstools-light-dark-toggle--616: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
        background-color: hsla(0, 0%, 0%, 0.08);
        background-color: var(--csstools-light-dark-toggle--616, hsla(0, 0%, 0%, 0.08));
        background-color: light-dark(
        hsla(0, 0%, 0%, 0.08),
        hsla(0, 0%, 100%, 0.07)
    );
        background-color: var(--color-header-button-focus);
    }

.header-button:focus-visible {
        outline: none;
        --csstools-light-dark-toggle--617: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
        background-color: hsla(0, 0%, 0%, 0.08);
        background-color: var(--csstools-light-dark-toggle--617, hsla(0, 0%, 0%, 0.08));
        background-color: light-dark(
        hsla(0, 0%, 0%, 0.08),
        hsla(0, 0%, 100%, 0.07)
    );
        background-color: var(--color-header-button-focus);
    }

.header-button .zulip-icon {
        --csstools-light-dark-toggle--618: var(--csstools-color-scheme--light) hsl(240, 35%, 60%);
        color: hsl(240, 20%, 50%);
        color: var(--csstools-light-dark-toggle--618, hsl(240, 20%, 50%));
        color: light-dark(hsl(240, 20%, 50%), hsl(240, 35%, 60%));
        color: var(--color-navbar-icon);
    }

.header-button .zulip-icon-gear {
        font-size: 1.125em; /* 18px at 16px em */
    }

.header-button .zulip-icon-help-bigger,.header-button .zulip-icon-user-list {
        font-size: 1.25em; /* 20px at 16px em */
    }

.header-button .zulip-icon-help {
        position: relative;
        top: 0.5px;
        right: -0.5px;
    }

.left-sidebar-toggle-button .zulip-icon-panel-left,.left-sidebar-toggle-button .zulip-icon-panel-left-dashed {
        font-size: 1.25em; /* 20px at 16px em */
    }

#personal-menu .header-button-avatar {
        /* Put styling on div rather than img to gracefully handle
           uBlock Origin blocking of gravatar, which seems to make
           the img disappear. */
        width: 1.5em; /* 24px at 16px em */
        height: 1.5em; /* 24px at 16px em */
        background-size: cover;
        border-radius: 4px;
        --csstools-light-dark-toggle--619: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.1);
        background-color: hsla(0, 0%, 0%, 0.1);
        background-color: var(--csstools-light-dark-toggle--619, hsla(0, 0%, 0%, 0.1));
        background-color: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 100%, 0.1)
    );
        background-color: var(--color-background-image-loader);
        --csstools-light-dark-toggle--620: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.2);
        border: 1px solid hsla(0, 0%, 0%, 0.1);
        border: 1px solid var(--csstools-light-dark-toggle--620, hsla(0, 0%, 0%, 0.1));
        border: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 100%, 0.2)
    );
        border: 1px solid var(--color-border-personal-menu-avatar);
        overflow: hidden;
    }

#personal-menu .header-button-avatar .header-button-avatar-image {
            /* Overcome `vertical-align: middle`. This prevents the
               avatar in the navbar from being lower by a pixel. */
            display: block;
        }

#personal-menu .header-button-avatar:has(.avatar-loaded) {
            background-color: transparent;
            border-color: transparent;
        }

.empty-topic-placeholder-display::-moz-placeholder {
    font-style: italic;
}

.default-language-display,
.empty-topic-display,
.empty-topic-placeholder-display::placeholder,
.drafts-unknown-msg-header-field {
    font-style: italic;
}

.popover-menu-user-avatar-container.deactivated,
.inline_profile_picture.deactivated {
    position: relative;
}

.popover-menu-user-avatar-container.deactivated  > img,.inline_profile_picture.deactivated  > img {
        opacity: 0.5;
    }

.popover-menu-user-avatar-container.deactivated .deactivated-user-icon,.inline_profile_picture.deactivated .deactivated-user-icon {
        --csstools-light-dark-toggle--911: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background-color: hsl(0, 0%, 94%);
        background-color: var(--csstools-light-dark-toggle--911, hsl(0, 0%, 94%));
        background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background-color: var(--color-background);
        color: hsl(0, 0%, 50%);
        color: var(--color-user-circle-deactivated);
        padding: 2px;
        font-size: 0.8em;
        position: absolute;
        border-radius: 10px;
        bottom: -2px;
        right: -2px;
    }

.scroll-to-time:focus:not(:focus-visible) {
        /* Avoid outline on click */
        outline: none;
    }

.input-validation-shake {
    animation: shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* ---- app_components.css ---- */
/* Reusable, object-oriented CSS base components for the Zulip web app
   (not included in the portico CSS) */

.flex,
.show.flex {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.hidden {
    display: none;
    visibility: hidden;
}

kbd {
    display: inline-block;
    --csstools-light-dark-toggle--621: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    border: 1px solid hsl(0, 0%, 80%);
    border: 1px solid var(--csstools-light-dark-toggle--621, hsl(0, 0%, 80%));
    border: 1px solid light-dark(hsl(0, 0%, 80%), hsl(211, 29%, 14%));
    border: 1px solid var(--color-kbd-border);
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    --csstools-light-dark-toggle--622: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    background-color: hsl(0, 0%, 98%);
    background-color: var(--csstools-light-dark-toggle--622, hsl(0, 0%, 98%));
    background-color: light-dark(hsl(0, 0%, 98%), hsl(211, 29%, 14%));
    background-color: var(--color-kbd-background);
    --csstools-light-dark-toggle--623: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--623, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(236, 33%, 90%));
    color: var(--color-kbd-text);
    margin: 0.25em 0.1em;
    padding: 0.2em 0.4em;
    text-shadow: 0 1px 0 hsl(0, 0%, 100%);
    /* Prevent selection */
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    position: relative;
    min-height: 1em;
    min-width: 1em;
}

kbd .zulip-icon::before {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

@media (max-width: 575.98px) {
    .hide-sm {
        display: none !important;
    }
}

.highlighted-element {
    font-weight: 600;
}

.inline-block {
    display: inline-block;
}

.display-block {
    display: block !important;
}

.box-shadow {
    box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
}

.clear-float {
    clear: both;
}

.invisible {
    visibility: hidden;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.lowercase {
    text-transform: lowercase;
}

/*
Consistent placeholder styling, introduced to allow us to style the
Reply box like a placeholder.  Chrome uses color to set placeholder,
while Firefox uses opacity, so we need to set both properties to avoid
mixed styling.

While we usually prefer opacity for text color in Zulip, there's some
evidence Edge may have bugs in its handling of placeholder opacity
CSS: https://github.com/necolas/normalize.css/issues/741
*/
.placeholder {
    --csstools-light-dark-toggle--564: var(--csstools-color-scheme--light) hsl(0, 0%, 55%);
    color: hsl(0, 0%, 45%);
    color: var(--csstools-light-dark-toggle--564, hsl(0, 0%, 45%));
    color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 55%));
    color: var(--color-text-placeholder);
    opacity: 1;
}

textarea::-moz-placeholder, input::-moz-placeholder {
    --csstools-light-dark-toggle--564: var(--csstools-color-scheme--light) hsl(0, 0%, 55%);
    color: hsl(0, 0%, 45%);
    color: var(--csstools-light-dark-toggle--564, hsl(0, 0%, 45%));
    color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 55%));
    color: var(--color-text-placeholder);
    opacity: 1;
}

textarea::placeholder,
input::placeholder {
    --csstools-light-dark-toggle--564: var(--csstools-color-scheme--light) hsl(0, 0%, 55%);
    color: hsl(0, 0%, 45%);
    color: var(--csstools-light-dark-toggle--564, hsl(0, 0%, 45%));
    color: light-dark(hsl(0, 0%, 45%), hsl(0, 0%, 55%));
    color: var(--color-text-placeholder);
    opacity: 1;
}

/* Custom resizer icon for the textarea */
textarea::-webkit-resizer {
    background-image: url("../images/resize-handle-black.svg");
    background-image: var(--svg-resize-handle);
}

/* -- tab switcher -- */

.tab-switcher {
    font-weight: normal;
    font-weight: initial;
    margin: 2px 4px;
    display: inline-block;
}

.tab-switcher .ind-tab {
        display: inline-block;
        width: 90px;
        margin: 0 -0.5px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: bottom; /* See https://stackoverflow.com/a/43266155/ */
        padding: 3px 10px;
        --csstools-light-dark-toggle--624: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--624, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
        background-color: var(--color-background-tab-switcher-ind-tab);
        cursor: pointer;
        justify-content: center;
        align-items: center;
    }

.tab-switcher .ind-tab:focus-visible {
            outline: 1px solid hsl(215, 47%, 50%);
            outline: 1px solid var(--color-outline-focus);
            outline-offset: -2px;
        }

.tab-switcher .ind-tab:not(.selected) {
            --csstools-light-dark-toggle--912: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
            border: 1px solid hsl(0, 0%, 80%);
            border: 1px solid var(--csstools-light-dark-toggle--912, hsl(0, 0%, 80%));
            border: 1px solid light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
            border: 1px solid var(--color-border-tab-switcher-ind-tab);
        }

.tab-switcher .ind-tab.first {
            border-radius: 5px 0 0 5px;
            border-right: 1px solid transparent;
        }

.tab-switcher .ind-tab.middle {
            border-right: 1px solid transparent;
        }

.tab-switcher .ind-tab.last {
            border-radius: 0 5px 5px 0;
        }

.tab-switcher .ind-tab.selected {
            position: relative;
            --csstools-light-dark-toggle--913: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
            background-color: hsl(0, 0%, 53%);
            background-color: var(--csstools-light-dark-toggle--913, hsl(0, 0%, 53%));
            background-color: light-dark(
        hsl(0, 0%, 53%),
        hsla(0, 0%, 0%, 0.5)
    );
            background-color: var(
                --color-background-tab-switcher-ind-tab-selected
            );
            color: hsl(0, 0%, 100%);
            --csstools-light-dark-toggle--914: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.9);
            border: 1px solid hsl(0, 0%, 47%);
            border: 1px solid var(--csstools-light-dark-toggle--914, hsl(0, 0%, 47%));
            border: 1px solid light-dark(
        hsl(0, 0%, 47%),
        hsla(0, 0%, 0%, 0.9)
    );
            border: 1px solid var(--color-border-tab-switcher-ind-tab-selected);
            z-index: 2;
        }

.tab-switcher .ind-tab.disabled {
            cursor: default;
            --csstools-light-dark-toggle--915: var(--csstools-color-scheme--light) hsla(0, 0%, 42%, 0.9);
            color: hsl(0, 0%, 80%);
            color: var(--csstools-light-dark-toggle--915, hsl(0, 0%, 80%));
            color: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 42%, 0.9)
    );
            color: var(--color-text-tab-switcher-ind-tab-disabled);
            --csstools-light-dark-toggle--916: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
            border-color: hsl(0, 0%, 87%);
            border-color: var(--csstools-light-dark-toggle--916, hsl(0, 0%, 87%));
            border-color: light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 0%, 0.6)
    );
            border-color: var(--color-border-tab-switcher-ind-tab-disabled);
        }

.tab-switcher.large .ind-tab {
        width: 100%;
    }

.tab-switcher.allow-overflow {
        display: flex;
    }

.tab-switcher.allow-overflow .ind-tab {
            display: flex;
            text-overflow: initial;
            white-space: normal;
            white-space: initial;
            vertical-align: middle;
        }

/* -- unified overlay design component -- */
div.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;

    --csstools-light-dark-toggle--625: var(--csstools-color-scheme--light) hsla(212, 28%, 8%, 0.75);

    background-color: hsla(0, 0%, 13%, 0.8);

    background-color: var(--csstools-light-dark-toggle--625, hsla(0, 0%, 13%, 0.8));

    background-color: light-dark(
        hsla(0, 0%, 13%, 0.8),
        hsla(212, 28%, 8%, 0.75)
    );

    background-color: var(--color-background-overlay);
    z-index: 105;

    pointer-events: none;
    opacity: 0;
    visibility: hidden;

    transition: 0.2s ease-in;
    transition-property: opacity, visibility;
    overflow: hidden;
}
div.overlay .overlay-content {
        transform: translateY(20px);
        transition: transform 0.2s ease-in;
        z-index: 102;
    }
div.overlay.show {
        opacity: 1;
        pointer-events: all;
        visibility: visible;
        transition: opacity 0.2s ease-out;
    }
div.overlay.show .overlay-content {
            transform: translateY(0);
            transition-timing-function: ease-out;
        }
div.overlay .overlay-scroll-container {
        max-height: 60vh;
        padding: 15px;
    }
div.overlay .overlay-container {
        background-color: var(--color-background-modal);
    }
div.overlay:focus {
        outline: none;
    }

.input-append {
    font-size: 90%;
    letter-spacing: -0.3em;
    display: block;
}

.input-append input[type="text"],
input.settings_text_input {
    border-radius: 5px;
    box-shadow: none;
    margin: 0;
}

.clear_search_button {
    grid-area: 1 / 2 / 2 / 3;
    padding: 0;
    background: none;
    --csstools-light-dark-toggle--626: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    color: hsl(0, 0%, 0%);
    color: var(--csstools-light-dark-toggle--626, hsl(0, 0%, 0%));
    color: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
    color: var(--color-icons-inbox);
    opacity: 0.4;
    display: grid;
    border: none;
    font-size: inherit;
}

.clear_search_button:hover {
        opacity: 1;
    }

.clear_search_button:focus,.clear_search_button:focus-visible,.clear_search_button:active {
        box-shadow: none;
        outline: none;
    }

.clear_search_button .zulip-icon-close {
        align-self: center;
    }

.settings-highlight-box {
    margin: 0;
    padding: 5px 10px;
    background-color: var(--color-background-modal-bar);
    border: 1px solid var(--color-border-modal-bar);
    border-radius: 4px;

    list-style-type: none;
}

.white-box {
    --csstools-light-dark-toggle--565: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    background-color: hsl(0, 0%, 100%);
    background-color: var(--csstools-light-dark-toggle--565, hsl(0, 0%, 100%));
    background-color: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    background-color: var(--color-background-white-box);
    border: 1px solid hsl(0, 0%, 87%);
}

.guest-avatar {
    position: relative;
    overflow: hidden;
}

.guest-avatar::after {
        content: " ";
        background-color: hsl(0, 0%, 47%);
        position: absolute;
        bottom: -30%;
        right: -30%;
        width: 50%;
        height: 50%;
        transform: rotate(45deg);
    }

.dependent-settings-block {
    margin: 15px 0 -5px 23px;
}

.edit-controls .fa-angle-right {
    font-size: 0.9em;
    -webkit-text-stroke: 0.05em;
    position: relative;
    margin: 0 5px;
    top: 9px;
}

/* Standard loading indicators generated by the loading.ts API */
.loading_indicator_spinner {
    /* If you change these, make sure to adjust the constants in
       loading.make_indicator as well. 38px at 14px/1em */
    height: 2.7143em;
    width: 2.7143em;
    float: left;
}

.loading_indicator_text {
    /* If you change these, make sure to adjust the constants in
       loading.make_indicator as well */
    margin-left: 5px;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 38px;
}

.tip {
    position: relative;
    display: block;
    margin: 10px 0;
    --csstools-light-dark-toggle--627: var(--csstools-color-scheme--light) hsla(46, 28%, 38%, 0.27);
    background-color: hsl(46, 63%, 95%);
    background-color: var(--csstools-light-dark-toggle--627, hsl(46, 63%, 95%));
    background-color: light-dark(
        hsl(46, 63%, 95%),
        hsla(46, 28%, 38%, 0.27)
    );
    background-color: var(--color-background-tip);
    --csstools-light-dark-toggle--628: var(--csstools-color-scheme--light) hsl(49, 38%, 46%);
    border: 1px solid hsl(49, 20%, 84%);
    border: 1px solid var(--csstools-light-dark-toggle--628, hsl(49, 20%, 84%));
    border: 1px solid light-dark(hsl(49, 20%, 84%), hsl(49, 38%, 46%));
    border: 1px solid var(--color-border-tip);
    border-radius: 4px;
    padding: 10px;
    /* previously 1rem = 16px at 14px em = 1.1428em */
    font-size: 1.1428em;
    line-height: 1.5;
    color: hsl(0, 0%, 40%);
}

.tip::before {
        content: "\f0a2";
        display: inline;
        margin-right: 8px;

        font-family: FontAwesome;
        font-weight: 600;
    }

.demo-organization-add-email-banner {
    margin-bottom: 10px;
}

.create-group-button-container .upgrade-organization-banner-container {
        display: flex;
        justify-content: center;
    }

.organization-upgrade-banner,
.mobile-push-notifications-banner,
.admin-permissions-banner,
.desktop-setting-notifications {
    margin-bottom: 10px;
    width: -moz-fit-content;
    width: fit-content;
}

.mobile-push-notifications-banner .banner-content,.desktop-setting-notifications .banner-content,.organization-upgrade-banner .banner-content {
        flex-wrap: nowrap;
    }

.mobile-push-notifications-banner .banner-content .banner-action-buttons,.desktop-setting-notifications .banner-content .banner-action-buttons,.organization-upgrade-banner .banner-content .banner-action-buttons {
            flex-wrap: nowrap;
        }

.demo-organization-warning {
    margin: 10px 0;
}

.user_status_icon_wrapper {
    display: inline;
    white-space: nowrap;
}

.user-status-microlayout {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.user-status-microlayout .user-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* We are mostly consistent in how we style
   unread counts, except for starred messages.
   This is the common section.
*/
.unread_count {
    float: right;
    padding: 0 4px;
    /* 12px at 14px/em */
    font-size: 0.8571em;
    /* 16px at 12px/em, owing to font-size above. */
    height: 1.3333em;
    line-height: 1.3333em;
    font-weight: normal;
    border-radius: 4px;
    --csstools-light-dark-toggle--566: var(--csstools-color-scheme--light) hsl(240, 18%, 34%);
    background-color: hsla(240, 10%, 50%, 0.7);
    background-color: var(--csstools-light-dark-toggle--566, hsla(240, 10%, 50%, 0.7));
    background-color: light-dark(
        hsla(240, 10%, 50%, 0.7),
        hsl(240, 18%, 34%)
    );
    background-color: var(--color-background-unread-counter);
    color: hsl(0, 0%, 100%);
}

/* Unread-count attention levels. */

.prominent-count {
    --csstools-light-dark-toggle--567: var(--csstools-color-scheme--light) hsl(240, 18%, 34%);
    background-color: hsla(240, 10%, 50%, 0.7);
    background-color: var(--csstools-light-dark-toggle--567, hsla(240, 10%, 50%, 0.7));
    background-color: light-dark(
        hsla(240, 10%, 50%, 0.7),
        hsl(240, 18%, 34%)
    );
    background-color: var(--color-background-unread-counter-prominent);
    color: hsl(0, 0%, 100%);
    color: var(--color-unread-counter-prominent);
}

.normal-count {
    --csstools-light-dark-toggle--568: var(--csstools-color-scheme--light) hsla(240, 10%, 50%, 0.35);
    background-color: hsla(240, 10%, 50%, 0.2);
    background-color: var(--csstools-light-dark-toggle--568, hsla(240, 10%, 50%, 0.2));
    background-color: light-dark(
        hsla(240, 10%, 50%, 0.2),
        hsla(240, 10%, 50%, 0.35)
    );
    background-color: var(--color-background-unread-counter-normal);
    --csstools-light-dark-toggle--569: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    color: hsla(0, 0%, 0%, 0.9);
    color: var(--csstools-light-dark-toggle--569, hsla(0, 0%, 0%, 0.9));
    color: light-dark(
        hsla(0, 0%, 0%, 0.9),
        hsla(0, 0%, 100%, 0.85)
    );
    color: var(--color-unread-counter-normal);
    box-shadow: inset 0 0 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: var(--box-shadow-unread-counter-normal);
}

.quiet-count {
    background-color: transparent;
    background-color: var(--color-background-unread-counter-quiet);
    --csstools-light-dark-toggle--570: var(--csstools-color-scheme--light) hsl(240, 15%, 65%);
    color: hsl(240, 15%, 50%);
    color: var(--csstools-light-dark-toggle--570, hsl(240, 15%, 50%));
    color: light-dark(
        hsl(240, 15%, 50%),
        hsl(240, 15%, 65%)
    );
    color: var(--color-unread-counter-quiet);
    font-weight: 475;
}

.unread_mention_info:not(:empty) {
    margin-right: 5px;
    margin-left: 2px;
    opacity: 0.5;
    opacity: var(--opacity-unread-mention-info);
}

.unread_mention_info.no-display {
    display: none;
}

/* Implement the web app's default-hidden convention for alert
   elements.  Portico pages lack this CSS and thus show them by
   default. */
.alert {
    display: none;
}
.alert.show {
        display: block;
    }
#organization-status.alert {
        margin: 20px;
    }
.alert.stream_create_info {
        margin: 10px 10px 0;
    }
.alert .bankruptcy_unread_count {
        font-weight: 600;
    }

.only-visible-for-spectators {
    display: none;
}

/* Add this class to elements which a
     * spectator cannot use. */

.spectator-view .hidden-for-spectators {
        display: none !important;
    }

.spectator-view .only-visible-for-spectators {
        display: revert;
    }

.animated-purple-button {
    color: hsl(0, 0%, 100%);
    transition: 80ms linear;
    transition-property: background-color, box-shadow;
    box-shadow: none;
    /* This color just passes WCAG AA */
    background-color: hsl(240, 96%, 68%);
    cursor: pointer;
    border: none;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
}

.animated-purple-button:hover {
        /* This color passes WCAG AAA */
        background-color: hsl(240, 41%, 50%);
        box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.3);
    }

.animated-purple-button:focus {
        background-color: hsl(240, 41%, 50%);
        --csstools-light-dark-toggle--629: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.666);
        box-shadow: 0 1px 4px 0
            hsl(235, 18%, 7%);
        box-shadow: 0 1px 4px 0
            var(--csstools-light-dark-toggle--629, hsl(235, 18%, 7%));
        box-shadow: 0 1px 4px 0
            light-dark(
        hsl(235, 18%, 7%),
        hsla(0, 0%, 100%, 0.666)
    );
        box-shadow: 0 1px 4px 0
            var(--color-box-shadow-animated-purple-button-focus);
        outline: none;
    }

.animated-purple-button:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

.color_animated_button {
    display: flex;
    justify-content: center;
    --csstools-light-dark-toggle--630: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
    background-color: hsl(0, 0%, 90%);
    background-color: var(--csstools-light-dark-toggle--630, hsl(0, 0%, 90%));
    background-color: light-dark(
        hsl(0, 0%, 90%),
        hsl(211, 29%, 14%)
    );
    background-color: var(--color-background-animated-button);
    color: hsl(0, 0%, 0%);
    border-radius: 4px;
}

.color_animated_button .color-animated-button-text {
        --csstools-light-dark-toggle--631: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
        color: hsl(0, 0%, 0%);
        color: var(--csstools-light-dark-toggle--631, hsl(0, 0%, 0%));
        color: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
        color: var(--color-animated-button-text);
    }

.color_animated_button:hover {
        cursor: pointer;
        background-color: hsl(240, 96%, 68%);
        background-color: var(--color-background-animated-button-hover);
        color: hsl(0, 0%, 100%);
    }

.color_animated_button:hover .color-animated-button-text {
            color: hsl(0, 0%, 100%);
            transition: color 0.2s ease;
        }

.color_animated_button:hover {

        transition: 0.2s ease;
        transition-property: background-color, color;
    }

.color_animated_button .zulip-icon,.color_animated_button .color-animated-button-text {
        padding: 6px 3px;
    }

.color_animated_button .fa {
        position: relative;
        top: 3px;
    }

.table-striped {
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 20px;
    width: 100%;
}

.table-striped:not(.table-bordered) thead th {
            border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important;
            border-bottom: 1px solid hsla(0, 0%, 0%, 0.2) !important;
        }

.table-striped:not(.table-bordered) tbody tr:first-child td {
            border-top: 0;
        }

.table-striped thead {
        --csstools-light-dark-toggle--632: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--632, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 0%)
    );
        background-color: var(--color-background-table-header);
    }

.table-striped thead th {
        /* Prevent headers from collapsing.
           For headers that sort, this keeps
           the icon on the same line as the
           header text. */
        min-width: -moz-max-content;
        min-width: max-content;
        white-space: nowrap;
        color: inherit;
        word-break: normal;
    }

.table-striped thead th .table-sortable-arrow {
            /* Sub alignment works perfectly in this context,
               where the table header is a text node. */
            vertical-align: sub;
            transform: rotate(180deg);
            opacity: 0;
            transition: opacity 100ms ease-out;
        }

.table-striped thead th.descend .table-sortable-arrow {
            transform: rotate(0deg);
        }

.table-striped thead th[data-sort]:not(.active):hover .table-sortable-arrow {
            opacity: 0.3;
        }

.table-striped thead th.active .table-sortable-arrow {
            opacity: 1;
        }

.table-striped thead th.active {
            opacity: 1;
            transition: opacity 100ms ease-out;
        }

.table-striped thead th[data-sort]:hover {
            cursor: pointer;
            --csstools-light-dark-toggle--917: var(--csstools-color-scheme--light) hsl(211, 29%, 14%);
            background-color: hsl(0, 0%, 95%);
            background-color: var(--csstools-light-dark-toggle--917, hsl(0, 0%, 95%));
            background-color: light-dark(
        hsl(0, 0%, 95%),
        hsl(211, 29%, 14%)
    );
            background-color: var(
                --color-background-table-header-sortable-hover
            );
        }

.table-striped tbody > tr:nth-child(odd) td {
            background-color: var(--color-background-modal);
        }

.table-striped tbody > tr:nth-child(odd) th {
            --csstools-light-dark-toggle--918: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
            background-color: transparent;
            background-color: var(--csstools-light-dark-toggle--918, transparent);
            background-color: light-dark(
        transparent,
        hsla(0, 0%, 0%, 0.2)
    );
            background-color: var(--color-background-tbody-th-odd);
        }

/* Force the actions column to use the minimum space necessary */

.table-striped .actions {
        width: 1%;
        white-space: nowrap;
    }

.table-striped .actions .icon-button {
            display: inline-flex;
            align-items: center;
            min-height: 2.1875em; /* 35px at 16px/1em */
        }

.table-striped th.actions {
        padding-right: 1em;
    }

.table-striped th,.table-striped td {
        padding: 4px 5px;
    }

.table-striped th {
        text-align: left;
    }

.table-striped td {
        --csstools-light-dark-toggle--633: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
        border-top: 1px solid hsl(0, 0%, 87%);
        border-top: 1px solid var(--csstools-light-dark-toggle--633, hsl(0, 0%, 87%));
        border-top: 1px solid light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 0%, 0.2)
    );
        border-top: 1px solid var(--color-border-table-striped);
    }

.table-bordered {
    --csstools-light-dark-toggle--634: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    border: 1px solid hsl(0, 0%, 87%);
    border: 1px solid var(--csstools-light-dark-toggle--634, hsl(0, 0%, 87%));
    border: 1px solid light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 0%, 0.2)
    );
    border: 1px solid var(--color-border-table-bordered);
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 20px;
}

.table-bordered th,.table-bordered td {
        --csstools-light-dark-toggle--635: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
        border-left: 1px solid hsl(0, 0%, 87%);
        border-left: 1px solid var(--csstools-light-dark-toggle--635, hsl(0, 0%, 87%));
        border-left: 1px solid light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 0%, 0.2)
    );
        border-left: 1px solid var(--color-border-table-bordered);
        --csstools-light-dark-toggle--636: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
        border-top: 1px solid hsl(0, 0%, 87%);
        border-top: 1px solid var(--csstools-light-dark-toggle--636, hsl(0, 0%, 87%));
        border-top: 1px solid light-dark(
        hsl(0, 0%, 87%),
        hsla(0, 0%, 0%, 0.2)
    );
        border-top: 1px solid var(--color-border-table-bordered);
        padding: 4px 5px;
        text-align: left;
    }

.table-bordered thead tr:first-child th {
        border-top: 0;
    }

.table-bordered thead tr:first-child > th:first-child {
        border-top-left-radius: 4px;
    }

.table-bordered thead tr:first-child > th:last-child {
        border-top-right-radius: 4px;
    }

.table-bordered tbody:last-child tr:last-child > td:first-child {
        border-bottom-left-radius: 4px;
    }

.table-bordered tbody:last-child tr:last-child > td:last-child {
        border-bottom-right-radius: 4px;
    }

.subsection-header {
    display: flex;
    flex-wrap: wrap;
    margin: 0.2857em 0;
    gap: 0 0.625em; /* 10px at 16px em */
    align-items: center;
}

.save-button-controls {
    display: flex;
    align-items: center;
    gap: 0.3125em; /* 5px at 16px em */
}

.save-button-controls.hide {
        display: none;
    }

.save-button-controls .save-button[data-status="saved"] {
        pointer-events: none;
    }

.decorated-channel-name-wrapper:not(.inline-decorated-channel-name) {
    display: flex;
    gap: 0.3125em;
    gap: var(--decorated-channel-name-privacy-icon-gap);
    flex-wrap: nowrap;
    align-items: baseline;
}

.decorated-channel-name-wrapper:not(.inline-decorated-channel-name) .channel-privacy-type-icon .zulip-icon {
        /* Calculated from visual inspection
           to look good for 12px-20px font sizes. */
        top: 0.1467em; /* 2.2px at 15px/1em */
        font-size: 0.9375em; /* 15px at 16px/1em */
    }

.decorated-channel-name-wrapper:not(.inline-decorated-channel-name) .channel-privacy-type-icon .zulip-icon.zulip-icon-lock {
            /* Calculated from visual inspection
               to look good for 12px-20px font sizes. */
            top: 0.08em; /* 1.2px at 15px/1em */
        }

.inline-decorated-channel-name {
    white-space: nowrap;
    display: inline;
    padding-left: 0.0937em;
    padding-left: var(--inline-decorated-channel-name-padding-left);
}

.inline-decorated-channel-name .decorated-channel-name {
        margin-left: 0.125em;
        margin-left: var(--inline-decorated-channel-name-privacy-icon-gap);
    }

.channel-privacy-type-icon .zulip-icon {
    position: relative;
    /* Calculated from visual inspection
        to look good for 12px-20px font sizes. */
    top: 0.0688em; /* 1.1px at 16px/1em */
}

.channel-privacy-type-icon .zulip-icon.zulip-icon-globe,.channel-privacy-type-icon .zulip-icon.zulip-icon-archive,.channel-privacy-type-icon .zulip-icon.zulip-icon-hashtag {
        font-size: 0.75em;
    }

.channel-privacy-type-icon .zulip-icon.zulip-icon-lock,.channel-privacy-type-icon .zulip-icon.zulip-icon-users {
        font-size: 0.8em;
    }

.zulip-icon-lock {
    /* The lock icon is bottom heavy, so to make it
       appear better aligned, we pull it up by a
       uniform margin throughout the UI. */
    /* 3.5px at 16px/1em */
    margin-top: -0.2188em !important;
}

/* This includes css needed to display messages in an overlay. */
.overlay-messages-container {
    position: relative;
    height: 95%;
    background-color: var(--color-background-modal);
    border-radius: 4px;
    padding: 0;
    width: 58%;
    overflow: hidden;
    max-width: 1200px;
    max-height: 1000px;
    display: flex;
    flex-direction: column;
}
@media (max-width: 767.98px) {
.overlay-messages-container {
        height: 95%;
        max-width: none;
        width: 90%;
}
    }
.overlay-messages-container .overlay-messages-header {
        padding-top: 4px;
        padding-bottom: 8px;
        text-align: center;
        background-color: var(--color-background-modal-bar);
        border-bottom: 1px solid var(--color-border-modal-bar);
    }
.overlay-messages-container .overlay-messages-header h1 {
            margin: 0;
            font-size: 1.1em;
            font-weight: bold;
            line-height: 40px;
            line-height: var(--header-line-height);
            text-transform: uppercase;
        }
.overlay-messages-container .overlay-messages-header .exit {
            font-weight: 400;
            position: absolute;
            top: 10px;
            right: 10px;
            color: hsl(0, 0%, 67%);
            cursor: pointer;
        }
.overlay-messages-container .overlay-messages-header .exit .exit-sign {
                position: relative;
                top: 1px;
                margin-left: 3px;
                font-size: 1.5rem;
                line-height: 1;
                font-weight: 600;
                cursor: pointer;
            }
.overlay-messages-container .overlay-messages-list {
        padding: 10px 25px;
        overflow: auto;
    }
.overlay-messages-container .overlay-messages-list .no-overlay-messages {
            display: block;
            margin-top: calc(45vh - 30px - 1.5em);
            text-align: center;
            font-size: 1.5em;
            color: hsl(0, 0%, 67%);
            pointer-events: none;
        }

/* This is a useful grid-based mechanism to handle
   message overlays with a header and scrollable
   content area managed by SimpleBar. It more
   robustly fills the height of the modal than
   flexbox, and should be considered as an approach
   for other modals that currently employ flexbox. */
.overlay-messages-container.drafts-container {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);

    /* min-height: 0 lets the tab pane shrink inside the 1fr grid row
       (grid items default to min-height: auto). */
}
.overlay-messages-container.drafts-container .drafts-tab-pane {
        min-height: 0;
    }
.overlay-messages-container.drafts-container .overlay-messages-list {
        /* We unset the `overflow` value so SimpleBar
           can manage scrolling. */
        overflow: visible;
        overflow: initial;
        /* border-box + height: 100% makes the list fill (not overflow) the
           tab pane, which the 1fr grid row bounds, so SimpleBar has a
           definite height to scroll within. */
        box-sizing: border-box;
        height: 100%;
        /* And therefore we don't need to worry about padding,
           so that the scrollbar appears to reach all the way
           to the bottom of the content. */
        padding-bottom: 0;
        /* Override the `min-width: auto` default for grid
           items so the SimpleBar container can shrink on
           window resize. */
        min-width: 0;
    }

.overlay-messages-container .overlay-message-row {
    padding: 5px 0;
}

.overlay-messages-container .overlay-message-row .overlay-message-info-box {
        width: 100%;
        margin-bottom: 10px;
    }

.overlay-messages-container .overlay-message-row .overlay-message-info-box.active {
            outline: 2px solid hsl(215, 47%, 50%);
            outline: 2px solid var(--color-outline-focus);
            border-radius: 7px;
        }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .message_row {
            border-radius: 0 0 7px 7px;
            --csstools-light-dark-toggle--919: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
            border: 1px solid hsla(0, 0%, 0%, 0.16);
            border: 1px solid var(--csstools-light-dark-toggle--919, hsla(0, 0%, 0%, 0.16));
            border: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.16),
        hsla(0, 0%, 0%, 0.4)
    );
            border: 1px solid var(--color-message-list-border);
            border-top: 0;
        }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .messagebox-content {
            grid-template: auto / auto max-content;
            grid-template-areas:
                "message controls"
                "message .       ";
            /* to space from restore draft button */
            -moz-column-gap: 5px;
                 column-gap: 5px;
            padding: 10px;
        }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .messagebox-content .message_content {
                cursor: pointer;
                grid-area: message;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .messagebox-content .message_top_line {
                grid-area: controls;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .messagebox {
            cursor: auto;
            box-shadow: none;
            border-radius: 0 0 7px 7px;
        }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 0.9em;
        }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls [data-tippy-root] {
                width: -moz-max-content;
                width: max-content;
                word-wrap: inherit;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls .copy-overlay-message {
                font-size: 1.2em;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls .restore-overlay-message {
                cursor: pointer;
                color: hsl(170, 48%, 54%);
                opacity: 0.7;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls .restore-overlay-message:hover {
                    opacity: 1;
                }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls .delete-overlay-message {
                cursor: pointer;
                color: hsl(357, 52%, 57%);
                opacity: 0.7;
                padding: 0;
                font-size: 1.2em;
            }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .overlay_message_controls .delete-overlay-message:hover {
                    opacity: 1;
                }

.overlay-messages-container .overlay-message-row .overlay-message-info-box .message_header {
            /* We don't need these effects applied for message list in the drafts overlay. */
            box-shadow: none !important;
            border: 0 !important;
            background: transparent;
        }

div.overlay .flex.overlay-content > .overlay-container,
#settings_page,
.informational-overlays .overlay-content {
    box-shadow: none;
    box-shadow: var(--box-shadow-overlay);
}

.delete-selected-drafts-button-container {
    display: flex;
}

.dropdown-widget-button {
    --csstools-light-dark-toggle--637: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    background-color: hsl(0, 0%, 100%);
    background-color: var(--csstools-light-dark-toggle--637, hsl(0, 0%, 100%));
    background-color: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    background-color: var(--color-background-dropdown-widget-button);
    padding: 4px 6px;
    --csstools-light-dark-toggle--638: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    border: 1px solid hsl(0, 0%, 80%);
    border: 1px solid var(--csstools-light-dark-toggle--638, hsl(0, 0%, 80%));
    border: 1px solid light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    border: 1px solid var(--color-border-dropdown-widget-button);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: none;
    --csstools-light-dark-toggle--639: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--639, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    width: 206px;
    width: var(--width-dropdown-widget-button);
    font-family: inherit;
    font-size: inherit;
}

.dropdown-widget-button:disabled {
        cursor: not-allowed;
        --csstools-light-dark-toggle--640: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
        background-color: hsl(0, 0%, 93%);
        background-color: var(--csstools-light-dark-toggle--640, hsl(0, 0%, 93%));
        background-color: light-dark(
        hsl(0, 0%, 93%),
        hsla(0, 0%, 0%, 0.2)
    );
        background-color: var(
            --color-background-disabled-dropdown-widget-button
        );
        /* TODO: Should this be 0.5 to match the spectator block below? */
        opacity: 0.7;
    }

.dropdown-widget-disabled-for-spectators .dropdown-widget-button {
    cursor: not-allowed;
    opacity: 0.5;
}

#edit_bot_owner_widget .dropdown_widget_value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown_widget_with_label_wrapper {
    margin-top: 0 !important;
}

.dropdown-current-value-not-in-options,
.setting-disabled-option {
    font-style: italic;
}

.dropdown-current-value-not-in-options .setting-disabled-option-icon,.setting-disabled-option .setting-disabled-option-icon {
        align-self: center;
    }

.empty-list-message,
.empty-table-message {
    background-color: inherit;
    --csstools-light-dark-toggle--571: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--571, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    font-size: 1.5em;
    padding: 3em 1em !important;
    text-align: center;
}

.filter_text_input {
    padding: 4px 6px;
    padding: var(--input-vertical-padding) var(--input-horizontal-padding);
    --csstools-light-dark-toggle--641: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--641, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    border: 1px solid hsl(0, 0%, 80%);
    border: var(--input-border-width) solid hsl(0, 0%, 80%);
    transition:
        border-color linear 0.2s, box-shadow linear 0.2s;
    box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
    border-radius: 4px;
    font-family: inherit;
}

.filter_text_input:focus {
        border-color: hsla(206, 80%, 62%, 0.8);
        outline: 0;
        box-shadow:
            inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
            0 0 8px hsla(206, 80%, 62%, 0.6);
    }

/**
 * Use the "tab-picker-vertical" class in conjunction
 * for a vertical tab picker.
 */
.tab-picker {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-gap: 2px;
    grid-gap: var(--grid-gap-tab-picker);
    gap: 2px;
    gap: var(--grid-gap-tab-picker);
    box-sizing: border-box;
    border-radius: 5px;
    /* Using max-content ensures equal width tabs. */
    min-width: -moz-max-content;
    min-width: max-content;
    padding: 1px;
    --csstools-light-dark-toggle--642: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.3);
    background-color: hsla(0, 0%, 0%, 0.07);
    background-color: var(--csstools-light-dark-toggle--642, hsla(0, 0%, 0%, 0.07));
    background-color: light-dark(
        hsla(0, 0%, 0%, 0.07),
        hsla(0, 0%, 0%, 0.3)
    );
    background-color: var(--color-background-tab-picker-container);
    /* 16px at 15px/1em */
    font-size: 1.0666em;
}
.tab-picker input[type="radio"] {
        display: none;
    }
.tab-picker .tab-option-content {
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        /* Avoids layout shift while showing a border when pressed.  */
        border: 1px solid transparent;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 3px 7px;
        color: var(--color-text-dropdown-menu);
    }
.tab-picker .tab-option-content .zulip-icon {
            /* Clear inherited position. */
            position: static;
            color: hsl(240, 35%, 60%);
            color: var(--color-icon-purple);
        }
.tab-picker .tab-option:not(:checked) + .tab-option-content:hover {
            --csstools-light-dark-toggle--920: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
            background-color: hsla(0, 0%, 100%, 0.6);
            background-color: var(--csstools-light-dark-toggle--920, hsla(0, 0%, 100%, 0.6));
            background-color: light-dark(
        hsla(0, 0%, 100%, 0.6),
        hsla(0, 0%, 100%, 0.05)
    );
            background-color: var(
                --color-background-tab-picker-tab-option-hover
            );
        }
.tab-picker .tab-option:not(:checked) + .tab-option-content:focus-visible {
            --csstools-light-dark-toggle--921: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
            background-color: hsla(0, 0%, 100%, 0.6);
            background-color: var(--csstools-light-dark-toggle--921, hsla(0, 0%, 100%, 0.6));
            background-color: light-dark(
        hsla(0, 0%, 100%, 0.6),
        hsla(0, 0%, 100%, 0.05)
    );
            background-color: var(
                --color-background-tab-picker-tab-option-hover
            );
        }
.tab-picker .tab-option:not(:checked) + .tab-option-content:active {
            --csstools-light-dark-toggle--922: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.03);
            background-color: hsla(0, 0%, 100%, 0.35);
            background-color: var(--csstools-light-dark-toggle--922, hsla(0, 0%, 100%, 0.35));
            background-color: light-dark(
        hsla(0, 0%, 100%, 0.35),
        hsla(0, 0%, 100%, 0.03)
    );
            background-color: var(
                --color-background-tab-picker-tab-option-active
            );
        }
.tab-picker .tab-option:nth-of-type(1):checked ~ .slider {
            --tab-selected-tab-picker: 0;
        }
.tab-picker .tab-option:nth-of-type(2):checked ~ .slider {
            --tab-selected-tab-picker: 1;
        }
.tab-picker .tab-option:nth-of-type(3):checked ~ .slider {
            --tab-selected-tab-picker: 2;
        }
.tab-picker .tab-option:nth-of-type(4):checked ~ .slider {
            --tab-selected-tab-picker: 3;
        }
.tab-picker .tab-option:nth-of-type(5):checked ~ .slider {
            --tab-selected-tab-picker: 4;
        }
/* If a tab picker with more than 5 tabs is required,
           extend this using the same pattern as above. */
.tab-picker .slider {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        /* Move along X-axis: own width + gap between two tabs. */
        transform: translateX(
            calc(
                (100% + 2px) *
                    var(--tab-selected-tab-picker)
            )
        );
        transform: translateX(
            calc(
                (100% + var(--grid-gap-tab-picker)) *
                    var(--tab-selected-tab-picker)
            )
        );
        transition: transform 0.25s cubic-bezier(0.64, 0, 0.78, 0);
        box-sizing: border-box;
        --csstools-light-dark-toggle--643: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.12);
        border: 1px solid hsla(0, 0%, 0%, 0.3);
        border: 1px solid var(--csstools-light-dark-toggle--643, hsla(0, 0%, 0%, 0.3));
        border: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.12)
    );
        border: 1px solid var(--color-outline-tab-picker-tab-option);
        border-radius: 4px;
        --csstools-light-dark-toggle--644: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.07);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--644, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 100%, 0.07)
    );
        background-color: var(--color-background-tab-picker-selected-tab);
    }
/* Detect if a user has enabled a setting on their device
        to minimize the amount of non-essential motion. */
@media (prefers-reduced-motion) {
        .tab-picker .slider {
            transition: none;
        }

        .tab-picker .tab-option:not(:checked) + .tab-option-content:active {
            --csstools-light-dark-toggle--645: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.12);
            border-color: hsla(0, 0%, 0%, 0.3);
            border-color: var(--csstools-light-dark-toggle--645, hsla(0, 0%, 0%, 0.3));
            border-color: light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.12)
    );
            border-color: var(--color-outline-tab-picker-tab-option);
        }
    }
/* Related to vertical tab picker. */
.tab-picker.tab-picker-vertical {
        grid-auto-flow: row;
        grid-auto-rows: 1fr;
    }
.tab-picker.tab-picker-vertical .slider {
            /* Move along Y-axis: own height + gap between two tabs. */
            transform: translateY(
                calc(
                    (100% + 2px) *
                        var(--tab-selected-tab-picker)
                )
            );
            transform: translateY(
                calc(
                    (100% + var(--grid-gap-tab-picker)) *
                        var(--tab-selected-tab-picker)
                )
            );
        }

.copy-button {
    display: flex;
    border-radius: 4px;
    --csstools-light-dark-toggle--646: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    color: rgba(84, 87, 100, 0.7);
    color: var(--csstools-light-dark-toggle--646, rgba(84, 87, 100, 0.7));
    color: light-dark(
        
        rgba(84, 87, 100, 0.7),
        
        rgba(171, 174, 186, 0.7)
    );
    color: var(--color-copy-button);
    /* 2px at 16px/1em */
    padding: 0.125em;
    cursor: pointer;
}

.copy-button:hover,.copy-button:focus-visible {
        --csstools-light-dark-toggle--572: var(--csstools-color-scheme--light) #aaadba;
        color: #535663;
        color: var(--csstools-light-dark-toggle--572, #535663);
        color: light-dark(#535663, #aaadba);
        color: var(--color-copy-button-hover);
    }

.copy-button:active {
        --csstools-light-dark-toggle--647: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
        color: rgba(84, 87, 100, 0.7);
        color: var(--csstools-light-dark-toggle--647, rgba(84, 87, 100, 0.7));
        color: light-dark(
        
        rgba(84, 87, 100, 0.7),
        
        rgba(171, 174, 186, 0.7)
    );
        color: var(--color-copy-button-active);
    }

.copy-button.copy-button-square:hover,.copy-button.copy-button-square :focus-visible {
            --csstools-light-dark-toggle--648: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
            background-color: rgba(84, 87, 100, 0.07);
            background-color: var(--csstools-light-dark-toggle--648, rgba(84, 87, 100, 0.07));
            background-color: light-dark(
        
        rgba(84, 87, 100, 0.07),
        
        rgba(144, 147, 162, 0.14)
    );
            background-color: var(--color-copy-button-square-bg-hover);
        }

.copy-button.copy-button-square:active {
            --csstools-light-dark-toggle--649: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
            background-color: rgba(84, 87, 100, 0.11);
            background-color: var(--csstools-light-dark-toggle--649, rgba(84, 87, 100, 0.11));
            background-color: light-dark(
        
        rgba(84, 87, 100, 0.11),
        
        rgba(144, 147, 162, 0.18)
    );
            background-color: var(--color-copy-button-square-bg-active);
            --csstools-light-dark-toggle--573: var(--csstools-color-scheme--light) #aaadba;
            color: #535663;
            color: var(--csstools-light-dark-toggle--573, #535663);
            color: light-dark(
        #535663,
        #aaadba
    );
            color: var(--color-copy-button-square-active);
        }

.copy-button.copy-button-success {
        --csstools-light-dark-toggle--574: var(--csstools-color-scheme--light) #57c273;
        color: #07833c;
        color: var(--csstools-light-dark-toggle--574, #07833c);
        color: light-dark(#07833c, #57c273);
        color: var(--color-copy-button-success);
    }

.text-success {
    color: hsl(121, 32%, 40%);
}

.text-error {
    color: hsl(1, 45%, 50%);
}

.sticky-bottom-option-button {
    width: 100%;
    display: flex;
    position: relative;
    padding: 7px 14px;
    --csstools-light-dark-toggle--650: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    background-color: rgba(119, 122, 136, 0.12);
    background-color: var(--csstools-light-dark-toggle--650, rgba(119, 122, 136, 0.12));
    background-color: light-dark(
        rgba(119, 122, 136, 0.12),
        rgba(187, 189, 201, 0.12)
    );
    background-color: var(--color-background-neutral-subtle-action-button);
    justify-content: flex-start;
    --csstools-light-dark-toggle--651: var(--csstools-color-scheme--light) hsl(0, 0%, 75%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--651, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 75%));
    color: var(--color-dropdown-item);
    --csstools-light-dark-toggle--652: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
    border: 1px solid hsl(0, 0%, 80%);
    border: 1px solid var(--csstools-light-dark-toggle--652, hsl(0, 0%, 80%));
    border: 1px solid light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
    border: 1px solid var(--color-border-zulip-button);
    border-radius: 4px;
    font-family: inherit;
    font-size: inherit;
}

.sticky-bottom-option-button:hover {
        --csstools-light-dark-toggle--653: var(--csstools-color-scheme--light) hsl(0, 0%, 75%);
        color: hsl(0, 0%, 20%);
        color: var(--csstools-light-dark-toggle--653, hsl(0, 0%, 20%));
        color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 75%));
        color: var(--color-dropdown-item);
        --csstools-light-dark-toggle--654: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.17);
        background-color: rgba(119, 122, 136, 0.17);
        background-color: var(--csstools-light-dark-toggle--654, rgba(119, 122, 136, 0.17));
        background-color: light-dark(
        rgba(119, 122, 136, 0.17),
        rgba(187, 189, 201, 0.17)
    );
        background-color: var(
            --color-background-neutral-subtle-action-button-hover
        );
        --csstools-light-dark-toggle--655: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
        border-color: hsl(0, 0%, 60%);
        border-color: var(--csstools-light-dark-toggle--655, hsl(0, 0%, 60%));
        border-color: light-dark(
        hsl(0, 0%, 60%),
        light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    )
    );
        border-color: var(--color-border-zulip-button-interactive);
    }

.sticky-bottom-option-button:focus,.sticky-bottom-option-button.current_selection {
        --csstools-light-dark-toggle--656: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.17);
        background-color: rgba(119, 122, 136, 0.17);
        background-color: var(--csstools-light-dark-toggle--656, rgba(119, 122, 136, 0.17));
        background-color: light-dark(
        rgba(119, 122, 136, 0.17),
        rgba(187, 189, 201, 0.17)
    );
        background-color: var(
            --color-background-neutral-subtle-action-button-hover
        );
        outline: none;
    }

.sticky-bottom-option-button:focus::before,.sticky-bottom-option-button.current_selection::before {
        content: "";
        position: absolute;
        left: 0;
        top: 1px;
        bottom: 2px;
        width: 3px;
        background-color: hsl(215, 47%, 50%);
        background-color: var(--color-outline-focus);
        border-radius: 4px;
    }

/* Styling for invalid inputs */
input.invalid-input {
    /* The use of !important is necessary here to override
       border-color specified for text input elements in
       dark_theme.css which has a higher specificity. */
    --csstools-light-dark-toggle--657: var(--csstools-color-scheme--light) hsl(3, 73%, 74%) !important;
    border-color: hsl(3, 57%, 33%) !important;
    border-color: var(--csstools-light-dark-toggle--657, hsl(3, 57%, 33%)) !important;
    border-color: light-dark(
        hsl(3, 57%, 33%),
        hsl(3, 73%, 74%)
    ) !important;
    border-color: var(--color-invalid-input-border) !important;
}
input.invalid-input:focus {
        --csstools-light-dark-toggle--658: var(--csstools-color-scheme--light) hsl(3, 73%, 74%);
        box-shadow: 0 0 2px hsl(3, 57%, 33%);
        box-shadow: 0 0 2px var(--csstools-light-dark-toggle--658, hsl(3, 57%, 33%));
        box-shadow: 0 0 2px light-dark(
        hsl(3, 57%, 33%),
        hsl(3, 73%, 74%)
    );
        box-shadow: var(--invalid-input-box-shadow);
    }

/* This is a utility class for line clamping. */
.line-clamp {
    /* Despite the below prefixed properties being deprecated,
       the co-dependency of these three properties is a fully
       specified behavior and will continue to be supported.
       Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/line-clamp */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* The value of --line-clamp-value is not defined globally and instead
       inherits the value from another class or the parent element. If it
       is not defined, it defaults to 2. */
    -webkit-line-clamp: 2;
    -webkit-line-clamp: var(--line-clamp-value, 2);
    /* Also define the standard property 'line-clamp' for compatibility,
       for when the vendor prefix "-webkit-" is no longer required. */
    line-clamp: 2;
    line-clamp: var(--line-clamp-value, 2);
    text-overflow: ellipsis;
    overflow: hidden;
}

.info-density-controls .button-group {
        border-radius: 5px;
        --csstools-light-dark-toggle--659: var(--csstools-color-scheme--light) hsla(0, 0%, 90%, 0.2);
        border: 1px solid hsla(0, 0%, 0%, 0.2);
        border: 1px solid var(--csstools-light-dark-toggle--659, hsla(0, 0%, 0%, 0.2));
        border: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 90%, 0.2)
    );
        border: 1px solid var(--color-info-density-control-border);
        width: 100%;
        display: grid;
        grid-auto-flow: column;
    }

.info-density-controls .button-group .info-density-button-container {
            display: inline-flex;
            flex-direction: column;
        }

.info-density-controls .button-group .info-density-button-container:first-of-type .info-density-button {
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
                }

.info-density-controls .button-group .info-density-button-container:last-of-type .info-density-button {
                    border-top-right-radius: 5px;
                    border-bottom-right-radius: 5px;
                }

.info-density-controls .button-group .info-density-button {
            border: none;
            --csstools-light-dark-toggle--923: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--923, hsl(0, 0%, 100%));
            background-color: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 17%));
            background-color: var(--color-background-popover);
            padding: 0.25em 0.4375em;
            display: inline-flex;
            align-items: center;
            vertical-align: baseline;
            vertical-align: initial;
            justify-content: center;
            margin: 0;
            font-size: inherit;
        }

.info-density-controls .button-group .info-density-button:hover:not(:disabled) {
                --csstools-light-dark-toggle--924: var(--csstools-color-scheme--light) hsla(229, 10%, 50%, 0.3);
                background-color: hsla(229, 9%, 36%, 0.07);
                background-color: var(--csstools-light-dark-toggle--924, hsla(229, 9%, 36%, 0.07));
                background-color: light-dark(
        hsla(229, 9%, 36%, 0.07),
        hsla(229, 10%, 50%, 0.3)
    );
                background-color: var(
                    --color-info-density-button-hover-background
                );
            }

.info-density-controls .button-group .info-density-button:focus {
                outline: none;
            }

.info-density-controls .button-group .info-density-button:disabled {
                cursor: default;
                opacity: 0.4;
            }

.info-density-controls .button-group .info-density-button .zulip-icon {
                display: flex;
                align-items: center;
                --csstools-light-dark-toggle--925: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.8);
                color: hsl(229, 9%, 36%);
                color: var(--csstools-light-dark-toggle--925, hsl(229, 9%, 36%));
                color: light-dark(
        hsl(229, 9%, 36%),
        hsla(0, 0%, 100%, 0.8)
    );
                color: var(--color-info-density-button-icon);
                opacity: 0.7;
            }

#uppy-editor .modal__title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

#uppy-editor .loading-placeholder {
        position: absolute;
        top: calc(50% - 1.3572em);
        left: calc(50% - 1.3572em);
    }

#uppy-editor .modal__content {
        padding: 0;
        max-width: 100%;
        width: 100%;
    }

#uppy-editor #dialog_error {
        margin: 0 1.5em 1.5em;
    }

#uppy-editor .image-cropper-container {
        height: 550px;
    }

#uppy-editor .uppy-Root {
        height: 100%;
        overflow: hidden;
    }

#uppy-editor .uppy-ImageCropper-controls {
        /* This is needed to override the top padding set for narrow
        screens by cropperJS. */
        padding-top: 0;
    }

#uppy-editor .uppy-c-btn:focus:not(:focus-visible) {
            background-color: transparent;
            background-color: initial;
        }

#uppy-editor .uppy-c-btn:focus-visible {
            background-color: hsla(0, 0%, 100%, 0.5);
        }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.zulip-icon-loader-circle {
    animation: spin 1s linear infinite;
}

/* ---- components.css ---- */
/* Reusable, object-oriented CSS base components for all Zulip pages
   (both web app and portico). */

label.checkbox {
    padding: 0;
    display: inline-block;
    position: relative;
    vertical-align: top;
    min-height: 20px;
}

label.checkbox input[type="checkbox"] {
        position: absolute;
        clip-path: rect(0 0 0 0);
    }

label.checkbox input[type="checkbox"]  ~ .rendered-checkbox {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            top: -2px;

            padding: 2px;
            margin: 0 5px 0 0;
            height: 10px;
            width: 10px;

            font-weight: 300;
            line-height: 0.8;
            font-size: 1.3rem;
            text-align: center;
            /* Color variables are not imported to the portico, so we duplicate
               the light-mode color value here as a fallback. */
            --csstools-light-dark-toggle--1080: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.4);
            border: 1px solid
                hsla(0, 0%, 0%, 0.6);
            border: 1px solid
                var(--csstools-light-dark-toggle--1080, hsla(0, 0%, 0%, 0.6));
            border: 1px solid
                light-dark(
        hsla(0, 0%, 0%, 0.6),
        hsla(0, 0%, 100%, 0.4)
    );
            border: 1px solid
                var(--color-border-rendered-checkbox, hsla(0, 0%, 0%, 0.6));
            border-radius: 4px;

            cursor: pointer;
        }

label.checkbox input[type="checkbox"]:checked ~ .rendered-checkbox {
            /* As with the border color above, we duplicate
               the light-mode SVG URL value here as a fallback. */
            background-image: url("../images/checkbox.svg");
            background-image: var(
                --svg-url-rendered-checkbox,
                url("../images/checkbox.svg")
            );
            background-size: 85%;
            background-position: 50% 50%;
            background-repeat: no-repeat;
        }

label.checkbox input[type="checkbox"]:disabled ~ .rendered-checkbox {
            opacity: 0.5;
            cursor: not-allowed;
        }

label.checkbox:has(.enter_sends) {
        vertical-align: middle;
    }

a.no-style {
    color: inherit;
}

a.no-underline,
a.no-underline:hover,
a.no-underline:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
}

.italic {
    font-style: italic;
}

.simplebar-track .simplebar-scrollbar::before {
        background-color: hsl(0, 0%, 0%);
        box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.33);
    }

.simplebar-track.simplebar-vertical {
        transition: width 0.2s ease 1s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
    }

.simplebar-track.simplebar-vertical.simplebar-hover {
            width: 15px;
            transition: width 0.2s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
        }

.simplebar-track.simplebar-horizontal {
        transition: height 0.2s ease 1s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
    }

.simplebar-track.simplebar-horizontal.simplebar-hover {
            height: 15px;
            transition: height 0.2s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
        }

i.zulip-icon.zulip-icon-bot {
    --csstools-light-dark-toggle--575: var(--csstools-color-scheme--light) hsl(180, 5%, 50%);
    color: hsl(180, 8%, 65%);
    color: var(--csstools-light-dark-toggle--575, hsl(180, 8%, 65%));
    color: light-dark(
        hsl(180, 8%, 65%),
        hsl(180, 5%, 50%)
    );
    color: var(--color-icon-bot);
}

/* Hide the somewhat buggy browser show password feature in IE, Edge,
   since it duplicates our own "show password" widget. */
input::-ms-reveal {
    display: none;
}

.password-div {
    position: relative;
}

.password-div .password_visibility_toggle {
        position: absolute;
        right: 10px;
        top: 42px;
        opacity: 0.6;
    }

.password-div .password_visibility_toggle:hover {
            opacity: 1;
        }

select.bootstrap-focus-style:focus {
        outline: 1px dotted hsl(0, 0%, 20%);
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
        transition: none;
    }

/* ---- buttons.css ---- */
.action-button {
    position: relative;
    display: flex;
    gap: 0.75ch;
    justify-content: center;
    align-items: center;
    line-height: 1.25;
    font-size: 14px;
    font-size: var(--base-font-size-px);
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.02ch;
    padding: 0.25em 0.625em;
    --csstools-light-dark-toggle--660: var(--csstools-color-scheme--light) hsl(231, 11%, 76%);
    color: hsl(229, 12%, 25%);
    color: var(--csstools-light-dark-toggle--660, hsl(229, 12%, 25%));
    color: light-dark(
        hsl(229, 12%, 25%),
        hsl(231, 11%, 76%)
    );
    color: var(--color-text-neutral-subtle-action-button);
    --csstools-light-dark-toggle--661: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    background-color: rgba(119, 122, 136, 0.12);
    background-color: var(--csstools-light-dark-toggle--661, rgba(119, 122, 136, 0.12));
    background-color: light-dark(
        rgba(119, 122, 136, 0.12),
        rgba(187, 189, 201, 0.12)
    );
    background-color: var(--color-background-neutral-subtle-action-button);
    border-radius: 4px;
    white-space: nowrap;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    border: none;
    cursor: pointer;
    clip-path: inset(-1px);
    transition: 0.05s ease-in;
    transition-property: background-color, clip-path;
}
.action-button:hover,.action-button:focus-visible {
        --csstools-light-dark-toggle--662: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.17);
        background-color: rgba(119, 122, 136, 0.17);
        background-color: var(--csstools-light-dark-toggle--662, rgba(119, 122, 136, 0.17));
        background-color: light-dark(
        rgba(119, 122, 136, 0.17),
        rgba(187, 189, 201, 0.17)
    );
        background-color: var(
            --color-background-neutral-subtle-action-button-hover
        );
        transition: 0.1s ease-out;
        transition-property: background-color, clip-path;
    }
.action-button:active {
        --csstools-light-dark-toggle--663: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
        background-color: rgba(119, 122, 136, 0.22);
        background-color: var(--csstools-light-dark-toggle--663, rgba(119, 122, 136, 0.22));
        background-color: light-dark(
        rgba(119, 122, 136, 0.22),
        rgba(187, 189, 201, 0.12)
    );
        background-color: var(
            --color-background-neutral-subtle-action-button-active
        );
        clip-path: inset(1px round 4px);
    }
.action-button:focus {
        /* Override common button outline style set in zulip.css and dark_theme.css */
        outline: none;
    }
.action-button:focus-visible {
        /* Override common button outline style set in zulip.css and dark_theme.css */
        --csstools-light-dark-toggle--664: var(--csstools-color-scheme--light) hsl(0, 0%, 100%) !important;
        outline: 1.5px solid
            hsl(0, 0%, 0%) !important;
        outline: 1.5px solid
            var(--csstools-light-dark-toggle--664, hsl(0, 0%, 0%)) !important;
        outline: 1.5px solid
            light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    ) !important;
        outline: var(--outline-width-button-focus) solid
            var(--color-outline-button-focus) !important;
        outline-offset: 0;
        outline-offset: var(--outline-offset-button-focus);
        clip-path: inset(
            calc(
                    -1 *
                        (
                            1.5px +
                                0
                        )
                )
                round 4px
        );
        clip-path: inset(
            calc(
                    -1 *
                        (
                            var(--outline-width-button-focus) +
                                var(--outline-offset-button-focus)
                        )
                )
                round 4px
        );
    }
.action-button:disabled {
        cursor: default;
        pointer-events: none;
        opacity: 0.5;
    }
.action-button .zulip-icon {
        /* We apply the same line-height to icons,
           as those applied to the label element,
           to maintain a consistent height for
           icon-only action buttons. */
        line-height: 1.25; /* 20px at 16px/1em */
    }

.action-button-label {
    max-width: 32ch;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Action buttons -- Neutral Intent */
.action-button-solid-neutral {
    --csstools-light-dark-toggle--926: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    color: hsl(0, 0%, 100%);
    color: var(--csstools-light-dark-toggle--926, hsl(0, 0%, 100%));
    color: light-dark(
        hsl(0, 0%, 100%),
        rgba(255, 255, 255, 0.85)
    );
    color: var(--color-text-neutral-solid-action-button);
    --csstools-light-dark-toggle--665: var(--csstools-color-scheme--light) hsl(229, 9%, 36%);
    background-color: hsl(229, 7%, 50%);
    background-color: var(--csstools-light-dark-toggle--665, hsl(229, 7%, 50%));
    background-color: light-dark(
        hsl(229, 7%, 50%),
        hsl(229, 9%, 36%)
    );
    background-color: var(--color-background-neutral-solid-action-button);
}
.action-button-solid-neutral:hover,.action-button-solid-neutral:focus-visible {
        --csstools-light-dark-toggle--666: var(--csstools-color-scheme--light) hsl(229, 8%, 42%);
        background-color: hsl(229, 7%, 47%);
        background-color: var(--csstools-light-dark-toggle--666, hsl(229, 7%, 47%));
        background-color: light-dark(
        hsl(229, 7%, 47%),
        hsl(229, 8%, 42%)
    );
        background-color: var(
            --color-background-neutral-solid-action-button-hover
        );
    }
.action-button-solid-neutral:active {
        --csstools-light-dark-toggle--667: var(--csstools-color-scheme--light) hsl(229, 9%, 36%);
        background-color: hsl(232, 7%, 44%);
        background-color: var(--csstools-light-dark-toggle--667, hsl(232, 7%, 44%));
        background-color: light-dark(
        hsl(232, 7%, 44%),
        hsl(229, 9%, 36%)
    );
        background-color: var(
            --color-background-neutral-solid-action-button-active
        );
    }

.action-button-subtle-neutral {
    --csstools-light-dark-toggle--668: var(--csstools-color-scheme--light) hsl(231, 11%, 76%);
    color: hsl(229, 12%, 25%);
    color: var(--csstools-light-dark-toggle--668, hsl(229, 12%, 25%));
    color: light-dark(
        hsl(229, 12%, 25%),
        hsl(231, 11%, 76%)
    );
    color: var(--color-text-neutral-subtle-action-button);
    --csstools-light-dark-toggle--669: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
    background-color: rgba(119, 122, 136, 0.12);
    background-color: var(--csstools-light-dark-toggle--669, rgba(119, 122, 136, 0.12));
    background-color: light-dark(
        rgba(119, 122, 136, 0.12),
        rgba(187, 189, 201, 0.12)
    );
    background-color: var(--color-background-neutral-subtle-action-button);
    --csstools-light-dark-toggle--670: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.21);
    box-shadow: 0 0 0.5px 0.5px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 0 0.5px 0.5px var(--csstools-light-dark-toggle--670, rgba(0, 0, 0, 0.2)) inset;
    box-shadow: 0 0 0.5px 0.5px light-dark(
        rgba(0, 0, 0, 0.2),
        rgba(255, 255, 255, 0.21)
    ) inset;
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-subtle-neutral:hover,.action-button-subtle-neutral:focus-visible {
        --csstools-light-dark-toggle--671: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.17);
        background-color: rgba(119, 122, 136, 0.17);
        background-color: var(--csstools-light-dark-toggle--671, rgba(119, 122, 136, 0.17));
        background-color: light-dark(
        rgba(119, 122, 136, 0.17),
        rgba(187, 189, 201, 0.17)
    );
        background-color: var(
            --color-background-neutral-subtle-action-button-hover
        );
    }

.action-button-subtle-neutral:active {
        --csstools-light-dark-toggle--672: var(--csstools-color-scheme--light) rgba(187, 189, 201, 0.12);
        background-color: rgba(119, 122, 136, 0.22);
        background-color: var(--csstools-light-dark-toggle--672, rgba(119, 122, 136, 0.22));
        background-color: light-dark(
        rgba(119, 122, 136, 0.22),
        rgba(187, 189, 201, 0.12)
    );
        background-color: var(
            --color-background-neutral-subtle-action-button-active
        );
    }

.action-button-text-neutral {
    --csstools-light-dark-toggle--673: var(--csstools-color-scheme--light) hsl(229, 10%, 70%);
    color: hsl(229, 9%, 36%);
    color: var(--csstools-light-dark-toggle--673, hsl(229, 9%, 36%));
    color: light-dark(
        hsl(229, 9%, 36%),
        hsl(229, 10%, 70%)
    );
    color: var(--color-text-neutral-text-action-button);
    background-color: transparent;
}

.action-button-text-neutral:hover,.action-button-text-neutral:focus-visible {
        --csstools-light-dark-toggle--674: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
        background-color: rgba(84, 87, 100, 0.07);
        background-color: var(--csstools-light-dark-toggle--674, rgba(84, 87, 100, 0.07));
        background-color: light-dark(
        rgba(84, 87, 100, 0.07),
        rgba(144, 147, 162, 0.14)
    );
        background-color: var(
            --color-background-neutral-text-action-button-hover
        );
    }

.action-button-text-neutral:active {
        --csstools-light-dark-toggle--675: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
        background-color: rgba(84, 87, 100, 0.11);
        background-color: var(--csstools-light-dark-toggle--675, rgba(84, 87, 100, 0.11));
        background-color: light-dark(
        rgba(84, 87, 100, 0.11),
        rgba(144, 147, 162, 0.18)
    );
        background-color: var(
            --color-background-neutral-text-action-button-active
        );
    }

/* Action buttons -- Brand Intent */
.action-button-solid-brand {
    --csstools-light-dark-toggle--927: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    color: hsl(0, 0%, 100%);
    color: var(--csstools-light-dark-toggle--927, hsl(0, 0%, 100%));
    color: light-dark(
        hsl(0, 0%, 100%),
        rgba(255, 255, 255, 0.85)
    );
    color: var(--color-text-brand-solid-action-button);
    --csstools-light-dark-toggle--676: var(--csstools-color-scheme--light) hsl(261, 79%, 43%);
    background-color: hsl(254, 99%, 68%);
    background-color: var(--csstools-light-dark-toggle--676, hsl(254, 99%, 68%));
    background-color: light-dark(
        hsl(254, 99%, 68%),
        hsl(261, 79%, 43%)
    );
    background-color: var(--color-background-brand-solid-action-button);
}
.action-button-solid-brand:hover,.action-button-solid-brand:focus-visible {
        --csstools-light-dark-toggle--677: var(--csstools-color-scheme--light) hsl(258, 66%, 51%);
        background-color: hsl(255, 81%, 61%);
        background-color: var(--csstools-light-dark-toggle--677, hsl(255, 81%, 61%));
        background-color: light-dark(
        hsl(255, 81%, 61%),
        hsl(258, 66%, 51%)
    );
        background-color: var(
            --color-background-brand-solid-action-button-hover
        );
    }
.action-button-solid-brand:active {
        --csstools-light-dark-toggle--678: var(--csstools-color-scheme--light) hsl(261, 79%, 43%);
        background-color: hsl(258, 66%, 51%);
        background-color: var(--csstools-light-dark-toggle--678, hsl(258, 66%, 51%));
        background-color: light-dark(
        hsl(258, 66%, 51%),
        hsl(261, 79%, 43%)
    );
        background-color: var(
            --color-background-brand-solid-action-button-active
        );
    }

.action-button-subtle-brand {
    --csstools-light-dark-toggle--679: var(--csstools-color-scheme--light) hsl(244, 96%, 82%);
    color: hsl(264, 95%, 34%);
    color: var(--csstools-light-dark-toggle--679, hsl(264, 95%, 34%));
    color: light-dark(
        hsl(264, 95%, 34%),
        hsl(244, 96%, 82%)
    );
    color: var(--color-text-brand-subtle-action-button);
    --csstools-light-dark-toggle--680: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
    background-color: rgba(130, 93, 254, 0.12);
    background-color: var(--csstools-light-dark-toggle--680, rgba(130, 93, 254, 0.12));
    background-color: light-dark(
        rgba(130, 93, 254, 0.12),
        rgba(160, 150, 253, 0.12)
    );
    background-color: var(--color-background-brand-subtle-action-button);
    --csstools-light-dark-toggle--681: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.21);
    box-shadow: 0 0 0.5px 0.5px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 0 0.5px 0.5px var(--csstools-light-dark-toggle--681, rgba(0, 0, 0, 0.2)) inset;
    box-shadow: 0 0 0.5px 0.5px light-dark(
        rgba(0, 0, 0, 0.2),
        rgba(255, 255, 255, 0.21)
    ) inset;
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-subtle-brand:hover,.action-button-subtle-brand:focus-visible {
        --csstools-light-dark-toggle--682: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.17);
        background-color: rgba(130, 93, 254, 0.17);
        background-color: var(--csstools-light-dark-toggle--682, rgba(130, 93, 254, 0.17));
        background-color: light-dark(
        rgba(130, 93, 254, 0.17),
        rgba(160, 150, 253, 0.17)
    );
        background-color: var(
            --color-background-brand-subtle-action-button-hover
        );
    }

.action-button-subtle-brand:active {
        --csstools-light-dark-toggle--683: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
        background-color: rgba(130, 93, 254, 0.22);
        background-color: var(--csstools-light-dark-toggle--683, rgba(130, 93, 254, 0.22));
        background-color: light-dark(
        rgba(130, 93, 254, 0.22),
        rgba(160, 150, 253, 0.12)
    );
        background-color: var(
            --color-background-brand-subtle-action-button-active
        );
    }

.action-button-text-brand {
    --csstools-light-dark-toggle--684: var(--csstools-color-scheme--light) hsl(246, 96%, 79%);
    color: hsl(255, 54%, 50%);
    color: var(--csstools-light-dark-toggle--684, hsl(255, 54%, 50%));
    color: light-dark(
        hsl(255, 54%, 50%),
        hsl(246, 96%, 79%)
    );
    color: var(--color-text-brand-text-action-button);
    background-color: transparent;
}

.action-button-text-brand:hover,.action-button-text-brand:focus-visible {
        --csstools-light-dark-toggle--685: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.14);
        background-color: rgba(45, 0, 112, 0.05);
        background-color: var(--csstools-light-dark-toggle--685, rgba(45, 0, 112, 0.05));
        background-color: light-dark(
        rgba(45, 0, 112, 0.05),
        rgba(138, 112, 255, 0.14)
    );
        background-color: var(
            --color-background-brand-text-action-button-hover
        );
    }

.action-button-text-brand:active {
        --csstools-light-dark-toggle--686: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.18);
        background-color: rgba(45, 0, 112, 0.1);
        background-color: var(--csstools-light-dark-toggle--686, rgba(45, 0, 112, 0.1));
        background-color: light-dark(
        rgba(45, 0, 112, 0.1),
        rgba(138, 112, 255, 0.18)
    );
        background-color: var(
            --color-background-brand-text-action-button-active
        );
    }

/* Action buttons -- Info Intent */
.action-button-solid-info {
    --csstools-light-dark-toggle--928: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    color: hsl(0, 0%, 100%);
    color: var(--csstools-light-dark-toggle--928, hsl(0, 0%, 100%));
    color: light-dark(
        hsl(0, 0%, 100%),
        rgba(255, 255, 255, 0.85)
    );
    color: var(--color-text-info-solid-action-button);
    --csstools-light-dark-toggle--687: var(--csstools-color-scheme--light) hsl(228, 75%, 47%);
    background-color: hsl(226, 100%, 62%);
    background-color: var(--csstools-light-dark-toggle--687, hsl(226, 100%, 62%));
    background-color: light-dark(
        hsl(226, 100%, 62%),
        hsl(228, 75%, 47%)
    );
    background-color: var(--color-background-info-solid-action-button);
}
.action-button-solid-info:hover,.action-button-solid-info:focus-visible {
        background-color: hsl(226, 83%, 55%);
        background-color: var(
            --color-background-info-solid-action-button-hover
        );
    }
.action-button-solid-info:active {
        background-color: hsl(228, 75%, 47%);
        background-color: var(
            --color-background-info-solid-action-button-active
        );
    }

.action-button-subtle-info {
    --csstools-light-dark-toggle--688: var(--csstools-color-scheme--light) hsl(222, 98%, 79%);
    color: hsl(231, 82%, 36%);
    color: var(--csstools-light-dark-toggle--688, hsl(231, 82%, 36%));
    color: light-dark(
        hsl(231, 82%, 36%),
        hsl(222, 98%, 79%)
    );
    color: var(--color-text-info-subtle-action-button);
    --csstools-light-dark-toggle--689: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.12);
    background-color: rgba(61, 106, 255, 0.12);
    background-color: var(--csstools-light-dark-toggle--689, rgba(61, 106, 255, 0.12));
    background-color: light-dark(
        rgba(61, 106, 255, 0.12),
        rgba(149, 180, 254, 0.12)
    );
    background-color: var(--color-background-info-subtle-action-button);
    --csstools-light-dark-toggle--690: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.21);
    box-shadow: 0 0 0.5px 0.5px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 0 0.5px 0.5px var(--csstools-light-dark-toggle--690, rgba(0, 0, 0, 0.2)) inset;
    box-shadow: 0 0 0.5px 0.5px light-dark(
        rgba(0, 0, 0, 0.2),
        rgba(255, 255, 255, 0.21)
    ) inset;
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-subtle-info:hover,.action-button-subtle-info:focus-visible {
        --csstools-light-dark-toggle--691: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.17);
        background-color: rgba(61, 106, 255, 0.17);
        background-color: var(--csstools-light-dark-toggle--691, rgba(61, 106, 255, 0.17));
        background-color: light-dark(
        rgba(61, 106, 255, 0.17),
        rgba(149, 180, 254, 0.17)
    );
        background-color: var(
            --color-background-info-subtle-action-button-hover
        );
    }

.action-button-subtle-info:active {
        --csstools-light-dark-toggle--692: var(--csstools-color-scheme--light) rgba(149, 180, 254, 0.12);
        background-color: rgba(61, 106, 255, 0.22);
        background-color: var(--csstools-light-dark-toggle--692, rgba(61, 106, 255, 0.22));
        background-color: light-dark(
        rgba(61, 106, 255, 0.22),
        rgba(149, 180, 254, 0.12)
    );
        background-color: var(
            --color-background-info-subtle-action-button-active
        );
    }

.action-button-text-info {
    --csstools-light-dark-toggle--693: var(--csstools-color-scheme--light) hsl(222, 97%, 75%);
    color: hsl(227, 70%, 46%);
    color: var(--csstools-light-dark-toggle--693, hsl(227, 70%, 46%));
    color: light-dark(
        hsl(227, 70%, 46%),
        hsl(222, 97%, 75%)
    );
    color: var(--color-text-info-text-action-button);
    background-color: transparent;
}

.action-button-text-info:hover,.action-button-text-info:focus-visible {
        --csstools-light-dark-toggle--694: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.12);
        background-color: rgba(5, 3, 124, 0.05);
        background-color: var(--csstools-light-dark-toggle--694, rgba(5, 3, 124, 0.05));
        background-color: light-dark(
        rgba(5, 3, 124, 0.05),
        rgba(78, 125, 253, 0.12)
    );
        background-color: var(--color-background-info-text-action-button-hover);
    }

.action-button-text-info:active {
        --csstools-light-dark-toggle--695: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.17);
        background-color: rgba(5, 3, 124, 0.09);
        background-color: var(--csstools-light-dark-toggle--695, rgba(5, 3, 124, 0.09));
        background-color: light-dark(
        rgba(5, 3, 124, 0.09),
        rgba(78, 125, 253, 0.17)
    );
        background-color: var(
            --color-background-info-text-action-button-active
        );
    }

/* Action buttons -- Success Intent */
.action-button-solid-success {
    --csstools-light-dark-toggle--929: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    color: hsl(0, 0%, 100%);
    color: var(--csstools-light-dark-toggle--929, hsl(0, 0%, 100%));
    color: light-dark(
        hsl(0, 0%, 100%),
        rgba(255, 255, 255, 0.85)
    );
    color: var(--color-text-success-solid-action-button);
    --csstools-light-dark-toggle--696: var(--csstools-color-scheme--light) hsl(144, 84%, 22%);
    background-color: hsl(146, 90%, 27%);
    background-color: var(--csstools-light-dark-toggle--696, hsl(146, 90%, 27%));
    background-color: light-dark(
        hsl(146, 90%, 27%),
        hsl(144, 84%, 22%)
    );
    background-color: var(--color-background-success-solid-action-button);
}
.action-button-solid-success:hover,.action-button-solid-success:focus-visible {
        background-color: hsl(145, 87%, 25%);
        background-color: var(
            --color-background-success-solid-action-button-hover
        );
    }
.action-button-solid-success:active {
        background-color: hsl(144, 84%, 22%);
        background-color: var(
            --color-background-success-solid-action-button-active
        );
    }

.action-button-subtle-success {
    --csstools-light-dark-toggle--697: var(--csstools-color-scheme--light) hsl(135, 56%, 63%);
    color: hsl(144, 88%, 16%);
    color: var(--csstools-light-dark-toggle--697, hsl(144, 88%, 16%));
    color: light-dark(
        hsl(144, 88%, 16%),
        hsl(135, 56%, 63%)
    );
    color: var(--color-text-success-subtle-action-button);
    --csstools-light-dark-toggle--698: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.12);
    background-color: rgba(7, 131, 61, 0.13);
    background-color: var(--csstools-light-dark-toggle--698, rgba(7, 131, 61, 0.13));
    background-color: light-dark(
        rgba(7, 131, 61, 0.13),
        rgba(65, 175, 98, 0.12)
    );
    background-color: var(--color-background-success-subtle-action-button);
    --csstools-light-dark-toggle--699: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.21);
    box-shadow: 0 0 0.5px 0.5px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 0 0.5px 0.5px var(--csstools-light-dark-toggle--699, rgba(0, 0, 0, 0.2)) inset;
    box-shadow: 0 0 0.5px 0.5px light-dark(
        rgba(0, 0, 0, 0.2),
        rgba(255, 255, 255, 0.21)
    ) inset;
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-subtle-success:hover,.action-button-subtle-success:focus-visible {
        --csstools-light-dark-toggle--700: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.17);
        background-color: rgba(7, 131, 61, 0.18);
        background-color: var(--csstools-light-dark-toggle--700, rgba(7, 131, 61, 0.18));
        background-color: light-dark(
        rgba(7, 131, 61, 0.18),
        rgba(65, 175, 98, 0.17)
    );
        background-color: var(
            --color-background-success-subtle-action-button-hover
        );
    }

.action-button-subtle-success:active {
        --csstools-light-dark-toggle--701: var(--csstools-color-scheme--light) rgba(65, 175, 98, 0.12);
        background-color: rgba(7, 131, 61, 0.23);
        background-color: var(--csstools-light-dark-toggle--701, rgba(7, 131, 61, 0.23));
        background-color: light-dark(
        rgba(7, 131, 61, 0.23),
        rgba(65, 175, 98, 0.12)
    );
        background-color: var(
            --color-background-success-subtle-action-button-active
        );
    }

.action-button-text-success {
    --csstools-light-dark-toggle--702: var(--csstools-color-scheme--light) hsl(136, 47%, 55%);
    color: hsl(146, 90%, 27%);
    color: var(--csstools-light-dark-toggle--702, hsl(146, 90%, 27%));
    color: light-dark(
        hsl(146, 90%, 27%),
        hsl(136, 47%, 55%)
    );
    color: var(--color-text-success-text-action-button);
    background-color: transparent;
}

.action-button-text-success:hover,.action-button-text-success:focus-visible {
        --csstools-light-dark-toggle--703: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.12);
        background-color: rgba(9, 103, 47, 0.08);
        background-color: var(--csstools-light-dark-toggle--703, rgba(9, 103, 47, 0.08));
        background-color: light-dark(
        rgba(9, 103, 47, 0.08),
        rgba(47, 157, 82, 0.12)
    );
        background-color: var(
            --color-background-success-text-action-button-hover
        );
    }

.action-button-text-success:active {
        --csstools-light-dark-toggle--704: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.17);
        background-color: rgba(9, 103, 47, 0.12);
        background-color: var(--csstools-light-dark-toggle--704, rgba(9, 103, 47, 0.12));
        background-color: light-dark(
        rgba(9, 103, 47, 0.12),
        rgba(47, 157, 82, 0.17)
    );
        background-color: var(
            --color-background-success-text-action-button-active
        );
    }

/* Action buttons -- Warning Intent */
.action-button-solid-warning {
    --csstools-light-dark-toggle--705: var(--csstools-color-scheme--light) rgba(0, 0, 0, 0.9);
    color: rgba(0, 0, 0, 0.88);
    color: var(--csstools-light-dark-toggle--705, rgba(0, 0, 0, 0.88));
    color: light-dark(
        rgba(0, 0, 0, 0.88),
        rgba(0, 0, 0, 0.9)
    );
    color: var(--color-text-warning-solid-action-button);
    --csstools-light-dark-toggle--706: var(--csstools-color-scheme--light) hsl(39, 89%, 45%);
    background-color: hsl(40, 99%, 62%);
    background-color: var(--csstools-light-dark-toggle--706, hsl(40, 99%, 62%));
    background-color: light-dark(
        hsl(40, 99%, 62%),
        hsl(39, 89%, 45%)
    );
    background-color: var(--color-background-warning-solid-action-button);
}
.action-button-solid-warning:hover,.action-button-solid-warning:focus-visible {
        --csstools-light-dark-toggle--707: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
        background-color: hsl(40, 94%, 56%);
        background-color: var(--csstools-light-dark-toggle--707, hsl(40, 94%, 56%));
        background-color: light-dark(
        hsl(40, 94%, 56%),
        hsl(41, 98%, 46%)
    );
        background-color: var(
            --color-background-warning-solid-action-button-hover
        );
    }
.action-button-solid-warning:active {
        --csstools-light-dark-toggle--708: var(--csstools-color-scheme--light) hsl(39, 89%, 45%);
        background-color: hsl(41, 98%, 46%);
        background-color: var(--csstools-light-dark-toggle--708, hsl(41, 98%, 46%));
        background-color: light-dark(
        hsl(41, 98%, 46%),
        hsl(39, 89%, 45%)
    );
        background-color: var(
            --color-background-warning-solid-action-button-active
        );
    }

.action-button-subtle-warning {
    --csstools-light-dark-toggle--709: var(--csstools-color-scheme--light) hsl(40, 94%, 56%);
    color: hsl(34, 89%, 25%);
    color: var(--csstools-light-dark-toggle--709, hsl(34, 89%, 25%));
    color: light-dark(
        hsl(34, 89%, 25%),
        hsl(40, 94%, 56%)
    );
    color: var(--color-text-warning-subtle-action-button);
    --csstools-light-dark-toggle--710: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.12);
    background-color: rgba(232, 159, 2, 0.18);
    background-color: var(--csstools-light-dark-toggle--710, rgba(232, 159, 2, 0.18));
    background-color: light-dark(
        rgba(232, 159, 2, 0.18),
        rgba(217, 145, 13, 0.12)
    );
    background-color: var(--color-background-warning-subtle-action-button);
    --csstools-light-dark-toggle--711: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.21);
    box-shadow: 0 0 0.5px 0.5px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 0 0.5px 0.5px var(--csstools-light-dark-toggle--711, rgba(0, 0, 0, 0.2)) inset;
    box-shadow: 0 0 0.5px 0.5px light-dark(
        rgba(0, 0, 0, 0.2),
        rgba(255, 255, 255, 0.21)
    ) inset;
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-subtle-warning:hover,.action-button-subtle-warning:focus-visible {
        --csstools-light-dark-toggle--712: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.17);
        background-color: rgba(232, 159, 2, 0.23);
        background-color: var(--csstools-light-dark-toggle--712, rgba(232, 159, 2, 0.23));
        background-color: light-dark(
        rgba(232, 159, 2, 0.23),
        rgba(217, 145, 13, 0.17)
    );
        background-color: var(
            --color-background-warning-subtle-action-button-hover
        );
    }

.action-button-subtle-warning:active {
        --csstools-light-dark-toggle--713: var(--csstools-color-scheme--light) rgba(217, 145, 13, 0.12);
        background-color: rgba(232, 159, 2, 0.28);
        background-color: var(--csstools-light-dark-toggle--713, rgba(232, 159, 2, 0.28));
        background-color: light-dark(
        rgba(232, 159, 2, 0.28),
        rgba(217, 145, 13, 0.12)
    );
        background-color: var(
            --color-background-warning-subtle-action-button-active
        );
    }

.action-button-text-warning {
    --csstools-light-dark-toggle--714: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
    color: hsl(37, 94%, 34%);
    color: var(--csstools-light-dark-toggle--714, hsl(37, 94%, 34%));
    color: light-dark(
        hsl(37, 94%, 34%),
        hsl(41, 98%, 46%)
    );
    color: var(--color-text-warning-text-action-button);
    background-color: transparent;
}

.action-button-text-warning:hover,.action-button-text-warning:focus-visible {
        --csstools-light-dark-toggle--715: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.12);
        background-color: rgba(168, 106, 5, 0.1);
        background-color: var(--csstools-light-dark-toggle--715, rgba(168, 106, 5, 0.1));
        background-color: light-dark(
        rgba(168, 106, 5, 0.1),
        rgba(201, 135, 13, 0.12)
    );
        background-color: var(
            --color-background-warning-text-action-button-hover
        );
    }

.action-button-text-warning:active {
        --csstools-light-dark-toggle--716: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.17);
        background-color: rgba(168, 106, 5, 0.14);
        background-color: var(--csstools-light-dark-toggle--716, rgba(168, 106, 5, 0.14));
        background-color: light-dark(
        rgba(168, 106, 5, 0.14),
        rgba(201, 135, 13, 0.17)
    );
        background-color: var(
            --color-background-warning-text-action-button-active
        );
    }

/* Action buttons -- Danger Intent */
.action-button-solid-danger {
    --csstools-light-dark-toggle--930: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.85);
    color: hsl(0, 0%, 100%);
    color: var(--csstools-light-dark-toggle--930, hsl(0, 0%, 100%));
    color: light-dark(
        hsl(0, 0%, 100%),
        rgba(255, 255, 255, 0.85)
    );
    color: var(--color-text-danger-solid-action-button);
    --csstools-light-dark-toggle--717: var(--csstools-color-scheme--light) hsl(2, 74%, 47%);
    background-color: hsl(4, 75%, 51%);
    background-color: var(--csstools-light-dark-toggle--717, hsl(4, 75%, 51%));
    background-color: light-dark(
        hsl(4, 75%, 51%),
        hsl(2, 74%, 47%)
    );
    background-color: var(--color-background-danger-solid-action-button);
}
.action-button-solid-danger:hover,.action-button-solid-danger:focus-visible {
        --csstools-light-dark-toggle--718: var(--csstools-color-scheme--light) hsl(4, 75%, 53%);
        background-color: hsl(2, 74%, 47%);
        background-color: var(--csstools-light-dark-toggle--718, hsl(2, 74%, 47%));
        background-color: light-dark(
        hsl(2, 74%, 47%),
        hsl(4, 75%, 53%)
    );
        background-color: var(
            --color-background-danger-solid-action-button-hover
        );
    }
.action-button-solid-danger:active {
        --csstools-light-dark-toggle--719: var(--csstools-color-scheme--light) hsl(2, 92%, 33%);
        background-color: hsl(359, 93%, 39%);
        background-color: var(--csstools-light-dark-toggle--719, hsl(359, 93%, 39%));
        background-color: light-dark(
        hsl(359, 93%, 39%),
        hsl(2, 92%, 33%)
    );
        background-color: var(
            --color-background-danger-solid-action-button-active
        );
    }

.action-button-subtle-danger {
    --csstools-light-dark-toggle--720: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    color: hsl(359, 94%, 35%);
    color: var(--csstools-light-dark-toggle--720, hsl(359, 94%, 35%));
    color: light-dark(
        hsl(359, 94%, 35%),
        hsl(7, 100%, 74%)
    );
    color: var(--color-text-danger-subtle-action-button);
    --csstools-light-dark-toggle--721: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.12);
    background-color: rgba(225, 57, 45, 0.13);
    background-color: var(--csstools-light-dark-toggle--721, rgba(225, 57, 45, 0.13));
    background-color: light-dark(
        rgba(225, 57, 45, 0.13),
        rgba(253, 93, 78, 0.12)
    );
    background-color: var(--color-background-danger-subtle-action-button);
    --csstools-light-dark-toggle--722: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.21);
    box-shadow: 0 0 0.5px 0.5px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 0 0.5px 0.5px var(--csstools-light-dark-toggle--722, rgba(0, 0, 0, 0.2)) inset;
    box-shadow: 0 0 0.5px 0.5px light-dark(
        rgba(0, 0, 0, 0.2),
        rgba(255, 255, 255, 0.21)
    ) inset;
    box-shadow: 0 0 0.5px 0.5px var(--color-inner-shadow-action-button) inset;
}

.action-button-subtle-danger:hover,.action-button-subtle-danger:focus-visible {
        --csstools-light-dark-toggle--723: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.17);
        background-color: rgba(225, 57, 45, 0.18);
        background-color: var(--csstools-light-dark-toggle--723, rgba(225, 57, 45, 0.18));
        background-color: light-dark(
        rgba(225, 57, 45, 0.18),
        rgba(253, 93, 78, 0.17)
    );
        background-color: var(
            --color-background-danger-subtle-action-button-hover
        );
    }

.action-button-subtle-danger:active {
        --csstools-light-dark-toggle--724: var(--csstools-color-scheme--light) rgba(253, 93, 78, 0.12);
        background-color: rgba(225, 57, 45, 0.23);
        background-color: var(--csstools-light-dark-toggle--724, rgba(225, 57, 45, 0.23));
        background-color: light-dark(
        rgba(225, 57, 45, 0.23),
        rgba(253, 93, 78, 0.12)
    );
        background-color: var(
            --color-background-danger-subtle-action-button-active
        );
    }

.action-button-text-danger {
    --csstools-light-dark-toggle--725: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
    color: hsl(359, 93%, 39%);
    color: var(--csstools-light-dark-toggle--725, hsl(359, 93%, 39%));
    color: light-dark(
        hsl(359, 93%, 39%),
        hsl(7, 100%, 74%)
    );
    color: var(--color-text-danger-text-action-button);
    background-color: transparent;
}

.action-button-text-danger:hover,.action-button-text-danger:focus-visible {
        --csstools-light-dark-toggle--726: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.12);
        background-color: rgba(192, 7, 10, 0.09);
        background-color: var(--csstools-light-dark-toggle--726, rgba(192, 7, 10, 0.09));
        background-color: light-dark(
        rgba(192, 7, 10, 0.09),
        rgba(243, 78, 63, 0.12)
    );
        background-color: var(
            --color-background-danger-text-action-button-hover
        );
    }

.action-button-text-danger:active {
        --csstools-light-dark-toggle--727: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.17);
        background-color: rgba(192, 7, 10, 0.13);
        background-color: var(--csstools-light-dark-toggle--727, rgba(192, 7, 10, 0.13));
        background-color: light-dark(
        rgba(192, 7, 10, 0.13),
        rgba(243, 78, 63, 0.17)
    );
        background-color: var(
            --color-background-danger-text-action-button-active
        );
    }

.icon-button {
    /* This class should always be used with an icon-button-* class
       defining the color scheme of the button, defined below. */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    font-size: 14px;
    font-size: var(--base-font-size-px);
    background-color: transparent; /* Override button default background color */
    padding: 0.375em;
    padding: var(--icon-button-padding);
    cursor: pointer;
    border: none;
    border-radius: 4px;
    clip-path: inset(-1px);
    transition: 0.05s ease-in;
    transition-property: background-color, clip-path;
}

.icon-button:hover,.icon-button:focus-visible {
        transition: 0.1s ease-out;
        transition-property: background-color, clip-path;
    }

.icon-button:active {
        clip-path: inset(1px round 4px);
    }

.icon-button:focus {
        /* Override common button outline style set in zulip.css and dark_theme.css */
        outline: none;
    }

.icon-button:focus-visible {
        /* Override common button outline style set in zulip.css and dark_theme.css */
        --csstools-light-dark-toggle--728: var(--csstools-color-scheme--light) hsl(0, 0%, 100%) !important;
        outline: 1.5px solid
            hsl(0, 0%, 0%) !important;
        outline: 1.5px solid
            var(--csstools-light-dark-toggle--728, hsl(0, 0%, 0%)) !important;
        outline: 1.5px solid
            light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    ) !important;
        outline: var(--outline-width-button-focus) solid
            var(--color-outline-button-focus) !important;
        outline-offset: 0;
        outline-offset: var(--outline-offset-button-focus);
        clip-path: inset(
            calc(
                    -1 *
                        (
                            1.5px +
                                0
                        )
                )
                round 4px
        );
        clip-path: inset(
            calc(
                    -1 *
                        (
                            var(--outline-width-button-focus) +
                                var(--outline-offset-button-focus)
                        )
                )
                round 4px
        );
    }

.icon-button:disabled {
        cursor: default;
        pointer-events: none;
        opacity: 0.5;
    }

.icon-button-neutral {
    --csstools-light-dark-toggle--729: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
    color: rgba(84, 87, 100, 0.7);
    color: var(--csstools-light-dark-toggle--729, rgba(84, 87, 100, 0.7));
    color: light-dark(
        rgba(84, 87, 100, 0.7),
        rgba(171, 174, 186, 0.7)
    );
    color: var(--color-text-neutral-icon-button);
}

.icon-button-neutral:hover,.icon-button-neutral:focus-visible {
        --csstools-light-dark-toggle--730: var(--csstools-color-scheme--light) hsl(229, 10%, 70%);
        color: hsl(229, 9%, 36%);
        color: var(--csstools-light-dark-toggle--730, hsl(229, 9%, 36%));
        color: light-dark(
        hsl(229, 9%, 36%),
        hsl(229, 10%, 70%)
    );
        color: var(--color-text-neutral-icon-button-hover);
    }

.icon-button-neutral:active {
        --csstools-light-dark-toggle--731: var(--csstools-color-scheme--light) rgba(171, 174, 186, 0.7);
        color: rgba(84, 87, 100, 0.7);
        color: var(--csstools-light-dark-toggle--731, rgba(84, 87, 100, 0.7));
        color: light-dark(
        rgba(84, 87, 100, 0.7),
        rgba(171, 174, 186, 0.7)
    );
        color: var(--color-text-neutral-icon-button-active);
    }

.icon-button-neutral.icon-button-square:hover,.icon-button-neutral.icon-button-square:focus-visible {
            --csstools-light-dark-toggle--732: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.14);
            background-color: rgba(84, 87, 100, 0.07);
            background-color: var(--csstools-light-dark-toggle--732, rgba(84, 87, 100, 0.07));
            background-color: light-dark(
        rgba(84, 87, 100, 0.07),
        rgba(144, 147, 162, 0.14)
    );
            background-color: var(
                --color-background-neutral-icon-button-square-hover
            );
        }

.icon-button-neutral.icon-button-square:active {
            --csstools-light-dark-toggle--733: var(--csstools-color-scheme--light) hsl(229, 10%, 70%);
            color: hsl(229, 9%, 36%);
            color: var(--csstools-light-dark-toggle--733, hsl(229, 9%, 36%));
            color: light-dark(
        hsl(229, 9%, 36%),
        hsl(229, 10%, 70%)
    );
            color: var(--color-text-neutral-icon-button-square-active);
            --csstools-light-dark-toggle--734: var(--csstools-color-scheme--light) rgba(144, 147, 162, 0.18);
            background-color: rgba(84, 87, 100, 0.11);
            background-color: var(--csstools-light-dark-toggle--734, rgba(84, 87, 100, 0.11));
            background-color: light-dark(
        rgba(84, 87, 100, 0.11),
        rgba(144, 147, 162, 0.18)
    );
            background-color: var(
                --color-background-neutral-icon-button-square-active
            );
        }

.icon-button-brand {
    --csstools-light-dark-toggle--735: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.7);
    color: rgba(93, 59, 196, 0.7);
    color: var(--csstools-light-dark-toggle--735, rgba(93, 59, 196, 0.7));
    color: light-dark(
        rgba(93, 59, 196, 0.7),
        rgba(160, 150, 253, 0.7)
    );
    color: var(--color-text-brand-icon-button);
}

.icon-button-brand:hover,.icon-button-brand:focus-visible {
        --csstools-light-dark-toggle--736: var(--csstools-color-scheme--light) hsl(246, 96%, 79%);
        color: hsl(255, 54%, 50%);
        color: var(--csstools-light-dark-toggle--736, hsl(255, 54%, 50%));
        color: light-dark(
        hsl(255, 54%, 50%),
        hsl(246, 96%, 79%)
    );
        color: var(--color-text-brand-icon-button-hover);
    }

.icon-button-brand:active {
        --csstools-light-dark-toggle--737: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.7);
        color: rgba(93, 59, 196, 0.7);
        color: var(--csstools-light-dark-toggle--737, rgba(93, 59, 196, 0.7));
        color: light-dark(
        rgba(93, 59, 196, 0.7),
        rgba(160, 150, 253, 0.7)
    );
        color: var(--color-text-brand-icon-button-active);
    }

.icon-button-brand.icon-button-square:hover,.icon-button-brand.icon-button-square:focus-visible {
            --csstools-light-dark-toggle--738: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.14);
            background-color: rgba(45, 0, 112, 0.05);
            background-color: var(--csstools-light-dark-toggle--738, rgba(45, 0, 112, 0.05));
            background-color: light-dark(
        rgba(45, 0, 112, 0.05),
        rgba(138, 112, 255, 0.14)
    );
            background-color: var(
                --color-background-brand-icon-button-square-hover
            );
        }

.icon-button-brand.icon-button-square:active {
            --csstools-light-dark-toggle--739: var(--csstools-color-scheme--light) hsl(246, 96%, 79%);
            color: hsl(255, 54%, 50%);
            color: var(--csstools-light-dark-toggle--739, hsl(255, 54%, 50%));
            color: light-dark(
        hsl(255, 54%, 50%),
        hsl(246, 96%, 79%)
    );
            color: var(--color-text-brand-icon-button-square-active);
            --csstools-light-dark-toggle--740: var(--csstools-color-scheme--light) rgba(138, 112, 255, 0.18);
            background-color: rgba(45, 0, 112, 0.1);
            background-color: var(--csstools-light-dark-toggle--740, rgba(45, 0, 112, 0.1));
            background-color: light-dark(
        rgba(45, 0, 112, 0.1),
        rgba(138, 112, 255, 0.18)
    );
            background-color: var(
                --color-background-brand-icon-button-square-active
            );
        }

.icon-button-info {
    --csstools-light-dark-toggle--741: var(--csstools-color-scheme--light) rgba(129, 167, 253, 0.7);
    color: rgba(35, 71, 199, 0.7);
    color: var(--csstools-light-dark-toggle--741, rgba(35, 71, 199, 0.7));
    color: light-dark(
        rgba(35, 71, 199, 0.7),
        rgba(129, 167, 253, 0.7)
    );
    color: var(--color-text-info-icon-button);
}

.icon-button-info:hover,.icon-button-info:focus-visible {
        --csstools-light-dark-toggle--742: var(--csstools-color-scheme--light) hsl(222, 97%, 75%);
        color: hsl(227, 70%, 46%);
        color: var(--csstools-light-dark-toggle--742, hsl(227, 70%, 46%));
        color: light-dark(
        hsl(227, 70%, 46%),
        hsl(222, 97%, 75%)
    );
        color: var(--color-text-info-icon-button-hover);
    }

.icon-button-info:active {
        --csstools-light-dark-toggle--743: var(--csstools-color-scheme--light) rgba(129, 167, 253, 0.7);
        color: rgba(35, 71, 199, 0.7);
        color: var(--csstools-light-dark-toggle--743, rgba(35, 71, 199, 0.7));
        color: light-dark(
        rgba(35, 71, 199, 0.7),
        rgba(129, 167, 253, 0.7)
    );
        color: var(--color-text-info-icon-button-active);
    }

.icon-button-info.icon-button-square:hover,.icon-button-info.icon-button-square:focus-visible {
            --csstools-light-dark-toggle--744: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.12);
            background-color: rgba(5, 3, 124, 0.05);
            background-color: var(--csstools-light-dark-toggle--744, rgba(5, 3, 124, 0.05));
            background-color: light-dark(
        rgba(5, 3, 124, 0.05),
        rgba(78, 125, 253, 0.12)
    );
            background-color: var(
                --color-background-info-icon-button-square-hover
            );
        }

.icon-button-info.icon-button-square:active {
            --csstools-light-dark-toggle--745: var(--csstools-color-scheme--light) hsl(222, 97%, 75%);
            color: hsl(227, 70%, 46%);
            color: var(--csstools-light-dark-toggle--745, hsl(227, 70%, 46%));
            color: light-dark(
        hsl(227, 70%, 46%),
        hsl(222, 97%, 75%)
    );
            color: var(--color-text-info-icon-button-square-active);
            --csstools-light-dark-toggle--746: var(--csstools-color-scheme--light) rgba(78, 125, 253, 0.17);
            background-color: rgba(5, 3, 124, 0.09);
            background-color: var(--csstools-light-dark-toggle--746, rgba(5, 3, 124, 0.09));
            background-color: light-dark(
        rgba(5, 3, 124, 0.09),
        rgba(78, 125, 253, 0.17)
    );
            background-color: var(
                --color-background-info-icon-button-square-active
            );
        }

.icon-button-success {
    --csstools-light-dark-toggle--747: var(--csstools-color-scheme--light) rgba(86, 194, 115, 0.7);
    color: rgba(7, 131, 61, 0.7);
    color: var(--csstools-light-dark-toggle--747, rgba(7, 131, 61, 0.7));
    color: light-dark(
        rgba(7, 131, 61, 0.7),
        rgba(86, 194, 115, 0.7)
    );
    color: var(--color-text-success-icon-button);
}

.icon-button-success:hover,.icon-button-success:focus-visible {
        --csstools-light-dark-toggle--748: var(--csstools-color-scheme--light) hsl(136, 47%, 55%);
        color: hsl(146, 90%, 27%);
        color: var(--csstools-light-dark-toggle--748, hsl(146, 90%, 27%));
        color: light-dark(
        hsl(146, 90%, 27%),
        hsl(136, 47%, 55%)
    );
        color: var(--color-text-success-icon-button-hover);
    }

.icon-button-success:active {
        --csstools-light-dark-toggle--749: var(--csstools-color-scheme--light) rgba(86, 194, 115, 0.7);
        color: rgba(7, 131, 61, 0.7);
        color: var(--csstools-light-dark-toggle--749, rgba(7, 131, 61, 0.7));
        color: light-dark(
        rgba(7, 131, 61, 0.7),
        rgba(86, 194, 115, 0.7)
    );
        color: var(--color-text-success-icon-button-active);
    }

.icon-button-success.icon-button-square:hover,.icon-button-success.icon-button-square:focus-visible {
            --csstools-light-dark-toggle--750: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.12);
            background-color: rgba(9, 103, 47, 0.08);
            background-color: var(--csstools-light-dark-toggle--750, rgba(9, 103, 47, 0.08));
            background-color: light-dark(
        rgba(9, 103, 47, 0.08),
        rgba(47, 157, 82, 0.12)
    );
            background-color: var(
                --color-background-success-icon-button-square-hover
            );
        }

.icon-button-success.icon-button-square:active {
            --csstools-light-dark-toggle--751: var(--csstools-color-scheme--light) hsl(136, 47%, 55%);
            color: hsl(146, 90%, 27%);
            color: var(--csstools-light-dark-toggle--751, hsl(146, 90%, 27%));
            color: light-dark(
        hsl(146, 90%, 27%),
        hsl(136, 47%, 55%)
    );
            color: var(--color-text-success-icon-button-square-active);
            --csstools-light-dark-toggle--752: var(--csstools-color-scheme--light) rgba(47, 157, 82, 0.17);
            background-color: rgba(9, 103, 47, 0.12);
            background-color: var(--csstools-light-dark-toggle--752, rgba(9, 103, 47, 0.12));
            background-color: light-dark(
        rgba(9, 103, 47, 0.12),
        rgba(47, 157, 82, 0.17)
    );
            background-color: var(
                --color-background-success-icon-button-square-active
            );
        }

.icon-button-warning {
    --csstools-light-dark-toggle--753: var(--csstools-color-scheme--light) rgba(232, 159, 2, 0.7);
    color: rgba(168, 106, 5, 0.7);
    color: var(--csstools-light-dark-toggle--753, rgba(168, 106, 5, 0.7));
    color: light-dark(
        rgba(168, 106, 5, 0.7),
        rgba(232, 159, 2, 0.7)
    );
    color: var(--color-text-warning-icon-button);
}

.icon-button-warning:hover,.icon-button-warning:focus-visible {
        --csstools-light-dark-toggle--754: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
        color: hsl(37, 94%, 34%);
        color: var(--csstools-light-dark-toggle--754, hsl(37, 94%, 34%));
        color: light-dark(
        hsl(37, 94%, 34%),
        hsl(41, 98%, 46%)
    );
        color: var(--color-text-warning-icon-button-hover);
    }

.icon-button-warning:active {
        --csstools-light-dark-toggle--755: var(--csstools-color-scheme--light) rgba(232, 159, 2, 0.7);
        color: rgba(168, 106, 5, 0.7);
        color: var(--csstools-light-dark-toggle--755, rgba(168, 106, 5, 0.7));
        color: light-dark(
        rgba(168, 106, 5, 0.7),
        rgba(232, 159, 2, 0.7)
    );
        color: var(--color-text-warning-icon-button-active);
    }

.icon-button-warning.icon-button-square:hover,.icon-button-warning.icon-button-square:focus-visible {
            --csstools-light-dark-toggle--756: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.12);
            background-color: rgba(168, 106, 5, 0.1);
            background-color: var(--csstools-light-dark-toggle--756, rgba(168, 106, 5, 0.1));
            background-color: light-dark(
        rgba(168, 106, 5, 0.1),
        rgba(201, 135, 13, 0.12)
    );
            background-color: var(
                --color-background-warning-icon-button-square-hover
            );
        }

.icon-button-warning.icon-button-square:active {
            --csstools-light-dark-toggle--757: var(--csstools-color-scheme--light) hsl(41, 98%, 46%);
            color: hsl(37, 94%, 34%);
            color: var(--csstools-light-dark-toggle--757, hsl(37, 94%, 34%));
            color: light-dark(
        hsl(37, 94%, 34%),
        hsl(41, 98%, 46%)
    );
            color: var(--color-text-warning-icon-button-square-active);
            --csstools-light-dark-toggle--758: var(--csstools-color-scheme--light) rgba(201, 135, 13, 0.17);
            background-color: rgba(168, 106, 5, 0.14);
            background-color: var(--csstools-light-dark-toggle--758, rgba(168, 106, 5, 0.14));
            background-color: light-dark(
        rgba(168, 106, 5, 0.14),
        rgba(201, 135, 13, 0.17)
    );
            background-color: var(
                --color-background-warning-icon-button-square-active
            );
        }

.icon-button-danger {
    --csstools-light-dark-toggle--759: var(--csstools-color-scheme--light) rgba(255, 138, 122, 0.7);
    color: rgba(192, 7, 10, 0.7);
    color: var(--csstools-light-dark-toggle--759, rgba(192, 7, 10, 0.7));
    color: light-dark(
        rgba(192, 7, 10, 0.7),
        rgba(255, 138, 122, 0.7)
    );
    color: var(--color-text-danger-icon-button);
}

.icon-button-danger:hover,.icon-button-danger:focus-visible {
        --csstools-light-dark-toggle--760: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
        color: hsl(359, 93%, 39%);
        color: var(--csstools-light-dark-toggle--760, hsl(359, 93%, 39%));
        color: light-dark(
        hsl(359, 93%, 39%),
        hsl(7, 100%, 74%)
    );
        color: var(--color-text-danger-icon-button-hover);
    }

.icon-button-danger:active {
        --csstools-light-dark-toggle--761: var(--csstools-color-scheme--light) rgba(255, 138, 122, 0.7);
        color: rgba(192, 7, 10, 0.7);
        color: var(--csstools-light-dark-toggle--761, rgba(192, 7, 10, 0.7));
        color: light-dark(
        rgba(192, 7, 10, 0.7),
        rgba(255, 138, 122, 0.7)
    );
        color: var(--color-text-danger-icon-button-active);
    }

.icon-button-danger.icon-button-square:hover,.icon-button-danger.icon-button-square:focus-visible {
            --csstools-light-dark-toggle--762: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.12);
            background-color: rgba(192, 7, 10, 0.09);
            background-color: var(--csstools-light-dark-toggle--762, rgba(192, 7, 10, 0.09));
            background-color: light-dark(
        rgba(192, 7, 10, 0.09),
        rgba(243, 78, 63, 0.12)
    );
            background-color: var(
                --color-background-danger-icon-button-square-hover
            );
        }

.icon-button-danger.icon-button-square:active {
            --csstools-light-dark-toggle--763: var(--csstools-color-scheme--light) hsl(7, 100%, 74%);
            color: hsl(359, 93%, 39%);
            color: var(--csstools-light-dark-toggle--763, hsl(359, 93%, 39%));
            color: light-dark(
        hsl(359, 93%, 39%),
        hsl(7, 100%, 74%)
    );
            color: var(--color-text-danger-icon-button-square-active);
            --csstools-light-dark-toggle--764: var(--csstools-color-scheme--light) rgba(243, 78, 63, 0.17);
            background-color: rgba(192, 7, 10, 0.13);
            background-color: var(--csstools-light-dark-toggle--764, rgba(192, 7, 10, 0.13));
            background-color: light-dark(
        rgba(192, 7, 10, 0.13),
        rgba(243, 78, 63, 0.17)
    );
            background-color: var(
                --color-background-danger-icon-button-square-active
            );
        }

.button-loading-indicator {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button-loading-indicator .loading_indicator_spinner {
        /* Override standard values defined
           in web/styles/app_components.css */
        height: 100%;
        width: auto;
        width: initial;
        aspect-ratio: 1;
    }

.button-loading-indicator .loading_indicator_spinner path {
            /* Set the loading indicator color
               to the font color of the button. */
            fill: currentcolor;
        }

.button-hide-loading-indicator-on-hover:hover .button-loading-indicator {
        visibility: hidden;
    }

.button-hide-loading-indicator-on-hover:hover .action-button-label,.button-hide-loading-indicator-on-hover:hover .zulip-icon {
        visibility: visible !important;
    }

/* ---- user_circles.css ---- */
.user-circle-active {
    --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) #4cdc75;
    color: #43a35e;
    color: var(--csstools-light-dark-toggle--20, #43a35e);
    color: light-dark(#43a35e, #4cdc75);
    color: var(--color-user-circle-active);
}

.user-circle-idle {
    --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) #ae640a;
    --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) #ae640a;
    background: linear-gradient(
        to right,
        #f5b266 5%,
        rgba(245, 178, 102, 0.789)
            25%,
        transparent 100%
    );
    background: linear-gradient(
        to right,
        var(--csstools-light-dark-toggle--21, #f5b266) 5%,
        var(--csstools-light-dark-toggle--22, rgba(245, 178, 102, 0.789))
            25%,
        transparent 100%
    );
    background: linear-gradient(
        to right,
        light-dark(#f5b266, #ae640a) 5%,
        light-dark(
                color-mix(
                    in srgb,
                    light-dark(#f5b266, #ae640a) 78.9%,
                    transparent
                ),
                light-dark(#f5b266, #ae640a)
            )
            25%,
        transparent 100%
    );
    background: var(--gradient-user-circle-idle);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.with_avatar .user-circle-idle {
    --csstools-light-dark-toggle--576: var(--csstools-color-scheme--light) #ae640a;
    --csstools-light-dark-toggle--577: var(--csstools-color-scheme--light) #ae640a;
    --csstools-light-dark-toggle--578: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background: linear-gradient(
        to right,
        #f5b266 5%,
        rgb(244, 191, 131)
            25%,
        hsl(0, 0%, 94%) 100%
    );
    background: linear-gradient(
        to right,
        var(--csstools-light-dark-toggle--576, #f5b266) 5%,
        var(--csstools-light-dark-toggle--577, rgb(244, 191, 131))
            25%,
        var(--csstools-light-dark-toggle--578, hsl(0, 0%, 94%)) 100%
    );
    background: linear-gradient(
        to right,
        light-dark(#f5b266, #ae640a) 5%,
        light-dark(
                color-mix(
                    in srgb,
                    light-dark(#f5b266, #ae640a) 78.9%,
                    light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%))
                ),
                light-dark(#f5b266, #ae640a)
            )
            25%,
        light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%)) 100%
    );
    background: var(--gradient-user-circle-idle-avatar);
}

.user-circle-offline {
    --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) #545764;
    color: #bcc0cf;
    color: var(--csstools-light-dark-toggle--23, #bcc0cf);
    color: light-dark(#bcc0cf, #545764);
    color: var(--color-user-circle-offline);
}

.user-circle-deactivated {
    color: hsl(0, 0%, 50%);
    color: var(--color-user-circle-deactivated);
}

/* ---- left_sidebar.css ---- */
.left-sidebar-title {
    --csstools-light-dark-toggle--579: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
    color: hsl(216, 65%, 20%);
    color: var(--csstools-light-dark-toggle--579, hsl(216, 65%, 20%));
    color: light-dark(
        hsl(216, 65%, 20%),
        hsl(216, 50%, 75%)
    );
    color: var(--color-text-sidebar-heading);
    opacity: 0.7;
    opacity: var(--opacity-sidebar-heading);
    transition: opacity 140ms linear;
    font-size: inherit;
    font-weight: 600;
    font-weight: var(--font-weight-sidebar-heading);
    letter-spacing: 0.0469em;
    letter-spacing: var(--letter-spacing-sidebar-heading);
    line-height: 20px;
    /* Override heading margin from Bootstrap. */
    margin: 0;
    /* Show an ellipsis on a heading when
       it won't sit adjacent other icons
       or controls in the row. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#left-sidebar .input-element-wrapper:not(.left-sidebar-search-section),
#user-profile-modal .stream-list-container .input-element-wrapper,
#user-profile-modal .group-list-container .input-element-wrapper {
    /* We normalize this based on Firefox's 31px-tall input,
       raising Chrome's (28px) and Safari's (30px) to all
       match, so that `top:` and other offset values are
       identical relative to input elements. This value
       is taken up by the grid-template definition in
       inputs.css. We don't do this on the sidebar search, though,
       so that it matches the height of the filter at the top of the
       right sidebar. Normalizing the height isn't essential here,
       as there are no sticky headers offset from the filter input. */
    --input-element-row-height: 1.9375em;
}

#left-sidebar .input-element-wrapper:not(.left-sidebar-search-section) .input-element,#user-profile-modal .stream-list-container .input-element-wrapper .input-element,#user-profile-modal .group-list-container .input-element-wrapper .input-element {
        /* And to keep the visual space of the input identical,
           we stretch to the height of the grid row above. */
        align-self: stretch;
    }

#left-sidebar .unread_count {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.sidebar-topic-check,
.topic-markers-and-unreads {
    cursor: pointer;
}

.visibility-policy-icon {
    display: flex;
    align-items: center;
}

.visibility-policy-icon:focus {
        outline: 0;
    }

.visibility-policy-icon:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        outline-offset: 1px;
    }

#left-sidebar-navigation-list .filter-icon i {
    --csstools-light-dark-toggle--580: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--580, hsl(240, 30%, 40%));
    color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
    color: var(--color-left-sidebar-navigation-icon);
}

#stream_filters,
#left-sidebar-navigation-list {
    margin-right: 12px;
    margin-right: var(--left-sidebar-right-margin);
}

.add-stream-icon-container {
    grid-area: add-channel;
    display: grid;
    margin: 2px;
    border-radius: 3px;
    --csstools-light-dark-toggle--765: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--765, hsl(240, 30%, 40%));
    color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
    color: var(--color-sidebar-action);

    /* The section-header variant is an <a>, so without this rule the
       generic `a:focus` rule in zulip.css would shift the icon to the
       interactive link color when focused. Re-state the default color
       here so it stays consistent with the <span>/<div> sibling
       buttons. */
}

.add-stream-icon-container:focus,.add-stream-icon-container:focus-visible {
        --csstools-light-dark-toggle--766: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--766, hsl(240, 30%, 40%));
        color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
        color: var(--color-sidebar-action);
    }

.add-stream-icon-container:hover {
        --csstools-light-dark-toggle--767: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--767, hsl(240, 100%, 15%));
        color: light-dark(
        hsl(240, 100%, 15%),
        hsl(240, 100%, 90%)
    );
        color: var(--color-sidebar-action-hover);
        --csstools-light-dark-toggle--768: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
        background-color: hsl(240, 100%, 93%);
        background-color: var(--csstools-light-dark-toggle--768, hsl(240, 100%, 93%));
        background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
        background-color: var(--color-background-sidebar-action-hover);
        cursor: pointer;
    }

.add-stream-icon-container:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
        /* `!important` overrides the `.dark-theme:root
           a:not(:active):focus` rule in dark_theme.css, which would
           otherwise set this anchor's focus outline to grey. */
        outline-color: hsl(215, 47%, 50%) !important;
        outline-color: var(--color-outline-focus) !important;
    }

.add-stream-icon-container .add_stream_icon {
        /* We display as flex to center the icon while
           keeping the entire highlighted area clickable. */
        display: flex;
        align-items: center;
        justify-items: center;
        place-items: center center;
    }

.add-stream-icon-container .add_stream_icon::before {
            /* To horizontally center the icon within the
               flex, though, we need this margin adjustment. */
            margin: 0 auto;
        }

.masked_unread_count {
    /* 8px at 16px/14em */
    font-size: 0.5em;
    display: none;
    /* Masked unreads display as flex when revealed. */
    align-items: center;
    justify-content: center;
    color: hsla(240, 10%, 50%, 0.35);
    color: var(--color-unread-counter-muted);
    width: 1.875em;
    width: var(--left-sidebar-single-digit-unread-width);
}

#left-sidebar-navigation-list .selected-home-view.hide-unread-messages-count .masked_unread_count {
            display: flex;
            grid-area: markers-and-unreads;
            /* Adding margin-right aligns the .masked_unread_count  */
            /* with the rest of the masked unread counts. */
            margin-right: 6.5px;
            margin-right: var(--left-sidebar-unread-offset);
            justify-self: end;
            visibility: visible;
        }

#left-sidebar-navigation-list .selected-home-view.hide-unread-messages-count .unread_count {
            visibility: hidden;
        }

/* When message summary count is 0, we dont want to show unread_count or masked_unread_count. */

#left-sidebar-navigation-list .selected-home-view.hide-unread-messages-count .unread_count.hide + .masked_unread_count {
            visibility: hidden;
        }

/* Suppress the unread-count dot and show
           the unread count on hover. */

#left-sidebar-navigation-list .selected-home-view.hide-unread-messages-count:hover .masked_unread_count {
                visibility: hidden;
            }

#left-sidebar-navigation-list .selected-home-view.hide-unread-messages-count:hover .unread_count:not(:empty) {
                visibility: visible;
            }

#stream_filters {
    overflow: visible;
    margin-bottom: 5px;
    padding: 0;
    font-weight: normal;
}

#stream_filters .topic_search_section {
        margin: 3px 0;
    }

#stream_filters li .sidebar-topic-name:hover {
            -webkit-text-decoration: none;
            text-decoration: none;
        }

#stream_filters li ul {
            margin-left: 0;
        }

#stream_filters li ul.topic-list li {
                padding: 0;
            }

#stream_filters .stream-with-count.hide_unread_counts .masked_unread_count,#stream_filters .stream-list-subsection-header.hide_unread_counts .masked_unread_count,#stream_filters .show-inactive-or-muted-channels.hide_unread_counts .masked_unread_count {
            display: flex;
        }

#stream_filters .stream-with-count.hide_unread_counts .unread_count,#stream_filters .stream-list-subsection-header.hide_unread_counts .unread_count,#stream_filters .show-inactive-or-muted-channels.hide_unread_counts .unread_count {
            display: none;
        }

/* When count is 0, we dont want to show unread_count or masked_unread_count. */

#stream_filters .stream-with-count.hide_unread_counts .unread_count.hide + .masked_unread_count,#stream_filters .stream-list-subsection-header.hide_unread_counts .unread_count.hide + .masked_unread_count,#stream_filters .show-inactive-or-muted-channels.hide_unread_counts .unread_count.hide + .masked_unread_count {
            display: none;
        }

#stream_filters .stream-with-count.hide_unread_counts:hover .masked_unread_count,#stream_filters .stream-list-subsection-header.hide_unread_counts:hover .masked_unread_count,#stream_filters .show-inactive-or-muted-channels.hide_unread_counts:hover .masked_unread_count {
                display: none;
            }

#stream_filters .stream-with-count.hide_unread_counts:hover .unread_count:not(.hide),#stream_filters .stream-list-subsection-header.hide_unread_counts:hover .unread_count:not(.hide),#stream_filters .show-inactive-or-muted-channels.hide_unread_counts:hover .unread_count:not(.hide) {
                display: inline;
            }

#stream_filters .narrow-filter > .bottom_left_row:hover > .stream-with-count.hide_unread_counts .masked_unread_count {
            display: none;
        }

#stream_filters .narrow-filter > .bottom_left_row:hover > .stream-with-count.hide_unread_counts .unread_count {
            display: inline;
        }

#stream_filters .stream-expanded .channel-new-topic-button,#stream_filters .stream-expanded .channel-search-topics-button {
            display: flex;
        }

#stream_filters .stream-expanded .subscription_block .sidebar-menu-icon {
            display: flex;
            --csstools-light-dark-toggle--931: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
            color: hsl(240, 30%, 40%);
            color: var(--csstools-light-dark-toggle--931, hsl(240, 30%, 40%));
            color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
            color: var(--color-vdots-visible);
        }

#stream_filters .stream-expanded .stream-with-count.hide_unread_counts .masked_unread_count {
                display: none;
            }

#stream_filters .stream-expanded .stream-with-count.hide_unread_counts .unread_count {
                display: inline;
            }

#stream_filters .toggle_stream_mute {
        margin-right: 3px;
        opacity: 0.5;
    }

#stream_filters .toggle_stream_mute:hover {
            opacity: 1;
        }

.left-sidebar-navigation-icon-container:hover,.left-sidebar-navigation-label-container:hover {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.direct-message-section-bottom-divider-container {
    display: block;
    margin-right: 12px;
    margin-right: var(--left-sidebar-right-margin);
    padding: 0.3125em 0;
    padding: var(--left-sidebar-direct-messages-bottom-divider-padding) 0;
    position: sticky;
    top: 1.7142em;
    top: var(--line-height-sidebar-row-prominent);
    --csstools-light-dark-toggle--581: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background: hsl(0, 0%, 94%);
    background: var(--csstools-light-dark-toggle--581, hsl(0, 0%, 94%));
    background: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background: var(--color-background);
    z-index: 3;
}

.direct-message-section-bottom-divider {
    opacity: 1 !important; /* override .dark-theme:root hr */
    --csstools-light-dark-toggle--582: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.15);
    border-color: hsla(0, 0%, 0%, 0.15);
    border-color: var(--csstools-light-dark-toggle--582, hsla(0, 0%, 0%, 0.15));
    border-color: light-dark(
        hsla(0, 0%, 0%, 0.15),
        hsla(0, 0%, 100%, 0.15)
    );
    border-color: var(--color-left-sidebar-direct-messages-bottom-divider);
    border-width: 0.5px;
    margin: 0;
}

#left-sidebar-modal-content #direct-messages-modal,
#left-sidebar-modal-content #more-topics-modal {
    display: grid;
    grid-template:
        "section-header" minmax(0, max-content)
        "conversation-list" minmax(0, 1fr) / minmax(0, 1fr);
    max-height: 100%;
}

#left-sidebar-modal-content #direct-messages-modal #direct-messages-modal-section-header,#left-sidebar-modal-content #direct-messages-modal .dm-list {
        margin-right: 12px;
        margin-right: var(--left-sidebar-right-margin);
    }

#left-sidebar-modal-content #direct-messages-modal .dm-list {
        margin-bottom: calc(
        (calc(20 / 14) * 1em) + 0.3571em
    );
        margin-bottom: var(--left-sidebar-bottom-scrolling-buffer);
    }

#left-sidebar-modal-content #direct-messages-modal.no-display {
        display: none;
    }

#direct-messages-modal-section-header,
#direct-messages-section-header {
    grid-template-columns:
        0 20px 0 minmax(0, 1fr)
        minmax(0, max-content) minmax(0, max-content) 1.625em
        0;
    grid-template-columns:
        0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 1fr)
        minmax(0, max-content) minmax(0, max-content) var(
            --left-sidebar-vdots-width
        )
        0;
    cursor: pointer;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 3;
    transition: box-shadow 150ms ease-out;

    /* The active direct messages section has a different background color */
}

#direct-messages-modal-section-header:not(.active-direct-messages-section),#direct-messages-section-header:not(.active-direct-messages-section) {
        --csstools-light-dark-toggle--932: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background-color: hsl(0, 0%, 94%);
        background-color: var(--csstools-light-dark-toggle--932, hsl(0, 0%, 94%));
        background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background-color: var(--color-background);
    }

#direct-messages-modal-section-header.sidebar-header-drop-shadow,#direct-messages-section-header.sidebar-header-drop-shadow {
        box-shadow: 0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
        box-shadow: var(--box-shadow-sidebar-sticky-header-drop);
    }

/* Combine hover border with drop shadow since CSS box-shadow doesn't stack. */

#direct-messages-modal-section-header.sidebar-header-drop-shadow:not(.zoom-in):hover,#direct-messages-section-header.sidebar-header-drop-shadow:not(.zoom-in):hover {
        --csstools-light-dark-toggle--933:
            var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow:
            inset 0 0 0 1px hsla(0, 0%, 0%, 0.3),
            0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
        box-shadow:
            inset 0 0 0 1px var(--csstools-light-dark-toggle--933, hsla(0, 0%, 0%, 0.3)),
            0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
        box-shadow:
            inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    ),
            0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
        box-shadow:
            inset 0 0 0 1px var(--color-shadow-sidebar-row-hover),
            var(--box-shadow-sidebar-sticky-header-drop);
    }

#direct-messages-modal-section-header #toggle-direct-messages-section-icon,#direct-messages-section-header #toggle-direct-messages-section-icon {
        grid-area: starting-anchor-element;
        /* Horizontally center the icon in its allotted grid area. */
        justify-self: center;
    }

#direct-messages-modal-section-header .left-sidebar-title,#direct-messages-section-header .left-sidebar-title {
        grid-area: row-content;
    }

#direct-messages-modal-section-header .heading-markers-and-unreads,#direct-messages-section-header .heading-markers-and-unreads {
        grid-area: markers-and-unreads;
        display: flex;
        gap: 5px;
        align-items: center;
        /* Extra margin for unreads. */
        margin-right: 6.5px;
        margin-right: var(--left-sidebar-unread-offset);
    }

#direct-messages-modal-section-header .heading-markers-and-unreads:has(.unread_count:empty) {
            margin-right: 0;
        }

#direct-messages-section-header .heading-markers-and-unreads:has(.unread_count:empty) {
            margin-right: 0;
        }

#direct-messages-modal-section-header .compose-new-direct-message,#direct-messages-section-header .compose-new-direct-message,#direct-messages-modal-section-header .show-all-direct-messages,#direct-messages-section-header .show-all-direct-messages {
        --csstools-light-dark-toggle--934: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--934, hsl(240, 30%, 40%));
        color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
        color: var(--color-sidebar-action);
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-text-decoration: none;
        text-decoration: none;
        margin: 2px 0;
        border-radius: 3px;
        grid-row: 1 / 1;
    }

#direct-messages-modal-section-header .compose-new-direct-message:hover,#direct-messages-section-header .compose-new-direct-message:hover,#direct-messages-modal-section-header .show-all-direct-messages:hover,#direct-messages-section-header .show-all-direct-messages:hover {
            --csstools-light-dark-toggle--935: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
            color: hsl(240, 100%, 15%);
            color: var(--csstools-light-dark-toggle--935, hsl(240, 100%, 15%));
            color: light-dark(
        hsl(240, 100%, 15%),
        hsl(240, 100%, 90%)
    );
            color: var(--color-sidebar-action-hover);
            --csstools-light-dark-toggle--936: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
            background-color: hsl(240, 100%, 93%);
            background-color: var(--csstools-light-dark-toggle--936, hsl(240, 100%, 93%));
            background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
            background-color: var(--color-background-sidebar-action-hover);
        }

#direct-messages-section-header {
    display: grid;
    align-items: center;
    /* This extends the general pattern of left sidebar rows, but includes a
       second grid row for placing filter boxes. */
    grid-template-areas:
        "starting-offset   starting-anchor-element  icon-content-gap  row-content       controls          markers-and-unreads  ending-anchor-element  ending-offset"
        "filter-container  filter-container         filter-container  filter-container  filter-container  filter-container     filter-container       filter-container";
    grid-template-rows: 1.7142em minmax(
            0,
            max-content
        );
    grid-template-rows: var(--line-height-sidebar-row-prominent) minmax(
            0,
            max-content
        );
}

#direct-messages-section-header:hover,#direct-messages-section-header.highlighted_row {
        border-radius: 4px;
    }

#direct-messages-section-header:hover {
        --csstools-light-dark-toggle--937: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--937, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
        --csstools-light-dark-toggle--769: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
        box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--769, hsla(0, 0%, 0%, 0.3));
        box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
    }

#direct-messages-section-header:hover .left-sidebar-title,#direct-messages-section-header:hover .sidebar-heading-icon {
            opacity: 0.9;
            opacity: var(--opacity-sidebar-heading-hover);
        }

#direct-messages-section-header .compose-new-direct-message,#direct-messages-section-header .show-all-direct-messages {
        display: none;
    }

@media (hover: none) {

#direct-messages-section-header .compose-new-direct-message,#direct-messages-section-header .show-all-direct-messages {
            display: flex;
    }
        }

#direct-messages-section-header.hover-over-dm-section .compose-new-direct-message,#direct-messages-section-header:hover .compose-new-direct-message,#direct-messages-section-header.hover-over-dm-section .show-all-direct-messages,#direct-messages-section-header:hover .show-all-direct-messages {
            display: flex;
        }

#direct-messages-modal-section-header {
    display: grid;
    align-items: center;
    /* This is a simplified version of left sidebar rows, and includes a
       second grid row for placing filter boxes. */
    grid-template:
        "starting-offset   row-content       controls          markers-and-unreads ending-offset" 1.7142em
        "filter-container  filter-container  filter-container  filter-container    filter-container"
        minmax(0, max-content)
        / 0.6em minmax(0, 1fr) minmax(0, max-content) minmax(0, max-content)
        1.625em;
    grid-template:
        "starting-offset   row-content       controls          markers-and-unreads ending-offset" var(
            --line-height-sidebar-row-prominent
        )
        "filter-container  filter-container  filter-container  filter-container    filter-container"
        minmax(0, max-content)
        / 0.6em minmax(0, 1fr) minmax(0, max-content) minmax(0, max-content)
        var(--left-sidebar-vdots-width);
}

.spectator-view #left-sidebar-search {
    grid-template-columns: minmax(0, 1fr);
}

#left-sidebar-search {
    display: grid;
    grid-template-areas: "filter-container add-channel channel-folders-option";
    grid-template-columns:
        minmax(0, 1fr) calc(1.7142em - 2px)
        auto;
    grid-template-columns:
        minmax(0, 1fr) var(--left-sidebar-header-icon-width)
        auto;
    position: sticky;
    top: 0;
    --csstools-light-dark-toggle--770: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background: hsl(0, 0%, 94%);
    background: var(--csstools-light-dark-toggle--770, hsl(0, 0%, 94%));
    background: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background: var(--color-background);
    /* Must be padding not margin so that the sticky headers don't show behind it */
    padding: 0 12px
        3px 5px;
    padding: 0 var(--left-sidebar-right-margin)
        var(--sidebar-filter-bottom-spacing) 5px;
}

#left-sidebar-search.no-display {
        display: none;
    }

#left-sidebar-search .channel-folders-sidebar-menu-icon {
        grid-area: channel-folders-option;
        display: grid;
        /* width excluding left & right margin */
        width: calc(1.625em - 3px);
        width: calc(var(--left-sidebar-vdots-width) - 3px);
        cursor: pointer;
        align-items: center;
        justify-items: center;
        place-items: center center;
        border-radius: 3px;
        margin: 2px 2px 2px 1px;
        --csstools-light-dark-toggle--771: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--771, hsl(240, 30%, 40%));
        color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
        color: var(--color-vdots-visible);
    }

#left-sidebar-search .channel-folders-sidebar-menu-icon i.zulip-icon {
            font-size: 1.0625em;
        }

#left-sidebar-search .channel-folders-sidebar-menu-icon:hover {
            --csstools-light-dark-toggle--938: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
            color: hsl(240, 100%, 15%);
            color: var(--csstools-light-dark-toggle--938, hsl(240, 100%, 15%));
            color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
            color: var(--color-vdots-hover);
            --csstools-light-dark-toggle--939: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
            background-color: hsl(240, 100%, 93%);
            background-color: var(--csstools-light-dark-toggle--939, hsl(240, 100%, 93%));
            background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
            background-color: var(--color-background-sidebar-action-hover);
        }

#left-sidebar-search .channel-folders-sidebar-menu-icon:focus-visible {
            outline: 2px solid hsl(215, 47%, 50%);
            outline: 2px solid var(--color-outline-focus);
            outline-offset: -2px;
        }

.stream-list-subsection-header {
    display: grid;
    align-items: center;
    /* There's no three-dot menu here, but we still want the markers to line-up with
       markers in other rows that do have three-dot menus. */
    grid-template:
        "arrow row-content add-channel markers-and-unreads three-dot-placeholder" 1.7142em
        / 20px minmax(0, 1fr) minmax(
            0,
            max-content
        )
        minmax(0, max-content) 1.625em;
    grid-template:
        "arrow row-content add-channel markers-and-unreads three-dot-placeholder" var(
            --line-height-sidebar-row-prominent
        )
        / var(--right-sidebar-header-icon-toggle-width) minmax(0, 1fr) minmax(
            0,
            max-content
        )
        minmax(0, max-content) var(--left-sidebar-vdots-width);
    cursor: pointer;
    --csstools-light-dark-toggle--772: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--772, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);
    position: sticky;
    /* height of DM header + 1px divider line and its top/bottom padding */
    top: calc(
        1.7142em + 1px + 2 *
            0.3125em
    );
    top: calc(
        var(--line-height-sidebar-row-prominent) + 1px + 2 *
            var(--left-sidebar-direct-messages-bottom-divider-padding)
    );
    /* Must be more than .sidebar-topic-check and less than #left-sidebar-search
       and #direct-messages-section-header */
    z-index: 2;
    --csstools-light-dark-toggle--773: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--773, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    /* There seems to be a bug where when the header returns to normal position after
       being sticky, it's 0.5px below its actual position and thus overlaps the channel
       below. This extra margin prevents that overlap. */
    margin-bottom: 1px;
    transition: box-shadow 150ms ease-out;
}

.stream-list-subsection-header.sidebar-header-drop-shadow {
        box-shadow: 0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
        box-shadow: var(--box-shadow-sidebar-sticky-header-drop);
    }

.stream-list-subsection-header .markers-and-unreads {
        display: flex;
        align-items: center;
    }

.stream-list-subsection-header .unread_count,.stream-list-subsection-header .masked_unread_count {
        margin-right: 6.5px;
        margin-right: var(--left-sidebar-unread-offset);
    }

.stream-list-subsection-header .add-stream-icon-container {
        -webkit-text-decoration: none;
        text-decoration: none;
        grid-auto-columns: calc(1.7142em - 2px);
        grid-auto-columns: var(--left-sidebar-header-icon-width);
        /* -4px for the 2px top and bottom padding in .add-stream-icon-container */
        grid-template-rows: calc(
            1.7142em - 4px
        );
        grid-template-rows: calc(
            var(--line-height-sidebar-row-prominent) - 4px
        );
    }

.stream-list-subsection-header .add_stream_icon {
        visibility: hidden;
    }

.stream-list-subsection-header .add-stream-icon-container:focus-visible .add_stream_icon,.stream-list-subsection-header:focus-within .add_stream_icon,.stream-list-subsection-header.highlighted_row .add_stream_icon {
        visibility: visible;
    }

/* We only set the border radius on the hover/popover/highlighted states,
       so as to prevent the background on highlighted channels
       from bleeding through. */

.stream-list-subsection-header:hover,.stream-list-subsection-header:has(.left_sidebar_menu_icon_visible),.stream-list-subsection-header.highlighted_row {
        border-radius: 4px;
    }

.stream-list-subsection-header:hover {
        --csstools-light-dark-toggle--940: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--940, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
        --csstools-light-dark-toggle--774: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
        box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--774, hsla(0, 0%, 0%, 0.3));
        box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
    }

.stream-list-subsection-header:hover .left-sidebar-title,.stream-list-subsection-header:hover .stream-list-section-toggle {
            opacity: 0.9;
            opacity: var(--opacity-sidebar-heading-hover);
        }

.stream-list-subsection-header:hover .add_stream_icon {
            visibility: visible;
        }

/* Combine hover border with drop shadow since CSS box-shadow doesn't stack. */

.stream-list-subsection-header.sidebar-header-drop-shadow:hover {
            --csstools-light-dark-toggle--775:
                var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
            box-shadow:
                inset 0 0 0 1px hsla(0, 0%, 0%, 0.3),
                0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
            box-shadow:
                inset 0 0 0 1px var(--csstools-light-dark-toggle--775, hsla(0, 0%, 0%, 0.3)),
                0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
            box-shadow:
                inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    ),
                0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
            box-shadow:
                inset 0 0 0 1px var(--color-shadow-sidebar-row-hover),
                var(--box-shadow-sidebar-sticky-header-drop);
        }

.stream-list-subsection-header:has(.left_sidebar_menu_icon_visible) {
        --csstools-light-dark-toggle--776: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
        box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--776, hsla(0, 0%, 0%, 0.3));
        box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
        --csstools-light-dark-toggle--941: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--941, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

.stream-list-subsection-header:has(.left_sidebar_menu_icon_visible) .left-sidebar-title,.stream-list-subsection-header:has(.left_sidebar_menu_icon_visible) .stream-list-section-toggle {
            opacity: 0.9;
            opacity: var(--opacity-sidebar-heading-hover);
        }

.stream-list-subsection-header .stream-list-section-toggle {
        --csstools-light-dark-toggle--777: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
        color: hsl(216, 65%, 20%);
        color: var(--csstools-light-dark-toggle--777, hsl(216, 65%, 20%));
        color: light-dark(
        hsl(216, 65%, 20%),
        hsl(216, 50%, 75%)
    );
        color: var(--color-text-sidebar-heading);
        opacity: 0.5;
        opacity: var(--opacity-sidebar-heading-icon);
        justify-self: center;
    }

.stream-list-toggle-inactive-or-muted-channels {
    padding-left: 20px;
    padding-left: var(--left-sidebar-toggle-width-offset);
}

.stream-list-toggle-inactive-or-muted-channels .show-inactive-or-muted-channels,.stream-list-toggle-inactive-or-muted-channels .hide-inactive-or-muted-channels {
        /* Override the action heading font size, so that em measurements
        on child elements are sized properly */
        font-size: 14px;
        font-size: var(--base-font-size-px);
        /* We also want the count text to be the normal font style. */
        font-feature-settings: inherit, , inherit, ;
        font-variant: inherit;
        padding: 0;
    }

.stream-list-toggle-inactive-or-muted-channels .show-inactive-or-muted-channels .stream-list-toggle-inactive-or-muted-channels-text,.stream-list-toggle-inactive-or-muted-channels .hide-inactive-or-muted-channels .stream-list-toggle-inactive-or-muted-channels-text {
            font-size: 1.0625em;
            font-size: var(--font-size-sidebar-action-heading);
            font-feature-settings: ;
            font-variant: all-small-caps;
            font-variant: var(--font-variant-sidebar-action-heading);
            overflow-x: hidden;
            text-overflow: ellipsis;
        }

.stream-list-section-container:not(.showing-inactive-or-muted) .inactive-or-muted-in-channel-folder:not(.active-filter):not(:has(.active-sub-filter)) {
        display: none;
    }

.stream-list-section-container:not(.showing-inactive-or-muted) .stream-list-toggle-inactive-or-muted-channels .hide-inactive-or-muted-channels {
            display: none;
        }

#streams_list.is_searching .show-inactive-or-muted-channels,#streams_list.is_searching .hide-inactive-or-muted-channels {
        display: none;
    }

#streams_list.is_searching .inactive-or-muted-in-channel-folder {
        display: block;
    }

.stream-list-section-container.showing-inactive-or-muted .stream-list-toggle-inactive-or-muted-channels .show-inactive-or-muted-channels {
            display: none;
        }

/* Sections with inactive/muted channels have a button to toggle
   showing them. If there's only one inactive/muted channel, and
   it's currently highlighted (.stream-expanded), then we want to
   always show it, which means there aren't any inactive/muted
   channels left to toggle visibility for. So we should hide the
   toggle button.

   (Checking for any .inactive-or-muted-in-channel-folder without
   .stream-expanded in a .stream-list-section-container, and if none
   then hide .stream-list-toggle-inactive-or-muted-channels). */
.stream-list-section-container:not(:has(.inactive-or-muted-in-channel-folder:not(.stream-expanded))) .stream-list-toggle-inactive-or-muted-channels {
        display: none;
    }

.show-inactive-or-muted-channels,
.hide-inactive-or-muted-channels {
    display: grid;
    grid-template:
        "icon content markers-and-unreads three-dot-placeholder" auto
        / 1.5em minmax(0, 1fr) minmax(0, max-content) 1.625em;
    grid-template:
        "icon content markers-and-unreads three-dot-placeholder" auto
        / 1.5em minmax(0, 1fr) minmax(0, max-content) var(
            --left-sidebar-vdots-width
        );
    align-items: center;
}

.show-inactive-or-muted-channels .markers-and-unreads,.hide-inactive-or-muted-channels .markers-and-unreads {
        margin-right: 6.5px;
        margin-right: var(--left-sidebar-unread-offset);
    }

.show-inactive-or-muted-channels .zulip-icon-collapse,.hide-inactive-or-muted-channels .zulip-icon-collapse,.show-inactive-or-muted-channels .zulip-icon-expand,.hide-inactive-or-muted-channels .zulip-icon-expand {
        grid-area: icon;
        /* 2px at 16px/1em to properly vertically center it */
        margin-top: 0.125em;
    }

.show-inactive-or-muted-channels .stream-list-toggle-inactive-or-muted-channels-text,.hide-inactive-or-muted-channels .stream-list-toggle-inactive-or-muted-channels-text {
        grid-area: content;
    }

.stream-list-section {
    margin: 0;
}

.stream-list-section-container.no-display {
    display: none;
}

#streams_list .stream-list-section-container.collapsed.hide-topic-bracket ul.topic-list.topic-list-has-topics::before {
        display: none;
    }

#streams_list .stream-list-section-container.collapsed.hide-topic-bracket ul.topic-list.topic-list-has-topics::after {
        display: none;
    }

#streams_list .stream-list-section-container.collapsed .narrow-filter:not(.stream-expanded),#streams_list .stream-list-section-container.collapsed .stream-list-toggle-inactive-or-muted-channels {
        display: none;
    }

/* Only show section header unread counts when the section is collapsed,
   when the header is being hovered over, when keyboard focus is inside
   the header, or when the header is the current arrow-key target. */
#streams_list .stream-list-section-container:not(.collapsed) .stream-list-subsection-header:not(:hover):not(:focus-within):not(.highlighted_row) .unread_count {
            visibility: hidden;
        }
#streams_list .stream-list-section-container:not(.collapsed) .stream-list-subsection-header:not(:hover):not(:focus-within):not(.highlighted_row) .masked_unread_count {
            visibility: hidden;
        }
#streams_list .stream-list-section-container:not(.collapsed) .stream-list-subsection-header:not(:hover):not(:focus-within):not(.highlighted_row) .unread_mention_info {
        display: none;
    }

.direct-messages-container.zoomed-out {
    /* Properly offset all the grid rows
       in the DM section. */
    margin-right: 12px;
    margin-right: var(--left-sidebar-right-margin);
}

.direct-messages-container:not(#does-not-exist) ul.dm-list,#left-sidebar-modal-content ul.dm-list {
        list-style-type: none;
        font-weight: 400;
        margin-left: 0;
        margin-bottom: 0;
        line-height: 1.7142em;
        line-height: var(--line-height-sidebar-row-prominent);
    }

.direct-messages-container:not(#does-not-exist) ul.dm-list li.dm-list-item .dm-box,#left-sidebar-modal-content ul.dm-list li.dm-list-item .dm-box,.direct-messages-container:not(#does-not-exist) ul.dm-list li.dm-list-item .dm-name,#left-sidebar-modal-content ul.dm-list li.dm-list-item .dm-name {
                -webkit-text-decoration: none;
                text-decoration: none;
                color: inherit;
                outline: none;
            }

.direct-messages-container:not(#does-not-exist) ul.dm-list li.dm-list-item .zulip-icon:not(.user-circle),#left-sidebar-modal-content ul.dm-list li.dm-list-item .zulip-icon:not(.user-circle) {
                --csstools-light-dark-toggle--942: var(--csstools-color-scheme--light) hsl(240, 35%, 58%);
                color: hsl(240, 30%, 60%);
                color: var(--csstools-light-dark-toggle--942, hsl(240, 30%, 60%));
                color: light-dark(
        hsl(240, 30%, 60%),
        hsl(240, 35%, 58%)
    );
                color: var(--color-left-sidebar-dm-partners-icon);
                vertical-align: -0.2em;
            }

.direct-messages-container:not(#does-not-exist) ul.dm-list li#show-more-direct-messages,#left-sidebar-modal-content ul.dm-list li#show-more-direct-messages {
            --csstools-light-dark-toggle--943: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
            color: hsl(240, 30%, 40%);
            color: var(--csstools-light-dark-toggle--943, hsl(240, 30%, 40%));
            color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
            color: var(--color-text-sidebar-action-heading);
            cursor: pointer;
            /* The 'more conversations' line has no icons,
               so vertically align the text with the unread
               count, when one appears there. */
            align-items: baseline;
        }

.direct-messages-container:not(#does-not-exist) ul.dm-list li#show-more-direct-messages .dm-name,#left-sidebar-modal-content ul.dm-list li#show-more-direct-messages .dm-name {
                font-size: 1.0625em;
                font-size: var(--font-size-sidebar-action-heading);
                font-weight: 370;
                font-weight: var(--font-weight-sidebar-action-heading);
                font-feature-settings: ;
                font-variant: all-small-caps;
                font-variant: var(--font-variant-sidebar-action-heading);
                text-transform: uppercase;
                text-transform: var(--text-transform-sidebar-action-heading);
            }

.direct-messages-container:not(#does-not-exist) ul.dm-list li#show-more-direct-messages:hover,#left-sidebar-modal-content ul.dm-list li#show-more-direct-messages:hover {
                --csstools-light-dark-toggle--944: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
                background-color: hsla(240, 100%, 50%, 0.07);
                background-color: var(--csstools-light-dark-toggle--944, hsla(240, 100%, 50%, 0.07));
                background-color: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
                background-color: var(
                    --color-background-sidebar-action-heading-hover
                );
            }

.direct-messages-container:not(#does-not-exist) ul.dm-list li#show-more-direct-messages:hover .dm-name,#left-sidebar-modal-content ul.dm-list li#show-more-direct-messages:hover .dm-name {
                    --csstools-light-dark-toggle--945: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
                    color: hsl(240, 100%, 15%);
                    color: var(--csstools-light-dark-toggle--945, hsl(240, 100%, 15%));
                    color: light-dark(
        hsl(240, 100%, 15%),
        hsl(240, 100%, 90%)
    );
                    color: var(--color-text-sidebar-action-heading-hover);
                }

.direct-messages-container:not(#does-not-exist) ul.dm-list li#show-more-direct-messages .unread_count,#left-sidebar-modal-content ul.dm-list li#show-more-direct-messages .unread_count {
                margin-top: 2px;
            }

.zulip-icon-heading-triangle-right {
    transition:
        opacity 140ms linear, rotate 140ms linear;
}

.zulip-icon-heading-triangle-right.rotate-icon-down {
    rotate: 90deg;
}

.zulip-icon-heading-triangle-right.rotate-icon-right {
    rotate: 0deg;
}

#toggle-direct-messages-section-icon,
#toggle-top-left-navigation-area-icon {
    --csstools-light-dark-toggle--778: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
    color: hsl(216, 65%, 20%);
    color: var(--csstools-light-dark-toggle--778, hsl(216, 65%, 20%));
    color: light-dark(
        hsl(216, 65%, 20%),
        hsl(216, 50%, 75%)
    );
    color: var(--color-text-sidebar-heading);
    opacity: 0.5;
    opacity: var(--opacity-sidebar-heading-icon);
}

#toggle-direct-messages-section-icon:focus,#toggle-top-left-navigation-area-icon:focus {
        outline: 0;
    }

/* This renders an outline when the caret is reached
       with the keyboard, although that is not at present
       easily accomplished. */

#toggle-direct-messages-section-icon:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
    }

#toggle-top-left-navigation-area-icon:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
    }

.stream-list-section-toggle:focus {
        outline: 0;
    }

.stream-list-section-toggle:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
    }

/* Arrow-key sidebar navigation focuses the toggle icon inside a
   section header row while also applying .highlighted_row to the row
   itself. Suppress the inner outline in that case to avoid showing
   two nested focus rings on the same row. The IDs are needed to win
   over the ID-scoped :focus-visible rules on the Views and DM
   toggle icons above. */
.highlighted_row #toggle-direct-messages-section-icon:focus-visible,
.highlighted_row #toggle-top-left-navigation-area-icon:focus-visible,
.highlighted_row .stream-list-section-toggle:focus-visible {
    outline: 0;
}

.active-direct-messages-section {
    --csstools-light-dark-toggle--946: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    background-color: hsl(0, 0%, 100%);
    background-color: var(--csstools-light-dark-toggle--946, hsl(0, 0%, 100%));
    background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
    background-color: var(--color-background-active-narrow-filter);
}

#direct-messages-section-header.active-direct-messages-section {
        border-radius: 4px 4px 0 0;
    }

.active-direct-messages-section #direct-messages-list {
        border-radius: 0 0 4px 4px;
    }

.top_left_row,
.bottom_left_row {
    /* Ensure a border radius on any interactive
       state that might show a highlight. */
    border-radius: 4px;

    /* Always show the box-shadow outline on hover and
       an open left-sidebar menu (vdots) */
}

.top_left_row:has(.left_sidebar_menu_icon_visible) {
        --csstools-light-dark-toggle--947: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
        box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--947, hsla(0, 0%, 0%, 0.3));
        box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
    }

.bottom_left_row:has(.left_sidebar_menu_icon_visible) {
        --csstools-light-dark-toggle--948: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
        box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--948, hsla(0, 0%, 0%, 0.3));
        box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
    }

.top_left_row:hover,.bottom_left_row:hover {
        --csstools-light-dark-toggle--949: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
        box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--949, hsla(0, 0%, 0%, 0.3));
        box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
    }

/* However, only adjust the background colors outside of active
       filters, whose colors are more intense in light and dark mode
       than the hover-narrow-filter color values. */

.top_left_row:not(.active-sub-filter):has(.left_sidebar_menu_icon_visible) {
            --csstools-light-dark-toggle--1081: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 97%);
            background-color: var(--csstools-light-dark-toggle--1081, hsl(0, 0%, 97%));
            background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-hover-narrow-filter);
        }

.bottom_left_row:not(.active-sub-filter):has(.left_sidebar_menu_icon_visible) {
            --csstools-light-dark-toggle--1082: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 97%);
            background-color: var(--csstools-light-dark-toggle--1082, hsl(0, 0%, 97%));
            background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-hover-narrow-filter);
        }

.top_left_row:not(.active-sub-filter):hover,.bottom_left_row:not(.active-sub-filter):hover {
            --csstools-light-dark-toggle--1083: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 97%);
            background-color: var(--csstools-light-dark-toggle--1083, hsl(0, 0%, 97%));
            background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-hover-narrow-filter);
        }

.top_left_row:not(.active-sub-filter):has(.left_sidebar_menu_icon_visible) .sidebar-topic-check {
                --csstools-light-dark-toggle--1084: var(--csstools-color-scheme--light) rgb(46, 46, 46);
                background-color: hsl(0, 0%, 97%);
                background-color: var(--csstools-light-dark-toggle--1084, hsl(0, 0%, 97%));
                background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
                background-color: var(--color-background-hover-narrow-filter);
            }

.bottom_left_row:not(.active-sub-filter):has(.left_sidebar_menu_icon_visible) .sidebar-topic-check {
                --csstools-light-dark-toggle--1085: var(--csstools-color-scheme--light) rgb(46, 46, 46);
                background-color: hsl(0, 0%, 97%);
                background-color: var(--csstools-light-dark-toggle--1085, hsl(0, 0%, 97%));
                background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
                background-color: var(--color-background-hover-narrow-filter);
            }

.top_left_row:not(.active-sub-filter):hover .sidebar-topic-check,.bottom_left_row:not(.active-sub-filter):hover .sidebar-topic-check {
                --csstools-light-dark-toggle--1086: var(--csstools-color-scheme--light) rgb(46, 46, 46);
                background-color: hsl(0, 0%, 97%);
                background-color: var(--csstools-light-dark-toggle--1086, hsl(0, 0%, 97%));
                background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
                background-color: var(--color-background-hover-narrow-filter);
            }

.top_left_row:has(.zoomed-new-topic):hover {
        --csstools-light-dark-toggle--950: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
        background: hsla(240, 100%, 50%, 0.07);
        background: var(--csstools-light-dark-toggle--950, hsla(240, 100%, 50%, 0.07));
        background: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
        background: var(--color-background-sidebar-action-heading-hover);
    }

.bottom_left_row:has(.zoomed-new-topic):hover {
        --csstools-light-dark-toggle--951: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
        background: hsla(240, 100%, 50%, 0.07);
        background: var(--csstools-light-dark-toggle--951, hsla(240, 100%, 50%, 0.07));
        background: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
        background: var(--color-background-sidebar-action-heading-hover);
    }

.top_left_row:has(.sidebar-topic-action-heading):hover {
        --csstools-light-dark-toggle--952: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
        background-color: hsla(240, 100%, 50%, 0.07);
        background-color: var(--csstools-light-dark-toggle--952, hsla(240, 100%, 50%, 0.07));
        background-color: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
        background-color: var(--color-background-sidebar-action-heading-hover);
    }

.bottom_left_row:has(.sidebar-topic-action-heading):hover {
        --csstools-light-dark-toggle--953: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
        background-color: hsla(240, 100%, 50%, 0.07);
        background-color: var(--csstools-light-dark-toggle--953, hsla(240, 100%, 50%, 0.07));
        background-color: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
        background-color: var(--color-background-sidebar-action-heading-hover);
    }

.top_left_row:has(a.left-sidebar-navigation-label-container:focus-visible) {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
        --csstools-light-dark-toggle--1087: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1087, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

.bottom_left_row:has(a.left-sidebar-navigation-label-container:focus-visible) {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
        --csstools-light-dark-toggle--1088: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1088, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

.top_left_row .left-sidebar-navigation-label-container:focus,.bottom_left_row .left-sidebar-navigation-label-container:focus {
        outline: none;
    }

.active-filter.top_left_row:has(.left_sidebar_menu_icon_visible) {
            --csstools-light-dark-toggle--1089: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--1089, hsl(0, 0%, 100%));
            background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-active-narrow-filter);
        }

.active-filter.bottom_left_row:has(.left_sidebar_menu_icon_visible) {
            --csstools-light-dark-toggle--1090: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--1090, hsl(0, 0%, 100%));
            background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-active-narrow-filter);
        }

.top-left-active-filter.top_left_row:has(.left_sidebar_menu_icon_visible) {
            --csstools-light-dark-toggle--1091: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--1091, hsl(0, 0%, 100%));
            background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-active-narrow-filter);
        }

.top-left-active-filter.bottom_left_row:has(.left_sidebar_menu_icon_visible) {
            --csstools-light-dark-toggle--1092: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--1092, hsl(0, 0%, 100%));
            background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-active-narrow-filter);
        }

.active-sub-filter.top_left_row:has(.left_sidebar_menu_icon_visible) {
            --csstools-light-dark-toggle--1093: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--1093, hsl(0, 0%, 100%));
            background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-active-narrow-filter);
        }

.active-sub-filter.bottom_left_row:has(.left_sidebar_menu_icon_visible) {
            --csstools-light-dark-toggle--1094: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--1094, hsl(0, 0%, 100%));
            background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-active-narrow-filter);
        }

.stream-list-toggle-inactive-or-muted-channels.highlighted_row,
.stream-list-toggle-inactive-or-muted-channels:focus-visible {
    outline: 2px solid hsl(215, 47%, 50%);
    outline: 2px solid var(--color-outline-focus);
    outline-offset: -2px;
    --csstools-light-dark-toggle--583: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
    background-color: hsla(240, 100%, 50%, 0.07);
    background-color: var(--csstools-light-dark-toggle--583, hsla(240, 100%, 50%, 0.07));
    background-color: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
    background-color: var(--color-background-sidebar-action-heading-hover);
}

#stream_filters .narrow-filter:has(a.subscription_block:focus-visible) > .bottom_left_row {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
    }

#stream_filters .narrow-filter.active-filter:has(a.subscription_block:focus-visible) .topic-list .bottom_left_row {
        --csstools-light-dark-toggle--1095: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--1095, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-active-narrow-filter);
    }

#stream_filters .narrow-filter.active-filter:has(a.subscription_block:focus-visible) .topic-list .bottom_left_row .sidebar-topic-check {
            --csstools-light-dark-toggle--1096: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--1096, hsl(0, 0%, 100%));
            background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-active-narrow-filter);
        }

#stream_filters .narrow-filter:has(a.subscription_block:focus-visible):not(.active-filter) {
        --csstools-light-dark-toggle--1097: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1097, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
        border-radius: 4px;
    }

#stream_filters .narrow-filter:has(a.subscription_block:focus-visible):not(.active-filter) .sidebar-topic-check {
            --csstools-light-dark-toggle--1098: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 97%);
            background-color: var(--csstools-light-dark-toggle--1098, hsl(0, 0%, 97%));
            background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-hover-narrow-filter);
        }

#views-label-container.highlighted_row,#direct-messages-section-header.highlighted_row,#direct-messages-modal-section-header.highlighted_row,.highlighted_row.stream-list-subsection-header:not(#does-not-exist),.highlighted_row.top_left_row:not(#does-not-exist),.highlighted_row.bottom_left_row:not(#does-not-exist) {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
    }

#stream_filters
    .narrow-filter
    .topic-list
    .bottom_left_row:has(a.topic-box:focus-visible),
#more-topics-modal .bottom_left_row:has(a.topic-box:focus-visible),
#direct-messages-list .dm-list .bottom_left_row:has(a.dm-box:focus-visible),
#modal-direct-messages-list .bottom_left_row:has(a.dm-box:focus-visible),
#show-more-direct-messages:has(a.dm-name:focus-visible),
#subscribe-to-more-streams:has(.subscribe-more-link:focus-visible),
#login-to-more-streams:has(.subscribe-more-link:focus-visible) {
    outline: 2px solid hsl(215, 47%, 50%);
    outline: 2px solid var(--color-outline-focus);
    outline-offset: -2px;
    --csstools-light-dark-toggle--954: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    background-color: hsl(0, 0%, 97%);
    background-color: var(--csstools-light-dark-toggle--954, hsl(0, 0%, 97%));
    background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
    background-color: var(--color-background-hover-narrow-filter);
}

#stream_filters .narrow-filter .topic-list .bottom_left_row:has(a.topic-box:focus-visible) .sidebar-topic-check {
        /* 2px of the original 4px padding is now the outline, don't draw over that */
        padding-left: 2px;
        --csstools-light-dark-toggle--1099: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1099, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

#more-topics-modal .bottom_left_row:has(a.topic-box:focus-visible):not(.does-not-exist):not(.does-not-exist) .sidebar-topic-check {
        /* 2px of the original 4px padding is now the outline, don't draw over that */
        padding-left: 2px;
        --csstools-light-dark-toggle--1100: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1100, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

#direct-messages-list .dm-list .bottom_left_row:has(a.dm-box:focus-visible):not(.does-not-exist) .sidebar-topic-check {
        /* 2px of the original 4px padding is now the outline, don't draw over that */
        padding-left: 2px;
        --csstools-light-dark-toggle--1101: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1101, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

#modal-direct-messages-list .bottom_left_row:has(a.dm-box:focus-visible):not(.does-not-exist):not(.does-not-exist) .sidebar-topic-check {
        /* 2px of the original 4px padding is now the outline, don't draw over that */
        padding-left: 2px;
        --csstools-light-dark-toggle--1102: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1102, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

#show-more-direct-messages:has(a.dm-name:focus-visible):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist) .sidebar-topic-check {
        /* 2px of the original 4px padding is now the outline, don't draw over that */
        padding-left: 2px;
        --csstools-light-dark-toggle--1103: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1103, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

#subscribe-to-more-streams:has(.subscribe-more-link:focus-visible):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(does-not-exist) .sidebar-topic-check {
        /* 2px of the original 4px padding is now the outline, don't draw over that */
        padding-left: 2px;
        --csstools-light-dark-toggle--1104: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1104, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

#login-to-more-streams:has(.subscribe-more-link:focus-visible):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(does-not-exist) .sidebar-topic-check {
        /* 2px of the original 4px padding is now the outline, don't draw over that */
        padding-left: 2px;
        --csstools-light-dark-toggle--1105: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1105, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

#left-sidebar-topic-search-hint {
    /* Match the outer spacing used by #subscribe-to-more-streams so
       icon and label align with that row's icon and label. */
    margin-right: 12px;
    margin-right: var(--left-sidebar-right-margin);
}

.left-sidebar-topic-search-hint-link {
    /* Padding on the link (which fills the row) keeps the focus ring
       spanning the full row width. */
    padding-left: 20px;
    padding-left: var(--left-sidebar-toggle-width-offset);
    display: grid;
    grid-template:
        "icon . text" minmax(1.7142em, auto)
        / 1em
        0.4375em
        minmax(0, 1fr);
    grid-template:
        "icon . text" minmax(var(--line-height-sidebar-row-prominent), auto)
        / var(--left-sidebar-icon-column-width)
        var(--left-sidebar-icon-content-gap)
        minmax(0, 1fr);
    align-items: center;
    border-radius: 4px;
    cursor: pointer;

    /* Override the global a:hover / a:focus rule in zulip.css that
       adds underline and changes the color to the generic link color. */
}

.left-sidebar-topic-search-hint-link,.left-sidebar-topic-search-hint-link:hover,.left-sidebar-topic-search-hint-link:focus {
        --csstools-light-dark-toggle--779: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
        color: hsl(0, 0%, 20%);
        color: var(--csstools-light-dark-toggle--779, hsl(0, 0%, 20%));
        color: light-dark(
        hsl(0, 0%, 20%),
        hsla(0, 0%, 100%, 0.85)
    );
        color: var(--color-text-sidebar-row);
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.left-sidebar-topic-search-hint-link:hover {
        --csstools-light-dark-toggle--955: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--955, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

/* Match the inset outline used by .highlighted_row so Tab and
       arrow key focus look identical and don't clip outside the row. */

.left-sidebar-topic-search-hint-link:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
    }

.left-sidebar-topic-search-hint-link .zulip-icon {
        grid-area: icon;
        justify-self: center;
        opacity: 0.7;
    }

.left-sidebar-topic-search-hint-link .left-sidebar-topic-search-hint-label {
        grid-area: text;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

#stream_filters .narrow-filter a.stream-name:focus,#direct-messages-list .bottom_left_row a.stream-name:focus,#stream_filters .narrow-filter a.sidebar-topic-name:focus,#direct-messages-list .bottom_left_row a.sidebar-topic-name:focus,#stream_filters .narrow-filter a.conversation-partners:focus,#direct-messages-list .bottom_left_row a.conversation-partners:focus,#stream_filters .narrow-filter a.dm-box:focus,#direct-messages-list .bottom_left_row a.dm-box:focus,#stream_filters .narrow-filter a.sidebar-topic-action-heading:focus,#direct-messages-list .bottom_left_row a.sidebar-topic-action-heading:focus {
        outline: none;
        -webkit-text-decoration: none;
        text-decoration: none;
    }

#subscribe-to-more-streams,
#login-to-more-streams {
    /* --left-sidebar-bottom-scrolling-buffer is to prevent the row from
       being cut off, and --sidebar-bottom-spacing is extra padding. */
    margin: 5px 12px
        calc(
            (
        (calc(20 / 14) * 1em) + 0.3571em
    ) +
                25px
        )
        0;
    margin: 5px 12px
        calc(
            calc(
        (calc(20 / 14) * 1em) + 0.3571em
    ) +
                25px
        )
        0;
    margin: 5px var(--left-sidebar-right-margin)
        calc(
            var(--left-sidebar-bottom-scrolling-buffer) +
                var(--sidebar-bottom-spacing)
        )
        0;
    padding-left: 20px;
    padding-left: var(--left-sidebar-toggle-width-offset);
    border-radius: 4px;
    -webkit-text-decoration: none;
    text-decoration: none;
}

#subscribe-to-more-streams:hover,#login-to-more-streams:hover {
        --csstools-light-dark-toggle--956: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
        background: hsla(240, 100%, 50%, 0.07);
        background: var(--csstools-light-dark-toggle--956, hsla(240, 100%, 50%, 0.07));
        background: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
        background: var(--color-background-sidebar-action-heading-hover);
        --csstools-light-dark-toggle--957: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
        box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--957, hsla(0, 0%, 0%, 0.3));
        box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
        --csstools-light-dark-toggle--958: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--958, hsl(240, 100%, 15%));
        color: light-dark(
        hsl(240, 100%, 15%),
        hsl(240, 100%, 90%)
    );
        color: var(--color-text-sidebar-action-heading-hover);
    }

#subscribe-to-more-streams .subscribe-more-link,#login-to-more-streams .subscribe-more-link {
        display: grid;
        grid-template:
            "plus-icon . row-text" minmax(
                1.7142em,
                auto
            )
            / 1em 0.4375em
            minmax(0, 1fr);
        grid-template:
            "plus-icon . row-text" minmax(
                var(--line-height-sidebar-row-prominent),
                auto
            )
            / var(--left-sidebar-icon-column-width) var(
                --left-sidebar-icon-content-gap
            )
            minmax(0, 1fr);
        align-items: center;
        line-height: 1;
        --csstools-light-dark-toggle--959: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--959, hsl(240, 30%, 40%));
        color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
        color: var(--color-text-sidebar-action-heading);
        -webkit-text-decoration: none;
        text-decoration: none;
        outline: none;
    }

#subscribe-to-more-streams .subscribe-more-label,#login-to-more-streams .subscribe-more-label {
        grid-area: row-text;
        /* Because the label is run in small caps, we do a font-metrics-based
           adjustment of its top margin to keep the text vertically aligned
           with the square [+] icon (whose shape leaves absolutely no room
           for error when it comes to centering). Going back to the font metrics
           outlined in web/src/information_density.ts, we can offset against the
           space reserved for descenders, and take half that value to pull the
           text up: 400 / (400 + 1025) ~= 0.28; half of 0.28 is 0.14, so
           `margin-top: -0.14em`. However, it looks as though a slight adjustment
           to -0.12em produces a slightly more pleasing result, which makes sense
           because mathematical centering and the perception of center don't
           always match. */
        margin-top: -0.12em;
        padding: 3px 0;
        font-size: 1.0625em;
        font-size: var(--font-size-sidebar-action-heading);
        font-weight: 370;
        font-weight: var(--font-weight-sidebar-action-heading);
        font-variant: all-small-caps;
        font-variant: var(--font-variant-sidebar-action-heading);
        font-feature-settings: "c2sc", "smcp", , ;
        font-feature-settings: var(
            --font-feature-settings-sidebar-action-heading
        ), , ;
        text-transform: uppercase;
        text-transform: var(--text-transform-sidebar-action-heading);
    }

#subscribe-to-more-streams .subscribe-more-icon,#login-to-more-streams .subscribe-more-icon {
        /* Scale the icon with the action-heading font-size
           for better vertical centering. */
        font-size: 1.0625em;
        font-size: var(--font-size-sidebar-action-heading);
    }

ul.filters {
    list-style-type: none;
    margin-left: 0;
    line-height: 1.7142em;
    line-height: var(--line-height-sidebar-row-prominent);
}

ul.filters .sidebar-topic-name,ul.filters .left-sidebar-navigation-label-container {
        --csstools-light-dark-toggle--780: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
        color: hsl(0, 0%, 20%);
        color: var(--csstools-light-dark-toggle--780, hsl(0, 0%, 20%));
        color: light-dark(
        hsl(0, 0%, 20%),
        hsla(0, 0%, 100%, 0.85)
    );
        color: var(--color-text-sidebar-row);
    }

ul.filters .sidebar-topic-name:hover,ul.filters .left-sidebar-navigation-label-container:hover {
            /* Push back against a:hover color in dark_theme.css */
            --csstools-light-dark-toggle--960: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85) !important;
            color: hsl(0, 0%, 20%) !important;
            color: var(--csstools-light-dark-toggle--960, hsl(0, 0%, 20%)) !important;
            color: light-dark(
        hsl(0, 0%, 20%),
        hsla(0, 0%, 100%, 0.85)
    ) !important;
            color: var(--color-text-sidebar-row) !important;
        }

ul.filters .sidebar-topic-name:focus,ul.filters .left-sidebar-navigation-label-container:focus {
            -webkit-text-decoration: none;
            text-decoration: none;
        }

#more-topics-modal .topic-list .sidebar-topic-action-heading:focus,ul.filters:not(#does-not-exist) .sidebar-topic-action-heading:focus {
            --csstools-light-dark-toggle--961: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
            color: hsl(240, 30%, 40%);
            color: var(--csstools-light-dark-toggle--961, hsl(240, 30%, 40%));
            color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
            color: var(--color-text-sidebar-action-heading);
        }

#more-topics-modal .topic-list hr,ul.filters:not(#does-not-exist) hr {
        margin-top: 10px;
        margin-bottom: 10px;
    }

#more-topics-modal .topic-list .has-only-muted-unreads .unread_count,ul.filters:not(#does-not-exist) .has-only-muted-unreads .unread_count,#more-topics-modal .topic-list .has-only-muted-unreads .masked_unread_count,ul.filters:not(#does-not-exist) .has-only-muted-unreads .masked_unread_count {
            opacity: 0.55;
            opacity: var(--opacity-left-sidebar-muted);
        }

#more-topics-modal .topic-list .has-only-muted-unreads:hover .unread_count,ul.filters:not(#does-not-exist) .has-only-muted-unreads:hover .unread_count {
            opacity: 0.75;
            opacity: var(--opacity-left-sidebar-muted-hover);
        }

#more-topics-modal .topic-list .has-only-muted-mentions .unread_mention_info,ul.filters:not(#does-not-exist) .has-only-muted-mentions .unread_mention_info {
            opacity: 0.3;
            opacity: var(--opacity-left-sidebar-muted-mentions);
        }

#more-topics-modal .topic-list .has-only-muted-mentions:hover .unread_mention_info,ul.filters:not(#does-not-exist) .has-only-muted-mentions:hover .unread_mention_info {
            opacity: 0.75;
            opacity: var(--opacity-left-sidebar-muted-hover);
        }

/* This is a noop in the current design, because unread counts for
       muted streams have the same opacity, but the logic is here to
       be explicit and because the design may change in the future. */

#more-topics-modal .topic-list .more_topic_unreads_muted_only .unread_count,ul.filters:not(#does-not-exist) .more_topic_unreads_muted_only .unread_count {
        opacity: 0.55;
        opacity: var(--opacity-left-sidebar-muted);
    }

#more-topics-modal .topic-list .zulip-icon-follow,ul.filters:not(#does-not-exist) .zulip-icon-follow {
        opacity: 0.5;
    }

#more-topics-modal .topic-list .zulip-icon-follow:hover,ul.filters:not(#does-not-exist) .zulip-icon-follow:hover {
            opacity: 1;
            --csstools-light-dark-toggle--962: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
            color: hsl(0, 0%, 0%);
            color: var(--csstools-light-dark-toggle--962, hsl(0, 0%, 0%));
            color: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
            color: var(--color-left-sidebar-follow-icon-hover);
        }

#more-topics-modal .topic-list li.muted_topic .sidebar-topic-check,ul.filters:not(#does-not-exist) li.muted_topic .sidebar-topic-check,#more-topics-modal .topic-list li.muted_topic .sidebar-topic-name,ul.filters:not(#does-not-exist) li.muted_topic .sidebar-topic-name,#more-topics-modal .topic-list li.muted_topic .unread_count,ul.filters:not(#does-not-exist) li.muted_topic .unread_count {
            opacity: 0.55;
            opacity: var(--opacity-left-sidebar-muted);
        }

#more-topics-modal .topic-list li.muted_topic:hover .sidebar-topic-check,ul.filters:not(#does-not-exist) li.muted_topic:hover .sidebar-topic-check,#more-topics-modal .topic-list li.muted_topic:hover .sidebar-topic-name,ul.filters:not(#does-not-exist) li.muted_topic:hover .sidebar-topic-name,#more-topics-modal .topic-list li.muted_topic:hover .unread_count,ul.filters:not(#does-not-exist) li.muted_topic:hover .unread_count {
                opacity: 0.75;
                opacity: var(--opacity-left-sidebar-muted-hover);
            }

#more-topics-modal .topic-list li.out_of_home_view .stream-privacy,ul.filters:not(#does-not-exist) li.out_of_home_view .stream-privacy,#more-topics-modal .topic-list li.out_of_home_view .stream-name,ul.filters:not(#does-not-exist) li.out_of_home_view .stream-name,#more-topics-modal .topic-list li.out_of_home_view .channel-new-topic-button,ul.filters:not(#does-not-exist) li.out_of_home_view .channel-new-topic-button,#more-topics-modal .topic-list li.out_of_home_view .unread_count,ul.filters:not(#does-not-exist) li.out_of_home_view .unread_count,#more-topics-modal .topic-list li.out_of_home_view .masked_unread_count,ul.filters:not(#does-not-exist) li.out_of_home_view .masked_unread_count,#more-topics-modal .topic-list li.out_of_home_view .sidebar-menu-icon,ul.filters:not(#does-not-exist) li.out_of_home_view .sidebar-menu-icon {
            opacity: 0.55;
            opacity: var(--opacity-left-sidebar-muted);
        }

#more-topics-modal .topic-list li.out_of_home_view .unread_mention_info,ul.filters:not(#does-not-exist) li.out_of_home_view .unread_mention_info {
            /* Default opacity for this icon is too close to
               --opacity-left-sidebar-muted */
            opacity: 0.3;
            opacity: var(--opacity-left-sidebar-muted-mentions);
        }

#more-topics-modal .topic-list li.out_of_home_view:hover .stream-privacy,ul.filters:not(#does-not-exist) li.out_of_home_view:hover .stream-privacy,#more-topics-modal .topic-list li.out_of_home_view:hover .stream-name,ul.filters:not(#does-not-exist) li.out_of_home_view:hover .stream-name,#more-topics-modal .topic-list li.out_of_home_view:hover .channel-new-topic-button,ul.filters:not(#does-not-exist) li.out_of_home_view:hover .channel-new-topic-button,#more-topics-modal .topic-list li.out_of_home_view:hover .unread_count,ul.filters:not(#does-not-exist) li.out_of_home_view:hover .unread_count,#more-topics-modal .topic-list li.out_of_home_view:hover .masked_unread_count,ul.filters:not(#does-not-exist) li.out_of_home_view:hover .masked_unread_count,#more-topics-modal .topic-list li.out_of_home_view:hover .sidebar-menu-icon,ul.filters:not(#does-not-exist) li.out_of_home_view:hover .sidebar-menu-icon {
                opacity: 0.75;
                opacity: var(--opacity-left-sidebar-muted-hover);
            }

#more-topics-modal .topic-list li.out_of_home_view .has-unmuted-unreads .unread_count,ul.filters:not(#does-not-exist) li.out_of_home_view .has-unmuted-unreads .unread_count {
                opacity: 1;
            }

#more-topics-modal .topic-list li.out_of_home_view li.unmuted_or_followed_topic,ul.filters:not(#does-not-exist) li.out_of_home_view li.unmuted_or_followed_topic {
            --csstools-light-dark-toggle--963: var(--csstools-color-scheme--light) hsl(236, 33%, 90%);
            color: hsl(0, 0%, 20%);
            color: var(--csstools-light-dark-toggle--963, hsl(0, 0%, 20%));
            color: light-dark(
        hsl(0, 0%, 20%),
        hsl(236, 33%, 90%)
    );
            color: var(--color-unmuted-or-followed-topic-list-item);
        }

#more-topics-modal .topic-list li.out_of_home_view li.unmuted_or_followed_topic .unread_count,ul.filters:not(#does-not-exist) li.out_of_home_view li.unmuted_or_followed_topic .unread_count {
                opacity: 1;
            }

li.active-filter,
li.top-left-active-filter,
li.active-sub-filter {
    font-weight: 600 !important;
    position: relative;
    border-radius: 4px;
    --csstools-light-dark-toggle--781: var(--csstools-color-scheme--light) hsl(0, 0%, 90%);
    color: hsl(0, 0%, 15%);
    color: var(--csstools-light-dark-toggle--781, hsl(0, 0%, 15%));
    color: light-dark(
        hsl(0, 0%, 15%),
        hsl(0, 0%, 90%)
    );
    color: var(--color-text-active-narrow-filter);
    --csstools-light-dark-toggle--964: var(--csstools-color-scheme--light) rgb(46, 46, 46);
    background-color: hsl(0, 0%, 100%);
    background-color: var(--csstools-light-dark-toggle--964, hsl(0, 0%, 100%));
    background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
    background-color: var(--color-background-active-narrow-filter);

    /* These hover styles effectively push back on non-active-filter
       styles, which would otherwise present the less-intense
       --color-background-hover-narrow-filter colors. */
}

li.active-filter:hover,li.top-left-active-filter:hover,li.active-sub-filter:hover {
        --csstools-light-dark-toggle--1106: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--1106, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-active-narrow-filter);
    }

li.active-filter:hover .sidebar-topic-check,li.top-left-active-filter:hover .sidebar-topic-check,li.active-sub-filter:hover .sidebar-topic-check {
            --csstools-light-dark-toggle--1107: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--1107, hsl(0, 0%, 100%));
            background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-active-narrow-filter);
        }

li.active-filter .sidebar-topic-check,li.top-left-active-filter .sidebar-topic-check,li.active-sub-filter .sidebar-topic-check {
        --csstools-light-dark-toggle--1108: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--1108, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-active-narrow-filter);
    }

li.active-filter .sidebar-topic-name-inner,li.top-left-active-filter .sidebar-topic-name-inner,li.active-sub-filter .sidebar-topic-name-inner {
        --csstools-light-dark-toggle--965: var(--csstools-color-scheme--light) hsl(0, 0%, 90%);
        color: hsl(0, 0%, 15%);
        color: var(--csstools-light-dark-toggle--965, hsl(0, 0%, 15%));
        color: light-dark(
        hsl(0, 0%, 15%),
        hsl(0, 0%, 90%)
    );
        color: var(--color-text-active-narrow-filter);
    }

/* To highlight the background when a new unread arrives,
       we set the background on the .new-unread class. */

.new-unread.top_left_mentions:not(#does-not-exist),#direct-messages-section-header.new-unread,#direct-messages-modal-section-header.new-unread,.new-unread.dm-list-item:not(#does-not-exist) {
        --csstools-light-dark-toggle--1109: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--1109, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-active-narrow-filter);
    }

/* The background-color transition is maintained by this class,
       which ensures an immediate opening transition, and lingers
       some time longer beyond the CSS Animation on the unread count,
       ensuring a smooth transition back to the normal background
       color on the sidebar row that's been targeted. */

.new-unread-highlight.top_left_mentions:not(#does-not-exist),#direct-messages-section-header.new-unread-highlight,#direct-messages-modal-section-header.new-unread-highlight,.new-unread-highlight.dm-list-item:not(#does-not-exist) {
        transition: background-color 1s ease-in-out;
    }

.top_left_mentions #stream_filters .narrow-filter.active-filter .topic-list .filter-topics,.top_left_mentions #stream_filters .narrow-filter.active-filter  > .bottom_left_row {
        --csstools-light-dark-toggle--1110: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--1110, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-active-narrow-filter);
        border-radius: 4px;
    }

.top_left_mentions #stream_filters .narrow-filter.active-filter .topic-list .filter-topics:hover,.top_left_mentions #stream_filters .narrow-filter.active-filter > .bottom_left_row:not(.does-not-exist):hover {
            --csstools-light-dark-toggle--1111: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 97%);
            background-color: var(--csstools-light-dark-toggle--1111, hsl(0, 0%, 97%));
            background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-background-hover-narrow-filter);
        }

#left-sidebar-navigation-list-condensed {
    display: flex;
    justify-content: center;
}

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item {
        /* 26px minimum width gives a bit more
           breathing room for unread markers when
           unreads are displayed.
           However, we want to permit growing but
           not shrinking to keep icons reasonably
           spaced across different information-density
           settings. So we convert this value to ems:
           26px at 16px/1em. */
        flex: 1 0 1.625em;
        /* Unset padding from individual top_left items */
        padding: 0;
        border-radius: 4px;
        /* Set a positioning context for the unread dot. */
        position: relative;
    }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item:not(.top_left_condensed_unread_marker) .unread_count {
                position: absolute;
            }

/* Show the same styles when each item is
               hovered or, via the keyboard, the `<a>`
               element within receives focus. */

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item:not(.top_left_condensed_unread_marker):focus-within {
                --csstools-light-dark-toggle--966: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
                background: hsla(240, 100%, 50%, 0.07);
                background: var(--csstools-light-dark-toggle--966, hsla(240, 100%, 50%, 0.07));
                background: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
                background: var(--color-background-navigation-item-hover);
            }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item:not(.top_left_condensed_unread_marker):hover {
                --csstools-light-dark-toggle--967: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
                background: hsla(240, 100%, 50%, 0.07);
                background: var(--csstools-light-dark-toggle--967, hsla(240, 100%, 50%, 0.07));
                background: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
                background: var(--color-background-navigation-item-hover);
            }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item:not(.top_left_condensed_unread_marker):focus-within .unread_count {
                    /* 6px at 12px/1em */
                    top: -0.5em;
                    right: -0.5em;
                    --csstools-light-dark-toggle--968: var(--csstools-color-scheme--light) rgb(58, 58, 67);
                    background: rgb(215, 215, 220);
                    background: var(--csstools-light-dark-toggle--968, rgb(215, 215, 220));
                    background: light-dark(
        rgb(215, 215, 220),
        rgb(58, 58, 67)
    );
                    background: var(--color-background-unread-counter-no-alpha);
                }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item:not(.top_left_condensed_unread_marker):hover .unread_count {
                    /* 6px at 12px/1em */
                    top: -0.5em;
                    right: -0.5em;
                    --csstools-light-dark-toggle--969: var(--csstools-color-scheme--light) rgb(58, 58, 67);
                    background: rgb(215, 215, 220);
                    background: var(--csstools-light-dark-toggle--969, rgb(215, 215, 220));
                    background: light-dark(
        rgb(215, 215, 220),
        rgb(58, 58, 67)
    );
                    background: var(--color-background-unread-counter-no-alpha);
                }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item:not(.top_left_condensed_unread_marker):not(:hover) .unread_count {
                /* .unread_count has its based font-size set to 12px at 14px/em. */
                /* 2px, 6px at 12px/1em */
                top: 0.1667em;
                /* With positioning, we center the dot over the icon
                   by subtracting half its width from the 50% mark. */
                right: calc(50% - 0.25em);
                /* But then we shift it left the em equivalent of half
                   the icon width (15px/2) plus 2px. This keeps the
                   unread dot in correct proximity to the view icon,
                   no matter how the row flexes or what information-
                   density values a user has set. 9.5px at 12px/1em.

                   We set this and its scaled counterpart as variables
                   for use in the pulse-unread animation to maintain the
                   dot's correct position relative to the view icon. */
                --unread-dot-x-offset: 0.7917em;
                /* To make sure the unread dot appears to scale from the
                   offset dot's center in collapsed Views, we need to
                   adjust the translateX offset by the same amount we
                   scale. calc() does not play nicely with animations,
                   so it's critical that we calculate this value here,
                   well before its needed. */
                --unread-dot-x-offset-scaled: calc(
                    var(--unread-dot-x-offset) / var(--pulse-unread-scale-max)
                );

                transform: translateX(0.7917em);

                transform: translateX(var(--unread-dot-x-offset));
                width: 0.5em;
                height: 0.5em;
                padding: 0;
                color: transparent;
                --csstools-light-dark-toggle--970: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
                background-color: hsl(240, 30%, 40%);
                background-color: var(--csstools-light-dark-toggle--970, hsl(240, 30%, 40%));
                background-color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
                background-color: var(--color-background-unread-counter-dot);
            }

/* Hide the unread dot, assuming that message
           counts are not hidden. */

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item.selected-home-view .unread_count {
            display: none;
        }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item.top_left_starred_messages .unread_count {
            display: none;
        }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item.top_left_condensed_unread_marker {
            /* Flex to just the unread's width, to keep the
               unreads aligned on the righthand side with others
               up and down the left sidebar. */
            flex: 0 0 auto;
            display: flex;
            align-content: center;
        }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item.top_left_condensed_unread_marker:has(.unread_count:empty) {
                /* When the unread count is empty (no unreads),
                   we flex shut to 0 across the board so the
                   unread count takes up no space. */
                flex: 0 0 0;
            }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item.top_left_condensed_unread_marker .unread_count:not(:empty) {
                margin: 0 6.5px;
                margin: 0 var(--left-sidebar-unread-offset);
                align-self: center;
            }

/* Restore the unread dot when message counts
           are hidden, unless there are no unreads,
           of course. */

#left-sidebar-navigation-list-condensed.hide-unread-messages-count .selected-home-view .unread_count:not(:empty) {
            display: block;
        }

/* We suppress the entire unread area
           for users who prefer masked unreads. */

#left-sidebar-navigation-list-condensed.hide-unread-messages-count .top_left_condensed_unread_marker {
            display: none;
        }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-icon-container {
        /* Unset margin from full nav list anchor elements. */
        margin: 0;
        /* Horizontally center icons within their boxes. */
        text-align: center;
    }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-icon-container:focus {
            /* Unset inherited :focus outline. */
            outline: 0;
        }

#left-sidebar-navigation-list-condensed .top-left-active-filter {
        /* Don't display a background on condensed icons. */
        background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
        background: initial;
    }

#left-sidebar-navigation-list-condensed .filter-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Enlarge icons slightly in condensed views. */
        /* 15px at 16px/1em */
        font-size: 0.9375em;
        /* 24px at 15px/1em */
        height: 1.6em;
        --csstools-light-dark-toggle--782: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--782, hsl(240, 30%, 40%));
        color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
        color: var(--color-left-sidebar-navigation-icon);
    }

#left-sidebar-navigation-list {
    margin-bottom: 0;
    display: grid;
    line-height: 1.5714em;
    line-height: var(--line-height-sidebar-row);
    /* Explicitly ensure parity with the line-height
       for the sake of low-resolution screens, whose
       font-rendering and rounding may cause icons
       to appear out of alignment. This grid feature should
       only apply in the expanded-navigation view. */
    grid-auto-rows: 1.5714em;
    grid-auto-rows: var(--line-height-sidebar-row);
}

#left-sidebar-navigation-list .left-sidebar-navigation-label-container .left-sidebar-navigation-label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

/* Don't show unread counts on views... */
.top_left_my_reactions .unread_count,.top_left_inbox .unread_count,.top_left_recent_view .unread_count,.top_left_all_messages .unread_count {
        visibility: hidden;
    }
/* ...unless it's the selected home view. */
.selected-home-view.top_left_my_reactions .unread_count,.selected-home-view.top_left_inbox .unread_count,.selected-home-view.top_left_recent_view .unread_count,.selected-home-view.top_left_all_messages .unread_count {
        visibility: visible;
    }

.sidebar-menu-icon.hide {
    visibility: hidden;
}

.left-sidebar-navigation-label-container {
    grid-area: row-content;
    /* The label container itself is also a grid,
       for laying out the items that are its
       children. Same template areas, different
       column widths. */
    grid-template-columns:
        20px 1em
        0.4375em minmax(0, 1fr) minmax(
            0,
            max-content
        )
        minmax(0, max-content) 0 0;
    grid-template-columns:
        var(--left-sidebar-toggle-width-offset) var(
            --left-sidebar-icon-column-width
        )
        var(--left-sidebar-icon-content-gap) minmax(0, 1fr) minmax(
            0,
            max-content
        )
        minmax(0, max-content) 0 0;
}

.left-sidebar-navigation-label-container .filter-icon {
        grid-area: starting-anchor-element;
        /* Use a flex container to handle
           icon centering within the grid area. */
        display: flex;
        justify-content: center;
    }

.left-sidebar-navigation-label-container .left-sidebar-navigation-label {
        grid-area: row-content;
        padding-right: 3px;
        padding-right: var(--left-sidebar-before-unread-count-padding);
    }

@media screen and (max-resolution: 1x) {

.left-sidebar-navigation-label-container .left-sidebar-navigation-label {
            /* For the sake of low-resolution screens,
               we'll let the actual label take 1 as a line-height
               value, and allow grid to handle the alignment. */
            line-height: 1;
    }
        }

.left-sidebar-navigation-label-container .unread_count {
        grid-area: markers-and-unreads;
        /* Extra margin for unreads. */
        margin-right: 6.5px;
        margin-right: var(--left-sidebar-unread-offset);
    }

.left-sidebar-navigation-label-container .unread_count:empty {
            margin-right: 0;
        }

/* Low-attention unreads have no bounding box,
   so their counters should be aligned on the
   same baseline as the navigation label. */
.top_left_starred_messages .left-sidebar-navigation-label-container,.top_left_drafts .left-sidebar-navigation-label-container,.top_left_scheduled_messages .left-sidebar-navigation-label-container {
        align-items: baseline;
    }
@media screen and (max-resolution: 1x) {
.top_left_starred_messages .left-sidebar-navigation-label,.top_left_drafts .left-sidebar-navigation-label,.top_left_scheduled_messages .left-sidebar-navigation-label {
            /* Owing to the baseline alignment in this
               area, we don't need the low-res line-height
               adjustment. */
            line-height: inherit;
    }
        }
.top_left_starred_messages .filter-icon,.top_left_drafts .filter-icon,.top_left_scheduled_messages .filter-icon {
        align-self: center;
    }

.top_left_starred_messages.hide_starred_message_count .masked_unread_count {
            display: flex;
            grid-area: markers-and-unreads;
            /* Extra margin for unreads. */
            margin-right: 6.5px;
            margin-right: var(--left-sidebar-unread-offset);
        }

.top_left_starred_messages.hide_starred_message_count .unread_count {
            display: none;
        }

/* When starred message count is 0, we dont want to show unread_count or masked_unread_count. */

.top_left_starred_messages.hide_starred_message_count .unread_count.hide + .masked_unread_count {
            display: none;
        }

.top_left_starred_messages.hide_starred_message_count:hover .masked_unread_count {
            display: none;
        }

.top_left_starred_messages.hide_starred_message_count:hover .unread_count {
            display: inline;
        }

.top_left_starred_messages.hide_starred_message_count:hover .unread_count.hide {
            display: none;
        }

.top_left_starred_messages.top-left-active-filter.hide_starred_message_count .masked_unread_count {
            display: none;
        }

.top_left_starred_messages.top-left-active-filter.hide_starred_message_count .unread_count {
            display: inline;
        }

.top_left_starred_messages.top-left-active-filter.hide_starred_message_count .unread_count.hide {
            display: none;
        }

.conversation-partners {
    grid-area: row-content;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-partners .status-emoji {
    /* Prevent status emoji from colliding
       with unread counts. */
    margin-right: 3px;
    /* To make status emoji look good with
       multiline usernames, we need to fall
       back to inline-block display here. */
    display: inline-block;
    vertical-align: -0.25em;
}

/* New grid definitions here. */
#views-label-container,
.top_left_row,
.left-sidebar-navigation-label-container,
.dm-box,
.subscription_block,
.searching-for-more-topics {
    display: grid;
    align-items: center;
    /* This general pattern of elements applies to every single row in the left
       sidebar, to some degree or another. Eventually, these template areas
       could be applied to all rows, with different `grid-template-column`
       values applied as needed (and shared as needed). For example, an element
       with no "starting-offset" sets that area to `0`; so too with other non-
       existent elements.

       The offsets themselves are meant to greedily assign all of the available
       horizontal space to the content area of the row. That space can then be
       modified or reassigned as needed, without running up against `padding`
       (which alters the box size) or `margin` (which notoriously bleeds outside
       of the element it's defined on). */
    grid-template-areas: "starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset";
}

.top_left_row {
    /* We stretch the items on the overall
       nav row, so there's no unclickable
       gaps between nav rows. */
    align-items: stretch;
    /* The row grid for the outer .top_left_row
       is chiefly for lefthand spacing and placing
       the inner row content and vdots. */
    grid-template-columns:
        0 0 0 minmax(0, 1fr) 0 0 1.625em
        0;
    grid-template-columns:
        0 0 0 minmax(0, 1fr) 0 0 var(--left-sidebar-vdots-width)
        0;
}

.top_left_row .sidebar-menu-icon {
        grid-area: ending-anchor-element;
    }

.left-sidebar-filter-input-container {
    display: block;
    margin-bottom: 5px;
    grid-area: filter-container;
}

.left-sidebar-filter-input-container .filter-input,.left-sidebar-filter-input-container .filter-topics {
        grid-area: filter-input;
    }

/* Keep topic filters to a single line, and show
       an ellipsis when the input loses focus. */

.left-sidebar-filter-input-container #left-sidebar-filter-topic-input {
        flex-wrap: nowrap;
    }

.left-sidebar-filter-input-container #left-sidebar-filter-topic-input .pill {
            flex-shrink: 0;
        }

.left-sidebar-filter-input-container #left-sidebar-filter-topic-input .input {
            white-space: nowrap;
            overflow: hidden;
        }

#left-sidebar-navigation-area:has(.selected-home-view.top-left-active-filter)
    .top_left_condensed_unread_marker {
    /* Hide the condensed unread marker when the home view is active,
       since the home view row already shows the unread count. */
    display: none;
}

/* Use a next-sibling combinator (+) to use CSS to show and hide
        filter rows as needed, based on the narrow. */

#views-label-container.showing-condensed-navigation:not(.does-not-exist)  + #left-sidebar-navigation-list,.left-sidebar.zoom-in #views-label-container  + #left-sidebar-navigation-list {
        /* In the condensed state, we don't want to generate
            auto rows, or there will be a footprint where the
            expanded nav sits. */
        grid-auto-rows: initial;
        /* When the navigation area is condensed, hide all
            the rows in the full navigation list... */
    }

#views-label-container.showing-condensed-navigation:not(.does-not-exist) + #left-sidebar-navigation-list .top_left_row,.left-sidebar.zoom-in #views-label-container + #left-sidebar-navigation-list .top_left_row {
            display: none;
        }

/* ...except when there is an active filter in place:
            that row should still be shown. */

#views-label-container.showing-condensed-navigation:not(.does-not-exist) + #left-sidebar-navigation-list .top_left_row.top-left-active-filter,.left-sidebar.zoom-in #views-label-container + #left-sidebar-navigation-list .top_left_row.top-left-active-filter {
            display: grid;
            /* In the absence of auto rows in the condensed state,
                we set an explicit height on the active filter. */
            height: 1.5714em;
            height: var(--line-height-sidebar-row);
        }

#views-label-container.showing-condensed-navigation:not(.does-not-exist) .zulip-icon-heading-triangle-right,.left-sidebar.zoom-in #views-label-container .zulip-icon-heading-triangle-right {
        rotate: 0deg;
    }

#views-label-container {
    margin-right: 12px;
    margin-right: var(--left-sidebar-right-margin);
    grid-template-columns:
        0 20px 0 minmax(0, 0.5fr)
        0 minmax(0, 1fr)
        1.625em 0;
    grid-template-columns:
        0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 0.5fr)
        0 minmax(0, 1fr)
        var(--left-sidebar-vdots-width) 0;
    /* 28px at 16px/1em */
    grid-template-rows: 1.75em;
    cursor: pointer;
    border-radius: 4px;
}

#views-label-container:not(.remove-pointer-for-spectator):hover,#views-label-container:has(.left-sidebar-navigation-menu-icon[aria-expanded="true"]) {
        --csstools-light-dark-toggle--971: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--971, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
        --csstools-light-dark-toggle--783: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
        box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--783, hsla(0, 0%, 0%, 0.3));
        box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
    }

#views-label-container:has(.left-sidebar-navigation-menu-icon[aria-expanded="true"]) .left-sidebar-title {
            opacity: 0.9;
            opacity: var(--opacity-sidebar-heading-hover);
        }

#views-label-container:has(.left-sidebar-navigation-menu-icon[aria-expanded="true"]) .sidebar-heading-icon {
            opacity: 0.9;
            opacity: var(--opacity-sidebar-heading-hover);
        }

#views-label-container:not(.remove-pointer-for-spectator):hover .left-sidebar-title,#views-label-container:not(.remove-pointer-for-spectator):hover .sidebar-heading-icon {
            opacity: 0.9;
            opacity: var(--opacity-sidebar-heading-hover);
        }

/* Remove the cursor: pointer property of Views label for the spectators. */

#views-label-container.remove-pointer-for-spectator {
        cursor: default;
    }

#views-label-container #toggle-top-left-navigation-area-icon {
        grid-area: starting-anchor-element;
        /* Horizontally center the icon in its allotted grid area. */
        justify-self: center;
    }

#views-label-container .left-sidebar-title {
        grid-area: row-content;
    }

#views-label-container #left-sidebar-navigation-list-condensed {
        margin: 0;
        grid-area: markers-and-unreads;
    }

#views-label-container .left-sidebar-navigation-menu-icon {
        grid-area: ending-anchor-element;
        /* Horizontally center vdots. */
        justify-self: stretch;
        /* Properly size vdots. */
        /* 17px at 16px/1em */
        font-size: 1.0625em;
        /* Occupy same clickable height as
           other condensed-view icons */
        /* 24px at 17px/1em */
        height: 1.4118em;
        /* Vertically center dots with
           flexbox. */
        display: flex;
        align-items: center;
        justify-content: center;
        /* These margin and padding values should be
           coordinated with those on .sidebar-menu-icon. */
        margin: 2px 2px 2px 1px;
        padding-left: 1px;
        border-radius: 3px;
        --csstools-light-dark-toggle--784: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--784, hsl(240, 30%, 40%));
        color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
        color: var(--color-vdots-visible);
    }

#views-label-container .left-sidebar-navigation-menu-icon:hover {
            --csstools-light-dark-toggle--972: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
            color: hsl(240, 100%, 15%);
            color: var(--csstools-light-dark-toggle--972, hsl(240, 100%, 15%));
            color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
            color: var(--color-vdots-hover);
            --csstools-light-dark-toggle--973: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
            background-color: hsl(240, 100%, 93%);
            background-color: var(--csstools-light-dark-toggle--973, hsl(240, 100%, 93%));
            background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
            background-color: var(--color-background-sidebar-action-hover);
        }

/* When the expanded navigation is visible,
        hide the condensed navigation's controls. */

.left-sidebar:not(.zoom-in) #views-label-container.showing-expanded-navigation #left-sidebar-navigation-list-condensed,.left-sidebar:not(.zoom-in) #views-label-container.showing-expanded-navigation .left-sidebar-navigation-menu-icon {
        display: none;
    }

/* Give the sidebar title through the end of the markers
        area, if needed. */

.left-sidebar:not(.zoom-in) #views-label-container.showing-expanded-navigation .left-sidebar-title {
        grid-column: row-content-start / markers-and-unreads-end;
    }

/* When we collapsed the views section because we're zoomed in, hide
   the condensed navigation's controls (except the unread counter). */
.left-sidebar.zoom-in #views-label-container {
    grid-template-columns:
        0 20px
        0 minmax(0, 1fr) 0 minmax(0, max-content) 1.625em
        0;
    grid-template-columns:
        0 var(--left-sidebar-header-icon-toggle-width)
        0 minmax(0, 1fr) 0 minmax(0, max-content) var(
            --left-sidebar-vdots-width
        )
        0;
}
.left-sidebar.zoom-in #views-label-container .left-sidebar-navigation-condensed-item:not(.top_left_condensed_unread_marker),.left-sidebar.zoom-in #views-label-container .left-sidebar-navigation-menu-icon {
        display: none;
    }

.subscription_block {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
    grid-template-columns:
        20px 1em
        0.4375em minmax(0, 1fr) minmax(
            0,
            max-content
        )
        minmax(0, max-content)
        1.625em 0;
    grid-template-columns:
        var(--left-sidebar-toggle-width-offset) var(
            --left-sidebar-icon-column-width
        )
        var(--left-sidebar-icon-content-gap) minmax(0, 1fr) minmax(
            0,
            max-content
        )
        minmax(0, max-content)
        var(--left-sidebar-vdots-width) 0;
    white-space: nowrap;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: inherit;
}

.subscription_block:hover,.subscription_block:active {
        opacity: 1;
        -webkit-text-decoration: none;
        text-decoration: none;
        color: inherit;
    }

.subscription_block:not(:active):focus {
        -webkit-text-decoration: none;
        text-decoration: none;
        border: none;
        outline: none;
        color: inherit;
    }

.subscription_block .stream-privacy {
        grid-area: starting-anchor-element;
        display: flex;
        align-content: center;
        justify-content: center;
        place-content: center center;
    }

.subscription_block .stream-privacy .zulip-icon.zulip-icon-globe {
            /* 12px at 14px/1em */
            font-size: 0.8571em;
        }

.subscription_block .stream-privacy .zulip-icon.zulip-icon-hashtag {
            /* 13px at 14px/1em */
            font-size: 0.9286em;
        }

.subscription_block .stream-privacy .zulip-icon.zulip-icon-lock {
            /* 13px at 14px/1em */
            font-size: 0.9286em;
        }

.subscription_block .stream-name {
        grid-area: row-content;
        color: inherit;
    }

.subscription_block .stream-name:hover {
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.left-sidebar-filter-row {
    display: grid;
    /* The final 2px column keeps the filter box from going
       to the edge of the highlighted channel box, and also
       matches the right edge to the right edge of the vdots
       on the channel row. (The vdots take a 2px right margin.) */
    grid-template-columns:
        [filter-box-start] minmax(0, 1fr)
        [clear-button-start] 1.7142em
        [clear-button-end filter-box-end] 2px;
    grid-template-columns:
        [filter-box-start] minmax(0, 1fr)
        [clear-button-start] var(--line-height-sidebar-row-prominent)
        [clear-button-end filter-box-end] 2px;
    grid-template-rows: [filter-box-start clear-button-start] auto [clear-button-end filter-box-end];
    align-content: center;
}

.left-sidebar-filter-row .clear_search_button {
        grid-area: clear-button;
    }

.topic-box,
.searching-for-more-topics {
    display: grid;
    grid-template:
        "starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset" 1.7142em
        ".               .                       .                row-content .        .                   .                     .            " auto / 0 1em
        0.4375em
        minmax(0, 1fr) minmax(0, max-content) minmax(0, max-content)
        1.625em 0;
    grid-template:
        "starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset" var(
            --line-height-sidebar-row-prominent
        )
        ".               .                       .                row-content .        .                   .                     .            " auto / 0 var(
            --left-sidebar-icon-column-width
        )
        var(--left-sidebar-icon-content-gap)
        minmax(0, 1fr) minmax(0, max-content) minmax(0, max-content)
        var(--left-sidebar-vdots-width) 0;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: inherit;
}

.topic-box:active {
        opacity: 1;
        -webkit-text-decoration: none;
        text-decoration: none;
        color: inherit;
    }

.searching-for-more-topics:active {
        opacity: 1;
        -webkit-text-decoration: none;
        text-decoration: none;
        color: inherit;
    }

.topic-box:hover,.searching-for-more-topics:hover {
        opacity: 1;
        -webkit-text-decoration: none;
        text-decoration: none;
        color: inherit;
    }

.topic-box:not(:active):focus {
        -webkit-text-decoration: none;
        text-decoration: none;
        border: none;
        outline: none;
        color: inherit;
    }

.searching-for-more-topics:not(:active):focus {
        -webkit-text-decoration: none;
        text-decoration: none;
        border: none;
        outline: none;
        color: inherit;
    }

.topic-box {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}

.searching-for-more-topics {
    margin-left: 20px;
    margin-left: var(--left-sidebar-toggle-width-offset);
    height: 1.7142em;
    height: var(--line-height-sidebar-row-prominent);
}

.topic-box .zero_count {
    display: none;
}

.sidebar-topic-name {
    cursor: pointer;
    grid-area: row-content;
    padding: 0 3px 0 0;
    padding: 0 var(--left-sidebar-before-unread-count-padding) 0 0;
}

.sidebar-topic-name:hover {
        color: inherit;
    }

.sidebar-topic-name:focus {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.sidebar-topic-name .sidebar-topic-name-inner {
        /* Clamp multi-line topics to two lines. */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        /* Break overflowing words as necessary. */
        word-wrap: break-word;

        line-height: 1.2em;

        line-height: var(--line-height-sidebar-topic-inner);
        /* To avoid clipping the tops of certain characters,
           we set the top space with padding. But to make the
           line-clamp effect work, we set the bottom space
           with margin. */
        padding-top: calc(
        (
                1.7142em -
                    1.2em
            ) /
            2
    );
        padding-top: var(--spacing-top-bottom-sidebar-topic-inner);
        margin: 0 0 calc(
        (
                1.7142em -
                    1.2em
            ) /
            2
    ) 0;
        margin: 0 0 var(--spacing-top-bottom-sidebar-topic-inner) 0;
    }

.sidebar-topic-action-heading {
    --csstools-light-dark-toggle--785: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--785, hsl(240, 30%, 40%));
    color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
    color: var(--color-text-sidebar-action-heading);
    font-size: 1.0625em;
    font-size: var(--font-size-sidebar-action-heading);
    font-weight: 370;
    font-weight: var(--font-weight-sidebar-action-heading);
    font-variant: all-small-caps;
    font-variant: var(--font-variant-sidebar-action-heading);
    font-feature-settings: "c2sc", "smcp", ;
    font-feature-settings: var(--font-feature-settings-sidebar-action-heading), ;
    text-transform: uppercase;
    text-transform: var(--text-transform-sidebar-action-heading);

    cursor: pointer;
    grid-area: row-content;
    padding: 0 3px 0 0;
    padding: 0 var(--left-sidebar-before-unread-count-padding) 0 0;
    /* TODO: Consolidate these styles with conversation partners and stream name
        once grid rewrite is complete on all sidebar rows.

        Also: note that these styles will be moot for topic names once we allow
        for multiline topics. If we hold multiline topics to a certain number
        of lines, we'll likely need a JavaScript-based solution like Clamp.js
        to display an ellipsis on the final visible line. */
    white-space: nowrap;
    /* Both `hidden` and `clip` are shown for the sake
        of older browsers that do not support `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
}

.sidebar-topic-action-heading:focus {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.sidebar-topic-action-heading:hover {
        -webkit-text-decoration: none;
        text-decoration: none;
        /* Push back against a:hover color in dark_theme.css. */
        --csstools-light-dark-toggle--786: var(--csstools-color-scheme--light) hsl(240, 100%, 90%) !important;
        color: hsl(240, 100%, 15%) !important;
        color: var(--csstools-light-dark-toggle--786, hsl(240, 100%, 15%)) !important;
        color: light-dark(
        hsl(240, 100%, 15%),
        hsl(240, 100%, 90%)
    ) !important;
        color: var(--color-text-sidebar-action-heading-hover) !important;
    }

.filter-topics {
    font-weight: normal;
    font-weight: initial;
}

.searching-for-more-topics img {
    height: 16px;
    grid-area: row-content;
}

.sidebar-topic-check {
    grid-area: starting-anchor-element;
    align-self: center;
    justify-self: end;
    place-self: center end;
    /* 15px at 14px/1em */
    font-size: 1.0714em;
    /* Use background to mask part of grouping bracket. */
    padding-left: 3px;
    /* Keep background from affecting rounded corners on
       .active-sub-filter by reducing the checkbox
       line-height to match its font size. */
    line-height: 1;
    /* As a grid item, adjust the checkmark's z-index here so
       that the background color appears above the grouping
       bracket's bottom line. Its value must less than
       the z-index set on .stream-list-subsection-header */
    z-index: 1;
    /* To correct an edge case where a resolved topic is
       the last in a list of topics, we set the app background
       color on it to keep the closing topic bracket from
       getting too close to the checkmark. */
    --csstools-light-dark-toggle--584: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--584, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);
}

.left-sidebar-controls {
    grid-area: controls;
    display: grid;
    /* We won't know in advance how many controls a given
       row has, but this allows grid to generate as many
       as needed, sized to a shared icon width. */
    grid-auto-flow: column;
    grid-auto-columns: calc(1.7142em - 2px);
    grid-auto-columns: var(--left-sidebar-header-icon-width);
    grid-template-rows: 1.7142em;
    grid-template-rows: var(--line-height-sidebar-row-prominent);
    align-content: stretch;
    justify-content: stretch;
    place-content: stretch stretch;
    margin-right: 1px;
}

.dm-markers-and-unreads,
.stream-markers-and-unreads,
.topic-markers-and-unreads {
    grid-area: markers-and-unreads;
    display: flex;
    /* Present a uniform space between icons */
    gap: 5px;
    align-items: center;
    justify-content: center;
    /* Extra margin for unreads. */
    margin-right: 6.5px;
    margin-right: var(--left-sidebar-unread-offset);
}

.dm-markers-and-unreads:has(.unread_count.hide) {
        margin-right: 0;
    }

.stream-markers-and-unreads:has(.unread_count.hide) {
        margin-right: 0;
    }

.topic-markers-and-unreads:has(.unread_count.hide) {
        margin-right: 0;
    }

.dm-markers-and-unreads .unread_mention_info,.stream-markers-and-unreads .unread_mention_info,.topic-markers-and-unreads .unread_mention_info {
        /* Unset margin in favor of flex gap. */
        margin: 0;
    }

.dm-markers-and-unreads .unread_count,.stream-markers-and-unreads .unread_count,.topic-markers-and-unreads .unread_count {
        /* Height is set here by the flexbox; this
           decouples .unread_count from the app-wide
           definition. */
        height: auto;
    }

.dm-markers-and-unreads,
.conversation-partners {
    align-self: baseline;
}

#more-topics-modal .topic-box {
    grid-template:
        "starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset"
        1.7142em
        ".               .                       .                row-content .        .                   .                     .            "
        auto
        / 0.5em 1em
        0.4375em minmax(0, 1fr) minmax(
            0,
            max-content
        )
        minmax(0, max-content) 1.625em 0;
    grid-template:
        "starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset"
        var(--line-height-sidebar-row-prominent)
        ".               .                       .                row-content .        .                   .                     .            "
        auto
        / var(--input-icon-starting-offset) var(
            --left-sidebar-icon-column-width
        )
        var(--left-sidebar-icon-content-gap) minmax(0, 1fr) minmax(
            0,
            max-content
        )
        minmax(0, max-content) var(--left-sidebar-vdots-width) 0;
}

.zoomed-new-topic {
    display: grid;
    grid-template:
        "starting-offset starting-anchor-element icon-content-gap row-content ending-offset"
        1.7142em
        ".               .                       .                row-content ."
        auto
        / 0.5em 1em
        0.4375em
        minmax(0, 1fr)
        0;
    grid-template:
        "starting-offset starting-anchor-element icon-content-gap row-content ending-offset"
        var(--line-height-sidebar-row-prominent)
        ".               .                       .                row-content ."
        auto
        / var(--input-icon-starting-offset) var(
            --left-sidebar-icon-column-width
        )
        var(--left-sidebar-icon-content-gap)
        minmax(0, 1fr)
        0;
    --csstools-light-dark-toggle--787: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--787, hsl(240, 30%, 40%));
    color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
    color: var(--color-text-sidebar-action-heading);
}

.zoomed-new-topic .topic-list-new-topic-icon {
        grid-area: starting-anchor-element;
        align-self: center;
        justify-self: end;
        place-self: center end;
    }

.zoomed-new-topic .new-topic-label {
        grid-area: row-content;
        margin-top: -0.06em;
        font-size: 1.0625em;
        font-size: var(--font-size-sidebar-action-heading);
        font-weight: 370;
        font-weight: var(--font-weight-sidebar-action-heading);
        font-variant: all-small-caps;
        font-variant: var(--font-variant-sidebar-action-heading);
        font-feature-settings: "c2sc", "smcp", , ;
        font-feature-settings: var(
            --font-feature-settings-sidebar-action-heading
        ), , ;
        text-transform: uppercase;
        text-transform: var(--text-transform-sidebar-action-heading);
    }

.zoomed-new-topic:not(:active):focus {
        -webkit-text-decoration: none;
        text-decoration: none;
        border: none;
        outline: none;
    }

.zoomed-new-topic:hover,.zoomed-new-topic:focus-visible {
        border-radius: 4px;
        -webkit-text-decoration: none;
        text-decoration: none;
        --csstools-light-dark-toggle--788: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--788, hsl(240, 30%, 40%));
        color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
        color: var(--color-text-sidebar-action-heading);
    }

.channel-new-topic-button,
.channel-search-topics-button {
    /* display: flex; is set on visible channels and
       channel-row hovers. */
    display: none;
    align-items: center;
    justify-content: center;
    --csstools-light-dark-toggle--789: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--789, hsl(240, 30%, 40%));
    color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
    color: var(--color-sidebar-action);
    margin: 2px 0;
    border-radius: 3px;
}

.channel-new-topic-button:hover,.channel-search-topics-button:hover {
        --csstools-light-dark-toggle--974: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--974, hsl(240, 100%, 15%));
        color: light-dark(
        hsl(240, 100%, 15%),
        hsl(240, 100%, 90%)
    );
        color: var(--color-sidebar-action-hover);
        --csstools-light-dark-toggle--975: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
        background-color: hsl(240, 100%, 93%);
        background-color: var(--csstools-light-dark-toggle--975, hsl(240, 100%, 93%));
        background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
        background-color: var(--color-background-sidebar-action-hover);
    }

.narrow-filter:hover .channel-new-topic-button {
        display: flex;
    }

.bottom_left_row .sidebar-menu-icon {
    grid-area: ending-anchor-element;
}

.stream-list-subsection-header .sidebar-menu-icon {
    grid-area: three-dot-placeholder;
}

.stream-name {
    white-space: nowrap;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    padding: 0 3px 0 0;
    padding: 0 var(--left-sidebar-before-unread-count-padding) 0 0;
}

.conversation-partners-list {
    /* Clamp multi-line DMs to two lines. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    /* Break overflowing usernames as necessary. */
    word-wrap: break-word;

    line-height: 1.2em;

    line-height: var(--line-height-sidebar-topic-inner);
    /* To avoid clipping the tops of certain characters,
       we set the top space with padding. But to make the
       line-clamp effect work, we set the bottom space
       with margin. */
    padding: calc(
        (
                1.7142em -
                    1.2em
            ) /
            2
    )
        3px 0 0;
    padding: var(--spacing-top-bottom-sidebar-topic-inner)
        var(--left-sidebar-before-unread-count-padding) 0 0;
    margin-bottom: calc(
        (
                1.7142em -
                    1.2em
            ) /
            2
    );
    margin-bottom: var(--spacing-top-bottom-sidebar-topic-inner);
}

/*
    All of our left sidebar handlers use absolute
    positioning.  We should fix that.
*/
.bottom_left_row .sidebar-menu-icon,
.top_left_row .sidebar-menu-icon,
.stream-list-section-container .sidebar-menu-icon {
    display: none;
    cursor: pointer;
    /* Use a flex container to handle
       icon centering within the grid area.
       :hover actually sets the `display: flex`,
       so it remains hidden otherwise. */
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Ensure icons are vertically aligned, in
       case they appear in a grid definition,
       like the nav rows, that use a different
       centering regime for the row. */
    align-self: stretch;
    border-radius: 3px;
    /* These margin and padding values should be
       coordinated with those on
       .left-sidebar-navigation-menu-icon. */
    margin: 2px 2px 2px 1px;
    /* This helps horizontally align the vdots,
       given the reduced margin-left above. */
    padding-left: 1px;
    /* Set the icon size, which will be inherited
       by .zulip-icon */
    /* 17px at 16px/1em */
    font-size: 1.0625em;

    /*
        If you hover directly over the ellipsis itself,
        show it in black.
    */
}
.bottom_left_row .sidebar-menu-icon:hover,.top_left_row .sidebar-menu-icon:hover,.stream-list-section-container .sidebar-menu-icon:hover {
        --csstools-light-dark-toggle--976: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--976, hsl(240, 100%, 15%));
        color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
        color: var(--color-vdots-hover);
    }
/*
        Hover does not work for touch-based devices like mobile phones.
        Hence the icons does not appear, making the user unaware of its
        presence on such devices. The following media property displays the
        icon by default for such behaviour.
    */
@media (hover: none) {
.bottom_left_row .sidebar-menu-icon,
.top_left_row .sidebar-menu-icon,
.stream-list-section-container .sidebar-menu-icon {
        display: flex;
        /* Show dots on touchscreens in a less distracting,
           lighter shade. */
        --csstools-light-dark-toggle--790: var(--csstools-color-scheme--light) hsl(240, 35%, 38%);
        color: hsl(240, 30%, 80%);
        color: var(--csstools-light-dark-toggle--790, hsl(240, 30%, 80%));
        color: light-dark(hsl(240, 30%, 80%), hsl(240, 35%, 38%));
        color: var(--color-vdots-hint);
}
    }

.bottom_left_row .sidebar-menu-icon:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
    }

.bottom_left_row .channel-new-topic-button:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
    }

.top_left_row .sidebar-menu-icon:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
    }

.stream-list-section-container .sidebar-menu-icon:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
    }

/*
    When you hover over or keyboard-highlight a list
    item's menu icon, we give it a purple background.

    The stream icon should always display when
    any topic is hovered/highlighted, which is why
    it gets a more specific selector here.
*/
#stream_filters
    li:focus-within
    .stream-sidebar-menu-icon {
    /* We push against `display: none` with
       `display: flex` because the sidebar vdots
       all expect to be displayed as flex items
       when visible. Their vertical alignment
       depends on it, too. */
    display: flex;
    --csstools-light-dark-toggle--977: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--977, hsl(240, 30%, 40%));
    color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
    color: var(--color-vdots-visible);
}
#stream_filters
    li:has(.highlighted_row)
    .stream-sidebar-menu-icon {
    /* We push against `display: none` with
       `display: flex` because the sidebar vdots
       all expect to be displayed as flex items
       when visible. Their vertical alignment
       depends on it, too. */
    display: flex;
    --csstools-light-dark-toggle--978: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--978, hsl(240, 30%, 40%));
    color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
    color: var(--color-vdots-visible);
}
.top_left_row:focus-within .sidebar-menu-icon {
    /* We push against `display: none` with
       `display: flex` because the sidebar vdots
       all expect to be displayed as flex items
       when visible. Their vertical alignment
       depends on it, too. */
    display: flex;
    --csstools-light-dark-toggle--979: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--979, hsl(240, 30%, 40%));
    color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
    color: var(--color-vdots-visible);
}
.bottom_left_row:focus-within .sidebar-menu-icon {
    /* We push against `display: none` with
       `display: flex` because the sidebar vdots
       all expect to be displayed as flex items
       when visible. Their vertical alignment
       depends on it, too. */
    display: flex;
    --csstools-light-dark-toggle--980: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--980, hsl(240, 30%, 40%));
    color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
    color: var(--color-vdots-visible);
}
#stream_filters
    .stream-list-subsection-header:focus-within
    .sidebar-menu-icon {
    /* We push against `display: none` with
       `display: flex` because the sidebar vdots
       all expect to be displayed as flex items
       when visible. Their vertical alignment
       depends on it, too. */
    display: flex;
    --csstools-light-dark-toggle--981: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--981, hsl(240, 30%, 40%));
    color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
    color: var(--color-vdots-visible);
}
#stream_filters
    li:hover
    .stream-sidebar-menu-icon, .top_left_row:hover .sidebar-menu-icon, .top_left_row.highlighted_row .sidebar-menu-icon, .bottom_left_row:hover .sidebar-menu-icon, .bottom_left_row.highlighted_row .sidebar-menu-icon, #stream_filters
    .stream-list-subsection-header:hover
    .sidebar-menu-icon, #stream_filters
    .stream-list-subsection-header.highlighted_row
    .sidebar-menu-icon, .app-main .column-left .left-sidebar .left_sidebar_menu_icon_visible {
    /* We push against `display: none` with
       `display: flex` because the sidebar vdots
       all expect to be displayed as flex items
       when visible. Their vertical alignment
       depends on it, too. */
    display: flex;
    --csstools-light-dark-toggle--982: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
    color: hsl(240, 30%, 40%);
    color: var(--csstools-light-dark-toggle--982, hsl(240, 30%, 40%));
    color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
    color: var(--color-vdots-visible);
}
#stream_filters li:focus-within .stream-sidebar-menu-icon:not(.does-not-exist):hover {
        --csstools-light-dark-toggle--983: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--983, hsl(240, 100%, 15%));
        color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
        color: var(--color-vdots-hover);
        --csstools-light-dark-toggle--984: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
        background-color: hsl(240, 100%, 93%);
        background-color: var(--csstools-light-dark-toggle--984, hsl(240, 100%, 93%));
        background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
        background-color: var(--color-background-sidebar-action-hover);
    }
#stream_filters li:has(.highlighted_row) .stream-sidebar-menu-icon:not(.does-not-exist):hover {
        --csstools-light-dark-toggle--985: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--985, hsl(240, 100%, 15%));
        color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
        color: var(--color-vdots-hover);
        --csstools-light-dark-toggle--986: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
        background-color: hsl(240, 100%, 93%);
        background-color: var(--csstools-light-dark-toggle--986, hsl(240, 100%, 93%));
        background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
        background-color: var(--color-background-sidebar-action-hover);
    }
.top_left_row:focus-within .sidebar-menu-icon:not(#does-not-exist):hover {
        --csstools-light-dark-toggle--987: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--987, hsl(240, 100%, 15%));
        color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
        color: var(--color-vdots-hover);
        --csstools-light-dark-toggle--988: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
        background-color: hsl(240, 100%, 93%);
        background-color: var(--csstools-light-dark-toggle--988, hsl(240, 100%, 93%));
        background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
        background-color: var(--color-background-sidebar-action-hover);
    }
.bottom_left_row:focus-within .sidebar-menu-icon:not(#does-not-exist):hover {
        --csstools-light-dark-toggle--989: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--989, hsl(240, 100%, 15%));
        color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
        color: var(--color-vdots-hover);
        --csstools-light-dark-toggle--990: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
        background-color: hsl(240, 100%, 93%);
        background-color: var(--csstools-light-dark-toggle--990, hsl(240, 100%, 93%));
        background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
        background-color: var(--color-background-sidebar-action-hover);
    }
#stream_filters .stream-list-subsection-header:focus-within .sidebar-menu-icon:hover {
        --csstools-light-dark-toggle--991: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--991, hsl(240, 100%, 15%));
        color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
        color: var(--color-vdots-hover);
        --csstools-light-dark-toggle--992: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
        background-color: hsl(240, 100%, 93%);
        background-color: var(--csstools-light-dark-toggle--992, hsl(240, 100%, 93%));
        background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
        background-color: var(--color-background-sidebar-action-hover);
    }
#stream_filters li:hover .stream-sidebar-menu-icon:not(.does-not-exist):hover,.top_left_row:hover .sidebar-menu-icon:not(#does-not-exist):hover,.top_left_row.highlighted_row .sidebar-menu-icon:not(#does-not-exist):hover,.bottom_left_row:hover .sidebar-menu-icon:not(#does-not-exist):hover,.bottom_left_row.highlighted_row .sidebar-menu-icon:not(#does-not-exist):hover,#stream_filters .stream-list-subsection-header:hover .sidebar-menu-icon:hover,#stream_filters .stream-list-subsection-header.highlighted_row .sidebar-menu-icon:hover,.app-main .column-left .left-sidebar .left_sidebar_menu_icon_visible:not(#does-not-exist):hover {
        --csstools-light-dark-toggle--993: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--993, hsl(240, 100%, 15%));
        color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
        color: var(--color-vdots-hover);
        --csstools-light-dark-toggle--994: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
        background-color: hsl(240, 100%, 93%);
        background-color: var(--csstools-light-dark-toggle--994, hsl(240, 100%, 93%));
        background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
        background-color: var(--color-background-sidebar-action-hover);
    }

ul.topic-list {
    line-height: 1.7142em;
    line-height: var(--line-height-sidebar-row-prominent);
    list-style-type: none;
    font-weight: normal;
}

ul.topic-list.topic-list-has-topics::before {
    content: " ";
    display: block;
    position: absolute;
    /* 12px at 16px/1em */
    top: 0.75em;
    bottom: 0.75em;
    left: 9px;
    --csstools-light-dark-toggle--585: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.19);
    border: 1px solid hsla(0, 0%, 0%, 0.19);
    border: 1px solid var(--csstools-light-dark-toggle--585, hsla(0, 0%, 0%, 0.19));
    border: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.19),
        hsla(0, 0%, 100%, 0.19)
    );
    border: 1px solid var(--color-topic-indent-border);
    border-right: 0;
    border-radius: 9px 0 0 9px;
    width: 6px;
    pointer-events: none;
}

ul.topic-list.topic-list-has-topics::after {
    content: " ";
    display: block;
    position: absolute;
    /* -14px at 16px/1em */
    top: -0.875em;
    /* 12px at 16px/1em */
    bottom: 0.75em;
    left: 16px;
    width: 4px;
    --csstools-light-dark-toggle--586: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.19);
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.19);
    border-bottom: 1px solid var(--csstools-light-dark-toggle--586, hsla(0, 0%, 0%, 0.19));
    border-bottom: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.19),
        hsla(0, 0%, 100%, 0.19)
    );
    border-bottom: 1px solid var(--color-topic-indent-border);
    pointer-events: none;
}

ul.topic-list:has(.show-more-topics)::after {
    /* When the show all topics control is displayed,
       extend the bottom bracket. */
    width: 18px;
}

#stream_filters .narrow-filter .topic-list .bottom_left_row:has(a.sidebar-topic-action-heading:focus-visible,a.zoomed-new-topic:focus-visible) {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
        --csstools-light-dark-toggle--1112: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1112, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

#more-topics-modal:not(.does-not-exist) .topic-list .bottom_left_row:has(a.sidebar-topic-action-heading:focus-visible,a.zoomed-new-topic:focus-visible) {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
        --csstools-light-dark-toggle--1113: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1113, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

/* The grouping border should not be shown
   in the more topics modal. */
#more-topics-modal .topic-list.topic-list-has-topics::before,
#more-topics-modal .topic-list.topic-list-has-topics::after {
    border: 0;
}

li.topic-list-item {
    position: relative;
    padding-right: 5px;
    margin-left: 20px;
    margin-left: var(--left-sidebar-toggle-width-offset);
}

li.topic-list-item:has(.zoomed-new-topic) {
        /* We set a margin equal to starting-offset of filter-input to match
           its alignment */
        margin-left: calc(
            20px -
                0.5em
        );
        margin-left: calc(
            var(--left-sidebar-toggle-width-offset) -
                var(--input-icon-starting-offset)
        );
    }

.dm-box {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
    grid-template-columns:
        20px [action-heading-start] 1em
        0.4375em minmax(0, 1fr)
        [action-heading-end] 0 minmax(0, max-content)
        1.625em 0;
    grid-template-columns:
        var(--left-sidebar-toggle-width-offset) [action-heading-start] var(
            --left-sidebar-icon-column-width
        )
        var(--left-sidebar-icon-content-gap) minmax(0, 1fr)
        [action-heading-end] 0 minmax(0, max-content)
        var(--left-sidebar-vdots-width) 0;
    grid-template-rows: [action-heading-start] auto [action-heading-end];
}

.dm-box .conversation-partners-icon {
        grid-area: starting-anchor-element;
        align-self: center;
        justify-self: center;
        place-self: center;
    }

.dm-box .conversation-partners-icon:not(.user-circle) {
            align-self: start;
            justify-self: center;
            place-self: start center;
        }

.dm-box .dm-name {
        grid-area: action-heading;
    }

.dm-box .user-circle {
        /* User circles are approximately 8px at 15px/1em. */
        font-size: 0.5333em;
        align-self: start;
    }

.dm-box .unread_count {
        grid-area: markers-and-unreads;
        /* Use flexbox to vertically center
           the 12px-high text node within the
           16px-high unread box. */
        display: flex;
        align-items: center;
    }

.dm-box .unread_count:empty {
            margin-right: 0;
        }

.zero_count {
    visibility: hidden;
}

.zero-topic-unreads.show-more-topics .topic-box {
    margin-right: 30px;
}

#more-topics-modal > .channel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 1px;
    --csstools-light-dark-toggle--791: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--791, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);
}

#more-topics-modal > .channel-header:hover {
        /* Prevent hover styles set on other rows. */
        box-shadow: none;
        --csstools-light-dark-toggle--995: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background-color: hsl(0, 0%, 94%);
        background-color: var(--csstools-light-dark-toggle--995, hsl(0, 0%, 94%));
        background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background-color: var(--color-background);
    }

/* We avoid putting the box-shadow around both
        the channel row and the filter input it contains,
        as there is no hover effect on channel rows when
        zoomed in, making a preserve-the-hover-outline
        effect here moot. */

#more-topics-modal > .channel-header:has(.left_sidebar_menu_icon_visible) {
        box-shadow: none;
    }

#more-topics-modal > .channel-header .subscription_block:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        border-radius: 4px;
        --csstools-light-dark-toggle--1114: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1114, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

#more-topics-modal .bottom_left_row:last-of-type {
    /* Needed for the scroll container to not cut off the hover border */
    margin-bottom: 5px;
}

.top_left_row.hidden-by-filters {
    display: none !important;
}

#left-sidebar-navigation-area.hidden-by-filters {
    display: none;
}

#left-sidebar.direct-messages-hidden-by-filters #direct-messages-section-header,.spectator-view:not(#does-not-exist) #direct-messages-section-header {
        display: none;
    }

#left-sidebar.direct-messages-hidden-by-filters .direct-message-section-bottom-divider-container,.spectator-view:not(#does-not-exist) .direct-message-section-bottom-divider-container {
        display: none;
    }

#left-sidebar.direct-messages-hidden-by-filters .stream-list-subsection-header,.spectator-view:not(#does-not-exist) .stream-list-subsection-header {
        top: 0;
    }

#left-sidebar.zoom-in #left_sidebar_scroll_container {
        /* Hidden instead of display: none so that we scroll to the
        correct height more easily as it becomes visible again */
        visibility: hidden;
    }

#left-sidebar.zoom-in #left-sidebar-search {
        display: none;
    }

/* Show the DM header when zoomed into topics, visible behind
   the back button area */
#left-sidebar.zoom-in-topics #direct-messages-section-header {
    visibility: visible;
}

#left-sidebar-modal {
    /* Hidden instead of display: none so that we scroll to the
       correct height more easily as it becomes visible again */
    visibility: hidden;
}

/* The two modals have different top paddings */
#left-sidebar.zoom-in-conversations #left-sidebar-modal .left-sidebar-modal-close-area,#left-sidebar.direct-messages-hidden-by-filters #left-sidebar-modal .left-sidebar-modal-close-area,.spectator-view #left-sidebar-modal:not(#does-not-exist) .left-sidebar-modal-close-area {
        padding-top: calc(
        1.9em + 10px
    );
        padding-top: var(--left-sidebar-modal-close-area-padding-top);
    }
#left-sidebar.zoom-in-conversations #left-sidebar-modal #left-sidebar-modal-content,#left-sidebar.direct-messages-hidden-by-filters #left-sidebar-modal #left-sidebar-modal-content,.spectator-view #left-sidebar-modal:not(#does-not-exist) #left-sidebar-modal-content {
        height: calc(
            100dvh - (
        2.5em + 0px
    ) -
                (
        1.9em + 10px
    ) -
                1.9em
        );
        height: calc(
            100dvh - calc(
        2.5em + 0px
    ) -
                calc(
        1.9em + 10px
    ) -
                1.9em
        );
        height: calc(
            100dvh - var(--navbar-fixed-height) -
                var(--left-sidebar-modal-close-area-padding-top) -
                var(--left-sidebar-modal-close-area-height)
        );
        --csstools-light-dark-toggle--996:
            var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
        --csstools-light-dark-toggle--997:
            var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        --csstools-light-dark-toggle--998:
            var(--csstools-color-scheme--light) hsla(0, 0%, 11%, 0.3);
        box-shadow:
            0 -0.2em 0.75em 0 hsla(0, 0%, 0%, 0.2),
            0 -2.5em 1em 0 hsl(0, 0%, 94%),
            0 -4em 1em 0 hsla(0, 0%, 94%, 0.2);
        box-shadow:
            0 -0.2em 0.75em 0 var(--csstools-light-dark-toggle--996, hsla(0, 0%, 0%, 0.2)),
            0 -2.5em 1em 0 var(--csstools-light-dark-toggle--997, hsl(0, 0%, 94%)),
            0 -4em 1em 0 var(--csstools-light-dark-toggle--998, hsla(0, 0%, 94%, 0.2));
        box-shadow:
            0 -0.2em 0.75em 0 light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 0%, 0.8)
    ),
            0 -2.5em 1em 0 light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%)),
            0 -4em 1em 0 light-dark(
        hsla(0, 0%, 94%, 0.2),
        hsla(0, 0%, 11%, 0.3)
    );
        box-shadow:
            0 -0.2em 0.75em 0 var(--color-left-sidebar-inner-box-shadow),
            0 -2.5em 1em 0 var(--color-left-sidebar-middle-box-shadow),
            0 -4em 1em 0 var(--color-left-sidebar-outer-box-shadow);
    }
#left-sidebar.zoom-in-conversations #left-sidebar-modal .left-sidebar-modal-close-area:focus-visible + #left-sidebar-modal-content {
        --csstools-light-dark-toggle--999:
            var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
        --csstools-light-dark-toggle--1000:
            var(--csstools-color-scheme--light) hsl(240, 19%, 24%);
        --csstools-light-dark-toggle--1001:
            var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
        box-shadow:
            0 -0.2em 0.75em 0 hsla(0, 0%, 0%, 0.2),
            0 -2.5em 1em 0 hsl(244, 36%, 91%),
            0 -4em 1em 0 hsla(240, 100%, 50%, 0.07);
        box-shadow:
            0 -0.2em 0.75em 0 var(--csstools-light-dark-toggle--999, hsla(0, 0%, 0%, 0.2)),
            0 -2.5em 1em 0 var(--csstools-light-dark-toggle--1000, hsl(244, 36%, 91%)),
            0 -4em 1em 0 var(--csstools-light-dark-toggle--1001, hsla(240, 100%, 50%, 0.07));
        box-shadow:
            0 -0.2em 0.75em 0 light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 0%, 0.8)
    ),
            0 -2.5em 1em 0 light-dark(
        hsl(244, 36%, 91%),
        hsl(240, 19%, 24%)
    ),
            0 -4em 1em 0 light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
        box-shadow:
            0 -0.2em 0.75em 0 var(--color-left-sidebar-inner-box-shadow),
            0 -2.5em 1em 0 var(--color-left-sidebar-middle-box-shadow-hover),
            0 -4em 1em 0 var(--color-left-sidebar-outer-box-shadow-hover);
    }
#left-sidebar.direct-messages-hidden-by-filters #left-sidebar-modal .left-sidebar-modal-close-area:focus-visible + #left-sidebar-modal-content {
        --csstools-light-dark-toggle--1002:
            var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
        --csstools-light-dark-toggle--1003:
            var(--csstools-color-scheme--light) hsl(240, 19%, 24%);
        --csstools-light-dark-toggle--1004:
            var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
        box-shadow:
            0 -0.2em 0.75em 0 hsla(0, 0%, 0%, 0.2),
            0 -2.5em 1em 0 hsl(244, 36%, 91%),
            0 -4em 1em 0 hsla(240, 100%, 50%, 0.07);
        box-shadow:
            0 -0.2em 0.75em 0 var(--csstools-light-dark-toggle--1002, hsla(0, 0%, 0%, 0.2)),
            0 -2.5em 1em 0 var(--csstools-light-dark-toggle--1003, hsl(244, 36%, 91%)),
            0 -4em 1em 0 var(--csstools-light-dark-toggle--1004, hsla(240, 100%, 50%, 0.07));
        box-shadow:
            0 -0.2em 0.75em 0 light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 0%, 0.8)
    ),
            0 -2.5em 1em 0 light-dark(
        hsl(244, 36%, 91%),
        hsl(240, 19%, 24%)
    ),
            0 -4em 1em 0 light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
        box-shadow:
            0 -0.2em 0.75em 0 var(--color-left-sidebar-inner-box-shadow),
            0 -2.5em 1em 0 var(--color-left-sidebar-middle-box-shadow-hover),
            0 -4em 1em 0 var(--color-left-sidebar-outer-box-shadow-hover);
    }
.spectator-view #left-sidebar-modal:not(#does-not-exist) .left-sidebar-modal-close-area:focus-visible + #left-sidebar-modal-content {
        --csstools-light-dark-toggle--1005:
            var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
        --csstools-light-dark-toggle--1006:
            var(--csstools-color-scheme--light) hsl(240, 19%, 24%);
        --csstools-light-dark-toggle--1007:
            var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
        box-shadow:
            0 -0.2em 0.75em 0 hsla(0, 0%, 0%, 0.2),
            0 -2.5em 1em 0 hsl(244, 36%, 91%),
            0 -4em 1em 0 hsla(240, 100%, 50%, 0.07);
        box-shadow:
            0 -0.2em 0.75em 0 var(--csstools-light-dark-toggle--1005, hsla(0, 0%, 0%, 0.2)),
            0 -2.5em 1em 0 var(--csstools-light-dark-toggle--1006, hsl(244, 36%, 91%)),
            0 -4em 1em 0 var(--csstools-light-dark-toggle--1007, hsla(240, 100%, 50%, 0.07));
        box-shadow:
            0 -0.2em 0.75em 0 light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 0%, 0.8)
    ),
            0 -2.5em 1em 0 light-dark(
        hsl(244, 36%, 91%),
        hsl(240, 19%, 24%)
    ),
            0 -4em 1em 0 light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
        box-shadow:
            0 -0.2em 0.75em 0 var(--color-left-sidebar-inner-box-shadow),
            0 -2.5em 1em 0 var(--color-left-sidebar-middle-box-shadow-hover),
            0 -4em 1em 0 var(--color-left-sidebar-outer-box-shadow-hover);
    }
/* Don't show hover style on touch screens */
@media (hover: hover) and (pointer: fine) {
        #left-sidebar.zoom-in-conversations #left-sidebar-modal .left-sidebar-modal-close-area:hover + #left-sidebar-modal-content,#left-sidebar.direct-messages-hidden-by-filters #left-sidebar-modal .left-sidebar-modal-close-area:hover + #left-sidebar-modal-content,.spectator-view #left-sidebar-modal:not(#does-not-exist) .left-sidebar-modal-close-area:hover + #left-sidebar-modal-content {
            --csstools-light-dark-toggle--1008:
                var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
            --csstools-light-dark-toggle--1009:
                var(--csstools-color-scheme--light) hsl(240, 19%, 24%);
            --csstools-light-dark-toggle--1010:
                var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
            box-shadow:
                0 -0.2em 0.75em 0 hsla(0, 0%, 0%, 0.2),
                0 -2.5em 1em 0 hsl(244, 36%, 91%),
                0 -4em 1em 0 hsla(240, 100%, 50%, 0.07);
            box-shadow:
                0 -0.2em 0.75em 0 var(--csstools-light-dark-toggle--1008, hsla(0, 0%, 0%, 0.2)),
                0 -2.5em 1em 0 var(--csstools-light-dark-toggle--1009, hsl(244, 36%, 91%)),
                0 -4em 1em 0 var(--csstools-light-dark-toggle--1010, hsla(240, 100%, 50%, 0.07));
            box-shadow:
                0 -0.2em 0.75em 0 light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 0%, 0.8)
    ),
                0 -2.5em 1em 0 light-dark(
        hsl(244, 36%, 91%),
        hsl(240, 19%, 24%)
    ),
                0 -4em 1em 0 light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
            box-shadow:
                0 -0.2em 0.75em 0 var(--color-left-sidebar-inner-box-shadow),
                0 -2.5em 1em 0 var(--color-left-sidebar-middle-box-shadow-hover),
                0 -4em 1em 0 var(--color-left-sidebar-outer-box-shadow-hover);
        }
    }

/* The topic menu leaves space to see the DM section (if it's visible) by
   padding the sidebar row height to the close section's upper padding. */
body:not(.spectator-view) #left-sidebar.zoom-in-topics:not(.direct-messages-hidden-by-filters) #left-sidebar-modal .left-sidebar-modal-close-area {
        /* Avoid annoying flash of gray in the close area
           on iOS/iPadOS */
        -webkit-tap-highlight-color: transparent;
        padding-top: calc(
            (
        1.9em + 10px
    ) +
                1.7142em
        );
        padding-top: calc(
            calc(
        1.9em + 10px
    ) +
                1.7142em
        );
        padding-top: calc(
            var(--left-sidebar-modal-close-area-padding-top) +
                var(--line-height-sidebar-row-prominent)
        );
    }
body:not(.spectator-view) #left-sidebar.zoom-in-topics:not(.direct-messages-hidden-by-filters) #left-sidebar-modal #left-sidebar-modal-content {
        height: calc(
            100dvh - (
        2.5em + 0px
    ) -
                (
        1.9em + 10px
    ) -
                1.9em -
                1.7142em
        );
        height: calc(
            100dvh - calc(
        2.5em + 0px
    ) -
                calc(
        1.9em + 10px
    ) -
                1.9em -
                1.7142em
        );
        height: calc(
            100dvh - var(--navbar-fixed-height) -
                var(--left-sidebar-modal-close-area-padding-top) -
                var(--left-sidebar-modal-close-area-height) -
                var(--line-height-sidebar-row-prominent)
        );
        --csstools-light-dark-toggle--1011:
            var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
        --csstools-light-dark-toggle--1012:
            var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        --csstools-light-dark-toggle--1013:
            var(--csstools-color-scheme--light) hsla(0, 0%, 11%, 0.3);
        box-shadow:
            0 -0.2em 0.75em 0 hsla(0, 0%, 0%, 0.2),
            0 -2.5em 1em 0 hsl(0, 0%, 94%),
            0 -5.5em 1em 0 hsla(0, 0%, 94%, 0.2);
        box-shadow:
            0 -0.2em 0.75em 0 var(--csstools-light-dark-toggle--1011, hsla(0, 0%, 0%, 0.2)),
            0 -2.5em 1em 0 var(--csstools-light-dark-toggle--1012, hsl(0, 0%, 94%)),
            0 -5.5em 1em 0 var(--csstools-light-dark-toggle--1013, hsla(0, 0%, 94%, 0.2));
        box-shadow:
            0 -0.2em 0.75em 0 light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 0%, 0.8)
    ),
            0 -2.5em 1em 0 light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%)),
            0 -5.5em 1em 0 light-dark(
        hsla(0, 0%, 94%, 0.2),
        hsla(0, 0%, 11%, 0.3)
    );
        box-shadow:
            0 -0.2em 0.75em 0 var(--color-left-sidebar-inner-box-shadow),
            0 -2.5em 1em 0 var(--color-left-sidebar-middle-box-shadow),
            0 -5.5em 1em 0 var(--color-left-sidebar-outer-box-shadow);
    }
body:not(.spectator-view) #left-sidebar.zoom-in-topics:not(.direct-messages-hidden-by-filters) #left-sidebar-modal .left-sidebar-modal-close-area:focus-visible + #left-sidebar-modal-content {
        --csstools-light-dark-toggle--1014:
            var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
        --csstools-light-dark-toggle--1015:
            var(--csstools-color-scheme--light) hsl(240, 19%, 24%);
        --csstools-light-dark-toggle--1016:
            var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
        box-shadow:
            0 -0.2em 0.75em 0 hsla(0, 0%, 0%, 0.2),
            0 -2.5em 1em 0 hsl(244, 36%, 91%),
            0 -5.5em 1em 0 hsla(240, 100%, 50%, 0.07);
        box-shadow:
            0 -0.2em 0.75em 0 var(--csstools-light-dark-toggle--1014, hsla(0, 0%, 0%, 0.2)),
            0 -2.5em 1em 0 var(--csstools-light-dark-toggle--1015, hsl(244, 36%, 91%)),
            0 -5.5em 1em 0 var(--csstools-light-dark-toggle--1016, hsla(240, 100%, 50%, 0.07));
        box-shadow:
            0 -0.2em 0.75em 0 light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 0%, 0.8)
    ),
            0 -2.5em 1em 0 light-dark(
        hsl(244, 36%, 91%),
        hsl(240, 19%, 24%)
    ),
            0 -5.5em 1em 0 light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
        box-shadow:
            0 -0.2em 0.75em 0 var(--color-left-sidebar-inner-box-shadow),
            0 -2.5em 1em 0 var(--color-left-sidebar-middle-box-shadow-hover),
            0 -5.5em 1em 0 var(--color-left-sidebar-outer-box-shadow-hover);
    }
/* Don't show hover style on touch screens */
@media (hover: hover) and (pointer: fine) {
        body:not(.spectator-view) #left-sidebar.zoom-in-topics:not(.direct-messages-hidden-by-filters) #left-sidebar-modal .left-sidebar-modal-close-area:hover + #left-sidebar-modal-content {
            --csstools-light-dark-toggle--1017:
                var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
            --csstools-light-dark-toggle--1018:
                var(--csstools-color-scheme--light) hsl(240, 19%, 24%);
            --csstools-light-dark-toggle--1019:
                var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
            box-shadow:
                0 -0.2em 0.75em 0 hsla(0, 0%, 0%, 0.2),
                0 -2.5em 1em 0 hsl(244, 36%, 91%),
                0 -5.5em 1em 0 hsla(240, 100%, 50%, 0.07);
            box-shadow:
                0 -0.2em 0.75em 0 var(--csstools-light-dark-toggle--1017, hsla(0, 0%, 0%, 0.2)),
                0 -2.5em 1em 0 var(--csstools-light-dark-toggle--1018, hsl(244, 36%, 91%)),
                0 -5.5em 1em 0 var(--csstools-light-dark-toggle--1019, hsla(240, 100%, 50%, 0.07));
            box-shadow:
                0 -0.2em 0.75em 0 light-dark(
        hsla(0, 0%, 0%, 0.2),
        hsla(0, 0%, 0%, 0.8)
    ),
                0 -2.5em 1em 0 light-dark(
        hsl(244, 36%, 91%),
        hsl(240, 19%, 24%)
    ),
                0 -5.5em 1em 0 light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
            box-shadow:
                0 -0.2em 0.75em 0 var(--color-left-sidebar-inner-box-shadow),
                0 -2.5em 1em 0 var(--color-left-sidebar-middle-box-shadow-hover),
                0 -5.5em 1em 0 var(--color-left-sidebar-outer-box-shadow-hover);
        }
    }

@container app (width <= 26.5625em) {
    .left-sidebar-modal-close-area .zulip-icon-close {
        margin-right: 5px;
    }
}

#left-sidebar.zoom-in-topics #left-sidebar-modal,
#left-sidebar.zoom-in-conversations #left-sidebar-modal {
    position: absolute;
    visibility: visible;
    left: 0;
    top: calc(
        2.5em + 0px
    );
    top: var(--navbar-fixed-height);
    width: min(33.3333vw, calc(
        20.6429em - 12px
    ));
    width: var(--left-sidebar-width);
}

#left-sidebar.zoom-in-topics #left-sidebar-modal .left-sidebar-modal-close-area,#left-sidebar.zoom-in-conversations #left-sidebar-modal .left-sidebar-modal-close-area {
        position: relative;
        z-index: 1;
        height: 1.9em;
        height: var(--left-sidebar-modal-close-area-height);
        display: flex;
        margin: 0 10px;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9375em; /* 15px at 16px/em */
        font-weight: 600;
        letter-spacing: 0.75px;
    }

#left-sidebar.zoom-in-topics #left-sidebar-modal .left-sidebar-modal-close-area:hover,#left-sidebar.zoom-in-conversations #left-sidebar-modal .left-sidebar-modal-close-area:hover {
            cursor: pointer;
        }

#left-sidebar.zoom-in-topics #left-sidebar-modal .left-sidebar-modal-close-area .left-sidebar-modal-back,#left-sidebar.zoom-in-conversations #left-sidebar-modal .left-sidebar-modal-close-area .left-sidebar-modal-back {
            display: flex;
            align-items: center;
        }

#left-sidebar.zoom-in-topics #left-sidebar-modal #direct-messages-modal-section-header,#left-sidebar.zoom-in-conversations #left-sidebar-modal #direct-messages-modal-section-header,#left-sidebar.zoom-in-topics #left-sidebar-modal .channel-header,#left-sidebar.zoom-in-conversations #left-sidebar-modal .channel-header {
        margin-top: 5px;
        grid-area: section-header;
    }

#left-sidebar.zoom-in-topics #left-sidebar-modal .modal-direct-messages-list,#left-sidebar.zoom-in-conversations #left-sidebar-modal .modal-direct-messages-list,#left-sidebar.zoom-in-topics #left-sidebar-modal .topic-list-scroll-container,#left-sidebar.zoom-in-conversations #left-sidebar-modal .topic-list-scroll-container {
        grid-area: conversation-list;
    }

#left-sidebar.zoom-in-topics #left-sidebar-modal .channel-header,#left-sidebar.zoom-in-conversations #left-sidebar-modal .channel-header {
        /* Override the usual hover behavior for the first row (topic name and search bar)
        and its popover. */
        box-shadow: none;
        --csstools-light-dark-toggle--1020: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background-color: hsl(0, 0%, 94%);
        background-color: var(--csstools-light-dark-toggle--1020, hsl(0, 0%, 94%));
        background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background-color: var(--color-background);
        /* For the scrollbar */
        margin-right: 12px;
        margin-right: var(--left-sidebar-right-margin);
    }

#left-sidebar.zoom-in-topics #left-sidebar-modal #left-sidebar-modal-content,#left-sidebar.zoom-in-conversations #left-sidebar-modal #left-sidebar-modal-content {
        padding: 0 0 5px 5px;
        --csstools-light-dark-toggle--1021: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background: hsl(0, 0%, 94%);
        background: var(--csstools-light-dark-toggle--1021, hsl(0, 0%, 94%));
        background: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background: var(--color-background);
        border-radius: 6px 6px 0 0;
    }

#left-sidebar.zoom-in-topics #left-sidebar-modal .left-sidebar-modal-close-area:focus-visible {
        outline: none;
    }

#left-sidebar.zoom-in-conversations #left-sidebar-modal .left-sidebar-modal-close-area:focus-visible {
        outline: none;
    }

/* Remove extra left spacing */

#left-sidebar.zoom-in-topics #left-sidebar-modal .subscription_block,#left-sidebar.zoom-in-conversations #left-sidebar-modal .subscription_block {
        grid-template-columns:
            0.5em 1em 0.4375em
            minmax(0, 1fr) minmax(0, max-content) minmax(0, max-content) 1.625em
            0;
        grid-template-columns:
            0.5em var(--left-sidebar-icon-column-width) var(
                --left-sidebar-icon-content-gap
            )
            minmax(0, 1fr) minmax(0, max-content) minmax(0, max-content) var(
                --left-sidebar-vdots-width
            )
            0;
    }

#left-sidebar.zoom-in-topics #left-sidebar-modal .topic-list,#left-sidebar.zoom-in-conversations #left-sidebar-modal .topic-list {
        margin-bottom: calc(
        (calc(20 / 14) * 1em) + 0.3571em
    );
        margin-bottom: var(--left-sidebar-bottom-scrolling-buffer);
    }

#left-sidebar.zoom-in-topics #left-sidebar-modal .topic-list-item,#left-sidebar.zoom-in-conversations #left-sidebar-modal .topic-list-item {
        padding-right: 0;
        margin-right: 12px;
        margin-right: var(--left-sidebar-right-margin);
    }

/* Override default margin when in the modal. */

#left-sidebar.zoom-in-topics #left-sidebar-modal .topic-list,#left-sidebar.zoom-in-conversations #left-sidebar-modal .topic-list,#left-sidebar.zoom-in-topics #left-sidebar-modal .topic-list-item,#left-sidebar.zoom-in-conversations #left-sidebar-modal .topic-list-item {
        margin-left: 0;
    }

/* Always show the new topic button and header menu icon for the modal view. */

#left-sidebar.zoom-in-topics #left-sidebar-modal .channel-new-topic-button,#left-sidebar.zoom-in-conversations #left-sidebar-modal .channel-new-topic-button {
        display: flex;
    }

#left-sidebar.zoom-in-topics #left-sidebar-modal .channel-header .sidebar-menu-icon,#left-sidebar.zoom-in-conversations #left-sidebar-modal .channel-header .sidebar-menu-icon {
        display: flex;
        --csstools-light-dark-toggle--1022: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--1022, hsl(240, 30%, 40%));
        color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
        color: var(--color-vdots-visible);
    }

/* No hover effect on the label */

#left-sidebar-menu-popover .display-style-selector-header:hover {
        background: inherit;
        cursor: default;
    }

#left-sidebar-menu-popover .popover-menu-link:not(.display-style-selector-header) {
        display: grid;
        grid-template: "left-icon row-content" auto / 1.125em minmax(
                max-content,
                1fr
            );
        align-items: center;
    }

#left-sidebar-menu-popover .popover-menu-link:not(.display-style-selector-header) .popover-menu-label {
            grid-area: row-content;
        }

/* ---- right_sidebar.css ---- */
:root {
    /* Width of emoji used by user to display status. */
    --user-status-emoji-width: 24px;
}

.right-sidebar a:hover {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.right-sidebar-items {
    padding-left: 2px;
    padding-left: var(--right-sidebar-padding-left);
}

.right-sidebar-title {
    --csstools-light-dark-toggle--587: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
    color: hsl(216, 65%, 20%);
    color: var(--csstools-light-dark-toggle--587, hsl(216, 65%, 20%));
    color: light-dark(
        hsl(216, 65%, 20%),
        hsl(216, 50%, 75%)
    );
    color: var(--color-text-sidebar-heading);
    opacity: 0.7;
    opacity: var(--opacity-sidebar-heading);
    font-size: inherit;
    font-weight: 600;
    font-weight: var(--font-weight-sidebar-heading);
    letter-spacing: 0.0469em;
    letter-spacing: var(--letter-spacing-sidebar-heading);
}

#buddy_list_wrapper {
    position: relative;
    margin-left: 0;
    overflow: auto;
}

.buddy-list-section-toggle.zulip-icon-heading-triangle-right {
    transition:
        opacity 140ms linear, rotate 140ms linear;
}

.buddy-list-section-toggle.zulip-icon-heading-triangle-right.rotate-icon-down {
        rotate: 90deg;
    }

.buddy-list-section-toggle.zulip-icon-heading-triangle-right.rotate-icon-right {
        rotate: 0deg;
    }

.buddy-list-section-toggle {
    grid-area: arrow;
    justify-self: center;
    --csstools-light-dark-toggle--792: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
    color: hsl(216, 65%, 20%);
    color: var(--csstools-light-dark-toggle--792, hsl(216, 65%, 20%));
    color: light-dark(
        hsl(216, 65%, 20%),
        hsl(216, 50%, 75%)
    );
    color: var(--color-text-sidebar-heading);
    opacity: 0.5;
    opacity: var(--opacity-sidebar-heading-icon);
}

.buddy-list-section-toggle:focus {
        outline: 0;
    }

.buddy-list-section-toggle:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
    }

.buddy-list-section-container {
    /* This establishes better visual concord with
       the left sidebar's spacing between a last
       channel/topic and the header that follows. */
    margin-bottom: 3px;
}

.buddy-list-section-container.no-display {
        display: none;
    }

.buddy-list-section-container.collapsed .buddy-list-section,.buddy-list-section-container.collapsed .buddy-list-user-link {
        display: none;
    }

.buddy-list-section .user_sidebar_entry:not(#does-not-exist) .user-list-sidebar-menu-icon,#userlist-header .user-list-sidebar-menu-icon {
        justify-self: stretch;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 2px 2px 2px 1px;
        /* This helps horizontally align the vdots,
           given the reduced margin-left above.
           Vertical centering looks better with an
           extra pixel of top padding in this area,
           too. */
        padding: 1px 0 0 1px;
        border-radius: 3px;
    }

.buddy-list-section .user_sidebar_entry:not(#does-not-exist) .user-list-sidebar-menu-icon .zulip-icon-more-vertical,#userlist-header .user-list-sidebar-menu-icon .zulip-icon-more-vertical {
            /* 17px at 16px em */
            font-size: 1.0625em;
        }

.buddy-list-section .user_sidebar_entry:not(#does-not-exist) .user-list-sidebar-menu-icon:focus-visible {
            outline: 2px solid hsl(215, 47%, 50%);
            outline: 2px solid var(--color-outline-focus);
        }

#userlist-header .user-list-sidebar-menu-icon:focus-visible {
            outline: 2px solid hsl(215, 47%, 50%);
            outline: 2px solid var(--color-outline-focus);
        }

/*
        Hover does not work for touch-based devices like mobile phones.
        Hence the icons does not appear, making the user unaware of its
        presence on such devices. The following media property displays the
        icon by default for such behaviour.
        */

@media (hover: none) {

.buddy-list-section .user_sidebar_entry:not(#does-not-exist) .user-list-sidebar-menu-icon,#userlist-header .user-list-sidebar-menu-icon {
            visibility: visible;
            /* Show dots on touchscreens in a less distracting,
               lighter shade. */
            --csstools-light-dark-toggle--1023: var(--csstools-color-scheme--light) hsl(240, 35%, 38%);
            color: hsl(240, 30%, 80%);
            color: var(--csstools-light-dark-toggle--1023, hsl(240, 30%, 80%));
            color: light-dark(hsl(240, 30%, 80%), hsl(240, 35%, 38%));
            color: var(--color-vdots-hint);
    }
        }

.buddy-list-section .user_sidebar_entry:not(#does-not-exist):hover .user-list-sidebar-menu-icon,#userlist-header:hover .user-list-sidebar-menu-icon {
            cursor: pointer;
            --csstools-light-dark-toggle--1024: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
            color: hsl(240, 30%, 40%);
            color: var(--csstools-light-dark-toggle--1024, hsl(240, 30%, 40%));
            color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
            color: var(--color-vdots-visible);
        }

.buddy-list-section .user_sidebar_entry:not(#does-not-exist):hover .user-list-sidebar-menu-icon:hover,#userlist-header:hover .user-list-sidebar-menu-icon:hover {
                --csstools-light-dark-toggle--1025: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
                color: hsl(240, 100%, 15%);
                color: var(--csstools-light-dark-toggle--1025, hsl(240, 100%, 15%));
                color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
                color: var(--color-vdots-hover);
                --csstools-light-dark-toggle--1026: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
                background-color: hsl(240, 100%, 93%);
                background-color: var(--csstools-light-dark-toggle--1026, hsl(240, 100%, 93%));
                background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
                background-color: var(--color-background-sidebar-action-hover);
            }

.buddy-list-section {
    margin: 0;
    overflow-x: hidden;
    list-style-position: inside; /* Draw the bullets inside our box */
    line-height: 1.5714em;
    line-height: var(--line-height-sidebar-row);
}

.buddy-list-section .user-list-sidebar-menu-icon {
        visibility: hidden;
    }

.buddy-list-section li:focus-within .user-list-sidebar-menu-icon {
            visibility: visible;
        }

.buddy-list-section li:hover .user-list-sidebar-menu-icon,.buddy-list-section li.highlighted_user .user-list-sidebar-menu-icon {
            visibility: visible;
        }

.buddy-list-section li {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        list-style-type: none;
        border-radius: 4px;
        padding: 0;
    }

.buddy-list-section li:focus-within {
            --csstools-light-dark-toggle--1115: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 97%);
            background-color: var(--csstools-light-dark-toggle--1115, hsl(0, 0%, 97%));
            background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-buddy-list-highlighted-user);
            --csstools-light-dark-toggle--1027: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
            box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
            box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--1027, hsla(0, 0%, 0%, 0.3));
            box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
            box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
        }

.buddy-list-section li.narrow-filter:has(a.user-presence-link:focus-visible) {
            --csstools-light-dark-toggle--1116: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 97%);
            background-color: var(--csstools-light-dark-toggle--1116, hsl(0, 0%, 97%));
            background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-buddy-list-highlighted-user);
            --csstools-light-dark-toggle--1028: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
            box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
            box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--1028, hsla(0, 0%, 0%, 0.3));
            box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
            box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
        }

.buddy-list-section li:hover,.buddy-list-section li.highlighted_user {
            --csstools-light-dark-toggle--1117: var(--csstools-color-scheme--light) rgb(46, 46, 46);
            background-color: hsl(0, 0%, 97%);
            background-color: var(--csstools-light-dark-toggle--1117, hsl(0, 0%, 97%));
            background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
            background-color: var(--color-buddy-list-highlighted-user);
            --csstools-light-dark-toggle--1029: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
            box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
            box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--1029, hsla(0, 0%, 0%, 0.3));
            box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
            box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
        }

.buddy-list-section li.narrow-filter:has(a.user-presence-link:focus-visible) {
            outline: 2px solid hsl(215, 47%, 50%);
            outline: 2px solid var(--color-outline-focus);
            outline-offset: -2px;
        }

.buddy-list-section li.highlighted_user {
            outline: 2px solid hsl(215, 47%, 50%);
            outline: 2px solid var(--color-outline-focus);
            outline-offset: -2px;
        }

.buddy-list-section .narrow-filter a.user-presence-link:focus {
            outline: none;
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.buddy-list-section .user-circle {
        grid-area: starting-anchor-element;
        align-self: center;
        justify-self: center;
        place-self: center center;
        /* Tighten the line-height to match the icon's size... */
        line-height: 1;
        /* ...which is approximately 8px at 15px/1em in Vlad's design. */
        font-size: 0.5333em;
    }

.buddy-list-section .user_sidebar_entry.with_avatar .user-profile-picture-container {
            /* Establish positioning context for user circle. */
            position: relative;
            /* TODO: Express this as part of the grid on
               .selectable_sidebar_block. */
            margin-right: 0.85ch;
            margin-right: var(--right-sidebar-avatar-right-margin);
        }

.buddy-list-section .user_sidebar_entry.with_avatar .user-profile-picture-container:not(:has(.user-circle-offline)) .user-profile-picture {
                /* The over-avatar user circle width is 15.5px at 20px/1em;
                   we adjust the border radius here to avoid any pixels
                   from the avatar bleeding through. */
                border-bottom-right-radius: 0.3875em; /* 7.75px at 20px/1em */
            }

.buddy-list-section .user_sidebar_entry.with_avatar .user-profile-picture {
            /* Push back on the margin-right usually allotted here;
               we put it on .user-profile-picture-container instead,
               so that user circles occupy the corner of the image. */
            margin-right: 0;
        }

.buddy-list-section .user_sidebar_entry.with_avatar .user-circle {
            position: absolute;
            /* 10px at 16px/1em */
            font-size: 0.625em;
            bottom: -0.5px;
            right: -0.5px;
            --csstools-light-dark-toggle--1030: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
            background-color: hsl(0, 0%, 94%);
            background-color: var(--csstools-light-dark-toggle--1030, hsl(0, 0%, 94%));
            background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
            background-color: var(--color-background);
            /* A 1.5px border provides better results than
               a 1px border, especially at smaller font sizes. */
            --csstools-light-dark-toggle--1031: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
            border: 1.5px solid hsl(0, 0%, 94%);
            border: 1.5px solid var(--csstools-light-dark-toggle--1031, hsl(0, 0%, 94%));
            border: 1.5px solid light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
            border: 1.5px solid var(--color-background);
            border-radius: 50%;
        }

.buddy-list-section .user_sidebar_entry.with_avatar .user-circle.user-circle-offline {
                display: none;
            }

/* Overwrite some stray list rules (including one in left_sidebar.css) to turn color
       back to the bootstrap default. */

.buddy-list-section .view-all-subscribers-link,.buddy-list-section .view-all-users-link {
        color: hsl(200, 100%, 40%);
        color: var(--color-text-url);
    }

.buddy-list-section .view-all-subscribers-link:hover,.buddy-list-section .view-all-users-link:hover {
            /* Prevent hover styles set on other rows until
               the right sidebar matches the action-heading typography
               of the left sidebar. */
            box-shadow: none;
            background-color: inherit;
            --csstools-light-dark-toggle--1032: var(--csstools-color-scheme--light) hsl(200, 79%, 66%);
            color: hsl(200, 100%, 25%);
            color: var(--csstools-light-dark-toggle--1032, hsl(200, 100%, 25%));
            color: light-dark(
        hsl(200, 100%, 25%),
        hsl(200, 79%, 66%)
    );
            color: var(--color-text-url-hover);
        }

#left-sidebar-empty-list-message {
    list-style-type: none;
    padding-top: 10px;
    text-align: center;
}

#left-sidebar-empty-list-message .empty-list-message,
.buddy-list-section .empty-list-message {
    font-style: italic;
    color: var(--color-text-empty-list-message);
    /* Overwrite default empty list font size, to look better under the subheaders. */
    /* 14px at 16px/1em */
    font-size: 0.875em;
    /* Override .empty-list-message !important styling */
    padding: 0 !important;
    text-align: left;
}

#left-sidebar-empty-list-message .empty-list-message:hover,.buddy-list-section .empty-list-message:not(#does-not-exist):hover {
        /* Prevent hover styles set on other rows. */
        box-shadow: none;
        background-color: inherit;
    }

.buddy-list-subsection-header {
    display: grid;
    align-items: center;
    grid-template:
        "arrow row-content scroll-buffer" 1.7142em
        / 20px minmax(0, 1fr);
    grid-template:
        "arrow row-content scroll-buffer" var(
            --line-height-sidebar-row-prominent
        )
        / var(--right-sidebar-header-icon-toggle-width) minmax(0, 1fr);
    cursor: pointer;
    --csstools-light-dark-toggle--793: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--793, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);
    position: sticky;
    top: 0;
    z-index: 1;
    --csstools-light-dark-toggle--794: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--794, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    border-radius: 4px;
    margin-right: 15px;
    margin-right: var(--width-simplebar-scroll-hover);
    transition: box-shadow 150ms ease-out;
}

.buddy-list-subsection-header:hover {
        --csstools-light-dark-toggle--1033: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1033, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-buddy-list-highlighted-user);
        --csstools-light-dark-toggle--795: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
        box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--795, hsla(0, 0%, 0%, 0.3));
        box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
    }

.buddy-list-subsection-header:hover .buddy-list-section-toggle,.buddy-list-subsection-header:hover .buddy-list-heading {
            opacity: 0.9;
            opacity: var(--opacity-sidebar-heading-hover);
        }

/* Combine hover border with drop shadow since CSS box-shadow doesn't stack. */

.buddy-list-subsection-header.sidebar-header-drop-shadow:hover {
            --csstools-light-dark-toggle--796:
                var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
            box-shadow:
                inset 0 0 0 1px hsla(0, 0%, 0%, 0.3),
                0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
            box-shadow:
                inset 0 0 0 1px var(--csstools-light-dark-toggle--796, hsla(0, 0%, 0%, 0.3)),
                0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
            box-shadow:
                inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    ),
                0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
            box-shadow:
                inset 0 0 0 1px var(--color-shadow-sidebar-row-hover),
                var(--box-shadow-sidebar-sticky-header-drop);
        }

.buddy-list-subsection-header.sidebar-header-drop-shadow {
        box-shadow: 0 1px 1px -1px hsla(0, 0%, 0%, 0.25),
        0 3px 4px -5px hsla(0, 0%, 0%, 0.4),
        0 4px 9px -10px hsla(0, 0%, 0%, 0.45),
        0 12px 12px -13px hsla(0, 0%, 0%, 0.3);
        box-shadow: var(--box-shadow-sidebar-sticky-header-drop);
    }

.buddy-list-heading {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    margin: 0;
    padding: 5px 5px 5px 0;
    --csstools-light-dark-toggle--588: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
    color: hsl(216, 65%, 20%);
    color: var(--csstools-light-dark-toggle--588, hsl(216, 65%, 20%));
    color: light-dark(
        hsl(216, 65%, 20%),
        hsl(216, 50%, 75%)
    );
    color: var(--color-text-sidebar-heading);
    font-size: inherit;
    font-weight: 600;
    font-weight: var(--font-weight-sidebar-heading);
    letter-spacing: 0.0469em;
    letter-spacing: var(--letter-spacing-sidebar-heading);
    opacity: 0.7;
    opacity: var(--opacity-sidebar-heading);
    transition: opacity 140ms linear;
    grid-area: row-content;
    display: flex;
}

.buddy-list-heading-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 2px;
}

.buddy-list-heading-user-count-with-parens {
    opacity: 0.75;
}

.buddy-list-subsection-header.no-display {
    display: none;
}

.user-presence-link,
.user_sidebar_entry .selectable_sidebar_block {
    overflow: hidden;
    --csstools-light-dark-toggle--797: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--797, hsl(0, 0%, 20%));
    color: light-dark(
        hsl(0, 0%, 20%),
        hsla(0, 0%, 100%, 0.85)
    );
    color: var(--color-text-sidebar-row);
}

.user-presence-link:not(.does-not-exist) .user-name,.user_sidebar_entry .selectable_sidebar_block .user-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.user_sidebar_entry .selectable_sidebar_block {
    grid-area: row-content;
    display: grid;
    grid-template:
        "starting-anchor-element row-content markers-and-controls" 1.5714em
        ".                       row-content ." auto / 1.4285em
        minmax(0, 1fr)
        minmax(0, auto);
    grid-template:
        "starting-anchor-element row-content markers-and-controls" var(
            --line-height-sidebar-row
        )
        ".                       row-content ." auto / var(
            --right-sidebar-presence-circle-width
        )
        minmax(0, 1fr)
        minmax(0, auto);
    align-items: baseline;
}

.user_sidebar_entry.with_avatar {
    grid-template:
        "row-content" 1.3571em
        "row-content" auto / minmax(0, 1fr);
    grid-template:
        "row-content" var(--line-height-sidebar-row-with-avatars)
        "row-content" auto / minmax(0, 1fr);
}

.user_sidebar_entry.with_avatar .selectable_sidebar_block {
        grid-template-rows: auto;
        padding: 4px;
        padding-left: calc(20px / 2);
        padding-left: calc(var(--right-sidebar-header-icon-toggle-width) / 2);
    }

.user_sidebar_entry.with_avatar .avatar-preload-background {
        --csstools-light-dark-toggle--798: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.1);
        background-color: hsla(0, 0%, 0%, 0.1);
        background-color: var(--csstools-light-dark-toggle--798, hsla(0, 0%, 0%, 0.1));
        background-color: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 100%, 0.1)
    );
        background-color: var(--color-buddy-list-avatar-loading);
    }

.user_sidebar_entry.with_avatar .unread_count:not(.hide) {
        margin-right: 2px;
    }

.user_sidebar_entry.with_avatar.with_status .unread_count {
        align-self: baseline;
    }

.user-presence-link {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
    grid-area: row-content;
}

.user-presence-link:hover,.user-presence-link:focus {
        --csstools-light-dark-toggle--799: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
        color: hsl(0, 0%, 20%);
        color: var(--csstools-light-dark-toggle--799, hsl(0, 0%, 20%));
        color: light-dark(
        hsl(0, 0%, 20%),
        hsla(0, 0%, 100%, 0.85)
    );
        color: var(--color-text-sidebar-row);
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.information-settings .profile-with-avatar,
.user_sidebar_entry.with_avatar .selectable_sidebar_block {
    line-height: 1.3571em;
    line-height: var(--line-height-sidebar-row-with-avatars);
    display: grid;
    grid-template:
        "avatar row-content markers-and-controls" 2em
        / auto minmax(0, 1fr) minmax(0, auto);
    grid-template:
        "avatar row-content markers-and-controls" var(
            --right-sidebar-avatar-width
        )
        / auto minmax(0, 1fr) minmax(0, auto);
    justify-content: flex-start;
    align-items: center;
}

.information-settings .profile-with-avatar {
    margin: 5px 0;
}

.my_user_status {
    opacity: 0.5;
    white-space: nowrap;
}

.selectable_sidebar_block {
    cursor: pointer;
}

.user_list_style_values .user-name-and-status-emoji {
        display: flex;
        align-items: center;
        width: 100%;
    }

.user_list_style_values .user-name-and-status-emoji .user-name {
            display: inline-block;
            max-width: calc(100% - 24px);
            max-width: calc(100% - var(--user-status-emoji-width));
            overflow-x: hidden;
            text-overflow: ellipsis;
        }

.user_list_style_values .user-name-and-status-emoji .status-emoji {
            line-height: 20px;
            margin-left: 6px;
        }

.user_list_style_values .status-text {
        overflow-x: hidden;
        text-overflow: ellipsis;
    }

.user_sidebar_entry {
    display: grid;
    /* We establish a two-row, two-column outer grid so
       that controls remain aligned with the username,
       even when there is a status line shown below.

       The 25px column for the vdots is less than the
       30px allotted in the left sidebar, but it holds
       the username area constant, so that no ellipsis
       appears on the username on hover. The 25px value
       is necessary for correct vdots alignment with the
       filter row's vdots. */
    grid-template:
        "row-content ending-anchor-element" 1.5714em
        "row-content ." auto / minmax(0, 1fr) 1.5625em;
    grid-template:
        "row-content ending-anchor-element" var(--line-height-sidebar-row)
        "row-content ." auto / minmax(0, 1fr) var(--right-sidebar-vdots-width);
    align-content: baseline;
    margin-right: 15px;
    margin-right: var(--width-simplebar-scroll-hover);
    /* When both the left circle and three dot menu are present, we want
       the space to the left of the circle to be more similar to the space
       to the right of the three dot menu. */
}

.user_sidebar_entry:not(.with_avatar) {
        padding-left: calc((
        20px - 4px
    ) - 2px);
        padding-left: calc(calc(
        20px - 4px
    ) - 2px);
        padding-left: calc(var(--right-sidebar-toggle-width-offset) - 2px);
    }

.user_sidebar_entry:hover {
        cursor: pointer;
    }

.user_sidebar_entry .user-name-and-status-emoji {
        display: flex;
    }

.user_sidebar_entry .status-text {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: 0.75;
        font-size: 90%;
    }

.user_sidebar_entry span.status-text:not(:empty) {
        /* Cinch up the status text by one quarter of the
           sidebar row's line-height. */
        margin-top: calc((1.5714em / 4) * -1);
        margin-top: calc((var(--line-height-sidebar-row) / 4) * -1);
    }

.user_sidebar_entry .unread_count {
        grid-area: markers-and-controls;
        align-self: center;
        display: none;
    }

.user_sidebar_entry .unread_count:not(.hide) {
        display: block;
        margin-left: 4px;
    }

.user_sidebar_entry .unread_count:not(.hide):empty {
            /* Hide otherwise empty unread count pill
               after DMs have been read, but before the
               count has been removed from the DOM. */
            display: none;
        }

#userlist-toggle {
    text-align: center;
    vertical-align: middle;
}

#userlist-toggle-button {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: hsl(0, 0%, 60%);
}

#userlist-toggle-button:hover {
        color: inherit;
    }

.right-sidebar-items:first-of-type #userlist-header {
    border-top: none;
}

#userlist-header {
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 5px;
    padding-left: var(--right-sidebar-heading-left-spacing);
    /* The scrollbar doesn't extend this high, but we want the three-dot
       menus to line up. */
    padding-right: 15px;
    padding-right: var(--width-simplebar-scroll-hover);
    padding-bottom: 3px;
    padding-bottom: var(--sidebar-filter-bottom-spacing);
    --csstools-light-dark-toggle--800: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--800, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);
}

#userlist-header #buddy-list-menu-icon {
        --csstools-light-dark-toggle--801: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--801, hsl(240, 30%, 40%));
        color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
        color: var(--color-vdots-visible);
        width: 1.5625em;
        width: var(--right-sidebar-vdots-width);
        /* Push back against default right-sidebar
           spacing for better vdots alignment. */
        padding: 0;
        margin: 2px;
    }

#userlist-header #buddy-list-menu-icon:hover {
            --csstools-light-dark-toggle--1034: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
            color: hsl(240, 100%, 15%);
            color: var(--csstools-light-dark-toggle--1034, hsl(240, 100%, 15%));
            color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
            color: var(--color-vdots-hover);
            --csstools-light-dark-toggle--1035: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
            background-color: hsl(240, 100%, 93%);
            background-color: var(--csstools-light-dark-toggle--1035, hsl(240, 100%, 93%));
            background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
            background-color: var(--color-background-sidebar-action-hover);
        }

.buddy-list-user-link,
.invite-user-shortcut {
    margin-right: 15px;
    margin-right: var(--width-simplebar-scroll-hover);
    border-radius: 4px;
}

.buddy-list-user-link:hover,.invite-user-shortcut:hover {
        --csstools-light-dark-toggle--1036: var(--csstools-color-scheme--light) hsla(240, 100%, 75%, 0.2);
        background: hsla(240, 100%, 50%, 0.07);
        background: var(--csstools-light-dark-toggle--1036, hsla(240, 100%, 50%, 0.07));
        background: light-dark(
        hsla(240, 100%, 50%, 0.07),
        hsla(240, 100%, 75%, 0.2)
    );
        background: var(--color-background-sidebar-action-heading-hover);
        --csstools-light-dark-toggle--1037: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
        box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.3);
        box-shadow: inset 0 0 0 1px var(--csstools-light-dark-toggle--1037, hsla(0, 0%, 0%, 0.3));
        box-shadow: inset 0 0 0 1px light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
        --csstools-light-dark-toggle--1038: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
        color: hsl(240, 100%, 15%);
        color: var(--csstools-light-dark-toggle--1038, hsl(240, 100%, 15%));
        color: light-dark(
        hsl(240, 100%, 15%),
        hsl(240, 100%, 90%)
    );
        color: var(--color-text-sidebar-action-heading-hover);
    }

.buddy-list-user-link .right-sidebar-wrappable-text-container,.invite-user-shortcut .right-sidebar-wrappable-text-container {
        display: grid;
        grid-template-rows: minmax(
            1.7142em,
            auto
        );
        grid-template-rows: minmax(
            var(--line-height-sidebar-row-prominent),
            auto
        );
        align-items: center;
        --csstools-light-dark-toggle--1039: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--1039, hsl(240, 30%, 40%));
        color: light-dark(
        hsl(240, 30%, 40%),
        hsl(240, 35%, 68%)
    );
        color: var(--color-text-sidebar-action-heading);
    }

.buddy-list-user-link .right-sidebar-wrappable-text-container .right-sidebar-wrappable-text-inner,.invite-user-shortcut .right-sidebar-wrappable-text-container .right-sidebar-wrappable-text-inner {
            margin: calc(
        (
                1.7142em -
                    1.2em
            ) /
            2
    ) 0;
            margin: var(--spacing-top-bottom-sidebar-topic-inner) 0;
            line-height: 1;
            -webkit-text-decoration: none;
            text-decoration: none;
            font-size: 1.0625em;
            font-size: var(--font-size-sidebar-action-heading);
            font-weight: 370;
            font-weight: var(--font-weight-sidebar-action-heading);
            font-variant: all-small-caps;
            font-variant: var(--font-variant-sidebar-action-heading);
            font-feature-settings: "c2sc", "smcp", , , ;
            font-feature-settings: var(
                --font-feature-settings-sidebar-action-heading
            ), , , ;
        }

.buddy-list-user-link .right-sidebar-wrappable-text-container,.invite-user-shortcut .right-sidebar-wrappable-text-container {
        text-transform: uppercase;
        text-transform: var(--text-transform-sidebar-action-heading);
    }

#user-list.with_avatars
    .buddy-list-user-link
    .right-sidebar-wrappable-text-container,
#user-list.with_avatars .buddy-list-section .empty-list-message {
    margin-left: calc(
        20px / 2 +
            2em +
            0.85ch + 2px
    );
    margin-left: var(--right-sidebar-text-indent-with-avatar);
}

.buddy-list-user-link .right-sidebar-wrappable-text-container,
.buddy-list-section .empty-list-message {
    margin-left: calc(
        (
        20px - 4px
    ) +
            1.4285em
    );
    margin-left: calc(
        calc(
        20px - 4px
    ) +
            1.4285em
    );
    margin-left: var(--right-sidebar-text-indent-without-avatar);
}

.invite-user-shortcut {
    /* The margin top is calculated from a legacy 25px height,
       from a 20px line of text and 5px of margin top. We calculate
       a scaling margin-top by subtracting the em-unit line height
       from the legacy value. */
    margin-top: calc(25px - (calc(20 / 14) * 1em));
    margin-top: calc(25px - (var(--legacy-body-line-height-unitless) * 1em));
    margin-bottom: 25px;
    margin-bottom: var(--sidebar-bottom-spacing);
}

.invite-user-shortcut:has(:focus-visible) {
        /* Apply focus and active styles to the parent container so the
        entire invite-user row receives keyboard focus indication,
        matching the behavior of other interactive sidebar rows.
        We use :has with :focus-visible so that mouse-clicks
        do not trigger the outline. */
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
        --csstools-light-dark-toggle--1040: var(--csstools-color-scheme--light) rgb(46, 46, 46);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--1040, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        rgb(46, 46, 46)
    );
        background-color: var(--color-background-hover-narrow-filter);
    }

.invite-user-shortcut .invite-user-link {
        /* TODO: We should eventually change the grid to use the correct
           --right-sidebar-presence-circle-width with left spacing, and
           share that left spacing value here. */
        padding-left: calc((
        20px - 4px
    ) + 0.3em);
        padding-left: calc(calc(
        20px - 4px
    ) + 0.3em);
        padding-left: calc(var(--right-sidebar-toggle-width-offset) + 0.3em);
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.invite-user-shortcut .invite-user-link:focus {
            outline: none;
        }

#user-list.with_avatars .invite-user-link {
    padding-left: calc(20px / 2);
    padding-left: calc(var(--right-sidebar-header-icon-toggle-width) / 2);
}

#buddy-list-actions-menu-popover .display-style-selector + .invite-user-link-item {
        --csstools-light-dark-toggle--802: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.15);
        border-top: 1px solid hsla(0, 0%, 0%, 0.15);
        border-top: 1px solid var(--csstools-light-dark-toggle--802, hsla(0, 0%, 0%, 0.15));
        border-top: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.15),
        hsla(0, 0%, 100%, 0.15)
    );
        border-top: 1px solid var(--color-border-sidebar-subheader);
    }

/* No hover effect on the label */

#buddy-list-actions-menu-popover .display-style-selector-header:hover {
        background: inherit;
        cursor: default;
    }

#buddy-list-actions-menu-popover .popover-menu-link:not(.display-style-selector-header) {
        display: grid;
        grid-template: "left-icon row-content" auto / 18px minmax(
                max-content,
                1fr
            );
        align-items: center;
    }

#buddy-list-actions-menu-popover .popover-menu-link:not(.display-style-selector-header) .popover-menu-icon,#buddy-list-actions-menu-popover .popover-menu-link:not(.display-style-selector-header) .user_list_style_choice {
            grid-area: left-icon;
            justify-self: baseline;
        }

#buddy-list-actions-menu-popover .popover-menu-link:not(.display-style-selector-header) .popover-menu-label {
            grid-area: row-content;
        }

#buddy-list-loading-subscribers {
    margin: auto;
    padding-right: 15px;
    padding-right: var(--width-simplebar-scroll-hover);
    padding-top: 30px;
}

/* ---- message_header.css ---- */
.message_header {
    vertical-align: middle;
    text-align: left;
    /* We can overflow-y if the font size gets big */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    position: relative;
    z-index: 0;
    --csstools-light-dark-toggle--803: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--803, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);
}
.message_header .message-header-contents {
        font-size: 1.0714em; /* 15px at 14px em */
        line-height: 1.2;
        display: grid;
        grid-template-areas: "stream-label separator topic controls error date";
        grid-template-columns: minmax(0, 1fr) 0 0 0 auto auto;
        align-items: center;
        height: 1.8666em; /* 28px at 15px em */
        --csstools-light-dark-toggle--804: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
        border: 1px solid hsla(0, 0%, 0%, 0.1);
        border: 1px solid var(--csstools-light-dark-toggle--804, hsla(0, 0%, 0%, 0.1));
        border: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 0%, 0.6)
    );
        border: 1px solid var(--color-message-header-contents-border);
        --csstools-light-dark-toggle--805: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
        border-bottom-color: hsla(0, 0%, 0%, 0.05);
        border-bottom-color: var(--csstools-light-dark-toggle--805, hsla(0, 0%, 0%, 0.05));
        border-bottom-color: light-dark(
        hsla(0, 0%, 0%, 0.05),
        hsla(0, 0%, 0%, 0.5)
    );
        border-bottom-color: var(--color-message-header-contents-border-bottom);
        border-radius: 7px 7px 0 0;
    }
.message_header.message_header_stream {
        /* Add box shadow to hide message border (first one) and message
           selected box shadow (second one) that are visible
           due to top borders of sticky recipient bar being curved. */
        --csstools-light-dark-toggle--806:
            var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        --csstools-light-dark-toggle--807:
            var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        box-shadow:
            -1px -5px 0 5px hsl(0, 0%, 94%),
            1px -5px 0 0 hsl(0, 0%, 94%);
        box-shadow:
            -1px -5px 0 5px var(--csstools-light-dark-toggle--806, hsl(0, 0%, 94%)),
            1px -5px 0 0 var(--csstools-light-dark-toggle--807, hsl(0, 0%, 94%));
        box-shadow:
            -1px -5px 0 5px light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%)),
            1px -5px 0 0 light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        box-shadow:
            -1px -5px 0 5px var(--color-background),
            1px -5px 0 0 var(--color-background);
    }
.message_header.message_header_stream .message-header-contents {
            /* The separator column holds only the fixed-size chevron
               icon, so it gets an explicit width; the other columns
               hold variable-width content and stay auto/1fr. */
            grid-template-columns: auto 1em auto 1fr auto auto;
            align-items: stretch;
        }
.message_header.message_header_stream .message_label_clickable {
            -webkit-user-select: text;
               -moz-user-select: text;
                    user-select: text;
            --csstools-light-dark-toggle--808: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
            color: hsl(0, 0%, 15%);
            color: var(--csstools-light-dark-toggle--808, hsl(0, 0%, 15%));
            color: light-dark(
        hsl(0, 0%, 15%),
        hsla(0, 0%, 100%, 0.85)
    );
            color: var(--color-text-message-header);
        }
.message_header.message_header_stream .message_label_clickable:hover {
                --csstools-light-dark-toggle--1041: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
                color: hsl(0, 0%, 15%);
                color: var(--csstools-light-dark-toggle--1041, hsl(0, 0%, 15%));
                color: light-dark(
        hsl(0, 0%, 15%),
        hsla(0, 0%, 100%, 0.85)
    );
                color: var(--color-text-message-header);
                -webkit-text-decoration: none;
                text-decoration: none;
            }
.message_header.message_header_stream .message_label_clickable:focus {
            outline: none;
            -webkit-text-decoration: none;
            text-decoration: none;
        }
.message_header.message_header_stream .stream_topic_separator {
            grid-area: separator;
            line-height: 0;
            display: flex;
            align-items: center;
            --csstools-light-dark-toggle--809: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.3);
            color: hsla(0, 0%, 0%, 0.3);
            color: var(--csstools-light-dark-toggle--809, hsla(0, 0%, 0%, 0.3));
            color: light-dark(
        hsla(0, 0%, 0%, 0.3),
        hsla(0, 0%, 100%, 0.3)
    );
            color: var(--color-message-header-icon-non-interactive);
            position: relative;
            top: 0.5px;
        }
.message_header.message_header_stream .stream_topic {
            grid-area: topic;
            display: flex;
            align-items: center;
            padding: 5px 6px 5px 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            top: 0.5px;
        }
.message_header.message_header_stream .stream_topic .message_label_clickable.narrows_by_topic {
                overflow: hidden;
                text-overflow: ellipsis;
            }
.message_header.message_header_stream .stream_topic .message_label_clickable.narrows_by_topic span.stream-topic-inner {
                    white-space: pre;
                }
.message_header.message_header_stream .stream-privacy i {
            font-size: 1.0714em; /* 15px at 14px em */
        }
.message_header.message_header_stream .stream-privacy i.zulip-icon-globe,.message_header.message_header_stream .stream-privacy i.zulip-icon-hashtag {
                position: relative;
                top: -0.5px;
            }
.message_header.message_header_stream .recipient_bar_controls {
            opacity: 0;
            transition: opacity 0.15s ease-out;
        }
.message_header.message_header_stream .recipient_bar_controls:focus-within {
            opacity: 1;
            transition: opacity 0.1s ease-in;
        }
/* Show the bar controls on hover with a slight delay */
.message_header.message_header_stream:hover .recipient_bar_controls {
                opacity: 1;
                transition: opacity 0.15s ease-in 0.1s;
            }
/* Always show controls when header is sticky */
.message_header.message_header_stream.sticky_header .recipient_bar_controls {
                opacity: 1;
                transition: opacity 0.15s ease-in;
            }
#report-message-preview-container .message_header {
        /* We don't need these effects applied for message preview in the report
        message modal. */
        box-shadow: none;
        border: 0;
        background: transparent;
    }

.message_header_private_message {
    /* This is required for box-shadow appear above the message content. */
    z-index: 1;
    --csstools-light-dark-toggle--810:
        var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    --csstools-light-dark-toggle--811:
        var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    box-shadow:
        -1px -5px 0 5px hsl(0, 0%, 94%),
        1px -5px 0 0 hsl(0, 0%, 94%);
    box-shadow:
        -1px -5px 0 5px var(--csstools-light-dark-toggle--810, hsl(0, 0%, 94%)),
        1px -5px 0 0 var(--csstools-light-dark-toggle--811, hsl(0, 0%, 94%));
    box-shadow:
        -1px -5px 0 5px light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%)),
        1px -5px 0 0 light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    box-shadow:
        -1px -5px 0 5px var(--color-background),
        1px -5px 0 0 var(--color-background);
    --csstools-light-dark-toggle--812: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--812, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);
}

.message_header_private_message .message-header-contents {
        --csstools-light-dark-toggle--813: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.48);
        border-color: hsla(0, 0%, 0%, 0.1);
        border-color: var(--csstools-light-dark-toggle--813, hsla(0, 0%, 0%, 0.1));
        border-color: light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 0%, 0.48)
    );
        border-color: var(--color-private-message-header-border);
        --csstools-light-dark-toggle--814: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.37);
        border-bottom-color: hsla(0, 0%, 0%, 0.07);
        border-bottom-color: var(--csstools-light-dark-toggle--814, hsla(0, 0%, 0%, 0.07));
        border-bottom-color: light-dark(
        hsla(0, 0%, 0%, 0.07),
        hsla(0, 0%, 0%, 0.37)
    );
        border-bottom-color: var(--color-private-message-header-border-bottom);
        --csstools-light-dark-toggle--815: var(--csstools-color-scheme--light) hsl(46, 15%, 20%);
        background-color: hsl(46, 35%, 93%);
        background-color: var(--csstools-light-dark-toggle--815, hsl(46, 35%, 93%));
        background-color: light-dark(
        hsl(46, 35%, 93%),
        hsl(46, 15%, 20%)
    );
        background-color: var(--color-background-private-message-header);
    }

.message_header_private_message .message_label_clickable {
        -webkit-user-select: text;
           -moz-user-select: text;
                user-select: text;
        display: flex;
        padding: 5px 0 5px 10px;
        font-weight: 600;
        height: 1.4142em; /* 19px at 14px em */
        line-height: 1.4142em; /* 19px at 14px em */
        --csstools-light-dark-toggle--816: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
        color: hsl(0, 0%, 15%);
        color: var(--csstools-light-dark-toggle--816, hsl(0, 0%, 15%));
        color: light-dark(
        hsl(0, 0%, 15%),
        hsla(0, 0%, 100%, 0.85)
    );
        color: var(--color-text-message-header);
    }

.message_header_private_message .message_label_clickable:hover {
            --csstools-light-dark-toggle--1042: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85) !important;
            color: hsl(0, 0%, 15%) !important;
            color: var(--csstools-light-dark-toggle--1042, hsl(0, 0%, 15%)) !important;
            color: light-dark(
        hsl(0, 0%, 15%),
        hsla(0, 0%, 100%, 0.85)
    ) !important;
            color: var(--color-text-message-header) !important;
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.message_header_private_message .message_label_clickable:focus {
            outline: none;
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.message_header_private_message .message_label_clickable .private_message_header_icon {
            font-size: 1.0714em; /* 15px at 14px em */
            position: relative;
            top: 1px;
            width: 1.0666em; /* 16px at 15px em */
            height: 1.0666em; /* 16px at 15px em */
        }

.message_header_private_message .message_label_clickable .private_message_header_name {
            overflow: hidden;
            text-overflow: ellipsis;
        }

.message_header_private_message .message_label_clickable .private_message_header_name i.zulip-icon-bot {
                vertical-align: middle;
                position: relative;
                top: -1px;
                padding-left: 0.3em;
            }

.message-feed .recipient_row {
        /* Browser overlaps extra top padding of message header and
           the bottom border message if this margin is not present. */
        margin-bottom: 1px;
        border-radius: 5px;
    }

.message-feed .recipient_row .message_row:last-of-type {
            border-radius: 0 0 7px 7px;
            border-radius: var(--last-message-row-border-radius);
            --csstools-light-dark-toggle--1043: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
            border-bottom: 1px solid hsla(0, 0%, 0%, 0.16);
            border-bottom: 1px solid var(--csstools-light-dark-toggle--1043, hsla(0, 0%, 0%, 0.16));
            border-bottom: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.16),
        hsla(0, 0%, 0%, 0.4)
    );
            border-bottom: 1px solid var(--color-message-list-border);
        }

.message-feed .recipient_row .message_row:last-of-type .unread-marker-fill {
                border-radius: 0 0 0 7px;
                height: calc(100% - 2px);
            }

.message-feed .recipient_row .message_row:last-of-type .messagebox {
                border-radius: 0 0 7px 7px;
                padding-bottom: 4px;
            }

.message-feed .recipient_row .message_header + .message_row .messagebox {
                padding-top: 5px;
            }

.message-feed .recipient_row .recipient_row_date {
            cursor: pointer;
        }

.message-feed .message_header {
        position: sticky;
        top: calc(
        2.5em + 0px
    );
        top: var(--navbar-fixed-height);
        /* Needs to be higher than the z-index of date_row. */
        z-index: 4;
        --csstools-light-dark-toggle--817: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        box-shadow: 0 -1px 0 0 hsl(0, 0%, 94%);
        box-shadow: 0 -1px 0 0 var(--csstools-light-dark-toggle--817, hsl(0, 0%, 94%));
        box-shadow: 0 -1px 0 0 light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        box-shadow: 0 -1px 0 0 var(--color-background);
    }

.message-feed .message_header .message-header-contents {
            margin-top: 10px;
            margin-top: var(--header-padding-bottom);
        }

.message-feed .message_header.sticky_header {
            --csstools-light-dark-toggle--1044: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
            box-shadow: -1px -1px 0 0
                hsl(0, 0%, 94%);
            box-shadow: -1px -1px 0 0
                var(--csstools-light-dark-toggle--1044, hsl(0, 0%, 94%));
            box-shadow: -1px -1px 0 0
                light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
            box-shadow: var(--unread-marker-left) -1px 0 0
                var(--color-background);
        }

.message-feed .message_header.sticky_header .recipient_row_date {
                display: flex;
            }

.stream_label {
    grid-area: stream-label;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 2px 5px 10px;
    position: relative;
    top: 0.5px;
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 600;
    overflow: hidden;
}

.stream_label .zulip-icon.zulip-icon-globe {
        position: relative;
        top: 1px;
    }

.stream_label:hover {
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.stream_label .stream-privacy {
        min-width: 0;
        min-width: initial;
        width: 1.1428em; /* 16px at 14px em */
        height: 1.1428em; /* 16px at 14px em */
        display: flex;
        justify-content: center;
        align-items: center;
    }

.stream_label .stream-privacy .hashtag {
            padding-right: 0;
        }

.stream_label .stream-privacy .hashtag::after {
                font-size: 1.1428em; /* 16px at 14px em */
            }

.stream_label .message-header-stream-name {
        overflow: hidden;
        text-overflow: ellipsis;
    }

.stream_label .message-header-stream-archived {
        color: hsl(0, 0%, 50%);
        color: var(--color-text-message-header-archived);
    }

.recipient_bar_controls {
    grid-area: controls;
    display: flex;
    align-items: center;
}

.recipient_bar_controls.topic-edit-mode .recipient-bar-control {
        display: none;
    }

.on_hover_topic_read {
    opacity: 0.7;
}

.on_hover_topic_read:hover {
        cursor: pointer;
        opacity: 1;
    }

.error-icon-message-recipient {
    grid-area: error;
}

.recipient_row_date {
    grid-area: date;
    --csstools-light-dark-toggle--818: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
    color: hsla(0, 0%, 15%, 0.75);
    color: var(--csstools-light-dark-toggle--818, hsla(0, 0%, 15%, 0.75));
    color: light-dark(hsla(0, 0%, 15%, 0.75), hsla(0, 0%, 100%, 0.75));
    color: var(--color-date);
    font-size: calc(12em / 14);
    padding: 0 10px;
    text-align: right;
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 600;
    line-height: 17px; /* identical to box height, or 131% */
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 1px;

    /* Display the date when unchanged only for sticky headers. */
}

.recipient_row_date.recipient_row_date_unchanged {
        display: none;
    }

.sticky_header .recipient_row_date.recipient_row_date_unchanged {
            display: flex;
        }

.recipient_row_date.hide-date-separator-header {
        display: none;
    }

.recipient_bar_icon {
    --csstools-light-dark-toggle--819: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    color: hsl(0, 0%, 0%);
    color: var(--csstools-light-dark-toggle--819, hsl(0, 0%, 0%));
    color: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
    color: var(--color-message-header-icon-interactive);
    opacity: 0.2;
    padding-left: 6px;
    padding-right: 6px;
}

.recipient_bar_icon:hover {
        opacity: 0.4 !important;
        cursor: pointer;
    }

.spectator-view .recipient_bar_controls .recipient-bar-control.recipient-bar-copy-link-to-topic {
        display: flex;
    }

.spectator-view .recipient_bar_controls .recipient-bar-control.recipient-row-topic-menu {
        display: none;
    }

@container message-lists (width <  26.5625em) {
    .recipient-bar-control {
        display: none;

        /* Always show the vdots */
    }
        .recipient-bar-control.recipient-row-topic-menu {
            display: block;
        }
}

@media (max-width: 424.98px) {
        .without-container-query-support .recipient-bar-control {
            display: none;

            /* Always show the vdots */
        }
            .without-container-query-support .recipient-bar-control.recipient-row-topic-menu {
                display: block;
            }
}

/* ---- message_row.css ---- */
.with-container-query-support #message-lists-container {
        container: message-lists / inline-size;
    }

.message_row {
    display: grid;
    /* Prevent the messagebox column from overflowing the 1fr
       space allotted by specifying `minmax(0,1fr)`, which
       sets 0 as the minimum size, not the grid default of
       `auto`. */
    grid-template: auto auto / 2px minmax(0, 1fr);
    grid-template-areas:
        "message_divider_unread_marker message_feed_divider_content"
        "message_unread_marker messagebox";

    --csstools-light-dark-toggle--820: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);

    border-left: 1px solid hsla(0, 0%, 0%, 0.16);

    border-left: 1px solid var(--csstools-light-dark-toggle--820, hsla(0, 0%, 0%, 0.16));

    border-left: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.16),
        hsla(0, 0%, 0%, 0.4)
    );

    border-left: 1px solid var(--color-message-list-border);
    --csstools-light-dark-toggle--821: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
    border-right: 1px solid hsla(0, 0%, 0%, 0.16);
    border-right: 1px solid var(--csstools-light-dark-toggle--821, hsla(0, 0%, 0%, 0.16));
    border-right: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.16),
        hsla(0, 0%, 0%, 0.4)
    );
    border-right: 1px solid var(--color-message-list-border);
    --csstools-light-dark-toggle--822: var(--csstools-color-scheme--light) hsl(0, 0%, 14%);
    background-color: hsl(0, 0%, 100%);
    background-color: var(--csstools-light-dark-toggle--822, hsl(0, 0%, 100%));
    background-color: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 14%)
    );
    background-color: var(--color-background-stream-message-content);
}

.message_row.private-message {
        --csstools-light-dark-toggle--823: var(--csstools-color-scheme--light) hsl(46, 7%, 16%);
        background-color: hsl(45, 20%, 96%);
        background-color: var(--csstools-light-dark-toggle--823, hsl(45, 20%, 96%));
        background-color: light-dark(
        hsl(45, 20%, 96%),
        hsl(46, 7%, 16%)
    );
        background-color: var(--color-background-private-message-content);
    }

.message_row.private-message .data-container::after {
            --csstools-light-dark-toggle--824: var(--csstools-color-scheme--light) hsl(46, 7%, 16%);
            background: linear-gradient(
                0deg,
                hsl(45, 20%, 96%),
                transparent 100%
            );
            background: linear-gradient(
                0deg,
                var(--csstools-light-dark-toggle--824, hsl(45, 20%, 96%)),
                transparent 100%
            );
            background: linear-gradient(
                0deg,
                light-dark(
        hsl(45, 20%, 96%),
        hsl(46, 7%, 16%)
    ),
                transparent 100%
            );
            background: linear-gradient(
                0deg,
                var(--color-background-private-message-content),
                transparent 100%
            );
        }

.message_row.direct_mention {
        --csstools-light-dark-toggle--825: var(--csstools-color-scheme--light) hsl(240, 13%, 16%);
        background-color: hsl(240, 52%, 95%);
        background-color: var(--csstools-light-dark-toggle--825, hsl(240, 52%, 95%));
        background-color: light-dark(
        hsl(240, 52%, 95%),
        hsl(240, 13%, 16%)
    );
        background-color: var(--color-background-direct-mention);
    }

.message_row.direct_mention .message_embed .data-container::after {
            --csstools-light-dark-toggle--826: var(--csstools-color-scheme--light) hsl(240, 13%, 16%);
            background: linear-gradient(
                0deg,
                hsl(240, 52%, 95%),
                transparent 100%
            );
            background: linear-gradient(
                0deg,
                var(--csstools-light-dark-toggle--826, hsl(240, 52%, 95%)),
                transparent 100%
            );
            background: linear-gradient(
                0deg,
                light-dark(
        hsl(240, 52%, 95%),
        hsl(240, 13%, 16%)
    ),
                transparent 100%
            );
            background: linear-gradient(
                0deg,
                var(--color-background-direct-mention),
                transparent 100%
            );
        }

.message_row.group_mention {
        --csstools-light-dark-toggle--827: var(--csstools-color-scheme--light) hsl(180, 13%, 14%);
        background-color: hsl(180, 40%, 94%);
        background-color: var(--csstools-light-dark-toggle--827, hsl(180, 40%, 94%));
        background-color: light-dark(
        hsl(180, 40%, 94%),
        hsl(180, 13%, 14%)
    );
        background-color: var(--color-background-group-mention);
    }

.message_row.group_mention .message_embed .data-container::after {
            --csstools-light-dark-toggle--828: var(--csstools-color-scheme--light) hsl(180, 13%, 14%);
            background: linear-gradient(
                0deg,
                hsl(180, 40%, 94%),
                transparent 100%
            );
            background: linear-gradient(
                0deg,
                var(--csstools-light-dark-toggle--828, hsl(180, 40%, 94%)),
                transparent 100%
            );
            background: linear-gradient(
                0deg,
                light-dark(
        hsl(180, 40%, 94%),
        hsl(180, 13%, 14%)
    ),
                transparent 100%
            );
            background: linear-gradient(
                0deg,
                var(--color-background-group-mention),
                transparent 100%
            );
        }

.message_row.sender_info_hovered .sender_name {
            cursor: pointer;
            /* TODO: Refactor the teetering nested classes
               above so that !important can be removed. */
            color: hsl(200, 100%, 40%) !important;
            color: var(--color-text-sender-name-hover) !important;
        }

.message_row.sender_info_hovered .message-avatar {
            cursor: pointer;
        }

#report-message-preview-container .message_row {
        /* A message preview only contains a single row of message */
        border-radius: 0 0 7px 7px;
        border-radius: var(--last-message-row-border-radius);
        --csstools-light-dark-toggle--829: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.4);
        border: 1px solid hsla(0, 0%, 0%, 0.16);
        border: 1px solid var(--csstools-light-dark-toggle--829, hsla(0, 0%, 0%, 0.16));
        border: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.16),
        hsla(0, 0%, 0%, 0.4)
    );
        border: 1px solid var(--color-message-list-border);
    }

.messagebox {
    grid-area: messagebox;
    word-wrap: break-word;
    border: none;
    /* The left padding value accounts for a 2px
      unread marker, ensuring a uniform 5px of
      padding on either side of the message box. */
    padding: 0 5px 0 3px;
}

.messagebox:hover .message_controls  > .message_control_button {
            opacity: 1;
            visibility: visible;
        }

.messagebox:hover .reveal-hidden-message {
        opacity: 1;
    }

.reveal-hidden-message {
    opacity: 0;
    transition: opacity 0.2s ease;
    margin-left: 0.1em;
    /* This is meant to offset the vertical padding of 0.125rem introduced
    by the action button, which otherwise makes this button look at a
    slightly lower height than the muted message notice. */
    margin-top: -0.125em;
    /* Source : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/hover */
}

@media (hover: none) {

.reveal-hidden-message {
        opacity: 1;
        transition: none;
}
    }

.messagebox-content {
    display: grid;
    align-content: baseline;
    padding-left: 10px;
    /* Prevent the message column from overflowing the 1fr
       space allotted by specifying `minmax(0,1fr)`, which
       sets 0 as the minimum size, not the grid default of
       `auto`.

        The calculated `--message-box-timestamp-column-width`
        should match `max-content` exactly, but `max-content`
        ensures the timestamp will always have enough space
        in the column. */
    grid-template:
        minmax(max(
        1.6667em,
        calc(
        1.214 * 14px +
            (5px * 2)
    )
    ), auto) repeat(4, auto) /
        3.2857em minmax(0, 1fr) max-content
        8px minmax(0, max-content);
    grid-template:
        minmax(max(
        1.6667em,
        calc(
        1.214 * 14px +
            calc(5px * 2)
    )
    ), auto) repeat(4, auto) /
        3.2857em minmax(0, 1fr) max-content
        8px minmax(0, max-content);
    grid-template:
        minmax(var(--message-box-sender-line-height), auto) repeat(4, auto) /
        var(--message-box-avatar-column-width) minmax(0, 1fr) max-content
        8px minmax(var(--message-box-timestamp-column-width), max-content);
    /* Named grid areas provide flexibility for positioning grid items
       reliably, even if the row or column definitions of the grid change. */
    grid-template-areas:
        "edited message   controls . time"
        ".      message   .        . .   "
        ".      more      .        . .   "
        ".      reactions .        . .   "
        ".      reminders .        . .   ";
}

.messagebox-content:has(.message-reminders) .message_reactions {
            margin-bottom: calc(
                5px / 2
            );
            margin-bottom: calc(
                var(--message-box-markdown-aligned-vertical-space) / 2
            );
        }

.messagebox-content.content_edit_mode {
        cursor: default;
        /* Set the controls area to 0 to give more space
           to the edit/source view area. */
        grid-template-columns:
            3.2857em minmax(0, 1fr)
            0 8px minmax(
                0,
                max-content
            );
        grid-template-columns:
            var(--message-box-avatar-column-width) minmax(0, 1fr)
            0 8px minmax(
                var(--message-box-timestamp-column-width),
                max-content
            );

        /* Hide reactions, scheduled reminders in edit mode. */
    }

.messagebox-content.content_edit_mode .message_reactions,.messagebox-content.content_edit_mode .message-reminders {
            display: none;
        }

.messagebox-content .message_edit_notice {
        grid-area: edited;
        align-self: center;
    }

.messagebox-content .edit-notifications {
        grid-area: edited;
        align-self: center;
    }

.messagebox-content .slow-send-spinner {
        display: none;
        align-self: center;
        justify-self: end;
        place-self: center end;
        position: static;
        position: initial;
        margin-top: 1px;
        margin-right: 10px;
        text-align: right;
        grid-area: time;
    }

.messagebox-content .message_content:not(.status-message) {
        grid-area: message;
        padding: 5px 0 0;
        padding: var(--message-box-markdown-aligned-vertical-space) 0 0;
        --csstools-light-dark-toggle--830: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
        color: hsl(0, 0%, 15%);
        color: var(--csstools-light-dark-toggle--830, hsl(0, 0%, 15%));
        color: light-dark(
        hsl(0, 0%, 15%),
        light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%))
    );
        color: var(--color-text-message-default);
        /* We explicitly set line-height here so that
           the message area is not beholden to the legacy
           `max()` declaration on `body`. */
        line-height: 1.214;
        line-height: var(--base-line-height-unitless);
        min-height: 17px;
        display: block;
        position: relative;
        overflow: hidden;

        /* For the sake of paragraphs and lists that include
           links, we adjust the vertical space here to keep
           it uniform. */
    }

.messagebox-content .message_content:not(.status-message):has( > p:first-child, > ol:first-child, > ul:first-child) {
            padding-top: calc(
                5px -
                    0.1em
            );
            padding-top: calc(
                var(--message-box-markdown-aligned-vertical-space) -
                    var(--message-box-link-focus-ring-block-padding)
            );
        }

.messagebox-content .message_content:not(.status-message):empty {
            display: none;
        }

.messagebox-content .message_content.condensed:not(.status-message) {
            max-height: 8.5em;
            min-height: 0;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(
                to top,
                hsla(0, 0%, 100%, 0) 0%,
                hsl(0, 0%, 100%) 60px
            );
                    mask-image: linear-gradient(
                to top,
                hsla(0, 0%, 100%, 0) 0%,
                hsl(0, 0%, 100%) 60px
            );
            -webkit-mask-size: cover;
                    mask-size: cover;
        }

.messagebox-content .message_content.collapsed:not(.status-message) {
            padding: 0;
            max-height: 0;
            min-height: 0;
            overflow: hidden;
        }

.messagebox-content .muted-message-notice-container {
        display: flex;
        align-items: flex-start;
        gap: 0.2em;
    }

.messagebox-content .muted-message-notice-container  > .muted-message-notice {
            opacity: 0.5;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
        }

/* Leading whitespaces are collapsed if they are at the start of a line.
    This lets us conditionally add a space to the left of `.inline-hide-button`,
    only when there is some preceding text on the same line before the button.
    */

.messagebox-content .inline-hide-button-space-wrapper {
        margin-right: 0.2em;
    }

.messagebox-content .rehide-muted-user-message.inline-hide-button {
            display: inline-flex;
        }

.messagebox-content .rehide-muted-user-message.block-hide-button {
            display: flex;
            margin-bottom: 5px;
            margin-bottom: var(--markdown-interelement-space-px);
        }

.messagebox-content .rehide-muted-user-message {
        align-items: center;
    }

.messagebox-content .message_reactions {
        grid-area: reactions;
        display: flex;
        /* Allow reactions to wrap in mobile viewports */
        flex-wrap: wrap;
        /* Keep reactions aligned to start (top), so that the
           margin on the reaction button doesn't appear to
           stretch the reactions taller. */
        align-items: flex-start;
        /* Control reaction spacing with a gap */
        gap: 4px;
    }

.messagebox-content .message-reminders {
        grid-area: reminders;
        font-style: italic;
        color: hsl(0, 0%, 53%);
    }

.messagebox-content .message-reminders .message-reminder {
            margin-bottom: 0.1875em; /* 3px at 16px/1em */
        }

.messagebox-content .message_edit {
        grid-area: message;
        /* Align self to start, rather than baseline, so the baseline
          is preserved from the message itself--keeping the time,
          edit message, and controls at the same vertical alignment. */
        align-self: start;
        margin-top: calc(
        5px * 1.4
    );
        margin-top: var(--message-box-vertical-margin);
    }

.messagebox-content .message_length_controller {
        grid-area: more;
    }

.messagebox-content .collapsed ~ .message_length_controller {
        /* When content is collapsed, the length controller
           should occupy the space ordinarily assigned to
           the message. */
        grid-area: message;
        /* However, don't let the SHOW MORE button participate
           in the baseline group. */
        align-self: start;
    }

.messagebox-content .collapsed ~ .message_length_controller .message_length_toggle {
            /* Ensure that a collapsed message maintains the
               same space around the toggle button as any other
               message-row content. */
            margin: 4px 0;
        }

.messagebox-content .message_length_toggle {
        width: 100%;
        height: 1.714em; /* 24px / 14px em */
        margin-bottom: 5px;
        margin-bottom: var(--message-box-markdown-aligned-vertical-space);
        --csstools-light-dark-toggle--831: var(--csstools-color-scheme--light) hsl(240, 30%, 65%);
        color: hsl(240, 52%, 53%);
        color: var(--csstools-light-dark-toggle--831, hsl(240, 52%, 53%));
        color: light-dark(
        hsl(240, 52%, 53%),
        hsl(240, 30%, 65%)
    );
        color: var(--color-text-show-more-less-button);
        --csstools-light-dark-toggle--832: var(--csstools-color-scheme--light) hsla(240, 44%, 56%, 0.15);
        background-color: hsla(240, 44%, 56%, 0.08);
        background-color: var(--csstools-light-dark-toggle--832, hsla(240, 44%, 56%, 0.08));
        background-color: light-dark(
        hsla(240, 44%, 56%, 0.08),
        hsla(240, 44%, 56%, 0.15)
    );
        background-color: var(--color-show-more-less-button-background);
        border-radius: 4px;
        border: none;
        outline: none;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: normal;
        font-feature-settings: "smcp", "c2sc";
        font-variant: all-small-caps;
        font-family: inherit;
        font-size: inherit;
    }

.messagebox-content .message_length_toggle:hover {
            --csstools-light-dark-toggle--1045: var(--csstools-color-scheme--light) hsla(240, 44%, 56%, 0.25);
            background-color: hsla(240, 44%, 56%, 0.15);
            background-color: var(--csstools-light-dark-toggle--1045, hsla(240, 44%, 56%, 0.15));
            background-color: light-dark(
        hsla(240, 44%, 56%, 0.15),
        hsla(240, 44%, 56%, 0.25)
    );
            background-color: var(
                --color-show-more-less-button-background-hover
            );
        }

.messagebox-content .message_length_toggle:active {
            --csstools-light-dark-toggle--1046: var(--csstools-color-scheme--light) hsla(240, 44%, 56%, 0.15);
            background-color: hsla(240, 44%, 56%, 0.2);
            background-color: var(--csstools-light-dark-toggle--1046, hsla(240, 44%, 56%, 0.2));
            background-color: light-dark(
        hsla(240, 44%, 56%, 0.2),
        hsla(240, 44%, 56%, 0.15)
    );
            background-color: var(
                --color-show-more-less-button-background-active
            );
            scale: 0.98;
        }

.messagebox-content.content_edit_mode .message_length_controller {
        /* If entering edit mode on a collapsed message,
           just hide the controller area. This preserves
           the collapsed state of the message, which need
           not be touched. We just need to hide the button.
           This works for condensed messages, too. */
        display: none;
    }

.messagebox-includes-sender .messagebox-content {
        grid-template-areas:
            "avatar sender    controls . time"
            "avatar message   .        . .   "
            ".      more      .        . .   "
            ".      reactions .        . .   "
            ".      reminders .        . .   ";
    }

.messagebox-includes-sender .messagebox-content .message_edit {
            /* No top margin when there's a sender row */
            margin-top: 0;
        }

.messagebox-includes-sender .messagebox-content.is-me-message {
            grid-template-areas:
                ".      .         .        . .   "
                "avatar sender    controls . time"
                ".      more      .        . .   "
                ".      reactions .        . .   "
                ".      reminders .        . .   ";
            grid-template-rows:
                calc(
        5px * 1.4
    )
                minmax(2.5em, auto) repeat(3, auto);
            grid-template-rows:
                var(--message-box-vertical-margin)
                minmax(var(--message-box-avatar-height), auto) repeat(3, auto);
            /* We align items to the baseline on me messages,
               and unset the align-content property. */
            align-items: baseline;
            align-content: initial;
        }

.messagebox-includes-sender .messagebox-content.is-me-message .message-avatar {
                /* Set the line-height to match the height of the avatar image
                   to center me-messages within the baseline group. */
                line-height: 2.5em;
                line-height: var(--message-box-avatar-height);
                align-self: baseline;
                /* Because the avatar may be the tallest element in a
                   single-line me message, this margin preserves the
                   overall height of the message box. */
                margin-bottom: calc(
        5px * 1.4
    );
                margin-bottom: var(--message-box-vertical-margin);
            }

.messagebox-includes-sender .messagebox-content.is-me-message .message-avatar .inline_profile_picture {
                    /* We adjust the vertical space in me messages via
                       the grid definition above. */
                    margin-top: 0;
                }

.messagebox-includes-sender .messagebox-content.is-me-message .message_controls {
                /* Because the controls height is smaller than the
                   available grid row height on me-messages, we
                   align to center here. */
                align-self: center;
                /* But, we need to adjust the bottom margin by the
                   message box's vertical margin so that the controls
                   appear properly aligned with both the time stamp
                   and any me-message content--including inline images. */
                margin-bottom: calc(
        5px * 1.4
    );
                margin-bottom: var(--message-box-vertical-margin);
            }

.messagebox-includes-sender .messagebox-content.is-me-message .message_edit_notice {
                /* Unset the margin on a typical sender line. */
                margin-left: 0;
            }

.messagebox-includes-sender .messagebox-content.is-me-message .message_sender {
                /* Don't display message sender as flexbox for me-messages. */
                display: block;
                /* Set the same line-height as on message content for
                   me-messages. */
                line-height: 1.214;
                line-height: var(--base-line-height-unitless);
                /* Ensure the same spacing below messages as for any other
                   paragraph. */
                padding-bottom: 5px;
                padding-bottom: var(
                    --message-box-markdown-aligned-vertical-space
                );
                /* Don't allow an ellipsis to display on me-messages. This is
                   an edge case that can happen with elements such as the
                   inline audio player. */
                overflow: visible;

                /* Display message components inline, with wrapping white-space,
                   so the sender name and message display as a continuous line
                   of wrapping text. */
            }

.messagebox-includes-sender .messagebox-content.is-me-message .message_sender .sender_name {
                    white-space: normal;
                    display: inline;
                }

.messagebox-includes-sender .messagebox-content.is-me-message .message_sender .sender_name_text {
                    max-width: 100%;
                }

.messagebox-includes-sender .messagebox-content.is-me-message.content_edit_mode .message_sender {
                    /* Keep the me-message participating in the baseline */
                    visibility: hidden;
                }

.messagebox-includes-sender .messagebox-content.is-me-message.content_edit_mode .message_edit {
                    /* Use the sender grid area for the me-message edit/view-source box */
                    grid-area: sender;
                    margin-top: calc(
        5px * 1.4
    );
                    margin-top: var(--message-box-vertical-margin);
                }

.messagebox-includes-sender .messagebox-content .message-avatar {
            grid-area: avatar;
            /* The picture should not participate in the baseline group. */
            align-self: start;
        }

.messagebox-includes-sender .messagebox-content .message-avatar .inline_profile_picture {
                /* Setting the margin inside this element prevents
                   unwanted shifts in the placement of especially
                   sender-line elements on the .messagebox-content
                   grid. */
                margin-top: calc(
        5px * 1.4
    );
                margin-top: var(--message-box-vertical-margin);
            }

.messagebox-includes-sender .messagebox-content .message-avatar .muted-sender-avatar {
                opacity: 0.5;
            }

.messagebox-includes-sender .messagebox-content .status-message {
            font-weight: normal;
        }

.messagebox-includes-sender .messagebox-content .message_content {
            /* Pull message content up closer to sender to
               let the text baseline sit adjacent the bottom
               of the avatar. We also need to account for the
               padding atop .message_content. */
            margin-top: calc(
                (
                        5px *
                            0.5 * -1
                    ) -
                    5px
            );
            margin-top: calc(
                (
                        var(--message-box-markdown-aligned-vertical-space) *
                            0.5 * -1
                    ) -
                    var(--message-box-markdown-aligned-vertical-space)
            );
            grid-area: message;
        }

.messagebox-includes-sender .messagebox-content .message_edit_notice {
            /* When the edit notice is inline, as on edited me-messages,
              the inline-block and accompanying vertical-align styles will
              apply */
            display: inline-block;
            vertical-align: baseline;
            /* A bit of margin here helps these not look associated with the name. */
            margin-left: 4px;
            /* Unset the padding, align-self used on edited notices under the avatar. */
            padding-right: 0;
            align-self: initial;
        }

.messagebox-includes-sender .messagebox-content .message_edit_notice.hide {
                display: none;
            }

.messagebox-includes-sender .messagebox-content .message_sender {
            overflow: hidden;
            text-overflow: ellipsis;
            grid-area: sender;
            display: flex;
            /* A generous line-height on the sender name is necessary
               for internationalization and non-Western Latin character
               sets. */
            line-height: max(
        1.6667em,
        calc(
        1.214 * 14px +
            (5px * 2)
    )
    );
            line-height: max(
        1.6667em,
        calc(
        1.214 * 14px +
            calc(5px * 2)
    )
    );
            line-height: var(--message-box-sender-line-height);
            /* Ensure flexed sender info (name, status emoji, inline EDITED)
               forms a baseline group, which will participate with the
               message-box grid's baseline group, too. */
            align-items: baseline;
        }

.messagebox-includes-sender .messagebox-content .message_sender .zulip-icon.zulip-icon-bot {
                align-self: center;
                margin-left: 5px;
                /* The bot icon is center-aligned but appears
                slightly misaligned with the bot name text due
                to its shape. Adding a negative top margin ensures
                it's proper alignment. */
                margin-top: -0.12em;
            }

.messagebox-includes-sender .messagebox-content .message_sender .sender_name {
                display: inline-flex;
                font-weight: 700;
                color: var(--color-text-sender-name);
                -moz-column-gap: 3px;
                     column-gap: 3px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                outline: none;
                align-self: baseline;
            }

.messagebox-includes-sender .messagebox-content .message_sender .sender_name .sender_name_text {
                    overflow: hidden;
                    white-space: nowrap;
                    display: inline-flex;
                }

.messagebox-includes-sender .messagebox-content .message_sender .sender_name .sender_name_text .user-name {
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

.messagebox-includes-sender .messagebox-content .message_sender .sender_name .sender_name_text .muted {
                        opacity: 0.5;
                    }

.messagebox-includes-sender .collapsed ~ .message_length_controller .message_length_toggle {
        /* Collapse top margin to avoid extra space
           between the button and sender line. */
        margin-top: 0;
    }

.message_controls {
    grid-area: controls;
    /* Let the controls occupy the entire height
       of the row; inner flexboxes handle the
       centering of the icons. */
    align-self: stretch;
    /* Controls flex to the height of the top
       row of the message box, and center
       themselves within it. */
    display: flex;
    align-items: center;
    /* Ensure square icons for better centering. */
    line-height: 1;
}

@container message-lists (width < 36em) {
        /* This is intended to target the first message_controls child
           when there are 3 displayed. */
        .message_controls .message_control_button:nth-last-child(3) {
            display: none;
        }
    }

/* Media-query fallback. Note that because we're treating
       #message-lists-container as its own container, we can
       express a much simpler query there. The more complex
       conditions are necessary only for media queries. */

@media (max-width: 575.98px), ((min-width: 768px) and (max-width: 848.98px)) {
            /* This is intended to target the first message_controls child
            when there are 3 displayed. */
            .message_controls .without-container-query-support .message_control_button:nth-last-child(3) {
                display: none;
            }
    }

/* This is a bit tricky; we need to reserve space for the message
       controls even when the message isn't hovered, so that hover
       doesn't disturb the layout.  Usually that would be just
       visibility: hidden, but that cannot be animated, so we set
       opacity as well, which can be animated. */

.message_controls .message_control_button {
        opacity: 0;
        visibility: hidden;
        transition: 0.2s ease;
        transition-property: opacity, visibility;
        /* Allow buttons to grow to fill the available space,
           in concord with the column calculated for the
           .messagebox-content grid. */
        flex: 1 0 0;
        /* Set the height to 100% to effectively flex open
           on the vertical axis. */
        height: 100%;
        /* Control buttons are their own flex containers,
           to more gracefully center the icons. */
        display: flex;
        align-items: center;
        justify-items: center;
        place-items: center center;
        --csstools-light-dark-toggle--833: var(--csstools-color-scheme--light) hsla(217, 41%, 90%, 0.5);
        color: hsla(216, 43%, 20%, 0.5);
        color: var(--csstools-light-dark-toggle--833, hsla(216, 43%, 20%, 0.5));
        color: light-dark(
        hsla(216, 43%, 20%, 0.5),
        hsla(217, 41%, 90%, 0.5)
    );
        color: var(--color-message-action-visible);
    }

.message_controls .message_control_button .emoji-message-control-button-container {
            /* This button has an extra div for Tippy purposes,
               so it becomes its own flex container. */
            display: flex;
        }

.message_controls .message_control_button .message-controls-icon {
            cursor: pointer;
            /* The icon body is 16px square at 16px/1em; the clickable
               area for the icon is 26px wide by 25px tall, so these
               values ensure a 26px x 25px clickable area for the icon. */
            /* 2.5px at 16px/1em; 3px at 16px/1em */
            padding: 0.1563em 0.1875em;
        }

.message_controls .message_control_button .message-controls-icon::before {
                /* We specify block display so the
                   scaling transform below works as
                   expected. */
                display: block;
            }

.message_controls .message_control_button .message-controls-icon:active::before {
                transform: scale(0.92);
                transform-origin: center;
                outline: 0;
            }

.message_controls .message_control_button .message-controls-icon:focus {
                /* Remove the outline but do not color on focus;
                   focus-visible is more appropriate for the color
                   changes, as it only applies color when focus
                   is achieved from a keyboard or other pointerless
                   device. */
                outline: 0;
            }

.message_controls .message_control_button .message-controls-icon:focus-visible {
                outline: 0;
                --csstools-light-dark-toggle--1047: var(--csstools-color-scheme--light) hsl(217, 41%, 90%);
                color: hsl(216, 43%, 20%);
                color: var(--csstools-light-dark-toggle--1047, hsl(216, 43%, 20%));
                color: light-dark(
        hsl(216, 43%, 20%),
        hsl(217, 41%, 90%)
    );
                color: var(--color-message-action-interactive);
            }

.message_controls .message_control_button .message-controls-icon:hover {
                outline: 0;
                --csstools-light-dark-toggle--1048: var(--csstools-color-scheme--light) hsl(217, 41%, 90%);
                color: hsl(216, 43%, 20%);
                color: var(--csstools-light-dark-toggle--1048, hsl(216, 43%, 20%));
                color: light-dark(
        hsl(216, 43%, 20%),
        hsl(217, 41%, 90%)
    );
                color: var(--color-message-action-interactive);
            }

/* Separate hover colors for stars */

.message_controls .message_control_button .message-controls-icon.star:focus-visible {
                color: hsl(41, 100%, 47%);
                color: var(--color-message-star-action);
            }

.message_controls .message_control_button .message-controls-icon.star:hover {
                color: hsl(41, 100%, 47%);
                color: var(--color-message-star-action);
            }

/* Tooltips should not follow the width restrictions of their parent element. */

.message_controls [data-tippy-root] {
        width: -moz-max-content;
        width: max-content;
        word-wrap: inherit;
    }

.message_controls .edit_content {
        width: 1.375em;
        width: var(--message-box-icon-width);
    }

.message_controls .edit_content .move_message_button,.message_controls .edit_content .edit_content_button {
            display: none;
        }

.message_controls .edit_content.can-edit-content .edit_content_button {
                display: inline;
            }

.message_controls .edit_content.can-move-message .move_message_button {
                display: inline;
            }

.message_controls .failed_message_action {
        color: hsl(4, 99%, 66%);
        color: var(--color-failed-message-send-icon);
        font-weight: bold;
        padding: 1px;
        opacity: 1;
        visibility: visible;
    }

.message_controls .failed_message_action .rotating {
            animation: rotate 1s infinite linear;
        }

.message_controls .star_container:not(.empty-star) {
            /* Color, opacity, and visibility, as though the message is hovered. */
            color: hsl(41, 100%, 47%);
            color: var(--color-message-star-action);
            opacity: 1;
            visibility: visible !important;
        }

.unread_marker {
    margin-left: -1px;
    margin-left: var(--unread-marker-left);
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.unread_marker.slow_fade {
        transition: opacity 2s ease-out;
    }

.unread_marker.fast_fade {
        transition: opacity 0.3s ease-out;
    }

.unread_marker.message_divider_unread_marker {
        grid-area: message_divider_unread_marker;
    }

.unread_marker.message_divider_unread_marker .unread-marker-fill {
            border-radius: 0 !important;
            height: 100% !important;
        }

.unread_marker.message_unread_marker {
        grid-area: message_unread_marker;
    }

.unread-marker-fill {
    height: 100%;
    width: 2px;
    background: linear-gradient(
        90deg,
        hsl(217, 64%, 59%) 30%,
        hsla(217, 64%, 59%, 0)
    );
    background: linear-gradient(
        90deg,
        var(--color-unread-marker) 30%,
        hsla(217, 64%, 59%, 0)
    );
}

.unread .unread_marker {
    transition: opacity 0.3s ease-out;
    opacity: 1;
}

.message-time {
    justify-self: end;
    padding-right: 5px;
    /* Maintain first-line baseline regardless of
       what happens in the message-content area (e.g., a
       collapsed message, or source/edit view). This
       line-height also keeps EDITED/MOVED messages
       in place, care of their baseline-group participation
       within the grid. */
    line-height: max(
        1.6667em,
        calc(
        1.214 * 14px +
            (5px * 2)
    )
    );
    line-height: max(
        1.6667em,
        calc(
        1.214 * 14px +
            calc(5px * 2)
    )
    );
    line-height: var(--message-box-sender-line-height);
    grid-area: time;
    display: block;
    /* 13px at 14px/1em */
    font-size: 0.9286em;
    font-weight: 350;
    text-align: right;
    opacity: 0.8;
    --csstools-light-dark-toggle--834: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--834, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    letter-spacing: 0.02em;
    /* Disable blue link styling for the message timestamp link. */
}

.message-time:hover {
        -webkit-text-decoration: none;
        text-decoration: none;
        --csstools-light-dark-toggle--835: var(--csstools-color-scheme--light) hsl(217, 41%, 90%);
        color: hsl(216, 43%, 20%);
        color: var(--csstools-light-dark-toggle--835, hsl(216, 43%, 20%));
        color: light-dark(
        hsl(216, 43%, 20%),
        hsl(217, 41%, 90%)
    );
        color: var(--color-message-action-interactive);
    }

.message-time.notvisible {
        /* This happens when message failed to send. We don't want to
           display time but still want it to occupy space. */
        width: 45px !important;
        position: static !important;
        position: initial !important;
    }

/* Message-editing styles */
.message-edit-buttons-and-timer {
    margin-top: 5px;
    display: flex;
    gap: 5px;
    /* Allow items to occupy full height.
       This is especially important for
       buttons that are flex items. */
    align-items: stretch;
}

.message-actions-button {
    box-sizing: border-box;
    align-self: stretch;
    /* Display the actions buttons as
       flex containers for positioning
       text and spinners. */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 28px at 16px/1em, per Vlad's spec. */
    height: 1.75em;
    /* 65px at 16px/1em, which is the width of
       the Cancel button. */
    min-width: 4.0625em;
    padding: 0 10px;
    border-radius: 4px;
    border: 0;
    line-height: 1;
    font-family: inherit;
    font-size: inherit;
}

.message-actions-button:focus {
        outline: none;
    }

.message-actions-button:focus-visible {
        outline: 2px solid hsl(215, 47%, 50%);
        outline: 2px solid var(--color-outline-focus);
    }

.message_edit_save {
    /* Match Save button's basic colors to
       the compose box Send button. */
    color: hsl(0, 0%, 100%);
    color: var(--color-compose-send-button-icon-color);
    background-color: var(--color-compose-send-button-background);
}

.message_edit_save:hover {
        background-color: var(
            --color-compose-send-button-background-interactive
        );
    }

.message_edit_save:disabled {
        /* Replicate disabled values, without any color shifts. */
        cursor: not-allowed;
        opacity: 0.5;
    }

.message_edit_cancel,
.message_edit_close {
    color: var(--color-exit-button-text);
    background: var(--color-exit-button-background);
}

.message_edit_cancel:hover,.message_edit_close:hover {
        background: var(--color-exit-button-background-interactive);
    }

.edit-content-container {
    border-radius: 4px;
    --csstools-light-dark-toggle--836: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.8);
    border: 1px solid hsla(0, 0%, 0%, 0.1);
    border: 1px solid var(--csstools-light-dark-toggle--836, hsla(0, 0%, 0%, 0.1));
    border: 1px solid light-dark(
        hsla(0, 0%, 0%, 0.1),
        hsla(0, 0%, 0%, 0.8)
    );
    border: 1px solid var(--color-message-content-container-border);
    transition: border-color 0.2s ease;
    display: grid;
    grid-template-areas: "message-edit-content";
}

.edit-content-container:has(.message_edit_content:focus) {
        --csstools-light-dark-toggle--837: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.27);
        border-color: hsl(0, 0%, 57%);
        border-color: var(--csstools-light-dark-toggle--837, hsl(0, 0%, 57%));
        border-color: light-dark(
        hsl(0, 0%, 57%),
        hsla(0, 0%, 100%, 0.27)
    );
        border-color: var(--color-message-content-container-border-focus);
    }

.edit-content-container .message-edit-textbox {
        /* Setting `position:relative` on this container ensures that .copy-button
           (a possible immediate child with `position: absolute`) is positioned
           relative to this container instead of <html>. */
        position: relative;
        grid-area: message-edit-content;
    }

.edit-content-container .message-edit-textbox .textarea-over-limit {
            --csstools-light-dark-toggle--1049: var(--csstools-color-scheme--light) hsl(3, 50%, 12%);
            background-color: hsl(3, 35%, 90%);
            background-color: var(--csstools-light-dark-toggle--1049, hsl(3, 35%, 90%));
            background-color: light-dark(
        hsl(3, 35%, 90%),
        hsl(3, 50%, 12%)
    );
            background-color: var(
                --color-compose-message-content-background-over-limit
            );
        }

.edit-content-container .message-edit-textbox .textarea-approaching-limit {
            --csstools-light-dark-toggle--1050: var(--csstools-color-scheme--light) hsl(50, 75%, 12%);
            background-color: hsl(50, 75%, 92%);
            background-color: var(--csstools-light-dark-toggle--1050, hsl(50, 75%, 92%));
            background-color: light-dark(
        hsl(50, 75%, 92%),
        hsl(50, 75%, 12%)
    );
            background-color: var(
                --color-compose-message-content-background-approaching-limit
            );
        }

.message_edit_content {
    max-height: 24em;
    max-height: var(--max-message-edit-height);
    width: 100%;
    min-width: 206px;
    min-height: 52px;
    box-sizing: border-box;
    --csstools-light-dark-toggle--838: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
    color: hsl(0, 0%, 20%);
    color: var(--csstools-light-dark-toggle--838, hsl(0, 0%, 20%));
    color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
    color: var(--color-text-default);
    --csstools-light-dark-toggle--839: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
    background-color: hsl(0, 0%, 100%);
    background-color: var(--csstools-light-dark-toggle--839, hsl(0, 0%, 100%));
    background-color: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
    background-color: var(--background-color-textarea);
    /* Flatten the bottom edge of the textarea to
    merge with the flat top edge of the buttons row */
    border-radius: 3px 3px 0 0;
    vertical-align: middle;
    border: none;
    /* Match textarea padding to compose box and
       message-edit preview area. */
    padding: 5px 5px 0;
    margin: 0;

    box-shadow: none;

    font-size: 1em;
    line-height: 1.214;
    line-height: var(--base-line-height-unitless);
    font-family: inherit;
}

.message_edit_content:focus {
        outline: 0;
    }

.message_edit_content:-moz-read-write {
        resize: vertical !important;
    }

.message_edit_content:read-write {
        resize: vertical !important;
    }

.message_edit_content:-moz-read-only {
        cursor: not-allowed;
    }

.message_edit_content:read-only,.message_edit_content:disabled {
        cursor: not-allowed;
    }

.message-editing-animation {
    display: inline-flex;
    align-items: baseline;
    margin-left: 3px;
    width: 40px;
    height: 5px;

    /* Avoid this animation element blocking clicks on .edit-notifications
       to display the message's edit history. */
    pointer-events: none;
}

.message-editing-animation .y-animated-dot {
        width: 4px;
        height: 4px;
        background-color: hsl(0, 0%, 53%);
        border-radius: 50%;
        margin-left: 3px;
        opacity: 0;
    }

.message-editing-animation .y-animated-dot:nth-child(1) {
            animation: typing 1s infinite 0.2s;
        }

.message-editing-animation .y-animated-dot:nth-child(2) {
            animation: typing 1s infinite 0.4s;
        }

.message-editing-animation .y-animated-dot:nth-child(3) {
            animation: typing 1s infinite 0.6s;
        }

@keyframes typing {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px);
    }

    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

.message_edit_countdown_timer {
    text-align: right;
    display: inline;
    color: hsl(0, 0%, 63%);
}

.message_edit_countdown_timer.expired {
        color: hsl(4, 58%, 33%);
    }

.message-edit-timer {
    display: none;
    /* Center vertically relative to
       buttons. */
    align-self: center;
    /* Use flexbox to position to far right of
       the Save and Cancel buttons. */
    margin-left: auto;
}

.message-edit-feature-group {
    border-radius: 0 0 3px 3px;
    --csstools-light-dark-toggle--589: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.08);
    background-color: hsl(232, 30%, 96%);
    background-color: var(--csstools-light-dark-toggle--589, hsl(232, 30%, 96%));
    background-color: light-dark(
        hsl(232, 30%, 96%),
        hsla(0, 0%, 0%, 0.08)
    );
    background-color: var(--color-message-formatting-controls-container);
    /* margin on either side to let the border of
       .edit-content-container show through. */
    margin: 0 1px;
    /* Display before Save/Cancel visually, even though
       it comes after them in the DOM (for Tab order). */
    order: -1;
}

.message_edit_save .loader {
    display: none;
    /* 28px at 16px/1em */
    height: 1.75em;
    width: 1.75em;
    grid-area: button-display;
    justify-self: center;
    z-index: 1;
}

.message_edit_save:has(.showing-button-spinner) {
    /* We want to maintain the width of the Save button
       in an i18n friendly way; this quick grid ensures
       that the width of the text holds the button open,
       while the styles above ensure the spinner's
       centering. */
    display: grid;
    grid-template: "button-display";
}

.showing-button-spinner {
    visibility: hidden;
    grid-area: button-display;
    z-index: 0;
}

.edit-controls .button-wrapper {
        cursor: not-allowed;
    }

.message-edit-button-disabled {
    pointer-events: none;
}

/* Reduce some of the heavy padding from Bootstrap. */
.message_edit_form {
    margin-bottom: 10px;
    cursor: default;
}
.message_edit_form .edit-form {
        /* Override Bootstrap. */
        margin-bottom: 0;
    }
.message_edit_form .edit-controls {
        /* Use flex column layout so that we can use `order`
           to keep the formatting buttons row visually above
           the Save/Cancel buttons, while the DOM order has
           Save/Cancel first for correct Tab key navigation. */
        display: flex;
        flex-direction: column;
        margin-left: 0;
        margin-top: 0;
    }
.message_edit_form .preview_message_area {
        max-height: 24em;
        max-height: var(--max-message-edit-height);
        grid-area: message-edit-content;
    }

.message_edit_notice {
    /* 10px at 14px/1em */
    font-size: 0.7143em;
    opacity: 0.5;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-x: clip;
    text-overflow: ellipsis;
    padding-right: 5.5px;
    cursor: pointer;
}

.edit-notifications.has-edit-history {
    cursor: pointer;
}

.fade-in-message {
    animation-name: fadeInMessage;
    animation-duration: 1s;
    animation-iteration-count: 1;
}

.fade-in-message .message_edit_notice {
        animation-name: fadeInEditNotice;
        animation-duration: 1s;
        animation-iteration-count: 1;
    }

.message_edit_notice_hover:hover {
    opacity: 1;
}

/* Locally echoed messages. */
.locally-echoed .message-time {
    opacity: 0;
    /* Don't show pointer when message-time doesn't have a link. */
    cursor: default;
}

/* Show the spinner only for messages that are still locally echoed. */
.locally-echoed .slow-send-spinner {
    display: inline !important;
    display: initial !important;
    cursor: default;
}

/* Placehold the control buttons, unless there's a failure. */
.locally-echoed .messagebox:hover .message_controls .message_control_button:not(.failed_message_action) {
        visibility: hidden;
    }
/* The actual star icon is not added to the DOM when a
       message is locally echoed, so we set the equivalent
       width on its container. */
.locally-echoed .star_container {
        width: 1.375em;
        width: var(--message-box-icon-width);
    }

/* See https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class/8539107#8539107
       for details on how this works */

.recipient_row .message_row.unread .message_divider_unread_marker {
            display: none;
        }

/* Select all but the first .message_row.unread,
       and remove the properties set from the previous rule. */

.recipient_row .message_row.unread ~ .message_row.unread .message_divider_unread_marker {
            display: block;
        }

.message_feed_divider {
    display: grid;
    grid-area: message_feed_divider_content;
    grid-template: auto / minmax(20px, 1fr) auto minmax(max-content, 1fr);
    grid-template-areas: "left_divider_content middle_divider_content right_divider_content";
    align-items: center;
    padding: 8px 0;
}

.message_feed_divider::before {
        grid-area: left_divider_content;
        content: " ";
        height: 0;
        --csstools-light-dark-toggle--840: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.15);
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        border-bottom: 1px solid var(--csstools-light-dark-toggle--840, rgba(0, 0, 0, 0.15));
        border-bottom: 1px solid light-dark(
        rgba(0, 0, 0, 0.15),
        rgba(255, 255, 255, 0.15)
    );
        border-bottom: 1px solid var(--color-border-message-group-spacer-line);
    }

.message_feed_divider:has(.timerender-content)::after {
        display: none;
    }

.message_feed_divider:not(:has(.timerender-content))::after {
        grid-area: right_divider_content;
        min-width: 20px;
        content: " ";
        height: 0;
        width: calc(100% - 2px);
        --csstools-light-dark-toggle--841: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.15);
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        border-bottom: 1px solid var(--csstools-light-dark-toggle--841, rgba(0, 0, 0, 0.15));
        border-bottom: 1px solid light-dark(
        rgba(0, 0, 0, 0.15),
        rgba(255, 255, 255, 0.15)
    );
        border-bottom: 1px solid var(--color-border-message-group-spacer-line);
    }

.message_feed_divider .stream-status {
        grid-area: middle_divider_content;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* Same as timerender-content at 16px */
        letter-spacing: 0.5486px;
        padding: 0 0.25em;
    }

.message_feed_divider .stream-status i {
            font-size: 0.7143em; /* 10px at 14px / em */
            /* TODO: Don't use relative positioning here. */
            position: relative;
            margin-left: 0.2em; /* 2px at 10px / em */
        }

.message_feed_divider .date-divider-content {
        position: relative;
        grid-area: right_divider_content;
        display: flex;
        align-items: center;
        justify-content: end;
        white-space: nowrap;
        letter-spacing: 0.04em;
    }

.message_feed_divider .date-divider-content::before {
            position: relative;
            min-width: 20px;
            width: 100%;
            right: calc(-1 * (
        12px - 4px
    ));
            right: calc(-1 * calc(
        12px - 4px
    ));
            right: calc(-1 * var(--date-divider-line-inset));
            margin-left: -50%;
        }

.message_feed_divider .date-divider-content::after {
            position: absolute;
            right: 2px;
            right: var(--date-divider-right-edge-offset);
            width: calc(
                (
        12px - 4px
    ) -
                    2px
            );
            width: calc(
                calc(
        12px - 4px
    ) -
                    2px
            );
            width: calc(
                var(--date-divider-line-inset) -
                    var(--date-divider-right-edge-offset)
            );
        }

.message_feed_divider .date-divider-content::before {
            content: " ";
            height: 0;
            --csstools-light-dark-toggle--1051: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.15);
            border-bottom: 1px solid
                rgba(0, 0, 0, 0.15);
            border-bottom: 1px solid
                var(--csstools-light-dark-toggle--1051, rgba(0, 0, 0, 0.15));
            border-bottom: 1px solid
                light-dark(
        rgba(0, 0, 0, 0.15),
        rgba(255, 255, 255, 0.15)
    );
            border-bottom: 1px solid
                var(--color-border-message-group-spacer-line);
        }

.message_feed_divider .date-divider-content::after {
            content: " ";
            height: 0;
            --csstools-light-dark-toggle--1052: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.15);
            border-bottom: 1px solid
                rgba(0, 0, 0, 0.15);
            border-bottom: 1px solid
                var(--csstools-light-dark-toggle--1052, rgba(0, 0, 0, 0.15));
            border-bottom: 1px solid
                light-dark(
        rgba(0, 0, 0, 0.15),
        rgba(255, 255, 255, 0.15)
    );
            border-bottom: 1px solid
                var(--color-border-message-group-spacer-line);
        }

.message_feed_divider .date-divider-content .date_row_text {
            padding: 0 12px;
            padding: 0 var(--date-divider-text-padding);
            cursor: pointer;
        }

.message_feed_divider .stream-status,.message_feed_divider .date-divider-content {
        overflow: hidden;
        text-transform: uppercase;
        font-size: calc(12em / 14);
        font-style: normal;
        font-weight: 600;
        line-height: 17px; /* identical to box height, or 131% */
        text-align: right;
        --csstools-light-dark-toggle--842: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
        color: hsla(0, 0%, 15%, 0.75);
        color: var(--csstools-light-dark-toggle--842, hsla(0, 0%, 15%, 0.75));
        color: light-dark(hsla(0, 0%, 15%, 0.75), hsla(0, 0%, 100%, 0.75));
        color: var(--color-date);
    }

.bookend {
    margin-top: 10px;
    background-color: transparent;
    padding-bottom: 10px;
    text-align: center;
}

.bookend .zulip-icon {
        margin-left: 0.1667em; /* 2px at 12px / em */
    }

.bookend .stream-status {
        opacity: 0.6;
    }

.bookend .stream-status i {
            font-size: 0.7143em; /* 10px at 14px / em */
            /* TODO: Don't use relative positioning here. */
            position: relative;
            top: 0.1em; /* 1px at 10px / em */
            margin-left: 0.2em; /* 2px at 10px / em */
        }

.bookend .stream-status .zulip-icon.zulip-icon-lock {
            font-size: 0.8571em; /* 12px at 14px / em */
            top: 0.0833em; /* 1px at 12px / em */
            margin-left: 0.1667em; /* 2px at 12px / em */
        }

.bookend-label {
    font-size: 1em;
    display: block;
    padding: 4px;
    overflow: hidden;
}

.bookend-label::before,.bookend-label::after {
        display: inline-block;
        position: relative;
        content: " ";
        vertical-align: middle;
        height: 0;
        --csstools-light-dark-toggle--843: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.15);
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
        border-bottom: 1px solid var(--csstools-light-dark-toggle--843, rgba(0, 0, 0, 0.15));
        border-bottom: 1px solid light-dark(
        rgba(0, 0, 0, 0.15),
        rgba(255, 255, 255, 0.15)
    );
        border-bottom: 1px solid var(--color-border-message-group-spacer-line);
        width: 50%;
    }

.bookend-label::before {
        right: 0.25em;
        margin-left: -50%;
    }

.bookend-label::after {
        left: 0.25em;
        margin-right: -50%;
    }

/* Only show links on the trailing bookend. */
.bookend-channel-settings-link {
    display: none;
}

.trailing_bookend .bookend-channel-settings-link {
    display: inline;
}

#report-message-preview-container {
    margin: 0.9375em 0; /* 15px at 16px/1em */

    /* Hide most UI for interacting with a message in the report message preview UI. */
}

#report-message-preview-container .add-task-bar,#report-message-preview-container .change_visibility_policy,#report-message-preview-container .recipient-row-topic-menu,#report-message-preview-container .todo-edit-task-list-title,#report-message-preview-container .message_controls,#report-message-preview-container .message-reminders,#report-message-preview-container .message_reactions {
        display: none;
    }

@container message-lists (width < 26.5625em) {
    .muted-message-notice {
        display: none;
    }
}

/* Fallback for hiding the muted message notice. */
@media (max-width: 424.98px) {
        .without-container-query-support .muted-message-notice {
            display: none;
        }
}

.not-subscribed-banner .banner-content {
        align-items: center;
    }

.not-subscribed-banner .zulip-icon.zulip-icon-globe {
        font-size: 0.8571em; /* 12px at 14px/1em */
        vertical-align: -0.0714em; /* -1px at 14px/1em */
    }

.not-subscribed-banner .zulip-icon.zulip-icon-lock {
        font-size: 0.9286em; /* 13px at 14px/1em */
        vertical-align: -0.0714em; /* -1px at 14px/1em */
    }

.not-subscribed-banner .zulip-icon.zulip-icon-hashtag {
        font-size: 0.9286em; /* 13px at 14px/1em */
        vertical-align: -0.1429em; /* -2px at 14px/1em */
    }

/* ---- inbox.css ---- */
.inbox-container {
    display: flex;
    flex-direction: column;
    --csstools-light-dark-toggle--844: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background: hsl(0, 0%, 94%);
    background: var(--csstools-light-dark-toggle--844, hsl(0, 0%, 94%));
    background: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background: var(--color-background-inbox);
    padding: 0;
    min-height: 100vh;
}
.inbox-container #inbox-pane {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        margin: calc(
        2.5em + 0px
    ) 25px 0;
        margin: var(--navbar-fixed-height) 25px 0;
    }
.inbox-container #inbox-pane a {
            --csstools-light-dark-toggle--1053: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.85);
            color: hsl(0, 0%, 15%);
            color: var(--csstools-light-dark-toggle--1053, hsl(0, 0%, 15%));
            color: light-dark(
        hsl(0, 0%, 15%),
        hsla(0, 0%, 100%, 0.85)
    );
            color: var(--color-text-message-header);
            -webkit-text-decoration: none;
            text-decoration: none;
        }
.inbox-container #inbox-pane .unread_count {
            opacity: 1;
            --csstools-light-dark-toggle--1054: var(--csstools-color-scheme--light) hsl(240, 18%, 34%);
            outline: 0 solid hsla(240, 10%, 50%, 0.7);
            outline: 0 solid var(--csstools-light-dark-toggle--1054, hsla(240, 10%, 50%, 0.7));
            outline: 0 solid light-dark(
        hsla(240, 10%, 50%, 0.7),
        hsl(240, 18%, 34%)
    );
            outline: 0 solid var(--color-background-unread-counter);
        }
.inbox-container #inbox-pane .search_group {
            position: sticky;
            top: calc(
        2.5em + 0px
    );
            top: var(--navbar-fixed-height);
            --csstools-light-dark-toggle--1055: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
            background: hsl(0, 0%, 94%);
            background: var(--csstools-light-dark-toggle--1055, hsl(0, 0%, 94%));
            background: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
            background: var(--color-background-inbox);
            display: flex;
            /* This padding-top value aligns the inbox filters
               with the filters in the left and right sidebars. */
            padding: 10px 0;
            z-index: 1;
        }
.inbox-container #inbox-pane .button-inbox-selected {
            --csstools-light-dark-toggle--1056: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.05);
            background-color: hsla(0, 0%, 0%, 0.05);
            background-color: var(--csstools-light-dark-toggle--1056, hsla(0, 0%, 0%, 0.05));
            background-color: light-dark(
        hsla(0, 0%, 0%, 0.05),
        hsla(0, 0%, 100%, 0.05)
    );
            background-color: var(--color-background-button-inbox-selected);
        }
.inbox-container #inbox-pane #inbox-filters .inbox-search-wrapper {
                flex-grow: 1;
                max-width: calc(27.4375em);
                max-width: var(--width-inbox-search);
            }
.inbox-container #inbox-pane .inbox-empty-text {
            display: none;
        }
.inbox-container #inbox-pane #inbox-loading-indicator {
            margin-top: 20px;
            margin-bottom: 40vh;
            margin-bottom: var(--max-unmaximized-compose-height);
        }
.inbox-container #inbox-pane #inbox-loading-indicator .searching-for-more-topics {
                margin-left: 0;
            }
.inbox-container #inbox-pane #inbox-list {
            overflow: hidden;
            /* search box left border (1px) + search box right border (1px)
               + dropdown left border (1px) + dropdown right border (1px) = 4px at 16px em */
            max-width: calc(
                (27.4375em) +
                    10.7142em + 0.25em
            );
            max-width: calc(
                calc(27.4375em) +
                    10.7142em + 0.25em
            );
            max-width: calc(
                var(--width-inbox-search) +
                    var(--width-inbox-filters-dropdown) + 0.25em
            );
        }
.inbox-container #inbox-pane #inbox-list .inbox-channel-topic-list {
                margin: 0;
            }
.inbox-container #inbox-pane #inbox-list .inbox-focus-border {
                display: flex;
                min-height: 1.875em; /* 30px at 16px em */
                /* Holds the horizontal layout that the removed
                   `border: 2px solid transparent` was reserving;
                   `.inbox-row`'s outline-based focus doesn't reserve
                   space. Vertical padding omitted so the 30px icon
                   wrappers fit in the 30px row height. */
                padding-left: 0.125em;
                padding-right: 0.125em; /* 2px at 16px/1em */
                box-sizing: border-box;
                justify-content: space-between;
            }
.inbox-container #inbox-pane #inbox-list .inbox-header {
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                display: block;
                height: 1.875em; /* 30px at 16px em */
            }
.inbox-container #inbox-pane #inbox-list .inbox-header .inbox-focus-border {
                    height: 1.875em; /* 30px at 16px em */
                }
.inbox-container #inbox-pane #inbox-list .inbox-header .inbox-left-part {
                    grid-template:
                        auto / minmax(auto, min-content)
                        auto min-content min-content;
                    grid-template-areas: "header_name collapse_button unread_mention_info unread_count";
                }
.inbox-container #inbox-pane #inbox-list .inbox-header .inbox-header-name {
                    grid-area: header_name;
                    display: flex;
                    align-items: center;
                    overflow: hidden;
                    outline: 0;
                    cursor: pointer;
                }
.inbox-container #inbox-pane #inbox-list .inbox-header .inbox-header-name .inbox-header-name-text {
                        margin: 0;
                        padding: 1px 0;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        font-weight: 600;
                    }
.inbox-container #inbox-pane #inbox-list .inbox-header:focus {
                    outline: 0;
                }
.inbox-container #inbox-pane #inbox-list .inbox-header:hover .collapsible-button {
                        visibility: visible;
                    }
.inbox-container #inbox-pane #inbox-list .fa-lock {
                margin-right: 3px;
            }
.inbox-container #inbox-pane #inbox-list .stream-privacy.filter-icon {
                /* 0 5px at 16px/1em */
                padding: 0 0.3125em;
                margin: 0;
            }
.inbox-container #inbox-pane #inbox-list .zulip-icon-user {
                position: relative;
                top: -1px;
                margin-right: 4px;
            }
.inbox-container #inbox-pane #inbox-list .collapsible-button {
                grid-area: collapse_button;
            }
.inbox-container #inbox-pane #inbox-list .collapsible-button:hover {
                    cursor: pointer;
                }
.inbox-container #inbox-pane #inbox-list .collapsible-button .zulip-icon-chevron-down {
                    /* We are using very specific vertical padding here
                     * to avoid the inbox row grid overflow. */
                    padding: 0.125em 0.25em; /* 2px 4px at 16px em */
                    vertical-align: top;
                    transform: rotate(180deg);
                }
.inbox-container #inbox-pane #inbox-list .user-circle {
                /* 8.5328px at 16px/1em */
                font-size: 0.5333em;
                /* TODO: Refactor inbox rows to use grid, to avoid the
                   min-width here that holds the other rows to similar
                   columns. */
                /* 16px at 8.5328px/1em */
                min-width: 1.8751em;
                top: 0;
                text-align: center;
            }
.inbox-container #inbox-pane #inbox-list .zulip-icon-bot,.inbox-container #inbox-pane #inbox-list .conversation-partners-icon {
                opacity: 0.7;
                /* Required to align DM fullnames in user circle icon */
                /* 2px at 16px / 1em */
                margin-left: 0.125em;
            }
.inbox-container #inbox-pane #inbox-list .user_block .zulip-icon {
                /* 0 5px at 16px/1em */
                padding: 0 0.3125em;
            }
.inbox-container #inbox-pane #inbox-list .user_block .zulip-icon.user-circle {
                    /* 5px at 16px / ~ 0.5em */
                    padding: 0 0.586em;
                }
.inbox-container #inbox-pane #inbox-list .inbox-row {
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                display: block;
                --csstools-light-dark-toggle--1057: var(--csstools-color-scheme--light) hsl(0, 0%, 14%);
                background-color: hsl(0, 0%, 100%);
                background-color: var(--csstools-light-dark-toggle--1057, hsl(0, 0%, 100%));
                background-color: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 14%)
    );
                background-color: var(--color-background-inbox-row);
            }
.inbox-container #inbox-pane #inbox-list .inbox-row:hover {
                    --csstools-light-dark-toggle--1058: var(--csstools-color-scheme--light) rgb(47, 47, 47);
                    background: rgb(242, 242, 242);
                    background: var(--csstools-light-dark-toggle--1058, rgb(242, 242, 242));
                    background: light-dark(
        rgb(242, 242, 242),
        rgb(47, 47, 47)
    );
                    background: var(--color-background-inbox-row-hover);
                }
.inbox-container #inbox-pane #inbox-list .inbox-row .inbox-left-part {
                    grid-template:
                        auto / min-content minmax(0, 1fr)
                        min-content min-content;
                    grid-template-areas: "match_topic_and_dm_start recipient_info unread_mention_info unread_count";
                }
.inbox-container #inbox-pane #inbox-list .inbox-row .inbox-topic-container .user-circle {
                    grid-area: match_topic_and_dm_start;
                }
.inbox-container #inbox-pane #inbox-list .inbox-row .recipients_info,.inbox-container #inbox-pane #inbox-list .inbox-row .inbox-topic-name {
                    grid-area: recipient_info;
                }
.inbox-container #inbox-pane #inbox-list .channel-visibility-policy-indicator,.inbox-container #inbox-pane #inbox-list .visibility-policy-indicator,.inbox-container #inbox-pane #inbox-list .inbox-action-button {
                display: flex;
                align-items: center;
                justify-content: center;
                /* Row-tall, row-square click area so there's
                   room for the focus ring around the inner icon
                   without clipping against the row's right edge.
                   Centering the icon (vs. anchoring to an edge)
                   keeps the focus ring symmetric around it. */
                width: 1.875em; /* 30px — matches row height */
                height: 1.875em; /* 30px — matches row height */
                /* Whole 30×30 hit area is clickable; the inner
                   icon itself only spans ~16×16. Without this,
                   mouse hovers at the top/bottom fall back to the
                   default arrow cursor. */
                cursor: pointer;
            }
.inbox-container #inbox-pane #inbox-list .channel-visibility-policy-indicator > i,.inbox-container #inbox-pane #inbox-list .visibility-policy-indicator > i,.inbox-container #inbox-pane #inbox-list .inbox-action-button > i,.inbox-container #inbox-pane #inbox-list .channel-visibility-policy-indicator > .zulip-icon,.inbox-container #inbox-pane #inbox-list .visibility-policy-indicator > .zulip-icon,.inbox-container #inbox-pane #inbox-list .inbox-action-button > .zulip-icon,.inbox-container #inbox-pane #inbox-list .channel-visibility-policy-indicator > .recipient_bar_icon,.inbox-container #inbox-pane #inbox-list .visibility-policy-indicator > .recipient_bar_icon,.inbox-container #inbox-pane #inbox-list .inbox-action-button > .recipient_bar_icon {
                    /* Zero out per-icon padding; the outer button
                       is the click area and the focus ring draws
                       outside the icon via `outline-offset`.
                       Overrides `.recipient_bar_icon`'s 6px side
                       padding from message_header.css. */
                    padding: 0;
                    border-radius: 0.3125em; /* 5px at 16px/1em */
                }
.inbox-container #inbox-pane #inbox-list .channel-visibility-policy-indicator,.inbox-container #inbox-pane #inbox-list .visibility-policy-indicator {
                margin-left: 3px;
            }
/* Normalize the inner icon's opacity to 1 so the outer
               wrapper is the single source of truth for opacity.
               Overrides `.recipient_bar_icon`'s 0.2 idle / 0.4
               hover from message_header.css for every marker
               wrapper — follow, mute, unmute, and the inherit
               (default) placeholder that becomes visible on row
               hover. */
.inbox-container #inbox-pane #inbox-list .channel-visibility-policy-indicator > .recipient_bar_icon,.inbox-container #inbox-pane #inbox-list .visibility-policy-indicator > .recipient_bar_icon {
                opacity: 1;

                /* Beat `.recipient_bar_icon:hover`'s !important. */
            }
.inbox-container #inbox-pane #inbox-list .channel-visibility-policy-indicator > .recipient_bar_icon:hover,.inbox-container #inbox-pane #inbox-list .visibility-policy-indicator > .recipient_bar_icon:hover {
                    opacity: 1 !important;
                }
/* Explicit topic/channel state markers are secondary
               information: visible at a glance, quieter than primary
               content. 0.45 is the lowest opacity that meets WCAG
               1.4.11's 3:1 non-text contrast against both the light
               (~3.4:1) and dark (~3.9:1) inbox row backgrounds. */
.inbox-container #inbox-pane #inbox-list .channel-visibility-policy-indicator,.inbox-container #inbox-pane #inbox-list .visibility-policy-indicator:not(.inbox-row-visibility-policy-inherit) {
                opacity: 0.45;
            }
/* Row-level interaction tiers for the icon-style wrapper
               types: action menu, channel-level marker, topic-level
               marker. The inherit subclass is reached via the
               topic-level marker since `.inbox-row-visibility-policy-
               inherit` is also a `.visibility-policy-indicator`. */
/* Mouse hover reveals/lifts wrappers to 0.45,
                   matching the explicit-marker idle tier. */
.inbox-container #inbox-pane #inbox-list .inbox-row:hover .inbox-action-button,.inbox-container #inbox-pane #inbox-list .inbox-row:hover .channel-visibility-policy-indicator,.inbox-container #inbox-pane #inbox-list .inbox-row:hover .visibility-policy-indicator,.inbox-container #inbox-pane #inbox-list .inbox-header:hover .inbox-action-button,.inbox-container #inbox-pane #inbox-list .inbox-header:hover .channel-visibility-policy-indicator,.inbox-container #inbox-pane #inbox-list .inbox-header:hover .visibility-policy-indicator {
                        opacity: 0.45;
                    }
/* Keyboard selection alone (row focused but not
                   mouse-hovered) reveals only the usually-hidden
                   action buttons at a much quieter 0.2. Explicit
                   state markers stay at their 0.45 idle — only the
                   tertiary reveal needs this extra-quiet step. The
                   `:not(:focus-visible)` exclusion ensures that when
                   the button itself has keyboard focus (via arrow-
                   right into the column), its own `:focus-visible`
                   rule sets the direct-interaction tier instead. */
.inbox-container #inbox-pane #inbox-list .inbox-row:focus-within:not(:focus):not(:hover) .inbox-action-button:not(:focus-visible) {
                        opacity: 0.2;
                    }
.inbox-container #inbox-pane #inbox-list .inbox-row:focus-within:not(:focus):not(:hover) .inbox-row-visibility-policy-inherit:not(:focus-visible) {
                        opacity: 0.2;
                    }
.inbox-container #inbox-pane #inbox-list .inbox-header:focus-within:not(:focus):not(:hover) .inbox-action-button:not(:focus-visible) {
                        opacity: 0.2;
                    }
.inbox-container #inbox-pane #inbox-list .inbox-header:focus-within:not(:focus):not(:hover) .inbox-row-visibility-policy-inherit:not(:focus-visible) {
                        opacity: 0.2;
                    }
.inbox-container #inbox-pane #inbox-list .inbox-row:focus-visible:not(:hover) .inbox-action-button {
                        opacity: 0.2;
                    }
.inbox-container #inbox-pane #inbox-list .inbox-row:focus-visible:not(:hover) .inbox-row-visibility-policy-inherit {
                        opacity: 0.2;
                    }
.inbox-container #inbox-pane #inbox-list .inbox-header:focus-visible:not(:hover) .inbox-action-button {
                        opacity: 0.2;
                    }
.inbox-container #inbox-pane #inbox-list .inbox-header:focus-visible:not(:hover) .inbox-row-visibility-policy-inherit {
                        opacity: 0.2;
                    }
/* Direct hover on a wrapper lifts to 0.7. Compound
                   selector beats the row-wide reveal on specificity. */
.inbox-container #inbox-pane #inbox-list .inbox-row:hover .inbox-action-button:hover,.inbox-container #inbox-pane #inbox-list .inbox-row:hover .channel-visibility-policy-indicator:hover,.inbox-container #inbox-pane #inbox-list .inbox-row:hover .visibility-policy-indicator:hover,.inbox-container #inbox-pane #inbox-list .inbox-header:hover .inbox-action-button:hover,.inbox-container #inbox-pane #inbox-list .inbox-header:hover .channel-visibility-policy-indicator:hover,.inbox-container #inbox-pane #inbox-list .inbox-header:hover .visibility-policy-indicator:hover {
                    opacity: 0.7;
                }
/* Wrapper keyboard focus = full opacity so the focus
                   ring renders at full blue saturation (WCAG 1.4.11
                   3:1 contrast). The inner icon dims to 0.7
                   separately via the rule under `&:focus-visible > i`
                   above. */
.inbox-container #inbox-pane #inbox-list .inbox-row:focus-within .inbox-action-button:focus-visible {
                    opacity: 1;
                }
.inbox-container #inbox-pane #inbox-list .inbox-row:focus-within .channel-visibility-policy-indicator:focus-visible {
                    opacity: 1;
                }
.inbox-container #inbox-pane #inbox-list .inbox-row:focus-within .visibility-policy-indicator:focus-visible {
                    opacity: 1;
                }
.inbox-container #inbox-pane #inbox-list .inbox-header:focus-within .inbox-action-button:focus-visible {
                    opacity: 1;
                }
.inbox-container #inbox-pane #inbox-list .inbox-header:focus-within .channel-visibility-policy-indicator:focus-visible {
                    opacity: 1;
                }
.inbox-container #inbox-pane #inbox-list .inbox-header:focus-within .visibility-policy-indicator:focus-visible {
                    opacity: 1;
                }
.inbox-container #inbox-pane #inbox-list .unread-count-focus-outline {
                /* Because the inbox view font-size will
                   never be smaller than the em-equivalent
                   of 15px, we restate the base font-size
                   here so that unreads match others in
                   the UI at legacy size (14px). */
                font-size: 14px;
                font-size: var(--base-font-size-px);
                grid-area: unread_count;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 3px;
                padding: 0 5px;
                /* Stretch to the row to keep unread
                   count from affecting overall row
                   size as test scales up. */
                align-self: stretch;
            }
/* Channels, topics, and direct messages mark their unread
               messages as read when their count is clicked. Folder
               headers (channel folders and the direct messages section)
               only show a combined count for everything inside them, so
               they don't get the clickable affordance. */
.inbox-container #inbox-pane #inbox-list .inbox-row:not(.does-not-exist) .unread-count-focus-outline,.inbox-container #inbox-pane #inbox-list .inbox-header:not(.inbox-folder) .unread-count-focus-outline {
                /* Whole 30×stretched hit area is clickable; surface
                   the same pointer cursor users had on the smaller
                   badge before the click target was expanded. */
                cursor: pointer;

                /* Forward the badge's hover outline to the wrapper:
                   the click handler now lives on the wrapper, so
                   hovering anywhere in the wrapper (not just the
                   small inner badge) should preview the click
                   affordance. */
            }
.inbox-container #inbox-pane #inbox-list .inbox-row:not(.does-not-exist) .unread-count-focus-outline:hover .unread_count,.inbox-container #inbox-pane #inbox-list .inbox-header:not(.inbox-folder) .unread-count-focus-outline:hover .unread_count {
                    outline-width: 1.5px;
                    outline-width: var(--focus-ring-width-in-views);
                }
.inbox-container #inbox-pane #inbox-list .unread_mention_info {
                grid-area: unread_mention_info;
                margin-right: 0;
            }
.inbox-container #inbox-pane #inbox-list .stream-privacy {
                display: flex;
                align-items: center;
                margin-right: 4px;
                margin-left: 17px;
            }
.inbox-container #inbox-pane #inbox-list .stream-privacy .zulip-icon {
                    line-height: 0.875em; /* 14px at 16px em */
                    height: 1em;
                    width: 1em;
                }
.inbox-container #inbox-pane #inbox-list .inbox-topic-name {
                /* 16px channel icon width + 10px padding */
                padding-left: 1.625em; /* 26x at 16px em */
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
.inbox-container #inbox-pane #inbox-list .inbox-topic-name a {
                    padding: 1px 0;
                    white-space: pre;
                }
.inbox-container #inbox-pane #inbox-list .inbox-left-part-wrapper {
                display: flex;
                width: 80%;
            }
.inbox-container #inbox-pane #inbox-list .inbox-left-part {
                width: 100%;
                display: grid;
                align-items: center;
            }
.inbox-container #inbox-pane #inbox-list .inbox-left-part:hover {
                    cursor: pointer;
                }
.inbox-container #inbox-pane #inbox-list .inbox-left-part .inbox-group-or-bot-dm {
                    position: relative;
                    left: -3px;

                    /* We don't display status emoji in group DMs,
                       so prepare an ordinary inline layout... */
                }
.inbox-container #inbox-pane #inbox-list .inbox-left-part .inbox-group-or-bot-dm .user-status-microlayout {
                        display: inline;
                        white-space: collapse;
                    }
/* ...and hide the status emoji. */
.inbox-container #inbox-pane #inbox-list .inbox-left-part .inbox-group-or-bot-dm .status-emoji {
                        display: none;
                    }
.inbox-container #inbox-pane #inbox-list .inbox-left-part .recipients_info {
                    display: flex;
                    flex-wrap: wrap;
                    -moz-column-gap: 10px;
                         column-gap: 10px;
                    grid-area: recipient_info;
                }
.inbox-container #inbox-pane #inbox-list .inbox-left-part .recipients_info .user_block {
                        display: flex;
                        align-items: center;
                    }
.inbox-container #inbox-pane #inbox-collapsed-note {
            display: none;
            overflow: hidden;
            max-width: calc(
                (27.4375em) +
                    10.7142em + 0.25em
            );
            max-width: calc(
                calc(27.4375em) +
                    10.7142em + 0.25em
            );
            max-width: calc(
                var(--width-inbox-search) +
                    var(--width-inbox-filters-dropdown) + 0.25em
            );
        }
.inbox-container #inbox-pane #inbox-collapsed-note .inbox-collapsed-note-and-button-wrapper {
                margin-top: 3px;
                padding-left: 8px;
            }
.inbox-container #inbox-pane #inbox-collapsed-note .inbox-collapsed-note-and-button-wrapper .inbox-collapsed-note-span {
                    font-size: 1em;
                }
.inbox-container #inbox-pane #inbox-collapsed-note .inbox-collapsed-note-and-button-wrapper #inbox-expand-all-button {
                    display: block;
                    margin-top: 5px;
                }
.inbox-container #inbox-pane .inbox-right-part-wrapper {
            flex-grow: 1;
        }
.inbox-container #inbox-pane .inbox-right-part-wrapper .inbox-right-part {
                display: flex;
                justify-content: space-between;
                flex-grow: 1;
            }
.inbox-container #inbox-pane .inbox-right-part-wrapper .inbox-right-part  > .inbox-action-button:first-child {
                    margin-left: auto;
                }
.inbox-container #inbox-pane .inbox-row-visibility-policy-inherit {
            opacity: 0;
        }
/* Stickiness: while a marker or action button has its popover
           open, keep it in the direct-interaction tier (0.7) so the
           user can see which element the open menu belongs to.
           Substring match on `*-popover-visible` covers every class
           the popover JS toggles — `topic-popover-visible` (added by
           `topic_popover.ts` and `stream_popover.ts` on
           `.inbox-action-button`) and `visibility-policy-popover-visible`
           (added by `user_topic_popover.ts` on the visibility-policy
           wrappers) — without enumerating element/class combinations,
           and stays correct if a future popover follows the same
           naming convention. */
.inbox-container #inbox-pane [class*="-popover-visible"] {
            opacity: 0.7;
        }
.inbox-container #inbox-pane .inbox-action-button {
            outline: none;
            opacity: 0;
            cursor: pointer;
        }
.inbox-container #inbox-pane .inbox-action-button.hide {
                display: none;
            }
.inbox-container #inbox-pane .inbox-action-button i {
                /* Match the color used by `.recipient_bar_icon` on
                   the state marker icons, so the 3-dots and the
                   follow/mute/unmute markers render in the same hue
                   as row-attention elevates both to visible. */
                --csstools-light-dark-toggle--1059: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
                color: hsl(0, 0%, 0%);
                color: var(--csstools-light-dark-toggle--1059, hsl(0, 0%, 0%));
                color: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
                color: var(--color-message-header-icon-interactive);
            }
.inbox-container .inbox-header-stream-archived {
        color: hsl(0, 0%, 50%);
        color: var(--color-text-message-header-archived);
        margin-left: 0.3125em; /* 5px at 16px em */
    }

#inbox-view {
    display: none;
    position: relative;
}

#inbox-view .inbox-folder {
        margin-bottom: 1px;
        background-color: transparent;
    }

#inbox-view .inbox-folder .inbox-header-name-text,#inbox-view .inbox-folder .unread_mention_info {
            --csstools-light-dark-toggle--1060: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
            color: hsl(216, 43%, 20%);
            color: var(--csstools-light-dark-toggle--1060, hsl(216, 43%, 20%));
            color: light-dark(hsl(216, 43%, 20%), hsl(216, 50%, 75%));
            color: var(--color-folder-header);
            opacity: 0.5;
        }

#inbox-view .inbox-folder .inbox-header-name-text {
            font-style: normal;
            font-weight: 600;
            font-weight: var(--font-weight-sidebar-heading);
            line-height: 112.5%;
            letter-spacing: 0.0469em;
            letter-spacing: var(--letter-spacing-sidebar-heading);
            text-transform: uppercase;
            outline: none;
            /* 16px at 16px / 1em */
            font-size: 1em;
            /* Align the folder title with the channel privacy icons; 5px at 16px/1em.

            TODO: Reduce the depth of selectors in this file,
            so that the use of !important becomes unnecessary
            here. */
            padding-left: 0.3125em !important;
        }

#inbox-view .inbox-folder:hover .inbox-header-name-text,#inbox-view .inbox-folder:hover .collapsible-button .zulip-icon,#inbox-view .inbox-folder:hover .unread_mention_info,#inbox-view .inbox-folder:hover .unread_count {
                opacity: 1;
            }

#inbox-view .hidden_by_filters {
        display: none !important;
    }

#inbox-view .channel-folders-inbox-menu-icon {
        display: grid;
        /* width excluding left & right margin */
        width: calc(1.625em - 4px);
        width: calc(var(--left-sidebar-vdots-width) - 4px);
        cursor: pointer;
        align-items: center;
        justify-items: center;
        place-items: center center;
        border-radius: 3px;
        margin: 2px;
        --csstools-light-dark-toggle--845: var(--csstools-color-scheme--light) hsl(240, 35%, 68%);
        color: hsl(240, 30%, 40%);
        color: var(--csstools-light-dark-toggle--845, hsl(240, 30%, 40%));
        color: light-dark(hsl(240, 30%, 40%), hsl(240, 35%, 68%));
        color: var(--color-vdots-visible);
    }

#inbox-view .channel-folders-inbox-menu-icon i.zulip-icon {
            font-size: 1.0625em;
        }

#inbox-view .channel-folders-inbox-menu-icon:hover {
            --csstools-light-dark-toggle--1061: var(--csstools-color-scheme--light) hsl(240, 100%, 90%);
            color: hsl(240, 100%, 15%);
            color: var(--csstools-light-dark-toggle--1061, hsl(240, 100%, 15%));
            color: light-dark(hsl(240, 100%, 15%), hsl(240, 100%, 90%));
            color: var(--color-vdots-hover);
            --csstools-light-dark-toggle--1062: var(--csstools-color-scheme--light) hsl(240, 25%, 35%);
            background-color: hsl(240, 100%, 93%);
            background-color: var(--csstools-light-dark-toggle--1062, hsl(240, 100%, 93%));
            background-color: light-dark(
        hsl(240, 100%, 93%),
        hsl(240, 25%, 35%)
    );
            background-color: var(--color-background-sidebar-action-hover);
        }

.inbox-container #inbox-pane #inbox-empty-without-search {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.inbox-empty-illustration {
    width: 54px;
    height: 54px;
    margin-bottom: 16px;
    --csstools-light-dark-toggle--590: var(--csstools-color-scheme--light) hsl(147, 40%, 55%);
    background-color: hsl(147, 57%, 25%);
    background-color: var(--csstools-light-dark-toggle--590, hsl(147, 57%, 25%));
    background-color: light-dark(
        hsl(147, 57%, 25%),
        hsl(147, 40%, 55%)
    );
    background-color: var(--color-background-inbox-no-unreads-illustration);
    -webkit-mask: url("../images/empty-view-illustrations/inbox-done.svg") no-repeat
        center;
            mask: url("../images/empty-view-illustrations/inbox-done.svg") no-repeat
        center;
}

.inbox-empty-title {
    /* Matches the font-size used for .empty-list-message */
    font-size: 1.5em;
    --csstools-light-dark-toggle--591: var(--csstools-color-scheme--light) hsl(147, 40%, 55%);
    color: hsl(147, 57%, 25%);
    color: var(--csstools-light-dark-toggle--591, hsl(147, 57%, 25%));
    color: light-dark(
        hsl(147, 57%, 25%),
        hsl(147, 40%, 55%)
    );
    color: var(--color-background-inbox-no-unreads-illustration);
}

.inbox-empty-action {
    font-size: 1.3em;
    padding-top: 0.5em;
}

.inbox-container #inbox-pane .inbox-empty-action-link {
    color: hsl(200, 100%, 40%);
    color: var(--color-text-url);
}

.inbox-container #inbox-pane .inbox-empty-action-link:hover {
        --csstools-light-dark-toggle--1063: var(--csstools-color-scheme--light) hsl(200, 79%, 66%);
        color: hsl(200, 100%, 25%);
        color: var(--csstools-light-dark-toggle--1063, hsl(200, 100%, 25%));
        color: light-dark(
        hsl(200, 100%, 25%),
        hsl(200, 79%, 66%)
    );
        color: var(--color-text-url-hover);
    }

#inbox-filter_widget {
    margin-right: 0.3571em; /* 5px / 14px em */
    max-width: 10.7142em;
    max-width: var(--width-inbox-filters-dropdown);
    --csstools-light-dark-toggle--846: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.2);
    border: 1px solid hsla(229, 22%, 10%, 0.3);
    border: 1px solid var(--csstools-light-dark-toggle--846, hsla(229, 22%, 10%, 0.3));
    border: 1px solid light-dark(
        hsla(229, 22%, 10%, 0.3),
        hsla(0, 0%, 100%, 0.2)
    );
    border: 1px solid var(--color-border-inbox-search);
    --csstools-light-dark-toggle--847: var(--csstools-color-scheme--light) hsl(225, 6%, 10%);
    background-color: hsl(0, 0%, 100%);
    background-color: var(--csstools-light-dark-toggle--847, hsl(0, 0%, 100%));
    background-color: light-dark(
        hsl(0, 0%, 100%),
        hsl(225, 6%, 10%)
    );
    background-color: var(--color-background-inbox-search);
    gap: 0.3571em; /* 5px / 14px em */
    /* 1.5px at 16px/1em and legacy 6px at 14px/1em. */
    padding: 0.0937em 0.4285em;
}

#inbox-filter_widget:hover {
        --csstools-light-dark-toggle--848: var(--csstools-color-scheme--light) hsl(225, 6%, 8%);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--848, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        hsl(225, 6%, 8%)
    );
        background-color: var(--color-background-inbox-search-hover);
        --csstools-light-dark-toggle--849: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.4);
        border: 1px solid hsla(229, 22%, 10%, 0.6);
        border: 1px solid var(--csstools-light-dark-toggle--849, hsla(229, 22%, 10%, 0.6));
        border: 1px solid light-dark(
        hsla(229, 22%, 10%, 0.6),
        hsla(0, 0%, 100%, 0.4)
    );
        border: 1px solid var(--color-border-inbox-search-hover);
    }

#inbox-filter_widget:focus {
        outline: none;
    }

#recent-view-filter_widget .dropdown_widget_value,
#inbox-filter_widget .dropdown_widget_value {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: left;
}

#recent-view-filter_widget .zulip-icon-chevron-down,
#inbox-filter_widget .zulip-icon-chevron-down {
    --csstools-light-dark-toggle--592: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
    color: hsl(0, 0%, 0%);
    color: var(--csstools-light-dark-toggle--592, hsl(0, 0%, 0%));
    color: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 100%));
    color: var(--color-icons-inbox);
    opacity: 0.4;
}

.recent-view-filter-dropdown-list-container .dropdown-list-wrapper,
.inbox-filter-dropdown-list-container .dropdown-list-wrapper,
.new_channel_privacy-dropdown-list-container .dropdown-list-wrapper,
.channel_privacy-dropdown-list-container .dropdown-list-wrapper {
    /* We want these dropdowns to open to fit their
       contents, which differ based on the language
       in use. */
    width: 100%;
    /* We also don't want to set a min-width, again
       so that the content is in charge. This pushes
       back against more generic styles. */
    min-width: 0;
    min-width: initial;
}

.recent-view-filter-dropdown-list-container
    .dropdown-list
    .dropdown-list-item-common-styles,
.inbox-filter-dropdown-list-container
    .dropdown-list
    .dropdown-list-item-common-styles,
.new_channel_privacy-dropdown-list-container
    .dropdown-list
    .dropdown-list-item-common-styles,
.channel_privacy-dropdown-list-container
    .dropdown-list
    .dropdown-list-item-common-styles {
    /* Parallel to the `width: 100%` set on
       .dropdown-list-wrapper above, we set
       min-width here to max-content so that
       the box opens to accommodate different
       lengths of text--and to ensure that
       hovered/selectable areas look correct. */
    min-width: -moz-max-content;
    min-width: max-content;
    padding: 5px 10px;
    display: flex;
    flex-direction: column;
    /* For columnar flex items, we need
       to make set alignment to the start
       of the flex container. This pushes
       back against non-columnar flexboxes
       that require centered alignment. */
    align-items: flex-start;
}

.recent-view-filter-dropdown-list-container .dropdown-list-item-name,
.inbox-filter-dropdown-list-container .dropdown-list-item-name,
.new_channel_privacy-dropdown-list-container .dropdown-list-item-name,
.channel_privacy-dropdown-list-container .dropdown-list-item-name {
    white-space: nowrap;
    font-weight: 500;
    padding: 0;
    margin: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

.recent-view-filter-dropdown-list-container .dropdown-list-item-description,
.inbox-filter-dropdown-list-container .dropdown-list-item-description,
.channel_privacy-dropdown-list-container .dropdown-list-item-description,
.new_channel_privacy-dropdown-list-container .dropdown-list-item-description {
    white-space: nowrap;
    font-weight: 400;
    font-size: 0.9285em; /* 13px at 14px em */
    opacity: 0.8;
    padding: 0;
    text-overflow: ellipsis;
    overflow: hidden;
}

.inbox-container #inbox-pane .inbox-folder .unread_count {
    transition: none;
    display: none;
}

#inbox-pane #inbox-list .collapsible-button {
    visibility: hidden;
}

#inbox-pane #inbox-list .inbox-collapsed-state .collapsible-button {
    visibility: visible;
}

#inbox-pane #inbox-list .inbox-collapsed-state .collapsible-button .zulip-icon-chevron-down {
        transform: rotate(0deg);
    }

.folder-row-chevron {
    --csstools-light-dark-toggle--593: var(--csstools-color-scheme--light) hsl(216, 50%, 75%);
    color: hsl(216, 43%, 20%);
    color: var(--csstools-light-dark-toggle--593, hsl(216, 43%, 20%));
    color: light-dark(hsl(216, 43%, 20%), hsl(216, 50%, 75%));
    color: var(--color-folder-header);
}

.channel-row-chevron {
    --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) #aaadba;
    color: #535663;
    color: var(--csstools-light-dark-toggle--24, #535663);
    color: light-dark(#535663, #aaadba);
    color: var(--color-inbox-row-chevron);
}

.inbox-collapsed-state .folder-row-chevron,.inbox-collapsed-state .channel-row-chevron {
        opacity: 0.5;
    }

.inbox-container #inbox-pane .inbox-folder .unread_mention_info {
    display: none;
}

.inbox-container
    #inbox-pane
    .inbox-folder.inbox-collapsed-state
    .unread_mention_info,
.inbox-container #inbox-pane .inbox-folder.inbox-collapsed-state .unread_count {
    display: inline;
}

.inbox-folder-components {
    border-radius: 5px;
    border: 0.5px solid
        hsla(0, 0%, 0%, 0.13);
    border: var(--inbox-view-folder-component-border-width) solid
        var(--color-border-inbox-folder-component);
    overflow: hidden;
}

.inbox-folder-components:has(.inbox-row:not(.hidden_by_filters)),.inbox-folder-components:has(.inbox-header:not(.hidden_by_filters)) {
        margin-bottom: 0.5em;
    }

.inbox-folder.inbox-collapsed-state  + .inbox-folder-components,.inbox-folder.hidden_by_filters  + .inbox-folder-components {
        border: 0;
    }

#inbox-pane #inbox-list .inbox-collapsed-state  + .inbox-folder-components,#inbox-pane #inbox-list .inbox-collapsed-state  + .inbox-topic-container {
        display: none;
    }

#inbox-pane
    #inbox-list
    .inbox-streams-container
    .inbox-header
    .inbox-header-name {
    /* 5px at 16px / 1em */
    padding: 1px 0.3125em 1px 0;
}

/* Remove default focus outline from elements. */

#inbox-view.no-visible-focus-outlines .inbox-container #inbox-pane [tabindex="0"]:focus-visible {
        outline: 0;
    }

/* Only show focus outlines when user uses keyboard. */

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane #inbox-filter_widget:focus-visible {
            outline: 1.5px solid
        hsl(215, 47%, 50%);
            outline: var(--focus-ring-outline);
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-row:focus-visible {
            /* Flush outline on the row itself instead of the old
               2px inner-border on `.inbox-focus-border`; matches
               `.recent-view-body-row`'s focus style, but inbox rows
               are tighter (30px) so the outline sits at the row
               edges instead of insetting 4px. */
            outline: 1.5px solid
        hsl(215, 47%, 50%);
            outline: var(--focus-ring-outline);
            outline-offset: calc(
        -1 * 1.5px
    );
            outline-offset: var(--focus-ring-outline-offset-in-views);
            border-radius: 0.3125em; /* 5px at 16px/1em */
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-header:focus-visible {
            /* Flush outline on the row itself instead of the old
               2px inner-border on `.inbox-focus-border`; matches
               `.recent-view-body-row`'s focus style, but inbox rows
               are tighter (30px) so the outline sits at the row
               edges instead of insetting 4px. */
            outline: 1.5px solid
        hsl(215, 47%, 50%);
            outline: var(--focus-ring-outline);
            outline-offset: calc(
        -1 * 1.5px
    );
            outline-offset: var(--focus-ring-outline-offset-in-views);
            border-radius: 0.3125em; /* 5px at 16px/1em */
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-header:focus-visible .collapsible-button > .zulip-icon {
            opacity: 1;
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-header:focus-visible .collapsible-button {
            visibility: visible;
        }

/* Focus ring for the icon-style row actions. Outline lives on
       the wrapper (at full opacity) so the ring renders at full
       blue saturation and meets WCAG 1.4.11's 3:1 contrast
       requirement for focus indicators. Negative outline-offset
       pulls the 1.5px stroke inside the 30×30 wrapper bounds so it
       doesn't clip against the row's overflow:hidden edge, giving
       a 26×26 effective ring. The inner icon dims separately. */

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .channel-visibility-policy-indicator:focus-visible {
            outline: 1.5px solid
        hsl(215, 47%, 50%);
            outline: var(--focus-ring-outline);
            outline-offset: -0.125em; /* -2px at 16px/1em */
            border-radius: 0.3125em; /* 5px at 16px/1em */
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .visibility-policy-indicator:focus-visible {
            outline: 1.5px solid
        hsl(215, 47%, 50%);
            outline: var(--focus-ring-outline);
            outline-offset: -0.125em; /* -2px at 16px/1em */
            border-radius: 0.3125em; /* 5px at 16px/1em */
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-action-button:focus-visible {
            outline: 1.5px solid
        hsl(215, 47%, 50%);
            outline: var(--focus-ring-outline);
            outline-offset: -0.125em; /* -2px at 16px/1em */
            border-radius: 0.3125em; /* 5px at 16px/1em */
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .channel-visibility-policy-indicator:focus-visible  > i {
                opacity: 0.7;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .visibility-policy-indicator:focus-visible  > i {
                opacity: 0.7;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-action-button:focus-visible  > i {
                opacity: 0.7;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .channel-visibility-policy-indicator:focus-visible  > .zulip-icon {
                opacity: 0.7;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .visibility-policy-indicator:focus-visible  > .zulip-icon {
                opacity: 0.7;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-action-button:focus-visible  > .zulip-icon {
                opacity: 0.7;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .channel-visibility-policy-indicator:focus-visible  > .recipient_bar_icon {
                opacity: 0.7;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .visibility-policy-indicator:focus-visible  > .recipient_bar_icon {
                opacity: 0.7;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-action-button:focus-visible  > .recipient_bar_icon {
                opacity: 0.7;
            }

/* Focus ring drawn as a pseudo-element on the inner badge,
       with `5px` of breathing room outside the badge. A
       wrapper-sized outline (the previous implementation) leaves a
       wide gap between the ring and the badge fill that reads as a
       second concentric outline; the deliberate 5px gap here reads
       as padding around a single badge instead. */

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .unread-count-focus-outline:focus-visible {
            outline: none;
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .unread-count-focus-outline:focus-visible .unread_count {
                position: relative;

                /* Suppress the inner `.normal-count` `inset`
                   `box-shadow` so it doesn't sit as a second,
                   narrower outline inside the focus ring. */
                box-shadow: none;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .unread-count-focus-outline:focus-visible .unread_count::after {
                    content: "";
                    position: absolute;
                    top: -0.3125em;
                    right: -0.3125em;
                    bottom: -0.3125em;
                    left: -0.3125em; /* -5px at 16px/1em */
                    border: 1.5px solid
        hsl(215, 47%, 50%);
                    border: var(--focus-ring-outline);
                    border-radius: 0.5em;
                    border-radius: var(
                        --unread-count-focus-outline-radius-in-views
                    );
                    pointer-events: none;
                }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-folder:focus-visible .inbox-header-name-text {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-folder:focus-visible .collapsible-button .zulip-icon {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-folder:focus-visible .unread_mention_info {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-folder:focus-visible .unread_count {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-folder:focus-visible {

            --csstools-light-dark-toggle--594: var(--csstools-color-scheme--light) var(--color-background-hover-popover-menu);

            background: transparent;

            background: var(--csstools-light-dark-toggle--594, transparent);

            background: light-dark(
                transparent,
                light-dark(
        hsl(220deg 12% 5% / 5%),
        hsl(220deg 12% 95% / 5%)
    )
            );
        }

@supports (color: light-dark(red, red)) {
#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-folder:focus-visible {

            background: light-dark(
                transparent,
                var(--color-background-hover-popover-menu)
            );
        }
}

#inbox-view .inbox-container #inbox-pane #inbox-expand-all-button {
    --color-outline-button-focus: var(--color-outline-focus);
    --outline-offset-button-focus: var(--focus-ring-outline-offset-in-views);
}

#inbox-animation-extra-content-blocker {
    --csstools-light-dark-toggle--595: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background: hsl(0, 0%, 94%);
    background: var(--csstools-light-dark-toggle--595, hsl(0, 0%, 94%));
    background: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background: var(--color-background-inbox);
}

/* ---- recent_view.css ---- */
.recent_view_container {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(
        2.5em + 0px
    );
    top: var(--navbar-fixed-height);
    z-index: 1;
}

.recent_view_container #recent_view_table {
    max-width: 100%;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    border: 0;
    --csstools-light-dark-toggle--596: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
    background-color: hsl(0, 0%, 94%);
    background-color: var(--csstools-light-dark-toggle--596, hsl(0, 0%, 94%));
    background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
    background-color: var(--color-background);
}

#recent_view_table .table,
#recent-view-content-table {
    /* To keep border properties to the thead th. */
    border-collapse: separate;
    table-layout: fixed;

    border-spacing: 0;
    width: 100%;
}

#recent-view-content-table {
    border: 1px solid
        hsla(0, 0%, 0%, 0.13);
    border: var(--recent-view-body-border-width) solid
        var(--color-border-recent-view-table);
    border-top: none;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
}

#recent_view {
    --recent-view-header-channel-column-adjustment: calc(
        var(--recent-view-row-left-padding) +
            var(--recent-view-body-border-width) -
            var(--recent-view-header-border-width)
    );

    display: none;
    padding-top: calc(
        2.5em + 0px
    );
    padding-top: var(--navbar-fixed-height);
    /* Add bottom padding equal to `#bottom-whitespace`. This helps us keep #compose visible
       at its max-height without overlapping with any visible topics. */
    padding-bottom: 40vh;
    padding-bottom: var(--max-unmaximized-compose-height);
}

#recent_view td {
        box-sizing: border-box;
        vertical-align: middle;
        padding: 0.1875em 0.5em; /* 3px 8px at 16px/1em */
    }

/* Suppress focus rings and the focus-driven vdots reveal when
       focus was set programmatically (e.g., on page load or
       sidebar click). The class is removed on the first keyboard
       navigation, restoring :focus outlines and the icon reveals
       below. See focus_outline_util.ts. The icon-opacity rules
       mirror the selectors they override (in `.recent_view_focusable`
       below) so each wins on specificity from the extra class. */

#recent_view.no-visible-focus-outlines .recent_view_focusable:focus {
            outline: 0;
        }

#recent_view.no-visible-focus-outlines .recent_view_focusable:focus > .change_visibility_policy .recent-view-row-topic-menu:not(.does-not-exist),#recent_view.no-visible-focus-outlines .recent_view_focusable:focus > .change_visibility_policy .visibility-status-icon[data-vdots-original-icon-class] {
            opacity: 0;
        }

#recent_view.no-visible-focus-outlines .recent_view_focusable.recent-view-body-row:focus:not(:hover) .change_visibility_policy .recent-view-row-topic-menu:not(.does-not-exist),#recent_view.no-visible-focus-outlines .recent_view_focusable.recent-view-body-row:focus:not(:hover) .change_visibility_policy .visibility-status-icon[data-vdots-original-icon-class] {
            opacity: 0;
        }

#recent_view .recent_view_focusable > .zulip-icon {
            outline: 0;
        }

#recent_view .recent_view_focusable:focus {
            outline: 1.5px solid
        hsl(215, 47%, 50%);
            outline: var(--focus-ring-outline);

            /* Match both the natively-rendered vdots icon and the
               swapped vdots (signaled by the data attribute set in
               `recent_view_ui.update_visibility_icon_swap_state`) so
               the wrapper-focus tier reads the same regardless of
               whether the row has a status marker. */
        }

#recent_view .recent_view_focusable:focus  > .change_visibility_policy .recent-view-row-topic-menu:not(.does-not-exist),#recent_view .recent_view_focusable:focus  > .change_visibility_policy .visibility-status-icon[data-vdots-original-icon-class] {
                /* Wrapper focus = direct interaction on the
                   menu button; top of the tier. */
                opacity: 0.7;
            }

/* Stickiness: while the 3-dots topic menu has its popover
           open, keep the icon in the direct-interaction tier (0.7)
           so the user can see which row the open menu belongs to. */

#recent_view .recent_view_focusable.topic-popover-visible > .change_visibility_policy .visibility-status-icon {
            opacity: 0.7;
        }

/* Row keyboard-selected but not mouse-hovered: extra-quiet
           reveal of the default-state 3-dots icon, so keyboard
           navigation doesn't loudly advertise an action the user
           rarely needs. Mouse hover's 0.4 rule below overrides
           whenever the mouse is on the row. */

#recent_view .recent_view_focusable.recent-view-body-row:focus:not(:hover) .change_visibility_policy .recent-view-row-topic-menu:not(.does-not-exist),#recent_view .recent_view_focusable.recent-view-body-row:focus:not(:hover) .change_visibility_policy .visibility-status-icon[data-vdots-original-icon-class] {
            opacity: 0.2;
        }

#recent_view .recent_view_focusable.recent-view-topic-visibility {
            /* 3px (vs. 5px on `.recent-view-body-row`) keeps a
               consistent perceived corner-rounding ratio: 5px on
               a wide row reads as a subtle round, but on a small
               22×22 ring (icon-natural wrapper + 3px outset) it
               reads as nearly circular. */
            border-radius: 0.1875em; /* 3px at 16px/1em */
            /* 3px rather than 5px: the wrapper sits hard against
               the recent-view table's right edge (the table has
               overflow:hidden), so a 5px outset left the outline's
               right side clipped. 3px gives comfortable clearance
               while still matching the inbox's 22×22 effective
               ring size around a 16×16 icon. */
            outline-offset: 0.1875em; /* 3px at 16px/1em */
        }

#recent_view .recent_view_focusable  > .change_visibility_policy {
            display: flex;
        }

#recent_view .recent_view_focusable  > .change_visibility_policy .recent-view-row-topic-menu {
            /* Tertiary action: hidden at rest, revealed on row
               hover / focus, brightened on direct interaction. */
            opacity: 0;
            cursor: pointer;
        }

#recent_view .recent_view_focusable > .change_visibility_policy .recent-view-row-topic-menu:hover {
                opacity: 0.7;
            }

#recent_view .recent_view_focusable > .change_visibility_policy .recent-view-row-topic-menu:not(.visibility-status-icon) {
                display: none;
            }

#recent_view a {
        --csstools-light-dark-toggle--850: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.75);
        color: hsl(0, 0%, 20%);
        color: var(--csstools-light-dark-toggle--850, hsl(0, 0%, 20%));
        color: light-dark(
        hsl(0, 0%, 20%),
        hsla(0, 0%, 100%, 0.75)
    );
        color: var(--color-recent-view-link);
        -webkit-text-decoration: none;
        text-decoration: none;
    }

#recent_view .empty-table-message {
        --csstools-light-dark-toggle--851: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background-color: hsl(0, 0%, 94%);
        background-color: var(--csstools-light-dark-toggle--851, hsl(0, 0%, 94%));
        background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background-color: var(--color-background);
        padding: 3em 1em;
    }

#recent_view .recent-view-empty-load-more {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        /* Reset the 1.5em font-size inherited from
           .empty-table-message so the load-more text
           and button match normal UI text size. */
        font-size: 14px;
        font-size: var(--base-font-size-px);
    }

#recent_view .fa-check-square-o,#recent_view .fa-square-o {
        width: 0.7142em; /* Legacy 10px size at 14px/1em. */
        padding-right: 0.3571em; /* Legacy 5px size at 14px/1em. */
        padding-left: 0.1428em; /* Legacy 2px size at 14px/1em. */
    }

#recent_view .table_fix_head {
        padding: 0 !important;
        border: 1px solid
            hsla(0, 0%, 0%, 0.13);
        border: var(--recent-view-header-border-width) solid
            var(--color-border-recent-view-table);
        border-radius: 5px 5px 0 0;
        overflow: hidden;
    }

#recent_view .recent-view-load-more-container {
        margin: 20px 10px;
        align-items: center;
    }

#recent_view .fetch-messages-button {
        display: grid;
        align-items: center;
        justify-items: center;
        place-items: center;

        /* Stack the loading indicator and button label in the
           same grid cell so the label stays vertically centered
           when the indicator is empty/hidden. */
    }

#recent_view .fetch-messages-button  > * {
            grid-row: 1;
            grid-column: 1;
        }

/* Override the inline height: 0 set by loading.make_indicator
           so the spinner participates in grid alignment. */

#recent_view .fetch-messages-button .loading-indicator {
            height: auto !important;
        }

#recent_view .fetch-messages-button .loading_indicator_spinner {
            height: 20px;
            width: 20px;
        }

#recent_view .fetch-messages-button path {
            --csstools-light-dark-toggle--1064: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.6);
            fill: hsl(0, 0%, 27%);
            fill: var(--csstools-light-dark-toggle--1064, hsl(0, 0%, 27%));
            fill: light-dark(
        hsl(0, 0%, 27%),
        hsla(0, 0%, 100%, 0.6)
    );
            fill: var(--color-recent-view-loading-spinner);
        }

#recent_view #recent_view_filter_buttons {
        /* This padding-top value aligns the recents filters
           with the filters in the left and right sidebars.
           TODO: As part of the recents redesign, these filters
           should match the height of the sidebar filters. */
        padding: 10px 0 0;
        display: flex;
        gap: 0.7142em;
        gap: var(--recent-topics-filters-gap);
        /* Search box has no height without this in safari. */
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: flex-start;
        --csstools-light-dark-toggle--852: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background: hsl(0, 0%, 94%);
        background: var(--csstools-light-dark-toggle--852, hsl(0, 0%, 94%));
        background: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background: var(--color-background);
    }

#recent_view #recent_filters_group {
        display: flex;
        flex-flow: row wrap;
        gap: 0.7142em;
        gap: var(--recent-topics-filters-gap);
    }

#recent_view #recent-view-search-wrapper {
        flex-grow: 1;
        margin-bottom: 0.7142em;
        margin-bottom: var(--recent-topics-filters-gap);
        /* Prevent the search input outline from being clipped
           by the overflow:hidden ancestor at fractional browser
           zoom levels. Applied on both sides because this
           element can wrap to its own line at narrow widths.
           2px because 1px can round to 0 device pixels at
           certain fractional zoom levels (e.g., 80%). */
        margin-left: 2px;
        margin-right: 2px;
    }

#recent_view .button-recent-filters {
        --csstools-light-dark-toggle--853: var(--csstools-color-scheme--light) hsl(0, 0%, 87%);
        color: hsl(0, 0%, 20%);
        color: var(--csstools-light-dark-toggle--853, hsl(0, 0%, 20%));
        color: light-dark(hsl(0, 0%, 20%), hsl(0, 0%, 87%));
        color: var(--color-text-default);
        --csstools-light-dark-toggle--854: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.2);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--854, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    );
        background-color: var(--color-background-zulip-button);
        --csstools-light-dark-toggle--855: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.6);
        border: 1px solid hsl(0, 0%, 80%);
        border: 1px solid var(--csstools-light-dark-toggle--855, hsl(0, 0%, 80%));
        border: 1px solid light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.6)
    );
        border: 1px solid var(--color-border-zulip-button);
        border-radius: 40px;
        /* Matching to the height of the filter search box. */
        height: 1.9375em;
        height: var(--recent-topics-filters-height);
        /* Legacy 12px at 14px/1em. */
        padding: 0 0.8571em;

        flex: 0 0 auto;
        display: flex;
        align-items: center;
        font-family: inherit;
        font-size: inherit;
    }

#recent_view .button-recent-filters:hover {
            --csstools-light-dark-toggle--1065: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.15);
            background-color: hsl(0, 0%, 100%);
            background-color: var(--csstools-light-dark-toggle--1065, hsl(0, 0%, 100%));
            background-color: light-dark(
        light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    ),
        hsla(0, 0%, 0%, 0.15)
    );
            background-color: var(--color-background-zulip-button-hover);
        }

#recent_view .button-recent-filters:active {
            --csstools-light-dark-toggle--1066: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.15);
            background-color: hsl(0, 0%, 95%);
            background-color: var(--csstools-light-dark-toggle--1066, hsl(0, 0%, 95%));
            background-color: light-dark(
        hsl(0, 0%, 95%),
        light-dark(
        light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.2)
    ),
        hsla(0, 0%, 0%, 0.15)
    )
    );
            background-color: var(--color-background-zulip-button-active);
        }

#recent_view .button-recent-filters:focus-visible {
            --csstools-light-dark-toggle--1067: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
            background-color: hsl(0, 0%, 80%);
            background-color: var(--csstools-light-dark-toggle--1067, hsl(0, 0%, 80%));
            background-color: light-dark(
        hsl(0, 0%, 80%),
        hsla(0, 0%, 0%, 0.5)
    );
            background-color: var(
                --color-background-recent-filters-button-focus
            );
            outline: 0;
        }

#recent_view .button-recent-filters.fake_disabled_button {
            cursor: not-allowed;
            opacity: 0.5;
        }

#recent_view .button-recent-filters.fake_disabled_button:hover {
                --csstools-light-dark-toggle--1068: var(--csstools-color-scheme--light) hsla(0, 0%, 0%, 0.5);
                background-color: hsl(0, 0%, 100%);
                background-color: var(--csstools-light-dark-toggle--1068, hsl(0, 0%, 100%));
                background-color: light-dark(
        hsl(0, 0%, 100%),
        hsla(0, 0%, 0%, 0.5)
    );
                background-color: var(
                    --color-background-recent-filters-button-disabled
                );
                --csstools-light-dark-toggle--1069: var(--csstools-color-scheme--light) hsl(0, 0%, 0%);
                border-color: hsl(0, 0%, 80%);
                border-color: var(--csstools-light-dark-toggle--1069, hsl(0, 0%, 80%));
                border-color: light-dark(
        hsl(0, 0%, 80%),
        hsl(0, 0%, 0%)
    );
                border-color: var(
                    --color-border-recent-filters-button-disabled
                );
            }

#recent_view .button-recent-selected {
        --csstools-light-dark-toggle--856: var(--csstools-color-scheme--light) hsl(244, 96%, 82%);
        color: hsl(264, 95%, 34%);
        color: var(--csstools-light-dark-toggle--856, hsl(264, 95%, 34%));
        color: light-dark(
        hsl(264, 95%, 34%),
        hsl(244, 96%, 82%)
    );
        color: var(--color-text-brand-subtle-action-button);
        --csstools-light-dark-toggle--857: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
        background-color: rgba(130, 93, 254, 0.12);
        background-color: var(--csstools-light-dark-toggle--857, rgba(130, 93, 254, 0.12));
        background-color: light-dark(
        rgba(130, 93, 254, 0.12),
        rgba(160, 150, 253, 0.12)
    );
        background-color: var(--color-background-brand-subtle-action-button);
    }

#recent_view .button-recent-selected:hover {
            --csstools-light-dark-toggle--1070: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.17);
            background-color: rgba(130, 93, 254, 0.17);
            background-color: var(--csstools-light-dark-toggle--1070, rgba(130, 93, 254, 0.17));
            background-color: light-dark(
        rgba(130, 93, 254, 0.17),
        rgba(160, 150, 253, 0.17)
    );
            background-color: var(
                --color-background-brand-subtle-action-button-hover
            );
        }

#recent_view .button-recent-selected:active {
            --csstools-light-dark-toggle--1071: var(--csstools-color-scheme--light) rgba(160, 150, 253, 0.12);
            background-color: rgba(130, 93, 254, 0.22);
            background-color: var(--csstools-light-dark-toggle--1071, rgba(130, 93, 254, 0.22));
            background-color: light-dark(
        rgba(130, 93, 254, 0.22),
        rgba(160, 150, 253, 0.12)
    );
            background-color: var(
                --color-background-brand-subtle-action-button-active
            );
        }

#recent_view .unread_count {
        /* Focus underline can only occupy the total length of the unread count */
        margin-right: 1px;
        margin-left: 1px;
        align-self: center;
        opacity: 1;
        --csstools-light-dark-toggle--858: var(--csstools-color-scheme--light) hsl(240, 18%, 34%);
        outline: 0 solid hsla(240, 10%, 50%, 0.7);
        outline: 0 solid var(--csstools-light-dark-toggle--858, hsla(240, 10%, 50%, 0.7));
        outline: 0 solid light-dark(
        hsla(240, 10%, 50%, 0.7),
        hsl(240, 18%, 34%)
    );
        outline: 0 solid var(--color-background-unread-counter);
    }

#recent_view .unread_count:hover {
            outline-width: 1.5px;
            outline-width: var(--focus-ring-width-in-views);
        }

#recent_view .unread_mention_info:not(:empty) {
        /* Zero out right margin from left sidebar presentation. */
        margin-right: 0;
        /* Match with its font-size. */
        line-height: 14px;
        /* Present a default/arrow cursor */
        cursor: default;
    }

#recent_view .unread_hidden {
        display: none;
    }

#recent_view .flex_container {
        display: flex;
        align-items: center;
    }

#recent_view .inline-flex-container {
        display: inline-flex;
        align-items: center;
    }

#recent_view .recent_topic_actions {
        /* Add spacing between mention marker, unread count
            and mute icon */
        margin-left: 0.3125em; /* 5px at 16px/1em */
        display: flex;
        flex-flow: row nowrap;
    }

#recent_view .recent-view-unread-mention-and-count-wrapper .recent_topic_actions {
        /* Unset margin; gap on the wrapper handles spacing. */
        margin-left: 0;
        margin-right: 0;
    }

#recent_view .recent-view-unread-mention-and-count-wrapper .unread_count {
        /* Unset margin; gap on the wrapper handles spacing. */
        margin: 0;
    }

#recent_view .mention_in_unread {
        opacity: 0.7;
    }

#recent_view .recent_topic_actions.dummy_action_button {
        visibility: hidden;
    }

#recent_view .recent_topic_actions .recipient_bar_icon {
        /* Zero out padding used in recipient bar. */
        padding-right: 0;
        padding-left: 0;
    }

/* Topic state markers (follow/mute/unmute) are secondary
       information: visible at a glance, but quieter than primary
       content. Overrides `.recipient_bar_icon`'s 0.2 idle / 0.4
       hover from message_header.css. */

#recent_view .recent_topic_actions .visibility-status-icon:not(.recent-view-row-topic-menu) {
        /* 0.45 is the lowest opacity that meets WCAG 1.4.11's 3:1
           non-text contrast against both light and dark row
           backgrounds. */
        opacity: 0.45;
    }

#recent_view .recent_topic_actions .visibility-status-icon:not(.recent-view-row-topic-menu):hover {
            /* Beat `.recipient_bar_icon:hover`'s !important. */
            opacity: 0.7 !important;
        }

#recent_view .recent_view_participants {
        display: inline-flex; /* Causes LI items to display in row. */
        /* Keep avatars centered on the line. */
        vertical-align: middle;
        list-style-type: none;
        margin: auto; /* Centers vertically / horizontally in flex container. */
        /* 24px at 16px/1em */
        height: 1.5em;
        /* 4px at 16px/1em */
        padding: 0.25em 0;
        border-radius: 6px;
        overflow: hidden;

        /*
            By using the row-reverse layout, the visual ordering will be opposite of
            the DOM ordering. This will allows us to stack the items in the opposite
            direction of the natural stacking order without having to mess with the
            zIndex value. The MAJOR DOWNSIDE is that the HTML itself now reads
            backwards, which super janky.
        */
        flex-direction: row-reverse;
    }

#recent_view .recent_view_participants:first-child {
            /* Remove padding of first child to align with header text. */
            padding-left: 0;
        }

#recent_view .recent_view_participant_item {
        /* 24px at 16px/1em */
        height: 1.5em;
        margin: 0;
        padding: 0 0.0938em;
        padding: 0 var(--recent-view-participant-item-padding-x);
        position: relative;
        width: 1.5em;
        width: var(--recent-view-participant-item-width);
        cursor: pointer;

        /* Can't use last-child due to tippy element being appended */
    }

#recent_view .recent_view_participant_item:last-of-type {
            /* Remove right padding of last item to align with header text. */
            padding-left: 0;
        }

#recent_view .recent_view_participant_item:first-of-type {
            padding-right: 0;
        }

#recent_view .recent_view_participant_item .fa-user {
            opacity: 0.7;
        }

#recent_view .recent_view_participant_avatar,#recent_view .recent_view_participant_overflow {
        border: 0;
        /* Keep the rounded corners from ballooning
           to a circle at smaller font sizes.
           6px at 16px/1em */
        border-radius: 0.375em;
        --csstools-light-dark-toggle--859: var(--csstools-color-scheme--light) hsl(0, 0%, 100%);
        color: hsl(0, 0%, 0%);
        color: var(--csstools-light-dark-toggle--859, hsl(0, 0%, 0%));
        color: light-dark(
        hsl(0, 0%, 0%),
        hsl(0, 0%, 100%)
    );
        color: var(--color-recent-view-participant-overflow-text);
        display: block;
        height: 100%;
        text-align: center;
        --csstools-light-dark-toggle--860: var(--csstools-color-scheme--light) hsl(211, 18%, 25%);
        background-color: hsl(0, 0%, 88%);
        background-color: var(--csstools-light-dark-toggle--860, hsl(0, 0%, 88%));
        background-color: light-dark(
        hsl(0, 0%, 88%),
        hsl(211, 18%, 25%)
    );
        background-color: var(
            --color-background-recent-view-participant-overflow
        );
    }

#recent_view .recent_view_participant_avatar {
        background-color: transparent;
    }

#recent_view .recent_view_participant_overflow {
        /* 24px at 16px/1em */
        line-height: 1.5;
        background-color: transparent;
        --csstools-light-dark-toggle--861: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
        color: hsla(0, 0%, 15%, 0.75);
        color: var(--csstools-light-dark-toggle--861, hsla(0, 0%, 15%, 0.75));
        color: light-dark(
        hsla(0, 0%, 15%, 0.75),
        hsla(0, 0%, 100%, 0.5)
    );
        color: var(--color-text-recent-view-last-msg-time);
        text-align: left;
    }

#recent_view tr {
        --csstools-light-dark-toggle--862: var(--csstools-color-scheme--light) hsl(0, 0%, 14%);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--862, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        hsl(0, 0%, 14%)
    );
        background-color: var(--color-background-recent-view-row);

        /* Avoid annoying, confusing hover-state when scrolling on
           touch devices like iPad that treat a tap-and-hold/swipe
           as a hover. */
    }

@media (hover: hover) and (pointer: fine) {
            #recent_view tr:hover {
                --csstools-light-dark-toggle--1072: var(--csstools-color-scheme--light) rgb(47, 47, 47);
                background-color: rgb(242, 242, 242);
                background-color: var(--csstools-light-dark-toggle--1072, rgb(242, 242, 242));
                background-color: light-dark(
        rgb(242, 242, 242),
        rgb(47, 47, 47)
    );
                background-color: var(--color-background-recent-view-row-hover);
            }

                #recent_view tr:hover .change_visibility_policy .recent-view-row-topic-menu {
                    /* Tertiary action reveal tier (row hover). */
                    opacity: 0.45;
                }
        }

#recent_view tr .recent_topic_name {
        /* Extra left padding to make room for the unread marker bar
           alongside the keyboard selection outline, applied to all
           rows so content aligns between read and unread rows. */
        padding-left: 0.75em;
        padding-left: var(--recent-view-row-left-padding);
    }

#recent_view .unread_topic a {
            --csstools-light-dark-toggle--1073: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.9);
            color: hsl(0, 0%, 5%);
            color: var(--csstools-light-dark-toggle--1073, hsl(0, 0%, 5%));
            color: light-dark(
        hsl(0, 0%, 5%),
        hsla(0, 0%, 100%, 0.9)
    );
            color: var(--color-recent-view-link-unread);
            font-weight: 500;
        }

#recent_view .unread_topic .recent_topic_name {
            position: relative;
        }

#recent_view .unread_topic .recent_topic_name::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 2px;
                height: 100%;
                background: linear-gradient(
                    90deg,
                    hsl(217, 64%, 59%) 30%,
                    hsla(217, 64%, 59%, 0)
                );
                background: linear-gradient(
                    90deg,
                    var(--color-unread-marker) 30%,
                    hsla(217, 64%, 59%, 0)
                );
                border-radius: 2px 0 0 2px;
            }

/* When consecutive rows are both unread, make the blue
       marker bar continuous with no gap between them. */

#recent_view .unread_topic + .unread_topic .recent_topic_name::before {
        border-top-left-radius: 0;
    }

/* Also remove the bottom radius on the preceding unread
       row when followed by another unread row. We use
       :has() to look ahead at the next sibling. */

#recent_view .unread_topic:has( + .unread_topic) .recent_topic_name::before {
        border-bottom-left-radius: 0;
    }

/* Hide the unread marker bar when the "Unread" filter is active,
       since every visible row is already unread. */

#recent_view.recent-view-filtered-by-unread .unread_topic .recent_topic_name::before {
        display: none;
    }

#recent_view .last_msg_time {
        float: left;
        margin-right: 5px;
    }

#recent_view .last_msg_time .last-msg-link {
            /* Prevent time strings from collapsing over multiple lines. */
            display: block;
            min-width: -moz-max-content;
            min-width: max-content;
            --csstools-light-dark-toggle--1074: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.5);
            color: hsla(0, 0%, 15%, 0.75);
            color: var(--csstools-light-dark-toggle--1074, hsla(0, 0%, 15%, 0.75));
            color: light-dark(
        hsla(0, 0%, 15%, 0.75),
        hsla(0, 0%, 100%, 0.5)
    );
            color: var(--color-text-recent-view-last-msg-time);
        }

#recent_view .unread_topic .last-msg-link {
        --csstools-light-dark-toggle--863: var(--csstools-color-scheme--light) hsla(0, 0%, 100%, 0.58);
        color: hsla(0, 0%, 0%, 0.75);
        color: var(--csstools-light-dark-toggle--863, hsla(0, 0%, 0%, 0.75));
        color: light-dark(
        hsla(0, 0%, 0%, 0.75),
        hsla(0, 0%, 100%, 0.58)
    );
        color: var(--color-text-recent-view-last-msg-time-unread);
    }

#recent_view thead th {
        box-sizing: border-box;
        text-align: left;
        padding: 0.25em 0 0.25em 0.5em; /* 4px at 16px/1em */
        --csstools-light-dark-toggle--864: var(--csstools-color-scheme--light) hsl(0, 0%, 17%);
        background-color: hsl(0, 0%, 97%);
        background-color: var(--csstools-light-dark-toggle--864, hsl(0, 0%, 97%));
        background-color: light-dark(
        hsl(0, 0%, 97%),
        hsl(0, 0%, 17%)
    );
        background-color: var(--color-background-recent-view-table-thead-th);
        overflow: hidden;
        --csstools-light-dark-toggle--597: var(--csstools-color-scheme--light) #aaadba;
        color: #535663;
        color: var(--csstools-light-dark-toggle--597, #535663);
        color: light-dark(
        #535663,
        #aaadba
    );
        color: var(--color-text-recent-view-table-thead-th);
        text-transform: uppercase;
        font-weight: 600;
        line-height: 1.25em; /* 20px at 16px/1em */
        z-index: 1;
    }

#recent_view thead th .recent-view-header-wrapper {
            display: flex;
            align-items: center;
        }

#recent_view thead th .table-sortable-arrow {
            align-self: center;
            font-size: 1em; /* 16px at 16px/1em */
            transform: rotate(180deg);
            opacity: 0;
            transition: opacity 100ms ease-out;
            --csstools-light-dark-toggle--1075: var(--csstools-color-scheme--light) hsla(229, 10%, 70%, 0.5);
            color: hsla(229, 9%, 36%, 0.5);
            color: var(--csstools-light-dark-toggle--1075, hsla(229, 9%, 36%, 0.5));
            color: light-dark(
        hsla(229, 9%, 36%, 0.5),
        hsla(229, 10%, 70%, 0.5)
    );
            color: var(--color-arrow-recent-view-table-thead-th);
        }

#recent_view thead th.descend .table-sortable-arrow {
            transform: rotate(0deg);
        }

#recent_view thead th[data-sort]:not(.active):hover .table-sortable-arrow {
            opacity: 0.7;
        }

#recent_view thead th.active .table-sortable-arrow {
            opacity: 1;
        }

#recent_view thead th.active {
            opacity: 1;
            transition: opacity 100ms ease-out;
        }

#recent_view thead th[data-sort]:hover {
            cursor: pointer;
            --csstools-light-dark-toggle--1076: var(--csstools-color-scheme--light) hsla(230, 9%, 60%, 0.14);
            background-color: hsla(229, 9%, 36%, 0.07);
            background-color: var(--csstools-light-dark-toggle--1076, hsla(229, 9%, 36%, 0.07));
            background-color: light-dark(
        hsla(229, 9%, 36%, 0.07),
        hsla(230, 9%, 60%, 0.14)
    );
            background-color: var(
                --color-background-recent-view-table-thead-sort-header
            );
            transition: background-color 100ms ease-in-out;
        }

#recent_view thead th .zulip-icon-chevron-right {
            font-size: 0.9375em; /* 15px at 16px/1em */
            align-self: center;
            color: hsl(0, 0%, 60%);
            padding: 0 0.125em; /* 2px at 16px/1em */
        }

#recent_view #recent-view-table-headers:hover .recent-view-unread-sort-header .table-sortable-arrow {
        opacity: 0.7;
    }

#recent_view .recent-view-topic-header {
        /* Match left padding with row td (.recent_topic_name),
           including the extra space for the unread marker bar. */
        padding: 0 0.5em 0 0; /* 8px 12px at 16px/1em */
        /* th no longer has data-sort; the individual sort spans handle
           cursor and hover. */
        cursor: default;
    }

#recent_view .recent-view-topic-header .recent-view-header-wrapper {
            /* Match the row grid so "Channel" and "Conversation" sort
               spans align with channel and topic text in rows. Sort
               arrows are inside the spans, so 3 columns suffice.
               1em = 16px at 16px/1em, matching the 1em (16px
               at 16px/1em) privacy icon width in data rows.

               The first column is floored to the "Channel" header's
               JS-measured width so the label never overlaps the next
               column when channel names are short or absent. */
            display: grid;
            grid-template-columns:
                max(
                    0px,
                    calc(
                        min(
                                calc(
                                    var(
                                            --longest-subscribed-channel-name-width
                                        ) +
                                        1em + 8px
                                ),
                                calc(
                                    (
                                            100% -
                                                var(
                                                    --recent-view-header-channel-column-adjustment
                                                )
                                        ) /
                                        3
                                )
                            ) +
                            var(--recent-view-header-channel-column-adjustment)
                    )
                )
                auto 1fr auto;
            grid-template-columns:
                max(
                    var(--recent-view-header-channel-column-min-width, 0px),
                    calc(
                        min(
                                calc(
                                    var(
                                            --longest-subscribed-channel-name-width
                                        ) +
                                        1em + 8px
                                ),
                                calc(
                                    (
                                            100% -
                                                var(
                                                    --recent-view-header-channel-column-adjustment
                                                )
                                        ) /
                                        3
                                )
                            ) +
                            var(--recent-view-header-channel-column-adjustment)
                    )
                )
                auto 1fr auto;
            grid-template-columns:
                max(
                    0px,
                    calc(
                        min(
                                calc(
                                    var(
                                            --longest-subscribed-channel-name-width
                                        ) +
                                        1em + 8px
                                ),
                                calc(
                                    calc(
                                            100% -
                                                var(
                                                    --recent-view-header-channel-column-adjustment
                                                )
                                        ) /
                                        3
                                )
                            ) +
                            var(--recent-view-header-channel-column-adjustment)
                    )
                )
                auto 1fr auto;
            grid-template-columns:
                max(
                    var(--recent-view-header-channel-column-min-width, 0px),
                    calc(
                        min(
                                calc(
                                    var(
                                            --longest-subscribed-channel-name-width
                                        ) +
                                        1em + 8px
                                ),
                                calc(
                                    calc(
                                            100% -
                                                var(
                                                    --recent-view-header-channel-column-adjustment
                                                )
                                        ) /
                                        3
                                )
                            ) +
                            var(--recent-view-header-channel-column-adjustment)
                    )
                )
                auto 1fr auto;
            align-items: stretch;
        }

#recent_view .recent-view-topic-header .recent-view-channel-sort-header,#recent_view .recent-view-topic-header .recent-view-conversation-sort-header,#recent_view .recent-view-topic-header .recent-view-unread-sort-header {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
            /* Padding gives the hover pill its size. */
            padding: 0.25em; /* 4px at 16px/1em */
            border-radius: 3px;
            transition: background-color 100ms ease-in-out;
        }

#recent_view .recent-view-topic-header .recent-view-channel-sort-header:hover,#recent_view .recent-view-topic-header .recent-view-conversation-sort-header:hover,#recent_view .recent-view-topic-header .recent-view-unread-sort-header:hover {
                --csstools-light-dark-toggle--1077: var(--csstools-color-scheme--light) hsla(230, 9%, 60%, 0.14);
                background-color: hsla(229, 9%, 36%, 0.07);
                background-color: var(--csstools-light-dark-toggle--1077, hsla(229, 9%, 36%, 0.07));
                background-color: light-dark(
        hsla(229, 9%, 36%, 0.07),
        hsla(230, 9%, 60%, 0.14)
    );
                background-color: var(
                    --color-background-recent-view-table-thead-sort-header
                );
            }

#recent_view .recent-view-topic-header .recent-view-channel-sort-header:hover .table-sortable-arrow,#recent_view .recent-view-topic-header .recent-view-conversation-sort-header:hover .table-sortable-arrow,#recent_view .recent-view-topic-header .recent-view-unread-sort-header:hover .table-sortable-arrow {
                    opacity: 0.7;
                }

#recent_view .recent-view-topic-header .recent-view-channel-sort-header.active .table-sortable-arrow,#recent_view .recent-view-topic-header .recent-view-conversation-sort-header.active .table-sortable-arrow,#recent_view .recent-view-topic-header .recent-view-unread-sort-header.active .table-sortable-arrow {
                opacity: 1;
            }

#recent_view .recent-view-topic-header .recent-view-channel-sort-header.descend .table-sortable-arrow,#recent_view .recent-view-topic-header .recent-view-conversation-sort-header.descend .table-sortable-arrow,#recent_view .recent-view-topic-header .recent-view-unread-sort-header.descend .table-sortable-arrow {
                transform: rotate(0deg);
            }

#recent_view .recent-view-topic-header .recent-view-channel-sort-header {
            padding-left: 1em;
        }

#recent_view .recent-view-topic-header .recent-view-conversation-sort-header {
            /* Cancel the pill padding so the label aligns with topic
               text in rows. */
            margin-left: -0.25em; /* -4px at 16px/1em */
            /* Prevent hover pill highlight from extending into
               the adjacent unread sort column. */
            margin-right: 0.3125em; /* 5px at 16px/1em */
        }

#recent_view .recent-view-topic-header .recent-view-unread-sort-header {
            /* Use width that reasonably covers 2-3 magnitudes of count. */
            width: 1.5em;
            margin-right: -0.1563em; /* 2.5px at 16px/1em */
            justify-self: end;
            justify-content: center;
        }

#recent_view .recent_topic_users,#recent_view .recent-view-participants-header {
        padding-right: 0;
        padding-left: 0.25em;
        padding-left: var(--recent-view-participants-padding-x-start);
        width: calc(
            0.25em +
                (4 + 1) *
                (
                    1.5em + 2 *
                        0.0938em
                ) -
                /* First item start padding is --recent-view-participants-padding-x-start.
                   Last item doesn't have end padding. */
                2 * 0.0938em
        );
        width: calc(
            var(--recent-view-participants-padding-x-start) +
                (var(--recent-view-max-avatars) + 1) *
                (
                    var(--recent-view-participant-item-width) + 2 *
                        var(--recent-view-participant-item-padding-x)
                ) -
                /* First item start padding is --recent-view-participants-padding-x-start.
                   Last item doesn't have end padding. */
                2 * var(--recent-view-participant-item-padding-x)
        );
    }

#recent_view.recent-view-participants-hidden {
        --recent-view-row-left-padding: 0.5em; /* 8px at 16px/1em */
    }

#recent_view.recent-view-participants-hidden td {
            /* 6px 8px at 16px/1em */
            padding: 0.375em 0.5em 0.375em 0.75em;
            padding: 0.375em 0.5em 0.375em var(--recent-view-row-left-padding);
        }

#recent_view.recent-view-participants-hidden .recent_topic_users,#recent_view.recent-view-participants-hidden .recent-view-participants-header {
            display: none;
        }

#recent_view .recent-view-participants-header .recent-view-header-wrapper {
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

#recent_view .recent_topic_timestamp,#recent_view .recent-view-last-msg-time-header {
        /* Time text width is measured from JS and set as
           --recent-view-time-text-width. Add the visibility
           icon width (1em), cell padding (2 × 0.5em), and space
           for the icon's focus outline (0.5em). Falls back to
           25% before JS has set the variable. */
        width: 25%;
        width: calc(var(--recent-view-time-text-width) + 2.5em);
    }

#recent_view .recent_topic_name .recent-view-conversation-with-unread-wrapper {
            display: grid;
            grid-template-areas:
                "conversation-type chevron-right conversation-name unread-mention-and-count"
                ".                 .             conversation-name .";
            width: 100%;
            /* We add 1em for the privacy icon and 8px for the flexbox
               gap between the icon and the channel name. Floored to
               match the header grid's "Channel" floor. */
            grid-template-columns:
                max(
                    calc(
                        0px -
                            var(--recent-view-header-channel-column-adjustment)
                    ),
                    min(
                        calc(
                            var(--longest-subscribed-channel-name-width) + 1em +
                                8px
                        ),
                        calc(100% / 3)
                    )
                )
                auto 1fr auto;
            grid-template-columns:
                max(
                    calc(
                        var(
                                --recent-view-header-channel-column-min-width,
                                0px
                            ) -
                            var(--recent-view-header-channel-column-adjustment)
                    ),
                    min(
                        calc(
                            var(--longest-subscribed-channel-name-width) + 1em +
                                8px
                        ),
                        calc(100% / 3)
                    )
                )
                auto 1fr auto;
            align-items: center;
        }

#recent_view .recent_topic_name .recent-view-conversation-type-wrapper {
            grid-area: conversation-type;
            display: flex;
            align-items: center;
            gap: 8px;
        }

#recent_view .recent_topic_name .recent-view-conversation-type-wrapper .stream-privacy {
                display: flex;
            }

#recent_view .recent_topic_name .recent-view-conversation-link {
            grid-area: conversation-name;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

#recent_view .recent_topic_name .recent-view-unread-mention-and-count-wrapper {
            grid-area: unread-mention-and-count;
            /* Reserve space so a focused unread badge's `-5px`
               outset focus ring (`.recent-view-table-unread-count`'s
               `::before`) does not paint over the topic-name's
               ellipsis when the topic is long enough to truncate. */
            padding-left: 0.4375em; /* 7px at 16px/1em */
        }

#recent_view .recent_topic_name .zulip-icon-chevron-right {
            grid-area: chevron-right;
            font-size: 0.9375em; /* 15px at 16px/1em */
            color: hsl(0, 0%, 60%);
            padding: 0 0.125em; /* 2px at 16px/1em */
        }

#recent_view .recent_topic_name .recent-view-dm-name,#recent_view .recent_topic_name .recent-view-channel-name {
            opacity: 0.8;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

#recent_view thead .last_msg_time_header {
        /* The responsive table of bootstrap
            somehow ignores the width of ::after
            element. This ensures it is always visible.
            20px = space occupied by ::after (icon) +
            some extra padding.
        */
        padding-right: 20px;
    }

@media (max-width: 767.98px) {
        /* Hide last message time on smaller screens. */
            #recent_view.recent-view-participants-hidden .recent_topic_timestamp,#recent_view.recent-view-participants-hidden thead .last_msg_time_header {
                display: none;
            }

        #recent_view .recent_topic_actions {
            margin-right: 5px;
            font-size: 1.0714em; /* 15px at 14px / em */
        }
    }

#recent_view .private_conversation_row .pm_status_icon {
            display: flex;
            justify-content: center;
            align-items: center;
        }

#recent_view .private_conversation_row .pm_status_icon .zulip-icon.conversation-partners-icon,#recent_view .private_conversation_row .pm_status_icon .zulip-icon.zulip-icon-bot {
                opacity: 0.6;
            }

#recent_view .private_conversation_row .pm_status_icon .user-circle {
                min-width: 0.5em;
                min-width: var(
                    --length-user-status-circle-recent-conversations
                );
                font-size: 0.625em; /* 10px at 16px/1em */
                float: left;
                position: static;
                position: initial;
                /* Make the width 16px to match other icons. */
                padding: 0 0.3em; /* 3px at 10/1em */
            }

/* We don't display status emoji in group DMs,
               so prepare an ordinary inline layout... */

#recent_view .private_conversation_row .recent-view-dm-group .user-status-microlayout {
                display: inline;
                white-space: nowrap;
            }

/* ...and hide the status emoji. */

#recent_view .private_conversation_row .recent-view-dm-group .status-emoji {
                display: none;
            }

#recent_view_bottom_whitespace #recent_view_loading_messages_indicator,#recent_view_bottom_whitespace .bottom-messages-logo {
        display: block;
        position: absolute;
        top: 200px;
        left: 0;
        right: 0;
        margin: auto;
    }

#recent_view_bottom_whitespace #recent_view_loading_messages_indicator .loading_indicator_spinner,#recent_view_bottom_whitespace .bottom-messages-logo:not(#does-not-exist) .loading_indicator_spinner {
            position: relative;
            top: -7px;
        }

#recent_view_folder_filter_container {
    display: flex;
    align-items: center;
    height: 1.9375em;
    height: var(--recent-topics-filters-height);
}

#recent_view_folder_filter_button {
    font-size: 1.5625em; /* 25px at 16px/1em */
    padding: 0;
}

#recent_view_folder_filter_button:focus-visible {
        outline: 1.5px solid
        hsl(215, 47%, 50%);
        outline: var(--focus-ring-outline);
    }

#recent-view-filter_widget {
    display: inline-flex;
    width: 10.7142em; /* 150px at 14px em */
    /* Prevent the outline from being clipped by the
       overflow:hidden ancestor at fractional browser
       zoom levels. 2px because 1px can round to 0
       device pixels at certain zoom levels (e.g., 80%). */
    margin-left: 2px;
    /* 1.5px 6px at 16px/1em */
    padding: 0 0.375em;
    /* Matching to the height of the filter search box. */
    height: 1.9375em;
    height: var(--recent-topics-filters-height);
    /* Matching to the input styles otherwise defined on
       .input-element in inputs.css */
    --csstools-light-dark-toggle--865: var(--csstools-color-scheme--light) hsl(0, 0%, 95%);
    color: hsl(0, 0%, 14%);
    color: var(--csstools-light-dark-toggle--865, hsl(0, 0%, 14%));
    color: light-dark(hsl(0, 0%, 14%), hsl(0, 0%, 95%));
    color: var(--color-text-input);
    --csstools-light-dark-toggle--866: var(--csstools-color-scheme--light) hsl(225, 6%, 10%);
    background: hsl(0, 0%, 100%);
    background: var(--csstools-light-dark-toggle--866, hsl(0, 0%, 100%));
    background: light-dark(hsl(0, 0%, 100%), hsl(225, 6%, 10%));
    background: var(--color-background-input);
    border: none;
    --csstools-light-dark-toggle--867: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.2);
    outline: 1px solid rgba(20, 22, 31, 0.3);
    outline: 1px solid var(--csstools-light-dark-toggle--867, rgba(20, 22, 31, 0.3));
    outline: 1px solid light-dark(
        rgba(20, 22, 31, 0.3),
        rgba(255, 255, 255, 0.2)
    );
    outline: 1px solid var(--color-outline-input);
    outline-offset: -1px;
}

#recent-view-filter_widget:hover {
        --csstools-light-dark-toggle--868: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.4);
        outline-color: rgba(20, 22, 31, 0.6);
        outline-color: var(--csstools-light-dark-toggle--868, rgba(20, 22, 31, 0.6));
        outline-color: light-dark(
        rgba(20, 22, 31, 0.6),
        rgba(255, 255, 255, 0.4)
    );
        outline-color: var(--color-outline-input-hover);
    }

#recent-view-filter_widget:focus {
        --csstools-light-dark-toggle--869: var(--csstools-color-scheme--light) hsl(225, 6%, 7%);
        background-color: hsl(0, 0%, 100%);
        background-color: var(--csstools-light-dark-toggle--869, hsl(0, 0%, 100%));
        background-color: light-dark(
        hsl(0, 0%, 100%),
        hsl(225, 6%, 7%)
    );
        background-color: var(--color-background-input-focus);
        --csstools-light-dark-toggle--870: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.5);
        outline-color: rgba(20, 22, 31, 0.8);
        outline-color: var(--csstools-light-dark-toggle--870, rgba(20, 22, 31, 0.8));
        outline-color: light-dark(
        rgba(20, 22, 31, 0.8),
        rgba(255, 255, 255, 0.5)
    );
        outline-color: var(--color-outline-input-focus);
        --csstools-light-dark-toggle--871: var(--csstools-color-scheme--light) rgba(255, 255, 255, 0.4);
        box-shadow: 0 0 5px rgba(46, 48, 56, 0.3);
        box-shadow: 0 0 5px var(--csstools-light-dark-toggle--871, rgba(46, 48, 56, 0.3));
        box-shadow: 0 0 5px light-dark(
        rgba(46, 48, 56, 0.3),
        rgba(255, 255, 255, 0.4)
    );
        box-shadow: 0 0 5px var(--color-box-shadow-input-focus);
    }

#recent_view .recent_topic_timestamp .flex_container {
    /* Push the visibility icon to the right edge of the cell. */
    justify-content: space-between;
}

.recent-view-unread-mention-and-count-wrapper {
    display: flex;
    align-items: center;
    /* Stretch to the full row height so the unread count
       is a larger click target for "Mark as read". */
    align-self: stretch;
    margin-left: auto;
    flex-direction: row;
    /* Match the left sidebar gap between @ marker and unread count. */
    gap: 5px;
}

.recent-view-unread-mention-and-count-wrapper .unread_mention_info {
        /* Unset margin in favor of flex gap. */
        margin: 0;
    }

.recent-view-unread-mention-and-count-wrapper .recent-view-unread-count-wrapper {
        display: flex;
        align-items: center;
        align-self: stretch;
    }

.recent-view-body-row {
    outline-offset: -0.25em; /* -4px at 16px/1em */
    /* 0.4688em (vs. inbox's 0.3125em / 5px) — the larger
       negative offset on this view shrinks the ring's effective
       corner radius (`border-radius` minus `|outline-offset|`),
       so we bump the base radius so the ring's painted corners
       read with the same curvature as `.inbox-row`'s 3.5px
       effective radius. Em-based so both offset and radius
       scale together with the user's font size, keeping the
       perceived corner-rounding ratio stable. */
    border-radius: 0.4688em; /* 7.5px at 16px/1em */
}

.recent-view-table-unread-count {
    border-radius: 0.3125em; /* 5px at 16px/1em */
    position: relative;
}

/* Focus ring drawn as a pseudo-element so the ring's corner
   radius can be set independently of the badge's, and so the
   wrapper-level `:focus` outline rule on `.recent_view_focusable`
   (which the badge also matches) does not stack a second concentric
   outline on top. Scoped via `#recent_view:not(.no-visible-focus-outlines)`
   so it stays suppressed alongside the wrapper outline until the
   first keyboard navigation key removes the class (see
   focus_outline_util.ts), and so the rule has high enough
   specificity to beat the wrapper rule. Inset `-5px` matches the
   breathing room the inbox wrapper-extending outline gets from its
   `padding: 0 5px`. */
#recent_view:not(.no-visible-focus-outlines)
    .recent-view-table-unread-count:focus {
    outline: none;
}
#recent_view:not(.no-visible-focus-outlines) .recent-view-table-unread-count:focus::before {
        content: "";
        position: absolute;
        top: -0.3125em;
        right: -0.3125em;
        bottom: -0.3125em;
        left: -0.3125em; /* -5px at 16px/1em */
        border: 1.5px solid
        hsl(215, 47%, 50%);
        border: var(--focus-ring-outline);
        border-radius: 0.5em;
        border-radius: var(--unread-count-focus-outline-radius-in-views);
        pointer-events: none;
    }

/* ---- dark_theme.css ---- */


/************************* MODAL DARK THEME *******************/


/* this one is because in the app we have blue and in dark-theme it should be white. */


/* these are converting grey things to "new grey".
       :disabled rules are exploded for CSS selector performance reasons. */


/* Light theme shows hover mostly through box-shadow,
          and dark theme shows it mostly through changing color
          of the search button. */


/* Uppy cropper canvas has some CSS properties set for the background that
        do not look good for dark theme. When using Uppy Dashboard, this can be
        solved by passing `theme` field with value as true in config options.
        However we are not using that plugin so we need to provide our own dark
        theme CSS for this detail.

        Link for source from where the CSS properties are taken -
        https://github.com/transloadit/uppy/blob/b7605df9402e4db9b02828bf24558e21eae76637/packages/%40uppy/image-editor/src/style.scss#L123
        and https://github.com/transloadit/uppy/blob/b7605df9402e4db9b02828bf24558e21eae76637/packages/%40uppy/image-editor/src/style.scss#L133 */

@media screen {
    .dark-theme:root {
    /* There is no lefthand border to cover in dark mode, so
       don't apply negative margin that would otherwise pull
       the unread marker to the left. */
    --unread-marker-left: 0;

    /* Box shadow for overlays across the web app */
    --box-shadow-overlay: 0 0 30px hsl(212, 32%, 7%);

    /* Shadow layers use full-opacity black on dark backgrounds so the drop
       shadow still reads as a crisp separation. */
    --box-shadow-sidebar-sticky-header-drop:
        0 1px 1px -1px hsl(0, 0%, 0%), 0 3px 4px -5px hsl(0, 0%, 0%),
        0 4px 9px -10px hsl(0, 0%, 0%), 0 12px 12px -13px hsl(0, 0%, 0%);

    /* Colors used across the app */
    --color-recipient-bar-controls-spinner: hsl(0, 0%, 100%);
    --box-shadow-unread-counter-normal: none;

    /* Text colors */
    --color-text-sender-name: hsla(0, 0%, 100%, 0.85);
    --color-text-other-mention: hsla(0, 0%, 100%, 0.8);
    --color-text-empty-list-message: hsl(0, 0%, 67%);

    /* Settings table colors */
    --color-background-notification-table-thead: hsla(0, 0%, 0%, 0.2);

    /* Custom profile field choice editor */
    --opacity-disabled-profile-field-choice-input: 0.5;

    /* Reaction container colors */
    --font-weight-message-reaction: 550;
    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.12px 0 hsla(0, 0%, 0%, 0.1),
        0 5.5113px 8.5783px 0 hsla(0, 0%, 0%, 0.09),
        0 8.4377px 13.9271px 0 hsla(0, 0%, 0%, 0.11),
        0 12.177px 21.4737px 0 hsla(0, 0%, 0%, 0.11),
        0 18.7257px 35.4802px 0 hsla(0, 0%, 0%, 0.15),
        0 41px 80px 0 hsla(0, 0%, 0%, 0.2);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23DEDEDE' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z'/%3E%3C/svg%3E");

    /* Button colors on modals and message editing. */
    --color-exit-button-text: hsl(0, 0%, 100%);
    --color-exit-button-background: hsla(226, 1%, 30%, 0.5);
    --color-exit-button-background-interactive: hsla(226, 1%, 30%, 0.65);

    /* Zulip-style checkbox values. */
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url("../images/checkbox-dark-mode.svg");

    /* Theme-dependent SVGs */
    --svg-url-thumbnail-loader: url("../images/loading/loader-white.svg");

    /* Zulip resizer handle svg */
    --svg-resize-handle: url("../images/resize-handle-white.svg");
    --recent-view-body-border-width: 0.1875em; /* 3px at 16px/1em */
    }
    .dark-theme:root {
    --csstools-color-scheme--light:  ;
    color-scheme: dark;
    }
    .dark-theme:root kbd {
        text-shadow: none;
    }
    .dark-theme:root #message-formatting kbd, .dark-theme:root #keyboard-shortcuts kbd {
            --csstools-light-dark-toggle--1078: var(--csstools-color-scheme--light) hsl(225, 100%, 84%);
            border: 1px solid hsl(227, 78%, 59%);
            border: 1px solid var(--csstools-light-dark-toggle--1078, hsl(227, 78%, 59%));
            border: 1px solid light-dark(hsl(227, 78%, 59%), hsl(225, 100%, 84%));
            border: 1px solid var(--color-hotkey-hint);
            border-radius: 3px;
            --csstools-light-dark-toggle--1079: var(--csstools-color-scheme--light) hsl(225, 100%, 84%);
            color: hsl(227, 78%, 59%);
            color: var(--csstools-light-dark-toggle--1079, hsl(227, 78%, 59%));
            color: light-dark(hsl(227, 78%, 59%), hsl(225, 100%, 84%));
            color: var(--color-hotkey-hint);
            opacity: 0.8;
    }
    .dark-theme:root .enter_sends_choices {
        color: hsl(236, 33%, 90%);
    }
    .dark-theme:root .enter_sends_choices .enter_sends_minor {
            color: hsl(0, 0%, 80%);
    }
    .dark-theme:root .dropdown-list-delete {
        /* hsl(7deg 100% 74%) corresponds to var(--red-250) */
        color: rgba(255, 138, 122, 0.7) !important;
    }
    .dark-theme:root .dropdown-list-delete:hover {
            color: hsl(7, 100%, 74%) !important;
    }
    .dark-theme:root .popover a {
        color: inherit;
    }
    .dark-theme:root input:not([type="radio"]):not(.modal_text_input):-moz-read-only {
        color: inherit;
        opacity: 0.5;
    }
    .dark-theme:root button:disabled:not(.action-button):not(.icon-button):not(.info-density-button), .dark-theme:root option:disabled, .dark-theme:root select:disabled, .dark-theme:root input:disabled:not(.modal_text_input), .dark-theme:root input:not([type="radio"]):not(.modal_text_input):read-only, .dark-theme:root #organization-permissions .dropdown-widget-button:disabled, .dark-theme:root #organization-settings .dropdown-widget-button:disabled {
        color: inherit;
        opacity: 0.5;
    }
    .dark-theme:root button.info-density-button:disabled {
        color: inherit;
        opacity: 0.4;
    }
    .dark-theme:root .popover-filter-input-wrapper .popover-filter-input:focus {
        background-color: hsl(225, 6%, 7%);
        border: 1px solid hsla(0, 0%, 100%, 0.5);
        box-shadow: 0 0 5px hsla(0, 0%, 100%, 0.4);
    }
    .dark-theme:root select option {
        --csstools-light-dark-toggle--872: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background-color: hsl(0, 0%, 94%);
        background-color: var(--csstools-light-dark-toggle--872, hsl(0, 0%, 94%));
        background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background-color: var(--color-background);
        color: hsl(236, 33%, 90%);
    }
    .dark-theme:root .pill-container.not-editable-by-user, .dark-theme:root .group_setting_disabled .pill-container {
        opacity: 0.5;
    }
    .dark-theme:root #searchbox .navbar-search:not(.expanded) #searchbox-input-container:hover .search_icon {
            opacity: 0.75;
    }
    .dark-theme:root textarea.schedule-reminder-note:focus {
        border-color: hsla(0, 0%, 0%, 0.9);
    }
    .dark-theme:root .popover hr, .dark-theme:root hr {
        opacity: 0.2;
    }
    .dark-theme:root #recent-view-content-table {
        border-bottom-width: 1px;
    }
    .dark-theme:root .drafts-container .header-body .delete-drafts-group > *:focus {
        background-color: hsl(228, 11%, 17%);
    }
    .dark-theme:root .table-striped tbody tr:nth-child(even) td {
        border-color: hsla(0, 0%, 0%, 0.2);
        background-color: color-mix(
            in srgb,
            hsl(0, 0%, 0%) 20%,
            var(--color-background-modal)
        );
    }
    .dark-theme:root .overlay-message-row .message_header_private_message .message_label_clickable {
        padding: 4px 6px 3px;
        color: inherit;
    }
    .dark-theme:root time {
        background: hsla(0, 0%, 0%, 0.2);
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.4);
    }
    .dark-theme:root .tip {
        color: inherit;
    }
    .dark-theme:root .alert.home-error-bar {
        color: hsl(236, 33%, 90%);
        background-color: hsla(35, 84%, 62%, 0.25);
        border: 1px solid hsl(11, 46%, 54%);
    }
    .dark-theme:root .alert.alert-success {
        color: inherit;
        background-color: hsla(161, 60%, 46%, 0.2);
        border-color: hsl(165, 68%, 37%);
    }
    .dark-theme:root .alert.alert-info {
        color: hsl(205, 58%, 80%);
        background-color: hsl(204, 100%, 12%);
        border-color: hsla(205, 58%, 69%, 0.4);
    }
    .dark-theme:root .alert.alert-error, .dark-theme:root .alert.alert-danger {
        background-color: hsl(318, 12%, 21%);
        color: inherit;
        border: 1px solid hsl(0, 75%, 65%);
    }
    .dark-theme:root .alert-box .alert, .dark-theme:root .alert-box .stacktrace, .dark-theme:root .alert.alert-error {
        background-color: hsl(318, 12%, 21%);
        color: inherit;
        border: 1px solid hsl(0, 75%, 65%);
    }
    .dark-theme:root .alert-box .alert.alert-error::before {
            color: hsl(0, 75%, 65%);
    }
    .dark-theme:root .stacktrace {
        color: hsl(314, 22%, 85%);
        background-color: hsl(318, 12%, 21%);
        border: 1px solid hsl(0, 75%, 65%);
    }
    .dark-theme:root .stacktrace .expand {
            color: hsl(318, 14%, 36%);
    }
    .dark-theme:root .stacktrace .subtle {
            color: hsl(314, 19%, 63%);
    }
    .dark-theme:root .stacktrace .stacktrace-more-info {
            background-color: hsl(312, 7%, 14%);
    }
    .dark-theme:root .stacktrace .code-context {
            color: hsl(314, 27%, 82%);
            background-color: hsl(312, 7%, 14%);
            box-shadow:
                inset 0 11px 10px -10px hsl(0, 0%, 6%),
                inset 0 -11px 10px -10px hsl(0, 0%, 6%);
    }
    .dark-theme:root .stacktrace .code-context .line-number {
                color: hsl(318, 14%, 44%);
    }
    .dark-theme:root .stacktrace .code-context .focus-line {
                background-color: hsl(307, 9%, 19%);
    }
    .dark-theme:root .top-messages-logo {
        opacity: 0.7;
    }
    .dark-theme:root .history-limited-box {
        background-color: hsla(0, 0%, 0%, 0.2);
    }
    .dark-theme:root .searching-for-more-topics img {
        filter: invert(100%);
    }
    .dark-theme:root .simplebar-track .simplebar-scrollbar::before {
        background-color: hsl(0, 0%, 100%);
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.33);
    }
    .dark-theme:root .collapse-settings-button:hover {
        color: hsl(200, 79%, 66%);
    }
    .dark-theme:root #loading_older_messages_indicator path, .dark-theme:root #recent_view_loading_messages_indicator path {
            fill: hsl(0, 0%, 100%);
    }
    .dark-theme:root a:not(:active):focus, .dark-theme:root button:not(.action-button):not(.icon-button):focus-visible, .dark-theme:root i.fa:focus, .dark-theme:root i.zulip-icon:focus, .dark-theme:root [role="button"]:focus {
        outline-color: hsl(0, 0%, 67%);
    }
    .dark-theme:root .color_animated_button .zulip-icon {
            color: hsl(0, 0%, 100%);
    }
    .dark-theme:root .panel_user_list > .pill-container:hover, .dark-theme:root .creator_details > .display_only_pill:hover {
            color: inherit;
    }
    .dark-theme:root .panel_user_list > .pill-container > .pill:focus, .dark-theme:root .creator_details > .display_only_pill > .pill:focus, .dark-theme:root .panel_user_list > .pill-container > .pill:hover, .dark-theme:root .creator_details > .display_only_pill > .pill:hover {
                color: inherit;
    }
    .dark-theme:root .help_link_widget:hover {
        color: inherit;
    }
    .dark-theme:root #uppy-editor .uppy-ImageCropper .cropper-modal {
            opacity: 0.7;
            background-color: hsl(0, 0%, 0%);
    }
    .dark-theme:root #uppy-editor .uppy-ImageCropper .cropper-view-box {
            background: repeating-conic-gradient(
                    hsl(0, 1%, 17%) 0%,hsl(0, 1%, 17%) 25%,
                    hsl(0, 0%, 0%) 0%, hsl(0, 0%, 0%) 50%
                )
                50%/16px 16px;
            background: repeating-conic-gradient(
                    hsl(0, 1%, 17%) 0% 25%,
                    hsl(0, 0%, 0%) 0% 50%
                )
                50%/16px 16px;
    }
}

@media screen and (prefers-color-scheme: dark) {
    .color-scheme-automatic:root {
    /* There is no lefthand border to cover in dark mode, so
       don't apply negative margin that would otherwise pull
       the unread marker to the left. */
    --unread-marker-left: 0;

    /* Box shadow for overlays across the web app */
    --box-shadow-overlay: 0 0 30px hsl(212, 32%, 7%);

    /* Shadow layers use full-opacity black on dark backgrounds so the drop
       shadow still reads as a crisp separation. */
    --box-shadow-sidebar-sticky-header-drop:
        0 1px 1px -1px hsl(0, 0%, 0%), 0 3px 4px -5px hsl(0, 0%, 0%),
        0 4px 9px -10px hsl(0, 0%, 0%), 0 12px 12px -13px hsl(0, 0%, 0%);

    /* Colors used across the app */
    --color-recipient-bar-controls-spinner: hsl(0, 0%, 100%);
    --box-shadow-unread-counter-normal: none;

    /* Text colors */
    --color-text-sender-name: hsla(0, 0%, 100%, 0.85);
    --color-text-other-mention: hsla(0, 0%, 100%, 0.8);
    --color-text-empty-list-message: hsl(0, 0%, 67%);

    /* Settings table colors */
    --color-background-notification-table-thead: hsla(0, 0%, 0%, 0.2);

    /* Custom profile field choice editor */
    --opacity-disabled-profile-field-choice-input: 0.5;

    /* Reaction container colors */
    --font-weight-message-reaction: 550;
    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.12px 0 hsla(0, 0%, 0%, 0.1),
        0 5.5113px 8.5783px 0 hsla(0, 0%, 0%, 0.09),
        0 8.4377px 13.9271px 0 hsla(0, 0%, 0%, 0.11),
        0 12.177px 21.4737px 0 hsla(0, 0%, 0%, 0.11),
        0 18.7257px 35.4802px 0 hsla(0, 0%, 0%, 0.15),
        0 41px 80px 0 hsla(0, 0%, 0%, 0.2);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23DEDEDE' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z'/%3E%3C/svg%3E");

    /* Button colors on modals and message editing. */
    --color-exit-button-text: hsl(0, 0%, 100%);
    --color-exit-button-background: hsla(226, 1%, 30%, 0.5);
    --color-exit-button-background-interactive: hsla(226, 1%, 30%, 0.65);

    /* Zulip-style checkbox values. */
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url("../images/checkbox-dark-mode.svg");

    /* Theme-dependent SVGs */
    --svg-url-thumbnail-loader: url("../images/loading/loader-white.svg");

    /* Zulip resizer handle svg */
    --svg-resize-handle: url("../images/resize-handle-white.svg");
    --recent-view-body-border-width: 0.1875em; /* 3px at 16px/1em */
    }
    .color-scheme-automatic:root {
    --csstools-color-scheme--light:  ;
    color-scheme: dark;
    }
    .color-scheme-automatic:root kbd {
        text-shadow: none;
    }
    .color-scheme-automatic:root #message-formatting kbd, .color-scheme-automatic:root #keyboard-shortcuts kbd {
            --csstools-light-dark-toggle--1078: var(--csstools-color-scheme--light) hsl(225, 100%, 84%);
            border: 1px solid hsl(227, 78%, 59%);
            border: 1px solid var(--csstools-light-dark-toggle--1078, hsl(227, 78%, 59%));
            border: 1px solid light-dark(hsl(227, 78%, 59%), hsl(225, 100%, 84%));
            border: 1px solid var(--color-hotkey-hint);
            border-radius: 3px;
            --csstools-light-dark-toggle--1079: var(--csstools-color-scheme--light) hsl(225, 100%, 84%);
            color: hsl(227, 78%, 59%);
            color: var(--csstools-light-dark-toggle--1079, hsl(227, 78%, 59%));
            color: light-dark(hsl(227, 78%, 59%), hsl(225, 100%, 84%));
            color: var(--color-hotkey-hint);
            opacity: 0.8;
    }
    .color-scheme-automatic:root .enter_sends_choices {
        color: hsl(236, 33%, 90%);
    }
    .color-scheme-automatic:root .enter_sends_choices .enter_sends_minor {
            color: hsl(0, 0%, 80%);
    }
    .color-scheme-automatic:root .dropdown-list-delete {
        /* hsl(7deg 100% 74%) corresponds to var(--red-250) */
        color: rgba(255, 138, 122, 0.7) !important;
    }
    .color-scheme-automatic:root .dropdown-list-delete:hover {
            color: hsl(7, 100%, 74%) !important;
    }
    .color-scheme-automatic:root .popover a {
        color: inherit;
    }
    .color-scheme-automatic:root input:not([type="radio"]):not(.modal_text_input):-moz-read-only {
        color: inherit;
        opacity: 0.5;
    }
    .color-scheme-automatic:root button:disabled:not(.action-button):not(.icon-button):not(.info-density-button), .color-scheme-automatic:root option:disabled, .color-scheme-automatic:root select:disabled, .color-scheme-automatic:root input:disabled:not(.modal_text_input), .color-scheme-automatic:root input:not([type="radio"]):not(.modal_text_input):read-only, .color-scheme-automatic:root #organization-permissions .dropdown-widget-button:disabled, .color-scheme-automatic:root #organization-settings .dropdown-widget-button:disabled {
        color: inherit;
        opacity: 0.5;
    }
    .color-scheme-automatic:root button.info-density-button:disabled {
        color: inherit;
        opacity: 0.4;
    }
    .color-scheme-automatic:root .popover-filter-input-wrapper .popover-filter-input:focus {
        background-color: hsl(225, 6%, 7%);
        border: 1px solid hsla(0, 0%, 100%, 0.5);
        box-shadow: 0 0 5px hsla(0, 0%, 100%, 0.4);
    }
    .color-scheme-automatic:root select option {
        --csstools-light-dark-toggle--872: var(--csstools-color-scheme--light) hsl(0, 0%, 11%);
        background-color: hsl(0, 0%, 94%);
        background-color: var(--csstools-light-dark-toggle--872, hsl(0, 0%, 94%));
        background-color: light-dark(hsl(0, 0%, 94%), hsl(0, 0%, 11%));
        background-color: var(--color-background);
        color: hsl(236, 33%, 90%);
    }
    .color-scheme-automatic:root .pill-container.not-editable-by-user, .color-scheme-automatic:root .group_setting_disabled .pill-container {
        opacity: 0.5;
    }
    .color-scheme-automatic:root #searchbox .navbar-search:not(.expanded) #searchbox-input-container:hover .search_icon {
            opacity: 0.75;
    }
    .color-scheme-automatic:root textarea.schedule-reminder-note:focus {
        border-color: hsla(0, 0%, 0%, 0.9);
    }
    .color-scheme-automatic:root .popover hr, .color-scheme-automatic:root hr {
        opacity: 0.2;
    }
    .color-scheme-automatic:root #recent-view-content-table {
        border-bottom-width: 1px;
    }
    .color-scheme-automatic:root .drafts-container .header-body .delete-drafts-group > *:focus {
        background-color: hsl(228, 11%, 17%);
    }
    .color-scheme-automatic:root .table-striped tbody tr:nth-child(even) td {
        border-color: hsla(0, 0%, 0%, 0.2);
        background-color: color-mix(
            in srgb,
            hsl(0, 0%, 0%) 20%,
            var(--color-background-modal)
        );
    }
    .color-scheme-automatic:root .overlay-message-row .message_header_private_message .message_label_clickable {
        padding: 4px 6px 3px;
        color: inherit;
    }
    .color-scheme-automatic:root time {
        background: hsla(0, 0%, 0%, 0.2);
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.4);
    }
    .color-scheme-automatic:root .tip {
        color: inherit;
    }
    .color-scheme-automatic:root .alert.home-error-bar {
        color: hsl(236, 33%, 90%);
        background-color: hsla(35, 84%, 62%, 0.25);
        border: 1px solid hsl(11, 46%, 54%);
    }
    .color-scheme-automatic:root .alert.alert-success {
        color: inherit;
        background-color: hsla(161, 60%, 46%, 0.2);
        border-color: hsl(165, 68%, 37%);
    }
    .color-scheme-automatic:root .alert.alert-info {
        color: hsl(205, 58%, 80%);
        background-color: hsl(204, 100%, 12%);
        border-color: hsla(205, 58%, 69%, 0.4);
    }
    .color-scheme-automatic:root .alert.alert-error, .color-scheme-automatic:root .alert.alert-danger {
        background-color: hsl(318, 12%, 21%);
        color: inherit;
        border: 1px solid hsl(0, 75%, 65%);
    }
    .color-scheme-automatic:root .alert-box .alert, .color-scheme-automatic:root .alert-box .stacktrace, .color-scheme-automatic:root .alert.alert-error {
        background-color: hsl(318, 12%, 21%);
        color: inherit;
        border: 1px solid hsl(0, 75%, 65%);
    }
    .color-scheme-automatic:root .alert-box .alert.alert-error::before {
            color: hsl(0, 75%, 65%);
    }
    .color-scheme-automatic:root .stacktrace {
        color: hsl(314, 22%, 85%);
        background-color: hsl(318, 12%, 21%);
        border: 1px solid hsl(0, 75%, 65%);
    }
    .color-scheme-automatic:root .stacktrace .expand {
            color: hsl(318, 14%, 36%);
    }
    .color-scheme-automatic:root .stacktrace .subtle {
            color: hsl(314, 19%, 63%);
    }
    .color-scheme-automatic:root .stacktrace .stacktrace-more-info {
            background-color: hsl(312, 7%, 14%);
    }
    .color-scheme-automatic:root .stacktrace .code-context {
            color: hsl(314, 27%, 82%);
            background-color: hsl(312, 7%, 14%);
            box-shadow:
                inset 0 11px 10px -10px hsl(0, 0%, 6%),
                inset 0 -11px 10px -10px hsl(0, 0%, 6%);
    }
    .color-scheme-automatic:root .stacktrace .code-context .line-number {
                color: hsl(318, 14%, 44%);
    }
    .color-scheme-automatic:root .stacktrace .code-context .focus-line {
                background-color: hsl(307, 9%, 19%);
    }
    .color-scheme-automatic:root .top-messages-logo {
        opacity: 0.7;
    }
    .color-scheme-automatic:root .history-limited-box {
        background-color: hsla(0, 0%, 0%, 0.2);
    }
    .color-scheme-automatic:root .searching-for-more-topics img {
        filter: invert(100%);
    }
    .color-scheme-automatic:root .simplebar-track .simplebar-scrollbar::before {
        background-color: hsl(0, 0%, 100%);
        box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.33);
    }
    .color-scheme-automatic:root .collapse-settings-button:hover {
        color: hsl(200, 79%, 66%);
    }
    .color-scheme-automatic:root #loading_older_messages_indicator path, .color-scheme-automatic:root #recent_view_loading_messages_indicator path {
            fill: hsl(0, 0%, 100%);
    }
    .color-scheme-automatic:root a:not(:active):focus, .color-scheme-automatic:root button:not(.action-button):not(.icon-button):focus-visible, .color-scheme-automatic:root i.fa:focus, .color-scheme-automatic:root i.zulip-icon:focus, .color-scheme-automatic:root [role="button"]:focus {
        outline-color: hsl(0, 0%, 67%);
    }
    .color-scheme-automatic:root .color_animated_button .zulip-icon {
            color: hsl(0, 0%, 100%);
    }
    .color-scheme-automatic:root .panel_user_list > .pill-container:hover, .color-scheme-automatic:root .creator_details > .display_only_pill:hover {
            color: inherit;
    }
    .color-scheme-automatic:root .panel_user_list > .pill-container > .pill:focus, .color-scheme-automatic:root .creator_details > .display_only_pill > .pill:focus, .color-scheme-automatic:root .panel_user_list > .pill-container > .pill:hover, .color-scheme-automatic:root .creator_details > .display_only_pill > .pill:hover {
                color: inherit;
    }
    .color-scheme-automatic:root .help_link_widget:hover {
        color: inherit;
    }
    .color-scheme-automatic:root #uppy-editor .uppy-ImageCropper .cropper-modal {
            opacity: 0.7;
            background-color: hsl(0, 0%, 0%);
    }
    .color-scheme-automatic:root #uppy-editor .uppy-ImageCropper .cropper-view-box {
            background: repeating-conic-gradient(
                    hsl(0, 1%, 17%) 0%,hsl(0, 1%, 17%) 25%,
                    hsl(0, 0%, 0%) 0%, hsl(0, 0%, 0%) 50%
                )
                50%/16px 16px;
            background: repeating-conic-gradient(
                    hsl(0, 1%, 17%) 0% 25%,
                    hsl(0, 0%, 0%) 0% 50%
                )
                50%/16px 16px;
    }
}