/* Google Fonts loaded via <link> tags in index.html (Outfit + JetBrains Mono) */

/* ============================================
   MATRIX DARK v6 — Discord Comfort
   Element Web CSS Override
   matrixserver.online

   Palette:
   #00E676 — Neon green (primary accent)
   #FF9100 — Orange (notifications, attention)
   #00BCD4 — Cyan (links, info)
   #ED4245 — Red (danger/critical)

   Background depth (darkest to lightest):
   #050607 > #08090b > #12141a > #1d2128 > #22262d > #2a2e34
   ============================================ */


/* ============================================
   COMPOUND DESIGN SYSTEM — Variable Overrides
   ============================================ */

.cpd-theme-dark-custom,
.cpd-theme-dark,
:root {

    /* ---- BACKGROUNDS ---- */
    --cpd-color-theme-bg: #1d2128 !important;
    --cpd-color-bg-canvas-default: #1d2128 !important;
    --cpd-color-bg-canvas-default-level-1: #22262d !important;
    --cpd-color-bg-canvas-disabled: #12141a !important;
    --cpd-color-bg-subtle-primary: #12141a !important;
    --cpd-color-bg-subtle-secondary: #08090b !important;
    --cpd-color-bg-subtle-secondary-level-0: #050607 !important;

    --cpd-color-bg-action-primary-rest: #00E676 !important;
    --cpd-color-bg-action-primary-hovered: #00C853 !important;
    --cpd-color-bg-action-primary-pressed: #00A844 !important;
    --cpd-color-bg-action-primary-disabled: #2a2e34 !important;
    --cpd-color-bg-action-secondary-rest: transparent !important;
    --cpd-color-bg-action-secondary-hovered: rgba(0, 230, 118, 0.12) !important;
    --cpd-color-bg-action-secondary-pressed: rgba(0, 230, 118, 0.18) !important;
    --cpd-color-bg-action-tertiary-hovered: rgba(255, 255, 255, 0.08) !important;
    --cpd-color-bg-action-tertiary-rest: transparent !important;
    --cpd-color-bg-action-tertiary-selected: rgba(0, 230, 118, 0.10) !important;

    --cpd-color-bg-accent-rest: rgba(0, 230, 118, 0.12) !important;
    --cpd-color-bg-accent-hovered: rgba(0, 230, 118, 0.20) !important;
    --cpd-color-bg-accent-pressed: rgba(0, 230, 118, 0.28) !important;
    --cpd-color-bg-accent-selected: rgba(0, 230, 118, 0.10) !important;

    --cpd-color-bg-critical-primary: #ED4245 !important;
    --cpd-color-bg-critical-hovered: #c03537 !important;
    --cpd-color-bg-critical-subtle: rgba(237, 66, 69, 0.10) !important;
    --cpd-color-bg-critical-subtle-hovered: rgba(237, 66, 69, 0.18) !important;
    --cpd-color-bg-info-subtle: rgba(0, 188, 212, 0.10) !important;
    --cpd-color-bg-success-subtle: rgba(0, 230, 118, 0.10) !important;

    --cpd-color-bg-badge-default: #4f5660 !important;
    --cpd-color-bg-badge-accent: #FF9100 !important;
    --cpd-color-bg-badge-info: #FF9100 !important;

    --cpd-color-bg-decorative-1: #00FF88 !important;
    --cpd-color-bg-decorative-2: #FF9D1A !important;
    --cpd-color-bg-decorative-3: #00E5FF !important;
    --cpd-color-bg-decorative-4: #FF4DB2 !important;
    --cpd-color-bg-decorative-5: #FF5252 !important;
    --cpd-color-bg-decorative-6: #9C6FFF !important;

    /* ---- TEXT ---- */
    --cpd-color-text-primary: #e8eaed !important;
    --cpd-color-text-secondary: #9ba0a8 !important;
    --cpd-color-text-disabled: #4f5660 !important;
    --cpd-color-text-placeholder: #4a4f58 !important;
    --cpd-color-text-action-accent: #00E676 !important;
    --cpd-color-text-action-primary: #050607 !important;
    --cpd-color-text-critical-primary: #ED4245 !important;
    --cpd-color-text-success-primary: #00E676 !important;
    --cpd-color-text-info-primary: #00BCD4 !important;
    --cpd-color-text-link-external: #00BCD4 !important;
    --cpd-color-text-on-solid-primary: #050607 !important;
    --cpd-color-text-badge-accent: #050607 !important;
    --cpd-color-text-badge-info: #ffffff !important;

    /* ---- ICONS ---- */
    --cpd-color-icon-primary: #e8eaed !important;
    --cpd-color-icon-secondary: #9ba0a8 !important;
    --cpd-color-icon-tertiary: #6b7078 !important;
    --cpd-color-icon-quaternary: #4f5660 !important;
    --cpd-color-icon-disabled: #353940 !important;
    --cpd-color-icon-accent-primary: #00E676 !important;
    --cpd-color-icon-accent-tertiary: #00E676 !important;
    --cpd-color-icon-critical-primary: #ED4245 !important;
    --cpd-color-icon-success-primary: #00E676 !important;
    --cpd-color-icon-info-primary: #00BCD4 !important;
    --cpd-color-icon-on-solid-primary: #050607 !important;

    /* ---- BORDERS ---- */
    --cpd-color-border-interactive-primary: rgba(255, 255, 255, 0.10) !important;
    --cpd-color-border-interactive-secondary: rgba(255, 255, 255, 0.14) !important;
    --cpd-color-border-interactive-hovered: #00E676 !important;
    --cpd-color-border-disabled: rgba(255, 255, 255, 0.06) !important;
    --cpd-color-border-focused: #00E676 !important;
    --cpd-color-border-critical-primary: #ED4245 !important;
    --cpd-color-border-critical-hovered: #c03537 !important;
    --cpd-color-border-critical-subtle: rgba(237, 66, 69, 0.30) !important;
    --cpd-color-border-success-subtle: rgba(0, 230, 118, 0.30) !important;
    --cpd-color-border-info-subtle: rgba(0, 188, 212, 0.30) !important;
    --cpd-color-border-accent-subtle: rgba(0, 230, 118, 0.30) !important;

    --cpd-separator-color: rgba(255, 255, 255, 0.06) !important;

    /* ---- ALPHA GRAYS ---- */
    --cpd-color-alpha-gray-300: rgba(255, 255, 255, 0.06) !important;
    --cpd-color-alpha-gray-400: rgba(255, 255, 255, 0.08) !important;
    --cpd-color-alpha-gray-500: rgba(255, 255, 255, 0.10) !important;
    --cpd-color-alpha-gray-600: rgba(255, 255, 255, 0.14) !important;
    --cpd-color-alpha-gray-700: rgba(255, 255, 255, 0.20) !important;
    --cpd-color-alpha-gray-800: rgba(255, 255, 255, 0.28) !important;
    --cpd-color-alpha-gray-900: rgba(255, 255, 255, 0.38) !important;
    --cpd-color-alpha-gray-1000: rgba(255, 255, 255, 0.50) !important;
    --cpd-color-alpha-gray-1100: rgba(255, 255, 255, 0.60) !important;
    --cpd-color-alpha-gray-1200: rgba(255, 255, 255, 0.72) !important;
    --cpd-color-alpha-gray-1300: rgba(255, 255, 255, 0.86) !important;
    --cpd-color-alpha-gray-1400: rgba(255, 255, 255, 0.95) !important;

    /* ---- FONTS ---- */
    --cpd-font-family-sans: 'Outfit', 'gg sans', 'Noto Sans', Helvetica, Arial, sans-serif !important;
    --cpd-font-family-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;

    /* ---- GRADIENTS ---- */
    --cpd-color-gradient-action-stop1: #00E676 !important;
    --cpd-color-gradient-action-stop2: #00C853 !important;
    --cpd-color-gradient-action-stop3: #00A844 !important;
    --cpd-color-gradient-action-stop4: #00E676 !important;
}


/* ============================================
   ELEMENT LEGACY VARIABLES
   ============================================ */

:root,
.cpd-theme-dark-custom,
.cpd-theme-dark {
    --sidebar-color: #08090b !important;
    --sidebar-color-50pct: rgba(8, 9, 11, 0.5) !important;
    --roomlist-background-color: #12141a !important;
    --roomlist-highlights-color: #2a2e34 !important;
    --roomlist-separator-color: rgba(255, 255, 255, 0.06) !important;
    --roomlist-text-secondary-color: #9ba0a8 !important;

    --timeline-background-color: #1d2128 !important;
    --timeline-background-color-50pct: rgba(29, 33, 40, 0.5) !important;
    --timeline-text-color: #e8eaed !important;
    --timeline-text-color-50pct: rgba(232, 234, 237, 0.5) !important;
    --timeline-text-secondary-color: #6b7078 !important;
    --timeline-highlights-color: #22262d !important;

    --accent-color: #00E676 !important;
    --primary-color: #00E676 !important;
    --accent-color-300: rgba(0, 230, 118, 0.3) !important;
    --accent-color-400: rgba(0, 230, 118, 0.4) !important;
    --accent-color-800: rgba(0, 230, 118, 0.8) !important;
    --accent-color-1000: #00E676 !important;

    --secondary-content: #9ba0a8 !important;
    --tertiary-content: #6b7078 !important;
    --quaternary-content: #4f5660 !important;
    --quinary-content: #353940 !important;

    --secondary-hairline-color: rgba(255, 255, 255, 0.06) !important;
    --focus-bg-color: rgba(0, 230, 118, 0.08) !important;
    --other-user-pill-bg-color: rgba(255, 145, 0, 0.22) !important;

    --eventbubble-self-bg: rgba(0, 230, 118, 0.08) !important;
    --eventbubble-others-bg: rgba(255, 255, 255, 0.04) !important;
    --eventbubble-bg-hover: rgba(255, 145, 0, 0.06) !important;

    --font-family: 'Outfit', 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    --font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;

    --EventTile_group_line-spacing-block-start: 0px !important;
    --EventTile_group_line-spacing-block-end: 0px !important;
    --EventTile_group_line-spacing-inline-start: 72px !important;
    --EventTile_group_line-line-height: 1.375 !important;

    --MessageTimestamp-color: #4a4f58 !important;
    --MessageTimestamp-width: 46px !important;
    --MessageActionBar-size-box: 28px !important;
    --MessageActionBar-size-button: 28px !important;
    --MessageActionBar-icon-size: 18px !important;
    --MessageActionBar-item-hover-background: rgba(255, 145, 0, 0.12) !important;
    --MessageActionBar-item-hover-borderRadius: 8px !important;

    --strong-input-border-color: rgba(255, 255, 255, 0.14) !important;
    --emoji-font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji' !important;
    --username-color: #00E676 !important;
    --facepile-background: #1d2128 !important;
    --transition-short: 0.12s cubic-bezier(0.2, 0, 0, 1) !important;
    --transition-standard: 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}


/* ============================================
   GLOBAL — Typography, texture, selection
   ============================================ */

body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-family: 'Outfit', 'gg sans', 'Noto Sans', sans-serif !important;
    letter-spacing: 0.015em !important;
}

/* Noise grain — visible warmth */
body::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    opacity: 0.03 !important;
    mix-blend-mode: overlay !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
}

::selection {
    background: rgba(0, 230, 118, 0.28) !important;
    color: #fff !important;
}


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

::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 230, 118, 0.15) !important;
    border-radius: 99px !important;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 230, 118, 0.35) !important; }
::-webkit-scrollbar-corner { background: transparent !important; }
* { scrollbar-width: thin !important; scrollbar-color: rgba(0, 230, 118, 0.15) transparent !important; }


/* ============================================
   LEFT SIDEBAR — Space panel (icon strip)
   ============================================ */

/* The far-left icon navigation bar */
[class*="SpacePanel"],
nav[aria-label] {
    background: linear-gradient(180deg, #08090b 0%, #050607 100%) !important;
    border-right: 1px solid rgba(0, 230, 118, 0.08) !important;
}

/* Space/nav icons — green glow on hover */
[class*="SpacePanel"] button:hover,
[class*="spaceButton"]:hover {
    background: rgba(0, 230, 118, 0.12) !important;
    border-radius: 12px !important;
}

/* Active space — visible green indicator */
[class*="SpacePanel"] [aria-selected="true"],
[class*="SpacePanel"] [class*="active"],
[class*="spaceButton"][class*="active"] {
    background: rgba(0, 230, 118, 0.10) !important;
    box-shadow: inset 3px 0 0 #00E676 !important;
    border-radius: 12px !important;
}


/* ============================================
   ROOM LIST PANEL
   ============================================ */

/* Room list panel background — distinct from sidebar */
[class*="LeftPanel"],
[class*="leftpanel"],
[class*="_left-panel_"] {
    background: #12141a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Filter buttons (Unreads / People / Rooms) */
[class*="filter"] button,
[class*="Filter"] button {
    border-radius: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.15s ease !important;
}

/* Search bar */
[class*="RoomSearch"],
[class*="room-search"],
[class*="_search_"] input {
    background: #08090b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
}


/* ============================================
   ROOM TILES — Card-like with visible states
   (Base dimensions set in Discord UX section below)
   ============================================ */

[class*="_roomTile_"],
[class*="_room-tile_"],
[class*="mx_RoomTile"] {
    transition: all 0.15s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* Hover — visible lift */
[class*="_roomTile_"]:hover,
[class*="_room-tile_"]:hover,
[class*="mx_RoomTile"]:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Selected/active room — strong green accent */
[class*="_roomTile_"][class*="selected"],
[class*="_roomTile_"][class*="active"],
[class*="_room-tile_"][class*="selected"],
[aria-selected="true"][class*="_roomTile_"],
[aria-selected="true"][class*="_room-tile_"] {
    background: rgba(0, 230, 118, 0.08) !important;
    box-shadow: inset 3px 0 0 #00E676, 0 2px 12px rgba(0, 230, 118, 0.06) !important;
}

/* Unread room — green left bar */
.mx_RoomTile:has(.mx_RoomTile_titleHasUnreadEvents) {
    box-shadow: inset 3px 0 0 #00E676 !important;
    background: rgba(0, 230, 118, 0.04) !important;
}
.mx_RoomListItemView_bold {
    box-shadow: inset 3px 0 0 #00E676 !important;
    background: rgba(0, 230, 118, 0.04) !important;
}

.mx_RoomTile_title.mx_RoomTile_titleHasUnreadEvents {
    font-weight: 600 !important;
    color: #ffffff !important;
}


/* ============================================
   ROOM HEADER — Frosted glass bar
   ============================================ */

[class*="RoomHeader"],
[class*="room-header"] {
    background: rgba(29, 33, 40, 0.85) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    border-bottom: 1px solid rgba(0, 230, 118, 0.10) !important;
}

/* Room name in header — bolder */
[class*="RoomHeader"] h1,
[class*="RoomHeader"] [class*="heading"],
[class*="room-header"] [class*="name"] {
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}


/* ============================================
   MAIN TIMELINE PANEL
   ============================================ */

.mx_RoomView {
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Message hover — visible highlight */
.mx_EventTile[data-layout=group]:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Mentioned/highlighted messages — orange bar */
.mx_EventTile[data-layout=group].mx_EventTile_highlight {
    background: rgba(255, 145, 0, 0.06) !important;
}
.mx_EventTile[data-layout=group].mx_EventTile_highlight::before {
    background: #FF9100 !important;
}

/* Usernames — bold with color glow */
.mx_DisambiguatedProfile_displayName {
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 0 20px currentColor !important;
}

/* Message action bar — elevated floating card */
[class*="_MessageActionBar_"],
.mx_MessageActionBar {
    background: #22262d !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                0 0 1px rgba(0, 230, 118, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}


/* ============================================
   MESSAGE COMPOSER — Floating glass card
   ============================================ */

.mx_MessageComposer {
    background: #1a1d22 !important;
    margin: 0 12px 12px 12px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 230, 118, 0.12) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3),
                0 0 1px rgba(0, 230, 118, 0.1) !important;
    position: relative !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Green gradient accent line on top */
.mx_MessageComposer::before {
    content: '' !important;
    position: absolute !important;
    top: -1px !important;
    left: 15% !important;
    right: 15% !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent,
        #00E676 30%,
        #00E676 70%,
        transparent
    ) !important;
    border-radius: 2px !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* Focus glow — composer lights up */
.mx_MessageComposer:focus-within {
    border-color: rgba(0, 230, 118, 0.25) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3),
                0 0 20px rgba(0, 230, 118, 0.08),
                0 0 1px rgba(0, 230, 118, 0.2) !important;
}
.mx_MessageComposer:focus-within::before {
    opacity: 0.8 !important;
}

/* Composer input — dark sunken well */
.mx_MessageComposer_input,
.mx_BasicMessageComposer_input,
.mx_WysiwygComposer_Editor_content {
    background: #0d0f12 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.mx_BasicMessageComposer_input:focus,
.mx_WysiwygComposer_Editor_content:focus {
    border-color: rgba(0, 230, 118, 0.3) !important;
    box-shadow: 0 0 0 2px rgba(0, 230, 118, 0.1) !important;
    outline: none !important;
}

/* Composer wrapper and shape */
.mx_MessageComposer_wrapper {
    border-radius: 16px !important;
}
[class*="_composer_"],
[class*="_Composer_"] {
    border-radius: 16px !important;
}

/* Composer buttons */
.mx_MessageComposer_button {
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}
.mx_MessageComposer_button:hover {
    background: rgba(0, 230, 118, 0.12) !important;
    color: #00E676 !important;
}

/* Send button — glowing green */
.mx_MessageComposer_sendMessage {
    transition: box-shadow 0.2s ease, transform 0.1s ease !important;
}
.mx_MessageComposer_sendMessage:hover {
    box-shadow: 0 0 16px rgba(0, 230, 118, 0.35) !important;
}
.mx_MessageComposer_sendMessage:active {
    transform: scale(0.92) !important;
}


/* ============================================
   THREADS
   ============================================ */

.mx_ThreadPanel {
    background: #161920 !important;
}
.mx_ThreadPanel:not(.mx_ThreadView) {
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mx_ThreadSummary {
    background: rgba(0, 230, 118, 0.04) !important;
    border: 1px solid rgba(0, 230, 118, 0.10) !important;
    border-left: 3px solid #00E676 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}
.mx_ThreadSummary:hover {
    background: rgba(0, 230, 118, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 230, 118, 0.08) !important;
}


/* ============================================
   REPLY CHAINS — Colored depth borders
   ============================================ */

.mx_ReplyChain {
    border-left: 2px solid rgba(0, 230, 118, 0.25) !important;
    padding-left: 12px !important;
    margin-left: 2px !important;
}
.mx_ReplyChain:hover { border-left-color: rgba(0, 230, 118, 0.5) !important; }
.mx_ReplyChain.mx_ReplyChain_color1 { border-left-color: #00E676 !important; }
.mx_ReplyChain.mx_ReplyChain_color2 { border-left-color: #00BCD4 !important; }
.mx_ReplyChain.mx_ReplyChain_color3 { border-left-color: #FF9100 !important; }
.mx_ReplyChain.mx_ReplyChain_color4 { border-left-color: #9C6FFF !important; }
.mx_ReplyChain.mx_ReplyChain_color5 { border-left-color: #FF4DB2 !important; }
.mx_ReplyChain.mx_ReplyChain_color6 { border-left-color: #FFE033 !important; }

.mx_ReplyPreview {
    background: #161920 !important;
    border-left: 3px solid #00E676 !important;
    border-radius: 0 12px 12px 0 !important;
}


/* ============================================
   CODE BLOCKS — Dark terminal
   ============================================ */

pre {
    background: #050607 !important;
    border: 1px solid rgba(0, 230, 118, 0.12) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
    font-size: 0.85em !important;
    line-height: 1.65 !important;
    position: relative !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4),
                0 0 1px rgba(0, 230, 118, 0.1) !important;
}

/* Green glow line on top */
pre::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 20px !important;
    right: 20px !important;
    height: 2px !important;
    background: linear-gradient(90deg,
        transparent, rgba(0, 230, 118, 0.3) 30%,
        rgba(0, 230, 118, 0.3) 70%, transparent
    ) !important;
    border-radius: 2px !important;
}

code {
    background: rgba(0, 230, 118, 0.08) !important;
    border: 1px solid rgba(0, 230, 118, 0.10) !important;
    border-radius: 5px !important;
    padding: 2px 7px !important;
    font-size: 0.85em !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
    color: #4ae8a0 !important;
}
pre code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-size: inherit !important;
    color: #c8ccd2 !important;
}

/* Syntax colors */
.mx_SyntaxHighlight .hljs-keyword { color: #00E676 !important; }
.mx_SyntaxHighlight .hljs-string { color: #FFE033 !important; }
.mx_SyntaxHighlight .hljs-number { color: #FF9D1A !important; }
.mx_SyntaxHighlight .hljs-comment { color: #4f5660 !important; font-style: italic !important; }
.mx_SyntaxHighlight .hljs-function,
.mx_SyntaxHighlight .hljs-title { color: #00E5FF !important; }
.mx_SyntaxHighlight .hljs-built_in { color: #9C6FFF !important; }
.mx_SyntaxHighlight .hljs-attr { color: #FF4DB2 !important; }
.mx_SyntaxHighlight .hljs-type { color: #00E6B8 !important; }


/* ============================================
   BADGES — Glowing notification orbs
   ============================================ */

.mx_NotificationBadge {
    border-radius: 99px !important;
    font-weight: 700 !important;
    font-size: 0.7em !important;
}

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_level_notification {
    background: #FF9100 !important;
    box-shadow: 0 0 10px rgba(255, 145, 0, 0.5),
                0 0 3px rgba(255, 145, 0, 0.3) !important;
    animation: badgeBreathe 2.5s ease-in-out infinite !important;
}

.mx_NotificationBadge.mx_NotificationBadge_visible.mx_NotificationBadge_level_highlight {
    background: #ED4245 !important;
    box-shadow: 0 0 10px rgba(237, 66, 69, 0.5),
                0 0 3px rgba(237, 66, 69, 0.3) !important;
    animation: badgeBreathe 2s ease-in-out infinite !important;
}

.mx_NotificationBadge_dot {
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.4) !important;
}

[class*="_unread-counter_"],
[class*="_badge_"] {
    border-radius: 99px !important;
    font-weight: 700 !important;
}

.mx_JumpToBottomButton_badge {
    background: #FF9100 !important;
    box-shadow: 0 0 8px rgba(255, 145, 0, 0.4) !important;
}


/* ============================================
   MENTION PILLS — Orange signal glow
   ============================================ */

[class*="_pill_"] {
    background: rgba(255, 145, 0, 0.20) !important;
    color: #FFB74D !important;
    border-radius: 5px !important;
    padding: 1px 6px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 0 6px rgba(255, 145, 0, 0.10) !important;
}
[class*="_pill_"]:hover {
    background: rgba(255, 145, 0, 0.35) !important;
    box-shadow: 0 0 12px rgba(255, 145, 0, 0.25) !important;
}


/* ============================================
   LINKS — Cyan with animated underline
   ============================================ */

a:not([class]) {
    color: #00BCD4 !important;
    text-decoration: none !important;
    background-image: linear-gradient(#00BCD4, #00BCD4) !important;
    background-size: 0% 1px !important;
    background-position: 0 100% !important;
    background-repeat: no-repeat !important;
    transition: color 0.2s ease, background-size 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
}
a:not([class]):hover {
    color: #4DD0E1 !important;
    background-size: 100% 1px !important;
}


/* ============================================
   AVATARS — Rounded with colored ring
   ============================================ */

[class*="_avatar_"] img,
[class*="_avatar-imageless_"] {
    border-radius: 12px !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.06) !important;
}


/* ============================================
   INPUTS — Deep wells with green focus
   ============================================ */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea {
    background: #08090b !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 10px !important;
    color: #e8eaed !important;
    font-family: 'Outfit', sans-serif !important;
    transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
input:focus,
textarea:focus {
    border-color: #00E676 !important;
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15),
                0 0 20px rgba(0, 230, 118, 0.08) !important;
    outline: none !important;
}


/* ============================================
   BUTTONS — Green glow + press depth
   ============================================ */

button[class*="_primary_"] {
    transition: all 0.15s ease !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    border-radius: 10px !important;
}
button[class*="_primary_"]:hover {
    box-shadow: 0 0 20px rgba(0, 230, 118, 0.3),
                0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
button[class*="_primary_"]:active {
    transform: scale(0.96) !important;
}


/* ============================================
   MODALS & DIALOGS — Frosted glass
   ============================================ */

[class*="_dialog_background"],
[class*="Dialog_background"] {
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    background: rgba(5, 6, 7, 0.65) !important;
}

[class*="_dialog_"],
.mx_Dialog {
    background: #12141a !important;
    border: 1px solid rgba(0, 230, 118, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.55),
                0 8px 32px rgba(0, 0, 0, 0.35),
                0 0 1px rgba(0, 230, 118, 0.12) !important;
}


/* ============================================
   TOOLTIPS — Glassy dark
   ============================================ */

[role="tooltip"] {
    background: rgba(8, 9, 11, 0.92) !important;
    border: 1px solid rgba(0, 230, 118, 0.15) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85em !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}


/* ============================================
   CONTEXT MENUS — Floating glass card
   ============================================ */

[role="menu"] {
    background: rgba(22, 25, 32, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
                0 4px 16px rgba(0, 0, 0, 0.3),
                0 0 1px rgba(0, 230, 118, 0.08) !important;
    padding: 6px !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
[role="menuitem"] {
    border-radius: 10px !important;
    transition: background-color 0.12s ease !important;
    padding: 8px 14px !important;
}
[role="menuitem"]:hover {
    background: rgba(0, 230, 118, 0.10) !important;
}


/* ============================================
   REACTIONS — Pill glow on hover
   ============================================ */

[class*="_reaction_"] {
    border-radius: 99px !important;
    transition: all 0.15s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
[class*="_reaction_"]:hover {
    border-color: rgba(0, 230, 118, 0.25) !important;
    box-shadow: 0 0 10px rgba(0, 230, 118, 0.12) !important;
    background: rgba(0, 230, 118, 0.08) !important;
}


/* ============================================
   IMAGES & MEDIA
   ============================================ */

[class*="_mediaBody_"] img,
[class*="_image_"] img {
    border-radius: 12px !important;
}
[class*="_mediaBody_"] {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    overflow: hidden !important;
}


/* ============================================
   LIST ITEMS & RIGHT PANEL
   ============================================ */

[class*="_richItem_"],
[class*="_richList_"] [class*="_container_"] {
    border-radius: 10px !important;
    transition: background-color 0.12s ease !important;
}

[class*="_drawer_"] {
    border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: #12141a !important;
}

hr {
    border-color: rgba(255, 255, 255, 0.06) !important;
}


/* ============================================
   DATE SEPARATORS — Thin line + pill label
   ============================================ */

.mx_DateSeparator {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.mx_DateSeparator > hr {
    flex: 1 !important;
    border: none !important;
    height: 1px !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.mx_DateSeparator_dateContent,
.mx_DateSeparator_dateHeading {
    background: rgba(255, 255, 255, 0.04) !important;
    padding: 4px 10px !important;
    border-radius: 99px !important;
    color: #6b7078 !important;
    font-size: 0.75em !important;
    font-variant: small-caps !important;
    letter-spacing: 0.08em !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}


/* ============================================
   "NEW MESSAGES" SEPARATOR — Green glow line
   ============================================ */

.mx_TimelineSeparator {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 0 !important;
}

.mx_TimelineSeparator > hr {
    flex: 1 !important;
    border: none !important;
    height: 1px !important;
    background: #00E676 !important;
    box-shadow: 0 0 8px rgba(0, 230, 118, 0.15) !important;
}

.mx_TimelineSeparator > span,
.mx_TimelineSeparator_label {
    background: rgba(0, 230, 118, 0.15) !important;
    color: #00E676 !important;
    padding: 2px 10px !important;
    border-radius: 99px !important;
    font-size: 0.75em !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap !important;
}


/* ============================================
   STATE / INFO EVENTS — Subtle & muted
   ============================================ */

.mx_EventTile_info {
    opacity: 0.45 !important;
    font-size: 0.82em !important;
    transition: opacity 0.2s ease !important;
}

.mx_EventTile_info:hover {
    opacity: 1 !important;
}

.mx_GenericEventListSummary {
    opacity: 0.45 !important;
    font-size: 0.82em !important;
    transition: opacity 0.2s ease !important;
    text-align: center !important;
}

.mx_GenericEventListSummary:hover {
    opacity: 1 !important;
}

.mx_GenericEventListSummary_toggle {
    color: #00E676 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}


/* ============================================
   TYPING INDICATOR — Themed
   ============================================ */

.mx_WhoIsTypingTile {
    transition: opacity 0.3s ease !important;
}

.mx_WhoIsTypingTile_label {
    color: rgba(0, 230, 118, 0.6) !important;
    text-shadow: 0 0 12px rgba(0, 230, 118, 0.1) !important;
    font-size: 0.85em !important;
}


/* ============================================
   EMOJI PICKER — Dark glass
   ============================================ */

.mx_EmojiPicker {
    background: #12141a !important;
    border: 1px solid rgba(0, 230, 118, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5),
                0 4px 16px rgba(0, 0, 0, 0.3),
                0 0 1px rgba(0, 230, 118, 0.12) !important;
    overflow: hidden !important;
}

.mx_EmojiPicker_header {
    background: #12141a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mx_EmojiPicker_body {
    background: #12141a !important;
}

.mx_EmojiPicker_search input {
    background: #08090b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #e8eaed !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mx_EmojiPicker_search input:focus {
    border-color: #00E676 !important;
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15) !important;
    outline: none !important;
}

.mx_EmojiPicker_category_label {
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.7em !important;
    font-weight: 600 !important;
    color: #6b7078 !important;
}

.mx_EmojiPicker_item {
    border-radius: 8px !important;
    transition: background-color 0.12s ease !important;
}

.mx_EmojiPicker_item:hover {
    background: rgba(0, 230, 118, 0.10) !important;
}

.mx_EmojiPicker_anchor_visible {
    border-bottom: 2px solid #00E676 !important;
}

.mx_EmojiPicker_footer {
    background: #0d0f12 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}


/* ============================================
   ROOM SUBLIST HEADERS — Refined
   ============================================ */

.mx_RoomSublist_headerContainer {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.mx_RoomSublist_headerText {
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.7em !important;
    font-weight: 600 !important;
    color: #6b7078 !important;
}

.mx_RoomSublist_menuButton,
.mx_RoomSublist_auxButton {
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

.mx_RoomSublist_menuButton:hover,
.mx_RoomSublist_auxButton:hover {
    background: rgba(0, 230, 118, 0.10) !important;
    color: #00E676 !important;
}


/* ============================================
   PRESENCE INDICATORS — Glowing dots
   ============================================ */

.mx_PresenceIconView_online {
    box-shadow: 0 0 6px rgba(0, 230, 118, 0.5) !important;
}

.mx_PresenceIconView_dnd,
.mx_PresenceIconView_unavailable {
    box-shadow: 0 0 4px rgba(255, 145, 0, 0.4) !important;
}

.mx_PresenceIconView_offline {
    opacity: 0.4 !important;
    box-shadow: none !important;
}


/* ============================================
   PINNED MESSAGES BANNER — Themed bar
   ============================================ */

.mx_PinnedMessageBanner {
    background: #12141a !important;
    border-bottom: 1px solid rgba(0, 230, 118, 0.10) !important;
    transition: background-color 0.2s ease !important;
}

.mx_PinnedMessageBanner:hover {
    background: #161920 !important;
}

.mx_PinnedMessageBanner_title {
    font-weight: 600 !important;
    color: #e8eaed !important;
}

.mx_PinnedMessageBanner_message {
    color: #9ba0a8 !important;
}

.mx_PinnedMessageBanner_Indicator {
    color: #00E676 !important;
}


/* ============================================
   E2E / VERIFICATION BADGES — Green-tinted
   ============================================ */

.mx_E2EIconView_verified {
    color: #00E676 !important;
}

.mx_E2EIcon {
    box-shadow: 0 0 4px rgba(0, 230, 118, 0.2) !important;
}

.mx_UserInfo_verified_badge {
    background: rgba(0, 230, 118, 0.10) !important;
    border: 1px solid rgba(0, 230, 118, 0.25) !important;
    border-radius: 8px !important;
    color: #00E676 !important;
}


/* ============================================
   JUMP TO BOTTOM BUTTON — Green floating pill
   ============================================ */

.mx_JumpToBottomButton {
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
}

.mx_JumpToBottomButton_scrollDown {
    background: #1a1d22 !important;
    border: 1px solid rgba(0, 230, 118, 0.15) !important;
    border-radius: 50% !important;
    color: #00E676 !important;
    transition: all 0.2s ease !important;
}

.mx_JumpToBottomButton_scrollDown:hover {
    box-shadow: 0 0 12px rgba(0, 230, 118, 0.2) !important;
    transform: scale(1.08) !important;
}


/* ============================================
   MEMBER LIST — Polished
   ============================================ */

.mx_MemberListView {
    background: #12141a !important;
}

.mx_MemberListHeaderView {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mx_MemberListHeaderView_label {
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.7em !important;
    font-weight: 600 !important;
    color: #6b7078 !important;
}

.mx_MemberListHeaderView_search input {
    background: #08090b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #e8eaed !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mx_MemberListHeaderView_search input:focus {
    border-color: #00E676 !important;
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15) !important;
    outline: none !important;
}

.mx_MemberListView [class*="EntityTile"],
.mx_MemberListView [class*="memberTile"] {
    border-radius: 8px !important;
    transition: background-color 0.15s ease !important;
}

.mx_MemberListView [class*="EntityTile"]:hover,
.mx_MemberListView [class*="memberTile"]:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}


/* ============================================
   SEARCH RESULTS PANEL — Themed
   ============================================ */

.mx_RoomSearchAuxPanel {
    background: #12141a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.mx_SearchBox {
    background: #08090b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mx_SearchBox:focus-within {
    border-color: #00E676 !important;
    box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.15) !important;
}

.mx_RoomView_searchResultsPanel {
    background: #12141a !important;
}

.mx_RoomView_searchResultsPanel .mx_SearchResult_contextual {
    opacity: 0.35 !important;
}

.mx_RoomView_searchResultsPanel [class*="highlight"],
.mx_RoomView_searchResultsPanel mark {
    background: rgba(0, 230, 118, 0.20) !important;
    color: #00E676 !important;
    border-radius: 3px !important;
    padding: 1px 3px !important;
}


/* ============================================
   FILE MESSAGE CARDS — Styled
   ============================================ */

.mx_MFileBody {
    background: #12141a !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
}

.mx_MFileBody:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}

.mx_MFileBody_info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.mx_MFileBody_info_icon {
    background: rgba(0, 230, 118, 0.10) !important;
    border-radius: 50% !important;
    padding: 6px !important;
    color: #00E676 !important;
}

.mx_MFileBody_info_filename {
    color: #e8eaed !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
}


/* ============================================
   LOADING SPINNERS — Green
   ============================================ */

.mx_Spinner {
    color: #00E676 !important;
}

.mx_Spinner svg {
    color: #00E676 !important;
    filter: drop-shadow(0 0 4px rgba(0, 230, 118, 0.3)) !important;
}

.mx_Spinner img {
    filter: hue-rotate(85deg) saturate(2) brightness(1.2) drop-shadow(0 0 4px rgba(0, 230, 118, 0.3)) !important;
}


/* ============================================
   MICRO-INTERACTIONS & POLISH
   ============================================ */

/* Image hover — subtle scale */
[class*="_mediaBody_"] img:hover,
.mx_MImageBody img:hover {
    transform: scale(1.02) !important;
    transition: transform 0.2s ease !important;
}

/* Room header topic — subtle & truncated */
[class*="RoomHeader"] [class*="topic"],
.mx_RoomHeader_topic {
    font-size: 0.8em !important;
    color: #6b7078 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Timestamps brighter on event hover */
.mx_EventTile:hover .mx_MessageTimestamp {
    color: #9ba0a8 !important;
}

/* Settings panels — background consistency */
.mx_UserSettingsDialog,
.mx_TabbedView,
[class*="SettingsTab"] {
    background: #1d2128 !important;
}

/* Right panel separator lines */
.mx_RightPanel hr,
[class*="_drawer_"] hr {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Right panel section separators */
.mx_RightPanel [class*="_separator_"],
[class*="_drawer_"] [class*="_separator_"] {
    background: rgba(255, 255, 255, 0.06) !important;
}


/* ============================================
   KEYFRAMES
   ============================================ */

@keyframes badgeBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); opacity: 0.85; }
}


/* ============================================
   DISCORD UX — Message Density
   Tighter grouping for consecutive messages
   ============================================ */

/* First message in a group — Discord-like spacing above */
.mx_EventTile[data-layout=group] {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Continuation messages (same sender) — near-zero gap like Discord */
.mx_EventTile[data-layout=group].mx_EventTile_continuation {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
}

/* First message of a new sender — add breathing room above (Discord does ~16px) */
.mx_EventTile[data-layout=group]:not(.mx_EventTile_continuation) {
    margin-top: 14px !important;
    padding-top: 4px !important;
}

/* Reduce the tall avatar/name row height */
.mx_EventTile[data-layout=group] .mx_EventTile_avatar {
    top: 2px !important;
}

/* Message text line height — Discord-compact */
.mx_EventTile_body {
    line-height: 1.375 !important;
    font-size: 0.9375rem !important;
}


/* ============================================
   DISCORD UX — Timestamps on Hover
   Hide continuation timestamps, show on hover
   ============================================ */

/* Hide timestamps on continuation messages */
.mx_EventTile[data-layout=group].mx_EventTile_continuation .mx_MessageTimestamp {
    opacity: 0 !important;
    transition: opacity 0.1s ease !important;
}

/* Show on hover */
.mx_EventTile[data-layout=group].mx_EventTile_continuation:hover .mx_MessageTimestamp {
    opacity: 1 !important;
}


/* ============================================
   DISCORD UX — Space Panel Icon Animation
   Rounded-square → circle on hover, pill indicator
   ============================================ */

/* Space icons — Discord-like rounded square default */
[class*="SpacePanel"] [class*="avatar"],
[class*="SpacePanel"] img,
[class*="spaceButton"] [class*="avatar"],
[class*="spaceButton"] img {
    border-radius: 16px !important;
    transition: border-radius 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* Hover — morph to circle like Discord */
[class*="SpacePanel"] button:hover [class*="avatar"],
[class*="SpacePanel"] button:hover img,
[class*="spaceButton"]:hover [class*="avatar"],
[class*="spaceButton"]:hover img {
    border-radius: 50% !important;
}

/* Active space — full circle */
[class*="SpacePanel"] [aria-selected="true"] [class*="avatar"],
[class*="SpacePanel"] [aria-selected="true"] img,
[class*="SpacePanel"] [class*="active"] [class*="avatar"],
[class*="SpacePanel"] [class*="active"] img {
    border-radius: 50% !important;
}

/* Discord-style left pill indicator instead of inset shadow */
[class*="SpacePanel"] [aria-selected="true"]::before,
[class*="SpacePanel"] [class*="active"]::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 40px !important;
    background: #00E676 !important;
    border-radius: 0 4px 4px 0 !important;
    transition: height 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

/* Hover pill — shorter */
[class*="SpacePanel"] button:hover::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 20px !important;
    background: #e8eaed !important;
    border-radius: 0 4px 4px 0 !important;
}

/* Re-assert active pill after hover to win cascade */
[class*="SpacePanel"] [aria-selected="true"]::before,
[class*="SpacePanel"] [class*="active"]::before {
    height: 40px !important;
    background: #00E676 !important;
}


/* ============================================
   DISCORD UX — Room List as Channel List
   Tighter spacing, hash-prefix feel, category headers
   ============================================ */

/* Tighter room tiles — Discord channels are compact */
[class*="_roomTile_"],
[class*="_room-tile_"],
[class*="mx_RoomTile"] {
    margin: 1px 8px !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    height: auto !important;
    min-height: 34px !important;
}

/* Room name text — slightly smaller, Discord-like */
[class*="_roomTile_"] [class*="name"],
[class*="_room-tile_"] [class*="name"],
.mx_RoomTile_title {
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

/* Room tile preview text — muted, single line */
[class*="_roomTile_"] [class*="preview"],
[class*="_room-tile_"] [class*="subtitle"],
.mx_RoomTile_subtitle {
    font-size: 0.75rem !important;
    opacity: 0.5 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Category headers — Discord style (uppercase, small, with collapse chevron) */
.mx_RoomSublist_headerText {
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    color: #9ba0a8 !important;
    padding: 18px 8px 4px 10px !important;
}

/* Category headers hover — Discord brightens text */
.mx_RoomSublist_headerContainer:hover .mx_RoomSublist_headerText {
    color: #e8eaed !important;
}


/* ============================================
   DISCORD UX — Member List (Right Panel)
   Role-grouped, compact, presence dots
   ============================================ */

/* Member list section headers — Discord role header style */
.mx_MemberListHeaderView_label {
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    color: #9ba0a8 !important;
    padding: 16px 8px 4px 16px !important;
}

/* Member tiles — compact like Discord */
.mx_MemberListView [class*="EntityTile"],
.mx_MemberListView [class*="memberTile"] {
    padding: 4px 8px !important;
    border-radius: 6px !important;
    min-height: 36px !important;
}

/* Member name — Discord sizing */
.mx_MemberListView [class*="EntityTile"] [class*="name"],
.mx_MemberListView [class*="memberTile"] [class*="name"] {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

/* Offline members — Discord grays them out */
.mx_MemberListView [class*="EntityTile"][class*="offline"],
.mx_MemberListView [class*="memberTile"][class*="offline"] {
    opacity: 0.35 !important;
}

/* Right panel background — slightly darker like Discord */
[class*="_drawer_"],
.mx_RightPanel {
    background: #12141a !important;
}


/* ============================================
   DISCORD UX — Link Preview Embeds
   Card-style with left accent border like Discord
   ============================================ */

.mx_LinkPreviewWidget {
    background: #12141a !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-left: 4px solid #00E676 !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 12px 16px !important;
    margin-top: 4px !important;
    max-width: 520px !important;
    transition: background 0.15s ease !important;
}

.mx_LinkPreviewWidget:hover {
    background: #161920 !important;
}

/* Embed title — cyan like a link */
.mx_LinkPreviewWidget_caption a {
    color: #00BCD4 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

/* Embed description — muted */
.mx_LinkPreviewWidget_caption .mx_LinkPreviewWidget_description {
    color: #9ba0a8 !important;
    font-size: 0.8125rem !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
}

/* Embed site name — very small, muted */
.mx_LinkPreviewWidget_caption .mx_LinkPreviewWidget_siteName {
    color: #6b7078 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

/* Embed image — rounded, constrained */
.mx_LinkPreviewWidget_image {
    border-radius: 6px !important;
    max-height: 80px !important;
    object-fit: cover !important;
}


/* ============================================
   DISCORD UX — Hover Message Bar Position
   Ensure action bar is flush-right like Discord
   ============================================ */

[class*="_MessageActionBar_"],
.mx_MessageActionBar {
    top: -16px !important;
    right: 8px !important;
    padding: 0 2px !important;
    gap: 0 !important;
}

.mx_MessageActionBar button,
[class*="_MessageActionBar_"] button {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* ============================================
   DISCORD UX — Image Messages
   Constrain max-width like Discord (550px)
   ============================================ */

.mx_MImageBody {
    max-width: 550px !important;
}

.mx_MImageBody img {
    max-width: 100% !important;
    max-height: 350px !important;
    border-radius: 8px !important;
    object-fit: contain !important;
}


/* ============================================
   DISCORD UX — Typing Indicator
   Discord-style ellipsis area
   ============================================ */

.mx_WhoIsTypingTile {
    min-height: 24px !important;
    padding: 0 16px !important;
    font-size: 0.75rem !important;
}

.mx_WhoIsTypingTile_label {
    color: #9ba0a8 !important;
    text-shadow: none !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}


/* ============================================
   DISCORD UX — Emoji Reactions
   Compact pill style like Discord
   ============================================ */

[class*="_reaction_"] {
    padding: 2px 6px !important;
    min-height: 26px !important;
    font-size: 0.875rem !important;
    gap: 4px !important;
}

/* Reaction count */
[class*="_reaction_"] [class*="_count_"] {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #9ba0a8 !important;
}

/* Own reaction — highlighted */
[class*="_reaction_"][class*="_selected_"],
[class*="_reaction_"][aria-pressed="true"] {
    background: rgba(0, 230, 118, 0.12) !important;
    border-color: rgba(0, 230, 118, 0.4) !important;
}
[class*="_reaction_"][class*="_selected_"] [class*="_count_"],
[class*="_reaction_"][aria-pressed="true"] [class*="_count_"] {
    color: #00E676 !important;
}


/* ============================================
   DISCORD UX — New Message Divider
   Red line like Discord instead of green
   ============================================ */

.mx_TimelineSeparator > hr {
    background: #ED4245 !important;
    box-shadow: 0 0 4px rgba(237, 66, 69, 0.15) !important;
}

.mx_TimelineSeparator > span,
.mx_TimelineSeparator_label {
    background: transparent !important;
    color: #ED4245 !important;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
}


/* ============================================
   DISCORD UX — Unread Badge Styling
   More Discord-like badge positioning
   ============================================ */

.mx_NotificationBadge {
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 0.6875rem !important;
    line-height: 16px !important;
}


/* ============================================
   DISCORD UX — Date Separator
   Thinner, more compact
   ============================================ */

.mx_DateSeparator {
    margin: 4px 0 !important;
    padding: 0 16px !important;
}

.mx_DateSeparator_dateContent,
.mx_DateSeparator_dateHeading {
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
}


/* ============================================
   DISCORD UX — Composer Feel
   Keep the glass card but make input more Discord-like
   ============================================ */

/* Placeholder text style */
.mx_BasicMessageComposer_input[contenteditable]::before,
.mx_WysiwygComposer_Editor_content[contenteditable]::before {
    color: #4f5660 !important;
    font-style: normal !important;
}


/* ============================================
   DISCORD UX — Room Header Compact
   Smaller, tighter header like Discord
   ============================================ */

/* Scoped to actual room header only — avoid matching settings/dialog headers */
.mx_RoomView [class*="RoomHeader"],
.mx_RoomView [class*="room-header"] {
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 16px !important;
}

/* Room name in header — Discord size */
.mx_RoomView [class*="RoomHeader"] h1,
.mx_RoomView [class*="RoomHeader"] [class*="heading"] {
    font-size: 1rem !important;
}

/* Topic separator — Discord uses a thin pipe */
.mx_RoomView [class*="RoomHeader"] [class*="topic"],
.mx_RoomHeader_topic {
    font-size: 0.75rem !important;
    padding-left: 12px !important;
    margin-left: 12px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.10) !important;
}