/* TavernWall v6.4.1.1 Mobile Layout Restore / Light Touch Fix
   Purpose: undo aggressive stacked mobile behavior from v6.4.1.
   This file intentionally avoids forcing buttons, nav, and grids into full-width stacks. */

@media (max-width: 900px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    img,
    iframe,
    video,
    canvas {
        max-width: 100%;
    }

    textarea,
    input,
    select {
        max-width: 100%;
    }

    table {
        max-width: 100%;
    }

    .tw-mobile-table-wrap,
    .table-wrap,
    .responsive-table,
    .cleanup98-table-wrap,
    .launch99-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    pre,
    code {
        white-space: pre-wrap;
        word-break: break-word;
    }

    .card,
    .panel,
    .box,
    .content-card {
        max-width: 100%;
    }

    /* Keep buttons compact. Do NOT force every button to full width. */
    .button,
    .mini-button,
    button,
    input[type="submit"] {
        max-width: 100%;
        touch-action: manipulation;
    }

    /* Let action rows wrap naturally instead of stacking everything vertically. */
    .action-row,
    .quick-actions,
    .profile-actions,
    .member-actions,
    .post-actions,
    .comment-actions,
    .bell-actions,
    .help-button-row,
    .cleanup98-actions,
    .launch99-actions,
    .beta640-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    /* Great Hall: only prevent overflow; do not force all areas into one-column blocks. */
    body.tw-mobile-light-great-hall .post-card,
    body.tw-mobile-light-great-hall .wall-post,
    body.tw-mobile-light-great-hall article.post,
    body.tw-mobile-light-great-hall .feed-post {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    body.tw-mobile-light-great-hall .composer textarea,
    body.tw-mobile-light-great-hall .post-composer textarea,
    body.tw-mobile-light-great-hall .create-post textarea {
        width: 100%;
        min-height: 95px;
    }

    /* Header/nav: keep links from becoming giant full-width bars. */
    .site-nav,
    .main-nav,
    .top-nav,
    nav {
        max-width: 100%;
    }

    .site-nav a,
    .main-nav a,
    .top-nav a,
    nav a {
        max-width: 100%;
    }

    /* Profile media safety only. */
    body.tw-mobile-light-profile .profile-banner img,
    body.tw-mobile-light-profile .cover-photo img,
    body.tw-mobile-light-profile .banner img,
    body.tw-mobile-light-profile .profile-cover img {
        max-height: 240px;
        object-fit: cover;
    }

    body.tw-mobile-light-profile iframe,
    body.tw-mobile-light-profile .profile-music iframe,
    body.tw-mobile-light-profile .music-embed iframe {
        max-width: 100%;
    }

    /* Messages: prevent text overflow without changing layout aggressively. */
    body.tw-mobile-light-messages .message,
    body.tw-mobile-light-messages .chat-message,
    body.tw-mobile-light-messages .raven-message {
        overflow-wrap: anywhere;
    }

    body.tw-mobile-light-messages .message-form textarea,
    body.tw-mobile-light-messages .chat-form textarea,
    body.tw-mobile-light-messages .raven-form textarea {
        width: 100%;
    }

    /* Admin tables can scroll horizontally rather than collapsing every card. */
    body.tw-mobile-light-admin table {
        min-width: 650px;
    }
}

/* Very small screens need a little more help, but still no forced nav/button stack. */
@media (max-width: 430px) {
    .card,
    .panel,
    .box,
    .content-card {
        padding-left: 12px;
        padding-right: 12px;
    }

    .post-actions,
    .comment-actions,
    .reaction-row,
    .bell-actions {
        gap: 6px;
    }

    .post-actions button,
    .comment-actions button,
    .reaction-row button,
    .bell-actions button {
        min-height: 36px;
    }
}