:root {
    --bg-deep: #000000;
    --bg-navy: #05070d;
    --blue-accent: #5b93ff;
    --blue-accent-2: #2f63e0;
    --blue-soft: #7fa8f2;
    --glass-fill: rgba(8, 10, 16, 0.5);
    --glass-fill-strong: rgba(10, 13, 20, 0.64);
    --glass-border: rgba(160, 195, 255, 0.22);
    --glass-highlight: rgba(255, 255, 255, 0.09);
    --glass-blur: 16px;
    --text-primary: #f5f7fb;
    --text-secondary: #8b93a7;
    --danger: #ff6b6b;
    --success: #6ab8ff;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --font: 'Manrope', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Day/night scene defaults — overridden continuously by JS based on real MSK time */
    --sky-top: #04060d;
    --sky-mid: #070b18;
    --sky-horizon: #0d1326;
    --star-opacity: 1;
    --moon-opacity: 1;
    --sun-opacity: 0;
    --city-fill: #0a0e1a;
    --window-color: #ffd98a;
    --window-opacity: 0.9;
    --road-color: #0b0f1a;
    --road-line-color: #2a3350;
}

html[data-theme="light"] {
    --bg-deep: #f5f6fa;
    --bg-navy: #e4e9f5;
    --glass-fill: rgba(255, 255, 255, 0.44);
    --glass-fill-strong: rgba(255, 255, 255, 0.6);
    --glass-border: rgba(47, 99, 224, 0.22);
    --glass-highlight: rgba(255, 255, 255, 0.55);
    --text-primary: #0a0c12;
    --text-secondary: #4b5872;
}

* { box-sizing: border-box; }

/* Smooth theme switching — any element that reacts to a themed CSS
   variable (background / text / border / shadow) will crossfade
   instead of snapping when data-theme flips. Elements that already
   define their own transition (buttons, dots, inputs) keep their own
   timing since a class selector beats this universal one. */
:where(body, .glass-card, .field input, .wall-input, .btn, .btn-ghost, .btn-text,
       #tab-bar, .tab-btn, .msk-clock, .copy-toast, .social-row, .theme-option,
       .home-tag, .verify-instructions, .password-toggle, #page-loader) {
    transition: background-color 0.45s ease, color 0.45s ease,
                border-color 0.45s ease, box-shadow 0.45s ease,
                fill 0.45s ease, stroke 0.45s ease;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background: var(--bg-deep);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

/* ===== Background — subtle black / white / blue glow ===== */
.app-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 20% 15%, var(--bg-navy), var(--bg-deep) 60%);
    overflow: hidden;
}
/* slow rotating sheen behind the orbs — blue/white only, no rainbow */
.app-bg::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: conic-gradient(from 0deg,
        #2f63e033, #ffffff14, #5b93ff2e, #ffffff0d, #2f63e033);
    filter: none;
    opacity: 0.45;
    mix-blend-mode: screen;
    /* isolate into its own GPU layer so the rotation doesn't force a
       re-blur/repaint of anything else behind it every frame */
    transform: translateZ(0);
}
@keyframes auroraSpin {
    to { transform: rotate(360deg) translateZ(0); }
}
.orb {
    position: absolute;
    border-radius: 50%;
    filter: none;
    opacity: 0.12;
    mix-blend-mode: screen;
    transform: translateZ(0);
}
.orb-1 {
    width: 420px; height: 420px;
    background: radial-gradient(circle, var(--blue-accent-2), transparent 70%);
    top: -120px; left: -100px;
}
.orb-2 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, var(--blue-soft), transparent 70%);
    bottom: -100px; right: -80px;
    animation-delay: -6s;
}
.orb-3 {
    width: 260px; height: 260px;
    background: radial-gradient(circle, #ffffff, transparent 70%);
    opacity: 0.06;
    bottom: 20%; left: 30%;
    animation-delay: -10s;
}
.orb-4 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #1c3a8f, transparent 70%);
    top: 10%; right: 10%;
    animation-delay: -3s;
}
.orb-5 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, #ffffff, transparent 70%);
    opacity: 0.05;
    top: 55%; left: -60px;
    animation-delay: -13s;
}
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -25px) scale(1.08); }
}

/* ===== Screens ===== */
.screen {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Base clearance so content never sits underneath the fixed bottom
       tab bar, even before the <=480px media query kicks in (e.g. on
       phones in the 481-768px width bucket). */
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

/* ===== Liquid glass card =====
   Real "looking through glass" recipe: a fairly light blur (so the city
   behind stays recognisable) + high saturation/contrast/brightness to
   punch the colours back up the way real glass does, a low-opacity fill
   so the scene bleeds through, a bright top specular highlight, a
   refraction-like darker rim at the bottom edge, and a GPU layer that's
   promoted up-front (transform: translateZ(0) + will-change) so the
   backdrop-filter is composited immediately instead of popping in ~1s
   after the panel becomes visible. */
.glass-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--glass-fill);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 var(--glass-highlight),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
    padding: 32px 28px 28px;
    overflow: hidden;
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
    /* Keep text clean and stable; the panel itself already carries enough glow. */
    text-shadow: none;
}
/* top specular sheen — as if light is grazing across curved glass */
.glass-card::before {
    content: "";
    position: absolute;
    top: -50%; left: -20%;
    width: 140%; height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0.14), transparent 55%);
    pointer-events: none;
    transform: rotate(-8deg);
}
/* thin bright rim around the very edge, like light catching the glass
   lip, plus a soft inner shadow along the bottom so the panel reads as
   a solid, faceted piece of glass rather than a flat tinted rectangle */
.glass-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        inset 0 -18px 24px -20px rgba(0,0,0,0.35);
}

.brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.brand-logo {
    width: 36px; height: 36px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue-accent), var(--blue-accent-2));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    color: #04101f;
    box-shadow: 0 4px 14px rgba(61, 125, 255, 0.45);
}
.brand-name {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.2px;
}

/* progress dots */
.reg-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}
.reg-progress .dot {
    height: 5px;
    flex: 1;
    border-radius: 4px;
    background: rgba(138, 180, 248, 0.18);
    transition: background 0.25s ease;
}
.reg-progress .dot.done,
.reg-progress .dot.active {
    background: linear-gradient(90deg, var(--blue-accent), var(--blue-accent-2));
}

/* steps */
.step { display: none; animation: fadeIn 0.35s ease; }
.step.active { display: block; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: 0.1px;
    text-shadow: none;
}
.step-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 20px;
    line-height: 1.4;
    font-weight: 600;
}

.field { margin-bottom: 14px; }
.field label {
    display: block;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 700;
}
.field input {
    width: 100%;
    padding: 13px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 15px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html[data-theme="light"] .field input {
    background: rgba(255,255,255,0.6);
}
.field input:focus {
    border-color: var(--blue-accent);
    box-shadow: 0 0 0 3px rgba(106, 166, 255, 0.18);
}
.field input::placeholder { color: var(--text-secondary); opacity: 0.7; }

/* password field with show/hide toggle */
.field-password-wrap {
    position: relative;
}
.field-password-wrap input {
    padding-right: 44px;
}
.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.15s ease, background 0.15s ease;
}
.password-toggle:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.showing .icon-eye { display: none; }
.password-toggle.showing .icon-eye-off { display: block; }

/* buttons */
.btn {
    width: 100%;
    display: block;
    padding: 13px 18px;
    margin-top: 10px;
    border-radius: var(--radius-sm);
    border: none;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-primary {
    background: linear-gradient(135deg, var(--blue-accent), var(--blue-accent-2));
    color: #04101f;
    box-shadow: 0 6px 18px rgba(61, 125, 255, 0.35);
}
.btn-ghost {
    background: rgba(138, 180, 248, 0.12);
    color: var(--blue-soft);
    border: 1px solid var(--glass-border);
}
.btn-text {
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 8px;
}

.error-text {
    color: var(--danger);
    font-size: 13px;
    margin: 6px 0 0;
    min-height: 16px;
}
.success-text {
    color: var(--success);
    font-size: 13px;
    margin: 6px 0 0;
    min-height: 16px;
}

/* email verify — animated envelope logo */
.verify-logo-wrap {
    position: relative;
    width: 88px;
    height: 88px;
    margin: 6px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.verify-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--blue-accent);
    opacity: 0;
    animation: verifyPulse 2.4s ease-out infinite;
}
.verify-ring.r2 { animation-delay: 0.8s; }
.verify-ring.r3 { animation-delay: 1.6s; }
@keyframes verifyPulse {
    0%   { transform: scale(0.55); opacity: 0.55; }
    100% { transform: scale(1.15); opacity: 0; }
}
.verify-envelope {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--blue-accent), var(--blue-accent-2));
    box-shadow: 0 8px 22px rgba(61, 125, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: verifyFloat 3s ease-in-out infinite;
    z-index: 1;
}
@keyframes verifyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.verify-envelope svg { display: block; overflow: visible; }
.verify-envelope .env-letter {
    animation: envLetterPeek 3s ease-in-out infinite;
    transform-origin: center;
}
@keyframes envLetterPeek {
    0%, 55%, 100% { transform: translateY(0); opacity: 1; }
    28% { transform: translateY(-7px); opacity: 1; }
}

/* email verify instructions */
.verify-instructions {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: rgba(138, 180, 248, 0.08);
    border: 1px solid var(--glass-border);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    font-weight: 600;
}
.verify-instructions b { color: var(--text-primary); }

/* theme choice */
.theme-choice {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}
.theme-option {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.theme-option.selected {
    border-color: var(--blue-accent);
    background: rgba(106, 166, 255, 0.12);
}
.theme-preview {
    width: 100%;
    height: 60px;
    border-radius: 10px;
}
.theme-preview-light { background: linear-gradient(135deg, #f4f7ff, #dbe4fb); }
.theme-preview-dark { background: linear-gradient(135deg, #10182c, #05070d); }

/* avatar picker */
.avatar-picker {
    width: 96px; height: 96px;
    border-radius: 50%;
    margin: 0 auto 16px;
    background: rgba(138, 180, 248, 0.1);
    border: 1.5px dashed var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
}
.avatar-picker img { width: 100%; height: 100%; object-fit: cover; }
.avatar-default-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
#avatar-choose-btn { margin-bottom: 4px; }

.main-placeholder-card {
    text-align: center;
}
.main-avatar-wrap {
    width: 84px; height: 84px;
    border-radius: 50%;
    margin: 0 auto 18px;
    background: rgba(138, 180, 248, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.main-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* page loader — animated slipper (tapok) */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--bg-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease;
}
.loader-slipper-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    animation: slipperBounce 1.15s ease-in-out infinite;
}
@keyframes slipperBounce {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-16px) rotate(4deg); }
}
.loader-slipper { width: 84px; height: auto; overflow: visible; }
.loader-slipper .slipper-outline { fill: none; }
.loader-slipper .fill-rect { animation: slipperFillRise 1.15s ease-in-out infinite; }
@keyframes slipperFillRise {
    0%   { y: 220; }
    50%  { y: 0; }
    100% { y: 220; }
}
.loader-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--text-secondary);
}
.loader-dots span {
    display: inline-block;
    animation: dotBlink 1.2s infinite;
}
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBlink {
    0%, 80%, 100% { opacity: 0.15; }
    40% { opacity: 1; }
}
.page-loader-hidden { opacity: 0; pointer-events: none; }

/* ===== Tab panels (home / social / auth) ===== */
.tab-panel {
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
    pointer-events: none;
    transition: opacity 0.38s cubic-bezier(.22,.7,.35,1), transform 0.38s cubic-bezier(.22,.7,.35,1);
    /* Force this panel (and the glass cards inside it) onto their own
       GPU layer at all times — not just while animating — so the
       backdrop-filter blur is already composited the instant the tab
       becomes visible instead of rendering unblurred for a frame and
       only catching up ~1s later. */
    will-change: opacity, transform;
    backface-visibility: hidden;
}
.tab-panel.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
    z-index: 2;
}
.tab-screen { padding-bottom: calc(118px + env(safe-area-inset-bottom)); min-height: 100%; }

/* ===== Social tab ===== */
.social-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 36px 20px calc(118px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    min-height: 100%;
}
.social-screen .glass-card {
    width: min(100%, 460px);
    box-sizing: border-box;
    flex-shrink: 0;
}
/* Ссылки — ближе к верху, проекты — с отступом ниже */
.social-screen .glass-card + .glass-card {
    margin-top: 48px;
}

/* ===== Home tab ===== */
.home-screen {
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 18px;
    padding-top: 36px;
}
.home-card {
    text-align: center;
    padding-top: 38px;
}
.home-accent {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 10%, rgba(91,147,255,0.24), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,0.16), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0.06), transparent 38%);
    opacity: 0.95;
}
.home-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 14px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    backdrop-filter: none;
}
.home-nick {
    position: relative;
    font-size: clamp(34px, 7vw, 42px);
    font-weight: 800;
    margin: 0 0 8px;
    background: linear-gradient(135deg, #d9ecff 0%, var(--blue-soft) 40%, var(--blue-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.8px;
    line-height: 0.95;
    text-shadow: none;
}
.home-lead {
    position: relative;
    margin: 0 auto 16px;
    max-width: 28ch;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    font-weight: 600;
}
.home-tags {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}
.home-tag {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(138, 180, 248, 0.16), rgba(138, 180, 248, 0.08));
    border: 1px solid var(--glass-border);
    color: var(--blue-soft);
}
.home-hello {
    position: relative;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    text-shadow: none;
}
.home-meta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(138, 180, 248, 0.08);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.home-meta-item { opacity: 0.95; }
.home-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue-soft);
    opacity: 0.65;
}
.home-hello .wave {
    display: inline-block;
    animation: waveHand 2.2s ease-in-out infinite;
    transform-origin: 70% 70%;
}
@keyframes waveHand {
    0%, 60%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(16deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(16deg); }
    40% { transform: rotate(-4deg); }
}

/* ===== Wall (message board) ===== */
.wall-card { text-align: left; }
.wall-title { font-size: 19px; font-weight: 800; margin: 0 0 2px; letter-spacing: -0.2px; }
.wall-sub { margin-bottom: 14px; }
.wall-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    margin-bottom: 14px;
    padding-right: 2px;
}
.wall-list::-webkit-scrollbar { width: 5px; }
.wall-list::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }
.wall-empty { color: var(--text-secondary); font-size: 13.5px; text-align: center; margin: 10px 0; }
.wall-item {
    display: flex;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}
.wall-item:last-child { border-bottom: none; padding-bottom: 0; }
.wall-avatar {
    flex: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(138, 180, 248, 0.14);
    display: flex; align-items: center; justify-content: center;
}
.wall-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wall-body { flex: 1; min-width: 0; }
.wall-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.wall-time { font-size: 11px; color: var(--text-secondary); margin-left: 6px; font-weight: 600; }
.wall-text { font-size: 14px; margin-top: 2px; line-height: 1.4; word-break: break-word; white-space: pre-wrap; font-weight: 600; }
.wall-delete-btn {
    flex: none;
    align-self: flex-start;
    width: 26px; height: 26px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.wall-delete-btn:hover { color: var(--danger); background: rgba(255, 107, 107, 0.12); }
.wall-delete-btn:disabled { opacity: 0.4; cursor: default; }

.wall-composer { border-top: 1px solid var(--glass-border); padding-top: 14px; }
.wall-composer-form { display: flex; flex-direction: column; gap: 8px; }
.wall-input {
    width: 100%;
    resize: none;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 14px;
    font-family: var(--font);
    outline: none;
}
html[data-theme="light"] .wall-input { background: rgba(255,255,255,0.6); }
.wall-input:focus { border-color: var(--blue-accent); box-shadow: 0 0 0 3px rgba(106, 166, 255, 0.18); }
.wall-send-btn { width: auto; align-self: flex-end; padding: 9px 22px; margin-top: 0; }
.wall-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.wall-cooldown-note { margin: 0; font-size: 12.5px; color: #9aa4b2; text-align: right; }
.wall-composer-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 10px;
    text-align: center;
    color: var(--text-secondary);
}
.wall-composer-locked p { margin: 0; font-size: 13.5px; font-weight: 500; }
.wall-login-btn { width: auto; padding: 8px 20px; margin-top: 2px; }

/* ===== Social icon brand colors ===== */
.social-icon.social-icon-discord,
.social-icon.social-icon-telegram,
.social-icon.social-icon-youtube,
.social-icon.social-icon-twitch,
.social-icon.social-icon-steam,
.social-icon.social-icon-tiktok,
.social-icon.social-icon-brawl { background: none; padding: 0; overflow: hidden; }

/* TikTok icon is white — needs a dark background to be visible */
.social-icon.social-icon-tiktok { background: #010101 !important; border-radius: 13px; }
.profile-social-icon.profile-social-icon-tiktok { background: #010101 !important; border-radius: 8px; }

/* ===== Social tab ===== */
.social-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.social-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
        rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    text-decoration: none;
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.social-row:active { transform: scale(0.98); }
.social-row:hover {
    background:
        linear-gradient(180deg, rgba(138, 180, 248, 0.14), rgba(138, 180, 248, 0.06)),
        rgba(255,255,255,0.03);
    border-color: rgba(138, 180, 248, 0.34);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}
.social-icon {
    flex: none;
    width: 40px; height: 40px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(91,147,255,0.24), rgba(47,99,224,0.16));
    display: flex; align-items: center; justify-content: center;
    color: var(--blue-soft);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.social-icon svg { width: auto; height: auto; max-width: 22px; max-height: 20px; }
.social-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; display: block; }
.social-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.social-name { font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px; }
.social-handle { font-size: 12.5px; color: var(--text-secondary); }
.social-arrow {
    color: var(--text-secondary);
    font-size: 20px;
    flex: none;
    transition: transform 0.2s ease, color 0.2s ease;
}
.social-row:hover .social-arrow { transform: translateX(2px); color: var(--blue-soft); }
.social-soon {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #f5a623;
    background: rgba(245,166,35,.13);
    border: 1px solid rgba(245,166,35,.35);
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
}

.social-copy-btn {
    flex: none;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: rgba(138, 180, 248, 0.12);
    color: var(--blue-soft);
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.social-copy-btn:active { transform: scale(0.95); }
.social-copy-btn .copy-label-done { display: none; }
.social-copy-btn.copied { background: rgba(106, 184, 255, 0.22); color: var(--success); }
.social-copy-btn.copied .copy-label { display: none; }
.social-copy-btn.copied .copy-label-done { display: inline; }

/* copy toast */
.copy-toast {
    position: fixed;
    left: 50%;
    bottom: 118px;
    z-index: 60;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--glass-fill-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: transform;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    opacity: 0;
    pointer-events: none;
    /* translateZ(0) folded into the same transform as the positioning
       translate so it doesn't get clobbered by a second `transform:`
       declaration (that bug is what shifted the tab bar off-center). */
    transform: translate(-50%, 12px) translateZ(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}
.copy-toast.show { transform: translate(-50%, 0) translateZ(0); opacity: 1; }

/* ===== MSK clock pill (top-right corner) ===== */
.msk-clock {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    z-index: 5;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: 'Roboto Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    background: var(--glass-fill-strong);
    border: 1px solid var(--glass-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25), inset 0 1px 0 var(--glass-highlight);
    text-shadow: none;
    pointer-events: none;
    transform: translateZ(0);
    will-change: auto;
}
/* ===== Bottom tab bar — liquid glass ===== */
#tab-bar {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 50;
    display: flex;
    gap: 4px;
    padding: 8px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)),
        rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow:
        0 10px 34px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 -1px 0 rgba(0,0,0,0.15);
    /* translateX for centering + translateZ(0) for GPU layer promotion
       MUST be combined into one transform — two separate `transform:`
       declarations in the same rule just clobber each other, which is
       why the bar drifted off-center last time. */
    transform: translateX(-50%) translateZ(0);
    will-change: transform;
}
html[data-theme="light"] #tab-bar {
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.28));
    border: 1px solid rgba(255,255,255,0.6);
}
.tab-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 78px;
    padding: 9px 6px 8px;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, transform 0.15s ease;
    text-shadow: none;
}
.tab-btn:active { transform: scale(0.94); }
.tab-btn svg {
    width: 22px; height: 22px;
    /* text-shadow only shadows actual text nodes — these icons are SVG
       paths/strokes using currentColor, so without their own
       drop-shadow they stayed washed out even after the label text got
       a shadow. */
    filter: none;
}
html[data-theme="light"] .tab-btn svg { filter: none; }
.tab-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px; }
.tab-btn.active {
    background: linear-gradient(135deg, rgba(91,147,255,0.32), rgba(47,99,224,0.22));
    color: var(--blue-soft);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 14px rgba(61,125,255,0.28);
}

/* ===== Sky / day-night scene (moons, stars, sun, distant city) ===== */
.night-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    filter: none;
    opacity: 0.9;
    /* gives the tilted skyline somewhere to recede into */
    perspective: 1400px;
    perspective-origin: 70% 30%;
    /* colour transitions are driven continuously from JS (real MSK time),
       so keep them slow + smooth rather than snapping */
    transition: opacity 1.2s ease;
}
html[data-theme="light"] .night-scene { opacity: 0.55; }
.night-scene svg {
    width: 100%; height: 100%; display: block;
    /* tilt the whole skyline back slightly, like a camera looking
       slightly up at the city from street level, to sell real depth
       instead of a flat cut-out */
    transform: rotateX(9deg) scale(1.08);
    transform-origin: 50% 100%;
    backface-visibility: hidden;
    will-change: auto;
}

/* sky gradient stops are set from JS as CSS variables, interpolated
   continuously through the day based on real Moscow time */
.sky-bg { transition: opacity 1.2s ease; }

.star {
    fill: #eaf1ff;
    opacity: var(--star-opacity, 1);
    animation: starTwinkle 5.8s ease-in-out infinite;
    transition: opacity 1.2s ease;
}
.star-glow {
    fill: url(#starGlow);
    opacity: calc(var(--star-opacity, 1) * 0.18);
    animation-duration: 7.4s;
}
@keyframes starTwinkle {
    0%, 100% { opacity: 0.95; }
    50%      { opacity: 0.2; }
}

.sun-group {
    opacity: var(--sun-opacity, 0);
    transition: opacity 1.2s ease;
}

.moon-group {
    opacity: var(--moon-opacity, 1);
    transition: opacity 1.2s ease;
}

/* ===== Distant city skyline =====
   Real depth = atmospheric perspective (far buildings wash out toward
   the horizon haze colour) done as a solid colour blend, not opacity
   or per-element blur — opacity/blur on adjacent touching rects was
   creating visible seams/gaps ("black stripes and dots") between
   buildings, so every layer here stays fully opaque.
   (Previously this rule only targeted a ".building" class that didn't
   exist on any element, so every building silently rendered pure black
   with no day/night colour at all.) */
.city .building-far {
    fill: var(--city-fill-far, var(--city-fill, #0a0e1a));
    stroke: var(--city-fill-far, var(--city-fill, #0a0e1a));
    stroke-width: 1px;
    transition: fill 1.2s ease, stroke 1.2s ease;
}
.city .building-mid {
    fill: var(--city-fill-mid, var(--city-fill, #0a0e1a));
    stroke: var(--city-fill-mid, var(--city-fill, #0a0e1a));
    stroke-width: 1px;
    transition: fill 1.2s ease, stroke 1.2s ease;
}
.city .building-near {
    fill: var(--city-fill, #0a0e1a);
    stroke: var(--city-fill, #0a0e1a);
    stroke-width: 1px;
    transition: fill 1.2s ease, stroke 1.2s ease;
}
/* Side + roof faces give the near/mid buildings actual 3D volume —
   a darker "side" face (in shadow) and a lighter "roof" face (catching
   light), generated per-building right in the markup. They read off
   the same fill variable as their parent front face, then get
   darkened/lightened with a semi-transparent overlay so they stay in
   sync with the day/night colour automatically. Same stroke-sealing
   trick here too: adjacent stacked tiers on the tapered towers meet at
   fractional-pixel coordinates (e.g. y="289.3" meeting y="289.3" / a
   0.1px gap at the next tier) and without a sealing stroke, browsers
   render a hairline dark seam there — the "black stripes" — especially
   now that the scene blur is lighter than before. */
.city .building-side-near {
    fill: var(--city-fill, #0a0e1a);
    stroke: var(--city-fill, #0a0e1a);
    stroke-width: 1px;
    filter: brightness(0.62);
    transition: fill 1.2s ease;
}
.city .building-roof-near {
    fill: var(--city-fill, #0a0e1a);
    stroke: var(--city-fill, #0a0e1a);
    stroke-width: 1px;
    filter: brightness(1.55) saturate(0.7);
    transition: fill 1.2s ease;
}
.city .building-side-mid {
    fill: var(--city-fill-mid, var(--city-fill, #0a0e1a));
    stroke: var(--city-fill-mid, var(--city-fill, #0a0e1a));
    stroke-width: 1px;
    filter: brightness(0.68);
    transition: fill 1.2s ease;
}
.city .building-roof-mid {
    fill: var(--city-fill-mid, var(--city-fill, #0a0e1a));
    stroke: var(--city-fill-mid, var(--city-fill, #0a0e1a));
    stroke-width: 1px;
    filter: brightness(1.4) saturate(0.7);
    transition: fill 1.2s ease;
}
.city .win {
    fill: var(--window-color, #ffd98a);
    opacity: var(--window-opacity, 0.9);
    animation: windowBreath 7.5s ease-in-out infinite;
    animation-delay: var(--win-delay, 0s);
    transition: fill 1.2s ease, opacity 2.4s ease;
}
.city .win-mid { opacity: calc(var(--window-opacity, 0.9) * 0.75); }
@keyframes windowBreath {
    0%   { filter: brightness(1);    opacity: var(--window-opacity, 0.9); }
    45%  { filter: brightness(1.35); opacity: calc(var(--window-opacity, 0.9) * 1.05); }
    55%  { filter: brightness(0.82); opacity: calc(var(--window-opacity, 0.9) * 0.72); }
    100% { filter: brightness(1);    opacity: var(--window-opacity, 0.9); }
}

/* Thin vertical highlight on the near buildings, simulating a sliver of
   light catching the edge of the facade. These rects had no rule at all,
   so with no explicit fill they rendered as solid black — the "black
   stripes" on the buildings. */
.city .building-glint {
    fill: #ffffff;
    opacity: 0.14;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity 1.2s ease;
}
html[data-theme="light"] .city .building-glint { opacity: 0.35; }

.sky-details {
    opacity: 0.75;
    mix-blend-mode: screen;
}
.sky-halo { opacity: 0.45; }
.sky-halo-2 { opacity: 0.6; }

/* Rooftop antenna masts + their aviation warning lights. Same issue as
   above: no rule anywhere, so the mast (a <line>, invisible without a
   stroke) plus its light (a <circle>, default black fill) showed up as
   the "black dots" near the tops of the buildings. */
.city .antenna {
    stroke: var(--city-fill-mid, #4a5470);
    stroke-width: 1.5px;
    transition: stroke 1.2s ease;
}
.city .antenna-mast { stroke-width: 2px; }
.city .antenna-light {
    fill: #ff5b5b;
    animation: antennaBlink 2.6s ease-in-out infinite;
}
@keyframes antennaBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

@media (max-width: 480px) {
    .glass-card { padding: 26px 20px 22px; border-radius: 22px; }
    #tab-bar { gap: 2px; padding: 7px; }
    .tab-btn { width: 68px; }

    /* The clock used to sit at a fixed size/position that could land
       right on top of card content on short/narrow phones (especially
       once the on-screen keyboard shrinks the viewport). Shrink it and
       pull it further into the corner so it never overlaps a card, and
       give every screen enough top clearance to clear it. */
    .msk-clock {
        top: max(10px, env(safe-area-inset-top));
        right: 10px;
        padding: 4px 9px;
        font-size: 10.5px;
    }

    /* Let screens scroll and start from the top instead of always
       centering — on short viewports (keyboard open, landscape, small
       phones) centering pushed card content up under the fixed clock
       and tab bar. Reserve clearance at the top for the clock and at
       the bottom for the tab bar. */
    .screen:not(.messenger-screen) {
        align-items: flex-start;
        padding-top: calc(48px + env(safe-area-inset-top));
        /* Reserve enough room for the fixed bottom tab bar (its own
           padding + icon/label height + its bottom offset) so the last
           buttons/fields of a screen are never hidden underneath it. */
        padding-bottom: calc(100px + env(safe-area-inset-bottom));
        min-height: 100%;
        overflow-y: auto;
    }
    .home-screen { padding-top: calc(48px + env(safe-area-inset-top)); }
    .home-card { padding-top: 34px; }

    /* Social screen — на маленьких экранах карточки растягиваются на
       всю ширину (с небольшими отступами), а отступ между ними меньше */
    .social-screen {
        padding: calc(48px + env(safe-area-inset-top)) 12px calc(110px + env(safe-area-inset-bottom));
        align-items: stretch;
    }
    .social-screen .glass-card {
        width: 100%;
    }
    .social-screen .glass-card + .glass-card {
        margin-top: 28px;
    }

    /* The night-scene SVG uses preserveAspectRatio="slice", which on a
       tall narrow phone crops most of the 800x450 scene away, leaving
       only a thin, mostly-empty sliver visible. Zooming out a touch and
       fading it in a bit more keeps the skyline/moon actually visible
       instead of the background reading as "barely there". */
    .night-scene svg {
        transform: rotateX(9deg) scale(1.35);
    }
    .night-scene { opacity: 1; }
    html[data-theme="light"] .night-scene { opacity: 0.7; }
}
/* ===== Performance: respect reduced-motion & save battery on low-end/
   background tabs by pausing the always-on decorative animations
   (aurora spin, floating orbs, twinkling stars, flickering windows).
   None of these carry meaning, so pausing them is fully safe. ===== */
@media (prefers-reduced-motion: reduce) {
    .app-bg::before,
    .orb,
    .star,
    .win,
    .antenna-light,
    .loader-slipper,
    .loader-slipper .fill-rect,
    .verify-ring,
    .verify-envelope,
    .env-letter,
    .loader-dots span {
        animation: none !important;
    }
}

/* ===== MESSENGER ===== */

/* Tab bar sits at bottom: max(18px, safe-area) offset + ~62px height.
   Use CSS custom property so JS can override it when keyboard is open. */
:root { --tab-bar-clearance: calc(62px + max(18px, env(safe-area-inset-bottom, 0px))); }

.messenger-screen {
    padding: 0 !important;
    padding-bottom: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
    min-height: unset !important;
    /* Fill the fixed tab-panel (position:fixed; inset:0) */
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
}
.messenger {
    display: flex;
    width: 100%;
    /* dvh = dynamic viewport height — shrinks when keyboard opens on mobile.
       Falls back to vh on older browsers.
       Browser uses the LAST valid value, so vh first then dvh override. */
    height: calc(100vh  - var(--tab-bar-clearance));
    height: calc(100dvh - var(--tab-bar-clearance));
    overflow: hidden;
}

/* --- Chat list panel --- */
.chat-list-panel {
    width: 340px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--glass-border);
    background: var(--glass-fill-strong);
    backdrop-filter: blur(var(--glass-blur));
    flex-shrink: 0;
}
.messenger-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}
.main-avatar-wrap-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(138, 180, 248, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
}
.main-avatar-wrap-sm img { width: 100%; height: 100%; object-fit: cover; }
.messenger-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Search --- */
.chat-search-wrap {
    position: relative;
    padding: 10px 12px;
    flex-shrink: 0;
}
.chat-search-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
    pointer-events: none;
}
.chat-search-wrap input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 9px 36px 9px 36px;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.chat-search-wrap input:focus { border-color: var(--blue-accent); }
.chat-search-wrap input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.chat-search-clear {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-search-clear svg { width: 14px; height: 14px; }
.chat-search-clear.hidden { display: none; }

/* Search results */
.search-results {
    margin: 0 12px 6px;
    background: var(--glass-fill-strong);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}
.search-results.hidden { display: none; }
.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid var(--glass-border);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: rgba(255,255,255,0.06); }
.search-result-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(138, 180, 248, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
}
.search-result-avatar img { width: 100%; height: 100%; object-fit: cover; }
.search-result-info { display: flex; flex-direction: column; min-width: 0; }
.search-result-name { font-size: 14px; font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: 2px; }
.search-result-login { font-size: 12px; color: var(--text-secondary); }
.search-no-results {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

/* Chat list */
.chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.chat-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
    opacity: 0.6;
}
.chat-list-empty svg { width: 32px; height: 32px; opacity: 0.5; }
.chat-list-empty p { margin: 0; line-height: 1.5; }

.chat-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}
.chat-list-item:hover { background: rgba(255,255,255,0.05); }
.chat-list-item.active { background: rgba(91,147,255,0.12); }
.chat-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(138, 180, 248, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
}
.chat-item-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-item-body { flex: 1; min-width: 0; }
.chat-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.chat-item-name { font-size: 14px; font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: 2px; overflow: hidden; max-width: 100%; }
.chat-item-time { font-size: 11px; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.chat-item-last { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.chat-item-unread {
    background: var(--blue-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 2px 6px;
    flex-shrink: 0;
    min-width: 18px;
    text-align: center;
}

/* --- Chat window --- */
.chat-window {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}
.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-secondary);
    font-size: 14px;
    opacity: 0.5;
    text-align: center;
    padding: 20px;
}
.chat-empty-state svg { width: 40px; height: 40px; }
.chat-empty-state p { margin: 0; }

.chat-active {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.chat-active.hidden { display: none; }

.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--glass-fill-strong);
    backdrop-filter: blur(var(--glass-blur));
    flex-shrink: 0;
}
.chat-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--blue-accent);
    padding: 4px;
    display: none; /* shown on mobile */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.chat-back-btn svg { width: 20px; height: 20px; }
.chat-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(138, 180, 248, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--glass-border);
}
.chat-header-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-header-info { display: flex; flex-direction: column; min-width: 0; }
.chat-header-name { font-size: 15px; font-weight: 700; color: var(--text-primary); display: inline-flex; align-items: center; gap: 3px; }
.chat-header-login { font-size: 12px; color: var(--text-secondary); }

/* Messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.msg-bubble {
    max-width: 72%;
    padding: 9px 13px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
    position: relative;
}
.msg-bubble.mine {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--blue-accent), var(--blue-accent-2));
    color: #fff;
    border-bottom-right-radius: 5px;
}
.msg-bubble.theirs {
    align-self: flex-start;
    background: var(--glass-fill-strong);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-bottom-left-radius: 5px;
}
.msg-time {
    font-size: 10px;
    opacity: 0.55;
    margin-top: 3px;
    display: block;
    text-align: right;
}
.msg-bubble.theirs .msg-time { text-align: left; }

/* Sender name in DMs (theirs) */
.msg-sender-name {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--blue-accent);
    margin-bottom: 3px;
    opacity: 0.85;
}

/* Message action buttons (edit/delete own messages) */
.msg-actions {
    display: none;
    gap: 4px;
    margin-bottom: 3px;
    justify-content: flex-end;
}
.msg-bubble.mine:hover .msg-actions {
    display: flex;
}
.msg-edit-btn, .msg-del-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 5px;
    line-height: 1;
    transition: background 0.15s;
}
.msg-edit-btn:hover { background: rgba(255,255,255,0.28); }
.msg-del-btn:hover { background: rgba(255,80,80,0.35); }
.msg-edited {
    font-size: 10px;
    opacity: 0.5;
    margin-left: 4px;
}

.msg-date-sep {
    align-self: center;
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.55;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 3px 10px;
    margin: 6px 0;
}

/* Input bar */
.chat-input-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--glass-border);
    background: var(--glass-fill-strong);
    backdrop-filter: blur(var(--glass-blur));
    flex-shrink: 0;
}
.chat-input-bar input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.chat-input-bar input:focus { border-color: var(--blue-accent); }
.chat-input-bar input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.chat-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-accent), var(--blue-accent-2));
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.1s;
    color: #fff;
}
.chat-send-btn:hover { opacity: 0.88; }
.chat-send-btn:active { transform: scale(0.94); }
.chat-send-btn svg { width: 16px; height: 16px; }

/* Avatar fallback icon */
.avatar-fallback-icon svg { width: 20px; height: 20px; }

/* Mobile: stack panels */
@media (max-width: 640px) {
    .messenger {
        position: relative;
        /* On mobile keyboards shrink the visual viewport; let JS
           override --tab-bar-clearance if needed, but 100dvh already
           handles most cases automatically. */
    }
    .chat-list-panel {
        width: 100%;
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 2;
        transition: transform 0.3s cubic-bezier(.4,0,.2,1);
    }
    .chat-list-panel.slide-out {
        transform: translateX(-100%);
        pointer-events: none;
    }
    .chat-window {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(.4,0,.2,1);
        /* chat-active fills full height of chat-window on mobile */
        display: flex;
        flex-direction: column;
    }
    .chat-window.slide-in {
        transform: translateX(0);
        z-index: 3;
        pointer-events: auto;
    }
    /* chat-active must fill the mobile chat-window */
    .chat-window .chat-active {
        flex: 1;
        min-height: 0;
    }
    .chat-back-btn { display: flex; }

    /* Ensure the input bar is always above the tab bar on mobile */
    .chat-input-bar {
        padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    }
}

/* ===== Profile Overlay ===== */
.profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.profile-overlay.hidden { display: none !important; }
.profile-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.profile-overlay-panel {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 28px 28px 0 0;
    padding: 28px 24px 40px;
    margin: 0;
    z-index: 1;
    animation: slideUp 0.28s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 540px) {
    .profile-overlay {
        align-items: center;
    }
    .profile-overlay-panel {
        border-radius: 28px;
        max-height: 80vh;
        margin: 0 16px;
    }
}
@keyframes slideUp {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.profile-overlay-close {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.2s;
}
.profile-overlay-close:hover { background: rgba(255,255,255,0.15); }
.profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.profile-avatar-wrap {
    width: 72px; height: 72px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.08);
    border: 2px solid var(--glass-border);
    display: flex; align-items: center; justify-content: center;
}
.profile-avatar-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.profile-displayname {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}
.profile-username {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-top: 2px;
}
.profile-socials {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.profile-socials:empty { display: none; }
.profile-social-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.18s, transform 0.12s;
}
.profile-social-row:hover {
    background: rgba(91,147,255,0.1);
    transform: translateY(-1px);
}
.profile-social-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.profile-social-icon img { width: 100%; height: 100%; object-fit: cover; }
.profile-social-name { font-size: 13.5px; font-weight: 700; }
.profile-social-handle { font-size: 12px; color: var(--text-secondary); margin-left: auto; }
.profile-social-arrow { font-size: 18px; color: var(--text-secondary); margin-left: 4px; }

.profile-wall-section { margin-top: 4px; }
.profile-wall-title {
    font-size: 16px; font-weight: 800;
    margin: 0 0 12px;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}
.profile-wall-list {
    max-height: 260px;
    overflow-y: auto;
    margin-bottom: 14px;
}
.profile-wall-composer .wall-composer-locked {
    display: flex;
}

/* Wall name as clickable link */
.wall-name-link {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 700;
    transition: color 0.15s;
}
.wall-name-link:hover { color: var(--blue-accent); text-decoration: underline; }

/* Settings social fields label spacing */
#settings-screen .field label img { vertical-align: middle; }

/* Chat header clickable profile area */
.chat-header-info:hover .chat-header-name,
.chat-header-info:hover .chat-header-login {
    color: var(--blue-accent);
    transition: color 0.15s;
}
.chat-header-avatar:hover { opacity: 0.8; transition: opacity 0.15s; }

/* TikTok icon dark bg in settings label */
#settings-social-tiktok-label-icon {
    background: #010101;
    border-radius: 4px;
}

/* ===== My profile button in messenger header ===== */
.my-profile-header-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px 4px 0;
    border-radius: 10px;
    transition: background 0.15s;
    text-align: left;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}
.my-profile-header-btn:hover {
    background: rgba(255,255,255,0.07);
}
.my-profile-header-btn .messenger-title {
    font-size: 15px;
    font-weight: 700;
}

/* ===== Verified badge ===== */
.verified-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}
.verified-badge svg {
    display: inline-block;
}

/* ===== Admin panel section ===== */
#admin-panel-section {
    background: rgba(245,166,35,0.05);
    border-radius: 12px;
    padding: 16px;
}
#admin-panel-section h2 {
    letter-spacing: 0.03em;
}

/* ===== Ban status in profile overlay ===== */
#profile-ov-ban-status {
    font-size: 12px;
    font-weight: 600;
    color: #ff6b6b;
    margin-top: 3px;
}

/* ===== Profile overlay admin controls ===== */
#profile-ov-admin-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 4px 0;
}
#ban-duration-modal .ban-dur-btn:hover {
    background: rgba(255,107,107,0.15);
    border-color: rgba(255,107,107,0.5);
}