/* =============================================================
   public/assets/css/theme-revamp.css — Echoo Pro
   Design-system overlay. Loaded LAST in every layout so its
   rules win the cascade. Replaces the patchwork of three-orange
   brand colors, gradient logos, pulsing dots, hover-lifts and
   white-on-white chat bubbles with a single calm system.
   ============================================================= */

/* ============================================================
   1. TOKENS — single source of truth
   ============================================================ */
:root {
    /* Neutrals — the workhorse */
    --n-0:   #ffffff;
    --n-50:  #fafbfc;
    --n-100: #f3f4f6;
    --n-150: #eef0f3;
    --n-200: #e5e7eb;
    --n-300: #d1d5db;
    --n-400: #9ca3af;
    --n-500: #6b7280;
    --n-600: #4b5563;
    --n-700: #374151;
    --n-800: #1f2937;
    --n-900: #111827;

    /* Brand accent — used sparingly */
    --accent:        #e76f51;
    --accent-hover:  #cf5c3f;
    --accent-active: #b94f33;
    --accent-tint:   rgba(231,111,81,0.10);
    --accent-tint-2: rgba(231,111,81,0.16);

    /* Surfaces */
    --surface:        var(--n-0);
    --surface-sunken: #f7f8fa;
    --surface-raised: var(--n-0);

    /* Borders */
    --br-subtle: var(--n-150);
    --br:        var(--n-200);
    --br-strong: var(--n-300);

    /* Text */
    --tx:         var(--n-900);
    --tx-secondary: var(--n-600);
    --tx-muted:   var(--n-500);
    --tx-soft:    var(--n-400);
    --tx-on-accent: #ffffff;

    /* Semantic */
    --success: #16a34a;
    --success-tint: #ecfdf5;
    --warn:    #d97706;
    --warn-tint: #fffbeb;
    --danger:  #dc2626;
    --danger-tint: #fef2f2;
    --info:    #2563eb;
    --info-tint: #eff6ff;

    /* Status dot fills */
    --dot-online:  #16a34a;
    --dot-away:    #d97706;
    --dot-busy:    #dc2626;
    --dot-offline: var(--n-300);

    /* Radii */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-pill: 999px;

    /* Elevation — keep restrained */
    --shadow-1: 0 1px 2px rgba(17,24,39,0.06);
    --shadow-2: 0 1px 3px rgba(17,24,39,0.08), 0 1px 2px rgba(17,24,39,0.04);
    --shadow-3: 0 4px 12px rgba(17,24,39,0.10);

    /* Motion */
    --t-fast: 120ms ease;
    --t-base: 160ms ease;
    --t-slow: 240ms ease;

    /* ── Legacy aliases — bridge old rules to new tokens ── */
    --main-background:    var(--surface);
    --primary-brand:      var(--n-900);
    --secondary-surface:  var(--surface);
    --my-bubble:          var(--n-100);
    --muted-accent:       var(--tx-muted);
    --border-subtle:      var(--br);
    --logo-orange:        var(--accent);
    --sidebar-light:      #f4f5f7;
    --sidebar-left-text:  var(--n-900);
    --bg-white:           var(--surface);
    --bg-secondary:       var(--surface-sunken);
    --text-primary:       var(--tx);
    --text-muted:         var(--tx-muted);
    --border-color:       var(--br);
    --brand-primary:      var(--n-900);
    --bubble-mine:        var(--n-100);

    /* Right sidebar — light parity with the LEFT sidebar so both rails
       read as "anchored navigation" against the white chat column.
       Pure white was making the right rail dissolve into the page. */
    --rs-bg:           var(--sidebar-light);      /* #f4f5f7 — same as left */
    --rs-bg-header:    var(--sidebar-light);
    --rs-text:         var(--tx);
    --rs-text-muted:   var(--tx-muted);
    --rs-icon:         var(--tx-muted);
    --rs-border:       var(--br);
    --rs-hover:        #eaecf0;                   /* one step darker than rs-bg */
    --rs-active:       #e1e4e9;
    --rs-avatar-ring:  var(--br);
    --rs-signout:      var(--danger);
    --rs-signout-hover: var(--danger-tint);
}

/* Dark theme — token overrides only, the rest cascades */
:root[data-theme="dark"] {
    --surface:        #11161d;
    --surface-sunken: #0c1015;
    --surface-raised: #161c25;

    --br-subtle: #1f2630;
    --br:        #2a323e;
    --br-strong: #353f4d;

    --tx:           #e6eaef;
    --tx-secondary: #c4cad3;
    --tx-muted:     #8a93a0;
    --tx-soft:      #6b7480;

    --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-2: 0 1px 3px rgba(0,0,0,0.45);
    --shadow-3: 0 4px 12px rgba(0,0,0,0.5);

    --sidebar-light: #131922;
    --my-bubble:     #1d2733;

    --rs-bg:        var(--surface-raised);
    --rs-bg-header: var(--surface-raised);
    --rs-hover:     #1c232d;
    --rs-active:    #232b36;
}

/* ============================================================
   2. RESETS — kill the AI/template tics
   ============================================================ */

/* Body inherits font once; descendants no longer redeclare it.
   This neutralizes the 40+ font-family declarations sprinkled
   through dashboard.css. */
body,
button, input, textarea, select,
.feature-item, .member-item, .message-bubble, .message-input,
.member-name, .member-modal-name, .selection-member-name,
.message-sender, .message-time,
h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Helvetica, Arial, sans-serif !important;
}

/* The "AI-dribbble" gradient logo is the most-flagged offender.
   Replace with a flat wordmark. */
.brand,
.brand:hover {
    transform: none !important;
    box-shadow: none !important;
    color: var(--accent) !important;
    text-decoration: none !important;
}
.brand:hover .brand-logo,
.brand-logo {
    transform: none !important;
    filter: none !important;
}
.brand-text,
.brand:hover .brand-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    color: var(--tx) !important;
    text-shadow: none !important;
    letter-spacing: -0.01em !important;
    font-weight: 700 !important;
}
.brand-text::after {
    display: none !important;
}

/* Pulsing status dots — make them flat. The pulse on 30 dots is
   visually exhausting and reads as "look at me". */
.status-indicator,
.member-status .status-indicator,
.chat-status-indicator .status-indicator {
    animation: none !important;
    box-shadow: none !important;
    border-width: 2px !important;
    border-style: solid !important;
}
.status-indicator.online  { background-color: var(--dot-online) !important; }
.status-indicator.away    { background-color: var(--dot-away)   !important; }
.status-indicator.busy    { background-color: var(--dot-busy)   !important; }
.status-indicator.offline { background-color: var(--dot-offline) !important; }
@keyframes onlinePulse { from {} to {} }   /* kill the keyframe content */

/* Read-receipt animations — the ticks should be silent. */
.status-check,
.status-read .status-check,
.status-delivered .status-check {
    animation: none !important;
    transition: color var(--t-fast) !important;
}
.status-read .status-check { color: var(--success) !important; }
.status-sent .status-check,
.status-delivered .status-check { color: var(--tx-muted) !important; }

/* Hover-lift transforms — flat is the new fancy. The cards
   shift background tone instead. */
.stat-card:hover,
.selection-member-item:hover,
.member-modal-item:hover,
.member-item:hover,
.feature-item:hover,
.start-chat-section .btn:hover,
.start-chat-section .btn:active,
.attach-file-btn:hover,
.attach-file-btn:active,
.file-item:hover,
.btn-start-chat:hover,
.file-action-btn:hover,
.file-message-card:hover,
.btn-primary:hover {
    transform: none !important;
}

/* Toast notifications — flat, single color, no blur. */
.toast-notification {
    backdrop-filter: none !important;
    border: 1px solid transparent !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-2) !important;
}
.toast-notification.error,
.toast-notification.success {
    background: var(--surface) !important;
    color: var(--tx) !important;
}
.toast-notification.error   { border-color: var(--danger)  !important; }
.toast-notification.success { border-color: var(--success) !important; }
.toast-notification.error i   { color: var(--danger)  !important; }
.toast-notification.success i { color: var(--success) !important; }

/* Drag-over decoration on the composer — less circus. */
.message-input-wrapper.drag-over {
    border-color: var(--accent) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
}
.message-input-wrapper.drag-over::after {
    background: var(--accent) !important;
    box-shadow: none !important;
}

/* ============================================================
   3. CORE COMPONENTS — buttons, inputs, cards, modals
   ============================================================ */

/* Buttons — one system. The Bootstrap btn-primary gets a sane
   makeover; outline variants follow the same accent. */
.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--tx-on-accent) !important;
    border-radius: var(--r-md) !important;
    font-weight: 600 !important;
    padding: 0.55rem 1.1rem !important;
    box-shadow: none !important;
    transition: background var(--t-fast) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: var(--tx-on-accent) !important;
}
.btn-primary:active { background: var(--accent-active) !important; }
.btn-primary:disabled,
.btn-primary[disabled] { background: var(--n-300) !important; border-color: var(--n-300) !important; }

.btn-outline-primary {
    color: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    background: transparent !important;
    border-radius: var(--r-md) !important;
    font-weight: 600 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--accent-tint) !important;
    color: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.btn-outline-secondary {
    color: var(--tx-secondary) !important;
    border: 1px solid var(--br) !important;
    background: var(--surface) !important;
    border-radius: var(--r-md) !important;
}
.btn-outline-secondary:hover {
    background: var(--surface-sunken) !important;
    color: var(--tx) !important;
    border-color: var(--br-strong) !important;
}

/* Focus rings — consistent across inputs, buttons, links. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}
.form-control:focus,
.member-search-input:focus,
.unified-search-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
    outline: none !important;
}

/* Cards / modals — flat with a subtle border, one shadow level. */
.modal-content {
    border: 1px solid var(--br) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-3) !important;
}
.modal-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--br-subtle) !important;
    padding: 1rem 1.25rem !important;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
}
.modal-title { font-weight: 600 !important; color: var(--tx) !important; }
.modal-footer { border-top: 1px solid var(--br-subtle) !important; padding: 0.75rem 1.25rem !important; }

/* ============================================================
   4. LEFT SIDEBAR — quieter, flatter, more disciplined
   ============================================================ */
.left-sidebar {
    background: var(--sidebar-light) !important;
    border-right: 1px solid var(--br-subtle) !important;
}
.left-sidebar-header,
.org-info,
.current-user-profile {
    background: var(--sidebar-light) !important;
    border-bottom: 1px solid var(--br-subtle) !important;
}
.org-name { color: var(--tx) !important; font-weight: 600 !important; }
.org-slug { color: var(--tx-muted) !important; }

.current-user-profile:hover { background: var(--n-150) !important; }
.current-user-avatar {
    border: 2px solid var(--surface) !important;
    box-shadow: var(--shadow-1) !important;
}
.profile-indicator { color: var(--tx-soft) !important; }
.current-user-details h4 { color: var(--tx) !important; font-weight: 600 !important; }
.current-user-details p  { color: var(--tx-muted) !important; }

/* Members list */
.members-list { background: var(--sidebar-light) !important; }
.section-title {
    color: var(--tx-muted) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
}

.member-item {
    border-radius: var(--r-sm) !important;
    padding: 0.5rem 0.625rem !important;
    transition: background var(--t-fast) !important;
}
.member-item:hover { background: var(--n-150) !important; color: var(--tx) !important; }
.member-item.active {
    background: var(--n-200) !important;
    color: var(--tx) !important;
}
.member-item.active .member-name { color: var(--tx) !important; }
.member-name { color: var(--tx) !important; font-weight: 500 !important; }

/* Pinned items — small inline pin icon, no aggressive yellow stripe. */
.member-item.pinned-item {
    border-left: none !important;
    background: transparent !important;
}
.member-item.pinned-item:hover { background: var(--n-150) !important; }
.pinned-section-label {
    color: var(--tx-muted) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    padding: 0.75rem 1rem 0.25rem !important;
}
.pinned-section-label i  { color: var(--tx-muted) !important; }
.member-item .pin-indicator { color: var(--tx-muted) !important; opacity: 0.7; }

/* Invite link (under brand) */
.invite-section .invite-link {
    color: var(--tx-secondary) !important;
    background: transparent !important;
    border-radius: var(--r-sm) !important;
}
.invite-section .invite-link:hover {
    background: var(--n-150) !important;
    color: var(--tx) !important;
}

/* Unified search input */
.unified-search-wrap {
    background: var(--surface) !important;
    border: 1px solid var(--br) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
.unified-search-wrap:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
}
.unified-search-input { color: var(--tx) !important; }
.unified-search-input::placeholder { color: var(--tx-soft) !important; }
.unified-search-icon { color: var(--tx-soft) !important; }

/* Status pill below user info */
.user-status-pill {
    background: var(--surface) !important;
    border: 1px solid var(--br) !important;
    border-radius: var(--r-pill) !important;
    color: var(--tx-secondary) !important;
    transition: background var(--t-fast) !important;
}
.user-status-pill:hover { background: var(--n-150) !important; }

/* ============================================================
   5. RIGHT SIDEBAR — light parity (was dark navy island)
   ============================================================ */
.right-sidebar {
    background: var(--rs-bg) !important;
    border-left: 1px solid var(--br-subtle) !important;
    box-shadow: none !important;
}
.right-sidebar-header {
    background: var(--rs-bg-header) !important;
    border-bottom: 1px solid var(--br-subtle) !important;
}
.right-sidebar-header .user-avatar {
    border: 2px solid var(--br) !important;
    box-shadow: none !important;
}
.right-sidebar-header .user-info h4 { color: var(--tx) !important; }
.right-sidebar-header .user-info p  { color: var(--tx-muted) !important; }
.right-sidebar-header .btn-link {
    color: var(--tx-muted) !important;
    border-radius: var(--r-sm) !important;
}
.right-sidebar-header .btn-link:hover {
    background: var(--n-150) !important;
    color: var(--tx) !important;
}

.features-list {
    background: var(--rs-bg) !important;
    scrollbar-color: var(--n-300) transparent !important;
}
.features-list::-webkit-scrollbar-thumb {
    background: var(--n-300) !important;
}

.feature-section .section-title {
    color: var(--tx-muted) !important;
    letter-spacing: 0.05em !important;
    font-weight: 600 !important;
}

.feature-item {
    color: var(--tx-secondary) !important;
    font-weight: 500 !important;
    border-radius: var(--r-sm) !important;
    transition: background var(--t-fast), color var(--t-fast) !important;
}
.feature-item i { color: var(--tx-muted) !important; }
.feature-item:hover {
    background: var(--n-150) !important;
    color: var(--tx) !important;
}
.feature-item:hover i { color: var(--tx) !important; }
.feature-item:active { background: var(--n-200) !important; }

.feature-item-signout {
    color: var(--danger) !important;
}
.feature-item-signout i { color: var(--danger) !important; }
.feature-item-signout:hover {
    background: var(--danger-tint) !important;
    color: var(--danger) !important;
}
.feature-item-signout:hover i { color: var(--danger) !important; }

/* ============================================================
   6. CHAT HEADER + ACTIONS
   ============================================================ */
.chat-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--br-subtle) !important;
    box-shadow: none !important;
    padding: 0.75rem 1.25rem !important;
}
.chat-contact-details h4 { color: var(--tx) !important; font-weight: 600 !important; }
.chat-status { color: var(--tx-muted) !important; }

.chat-actions .btn {
    color: var(--tx-muted) !important;
    border-radius: var(--r-sm) !important;
    background: transparent !important;
    border: none !important;
    transition: background var(--t-fast), color var(--t-fast) !important;
}
.chat-actions .btn:hover {
    background: var(--n-100) !important;
    color: var(--tx) !important;
}

/* ============================================================
   7. CHAT MESSAGES — Slack-style: no bubble for others,
      light-gray bubble for own.
   ============================================================ */
.messages-container {
    background: var(--surface) !important;
    padding: 1rem 1.25rem !important;
    gap: 0.125rem !important;
}

/* OTHER — light bubble with subtle border, distinct from white surface. */
.message-group.other .message-bubble {
    background: var(--n-100) !important;
    border: 1px solid var(--br-subtle) !important;
    box-shadow: none !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: var(--r-md) !important;
    color: var(--tx) !important;
    max-width: 560px !important;
}
[data-theme="dark"] .message-group.other .message-bubble {
    background: var(--surface-raised) !important;
    border-color: var(--br-subtle) !important;
}
.message-group.other .message-sender {
    color: var(--tx) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    margin-bottom: 0.125rem !important;
    padding-left: 0 !important;
}
.message-group.other .message-time {
    color: var(--tx-soft) !important;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
}

/* OWN — clearly visible cool-gray fill (slate-200) so the bubble reads
   distinctly against the white chat column, without screaming. */
.message-group.own .message-bubble {
    background: #E2E8F0 !important;          /* slate-200 — clearly visible vs #FFF */
    border: 1px solid #CFD8E3 !important;
    box-shadow: none !important;
    color: var(--tx) !important;
    border-radius: var(--r-md) !important;
    padding: 0.5rem 0.75rem !important;
    max-width: 560px !important;
}
[data-theme="dark"] .message-group.own .message-bubble {
    background: #243245 !important;
    border-color: #2f3e54 !important;
}
.message-group.own .message-sender {
    color: var(--tx-muted) !important;
    font-weight: 500 !important;
    font-size: 0.75rem !important;
}

.message-content { color: var(--tx) !important; line-height: 1.5 !important; }
.message-time    { color: var(--tx-soft) !important; }

/* Message rows — tighter density, smaller avatar */
.message-row { gap: 0.625rem !important; max-width: 100% !important; }
.message-avatar {
    width: 32px !important;
    height: 32px !important;
    background: var(--n-200) !important;
    margin-top: 0 !important;
}
.message-avatar img.avatar-img { border: none !important; }
.message-avatar-spacer { width: 32px !important; }

/* Vertical rhythm between messages from same vs different senders */
.message-group { margin-bottom: 0.875rem !important; }
.message-group.consecutive { margin-bottom: 0.125rem !important; }
.message-group.consecutive.own .message-bubble  { border-radius: var(--r-md) !important; }
.message-group.consecutive.other .message-bubble { border-radius: var(--r-md) !important; }

/* Date separator — thin line, small pill */
.date-separator { margin: 1.5rem 0 0.75rem !important; }
.date-separator::before {
    background: var(--br-subtle) !important;
    height: 1px !important;
}
.date-text {
    background: var(--surface) !important;
    color: var(--tx-muted) !important;
    border: 1px solid var(--br) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 0.25rem 0.625rem !important;
    border-radius: var(--r-pill) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Typing indicator */
.typing-indicator {
    background: var(--surface) !important;
    color: var(--tx-muted) !important;
    border-top: 1px solid var(--br-subtle) !important;
    font-size: 0.78rem !important;
    padding: 0.375rem 1.25rem !important;
    animation: none !important;
}
.typing-dots span { background: var(--tx-muted) !important; }

/* ============================================================
   8. COMPOSER — flat, focused. Mobile gets a single row with
      the "+" tucked inside the input pill (Slack/iMessage).
   ============================================================ */
.chat-input-container {
    background: var(--surface) !important;
    border-top: 1px solid var(--br-subtle) !important;
    padding: 0.75rem 1rem !important;
}

.formatting-toolbar {
    background: var(--surface-sunken) !important;
    border-bottom: 1px solid var(--br-subtle) !important;
    border-radius: var(--r-md) var(--r-md) 0 0 !important;
    padding: 0.375rem 0.5rem !important;
    gap: 0.25rem !important;
}
.formatting-toolbar .btn,
.formatting-toolbar .format-btn,
.formatting-toolbar .chat-tools-btn,
.formatting-toolbar .color-btn,
.formatting-toolbar #attachFileBtn,
.formatting-toolbar #emojiPickerBtn {
    background: transparent !important;
    border: none !important;
    color: var(--tx-muted) !important;
    border-radius: var(--r-sm) !important;
    transition: background var(--t-fast), color var(--t-fast) !important;
}
.formatting-toolbar .btn:hover,
.formatting-toolbar .format-btn:hover,
.formatting-toolbar .chat-tools-btn:hover,
.formatting-toolbar .color-btn:hover,
.formatting-toolbar #attachFileBtn:hover,
.formatting-toolbar #emojiPickerBtn:hover {
    background: var(--n-150) !important;
    color: var(--tx) !important;
}

.message-form .input-group {
    border: 1px solid var(--br) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.message-input-wrapper {
    background: var(--surface) !important;
    border: 1px solid var(--br) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
    transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.message-input-wrapper:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
}
.message-input,
#messageInput {
    background: transparent !important;
    color: var(--tx) !important;
    font-size: 0.9375rem !important;
}

.send-btn {
    background: var(--accent) !important;
    color: var(--tx-on-accent) !important;
    border: none !important;
    border-radius: var(--r-md) !important;
    transition: background var(--t-fast) !important;
}
.send-btn:hover:not(:disabled) {
    background: var(--accent-hover) !important;
    color: var(--tx-on-accent) !important;
}
.send-btn:disabled { background: var(--n-300) !important; color: var(--n-500) !important; }

.attach-file-btn {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--tx-muted) !important;
    border-radius: var(--r-sm) !important;
}
.attach-file-btn:hover {
    background: var(--n-150) !important;
    color: var(--tx) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ============================================================
   9. FILE MESSAGE CARDS — calmer
   ============================================================ */
.file-message-card {
    background: var(--surface) !important;
    border: 1px solid var(--br) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
.file-message-card:hover {
    background: var(--surface-sunken) !important;
    border-color: var(--br-strong) !important;
    box-shadow: none !important;
}
.file-message-card .file-icon {
    background: var(--surface) !important;
    border: 1px solid var(--br-subtle) !important;
    border-radius: var(--r-sm) !important;
}
.file-message-card .file-name { color: var(--tx) !important; font-weight: 500 !important; }
.file-message-card .file-size { color: var(--tx-muted) !important; }
.file-action-btn {
    background: var(--surface) !important;
    border: 1px solid var(--br) !important;
    color: var(--tx-muted) !important;
    border-radius: var(--r-sm) !important;
}
.file-action-btn:hover {
    background: var(--n-150) !important;
    color: var(--tx) !important;
    border-color: var(--br-strong) !important;
}
.file-action-btn.view-btn:hover { color: var(--info) !important; border-color: var(--info) !important; }
.file-action-btn.download-btn:hover { color: var(--success) !important; border-color: var(--success) !important; }

.file-item {
    background: var(--surface) !important;
    border: 1px solid var(--br) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
.file-item:hover {
    border-color: var(--br-strong) !important;
    box-shadow: none !important;
}
.file-item-name { color: var(--tx) !important; }
.file-item-size { color: var(--tx-muted) !important; }

/* Inline image bubble */
.chat-img-bubble img { border-radius: var(--r-md) !important; }

/* Context menu (right-click on message) */
.chat-context-menu {
    background: var(--surface) !important;
    border: 1px solid var(--br) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-2) !important;
}
.chat-context-menu button {
    color: var(--tx) !important;
    font-size: 0.875rem !important;
}
.chat-context-menu button:hover { background: var(--surface-sunken) !important; }
.chat-context-menu .ctx-danger { color: var(--danger) !important; }

/* ============================================================
   10. EMPTY STATE — flat, plain, declarative
   ============================================================ */
.empty-state {
    background: var(--surface) !important;
    color: var(--tx-muted) !important;
}
.empty-state i {
    color: var(--tx-soft) !important;
    font-size: 2.5rem !important;
    margin-bottom: 1rem !important;
}
.empty-state h3 {
    color: var(--tx) !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.375rem !important;
}
.empty-state p {
    color: var(--tx-muted) !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
    max-width: 360px !important;
}

.empty-state-card { background: var(--surface) !important; }
.empty-state-title { color: var(--tx) !important; font-weight: 600 !important; }
.empty-state-sub   { color: var(--tx-muted) !important; }
.empty-state-cta {
    background: var(--accent) !important;
    color: var(--tx-on-accent) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
    transition: background var(--t-fast) !important;
}
.empty-state-cta:hover  { background: var(--accent-hover) !important; }
.empty-state-cta:active { transform: none !important; }

/* ============================================================
   11. CALL EVENTS in chat — quieter
   ============================================================ */
.call-event-card {
    background: var(--surface-sunken) !important;
    border: 1px solid var(--br-subtle) !important;
    color: var(--tx) !important;
}
.call-event-icon {
    background: var(--n-150) !important;
    color: var(--tx-muted) !important;
}
.call-event-card.tone-completed .call-event-icon {
    background: var(--success-tint) !important;
    color: var(--success) !important;
}
.call-event-card.tone-missed .call-event-icon {
    background: var(--danger-tint) !important;
    color: var(--danger) !important;
}
.call-event-card.tone-missed { color: var(--danger) !important; }
.call-event-time { color: var(--tx-soft) !important; }
.call-event-back {
    background: var(--accent) !important;
}
.call-event-back:hover  { background: var(--accent-hover) !important; }
.call-event-back:active { transform: none !important; }

/* ============================================================
   12. ADMIN LAYOUT — neutral near-black sidebar, no orange
       blast on active states, calmer topbar.
   ============================================================ */
.admin-sidebar {
    background: #0b1015 !important;       /* deeper than --n-900 for sidebar contrast */
    border-right: 1px solid #1a2029 !important;
}
.sidebar-brand {
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.sidebar-brand .brand-logo {
    background: var(--accent) !important;
    border-radius: var(--r-sm) !important;
    font-weight: 700 !important;
}
.sidebar-brand .brand-text { color: #fff !important; font-weight: 600 !important; }
.sidebar-brand .brand-sub  { color: rgba(255,255,255,0.35) !important; }

.nav-section {
    color: rgba(255,255,255,0.32) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.25rem 0.25rem !important;
}

.sidebar-nav .nav-link {
    color: rgba(255,255,255,0.72) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.55rem 1.25rem !important;
    transition: background var(--t-fast), color var(--t-fast) !important;
}
.sidebar-nav .nav-link i {
    color: rgba(255,255,255,0.5) !important;
    transition: color var(--t-fast) !important;
}
.sidebar-nav .nav-link:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}
.sidebar-nav .nav-link:hover i { color: #fff !important; }

/* Active state — subtle neutral fill, NOT orange. Strip is a thin
   white accent — matches Linear/Slack admin tone. */
.sidebar-nav .nav-link.active {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}
.sidebar-nav .nav-link.active i { color: #fff !important; }
.sidebar-nav .nav-link.active::before {
    background: var(--accent) !important;
    width: 2px !important;
    border-radius: 0 !important;
}

.nav-badge {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    font-weight: 600 !important;
    padding: 0.1rem 0.5rem !important;
}

.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.05) !important;
}
.sidebar-footer .back-btn {
    background: rgba(255,255,255,0.05) !important;
    color: rgba(255,255,255,0.72) !important;
    border-radius: var(--r-sm) !important;
}
.sidebar-footer .back-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

/* Admin topbar */
.admin-topbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--br-subtle) !important;
    padding: 0.75rem 1.5rem !important;
    box-shadow: none !important;
}
.admin-topbar h5 {
    color: var(--tx) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}
.admin-topbar .admin-badge {
    background: var(--accent-tint) !important;
    color: var(--accent-hover) !important;
    border-radius: var(--r-pill) !important;
    font-weight: 600 !important;
    padding: 0.2rem 0.625rem !important;
}

.admin-content,
.admin-main { background: var(--surface-sunken) !important; }

/* Stat cards — flat, no hover lift */
.stat-card {
    border: 1px solid var(--br-subtle) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
    transition: border-color var(--t-fast) !important;
}
.stat-card:hover {
    border-color: var(--br-strong) !important;
    box-shadow: none !important;
}
.stat-icon { border-radius: var(--r-md) !important; }

/* Flash messages */
.flash-message {
    border-radius: var(--r-md) !important;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: none !important;
}
.alert-success { background: var(--success-tint) !important; border-color: var(--success) !important; color: #166534 !important; }
.alert-danger,
.alert-error   { background: var(--danger-tint) !important; border-color: var(--danger) !important; color: #991b1b !important; }
.alert-warning { background: var(--warn-tint) !important; border-color: var(--warn) !important; color: #92400e !important; }
.alert-info    { background: var(--info-tint) !important; border-color: var(--info) !important; color: #1e40af !important; }

/* ============================================================
   13. AUTH PAGES — align with main app tokens
   ============================================================ */
.auth-body {
    background: var(--surface-sunken) !important;
    color: var(--tx) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Helvetica, Arial, sans-serif !important;
}
.auth-card {
    background: var(--surface) !important;
    border: 1px solid var(--br) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-2) !important;
    padding: 2rem 1.75rem !important;
}
.auth-header h2 {
    color: var(--tx) !important;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
.auth-header p   { color: var(--tx-muted) !important; }
.auth-logo i     { color: var(--accent) !important; }
.auth-logo h1    { color: var(--tx) !important; font-weight: 700 !important; }

.auth-card .form-group label { color: var(--tx) !important; font-weight: 600 !important; font-size: 0.8125rem !important; }
.auth-card .form-control {
    border: 1px solid var(--br) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface) !important;
    color: var(--tx) !important;
    transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.auth-card .form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-tint) !important;
}

.auth-card .btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--r-md) !important;
    padding: 0.625rem 1.1rem !important;
    font-weight: 600 !important;
}
.auth-card .btn-primary:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}
.auth-card .btn-secondary {
    background: var(--surface) !important;
    border: 1px solid var(--br) !important;
    color: var(--tx-secondary) !important;
    border-radius: var(--r-md) !important;
    font-weight: 600 !important;
}
.auth-card .btn-secondary:hover {
    background: var(--surface-sunken) !important;
    color: var(--tx) !important;
    border-color: var(--br-strong) !important;
}

.auth-card a,
.forgot-link { color: var(--accent) !important; }

/* ============================================================
   14. MOBILE — single-row composer, "+" inside input pill,
       tighter list, one accent, no pulse.
   ============================================================ */
@media (max-width: 768px) {

    /* Mobile header — sit cleaner against the rest of the app */
    .mobile-header {
        background: var(--surface) !important;
        border-bottom: 1px solid var(--br-subtle) !important;
        box-shadow: none !important;
    }
    .mobile-brand-text { color: var(--accent) !important; font-weight: 700 !important; }
    .mobile-menu-toggle, .mobile-sidebar-toggle, .mobile-notif-btn {
        color: var(--tx) !important;
        border-radius: var(--r-sm) !important;
    }
    .mobile-menu-toggle:hover, .mobile-sidebar-toggle:hover, .mobile-notif-btn:hover {
        background: var(--n-150) !important;
    }
    .mobile-notif-badge {
        background: var(--accent) !important;
        font-weight: 700 !important;
    }

    /* Mobile contacts header */
    .mobile-contacts-view { background: var(--surface) !important; }
    .mobile-contacts-header {
        background: var(--surface) !important;
        border-bottom: 1px solid var(--br-subtle) !important;
    }
    .mobile-contacts-title { color: var(--tx) !important; font-weight: 700 !important; font-size: 1.25rem !important; }
    .mobile-contacts-subtitle { color: var(--tx-muted) !important; font-size: 0.8125rem !important; }

    /* One section-label style across mobile (was 3 colors). */
    .mobile-section-label,
    .mobile-pinned-label {
        background: var(--surface-sunken) !important;
        color: var(--tx-muted) !important;
        font-size: 0.6875rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.06em !important;
        border-bottom: 1px solid var(--br-subtle) !important;
        padding: 0.5rem 1rem !important;
    }
    .mobile-pinned-label i { color: var(--tx-muted) !important; }

    /* "Browse Groups" inline button — match accent tone, not indigo. */
    .mobile-section-label button,
    .mobile-section-label a {
        color: var(--accent) !important;
        font-weight: 600 !important;
        background: transparent !important;
    }

    /* Contact rows — unified separator, calm hover */
    .mobile-contact-item {
        border-bottom: 1px solid var(--br-subtle) !important;
        padding: 0.875rem 1rem !important;
        min-height: 64px !important;
        transition: background var(--t-fast) !important;
    }
    .mobile-contact-item:active,
    .mobile-contact-item:hover { background: var(--surface-sunken) !important; }
    .mobile-contact-name { color: var(--tx) !important; font-weight: 600 !important; }
    .mobile-contact-last-message { color: var(--tx-muted) !important; }
    .mobile-contact-time { color: var(--tx-soft) !important; }
    .mobile-contact-badge {
        background: var(--accent) !important;
        font-weight: 700 !important;
    }
    .mobile-contact-status { border: 2.5px solid var(--surface) !important; }
    .mobile-contact-status.online { background: var(--dot-online) !important; }
    .mobile-contact-status.offline { background: var(--dot-offline) !important; }

    /* Mobile chat header */
    .chat-header {
        background: var(--surface) !important;
        border-bottom: 1px solid var(--br-subtle) !important;
        box-shadow: none !important;
        padding: 0.5rem 0.75rem !important;
    }
    .mobile-back-btn {
        color: var(--tx) !important;
        border-radius: var(--r-sm) !important;
    }
    .mobile-back-btn:active { background: var(--n-150) !important; }

    /* ── Mobile composer — single row.
       The formatting-toolbar collapses to a zero-height shell. All its
       children are hidden EXCEPT the "+" tools dropdown, which is then
       positioned-absolute over the left edge of the input pill
       (Slack/iMessage pattern). Send button is absolute on the right.
       (We can't use display:none on the toolbar because the "+" lives
       inside it — a hidden parent would hide the button too.) ── */
    .chat-input-container {
        position: relative !important;
        background: var(--surface) !important;
        border-top: 1px solid var(--br-subtle) !important;
        padding: 0.5rem 0.625rem !important;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
    }
    .main-content.conversation-active .formatting-toolbar,
    .formatting-toolbar {
        display: block !important;          /* not flex — we just need a host */
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: 0 !important;
        overflow: visible !important;
        margin: 0 !important;
        position: static !important;
    }
    /* Hide every toolbar child by default… */
    .main-content.conversation-active .formatting-toolbar > *,
    .formatting-toolbar > * {
        display: none !important;
    }
    /* …except the dropdown that owns the "+" tools button. */
    .main-content.conversation-active .formatting-toolbar > .dropdown,
    .formatting-toolbar > .dropdown {
        display: block !important;
    }
    /* Composer wrapper — relative anchor for the floating buttons */
    .message-form,
    .message-form .input-group,
    .main-content.conversation-active .message-input-wrapper {
        position: relative !important;
    }
    .main-content.conversation-active .message-input-wrapper {
        background: var(--surface-sunken) !important;
        border: 1px solid var(--br) !important;
        border-radius: var(--r-pill) !important;
        padding: 0.375rem 96px 0.375rem 48px !important;
        min-height: 44px !important;
        box-shadow: none !important;
    }
    .main-content.conversation-active .message-input-wrapper:focus-within {
        background: var(--surface) !important;
        border-color: var(--accent) !important;
        box-shadow: 0 0 0 3px var(--accent-tint) !important;
    }
    .main-content.conversation-active #messageInput {
        font-size: 16px !important;       /* prevent iOS zoom */
        line-height: 1.45 !important;
        padding: 0 !important;
        color: var(--tx) !important;
    }

    /* The "+" tools button is the FIRST .dropdown inside the
       formatting-toolbar. Floated into the input pill on mobile. */
    .chat-input-container .dropdown:has(> .chat-tools-btn) {
        display: block !important;
        position: absolute !important;
        left: 0.5rem !important;
        bottom: 0.5rem !important;
        z-index: 4 !important;
    }
    .chat-input-container .chat-tools-btn {
        display: inline-flex !important;
        width: 36px !important;
        height: 36px !important;
        background: transparent !important;
        color: var(--tx-secondary) !important;
        border: none !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        font-size: 1.05rem !important;
        transition: background var(--t-fast), color var(--t-fast) !important;
    }
    .chat-input-container .chat-tools-btn:hover,
    .chat-input-container .chat-tools-btn:active {
        background: var(--n-150) !important;
        color: var(--tx) !important;
    }
    .chat-input-container .chat-tools-btn i { color: inherit !important; }
    /* Make the dropdown menu open ABOVE the input (drop-up) on mobile
       since the composer sits at the bottom of the screen. We neutralize
       Popper's inline transform/inset so our anchor wins. */
    .chat-input-container .chat-tools-menu {
        position: absolute !important;
        transform: none !important;
        inset: auto !important;
        bottom: 44px !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        margin: 0 !important;
        min-width: 220px !important;
        border-radius: var(--r-md) !important;
        border: 1px solid var(--br) !important;
        box-shadow: var(--shadow-3) !important;
        padding: 0.375rem 0 !important;
        z-index: 1300 !important;
    }
    .chat-input-container .chat-tools-menu .dropdown-item {
        padding: 0.625rem 1rem !important;
        font-size: 0.9rem !important;
        color: var(--tx) !important;
    }
    .chat-input-container .chat-tools-menu .dropdown-item:hover {
        background: var(--surface-sunken) !important;
    }
    .chat-input-container .chat-tools-menu .dropdown-divider {
        border-color: var(--br-subtle) !important;
    }
    /* Existing markup hides "Attach File" and "Emoji" inside the chat
       tools menu via inline style="display:none". On mobile the
       standalone toolbar buttons for these are gone, so surface the
       menu entries instead. */
    .chat-input-container .chat-tools-menu li.chat-tools-mobile-only {
        display: list-item !important;
    }

    /* Send button — circular accent pill on the right inside the wrapper.
       NB: we deliberately do NOT touch `display` because JS toggles
       send-btn visibility based on input contents (mic shows when
       empty, send when typing). */
    .main-content.conversation-active .send-btn {
        position: absolute !important;
        right: 4px !important;
        bottom: 4px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: var(--accent) !important;
        color: #fff !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .main-content.conversation-active .send-btn:disabled {
        background: var(--n-300) !important;
        color: var(--n-500) !important;
    }

    /* Messages list — comfortable mobile padding */
    .messages-container {
        background: var(--surface) !important;
        padding: 0.625rem 0.75rem !important;
    }
    .main-content.conversation-active .messages-container {
        padding-bottom: 96px !important;   /* single-row composer fits in ~70px */
    }
    .message-group.own .message-bubble  { max-width: 84vw !important; }
    .message-group.other .message-bubble { max-width: 86vw !important; }

    /* Mobile drawers — both rails keep their light-gray tint so when
       they slide in, the user reads them as a panel rather than a
       seamless white sheet over the page. */
    .left-sidebar  { background: var(--sidebar-light) !important; }
    .right-sidebar { background: var(--rs-bg)         !important; }
    .mobile-close-btn {
        background: var(--n-150) !important;
        color: var(--tx) !important;
    }
    .mobile-close-btn:hover { background: var(--n-200) !important; }
}

/* Tiny screens — extra breathing room safety */
@media (max-width: 360px) {
    .main-content.conversation-active .message-input-wrapper {
        padding-left: 42px !important;
        padding-right: 88px !important;
    }
    .chat-input-container .chat-tools-btn { width: 32px !important; height: 32px !important; }
    .main-content.conversation-active .send-btn { width: 34px !important; height: 34px !important; }
}

/* ============================================================
   15. UTILITY — small helpers
   ============================================================ */
.app-divider {
    height: 1px;
    background: var(--br-subtle);
    margin: 0.75rem 0;
    border: 0;
}
.text-soft { color: var(--tx-soft) !important; }

/* + button dropdown menu — drop-UP on desktop too.
   With data-bs-display="static" Popper is off everywhere; without this
   override the menu would default to dropping below the button (which
   sits at the bottom of the composer on desktop). */
@media (min-width: 769px) {
    .chat-tools-menu,
    .chat-tools-menu.show {
        top: auto !important;
        bottom: 100% !important;
        left: 0 !important;
        right: auto !important;
        margin: 0 0 6px 0 !important;
        transform: none !important;
        inset: auto !important;
    }
}

/* Inline link-style button anchored to the accent. Used in section
   headers (e.g. "Browse Groups") where we want a discreet CTA. */
.btn-link-accent {
    background: transparent !important;
    border: none !important;
    color: var(--accent) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.btn-link-accent:hover { color: var(--accent-hover) !important; text-decoration: underline !important; }