/* ============================================
   CHAT SCROLL FIX - CSS STABILITY
   Prevent jitter, layout shifts, and anchoring issues
   ============================================ */

/* Disable browser scroll anchoring (can cause unexpected jumps) */
.chat-messages {
    overflow-anchor: none;
    -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
}

/* Basis: keine Animation auf allen Messages.
   .new-message in chat-vibe.css (lädt als letztes, höhere Spezifität) überschreibt das. */
.message {
    animation: none;
}

/* Ensure consistent message heights (prevent late-load shifts) */
.message-avatar {
    min-width: 36px;
    min-height: 36px;
}

.message-bubble {
    min-height: 40px; /* Reserve space to prevent layout shift */
}

/* Prevent margin collapse (can cause subtle shifts) */
.chat-messages > .message:first-child {
    margin-top: 0;
}

.chat-messages > .message:last-child {
    margin-bottom: 0;
}

/* Stable font rendering (prevents sub-pixel shifts) */
.message-bubble p {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prevent text selection during programmatic scrolls */
.chat-messages.scrolling {
    user-select: none;
    -webkit-user-select: none;
}

/* Ensure images don't cause layout shifts (if any added later) */
.message img {
    width: 100%;
    height: auto;
    display: block;
}

/* Fix for Safari elastic scroll (can interfere with scrollTop) */
@supports (-webkit-appearance: none) {
    .chat-messages {
        overscroll-behavior-y: contain;
    }
}

/* Disable smooth scrolling on the container (we handle it in JS) */
.chat-messages {
    scroll-behavior: auto !important;
}

/* Ensure container has stable dimensions */
.chat-messages {
    position: relative;
    contain: layout style; /* CSS containment for better performance */
}