/* zulip-light: visual patch for Zulip (web + desktop app only; mobile is native).
 *
 * Every rule is scoped under html.zl-on (set by zulip-light.js), so the kill
 * switch also removes the CSS. `!important` is used only on the "hide" rules,
 * which must win over Zulip's more specific selectors. Every Zulip selector used here must be listed in
 * SELECTORS in zulip-light.js, so the contract test notices when an upgrade
 * renames it.
 */

/* ------------------------------------------------------------------ palette --
 * 60-30-10: 60% content surface, 30% structure (navbar + sidebars), 10% accent.
 * light-dark() follows Zulip's own theme switch (light, dark, automatic).
 * Change the look by editing these tokens only.
 */
html.zl-on {
    --zl-60: light-dark(#ffffff, #15181d);          /* message area, menus */
    --zl-30: light-dark(#eef1f6, #1d2129);          /* navbar, sidebars, page */
    --zl-30-strong: light-dark(#dfe4ee, #272c36);   /* hover / selected on 30 */
    --zl-10: light-dark(#0f766e, #2dd4bf);          /* accent: active, unread, buttons */
    --zl-10-soft: light-dark(#d5f0ec, #123b37);     /* accent background */
    --zl-on-10: light-dark(#ffffff, #0b1f1d);       /* text on accent */
    --zl-ink: light-dark(#111827, #f3f4f6);         /* main text */
    --zl-ink-muted: light-dark(#4b5563, #a1a8b3);   /* secondary text */
    --zl-line: light-dark(#d6dbe4, #2f3540);        /* the few borders we keep */
    --zl-radius: 12px;
    --zl-raise: 0 1px 2px rgb(16 24 40 / 5%), 0 2px 8px rgb(16 24 40 / 6%);           /* bubbles */
    --zl-raise-strong: 0 2px 4px rgb(16 24 40 / 6%), 0 8px 24px rgb(16 24 40 / 10%);  /* selected */
    --zl-gap: 16px;

    /* Map onto Zulip's variables. */
    --color-background: var(--zl-30);
    --color-background-navbar: var(--zl-60);
    --color-navbar-bottom-border: transparent;
    --color-background-stream-message-content: var(--zl-60);
    --color-background-private-message-content: var(--zl-60);
    --color-background-white-box: var(--zl-60);
    --color-background-recent-view-row: var(--zl-60);
    --color-background-recent-view-row-hover: var(--zl-30);
    --color-background-popover-menu: var(--zl-60);
    --color-background-popover: var(--zl-60);
    --color-background-hover-popover-menu: var(--zl-30);
    --color-background-active-popover-menu: var(--zl-30-strong);
    --color-background-modal: var(--zl-60);
    --color-text-default: var(--zl-ink);
    --color-text-message-default: var(--zl-ink);
    --color-text-message-view-header: var(--zl-ink);
    --color-text-message-header: var(--zl-ink);
    --color-text-sidebar-row: var(--zl-ink);
    --color-text-sidebar-base: var(--zl-ink-muted);
    --color-text-active-narrow-filter: var(--zl-ink);
    --color-background-active-narrow-filter: var(--zl-30-strong);
    --color-background-hover-narrow-filter: var(--zl-30-strong);
    --color-background-navigation-item-hover: var(--zl-30-strong);
    --color-shadow-sidebar-row-hover: transparent;
    --color-border-sidebar: transparent;
    --color-border-sidebar-subheader: transparent;
    --color-left-sidebar-inner-box-shadow: transparent;
    --color-left-sidebar-middle-box-shadow: transparent;
    --color-left-sidebar-outer-box-shadow: transparent;
    --color-left-sidebar-middle-box-shadow-hover: transparent;
    --color-left-sidebar-outer-box-shadow-hover: transparent;
    --color-left-sidebar-direct-messages-bottom-divider: transparent;
    --color-background-unread-counter: var(--zl-10);
    --color-background-unread-counter-normal: var(--zl-10);
    --color-background-unread-counter-prominent: var(--zl-10);
    --color-background-unread-counter-no-alpha: var(--zl-10);
    --color-background-compose-new-message-button: var(--zl-60);
    --color-background-compose-new-message-button-hover: var(--zl-30-strong);
}

html.zl-on .unread_count {
    color: var(--zl-on-10);
}

/* ------------------------------------------------------------- top navbar --
 * Immutable: no per-view title, no search. The location is already shown by the
 * recipient bar at the top of the messages. Search stays on the "/" shortcut.
 */
html.zl-on #message_view_header,
html.zl-on #searchbox {
    display: none !important;
}

/* A real header: its own surface and a soft shadow, anchored full width. */
html.zl-on #navbar-fixed-container {
    background: var(--zl-60);
    box-shadow: 0 1px 0 var(--zl-line), 0 4px 12px rgb(0 0 0 / 6%);
}

html.zl-on #top_navbar {
    background: transparent;
}

/* Right panel (users): hidden, and so is its button (zulip-light.js keeps
 * body.hide-right-sidebar set). */
html.zl-on #userlist-toggle {
    display: none !important;
}

/* Left panel: always open on wide screens, no collapse button. Below 768px
 * Zulip switches to its mobile layout, which we leave alone. */
@media (width >= 768px) {
    /* Invisible, not removed: the logo's alignment depends on its grid cell. */
    html.zl-on .left-sidebar-toggle-button {
        visibility: hidden !important;
        pointer-events: none;
    }
}

/* ----------------------------------------------------------- left sidebar --
 * Mentions and Drafts, then "Direct messages" and "Channels". No filter box,
 * no "Views" heading or other views, no section toggles, no divider. */
html.zl-on #left-sidebar-search,
html.zl-on #views-label-container,
html.zl-on #left-sidebar-navigation-list > .top_left_row:not(.top_left_mentions, .top_left_drafts),
html.zl-on .direct-message-section-bottom-divider-container {
    display: none !important;
}

/* The panel is part of the fixed frame, like the header: own surface, a hairline
 * on its right edge, full height. */
html.zl-on #left-sidebar {
    background: var(--zl-60);
    box-shadow: 1px 0 0 var(--zl-line);
    top: 0;
    bottom: 0;
    height: auto;
}

/* Sticky section headings paint their own (page-coloured) background. */
html.zl-on #left-sidebar .left-sidebar-section-header,
html.zl-on #left-sidebar #left-sidebar-navigation-area {
    background: var(--zl-60);
}

/* The arrows sit in their own grid column: make them invisible rather than
 * removing them, so the headings keep their place. */
html.zl-on #toggle-direct-messages-section-icon,
html.zl-on .stream-list-section-toggle {
    visibility: hidden;
}

/* Headings are no longer clickable (clicking them would collapse the section);
 * the "+ create channel" link inside the heading stays usable. */
html.zl-on #direct-messages-section-header,
html.zl-on .stream-list-subsection-header {
    pointer-events: none;
    margin-top: var(--zl-gap);
}

html.zl-on .stream-list-subsection-header .add-stream-icon-container,
html.zl-on #direct-messages-section-header .left-sidebar-controls {
    pointer-events: auto;
}

html.zl-on #left-sidebar .left-sidebar-title {
    color: var(--zl-ink-muted);
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* Rows: flat, rounded, more air. */
html.zl-on #left-sidebar .bottom_left_row,
html.zl-on #left-sidebar .narrow-filter > .bottom_left_row {
    border-radius: 8px;
}

html.zl-on #stream_filters .narrow-filter,
html.zl-on .dm-list .dm-list-item {
    margin-block: 2px;
}

/* ------------------------------------------------------------ message area --
 * Calm bubbles, in the spirit of Telegram / Linear / iMessage: white cards on
 * the 30 surface, soft elevation and no outlines, generous air, no avatars.
 * Follow-ups from the same sender stack tightly with joined corners. */
html.zl-on .recipient_row {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    margin-bottom: 12px;
}

/* Topic label: quiet text on the page surface, not a coloured band. Zulip
 * sets the channel colour as an inline style, hence !important. The channel
 * colour stays on the # icon. The header itself keeps the page colour so
 * bubbles scrolling under it (it's sticky) stay hidden. */
html.zl-on .message_header {
    box-shadow: none;
    background: var(--zl-30);
}

html.zl-on .message_header .message-header-contents {
    background: transparent !important;
    border: none;
    padding-block: 4px 6px;
}

html.zl-on .message_header .message-header-stream-name,
html.zl-on .message_header .stream-topic-inner {
    color: var(--zl-ink);
}

html.zl-on .message_header .stream_topic_separator,
html.zl-on .message_header .recipient_row_date {
    color: var(--zl-ink-muted);
}

/* Rows: no frame (Zulip draws 1px borders left, right and bottom). */
html.zl-on .message_row {
    background: transparent;
    border-width: 0 !important;  /* Zulip's last-row rule is more specific */
    padding-block: 7px;
    --message-box-avatar-column-width: 0px;
}

/* No avatars: Zulip's generated default avatars can't be told apart from
 * uploaded photos in the page, so all are hidden in the message list. */
html.zl-on .message_row .message-avatar {
    display: none;
}

/* Radii are !important: Zulip reshapes the selected / last message of a group
 * with rules we can't out-specify reliably. */
html.zl-on .message_row .messagebox {
    background: var(--zl-60);
    border-radius: 16px !important;
    box-shadow: var(--zl-raise);
}

html.zl-on .message_row .messagebox-content {
    padding: 12px 18px 12px 20px;
}

/* Follow-up from the same sender: a tight stack, both joining corners
 * tightened, like consecutive bubbles in Telegram. */
html.zl-on .message_row:not(.messagebox-includes-sender) {
    padding-top: 4px;
}

html.zl-on .message_row:has(+ .message_row:not(.messagebox-includes-sender)) {
    padding-bottom: 0;
}

html.zl-on .message_row:not(.messagebox-includes-sender) .messagebox {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

html.zl-on .message_row:has(+ .message_row:not(.messagebox-includes-sender)) .messagebox {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

html.zl-on .message_row:not(.messagebox-includes-sender) .messagebox-content {
    padding-top: 9px;
}

/* No coloured markers: unread state lives in the sidebar counters, and the
 * selected message is shown by lifting it a little higher. */
html.zl-on .message_row .unread_marker {
    visibility: hidden;
}

html.zl-on .message_row.selected_message .messagebox {
    box-shadow: var(--zl-raise-strong);
}

html.zl-on .message_row.selected_message .messagebox-content,
html.zl-on .message_row.selected_message .messagebox {
    outline: none;
}

/* The decorative Zulip logo at both ends of message lists, with its box: the
 * top one otherwise keeps ~50px of empty space above the first message. */
html.zl-on .messages-logo-svg,
html.zl-on .top-messages-logo,
html.zl-on .bottom-messages-logo {
    display: none !important;
}

/* Topic bar: only the "⋮" menu, which already holds edit, resolve, copy link
 * and follow/mute. */
html.zl-on .recipient_bar_controls .on_hover_topic_edit,
html.zl-on .recipient_bar_controls .on_hover_topic_resolve,
html.zl-on .recipient_bar_controls .recipient-bar-copy-link-to-topic,
html.zl-on .recipient_bar_controls .change_visibility_policy {
    display: none !important;
}

html.zl-on .message-list {
    box-sizing: border-box;
    padding-inline: var(--zl-gap) calc(var(--zl-gap) * 1.5);
}

/* Inbox: keep the search field (relabelled by zulip-light.js), drop the
 * "standard view" dropdown. */
html.zl-on #inbox-filter_widget {
    display: none !important;
}

/* Inbox: full width (anchored, not a narrow floating column), one raised card
 * per channel, same language as the message bubbles. */
html.zl-on .inbox-container #inbox-pane #inbox-list {
    max-width: none;
}

html.zl-on #inbox-list {
    padding-right: calc(var(--zl-gap) * 1.5);
}

/* Rows: the right part (follow indicator + action button) takes only its own
 * width, so counters sit at the card's right edge instead of mid-row. */
html.zl-on .inbox-container #inbox-pane #inbox-list .inbox-left-part-wrapper {
    flex: 1 1 auto;
    width: auto;
}

html.zl-on .inbox-container #inbox-pane #inbox-list .inbox-right-part-wrapper {
    flex: 0 0 auto;
    width: auto;
    padding-right: 8px;
}

html.zl-on .inbox-folder-components {
    border: none;
    background: transparent;
}

html.zl-on .inbox-folder-channel {
    background: var(--zl-60);
    border-radius: var(--zl-radius);
    box-shadow: var(--zl-raise);
    overflow: hidden;
    margin-bottom: 12px;
}

/* ------------------------------------------------- menus and tooltips --
 * Solid surfaces, clear edges, generous spacing. */
html.zl-on .tippy-box[data-theme="popover-menu"] {
    background: var(--zl-60);
    border: 1px solid var(--zl-line);
    border-radius: var(--zl-radius);
    box-shadow: 0 12px 32px rgb(0 0 0 / 14%);
}

html.zl-on .popover-menu-list {
    padding: 6px;
}

html.zl-on .popover-menu-list-item .popover-menu-link {
    padding: 10px 14px;
    border-radius: 8px;
}

html.zl-on .popover-menu-list-item + .popover-menu-list-item {
    margin-top: 2px;
}

/* Plain tooltips (hover hints): solid, high contrast. */
html.zl-on .tippy-box:not([data-theme="popover-menu"]) {
    background: var(--zl-ink);
    color: var(--zl-60);
    border-radius: 8px;
    padding: 4px 6px;
}

html.zl-on .tippy-box:not([data-theme="popover-menu"]) .tippy-arrow {
    color: var(--zl-ink);
}

/* Primary buttons use the accent. */
html.zl-on .action-button-primary-brand,
html.zl-on #compose-send-button {
    background-color: var(--zl-10);
    color: var(--zl-on-10);
}