/* XNight redesign layer — loaded last in <head>, restyles the messenger
   through its existing tokens and classes. Dark "night" theme first,
   light theme kept in sync. */
@import url('/ext/gfonts/css2?family=Unbounded:wght@500;600;700&display=swap');

:root {
    --bg-color: #07070c;
    --card-bg: #10101a;
    --border-color: rgba(255, 255, 255, 0.075);
    --text-main: #f3f2fa;
    --text-muted: #9c9ab3;
    --input-bg: #161622;
    --dock-bg: rgba(12, 12, 20, 0.9);
    --header-bg: rgba(7, 7, 12, 0.78);
    --btn-primary-bg: #8b7bff;
    --btn-primary-text: #0b0918;

    --xn-accent: #8b7bff;
    --xn-accent-strong: #7564ff;
    --xn-accent-soft: rgba(139, 123, 255, 0.14);
    --xn-accent-line: rgba(139, 123, 255, 0.35);
    --xn-accent-text: #b8adff;
    --xn-bubble-out: linear-gradient(135deg, #8b7bff, #6c5cf5);
    --xn-surface-2: #161622;
    --xn-hover: rgba(255, 255, 255, 0.05);
    --xn-radius: 20px;
    --xn-radius-sm: 14px;
    --xn-display: 'Unbounded', 'Inter', system-ui, sans-serif;
    --xn-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
    --text-accent: var(--xn-accent-text);
}

body.light-theme {
    --bg-color: #f5f4fa;
    --card-bg: #ffffff;
    --border-color: #e7e5f0;
    --text-main: #16131f;
    --text-muted: #5f5a74;
    --input-bg: #f0eef7;
    --dock-bg: rgba(255, 255, 255, 0.92);
    --header-bg: rgba(245, 244, 250, 0.82);
    --btn-primary-bg: #6c5ce7;
    --btn-primary-text: #ffffff;

    --xn-accent: #6c5ce7;
    --xn-accent-strong: #5a49d6;
    --xn-accent-soft: rgba(108, 92, 231, 0.1);
    --xn-accent-line: rgba(108, 92, 231, 0.35);
    --xn-accent-text: #5a49d6;
    --xn-bubble-out: linear-gradient(135deg, #7a6bf0, #5a49d6);
    --xn-surface-2: #f3f1fa;
    --xn-hover: rgba(22, 19, 31, 0.045);
    --xn-shadow: 0 24px 60px -28px rgba(40, 30, 90, 0.25);
}

/* ---------- Base ---------- */
html body {
    background: var(--bg-color);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}
body:not(.light-theme) {
    background:
        radial-gradient(900px 500px at 70% -10%, rgba(139, 123, 255, 0.10), transparent 60%),
        var(--bg-color) fixed;
}
::selection { background: rgba(139, 123, 255, 0.35); }
:focus-visible { outline: 2px solid var(--xn-accent) !important; outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: rgba(139, 123, 255, 0.35) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(139, 123, 255, 0.3); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* SVG icons that were hard-coded Twitter blue */
svg[stroke="#1d9bf0"] { stroke: var(--xn-accent); }

/* ---------- Logo ---------- */
/* The mark is a light glyph on a transparent background; the light theme
   flips it to dark ink. */
.sidebar-logo, .twitter-brand-logo, .box-logo {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}
body.light-theme .box-logo,
body.light-theme .twitter-brand-logo,
body.light-theme .sidebar-logo { filter: invert(1) !important; }
.twitter-brand-name, .sidebar-brand-text, .brand-title {
    font-family: var(--xn-display) !important;
    letter-spacing: -0.02em;
}

/* ---------- Left sidebar ---------- */
#leftSidebar.left-sidebar {
    background: transparent;
    border-right: 1px solid var(--border-color);
}
.sidebar-item {
    position: relative;
    border-radius: 14px !important;
    transition: background-color .18s ease, color .18s ease !important;
    font-weight: 500;
}
.sidebar-item:hover { background: var(--xn-hover) !important; }
.sidebar-item.active {
    background: var(--xn-accent-soft) !important;
    color: var(--xn-accent-text) !important;
    font-weight: 600;
}
.sidebar-item.active svg { color: var(--xn-accent-text); stroke: currentColor; }
.sidebar-item.active::before {
    content: '';
    position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 3px; background: var(--xn-accent);
}
#sidebarBtnAdmin, #sidebarBtnCasinoAdmin { color: #f87171 !important; }

/* ---------- Top header ---------- */
.twitter-header {
    background: var(--header-bg) !important;
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--border-color) !important;
}
.twitter-header h1, .twitter-header h2, #headerTitle, .twitter-header .header-title {
    font-family: var(--xn-display);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ---------- Cards: composer, posts ---------- */
.tweet-create-box, .post-item {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--xn-radius) !important;
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.post-item:hover { border-color: var(--xn-accent-line) !important; }
body.light-theme .post-item:hover { background: #ffffff !important; }
.post-author-name { font-weight: 700; }
.post-time { color: var(--text-muted) !important; }
.post-text a, .mention-tag { color: var(--xn-accent-text) !important; }
.post-action-btn { border-radius: 999px; transition: background-color .15s, color .15s; }
.post-action-btn:hover { background: var(--xn-accent-soft); color: var(--xn-accent-text); }
.like-btn:hover { background: rgba(249, 24, 128, 0.1); color: var(--like-red); }
.post-image, .post-image-wrapper, .post-video-wrapper { border-radius: 16px !important; }

/* ---------- Buttons ---------- */
.tweet-post-btn, .submit-button, .profile-edit-btn, .profile-follow-btn {
    border-radius: 999px !important;
    font-weight: 600 !important;
    transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease, opacity .2s !important;
}
.tweet-post-btn, .submit-button:not([style*="background"]) {
    background: var(--xn-accent) !important;
    color: var(--btn-primary-text) !important;
    border: none !important;
    box-shadow: 0 8px 24px -10px rgba(139, 123, 255, 0.8);
}
.tweet-post-btn:hover, .submit-button:not([style*="background"]):hover { background: var(--xn-accent-strong) !important; }
.tweet-post-btn:active, .submit-button:active { transform: scale(0.97); }
.tweet-post-btn:disabled { opacity: .5; box-shadow: none; }
.profile-follow-btn:not(.following) { background: var(--xn-accent) !important; color: var(--btn-primary-text) !important; border: none !important; }

/* ---------- Inputs ---------- */
.input, .search-input, .tweet-textarea, input[type="text"].input, textarea.input, select.input {
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 14px !important;
    color: var(--text-main) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tweet-textarea { background: transparent !important; border: none !important; }
.input:focus, .search-input:focus {
    border-color: var(--xn-accent) !important;
    box-shadow: 0 0 0 4px var(--xn-accent-soft) !important;
    outline: none !important;
}
.input::placeholder, .search-input::placeholder, .tweet-textarea::placeholder { color: var(--text-muted); opacity: .8; }

/* ---------- Messenger ---------- */
.chat-thread-container { background: transparent !important; }
.chat-thread-container > .comments-header-bar {
    background: var(--header-bg) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
#chatMessagesBox {
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(139, 123, 255, 0.06), transparent 70%),
        transparent;
}
.chat-bubble {
    border-radius: 18px !important;
    padding: 9px 14px !important;
    font-size: 14.5px !important;
    line-height: 1.42 !important;
    box-shadow: none !important;
}
.chat-msg-row[style*="flex-end"] .chat-bubble {
    color: #fff !important;
    border-bottom-right-radius: 6px !important;
}
.chat-msg-row[style*="flex-start"] .chat-bubble {
    background: var(--xn-surface-2) !important;
    border: 1px solid var(--border-color) !important;
    border-bottom-left-radius: 6px !important;
}
.chat-input-bar {
    background: var(--header-bg) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
#directMessageInput { border-radius: 22px !important; }
.chat-input-bar .tweet-post-btn { box-shadow: 0 6px 18px -8px rgba(139, 123, 255, 0.9); }
.unread-count-badge {
    background: var(--xn-accent) !important;
    color: var(--btn-primary-text) !important;
    font-weight: 700 !important;
}
.presence-dot { box-shadow: 0 0 0 2px var(--bg-color); }

/* ---------- Avatars ---------- */
.post-author-avatar, .tweet-avatar, .chat-avatar, .sidebar-user-avatar, .user-avatar {
    box-shadow: 0 0 0 1px var(--border-color);
}

/* ---------- Modals ---------- */
.modal-overlay {
    background: rgba(4, 4, 10, 0.62) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.light-theme .modal-overlay { background: rgba(22, 19, 40, 0.28) !important; }
.modal-card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 24px !important;
    box-shadow: var(--xn-shadow) !important;
}
.modal-close { border-radius: 50% !important; transition: background-color .15s; }
.modal-close:hover { background: var(--xn-hover) !important; }

/* ---------- Tabs / chips ---------- */
.settings-tab-btn, .follow-tab-btn, .market-filter, .profile-style-chip { border-radius: 12px !important; }
.settings-tab-btn.active, .follow-tab-btn.active, .market-filter.active {
    color: var(--xn-accent-text) !important;
    border-color: var(--xn-accent) !important;
}

/* ---------- Profile ---------- */
.profile-banner { border-radius: 0 0 22px 22px; }
.profile-name-title { font-family: var(--xn-display); letter-spacing: -0.02em; }
.profile-handle-tag { color: var(--text-muted) !important; }

/* ---------- Mobile dock ---------- */
.bottom-dock {
    background: var(--dock-bg) !important;
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-top: 1px solid var(--border-color) !important;
}
.dock-item.active, .dock-item.active svg { color: var(--xn-accent-text) !important; }

/* ---------- Auth screen ---------- */
#authForm .input { min-height: 48px; }
#submitBtn { min-height: 48px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation-duration: .001ms !important; }
}

/* Premium star was forced to near-white and vanished on the light theme */
html body.light-theme #sidebarBtnPremium svg,
html body.light-theme #sidebarBtnPremium svg path,
html body.light-theme #mobileDrawerBtnPremium svg,
html body.light-theme #mobileDrawerBtnPremium svg path {
    color: var(--text-main) !important;
    fill: var(--text-main) !important;
    stroke: var(--text-main) !important;
}

/* ---------- Balance chip (header) ---------- */
.xn-balance {
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px 0 8px;
    margin-right: 6px;
    border-radius: 999px;
    border: 1px solid var(--xn-accent-line);
    background: var(--xn-accent-soft);
    color: var(--text-main);
    font: 700 14px/1 'Inter', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .15s ease, transform .12s ease;
    white-space: nowrap;
}
.xn-balance:hover { background: rgba(139, 123, 255, 0.24); }
.xn-balance:active { transform: scale(0.97); }
.xn-balance img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(250, 204, 21, 0.35)); }
.xn-balance small { font-size: 12px; font-weight: 600; color: var(--xn-accent-text); }
.twitter-user-actions { display: flex; align-items: center; }
@media (max-width: 420px) {
    .xn-balance { padding: 0 10px 0 5px; margin-right: 2px; }
    .xn-balance small { display: none; }
}

/* ---------- Badge quick picker (admin grant modal) ---------- */
.xn-badge-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.xn-badge-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--border-color); background: var(--input-bg);
    color: var(--text-muted); font: 600 13px/1 'Inter', system-ui, sans-serif;
    cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.xn-badge-chip:hover { border-color: var(--c); color: var(--text-main); }
.xn-badge-chip.is-on {
    color: var(--c); border-color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent);
}
.xn-badge-chip.is-on::after { content: '✓'; font-size: 12px; margin-left: 2px; }

/* ---------- NFT username mint dialog ---------- */
.xn-mint-stage {
    --xnight-backdrop-center-color: #8b7bff;
    --xnight-backdrop-edge-color: #251a6e;
}
.xn-mint-stage .anb-number { font-size: 26px; }

/* ---------- Premium nickname animations ---------- */
.xn-name-anim { --xn-k: 1; display: inline-block; white-space: nowrap; }
.xn-ns-slow { --xn-k: 1.6; }
.xn-ns-fast { --xn-k: 0.55; }

/* Переливание: the name's own gradient flows; plain-colour names shimmer in hue */
.xn-na-shift span[style*="background-image"] {
    background-size: 220% 220% !important;
    animation: v9GradientShift calc(5s * var(--xn-k)) ease-in-out infinite;
}
.xn-na-shift:not(:has(span[style*="background-image"])) {
    animation: xnAurora calc(9s * var(--xn-k)) linear infinite;
}

/* Блик: a band of light runs across the letters */
.xn-na-shine {
    -webkit-mask-image: linear-gradient(105deg, #000 38%, rgba(0, 0, 0, .35) 50%, #000 62%);
            mask-image: linear-gradient(105deg, #000 38%, rgba(0, 0, 0, .35) 50%, #000 62%);
    -webkit-mask-size: 300% 100%;
            mask-size: 300% 100%;
    animation: xnShine calc(2.8s * var(--xn-k)) linear infinite;
}
@keyframes xnShine {
    from { -webkit-mask-position: 120% 0; mask-position: 120% 0; }
    to   { -webkit-mask-position: -20% 0; mask-position: -20% 0; }
}

/* Пульс: the name breathes */
.xn-na-pulse { animation: xnPulse calc(2.2s * var(--xn-k)) ease-in-out infinite; transform-origin: left center; }
@keyframes xnPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(1.045); filter: brightness(1.3); }
}

/* Неон: glow in the name's colour */
.xn-na-neon { animation: xnNeon calc(2.4s * var(--xn-k)) ease-in-out infinite; }
@keyframes xnNeon {
    0%, 100% { filter: drop-shadow(0 0 1px var(--xn-glow)) drop-shadow(0 0 3px var(--xn-glow)); }
    50%      { filter: drop-shadow(0 0 2px var(--xn-glow)) drop-shadow(0 0 9px var(--xn-glow)) drop-shadow(0 0 16px var(--xn-glow)); }
}

/* Аврора: colours travel round the spectrum */
.xn-na-aurora { animation: xnAurora calc(7s * var(--xn-k)) linear infinite; }
@keyframes xnAurora {
    from { filter: hue-rotate(0deg) saturate(1.2); }
    to   { filter: hue-rotate(360deg) saturate(1.2); }
}

/* Глитч: short digital hiccups */
.xn-na-glitch { animation: xnGlitch calc(3.2s * var(--xn-k)) steps(1, end) infinite; }
@keyframes xnGlitch {
    0%, 86%, 100% { transform: none; filter: none; }
    88% { transform: translate(-1px, 0) skewX(-8deg); filter: drop-shadow(2px 0 #ff2a6d) drop-shadow(-2px 0 #05d9e8); }
    90% { transform: translate(1px, -1px); filter: drop-shadow(-2px 0 #ff2a6d) drop-shadow(2px 0 #05d9e8); }
    92% { transform: translate(0, 1px) skewX(6deg); filter: drop-shadow(1px 0 #05d9e8); }
    94% { transform: none; filter: drop-shadow(-1px 0 #ff2a6d); }
}

/* Editor preview */
.xn-name-anim-preview {
    display: flex; align-items: center; justify-content: center;
    min-height: 64px; margin: 4px 0 12px; padding: 12px;
    border-radius: 14px; background: var(--input-bg); border: 1px solid var(--border-color);
    font: 800 22px/1.2 'Inter', system-ui, sans-serif; color: var(--text-main);
}
.xn-anim-row { flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
    .xn-name-anim, .xn-name-anim * { animation: none !important; }
}

/* ---------- Reposts ---------- */
.xn-repost-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-muted); cursor: pointer; font: inherit; }
.xn-repost-btn:hover:not(:disabled) { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.xn-repost-btn.is-reposted { color: #22c55e; }
.xn-repost-btn:disabled { opacity: .45; cursor: default; }
.xn-repost-count { font-size: 14px; font-weight: 600; padding: 2px 4px; border-radius: 6px; }
.xn-repost-count:hover { text-decoration: underline; }
.xn-repost-banner { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #22c55e; margin-bottom: 6px; }

/* ---------- Balance top-up ---------- */
.xn-topup-title { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: var(--text-main); font-family: var(--xn-display); }
.xn-topup-balance { font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px; }
.xn-topup-balance b { color: var(--text-main); }
.xn-topup-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.xn-topup-pack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); cursor: pointer; text-align: left; }
.xn-topup-pack b { font-size: 17px; }
.xn-topup-pack small { color: var(--text-muted); font-size: 12.5px; }
.xn-topup-pack.is-on { border-color: var(--xn-accent); background: var(--xn-accent-soft); }
.xn-topup-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.xn-topup-method { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; padding: 8px 6px; border-radius: 14px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-main); cursor: pointer; font: inherit; }
.xn-topup-method b { font-size: 14.5px; }
.xn-topup-method small { font-size: 11px; color: var(--text-muted); }
.xn-topup-method.is-on { border-color: var(--xn-accent); background: var(--xn-accent-soft); }
.xn-topup-method[disabled] { opacity: .5; cursor: not-allowed; }
.xn-topup-custom { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-muted); margin-bottom: 10px; }
.xn-topup-total { font-size: 15px; color: var(--text-main); margin: 6px 0 10px; }
.xn-topup-code { text-align: center; padding: 14px; border-radius: 16px; background: var(--xn-accent-soft); border: 1px solid var(--xn-accent-line); margin-bottom: 10px; }
.xn-topup-code small { display: block; color: var(--text-muted); font-size: 12px; }
.xn-topup-code b { font: 800 26px/1.2 var(--xn-display); letter-spacing: .04em; color: var(--text-main); user-select: all; }
.xn-topup-instr { padding: 12px 14px; border-radius: 14px; background: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-main); font-size: 14px; line-height: 1.5; }
.xn-topup-note { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; line-height: 1.45; }
.xn-topup-h { margin: 18px 0 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.xn-topup-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; background: var(--input-bg); border: 1px solid var(--border-color); }
.xn-topup-row b { display: block; font-size: 14px; color: var(--text-main); }
.xn-topup-row small { font-size: 12px; color: var(--text-muted); }
.xn-topup-row > span { flex: none; font-size: 12.5px; color: var(--text-muted); text-align: right; }
.xn-topup-row.is-paid > span { color: #22c55e; }
.xn-topup-row.is-rejected > span { color: #f87171; }
.xn-topup-cancel { background: none; border: none; color: var(--xn-accent-text); cursor: pointer; font-size: 12px; text-decoration: underline; }
.tp-filter { margin-bottom: 12px; }
.tp-actions { display: flex; gap: 6px; }
.xn-topup-tg { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 0 !important; text-decoration: none; background: #229ED9 !important; color: #fff !important; box-shadow: none !important; }
.xn-topup-tg:hover { background: #1b8bc0 !important; }