/* ─────────────────────────────────────────────────────────────────────────
   Aria Element-Theme — Element-Web im Aria-Logo-Stil
   Wird via nginx sub_filter in jede Element-Web HTML-Response geladen.
   Override gilt für ALLE Element-Themes (light/dark).
   ──────────────────────────────────────────────────────────────────────── */

/* ── Aria-Farbpalette als CSS-Variablen ────────────────────────────────── */
:root {
    --aria-accent: #a78bfa;            /* Lila — Aria-Hauptakzent */
    --aria-accent-bright: #c4b5fd;
    --aria-accent-dim: #7c5cd7;
    --aria-accent-glow: rgba(167, 139, 250, 0.4);
    --aria-cyan: #67e8f9;
    --aria-pink: #f0abfc;
    --aria-bg: #0a0c10;
    --aria-bg-deeper: #050608;
    --aria-bg-panel: #0e1116;
    --aria-bg-card: #131720;
    --aria-line: #1c222d;
}

/* ── Globale Aria-Atmosphäre über Element-Hintergrund ──────────────────── */
body,
.mx_MatrixChat_wrapper,
.mx_MatrixChat {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(106, 76, 199, 0.10) 0%, transparent 50%) !important,
        radial-gradient(ellipse at 80% 100%, rgba(76, 121, 199, 0.07) 0%, transparent 55%) !important,
        linear-gradient(180deg, var(--aria-bg) 0%, var(--aria-bg-deeper) 100%) !important;
    background-attachment: fixed !important;
}

/* ── SpacePanel (linke schmale Bar) im Aria-Stil ───────────────────────── */
.mx_SpacePanel {
    background: rgba(14, 17, 22, 0.85) !important;
    backdrop-filter: blur(12px);
    border-right: 1px solid var(--aria-line) !important;
}

/* SpacePanel-Items: subtle Aria-Akzent */
.mx_SpaceButton,
.mx_SpaceButton_active {
    transition: all 0.2s ease;
}
.mx_SpaceButton:hover {
    transform: scale(1.05);
    box-shadow: 0 0 12px var(--aria-accent-glow);
}
.mx_SpaceButton_active::before {
    background: linear-gradient(180deg, var(--aria-accent) 0%, var(--aria-cyan) 100%) !important;
    box-shadow: 0 0 8px var(--aria-accent-glow);
}

/* ── LeftPanel (Räumeliste) ────────────────────────────────────────────── */
.mx_LeftPanel,
.mx_LeftPanel_outerWrapper {
    background: rgba(10, 12, 16, 0.7) !important;
    backdrop-filter: blur(8px);
}

/* Räume-Items mit lila Hover-Glow */
.mx_RoomTile:hover,
.mx_RoomTile_selected {
    background: rgba(167, 139, 250, 0.08) !important;
}
.mx_RoomTile_selected {
    border-left: 2px solid var(--aria-accent) !important;
    box-shadow: inset 0 0 8px rgba(167, 139, 250, 0.06);
}

/* ── RoomHeader (oben im Chat) ─────────────────────────────────────────── */
.mx_RoomHeader,
.mx_RoomView_body > div:first-child {
    background: rgba(14, 17, 22, 0.6) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--aria-line) !important;
}

/* ── EventTile (Chat-Messages) ─────────────────────────────────────────── */
.mx_EventTile:hover {
    background: rgba(167, 139, 250, 0.03) !important;
}
.mx_EventTile_selected {
    background: rgba(167, 139, 250, 0.06) !important;
    border-left: 2px solid var(--aria-accent) !important;
}

/* Sender-Namen NICHT überschreiben — Element vergibt pro Nutzer eine eigene
   Farbe (grün, rot, ...), das ist die natürliche Unterscheidung wer-sagt-was.
   (Lila-Override entfernt 2026-05-23, machte alle Namen gleich.) */

/* Eigene Messages (von mir gesendet) mit lila Akzent */
.mx_EventTile[data-self="true"] .mx_EventTile_line {
    border-right: 2px solid var(--aria-accent) !important;
    padding-right: 8px;
}

/* Aria-Nachrichten als lila Sprechblase (Telegram-Optik). Nur im Bubble-Layout
   und nur in Element-Web sichtbar, nicht in der nativen Handy-App. (2026-05-23) */
.mx_EventTile[data-layout="bubble"]:not([data-self="true"]) .mx_EventTile_line {
    background: var(--aria-accent) !important;
    border-radius: 14px !important;
    padding: 6px 12px !important;
}
.mx_EventTile[data-layout="bubble"]:not([data-self="true"]) .mx_EventTile_line .mx_EventTile_body,
.mx_EventTile[data-layout="bubble"]:not([data-self="true"]) .mx_EventTile_line .mx_MTextBody,
.mx_EventTile[data-layout="bubble"]:not([data-self="true"]) .mx_EventTile_line .mx_EventTile_content,
.mx_EventTile[data-layout="bubble"]:not([data-self="true"]) .mx_EventTile_line a {
    color: #000000 !important;
}

/* ── MessageComposer (Eingabezeile) ────────────────────────────────────── */
.mx_MessageComposer,
.mx_RoomView_inputArea,
.mx_BasicMessageComposer_input {
    background: rgba(19, 23, 32, 0.8) !important;
    backdrop-filter: blur(8px);
    border: 1px solid var(--aria-line) !important;
}
.mx_BasicMessageComposer_input:focus-within {
    border-color: var(--aria-accent) !important;
    box-shadow: 0 0 12px var(--aria-accent-glow);
}

/* Send-Button im Composer */
.mx_MessageComposer_sendMessage,
button[data-testid="sendmessagebtn"] {
    background: linear-gradient(135deg, var(--aria-accent) 0%, var(--aria-accent-dim) 100%) !important;
    color: white !important;
    box-shadow: 0 0 12px var(--aria-accent-glow);
    transition: all 0.2s ease;
}
.mx_MessageComposer_sendMessage:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 16px var(--aria-accent-glow);
}

/* ── Primäre Buttons im Aria-Stil ──────────────────────────────────────── */
.mx_AccessibleButton_kind_primary,
.mx_AccessibleButton_kind_primary_sm {
    background: linear-gradient(135deg, var(--aria-accent) 0%, var(--aria-accent-dim) 100%) !important;
    border: 1px solid rgba(167, 139, 250, 0.5) !important;
    box-shadow: 0 0 12px var(--aria-accent-glow);
    transition: all 0.2s ease;
}
.mx_AccessibleButton_kind_primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px var(--aria-accent-glow);
}

/* Sekundäre Buttons */
.mx_AccessibleButton_kind_secondary {
    border: 1px solid var(--aria-line) !important;
    transition: all 0.2s ease;
}
.mx_AccessibleButton_kind_secondary:hover {
    border-color: var(--aria-accent) !important;
    background: rgba(167, 139, 250, 0.05) !important;
}

/* ── Reaktions-Pills ───────────────────────────────────────────────────── */
.mx_ReactionsRow_button,
.mx_ReactionsRow_button_selected {
    border: 1px solid var(--aria-line) !important;
    transition: all 0.15s ease;
}
.mx_ReactionsRow_button:hover {
    border-color: var(--aria-accent) !important;
    box-shadow: 0 0 6px var(--aria-accent-glow);
}
.mx_ReactionsRow_button_selected {
    border-color: var(--aria-accent) !important;
    background: rgba(167, 139, 250, 0.1) !important;
}

/* ── Notification-Badges in Cyan (statt Element-Rot) ───────────────────── */
.mx_NotificationBadge_visible {
    background: linear-gradient(135deg, var(--aria-accent) 0%, var(--aria-cyan) 100%) !important;
    box-shadow: 0 0 6px var(--aria-accent-glow);
}

/* ── Such-Input ────────────────────────────────────────────────────────── */
.mx_RoomSearch input,
.mx_RoomList_searchInput input,
input.mx_SearchBox {
    background: rgba(19, 23, 32, 0.6) !important;
    border: 1px solid var(--aria-line) !important;
}
.mx_RoomSearch input:focus,
.mx_RoomList_searchInput input:focus {
    border-color: var(--aria-accent) !important;
    box-shadow: 0 0 8px var(--aria-accent-glow);
}

/* ── Custom Scrollbar überall ──────────────────────────────────────────── */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
*::-webkit-scrollbar-track {
    background: rgba(10, 12, 16, 0.3);
}
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2a2240 0%, #1c1838 100%);
    border-radius: 5px;
    border: 1px solid rgba(167, 139, 250, 0.1);
}
*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #3d2f5a 0%, #2d1b4e 100%);
    border-color: rgba(167, 139, 250, 0.3);
}

/* ── Selection in Aria-Lila ────────────────────────────────────────────── */
::selection {
    background: rgba(167, 139, 250, 0.3) !important;
    color: #ffffff !important;
}

/* ── Aria-spezifische Heading-Style für „Welcome to Aria" etc. ─────────── */
.mx_AuthBody h1,
.mx_Welcome h1 {
    background: linear-gradient(135deg, #e6e9ef 0%, var(--aria-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
}

/* ── Card-Hover-Effekte im Welcome-Bereich ─────────────────────────────── */
.mx_Welcome_centered .mx_AccessibleButton {
    transition: all 0.25s ease;
}
.mx_Welcome_centered .mx_AccessibleButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--aria-accent-glow);
}

/* ============================================================ */
/* WELCOME v17 — Vanta.HALO WebGL Background + Intro-Fade        */
/* ============================================================ */

@keyframes aria-fade-rise {
    0%   { opacity: 0; transform: translateY(30px) scale(0.96); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0);  }
}

/* ===== Stage: schwarzer Background — Vanta.HALO malt drauf ===== */
html body .mx_AuthPage {
    background: #05021c !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ===== Vanta-Layer hinter allem ===== */
html body #aria-vanta-bg {
    z-index: 0 !important;
}

/* ===== Welcome-Content: IMMER sichtbar (2026-05-31 Fix — Login-Modal war versteckt) ===== */
html body .mx_AuthPage_modal.aria-intro {
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
}
html body .mx_AuthPage_modal.aria-intro.aria-revealed {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ===== Welcome-Content: kein Rahmen, schwebt ===== */
html body .mx_AuthPage_modal {
    background: transparent !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    z-index: 10 !important;
}
html body .mx_AuthPage_modalContent {
    background: transparent !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
html body .mx_AuthPage_modal [class*="_glass"] {
    background: rgba(10,5,30,0.5) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    outline: 1px solid rgba(167,139,250,0.25) !important;
    border: none !important;
    border-radius: 24px !important;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        0 0 80px rgba(102,51,255,0.35),
        inset 0 1px 0 rgba(255,255,255,0.1) !important;
    padding: 40px 48px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* ===== Aria-Logo: leuchtend ===== */
html body .mx_AuthPage img.mx_AuthHeaderLogo,
html body .mx_AuthPage [class*="mx_AuthHeader"] img {
    width: 96px !important;
    height: 96px !important;
    border-radius: 24px !important;
    box-shadow:
        0 0 50px rgba(167,139,250,0.7),
        0 0 100px rgba(102,51,255,0.4) !important;
}

/* ===== Welcome Heading ===== */
html body .mx_AuthPage h1 {
    background: linear-gradient(135deg, #ffffff 0%, #e0d4ff 50%, #a78bfa 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    margin: 16px 0 24px 0 !important;
    text-align: center !important;
}

/* ===== Primary Button ===== */
html body .mx_AuthPage button.mx_AccessibleButton_kind_primary {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 50%, #6633ff 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow:
        0 4px 20px rgba(102,51,255,0.5),
        0 0 40px rgba(167,139,250,0.4),
        inset 0 1px 0 rgba(255,255,255,0.3) !important;
    transition: all 0.3s ease !important;
    min-width: 280px !important;
    cursor: pointer !important;
}
html body .mx_AuthPage button.mx_AccessibleButton_kind_primary:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow:
        0 10px 32px rgba(102,51,255,0.65),
        0 0 60px rgba(167,139,250,0.6) !important;
}

/* ===== Secondary Button ===== */
html body .mx_AuthPage button.mx_AccessibleButton_kind_secondary {
    background: rgba(20,12,50,0.5) !important;
    color: #e0d4ff !important;
    border: 1px solid rgba(167,139,250,0.4) !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
    min-width: 280px !important;
}
html body .mx_AuthPage button.mx_AccessibleButton_kind_secondary:hover {
    background: rgba(167,139,250,0.15) !important;
    border-color: rgba(167,139,250,0.7) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* ===== Footer ===== */
html body .mx_AuthFooter {
    color: rgba(224,212,255,0.4) !important;
    font-size: 11px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    html body .mx_AuthPage_modal.aria-intro {
        opacity: 1 !important;
        animation: none !important;
    }
}

/* === v18 Scroll-Through-Brain === */
@keyframes aria-hint-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
    50%      { transform: translateX(-50%) translateY(6px); opacity: 1.0; }
}

/* Welcome-Box IMMER sichtbar (2026-05-31 Fix — JS-Reveal war unzuverlässig) */
html body .mx_AuthPage_modal.aria-intro {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
}
html body .mx_AuthPage_modal.aria-intro.aria-revealed {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}