/* ════════════════════════════════════════════════════════════
   AetherChat - performance + stability overrides
   Loaded LAST so it wins specificity battles.
   Goals:
     1. Eliminate every flash/cascade animation on first paint.
     2. Drop GPU-heavy effects (backdrop-filter, looping bg blobs).
     3. Promote scrollers/animated elements to their own layer.
     4. Restrict transitions to GPU-friendly properties.
   ════════════════════════════════════════════════════════════ */

/* 1. Kill backdrop-filter: blur() everywhere.
 *    Each blur is a full-screen GPU pass per repaint. ~60 of them in the
 *    DOM was murdering frame rate. Replace with slightly more opaque
 *    solid backgrounds - looks identical against the dark theme. */
.cv-header,
.bot-nav,
.app-shell .modal-hdr,
#main-menu,
.ctx-menu,
.msg-ctx-menu,
.react-panel,
.ac-modal-card,
#ac-settings-sheet,
.settings-sheet-card,
.attach-tray,
.attach-item,
.fab,
#compose-fab,
.cv-pill-btn,
.handle-row,
.set-row,
.search-modal,
.group-modal,
.starred-modal,
.image-viewer,
.status-viewer,
.calling-overlay,
.calling-bg,
.calling-av,
.calling-actions,
.calling-actions-row,
.calling-controls,
.call-btn,
.call-btn.mute,
.call-btn.flip,
.toast,
.mention-picker,
#call-net-indicator,
.qr-modal,
.invite-modal,
.emoji-picker,
.cv-ctx-menu,
.cv-ctx-item,
.pin-banner,
.encrypt-notice,
.skeleton,
.conn-bar,
.recording-status-box,
.handle-status,
.gradient-card,
.image-preview-overlay,
.image-preview-overlay .ipv-bottom {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.cv-header  { background: rgba(20, 18, 38, 0.96) !important; }
.bot-nav    { background: rgba(20, 18, 38, 0.96) !important; }

/* Sheets / modals / floating menus all share one solid surface. */
.ac-modal-card,
#ac-settings-sheet,
.settings-sheet-card,
#main-menu,
.ctx-menu,
.cv-ctx-menu,
.attach-tray,
.msg-ctx-menu,
.react-panel,
.mention-picker,
.emoji-picker {
    background: #18162B !important;
}

/* 2. Stop the always-on aurora background animation. It animates the body
 *    pseudo-element forever, forcing the GPU to redraw a giant gradient
 *    on every frame even when the app is idle. Static gradient looks the
 *    same and is free. */
body::before {
    animation: none !important;
}

/* 3. Kill ALL "first paint" cascade animations. These are the source of
 *    the user's "flashing" - chat list items staggering in over 450 ms,
 *    onboarding logos popping, message bubbles sliding from the side,
 *    etc. The app should feel instantly visible, not sequential. */
.chat-item,
.chat-item.no-anim,
.msg-row,
.msg-row.no-anim,
.msg-row.in,
.msg-row.out,
.search-result,
.call-row,
.status-item,
.set-row,
.settings-item,
.ob-screen,
.ob-logo,
.ob-hero h1,
.ob-hero p,
.ob-terms,
.ob-form,
#handle-stage,
.toast,
.calling-inner h2,
.calling-inner p,
.image-preview-overlay,
.settings-sheet,
.set-row,
.set-row tappable,
.encrypt-notice {
    animation: none !important;
}

/* The chat-view slide-in IS desirable (gives the app its "page transition"
 *  feel) but cap it short and use only transform - the previous 0.32s with
 *  multiple properties was perceptibly slow on 60Hz devices. */
.chat-view {
    transition: transform 0.18s var(--ease-out, ease-out) !important;
    will-change: transform;
}

/* Keep modal fade-in but make it instant + opacity only. */
#ac-modal-root .ac-modal-overlay {
    animation: ac-modal-fade-in 0.12s ease-out !important;
}
@keyframes ac-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Settings sheet: shorter slide. */
.settings-sheet {
    animation: sheet-slide 0.16s ease-out !important;
}
@keyframes sheet-slide {
    from { transform: translateX(6%); opacity: 0; }
    to   { transform: translateX(0);  opacity: 1; }
}

/* 4. Promote scrollers and slide-in surfaces to their own GPU layer so
 *    they don't trigger a repaint of the parent on each frame. */
#chats-list-container,
#chat-thread-container,
#calls-list-container,
#search-results,
#status-list,
.settings-list,
.settings-sheet-body,
.ac-picker-list,
.chat-view,
#ac-settings-sheet,
#ac-modal-root .ac-modal-overlay {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* 5. Hot animated elements get will-change up front so the compositor
 *    pre-allocates a layer. */
.msg-row,
.chat-item,
.call-row,
.search-result,
.ac-modal-card,
.settings-sheet-card,
.fab,
#compose-fab,
.toast,
.cv-mic-send,
.calling-av,
.cv-online-dot,
.ci-av-online-dot {
    will-change: transform, opacity;
    contain: layout paint;
}

/* 6. Stop "transition: all" on hot elements. It animates EVERY property
 *    change, including layout-affecting ones like width/height/border. */
.fab,
#compose-fab,
.cv-mic-send,
.cv-back,
.cv-act,
.bnav,
.ac-modal-btn,
.set-row,
.settings-item,
.chat-item,
.search-result,
.chip,
.react-btn,
.call-btn,
.call-action,
.attach-item,
.tray-item,
.cv-pill-btn,
.cv-ctx-item,
.ctx-item,
button {
    transition-property: transform, opacity, background-color, color !important;
}

/* 7. Inputs stay readable but border-color / bg only. */
input, textarea {
    transition: border-color 120ms ease, background-color 120ms ease !important;
}

/* 8. Hide scrollbar paint cost on Android WebView. */
::-webkit-scrollbar { width: 0; height: 0; }
::-webkit-scrollbar-thumb { background: transparent; }

/* 9. Disable the css-built scroll-behavior:smooth, which forces the browser
 *    to re-render at 16-33ms per scroll step. Native scroll on a high-Hz
 *    panel with our explicit scrollTop = scrollHeight assignment is much
 *    smoother. */
html {
    scroll-behavior: auto !important;
}

/* 10. Tap-highlight: kill the brief blue flash on Android tap. */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* 11. Honour OS reduced-motion preference globally. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* 12. Stop the typing-dots animation when the dots are hidden (saves CPU). */
#typing-indicator.hidden .typing-dots span { animation: none !important; }

/* 13. Pin-banner and encrypt-notice should never have entry animations. */
.pin-banner, .encrypt-notice { animation: none !important; }

/* 14. Image preview overlay: instant. */
.image-preview-overlay { animation: none !important; }

/* 15. ALL `box-shadow` blur filters on always-visible surfaces forced
 *     compositing on every frame. Tone them down on the bot-nav and
 *     header to avoid the GPU cost. */
.cv-header { box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important; }
.bot-nav   { box-shadow: 0 -1px 0 rgba(255,255,255,0.06) !important; }