/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║         Zulip Nextera Theme  ·  v1.0  ·  2026                  ║
 * ║  Palette source: TOLK_NEXTERA Figma / Slide-16_9-27.svg        ║
 * ║  Tested on:      Zulip Desktop 5.12.x / 6.x                   ║
 * ║  License:        MIT                                            ║
 * ╚══════════════════════════════════════════════════════════════════╝
 *
 * ─── УСТАНОВКА ────────────────────────────────────────────────────
 *   1. Сохраните файл на диск.
 *   2. Zulip Desktop → аватар → Desktop Settings
 *      → General → Advanced → «Add custom CSS» → выберите файл.
 *   3. В Preferences установите тему Light (не Dark, не Auto).
 *   4. Перезагрузите: Cmd+R (Mac) / Ctrl+R (Linux/Win).
 *
 * ─── ЦВЕТА ИЗ SVG-ДИЗАЙНА ─────────────────────────────────────────
 *   #E9E0DB  — основной бежевый фон
 *   #DAD1CC  — фон левой панели (sidebar)
 *   #BDB6B2  — средний нейтральный
 *   #98908B  — вторичный текст / границы
 *   #2F2627  — тёмный акцент (заголовки, иконки)
 *   #171719  — почти чёрный (основной текст)
 *   #010203  — чёрный (логотип, strong)
 *   #4CE41E  — кислотный зелёный акцент
 *   #FFFFFF  — белый (карточки сообщений)
 *   #D9D9D9  — разделители
 */


/* ═══════════════════════════════════════════════════════════════════
   === PALETTE ===
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Nextera base ───────────────────────────────────────── */
  --nx-bg:             #E9E0DB;   /* основной фон страницы            */
  --nx-sidebar:        #DAD1CC;   /* левая панель каналов             */
  --nx-sidebar-dark:   #BDB6B2;   /* более тёмный вариант sidebar     */
  --nx-card:           #FFFFFF;   /* фон карточек сообщений           */
  --nx-card-hover:     #F5F0ED;   /* hover на сообщениях              */
  --nx-elevated:       #F0EAE6;   /* compose-box, поп-апы             */

  /* ── Text ─────────────────────────────────────────────── */
  --nx-text:           #171719;   /* основной текст                   */
  --nx-text-strong:    #010203;   /* bold, заголовки, иконки          */
  --nx-text-muted:     #98908B;   /* мета, время, вторичный           */
  --nx-text-faint:     #BDB6B2;   /* очень тихий (плейсхолдеры)      */
  --nx-text-dark:      #2F2627;   /* dark-акцентный текст             */

  /* ── Accent ───────────────────────────────────────────── */
  --nx-accent:         #4CE41E;   /* кислотный зелёный Nextera        */
  --nx-accent-dark:    #2EB800;   /* hover на зелёном                 */
  --nx-accent-subtle:  rgba(76, 228, 30, 0.12); /* тонкий tint       */

  /* ── Borders & dividers ───────────────────────────────── */
  --nx-border:         #D9D9D9;   /* основные разделители             */
  --nx-border-strong:  #BDB6B2;   /* жёсткие границы                  */

  /* ── DM / Private ─────────────────────────────────────── */
  --nx-dm-bg:          #EDE6E2;   /* фон заголовка DM                 */

  /* ── Code ─────────────────────────────────────────────── */
  --nx-code-bg:        #F0EAE6;
  --nx-code-border:    #D9D9D9;
  --nx-code-text:      #2F2627;

  /* ── Scrollbar ────────────────────────────────────────── */
  --nx-scrollbar:      #BDB6B2;
}


/* ═══════════════════════════════════════════════════════════════════
   === ZULIP SEMANTIC TOKENS ===
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --color-background:                                 var(--nx-bg)             !important;
  --color-background-sidebar:                         var(--nx-sidebar)        !important;
  --color-background-navbar:                          var(--nx-sidebar)        !important;
  --color-background-popover-menu:                    var(--nx-card)           !important;
  --color-background-tooltip:                         var(--nx-text)           !important;
  --color-background-modal:                           var(--nx-card)           !important;
  --color-background-settings-sidebar:                var(--nx-sidebar)        !important;
  --color-background-tab-picker-container:            var(--nx-sidebar)        !important;

  /* Sidebar hover & active */
  --color-background-hover-narrow-filter:             rgba(0,0,0,0.06)         !important;
  --color-background-active-narrow-filter:            rgba(0,0,0,0.12)         !important;

  /* Message blocks */
  --color-background-stream-message-content:          var(--nx-card)           !important;
  --color-background-private-message-content:         var(--nx-card)           !important;
  --color-background-private-message-header:          var(--nx-dm-bg)          !important;

  /* Compose box */
  --color-compose-box-background:                     var(--nx-elevated)       !important;
  --color-compose-collapsed-reply-button-area-background: var(--nx-bg)         !important;
  --color-compose-collapsed-reply-button-area-border: transparent              !important;
  --color-compose-embedded-button-background:         var(--nx-bg)             !important;
  --color-background-compose-new-message-button:      var(--nx-card)           !important;
  --color-background-compose-new-message-button-hover: var(--nx-accent-subtle) !important;
  --color-border-compose-new-message-button:          var(--nx-border)         !important;
  --color-border-compose-new-message-button-active:   var(--nx-accent)         !important;

  /* Text */
  --color-text-message-default:                       var(--nx-text)           !important;
  --color-text-default:                               var(--nx-text)           !important;
  --color-text-muted:                                 var(--nx-text-muted)     !important;
  --color-text-supporting:                            var(--nx-text-muted)     !important;
  --color-text-heading:                               var(--nx-text-strong)    !important;

  /* Links — зелёный акцент */
  --color-text-url:                                   var(--nx-accent-dark)    !important;
  --color-text-url-hover:                             var(--nx-accent)         !important;
  --color-markdown-link:                              var(--nx-accent-dark)    !important;
  --color-markdown-code-link:                         var(--nx-accent-dark)    !important;

  /* Borders */
  --color-message-list-border:                        transparent              !important;
  --color-message-header-contents-border:             var(--nx-border)         !important;
  --color-message-header-contents-border-bottom:      var(--nx-border)         !important;
  --color-private-message-header-border:              transparent              !important;
  --color-private-message-header-border-bottom:       transparent              !important;
  --color-border-compose-content:                     var(--nx-border)         !important;
  --color-message-content-container-border:           var(--nx-border)         !important;
  --color-message-content-container-border-focus:     var(--nx-accent)         !important;
  --color-compose-recipient-box-border-color:         var(--nx-border)         !important;
  --color-compose-recipient-box-hover:                var(--nx-border-strong)  !important;
  --color-compose-recipient-box-has-focus:            var(--nx-accent)         !important;

  /* Emoji reactions */
  --color-message-reaction-border:                    var(--nx-border)         !important;
  --color-message-reaction-border-reacted:            var(--nx-accent)         !important;
  --color-message-reaction-button-border:             var(--nx-border)         !important;
  --color-message-reaction-button-border-hover:       var(--nx-border-strong)  !important;
  --color-message-reaction-background:                var(--nx-elevated)       !important;
  --color-message-reaction-background-hover:          var(--nx-sidebar)        !important;
  --color-message-reaction-background-reacted:        var(--nx-accent-subtle)  !important;

  /* Unread indicators */
  --color-unread-marker:                              var(--nx-accent)         !important;
  --color-background-unread-count:                    var(--nx-text-strong)    !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === LAYOUT — только цвет, никакой геометрии ===
   ═══════════════════════════════════════════════════════════════════ */

html,
body {
  background-color: var(--nx-bg) !important;
  color: var(--nx-text) !important;
}

/* ── Left sidebar ────────────────────────────────────────────────── */
#left-sidebar,
.left-sidebar {
  background-color: var(--nx-sidebar) !important;
  border-right: 1px solid var(--nx-border) !important;
}

/* ── Right sidebar ───────────────────────────────────────────────── */
#right-sidebar,
.right-sidebar {
  background-color: var(--nx-sidebar) !important;
  border-left: 1px solid var(--nx-border) !important;
}

/* ── Top navbar ──────────────────────────────────────────────────── */
#navbar-fixed-container,
.navbar-fixed,
#top-navbar {
  background-color: var(--nx-bg) !important;
  border-bottom: 1px solid var(--nx-border) !important;
}

/* ── Center column ───────────────────────────────────────────────── */
#message_view,
#message-view {
  background-color: var(--nx-bg) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === SIDEBAR ITEMS ===
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section headers ─────────────────────────────────────────────── */
.stream-list-subsection-header,
.top-sidebar-collapse-widget,
.sidebar-subsection-header {
  background-color: transparent !important;
  color: var(--nx-text-muted) !important;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ── Channel / narrow rows ───────────────────────────────────────── */
.narrow-filter,
li.narrow-filter {
  border-radius: 4px !important;
  transition: background-color 0.1s ease;
}

.narrow-filter:hover,
li.narrow-filter:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

.narrow-filter.active-filter,
li.narrow-filter.active-filter {
  background-color: rgba(0, 0, 0, 0.12) !important;
}

/* ── Stream name ─────────────────────────────────────────────────── */
.stream-name,
.channel-name,
.narrow-filter .filter-name {
  color: var(--nx-text) !important;
  font-size: 14px;
}

/* ── Topics ──────────────────────────────────────────────────────── */
.topic-list .topic-list-item,
.topic-list li {
  border-radius: 4px !important;
  transition: background-color 0.1s ease;
}

.topic-list .topic-list-item:hover,
.topic-list li:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

/* ── Unread badges — тёмные, акцент зелёный для mention ─────────── */
.unread_count,
.unread-count {
  background-color: var(--nx-text-strong) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  padding: 0 5px;
}

/* ── DM divider ──────────────────────────────────────────────────── */
.direct-message-section-bottom-divider-container {
  background-color: transparent !important;
}

/* ── Sidebar search ──────────────────────────────────────────────── */
#left-sidebar-search,
.left-sidebar-search-box {
  background-color: rgba(255,255,255,0.6) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 6px !important;
  color: var(--nx-text) !important;
}

#left-sidebar-search::placeholder,
.left-sidebar-search-box::placeholder {
  color: var(--nx-text-faint) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === MESSAGE ROWS ===
   ═══════════════════════════════════════════════════════════════════ */

.message_row,
.message-row {
  background-color: transparent !important;
  border-radius: 4px;
  transition: background-color 0.08s ease;
}

.message_row:hover,
.message-row:hover {
  background-color: var(--nx-card-hover) !important;
}

/* ── Message content ─────────────────────────────────────────────── */
.message_content,
.message-content {
  color: var(--nx-text) !important;
  font-size: 15px;
  line-height: 1.55;
}

.message_content strong,
.message-content strong {
  color: var(--nx-text-strong) !important;
  font-weight: 700;
}

/* ── Sender name ─────────────────────────────────────────────────── */
.message_header .message-header-sender,
.message_header .sender_name,
.message-author {
  color: var(--nx-text-strong) !important;
  font-weight: 600;
  font-size: 14px;
}

/* ── Timestamp ───────────────────────────────────────────────────── */
.message_header .message-time,
.message-time,
time {
  color: var(--nx-text-faint) !important;
  font-size: 12px;
}

/* ── Message header bar (stream/topic) ───────────────────────────── */
.message_header_stream,
.message_header_private_message,
.message_header {
  background-color: var(--nx-card) !important;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid var(--nx-border) !important;
}

/* ── DM header — чуть теплее ─────────────────────────────────────── */
.message_header_private_message {
  background-color: var(--nx-dm-bg) !important;
}

/* ── Inline code ─────────────────────────────────────────────────── */
.message_content code,
code {
  background-color: var(--nx-code-bg) !important;
  border: 1px solid var(--nx-code-border) !important;
  border-radius: 3px;
  color: var(--nx-code-text) !important;
  font-size: 0.875em;
  padding: 1px 5px;
}

/* ── Code block ──────────────────────────────────────────────────── */
.message_content pre,
pre {
  background-color: var(--nx-code-bg) !important;
  border: 1px solid var(--nx-code-border) !important;
  border-radius: 5px !important;
  padding: 12px 16px !important;
}

.message_content pre code,
pre code {
  border: none !important;
  background-color: transparent !important;
  padding: 0 !important;
}

/* ── Blockquote ──────────────────────────────────────────────────── */
.message_content blockquote {
  border-left: 3px solid var(--nx-accent) !important;
  background-color: var(--nx-elevated) !important;
  border-radius: 0 4px 4px 0;
  padding: 8px 12px !important;
  color: var(--nx-text-muted) !important;
  margin: 4px 0 !important;
}

/* ── Links ───────────────────────────────────────────────────────── */
.message_content a {
  color: var(--nx-accent-dark) !important;
  text-decoration: none;
}

.message_content a:hover {
  color: var(--nx-accent) !important;
  text-decoration: underline;
}

/* ── Emoji reactions ─────────────────────────────────────────────── */
.message_reaction,
.emoji-reaction {
  background-color: var(--nx-elevated) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 13px;
  transition: background-color 0.1s ease;
}

.message_reaction:hover,
.emoji-reaction:hover {
  background-color: var(--nx-sidebar) !important;
  border-color: var(--nx-border-strong) !important;
}

.message_reaction.reacted {
  background-color: var(--nx-accent-subtle) !important;
  border-color: var(--nx-accent) !important;
}

/* ── Mentions ────────────────────────────────────────────────────── */
.mentioned-message-row,
.direct-mention {
  background-color: rgba(76, 228, 30, 0.08) !important;
  border-left: 3px solid var(--nx-accent) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === COMPOSE BOX ===
   ═══════════════════════════════════════════════════════════════════ */

/* Только фон — никаких margin/border-radius/padding
   (они ломают flex-layout и вызывают overlap сайдбара) */
#compose,
#compose-container {
  background-color: var(--nx-elevated) !important;
  border-top: 1px solid var(--nx-border) !important;
}

#compose-textarea,
#message-textarea {
  background-color: var(--nx-card) !important;
  color: var(--nx-text) !important;
  caret-color: var(--nx-text-dark);
  font-size: 15px;
  line-height: 1.55;
  border: 1px solid var(--nx-border) !important;
  border-radius: 6px !important;
}

#compose-textarea::placeholder,
#message-textarea::placeholder {
  color: var(--nx-text-faint) !important;
}

#compose-buttons,
.compose_control_buttons_container {
  background-color: transparent !important;
  border-top: 1px solid var(--nx-border) !important;
}

#closed-compose-controls {
  padding-bottom: calc(var(--base-font-size-px, 16px) * 1.8);
}


/* ═══════════════════════════════════════════════════════════════════
   === BUTTONS ===
   ═══════════════════════════════════════════════════════════════════ */

/* Primary — зелёный акцент Nextera */
.button.btn-primary,
.btn-primary,
#compose-send-button {
  background-color: var(--nx-accent) !important;
  color: var(--nx-text-strong) !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 700;
  transition: background-color 0.1s ease;
}

.button.btn-primary:hover,
.btn-primary:hover,
#compose-send-button:hover {
  background-color: var(--nx-accent-dark) !important;
}

/* Secondary */
.button,
.btn {
  background-color: var(--nx-card) !important;
  color: var(--nx-text) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 6px !important;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}

.button:hover,
.btn:hover {
  background-color: var(--nx-elevated) !important;
  border-color: var(--nx-border-strong) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === SEARCH BAR ===
   ═══════════════════════════════════════════════════════════════════ */

#search_query,
.search-query,
.navbar-search input {
  background-color: rgba(255,255,255,0.7) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 6px !important;
  color: var(--nx-text) !important;
}

#search_query::placeholder,
.search-query::placeholder {
  color: var(--nx-text-faint) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === MODALS & OVERLAYS ===
   ═══════════════════════════════════════════════════════════════════ */

.micromodal-modal .modal__container,
.dialog,
.popover-content,
.dropdown-menu {
  background-color: var(--nx-card) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 8px !important;
  color: var(--nx-text) !important;
  box-shadow: 0 8px 24px rgba(23, 23, 25, 0.12) !important;
}

.dialog-header {
  background-color: var(--nx-sidebar) !important;
  border-bottom: 1px solid var(--nx-border) !important;
  border-radius: 8px 8px 0 0;
}

.dialog-footer {
  background-color: var(--nx-elevated) !important;
  border-top: 1px solid var(--nx-border) !important;
}

.modal-backdrop {
  background-color: rgba(23, 23, 25, 0.45) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === SETTINGS ===
   ═══════════════════════════════════════════════════════════════════ */

.settings-overlay-container,
.settings-content,
.settings-body {
  background-color: var(--nx-bg) !important;
}

.sidebar-list .settings-tab,
.settings-sidebar .list-item {
  border-radius: 4px !important;
  color: var(--nx-text) !important;
  transition: background-color 0.1s ease;
}

.sidebar-list .settings-tab:hover,
.settings-sidebar .list-item:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

.sidebar-list .settings-tab.active,
.settings-sidebar .list-item.active {
  background-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--nx-text-strong) !important;
}

.settings-overlay-container input[type="text"],
.settings-overlay-container input[type="email"],
.settings-overlay-container input[type="password"],
.settings-overlay-container select,
.settings-overlay-container textarea {
  background-color: var(--nx-card) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 4px !important;
  color: var(--nx-text) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === TYPEAHEAD ===
   ═══════════════════════════════════════════════════════════════════ */

.typeahead,
.typeahead.dropdown-menu {
  background-color: var(--nx-card) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(23, 23, 25, 0.12) !important;
}

.typeahead .active > a,
.typeahead li.active > a,
.typeahead li:hover > a {
  background-color: var(--nx-elevated) !important;
  color: var(--nx-text) !important;
  border-radius: 4px;
}

.typeahead li > a {
  color: var(--nx-text) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === SCROLLBARS ===
   ═══════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--nx-scrollbar) !important;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background-color: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════════
   === MISC ===
   ═══════════════════════════════════════════════════════════════════ */

/* Inline emoji */
.message_content .emoji {
  width: 1.375em;
  height: 1.375em;
  vertical-align: -0.25em;
}

/* Tables */
.message_content table {
  border-collapse: collapse;
  width: 100%;
}

.message_content table th,
.message_content table td {
  border: 1px solid var(--nx-border) !important;
  padding: 6px 12px;
}

.message_content table th {
  background-color: var(--nx-sidebar) !important;
  color: var(--nx-text-strong) !important;
  font-weight: 700;
}

.message_content table tr:nth-child(even) {
  background-color: var(--nx-elevated) !important;
}

/* HR */
.message_content hr {
  border-color: var(--nx-border) !important;
}

/* Focus rings — зелёный Nextera вместо синего */
*:focus-visible {
  outline: 2px solid var(--nx-accent) !important;
  outline-offset: 2px;
}

/* User presence dot */
.user-presence-status {
  border: 2px solid var(--nx-sidebar) !important;
}

/* kbd */
kbd {
  background-color: var(--nx-card) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: 3px;
  color: var(--nx-text-muted) !important;
  font-size: 11px;
  padding: 1px 5px;
}