/* ============================================================
 * Nextera Zulip Themes — Overlay CSS v2
 * EPIC: Projera #768
 * Themes: Slate (light) + Glass (dark) — selected by Pavel 2026-06-11
 * Activated by JS hook into Zulip native dark-theme class
 * ============================================================ */

/* ---- THEME VARIABLES ---- */
body.nx-slate {
  --nx-bg: #F7F7F5;
  --nx-sidebar-bg: #ECECEA;
  --nx-chat-bg: #FFFFFF;
  --nx-input-bg: #FEFEFE;
  --nx-text-primary: #1A1A1A;
  --nx-text-secondary: #6B6B66;
  --nx-text-tertiary: #9A9A95;
  --nx-accent: #2D5A4E;
  --nx-accent-hover: #224639;
  --nx-accent-text: #FFFFFF;
  --nx-border: #E4E4E7;
  --nx-border-strong: #D4D4D8;
  --nx-active-bg: #E4E4E7;
  --nx-hover-bg: #E8E9E4;
  --nx-mention-bg: rgba(45, 90, 78, 0.12);
  --nx-mention-text: #2D5A4E;
  --nx-code-bg: #ECECEA;
  --nx-folder-label: #6B6B66;
  --nx-unread-dot: #2D5A4E;
}
body.nx-glass {
  --nx-bg: #0F1316;
  --nx-sidebar-bg: #161B1F;
  --nx-chat-bg: #0F1316;
  --nx-input-bg: #1A2024;
  --nx-text-primary: #E8EEF2;
  --nx-text-secondary: #7A8590;
  --nx-text-tertiary: #4E5862;
  --nx-accent: #52B3D4;
  --nx-accent-hover: #6BC5E3;
  --nx-accent-text: #0F1316;
  --nx-border: #1E252B;
  --nx-border-strong: #2A3239;
  --nx-active-bg: #1C2329;
  --nx-hover-bg: #181E22;
  --nx-mention-bg: rgba(82, 179, 212, 0.18);
  --nx-mention-text: #52B3D4;
  --nx-code-bg: #1A2024;
  --nx-folder-label: #7A8590;
  --nx-unread-dot: #52B3D4;
}

/* ---- BASE BACKGROUNDS ---- */
body.nx-slate, body.nx-slate html,
body.nx-glass, body.nx-glass html {
  background-color: var(--nx-bg) !important;
  color: var(--nx-text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body[class*="nx-"] .app,
body[class*="nx-"] .app-main,
body[class*="nx-"] #main_div,
body[class*="nx-"] .column-middle,
body[class*="nx-"] .column-middle-inner {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-primary) !important;
}

/* ---- TOP NAVBAR ---- */
body[class*="nx-"] #navbar,
body[class*="nx-"] #navbar-fixed-container,
body[class*="nx-"] .header,
body[class*="nx-"] .top-navbar,
body[class*="nx-"] #navbar_alerts_wrapper,
body[class*="nx-"] .navbar-fixed-top {
  background-color: var(--nx-sidebar-bg) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
}

body[class*="nx-"] #navbar a,
body[class*="nx-"] #navbar .nav-list-icon {
  color: var(--nx-text-secondary) !important;
}

body[class*="nx-"] #searchbox_form,
body[class*="nx-"] #search_query,
body[class*="nx-"] .input-append {
  background-color: var(--nx-input-bg) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
}

/* ---- LEFT SIDEBAR ---- */
body[class*="nx-"] #left-sidebar,
body[class*="nx-"] .left-sidebar,
body[class*="nx-"] #left-sidebar-container,
body[class*="nx-"] #streams_header,
body[class*="nx-"] #global_filters,
body[class*="nx-"] #stream_filters,
body[class*="nx-"] #left-sidebar-navigation-area,
body[class*="nx-"] #left-sidebar-navigation-area-condensed,
body[class*="nx-"] .stream-list-filter-container {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-secondary) !important;
  border-color: var(--nx-border) !important;
}

body[class*="nx-"] #streams_header .title,
body[class*="nx-"] .stream-list-section-title,
body[class*="nx-"] .folder-name,
body[class*="nx-"] .pinned-section-title,
body[class*="nx-"] #stream_filters .stream-folder-header {
  color: var(--nx-folder-label) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body[class*="nx-"] #stream_filters li,
body[class*="nx-"] #global_filters li,
body[class*="nx-"] .stream-row,
body[class*="nx-"] .topic-row {
  color: var(--nx-text-secondary) !important;
  border: none !important;
}

body[class*="nx-"] #stream_filters li:hover,
body[class*="nx-"] .stream-row:hover,
body[class*="nx-"] .topic-row:hover {
  background-color: var(--nx-hover-bg) !important;
}

body[class*="nx-"] #stream_filters li.active-filter,
body[class*="nx-"] .stream-row.active-filter,
body[class*="nx-"] .topic-row.active-filter,
body[class*="nx-"] li.active-sub-filter,
body[class*="nx-"] .active-filter {
  background-color: var(--nx-active-bg) !important;
  color: var(--nx-text-primary) !important;
  font-weight: 600 !important;
}

body[class*="nx-"] .stream-name,
body[class*="nx-"] .stream-list .stream-row .stream-name,
body[class*="nx-"] #stream_filters .stream-name {
  color: inherit !important;
}

body[class*="nx-"] .unread_count {
  background-color: var(--nx-accent) !important;
  color: var(--nx-accent-text) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 1px 6px !important;
}

body[class*="nx-"] .stream-privacy-icon,
body[class*="nx-"] .stream-list .stream-privacy {
  opacity: 0.6;
}

/* ---- MESSAGE FEED ---- */
body[class*="nx-"] #message_feed_container,
body[class*="nx-"] .messagebox-content,
body[class*="nx-"] .message_table {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-primary) !important;
}

body[class*="nx-"] .messagebox {
  background-color: var(--nx-chat-bg) !important;
  border: none !important;
}

body[class*="nx-"] .recipient_row,
body[class*="nx-"] .recipient_row_date {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-secondary) !important;
  border-color: var(--nx-border) !important;
}

body[class*="nx-"] .stream_label,
body[class*="nx-"] .stream_topic,
body[class*="nx-"] .narrows_panel a,
body[class*="nx-"] .message_header .message_header_contents {
  color: var(--nx-text-primary) !important;
}

body[class*="nx-"] .sender_name,
body[class*="nx-"] .sender_name-in-status-message,
body[class*="nx-"] .inline_sender {
  color: var(--nx-text-primary) !important;
  font-weight: 600 !important;
}

body[class*="nx-"] .message_time {
  color: var(--nx-text-tertiary) !important;
  font-size: 11px !important;
}

body[class*="nx-"] .message_content,
body[class*="nx-"] .rendered_markdown {
  color: var(--nx-text-primary) !important;
}

body[class*="nx-"] .user_mention,
body[class*="nx-"] .user-mention,
body[class*="nx-"] .topic_mention,
body[class*="nx-"] .group_mention {
  background-color: var(--nx-mention-bg) !important;
  color: var(--nx-mention-text) !important;
  font-weight: 500 !important;
  border-radius: 3px !important;
  padding: 0 4px !important;
}

body[class*="nx-"] code,
body[class*="nx-"] .rendered_markdown code,
body[class*="nx-"] tt {
  background-color: var(--nx-code-bg) !important;
  color: var(--nx-text-primary) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
  font-size: 0.92em !important;
}

body[class*="nx-"] pre,
body[class*="nx-"] .rendered_markdown pre {
  background-color: var(--nx-code-bg) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
}

body[class*="nx-"] .stream-link,
body[class*="nx-"] .message_content a,
body[class*="nx-"] .rendered_markdown a {
  color: var(--nx-accent) !important;
  text-decoration: none !important;
}

body[class*="nx-"] .stream-link:hover,
body[class*="nx-"] .message_content a:hover {
  color: var(--nx-accent-hover) !important;
  text-decoration: underline !important;
}

body[class*="nx-"] .avatar img,
body[class*="nx-"] .message_avatar img,
body[class*="nx-"] .inline_profile_picture {
  border-radius: 6px !important;
}

/* ---- COMPOSE BOX ---- */
body[class*="nx-"] #compose,
body[class*="nx-"] #compose_container,
body[class*="nx-"] .compose_table,
body[class*="nx-"] #compose-content {
  background-color: var(--nx-chat-bg) !important;
  border-top: 1px solid var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
}

body[class*="nx-"] #compose-textarea,
body[class*="nx-"] .compose-textarea,
body[class*="nx-"] #stream_message_recipient_topic,
body[class*="nx-"] #stream_message_recipient_stream,
body[class*="nx-"] #private_message_recipient {
  background-color: var(--nx-input-bg) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
  border-radius: 6px !important;
}

body[class*="nx-"] #compose-textarea::placeholder {
  color: var(--nx-text-tertiary) !important;
}

/* ---- BUTTONS ---- */
body[class*="nx-"] #compose-send-button,
body[class*="nx-"] .compose-send,
body[class*="nx-"] button.compose-send,
body[class*="nx-"] .send-status-icon {
  background-color: var(--nx-accent) !important;
  color: var(--nx-accent-text) !important;
  border-color: var(--nx-accent) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}

body[class*="nx-"] #compose-send-button:hover {
  background-color: var(--nx-accent-hover) !important;
  border-color: var(--nx-accent-hover) !important;
}

body[class*="nx-"] .btn-primary,
body[class*="nx-"] button.primary,
body[class*="nx-"] input[type="submit"] {
  background-color: var(--nx-accent) !important;
  color: var(--nx-accent-text) !important;
  border-color: var(--nx-accent) !important;
}

/* ---- RIGHT SIDEBAR ---- */
body[class*="nx-"] #right-sidebar,
body[class*="nx-"] .right-sidebar,
body[class*="nx-"] #userlist-header,
body[class*="nx-"] #user-list,
body[class*="nx-"] #user_presences {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-secondary) !important;
  border-color: var(--nx-border) !important;
}

body[class*="nx-"] #user-list .user_sidebar_entry .user-presence-link,
body[class*="nx-"] #userlist-header h4 {
  color: var(--nx-text-secondary) !important;
}

/* ---- MODALS / DROPDOWNS ---- */
body[class*="nx-"] .modal__container,
body[class*="nx-"] .modal__content,
body[class*="nx-"] .micromodal .modal__container,
body[class*="nx-"] .popover-menu,
body[class*="nx-"] .dropdown-menu,
body[class*="nx-"] .tippy-box {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* ---- SCROLLBARS (subtle) ---- */
body[class*="nx-"] ::-webkit-scrollbar { width: 8px; height: 8px; }
body[class*="nx-"] ::-webkit-scrollbar-track { background: transparent; }
body[class*="nx-"] ::-webkit-scrollbar-thumb {
  background-color: var(--nx-border-strong);
  border-radius: 4px;
}
body[class*="nx-"] ::-webkit-scrollbar-thumb:hover {
  background-color: var(--nx-text-tertiary);
}

/* ---- BORDERS ---- */
body[class*="nx-"] hr,
body[class*="nx-"] .divider,
body[class*="nx-"] .topic-list-separator {
  border-color: var(--nx-border) !important;
}

/* ---- INPUT FIELDS GENERIC ---- */
body[class*="nx-"] input[type="text"],
body[class*="nx-"] input[type="email"],
body[class*="nx-"] input[type="password"],
body[class*="nx-"] input[type="search"],
body[class*="nx-"] textarea,
body[class*="nx-"] select {
  background-color: var(--nx-input-bg) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
}

/* ============================================================
 * v3 — Aggressive dark-theme hole-plugging (Pavel feedback 2026-06-11)
 * Use html.dark-theme + body.nx-glass for max specificity
 * ============================================================ */

/* Force everything to Glass bg when in dark mode */
html.dark-theme,
html.dark-theme body,
html.dark-theme body.nx-glass,
html.dark-theme #app,
html.dark-theme #main_div,
html.dark-theme .app,
html.dark-theme .app-main,
html.dark-theme .column-middle,
html.dark-theme .column-middle-inner {
  background-color: var(--nx-chat-bg, #0F1316) !important;
  color: var(--nx-text-primary, #E8EEF2) !important;
}

/* ---- TABLES (markdown) ---- */
body[class*="nx-"] table,
body[class*="nx-"] .rendered_markdown table,
body[class*="nx-"] .message_content table {
  background-color: var(--nx-chat-bg) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
  border-collapse: collapse !important;
}
body[class*="nx-"] table th,
body[class*="nx-"] .rendered_markdown table th {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-primary) !important;
  border: 1px solid var(--nx-border) !important;
  padding: 8px 12px !important;
}
body[class*="nx-"] table td,
body[class*="nx-"] .rendered_markdown table td {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-primary) !important;
  border: 1px solid var(--nx-border) !important;
  padding: 6px 10px !important;
}
body[class*="nx-"] table tr:nth-child(even) td,
body[class*="nx-"] .rendered_markdown table tr:nth-child(even) td {
  background-color: var(--nx-hover-bg) !important;
}

/* ---- DATE DIVIDER ("Сегодня") ---- */
body[class*="nx-"] .date_row,
body[class*="nx-"] .recipient_row_date,
body[class*="nx-"] .date_unread_marker,
body[class*="nx-"] .recipient_row .recipient_row_date,
body[class*="nx-"] .unread_marker {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-tertiary) !important;
  border-color: var(--nx-border) !important;
}

/* ---- SHOW MORE / EXPAND BUTTONS ---- */
body[class*="nx-"] .show_more_messages,
body[class*="nx-"] button.show_more_messages,
body[class*="nx-"] .message_expander,
body[class*="nx-"] .show-more-button,
body[class*="nx-"] .show_more,
body[class*="nx-"] .read_more,
body[class*="nx-"] .copy_paste_container,
body[class*="nx-"] .reaction_button {
  background-color: var(--nx-active-bg) !important;
  color: var(--nx-text-primary) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 6px !important;
}
body[class*="nx-"] .show_more_messages:hover,
body[class*="nx-"] .show_more:hover {
  background-color: var(--nx-hover-bg) !important;
  color: var(--nx-accent) !important;
}

/* ---- MESSAGE ACTION ICONS (star/bookmark/more) ---- */
body[class*="nx-"] .message_controls,
body[class*="nx-"] .actions_hover,
body[class*="nx-"] .star_container,
body[class*="nx-"] .message_edit_notice,
body[class*="nx-"] .message-list-row .message_controls i {
  color: var(--nx-text-tertiary) !important;
}
body[class*="nx-"] .star,
body[class*="nx-"] .star.empty_star,
body[class*="nx-"] .fa-star,
body[class*="nx-"] .fa-ellipsis-h,
body[class*="nx-"] .fa-clipboard {
  color: var(--nx-text-tertiary) !important;
}
body[class*="nx-"] .star.icon-vector-star,
body[class*="nx-"] .starred .star {
  color: var(--nx-accent) !important;
}

/* ---- NARROW HEADER / SUB-HEADER ---- */
body[class*="nx-"] .message_header_stream,
body[class*="nx-"] .message_header_private_message,
body[class*="nx-"] .message_header,
body[class*="nx-"] .narrow_navbar,
body[class*="nx-"] .narrow_to_compose_recipients {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* ---- BLOCKQUOTE ---- */
body[class*="nx-"] blockquote,
body[class*="nx-"] .message_content blockquote,
body[class*="nx-"] .rendered_markdown blockquote {
  background-color: var(--nx-hover-bg) !important;
  border-left: 3px solid var(--nx-accent) !important;
  color: var(--nx-text-secondary) !important;
  padding-left: 12px !important;
}

/* ---- HORIZONTAL RULE ---- */
body[class*="nx-"] hr,
body[class*="nx-"] .message_content hr {
  border-color: var(--nx-border) !important;
}

/* ---- EMOJI REACTIONS ---- */
body[class*="nx-"] .message_reactions .reaction_button,
body[class*="nx-"] .message_reaction,
body[class*="nx-"] .reactions {
  background-color: var(--nx-hover-bg) !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
}
body[class*="nx-"] .message_reaction.reacted {
  background-color: var(--nx-mention-bg) !important;
  border-color: var(--nx-accent) !important;
  color: var(--nx-mention-text) !important;
}

/* ---- MESSAGE EDIT / DELETE NOTICES ---- */
body[class*="nx-"] .edited_notice,
body[class*="nx-"] .message_edit_notice {
  color: var(--nx-text-tertiary) !important;
  font-size: 11px !important;
}

/* ---- COMPOSE EXTRA AGGRESSIVE ---- */
html.dark-theme body.nx-glass #compose,
html.dark-theme body.nx-glass #compose_container,
html.dark-theme body.nx-glass .compose_table,
html.dark-theme body.nx-glass #compose-content,
html.dark-theme body.nx-glass #compose-textarea,
html.dark-theme body.nx-glass .compose-content {
  background-color: var(--nx-input-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* ---- LOADING SPINNER ---- */
body[class*="nx-"] .loading_indicator,
body[class*="nx-"] #loading_older_messages_indicator,
body[class*="nx-"] .loading-state {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-secondary) !important;
}

/* ---- POWERED-BY / FOOTER ---- */
body[class*="nx-"] .footer,
body[class*="nx-"] .footer-wrap {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-tertiary) !important;
}

/* ---- ALERTS & NOTIFICATIONS ---- */
body[class*="nx-"] .alert,
body[class*="nx-"] .alert-info,
body[class*="nx-"] #compose-error-msg,
body[class*="nx-"] .alert-notification {
  background-color: var(--nx-active-bg) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
}

/* ---- FALLBACK: any leftover white/dark backgrounds on direct children of message feed ---- */
html.dark-theme body.nx-glass #message_feed_container > div,
html.dark-theme body.nx-glass #message_feed_container .recipient_row,
html.dark-theme body.nx-glass .message_row {
  background-color: var(--nx-chat-bg) !important;
}

/* ---- COMPOSE SEND ICON (paper plane) ---- */
body[class*="nx-"] #compose-send-button svg,
body[class*="nx-"] #compose-send-button i,
body[class*="nx-"] .compose-send i {
  color: var(--nx-accent-text) !important;
  fill: var(--nx-accent-text) !important;
}

/* ============================================================
 * v4 — Pavel Slate feedback 2026-06-12: 3 specific holes
 * 1. compose idle row "Написать #..." — pinkish beige
 * 2. top stream header — beige bg
 * 3. tooltips (tippy.js) — light-on-light unreadable
 * ============================================================ */

/* ---- 1. COMPOSE IDLE ROW ("Написать #channel > topic") ---- */
body[class*="nx-"] .compose-recipient-row,
body[class*="nx-"] #compose-recipient-box,
body[class*="nx-"] .compose-recipient,
body[class*="nx-"] #compose-recipient-input,
body[class*="nx-"] .messagebox-compose-area,
body[class*="nx-"] #message-edit-content,
body[class*="nx-"] #compose_select_recipient_widget,
body[class*="nx-"] #compose_top,
body[class*="nx-"] #compose_recipient_box,
body[class*="nx-"] .new-conversation-button,
body[class*="nx-"] #new_conversation_button,
body[class*="nx-"] .compose-recipient .pill-container,
body[class*="nx-"] .non-collapsed-stream-name,
body[class*="nx-"] .compose-area {
  background-color: var(--nx-input-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

body[class*="nx-"] .new-conversation-button,
body[class*="nx-"] #new_conversation_button {
  color: var(--nx-accent) !important;
  font-weight: 500 !important;
}

/* ---- 2. TOP STREAM HEADER (#message_view_header) ---- */
body[class*="nx-"] #message_view_header,
body[class*="nx-"] #message_view_header_container,
body[class*="nx-"] .message_view_header,
body[class*="nx-"] #navbar_alerts_wrapper,
body[class*="nx-"] .recipient-row-stream-info,
body[class*="nx-"] .message-recipient-row,
body[class*="nx-"] .stream-info-bar,
body[class*="nx-"] .narrow_title,
body[class*="nx-"] .message_header_stream .message-header-contents,
body[class*="nx-"] .message_header_private_message .message-header-contents {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

body[class*="nx-"] #message_view_header .stream-name,
body[class*="nx-"] #message_view_header .stream-description,
body[class*="nx-"] .narrow_description,
body[class*="nx-"] #navbar .stream-description {
  color: var(--nx-text-primary) !important;
}

body[class*="nx-"] #message_view_header .stream-privacy {
  color: var(--nx-text-secondary) !important;
}

/* Search box inside stream header */
body[class*="nx-"] #searchbox,
body[class*="nx-"] #searchbox_form,
body[class*="nx-"] #search_query,
body[class*="nx-"] .search-icon,
body[class*="nx-"] #navbar #searchbox_form,
body[class*="nx-"] .input-append {
  background-color: var(--nx-input-bg) !important;
  border-color: var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
}

body[class*="nx-"] #search_query::placeholder,
body[class*="nx-"] #compose-recipient-input::placeholder {
  color: var(--nx-text-tertiary) !important;
}

/* ---- 3. TOOLTIPS (tippy.js) ---- */
body[class*="nx-"] .tippy-box,
body[class*="nx-"] .tippy-box[data-theme],
body[class*="nx-"] .tippy-box[data-theme~="light"],
body[class*="nx-"] .tippy-box[data-theme~="light-border"],
body[class*="nx-"] .tippy-content,
body[class*="nx-"] .simplebar-content > .tippy-content {
  background-color: var(--nx-tooltip-bg) !important;
  color: var(--nx-tooltip-text) !important;
  border: 1px solid var(--nx-border-strong) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
}

body[class*="nx-"] .tippy-box .tippy-arrow,
body[class*="nx-"] .tippy-box[data-theme~="light"] .tippy-arrow,
body[class*="nx-"] .tippy-box[data-theme~="light-border"] .tippy-arrow {
  color: var(--nx-tooltip-bg) !important;
}

/* Keyboard shortcut hint inside tooltip (the "Return" box) */
body[class*="nx-"] .tippy-content kbd,
body[class*="nx-"] .tippy-content .hotkey-hint,
body[class*="nx-"] kbd {
  background-color: var(--nx-active-bg) !important;
  color: var(--nx-text-primary) !important;
  border: 1px solid var(--nx-border-strong) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
}

/* Tooltip text inside */
body[class*="nx-"] .tippy-content p,
body[class*="nx-"] .tippy-content span,
body[class*="nx-"] .tippy-content div {
  color: var(--nx-tooltip-text) !important;
}

/* ---- POPOVERS (autocomplete dropdowns) ---- */
body[class*="nx-"] .popover,
body[class*="nx-"] .popover-content,
body[class*="nx-"] .typeahead.dropdown-menu,
body[class*="nx-"] .typeahead,
body[class*="nx-"] .dropdown-menu,
body[class*="nx-"] #emoji_picker_popover,
body[class*="nx-"] .micromodal-content {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-primary) !important;
  border: 1px solid var(--nx-border) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

body[class*="nx-"] .typeahead li > a,
body[class*="nx-"] .dropdown-menu li > a {
  color: var(--nx-text-primary) !important;
}

body[class*="nx-"] .typeahead li.active > a,
body[class*="nx-"] .typeahead li > a:hover,
body[class*="nx-"] .dropdown-menu li.active > a,
body[class*="nx-"] .dropdown-menu li > a:hover {
  background-color: var(--nx-hover-bg) !important;
  color: var(--nx-text-primary) !important;
}

/* ---- TOOLTIP VARIABLES per theme ---- */
body.nx-slate {
  --nx-tooltip-bg: #FFFFFF;
  --nx-tooltip-text: #1A1A1A;
}
body.nx-glass {
  --nx-tooltip-bg: #1A2024;
  --nx-tooltip-text: #E8EEF2;
}

/* ============================================================
 * v5 — Glass dark theme deep polish (Pavel feedback 2026-06-12)
 * - softer text color (not white, like sidebar)
 * - cursor caret visible
 * - remove lime green focus outline
 * - right sidebar section headers
 * - top channel header in dark
 * - settings theme switcher row
 * ============================================================ */

/* ---- PALETTE OVERRIDE: softer text in Glass ---- */
body.nx-glass {
  --nx-text-primary: #9AA7B3;     /* was #E8EEF2; now muted blue-grey, как sidebar */
  --nx-text-secondary: #7A8590;
  --nx-text-tertiary: #4E5862;
  --nx-text-headline: #C5CFD8;    /* slightly brighter for headings/sender names */
}

/* Allow sender names + headings to be a touch brighter than body */
html.dark-theme body.nx-glass .sender_name,
html.dark-theme body.nx-glass .stream-name,
html.dark-theme body.nx-glass h1,
html.dark-theme body.nx-glass h2,
html.dark-theme body.nx-glass h3,
html.dark-theme body.nx-glass .narrow_title,
html.dark-theme body.nx-glass .message_header_stream .stream_label {
  color: var(--nx-text-headline) !important;
}

/* ---- 1. CURSOR CARET VISIBLE ---- */
body[class*="nx-"] input,
body[class*="nx-"] textarea,
body[class*="nx-"] [contenteditable="true"],
body[class*="nx-"] #compose-textarea,
body[class*="nx-"] #search_query,
body[class*="nx-"] #compose-recipient-input,
body[class*="nx-"] .ProseMirror {
  caret-color: var(--nx-accent) !important;
}

/* ---- 2. REMOVE LIME GREEN FOCUS OUTLINE ---- */
/* Old /login/ brand или Zulip dev style — override completely */
body[class*="nx-"] #compose,
body[class*="nx-"] #compose:focus,
body[class*="nx-"] #compose:focus-within,
body[class*="nx-"] #compose-textarea,
body[class*="nx-"] #compose-textarea:focus,
body[class*="nx-"] #compose-content,
body[class*="nx-"] #compose-content:focus-within,
body[class*="nx-"] .messagebox-content textarea,
body[class*="nx-"] .messagebox-content textarea:focus,
body[class*="nx-"] #stream_message_recipient_topic,
body[class*="nx-"] #stream_message_recipient_topic:focus,
body[class*="nx-"] textarea,
body[class*="nx-"] textarea:focus,
body[class*="nx-"] input:focus,
body[class*="nx-"] input:focus-within,
body[class*="nx-"] .ProseMirror,
body[class*="nx-"] .ProseMirror:focus,
body[class*="nx-"] .ProseMirror:focus-within {
  outline: none !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  border-color: var(--nx-border) !important;
}

body[class*="nx-"] #compose-textarea:focus,
body[class*="nx-"] input:focus {
  border-color: var(--nx-accent) !important;
}

/* Override any green/lime references coming from older brand CSS */
body[class*="nx-"] [style*="lime"],
body[class*="nx-"] [style*="green"]:not(.unread_count) {
  outline: none !important;
}

/* ---- 3. RIGHT SIDEBAR SECTION HEADERS ---- */
/* "ЭТА БЕСЕДА (1)", "ЭТОТ КАНАЛ (12)", "ДРУГИЕ (124)", "ПРИГЛАСИТЬ В ОРГАНИЗАЦИЮ" */
body[class*="nx-"] #userlist-header,
body[class*="nx-"] #userlist-title-area,
body[class*="nx-"] #user_presences > .group-list-title,
body[class*="nx-"] .right-sidebar-title,
body[class*="nx-"] .user-list-section-header,
body[class*="nx-"] .user-list-title,
body[class*="nx-"] #user_filter_input,
body[class*="nx-"] #invite-user-link,
body[class*="nx-"] .narrow-or-filter,
body[class*="nx-"] .right-sidebar-section-title,
body[class*="nx-"] .right-sidebar-items-header,
body[class*="nx-"] .group-pms-section,
body[class*="nx-"] #buddy-list-users-matching-view,
body[class*="nx-"] #buddy-list-other-users,
body[class*="nx-"] #buddy-list-users-matching-view-section-heading,
body[class*="nx-"] #buddy-list-other-users-section-heading,
body[class*="nx-"] .right-sidebar h4 {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-folder-label) !important;
  border-color: var(--nx-border) !important;
}

body[class*="nx-"] .right-sidebar .user_sidebar_entry,
body[class*="nx-"] .right-sidebar .user-name,
body[class*="nx-"] .user_presences li {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-primary) !important;
}

body[class*="nx-"] .right-sidebar a,
body[class*="nx-"] #invite-user-link,
body[class*="nx-"] .right-sidebar .invite-user-link {
  color: var(--nx-accent) !important;
}

/* ---- 4. TOP CHANNEL HEADER (still cream in dark) ---- */
html.dark-theme body.nx-glass #message_view_header,
html.dark-theme body.nx-glass #message_view_header_container,
html.dark-theme body.nx-glass .message_view_header,
html.dark-theme body.nx-glass .navbar-info-bar,
html.dark-theme body.nx-glass .channel-info-bar,
html.dark-theme body.nx-glass .navbar_top,
html.dark-theme body.nx-glass #navbar-top,
html.dark-theme body.nx-glass #navbar > * {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* ---- 5. SETTINGS PANEL — theme switcher row ---- */
body[class*="nx-"] .modal__container,
body[class*="nx-"] .modal__content,
body[class*="nx-"] .micromodal-overlay,
body[class*="nx-"] #settings_overlay_container,
body[class*="nx-"] .settings-content,
body[class*="nx-"] .settings-section,
body[class*="nx-"] .tab-data,
body[class*="nx-"] .org-settings-list,
body[class*="nx-"] .table-striped tbody tr,
body[class*="nx-"] .table-striped tbody td,
body[class*="nx-"] .gear-menu-content,
body[class*="nx-"] .personal-menu-content,
body[class*="nx-"] .sidebar-popover-menu-container {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* Theme/color scheme button group ("monitor / sun / moon" row) */
body[class*="nx-"] .color-scheme-button-group,
body[class*="nx-"] .color-scheme-toggle,
body[class*="nx-"] .input-group.color-scheme,
body[class*="nx-"] .color-scheme-controls,
body[class*="nx-"] .colorscheme-toggle,
body[class*="nx-"] .settings-radio-input-parent,
body[class*="nx-"] .button-group,
body[class*="nx-"] .tab-picker,
body[class*="nx-"] .toggle,
body[class*="nx-"] .switch {
  background-color: var(--nx-active-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

body[class*="nx-"] .color-scheme-button-group button,
body[class*="nx-"] .color-scheme-toggle button,
body[class*="nx-"] .button-group button,
body[class*="nx-"] .tab-picker button,
body[class*="nx-"] .settings-radio-input-parent label {
  background-color: transparent !important;
  color: var(--nx-text-secondary) !important;
  border-color: var(--nx-border) !important;
}

body[class*="nx-"] .color-scheme-button-group button.active,
body[class*="nx-"] .color-scheme-toggle button.active,
body[class*="nx-"] .button-group button.active,
body[class*="nx-"] .tab-picker button.active,
body[class*="nx-"] .settings-radio-input-parent input:checked + label {
  background-color: var(--nx-active-bg) !important;
  color: var(--nx-accent) !important;
}

/* ---- 6. BLACK-ON-DARK fixes (forced overrides on Zulip native dark text) ---- */
html.dark-theme body.nx-glass *,
html.dark-theme body.nx-glass .message_content *,
html.dark-theme body.nx-glass .message_table *,
html.dark-theme body.nx-glass .rendered_markdown * {
  /* Inherit our palette unless explicitly overridden above */
}

html.dark-theme body.nx-glass p,
html.dark-theme body.nx-glass span,
html.dark-theme body.nx-glass div,
html.dark-theme body.nx-glass li,
html.dark-theme body.nx-glass td,
html.dark-theme body.nx-glass th,
html.dark-theme body.nx-glass strong,
html.dark-theme body.nx-glass em,
html.dark-theme body.nx-glass label,
html.dark-theme body.nx-glass small {
  color: inherit !important;
}

/* Catch black text from Zulip's color: #000 or #1f1f1f sources */
html.dark-theme body.nx-glass [style*="color: #000"],
html.dark-theme body.nx-glass [style*="color:#000"],
html.dark-theme body.nx-glass [style*="color: black"],
html.dark-theme body.nx-glass [style*="color:black"] {
  color: var(--nx-text-primary) !important;
}

/* ---- 7. UNREAD COUNT в правом sidebar (cyan kapsule) ---- */
body[class*="nx-"] .right-sidebar .unread_count,
body[class*="nx-"] #user_presences .unread_count {
  background-color: var(--nx-accent) !important;
  color: var(--nx-accent-text) !important;
}

/* ---- 8. SCROLLBAR в dark — едва видим ---- */
html.dark-theme body.nx-glass ::-webkit-scrollbar-thumb {
  background-color: rgba(122, 133, 144, 0.3) !important;
}
html.dark-theme body.nx-glass ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(122, 133, 144, 0.5) !important;
}

/* ---- 9. LEFT SIDEBAR search input «Фильтр левой панели» ---- */
body[class*="nx-"] #stream_filters_search,
body[class*="nx-"] #left-sidebar-filter,
body[class*="nx-"] .stream-list-filter-container input,
body[class*="nx-"] #user_filter_input {
  background-color: var(--nx-input-bg) !important;
  color: var(--nx-text-primary) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 6px !important;
  caret-color: var(--nx-accent) !important;
}

/* ---- 10. INVITE LINK at bottom of right sidebar ---- */
body[class*="nx-"] #invite-user-link,
body[class*="nx-"] .invite-user-link,
body[class*="nx-"] a[href*="invite"] {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-accent) !important;
}

/* ============================================================
 * v6 — Kill the lime green focus outline globally (Pavel 2026-06-12)
 * Source: /zulip-nextera.css legacy `*:focus-visible { outline: 2px solid #4CE41E !important }`
 * Replacement: subtle border-color shift on focused inputs only
 * ============================================================ */

body[class*="nx-"] *:focus,
body[class*="nx-"] *:focus-visible,
body[class*="nx-"] *:focus-within {
  outline: none !important;
  outline-color: transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  outline-offset: 0 !important;
}

/* Accessibility: keep focus indication ONLY на интерактивных inputs/buttons */
body[class*="nx-"] input:focus-visible,
body[class*="nx-"] textarea:focus-visible,
body[class*="nx-"] select:focus-visible,
body[class*="nx-"] [contenteditable="true"]:focus-visible,
body[class*="nx-"] .ProseMirror:focus-visible,
body[class*="nx-"] button:focus-visible,
body[class*="nx-"] a:focus-visible {
  outline: 1px solid var(--nx-accent) !important;
  outline-offset: 1px !important;
}

/* Compose area focus — subtle border lift instead of outline */
body[class*="nx-"] #compose:focus-within,
body[class*="nx-"] #compose-content:focus-within,
body[class*="nx-"] .messagebox-content:focus-within {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: var(--nx-border) !important;
}

/* ============================================================
 * v7 — Hunt beige leaks in dark (Pavel 2026-06-12 screenshot)
 * Approach: override Zulip 11 native CSS vars + broad catchments
 * Cream/beige came from: search box, top-right toolbar, topic-list
 *   dropdown («ETM Добавить описание»), empty-narrow footer buttons
 *   («Создать сообщение / Начать новую беседу»), 'Стандартный вид'
 * ============================================================ */

/* ---- 1. Override Zulip 11 native CSS vars in dark ---- */
html.dark-theme body.nx-glass {
  --color-background: var(--nx-chat-bg) !important;
  --color-background-modal: var(--nx-sidebar-bg) !important;
  --color-background-popover-menu: var(--nx-sidebar-bg) !important;
  --color-background-active-popover-menu: var(--nx-hover-bg) !important;
  --color-background-hover-popover-menu: var(--nx-hover-bg) !important;
  --color-background-modal-close-button-hover: var(--nx-hover-bg) !important;
  --color-text-default: var(--nx-text-primary) !important;
  --color-links: var(--nx-accent) !important;
  --color-border-modal-footer: var(--nx-border) !important;
  --color-footer-background: var(--nx-sidebar-bg) !important;
  --color-outline-focus: var(--nx-accent) !important;
  --color-exit-button-background: var(--nx-active-bg) !important;
  --color-exit-button-background-interactive: var(--nx-hover-bg) !important;
  --color-exit-button-border: var(--nx-border) !important;
  --color-exit-button-text: var(--nx-text-primary) !important;
  --color-modal-close-button: var(--nx-text-secondary) !important;
  --color-hotkey-hint: var(--nx-text-tertiary) !important;
  --color-alert-red: #C4392E !important;
  --color-alert-error-red: #C4392E !important;
}

/* ---- 2. Top-right toolbar (search, help, gear, avatar, userlist toggle) ---- */
html.dark-theme body.nx-glass .right-sidebar-toggle-button-container,
html.dark-theme body.nx-glass #userlist-toggle-button-container,
html.dark-theme body.nx-glass .right-sidebar-show-userlist-button,
html.dark-theme body.nx-glass .navbar-right-side,
html.dark-theme body.nx-glass .navbar-icon-container,
html.dark-theme body.nx-glass #personal-menu,
html.dark-theme body.nx-glass #personal-menu-trigger,
html.dark-theme body.nx-glass #gear-menu-button,
html.dark-theme body.nx-glass .header-button,
html.dark-theme body.nx-glass .navbar-search-button,
html.dark-theme body.nx-glass #navbar_alerts_wrapper,
html.dark-theme body.nx-glass .header-buttons-container {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* ---- 3. Topic-list dropdown / picker («ETM / ТК / ТЗ / события канала») ---- */
html.dark-theme body.nx-glass #topic-list-dropdown,
html.dark-theme body.nx-glass .topic-list-dropdown,
html.dark-theme body.nx-glass .topic-list-content,
html.dark-theme body.nx-glass .recipient_box,
html.dark-theme body.nx-glass .topics-dropdown-content,
html.dark-theme body.nx-glass .topic-row-dropdown,
html.dark-theme body.nx-glass .dropdown-list-container,
html.dark-theme body.nx-glass .dropdown-list-body,
html.dark-theme body.nx-glass .recipient-row-bottom,
html.dark-theme body.nx-glass .add-topic-description,
html.dark-theme body.nx-glass .channel-header-buttons,
html.dark-theme body.nx-glass .topic-header {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

html.dark-theme body.nx-glass .topic-list-dropdown li,
html.dark-theme body.nx-glass .dropdown-list-body li {
  color: var(--nx-text-primary) !important;
}

html.dark-theme body.nx-glass .topic-list-dropdown li:hover,
html.dark-theme body.nx-glass .dropdown-list-body li:hover {
  background-color: var(--nx-hover-bg) !important;
}

/* ---- 4. Empty narrow footer / action buttons ---- */
html.dark-theme body.nx-glass .empty-narrow-message,
html.dark-theme body.nx-glass .empty_feed_notice,
html.dark-theme body.nx-glass #empty_narrow_message,
html.dark-theme body.nx-glass #bottom_whitespace,
html.dark-theme body.nx-glass .bottom-messages-logo,
html.dark-theme body.nx-glass .compose-buttons,
html.dark-theme body.nx-glass .compose-button-buttons,
html.dark-theme body.nx-glass .empty-narrow-button-row,
html.dark-theme body.nx-glass .narrow-bottom-buttons,
html.dark-theme body.nx-glass .compose-action-bar,
html.dark-theme body.nx-glass .empty-channel-buttons,
html.dark-theme body.nx-glass .narrow-actions-buttons,
html.dark-theme body.nx-glass .start-narrow-buttons {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* The 3 bottom action buttons themselves */
html.dark-theme body.nx-glass .start_topic_button,
html.dark-theme body.nx-glass .start_conversation_button,
html.dark-theme body.nx-glass .start_dm_button,
html.dark-theme body.nx-glass .new-direct-message-button,
html.dark-theme body.nx-glass .compose-narrow-button,
html.dark-theme body.nx-glass .narrow-action-button,
html.dark-theme body.nx-glass button.action-button-link,
html.dark-theme body.nx-glass .empty-narrow-button {
  background-color: var(--nx-active-bg) !important;
  color: var(--nx-text-primary) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 6px !important;
}

html.dark-theme body.nx-glass .start_topic_button:hover,
html.dark-theme body.nx-glass .start_conversation_button:hover,
html.dark-theme body.nx-glass .start_dm_button:hover,
html.dark-theme body.nx-glass .new-direct-message-button:hover,
html.dark-theme body.nx-glass .compose-narrow-button:hover,
html.dark-theme body.nx-glass .empty-narrow-button:hover {
  background-color: var(--nx-hover-bg) !important;
  border-color: var(--nx-accent) !important;
  color: var(--nx-accent) !important;
}

/* ---- 5. «Стандартный вид» topic-view picker ---- */
html.dark-theme body.nx-glass .topic-list-view-picker,
html.dark-theme body.nx-glass .topic-view-dropdown,
html.dark-theme body.nx-glass .stream-topic-list-view-button,
html.dark-theme body.nx-glass .view-picker,
html.dark-theme body.nx-glass .compose-stream-topic-input-section,
html.dark-theme body.nx-glass #stream_message_recipient_topic_wrapper,
html.dark-theme body.nx-glass .input-with-dropdown {
  background-color: var(--nx-input-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* ---- 6. Generic catch-all: nuclear ---- */
/* Anything direct child of #app-container that's not a sidebar */
html.dark-theme body.nx-glass #app-container > div:not([class*="sidebar"]),
html.dark-theme body.nx-glass .app > div:not([class*="sidebar"]),
html.dark-theme body.nx-glass #main_div > div:not([class*="sidebar"]) {
  background-color: var(--nx-chat-bg) !important;
}

/* Common UI containers */
html.dark-theme body.nx-glass [class*="message-view"],
html.dark-theme body.nx-glass [class*="message_view"],
html.dark-theme body.nx-glass [class*="channel-header"],
html.dark-theme body.nx-glass [class*="topic-header"],
html.dark-theme body.nx-glass [class*="compose-container"],
html.dark-theme body.nx-glass [class*="dropdown-list"],
html.dark-theme body.nx-glass [class*="popover-content"],
html.dark-theme body.nx-glass [class*="action-bar"] {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* ---- 7. Description / placeholder text «Добавить описание» ---- */
html.dark-theme body.nx-glass .channel-description-placeholder,
html.dark-theme body.nx-glass .add-description-link,
html.dark-theme body.nx-glass [class*="description"] {
  color: var(--nx-text-tertiary) !important;
}

/* ============================================================
 * v8 — Pavel sees Slate as «коричневый» (warm cream)
 *   → переключаю palette на NEUTRAL COOL GREY
 * + nuclear focus-outline kill (legacy *:focus-visible lime green
 *   ещё пробивает в скриншотах несмотря на v6)
 * ============================================================ */

/* ---- SLATE 2.0: cool neutral grey (was warm cream) ---- */
body.nx-slate {
  --nx-bg: #F5F6F7;              /* was #F7F7F5 → now slight cool */
  --nx-sidebar-bg: #E8EAED;      /* was #ECECEA cream → now cool grey */
  --nx-chat-bg: #FFFFFF;
  --nx-input-bg: #EFF1F3;        /* was #FEFEFE → now cool */
  --nx-text-primary: #1A1A1A;
  --nx-text-secondary: #5B6068;  /* slight cool shift */
  --nx-text-tertiary: #9099A1;
  --nx-accent: #2D5A4E;
  --nx-accent-hover: #224639;
  --nx-accent-text: #FFFFFF;
  --nx-border: #DCDFE3;          /* was #E4E4E7 → now cool */
  --nx-border-strong: #C5CAD0;
  --nx-active-bg: #DCDFE3;
  --nx-hover-bg: #E5E7EB;
  --nx-mention-bg: rgba(45, 90, 78, 0.12);
  --nx-mention-text: #2D5A4E;
  --nx-code-bg: #ECEEF1;
  --nx-folder-label: #5B6068;
  --nx-unread-dot: #2D5A4E;
  --nx-tooltip-bg: #FFFFFF;
  --nx-tooltip-text: #1A1A1A;
}

/* ---- NUCLEAR FOCUS OUTLINE KILL ---- */
/* Maximum-specificity override to defeat any cached/legacy rule */
html body[class*="nx-"] *,
html body[class*="nx-"] *::before,
html body[class*="nx-"] *::after,
html body[class*="nx-"] *:hover,
html body[class*="nx-"] *:focus,
html body[class*="nx-"] *:active,
html body[class*="nx-"] *:focus-visible,
html body[class*="nx-"] *:focus-within {
  outline-color: transparent !important;
  outline-style: none !important;
  outline-width: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Restore subtle 1px accent ONLY на явно-интерактивных elements */
html body[class*="nx-"] input:focus-visible,
html body[class*="nx-"] textarea:focus-visible,
html body[class*="nx-"] [contenteditable="true"]:focus-visible,
html body[class*="nx-"] .ProseMirror:focus-visible {
  outline: 1px solid var(--nx-accent) !important;
  outline-offset: 1px !important;
  outline-style: solid !important;
  outline-width: 1px !important;
}

/* Compose container — НИКАКОГО outline вокруг wrapper */
html body[class*="nx-"] #compose,
html body[class*="nx-"] #compose *,
html body[class*="nx-"] #compose-content,
html body[class*="nx-"] #compose-content *,
html body[class*="nx-"] .messagebox-content,
html body[class*="nx-"] .compose-container,
html body[class*="nx-"] .compose-area {
  outline: none !important;
  outline-color: transparent !important;
}

/* Re-enable accent border ONLY на focused textarea itself */
html body[class*="nx-"] #compose-textarea:focus,
html body[class*="nx-"] #compose-textarea:focus-visible {
  outline: 1px solid var(--nx-accent) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* Slate-specific compose row — force grey, not cream */
body.nx-slate .compose-recipient-row,
body.nx-slate #compose-recipient-box,
body.nx-slate .compose-recipient,
body.nx-slate #compose-recipient-input,
body.nx-slate .messagebox-compose-area,
body.nx-slate .new-conversation-button,
body.nx-slate #new_conversation_button,
body.nx-slate #compose-recipient-box .pill-container,
body.nx-slate #compose_top {
  background-color: #EFF1F3 !important;  /* cool grey input-bg */
  color: #1A1A1A !important;
  border-color: #DCDFE3 !important;
}

/* Override top channel header in Slate — neutral grey not cream */
body.nx-slate #message_view_header,
body.nx-slate .message_view_header,
body.nx-slate .channel-header,
body.nx-slate .topic-header {
  background-color: #E8EAED !important;  /* sidebar-bg cool grey */
  color: #1A1A1A !important;
  border-color: #DCDFE3 !important;
}

/* Empty narrow в Slate — chat bg, не cream */
body.nx-slate .empty-narrow-message,
body.nx-slate .empty_feed_notice,
body.nx-slate #empty_narrow_message {
  background-color: #FFFFFF !important;
}

/* Topic-list dropdown в Slate — белый/grey, не cream */
body.nx-slate #topic-list-dropdown,
body.nx-slate .topic-list-dropdown,
body.nx-slate .recipient_box,
body.nx-slate .dropdown-list-container,
body.nx-slate .dropdown-list-body {
  background-color: #FFFFFF !important;
  color: #1A1A1A !important;
  border-color: #DCDFE3 !important;
}

/* ============================================================
 * v9 — Pavel calls Slate forest green «зелёный» (it IS green)
 *   → switch Slate accent from #2D5A4E (forest) to #3B5BA5 (deep blue)
 * + drop the 1px focus outline entirely (use border-color shift only)
 * ============================================================ */

body.nx-slate {
  --nx-accent: #3B5BA5 !important;        /* was forest green → now deep blue */
  --nx-accent-hover: #2F4A88 !important;  /* darker blue */
  --nx-accent-text: #FFFFFF !important;
  --nx-mention-bg: rgba(59, 91, 165, 0.12) !important;
  --nx-mention-text: #3B5BA5 !important;
  --nx-folder-label: #5B6068 !important;
  --nx-unread-dot: #3B5BA5 !important;
}

/* ---- NO outline на focus вообще — индикация через border-color ---- */
html body[class*="nx-"] input:focus,
html body[class*="nx-"] input:focus-visible,
html body[class*="nx-"] textarea:focus,
html body[class*="nx-"] textarea:focus-visible,
html body[class*="nx-"] [contenteditable="true"]:focus,
html body[class*="nx-"] [contenteditable="true"]:focus-visible,
html body[class*="nx-"] .ProseMirror:focus,
html body[class*="nx-"] .ProseMirror:focus-visible,
html body[class*="nx-"] #compose-textarea:focus,
html body[class*="nx-"] #compose-textarea:focus-visible {
  outline: none !important;
  outline-color: transparent !important;
  outline-style: none !important;
  outline-width: 0 !important;
  outline-offset: 0 !important;
  border-color: var(--nx-accent) !important;
  box-shadow: 0 0 0 2px rgba(59, 91, 165, 0.15) !important;  /* subtle blue glow Slate */
}

/* Glass focus glow — cyan */
html.dark-theme body.nx-glass input:focus,
html.dark-theme body.nx-glass input:focus-visible,
html.dark-theme body.nx-glass textarea:focus,
html.dark-theme body.nx-glass textarea:focus-visible,
html.dark-theme body.nx-glass [contenteditable="true"]:focus,
html.dark-theme body.nx-glass .ProseMirror:focus {
  box-shadow: 0 0 0 2px rgba(82, 179, 212, 0.20) !important;
}

/* ============================================================
 * v10 — Nuclear extermination of green & beige (Pavel 2026-06-12)
 * 1. ALL compose-related borders → --nx-border (никакого accent)
 * 2. .direct-mention rgba(76,228,30) → theme-aware
 * 3. Empty channel topic picker view (beige) → theme bg
 * 4. Reset :root --nx-accent fallback away from lime
 * ============================================================ */

/* Reset legacy :root accent so детачнутые elements не получают lime */
:root {
  --nx-accent: #5B6068 !important;     /* neutral grey fallback */
  --nx-accent-dark: #4A4E55 !important;
  --nx-accent-subtle: rgba(91, 96, 104, 0.12) !important;
}

/* ---- 1. ALL compose wrapper borders → subtle border, NEVER accent ---- */
html body[class*="nx-"] #compose,
html body[class*="nx-"] #compose-content,
html body[class*="nx-"] #compose-container,
html body[class*="nx-"] #compose_top,
html body[class*="nx-"] .compose_table,
html body[class*="nx-"] .messagebox-content,
html body[class*="nx-"] .compose-area,
html body[class*="nx-"] .compose-container,
html body[class*="nx-"] .messagebox-compose-area,
html body[class*="nx-"] #compose:focus-within,
html body[class*="nx-"] #compose-content:focus-within,
html body[class*="nx-"] .compose_table:focus-within {
  border: 1px solid var(--nx-border) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Compose toolbar (bottom row of icons) — subtle */
html body[class*="nx-"] .compose-toolbar,
html body[class*="nx-"] #compose-buttons,
html body[class*="nx-"] .compose-icon-row,
html body[class*="nx-"] .compose-formatting-buttons {
  border-top: 1px solid var(--nx-border) !important;
  background-color: transparent !important;
}

/* The pill that shows recipient — neutral, no green */
html body[class*="nx-"] .pill,
html body[class*="nx-"] .pill-container,
html body[class*="nx-"] .compose-recipient .pill,
html body[class*="nx-"] .pill[data-attrtype],
html body[class*="nx-"] .user-pill {
  background-color: var(--nx-active-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* ---- 2. .direct-mention legacy rgba(76,228,30) override ---- */
html body[class*="nx-"] .direct-mention,
html body[class*="nx-"] .group_mention,
html body[class*="nx-"] .topic_mention {
  background-color: var(--nx-mention-bg) !important;
  border-left: 3px solid var(--nx-accent-themed) !important;
}

body.nx-slate { --nx-accent-themed: #3B5BA5 !important; }
body.nx-glass { --nx-accent-themed: #52B3D4 !important; }

/* Background для direct-mention message row */
html body[class*="nx-"] .message_row.direct-mention,
html body[class*="nx-"] .message_row .direct-mention {
  background-color: transparent !important;
}

/* ---- 3. Empty channel topic picker (screenshot 2: HR_app cream void) ---- */
html.dark-theme body.nx-glass .channel-topics-tab-container,
html.dark-theme body.nx-glass .channel-topic-list,
html.dark-theme body.nx-glass #channel-feed-content,
html.dark-theme body.nx-glass #channel-recent-content,
html.dark-theme body.nx-glass .recent_topics_container,
html.dark-theme body.nx-glass #recent_topics_table,
html.dark-theme body.nx-glass .channel-view-content,
html.dark-theme body.nx-glass #channel-topic-list-container,
html.dark-theme body.nx-glass .channel-content,
html.dark-theme body.nx-glass .standard-view-container,
html.dark-theme body.nx-glass .feed-tabs-content,
html.dark-theme body.nx-glass main,
html.dark-theme body.nx-glass main > *,
html.dark-theme body.nx-glass .scroll-container {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-primary) !important;
}

body.nx-slate .channel-topics-tab-container,
body.nx-slate .channel-topic-list,
body.nx-slate #channel-feed-content,
body.nx-slate #channel-recent-content,
body.nx-slate .recent_topics_container,
body.nx-slate #recent_topics_table,
body.nx-slate .channel-view-content,
body.nx-slate #channel-topic-list-container,
body.nx-slate .channel-content,
body.nx-slate .standard-view-container,
body.nx-slate .feed-tabs-content,
body.nx-slate main,
body.nx-slate main > *,
body.nx-slate .scroll-container {
  background-color: #FFFFFF !important;
}

/* ---- 4. Nuclear: anything with computed beige/cream gets dark bg in glass ---- */
html.dark-theme body.nx-glass [style*="background-color: rgb(233"],
html.dark-theme body.nx-glass [style*="background-color: rgb(237"],
html.dark-theme body.nx-glass [style*="background: rgb(233"],
html.dark-theme body.nx-glass [style*="background: rgb(237"] {
  background-color: var(--nx-chat-bg) !important;
}

/* ---- 5. ALL inputs in dark must be input-bg, never beige ---- */
html.dark-theme body.nx-glass input,
html.dark-theme body.nx-glass textarea,
html.dark-theme body.nx-glass select,
html.dark-theme body.nx-glass [contenteditable="true"] {
  background-color: var(--nx-input-bg) !important;
  color: var(--nx-text-primary) !important;
}

/* ---- 6. Channel content area — wide selectors for «Стандартный вид» панель ---- */
html.dark-theme body.nx-glass [class*="standard-view"],
html.dark-theme body.nx-glass [class*="topic-tab"],
html.dark-theme body.nx-glass [class*="channel-content"],
html.dark-theme body.nx-glass [class*="channel-topic"],
html.dark-theme body.nx-glass [class*="feed-tab"],
html.dark-theme body.nx-glass [class*="recent-topic"],
html.dark-theme body.nx-glass [class*="recent_topic"] {
  background-color: var(--nx-chat-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

/* ============================================================
 * v11 — Pavel feedback 2026-06-12 04:56
 * 1. Synий accent (deep blue #3B5BA5) → морская волна (sea-wave teal #0E9F8A)
 * 2. Slate palette → Tailwind zinc neutral (бежевый ушёл совсем)
 * 3. Force background на main/scroll-container в Slate (бежевая пустота под topic picker)
 * ============================================================ */

body.nx-slate {
  /* Tailwind zinc — neutral cool grey, никакой бежевости */
  --nx-bg: #F4F4F5 !important;            /* zinc-100 */
  --nx-sidebar-bg: #E4E4E7 !important;    /* zinc-200 */
  --nx-chat-bg: #FFFFFF !important;
  --nx-input-bg: #ECECEE !important;
  --nx-text-primary: #18181B !important;  /* zinc-900 */
  --nx-text-secondary: #52525B !important;/* zinc-600 */
  --nx-text-tertiary: #A1A1AA !important; /* zinc-400 */
  /* ============ МОРСКАЯ ВОЛНА accent ============ */
  --nx-accent: #0E9F8A !important;
  --nx-accent-hover: #0B7F6E !important;
  --nx-accent-text: #FFFFFF !important;
  --nx-border: #D4D4D8 !important;        /* zinc-300 */
  --nx-border-strong: #A1A1AA !important; /* zinc-400 */
  --nx-active-bg: #D4D4D8 !important;
  --nx-hover-bg: #E4E4E7 !important;
  --nx-mention-bg: rgba(14, 159, 138, 0.12) !important;
  --nx-mention-text: #0E9F8A !important;
  --nx-code-bg: #ECECEE !important;
  --nx-folder-label: #52525B !important;
  --nx-unread-dot: #0E9F8A !important;
  --nx-tooltip-bg: #FFFFFF !important;
  --nx-tooltip-text: #18181B !important;
  --nx-accent-themed: #0E9F8A !important;
}

/* Focus glow → морская волна */
html body[class*="nx-"] input:focus,
html body[class*="nx-"] textarea:focus {
  border-color: var(--nx-accent) !important;
}

body.nx-slate input:focus,
body.nx-slate textarea:focus {
  box-shadow: 0 0 0 2px rgba(14, 159, 138, 0.20) !important;
}

/* ---- Slate body-bg force: бежевая пустота под topic picker ---- */
body.nx-slate,
body.nx-slate html,
body.nx-slate body,
body.nx-slate #app,
body.nx-slate #main_div,
body.nx-slate .app-main,
body.nx-slate main,
body.nx-slate main > div,
body.nx-slate .scroll-container,
body.nx-slate #message_feed_container,
body.nx-slate .feed-container,
body.nx-slate .channel-feed-content,
body.nx-slate .channel-content-area,
body.nx-slate #recent_topics_table,
body.nx-slate .recent_topics_container,
body.nx-slate .empty-feed-notice,
body.nx-slate .empty-channel-content,
body.nx-slate .column-middle,
body.nx-slate .column-middle-inner,
body.nx-slate .standard-view-container,
body.nx-slate [class*="topic-tab"],
body.nx-slate [class*="channel-content"],
body.nx-slate [class*="standard-view"] {
  background-color: #FFFFFF !important;
  color: #18181B !important;
}

/* Unread bubble count в каналах — teal accent */
body[class*="nx-"] .unread_count,
body[class*="nx-"] .stream_unread_count,
body[class*="nx-"] .topic_unread_count {
  background-color: var(--nx-accent) !important;
  color: var(--nx-accent-text) !important;
  font-weight: 600 !important;
}

/* Send button — teal accent */
body[class*="nx-"] #compose-send-button,
body[class*="nx-"] .compose-send,
body[class*="nx-"] button.compose-send,
body[class*="nx-"] .btn-primary,
body[class*="nx-"] button.primary {
  background-color: var(--nx-accent) !important;
  border-color: var(--nx-accent) !important;
  color: var(--nx-accent-text) !important;
}

body[class*="nx-"] #compose-send-button:hover,
body[class*="nx-"] .compose-send:hover,
body[class*="nx-"] .btn-primary:hover {
  background-color: var(--nx-accent-hover) !important;
  border-color: var(--nx-accent-hover) !important;
}

/* ============================================================
 * v12 — MOCKUP-EXACT colors via pixel sampling (Pavel 2026-06-12 05:00)
 * Я метался по палитре. Извлёк EXACT colors из мокапа:
 * - Slate forest green #2D5A4E — ORIGINAL choice, был правильный
 * - Slate bg #EAEBE7 (sampled), sidebar #ECECEA, chat #FDFDFD
 * - Glass #16191C chat, #1E2228 sidebar, #52B3D4 cyan accent
 * ============================================================ */

body.nx-slate {
  --nx-bg: #FDFDFD !important;            /* sampled from mockup */
  --nx-sidebar-bg: #ECECEA !important;    /* sampled top-bar */
  --nx-chat-bg: #FDFDFD !important;       /* sampled chat area */
  --nx-input-bg: #FEFEFE !important;      /* sampled compose input */
  --nx-text-primary: #171717 !important;
  --nx-text-secondary: #5C5650 !important;
  --nx-text-tertiary: #94897E !important;
  --nx-accent: #2D5A4E !important;        /* ORIGINAL forest green from mockup */
  --nx-accent-hover: #224639 !important;
  --nx-accent-text: #FFFFFF !important;
  --nx-border: #EDEEEA !important;        /* sampled border */
  --nx-border-strong: #D8D9D4 !important;
  --nx-active-bg: #E4E5E1 !important;     /* sampled active channel */
  --nx-hover-bg: #E8E9E4 !important;
  --nx-mention-bg: rgba(45, 90, 78, 0.12) !important;
  --nx-mention-text: #2D5A4E !important;
  --nx-code-bg: #ECECEA !important;
  --nx-folder-label: #6B6B66 !important;
  --nx-unread-dot: #2D5A4E !important;
  --nx-tooltip-bg: #FFFFFF !important;
  --nx-tooltip-text: #171717 !important;
  --nx-accent-themed: #2D5A4E !important;
}

body.nx-glass {
  --nx-bg: #16191C !important;            /* sampled chat */
  --nx-sidebar-bg: #1E2228 !important;    /* sampled sidebar */
  --nx-chat-bg: #16191C !important;
  --nx-input-bg: #0F1215 !important;      /* sampled input — slightly darker */
  --nx-text-primary: #9AA7B3 !important;  /* muted (Pavel's earlier request) */
  --nx-text-secondary: #7A8590 !important;
  --nx-text-tertiary: #4E5862 !important;
  --nx-text-headline: #C5CFD8 !important; /* senders/headings брightish */
  --nx-accent: #52B3D4 !important;        /* ORIGINAL cyan from mockup */
  --nx-accent-hover: #6BC5E3 !important;
  --nx-accent-text: #0F1316 !important;
  --nx-border: #2A2F36 !important;
  --nx-border-strong: #3A4047 !important;
  --nx-active-bg: #232831 !important;
  --nx-hover-bg: #1C2129 !important;
  --nx-mention-bg: rgba(82, 179, 212, 0.18) !important;
  --nx-mention-text: #52B3D4 !important;
  --nx-code-bg: #1A2024 !important;
  --nx-folder-label: #7A8590 !important;
  --nx-unread-dot: #52B3D4 !important;
  --nx-tooltip-bg: #1A2024 !important;
  --nx-tooltip-text: #E8EEF2 !important;
  --nx-accent-themed: #52B3D4 !important;
}

/* Slate body bg override (catches any beige leftover from earlier vN's) */
body.nx-slate,
body.nx-slate html,
body.nx-slate body,
body.nx-slate #app,
body.nx-slate #main_div,
body.nx-slate main,
body.nx-slate .scroll-container,
body.nx-slate #message_feed_container,
body.nx-slate .empty_feed_notice,
body.nx-slate .empty-narrow-message,
body.nx-slate .channel-feed-content,
body.nx-slate #recent_topics_table,
body.nx-slate .standard-view-container {
  background-color: #FDFDFD !important;
}

/* ============================================================
 * v13 — Pavel canon enforcement 2026-06-12 05:10
 * Moodboard #768 = SOURCE OF TRUTH
 * 1. Drafts panel (НЕ в мокапе — не должна выбиваться)
 * 2. Purple Zulip native (action-links) → наш text-secondary
 * 3. SINGLE border on compose (как native) — outer only
 * 4. Slate beige void — кранчевые селекторы main view
 * ============================================================ */

/* ---- 1. DRAFTS PANEL (правый side-panel «Черновики») ---- */
body[class*="nx-"] #drafts-container,
body[class*="nx-"] #drafts_overlay_container,
body[class*="nx-"] .drafts-container,
body[class*="nx-"] .drafts-tab,
body[class*="nx-"] #drafts_table,
body[class*="nx-"] .drafts-header,
body[class*="nx-"] .scheduled-messages-container,
body[class*="nx-"] .draft-row,
body[class*="nx-"] #drafts-list,
body[class*="nx-"] .draft-info-box,
body[class*="nx-"] .drafts-list,
body[class*="nx-"] [class*="draft"] {
  background-color: var(--nx-sidebar-bg) !important;
  color: var(--nx-text-primary) !important;
  border-color: var(--nx-border) !important;
}

body[class*="nx-"] .drafts-container .draft-header,
body[class*="nx-"] .drafts-list h2,
body[class*="nx-"] .drafts-container h2,
body[class*="nx-"] .drafts-container .header {
  color: var(--nx-text-headline, var(--nx-text-primary)) !important;
  background-color: var(--nx-sidebar-bg) !important;
}

/* ---- 2. PURPLE TEXT (action-links) → text-secondary ---- */
body[class*="nx-"] {
  --color-link: var(--nx-accent) !important;
  --color-action-link: var(--nx-text-secondary) !important;
  --color-text-link: var(--nx-accent) !important;
  --color-link-default: var(--nx-accent) !important;
  --color-link-active: var(--nx-accent-hover) !important;
}

body[class*="nx-"] .stream-list-section-toggle,
body[class*="nx-"] .stream-list-toggle,
body[class*="nx-"] .muted-streams-section,
body[class*="nx-"] #muted_topics_section,
body[class*="nx-"] .muted-section-header,
body[class*="nx-"] .show-more-streams,
body[class*="nx-"] .show-more-channels,
body[class*="nx-"] .see-more-channels-link,
body[class*="nx-"] .show_all_channels,
body[class*="nx-"] .left-sidebar .show-more,
body[class*="nx-"] .left-sidebar a {
  color: var(--nx-text-secondary) !important;
}

body[class*="nx-"] .left-sidebar a:hover {
  color: var(--nx-text-primary) !important;
}

/* ---- 3. SINGLE BORDER на compose (как native Zulip) ---- */
/* Outer wrapper #compose has the border; ALL inner elements transparent */
html body[class*="nx-"] #compose {
  border: 1px solid var(--nx-border) !important;
  border-radius: 6px !important;
  background-color: var(--nx-input-bg) !important;
  outline: none !important;
  box-shadow: none !important;
}

html body[class*="nx-"] #compose-content,
html body[class*="nx-"] #compose-recipient-row,
html body[class*="nx-"] #compose-recipient-box,
html body[class*="nx-"] #compose_top,
html body[class*="nx-"] .compose_table,
html body[class*="nx-"] .messagebox-content,
html body[class*="nx-"] .compose-area,
html body[class*="nx-"] .compose-container,
html body[class*="nx-"] .messagebox-compose-area,
html body[class*="nx-"] #compose-textarea {
  border: none !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Toolbar divider (compose icons row) — subtle top-border внутри compose */
html body[class*="nx-"] .compose-toolbar,
html body[class*="nx-"] #compose-buttons,
html body[class*="nx-"] .compose-formatting-buttons {
  border-top: 1px solid var(--nx-border) !important;
  background-color: transparent !important;
}

/* Compose textarea text + caret */
html body[class*="nx-"] #compose-textarea {
  color: var(--nx-text-primary) !important;
  caret-color: var(--nx-accent) !important;
  background-color: transparent !important;
}

/* Compose row recipient pill (DM > Welcome Bot etc.) */
html body[class*="nx-"] #compose-recipient-box .pill,
html body[class*="nx-"] #compose-recipient-box .pill-container,
html body[class*="nx-"] .pill {
  background-color: var(--nx-active-bg) !important;
  color: var(--nx-text-primary) !important;
  border: 1px solid var(--nx-border) !important;
}

/* ---- 4. SLATE main view bg — aggressive ---- */
body.nx-slate,
body.nx-slate > *,
body.nx-slate #app,
body.nx-slate #app > *,
body.nx-slate .app,
body.nx-slate .app > *,
body.nx-slate .app-main,
body.nx-slate #main_div,
body.nx-slate #main_div > *,
body.nx-slate main,
body.nx-slate main > *,
body.nx-slate .scroll-container,
body.nx-slate .scrolling-container,
body.nx-slate #message_feed_container,
body.nx-slate #message_feed_container > *,
body.nx-slate .channel-feed-content,
body.nx-slate .channel-content-area,
body.nx-slate .feed-tabs-content,
body.nx-slate #recent_topics_table,
body.nx-slate .recent_topics_container,
body.nx-slate .empty-feed-notice,
body.nx-slate .empty-channel-content,
body.nx-slate .column-middle,
body.nx-slate .column-middle-inner,
body.nx-slate .standard-view-container,
body.nx-slate .feed-content,
body.nx-slate .bottom-messages-feed,
body.nx-slate .topic-row-content,
body.nx-slate [class*="topic-tab"],
body.nx-slate [class*="channel-content"],
body.nx-slate [class*="standard-view"],
body.nx-slate [class*="recent_topic"] {
  background-color: #FDFDFD !important;
  color: var(--nx-text-primary) !important;
}

/* Slate: специфично — empty-area под topic-list panel ----------- */
body.nx-slate .channel-empty-content,
body.nx-slate .channel-padding,
body.nx-slate .feed-padding-bottom,
body.nx-slate #bottom_whitespace,
body.nx-slate .channel-bottom-padding {
  background-color: #FDFDFD !important;
}

/* ---- BONUS: scoped Zulip vars override (вытесняет purple фон) ---- */
body[class*="nx-"] {
  --color-background-private-message: var(--nx-chat-bg) !important;
  --color-background-stream: var(--nx-chat-bg) !important;
  --color-background-tooltip: var(--nx-tooltip-bg, var(--nx-sidebar-bg)) !important;
  --color-background-status: var(--nx-chat-bg) !important;
}

/* ============================================================
 * v14 — Drafts panel + ⋮ + "Черновики" text canon (Pavel 05:27)
 * + bg=#FDFDFD (chat-bg) на main feed area Slate
 * + 6 old warm hexes уже отсwepнуты выше
 * ============================================================ */

/* ---- DRAFTS PANEL: NO own bg, matches sidebar styling ---- */
html body[class*="nx-"] #drafts-container,
html body[class*="nx-"] #drafts_overlay_container,
html body[class*="nx-"] .drafts-container,
html body[class*="nx-"] .drafts-tab,
html body[class*="nx-"] .drafts-header,
html body[class*="nx-"] .drafts-section,
html body[class*="nx-"] .drafts-list,
html body[class*="nx-"] .draft-row,
html body[class*="nx-"] .draft-info-box,
html body[class*="nx-"] [class*="draft"] {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* "Черновики" label — как "ВИДЫ" (sidebar folder label) */
html body[class*="nx-"] .drafts-container .drafts-title,
html body[class*="nx-"] .drafts-section-title,
html body[class*="nx-"] .drafts-list h2,
html body[class*="nx-"] .drafts-container h1,
html body[class*="nx-"] .drafts-container h2,
html body[class*="nx-"] .drafts-container .header,
html body[class*="nx-"] .drafts-header,
html body[class*="nx-"] .scheduled-messages-section-title {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--nx-folder-label) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* ---- THREE-DOTS ⋮ (action menu) → text-secondary ---- */
html body[class*="nx-"] .three_dots,
html body[class*="nx-"] .actions_hover,
html body[class*="nx-"] .actions_hover i,
html body[class*="nx-"] .stream-ellipsis,
html body[class*="nx-"] .topic-ellipsis,
html body[class*="nx-"] .compose-ellipsis,
html body[class*="nx-"] .send_later_button,
html body[class*="nx-"] .fa-ellipsis-v,
html body[class*="nx-"] .fa-ellipsis-h,
html body[class*="nx-"] .zulip-icon-ellipsis-v-solid,
html body[class*="nx-"] .zulip-icon-more-vertical,
html body[class*="nx-"] .more-options {
  color: var(--nx-text-secondary) !important;
  fill: var(--nx-text-secondary) !important;
}

html body[class*="nx-"] .three_dots:hover,
html body[class*="nx-"] .actions_hover:hover,
html body[class*="nx-"] .stream-ellipsis:hover,
html body[class*="nx-"] .compose-ellipsis:hover {
  color: var(--nx-text-primary) !important;
  fill: var(--nx-text-primary) !important;
}

/* ---- "Черновики" highlight removal (был с white bg fill behind text) ---- */
html body[class*="nx-"] .drafts-title::selection,
html body[class*="nx-"] .drafts-header::selection,
html body[class*="nx-"] .draft-row::selection {
  background-color: var(--nx-mention-bg) !important;
  color: var(--nx-text-primary) !important;
}

/* Catch-all для любого highlighted/selected element без явного bg override */
html body[class*="nx-"] [class*="drafts"] *,
html body[class*="nx-"] [class*="draft-"] * {
  background-color: transparent !important;
}

/* ---- Slate: canonical feed bg #FDFDFD на main view (ещё раз) ---- */
body.nx-slate .main-view,
body.nx-slate .main-view > *,
body.nx-slate #main_div,
body.nx-slate #main_div > *,
body.nx-slate .column-middle-inner,
body.nx-slate .column-middle-inner > *,
body.nx-slate .column-middle,
body.nx-slate .app-main,
body.nx-slate .app-main > *,
body.nx-slate #message_view_navigation,
body.nx-slate #message_view_topic_actions_container {
  background-color: #FDFDFD !important;
}

/* Slate: top header bar should match sidebar (NOT feed) — explicit */
body.nx-slate #message_view_header,
body.nx-slate #message_view_header_container,
body.nx-slate .message_view_header,
body.nx-slate .channel-header {
  background-color: #ECECEA !important;
}

/* ---- Top app navbar (above everything) — sidebar bg ---- */
body[class*="nx-"] #navbar,
body[class*="nx-"] #navbar-fixed-container,
body[class*="nx-"] .navbar-fixed-top,
body[class*="nx-"] .top-navbar {
  background-color: var(--nx-sidebar-bg) !important;
  border-color: var(--nx-border) !important;
}

/* ============================================================
 * v15 — Final beige extermination (Pavel 05:40)
 * Корень: legacy /zulip-nextera.css :root defines cream vars
 * с ДРУГИМИ именами (--nx-sidebar, --nx-card, --nx-elevated,
 * --nx-dm-bg, --nx-card-hover) которые я не переопределял.
 * Сейчас alias всех legacy var names к моим canonical tokens.
 * ============================================================ */

body[class*="nx-"] {
  /* Override ALL legacy /zulip-nextera.css cream vars at body level */
  --nx-bg: var(--nx-chat-bg) !important;
  --nx-sidebar: var(--nx-sidebar-bg) !important;
  --nx-sidebar-dark: var(--nx-active-bg) !important;
  --nx-card: var(--nx-chat-bg) !important;
  --nx-card-hover: var(--nx-hover-bg) !important;
  --nx-elevated: var(--nx-input-bg) !important;
  --nx-dm-bg: var(--nx-sidebar-bg) !important;
  /* keep --nx-code-bg as-is (same name overridden in palette) */
  /* keep --nx-border, --nx-border-strong as-is (same name) */

  /* Defensive: alias common alternative names some Zulip CSS may use */
  --nx-feed-bg: var(--nx-chat-bg) !important;
  --nx-panel-bg: var(--nx-chat-bg) !important;
  --nx-content-bg: var(--nx-chat-bg) !important;
  --nx-app-bg: var(--nx-chat-bg) !important;
}

/* For Slate specifically — keep my Slate definitions but ALSO override legacy vars */
body.nx-slate {
  --nx-bg: #FDFDFD !important;
  --nx-sidebar: #ECECEA !important;
  --nx-sidebar-dark: #E4E5E1 !important;
  --nx-card: #FFFFFF !important;
  --nx-card-hover: #F4F4F5 !important;
  --nx-elevated: #FEFEFE !important;
  --nx-dm-bg: #ECECEA !important;
}

body.nx-glass {
  --nx-bg: #16191C !important;
  --nx-sidebar: #1E2228 !important;
  --nx-sidebar-dark: #232831 !important;
  --nx-card: #16191C !important;
  --nx-card-hover: #1C2129 !important;
  --nx-elevated: #0F1215 !important;
  --nx-dm-bg: #1E2228 !important;
}

/* ============================================================
 * v16 — Compose separator + #E7E1DC nuclear (Pavel 05:48)
 * 1. Убираю horizontal separator между textarea и toolbar
 *    (native Zulip нет — у нас был border-top на toolbar)
 * 2. #E7E1DC — computed mix, не в одном source CSS;
 *    universal-* force на body/html уровне
 * ============================================================ */

/* ---- 1. NO separator между compose textarea и toolbar ---- */
html body[class*="nx-"] .compose-toolbar,
html body[class*="nx-"] #compose-buttons,
html body[class*="nx-"] .compose-formatting-buttons,
html body[class*="nx-"] .composebox-input-area,
html body[class*="nx-"] .compose-toolbar-container {
  border-top: none !important;
  border: none !important;
  background-color: transparent !important;
}

/* ---- 2. HTML / BODY uberAggressive force на корне ---- */
html {
  background-color: inherit !important;
}

html:not(.dark-theme):not(.color-scheme-automatic),
html.color-scheme-automatic {
  background-color: #FDFDFD !important;
}

html.dark-theme {
  background-color: #16191C !important;
}

/* Body itself for Slate — chat-bg, ничего другого */
body.nx-slate {
  background-color: #FDFDFD !important;
}

body.nx-glass {
  background-color: #16191C !important;
}

/* ---- 3. Universal descendant override (за исключением известных не-bg областей) ---- */
/* Берёт все элементы что НЕ являются sidebar / topbar / popover / drafts / pill */
body.nx-slate :not([class*="sidebar"]):not([class*="navbar"]):not([class*="header"]):not([class*="popover"]):not([class*="dropdown"]):not([class*="tippy"]):not([class*="modal"]):not([class*="draft"]):not([class*="pill"]):not([class*="recipient"]):not([class*="compose"]):not(button):not(input):not(textarea):not([class*="badge"]):not([class*="count"]):not([class*="reaction"]):not([class*="code"]):not([class*="message_header"]):not([class*="recipient_row"]) {
  background-color: transparent !important;
}

body.nx-slate {
  background-color: #FDFDFD !important;
}

/* ---- 4. Specific Slate body-bg backstop ---- */
/* Anything with computed cream bg #E7E1DC / #E9E0DB / etc — force white */
body.nx-slate [style*="background-color: rgb(231"],
body.nx-slate [style*="background-color: rgb(233"],
body.nx-slate [style*="background-color: rgb(229"],
body.nx-slate [style*="background-color: rgb(237"],
body.nx-slate [style*="background-color: rgb(240"],
body.nx-slate [style*="background-color: rgb(245"],
body.nx-slate [style*="background: rgb(231"],
body.nx-slate [style*="background: rgb(233"],
body.nx-slate [style*="background: rgb(229"],
body.nx-slate [style*="background: rgb(237"] {
  background-color: #FDFDFD !important;
  background: #FDFDFD !important;
}

/* ---- 5. Common Zulip 11 main view containers — explicit ---- */
body.nx-slate .main-view-container,
body.nx-slate .center-pane,
body.nx-slate .content-pane,
body.nx-slate .channel-view,
body.nx-slate .stream-view,
body.nx-slate .stream-feed,
body.nx-slate .narrow-container,
body.nx-slate .feed-pane,
body.nx-slate .right-pane,
body.nx-slate .right-pane-container,
body.nx-slate .right-column,
body.nx-slate .middle-column,
body.nx-slate .main-content {
  background-color: #FDFDFD !important;
}

/* ============================================================
 * v17 — Compose row idle beige (Pavel 05:55)
 * Compose box BEFORE focus shows beige (Zulip 11 native paint)
 * Force ALL compose containers to input-bg regardless of focus
 * ============================================================ */

html body[class*="nx-"] #compose,
html body[class*="nx-"] #compose-container,
html body[class*="nx-"] #compose-recipient-row,
html body[class*="nx-"] #compose-recipient-box,
html body[class*="nx-"] #compose-content,
html body[class*="nx-"] #compose_top,
html body[class*="nx-"] #compose-recipient-input,
html body[class*="nx-"] .compose-recipient-row,
html body[class*="nx-"] .compose-recipient,
html body[class*="nx-"] .compose_top,
html body[class*="nx-"] .messagebox-compose-area,
html body[class*="nx-"] .compose_table,
html body[class*="nx-"] .message-recipient-row,
html body[class*="nx-"] .new-conversation-button,
html body[class*="nx-"] #new_conversation_button,
html body[class*="nx-"] .new-conversation-row,
html body[class*="nx-"] [id^="compose"],
html body[class*="nx-"] [class*="compose-recipient"],
html body[class*="nx-"] [class*="compose-area"],
html body[class*="nx-"] [class*="compose-container"] {
  background-color: var(--nx-input-bg) !important;
  background: var(--nx-input-bg) !important;
}

/* Compose textarea — keep transparent (parent paints) */
html body[class*="nx-"] #compose-textarea,
html body[class*="nx-"] .ProseMirror {
  background-color: transparent !important;
  background: transparent !important;
}

/* Compose toolbar (icons row) — transparent */
html body[class*="nx-"] .compose-toolbar,
html body[class*="nx-"] #compose-buttons,
html body[class*="nx-"] .compose-formatting-buttons,
html body[class*="nx-"] .compose_control_buttons_container,
html body[class*="nx-"] .composebox-input-area {
  background-color: transparent !important;
  background: transparent !important;
  border-top: none !important;
  border: none !important;
}

/* Override `--color-compose-box-background` legacy + native Zulip 11 var */
body[class*="nx-"] {
  --color-compose-box-background: var(--nx-input-bg) !important;
  --color-compose-collapsed-reply-button-area-background: var(--nx-input-bg) !important;
  --color-compose-embedded-button-background: var(--nx-input-bg) !important;
  --color-background-compose: var(--nx-input-bg) !important;
  --color-background-compose-box: var(--nx-input-bg) !important;
}

/* Pill (recipient pill «ЛС > Nextera Orchestrator») — same as input-bg backdrop */
html body[class*="nx-"] .pill,
html body[class*="nx-"] .pill-container,
html body[class*="nx-"] #compose-recipient-box .pill,
html body[class*="nx-"] .compose-recipient .pill,
html body[class*="nx-"] .compose-recipient .pill-container {
  background-color: var(--nx-active-bg) !important;
  background: var(--nx-active-bg) !important;
  border: 1px solid var(--nx-border) !important;
  color: var(--nx-text-primary) !important;
}