/*
 * OSE Community — Element Web Custom Theme
 * Dark mode inversion of opensourceeverything.io brand
 *
 * Design language: hacker-lounge, CRT grain, tasteful glitch
 * Fonts: Space Mono (mono) + Space Grotesk (sans-serif)
 * Palette: near-black #0a0a0a, warm white #e8e4e4, red #d42020, dark gold #b8860b
 */

/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* Override Compound design tokens for font family */
  --cpd-font-family-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  --cpd-font-family-mono: 'Space Mono', 'Courier New', monospace !important;
  --font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Monospace elements */
code, pre, .mx_EventTile_code,
.mx_TextualEvent, .mx_SenderProfile,
.mx_RoomTile_subtitle {
  font-family: 'Space Mono', 'Courier New', monospace !important;
}

/* ===== FILM GRAIN OVERLAY ===== */
/* Subtle noise texture across the entire UI — the OSE signature */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: screen;
}

/* ===== SCANLINES ===== */
/* Extremely subtle CRT scanlines — felt, not seen */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.008) 3px,
    rgba(255, 255, 255, 0.008) 4px
  );
  pointer-events: none;
  z-index: 10001;
}

/* ===== SELECTION ===== */
::selection {
  background: #d42020;
  color: #fff;
}

/* ===== GLITCH KEYFRAMES ===== */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.92; }
  94% { opacity: 1; }
  96% { opacity: 0.96; }
  97% { opacity: 1; }
}

@keyframes drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.5px); }
}

@keyframes glitchPulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: inset 1px 0 0 rgba(212, 32, 32, 0.15), inset -1px 0 0 rgba(0, 100, 255, 0.08); }
}

@keyframes subtleGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(212, 32, 32, 0); }
  50% { box-shadow: 0 0 8px rgba(212, 32, 32, 0.12); }
}

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

/* ===== SCROLLBAR ===== */
/* Thin, dark, red accent on hover */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #1a1a1a;
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: #d42020;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #1a1a1a transparent;
}

/* ===== LEFT PANEL / SIDEBAR ===== */
/* Subtle left-edge red line on the sidebar */
.mx_LeftPanel {
  border-right: 1px solid #141414 !important;
}

/* Room list items (both legacy mx_RoomTile and new Compound mx_RoomListItemView) */
.mx_RoomTile,
.mx_RoomListItemView,
[role="option"][class*="roomListItem"] {
  border-radius: 0 !important;
  transition: all 0.15s ease !important;
  border-left: 2px solid transparent !important;
  margin: 0 !important;
}

.mx_RoomTile:hover,
.mx_RoomListItemView:hover,
[role="option"][class*="roomListItem"]:hover {
  background: #111 !important;
  border-left-color: rgba(212, 32, 32, 0.4) !important;
}

/* Active/selected room — solid red left border */
.mx_RoomTile_selected,
.mx_RoomTile[aria-selected="true"],
.mx_RoomListItemView_selected,
[role="option"][class*="selected"] {
  background: #111 !important;
  border-left: 2px solid #d42020 !important;
  border-radius: 0 !important;
}

/* Selected room container background override */
[class*="selected"] > [class*="container"],
.mx_RoomListItemView_selected [class*="container"] {
  background: #111 !important;
}

/* Override Element's built-in teal indicator bar (4px ::before pseudo-element) */
.mx_RoomListItemView_selected [class*="container"]::before,
[role="option"][class*="selected"] [class*="container"]::before {
  background-color: #d42020 !important;
}

/* Hover indicator bar — faded red */
.mx_RoomListItemView:hover [class*="container"]::before,
[role="option"]:hover [class*="container"]::before {
  background-color: rgba(212, 32, 32, 0.4) !important;
}

/* Room name text */
.mx_RoomTile_title,
[data-testid="room-name"] {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
}

/* Room preview/subtitle */
.mx_RoomTile_subtitle,
[class*="subtitle"] {
  font-size: 0.68rem !important;
  letter-spacing: 0.3px !important;
  opacity: 0.5 !important;
}

/* ===== NOTIFICATION BADGES ===== */
.mx_NotificationBadge {
  animation: badgePulse 2s ease-in-out infinite !important;
  border-radius: 2px !important;
  font-family: 'Space Mono', monospace !important;
  font-weight: 700 !important;
}

/* ===== ROOM HEADER ===== */
.mx_RoomHeader {
  border-bottom: 1px solid #141414 !important;
}

.mx_RoomHeader_name {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* ===== MESSAGE TIMELINE ===== */
/* Action/info events — center avatar with text via flex */
.mx_EventTile.mx_EventTile_info[data-layout=group] {
  display: flex !important;
  align-items: center !important;
}

.mx_EventTile.mx_EventTile_info[data-layout=group] .mx_EventTile_avatar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset: auto !important;
  transform: none !important;
  flex-shrink: 0 !important;
  margin: 0 6px 0 0 !important;
}

.mx_EventTile.mx_EventTile_info[data-layout=group] .mx_EventTile_line {
  padding-inline-start: 0 !important;
  padding-block: 0 !important;
}

/* Individual messages */
.mx_EventTile {
  transition: background 0.15s ease !important;
}

.mx_EventTile:hover {
  background: rgba(255, 255, 255, 0.015) !important;
}

/* Sender name */
.mx_DisambiguatedProfile {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.5px !important;
}

/* Message body */
.mx_EventTile_body {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}

/* Timestamps */
.mx_EventTile_details,
.mx_MessageTimestamp {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.5px !important;
  opacity: 0.35 !important;
  transition: opacity 0.15s ease !important;
}

.mx_EventTile:hover .mx_MessageTimestamp,
.mx_EventTile:hover .mx_EventTile_details {
  opacity: 0.6 !important;
}

/* ===== CODE BLOCKS ===== */
/* Terminal-style code blocks */
.mx_EventTile_code,
code, pre {
  background: #050505 !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  font-size: 0.8rem !important;
}

pre {
  border-left: 2px solid #d42020 !important;
  padding: 1rem !important;
}

/* Inline code */
code:not(pre code) {
  background: #111 !important;
  padding: 2px 6px !important;
  color: #e8e4e4 !important;
}

/* ===== INPUT / COMPOSER ===== */
.mx_MessageComposer {
  border-top: 1px solid #141414 !important;
}

/* Text input focus glow */
.mx_BasicMessageComposer_input,
.mx_SendMessageComposer {
  font-family: 'Space Grotesk', sans-serif !important;
}

.mx_BasicMessageComposer_input:focus-within {
  box-shadow: 0 0 0 1px rgba(212, 32, 32, 0.2), 0 0 12px rgba(212, 32, 32, 0.06) !important;
  transition: box-shadow 0.3s ease !important;
}

/* ===== ROOM LIST VIEW TOGGLE ===== */
/* Remove the rounded outline behind the list/grid view toggle */
[class*="RoomListViewControls"],
[class*="viewControls"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ===== BUTTONS ===== */
/* Unified button style — identical for primary and secondary */
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_secondary,
.mx_AccessibleButton_kind_link {
  background: transparent !important;
  color: #e8e4e4 !important;
  border: 1px solid #3a3a3a !important;
  border-radius: 20px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
}

.mx_AccessibleButton_kind_primary:hover,
.mx_AccessibleButton_kind_secondary:hover,
.mx_AccessibleButton_kind_link:hover {
  border-color: #d42020 !important;
  background: rgba(212, 32, 32, 0.06) !important;
  color: #fff !important;
}

/* ===== DIALOGS / MODALS ===== */
.mx_Dialog {
  border-radius: 0 !important;
  border: 1px solid #1a1a1a !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8) !important;
}

/* ===== PILLS (mentions) ===== */
.mx_Pill {
  border-radius: 2px !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.72rem !important;
}

/* ===== REACTIONS ===== */
.mx_ReactionsRow_button {
  border-radius: 2px !important;
  transition: all 0.15s ease !important;
}

.mx_ReactionsRow_button:hover {
  transform: scale(1.1);
}

/* ===== SEARCH ===== */
.mx_SearchBar input {
  border-radius: 0 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.5px !important;
}

/* ===== CONTEXT MENUS ===== */
.mx_ContextualMenu {
  border-radius: 0 !important;
  border: 1px solid #1a1a1a !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

.mx_ContextualMenu_item {
  font-family: 'Space Grotesk', sans-serif !important;
  transition: all 0.1s ease !important;
}

/* ===== RIGHT PANEL ===== */
.mx_RightPanel {
  border-left: 1px solid #141414 !important;
}

/* ===== ROOM DIRECTORY / SPACE PANELS ===== */
.mx_SpacePanel {
  border-right: 1px solid #0a0a0a !important;
}

/* Space icons get subtle hover glow — on the wrapper, not the outer button */
.mx_SpaceButton:hover {
  box-shadow: none !important;
}

.mx_SpaceButton:hover .mx_SpaceButton_selectionWrapper {
  box-shadow: 0 0 10px rgba(212, 32, 32, 0.25) !important;
  border-radius: 12px !important;
}

/* Active space — no glow on the outer button, keep it clean */
.mx_SpaceButton_active,
.mx_SpaceButton[aria-selected="true"] {
  box-shadow: none !important;
  outline: none !important;
}

/* Hide the thick selection ring but keep its space so the icon doesn't shift */
.mx_SpaceButton_selectionWrapper {
  border-color: transparent !important;
}

.mx_SpaceButton_active .mx_SpaceButton_selectionWrapper {
  box-shadow: 0 0 12px rgba(212, 32, 32, 0.3) !important;
  border-radius: 12px !important;
}

/* ===== TYPING INDICATOR ===== */
.mx_WhoIsTypingTile {
  font-family: 'Space Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.5px !important;
  animation: drift 3s ease-in-out infinite;
}

/* ===== UNREAD MARKER ===== */
.mx_TimelineSeparator {
  border-color: #d42020 !important;
}

/* ===== TOOLTIP ===== */
.mx_Tooltip {
  border-radius: 0 !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.5px !important;
}

/* ===== VOICE / CALL WIDGETS ===== */
.mx_LegacyCallEvent,
.mx_CallView {
  border: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
}

/* ===== MISC POLISH ===== */
/* Sharp containers, rounded avatars */
.mx_RoomView_body,
.mx_AutoHideScrollbar {
  border-radius: 2px !important;
}

/* Avatar styling — rounded corners to match space icons */
.mx_BaseAvatar,
img.mx_BaseAvatar_image {
  border-radius: 12px !important;
}

/* Text inputs globally */
input, textarea {
  font-family: 'Space Grotesk', sans-serif !important;
  border-radius: 0 !important;
}

/* Login / auth pages */
.mx_AuthPage {
  background: #0a0a0a !important;
}

.mx_AuthPage .mx_AuthPage_modalBlur {
  background: #0a0a0a !important;
}

/* ===== SUBTLE FLICKER ON NAV ELEMENTS ===== */
/* Very subtle — just enough to feel alive */
.mx_UserMenu,
.mx_LeftPanel_filterContainer {
  animation: flicker 12s infinite;
}