/*
 * XNight «Obsidian» — a darker look on top of xnight-redesign.css.
 * Visual only: colours, depth, light. No layout or behaviour changes.
 * The light theme is left as it is.
 */

body:not(.light-theme) {
    --bg-color: #040406;
    --card-bg: #0b0b10;
    --input-bg: #101017;
    --xn-surface-2: #111119;
    --border-color: rgba(255, 255, 255, 0.06);
    --text-main: #f4f3fb;
    --text-muted: #8d8ba3;
    --dock-bg: rgba(10, 10, 15, 0.72);
    --header-bg: rgba(4, 4, 6, 0.66);
    --xn-hover: rgba(255, 255, 255, 0.04);

    /* Edge light: a hairline highlight on the top of raised surfaces. */
    --ob-rim: inset 0 1px 0 rgba(255, 255, 255, 0.055);
    --ob-raise: 0 1px 0 rgba(255, 255, 255, 0.02), 0 18px 40px -22px rgba(0, 0, 0, 0.9);
    --ob-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 42%), #0b0b10;
    --ob-glow: 0 10px 30px -8px rgba(139, 123, 255, 0.55);
}

/* ---------- Ambient background ---------- */
body:not(.light-theme) {
    background:
        radial-gradient(1100px 620px at 85% -12%, rgba(124, 92, 255, 0.11), transparent 62%),
        radial-gradient(900px 560px at -10% 108%, rgba(236, 72, 153, 0.06), transparent 60%),
        #040406 fixed !important;
}
body:not(.light-theme)::before {
    /* Fine grain so the gradients do not band on phone screens. */
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Raised surfaces: posts, composer, cards ---------- */
body:not(.light-theme) .post-item,
body:not(.light-theme) .tweet-create-box,
body:not(.light-theme) .public-card,
body:not(.light-theme) .dm-chat-item,
body:not(.light-theme) .adm-user,
body:not(.light-theme) .modal-card {
    background: var(--ob-surface) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--ob-rim), var(--ob-raise) !important;
}
body:not(.light-theme) .post-item:hover {
    border-color: rgba(139, 123, 255, 0.22) !important;
    background: linear-gradient(180deg, rgba(139, 123, 255, 0.045), rgba(255, 255, 255, 0) 55%), #0c0c12 !important;
}

/* ---------- Header and dock: glass ---------- */
body:not(.light-theme) .twitter-header {
    background: var(--header-bg) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
body:not(.light-theme) .bottom-dock {
    background: var(--dock-bg) !important;
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    backdrop-filter: saturate(160%) blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: var(--ob-rim), 0 20px 50px -18px rgba(0, 0, 0, 0.95) !important;
}

/* ---------- Sidebar ---------- */
body:not(.light-theme) .sidebar-item { transition: background-color .15s ease, color .15s ease, box-shadow .2s ease; }
body:not(.light-theme) .sidebar-item.active,
body:not(.light-theme) .sidebar-item[aria-current="page"] {
    background: linear-gradient(180deg, rgba(139, 123, 255, 0.16), rgba(139, 123, 255, 0.07)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(139, 123, 255, 0.18);
}

/* ---------- Buttons with depth ---------- */
body:not(.light-theme) .tweet-post-btn,
body:not(.light-theme) .submit-button,
body:not(.light-theme) .btn-primary {
    background: linear-gradient(180deg, #a094ff 0%, #8072ff 52%, #6c5cf5 100%) !important;
    color: #0b0918 !important;
    border: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.18), var(--ob-glow) !important;
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
body:not(.light-theme) .tweet-post-btn:hover,
body:not(.light-theme) .submit-button:hover,
body:not(.light-theme) .btn-primary:hover { filter: brightness(1.06); }
body:not(.light-theme) .tweet-post-btn:active,
body:not(.light-theme) .submit-button:active,
body:not(.light-theme) .btn-primary:active { transform: translateY(1px) scale(0.99); }

/* Secondary buttons: dark glass with an edge */
body:not(.light-theme) .profile-edit-btn,
body:not(.light-theme) .adm-act {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------- Inputs ---------- */
body:not(.light-theme) .input,
body:not(.light-theme) .search-input,
body:not(.light-theme) textarea.input {
    background: #0d0d13 !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
body:not(.light-theme) .input:focus,
body:not(.light-theme) .search-input:focus {
    border-color: rgba(139, 123, 255, 0.55) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(139, 123, 255, 0.12) !important;
}

/* ---------- Balance chip: a small coin of light ---------- */
body:not(.light-theme) #headerDefaultActions > :first-child {
    background: linear-gradient(180deg, rgba(139, 123, 255, 0.2), rgba(139, 123, 255, 0.07)) !important;
    border: 1px solid rgba(139, 123, 255, 0.32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px -8px rgba(139, 123, 255, 0.6);
}

/* ---------- Avatars: a soft ring of light ---------- */
body:not(.light-theme) .post-item > .clickable-user img,
body:not(.light-theme) .post-item > .clickable-user > div {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 16px -6px rgba(0, 0, 0, 0.8);
}

/* ---------- Message bubbles ---------- */
body:not(.light-theme) .message-bubble.sent,
body:not(.light-theme) .msg-bubble.out,
body:not(.light-theme) .dm-bubble.mine {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 22px -12px rgba(124, 92, 255, 0.7);
}

/* ---------- Motion: respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    body:not(.light-theme) .tweet-post-btn,
    body:not(.light-theme) .submit-button,
    body:not(.light-theme) .btn-primary { transition: none; }
}