/*!**************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./third/bootstrap/css/bootstrap.app.css ***!
  \**************************************************************************************************************************************************************************/
/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:hover,
a:active {
  outline: 0;
}
img {
  /* Responsive images (ensure images don't scale beyond their parents) */

  max-width: 100%;
  /* Part 1: Set a maximum relative to the parent */

  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */

  vertical-align: middle;
  border: 0;
}
button {
  -webkit-appearance: button;
}
p {
  margin: 0 0 10px;
}
h1,
h2,
h3,
h4 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}
h1,
h2,
h3 {
  line-height: var(--header-line-height);
}
h1 {
  font-size: 38.5px;
}
h2 {
  font-size: 31.5px;
}
h3 {
  font-size: 24.5px;
}
h4 {
  font-size: 17.5px;
}
ul,
ol {
  padding: 0;
  margin: 0 0 10px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #ffffff;
}
form {
  margin: 0 0 20px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input[disabled],
input[readonly] {
  cursor: not-allowed;
  background-color: #eeeeee;
}
input:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}
input:focus:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}

/* Bootstrap alert CSS rules that have not been replaced with our own
   designs. */

.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.alert.alert-error {
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #b94a48;
}
.alert.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
}
.alert.alert-success h4 {
  color: #468847;
}
.alert,
.alert h4 {
  color: #c09853;
}
.alert h4 {
  margin: 0;
}

/*!**************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./third/bootstrap/css/bootstrap-btn.css ***!
  \**************************************************************************************************************************************************************************/
/*!
 Software from "Bootstrap" is Copyright (c) 2011-2014 Twitter, Inc. and is provided
 under the following license (the Bootstrap software has been modified):
 --
The MIT License (MIT)

Copyright (c) 2011-2014 Twitter, Inc

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
 */

/*!
 * Bootstrap v3.1.1 (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

.bootstrap-btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 0px;
}
.bootstrap-btn:focus,
.bootstrap-btn:active:focus,
.bootstrap-btn.active:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.bootstrap-btn:hover,
.bootstrap-btn:focus {
  color: #333;
  text-decoration: none;
}
.bootstrap-btn:active,
.bootstrap-btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.bootstrap-btn.disabled,
.bootstrap-btn[disabled] {
  pointer-events: none;
  cursor: not-allowed;
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/typeahead.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* CSS for Bootstrap typeahead */

.dropdown-menu {
    display: none;
    min-width: 160px;
    list-style: none;
}

.open > .dropdown-menu {
    display: block;
}

.typeahead {
    z-index: 1051;
}

.typeahead.dropdown-menu .typeahead-menu .simplebar-content {
    min-width: max-content;
}

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li {
        overflow-wrap: anywhere;
    }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a {
            display: flex;
            align-items: center;
            padding: 0.2142em 0.7142em; /* 3px 10px at 14px em */
            gap: 0.3571em; /* 5px at 14px em */
            font-weight: normal;
            /* We want to keep this `max-width` less than 320px. */
            max-width: 292px;
            line-height: 1.43; /* 20px / 14px */
            color: var(--color-dropdown-item);
            white-space: nowrap;
        }

@media (width >= 425px) {

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a {
                /* Scale up with font size on larger widths. */
                /* 292px / 14px */
                max-width: 20.86em;
        }
            }

/* hidden text just to maintain line height for a blank option */

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a strong:empty::after {
                    content: ".";
                    visibility: hidden;
                }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a:hover,.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a:focus {
                -webkit-text-decoration: none;
                text-decoration: none;
                outline: 0;
            }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a.topic-typeahead-link {
                gap: 5px;
            }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a.topic-edit-typeahead {
                display: flex;
                flex-wrap: wrap;
            }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a.topic-edit-typeahead .typeahead-strong-section {
                    /* We want to wrap the topic but preserve
                       original white spaces sequence too. */
                    white-space: pre-wrap;
                }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a .typeahead-content {
                display: flex;
                align-items: center;
                overflow: hidden;
                gap: 0.3571em;
            }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a .typeahead-text-container {
                display: flex;
                align-self: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                gap: 3px;
                align-items: baseline;
            }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a .compose-stream-name {
                overflow: visible;
                gap: 0;
            }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content > li .stream-to-topic-arrow {
            margin-left: 0.375em; /* 6px at 16px em */
            cursor: default;
            color: var(--color-compose-chevron-arrow);
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active > a,.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active > a:hover,.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active > a:focus {
            color: var(--color-active-dropdown-item);
            background-color: var(--background-color-active-typeahead-item);
        }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active > a .user-circle-offline {
            /* Ensure better contrast on highlighted
               typeahead items. */
            color: var(--color-user-circle-offline-typeahead-highlight);
        }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content .pronouns,.typeahead.dropdown-menu .typeahead-menu .simplebar-content .autocomplete_secondary {
        align-self: baseline;
        opacity: 0.8;
        font-size: 85%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content .pronouns > a,.typeahead.dropdown-menu .typeahead-menu .simplebar-content .autocomplete_secondary > a {
            color: var(--color-dropdown-item);
            text-decoration: underline;
            -webkit-text-decoration: underline solid currentColor;
                    text-decoration: underline solid currentColor;
            text-decoration-thickness: 1px;
            -webkit-text-decoration: underline 1px;
                    text-decoration: underline 1px;
            text-decoration-color: var(--color-dropdown-item-link-underline);
            opacity: 0.6;
        }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content .autocomplete_secondary {
        flex: 1 1 0;
    }

.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active .pronouns,.typeahead.dropdown-menu .typeahead-menu .simplebar-content .active .autocomplete_secondary {
        opacity: 1;
    }

.typeahead.dropdown-menu .typeahead-menu {
        list-style: none;
        margin: 4px 0;
        max-height: min(248px, 95vh);
        overflow-y: auto;
    }

.typeahead.dropdown-menu .typeahead-footer {
        margin: 0;
        padding: 4px 10px;
        border-top: 1px solid hsl(0deg 0% 0% / 20%);
        display: flex;
        align-items: center;
    }

.typeahead.dropdown-menu #typeahead-footer-text {
        color: var(--color-dropdown-item);
        font-size: 0.8571em; /* 12px at 14px/em */
    }

.typeahead.dropdown-menu a strong.typeahead-strong-section {
        /* Can't use flex to display this item if
           we want `text-overflow: ellipsis` to work
           which only works on block elements. */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: pre;
        align-items: baseline;
        font-weight: 500;
    }

.typeahead.dropdown-menu a strong.typeahead-strong-section .decorated-channel-name-wrapper {
            display: inline-flex;
            max-width: 100%;
        }

.typeahead.dropdown-menu a strong.typeahead-strong-section .decorated-channel-name-wrapper .decorated-channel-name {
                overflow: hidden;
                text-overflow: ellipsis;
            }

.typeahead-option-label-container {
    display: flex !important;
    justify-content: space-between;
}

.typeahead-option-label-container  > strong {
        margin-right: 14px;
    }

.typeahead-option-label-container .typeahead-option-label {
        color: var(--color-typeahead-option-label);
    }

.typeahead-image.zulip-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* For FontAwesome icons and zulip icons used in place of images for some users. */
.typeahead-image {
    flex: 0 0 auto;
    position: relative;
    height: 1.3125em; /* 21px at 16px/1em */
    width: 1.3125em; /* 21px at 16px/1em */
    border-radius: 4px;
}
.typeahead-image .typeahead-image-avatar {
        border-radius: 4px;
        /* Override bootstrap img */
        vertical-align: baseline;
    }
.typeahead-image .user-circle {
        position: absolute;
        /* This is smaller than the sidebar because avatars here are smaller */
        font-size: 0.4375em; /* 7px at 16px/1em */
        line-height: 1;
        bottom: -0.5px;
        right: -0.5px;
        background-color: var(--color-background-dropdown-widget);
        padding: 1px;
        border-radius: 50%;
    }
.typeahead-image .user-circle.user-circle-offline {
            display: none;
        }
/* Move the background styles onto the :before element so that the 1px padding
       outline still works. */
.typeahead-image .user-circle-idle {
        background: var(--color-background-dropdown-widget);
    }
.typeahead-image .user-circle-idle::before {
        background: var(--gradient-user-circle-idle);
        -webkit-background-clip: text;
                background-clip: text;
        -webkit-text-fill-color: transparent;
        border-radius: 50%;
    }

.typeahead-text-container i.zulip-icon-bot {
        align-self: center;
    }

/*
    Negates the extra 3px left margin from `.status-emoji` in zulip.css, which,
    combined with .typeahead-text-container's `gap`, created unintended spacing.
    The typeahead's spacing is now managed only by `gap` in
    .typeahead-text-container.
    */

.typeahead-text-container .status-emoji {
        margin-left: 0;
    }

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/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 (height < 600px) {

: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 (width < 768px) {

: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 (height < 600px) {

: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;

    /*
    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--550: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 15%, transparent);
    --color-border-message-group-spacer-line: var(--csstools-light-dark-toggle--550, color-mix(in oklch, hsl(0deg 0% 0%) 15%, transparent));

    /*
    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: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-message-group-spacer-line: light-dark(
        color-mix(in oklch, hsl(0deg 0% 0%) 15%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 15%, transparent)
    );
}
}

@supports not (color: light-dark(tan, tan)) {

:root * {
    --csstools-light-dark-toggle--550: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 15%, transparent);
    --color-border-message-group-spacer-line: var(--csstools-light-dark-toggle--550, color-mix(in oklch, hsl(0deg 0% 0%) 15%, transparent));
    }
}

@media ((width >= 576px) and (width < 849px)) {

:root {
        --compose-send-controls-width: 62px;
}
    }

@media (width < 576px) {

: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 */
    --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;

    /* 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--0: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 75%);
    --color-date: var(--csstools-light-dark-toggle--0, hsl(0deg 0% 15% / 75%));
    --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) hsl(46deg 15% 20%);
    --color-background-private-message-header: var(--csstools-light-dark-toggle--1, hsl(46deg 35% 93%));
    --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) hsl(46deg 7% 16%);
    --color-background-private-message-content: var(--csstools-light-dark-toggle--2, hsl(45deg 20% 96%));
    --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) hsl(0deg 0% 13.5%);
    --color-background-stream-message-content: var(--csstools-light-dark-toggle--3, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) hsl(217deg 64% 59% / 70%);
    --color-selected-message-outline: var(--csstools-light-dark-toggle--4, hsl(217deg 64% 59% / 60%));
    --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) hsl(217deg 95% 59%);
    --color-selected-gif-in-grid-picker: var(--csstools-light-dark-toggle--5, hsl(217deg 75% 59%));
    --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) hsl(217deg 95% 59% / 60%);
    --color-hovered-gif-in-grid-picker: var(--csstools-light-dark-toggle--6, hsl(217deg 75% 59% / 50%));
    --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-message-list-border: var(--csstools-light-dark-toggle--7, hsl(0deg 0% 0% / 16%));
    --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-message-header-contents-border: var(--csstools-light-dark-toggle--8, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 48%);
    --color-private-message-header-border: var(--csstools-light-dark-toggle--9, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-message-header-contents-border-bottom: var(--csstools-light-dark-toggle--10, hsl(0deg 0% 0% / 5%));
    --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 37%);
    --color-private-message-header-border-bottom: var(--csstools-light-dark-toggle--11, hsl(0deg 0% 0% / 7%));
    --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 30%);
    --color-message-header-icon-non-interactive: var(--csstools-light-dark-toggle--12, hsl(0deg 0% 0% / 30%));
    --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-message-header-icon-interactive: var(--csstools-light-dark-toggle--13, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) hsl(0deg 0% 11%);
    --color-background: var(--csstools-light-dark-toggle--14, hsl(0deg 0% 94%));
    --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) hsl(225deg 6% 10%);
    --color-background-widget-input: var(--csstools-light-dark-toggle--15, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-widget-button: var(--csstools-light-dark-toggle--16, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) hsl(0deg 0% 13%);
    --color-background-navbar: var(--csstools-light-dark-toggle--17, hsl(0deg 0% 97%));
    --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-text-sidebar-row: var(--csstools-light-dark-toggle--18, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) hsl(0deg 0% 90%);
    --color-text-active-narrow-filter: var(--csstools-light-dark-toggle--19, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) color-mix(in srgb, hsl(0deg 0% 100%) 8%, hsl(0deg 0% 11%));
    --color-background-active-narrow-filter: var(--csstools-light-dark-toggle--20, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) color-mix(in srgb, hsl(0deg 0% 97%) 8%, hsl(0deg 0% 11%));
    --color-background-hover-narrow-filter: var(--csstools-light-dark-toggle--21, hsl(0deg 0% 97%));
    --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 30%);
    --color-shadow-sidebar-row-hover: var(--csstools-light-dark-toggle--22, hsl(0deg 0% 0% / 30%));
    --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-sidebar-action: var(--csstools-light-dark-toggle--23, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-sidebar-action-hover: var(--csstools-light-dark-toggle--24, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) hsl(240deg 25% 35%);
    --color-background-sidebar-action-hover: var(--csstools-light-dark-toggle--25, hsl(240deg 100% 93%));
    --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) hsl(240deg 100% 75% / 20%);
    --color-background-navigation-item-hover: var(--csstools-light-dark-toggle--26, hsl(240deg 100% 50% / 7%));
    --color-background-sidebar-action-heading-hover: var(
        --color-background-navigation-item-hover
    );
    --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-navbar-bottom-border: var(--csstools-light-dark-toggle--27, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 15%);
    --color-left-sidebar-direct-messages-bottom-divider: var(--csstools-light-dark-toggle--28, hsl(0deg 0% 0% / 15%));
    --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 80%);
    --color-left-sidebar-inner-box-shadow: var(--csstools-light-dark-toggle--29, hsl(0deg 0% 0% / 20%));
    --color-left-sidebar-middle-box-shadow: var(--color-background);
    --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) hsl(0deg 0% 11% / 30%);
    --color-left-sidebar-outer-box-shadow: var(--csstools-light-dark-toggle--30, hsl(0deg 0% 94% / 20%));
    --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) hsl(240deg 19% 24%);
    --color-left-sidebar-middle-box-shadow-hover: var(--csstools-light-dark-toggle--31, hsl(244deg 36% 91%));
    --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) hsl(240deg 100% 75% / 20%);
    --color-left-sidebar-outer-box-shadow-hover: var(--csstools-light-dark-toggle--32, hsl(240deg 100% 50% / 7%));
    --color-unread-marker: hsl(217deg 64% 59%);
    --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) hsl(0deg 0% 30%);
    --color-masked-unread-marker: var(--csstools-light-dark-toggle--33, hsl(0deg 0% 80%));
    --color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%);
    --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-active-row-modal: var(--csstools-light-dark-toggle--34, hsl(0deg 0% 98%));
    --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) hsl(212deg 28% 8% / 75%);
    --color-background-overlay: var(--csstools-light-dark-toggle--35, hsl(0deg 0% 13% / 80%));
    --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) hsl(212deg 28% 8% / 75%);
    --color-background-non-empty-overlay-indicator: var(--csstools-light-dark-toggle--36, hsl(0deg 0% 100% / 90%));
    --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-modal-selectable-icon: var(--csstools-light-dark-toggle--37, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-modal-selectable-icon-hover: var(--csstools-light-dark-toggle--38, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) hsl(240deg 100% 75% / 20%);
    --background-color-modal-selectable-icon-hover: var(--csstools-light-dark-toggle--39, hsl(240deg 100% 50% / 7%));
    --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) hsl(240deg 7% 17%);
    --background-color-readonly-modal-input: var(--csstools-light-dark-toggle--40, hsl(240deg 7% 93%));
    --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --background-color-textarea: var(--csstools-light-dark-toggle--41, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --background-color-disabled-textarea: var(--csstools-light-dark-toggle--42, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 30%);
    --background-color-view-only-textarea: var(--csstools-light-dark-toggle--43, hsl(0deg 0% 100% / 60%));
    --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --border-color-textarea: var(--csstools-light-dark-toggle--44, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 90%);
    --focus-border-color-textarea: var(--csstools-light-dark-toggle--45, hsl(206.5deg 80% 62% / 80%));
    --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-pill-container-without-placeholder: var(--csstools-light-dark-toggle--46, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-unmuted-or-followed-topic-list-item: var(--csstools-light-dark-toggle--47, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 19%);
    --color-topic-indent-border: var(--csstools-light-dark-toggle--48, hsl(0deg 0% 0% / 19%));
    --color-outline-focus: hsl(215deg 47% 50%);
    --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --color-background-search: var(--csstools-light-dark-toggle--49, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) hsl(0deg 0% 20%);
    --color-background-search-collapsed: var(--csstools-light-dark-toggle--50, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) hsl(0deg 0% 20%);
    --color-background-search-option-hover: var(--csstools-light-dark-toggle--51, hsl(0deg 0% 94%));
    --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 30%);
    --color-search-box-hover-shadow: var(--csstools-light-dark-toggle--52, hsl(0deg 0% 0% / 10%));
    --color-search-shadow-wide: hsl(0deg 0% 0% / 25%);
    --color-search-shadow-tight: hsl(0deg 0% 0% / 10%);
    --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 35%);
    --color-search-dropdown-top-border: var(--csstools-light-dark-toggle--53, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) hsl(0deg 0% 78%);
    --color-search-icons: var(--csstools-light-dark-toggle--54, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%);
    --color-background-image-loader: var(--csstools-light-dark-toggle--55, hsl(0deg 0% 0% / 10%));
    --color-icon-purple: hsl(240deg 35% 60%);
    --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --color-background-popover-menu: var(--csstools-light-dark-toggle--56, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-border-popover-menu-separator: var(--csstools-light-dark-toggle--57, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) hsl(225deg 100% 84%);
    --color-hotkey-hint: var(--csstools-light-dark-toggle--58, hsl(227deg 78% 59%));
    --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) hsl(0deg 0% 65%);
    --color-popover-hotkey-hint: var(--csstools-light-dark-toggle--59, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) hsl(0deg 0% 65% / 50%);
    --color-border-popover-hotkey-hint: var(--csstools-light-dark-toggle--60, hsl(0deg 0% 40% / 50%));
    --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) hsl(220deg 12% 95% / 5%);
    --color-background-hover-popover-menu: var(--csstools-light-dark-toggle--61, hsl(220deg 12% 5% / 5%));
    --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) hsl(220deg 12% 95% / 7%);
    --color-background-active-popover-menu: var(--csstools-light-dark-toggle--62, hsl(220deg 12% 5% / 7%));
    --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-border-popover-menu: var(--csstools-light-dark-toggle--63, hsl(0deg 0% 0% / 40%));
    --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-personal-menu-avatar: var(--csstools-light-dark-toggle--64, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) hsl(240deg 18.37% 34.42%);
    --color-background-unread-counter-prominent: var(--csstools-light-dark-toggle--65, hsl(240deg 10% 50% / 70%));
    --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) hsl(240deg 10% 50% / 35%);
    --color-background-unread-counter-normal: var(--csstools-light-dark-toggle--66, hsl(240deg 10% 50% / 20%));
    --color-background-unread-counter-quiet: transparent;
    --box-shadow-unread-counter-normal: inset 0 0 1px hsl(0deg 0% 0% / 30%);
    --color-unread-counter-prominent: hsl(0deg 0% 100%);
    --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-unread-counter-normal: var(--csstools-light-dark-toggle--67, hsl(0deg 0% 0% / 90%));
    --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) hsl(240deg 15% 65%);
    --color-unread-counter-quiet: var(--csstools-light-dark-toggle--68, hsl(240deg 15% 50%));
    /* Legacy unread-counter color value. */
    --color-background-unread-counter: var(
        --color-background-unread-counter-prominent
    );
    --color-unread-counter-muted: hsl(240deg 10% 50% / 35%);
    --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) hsl(0deg 0% 67%);
    --color-border-add-subscription-button-focus: var(--csstools-light-dark-toggle--69, hsl(0deg 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--70: var(--csstools-color-scheme--light) color-mix(in srgb, hsl(240deg 10% 50%) 35%, hsl(0deg 0% 11%));
    --color-background-unread-counter-no-alpha: var(--csstools-light-dark-toggle--70, color-mix(in srgb, hsl(240deg 10% 50%) 20%, hsl(0deg 0% 94%)));
    --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-background-unread-counter-dot: var(--csstools-light-dark-toggle--71, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) hsl(105deg 2% 50%);
    --color-border-unread-counter: var(--csstools-light-dark-toggle--72, var(--color-background-unread-counter));
    --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) var(--color-border-unread-counter);
    --color-border-unread-counter-popover-menu: var(--csstools-light-dark-toggle--73, inherit);
    --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 30%);
    --color-background-tab-picker-container: var(--csstools-light-dark-toggle--74, hsl(0deg 0% 0% / 7%));
    --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-background-tab-picker-selected-tab: var(--csstools-light-dark-toggle--75, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 12%);
    --color-outline-tab-picker-tab-option: var(--csstools-light-dark-toggle--76, hsl(0deg 0% 0% / 30%));
    --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-background-tab-picker-tab-option-hover: var(--csstools-light-dark-toggle--77, hsl(0deg 0% 100% / 60%));
    --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 3%);
    --color-background-tab-picker-tab-option-active: var(--csstools-light-dark-toggle--78, hsl(0deg 0% 100% / 35%));
    --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --color-background-popover: var(--csstools-light-dark-toggle--79, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) hsl(22deg 70% 35%);
    --color-background-alert-word: var(--csstools-light-dark-toggle--80, hsl(18deg 100% 84%));
    --color-buddy-list-highlighted-user: var(
        --color-background-hover-narrow-filter
    );
    --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%);
    --color-buddy-list-avatar-loading: var(--csstools-light-dark-toggle--81, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-sidebar: var(--csstools-light-dark-toggle--82, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-sidebar-base: var(--csstools-light-dark-toggle--83, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 15%);
    --color-border-sidebar-subheader: var(--csstools-light-dark-toggle--84, hsl(0deg 0% 0% / 15%));
    --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-request-progress-status-alert-text: var(--csstools-light-dark-toggle--85, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) hsl(46deg 28% 38% / 27%);
    --color-background-tip: var(--csstools-light-dark-toggle--86, hsl(46deg 63% 95%));
    --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) hsl(49deg 38% 46%);
    --color-border-tip: var(--csstools-light-dark-toggle--87, hsl(49deg 20% 84%));
    --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 66.6%);
    --color-box-shadow-animated-purple-button-focus: var(--csstools-light-dark-toggle--88, hsl(235deg 18% 7%));
    --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-background-animated-button: var(--csstools-light-dark-toggle--89, hsl(0deg 0% 90%));
    --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-animated-button-text: var(--csstools-light-dark-toggle--90, hsl(0deg 0% 0%));
    --color-background-animated-button-hover: hsl(240deg 96% 68%);
    --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) hsl(3deg 73% 74%);
    --color-invalid-input-border: var(--csstools-light-dark-toggle--91, hsl(3deg 57% 33%));
    --invalid-input-box-shadow: 0 0 2px var(--color-invalid-input-box-shadow);
    --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) hsl(3deg 73% 74%);
    --color-invalid-input-box-shadow: var(--csstools-light-dark-toggle--92, hsl(3deg 57% 33%));
    --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-white-box: var(--csstools-light-dark-toggle--93, hsl(0deg 0% 100%));
    --color-stream-group-row-checked-icon: hsl(240deg 96% 68%);
    --color-stream-group-row-checked-icon-hover: hsl(240deg 41% 50%);
    --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) hsl(240deg 96% 68% / 50%);
    --color-stream-group-row-checked-icon-disabled: var(--csstools-light-dark-toggle--94, hsl(240deg 96% 68% / 100%));
    --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) hsl(218deg 14% 33%);
    --color-stream-group-row-plus-icon: var(--csstools-light-dark-toggle--95, hsl(0deg 0% 72%));
    --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) hsl(230deg 11% 67%);
    --color-stream-group-row-plus-icon-hover: var(--csstools-light-dark-toggle--96, hsl(0deg 0% 27%));
    --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) hsl(218deg 14% 33% / 50%);
    --color-stream-group-row-plus-icon-disabled: var(--csstools-light-dark-toggle--97, hsl(0deg 0% 87% / 100%));

    /* Recent view */
    --recent-view-body-border-width: 1px;
    --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--98: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 83%);
    --color-recent-view-link-unread: var(--csstools-light-dark-toggle--98, hsl(0deg 0% 5%));
    --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 75%);
    --color-recent-view-link: var(--csstools-light-dark-toggle--99, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--100: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-recent-filters-button-focus: var(--csstools-light-dark-toggle--100, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-recent-filters-button-disabled: var(--csstools-light-dark-toggle--101, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-border-recent-filters-button-disabled: var(--csstools-light-dark-toggle--102, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-recent-view-participant-overflow-text: var(--csstools-light-dark-toggle--103, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--104: var(--csstools-color-scheme--light) hsl(211deg 18% 25%);
    --color-background-recent-view-participant-overflow: var(--csstools-light-dark-toggle--104, hsl(0deg 0% 88%));
    --csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --color-background-recent-view-table-thead-th: var(--csstools-light-dark-toggle--105, hsl(0deg 0% 97%));
    --csstools-light-dark-toggle--106: var(--csstools-color-scheme--light) hsl(230deg 9% 60% / 14%);
    --color-background-recent-view-table-thead-sort-header: var(--csstools-light-dark-toggle--106, hsl(229deg 9% 36% / 7%));
    --csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) var(--grey-300);
    --color-text-recent-view-table-thead-th: var(--csstools-light-dark-toggle--107, var(--grey-600));
    --csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) hsl(229deg 10% 70% / 50%);
    --color-arrow-recent-view-table-thead-th: var(--csstools-light-dark-toggle--108, hsl(229deg 9% 36% / 50%));
    --csstools-light-dark-toggle--109: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 50%);
    --color-text-recent-view-last-msg-time: var(--csstools-light-dark-toggle--109, hsl(0deg 0% 15% / 75%));
    --csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 58%);
    --color-text-recent-view-last-msg-time-unread: var(--csstools-light-dark-toggle--110, hsl(0deg 0% 0% / 75%));

    /* Compose box colors */
    --csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) hsl(228deg 11% 17%);
    --color-compose-box-background: var(--csstools-light-dark-toggle--111, hsl(232deg 30% 92%));
    --csstools-light-dark-toggle--112: var(--csstools-color-scheme--light) color-mix(
            in srgb,
            var(--color-compose-box-background),
            hsl(0deg 0% 0%) 20%
        );
    --color-compose-message-content-background: var(--csstools-light-dark-toggle--112, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--113: var(--csstools-color-scheme--light) hsl(3deg 50% 12%);
    --color-compose-message-content-background-over-limit: var(--csstools-light-dark-toggle--113, hsl(3deg 35% 90%));
    --csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) hsl(50deg 75% 12%);
    --color-compose-message-content-background-approaching-limit: var(--csstools-light-dark-toggle--114, hsl(50deg 75% 92%));
    --csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-border-compose-content: var(--csstools-light-dark-toggle--115, hsl(0deg 0% 0% / 10%));
    --color-compose-send-button-icon-color: hsl(0deg 0% 100%);
    --color-compose-send-button-background: hsl(240deg 96% 68%);
    --color-compose-send-button-background-interactive: hsl(240deg 41% 50%);
    --color-compose-send-button-focus-border: hsl(232deg 20% 10%);
    --csstools-light-dark-toggle--116: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 80%);
    --color-compose-send-button-focus-shadow: var(--csstools-light-dark-toggle--116, hsl(230deg 100% 20%));
    --csstools-light-dark-toggle--117: var(--csstools-color-scheme--light) hsl(240deg 30% 70%);
    --color-compose-send-control-button: var(--csstools-light-dark-toggle--117, hsl(240deg 30% 50% / 95%));
    --color-compose-send-control-button-background: transparent;
    --csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) var(--color-compose-send-control-button);
    --color-compose-send-control-button-interactive: var(--csstools-light-dark-toggle--118, hsl(240deg 30% 50%));
    --csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) hsl(235deg 100% 70% / 11%);
    --color-compose-send-control-button-background-interactive: var(--csstools-light-dark-toggle--119, hsl(240deg 100% 30% / 5%));
    --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--120: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-compose-recipient-box-background-color: var(--csstools-light-dark-toggle--120, hsl(0deg 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--121: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 80%);
    --color-compose-recipient-box-border-color: var(--csstools-light-dark-toggle--121, color-mix(in srgb, hsl(0deg 0% 0%) 10%, hsl(232deg 20% 92%)));
    --csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 12%);
    --color-compose-recipient-box-hover: var(--csstools-light-dark-toggle--122, hsl(0deg 0% 69%));
    --csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 27%);
    --color-compose-recipient-box-has-focus: var(--csstools-light-dark-toggle--123, hsl(0deg 0% 57%));
    --csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-compose-collapsed-reply-button-area-background: var(--csstools-light-dark-toggle--124, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 15%);
    --color-compose-collapsed-reply-button-area-background-interactive: var(--csstools-light-dark-toggle--125, var(--color-compose-collapsed-reply-button-area-background));
    --csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-compose-collapsed-reply-button-area-border: var(--csstools-light-dark-toggle--126, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--127: 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--127, hsl(0deg 0% 60%));
    --csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) hsl(231deg 30% 65%);
    --color-compose-embedded-button-text-color: var(--csstools-light-dark-toggle--128, hsl(231deg 20% 46%));
    --csstools-light-dark-toggle--129: var(--csstools-color-scheme--light) hsl(231deg 30% 70%);
    --color-compose-embedded-button-text-color-hover: var(--csstools-light-dark-toggle--129, hsl(231deg 20% 30%));
    --color-compose-embedded-button-background: transparent;
    --csstools-light-dark-toggle--130: var(--csstools-color-scheme--light) hsl(235deg 100% 70% / 11%);
    --color-compose-embedded-button-background-hover: var(--csstools-light-dark-toggle--130, hsl(231deg 100% 90% / 50%));
    --csstools-light-dark-toggle--131: var(--csstools-color-scheme--light) hsl(235deg 100% 70% / 20%);
    --color-compose-embedded-button-background-interactive: var(--csstools-light-dark-toggle--131, hsl(231deg 100% 90% / 90%));
    --csstools-light-dark-toggle--132: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-compose-new-message-button: var(--csstools-light-dark-toggle--132, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--133: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 15%);
    --color-background-compose-new-message-button-hover: var(--csstools-light-dark-toggle--133, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--134: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-compose-new-message-button-active: var(--csstools-light-dark-toggle--134, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--135: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-compose-new-message-button: var(--csstools-light-dark-toggle--135, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--136: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-compose-new-message-button-hover: var(--csstools-light-dark-toggle--136, hsl(0deg 0% 60%));
    --csstools-light-dark-toggle--137: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-compose-new-message-button-active: var(--csstools-light-dark-toggle--137, hsl(0deg 0% 60%));
    --color-compose-chevron-arrow: hsl(0deg 0% 58%);
    --csstools-light-dark-toggle--138: var(--csstools-color-scheme--light) hsl(38deg 100% 70%);
    --color-limit-indicator: var(--csstools-light-dark-toggle--138, hsl(38deg 100% 36%));
    --csstools-light-dark-toggle--139: var(--csstools-color-scheme--light) hsl(3deg 80% 60%);
    --color-limit-indicator-over-limit: var(--csstools-light-dark-toggle--139, hsl(3deg 80% 40%));
    --csstools-light-dark-toggle--140: var(--csstools-color-scheme--light) hsl(227deg 80% 60% / 25%);
    --color-narrow-to-compose-recipients-background: var(--csstools-light-dark-toggle--140, hsl(227deg 100% 70% / 25%));
    --csstools-light-dark-toggle--141: var(--csstools-color-scheme--light) hsl(227deg 80% 60% / 35%);
    --color-narrow-to-compose-recipients-background-hover: var(--csstools-light-dark-toggle--141, hsl(227deg 100% 70% / 35%));
    --csstools-light-dark-toggle--142: var(--csstools-color-scheme--light) hsl(224deg 28% 81%);
    --color-narrow-to-compose-recipients: var(--csstools-light-dark-toggle--142, hsl(227deg 76% 64%));
    --csstools-light-dark-toggle--143: var(--csstools-color-scheme--light) hsl(221deg 100% 95%);
    --color-narrow-to-compose-recipients-hover: var(--csstools-light-dark-toggle--143, hsl(227deg 78% 59%));
    --csstools-light-dark-toggle--144: var(--csstools-color-scheme--light) hsl(0deg 100% 100% / 55%);
    --color-composebox-button: var(--csstools-light-dark-toggle--144, hsl(0deg 100% 0% / 55%));
    --color-composebox-button-hover: var(--color-text-default);
    --csstools-light-dark-toggle--145: var(--csstools-color-scheme--light) hsl(231deg 8% 13.5% / 80%);
    --color-composebox-button-background: var(--csstools-light-dark-toggle--145, hsl(0deg 100% 100% / 60%));
    --csstools-light-dark-toggle--146: var(--csstools-color-scheme--light) hsl(231deg 12% 18%);
    --color-composebox-button-background-hover: var(--csstools-light-dark-toggle--146, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--147: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 8%);
    --color-message-formatting-controls-container: var(--csstools-light-dark-toggle--147, hsl(232deg 30% 96%));
    --csstools-light-dark-toggle--148: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 80%);
    --color-message-content-container-border: var(--csstools-light-dark-toggle--148, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--149: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 27%);
    --color-message-content-container-border-focus: var(--csstools-light-dark-toggle--149, hsl(0deg 0% 57%));
    --color-message-content-container-border-over-limit: hsl(0deg 76% 65%);
    --color-message-content-container-border-approaching-limit: hsl(
        38deg 70% 50%
    );
    --csstools-light-dark-toggle--150: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-compose-control-button-background-hover: var(--csstools-light-dark-toggle--150, hsl(0deg 0% 0% / 5%));
    --csstools-light-dark-toggle--151: var(--csstools-color-scheme--light) hsl(236deg 33% 90% / 25%);
    --color-compose-formatting-button-divider: var(--csstools-light-dark-toggle--151, hsl(0deg 0% 75%));
    --csstools-light-dark-toggle--152: var(--csstools-color-scheme--light) hsl(0deg 0% 67%);
    --color-compose-focus-ring: var(--csstools-light-dark-toggle--152, var(--color-outline-focus));
    --color-compose-scroll-icon: hsl(0deg 0% 50%);
    --csstools-light-dark-toggle--153: var(--csstools-color-scheme--light) hsl(234deg 21% 24%);
    --csstools-light-dark-toggle--154: var(--csstools-color-scheme--light) hsl(234deg 21% 24% / 76.9%);
    --gradient-compose-scroll-backward: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--153, hsl(234deg 100% 95%)) 35%,
        var(--csstools-light-dark-toggle--154, hsl(234deg 100% 95%)) 50%,
        transparent 100%
    );
    --csstools-light-dark-toggle--155: var(--csstools-color-scheme--light) hsl(234deg 30% 28%);
    --csstools-light-dark-toggle--156: var(--csstools-color-scheme--light) hsl(234deg 30% 28% / 76.9%);
    --gradient-compose-scroll-backward-hover: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--155, hsl(234deg 100% 93%)) 35%,
        var(--csstools-light-dark-toggle--156, hsl(234deg 100% 93%)) 50%,
        transparent 100%
    );
    --csstools-light-dark-toggle--157: var(--csstools-color-scheme--light) hsl(234deg 35% 30%);
    --gradient-compose-scroll-backward-active: linear-gradient(
        90deg,
        var(--csstools-light-dark-toggle--157, hsl(234deg 100% 90%)) 45%,
        transparent 100%
    );
    --csstools-light-dark-toggle--158: var(--csstools-color-scheme--light) hsl(234deg 21% 24% / 76.9%);
    --csstools-light-dark-toggle--159: var(--csstools-color-scheme--light) hsl(234deg 21% 24%);
    --gradient-compose-scroll-forward: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--158, hsl(234deg 100% 95%)) 50%,
        var(--csstools-light-dark-toggle--159, hsl(234deg 100% 95%)) 65%
    );
    --csstools-light-dark-toggle--160: var(--csstools-color-scheme--light) hsl(234deg 30% 28% / 76.9%);
    --csstools-light-dark-toggle--161: var(--csstools-color-scheme--light) hsl(234deg 30% 28%);
    --gradient-compose-scroll-forward-hover: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--160, hsl(234deg 100% 93%)) 50%,
        var(--csstools-light-dark-toggle--161, hsl(234deg 100% 93%)) 65%
    );
    --csstools-light-dark-toggle--162: var(--csstools-color-scheme--light) hsl(234deg 35% 30%);
    --gradient-compose-scroll-forward-active: linear-gradient(
        90deg,
        transparent 0%,
        var(--csstools-light-dark-toggle--162, hsl(234deg 100% 90%)) 55%
    );

    /* Text colors */
    --csstools-light-dark-toggle--163: var(--csstools-color-scheme--light) hsl(0deg 0% 87%);
    --color-text-default: var(--csstools-light-dark-toggle--163, hsl(0deg 0% 20%));
    /* Unlike the light theme, the dark theme renders message
       text in the default color. */
    --csstools-light-dark-toggle--164: var(--csstools-color-scheme--light) var(--color-text-default);
    --color-text-message-default: var(--csstools-light-dark-toggle--164, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--165: var(--csstools-color-scheme--light) hsl(0deg 0% 87% / 40%);
    --color-text-message-blockquote-border: var(--csstools-light-dark-toggle--165, hsl(0deg 0% 15% / 25%));
    --color-text-message-header-archived: hsl(0deg 0% 50%);
    --csstools-light-dark-toggle--166: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-text-message-view-header: var(--csstools-light-dark-toggle--166, hsl(0deg 0% 20% / 100%));
    --csstools-light-dark-toggle--167: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-text-message-header: var(--csstools-light-dark-toggle--167, hsl(0deg 0% 15%));
    /* Light and dark mode both use the same hover color on
       sender names. */
    --color-text-sender-name-hover: hsl(200deg 100% 40%);
    --csstools-light-dark-toggle--168: var(--csstools-color-scheme--light) hsl(0deg 0% 95%);
    --color-text-dropdown-input: var(--csstools-light-dark-toggle--168, hsl(0deg 0% 13.33%));
    --csstools-light-dark-toggle--169: var(--csstools-color-scheme--light) hsl(240deg 100% 88% / 100%);
    --color-text-self-direct-mention: var(--csstools-light-dark-toggle--169, hsl(240deg 52% 45% / 100%));
    --csstools-light-dark-toggle--170: var(--csstools-color-scheme--light) hsl(184deg 52% 63% / 100%);
    --color-text-self-group-mention: var(--csstools-light-dark-toggle--170, hsl(183deg 52% 26% / 100%));
    --csstools-light-dark-toggle--171: var(--csstools-color-scheme--light) hsl(240deg 30% 65%);
    --color-text-show-more-less-button: var(--csstools-light-dark-toggle--171, hsl(240deg 52% 53%));
    --csstools-light-dark-toggle--172: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 75%);
    --color-text-search: var(--csstools-light-dark-toggle--172, hsl(0deg 0% 35%));
    --csstools-light-dark-toggle--173: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-search-hover: var(--csstools-light-dark-toggle--173, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--174: var(--csstools-color-scheme--light) hsl(0deg 0% 55%);
    --color-text-placeholder: var(--csstools-light-dark-toggle--174, hsl(0deg 0% 45%));
    --csstools-light-dark-toggle--175: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 50%);
    --color-text-search-placeholder: var(--csstools-light-dark-toggle--175, hsl(0deg 0% 50%));
    --csstools-light-dark-toggle--176: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 80%);
    --color-text-popover-menu: var(--csstools-light-dark-toggle--176, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--177: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-full-name: var(--csstools-light-dark-toggle--177, hsl(0deg 0% 15%));
    --csstools-light-dark-toggle--178: var(--csstools-color-scheme--light) hsl(0deg 0% 50%);
    --color-text-item: var(--csstools-light-dark-toggle--178, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--179: var(--csstools-color-scheme--light) hsl(0deg 0% 100% 35%);
    --color-text-personal-menu-no-status: var(--csstools-light-dark-toggle--179, hsl(0deg 0% 50%));
    --csstools-light-dark-toggle--180: var(--csstools-color-scheme--light) hsl(0deg 0% 100% 50%);
    --color-text-personal-menu-some-status: var(--csstools-light-dark-toggle--180, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--181: var(--csstools-color-scheme--light) hsl(216deg 50% 75%);
    --color-text-sidebar-heading: var(--csstools-light-dark-toggle--181, hsl(216deg 65% 20%));
    --csstools-light-dark-toggle--182: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-text-sidebar-action-heading: var(--csstools-light-dark-toggle--182, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--183: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-text-sidebar-action-heading-hover: var(--csstools-light-dark-toggle--183, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--184: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-text-sidebar-popover-menu: var(--csstools-light-dark-toggle--184, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--185: var(--csstools-color-scheme--light) var(--grey-400);
    --color-text-user-card-secondary: var(--csstools-light-dark-toggle--185, var(--grey-550));
    --color-text-url: hsl(200deg 100% 40%);
    --csstools-light-dark-toggle--186: var(--csstools-color-scheme--light) hsl(200deg 79% 66%);
    --color-text-url-hover: var(--csstools-light-dark-toggle--186, hsl(200deg 100% 25%));
    --csstools-light-dark-toggle--187: var(--csstools-color-scheme--light) hsl(0deg 0% 52%);
    --color-text-settings-field-hint: var(--csstools-light-dark-toggle--187, hsl(0deg 0% 57%));
    --csstools-light-dark-toggle--188: var(--csstools-color-scheme--light) hsl(236deg 33% 80%);
    --color-text-clear-search-button: var(--csstools-light-dark-toggle--188, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--189: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-clear-search-button-hover: var(--csstools-light-dark-toggle--189, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--190: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-text-settings-plus-button: var(--csstools-light-dark-toggle--190, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--191: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-settings-plus-button: var(--csstools-light-dark-toggle--191, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--192: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-settings-plus-button: var(--csstools-light-dark-toggle--192, hsl(0deg 0% 80%));

    /* User Profile Modal */
    --csstools-light-dark-toggle--193: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-user-profile-field-name: var(--csstools-light-dark-toggle--193, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--194: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-border-user-profile-table: var(--csstools-light-dark-toggle--194, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--195: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-manage-profile-footer: var(--csstools-light-dark-toggle--195, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--196: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 30%);
    --color-border-user-profile-list-container: var(--csstools-light-dark-toggle--196, hsl(0deg 0% 0% / 35%));
    --csstools-light-dark-toggle--197: var(--csstools-color-scheme--light) hsl(0deg 0% 17%);
    --background-color-user-profile-list-container: var(--csstools-light-dark-toggle--197, hsl(0deg 0% 100%));

    /* Link colors */
    --csstools-light-dark-toggle--198: var(--csstools-color-scheme--light) hsl(200deg 100% 50%);
    --color-text-link: var(--csstools-light-dark-toggle--198, hsl(210deg 94% 42%));
    --csstools-light-dark-toggle--199: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(200deg 100% 50%) 20%, transparent);
    --color-text-link-decoration: var(--csstools-light-dark-toggle--199, color-mix(in oklch, hsl(210deg 94% 42%) 20%, transparent));
    --csstools-light-dark-toggle--200: var(--csstools-color-scheme--light) hsl(200deg 100% 60%);
    --color-text-link-hover: var(--csstools-light-dark-toggle--200, hsl(212deg 100% 50%));
    --csstools-light-dark-toggle--201: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(200deg 100% 60%) 70%, transparent);
    --color-text-link-decoration-hover: var(--csstools-light-dark-toggle--201, color-mix(in oklch, hsl(212deg 100% 50%) 70%, transparent));
    --csstools-light-dark-toggle--202: var(--csstools-color-scheme--light) hsl(200deg 100% 50%);
    --color-text-link-active: var(--csstools-light-dark-toggle--202, hsl(212deg 100% 30%));
    /* These colors are from Bootstrap. */
    --color-text-generic-link: #08c;
    --csstools-light-dark-toggle--203: var(--csstools-color-scheme--light) hsl(200deg 79% 66%);
    --color-text-generic-link-interactive: var(--csstools-light-dark-toggle--203, #005580);

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

    /* Widgets colors */
    --csstools-light-dark-toggle--205: var(--csstools-color-scheme--light) hsl(240deg 5% 16%);
    --color-background-dropdown-widget: var(--csstools-light-dark-toggle--205, hsl(240deg 20% 98%));
    --csstools-light-dark-toggle--206: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-border-dropdown-widget: var(--csstools-light-dark-toggle--206, hsl(0deg 0% 0% / 40%));
    --csstools-light-dark-toggle--207: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-dropdown-widget-button: var(--csstools-light-dark-toggle--207, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--208: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-dropdown-widget-button: var(--csstools-light-dark-toggle--208, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--209: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-disabled-dropdown-widget-button: var(--csstools-light-dark-toggle--209, hsl(0deg 0% 93%));
    /* Poll Widget */
    --csstools-light-dark-toggle--210: var(--csstools-color-scheme--light) hsl(185deg 35% 65%);
    --color-poll-vote: var(--csstools-light-dark-toggle--210, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--211: var(--csstools-color-scheme--light) hsl(185deg 50% 70%);
    --color-poll-vote-hover: var(--csstools-light-dark-toggle--211, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--212: var(--csstools-color-scheme--light) hsl(185deg 50% 65%);
    --color-poll-vote-focus: var(--csstools-light-dark-toggle--212, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--213: var(--csstools-color-scheme--light) hsl(185deg 35% 35%);
    --color-border-poll-vote: var(--csstools-light-dark-toggle--213, hsl(156deg 28% 70%));
    --csstools-light-dark-toggle--214: var(--csstools-color-scheme--light) hsl(185deg 40% 40%);
    --color-border-poll-vote-hover: var(--csstools-light-dark-toggle--214, hsl(156deg 30% 50%));
    --csstools-light-dark-toggle--215: var(--csstools-color-scheme--light) hsl(185deg 40% 50%);
    --color-border-poll-vote-focus: var(--csstools-light-dark-toggle--215, hsl(156deg 30% 50%));
    --csstools-light-dark-toggle--216: var(--csstools-color-scheme--light) hsl(185deg 20% 20%);
    --color-background-poll-vote-hover: var(--csstools-light-dark-toggle--216, var(--color-background-widget-button));
    --csstools-light-dark-toggle--217: var(--csstools-color-scheme--light) hsl(185deg 40% 35%);
    --color-background-poll-vote-focus: var(--csstools-light-dark-toggle--217, hsl(156deg 41% 90%));
    --csstools-light-dark-toggle--218: var(--csstools-color-scheme--light) hsl(236deg 15% 70%);
    --color-poll-names: var(--csstools-light-dark-toggle--218, hsl(0deg 0% 45%));
    /* TODO Widget */
    --csstools-light-dark-toggle--219: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(185deg 40% 45%) 70%, transparent);
    --color-border-todo-checkbox: var(--csstools-light-dark-toggle--219, hsl(156deg 28% 70%));
    --csstools-light-dark-toggle--220: var(--csstools-color-scheme--light) hsl(185deg 40% 35%);
    --color-border-todo-checkbox-hover: var(--csstools-light-dark-toggle--220, hsl(156deg 30% 50%));
    --csstools-light-dark-toggle--221: var(--csstools-color-scheme--light) hsl(185deg 40% 45%);
    --color-border-todo-checkbox-checked: var(--csstools-light-dark-toggle--221, hsl(156deg 41% 40%));
    --csstools-light-dark-toggle--222: var(--csstools-color-scheme--light) hsl(185deg 20% 20%);
    --color-background-todo-checkbox-hover: var(--csstools-light-dark-toggle--222, transparent);
    --csstools-light-dark-toggle--223: var(--csstools-color-scheme--light) hsl(185deg 40% 45%);
    --color-background-todo-checkbox-checked: var(--csstools-light-dark-toggle--223, hsl(156deg 41% 40%));

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

    /* Settings */
    --csstools-light-dark-toggle--228: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-realm-enable-spectator-access-link: var(--csstools-light-dark-toggle--228, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--229: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-stream-email: var(--csstools-light-dark-toggle--229, hsl(0deg 0% 98%));
    --csstools-light-dark-toggle--230: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-integration-url: var(--csstools-light-dark-toggle--230, transparent);
    --csstools-light-dark-toggle--231: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-tbody-th-odd: var(--csstools-light-dark-toggle--231, transparent);
    /* Markdown colors */
    --csstools-light-dark-toggle--232: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-rendered-markdown-thead: var(--csstools-light-dark-toggle--232, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--233: var(--csstools-color-scheme--light) hsl(0deg 0% 33%);
    --color-border-rendered-markdown-table: var(--csstools-light-dark-toggle--233, hsl(0deg 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--234: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-tab-switcher-ind-tab: var(--csstools-light-dark-toggle--234, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--235: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-tab-switcher-ind-tab-selected: var(--csstools-light-dark-toggle--235, hsl(0deg 0% 53%));
    --csstools-light-dark-toggle--236: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-tab-switcher-ind-tab: var(--csstools-light-dark-toggle--236, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--237: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 90%);
    --color-border-tab-switcher-ind-tab-selected: var(--csstools-light-dark-toggle--237, hsl(0deg 0% 47%));
    --csstools-light-dark-toggle--238: var(--csstools-color-scheme--light) hsl(0deg 0% 42% / 90%);
    --color-text-tab-switcher-ind-tab-disabled: var(--csstools-light-dark-toggle--238, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--239: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-tab-switcher-ind-tab-disabled: var(--csstools-light-dark-toggle--239, hsl(0deg 0% 87%));

    /* Settings table colors */
    --csstools-light-dark-toggle--240: var(--csstools-color-scheme--light) hsl(0deg 0% 0%);
    --color-background-table-header: var(--csstools-light-dark-toggle--240, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--241: var(--csstools-color-scheme--light) hsl(211deg 29% 14%);
    --color-background-table-header-sortable-hover: var(--csstools-light-dark-toggle--241, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--242: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-table-striped: var(--csstools-light-dark-toggle--242, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--243: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-table-bordered: var(--csstools-light-dark-toggle--243, hsl(0deg 0% 87%));
    --csstools-light-dark-toggle--244: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-border-table-subscriber-list: var(--csstools-light-dark-toggle--244, hsl(0deg 0% 87%));

    /* Markdown code colors */
    --csstools-light-dark-toggle--245: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-markdown-code-text: var(--csstools-light-dark-toggle--245, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--246: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 8%);
    --color-markdown-code-background: var(--csstools-light-dark-toggle--246, hsl(0deg 0% 0% / 6%));
    --csstools-light-dark-toggle--247: var(--csstools-color-scheme--light) var(--color-markdown-code-background);
    --color-markdown-code-background-mentions: var(--csstools-light-dark-toggle--247, hsl(0deg 0% 0% / 7%));
    --color-markdown-pre-text: var(--color-markdown-code-text);
    --color-markdown-pre-border: transparent;
    --csstools-light-dark-toggle--248: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 4%);
    --color-markdown-pre-background: var(--csstools-light-dark-toggle--248, hsl(0deg 0% 0% / 4%));
    --csstools-light-dark-toggle--249: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-markdown-pre-background-mentions: var(--csstools-light-dark-toggle--249, hsl(0deg 0% 0% / 4%));
    --csstools-light-dark-toggle--250: var(--csstools-color-scheme--light) var(--color-markdown-pre-border);
    --color-markdown-pre-border-mentions: var(--csstools-light-dark-toggle--250, transparent);
    --csstools-light-dark-toggle--251: var(--csstools-color-scheme--light) var(--color-text-generic-link);
    --color-markdown-link: var(--csstools-light-dark-toggle--251, hsl(200deg 100% 40%));
    --color-markdown-code-link: var(--color-markdown-link);
    --csstools-light-dark-toggle--252: var(--csstools-color-scheme--light) var(--color-text-generic-link-interactive);
    --color-markdown-link-hover: var(--csstools-light-dark-toggle--252, hsl(200deg 100% 25%));
    --color-markdown-code-link-hover: var(--color-markdown-link-hover);
    --csstools-light-dark-toggle--253: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 3%);
    --color-background-image-thumbnail: var(--csstools-light-dark-toggle--253, hsl(0deg 0% 0% / 3%));
    --csstools-light-dark-toggle--254: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 35%);
    --color-background-image-thumbnail-hover: var(--csstools-light-dark-toggle--254, hsl(0deg 0% 0% / 30%));

    /* Icon colors */
    --csstools-light-dark-toggle--255: var(--csstools-color-scheme--light) hsl(180deg 5% 50% / 100%);
    --color-icon-bot: var(--csstools-light-dark-toggle--255, hsl(180deg 8% 65% / 100%));
    --csstools-light-dark-toggle--256: var(--csstools-color-scheme--light) hsl(217deg 41% 90% / 50%);
    --color-message-action-visible: var(--csstools-light-dark-toggle--256, hsl(216deg 43% 20% / 50%));
    --csstools-light-dark-toggle--257: var(--csstools-color-scheme--light) hsl(217deg 41% 90% / 100%);
    --color-message-action-interactive: var(--csstools-light-dark-toggle--257, hsl(216deg 43% 20% / 100%));
    --color-message-star-action: hsl(41deg 100% 47% / 100%);
    --csstools-light-dark-toggle--258: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-left-sidebar-follow-icon-hover: var(--csstools-light-dark-toggle--258, hsl(0deg 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--259: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-left-sidebar-navigation-icon: var(--csstools-light-dark-toggle--259, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--260: var(--csstools-color-scheme--light) hsl(240deg 35% 58%);
    --color-left-sidebar-dm-partners-icon: var(--csstools-light-dark-toggle--260, hsl(240deg 30% 60%));
    --csstools-light-dark-toggle--261: var(--csstools-color-scheme--light) hsl(240deg 35% 38%);
    --color-vdots-hint: var(--csstools-light-dark-toggle--261, hsl(240deg 30% 80%));
    --csstools-light-dark-toggle--262: var(--csstools-color-scheme--light) hsl(240deg 35% 68%);
    --color-vdots-visible: var(--csstools-light-dark-toggle--262, hsl(240deg 30% 40%));
    --csstools-light-dark-toggle--263: var(--csstools-color-scheme--light) hsl(240deg 100% 90%);
    --color-vdots-hover: var(--csstools-light-dark-toggle--263, hsl(240deg 100% 15%));
    --csstools-light-dark-toggle--264: var(--csstools-color-scheme--light) hsl(0deg 0% 80%);
    --color-tab-picker-icon: var(--csstools-light-dark-toggle--264, hsl(200deg 100% 40%));
    --csstools-light-dark-toggle--265: var(--csstools-color-scheme--light) #4cdc75;
    --color-user-circle-active: var(--csstools-light-dark-toggle--265, #43a35e);
    --csstools-light-dark-toggle--266: var(--csstools-color-scheme--light) #ae640a;
    --color-user-circle-idle: var(--csstools-light-dark-toggle--266, #f5b266);
    --csstools-light-dark-toggle--267: var(--csstools-color-scheme--light) #545764;
    --color-user-circle-offline: var(--csstools-light-dark-toggle--267, #bcc0cf);
    --csstools-light-dark-toggle--268: var(--csstools-color-scheme--light) #646671;
    --color-user-circle-offline-typeahead-highlight: var(--csstools-light-dark-toggle--268, #adb2c5);
    --color-user-circle-deactivated: hsl(0deg 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--269: 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--269, 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--270: 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--270, color-mix(
                    in srgb,
                    var(--color-user-circle-idle) 78.9%,
                    var(--color-background)
                ))
            25%,
        var(--color-background) 100%
    );
    --csstools-light-dark-toggle--271: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent);
    --color-copy-button: var(--csstools-light-dark-toggle--271, color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent));
    --csstools-light-dark-toggle--272: var(--csstools-color-scheme--light) var(--grey-300);
    --color-copy-button-hover: var(--csstools-light-dark-toggle--272, var(--grey-600));
    --csstools-light-dark-toggle--273: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(230deg 9% 60%) 14%, transparent);
    --color-copy-button-square-bg-hover: var(--csstools-light-dark-toggle--273, color-mix(in oklch, hsl(229deg 9% 36%) 7%, transparent));
    --csstools-light-dark-toggle--274: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent);
    --color-copy-button-active: var(--csstools-light-dark-toggle--274, color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent));
    --csstools-light-dark-toggle--275: var(--csstools-color-scheme--light) var(--grey-300);
    --color-copy-button-square-active: var(--csstools-light-dark-toggle--275, var(--grey-600));
    --csstools-light-dark-toggle--276: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(229deg 9% 60%) 18%, transparent);
    --color-copy-button-square-bg-active: var(--csstools-light-dark-toggle--276, color-mix(in oklch, hsl(229deg 9% 36%) 11%, transparent));
    --csstools-light-dark-toggle--277: var(--csstools-color-scheme--light) var(--green-300);
    --color-copy-button-success: var(--csstools-light-dark-toggle--277, var(--green-500));

    /* Reaction container colors */
    --csstools-light-dark-toggle--278: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 15%);
    --color-message-reaction-border: var(--csstools-light-dark-toggle--278, hsl(0deg 0% 0% / 10%));
    --csstools-light-dark-toggle--279: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 70%);
    --color-message-reaction-border-reacted: var(--csstools-light-dark-toggle--279, hsl(0deg 0% 0% / 45%));
    --csstools-light-dark-toggle--280: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 30%);
    --color-message-reaction-background: var(--csstools-light-dark-toggle--280, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--281: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 80%);
    --color-message-reaction-background-reacted: var(--csstools-light-dark-toggle--281, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--282: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 10%);
    --color-message-reaction-background-hover: var(--csstools-light-dark-toggle--282, hsl(210deg 30% 96%));
    --csstools-light-dark-toggle--283: var(--csstools-color-scheme--light) transparent;
    --color-message-reaction-shadow-inner: var(--csstools-light-dark-toggle--283, hsl(210deg 50% 50% / 8%));
    --csstools-light-dark-toggle--284: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 75%);
    --color-message-reaction-text: var(--csstools-light-dark-toggle--284, hsl(210deg 20% 25% / 100%));
    --csstools-light-dark-toggle--285: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 85%);
    --color-message-reaction-text-reacted: var(--csstools-light-dark-toggle--285, hsl(210deg 20% 20% / 100%));
    --csstools-light-dark-toggle--286: var(--csstools-color-scheme--light) var(--color-message-reaction-text);
    --color-message-reaction-button-text: var(--csstools-light-dark-toggle--286, hsl(210deg 20% 20% / 60%));
    --csstools-light-dark-toggle--287: var(--csstools-color-scheme--light) var(--color-message-reaction-text-reacted);
    --color-message-reaction-button-text-hover: var(--csstools-light-dark-toggle--287, var(--color-message-reaction-text));
    --color-message-reaction-button-background: inherit;
    --csstools-light-dark-toggle--288: var(--csstools-color-scheme--light) var(--color-message-reaction-background-hover);
    --color-message-reaction-button-background-hover: var(--csstools-light-dark-toggle--288, 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--289: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 50%);
    --color-zulip-logo: var(--csstools-light-dark-toggle--289, hsl(0deg 0% 0% / 34%));
    --csstools-light-dark-toggle--290: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-zulip-logo-loading: var(--csstools-light-dark-toggle--290, hsl(0deg 0% 27%));
    --csstools-light-dark-toggle--291: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 60%);
    --color-recent-view-loading-spinner: var(--csstools-light-dark-toggle--291, hsl(0deg 0% 27%));
    --csstools-light-dark-toggle--292: var(--csstools-color-scheme--light) hsl(214deg 27% 18%);
    --color-zulip-logo-z: var(--csstools-light-dark-toggle--292, hsl(0deg 0% 100%));

    /* Message collapsing/condensing button colors */
    --csstools-light-dark-toggle--293: var(--csstools-color-scheme--light) hsl(240deg 44% 56% / 15%);
    --color-show-more-less-button-background: var(--csstools-light-dark-toggle--293, hsl(240deg 44% 56% / 8%));
    --csstools-light-dark-toggle--294: var(--csstools-color-scheme--light) hsl(240deg 44% 56% / 25%);
    --color-show-more-less-button-background-hover: var(--csstools-light-dark-toggle--294, hsl(240deg 44% 56% / 15%));
    --csstools-light-dark-toggle--295: var(--csstools-color-scheme--light) hsl(240deg 44% 56% / 15%);
    --color-show-more-less-button-background-active: var(--csstools-light-dark-toggle--295, hsl(240deg 44% 56% / 20%));

    /* Message edit history colors */
    --csstools-light-dark-toggle--296: var(--csstools-color-scheme--light) hsl(122deg 100% 81%);
    --color-message-edit-history-text-inserted: var(--csstools-light-dark-toggle--296, hsl(122deg 72% 30%));
    --csstools-light-dark-toggle--297: var(--csstools-color-scheme--light) hsl(120deg 64% 95% / 30%);
    --color-message-edit-history-background-inserted: var(--csstools-light-dark-toggle--297, hsl(120deg 64% 95%));
    --csstools-light-dark-toggle--298: var(--csstools-color-scheme--light) hsl(0deg 90% 67%);
    --color-message-edit-history-text-deleted: var(--csstools-light-dark-toggle--298, hsl(0deg 100% 50%));
    --csstools-light-dark-toggle--299: var(--csstools-color-scheme--light) hsl(7deg 54% 62% / 38%);
    --color-message-edit-history-background-deleted: var(--csstools-light-dark-toggle--299, hsl(7deg 90% 92%));

    /* Mention pill colors */
    --csstools-light-dark-toggle--300: var(--csstools-color-scheme--light) hsl(240deg 13% 16%);
    --color-background-direct-mention: var(--csstools-light-dark-toggle--300, hsl(240deg 52% 95%));
    --csstools-light-dark-toggle--301: var(--csstools-color-scheme--light) hsl(180deg 13% 14%);
    --color-background-group-mention: var(--csstools-light-dark-toggle--301, hsl(180deg 40% 94%));
    --csstools-light-dark-toggle--302: var(--csstools-color-scheme--light) hsl(240deg 52% 60% / 25%);
    --color-background-text-direct-mention: var(--csstools-light-dark-toggle--302, hsl(240deg 70% 70% / 20%));
    --csstools-light-dark-toggle--303: var(--csstools-color-scheme--light) hsl(240deg 52% 60% / 45%);
    --color-background-text-hover-direct-mention: var(--csstools-light-dark-toggle--303, hsl(240deg 70% 70% / 30%));
    --csstools-light-dark-toggle--304: var(--csstools-color-scheme--light) hsl(183deg 52% 40% / 20%);
    --color-background-text-group-mention: var(--csstools-light-dark-toggle--304, hsl(183deg 60% 45% / 18%));
    --csstools-light-dark-toggle--305: var(--csstools-color-scheme--light) hsl(183deg 52% 40% / 30%);
    --color-background-text-hover-group-mention: var(--csstools-light-dark-toggle--305, hsl(183deg 60% 45% / 30%));

    /* Input pills */
    --csstools-light-dark-toggle--306: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 38%);
    --color-background-input-pill: var(--csstools-light-dark-toggle--306, hsl(237deg 68% 94%));
    /* Tuned pill for the search bar in dark mode. */
    --csstools-light-dark-toggle--307: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 30%);
    --color-background-input-pill-search: var(--csstools-light-dark-toggle--307, hsl(237deg 68% 94%));
    --csstools-light-dark-toggle--308: var(--csstools-color-scheme--light) hsl(240deg 52% 60% / 45%);
    --color-background-input-pill-hover: var(--csstools-light-dark-toggle--308, hsl(240deg 70% 70% / 30%));
    --csstools-light-dark-toggle--309: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 60%);
    --color-border-input-pill-image: var(--csstools-light-dark-toggle--309, hsl(237deg 68% 94% / 50%));
    --csstools-light-dark-toggle--310: var(--csstools-color-scheme--light) hsl(240deg 65% 60% / 22%);
    --color-outline-low-attention-input-pill: var(--csstools-light-dark-toggle--310, hsl(237deg 68% 88%));
    --csstools-light-dark-toggle--311: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 60%);
    --color-focus-outline-input-pill: var(--csstools-light-dark-toggle--311, hsl(240deg 50% 50%));
    --csstools-light-dark-toggle--312: var(--csstools-color-scheme--light) hsl(240deg 50% 74%);
    --color-input-pill-close: var(--csstools-light-dark-toggle--312, hsl(240deg 60% 65%));
    --csstools-light-dark-toggle--313: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-background-input-pill-exit-hover: var(--csstools-light-dark-toggle--313, hsl(240deg 70% 70% / 15%));
    --csstools-light-dark-toggle--314: var(--csstools-color-scheme--light) hsl(360deg 97% 25%);
    --color-background-deactivated-user-pill: var(--csstools-light-dark-toggle--314, hsl(8deg 96% 91%));
    --csstools-light-dark-toggle--315: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 70%);
    --color-focus-outline-deactivated-user-pill: var(--csstools-light-dark-toggle--315, hsl(4deg 75% 53%));
    --csstools-light-dark-toggle--316: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-close-deactivated-user-pill: var(--csstools-light-dark-toggle--316, hsl(4deg 75% 53%));
    --csstools-light-dark-toggle--317: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-background-exit-hover-deactivated-user-pill: var(--csstools-light-dark-toggle--317, hsl(4deg 75% 53% / 15%));
    --csstools-light-dark-toggle--318: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 40%);
    --color-background-user-pill: var(--csstools-light-dark-toggle--318, hsl(0deg 0% 100% / 85%));
    --csstools-light-dark-toggle--319: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-pill-container: var(--csstools-light-dark-toggle--319, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--320: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-pill-container-input-disabled: var(--csstools-light-dark-toggle--320, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--321: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-pill-container: var(--csstools-light-dark-toggle--321, hsl(0deg 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--322: var(--csstools-color-scheme--light) hsl(147deg 40% 55%);
    --color-background-inbox-no-unreads-illustration: var(--csstools-light-dark-toggle--322, hsl(147deg 57% 25%));
    --color-background-inbox: var(--color-background);
    --color-border-inbox-folder-component: hsl(0deg 0% 0% / 13%);
    --csstools-light-dark-toggle--323: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-icon-search-inbox: var(--csstools-light-dark-toggle--323, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--324: var(--csstools-color-scheme--light) hsl(0deg 0% 95%);
    --color-inbox-search-text: var(--csstools-light-dark-toggle--324, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--325: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 20%);
    --color-border-inbox-search: var(--csstools-light-dark-toggle--325, hsl(229.09deg 21.57% 10% / 30%));
    --csstools-light-dark-toggle--326: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 40%);
    --color-border-inbox-search-hover: var(--csstools-light-dark-toggle--326, hsl(229.09deg 21.57% 10% / 60%));
    --csstools-light-dark-toggle--327: var(--csstools-color-scheme--light) hsl(225deg 6% 10%);
    --color-background-inbox-search: var(--csstools-light-dark-toggle--327, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--328: var(--csstools-color-scheme--light) hsl(225deg 6% 8%);
    --color-background-inbox-search-hover: var(--csstools-light-dark-toggle--328, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--329: var(--csstools-color-scheme--light) hsl(225deg 6% 7%);
    --color-background-inbox-search-focus: var(--csstools-light-dark-toggle--329, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--330: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 50%);
    --color-border-inbox-search-focus: var(--csstools-light-dark-toggle--330, hsl(229.09deg 21.57% 10% / 80%));
    --csstools-light-dark-toggle--331: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 40%);
    --color-box-shadow-inbox-search-focus: var(--csstools-light-dark-toggle--331, hsl(228deg 9.8% 20% / 30%));
    --csstools-light-dark-toggle--332: var(--csstools-color-scheme--light) hsl(0deg 0% 14%);
    --color-background-inbox-row: var(--csstools-light-dark-toggle--332, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--333: var(--csstools-color-scheme--light) color-mix(in srgb, hsl(0deg 0% 100%) 5%, hsl(0deg 0% 14%));
    --color-background-inbox-row-hover: var(--csstools-light-dark-toggle--333, color-mix(in srgb, hsl(0deg 0% 0%) 5%, hsl(0deg 0% 100%)));
    --csstools-light-dark-toggle--334: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 5%);
    --color-background-button-inbox-selected: var(--csstools-light-dark-toggle--334, hsl(0deg 0% 0% / 5%));
    --csstools-light-dark-toggle--335: var(--csstools-color-scheme--light) hsl(0deg 0% 20%);
    --color-background-button-inbox-focus: var(--csstools-light-dark-toggle--335, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--336: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-icons-inbox: var(--csstools-light-dark-toggle--336, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--337: var(--csstools-color-scheme--light) hsl(216deg 50% 75%);
    --color-folder-header: var(--csstools-light-dark-toggle--337, hsl(216deg 43% 20%));
    /* Light mode uses the --grey-600 equivalent;
       dark mode uses the --grey-300 equivalent. */
    --csstools-light-dark-toggle--338: var(--csstools-color-scheme--light) #aaadba;
    --color-inbox-row-chevron: var(--csstools-light-dark-toggle--338, #535663);

    /* Navbar dropdown menu constants - Values from Figma design */
    --box-shadow-popover-menu:
        0 2.78px 4.11px 0 hsl(0deg 0% 0% / 6%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 7%),
        0 8.438px 13.9271px 0 hsl(0deg 0% 0% / 8%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 9%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 9%),
        0 41px 80px 0 hsl(0deg 0% 0% / 13%);
    --box-shadow-gear-menu:
        0 2.7798px 4.1129px 0 hsl(0deg 0% 0% / 10%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
        0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
        0 41px 80px 0 hsl(0deg 0% 0% / 20%);
    --csstools-light-dark-toggle--339: var(--csstools-color-scheme--light) hsl(240deg 35% 60%);
    --color-navbar-icon: var(--csstools-light-dark-toggle--339, hsl(240deg 20% 50%));
    --csstools-light-dark-toggle--340: var(--csstools-color-scheme--light) hsl(240deg 55% 72% / 100%);
    --color-navbar-spectator-low-attention-brand-button-text: var(--csstools-light-dark-toggle--340, hsl(240deg 40% 50%));
    --color-navbar-spectator-low-attention-brand-button-background: transparent;
    --csstools-light-dark-toggle--341: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 10%);
    --color-navbar-spectator-low-attention-brand-button-background-hover: var(--csstools-light-dark-toggle--341, hsl(240deg 100% 30% / 5%));
    --csstools-light-dark-toggle--342: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 13%);
    --color-navbar-spectator-low-attention-brand-button-background-active: var(--csstools-light-dark-toggle--342, hsl(240deg 100% 30% / 8%));
    --csstools-light-dark-toggle--343: var(--csstools-color-scheme--light) hsl(240deg 64% 76% / 100%);
    --color-navbar-spectator-medium-attention-brand-button-text: var(--csstools-light-dark-toggle--343, hsl(240deg 40% 40% / 100%));
    --csstools-light-dark-toggle--344: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 12%);
    --color-navbar-spectator-medium-attention-brand-button-background: var(--csstools-light-dark-toggle--344, hsl(244deg 64% 47% / 10%));
    --csstools-light-dark-toggle--345: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 17%);
    --color-navbar-spectator-medium-attention-brand-button-background-hover: var(--csstools-light-dark-toggle--345, hsl(244deg 64% 47% / 15%));
    --csstools-light-dark-toggle--346: var(--csstools-color-scheme--light) hsl(240deg 56% 70% / 12%);
    --color-navbar-spectator-medium-attention-brand-button-background-active: var(--csstools-light-dark-toggle--346, hsl(244deg 64% 47% / 18%));
    --csstools-light-dark-toggle--347: var(--csstools-color-scheme--light) hsl(0deg 0% 50%);
    --color-gear-menu-lighter-text: var(--csstools-light-dark-toggle--347, hsl(0deg 0% 40%));
    --csstools-light-dark-toggle--348: var(--csstools-color-scheme--light) hsl(217deg 100% 65%);
    --color-gear-menu-blue-text: var(--csstools-light-dark-toggle--348, hsl(217deg 100% 50%));
    --csstools-light-dark-toggle--349: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 4%);
    --color-header-button-hover: var(--csstools-light-dark-toggle--349, hsl(0deg 0% 0% / 5%));
    /* 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--350: var(--csstools-color-scheme--light) color-mix(in srgb, hsl(0deg 0% 100%) 4%, hsl(0deg 0% 13%));
    --color-header-button-hover-no-alpha: var(--csstools-light-dark-toggle--350, color-mix(in srgb, hsl(0deg 0% 0%) 5%, hsl(0deg 0% 97%)));
    --csstools-light-dark-toggle--351: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 7%);
    --color-header-button-focus: var(--csstools-light-dark-toggle--351, hsl(0deg 0% 0% / 8%));
    /* The second color value aligns with
       --color-background-navbar */
    --csstools-light-dark-toggle--352: var(--csstools-color-scheme--light) color-mix(in srgb, hsl(0deg 0% 100%) 7%, hsl(0deg 0% 13%));
    --color-header-button-focus-no-alpha: var(--csstools-light-dark-toggle--352, color-mix(in srgb, hsl(0deg 0% 0%) 8%, hsl(0deg 0% 97%)));
    --color-fill-hover-copy-icon: hsl(200deg 100% 40%);
    --csstools-light-dark-toggle--353: var(--csstools-color-scheme--light) hsl(236deg 33% 90%);
    --color-fill-user-invite-copy-icon: var(--csstools-light-dark-toggle--353, hsl(0deg 0% 46.7%));
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27%23333333%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath clip-rule=%27evenodd%27 d=%27M3.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%27/%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--354: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-zulip-button: var(--csstools-light-dark-toggle--354, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--355: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 15%);
    --color-background-zulip-button-hover: var(--csstools-light-dark-toggle--355, var(--color-background-zulip-button));
    --csstools-light-dark-toggle--356: var(--csstools-color-scheme--light) var(--color-background-zulip-button-hover);
    --color-background-zulip-button-active: var(--csstools-light-dark-toggle--356, hsl(0deg 0% 95%));
    --csstools-light-dark-toggle--357: var(--csstools-color-scheme--light) var(--color-background-zulip-button);
    --color-background-zulip-button-disabled: var(--csstools-light-dark-toggle--357, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--358: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-zulip-button: var(--csstools-light-dark-toggle--358, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--359: var(--csstools-color-scheme--light) var(--color-border-zulip-button);
    --color-border-zulip-button-interactive: var(--csstools-light-dark-toggle--359, hsl(0deg 0% 60%));

    /* Zulip-style checkbox values. */
    --csstools-light-dark-toggle--360: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 40%);
    --color-border-rendered-checkbox: var(--csstools-light-dark-toggle--360, hsl(0deg 0% 0% / 60%));
    /* The SVG must be adjusted when changing the border color above. */
    --svg-url-rendered-checkbox: url(files/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(files/images/loading/loader-black.svg);

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

    /* Emoji-picker colors */
    --csstools-light-dark-toggle--361: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-emoji-picker-popover: var(--csstools-light-dark-toggle--361, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--362: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-emoji-picker-popover-tab-item-active: var(--csstools-light-dark-toggle--362, hsl(0deg 0% 100% / 20%));
    --csstools-light-dark-toggle--363: var(--csstools-color-scheme--light) hsl(212deg 28% 8% / 75%);
    --color-background-emoji-picker-emoji-focus: var(--csstools-light-dark-toggle--363, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--364: var(--csstools-color-scheme--light) hsl(0deg 0% 98%);
    --color-box-shadow-emoji-picker-emoji-focus: var(--csstools-light-dark-toggle--364, transparent);
    --csstools-light-dark-toggle--365: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 50%);
    --color-background-emoji-picker-emoji-reacted: var(--csstools-light-dark-toggle--365, hsl(195deg 50% 95%));
    --csstools-light-dark-toggle--366: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 90%);
    --color-border-emoji-picker-emoji-reacted: var(--csstools-light-dark-toggle--366, hsl(195deg 52% 79%));
    --csstools-light-dark-toggle--367: var(--csstools-color-scheme--light) hsl(0deg 0% 20% / 70%);
    --color-background-emoji-picker-emoji-reacted-focus: var(--csstools-light-dark-toggle--367, hsl(195deg 55% 88%));
    /* Same color as background color of header / footer */
    --csstools-light-dark-toggle--368: var(--csstools-color-scheme--light) hsl(211.58deg 33.33% 11.18%);
    --color-border-emoji-picker-tippy-arrow: var(--csstools-light-dark-toggle--368, hsl(0deg 0% 93%));

    /* Dropdown / Typeahead constants */
    --csstools-light-dark-toggle--369: var(--csstools-color-scheme--light) hsl(0deg 0% 75%);
    --color-dropdown-item: var(--csstools-light-dark-toggle--369, hsl(0deg 0% 20%));
    --csstools-light-dark-toggle--370: var(--csstools-color-scheme--light) hsl(0deg 0% 75% 60%);
    --color-dropdown-item-link-underline: var(--csstools-light-dark-toggle--370, hsl(0deg 0% 20% 60%));
    --csstools-light-dark-toggle--371: var(--csstools-color-scheme--light) hsl(0deg 0% 90%);
    --color-active-dropdown-item: var(--csstools-light-dark-toggle--371, hsl(0deg 0% 0%));
    --csstools-light-dark-toggle--372: var(--csstools-color-scheme--light) hsl(220deg 12% 100% / 7%);
    --background-color-active-dropdown-item: var(--csstools-light-dark-toggle--372, hsl(220deg 12% 4.9% / 5%));
    --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--373: var(--csstools-color-scheme--light) var(--purple-300);
    --color-current-setting-dropdown-item: var(--csstools-light-dark-toggle--373, var(--purple-700));
    --csstools-light-dark-toggle--374: var(--csstools-color-scheme--light) hsl(220deg 12% 100% / 7%);
    --background-color-active-typeahead-item: var(--csstools-light-dark-toggle--374, hsl(220deg 12% 4.9% / 5%));
    --csstools-light-dark-toggle--375: var(--csstools-color-scheme--light) var(--grey-400);
    --color-typeahead-option-label: var(--csstools-light-dark-toggle--375, var(--grey-500));

    /* Shared button CSS variables */
    --csstools-light-dark-toggle--376: var(--csstools-color-scheme--light) hsl(0deg 0% 100%);
    --color-outline-button-focus: var(--csstools-light-dark-toggle--376, hsl(0deg 0% 0%));
    --outline-width-button-focus: 1.5px;
    --outline-offset-button-focus: 0;
    /* Actions buttons */
    --csstools-light-dark-toggle--377: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 21%, transparent);
    --color-inner-shadow-action-button: var(--csstools-light-dark-toggle--377, color-mix(in oklch, hsl(0deg 0% 0%) 20%, transparent));
    /* Action buttons -- Neutral Variant */
    --csstools-light-dark-toggle--378: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent);
    --color-text-neutral-solid-action-button: var(--csstools-light-dark-toggle--378, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--379: var(--csstools-color-scheme--light) hsl(229deg 9% 36%);
    --color-background-neutral-solid-action-button: var(--csstools-light-dark-toggle--379, hsl(229deg 7% 50%));
    --csstools-light-dark-toggle--380: var(--csstools-color-scheme--light) hsl(229deg 8% 42%);
    --color-background-neutral-solid-action-button-hover: var(--csstools-light-dark-toggle--380, hsl(229deg 7% 47%));
    --csstools-light-dark-toggle--381: var(--csstools-color-scheme--light) hsl(229deg 9% 36%);
    --color-background-neutral-solid-action-button-active: var(--csstools-light-dark-toggle--381, hsl(232deg 7% 44%));
    --csstools-light-dark-toggle--382: var(--csstools-color-scheme--light) hsl(231deg 11% 76%);
    --color-text-neutral-subtle-action-button: var(--csstools-light-dark-toggle--382, hsl(229deg 12% 25%));
    --csstools-light-dark-toggle--383: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(231deg 11% 76%) 12%, transparent);
    --color-background-neutral-subtle-action-button: var(--csstools-light-dark-toggle--383, color-mix(in oklch, hsl(230deg 7% 50%) 12%, transparent));
    --csstools-light-dark-toggle--384: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(231deg 11% 76%) 17%, transparent);
    --color-background-neutral-subtle-action-button-hover: var(--csstools-light-dark-toggle--384, color-mix(in oklch, hsl(230deg 7% 50%) 17%, transparent));
    --csstools-light-dark-toggle--385: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(231deg 11% 76%) 12%, transparent);
    --color-background-neutral-subtle-action-button-active: var(--csstools-light-dark-toggle--385, color-mix(in oklch, hsl(230deg 7% 50%) 22%, transparent));
    --csstools-light-dark-toggle--386: var(--csstools-color-scheme--light) hsl(229deg 10% 70%);
    --color-text-neutral-text-action-button: var(--csstools-light-dark-toggle--386, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--387: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(230deg 9% 60%) 14%, transparent);
    --color-background-neutral-text-action-button-hover: var(--csstools-light-dark-toggle--387, color-mix(in oklch, hsl(229deg 9% 36%) 7%, transparent));
    --csstools-light-dark-toggle--388: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(230deg 9% 60%) 18%, transparent);
    --color-background-neutral-text-action-button-active: var(--csstools-light-dark-toggle--388, color-mix(in oklch, hsl(229deg 9% 36%) 11%, transparent));
    /* Action buttons -- Brand Variant */
    --csstools-light-dark-toggle--389: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent);
    --color-text-brand-solid-action-button: var(--csstools-light-dark-toggle--389, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--390: var(--csstools-color-scheme--light) hsl(261deg 79% 43%);
    --color-background-brand-solid-action-button: var(--csstools-light-dark-toggle--390, hsl(254deg 99% 68%));
    --csstools-light-dark-toggle--391: var(--csstools-color-scheme--light) hsl(258deg 66% 51%);
    --color-background-brand-solid-action-button-hover: var(--csstools-light-dark-toggle--391, hsl(255deg 81% 61%));
    --csstools-light-dark-toggle--392: var(--csstools-color-scheme--light) hsl(261deg 79% 43%);
    --color-background-brand-solid-action-button-active: var(--csstools-light-dark-toggle--392, hsl(258deg 66% 51%));
    --csstools-light-dark-toggle--393: var(--csstools-color-scheme--light) hsl(244deg 96% 82%);
    --color-text-brand-subtle-action-button: var(--csstools-light-dark-toggle--393, hsl(264deg 95% 34%));
    --csstools-light-dark-toggle--394: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(246deg 96% 79%) 12%, transparent);
    --color-background-brand-subtle-action-button: var(--csstools-light-dark-toggle--394, color-mix(in oklch, hsl(254deg 99% 68%) 12%, transparent));
    --csstools-light-dark-toggle--395: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(246deg 96% 79%) 17%, transparent);
    --color-background-brand-subtle-action-button-hover: var(--csstools-light-dark-toggle--395, color-mix(in oklch, hsl(254deg 99% 68%) 17%, transparent));
    --csstools-light-dark-toggle--396: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(246deg 96% 79%) 12%, transparent);
    --color-background-brand-subtle-action-button-active: var(--csstools-light-dark-toggle--396, color-mix(in oklch, hsl(254deg 99% 68%) 22%, transparent));
    --csstools-light-dark-toggle--397: var(--csstools-color-scheme--light) hsl(246deg 96% 79%);
    --color-text-brand-text-action-button: var(--csstools-light-dark-toggle--397, hsl(255deg 54% 50%));
    --csstools-light-dark-toggle--398: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(251deg 100% 72%) 14%, transparent);
    --color-background-brand-text-action-button-hover: var(--csstools-light-dark-toggle--398, color-mix(in oklch, hsl(264deg 100% 22%) 5%, transparent));
    --csstools-light-dark-toggle--399: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(251deg 100% 72%) 18%, transparent);
    --color-background-brand-text-action-button-active: var(--csstools-light-dark-toggle--399, color-mix(in oklch, hsl(264deg 100% 22%) 10%, transparent));
    /* Action buttons -- Info Variant */
    --csstools-light-dark-toggle--400: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent);
    --color-text-info-solid-action-button: var(--csstools-light-dark-toggle--400, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--401: var(--csstools-color-scheme--light) hsl(228deg 75% 47%);
    --color-background-info-solid-action-button: var(--csstools-light-dark-toggle--401, hsl(226deg 100% 62%));
    --color-background-info-solid-action-button-hover: hsl(226deg 83% 55%);
    --color-background-info-solid-action-button-active: hsl(228deg 75% 47%);
    --csstools-light-dark-toggle--402: var(--csstools-color-scheme--light) hsl(222deg 98% 79%);
    --color-text-info-subtle-action-button: var(--csstools-light-dark-toggle--402, hsl(231deg 82% 36%));
    --csstools-light-dark-toggle--403: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(222deg 98% 79%) 12%, transparent);
    --color-background-info-subtle-action-button: var(--csstools-light-dark-toggle--403, color-mix(in oklch, hsl(226deg 100% 62%) 12%, transparent));
    --csstools-light-dark-toggle--404: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(222deg 98% 79%) 17%, transparent);
    --color-background-info-subtle-action-button-hover: var(--csstools-light-dark-toggle--404, color-mix(in oklch, hsl(226deg 100% 62%) 17%, transparent));
    --csstools-light-dark-toggle--405: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(222deg 98% 79%) 12%, transparent);
    --color-background-info-subtle-action-button-active: var(--csstools-light-dark-toggle--405, color-mix(in oklch, hsl(226deg 100% 62%) 22%, transparent));
    --csstools-light-dark-toggle--406: var(--csstools-color-scheme--light) hsl(222deg 97% 75%);
    --color-text-info-text-action-button: var(--csstools-light-dark-toggle--406, hsl(227deg 70% 46%));
    --csstools-light-dark-toggle--407: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(224deg 98% 65%) 12%, transparent);
    --color-background-info-text-action-button-hover: var(--csstools-light-dark-toggle--407, color-mix(in oklch, hsl(241deg 95% 25%) 5%, transparent));
    --csstools-light-dark-toggle--408: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(224deg 98% 65%) 17%, transparent);
    --color-background-info-text-action-button-active: var(--csstools-light-dark-toggle--408, color-mix(in oklch, hsl(241deg 95% 25%) 9%, transparent));
    /* Action buttons -- Success Variant */
    --csstools-light-dark-toggle--409: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent);
    --color-text-success-solid-action-button: var(--csstools-light-dark-toggle--409, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--410: var(--csstools-color-scheme--light) hsl(144deg 84% 22%);
    --color-background-success-solid-action-button: var(--csstools-light-dark-toggle--410, hsl(146deg 90% 27%));
    --color-background-success-solid-action-button-hover: hsl(145deg 87% 25%);
    --color-background-success-solid-action-button-active: hsl(144deg 84% 22%);
    --csstools-light-dark-toggle--411: var(--csstools-color-scheme--light) hsl(135deg 56% 63%);
    --color-text-success-subtle-action-button: var(--csstools-light-dark-toggle--411, hsl(144deg 88% 16%));
    --csstools-light-dark-toggle--412: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(138deg 46% 47%) 12%, transparent);
    --color-background-success-subtle-action-button: var(--csstools-light-dark-toggle--412, color-mix(in oklch, hsl(146deg 90% 27%) 13%, transparent));
    --csstools-light-dark-toggle--413: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(138deg 46% 47%) 17%, transparent);
    --color-background-success-subtle-action-button-hover: var(--csstools-light-dark-toggle--413, color-mix(in oklch, hsl(146deg 90% 27%) 18%, transparent));
    --csstools-light-dark-toggle--414: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(138deg 46% 47%) 12%, transparent);
    --color-background-success-subtle-action-button-active: var(--csstools-light-dark-toggle--414, color-mix(in oklch, hsl(146deg 90% 27%) 23%, transparent));
    --csstools-light-dark-toggle--415: var(--csstools-color-scheme--light) hsl(136deg 47% 55%);
    --color-text-success-text-action-button: var(--csstools-light-dark-toggle--415, hsl(146deg 90% 27%));
    --csstools-light-dark-toggle--416: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(139deg 54% 40%) 12%, transparent);
    --color-background-success-text-action-button-hover: var(--csstools-light-dark-toggle--416, color-mix(in oklch, hsl(144deg 84% 22%) 8%, transparent));
    --csstools-light-dark-toggle--417: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(139deg 54% 40%) 17%, transparent);
    --color-background-success-text-action-button-active: var(--csstools-light-dark-toggle--417, color-mix(in oklch, hsl(144deg 84% 22%) 12%, transparent));
    /* Action buttons -- Warning Variant */
    --csstools-light-dark-toggle--418: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 0%) 90%, transparent);
    --color-text-warning-solid-action-button: var(--csstools-light-dark-toggle--418, color-mix(in oklch, hsl(0deg 0% 0%) 88%, transparent));
    --csstools-light-dark-toggle--419: var(--csstools-color-scheme--light) hsl(39deg 89% 45%);
    --color-background-warning-solid-action-button: var(--csstools-light-dark-toggle--419, hsl(40deg 99% 62%));
    --csstools-light-dark-toggle--420: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-background-warning-solid-action-button-hover: var(--csstools-light-dark-toggle--420, hsl(40deg 94% 56%));
    --csstools-light-dark-toggle--421: var(--csstools-color-scheme--light) hsl(39deg 89% 45%);
    --color-background-warning-solid-action-button-active: var(--csstools-light-dark-toggle--421, hsl(41deg 98% 46%));
    --csstools-light-dark-toggle--422: var(--csstools-color-scheme--light) hsl(40deg 94% 56%);
    --color-text-warning-subtle-action-button: var(--csstools-light-dark-toggle--422, hsl(34deg 89% 25%));
    --csstools-light-dark-toggle--423: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(39deg 89% 45%) 12%, transparent);
    --color-background-warning-subtle-action-button: var(--csstools-light-dark-toggle--423, color-mix(in oklch, hsl(41deg 98% 46%) 18%, transparent));
    --csstools-light-dark-toggle--424: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(39deg 89% 45%) 17%, transparent);
    --color-background-warning-subtle-action-button-hover: var(--csstools-light-dark-toggle--424, color-mix(in oklch, hsl(41deg 98% 46%) 23%, transparent));
    --csstools-light-dark-toggle--425: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(39deg 89% 45%) 12%, transparent);
    --color-background-warning-subtle-action-button-active: var(--csstools-light-dark-toggle--425, color-mix(in oklch, hsl(41deg 98% 46%) 28%, transparent));
    --csstools-light-dark-toggle--426: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-text-warning-text-action-button: var(--csstools-light-dark-toggle--426, hsl(37deg 94% 34%));
    --csstools-light-dark-toggle--427: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(39deg 88% 42%) 12%, transparent);
    --color-background-warning-text-action-button-hover: var(--csstools-light-dark-toggle--427, color-mix(in oklch, hsl(37deg 94% 34%) 10%, transparent));
    --csstools-light-dark-toggle--428: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(39deg 88% 42%) 17%, transparent);
    --color-background-warning-text-action-button-active: var(--csstools-light-dark-toggle--428, color-mix(in oklch, hsl(37deg 94% 34%) 14%, transparent));
    /* Action buttons -- Danger Variant */
    --csstools-light-dark-toggle--429: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent);
    --color-text-danger-solid-action-button: var(--csstools-light-dark-toggle--429, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--430: var(--csstools-color-scheme--light) hsl(2deg 74% 47%);
    --color-background-danger-solid-action-button: var(--csstools-light-dark-toggle--430, hsl(4deg 75% 53%));
    --csstools-light-dark-toggle--431: var(--csstools-color-scheme--light) hsl(4deg 75% 53%);
    --color-background-danger-solid-action-button-hover: var(--csstools-light-dark-toggle--431, hsl(2deg 74% 47%));
    --csstools-light-dark-toggle--432: var(--csstools-color-scheme--light) hsl(2deg 74% 47%);
    --color-background-danger-solid-action-button-active: var(--csstools-light-dark-toggle--432, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--433: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-subtle-action-button: var(--csstools-light-dark-toggle--433, hsl(359deg 94% 35%));
    --csstools-light-dark-toggle--434: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(5deg 98% 65%) 12%, transparent);
    --color-background-danger-subtle-action-button: var(--csstools-light-dark-toggle--434, color-mix(in oklch, hsl(4deg 75% 53%) 13%, transparent));
    --csstools-light-dark-toggle--435: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(5deg 98% 65%) 17%, transparent);
    --color-background-danger-subtle-action-button-hover: var(--csstools-light-dark-toggle--435, color-mix(in oklch, hsl(4deg 75% 53%) 18%, transparent));
    --csstools-light-dark-toggle--436: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(5deg 98% 65%) 12%, transparent);
    --color-background-danger-subtle-action-button-active: var(--csstools-light-dark-toggle--436, color-mix(in oklch, hsl(4deg 75% 53%) 23%, transparent));
    --csstools-light-dark-toggle--437: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-text-action-button: var(--csstools-light-dark-toggle--437, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--438: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(5deg 88% 60%) 12%, transparent);
    --color-background-danger-text-action-button-hover: var(--csstools-light-dark-toggle--438, color-mix(in oklch, hsl(359deg 93% 39%) 9%, transparent));
    --csstools-light-dark-toggle--439: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(5deg 88% 60%) 17%, transparent);
    --color-background-danger-text-action-button-active: var(--csstools-light-dark-toggle--439, color-mix(in oklch, hsl(359deg 93% 39%) 13%, transparent));

    /* Icon buttons */
    /* Icon buttons -- Neutral Variant */
    --csstools-light-dark-toggle--440: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent);
    --color-text-neutral-icon-button: var(--csstools-light-dark-toggle--440, color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent));
    --csstools-light-dark-toggle--441: var(--csstools-color-scheme--light) hsl(229deg 10% 70%);
    --color-text-neutral-icon-button-hover: var(--csstools-light-dark-toggle--441, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--442: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent);
    --color-text-neutral-icon-button-active: var(--csstools-light-dark-toggle--442, color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent));
    --csstools-light-dark-toggle--443: var(--csstools-color-scheme--light) hsl(229deg 10% 70%);
    --color-text-neutral-icon-button-square-active: var(--csstools-light-dark-toggle--443, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--444: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(230deg 9% 60%) 14%, transparent);
    --color-background-neutral-icon-button-square-hover: var(--csstools-light-dark-toggle--444, color-mix(in oklch, hsl(229deg 9% 36%) 7%, transparent));
    --csstools-light-dark-toggle--445: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(230deg 9% 60%) 18%, transparent);
    --color-background-neutral-icon-button-square-active: var(--csstools-light-dark-toggle--445, color-mix(in oklch, hsl(229deg 9% 36%) 11%, transparent));
    /* Icon buttons -- Brand Variant */
    --csstools-light-dark-toggle--446: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(246deg 96 79%) 70%, transparent);
    --color-text-brand-icon-button: var(--csstools-light-dark-toggle--446, color-mix(in oklch, hsl(255deg 54% 50%) 70%, transparent));
    --csstools-light-dark-toggle--447: var(--csstools-color-scheme--light) hsl(246deg 96% 79%);
    --color-text-brand-icon-button-hover: var(--csstools-light-dark-toggle--447, hsl(255deg 54% 50%));
    --csstools-light-dark-toggle--448: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(246deg 96% 79%) 70%, transparent);
    --color-text-brand-icon-button-active: var(--csstools-light-dark-toggle--448, color-mix(in oklch, hsl(255deg 54% 50%) 70%, transparent));
    --csstools-light-dark-toggle--449: var(--csstools-color-scheme--light) hsl(246deg 96% 79%);
    --color-text-brand-icon-button-square-active: var(--csstools-light-dark-toggle--449, hsl(255deg 54% 50%));
    --csstools-light-dark-toggle--450: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(251deg 100% 72%) 14%, transparent);
    --color-background-brand-icon-button-square-hover: var(--csstools-light-dark-toggle--450, color-mix(in oklch, hsl(264deg 100% 22%) 5%, transparent));
    --csstools-light-dark-toggle--451: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(251deg 100% 72%) 18%, transparent);
    --color-background-brand-icon-button-square-active: var(--csstools-light-dark-toggle--451, color-mix(in oklch, hsl(264deg 100% 22%) 10%, transparent));
    /* Icon buttons -- Info Variant */
    --csstools-light-dark-toggle--452: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(222deg 97% 75%) 70%, transparent);
    --color-text-info-icon-button: var(--csstools-light-dark-toggle--452, color-mix(in oklch, hsl(227deg 70% 46%) 70%, transparent));
    --csstools-light-dark-toggle--453: var(--csstools-color-scheme--light) hsl(222deg 97% 75%);
    --color-text-info-icon-button-hover: var(--csstools-light-dark-toggle--453, hsl(227deg 70% 46%));
    --csstools-light-dark-toggle--454: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(222deg 97% 75%) 70%, transparent);
    --color-text-info-icon-button-active: var(--csstools-light-dark-toggle--454, color-mix(in oklch, hsl(227deg 70% 46%) 70%, transparent));
    --csstools-light-dark-toggle--455: var(--csstools-color-scheme--light) hsl(222deg 97% 75%);
    --color-text-info-icon-button-square-active: var(--csstools-light-dark-toggle--455, hsl(227deg 70% 46%));
    --csstools-light-dark-toggle--456: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(224deg 98% 65%) 12%, transparent);
    --color-background-info-icon-button-square-hover: var(--csstools-light-dark-toggle--456, color-mix(in oklch, hsl(241deg 95% 25%) 5%, transparent));
    --csstools-light-dark-toggle--457: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(224deg 98% 65%) 17%, transparent);
    --color-background-info-icon-button-square-active: var(--csstools-light-dark-toggle--457, color-mix(in oklch, hsl(241deg 95% 25%) 9%, transparent));
    /* Icon buttons -- Success Variant */
    --csstools-light-dark-toggle--458: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(136deg 47% 55%) 70%, transparent);
    --color-text-success-icon-button: var(--csstools-light-dark-toggle--458, color-mix(in oklch, hsl(146deg 90% 27%) 70%, transparent));
    --csstools-light-dark-toggle--459: var(--csstools-color-scheme--light) hsl(136deg 47% 55%);
    --color-text-success-icon-button-hover: var(--csstools-light-dark-toggle--459, hsl(146deg 90% 27%));
    --csstools-light-dark-toggle--460: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(136deg 47% 55%) 70%, transparent);
    --color-text-success-icon-button-active: var(--csstools-light-dark-toggle--460, color-mix(in oklch, hsl(146deg 90% 27%) 70%, transparent));
    --csstools-light-dark-toggle--461: var(--csstools-color-scheme--light) hsl(136deg 47% 55%);
    --color-text-success-icon-button-square-active: var(--csstools-light-dark-toggle--461, hsl(146deg 90% 27%));
    --csstools-light-dark-toggle--462: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(139deg 54% 40%) 12%, transparent);
    --color-background-success-icon-button-square-hover: var(--csstools-light-dark-toggle--462, color-mix(in oklch, hsl(144deg 84% 22%) 8%, transparent));
    --csstools-light-dark-toggle--463: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(139deg 54% 40%) 17%, transparent);
    --color-background-success-icon-button-square-active: var(--csstools-light-dark-toggle--463, color-mix(in oklch, hsl(144deg 84% 22%) 12%, transparent));
    /* Icon buttons -- Warning Variant */
    --csstools-light-dark-toggle--464: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(41deg 98% 46%) 70%, transparent);
    --color-text-warning-icon-button: var(--csstools-light-dark-toggle--464, color-mix(in oklch, hsl(37deg 94% 34%) 70%, transparent));
    --csstools-light-dark-toggle--465: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-text-warning-icon-button-hover: var(--csstools-light-dark-toggle--465, hsl(37deg 94% 34%));
    --csstools-light-dark-toggle--466: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(41deg 98% 46%) 70%, transparent);
    --color-text-warning-icon-button-active: var(--csstools-light-dark-toggle--466, color-mix(in oklch, hsl(37deg 94% 34%) 70%, transparent));
    --csstools-light-dark-toggle--467: var(--csstools-color-scheme--light) hsl(41deg 98% 46%);
    --color-text-warning-icon-button-square-active: var(--csstools-light-dark-toggle--467, hsl(37deg 94% 34%));
    --csstools-light-dark-toggle--468: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(39deg 88% 42%) 12%, transparent);
    --color-background-warning-icon-button-square-hover: var(--csstools-light-dark-toggle--468, color-mix(in oklch, hsl(37deg 94% 34%) 10%, transparent));
    --csstools-light-dark-toggle--469: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(39deg 88% 42%) 17%, transparent);
    --color-background-warning-icon-button-square-active: var(--csstools-light-dark-toggle--469, color-mix(in oklch, hsl(37deg 94% 34%) 14%, transparent));
    /* Icon buttons -- Danger Variant */
    --csstools-light-dark-toggle--470: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(7deg 100% 74%) 70%, transparent);
    --color-text-danger-icon-button: var(--csstools-light-dark-toggle--470, color-mix(in oklch, hsl(359deg 93% 39%) 70%, transparent));
    --csstools-light-dark-toggle--471: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-icon-button-hover: var(--csstools-light-dark-toggle--471, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--472: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(7deg 100% 74%) 70%, transparent);
    --color-text-danger-icon-button-active: var(--csstools-light-dark-toggle--472, color-mix(in oklch, hsl(359deg 93% 39%) 70%, transparent));
    --csstools-light-dark-toggle--473: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-icon-button-square-active: var(--csstools-light-dark-toggle--473, hsl(359deg 93% 39%));
    --csstools-light-dark-toggle--474: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(5deg 88% 60%) 12%, transparent);
    --color-background-danger-icon-button-square-hover: var(--csstools-light-dark-toggle--474, color-mix(in oklch, hsl(359deg 93% 39%) 9%, transparent));
    --csstools-light-dark-toggle--475: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(5deg 88% 60%) 17%, transparent);
    --color-background-danger-icon-button-square-active: var(--csstools-light-dark-toggle--475, color-mix(in oklch, hsl(359deg 93% 39%) 13%, transparent));

    /* 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(210deg 94% 42%);
    /* Banners - Neutral Variant */
    --csstools-light-dark-toggle--476: var(--csstools-color-scheme--light) hsl(231deg 11% 76%);
    --color-text-neutral-banner: var(--csstools-light-dark-toggle--476, hsl(229deg 12% 25%));
    --csstools-light-dark-toggle--477: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(240deg 7% 66%) 40%, transparent);
    --color-border-neutral-banner: var(--csstools-light-dark-toggle--477, color-mix(in oklch, hsl(240deg 2% 30%) 40%, transparent));
    --csstools-light-dark-toggle--478: var(--csstools-color-scheme--light) hsl(240deg 7% 17%);
    --color-background-neutral-banner: var(--csstools-light-dark-toggle--478, hsl(240deg 7% 93%));
    /* Banners - Brand Variant */
    --csstools-light-dark-toggle--479: var(--csstools-color-scheme--light) hsl(244deg 96% 82%);
    --color-text-brand-banner: var(--csstools-light-dark-toggle--479, hsl(264deg 95% 34%));
    --csstools-light-dark-toggle--480: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(253deg 70% 89%) 40%, transparent);
    --color-border-brand-banner: var(--csstools-light-dark-toggle--480, color-mix(in oklch, hsl(254deg 60% 50%) 40%, transparent));
    --csstools-light-dark-toggle--481: var(--csstools-color-scheme--light) hsl(254deg 49% 16%);
    --color-background-brand-banner: var(--csstools-light-dark-toggle--481, hsl(254deg 42% 94%));
    /* Banners - Info Variant */
    --csstools-light-dark-toggle--482: var(--csstools-color-scheme--light) hsl(221deg 93% 89%);
    --color-text-info-banner: var(--csstools-light-dark-toggle--482, hsl(241deg 95% 25%));
    --csstools-light-dark-toggle--483: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(205deg 58% 69%) 40%, transparent);
    --color-border-info-banner: var(--csstools-light-dark-toggle--483, color-mix(in oklch, hsl(204deg 49% 29%) 40%, transparent));
    --csstools-light-dark-toggle--484: var(--csstools-color-scheme--light) hsl(204deg 100% 12%);
    --color-background-info-banner: var(--csstools-light-dark-toggle--484, hsl(204deg 58% 92%));
    /* Banners - Success Variant */
    --csstools-light-dark-toggle--485: var(--csstools-color-scheme--light) hsl(135deg 56% 63%);
    --color-text-success-banner: var(--csstools-light-dark-toggle--485, hsl(144deg 88% 16%));
    --csstools-light-dark-toggle--486: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(149deg 48% 52%) 40%, transparent);
    --color-border-success-banner: var(--csstools-light-dark-toggle--486, color-mix(in oklch, hsl(147deg 57% 25%) 40%, transparent));
    --csstools-light-dark-toggle--487: var(--csstools-color-scheme--light) hsl(146deg 90% 7%);
    --color-background-success-banner: var(--csstools-light-dark-toggle--487, hsl(147deg 43% 92%));
    /* Banners - Warning Variant */
    --csstools-light-dark-toggle--488: var(--csstools-color-scheme--light) hsl(40deg 94% 56%);
    --color-text-warning-banner: var(--csstools-light-dark-toggle--488, hsl(34deg 89% 25%));
    --csstools-light-dark-toggle--489: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(44deg 44% 66%) 40%, transparent);
    --color-border-warning-banner: var(--csstools-light-dark-toggle--489, color-mix(in oklch, hsl(38deg 44% 27%) 40%, transparent));
    --csstools-light-dark-toggle--490: var(--csstools-color-scheme--light) hsl(50deg 100% 10%);
    --color-background-warning-banner: var(--csstools-light-dark-toggle--490, hsl(50deg 75% 92%));
    /* Banners - Danger Variant */
    --csstools-light-dark-toggle--491: var(--csstools-color-scheme--light) hsl(7deg 100% 74%);
    --color-text-danger-banner: var(--csstools-light-dark-toggle--491, hsl(359deg 94% 35%));
    --csstools-light-dark-toggle--492: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(3deg 73% 74%) 40%, transparent);
    --color-border-danger-banner: var(--csstools-light-dark-toggle--492, color-mix(in oklch, hsl(3deg 57% 33%) 40%, transparent));
    --csstools-light-dark-toggle--493: var(--csstools-color-scheme--light) hsl(0deg 52% 18%);
    --color-background-danger-banner: var(--csstools-light-dark-toggle--493, hsl(0deg 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--494: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-legacy-input: var(--csstools-light-dark-toggle--494, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--495: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    --color-border-legacy-input: var(--csstools-light-dark-toggle--495, hsl(0deg 0% 80%));
    --csstools-light-dark-toggle--496: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 90%);
    --color-border-legacy-input-focus: var(--csstools-light-dark-toggle--496, hsl(206deg 80% 62% / 80%));
    --csstools-light-dark-toggle--497: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-disabled-settings-select: var(--csstools-light-dark-toggle--497, hsl(0deg 0% 93%));
    --csstools-light-dark-toggle--498: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    --color-background-disabled-modal-select: var(--csstools-light-dark-toggle--498, hsl(0deg 0% 90%));
    --csstools-light-dark-toggle--499: var(--csstools-color-scheme--light) hsl(0deg 0% 95%);
    --color-text-input: var(--csstools-light-dark-toggle--499, hsl(0deg 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--500: var(--csstools-color-scheme--light) hsl(225deg 6% 10%);
    --color-background-input: var(--csstools-light-dark-toggle--500, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--501: var(--csstools-color-scheme--light) hsl(225deg 6% 7%);
    --color-background-input-focus: var(--csstools-light-dark-toggle--501, hsl(0deg 0% 100%));
    --csstools-light-dark-toggle--502: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 20%, transparent);
    --color-outline-input: var(--csstools-light-dark-toggle--502, color-mix(in oklch, hsl(229deg 22% 10%) 30%, transparent));
    --csstools-light-dark-toggle--503: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 40%, transparent);
    --color-outline-input-hover: var(--csstools-light-dark-toggle--503, color-mix(in oklch, hsl(229deg 22% 10%) 60%, transparent));
    --csstools-light-dark-toggle--504: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 50%, transparent);
    --color-outline-input-focus: var(--csstools-light-dark-toggle--504, color-mix(in oklch, hsl(229deg 22% 10%) 80%, transparent));
    --csstools-light-dark-toggle--505: var(--csstools-color-scheme--light) color-mix(in oklch, hsl(0deg 0% 100%) 40%, transparent);
    --color-box-shadow-input-focus: var(--csstools-light-dark-toggle--505, color-mix(in oklch, hsl(228deg 10% 20%) 30%, transparent));

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

    /* Info density update UI */
    --csstools-light-dark-toggle--547: var(--csstools-color-scheme--light) hsl(0deg 0% 90% / 20%);
    --color-info-density-control-border: var(--csstools-light-dark-toggle--547, hsl(0deg 0% 0% / 20%));
    --csstools-light-dark-toggle--548: var(--csstools-color-scheme--light) hsl(0deg 0% 100% / 80%);
    --color-info-density-button-icon: var(--csstools-light-dark-toggle--548, hsl(229deg 9% 36%));
    --csstools-light-dark-toggle--549: var(--csstools-color-scheme--light) hsl(229deg 10% 50% / 30%);
    --color-info-density-button-hover-background: var(--csstools-light-dark-toggle--549, hsl(229deg 9% 36% / 7%));
}

@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: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-date: light-dark(hsl(0deg 0% 15% / 75%), hsl(0deg 0% 100% / 75%));
    --color-background-private-message-header: light-dark(
        hsl(46deg 35% 93%),
        hsl(46deg 15% 20%)
    );
    --color-background-private-message-content: light-dark(
        hsl(45deg 20% 96%),
        hsl(46deg 7% 16%)
    );
    --color-background-stream-message-content: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 13.5%)
    );
    --color-selected-message-outline: light-dark(
        hsl(217deg 64% 59% / 60%),
        hsl(217deg 64% 59% / 70%)
    );
    --color-selected-gif-in-grid-picker: light-dark(
        hsl(217deg 75% 59%),
        hsl(217deg 95% 59%)
    );
    --color-hovered-gif-in-grid-picker: light-dark(
        hsl(217deg 75% 59% / 50%),
        hsl(217deg 95% 59% / 60%)
    );
    --color-message-list-border: light-dark(
        hsl(0deg 0% 0% / 16%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-message-header-contents-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-private-message-header-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 48%)
    );
    --color-message-header-contents-border-bottom: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-private-message-header-border-bottom: light-dark(
        hsl(0deg 0% 0% / 7%),
        hsl(0deg 0% 0% / 37%)
    );
    --color-message-header-icon-non-interactive: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 30%)
    );
    --color-message-header-icon-interactive: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-background: light-dark(hsl(0deg 0% 94%), hsl(0deg 0% 11%));
    --color-background-widget-input: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 10%)
    );
    --color-background-widget-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-navbar: light-dark(hsl(0deg 0% 97%), hsl(0deg 0% 13%));
    --color-text-sidebar-row: light-dark(
        hsl(0deg 0% 20%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-text-active-narrow-filter: light-dark(
        hsl(0deg 0% 15%),
        hsl(0deg 0% 90%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-active-narrow-filter: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in srgb, hsl(0deg 0% 100%) 8%, hsl(0deg 0% 11%))
    );
    --color-background-hover-narrow-filter: light-dark(
        hsl(0deg 0% 97%),
        color-mix(in srgb, hsl(0deg 0% 97%) 8%, hsl(0deg 0% 11%))
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-shadow-sidebar-row-hover: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 30%)
    );
    --color-sidebar-action: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-sidebar-action-hover: light-dark(
        hsl(240deg 100% 15%),
        hsl(240deg 100% 90%)
    );
    --color-background-sidebar-action-hover: light-dark(
        hsl(240deg 100% 93%),
        hsl(240deg 25% 35%)
    );
    --color-background-navigation-item-hover: light-dark(
        hsl(240deg 100% 50% / 7%),
        hsl(240deg 100% 75% / 20%)
    );
    --color-navbar-bottom-border: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-left-sidebar-direct-messages-bottom-divider: light-dark(
        hsl(0deg 0% 0% / 15%),
        hsl(0deg 0% 100% / 15%)
    );
    --color-left-sidebar-inner-box-shadow: light-dark(
        hsl(0deg 0% 0% / 20%),
        hsl(0deg 0% 0% / 80%)
    );
    --color-left-sidebar-outer-box-shadow: light-dark(
        hsl(0deg 0% 94% / 20%),
        hsl(0deg 0% 11% / 30%)
    );
    --color-left-sidebar-middle-box-shadow-hover: light-dark(
        hsl(244deg 36% 91%),
        hsl(240deg 19% 24%)
    );
    --color-left-sidebar-outer-box-shadow-hover: light-dark(
        hsl(240deg 100% 50% / 7%),
        hsl(240deg 100% 75% / 20%)
    );
    --color-masked-unread-marker: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 30%)
    );
    --color-active-row-modal: light-dark(
        hsl(0deg 0% 98%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-overlay: light-dark(
        hsl(0deg 0% 13% / 80%),
        hsl(212deg 28% 8% / 75%)
    );
    --color-background-non-empty-overlay-indicator: light-dark(
        hsl(0deg 0% 100% / 90%),
        hsl(212deg 28% 8% / 75%)
    );
    --color-modal-selectable-icon: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-modal-selectable-icon-hover: light-dark(
        hsl(240deg 100% 15%),
        hsl(240deg 100% 90%)
    );
    --background-color-modal-selectable-icon-hover: light-dark(
        hsl(240deg 100% 50% / 7%),
        hsl(240deg 100% 75% / 20%)
    );
    --background-color-readonly-modal-input: light-dark(
        hsl(240deg 7% 93%),
        hsl(240deg 7% 17%)
    );
    --background-color-textarea: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --background-color-disabled-textarea: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --background-color-view-only-textarea: light-dark(
        hsl(0deg 0% 100% / 60%),
        hsl(0deg 0% 0% / 30%)
    );
    --border-color-textarea: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --focus-border-color-textarea: light-dark(
        hsl(206.5deg 80% 62% / 80%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-background-pill-container-without-placeholder: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-unmuted-or-followed-topic-list-item: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-topic-indent-border: light-dark(
        hsl(0deg 0% 0% / 19%),
        hsl(0deg 0% 100% / 19%)
    );
    --color-background-search: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 17%));
    --color-background-search-collapsed: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 20%)
    );
    --color-background-search-option-hover: light-dark(
        hsl(0deg 0% 94%),
        hsl(0deg 0% 20%)
    );
    --color-search-box-hover-shadow: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 30%)
    );
    --color-search-dropdown-top-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 35%)
    );
    --color-search-icons: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 78%));
    --color-background-image-loader: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 10%)
    );
    --color-background-popover-menu: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 17%)
    );
    --color-border-popover-menu-separator: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-hotkey-hint: light-dark(hsl(227deg 78% 59%), hsl(225deg 100% 84%));
    --color-popover-hotkey-hint: light-dark(hsl(0deg 0% 40%), hsl(0deg 0% 65%));
    --color-border-popover-hotkey-hint: light-dark(
        hsl(0deg 0% 40% / 50%),
        hsl(0deg 0% 65% / 50%)
    );
    --color-background-hover-popover-menu: light-dark(
        hsl(220deg 12% 5% / 5%),
        hsl(220deg 12% 95% / 5%)
    );
    --color-background-active-popover-menu: light-dark(
        hsl(220deg 12% 5% / 7%),
        hsl(220deg 12% 95% / 7%)
    );
    --color-border-popover-menu: light-dark(
        hsl(0deg 0% 0% / 40%),
        hsl(0deg 0% 0%)
    );
    --color-border-personal-menu-avatar: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 20%)
    );
    --color-background-unread-counter-prominent: light-dark(
        hsl(240deg 10% 50% / 70%),
        hsl(240deg 18.37% 34.42%)
    );
    --color-background-unread-counter-normal: light-dark(
        hsl(240deg 10% 50% / 20%),
        hsl(240deg 10% 50% / 35%)
    );
    --color-unread-counter-normal: light-dark(
        hsl(0deg 0% 0% / 90%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-unread-counter-quiet: light-dark(
        hsl(240deg 15% 50%),
        hsl(240deg 15% 65%)
    );
    --color-border-add-subscription-button-focus: light-dark(
        hsl(0deg 0% 20%),
        hsl(0deg 0% 67%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-unread-counter-no-alpha: light-dark(
        color-mix(in srgb, hsl(240deg 10% 50%) 20%, hsl(0deg 0% 94%)),
        color-mix(in srgb, hsl(240deg 10% 50%) 35%, hsl(0deg 0% 11%))
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-unread-counter-dot: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-border-unread-counter: light-dark(
        var(--color-background-unread-counter),
        hsl(105deg 2% 50%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-border-unread-counter-popover-menu: light-dark(
        inherit,
        var(--color-border-unread-counter)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-tab-picker-container: light-dark(
        hsl(0deg 0% 0% / 7%),
        hsl(0deg 0% 0% / 30%)
    );
    --color-background-tab-picker-selected-tab: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 100% / 7%)
    );
    --color-outline-tab-picker-tab-option: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 12%)
    );
    --color-background-tab-picker-tab-option-hover: light-dark(
        hsl(0deg 0% 100% / 60%),
        hsl(0deg 0% 100% / 5%)
    );
    --color-background-tab-picker-tab-option-active: light-dark(
        hsl(0deg 0% 100% / 35%),
        hsl(0deg 0% 100% / 3%)
    );
    --color-background-popover: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 17%));
    --color-background-alert-word: light-dark(
        hsl(18deg 100% 84%),
        hsl(22deg 70% 35%)
    );
    --color-buddy-list-avatar-loading: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 10%)
    );
    --color-border-sidebar: light-dark(hsl(0deg 0% 87%), hsl(0deg 0% 0% / 20%));
    --color-text-sidebar-base: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-border-sidebar-subheader: light-dark(
        hsl(0deg 0% 0% / 15%),
        hsl(0deg 0% 100% / 15%)
    );
    --color-request-progress-status-alert-text: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-background-tip: light-dark(
        hsl(46deg 63% 95%),
        hsl(46deg 28% 38% / 27%)
    );
    --color-border-tip: light-dark(hsl(49deg 20% 84%), hsl(49deg 38% 46%));
    --color-box-shadow-animated-purple-button-focus: light-dark(
        hsl(235deg 18% 7%),
        hsl(0deg 0% 100% / 66.6%)
    );
    --color-background-animated-button: light-dark(
        hsl(0deg 0% 90%),
        hsl(211deg 29% 14%)
    );
    --color-animated-button-text: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-invalid-input-border: light-dark(
        hsl(3deg 57% 33%),
        hsl(3deg 73% 74%)
    );
    --color-invalid-input-box-shadow: light-dark(
        hsl(3deg 57% 33%),
        hsl(3deg 73% 74%)
    );
    --color-background-white-box: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-stream-group-row-checked-icon-disabled: light-dark(
        hsl(240deg 96% 68% / 100%),
        hsl(240deg 96% 68% / 50%)
    );
    --color-stream-group-row-plus-icon: light-dark(
        hsl(0deg 0% 72%),
        hsl(218deg 14% 33%)
    );
    --color-stream-group-row-plus-icon-hover: light-dark(
        hsl(0deg 0% 27%),
        hsl(230deg 11% 67%)
    );
    --color-stream-group-row-plus-icon-disabled: light-dark(
        hsl(0deg 0% 87% / 100%),
        hsl(218deg 14% 33% / 50%)
    );
    --color-recent-view-link-unread: light-dark(
        hsl(0deg 0% 5%),
        hsl(0deg 0% 100% / 83%)
    );
    --color-recent-view-link: light-dark(
        hsl(0deg 0% 20%),
        hsl(0deg 0% 100% / 75%)
    );
    --color-background-recent-filters-button-focus: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-background-recent-filters-button-disabled: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-recent-filters-button-disabled: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0%)
    );
    --color-recent-view-participant-overflow-text: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-background-recent-view-participant-overflow: light-dark(
        hsl(0deg 0% 88%),
        hsl(211deg 18% 25%)
    );
    --color-background-recent-view-table-thead-th: light-dark(
        hsl(0deg 0% 97%),
        hsl(0deg 0% 17%)
    );
    --color-background-recent-view-table-thead-sort-header: light-dark(
        hsl(229deg 9% 36% / 7%),
        hsl(230deg 9% 60% / 14%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-recent-view-table-thead-th: light-dark(
        var(--grey-600),
        var(--grey-300)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-arrow-recent-view-table-thead-th: light-dark(
        hsl(229deg 9% 36% / 50%),
        hsl(229deg 10% 70% / 50%)
    );
    --color-text-recent-view-last-msg-time: light-dark(
        hsl(0deg 0% 15% / 75%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-text-recent-view-last-msg-time-unread: light-dark(
        hsl(0deg 0% 0% / 75%),
        hsl(0deg 0% 100% / 58%)
    );
    --color-compose-box-background: light-dark(
        hsl(232deg 30% 92%),
        hsl(228deg 11% 17%)
    );
}
}

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

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-compose-message-content-background-over-limit: light-dark(
        hsl(3deg 35% 90%),
        hsl(3deg 50% 12%)
    );
    --color-compose-message-content-background-approaching-limit: light-dark(
        hsl(50deg 75% 92%),
        hsl(50deg 75% 12%)
    );
    --color-border-compose-content: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-compose-send-button-focus-shadow: light-dark(
        hsl(230deg 100% 20%),
        hsl(0deg 0% 100% / 80%)
    );
    --color-compose-send-control-button: light-dark(
        hsl(240deg 30% 50% / 95%),
        hsl(240deg 30% 70%)
    );
    --color-compose-send-control-button-interactive: light-dark(
        hsl(240deg 30% 50%),
        var(--color-compose-send-control-button)
    );
    --color-compose-send-control-button-background-interactive: light-dark(
        hsl(240deg 100% 30% / 5%),
        hsl(235deg 100% 70% / 11%)
    );
    --color-compose-recipient-box-background-color: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-compose-recipient-box-border-color: light-dark(
        color-mix(in srgb, hsl(0deg 0% 0%) 10%, hsl(232deg 20% 92%)),
        hsl(0deg 0% 0% / 80%)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-compose-recipient-box-hover: light-dark(
        hsl(0deg 0% 69%),
        hsl(0deg 0% 100% / 12%)
    );
    --color-compose-recipient-box-has-focus: light-dark(
        hsl(0deg 0% 57%),
        hsl(0deg 0% 100% / 27%)
    );
    --color-compose-collapsed-reply-button-area-background: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-compose-collapsed-reply-button-area-background-interactive: light-dark(
        var(--color-compose-collapsed-reply-button-area-background),
        hsl(0deg 0% 0% / 15%)
    );
    --color-compose-collapsed-reply-button-area-border: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-compose-collapsed-reply-button-area-border-interactive: light-dark(
        hsl(0deg 0% 60%),
        var(--color-compose-collapsed-reply-button-area-border)
    );
    --color-compose-embedded-button-text-color: light-dark(
        hsl(231deg 20% 46%),
        hsl(231deg 30% 65%)
    );
    --color-compose-embedded-button-text-color-hover: light-dark(
        hsl(231deg 20% 30%),
        hsl(231deg 30% 70%)
    );
    --color-compose-embedded-button-background-hover: light-dark(
        hsl(231deg 100% 90% / 50%),
        hsl(235deg 100% 70% / 11%)
    );
    --color-compose-embedded-button-background-interactive: light-dark(
        hsl(231deg 100% 90% / 90%),
        hsl(235deg 100% 70% / 20%)
    );
    --color-background-compose-new-message-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-compose-new-message-button-hover: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 15%)
    );
    --color-background-compose-new-message-button-active: light-dark(
        hsl(0deg 0% 95%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-compose-new-message-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-compose-new-message-button-hover: light-dark(
        hsl(0deg 0% 60%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-compose-new-message-button-active: light-dark(
        hsl(0deg 0% 60%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-limit-indicator: light-dark(
        hsl(38deg 100% 36%),
        hsl(38deg 100% 70%)
    );
    --color-limit-indicator-over-limit: light-dark(
        hsl(3deg 80% 40%),
        hsl(3deg 80% 60%)
    );
    --color-narrow-to-compose-recipients-background: light-dark(
        hsl(227deg 100% 70% / 25%),
        hsl(227deg 80% 60% / 25%)
    );
    --color-narrow-to-compose-recipients-background-hover: light-dark(
        hsl(227deg 100% 70% / 35%),
        hsl(227deg 80% 60% / 35%)
    );
    --color-narrow-to-compose-recipients: light-dark(
        hsl(227deg 76% 64%),
        hsl(224deg 28% 81%)
    );
    --color-narrow-to-compose-recipients-hover: light-dark(
        hsl(227deg 78% 59%),
        hsl(221deg 100% 95%)
    );
    --color-composebox-button: light-dark(
        hsl(0deg 100% 0% / 55%),
        hsl(0deg 100% 100% / 55%)
    );
    --color-composebox-button-background: light-dark(
        hsl(0deg 100% 100% / 60%),
        hsl(231deg 8% 13.5% / 80%)
    );
    --color-composebox-button-background-hover: light-dark(
        hsl(0deg 0% 95%),
        hsl(231deg 12% 18%)
    );
    --color-message-formatting-controls-container: light-dark(
        hsl(232deg 30% 96%),
        hsl(0deg 0% 0% / 8%)
    );
    --color-message-content-container-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 0% / 80%)
    );
    --color-message-content-container-border-focus: light-dark(
        hsl(0deg 0% 57%),
        hsl(0deg 0% 100% / 27%)
    );
    --color-compose-control-button-background-hover: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 100% / 5%)
    );
    --color-compose-formatting-button-divider: light-dark(
        hsl(0deg 0% 75%),
        hsl(236deg 33% 90% / 25%)
    );
    --color-compose-focus-ring: light-dark(
        var(--color-outline-focus),
        hsl(0deg 0% 67%)
    );
    --gradient-compose-scroll-backward: linear-gradient(
        90deg,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 35%,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%,
        transparent 100%
    );
    --gradient-compose-scroll-backward-hover: linear-gradient(
        90deg,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 35%,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%,
        transparent 100%
    );
    --gradient-compose-scroll-backward-active: linear-gradient(
        90deg,
        light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 45%,
        transparent 100%
    );
    --gradient-compose-scroll-forward: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24% / 76.9%)) 50%,
        light-dark(hsl(234deg 100% 95%), hsl(234deg 21% 24%)) 65%
    );
    --gradient-compose-scroll-forward-hover: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28% / 76.9%)) 50%,
        light-dark(hsl(234deg 100% 93%), hsl(234deg 30% 28%)) 65%
    );
    --gradient-compose-scroll-forward-active: linear-gradient(
        90deg,
        transparent 0%,
        light-dark(hsl(234deg 100% 90%), hsl(234deg 35% 30%)) 55%
    );
    --color-text-default: light-dark(hsl(0deg 0% 20%), hsl(0deg 0% 87%));
    --color-text-message-default: light-dark(
        hsl(0deg 0% 15%),
        var(--color-text-default)
    );
    --color-text-message-blockquote-border: light-dark(
        hsl(0deg 0% 15% / 25%),
        hsl(0deg 0% 87% / 40%)
    );
    --color-text-message-view-header: light-dark(
        hsl(0deg 0% 20% / 100%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-text-message-header: light-dark(
        hsl(0deg 0% 15%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-text-dropdown-input: light-dark(
        hsl(0deg 0% 13.33%),
        hsl(0deg 0% 95%)
    );
    --color-text-self-direct-mention: light-dark(
        hsl(240deg 52% 45% / 100%),
        hsl(240deg 100% 88% / 100%)
    );
    --color-text-self-group-mention: light-dark(
        hsl(183deg 52% 26% / 100%),
        hsl(184deg 52% 63% / 100%)
    );
    --color-text-show-more-less-button: light-dark(
        hsl(240deg 52% 53%),
        hsl(240deg 30% 65%)
    );
    --color-text-search: light-dark(hsl(0deg 0% 35%), hsl(0deg 0% 100% / 75%));
    --color-text-search-hover: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-text-placeholder: light-dark(hsl(0deg 0% 45%), hsl(0deg 0% 55%));
    --color-text-search-placeholder: light-dark(
        hsl(0deg 0% 50%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-text-popover-menu: light-dark(
        hsl(0deg 0% 15%),
        hsl(0deg 0% 100% / 80%)
    );
    --color-text-full-name: light-dark(hsl(0deg 0% 15%), hsl(0deg 0% 100%));
    --color-text-item: light-dark(hsl(0deg 0% 40%), hsl(0deg 0% 50%));
    --color-text-personal-menu-no-status: light-dark(
        hsl(0deg 0% 50%),
        hsl(0deg 0% 100% 35%)
    );
    --color-text-personal-menu-some-status: light-dark(
        hsl(0deg 0% 40%),
        hsl(0deg 0% 100% 50%)
    );
    --color-text-sidebar-heading: light-dark(
        hsl(216deg 65% 20%),
        hsl(216deg 50% 75%)
    );
    --color-text-sidebar-action-heading: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-text-sidebar-action-heading-hover: light-dark(
        hsl(240deg 100% 15%),
        hsl(240deg 100% 90%)
    );
    --color-text-sidebar-popover-menu: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-text-user-card-secondary: light-dark(
        var(--grey-550),
        var(--grey-400)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-url-hover: light-dark(
        hsl(200deg 100% 25%),
        hsl(200deg 79% 66%)
    );
    --color-text-settings-field-hint: light-dark(
        hsl(0deg 0% 57%),
        hsl(0deg 0% 52%)
    );
    --color-text-clear-search-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(236deg 33% 80%)
    );
    --color-text-clear-search-button-hover: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-text-settings-plus-button: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-background-settings-plus-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-settings-plus-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-user-profile-field-name: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-border-user-profile-table: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-border-manage-profile-footer: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 100% / 20%)
    );
    --color-border-user-profile-list-container: light-dark(
        hsl(0deg 0% 0% / 35%),
        hsl(0deg 0% 100% / 30%)
    );
    --background-color-user-profile-list-container: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 17%)
    );
    --color-text-link: light-dark(hsl(210deg 94% 42%), hsl(200deg 100% 50%));
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-link-decoration: light-dark(
        color-mix(in oklch, hsl(210deg 94% 42%) 20%, transparent),
        color-mix(in oklch, hsl(200deg 100% 50%) 20%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-link-hover: light-dark(
        hsl(212deg 100% 50%),
        hsl(200deg 100% 60%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-link-decoration-hover: light-dark(
        color-mix(in oklch, hsl(212deg 100% 50%) 70%, transparent),
        color-mix(in oklch, hsl(200deg 100% 60%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-link-active: light-dark(
        hsl(212deg 100% 30%),
        hsl(200deg 100% 50%)
    );
    --color-text-generic-link-interactive: light-dark(
        #005580,
        hsl(200deg 79% 66%)
    );
    --color-background-tippy-box: light-dark(hsl(0deg 0% 20%), hsl(0deg 0% 0%));
    --color-background-dropdown-widget: light-dark(
        hsl(240deg 20% 98%),
        hsl(240deg 5% 16%)
    );
    --color-border-dropdown-widget: light-dark(
        hsl(0deg 0% 0% / 40%),
        hsl(0deg 0% 0%)
    );
    --color-border-dropdown-widget-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-background-dropdown-widget-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-disabled-dropdown-widget-button: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-poll-vote: light-dark(hsl(156deg 41% 40%), hsl(185deg 35% 65%));
    --color-poll-vote-hover: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 50% 70%)
    );
    --color-poll-vote-focus: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 50% 65%)
    );
    --color-border-poll-vote: light-dark(
        hsl(156deg 28% 70%),
        hsl(185deg 35% 35%)
    );
    --color-border-poll-vote-hover: light-dark(
        hsl(156deg 30% 50%),
        hsl(185deg 40% 40%)
    );
    --color-border-poll-vote-focus: light-dark(
        hsl(156deg 30% 50%),
        hsl(185deg 40% 50%)
    );
    --color-background-poll-vote-hover: light-dark(
        var(--color-background-widget-button),
        hsl(185deg 20% 20%)
    );
    --color-background-poll-vote-focus: light-dark(
        hsl(156deg 41% 90%),
        hsl(185deg 40% 35%)
    );
    --color-poll-names: light-dark(hsl(0deg 0% 45%), hsl(236deg 15% 70%));
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-todo-checkbox: light-dark(
        hsl(156deg 28% 70%),
        color-mix(in oklch, hsl(185deg 40% 45%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-todo-checkbox-hover: light-dark(
        hsl(156deg 30% 50%),
        hsl(185deg 40% 35%)
    );
    --color-border-todo-checkbox-checked: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 40% 45%)
    );
    --color-background-todo-checkbox-hover: light-dark(
        transparent,
        hsl(185deg 20% 20%)
    );
    --color-background-todo-checkbox-checked: light-dark(
        hsl(156deg 41% 40%),
        hsl(185deg 40% 45%)
    );
    --color-kbd-background: light-dark(hsl(0deg 0% 98%), hsl(211deg 29% 14%));
    --color-kbd-border: light-dark(hsl(0deg 0% 80%), hsl(211deg 29% 14%));
    --color-kbd-text: light-dark(hsl(0deg 0% 20%), hsl(236deg 33% 90%));
    --color-kbd-enter-sends: light-dark(hsl(0deg 0% 40%), hsl(236deg 33% 90%));
    --color-realm-enable-spectator-access-link: light-dark(
        hsl(0deg 0% 20%),
        hsl(236deg 33% 90%)
    );
    --color-background-stream-email: light-dark(
        hsl(0deg 0% 98%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-integration-url: light-dark(
        transparent,
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-tbody-th-odd: light-dark(
        transparent,
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-rendered-markdown-thead: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-rendered-markdown-table: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 33%)
    );
    --color-background-tab-switcher-ind-tab: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-tab-switcher-ind-tab-selected: light-dark(
        hsl(0deg 0% 53%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-tab-switcher-ind-tab: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-tab-switcher-ind-tab-selected: light-dark(
        hsl(0deg 0% 47%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-text-tab-switcher-ind-tab-disabled: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 42% / 90%)
    );
    --color-border-tab-switcher-ind-tab-disabled: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-background-table-header: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0%)
    );
    --color-background-table-header-sortable-hover: light-dark(
        hsl(0deg 0% 95%),
        hsl(211deg 29% 14%)
    );
    --color-border-table-striped: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-table-bordered: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-table-subscriber-list: light-dark(
        hsl(0deg 0% 87%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-markdown-code-text: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-markdown-code-background: light-dark(
        hsl(0deg 0% 0% / 6%),
        hsl(0deg 0% 100% / 8%)
    );
    --color-markdown-code-background-mentions: light-dark(
        hsl(0deg 0% 0% / 7%),
        var(--color-markdown-code-background)
    );
    --color-markdown-pre-background: light-dark(
        hsl(0deg 0% 0% / 4%),
        hsl(0deg 0% 100% / 4%)
    );
    --color-markdown-pre-background-mentions: light-dark(
        hsl(0deg 0% 0% / 4%),
        hsl(0deg 0% 100% / 5%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-markdown-pre-border-mentions: light-dark(
        transparent,
        var(--color-markdown-pre-border)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-markdown-link: light-dark(
        hsl(200deg 100% 40%),
        var(--color-text-generic-link)
    );
    --color-markdown-link-hover: light-dark(
        hsl(200deg 100% 25%),
        var(--color-text-generic-link-interactive)
    );
    --color-background-image-thumbnail: light-dark(
        hsl(0deg 0% 0% / 3%),
        hsl(0deg 0% 100% / 3%)
    );
    --color-background-image-thumbnail-hover: light-dark(
        hsl(0deg 0% 0% / 30%),
        hsl(0deg 0% 100% / 35%)
    );
    --color-icon-bot: light-dark(
        hsl(180deg 8% 65% / 100%),
        hsl(180deg 5% 50% / 100%)
    );
    --color-message-action-visible: light-dark(
        hsl(216deg 43% 20% / 50%),
        hsl(217deg 41% 90% / 50%)
    );
    --color-message-action-interactive: light-dark(
        hsl(216deg 43% 20% / 100%),
        hsl(217deg 41% 90% / 100%)
    );
    --color-left-sidebar-follow-icon-hover: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
    --color-left-sidebar-navigation-icon: light-dark(
        hsl(240deg 30% 40%),
        hsl(240deg 35% 68%)
    );
    --color-left-sidebar-dm-partners-icon: light-dark(
        hsl(240deg 30% 60%),
        hsl(240deg 35% 58%)
    );
    --color-vdots-hint: light-dark(hsl(240deg 30% 80%), hsl(240deg 35% 38%));
    --color-vdots-visible: light-dark(hsl(240deg 30% 40%), hsl(240deg 35% 68%));
    --color-vdots-hover: light-dark(hsl(240deg 100% 15%), hsl(240deg 100% 90%));
    --color-tab-picker-icon: light-dark(hsl(200deg 100% 40%), hsl(0deg 0% 80%));
}
}

@supports (color: light-dark(red, red)) {
:root {
    --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: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-copy-button: light-dark(
        /* hsl(229deg 9% 36%) corresponds to --grey-600.
           We use the hsl() equivalent directly since postcss-color-mix-function
           cannot dynamically resolve var() arguments. */
            color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent),
        /* hsl(229deg 10% 70%) corresponds to --grey-400. */
            color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-copy-button-hover: light-dark(var(--grey-600), var(--grey-300));
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-copy-button-square-bg-hover: light-dark(
        /* --grey-600, opacity 0.07 */
            color-mix(in oklch, hsl(229deg 9% 36%) 7%, transparent),
        /* --grey-400, opacity 0.14 */
            color-mix(in oklch, hsl(230deg 9% 60%) 14%, transparent)
    );
    --color-copy-button-active: light-dark(
        /* --grey-600, opacity 0.7 */
            color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent),
        /* --grey-300, opacity 0.7 */
            color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-copy-button-square-active: light-dark(
        var(--grey-600),
        var(--grey-300)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-copy-button-square-bg-active: light-dark(
        /* --grey-600, opacity 0.11 */
            color-mix(in oklch, hsl(229deg 9% 36%) 11%, transparent),
        /* --grey-400, opacity 0.18 */
            color-mix(in oklch, hsl(229deg 9% 60%) 18%, transparent)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-copy-button-success: light-dark(var(--green-500), var(--green-300));
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-message-reaction-border: light-dark(
        hsl(0deg 0% 0% / 10%),
        hsl(0deg 0% 100% / 15%)
    );
    --color-message-reaction-border-reacted: light-dark(
        hsl(0deg 0% 0% / 45%),
        hsl(0deg 0% 100% / 70%)
    );
    --color-message-reaction-background: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 30%)
    );
    --color-message-reaction-background-reacted: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 80%)
    );
    --color-message-reaction-background-hover: light-dark(
        hsl(210deg 30% 96%),
        hsl(0deg 0% 100% / 10%)
    );
    --color-message-reaction-shadow-inner: light-dark(
        hsl(210deg 50% 50% / 8%),
        transparent /* No shadow in dark mode. */
    );
    --color-message-reaction-text: light-dark(
        hsl(210deg 20% 25% / 100%),
        hsl(0deg 0% 100% / 75%)
    );
    --color-message-reaction-text-reacted: light-dark(
        hsl(210deg 20% 20% / 100%),
        hsl(0deg 0% 100% / 85%)
    );
    --color-message-reaction-button-text: light-dark(
        hsl(210deg 20% 20% / 60%),
        var(--color-message-reaction-text)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --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)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-zulip-logo: light-dark(
        hsl(0deg 0% 0% / 34%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-zulip-logo-loading: light-dark(hsl(0deg 0% 27%), hsl(0deg 0% 100%));
    --color-recent-view-loading-spinner: light-dark(
        hsl(0deg 0% 27%),
        hsl(0deg 0% 100% / 60%)
    );
    --color-zulip-logo-z: light-dark(hsl(0deg 0% 100%), hsl(214deg 27% 18%));
    --color-show-more-less-button-background: light-dark(
        hsl(240deg 44% 56% / 8%),
        hsl(240deg 44% 56% / 15%)
    );
    --color-show-more-less-button-background-hover: light-dark(
        hsl(240deg 44% 56% / 15%),
        hsl(240deg 44% 56% / 25%)
    );
    --color-show-more-less-button-background-active: light-dark(
        hsl(240deg 44% 56% / 20%),
        hsl(240deg 44% 56% / 15%)
    );
    --color-message-edit-history-text-inserted: light-dark(
        hsl(122deg 72% 30%),
        hsl(122deg 100% 81%)
    );
    --color-message-edit-history-background-inserted: light-dark(
        hsl(120deg 64% 95%),
        hsl(120deg 64% 95% / 30%)
    );
    --color-message-edit-history-text-deleted: light-dark(
        hsl(0deg 100% 50%),
        hsl(0deg 90% 67%)
    );
    --color-message-edit-history-background-deleted: light-dark(
        hsl(7deg 90% 92%),
        hsl(7deg 54% 62% / 38%)
    );
    --color-background-direct-mention: light-dark(
        hsl(240deg 52% 95%),
        hsl(240deg 13% 16%)
    );
    --color-background-group-mention: light-dark(
        hsl(180deg 40% 94%),
        hsl(180deg 13% 14%)
    );
    --color-background-text-direct-mention: light-dark(
        hsl(240deg 70% 70% / 20%),
        hsl(240deg 52% 60% / 25%)
    );
    --color-background-text-hover-direct-mention: light-dark(
        hsl(240deg 70% 70% / 30%),
        hsl(240deg 52% 60% / 45%)
    );
    --color-background-text-group-mention: light-dark(
        hsl(183deg 60% 45% / 18%),
        hsl(183deg 52% 40% / 20%)
    );
    --color-background-text-hover-group-mention: light-dark(
        hsl(183deg 60% 45% / 30%),
        hsl(183deg 52% 40% / 30%)
    );
    --color-background-input-pill: light-dark(
        hsl(237deg 68% 94%),
        hsl(240deg 65% 60% / 38%)
    );
    --color-background-input-pill-search: light-dark(
        hsl(237deg 68% 94%),
        hsl(240deg 65% 60% / 30%)
    );
    --color-background-input-pill-hover: light-dark(
        hsl(240deg 70% 70% / 30%),
        hsl(240deg 52% 60% / 45%)
    );
    --color-border-input-pill-image: light-dark(
        hsl(237deg 68% 94% / 50%),
        hsl(240deg 65% 60% / 60%)
    );
    --color-outline-low-attention-input-pill: light-dark(
        hsl(237deg 68% 88%),
        hsl(240deg 65% 60% / 22%)
    );
    --color-focus-outline-input-pill: light-dark(
        hsl(240deg 50% 50%),
        hsl(0deg 0% 100% / 60%)
    );
    --color-input-pill-close: light-dark(
        hsl(240deg 60% 65%),
        hsl(240deg 50% 74%)
    );
    --color-background-input-pill-exit-hover: light-dark(
        hsl(240deg 70% 70% / 15%),
        hsl(0deg 0% 100% / 7%)
    );
    --color-background-deactivated-user-pill: light-dark(
        hsl(8deg 96% 91%),
        hsl(360deg 97% 25%)
    );
    --color-focus-outline-deactivated-user-pill: light-dark(
        hsl(4deg 75% 53%),
        hsl(0deg 0% 100% / 70%)
    );
    --color-close-deactivated-user-pill: light-dark(
        hsl(4deg 75% 53%),
        hsl(7deg 100% 74%)
    );
    --color-background-exit-hover-deactivated-user-pill: light-dark(
        hsl(4deg 75% 53% / 15%),
        hsl(0deg 0% 100% / 7%)
    );
    --color-background-user-pill: light-dark(
        hsl(0deg 0% 100% / 85%),
        hsl(0deg 0% 0% / 40%)
    );
    --color-background-pill-container: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-pill-container-input-disabled: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-pill-container: light-dark(
        hsl(0deg 0% 0% / 15%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-background-inbox-no-unreads-illustration: light-dark(
        hsl(147deg 57% 25%),
        hsl(147deg 40% 55%)
    );
    --color-icon-search-inbox: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-inbox-search-text: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 95%));
    --color-border-inbox-search: light-dark(
        hsl(229.09deg 21.57% 10% / 30%),
        hsl(0deg 0% 100% / 20%)
    );
    --color-border-inbox-search-hover: light-dark(
        hsl(229.09deg 21.57% 10% / 60%),
        hsl(0deg 0% 100% / 40%)
    );
    --color-background-inbox-search: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 10%)
    );
    --color-background-inbox-search-hover: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 8%)
    );
    --color-background-inbox-search-focus: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 7%)
    );
    --color-border-inbox-search-focus: light-dark(
        hsl(229.09deg 21.57% 10% / 80%),
        hsl(0deg 0% 100% / 50%)
    );
    --color-box-shadow-inbox-search-focus: light-dark(
        hsl(228deg 9.8% 20% / 30%),
        hsl(0deg 0% 100% / 40%)
    );
    --color-background-inbox-row: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 14%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-inbox-row-hover: light-dark(
        color-mix(in srgb, hsl(0deg 0% 0%) 5%, hsl(0deg 0% 100%)),
        color-mix(in srgb, hsl(0deg 0% 100%) 5%, hsl(0deg 0% 14%))
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-button-inbox-selected: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 100% / 5%)
    );
    --color-background-button-inbox-focus: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 20%)
    );
    --color-icons-inbox: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 100%));
    --color-folder-header: light-dark(hsl(216deg 43% 20%), hsl(216deg 50% 75%));
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-inbox-row-chevron: light-dark(#535663, #aaadba);
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-navbar-icon: light-dark(hsl(240deg 20% 50%), hsl(240deg 35% 60%));
    --color-navbar-spectator-low-attention-brand-button-text: light-dark(
        hsl(240deg 40% 50%),
        hsl(240deg 55% 72% / 100%)
    );
    --color-navbar-spectator-low-attention-brand-button-background-hover: light-dark(
        hsl(240deg 100% 30% / 5%),
        hsl(240deg 56% 70% / 10%)
    );
    --color-navbar-spectator-low-attention-brand-button-background-active: light-dark(
        hsl(240deg 100% 30% / 8%),
        hsl(240deg 56% 70% / 13%)
    );
    --color-navbar-spectator-medium-attention-brand-button-text: light-dark(
        hsl(240deg 40% 40% / 100%),
        hsl(240deg 64% 76% / 100%)
    );
    --color-navbar-spectator-medium-attention-brand-button-background: light-dark(
        hsl(244deg 64% 47% / 10%),
        hsl(240deg 56% 70% / 12%)
    );
    --color-navbar-spectator-medium-attention-brand-button-background-hover: light-dark(
        hsl(244deg 64% 47% / 15%),
        hsl(240deg 56% 70% / 17%)
    );
    --color-navbar-spectator-medium-attention-brand-button-background-active: light-dark(
        hsl(244deg 64% 47% / 18%),
        hsl(240deg 56% 70% / 12%)
    );
    --color-gear-menu-lighter-text: light-dark(
        hsl(0deg 0% 40%),
        hsl(0deg 0% 50%)
    );
    --color-gear-menu-blue-text: light-dark(
        hsl(217deg 100% 50%),
        hsl(217deg 100% 65%)
    );
    --color-header-button-hover: light-dark(
        hsl(0deg 0% 0% / 5%),
        hsl(0deg 0% 100% / 4%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-header-button-hover-no-alpha: light-dark(
        color-mix(in srgb, hsl(0deg 0% 0%) 5%, hsl(0deg 0% 97%)),
        color-mix(in srgb, hsl(0deg 0% 100%) 4%, hsl(0deg 0% 13%))
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-header-button-focus: light-dark(
        hsl(0deg 0% 0% / 8%),
        hsl(0deg 0% 100% / 7%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-header-button-focus-no-alpha: light-dark(
        color-mix(in srgb, hsl(0deg 0% 0%) 8%, hsl(0deg 0% 97%)),
        color-mix(in srgb, hsl(0deg 0% 100%) 7%, hsl(0deg 0% 13%))
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-fill-user-invite-copy-icon: light-dark(
        hsl(0deg 0% 46.7%),
        hsl(236deg 33% 90%)
    );
    --color-background-zulip-button: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-zulip-button-hover: light-dark(
        var(--color-background-zulip-button),
        hsl(0deg 0% 0% / 15%)
    );
    --color-background-zulip-button-active: light-dark(
        hsl(0deg 0% 95%),
        var(--color-background-zulip-button-hover)
    );
    --color-background-zulip-button-disabled: light-dark(
        hsl(0deg 0% 93%),
        var(--color-background-zulip-button)
    );
    --color-border-zulip-button: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-zulip-button-interactive: light-dark(
        hsl(0deg 0% 60%),
        var(--color-border-zulip-button)
    );
    --color-border-rendered-checkbox: light-dark(
        hsl(0deg 0% 0% / 60%),
        hsl(0deg 0% 100% / 40%)
    );
    --color-background-emoji-picker-popover: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-emoji-picker-popover-tab-item-active: light-dark(
        hsl(0deg 0% 100% / 20%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-background-emoji-picker-emoji-focus: light-dark(
        hsl(0deg 0% 93%),
        hsl(212deg 28% 8% / 75%)
    );
    --color-box-shadow-emoji-picker-emoji-focus: light-dark(
        transparent,
        hsl(0deg 0% 98%)
    );
    --color-background-emoji-picker-emoji-reacted: light-dark(
        hsl(195deg 50% 95%),
        hsl(0deg 0% 0% / 50%)
    );
    --color-border-emoji-picker-emoji-reacted: light-dark(
        hsl(195deg 52% 79%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-background-emoji-picker-emoji-reacted-focus: light-dark(
        hsl(195deg 55% 88%),
        hsl(0deg 0% 20% / 70%)
    );
    --color-border-emoji-picker-tippy-arrow: light-dark(
        hsl(0deg 0% 93%),
        hsl(211.58deg 33.33% 11.18%)
    );
    --color-dropdown-item: light-dark(hsl(0deg 0% 20%), hsl(0deg 0% 75%));
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-dropdown-item-link-underline: light-dark(
        hsl(0deg 0% 20% 60%),
        hsl(0deg 0% 75% 60%)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-active-dropdown-item: light-dark(hsl(0deg 0% 0%), hsl(0deg 0% 90%));
    --background-color-active-dropdown-item: light-dark(
        hsl(220deg 12% 4.9% / 5%),
        hsl(220deg 12% 100% / 7%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-current-setting-dropdown-item: light-dark(
        var(--purple-700),
        var(--purple-300)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --background-color-active-typeahead-item: light-dark(
        hsl(220deg 12% 4.9% / 5%),
        hsl(220deg 12% 100% / 7%)
    );
}
}

@supports (color: light-dark(red, red)) {
:root {
    --color-typeahead-option-label: light-dark(
        var(--grey-500),
        var(--grey-400)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-outline-button-focus: light-dark(
        hsl(0deg 0% 0%),
        hsl(0deg 0% 100%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-inner-shadow-action-button: light-dark(
        color-mix(in oklch, hsl(0deg 0% 0%) 20%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 21%, transparent)
    );
    --color-text-neutral-solid-action-button: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-neutral-solid-action-button: light-dark(
        hsl(229deg 7% 50%),
        hsl(229deg 9% 36%)
    );
    --color-background-neutral-solid-action-button-hover: light-dark(
        hsl(229deg 7% 47%),
        hsl(229deg 8% 42%)
    );
    --color-background-neutral-solid-action-button-active: light-dark(
        hsl(232deg 7% 44%),
        hsl(229deg 9% 36%)
    );
    --color-text-neutral-subtle-action-button: light-dark(
        hsl(229deg 12% 25%),
        hsl(231deg 11% 76%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-neutral-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(230deg 7% 50%) 12%, transparent),
        color-mix(in oklch, hsl(231deg 11% 76%) 12%, transparent)
    );
    --color-background-neutral-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(230deg 7% 50%) 17%, transparent),
        color-mix(in oklch, hsl(231deg 11% 76%) 17%, transparent)
    );
    --color-background-neutral-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(230deg 7% 50%) 22%, transparent),
        color-mix(in oklch, hsl(231deg 11% 76%) 12%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-neutral-text-action-button: light-dark(
        hsl(229deg 9% 36%),
        hsl(229deg 10% 70%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-neutral-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 7%, transparent),
        color-mix(in oklch, hsl(230deg 9% 60%) 14%, transparent)
    );
    --color-background-neutral-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 11%, transparent),
        color-mix(in oklch, hsl(230deg 9% 60%) 18%, transparent)
    );
    --color-text-brand-solid-action-button: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-brand-solid-action-button: light-dark(
        hsl(254deg 99% 68%),
        hsl(261deg 79% 43%)
    );
    --color-background-brand-solid-action-button-hover: light-dark(
        hsl(255deg 81% 61%),
        hsl(258deg 66% 51%)
    );
    --color-background-brand-solid-action-button-active: light-dark(
        hsl(258deg 66% 51%),
        hsl(261deg 79% 43%)
    );
    --color-text-brand-subtle-action-button: light-dark(
        hsl(264deg 95% 34%),
        hsl(244deg 96% 82%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-brand-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(254deg 99% 68%) 12%, transparent),
        color-mix(in oklch, hsl(246deg 96% 79%) 12%, transparent)
    );
    --color-background-brand-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(254deg 99% 68%) 17%, transparent),
        color-mix(in oklch, hsl(246deg 96% 79%) 17%, transparent)
    );
    --color-background-brand-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(254deg 99% 68%) 22%, transparent),
        color-mix(in oklch, hsl(246deg 96% 79%) 12%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-brand-text-action-button: light-dark(
        hsl(255deg 54% 50%),
        hsl(246deg 96% 79%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-brand-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(264deg 100% 22%) 5%, transparent),
        color-mix(in oklch, hsl(251deg 100% 72%) 14%, transparent)
    );
    --color-background-brand-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(264deg 100% 22%) 10%, transparent),
        color-mix(in oklch, hsl(251deg 100% 72%) 18%, transparent)
    );
    --color-text-info-solid-action-button: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-info-solid-action-button: light-dark(
        hsl(226deg 100% 62%),
        hsl(228deg 75% 47%)
    );
    --color-text-info-subtle-action-button: light-dark(
        hsl(231deg 82% 36%),
        hsl(222deg 98% 79%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-info-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(226deg 100% 62%) 12%, transparent),
        color-mix(in oklch, hsl(222deg 98% 79%) 12%, transparent)
    );
    --color-background-info-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(226deg 100% 62%) 17%, transparent),
        color-mix(in oklch, hsl(222deg 98% 79%) 17%, transparent)
    );
    --color-background-info-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(226deg 100% 62%) 22%, transparent),
        color-mix(in oklch, hsl(222deg 98% 79%) 12%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-info-text-action-button: light-dark(
        hsl(227deg 70% 46%),
        hsl(222deg 97% 75%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-info-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(241deg 95% 25%) 5%, transparent),
        color-mix(in oklch, hsl(224deg 98% 65%) 12%, transparent)
    );
    --color-background-info-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(241deg 95% 25%) 9%, transparent),
        color-mix(in oklch, hsl(224deg 98% 65%) 17%, transparent)
    );
    --color-text-success-solid-action-button: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-success-solid-action-button: light-dark(
        hsl(146deg 90% 27%),
        hsl(144deg 84% 22%)
    );
    --color-text-success-subtle-action-button: light-dark(
        hsl(144deg 88% 16%),
        hsl(135deg 56% 63%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-success-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(146deg 90% 27%) 13%, transparent),
        color-mix(in oklch, hsl(138deg 46% 47%) 12%, transparent)
    );
    --color-background-success-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(146deg 90% 27%) 18%, transparent),
        color-mix(in oklch, hsl(138deg 46% 47%) 17%, transparent)
    );
    --color-background-success-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(146deg 90% 27%) 23%, transparent),
        color-mix(in oklch, hsl(138deg 46% 47%) 12%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-success-text-action-button: light-dark(
        hsl(146deg 90% 27%),
        hsl(136deg 47% 55%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-success-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(144deg 84% 22%) 8%, transparent),
        color-mix(in oklch, hsl(139deg 54% 40%) 12%, transparent)
    );
    --color-background-success-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(144deg 84% 22%) 12%, transparent),
        color-mix(in oklch, hsl(139deg 54% 40%) 17%, transparent)
    );
    --color-text-warning-solid-action-button: light-dark(
        color-mix(in oklch, hsl(0deg 0% 0%) 88%, transparent),
        color-mix(in oklch, hsl(0deg 0% 0%) 90%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-warning-solid-action-button: light-dark(
        hsl(40deg 99% 62%),
        hsl(39deg 89% 45%)
    );
    --color-background-warning-solid-action-button-hover: light-dark(
        hsl(40deg 94% 56%),
        hsl(41deg 98% 46%)
    );
    --color-background-warning-solid-action-button-active: light-dark(
        hsl(41deg 98% 46%),
        hsl(39deg 89% 45%)
    );
    --color-text-warning-subtle-action-button: light-dark(
        hsl(34deg 89% 25%),
        hsl(40deg 94% 56%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-warning-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(41deg 98% 46%) 18%, transparent),
        color-mix(in oklch, hsl(39deg 89% 45%) 12%, transparent)
    );
    --color-background-warning-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(41deg 98% 46%) 23%, transparent),
        color-mix(in oklch, hsl(39deg 89% 45%) 17%, transparent)
    );
    --color-background-warning-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(41deg 98% 46%) 28%, transparent),
        color-mix(in oklch, hsl(39deg 89% 45%) 12%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-warning-text-action-button: light-dark(
        hsl(37deg 94% 34%),
        hsl(41deg 98% 46%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-warning-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 10%, transparent),
        color-mix(in oklch, hsl(39deg 88% 42%) 12%, transparent)
    );
    --color-background-warning-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 14%, transparent),
        color-mix(in oklch, hsl(39deg 88% 42%) 17%, transparent)
    );
    --color-text-danger-solid-action-button: light-dark(
        hsl(0deg 0% 100%),
        color-mix(in oklch, hsl(0deg 0% 100%) 85%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-danger-solid-action-button: light-dark(
        hsl(4deg 75% 53%),
        hsl(2deg 74% 47%)
    );
    --color-background-danger-solid-action-button-hover: light-dark(
        hsl(2deg 74% 47%),
        hsl(4deg 75% 53%)
    );
    --color-background-danger-solid-action-button-active: light-dark(
        hsl(359deg 93% 39%),
        hsl(2deg 74% 47%)
    );
    --color-text-danger-subtle-action-button: light-dark(
        hsl(359deg 94% 35%),
        hsl(7deg 100% 74%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-danger-subtle-action-button: light-dark(
        color-mix(in oklch, hsl(4deg 75% 53%) 13%, transparent),
        color-mix(in oklch, hsl(5deg 98% 65%) 12%, transparent)
    );
    --color-background-danger-subtle-action-button-hover: light-dark(
        color-mix(in oklch, hsl(4deg 75% 53%) 18%, transparent),
        color-mix(in oklch, hsl(5deg 98% 65%) 17%, transparent)
    );
    --color-background-danger-subtle-action-button-active: light-dark(
        color-mix(in oklch, hsl(4deg 75% 53%) 23%, transparent),
        color-mix(in oklch, hsl(5deg 98% 65%) 12%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-danger-text-action-button: light-dark(
        hsl(359deg 93% 39%),
        hsl(7deg 100% 74%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-danger-text-action-button-hover: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 9%, transparent),
        color-mix(in oklch, hsl(5deg 88% 60%) 12%, transparent)
    );
    --color-background-danger-text-action-button-active: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 13%, transparent),
        color-mix(in oklch, hsl(5deg 88% 60%) 17%, transparent)
    );
    --color-text-neutral-icon-button: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent),
        color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-neutral-icon-button-hover: light-dark(
        hsl(229deg 9% 36%),
        hsl(229deg 10% 70%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-neutral-icon-button-active: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 70%, transparent),
        color-mix(in oklch, hsl(229deg 10% 70%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-neutral-icon-button-square-active: light-dark(
        hsl(229deg 9% 36%),
        hsl(229deg 10% 70%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-neutral-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 7%, transparent),
        color-mix(in oklch, hsl(230deg 9% 60%) 14%, transparent)
    );
    --color-background-neutral-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(229deg 9% 36%) 11%, transparent),
        color-mix(in oklch, hsl(230deg 9% 60%) 18%, transparent)
    );
    --color-text-brand-icon-button: light-dark(
        color-mix(in oklch, hsl(255deg 54% 50%) 70%, transparent),
        color-mix(in oklch, hsl(246deg 96 79%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-brand-icon-button-hover: light-dark(
        hsl(255deg 54% 50%),
        hsl(246deg 96% 79%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-brand-icon-button-active: light-dark(
        color-mix(in oklch, hsl(255deg 54% 50%) 70%, transparent),
        color-mix(in oklch, hsl(246deg 96% 79%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-brand-icon-button-square-active: light-dark(
        hsl(255deg 54% 50%),
        hsl(246deg 96% 79%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-brand-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(264deg 100% 22%) 5%, transparent),
        color-mix(in oklch, hsl(251deg 100% 72%) 14%, transparent)
    );
    --color-background-brand-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(264deg 100% 22%) 10%, transparent),
        color-mix(in oklch, hsl(251deg 100% 72%) 18%, transparent)
    );
    --color-text-info-icon-button: light-dark(
        color-mix(in oklch, hsl(227deg 70% 46%) 70%, transparent),
        color-mix(in oklch, hsl(222deg 97% 75%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-info-icon-button-hover: light-dark(
        hsl(227deg 70% 46%),
        hsl(222deg 97% 75%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-info-icon-button-active: light-dark(
        color-mix(in oklch, hsl(227deg 70% 46%) 70%, transparent),
        color-mix(in oklch, hsl(222deg 97% 75%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-info-icon-button-square-active: light-dark(
        hsl(227deg 70% 46%),
        hsl(222deg 97% 75%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-info-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(241deg 95% 25%) 5%, transparent),
        color-mix(in oklch, hsl(224deg 98% 65%) 12%, transparent)
    );
    --color-background-info-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(241deg 95% 25%) 9%, transparent),
        color-mix(in oklch, hsl(224deg 98% 65%) 17%, transparent)
    );
    --color-text-success-icon-button: light-dark(
        color-mix(in oklch, hsl(146deg 90% 27%) 70%, transparent),
        color-mix(in oklch, hsl(136deg 47% 55%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-success-icon-button-hover: light-dark(
        hsl(146deg 90% 27%),
        hsl(136deg 47% 55%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-success-icon-button-active: light-dark(
        color-mix(in oklch, hsl(146deg 90% 27%) 70%, transparent),
        color-mix(in oklch, hsl(136deg 47% 55%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-success-icon-button-square-active: light-dark(
        hsl(146deg 90% 27%),
        hsl(136deg 47% 55%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-success-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(144deg 84% 22%) 8%, transparent),
        color-mix(in oklch, hsl(139deg 54% 40%) 12%, transparent)
    );
    --color-background-success-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(144deg 84% 22%) 12%, transparent),
        color-mix(in oklch, hsl(139deg 54% 40%) 17%, transparent)
    );
    --color-text-warning-icon-button: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 70%, transparent),
        color-mix(in oklch, hsl(41deg 98% 46%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-warning-icon-button-hover: light-dark(
        hsl(37deg 94% 34%),
        hsl(41deg 98% 46%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-warning-icon-button-active: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 70%, transparent),
        color-mix(in oklch, hsl(41deg 98% 46%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-warning-icon-button-square-active: light-dark(
        hsl(37deg 94% 34%),
        hsl(41deg 98% 46%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-warning-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 10%, transparent),
        color-mix(in oklch, hsl(39deg 88% 42%) 12%, transparent)
    );
    --color-background-warning-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(37deg 94% 34%) 14%, transparent),
        color-mix(in oklch, hsl(39deg 88% 42%) 17%, transparent)
    );
    --color-text-danger-icon-button: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 70%, transparent),
        color-mix(in oklch, hsl(7deg 100% 74%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-danger-icon-button-hover: light-dark(
        hsl(359deg 93% 39%),
        hsl(7deg 100% 74%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-danger-icon-button-active: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 70%, transparent),
        color-mix(in oklch, hsl(7deg 100% 74%) 70%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-danger-icon-button-square-active: light-dark(
        hsl(359deg 93% 39%),
        hsl(7deg 100% 74%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-danger-icon-button-square-hover: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 9%, transparent),
        color-mix(in oklch, hsl(5deg 88% 60%) 12%, transparent)
    );
    --color-background-danger-icon-button-square-active: light-dark(
        color-mix(in oklch, hsl(359deg 93% 39%) 13%, transparent),
        color-mix(in oklch, hsl(5deg 88% 60%) 17%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-text-neutral-banner: light-dark(
        hsl(229deg 12% 25%),
        hsl(231deg 11% 76%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-neutral-banner: light-dark(
        color-mix(in oklch, hsl(240deg 2% 30%) 40%, transparent),
        color-mix(in oklch, hsl(240deg 7% 66%) 40%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-neutral-banner: light-dark(
        hsl(240deg 7% 93%),
        hsl(240deg 7% 17%)
    );
    --color-text-brand-banner: light-dark(
        hsl(264deg 95% 34%),
        hsl(244deg 96% 82%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-brand-banner: light-dark(
        color-mix(in oklch, hsl(254deg 60% 50%) 40%, transparent),
        color-mix(in oklch, hsl(253deg 70% 89%) 40%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-brand-banner: light-dark(
        hsl(254deg 42% 94%),
        hsl(254deg 49% 16%)
    );
    --color-text-info-banner: light-dark(
        hsl(241deg 95% 25%),
        hsl(221deg 93% 89%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-info-banner: light-dark(
        color-mix(in oklch, hsl(204deg 49% 29%) 40%, transparent),
        color-mix(in oklch, hsl(205deg 58% 69%) 40%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-info-banner: light-dark(
        hsl(204deg 58% 92%),
        hsl(204deg 100% 12%)
    );
    --color-text-success-banner: light-dark(
        hsl(144deg 88% 16%),
        hsl(135deg 56% 63%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-success-banner: light-dark(
        color-mix(in oklch, hsl(147deg 57% 25%) 40%, transparent),
        color-mix(in oklch, hsl(149deg 48% 52%) 40%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-success-banner: light-dark(
        hsl(147deg 43% 92%),
        hsl(146deg 90% 7%)
    );
    --color-text-warning-banner: light-dark(
        hsl(34deg 89% 25%),
        hsl(40deg 94% 56%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-warning-banner: light-dark(
        color-mix(in oklch, hsl(38deg 44% 27%) 40%, transparent),
        color-mix(in oklch, hsl(44deg 44% 66%) 40%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-warning-banner: light-dark(
        hsl(50deg 75% 92%),
        hsl(50deg 100% 10%)
    );
    --color-text-danger-banner: light-dark(
        hsl(359deg 94% 35%),
        hsl(7deg 100% 74%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-border-danger-banner: light-dark(
        color-mix(in oklch, hsl(3deg 57% 33%) 40%, transparent),
        color-mix(in oklch, hsl(3deg 73% 74%) 40%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-background-danger-banner: light-dark(
        hsl(0deg 35% 92%),
        hsl(0deg 52% 18%)
    );
    --color-background-legacy-input: light-dark(
        hsl(0deg 0% 100%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-border-legacy-input: light-dark(
        hsl(0deg 0% 80%),
        hsl(0deg 0% 0% / 60%)
    );
    --color-border-legacy-input-focus: light-dark(
        hsl(206deg 80% 62% / 80%),
        hsl(0deg 0% 0% / 90%)
    );
    --color-background-disabled-settings-select: light-dark(
        hsl(0deg 0% 93%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-background-disabled-modal-select: light-dark(
        hsl(0deg 0% 90%),
        hsl(0deg 0% 0% / 20%)
    );
    --color-text-input: light-dark(hsl(0deg 0% 14%), hsl(0deg 0% 95%));
    --color-background-input: light-dark(hsl(0deg 0% 100%), hsl(225deg 6% 10%));
    --color-background-input-focus: light-dark(
        hsl(0deg 0% 100%),
        hsl(225deg 6% 7%)
    );
}
}

@supports (color: color-mix(in lch, red, blue)) and (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-outline-input: light-dark(
        color-mix(in oklch, hsl(229deg 22% 10%) 30%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 20%, transparent)
    );
    --color-outline-input-hover: light-dark(
        color-mix(in oklch, hsl(229deg 22% 10%) 60%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 40%, transparent)
    );
    --color-outline-input-focus: light-dark(
        color-mix(in oklch, hsl(229deg 22% 10%) 80%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 50%, transparent)
    );
    --color-box-shadow-input-focus: light-dark(
        color-mix(in oklch, hsl(228deg 10% 20%) 30%, transparent),
        color-mix(in oklch, hsl(0deg 0% 100%) 40%, transparent)
    );
}
}

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
:root {
    --color-success-main-view-banner: light-dark(
        hsl(147deg 57% 25%),
        hsl(147deg 51% 80%)
    );
    --color-background-success-main-view-banner: light-dark(
        hsl(147deg 43% 92%),
        hsl(147deg 100% 8%)
    );
    --color-border-success-main-view-banner: light-dark(
        hsl(147deg 57% 25% / 40%),
        hsl(149deg 48% 52% / 40%)
    );
    --color-success-main-view-banner-close-button: light-dark(
        hsl(147deg 57% 25% / 50%),
        hsl(147deg 51% 55% / 50%)
    );
    --color-success-main-view-banner-close-button-hover: light-dark(
        hsl(147deg 57% 25%),
        hsl(147deg 51% 55%)
    );
    --color-success-main-view-banner-close-button-active: light-dark(
        hsl(147deg 57% 25% / 75%),
        hsl(147deg 51% 55% / 75%)
    );
    --color-background-success-main-view-banner-action-button: light-dark(
        hsl(147deg 57% 25% / 10%),
        hsl(147deg 51% 55% / 10%)
    );
    --color-background-success-main-view-banner-action-button-hover: light-dark(
        hsl(147deg 57% 25% / 12%),
        hsl(147deg 51% 55% / 15%)
    );
    --color-background-success-main-view-banner-action-button-active: light-dark(
        hsl(147deg 57% 25% / 15%),
        hsl(147deg 51% 55% / 20%)
    );
    --color-warning-main-view-banner: light-dark(
        hsl(38deg 44% 27%),
        hsl(50deg 45% 80%)
    );
    --color-background-warning-main-view-banner: light-dark(
        hsl(50deg 75% 92%),
        hsl(53deg 100% 11%)
    );
    --color-border-warning-main-view-banner: light-dark(
        hsl(38deg 44% 27% / 40%),
        hsl(38deg 44% 60% / 40%)
    );
    --color-warning-main-view-banner-close-button: light-dark(
        hsl(38deg 44% 27% / 50%),
        hsl(50deg 45% 61% / 50%)
    );
    --color-warning-main-view-banner-close-button-hover: light-dark(
        hsl(38deg 44% 27%),
        hsl(50deg 45% 61%)
    );
    --color-warning-main-view-banner-close-button-active: light-dark(
        hsl(38deg 44% 27% / 75%),
        hsl(50deg 45% 61% / 75%)
    );
    --color-warning-main-view-banner-action-button: light-dark(
        inherit,
        hsl(50deg 45% 61%)
    );
    --color-background-warning-main-view-banner-action-button: light-dark(
        hsl(38deg 44% 27% / 10%),
        hsl(50deg 45% 61% / 10%)
    );
    --color-background-warning-main-view-banner-action-button-hover: light-dark(
        hsl(38deg 44% 27% / 12%),
        hsl(50deg 45% 61% / 15%)
    );
    --color-background-warning-main-view-banner-action-button-active: light-dark(
        hsl(38deg 44% 27% / 15%),
        hsl(50deg 45% 61% / 20%)
    );
    --color-error-main-view-banner: light-dark(
        hsl(4deg 58% 33%),
        hsl(3deg 73% 80%)
    );
    --color-background-error-main-view-banner: light-dark(
        hsl(4deg 35% 90%),
        hsl(0deg 60% 19%)
    );
    --color-border-error-main-view-banner: light-dark(
        hsl(3deg 57% 33% / 40%),
        hsl(3deg 73% 74% / 40%)
    );
    --color-error-main-view-banner-close-button: light-dark(
        hsl(4deg 58% 33% / 50%),
        hsl(3deg 73% 74% / 50%)
    );
    --color-error-main-view-banner-close-button-hover: light-dark(
        hsl(4deg 58% 33%),
        hsl(3deg 73% 74%)
    );
    --color-error-main-view-banner-close-button-active: light-dark(
        hsl(4deg 58% 33% / 75%),
        hsl(3deg 73% 74% / 75%)
    );
    --color-error-main-view-banner-action-button: light-dark(
        inherit,
        hsl(3deg 73% 74%)
    );
    --color-background-error-main-view-banner-action-button: light-dark(
        hsl(3deg 57% 33% / 10%),
        hsl(3deg 73% 74% / 10%)
    );
    --color-background-error-main-view-banner-action-button-hover: light-dark(
        hsl(3deg 57% 33% / 12%),
        hsl(3deg 73% 74% / 15%)
    );
    --color-background-error-main-view-banner-action-button-active: light-dark(
        hsl(3deg 57% 33% / 15%),
        hsl(3deg 73% 74% / 20%)
    );
    --color-info-main-view-banner: light-dark(
        hsl(204deg 49% 29%),
        hsl(205deg 58% 80%)
    );
    --color-background-info-main-view-banner: light-dark(
        hsl(204deg 58% 92%),
        hsl(204deg 100% 12%)
    );
    --color-border-info-main-view-banner: light-dark(
        hsl(204deg 49% 29% / 40%),
        hsl(205deg 58% 69% / 40%)
    );
    --color-info-main-view-banner-close-button: light-dark(
        hsl(204deg 49% 29% / 50%),
        hsl(205deg 58% 69% / 50%)
    );
    --color-info-main-view-banner-close-button-hover: light-dark(
        hsl(204deg 49% 29%),
        hsl(205deg 58% 69%)
    );
    --color-info-main-view-banner-close-button-active: light-dark(
        hsl(204deg 49% 29% / 75%),
        hsl(205deg 58% 69% / 75%)
    );
    --color-info-main-view-banner-action-button: light-dark(
        inherit,
        hsl(205deg 58% 69%)
    );
    --color-background-info-main-view-banner-action-button: light-dark(
        hsl(204deg 49% 29% / 10%),
        hsl(205deg 58% 69% / 10%)
    );
    --color-background-info-main-view-banner-action-button-hover: light-dark(
        hsl(204deg 49% 29% / 12%),
        hsl(205deg 58% 69% / 15%)
    );
    --color-background-info-main-view-banner-action-button-active: light-dark(
        hsl(204deg 49% 29% / 15%),
        hsl(205deg 58% 69% / 20%)
    );
    --color-main-view-banner-action-link: light-dark(
        var(--color-text-generic-link),
        hsl(200deg 100% 50%)
    );
    --color-background-main-view-banner-moving-bar: light-dark(
        hsl(204deg 63% 85%),
        hsl(204deg 63% 18%)
    );
    --color-info-density-control-border: light-dark(
        hsl(0deg 0% 0% / 20%),
        hsl(0deg 0% 90% / 20%)
    );
    --color-info-density-button-icon: light-dark(
        hsl(229deg 9% 36%),
        hsl(0deg 0% 100% / 80%)
    );
    --color-info-density-button-hover-background: light-dark(
        hsl(229deg 9% 36% / 7%),
        hsl(229deg 10% 50% / 30%)
    );
}
}

@supports not (color: light-dark(tan, tan)) {

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

@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(212deg 32% 7%);

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

    /* Text colors */
    --color-text-sender-name: hsl(0deg 0% 100% / 85%);
    --color-text-other-mention: hsl(0deg 0% 100% / 80%);
    --color-text-empty-list-message: hsl(0deg 0% 67%);

    /* Settings table colors */
    --color-background-notification-table-thead: hsl(0deg 0% 0% / 20%);

    /* 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 hsl(0deg 0% 0% / 10%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
        0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
        0 41px 80px 0 hsl(0deg 0% 0% / 20%);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27%23DEDEDE%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath clip-rule=%27evenodd%27 d=%27M3.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%27/%3E%3C/svg%3E");

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

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

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

    /* Zulip resizer handle svg */
    --svg-resize-handle: url(files/images/resize-handle-white.svg);
    --recent-view-body-border-width: 0.1875em; /* 3px at 16px/1em */
    }
}

@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(212deg 32% 7%);

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

    /* Text colors */
    --color-text-sender-name: hsl(0deg 0% 100% / 85%);
    --color-text-other-mention: hsl(0deg 0% 100% / 80%);
    --color-text-empty-list-message: hsl(0deg 0% 67%);

    /* Settings table colors */
    --color-background-notification-table-thead: hsl(0deg 0% 0% / 20%);

    /* 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 hsl(0deg 0% 0% / 10%),
        0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
        0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
        0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
        0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
        0 41px 80px 0 hsl(0deg 0% 0% / 20%);
    --icon-chevron-down: url("data:image/svg+xml,%3Csvg width=%2716%27 height=%2716%27 viewBox=%270 0 16 16%27 fill=%27%23DEDEDE%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath clip-rule=%27evenodd%27 d=%27M3.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%27/%3E%3C/svg%3E");

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

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

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

    /* Zulip resizer handle svg */
    --svg-resize-handle: url(files/images/resize-handle-white.svg);
    --recent-view-body-border-width: 0.1875em; /* 3px at 16px/1em */
    }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/tooltips.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
[data-tippy-root] {
    /* Since tooltip elements are sometimes inside elements
     * which have different font-family, we force font-family
     * for tooltips here.
     */
    font-family: "Source Sans 3 VF", sans-serif !important;
    overflow-wrap: anywhere;
    /* Contains stylistic variant of upper-case character "I" in Source Sans 3 */
    font-feature-settings: "ss01" on;

    /* Affects all tippy tooltips not using any theme. */
}
[data-tippy-root] .tippy-box:not([data-theme]) {
        background: var(--color-background-tippy-box);
        border-radius: 5px;
        /* 14px at 14px/1em */
        font-size: var(--base-font-size-px);
        /* 25px at 14px/1em */
        min-height: 1.7857em;
        box-sizing: border-box;
    }
[data-tippy-root] .tippy-box:not([data-theme]) .tippy-content {
            box-sizing: inherit;
            display: flex;
            align-items: center;
            padding: 5px 10px;
            /* 14px at 14px/1em */
            font-size: var(--base-font-size-px);
            /* 20px at 14px/1em */
            line-height: 1.4286em;
            /* Don't inherit font-weight when
               a Tippy attaches to a parent */
            font-weight: normal;
            color: hsl(0deg 0% 100%);
        }
[data-tippy-root] .tippy-box:not([data-theme]) .tippy-arrow::before {
            /* This affects the arrow for tooltips and doesn't have any impact on arrows for popovers.
             * The transform property scales down the size of the arrow, giving it a thinner appearance.
             * https://atomiks.github.io/tippyjs/v6/themes/#changing-the-arrow-size
             */
            transform: scale(0.75);
        }
[data-tippy-root] .tippy-box:not([data-theme]) .tooltip-inner-content {
            /* 17px at 14px/1em */
            line-height: 1.2143em;
        }
[data-tippy-root] .tippy-box[data-placement^="top"]:not([data-theme]) > .tippy-arrow::before {
            border-top-color: var(--color-background-tippy-box);
        }
[data-tippy-root] .tippy-box[data-placement^="bottom"]:not([data-theme]) > .tippy-arrow::before {
            border-bottom-color: var(--color-background-tippy-box);
        }
[data-tippy-root] .tippy-box[data-placement^="left"]:not([data-theme]) > .tippy-arrow::before {
            border-left-color: var(--color-background-tippy-box);
        }
[data-tippy-root] .tippy-box[data-placement^="right"]:not([data-theme]) > .tippy-arrow::before {
            border-right-color: var(--color-background-tippy-box);
        }
[data-tippy-root] .tippy-arrow::before {
        /* `.tippy-arrow:before` element sometimes
         * inherits the height of the parent, we
         * don't want any height here since we
         * want it to remain an triangle.
         * The bug was only found in Firefox.
         */
        height: 0 !important;
    }
[data-tippy-root] {
    /* If the text in the tooltips stretches to multiple lines,
     * we want the lines to be left-indented and not right-indented
     * by default.
     */
    text-align: left;
}
[data-tippy-root] .tooltip-hotkey-hints {
        box-sizing: inherit;
        display: flex;
        align-self: flex-start;
        margin: 0 -5px 0 10px;
        gap: 4px;
    }
[data-tippy-root] span.tooltip-hotkey-hint {
        border: 1px solid hsl(225deg 100% 84%);
        border-radius: 3px;
        color: hsl(225deg 100% 84%);
        padding: 0 5px;
        text-align: center;
        white-space: nowrap;
    }
[data-tippy-root] .view-channel-tooltip {
        /* This is needed so that the hotkey hints do not
        move to a new line after "View #{channel_name}". */
        display: inline-flex;
    }
[data-tippy-root] .view-channel-tooltip .view-channel-text {
            word-break: break-all;
        }
/* If the reference of the tooltip is went offscreen while scrolling,
       the tooltip will be visible until the scrolling stops. Popper adds
       `data-reference-hidden` attribute to those tooltips whole reference is
       hidden. Since tooltips have `absolute` position, they can occupy scroll
       space offscreen and cause document to have the wrong scroll height.
       Setting `display: none` makes sure it doesn't occupy any offscreen space.

       NOTE: This data attribute has changed each time in the past 3 releases and
       if we upgrade tippy from v6, we should check if this attribute is still valid.

       See https://github.com/atomiks/tippyjs/issues/555 for some discussion on this.
    */
[data-tippy-root] [data-reference-hidden]:not(.show-when-reference-hidden) {
        display: none;
    }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/buttons.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
.action-button {
    position: relative;
    display: flex;
    gap: 0.75ch;
    justify-content: center;
    align-items: center;
    line-height: 1.25;
    font-size: var(--base-font-size-px);
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.02ch;
    padding: 0.25em 0.625em;
    color: var(--color-text-neutral-subtle-action-button);
    background-color: var(--color-background-neutral-subtle-action-button);
    border-radius: 4px;
    white-space: nowrap;
    -webkit-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 {
        background-color: var(
            --color-background-neutral-subtle-action-button-hover
        );
        transition: 0.1s ease-out;
        transition-property: background-color, clip-path;
    }

.action-button:active {
        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 */
        outline: var(--outline-width-button-focus) solid
            var(--color-outline-button-focus) !important;
        outline-offset: var(--outline-offset-button-focus);
        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 {
    color: var(--color-text-neutral-solid-action-button);
    background-color: var(--color-background-neutral-solid-action-button);
}
.action-button-solid-neutral:hover,.action-button-solid-neutral:focus-visible {
        background-color: var(
            --color-background-neutral-solid-action-button-hover
        );
    }
.action-button-solid-neutral:active {
        background-color: var(
            --color-background-neutral-solid-action-button-active
        );
    }

.action-button-subtle-neutral {
    color: var(--color-text-neutral-subtle-action-button);
    background-color: var(--color-background-neutral-subtle-action-button);
    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 {
        background-color: var(
            --color-background-neutral-subtle-action-button-hover
        );
    }

.action-button-subtle-neutral:active {
        background-color: var(
            --color-background-neutral-subtle-action-button-active
        );
    }

.action-button-text-neutral {
    color: var(--color-text-neutral-text-action-button);
    background-color: transparent;
}

.action-button-text-neutral:hover,.action-button-text-neutral:focus-visible {
        background-color: var(
            --color-background-neutral-text-action-button-hover
        );
    }

.action-button-text-neutral:active {
        background-color: var(
            --color-background-neutral-text-action-button-active
        );
    }

/* Action buttons -- Brand Intent */
.action-button-solid-brand {
    color: var(--color-text-brand-solid-action-button);
    background-color: var(--color-background-brand-solid-action-button);
}
.action-button-solid-brand:hover,.action-button-solid-brand:focus-visible {
        background-color: var(
            --color-background-brand-solid-action-button-hover
        );
    }
.action-button-solid-brand:active {
        background-color: var(
            --color-background-brand-solid-action-button-active
        );
    }

.action-button-subtle-brand {
    color: var(--color-text-brand-subtle-action-button);
    background-color: var(--color-background-brand-subtle-action-button);
    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 {
        background-color: var(
            --color-background-brand-subtle-action-button-hover
        );
    }

.action-button-subtle-brand:active {
        background-color: var(
            --color-background-brand-subtle-action-button-active
        );
    }

.action-button-text-brand {
    color: var(--color-text-brand-text-action-button);
    background-color: transparent;
}

.action-button-text-brand:hover,.action-button-text-brand:focus-visible {
        background-color: var(
            --color-background-brand-text-action-button-hover
        );
    }

.action-button-text-brand:active {
        background-color: var(
            --color-background-brand-text-action-button-active
        );
    }

/* Action buttons -- Info Intent */
.action-button-solid-info {
    color: var(--color-text-info-solid-action-button);
    background-color: var(--color-background-info-solid-action-button);
}
.action-button-solid-info:hover,.action-button-solid-info:focus-visible {
        background-color: var(
            --color-background-info-solid-action-button-hover
        );
    }
.action-button-solid-info:active {
        background-color: var(
            --color-background-info-solid-action-button-active
        );
    }

.action-button-subtle-info {
    color: var(--color-text-info-subtle-action-button);
    background-color: var(--color-background-info-subtle-action-button);
    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 {
        background-color: var(
            --color-background-info-subtle-action-button-hover
        );
    }

.action-button-subtle-info:active {
        background-color: var(
            --color-background-info-subtle-action-button-active
        );
    }

.action-button-text-info {
    color: var(--color-text-info-text-action-button);
    background-color: transparent;
}

.action-button-text-info:hover,.action-button-text-info:focus-visible {
        background-color: var(--color-background-info-text-action-button-hover);
    }

.action-button-text-info:active {
        background-color: var(
            --color-background-info-text-action-button-active
        );
    }

/* Action buttons -- Success Intent */
.action-button-solid-success {
    color: var(--color-text-success-solid-action-button);
    background-color: var(--color-background-success-solid-action-button);
}
.action-button-solid-success:hover,.action-button-solid-success:focus-visible {
        background-color: var(
            --color-background-success-solid-action-button-hover
        );
    }
.action-button-solid-success:active {
        background-color: var(
            --color-background-success-solid-action-button-active
        );
    }

.action-button-subtle-success {
    color: var(--color-text-success-subtle-action-button);
    background-color: var(--color-background-success-subtle-action-button);
    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 {
        background-color: var(
            --color-background-success-subtle-action-button-hover
        );
    }

.action-button-subtle-success:active {
        background-color: var(
            --color-background-success-subtle-action-button-active
        );
    }

.action-button-text-success {
    color: var(--color-text-success-text-action-button);
    background-color: transparent;
}

.action-button-text-success:hover,.action-button-text-success:focus-visible {
        background-color: var(
            --color-background-success-text-action-button-hover
        );
    }

.action-button-text-success:active {
        background-color: var(
            --color-background-success-text-action-button-active
        );
    }

/* Action buttons -- Warning Intent */
.action-button-solid-warning {
    color: var(--color-text-warning-solid-action-button);
    background-color: var(--color-background-warning-solid-action-button);
}
.action-button-solid-warning:hover,.action-button-solid-warning:focus-visible {
        background-color: var(
            --color-background-warning-solid-action-button-hover
        );
    }
.action-button-solid-warning:active {
        background-color: var(
            --color-background-warning-solid-action-button-active
        );
    }

.action-button-subtle-warning {
    color: var(--color-text-warning-subtle-action-button);
    background-color: var(--color-background-warning-subtle-action-button);
    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 {
        background-color: var(
            --color-background-warning-subtle-action-button-hover
        );
    }

.action-button-subtle-warning:active {
        background-color: var(
            --color-background-warning-subtle-action-button-active
        );
    }

.action-button-text-warning {
    color: var(--color-text-warning-text-action-button);
    background-color: transparent;
}

.action-button-text-warning:hover,.action-button-text-warning:focus-visible {
        background-color: var(
            --color-background-warning-text-action-button-hover
        );
    }

.action-button-text-warning:active {
        background-color: var(
            --color-background-warning-text-action-button-active
        );
    }

/* Action buttons -- Danger Intent */
.action-button-solid-danger {
    color: var(--color-text-danger-solid-action-button);
    background-color: var(--color-background-danger-solid-action-button);
}
.action-button-solid-danger:hover,.action-button-solid-danger:focus-visible {
        background-color: var(
            --color-background-danger-solid-action-button-hover
        );
    }
.action-button-solid-danger:active {
        background-color: var(
            --color-background-danger-solid-action-button-active
        );
    }

.action-button-subtle-danger {
    color: var(--color-text-danger-subtle-action-button);
    background-color: var(--color-background-danger-subtle-action-button);
    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 {
        background-color: var(
            --color-background-danger-subtle-action-button-hover
        );
    }

.action-button-subtle-danger:active {
        background-color: var(
            --color-background-danger-subtle-action-button-active
        );
    }

.action-button-text-danger {
    color: var(--color-text-danger-text-action-button);
    background-color: transparent;
}

.action-button-text-danger:hover,.action-button-text-danger:focus-visible {
        background-color: var(
            --color-background-danger-text-action-button-hover
        );
    }

.action-button-text-danger:active {
        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: var(--base-font-size-px);
    background-color: transparent; /* Override button default background color */
    padding: 0.375em;
    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 */
        outline: var(--outline-width-button-focus) solid
            var(--color-outline-button-focus) !important;
        outline-offset: var(--outline-offset-button-focus);
        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 {
    color: var(--color-text-neutral-icon-button);
}

.icon-button-neutral:hover,.icon-button-neutral:focus-visible {
        color: var(--color-text-neutral-icon-button-hover);
    }

.icon-button-neutral:active {
        color: var(--color-text-neutral-icon-button-active);
    }

.icon-button-neutral.icon-button-square:hover,.icon-button-neutral.icon-button-square:focus-visible {
            background-color: var(
                --color-background-neutral-icon-button-square-hover
            );
        }

.icon-button-neutral.icon-button-square:active {
            color: var(--color-text-neutral-icon-button-square-active);
            background-color: var(
                --color-background-neutral-icon-button-square-active
            );
        }

.icon-button-brand {
    color: var(--color-text-brand-icon-button);
}

.icon-button-brand:hover,.icon-button-brand:focus-visible {
        color: var(--color-text-brand-icon-button-hover);
    }

.icon-button-brand:active {
        color: var(--color-text-brand-icon-button-active);
    }

.icon-button-brand.icon-button-square:hover,.icon-button-brand.icon-button-square:focus-visible {
            background-color: var(
                --color-background-brand-icon-button-square-hover
            );
        }

.icon-button-brand.icon-button-square:active {
            color: var(--color-text-brand-icon-button-square-active);
            background-color: var(
                --color-background-brand-icon-button-square-active
            );
        }

.icon-button-info {
    color: var(--color-text-info-icon-button);
}

.icon-button-info:hover,.icon-button-info:focus-visible {
        color: var(--color-text-info-icon-button-hover);
    }

.icon-button-info:active {
        color: var(--color-text-info-icon-button-active);
    }

.icon-button-info.icon-button-square:hover,.icon-button-info.icon-button-square:focus-visible {
            background-color: var(
                --color-background-info-icon-button-square-hover
            );
        }

.icon-button-info.icon-button-square:active {
            color: var(--color-text-info-icon-button-square-active);
            background-color: var(
                --color-background-info-icon-button-square-active
            );
        }

.icon-button-success {
    color: var(--color-text-success-icon-button);
}

.icon-button-success:hover,.icon-button-success:focus-visible {
        color: var(--color-text-success-icon-button-hover);
    }

.icon-button-success:active {
        color: var(--color-text-success-icon-button-active);
    }

.icon-button-success.icon-button-square:hover,.icon-button-success.icon-button-square:focus-visible {
            background-color: var(
                --color-background-success-icon-button-square-hover
            );
        }

.icon-button-success.icon-button-square:active {
            color: var(--color-text-success-icon-button-square-active);
            background-color: var(
                --color-background-success-icon-button-square-active
            );
        }

.icon-button-warning {
    color: var(--color-text-warning-icon-button);
}

.icon-button-warning:hover,.icon-button-warning:focus-visible {
        color: var(--color-text-warning-icon-button-hover);
    }

.icon-button-warning:active {
        color: var(--color-text-warning-icon-button-active);
    }

.icon-button-warning.icon-button-square:hover,.icon-button-warning.icon-button-square:focus-visible {
            background-color: var(
                --color-background-warning-icon-button-square-hover
            );
        }

.icon-button-warning.icon-button-square:active {
            color: var(--color-text-warning-icon-button-square-active);
            background-color: var(
                --color-background-warning-icon-button-square-active
            );
        }

.icon-button-danger {
    color: var(--color-text-danger-icon-button);
}

.icon-button-danger:hover,.icon-button-danger:focus-visible {
        color: var(--color-text-danger-icon-button-hover);
    }

.icon-button-danger:active {
        color: var(--color-text-danger-icon-button-active);
    }

.icon-button-danger.icon-button-square:hover,.icon-button-danger.icon-button-square:focus-visible {
            background-color: var(
                --color-background-danger-icon-button-square-hover
            );
        }

.icon-button-danger.icon-button-square:active {
            color: var(--color-text-danger-icon-button-square-active);
            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: unset;
        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;
    }

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/inputs.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
.input-active-styles {
    color: var(--color-text-input);
    background-color: var(--color-background-input-focus);
    outline-color: var(--color-outline-input-focus);
}

.input-element-wrapper {
    display: grid;
    grid-template:
        /* We present a variable to set a uniform row height when needed;
           otherwise, we fall back to the sensible `auto` value. */
        [input-element-start] "icon-starting-offset input-icon icon-content-gap content button-content-gap input-button button-ending-offset" var(
            --input-element-row-height,
            auto
        )
        [input-element-end] / [input-element-start] var(
            --input-icon-starting-offset
        )
        var(--input-icon-width) var(--input-icon-content-gap) minmax(0, 1fr)
        var(--input-button-content-gap) var(--input-button-width) var(
            --input-button-ending-offset
        )
        [input-element-end];
    align-items: center;
}

.input-element-wrapper .input-element {
        grid-area: input-element;
        box-sizing: border-box;
        padding: 0.25em 0.5em; /* 4px at 16px/1em and 8px at 16px/1em */
        font-size: var(--base-font-size-px);
        font-family: inherit;
        line-height: 1.25;
        text-overflow: ellipsis;
        color: var(--color-text-input);
        background: var(--color-background-input);
        outline: 1px solid var(--color-outline-input);
        outline-offset: -1px;
        border: none;
        border-radius: 4px;
        transition: 0.1s linear;
        transition-property: outline-color, box-shadow;
    }

.input-element-wrapper .input-element:hover {
            outline-color: var(--color-outline-input-hover);
        }

.input-element-wrapper .input-element:focus {
    color: var(--color-text-input);
    background-color: var(--color-background-input-focus);
    outline-color: var(--color-outline-input-focus);
        }

.input-element-wrapper .input-element:focus {

            box-shadow: 0 0 5px var(--color-box-shadow-input-focus);
        }

.input-element-wrapper.has-input-icon .input-element {
        padding-left: calc(
            var(--input-icon-starting-offset) + var(--input-icon-width) +
                var(--input-icon-content-gap)
        );
    }

.input-element-wrapper.has-input-button .input-element {
        padding-right: calc(
            var(--input-button-content-gap) + var(--input-button-width) +
                var(--input-button-ending-offset)
        );
    }

/* Special styles for input with pills */

.input-element-wrapper.has-input-pills .pill-container .input {
            flex-grow: 1;
            /* Override default values in web/styles/input_pill.css  */
            padding: 0;
            line-height: inherit;
        }

.input-element-wrapper.has-input-pills .pill-container .input:empty::before {
                color: var(--color-text-placeholder);
                content: attr(data-placeholder);
            }

.input-element-wrapper.has-input-pills .pill-container .pill {
            height: 1.25em; /* 20px at 16px/1em */
        }

.input-element-wrapper.has-input-pills .pill-container:has(.input:hover) {
            outline-color: var(--color-outline-input-hover);
        }

.input-element-wrapper.has-input-pills .pill-container:has(.input:focus) {
    color: var(--color-text-input);
    background-color: var(--color-background-input-focus);
    outline-color: var(--color-outline-input-focus);
        }

.input-element-wrapper.has-input-pills .pill-container:has(.input:focus) {

            box-shadow: 0 0 5px var(--color-box-shadow-input-focus);
        }

.input-icon {
    grid-area: input-icon;
    /* Matching the color of input icon on the left to
       that of a neutral icon button gives us a consistent
       look when paired with the input button on the right. */
    color: var(--color-text-neutral-icon-button);
    /* We need to set the z-index, since the input icon
       comes before the input element in the DOM, but we
       want to display it over the input element in the UI. */
    z-index: 1;
    pointer-events: none;
}

.input-button {
    grid-area: input-button;
    padding: 0.25em; /* 4px at 16px/1em */
}

/* We use the `input` tag in the selector to avoid conflicts
       with the pill containing counterpart, which uses a `contenteditable`
       div instead of an input element, and thus doesn't support the
       placeholder pseudo-classes. */

.filter-input input.input-element:placeholder-shown {
            /* In case of filter inputs, when the input field
            is empty, we hide the input button and adjust
            the right padding to compensate for the same. */
            padding-right: 0.5em;
        }

.filter-input input.input-element:placeholder-shown  ~ .input-close-filter-button {
                visibility: hidden;
            }

.filter-input input.input-element:not(:placeholder-shown) {
    color: var(--color-text-input);
    background-color: var(--color-background-input-focus);
    outline-color: var(--color-outline-input-focus);
        }

/* Specific styles for filter input with pills */

.filter-input.has-input-pills:not(:has(.pill)):has(.input:empty) .input-element {
                padding-right: 0.5em;
            }

.filter-input.has-input-pills:not(:has(.pill)):has(.input:empty) .input-close-filter-button {
                visibility: hidden;
            }

.filter-input.has-input-pills:has(.pill):not(:has(.input:empty)) .input-element {
    color: var(--color-text-input);
    background-color: var(--color-background-input-focus);
    outline-color: var(--color-outline-input-focus);
        }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/banners.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
.banner-wrapper {
    container: banner / inline-size;
}

.banner {
    box-sizing: border-box;
    display: grid;
    grid-template: var(--banner-grid-template-rows) / var(
            --banner-grid-template-columns
        );
    grid-template-areas: var(--banner-grid-template-areas);
    place-items: start;
    border: 1px solid;
    border-radius: 6px;
}

.banner-link {
    color: var(--color-text-link);
    -webkit-text-decoration: none;
    text-decoration: none;
    text-decoration-color: var(--color-text-link-decoration);
}

.banner-link:hover {
        color: var(--color-text-link-hover);
        text-decoration-color: var(--color-text-link-decoration-hover);
    }

.banner-link:active {
        color: var(--color-text-link-active);
        text-decoration-color: currentcolor;
    }

.banner-content {
    grid-area: banner-content;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    gap: 0 0.625em; /* 10px at 16px/1em */
}

.banner-label {
    /* We allow the banner label to grow and shrink, and set
       the flex basis to 60% of the query container's width.
       When the width of the banner label goes below this
       flex basis value, the banner action buttons are wrapped
       on to the next line.  */
    flex: 1 1 60cqw;
    /* The padding and line-height values for the banner label
       are identical to those of the action buttons', to match
       the height of both of these elements. This is required to
       align the banner children elements vertically, since we
       cannot use flexbox center alignment as we also need to
       account for the UI when the banner has a muli-line label.
    */
    padding: 0.25em 0; /* 4px at 16px/1em */
    line-height: 1.25; /* 20px at 16px/1em */
    text-align: start;
}

.banner-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em; /* 8px at 16px/1em */
}

.banner-action-buttons:empty {
    display: none;
}

.banner-close-button {
    display: flex;
    grid-area: banner-close-button;
    padding: 0.6875em; /* 11px at 16px/1em */
    margin-left: 0.3125em; /* 5px at 16px/1em */
}

.banner-close-button:focus-visible {
        outline-offset: -2px;
    }

.navbar-alert-banner {
    border: unset;
    border-bottom: 1px solid;
    border-radius: 0;
    place-items: start center;
}

.navbar-alert-banner .banner-content {
        justify-content: center;
        flex-wrap: nowrap;
    }

.navbar-alert-banner .banner-label {
        /* Reset to initial value */
        flex: 0 1 auto;
    }

.navbar-alert-banner .banner-action-buttons {
        flex-wrap: nowrap;
    }

/* This utility class defines the structure of the medium-type
   navbar banners where the banner action buttons are placed
   below the banner label. This utility class is required since
   unlike the normal banners, the navbar counterparts have
   horizontally centered elements, wherein the flex-basis logic
   won't apply and we need to manually apply these properties
   based on the container size queries below. */
.navbar-alert-medium-banner .banner-content {
        flex-direction: column;
        align-items: center;
    }
.navbar-alert-medium-banner .banner-label {
        text-align: center;
    }
.navbar-alert-medium-banner .banner-action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

@container banner (width >= 44em) and (width < 63em) {
    .navbar-alert-banner[data-process="desktop-notifications"] .banner-content {
        flex-direction: column;
        align-items: center;
    }
    .navbar-alert-banner[data-process="desktop-notifications"] .banner-label {
        text-align: center;
    }
    .navbar-alert-banner[data-process="desktop-notifications"] .banner-action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@container banner (width < 44em) {
    .navbar-alert-banner .banner-content {
        flex-direction: column;
        align-items: center;
    }
    .navbar-alert-banner .banner-label {
        text-align: center;
    }
    .navbar-alert-banner .banner-action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@container banner (width < 25em) {
    .banner-content {
        flex-direction: column;
    }

    .banner-label {
        /* Reset to initial value */
        flex: 0 1 auto;
    }

    .banner-action-buttons {
        flex-direction: column;
        width: 100%;
    }
}

.banner-neutral {
    background-color: var(--color-background-neutral-banner);
    color: var(--color-text-neutral-banner);
    border-color: var(--color-border-neutral-banner);
}

.banner-brand {
    background-color: var(--color-background-brand-banner);
    color: var(--color-text-brand-banner);
    border-color: var(--color-border-brand-banner);
}

.banner-info {
    background-color: var(--color-background-info-banner);
    color: var(--color-text-info-banner);
    border-color: var(--color-border-info-banner);
}

.banner-success {
    background-color: var(--color-background-success-banner);
    color: var(--color-text-success-banner);
    border-color: var(--color-border-success-banner);
}

.banner-warning {
    background-color: var(--color-background-warning-banner);
    color: var(--color-text-warning-banner);
    border-color: var(--color-border-warning-banner);
}

.banner-danger {
    background-color: var(--color-background-danger-banner);
    color: var(--color-text-danger-banner);
    border-color: var(--color-border-danger-banner);
}

@keyframes popup-banner-fadeIn {
    0% {
        opacity: 0;
        transform: translateY(
            calc(-1 * var(--popup-banner-translate-y-distance))
        );
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popup-banner-fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(
            calc(-1 * var(--popup-banner-translate-y-distance))
        );
    }
}

.popup-banner-animations {
    animation-name: popup-banner-fadeIn;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.popup-banner-animations.fade-out {
        animation-name: popup-banner-fadeOut;
    }

.popup-banner {
    animation-name: popup-banner-fadeIn;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.popup-banner.fade-out {
        animation-name: popup-banner-fadeOut;
}

.popup-banner {

    width: 100%;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/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. */
            border: 1px solid
                var(--color-border-rendered-checkbox, hsl(0deg 0% 0% / 60%));
            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: var(
                --svg-url-rendered-checkbox,
                url(files/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(0deg 0% 0%);
        box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 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 {
    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(0deg 0% 20%);
        outline: 5px auto -webkit-focus-ring-color;
        outline-offset: -2px;
        transition: none;
    }

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/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;
    border: 1px solid var(--color-kbd-border);
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-kbd-background);
    color: var(--color-kbd-text);
    margin: 0.25em 0.1em;
    padding: 0.2em 0.4em;
    text-shadow: 0 1px 0 hsl(0deg 0% 100%);
    /* Prevent selection */
    -webkit-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 (width < 576px) {
    .hide-sm {
        display: none !important;
    }
}

.light {
    font-weight: 300;
}

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

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

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

.box-shadow {
    box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
}

.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 {
    color: var(--color-text-placeholder);
    opacity: 1;
}

textarea::placeholder,
input::placeholder {
    color: var(--color-text-placeholder);
    opacity: 1;
}

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

/* -- tab switcher -- */

.tab-switcher {
    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;
        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 var(--color-outline-focus);
            outline-offset: -2px;
        }

.tab-switcher .ind-tab:not(.selected) {
            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;
            background-color: var(
                --color-background-tab-switcher-ind-tab-selected
            );
            color: hsl(0deg 0% 100%);
            border: 1px solid var(--color-border-tab-switcher-ind-tab-selected);
            z-index: 2;
        }

.tab-switcher .ind-tab.disabled {
            cursor: default;
            color: var(--color-text-tab-switcher-ind-tab-disabled);
            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: initial;
            vertical-align: middle;
        }

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

    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);
    }

.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;
    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 {
    background-color: var(--color-background-white-box);
    border: 1px solid hsl(0deg 0% 87%);
}

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

.guest-avatar::after {
        content: " ";
        background-color: hsl(0deg 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,
.invite-stream-notice {
    position: relative;
    display: block;
    background-color: var(--color-background-tip);
    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(0deg 0% 40%);
}

.tip::before {
        display: inline;

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

.invite-stream-notice::before {
        display: inline;

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

.tip {
    margin: 10px 0;
}

.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: 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;
        }

.invite-stream-notice {
    margin-bottom: 20px;
}

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

.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;
    background-color: var(--color-background-unread-counter);
    color: hsl(0deg 0% 100%);
}

/* Unread-count attention levels. */

.prominent-count {
    background-color: var(--color-background-unread-counter-prominent);
    color: var(--color-unread-counter-prominent);
}

.normal-count {
    background-color: var(--color-background-unread-counter-normal);
    color: var(--color-unread-counter-normal);
    box-shadow: var(--box-shadow-unread-counter-normal);
}

.quiet-count {
    background-color: var(--color-background-unread-counter-quiet);
    color: var(--color-unread-counter-quiet);
    font-weight: 475;
}

.unread_mention_info:not(:empty) {
    margin-right: 5px;
    margin-left: 2px;
    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(0deg 0% 100%);
    transition: 80ms linear;
    transition-property: background-color, box-shadow;
    box-shadow: none;
    /* This color just passes WCAG AA */
    background-color: hsl(240deg 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(240deg 41% 50%);
        box-shadow: 0 1px 4px hsl(0deg 0% 0% / 30%);
    }

.animated-purple-button:focus {
        background-color: hsl(240deg 41% 50%);
        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;
    background-color: var(--color-background-animated-button);
    color: hsl(0deg 0% 0%);
    border-radius: 4px;
}

.color_animated_button .color-animated-button-text {
        color: var(--color-animated-button-text);
    }

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

.color_animated_button:hover .color-animated-button-text {
            color: hsl(0deg 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 hsl(0deg 0% 0% / 20%) !important;
            border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important;
        }

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

.table-striped thead {
        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: 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;
            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 {
            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 {
        border-top: 1px solid var(--color-border-table-striped);
    }

.table-bordered {
    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 {
        border-left: 1px solid var(--color-border-table-bordered);
        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: 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: var(--inline-decorated-channel-name-padding-left);
}

.inline-decorated-channel-name .decorated-channel-name {
        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 (width < 768px) {
.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;
            text-transform: uppercase;
        }
.overlay-messages-container .overlay-messages-header .exit {
            font-weight: 400;
            position: absolute;
            top: 10px;
            right: 10px;
            color: hsl(0deg 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(0deg 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);
}
.overlay-messages-container.drafts-container .overlay-messages-list {
        /* We unset the `overflow` value so SimpleBar
           can manage scrolling. */
        overflow: unset;
        /* We don't need to set a height value; the
           1fr grid row will occupy the available height. */
        height: auto;
        /* 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 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;
            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 */
            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: max-content;
                overflow-wrap: unset;
            }

.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(170deg 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(357deg 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: var(--box-shadow-overlay);
}

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

.dropdown-widget-button {
    background-color: var(--color-background-dropdown-widget-button);
    padding: 4px 6px;
    border: 1px solid var(--color-border-dropdown-widget-button);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    outline: none;
    color: var(--color-text-default);
    width: var(--width-dropdown-widget-button);
    font-family: inherit;
    font-size: inherit;
}

.dropdown-widget-button:disabled {
        cursor: not-allowed;
        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;
    color: var(--color-text-default);
    font-size: 1.5em;
    padding: 3em 1em !important;
    text-align: center;
}

.filter_text_input {
    padding: var(--input-vertical-padding) var(--input-horizontal-padding);
    color: var(--color-text-default);
    border: var(--input-border-width) solid hsl(0deg 0% 80%);
    transition:
        border-color linear 0.2s,
        box-shadow linear 0.2s;
    box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
    border-radius: 4px;
    font-family: inherit;
}

.filter_text_input:focus {
        border-color: hsl(206deg 80% 62% / 80%);
        outline: 0;
        box-shadow:
            inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
            0 0 8px hsl(206deg 80% 62% / 60%);
    }

/**
 * 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;
    gap: var(--grid-gap-tab-picker);
    box-sizing: border-box;
    border-radius: 5px;
    /* Using max-content ensures equal width tabs. */
    min-width: max-content;
    padding: 1px;
    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: var(--color-icon-purple);
        }
.tab-picker .tab-option:not(:checked) + .tab-option-content:hover {
            background-color: var(
                --color-background-tab-picker-tab-option-hover
            );
        }
.tab-picker .tab-option:not(:checked) + .tab-option-content:focus-visible {
            background-color: var(
                --color-background-tab-picker-tab-option-hover
            );
        }
.tab-picker .tab-option:not(:checked) + .tab-option-content:active {
            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;
        inset: 0;
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        /* Move along X-axis: own width + gap between two tabs. */
        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;
        border: 1px solid var(--color-outline-tab-picker-tab-option);
        border-radius: 4px;
        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 {
            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% + var(--grid-gap-tab-picker)) *
                        var(--tab-selected-tab-picker)
                )
            );
        }

.copy-button {
    display: flex;
    border-radius: 4px;
    color: var(--color-copy-button);
    /* 2px at 16px/1em */
    padding: 0.125em;
    cursor: pointer;
}

.copy-button:hover,.copy-button:focus-visible {
        color: var(--color-copy-button-hover);
    }

.copy-button:active {
        color: var(--color-copy-button-active);
    }

.copy-button.copy-button-square:hover,.copy-button.copy-button-square :focus-visible {
            background-color: var(--color-copy-button-square-bg-hover);
        }

.copy-button.copy-button-square:active {
            background-color: var(--color-copy-button-square-bg-active);
            color: var(--color-copy-button-square-active);
        }

.copy-button.copy-button-success {
        color: var(--color-copy-button-success);
    }

.text-success {
    color: hsl(120.91deg 32.04% 40.39%);
}

.text-error {
    color: hsl(1.06deg 44.66% 50.39%);
}

.sticky-bottom-option-button {
    width: 100%;
    display: flex;
    position: relative;
    padding: 7px 14px;
    background-color: var(--color-background-zulip-button);
    justify-content: flex-start;
    color: var(--color-dropdown-item);
    border: none;
    border-top: 1px solid var(--color-border-zulip-button);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    font-family: inherit;
    font-size: inherit;
}

.sticky-bottom-option-button:hover {
        color: var(--color-dropdown-item);
        background-color: var(--background-color-active-dropdown-item);
    }

.sticky-bottom-option-button:focus,.sticky-bottom-option-button.current_selection {
        background-color: var(
            --background-color-current-selection-dropdown-item
        );
        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: 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. */
    border-color: var(--color-invalid-input-border) !important;
}
input.invalid-input:focus {
        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: 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: var(--line-clamp-value, 2);
    text-overflow: ellipsis;
    overflow: hidden;
}

.info-density-controls .button-group {
        border-radius: 5px;
        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;
            background-color: var(--color-background-popover);
            padding: 0.25em 0.4375em;
            display: inline-flex;
            align-items: center;
            vertical-align: unset;
            justify-content: center;
            margin: 0;
            font-size: inherit;
        }

.info-density-controls .button-group .info-density-button:hover:not(:disabled) {
                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;
                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: unset;
        }

#uppy-editor .uppy-c-btn:focus-visible {
            background-color: hsl(0deg 0% 100% / 50%);
        }

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

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

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

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/rendered_markdown.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* We have Unicode list-style-type values below.  @charset is a
   special directive which webpack will relocate to the first bytes of
   the generated output bundle, so browsers decode the bytes correctly. */
@charset "UTF-8";

/* We use a custom counter here for Safari to
   get better control of its counter positioning.
   Because Safari does not recognize `content`
   properties on `::marker`, the style here better
   approximates the same styles set on `::marker`
   below. */
@counter-style numbers {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    suffix: ".";
}

.rendered_markdown p {
        margin: 0 0 var(--markdown-interelement-space-px);
    }

.rendered_markdown p:has( + ul, + ol) {
            /* When a paragraph is immediately followed
               by a list sibling, we reduce the paragraph's
               ordinary bottom space by half. */
            margin-bottom: calc(var(--markdown-interelement-space-px) / 2);
        }

/* The spacing between two paragraphs is double the usual value.
       We coordinate this spacing matches so that it matches the
       spacing between paragraphs in two consecutive 1-line messages. */

.rendered_markdown p + p {
        margin-top: var(--markdown-interelement-doubled-space-px);
    }

.rendered_markdown ul {
        margin: 0 0 var(--markdown-interelement-space-px) 0;
        /* Because browsers use inline padding, we set the
           same property here to offset bullets. */
        padding-inline-start: 1.1ch;
        /* By setting Unicode characters of our own, we
           gain better, cross-browser alignment of bullets. */
        list-style-type: "•";
    }

.rendered_markdown ul ul {
            list-style-type: "◦";
        }

.rendered_markdown ul ul ul {
                list-style-type: "▪︎";
            }

.rendered_markdown ul > li {
            /* This aligns bullets to roughly the
               center of a single-digit counter.
               11.2px at 16px/1em */
            padding-inline-start: 0.7em;
        }

.rendered_markdown ul > li::marker {
            /* This is an eyeballed value, but it makes the
               otherwise diminutive markers specified above
               both larger *and* better vertically centered. */
            font-size: 1.3em;
            /* We do not want the line-height for the item text
               affected by the larger font-size, though. So we
               zero it out. */
            line-height: 0;
        }

.rendered_markdown ol {
        /* For the sake of Safari, we reference the `numbers`
           counter defined on `@counter-style` above. */
        list-style: numbers;
        /* To preserve the `start` attribute on lists that
           begin with a number other than 1, we update the
           `counter-reset` in postprocess_content.ts. */
        counter-reset: count;
        margin: 0 0 var(--markdown-interelement-space-px) 0;
        /* Because browsers use inline padding, we set the
           same here to offset the counters. */
        padding-inline-start: 2.1ch;
    }

.rendered_markdown ol > li {
            counter-increment: count 1;
            /* 3.2px at 16px/1em */
            padding-inline-start: 0.2em;
        }

.rendered_markdown ol > li::marker {
            content: counter(count, decimal) ". ";
        }

/* To avoid cutting off the focus ring on links, we set
       padding on first children most likely to take links.
       We account for this extra space on `.message_content`. */

.rendered_markdown > p:first-child,.rendered_markdown > ul:first-child,.rendered_markdown > ol:first-child {
        padding-top: var(--message-box-link-focus-ring-block-padding);
    }

/* We set margin according to the length of the longest list counter.
       The values here keep the counters flush left, just like paragraph
       text. */

.rendered_markdown .counter-length-1 {
        padding-inline-start: 2.1ch;
    }

.rendered_markdown .counter-length-2 {
        padding-inline-start: 3.1ch;
    }

.rendered_markdown .counter-length-3 {
        padding-inline-start: 4.1ch;
    }

.rendered_markdown .counter-length-4 {
        padding-inline-start: 5.1ch;
    }

.rendered_markdown .counter-length-5 {
        padding-inline-start: 6.1ch;
    }

.rendered_markdown .counter-length-6 {
        padding-inline-start: 7.1ch;
    }

.rendered_markdown hr {
        border-bottom: 1px solid hsl(0deg 0% 87%);
        border-top: 1px solid hsl(0deg 0% 87%);
        /* Override Bootstrap with doubled interelement space */
        margin: calc(var(--markdown-interelement-space-px) * 2) 0;
    }

/* Headings */

.rendered_markdown h1,.rendered_markdown h2,.rendered_markdown h3,.rendered_markdown h4,.rendered_markdown h5,.rendered_markdown h6 {
        font-weight: 600;
        line-height: 1.4;
        /* Headings take a margin-top because of the pronounced extra
           space they require, but are zeroed out below when they open
           a message. */
        margin-top: 15px;
        margin-bottom: var(--markdown-interelement-space-px);
    }

/* Headings: Ensure that messages that start with a heading don't have
       a weirdly blank area at the very start of the message. */

.rendered_markdown h1:first-child,.rendered_markdown h2:first-child,.rendered_markdown h3:first-child,.rendered_markdown h4:first-child,.rendered_markdown h5:first-child,.rendered_markdown h6:first-child {
        margin-top: 0;
    }

/* We use a modest progression of heading sizes to make them stand out
       from normal next but avoid taking up too much space. */

.rendered_markdown h1 {
        font-size: 1.4em;
    }

.rendered_markdown h2 {
        font-size: 1.3em;
    }

.rendered_markdown h3 {
        font-size: 1.2em;
    }

.rendered_markdown h4 {
        font-size: 1.1em;
    }

.rendered_markdown h5 {
        font-size: 1.05em;
    }

.rendered_markdown h6 {
        font-size: 1em;
    }

/* Formatting for blockquotes */

.rendered_markdown blockquote {
        /* This keeps the blockquote text block
           aligned with list-item text blocks.
           12.4px at 16px/1em */
        padding: 0;
        padding-inline-start: 0.775em;
    }

.rendered_markdown blockquote,.rendered_markdown .message_embed {
        /* We want to keep the border roughly centered
           with bullets and single-digit list markers.
           3.5px at 16px/1em */
        margin: 0 0 var(--markdown-interelement-space-px) 0;
        margin-inline-start: 0.2188em;
        border-inline-start: 4px solid
            var(--color-text-message-blockquote-border);
    }

/* Formatting for Markdown tables */

.rendered_markdown table {
        padding-right: 10px;
        margin: 0 5px var(--markdown-interelement-space-px);
        max-width: fit-content;
        /* The `display: block` property is critical, given the
           current markup, to allowing oversize tables to scroll.
           It's possible that in the future we'll want to wrap
           a `<div>` element around tables and allow it to handle
           overscroll, allowing the table to take its normal
           `display: table` property. */
        display: block;
        overflow-x: auto;
        /* Firefox's devtools will report that this property has
           no effect because of `display: block`, but that is
           incorrect. Without this, cells separate in ways we
           do not want. */
        border-collapse: collapse;
    }

.rendered_markdown thead {
        background-color: var(--color-background-rendered-markdown-thead);
    }

.rendered_markdown tr {
        display: table-row;
        vertical-align: top;
    }

.rendered_markdown tr th {
        border: 1px solid var(--color-border-rendered-markdown-table);
        padding: 4px;
        text-align: left;
    }

.rendered_markdown tr td {
        border: 1px solid var(--color-border-rendered-markdown-table);
        padding: 4px;
    }

/* Emoji; sized to be easily understood while not overwhelming text. */

.rendered_markdown .emoji {
        /* The box for emoji is allowed to be larger than the size of the
           line-height. */
        height: var(--length-line-oversize-block);
        width: var(--length-line-oversize-block);
        /* A negative top and bottom margin adjustment allows emoji
           to size larger than the size of the line, without disturbing
           the surrounding lines of text. */
        margin: var(--length-line-oversize-block-margin-adjust) auto;
        /* We set the alignment programmatically, as an em value.
           Because the negative margins above are equal, top and bottom,
           this vertical offset value works without adjustment for
           oversize emoji blocks. */
        vertical-align: var(--line-fitted-vertical-align-offset-em);
    }

/* We double the size of emoji on emoji-only messages. As there
       is by definition no adjacent text in these messages, there is
       no need to adjust the `margin` or `vertical-align` properties
       declared above. */

.rendered_markdown .emoji-only .emoji {
        height: calc(var(--length-line-oversize-block) * 2);
        width: calc(var(--length-line-oversize-block) * 2);
    }

/* Mentions and alert words */

.rendered_markdown .user-group-mention,.rendered_markdown .user-mention,.rendered_markdown .topic-mention {
        padding: 0 3px;
        border-radius: 3px;
        white-space: nowrap;
        /* Reduce the font-size to reduce the
           footprint of the background highlight. */
        font-size: 0.95em;
    }

.rendered_markdown .mention-content-wrapper {
        /* Restore the font-size to match the rest
           of the message area. */
        font-size: 1.0526em;
    }

.rendered_markdown .user-mention {
        color: var(--color-text-other-mention);
        background-color: var(--color-background-text-direct-mention);
    }

.rendered_markdown .user-mention.user-mention-me {
            color: var(--color-text-self-direct-mention);
            font-weight: 600;
        }

.rendered_markdown .user-mention:hover {
            background-color: var(--color-background-text-hover-direct-mention);
        }

.rendered_markdown .user-mention,.rendered_markdown .user-group-mention {
        /* We have to explicitly mention this for compose box preview
           where cursor is set to not-allowed */
        cursor: pointer;
    }

/* We show the same cursor as the parent element for `@all`
       mention */

.rendered_markdown .user-mention-all {
        cursor: inherit;
    }

.rendered_markdown .user-mention[data-user-id="*"],.rendered_markdown .user-group-mention,.rendered_markdown .topic-mention {
        color: var(--color-text-other-mention);
        background-color: var(--color-background-text-group-mention);
    }

.rendered_markdown .user-mention.user-mention-me[data-user-id="*"],.rendered_markdown .user-group-mention.user-mention-me:not(.does-not-exist),.rendered_markdown .topic-mention.user-mention-me:not(.does-not-exist) {
            color: var(--color-text-self-group-mention);
            font-weight: 600;
        }

/* Display whitespace within channel and topic names. */

.rendered_markdown .stream-topic .stream-topic-inner,.rendered_markdown .stream-topic .decorated-channel-name {
            white-space: pre;
        }

.rendered_markdown .user-group-mention:hover {
            background-color: var(--color-background-text-hover-group-mention);
        }

.rendered_markdown .alert-word {
        background-color: var(--color-background-alert-word);
    }

/* Timestamps */

.rendered_markdown time {
        background: hsl(0deg 0% 93%);
        border-radius: 3px;
        box-shadow: 0 0 0 1px hsl(0deg 0% 80%);
        white-space: nowrap;
        margin: 0 2px;
        /* Reduce the font-size to reduce the
           footprint of the timestamp block. */
        font-size: 0.95em;
    }

.rendered_markdown time .timestamp-content-wrapper {
            /* Restore the font-size to match the rest
               of the message area, and apply the layout
               for the icon. */
            font-size: 1.0526em;
            padding: 0 0.2em;
            display: inline-flex;
            align-items: baseline;
            gap: 3px;
        }

.rendered_markdown time .markdown-timestamp-icon {
            align-self: center;
        }

/* LaTeX styling */

.rendered_markdown .katex-display {
        /* KaTeX sometimes overdraws its bounding box by a little, so we
           enlarge its scrolling area by adding 3px of padding to its top
           and bottom. To prevent what will appear as extra whitespace,
           we reduce surrounding margins by the same 3px. */
        padding: 3px 0;
        margin: -3px 0;
        overflow: auto hidden;
    }

.rendered_markdown .katex-mathml annotation {
        /* Because annotations are never displayable, browser user-agent
           stylesheets mark them as not displayable, which has the
           side effect of having them not be included in the HTML
           version of copying the content. Override this, so KaTeX can
           be copy/pasted within Zulip. */
        -webkit-user-select: all;
                user-select: all;
        display: inline;
    }

.rendered_markdown .tex-error {
        color: hsl(0deg 0% 50%);
    }

/* Spoiler styling */

.rendered_markdown .spoiler-block {
        border: hsl(0deg 0% 50%) 1px solid;
        padding: 2px 8px 2px 10px;
        border-radius: 10px;
        /* Space any subsequent Markdown content the same
           distance as adjacent paragraphs are spaced. */
        margin: 0 0 var(--markdown-interelement-doubled-space-px);
    }

.rendered_markdown .spoiler-block .spoiler-header {
            /* We use flexbox to display the spoiler message
               and button. */
            display: flex;
            align-items: center;
            padding: 8px 5px;
            font-weight: bold;
        }

.rendered_markdown .spoiler-block .spoiler-header .spoiler-header-text {
                /* Disallow margin from ordinary rendered-markdown
                   elements. The header's vertical space is handled
                   independently by padding on .spoiler-header. */
                margin-bottom: 0;
                /* Message grows to push the arrow to the right,
                   but shrinks so as to allow long multi-line
                   spoiler messages to wrap. */
                flex: 1 1 auto;
            }

.rendered_markdown .spoiler-block .spoiler-header time {
                /* Time tag pushes the arrow out of view when overflow,
                   adding white-space property prevents this by wrapping
                   the element */
                white-space: normal;
            }

.rendered_markdown .spoiler-block .spoiler-content {
            overflow: hidden;
            border-top: hsl(0deg 0% 50%) 0 solid;
            transition:
                /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
                height 0.4s ease-in-out,
                border-top 0.4s step-end,
                padding 0.4s step-end; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
            padding: 0;
            height: 0;
        }

.rendered_markdown .spoiler-block .spoiler-content.spoiler-content-open {
                border-top: hsl(0deg 0% 50%) 1px solid;
                transition:
                    /* stylelint-disable-next-line plugin/no-low-performance-animation-properties */
                    height 0.4s ease-in-out,
                    border-top 0.4s step-start,
                    padding 0.4s step-start; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
                padding: 5px;
                height: auto;
            }

.rendered_markdown .spoiler-block .spoiler-button {
            /* Keep the button to a consistent right-hand edge. */
            padding-right: 3px;
        }

.rendered_markdown .spoiler-block .spoiler-button:hover .spoiler-arrow::before {
                    background-color: hsl(0deg 0% 50%);
                }

.rendered_markdown .spoiler-block .spoiler-button:hover .spoiler-arrow::after {
                    background-color: hsl(0deg 0% 50%);
                }

.rendered_markdown .spoiler-block .spoiler-arrow {
            float: right;
            width: 15px;
            cursor: pointer;
            transition: transform 0.4s ease;
            transform: rotate(45deg);
        }

.rendered_markdown .spoiler-block .spoiler-arrow::before {
                position: absolute;
                content: "";
                display: inline-block;
                width: 12px;
                height: 3px;
                background-color: hsl(0deg 0% 83%);
                transition: transform 0.4s ease;
            }

.rendered_markdown .spoiler-block .spoiler-arrow::after {
                position: absolute;
                content: "";
                display: inline-block;
                width: 12px;
                height: 3px;
                background-color: hsl(0deg 0% 83%);
                transition: transform 0.4s ease;
            }

.rendered_markdown .spoiler-block .spoiler-arrow::after {
                position: absolute;
                transform: rotate(90deg);
                top: -5px;
                left: 5px;
            }

.rendered_markdown .spoiler-block .spoiler-arrow.spoiler-button-open {
                transform: rotate(45deg) translate(-5px, -5px);
            }

.rendered_markdown .spoiler-block .spoiler-arrow.spoiler-button-open::before {
                    transform: translate(10px, 0);
                }

.rendered_markdown .spoiler-block .spoiler-arrow.spoiler-button-open::after {
                    transform: rotate(90deg) translate(10px, 0);
                }

/* embedded link previews */

.rendered_markdown .message-thumbnail-gallery {
        display: flex;
        flex-flow: row wrap;
        place-items: center center;
        gap: 5px;
        margin-bottom: var(--markdown-interelement-space-px);
    }

/* When a gallery appears inside a paragraph, we equalize
       the space above and below the gallery. Thanks to margin
       collapsing, this value will have no effect when a gallery
       is the last element in a paragraph. */

.rendered_markdown p .message-thumbnail-gallery {
        margin: var(--markdown-interelement-halved-space-px) 0;
    }

/* We used to use this for certain dropbox previews, we are keeping
       this around as to not break any previous instances of these
       previews. */

.rendered_markdown .message_inline_image_title {
        font-weight: bold;
    }

.rendered_markdown .message-media-inline-image:not(.message-media-gallery-image) {
        margin: 0 0.125em; /* 2px at 16px/1em */
    }

.rendered_markdown .message-media-inline-image:not(.message-media-gallery-image):has(.image-opens-message) {
            /* When a message opens with an inline image, don't
               present any margin before the image starts (e.g.,
               to the left in LTR languages). */
            margin-inline-start: 0;
        }

.rendered_markdown .message-media-inline-image:not(.message-media-gallery-image) .media-anchor-element {
            /* We want the image to behave as inline, which the
               .message-media-inline-image will ensure, but in
               order to keep inline images from touching each
               other when they flow over separate lines, we
               introduce top/bottom margins of 3px--a value
               derived from the border around legacy images and
               images presented in galleries. */
            display: inline-block;
            margin: 3px 0;
        }

.rendered_markdown .twitter-image,.rendered_markdown .message-media-gallery-image,.rendered_markdown .message-media-preview-image,.rendered_markdown .message-media-preview-video {
        /* Set a background for the image; the background will be visible
           behind the width of the transparent border. */
        border: solid 3px transparent;
        transition: background 0.3s ease;
        background: var(--color-background-image-thumbnail);
    }

.rendered_markdown .twitter-image:hover,.rendered_markdown .message-media-gallery-image:hover,.rendered_markdown .message-media-preview-image:hover,.rendered_markdown .message-media-preview-video:hover {
            background: var(--color-background-image-thumbnail-hover);
        }

.rendered_markdown .twitter-image .media-anchor-element,.rendered_markdown .message-media-gallery-image .media-anchor-element,.rendered_markdown .message-media-preview-image .media-anchor-element,.rendered_markdown .message-media-preview-video .media-anchor-element {
            display: block;
        }

.rendered_markdown .twitter-image .media-image-element,.rendered_markdown .message-media-gallery-image .media-image-element,.rendered_markdown .message-media-preview-image .media-image-element,.rendered_markdown .message-media-preview-video .media-image-element {
            display: block;
            object-fit: scale-down;

            /* Sizing CSS for inline images requires care, because images load
               asynchronously, and browsers will unfortunately jump your
               scroll position when elements load above the current
               position in the message feed in a way that changes the
               height of elements. (As of March 2022, both Firefox and
               Chrome exhibit this problem, though in Chrome it is pretty
               subtle).

               We prevent this by utilizing dimensions on the `<img>` elements,
               but further care is needed because different layout mechanisms,
               including inline-block, can ignore those dimensions. For that
               reason, we enforce a minimum 4em square for "dinky" images,
               and set the scaled-down width on all others via JavaScript.

               If there are several images next to each other, we display
               them in a grid format; the same considerations require
               use to either use a scrollable region or set a predictable
               size for images so that the browser statically knows whether
               it'll need to overflow. We choose predictable sizes here. */

            /* Ensure a reasonable clickable area on
               extremely tall or extremely wide images. */
            min-width: 4em;
            min-height: 4em;

            /* Constrain height based on the organization's
               media preview size setting, but otherwise keep
               the width to the size of the gallery, and
               therefore the message area. */
            max-height: var(--media-preview-max-height);
            max-width: 100%;

            /* Allow height and width to grow as needed, though
               note we set the scaled-down `width` property on
               each image in JavaScript to keep flexbox from
               collapsing to the min-height and min-width values
               set above... */
            width: auto;
            height: auto;
        }

.rendered_markdown .twitter-image img.image-loading-placeholder,.rendered_markdown .message-media-gallery-image img.image-loading-placeholder,.rendered_markdown .message-media-preview-image img.image-loading-placeholder,.rendered_markdown .message-media-preview-video img.image-loading-placeholder {
            content: var(--svg-url-thumbnail-loader);
        }

.rendered_markdown .inline-image {
        display: inline;
    }

.rendered_markdown .twitter-tweet {
        border: 1px solid hsl(0deg 0% 87%);
        padding: 0.5em 0.75em;
        margin-bottom: 0.25em;
        overflow-wrap: anywhere;
        min-height: 48px;
    }

.rendered_markdown .twitter-avatar {
        float: left;
        width: 48px;
        height: 48px;
        margin-right: 0.75em;
    }

/* We used to use this for certain dropbox previews, we are keeping
       this around as to not break any previous instances of these
       previews. */

.rendered_markdown .message_inline_ref {
        margin-bottom: var(--markdown-interelement-space-px);
        margin-inline-start: 5px;
        height: 50px;
        display: block !important;
        border: none !important;
    }

.rendered_markdown .media-image-element {
        cursor: zoom-in;
    }

.rendered_markdown .youtube-video .media-image-element,.rendered_markdown .vimeo-video .media-image-element,.rendered_markdown .embed-video .media-image-element {
        cursor: pointer;
    }

.rendered_markdown .youtube-video .media-image-element {
        /* We do this for the sake of increasing
           the size of older YouTube thumbnail
           previews, but there are no ill effects
           on newer preview images. */
        object-fit: contain;
    }

.rendered_markdown .message_inline_video,.rendered_markdown .message_inline_animated_image_still,.rendered_markdown .youtube-video .media-anchor-element {
        /* Once collections of thumbnails are set to render as
           flex items, this can be updated to use `display: grid`
           instead of `display: inline-grid`. */
        display: inline-grid;
        grid-template: "media" minmax(0, auto) / minmax(0, auto);
        place-items: center center;
    }

.rendered_markdown .message_inline_video:not(.does-not-exist):hover::after {
                transform: scale(1);
            }

.rendered_markdown .message_inline_animated_image_still:not(.does-not-exist):hover::after {
                transform: scale(1);
            }

.rendered_markdown .youtube-video .media-anchor-element:hover::after {
                transform: scale(1);
            }

/* The .media-anchor-selector is for all media
           except YouTube, which needs to place
           .media-image-element on the grid. */

.rendered_markdown .message_inline_video:not(.does-not-exist) .media-anchor-element,.rendered_markdown .message_inline_animated_image_still:not(.does-not-exist) .media-anchor-element,.rendered_markdown .youtube-video .media-anchor-element .media-anchor-element,.rendered_markdown .message_inline_video:not(.does-not-exist) .media-image-element,.rendered_markdown .message_inline_animated_image_still:not(.does-not-exist) .media-image-element,.rendered_markdown .youtube-video .media-anchor-element .media-image-element {
            grid-area: media;
        }

.rendered_markdown .message_inline_video:not(.does-not-exist)::after {
            grid-area: media;
            content: "";
            background-image: url(files/images/play_button.svg);
            background-position: center center;
            background-repeat: no-repeat;
            /* 32px at 14px/1em */
            background-size: 2.2857em;
            /* Match the box to the play button's
               background-size value. */
            width: 2.2857em;
            height: 2.2857em;
            border-radius: 100%;
            transform: scale(0.8);
            transition: transform 0.2s;
        }

.rendered_markdown .message_inline_animated_image_still:not(.does-not-exist)::after {
            grid-area: media;
            content: "";
            background-image: url(files/images/play_button.svg);
            background-position: center center;
            background-repeat: no-repeat;
            /* 32px at 14px/1em */
            background-size: 2.2857em;
            /* Match the box to the play button's
               background-size value. */
            width: 2.2857em;
            height: 2.2857em;
            border-radius: 100%;
            transform: scale(0.8);
            transition: transform 0.2s;
        }

.rendered_markdown .youtube-video .media-anchor-element::after {
            grid-area: media;
            content: "";
            background-image: url(files/images/play_button.svg);
            background-position: center center;
            background-repeat: no-repeat;
            /* 32px at 14px/1em */
            background-size: 2.2857em;
            /* Match the box to the play button's
               background-size value. */
            width: 2.2857em;
            height: 2.2857em;
            border-radius: 100%;
            transform: scale(0.8);
            transition: transform 0.2s;
        }

.rendered_markdown .message_inline_video:not(.does-not-exist) .media-video-element,.rendered_markdown .message_inline_animated_image_still:not(.does-not-exist) .media-video-element,.rendered_markdown .youtube-video .media-anchor-element .media-video-element {
            display: block;
            object-fit: contain;
            /* Since we do not yet read height and width
               values for media thumbnails, we carry forward
               reasonable dimensions for a landscape thumbnail
               here, scaling with the image thumbnail size setting. */
            height: var(--media-preview-max-height);
            width: calc(var(--media-preview-max-height) * 1.5);
        }

.rendered_markdown .message_inline_video.video-format-unsupported {
        display: none;
    }

.rendered_markdown .youtube-video .media-anchor-element {
        /* We display the youtube-video anchor
           as a grid, not inline grid, to avoid
           additional space beneath the thumbnail. */
        display: grid;
    }

.rendered_markdown .media-audio-wrapper {
        vertical-align: middle;
        display: inline-flex;
        align-items: center;
        max-width: 100%;
    }

.rendered_markdown .media-audio-element {
        flex: 0 1 auto;
        /* Allow browser-native media players
           to resize in narrow viewports. */
        max-width: calc(100% - 30px);
    }

.rendered_markdown .media-audio-download {
        flex: 0 0 20px;
        margin-left: 5px;
        display: flex;
        place-content: center center;
    }

.rendered_markdown .media-audio-download:hover {
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.rendered_markdown .message_embed {
        display: grid;
        grid-template-columns:
            [thumbnail-start] var(--length-message-preview-embeds)
            [thumbnail-end fader-start data-container-start] minmax(0, 1fr)
            [data-container-end fader-end];
        grid-template-rows:
            [border-start thumbnail-start data-container-start] calc(
                var(--length-message-preview-embeds) - 10%
            )
            [fader-start] 10% [data-container-end thumbnail-end border-end fader-end];
        column-gap: 5px;
        /* We want to control the height without worrying about
           padding... */
        box-sizing: border-box;
        /* ...though we will account for 10px of padding in the
           height itself, so that the fade effect on long description
           text works as expected. */
        height: calc(var(--length-message-preview-embeds) + 10px);
        padding: 5px;
    }

.rendered_markdown .message_embed .message_embed_title {
            font-size: 1.2em;
            /* 5px at 16.8px (1.2 * 14px) */
            margin-top: -0.2976em;
            /* We set the markdown link colors here so
               that the ellipsis takes it on truncated
               lines. The ellipsis will not take an
               underline even if we specify one, so
               that is deliberately omitted here. */
            color: var(--color-markdown-link);
        }

.rendered_markdown .message_embed .message_embed_title:hover {
                color: var(--color-markdown-link-hover);
            }

.rendered_markdown .message_embed .message_embed_title .message-embed-title-link {
                /* Line-clamp lines seem to have a small
                   interline area that's not clickable
                   unless we set the anchor to display as
                   a block. */
                display: block;
            }

.rendered_markdown .message_embed .message_embed_title,.rendered_markdown .message_embed .message_embed_description {
            /* Clamp multi-line titles and descriptions
               to two lines. */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            /* Break overflowing words as necessary. */
            overflow-wrap: break-word;
        }

.rendered_markdown .message_embed .message_embed_image {
            display: block;
            grid-area: thumbnail;
            /* Keep the embed image square. */
            max-height: var(--length-message-preview-embeds);
            background-size: cover;
            background-position: center;
        }

.rendered_markdown .message_embed .data-container {
            grid-area: data-container;
        }

.rendered_markdown a:not(.icon-button) {
        color: var(--color-markdown-link);
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.rendered_markdown a:not(.icon-button) code {
            color: var(--color-markdown-code-link);
        }

.rendered_markdown a:not(.icon-button):hover,.rendered_markdown a:not(.icon-button):focus {
            color: var(--color-markdown-link-hover);
            -webkit-text-decoration: underline;
            text-decoration: underline;
        }

.rendered_markdown a:not(.icon-button):hover code,.rendered_markdown a:not(.icon-button):focus code {
                color: var(--color-markdown-code-link-hover);
            }

.rendered_markdown pre {
        direction: ltr;
        /* code block text is a bit smaller than normal text */
        font-size: 0.825em;
        line-height: 1.4;
        white-space: pre;
        overflow-x: auto;
        word-break: break-all;
        overflow-wrap: normal;
        margin: 0 0 var(--markdown-interelement-space-px);
        padding: 5px 7px 3px;
        display: block;
        border-radius: 4px;
    }

.rendered_markdown pre:hover .code-buttons-container {
            visibility: visible;
        }

/* Hide the code buttons container when the user is
           clicking on the code block other than the buttons.
           This allows the user to select part of the the code
           without the buttons interfering with the selection. */

.rendered_markdown pre:active .code-buttons-container:not(:hover) {
            visibility: hidden;
        }

.rendered_markdown pre code {
        font-size: inherit;
        padding: 0;
        white-space: inherit;
        overflow-x: scroll;
        /* Unset to avoid compounding alpha values */
        background-color: unset;
        color: inherit;
        border: 0;
    }

.rendered_markdown code {
        /* 11.55px when body is the default 14px; this is chosen to be
        slightly above the 11.5px threshold where the height jumps by a
        pixel on most platforms. */
        font-size: 0.825em;
        unicode-bidi: embed;
        direction: ltr;
        white-space: pre-wrap;
        /* 1px at 14px/1em */
        padding: 0.0714em 2px;
        color: var(--color-markdown-code-text);
        background-color: var(--color-markdown-code-background);
        border-radius: 3px;
    }

/* Container for buttons inside code blocks. */

.rendered_markdown .code-buttons-container {
        /* Break white-space treatment inherited from <pre> */
        white-space: collapse;
        /* Present buttons in a flexbox layout. */
        display: flex;
        align-items: center;
        gap: 3px;
        /* Having absolute positioning here ensures that the element
        doesn't scroll along with the code div in narrow windows */
        position: absolute;
        top: 4px;
        right: 0;
        padding: 0 4px;
        /* Invisible unless <pre> is hovered. */
        visibility: hidden;
        z-index: 0;
    }

/* The properties of the code_external_link button are copied from the
       copy-button class in app_components.css. */

.rendered_markdown .code_external_link {
        display: flex;
        border-radius: 4px;
        color: var(--color-copy-button);
        /* 2px at 16px/1em */
        padding: 0.125em;
        cursor: pointer;
    }

.rendered_markdown .code_external_link :focus-visible {
            background-color: var(--color-copy-button-square-bg-hover);
        }

.rendered_markdown .code_external_link:hover {
            background-color: var(--color-copy-button-square-bg-hover);
        }

.rendered_markdown .code_external_link:active {
            background-color: var(--color-copy-button-square-bg-active);
            color: var(--color-copy-button-square-active);
        }

.rendered_markdown .copy_codeblock,.rendered_markdown .code_external_link {
        font-size: 1.1363em;
        border: 1px solid var(--color-copy-button-square-bg-active);
        -webkit-backdrop-filter: blur(20px);
                backdrop-filter: blur(20px);
    }

.group_mention .rendered_markdown pre,.direct_mention .rendered_markdown pre {
        background-color: var(--color-markdown-pre-background-mentions);
        border-color: var(--color-markdown-pre-border-mentions);
    }

.group_mention .rendered_markdown code,.direct_mention .rendered_markdown code {
        background-color: var(--color-markdown-code-background-mentions);
    }

.group_mention .rendered_markdown pre code,.direct_mention .rendered_markdown pre code {
        background-color: unset;
        border-color: unset;
    }

.preview_content .copy_codeblock {
    /* We avoid displaying copy_codeblock button in previews, because it
       feels odd given that you can just copy-paste the code out of
       the "edit" state.  We may change this decision when we add
       menu options for viewing the code in a coding playground. */
    display: none;
}

.informational-overlays .copy_codeblock {
    display: none;
}

.message_edit_history_content .copy_codeblock {
    /*  Copy code block button is hidden in edit history, this is done
        because of issues faced in copying code blocks in edit history
        modal. This may be changed later as we decide upon a proper ux
        for displaying edit-history. */
    display: none;
}

.message_edit_history_content .code_external_link {
    right: 5px;
}

.preview_content .code_external_link {
    right: 12px;
}

@media (width < 576px) {
    .rendered_markdown .message_embed {
        height: auto;
    }

        .rendered_markdown .message_embed .message_embed_image {
            width: 100%;
            height: 100px;
        }

        .rendered_markdown .message_embed .data-container {
            display: block;
            max-width: 100%;
            margin-top: 10px;
        }
}

.codehilite {
    display: block !important;
    border: none !important;
    background: none !important;

    /* Set a relative positioning context to more precisely
       position .code-buttons-container. This eliminates
       problems with positioning shifts associated with
       code blocks in spoilers, too. */
    position: relative;
}

.codehilite pre {
        color: var(--color-markdown-pre-text);
        /* This is necessary to remove the background color
           set by Pygments. */
        background-color: var(--color-markdown-pre-background);
        border: 1px solid var(--color-markdown-pre-border);
    }

/* Both the horizontal scrollbar in <pre/> as well as
   vertical scrollbar in the view source <textarea/> is styled similarly. */
/* Ensure the horizontal scrollbar is visible on Mac */
.message_edit_form textarea:read-only::-webkit-scrollbar {
        height: 8px;
        width: 10px;
        background-color: hsl(0deg 0% 0% / 5%);
    }
.rendered_markdown pre:not(.does-not-exist)::-webkit-scrollbar {
        height: 8px;
        width: 10px;
        background-color: hsl(0deg 0% 0% / 5%);
    }
.message_edit_form textarea:read-only::-webkit-scrollbar-thumb {
        background-color: hsl(0deg 0% 0% / 30%);
        border-radius: 20px;
        cursor: auto;
        -webkit-transition: background-color 0.2s ease;
        transition: background-color 0.2s ease;
    }
.rendered_markdown pre:not(.does-not-exist)::-webkit-scrollbar-thumb {
        background-color: hsl(0deg 0% 0% / 30%);
        border-radius: 20px;
        cursor: auto;
        -webkit-transition: background-color 0.2s ease;
        transition: background-color 0.2s ease;
    }
.message_edit_form textarea:read-only::-webkit-scrollbar-thumb:hover {
        background-color: hsl(0deg 0% 0% / 60%);
    }
.rendered_markdown pre:not(.does-not-exist)::-webkit-scrollbar-thumb:hover {
        background-color: hsl(0deg 0% 0% / 60%);
    }

/* Search highlight used in both topics and rendered_markdown */
.highlight {
    background-color: hsl(51deg 100% 79%);
}

/* For elements where we want to show as much markdown content we can
   in a single line and then hide the overflowing part. */
/* Any element which can `wrap` in the above defined elements. */
.single-line-rendered-markdown code,.single-line-rendered-markdown .stream-topic {
        white-space: nowrap;
    }

.user-mention i.zulip-icon-bot {
        vertical-align: middle;
        position: relative;
        top: -1px;
        padding-left: 0.3em;
    }

/* This is required to align the time-example output in the "?" menu. */
#markdown-instructions p:has(time) {
    display: flex;
    align-items: center;
    margin: calc(var(--markdown-interelement-space-px) / 2) 0;
    padding: calc(var(--message-box-link-focus-ring-block-padding) / 2) 0;
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/zulip.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
#download-mac-alt {
    margin-top: 10px;
}

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

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

.column-middle,
#main_div {
    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: 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(
        var(--legacy-body-line-height-unitless),
        var(--base-line-height-unitless)
    );
    font-family: "Source Sans 3 VF", sans-serif;
    color: var(--color-text-default);
    background-color: var(--color-background);

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

body .header-main,body .app .app-main,body #compose-container {
        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(
                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: 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: var(--message-area-max-width);
        }
            }

/* Fallback media query. */

@media (width < 1200px) {
            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: 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(
                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: 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: var(--color-text-generic-link);
    -webkit-text-decoration: none;
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--color-text-generic-link-interactive);
    -webkit-text-decoration: underline;
    text-decoration: underline;
}

a:hover code,a:focus code {
        color: var(--color-text-generic-link-interactive);
    }

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

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

.text-select {
    -webkit-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;
}

.history-limited-box {
    color: hsl(16deg 60% 45%);
    border: 1px solid hsl(16deg 60% 45%);
    box-shadow: 0 0 2px hsl(16deg 60% 45%);
}

.all-messages-search-caution {
    border: 1px solid hsl(192deg 19% 75% / 20%);
    box-shadow: 0 0 2px hsl(192deg 19% 75% / 20%);
}

.history-limited-box,
.all-messages-search-caution {
    border-radius: 4px;
    display: none;
    margin: 0 auto 12px;
    padding: 5px;
    /* Difference should be 16px to accommodate the icon. */
    /* This emulates hanging indent. */
    padding-left: 26px;
    text-indent: -10px;
}

.history-limited-box .all-messages-search-caution-icon,.all-messages-search-caution .all-messages-search-caution-icon {
        margin: 0 3px 0 1px;
    }

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

.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 {
            fill: var(--color-zulip-logo);
            stroke: var(--color-zulip-logo);
        }

.top-messages-logo svg path,.bottom-messages-logo svg path {
            fill: var(--color-zulip-logo-z);
            stroke: var(--color-zulip-logo-z);
        }

.loading.top-messages-logo circle,.loading.bottom-messages-logo circle {
        fill: var(--color-zulip-logo-loading);
        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: 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 hsl(0deg 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;
    }

#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% - var(--disabled-scrollbar-width));
}

.header {
    width: 100%;
    height: var(--header-height);
    /* Since the headers are sticky, we need non-transparent background. */
    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 */
    box-shadow: 0 1px 0 0 var(--color-background);
}

#navbar-middle .column-middle-inner,
.header,
#message_view_header {
    background-color: var(--color-background-navbar);
    box-shadow: inset 0 -1px 0 var(--color-navbar-bottom-border);
}

.app {
    min-width: 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: 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;
    inset: 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: hsl(0deg 0% 0% / 70%);
}

.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: var(--right-sidebar-width);
    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 {
            color: var(
                --color-navbar-spectator-medium-attention-brand-button-text
            );
            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 {
                color: var(
                    --color-navbar-spectator-medium-attention-brand-button-text
                );
                background-color: var(
                    --color-navbar-spectator-medium-attention-brand-button-background-hover
                );
            }
.column-right .spectator_login_buttons .login_button:active {
                color: var(
                    --color-navbar-spectator-medium-attention-brand-button-text
                );
                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: var(--header-height);
        width: var(--header-height);
    }
@media (width >= 1200px) and (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 {
                color: var(--color-navbar-icon);
                font-size: 1.6em;
            }

/* This applies to column-left both in navbar and app. */
.column-left {
    width: var(--left-sidebar-width);
    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(
        var(--navbar-fixed-height) + var(--header-padding-bottom)
    );
}

.app-main {
    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: var(--left-sidebar-width);
        padding-left: var(--left-sidebar-padding-left);
    }

.app-main .column-right .right-sidebar {
        box-sizing: border-box;
        padding-left: var(--right-sidebar-left-spacing);
        width: var(--right-sidebar-width);
    }

.app-main .column-middle {
        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: var(--right-sidebar-width);
    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 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;
        background-color: var(--color-background-legacy-input);
        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 {
            border-color: var(--color-border-legacy-input-focus);
        }

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

.bootstrap-btn {
    font-size: inherit;
    height: auto;
    line-height: 100%;
}

/* Classes which style copy buttons */
.copy_button_base {
    outline-color: hsl(0deg 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: var(--color-fill-hover-copy-icon);
    }

.copy_message {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 1em;
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    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;
    overflow-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(var(--unread-dot-x-offset, 0));
    }

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

    100% {
        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;
    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. */
        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;
    color: var(--color-text-default);
    border-radius: 4px;
    border: 1px solid hsl(0deg 0% 80%);
    font-family: inherit;

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

.inline_topic_edit:focus {
        border-color: hsl(206deg 80% 62% / 80%);
        outline: 0;
        box-shadow:
            inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
            0 0 8px hsl(206deg 80% 62% / 60%);
    }

.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--0: var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 60%);
    border-color: var(--csstools-light-dark-toggle--0, hsl(0deg 0% 0% / 10%));
    border-color: light-dark(hsl(0deg 0% 0% / 10%), hsl(0deg 0% 0% / 60%));
    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(0deg 0% 100%);
    }

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

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

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

.information-settings .user-profile-picture,
.user_sidebar_entry.with_avatar .user-profile-picture {
    width: var(--right-sidebar-avatar-width);
    height: var(--right-sidebar-avatar-height);
    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(
        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;
    color: var(--color-navbar-icon);
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: var(--header-height);
    height: var(--header-height);
}

#header-container .left-sidebar-toggle-button:hover {
        background-color: var(--color-header-button-hover);
    }

#header-container .left-sidebar-toggle-button:hover .left-sidebar-toggle-unreadcount {
            border-color: var(--color-header-button-hover-no-alpha);
        }

#header-container .left-sidebar-toggle-button:active {
        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;
        background-color: var(--color-header-button-focus);
    }

#header-container .left-sidebar-toggle-button:active .left-sidebar-toggle-unreadcount {
            border-color: var(--color-header-button-focus-no-alpha);
        }

#header-container .left-sidebar-toggle-button:focus-visible .left-sidebar-toggle-unreadcount {
            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;
    background-color: var(--color-navbar-icon);

    /* 2px at 16px/1em */
    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: var(--realm-logo-max-width);
        }

@media (height < 600px) {

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: var(--max-unmaximized-compose-height);
}

.operator_value {
    font-family: "Source Code Pro", monospace;
    color: hsl(353deg 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: 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: var(--input-vertical-padding) var(--input-horizontal-padding);
    color: var(--color-text-default);
    border-radius: 4px;
    border: var(--input-border-width) solid var(--color-border-legacy-input);
    background-color: var(--color-background-legacy-input);
    box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
    transition:
        border-color linear 0.2s,
        box-shadow linear 0.2s;
    font-family: inherit;
}

.custom-time-input-value:focus {
        border-color: var(--color-border-legacy-input-focus);
        outline: 0;
        box-shadow:
            inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
            0 0 8px hsl(206deg 80% 62% / 60%);
    }

.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;
    overflow-wrap: break-word;
}

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

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

.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(0deg 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;
            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(0deg 0% 100%);
        background-color: hsl(213deg 90% 65%);
        font-size: var(--flatpickr-confirm-button-font-size);
        font-weight: 600;
    }

@media (width < 768px) {

.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(0deg 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 (width < 1200px) or (height < 600px) {
        .spectator-view #navbar-middle {
            /* = (width of button, square with header) * 3 (number of buttons) + 10px extra margin. */
            margin-right: calc(var(--header-height) * 3 + 10px);
        }

        .spectator-view #help-menu,.spectator-view #gear-menu {
            position: relative;
            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 (width < 768px) {
        .spectator-view #navbar-middle {
            /* = (width of button, square with header) * 3 (number of buttons) */
            margin-right: calc(var(--header-height) * 3);
        }

        .spectator-view .header-main .column-right {
            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 hsl(0deg 0% 0% / 10%);
                border-left: 1px solid var(--color-border-sidebar);
                height: 100%;
                width: var(--right-sidebar-width);
                right: 0;
                background-color: var(--color-background);
    }

.hide-right-sidebar #navbar-middle {
        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 {
                background-color: var(--color-background);
                box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
                border-right: 1px solid var(--color-border-sidebar);
                height: 100%;
                padding-left: 10px;
                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: 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 (width > 768px) {
            .without-container-query-support.hide-left-sidebar #navbar-middle {
                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: 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 hsl(0deg 0% 0% / 10%);
                border-left: 1px solid var(--color-border-sidebar);
                height: 100%;
                width: var(--right-sidebar-width);
                right: 0;
                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: 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 {
                background-color: var(--color-background);
                box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
                border-right: 1px solid var(--color-border-sidebar);
                height: 100%;
                padding-left: 10px;
                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 (width < 1200px) {
        .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 hsl(0deg 0% 0% / 10%);
                border-left: 1px solid var(--color-border-sidebar);
                height: 100%;
                width: var(--right-sidebar-width);
                right: 0;
                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(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 (width < 768px) {
        .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 {
                background-color: var(--color-background);
                box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
                border-right: 1px solid var(--color-border-sidebar);
                height: 100%;
                padding-left: 10px;
                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 (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 (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 (width < 768px) {
    .app-main::after {
        content: "lt_md_min";
    }
}

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

@media (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 (width >= 1200px) {
        .without-container-query-support .app-main::after {
            content: "gte_md_min gte_xl_min";
        }
}

/* End viewport state queries. */

@media (height < 600px) {
    .app-main .column-right.expanded .right-sidebar,
    .app-main .column-left.expanded .left-sidebar {
        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: var(--header-height);
        height: var(--header-height);
    }

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

    .left-sidebar-toggle-button {
        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 (width < 375px) {
    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;
            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 {
            -webkit-backdrop-filter: blur(40px);
                    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 {
        background: var(--color-background-widget-input);
        color: var(--color-text-dropdown-input);
        width: 100%;
        margin: 4px 4px 2px;
    }

.popover-filter-input-wrapper .popover-filter-input:focus {
            background: hsl(0deg 0% 100%);
            border: 1px solid hsl(229.09deg 21.57% 10% / 80%);
            box-shadow: 0 0 6px hsl(228deg 9.8% 20% / 30%);
        }

/* 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.folder_id-dropdown-list-container {
        width: calc(var(--modal-input-width) * 0.75);

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

.dropdown-list-container.folder_id-dropdown-list-container .dropdown-list-item-name:has(.dropdown-list-buttons) {
            /* We hold the first row height to 28px at 16px/1em
               for the sake of the buttons plus their padding. */
            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-item-name:has(.dropdown-list-buttons) .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-container .no-dropdown-items {
        color: hsl(0deg 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);
        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: 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 {
            color: var(--color-dropdown-item);
            -webkit-text-decoration: none;
            text-decoration: none;
            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;
        color: var(--color-dropdown-item);
    }

.dropdown-list-container .list-item:focus,.dropdown-list-container .list-item.current_selection {
            outline: none;
            background-color: var(
                --background-color-current-selection-dropdown-item
            );
        }

.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: 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: 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: 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 {
                color: var(--color-current-setting-dropdown-item);
            }

.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;
    flex-grow: 1;
    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: var(--header-height);
    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 {
        background-color: var(--color-header-button-hover);
    }

.header-button:active {
        background-color: var(--color-header-button-focus);
    }

.header-button:focus-visible {
        outline: none;
        background-color: var(--color-header-button-focus);
    }

.header-button .zulip-icon {
        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;
        background-color: var(--color-background-image-loader);
        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;
        }

.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 {
        background-color: var(--color-background);
        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;
    }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/message_view_header.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
#message_view_header {
    color: var(--color-text-message-view-header);
    z-index: 2;
    float: left;
    height: var(--header-height);
    width: 100%;
    line-height: var(--header-height);
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    cursor: default;
}

#message_view_header .hidden {
        display: none;
    }

/* TODO: Remove the `.navbar_title` span from the `message_view_header.hbs`
       template. That span predates the use of flexbox, and makes it so that
       elements like the `.narrow_description` have different line-height and
       sizing contexts depending on whether it's a view or a narrow being shown. */

#message_view_header .message-header-stream-settings-button,#message_view_header .navbar_title {
        padding: 0 2px 0 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
        -webkit-text-decoration: none;
        text-decoration: none;
        /* Create a flex container for the icon and
           stream name. */
        display: flex;
        /* We want to use baseline alignment so that the
           stream name and narrow description sit on
           the same invisible line. */
        align-items: baseline;
    }

#message_view_header .message-header-stream-settings-button .zulip-icon,#message_view_header .navbar_title .zulip-icon {
            /* Pull the icon out of baseline alignment,
               and center with stream name. */
            align-self: center;
        }

#message_view_header .message-header-stream-settings-button .zulip-icon-inbox,#message_view_header .navbar_title .zulip-icon-inbox {
            /* 16px at 16px em, inherited from .navbar_title */
            font-size: 1em;
        }

@media (height < 600px) {

#message_view_header .message-header-stream-settings-button,#message_view_header .navbar_title {
            padding: 0 3.5px; /* based on having ~41.66% decrease */
    }
        }

#message_view_header .message-header-stream-settings-button .navbar-icon,#message_view_header .navbar_title .navbar-icon {
            margin: 0 6px 0 5px;
            /* Align all icons to center. */
            align-self: center;
        }

#message_view_header .message-header-navbar-title {
        font-weight: 600;
        /* 16px at 14px em */
        font-size: 1.1429em;
        /* Allow long navbar titles (e.g., stream names) to collapse. */
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#message_view_header .message-header-archived {
        color: var(--color-text-message-header-archived);
        cursor: default;
        padding-left: 5px;
    }

#message_view_header .narrow_description {
        /* Flexbox's baseline alignment is responsible for
           matching the description's baseline to the title.
           Here, normal just ensures a comfortable, i18n-friendly
           line height for the description. */
        line-height: normal;
        background: none;
        color: inherit;
        font-weight: 400;
        /* Padding to the left separates the description from the
           view label or channel name; padding to the right keeps
           the description from getting too close to the closed
           search box--with a pleasing equidistant space in both
           places. */
        padding: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        /* The very last element in the navbar is the search icon, the second
        last element is the narrow description (even if it is empty when a
        channel contains no description). The flex-grow property ensures this
        element takes up the entirety of the white space, while flex-shrink
        accommodates narrower viewports. Setting flex-basis 0 enables an
        ellipsis to be displayed, as the 0 takes the place of the max-content
        default that would otherwise run titles under the search box. */
        flex: 1 1 0;
        margin: 0;
    }

#message_view_header .narrow_description .help_link_widget,#message_view_header .narrow_description .fa {
            margin: 0;
        }

#message_view_header .narrow_description .fa-question-circle-o {
            /* Override relative position for sake of
               Chrome paint bug that keeps the circle
               visible when ellipses are showing. */
            position: static;
        }

#message_view_header .narrow_description .help_link_widget {
            /* With relative positioning no longer
               in effect, we vertically align the
               help icon with an inline-block assist,
               which is present on the .fa class. */
            vertical-align: middle;
        }

#message_view_header .view-description-extended {
        overflow-wrap: break-word;
        hyphens: auto;
        overflow: hidden;
        white-space: normal;
        background-color: var(--color-background-navbar);
        border-radius: 5px;
        animation: expand-extended-description 100ms ease-in both;
    }

#message_view_header .view-description-extended.leaving-extended-view-description {
            animation: contract-extended-description 100ms ease-in both !important;
        }

/* Media Queries */
@media only screen and (width <= 620px) {
    .view-description-extended {
        padding-top: 0.5em !important;
    }
}

/* stylelint-disable plugin/no-low-performance-animation-properties */
@keyframes expand-extended-description {
    from {
        max-height: var(--header-height);
        padding-bottom: 0;
    }

    to {
        max-height: 1000px;
        padding-bottom: 5px;
    }
}

@keyframes contract-extended-description {
    from {
        max-height: 1000px;
        padding-bottom: 5px;
    }

    to {
        max-height: var(--header-height);
        padding-bottom: 0;
    }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/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;
    background-color: var(--color-background);
}

.message_header .message-header-contents {
        font-size: 1.0714em; /* 15px at 14px em */
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 1.8666em; /* 28px at 15px em */
        border: 1px solid var(--color-message-header-contents-border);
        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. */
        box-shadow:
            -1px -5px 0 5px var(--color-background),
            1px -5px 0 0 var(--color-background);
    }

.message_header.message_header_stream .message_label_clickable {
            -webkit-user-select: text;
                    user-select: text;
            color: var(--color-text-message-header);
        }

.message_header.message_header_stream .message_label_clickable:hover {
                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 {
            line-height: 0;
            color: var(--color-message-header-icon-non-interactive);
            position: relative;
            top: 0.5px;
        }

.message_header.message_header_stream .stream_topic {
            display: inline-block;
            padding: 5px 6px 5px 2px;
            height: 1.2142em; /* 17px at 14px em */
            line-height: 1.2142em; /* 17px at 14px em */
            overflow: hidden;
            text-overflow: ellipsis;
        }

.message_header.message_header_stream .stream_topic .message_label_clickable.narrows_by_topic {
                position: relative;
                top: 0.5px;
                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;
    box-shadow:
        -1px -5px 0 5px var(--color-background),
        1px -5px 0 0 var(--color-background);
    background-color: var(--color-background);
}

.message_header_private_message .message-header-contents {
        border-color: var(--color-private-message-header-border);
        border-bottom-color: var(--color-private-message-header-border-bottom);
        background-color: var(--color-background-private-message-header);
    }

.message_header_private_message .message_label_clickable {
        -webkit-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 */
        color: var(--color-text-message-header);
    }

.message_header_private_message .message_label_clickable:hover {
            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: var(--last-message-row-border-radius);
            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: var(--navbar-fixed-height);
        /* Needs to be higher than the z-index of date_row. */
        z-index: 4;
        box-shadow: 0 -1px 0 0 var(--color-background);
    }

.message-feed .message_header .message-header-contents {
            margin-top: var(--header-padding-bottom);
        }

.message-feed .message_header.sticky_header {
            box-shadow: var(--unread-marker-left) -1px 0 0
                var(--color-background);
        }

.message-feed .message_header.sticky_header .recipient_row_date {
                display: block;
            }

.stream_label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 2px 5px 10px;
    height: 1.2142em; /* 17px at 14px em */
    line-height: 1.2142em; /* 17px at 14px em */
    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: unset;
        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: var(--color-text-message-header-archived);
    }

.recipient_bar_controls {
    display: flex;
    flex-grow: 1;
    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;
    }

.recipient_row_date {
    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: block;
        }

.recipient_row_date.hide-date-separator-header {
        display: none;
    }

.recipient_bar_icon {
    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 (width < 425px) {
        .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;
            }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/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";

    border-left: 1px solid var(--color-message-list-border);
    border-right: 1px solid var(--color-message-list-border);
    background-color: var(--color-background-stream-message-content);
}

.message_row.private-message {
        background-color: var(--color-background-private-message-content);
    }

.message_row.private-message .data-container::after {
            background: linear-gradient(
                0deg,
                var(--color-background-private-message-content),
                transparent 100%
            );
        }

.message_row.direct_mention {
        background-color: var(--color-background-direct-mention);
    }

.message_row.direct_mention .message_embed .data-container::after {
            background: linear-gradient(
                0deg,
                var(--color-background-direct-mention),
                transparent 100%
            );
        }

.message_row.group_mention {
        background-color: var(--color-background-group-mention);
    }

.message_row.group_mention .message_embed .data-container::after {
            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: 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: var(--last-message-row-border-radius);
        border: 1px solid var(--color-message-list-border);
    }

.messagebox {
    grid-area: messagebox;
    overflow-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(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(
                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:
            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;
        place-self: center end;
        position: unset;
        margin-top: 1px;
        margin-right: 10px;
        text-align: end;
        grid-area: time;
    }

.messagebox-content .message_content:not(.status-message) {
        grid-area: message;
        padding: var(--message-box-markdown-aligned-vertical-space) 0 0;
        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: 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(
                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,
                hsl(0deg 0% 100% / 0%) 0%,
                hsl(0deg 0% 100%) 60px
            );
                    mask-image: linear-gradient(
                to top,
                hsl(0deg 0% 100% / 0%) 0%,
                hsl(0deg 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;
                    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: 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(0deg 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: 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: var(--message-box-markdown-aligned-vertical-space);
        color: var(--color-text-show-more-less-button);
        background-color: var(--color-show-more-less-button-background);
        border-radius: 4px;
        border: none;
        outline: none;
        overflow: hidden;
        text-overflow: ellipsis;
        overflow-wrap: normal;
        font-variant: all-small-caps;
        font-family: inherit;
        font-size: inherit;
    }

.messagebox-content .message_length_toggle:hover {
            background-color: var(
                --color-show-more-less-button-background-hover
            );
        }

.messagebox-content .message_length_toggle:active {
            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:
                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: unset;
        }

.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: 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: 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: 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: var(--base-line-height-unitless);
                /* Ensure the same spacing below messages as for any other
                   paragraph. */
                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: 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: 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(
                (
                        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: unset;
        }

.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: 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);
                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 (width < 576px), ((width >= 768px) and (width < 849px)) {
            /* 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;
        place-items: center center;
        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;
                color: var(--color-message-action-interactive);
            }

.message_controls .message_control_button .message-controls-icon:hover {
                outline: 0;
                color: var(--color-message-action-interactive);
            }

/* Separate hover colors for stars */

.message_controls .message_control_button .message-controls-icon.star:focus-visible {
                color: var(--color-message-star-action);
            }

.message_controls .message_control_button .message-controls-icon.star:hover {
                color: var(--color-message-star-action);
            }

/* Tooltips should not follow the width restrictions of their parent element. */

.message_controls [data-tippy-root] {
        width: max-content;
        overflow-wrap: unset;
    }

.message_controls .edit_content {
        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: 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: var(--color-message-star-action);
            opacity: 1;
            visibility: visible !important;
        }

.unread_marker {
    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,
        var(--color-unread-marker) 30%,
        hsl(217deg 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: var(--message-box-sender-line-height);
    grid-area: time;
    display: block;
    /* 13px at 14px/1em */
    font-size: 0.9286em;
    font-weight: 350;
    text-align: end;
    opacity: 0.8;
    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;
        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: unset !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 var(--color-outline-focus);
    }

.message_edit_save {
    /* Match Save button's basic colors to
       the compose box Send button. */
    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;
    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) {
        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 {
            background-color: var(
                --color-compose-message-content-background-over-limit
            );
        }

.edit-content-container .message-edit-textbox .textarea-approaching-limit {
            background-color: var(
                --color-compose-message-content-background-approaching-limit
            );
        }

.message_edit_content {
    max-height: var(--max-message-edit-height);
    width: 100%;
    min-width: 206px;
    min-height: 52px;
    box-sizing: border-box;
    color: var(--color-text-default);
    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: var(--base-line-height-unitless);
    font-family: inherit;
}

.message_edit_content:focus {
        outline: 0;
    }

.message_edit_content:read-write {
        resize: vertical !important;
    }

.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(0deg 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(0deg 0% 63%);
}

.message_edit_countdown_timer.expired {
        color: hsl(4deg 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;
    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: 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;
            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: unset !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: 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;
        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);
        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 * var(--date-divider-line-inset));
            margin-left: -50%;
        }

.message_feed_divider .date-divider-content::after {
            position: absolute;
            right: var(--date-divider-right-edge-offset);
            width: calc(
                var(--date-divider-line-inset) -
                    var(--date-divider-right-edge-offset)
            );
        }

.message_feed_divider .date-divider-content::before {
            content: " ";
            height: 0;
            border-bottom: 1px solid
                var(--color-border-message-group-spacer-line);
        }

.message_feed_divider .date-divider-content::after {
            content: " ";
            height: 0;
            border-bottom: 1px solid
                var(--color-border-message-group-spacer-line);
        }

.message_feed_divider .date-divider-content .date_row_text {
            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;
        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;
        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 (width < 425px) {
        .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 */
    }

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/settings.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
label {
    margin: 0;
}

label:not(.does-not-exist) .fa-info-circle,h4:not(.does-not-exist) .fa-info-circle,h3:not(.does-not-exist) .fa-info-circle,.settings-section-title .fa-info-circle {
        top: 1px;
        position: relative;
    }

/* TODO: This should ideally be added to help_link_widget.hbs,
   allowing us to deduplicate at least the opacity CSS with the
   fa-question-circle-o logic above. */
.settings-info-icon {
    padding-left: 3px;
    opacity: 0.7;
}
.settings-info-icon:hover {
        opacity: 1;
    }

a.help_link_widget {
    opacity: 0.7;
    color: inherit;
    margin-left: 3px;
}

a.help_link_widget .fa-question-circle-o {
        position: relative;
        top: 1px;
    }

a.help_link_widget:hover {
        color: inherit;
        opacity: 1;
        -webkit-text-decoration: none;
        text-decoration: none;
    }

h3:not(.does-not-exist) .help_link_widget,.settings-section-title .help_link_widget {
        margin-left: 5px;
    }

.profile-settings-form {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap-reverse;
}

.profile-main-panel {
    margin-right: 20px;
}

.profile-side-panel {
    margin-right: 10px;
}

.admin_profile_fields_table th.display,.admin_profile_fields_table th.required,.admin_profile_fields_table td.display_in_profile_summary_cell,.admin_profile_fields_table td.required-cell {
        text-align: center;
    }

.user-details-title {
    display: inline-block;
    min-width: 80px;
    font-weight: 600;
    padding-right: 5px;
}

.user-avatar-section .inline-block {
        box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
    }

#change_password_modal,
#change_email_modal {
    width: 34.2857em; /* 480px at 14px/em */
    max-width: 90vw;
}

#change-email-form-input-email {
    max-width: 90%;
}

.disabled_setting_tooltip {
    cursor: not-allowed;
}

#account-settings .deactivate-buttons-group {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
}

#change_email_button:disabled {
        pointer-events: none;
    }

#user_deactivate_account_button:disabled {
        pointer-events: none;
    }

.deactivate_realm_button:not(#does-not-exist):disabled {
        pointer-events: none;
    }

#api_key_button:disabled {
        pointer-events: none;
    }

#user_email_address_visibility:disabled {
        pointer-events: none;
    }

#change_email_button,
#change_password {
    min-width: 0;
}

.change-email {
    display: flex;
    gap: 0.5rem;
}

.admin-realm-description,
.admin-realm-welcome-message-custom-text {
    /* We set the minimum height of textarea to be enough for two lines
    of text. Since box-sizing is set to "border-box", we also add
    2 * var(--input-vertical-padding) + 2 * var(--input-border-width). */
    min-height: calc(
        2em * var(--base-line-height-unitless) + 2 *
            var(--input-vertical-padding) + 2 * var(--input-border-width)
    );
    width: 500px;
    max-width: 80%;
    min-width: 500px;
    box-sizing: border-box;
}

.admin-realm-description.rendered_markdown {
    width: fit-content;
    /* 500px at 16px */
    max-width: 31.25em;
    min-width: 0;
}

.admin-realm-description.rendered_markdown > p:first-child {
        padding-top: 0;
    }

.admin-realm-description.rendered_markdown > p:last-child {
        margin-bottom: 0;
    }
/* Show yellow outline when organization description is empty,
   matching the compose box "approaching limit" warning style. */
.admin-realm-description.empty-description:not(:disabled) {
    border-color: var(
        --color-message-content-container-border-approaching-limit
    );
}

.admin-realm-welcome-message-custom-text {
    margin-bottom: 10px;
}

#welcome_message_custom_text_buttons_container {
    display: inline-flex;
    /* 5px at 16px em */
    gap: 0.3125em;
    align-items: center;
}

.setting_notification_sound,
.play_notification_sound {
    margin-right: 4px;
}

.play_notification_sound .notification-sound-icon {
        font-size: 1.5714em; /* 22px at 14px / em */
        /* Visually center with chevron in select
        by setting the line-height equal to the height
        of select which is equal to - 1.4em + 8px (4px
        each for top and bottom paddings) + 2px (1px each
        for top and bottom borders). */
        line-height: calc(1.4 * var(--base-font-size-px) + 10px);
        cursor: pointer;
    }

.setting_notification_sound {
    text-transform: capitalize;
}

.table tbody {
        border-bottom: 1px solid hsl(0deg 0% 87%);
    }

.wrapped-table {
    overflow-wrap: anywhere;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    white-space: normal;
}

#settings_content table + .progressive-table-wrapper table tr.user_row td:first-of-type {
        width: 20%;
    }

#settings_content {

    /* This variable allows JavaScript to detect whether we are showing both
    the left sidebar and settings content for the current screen width or not. */
    --column-count: 2;
}

#uploaded_files_table > tr > td:nth-of-type(1),
#attachments-settings .upload-file-name {
    word-break: break-all;
}

.upload-mentioned-in,
.upload-date {
    word-break: normal;
}

#linkifier-settings #linkifier_pattern,#linkifier-settings #linkifier_template {
        width: calc(100% - 10em - 6em);
    }

#playground-settings .new-playground-form input {
    width: calc(100% - 10em - 6em);
}

#language_selection_modal table {
        width: 90%;
        margin-top: 20px;
        border-collapse: separate;
    }

#language_selection_modal td {
        padding-top: 1px;
    }

.settings-section {
    display: none;
    width: calc(100% - 40px);
    margin: 20px;
}

.settings-section.show {
        display: block;
    }

.settings-section form {
        margin: 0;
    }

.settings-section .no-padding {
        padding: 0;
    }

.settings-section .settings-section-title {
        font-size: 1.4em;
        font-weight: 400;
        margin: 10px 0;
    }

.settings-section .settings-section-title.transparent {
            background-color: transparent;
            color: inherit;
        }

.settings-section .table-sticky-headers {
        position: sticky;
        top: 0;
        z-index: 1;
    }

.settings-section #admin_page_users_loading_indicator,.settings-section #attachments_loading_indicator,.settings-section #admin_page_deactivated_users_loading_indicator,.settings-section #admin_page_bots_loading_indicator {
        margin: 0 auto;
    }

.settings-section .loading_indicator_text {
        font-size: 0.8571em; /* 12px at 14px/em */
        font-weight: 400;
        vertical-align: middle;
        line-height: inherit;
        display: inline-block;
        float: none;
        margin-top: 9px;
    }

.settings-section .inline {
        display: inline !important;
    }

.settings-section .hidden-email {
        font-style: italic;
    }

/* Originally the icon inherits the color of label, but when the setting
    is disabled, the color of the label is changed and thus the icon becomes
    too light. So, we set the color explicitly to original color of label to
    keep the color of the icon same even when the setting is disabled. */

.settings-section #id_realm_enable_spectator_access_label a {
        color: var(--color-realm-enable-spectator-access-link);
    }

/* The height and width of this should match input fields in settings
       menu. We try to keep the padding and height the same, and both without
       border-box box-sizing.

       These styles should be kept in sync with the styles for .settings_select
       in subscriptions.css */

.settings-section .settings_select {
        box-sizing: unset;
        /* Subtract 1px border on each side and 25+6 padding */
        width: calc(var(--modal-input-width) - 33px);
        max-width: 100%;
        padding-top: 4px;
        padding-bottom: 4px;
        height: 1.4em; /* To match height of input elements */
    }

.settings-section .account-settings-heading {
        margin-right: 10px;
    }

/* Make this one less wide because it's indented, so that the right
   edge lines up with other dropdown menus. Usual 33px plus 23px extra
   margin. */
#id_realm_jitsi_server_url {
    width: calc(var(--modal-input-width) - 33px - 23px);
}

/* list_select is similar to settings_select, but without the height styling. */
.settings_select,
.list_select {
    padding: 0 25px 0 6px;
    color: var(--color-text-default);
    border-radius: 4px;
    border: var(--input-border-width) solid var(--color-border-legacy-input);
    cursor: pointer;
    background-color: var(--color-background-legacy-input);
    font-size: inherit;
}
.settings_select:disabled {
        cursor: not-allowed;
        background-color: var(--color-background-disabled-settings-select);

        /* This is reset for other browsers to use Chrome's opacity. */
        opacity: 0.7;
    }
.list_select:disabled {
        cursor: not-allowed;
        background-color: var(--color-background-disabled-settings-select);

        /* This is reset for other browsers to use Chrome's opacity. */
        opacity: 0.7;
    }

/* For consistent custom select dropdowns that match with dropdown-widget */
select.modal_select,
select.list_select,
select.settings_select {
    appearance: none;
    background-image: var(--icon-chevron-down);
    background-repeat: no-repeat;
    background-position: 98%;
    background-size: 1em;
    font-family: inherit;
}

#admin-active-users-list .table tr:first-of-type td {
        border-top: none;
    }

#admin-bot-list .table tr:first-of-type td {
        border-top: none;
    }

#personal-bot-list .table tr:first-of-type td {
        border-top: none;
    }

#admin-active-users-list .tab-switcher,#admin-bot-list .tab-switcher,#personal-bot-list .tab-switcher {
        margin-left: 0;
        margin-top: 1em;
    }

#admin-bot-list .user-status-settings,
#personal-bot-list .user-status-settings {
    display: flex;
    justify-content: flex-end;
}

.config-download-text {
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.bot-list-error {
    margin-top: 10px;
    margin-bottom: 10px;
}

.user_role,
.profile_field_type,
.bot_type,
.last_active {
    word-break: normal;
}

.export_url_spinner .loading_indicator_spinner,.last_active .loading_indicator_spinner {
        width: 1.25em;
        height: auto;
        display: flex;
        align-items: center;
        margin: 0;
        margin-left: 0.5em; /* The spinner is left-justified with a slight left margin to look good. */
    }

.input-group {
    margin: 0 0 1.25em; /* 20px at 16px/em */
}

.input-group label.checkbox + label {
        cursor: pointer;
    }

.input-group .message_count {
        margin: 10px 0 0;
    }

.settings-checkbox-wrapper {
    width: fit-content;
}

#bot-edit-form .api-key-details-container,#api-key-modal .api-key-details-container,#bot-edit-form .zuliprc-container,#api-key-modal .zuliprc-container {
        display: flex;
        align-items: center;
        gap: 0.25em;
    }

#bot-edit-form .api-key-details-container .buttons-container,#api-key-modal .api-key-details-container .buttons-container,#bot-edit-form .zuliprc-container .buttons-container,#api-key-modal .zuliprc-container .buttons-container {
            display: flex;
            align-items: center;
        }

#bot-edit-form .modal_text_input,#api-key-modal .modal_text_input {
        margin-bottom: 0;
    }

#zuliprc-section {
    /* Normally all input-group elements have bottom margin of 1.25em.
    But here the buttons have bottom padding of 0.375em and thus there is
    already some extra space between this and the section below it, so we
    reduce the bottom margin by 0.375em. */
    margin-bottom: 0.875em;
}

#zuliprc-section .modal-field-label {
        margin-bottom: 0;
    }

/* Class for displaying an input with an
   auxiliary control, e.g., the play button
   next to the notification sound dropdown. */
.input-element-with-control {
    display: flex;
    align-items: center;
    /* Preserve the effective space allotted
       inside the input group.

       Select element: --modal-input-width
       Button element: ~29px
       Right margin:     4px */
    max-width: calc(var(--modal-input-width) + 29px + 4px);
}
.input-element-with-control .settings_select {
        /* Hold the settings select to its usual value;
           a TODO would be to fix up the min- and max-
           width values on the parent class, as the
           min-width always applies, and max-width: 100%
           has no meaning without an actual width:
           declaration. */
        max-width: var(--modal-input-width);
        /* Disregard the min-width from the main
           .settings_select selector. */
        min-width: 0;
        /* Allow the select to grow within the flex
           container to keep the play button in the
           viewport, and not force dodgy looking wrap
           onto a second line. */
        flex: 1 0 auto;
    }

.no-margin {
    margin: 0;
}

input[type="checkbox"]  + .inline-block {
        margin-left: 10px;
    }

input[type="checkbox"] .inline-block {
        margin: -2px 0 0;
    }

.decorated-stream-name-dropdown-widget .dropdown_widget_value {
        /* The max-width should account for the
           16px-square box (at 16px/1em) for the
           chevron icon. */
        max-width: calc(100% - 1em);
    }

.decorated-stream-name-dropdown-widget .decorated-channel-name {
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.allow-subdomains,
.new-realm-domain-allow-subdomains {
    margin: 0 !important;
}

.realm_domains_info {
    margin-bottom: 0;
}

.admin-realm-form h3 {
        margin: calc(0.3125 * var(--base-font-size-px)) 0; /* 5px 0 at 16px font size. */
    }

.admin-realm-form .subsection-header h3 {
        display: inline;
    }

.preferences-settings-form .subsection-header h3,.notification-settings-form .subsection-header h3 {
        display: inline-block;
        margin: calc(0.3125 * var(--base-font-size-px)) 0; /* 5px 0 at 16px font size. */
    }

.preferences-settings-form .tip,.notification-settings-form .tip {
        width: fit-content;
        margin-top: 0;
    }

.send_test_notification {
    margin-bottom: 15px;
}

.preferences-settings-form .tab-picker {
        width: 325px;
    }

.information-density-settings {
    display: flex;
    gap: 2em;
    margin: 0 0 20px;
}

.information-density-settings.disabled-setting .display-value {
        opacity: 0.4;
    }

.information-density-settings .display-value {
        background-color: var(--color-background-popover);
        font-size: 1.15em;
        line-height: 1;
        display: flex;
        align-items: center;
        padding: 0.25em 0.375em;
    }

.information-density-settings .zulip-icon {
        font-size: 1.15em;
        width: 1.15em;
        height: 1.15em;
    }

#stream-specific-notify-table .reset_stream_notifications {
        opacity: 0;
        visibility: hidden;
        transition: 0.2s ease;
        transition-property: opacity, visibility;
    }

#stream-specific-notify-table .reset_stream_notifications:hover {
            cursor: pointer;
        }

#stream-specific-notify-table .reset_stream_notifications:active {
            outline: none;
        }

#stream-specific-notify-table .unmute_stream:hover {
            cursor: pointer;
        }

#stream-specific-notify-table .unmute_stream:focus {
            outline: none;
        }

#stream-specific-notify-table .stream-controls {
        display: flex;
        align-items: center;
        /* This gap matches a single space character. */
        gap: 0.4ch;
    }

#stream-specific-notify-table .stream-controls .stream-privacy {
            display: flex;
        }

#stream-specific-notify-table .stream-controls:hover .reset_stream_notifications {
                opacity: 1;
                visibility: visible;
            }

#customizable_stream_notifications_table .dropdown-widget-button {
    /* 225px at 16px/1em */
    width: 14.0625em;
}

#customizable_stream_notifications_table .dropdown-widget-button:focus {
        outline: none;
    }

#customizable_stream_notifications_table .dropdown-widget-button:focus-visible {
        outline: 2px solid var(--color-outline-focus);
    }

.advanced-configurations-container .advance-config-toggle-area {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0 0.625em;
    }

.advanced-configurations-container .advance-config-toggle-area .stream_setting_subsection_title {
            margin: 4px 0;
        }

.advanced-configurations-container .advance-config-toggle-area .toggle-advanced-configurations-icon {
            font-size: 1.4286em; /* 20px at 14px / em */
        }

.advanced-configurations-container .advanced-configurations-collapase-view .admin-permissions-tip {
            margin-bottom: 1em;
        }

.channel-permissions .admin-permissions-tip {
    margin-bottom: 1em;
}

.organization-settings-parent {
    padding-top: 5px;
}

#id_org_profile_preview {
    width: max-content;
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 20px;
}

.inline-block.organization-permissions-parent {
    padding-top: 5px;
}

#org-other-permissions .tip {
    margin-top: 0;
}

.realm_default_language-dropdown-list-container,
.default_language-dropdown-list-container {
    /* This is same as saved snippets dropdown's width and
    also makes all language names fit in the same line. */
    width: 17.8571em;
}

#user_enter_sends_label kbd,
#realm_enter_sends_label kbd {
    /* 14px at 15px/1em */
    font-size: 0.9333em;
    font-style: normal;
    font-weight: 500;
    color: var(--color-kbd-enter-sends);
    position: relative;
    bottom: 1px;
    margin: 0 2px;
}

.overlay-keyboard-shortcuts .popover-menu-hotkey-hints {
    display: inline-flex;
    padding-left: 0;
}

.edit-attachment-buttons {
    display: inline-block;
    vertical-align: middle;
}

.remove-alert-word {
    margin-top: 1px;
}

.alert-word-status-banner {
    margin-bottom: 20px;
}

.alert-notification {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    height: auto !important;
    width: auto !important;
    white-space: break-spaces !important;

    overflow-wrap: anywhere;
    background-color: transparent;
    border-radius: 4px;
    color: hsl(156deg 30% 50%);
    padding: 3px 10px;
}

.alert-notification.account-alert-notification {
        margin: 0 0 10px;
        vertical-align: middle;
    }

.alert-notification:not(:empty) {
        border: 1px solid hsl(156deg 30% 50%);
    }

.alert-notification.alert-error {
        color: hsl(2deg 46% 68%);
        border-color: hsl(2deg 46% 68%);
    }

.alert-notification .loading_indicator_spinner {
        width: 0.9283em; /* 13px at 14px/em */
        height: 1.4286em; /* 20px at 14px/em */
        margin: 0;
    }

/* make the spinner green like the text and box. */

.alert-notification .loading_indicator_spinner svg path {
        fill: hsl(178deg 100% 40%);
    }

.alert-notification .loading_indicator_text {
        margin-top: 0;
        font-size: inherit;
        vertical-align: top;
    }

.alert-notification img {
        margin-right: 6px;
    }

.alert-notification .settings-save-checkmark {
        width: 0.9285em; /* 13px at 14px/em */
    }

#profile-field-settings #admin-add-profile-field-status {
    margin-top: 4px;
}

#add-custom-profile-field-button {
    margin-top: auto;
    margin-bottom: 12px;
    padding: 4px 14px;
}

#user-notification-settings .notification-table thead,#realm-user-default-settings .notification-table thead {
            background-color: var(--color-background-notification-table-thead);
        }

#user-notification-settings .notification-table th,#realm-user-default-settings .notification-table th,#user-notification-settings .notification-table td,#realm-user-default-settings .notification-table td {
            text-align: center;
            vertical-align: middle;
            cursor: default;
        }

#user-notification-settings .notification-table th .stream-privacy span.hashtag,#realm-user-default-settings .notification-table th .stream-privacy span.hashtag,#user-notification-settings .notification-table td .stream-privacy span.hashtag,#realm-user-default-settings .notification-table td .stream-privacy span.hashtag,#user-notification-settings .notification-table th .filter-icon i,#realm-user-default-settings .notification-table th .filter-icon i,#user-notification-settings .notification-table td .filter-icon i,#realm-user-default-settings .notification-table td .filter-icon i {
                padding-right: 0;
            }

#user-notification-settings .notification-table th label,#realm-user-default-settings .notification-table th label,#user-notification-settings .notification-table td label,#realm-user-default-settings .notification-table td label {
                cursor: default;
            }

#user-notification-settings .notification-table td:first-child {
            text-align: left;
            font-weight: bold;
            word-break: break-all;
        }

#realm-user-default-settings .notification-table td:first-child {
            text-align: left;
            font-weight: bold;
            word-break: break-all;
        }

#convert-demo-organization-form .domain_label {
        display: inline-block;
    }

#edit-user-form .alert-notification.custom-field-status,
#profile-settings .alert-notification.custom-field-status,
#profile-settings .alert-notification.full-name-status,
#profile-settings .alert-notification.timezone-setting-status {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-left: 0;
    margin-left: 5px;
    border: none;
}

.user_timezone-dropdown-list-container {
    width: calc(var(--modal-input-width));
}

#profile-settings .custom-profile-fields-form .custom_user_field label,#profile-settings .full-name-change-container label,#profile-settings .timezone-setting-form label {
        min-width: fit-content;
    }

#profile-settings .person_picker {
        /* Subtract 2 * (2px padding) + 2 * (1px border) */
        min-width: calc(var(--modal-input-width) - 6px);
    }

#profile-settings .settings-textarea {
        /* Subtract 6px of padding from side */
        width: calc(var(--modal-input-width) - 12px);
    }

.required-symbol {
    color: hsl(0deg 66% 60%);
}

.settings-profile-user-field {
    margin-top: 5px;
    max-width: fit-content;
}

.settings-profile-user-field  > .settings_url_input {
        margin-bottom: 0;
    }

.settings-profile-user-field.editable-date-field {
    display: grid;
    grid-template-areas: "datepicker close-button";
    grid-template-columns: minmax(0, 1fr) 1.4285em; /* 20px at 14px em */
    align-items: center;
    width: var(--modal-input-width);
}

.settings-profile-user-field.editable-date-field .flatpickr-wrapper {
        grid-column: datepicker-start / close-button-end;
        grid-row: close-button;
    }

.control-label-disabled {
    color: hsl(0deg 0% 50%);
}

.admin-realm-message-retention-days {
    width: 5ch;
    text-align: right;
}

.delete-choice {
    display: inline-flex;
}

.delete-choice.hide {
        display: none;
    }

#add-default-stream-modal .dropdown-widget-button {
        display: inline-flex;
    }

#add-default-stream-modal .choice-row {
        margin-bottom: 10px;
    }

#add-default-stream-modal .choice-row:last-of-type {
            /* Remove margin-bottom for last choice row
               to remove extra space between the modal
               content and footer. */
            margin-bottom: 0;
        }

#add-default-stream-modal .choice-row:last-of-type .delete-choice {
                display: none;
            }

.add_default_streams_button_container {
    display: flex;
    flex-wrap: wrap;
    margin-top: auto;
    margin-bottom: 12px;
    gap: 6px;
}

.add_default_streams_button_container #show-add-default-streams-modal {
        padding-top: 0;
        padding-bottom: 0;

        min-width: 0;
    }

#add-custom-emoji-modal input[type="text"] {
        padding: 6px;
    }

#add-custom-emoji-modal .emoji_name_input {
        margin-top: 10px;
    }

#add-custom-emoji-modal #emoji-file-name {
        white-space: nowrap;
        font-style: italic;
        color: hsl(0deg 0% 67%);
    }

#add-custom-emoji-modal #emoji_preview_text {
        margin-top: 6px;
    }

#emoji_file_input_error {
    vertical-align: middle;
}

.emoji-override-warning {
    vertical-align: middle;
    margin-left: 3px;
    opacity: 0.7;
}

.emoji-override-warning:hover {
        opacity: 1;
    }

.add-new-playground-box button {
        margin-left: calc(10em + 20px);
    }

.add-new-playground-box {
    margin-bottom: 15px;
}

.add-new-playground-box .checkbox {
        margin-top: 5px;
    }

.settings-highlight-box .wrapper {
    margin: 10px 0;
}

.admin_profile_fields_table .movable-row .move-handle,.edit_profile_field_choices_container .movable-row .move-handle,.profile_field_choices_table .movable-row .move-handle,.admin_linkifiers_table .movable-row .move-handle,.admin_channel_folders_table .movable-row .move-handle {
            cursor: move;
            -webkit-user-select: none;
                    user-select: none;
            margin-right: 5px;
        }

.admin_profile_fields_table .movable-row .fa-ellipsis-v,.edit_profile_field_choices_container .movable-row .fa-ellipsis-v,.profile_field_choices_table .movable-row .fa-ellipsis-v,.admin_linkifiers_table .movable-row .fa-ellipsis-v,.admin_channel_folders_table .movable-row .fa-ellipsis-v {
            color: hsl(0deg 0% 75%);
            position: relative;
            top: 1px;
        }

.admin_linkifiers_table th:first-child,.admin_linkifiers_table td:first-child {
        white-space: nowrap;
    }

.admin_linkifiers_table th.convert-url-heading {
        display: inline-flex;
        align-items: center;
        gap: 3px;
    }

.admin_linkifiers_table td.convert-cell {
        text-align: center;
    }

.alternative-url-template-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

.alternative-url-template-row input {
        flex: 1;
    }

.alternative-url-template-row:last-child .delete-alternative-url-template {
        visibility: hidden;
    }

#organization-permissions .dropdown-widget-button {
        color: var(--color-text-default);
    }

#organization-settings .dropdown-widget-button {
        color: var(--color-text-default);
    }

.org-permissions-form .pill-container,
.org-settings-form .pill-container {
    /* Subtract 2 * (2px padding) + 2 * (1px border) */
    min-width: calc(var(--modal-input-width) - 6px);
}

.org-permissions-form .pill-container .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }

.org-settings-form .pill-container .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }

.progressive-table-wrapper {
    position: relative;
    max-height: calc(95vh - 220px);
    overflow: auto;
    width: 100%;
}

#admin-default-channels-list .progressive-table-wrapper {
    max-height: calc(95vh - 280px);
}

#admin-default-channels-list .pill:hover {
        background-color: var(--color-background-input-pill-hover);
    }

.edit_bot_form {
    font-size: 100%;
    padding: 0;
}

.edit_bot_form .buttons {
        margin: 10px 0 5px;
    }

.edit_bot_form #current_bot_avatar_image {
        margin: 5px 0 8px;
    }

.edit_bot_form .edit_bot_avatar_preview_text {
        display: none;
    }

#add_bot_preview_text {
    display: none;
}

.edit_bot_avatar_preview_image,
#add_bot_preview_image {
    height: 100px;
    width: 100px;
    margin: 2px 0 8px;
}

#add-alert-word form {
        margin-bottom: 4px;
    }

#add-alert-word input {
        margin-bottom: 0;
    }

.admin-linkifier-form label,.admin-playground-form label {
        float: left;
        padding-top: 5px;
        width: 10em;
        text-align: right;
        margin-right: 20px;
    }

.admin-profile-field-form #custom_external_account_url_pattern input,
#edit-custom-profile-field-form-modal .custom_external_account_detail input {
    width: 70%;
}

#alert-words-table {
    margin: 0;
}

#alert-words-table li {
        list-style-type: none;
    }

#alert-words-table li.alert-word-item:first-child {
            background: none;
            margin-top: 8px;
        }

#alert-words-table .alert_word_listing .value {
        overflow-wrap: break-word;
        word-break: break-all;
        white-space: normal;
    }

#alert-words-table .edit-attachment-buttons {
        position: absolute;
        right: 20px;
        top: 0;
    }

#api_key_status {
    margin: 0 0 10px;
}

#download_zuliprc {
    color: hsl(0deg 0% 100%);
    -webkit-text-decoration: none;
    text-decoration: none;
}

#realm_domains_table {
    margin: 0;
}

#api_key_form .settings-password-div,#change_password_modal .settings-password-div {
        display: flex;
        flex-wrap: wrap;
    }

#api_key_form .settings-password-div .modal-field-label,#change_password_modal .settings-password-div .modal-field-label {
            /* Keep the label to its own
               line in the wrapping flexbox. */
            flex: 0 0 100%;
        }

#api_key_form .settings-password-div .password-input-row,#change_password_modal .settings-password-div .password-input-row {
            display: flex;
            margin-bottom: 10px;
            /* This helps us in making sure that the
               password_visibility_toggle does not look
               misaligned in small screens where that component
               increases in height on small screens. */
            max-height: 2em;
        }

#api_key_form .settings-password-div .password-input-row .modal_password_input,#change_password_modal .settings-password-div .password-input-row .modal_password_input {
                /* The usual width of input is 206px, but we reduce
                   it by 30px to make way for the padding. */
                width: 176px;
                padding-right: 30px;
                /* Override the original 10px value so that we can
                   set the margin-bottom in the parent div instead. */
                margin-bottom: 0;
            }

#api_key_form .settings-password-div .password-input-row .password_visibility_toggle,#change_password_modal .settings-password-div .password-input-row .password_visibility_toggle {
                /* We're going to use flexbox, not
                   positioning, to get the clear button
                   over top of the input. This -2em
                   margin accomplishes that, in tandem
                   with the 2em width of this element,
                   which is shared with the ending
                   anchor element in left sidebar header
                   rows. We're using em instead of pixels
                   so the whitespace between the input box
                   and the icon doesn't decrease when the
                   icon's font-size increases when switching
                   from 14px info density to 16px info density
                   mode. */
                width: 2em;
                margin-left: -2em;

                /* Make the button itself a flex container,
                   so we can perfectly center the X icon. */
                display: flex;
                justify-content: center;
                align-items: center;

                opacity: 0.6;
            }

#api_key_form .settings-password-div .password-input-row .password_visibility_toggle:focus,#change_password_modal .settings-password-div .password-input-row .password_visibility_toggle:focus {
                    outline: none;
                }

#api_key_form .settings-password-div .password-input-row .password_visibility_toggle:focus-visible {
                    opacity: 1;
                }

#change_password_modal .settings-password-div .password-input-row .password_visibility_toggle:focus-visible {
                    opacity: 1;
                }

#api_key_form .settings-password-div .password-input-row .password_visibility_toggle:hover,#change_password_modal .settings-password-div .password-input-row .password_visibility_toggle:hover {
                    opacity: 1;
                }

#api_key_form .settings-password-div .password-input-row .password_visibility_toggle:focus-visible {
                    outline: 2px solid var(--color-outline-focus);
                }

#change_password_modal .settings-password-div .password-input-row .password_visibility_toggle:focus-visible {
                    outline: 2px solid var(--color-outline-focus);
                }

#api_key_form .settings-password-div .password-input-row .settings-forgot-password,#change_password_modal .settings-password-div .password-input-row .settings-forgot-password {
                /* Make the link itself a flex container,
                   so we can perfectly center the text
                   in relation to the input box. */
                display: flex;
                align-items: center;
                margin-left: 10px;
            }

.emojiset_choices,
.user_list_style_values {
    padding: 0 10px;
}

label.preferences-radio-choice-label {
    border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
    padding: 8px 0 10px;
    display: flex;
}

label.preferences-radio-choice-label:last-of-type {
        border-bottom: none;
    }

label.preferences-radio-choice-label input[type="radio"] {
        position: relative;
        top: -2px;
        margin: 0 5px 0 0;
        width: auto;
        cursor: pointer;
    }

label.preferences-radio-choice-label input[type="radio"]:focus {
            outline: 1px dotted hsl(0deg 0% 20%);
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

label.preferences-radio-choice-label input[type="radio"]:disabled {
            cursor: not-allowed;
        }

label.preferences-radio-choice-label input[type="radio"]:checked + .preferences-radio-choice-text {
            font-weight: 600;
        }

label.preferences-radio-choice-label .right {
        /* Push to far right in flex container. */
        margin-left: auto;
    }

.emojiset_choices {
    width: 25em; /* 350px / 14px em */
}

.emojiset_choices .emoji {
        height: 22px;
        width: 22px;
    }

.default_avatar_source_values {
    width: 25em; /* 400px / 16px em */
}

.default_avatar_source_values .preferences-radio-choice-label {
        align-items: center;
    }

.default_avatar_source_values .preferences-radio-choice-label .radio-choice-controls {
            display: flex;
            align-items: center;
        }

.default_avatar_source_values .preferences-radio-choice-label input[type="radio"] {
            top: 0;
            margin-right: 0.5em; /* 8px / 16px em */
        }

.default_avatar_source_values .right {
        display: flex;
        gap: 0.5em; /* 8px / 16px em */
    }

.default_avatar_source_values .avatar {
        height: 2.625em; /* 42px / 16px em */
        width: 2.625em; /* 42px / 16px em */
        border-radius: 0.25em; /* 4px / 16px em */
    }

.user_list_style_values {
    max-width: 25em; /* 350px / 14px em */
}

.user_list_style_values .preferences-radio-choice-label {
        display: grid;
        grid-template-columns: 10.7143em auto; /* 150px / 14px em */
        justify-content: left;
        margin-right: 6px;
    }

.user_list_style_values .preferences-radio-choice-label .right {
            margin-left: unset;
        }

.user_list_style_values .preview {
        white-space: nowrap;
        overflow: hidden;
    }

.user_list_style_values .preview .user-name-and-status-text {
            display: flex;
            flex-direction: column;
        }

.user_list_style_values .preview .user-name-and-status-emoji .user-name {
                max-width: 100%;
                overflow: hidden;
            }

.user_list_style_values .preview .status-text {
            opacity: 0.75;
            font-size: 90%;
        }

.user_list_style_values .preview .status-text:not(:empty) {
                margin-top: -3px;
            }

.open-user-form {
    min-width: initial !important;
}

#show_api_key .api-key-container {
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

#show_api_key .api-key-container .copy-button {
            padding: 0;
        }

#show_api_key .api-key-container .copy-button:focus {
                outline: none;
            }

#api_key_buttons {
    display: inline-flex;
}

#api_key_buttons .regenerate_api_key {
        margin-right: 5px;
    }

.right.show .emoji_alt_code {
    /* This better aligns the example alt code
       with the other emoji styles. */
    margin-right: 1px;
}

.download_bot_zuliprc,
.copy_zuliprc,
.open_bots_subscribed_streams,
.manage-bot-button,
.deactivate-bot-button {
    display: inline-flex;
    align-items: center;
}

/* -- new settings overlay -- */
#settings_page {
    height: 95vh;
    width: 97vw;
    max-width: 73.1429em; /* 1024px at 14px em */
    margin: 2.5vh auto;
    overflow: hidden;
    border-radius: 4px;
}
#settings_page .time-limit-custom-input {
        width: 5ch;
        text-align: right;
    }
#settings_page .realm-time-limit-label {
        vertical-align: middle;
    }
#settings_page h3 {
        font-size: 1.5em;
        font-weight: normal;
        line-height: 1.5;
    }
#settings_page h5 {
        font-size: 1em;
        font-weight: normal;
        line-height: 1.2;
        margin: 10px 0;
    }
#settings_page .sidebar-wrapper {
        float: left;
        position: relative;
        width: var(--settings-sidebar-width);
        height: 100%;
    }
#settings_page .sidebar-wrapper .tab-container {
            box-sizing: border-box;
            height: var(--settings-overlay-header-height);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-background-modal-bar);
            border-bottom: 1px solid var(--color-border-modal-bar);
        }
#settings_page .sidebar-wrapper .tab-container .tab-switcher {
                display: flex;
                justify-content: center;
            }
#settings_page .sidebar-wrapper .tab-container .tab-switcher .ind-tab {
                    width: auto;
                    min-width: 6.7857em; /* 95px at 14px em */
                }
#settings_page .sidebar {
        height: calc(100% - var(--settings-overlay-header-height));
        overflow-y: auto;
        border-right: 1px solid var(--color-border-modal-bar);
    }
#settings_page .sidebar .your-bots-link {
            -webkit-text-decoration: none;
            text-decoration: none;
            color: inherit;
        }
#settings_page .sidebar .header {
            height: auto;
            position: relative;
            width: calc(100% - 20px);
            padding: 10px;
            text-align: center;
            text-transform: uppercase;

            background-color: var(--color-background-modal-bar);
            border-bottom: 1px solid var(--color-border-modal-bar);
        }
#settings_page .sidebar .sidebar-item {
            display: grid;
            /* 3.5714em is 50px at 14px/1em -- the legacy height of these rows. */
            /* 2.8571em is 40px at 14px/1em */
            grid-template:
                "starting-anchor-element row-content ending-anchor-element" 3.5714em / 2.8571em minmax(
                    0,
                    1fr
                )
                minmax(34px, auto);
            align-items: center;
            outline: none;
            cursor: pointer;
            transition:
                background-color 0.2s ease,
                border-bottom 0.2s ease;
            border-bottom: 1px solid var(--color-border-modal-bar);
        }
#settings_page .sidebar .sidebar-item:last-of-type .text {
                border-bottom: none;
            }
#settings_page .sidebar .sidebar-item.active {
                /* TODO: Check with Vlad about highlight
                   colors such as this. */
                background-color: var(--color-active-row-modal);
            }
#settings_page .sidebar .sidebar-item:focus-visible {
                border-radius: 4px;
                outline: 1px solid var(--color-outline-focus);
                outline-offset: -2px;
            }
#settings_page .sidebar .sidebar-item .sidebar-item-icon {
                font-size: 1.4em;
                text-align: center;
                color: hsl(0deg 0% 53%);
            }
#settings_page .sidebar .sidebar-item .text {
                /* Hyphenate for internationalization */
                hyphens: auto;
            }
#settings_page .sidebar .sidebar-item .locked {
                font-size: 1em;
                text-align: center;
                color: hsl(0deg 0% 62%);
            }
#settings_page .sidebar .collapse-settings-button,#settings_page .sidebar .collapse-settings-button > #toggle_collapse_chevron {
            color: var(--color-text-url);
        }
#settings_page .sidebar .collapse-settings-button:not(#does-not-exist):hover,#settings_page .sidebar .collapse-settings-button > #toggle_collapse_chevron:hover {
                cursor: pointer;
                color: var(--color-text-url-hover);
            }
#settings_page .sidebar .org-settings-list {
            display: none;
        }
#settings_page .sidebar .hide-org-settings {
            display: none;
        }
#settings_page .sidebar .normal-settings-list,#settings_page .sidebar .org-settings-list {
            position: relative;
            list-style: none;
            margin: 0;
            padding: 0;
        }
#settings_page .settings-header {
        padding-top: 1px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
#settings_page .settings-header.mobile {
            display: none;
            border-bottom: 1px solid var(--color-border-modal-bar);
        }
#settings_page .settings-header.mobile .fa-chevron-left {
                float: left;
            }
#settings_page .settings-header h1 {
            text-align: center;
            font-size: 1.1em;
            line-height: 1;
            text-transform: uppercase;
        }
#settings_page .settings-header .exit {
            font-weight: 600;
            position: absolute;
            right: 0.7142em; /* 10px at 14px em */
            color: hsl(0deg 0% 67%);
            cursor: pointer;
        }
#settings_page .settings-header .exit-sign {
            font-size: 1.5em;
            font-weight: 600;
            cursor: pointer;
        }
#settings_page .content-wrapper {
        position: absolute;
        left: var(--settings-sidebar-width);
        width: calc(100% - var(--settings-sidebar-width));
        height: 100%;
        overflow: hidden;
    }
#settings_page .content-wrapper .settings-header {
            width: 100%;
            height: var(--settings-overlay-header-height);
            box-sizing: border-box;
            border-bottom: 1px solid var(--color-border-modal-bar);
            background-color: var(--color-background-modal-bar);
        }
#settings_page .content-wrapper .settings-header h1 .section {
                font-weight: 400;
                color: inherit;
                opacity: 0.6;
            }
#settings_page .content-wrapper #settings_content {
            position: relative;
            width: 100%;
            height: calc(100% - var(--settings-overlay-header-height));

            float: left;
            overflow: auto;

            background-color: hsl(0deg 0% 0% / 2%);
        }
#settings_page .content-wrapper #settings_content #channel-folder-settings .zulip-icon-preview {
                font-size: 1.25em;
            }

.time-limit-custom-input,
.realm_jitsi_server_url_custom_input {
    padding: var(--input-vertical-padding) var(--input-horizontal-padding);
    color: var(--color-text-default);
    border: var(--input-border-width) solid hsl(0deg 0% 80%);
    transition:
        border-color linear 0.2s,
        box-shadow linear 0.2s;
    font-family: inherit;
}

.time-limit-custom-input:focus,.realm_jitsi_server_url_custom_input:focus {
        border-color: hsl(206deg 80% 62% / 80%);
        outline: 0;
        box-shadow:
            inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
            0 0 8px hsl(206deg 80% 62% / 60%);
    }

#realm_jitsi_server_url_setting {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

#realm_jitsi_server_url_setting .jitsi_server_url_custom_input_label {
        margin-bottom: var(--margin-bottom-field-description);
    }

#profile-settings .custom_user_field,#edit-user-form .custom_user_field {
        padding-bottom: 20px;
    }

#profile-settings .custom_user_field .settings-textarea,#edit-user-form .custom_user_field .settings-textarea,#profile-settings .custom_user_field .modal-textarea,#edit-user-form .custom_user_field .modal-textarea {
            height: 80px;
            /* We set the minimum height of textarea to be enough for two lines of text. */
            min-height: calc(2em * var(--base-line-height-unitless));
            resize: vertical;
        }

#profile-settings .custom_user_field:hover .remove_date,#edit-user-form .custom_user_field:hover .remove_date {
            display: inline-flex;
        }

#profile-settings .custom_user_field .remove_date,#edit-user-form .custom_user_field .remove_date {
            opacity: 0.5;
            display: none;
            cursor: pointer;
            grid-area: close-button;
            z-index: 5;
        }

#profile-settings .custom_user_field .remove_date:hover,#edit-user-form .custom_user_field .remove_date:hover {
                opacity: 1;
            }

#profile-settings .custom_user_field .datepicker,#edit-user-form .custom_user_field .datepicker {
            cursor: default;
            padding-right: 1.4285em; /* 20px at 14px em */
            /* full input width minus right padding and
               6px left padding from .settings_text_input
               and 1px border on each side */
            max-width: calc(var(--modal-input-width) - 1.4285em - 8px);
        }

#profile-settings .custom_user_field input.datepicker[disabled],#edit-user-form .custom_user_field input.datepicker[disabled] {
            cursor: not-allowed;
        }

#profile-settings #show_my_user_profile_modal,#edit-user-form #show_my_user_profile_modal {
        width: 100%;
        top: 20px;
        position: sticky;
    }

#profile-settings #show_my_user_profile_modal .show-user-profile-icon,#edit-user-form #show_my_user_profile_modal .show-user-profile-icon {
            padding-left: 2px;
            vertical-align: middle;
        }

#edit-user-form .person_picker {
        /* Subtract (1px border and 2px of padding) on each side */
        width: calc(var(--modal-input-width) - 6px);
        max-width: calc(100% - 6px);
    }

#edit-user-form .modal-textarea {
        /* Subtract (2 * horizontal padding) + (2 * border width) */
        box-sizing: content-box;
        width: calc(
            var(--modal-input-width) - 2 * var(--input-horizontal-padding) - 2 *
                var(--input-border-width)
        );
        max-width: calc(
            100% - 2 * var(--input-horizontal-padding) - 2 *
                var(--input-border-width)
        );
    }

#manage-profile-tab #edit-user-form .name-setting,#manage-profile-tab #bot-edit-form .name-setting {
            margin-bottom: 10px;
        }

#manage-profile-tab #edit-user-form-error:has(.banner),#manage-profile-tab #bot-edit-form-error:has(.banner) {
        margin-bottom: 10px;
    }

#manage-profile-tab input,#manage-profile-tab input[type="url"],#manage-profile-tab .modal-textarea,#manage-profile-tab select {
        /* Override undesired Bootstrap default. */
        margin-bottom: 0;
    }

.subsection-failed-status p {
    background-color: hsl(0deg 43% 91%);
    padding: 2px 6px;
    border-radius: 4px;
    margin: 0 0 0 5px;
}

#muted_topics_table {
    width: 90%;
    margin: 0 auto;
}

#muted_topics_table tbody {
        border-bottom: none;
    }

#payload_url_inputbox input[type="text"] {
        width: 340px;
    }

.settings-field-label {
    margin-bottom: var(--margin-bottom-field-description);
    /* Avoid having the clickable area extend to the full width of the containing element */
    width: fit-content;
}

#realm-user-default-settings .settings-field-label .reset-user-setting-to-default,#realm-user-default-settings .settings-checkbox-wrapper .reset-user-setting-to-default,#realm-user-default-settings .info-density-controls .reset-user-setting-to-default {
            display: inline-flex;
            padding: 0.1875em; /* 3px at 16px */
            margin-left: 0.1875em; /* 3px at 16px */

            position: relative;
            top: -0.0625em; /* 1px at 16px */
        }

#realm-user-default-settings .settings-field-label .reset-user-setting-to-default .zulip-icon,#realm-user-default-settings .settings-checkbox-wrapper .reset-user-setting-to-default .zulip-icon,#realm-user-default-settings .info-density-controls .reset-user-setting-to-default .zulip-icon {
                width: 1em; /* 15px at 16px */
                height: 1em; /* 15px at 16px */
                font-size: 0.9375em; /* 15px at 16px */
            }

#realm-user-default-settings .general_notifications .reset-user-setting-to-default {
        font-size: 1.2em;
        margin-top: 0.3125em; /* 6px at 16px */
        /* This is needed to adjust the gap property used
        for flex layout so that button is not too far from
        the heading. */
        margin-left: -0.5em; /* 9.6px at 16px */
    }

.settings-profile-user-field-hint {
    color: var(--color-text-settings-field-hint);
    /* We effectively eliminate the margin-bottom on
       .settings-field-label by pulling .field-hint
       up a corresponding negative value. This cinches
       things up a little tighter, given the generous
       line-height (20px) on <label> elements, though
       note well that that comes care of Bootstrap. */
    margin-top: calc(var(--margin-bottom-field-description) * -1.5);
    /* Maintain the same margin-bottom value as appears
       with .settings-field-label to display text-input
       combinations uniformly throughout the settings UI. */
    margin-bottom: var(--margin-bottom-field-description);
}

.cursor-text {
    cursor: text;
}

.profile-field-choices {
    display: inline-block;
}

.profile-field-choices hr {
        margin-top: 0;
        margin-bottom: 5px;
    }

.profile-field-choices .choice-row {
        margin-top: 8px;
    }

.profile-field-choices .choice-row input {
            width: 190px;
        }

.profile-field-choices .choice-row button {
            margin-left: 2px;
        }

.profile-field-choices  > .choice-row:first-of-type {
        margin-top: 0;
    }

.profile-field-choices-wrapper > .alphabetize-choices-button {
    display: block;
    margin: 12px 0 0;
}

.custom_user_field .pill-container,.bot_owner_user_field .pill-container {
        min-height: 24px;
        max-width: 206px;
    }

.custom_user_field .pill-container:focus-within {
            border-color: hsl(206deg 80% 62% / 80%);
            outline: 0;
            outline: 1px dotted \9;

            box-shadow:
                inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
                0 0 8px hsl(206deg 80% 62% / 60%);
        }

.bot_owner_user_field .pill-container:focus-within {
            border-color: hsl(206deg 80% 62% / 80%);
            outline: 0;
            outline: 1px dotted \9;

            box-shadow:
                inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
                0 0 8px hsl(206deg 80% 62% / 60%);
        }

#get_api_key_button {
    display: block;
}

#attachment-stats-holder {
    position: relative;
    margin-top: 13px;
    display: block;
}

#attachment-stats-holder .tip::before {
        content: "\f135";
        margin-right: 8px;
    }

.admin_exports_table {
    margin-bottom: 20px;
}

.settings-textarea,
.modal-textarea {
    color: var(--color-text-default);
    background-color: var(--background-color-textarea);
    border-radius: 4px;
    vertical-align: middle;
    border: var(--input-border-width) solid var(--border-color-textarea);
    padding: var(--input-vertical-padding) var(--input-horizontal-padding);

    box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
    transition:
        border-color linear 0.2s,
        box-shadow linear 0.2s;

    font-size: 1em;
    line-height: var(--base-line-height-unitless);
    font-family: inherit;
}

.settings-textarea:focus,.modal-textarea:focus {
        border-color: var(--focus-border-color-textarea);
        outline: 0;

        box-shadow:
            inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
            0 0 8px hsl(206.5deg 80% 62% / 60%);
    }

.settings-textarea:disabled {
        cursor: not-allowed;
    }

.modal-textarea:disabled {
        cursor: not-allowed;
    }

.settings-textarea:disabled {
    background-color: var(--background-color-disabled-textarea);
    opacity: 0.5;
}

/* This nicely displays uneditable user-generated content, such as
   rendered realm and channel descriptions. */
.settings-view-only-textarea {
    margin: 0;
    /* 5px at 16px */
    padding: 0.3125em var(--view-only-field-horizontal-padding);
    background-color: var(--background-color-view-only-textarea);
    border: var(--input-border-width) solid var(--border-color-textarea);
    border-radius: 4px;
}

.modal-textarea:disabled {
    background-color: var(--background-color-readonly-modal-input);
    opacity: var(--opacity-readonly-modal-input);
}

@media (width < 992px) {
    .settings-email-column {
        display: none;
    }

    .empty-email-col-for-user-group {
        display: none;
    }

    .hidden-subscriber-email {
        display: none;
    }

    .upload-size {
        display: none;
    }

    .user-avatar-section,
    .realm-icon-section {
        display: block;
    }

    .subsection-failed-status p {
        margin: 5px 0 0;
    }
}

/* We should eventually consolidate some of these styles with the styles
   in subscriptions.css, using shared classnames. */
@container settings-overlay (width < 57.142857142857146em) {
        .profile-settings-form .user-avatar-section {
            flex: 100%;
        }

    #settings_content {
        /* This variable allows JavaScript to detect whether we are showing both
        the left sidebar and settings content for the current screen width or not. */
        --column-count: 1;
    }
        #settings_page .settings-header.mobile {
            display: flex;
            justify-content: space-between;
            height: var(--settings-overlay-header-height);
            /* We need the height to disregard border and
               padding values added to other instances of
               .settings-header. */
            box-sizing: border-box;
        }

            #settings_page .settings-header.mobile .fa-chevron-left {
                transform: translate(-50px, 0);
                opacity: 0;
                color: hsl(0deg 0% 67%);
                padding: 2px 10px;
                cursor: pointer;
                transition: 0.3s ease;
                transition-property: opacity, transform;
            }

            #settings_page .settings-header.mobile .exit {
                position: static;
                margin-right: 10px;
            }

            #settings_page .settings-header.mobile:not(.slide-left) .section {
                /* When viewing the settings list we hide the active section. */
                display: none;
            }
            #settings_page .content-wrapper .settings-header {
                display: none;
            }

            #settings_page .content-wrapper #settings_content {
                height: 100%;
            }

        #settings_page .content-wrapper.right {
            position: absolute;
            display: block;
            left: 101%;
            margin: 0;
            width: 100%;
            height: calc(100% - var(--settings-overlay-header-height));

            top: var(--settings-overlay-header-height);
            background-color: var(--color-background-modal);
            border: none;

            transition: left 0.3s ease; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
            z-index: 10;
        }

            #settings_page .content-wrapper.right.show {
                left: 0%;
            }

        #settings_page .sidebar-wrapper {
            width: 100%;
        }

        #settings_page .sidebar {
            position: absolute;
            width: 100%;
            border: none;
            height: calc(
                100% - var(--settings-overlay-header-height) -
                    var(--settings-overlay-subheader-height)
            );
        }
}

@container (width > 57.142857142857146em) {
    #attachments-settings .upload-file-name {
        min-width: 10em;
    }
        #user_topics_table .user-topic-stream {
            min-width: 6em;
        }

        #user_topics_table .user-topic {
            min-width: 10em;
        }
            #admin-user-list .user_row .user_name,#admin-bot-list .user_row .user_name,#personal-bot-list .user_row .user_name,#admin-user-list .user_row .email,#admin-bot-list .user_row .email,#personal-bot-list .user_row .email {
                min-width: 8em;
            }
        .admin_profile_fields_table .profile_field_name,.admin_profile_fields_table .profile_field_hint {
            min-width: 8em;
        }
}

@media (width < 576px) {
            #admin-user-list .user_row .bot_type,#admin-bot-list .user_row .bot_type,#personal-bot-list .user_row .bot_type,#admin-user-list .table-sticky-headers .bot_type,#admin-bot-list .table-sticky-headers .bot_type,#personal-bot-list .table-sticky-headers .bot_type,#admin-user-list .user_row .last_active,#admin-bot-list .user_row .last_active,#personal-bot-list .user_row .last_active,#admin-user-list .table-sticky-headers .last_active,#admin-bot-list .table-sticky-headers .last_active,#personal-bot-list .table-sticky-headers .last_active {
                display: none;
            }

            #admin-user-list .user_row .user_name,#admin-bot-list .user_row .user_name,#personal-bot-list .user_row .user_name,#admin-user-list .table-sticky-headers .user_name,#admin-bot-list .table-sticky-headers .user_name,#personal-bot-list .table-sticky-headers .user_name,#admin-user-list .user_row .email,#admin-bot-list .user_row .email,#personal-bot-list .user_row .email,#admin-user-list .table-sticky-headers .email,#admin-bot-list .table-sticky-headers .email,#personal-bot-list .table-sticky-headers .email {
                min-width: 8em;
            }

    #pw_strength {
        margin: auto;
    }

    #playground-settings .new-playground-form input {
        width: calc(
            100% - 2 * var(--input-horizontal-padding) - 2 *
                var(--input-border-width)
        );
    }

    #playground-settings .new-playground-form label {
        display: block;
        width: 120px;
        padding: 0;
        text-align: center;
        margin: auto;
        float: none;
    }

    #change_password_modal,
    #change_email_modal {
        width: 400px;
    }

    #attachments-settings .upload-file-name {
        min-width: 10em;
    }
        #user_topics_table .user-topic {
            min-width: 10em;
        }

        #user_topics_table .user-topic-stream {
            min-width: 6em;
        }
        .admin_profile_fields_table .profile_field_name,.admin_profile_fields_table .profile_field_hint {
            min-width: 8em;
        }
        .add-new-playground-box .action-button {
            margin-left: 0;
            width: 100%;
            box-sizing: border-box;
        }

    .tab-switcher.org-user-settings-switcher {
        gap: 0.5em;
        display: flex;
        flex-wrap: wrap;
    }
}

@media (width < 425px) {
    #api_key_buttons,
    #download_zuliprc {
        flex-direction: column;
        margin-top: 5px;
    }

    .topic_date_updated {
        display: none;
    }

    #change_password_modal,
    #change_email_modal {
        width: 300px;
    }
}

#edit-linkifier-form #linkifier-pattern,#edit-linkifier-form #linkifier-url-template {
        width: 400px;
    }

#edit-linkifier-form label {
        margin-bottom: 4px;
    }

#edit-linkifier-form #linkifier-pattern-status,#edit-linkifier-form #linkifier-template-status {
        margin-top: 10px;
    }

#edit-linkifier-form input {
        margin-bottom: 0;
    }

.settings_panel_list_header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.settings_panel_list_header h3 {
        display: inline-block;
    }

.settings_panel_list_header .user_filters,.settings_panel_list_header .bot-filters {
        display: flex;
        flex-wrap: wrap;
        margin-top: auto;
        margin-bottom: 12px;
        gap: 6px;
    }

.settings_panel_list_header .user_filters .dropdown-widget-button,.settings_panel_list_header .bot-filters .dropdown-widget-button {
            height: 1.4em;
            box-sizing: content-box;
        }

.settings_panel_list_header .user_filters input.search,.settings_panel_list_header .bot-filters input.search {
            /* Margins need to be only handled by the container holding the
            filters to keep them aligned in .settings_panel_list_header */
            margin: 0;
        }

.settings_panel_list_header .user_filters .dropdown-widget-button {
        max-width: 11em; /* 176px at 16px */
    }

.settings_panel_list_header .bot-filters .dropdown-widget-button {
        max-width: 160px;
    }

.settings_panel_list_header .add_default_streams_button_container input.search {
            /* Margins need to be only handled by the container holding the
            filters to keep them aligned in .settings_panel_list_header */
            margin: 0;
        }

.settings_panel_list_header .alert-notification {
        margin-left: 10px;
        margin-right: auto;
    }

.settings_panel_list_header .search-container {
        display: grid;
        grid-template: "search-input clear-search" auto / minmax(0, 1fr) 30px;
    }

.settings_panel_list_header .search-container input.search {
            grid-column: search-input-start / clear-search-end;
            grid-row: search-input;
            padding-right: 23px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin: 0;
        }

.settings_panel_list_header .search-container .clear-filter {
            grid-area: clear-search;
            padding: 0;
            background: none;
            color: var(--color-text-clear-search-button);
            border: none;
            outline: none;
            display: grid;
            font-size: inherit;
        }

.settings_panel_list_header .search-container .clear-filter:hover {
                color: var(--color-text-clear-search-button-hover);
            }

.settings_panel_list_header .search-container .clear-filter .zulip-icon-close {
                align-self: center;
            }

.settings_panel_list_header .search-container input.search:placeholder-shown + .clear-filter {
            display: none;
        }

.settings_panel_list_header input.search {
        /* Without explicitly mentioning the height, it used be just a little
        bit short of 20px, since we need to maintain the same height with
        .dropdown-widget-button, we need to explicitly set the height here.
        We could set the height inside .user_filters but that would make
        the height a tiny bit inconsistent on pages without .user_filters. */
        height: 1.4em;
        float: right;
        font-size: 1em;
        max-width: 160px;
        margin-top: auto;
        margin-bottom: 12px;
    }

#add-new-custom-profile-field-form .disabled_label,#edit-custom-profile-field-form-modal .disabled_label {
        cursor: default;
        opacity: 0.7;
    }

/* Needed for settings_checkbox partial. */

#add-new-custom-profile-field-form .inline,#edit-custom-profile-field-form-modal .inline {
        display: inline;
    }

#admin_users_table .deactivated_user,
#admin_imported_users_table .deactivated_user,
#admin_deactivated_users_table .active-user {
    color: hsl(0deg 0% 64%);
}

#admin_users_table .deactivated_user a,#admin_imported_users_table .deactivated_user a,#admin_deactivated_users_table .active-user a {
        color: inherit;
    }

.deactivate-user-container {
    width: fit-content;
}

.settings_url_input,
.settings_text_input {
    padding: var(--input-vertical-padding) var(--input-horizontal-padding);
    color: var(--color-text-default);
    border-radius: 4px;
    border: var(--input-border-width) solid hsl(0deg 0% 80%);
    box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
    transition:
        border-color linear 0.2s,
        box-shadow linear 0.2s;
    margin-bottom: 10px;

    /* Subtract (2 * horizontal padding) + (2 * border width) */
    width: calc(
        var(--modal-input-width) - 2 * var(--input-horizontal-padding) - 2 *
            var(--input-border-width)
    );
    font-family: inherit;
}

.settings_url_input:focus,.settings_text_input:focus {
        border-color: hsl(206deg 80% 62% / 80%);
        outline: 0;
        box-shadow:
            inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
            0 0 8px hsl(206deg 80% 62% / 60%);
    }

.empty-required-field {
    border: 1px solid hsl(3deg 57% 33%);
    border-radius: 5px;
}

.empty-required-field .settings_url_input,.empty-required-field .settings_text_input,.empty-required-field .settings-textarea,.empty-required-field .modal-textarea,.empty-required-field .pill-container {
        margin-bottom: 0;
    }

.empty-required-field .settings_url_input:focus,.empty-required-field .settings_text_input:focus,.empty-required-field .settings-textarea:focus,.empty-required-field .modal-textarea:focus,.empty-required-field .pill-container:focus {
            border-color: hsl(206deg 80% 62% / 80%);
        }

#generate-integration-url-modal .inline {
        display: inline;
    }

#generate-integration-url-modal .integration-url {
        font-family: "Source Code Pro", monospace;
        background-color: var(--color-background-integration-url);
        padding: 10px;
        font-size: 0.85rem;
        border: 1px solid hsl(0deg 0% 87%);
        border-radius: 4px;
        overflow-wrap: break-word;
        word-break: break-all;
    }

#generate-integration-url-modal .integration-url-name-wrapper .dropdown-widget-button {
        width: 50%;
    }

#generate-integration-url-modal .topic-to-use-wrapper .dropdown_widget_value,#generate-integration-url-modal .integration-url-name-wrapper .dropdown_widget_value,#generate-integration-url-modal .integration-url-stream-wrapper .dropdown_widget_value {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#generate-integration-url-modal .topic-to-use-wrapper .dropdown-widget-button,#generate-integration-url-modal .integration-url-stream-wrapper .dropdown-widget-button {
        width: 75%;
    }

#generate-integration-url-modal .integration-url-topic {
        position: relative;
    }

#generate-integration-url-modal #integration-url-topic-placeholder {
        position: absolute;
        left: 8px;
        top: 50%;
        pointer-events: none;
        visibility: hidden;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

#generate-integration-url-modal #integration-url-topic-placeholder.visible {
            visibility: visible;
        }

#generate-integration-url-modal #stream-not-specified-notice {
        margin-top: -10px;
    }

.tab-switcher.org-user-settings-switcher {
    margin-bottom: 12px;
}

#admin-user-list .tab-switcher .ind-tab {
    width: auto;
    min-width: 110px;
}

#admin-user-list .tab-switcher {
    margin-left: 0;
}

#data-exports .tab-switcher .ind-tab {
    width: auto;
    min-width: 160px;
}

#admin-bot-list .tab-switcher .ind-tab,
#personal-bot-list .tab-switcher .ind-tab {
    width: auto;
    min-width: 90px;
}

#admin_invites_table .check:disabled {
        opacity: 1;
    }

#admin_invites_table .check.hide {
            display: none;
        }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/image_upload_widget.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* common CSS for all image upload widget's */
.image_upload_widget {
    position: relative;
    border-radius: 5px;
    box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image_upload_widget .image-block {
        max-height: 100%;
    }
.image_upload_widget .image-hover-background {
        content: "";
        background-color: hsl(0deg 0% 0% / 60%);
        height: 100%;
        width: 100%;
        z-index: 99;
        position: absolute;
        display: none;
        cursor: pointer;
        top: 0;
    }
.image_upload_widget .image_upload_button {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
        z-index: 99;
    }
.image_upload_widget .image-delete-button {
        background: none;
        border: none;
        cursor: pointer;
        color: hsl(0deg 0% 75%);
        opacity: 0;
        padding: 0;
        position: absolute;
        font-size: 2rem;
        top: 10px;
        right: 10px;
        z-index: 99;
        line-height: 20px;
        font-family: inherit;
    }
.image_upload_widget .image-delete-button:focus:not(:focus-visible) {
            outline: none;
        }
.image_upload_widget .image-disabled-text {
        color: hsl(0deg 0% 100%);
        cursor: not-allowed;
        position: absolute;
        text-align: center;
        visibility: hidden;
        z-index: 99;
        top: 0;
    }
.image_upload_widget .image-delete-text,.image_upload_widget .image-upload-text,.image_upload_widget .image-disabled-text {
        box-sizing: border-box;
        width: 100%;
        padding: 0 10px;
    }
.image_upload_widget .image-delete-button:focus,.image_upload_widget .image-delete-button:hover {
        color: hsl(0deg 0% 100%);
    }
.image_upload_widget .image-delete-button:hover ~ .image-upload-text {
        visibility: hidden;
    }
.image_upload_widget .image-delete-button:hover ~ .image-delete-text {
        visibility: visible;
    }
.image_upload_widget .image-delete-text {
        color: hsl(0deg 0% 100%);
        font-size: 0.85rem;
        position: absolute;
        visibility: hidden;
        z-index: 99;
    }
.image_upload_widget .image-upload-text {
        cursor: pointer;
        font-size: 0.85rem;
        color: hsl(0deg 0% 85%);
        position: absolute;
        z-index: 99;
        visibility: hidden;
    }
.image_upload_widget .image-upload-text:focus:not(:focus-visible) {
            outline: none;
        }
.image_upload_widget .image-upload-text:hover {
        color: hsl(0deg 0% 100%);
    }
.image_upload_widget .upload-spinner-background {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: hsl(0deg 0% 10%);
        font-size: 0.8rem;
        width: 100%;
        opacity: 0.8;
        height: 100%;
        position: absolute;
        visibility: hidden;
        z-index: 99;
        cursor: pointer;
        border-radius: 5px;
    }
.image_upload_widget .hide {
        display: none;
    }
.image_upload_widget:hover .image-upload-text {
            visibility: visible;
        }
.image_upload_widget:hover .image-delete-button {
            opacity: 1;
        }
.image_upload_widget:hover .image-disabled-text {
            visibility: visible;
        }
.image_upload_widget:hover .image-hover-background {
            display: block;
        }

.user-avatar-section,
.realm-icon-section {
    margin: 20px 0;
}

.realm-logo-section {
    margin: 0 0 20px;
}

/* CSS related to settings page user avatar upload widget only */
#user-avatar-upload-widget .image-block {
        width: 200px;
        height: 200px;
    }

#user-avatar-source {
    font-size: 1em;
    z-index: 99;
    margin-top: 10px;
}

/* CSS related to settings page realm icon upload widget only */
#realm-icon-upload-widget {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
}
#realm-icon-upload-widget .image-delete-button {
        top: 5px;
        right: 5px;
    }

/* CSS related to settings page realm day/night logo upload widget only */
#realm-day-logo-upload-widget,
#realm-night-logo-upload-widget {
    width: 220px;
    height: 55px;
    text-align: center;
}
#realm-day-logo-upload-widget .image-delete-button,#realm-night-logo-upload-widget .image-delete-button {
        top: 5px;
        right: 5px;
    }

#realm-day-logo-upload-widget {
    /* Match to light-theme --color-background-navbar. */
    background-color: hsl(0deg 0% 97%);
    padding: 5px;
}

#realm-night-logo-upload-widget {
    /* Match to dark-theme --color-background-navbar. */
    background-color: hsl(0deg 0% 13%);
    padding: 5px;
}

.realm-logo-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.realm-logo-group .image_upload_button {
        top: 0;
        left: 0;
    }

/* CSS  related to upload widget's preview image */
.upload_widget_image_preview {
    object-fit: cover;
}

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/subscriptions.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************/
#subs_page_loading_indicator {
    margin: 10px auto;
}

.member_list_loading_indicator,
.subscriber_list_loading_indicator {
    margin: 10px auto;
}

.member_list_loading_indicator:empty,
.subscriber_list_loading_indicator:empty {
    margin: 0;
}

.subscriptions div #response {
    overflow-wrap: break-word;
}

.subscription_settings .bootstrap-btn {
    border-radius: 2px;
}

.stream-email {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "Source Code Pro", monospace;
    padding: 10px;
    font-size: 0.85em; /* 13.6px at 16px/em (previously 0.85rem) */
    background-color: var(--color-background-stream-email);
    border: 1px solid hsl(0deg 0% 87%);
    border-radius: 4px;
}

.stream-email .email-address {
    display: block;
    flex: 0 0 90%;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

.stream-email .copy-email-address {
    font-size: 1.1765em; /* 16px at 13.6px/em */
}

.sub_setting_checkbox {
    display: flex;
}

.sub_setting_checkbox .control-label-disabled label.checkbox + label {
        cursor: not-allowed;
    }

.mute-note {
    font-size: 90%;
    opacity: 0.5;
}

.hide-mute-note {
    display: none;
}

.sub_setting_control {
    display: inline-block;
    margin-right: 10px;
}

#add_new_user_group {
    margin-left: auto;
    height: var(--settings-overlay-header-button-height);
}

.two-pane-settings-plus-button {
    font-weight: 400;
    position: relative;
    border: 1px solid var(--color-border-settings-plus-button);
    border-radius: 5px;
    background-color: var(--color-background-settings-plus-button);
    color: var(--color-text-settings-plus-button);
    margin: 0;
    height: 100%;
    width: var(--settings-overlay-header-button-height);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
}

.two-pane-settings-plus-button:hover {
        border: 1px solid hsl(0deg 0% 47%);
    }

.two-pane-settings-plus-button .create_button_plus_sign {
        line-height: 1em;
        display: block;
        font-size: 1.2em;
        opacity: 0.8;
    }

.two-pane-settings-plus-button:disabled {
        /* Replicate disabled values */
        cursor: not-allowed;
        opacity: 0.5;
    }

#create_user_group_description,
#create_stream_description {
    width: calc(100% - 15px);
}

.user_group_creation_error,
.stream_creation_error,
#settings-topics-already-exist-error {
    display: none;
    margin-left: 2px;
    color: hsl(0deg 100% 50%);
}

.stream_creation_error a,
#change_stream_name_error a {
    -webkit-text-decoration: underline;
    text-decoration: underline;
}

#change_stream_name {
    margin-bottom: 0;
}

#change_stream_name_error {
    color: hsl(0deg 100% 50%);
}

.change-stream-name-container,
.channel-folder-name-container {
    margin-bottom: 20px;
}

/* TODO: Unify with settings.css definition */
h3.stream_setting_subsection_title,
h3.user_group_setting_subsection_title {
    display: inline-block;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.5;
    margin: 4px 0;
}

h4.stream_setting_subsection_title {
    margin-bottom: 5px;
}

h4.stream_setting_subsection_title,
h4.user_group_setting_subsection_title {
    display: inline-block;
    font-size: 1.35em;
    font-weight: normal;
    line-height: 1.5;
}

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

.subscriber-list-settings-loading {
    display: flex;
    align-items: center;
    /* Override the inline width set by loading.make_indicator(),
       which is miscalculated when the element is inside a hidden
       parent (display:none makes $text_elem.width() return 0). */
    width: fit-content !important;
    margin: auto;
}

.subscriber-list-settings-loading:not(:empty) {
        margin-top: 100px;
    }

#people_to_add_in_group,
#people_to_add,
.member_list_settings_container,
.subscriber_list_settings_container {
    display: flex;
    flex-direction: column;
}

#people_to_add_in_group .input-group,#people_to_add .input-group,.member_list_settings_container:not(#does-not-exist) .input-group,.subscriber_list_settings_container:not(#does-not-exist) .input-group {
        margin-bottom: 10px;
    }

.subscribers-list-header,
.create_stream_subscriber_list_header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.subscribers-list-header .subscribers-heading,.create_stream_subscriber_list_header .subscribers-heading {
        display: flex;
        align-items: center;
    }

.subscribers-list-header .subscribers-heading .loading_indicator_spinner,.create_stream_subscriber_list_header .subscribers-heading .loading_indicator_spinner {
            width: 100%;
            height: 100%;
        }

.add-group-member-loading-spinner {
    align-self: center;
}

.member-list-box,
.subscriber-list-box {
    text-align: center;
    border-left: 1px solid var(--color-border-table-subscriber-list);
    border-right: 1px solid var(--color-border-table-subscriber-list);
    border-radius: 4px;
}

.member-list-box .member_list_container,.subscriber-list-box .member_list_container,.member-list-box .subscriber_list_container,.subscriber-list-box .subscriber_list_container {
        position: relative;
        border-bottom: 1px solid var(--color-border-table-subscriber-list);
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        max-height: var(--stream-subscriber-list-max-height);
        overflow: auto;
        text-align: left;
        -webkit-overflow-scrolling: touch;
    }

.member-list-box .member_list_container .member-list,.subscriber-list-box .member_list_container .member-list,.member-list-box .subscriber_list_container .member-list,.subscriber-list-box .subscriber_list_container .member-list,.member-list-box .member_list_container .subscriber-list,.subscriber-list-box .member_list_container .subscriber-list,.member-list-box .subscriber_list_container .subscriber-list,.subscriber-list-box .subscriber_list_container .subscriber-list {
            width: 100%;
            margin: auto;
        }

.member-list-box .member_list_container .member-list tbody,.subscriber-list-box .member_list_container .member-list tbody,.member-list-box .subscriber_list_container .member-list tbody,.subscriber-list-box .subscriber_list_container .member-list tbody,.member-list-box .member_list_container .subscriber-list tbody,.subscriber-list-box .member_list_container .subscriber-list tbody,.member-list-box .subscriber_list_container .subscriber-list tbody,.subscriber-list-box .subscriber_list_container .subscriber-list tbody {
                border-bottom: none;
            }

.member-list-box .member_list_container .member-list tr td,.subscriber-list-box .member_list_container .member-list tr td,.member-list-box .subscriber_list_container .member-list tr td,.subscriber-list-box .subscriber_list_container .member-list tr td,.member-list-box .member_list_container .subscriber-list tr td,.subscriber-list-box .member_list_container .subscriber-list tr td,.member-list-box .subscriber_list_container .subscriber-list tr td,.subscriber-list-box .subscriber_list_container .subscriber-list tr td,.member-list-box .member_list_container .member-list tr th,.subscriber-list-box .member_list_container .member-list tr th,.member-list-box .subscriber_list_container .member-list tr th,.subscriber-list-box .subscriber_list_container .member-list tr th,.member-list-box .member_list_container .subscriber-list tr th,.subscriber-list-box .member_list_container .subscriber-list tr th,.member-list-box .subscriber_list_container .subscriber-list tr th,.subscriber-list-box .subscriber_list_container .subscriber-list tr th {
                    padding: 4px 10px 4px 5px;
                    vertical-align: middle;
                }

.member-list-box .member_list_container .member-list tr td:first-of-type {
                        padding-left: 10px;
                    }

.subscriber-list-box .member_list_container .member-list tr td:first-of-type {
                        padding-left: 10px;
                    }

.member-list-box .subscriber_list_container .member-list tr td:first-of-type {
                        padding-left: 10px;
                    }

.subscriber-list-box .subscriber_list_container .member-list tr td:first-of-type {
                        padding-left: 10px;
                    }

.member-list-box .member_list_container .subscriber-list tr td:first-of-type {
                        padding-left: 10px;
                    }

.subscriber-list-box .member_list_container .subscriber-list tr td:first-of-type {
                        padding-left: 10px;
                    }

.member-list-box .subscriber_list_container .subscriber-list tr td:first-of-type {
                        padding-left: 10px;
                    }

.subscriber-list-box .subscriber_list_container .subscriber-list tr td:first-of-type {
                        padding-left: 10px;
                    }

.member-list-box .member_list_container .member-list tr th:first-of-type {
                        padding-left: 10px;
                    }

.subscriber-list-box .member_list_container .member-list tr th:first-of-type {
                        padding-left: 10px;
                    }

.member-list-box .subscriber_list_container .member-list tr th:first-of-type {
                        padding-left: 10px;
                    }

.subscriber-list-box .subscriber_list_container .member-list tr th:first-of-type {
                        padding-left: 10px;
                    }

.member-list-box .member_list_container .subscriber-list tr th:first-of-type {
                        padding-left: 10px;
                    }

.subscriber-list-box .member_list_container .subscriber-list tr th:first-of-type {
                        padding-left: 10px;
                    }

.member-list-box .subscriber_list_container .subscriber-list tr th:first-of-type {
                        padding-left: 10px;
                    }

.subscriber-list-box .subscriber_list_container .subscriber-list tr th:first-of-type {
                        padding-left: 10px;
                    }

.member-list-box .member_list_container .member-list thead,.subscriber-list-box .member_list_container .member-list thead,.member-list-box .subscriber_list_container .member-list thead,.subscriber-list-box .subscriber_list_container .member-list thead,.member-list-box .member_list_container .subscriber-list thead,.subscriber-list-box .member_list_container .subscriber-list thead,.member-list-box .subscriber_list_container .subscriber-list thead,.subscriber-list-box .subscriber_list_container .subscriber-list thead {
                position: sticky;
                top: 0;
                z-index: 1;
            }

.member-list-box .member_list_container .member-list thead th:first-of-type {
                        border-top-left-radius: 4px;
                    }

.subscriber-list-box .member_list_container .member-list thead th:first-of-type {
                        border-top-left-radius: 4px;
                    }

.member-list-box .subscriber_list_container .member-list thead th:first-of-type {
                        border-top-left-radius: 4px;
                    }

.subscriber-list-box .subscriber_list_container .member-list thead th:first-of-type {
                        border-top-left-radius: 4px;
                    }

.member-list-box .member_list_container .subscriber-list thead th:first-of-type {
                        border-top-left-radius: 4px;
                    }

.subscriber-list-box .member_list_container .subscriber-list thead th:first-of-type {
                        border-top-left-radius: 4px;
                    }

.member-list-box .subscriber_list_container .subscriber-list thead th:first-of-type {
                        border-top-left-radius: 4px;
                    }

.subscriber-list-box .subscriber_list_container .subscriber-list thead th:first-of-type {
                        border-top-left-radius: 4px;
                    }

.member-list-box .member_list_container .member-list thead th:last-of-type {
                        border-top-right-radius: 4px;
                    }

.subscriber-list-box .member_list_container .member-list thead th:last-of-type {
                        border-top-right-radius: 4px;
                    }

.member-list-box .subscriber_list_container .member-list thead th:last-of-type {
                        border-top-right-radius: 4px;
                    }

.subscriber-list-box .subscriber_list_container .member-list thead th:last-of-type {
                        border-top-right-radius: 4px;
                    }

.member-list-box .member_list_container .subscriber-list thead th:last-of-type {
                        border-top-right-radius: 4px;
                    }

.subscriber-list-box .member_list_container .subscriber-list thead th:last-of-type {
                        border-top-right-radius: 4px;
                    }

.member-list-box .subscriber_list_container .subscriber-list thead th:last-of-type {
                        border-top-right-radius: 4px;
                    }

.subscriber-list-box .subscriber_list_container .subscriber-list thead th:last-of-type {
                        border-top-right-radius: 4px;
                    }

.member-list-box .member_list_container .member-list .hidden-subscriber-email,.subscriber-list-box .member_list_container .member-list .hidden-subscriber-email,.member-list-box .subscriber_list_container .member-list .hidden-subscriber-email,.subscriber-list-box .subscriber_list_container .member-list .hidden-subscriber-email,.member-list-box .member_list_container .subscriber-list .hidden-subscriber-email,.subscriber-list-box .member_list_container .subscriber-list .hidden-subscriber-email,.member-list-box .subscriber_list_container .subscriber-list .hidden-subscriber-email,.subscriber-list-box .subscriber_list_container .subscriber-list .hidden-subscriber-email {
                font-style: italic;
            }

.member-list-box .member_list_container .member-list .strikethrough,.subscriber-list-box .member_list_container .member-list .strikethrough,.member-list-box .subscriber_list_container .member-list .strikethrough,.subscriber-list-box .subscriber_list_container .member-list .strikethrough,.member-list-box .member_list_container .subscriber-list .strikethrough,.subscriber-list-box .member_list_container .subscriber-list .strikethrough,.member-list-box .subscriber_list_container .subscriber-list .strikethrough,.subscriber-list-box .subscriber_list_container .subscriber-list .strikethrough {
                -webkit-text-decoration: line-through;
                text-decoration: line-through;
            }

.subscriber-name,
.subscriber-email {
    padding: 5px;
}

.subscriber-email {
    margin-left: 20px;
    padding-right: 8px;
}

.add_subscribers_container {
    width: 100%;

    /* Set minimum height so that at least one row of pills is visible. */
    min-height: calc(
        var(--height-input-pill) + 2 *
            var(--outer-spacing-input-pill-container) + 2px
    );
}

.add_subscribers_container .subscriber-input-scrollable-container {
        max-height: 30vh;
        height: 100%;
        /* This makes sure that the element not takes the 100% space
           and only takes the space remaining after button's width. */
        flex: 1;
        min-width: 0;
    }

.add_subscribers_container .subscriber-input-scrollable-container .simplebar-content {
            /* Render as a flex container so whitespace-only text nodes around
               .pill-container are not rendered as anonymous flex items.
               Otherwise those text nodes contribute line box height to
               scrollHeight, which triggers simplebar to show a scrollbar even
               when the pill-container fits its visible area. */
            display: flex;
        }

.add_subscribers_container .subscriber-input-scrollable-container .pill-container {
            /* Subtract the total padding and border width from both width and height. */
            width: calc(100% - 15px);
            height: calc(100% - 6px);
            /* Reserve space for the 11px simplebar vertical track so
               pills don't overlap the scrollbar. */
            padding-right: 11px;
        }

.member_list_add {
    width: 100%;
    margin: 0 0 10px;
}

.user_group_subscription_request_result a,.stream_subscription_request_result a {
        color: inherit;
    }

.user_group_subscription_request_result,
.stream_subscription_request_result {
    margin-bottom: 10px;
}

.member-search,
.subscriber-search {
    margin: 10px 0 0;
}

.member-search .search,.subscriber-search .search {
        max-width: 160px;
    }

@media (max-width: 320px) {

.member-search,
.subscriber-search {
        float: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 5px;
}
    }

.add_subscribers_container,
.add_members_container {
    display: inline-flex;
    width: 100%;
    align-items: center;

    /* We need on click events to fire on this input for our typeahead.
       This ensures that the input occupies space in the parent
       container. */
}

.add_subscribers_container .input,.add_members_container .input {
        flex-grow: 1;
    }

.add_subscriber_button_wrapper,
.add_member_button_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
}

.add_subscriber_button_wrapper .check,.add_member_button_wrapper .check,.add_subscriber_button_wrapper .add-subscriber-button,.add_member_button_wrapper .add-subscriber-button,.add_subscriber_button_wrapper .add-member-button,.add_member_button_wrapper .add-member-button {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        z-index: 1;
        visibility: visible;
        max-height: 1.75em;
        width: 100%;
        position: relative;
    }

.add_subscriber_button_wrapper .check.hidden-below,.add_member_button_wrapper .check.hidden-below,.add_subscriber_button_wrapper .add-subscriber-button.hidden-below,.add_member_button_wrapper .add-subscriber-button.hidden-below,.add_subscriber_button_wrapper .add-member-button.hidden-below,.add_member_button_wrapper .add-member-button.hidden-below {
            visibility: hidden;
            z-index: -1;
        }

.add_subscribers_container .add_subscriber_button_wrapper,
.add_members_container .add_member_button_wrapper {
    padding-left: 5px;
}

.add-subscribers-subtitle,
.add-members-subtitle {
    opacity: 0.7;
}

.send_notification_to_new_subscribers_container {
    /* Avoid having the clickable area extend to the full width of
    the containing element. */
    width: fit-content;
    /* Padding ensures the focus outline is fully visible; without it,
    the left side gets clipped by overflow: hidden on the subscribers
    tab content. This shifts the checkbox 2px right, but the effect
    on alignment is negligible. */
    padding-left: 2px;
}

#stream_settings .add-subscribers-subtitle {
    margin-bottom: 10px;
}

.choose-subscribers-label {
    display: inline;
}

.two-pane-settings-container .two-pane-settings-header .fa-chevron-left {
    position: relative;
    transform: translate(-50px, 0);
    opacity: 0;
    color: hsl(0deg 0% 67%);

    float: left;
    padding: 2px 10px;

    cursor: pointer;
    visibility: hidden;

    transition: 0.3s ease;
    transition-property: opacity, transform;
}

.two-pane-settings-container
    .two-pane-settings-header.slide-left
    .fa-chevron-left,
#settings_overlay_container
    .settings-header.mobile.slide-left
    .fa-chevron-left {
    transform: translate(0, 0);
    opacity: 1;
}

.group-assigned-permissions .subsection-header h3 {
            font-size: 1.5em;
            font-weight: normal;
            line-height: 1.5;
            display: inline;
        }

.group-assigned-permissions .subsection-settings {
        margin-top: 10px;
    }

.group-assigned-permissions .no-permissions-for-group-text {
        font-size: 1.5em;
    }

.group-assigned-permissions .inline {
        display: inline;
    }

.two-pane-settings-container .two-pane-settings-subheader {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border-modal-bar);
    grid-area: settings-overlay-subheader;
    justify-content: center;
}

.two-pane-settings-container .two-pane-settings-subheader .list-toggler-container {
        flex-wrap: wrap;
        padding: 8px;
        display: flex;
        justify-content: end;
        flex-grow: 1;
        gap: 5px;
        align-self: start;
    }

.two-pane-settings-container .two-pane-settings-subheader .tab-switcher.stream_sorter_toggle {
        margin-left: auto;
    }

.two-pane-settings-container .two-pane-settings-subheader .tab-switcher,.two-pane-settings-container .two-pane-settings-subheader #add_new_subscription {
        margin: 0;
        height: var(--settings-overlay-header-button-height);
    }

.two-pane-settings-container .two-pane-settings-subheader .display-type {
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        padding: 10px;
        overflow: hidden;
        width: 100%;
    }

.two-pane-settings-container .two-pane-settings-subheader .display-type a {
            color: inherit;
        }

.two-pane-settings-container .two-pane-settings-subheader .display-type a:hover {
                color: inherit;
                -webkit-text-decoration: none;
                text-decoration: none;
            }

.two-pane-settings-container .two-pane-settings-subheader .display-type.preview::after {
            content: "Preview";
        }

.two-pane-settings-container .two-pane-settings-subheader .display-type.preferences::after {
            content: "Preferences";
        }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title {
            display: flex;
            justify-content: center;
        }

.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title {
            display: block;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title {
            font-size: 1.5em; /* 21px at 14px/em */
            line-height: 1.25;
            font-weight: 600;
            overflow-wrap: break-word;
            overflow: hidden;
            width: 100%;
        }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title.new-channel-members-title,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title.new-channel-members-title {
                line-clamp: 2;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                width: unset;
            }

/* The right pane header/title for user group and channel setting menu has
               two major components, The group/channel name section and the button groups. */

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title {
                display: flex;
                width: 100%;

                /* This works in tandem with ".small-window-alert-notification-container"
                   in the right pane body. */
            }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .large-window-alert-notification-container,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .large-window-alert-notification-container,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .large-window-alert-notification-container,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .large-window-alert-notification-container {
                    display: flex;
                }

@media (width < 576px) {

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .large-window-alert-notification-container,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .large-window-alert-notification-container,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .large-window-alert-notification-container,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .large-window-alert-notification-container {
                        display: none;
                }
                    }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .large-window-alert-notification-container .stream_change_property_info,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .large-window-alert-notification-container .stream_change_property_info,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .large-window-alert-notification-container .stream_change_property_info,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .large-window-alert-notification-container .stream_change_property_info {
                        margin-right: 1px;
                        font-weight: 400;
                        font-size: var(--base-font-size-px);
                        min-width: max-content;
                    }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .selected-stream,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .selected-stream,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .selected-stream,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .selected-stream,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .selected-group,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .selected-group,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .selected-group,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .selected-group {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

/* These contain two button groups, the left group should stick to the
                   right side of the group/channel title name, and the right group that
                   should stick to the rightmost side of the right pane header. */

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .selected-group-buttons,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .selected-group-buttons,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .selected-group-buttons,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .selected-group-buttons,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .stream-title-buttons,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .stream-title-buttons,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .stream-title-buttons,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .stream-title-buttons {
                    display: flex;
                    justify-content: space-between;
                    /* Make the button groups stretch and take the rest of the right pane
                       header */
                    flex-grow: 1;
                }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .button-group,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .button-group,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .button-group,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .button-group {
                    height: 1.25em;
                    display: flex;
                }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .button-group .subscribe-button,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .button-group .subscribe-button,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .button-group .subscribe-button,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .button-group .subscribe-button,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .button-group .join_leave_button,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .button-group .join_leave_button,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .button-group .join_leave_button,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .button-group .join_leave_button,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .button-group #preview-stream-button,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .button-group #preview-stream-button,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .button-group #preview-stream-button,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .button-group #preview-stream-button {
                        height: 100%;
                        margin-left: 3px;
                    }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .button-group .icon-button,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .button-group .icon-button,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .button-group .icon-button,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .button-group .icon-button {
                        /* Equal to to font sizes for other icon buttons
                        in the channel and group settings UI. */
                        font-size: calc(1.2 * var(--base-font-size-px));
                    }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-group-title .deactivated-user-group-icon,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-group-title .deactivated-user-group-icon,.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .selected-stream-title .deactivated-user-group-icon,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .selected-stream-title .deactivated-user-group-icon {
                    font-size: var(--base-font-size-px);
                }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .large-icon,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .large-icon {
                display: inline-block;
                margin-left: 5px;
                /* Square off the icon box for better alignment
                   with adjacent text. */
                line-height: 1;
                /* Middle alignment looks good for all but the lock icon. */
                vertical-align: middle;
            }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .large-icon:has(.zulip-icon-lock) {
                    /* Keep the default baseline alignment for the lock icon. */
                    vertical-align: baseline;
                }

.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .large-icon:has(.zulip-icon-lock) {
                    /* Keep the default baseline alignment for the lock icon. */
                    vertical-align: baseline;
                }

.two-pane-settings-container .two-pane-settings-subheader .display-type .stream-info-title .large-icon .zulip-icon,.two-pane-settings-container .two-pane-settings-subheader .display-type .user-group-info-title .large-icon .zulip-icon {
                    font-size: 0.75em; /* 18px at 24px/em */
                }

.two-pane-settings-container {
    display: grid;
    grid-template:
        "settings-overlay-header   " var(--settings-overlay-header-height)
        "settings-overlay-content     " minmax(0, 1fr) / 100%;
    height: 95%;
    border-radius: 4px;
    padding: 0;
    width: 97%;
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    max-height: var(--overlay-container-max-height);

    /* This variable allows JavaScript to detect whether we are showing both
    the left sidebar and settings content for the current screen width or not. */
    --column-count: 2;
}

.two-pane-settings-container .list-toggler-container .tab-switcher .ind-tab {
        width: auto;
        display: flex;
        padding: 0 10px;
    }

.two-pane-settings-container .list-toggler-container .tab-switcher .ind-tab .fa {
            font-size: 1em;
        }

.two-pane-settings-container .two-pane-settings-header {
        grid-area: settings-overlay-header;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-transform: uppercase;
        font-weight: 700;
        background-color: var(--color-background-modal-bar);
        border-bottom: 1px solid var(--color-border-modal-bar);
    }

.two-pane-settings-container .two-pane-settings-header .exit {
            font-weight: 600;
            color: hsl(0deg 0% 67%);
            cursor: pointer;
        }

.two-pane-settings-container .two-pane-settings-content {
        grid-area: settings-overlay-content;
        display: flex;
    }

.two-pane-settings-container .two-pane-settings-content .left,.two-pane-settings-container .two-pane-settings-content .right {
            display: grid;
            grid-template:
                "settings-overlay-subheader" minmax(
                    var(--settings-overlay-subheader-height),
                    max-content
                )
                "settings-overlay-body     " minmax(0, 1fr) / 100%;
        }

.two-pane-settings-container .exit-sign {
        font-size: 1.5em;
        margin-right: 0.7142em; /* 10px at 14px em */
        font-weight: 600;
        cursor: pointer;
    }

.two-pane-settings-container .left .no-streams-to-show,.two-pane-settings-container .left .no-groups-to-show,.two-pane-settings-container .right .nothing-selected .create-stream-button-container {
        display: block;
        text-align: center;
        font-size: 1em;
        margin-left: 2em;
        margin-right: 2em;
    }

.two-pane-settings-container .left .no-streams-to-show:not(.does-not-exist) .settings-empty-option-text,.two-pane-settings-container .left .no-groups-to-show:not(.does-not-exist) .settings-empty-option-text,.two-pane-settings-container .right .nothing-selected .create-stream-button-container .settings-empty-option-text {
            color: var(--color-text-item);
        }

.two-pane-settings-container .left .no-streams-to-show,.two-pane-settings-container .left .no-groups-to-show {
        margin-top: calc(45vh - 75px);
    }

.two-pane-settings-container .right .nothing-selected {
        padding: 5px 5px 0;
    }

.two-pane-settings-container .right .nothing-selected .stream-info-banner a,.two-pane-settings-container .right .nothing-selected .group-info-banner a {
            color: inherit;
        }

.two-pane-settings-container .right .nothing-selected .create-stream-button-container {
            margin-top: calc(45vh - 128px);
        }

.two-pane-settings-container .right .nothing-selected .create-group-button-container {
            margin-top: calc(45vh - 134px);
            text-align: center;
        }

.two-pane-settings-container .right .nothing-selected .create-group-button-container .settings-empty-option-text {
                color: var(--color-text-item);
            }

.two-pane-settings-container .left {
        width: 40%;
    }

.two-pane-settings-container .right {
        width: calc(60% + 1px);
        border-left: 1px solid var(--color-border-modal-bar);
        box-sizing: border-box;
    }

.two-pane-settings-container .right .nothing-selected .create_stream_button,.two-pane-settings-container .right .nothing-selected .create_user_group_button {
            padding: 6px 10px 8px;
            display: block;
            margin: 0 auto 10px;
            font-family: inherit;
            font-size: inherit;
        }

.two-pane-settings-container .right .main-view-banner.group_deactivated {
            margin-bottom: 10px;
        }

.two-pane-settings-container input.small[type="text"] {
        border: 1px solid hsl(0deg 0% 80%);
        border-radius: 4px;
        padding: 3px;
        outline: none;
        color: hsl(0deg 0% 27%);
        text-align: center;
    }

.two-pane-settings-container input.small[type="text"]:focus {
            text-align: left;
        }

.two-pane-settings-container input.small[type="text"]:valid {
            text-align: left;
        }

#search_stream_name,
#search_group_name {
    box-shadow: none;
    padding-right: 28px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    grid-column: search-input-start / clear-search-end;
    grid-row: search-input;
}

.stream_name_search_section,
.group_name_search_section {
    padding: 0.5em 0.625em; /* 8px 10px at 16px font size */
    display: grid;
    border-bottom: 1px solid var(--color-border-modal-bar);
}

.stream_name_search_section {
    grid-template:
        "folder-filter search-input clear-search dropdown-widget" auto / auto minmax(
            0,
            1fr
        )
        30px;
}

.group_name_search_section {
    grid-template:
        "search-input clear-search dropdown-widget" auto / minmax(0, 1fr)
        30px;
}

#stream_settings_filter_widget {
    margin-left: 10px;
    gap: 3px;
    width: auto;
}

#clear_search_stream_name,
#clear_search_group_name {
    grid-area: clear-search;
}

#folder_filter_container {
    grid-area: folder-filter;
    display: flex;
}

#folder_filter_button {
    font-size: calc(
        1.5625 * var(--base-font-size-px)
    ); /* 25px at 16px font size */
    padding: 0;
    height: var(--folder-filter-dropdown-widget-button-height);
    /* To align the search input with privacy icon box in the stream row,
    margin is set by subtracting the button width (which is equal to
    its height) from total width of the checkbox container in stream row. */
    margin-right: calc(
        2.3125 * var(--base-font-size-px) -
            var(--folder-filter-dropdown-widget-button-height)
    );
}

.stream_settings_filter_container.hide_filter {
    display: none;
}

#user_group_visibility_settings_widget {
    grid-area: more-options-button;
    margin-left: 10px;
    display: flex;
    gap: 3px;
    width: auto;
}

.user-groups-list,
.streams-list {
    position: relative;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.left .group-name-wrapper .fa-ban,
.right .group-name .fa-ban {
    font-size: 0.8em;
    opacity: 0.6;
}

.left .group-name-wrapper,
.right .group-name {
    display: flex;
    gap: 3px;
    align-items: center;
}

.user-groups-list.hide-deactivated-user-groups .deactivated-group {
    display: none;
}

.user-groups-list.hide-active-user-groups .group-row:not(.deactivated-group) {
    display: none;
}

.user_group_visibility_settings-dropdown-list-container .dropdown-list-wrapper {
    min-width: 11em;
}

#search_group_name:placeholder-shown + #clear_search_group_name {
    visibility: hidden;
}

#search_stream_name:placeholder-shown + #clear_search_stream_name {
    visibility: hidden;
}

.stream-title {
    font-size: 1.3em;
    font-weight: 400;
}

.user-group-creation-body section,.stream-creation-body section {
        margin-bottom: 20px;
    }

.user-group-creation-body #announce-new-stream,.stream-creation-body #announce-new-stream {
        margin: 20px auto;
    }

.stream-row,
.group-row {
    padding: 0.9375em 0.625em 0.6875em; /* 15px 10px 11px at 16px font size */
    border-bottom: 1px solid var(--color-border-modal-bar);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.stream-row .check,.group-row .check {
        width: 1.5625em; /* 25px at 16px font size */
        height: 1.5625em; /* 25px at 16px font size */
        margin-right: 0.75em; /* 12px at 16px font size */
        background-size: 60% auto;
        background-repeat: no-repeat;
        background-position: center center;
        display: flex;
        justify-content: center;
    }

.stream-row .check .sub-unsub-icon,.group-row .check .sub-unsub-icon {
            display: flex;
            height: 100%;
            align-items: center;
            /* This color is used in .subscriber-check-icon of the help
               center to make the icon color same as the web app. Do change
               the color there when changing the color here */
            color: var(--color-stream-group-row-plus-icon);
            font-size: 1.0938em; /* 70% of 1.5625em */
        }

.stream-row .check .sub-unsub-icon.hide,.group-row .check .sub-unsub-icon.hide {
                display: none;
            }

.stream-row .check.checked:hover .sub-unsub-icon,.group-row .check.checked:hover .sub-unsub-icon {
            color: var(--color-stream-group-row-checked-icon-hover);
        }

.stream-row .check.not-direct-member .sub-unsub-icon,.group-row .check.not-direct-member .sub-unsub-icon {
                cursor: default;
            }

.stream-row .check.disabled:not(.checked) .sub-unsub-icon,.group-row .check.disabled:not(.checked) .sub-unsub-icon {
                /* Change opacity to 50% in dark mode */
                color: var(--color-stream-group-row-plus-icon-disabled);
            }

.stream-row .check.disabled .sub-unsub-icon,.group-row .check.disabled .sub-unsub-icon {
                color: var(--color-stream-group-row-checked-icon-disabled);
                cursor: not-allowed;
            }

.stream-row .check .sub_unsub_status,.group-row .check .sub_unsub_status,.stream-row .check .join_leave_status,.group-row .check .join_leave_status {
            display: inline-block !important;
            height: auto !important;
            width: auto !important;
        }

.stream-row .check .sub_unsub_status .loading_indicator_spinner,.group-row .check .sub_unsub_status .loading_indicator_spinner,.stream-row .check .join_leave_status .loading_indicator_spinner,.group-row .check .join_leave_status .loading_indicator_spinner {
                width: 100%;
                height: 100%;
                margin: 0;
            }

.stream-row .check .sub_unsub_status .loading_indicator_spinner svg path,.group-row .check .sub_unsub_status .loading_indicator_spinner svg path,.stream-row .check .join_leave_status .loading_indicator_spinner svg path,.group-row .check .join_leave_status .loading_indicator_spinner svg path {
                fill: var(--color-stream-group-row-plus-icon);
            }

.stream-row .checked .sub-unsub-icon,.group-row .checked .sub-unsub-icon {
        /* This color is used in .subscriber-check-icon of the help
           center to make the icon color same as the web app. Do change
           the color there when changing the color here */
        color: var(--color-stream-group-row-checked-icon);
    }

.stream-row .checked .sub_unsub_status .loading_indicator_spinner svg path,.group-row .checked .sub_unsub_status .loading_indicator_spinner svg path,.stream-row .checked .join_leave_status .loading_indicator_spinner svg path,.group-row .checked .join_leave_status .loading_indicator_spinner svg path {
            fill: var(--color-stream-group-row-checked-icon);
        }

.stream-row .check:not(.checked):not(.disabled):hover .sub-unsub-icon,.group-row .check:not(.checked):not(.disabled):hover .sub-unsub-icon,.active.stream-row .check:not(.checked):not(.disabled):hover .sub-unsub-icon,.active.group-row .check:not(.checked):not(.disabled):hover .sub-unsub-icon {
        color: var(--color-stream-group-row-plus-icon-hover);
    }

.stream-row .icon,.group-row .icon {
        width: 2.1875em; /* 35px at 16px font size */
        height: 2.1875em; /* 35px at 16px font size */
        margin-right: 0.75em; /* 12px at 16px font size */
        background-color: hsl(300deg 100% 25%);
        border-radius: 4px;
        color: hsl(0deg 0% 100%);
    }

.stream-row .icon .symbol,.group-row .icon .symbol {
            font-weight: 600;
            font-size: 1.1em;
        }

.stream-row .icon .hashtag,.group-row .icon .hashtag {
            font-size: 1.4em;
            font-weight: 600;
        }

.stream-row .sub-info-box,.group-row .sub-info-box {
        /* 5.5em = width of checkmark (1.5625em) + right margin for checkmark (0.75em)
        + width of privacy icon (2.1875em) + right margin for privacy icon (0.75em) +
        right margin for this element (0.25em) */
        width: calc(100% - 5.5em);
    }

.stream-row .group-info-box,.group-row .group-info-box {
        /* 2.5625em = width of checkmark (1.5625em) + right margin for checkmark (0.75em)
        + right margin for this element (0.25em) */
        width: calc(100% - 2.5625em);
    }

.system-group.stream-row .group-info-box,.system-group.group-row .group-info-box {
        /* We want to align this with the search filter placeholder.
           Search filter box and group info box have the same left
           margin in ems. Since filter box has a left padding of 6px,
           we set the same as left margin here. */
        margin-left: var(--input-horizontal-padding);
    }

.stream-row .sub-info-box,.group-row .sub-info-box,.stream-row .group-info-box,.group-row .group-info-box {
        margin-right: 0.25em; /* 4px at 16px font size */
    }

.stream-row .sub-info-box .top-bar,.group-row .sub-info-box .top-bar,.stream-row .group-info-box .top-bar,.group-row .group-info-box .top-bar,.stream-row .sub-info-box .bottom-bar,.group-row .sub-info-box .bottom-bar,.stream-row .group-info-box .bottom-bar,.group-row .group-info-box .bottom-bar {
            display: flex;
            justify-content: space-between;
            position: relative;
        }

.stream-row .sub-info-box .top-bar .group-name-wrapper,.group-row .sub-info-box .top-bar .group-name-wrapper,.stream-row .group-info-box .top-bar .group-name-wrapper,.group-row .group-info-box .top-bar .group-name-wrapper {
            overflow: hidden;
        }

.stream-row .sub-info-box .top-bar .stream-name,.group-row .sub-info-box .top-bar .stream-name,.stream-row .group-info-box .top-bar .stream-name,.group-row .group-info-box .top-bar .stream-name,.stream-row .sub-info-box .top-bar .group-name,.group-row .sub-info-box .top-bar .group-name,.stream-row .group-info-box .top-bar .group-name,.group-row .group-info-box .top-bar .group-name,.stream-row .sub-info-box .bottom-bar .description,.group-row .sub-info-box .bottom-bar .description,.stream-row .group-info-box .bottom-bar .description,.group-row .group-info-box .bottom-bar .description {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.stream-row .sub-info-box .top-bar .stream-name,.group-row .sub-info-box .top-bar .stream-name,.stream-row .group-info-box .top-bar .stream-name,.group-row .group-info-box .top-bar .stream-name,.stream-row .sub-info-box .bottom-bar .description,.group-row .sub-info-box .bottom-bar .description,.stream-row .group-info-box .bottom-bar .description,.group-row .group-info-box .bottom-bar .description {
            margin-right: 0.75em; /* 12px at 16px font size */
        }

.stream-row .sub-info-box .top-bar .subscriber-count,.group-row .sub-info-box .top-bar .subscriber-count,.stream-row .group-info-box .top-bar .subscriber-count,.group-row .group-info-box .top-bar .subscriber-count,.stream-row .sub-info-box .bottom-bar .stream-message-count,.group-row .sub-info-box .bottom-bar .stream-message-count,.stream-row .group-info-box .bottom-bar .stream-message-count,.group-row .group-info-box .bottom-bar .stream-message-count {
            white-space: nowrap;
            color: hsl(0deg 0% 67%);
        }

.stream-row .sub-info-box .top-bar .subscriber-count-text,.group-row .sub-info-box .top-bar .subscriber-count-text,.stream-row .group-info-box .top-bar .subscriber-count-text,.group-row .group-info-box .top-bar .subscriber-count-text,.stream-row .sub-info-box .top-bar .subscriber-count-lock,.group-row .sub-info-box .top-bar .subscriber-count-lock,.stream-row .group-info-box .top-bar .subscriber-count-lock,.group-row .group-info-box .top-bar .subscriber-count-lock,.stream-row .sub-info-box .bottom-bar .stream-message-count-text,.group-row .sub-info-box .bottom-bar .stream-message-count-text,.stream-row .group-info-box .bottom-bar .stream-message-count-text,.group-row .group-info-box .bottom-bar .stream-message-count-text {
            margin-right: 0.3125em; /* 5px at 16px font size */
        }

.stream-row .sub-info-box .top-bar .stream-name,.group-row .sub-info-box .top-bar .stream-name,.stream-row .group-info-box .top-bar .stream-name,.group-row .group-info-box .top-bar .stream-name {
            font-weight: 600;
        }

.stream-row .sub-info-box .bottom-bar,.group-row .sub-info-box .bottom-bar,.stream-row .group-info-box .bottom-bar,.group-row .group-info-box .bottom-bar {
            line-height: 1.5;
        }

.active.stream-row,.active.group-row {
        background-color: var(--color-active-row-modal);
    }

.stream-row::selection {
        background-color: transparent;
    }

.group-row::selection {
        background-color: transparent;
    }

.stream-row .icon .hashtag::selection {
        background-color: transparent;
    }

.group-row .icon .hashtag::selection {
        background-color: transparent;
    }

.stream-row .sub-info-box .description:empty::after,
.group-row .group-info-box .description:empty::after {
    content: attr(data-no-description);
    font-style: italic;
    color: hsl(0deg 0% 67%);
}

.add_subscribers_container.add_subscribers_disabled,
.member_list_settings .add_members_disabled {
    cursor: not-allowed;
}

.add_subscribers_container.add_subscribers_disabled .pill-container,.member_list_settings .add_members_disabled .pill-container {
        cursor: not-allowed;
        pointer-events: none;
    }

.add_subscribers_container button[disabled],.member_list_settings button[disabled] {
        pointer-events: none;
    }

.org-permissions-form .group_setting_disabled,.org-settings-form .group_setting_disabled,.group-permissions .group_setting_disabled,.advanced-configurations-container .group_setting_disabled,.channel-permissions .group_setting_disabled {
        cursor: not-allowed;
        /* This ensures that we do not see the not allowed cursor in the
           extra space of a div */
        width: fit-content;

        /* This specific rules are needed to override the default settings
           of these elements */
    }

.org-permissions-form .group_setting_disabled .pill-container,.org-settings-form .group_setting_disabled .pill-container,.group-permissions .group_setting_disabled .pill-container,.advanced-configurations-container .group_setting_disabled .pill-container,.channel-permissions .group_setting_disabled .pill-container,.org-permissions-form .group_setting_disabled .group-setting-label,.org-settings-form .group_setting_disabled .group-setting-label,.group-permissions .group_setting_disabled .group-setting-label,.advanced-configurations-container .group_setting_disabled .group-setting-label,.channel-permissions .group_setting_disabled .group-setting-label {
            cursor: not-allowed;
        }

.org-permissions-form .group_setting_disabled .pill-container,.org-settings-form .group_setting_disabled .pill-container,.group-permissions .group_setting_disabled .pill-container,.advanced-configurations-container .group_setting_disabled .pill-container,.channel-permissions .group_setting_disabled .pill-container {
            opacity: 0.7;
        }

.org-permissions-form .group_setting_disabled .pill-container .pill .exit,.org-settings-form .group_setting_disabled .pill-container .pill .exit,.group-permissions .group_setting_disabled .pill-container .pill .exit,.advanced-configurations-container .group_setting_disabled .pill-container .pill .exit,.channel-permissions .group_setting_disabled .pill-container .pill .exit {
                    display: none;
                }

.org-permissions-form .group_setting_disabled .pill-container .input,.org-settings-form .group_setting_disabled .pill-container .input,.group-permissions .group_setting_disabled .pill-container .input,.advanced-configurations-container .group_setting_disabled .pill-container .input,.channel-permissions .group_setting_disabled .pill-container .input {
                pointer-events: none;
                min-height: var(--height-input-pill);
            }

#settings_page,
.two-pane-settings-overlay {
    container: settings-overlay / inline-size;
}

.two-pane-settings-overlay .tab-switcher {
        display: flex;
        flex-wrap: nowrap;
        height: var(--settings-overlay-header-button-height);
    }

.two-pane-settings-overlay #user-group-creation,.two-pane-settings-overlay #stream-creation {
        overflow: auto;
        outline: none;
        -webkit-overflow-scrolling: touch;
    }

.two-pane-settings-overlay #user-group-creation .user-group-creation-body,.two-pane-settings-overlay #stream-creation .user-group-creation-body,.two-pane-settings-overlay #user-group-creation .stream-creation-body,.two-pane-settings-overlay #stream-creation .stream-creation-body {
            padding: 15px 15px 0;
        }

.two-pane-settings-overlay #user-group-creation .settings-sticky-footer,.two-pane-settings-overlay #stream-creation .settings-sticky-footer {
            display: flex;
            justify-content: space-between;
            padding: 9px 15px;
            text-align: right;
            background-color: var(--color-background-modal-bar);
            border-top: 1px solid var(--color-border-modal-bar);
        }

@container settings-overlay (width > 57.142857142857146em) {
            .two-pane-settings-overlay #user-group-creation .settings-sticky-footer,.two-pane-settings-overlay #stream-creation .settings-sticky-footer {
                border-radius: 0 0 6px;
            }
        }

.two-pane-settings-overlay #user-group-creation .create_user_group_member_list_header,.two-pane-settings-overlay #stream-creation .create_user_group_member_list_header,.two-pane-settings-overlay #user-group-creation .create_stream_subscriber_list_header,.two-pane-settings-overlay #stream-creation .create_stream_subscriber_list_header {
            margin-top: 10px;
            margin-bottom: 3px;
        }

.two-pane-settings-overlay #user-group-creation .create_user_group_member_list_header h5,.two-pane-settings-overlay #stream-creation .create_user_group_member_list_header h5,.two-pane-settings-overlay #user-group-creation .create_stream_subscriber_list_header h5,.two-pane-settings-overlay #stream-creation .create_stream_subscriber_list_header h5 {
                display: inline-block;
            }

.two-pane-settings-overlay #user-group-creation .add-user-list-filter,.two-pane-settings-overlay #stream-creation .add-user-list-filter {
            width: 140px;
            float: right;
            margin-top: 10px;
        }

.two-pane-settings-overlay #user-group-creation #user_group_creation_form,.two-pane-settings-overlay #stream-creation #user_group_creation_form,.two-pane-settings-overlay #user-group-creation #stream_creation_form,.two-pane-settings-overlay #stream-creation #stream_creation_form {
            margin: 0;
        }

.two-pane-settings-overlay #user-group-creation #user_group_creation_form .user_group_create_info.show,.two-pane-settings-overlay #stream-creation #user_group_creation_form .user_group_create_info.show,.two-pane-settings-overlay #user-group-creation #stream_creation_form .user_group_create_info.show,.two-pane-settings-overlay #stream-creation #stream_creation_form .user_group_create_info.show {
                margin: 5px;
            }

.two-pane-settings-overlay #user-group-creation #user_group_creation_form #user_group_creating_indicator:not(:empty) {
                    position: absolute;
                    width: 100% !important;
                    height: calc(100% - 105px) !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    background-color: var(
                        --color-background-non-empty-overlay-indicator
                    );
                    z-index: 1;
                }

.two-pane-settings-overlay #stream-creation #user_group_creation_form #user_group_creating_indicator:not(:empty) {
                    position: absolute;
                    width: 100% !important;
                    height: calc(100% - 105px) !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    background-color: var(
                        --color-background-non-empty-overlay-indicator
                    );
                    z-index: 1;
                }

.two-pane-settings-overlay #user-group-creation #stream_creation_form #user_group_creating_indicator:not(:empty) {
                    position: absolute;
                    width: 100% !important;
                    height: calc(100% - 105px) !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    background-color: var(
                        --color-background-non-empty-overlay-indicator
                    );
                    z-index: 1;
                }

.two-pane-settings-overlay #stream-creation #stream_creation_form #user_group_creating_indicator:not(:empty) {
                    position: absolute;
                    width: 100% !important;
                    height: calc(100% - 105px) !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    background-color: var(
                        --color-background-non-empty-overlay-indicator
                    );
                    z-index: 1;
                }

.two-pane-settings-overlay #user-group-creation #user_group_creation_form #stream_creating_indicator:not(:empty) {
                    position: absolute;
                    width: 100% !important;
                    height: calc(100% - 105px) !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    background-color: var(
                        --color-background-non-empty-overlay-indicator
                    );
                    z-index: 1;
                }

.two-pane-settings-overlay #stream-creation #user_group_creation_form #stream_creating_indicator:not(:empty) {
                    position: absolute;
                    width: 100% !important;
                    height: calc(100% - 105px) !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    background-color: var(
                        --color-background-non-empty-overlay-indicator
                    );
                    z-index: 1;
                }

.two-pane-settings-overlay #user-group-creation #stream_creation_form #stream_creating_indicator:not(:empty) {
                    position: absolute;
                    width: 100% !important;
                    height: calc(100% - 105px) !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    background-color: var(
                        --color-background-non-empty-overlay-indicator
                    );
                    z-index: 1;
                }

.two-pane-settings-overlay #stream-creation #stream_creation_form #stream_creating_indicator:not(:empty) {
                    position: absolute;
                    width: 100% !important;
                    height: calc(100% - 105px) !important;
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    background-color: var(
                        --color-background-non-empty-overlay-indicator
                    );
                    z-index: 1;
                }

.two-pane-settings-overlay #user-group-creation #user_group_creation_form #user_group_creating_indicator .loading_indicator_text,.two-pane-settings-overlay #stream-creation #user_group_creation_form #user_group_creating_indicator .loading_indicator_text,.two-pane-settings-overlay #user-group-creation #stream_creation_form #user_group_creating_indicator .loading_indicator_text,.two-pane-settings-overlay #stream-creation #stream_creation_form #user_group_creating_indicator .loading_indicator_text,.two-pane-settings-overlay #user-group-creation #user_group_creation_form #stream_creating_indicator .loading_indicator_text,.two-pane-settings-overlay #stream-creation #user_group_creation_form #stream_creating_indicator .loading_indicator_text,.two-pane-settings-overlay #user-group-creation #stream_creation_form #stream_creating_indicator .loading_indicator_text,.two-pane-settings-overlay #stream-creation #stream_creation_form #stream_creating_indicator .loading_indicator_text {
                    font-weight: 400;
                }

.two-pane-settings-overlay .inner-box {
        margin: 18px;
    }

.two-pane-settings-overlay .group_settings_header,.two-pane-settings-overlay .stream_settings_header {
        flex-wrap: wrap;
        display: flex;
        margin-left: 18px;
    }

.two-pane-settings-overlay .group_settings_header .tab-container .tab-switcher,.two-pane-settings-overlay .stream_settings_header .tab-container .tab-switcher {
                margin: 0;
            }

.two-pane-settings-overlay .group_settings_header .tab-container .ind-tab,.two-pane-settings-overlay .stream_settings_header .tab-container .ind-tab {
                padding: 0 4px;
                min-width: 5.7142em; /* 80px at 14px/em */
                width: auto;
                display: flex;
            }

.two-pane-settings-overlay .group-description-field,.two-pane-settings-overlay .channel-description-field {
        display: flex;
        flex-wrap: wrap;
        /* 10px at 16px */
        margin: 0 0 0.625em;

        /* Subtract the total horizontal padding and border width from the input width
           so that this matches other setting elements using box-sizing: border-box. */
    }

.two-pane-settings-overlay .group-description-field .settings-view-only-textarea,.two-pane-settings-overlay .channel-description-field .settings-view-only-textarea {
            width: calc(
                var(--modal-input-width) - 2 *
                    var(--view-only-field-horizontal-padding) - 2 *
                    var(--input-border-width)
            );
        }

.two-pane-settings-overlay .group-description-field .icon-button,.two-pane-settings-overlay .channel-description-field .icon-button {
            align-items: baseline;
        }

.two-pane-settings-overlay .user-group-description,.two-pane-settings-overlay .stream-description {
        hyphens: auto;
        display: flex;
        align-items: center;
    }

.two-pane-settings-overlay .user-group-description .no-description,.two-pane-settings-overlay .stream-description .no-description {
            font-style: italic;
            color: hsl(0deg 0% 67%);
        }

.two-pane-settings-overlay .checkmark {
        display: none;
        margin-left: 5px;
        color: hsl(0deg 0% 67%);

        cursor: pointer;
    }

.two-pane-settings-overlay .checkmark.show {
            display: block;
        }

.two-pane-settings-overlay .hash::after {
        position: relative;
        content: "#";
    }

.two-pane-settings-overlay .settings {
        position: relative;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

.two-pane-settings-overlay .settings .tab-container {
            padding-top: 5px;
        }

.two-pane-settings-overlay .subscription_settings {
        display: none;
        position: relative;
        width: 100%;
        margin: 0 auto;
        border-radius: 4px;
        top: -1px;
    }

.two-pane-settings-overlay .subscription_settings.show {
            display: block;
        }

/* This works in tandem with ".large-window-alert-notification-container"
           in the right pane title. */

.two-pane-settings-overlay .subscription_settings .small-window-alert-notification-container {
            display: none;
        }

@media (width < 576px) {

.two-pane-settings-overlay .subscription_settings .small-window-alert-notification-container {
                display: flex;
                justify-content: end;
        }
            }

.two-pane-settings-overlay .subscription_settings .small-window-alert-notification-container .stream_change_property_info {
                margin-bottom: 10px;
            }

.two-pane-settings-overlay #stream_settings.subscribers-tab-active {
        /* When the subscribers tab is active, disable simplebar on
           #stream_settings so the panel itself is not scrollable —
           only the subscriber list table scrolls via its own simplebar.
           Simplebar reads the host element's computed overflow-y and
           disables its scrollbar when it sees 'hidden'. */
        overflow-y: hidden;

        /* Propagate the container height through simplebar's wrapper
           DOM to the actual content. :has() targets only the outer
           simplebar-content (the one containing .subscription_settings),
           not the nested one inside .subscriber_list_container. */
    }

.two-pane-settings-overlay #stream_settings.subscribers-tab-active .simplebar-content:has( > .subscription_settings) {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

.two-pane-settings-overlay #stream_settings.subscribers-tab-active .simplebar-content:has( > .subscription_settings) .subscription_settings {
                flex: 1;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }

.two-pane-settings-overlay #stream_settings.subscribers-tab-active .simplebar-content:has( > .subscription_settings) .inner-box {
                flex: 1;
                overflow: hidden;
                display: flex;
                flex-direction: column;
            }

.two-pane-settings-overlay #stream_settings.subscribers-tab-active .simplebar-content:has( > .subscription_settings) .stream_section[data-stream-section="subscribers"] {
                flex: 1;
                overflow: hidden;
            }

.two-pane-settings-overlay #stream_settings.subscribers-tab-active .simplebar-content:has( > .subscription_settings) .stream_section[data-stream-section="subscribers"] .edit_subscribers_for_stream {
                    height: 100%;
                }

.two-pane-settings-overlay #stream_settings.subscribers-tab-active .simplebar-content:has( > .subscription_settings) .stream_section[data-stream-section="subscribers"] .subscriber_list_settings_container {
                    height: 100%;
                }

.two-pane-settings-overlay .two-pane-settings-creation-simplebar-container.subscribers-visible {
        /* When the subscribers step is visible in the stream creation form,
        disable simplebar on the outer container and use flex layout so
        only the subscriber list table scrolls via its own simplebar. */
        overflow-y: hidden;
    }

.two-pane-settings-overlay .two-pane-settings-creation-simplebar-container.subscribers-visible .simplebar-content:has( > .stream-creation-body) {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

.two-pane-settings-overlay .two-pane-settings-creation-simplebar-container.subscribers-visible .simplebar-content:has( > .stream-creation-body) .stream-creation-body {
                flex: 1;
                overflow: hidden;
            }

.two-pane-settings-overlay .two-pane-settings-creation-simplebar-container.subscribers-visible .simplebar-content:has( > .stream-creation-body) .stream-creation-body .subscribers_container {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }

.two-pane-settings-overlay .two-pane-settings-creation-simplebar-container.subscribers-visible .simplebar-content:has( > .stream-creation-body) .stream-creation-body .subscribers_container .stream_create_add_subscriber_container {
                        flex: 1;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                    }

.two-pane-settings-overlay .two-pane-settings-creation-simplebar-container.subscribers-visible .simplebar-content:has( > .stream-creation-body) .stream-creation-body .subscribers_container #people_to_add {
                        flex: 1;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                    }

.two-pane-settings-overlay #stream_settings.subscribers-tab-active .subscriber-list-box,.two-pane-settings-overlay .two-pane-settings-creation-simplebar-container.subscribers-visible .subscriber-list-box {
        /* flex: 1 takes remaining space after the auto-sized siblings. */
        flex: 1;
        overflow: hidden;
        /* Hide borders here since they would extend to the
           full flex item height; they are redeclared on
           .subscriber_list_container instead. */
        border-left: none;
        border-right: none;
        /* This is slightly larger than the height required to show at least one
           subscriber row is shown along with the table header. It is not easy
           to calculate exact height since it depends whether the user has
           permission to remove subscribers or not. */
        min-height: 4.7em;
    }

.two-pane-settings-overlay #stream_settings.subscribers-tab-active .subscriber-list-box .subscriber_list_container,.two-pane-settings-overlay .two-pane-settings-creation-simplebar-container.subscribers-visible .subscriber-list-box:not(#does-not-exist) .subscriber_list_container {
            box-sizing: border-box;
            max-height: 100%;
            /* overflow: clip prevents the native scrollbar that would otherwise
               appear because the simplebar placeholder can overflow the
               container. Unlike overflow: hidden, clip does not disable
               simplebar (simplebar only disables on overflow: hidden). */
            overflow: clip;
            border-left: 1px solid var(--color-border-table-subscriber-list);
            border-right: 1px solid var(--color-border-table-subscriber-list);
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

.two-pane-settings-overlay #personal-stream-settings .stream_change_property_status {
            margin: 9px auto 3px 3px;
        }

.two-pane-settings-overlay .stream_details_box,.two-pane-settings-overlay .group_detail_box {
        margin: 0 0 10px; /* mimic paragraph spacing */
    }

.two-pane-settings-overlay .loading_indicator_text {
        font-weight: 400;
        line-height: 20px;
    }

.two-pane-settings-overlay .subsection-parent .input-group input[type="checkbox"] {
            margin-top: 0;
        }

.two-pane-settings-overlay .subsection-parent .input-group:last-of-type {
            border-bottom: none;
        }

.two-pane-settings-overlay .subsection-parent .input-group input[type="radio"] {
            margin-right: 5px;
        }

.two-pane-settings-overlay .subsection-parent .input-group .inline {
            display: inline !important;
        }

.two-pane-settings-overlay .icon-button {
        font-size: 1.2em;
    }

.new-stream-configuration .input-group.message-retention-setting-group input,.channel-permissions .input-group.message-retention-setting-group input,.group-permissions .input-group.message-retention-setting-group input,.stream_details_box .input-group.message-retention-setting-group input {
                width: 5ch;
                text-align: right;
            }

.new-stream-configuration .settings_select,.channel-permissions .settings_select,.group-permissions .settings_select,.stream_details_box .settings_select {
        /* Match with select elements in settings page. See there
           for comments about these values. */
        box-sizing: unset;
        width: calc(var(--modal-input-width) - 33px);
        max-width: 100%;
        padding-top: 4px;
        padding-bottom: 4px;
        height: 1.4em;
    }

#subscription_overlay .default-stream,
#subscription_overlay .history-public-to-subscribers {
    width: fit-content;
}

#subscription_overlay .default-stream .inline,#subscription_overlay .history-public-to-subscribers .inline {
        display: inline;
    }

#stream_creation_form .default-stream {
    margin: 20px 0;
}

.group-permissions .pill-container,
.advanced-configurations-container .pill-container,
.channel-permissions .pill-container {
    /* Subtract 2 * (2px padding) + 2 * (1px border) */
    min-width: calc(var(--modal-input-width) - 6px);
}

.group-permissions .pill-container .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }

.advanced-configurations-container .pill-container .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }

.channel-permissions .pill-container .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }

.group-permissions .dropdown_widget_with_label_wrapper {
    display: inline-block;
    height: 30px;
    margin-bottom: 10px;
}

#change_user_group_description,
#change_stream_description,
#new_channel_folder_description,
#edit_channel_folder_description {
    height: 80px;
    margin-bottom: 4px;
}

.advanced-configurations-container .stream-message-retention-days-input input[type="text"],.channel-permissions .stream-message-retention-days-input input[type="text"] {
        border-radius: 5px;
        box-shadow: none;
        margin: 0;
        height: inherit;
    }

.group-setting-label {
    /* Avoid having the clickable area extend to the full width of the containing element */
    width: fit-content;
}

.stream-settings-color-selector {
    border: 1px solid var(--color-border-zulip-button);
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.stream-settings-color-selector.action-button-subtle-neutral {
        box-shadow: none;
    }

.stream-settings-color-preview {
    /* 28px at 16px font size */
    width: 1.75em;
    height: 1.75em;
    /* -6px 0 -6px 10px at 16px font size. */
    margin: -0.375em 0 -0.375em -0.625em;
}

#subscription_overlay .channel-folder-widget-container {
    display: flex;
    gap: 0.5em;
    width: auto;
    /* Set minimum width such that the total width of dropdown
    button and "Create folder" button is at least equal to the
    minimum width of pill inputs for permission settings. */
    min-width: var(--modal-input-width);
    flex-wrap: wrap;
}

#subscription_overlay .channel-folder-widget-container .dropdown_widget_value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

#deactivation-confirm-modal .alert {
        padding-right: 14px;
        background-color: var(--color-background-error-main-view-banner);
    }

#deactivation-confirm-modal .cannot-deactivate-group-banner {
        border: none;
        margin: 0;
    }

#deactivation-confirm-modal .cannot-deactivate-group-banner .banner-text {
            margin: 0;
            padding-right: 4px;
        }

#deactivation-confirm-modal .cannot-deactivate-group-banner .permissions-button {
            text-wrap: nowrap;
        }

#deactivation-confirm-modal .cannot-deactivate-group-banner .permissions-button:focus {
                outline: 0;
            }

#deactivation-confirm-modal .cannot-deactivate-group-banner .permissions-button:focus-visible {
                outline: 2px solid var(--color-outline-focus);
            }

@media (width < 992px) {
    .two-pane-settings-container {
        max-width: 95%;
    }
}

/* This ensures the left-border is tall enough. We can't keep this style for
    narrow screens because `right` is absolutely positioned on narrow screens. */
@container settings-overlay (width >= 57.142857142857146em) {
    .two-pane-settings-container .right {
        height: 100%;
    }
}

/* We should eventually consolidate some of these styles with the styles
   in settings.css, using shared classnames. */
@container settings-overlay (width < 57.142857142857146em) {
    .two-pane-settings-container {
        position: relative;
        overflow: hidden;

        /* This variable allows JavaScript to detect whether we are showing both
        the left sidebar and settings content for the current screen width or not. */
        --column-count: 1;
    }

        .two-pane-settings-container .two-pane-settings-header .fa-chevron-left {
            visibility: visible;
        }

        .two-pane-settings-container .two-pane-settings-header.slide-left {
            border-bottom: none;
        }

    .two-pane-settings-overlay .left {
        overflow: hidden;
        width: 100%;
    }

    .two-pane-settings-overlay .right {
        position: absolute;
        transform: translateX(101%);
        transition: transform 0.3s ease;
        background-color: var(--color-background-modal);
        z-index: 10;
        width: 100%;
    }

        .two-pane-settings-overlay .right.show {
            transform: translateX(0%);
        }

    .two-pane-settings-overlay .settings {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (width < 576px) {
        #groups_overlay .user_group_settings_wrapper .button-group,#subscription_overlay .subscription_settings .button-group {
            display: block;
            float: right;
            margin-top: 10px;
        }
}

#stream_members_list,
#user_group_settings .member-list,
#stream_creation_form .subscriber-list,
#user_group_creation_form .member-list {
    table-layout: fixed;
    width: 100%;
}

#stream_members_list:not(.does-not-exist) th,#user_group_settings .member-list th,#stream_creation_form .subscriber-list th,#user_group_creation_form .member-list th,#stream_members_list:not(.does-not-exist) td,#user_group_settings .member-list td,#stream_creation_form .subscriber-list td,#user_group_creation_form .member-list td {
        box-sizing: border-box;
    }

#stream_members_list:not(.does-not-exist) .panel_user_list,#user_group_settings .member-list .panel_user_list,#stream_creation_form .subscriber-list .panel_user_list,#user_group_creation_form .member-list .panel_user_list {
        width: 50%;
    }

#stream_members_list:not(.does-not-exist) .panel_user_list .pill-container,#user_group_settings .member-list .panel_user_list .pill-container,#stream_creation_form .subscriber-list .panel_user_list .pill-container,#user_group_creation_form .member-list .panel_user_list .pill-container {
            max-width: 100%;
        }

#stream_members_list:not(.does-not-exist) .panel_user_list .pill-container .pill-value,#user_group_settings .member-list .panel_user_list .pill-container .pill-value,#stream_creation_form .subscriber-list .panel_user_list .pill-container .pill-value,#user_group_creation_form .member-list .panel_user_list .pill-container .pill-value {
                /* This is needed to unset the max-width value of 165px
                set for user pills in other tables. */
                max-width: unset;
            }

#stream_members_list:not(.does-not-exist) .remove-button-column,#user_group_settings .member-list .remove-button-column {
        width: 3em;
    }

#stream_members_list:not(.does-not-exist) .settings-email-column,#user_group_settings .member-list .settings-email-column {
        width: calc(50% - 3em);
    }

#stream_creation_form .subscriber-list .action-column,#user_group_creation_form .member-list .action-column {
        width: 6em;
    }

#stream_creation_form .subscriber-list .settings-email-column,#user_group_creation_form .member-list .settings-email-column {
        width: calc(50% - 6em);
    }

@media (width < 992px) {
        #stream_members_list:not(.does-not-exist) .panel_user_list,#user_group_settings .member-list .panel_user_list,#stream_creation_form .subscriber-list .panel_user_list,#user_group_creation_form .member-list .panel_user_list {
            width: auto;
        }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/scheduled_messages.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************/

    #reminders-overlay-container .no-overlay-messages,#scheduled_messages_overlay_container .no-overlay-messages {
        display: none;
    }

#reminders-overlay-container .no-overlay-messages:only-child {
            display: block;
        }

#scheduled_messages_overlay_container .no-overlay-messages:only-child {
            display: block;
        }

#scheduled_message_indicator {
    display: block;
    margin-left: 10px;
    font-style: italic;
    color: hsl(0deg 0% 53%);
}

#reminders-overlay-container .message_content {
    cursor: auto;
}

.schedule-reminder-note {
    resize: none;
    width: 100%;
    min-width: 10em;
    padding: var(--schedule-reminder-note-padding);
    /* Set the minimum height such that we start out with 2 lines of text. */
    min-height: calc(2em * var(--base-line-height-unitless));
    /* Set the maximum height of textarea to be enough for 10 lines of text. */
    max-height: calc(
        (10em * var(--base-line-height-unitless)) +
            (2 * var(--schedule-reminder-note-padding))
    );
    overflow-y: auto;

    background-color: var(--background-color-textarea);

    font-size: 1em;
    line-height: var(--base-line-height-unitless);
    font-family: inherit;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/drafts.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/

    .drafts-container .banner-container {
        margin: 0 25px 5px;
    }
.drafts-container .header-body {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        gap: 5px;
    }
.drafts-container .header-body .drafts-header-note {
            text-align: left;
            margin-left: 25px;
        }
@media (width < 992px) {
        .drafts-container .header-body .drafts-header-note {
                text-align: center;
                margin-left: 0;
        }
            }
.drafts-container .header-body .delete-drafts-group {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
.drafts-container .header-body .delete-drafts-group .delete-selected-drafts-button:focus {
                    background-color: hsl(0deg 0% 93%);
                }
.drafts-container .header-body .delete-drafts-group .select-drafts-button {
                display: flex;
                align-items: center;
                gap: 5px;
                margin-right: 25px;
                padding-left: 15px;
                padding-right: 15px;
            }
.drafts-container .header-body .delete-drafts-group .select-drafts-button:focus {
                    background-color: hsl(0deg 0% 93%);
                }
.drafts-container .header-body .delete-drafts-group .select-state-indicator {
                width: 15px;
            }
@media (width < 992px) {
        .drafts-container .header-body .delete-drafts-group {
                margin-top: 5px;
                width: 100%;
        }
            }
@media (width < 992px) {
        .drafts-container .header-body {
            display: block;
    }
        }
.drafts-container .drafts-list h2 {
            font-size: 1.1em;
            line-height: normal;
            margin-bottom: 5px;
            white-space: pre-wrap;
        }
.drafts-container .draft-selection-checkbox {
        margin-top: 0.25em;
        /* Required to make sure that the checkbox icon stays inside
           the grid. Any value greater than 13px (original width of
           the checkbox icon) will work. */
        width: 15px;
    }

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/input_pill.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
.pill-container {
    display: inline-flex;
    gap: var(--vertical-spacing-input-pill) var(--horizontal-spacing-input-pill);
    flex-wrap: wrap;
    min-width: 0;

    background-color: var(--color-background-pill-container);

    padding: var(--outer-spacing-input-pill-container);
    border: 1px solid var(--color-border-pill-container);
    border-radius: 4px;
    align-items: center;

    cursor: text;
}

.pill-container .pill {
        display: inline-flex;
        align-items: center;
        max-width: 100%;
        min-width: 0;
        position: relative;

        height: var(--height-input-pill);
        /* Make sure the `height` property
           is the authoritative source of an
           input pill's height, without being
           affected by borders, etc. */
        box-sizing: border-box;
        margin: 0;

        color: inherit;

        border-radius: 4px;
        background-color: var(--color-background-input-pill);
        cursor: pointer;

        /* Not focus-visible, because we want to support mouse+backpace to
           delete pills */
    }

.pill-container .pill:focus {
            /* Box shadow instead of border, because user pills have avatars
               that extend all the way to the edge of the pill. */
            box-shadow: 0 0 0 1px var(--color-focus-outline-input-pill) inset;
            outline: none;

            /* For user pills with avatars, the avatar covers up the box
               shadow, so we also have to make a border around the avatar. */
        }

.pill-container .pill:focus .pill-image-border {
                border-right: none;
                border-radius: 4px 0 0 4px;
                border-color: var(--color-focus-outline-input-pill);
            }

/* Ensure a hover state on pills that can be clicked
           to reveal a user card. */

.pill-container .pill.view_user_profile:hover {
            background-color: var(--color-background-input-pill-hover);
        }

.pill-container .pill .invited-user-name {
            flex: 1;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 3px;
        }

.pill-container .pill .pill-image {
            height: var(--height-input-pill);
            width: var(--height-input-pill);
            border-radius: 4px;
        }

.pill-container .pill .pill-image-border {
            height: var(--height-input-pill);
            width: var(--height-input-pill);
            position: absolute;
            box-sizing: border-box;
            border: 1px solid;
            border-radius: 4px;
            border-color: var(--color-border-input-pill-image);
        }

.pill-container .pill .pill-label {
            /* Treat as flex container to better position status
               emoji and control ellipsis on the pill value. */
            display: flex;
            /* Allow label to collapse for ellipsis effect. */
            min-width: 0;
            align-items: center;
            margin: 0 var(--input-pill-side-padding);
        }

.pill-container .pill .pill-label .zulip-icon-bot {
                margin-left: 0.4em;
            }

.pill-container .pill .pill-value {
            flex: 0 1 auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.5;
        }

.pill-container .pill .pill-close-button,.pill-container .pill .pill-expand-button {
            font-size: 0.7142em; /* 10px at 14px em */
            -webkit-text-decoration: none;
            text-decoration: none;
            /* Let the close button's box stretch,
               but no larger than the height of the
               banner box when the action button
               achieves its full height (margin,
               padding, and height), which keeps
               the X vertically centered with it. */
            align-self: stretch;
            max-height: 52px;
            /* Display as flexbox to better control
               the X icon's position. This creates
               an anonymous flexbox item out of the
               ::before content where the icon sits. */
            display: flex;
            align-items: center;
            /* !important overrides `.dark-theme:root a:hover` */
            color: var(--color-input-pill-close) !important;
            opacity: 0.7;
        }

.pill-container .pill .exit,.pill-container .pill .expand {
            width: var(--length-input-pill-exit);
            height: var(--length-input-pill-exit);
            display: flex;
            justify-content: center;
            margin-right: 2px;
            border-radius: 2px;
        }

.pill-container .pill .exit:hover,.pill-container .pill .expand:hover {
                background: var(--color-background-input-pill-exit-hover);
            }

.pill-container .pill .exit:hover .pill-close-button,.pill-container .pill .expand:hover .pill-close-button,.pill-container .pill .exit:hover .pill-expand-button,.pill-container .pill .expand:hover .pill-expand-button {
                    opacity: 1;
                }

.pill-container .pill .group-members-count {
            opacity: 0.65;
        }

.pill-container .pill.deactivated-pill {
            background-color: var(--color-background-deactivated-user-pill);
            opacity: 0.7;
        }

.pill-container .pill.deactivated-pill:focus {
                border-color: var(--color-focus-outline-deactivated-user-pill);
            }

.pill-container .pill.deactivated-pill .pill-close-button {
                /* !important overrides `.dark-theme:root a:hover` */
                color: var(--color-close-deactivated-user-pill) !important;
            }

.pill-container .pill.deactivated-pill .exit:hover {
                background: var(
                    --color-background-exit-hover-deactivated-user-pill
                );
            }

.pill-container .pill.deactivated-pill  > img {
                opacity: 0.5;
            }

.pill-container .slashed-circle-icon {
        position: absolute;
        background-color: var(--color-background-deactivated-user-pill);
        padding: 0.2em;
        font-size: 0.7em;
        border-radius: 0.625em;
        bottom: -0.0625em;
        left: 1.1em;
        opacity: 1;
    }

.pill-container.not-editable {
        cursor: not-allowed;
        border: none;
        background-color: transparent;
        padding: 0;
    }

.pill-container.not-editable .pill {
            padding-right: 4px;
            cursor: not-allowed;
        }

.pill-container.not-editable .pill:focus {
                color: inherit;
                border: 1px solid hsl(0deg 0% 0% / 15%);
                background-color: hsl(0deg 0% 0% / 7%);
            }

.pill-container.not-editable .pill .exit {
                display: none;
            }

.pill-container .input {
        display: inline-block;
        /* This keeps the input sized to
           the same height as pills. */
        line-height: var(--height-input-pill);
        padding: 0 4px;

        min-width: 2px;
        overflow-wrap: anywhere;
        flex: 1 1 auto;

        outline: none;
    }

.pill-container .input.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;
        }

.pill-container.not-editable-by-user {
        cursor: not-allowed;
    }

.pill-container.not-editable-by-user .pill {
            cursor: not-allowed;
        }

.pill-container.not-editable-by-user .exit {
            display: none;
        }

.pill-container.invalid {
        border-color: var(--color-invalid-input-border);
        box-shadow: var(--invalid-input-box-shadow);
    }

.person_picker .pill:hover {
        background-color: var(--color-background-input-pill-hover);
    }

#compose-direct-recipient .pill-container {
    border: 1px solid var(--color-compose-recipient-box-border-color);
}

#compose-direct-recipient .pill-container .input:first-child:empty::before {
        content: attr(data-no-recipients-text);
        opacity: 0.5;
    }

#compose-direct-recipient .pill-container:has(.input:focus) {
        border-color: var(--color-compose-recipient-box-has-focus);
    }

/* In the low-attention state, prevent this from being
           part of the flex layout on .pill-container when there
           are already user pills (when the "Add user" text is
           never displayed, as specified on the
           .input:first-child:empty::before selector above).
           We avoid doing this when there is focus inside the
           pill container, so that typing in the recipient row
           after narrowing to a DM conversation with `Ctrl + .`
           doesn't create a palimpsest of text over the existing
           user pill. */

.low-attention-recipient-row #compose-direct-recipient .pill-container:has(.pill):not(:focus-within) #private_message_recipient {
            position: absolute;
            top: 0;
            left: 0;
        }

#invitee_emails_container .pill-container,
#integration-url-filter-branches .pill-container {
    width: 100%;
    box-sizing: border-box;
    background-color: var(
        --color-background-pill-container-without-placeholder
    );
}

#invitee_emails_container .pill-container.not-editable-by-user {
    height: var(--height-input-pill);
    background-color: var(--color-background-pill-container-input-disabled);
}

.add_subscribers_container .pill-container,
.add_streams_container .pill-container,
.add-user-group-container .pill-container,
.add_members_container .pill-container {
    width: 100%;
}

.add_subscribers_container .pill-container .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }

.add_streams_container .pill-container .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }

.add-user-group-container .pill-container .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }

.add_members_container .pill-container .input:first-child:empty::before {
        opacity: 0.5;
        content: attr(data-placeholder);
    }

.add_streams_container .input,
.add-user-group-container .input {
    flex-grow: 1;
}

.display_only_pill,
.display_only_group_pill {
    /* Ensure middle alignment in table contexts. */
    vertical-align: middle;
    /* Resetting these values to prevent unintended inheritance from .pill-container styles. */
    padding: 0;
    border: 0;

    /* Particularly in light mode, pill colors are almost identical
       to the settings modal background. We place a higher-contrast
       outline on them accordingly. */
}

.display_only_pill .pill,.display_only_group_pill .pill,.display_only_pill .pill:focus,.display_only_group_pill .pill:focus {
        outline: 1px solid var(--color-outline-low-attention-input-pill);
        /* We offset the outline so that pills do not grow in size
           when presented with an outline. */
        outline-offset: -1px;

        /* Display `(you)` with the same 5px padding to the right
           as ordinary .pill-value text. */
    }

.display_only_pill .pill:not(.does-not-exist) .my_user_status,.display_only_group_pill .pill:not(.does-not-exist) .my_user_status,.display_only_pill .pill:focus .my_user_status,.display_only_group_pill .pill:focus .my_user_status {
            padding-right: 5px;
        }

/* Zero out the margin placed to the left of the bot icon,
           and add in the 5px of padding to the right. Specificity
           necessitates duplicating the .pill-label class here. */

.display_only_pill .pill:not(.does-not-exist) .pill-label .zulip-icon-bot,.display_only_group_pill .pill:not(.does-not-exist) .pill-label .zulip-icon-bot,.display_only_pill .pill:focus .pill-label .zulip-icon-bot,.display_only_group_pill .pill:focus .pill-label .zulip-icon-bot {
            margin-left: 0;
            padding-right: 5px;
        }

.display_only_pill .pill:not(.does-not-exist) .deactivated-user-icon,.display_only_group_pill .pill:not(.does-not-exist) .deactivated-user-icon,.display_only_pill .pill:focus .deactivated-user-icon,.display_only_group_pill .pill:focus .deactivated-user-icon {
            padding-right: 5px;
        }

.display_only_pill .pill:focus,.display_only_group_pill .pill:focus {
        /* We don't want to flash a focus outline
               when clicking on display-only pills. */
        box-shadow: unset;
        /* We also suppress the border on the pill
               image. */
    }

.display_only_pill .pill:focus .pill-image-border,.display_only_group_pill .pill:focus .pill-image-border {
            border: 0;
        }

/* These pill are similar to .not-editable, but are meant to show
   profile cards when clicked. */
.user-type-custom-field-pill-container > .display_only_pill,
.panel_user_list > .pill-container,
.creator_details > .display_only_pill {
    gap: 2px;
    flex-wrap: nowrap;
}
.user-type-custom-field-pill-container > .display_only_pill.inline_with_text_pill > .pill-deactivated,.panel_user_list > .pill-container.inline_with_text_pill > .pill-deactivated,.creator_details > .display_only_pill.inline_with_text_pill > .pill-deactivated {
        font-size: 0.9em;
        padding-right: 2px;
    }
.user-type-custom-field-pill-container > .display_only_pill:hover,.panel_user_list > .pill-container:hover,.creator_details > .display_only_pill:hover {
        color: inherit;
    }
/* `settings.css` applies a :focus-within box-shadow to `.custom_user_field .pill-container`
    and `.bot_owner_user_field .pill-container`.That effect conflicts with the unified pill
    styling (no shadow), so we override it here. */
.user-type-custom-field-pill-container > .display_only_pill:focus-within {
        box-shadow: none;
    }
.panel_user_list > .pill-container:focus-within {
        box-shadow: none;
    }
.creator_details > .display_only_pill:focus-within {
        box-shadow: none;
    }
.user-type-custom-field-pill-container > .display_only_pill  > .pill,.panel_user_list > .pill-container  > .pill,.creator_details > .display_only_pill  > .pill {
        border: none;
        -webkit-text-decoration: none;
        text-decoration: none;
    }
.user-type-custom-field-pill-container > .display_only_pill > .pill:focus,.panel_user_list > .pill-container > .pill:focus,.creator_details > .display_only_pill > .pill:focus {
            color: inherit;
        }
.user-type-custom-field-pill-container > .display_only_pill > .pill  > .pill-label,.panel_user_list > .pill-container > .pill  > .pill-label,.creator_details > .display_only_pill > .pill  > .pill-label {
            margin: 0;
        }
.user-type-custom-field-pill-container > .display_only_pill > .pill > .pill-label  > .pill-value,.panel_user_list > .pill-container > .pill > .pill-label  > .pill-value,.creator_details > .display_only_pill > .pill > .pill-label  > .pill-value {
                padding: 5px;
                max-width: 165px;
            }

#user-profile-modal .user-type-custom-field-pill-container {
        display: inline-flex;
        gap: var(--vertical-spacing-input-pill)
            var(--horizontal-spacing-input-pill);
        max-width: 100%;
        flex-wrap: wrap;

        /* We override the `.pill-container` style defined in
         `settings.css` to ensure it expands to full width, preventing
        names in the pill from being cut off in the user profile modal. */
    }

#user-profile-modal .user-type-custom-field-pill-container .pill-container {
            max-width: 100%;
        }

/* We're overriding the `.pill-value` style defined
        in `settings.css` to ensure that names inside the pill
        render fully and aren't cut off in the user profile modal. */

#user-profile-modal .user-type-custom-field-pill-container .pill-value {
            max-width: 100%;
        }

.group_entirely_not_subscribed .display_only_group_pill,
.creator_details > .display_only_pill {
    /* In places where the pills are not used in tables,
       but instead alongside text, we revert back to the
       baseline vertical alignment. */
    vertical-align: baseline;
}

.creator_details > .display_only_pill.inline_with_text_pill {
    padding: 0;
}

.creator_details > .display_only_pill.inline_with_text_pill  > .pill {
        margin: 0;
        align-items: baseline;
    }

.creator_details > .display_only_pill.inline_with_text_pill > .pill  > .pill-image {
            /* Add line-height equal to height to mimic baseline alignment. */
            line-height: 20px;
            align-self: center;
        }

.creator_details > .display_only_pill.inline_with_text_pill > .pill > .pill-label  > .pill-value {
                padding: 0 5px;
                max-width: 200px;
            }

.creator_details > .display_only_pill.inline_with_text_pill > .pill > .pill-label  > .my_user_status {
                margin-right: 2px;
            }

.display_only_group_pill .zulip-icon-user-group {
    /* Reserve the same square box for the user-group
       icon as on pill images. */
    height: var(--height-input-pill);
    width: var(--height-input-pill);
    /* Center the icon in the box using flex. */
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

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

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

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/informational_overlays.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************/

    .informational-overlays .overlay-content {
        width: var(--informational-overlay-max-width);
        margin: 0 auto;
        position: relative;
        top: calc((30vh - 50px) / 2);
        border-radius: 4px;
        overflow: hidden;

        background-color: var(--color-background-modal);
    }

.informational-overlays .overlay-tabs {
        padding: 10px 0;
        border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
    }

.informational-overlays .overlay-tabs .tab-switcher {
            margin-left: 15px;
        }

.informational-overlays .overlay-tabs .exit {
            float: right;
            font-size: 1.5rem;
            color: hsl(0deg 0% 67%);
            font-weight: 600;
            margin: 0 15px;
            cursor: pointer;
        }

.informational-overlays .overlay-modal {
        padding-bottom: 10px;
    }

.informational-overlays .overlay-modal .overlay-scroll-container {
            height: 70vh;
            text-align: center;
            outline: none;
        }

.informational-overlays .overlay-modal .overlay-scroll-container .help-table {
                table-layout: fixed;
            }

.informational-overlays .overlay-modal .overlay-scroll-container th {
                font-weight: 400;
            }

.informational-overlays td.operator {
        font-size: 0.9em;
    }

.informational-overlays .poll-question-header {
        display: inline;
    }

.hotkeys_table {
    table-layout: fixed;
    width: 100%;
    vertical-align: middle;
    display: table;
}

.hotkeys_table td.definition {
        /* keeps dividing line at same width for all tables in model. */
        width: calc(50% - 11px);
        text-align: right;
    }

.hotkeys_table td.definition .emoji-1f44d {
        vertical-align: middle;
        margin-bottom: 0.6em;
    }

.hotkeys_table .hotkey {
        font-weight: normal;
    }

.hotkeys_table .arrow-key {
        font-size: 1.36em;
        line-height: 1;
        padding: 0 0.2em 0.2em;
    }

.hotkeys_table th {
        width: 245px;
        text-align: center;
        /* aligns table name with dividing line */
    }

.hotkeys_table td:not(.definition) {
        text-align: left;
        white-space: normal;
        font-weight: bold;
    }

#keyboard-shortcuts table {
    margin-bottom: 10px !important;
}

@media only screen and (width < 768px) {
        .informational-overlays .overlay-content {
            width: calc(100% - 20px);
            /* Constrain to same width as in larger viewports. */
            max-width: var(--informational-overlay-max-width);
        }

        .informational-overlays .tab-switcher {
            display: flex;
        }

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

        .informational-overlays .hotkeys_table {
            width: 100%;
            display: table;
        }
}

#message-formatting-first-header,
#search-operators-first-header {
    width: 40%;
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/compose.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
#legacy-closed-compose-box {
    text-align: right;
    display: flex;
    column-gap: 4px;
    flex-direction: row;
    /* With precisely controlled line-heights
       in this area, stretch will both center
       and maintain uniform heights between the
       reply button and the new-message button. */
    align-items: stretch;
}

#legacy-closed-compose-box .compose_mobile_button {
        /* Keep the new message button sized to match
           adjacent buttons. */
        min-width: inherit;
        padding: 3px 10px;
        border-radius: 4px;
        outline: none;
        /* This is ugly, but necessary to use the
           text + for the compose button. An icon
           would likely be a better choice here.
           1.2em is 16.8px at 14px em. */
        font-size: 1.2em;
        font-family: inherit;
        /* 1.2em is 16.8px at 14px em; this
           maintains the 20px em-equivalent compose
           line height, but at a 16.8px em. */
        line-height: 1.19em;
        font-weight: 400;
        color: var(--color-text-default);
        background-color: var(--color-background-compose-new-message-button);
        border: 1px solid var(--color-border-compose-new-message-button);
    }

#legacy-closed-compose-box .compose_mobile_button:hover {
            background-color: var(
                --color-background-compose-new-message-button-hover
            );
            border-color: var(--color-border-compose-new-message-button-hover);
        }

#legacy-closed-compose-box .compose_mobile_button:active {
            background-color: var(
                --color-background-compose-new-message-button-active
            );
            border-color: var(--color-border-compose-new-message-button-hover);
        }

#legacy-closed-compose-box .reply_button_container {
        display: flex;
        flex-grow: 1;

        /* Adjust flexbox default `min-width` to allow smaller container sizes. */
        min-width: 0;

        /* Button-like styling */
        border-radius: 4px;
        background-color: var(
            --color-compose-collapsed-reply-button-area-background
        );
        border: 1px solid
            var(--color-compose-collapsed-reply-button-area-border);
    }

#legacy-closed-compose-box .reply_button_container:hover,#legacy-closed-compose-box .reply_button_container:focus {
            background-color: var(
                --color-compose-collapsed-reply-button-area-background-interactive
            );
            border-color: var(
                --color-compose-collapsed-reply-button-area-border-interactive
            );
        }

#legacy-closed-compose-box .reply_button_container #left_bar_compose_reply_button_big,#legacy-closed-compose-box .reply_button_container #new_conversation_button {
            /* Keep the new message button sized to match
               adjacent buttons. */
            font-size: inherit;
            font-family: inherit;
            min-width: inherit;
            padding: 3px 10px;
            outline: none;
            border: none;
            color: var(--color-text-default);
            background: var(--color-compose-embedded-button-background);
            border-radius: 3px;
            line-height: var(--line-height-compose-buttons);
        }

#legacy-closed-compose-box .reply_button_container .compose-reply-button-wrapper {
            flex-grow: 1;
            display: flex;
            overflow: hidden;
        }

#legacy-closed-compose-box .reply_button_container #left_bar_compose_reply_button_big {
            width: 100%;
            text-align: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

#legacy-closed-compose-box .reply_button_container #new_conversation_button {
            /* Remove the  `padding` to prevent margin from affecting parent height. */
            padding: 0 10px;
            min-width: inherit;
            margin: 1px;
            flex-shrink: 0;
            align-self: stretch;

            color: var(--color-compose-embedded-button-text-color);
        }

#legacy-closed-compose-box .reply_button_container #new_conversation_button:hover {
                background-color: var(
                    --color-compose-embedded-button-background-hover
                );
                color: var(--color-compose-embedded-button-text-color-hover);
            }

@media (width >= 576px) {

#legacy-closed-compose-box .mobile_button_container {
            display: none;
    }
        }

#legacy-closed-compose-box #new_conversation_button,#legacy-closed-compose-box .new_direct_message_button_container {
        flex-shrink: 0;
        line-height: var(--line-height-compose-buttons);
    }

@media (width < 576px) {

#legacy-closed-compose-box #new_conversation_button,#legacy-closed-compose-box .new_direct_message_button_container {
            /* Override inline style injected by jQuery hide() */
            display: none !important;
    }
        }

#legacy-closed-compose-box .new_direct_message_button_container {
        display: flex;
    }

#legacy-closed-compose-box #new_direct_message_button {
        /* Keep the new message button sized to match
           adjacent buttons. */
        align-self: stretch;
        font-size: inherit;
        font-family: inherit;
        min-width: inherit;
        line-height: var(--line-height-compose-buttons);
        padding: 3px 10px;
        border-radius: 4px;
        outline: none;
        color: var(--color-text-default);
        background-color: var(--color-background-compose-new-message-button);
        border: 1px solid var(--color-border-compose-new-message-button);
    }

#legacy-closed-compose-box #new_direct_message_button:hover {
            background-color: var(
                --color-background-compose-new-message-button-hover
            );
            border-color: var(--color-border-compose-new-message-button-hover);
        }

#legacy-closed-compose-box #new_direct_message_button:active {
            background-color: var(
                --color-background-compose-new-message-button-active
            );
            border-color: var(--color-border-compose-new-message-button-hover);
        }

/* Main geometry for this element is in zulip.css */
#compose-content {
    background-color: var(--color-compose-box-background);
    padding: 4px 4px 6px;
    border: 1px solid var(--color-border-compose-content);
    border-radius: 9px 9px 0 0;
    box-shadow: 0 0 0 hsl(236deg 11% 28%);
    height: 100%;
    display: flex;
    flex-flow: column;
    box-sizing: border-box;
}
#compose-content:hover .composebox-buttons > button {
            opacity: 1;
        }

.message_comp {
    display: none;
    padding: 0 7px 0 0;
}

.message_comp #compose_banners {
        max-height: min(25vh, 240px);
        overflow-y: auto;
        /* Align to compose controls; that's 112px width,
           plus 4px of grid gap for 116px here. */
        margin-right: calc(var(--compose-send-controls-width) + 4px);
    }

.message_comp #compose_banners .main-view-banner {
            padding-right: 4px;
        }

.message_comp #compose_banners .main-view-banner .main-view-banner-close-button {
                outline-offset: 0;
                border-radius: 4px;
            }

.compose_table {
    height: 100%;
    display: flex;
    flex-flow: column;
}

.compose_table #compose-recipient.compose-recipient-direct-selected #compose_select_recipient_widget_wrapper {
                /* As the DM-pill area expands, we want to
                   hold the DM picker to the first line. */
                align-self: flex-start;
            }

.compose_table #compose-recipient.compose-recipient-direct-selected #compose_select_recipient_widget {
                border-radius: 4px !important;
                /* This height is necessary only for the
                   DM picker, so that it does not stretch
                   open taller with multiple rows of user
                   pills. */
                height: var(--compose-recipient-box-min-height);
            }

.compose_table #compose-recipient.compose-recipient-direct-selected .topic-marker-container {
                /* As the DM-pill area expands, we likewise
                   want to keep the topic marker aligned with
                   the DM picker. */
                align-self: flex-start;
            }

.compose_table #compose-recipient .topic-marker-container {
            /* Ensure the marker ( < ) stays centered vertically
              with the dropdown, even when adjacent stacking pills
              in, e.g., a group DM. */
            align-self: center;
            display: flex;
            align-items: center;
            /* Ensure horizontal centering, too. */
            justify-content: center;
            /* Disallow shrinking or growth, which can cause
               little layout shifts with pills. */
            flex: 0 0 auto;
            height: var(--compose-recipient-box-min-height);
        }

.compose_table #compose-recipient .topic-marker-container .conversation-arrow {
                font-size: 1.1429em; /* 16px / 14px em */
                /* Fix the line-height to the font size
                   to maintain a circle that scales. */
                line-height: 1;
                border-radius: 50%;
                padding: 2px;
                margin: 0 3px;
                color: var(--color-compose-chevron-arrow);
                -webkit-text-decoration: none;
                text-decoration: none;
                cursor: default;
                transition: 0.2s ease-in-out;
                transition-property: background, color;
            }

.compose_table #compose-recipient .topic-marker-container .conversation-arrow.narrow_to_compose_recipients {
                    background: var(
                        --color-narrow-to-compose-recipients-background
                    );
                    color: var(--color-narrow-to-compose-recipients);
                    cursor: pointer;
                }

.compose_table #compose-recipient .topic-marker-container .conversation-arrow.narrow_to_compose_recipients:hover {
                        background: var(
                            --color-narrow-to-compose-recipients-background-hover
                        );
                        color: var(--color-narrow-to-compose-recipients-hover);
                    }

.compose_table #compose-direct-recipient {
        flex-grow: 1;
        display: grid;
        grid-template-columns: 1fr;
        position: relative;
        align-items: stretch;
    }

.compose_table #compose-direct-recipient .compose-new-recipient-button {
            /* Takes up vertical space in pill container excluding 1px
               container outline and 1px padding */
            height: 1.75em;
            width: 1.75em;
            position: absolute;
            right: 0.0625em;
            top: 0.0625em;
        }

.compose_table #compose-direct-recipient .pill-container {
            /* recipient button width and 1px container width */
            padding-right: 1.8125em;
        }

.compose_table .message_header {
        background: none;
        background-color: hsl(0deg 0% 92%);
        border: none;
        border-radius: 0;
        box-shadow: none !important;
    }

.compose_table .messagebox {
        box-shadow: none !important;
    }

#send_message_form {
    margin: 0;
    height: 100%;
}

#send_message_form .messagebox {
        /* normally 5px 14px; pull in the right and bottom a bit */
        cursor: default;
        flex: 1;
        padding: 0;
        background: none;
        box-shadow: none;
        border: none;
        height: 100%;
        display: grid;
        /* Vlad's design calls for 122px for the send column
           at its widest; 112px accounts for 6px of gap and
           4px outside padding. */
        grid-template:
            minmax(0, 1fr) var(--compose-formatting-buttons-row-height)
            / minmax(0, 1fr) var(--compose-send-controls-width);
        grid-template-areas:
            "message-content-container message-send-controls-container"
            "message-formatting-controls-container message-send-controls-container";
        gap: 0 4px;
    }

#send_message_form .message_content {
        margin-right: 0;
    }

#message-content-container {
    grid-area: message-content-container;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr) var(
            --composebox-buttons-width
        );
    grid-template-areas: "message-content composebox-buttons";
    border-radius: 4px;
    border: 1px solid var(--color-message-content-container-border);
}

#message-content-container:has(.new_message_textarea:focus) {
        border-color: var(--color-message-content-container-border-focus);
    }

#message-content-container:has(.new_message_textarea.invalid),#message-content-container:has(.new_message_textarea.invalid:focus) {
        border-color: var(--color-invalid-input-border);
        box-shadow: var(--invalid-input-box-shadow);
    }

#message-content-container:has(.new_message_textarea.textarea-over-limit),
.edit-content-container:has(.message_edit_content.textarea-over-limit) {
    box-shadow: 0 0 0 1pt
        var(--color-message-content-container-border-over-limit);
}

#message-content-container:has(
        .new_message_textarea.textarea-approaching-limit
    ),
.edit-content-container:has(.message_edit_content.textarea-approaching-limit) {
    box-shadow: 0 0 0 1pt
        var(--color-message-content-container-border-approaching-limit);
}

#message-content-container:has(.new_message_textarea.textarea-over-limit.flash),
#message-content-container:has(
        .new_message_textarea.textarea-approaching-limit.flash
    ),
.edit-content-container:has(.message_edit_content.textarea-over-limit.flash),
.edit-content-container:has(
        .message_edit_content.textarea-approaching-limit.flash
    ) {
    /* This should align with the timing in compose_validate.validate_message_length. */
    animation: message-limit-flash 0.5s ease-in-out 1;
}

#message-content-container .composebox-buttons {
    grid-area: composebox-buttons;
    /* z-index is needed to avoid flickering of cursor and the
    button when hovering it in preview mode. */
    z-index: 1;
    height: max-content;
}

#message-content-container .composebox-buttons button {
        width: 24px;
        /* Override any UA stylesheet padding, such as that
           added by mobile Safari. */
        padding: 0;
        border: none;
        aspect-ratio: 1 / 1;
        background-color: var(--color-composebox-button-background);
        color: var(--color-composebox-button);
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition:
            opacity 0.4s ease-in,
            color 0.1s ease-in,
            background-color 0.1s ease-in;
        font-size: inherit;
    }

#message-content-container .composebox-buttons button:hover {
            background-color: var(--color-composebox-button-background-hover);
            color: var(--color-composebox-button-hover);
        }

#message-content-container .composebox-buttons button:focus {
            outline: 0;
        }

#message-content-container .composebox-buttons button:focus-visible {
            outline: 2px solid var(--color-outline-focus);
        }

#message-content-container .composebox-buttons .collapse-composebox-button,#message-content-container .composebox-buttons .maximize-composebox-button {
        display: none;
    }

#compose-textarea,
#preview-message-area-container {
    grid-area: message-content;
}

#compose-textarea,
#preview_message_area {
    margin-right: calc(var(--composebox-buttons-width) * -1);
    padding-right: var(--composebox-buttons-width);
    background-color: var(--color-compose-message-content-background);
    color: var(--color-text-default);
}

#compose-textarea.textarea-over-limit,#preview_message_area.textarea-over-limit {
        background-color: var(
            --color-compose-message-content-background-over-limit
        );
    }

#compose-textarea.textarea-approaching-limit,#preview_message_area.textarea-approaching-limit {
        background-color: var(
            --color-compose-message-content-background-approaching-limit
        );
    }

.surround-formatting-buttons-row {
    /* This is to extend it under the formatting buttons
       row, so that any border / box-shadow styles applied
       to it surround the formatting buttons row as well. */
    padding-bottom: var(--compose-formatting-buttons-row-height);
    /* The extra 1px of margin-bottom is to ensure the 1px of
       border-bottom shows below the formatting buttons row. */
    margin-bottom: calc(
        (var(--compose-formatting-buttons-row-height) + 1px) * -1
    );
}

#preview-message-area-container {
    /* Keep preview container invisible outside
       of preview mode. */
    display: none;
}

#message-send-controls-container {
    grid-area: message-send-controls-container;
    /* A columnar flex does a nice job here
       holding Drafts to the top of the
       container, and the send button to
       the bottom--even as the compose box
       expands or contracts. */
    display: flex;
    flex-direction: column;
    /* With a columnar flex, this ensures that
       send controls occupy the same space as
       the adjacent textbox. */
    justify-content: space-between;
    /* We add 6px of margin to the grid-gap of
       6px, for 12px of space between the Send
       button and the textarea. */
    margin-left: 6px;
}

@media (width < 576px), ((width >= 576px) and (width < 849px)) {

#message-send-controls-container {
        margin-left: 0;
}
    }

#message-formatting-controls-container {
    grid-area: message-formatting-controls-container;
    border-radius: 0 0 3px 3px;
    background-color: var(--color-message-formatting-controls-container);
    /* margin on either side to let the border of
       .message-content-container show through. */
    margin: 0 1px;
}

.compose-scrolling-buttons-container {
    display: grid;
    /* The scroller buttons are set to a 48px width that does not scale;
       the idea being that that's a generous target area, and that it
       would be better not to consume more space at larger font sizes
       under narrower screen sizes. */
    grid-template-columns:
        [scroller-backward-start buttons-start] 48px [scroller-backward-end] minmax(
            0,
            1fr
        )
        [scroller-forward-start] 48px [scroller-forward-end buttons-end];
    grid-template-rows: auto;
}

.compose-scrollable-buttons {
    grid-area: buttons;
    overflow-x: scroll;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.formatting-control-scroller-button {
    z-index: 5;
    display: flex;
    align-items: center;

    border-radius: 0;
    border: 0;

    color: var(--color-compose-scroll-icon);
    background: transparent;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    font-size: inherit;
}

.formatting-control-scroller-button:focus {
        outline: 0;
    }

.formatting-scroller-backward {
    grid-area: scroller-backward;
    justify-content: flex-start;
    border-radius: 0 0 0 3px;
    background: var(--gradient-compose-scroll-backward);
}

.formatting-scroller-backward:hover {
        background: var(--gradient-compose-scroll-backward-hover);
    }

.formatting-scroller-backward:active {
        background: var(--gradient-compose-scroll-backward-active);
    }

.formatting-scroller-backward:active .scroller-backward-icon {
            /* Subtly shift arrow in scroll direction. */
            margin-left: -2px;
        }

.formatting-scroller-forward {
    grid-area: scroller-forward;
    justify-content: flex-end;
    border-radius: 0 0 3px;
    background: var(--gradient-compose-scroll-forward);
}

.formatting-scroller-forward:hover {
        background: var(--gradient-compose-scroll-forward-hover);
    }

.formatting-scroller-forward:active {
        background: var(--gradient-compose-scroll-forward-active);
    }

.formatting-scroller-forward:active .scroller-forward-icon {
            /* Subtly shift arrow in scroll direction. */
            margin-right: -2px;
        }

.can-scroll-backward .formatting-scroller-backward,
.can-scroll-forward .formatting-scroller-forward {
    opacity: 1;
    pointer-events: all;
}

/* Hide the scroller buttons when someone has reached
   the formatting bar via Tab. Scroller-button state
   silently updates despite their being hidden, and
   scroller buttons reappear once focus has moved out
   of the formatting bar. */
.compose-scrolling-buttons-container:has(.compose-scrollable-buttons:focus-within) .formatting-scroller-backward,.compose-scrolling-buttons-container:has(.compose-scrollable-buttons:focus-within) .formatting-scroller-forward {
        opacity: 0;
        pointer-events: none;
    }

.message-limit-indicator:not(:empty) {
    font-size: 0.8571em; /* 12px at 14px/em */
    color: var(--color-limit-indicator);
    width: max-content;

    /* Keep the limit indicator just above
       and aligned with the send button.
       `:not(:empty)` prevents the padding
       and margin-top from affecting layout
       in the controls area when no indicator
       is present. */
    margin-top: auto;
    padding: 3px 3px 3px 0;
}

.message-limit-indicator.textarea-over-limit:not(:empty) {
        color: var(--color-limit-indicator-over-limit);
        font-weight: bold;
    }

#compose {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 4;
}

#compose-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
}

#compose_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Matched to 4px grid-gap on .messagebox grid. */
    padding-bottom: 4px;
    /* Align to compose controls; that's 112px width,
       plus 4px of grid gap for 116px here. */
    margin-right: calc(var(--compose-send-controls-width) + 4px);
}

#compose_close {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--color-compose-send-control-button);
    background: transparent;
    /* 12.5px at 14px em */
    font-size: 0.8928em;
    font-weight: normal;
    /* 3px 7px at 12.5px font size at 14px em */
    line-height: 1.6em;
    opacity: 0.7;
    border: 0;
    /* 3px 7px at 12.5px font size at 14px em */
    padding: 0.24em 0.56em;
    border-radius: 8px;
    vertical-align: unset;
    text-shadow: none;
}

#compose_close:hover {
        opacity: 1;
        background: var(--color-compose-embedded-button-background-hover);
        color: var(--color-compose-send-control-button-interactive);
    }

#compose_close:active {
        background-color: var(
            --color-compose-embedded-button-background-interactive
        );
    }

#compose_close:focus:not(:focus-visible) {
        outline: none;
    }

#compose_close:focus-visible {
        outline-color: var(--color-compose-focus-ring);
    }

.main-view-banner {
    /* This is same spatial value as the 4px of padding around
       the edge of the compose box. */
    margin-bottom: 4px;
    border-radius: 5px;
    border: 1px solid;
    display: flex;
    align-items: center;
    line-height: 1.2em; /* 18px at 15px/1em. */
}

.main-view-banner .above_compose_banner_action_link {
        color: var(--color-main-view-banner-action-link);
    }

.main-view-banner .main-view-banner-elements-wrapper {
        display: flex;
        align-items: center;
        /* Allow this flex container to grow or
           shrink to fit the outer container. */
        flex: 1 1 auto;
        /* Allow items to wrap; this supports an
           intrinsic layout for banner text and
           buttons, which will always occupy the
           space available, without our having
           to fiddle with tons of media queries. */
        flex-wrap: wrap;
    }

.main-view-banner .banner_content {
        /* Override Bootstrap when .banner_content is
           a paragraph element. */
        margin: 0;
        /* 5px right padding + 10px left-margin of the neighbouring button will match the left padding */
        padding: 8px 5px 8px 15px;
        /* The banner text uses a flex-basis of 150px,
           which is roughly the width at which banner
           text lines are still comfortably readable.
           Still, it can grow and shrink as needed. */
        flex: 1 1 150px;
    }

.main-view-banner .banner_content .banner_message {
            /* Override Bootstrap when .banner_content
               contains an inner .banner_message
               paragraph. */
            margin: 0;
        }

.main-view-banner .main-view-banner-action-button,.main-view-banner .upload_banner_cancel_button {
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        font-weight: 600;
        margin-top: 4.5px;
        margin-bottom: 4.5px;
        font-family: inherit;
        font-size: inherit;
        /* Buttons take a minimum height for
           when their text fits on a single
           line. 2.1333em is 32px at 15px/1em. */
        min-height: 2.1333em;
        /* When we're larger than large mobile
           scales ($ml_min), flex the button to
           its max-content, i.e., all its text
           on a single line. But do not grow in
           order to avoid awkward, oversized
           buttons within the flex group. */
        flex: 0 1 max-content;
        /* Use this margin-left hack to keep
           the button to the righthand side of
           the banner. */
        margin-left: auto;
    }

@media (width < 425px) {

.main-view-banner .main-view-banner-action-button,.main-view-banner .upload_banner_cancel_button {
            /* When we're smaller than large mobile
               scales, we allow the button to grow,
               so that it can span the full width of
               narrow, mobile-scale banners as it
               wraps onto a second line.

               We also allow the button to shrink,
               so that, for example, the text can
               wrap on the schedule-message button
               that appears when undoing a scheduled
               message. */
            flex: 1 1 max-content;
            /* Use a 10px left margin to keep the
               button away from the edge of the
               banner box to match the banner text;
               we need this only at small scales,
               when the button grows to the full
               width of the flex container. */
            margin-left: 10px;
    }
        }

/* Extra margin to ensure the layout is identical when there is no
           close button. */

.main-view-banner .main-view-banner-action-button.right_edge,.main-view-banner .upload_banner_cancel_button.right_edge {
            margin-right: 10px;
        }

.main-view-banner .main-view-banner-action-button {
        /* Establish a uniform top and bottom
           space around the button, which also
           works with the space around the message
           text. */
        margin-top: 8px;
        margin-bottom: 8px;
        /* Make as tall as two lines of banner message
           text, which have a line-height of 18px, but
           no more. 2.4em is two 1.2em lines in the
           banner area. */
        max-height: 2.4em;
        /* Keep to the top of the box, but stretch
           taller based on how the box is flexing. */
        min-height: 0;
        align-self: stretch;
    }

.main-view-banner .main-view-banner-close-button {
        -webkit-text-decoration: none;
        text-decoration: none;
        /* Set same top and bottom margin
           as action buttons. */
        margin: 8px 0;
        padding: 0 8px;
        /* Let the close button's box stretch,
           but no larger than the height of the
           banner box when the action button
           achieves its full height (margin,
           padding, and height), which keeps
           the X vertically centered with it. */
        align-self: stretch;
        /* 2.4em is two 1.2em lines in the
           banner area. */
        max-height: 2.4em;
        /* Display as flexbox to better control
           the X icon's position. This creates
           an anonymous flexbox item out of the
           ::before content where the icon sits. */
        display: flex;
        align-items: center;
    }

.main-view-banner .banner_content + .main-view-banner-close-button {
        /* When there's no action button, set the max
           height for the typical height of the box
           when it contains only banner message text.
           This will keep the action button aligned
           with the first or only line of text.
           2.2667 is 34px at 15px/1em; */
        max-height: 2.2667em;
    }

.main-view-banner.success {
        background-color: var(--color-background-success-main-view-banner);
        border: 1px solid var(--color-border-success-main-view-banner);
        color: var(--color-success-main-view-banner);
    }

.main-view-banner.success .main-view-banner-close-button {
            color: var(--color-success-main-view-banner-close-button);
        }

.main-view-banner.success .main-view-banner-close-button:hover {
                color: var(--color-success-main-view-banner-close-button-hover);
            }

.main-view-banner.success .main-view-banner-close-button:active {
                color: var(
                    --color-success-main-view-banner-close-button-active
                );
            }

.main-view-banner.success .main-view-banner-action-button {
            background-color: var(
                --color-background-success-main-view-banner-action-button
            );
            color: inherit;
        }

.main-view-banner.success .main-view-banner-action-button:hover {
                background-color: var(
                    --color-background-success-main-view-banner-action-button-hover
                );
            }

.main-view-banner.success .main-view-banner-action-button:active {
                background-color: var(
                    --color-background-success-main-view-banner-action-button-active
                );
            }

/* warning and warning-style classes have the same CSS; this is since
    the warning class has some associated javascript which we do not want
    for some of the banners, for which we use the warning-style class. */

.main-view-banner.warning,.main-view-banner.warning-style {
        background-color: var(--color-background-warning-main-view-banner);
        border-color: var(--color-border-warning-main-view-banner);
        color: var(--color-warning-main-view-banner);
    }

.main-view-banner.warning .main-view-banner-close-button,.main-view-banner.warning-style .main-view-banner-close-button {
            color: var(--color-warning-main-view-banner-close-button);
        }

.main-view-banner.warning .main-view-banner-close-button:hover,.main-view-banner.warning-style .main-view-banner-close-button:hover {
                color: var(--color-warning-main-view-banner-close-button-hover);
            }

.main-view-banner.warning .main-view-banner-close-button:active {
                color: var(
                    --color-warning-main-view-banner-close-button-active
                );
            }

.main-view-banner.warning-style .main-view-banner-close-button:active {
                color: var(
                    --color-warning-main-view-banner-close-button-active
                );
            }

.main-view-banner.warning .main-view-banner-action-button,.main-view-banner.warning-style .main-view-banner-action-button {
            background-color: var(
                --color-background-warning-main-view-banner-action-button
            );
            color: var(--color-warning-main-view-banner-action-button);
        }

.main-view-banner.warning .main-view-banner-action-button:hover,.main-view-banner.warning-style .main-view-banner-action-button:hover {
                background-color: var(
                    --color-background-warning-main-view-banner-action-button-hover
                );
            }

.main-view-banner.warning .main-view-banner-action-button:active {
                background-color: var(
                    --color-background-warning-main-view-banner-action-button-active
                );
            }

.main-view-banner.warning-style .main-view-banner-action-button:active {
                background-color: var(
                    --color-background-warning-main-view-banner-action-button-active
                );
            }

.main-view-banner.error {
        background-color: var(--color-background-error-main-view-banner);
        border-color: var(--color-border-error-main-view-banner);
        color: var(--color-error-main-view-banner);
    }

.main-view-banner.error .main-view-banner-close-button {
            color: var(--color-error-main-view-banner-close-button);
        }

.main-view-banner.error .main-view-banner-close-button:hover {
                color: var(--color-error-main-view-banner-close-button-hover);
            }

.main-view-banner.error .main-view-banner-close-button:active {
                color: var(--color-error-main-view-banner-close-button-active);
            }

.main-view-banner.error .main-view-banner-action-button {
            background-color: var(
                --color-background-error-main-view-banner-action-button
            );
            color: var(--color-error-main-view-banner-action-button);
        }

.main-view-banner.error .main-view-banner-action-button:hover {
                background-color: var(
                    --color-background-error-main-view-banner-action-button-hover
                );
            }

.main-view-banner.error .main-view-banner-action-button:active {
                background-color: var(
                    --color-background-error-main-view-banner-action-button-active
                );
            }

.main-view-banner.info {
        position: relative;
        background-color: var(--color-background-info-main-view-banner);
        border-color: var(--color-border-info-main-view-banner);
        color: var(--color-info-main-view-banner);
    }

.main-view-banner.info .main-view-banner-close-button {
            color: var(--color-info-main-view-banner-close-button);
        }

.main-view-banner.info .main-view-banner-close-button:hover {
                color: var(--color-info-main-view-banner-close-button-hover);
            }

.main-view-banner.info .main-view-banner-close-button:active {
                color: var(--color-info-main-view-banner-close-button-active);
            }

.main-view-banner.info .main-view-banner-action-button,.main-view-banner.info .upload_banner_cancel_button {
            background-color: var(
                --color-background-info-main-view-banner-action-button
            );
            color: var(--color-info-main-view-banner-action-button);
        }

.main-view-banner.info .main-view-banner-action-button:hover,.main-view-banner.info .upload_banner_cancel_button:hover {
                background-color: var(
                    --color-background-info-main-view-banner-action-button-hover
                );
            }

.main-view-banner.info .main-view-banner-action-button:active {
                background-color: var(
                    --color-background-info-main-view-banner-action-button-active
                );
            }

.main-view-banner.info .upload_banner_cancel_button:active {
                background-color: var(
                    --color-background-info-main-view-banner-action-button-active
                );
            }

.main-view-banner .secondary-button {
        margin-left: 10px;
    }

.upload_banner {
    overflow: hidden;
}

.upload_banner.hidden {
        display: none;
    }

.upload_banner .moving_bar {
        position: absolute;
        width: 0;
        /* The progress updates seem to come every second or so,
        so this is the smoothest it can probably get. */
        transition: width 1s ease-in-out; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
        background: var(--color-background-main-view-banner-moving-bar);
        top: 0;
        bottom: 0;
    }

/* Keep these elements visible above the
       .moving_bar element on file uploads. */

.upload_banner .upload_msg,.upload_banner .main-view-banner-close-button,.upload_banner .upload_banner_cancel_button {
        z-index: 1;
        position: relative;
    }

.composition-area {
    position: relative;
    flex: 1;
}

@keyframes message-limit-flash {
    0% {
        box-shadow: none;
    }

    100% {
        box-shadow: 0 0 0 1pt
            var(--color-message-content-container-border-over-limit);
    }
}

textarea.new_message_textarea {
    display: table-cell;
    padding: 5px 5px 0;
    height: 1.5em;
    max-height: 22em;
    margin: 0;
    resize: none !important;
    border-radius: 3px 3px 0 0;
    border: none;
    scrollbar-width: thin;
    scrollbar-color: hsl(0deg 0% 50%) transparent;
    box-shadow: none;

    font-size: 1em;
    line-height: var(--base-line-height-unitless);
    font-family: inherit;
}

textarea.new_message_textarea:focus {
        outline: 0;
    }

#message-content-container,
#compose-channel-recipient {
    color: var(--color-text-default);
}

#compose-channel-recipient {
    display: grid;
    /* When displaying #topic-not-mandatory-placeholder,
       we let it occupy the entire topic box. Otherwise,
       we set and preserve named areas for the ordinary
       topic text and the clear-topic button. */
    grid-template-columns:
        [topic-box-start topic-start] minmax(0, 1fr)
        [topic-end topic-clear-button-start] auto [topic-clear-button-end topic-box-end];
    grid-template-rows: [topic-box-start topic-start topic-clear-button-start] auto [topic-clear-button-end topic-end topic-box-end];
    align-content: center;
    align-items: stretch;
    flex: 1 1 0;
    border: 1px solid var(--color-compose-recipient-box-border-color);
    border-radius: 4px;
    background: var(--color-compose-recipient-box-background-color);
}

#compose-channel-recipient:hover {
        border-color: var(--color-compose-recipient-box-hover);
    }

/* Give the recipient box, a `<div>`, the
       correct styles when focus is in the
       #stream_message_recipient_topic `<input>` */

#compose-channel-recipient:focus-within {
        border-color: var(--color-compose-recipient-box-has-focus);
    }

/* Styles for input in the recipient_box */

#compose-channel-recipient #stream_message_recipient_topic {
        grid-area: topic;
        color: var(--color-compose-recipient-box-text-color);
        /* Keep the line-height matched to the font-size
           for a more predictable box height.
           This will have to be watched very closely for
           possible regressions, such as when Unicode emoji
           appear in the topic box. */
        line-height: 1;
        /* Override grid's effective `max-content` min-width */
        overflow: hidden;
        text-overflow: ellipsis;

        box-shadow: none;
        outline: none;

        padding: 0 6px;
        /* Reset height to let `align-items: stretch` on the grid parent handle this. */
        height: auto;
        font-family: inherit;
    }

#compose-channel-recipient #stream_message_recipient_topic.empty-topic-display::placeholder {
            color: var(--color-compose-recipient-box-text-color);
        }

#compose-channel-recipient #stream_message_recipient_topic.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;
        }

#compose-channel-recipient #topic-not-mandatory-placeholder {
        grid-area: topic-box;
        align-self: center;
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        padding: 5px 6px;
        display: none;
        visibility: hidden;
        pointer-events: none;
    }

#compose-channel-recipient #topic-not-mandatory-placeholder.visible {
            visibility: visible;
        }

/* Styles for new conversation button in the recipient_box */

#compose-channel-recipient .compose-new-recipient-button {
        grid-area: topic-clear-button;
    }

#compose-channel-recipient #stream_message_recipient_topic:not(.empty-topic-display):placeholder-shown ~ .compose-new-recipient-button {
        visibility: hidden;
    }

#compose-channel-recipient #stream_message_recipient_topic:disabled ~ .compose-new-recipient-button {
        visibility: hidden;
    }

/* This will reset the bootstrap margin-bottom: 10px value for the inputs */

#compose-channel-recipient input {
        margin-bottom: 0;
    }

#compose-channel-recipient.disabled {
        background-color: transparent;
        border-color: transparent;
        max-width: fit-content;
    }

#compose_select_recipient_widget {
    /* We set width to 100% to get the ellipsis when
       needed, but the flex and max-width properties
       on the widget wrapper ultimately determine
       how much space the channel picker occupies. */
    width: 100%;
    outline: none;
    /* We override the component-level colors to
       ensure concord with the topic box. */
    color: var(--color-compose-recipient-box-text-color);
    background-color: var(--color-compose-recipient-box-background-color);
    border-color: var(--color-compose-recipient-box-border-color);
}

#compose_select_recipient_widget:hover,#compose_select_recipient_widget.widget-open {
        border-color: var(--color-compose-recipient-box-hover);
    }

#compose_select_recipient_widget.dropdown-widget-button {
        /* We control the surrounding space through the
           grid on `.dropdown_widget_value`. */
        padding: 0;
        border-radius: 4px;
    }

#compose_select_recipient_widget .dropdown_widget_value {
        text-overflow: ellipsis;
        overflow: hidden;
    }

#private_message_recipient.recipient_box {
    width: 100%;
}

#compose-direct-recipient .pill-container .pill {
    /* This is necessary to avoid an otherwise unstyled
       flash of outline around pills when focus shifts out
       of the recipient row and transitions are in effect. */
    outline-color: transparent;
}

.compose-box-open #closed-compose-controls {
        display: none;
    }

.compose-box-open .message_comp {
        display: block;
    }

/* We want transitions to run only on user interactions with
   the mouse, once the compose box is open. Any keyboard
   interactions (e.g., Shift-Tabbing from the compose textarea
   to the topic box) show instant changes, so we don't need to
   accommodate them here, which we prevent by applying the
   transitions only when focus isn't within the recipient row,
   or hasn't recently been within the topic box. */
#compose.compose-box-open .low-attention-recipient-row:not(.recently-focused):not(:focus-within) #compose_select_recipient_widget {
            transition: var(--compose-recipient-row-transition);
            transition-delay: var(--compose-recipient-row-transition-delay);
            transition-property: background-color, border-color;
        }
#compose.compose-box-open .low-attention-recipient-row:not(.recently-focused):not(:focus-within) #compose-channel-recipient {
            transition: var(--compose-recipient-row-transition);
            transition-delay: var(--compose-recipient-row-transition-delay);
            transition-property: background-color, border-color;
        }
#compose.compose-box-open .low-attention-recipient-row:not(.recently-focused):not(:focus-within) #compose-direct-recipient .pill-container {
            transition: var(--compose-recipient-row-transition);
            transition-delay: var(--compose-recipient-row-transition-delay);
            transition-property: background-color, border-color;
        }
#compose.compose-box-open .low-attention-recipient-row:not(.recently-focused):not(:focus-within) #compose_select_recipient_widget .channel-privacy-type-icon {
            transition: var(--compose-recipient-row-transition);
            transition-delay: var(--compose-recipient-row-transition-delay);
            transition-property: color;
        }
#compose.compose-box-open .low-attention-recipient-row:not(.recently-focused):not(:focus-within) .compose-new-recipient-button {
            transition: var(--compose-recipient-row-transition);
            transition-delay: var(--compose-recipient-row-transition-delay);
            transition-property: color, background-color, opacity;
        }
#compose.compose-box-open .low-attention-recipient-row:not(.recently-focused):not(:focus-within) #compose-direct-recipient .pill {
            transition: var(--compose-recipient-row-transition);
            transition-delay: var(--compose-recipient-row-transition-delay);
            transition-property: outline-color;
        }
#compose.compose-box-open #compose-recipient.low-attention-recipient-row:not(.recently-focused):not(:focus-within) .decorated-channel-name {
                transition: var(--compose-recipient-row-transition);
                transition-delay: var(--compose-recipient-row-transition-delay);
                transition-property: opacity;
            }
#compose.compose-box-open #compose-recipient.low-attention-recipient-row:not(.recently-focused):not(:focus-within) .zulip-icon-chevron-down {
                transition: var(--compose-recipient-row-transition);
                transition-delay: var(--compose-recipient-row-transition-delay);
                transition-property: opacity;
            }
#compose.compose-box-open #compose-recipient.low-attention-recipient-row:not(.recently-focused):not(:focus-within) .conversation-arrow {
                transition: var(--compose-recipient-row-transition);
                transition-delay: var(--compose-recipient-row-transition-delay);
                transition-property: opacity;
            }
#compose.compose-box-open #compose-recipient.low-attention-recipient-row:not(.recently-focused):not(:focus-within) #stream_message_recipient_topic {
                transition: var(--compose-recipient-row-transition);
                transition-delay: var(--compose-recipient-row-transition-delay);
                transition-property: opacity;
            }

/* For the sake of keyboard use, we do not want to apply
   these styles when any element (the picker, user pills)
   has focus. */
#compose-recipient.low-attention-recipient-row:not(:focus-within) .decorated-channel-name,#compose-recipient.low-attention-recipient-row:not(:focus-within) .conversation-arrow,#compose-recipient.low-attention-recipient-row:not(:focus-within) #stream_message_recipient_topic {
            opacity: 0.9;
        }
#compose-recipient.low-attention-recipient-row:not(:focus-within) .zulip-icon-chevron-down {
            opacity: 0;
        }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget,.low-attention-recipient-row:not(:focus-within) #compose-channel-recipient,.low-attention-recipient-row:not(:focus-within) #compose-direct-recipient .pill-container {
        background-color: transparent;
        border-color: transparent;

        /* Particularly in light mode, pill colors are almost identical
           to the compose-box background. We place a higher-contrast
           outline on them in the low-attention state. */
    }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget:not(.does-not-exist) .pill {
            outline: 1px solid var(--color-outline-low-attention-input-pill);
            /* We offset the outline so that pills do not appear to touch,
               especially in dark mode where the outline color is otherwise
               the same as the pill color (the opacity makes it brighter
               when so offset, too). */
            outline-offset: -1px;
        }
.low-attention-recipient-row:not(:focus-within) #compose-channel-recipient:not(.does-not-exist) .pill {
            outline: 1px solid var(--color-outline-low-attention-input-pill);
            /* We offset the outline so that pills do not appear to touch,
               especially in dark mode where the outline color is otherwise
               the same as the pill color (the opacity makes it brighter
               when so offset, too). */
            outline-offset: -1px;
        }
.low-attention-recipient-row:not(:focus-within) #compose-direct-recipient .pill-container .pill {
            outline: 1px solid var(--color-outline-low-attention-input-pill);
            /* We offset the outline so that pills do not appear to touch,
               especially in dark mode where the outline color is otherwise
               the same as the pill color (the opacity makes it brighter
               when so offset, too). */
            outline-offset: -1px;
        }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget:not(.does-not-exist):hover:not(.disabled) {
            background-color: var(
                --color-compose-recipient-box-background-color
            );
            border-color: var(--color-compose-recipient-box-border-color);
            opacity: 1;
        }
.low-attention-recipient-row:not(:focus-within) #compose-channel-recipient:not(.does-not-exist):hover:not(.disabled) {
            background-color: var(
                --color-compose-recipient-box-background-color
            );
            border-color: var(--color-compose-recipient-box-border-color);
            opacity: 1;
        }
.low-attention-recipient-row:not(:focus-within) #compose-direct-recipient .pill-container:hover:not(.disabled) {
            background-color: var(
                --color-compose-recipient-box-background-color
            );
            border-color: var(--color-compose-recipient-box-border-color);
            opacity: 1;
        }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget:not(.does-not-exist):hover:not(.disabled) .decorated-channel-name {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose-channel-recipient:not(.does-not-exist):hover:not(.disabled) .decorated-channel-name {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose-direct-recipient .pill-container:hover:not(.disabled) .decorated-channel-name {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget:not(.does-not-exist):hover:not(.disabled) .zulip-icon-chevron-down {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose-channel-recipient:not(.does-not-exist):hover:not(.disabled) .zulip-icon-chevron-down {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose-direct-recipient .pill-container:hover:not(.disabled) .zulip-icon-chevron-down {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget:not(.does-not-exist):hover:not(.disabled) .conversation-arrow {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose-channel-recipient:not(.does-not-exist):hover:not(.disabled) .conversation-arrow {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose-direct-recipient .pill-container:hover:not(.disabled) .conversation-arrow {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget:not(.does-not-exist):hover:not(.disabled) #stream_message_recipient_topic {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose-channel-recipient:not(.does-not-exist):hover:not(.disabled) #stream_message_recipient_topic {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose-direct-recipient .pill-container:hover:not(.disabled) #stream_message_recipient_topic {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget:not(.does-not-exist):hover:not(.disabled) .pill {
                outline-color: transparent;
            }
.low-attention-recipient-row:not(:focus-within) #compose-channel-recipient:not(.does-not-exist):hover:not(.disabled) .pill {
                outline-color: transparent;
            }
.low-attention-recipient-row:not(:focus-within) #compose-direct-recipient .pill-container:hover:not(.disabled) .pill {
                outline-color: transparent;
            }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget:not(.does-not-exist) .compose-new-recipient-button:hover {
            opacity: 1;
        }
.low-attention-recipient-row:not(:focus-within) #compose-channel-recipient:not(.does-not-exist) .compose-new-recipient-button:hover {
            opacity: 1;
        }
.low-attention-recipient-row:not(:focus-within) #compose-direct-recipient .pill-container .compose-new-recipient-button:hover {
            opacity: 1;
        }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget .channel-privacy-type-icon.zulip-icon {
            color: var(--privacy-icon-color-modified);
        }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget:hover .channel-privacy-type-icon.zulip-icon {
            color: var(--privacy-icon-color-original);
        }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget.widget-open {
            background-color: var(--color-background-dropdown-widget-button);
            border-color: var(--color-compose-recipient-box-border-color);
        }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget.widget-open .channel-privacy-type-icon {
                color: var(--privacy-icon-color-original);
            }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget.widget-open .decorated-channel-name {
                opacity: 1;
            }
.low-attention-recipient-row:not(:focus-within) #compose_select_recipient_widget.widget-open .zulip-icon-chevron-down {
                opacity: 1;
            }

.compose-send-or-save-button {
    border-radius: 4px;
    border: 0;
    margin-bottom: 0;
    color: var(--color-compose-send-button-icon-color);
    background-color: var(--color-compose-send-button-background);
}

.compose-send-or-save-button:active {
        transition: transform 80ms;
        transform: scale(0.96);
    }

.compose-send-or-save-button:focus {
        outline: 0;
    }

.compose-send-or-save-button:focus-visible {
        border: 1px solid var(--color-compose-send-button-focus-border);
        box-shadow: 0 0 5px var(--color-compose-send-button-focus-shadow);
        /* Override default browser ring. */
        outline: 0;
    }

.compose-send-or-save-button:hover {
        background-color: var(
            --color-compose-send-button-background-interactive
        );
    }

#compose-send-button {
    width: 74px;
    height: var(--compose-formatting-buttons-row-height);
    /* Allow to grow but not shrink */
    flex: 1 0 auto;
    /* Override inherited styles
       so that flexbox can do the
       job of positioning the icon. */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Flex items respect z-index values;
       this is needed to keep the send
       button over top of the vdots
       background */
    z-index: 1;
    font-size: inherit;
}

#compose-send-button .zulip-icon-send {
        display: block;
        font-size: 1.2143em; /* 17px at 14px/em */
        line-height: 0.9412; /* 16px at 17px/em */
    }

#compose-send-button .loader {
        display: none;
    }

@media (width < 576px), ((width >= 576px) and (width < 849px)) {
    #compose-send-button {
        /* Drop to a square button,
        and don't flex any wider. */
        width: 30px;
        flex-grow: 0;

        /* Given the fixed-pixel width of the narrow send button,
           don't let the send icon grow larger than a font-size
           of 20px, which is as large as the send icon can grow
           inside the squared off send button. */
    }
        #compose-send-button .zulip-icon-send {
            font-size: min(1.2143em, 20px);
        }
}

.enter_sends_choices {
    display: flex;
    flex-direction: column;
    color: var(--color-text-popover-menu);
}

.enter_sends_choices .enter_sends_choice {
        padding: 4px 10px;
        gap: 0 8px;
        display: grid;
        /* 1em and 1.5em were chosen from playing around with different values
           and picking some that looked reasonable. */
        grid-template:
            "radio-button instructions" 1.5em
            ".            instructions" auto / 1em auto;
    }

.enter_sends_choices .enter_sends_choice:hover {
            background: var(--color-background-hover-popover-menu);
            outline: none;
        }

.enter_sends_choices .enter_sends_choice:active {
            background: var(--color-background-active-popover-menu);
        }

.enter_sends_choices .enter_sends_choice:focus-visible {
            background: var(--color-background-hover-popover-menu);
            border-radius: 4px;
            outline: 1px solid var(--color-outline-focus) !important;
            outline-offset: -1px;
        }

.enter_sends_choices .enter_sends_choice .enter_sends_choice_radio {
            width: auto;
            cursor: pointer;
            /* Radio buttons scale with height, and here we're just
               matching that to the active font-size. */
            height: 1em;
            accent-color: hsl(217deg 100% 60%);
            grid-area: radio-button;
            align-self: center;
            font-size: inherit;
        }

.enter_sends_choices .enter_sends_choice .enter_sends_choice_radio:checked + .enter_sends_choice_text_container .popover-menu-hotkey-hint {
                color: hsl(217deg 100% 60%);
                border: 1px solid hsl(217deg 100% 60% / 50%);
            }

.enter_sends_choices .enter_sends_choice_text_container {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 3px;
        white-space: nowrap;
        grid-area: instructions;
    }

.enter_sends_choices .enter_sends_choice_text {
        display: flex;
        align-items: center;
        gap: 3px;
    }

.enter_sends_choices .popover-menu-hotkey-hints {
        margin: 0;
        padding: 0;
    }

.enter_sends_choices .popover-menu-hotkey-hints .popover-menu-hotkey-hint {
            padding: 2px 5px;
            display: flex;
        }

.enter_sends_choices .enter_sends_major {
        /* 15px at 14px/1em */
        font-size: 1.0714em;
    }

.enter_sends_choices .enter_sends_minor {
        /* 12px at 14px/1em */
        font-size: 0.8571em;
    }

.enter_sends_choices .enter_sends_minor .popover-menu-hotkey-hint {
            /* 12px at 14px/1em */
            font-size: 0.8571em;
            padding: 1px 4px;
        }

.drafts-item-in-popover {
    display: none;
    /* Only show the Drafts item in the popover when it's not visible
       in the compose box. */
}

@media (width < 576px) {

.drafts-item-in-popover {
        display: block;
}
    }

.drafts-item-in-popover .unread_count {
        margin: 1px 0 0 6px;
    }

#compose-recipient {
    /* Set a line-height equal to the font-size to
       make a compact, predictably tall recipient row. */
    line-height: 1;
    display: flex;
    flex: 1 1 0;
    /* Use this containing flex element to
      establish the minimum height of all its
      children; the default `align-items: stretch`
      (which is set on any flexbox without specifying
      it) ensures that the child flex items will
      always stretch to fit the height set here;
      larger heights, such as on group-DM pills,
      will allow this to grow as needed.
      Child flex items like chevrons take
      `align-self: center` to center only
      themselves, where necessary. */
    min-height: var(--compose-recipient-box-min-height);
    min-width: 0;
}

#compose-recipient .compose-new-recipient-button {
        /* Set the border radius smaller, relative to the parent */
        border-radius: 2px;
        padding: 6px;
        margin: 1px;
        color: var(--color-compose-embedded-button-text-color);
        font-size: inherit;
    }

#compose-recipient .compose-new-recipient-button .zulip-icon {
            display: block;
        }

#compose-recipient .compose-new-recipient-button:hover {
            background-color: var(
                --color-compose-embedded-button-background-hover
            );
            color: var(--color-compose-embedded-button-text-color-hover);
        }

#compose-recipient .compose-new-recipient-button:focus {
            outline: 0;
        }

#compose-recipient #stream_message_recipient_topic,#compose-recipient .compose-new-recipient-button {
        background: none;
        border: none;
    }

#compose-recipient #stream_message_recipient_topic:disabled {
            cursor: default;
            opacity: 1;
        }

#compose-recipient .compose-new-recipient-button:not(#does-not-exist):disabled {
            cursor: default;
            opacity: 1;
        }

.compose-control-buttons-container {
    display: flex;
    align-items: center;
    /* 30px at 15px/1em */
    height: var(--compose-formatting-buttons-row-height);
}

.compose-control-buttons-container .compose_control_button {
        /* 22px at 15px/1em */
        font-size: 1.4667em;
        /* Constrain icon fonts to a perfect
           box (22px at 15px/1em) to sit centered
           in the 30px by 30px button area. */
        line-height: 1;
        /* Coordinate with the value of
           --compose-formatting-buttons-row-height */
        /* 30px at 22px/1em */
        height: 1.3636em;
        width: 1.3636em;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.7;
        color: inherit;
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.compose-control-buttons-container .compose_control_button:hover {
            opacity: 1;
            background-color: var(
                --color-compose-control-button-background-hover
            );
        }

.compose-control-buttons-container .compose_control_button:focus:not(:focus-visible) {
            outline: none;
        }

.compose-control-buttons-container .compose_control_button:focus-visible {
            outline-color: var(--color-compose-focus-ring);
        }

.compose-control-buttons-container .compose_control_button_container.disabled-on-hover:hover {
        opacity: 0.3;
    }

.compose-control-buttons-container .compose_control_button_container.disabled-on-hover:hover .compose_control_button {
            pointer-events: none;
        }

.compose-control-buttons-container .fa-eye {
        position: relative;
        top: -0.7px;
    }

.compose-control-buttons-container .divider {
        margin: 0 5px;
        /* Coordinate with the value of
           --compose-formatting-buttons-row-height */
        /* 16px at 14px/1em */
        height: 1.1429em;
        width: 1.5px;
        /* Prevent dividers from growing or shrinking. */
        flex: 0 0 auto;
        background-color: var(--color-compose-formatting-button-divider);
    }

@media (width < 400px) {

.compose-control-buttons-container .divider {
            /* Remove at mobile widths to make more space
               for compose buttons */
            display: none;
    }
        }

.message-send-controls {
    display: flex;
}

@media (width < 576px) {

.message-send-controls {
        /* At small widths, we display the
           diminutive Send button and vdots
           in a column, using `column-reverse`
           to put the vdots above Send. */
        flex-direction: column-reverse;
}
    }

.message-send-controls .compose-button-disabled {
        pointer-events: none;
    }

#compose-send-button.disabled-message-send-controls {
    cursor: default;
    opacity: 0.5;
}

.drag {
    display: none;
    height: 18px;
    width: 100%;
    top: 23px;
    position: relative;
    cursor: ns-resize;
}

.preview_message_area {
    padding: 5px 5px 0;
    overflow: auto;
}

.markdown_preview_spinner {
    margin: auto;
}

#compose_select_recipient_widget_wrapper {
    display: flex;
    /* Allow the contents wrapped here to
       expand the available space... */
    white-space: nowrap;
    /* And follow the fitted content on the
       flexbox. */
    flex: 0 0 fit-content;
    /* But force an ellipsis here, rather than
       just on an inner element. */
    overflow: hidden;
    text-overflow: ellipsis;
    /* Finally, hold this to a maximum width of
       40% of the recipient row. */
    max-width: 40%;
}

#compose_select_recipient_widget_wrapper:focus-visible {
        outline: 0;
    }

#compose_select_recipient_widget_wrapper:focus-visible #compose_select_recipient_widget {
            border-color: var(--color-compose-recipient-box-has-focus);
        }

#compose_select_recipient_widget_wrapper .dropdown_widget_value {
        flex-grow: 1;
        display: grid;
        align-items: baseline;
        /* This is a bit of eyeball work, based on balancing
           out the size and spatial relationships between the
           privacy icon and the channel name, and the
           surrounding negative space. */
        /* 7px at 20px/1em; 4px at 20px/1em. */
        grid-template:
            "lefthand-offset privacy-icon privacy-icon-gap channel-name righthand-offset" auto
            / 0.35em [select-label-start] auto var(
                --dropdown-list-item-label-icon-gap
            )
            minmax(0, 1fr) [select-label-end] 0.35em;
    }

#compose_select_recipient_widget_wrapper .dropdown_widget_value .decorated-channel-name-wrapper {
            display: grid;
            grid-area: select-label;
            grid-template-columns: subgrid;
            gap: 0;
        }

#compose_select_recipient_widget_wrapper .dropdown_widget_value .channel-privacy-type-icon {
            grid-area: privacy-icon;
        }

#compose_select_recipient_widget_wrapper .dropdown_widget_value .channel-privacy-type-icon .zulip-icon {
                color: var(--privacy-icon-color-original);
            }

#compose_select_recipient_widget_wrapper .dropdown_widget_value .select-channel-label,#compose_select_recipient_widget_wrapper .dropdown_widget_value .decorated-dm-label,#compose_select_recipient_widget_wrapper .dropdown_widget_value .decorated-channel-name {
            grid-area: channel-name;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--color-text-default);
        }

#compose_select_recipient_widget_wrapper .dropdown_widget_value .select-channel-label {
            grid-area: select-label;
        }

/* We suppress the chevron on the channel picker. */

#compose_select_recipient_widget_wrapper .zulip-icon-chevron-down {
        display: none;
    }

/* Class for send-area buttons, such as
   Drafts and the send-adjacent vdots */
.send-control-button {
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
    border-radius: 4px;
    color: var(--color-compose-send-control-button);
    background-color: var(--color-compose-send-control-button-background);
    font-weight: 450;
}
.send-control-button:active {
        transition: transform 80ms;
        transform: scale(0.96);
    }
.send-control-button:focus:not(:focus-visible) {
        outline: none;
    }
.send-control-button:focus-visible {
        outline-color: var(--color-compose-focus-ring);
    }
.send-control-button:hover {
        /* We need to use !important here, regrettably, to keep the default
           dark-mode hover colors from showing. */
        color: var(--color-compose-send-control-button-interactive) !important;
        background-color: var(
            --color-compose-send-control-button-background-interactive
        );
        -webkit-text-decoration: none;
        text-decoration: none;
    }

/* vdots icon located next to `Send` button which shows
   options to schedule the message. */
#send_later {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    /* Allow to grow but not shrink */
    flex: 1 0 auto;
    height: var(--compose-formatting-buttons-row-height);
    /* Make the vdots appear to extend from
       beneath the send button when an
       interactive background is present.
       Compensatory padding for this negative
       margin is handled on the vdots icon
       below, so as to make for a maximum
       clickable vdots area. */
    margin-left: -2px;
    border-radius: 0 4px 4px 0;
    /* Flex items respect z-index values;
       this is needed to keep the vdots
       background beneath the send button. */
    z-index: 0;
    font-size: inherit;
}
#send_later:focus-visible {
        /* Use a border, not an outline, to preserve the
           conjoined layout with the Send button. Flexbox
           will handle the dimension change, so there won't
           be any movement of the vdots in this state. */
        outline: 0;
        border: 2px solid var(--color-compose-focus-ring);
    }
@media ((width >= 576px) and (width < 849px)) {
#send_later {
        width: 32px;
}
    }
@media (width < 576px) {
#send_later {
        /* Drop to a square, rounded button. */
        width: 30px;
        /* This reduces the vdots button so that
           it and the send button fit within the
           53px height the compose textarea occupies,
           including its top border. */
        height: 25px;
        margin-left: 0;
        border-radius: 4px;
}
    }
#send_later .zulip-icon {
        padding: 5px 0 5px 2px;
        /* 17px at 14px/1em */
        font-size: 1.2143em;
        flex-grow: 1;
    }
@media (width < 576px) {
#send_later .zulip-icon {
            /* Keep vdots centered above the
               Send button at smallest sizes. */
            padding-left: 0;
    }
        }
@media (width < 576px), ((width >= 576px) and (width < 849px)) {
#send_later .zulip-icon {
            /* As with the send icon, we limit the vdots to 20px
               so it doesn't appear too crowded above the send
               button. */
            font-size: min(1.2143em, 20px);
    }
        }

#compose-drafts-button {
    /* Use border-box sizing to make
       width calculations more predictable
       in a flex context. */
    box-sizing: border-box;
    /* In a columnar flex, we need to
       use alignment to keep the Drafts
       button from expanding the full
       width of the column. */
    align-self: flex-start;
    /* Keep the Drafts button text
       aligned with the Send button's
       lefthand edge */
    padding: 0 8px;
    margin-left: -8px;
    /* Allow the button to occupy as much
       as 100% of the container width, plus
       the 8px from the negative left margin. */
    max-width: calc(100% + 8px);
    display: flex;
    gap: 2px;
}

#compose-drafts-button .compose-drafts-text {
        /* Set an ellipsis when the translated
           version of `Drafts` exceeds the width,
           and keep button text to a single line. */
        white-space: nowrap;
        overflow-x: hidden;
        text-overflow: ellipsis;
        flex-grow: 1;
    }

@media (width < 849px) {

#compose-drafts-button {
        /* Reduce the padding on the sides so the
        button's edge isn't too close to the textarea */
        margin-left: -3px;
        max-width: calc(100% + 3px);
        /* Align the `Drafts` text with the
           send icon below. */
        padding: 0 3px;
}
    }

.saved_snippets-dropdown-list-container {
    width: 17.8571em; /* 250px at 14px/em */
}

.saved_snippets-dropdown-list-container .dropdown-list .dropdown-list-item-common-styles {
        padding: 0.3571em 0.7143em; /* 5px 10px at 14px/em */
        /* Make content appear more distinct from
           the snippet name. */
        border-bottom: solid 1px var(--color-border-popover-menu-separator);
        /* Override the general dropdown border radius so that
           the bottom border does not look curved. */
        border-radius: 0;
    }

.saved_snippets-dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-name {
            line-height: 1.2em;
        }

.saved_snippets-dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-item-description {
            font-weight: 400;
            font-size: 0.9283em; /* 13px at 14px/em */
            opacity: 0.8;
            padding: 0;
            text-overflow: ellipsis;
            overflow: hidden;
        }

.saved_snippets-dropdown-list-container .dropdown-list .dropdown-list-item-common-styles .dropdown-list-text-selected {
            font-weight: 500;
            max-width: 210px;
            display: inline-block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

/* Don't show bottom border separator on the last item. */

.saved_snippets-dropdown-list-container .dropdown-list .list-item:last-child .dropdown-list-item-common-styles {
        border-bottom: none;
    }

#add-new-saved-snippet-modal .saved-snippet-title,#edit-saved-snippet-modal .saved-snippet-title {
        /* Subtract (2 * horizontal padding) + (2 * border width) */
        width: calc(
            100% - 2 * var(--input-horizontal-padding) - 2 *
                var(--input-border-width)
        );
        margin-bottom: 20px;
    }

#add-new-saved-snippet-modal .saved-snippet-content,#edit-saved-snippet-modal .saved-snippet-content {
        resize: vertical;
    }

#compose.compose-fullscreen,
#compose.compose-intermediate {
    z-index: 99;
}

#compose.compose-fullscreen #compose-container,#compose.compose-intermediate #compose-container {
        height: 100%;
    }

#compose.compose-fullscreen .message_comp,#compose.compose-intermediate .message_comp {
        flex: 1;
        display: flex !important;
        flex-flow: column;
    }

#compose.compose-fullscreen #compose-textarea,#compose.compose-intermediate #compose-textarea,#compose.compose-fullscreen #preview_message_area,#compose.compose-intermediate #preview_message_area {
        /* When in full screen, override max-height
           properties set from manually resizing. */
        max-height: none !important;
    }

#compose.compose-fullscreen #compose-textarea,#compose.compose-intermediate #compose-textarea {
        /* Additionally, override the height properties
           on the textarea. This is essential if the
           textarea has been manually resized prior
           to going into fullscreen. */
        height: auto !important;
    }

#compose.compose-fullscreen #preview_message_area,#compose.compose-intermediate #preview_message_area {
        /* Setting height to 0 is necessary to make the flex+Simplebar
           combination work correctly, without pushing the compose
           controls offscreen when previewing a very tall message. */
        height: 0;
        flex: 1;
    }

#compose.compose-fullscreen .maximize-composebox-button,#compose.compose-fullscreen .expand-composebox-button {
        display: none;
    }

#compose.compose-fullscreen .collapse-composebox-button {
        display: flex;
    }

#compose.compose-intermediate .collapse-composebox-button,#compose.automatically-expanded .collapse-composebox-button,#compose.compose-intermediate .expand-composebox-button,#compose.automatically-expanded .expand-composebox-button {
        display: none;
    }

#compose.compose-intermediate .maximize-composebox-button,#compose.automatically-expanded .maximize-composebox-button {
        display: flex;
    }

#compose.compose-intermediate {
    height: var(--max-unmaximized-compose-height);
}

.preview_mode #preview-message-area-container {
        /* When in preview mode, we display the
           preview container as a columnar flexbox.
           This containing element is necessary
           because Simplebar on its own will cause
           a grid blowout despite a minmax(0, 1fr)
           row definition. */
        display: flex;
        flex-flow: column;
    }

.preview_mode .preview_mode_disabled {
        opacity: 0.3;
    }

.preview_mode .preview_mode_disabled .compose_control_button {
            pointer-events: none;
        }

.preview_mode .message-textarea,.preview_mode .message-edit-textbox {
        /* In preview mode, we hide the message edit
           textbox to prevent it from appearing behind
           the preview container. We cannot set its
           display to none or visibility to hidden, as
           that would prevent us from modifying the
           textarea's value.

           The !important use here in necessary to be sure
           we override the inline styles set on the
           compose textarea. */
        height: 0 !important;
        overflow: hidden !important;
    }

#compose:has(textarea#compose-textarea:disabled) .disable-on-invalid-recipient {
        opacity: 0.3;
    }

#compose:has(textarea#compose-textarea:disabled) .disable-on-invalid-recipient .compose_control_button {
            pointer-events: none;
        }

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/message_edit_history.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/

    .message-edit-history-container .header-body {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        gap: 5px;
    }

@media (width < 992px) {

.message-edit-history-container .header-body {
            display: block;
    }
        }

/*
        styles are based on drafts-list
        see web/styles/drafts.css
        */

.message-edit-history-container .message-edit-history-list h2 {
            font-size: 1.1em;
            line-height: normal;
            margin-bottom: 5px;
        }

.message-edit-history-container .message_edit_history_content .highlight_text_inserted {
            color: var(--color-message-edit-history-text-inserted);
            background-color: var(
                --color-message-edit-history-background-inserted
            );
        }

.message-edit-history-container .message_edit_history_content .highlight_text_deleted {
            color: var(--color-message-edit-history-text-deleted);
            background-color: var(
                --color-message-edit-history-background-deleted
            );
            -webkit-text-decoration: line-through;
            text-decoration: line-through;
            word-break: break-all;
        }

.message-edit-history-container .messagebox-content {
        display: block !important;
    }

.message-edit-history-container .messagebox-content .message_content {
            cursor: default !important;
        }

.message-edit-history-container #message-history-error {
        /*
        styles are based on .model_content
        see web/styles/modal.css
        */
        font-size: 1rem;
        display: none;
        margin: 10px;
    }

.message-edit-history-container .overlay_loading_indicator_style {
        width: 100% !important;
        height: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* We need to use different color for links to distinguish
       them from normal text and have enough contrast so that they
       are visible clearly. */

#message-history-overlay .message-edit-history-container .message_edit_history_content .highlight_text_inserted  > a,#message-history-overlay .message-edit-history-container .message_edit_history_content .highlight_text_deleted  > a {
            --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) hsl(200.27deg 100% 85.49%);
            color: var(--csstools-light-dark-toggle--0, var(--color-markdown-link));
        }

@supports (color: hsl(0 0% 0% / 0)) and (color: light-dark(red, red)) {
#message-history-overlay .message-edit-history-container .message_edit_history_content .highlight_text_inserted  > a,#message-history-overlay .message-edit-history-container .message_edit_history_content .highlight_text_deleted  > a {
            color: light-dark(
                var(--color-markdown-link),
                hsl(200.27deg 100% 85.49%)
            );
        }
}

/* Show `Link:` text of media beside it
       to clarify click area for opening media
       in new tab vs in lightbox. */

#message-history-overlay .message-edit-history-container .message_edit_history_content .highlight_text_inserted:has(.media-anchor-element .media-image-element)  > .media-anchor-element {
            display: flex;
            overflow-wrap: anywhere;
        }

#message-history-overlay .message-edit-history-container .message_edit_history_content .highlight_text_deleted:has(.media-anchor-element .media-image-element)  > .media-anchor-element {
            display: flex;
            overflow-wrap: anywhere;
        }

#message-history-overlay .message-edit-history-container .message_edit_history_content .highlight_text_inserted:has(.media-anchor-element .media-image-element) > .media-anchor-element  > .media-image-element {
                flex-grow: 1;
                flex-shrink: 0;
            }

#message-history-overlay .message-edit-history-container .message_edit_history_content .highlight_text_deleted:has(.media-anchor-element .media-image-element) > .media-anchor-element  > .media-image-element {
                flex-grow: 1;
                flex-shrink: 0;
            }

@media (width < 576px) {
            #message-history-overlay .message-edit-history-container .message_edit_history_content .highlight_text_inserted:has(.media-anchor-element .media-image-element)  > .media-anchor-element {
                flex-direction: column;
            }
            #message-history-overlay .message-edit-history-container .message_edit_history_content .highlight_text_deleted:has(.media-anchor-element .media-image-element)  > .media-anchor-element {
                flex-direction: column;
            }
        }

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/reactions.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************/
.message_reactions {
    overflow: hidden;
    -webkit-user-select: none;
            user-select: none;
}

.message_reactions:has(.message_reaction) {
        margin-bottom: var(--message-box-markdown-aligned-vertical-space);
    }

.message_reactions .message_reaction_container.disabled {
            cursor: not-allowed;
        }

.message_reactions .message_reaction {
        display: flex;
        /* Set a pixel and half padding to maintain
           pill height adjacent own reactions. */
        padding: 1.5px 4px 1.5px 3px;
        box-sizing: border-box;
        min-width: 44px;
        cursor: pointer;
        color: var(--color-message-reaction-text);
        background-color: var(--color-message-reaction-background);
        border: 1px solid var(--color-message-reaction-border);
        border-radius: 21px;
        align-items: center;
        box-shadow: inset 0 0 5px 0 var(--color-message-reaction-shadow-inner);
        transition:
            transform 100ms linear,
            font-weight 100ms linear; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
    }

.message_reactions .message_reaction.reacted {
            color: var(--color-message-reaction-text-reacted);
            background-color: var(--color-message-reaction-background-reacted);
            border-color: var(--color-message-reaction-border-reacted);
            /* Make this border thicker by half a pixel,
               to make own reactions more prominent. */
            border-width: 1.5px;
            /* Reduce the padding top and bottom by half
               a pixel accordingly, to maintain the same
               pill height. */
            padding: 1px 4px 1px 3px;
            font-weight: var(--font-weight-message-reaction);
            box-shadow: none;
        }

.message_reactions .message_reaction.disabled {
            pointer-events: none;
        }

.message_reactions .message_reaction:hover {
            background-color: var(--color-message-reaction-background-hover);
        }

.message_reactions .message_reaction:active {
            transform: scale(var(--scale-message-reaction-active));
        }

.message_reactions .message_reaction .emoji {
            margin: 1px 3px;
            /* 17px at 14px/1em */
            height: 1.2143em;
            width: 1.2143em;
            /* Preserve the emoji's dimensions, no
               matter what the flexbox does. */
            flex-shrink: 0;
            /* Don't inherit position: relative; from
               the base .emoji class. */
            position: static;
        }

.message_reactions .message_reaction .emoji_alt_code {
            /* Apply the same margins as on graphical emoji. */
            margin: 1px 3px;
            font-size: 0.8em;
        }

.message_reactions .message_reaction_count {
        /* 90% works out here to 12.6px */
        font-size: 90%;
        /* No top and bottom margin; just allow
           flexbox to handle the vertical alignment. */
        margin: 0 3px;
        /* Set the 12.6px text on a 13px line;
           the goal is to center correctly on the
           vertical with square emoji, resulting in
           equal space above and below the reaction
           count/name.
           13px at 12.6/1em */
        line-height: 1.0317em;
    }

.message_reactions .message_reaction:hover .message_reaction_count {
        color: var(--color-message-reaction-button-text-hover);
    }

.message_reactions:hover .reaction_button {
        visibility: visible;
        pointer-events: all;
    }

.message_reactions .emoji-message-control-button-container {
        display: flex;
        align-items: center;
    }

.message_reactions .reaction_button {
        visibility: hidden;
        pointer-events: none;
        /* Set top/bottom padding to accommodate borders
           and padding around reaction pills. */
        padding: 4px 6px;
        border-radius: 21px;
        color: var(--color-message-reaction-button-text);
        background-color: var(--color-message-reaction-button-background);
        border: 1px solid var(--color-message-reaction-button-border);
    }

.message_reactions .reaction_button i {
            font-size: 1em;
            color: var(--color-message-reaction-button-text);
        }

.message_reactions .reaction_button:hover i {
            color: var(--color-message-reaction-button-text-hover);
        }

.message_reactions .reaction_button:hover {
            color: var(--color-message-reaction-button-text-hover);
            background-color: var(
                --color-message-reaction-button-background-hover
            );
            border: 1px solid var(--color-message-reaction-button-border-hover);
            border-color: var(--color-message-reaction-button-border-hover);
            box-shadow: inset 0 0 5px 0
                var(--color-message-reaction-shadow-inner);
            cursor: pointer;
            opacity: 1;
        }

.message_reactions .reaction_button .message_reaction_count {
            font-weight: 700;
            color: var(--color-message-reaction-button-text);
            margin-right: 0;
            line-height: 14px;
        }

.message_reactions .reaction_button:hover .message_reaction_count {
            color: var(--color-message-reaction-button-text-hover);
        }

.active-emoji-picker-reference,
.active-playground-links-reference {
    visibility: visible !important;
    pointer-events: all !important;
    opacity: 1 !important;
}

.emoji-picker-popover {
    padding: 0;
    -webkit-user-select: none;
            user-select: none;
}

.emoji-picker-popover .emoji-popover {
        width: 16.6667em; /* 250px at 15px/em */
    }

.emoji-picker-popover .emoji-popover .emoji-popover-category-tabs {
            /* Flex needed here to work around #7511 (90% zoom issues in firefox) */
            display: flex;
            background-color: var(--color-background-emoji-picker-popover);
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

.emoji-picker-popover .emoji-popover .emoji-popover-category-tabs .emoji-popover-tab-item {
                font-size: 1.0667em; /* 16px at 15px/em */
                display: inline-block;
                padding-top: 0.5em; /* 8px at 16px/em */
                width: 1.5625em; /* 25px at 16px/em */
                height: 1.5625em; /* 25px at 16px/em */
                text-align: center;
                cursor: pointer;
                /* Flex needed here to work around #7511 (90% zoom issues in firefox) */
                flex-grow: 1;
            }

.emoji-picker-popover .emoji-popover .emoji-popover-category-tabs .emoji-popover-tab-item.active {
                    background-color: var(
                        --color-background-emoji-picker-popover-tab-item-active
                    );
                }

.emoji-picker-popover .emoji-popover .emoji-popover-emoji-map,.emoji-picker-popover .emoji-popover .emoji-search-results-container {
            padding: 0;
            position: relative;
            overflow: hidden auto;
            display: block;
            width: 16.4667em; /* 247px at 15px/em */
            padding-left: 0.2em; /* 3px at 15px/em */
        }

.emoji-picker-popover .emoji-popover .emoji-popover-emoji-map {
            height: 16.6667em; /* 250px at 15px/em */
        }

.emoji-picker-popover .emoji-popover .emoji-popover-emoji-map .emoji-popover-subheading {
                font-weight: 600;
                padding: 0.3333em 0.2em; /* 5px 3px at 15px/em */
            }

.emoji-picker-popover .emoji-popover .emoji-popover-emoji {
            display: inline-block;
            margin: 0;
            padding: 0.4em; /* 6px at 15px/em */
            cursor: pointer;
            border-radius: 0.5em;
            height: 1.6667em; /* 25px at 15px/em */
            width: 1.6667em; /* 25px at 15px/em */
        }

.emoji-picker-popover .emoji-popover .emoji-popover-emoji:focus {
                background-color: var(
                    --color-background-emoji-picker-emoji-focus
                );
                /* Only dark mode takes a box shadow on
                   the emoji-picker's focused emoji. */
                box-shadow: 0 0 1px
                    var(--color-box-shadow-emoji-picker-emoji-focus);
                outline: none;
            }

.emoji-picker-popover .emoji-popover .emoji-popover-emoji.reacted {
                background-color: var(
                    --color-background-emoji-picker-emoji-reacted
                );
                border-color: var(--color-border-emoji-picker-emoji-reacted);
            }

.emoji-picker-popover .emoji-popover .emoji-popover-emoji.reacted:focus {
                background-color: var(
                    --color-background-emoji-picker-emoji-reacted-focus
                );
            }

.emoji-picker-popover .emoji-popover .emoji-popover-emoji.hide {
                display: none;
            }

.emoji-picker-popover .emoji-popover .emoji-popover-emoji .emoji {
                height: 1.6667em; /* 25px at 15px/em */
                width: 1.6667em; /* 25px at 15px/em */
            }

.emoji-picker-popover .emoji-popover .emoji-search-results-container {
            /* Keep it hidden initially to avoid it taking extra height
               when the emoji popover is initially rendered which can
               cause the popover to render at incorrect position when
               the search container is hidden `onMount`. */
            display: none;
            height: 18.8667em; /* 283px at 15px/em */
        }

.emoji-picker-popover .emoji-popover .emoji-search-results-container .emoji-popover-results-heading {
                font-size: 1.1333em; /* 17px at 15px/em */
                font-weight: 600;
                padding: 0.2941em 0.1765em 0.1765em 0.2941em; /* 5px 3px 3px 5px at 17px/em */
            }

.emoji-picker-popover .emoji-showcase-container {
        position: relative;
        background-color: var(--color-background-emoji-picker-popover);
        min-height: 2.9333em; /* 44px at 15px/em */
        width: 16.6667em; /* 250px at 15px/em */
        border-radius: 0 0 6px 6px;
    }

.emoji-picker-popover .emoji-showcase-container .emoji-preview {
            position: absolute;
            width: 2.1333em; /* 32px at 15px/em */
            height: 2.1333em; /* 32px at 15px/em */
            left: 0.3333em; /* 5px at 15px/em */
            top: 0.4em; /* 6px at 15px/em */
            margin-top: 0;
        }

.emoji-picker-popover .emoji-showcase-container .emoji-canonical-name {
            font-size: 1.0667em; /* 16px at 15px/em */
            position: relative;
            top: 0.75em; /* 12px at 16px/em */
            margin-left: 3.125em; /* 50px at 16px/em */
            font-weight: 600;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

.typeahead .emoji {
    top: 2px;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/search.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************/
#searchbox {
    width: 100%;
    height: var(--header-height);
}
#searchbox .navbar-search {
        margin: 0.2187em 0; /* 3.5px at 16px em */
        border-radius: 5px;
        position: absolute;
        overflow: hidden;
        /* We bump the z-index to keep the search box
           clickable despite position-based layout
           adjustments. */
        z-index: 1;
    }
#searchbox .navbar-search:has(#searchbox-input-container:focus-visible) {
        outline: 2px solid var(--color-outline-focus);
    }
#searchbox .search_icon {
        grid-area: search-icon;
        align-self: center;
        -webkit-text-decoration: none;
        text-decoration: none;
        padding: 0 0.4117em; /* 7px at 17px em */
        font-size: 1.0625em; /* 17px at 16px em */
        border: none;
        background-color: transparent;
        color: var(--color-search-icons);
        opacity: 0.5;
        cursor: default;
    }
#searchbox .search_icon:active {
            outline: none;
        }
#searchbox .search_icon:focus {
            outline: none;
        }
#searchbox .search_icon:disabled {
            visibility: hidden;
        }
#searchbox .search_close_button {
        grid-area: search-close;
        width: 1.75em; /* 28px at 16px em */
        height: 100%;
        background: none;
        border: none;
        opacity: 0.5;
        line-height: 0;
        border-radius: 4px;
        /* Reset iOS button defaults. */
        color: var(--color-search-icons);
        padding: 0;
        outline: none;
        font-size: inherit;
    }
#searchbox .search_close_button:hover {
            opacity: 1;
        }
#searchbox .search_close_button:focus-visible {
            outline: 2px solid var(--color-outline-focus);
            outline-offset: -3px;
        }
#searchbox .search_close_button:disabled {
            visibility: hidden;
        }
#searchbox .search-input-and-pills {
        grid-area: search-pills;
        display: flex;
        padding: 0;
        flex-wrap: wrap;
        gap: 0.3571em; /* 5px at 14px em, matches pill spacing in typeahead dropdown */
        align-self: center;
    }
#searchbox .navbar-search:not(.expanded) {
        right: 0;
        background-color: var(--color-background-search-collapsed);
    }
#searchbox .navbar-search:not(.expanded) .search_close_button {
            display: none;
        }
#searchbox .navbar-search:not(.expanded) #searchbox-input-container {
            width: var(--search-box-width);
        }
@media (width < 768px) {
    #searchbox .navbar-search:not(.expanded) #searchbox-input-container {
                /* Square off the icon-only presentation. */
                width: var(--search-box-height);
                grid-template:
                    "search-icon search-pills" var(--search-box-height)
                    / var(--search-box-height) 0;
                column-gap: 0;
        }
            }
#searchbox .navbar-search:not(.expanded) .search-input {
            border-radius: 5px;
            color: var(--color-text-search);
            box-shadow: none;
        }
#searchbox .navbar-search:not(.expanded):hover {
            cursor: pointer;
        }
@media (width >= 768px) {
    #searchbox .navbar-search:not(.expanded):hover {
                box-shadow:
                    0 4px 20px var(--color-search-box-hover-shadow),
                    0 1px 5px var(--color-search-box-hover-shadow);
        }
            }
#searchbox .navbar-search:not(.expanded):hover .search_icon {
                cursor: pointer;
            }
@media (width < 768px) {
            #searchbox .navbar-search:not(.expanded) .search-input {
                opacity: 0;
            }
        }
@media (height < 600px) {
            #searchbox .navbar-search:not(.expanded) #searchbox-input-container .search_icon {
                font-size: 1.125em; /* 18px at 16px/em */
            }
        }
#searchbox .navbar-search.expanded {
        width: 100%;
        box-shadow:
            0 4px 20px var(--color-search-shadow-wide),
            0 1px 5px var(--color-search-shadow-tight);
    }
#searchbox .navbar-search.expanded .search-input {
            cursor: text;
        }
#searchbox .navbar-search.expanded #searchbox-input-container.pill-container {
            /* Pill container should display the same background
               color as the search typeahead. */
            background-color: var(--color-background-search);
        }
@media (width < 768px) {
    #searchbox .navbar-search.expanded {
            /* 3px chosen so that the cursor clicks the search button
               and close button from the same position. */
            width: calc(100% - 3px);
            /* z-index to not see the gear icon underneath */
            z-index: 1;
    }
        }
#searchbox .typeahead.dropdown-menu {
        /* Match the typeahead's width to its parent container. */
        right: 0;
        top: 0;
        margin-top: 0;
        padding-top: 0;
        box-shadow: none;
        position: relative;
        width: 100%;
        background: var(--color-background-search);
        color: var(--color-text-search);

        border-width: 0;
        border-top-width: 1px;
        border-top-color: var(--color-search-dropdown-top-border);
        border-radius: 0 0 4px 4px;
    }
#searchbox .typeahead.dropdown-menu .active > a {
            background-color: var(--color-background-search-option-hover);
            background-image: none;
            color: var(--color-text-search-hover);
        }
#searchbox .typeahead.dropdown-menu .typeahead-menu .simplebar-content {
            min-width: unset;
        }
#searchbox .typeahead.dropdown-menu .typeahead-menu .simplebar-content > li > a {
            max-width: none;
        }
#searchbox .input-append {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
    }
#searchbox .search-input {
        /* Avoid massive inheritance chain on font-size. */
        font-size: var(--base-font-size-px);
        /* override bootstrap padding for input[type="text"] */
        padding: 0;
        border: none;
        outline: none;
        border-radius: 0;
        font-weight: 400;
        background: transparent;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: pre;
        flex-grow: 1;

        color: var(--color-text-search);

        display: flex;
        align-items: center;
    }
#searchbox .search-input:empty::before {
            content: attr(data-placeholder-text);
            color: var(--color-text-search-placeholder);
        }
#searchbox #searchbox-input-container .user-pill-container,#searchbox .typeahead-menu .user-pill-container {
        border: 1px solid transparent;
    }
#searchbox #searchbox-input-container .user-pill-container  > .pill-label,#searchbox .typeahead-menu .user-pill-container:not(#does-not-exist)  > .pill-label {
            min-width: fit-content;
            white-space: nowrap;
            width: fit-content;
            /* Replaced by the 5px gap. */
            margin-right: 0;
        }
#searchbox #searchbox-input-container .user-pill-container .pill,#searchbox .typeahead-menu .user-pill-container:not(#does-not-exist) .pill {
            height: var(--length-user-pill-height);
        }
#searchbox #searchbox-input-container .user-pill-container .pill-image,#searchbox .typeahead-menu .user-pill-container:not(#does-not-exist) .pill-image {
            height: var(--length-search-pill-image);
            width: var(--length-search-pill-image);
        }
#searchbox #searchbox-input-container .user-pill-container .pill-image-border,#searchbox .typeahead-menu .user-pill-container:not(#does-not-exist) .pill-image-border {
            border: none;
        }
#searchbox #searchbox-input-container .user-pill-container .pill:not(.deactivated-pill),#searchbox .typeahead-menu .user-pill-container:not(#does-not-exist) .pill:not(.deactivated-pill) {
            background-color: var(--color-background-user-pill);
        }
#searchbox #searchbox-input-container {
        display: grid;
        /* The next two styles override .input-append style from app_components.js */
        letter-spacing: normal;
        font-size: 100%;
        /* Override style for .pill-container that isn't relevant for search. */
        border: none;
        grid-template:
            "search-icon search-pills search-close" var(--search-box-height)
            ". search-pills ." auto / var(--search-left-padding) minmax(0, 1fr)
            1.75em; /* 28px at 16px em */
        align-content: center;
        cursor: pointer;

        /* Override styles for .pill-container that aren't relevant for search. */
    }
#searchbox #searchbox-input-container.pill-container {
            background: inherit;
            gap: 0;
            /* Override padding. */
            padding: 0;
        }
#searchbox #searchbox-input-container .pill {
            margin: 0;
            min-width: unset;
            background-color: var(--color-background-input-pill-search);
        }
#searchbox #searchbox-input-container:not(.focused) {
            height: var(--search-box-height);
            overflow: hidden;
        }
#searchbox #searchbox-input-container:not(.focused) .search-input-and-pills {
                flex-wrap: nowrap;
                overflow: hidden;
            }
@media (height < 600px) {
    #searchbox #searchbox-input-container:not(.focused) .search-input-and-pills {
                    line-height: var(--base-line-height-unitless);
            }
                }
#searchbox #searchbox-input-container.focused .user-pill-container {
            flex-flow: row wrap;
        }
#searchbox #searchbox-input-container .user-pill-container {
            gap: 2px 5px;
            /* Don't enforce a height, as user-pill containers
                can contain multiple user pills that wrap onto
                new lines. */
            height: unset;

            /* Not focus-visible, because we want to support mouse+backpace
                to delete pills */
        }
#searchbox #searchbox-input-container .user-pill-container:focus {
                /* Unlike regular `.pill` this multi-user pill has a border,
                    so we use border instead of box-shadow on focus. */
                box-shadow: none;
                border-color: var(--color-focus-outline-input-pill);
            }
#searchbox #searchbox-input-container .user-pill-container  > .pill-label {
                /* Don't inherit large line-height for user pill labels. */
                line-height: 1.1;
            }
#searchbox #searchbox-input-container .user-pill-container .pill {
                border: none;
                /* Match border radius to image */
                border-radius: 4px;
                max-width: none;
                /* Set the minimum width on the pill container;
                    this accommodates the avatar, a minimum
                    two-character username, and the closing X.
                    90px at 20px/1em.

                TODO: This would ideally be reworked, as we need to
                override it for search suggestion pills (with no X) below.
               */
                min-width: 4.5em;
                display: grid;
                grid-template-columns:
                    var(--length-search-pill-image) minmax(0, 1fr)
                    var(--length-input-pill-exit);
                align-content: center;
                /* Don't inherit large line-height for user pills themselves, either. */
                line-height: 1.1;
            }
@media (width >= 768px) {
        #searchbox .navbar-search {
            background: var(--color-background-search);
        }

        #searchbox .navbar-search:not(.expanded) {
            box-shadow: 0 0 2px var(--color-search-box-hover-shadow);
        }
    }
@media (width < 768px) {
        #searchbox .navbar-search:not(.expanded) .search_icon:hover {
            opacity: 1;
        }

        #searchbox .navbar-search.expanded {
            background: var(--color-background-search);
        }
    }
@media (height < 600px) {
        #searchbox #searchbox_form:not(.expanded) {
            margin: 0;
            /* Now that the header is shorter, the search box will take up the whole
               height (which looks weird), so add 1px of space above and below it
               by manipulating the margin and the height. */
            margin-top: 1px;
            height: calc(var(--header-height) - 3px);
        }

        /* It looks fine to fill the navbar when the typeahead is open. */
        #searchbox #searchbox_form.expanded {
            margin-top: 1px;
        }
    }
@media (width < 576px) {
        #searchbox #searchbox_form.expanded {
            position: fixed;
            left: 0;
            right: 9px;
            width: 100%;
            border-radius: 0;
            box-shadow: none;
            /* To be visible over `.left-sidebar-toggle-unreadcount` */
            z-index: 20;
        }
    }
#searchbox .typeahead-menu .simplebar-content > li > a {
        padding: 3px var(--search-left-padding);
        /* Override white-space: nowrap from zulip.css */
        white-space: normal;
    }
#searchbox .typeahead-menu .simplebar-content > li > a .search_list_item {
            max-width: 100%;
            display: flex;
            gap: 5px;
            align-items: center;
        }
#searchbox .typeahead-menu .simplebar-content > li > a .search_list_item .description {
            margin: 2px 0;
        }
#searchbox .typeahead-menu .simplebar-content > li > a .search_list_item .pill-container {
            margin: 2px 0;
            /* This contains only one pill, which handles its own border */
            border: none;
            cursor: pointer;
            padding: 0;
            max-width: 100%;
        }
#searchbox .typeahead-menu .simplebar-content > li > a .pill {
            align-items: baseline;
            margin: 0;

            /* We remove the close button's column space from the grid template
               for search suggestions, since there's no exit button.
               The min-width here prevents extra space on very short names. */
            min-width: 0;
            grid-template-columns: var(--length-search-pill-image) minmax(
                    0,
                    1fr
                );

            /* We don't show a border for focused pills
               in the search typeahead */
        }
#searchbox .typeahead-menu .simplebar-content > li > a .pill:focus {
                /* Regular pills use box-shadow. */
                box-shadow: none;

                /* User pills use border */
                border-color: var(--color-background-input-pill);
            }
#searchbox .typeahead-menu .simplebar-content > li > a .pill:focus .pill-image-border {
                    border-color: var(--color-border-input-pill-image);
                }
#searchbox .typeahead-menu .simplebar-content > li > a .pill .exit {
                display: none;
            }
#searchbox .typeahead-menu .simplebar-content > li > a .user-pill-container {
            gap: 5px;
        }
#searchbox .typeahead-menu .simplebar-content > li > a .pill-image {
            /* Add line-height equal to height to mimic baseline alignment. */
            line-height: var(--height-input-pill);
            align-self: center;
        } /* Break really long words (unlikely to happen). */
#searchbox .search_list_item span {
        overflow-wrap: anywhere;
    }

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/user_circles.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************/
.user-circle-active {
    color: var(--color-user-circle-active);
}

.user-circle-idle {
    background: var(--gradient-user-circle-idle);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.with_avatar .user-circle-idle {
    background: var(--gradient-user-circle-idle-avatar);
}

.user-circle-offline {
    color: var(--color-user-circle-offline);
}

.user-circle-deactivated {
    color: var(--color-user-circle-deactivated);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/left_sidebar.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************/
.left-sidebar-title {
    color: var(--color-text-sidebar-heading);
    opacity: var(--opacity-sidebar-heading);
    transition: opacity 140ms linear;
    font-size: inherit;
    font-weight: var(--font-weight-sidebar-heading);
    letter-spacing: var(--letter-spacing-sidebar-heading);
    /* 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;
            user-select: none;
}

.sidebar-topic-check,
.topic-markers-and-unreads {
    cursor: pointer;
}

#left-sidebar-navigation-list .filter-icon i {
    color: var(--color-left-sidebar-navigation-icon);
}

#stream_filters,
#left-sidebar-navigation-list {
    margin-right: var(--left-sidebar-right-margin);
}

.add-stream-icon-container {
    grid-area: add-channel;
    display: grid;
    margin: 2px;
    border-radius: 3px;
    color: var(--color-sidebar-action);
}

.add-stream-icon-container:hover {
        color: var(--color-sidebar-action-hover);
        background-color: var(--color-background-sidebar-action-hover);
        cursor: pointer;
    }

.add-stream-icon-container:focus-visible {
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
    }

.add-stream-icon-container .add_stream_icon {
        /* We display as flex to center the icon while
           keeping the entire highlighted area clickable. */
        display: flex;
        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: var(--color-unread-counter-muted);
    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: 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 {
            display: flex;
        }

#stream_filters .stream-expanded .subscription_block .sidebar-menu-icon {
            display: flex;
            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: var(--left-sidebar-right-margin);
    padding: var(--left-sidebar-direct-messages-bottom-divider-padding) 0;
    position: sticky;
    top: var(--line-height-sidebar-row-prominent);
    background: var(--color-background);
    z-index: 3;
}

.direct-message-section-bottom-divider {
    opacity: 1 !important; /* override .dark-theme:root hr */
    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: var(--left-sidebar-right-margin);
    }

#left-sidebar-modal-content #direct-messages-modal .dm-list {
        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 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;

    /* 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) {
        background-color: var(--color-background);
    }

#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: 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 {
        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 {
            color: var(--color-sidebar-action-hover);
            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: 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 {
        background-color: var(--color-background-hover-narrow-filter);
        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: 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" 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) var(--left-sidebar-header-icon-width)
        auto;
    position: sticky;
    top: 0;
    background: var(--color-background);
    /* Must be padding not margin so that the sticky headers don't show behind it */
    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(var(--left-sidebar-vdots-width) - 3px);
        cursor: pointer;
        place-items: center center;
        border-radius: 3px;
        margin: 2px 2px 2px 1px;
        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 {
            color: var(--color-vdots-hover);
            background-color: var(--color-background-sidebar-action-hover);
        }

#left-sidebar-search .channel-folders-sidebar-menu-icon:focus-visible {
            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" 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;
    background-color: var(--color-background);
    position: sticky;
    /* height of DM header + 1px divider line and its top/bottom padding */
    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;
    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;
}

.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: var(--left-sidebar-unread-offset);
    }

.stream-list-subsection-header .add-stream-icon-container {
        -webkit-text-decoration: none;
        text-decoration: none;
        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(
            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 {
        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 {
        background-color: var(--color-background-hover-narrow-filter);
        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: var(--opacity-sidebar-heading-hover);
        }

.stream-list-subsection-header:hover .add_stream_icon {
            visibility: visible;
        }

.stream-list-subsection-header:has(.left_sidebar_menu_icon_visible) {
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
        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: var(--opacity-sidebar-heading-hover);
        }

.stream-list-subsection-header .stream-list-section-toggle {
        color: var(--color-text-sidebar-heading);
        opacity: var(--opacity-sidebar-heading-icon);
        justify-self: center;
    }

.stream-list-toggle-inactive-or-muted-channels {
    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: var(--base-font-size-px);
        /* We also want the count text to be the normal font style. */
        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: var(--font-size-sidebar-action-heading);
            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) 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: 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,#streams_list .stream-list-section-container.collapsed .topic-list-item:not(.active-sub-filter) {
        display: none;
    }

/* Only show section header unread counts when the section is collapsed
   or when the header is being hovered over. */
#streams_list .stream-list-section-container:not(.collapsed) .stream-list-subsection-header:not(:hover) .unread_count,#streams_list .stream-list-section-container:not(.collapsed) .stream-list-subsection-header:not(:hover) .masked_unread_count {
            visibility: hidden;
        }
#streams_list .stream-list-section-container:not(.collapsed) .stream-list-subsection-header:not(:hover) .unread_mention_info {
        display: none;
    }

.direct-messages-container.zoomed-out {
    /* Properly offset all the grid rows
       in the DM section. */
    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: 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) {
                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 {
            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: var(--font-size-sidebar-action-heading);
                font-weight: var(--font-weight-sidebar-action-heading);
                font-variant: var(--font-variant-sidebar-action-heading);
                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 {
                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 {
                    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 {
    color: var(--color-text-sidebar-heading);
    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 var(--color-outline-focus);
    }

#toggle-top-left-navigation-area-icon:focus-visible {
        outline: 2px solid var(--color-outline-focus);
    }

.stream-list-section-toggle:focus {
        outline: 0;
    }

.stream-list-section-toggle:focus-visible {
        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 {
    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) {
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
    }

.bottom_left_row:has(.left_sidebar_menu_icon_visible) {
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
    }

.top_left_row:hover,.bottom_left_row:hover {
        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) {
            background-color: var(--color-background-hover-narrow-filter);
        }

.bottom_left_row:not(.active-sub-filter):has(.left_sidebar_menu_icon_visible) {
            background-color: var(--color-background-hover-narrow-filter);
        }

.top_left_row:not(.active-sub-filter):hover,.bottom_left_row:not(.active-sub-filter):hover {
            background-color: var(--color-background-hover-narrow-filter);
        }

.top_left_row:not(.active-sub-filter):has(.left_sidebar_menu_icon_visible) .sidebar-topic-check {
                background-color: var(--color-background-hover-narrow-filter);
            }

.bottom_left_row:not(.active-sub-filter):has(.left_sidebar_menu_icon_visible) .sidebar-topic-check {
                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 {
                background-color: var(--color-background-hover-narrow-filter);
            }

.top_left_row:has(.zoomed-new-topic):hover {
        background: var(--color-background-sidebar-action-heading-hover);
    }

.bottom_left_row:has(.zoomed-new-topic):hover {
        background: var(--color-background-sidebar-action-heading-hover);
    }

.top_left_row:has(.sidebar-topic-action-heading):hover {
        background-color: var(--color-background-sidebar-action-heading-hover);
    }

.bottom_left_row:has(.sidebar-topic-action-heading):hover {
        background-color: var(--color-background-sidebar-action-heading-hover);
    }

.top_left_row:has(a.left-sidebar-navigation-label-container:focus-visible) {
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
        background-color: var(--color-background-hover-narrow-filter);
    }

.bottom_left_row:has(a.left-sidebar-navigation-label-container:focus-visible) {
        outline: 2px solid var(--color-outline-focus);
        outline-offset: -2px;
        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) {
            background-color: var(--color-background-active-narrow-filter);
        }

.active-filter.bottom_left_row:has(.left_sidebar_menu_icon_visible) {
            background-color: var(--color-background-active-narrow-filter);
        }

.top-left-active-filter.top_left_row:has(.left_sidebar_menu_icon_visible) {
            background-color: var(--color-background-active-narrow-filter);
        }

.top-left-active-filter.bottom_left_row:has(.left_sidebar_menu_icon_visible) {
            background-color: var(--color-background-active-narrow-filter);
        }

.active-sub-filter.top_left_row:has(.left_sidebar_menu_icon_visible) {
            background-color: var(--color-background-active-narrow-filter);
        }

.active-sub-filter.bottom_left_row:has(.left_sidebar_menu_icon_visible) {
            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 var(--color-outline-focus);
    outline-offset: -2px;
    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 var(--color-outline-focus);
        outline-offset: -2px;
    }

#stream_filters .narrow-filter.active-filter:has(a.subscription_block:focus-visible) .topic-list .bottom_left_row {
        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 {
            background-color: var(--color-background-active-narrow-filter);
        }

#stream_filters .narrow-filter:has(a.subscription_block:focus-visible):not(.active-filter) {
        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 {
            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 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 var(--color-outline-focus);
    outline-offset: -2px;
    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;
        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;
        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;
        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;
        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;
        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;
        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;
        background-color: var(--color-background-hover-narrow-filter);
    }

#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 var(--left-sidebar-right-margin)
        calc(
            var(--left-sidebar-bottom-scrolling-buffer) +
                var(--sidebar-bottom-spacing)
        )
        0;
    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 {
        background: var(--color-background-sidebar-action-heading-hover);
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
        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(
                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;
        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: var(--font-size-sidebar-action-heading);
        font-weight: var(--font-weight-sidebar-action-heading);
        font-variant: var(--font-variant-sidebar-action-heading);
        font-feature-settings: var(
            --font-feature-settings-sidebar-action-heading
        );
        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: var(--font-size-sidebar-action-heading);
    }

ul.filters {
    list-style-type: none;
    margin-left: 0;
    line-height: var(--line-height-sidebar-row-prominent);
}

ul.filters .sidebar-topic-name,ul.filters .left-sidebar-navigation-label-container {
        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 */
            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 {
            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: 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: 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: 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: 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: 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;
            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: 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: 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: 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: 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: 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 {
            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;
    color: var(--color-text-active-narrow-filter);
    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 {
        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 {
            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 {
        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 {
        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) {
        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 {
        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 {
            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 {
                background: var(--color-background-navigation-item-hover);
            }

#left-sidebar-navigation-list-condensed .left-sidebar-navigation-condensed-item:not(.top_left_condensed_unread_marker):hover {
                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;
                    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;
                    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(var(--unread-dot-x-offset));
                width: 0.5em;
                height: 0.5em;
                padding: 0;
                color: transparent;
                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 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: unset;
    }

#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;
        color: var(--color-left-sidebar-navigation-icon);
    }

#left-sidebar-navigation-list {
    margin-bottom: 0;
    display: grid;
    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: 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:
        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: var(--left-sidebar-before-unread-count-padding);
    }

@media screen and (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: 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 (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: 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 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: unset;
        /* 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: 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: var(--left-sidebar-right-margin);
    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"]) {
        background-color: var(--color-background-hover-narrow-filter);
        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: var(--opacity-sidebar-heading-hover);
        }

#views-label-container:has(.left-sidebar-navigation-menu-icon[aria-expanded="true"]) .sidebar-heading-icon {
            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: 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;
        color: var(--color-vdots-visible);
    }

#views-label-container .left-sidebar-navigation-menu-icon:hover {
            color: var(--color-vdots-hover);
            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 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;
            user-select: text;
    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;
        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] 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" 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;
            user-select: text;
}

.searching-for-more-topics {
    margin-left: var(--left-sidebar-toggle-width-offset);
    height: var(--line-height-sidebar-row-prominent);
}

.topic-box .zero_count {
    display: none;
}

.sidebar-topic-name {
    cursor: pointer;
    grid-area: row-content;
    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. */
        overflow-wrap: break-word;

        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: var(--spacing-top-bottom-sidebar-topic-inner);
        margin: 0 0 var(--spacing-top-bottom-sidebar-topic-inner) 0;
    }

.sidebar-topic-action-heading {
    color: var(--color-text-sidebar-action-heading);
    font-size: var(--font-size-sidebar-action-heading);
    font-weight: var(--font-weight-sidebar-action-heading);
    font-variant: var(--font-variant-sidebar-action-heading);
    font-feature-settings: var(--font-feature-settings-sidebar-action-heading);
    text-transform: var(--text-transform-sidebar-action-heading);

    cursor: pointer;
    grid-area: row-content;
    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. */
        color: var(--color-text-sidebar-action-heading-hover) !important;
    }

.filter-topics {
    font-weight: initial;
}

.searching-for-more-topics img {
    height: 16px;
    grid-area: row-content;
}

.sidebar-topic-check {
    grid-area: starting-anchor-element;
    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. */
    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-columns: var(--left-sidebar-header-icon-width);
    grid-template-rows: var(--line-height-sidebar-row-prominent);
    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: 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"
        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"
        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;
    color: var(--color-text-sidebar-action-heading);
}

.zoomed-new-topic .topic-list-new-topic-icon {
        grid-area: starting-anchor-element;
        place-self: center end;
    }

.zoomed-new-topic .new-topic-label {
        grid-area: row-content;
        margin-top: -0.06em;
        font-size: var(--font-size-sidebar-action-heading);
        font-weight: var(--font-weight-sidebar-action-heading);
        font-variant: var(--font-variant-sidebar-action-heading);
        font-feature-settings: var(
            --font-feature-settings-sidebar-action-heading
        );
        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;
        color: var(--color-text-sidebar-action-heading);
    }

.channel-new-topic-button {
    /* display: flex; is set on visible channels and
       channel-row hovers. */
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--color-sidebar-action);
    margin: 2px 0;
    border-radius: 3px;
}

.channel-new-topic-button:hover {
        color: var(--color-sidebar-action-hover);
        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 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. */
    overflow-wrap: break-word;

    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: var(--spacing-top-bottom-sidebar-topic-inner)
        var(--left-sidebar-before-unread-count-padding) 0 0;
    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 {
        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. */
        color: var(--color-vdots-hint);
}
    }

.bottom_left_row .sidebar-menu-icon:focus-visible {
        outline: 2px solid var(--color-outline-focus);
    }

.bottom_left_row .channel-new-topic-button:focus-visible {
        outline: 2px solid var(--color-outline-focus);
    }

.top_left_row .sidebar-menu-icon:focus-visible {
        outline: 2px solid var(--color-outline-focus);
    }

.stream-list-section-container .sidebar-menu-icon:focus-visible {
        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;
    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;
    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;
    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;
    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;
    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;
    color: var(--color-vdots-visible);
}
#stream_filters li:focus-within .stream-sidebar-menu-icon:not(.does-not-exist):hover {
        color: var(--color-vdots-hover);
        background-color: var(--color-background-sidebar-action-hover);
    }
#stream_filters li:has(.highlighted_row) .stream-sidebar-menu-icon:not(.does-not-exist):hover {
        color: var(--color-vdots-hover);
        background-color: var(--color-background-sidebar-action-hover);
    }
.top_left_row:focus-within .sidebar-menu-icon:not(#does-not-exist):hover {
        color: var(--color-vdots-hover);
        background-color: var(--color-background-sidebar-action-hover);
    }
.bottom_left_row:focus-within .sidebar-menu-icon:not(#does-not-exist):hover {
        color: var(--color-vdots-hover);
        background-color: var(--color-background-sidebar-action-hover);
    }
#stream_filters .stream-list-subsection-header:focus-within .sidebar-menu-icon:hover {
        color: var(--color-vdots-hover);
        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 {
        color: var(--color-vdots-hover);
        background-color: var(--color-background-sidebar-action-hover);
    }

ul.topic-list {
    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;
    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;
    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 var(--color-outline-focus);
        outline-offset: -2px;
        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 var(--color-outline-focus);
        outline-offset: -2px;
        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: 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(
            var(--left-sidebar-toggle-width-offset) -
                var(--input-icon-starting-offset)
        );
    }

.dm-box {
    -webkit-user-select: text;
            user-select: text;
    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;
        place-self: center;
    }

.dm-box .conversation-partners-icon:not(.user-circle) {
            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;
    background-color: var(--color-background);
}

#more-topics-modal > .channel-header:hover {
        /* Prevent hover styles set on other rows. */
        box-shadow: none;
        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 var(--color-outline-focus);
        border-radius: 4px;
        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: 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 - var(--navbar-fixed-height) -
                var(--left-sidebar-modal-close-area-padding-top) -
                var(--left-sidebar-modal-close-area-height)
        );
        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 {
        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 {
        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 {
        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 {
            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(
            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 - 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)
        );
        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 {
        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 {
            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: var(--navbar-fixed-height);
    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: 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;
        background-color: var(--color-background);
        /* For the scrollbar */
        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;
        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 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: 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: 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;
        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;
        }

/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/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: var(--right-sidebar-padding-left);
}

.right-sidebar-title {
    color: var(--color-text-sidebar-heading);
    opacity: var(--opacity-sidebar-heading);
    font-size: inherit;
    font-weight: var(--font-weight-sidebar-heading);
    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;
    color: var(--color-text-sidebar-heading);
    opacity: var(--opacity-sidebar-heading-icon);
}

.buddy-list-section-toggle:focus {
        outline: 0;
    }

.buddy-list-section-toggle:focus-visible {
        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 var(--color-outline-focus);
        }

#userlist-header .user-list-sidebar-menu-icon:focus-visible {
            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. */
            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;
            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 {
                color: var(--color-vdots-hover);
                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: 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 {
            background-color: var(--color-buddy-list-highlighted-user);
            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) {
            background-color: var(--color-buddy-list-highlighted-user);
            box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
        }

.buddy-list-section li:hover,.buddy-list-section li.highlighted_user {
            background-color: var(--color-buddy-list-highlighted-user);
            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 var(--color-outline-focus);
            outline-offset: -2px;
        }

.buddy-list-section li.highlighted_user {
            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;
        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: 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;
            background-color: var(--color-background);
            /* A 1.5px border provides better results than
               a 1px border, especially at smaller font sizes. */
            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: 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;
            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" var(
            --line-height-sidebar-row-prominent
        )
        / var(--right-sidebar-header-icon-toggle-width) minmax(0, 1fr);
    cursor: pointer;
    background-color: var(--color-background);
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--color-text-default);
    border-radius: 4px;
    margin-right: var(--width-simplebar-scroll-hover);
}

.buddy-list-subsection-header:hover {
        background-color: var(--color-buddy-list-highlighted-user);
        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: var(--opacity-sidebar-heading-hover);
        }

.buddy-list-heading {
    -webkit-user-select: none;
            user-select: none;
    margin: 0;
    padding: 5px 5px 5px 0;
    color: var(--color-text-sidebar-heading);
    font-size: inherit;
    font-weight: var(--font-weight-sidebar-heading);
    letter-spacing: var(--letter-spacing-sidebar-heading);
    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;
    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" 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" 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(var(--right-sidebar-header-icon-toggle-width) / 2);
    }

.user_sidebar_entry.with_avatar .avatar-preload-background {
        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;
            user-select: text;
    grid-area: row-content;
}

.user-presence-link:hover,.user-presence-link:focus {
        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: var(--line-height-sidebar-row-with-avatars);
    display: grid;
    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% - 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" var(--line-height-sidebar-row)
        "row-content ." auto / minmax(0, 1fr) var(--right-sidebar-vdots-width);
    align-content: baseline;
    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(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((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(0deg 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: 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: var(--width-simplebar-scroll-hover);
    padding-bottom: var(--sidebar-filter-bottom-spacing);
    background-color: var(--color-background);
}

#userlist-header #buddy-list-menu-icon {
        color: var(--color-vdots-visible);
        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 {
            color: var(--color-vdots-hover);
            background-color: var(--color-background-sidebar-action-hover);
        }

.buddy-list-user-link,
.invite-user-shortcut {
    margin-right: var(--width-simplebar-scroll-hover);
    border-radius: 4px;
}

.buddy-list-user-link:hover,.invite-user-shortcut:hover {
        background: var(--color-background-sidebar-action-heading-hover);
        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
        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(
            var(--line-height-sidebar-row-prominent),
            auto
        );
        align-items: center;
        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: var(--spacing-top-bottom-sidebar-topic-inner) 0;
            line-height: 1;
            -webkit-text-decoration: none;
            text-decoration: none;
            font-size: var(--font-size-sidebar-action-heading);
            font-weight: var(--font-weight-sidebar-action-heading);
            font-variant: var(--font-variant-sidebar-action-heading);
            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: 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: var(--right-sidebar-text-indent-with-avatar);
}

.buddy-list-user-link .right-sidebar-wrappable-text-container,
.buddy-list-section .empty-list-message {
    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 - (var(--legacy-body-line-height-unitless) * 1em));
    margin-bottom: var(--sidebar-bottom-spacing);
}

.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(var(--right-sidebar-toggle-width-offset) + 0.3em);
    }

#user-list.with_avatars .invite-user-link {
    padding-left: calc(var(--right-sidebar-header-icon-toggle-width) / 2);
}

#buddy-list-actions-menu-popover .display-style-selector + .invite-user-link-item {
        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: var(--width-simplebar-scroll-hover);
    padding-top: 30px;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/lightbox.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
#lightbox_overlay {
    background-color: hsl(227deg 40% 16%);
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

#lightbox_overlay .image-preview {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        margin: 0;
        overflow: hidden;

        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
    }

#lightbox_overlay .image-preview img {
            cursor: move;
            max-height: 100%;
            max-width: 100%;
            object-fit: contain;
        }

#lightbox_overlay .image-preview .zoom-element {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

#lightbox_overlay .video-player {
        flex: 1;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        margin: 0;
        overflow: hidden;
    }

#lightbox_overlay .video-player video {
            max-width: 100%;
            max-height: 100%;
        }

#lightbox_overlay .exit {
        flex-shrink: 0;

        color: hsl(0deg 0% 100% / 80%);
        font-size: 14px;
        line-height: 31px;

        opacity: 0;
        pointer-events: none;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

#lightbox_overlay.show .exit {
        pointer-events: auto;
        opacity: 1;
    }

#lightbox_overlay .media-info-wrapper {
        display: flex;
        justify-content: end;
        align-items: start;
        gap: 20px;
        padding: 20px;

        background-color: transparent;
    }

#lightbox_overlay .media-actions {
        display: flex;
        flex-shrink: 0;
        gap: 10px;
    }

#lightbox_overlay .media-actions .lightbox-media-action {
            font-size: 0.9rem;
            min-width: inherit;
            padding: 4px 10px;
            border: 1px solid hsl(0deg 0% 100% / 60%);
            background-color: transparent;
            color: hsl(0deg 0% 100%);
            border-radius: 4px;
            -webkit-text-decoration: none;
            text-decoration: none;
            display: inline-block;
        }

#lightbox_overlay .media-actions .lightbox-media-action:hover {
                background-color: hsl(0deg 0% 100%);
                border-color: hsl(0deg 0% 100%);
                color: hsl(227deg 40% 16%);
            }

#lightbox_overlay .media-actions .disabled {
            opacity: 0.7;
            cursor: default;
        }

#lightbox_overlay .media-actions .disabled:hover {
                background-color: transparent;
                color: hsl(0deg 0% 100%);
                border: 1px solid hsl(0deg 0% 100% / 60%);
            }

#lightbox_overlay .media-description {
        container: media-description / inline-size;

        flex: 1;
        /* setting min-width to an absolute value will make
           sure the text gets truncated in case of overflow */
        min-width: 0;

        font-size: 1.1rem;
        color: hsl(0deg 0% 100%);
    }

#lightbox_overlay .media-description .title {
            vertical-align: top;
            font-weight: 400;
            line-height: normal;

            /* Required for text-overflow */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

#lightbox_overlay .media-description .user {
            font-weight: 300;
            line-height: normal;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: pre;
        }

#lightbox_overlay .media-description .user::before {
                margin-right: 5px;
                content: "\2014";
            }

#lightbox_overlay .player-container {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

#lightbox_overlay .player-container iframe {
            aspect-ratio: 16/9;
            /* for screen_width<=lg_min aspect-ratio will be
               maintained given portrait mode is used */
            /* in landscape max-height will prevent overflow,
               however user will benefit more from using
               youtube fullscreen at that point */
            width: 100%;
            /* maintains the aspect ratio for screen_width>=lg_min. */
            max-width: 992px;
            /* height(media_info_container) + height(center) < 200px */
            max-height: calc(100dvh - 200px);
        }

#lightbox_overlay .center {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        padding: 12px 20px;
    }

#lightbox_overlay .center .arrow {
            color: hsl(0deg 0% 100%);
            /* The thumbnails do not scale, so we express these
               dimensions as pixels, too. */
            font-size: 35px;
            line-height: 25.6px;

            cursor: pointer;

            opacity: 0.5;
            transition: opacity 0.3s ease;
        }

#lightbox_overlay .center .arrow:hover {
                opacity: 1;
            }

#lightbox_overlay .center .image-list {
            position: relative;
            display: inline-block;
            font-size: 0;

            max-width: 40vw;
            overflow: hidden;
            white-space: nowrap;
        }

#lightbox_overlay .center .image-list .image {
                display: inline-block;
                vertical-align: top;
                width: 50px;
                height: 50px;
                margin: 0 2px;

                background-color: hsl(0deg 0% 94% / 20%);
                opacity: 0.5;

                background-size: cover;
                background-position: center;
                cursor: pointer;
            }

#lightbox_overlay .center .image-list .image.selected {
                    opacity: 1;
                }

#lightbox_overlay .center .image-list .lightbox_video video {
                width: 50px;
                height: 50px;
            }

/* hide media-description if it has width less than 100px  */
@container media-description (max-width: 100px) {
        .media-description .title {
            display: none;
        }

        .media-description .user {
            display: none;
        }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/box_resize.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
.resizable-box-handle {
    position: absolute;
    -webkit-user-select: none;
            user-select: none;
    touch-action: none;
    background: transparent;
}
.resizable-box-handle.resizable-box-handle-top,.resizable-box-handle.resizable-box-handle-bottom {
        left: 0;
        width: 100%;
        height: var(--resizable-box-handle-size);
        cursor: row-resize;
    }
.resizable-box-handle.resizable-box-handle-left,.resizable-box-handle.resizable-box-handle-right {
        top: 0;
        width: var(--resizable-box-handle-size);
        height: 100%;
        cursor: col-resize;
    }
.resizable-box-handle.resizable-box-handle-top {
        top: 0;
    }
.resizable-box-handle.resizable-box-handle-bottom {
        bottom: 0;
    }
.resizable-box-handle.resizable-box-handle-left {
        left: 0;
    }
.resizable-box-handle.resizable-box-handle-right {
        right: 0;
    }
/* Corners sit above edges so they win pointer events in the
       overlap region. */
.resizable-box-handle.resizable-box-handle-top-left,.resizable-box-handle.resizable-box-handle-top-right,.resizable-box-handle.resizable-box-handle-bottom-left,.resizable-box-handle.resizable-box-handle-bottom-right {
        width: var(--resizable-box-handle-size);
        height: var(--resizable-box-handle-size);
        z-index: 1;
    }
.resizable-box-handle.resizable-box-handle-top-left {
        top: 0;
        left: 0;
        cursor: nwse-resize;
    }
.resizable-box-handle.resizable-box-handle-bottom-right {
        bottom: 0;
        right: 0;
        cursor: nwse-resize;
    }
.resizable-box-handle.resizable-box-handle-top-right {
        top: 0;
        right: 0;
        cursor: nesw-resize;
    }
.resizable-box-handle.resizable-box-handle-bottom-left {
        bottom: 0;
        left: 0;
        cursor: nesw-resize;
    }

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/popovers.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
  Our Tippy popovers use the strangely named "light-border" Tippy
  theme, so this block defines the common styling for all of our Tippy
  popovers. (Tippy tooltips are defined in tooltips.css).
*/
.tippy-box[data-theme="light-border"] {
    background-color: var(--color-background-popover);
    /* Basic Tippy popovers scale with the base font-size. */
    font-size: var(--base-font-size-px);
}
.tippy-box[data-theme="light-border"] .tippy-content {
        /* We set the font-size here to override the
           default value in the upstream tippy.css */
        /* 14px at 14px/1em */
        font-size: 1em;
    }
/* TODO: Clean this logic up after drop Bootstrap styling */
.tippy-box[data-theme="light-border"] hr {
        /* Override bootstrap defaults */
        margin: 5px 0;
    }
.tippy-box[data-theme="light-border"][data-placement^="top"] > .tippy-arrow::before {
                border-top-color: var(--color-background-popover);
            }
.tippy-box[data-theme="light-border"][data-placement^="bottom"] > .tippy-arrow::before {
                border-bottom-color: var(--color-background-popover);
            }
.tippy-box[data-theme="light-border"][data-placement^="left"] > .tippy-arrow::before {
                border-left-color: var(--color-background-popover);
            }
.tippy-box[data-theme="light-border"][data-placement^="right"] > .tippy-arrow::before {
                border-right-color: var(--color-background-popover);
            }

.tippy-box[data-theme="dropdown-widget"] {
    border-radius: 6px;
    background-color: var(--color-background-dropdown-widget);
    border: 1px solid var(--color-border-dropdown-widget);
    --csstools-light-dark-toggle--0:
        var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 35%);
    --csstools-light-dark-toggle--1:
        var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 32%);
    --csstools-light-dark-toggle--2:
        var(--csstools-color-scheme--light) hsl(0deg 0% 0% / 20%);
    box-shadow:
        0 7px 13px var(--csstools-light-dark-toggle--0, hsl(0deg 0% 0% / 15%)),
        0 5px 8px var(--csstools-light-dark-toggle--1, hsl(0deg 0% 0% / 12%)),
        0 2px 4px var(--csstools-light-dark-toggle--2, hsl(0deg 0% 0% / 10%));
    box-shadow:
        0 7px 13px light-dark(hsl(0deg 0% 0% / 15%), hsl(0deg 0% 0% / 35%)),
        0 5px 8px light-dark(hsl(0deg 0% 0% / 12%), hsl(0deg 0% 0% / 32%)),
        0 2px 4px light-dark(hsl(0deg 0% 0% / 10%), hsl(0deg 0% 0% / 20%));
    /* Tippy dropdown widgets scale with the base font-size. */
    font-size: var(--base-font-size-px);
}

.tippy-box[data-theme="dropdown-widget"] .tippy-content {
        /* We set the font-size here to override the
           default value in the upstream tippy.css */
        /* 14px at 14px/1em */
        font-size: 1em;
        color: hsl(0deg 0% 75%);
        padding: 0;
    }

.tippy-box[data-theme="popover-menu"] {
    background-color: var(--color-background-popover-menu);
    border: 1px solid var(--color-border-popover-menu);
    border-radius: 6px;
    box-shadow: var(--box-shadow-popover-menu);
    font-size: 1.0714em; /* 15px at 14px em */
}

.tippy-box[data-theme="popover-menu"]  > .tippy-content {
        padding: 0;
        /* We set the font-size here to override the
           default value in the upstream tippy.css */
        /* 15 at 15px/1em */
        font-size: 1em;
    }

.tippy-box[data-theme="popover-menu"]  > .tippy-arrow {
        color: var(--color-background-popover-menu);
    }

.tippy-box[data-theme="popover-menu"][data-placement^="top"] > .tippy-arrow::before {
        bottom: var(--popover-tippy-arrow-before-offset);
    }

.tippy-box[data-theme="popover-menu"][data-placement^="bottom"] > .tippy-arrow::before {
        top: var(--popover-tippy-arrow-before-offset);
    }

.tippy-box[data-theme="popover-menu"][data-placement^="left"] > .tippy-arrow::before {
        right: var(--popover-tippy-arrow-before-offset);
    }

.tippy-box[data-theme="popover-menu"][data-placement^="right"] > .tippy-arrow::before {
        left: var(--popover-tippy-arrow-before-offset);
    }

.giphy-popover .tippy-box .tippy-arrow {
    /* Since the GIPHY banner at the popover is black,
       match the arrow color with the banner. */
    color: hsl(0deg 0% 0%);
}

.tippy-box[data-theme="popover-menu"]:has(#gear-menu-dropdown) {
    --box-shadow-popover-menu: var(--box-shadow-gear-menu);
}

.user_full_name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.user-card-popover-actions {
    --color-text-item: var(--color-text-user-card-secondary);
}

.user-card-popover-actions .user-card-popover-bot-owner-field.text-item {
            align-items: center;
            white-space: nowrap;
        }

.user-card-popover-actions .user-card-popover-bot-owner-field .pill-container {
            border: none !important;
        }

.user-card-popover-actions .user-card-popover-bot-owner-field .pill {
            border: none;
            -webkit-text-decoration: none;
            text-decoration: none;
            color: var(--color-text-popover-menu);
            background-color: var(--color-background-text-direct-mention);
        }

.user-card-popover-actions .user-card-popover-bot-owner-field .pill:hover {
                color: var(--color-text-popover-menu);
                background-color: var(
                    --color-background-text-hover-direct-mention
                );
                -webkit-text-decoration: none;
                text-decoration: none;
            }

.user-card-popover-actions .pill-container {
        padding: 0;
    }

.user-card-popover-actions .custom-profile-field-value {
        display: flex;
        align-items: center;
        gap: 5px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

.user-card-popover-actions .custom-profile-field-value.rendered_markdown p {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        /* Overriding CSS from rendered_markdown.css */
        margin: 0;
    }

.user-card-popover-actions .custom-profile-field-link {
        color: var(--color-text-item);
    }

.user-card-popover-actions .custom-profile-field-link:hover {
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.user-card-popover-actions .custom-profile-field-link:focus-visible {
            color: var(--color-text-url-hover);
            outline: 1px solid var(--color-outline-focus) !important;
            outline-offset: 2px;
            border-radius: 2px;
        }

.user-card-popover-actions .custom-profile-field-link .custom-profile-field-text {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

.user-card-popover-actions .custom-profile-field-link .custom-profile-field-text:hover {
                -webkit-text-decoration: underline;
                text-decoration: underline;
            }

.custom-user-url-field,
.external-account-text-field {
    display: flex;
    align-items: center;
    /* Maintain space between URL and copy icon. */
    gap: 3px;
    overflow: hidden;
}

.custom-user-url-field .custom-profile-fields-link,.external-account-text-field .custom-profile-fields-link {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.custom-user-url-field .copy-custom-field-url,.external-account-text-field .copy-custom-field-url,.custom-user-url-field .copy-external-account-field,.external-account-text-field .copy-external-account-field {
        height: 1em;
    }

.external-account-link-field {
    display: inline-flex;
    align-items: center;
    /* Maintain space between icon and text. */
    gap: 3px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hidden-remove-button {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.hidden-remove-button:has(.button-loading-indicator) {
    cursor: default;
    opacity: 1;
}

.hidden-remove-button-row:hover
    .hidden-remove-button:not(:has(.button-loading-indicator)),
.hidden-remove-button-row:focus-within
    .hidden-remove-button:not(:has(.button-loading-indicator)) {
    opacity: 1;
    pointer-events: auto;
}

.hidden-remove-button:focus-visible {
    opacity: 1;
    /* TODO: We need to consolidate icon-button outline to this
        outline color and separately define outline colors to specific
        elements if needed. We should remove this after that. */
    outline: 1px solid var(--color-outline-focus) !important;
    outline-offset: -2px;
}

#stream-actions-menu-popover .popover-stream-name,#stream-card-popover .popover-stream-name {
        font-weight: 600;
        color: var(--color-text-popover-menu);
        line-height: 1.1;
    }

#stream-actions-menu-popover .popover-stream-name,#stream-card-popover .popover-stream-name,#stream-actions-menu-popover .stream-privacy.filter-icon,#stream-card-popover .stream-privacy.filter-icon {
        margin-top: 4px;
    }

#stream-actions-menu-popover .zulip-icon-lock,#stream-card-popover .zulip-icon-lock {
        /* Override the margin-top set on the stream lock icon
           at the top-level, since we don't need to pull up this
           icon for the stream actions popover header.  */
        margin: 0 !important;
    }

#stream-actions-menu-popover .popover-stream-info-menu-description,#stream-card-popover .popover-stream-info-menu-description {
        color: var(--color-text-popover-menu);
    }

#topic-actions-menu-popover .popover-topic-name {
        font-weight: 600;
        color: var(--color-text-popover-menu);
        line-height: 1.1;
        margin-top: 4px;
        white-space: pre-wrap;
        min-width: 12.5em; /* 200px at 16px/1em */
    }

.popover-header-name {
    font-weight: 600;
    color: var(--color-text-popover-menu);
    line-height: 1.1;
    margin-top: 4px;
    width: max-content;
}

.popover-group-menu-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 3px var(--user-group-popover-horizontal-padding);
}

.popover-group-menu-name-container {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    /* 18px at 15px/1em */
    font-size: 1.2em;
    font-weight: 600;
    /* 20px at 18px/1em */
    line-height: 1.1111em;
    color: var(--color-text-full-name);
    overflow-wrap: anywhere;
}

.popover-group-menu-description {
    /* 15px at 15px/1em */
    font-size: 1em;
    /* 16px at 15px/1em */
    line-height: 1.0667em;
}

ul.popover-group-menu-member-list {
    max-height: 300px;
    display: flex;
    flex-direction: column;
}

ul.popover-group-menu-member-list .simplebar-content {
        display: grid;
        grid-template-areas: "group-member-icon gap group-member-name";
        grid-template-columns:
            max-content var(--user-group-popover-icon-text-gap)
            minmax(0, 1fr);
        width: unset;
    }

ul.popover-group-menu-member-list .popover-group-menu-member {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        align-items: center;
        padding: 0 var(--user-group-popover-horizontal-padding);
    }

ul.popover-group-menu-member-list .popover-group-member-icon {
        justify-self: center;
        grid-area: group-member-icon;
    }

ul.popover-group-menu-member-list .popover-group-menu-member-name {
        grid-area: group-member-name;
    }

.popover-group-menu-placeholder {
    padding: 0 var(--user-group-popover-horizontal-padding);
}

.popover-group-menu-member .zulip-icon-user-group {
        color: var(--color-icon-purple);
    }

.popover-group-menu-member-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popover-group-menu-description,
.popover-group-menu-member-name,
.popover-group-menu-placeholder {
    color: var(--color-text-popover-menu);
}

.user-status-icon-wrapper {
    display: flex;
}

.popover-group-menu-user-presence {
    /* 11px at 16px/1em */
    font-size: 0.6875em;
}

.user_profile_presence {
    /* Remove font-size to allow this to scale
       with the menu header text. Declaring font-size
       here maintains the legacy design of keeping
       the user-circle smaller, despite the larger
       surrounding text and icons. */
    font-size: calc(var(--base-font-size-px) * 0.6666);
    line-height: 1;
}

.popover-avatar {
    height: 240px;
    width: 240px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.popover-avatar.guest-avatar::after {
        outline: 10px solid hsl(0deg 0% 100%);
    }

.popover-avatar .popover-inner {
        width: 240px;
    }

@media (width < 768px) {
    .popover-flex {
        position: absolute;
        top: 0 !important;
        left: 0 !important;

        width: 100vw;
        height: 100vh;

        display: flex !important;
        justify-content: center;
        align-items: center;

        background-color: hsl(0deg 0% 0% / 70%);

        /* 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;

        opacity: 0;
        pointer-events: none;

        transition: opacity 0.3s ease;
    }

        .popover-flex.fade.in {
            opacity: 1;
            pointer-events: all;
        }

    .emoji-picker-popover {
        position: static;
        margin-right: 0;
    }
}

.popover.top .arrow::after {
    left: -1px;
}

.gif-picker-popover .tippy-content,.emoji-popover-root .tippy-content {
        /* We remove the default padding from this container
           as it is not necessary for the Giphy and Tenor popovers. */
        padding: 0;

        /* By resetting to the default color from the `body`,
           we can ignore the colors applied from `tippy-box`. */
        color: var(--color-text-default);
    }

/* The emoji popover has a different background color for the
       header and footer, so we customize the arrow to match this color. */

.emoji-popover-root .tippy-box[data-placement="top"] .tippy-arrow::before {
        border-top-color: var(--color-border-emoji-picker-tippy-arrow);
    }

.emoji-popover-root .tippy-box[data-placement="bottom"] .tippy-arrow::before {
        border-bottom-color: var(--color-border-emoji-picker-tippy-arrow);
    }

.emoji-popover-root .tippy-box[data-placement="left"] .tippy-arrow::before {
        border-left-color: var(--color-border-emoji-picker-tippy-arrow);
    }

.modal__overlay #set-user-status-modal + .emoji-popover-root {
    /* Micromodal prevents pointer events to elements outside the content.
       We need to re-enable pointer events for the emoji popover to work. */
    pointer-events: auto;
}

.gif-grid-in-popover {
    /* Anchor resize handles to this element's padding box so they
       stay inside the popover. */
    position: relative;
    /* So width / min-width / max-width refer to the total visible
       box, including the handle-size padding added below; the viewport
       safe-margin caps then compare apples-to-apples. */
    box-sizing: border-box;
    /* Initial width: four columns. On narrow viewports, `max-width`
       caps this at what fits. Users can drag between one and five
       columns. */
    width: calc(
        4 * var(--gif-picker-gif-column-min-width) + 3 *
            var(--gif-picker-gif-column-gap) +
            var(--gif-picker-grid-horizontal-chrome)
    );
    height: 70dvh;
    min-width: var(--gif-picker-grid-min-width);
    min-height: var(--gif-picker-grid-min-height);
    max-width: var(--gif-picker-grid-max-width);
    max-height: var(--gif-picker-grid-max-height);

    /* On mobile devices (userAgent-based, see gif_picker_ui.ts), fill
       the viewport and drop the handle-size padding since resize is
       disabled. Gating on device class rather than viewport width
       lets a desktop user on a narrow window keep the resizable
       picker. */
}

.gif-grid-in-popover.is-mobile-device {
        width: calc(100vw - 2 * var(--gif-picker-viewport-safe-margin));
        height: calc(100dvh - 2 * var(--gif-picker-viewport-safe-margin));
        min-width: 0;
        min-height: 0;
        max-width: none;
        max-height: none;
        padding: 0;
    }

.gif-grid-in-popover {

    border: 0;
    /* Reserve a strip equal to the resize handle size on every side
       so the handles don't overlap clickable GIFs, the search input,
       or the inner scrollbar. */
    padding: var(--resizable-box-handle-size);
}

.gif-grid-in-popover .gif-search-container {
        margin: 4px 4px 2px;
    }

.gif-grid-in-popover .no-results {
        font-style: italic;
        color: var(--color-text-default);
        grid-column: 1 / -1;
        text-align: center;
    }

.gif-grid-in-popover .gif-picker-content {
        display: grid;
        /* Reflow to more columns as the picker enlarges, using the
           same min column width as the container resize bounds. */
        grid-template-columns: repeat(
            auto-fit,
            minmax(var(--gif-picker-gif-column-min-width), 1fr)
        );
        grid-auto-rows: auto;
        gap: var(--gif-picker-gif-column-gap);
    }

@media (width < 768px) {

.gif-grid-in-popover .gif-picker-content {
            /* Allow narrower columns on mobile so two can fit on a phone. */
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
        }

.gif-grid-in-popover .gif-picker-content {

        /* Meant to prevent outline overflow when the GIF
       is focused. */
        padding: 0 2px;
    }

.gif-grid-in-popover .gif-picker-gif {
        cursor: pointer;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        object-fit: cover;
    }

.gif-grid-in-popover .gif-picker-gif:focus {
            /* Blue outline for clear visibility
              * of which image is in focus.
              */
            outline: 2px solid var(--color-selected-gif-in-grid-picker);
        }

.gif-grid-in-popover .gif-picker-gif:hover {
            outline: 2px solid var(--color-hovered-gif-in-grid-picker);
        }

.gif-grid-in-popover .popover-inner {
        /* Fill .gif-grid-in-popover so the scrolling container takes
           the space left over after the search input. */
        height: 100%;
        display: flex;
        flex-direction: column;
    }

.gif-grid-in-popover .popover-inner .gif-scrolling-container {
            flex: 1 1 auto;
            /* `min-height: 0` lets this flex item shrink below its
               content's intrinsic height, so the scroll area can
               be shorter than the grid it contains. */
            min-height: 0;
            /* SimpleBar's `.simplebar-wrapper` uses `height: inherit`
               to pick up its host's *computed* height; when the host
               is `height: auto` (the default on a flex item),
               SimpleBar falls back to an "auto height" mode that
               disables its internal scroll. Setting `height: 100%`
               here gives the wrapper a resolvable percentage instead,
               so SimpleBar drives scrolling against the flex-computed
               height. SimpleBar also reads this element's `overflow-y`
               and suppresses its own scrollbar if it's `hidden`, so
               we use `overflow: hidden auto` to allow Y scrolling while
               still blocking any horizontal overflow. */
            height: 100%;
            overflow: hidden auto;
            margin: 2px 3px;
            padding: 5px 0;
        }

.gif-grid-in-popover .popover-footer {
        /* We center the attribution image with flex so it doesn't
           pick up a baseline descender gap, and set flex-shrink: 0 so
           the flex layout on `.popover-inner` can't squeeze the
           footer below the image's own height. */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background-color: hsl(0deg 0% 0%);
        /* The border radius corresponds to the default radius value from `tippy-box`. */
        border-radius: 0 0 4px 4px;

        /* The GIPHY image is 200×42 natural, rendered at 120px wide
           (so ~25px tall); 34px gives the image a little breathing
           room and keeps the footer from collapsing before the image
           has loaded. */
        min-height: 34px;
    }

.gif-grid-in-popover .popover-footer img {
            width: 120px;
        }

/* Modals have a 16px/1em base font-size. */

#message_report_modal form,#move_topic_modal form {
        margin: 0;
    }

#message_report_modal .modal_select,#move_topic_modal .modal_select {
        width: auto;
        max-width: 100%;
    }

#message_report_modal #report_type_options_widget_wrapper,#move_topic_modal #report_type_options_widget_wrapper,#message_report_modal #move_topic_to_stream_widget_wrapper,#move_topic_modal #move_topic_to_stream_widget_wrapper {
        display: flex;
        /* 230px at 16px/1em */
        max-width: 14.375em;
    }

#message_report_modal #report_type_options_widget_wrapper .dropdown-widget-button,#move_topic_modal #report_type_options_widget_wrapper .dropdown-widget-button,#message_report_modal #move_topic_to_stream_widget_wrapper .dropdown-widget-button,#move_topic_modal #move_topic_to_stream_widget_wrapper .dropdown-widget-button {
            outline: none;
            /* 24px at 16px/1em */
            line-height: 1.5em;
            width: 100%;
        }

#message_report_modal #report_type_options_widget_wrapper .dropdown_widget_value,#move_topic_modal #report_type_options_widget_wrapper .dropdown_widget_value,#message_report_modal #move_topic_to_stream_widget_wrapper .dropdown_widget_value,#move_topic_modal #move_topic_to_stream_widget_wrapper .dropdown_widget_value {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--color-text-default);
        }

#message_report_modal #report_type_options_widget_wrapper .zulip-icon-chevron-down,#move_topic_modal #report_type_options_widget_wrapper .zulip-icon-chevron-down,#message_report_modal #move_topic_to_stream_widget_wrapper .zulip-icon-chevron-down,#move_topic_modal #move_topic_to_stream_widget_wrapper .zulip-icon-chevron-down {
            padding-left: 5px;
            color: hsl(0deg 0% 58%);
            font-weight: lighter;
        }

#message_report_modal #move-topic-new-topic-input-wrapper,#move_topic_modal #move-topic-new-topic-input-wrapper {
        position: relative;
        display: grid;
        /* 30px at 16px/1em */
        grid-template:
            "move-topic-input clear-topic" auto / minmax(0, 1fr)
            1.875em;
    }

#message_report_modal #move-topic-new-topic-input-wrapper input.move_messages_edit_topic,#move_topic_modal #move-topic-new-topic-input-wrapper input.move_messages_edit_topic {
            grid-column: move-topic-input-start / clear-topic-end;
            grid-row: move-topic-input;
            /* 30px at 16px/1em */
            padding-right: 1.875em;
            margin-bottom: unset;
            box-sizing: border-box;
            width: 100%;
            height: auto;
            /* Unset max-width set using modal_text_input selector as box-sizing
            is set to border-box here and we already set width to 100%. */
            max-width: unset;
        }

#message_report_modal #move-topic-new-topic-input-wrapper input.move_messages_edit_topic.empty-topic-display::placeholder {
                color: inherit;
            }

#move_topic_modal #move-topic-new-topic-input-wrapper input.move_messages_edit_topic.empty-topic-display::placeholder {
                color: inherit;
            }

#message_report_modal #move-topic-new-topic-input-wrapper input.move_messages_edit_topic.empty-topic-only,#move_topic_modal #move-topic-new-topic-input-wrapper input.move_messages_edit_topic.empty-topic-only {
                cursor: default;
            }

#message_report_modal #move-topic-new-topic-input-wrapper input.move_messages_edit_topic.invalid-topic-input,#move_topic_modal #move-topic-new-topic-input-wrapper input.move_messages_edit_topic.invalid-topic-input {
                border-color: var(--color-invalid-input-border);
                box-shadow: var(--invalid-input-box-shadow);
            }

#message_report_modal .move-topic-new-topic-placeholder,#move_topic_modal .move-topic-new-topic-placeholder {
        position: absolute;
        left: 6px;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
        visibility: hidden;
    }

#message_report_modal .move-topic-new-topic-placeholder-visible,#move_topic_modal .move-topic-new-topic-placeholder-visible {
        visibility: visible;
    }

#message_report_modal #message_move_select_options,#move_topic_modal #message_move_select_options {
        width: 100%;
    }

#message_report_modal #move_messages_count,#move_topic_modal #move_messages_count {
        /* Disabled pending fixes to the logic. */
        display: none;
    }

#message_report_modal .topic_stream_edit_header #select_stream_id,#move_topic_modal .topic_stream_edit_header #select_stream_id {
            border-left: 0;
            padding-left: 0;
            border-radius: 3px;
            margin: 0 5px 5px -10px;
            text-indent: 10px;
        }

#message_report_modal .topic_stream_edit_header .dropdown-menu,#move_topic_modal .topic_stream_edit_header .dropdown-menu {
            position: fixed;
            top: 125px;
            left: 40px;
        }

#message_report_modal .topic_move_breadcrumb_messages,#move_topic_modal .topic_move_breadcrumb_messages {
        margin: 0 5px 5px 0;
        align-self: center;
        width: 100%;
    }

#message_report_modal .topic_move_breadcrumb_messages label.checkbox,#move_topic_modal .topic_move_breadcrumb_messages label.checkbox {
            /* Place the checkboxes on their own lines. */
            display: block;
        }

#message_report_modal .topic_move_breadcrumb_messages label.checkbox input,#move_topic_modal .topic_move_breadcrumb_messages label.checkbox input {
                margin: 0;
                vertical-align: baseline;
            }

#message_report_modal .topic_move_breadcrumb_messages label.checkbox + label.checkbox,#move_topic_modal .topic_move_breadcrumb_messages label.checkbox + label.checkbox {
                margin-top: 10px;
            }

#message_report_modal .topic_move_breadcrumb_messages label,#move_topic_modal .topic_move_breadcrumb_messages label {
            display: inline-block;
            margin-right: 10px;
        }

#message_report_modal .new-topic-name-error,#move_topic_modal .new-topic-name-error {
        color: hsl(0deg 100% 50%);
    }

#language_selection_modal {
    width: min(750px, 70vw);
}

.default_language_modal_table {
    column-count: 3;
}

@media (width < 768px) {

.default_language_modal_table {
        column-count: 2;
}
    }

@media (width < 576px) {

.default_language_modal_table {
        column-count: 1;
}
    }

#send_later_popover hr {
        margin: 5px 0;
    }

.visibility-policy-popover .popover-menu-list {
        padding: 2px;
    }

.recipient-bar-topic-visibility-switcher .tab-option-content {
        /* 15px at 16px/1em */
        font-size: 0.9375em;
        color: var(--color-text-popover-menu);
        gap: 10px;
        justify-content: flex-start;
        padding: 2px 13px;
    }

.popover-menu-user-header {
    display: flex;
    flex-flow: row nowrap;
    gap: 7px;
    text-align: left;
    padding: 4px;
}

.popover-menu-user-header .popover-menu-user-avatar-container {
        position: relative;
        flex-shrink: 0;
        width: var(--length-user-popover-menu-avatar);
        height: var(--length-user-popover-menu-avatar);
    }

.popover-menu-user-header .popover-menu-user-avatar {
        width: var(--length-user-popover-menu-avatar);
        height: var(--length-user-popover-menu-avatar);
        border-radius: 4px;
        background-size: cover;
        background-position: center;
    }

.popover-menu-user-header .popover-menu-user-presence {
        position: absolute;
        /* Presence dot does not scale, because
           the avatar itself does not scale. */
        font-size: var(--length-user-status-circle-popover-menu);
        line-height: 1;
        right: -1px;
        bottom: -1px;
        background-color: var(--color-background-popover-menu);
        border: solid 1px var(--color-background-popover-menu);
        border-radius: 50%;
    }

.popover-menu-user-header .popover-menu-user-presence.deactivated-user-icon {
            font-size: 0.8em;
            background-color: var(--color-background-popover-menu);
            padding: 1px;
        }

.popover-menu-user-header .popover-menu-user-info {
        width: max-content;
        align-self: center;
        overflow: hidden;
    }

.popover-menu-user-header .popover-menu-user-full-name {
        /* 18px at 15px/1em */
        font-size: 1.2em;
        font-weight: 600;
        /* 20px at 18px/1em */
        line-height: 1.1111em;
        color: var(--color-text-full-name);
        overflow-wrap: anywhere;
    }

.popover-menu-user-header .popover-menu-user-full-name .zulip-icon.zulip-icon-bot {
            vertical-align: middle;
        }

.popover-menu-user-header .popover-menu-user-type {
        /* 14px at 15px/1em */
        font-size: 0.9333em;
        font-weight: 400;
        /* 16px at 14px/1em */
        line-height: 1.1428em;
        color: var(--color-text-item);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.user-card-popover-email-field .user_popover_email {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

#popover-menu-copy-email,
.copy-custom-profile-field-link {
    display: flex;
    margin-left: auto;
}

#popover-menu-copy-email.hide_copy_icon,.hide_copy_icon.copy-custom-profile-field-link:not(#does-not-exist) {
        display: none;
    }

#popover-menu-copy-email:focus-visible {
        outline: 1px solid var(--color-outline-focus) !important;
    }

.copy-custom-profile-field-link:not(#does-not-exist):focus-visible {
        outline: 1px solid var(--color-outline-focus) !important;
    }

.personal-menu-header {
    display: flex;
    flex-flow: row nowrap;
    gap: 7px;
    text-align: left;
    padding: 4px;
}

.personal-menu-header .avatar {
        position: relative;
        width: 64px;
        height: 64px;
        flex-shrink: 0;
    }

.personal-menu-header .avatar-image {
        width: 64px;
        height: 64px;
        border-radius: 4px;
        background-size: cover;
        background-position: center;
    }

.personal-menu-header .status-circle {
        position: absolute;
        top: unset;
        left: unset;
        font-size: var(--length-user-status-circle);
        line-height: 1;
        right: -1px;
        bottom: -1px;
        background-color: var(--color-background-popover-menu);
        border: solid 1px var(--color-background-popover-menu);
        border-radius: 50%;
    }

.personal-menu-header .text-area {
        flex-grow: 1;
        padding-top: 4px;
    }

.personal-menu-header .text-area p {
            margin: 0 0 4px;
        }

.personal-menu-header .full-name {
        /* 18px at 15px/1em */
        font-size: 1.2em;
        font-weight: 600;
        /* 20px at 18px/1em */
        line-height: 1.1111em;
        color: var(--color-text-full-name) !important;
        overflow-wrap: anywhere;
    }

.personal-menu-header .user-type {
        /* 14px at 15px/1em */
        font-size: 0.9333em;
        font-weight: 400;
        /* 16px at 14px/1em */
        line-height: 1.1429em;
        color: var(--color-text-item) !important;
    }

.popover-menu {
    margin: 0;
    max-height: 85vh;
    overflow-x: hidden;
    -webkit-user-select: none;
            user-select: none;
    border-radius: 6px;
}

.popover-menu .simplebar-content {
        /* Set the popover menu width equal to the width of the
        longest menu item, thus letting the menu items control
        the width of the menu. */
        width: min-content;
        /* Set `max-width` to the minimum of `97vw` and the value defined by
        the `--popover-menu-max-width` custom property, which should be defined
        as a local custom property in the scope of a particular popover where
        we want apply a `max-width` limit.

        When we don't define this local custom property, the fallback value of
        `97vw` is considered and the `max-width` is then set to `min(97vw, 97vw)`
        which is simply equivalent to `97vw`.

        IMPORTANT: Setting `--popover-menu-max-width` in the `:root` scope
        instead of the local scope, eliminates the fallback behavior and thus
        prevents us from setting the max-width on a case-to-case basis. */
        max-width: min(var(--popover-menu-max-width, 97vw), 97vw);
    }

.popover-menu .popover-menu-label {
        /* Keep menu items on a single line, unless forced to wrap
        by a max-width on the popover. */
        width: max-content;
        flex: 1 0 0;
    }

.popover-menu .text-item,.popover-menu .link-item .popover-menu-link {
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        gap: 5px;
        /* 3px at 15px/1em, 10px at 15px/1em */
        padding: 0.2em 0.6666em;
        /* 15px at 15px/1em */
        font-size: 1em;
        /* 16px at 15px/1em */
        line-height: 1.0667em;
        /* 26px at 16px/1em - this height was carried forward
           despite the information density change in 15px > 16px,
           so we calculate its height to the 16px em in use. */
        min-height: 1.625em;
    }

.popover-menu .text-item:not(.does-not-exist) .popover-menu-icon,.popover-menu .link-item .popover-menu-link .popover-menu-icon {
            /* 16px at 15px/1em */
            font-size: 1.0667em;
            /* 16px at 16px/1em */
            width: 1em;
            height: 1em;
            text-align: center;
        }

.popover-menu .text-item {
        color: var(--color-text-item);
        width: auto;
        -webkit-user-select: text;
                user-select: text;
    }

.popover-menu .link-item {
        outline: none;
    }

.popover-menu .link-item .popover-menu-label,.popover-menu .link-item .popover-menu-icon {
            margin-top: 2px;
        }

.popover-menu .link-item .popover-menu-icon {
            color: var(--color-icon-purple);
        }

.popover-menu .link-item .popover-menu-link {
            color: var(--color-text-popover-menu) !important;
            -webkit-text-decoration: none;
            text-decoration: none;
            flex-grow: 1;
        }

.popover-menu .link-item .popover-menu-link:hover {
                background: var(--color-background-hover-popover-menu);
                outline: none;
            }

.popover-menu .link-item .popover-menu-link:focus-visible {
                border-radius: 4px;
                /* Override the default focus style */
                outline: 1px solid var(--color-outline-focus) !important;
                outline-offset: -1px;
                background: var(--color-background-hover-popover-menu);
            }

.popover-menu .link-item .popover-menu-link:focus:not(:focus-visible) {
                outline: none;
            }

.popover-menu .link-item .popover-menu-link:active {
                background: var(--color-background-active-popover-menu);
            }

.popover-menu .tab-picker.popover-menu-tab-group {
            margin: 2px 10px;
        }

.popover-menu .tab-picker .tab-option-content:focus-visible {
            border-radius: 4px;
            /* Override the default focus style */
            outline: 1px solid var(--color-outline-focus) !important;
            outline-offset: -1px;
        }

.popover-menu .status_emoji {
        align-self: flex-start;
        flex-shrink: 0;
        /* 16px at 15px/1em */
        width: 1.0667em;
        height: 1.0667em;
    }

.popover-menu .popover-menu-icon {
        position: relative;
        top: -1px;
    }

.popover-menu .popover-menu-icon.zulip-icon-id-card {
            /* Override the top value for the id card icon,
            since it looks more visually centered */
            top: 0;
        }

.popover-menu .info-density-controls {
        display: flex;
        padding: 0.125em 0.625em;
        gap: 0.5em;
    }

.popover-menu .info-density-controls .zulip-icon {
            width: 0.933em;
            height: 0.933em;
        }

#help-menu-dropdown .simplebar-content,#gear-menu-dropdown .simplebar-content,#personal-menu-dropdown .simplebar-content {
        min-width: var(--navbar-popover-menu-min-width);
    }

#message-actions-menu-dropdown {
    /* 350px at 15px/1em */
    --popover-menu-max-width: 23.3333em;
}

#message-actions-menu-dropdown .simplebar-content {
        min-width: var(--message-actions-popover-min-width);
    }

#stream-actions-menu-popover .simplebar-content,#topic-actions-menu-popover .simplebar-content {
        min-width: var(--topic-actions-popover-min-width);
    }

#user_card_popover {
    /* 250px at 14px/1em */
    --popover-menu-max-width: 17.8571em;
}

#user_card_popover .simplebar-content {
        min-width: var(--user-card-popover-min-width);
    }

.user-group-info-popover .simplebar-content {
        min-width: var(--user-group-info-popover-min-width);
    }

#stream-card-popover .simplebar-content {
        min-width: var(--stream-card-popover-min-width);
    }

.color-picker-popover {
    --popover-menu-max-width: calc(
        var(--padding-color-swatch-list) * 2 + var(--size-color-swatch) * 6 +
            var(--grid-gap-color-swatch) * 5
    );
}

.personal-menu-clear-status {
    display: flex;
    align-items: center;
    margin-left: auto;
    color: hsl(0deg 0% 40%) !important;
    border-radius: 4px;
    opacity: 0.5;
}

.personal-menu-clear-status:focus {
        /* Override bootstrap defaults */
        outline: 1px solid var(--color-outline-focus) !important;
        outline-offset: 0;
    }

.personal-menu-clear-status:hover,.personal-menu-clear-status:focus {
        opacity: 0.9;
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.personal-menu-clear-status .personal-menu-clear-status-icon {
    top: 0;
}

.personal-menu-status-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.personal-menu-status-text {
    color: var(--color-text-personal-menu-some-status);
}

.personal-menu-no-status-text {
    color: var(--color-text-personal-menu-no-status);
}

#gear-menu-dropdown .org-info-container {
        padding: 9px 0 5px;
        border-bottom: solid 1px var(--color-border-popover-menu-separator);
    }

#gear-menu-dropdown .org-info-container .org-info {
            display: flex;
            justify-content: flex-start;
            font-style: normal;
            font-weight: 400;
            /* 16px at 15px/1em */
            line-height: 1.0667em;
            letter-spacing: 0.28px;
        }

#gear-menu-dropdown .org-info-container .org-info:focus-within {
                background: var(--color-background-hover-popover-menu);
            }

#gear-menu-dropdown .org-info-container .org-info .popover-menu-link {
                padding: 2px 10px;
                flex-grow: 1;
                -webkit-text-decoration: none;
                text-decoration: none;
            }

#gear-menu-dropdown .org-info-container .org-info .popover-menu-link:hover {
                    background: var(--color-background-hover-popover-menu);
                    outline: none;
                }

#gear-menu-dropdown .org-info-container .org-info .popover-menu-link:focus-visible {
                    border-radius: 4px;
                    /* Override the default focus style */
                    outline: 1px solid var(--color-outline-focus) !important;
                    outline-offset: -1px;
                }

#gear-menu-dropdown .org-info-container .org-info .popover-menu-link:active {
                    background: var(--color-background-active-popover-menu);
                }

#gear-menu-dropdown .org-info-container .org-url {
            margin-bottom: 7px;
            padding: 0 10px;
        }

#gear-menu-dropdown .org-info-container .org-name,#gear-menu-dropdown .org-info-container .org-plan .popover-menu-link {
            color: var(--color-text-popover-menu);
        }

#gear-menu-dropdown .org-info-container .org-name {
            /* 17px at 15px/1em */
            font-size: 1.1333em;
            font-weight: 600;
            /* 22px at 17px/1em */
            line-height: 1.2941em;
            padding: 0 10px;
        }

#gear-menu-dropdown .org-info-container .org-upgrade {
            /* 14px at 15px/1em */
            font-size: 0.9333em;
            /* 16px at 14px/1em */
            line-height: 1.1428em;
        }

#gear-menu-dropdown .org-info-container .org-upgrade,#gear-menu-dropdown .org-info-container .org-url {
            color: var(--color-gear-menu-lighter-text);
        }

#gear-menu-dropdown .org-info-container .org-upgrade a,#gear-menu-dropdown .org-info-container .org-version a {
            color: var(--color-gear-menu-blue-text);
        }

#gear-menu-dropdown .theme-switcher {
        /* Left and right margins are set to match the alignment with
        other items in the menu. Other elements have space of 0.6666em
        on both sides, but they have font size set to 1em and theme
        switcher has font size set to 1.0666em. So, we need space of
        0.6666/1.0666 em on each side. */
        margin: 0 0.625em;
    }

#gear-menu-dropdown .info-density-controls {
        /* Left and right paddings are set to match the alignment with
        other items in the menu. */
        padding: 0.4em 0.6666em 0.25em;
    }

ul.popover-menu-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

ul.popover-menu-list li.popover-menu-separator {
        margin: 4px 0;
        border-bottom: solid 1px var(--color-border-popover-menu-separator);
    }

.popover-menu-hotkey-hints {
    display: flex;
    gap: 4px;
    margin-left: auto;
    padding-left: 5px;
}

.popover-menu-hotkey-hints  > .popover-menu-hotkey-hint {
        box-sizing: border-box;
        color: var(--color-popover-hotkey-hint);
        text-align: center;
        /* 14px at 15px/1em */
        font-size: 0.9333em;
        font-style: normal;
        font-weight: 500;
        /* 14px at 14px/1em */
        line-height: 1em;
        /* 20px at 14px/1em */
        min-width: 1.4285em;
        padding: 2px 4px;
        border-radius: 3px;
        border: 1px solid var(--color-border-popover-hotkey-hint);
    }

.condensed-views-popover-menu .popover-menu-link:has(.label-and-unread-wrapper) {
        align-items: center;
    }

.condensed-views-popover-menu .popover-menu-link:has(.label-and-unread-wrapper) .popover-menu-icon {
            margin-top: 1px;
        }

.condensed-views-popover-menu .popover-menu-link:has(.label-and-unread-wrapper) .label-and-unread-wrapper {
            /* Occupy the maximum width of the
               parent flex container. */
            flex: 1 0 max-content;
            display: flex;
            gap: 5px;
            align-items: baseline;
        }

.condensed-views-popover-menu .popover-menu-link:has(.label-and-unread-wrapper) .popover-menu-label {
            margin-top: 0;
        }

.condensed-views-popover-menu .popover-menu-link:has(.label-and-unread-wrapper) .unread_count {
            margin: 0 0 0 6px;
            border-color: var(--color-border-unread-counter-popover-menu);
            width: max-content;
            height: auto;
            line-height: 1.2445em;
            align-self: baseline;
        }

#groups-to-add {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#user-group-to-add {
    flex: 1;
    min-width: 0;
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/recent_view.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************/
.recent_view_container {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: sticky;
    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;
    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: 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 {
    display: none;
    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: 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 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.
       See focus_outline_util.ts. */

#recent_view.no-visible-focus-outlines .recent_view_focusable:focus {
            outline: 0;
        }

#recent_view .recent_view_focusable > .zulip-icon {
            outline: 0;
        }

#recent_view .recent_view_focusable:focus {
            outline: 1.5px solid var(--color-outline-focus);
        }

#recent_view .recent_view_focusable:focus  > .change_visibility_policy .recent-view-row-topic-menu {
                opacity: 0.2;
            }

#recent_view .recent_view_focusable > .change_visibility_policy.topic-popover-visible .visibility-status-icon {
                opacity: 0.4;
            }

#recent_view .recent_view_focusable.recent-view-topic-visibility {
            border-radius: 0.3125em; /* 5px at 16px/1em */
            outline-offset: 0.3125em; /* 5px at 16px/1em */
        }

#recent_view .recent_view_focusable  > .change_visibility_policy {
            display: flex;
        }

#recent_view .recent_view_focusable > .change_visibility_policy .visibility-status-icon:not(.recent-view-row-topic-menu):hover {
                /* Show vertical ellipsis when user hovers over visibility indicator icon. */
                background-image: url(files/icons/more-vertical.svg);
                background-repeat: no-repeat;
                background-position: left bottom;
                background-size: contain;
                width: var(--base-font-size-px);
                height: var(--base-font-size-px);
            }

#recent_view .recent_view_focusable > .change_visibility_policy .visibility-status-icon:not(.recent-view-row-topic-menu):hover::before {
                    content: "";
                }

#recent_view .recent_view_focusable  > .change_visibility_policy .recent-view-row-topic-menu {
            opacity: 0;
            cursor: pointer;
        }

#recent_view .recent_view_focusable > .change_visibility_policy .recent-view-row-topic-menu:not(.visibility-status-icon) {
                display: none;
            }

#recent_view a {
        color: var(--color-recent-view-link);
        -webkit-text-decoration: none;
        text-decoration: none;
    }

#recent_view .empty-table-message {
        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: 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 .zulip-icon-user {
        /* Legacy 11.2px size at 14px/1em. */
        font-size: 0.8em;
        text-align: center;
        opacity: 0.6;
    }

#recent_view .table_fix_head {
        padding: 0 !important;
        border: 1px 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;
        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 {
            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: 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;
        background: var(--color-background);
    }

#recent_view #recent_filters_group {
        display: flex;
        flex-flow: row wrap;
        gap: var(--recent-topics-filters-gap);
    }

#recent_view #recent-view-search-wrapper {
        flex-grow: 1;
        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-inline: 2px;
    }

#recent_view .button-recent-filters {
        color: var(--color-text-default);
        background-color: var(--color-background-zulip-button);
        border: 1px solid var(--color-border-zulip-button);
        border-radius: 40px;
        /* Matching to the height of the filter search box. */
        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 {
            background-color: var(--color-background-zulip-button-hover);
        }

#recent_view .button-recent-filters:active {
            background-color: var(--color-background-zulip-button-active);
        }

#recent_view .button-recent-filters:focus-visible {
            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 {
                background-color: var(
                    --color-background-recent-filters-button-disabled
                );
                border-color: var(
                    --color-border-recent-filters-button-disabled
                );
            }

#recent_view .button-recent-selected {
        color: var(--color-text-brand-subtle-action-button);
        background-color: var(--color-background-brand-subtle-action-button);
    }

#recent_view .button-recent-selected:hover {
            background-color: var(
                --color-background-brand-subtle-action-button-hover
            );
        }

#recent_view .button-recent-selected:active {
            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;
        outline: 0 solid var(--color-background-unread-counter);
        transition: outline-width 0.1s ease;
    }

#recent_view .unread_count:hover {
            outline-width: 1.5px;
        }

#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;
    }

#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 var(--recent-view-participant-item-padding-x);
        position: relative;
        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;
        color: var(--color-recent-view-participant-overflow-text);
        display: block;
        height: 100%;
        text-align: center;
        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;
        color: var(--color-text-recent-view-last-msg-time);
        text-align: left;
    }

#recent_view tr {
        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 {
                background-color: var(--color-background-recent-view-row-hover);
            }

                #recent_view tr:hover .change_visibility_policy .recent-view-row-topic-menu {
                    opacity: 0.4;
                }
        }

#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; /* 12px at 16px/1em */
    }

#recent_view .unread_topic a {
            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,
                    var(--color-unread-marker) 30%,
                    hsl(217deg 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: max-content;
            color: var(--color-text-recent-view-last-msg-time);
        }

#recent_view .unread_topic .last-msg-link {
        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 */
        background-color: var(--color-background-recent-view-table-thead-th);
        overflow: hidden;
        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;
            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;
            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(0deg 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 {
            /* 0.75em left padding, 1px header width */
            --recent-view-channel-row-header-minus-body: calc(
                0.75em + var(--recent-view-body-border-width) - 1px
            );
            /* 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. */
            display: grid;
            grid-template-columns:
                calc(
                    min(
                            calc(
                                var(--longest-subscribed-channel-name-width) +
                                    1em + 8px
                            ),
                            calc(
                                calc(
                                        100% -
                                            var(
                                                --recent-view-channel-row-header-minus-body
                                            )
                                    ) /
                                    3
                            )
                        ) +
                        var(--recent-view-channel-row-header-minus-body)
                )
                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;
            /* Negative margin compensates the padding so the pill hover
               highlight doesn't push adjacent elements out of alignment. */
            padding: 0.25em; /* 4px at 16px/1em */
            margin: 0;
            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 {
                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;
            margin-left: 0;
        }

#recent_view .recent-view-topic-header .recent-view-conversation-sort-header {
            /* 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: var(--recent-view-participants-padding-x-start);
        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 td {
            padding: 0.375em 0.5em; /* 6px 8px at 16px/1em */
        }

#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. */
            grid-template-columns:
                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;
        }

#recent_view .recent_topic_name .zulip-icon-chevron-right {
            grid-area: chevron-right;
            font-size: 0.9375em; /* 15px at 16px/1em */
            color: hsl(0deg 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 (width < 768px) {
        /* 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: var(
                    --length-user-status-circle-recent-conversations
                );
                font-size: 0.625em; /* 10px at 16px/1em */
                float: left;
                position: unset;
                /* 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: 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: 2px solid var(--color-outline-focus);
    }

#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: var(--recent-topics-filters-height);
    /* Matching to the input styles otherwise defined on
       .input-element in inputs.css */
    color: var(--color-text-input);
    background: var(--color-background-input);
    border: none;
    outline: 1px solid var(--color-outline-input);
    outline-offset: -1px;
}

#recent-view-filter_widget:hover {
        outline-color: var(--color-outline-input-hover);
    }

#recent-view-filter_widget:focus {
        background-color: var(--color-background-input-focus);
        outline-color: var(--color-outline-input-focus);
        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 */
    border-radius: 0.625em; /* 10px at 16px/1em */
}

.recent-view-table-unread-count {
    border-radius: 0.3125em; /* 5px at 16px/1em */
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/typing_notifications.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************/
#typing_notifications {
    display: none;
    margin-left: 10px;
    font-style: italic;
    color: hsl(0deg 0% 53%);
}

#typing_notification_list {
    list-style: none;
    margin: 0;
}

#mark_as_read_turned_off_banner {
    /* override the margin of main-view-banner since it causes
       more gap than we want between mark as read banner and typing
       notification.  */
    margin: 5px 0;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/dark_theme.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/************************* 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. */
/* Search highlight used in both topics and rendered_markdown */
/* 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 .flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #3f4458;
  box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08);
    }
    .dark-theme:root .flatpickr-calendar.open, .dark-theme:root .flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
    }
    .dark-theme:root .flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
    }
    .dark-theme:root .flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .dark-theme:root .flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
    }
    .dark-theme:root .flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
    }
    .dark-theme:root .flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
    }
    .dark-theme:root .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
    }
    .dark-theme:root .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
    }
    .dark-theme:root .flatpickr-calendar .hasWeeks .dayContainer, .dark-theme:root .flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
    }
    .dark-theme:root .flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
    }
    .dark-theme:root .flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #20222c;
    }
    .dark-theme:root .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
    }
    .dark-theme:root .flatpickr-calendar:before, .dark-theme:root .flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
    }
    .dark-theme:root .flatpickr-calendar.rightMost:before, .dark-theme:root .flatpickr-calendar.arrowRight:before, .dark-theme:root .flatpickr-calendar.rightMost:after, .dark-theme:root .flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
    }
    .dark-theme:root .flatpickr-calendar.arrowCenter:before, .dark-theme:root .flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
    }
    .dark-theme:root .flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
    }
    .dark-theme:root .flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
    }
    .dark-theme:root .flatpickr-calendar.arrowTop:before, .dark-theme:root .flatpickr-calendar.arrowTop:after {
  bottom: 100%;
    }
    .dark-theme:root .flatpickr-calendar.arrowTop:before {
  border-bottom-color: #20222c;
    }
    .dark-theme:root .flatpickr-calendar.arrowTop:after {
  border-bottom-color: #3f4458;
    }
    .dark-theme:root .flatpickr-calendar.arrowBottom:before, .dark-theme:root .flatpickr-calendar.arrowBottom:after {
  top: 100%;
    }
    .dark-theme:root .flatpickr-calendar.arrowBottom:before {
  border-top-color: #20222c;
    }
    .dark-theme:root .flatpickr-calendar.arrowBottom:after {
  border-top-color: #3f4458;
    }
    .dark-theme:root .flatpickr-calendar:focus {
  outline: 0;
    }
    .dark-theme:root .flatpickr-wrapper {
  position: relative;
  display: inline-block;
    }
    .dark-theme:root .flatpickr-months {
  display: flex;
    }
    .dark-theme:root .flatpickr-months .flatpickr-month {
  background: #3f4458;
  color: #fff;
  fill: #fff;
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  overflow: hidden;
  flex: 1;
    }
    .dark-theme:root .flatpickr-months .flatpickr-prev-month, .dark-theme:root .flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
          user-select: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: #fff;
  fill: #fff;
    }
    .dark-theme:root .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .dark-theme:root .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
    }
    .dark-theme:root .flatpickr-months .flatpickr-prev-month i, .dark-theme:root .flatpickr-months .flatpickr-next-month i {
  position: relative;
    }
    .dark-theme:root .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .dark-theme:root .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
    }
    .dark-theme:root .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .dark-theme:root .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
    }
    .dark-theme:root .flatpickr-months .flatpickr-prev-month:hover, .dark-theme:root .flatpickr-months .flatpickr-next-month:hover {
  color: #eee;
    }
    .dark-theme:root .flatpickr-months .flatpickr-prev-month:hover svg, .dark-theme:root .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
    }
    .dark-theme:root .flatpickr-months .flatpickr-prev-month svg, .dark-theme:root .flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
    }
    .dark-theme:root .flatpickr-months .flatpickr-prev-month svg path, .dark-theme:root .flatpickr-months .flatpickr-next-month svg path {
  transition: fill 0.1s;
  fill: inherit;
    }
    .dark-theme:root .numInputWrapper {
  position: relative;
  height: auto;
    }
    .dark-theme:root .numInputWrapper input, .dark-theme:root .numInputWrapper span {
  display: inline-block;
    }
    .dark-theme:root .numInputWrapper input {
  width: 100%;
    }
    .dark-theme:root .numInputWrapper input::-ms-clear {
  display: none;
    }
    .dark-theme:root .numInputWrapper input::-webkit-outer-spin-button, .dark-theme:root .numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
    }
    .dark-theme:root .numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  box-sizing: border-box;
    }
    .dark-theme:root .numInputWrapper span:hover {
  background: rgba(192,187,167,0.1);
    }
    .dark-theme:root .numInputWrapper span:active {
  background: rgba(192,187,167,0.2);
    }
    .dark-theme:root .numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
    }
    .dark-theme:root .numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
    }
    .dark-theme:root .numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(255,255,255,0.6);
  top: 26%;
    }
    .dark-theme:root .numInputWrapper span.arrowDown {
  top: 50%;
    }
    .dark-theme:root .numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255,255,255,0.6);
  top: 40%;
    }
    .dark-theme:root .numInputWrapper span svg {
  width: inherit;
  height: auto;
    }
    .dark-theme:root .numInputWrapper span svg path {
  fill: rgba(255,255,255,0.5);
    }
    .dark-theme:root .numInputWrapper:hover {
  background: rgba(192,187,167,0.05);
    }
    .dark-theme:root .numInputWrapper:hover span {
  opacity: 1;
    }
    .dark-theme:root .flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0px, 0px, 0px);
    }
    .dark-theme:root .flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
    }
    .dark-theme:root .flatpickr-current-month span.cur-month:hover {
  background: rgba(192,187,167,0.05);
    }
    .dark-theme:root .flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
    }
    .dark-theme:root .flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #fff;
    }
    .dark-theme:root .flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #fff;
    }
    .dark-theme:root .flatpickr-current-month input.cur-year {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  appearance: textfield;
    }
    .dark-theme:root .flatpickr-current-month input.cur-year:focus {
  outline: 0;
    }
    .dark-theme:root .flatpickr-current-month input.cur-year[disabled], .dark-theme:root .flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(255,255,255,0.5);
  background: transparent;
  pointer-events: none;
    }
    .dark-theme:root .flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: #3f4458;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
    }
    .dark-theme:root .flatpickr-current-month .flatpickr-monthDropdown-months:focus, .dark-theme:root .flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
    }
    .dark-theme:root .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(192,187,167,0.05);
    }
    .dark-theme:root .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #3f4458;
  outline: none;
  padding: 0;
    }
    .dark-theme:root .flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: 28px;
    }
    .dark-theme:root .flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  flex: 1;
    }
    .dark-theme:root span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: #3f4458;
  color: #fff;
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1;
  font-weight: bolder;
    }
    .dark-theme:root .dayContainer, .dark-theme:root .flatpickr-weeks {
  padding: 1px 0 0 0;
    }
    .dark-theme:root .flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 307.875px;
    }
    .dark-theme:root .flatpickr-days:focus {
  outline: 0;
    }
    .dark-theme:root .dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
    }
    .dark-theme:root .dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #20222c;
    }
    .dark-theme:root .flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
    }
    .dark-theme:root .flatpickr-day.inRange, .dark-theme:root .flatpickr-day.prevMonthDay.inRange, .dark-theme:root .flatpickr-day.nextMonthDay.inRange, .dark-theme:root .flatpickr-day.today.inRange, .dark-theme:root .flatpickr-day.prevMonthDay.today.inRange, .dark-theme:root .flatpickr-day.nextMonthDay.today.inRange, .dark-theme:root .flatpickr-day:hover, .dark-theme:root .flatpickr-day.prevMonthDay:hover, .dark-theme:root .flatpickr-day.nextMonthDay:hover, .dark-theme:root .flatpickr-day:focus, .dark-theme:root .flatpickr-day.prevMonthDay:focus, .dark-theme:root .flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #646c8c;
  border-color: #646c8c;
    }
    .dark-theme:root .flatpickr-day.today {
  border-color: #eee;
    }
    .dark-theme:root .flatpickr-day.today:hover, .dark-theme:root .flatpickr-day.today:focus {
  border-color: #eee;
  background: #eee;
  color: #3f4458;
    }
    .dark-theme:root .flatpickr-day.selected, .dark-theme:root .flatpickr-day.startRange, .dark-theme:root .flatpickr-day.endRange, .dark-theme:root .flatpickr-day.selected.inRange, .dark-theme:root .flatpickr-day.startRange.inRange, .dark-theme:root .flatpickr-day.endRange.inRange, .dark-theme:root .flatpickr-day.selected:focus, .dark-theme:root .flatpickr-day.startRange:focus, .dark-theme:root .flatpickr-day.endRange:focus, .dark-theme:root .flatpickr-day.selected:hover, .dark-theme:root .flatpickr-day.startRange:hover, .dark-theme:root .flatpickr-day.endRange:hover, .dark-theme:root .flatpickr-day.selected.prevMonthDay, .dark-theme:root .flatpickr-day.startRange.prevMonthDay, .dark-theme:root .flatpickr-day.endRange.prevMonthDay, .dark-theme:root .flatpickr-day.selected.nextMonthDay, .dark-theme:root .flatpickr-day.startRange.nextMonthDay, .dark-theme:root .flatpickr-day.endRange.nextMonthDay {
  background: #80cbc4;
  box-shadow: none;
  color: #fff;
  border-color: #80cbc4;
    }
    .dark-theme:root .flatpickr-day.selected.startRange, .dark-theme:root .flatpickr-day.startRange.startRange, .dark-theme:root .flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
    }
    .dark-theme:root .flatpickr-day.selected.endRange, .dark-theme:root .flatpickr-day.startRange.endRange, .dark-theme:root .flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
    }
    .dark-theme:root .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .dark-theme:root .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .dark-theme:root .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #80cbc4;
    }
    .dark-theme:root .flatpickr-day.selected.startRange.endRange, .dark-theme:root .flatpickr-day.startRange.startRange.endRange, .dark-theme:root .flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
    }
    .dark-theme:root .flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c;
    }
    .dark-theme:root .flatpickr-day.flatpickr-disabled, .dark-theme:root .flatpickr-day.flatpickr-disabled:hover, .dark-theme:root .flatpickr-day.prevMonthDay, .dark-theme:root .flatpickr-day.nextMonthDay, .dark-theme:root .flatpickr-day.notAllowed, .dark-theme:root .flatpickr-day.notAllowed.prevMonthDay, .dark-theme:root .flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(255,255,255,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
    }
    .dark-theme:root .flatpickr-day.flatpickr-disabled, .dark-theme:root .flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(255,255,255,0.1);
    }
    .dark-theme:root .flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4;
    }
    .dark-theme:root .flatpickr-day.hidden {
  visibility: hidden;
    }
    .dark-theme:root .rangeMode .flatpickr-day {
  margin-top: 1px;
    }
    .dark-theme:root .flatpickr-weekwrapper {
  float: left;
    }
    .dark-theme:root .flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  box-shadow: 1px 0 0 #20222c;
    }
    .dark-theme:root .flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
    }
    .dark-theme:root .flatpickr-weekwrapper span.flatpickr-day, .dark-theme:root .flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(255,255,255,0.3);
  background: transparent;
  cursor: default;
  border: none;
    }
    .dark-theme:root .flatpickr-innerContainer {
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
    }
    .dark-theme:root .flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
    }
    .dark-theme:root .flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
    }
    .dark-theme:root .flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
    }
    .dark-theme:root .flatpickr-time .numInputWrapper {
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
    }
    .dark-theme:root .flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(255,255,255,0.95);
    }
    .dark-theme:root .flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(255,255,255,0.95);
    }
    .dark-theme:root .flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
    }
    .dark-theme:root .flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
    }
    .dark-theme:root .flatpickr-time input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: rgba(255,255,255,0.95);
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  appearance: textfield;
    }
    .dark-theme:root .flatpickr-time input.flatpickr-hour {
  font-weight: bold;
    }
    .dark-theme:root .flatpickr-time input.flatpickr-minute, .dark-theme:root .flatpickr-time input.flatpickr-second {
  font-weight: 400;
    }
    .dark-theme:root .flatpickr-time input:focus {
  outline: 0;
  border: 0;
    }
    .dark-theme:root .flatpickr-time .flatpickr-time-separator, .dark-theme:root .flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: rgba(255,255,255,0.95);
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
          user-select: none;
  align-self: center;
    }
    .dark-theme:root .flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
    }
    .dark-theme:root .flatpickr-time input:hover, .dark-theme:root .flatpickr-time .flatpickr-am-pm:hover, .dark-theme:root .flatpickr-time input:focus, .dark-theme:root .flatpickr-time .flatpickr-am-pm:focus {
  background: #6a7395;
    }
    .dark-theme:root .flatpickr-input[readonly] {
  cursor: pointer;
    }
    .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 {
            border: 1px solid var(--color-hotkey-hint);
            border-radius: 3px;
            color: var(--color-hotkey-hint);
            opacity: 0.8;
    }
    .dark-theme:root .enter_sends_choices {
        color: hsl(236deg 33% 90%);
    }
    .dark-theme:root .enter_sends_choices .enter_sends_minor {
            color: hsl(0deg 0% 80%);
    }
    .dark-theme:root .dropdown-list-delete {
        /* hsl(7deg 100% 74%) corresponds to var(--red-250) */
        color: color-mix(
            in oklch,
            hsl(7deg 100% 74%) 70%,
            transparent
        ) !important;
    }
    .dark-theme:root .dropdown-list-delete:hover {
            color: hsl(7deg 100% 74%) !important;
    }
    .dark-theme:root .popover a {
        color: inherit;
    }
    .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(225deg 6% 7%);
        border: 1px solid hsl(0deg 0% 100% / 50%);
        box-shadow: 0 0 5px hsl(0deg 0% 100% / 40%);
    }
    .dark-theme:root select option {
        background-color: var(--color-background);
        color: hsl(236deg 33% 90%);
    }
    .dark-theme:root .pill-container.not-editable-by-user {
        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: hsl(0deg 0% 0% / 90%);
    }
    .dark-theme:root .popover hr, .dark-theme:root hr {
        opacity: 0.2;
    }
    .dark-theme:root #recent_view_table .zulip-icon-user {
            opacity: 0.7;
    }
    .dark-theme:root #recent_view .change_visibility_policy .visibility-status-icon:not(.recent-view-row-topic-menu):hover {
        filter: invert(1);
    }
    .dark-theme:root #recent-view-content-table {
        border-bottom-width: 1px;
    }
    .dark-theme:root #recent-view-content-table .unread_topic a {
            font-weight: 400;
    }
    .dark-theme:root .drafts-container .header-body .delete-drafts-group > *:focus {
        background-color: hsl(228deg 11% 17%);
    }
    .dark-theme:root .table-striped tbody tr:nth-child(even) td {
        border-color: hsl(0deg 0% 0% / 20%);
        background-color: color-mix(
            in srgb,
            hsl(0deg 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: hsl(0deg 0% 0% / 20%);
        box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%);
    }
    .dark-theme:root .tip, .dark-theme:root .invite-stream-notice {
        color: inherit;
    }
    .dark-theme:root .alert.home-error-bar {
        color: hsl(236deg 33% 90%);
        background-color: hsl(35deg 84% 62% / 25%);
        border: 1px solid hsl(11deg 46% 54%);
    }
    .dark-theme:root .alert.alert-success {
        color: inherit;
        background-color: hsl(161deg 60% 46% / 20%);
        border-color: hsl(165deg 68% 37%);
    }
    .dark-theme:root .alert.alert-info {
        color: hsl(205deg 58% 80%);
        background-color: hsl(204deg 100% 12%);
        border-color: hsl(205deg 58% 69% / 40%);
    }
    .dark-theme:root .alert.alert-error, .dark-theme:root .alert.alert-danger {
        background-color: hsl(318deg 12% 21%);
        color: inherit;
        border: 1px solid hsl(0deg 75% 65%);
    }
    .dark-theme:root .alert-box .alert, .dark-theme:root .alert-box .stacktrace, .dark-theme:root .alert.alert-error {
        background-color: hsl(318deg 12% 21%);
        color: inherit;
        border: 1px solid hsl(0deg 75% 65%);
    }
    .dark-theme:root .alert-box .alert.alert-error::before {
            color: hsl(0deg 75% 65%);
    }
    .dark-theme:root .stacktrace {
        color: hsl(314deg 22% 85%);
        background-color: hsl(318deg 12% 21%);
        border: 1px solid hsl(0deg 75% 65%);
    }
    .dark-theme:root .stacktrace .expand {
            color: hsl(318deg 14% 36%);
    }
    .dark-theme:root .stacktrace .subtle {
            color: hsl(314deg 19% 63%);
    }
    .dark-theme:root .stacktrace .stacktrace-more-info {
            background-color: hsl(312deg 7% 14%);
    }
    .dark-theme:root .stacktrace .code-context {
            color: hsl(314deg 27% 82%);
            background-color: hsl(312deg 7% 14%);
            box-shadow:
                inset 0 11px 10px -10px hsl(0deg 0% 6%),
                inset 0 -11px 10px -10px hsl(0deg 0% 6%);
    }
    .dark-theme:root .stacktrace .code-context .line-number {
                color: hsl(318deg 14% 44%);
    }
    .dark-theme:root .stacktrace .code-context .focus-line {
                background-color: hsl(307deg 9% 19%);
    }
    .dark-theme:root .top-messages-logo {
        opacity: 0.7;
    }
    .dark-theme:root .history-limited-box, .dark-theme:root .all-messages-search-caution {
        background-color: hsl(0deg 0% 0% / 20%);
    }
    .dark-theme:root .highlight {
        background-color: hsl(51deg 100% 23%);
    }
    .dark-theme:root .searching-for-more-topics img {
        filter: invert(100%);
    }
    .dark-theme:root .simplebar-track .simplebar-scrollbar::before {
        background-color: hsl(0deg 0% 100%);
        box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 33%);
    }
    .dark-theme:root .collapse-settings-button:hover {
        color: hsl(200deg 79% 66%);
    }
    .dark-theme:root #loading_older_messages_indicator path, .dark-theme:root #recent_view_loading_messages_indicator path {
            fill: hsl(0deg 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(0deg 0% 67%);
    }
    .dark-theme:root .color_animated_button .zulip-icon {
            color: hsl(0deg 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(0deg 0% 0%);
    }
    .dark-theme:root #uppy-editor .uppy-ImageCropper .cropper-view-box {
            background: repeating-conic-gradient(
                    hsl(0deg 1.18% 16.67%) 0% 25%,
                    hsl(0deg 0% 0%) 0% 50%
                )
                50%/16px 16px;
    }
}
@media screen and (prefers-color-scheme: dark) {
    .color-scheme-automatic:root .flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #3f4458;
  box-shadow: 1px 0 0 #20222c, -1px 0 0 #20222c, 0 1px 0 #20222c, 0 -1px 0 #20222c, 0 3px 13px rgba(0,0,0,0.08);
    }
    .color-scheme-automatic:root .flatpickr-calendar.open, .color-scheme-automatic:root .flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
    }
    .color-scheme-automatic:root .flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
    }
    .color-scheme-automatic:root .flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .color-scheme-automatic:root .flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
    }
    .color-scheme-automatic:root .flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
    }
    .color-scheme-automatic:root .flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
    }
    .color-scheme-automatic:root .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
    }
    .color-scheme-automatic:root .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
    }
    .color-scheme-automatic:root .flatpickr-calendar .hasWeeks .dayContainer, .color-scheme-automatic:root .flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
    }
    .color-scheme-automatic:root .flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
    }
    .color-scheme-automatic:root .flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #20222c;
    }
    .color-scheme-automatic:root .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
    }
    .color-scheme-automatic:root .flatpickr-calendar:before, .color-scheme-automatic:root .flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
    }
    .color-scheme-automatic:root .flatpickr-calendar.rightMost:before, .color-scheme-automatic:root .flatpickr-calendar.arrowRight:before, .color-scheme-automatic:root .flatpickr-calendar.rightMost:after, .color-scheme-automatic:root .flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
    }
    .color-scheme-automatic:root .flatpickr-calendar.arrowCenter:before, .color-scheme-automatic:root .flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
    }
    .color-scheme-automatic:root .flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
    }
    .color-scheme-automatic:root .flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
    }
    .color-scheme-automatic:root .flatpickr-calendar.arrowTop:before, .color-scheme-automatic:root .flatpickr-calendar.arrowTop:after {
  bottom: 100%;
    }
    .color-scheme-automatic:root .flatpickr-calendar.arrowTop:before {
  border-bottom-color: #20222c;
    }
    .color-scheme-automatic:root .flatpickr-calendar.arrowTop:after {
  border-bottom-color: #3f4458;
    }
    .color-scheme-automatic:root .flatpickr-calendar.arrowBottom:before, .color-scheme-automatic:root .flatpickr-calendar.arrowBottom:after {
  top: 100%;
    }
    .color-scheme-automatic:root .flatpickr-calendar.arrowBottom:before {
  border-top-color: #20222c;
    }
    .color-scheme-automatic:root .flatpickr-calendar.arrowBottom:after {
  border-top-color: #3f4458;
    }
    .color-scheme-automatic:root .flatpickr-calendar:focus {
  outline: 0;
    }
    .color-scheme-automatic:root .flatpickr-wrapper {
  position: relative;
  display: inline-block;
    }
    .color-scheme-automatic:root .flatpickr-months {
  display: flex;
    }
    .color-scheme-automatic:root .flatpickr-months .flatpickr-month {
  background: #3f4458;
  color: #fff;
  fill: #fff;
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
          user-select: none;
  overflow: hidden;
  flex: 1;
    }
    .color-scheme-automatic:root .flatpickr-months .flatpickr-prev-month, .color-scheme-automatic:root .flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
          user-select: none;
  -webkit-text-decoration: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: #fff;
  fill: #fff;
    }
    .color-scheme-automatic:root .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .color-scheme-automatic:root .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
    }
    .color-scheme-automatic:root .flatpickr-months .flatpickr-prev-month i, .color-scheme-automatic:root .flatpickr-months .flatpickr-next-month i {
  position: relative;
    }
    .color-scheme-automatic:root .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .color-scheme-automatic:root .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
    }
    .color-scheme-automatic:root .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .color-scheme-automatic:root .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
    }
    .color-scheme-automatic:root .flatpickr-months .flatpickr-prev-month:hover, .color-scheme-automatic:root .flatpickr-months .flatpickr-next-month:hover {
  color: #eee;
    }
    .color-scheme-automatic:root .flatpickr-months .flatpickr-prev-month:hover svg, .color-scheme-automatic:root .flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
    }
    .color-scheme-automatic:root .flatpickr-months .flatpickr-prev-month svg, .color-scheme-automatic:root .flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
    }
    .color-scheme-automatic:root .flatpickr-months .flatpickr-prev-month svg path, .color-scheme-automatic:root .flatpickr-months .flatpickr-next-month svg path {
  transition: fill 0.1s;
  fill: inherit;
    }
    .color-scheme-automatic:root .numInputWrapper {
  position: relative;
  height: auto;
    }
    .color-scheme-automatic:root .numInputWrapper input, .color-scheme-automatic:root .numInputWrapper span {
  display: inline-block;
    }
    .color-scheme-automatic:root .numInputWrapper input {
  width: 100%;
    }
    .color-scheme-automatic:root .numInputWrapper input::-ms-clear {
  display: none;
    }
    .color-scheme-automatic:root .numInputWrapper input::-webkit-outer-spin-button, .color-scheme-automatic:root .numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
    }
    .color-scheme-automatic:root .numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.15);
  box-sizing: border-box;
    }
    .color-scheme-automatic:root .numInputWrapper span:hover {
  background: rgba(192,187,167,0.1);
    }
    .color-scheme-automatic:root .numInputWrapper span:active {
  background: rgba(192,187,167,0.2);
    }
    .color-scheme-automatic:root .numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
    }
    .color-scheme-automatic:root .numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
    }
    .color-scheme-automatic:root .numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(255,255,255,0.6);
  top: 26%;
    }
    .color-scheme-automatic:root .numInputWrapper span.arrowDown {
  top: 50%;
    }
    .color-scheme-automatic:root .numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255,255,255,0.6);
  top: 40%;
    }
    .color-scheme-automatic:root .numInputWrapper span svg {
  width: inherit;
  height: auto;
    }
    .color-scheme-automatic:root .numInputWrapper span svg path {
  fill: rgba(255,255,255,0.5);
    }
    .color-scheme-automatic:root .numInputWrapper:hover {
  background: rgba(192,187,167,0.05);
    }
    .color-scheme-automatic:root .numInputWrapper:hover span {
  opacity: 1;
    }
    .color-scheme-automatic:root .flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0px, 0px, 0px);
    }
    .color-scheme-automatic:root .flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
    }
    .color-scheme-automatic:root .flatpickr-current-month span.cur-month:hover {
  background: rgba(192,187,167,0.05);
    }
    .color-scheme-automatic:root .flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
    }
    .color-scheme-automatic:root .flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #fff;
    }
    .color-scheme-automatic:root .flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #fff;
    }
    .color-scheme-automatic:root .flatpickr-current-month input.cur-year {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  appearance: textfield;
    }
    .color-scheme-automatic:root .flatpickr-current-month input.cur-year:focus {
  outline: 0;
    }
    .color-scheme-automatic:root .flatpickr-current-month input.cur-year[disabled], .color-scheme-automatic:root .flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(255,255,255,0.5);
  background: transparent;
  pointer-events: none;
    }
    .color-scheme-automatic:root .flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: #3f4458;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
    }
    .color-scheme-automatic:root .flatpickr-current-month .flatpickr-monthDropdown-months:focus, .color-scheme-automatic:root .flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
    }
    .color-scheme-automatic:root .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(192,187,167,0.05);
    }
    .color-scheme-automatic:root .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: #3f4458;
  outline: none;
  padding: 0;
    }
    .color-scheme-automatic:root .flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: 28px;
    }
    .color-scheme-automatic:root .flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  flex: 1;
    }
    .color-scheme-automatic:root span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: #3f4458;
  color: #fff;
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1;
  font-weight: bolder;
    }
    .color-scheme-automatic:root .dayContainer, .color-scheme-automatic:root .flatpickr-weeks {
  padding: 1px 0 0 0;
    }
    .color-scheme-automatic:root .flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 307.875px;
    }
    .color-scheme-automatic:root .flatpickr-days:focus {
  outline: 0;
    }
    .color-scheme-automatic:root .dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
    }
    .color-scheme-automatic:root .dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #20222c;
    }
    .color-scheme-automatic:root .flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: rgba(255,255,255,0.95);
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
    }
    .color-scheme-automatic:root .flatpickr-day.inRange, .color-scheme-automatic:root .flatpickr-day.prevMonthDay.inRange, .color-scheme-automatic:root .flatpickr-day.nextMonthDay.inRange, .color-scheme-automatic:root .flatpickr-day.today.inRange, .color-scheme-automatic:root .flatpickr-day.prevMonthDay.today.inRange, .color-scheme-automatic:root .flatpickr-day.nextMonthDay.today.inRange, .color-scheme-automatic:root .flatpickr-day:hover, .color-scheme-automatic:root .flatpickr-day.prevMonthDay:hover, .color-scheme-automatic:root .flatpickr-day.nextMonthDay:hover, .color-scheme-automatic:root .flatpickr-day:focus, .color-scheme-automatic:root .flatpickr-day.prevMonthDay:focus, .color-scheme-automatic:root .flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #646c8c;
  border-color: #646c8c;
    }
    .color-scheme-automatic:root .flatpickr-day.today {
  border-color: #eee;
    }
    .color-scheme-automatic:root .flatpickr-day.today:hover, .color-scheme-automatic:root .flatpickr-day.today:focus {
  border-color: #eee;
  background: #eee;
  color: #3f4458;
    }
    .color-scheme-automatic:root .flatpickr-day.selected, .color-scheme-automatic:root .flatpickr-day.startRange, .color-scheme-automatic:root .flatpickr-day.endRange, .color-scheme-automatic:root .flatpickr-day.selected.inRange, .color-scheme-automatic:root .flatpickr-day.startRange.inRange, .color-scheme-automatic:root .flatpickr-day.endRange.inRange, .color-scheme-automatic:root .flatpickr-day.selected:focus, .color-scheme-automatic:root .flatpickr-day.startRange:focus, .color-scheme-automatic:root .flatpickr-day.endRange:focus, .color-scheme-automatic:root .flatpickr-day.selected:hover, .color-scheme-automatic:root .flatpickr-day.startRange:hover, .color-scheme-automatic:root .flatpickr-day.endRange:hover, .color-scheme-automatic:root .flatpickr-day.selected.prevMonthDay, .color-scheme-automatic:root .flatpickr-day.startRange.prevMonthDay, .color-scheme-automatic:root .flatpickr-day.endRange.prevMonthDay, .color-scheme-automatic:root .flatpickr-day.selected.nextMonthDay, .color-scheme-automatic:root .flatpickr-day.startRange.nextMonthDay, .color-scheme-automatic:root .flatpickr-day.endRange.nextMonthDay {
  background: #80cbc4;
  box-shadow: none;
  color: #fff;
  border-color: #80cbc4;
    }
    .color-scheme-automatic:root .flatpickr-day.selected.startRange, .color-scheme-automatic:root .flatpickr-day.startRange.startRange, .color-scheme-automatic:root .flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
    }
    .color-scheme-automatic:root .flatpickr-day.selected.endRange, .color-scheme-automatic:root .flatpickr-day.startRange.endRange, .color-scheme-automatic:root .flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
    }
    .color-scheme-automatic:root .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .color-scheme-automatic:root .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .color-scheme-automatic:root .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #80cbc4;
    }
    .color-scheme-automatic:root .flatpickr-day.selected.startRange.endRange, .color-scheme-automatic:root .flatpickr-day.startRange.startRange.endRange, .color-scheme-automatic:root .flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
    }
    .color-scheme-automatic:root .flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #646c8c, 5px 0 0 #646c8c;
    }
    .color-scheme-automatic:root .flatpickr-day.flatpickr-disabled, .color-scheme-automatic:root .flatpickr-day.flatpickr-disabled:hover, .color-scheme-automatic:root .flatpickr-day.prevMonthDay, .color-scheme-automatic:root .flatpickr-day.nextMonthDay, .color-scheme-automatic:root .flatpickr-day.notAllowed, .color-scheme-automatic:root .flatpickr-day.notAllowed.prevMonthDay, .color-scheme-automatic:root .flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(255,255,255,0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
    }
    .color-scheme-automatic:root .flatpickr-day.flatpickr-disabled, .color-scheme-automatic:root .flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(255,255,255,0.1);
    }
    .color-scheme-automatic:root .flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #80cbc4, 5px 0 0 #80cbc4;
    }
    .color-scheme-automatic:root .flatpickr-day.hidden {
  visibility: hidden;
    }
    .color-scheme-automatic:root .rangeMode .flatpickr-day {
  margin-top: 1px;
    }
    .color-scheme-automatic:root .flatpickr-weekwrapper {
  float: left;
    }
    .color-scheme-automatic:root .flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  box-shadow: 1px 0 0 #20222c;
    }
    .color-scheme-automatic:root .flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
    }
    .color-scheme-automatic:root .flatpickr-weekwrapper span.flatpickr-day, .color-scheme-automatic:root .flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(255,255,255,0.3);
  background: transparent;
  cursor: default;
  border: none;
    }
    .color-scheme-automatic:root .flatpickr-innerContainer {
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
    }
    .color-scheme-automatic:root .flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
    }
    .color-scheme-automatic:root .flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
    }
    .color-scheme-automatic:root .flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
    }
    .color-scheme-automatic:root .flatpickr-time .numInputWrapper {
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
    }
    .color-scheme-automatic:root .flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(255,255,255,0.95);
    }
    .color-scheme-automatic:root .flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(255,255,255,0.95);
    }
    .color-scheme-automatic:root .flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
    }
    .color-scheme-automatic:root .flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
    }
    .color-scheme-automatic:root .flatpickr-time input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: rgba(255,255,255,0.95);
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  appearance: textfield;
    }
    .color-scheme-automatic:root .flatpickr-time input.flatpickr-hour {
  font-weight: bold;
    }
    .color-scheme-automatic:root .flatpickr-time input.flatpickr-minute, .color-scheme-automatic:root .flatpickr-time input.flatpickr-second {
  font-weight: 400;
    }
    .color-scheme-automatic:root .flatpickr-time input:focus {
  outline: 0;
  border: 0;
    }
    .color-scheme-automatic:root .flatpickr-time .flatpickr-time-separator, .color-scheme-automatic:root .flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: rgba(255,255,255,0.95);
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
          user-select: none;
  align-self: center;
    }
    .color-scheme-automatic:root .flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
    }
    .color-scheme-automatic:root .flatpickr-time input:hover, .color-scheme-automatic:root .flatpickr-time .flatpickr-am-pm:hover, .color-scheme-automatic:root .flatpickr-time input:focus, .color-scheme-automatic:root .flatpickr-time .flatpickr-am-pm:focus {
  background: #6a7395;
    }
    .color-scheme-automatic:root .flatpickr-input[readonly] {
  cursor: pointer;
    }
    .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 {
            border: 1px solid var(--color-hotkey-hint);
            border-radius: 3px;
            color: var(--color-hotkey-hint);
            opacity: 0.8;
    }
    .color-scheme-automatic:root .enter_sends_choices {
        color: hsl(236deg 33% 90%);
    }
    .color-scheme-automatic:root .enter_sends_choices .enter_sends_minor {
            color: hsl(0deg 0% 80%);
    }
    .color-scheme-automatic:root .dropdown-list-delete {
        /* hsl(7deg 100% 74%) corresponds to var(--red-250) */
        color: color-mix(
            in oklch,
            hsl(7deg 100% 74%) 70%,
            transparent
        ) !important;
    }
    .color-scheme-automatic:root .dropdown-list-delete:hover {
            color: hsl(7deg 100% 74%) !important;
    }
    .color-scheme-automatic:root .popover a {
        color: inherit;
    }
    .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(225deg 6% 7%);
        border: 1px solid hsl(0deg 0% 100% / 50%);
        box-shadow: 0 0 5px hsl(0deg 0% 100% / 40%);
    }
    .color-scheme-automatic:root select option {
        background-color: var(--color-background);
        color: hsl(236deg 33% 90%);
    }
    .color-scheme-automatic:root .pill-container.not-editable-by-user {
        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: hsl(0deg 0% 0% / 90%);
    }
    .color-scheme-automatic:root .popover hr, .color-scheme-automatic:root hr {
        opacity: 0.2;
    }
    .color-scheme-automatic:root #recent_view_table .zulip-icon-user {
            opacity: 0.7;
    }
    .color-scheme-automatic:root #recent_view .change_visibility_policy .visibility-status-icon:not(.recent-view-row-topic-menu):hover {
        filter: invert(1);
    }
    .color-scheme-automatic:root #recent-view-content-table {
        border-bottom-width: 1px;
    }
    .color-scheme-automatic:root #recent-view-content-table .unread_topic a {
            font-weight: 400;
    }
    .color-scheme-automatic:root .drafts-container .header-body .delete-drafts-group > *:focus {
        background-color: hsl(228deg 11% 17%);
    }
    .color-scheme-automatic:root .table-striped tbody tr:nth-child(even) td {
        border-color: hsl(0deg 0% 0% / 20%);
        background-color: color-mix(
            in srgb,
            hsl(0deg 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: hsl(0deg 0% 0% / 20%);
        box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%);
    }
    .color-scheme-automatic:root .tip, .color-scheme-automatic:root .invite-stream-notice {
        color: inherit;
    }
    .color-scheme-automatic:root .alert.home-error-bar {
        color: hsl(236deg 33% 90%);
        background-color: hsl(35deg 84% 62% / 25%);
        border: 1px solid hsl(11deg 46% 54%);
    }
    .color-scheme-automatic:root .alert.alert-success {
        color: inherit;
        background-color: hsl(161deg 60% 46% / 20%);
        border-color: hsl(165deg 68% 37%);
    }
    .color-scheme-automatic:root .alert.alert-info {
        color: hsl(205deg 58% 80%);
        background-color: hsl(204deg 100% 12%);
        border-color: hsl(205deg 58% 69% / 40%);
    }
    .color-scheme-automatic:root .alert.alert-error, .color-scheme-automatic:root .alert.alert-danger {
        background-color: hsl(318deg 12% 21%);
        color: inherit;
        border: 1px solid hsl(0deg 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(318deg 12% 21%);
        color: inherit;
        border: 1px solid hsl(0deg 75% 65%);
    }
    .color-scheme-automatic:root .alert-box .alert.alert-error::before {
            color: hsl(0deg 75% 65%);
    }
    .color-scheme-automatic:root .stacktrace {
        color: hsl(314deg 22% 85%);
        background-color: hsl(318deg 12% 21%);
        border: 1px solid hsl(0deg 75% 65%);
    }
    .color-scheme-automatic:root .stacktrace .expand {
            color: hsl(318deg 14% 36%);
    }
    .color-scheme-automatic:root .stacktrace .subtle {
            color: hsl(314deg 19% 63%);
    }
    .color-scheme-automatic:root .stacktrace .stacktrace-more-info {
            background-color: hsl(312deg 7% 14%);
    }
    .color-scheme-automatic:root .stacktrace .code-context {
            color: hsl(314deg 27% 82%);
            background-color: hsl(312deg 7% 14%);
            box-shadow:
                inset 0 11px 10px -10px hsl(0deg 0% 6%),
                inset 0 -11px 10px -10px hsl(0deg 0% 6%);
    }
    .color-scheme-automatic:root .stacktrace .code-context .line-number {
                color: hsl(318deg 14% 44%);
    }
    .color-scheme-automatic:root .stacktrace .code-context .focus-line {
                background-color: hsl(307deg 9% 19%);
    }
    .color-scheme-automatic:root .top-messages-logo {
        opacity: 0.7;
    }
    .color-scheme-automatic:root .history-limited-box, .color-scheme-automatic:root .all-messages-search-caution {
        background-color: hsl(0deg 0% 0% / 20%);
    }
    .color-scheme-automatic:root .highlight {
        background-color: hsl(51deg 100% 23%);
    }
    .color-scheme-automatic:root .searching-for-more-topics img {
        filter: invert(100%);
    }
    .color-scheme-automatic:root .simplebar-track .simplebar-scrollbar::before {
        background-color: hsl(0deg 0% 100%);
        box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 33%);
    }
    .color-scheme-automatic:root .collapse-settings-button:hover {
        color: hsl(200deg 79% 66%);
    }
    .color-scheme-automatic:root #loading_older_messages_indicator path, .color-scheme-automatic:root #recent_view_loading_messages_indicator path {
            fill: hsl(0deg 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(0deg 0% 67%);
    }
    .color-scheme-automatic:root .color_animated_button .zulip-icon {
            color: hsl(0deg 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(0deg 0% 0%);
    }
    .color-scheme-automatic:root #uppy-editor .uppy-ImageCropper .cropper-view-box {
            background: repeating-conic-gradient(
                    hsl(0deg 1.18% 16.67%) 0% 25%,
                    hsl(0deg 0% 0%) 0% 50%
                )
                50%/16px 16px;
    }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/user_status.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************/
#set-user-status-modal {
    /* A narrower width is more attractive for this modal. */
    width: 384px;
}
#set-user-status-modal .user-status-content-wrapper {
        display: grid;
        grid-template:
            "status-icon search-input clear-search" auto / auto minmax(0, 1fr)
            auto;
        align-items: center;
        outline: 1px solid hsl(0deg 0% 0% / 60%);
        outline-offset: -1px;
        border-radius: 4px;
        background-color: var(--color-background-input);
    }
#set-user-status-modal .user-status-content-wrapper input.user-status {
            grid-area: search-input;
            line-height: 1.25em; /* 20px at 16px/em */
            padding: 0.5em 0.125em; /* 8px 2px at 16px/1em */
            width: 100%;
            /* Override default input height */
            height: unset;
            border: none;
            outline: none;
            box-shadow: none;
            /* Transparent here is to allow the input
               background set on the wrapper to show
               through. */
            background-color: transparent;
            margin: 0;
        }
#set-user-status-modal .user-status-content-wrapper input.user-status:focus {
                box-shadow: none;
            }
#set-user-status-modal .user-status-content-wrapper #clear_status_message_button {
            grid-area: clear-search;
            padding: 0.5em; /* 8px at 16px/1em */
            margin: 0.125em; /* 2px at 16px/1em */
        }
#set-user-status-modal .user-status-content-wrapper .status-emoji-wrapper {
            display: flex;
            padding: 0.375em; /* 6px at 16px/1em */
            margin: 0.125em; /* 2px at 16px/1em */
            border-radius: 4px;
            cursor: pointer;
        }
#set-user-status-modal .user-status-content-wrapper .status-emoji-wrapper .selected-emoji,#set-user-status-modal .user-status-content-wrapper .status-emoji-wrapper .smiley-icon {
                width: 1.25em; /* 20px at 16px/em */
                height: 1.25em; /* 20px at 16px/em */
                cursor: pointer;
            }
#set-user-status-modal .user-status-content-wrapper .status-emoji-wrapper .smiley-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--color-modal-selectable-icon);
            }
#set-user-status-modal .user-status-content-wrapper .status-emoji-wrapper .smiley-icon:hover {
                    -webkit-text-decoration: none;
                    text-decoration: none;
                }
#set-user-status-modal .user-status-content-wrapper .status-emoji-wrapper:hover,#set-user-status-modal .user-status-content-wrapper .status-emoji-wrapper.active-emoji-picker-reference {
                background-color: var(
                    --background-color-modal-selectable-icon-hover
                );
            }
#set-user-status-modal .user-status-content-wrapper .status-emoji-wrapper:hover .smiley-icon,#set-user-status-modal .user-status-content-wrapper .status-emoji-wrapper.active-emoji-picker-reference .smiley-icon {
                    color: var(--color-modal-selectable-icon-hover);
                }
#set-user-status-modal .user-status-options {
        padding-top: 15px;
    }
#set-user-status-modal .user-status-options .user-status-value {
            /* We set the gap between the status emoji and text
               in the default user status options to match the gap
               between the corresponding emoji and text of the
               custom user status input.
               6px (emoji button padding)
               + 2px (emoji button margin)
               + 2px (input padding) */
            gap: 0.625em; /* 10px at 16px/em */
        }
#set-user-status-modal .user-status-options .user-status-value .status-emoji {
                /* Size and align status emoji to match
                   the top line of the modal. */
                height: 1.25em; /* 20px at 16px/em */
                width: 1.25em; /* 20px at 16px/em */
                margin: 0;
            }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/widgets.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
.widget-content {
    margin-bottom: var(--markdown-interelement-space-px);
}

.widget-choices ul {
        padding: 3px;
    }

.widget-choices li {
        padding: 2px;
        list-style: none;
    }

.widget-choices button {
        font-weight: 700;
        color: hsl(240deg 100% 50%);
        font-family: inherit;
        font-size: inherit;
    }

.widget-choices .widget-choices-heading {
        font-weight: 600;
    }

.todo-widget .todo-task-list-title-bar {
        flex: 1 1 auto;
        display: flex;
        /* Ensure controls remain visible on narrower screens. */
        flex-flow: row wrap;
        gap: 5px;
        margin-bottom: var(--markdown-interelement-space-px);
    }

.todo-widget .add-task-bar {
        display: flex;
        /* Ensure controls remain visible on narrower screens. */
        flex-flow: row wrap;
        gap: 5px;
    }

/* For the box-shadow to be visible on the left */

.todo-widget .add-task,.todo-widget .add-desc {
        font-weight: 400;
    }

.todo-widget label.checkbox {
        display: flex; /* Arrange that a multi-line description line wraps properly. */
        /* Keep checkboxes vertically aligned, including with multi-line tasks. */
        align-items: baseline;
        /* Reset default label.checkbox styles. */
        gap: 5px;
        position: static;
        min-height: 0;
    }

.todo-widget label.checkbox input[type="checkbox"]  ~ .custom-checkbox {
                display: inline-block;
                vertical-align: middle;
                position: static;

                padding: 2px;
                margin: 0;

                font-size: 1.3em; /* 18.2px / 14px em */
                height: 0.6593em; /* 12px at 18.2px / em */
                width: 0.6593em; /* 12px at 18.2px / em */

                font-weight: 300;
                line-height: 0.8;
                text-align: center;
                border: 2px solid var(--color-border-todo-checkbox);

                border-radius: 4px;
                filter: brightness(1);

                cursor: pointer;
            }

.todo-widget label.checkbox input[type="checkbox"]:checked ~ .custom-checkbox {
                background-image: url(files/images/checkbox-white.svg);
                background-size: 75%;
                background-position: 50% 50%;
                background-repeat: no-repeat;
                background-color: var(--color-background-todo-checkbox-checked);
                border-color: var(--color-border-todo-checkbox-checked);
            }

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

.todo-widget label.checkbox input[type="checkbox"]:hover ~ .custom-checkbox {
                border-color: var(--color-border-todo-checkbox-hover);
            }

.todo-widget label.checkbox input[type="checkbox"]:not(:checked):hover ~ .custom-checkbox {
                /* We only change the background color on hover,
                   when the checkbox is not checked. */
                background-color: var(--color-background-todo-checkbox-hover);
            }

.todo-widget label.checkbox input[type="checkbox"]:focus ~ .custom-checkbox {
                outline-color: hsl(0deg 0% 100% / 0%);
            }

.todo-widget .poll-question-header,.poll-widget .poll-question-header,.todo-widget .todo-task-list-title-header,.poll-widget .todo-task-list-title-header {
        font-size: 1.1em;
        font-weight: 600;
    }

.todo-widget li,.poll-widget li {
        display: flex;
        gap: 5px;
        align-items: baseline;
        list-style: none;
        margin: 0 0 5px;
    }

.todo-widget ul,.poll-widget ul {
        margin: 0 0 5px;
        padding: 0;
    }

.todo-widget input[type="text"],.poll-widget input[type="text"] {
        /* Reset from zulip.css */
        height: unset;
        border: 1px solid hsl(0deg 0% 80%);
        box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
        border-radius: 4px;
        color: var(--color-text-default);
        font-family: inherit;
    }

.todo-widget input[type="text"]:focus,.poll-widget input[type="text"]:focus {
            border-color: hsl(206deg 80% 62% / 80%);
            outline: 0;
            box-shadow: none;
            background-color: var(--color-background-widget-input);
            transition:
                border-color linear 0.2s,
                box-shadow linear 0.2s;
        }

.poll-widget .poll-option-bar {
        display: flex;
        /* Ensure controls remain visible on narrower screens. */
        flex-flow: row wrap;
        gap: 5px;
    }

.poll-widget .poll-option {
        font-weight: 400;
    }

.poll-widget .poll-option-label {
        display: flex;
        gap: 5px;
        align-items: baseline;
    }

.poll-widget .poll-option-text {
        font-weight: 600;
        /* Start with max-content, but allow options
           to shrink, so that voting names wrap comfortably. */
        flex: 0 1 max-content;
    }

.poll-widget .poll-vote {
        color: var(--color-poll-vote);
        border-color: var(--color-border-poll-vote);
        border-style: solid;
        font-weight: 600;
        border-radius: 3px;
        /* We don't want poll-vote tallies to spill
           digits onto second lines in narrow viewports. */
        flex-shrink: 0;
        min-width: 1.7857em; /* 25px at 14px / em */
        height: 1.7857em; /* 25px at 14px / em */
        font-size: 0.9285em; /* 13px at 14px / em */
        background-color: var(--color-background-widget-button);
        font-family: inherit;
    }

.poll-widget .poll-vote:hover {
            color: var(--color-poll-vote-hover);
            background-color: var(--color-background-poll-vote-hover);
            border-color: var(--color-border-poll-vote-hover);
        }

.poll-widget .poll-vote:focus {
            outline: 0;
            color: var(--color-poll-vote-focus);
            background-color: var(--color-background-poll-vote-focus);
            border-color: var(--color-border-poll-vote-focus);
        }

.poll-widget .poll-vote:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

.poll-widget .poll-names {
        color: var(--color-poll-names);
        /* Aim for 50% of the flexbox for voting names,
           but also shrink modestly (.5) adjacent a long
           option. */
        flex: 1 0.5 50%;
    }

button.add-task,button.poll-option {
        color: hsl(156deg 41% 40%);
        border: 1px solid hsl(156deg 28% 70%);
        width: max-content;
        flex: 0 0 auto;
        border-radius: 3px;
        background-color: var(--color-background-widget-button);
        padding: 4px;
        padding-left: 14px;
        padding-right: 14px;
        font-family: inherit;
        font-size: inherit;
    }

button.add-task:hover,button.poll-option:hover,button.add-task:focus,button.poll-option:focus {
            outline: 0;
            border-color: hsl(156deg 30% 50%);
            transition: 0.2s ease;
            transition-property: background-color, border-color, color;
        }

button.add-task:active {
            transition: 0.2s ease;
            transition-property: background-color, border-color, color;
        }

button.poll-option:active {
            transition: 0.2s ease;
            transition-property: background-color, border-color, color;
        }

button.add-task:disabled {
            cursor: not-allowed;
            filter: saturate(0);
            background-color: var(--color-background-zulip-button-disabled);
            color: hsl(0deg 3% 52%);
        }

button.poll-option:disabled {
            cursor: not-allowed;
            filter: saturate(0);
            background-color: var(--color-background-zulip-button-disabled);
            color: hsl(0deg 3% 52%);
        }

input.add-task,input.add-desc,input.poll-option,input.poll-question,input.todo-task-list-title {
        flex: 1 0 auto;
        padding: var(--input-vertical-padding) var(--input-horizontal-padding);
    }

.widget-error {
    color: hsl(1deg 45% 50%);
    font-size: 0.8571em; /* 12px at 14px/em */
    display: flex;
    align-items: center;
}

.poll-question-check,
.poll-question-remove,
.todo-task-list-title-check,
.todo-task-list-title-remove {
    align-self: stretch;
    /* TODO: Re-express the 30.5px value here
       as part of information density work. */
    flex: 0 0 30.5px;
    min-height: 30.5px;
    border-radius: 3px;
    border: 1px solid var(--color-border-zulip-button);
    background-color: var(--color-background-zulip-button);
    font-size: inherit;
}

.poll-question-check:hover,.poll-question-remove:hover,.todo-task-list-title-check:hover,.todo-task-list-title-remove:hover {
        border-color: var(--color-border-zulip-button-interactive);
        background-color: var(--color-background-zulip-button-hover);
    }

.poll-edit-question,
.todo-edit-task-list-title {
    color: var(--color-message-action-visible);
}

.poll-edit-question:focus-visible {
        color: var(--color-message-action-interactive);
    }

.todo-edit-task-list-title:focus-visible {
        color: var(--color-message-action-interactive);
    }

.poll-edit-question:hover,.todo-edit-task-list-title:hover {
        color: var(--color-message-action-interactive);
    }

.poll-question-bar {
    flex: 1 1 auto;
    display: flex;
    /* Ensure controls remain visible on narrower screens. */
    flex-flow: row wrap;
    gap: 5px;
    /* Reserve space for the focus outline to prevent it from being cut off */
    margin-right: 2px;
    margin-bottom: var(--markdown-interelement-space-px);
}

.poll-widget-header-area,
.todo-widget-header-area {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.current-user-vote {
    background-color: hsl(156deg 10% 90% / 90%);
}

.add-task-wrapper {
    display: inline;
    position: relative;
    z-index: 1;

    /* Unlike other browsers like Chrome, Microsoft Edge, etc.,
    Firefox does not automatically display the "not-allowed"
    cursor for disabled elements. The below css ensures that the
    correct cursor is shown across all browsers. */
}

.add-task-wrapper:hover {
        cursor: not-allowed;
    }

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/print.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
@media print {
    /* Hide unnecessary blocks. */
    #navbar_alerts_wrapper,
    #streamlist-toggle,
    #left-sidebar-container,
    #right-sidebar-container,
    .column-left,
    .top-messages-logo,
    #userlist-toggle,
    .message_length_controller,
    #loading_older_messages_indicator,
    #page_loading_indicator,
    #message_feed_errors_container,
    #bottom_whitespace,
    #mark_read_on_scroll_state_banner,
    #mark_read_on_scroll_state_banner_place_holder,
    .trailing_bookend,
    #compose {
        display: none;
    }

    /* Allow printer to set the margins, and
       prevent Safari from using screen-based ones. */
    .column-middle {
        margin: 0;
    }

    /* Prevent headers from running on every page. */
    #navbar-fixed-container,
    .message-feed .message_header {
        position: static;
    }

    /* Save a bit of paper by removing height, which
       otherwise creates a blank final page, and padding. */
    html,
    body {
        height: auto;
    }

    #message_feed_container {
        padding-top: 0;
    }

    /* Hide unnecessary controls, but leave them
       in the document flow. */
    .search_icon,
    #search_exit,
    .settings-dropdown-cog,
    .recipient_bar_controls {
        visibility: hidden;
    }

    /* Try to keep the message header with the messages
       that follow in interleaved views. */
    .message_header_stream {
        page-break-after: avoid;
        break-after: avoid;
    }

    /* Don't highlight the selected message. */
    .selected_message .messagebox-content {
        outline: 0;
    }
        .messagebox-content .message_edit_notice,.messagebox-content .message-time {
            /* Firefox seems to have a bug that fuzzes out
               small text with opacity; this unsets that
               value, and replaces with a matching gray. */
            opacity: unset;
            color: hsl(0deg 0% 0% / 48%);
        }

    /* Show collapsed content for printing. Note that
       CSS Grid does not yet break very intelligently
       in all browsers, so longer messages may sometimes
       appear at the top of new pages. */
    .message_content.collapsed,
    .message_content.condensed {
        max-height: unset !important;
        min-height: unset !important;
        overflow: auto !important;
        height: auto !important;
        -webkit-mask-image: none;
                mask-image: none;
    }

    /* Print links in the same color as text, with any
       likely full URL values in parentheses. */
    .message_content a {
        color: inherit;
    }

        .message_content a[href^="http"]::after {
            content: " (" attr(href) ")";
        }

    /* Ensure that emoji print. They are background-images,
       which ordinarily do not print, so these properties
       should ensure proper printing of inline, status, and
       other emoji. */
    .emoji {
        -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
    }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/inbox.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************/
.inbox-container {
    display: flex;
    flex-direction: column;
    background: var(--color-background-inbox);
    padding: 0;
    min-height: 100vh;
}

.inbox-container #inbox-pane {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        margin: var(--navbar-fixed-height) 25px 0;
    }

.inbox-container #inbox-pane a {
            color: var(--color-text-message-header);
            -webkit-text-decoration: none;
            text-decoration: none;
        }

.inbox-container #inbox-pane .unread_count {
            opacity: 1;
            outline: 0 solid var(--color-background-unread-counter);
            transition: outline-width 0.1s ease;
        }

.inbox-container #inbox-pane .unread_count:hover {
                outline-width: 1.5px;
            }

.inbox-container #inbox-pane .search_group {
            position: sticky;
            top: var(--navbar-fixed-height);
            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 {
            background-color: var(--color-background-button-inbox-selected);
        }

.inbox-container #inbox-pane #inbox-filters .inbox-search-wrapper {
                flex-grow: 1;
                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: 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(
                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 */
                border: 2px solid transparent;
                border-radius: 3px;
                box-sizing: border-box;
                justify-content: space-between;
            }

.inbox-container #inbox-pane #inbox-list .inbox-header {
                -webkit-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;
                        user-select: none;
                display: block;
                background-color: var(--color-background-inbox-row);
            }

.inbox-container #inbox-pane #inbox-list .inbox-row:hover {
                    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 {
                display: flex;
                align-items: center;
                border-radius: 3px;
                margin-left: 3px;
            }

.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: 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;
            }

.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%;
            }

/* Since a direct message row can have span to multiple lines,
                   having an underline focus will not work very well.
                */

.inbox-container #inbox-pane #inbox-list #inbox-direct-messages-container .inbox-row:focus-visible {
                    box-shadow: inset 0 0 0 2px var(--color-outline-focus);
                }

.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;
                    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(
                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:hover .inbox-row-visibility-policy-inherit,.inbox-container #inbox-pane .inbox-header:hover .inbox-row-visibility-policy-inherit,.inbox-container #inbox-pane .inbox-row:hover .inbox-action-button,.inbox-container #inbox-pane .inbox-header:hover .inbox-action-button {
                    opacity: 1;
                }

.inbox-container #inbox-pane .inbox-row-visibility-policy-inherit {
            opacity: 0;
        }

.inbox-container #inbox-pane .inbox-row-visibility-policy-inherit.visibility-policy-popover-visible {
                opacity: 1;
            }

.inbox-container #inbox-pane .inbox-action-button {
            display: flex;
            border-radius: 3px;
            outline: none;
            opacity: 0;
        }

.inbox-container #inbox-pane .inbox-action-button.hide {
                display: none;
            }

.inbox-container #inbox-pane .inbox-action-button i {
                padding: 0.3125em; /* 5px at 16px em */
                opacity: 0.3;
                color: var(--color-vdots-hover);
            }

.inbox-container #inbox-pane .inbox-action-button i:hover {
                    opacity: 1;
                    cursor: pointer;
                }

.inbox-container .inbox-header-stream-archived {
        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 {
            color: var(--color-folder-header);
            opacity: 0.5;
        }

#inbox-view .inbox-folder .inbox-header-name-text {
            font-style: normal;
            font-weight: var(--font-weight-sidebar-heading);
            line-height: 112.5%;
            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(var(--left-sidebar-vdots-width) - 4px);
        cursor: pointer;
        place-items: center center;
        border-radius: 3px;
        margin: 2px;
        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 {
            color: var(--color-vdots-hover);
            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;
    background-color: var(--color-background-inbox-no-unreads-illustration);
    -webkit-mask: url(files/images/empty-view-illustrations/inbox-done.svg) no-repeat
        center;
            mask: url(files/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;
    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: var(--color-text-url);
}

.inbox-container #inbox-pane .inbox-empty-action-link:hover {
        color: var(--color-text-url-hover);
    }

#inbox-filter_widget {
    margin-right: 0.3571em; /* 5px / 14px em */
    max-width: var(--width-inbox-filters-dropdown);
    border: 1px solid var(--color-border-inbox-search);
    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 {
        background-color: var(--color-background-inbox-search-hover);
        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 {
    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: unset;
}

.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: 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;
    cursor: default;
    display: none;
}

.inbox-container #inbox-pane .inbox-folder .unread_count:hover {
        outline: 0;
    }

#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 {
    color: var(--color-folder-header);
}

.channel-row-chevron {
    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: 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: 2px solid var(--color-outline-focus);
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-header:focus-visible .inbox-focus-border {
                border-color: var(--color-outline-focus);
            }

#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;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-row:focus-visible .inbox-focus-border {
                border: 2px solid var(--color-outline-focus);
                border-radius: 3px;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-row:focus-visible {

            outline: 0;
            padding: 0;
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .channel-visibility-policy-indicator:focus-visible {
            outline: 2px solid var(--color-outline-focus);
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .visibility-policy-indicator:focus-visible {
            outline: 2px solid var(--color-outline-focus);
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-action-button:focus-visible {
            box-shadow: 0 0 0 2px var(--color-outline-focus);
        }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .unread-count-focus-outline:focus-visible {
            outline: 2px solid var(--color-outline-focus);
        }

/* Don't show the icons unless user is visibly focused
            on the element or one of the elements within it. */

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-row:focus-within:not(:focus) .channel-visibility-policy-indicator {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-header:focus-within:not(:focus) .channel-visibility-policy-indicator {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-row:focus-visible:not(.does-not-exist) .channel-visibility-policy-indicator {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-header:focus-visible:not(.does-not-exist) .channel-visibility-policy-indicator {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-row:focus-within:not(:focus) .inbox-row-visibility-policy-inherit {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-header:focus-within:not(:focus) .inbox-row-visibility-policy-inherit {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-row:focus-visible:not(.does-not-exist) .inbox-row-visibility-policy-inherit {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-header:focus-visible:not(.does-not-exist) .inbox-row-visibility-policy-inherit {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-row:focus-within:not(:focus) .inbox-action-button {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-header:focus-within:not(:focus) .inbox-action-button {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-row:focus-visible:not(.does-not-exist) .inbox-action-button {
                opacity: 1;
            }

#inbox-view:not(.no-visible-focus-outlines) .inbox-container #inbox-pane .inbox-header:focus-visible:not(.does-not-exist) .inbox-action-button {
                opacity: 1;
            }

#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--0: var(--csstools-color-scheme--light) var(--color-background-hover-popover-menu);

            background: var(--csstools-light-dark-toggle--0, transparent);
        }

@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-animation-extra-content-blocker {
    background: var(--color-background-inbox);
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/color_picker.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************/
.color-swatch-list {
    display: grid;
    grid-template-columns: repeat(6, var(--size-color-swatch));
    gap: var(--grid-gap-color-swatch);
    place-items: center;
    padding: var(--padding-color-swatch-list);
}

.color-swatch-input {
    display: none;
}

.color-swatch-input:checked + .color-swatch-label {
    outline: 2px solid var(--color-outline-focus);
    outline-offset: 1px;
}

.color-swatch-label {
    width: var(--size-color-swatch);
    height: var(--size-color-swatch);
    border-radius: 50%;
    cursor: pointer;
}

.color-swatch-label:focus-visible {
        outline: 2px solid var(--color-outline-focus);
        outline-offset: 1px;
    }

.custom-color-picker {
    position: relative;
}

.color-picker-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    visibility: hidden;
}

.custom-color-swatch-icon {
    border-radius: 50%;
    background: var(--gradient-custom-swatch);
}

.color-picker-popover .message-header-contents {
    border: none;
}

.color_picker_confirm_button {
    height: 100%;
}

.color_picker_confirm_button:focus-visible {
        outline: 1px solid var(--color-outline-focus);
        outline-offset: -2px;
    }

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.10_typescript@6.0.2_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/animate.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************/
.content-expand-animation-start {
    opacity: 0;
}

.content-expand-animation-end {
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.content-collapse-animation-start {
    opacity: 1;
}

.content-collapse-animation-end {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.collapse-expand-animation-extra-content-blocker {
    z-index: 10000;
    position: relative;
}

.mark-element-for-translation {
    position: relative;
    z-index: 1;
}


/*# sourceMappingURL=app.css.map*/