/* =========================================================
   SMOOTH — makes every state change in the UI fluid.
   Loaded last, after style.css / liquid-glass.css / wow.css.

   Techniques:
   - one shared spring-like easing for everything
   - @starting-style + transition-behavior: allow-discrete
     to animate elements that toggle display:none (modals,
     menus, popovers) with zero JS changes
   - gentle enter animations for dynamic list items
   - fully disabled under prefers-reduced-motion
   ========================================================= */

:root {
    --sm-ease: cubic-bezier(0.32, 0.72, 0.22, 1); /* smooth deceleration */
    --sm-fast: 160ms;
    --sm-med:  280ms;
    --sm-slow: 420ms;
}

/* ---------------------------------------------------------
   1. GLOBAL INTERACTIVE SMOOTHNESS
   Buttons, inputs, links, list rows: color/transform/shadow
   changes always glide instead of snapping.
   --------------------------------------------------------- */
button,
input,
select,
textarea,
a,
.dock-btn,
.icon-btn,
.room-item,
.member,
.chat-row,
.wc-feature,
.acc-menu-item,
.theme-swatch {
    transition:
        background-color var(--sm-fast) var(--sm-ease),
        border-color     var(--sm-fast) var(--sm-ease),
        color            var(--sm-fast) var(--sm-ease),
        box-shadow       var(--sm-med)  var(--sm-ease),
        transform        var(--sm-med)  var(--sm-ease),
        opacity          var(--sm-med)  var(--sm-ease);
}

/* pressed feel everywhere */
button:active,
.dock-btn:active,
.icon-btn:active,
.room-item:active {
    transform: scale(0.97);
    transition-duration: 60ms;
}

/* ---------------------------------------------------------
   2. MODALS — fade + scale in/out even with display:none
   --------------------------------------------------------- */
.modal {
    opacity: 0;
    transition:
        opacity var(--sm-med) var(--sm-ease),
        display var(--sm-med) allow-discrete,
        overlay var(--sm-med) allow-discrete;
}
.modal.open { opacity: 1; }
@starting-style {
    .modal.open { opacity: 0; }
}

.modal-card,
.settings-card,
.acc-modal {
    transition:
        transform var(--sm-med) var(--sm-ease),
        opacity   var(--sm-med) var(--sm-ease);
}
.modal.open .modal-card,
.modal.open .settings-card,
.modal.open .acc-modal {
    opacity: 1;
    transform: translateY(0) scale(1);
}
@starting-style {
    .modal.open .modal-card,
    .modal.open .settings-card,
    .modal.open .acc-modal {
        opacity: 0;
        transform: translateY(14px) scale(0.965);
    }
}

/* ---------------------------------------------------------
   3. POPOVERS & MENUS — soft drop-in
   (log-pop / emoji-pop already animate via opacity classes;
   here we give the same feel to the rest.)
   --------------------------------------------------------- */
.acc-menu,
.chat-row-menu,
.kbd-hint {
    transition:
        opacity   var(--sm-fast) var(--sm-ease),
        transform var(--sm-fast) var(--sm-ease),
        display   var(--sm-fast) allow-discrete;
}
@starting-style {
    .acc-menu:not([hidden]),
    .chat-row-menu:not([hidden]) {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
}

.log-pop,
.emoji-pop {
    transition-timing-function: var(--sm-ease);
    transition-duration: var(--sm-med);
}

/* ---------------------------------------------------------
   4. DYNAMIC LIST ITEMS — new rows breathe in
   --------------------------------------------------------- */
@keyframes sm-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.chat-row,
.room-item,
.member,
.toast {
    animation: sm-enter var(--sm-med) var(--sm-ease) backwards;
}

/* ---------------------------------------------------------
   5. SCROLL & FOCUS SMOOTHNESS
   --------------------------------------------------------- */
html { scroll-behavior: smooth; }

.chat-log,
.wc-rooms,
.members {
    scroll-behavior: smooth;
}

:focus-visible {
    outline: 2px solid var(--accent, #7c6cf2);
    outline-offset: 2px;
    border-radius: 6px;
    transition: outline-offset var(--sm-fast) var(--sm-ease);
}

/* ---------------------------------------------------------
   6. THEME SWITCHING — colors crossfade instead of snapping
   --------------------------------------------------------- */
body,
.app-bg,
.hdr,
.page,
.dock {
    transition:
        background-color var(--sm-slow) ease,
        color            var(--sm-slow) ease;
}

/* ---------------------------------------------------------
   7. REDUCED MOTION — turn it all off
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .chat-log, .wc-rooms, .members { scroll-behavior: auto; }
    .chat-row, .room-item, .member, .toast { animation: none; }
    .modal, .modal-card, .settings-card, .acc-modal,
    .acc-menu, .chat-row-menu, .kbd-hint {
        transition: none;
    }
}