/* ═══════════════════════════════════════════════════════════════
   SPACE CITY EIDOLONS - High Fantasy Dark Theme
   A mystical realm awaits...
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ⚔️ Primary Accent - Royal Purple & Gold */
    --accent-color: #9333ea;           /* Mystic Purple */
    --accent-color-darker: #7c3aed;
    --accent-gold: #d4a855;            /* Ancient Gold */
    --accent-gold-glow: #f5d998;
    --accent-emerald: #10b981;         /* Arcane Emerald */
    
    /* 🏰 Background - Deep Castle Stone */
    --background-primary: #0c0a14;     /* Obsidian Black */
    --background-secondary: #13111c;   /* Dark Sanctum */
    --background-tertiary: #1e1a2e;    /* Twilight Stone */
    --background-hover: #2a2440;       /* Torch Glow */
    
    /* 📜 Text - Parchment & Silver */
    --text-primary: #e8e4f0;           /* Moonlit Parchment */
    --text-secondary: #9d95b0;         /* Faded Ink */
    --text-gold: #d4a855;              /* Golden Script */
    
    /* ✨ Borders & Effects */
    --border-subtle: #2d2844;
    --border-accent: rgba(147, 51, 234, 0.4);
    --glow-purple: rgba(147, 51, 234, 0.3);
    --glow-gold: rgba(212, 168, 85, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR - The Guild Hall
   ═══════════════════════════════════════════════════════════════ */
.mx_LeftPanel {
    background: linear-gradient(180deg, var(--background-secondary) 0%, var(--background-primary) 100%) !important;
    border-right: 1px solid var(--border-subtle) !important;
}

.mx_RoomList {
    background-color: transparent !important;
}

/* Room tiles - Quest entries */
.mx_RoomTile {
    border-radius: 6px !important;
    margin: 3px 8px !important;
    transition: all 0.2s ease !important;
}

.mx_RoomTile:hover {
    background: linear-gradient(90deg, var(--background-hover) 0%, transparent 100%) !important;
    border-left: 2px solid var(--accent-gold) !important;
}

.mx_RoomTile_selected,
.mx_RoomTile_selected:hover {
    background: linear-gradient(90deg, var(--background-tertiary) 0%, var(--background-secondary) 100%) !important;
    border-left: 3px solid var(--accent-color) !important;
    box-shadow: inset 0 0 20px var(--glow-purple) !important;
}

/* Space headers */
.mx_RoomSublist_headerText {
    color: var(--accent-gold) !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER - The Banner
   ═══════════════════════════════════════════════════════════════ */
.mx_RoomHeader {
    background: linear-gradient(90deg, var(--background-secondary) 0%, var(--background-tertiary) 100%) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.mx_RoomHeader_name {
    color: var(--text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MESSAGE AREA - The Great Hall
   ═══════════════════════════════════════════════════════════════ */
.mx_RoomView_body {
    background: radial-gradient(ellipse at bottom, var(--background-tertiary) 0%, var(--background-primary) 70%) !important;
}

/* Message hover effect */
.mx_EventTile:hover {
    background: linear-gradient(90deg, var(--glow-purple) 0%, transparent 50%) !important;
}

/* Timestamps */
.mx_MessageTimestamp {
    color: var(--text-secondary) !important;
}

/* Sender names */
.mx_DisambiguatedProfile_displayName {
    color: var(--accent-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS - Enchanted Actions
   ═══════════════════════════════════════════════════════════════ */
.mx_AccessibleButton_kind_primary {
    background: linear-gradient(135deg, var(--accent-color) 0%, #7c3aed 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px var(--glow-purple) !important;
    transition: all 0.3s ease !important;
}

.mx_AccessibleButton_kind_primary:hover {
    background: linear-gradient(135deg, #a855f7 0%, var(--accent-color) 100%) !important;
    box-shadow: 0 6px 20px var(--glow-purple), 0 0 30px var(--glow-purple) !important;
    transform: translateY(-1px) !important;
}

/* Secondary buttons */
.mx_AccessibleButton_kind_secondary {
    border: 1px solid var(--accent-gold) !important;
    color: var(--accent-gold) !important;
}

.mx_AccessibleButton_kind_secondary:hover {
    background-color: var(--glow-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   COMPOSER - The Scribe's Desk
   ═══════════════════════════════════════════════════════════════ */
.mx_MessageComposer {
    background: linear-gradient(0deg, var(--background-secondary) 0%, var(--background-tertiary) 100%) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.mx_BasicMessageComposer_input,
.mx_SendMessageComposer {
    background-color: var(--background-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s ease !important;
}

.mx_BasicMessageComposer_input:focus-within,
.mx_SendMessageComposer:focus-within {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 10px var(--glow-purple) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE - The Portal
   ═══════════════════════════════════════════════════════════════ */
.mx_AuthPage {
    background: radial-gradient(ellipse at center, var(--background-tertiary) 0%, var(--background-primary) 70%) !important;
}

.mx_AuthPage_modal {
    background: var(--background-secondary) !important;
    border: 1px solid var(--border-accent) !important;
    box-shadow: 0 0 50px var(--glow-purple), 0 0 100px rgba(147, 51, 234, 0.1) !important;
}

/* Hide Element logo */
.mx_AuthPage_header img,
.mx_AuthHeader_logo,
.mx_AuthHeader img,
.mx_AuthBody_header img,
[class*="AuthHeader"] img,
[class*="AuthPage"] img[alt*="Element"],
[class*="AuthPage"] img[alt*="logo"],
.mx_Welcome img,
img[src*="element"],
img[alt="Element"],
.mx_AuthPage img[src*="themes"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Custom branding container - injected before login box */
.mx_AuthPage::before {
    content: "";
    display: block;
    width: 180px;
    height: 180px;
    margin: 0 auto 15px auto;
    background-image: url('logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mx_AuthPage::after {
    content: "Space City Eidolons";
    display: block;
    font-size: 26px;
    font-weight: bold;
    color: var(--accent-gold);
    text-align: center;
    margin-bottom: 20px;
    position: absolute;
    top: 210px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 20px var(--glow-gold);
}

/* Position auth page for branding */
.mx_AuthPage {
    position: relative !important;
    padding-top: 260px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Responsive login box */
.mx_AuthPage_modal,
.mx_AuthPage_modalBlur {
    width: 90vw !important;
    max-width: 480px !important;
    min-width: 280px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

.mx_AuthPage_modalContent {
    width: 100% !important;
    max-width: 100% !important;
}

/* Make form inputs responsive */
.mx_AuthPage .mx_Field {
    width: 100% !important;
}

.mx_AuthPage input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .mx_AuthPage_modal,
    .mx_AuthPage_modalBlur {
        width: 95vw !important;
        padding: 16px !important;
    }
    
    .mx_AuthPage::before {
        width: 140px;
        height: 140px;
    }
    
    .mx_AuthPage::after {
        font-size: 22px;
        top: 170px;
    }
    
    .mx_AuthPage {
        padding-top: 220px !important;
    }
}

/* Input fields on login */
.mx_Field input {
    background-color: var(--background-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.mx_Field input:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 8px var(--glow-purple) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DIALOGS & MENUS - Ancient Tomes
   ═══════════════════════════════════════════════════════════════ */
.mx_Dialog {
    background-color: var(--background-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
}

.mx_ContextualMenu {
    background-color: var(--background-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

.mx_ContextualMenu_item:hover {
    background-color: var(--background-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════
   USER PANEL - The Adventurer's Profile  
   ═══════════════════════════════════════════════════════════════ */
.mx_UserMenu {
    background-color: var(--background-tertiary) !important;
}

.mx_UserMenu_contextMenu {
    background-color: var(--background-secondary) !important;
    border: 1px solid var(--border-accent) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBARS - Enchanted Parchment Edges
   ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background-primary);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--border-subtle) 0%, var(--background-tertiary) 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-color-darker) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   NOTIFICATIONS - Magical Alerts
   ═══════════════════════════════════════════════════════════════ */
.mx_NotificationBadge {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.5) !important;
}

.mx_NotificationBadge_highlighted {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #b8860b 100%) !important;
    box-shadow: 0 0 10px var(--glow-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   REACTIONS - Arcane Symbols
   ═══════════════════════════════════════════════════════════════ */
.mx_ReactionRow_button {
    background-color: var(--background-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
}

.mx_ReactionRow_button:hover {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 8px var(--glow-purple) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROOM AVATARS - Guild Emblems
   ═══════════════════════════════════════════════════════════════ */
.mx_BaseAvatar {
    border: 2px solid transparent !important;
    transition: border-color 0.2s ease !important;
}

.mx_RoomTile:hover .mx_BaseAvatar {
    border-color: var(--accent-gold) !important;
}