/* Saisit web appearance for upstream Zulip 12.3 (b31982251ff82d0b02e59f63ad21f19204e37aea).
 * Load AFTER the upstream webpack CSS. No DOM or client behavior changes.
 * Brand tokens: main-site/web/assets/tokens.css; logos: branding/manifest.json.
 * Native selectors/variables verified in web/styles/{app_variables,zulip,
 * left_sidebar,message_row,message_header,message_view_header,compose}.css.
 * Keep light/automatic preferences functional; dark is the approved primary.
 * Do not replace sticky-header, message grid, compose positioning, sidebar
 * visibility, responsive breakpoints, hidden states, or semantic error colors.
 */
:root {
    --saisit-bg: light-dark(#FEFDFB, #101B2A);
    --saisit-nav: light-dark(#F8F6F2, #0D1726);
    --saisit-panel: light-dark(#F0EDE8, #162438);
    --saisit-raised: light-dark(#E5EDF9, #21334B);
    --saisit-line: light-dark(#D2C9BB, #3D526C);
    --saisit-ink: light-dark(#172B45, #EFF4FB);
    --saisit-muted: light-dark(#4B5B70, #B6C5D8);
    --saisit-blue: light-dark(#15396C, #6EABEA);
    --saisit-blue-hover: light-dark(#0D2D5B, #7FBEF6);
    --saisit-selected: light-dark(#E5EDF9, #203C5E);
    --saisit-gold: #C7A56D;

    /* Color through native variables so inbox/recent/search/popovers stay coherent. */
    --color-background: var(--saisit-bg);
    --color-background-navbar: var(--saisit-nav);
    --color-navbar-bottom-border: var(--saisit-line);
    --color-text-default: var(--saisit-ink);
    --color-text-message-default: var(--saisit-ink);
    --color-text-message-view-header: var(--saisit-ink);
    --color-text-message-header: var(--saisit-ink);
    --color-text-sidebar-base: var(--saisit-ink);
    --color-text-sidebar-row: var(--saisit-muted);
    --color-text-sidebar-heading: var(--saisit-muted);
    --color-text-sidebar-action-heading: var(--saisit-blue);
    --color-text-sidebar-action-heading-hover: var(--saisit-blue-hover);
    --color-text-active-narrow-filter: var(--saisit-ink);
    --color-background-active-narrow-filter: var(--saisit-selected);
    --color-background-hover-narrow-filter: var(--saisit-raised);
    --color-background-navigation-item-hover: var(--saisit-raised);
    --color-shadow-sidebar-row-hover: var(--saisit-line);
    --color-sidebar-action: var(--saisit-muted);
    --color-sidebar-action-hover: var(--saisit-blue);
    --color-background-sidebar-action-hover: var(--saisit-raised);
    --color-border-sidebar: var(--saisit-line);
    --color-border-sidebar-subheader: var(--saisit-line);
    --color-left-sidebar-direct-messages-bottom-divider: var(--saisit-line);
    --color-message-list-border: transparent;
    --color-message-header-contents-border: var(--saisit-line);
    --color-message-header-contents-border-bottom: var(--saisit-line);
    --color-private-message-header-border: var(--saisit-line);
    --color-private-message-header-border-bottom: var(--saisit-line);
    --color-background-stream-message-content: var(--saisit-bg);
    --color-background-private-message-content: var(--saisit-panel);
    --color-background-private-message-header: var(--saisit-raised);
    --color-message-header-icon-interactive: var(--saisit-muted);
    --color-message-header-icon-non-interactive: var(--saisit-muted);
    --color-text-link: var(--saisit-blue);
    --color-text-link-hover: var(--saisit-blue-hover);
    --color-text-link-decoration: var(--saisit-blue);
    --color-text-link-decoration-hover: var(--saisit-blue-hover);
    --color-background-widget-input: var(--saisit-panel);
    --color-background-widget-button: var(--saisit-panel);
    --color-background-popover: var(--saisit-panel);
    --color-background-popover-menu: var(--saisit-panel);
    --color-border-popover-menu: var(--saisit-line);
    --color-border-popover-menu-separator: var(--saisit-line);
    --color-outline-focus: var(--saisit-blue);
    --color-background-inbox-row: var(--saisit-panel);
    --color-background-inbox-row-hover: var(--saisit-raised);
    --color-compose-box-background: var(--saisit-panel);
    --color-compose-message-content-background: var(--saisit-panel);
    --color-border-compose-content: var(--saisit-line);
    --color-message-content-container-border: var(--saisit-line);
    --color-message-content-container-border-focus: var(--saisit-blue);
    --color-compose-recipient-box-background-color: var(--saisit-panel);
    --color-compose-recipient-box-border-color: var(--saisit-line);
    --color-compose-send-button-background: var(--saisit-blue);
    --color-compose-send-button-background-interactive: var(--saisit-blue-hover);
    --color-compose-send-button-icon-color: light-dark(#FFFFFF, #101B2A);
    --color-compose-send-control-button: var(--saisit-muted);
    --color-compose-send-control-button-interactive: var(--saisit-blue);
    --color-compose-send-button-focus-border: var(--saisit-blue);
    --color-compose-send-button-focus-shadow: var(--saisit-blue);
    --color-compose-collapsed-reply-button-area-background: var(--saisit-panel);
    --color-compose-collapsed-reply-button-area-border: var(--saisit-line);
    --color-compose-embedded-button-text-color: var(--saisit-muted);
    --color-compose-embedded-button-text-color-hover: var(--saisit-ink);
    --color-compose-embedded-button-background-hover: var(--saisit-raised);

    /* Native geometry variables propagate into sticky/sidebar/search offsets. */
    --header-height: 3.25em;
    --header-line-height: 52px;
    --header-padding-bottom: 14px;
    --line-height-sidebar-row-prominent: 2.125em;
    --line-height-sidebar-row: 1.875em;
    --left-sidebar-icon-content-gap: 0.65em;
    --font-variant-sidebar-action-heading: normal;
    --opacity-sidebar-heading: 0.9;
    --opacity-sidebar-heading-icon: 0.75;
}

/* Keep the short-screen/mobile navbar compact and preserve native sizing rules. */
@media (max-height: 600px), (max-width: 767px) {
    :root {
        --header-height: 2.5em;
        --header-line-height: 40px;
        --header-padding-bottom: 10px;
        --line-height-sidebar-row-prominent: 1.875em;
        --line-height-sidebar-row: 1.7142em;
    }
}

/* Native top bar: retain search/help/settings/avatar/sidebar controls. */
#header-container .nav-logo {
    height: 1.625em;
    object-fit: contain;
}
#message_view_header .message-header-navbar-title { font-weight: 600; }
#message_view_header .narrow_description { color: var(--saisit-muted); }

/* Visual nav surface only; the upstream sidebar owns width/scroll/visibility. */
.app-main .column-left .left-sidebar {
    background-color: var(--saisit-nav);
    border-radius: 9px;
}
#left-sidebar .top_left_row,
#left-sidebar .bottom_left_row {
    border-radius: 7px;
}
#stream_filters .active-filter > .bottom_left_row,
#stream_filters .active-sub-filter > .bottom_left_row,
#left-sidebar-navigation-list .selected-home-view {
    box-shadow: inset 3px 0 var(--saisit-gold);
}
#left-sidebar .left-sidebar-title,
#left-sidebar .stream-list-subsection-header {
    font-variant: normal;
    letter-spacing: 0.035em;
    font-weight: 600;
}
#left-sidebar-search { border-radius: 8px; }

/* Keep each native message's grid/controls/selection/edit/media behavior intact. */
#message-lists-container .messagebox { padding-top: 3px; padding-bottom: 3px; }
#message-lists-container .sender_name { font-weight: 600; }
#message-lists-container .sender_name:not(:hover) { color: var(--saisit-ink); }
#message-lists-container .inline_profile_picture { border-radius: 8px; }
#message-lists-container .message_header .message-header-contents {
    border-radius: 8px 8px 0 0;
}

/* Composer keeps native resize, focus, validation, drafts and send semantics. */
#compose-content {
    padding: 8px 8px 10px;
    border-radius: 12px 12px 0 0;
}
#message-content-container { border-radius: 8px; }
#compose .new_message_textarea { padding: 9px 9px 3px; }
#compose .compose-send-or-save-button { border-radius: 7px; }
#legacy-closed-compose-box { border-radius: 9px 9px 0 0; }

/* Public authentication pages use separate portico styles, not app variables.
 * Exact selectors checked in portico_signin.css and anonymous login/reset DOM.
 * Scope by native auth containers; help/docs/administration pages remain native.
 * No form submission, field visibility, validation messages or label geometry changes.
 */
body:has(.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container)) {
    color-scheme: dark;
    background-color: #101B2A;
    color: #EFF4FB;
    --color-link-portico-auth: #6EABEA;
    --color-link-portico-auth-hover: #7FBEF6;
    --color-action-button: #6EABEA;
    --color-action-button-hover: #7FBEF6;
    --color-action-button-active: #6EABEA;
    --color-action-button-subtle-hover: #203C5E;
    --color-action-button-subtle-active: #21334B;
    --color-footer-background: #0D1726;
    --color-links: #6EABEA;
}
.portico-container:has(:is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container)) .white-box {
    background-color: #162438;
    border-color: #3D526C;
    border-radius: 16px;
    box-shadow: 0 18px 60px rgb(5 12 24 / 30%);
}
.portico-container:has(:is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container)) .new-style {
    color: #B6C5D8;
}
.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container) :is(h1, h2, .get-started, .org-header, .organization-name) {
    color: #EFF4FB;
}
.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container) :is(input[type="email"], input[type="text"], input[type="password"]) {
    background-color: #101B2A;
    color: #EFF4FB;
    border-radius: 8px;
}
.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container) :is(input[type="email"], input[type="text"], input[type="password"]):focus {
    outline: 2px solid #6EABEA;
    outline-offset: 2px;
}
.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container) label:not(.text-error):not(.altcha-label) {
    color: #B6C5D8;
}
.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container) button[type="submit"]:not(.anonymous-access-button) {
    color: #101B2A;
    border-radius: 8px;
    font-weight: 600;
}
.portico-container:has(:is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container)) .split-view :is(.left-side, .right-side) {
    border-color: #3D526C;
}
/* Native reset container had a fixed503px width overflowing narrow browsers. */
@media (max-width: 550px) {
    .portico-container .forgot-password-container {
        width: calc(100vw - 32px);
        max-width: 503px;
        box-sizing: border-box;
        padding: 24px;
    }
}

body:has(.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container)) .portico-header {
    background-color: #0D1726;
    box-shadow: inset 0 -1px #3D526C;
}
body:has(.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container)) .portico-header .top-links a {
    color: #B6C5D8;
}
body:has(.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container)) .portico-header .brand-logo path {
    fill: #EFF4FB;
}
body:has(.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container)) .lead h1 {
    color: #EFF4FB;
    font-weight: 500;
}
.portico-container .login-page-container .organization-path { color: #B6C5D8; }
.portico-container .login-page-container .or { color: #B6C5D8; }
.portico-container .login-page-container .or span { background-color: #162438; }
.portico-container .login-page-container .or::before { border-color: #3D526C; }
.portico-container .login-page-container .anonymous-access-button {
    background-color: #162438;
    color: #6EABEA;
    border-radius: 8px;
}
body:has(.portico-container :is(.login-page-container, .forgot-password-container, #password-reset-confirm, .register-page-container)) .portico-header .portico-logo {
    width: auto;
    height: 28px;
    object-fit: contain;
}
@media (max-width: 550px) {
    .portico-container .login-page-container {
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
        padding: 20px;
    }
    .portico-container .login-page-container :is(.right-side .form-inline, .input-box) {
        max-width: 100%;
    }
    .portico-container .login-page-container .input-box :is(input[type="email"], input[type="password"]) {
        width: 100%;
        box-sizing: border-box;
    }
}