/* ============================================================
   ChatV4 Skin — Professional Messenger UI
   Scoped to .chat-page-v4 — non-breaking overlay on chatv2 base
   Battery-optimized: minimal GPU layers, no continuous animations
   ============================================================ */

/* ── Hide particle canvas (main source of battery drain) ─── */
.chat-page-v4 #particle-canvas {
    display: none !important;
}

/* ── CSS Variables (v4 palette) ─────────────────────────── */
.chat-page-v4 {
    --v4-bg: #0c0f1a;
    --v4-bg2: #111520;
    --v4-surf: #181d2e;
    --v4-surf2: #1f2540;
    --v4-border: rgba(255, 255, 255, 0.07);
    --v4-border-h: rgba(99, 102, 241, 0.45);
    --v4-accent: #6366f1;
    --v4-accent-d: #4f46e5;
    --v4-text: #e4e8f5;
    --v4-dim: #7c87a6;
    --v4-muted: #3d4863;
    --v4-own-bg: #4f46e5;
    --v4-own-end: #4338ca;
    --v4-their-bg: #1a2035;
    --v4-gold: #f59e0b;
    --v4-gold-s: rgba(245, 158, 11, 0.55);
    --v4-gold-soft: rgba(245, 158, 11, 0.12);
    --v4-green: #10b981;
    --v4-red: #ef4444;
    --v4-radius: 18px;
}

/* Light mode palette */
body.light-mode .chat-page-v4 {
    --v4-bg: #f0f2f8;
    --v4-bg2: #e6e9f3;
    --v4-surf: #ffffff;
    --v4-surf2: #f0f2f8;
    --v4-border: rgba(0, 0, 0, 0.08);
    --v4-border-h: rgba(99, 102, 241, 0.4);
    --v4-text: #1a2040;
    --v4-dim: #4b5577;
    --v4-muted: #8896bb;
    --v4-own-bg: #4f46e5;
    --v4-own-end: #4338ca;
    --v4-their-bg: #ffffff;
    --v4-gold: #d97706;
    --v4-gold-s: rgba(217, 119, 6, 0.5);
    --v4-gold-soft: rgba(217, 119, 6, 0.1);
}

/* ── App shell ───────────────────────────────────────────── */
.chat-page-v4 .chat-app-wrapper {
    background: var(--v4-bg);
    border-color: var(--v4-border);
    box-shadow: none;
}

/* ── Header ──────────────────────────────────────────────── */
.chat-page-v4 .v2-header {
    background: var(--v4-bg2);
    border-bottom-color: var(--v4-border);
    /* Single lightweight blur only on header — acceptable cost */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    height: 62px;
}

.chat-page-v4 .v2-header-back {
    color: var(--v4-accent);
}

.chat-page-v4 .v2-header-back:hover {
    background: rgba(99, 102, 241, 0.12);
}

.chat-page-v4 .v2-header-info {
    gap: 10px;
}

.chat-page-v4 .v2-header-avatar,
.chat-page-v4 .v2-header-avatar-fallback {
    border-radius: 50%;
    background: var(--v4-surf2);
    border: 2px solid var(--v4-border);
}

.chat-page-v4 .v2-header-name-text {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--v4-text);
}

.chat-page-v4 .v2-header-status {
    color: var(--v4-dim);
    font-size: 12px;
}

.chat-page-v4 .v2-header-status .online {
    color: var(--v4-green);
}

.chat-page-v4 .v2-header-status .offline {
    color: var(--v4-red);
}

/* Premium partner header */
.chat-page-v4 .v2-header-info.is-partner-premium .v2-header-name-text {
    color: #fef3c7;
    text-shadow: 0 0 12px var(--v4-gold-s);
}

.chat-page-v4 .v2-header-info.is-partner-premium {
    border: none;
    box-shadow: none;
}

.chat-page-v4 .v2-header-premium {
    background: var(--v4-gold-soft);
    border-color: var(--v4-gold-s);
    color: #fef3c7;
    font-size: 0.6rem;
}

/* Header action buttons */
.chat-page-v4 .v2-header-btn {
    border-radius: 10px;
    border-color: var(--v4-border);
    background: var(--v4-surf);
    color: var(--v4-dim);
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    /* No transform on hover — saves GPU */
}

.chat-page-v4 .v2-header-btn:hover {
    background: var(--v4-surf2);
    border-color: var(--v4-border-h);
    color: var(--v4-text);
    transform: none;
}

.chat-page-v4 .v2-header-btn.danger {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
}

.chat-page-v4 .v2-header-btn.danger:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
}

/* ── Char bar ─────────────────────────────────────────────── */
.chat-page-v4 .v2-char-bar {
    background: var(--v4-bg2);
    border-bottom-color: var(--v4-border);
    backdrop-filter: none;
}

.chat-page-v4 .char-bar-fill {
    background: var(--v4-accent);
    transition: width 0.4s linear;
}

.chat-page-v4 .char-bar-fill.warning {
    background: linear-gradient(90deg, var(--v4-gold), var(--v4-red));
}

/* ── Search stage ────────────────────────────────────────── */
.chat-page-v4 #stage-search {
    background: var(--v4-bg);
}

.chat-page-v4 .v2-search-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #a5b4fc, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chat-page-v4 .v2-search-sub {
    color: var(--v4-dim);
}

/* Radar — keep animation but use contain to limit repaint area */
.chat-page-v4 .v2-radar {
    contain: layout style;
}

.chat-page-v4 .v2-pulse {
    border-color: rgba(99, 102, 241, 0.35);
}

.chat-page-v4 .v2-btn-cancel {
    background: var(--v4-surf);
    border-color: var(--v4-border);
    color: var(--v4-dim);
}

.chat-page-v4 .v2-btn-cancel:hover {
    border-color: var(--v4-border-h);
    color: var(--v4-text);
}

/* ── Chat stage ──────────────────────────────────────────── */
.chat-page-v4 #stage-chat {
    background: var(--v4-bg);
}

.chat-page-v4 .v2-chat-scroll {
    background: var(--v4-bg);
    /* No gradient background — reduces compositing layers */
    background-image: none;
    scroll-behavior: smooth;
}

body.light-mode .chat-page-v4 .v2-chat-scroll {
    background: #eef1f9;
}

/* ── Message bubbles ─────────────────────────────────────── */
.chat-page-v4 .msg-v2 {
    /* GPU containment — repaints are isolated per message */
    contain: layout style;
}

/* Their bubbles */
.chat-page-v4 .msg-v2.theirs .msg-bubble-v2 {
    background: var(--v4-their-bg);
    border-color: var(--v4-border);
    color: var(--v4-text);
    border-radius: var(--v4-radius) var(--v4-radius) var(--v4-radius) 4px;
    box-shadow: none;
}

/* My bubbles */
.chat-page-v4 .msg-v2.mine .msg-bubble-v2 {
    background: var(--v4-own-bg);
    border-color: transparent;
    color: #fff;
    border-radius: var(--v4-radius) var(--v4-radius) 4px var(--v4-radius);
    box-shadow: 0 2px 12px rgba(79, 70, 229, 0.28);
}

/* Premium my bubbles */
.chat-page-v4.is-premium .msg-v2.mine .msg-bubble-v2 {
    background: linear-gradient(145deg, #6d5cff, #4f46e5);
    border-color: var(--v4-gold-s);
    box-shadow:
        0 2px 16px rgba(79, 70, 229, 0.35),
        0 0 0 1px var(--v4-gold-soft),
        0 0 18px rgba(245, 158, 11, 0.28);
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

.chat-page-v4.is-premium .msg-v2.mine .msg-avatar-v2 {
    border-color: var(--v4-gold-s);
    box-shadow: 0 0 0 2px var(--v4-gold-soft);
}

/* Premium partner bubbles */
.chat-page-v4 .msg-v2.theirs.is-premium-partner .msg-bubble-v2 {
    background: linear-gradient(160deg, rgba(39, 30, 10, 0.95), var(--v4-their-bg));
    border-color: var(--v4-gold-s);
    color: #fef3c7;
    box-shadow:
        0 0 0 1px var(--v4-gold-soft),
        0 0 16px rgba(245, 158, 11, 0.22);
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.32);
}

.chat-page-v4 .msg-v2.theirs.is-premium-partner .msg-avatar-v2 {
    border-color: var(--v4-gold-s);
    box-shadow: 0 0 0 2px var(--v4-gold-soft);
}

/* System messages */
.chat-page-v4 .msg-v2.system .msg-bubble-v2 {
    background: transparent;
    border: none;
    color: var(--v4-muted);
    font-size: 11.5px;
    padding: 3px 12px;
}

/* Sticker / emoji pop */
.chat-page-v4 .msg-bubble-v2.sticker,
.chat-page-v4 .msg-bubble-v2.emoji-pop {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 52px;
    padding: 4px;
}

/* Entry animation — one-shot, no loop */
.chat-page-v4 .msg-v2.fx-enter {
    animation: v4MsgIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes v4MsgIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Message meta */
.chat-page-v4 .msg-meta-v2 {
    color: var(--v4-dim);
    font-size: 10.5px;
}

.chat-page-v4 .msg-v2.mine .msg-meta-v2 {
    color: rgba(255, 255, 255, 0.6);
}

/* Quick action buttons */
.chat-page-v4 .msg-quick-action-btn {
    background: var(--v4-surf);
    border-color: var(--v4-border);
    color: var(--v4-dim);
}

.chat-page-v4 .msg-quick-action-btn:hover,
.chat-page-v4 .msg-quick-action-btn:focus-visible {
    background: var(--v4-surf2);
    border-color: var(--v4-border-h);
    color: var(--v4-accent);
}

/* Reply block */
.chat-page-v4 .reply-block-v2 {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: var(--v4-accent);
}

.chat-page-v4 .msg-v2.mine .reply-block-v2 {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(255, 255, 255, 0.6);
}

.chat-page-v4 .reply-sender-v2 {
    color: var(--v4-accent);
}

.chat-page-v4 .msg-v2.mine .reply-sender-v2 {
    color: rgba(255, 255, 255, 0.85);
}

/* Reactions */
.chat-page-v4 .reaction-badge {
    background: var(--v4-surf);
    border-color: var(--v4-border);
}

.chat-page-v4 .reaction-badge:hover {
    border-color: var(--v4-border-h);
    box-shadow: none;
}

.chat-page-v4 .reaction-badge.mine {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.38);
}

/* ── Typing indicator ────────────────────────────────────── */
.chat-page-v4 .v2-typing {
    background: var(--v4-surf);
    border-color: var(--v4-border);
    border-radius: 20px;
    box-shadow: none;
    backdrop-filter: none;
}

.chat-page-v4 .v2-typing-dots span {
    background: var(--v4-accent);
}

/* ── Input dock ──────────────────────────────────────────── */
.chat-page-v4 .v2-input-dock {
    background: var(--v4-bg2);
    border-top-color: var(--v4-border);
    /* Minimal blur — acceptable on input area only */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 600px) {
    body .chat-page-v4 .v2-input-dock {
        background: var(--v4-bg2) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}

.chat-page-v4 .v2-dock-btn {
    color: var(--v4-dim);
    border-radius: 10px;
}

.chat-page-v4 .v2-dock-btn:hover {
    color: var(--v4-accent);
    background: rgba(99, 102, 241, 0.1);
}

.chat-page-v4 .v2-dock-btn.is-recording {
    color: var(--v4-red);
    background: rgba(239, 68, 68, 0.14);
    box-shadow: none;
}

.chat-page-v4 .v2-input-pill {
    background: var(--v4-surf);
    border-color: var(--v4-border);
    border-radius: 14px;
}

.chat-page-v4 .v2-input-pill:focus-within {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

.chat-page-v4 .v2-textarea {
    color: var(--v4-text);
    caret-color: var(--v4-accent);
}

.chat-page-v4 .v2-textarea::placeholder {
    color: var(--v4-muted);
}

/* Send button — solid, no heavy glow */
.chat-page-v4 .v2-btn-send {
    background: var(--v4-accent);
    color: #fff;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
    border-radius: 10px;
}

.chat-page-v4 .v2-btn-send:hover {
    background: var(--v4-accent-d);
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42);
    transform: none;
}

/* ── Pickers ─────────────────────────────────────────────── */
.chat-page-v4 .v2-picker {
    background: var(--v4-bg2);
    border-top-color: var(--v4-border);
    backdrop-filter: none;
}

.chat-page-v4 .emoji-btn:hover {
    background: var(--v4-surf2);
}

.chat-page-v4 .sticker-btn {
    background: var(--v4-surf);
    border-color: var(--v4-border);
}

.chat-page-v4 .sticker-btn:hover {
    border-color: var(--v4-border-h);
    background: var(--v4-surf2);
    box-shadow: none;
}

/* ── Context menu & reaction picker ─────────────────────── */
.chat-page-v4 .msg-context-menu {
    background: var(--v4-bg2);
    border-color: var(--v4-border);
    backdrop-filter: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.chat-page-v4 .ctx-item:hover {
    background: var(--v4-surf2);
}

.chat-page-v4 .reaction-picker {
    background: var(--v4-bg2);
    border-color: var(--v4-border);
    backdrop-filter: none;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.chat-page-v4 .reaction-emoji-btn:hover {
    background: var(--v4-surf2);
    transform: scale(1.15);
}

/* ── End stage ───────────────────────────────────────────── */
.chat-page-v4 #stage-end {
    background: var(--v4-bg);
}

.chat-page-v4 .v2-end-title {
    background: linear-gradient(135deg, #a5b4fc, #818cf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chat-page-v4 .v2-end-icon {
    /* No continuous animation for battery saving — only gentle */
    animation: v4Float 4s ease-in-out infinite;
    will-change: transform;
}

@keyframes v4Float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.chat-page-v4 .v2-btn-primary {
    background: var(--v4-accent);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.28);
}

.chat-page-v4 .v2-btn-primary:hover {
    background: var(--v4-accent-d);
    box-shadow: 0 6px 22px rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

.chat-page-v4 .v2-btn-ghost {
    background: var(--v4-surf);
    border-color: var(--v4-border);
    color: var(--v4-dim);
}

.chat-page-v4 .v2-btn-ghost:hover {
    border-color: var(--v4-border-h);
    color: var(--v4-text);
}

/* ── Reply bar ───────────────────────────────────────────── */
.chat-page-v4 .reply-bar {
    background: var(--v4-surf);
    border-left-color: var(--v4-accent);
}

/* ── Connected flash ─────────────────────────────────────── */
.chat-page-v4~.connected-flash,
.chat-page-v4 .connected-flash {
    background: var(--v4-accent);
    box-shadow: 0 0 16px rgba(99, 102, 241, 0.35);
}

/* ── Modals ──────────────────────────────────────────────── */
.chat-page-v4 .modal-card,
.chat-page-v4 .v2-game-card,
.chat-page-v4 .vote-card,
.chat-page-v4 .partner-card,
.chat-page-v4 .charlimit-card {
    background: var(--v4-bg2);
    border-color: var(--v4-border);
    backdrop-filter: none;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* ── Game modal ──────────────────────────────────────────── */
.chat-page-v4 .v2-game-head {
    background: linear-gradient(180deg, var(--v4-bg2) 60%, transparent);
}

.chat-page-v4 .v2-game-badge {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
}

.chat-page-v4 .v2-game-option,
.chat-page-v4 .v2-game-panel {
    background: var(--v4-surf);
    border-color: var(--v4-border);
}

.chat-page-v4 .v2-game-chip {
    background: var(--v4-surf2);
    border-color: var(--v4-border);
    color: var(--v4-dim);
}

.chat-page-v4 .v2-game-cell,
.chat-page-v4 .v2-rps-choice,
.chat-page-v4 .v2-animal-choice {
    background: var(--v4-surf);
    border-color: rgba(99, 102, 241, 0.2);
}

.chat-page-v4 .v2-game-cell:hover:not(:disabled),
.chat-page-v4 .v2-rps-choice:hover:not(:disabled),
.chat-page-v4 .v2-animal-choice:hover:not(:disabled) {
    border-color: var(--v4-accent);
    background: rgba(99, 102, 241, 0.08);
    box-shadow: none;
    transform: none;
}

.chat-page-v4 .v2-rps-choice.is-selected,
.chat-page-v4 .v2-animal-choice.is-selected {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.5);
}

.chat-page-v4 .v2-game-btn {
    background: var(--v4-surf);
    border-color: var(--v4-border);
    color: var(--v4-text);
}

.chat-page-v4 .v2-game-btn:hover {
    border-color: var(--v4-border-h);
}

.chat-page-v4 .v2-game-btn.primary {
    background: var(--v4-accent);
    border: none;
    color: #fff;
}

.chat-page-v4 .v2-game-btn.danger {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.28);
}

.chat-page-v4 .v2-game-close {
    background: var(--v4-surf);
    border-color: var(--v4-border);
    color: var(--v4-dim);
}

.chat-page-v4 .v2-game-close:hover {
    border-color: var(--v4-border-h);
    color: var(--v4-text);
}

.chat-page-v4 .v2-game-result {
    background: rgba(99, 102, 241, 0.07);
    border-color: rgba(99, 102, 241, 0.18);
}

/* ── Voice bubble ────────────────────────────────────────── */
.chat-page-v4 .voice-play-btn {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: background 0.18s;
}

.chat-page-v4 .voice-play-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: none;
}

.chat-page-v4 .v2-typing {
    animation: none;
}

/* disable slide-up loop for battery */

/* ── Match pref modal ────────────────────────────────────── */
.chat-page-v4 .match-pref-card {
    background: var(--v4-bg2);
    border-color: var(--v4-border);
}

.chat-page-v4 .match-pref-section {
    border-color: var(--v4-border);
    background: var(--v4-surf);
}

.chat-page-v4 .match-pref-pill,
.chat-page-v4 .match-pref-btn {
    background: var(--v4-surf);
    border-color: var(--v4-border);
    color: var(--v4-text);
    transition: border-color 0.18s, background 0.18s;
}

.chat-page-v4 .match-pref-pill:hover,
.chat-page-v4 .match-pref-btn:hover {
    border-color: var(--v4-border-h);
    transform: none;
}

.chat-page-v4 .match-pref-pill.is-selected,
.chat-page-v4 .match-pref-btn.is-selected {
    border-color: rgba(99, 102, 241, 0.7);
    background: rgba(99, 102, 241, 0.14);
    color: #fff;
}

/* ── Group-specific overrides ────────────────────────────── */
.chat-page-v4 .group-member-strip {
    background: var(--v4-bg2);
    border-bottom-color: var(--v4-border);
}

.chat-page-v4 .group-member-pill {
    background: var(--v4-surf);
    border-color: var(--v4-border);
}

.chat-page-v4 .group-message-bubble {
    background: var(--v4-their-bg);
    border-color: var(--v4-border);
}

.chat-page-v4 .group-message-bubble-row.is-mine .group-message-bubble {
    background: var(--v4-own-bg);
    color: #fff;
    border-color: transparent;
}

.chat-page-v4 .group-message-meta {
    color: var(--v4-muted);
}

.chat-page-v4 .group-message-bubble-row.is-mine .group-message-meta {
    color: rgba(255, 255, 255, 0.55);
}

.chat-page-v4 .group-reaction-pill {
    background: var(--v4-surf);
    border-color: var(--v4-border);
}

.chat-page-v4 .group-reaction-pill.is-mine {
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(99, 102, 241, 0.35);
}

.chat-page-v4 .group-reply-banner {
    background: var(--v4-surf);
    border-left-color: var(--v4-accent);
    border-top-color: var(--v4-border);
}

.chat-page-v4 .group-reply-preview {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: var(--v4-accent);
}

.chat-page-v4 .group-message-bubble-row.is-mine .group-reply-preview {
    background: rgba(255, 255, 255, 0.14);
    border-left-color: rgba(255, 255, 255, 0.5);
}

/* Group message row — contain for perf */
.chat-page-v4 .group-message-row {
    contain: layout style;
}

/* Group FX enter — one-shot */
.chat-page-v4 .group-message-row.fx-enter {
    animation: v4MsgIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ── Auto-next banner ────────────────────────────────────── */
.chat-page-v4 .v2-auto-next {
    background: var(--v4-bg2);
    border-top-color: var(--v4-border);
    backdrop-filter: none;
}

/* ── Scrollbar ───────────────────────────────────────────── */
.chat-page-v4 .v2-chat-scroll::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.25);
}

/* ── Light mode adjustments ──────────────────────────────── */
body.light-mode .chat-page-v4 .v2-header,
body.light-mode .chat-page-v4 .v2-char-bar,
body.light-mode .chat-page-v4 .v2-input-dock {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--v4-border);
}

body.light-mode .chat-page-v4 .v2-input-pill {
    background: var(--v4-surf2);
    border-color: var(--v4-border);
}

body.light-mode .chat-page-v4 .v2-textarea {
    color: var(--v4-text);
}

body.light-mode .chat-page-v4 .msg-context-menu,
body.light-mode .chat-page-v4 .reaction-picker {
    background: #ffffff;
    border-color: var(--v4-border);
}

body.light-mode .chat-page-v4 .ctx-item:hover {
    background: var(--v4-surf2);
}

body.light-mode .chat-page-v4 .modal-card,
body.light-mode .chat-page-v4 .vote-card,
body.light-mode .chat-page-v4 .partner-card,
body.light-mode .chat-page-v4 .charlimit-card,
body.light-mode .chat-page-v4 .v2-game-card {
    background: #ffffff;
}

body.light-mode .chat-page-v4 .v2-picker {
    background: rgba(255, 255, 255, 0.98);
}

body.light-mode .chat-page-v4 .v2-typing {
    background: #fff;
}

body.light-mode .chat-page-v4 .msg-v2.theirs .msg-bubble-v2 {
    background: #ffffff;
    border-color: var(--v4-border);
    color: var(--v4-text);
}

body.light-mode .chat-page-v4 .group-message-bubble {
    background: #ffffff;
}

/* ── Reduced motion: disable all animations ──────────────── */
@media (prefers-reduced-motion: reduce) {

    .chat-page-v4 .v2-pulse,
    .chat-page-v4 .v2-end-icon,
    .chat-page-v4 .v2-radar-ghost,
    .chat-page-v4 .msg-v2.fx-enter,
    .chat-page-v4 .group-message-row.fx-enter {
        animation: none !important;
    }
}

/* ── Stage transition (lightweight opacity only) ─────────── */
.chat-page-v4 .v2-stage {
    animation: v4StageFade 0.2s ease both;
}

@keyframes v4StageFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}