/*
 * GiperOS.css — Zulip UNIA Tiffany Glass Design Overlay
 * Source of truth: GiperUI/DESIGN_SYSTEM.md + GiperDocs-local/client/src/index.css
 * Date: 2026-06-21
 *
 * DEPRECATED: All orange (#f97316, rgba(249,115,22,...), --orange-*) are removed.
 * New accent system is Tiffany Blue (#0abab5) ONLY.
 * Orange replaced everywhere → Tiffany.
 *
 * Phase coverage (per ZULIP_DESIGN_REFACTOR_PLAN.md):
 *   Phase 1 — Tokens + global shell (dark theme, Exo 2, UNIA CSS vars, Zulip var remaps)
 *   Phase 2 — Login / portico pages
 *   Phase 3 — Left sidebar + navigation (priority)
 *   Phase 4 — Message list + topic headers
 *   Phase 5 — Composer (priority)
 *   Phase 6 — Buttons, forms, modals
 *   Phase 7 — Inbox, recent view, search, popovers
 *   Phase 8 — Scrollbars
 */

/* ============================================================
   GOOGLE FONTS — Exo 2
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap");

/* ============================================================
   PHASE 1 — UNIA DESIGN TOKENS + GLOBAL SHELL
   ============================================================ */

/*
 * UNIA canonical custom properties.
 * These are the authoritative source for all theming below.
 * Do not reference raw hex values outside this block —
 * use the var() references instead.
 */
:root {
    /* Surfaces */
    --unia-bg:               #09090b;
    --unia-panel:            #0d0f13;
    --unia-modal:            #12141a;
    --unia-card:             rgba(255, 255, 255, 0.03);
    --unia-border-subtle:    rgba(255, 255, 255, 0.05);
    --unia-border-default:   rgba(255, 255, 255, 0.1);

    /* Tiffany accent — the ONLY brand accent */
    --unia-accent:           #0abab5;
    --unia-accent-06:        rgba(10, 186, 181, 0.06);
    --unia-accent-20:        rgba(10, 186, 181, 0.20);
    --unia-accent-30:        rgba(10, 186, 181, 0.30);
    --unia-accent-45:        rgba(10, 186, 181, 0.45);

    /* Glow — static box-shadow only, no animation */
    --unia-glow:             0 0 20px rgba(10, 186, 181, 0.25);

    /* Text */
    --unia-text-primary:     rgba(255, 255, 255, 0.85);
    --unia-text-muted:       rgba(255, 255, 255, 0.5);
    --unia-text-hint:        rgba(255, 255, 255, 0.3);

    /* Semantic — status only, NOT brand */
    --unia-success:          #10b981;
    --unia-warning:          #f59e0b;
    --unia-error:            #ef4444;

    /* Font */
    --font-family-system-ui: "Exo 2", system-ui, -apple-system, sans-serif;

    /* -------------------------------------------------------
     * Zulip upstream variable remaps → UNIA Tiffany system
     * These override light-dark() values to force dark/Tiffany
     * on every variable that was purple/violet/blue brand accent.
     * ------------------------------------------------------- */

    /* Root surfaces */
    --color-background:                             var(--unia-bg);
    --color-background-navbar:                      var(--unia-panel);
    --color-navbar-bottom-border:                   var(--unia-border-subtle);

    /* Focus outlines — was hsl(215deg 47% 50%) blue */
    --color-outline-focus:                          var(--unia-accent);
    --focus-ring-outline:                           1.5px solid var(--unia-accent);

    /* Sidebar active/hover filter backgrounds */
    --color-background-active-narrow-filter:        var(--unia-accent-20);
    --color-background-hover-narrow-filter:         rgba(255, 255, 255, 0.05);
    --color-text-active-narrow-filter:              #ffffff;

    /* Sidebar action heading */
    --color-sidebar-action:                         var(--unia-text-muted);
    --color-sidebar-action-hover:                   #ffffff;
    --color-background-sidebar-action-hover:        rgba(255, 255, 255, 0.05);
    --color-background-navigation-item-hover:       rgba(255, 255, 255, 0.05);
    --color-background-sidebar-action-heading-hover: rgba(255, 255, 255, 0.05);

    /* Sidebar text */
    --color-text-sidebar-heading:                   var(--unia-text-muted);
    --color-text-sidebar-action-heading:            var(--unia-text-muted);
    --color-text-sidebar-action-heading-hover:      #ffffff;
    --color-text-sidebar-row:                       var(--unia-text-primary);

    /* Unread marker — keep blue/semantic (not converted to tiffany brand) */
    --color-unread-marker:                          hsl(217deg 64% 59%);

    /* Compose send button — Tiffany instead of upstream blue/purple */
    --color-compose-send-button-background:         var(--unia-accent);
    --color-compose-send-button-background-interactive: #088f8b;
    --color-compose-send-button-icon-color:         #ffffff;
    --color-compose-send-button-focus-border:       var(--unia-panel);
    --color-compose-send-button-focus-shadow:       rgba(10, 186, 181, 0.5);

    /* Compose box background */
    --color-compose-box-background:                 var(--unia-panel);
    --color-compose-message-content-background:     rgba(255, 255, 255, 0.05);
    --color-border-compose-content:                 var(--unia-border-default);
    --color-message-content-container-border:       var(--unia-border-default);
    --color-message-content-container-border-focus: var(--unia-accent-30);
    --color-compose-focus-ring:                     var(--unia-accent);

    /* Compose control buttons */
    --color-compose-send-control-button:            var(--unia-text-muted);
    --color-compose-send-control-button-background: transparent;
    --color-compose-send-control-button-interactive: var(--unia-accent);
    --color-compose-send-control-button-background-interactive: var(--unia-accent-06);

    /* Inputs */
    --background-color-textarea:                    rgba(255, 255, 255, 0.05);
    --border-color-textarea:                        var(--unia-border-default);
    --focus-border-color-textarea:                  var(--unia-accent-30);
    --background-color-readonly-modal-input:        rgba(255, 255, 255, 0.03);

    /* Popovers */
    --color-background-popover:                     var(--unia-modal);
    --color-background-popover-menu:                var(--unia-modal);
    --color-border-popover-menu:                    var(--unia-border-default);
    --color-border-popover-menu-separator:          var(--unia-border-subtle);
    --color-background-hover-popover-menu:          rgba(255, 255, 255, 0.05);
    --color-background-active-popover-menu:         var(--unia-accent-06);

    /* Tippy */
    --color-background-tippy-box:                   var(--unia-modal);

    /* Search */
    --color-background-search:                      rgba(255, 255, 255, 0.05);
    --color-background-search-collapsed:            rgba(255, 255, 255, 0.05);
    --color-background-search-option-hover:         rgba(255, 255, 255, 0.05);
    --color-search-icons:                           var(--unia-text-muted);

    /* Inbox / recent view */
    --color-background-inbox:                       var(--unia-bg);
    --color-background-inbox-row:                   var(--unia-card);
    --color-background-inbox-row-hover:             rgba(255, 255, 255, 0.05);
    --color-background-recent-view-row:             var(--unia-card);
    --color-background-recent-view-row-hover:       rgba(255, 255, 255, 0.05);
    --color-background-recent-view-table-thead-th:  var(--unia-panel);
    --color-text-recent-view-link:                  var(--unia-text-primary);
    --color-text-recent-view-link-unread:           #ffffff;

    /* Tab picker — was blue/purple */
    --color-background-tab-picker-container:        rgba(255, 255, 255, 0.05);
    --color-background-tab-picker-selected-tab:     var(--unia-accent-20);
    --color-outline-tab-picker-tab-option:          var(--unia-border-subtle);
    --color-background-tab-picker-tab-option-hover: rgba(255, 255, 255, 0.05);

    /* Link colors inside messages → Tiffany */
    --color-text-link:                              var(--unia-accent);
    --color-text-link-hover:                        #0dd5d0;
    --color-text-url:                               var(--unia-accent);
    --color-text-url-hover:                         #0dd5d0;

    /* Widget button */
    --color-background-widget-button:               rgba(255, 255, 255, 0.05);
    --color-background-widget-input:                rgba(255, 255, 255, 0.05);

    /* Stream group row checked → Tiffany */
    --color-stream-group-row-checked-icon:          var(--unia-accent);
    --color-stream-group-row-checked-icon-hover:    #088f8b;

    /* Sidebar borders */
    --color-border-sidebar:                         var(--unia-border-subtle);
}

/* ============================================================
   FORCE DARK THEME — apply to both explicit dark and auto
   ============================================================ */
html,
html.dark-theme,
html.color-scheme-automatic {
    color-scheme: dark;
    background-color: var(--unia-bg) !important;
}

/* ============================================================
   GLOBAL TYPOGRAPHY — Exo 2 everywhere
   ============================================================ */
body,
.app-main,
.sidebar,
#left-sidebar,
#right-sidebar,
.compose-box,
.message_content,
input,
textarea,
select,
button {
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
}

body {
    background-color: var(--unia-bg) !important;
    color: var(--unia-text-primary) !important;
    font-size: 0.875rem;
}

/* ============================================================
   PHASE 2 — LOGIN / PORTICO PAGES
   ============================================================ */
.portico-page,
.login-container,
.register-container,
.portico-header,
#page-params ~ body,
.portico-page .portico-header {
    background-color: var(--unia-bg) !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
}

/* Login card / form box */
.login-page-container,
.register-page-container,
.account-box,
.login-box {
    background-color: var(--unia-modal) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 16px !important;
}

/* Portico inputs */
.portico-page input[type="text"],
.portico-page input[type="email"],
.portico-page input[type="password"] {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 8px !important;
    color: var(--unia-text-primary) !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
}

.portico-page input[type="text"]:focus,
.portico-page input[type="email"]:focus,
.portico-page input[type="password"]:focus {
    border-color: var(--unia-accent-30) !important;
    box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.15) !important;
    outline: none !important;
}

/* ============================================================
   PHASE 3 — LEFT SIDEBAR + NAVIGATION (PRIORITY)
   ============================================================ */

/* Sidebar surface — solid #0d0f13 */
#left-sidebar,
.left-sidebar,
.column-left,
#left-sidebar-container,
.app-main .column-left {
    background-color: var(--unia-panel) !important;
    border-right: 1px solid var(--unia-border-subtle) !important;
}

/* Right sidebar — same panel bg */
#right-sidebar,
.right-sidebar,
.column-right {
    background-color: var(--unia-panel) !important;
    border-left: 1px solid var(--unia-border-subtle) !important;
}

/* Sidebar row base — idle text muted, no geometry shift */
.left-sidebar-row,
.channel-row,
.topic-row,
.stream-row,
.sidebar-menu li,
.top_left_row,
.bottom_left_row,
#global_filters li {
    border-left: 3px solid transparent !important;
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    border-radius: 0 8px 8px 0 !important;
    transition: background-color 200ms ease, border-color 200ms ease !important;
}

/* Idle text */
.top_left_row:not(.active) .zulip-icon,
.top_left_row:not(.active) span,
.bottom_left_row:not(.active) .zulip-icon,
.bottom_left_row:not(.active) span,
#global_filters li:not(.active) .zulip-icon,
#global_filters li:not(.active) .filter-icon,
#global_filters li:not(.active) a {
    color: var(--unia-text-muted) !important;
    text-decoration: none !important;
}

/* Hover rows — subtle white fill, no geometry jump, text → white */
.left-sidebar-row:hover,
.channel-row:hover,
.topic-row:hover,
.stream-row:hover,
.sidebar-menu li:hover,
.top_left_row:hover,
.bottom_left_row:hover,
#global_filters li:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    cursor: pointer;
}

.top_left_row:hover .zulip-icon,
.top_left_row:hover span,
.bottom_left_row:hover .zulip-icon,
.bottom_left_row:hover span,
#global_filters li:hover .zulip-icon,
#global_filters li:hover .filter-icon,
#global_filters li:hover a {
    color: #ffffff !important;
}

/*
 * ACTIVE nav item — 3px LEFT border Tiffany only.
 * top/bottom rim via border-color, subtle fill, static glow.
 * No right border, no geometry jump (idle already has 3px transparent).
 */
.left-sidebar .selected-row,
.left-sidebar-row.active,
.channel-row.active,
.topic-row.active,
.sidebar-menu li[aria-selected="true"],
.sidebar-menu li.active,
.left-sidebar .top_left_row.active,
.left-sidebar .bottom_left_row.active,
.top_left_row.active,
.bottom_left_row.active,
.stream-list-filter.active-filter,
#global_filters li.active {
    background-color: var(--unia-accent-20) !important;
    border-left: 3px solid var(--unia-accent) !important;
    border-top: 1px solid var(--unia-accent-30) !important;
    border-bottom: 1px solid var(--unia-accent-30) !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: var(--unia-glow) !important;
    margin-left: 0 !important;
    padding-left: 10px !important;
}

/* Active text for static navigation items only */
.top_left_row.active .zulip-icon,
.top_left_row.active span,
.bottom_left_row.active .zulip-icon,
.bottom_left_row.active span,
#global_filters li.active .zulip-icon,
#global_filters li.active .filter-icon,
#global_filters li.active a {
    color: var(--unia-accent) !important;
    font-weight: 600 !important;
}

/* Stream privacy icons inherit their channel color — don't override */
.stream-row.active .stream-privacy .zulip-icon,
.stream-row.active .zulip-icon.hashtag {
    color: inherit !important;
}

/* Unread badges — keep semantic gray/blue (not brand) */
.unread_count,
.unread-count {
    background-color: var(--unia-text-hint) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

/* Mention unread — semantic amber */
.unread_mention_count {
    background-color: var(--unia-warning) !important;
    color: #000000 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

/* ============================================================
   PHASE 4 — MESSAGE LIST + TOPIC HEADERS
   ============================================================ */

/* Message area background */
#message_view,
.message-list,
#message-lists-container,
.app-main .column-middle {
    background-color: var(--unia-bg) !important;
}

/* Topic / channel date header */
.message_header,
.message_header_stream,
.message_header_private_message {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--unia-border-subtle) !important;
    color: var(--unia-text-primary) !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
}

/* Selected / focused message row — left border accent only */
.message_row.selected,
.focused-message-list .message_row:focus-within,
.message_row:focus {
    border-left: 3px solid var(--unia-accent) !important;
    background-color: var(--unia-accent-06) !important;
}

/* Links inside messages → Tiffany */
.message_content a {
    color: var(--unia-accent) !important;
}

.message_content a:hover {
    color: #0dd5d0 !important;
    text-decoration: underline;
}

/* User mentions */
.user-mention {
    color: var(--unia-accent) !important;
    background-color: var(--unia-accent-06) !important;
    border-radius: 4px !important;
    padding: 0 3px !important;
}

/* Stream / topic mentions in message content */
.stream-topic,
.message_inline_ref {
    color: var(--unia-accent) !important;
}

/* Code blocks */
.message_content pre,
.message_content code {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 6px !important;
    font-size: 0.8125rem !important;
}

/* Blockquote */
.message_content blockquote {
    border-left: 3px solid var(--unia-border-default) !important;
    color: var(--unia-text-muted) !important;
    background-color: var(--unia-card) !important;
}

/* Emoji reactions — compact pills */
.message_reactions .emoji-reaction {
    background-color: var(--unia-card) !important;
    border: 1px solid var(--unia-border-subtle) !important;
    border-radius: 12px !important;
    color: var(--unia-text-muted) !important;
    font-size: 0.75rem !important;
    padding: 1px 6px !important;
    transition: background-color 150ms ease !important;
}

.message_reactions .emoji-reaction:hover,
.message_reactions .emoji-reaction.reacted {
    background-color: var(--unia-accent-06) !important;
    border-color: var(--unia-accent-30) !important;
    color: var(--unia-accent) !important;
}

/* ============================================================
   PHASE 5 — COMPOSER (PRIORITY)
   ============================================================ */

/* Composer container — glass card surface */
#compose,
.compose-box,
#compose-container {
    background-color: var(--unia-panel) !important;
    border-top: 1px solid var(--unia-border-subtle) !important;
}

/* Composer main input area */
#compose-textarea,
.compose_textarea,
.new_message_textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 8px !important;
    color: var(--unia-text-primary) !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
    font-size: 0.875rem !important;
    resize: none;
}

#compose-textarea:focus,
.compose_textarea:focus,
.new_message_textarea:focus {
    border-color: var(--unia-accent-30) !important;
    box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.15) !important;
    outline: none !important;
}

/* Compose recipient row */
#compose_recipient,
.compose_recipient,
#compose-recipient-row {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid var(--unia-border-subtle) !important;
}

/*
 * SEND button — primary CTA.
 * L+R Tiffany 3px borders, 1px top/bottom rim, glass fill, Tiffany glow.
 */
#compose-send-button,
.compose-send-button,
button.compose-send-button {
    background-color: var(--unia-accent-20) !important;
    border-left: 3px solid var(--unia-accent) !important;
    border-right: 3px solid var(--unia-accent) !important;
    border-top: 1px solid var(--unia-accent-30) !important;
    border-bottom: 1px solid var(--unia-accent-30) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
    font-weight: 600 !important;
    box-shadow: var(--unia-glow) !important;
    transition: background-color 300ms ease, box-shadow 300ms ease !important;
}

#compose-send-button:hover,
.compose-send-button:hover {
    background-color: var(--unia-accent-30) !important;
    box-shadow: 0 0 28px rgba(10, 186, 181, 0.4) !important;
}

/* Compose control buttons (emoji, attach, etc.) */
.compose_control_button,
.compose_control_button_container button,
.compose-formatting-button {
    color: var(--unia-text-muted) !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    transition: color 150ms ease, background-color 150ms ease !important;
}

.compose_control_button:hover,
.compose_control_button_container button:hover,
.compose-formatting-button:hover {
    color: var(--unia-accent) !important;
    background-color: var(--unia-accent-06) !important;
}

/* ============================================================
   PHASE 6 — BUTTONS, FORMS, MODALS
   ============================================================ */

/* Header / navbar */
#navbar-container,
.navbar,
.header,
#header-container,
#searchbox,
.navbar-search {
    background-color: var(--unia-panel) !important;
    border-bottom: 1px solid var(--unia-border-subtle) !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
}

/* Navbar icons */
.header-button .zulip-icon,
.navbar-item .zulip-icon {
    color: var(--unia-text-muted) !important;
}

.header-button:hover .zulip-icon,
.navbar-item:hover .zulip-icon {
    color: var(--unia-accent) !important;
}

/* Search input */
#searchbox-input,
#search_query,
.search-input,
.navbar-search .search_icon {
    color: var(--unia-text-primary) !important;
}

/* ---- Buttons ---- */

/*
 * Default / secondary buttons: dark glass with subtle border.
 */
.action-button,
.btn,
.zulip-button,
.modal_btn,
button[data-dismiss],
.settings-btn,
.dropdown-widget-button {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 8px !important;
    color: var(--unia-text-muted) !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
    font-weight: 500 !important;
    transition: all 300ms ease !important;
}

.action-button:hover,
.btn:hover,
.zulip-button:hover,
.modal_btn:hover,
button[data-dismiss]:hover,
.settings-btn:hover,
.dropdown-widget-button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--unia-border-default) !important;
    color: #ffffff !important;
}

/*
 * PRIMARY buttons: glass fill → Tiffany, L+R 3px borders.
 */
.action-button.primary,
.btn.btn-primary,
.zulip-button.primary,
.modal_btn.sea-green,
.btn-group .btn.sea-green,
.dialog_submit_button,
button.sea-green,
.inline-block button.btn-primary {
    background-color: var(--unia-accent-20) !important;
    border-left: 3px solid var(--unia-accent) !important;
    border-right: 3px solid var(--unia-accent) !important;
    border-top: 1px solid var(--unia-accent-30) !important;
    border-bottom: 1px solid var(--unia-accent-30) !important;
    color: #ffffff !important;
    box-shadow: var(--unia-glow) !important;
}

.action-button.primary:hover,
.btn.btn-primary:hover,
.zulip-button.primary:hover,
.modal_btn.sea-green:hover,
.dialog_submit_button:hover,
button.sea-green:hover {
    background-color: var(--unia-accent-30) !important;
    box-shadow: 0 0 28px rgba(10, 186, 181, 0.4) !important;
}

/*
 * DESTRUCTIVE / danger buttons — red only, never brand
 */
.action-button.danger,
.btn.btn-danger,
.zulip-button.danger,
.btn-danger,
.modal_btn.btn-danger,
.dialog_remove_button {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: var(--unia-error) !important;
}

.action-button.danger:hover,
.btn.btn-danger:hover,
.zulip-button.danger:hover,
.dialog_remove_button:hover {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #ff7070 !important;
}

/* ---- Inputs ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.modal_text_input,
.settings-input,
.pill-container,
.dropdown-list-search-input,
.popover-filter-input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 8px !important;
    color: var(--unia-text-primary) !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.modal_text_input:focus,
.settings-input:focus,
.popover-filter-input:focus {
    border-color: var(--unia-accent-30) !important;
    box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.15) !important;
    outline: none !important;
}

/* ---- Modals ---- */
.modal-content,
.modal-dialog,
.overlay-content,
.micromodal,
.overlay .overlay-content,
#dialog_widget_modal,
#subscribe-to-more-streams,
#stream_settings,
#user-profile-modal {
    background-color: var(--unia-modal) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 16px !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
}

.modal-header,
.modal_footer,
.dialog-header {
    background-color: var(--unia-modal) !important;
    border-color: var(--unia-border-subtle) !important;
}

/* Modal overlay backdrop */
.modal-backdrop,
.overlay,
.micromodal-overlay,
#overlay-container {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
}

/* ---- Cards and panels ---- */
.card,
.panel,
.box,
.settings-section,
#settings_page,
.preferences-page,
.sidebar-section,
.direct-message-group-card {
    background-color: var(--unia-card) !important;
    border: 1px solid var(--unia-border-subtle) !important;
    border-radius: 12px !important;
}

.settings-section .input-group {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-radius: 8px !important;
}

/* Settings pages */
.settings-section,
#settings_page,
.preferences-page,
#account-settings,
#profile-settings,
#notifications-settings {
    background-color: var(--unia-bg) !important;
}

/* ---- Tabs ---- */
.nav-tabs .nav-link.active,
.tab-bar .tab.active,
.tab-switcher .tab.active,
.tab-picker .tab-option.selected {
    color: var(--unia-accent) !important;
    border-bottom-color: var(--unia-accent) !important;
    background-color: var(--unia-accent-20) !important;
}

/* ---- Tooltips ---- */
.tooltip,
.tippy-box,
[data-tippy-root] .tippy-box,
.tippy-box[data-theme] {
    background-color: var(--unia-modal) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 8px !important;
    color: var(--unia-text-primary) !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
    font-size: 0.8125rem !important;
}

/* ---- Dropdown menus ---- */
.dropdown-menu,
.popover,
.typeahead,
.autocomplete-container,
.dropdown-list-container,
.simplebar-wrapper .popover-menu {
    background-color: var(--unia-modal) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
}

.dropdown-menu li:hover,
.dropdown-menu-item:hover,
.typeahead-option:hover,
.dropdown-list-item:hover,
.popover-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dropdown-menu li.active,
.dropdown-menu-item.active,
.typeahead-option.active,
.dropdown-list-item.active,
.popover-menu-item.active {
    background-color: var(--unia-accent-06) !important;
    color: var(--unia-accent) !important;
}

/* ---- Loading spinner ---- */
.loading-spinner,
.spinner,
.zulip-loading-spinner {
    border-color: var(--unia-border-default) !important;
    border-top-color: var(--unia-accent) !important;
}

/* ---- Text selection ---- */
::selection {
    background-color: var(--unia-accent-30) !important;
    color: #ffffff !important;
}

/* ============================================================
   PHASE 7 — INBOX, RECENT VIEW, SEARCH, OVERLAYS
   ============================================================ */

/* Inbox container */
#inbox-view,
.inbox-view,
#inbox-main {
    background-color: var(--unia-bg) !important;
}

/* Inbox row active/selected */
.inbox-row.active,
.inbox-row:focus,
.recent-view-row.active,
.recent-view-row:focus {
    border-left: 3px solid var(--unia-accent) !important;
    background-color: var(--unia-accent-06) !important;
}

/* Inbox / recent view row hover */
.inbox-row:hover,
.recent-view-row:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Inbox search input */
#inbox-search,
.inbox-search-input,
.recent-view-filter-input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 8px !important;
    color: var(--unia-text-primary) !important;
    font-family: "Exo 2", system-ui, -apple-system, sans-serif !important;
}

#inbox-search:focus,
.inbox-search-input:focus,
.recent-view-filter-input:focus {
    border-color: var(--unia-accent-30) !important;
    box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.15) !important;
    outline: none !important;
}

/* Streams settings overlay */
#subscription_overlay_container,
#streams_overlay_container,
#user-groups-overlay,
#settings_overlay_container {
    background-color: var(--unia-modal) !important;
    border: 1px solid var(--unia-border-default) !important;
    border-radius: 16px !important;
}

/* Settings sidebar */
.settings-sidebar,
.settings-left-panel {
    background-color: var(--unia-panel) !important;
    border-right: 1px solid var(--unia-border-subtle) !important;
}

/* Settings sidebar active item */
.settings-sidebar .active a,
.settings-left-panel .active a,
.settings-sidebar a.active,
.settings-left-panel a.active {
    border-left: 3px solid var(--unia-accent) !important;
    background-color: var(--unia-accent-06) !important;
    color: var(--unia-accent) !important;
}

/* ============================================================
   PHASE 8 — SCROLLBARS
   ============================================================ */

/* Webkit scrollbars — no orange gradient, clean neutral */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--unia-panel);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* SimpleBar scrollbar (Zulip uses SimpleBar for custom scrolling) */
.simplebar-track .simplebar-scrollbar::before {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

.simplebar-track:hover .simplebar-scrollbar::before,
.simplebar-scrollbar.simplebar-visible:before {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* ============================================================
   PHASE 9 — UNIA CORRECTIONS (highest priority, dark-scoped)
   Zulip redefines ~668 tokens under .dark-theme, beating our :root
   values. Re-declare the unified palette under BOTH :root and
   .dark-theme with !important so it always wins. One base background
   everywhere (GiperDocs #09090b); raised/zone surfaces get only a
   faint Tiffany tint. Plus: full-width layout, no neon, clean active
   nav, Exo 2 everywhere (without breaking icon fonts).
   ============================================================ */
:root,
.dark-theme {
    --unia-base:        #09090b;   /* page / main surface — GiperDocs base */
    --unia-panel:       #0d0f13;   /* raised panel */
    --unia-zone:        #0c1315;   /* base + faint tiffany (distinguished zone) */
    --unia-zone-hover:  #0f1b1c;   /* a touch more tiffany on hover */
    --unia-modal-c:     #12141a;   /* modal / dialog */
    --unia-accent-c:    #0abab5;

    /* primary surfaces -> single base */
    --color-background:                          var(--unia-base) !important;
    --color-background-stream-message-content:   var(--unia-base) !important;
    --color-background-private-message-content:  var(--unia-base) !important;
    --color-background-navbar:                   var(--unia-base) !important;
    --color-background-inbox:                     var(--unia-base) !important;
    --color-background-gradient-start:           var(--unia-base) !important;
    --color-background-gradient-end:             var(--unia-base) !important;

    /* raised / zone surfaces -> panel or faint-tiffany zone */
    --color-background-box:                       var(--unia-panel) !important;
    --color-background-box-muted:                 var(--unia-panel) !important;
    --color-background-modal:                     var(--unia-modal-c) !important;
    --color-background-popover:                   var(--unia-modal-c) !important;
    --color-background-popover-menu:              var(--unia-modal-c) !important;
    --color-background-emoji-picker-popover:      var(--unia-modal-c) !important;
    --color-background-inbox-row:                 var(--unia-panel) !important;
    --color-background-inbox-search:              var(--unia-zone) !important;
    --color-background-recent-view-row:           var(--unia-panel) !important;
    --color-background-recent-view-unread-row:    var(--unia-zone) !important;
    --color-background-search:                    var(--unia-zone) !important;
    --color-background-private-message-header:    var(--unia-zone) !important;

    /* hover / active -> progressively stronger tiffany tint */
    --color-background-box-muted-hover:                  var(--unia-zone-hover) !important;
    --color-background-inbox-row-hover:                  var(--unia-zone-hover) !important;
    --color-background-recent-view-row-hover:            var(--unia-zone-hover) !important;
    --color-background-recent-view-unread-row-hover:     var(--unia-zone-hover) !important;
    --color-background-hover-narrow-filter:              var(--unia-zone) !important;
    --color-background-active-narrow-filter:             rgba(10, 186, 181, 0.16) !important;
    --color-background-hover-popover-menu:               var(--unia-zone-hover) !important;
    --color-background-active-popover-menu:              rgba(10, 186, 181, 0.16) !important;
    --color-background-search-option-hover:              var(--unia-zone-hover) !important;
    --color-background-inbox-search-hover:               var(--unia-zone-hover) !important;
    --color-background-inbox-search-focus:               var(--unia-zone-hover) !important;

    /* unread badge -> tiffany */
    --color-background-unread-counter:           rgba(10, 186, 181, 0.22) !important;
    --color-background-unread-counter-no-alpha:  #0e2b2a !important;
}

/* 9.2 Force the big containers to the single base background (some use raw
   colors, not tokens). */
body,
.app,
.app-main,
#navbar-container,
.header,
.header-main,
#left-sidebar,
.left-sidebar,
#right-sidebar,
.right-sidebar,
.app-main .column-middle,
.column-left,
.column-right,
#message_feed_container,
#compose,
.compose-box {
    background-color: var(--unia-base) !important;
}

/* 9.3 FULL WIDTH — remove Zulip's centered max-width on the content column. */
.header-main,
.app-main .column-middle,
.app-main .column-middle .column-middle-inner,
#message_feed_container,
.message_list,
.recipient_row,
.message_row,
.messagebox,
#compose-container,
#compose-content {
    max-width: none !important;
    width: auto !important;
}

/* 9.4 NO NEON — kill the glow box-shadows on inputs / compose / search /
   pills; replace focus with a clean 1px tiffany ring. */
#compose,
.compose-box,
#compose-container,
#compose-content,
#compose-textarea,
.message_edit_content,
textarea,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
.navbar-search,
#searchbox,
#searchbox .input,
.pill-container,
.compose_table {
    box-shadow: none !important;
}
#compose-textarea:focus,
.message_edit_content:focus,
textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus,
.pill-container:focus-within {
    box-shadow: inset 0 0 0 1px var(--unia-accent-c) !important;
    border-color: var(--unia-accent-c) !important;
    outline: none !important;
}

/* 9.5 Compose box + its inner field -> clean panel surfaces, no rim glow. */
#compose,
.compose-box,
#compose-container {
    border-top: 1px solid var(--unia-border-default, rgba(255,255,255,0.07)) !important;
    box-shadow: none !important;
}
#compose-textarea,
.message_edit_content,
#searchbox .input,
.navbar-search input {
    background-color: var(--unia-zone) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important;
}

/* 9.6 Clean ACTIVE nav item — tiffany tint + inset accent bar, no boxy mess. */
.narrow-filter.active-filter,
.narrow-filter.active,
li.active-sub-filter,
#left-sidebar .active-filter,
#views-label-container .active-filter,
.left-sidebar-navigation-list .active-filter {
    background-color: rgba(10, 186, 181, 0.16) !important;
    border-radius: 6px !important;
    box-shadow: inset 3px 0 0 0 var(--unia-accent-c) !important;
}
.narrow-filter.active-filter a,
.narrow-filter.active-filter .filter-icon,
#left-sidebar .active-filter a,
#views-label-container .active-filter span,
.left-sidebar-navigation-list .active-filter .left-sidebar-navigation-label {
    color: var(--unia-accent-c) !important;
}

/* 9.7 Exo 2 EVERYWHERE — but never on icon-font elements (would break glyphs). */
body,
button,
input,
textarea,
select,
optgroup,
.app,
.message_content,
.rendered_markdown,
.left-sidebar,
.right-sidebar,
.header,
h1, h2, h3, h4, h5, h6,
.sidebar-title,
.fl,
.narrow_description,
#compose-textarea {
    font-family: "Exo 2", "Source Sans 3", "Helvetica Neue", sans-serif !important;
}

/* ============================================================
   PHASE 10 — visual-feedback round (v3 -> v4)
   Base bg = dark gray + faint Tiffany (NOT pure black, GiperDocs feel);
   Zulip blue links/buttons -> UNIA violet #cd0cd0; Zulip lavender accents
   -> Tiffany; burger -> Tiffany; search fills navbar; sidebar rows taller;
   active item: accent bar flush to edge + our text colour; compose field
   uses our tinted tone.
   ============================================================ */
:root,
.dark-theme {
    --unia-base:        #0c1214;   /* main surface everywhere — gray + faint tiffany */
    --unia-panel:       #0f181a;
    --unia-zone:        #13201f;   /* distinguished zone / compose / search field */
    --unia-zone-hover:  #182a28;
    --unia-modal-c:     #101a1c;
    --unia-accent-c:    #0abab5;   /* tiffany — primary accent */
    --unia-violet-c:    #cd0cd0;   /* UNIA violet — replaces Zulip's blue */

    /* primary surfaces -> tinted base */
    --color-background:                          var(--unia-base) !important;
    --color-background-stream-message-content:   var(--unia-base) !important;
    --color-background-private-message-content:  var(--unia-base) !important;
    --color-background-navbar:                   var(--unia-base) !important;
    --color-background-inbox:                     var(--unia-base) !important;
    --color-background-gradient-start:           var(--unia-base) !important;
    --color-background-gradient-end:             var(--unia-base) !important;

    /* Zulip BLUE (links / buttons) -> UNIA violet */
    --color-link:                 var(--unia-violet-c) !important;
    --color-link-hover:           #e24be4 !important;
    --color-link-underline:       rgba(205, 12, 208, 0.4) !important;
    --color-link-underline-hover: var(--unia-violet-c) !important;
    --color-markdown-link:        var(--unia-violet-c) !important;
    --color-markdown-link-hover:  #e24be4 !important;
    --color-markdown-code-link:   var(--unia-violet-c) !important;

    /* Zulip LAVENDER accents -> Tiffany */
    --color-text-self-direct-mention: var(--unia-accent-c) !important;
    --color-links:                    var(--unia-accent-c) !important;
}

/* base bg on big containers */
body, .app, .app-main, #navbar-container, .header, .header-main,
#left-sidebar, .left-sidebar, #right-sidebar, .right-sidebar,
.app-main .column-middle, .column-left, .column-right,
#message_feed_container, #compose, .compose-box {
    background-color: var(--unia-base) !important;
}

/* compose inner field + search input -> our tinted tone (not Zulip gray) */
#compose-textarea, .message_edit_content,
#searchbox .input, #searchbox input, .navbar-search input {
    background-color: var(--unia-zone) !important;
    color: var(--color-text, #e6edf3) !important;
}

/* FULL WIDTH — stretch the app, kill centering margins */
.app-main, .header-main {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* SEARCH — fill the navbar slot instead of a 150px stub */
:root, .dark-theme { --search-box-width: 26em !important; }
#searchbox, #searchbox-input-container { width: 100% !important; }

/* BURGER toggle -> Tiffany */
.left-sidebar-toggle-button,
.left-sidebar-toggle-button .zulip-icon,
.left-sidebar-toggle-button i {
    color: var(--unia-accent-c) !important;
}

/* blue inline actions ("Browse N channels", "Invite users", subscribe) -> violet */
.show-more-streams, .show-all-streams, .add_streams, .subscribe-button,
.invite-user-link, a.btn-link, #left-sidebar .sidebar-action a {
    color: var(--unia-violet-c) !important;
}

/* SIDEBAR rows — a bit taller, more breathing room */
.narrow-filter,
.left-sidebar-navigation-list li,
#views-label-container .left-sidebar-navigation-list li,
.dm-list .dm-box {
    min-height: 28px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* ACTIVE item — accent bar FLUSH to the edge + our (tiffany) text, no boxy offset */
.narrow-filter.active-filter,
.narrow-filter.active,
li.active-sub-filter,
#left-sidebar .active-filter,
.left-sidebar-navigation-list .active-filter,
.dm-list .active-filter,
.dm-box.active-filter {
    background-color: rgba(10, 186, 181, 0.16) !important;
    margin-left: 0 !important;
    padding-left: 11px !important;
    border-radius: 0 6px 6px 0 !important;
    border-left: 3px solid var(--unia-accent-c) !important;
    box-shadow: none !important;
}
.narrow-filter.active-filter *,
.active-sub-filter *,
#left-sidebar .active-filter *,
.dm-list .active-filter *,
.dm-box.active-filter * {
    color: var(--unia-accent-c) !important;
}

/* ============================================================
   PHASE 11 — match GiperDocs 1:1 (v4 -> v5)
   Neutral surfaces (NO green/teal fill — GiperDocs is blue-gray #0d0f13).
   nav-item component copied from GiperDocs index.css §4. Compose controls
   de-lavendered (--color-compose-send-control-button). Sidebar rows spaced
   the NATIVE way (line-height var) — the min-height hack that overlapped is
   reverted. Inputs use GiperDocs §5 neutral field (white/5), not green.
   ============================================================ */
:root,
.dark-theme {
    --unia-base:    #0d0f13;   /* GiperDocs panel — neutral blue-gray, NOT teal */
    --unia-panel:   #0d0f13;
    --unia-zone:    #14171d;   /* neutral hover/zone */
    --unia-modal-c: #12141a;
    --unia-field:   rgba(255, 255, 255, 0.05);   /* GiperDocs §5 input fill — neutral */
    --unia-accent-c: #0abab5;

    /* primary surfaces -> neutral base */
    --color-background:                          var(--unia-base) !important;
    --color-background-stream-message-content:   var(--unia-base) !important;
    --color-background-private-message-content:  var(--unia-base) !important;
    --color-background-navbar:                   var(--unia-base) !important;
    --color-background-inbox:                     var(--unia-base) !important;

    /* de-lavender compose controls (Drafts / close-X / ⋮ options) */
    --color-compose-send-control-button:             rgba(255, 255, 255, 0.55) !important;
    --color-compose-send-control-button-interactive: var(--unia-accent-c) !important;
    --color-icon-purple:                             var(--unia-accent-c) !important;
    --color-input-pill-close:                        rgba(255, 255, 255, 0.55) !important;

    /* send button -> tiffany (Zulip dark theme makes it lavender-blue) */
    --color-compose-send-button-background:             var(--unia-accent-c) !important;
    --color-compose-send-button-background-interactive: #099f9a !important;

    /* taller sidebar rows the NATIVE way (no min-height hacks) */
    --line-height-sidebar-row:          2em !important;
    --line-height-sidebar-row-prominent: 2.15em !important;
}

/* revert PHASE 10 row hacks that caused overlap */
.narrow-filter,
.left-sidebar-navigation-list li,
#views-label-container .left-sidebar-navigation-list li,
.dm-list .dm-box {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* neutral surfaces on big containers + compose shell */
body, .app, .app-main, #navbar-container, .header, .header-main,
#left-sidebar, .left-sidebar, #right-sidebar, .right-sidebar,
.app-main .column-middle, .column-left, .column-right,
#message_feed_container, #compose, .compose-box, .compose_table,
#compose-content, .message_edit_form {
    background-color: var(--unia-base) !important;
}

/* compose textarea + search + topic input -> GiperDocs neutral field (NOT green) */
#compose-textarea, .message_edit_content,
#searchbox .input, #searchbox input, .navbar-search input,
input#stream_message_recipient_topic, #compose_select_recipient_widget,
.compose_select_recipient-dropdown-list-container {
    background-color: var(--unia-field) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #fafafa !important;
    box-shadow: none !important;
}
#compose-textarea:focus, .message_edit_content:focus,
#searchbox input:focus, input#stream_message_recipient_topic:focus {
    border-color: rgba(10, 186, 181, 0.30) !important;
    box-shadow: 0 0 0 1px rgba(10, 186, 181, 0.50) !important;
    outline: none !important;
}

/* nav rows: stable geometry — idle keeps transparent borders so active doesn't jump */
.narrow-filter,
.left-sidebar-navigation-list li,
.dm-list .dm-box {
    border-left: 3px solid transparent;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-radius: 8px;
}
.narrow-filter a,
.left-sidebar-navigation-label,
.dm-box a,
.dm-list .dm-box a {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* ACTIVE nav item = GiperDocs §4 .nav-item-active */
.narrow-filter.active-filter,
.narrow-filter.active,
li.active-sub-filter,
#left-sidebar .active-filter,
.left-sidebar-navigation-list .active-filter,
.dm-list .active-filter,
.dm-box.active-filter {
    background-color: rgba(10, 186, 181, 0.20) !important;
    border-left: 3px solid var(--unia-accent-c) !important;
    border-top: 1px solid rgba(10, 186, 181, 0.30) !important;
    border-bottom: 1px solid rgba(10, 186, 181, 0.30) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 20px rgba(10, 186, 181, 0.25) !important;
    margin-left: 0 !important;
}
.narrow-filter.active-filter,
.narrow-filter.active-filter a,
.active-sub-filter, .active-sub-filter a,
#left-sidebar .active-filter, #left-sidebar .active-filter a,
.left-sidebar-navigation-list .active-filter .left-sidebar-navigation-label,
.dm-list .active-filter, .dm-list .active-filter a {
    color: #ffffff !important;
}

/* ============================================================
   PHASE 12 — readability + single-source blue->violet (v5 -> v6)
   (1) De-gray text: Zulip ships text-default white/75, sidebar headings 43%,
       compose-toolbar icons white/55, placeholders white/50 — all dimmer than
       GiperDocs. Brighten to GiperDocs contrast.
   (2) ACTIVE nav text = Tiffany EVERYWHERE (DM rows were forced white).
   (3) ONE place: every saturated-blue ACCENT token -> UNIA violet #cd0cd0
       (links, urls, table/recent links, unread marker, focus outline, gear-blue,
       copy/tab icons). Neutral cool-gray surfaces (modal/popover/reaction) are
       deliberately left untouched.
   ============================================================ */
:root,
.dark-theme {
    --unia-violet:  #cd0cd0;
    --unia-violet-hi: #e24be4;

    /* (1) brighter, GiperDocs-grade text */
    --color-text-default:              hsl(0deg 0% 100% / 0.92) !important;
    --color-text-message-default:      hsl(0deg 0% 100% / 0.92) !important;
    --color-text-message-header:       hsl(0deg 0% 100% / 0.92) !important;
    --color-text-message-view-header:  hsl(0deg 0% 100% / 0.92) !important;
    --color-text-sidebar-heading:      hsl(0deg 0% 100% / 0.60) !important;
    --color-text-sidebar-popover-menu: hsl(0deg 0% 100% / 0.90) !important;
    --color-text-search-placeholder:   hsl(0deg 0% 100% / 0.65) !important;
    /* compose toolbar buttons (emoji / bold / link / settings …) — were white/55 */
    --color-composebox-button:         hsl(0deg 0% 100% / 0.80) !important;

    /* (3) every blue ACCENT -> violet, defined once */
    --color-link:                       var(--unia-violet) !important;
    --color-link-hover:                 var(--unia-violet-hi) !important;
    --color-link-underline:             hsl(301deg 89% 44% / 0.30) !important;
    --color-link-underline-hover:       var(--unia-violet) !important;
    --color-link-underline-alternate:   hsl(301deg 89% 44% / 0.40) !important;
    --color-markdown-link:              var(--unia-violet) !important;
    --color-markdown-link-hover:        var(--unia-violet-hi) !important;
    --color-text-url:                   var(--unia-violet) !important;
    --color-text-url-hover:             var(--unia-violet-hi) !important;
    --color-text-sender-name-hover:     var(--unia-violet-hi) !important;
    --color-recent-view-link:           var(--unia-violet) !important;
    --color-recent-view-link-hover:     var(--unia-violet-hi) !important;
    --color-table-link:                 var(--unia-violet) !important;
    --color-table-link-active:          var(--unia-violet) !important;
    --color-table-link-hover:           var(--unia-violet-hi) !important;
    --color-table-link-decoration:        hsl(301deg 89% 44% / 0.20) !important;
    --color-table-link-decoration-active: var(--unia-violet) !important;
    --color-table-link-decoration-hover:  hsl(301deg 89% 44% / 0.70) !important;
    --color-gear-menu-blue-text:        var(--unia-violet) !important;
    --color-fill-hover-copy-icon:       var(--unia-violet) !important;
    --color-tab-picker-icon:            var(--unia-violet) !important;
    --color-unread-marker:              var(--unia-violet) !important;
    /* selected/focused message box = Tiffany (matches active menu item),
       noticeable but softened so it accents without shouting. Applies ONLY to
       .selected_message .messagebox-content — i.e. the one focused message. */
    --color-selected-message-outline:   hsl(177deg 89% 38% / 0.55) !important;
    --color-outline-focus:              var(--unia-violet) !important;
}

/* give the focused-message box a faint Tiffany glow like the active nav item */
.selected_message .messagebox-content {
    outline-width: 1.5px !important;
    box-shadow: 0 0 14px rgba(10, 186, 181, 0.18) !important;
}

/* ---- message header / row span the FULL message column in EVERY state ----
   We widened the shell to full width; the sticky stream-topic ("olive") bar and
   recipient rows must follow, not stay truncated to the controls. */
.message_header,
.message_header_stream,
.message-header-contents,
.recipient_row,
.message_row,
.messagebox,
.message-list,
#message_feed_container,
#message_feed_container .message_row {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* (2) ACTIVE nav row text = Tiffany everywhere (override the white above) */
.narrow-filter.active-filter,
.narrow-filter.active-filter *,
.narrow-filter.active *,
li.active-sub-filter, li.active-sub-filter *,
#left-sidebar .active-filter,
#left-sidebar .active-filter *,
.left-sidebar-navigation-list .active-filter .left-sidebar-navigation-label,
.dm-list .active-filter,
.dm-list .active-filter *,
.dm-box.active-filter,
.dm-box.active-filter * {
    color: var(--unia-accent-c) !important;
}
/* keep unread/status counters inside an active row legible (not tiffany-on-tiffany) */
.dm-list .active-filter .unread_count,
.narrow-filter.active-filter .unread_count {
    color: #fafafa !important;
}

/* compose textarea placeholder + edit box — brighter, not washed out */
#compose-textarea::placeholder,
.message_edit_content::placeholder,
textarea::placeholder, input::placeholder {
    color: hsl(0deg 0% 100% / 0.55) !important;
    opacity: 1 !important;
}

/* blue inline channel actions + their leading circle-plus icon -> violet */
.show-more-streams, .show-more-streams *,
.show-all-streams, .add_streams, .subscribe-button,
#left-sidebar .sidebar-action a,
.stream-list-filter ~ .show-more-streams {
    color: var(--unia-violet) !important;
}
.show-more-streams .zulip-icon,
.show-more-streams svg,
.show-more-streams .zulip-icon-plus {
    color: var(--unia-violet) !important;
    fill: var(--unia-violet) !important;
}