/*
 * ============================================================
 * neo theme for Element Web
 * neo.bontuu.com — squawk design system
 * VERSION: v1.0 — 2026-05-03
 * Colours sourced live from squawk.bontuu.com CSS variables
 * ============================================================
 */

/* ── Fonts ─────────────────────────────────────────────────── */

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

* {
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
                 'Consolas', monospace !important;
    letter-spacing: -0.01em;
}

/* ── Element compound layout overrides ────────────────────── */

.mx_MatrixChat,
.mx_RoomView,
.mx_HomePage,
[class*='mx_'] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
}

/* Left panel / room list sidebar */
.mx_LeftPanel_wrapper,
.mx_SpacePanel,
.mx_RoomList,
.mx_LeftPanel {
    background-color: #0a0c0f !important;
    border-right: 1px solid #1e2229 !important;
}

/* Room list items */
.mx_RoomTile {
    border-radius: 0 !important;
}

.mx_RoomTile:hover {
    background-color: #0f1115 !important;
}

.mx_RoomTile_selected,
.mx_RoomTile[aria-selected="true"] {
    background-color: #0f1520 !important;
    border-left: 2px solid #5DCAA5 !important;
}

/* Right panel */
.mx_RightPanel,
.mx_MemberList,
.mx_RoomSummaryCard {
    background-color: #0a0c0f !important;
    border-left: 1px solid #1e2229 !important;
}

/* Message timeline */
.mx_RoomView_timeline,
.mx_RoomView_body {
    background-color: #0d0f12 !important;
}

/* Message bubbles / events */
.mx_EventTile {
    background-color: transparent !important;
    border-bottom: 1px solid #111418 !important;
    border-radius: 0 !important;
    padding: 6px 12px !important;
}

.mx_EventTile:hover,
.mx_EventTile_hovered {
    background-color: #0f1115 !important;
}

.mx_EventTile_selected {
    background-color: #0f1520 !important;
}

/* Sender name */
.mx_EventTile .mx_DisambiguatedProfile_displayName,
.mx_EventTile .mx_SenderProfile .mx_Username_color1,
.mx_EventTile .mx_SenderProfile .mx_Username_color2,
.mx_EventTile .mx_SenderProfile .mx_Username_color3,
.mx_EventTile .mx_SenderProfile .mx_Username_color4,
.mx_EventTile .mx_SenderProfile .mx_Username_color5,
.mx_EventTile .mx_SenderProfile .mx_Username_color6,
.mx_EventTile .mx_SenderProfile .mx_Username_color7,
.mx_EventTile .mx_SenderProfile .mx_Username_color8 {
    color: #378ADD !important;
}

/* Message text */
.mx_EventTile .mx_EventTile_content,
.mx_EventTile .mx_MTextBody {
    color: #9ca3af !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Timestamp */
.mx_EventTile .mx_MessageTimestamp {
    color: #3d4450 !important;
    font-size: 11px !important;
}

/* Message composer / input box */
.mx_MessageComposer,
.mx_RoomView_messageComposerButtons,
.mx_SendMessageComposer {
    background-color: #0a0c0f !important;
    border-top: 1px solid #1e2229 !important;
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_input,
[contenteditable="true"].mx_BasicMessageComposer_input {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    color: #c8cdd6 !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
}

.mx_BasicMessageComposer .mx_BasicMessageComposer_input:focus-within,
.mx_BasicMessageComposer_input:focus {
    border-color: #5DCAA5 !important;
    outline: none !important;
}

/* Topbar / room header */
.mx_RoomHeader,
.mx_LegacyRoomHeader {
    background-color: #0a0c0f !important;
    border-bottom: 1px solid #1e2229 !important;
    height: 40px !important;
}

.mx_RoomHeader_name,
.mx_LegacyRoomHeader_name {
    color: #c8cdd6 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.mx_RoomHeader_topic,
.mx_LegacyRoomHeader_topic {
    color: #566270 !important;
    font-size: 11px !important;
}

/* Buttons */
.mx_AccessibleButton {
    border-radius: 0 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
}

.mx_AccessibleButton_kind_primary,
.mx_Dialog_primary {
    background-color: #5DCAA5 !important;
    color: #0d0f12 !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
}

.mx_AccessibleButton_kind_primary:hover {
    background-color: #1D9E75 !important;
}

.mx_AccessibleButton_kind_secondary {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    color: #9ca3af !important;
    border-radius: 0 !important;
}

.mx_AccessibleButton_kind_secondary:hover {
    background-color: #0f1115 !important;
    color: #c8cdd6 !important;
}

.mx_AccessibleButton_kind_danger {
    background-color: #2a1010 !important;
    border: 1px solid #E24B4A !important;
    color: #E24B4A !important;
    border-radius: 0 !important;
}

/* Search bar */
.mx_SearchBar,
.mx_SpotlightDialog,
.mx_RoomSearch {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
}

.mx_SpotlightDialog_wrapper {
    background-color: rgba(0,0,0,0.7) !important;
}

.mx_SpotlightDialog {
    background-color: #0a0c0f !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

/* Dialogs / modals */
.mx_Dialog {
    background-color: #0d0f12 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

.mx_Dialog_header,
.mx_Dialog_title {
    background-color: #0a0c0f !important;
    border-bottom: 1px solid #1e2229 !important;
    color: #c8cdd6 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
}

.mx_Dialog .mx_Dialog_content {
    color: #9ca3af !important;
    font-size: 12px !important;
}

/* Overlays / backdrop */
.mx_Dialog_background {
    background-color: rgba(0,0,0,0.7) !important;
}

/* Context menus */
.mx_ContextualMenu {
    background-color: #0a0c0f !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}

.mx_ContextualMenu_item,
.mx_IconizedContextMenuOption {
    color: #9ca3af !important;
    font-size: 12px !important;
    border-radius: 0 !important;
}

.mx_ContextualMenu_item:hover,
.mx_IconizedContextMenuOption:hover {
    background-color: #0f1115 !important;
    color: #c8cdd6 !important;
}

/* Tooltips */
.mx_Tooltip {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    color: #c8cdd6 !important;
    font-size: 11px !important;
}

/* Badges / notification counts */
.mx_NotificationBadge,
.mx_RoomTile_badgeContainer .mx_NotificationBadge {
    background-color: #5DCAA5 !important;
    color: #0d0f12 !important;
    border-radius: 2px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

.mx_NotificationBadge_highlighted {
    background-color: #E24B4A !important;
}

/* Unread indicators */
.mx_RoomTile_unreadNotificationBadge {
    background-color: #5DCAA5 !important;
    border-radius: 2px !important;
}

/* Status indicators */
.mx_RoomTile_dot {
    background-color: #5DCAA5 !important;
}

/* Avatar placeholders */
.mx_BaseAvatar_initial {
    background-color: #0f1520 !important;
    color: #5DCAA5 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
}

.mx_BaseAvatar_image {
    border-radius: 0 !important;
}

/* Member list */
.mx_EntityTile {
    border-radius: 0 !important;
}

.mx_EntityTile:hover {
    background-color: #0f1115 !important;
}

.mx_EntityTile_name {
    color: #9ca3af !important;
    font-size: 12px !important;
}

/* Code blocks in messages */
.mx_EventTile pre,
.mx_EventTile code {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    color: #5DCAA5 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 11px !important;
}

/* File / attachment tiles */
.mx_MFileBody,
.mx_MediaBody {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    color: #9ca3af !important;
    font-size: 12px !important;
}

.mx_MFileBody_info_filename {
    color: #5DCAA5 !important;
}

/* Reactions */
.mx_ReactionsRow_showAll,
.mx_Reaction {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 2px !important;
    color: #9ca3af !important;
    font-size: 11px !important;
}

.mx_Reaction_selected,
.mx_Reaction:hover {
    background-color: #0f1520 !important;
    border-color: #5DCAA5 !important;
}

/* Read receipts */
.mx_ReadReceiptGroup .mx_BaseAvatar {
    border-radius: 0 !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: #070809;
}
::-webkit-scrollbar-thumb {
    background: #1e2229;
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: #3d4450;
}

/* User settings panel */
.mx_UserSettingsDialog .mx_TabbedView_tabLabel {
    color: #9ca3af !important;
    font-size: 12px !important;
    border-radius: 0 !important;
}

/* _text is the actual rendered text node — needs targeting separately */
.mx_UserSettingsDialog .mx_TabbedView_tabLabel .mx_TabbedView_tabLabel_text {
    color: #9ca3af !important;
    font-size: 13px !important;
}

.mx_UserSettingsDialog .mx_TabbedView_tabLabel_active {
    color: #5DCAA5 !important;
    border-left: 2px solid #5DCAA5 !important;
    background-color: #0f1520 !important;
}

.mx_UserSettingsDialog .mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_text {
    color: #5DCAA5 !important;
}

/* Inputs and form controls */
.mx_Field,
.mx_SearchBox input,
.mx_Field input,
.mx_Field textarea,
.mx_Field select {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    color: #c8cdd6 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
}

.mx_Field input:focus,
.mx_Field textarea:focus {
    border-color: #5DCAA5 !important;
    outline: none !important;
}

.mx_Field label {
    color: #566270 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

/* Login page */
.mx_AuthPage {
    background-color: #0d0f12 !important;
}

.mx_AuthBody {
    background-color: #0a0c0f !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mx_AuthHeader,
.mx_AuthBody_header {
    color: #5DCAA5 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* Dividers and separators */
.mx_RoomView_timeline hr,
hr {
    border-color: #1e2229 !important;
}

/* Section headers in sidebar */
.mx_RoomSublist_headerText,
.mx_RoomSublist .mx_RoomSublist_headerText {
    color: #566270 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 500 !important;
}

/* Typing indicator */
.mx_WhoIsTypingTile {
    color: #566270 !important;
    font-size: 11px !important;
    font-style: italic !important;
}

/* Links */
.mx_EventTile a {
    color: #5DCAA5 !important;
}

.mx_EventTile a:hover {
    color: #1D9E75 !important;
}

/* ── Auth pages (login / register) — added 2026-05-05 ──────── */

/* Full page background */
.mx_AuthPage {
    background-color: #0d0f12 !important;
    min-height: 100vh !important;
}

/* The centered card / modal */
.mx_AuthPage_modal,
.mx_AuthPage > div:first-child {
    background-color: #0a0c0f !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Logo container — let our replacement SVG show, constrain size */
.mx_AuthHeaderLogo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 1.5rem 2rem 1rem !important;
}

.mx_AuthHeaderLogo img {
    height: 36px !important;
    width: auto !important;
    max-width: 160px !important;
}

/* Auth form header — Sign in / Create account */
.mx_AuthBody_header,
.mx_Auth_header {
    color: #c8cdd6 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border-bottom: 1px solid #1e2229 !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1.25rem !important;
}

/* Server picker (shows server name) */
.mx_ServerPicker {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    margin-bottom: 1rem !important;
    padding: 6px 10px !important;
}

.mx_ServerPicker_server {
    color: #566270 !important;
    font-size: 11px !important;
}

.mx_ServerPicker_change {
    color: #5DCAA5 !important;
    font-size: 11px !important;
}

/* Form fields on auth pages */
.mx_AuthPage .mx_Field,
.mx_AuthBody .mx_Field {
    margin-bottom: 12px !important;
}

.mx_AuthPage .mx_Field input,
.mx_AuthBody .mx_Field input {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    color: #c8cdd6 !important;
    font-size: 12px !important;
    height: 40px !important;
    padding: 0 12px !important;
}

.mx_AuthPage .mx_Field input:focus,
.mx_AuthBody .mx_Field input:focus {
    border-color: #5DCAA5 !important;
    outline: none !important;
    box-shadow: none !important;
}

.mx_AuthPage .mx_Field label,
.mx_AuthBody .mx_Field label {
    color: #566270 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    background-color: #070809 !important;
}

/* Primary button (Sign In / Register) */
.mx_AuthPage .mx_AccessibleButton_kind_primary,
.mx_AuthBody .mx_AccessibleButton_kind_primary,
.mx_Login_submit,
.mx_Register_submit {
    background-color: #5DCAA5 !important;
    border: 1px solid #1D9E75 !important;
    border-radius: 0 !important;
    color: #0d0f12 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    height: 40px !important;
    letter-spacing: 0.04em !important;
    width: 100% !important;
    margin-top: 4px !important;
}

.mx_AuthPage .mx_AccessibleButton_kind_primary:hover,
.mx_AuthBody .mx_AccessibleButton_kind_primary:hover {
    background-color: #1D9E75 !important;
}

/* Secondary / link buttons */
.mx_AuthPage .mx_AccessibleButton_kind_link,
.mx_AuthBody .mx_AccessibleButton_kind_link {
    color: #5DCAA5 !important;
    font-size: 11px !important;
}

/* Login type tabs (Password / SSO) */
.mx_Login_type_container {
    border-bottom: 1px solid #1e2229 !important;
    margin-bottom: 1rem !important;
}

.mx_Login_type_container .mx_AccessibleButton {
    color: #566270 !important;
    font-size: 11px !important;
    border-bottom: 2px solid transparent !important;
    padding: 6px 12px !important;
    border-radius: 0 !important;
}

.mx_Login_type_container .mx_AccessibleButton_selected {
    color: #5DCAA5 !important;
    border-bottom-color: #5DCAA5 !important;
}

/* Error messages */
.mx_Login_error,
.mx_Register_error {
    background-color: #1a0a0a !important;
    border: 1px solid #E24B4A !important;
    border-radius: 0 !important;
    color: #E24B4A !important;
    font-size: 11px !important;
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
}

/* Powered by Matrix footer — hide */
.mx_AuthPage .mx_AuthFooter,
.mx_AuthBody .mx_AuthFooter,
[class*='mx_AuthFooter'],
.mx_AuthPage footer {
    display: none !important;
}

/* Password visibility toggle */
.mx_Field_postfix {
    background-color: #070809 !important;
    border-left: 1px solid #1e2229 !important;
    color: #566270 !important;
}

/* Registration — country picker */
.mx_CountryDropdown {
    background-color: #070809 !important;
    border: 1px solid #1e2229 !important;
    border-radius: 0 !important;
    color: #c8cdd6 !important;
}

/* QR login section */
.mx_LoginWithQRSection {
    border-top: 1px solid #1e2229 !important;
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    color: #566270 !important;
    font-size: 11px !important;
}


/* ── Kill lake.jpg background image — added 2026-05-05 ─────── */
.mx_AuthPage,
.mx_AuthPage *,
.mx_AuthPage_modal,
.mx_AuthBody {
    background-image: none !important;
}

/* ── Settings dialog — CPD variable overrides + targeted rules ── */
/* Override CPD variables at dialog scope so all child components inherit */
.mx_UserSettingsDialog,
.mx_RoomSettingsDialog {
    --cpd-color-text-primary: #c8cdd6 !important;
    --cpd-color-text-secondary: #9ca3af !important;
    --cpd-color-text-disabled: #566270 !important;
    --cpd-color-bg-canvas-default: #0d0f12 !important;
    --cpd-color-bg-subtle-primary: #0f1117 !important;
    --cpd-color-bg-subtle-secondary: #0a0c0f !important;
    --cpd-color-border-interactive-secondary: #1e2229 !important;
    --cpd-color-gray-800: #9ca3af !important;
    --cpd-color-gray-900: #c8cdd6 !important;
    --cpd-color-gray-1400: #c8cdd6 !important;
    --cpd-color-gray-300: #0f1117 !important;
    --cpd-color-gray-200: #0a0c0f !important;
    --cpd-color-gray-100: #070809 !important;
    background-color: #0d0f12 !important;
    color: #c8cdd6 !important;
}

/* Tab panel content area */
.mx_UserSettingsDialog .mx_TabbedView_tabPanel,
.mx_UserSettingsDialog .mx_TabbedView_tabPanelContent {
    background-color: #0d0f12 !important;
    color: #c8cdd6 !important;
}

/* Settings sections and headings */
.mx_SettingsTab,
.mx_SettingsTab_section,
.mx_SettingsTab_sections {
    background-color: #0d0f12 !important;
    color: #c8cdd6 !important;
}

.mx_SettingsSection,
.mx_SettingsSection_header,
.mx_SettingsSubsection,
.mx_SettingsSubsectionHeading,
.mx_SettingsSubsectionHeading_heading {
    color: #c8cdd6 !important;
    border-color: #1e2229 !important;
}

.mx_SettingsSubsection_description,
.mx_SettingsTab_section_caption,
.mx_SettingsTab_subsectionText,
.mx_SettingsTab_microcopy_warning {
    color: #9ca3af !important;
}

/* Toggle / checkbox setting rows */
.mx_SettingsFlag .mx_SettingsFlag_label {
    color: #c8cdd6 !important;
}

.mx_SettingsFlag .mx_SettingsFlag_microcopy {
    color: #9ca3af !important;
}

/* Fieldset legend and description */
.mx_SettingsFieldset_legend {
    color: #c8cdd6 !important;
}

.mx_SettingsFieldset_description {
    color: #9ca3af !important;
}

/* Settings header / subheader */
.mx_SettingsHeader,
.mx_SettingsSubheader {
    color: #c8cdd6 !important;
}

/* Dropdown labels */
.mx_SettingsDropdown_label {
    color: #9ca3af !important;
}

/* Security tab — session / device list */
.mx_UserSettingsDialog .mx_DevicesPanel,
.mx_UserSettingsDialog .mx_DevicesList {
    background-color: #0a0c0f !important;
}

/* General text fallback inside dialog */
.mx_UserSettingsDialog p,
.mx_UserSettingsDialog h1,
.mx_UserSettingsDialog h2,
.mx_UserSettingsDialog h3,
.mx_UserSettingsDialog h4 {
    color: #c8cdd6 !important;
}

/* Encryption / Security tab cross-signing and verification */
.mx_EncryptionUserSettingsTab,
.mx_CrossSigningPanel,
.mx_CrossSigningPanel_row {
    color: #c8cdd6 !important;
    background-color: #0d0f12 !important;
}

.mx_CrossSigningPanel_row label,
.mx_CrossSigningPanel_row span {
    color: #c8cdd6 !important;
}

/* Verification badge colours */
.mx_E2EIcon_verified { filter: none !important; }
.mx_E2EIcon_warning { filter: none !important; }