/*
 * Zulip Denim — Mattermost's colours, wearing Zulip.
 *
 * The palette is taken from Mattermost's own Denim (light) and Onyx (dark)
 * themes, so a team moving between the two apps sees one visual language. The
 * layout stays Zulip's: this changes colour, weight and radius, never where
 * things are.
 *
 * Zulip's stylesheet is built almost entirely out of named custom properties,
 * so most of this file just gives those properties different values. That keeps
 * the theme readable and keeps it surviving upgrades: a renamed component class
 * costs one rule, not the whole theme.
 *
 * Colours are written with light-dark(), so the theme follows whichever colour
 * scheme is chosen in Zulip's own settings. The left sidebar is the deliberate
 * exception — like Mattermost, it stays dark in both, because the contrast
 * between a dark rail and a bright conversation is what makes a chat app
 * readable at a glance.
 */

:root {
    /* ---- palette -------------------------------------------------------
     * Mattermost Denim on the left of each pair, Onyx on the right.
     */
    --denim-accent: light-dark(#1c58d9, #4a7ce8);
    --denim-accent-strong: light-dark(#1749b8, #6a92ec);
    --denim-accent-quiet: light-dark(#e5edfb, #1f2937);
    --denim-link: light-dark(#386fe5, #5d89ea);

    --denim-canvas: light-dark(#ffffff, #191b1f);
    --denim-surface: light-dark(#ffffff, #191b1f);
    --denim-surface-raised: light-dark(#ffffff, #202228);
    --denim-line: light-dark(#e0e1e4, #2b2d33);
    --denim-line-quiet: light-dark(#ededf0, #232529);

    --denim-ink: light-dark(#3f4350, #e3e4e8);
    --denim-ink-quiet: light-dark(#6a6e7d, #a7abb6);
    --denim-ink-faint: light-dark(#8e919c, #7c808c);

    --denim-rail: light-dark(#1e325c, #202228);
    --denim-rail-header: light-dark(#192a4d, #24272d);
    --denim-rail-ink: #ffffff;
    --denim-rail-ink-quiet: light-dark(#a9bbdd, #b0b3ba);
    --denim-rail-hover: light-dark(#28427b, #25262a);
    --denim-rail-active: light-dark(#28427b, #2b2e35);
    --denim-rail-active-border: light-dark(#5d89ea, #4a7ce8);
    /* Fields sitting on the dark chrome are a wash of the rail's own ink,
     * the way Mattermost tints its global-header search. */
    --denim-rail-field: rgba(255, 255, 255, 0.08);
    --denim-rail-line: rgba(255, 255, 255, 0.16);
    --denim-rail-scrollbar: rgba(255, 255, 255, 0.22);

    --denim-online: #3db887;
    --denim-away: light-dark(#ffbc1f, #f5ab00);
    --denim-busy: #d24b4e;
    --denim-mention-highlight: light-dark(#ffd470, #0d6e6e);
    --denim-error: light-dark(#d24b4e, #da6c6e);

    --denim-scrollbar: light-dark(#b8bcc7, #454956);

    /* Mattermost's radius scale: --radius-s / --radius-m in its own sass. */
    --denim-radius: 4px;
    --denim-radius-large: 8px;

    /* Zulip already self-hosts Open Sans, but under the family name
     * "Open Sans Variable"; asking for plain "Open Sans" silently fell through
     * to the system font. Naming the variable face first is what actually
     * makes Mattermost's typeface paint, with no font shipped by this theme. */
    --denim-font: "Open Sans Variable", "Open Sans", -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif;

    /* ---- surfaces ------------------------------------------------------ */
    --color-background: var(--denim-canvas);
    --color-background-stream-message-content: var(--denim-surface);
    --color-background-private-message-content: var(--denim-surface);
    /* Mattermost's global header is part of the dark chrome rather than part of
     * the conversation, which is what makes the bright message area read as the
     * document and everything else as furniture. */
    --color-background-navbar: var(--denim-rail-header);
    --color-navbar-bottom-border: transparent;
    --color-navbar-icon: var(--denim-rail-ink-quiet);
    --color-text-message-view-header: var(--denim-rail-ink);
    --color-background-search: var(--denim-rail-field);
    --color-background-search-collapsed: var(--denim-rail-field);
    --color-text-search: var(--denim-rail-ink);
    --color-text-search-hover: var(--denim-rail-ink);
    --color-text-search-placeholder: var(--denim-rail-ink-quiet);
    --color-search-icons: var(--denim-rail-ink-quiet);
    --color-search-box-hover-shadow: transparent;
    --color-background-modal: var(--denim-surface-raised);
    --color-background-popover-menu: var(--denim-surface-raised);
    --color-background-tooltip: light-dark(#2a2c36, #33363f);

    /* ---- type ---------------------------------------------------------- */
    --color-text-default: var(--denim-ink);
    --color-text-message-default: var(--denim-ink);
    --color-text-message-header: var(--denim-ink);
    --color-text-default-hover: var(--denim-ink);
    --color-text-item: var(--denim-ink-quiet);
    --color-text-dropdown-input: var(--denim-ink);

    /* ---- lines --------------------------------------------------------- */
    --color-border-sidebar: transparent;
    --color-border-sidebar-subheader: var(--denim-line);
    --color-border-popover-menu: var(--denim-line);
    --color-border-modal: var(--denim-line);
    --color-border-message-content: var(--denim-line-quiet);
    /* One reading surface. Zulip draws every conversation as a bordered card
     * -- a hairline down each side of the feed, a rule under the group, and a
     * tinted bar on top. Mattermost draws none of that: posts sit flat on the
     * channel background and one rule marks where a conversation begins. */
    --color-message-list-border: transparent;
    --color-border-message-group-spacer-line: transparent;
    --color-background-private-message-header: var(--denim-surface);
    --color-message-header-contents-border: transparent;
    --color-message-header-contents-border-bottom: transparent;
    --color-private-message-header-border: transparent;
    --color-private-message-header-border-bottom: transparent;
    /* Zulip's keyboard cursor is a filled blue outline around the current
     * message. Mattermost marks nothing, so this keeps the affordance but
     * drops it to a hairline. */
    --color-selected-message-outline: var(--denim-line);

    /* ---- accents ------------------------------------------------------- */
    --color-background-brand-primary-action-button: var(--denim-accent);
    --color-background-brand-primary-action-button-hover: var(--denim-accent-strong);
    --color-background-brand-primary-action-button-active: var(--denim-accent-strong);
    --color-background-unread-counter: var(--denim-accent);
    --color-background-unread-counter-no-alpha: var(--denim-accent);
    --color-background-unread-counter-normal: var(--denim-accent);
    --color-background-unread-counter-prominent: var(--denim-accent);
    --color-background-unread-counter-dot: var(--denim-accent);
    --color-border-unread-counter: transparent;
    --box-shadow-unread-counter-normal: none;

    /* The rail's own variables are set on the rail itself, further down: they
     * are named for "the sidebar" but Zulip serves both sidebars from them,
     * and the right one stays a light surface.
     */
    --font-weight-sidebar-heading: 600;
    --font-weight-sidebar-action-heading: 600;

    /* ---- compose ------------------------------------------------------- */
    --color-compose-box-background: var(--denim-canvas);
    --color-border-compose-content: var(--denim-line);
    --color-compose-collapsed-reply-button-area-background: var(--denim-surface);
    --color-compose-collapsed-reply-button-area-border: var(--denim-line);
    --color-background-compose-new-message-button: var(--denim-accent);
    --color-background-compose-new-message-button-hover: var(--denim-accent-strong);
    --color-background-compose-new-message-button-active: var(--denim-accent-strong);
    --color-border-compose-new-message-button: transparent;
    --color-border-compose-new-message-button-hover: transparent;
    --color-border-compose-new-message-button-active: transparent;

    /* ---- popovers ------------------------------------------------------ */
    --box-shadow-popover-menu: 0 4px 20px light-dark(rgba(15, 16, 21, 0.14), rgba(0, 0, 0, 0.55));
    --box-shadow-gear-menu: 0 4px 20px light-dark(rgba(15, 16, 21, 0.14), rgba(0, 0, 0, 0.55));
}

/* ---- typeface -----------------------------------------------------------
 * Mattermost sets its interface in Open Sans. Zulip ships that face already —
 * it is bundled as a variable font under the family name "Open Sans Variable"
 * and served from the app's own origin — so the theme only has to ask for it
 * by the right name. Nothing is downloaded and nothing is added to install.sh.
 *
 * Zulip names "Source Sans 3 VF" directly in a handful of component rules,
 * which inheritance from body cannot reach; those are the extra selectors.
 */
body,
input,
button,
textarea,
select,
.action-button,
.input-element-wrapper .input-element,
#searchbox .search-input,
[data-tippy-root] .tippy-box,
[data-tippy-root] .tippy-box .tippy-content {
    font-family: var(--denim-font);
}

body {
    /* Mattermost's own font-smoothing mixin; Open Sans is drawn light without
     * it and reads heavier than Mattermost's on the same background. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mattermost's type scale: sender names are semibold rather than bold, and the
 * timestamp is a quiet grey beside the body. Zulip states the 700 on a
 * four-class selector, so this has to answer at the same weight.
 */
.messagebox-includes-sender .messagebox-content .message_sender .sender_name {
    font-weight: 600;
}

.message_row .message_time,
.message_row .message-time {
    font-weight: 400;
    color: var(--denim-ink-faint);
}

/* ---- the top bar ------------------------------------------------------- */
.header,
#navbar-middle .column-middle-inner {
    background-color: var(--denim-rail-header);
    box-shadow: none;
}

.header .navbar-item i,
.header .zulip-icon,
#navbar-middle .navbar-item {
    color: var(--denim-rail-ink-quiet);
}

.header .navbar-item:hover i,
.header .navbar-item:hover .zulip-icon {
    color: var(--denim-rail-ink);
}

#searchbox .input-append,
#search_query,
.navbar-search .input-element-wrapper {
    background-color: var(--denim-rail-field);
    border-color: transparent;
    color: var(--denim-rail-ink);
    border-radius: var(--denim-radius);
}

/* ---- the dark rail ------------------------------------------------------
 * Zulip sizes the fixed sidebar to its content, so on a short channel list
 * the colour stopped partway down the window and left a bare strip beneath
 * it. It has to reach the bottom of the viewport to read as a rail at all.
 */
#left-sidebar,
.left-sidebar {
    height: 100vh;
}

/* Section headings sit on the rail, so they must not carry a light band.
 *
 * The CHANNELS band came from `.stream-list-subsection-header`, which Zulip
 * paints with `--color-background` so that it stays opaque while it is stuck
 * to the top of the scrolling list. Transparent would let rows show through
 * it, so it takes the rail's own colour instead.
 */
#left-sidebar .stream-list-subsection-header {
    background-color: var(--denim-rail);
    color: var(--denim-rail-ink-quiet);
}

#left-sidebar .left-sidebar-title,
#left-sidebar .sidebar-heading,
#left-sidebar #streams_header,
#left-sidebar .left-sidebar-navigation-heading-container,
#left-sidebar .showing-condensed-navigation,
#left-sidebar .showing-expanded-navigation {
    background-color: transparent;
}

.app-main .column-left,
.header-main .column-left,
#left-sidebar,
#left-sidebar-navigation-area {
    background-color: var(--denim-rail);
    color: var(--denim-rail-ink);
}

/* Zulip's sidebar variables default to a near-black or an indigo drawn for a
 * white rail, and every one of them disappears into Mattermost's navy — the
 * "create a channel" action was the visible casualty. They are set here rather
 * than on :root because the same names dress the right sidebar, which stays a
 * light surface; custom properties inherit, so scoping them to the rail is
 * enough to reach everything inside it and nothing outside it.
 */
#left-sidebar,
#left-sidebar-navigation-area {
    --color-background-active-narrow-filter: var(--denim-rail-active);
    --color-background-hover-narrow-filter: var(--denim-rail-hover);
    --color-background-opaque-hover-narrow-filter: var(--denim-rail-hover);
    --color-background-opaque-hover-active-narrow-filter: var(--denim-rail-active);
    --color-background-navigation-item-hover: var(--denim-rail-hover);
    --color-background-sidebar-action-hover: var(--denim-rail-hover);
    --color-text-active-narrow-filter: var(--denim-rail-ink);
    --color-text-sidebar-base: var(--denim-rail-ink-quiet);
    --color-text-sidebar-row: var(--denim-rail-ink-quiet);
    --color-text-sidebar-heading: var(--denim-rail-ink-quiet);
    --color-text-sidebar-action-heading: var(--denim-rail-ink-quiet);
    --color-text-sidebar-action-heading-hover: var(--denim-rail-ink);
    --color-unmuted-or-followed-topic-list-item: var(--denim-rail-ink);
    --color-left-sidebar-navigation-icon: var(--denim-rail-ink-quiet);
    --color-left-sidebar-dm-partners-icon: var(--denim-rail-ink-quiet);
    --color-left-sidebar-heads-up-icon: var(--denim-rail-ink-quiet);
    --color-left-sidebar-heads-up-icon-hover: var(--denim-rail-ink);
    --color-left-sidebar-follow-icon-hover: var(--denim-rail-ink);
    --color-topic-indent-border: var(--denim-rail-line);
    --color-border-sidebar-subheader: var(--denim-rail-line);
    --color-shadow-sidebar-row-hover: transparent;
}

/* Mattermost rests its sidebar rows at 64% of the rail's ink and brings only
 * the selected and unread ones up to full white; that is what gives the rail
 * its depth instead of a wall of equally loud labels.
 */
#left-sidebar,
#left-sidebar a,
#left-sidebar .sidebar-topic-name,
#left-sidebar .stream-name,
#left-sidebar .top_left_row a {
    color: var(--denim-rail-ink-quiet);
}

#left-sidebar .active-filter,
#left-sidebar .active-filter a,
#left-sidebar .active-filter .stream-name,
#left-sidebar li.active-sub-filter,
#left-sidebar li.active-sub-filter a,
#left-sidebar .has_unreads,
#left-sidebar .has_unreads a,
#left-sidebar .has_unreads .stream-name {
    color: var(--denim-rail-ink);
}

#left-sidebar h4,
#left-sidebar .sidebar-heading,
#left-sidebar .left-sidebar-title {
    color: var(--denim-rail-ink-quiet);
    /* Mattermost's category header: 12px on a 14px body, semibold, uppercase,
     * tracked out by 0.05em. */
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Rows read as objects you can click, rather than lines of text. */
#left-sidebar .narrow-filter,
#left-sidebar .top_left_row,
#left-sidebar .bottom_left_row,
#left-sidebar-navigation-list li {
    border-radius: var(--denim-radius);
}

#left-sidebar .narrow-filter.active-filter,
#left-sidebar li.active-sub-filter {
    font-weight: 600;
}

/* The search field belongs to the rail, not to the page behind it. */
#left-sidebar input[type="text"],
#left-sidebar .input-element-wrapper {
    background-color: var(--denim-rail-field);
    border-color: transparent;
    color: var(--denim-rail-ink);
    border-radius: var(--denim-radius);
}

/* ---- conversation surface ----------------------------------------------- */
#message_feed_container,
.message-list,
.recipient_row {
    background-color: var(--denim-surface);
}

/* Topic headers stay quiet: they separate, they do not shout. */
.message_header .message-header-contents {
    border-radius: 0;
}

.message_header_stream .message-header-contents,
.message_header_private_message .message-header-contents {
    font-weight: 600;
}

/* Rounded squares rather than circles, which sit better beside square media. */
.message_row .message-avatar img,
.message_row .avatar img,
.user_circle,
#right-sidebar .user-profile-picture img {
    border-radius: 6px;
}

/* ---- compose box --------------------------------------------------------- */
#compose-content,
#compose_controls,
.message_edit_form textarea,
#compose textarea {
    border-radius: var(--denim-radius-large);
}

#compose textarea:focus,
.message_edit_form textarea:focus {
    border-color: var(--denim-accent);
    box-shadow: 0 0 0 3px var(--denim-accent-quiet);
}

/* ---- controls ------------------------------------------------------------ */
button,
.button,
.dropdown-widget-button,
.action-button {
    border-radius: var(--denim-radius);
}

.unread_count {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0;
}

/* Popovers and modals lift off the page rather than sitting flat on it. */
.popover-menu,
.modal__container,
.dropdown-list-container {
    border-radius: var(--denim-radius-large);
    overflow: hidden;
}

/* ---- scrollbars ---------------------------------------------------------- */
.simplebar-scrollbar::before {
    background-color: var(--denim-scrollbar);
    border-radius: 999px;
}

#left-sidebar .simplebar-scrollbar::before {
    background-color: var(--denim-rail-scrollbar);
}

/* ---- Mattermost signatures ----------------------------------------------
 * The active channel in Mattermost is marked by a bar down its left edge
 * rather than by a filled pill, and links and presence dots carry the brand
 * colours rather than Zulip's.
 */
#left-sidebar .narrow-filter.active-filter,
#left-sidebar li.active-sub-filter {
    box-shadow: inset 3px 0 0 var(--denim-rail-active-border);
}

#left-sidebar .left-sidebar-title,
#left-sidebar h4 {
    color: var(--denim-rail-ink-quiet);
    font-size: 0.85em;
    letter-spacing: 0.02em;
}

a,
.message_content a,
.rendered_markdown a {
    color: var(--denim-link);
}

.user_circle_active,
.user-circle-active {
    background: var(--denim-online);
}

.user_circle_idle,
.user-circle-idle {
    background: var(--denim-away);
}

.user_circle_dnd,
.user-circle-dnd {
    background: var(--denim-busy);
}

/* ---- topic headers -------------------------------------------------------
 * Zulip tints the bar above each conversation with that channel's own colour;
 * Mattermost separates conversations with a rule and keeps one reading
 * surface. The tint is not a stylesheet rule at all — Zulip's JS writes
 * `style="background: #f0ead6"` onto every .message-header-contents as it
 * renders the group — so `!important` is the only weight that reaches it.
 * That is also why the earlier rule here appeared to do nothing.
 */
.message_header .message-header-contents {
    background-color: var(--denim-surface) !important;
    border: none;
    /* The rule goes above the header, not below it: it marks where one
     * conversation ends and the next begins, the way Mattermost's date
     * divider does, rather than underlining a label. */
    border-top: 1px solid var(--denim-line);
}

/* The feed's own hairline box, in the one place Zulip writes the colour
 * literally instead of through the variable above. */
.dark-theme:root .message-feed .recipient_row,
.dark-theme:root .message_row,
.color-scheme-automatic:root .message-feed .recipient_row,
.color-scheme-automatic:root .message_row,
.message-feed .recipient_row,
.message_row {
    border-color: transparent;
}

/* Channel colour is likewise written inline onto the hash glyph. Mattermost
 * has no per-channel colour: its icons are one ink at one opacity, which is
 * what lets the unread and mention badges be the only colour in the list.
 */
.message_header .stream-privacy,
.message_header .stream-privacy .zulip-icon,
.message_header .message_label_clickable {
    color: var(--denim-ink-quiet) !important;
}

#left-sidebar .stream-privacy,
#left-sidebar .stream-privacy .zulip-icon {
    color: var(--denim-rail-ink-quiet) !important;
}

#left-sidebar .active-filter .stream-privacy,
#left-sidebar .active-filter .stream-privacy .zulip-icon,
#left-sidebar .has_unreads .stream-privacy,
#left-sidebar .has_unreads .stream-privacy .zulip-icon {
    color: var(--denim-rail-ink) !important;
}

/* ---- message rows --------------------------------------------------------
 * Mattermost gives every post 8px above it and indents the avatar 1.5em from
 * the edge of the list (`.post { padding: 8px 0.5em 0 1.5em }`). Zulip packs
 * them tighter than that: 5px above a sender row, nothing above a follow-up,
 * and a 10px indent. These bring the rhythm across without moving anything.
 */
.message_row .messagebox {
    padding-top: 4px;
    padding-bottom: 4px;
}

.message_row.messagebox-includes-sender .messagebox {
    padding-top: 8px;
}

.message_row .messagebox-content {
    padding-left: 18px;
}