/* Responsibility: motion, the settings drawer, and mobile layout.
   Split from chat.css to stay within the 400-line limit (§4). */

/* ── motion ───────────────────────────────────────────────────
   Fast and purposeful: every duration below is under 220ms, because motion
   that makes you wait stops feeling responsive. Nothing loops, nothing moves
   without a cause, and all of it stops for prefers-reduced-motion. */

@media (prefers-reduced-motion: no-preference) {
    .msg { animation: msg-in 160ms cubic-bezier(0.2, 0, 0.2, 1) both; }

    @keyframes msg-in {
        from { opacity: 0; transform: translateY(6px) scale(0.98); }
        to   { opacity: 1; transform: none; }
    }

    .panel, .sharebar { animation: panel-in 180ms ease-out both; }

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

    button, .word, .filebtn { transition: background 120ms ease, border-color 120ms ease,
                                          transform 90ms ease; }
    button:active, .word:active { transform: scale(0.97); }

    .card, .theme-option { transition: border-color 140ms ease, background 140ms ease; }

    /* Theme changes fade rather than snap, but only the surfaces — animating
       text colour makes reading feel unstable mid-transition. */
    body, .panel, .msg-body, .composer, .roombar {
        transition: background-color 200ms ease, border-color 200ms ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── settings drawer ──────────────────────────────────────── */

.icon-btn { font-size: 17px; line-height: 1; padding: 7px 11px; }

.drawer {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0, 0, 0, 0.45);
    display: flex; justify-content: flex-end;
    opacity: 0; transition: opacity 180ms ease;
}
.drawer.open { opacity: 1; }

.drawer-sheet {
    width: min(420px, 100%);
    height: 100%;
    overflow-y: auto;
    background: var(--panel);
    border-left: 1px solid var(--line);
    padding: 18px 20px calc(28px + env(safe-area-inset-bottom));
    transform: translateX(100%);
    transition: transform 200ms cubic-bezier(0.2, 0, 0.2, 1);
}
.drawer.open .drawer-sheet { transform: none; }

.drawer-head { display: flex; align-items: center; justify-content: space-between;
               margin-bottom: 6px; }
.drawer-head h2 { margin: 0; font-size: 18px; font-weight: 500; }

.drawer-close {
    margin: 0; padding: 4px 12px; font-size: 22px; line-height: 1;
    background: transparent; border: 0; color: var(--muted); cursor: pointer;
}
.drawer-close:hover { color: var(--text); }

.drawer-section { padding: 16px 0; border-top: 1px solid var(--line); }
.drawer-section h3 { margin: 0 0 10px; font-size: 13px; color: var(--muted);
                     text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

.drawer-note { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0 0 8px; }

.theme-list { display: grid; gap: 8px; }

.theme-option {
    display: flex; align-items: center; gap: 12px;
    margin: 0; padding: 10px 12px; width: 100%;
    background: var(--sunken); border: 1px solid var(--line);
    border-radius: 10px; cursor: pointer; font-size: 14px;
    color: var(--text); text-align: left;
}
.theme-option:hover { border-color: var(--accent); }
.theme-option.on { border-color: var(--accent); background: var(--btn-hover); }

.theme-swatch { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
                border: 1px solid rgba(127,127,127,0.35); }
.theme-swatch-dark     { background: linear-gradient(135deg, #0f1115 50%, #6ea8fe 50%); }
.theme-swatch-light    { background: linear-gradient(135deg, #ffffff 50%, #1f5fd0 50%); }
.theme-swatch-telegram { background: linear-gradient(135deg, #17212b 50%, #2b5278 50%); }
.theme-swatch-terminal { background: linear-gradient(135deg, #0b0f0b 50%, #7dff9b 50%); }

.toggle { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; cursor: pointer; }
.toggle input { margin: 3px 0 0; width: auto; flex: 0 0 auto; }
.toggle strong { display: block; font-size: 14px; font-weight: 500; }
.toggle small { display: block; color: var(--muted); font-size: 12px;
                line-height: 1.5; margin-top: 2px; }

/* ── mobile ───────────────────────────────────────────────── */

@media (max-width: 560px) {
    /* The sheet becomes a bottom drawer: reaching the top of a tall phone
       screen with one thumb is the usual failure of side drawers. */
    .drawer { align-items: flex-end; justify-content: center; }
    .drawer-sheet {
        width: 100%; height: auto; max-height: 85vh;
        border-left: 0; border-top: 1px solid var(--line);
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }
    .drawer.open .drawer-sheet { transform: none; }

    /* dvh, so the composer is not hidden behind the on-screen keyboard. */
    .wrap { min-height: 100dvh; }
    .messages { max-height: 52dvh; }
    .composer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

    /* Comfortable touch targets. */
    button, .filebtn, .word { min-height: 40px; }
}

/* ── global footer (chat app) ────────────────────────────────
   Small, out of the way of the composer, but present per the app's global
   footer requirement: legal links plus a way back to the homepage. */
.chat-footer {
    max-width: 720px;
    margin: 8px auto 0;
    padding: 14px 4px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
}
.chat-footer nav { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.chat-footer nav a { color: var(--muted); font-size: 12.5px; text-decoration: none; }
.chat-footer nav a:hover { color: var(--text); }