/* === HIGY MESSENGER — Mobile-first Pixel + TG-inspired === */

:root {
    --bg-dark: #0a1410;
    --bg-main: #0f1c14;
    --bg-panel: #12231a;
    --bg-input: #0d1a12;
    --bg-card: #142219;
    --bg-hover: #1a3324;
    --bg-header: #0b1610;
    --accent: #2d7d4a;
    --accent-light: #4aaa6a;
    --accent-bright: #6ade8a;
    --accent-glow: rgba(var(--accent-bright-rgb), 0.15);
    --text-primary: #d0e8c8;
    --text-secondary: #8ab88a;
    --text-muted: #4a7a4a;
    --text-dim: #2d5a2d;
    --border: #1e3e28;
    --border-light: #2d5a3a;
    --msg-own-bg: #1a3d2a;
    --msg-own-border: #2d7d4a;
    --msg-other-bg: #141f16;
    --msg-other-border: #1e3e28;
    --online: #4aff4a;
    --offline: #3a4a3a;
    --recording: #ff4444;
    --error: #cc3333;
    --success: #33aa55;
    --avatar-bg: #1e4a30;
    --avatar-text: #6ade8a;
    /* RGB components for rgba() usage */
    --accent-rgb: 45, 125, 74;
    --accent-bright-rgb: 106, 222, 138;
    --bg-dark-rgb: 10, 20, 16;
    --bg-main-rgb: 15, 28, 20;
    --bg-panel-rgb: 20, 34, 25;
    --bg-header-rgb: 11, 22, 16;
    --border-rgb: 30, 62, 40;
    /* Theme hue shift for pixel art */
    --theme-hue-shift: 0deg;
}

/* === THEME: Blue / Мастерская === */
[data-theme="blue"] {
    --bg-dark: #0a1118;
    --bg-main: #0c1620;
    --bg-panel: #101e2a;
    --bg-input: #0b1520;
    --bg-card: #112230;
    --bg-hover: #1a3348;
    --bg-header: #0a1318;
    --accent: #2a6d9e;
    --accent-light: #4a9ad0;
    --accent-bright: #6ac0f0;
    --accent-glow: rgba(106, 192, 240, 0.15);
    --text-primary: #c8d8ee;
    --text-secondary: #8aaabe;
    --text-muted: #4a6a8a;
    --text-dim: #2d4a6d;
    --border: #1e3050;
    --border-light: #2d4a70;
    --msg-own-bg: #1a3050;
    --msg-own-border: #2a6d9e;
    --msg-other-bg: #111c28;
    --msg-other-border: #1e3050;
    --online: #4ac0ff;
    --offline: #3a4a5a;
    --avatar-bg: #1e3a60;
    --avatar-text: #6ac0f0;
    --accent-rgb: 42, 109, 158;
    --accent-bright-rgb: 106, 192, 240;
    --bg-dark-rgb: 10, 17, 24;
    --bg-main-rgb: 12, 22, 32;
    --bg-panel-rgb: 16, 30, 42;
    --bg-header-rgb: 10, 19, 24;
    --border-rgb: 30, 48, 80;
    --theme-hue-shift: 70deg;
}

/* === THEME: Purple / Тюнинг === */
[data-theme="purple"] {
    --bg-dark: #100a18;
    --bg-main: #140e20;
    --bg-panel: #1c142a;
    --bg-input: #120c1e;
    --bg-card: #1e1630;
    --bg-hover: #2e2248;
    --bg-header: #110c18;
    --accent: #6a3d9e;
    --accent-light: #9060d0;
    --accent-bright: #b080f0;
    --accent-glow: rgba(176, 128, 240, 0.15);
    --text-primary: #dcd0ee;
    --text-secondary: #a88abe;
    --text-muted: #6a4a8a;
    --text-dim: #4a2d6d;
    --border: #302050;
    --border-light: #4a3070;
    --msg-own-bg: #2a1e50;
    --msg-own-border: #6a3d9e;
    --msg-other-bg: #181228;
    --msg-other-border: #302050;
    --online: #b080ff;
    --offline: #4a3a5a;
    --avatar-bg: #3a2060;
    --avatar-text: #b080f0;
    --accent-rgb: 106, 61, 158;
    --accent-bright-rgb: 176, 128, 240;
    --bg-dark-rgb: 16, 10, 24;
    --bg-main-rgb: 20, 14, 32;
    --bg-panel-rgb: 28, 20, 42;
    --bg-header-rgb: 17, 12, 24;
    --border-rgb: 48, 32, 80;
    --theme-hue-shift: 130deg;
}

/* === THEME: Amber / Литейка === */
[data-theme="amber"] {
    --bg-dark: #141008;
    --bg-main: #1a1408;
    --bg-panel: #241c0e;
    --bg-input: #161008;
    --bg-card: #2a2010;
    --bg-hover: #3a3018;
    --bg-header: #141008;
    --accent: #9e7a2a;
    --accent-light: #d0a040;
    --accent-bright: #f0c860;
    --accent-glow: rgba(240, 200, 96, 0.15);
    --text-primary: #eee0c8;
    --text-secondary: #bea878;
    --text-muted: #8a7040;
    --text-dim: #6d5020;
    --border: #3e3018;
    --border-light: #5a4828;
    --msg-own-bg: #3a2e18;
    --msg-own-border: #9e7a2a;
    --msg-other-bg: #1e1810;
    --msg-other-border: #3e3018;
    --online: #f0c840;
    --offline: #5a5040;
    --avatar-bg: #4a3a18;
    --avatar-text: #f0c860;
    --accent-rgb: 158, 122, 42;
    --accent-bright-rgb: 240, 200, 96;
    --bg-dark-rgb: 20, 16, 8;
    --bg-main-rgb: 26, 20, 8;
    --bg-panel-rgb: 36, 28, 14;
    --bg-header-rgb: 20, 16, 8;
    --border-rgb: 62, 48, 24;
    --theme-hue-shift: -100deg;
}

/* === THEME: Red / Гонки === */
[data-theme="red"] {
    --bg-dark: #140a0a;
    --bg-main: #1c0e0e;
    --bg-panel: #261414;
    --bg-input: #180c0c;
    --bg-card: #2c1616;
    --bg-hover: #3e2222;
    --bg-header: #140a0a;
    --accent: #9e3a3a;
    --accent-light: #d05050;
    --accent-bright: #f06a6a;
    --accent-glow: rgba(240, 106, 106, 0.15);
    --text-primary: #eecece;
    --text-secondary: #be8a8a;
    --text-muted: #8a5050;
    --text-dim: #6d3030;
    --border: #402020;
    --border-light: #5a3030;
    --msg-own-bg: #3a1e1e;
    --msg-own-border: #9e3a3a;
    --msg-other-bg: #201414;
    --msg-other-border: #402020;
    --online: #ff6a6a;
    --offline: #5a3a3a;
    --avatar-bg: #502020;
    --avatar-text: #f06a6a;
    --accent-rgb: 158, 58, 58;
    --accent-bright-rgb: 240, 106, 106;
    --bg-dark-rgb: 20, 10, 10;
    --bg-main-rgb: 28, 14, 14;
    --bg-panel-rgb: 38, 20, 20;
    --bg-header-rgb: 20, 10, 10;
    --border-rgb: 64, 32, 32;
    --theme-hue-shift: -140deg;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }

/* Global resets */
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
button { font: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; }
svg { vertical-align: middle; }

body {
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

/* === ANIMATED CANVAS BACKGROUND === */
.pixel-canvas-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

.scanline-overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.03) 3px,
        rgba(0, 0, 0, 0.03) 6px
    );
}

/* === APP LAYOUT === */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* === STATUS BAR (HEADER) === */
.status-bar {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    padding: 0 12px;
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    height: calc(48px + env(safe-area-inset-top, 0px));
    flex-shrink: 0;
    z-index: 100;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
}

.logo-icon {
    color: var(--accent-bright);
    font-size: 16px;
    animation: logoPulse 4s ease-in-out infinite;
    filter: drop-shadow(0 0 4px var(--accent-glow));
}

@keyframes logoPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

.logo-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: var(--accent-bright);
    letter-spacing: 3px;
    text-shadow: 0 0 8px var(--accent-glow);
}

.header-spacer { flex: 1; }

.user-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    -webkit-tap-highlight-color: transparent;
}

.user-status:active .status-name {
    color: var(--accent-bright);
}

.status-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Burger button */
.burger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.burger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-secondary);
    transition: all 0.25s ease;
    border-radius: 1px;
}

.burger-btn.active .burger-line:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}
.burger-btn.active .burger-line:nth-child(2) {
    opacity: 0;
}
.burger-btn.active .burger-line:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* Nav dropdown */
.nav-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-top: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 200;
}

.nav-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    color: var(--text-primary);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.nav-item:last-child { border-bottom: none; }
.nav-item:active { background: var(--bg-hover); }

.nav-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
}

/* === STATUS DOT === */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.online {
    background: var(--online);
    box-shadow: 0 0 6px var(--online);
    animation: onlinePulse 2.5s ease-in-out infinite;
}

@keyframes onlinePulse {
    0%, 100% { box-shadow: 0 0 6px var(--online); }
    50% { box-shadow: 0 0 12px var(--online), 0 0 3px var(--online); }
}

@media (prefers-reduced-motion: reduce) {
    .status-dot.online { animation: none; }
}

.status-dot.offline {
    background: var(--offline);
}

/* === MAIN CONTENT === */
.main-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* === PIXEL ELEMENTS === */
.pixel-border {
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.pixel-input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    padding: 12px 12px;
    outline: none;
    width: 100%;
    border-radius: 3px;
    -webkit-appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pixel-input:focus {
    border-color: var(--accent-light);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.pixel-input::placeholder {
    color: var(--text-dim);
}

.pixel-btn {
    background: var(--accent);
    color: var(--text-primary);
    border: 1px solid var(--accent-light);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 2px;
    white-space: nowrap;
    -webkit-appearance: none;
    touch-action: manipulation;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    image-rendering: pixelated;
}

.pixel-btn:active {
    transform: scale(0.97);
}

.pixel-btn.btn-cancel {
    background: #2a1818;
    border-color: #5a2a2a;
}

.pixel-btn.btn-outline {
    background: transparent;
    border: 1px solid var(--accent-light);
    color: var(--accent-light);
}

.pixel-btn-sm {
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    -webkit-appearance: none;
    touch-action: manipulation;
    transition: all 0.15s;
}

.pixel-btn-sm:active { transform: scale(0.97); }

.pixel-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--accent-light);
    display: block;
    margin-bottom: 6px;
}

.checkbox-group {
    display: flex;
    align-items: flex-end;
    padding-bottom: 8px;
}

.pixel-checkbox-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pixel-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
}

.form-hint {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-dim);
    margin-top: 4px;
    display: block;
    line-height: 1.6;
}

/* === AVATAR CIRCLES === */
.room-avatar,
.sr-avatar,
.member-avatar-sm {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.member-avatar-sm {
    width: 30px;
    height: 30px;
    font-size: 12px;
    color: var(--avatar-text);
    font-family: 'Press Start 2P', monospace;
    border-width: 1px;
}

.sr-avatar {
    width: 36px;
    height: 36px;
}

.sr-avatar span,
.member-avatar-sm {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: var(--avatar-text);
}

.avatar-letter, .avatar-icon {
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    color: var(--avatar-text);
}

.avatar-icon {
    font-size: 18px;
}

/* === JOIN PAGE === */
.join-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.join-card {
    background: rgba(var(--bg-panel-rgb), 0.92);
    padding: 36px 24px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    border-radius: 3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.join-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 18px;
    color: var(--accent-bright);
    margin-bottom: 6px;
    text-shadow: 0 0 16px var(--accent-glow);
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% { text-shadow: 0 0 16px var(--accent-glow); }
    50% { text-shadow: 0 0 32px var(--accent-glow), 0 0 48px rgba(var(--accent-bright-rgb), 0.08); }
}

.join-subtitle {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
    margin-bottom: 28px;
    letter-spacing: 2px;
}

.join-welcome {
    margin-bottom: 24px;
}

.join-info {
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-size: 14px;
}

.join-decor {
    color: var(--text-dim);
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    letter-spacing: 6px;
}

.join-form {
    text-align: left;
}

.join-form .pixel-input {
    margin-bottom: 16px;
}

.join-btn {
    width: 100%;
    padding: 14px;
    font-size: 10px;
}

/* Login page pixel art */
.login-pixel-art {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* Login hint (below form) */
.login-hint {
    margin-top: 16px;
}

/* === 404 ERROR PAGE === */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 24px;
    text-align: center;
}
.error-art {
    margin-bottom: 24px;
}
.error-code {
    font-family: 'Press Start 2P', monospace;
    font-size: 48px;
    color: var(--accent-bright);
    text-shadow: 0 0 20px var(--accent-glow);
    margin-bottom: 12px;
    animation: titleGlow 3s ease-in-out infinite;
}
.error-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.error-hint {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 28px;
    max-width: 280px;
}
.error-back-btn {
    text-decoration: none;
}

/* === CHAT LIST === */
.chat-list-container {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(var(--bg-main-rgb), 0.85);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    position: relative;
    display: flex;
    flex-direction: column;
}

.chat-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-header);
    z-index: 10;
    flex-shrink: 0;
}

.section-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    color: var(--accent-bright);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
    margin-bottom: 16px;
}

/* Pixel-art envelope icon (inline SVG) */
.pixel-envelope {
    flex-shrink: 0;
    vertical-align: middle;
}

/* Search panel */
.search-panel {
    border-bottom: 1px solid var(--border);
    background: var(--bg-header);
    flex-shrink: 0;
}

.search-bar {
    padding: 8px 14px;
}

.search-results {
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.sr-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sr-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--text-primary);
}

.sr-tag {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
}

.sr-dm-btn {
    font-size: 14px;
    padding: 6px 10px;
}

.search-empty {
    padding: 16px 14px;
    color: var(--text-dim);
    font-size: 13px;
    text-align: center;
}

/* Room list (TG-style) */
.room-list {
    list-style: none;
    flex-shrink: 0;
}

.room-item {
    border-bottom: 1px solid rgba(var(--border-rgb), 0.5);
}

.room-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--text-primary);
    text-decoration: none;
    transition: background 0.12s;
}

.room-link:active {
    background: var(--bg-hover);
}

.room-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.room-info-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.room-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    font-weight: bold;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.room-time {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--text-dim);
    flex-shrink: 0;
    margin-left: 8px;
}

.room-info-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.room-preview {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.room-preview-empty {
    color: var(--text-dim);
    font-style: italic;
}

.room-badge {
    background: var(--accent);
    color: var(--text-primary);
    font-size: 10px;
    font-family: 'Press Start 2P', monospace;
    padding: 2px 6px;
    border-radius: 10px;
    flex-shrink: 0;
    margin-left: 8px;
}

/* FAB */
.fab {
    position: fixed;
    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 52px;
    height: 52px;
    background: var(--accent);
    color: var(--text-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 24px var(--accent-glow);
    z-index: 50;
    transition: transform 0.15s;
    border: 2px solid var(--accent-light);
}

.fab:active { transform: scale(0.93); }

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 24px;
    text-align: center;
}

.empty-art {
    margin-bottom: 28px;
    position: relative;
}

.empty-diamond {
    font-size: 56px;
    color: var(--border-light);
    animation: emptyFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 20px var(--accent-glow));
    text-shadow: 0 0 20px var(--accent-glow);
}

@keyframes emptyFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(2deg); }
    75% { transform: translateY(-4px) rotate(-2deg); }
}

.empty-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 12px;
}

.empty-dots span {
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
    animation: dotPulse 1.5s ease-in-out infinite;
}

.empty-dots span:nth-child(2) { animation-delay: 0.2s; }
.empty-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.empty-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-hint {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 28px;
    max-width: 280px;
}

.empty-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* === CHAT ROOM === */
.chat-layout {
    display: flex;
    height: 100%;
    position: relative;
}

/* Members panel */
.members-panel {
    display: flex;
    position: fixed;
    top: calc(48px + env(safe-area-inset-top, 0px));
    right: 0;
    bottom: 0;
    width: 260px;
    background: var(--bg-panel);
    border-left: 1px solid var(--border);
    z-index: 50;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    visibility: hidden;
}

.members-panel.panel-open {
    transform: translateX(0);
    visibility: visible;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

.panel-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--accent-light);
}

.panel-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.chat-search-btn,
.members-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
}

.chat-search-btn:active,
.members-toggle:active { color: var(--accent-bright); }

/* Add member */
.add-member-section {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.add-member-section .pixel-input {
    font-size: 9px;
    padding: 8px 10px;
}

.add-member-results {
    list-style: none;
    max-height: 140px;
    overflow-y: auto;
}

.am-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.am-add-btn {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
}

.member-list {
    list-style: none;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1;
}

.member-item {
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
}

.member-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}

.member-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    flex: 1;
}

/* Chat main */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(var(--bg-main-rgb), 0.82);
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    min-height: 48px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-header);
    flex-shrink: 0;
}

.chat-back-btn {
    color: var(--accent-light);
    text-decoration: none;
    padding: 8px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
}

.chat-back-btn .back-arrow {
    transition: transform 0.15s;
}

.chat-back-btn:active .back-arrow {
    transform: translateX(-3px);
}

/* Clickable header (avatar + name) */
.chat-header-link {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.chat-header-link:active .chat-title {
    color: var(--accent-bright);
}

.chat-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    overflow: hidden;
}

.chat-header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-letter-sm {
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: var(--avatar-text);
}

.avatar-icon-sm {
    font-size: 14px;
    color: var(--avatar-text);
}

.chat-header-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.chat-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    font-weight: bold;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.chat-members-count {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
}

.chat-last-seen {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
}
.chat-last-seen.online {
    color: var(--accent-bright);
}

.e2e-lock {
    font-size: 10px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Messages */
.messages-container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px;
    background: transparent;
}

/* Date separators */
.date-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 8px;
    user-select: none;
}

.date-separator-line {
    flex: 1;
    height: 1px;
    background: var(--border);
    opacity: 0.5;
}

.date-separator-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-dim);
    padding: 0 4px;
    white-space: nowrap;
}

.load-more-area {
    text-align: center;
    padding: 8px;
}

.load-more-btn {
    opacity: 0.7;
}

/* Message bubbles (TG-style) */
.message {
    margin-bottom: 6px;
    padding: 8px 12px;
    background: var(--msg-other-bg);
    border: 1px solid var(--msg-other-border);
    border-radius: 4px;
    border-top-left-radius: 0;
    max-width: 82%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
}

.message-own {
    background: var(--msg-own-bg);
    border-color: var(--msg-own-border);
    margin-left: auto;
    border-radius: 4px;
    border-top-right-radius: 0;
    border-top-left-radius: 4px;
}

.msg-sender {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--accent-bright);
    display: block;
    margin-bottom: 4px;
    text-shadow: 0 0 6px var(--accent-glow);
}

.msg-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    line-height: 2;
    margin: 2px 0;
}

.msg-time {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--text-dim);
    display: block;
    text-align: right;
    margin-top: 4px;
}

/* Read receipts checkmarks */
.msg-check {
    display: inline-block;
    margin-left: 4px;
    position: relative;
    width: 10px;
    height: 8px;
    vertical-align: middle;
}
.msg-check::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 4px;
    height: 7px;
    border-right: 2px solid var(--text-dim);
    border-bottom: 2px solid var(--text-dim);
    transform: rotate(45deg);
}
.msg-check.msg-read::before {
    border-color: var(--accent-bright);
}
.msg-check.msg-read::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 7px;
    border-right: 2px solid var(--accent-bright);
    border-bottom: 2px solid var(--accent-bright);
    transform: rotate(45deg);
}

/* Voice */
.msg-voice {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.msg-voice audio {
    width: 100%;
    max-width: 260px;
    height: 32px;
    border-radius: 4px;
}

.msg-duration {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
}

/* Video circles */
.msg-video-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 3px solid var(--accent);
    cursor: pointer;
    box-shadow: 0 0 16px var(--accent-glow);
}

.msg-video-circle video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circle-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
}

/* Files */
.msg-file { max-width: 100%; }

.msg-image {
    max-width: 100%;
    cursor: pointer;
}

.msg-image img {
    max-width: 100%;
    max-height: 300px;
    display: block;
    border-radius: 8px;
}

.msg-audio-file {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.msg-audio-file audio {
    width: 100%;
    max-width: 280px;
    height: 36px;
}

.msg-video-file { max-width: 100%; }

.msg-video-file video {
    max-width: 100%;
    max-height: 300px;
    display: block;
    border-radius: 8px;
}

.file-icon {
    font-size: 18px;
    margin-right: 4px;
}

.file-name {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--text-muted);
    word-break: break-all;
}

.file-download {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--accent-light);
    font-family: 'Courier New', monospace;
    font-size: 12px;
}

.file-download:active {
    background: var(--bg-hover);
}

/* Drop overlay */
.drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(var(--bg-dark-rgb), 0.9);
    border: 2px dashed var(--accent-bright);
    z-index: 40;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--accent-bright);
    pointer-events: none;
}

.drop-overlay.active {
    display: flex;
}

.drop-overlay svg {
    width: 48px;
    height: 48px;
}

.drop-overlay-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--accent-bright);
}

/* Typing */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
    padding: 6px 14px;
    background: var(--bg-header);
}

.typing-dots span {
    animation: typingDot 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { opacity: 0.3; }
    30% { opacity: 1; }
}

/* Input area */
.chat-input-area {
    border-top: 1px solid var(--border);
    background: rgba(var(--bg-header-rgb), 0.95);
    flex-shrink: 0;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
    padding-left: max(4px, env(safe-area-inset-left, 0px));
    padding-right: max(4px, env(safe-area-inset-right, 0px));
}

.message-form {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
}

.message-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    border-radius: 3px;
}

.input-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    align-items: center;
}

.icon-btn {
    font-size: 18px;
    padding: 8px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    transition: color 0.15s;
}

.icon-btn:active { color: var(--accent-bright); }

.file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Attach menu (Telegram-style media picker) */
.attach-wrap {
    position: relative;
    display: inline-flex;
}

.attach-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--bg-panel);
    border: 2px solid var(--accent);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 160px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom left;
    transition: opacity 0.15s, transform 0.15s;
    pointer-events: none;
}

.attach-menu.open {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
}

.attach-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--text-primary);
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.attach-menu-item:hover,
.attach-menu-item:active {
    background: rgba(var(--accent-bright-rgb), 0.1);
}

.attach-menu-icon {
    font-size: 16px;
    width: 24px;
    text-align: center;
    font-style: normal;
}

.send-btn {
    font-size: 16px;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: var(--accent);
    color: var(--bg-dark);
    border: 1px solid var(--accent-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.send-btn:active { background: var(--accent-light); }

/* Send spark particles */
.send-spark-container {
    position: absolute;
    bottom: 100%;
    right: 12px;
    pointer-events: none;
    z-index: 50;
    width: 0;
    height: 0;
}

.spark-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    image-rendering: pixelated;
}

.spark-particle.sp-1 { background: #ffdd44; box-shadow: 0 0 4px #ffcc44; animation: sparkFly1 700ms ease-out forwards; }
.spark-particle.sp-2 { background: #ffaa00; box-shadow: 0 0 4px #ff9900; animation: sparkFly2 700ms ease-out forwards; }
.spark-particle.sp-3 { background: var(--accent-bright); box-shadow: 0 0 4px var(--accent-bright); animation: sparkFly3 700ms ease-out forwards; }
.spark-particle.sp-4 { background: var(--accent-light); box-shadow: 0 0 4px var(--accent-light); animation: sparkFly4 700ms ease-out forwards; }
.spark-particle.sp-5 { background: #ffdd44; box-shadow: 0 0 4px #ffcc44; animation: sparkFly5 700ms ease-out forwards; }
.spark-particle.sp-6 { background: #ffaa00; box-shadow: 0 0 4px #ff9900; animation: sparkFly6 700ms ease-out forwards; }

@keyframes sparkFly1 { from { transform: translate(0,0); opacity:1; } to { transform: translate(-18px,-28px); opacity:0; } }
@keyframes sparkFly2 { from { transform: translate(0,0); opacity:1; } to { transform: translate(6px,-34px); opacity:0; } }
@keyframes sparkFly3 { from { transform: translate(0,0); opacity:1; } to { transform: translate(20px,-20px); opacity:0; } }
@keyframes sparkFly4 { from { transform: translate(0,0); opacity:1; } to { transform: translate(-14px,-16px); opacity:0; } }
@keyframes sparkFly5 { from { transform: translate(0,0); opacity:1; } to { transform: translate(16px,-10px); opacity:0; } }
@keyframes sparkFly6 { from { transform: translate(0,0); opacity:1; } to { transform: translate(-6px,-36px); opacity:0; } }

/* Recording */
.recording-ui {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-header);
    border-top: 2px solid var(--recording);
}

.recording-dot {
    animation: blink 1s infinite;
}

/* Pixel microphone for voice recording */
.pixel-mic-wrap {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 20px;
    flex-shrink: 0;
}

.pixel-mic-recording {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform: scale(2);
    transform-origin: top left;
    image-rendering: pixelated;
    margin-right: 10px;
    margin-bottom: 14px;
    animation: blink 1s infinite;
    box-shadow:
        /* head top */
        1px 0px #ff4444, 2px 0px #ff4444,
        /* head body */
        0px 1px #cc2222, 1px 1px #ff4444, 2px 1px #ff6666, 3px 1px #cc2222,
        0px 2px #cc2222, 1px 2px #ff4444, 2px 2px #ff4444, 3px 2px #cc2222,
        /* neck */
        1px 3px #cc2222, 2px 3px #cc2222,
        /* holder arms */
        0px 4px #882222, 3px 4px #882222,
        /* holder curve */
        0px 5px #882222, 1px 5px #882222, 2px 5px #882222, 3px 5px #882222,
        /* stand */
        1px 6px #666666, 2px 6px #666666,
        /* base */
        0px 7px #888888, 1px 7px #888888, 2px 7px #888888, 3px 7px #888888;
}

.sound-wave {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform: scale(2);
    transform-origin: top left;
    image-rendering: pixelated;
    margin-right: 4px;
    margin-bottom: 10px;
}

.sound-wave.sw-1 {
    box-shadow:
        0px 0px #ff6666,
        0px 1px #ff4444,
        0px 2px #ff6666;
    animation: soundWavePulse 0.8s ease-out infinite;
}

.sound-wave.sw-2 {
    box-shadow:
        0px 0px #ff6666,
        0px 1px #ff4444,
        0px 2px #ff6666;
    animation: soundWavePulse 0.8s ease-out infinite 0.3s;
}

@keyframes soundWavePulse {
    0% { opacity: 0.3; transform: scale(2) translateX(0); }
    50% { opacity: 1; transform: scale(2) translateX(2px); }
    100% { opacity: 0.3; transform: scale(2) translateX(4px); }
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Video recording full-screen overlay (Telegram-style) */
.video-recording-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.video-preview-large {
    width: 70vw;
    height: 70vw;
    max-width: 360px;
    max-height: 360px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--recording);
    box-shadow: 0 0 30px rgba(255, 68, 68, 0.4);
    flex-shrink: 0;
}

.video-preview-large video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-recording-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 12px 16px;
    background: rgba(10, 10, 18, 0.85);
    border-radius: 12px;
    border: 1px solid var(--recording);
}

.camera-flip-btn {
    padding: 6px;
    border-radius: 50%;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    transition: background 0.15s;
}

.camera-flip-btn:active {
    background: var(--accent);
}

/* === FORM PAGES === */
.form-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    height: 100%;
}

.form-card {
    background: rgba(var(--bg-panel-rgb), 0.92);
    padding: 24px 20px;
    width: 100%;
    max-width: 400px;
    border-radius: 3px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.form-group {
    margin-bottom: 14px;
}

.form-group .pixel-input,
.form-group select {
    width: 100%;
}

select.pixel-input {
    background: var(--bg-input);
    color: var(--text-primary);
}

.create-form .pixel-btn {
    width: 100%;
    margin-top: 8px;
    padding: 14px;
}

/* Settings */
.settings-id {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-id .pixel-label {
    display: inline;
    margin-bottom: 0;
    white-space: nowrap;
}

.settings-tag {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--accent-bright);
}

.tag-input-wrap {
    display: flex;
    align-items: center;
}

.tag-prefix {
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-right: none;
    padding: 10px 8px;
    color: var(--accent-light);
    font-size: 15px;
    font-family: 'Press Start 2P', monospace;
    border-radius: 3px 0 0 3px;
}

.tag-input {
    border-left: none !important;
    border-radius: 0 3px 3px 0 !important;
}

/* Danger zone (delete chat) */
.danger-zone {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #3a2020;
}

.delete-chat-btn {
    background: rgba(180, 60, 60, 0.3) !important;
    border-color: #b43c3c !important;
    color: #e87070 !important;
    width: 100%;
    transition: background 0.15s, transform 0.15s;
    animation: dangerPulse 2s ease-in-out infinite;
}

@keyframes dangerPulse {
    0%, 100% { box-shadow: 0 0 4px 0 rgba(180, 60, 60, 0.2); }
    50% { box-shadow: 0 0 16px 4px rgba(180, 60, 60, 0.6), 0 0 30px 8px rgba(180, 60, 60, 0.15); }
}

.delete-chat-btn:active {
    background: rgba(180, 60, 60, 0.5) !important;
    animation: none;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--text-muted);
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.15s;
}

.back-link:active,
.back-link:hover {
    color: var(--accent-bright);
}

.back-link .back-arrow {
    transition: transform 0.15s;
}

.back-link:active .back-arrow,
.back-link:hover .back-arrow {
    transform: translateX(-3px);
}

/* Pixel arrow SVG */
.back-arrow {
    display: inline-block;
    flex-shrink: 0;
}

/* Settings password & logout */
.settings-divider {
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

.settings-section-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--accent-light);
    margin-bottom: 12px;
}

.password-hint-box {
    background: var(--bg-dark);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.password-form .form-group {
    margin-bottom: 12px;
}

.settings-logout-btn {
    display: block;
    text-align: center;
    background: rgba(180, 60, 60, 0.2);
    border-color: #b43c3c;
    color: #e87070;
    text-decoration: none;
}

.settings-logout-btn:hover {
    background: rgba(180, 60, 60, 0.35);
}

.nav-item-logout {
    border-top: 1px solid var(--border);
    color: #e87070;
}

.nav-item-logout:hover {
    color: #ff9090;
}

/* Login page extras */
.login-hint {
    margin-top: 16px;
    text-align: center;
}

/* === ADMIN PANEL === */
.admin-container {
    padding: 12px;
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

.admin-container > .pixel-video-scene {
    max-width: 100%;
    border-radius: 3px;
    border: 1px solid var(--border);
}

.admin-section {
    background: var(--bg-card);
    padding: 16px 14px;
    margin-bottom: 14px;
    border-radius: 3px;
    border: 1px solid var(--border);
}

.admin-section .section-title {
    margin-bottom: 14px;
}

.subsection-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
    margin: 14px 0 8px;
}

.admin-form { margin-bottom: 8px; }
.admin-form .pixel-btn { margin-top: 10px; }

.form-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.form-row .form-group { flex: 1; }

@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.invite-list { margin-top: 10px; }

.invite-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.invite-url {
    flex: 1;
    font-size: 10px;
    padding: 8px;
    cursor: pointer;
}

.invite-meta {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.invite-expired { opacity: 0.4; }

.users-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.users-table th {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--accent-light);
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid var(--border);
}

.users-table td {
    padding: 10px 6px;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
}

/* === ALERTS === */
.error-box {
    background: rgba(204, 51, 51, 0.12);
    border: 1px solid var(--error);
    border-left: 3px solid var(--error);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    line-height: 1.6;
    color: #ff8888;
    border-radius: 2px;
    animation: alertSlideIn 0.25s ease-out;
}

@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.success-box {
    background: rgba(51, 170, 85, 0.12);
    border: 1px solid var(--success);
    border-left: 3px solid var(--success);
    padding: 10px 14px;
    margin-bottom: 14px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    line-height: 1.6;
    color: #88ff88;
    border-radius: 2px;
    animation: alertSlideIn 0.25s ease-out;
}

/* === CUSTOM VOICE PLAYER === */
.voice-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    min-width: 180px;
}

.voice-play-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    color: var(--bg-dark);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.voice-play-btn:active { background: var(--accent-light); }

.voice-progress-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.voice-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.voice-progress-fill {
    height: 100%;
    background: var(--accent-bright);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.voice-waveform {
    display: flex;
    align-items: center;
    gap: 1px;
    height: 20px;
}

.voice-waveform span {
    width: 3px;
    background: var(--accent);
    border-radius: 1px;
    min-height: 3px;
    transition: background 0.15s;
}

.voice-player.playing .voice-waveform span {
    animation: waveAnim 0.8s ease-in-out infinite alternate;
}

.voice-waveform span:nth-child(odd) { animation-delay: 0.1s; }
.voice-waveform span:nth-child(3n) { animation-delay: 0.2s; }

@keyframes waveAnim {
    0% { background: var(--accent); }
    100% { background: var(--accent-bright); }
}

.voice-time-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Hide native audio in voice messages */
.msg-voice audio,
.voice-player audio {
    display: none;
}

/* Voice message wrapper */
.msg-voice {
    padding: 2px 0;
}

/* Audio file wrapper (non-voice, keeps native player) */
.msg-audio-file {
    background: var(--bg-input);
    border-radius: 10px;
    padding: 8px 10px;
}

.msg-audio-file audio {
    width: 100%;
    max-width: 280px;
    height: 36px;
    filter: sepia(20%) saturate(70%) brightness(95%) hue-rotate(100deg);
    border-radius: 20px;
}

/* === AVATAR IMAGE IN CIRCLES === */
.room-avatar img,
.sr-avatar img,
.member-avatar-sm img,
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Settings avatar upload */
.settings-avatar-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.settings-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.settings-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-avatar-letter {
    font-family: 'Press Start 2P', monospace;
    font-size: 20px;
    color: var(--avatar-text);
}

.avatar-upload-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.avatar-upload-btn {
    font-size: 7px;
    padding: 8px 14px;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* === DESKTOP (>= 768px) === */
@media (min-width: 768px) {
    .status-bar { padding: 0 20px; }

    .status-name {
        max-width: 200px;
        font-size: 8px;
    }

    .burger-btn { display: none; }

    .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: flex;
        flex-direction: row;
        background: transparent;
        border: none;
        box-shadow: none;
        min-width: auto;
        gap: 2px;
    }

    .nav-item {
        padding: 6px 12px;
        border-bottom: none;
        border-radius: 4px;
        font-size: 12px;
    }

    .nav-item:hover { background: var(--bg-hover); }

    .room-link:hover { background: var(--bg-hover); }

    .pixel-btn:hover {
        background: var(--accent-light);
        color: var(--bg-dark);
    }

    .pixel-btn-sm:hover { background: var(--border-light); color: var(--text-primary); }

    .icon-btn:hover { color: var(--accent-bright); }

    .file-download:hover { background: var(--bg-hover); }

    .members-panel {
        position: static;
        width: 220px;
        flex-shrink: 0;
        border-left: none;
        border-right: 1px solid var(--border);
        order: -1;
        box-shadow: none;
        transform: none;
        visibility: visible;
    }

    .members-toggle,
    .panel-close {
        display: none;
    }

    .chat-back-btn { display: none; }

    .message { max-width: 60%; }

    .msg-video-circle { width: 220px; height: 220px; }

    .video-preview-large { width: 80vw; height: 80vw; max-width: 400px; max-height: 400px; }

    .chat-list-container {
        max-width: 100%;
        background: transparent;
    }

    .room-list {
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
    }

    .room-link { padding: 14px 24px; }
    .chat-list-header { padding: 12px 24px; width: 100%; max-width: 900px; margin: 0 auto; }
    .search-panel { width: 100%; max-width: 900px; margin: 0 auto; }

    .empty-state { min-height: 70vh; }

    .admin-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 20px;
    }

    .fab {
        bottom: 24px;
        right: 32px;
    }

    .form-container {
        padding: 40px 20px;
    }

    .join-card {
        max-width: 420px;
    }

    .send-btn:hover { background: var(--accent-light); }
}

@media (min-width: 1200px) {
    .members-panel { width: 260px; }
    .msg-video-circle { width: 260px; height: 260px; }
}

/* === USER PROFILE === */
.profile-card {
    text-align: center;
}

.profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--accent);
    overflow: hidden;
    box-shadow: 0 0 20px var(--accent-glow);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar-letter {
    font-family: 'Press Start 2P', monospace;
    font-size: 28px;
    color: var(--avatar-text);
}

.profile-online-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-status-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
}

.profile-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-shadow: 0 0 8px var(--accent-glow);
}

.profile-tag {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--accent-bright);
    display: block;
    margin-bottom: 16px;
    text-shadow: 0 0 8px var(--accent-glow);
}

.profile-status-message {
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    margin-bottom: 16px;
    padding: 6px 12px;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 3px;
    border-left: 3px solid var(--accent);
}

.profile-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

.profile-action-btn {
    padding: 12px 20px;
    font-size: 9px;
}

.profile-dm-form {
    display: inline;
}

.profile-section {
    text-align: left;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    margin-top: 16px;
}

.profile-section-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--accent-light);
    margin-bottom: 10px;
}

.profile-groups-list {
    list-style: none;
}

.profile-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
    transition: background 0.12s;
}

.profile-group-item:active {
    background: var(--bg-hover);
}

.profile-group-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    overflow: hidden;
}

.profile-group-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chat settings avatar */
.chat-settings-avatar {
    cursor: default;
}

/* === CHAT HEADER SETTINGS BUTTON === */
.chat-settings-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    transition: color 0.15s;
}

.chat-settings-btn:active { color: var(--accent-bright); }

@media (min-width: 768px) {
    .profile-group-item:hover { background: var(--bg-hover); }
    .chat-settings-btn:hover { color: var(--accent-bright); }

    /* Desktop hover states for new chat features */
    .msg-actions-btn:hover {
        background: var(--bg-hover);
        color: var(--accent-bright);
    }

    .msg-context-menu li:hover {
        background: var(--bg-hover);
        color: var(--accent-bright);
    }

    .reply-preview-close:hover {
        color: var(--accent-bright);
    }

    .msg-reply-block:hover {
        background: rgba(var(--accent-rgb), 0.15);
    }

    .msg-reaction:hover {
        background: var(--bg-hover);
        border-color: var(--accent-light);
    }

    .emoji-picker-btn:hover {
        background: var(--accent);
        transform: scale(1.15);
    }

    .forward-modal-room:hover {
        background: var(--bg-hover);
    }

    .chat-search-close:hover {
        color: var(--accent-bright);
    }

    .status-icon:hover {
        transform: scale(1.2);
    }

    .settings-status-option:hover {
        background: var(--bg-hover);
        border-color: var(--accent-light);
    }

    /* Show message actions on hover for desktop */
    .message:hover .msg-actions {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* ============================================
   NEW CHAT FEATURES — Pixel-art retro ICQ style
   ============================================ */

/* === 1. MESSAGE ACTIONS MENU === */
.msg-actions {
    position: absolute;
    top: -6px;
    right: 8px;
    display: flex;
    gap: 2px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 2px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s, visibility 0.15s;
}

.message-own .msg-actions {
    right: auto;
    left: 8px;
}

.msg-actions.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.msg-actions-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 5px 7px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.msg-actions-btn:active {
    background: var(--bg-hover);
    color: var(--accent-bright);
}

/* === 2. CONTEXT MENU === */
.msg-context-menu {
    position: fixed;
    z-index: 300;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    min-width: 160px;
    padding: 4px 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: opacity 0.12s, visibility 0.12s, transform 0.12s;
}

.msg-context-menu.open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.msg-context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.msg-context-menu li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.msg-context-menu li:active {
    background: var(--bg-hover);
}

.msg-context-menu li .ctx-icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.msg-context-menu li .ctx-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
}

.msg-context-menu .ctx-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
    padding: 0;
    cursor: default;
}

.msg-context-menu li.ctx-danger {
    color: #e87070;
}

/* === 3. REPLY PREVIEW BAR === */
.reply-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-header);
    border-left: 3px solid var(--accent-bright);
    border-bottom: 1px solid var(--border);
    animation: slideDown 0.15s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}

.reply-preview-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.reply-preview-sender {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--accent-bright);
    display: block;
    margin-bottom: 2px;
    text-shadow: 0 0 6px var(--accent-glow);
}

.reply-preview-text {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-preview-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.reply-preview-close:active {
    color: var(--accent-bright);
}

/* === 4. REPLY BLOCK IN MESSAGE === */
.msg-reply-block {
    display: block;
    padding: 6px 10px;
    margin-bottom: 6px;
    background: rgba(var(--accent-rgb), 0.08);
    border-left: 2px solid var(--accent);
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
}

.msg-reply-block:active {
    background: rgba(var(--accent-rgb), 0.18);
}

.msg-reply-sender {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--accent-light);
    display: block;
    margin-bottom: 2px;
}

.msg-reply-text {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

/* === 5. FORWARDED LABEL === */
.msg-forwarded {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
    font-style: italic;
    letter-spacing: 0.5px;
}

.msg-forwarded::before {
    content: '↪ ';
}

/* === 6. EMOJI REACTION BAR === */
.msg-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.msg-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 3px 8px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.msg-reaction:active {
    background: var(--bg-hover);
}

.msg-reaction.own {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.15);
}

.msg-reaction-emoji {
    font-size: 14px;
    line-height: 1;
}

.msg-reaction-count {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-secondary);
    line-height: 1;
}

/* === 7. EMOJI PICKER POPUP === */
.emoji-picker {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    display: flex;
    gap: 2px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    z-index: 25;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
}

.emoji-picker.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.emoji-picker-btn {
    font-size: 18px;
    padding: 6px;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.emoji-picker-btn:active {
    background: var(--accent);
    transform: scale(1.15);
}

/* === MULTI-SELECT === */
.selection-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(48px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--bg-header);
    border-bottom: 2px solid var(--accent);
    display: none;
    align-items: center;
    gap: 12px;
    padding-left: 12px;
    padding-right: 12px;
    z-index: 400;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.selection-toolbar.active {
    display: flex;
}

.selection-toolbar-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.selection-toolbar-btn:active {
    background: var(--bg-hover);
    color: var(--accent-bright);
}

.selection-toolbar-btn.sel-danger:active {
    color: #e87070;
}

.selection-count {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--accent-bright);
    flex: 1;
}

.selection-toolbar-actions {
    display: flex;
    gap: 4px;
}

.message.msg-selected {
    background: rgba(var(--accent-rgb), 0.25) !important;
    border-color: var(--accent) !important;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.message.msg-selected::before {
    content: '✓';
    position: absolute;
    top: 4px;
    left: -24px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.message-own.msg-selected::before {
    left: auto;
    right: -24px;
}

#messagesContainer.selection-active {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.message.msg-removing {
    opacity: 0;
    transform: translateX(-30px) scale(0.95);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

/* === 8. FORWARD MODAL === */
.forward-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.forward-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.forward-modal {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    width: 100%;
    max-width: 360px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.2s;
}

.forward-modal-overlay.open .forward-modal {
    transform: scale(1);
}

.forward-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.forward-modal-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--accent-bright);
}

.forward-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
}

.forward-modal-close:active {
    color: var(--accent-bright);
}

.forward-modal-search {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.forward-modal-search .pixel-input {
    font-size: 13px;
    padding: 8px 12px;
}

.forward-modal-list {
    list-style: none;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

.forward-modal-room {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
    -webkit-tap-highlight-color: transparent;
}

.forward-modal-room:active {
    background: var(--bg-hover);
}

.forward-modal-room-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    font-family: 'Press Start 2P', monospace;
    font-size: 11px;
    color: var(--avatar-text);
    overflow: hidden;
}

.forward-modal-room-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.forward-modal-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
}

/* === 9. SEARCH PANEL IN CHAT === */
.chat-search-panel {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: slideDown 0.15s ease-out;
}

.chat-search-panel .pixel-input {
    flex: 1;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 16px;
}

.chat-search-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.chat-search-close:active {
    color: var(--accent-bright);
}

.chat-search-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.chat-search-nav-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    padding: 4px 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
}

.chat-search-nav-btn:active {
    color: var(--accent-bright);
}

.chat-search-count {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
    white-space: nowrap;
}

.chat-search-results {
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
}

.chat-search-result-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.chat-search-result-item:active {
    background: var(--bg-hover);
}

.chat-search-result-sender {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--accent-light);
}

.chat-search-result-text {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-search-result-text mark {
    background: rgba(var(--accent-bright-rgb), 0.25);
    color: var(--accent-bright);
    border-radius: 2px;
    padding: 0 2px;
}

/* === PINNED MESSAGE BAR === */
.pinned-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--accent-bright);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pinned-bar.hidden {
    display: none;
}
.pinned-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.pinned-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pinned-sender {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--accent-bright);
    display: block;
}
.pinned-text {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pinned-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

/* Message highlight (for pin scroll) */
.msg-highlight {
    animation: msgHighlight 1.5s ease-out;
}
@keyframes msgHighlight {
    0% { background: rgba(var(--accent-bright-rgb), 0.3); }
    100% { background: transparent; }
}

/* === POLLS === */
.msg-poll {
    max-width: 320px;
    width: 100%;
}
.poll-question {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}
.poll-option {
    position: relative;
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
    transition: border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.poll-option:active {
    border-color: var(--accent-light);
}
.poll-option-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(var(--accent-rgb), 0.2);
    transition: width 0.3s ease;
    border-radius: 3px 0 0 3px;
}
.poll-option.poll-voted .poll-option-bar {
    background: rgba(var(--accent-rgb), 0.4);
}
.poll-option.poll-voted {
    border-color: var(--accent-light);
}
.poll-option-text {
    position: relative;
    font-size: 12px;
    color: var(--text-secondary);
    z-index: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.poll-option-count {
    position: relative;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
    z-index: 1;
    flex-shrink: 0;
}
.poll-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.poll-total {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-muted);
}
.poll-anon {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-dim);
}

/* Poll modal */
.poll-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 200;
    align-items: center;
    justify-content: center;
}
.poll-modal-overlay.active {
    display: flex;
}
.poll-modal {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    width: 90%;
    max-width: 360px;
    max-height: 80vh;
    overflow-y: auto;
}
.poll-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}
.poll-modal-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--text-primary);
}
.poll-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    -webkit-tap-highlight-color: transparent;
}
.poll-modal-body {
    padding: 12px;
}
.poll-modal-body .form-group {
    margin-bottom: 10px;
}
.poll-option-input {
    margin-bottom: 6px;
}
.poll-modal-footer {
    padding: 12px;
    border-top: 1px solid var(--border);
    text-align: right;
}

/* === 10. UNREAD BADGE === */
.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent);
    color: var(--bg-dark);
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    font-weight: bold;
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 0 8px var(--accent-glow);
    line-height: 1;
}

.unread-badge.muted {
    background: var(--text-dim);
    box-shadow: none;
}

/* === 11. USER STATUS INDICATORS === */
.status-dot.away {
    background: #d4a832;
    box-shadow: 0 0 6px rgba(212, 168, 50, 0.5);
    animation: awayPulse 3s ease-in-out infinite;
}

@keyframes awayPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(212, 168, 50, 0.5); }
    50% { box-shadow: 0 0 12px rgba(212, 168, 50, 0.7), 0 0 18px rgba(212, 168, 50, 0.2); }
}

.status-dot.dnd {
    background: #e05555;
    box-shadow: 0 0 6px rgba(224, 85, 85, 0.5);
    animation: dndPulse 3s ease-in-out infinite;
}

.status-dot.busy {
    background: #e07830;
    box-shadow: 0 0 6px rgba(224, 120, 48, 0.5);
    animation: busyPulse 3s ease-in-out infinite;
}

@keyframes dndPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(224, 85, 85, 0.5); }
    50% { box-shadow: 0 0 12px rgba(224, 85, 85, 0.7), 0 0 18px rgba(224, 85, 85, 0.2); }
}

@keyframes busyPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(224, 120, 48, 0.5); }
    50% { box-shadow: 0 0 12px rgba(224, 120, 48, 0.7), 0 0 18px rgba(224, 120, 48, 0.2); }
}

.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.status-icon:active {
    transform: scale(1.2);
}

/* Pulsing animation for online status */
.status-dot.online {
    animation: statusPulse 2s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 6px var(--online); }
    50% { box-shadow: 0 0 12px var(--online), 0 0 18px rgba(74, 255, 74, 0.2); }
}

/* DND icon overlay */
.status-dot.dnd::after {
    content: '';
    display: block;
    width: 6px;
    height: 2px;
    background: var(--bg-dark);
    border-radius: 1px;
    position: relative;
    top: -1px;
}

/* === 12. DELETED MESSAGE STYLE === */
.msg-deleted {
    font-style: italic;
    color: var(--text-dim);
    font-size: 13px;
    user-select: none;
}

.msg-deleted::before {
    content: '🚫 ';
    font-style: normal;
    font-size: 11px;
}

.message.deleted {
    opacity: 0.6;
    border-style: dashed;
}

/* === 13. STATUS SECTION IN SETTINGS === */
.settings-status-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.settings-status-section .settings-section-title {
    margin-bottom: 12px;
}

.settings-status-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.settings-status-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.settings-status-option:active {
    background: var(--bg-hover);
}

.settings-status-option.selected {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2);
}

.settings-status-option input[type="radio"] {
    display: none;
}

/* Custom radio circle */
.settings-status-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg-panel);
}

.settings-status-option.selected .settings-status-radio {
    border-color: var(--accent-bright);
    box-shadow: 0 0 8px rgba(45, 200, 100, 0.3);
}

.settings-status-option.selected .settings-status-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 6px var(--accent-bright);
}

.settings-status-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--text-primary);
}

/* Status color dots */
.settings-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.settings-status-dot.s-online {
    background: var(--online);
    box-shadow: 0 0 8px var(--online);
    border-color: rgba(0, 200, 100, 0.4);
}

.settings-status-dot.s-away {
    background: #d4a832;
    box-shadow: 0 0 8px rgba(212, 168, 50, 0.5);
    border-color: rgba(212, 168, 50, 0.4);
}

.settings-status-dot.s-dnd {
    background: #e05555;
    box-shadow: 0 0 8px rgba(224, 85, 85, 0.5);
    border-color: rgba(224, 85, 85, 0.4);
}

.settings-status-dot.s-busy {
    background: #e07830;
    box-shadow: 0 0 8px rgba(224, 120, 48, 0.5);
    border-color: rgba(224, 120, 48, 0.4);
}

.settings-status-dot.s-invisible {
    background: #8888aa;
    box-shadow: 0 0 4px rgba(136, 136, 170, 0.3);
    border-color: rgba(136, 136, 170, 0.4);
}

.settings-status-dot.s-offline {
    background: var(--offline);
    border-color: rgba(100, 100, 100, 0.3);
}

.settings-status-text-wrap {
    margin-top: 12px;
}

.settings-status-text-wrap .pixel-label {
    margin-bottom: 6px;
}

.settings-status-text-wrap .pixel-input {
    font-size: 10px;
    padding: 10px 12px;
}

/* ============================================
   CHAT.JS NEW FEATURES — Reply, Reactions,
   Context Menu, Emoji Picker, Forward, Search,
   Toast, Highlight, Deleted
   ============================================ */

/* --- Reply Preview Bar (above input) --- */
.reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--accent-bright);
    animation: replySlideDown 0.15s ease-out;
}

@keyframes replySlideDown {
    from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
    to { opacity: 1; max-height: 60px; }
}

.reply-bar-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.reply-bar-label {
    font-size: 12px;
    color: var(--accent-light);
    flex-shrink: 0;
}

.reply-bar-sender {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--accent-bright);
    flex-shrink: 0;
}

.reply-bar-text {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-bar-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
}

.reply-bar-close:active {
    color: var(--accent-bright);
}

/* --- Forwarded label in message --- */
.msg-forwarded-label {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
    font-style: italic;
}

/* --- Context Menu (right-click / long-press) --- */
.msg-context-menu {
    position: fixed;
    z-index: 9999;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
    min-width: 180px;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}

.ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.ctx-menu-item:active {
    background: var(--bg-hover);
}

.ctx-menu-item .ctx-icon {
    font-size: 15px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.ctx-menu-danger {
    color: #e87070;
}

/* --- Emoji Picker Popup (6 preset emojis) --- */
.emoji-picker-popup {
    position: fixed;
    z-index: 9999;
    display: flex;
    gap: 2px;
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 24px;
    padding: 6px 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.emoji-picker-item {
    font-size: 22px;
    padding: 4px 6px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    user-select: none;
}

.emoji-picker-item:active {
    background: var(--accent);
    transform: scale(1.2);
}

/* --- Reaction Badges on Messages --- */
.msg-reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2px 7px;
    font-size: 14px;
    cursor: default;
    line-height: 1.3;
}

.msg-reaction-badge .reaction-count {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--text-secondary);
}

/* --- Forward Modal --- */
.forward-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.forward-modal {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    width: 100%;
    max-width: 340px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.forward-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.forward-modal-title {
    font-family: 'Press Start 2P', monospace;
    font-size: 9px;
    color: var(--accent-bright);
}

.forward-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
}

.forward-modal-close:active {
    color: var(--accent-bright);
}

.forward-modal-list {
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

.forward-room-item {
    padding: 12px 16px;
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--text-primary);
    cursor: pointer;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.forward-room-item:active {
    background: var(--bg-hover);
}

/* --- Search Bar in Chat --- */
.chat-search-wrap {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
}

.chat-search-input {
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 16px;
}

.chat-search-results {
    max-height: 220px;
    overflow-y: auto;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    margin-top: 4px;
}

.chat-search-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.chat-search-result-item:active {
    background: var(--bg-hover);
}

.csr-sender {
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    color: var(--accent-light);
    flex-shrink: 0;
}

.csr-text {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.csr-time {
    font-family: 'Press Start 2P', monospace;
    font-size: 6px;
    color: var(--text-dim);
    flex-shrink: 0;
}

.chat-search-toggle {
    font-size: 16px;
}

/* --- Message Highlight (scroll-to) --- */
.msg-highlight {
    animation: msgHighlight 2s ease-out;
}

@keyframes msgHighlight {
    0% { box-shadow: 0 0 0 3px var(--accent-bright); }
    100% { box-shadow: 0 0 0 0px transparent; }
}

/* --- Deleted message --- */
.message-deleted {
    opacity: 0.6;
    border-style: dashed;
}

.message-deleted .msg-text.msg-deleted {
    font-style: italic;
    color: var(--text-dim);
    user-select: none;
}

/* --- Toast notification --- */
.chat-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-panel);
    color: var(--text-primary);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 10px 20px;
    font-family: 'Press Start 2P', monospace;
    font-size: 7px;
    z-index: 10000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    animation: toastIn 0.3s ease-out;
}

.chat-toast-hide {
    animation: toastOut 0.3s ease-in forwards;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(10px); }
}

/* --- Desktop hover states for new elements --- */
@media (min-width: 768px) {
    .ctx-menu-item:hover {
        background: var(--bg-hover);
    }

    .ctx-menu-danger:hover {
        background: rgba(232, 112, 112, 0.1);
    }

    .emoji-picker-item:hover {
        background: var(--accent);
        transform: scale(1.2);
    }

    .forward-room-item:hover {
        background: var(--bg-hover);
    }

    .chat-search-result-item:hover {
        background: var(--bg-hover);
    }

    .reply-bar-close:hover {
        color: var(--accent-bright);
    }

    .chat-search-toggle:hover {
        color: var(--accent-bright);
    }
}

/* ========== CALL UI ========== */

/* --- Call buttons in header --- */
.call-header-btns {
    display: flex;
    gap: 2px;
    margin-left: auto;
    margin-right: 4px;
}
.call-header-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
    line-height: 1;
}
.call-header-btn:active { color: var(--accent-bright); }
@media (min-width: 768px) {
    .call-header-btn:hover { color: var(--accent-bright); }
}

/* --- Active call overlay (fullscreen) --- */
.call-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--bg-dark);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top, 20px) 16px env(safe-area-inset-bottom, 20px);
}
.call-overlay.open {
    display: flex;
}

/* --- Call info area --- */
.call-info {
    text-align: center;
    margin-bottom: 24px;
    flex-shrink: 0;
}
.call-partner-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    color: var(--accent-bright);
    margin-bottom: 8px;
    display: block;
}
.call-status-text {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--text-secondary);
    display: block;
    min-height: 14px;
}
.call-timer {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    color: var(--text-primary);
    display: block;
    margin-top: 4px;
}

/* --- Call avatar (voice call) --- */
.call-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--avatar-bg);
    border: 3px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px;
    box-shadow: 0 0 30px rgba(var(--accent-bright-rgb), 0.2);
    animation: callPulse 2s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}
.call-avatar .avatar-letter {
    font-family: 'Press Start 2P', monospace;
    font-size: 32px;
    color: var(--accent-bright);
}
.call-avatar .avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
@keyframes callPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(var(--accent-bright-rgb), 0.2); }
    50% { box-shadow: 0 0 50px rgba(var(--accent-bright-rgb), 0.4); }
}

/* --- Video area --- */
.call-video-area {
    display: none;
    position: relative;
    width: 100%;
    flex: 1;
    max-height: 65vh;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
    margin-bottom: 24px;
}
.call-video-area.active {
    display: flex;
}
.call-remote-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
}
.call-local-video {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 100px;
    height: 130px;
    border-radius: 4px;
    border: 2px solid var(--accent);
    object-fit: cover;
    background: #111;
    z-index: 2;
}

/* --- Call controls --- */
.call-controls {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
    flex-shrink: 0;
}
.call-ctrl-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    background: var(--bg-panel);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.call-ctrl-btn:active {
    transform: scale(0.92);
}
.call-ctrl-btn.active {
    background: rgba(255, 68, 68, 0.2);
    border-color: var(--recording);
    color: var(--recording);
}
.call-ctrl-btn.call-end-btn {
    background: var(--recording);
    border-color: var(--recording);
    color: #fff;
    width: 64px;
    height: 64px;
}
.call-ctrl-btn.call-end-btn:active {
    background: #cc3333;
}
@media (min-width: 768px) {
    .call-ctrl-btn:hover {
        background: var(--bg-hover);
        border-color: var(--accent);
    }
    .call-ctrl-btn.call-end-btn:hover {
        background: #cc3333;
    }
}

/* --- Incoming call overlay --- */
.incoming-call-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 510;
    background: rgba(var(--bg-dark-rgb), 0.95);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: env(safe-area-inset-top, 20px) 16px env(safe-area-inset-bottom, 20px);
}
.incoming-call-overlay.open {
    display: flex;
}
.incoming-call-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--avatar-bg);
    border: 3px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    animation: incomingRing 1s ease-in-out infinite;
}
@keyframes incomingRing {
    0%, 100% { transform: rotate(0deg); box-shadow: 0 0 20px rgba(var(--accent-bright-rgb), 0.3); }
    25% { transform: rotate(-8deg); box-shadow: 0 0 35px rgba(var(--accent-bright-rgb), 0.5); }
    75% { transform: rotate(8deg); box-shadow: 0 0 35px rgba(var(--accent-bright-rgb), 0.5); }
}
.incoming-caller-name {
    font-family: 'Press Start 2P', monospace;
    font-size: 12px;
    color: var(--accent-bright);
    margin-bottom: 6px;
}
.incoming-call-type {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    color: var(--text-secondary);
    margin-bottom: 40px;
}
.incoming-call-actions {
    display: flex;
    gap: 40px;
}
.incoming-call-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.incoming-call-btn:active {
    transform: scale(0.9);
}
.incoming-accept-btn {
    background: var(--success);
    color: #fff;
}
.incoming-decline-btn {
    background: var(--recording);
    color: #fff;
}

/* ========== PIXEL ART VIDEO CONTAINERS ========== */
.pixel-video-scene {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 16px;
    overflow: hidden;
    border-radius: 4px;
    image-rendering: pixelated;
    flex-shrink: 0;
    background: var(--bg-dark, #0a1410);
}

#pixelScene {
    margin-top: auto;
    flex-shrink: 0;
}

.pixel-video-scene video {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    -webkit-image-rendering: pixelated;
    background: var(--bg-dark, #0a1410);
}

.pixel-video-login {
    max-width: 360px;
    margin: 0 auto 16px;
}

.pixel-video-empty {
    max-width: 320px;
    margin: 20px auto;
}

.pixel-video-404 {
    max-width: 320px;
    margin: 0 auto 20px;
}

/* ========== PIXEL ART SCENE (road + cars + garage — CSS fallback) ========== */
.pixel-scene {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0.8;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    pointer-events: none;
    /* Same bg as chat-list-container — seamless, no gradient seam */
    background: rgba(var(--bg-main-rgb), 0.85);
}


/* ========== FLOATING PIXEL DECORATIONS ========== */
.pixel-float {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    transform: scale(1.5);
    opacity: 0;
}

/* Reset absolute positioning of elements inside float wrappers */
.pixel-float .pixel-wrench,
.pixel-float .pixel-tire,
.pixel-float .pixel-gear {
    position: static;
    animation: none;
}

/* Wrench — dissolve cycle, two positions */
.pixel-float-wrench {
    top: 18%;
    right: 25px;
    transform-origin: top right;
    animation: floatWrench 14s ease-in-out infinite;
}

/* Gear — dissolve cycle, two positions */
.pixel-float-gear {
    top: 40%;
    left: 25px;
    transform-origin: top left;
    animation: floatGear 18s ease-in-out infinite;
    animation-delay: -4s;
}

/* Tire — dissolve cycle, two positions */
.pixel-float-tire {
    top: 55%;
    left: 30%;
    transform-origin: center;
    animation: floatTire 12s ease-in-out infinite;
    animation-delay: -2s;
}

/* Wrench dissolve: appear → hold → fade → reposition → appear again */
@keyframes floatWrench {
    0%       { opacity: 0;    transform: scale(1.5) translate(0, 0) rotate(0deg); }
    8%       { opacity: 0.2; }
    42%      { opacity: 0.2;  transform: scale(1.5) translate(0, 0) rotate(15deg); }
    50%      { opacity: 0;    transform: scale(1.5) translate(0, 0) rotate(0deg); }
    50.01%   { opacity: 0;    transform: scale(1.5) translate(-30px, 70px) rotate(0deg); }
    58%      { opacity: 0.18; }
    92%      { opacity: 0.18; transform: scale(1.5) translate(-30px, 70px) rotate(-15deg); }
    100%     { opacity: 0;    transform: scale(1.5) translate(-30px, 70px) rotate(0deg); }
}

/* Gear dissolve */
@keyframes floatGear {
    0%       { opacity: 0;    transform: scale(1.5) translate(0, 0) rotate(0deg); }
    8%       { opacity: 0.2; }
    42%      { opacity: 0.2;  transform: scale(1.5) translate(0, 0) rotate(120deg); }
    50%      { opacity: 0;    transform: scale(1.5) translate(0, 0) rotate(180deg); }
    50.01%   { opacity: 0;    transform: scale(1.5) translate(50px, -40px) rotate(180deg); }
    58%      { opacity: 0.18; }
    92%      { opacity: 0.18; transform: scale(1.5) translate(50px, -40px) rotate(300deg); }
    100%     { opacity: 0;    transform: scale(1.5) translate(50px, -40px) rotate(360deg); }
}

/* Tire dissolve */
@keyframes floatTire {
    0%       { opacity: 0;    transform: scale(1.5) translate(0, 0) rotate(0deg); }
    10%      { opacity: 0.2; }
    40%      { opacity: 0.2;  transform: scale(1.5) translate(0, 0) rotate(90deg); }
    50%      { opacity: 0;    transform: scale(1.5) translate(0, 0) rotate(180deg); }
    50.01%   { opacity: 0;    transform: scale(1.5) translate(25px, -50px) rotate(180deg); }
    60%      { opacity: 0.18; }
    90%      { opacity: 0.18; transform: scale(1.5) translate(25px, -50px) rotate(270deg); }
    100%     { opacity: 0;    transform: scale(1.5) translate(25px, -50px) rotate(360deg); }
}

/* Road */
.pixel-road {
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    height: 4px;
    background: #333;
    box-shadow: 0 -1px 0 #444;
    z-index: 0;
}
.pixel-car {
    z-index: 1;
}
.pixel-road::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, #ff9900 0px, #ff9900 10px, transparent 10px, transparent 24px);
    animation: roadScroll 3s linear infinite;
}
@keyframes roadScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-24px); }
}

/* Car 1 — green sedan, improved with gradient shading + chrome + reflection */
.pixel-car-1 {
    position: absolute;
    bottom: 32px;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(3.5);
    image-rendering: pixelated;
    will-change: transform, opacity, filter;
    animation: carDrive1 24s linear infinite;
    box-shadow:
        /* roof */
        7px 0px #1a472a, 8px 0px #2d7d4a, 9px 0px #35905a, 10px 0px #2d7d4a, 11px 0px #1a472a,
        6px 1px #1a472a, 7px 1px #2d7d4a, 8px 1px #4aaa6a, 9px 1px #4aaa6a, 10px 1px #35905a, 11px 1px #2d7d4a, 12px 1px #1a472a,
        /* windshield — glass with bright reflection */
        5px 2px #1a472a, 6px 2px #3a6a6a, 7px 2px #5a9a8a, 8px 2px #7ababa, 9px 2px #5a9a8a, 10px 2px #3a6a6a, 11px 2px #2d5a5a, 12px 2px #1a472a, 13px 2px #1a472a,
        /* body top — highlight gradient */
        3px 3px #1a472a, 4px 3px #2d7d4a, 5px 3px #35905a, 6px 3px #4aaa6a, 7px 3px #35905a, 8px 3px #2d7d4a, 9px 3px #35905a, 10px 3px #4aaa6a, 11px 3px #35905a, 12px 3px #2d7d4a, 13px 3px #1a472a, 14px 3px #1a472a,
        /* chrome bumper line */
        2px 4px #1a472a, 3px 4px #2d7d4a, 4px 4px #35905a, 5px 4px #888888, 6px 4px #aaaaaa, 7px 4px #888888, 8px 4px #aaaaaa, 9px 4px #888888, 10px 4px #aaaaaa, 11px 4px #888888, 12px 4px #35905a, 13px 4px #2d7d4a, 14px 4px #1a472a,
        /* bottom + dual headlight/taillight */
        1px 5px #ff9900, 2px 5px #ffbb33, 3px 5px #2d7d4a, 4px 5px #1a472a, 5px 5px #2d7d4a, 6px 5px #1a472a, 7px 5px #2d7d4a, 8px 5px #1a472a, 9px 5px #2d7d4a, 10px 5px #1a472a, 11px 5px #2d7d4a, 12px 5px #1a472a, 13px 5px #cc2222, 14px 5px #ff4444,
        /* undercarriage */
        2px 6px #1a1a1a, 3px 6px #222222, 4px 6px #1a1a1a, 5px 6px #222222, 6px 6px #1a1a1a, 7px 6px #222222, 8px 6px #1a1a1a, 9px 6px #222222, 10px 6px #1a1a1a, 11px 6px #222222, 12px 6px #1a1a1a, 13px 6px #222222,
        /* front wheel */
        4px 7px #333333, 5px 7px #555555, 6px 7px #333333,
        /* rear wheel */
        10px 7px #333333, 11px 7px #555555, 12px 7px #333333;
}

@keyframes carDrive1 {
    /* Damaged: slowly crawls to garage */
    0%   { left: -80px; filter: brightness(0.45) saturate(0.3); opacity: 1; }
    42%  { left: calc(50% - 36px); filter: brightness(0.45) saturate(0.3); opacity: 1; }
    /* Enters garage — hides */
    46%  { left: calc(50% - 28px); filter: brightness(0.45) saturate(0.3); opacity: 0; }
    /* Inside garage — repair */
    58%  { left: calc(50% - 20px); opacity: 0; }
    /* Exits garage — repaired! bright */
    62%  { left: calc(50% - 12px); filter: brightness(1.2) saturate(1.3); opacity: 1; }
    /* Drives away at normal speed */
    80%  { filter: brightness(1) saturate(1); }
    100% { left: calc(100% + 80px); filter: brightness(1) saturate(1); opacity: 1; }
}

/* Car 2 — gray delivery truck, improved with detailed cargo/cab */
.pixel-car-2 {
    position: absolute;
    bottom: 32px;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(3.5) scaleX(-1);
    image-rendering: pixelated;
    will-change: transform;
    animation: carDrive2 22s linear infinite;
    animation-delay: -6s;
    box-shadow:
        /* cargo bed */
        2px 0px #444444, 3px 0px #555555, 4px 0px #666666, 5px 0px #555555, 6px 0px #555555, 7px 0px #444444,
        1px 1px #333333, 2px 1px #555555, 3px 1px #666666, 4px 1px #777777, 5px 1px #666666, 6px 1px #666666, 7px 1px #555555, 8px 1px #333333,
        1px 2px #444444, 2px 2px #555555, 3px 2px #777777, 4px 2px #888888, 5px 2px #777777, 6px 2px #777777, 7px 2px #666666, 8px 2px #444444,
        /* cab */
        10px 0px #555555, 11px 0px #666666, 12px 0px #777777, 13px 0px #666666, 14px 0px #555555,
        9px 1px #444444, 10px 1px #666666, 11px 1px #777777, 12px 1px #888888, 13px 1px #777777, 14px 1px #666666, 15px 1px #444444,
        9px 2px #444444, 10px 2px #666666, 11px 2px #3a6a5a, 12px 2px #4a7a6a, 13px 2px #3a6a5a, 14px 2px #666666, 15px 2px #444444,
        /* full body */
        1px 3px #333333, 2px 3px #555555, 3px 3px #666666, 4px 3px #555555, 5px 3px #666666, 6px 3px #555555, 7px 3px #666666, 8px 3px #555555,
        9px 3px #555555, 10px 3px #666666, 11px 3px #777777, 12px 3px #888888, 13px 3px #777777, 14px 3px #666666, 15px 3px #555555, 16px 3px #444444,
        /* bottom + lights */
        0px 4px #ff9900, 1px 4px #555555, 2px 4px #666666, 3px 4px #555555, 4px 4px #666666, 5px 4px #555555, 6px 4px #666666, 7px 4px #555555, 8px 4px #666666,
        9px 4px #555555, 10px 4px #666666, 11px 4px #555555, 12px 4px #666666, 13px 4px #555555, 14px 4px #666666, 15px 4px #cc2222, 16px 4px #ff4444,
        /* undercarriage */
        2px 5px #222222, 3px 5px #1a1a1a, 4px 5px #222222, 5px 5px #1a1a1a, 6px 5px #222222, 7px 5px #1a1a1a, 8px 5px #222222,
        9px 5px #1a1a1a, 10px 5px #222222, 11px 5px #1a1a1a, 12px 5px #222222, 13px 5px #1a1a1a, 14px 5px #222222,
        /* front wheel */
        4px 6px #333333, 5px 6px #555555, 6px 6px #333333,
        /* rear wheel */
        12px 6px #333333, 13px 6px #555555, 14px 6px #333333;
}

@keyframes carDrive2 {
    0%   { right: -100px; left: auto; }
    100% { right: calc(100% + 100px); left: auto; }
}

/* Garage — improved with corrugated roof, brick detail, neon sign */
.pixel-garage {
    position: absolute;
    bottom: 36px;
    left: calc(50% - 42px);
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(3.5);
    image-rendering: pixelated;
    z-index: 0;
    box-shadow:
        /* ROOF — peaked corrugated metal with shine */
        8px 0px #777777, 9px 0px #999999, 10px 0px #aaaaaa, 11px 0px #999999,
        6px 1px #555555, 7px 1px #777777, 8px 1px #999999, 9px 1px #bbbbbb, 10px 1px #cccccc, 11px 1px #bbbbbb, 12px 1px #999999, 13px 1px #777777, 14px 1px #555555,
        4px 2px #444444, 5px 2px #555555, 6px 2px #666666, 7px 2px #888888, 8px 2px #999999, 9px 2px #aaaaaa, 10px 2px #aaaaaa, 11px 2px #999999, 12px 2px #888888, 13px 2px #777777, 14px 2px #666666, 15px 2px #555555, 16px 2px #444444,
        /* NEON SIGN — green alternating glow */
        4px 3px #333333, 5px 3px #3a3a3a,
        6px 3px #4aaa6a, 7px 3px #6ade8a, 8px 3px #4aaa6a, 9px 3px #6ade8a, 10px 3px #4aaa6a, 11px 3px #6ade8a, 12px 3px #4aaa6a, 13px 3px #6ade8a,
        14px 3px #3a3a3a, 15px 3px #333333,
        /* WALL — alternating brick rows */
        3px 4px #3a2a20, 4px 4px #4a3528, 5px 4px #5a4030, 6px 4px #3a2a20, 7px 4px #4a3528,
        8px 4px #4aaa6a, 9px 4px #0f0f0f, 10px 4px #0a0a0a, 11px 4px #0a0a0a, 12px 4px #4aaa6a,
        13px 4px #4a3528, 14px 4px #3a2a20, 15px 4px #5a4030, 16px 4px #4a3528, 17px 4px #3a2a20,
        3px 5px #4a3528, 4px 5px #5a4030, 5px 5px #3a2a20, 6px 5px #4a3528, 7px 5px #5a4030,
        8px 5px #4aaa6a, 9px 5px #0a0a0a, 10px 5px #1a472a, 11px 5px #2d7d4a, 12px 5px #4aaa6a,
        13px 5px #3a2a20, 14px 5px #4a3528, 15px 5px #3a2a20, 16px 5px #5a4030, 17px 5px #4a3528,
        3px 6px #5a4030, 4px 6px #3a2a20, 5px 6px #4a3528, 6px 6px #5a4030, 7px 6px #3a2a20,
        8px 6px #4aaa6a, 9px 6px #1a1a1a, 10px 6px #2d7d4a, 11px 6px #35905a, 12px 6px #4aaa6a,
        13px 6px #5a4030, 14px 6px #3a2a20, 15px 6px #4a3528, 16px 6px #3a2a20, 17px 6px #5a4030,
        /* DOOR BOTTOM — car headlights glow */
        3px 7px #3a2a20, 4px 7px #4a3528, 5px 7px #5a4030, 6px 7px #4a3528, 7px 7px #3a2a20,
        8px 7px #4aaa6a, 9px 7px #ff9900, 10px 7px #2d7d4a, 11px 7px #ff4444, 12px 7px #4aaa6a,
        13px 7px #3a2a20, 14px 7px #4a3528, 15px 7px #5a4030, 16px 7px #4a3528, 17px 7px #3a2a20,
        /* THRESHOLD */
        3px 8px #4a3528, 4px 8px #3a2a20, 5px 8px #4a3528, 6px 8px #3a2a20, 7px 8px #4a3528,
        8px 8px #35905a, 9px 8px #333333, 10px 8px #444444, 11px 8px #333333, 12px 8px #35905a,
        13px 8px #4a3528, 14px 8px #3a2a20, 15px 8px #4a3528, 16px 8px #3a2a20, 17px 8px #4a3528,
        /* GROUND */
        3px 9px #333333, 4px 9px #3a3a3a, 5px 9px #444444, 6px 9px #3a3a3a, 7px 9px #555555,
        8px 9px #444444, 9px 9px #555555, 10px 9px #4a4a4a, 11px 9px #555555, 12px 9px #444444,
        13px 9px #555555, 14px 9px #3a3a3a, 15px 9px #444444, 16px 9px #3a3a3a, 17px 9px #333333;
}

/* Streetlamp — orange glow, metal pole */
.pixel-streetlamp {
    position: absolute;
    bottom: 10px;
    left: calc(50% + 60px);
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(3);
    image-rendering: pixelated;
    z-index: 1;
    box-shadow:
        /* lamp housing */
        1px 0px #666666, 2px 0px #777777, 3px 0px #888888, 4px 0px #777777, 5px 0px #666666,
        0px 1px #555555, 1px 1px #ffcc44, 2px 1px #ffdd66, 3px 1px #ffee88, 4px 1px #ffdd66, 5px 1px #ffcc44, 6px 1px #555555,
        0px 2px #444444, 1px 2px #ff9900, 2px 2px #ffbb33, 3px 2px #ffcc44, 4px 2px #ffbb33, 5px 2px #ff9900, 6px 2px #444444,
        1px 3px #555555, 2px 3px #ff9900, 3px 3px #ffbb33, 4px 3px #ff9900, 5px 3px #555555,
        /* neck */
        3px 4px #555555,
        /* pole */
        2px 5px #444444, 3px 5px #666666, 4px 5px #444444,
        2px 6px #555555, 3px 6px #777777, 4px 6px #555555,
        2px 7px #444444, 3px 7px #666666, 4px 7px #444444,
        2px 8px #555555, 3px 8px #777777, 4px 8px #555555,
        2px 9px #444444, 3px 9px #666666, 4px 9px #444444,
        2px 10px #555555, 3px 10px #777777, 4px 10px #555555,
        2px 11px #444444, 3px 11px #666666, 4px 11px #444444,
        2px 12px #555555, 3px 12px #777777, 4px 12px #555555,
        2px 13px #444444, 3px 13px #666666, 4px 13px #444444,
        2px 14px #555555, 3px 14px #777777, 4px 14px #555555,
        2px 15px #444444, 3px 15px #666666, 4px 15px #444444,
        2px 16px #555555, 3px 16px #777777, 4px 16px #555555,
        /* base */
        1px 17px #333333, 2px 17px #555555, 3px 17px #666666, 4px 17px #555555, 5px 17px #333333,
        0px 18px #222222, 1px 18px #444444, 2px 18px #555555, 3px 18px #666666, 4px 18px #555555, 5px 18px #444444, 6px 18px #222222;
    /* glow effect */
    animation: lampGlow 3s ease-in-out infinite;
}

@keyframes lampGlow {
    0%, 100% { filter: drop-shadow(0 -4px 8px rgba(255, 153, 0, 0.4)); }
    50% { filter: drop-shadow(0 -4px 12px rgba(255, 153, 0, 0.7)); }
}

/* Wrench — improved with open jaws, highlight/shadow handle */
.pixel-wrench {
    position: absolute;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: 2px 6px;
    transform: scale(3.5);
    image-rendering: pixelated;
    box-shadow:
        /* top jaw */
        0px 0px #777777, 1px 0px #999999, 3px 0px #999999, 4px 0px #777777,
        0px 1px #999999, 1px 1px #cccccc, 2px 1px #888888, 3px 1px #cccccc, 4px 1px #999999,
        1px 2px #aaaaaa, 2px 2px #bbbbbb, 3px 2px #aaaaaa,
        /* handle with gradient */
        1px 3px #777777, 2px 3px #999999, 3px 3px #888888,
        1px 4px #888888, 2px 4px #aaaaaa, 3px 4px #888888,
        1px 5px #777777, 2px 5px #999999, 3px 5px #777777,
        1px 6px #888888, 2px 6px #aaaaaa, 3px 6px #888888,
        1px 7px #777777, 2px 7px #999999, 3px 7px #777777,
        1px 8px #888888, 2px 8px #aaaaaa, 3px 8px #888888,
        1px 9px #777777, 2px 9px #999999, 3px 9px #777777,
        /* bottom jaw */
        1px 10px #aaaaaa, 2px 10px #bbbbbb, 3px 10px #aaaaaa,
        0px 11px #999999, 1px 11px #cccccc, 2px 11px #888888, 3px 11px #cccccc, 4px 11px #999999,
        0px 12px #777777, 1px 12px #999999, 3px 12px #999999, 4px 12px #777777;
}

/* Tire — improved with tread pattern, metallic rim, hub detail */
.pixel-tire {
    position: absolute;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: 4px 4px;
    transform: scale(3.5);
    image-rendering: pixelated;
    box-shadow:
        2px 0px #333333, 3px 0px #222222, 4px 0px #333333, 5px 0px #222222,
        1px 1px #222222, 2px 1px #444444, 3px 1px #333333, 4px 1px #444444, 5px 1px #333333, 6px 1px #222222,
        0px 2px #333333, 1px 2px #444444, 2px 2px #888888, 3px 2px #999999, 4px 2px #aaaaaa, 5px 2px #888888, 6px 2px #444444, 7px 2px #333333,
        0px 3px #222222, 1px 3px #333333, 2px 3px #999999, 3px 3px #aaaaaa, 4px 3px #555555, 5px 3px #aaaaaa, 6px 3px #333333, 7px 3px #222222,
        0px 4px #333333, 1px 4px #444444, 2px 4px #aaaaaa, 3px 4px #555555, 4px 4px #666666, 5px 4px #555555, 6px 4px #444444, 7px 4px #333333,
        0px 5px #222222, 1px 5px #333333, 2px 5px #888888, 3px 5px #aaaaaa, 4px 5px #555555, 5px 5px #999999, 6px 5px #333333, 7px 5px #222222,
        1px 6px #222222, 2px 6px #444444, 3px 6px #888888, 4px 6px #999999, 5px 6px #888888, 6px 6px #444444, 7px 6px #222222,
        2px 7px #333333, 3px 7px #222222, 4px 7px #333333, 5px 7px #222222, 6px 7px #333333;
}

/* Gear — improved 9x9 cogwheel with central hole and metallic gradient */
.pixel-gear {
    position: absolute;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: 4px 4px;
    transform: scale(3.5);
    image-rendering: pixelated;
    box-shadow:
        1px 0px #888888, 2px 0px #999999, 4px 0px #999999, 6px 0px #999999, 7px 0px #888888,
        0px 1px #888888, 1px 1px #aaaaaa, 2px 1px #bbbbbb, 3px 1px #cccccc, 4px 1px #bbbbbb, 5px 1px #cccccc, 6px 1px #bbbbbb, 7px 1px #aaaaaa, 8px 1px #888888,
        1px 2px #999999, 2px 2px #bbbbbb, 3px 2px #aaaaaa, 4px 2px #888888, 5px 2px #aaaaaa, 6px 2px #bbbbbb, 7px 2px #999999,
        0px 3px #888888, 1px 3px #bbbbbb, 2px 3px #aaaaaa, 3px 3px #555555, 4px 3px #333333, 5px 3px #555555, 6px 3px #aaaaaa, 7px 3px #bbbbbb, 8px 3px #888888,
        1px 4px #cccccc, 2px 4px #888888, 3px 4px #333333, 4px 4px #222222, 5px 4px #333333, 6px 4px #888888, 7px 4px #cccccc,
        0px 5px #888888, 1px 5px #bbbbbb, 2px 5px #aaaaaa, 3px 5px #555555, 4px 5px #333333, 5px 5px #555555, 6px 5px #aaaaaa, 7px 5px #bbbbbb, 8px 5px #888888,
        1px 6px #999999, 2px 6px #bbbbbb, 3px 6px #aaaaaa, 4px 6px #888888, 5px 6px #aaaaaa, 6px 6px #bbbbbb, 7px 6px #999999,
        0px 7px #888888, 1px 7px #aaaaaa, 2px 7px #bbbbbb, 3px 7px #cccccc, 4px 7px #bbbbbb, 5px 7px #cccccc, 6px 7px #bbbbbb, 7px 7px #aaaaaa, 8px 7px #888888,
        1px 8px #888888, 2px 8px #999999, 4px 8px #999999, 6px 8px #999999, 7px 8px #888888;
}

/* Car 3 — orange hatchback, improved with gradient + chrome + glass glint */
.pixel-car-3 {
    position: absolute;
    bottom: 32px;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(3.5) scaleX(-1);
    image-rendering: pixelated;
    will-change: transform, opacity, filter;
    animation: carDrive3 30s linear infinite;
    animation-delay: -12s;
    box-shadow:
        /* roof — sloped hatch */
        7px 0px #7a4a1a, 8px 0px #995522, 9px 0px #bb7733, 10px 0px #995522, 11px 0px #7a4a1a,
        6px 1px #7a4a1a, 7px 1px #995522, 8px 1px #bb7733, 9px 1px #cc8844, 10px 1px #bb7733, 11px 1px #995522, 12px 1px #7a4a1a,
        /* windshield — glass with glint */
        5px 2px #7a4a1a, 6px 2px #5a6a6a, 7px 2px #7a9a9a, 8px 2px #9ababa, 9px 2px #7a9a9a, 10px 2px #5a6a6a, 11px 2px #553a1a, 12px 2px #7a4a1a,
        /* body — highlight gradient */
        3px 3px #7a4a1a, 4px 3px #995522, 5px 3px #bb7733, 6px 3px #cc8844, 7px 3px #dd9955, 8px 3px #cc8844, 9px 3px #bb7733, 10px 3px #cc8844, 11px 3px #bb7733, 12px 3px #995522, 13px 3px #7a4a1a,
        /* chrome line */
        2px 4px #7a4a1a, 3px 4px #995522, 4px 4px #888888, 5px 4px #aaaaaa, 6px 4px #888888, 7px 4px #aaaaaa, 8px 4px #888888, 9px 4px #aaaaaa, 10px 4px #888888, 11px 4px #995522, 12px 4px #7a4a1a,
        /* bottom + lights */
        1px 5px #ff9900, 2px 5px #ffbb33, 3px 5px #995522, 4px 5px #7a4a1a, 5px 5px #995522, 6px 5px #7a4a1a, 7px 5px #995522, 8px 5px #7a4a1a, 9px 5px #995522, 10px 5px #7a4a1a, 11px 5px #cc2222, 12px 5px #ff4444,
        /* undercarriage */
        2px 6px #1a1a1a, 3px 6px #222222, 4px 6px #1a1a1a, 5px 6px #222222, 6px 6px #1a1a1a, 7px 6px #222222, 8px 6px #1a1a1a, 9px 6px #222222, 10px 6px #1a1a1a, 11px 6px #222222,
        /* front wheel */
        4px 7px #333333, 5px 7px #555555, 6px 7px #333333,
        /* rear wheel */
        10px 7px #333333, 11px 7px #555555, 12px 7px #333333;
}

@keyframes carDrive3 {
    /* Damaged: slowly crawls from right to garage */
    0%   { right: -80px; left: auto; filter: brightness(0.45) saturate(0.3); opacity: 1; }
    40%  { right: calc(50% - 36px); left: auto; filter: brightness(0.45) saturate(0.3); opacity: 1; }
    /* Enters garage — hides */
    44%  { right: calc(50% - 44px); left: auto; filter: brightness(0.45) saturate(0.3); opacity: 0; }
    /* Inside garage — repair */
    56%  { right: calc(50% - 52px); left: auto; opacity: 0; }
    /* Exits garage — repaired! */
    60%  { right: calc(50% - 60px); left: auto; filter: brightness(1.2) saturate(1.3); opacity: 1; }
    /* Drives away at normal speed */
    78%  { filter: brightness(1) saturate(1); }
    100% { right: calc(100% + 80px); left: auto; filter: brightness(1) saturate(1); opacity: 1; }
}

/* ========== REPAIR SPARKS ========== */
.repair-spark {
    position: absolute;
    bottom: 68px;
    left: calc(50% - 4px);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

/* Spark 1 — orange, flies up-left. Synced with Car 1 (24s) */
.repair-spark-1 {
    background: #ff9900;
    box-shadow: 0 0 4px #ff9900;
    animation: repairSpark1 24s linear infinite;
}
/* Spark 2 — yellow, flies up-right. Synced with Car 1 */
.repair-spark-2 {
    background: #ffcc00;
    box-shadow: 0 0 4px #ffcc00;
    animation: repairSpark2 24s linear infinite;
}
/* Spark 3 — white, flies up. Synced with Car 3 (30s) */
.repair-spark-3 {
    background: #cccccc;
    box-shadow: 0 0 4px #cccccc;
    animation: repairSpark3 30s linear infinite;
    animation-delay: -12s;
}
/* Spark 4 — green glow, flies up-left. Synced with Car 3 */
.repair-spark-4 {
    background: #6ade8a;
    box-shadow: 0 0 4px #6ade8a;
    animation: repairSpark4 30s linear infinite;
    animation-delay: -12s;
}

/* Sparks for Car 1 repair (46%–58% of 24s = 11–14s) */
@keyframes repairSpark1 {
    0%, 45%  { opacity: 0; transform: translate(0, 0); }
    47%      { opacity: 1; transform: translate(-8px, -12px); }
    49%      { opacity: 0; transform: translate(-14px, -22px); }
    50%      { opacity: 0; transform: translate(4px, 0); }
    52%      { opacity: 1; transform: translate(-4px, -16px); }
    54%      { opacity: 0; transform: translate(-10px, -28px); }
    55%      { opacity: 0; transform: translate(2px, 0); }
    57%      { opacity: 0.8; transform: translate(-6px, -10px); }
    58%      { opacity: 0; transform: translate(-12px, -20px); }
    59%, 100% { opacity: 0; }
}

@keyframes repairSpark2 {
    0%, 45%  { opacity: 0; transform: translate(0, 0); }
    46%      { opacity: 0; transform: translate(0, 0); }
    48%      { opacity: 1; transform: translate(10px, -14px); }
    50%      { opacity: 0; transform: translate(16px, -24px); }
    51%      { opacity: 0; transform: translate(-2px, 0); }
    53%      { opacity: 1; transform: translate(6px, -18px); }
    55%      { opacity: 0; transform: translate(12px, -30px); }
    56%      { opacity: 0; transform: translate(0, 0); }
    57.5%    { opacity: 0.8; transform: translate(8px, -12px); }
    58%      { opacity: 0; transform: translate(14px, -22px); }
    59%, 100% { opacity: 0; }
}

/* Sparks for Car 3 repair (44%–56% of 30s) */
@keyframes repairSpark3 {
    0%, 43%  { opacity: 0; transform: translate(0, 0); }
    45%      { opacity: 1; transform: translate(0, -16px); }
    47%      { opacity: 0; transform: translate(0, -28px); }
    48%      { opacity: 0; transform: translate(2px, 0); }
    50%      { opacity: 1; transform: translate(-2px, -14px); }
    52%      { opacity: 0; transform: translate(2px, -26px); }
    53%      { opacity: 0; transform: translate(0, 0); }
    55%      { opacity: 0.8; transform: translate(0, -12px); }
    56%      { opacity: 0; transform: translate(0, -24px); }
    57%, 100% { opacity: 0; }
}

@keyframes repairSpark4 {
    0%, 43%  { opacity: 0; transform: translate(0, 0); }
    44%      { opacity: 0; transform: translate(0, 0); }
    46%      { opacity: 1; transform: translate(-10px, -10px); }
    48%      { opacity: 0; transform: translate(-18px, -22px); }
    49%      { opacity: 0; transform: translate(4px, 0); }
    51%      { opacity: 1; transform: translate(-6px, -14px); }
    53%      { opacity: 0; transform: translate(-14px, -26px); }
    54%      { opacity: 0; transform: translate(-2px, 0); }
    55.5%    { opacity: 0.7; transform: translate(-8px, -8px); }
    56%      { opacity: 0; transform: translate(-16px, -18px); }
    57%, 100% { opacity: 0; }
}

/* ========== PIXEL MECHANIC (empty chat state) ========== */
.pixel-mechanic {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(3);
    image-rendering: pixelated;
    margin-right: 30px;
    margin-bottom: 45px;
    box-shadow:
        /* cap */
        3px 0px #2d7d4a, 4px 0px #4aaa6a, 5px 0px #4aaa6a, 6px 0px #2d7d4a,
        2px 1px #2d7d4a, 3px 1px #35905a, 4px 1px #4aaa6a, 5px 1px #6ade8a, 6px 1px #4aaa6a, 7px 1px #2d7d4a,
        /* face */
        3px 2px #ddddaa, 4px 2px #cccc99, 5px 2px #cccc99, 6px 2px #ddddaa,
        3px 3px #cccc99, 4px 3px #333333, 5px 3px #cccc99, 6px 3px #333333,
        3px 4px #cccc99, 4px 4px #ddddaa, 5px 4px #bb8866, 6px 4px #ddddaa,
        /* neck */
        4px 5px #cccc99, 5px 5px #cccc99,
        /* overalls */
        2px 6px #995522, 3px 6px #bb7733, 4px 6px #cc8844, 5px 6px #cc8844, 6px 6px #bb7733, 7px 6px #995522,
        2px 7px #bb7733, 3px 7px #cc8844, 4px 7px #bb7733, 5px 7px #bb7733, 6px 7px #cc8844, 7px 7px #bb7733,
        2px 8px #995522, 3px 8px #bb7733, 4px 8px #cc8844, 5px 8px #cc8844, 6px 8px #bb7733, 7px 8px #995522,
        /* arms + wrench */
        1px 7px #cccc99, 8px 7px #cccc99, 9px 7px #888888,
        1px 8px #995522, 8px 8px #888888, 9px 8px #aaaaaa,
        /* belt */
        2px 9px #444444, 3px 9px #555555, 4px 9px #666666, 5px 9px #666666, 6px 9px #555555, 7px 9px #444444,
        /* legs */
        3px 10px #995522, 4px 10px #bb7733, 5px 10px #bb7733, 6px 10px #995522,
        3px 11px #bb7733, 4px 11px #995522, 5px 11px #995522, 6px 11px #bb7733,
        3px 12px #995522, 4px 12px #bb7733, 5px 12px #bb7733, 6px 12px #995522,
        /* boots */
        2px 13px #333333, 3px 13px #444444, 4px 13px #444444, 5px 13px #444444, 6px 13px #444444, 7px 13px #333333,
        2px 14px #222222, 3px 14px #333333, 4px 14px #333333, 5px 14px #333333, 6px 14px #333333, 7px 14px #222222;
}

/* ========== PIXEL WORKSHOP (empty chat list state) ========== */
.pixel-workshop {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(2.5);
    image-rendering: pixelated;
    margin-right: 78px;
    margin-bottom: 28px;
    box-shadow:
        /* ceiling */
        0px 0px #3a3a3a, 1px 0px #333333, 2px 0px #3a3a3a, 3px 0px #333333, 4px 0px #3a3a3a, 5px 0px #333333, 6px 0px #3a3a3a, 7px 0px #333333, 8px 0px #3a3a3a, 9px 0px #333333,
        10px 0px #3a3a3a, 11px 0px #333333, 12px 0px #3a3a3a, 13px 0px #333333, 14px 0px #3a3a3a, 15px 0px #333333, 16px 0px #3a3a3a, 17px 0px #333333, 18px 0px #3a3a3a, 19px 0px #333333,
        20px 0px #3a3a3a, 21px 0px #333333, 22px 0px #3a3a3a, 23px 0px #333333, 24px 0px #3a3a3a, 25px 0px #333333, 26px 0px #3a3a3a, 27px 0px #333333, 28px 0px #3a3a3a, 29px 0px #333333,
        /* HIGY neon sign row 1 */
        0px 1px #3a2a20, 1px 1px #4a3528, 2px 1px #5a4030, 3px 1px #3a2a20, 4px 1px #4a3528,
        6px 1px #4aaa6a, 8px 1px #4aaa6a, 10px 1px #6ade8a,
        12px 1px #4aaa6a, 13px 1px #4aaa6a, 14px 1px #4aaa6a, 16px 1px #6ade8a, 18px 1px #6ade8a,
        20px 1px #4a3528, 21px 1px #3a2a20, 22px 1px #5a4030, 23px 1px #4a3528, 24px 1px #3a2a20,
        25px 1px #5a4030, 26px 1px #4a3528, 27px 1px #3a2a20, 28px 1px #5a4030, 29px 1px #4a3528,
        /* HIGY neon sign row 2 + tool hooks */
        0px 2px #4a3528, 1px 2px #5a4030, 2px 2px #3a2a20, 3px 2px #4a3528, 4px 2px #5a4030,
        6px 2px #6ade8a, 7px 2px #4aaa6a, 8px 2px #6ade8a, 10px 2px #4aaa6a,
        12px 2px #6ade8a, 14px 2px #6ade8a, 17px 2px #4aaa6a,
        20px 2px #3a2a20, 21px 2px #4a3528, 22px 2px #3a2a20, 23px 2px #5a4030,
        25px 2px #555555, 26px 2px #888888, 28px 2px #555555, 29px 2px #7a4a1a,
        /* HIGY neon sign row 3 + tools */
        0px 3px #5a4030, 1px 3px #3a2a20, 2px 3px #4a3528, 3px 3px #5a4030, 4px 3px #3a2a20,
        6px 3px #4aaa6a, 8px 3px #4aaa6a, 10px 3px #6ade8a,
        12px 3px #4aaa6a, 13px 3px #6ade8a, 14px 3px #4aaa6a, 17px 3px #6ade8a,
        20px 3px #4a3528, 21px 3px #5a4030, 22px 3px #4a3528, 23px 3px #3a2a20,
        25px 3px #888888, 26px 3px #aaaaaa, 28px 3px #888888, 29px 3px #995522,
        /* workbench + car lift */
        0px 4px #5a4030, 1px 4px #6a5038, 2px 4px #5a4030, 3px 4px #6a5038, 4px 4px #5a4030, 5px 4px #6a5038,
        10px 4px #444444, 11px 4px #555555, 12px 4px #444444, 17px 4px #444444, 18px 4px #555555, 19px 4px #444444,
        24px 4px #3a2a20, 25px 4px #4a3528, 26px 4px #5a4030, 27px 4px #3a2a20, 28px 4px #4a3528, 29px 4px #5a4030,
        /* bench front + lift pillars */
        0px 5px #4a3528, 1px 5px #5a4030, 2px 5px #4a3528, 3px 5px #5a4030, 4px 5px #4a3528, 5px 5px #5a4030,
        10px 5px #555555, 19px 5px #555555,
        24px 5px #4a3528, 25px 5px #3a2a20, 26px 5px #4a3528, 27px 5px #5a4030, 28px 5px #3a2a20, 29px 5px #4a3528,
        /* bench legs + lift base */
        0px 6px #3a2a20, 1px 6px #4a3528, 5px 6px #4a3528,
        10px 6px #555555, 19px 6px #555555,
        24px 6px #5a4030, 25px 6px #4a3528, 26px 6px #3a2a20, 27px 6px #4a3528, 28px 6px #5a4030, 29px 6px #3a2a20,
        /* floor + lift platform */
        0px 7px #333333, 1px 7px #3a3a3a, 2px 7px #333333, 3px 7px #3a3a3a, 4px 7px #333333, 5px 7px #3a3a3a, 6px 7px #333333, 7px 7px #3a3a3a, 8px 7px #333333, 9px 7px #3a3a3a,
        10px 7px #666666, 11px 7px #777777, 12px 7px #666666, 13px 7px #777777, 14px 7px #666666, 15px 7px #777777, 16px 7px #666666, 17px 7px #777777, 18px 7px #666666, 19px 7px #777777,
        20px 7px #333333, 21px 7px #3a3a3a, 22px 7px #333333, 23px 7px #3a3a3a, 24px 7px #333333, 25px 7px #3a3a3a, 26px 7px #333333, 27px 7px #3a3a3a, 28px 7px #333333, 29px 7px #3a3a3a,
        /* floor with oil stain */
        0px 8px #3a3a3a, 1px 8px #333333, 2px 8px #3a3a3a, 3px 8px #333333, 4px 8px #3a3a3a, 5px 8px #333333, 6px 8px #3a3a3a, 7px 8px #333333, 8px 8px #3a3a3a, 9px 8px #333333,
        10px 8px #3a3a3a, 11px 8px #333333, 12px 8px #3a3a3a, 13px 8px #333333, 14px 8px #2a2a1a, 15px 8px #3a3a2a,
        16px 8px #333333, 17px 8px #3a3a3a, 18px 8px #333333, 19px 8px #3a3a3a,
        20px 8px #3a3a3a, 21px 8px #333333, 22px 8px #3a3a3a, 23px 8px #333333, 24px 8px #3a3a3a, 25px 8px #333333, 26px 8px #3a3a3a, 27px 8px #333333, 28px 8px #3a3a3a, 29px 8px #333333,
        /* floor continued */
        0px 9px #333333, 1px 9px #3a3a3a, 2px 9px #333333, 3px 9px #3a3a3a, 4px 9px #333333, 5px 9px #3a3a3a, 6px 9px #333333, 7px 9px #3a3a3a, 8px 9px #333333, 9px 9px #3a3a3a,
        10px 9px #333333, 11px 9px #3a3a3a, 12px 9px #333333, 13px 9px #2a2a1a, 14px 9px #1a1a0a, 15px 9px #2a2a1a, 16px 9px #3a3a2a,
        17px 9px #333333, 18px 9px #3a3a3a, 19px 9px #333333,
        20px 9px #333333, 21px 9px #3a3a3a, 22px 9px #333333, 23px 9px #3a3a3a, 24px 9px #333333, 25px 9px #3a3a3a, 26px 9px #333333, 27px 9px #3a3a3a, 28px 9px #333333, 29px 9px #3a3a3a;
}

/* ========== LOGIN GARAGE DOOR ========== */
.pixel-login-garage {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(3);
    image-rendering: pixelated;
    margin-right: 63px;
    margin-bottom: 45px;
    box-shadow:
        /* neon sign */
        4px 0px #333333, 5px 0px #333333,
        6px 0px #4aaa6a, 7px 0px #6ade8a, 8px 0px #4aaa6a, 9px 0px #6ade8a, 10px 0px #4aaa6a, 11px 0px #6ade8a, 12px 0px #4aaa6a, 13px 0px #6ade8a,
        14px 0px #333333, 15px 0px #333333,
        6px 1px #2d7d4a, 7px 1px #4aaa6a, 8px 1px #2d7d4a, 9px 1px #4aaa6a, 10px 1px #2d7d4a, 11px 1px #4aaa6a, 12px 1px #2d7d4a, 13px 1px #4aaa6a,
        /* metal frame top */
        2px 2px #555555, 3px 2px #666666, 4px 2px #777777, 5px 2px #888888, 6px 2px #888888, 7px 2px #888888, 8px 2px #888888, 9px 2px #888888, 10px 2px #888888, 11px 2px #888888, 12px 2px #888888, 13px 2px #888888, 14px 2px #888888, 15px 2px #777777, 16px 2px #666666, 17px 2px #555555,
        /* rolling door — corrugated metal */
        2px 3px #555555, 3px 3px #888888, 4px 3px #777777, 5px 3px #888888, 6px 3px #777777, 7px 3px #888888, 8px 3px #777777, 9px 3px #888888, 10px 3px #777777, 11px 3px #888888, 12px 3px #777777, 13px 3px #888888, 14px 3px #777777, 15px 3px #888888, 16px 3px #777777, 17px 3px #555555,
        2px 4px #555555, 3px 4px #666666, 4px 4px #555555, 5px 4px #666666, 6px 4px #555555, 7px 4px #666666, 8px 4px #555555, 9px 4px #666666, 10px 4px #555555, 11px 4px #666666, 12px 4px #555555, 13px 4px #666666, 14px 4px #555555, 15px 4px #666666, 16px 4px #555555, 17px 4px #555555,
        2px 5px #555555, 3px 5px #888888, 4px 5px #777777, 5px 5px #888888, 6px 5px #777777, 7px 5px #888888, 8px 5px #777777, 9px 5px #888888, 10px 5px #777777, 11px 5px #888888, 12px 5px #777777, 13px 5px #888888, 14px 5px #777777, 15px 5px #888888, 16px 5px #777777, 17px 5px #555555,
        2px 6px #555555, 3px 6px #666666, 4px 6px #555555, 5px 6px #666666, 6px 6px #555555, 7px 6px #666666, 8px 6px #555555, 9px 6px #666666, 10px 6px #555555, 11px 6px #666666, 12px 6px #555555, 13px 6px #666666, 14px 6px #555555, 15px 6px #666666, 16px 6px #555555, 17px 6px #555555,
        2px 7px #555555, 3px 7px #888888, 4px 7px #777777, 5px 7px #888888, 6px 7px #777777, 7px 7px #888888, 8px 7px #777777, 9px 7px #888888, 10px 7px #777777, 11px 7px #888888, 12px 7px #777777, 13px 7px #888888, 14px 7px #777777, 15px 7px #888888, 16px 7px #777777, 17px 7px #555555,
        2px 8px #555555, 3px 8px #666666, 4px 8px #555555, 5px 8px #666666, 6px 8px #555555, 7px 8px #666666, 8px 8px #555555, 9px 8px #666666, 10px 8px #555555, 11px 8px #666666, 12px 8px #555555, 13px 8px #666666, 14px 8px #555555, 15px 8px #666666, 16px 8px #555555, 17px 8px #555555,
        /* door handle */
        2px 9px #555555, 3px 9px #777777, 4px 9px #666666, 5px 9px #777777, 6px 9px #666666, 7px 9px #777777, 8px 9px #666666, 9px 9px #aaaaaa, 10px 9px #cccccc, 11px 9px #666666, 12px 9px #777777, 13px 9px #666666, 14px 9px #777777, 15px 9px #666666, 16px 9px #777777, 17px 9px #555555,
        /* frame bottom */
        2px 10px #555555, 3px 10px #666666, 4px 10px #777777, 5px 10px #888888, 6px 10px #888888, 7px 10px #888888, 8px 10px #888888, 9px 10px #888888, 10px 10px #888888, 11px 10px #888888, 12px 10px #888888, 13px 10px #888888, 14px 10px #888888, 15px 10px #777777, 16px 10px #666666, 17px 10px #555555,
        /* brick side walls */
        0px 3px #3a2a20, 1px 3px #4a3528, 0px 4px #4a3528, 1px 4px #5a4030,
        0px 5px #5a4030, 1px 5px #3a2a20, 0px 6px #3a2a20, 1px 6px #4a3528,
        0px 7px #4a3528, 1px 7px #5a4030, 0px 8px #5a4030, 1px 8px #3a2a20,
        0px 9px #3a2a20, 1px 9px #4a3528, 0px 10px #4a3528, 1px 10px #5a4030,
        18px 3px #4a3528, 19px 3px #3a2a20, 18px 4px #5a4030, 19px 4px #4a3528,
        18px 5px #3a2a20, 19px 5px #5a4030, 18px 6px #4a3528, 19px 6px #3a2a20,
        18px 7px #5a4030, 19px 7px #4a3528, 18px 8px #3a2a20, 19px 8px #5a4030,
        18px 9px #4a3528, 19px 9px #3a2a20, 18px 10px #5a4030, 19px 10px #4a3528,
        /* ground + curb */
        0px 11px #444444, 1px 11px #555555, 2px 11px #444444, 3px 11px #555555, 4px 11px #444444, 5px 11px #555555, 6px 11px #444444, 7px 11px #555555, 8px 11px #444444, 9px 11px #555555,
        10px 11px #444444, 11px 11px #555555, 12px 11px #444444, 13px 11px #555555, 14px 11px #444444, 15px 11px #555555, 16px 11px #444444, 17px 11px #555555, 18px 11px #444444, 19px 11px #555555,
        0px 12px #555555, 1px 12px #666666, 2px 12px #555555, 3px 12px #666666, 4px 12px #555555, 5px 12px #666666, 6px 12px #555555, 7px 12px #666666, 8px 12px #555555, 9px 12px #666666,
        10px 12px #555555, 11px 12px #666666, 12px 12px #555555, 13px 12px #666666, 14px 12px #555555, 15px 12px #666666, 16px 12px #555555, 17px 12px #666666, 18px 12px #555555, 19px 12px #666666,
        0px 13px #333333, 1px 13px #3a3a3a, 2px 13px #333333, 3px 13px #3a3a3a, 4px 13px #333333, 5px 13px #3a3a3a, 6px 13px #333333, 7px 13px #3a3a3a, 8px 13px #333333, 9px 13px #3a3a3a,
        10px 13px #333333, 11px 13px #3a3a3a, 12px 13px #333333, 13px 13px #3a3a3a, 14px 13px #333333, 15px 13px #3a3a3a, 16px 13px #333333, 17px 13px #3a3a3a, 18px 13px #333333, 19px 13px #3a3a3a;
}

/* ========== BROKEN CAR (404 page) ========== */
.pixel-broken-car {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(3);
    image-rendering: pixelated;
    margin-right: 63px;
    margin-bottom: 36px;
    box-shadow:
        /* steam wisps */
        5px 0px #aaaaaa, 7px 0px #888888,
        4px 1px #888888, 6px 1px #999999, 8px 1px #777777,
        5px 2px #777777, 7px 2px #888888,
        /* popped hood */
        3px 3px #3a5a3a, 4px 3px #4a6a4a, 5px 3px #3a5a3a,
        4px 4px #4a6a4a, 5px 4px #5a7a5a, 6px 4px #4a6a4a,
        /* roof */
        9px 3px #3a5a3a, 10px 3px #4a6a4a, 11px 3px #5a7a5a, 12px 3px #4a6a4a, 13px 3px #3a5a3a,
        8px 4px #3a5a3a, 9px 4px #4a6a4a, 10px 4px #5a7a5a, 11px 4px #5a7a5a, 12px 4px #4a6a4a, 13px 4px #3a5a3a, 14px 4px #3a5a3a,
        /* windshield */
        7px 5px #3a5a3a, 8px 5px #3a5a5a, 9px 5px #5a7a7a, 10px 5px #6a8a8a, 11px 5px #5a7a7a, 12px 5px #3a5a5a, 13px 5px #3a5a3a, 14px 5px #3a5a3a,
        /* body — desaturated green */
        3px 6px #3a5a3a, 4px 6px #4a6a4a, 5px 6px #5a7a5a, 6px 6px #4a6a4a, 7px 6px #5a7a5a, 8px 6px #4a6a4a, 9px 6px #5a7a5a, 10px 6px #4a6a4a, 11px 6px #5a7a5a, 12px 6px #4a6a4a, 13px 6px #5a7a5a, 14px 6px #4a6a4a, 15px 6px #3a5a3a,
        /* bottom + dim lights */
        2px 7px #3a5a3a, 3px 7px #997733, 4px 7px #4a6a4a, 5px 7px #3a5a3a, 6px 7px #4a6a4a, 7px 7px #3a5a3a, 8px 7px #4a6a4a, 9px 7px #3a5a3a, 10px 7px #4a6a4a, 11px 7px #3a5a3a, 12px 7px #4a6a4a, 13px 7px #3a5a3a, 14px 7px #993333, 15px 7px #3a5a3a,
        /* undercarriage */
        3px 8px #1a1a1a, 4px 8px #222222, 5px 8px #1a1a1a, 6px 8px #222222, 7px 8px #1a1a1a, 8px 8px #222222, 9px 8px #1a1a1a, 10px 8px #222222, 11px 8px #1a1a1a, 12px 8px #222222, 13px 8px #1a1a1a, 14px 8px #222222,
        /* normal front wheel */
        4px 9px #333333, 5px 9px #444444, 6px 9px #555555, 7px 9px #444444,
        4px 10px #444444, 5px 10px #555555, 6px 10px #555555, 7px 10px #444444,
        /* flat rear wheel */
        11px 9px #222222, 12px 9px #333333, 13px 9px #333333, 14px 9px #222222,
        10px 10px #222222, 11px 10px #333333, 12px 10px #444444, 13px 10px #333333, 14px 10px #222222, 15px 10px #222222,
        /* scattered parts */
        1px 10px #555555, 2px 11px #666666, 17px 10px #555555, 18px 11px #444444,
        /* warning triangle */
        18px 7px #ff4444,
        17px 8px #ff9900, 18px 8px #ff4444, 19px 8px #ff9900,
        17px 9px #ff4444, 18px 9px #ffcc00, 19px 9px #ff4444,
        16px 10px #ff9900, 17px 10px #ff4444, 18px 10px #ff4444, 19px 10px #ff9900,
        /* road */
        0px 11px #333333, 1px 11px #3a3a3a, 3px 11px #333333, 4px 11px #3a3a3a, 5px 11px #333333, 6px 11px #3a3a3a, 7px 11px #333333, 8px 11px #3a3a3a, 9px 11px #333333, 10px 11px #3a3a3a,
        11px 11px #333333, 12px 11px #3a3a3a, 13px 11px #333333, 14px 11px #3a3a3a, 15px 11px #333333, 16px 11px #3a3a3a, 19px 11px #333333;
}

/* ========== TYPING MECHANIC (animated, replaces typing dots) ========== */
.typing-mechanic {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(2);
    image-rendering: pixelated;
    margin-right: 18px;
    margin-bottom: 14px;
    animation: typingHammer 1.2s steps(2) infinite;
    box-shadow:
        2px 0px #2d7d4a, 3px 0px #4aaa6a, 4px 0px #2d7d4a,
        2px 1px #ddddaa, 3px 1px #333333, 4px 1px #ddddaa,
        1px 2px #bb7733, 2px 2px #cc8844, 3px 2px #cc8844, 4px 2px #bb7733, 5px 2px #995522,
        0px 3px #cccc99, 1px 3px #bb7733, 2px 3px #cc8844, 3px 3px #cc8844, 4px 3px #bb7733, 5px 3px #cccc99, 6px 3px #7a4a1a, 7px 3px #888888,
        6px 2px #888888, 7px 2px #aaaaaa,
        2px 4px #995522, 3px 4px #bb7733, 4px 4px #995522,
        1px 5px #333333, 2px 5px #444444, 3px 5px #444444, 4px 5px #444444, 5px 5px #333333;
}

@keyframes typingHammer {
    0%, 49.9% {
        box-shadow:
            2px 0px #2d7d4a, 3px 0px #4aaa6a, 4px 0px #2d7d4a,
            2px 1px #ddddaa, 3px 1px #333333, 4px 1px #ddddaa,
            1px 2px #bb7733, 2px 2px #cc8844, 3px 2px #cc8844, 4px 2px #bb7733, 5px 2px #995522,
            0px 3px #cccc99, 1px 3px #bb7733, 2px 3px #cc8844, 3px 3px #cc8844, 4px 3px #bb7733, 5px 3px #cccc99, 6px 3px #7a4a1a, 7px 3px #888888,
            6px 2px #888888, 7px 2px #aaaaaa,
            2px 4px #995522, 3px 4px #bb7733, 4px 4px #995522,
            1px 5px #333333, 2px 5px #444444, 3px 5px #444444, 4px 5px #444444, 5px 5px #333333;
    }
    50%, 100% {
        box-shadow:
            2px 0px #2d7d4a, 3px 0px #4aaa6a, 4px 0px #2d7d4a,
            2px 1px #ddddaa, 3px 1px #333333, 4px 1px #ddddaa,
            1px 2px #bb7733, 2px 2px #cc8844, 3px 2px #cc8844, 4px 2px #bb7733, 5px 2px #995522,
            0px 3px #cccc99, 1px 3px #bb7733, 2px 3px #cc8844, 3px 3px #cc8844, 4px 3px #bb7733, 5px 3px #cccc99, 6px 3px #7a4a1a,
            6px 4px #888888, 7px 4px #aaaaaa,
            2px 4px #995522, 3px 4px #bb7733, 4px 4px #995522,
            1px 5px #333333, 2px 5px #444444, 3px 5px #444444, 4px 5px #444444, 5px 5px #333333,
            7px 3px #ff9900, 8px 4px #ffcc00;
    }
}

/* ========== LOADING TIRE (spinning) ========== */
.loading-tire {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: 4px 4px;
    transform: scale(3);
    image-rendering: pixelated;
    animation: spinTire 1s linear infinite;
    box-shadow:
        2px 0px #333333, 3px 0px #222222, 4px 0px #333333, 5px 0px #222222,
        1px 1px #222222, 2px 1px #444444, 3px 1px #333333, 4px 1px #444444, 5px 1px #333333, 6px 1px #222222,
        0px 2px #333333, 1px 2px #444444, 2px 2px #888888, 3px 2px #999999, 4px 2px #aaaaaa, 5px 2px #888888, 6px 2px #444444, 7px 2px #333333,
        0px 3px #222222, 1px 3px #333333, 2px 3px #999999, 3px 3px #aaaaaa, 4px 3px #555555, 5px 3px #aaaaaa, 6px 3px #333333, 7px 3px #222222,
        0px 4px #333333, 1px 4px #444444, 2px 4px #aaaaaa, 3px 4px #555555, 4px 4px #666666, 5px 4px #555555, 6px 4px #444444, 7px 4px #333333,
        0px 5px #222222, 1px 5px #333333, 2px 5px #888888, 3px 5px #aaaaaa, 4px 5px #555555, 5px 5px #999999, 6px 5px #333333, 7px 5px #222222,
        1px 6px #222222, 2px 6px #444444, 3px 6px #888888, 4px 6px #999999, 5px 6px #888888, 6px 6px #444444, 7px 6px #222222,
        2px 7px #333333, 3px 7px #222222, 4px 7px #333333, 5px 7px #222222, 6px 7px #333333;
}

@keyframes spinTire {
    from { transform: scale(3) rotate(0deg); }
    to   { transform: scale(3) rotate(360deg); }
}

/* ========== MICRO-ANIMATIONS FOR STATIC ARTS ========== */

/* Login garage: neon sign flicker */
.pixel-login-garage {
    animation: neonFlicker 4s ease-in-out infinite;
}
@keyframes neonFlicker {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(var(--accent-bright-rgb), 0.3)); }
    10% { filter: brightness(1.15) drop-shadow(0 0 10px rgba(var(--accent-bright-rgb), 0.6)); }
    12% { filter: brightness(0.9) drop-shadow(0 0 4px rgba(var(--accent-bright-rgb), 0.2)); }
    14% { filter: brightness(1.1) drop-shadow(0 0 8px rgba(var(--accent-bright-rgb), 0.5)); }
    50% { filter: brightness(1) drop-shadow(0 0 6px rgba(var(--accent-bright-rgb), 0.3)); }
    70% { filter: brightness(1.05) drop-shadow(0 0 8px rgba(var(--accent-bright-rgb), 0.4)); }
    72% { filter: brightness(0.85) drop-shadow(0 0 3px rgba(var(--accent-bright-rgb), 0.15)); }
    74% { filter: brightness(1.1) drop-shadow(0 0 9px rgba(var(--accent-bright-rgb), 0.5)); }
}

/* 404 broken car: smoke puffs */
.pixel-broken-car {
    animation: smokeShake 5s ease-in-out infinite;
}
@keyframes smokeShake {
    0%, 100% { filter: none; transform: scale(3); }
    15% { transform: scale(3) translateX(0.3px); }
    30% { transform: scale(3) translateX(-0.3px); }
    45% { transform: scale(3) translateX(0.2px); }
    60% { transform: scale(3); }
}

/* Workshop: gentle tool bob */
.pixel-workshop {
    animation: workshopBreathe 6s ease-in-out infinite;
}
@keyframes workshopBreathe {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.05) drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.2)); }
}

/* ========== NEW PIXEL ART: PROFILE GARAGE ========== */
/* Small garage silhouette for user profile page */
.pixel-profile-garage {
    display: block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(2.5);
    image-rendering: pixelated;
    margin: 0 auto 30px;
    position: relative;
    left: -16px;
    box-shadow:
        /* roof peak */
        5px 0px #1a472a, 6px 0px #2d7d4a, 7px 0px #2d7d4a, 8px 0px #1a472a,
        4px 1px #1a472a, 5px 1px #2d7d4a, 6px 1px #4aaa6a, 7px 1px #4aaa6a, 8px 1px #2d7d4a, 9px 1px #1a472a,
        3px 2px #1a472a, 4px 2px #2d7d4a, 5px 2px #4aaa6a, 6px 2px #6ade8a, 7px 2px #6ade8a, 8px 2px #4aaa6a, 9px 2px #2d7d4a, 10px 2px #1a472a,
        /* walls */
        3px 3px #333333, 4px 3px #444444, 5px 3px #555555, 6px 3px #666666, 7px 3px #666666, 8px 3px #555555, 9px 3px #444444, 10px 3px #333333,
        3px 4px #333333, 4px 4px #555555, 5px 4px #666666, 6px 4px #777777, 7px 4px #777777, 8px 4px #666666, 9px 4px #555555, 10px 4px #333333,
        3px 5px #333333, 4px 5px #444444, 5px 5px #555555, 6px 5px #666666, 7px 5px #666666, 8px 5px #555555, 9px 5px #444444, 10px 5px #333333,
        /* garage door */
        3px 6px #222222, 4px 6px #888888, 5px 6px #999999, 6px 6px #aaaaaa, 7px 6px #aaaaaa, 8px 6px #999999, 9px 6px #888888, 10px 6px #222222,
        3px 7px #222222, 4px 7px #777777, 5px 7px #888888, 6px 7px #222222, 7px 7px #222222, 8px 7px #888888, 9px 7px #777777, 10px 7px #222222,
        3px 8px #222222, 4px 8px #888888, 5px 8px #999999, 6px 8px #aaaaaa, 7px 8px #aaaaaa, 8px 8px #999999, 9px 8px #888888, 10px 8px #222222,
        /* ground */
        2px 9px #1a1a1a, 3px 9px #333333, 4px 9px #444444, 5px 9px #333333, 6px 9px #444444, 7px 9px #333333, 8px 9px #444444, 9px 9px #333333, 10px 9px #444444, 11px 9px #1a1a1a;
    animation: profileGaragePulse 5s ease-in-out infinite;
}

@keyframes profileGaragePulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.08) drop-shadow(0 2px 6px rgba(var(--accent-rgb), 0.25)); }
}

/* ========== NEW PIXEL ART: SETTINGS GEAR ========== */
/* Rotating gear icon for settings page */
.pixel-settings-gear {
    display: block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: 6px 6px;
    transform: scale(3);
    image-rendering: pixelated;
    margin: 0 auto 40px;
    position: relative;
    left: -18px;
    animation: settingsGearSpin 8s linear infinite;
    box-shadow:
        /* top tooth */
        5px 0px #4aaa6a, 6px 0px #6ade8a, 7px 0px #4aaa6a,
        /* top-right tooth */
        9px 1px #4aaa6a, 10px 2px #6ade8a,
        /* right tooth */
        11px 5px #4aaa6a, 11px 6px #6ade8a, 11px 7px #4aaa6a,
        /* bottom-right tooth */
        10px 10px #4aaa6a, 9px 11px #6ade8a,
        /* bottom tooth */
        5px 12px #4aaa6a, 6px 12px #6ade8a, 7px 12px #4aaa6a,
        /* bottom-left tooth */
        2px 11px #4aaa6a, 3px 10px #6ade8a,
        /* left tooth */
        1px 5px #4aaa6a, 1px 6px #6ade8a, 1px 7px #4aaa6a,
        /* top-left tooth */
        2px 1px #4aaa6a, 3px 2px #6ade8a,
        /* outer ring */
        4px 1px #2d7d4a, 5px 1px #4aaa6a, 6px 1px #4aaa6a, 7px 1px #4aaa6a, 8px 1px #2d7d4a,
        3px 2px #2d7d4a, 9px 2px #2d7d4a,
        2px 3px #2d7d4a, 10px 3px #2d7d4a,
        1px 4px #2d7d4a, 11px 4px #2d7d4a,
        1px 8px #2d7d4a, 11px 8px #2d7d4a,
        2px 9px #2d7d4a, 10px 9px #2d7d4a,
        3px 10px #2d7d4a, 9px 10px #2d7d4a,
        4px 11px #2d7d4a, 5px 11px #4aaa6a, 6px 11px #4aaa6a, 7px 11px #4aaa6a, 8px 11px #2d7d4a,
        /* inner ring */
        4px 3px #1a472a, 5px 3px #2d7d4a, 6px 3px #2d7d4a, 7px 3px #2d7d4a, 8px 3px #1a472a,
        3px 4px #1a472a, 9px 4px #1a472a,
        3px 5px #2d7d4a, 9px 5px #2d7d4a,
        3px 6px #2d7d4a, 9px 6px #2d7d4a,
        3px 7px #2d7d4a, 9px 7px #2d7d4a,
        3px 8px #1a472a, 9px 8px #1a472a,
        4px 9px #1a472a, 5px 9px #2d7d4a, 6px 9px #2d7d4a, 7px 9px #2d7d4a, 8px 9px #1a472a,
        /* center hole */
        5px 5px #0a1410, 6px 5px #0f1f14, 7px 5px #0a1410,
        5px 6px #0f1f14, 6px 6px #1a472a, 7px 6px #0f1f14,
        5px 7px #0a1410, 6px 7px #0f1f14, 7px 7px #0a1410;
}

@keyframes settingsGearSpin {
    from { transform: scale(3) rotate(0deg); }
    to   { transform: scale(3) rotate(360deg); }
}

/* ========== NEW PIXEL ART: CREATE CAR ========== */
/* Car being assembled — for create chat page */
.pixel-create-car {
    display: block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(3);
    image-rendering: pixelated;
    margin: 0 auto 30px;
    position: relative;
    left: -24px;
    animation: carAssemble 4s ease-in-out infinite;
    box-shadow:
        /* car body outline */
        4px 0px #2d7d4a, 5px 0px #4aaa6a, 6px 0px #4aaa6a, 7px 0px #2d7d4a,
        3px 1px #2d7d4a, 4px 1px #4aaa6a, 5px 1px #6ade8a, 6px 1px #6ade8a, 7px 1px #4aaa6a, 8px 1px #2d7d4a,
        /* windshield */
        2px 2px #1a472a, 3px 2px #3a6a5a, 4px 2px #5a9a8a, 5px 2px #5a9a8a, 6px 2px #3a6a5a, 7px 2px #4aaa6a, 8px 2px #4aaa6a, 9px 2px #1a472a,
        /* main body */
        1px 3px #1a472a, 2px 3px #2d7d4a, 3px 3px #4aaa6a, 4px 3px #6ade8a, 5px 3px #6ade8a, 6px 3px #4aaa6a, 7px 3px #6ade8a, 8px 3px #4aaa6a, 9px 3px #2d7d4a, 10px 3px #1a472a,
        /* chrome + lights */
        0px 4px #ff9900, 1px 4px #888888, 2px 4px #aaaaaa, 3px 4px #888888, 4px 4px #aaaaaa, 5px 4px #888888, 6px 4px #aaaaaa, 7px 4px #888888, 8px 4px #aaaaaa, 9px 4px #888888, 10px 4px #cc2222, 11px 4px #ff4444,
        /* undercarriage */
        2px 5px #222222, 3px 5px #1a1a1a, 4px 5px #222222, 5px 5px #1a1a1a, 6px 5px #222222, 7px 5px #1a1a1a, 8px 5px #222222, 9px 5px #1a1a1a,
        /* wheels */
        3px 6px #333333, 4px 6px #555555, 5px 6px #333333,
        8px 6px #333333, 9px 6px #555555, 10px 6px #333333,
        /* floating parts (wrench) */
        14px 1px #888888, 15px 1px #aaaaaa,
        14px 2px #aaaaaa, 15px 2px #888888, 16px 2px #aaaaaa,
        15px 3px #888888,
        15px 4px #aaaaaa,
        /* floating bolt */
        14px 5px #ffcc44, 15px 5px #ffdd66, 14px 6px #ffdd66, 15px 6px #ffcc44;
}

@keyframes carAssemble {
    0%, 100% { filter: brightness(1); }
    25% { filter: brightness(1.1) drop-shadow(0 0 6px rgba(var(--accent-bright-rgb), 0.3)); }
    50% { filter: brightness(1); }
    75% { filter: brightness(1.05) drop-shadow(0 0 4px rgba(255, 153, 0, 0.3)); }
}

/* ========== NEW PIXEL ART: INVITE TICKET ========== */
/* Pixel envelope/ticket for join by invite page */
.pixel-invite-ticket {
    display: block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(3);
    image-rendering: pixelated;
    margin: 0 auto 24px;
    position: relative;
    left: -18px;
    animation: ticketFloat 3s ease-in-out infinite;
    box-shadow:
        /* envelope body */
        1px 0px #2d7d4a, 2px 0px #4aaa6a, 3px 0px #4aaa6a, 4px 0px #4aaa6a, 5px 0px #4aaa6a, 6px 0px #4aaa6a, 7px 0px #4aaa6a, 8px 0px #4aaa6a, 9px 0px #4aaa6a, 10px 0px #4aaa6a, 11px 0px #4aaa6a, 12px 0px #2d7d4a,
        0px 1px #1a472a, 1px 1px #2d7d4a, 2px 1px #4aaa6a, 3px 1px #6ade8a, 4px 1px #4aaa6a, 5px 1px #4aaa6a, 6px 1px #4aaa6a, 7px 1px #4aaa6a, 8px 1px #4aaa6a, 9px 1px #6ade8a, 10px 1px #4aaa6a, 11px 1px #2d7d4a, 12px 1px #1a472a,
        0px 2px #1a472a, 1px 2px #1a472a, 2px 2px #2d7d4a, 3px 2px #4aaa6a, 4px 2px #6ade8a, 5px 2px #4aaa6a, 6px 2px #4aaa6a, 7px 2px #4aaa6a, 8px 2px #6ade8a, 9px 2px #4aaa6a, 10px 2px #2d7d4a, 11px 2px #1a472a, 12px 2px #1a472a,
        0px 3px #1a472a, 1px 3px #1a472a, 2px 3px #1a472a, 3px 3px #2d7d4a, 4px 3px #4aaa6a, 5px 3px #6ade8a, 6px 3px #6ade8a, 7px 3px #6ade8a, 8px 3px #4aaa6a, 9px 3px #2d7d4a, 10px 3px #1a472a, 11px 3px #1a472a, 12px 3px #1a472a,
        0px 4px #1a472a, 1px 4px #1a472a, 2px 4px #1a472a, 3px 4px #1a472a, 4px 4px #2d7d4a, 5px 4px #4aaa6a, 6px 4px #6ade8a, 7px 4px #4aaa6a, 8px 4px #2d7d4a, 9px 4px #1a472a, 10px 4px #1a472a, 11px 4px #1a472a, 12px 4px #1a472a,
        0px 5px #1a472a, 1px 5px #1a472a, 2px 5px #1a472a, 3px 5px #1a472a, 4px 5px #1a472a, 5px 5px #2d7d4a, 6px 5px #4aaa6a, 7px 5px #2d7d4a, 8px 5px #1a472a, 9px 5px #1a472a, 10px 5px #1a472a, 11px 5px #1a472a, 12px 5px #1a472a,
        /* bottom edge */
        0px 6px #0f1f14, 1px 6px #1a472a, 2px 6px #1a472a, 3px 6px #1a472a, 4px 6px #1a472a, 5px 6px #1a472a, 6px 6px #2d7d4a, 7px 6px #1a472a, 8px 6px #1a472a, 9px 6px #1a472a, 10px 6px #1a472a, 11px 6px #1a472a, 12px 6px #0f1f14,
        /* diamond seal */
        6px 2px #ffcc44, 5px 3px #ff9900, 6px 3px #ffdd66, 7px 3px #ff9900, 6px 4px #ffcc44;
}

@keyframes ticketFloat {
    0%, 100% { transform: scale(3) translateY(0px); }
    50% { transform: scale(3) translateY(-3px); }
}

/* ========== NEW PIXEL ART: SEND SPARK ========== */
/* Spark effect when sending a message */
.pixel-send-spark {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: center;
    transform: scale(2);
    image-rendering: pixelated;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    box-shadow:
        2px 0px #ffcc44, 4px 0px #ffcc44,
        0px 2px #ff9900, 3px 1px #ffdd66, 6px 2px #ff9900,
        1px 3px #ffcc44, 3px 3px #ffee88, 5px 3px #ffcc44,
        0px 4px #ff9900, 3px 5px #ffdd66, 6px 4px #ff9900,
        2px 6px #ffcc44, 4px 6px #ffcc44;
}

.pixel-send-spark.active {
    animation: sparkBurst 0.5s ease-out forwards;
}

@keyframes sparkBurst {
    0% { opacity: 1; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(2.5); }
    100% { opacity: 0; transform: scale(3); }
}

/* ========== NEW PIXEL ART: DATE WRENCH DIVIDER ========== */
/* Small wrenches for date dividers */
.pixel-date-wrench {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(1.5);
    image-rendering: pixelated;
    margin-right: 10px;
    margin-bottom: 6px;
    vertical-align: middle;
    box-shadow:
        0px 0px #5a7a5a, 1px 0px #8ab88a, 2px 0px #5a7a5a,
        1px 1px #5a7a5a,
        1px 2px #8ab88a,
        1px 3px #5a7a5a,
        0px 4px #5a7a5a, 1px 4px #8ab88a, 2px 4px #5a7a5a;
}

.pixel-date-wrench-right {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(1.5) scaleX(-1);
    image-rendering: pixelated;
    margin-left: 10px;
    margin-bottom: 6px;
    vertical-align: middle;
    box-shadow:
        0px 0px #5a7a5a, 1px 0px #8ab88a, 2px 0px #5a7a5a,
        1px 1px #5a7a5a,
        1px 2px #8ab88a,
        1px 3px #5a7a5a,
        0px 4px #5a7a5a, 1px 4px #8ab88a, 2px 4px #5a7a5a;
}

/* ========== NEW PIXEL ART: ONLINE LAMP ========== */
/* Green pixel lamp for online indicator */
.pixel-online-lamp {
    display: inline-block;
    width: 1px;
    height: 1px;
    background: transparent;
    transform-origin: top left;
    transform: scale(2);
    image-rendering: pixelated;
    margin-right: 8px;
    margin-bottom: 6px;
    animation: onlineLampPulse 2s ease-in-out infinite;
    box-shadow:
        1px 0px #2d7d4a, 2px 0px #4aaa6a, 3px 0px #2d7d4a,
        0px 1px #2d7d4a, 1px 1px #4aff6a, 2px 1px #6ade8a, 3px 1px #4aff6a, 4px 1px #2d7d4a,
        0px 2px #4aaa6a, 1px 2px #6ade8a, 2px 2px #aaffaa, 3px 2px #6ade8a, 4px 2px #4aaa6a,
        0px 3px #2d7d4a, 1px 3px #4aff6a, 2px 3px #6ade8a, 3px 3px #4aff6a, 4px 3px #2d7d4a,
        1px 4px #2d7d4a, 2px 4px #4aaa6a, 3px 4px #2d7d4a;
}

@keyframes onlineLampPulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(74, 255, 106, 0.5)); }
    50% { filter: drop-shadow(0 0 8px rgba(74, 255, 106, 0.9)); }
}

/* ===== SMOOTH PAGE TRANSITION ===== */
@keyframes pageFadeIn {
    from { filter: brightness(0); }
    to   { filter: brightness(1); }
}

body {
    animation: pageFadeIn 0.2s ease-out;
}

/* === THEME HUE SHIFT FOR PIXEL ART === */
.pixel-profile-garage,
.pixel-settings-gear,
.pixel-create-car,
.pixel-invite-ticket,
.pixel-date-wrench,
.pixel-date-wrench-right,
.pixel-online-lamp,
.loading-tire,
.pixel-send-spark,
.typing-mechanic,
.pixel-float,
.pixel-scene,
.pixel-mechanic,
.pixel-workshop,
.pixel-login-garage,
.pixel-broken-car {
    filter: hue-rotate(var(--theme-hue-shift));
}

/* === THEME PICKER UI === */
.theme-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.theme-preset-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 2px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.theme-preset-option input[type="radio"] {
    display: none;
}

.theme-preset-option.selected {
    border-color: var(--accent-bright);
    background: var(--bg-hover);
}

.theme-preview-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.theme-swatch-green  { background: linear-gradient(135deg, #2d7d4a, #6ade8a); }
.theme-swatch-blue   { background: linear-gradient(135deg, #2a6d9e, #6ac0f0); }
.theme-swatch-purple { background: linear-gradient(135deg, #6a3d9e, #b080f0); }
.theme-swatch-amber  { background: linear-gradient(135deg, #9e7a2a, #f0c860); }
.theme-swatch-red    { background: linear-gradient(135deg, #9e3a3a, #f06a6a); }
.theme-swatch-custom { background: conic-gradient(from 0deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); }

.theme-preset-name {
    font-size: 7px;
    font-family: 'Press Start 2P', monospace;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.4;
}

.theme-preset-option.selected .theme-preset-name {
    color: var(--accent-bright);
}

.custom-theme-picker {
    margin-top: 8px;
    margin-bottom: 8px;
}

.hue-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 24px;
    border-radius: 4px;
    background: linear-gradient(to right,
        hsl(0,70%,50%), hsl(30,70%,50%), hsl(60,70%,50%),
        hsl(90,70%,50%), hsl(120,70%,50%), hsl(150,70%,50%),
        hsl(180,70%,50%), hsl(210,70%,50%), hsl(240,70%,50%),
        hsl(270,70%,50%), hsl(300,70%,50%), hsl(330,70%,50%),
        hsl(360,70%,50%));
    outline: none;
    margin: 8px 0;
    border: 1px solid var(--border);
}

.hue-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 28px;
    border-radius: 3px;
    background: var(--text-primary);
    border: 2px solid #000;
    cursor: pointer;
}

.hue-slider::-moz-range-thumb {
    width: 12px;
    height: 28px;
    border-radius: 3px;
    background: var(--text-primary);
    border: 2px solid #000;
    cursor: pointer;
}

.hue-preview-strip {
    height: 8px;
    border-radius: 2px;
    margin-top: 4px;
}

/* === HIDE PIXEL ART MODE (video scenes only) === */
html.hide-pixel-art .pixel-video-scene {
    display: none !important;
}

/* === TONE SLIDER (lightness) === */
.tone-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #111 0%, #444 50%, #888 100%);
    outline: none;
    margin: 8px 0;
}
.tone-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 2px solid #000;
    cursor: pointer;
}
.tone-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 2px solid #000;
    cursor: pointer;
}