/* One compact mobile toolbar; the composer stays at the visible viewport edge. */
#mobile-send, #mobile-users-backdrop { display: none; }
@media screen and (max-width: 680px), screen and (max-width: 1024px) and (pointer: coarse) {
    html { overflow: hidden; overscroll-behavior: none; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) {
        position: fixed;
        inset: var(--loult-responsive-top, 0px) 0 auto;
        flex: none;
        height: var(--loult-responsive-height, 100dvh);
        max-height: var(--loult-responsive-height, 100dvh);
        min-height: 0;
        overflow: hidden;
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #main {
        flex: 1 1 0;
        position: relative;
        width: 100%;
        min-height: 0;
        overflow: hidden;
        border: 0;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat-stage { min-height: 0; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat {
        min-height: 0;
        padding: 3px 0 5px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        scroll-behavior: auto;
        overflow-anchor: auto;
        scrollbar-width: thin;
        touch-action: pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }
    body.night:not(.cinema-screen):not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat { background: linear-gradient(100deg, #0b0812db, #0b0812c9); }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > .backlog { filter: none; -webkit-filter: none; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > div {
        flex: none;
        max-width: 100%;
        padding: 3px 8px 3px 6px;
        gap: 0;
        font-size: 14px;
        line-height: 1.35;
    }
    body:not(.console):not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > .msg > div:first-child {
        position: relative;
        inset: auto;
        flex: 0 0 28px;
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        height: 28px;
        max-height: 28px;
        margin: 3px 7px 0 0;
        padding: 0;
        border: 0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: none;
    }
    body:not(.console):not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > .msg > div:first-child > img {
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        object-fit: cover;
        object-position: center 28%;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > div > :nth-child(2) {
        min-width: 0;
        padding: 0;
        overflow-wrap: anywhere;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > .msg > :nth-child(2) > div:first-child {
        min-height: 15px;
        padding: 0 54px 1px 0;
        font-size: 11px;
        font-weight: 650;
        line-height: 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > div > :nth-child(2) > div:not(:first-child) {
        padding: 0 0 2px;
        font-size: 14px;
        line-height: 1.35;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > .msg > :nth-child(3) {
        position: absolute;
        inset: 4px 8px auto auto;
        width: auto;
        min-width: 0;
        padding: 0;
        font-size: 9px;
        line-height: 14px;
        font-variant-numeric: tabular-nums;
        opacity: .75;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > :is(.log, .part, .info, .kick) {
        align-items: center;
        padding-block: 2px;
        font-size: 11px;
        line-height: 1.3;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > :is(.log, .part, .info, .kick) > i {
        flex: 0 0 20px;
        width: 20px;
        font-size: 15px;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat > :is(.log, .part, .info, .kick) > div:last-child {
        flex: 0 0 52px;
        width: 52px;
        font-size: 9px;
        line-height: 15px;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat .chat-attachment :is(img.chat-image-preview, video) {
        max-width: min(100%, 160px);
        max-height: 90px;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #chat .chat-attachment img.chat-image-expanded {
        max-width: 100%;
        max-height: min(50dvh, 360px);
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #foot {
        position: relative;
        display: flex;
        flex: 0 0 auto;
        flex-flow: column nowrap;
        align-items: stretch;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: 0 0 env(safe-area-inset-bottom, 0px);
        border: 0;
        border-top: 1px solid #b79cda26;
        background: #14111e;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #foot #footer-actions[data-loult-compact-menu] {
        position: static;
        inset: auto;
        display: flex;
        flex: none;
        flex-flow: row wrap;
        order: 0;
        gap: 2px;
        width: 100%;
        height: auto;
        min-height: 48px;
        max-height: none;
        overflow: visible;
        margin: 0;
        padding: 2px max(6px, env(safe-area-inset-right, 0px)) 2px max(6px, env(safe-area-inset-left, 0px));
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation: none;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] > :is(.loult-menu-games, #loult-site-sound, #room-options, #chat-controls, #game-buttons),
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) :is(#media-upload, #media-gallery-button) { display: none !important; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] > :not(.loult-menu-tools):not(.loult-menu-character):not(#cinema-controls) { display: none !important; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] > .loult-menu-tools { display: contents; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] :is(.loult-menu-tool, .loult-menu-character) {
        display: flex;
        position: relative;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: auto;
        min-width: 0;
        height: 44px;
        min-height: 44px;
        margin: 0;
        padding: 2px;
        overflow: hidden;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #d6c8ed;
        font: 500 9px/12px system-ui, sans-serif;
        box-shadow: none;
        touch-action: manipulation;
        transform: none;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] #vol { order: 1; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] #gear { order: 2; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] #cinema-open { order: 3; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] .loult-menu-character { order: 4; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] #userswitch { order: 5; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] :is(.loult-menu-tool-icon, .loult-menu-character-icon) {
        position: relative;
        display: grid;
        flex: 0 0 22px;
        place-items: center;
        width: 26px;
        height: 22px;
        margin: 0;
        border: 0;
        border-radius: 5px;
        background: transparent;
        color: inherit;
        box-shadow: none;
        transform: none;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] :is(.loult-menu-tool-icon, .loult-menu-character-icon) svg { width: 19px; height: 19px; transform: none; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] :is(.loult-menu-tool-label, .loult-menu-character-copy strong) {
        color: inherit;
        font: inherit;
        white-space: nowrap;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] .loult-menu-character-copy > span { display: none; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] .loult-menu-tool[aria-expanded=true],
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] #vol[aria-pressed=true] { background: #ad84e31f; color: #eadcff; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions .mobile-member-count {
        position: absolute;
        top: 1px;
        right: max(3px, calc(50% - 25px));
        min-width: 15px;
        height: 15px;
        padding: 0 3px;
        border-radius: 7px;
        background: #a88ad5;
        color: #130e20;
        font: 700 9px/15px system-ui, sans-serif;
        pointer-events: none;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #composer {
        display: flex;
        flex: none;
        flex-direction: row;
        order: 1;
        align-items: center;
        gap: 6px;
        align-self: stretch;
        width: 100%;
        height: 48px;
        min-height: 48px;
        margin: 0;
        padding: 1px max(6px, env(safe-area-inset-right, 0px)) 3px max(6px, env(safe-area-inset-left, 0px));
        border: 0;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #input {
        flex: 1 1 0;
        min-width: 0;
        height: 44px;
        max-height: 44px;
        padding: 9px 12px;
        border: 1px solid #b19bc52e;
        border-radius: 12px;
        background: #ffffff07;
        color: inherit;
        font-size: 16px;
        line-height: 24px;
        transition: border-color 120ms;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #input:focus { border-color: #ac8ed594; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #mobile-send:not([hidden]) {
        display: grid;
        flex: 0 0 44px;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 10px;
        border: 1px solid #ceb5ff36;
        border-radius: 12px;
        background: #7956a5;
        color: #fff;
        touch-action: manipulation;
        cursor: pointer;
    }
    #mobile-send svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    #mobile-send:disabled { opacity: .4; cursor: default; }
    #mobile-send:focus-visible { outline: 2px solid #d8b9ff; outline-offset: 2px; }
    body[data-loult-keyboard]:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #foot { padding-bottom: 0; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #userlist {
        position: absolute;
        inset: 6px 6px 6px auto;
        z-index: 31;
        width: min(260px, calc(100% - 48px)) !important;
        height: auto;
        max-height: none;
        border: 1px solid #b69bda40;
        border-radius: 12px;
        background: #1c1729;
        box-shadow: 0 8px 28px #0007;
        overflow-y: auto;
        transform: translateX(calc(100% + 12px));
        visibility: hidden;
        pointer-events: none;
        overscroll-behavior: contain;
    }
    body[data-loult-mobile-users]:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #userlist { display: block !important; transform: none; visibility: visible; pointer-events: auto; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #userlist::before {
        content: attr(aria-label);
        position: sticky;
        top: 0;
        z-index: 1;
        display: block;
        padding: 11px 12px;
        background: #1c1729;
        border-bottom: 1px solid #b69bda25;
        color: #e2d7f5;
        font: 600 12px/18px system-ui, sans-serif;
    }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #userlist > li { min-height: 44px; height: 44px; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #userlist > li > .nick { font-size: 12px; }
    body[data-loult-mobile-users]:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #mobile-users-backdrop:not([hidden]) { display: block; position: absolute; inset: 0; z-index: 30; background: #08051066; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) :is(.profile-card, #cinema-preview) { max-height: calc(var(--loult-responsive-height, 100dvh) - 16px); overflow-y: auto; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) .profile-card { font-size: 13px; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) .profile-card .profile-portrait { width: 56px; height: 56px; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) .profile-card :is(input, textarea, select) { font-size: 16px; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions[data-loult-compact-menu] > #cinema-controls { order: 0; flex-basis: 100%; padding: 4px 0; margin: 0; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions #cinema-actions > .toolbar-button { min-height: 36px; height: 36px; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #footer-actions #cinema-status { max-height: 28px; overflow: hidden; font-size: 10px; line-height: 14px; }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #overlay { top: var(--loult-responsive-top, 0px); bottom: auto; height: var(--loult-responsive-height, 100dvh); }
    body:not(.cinema-open):not(.loult-gaming):not(.loult-wow-playing) #overlay #window[data-loult-preferences] { inset: 8px; width: auto; height: auto; max-height: none; grid-template-rows: 54px minmax(0, 1fr); border-radius: 12px; }
    #overlay #window[data-loult-preferences] > div:first-child { gap: 10px; padding: 8px 12px; font-size: 18px; }
    #overlay #window[data-loult-preferences] > div:first-child::before { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; font-size: 23px; }
    #overlay #window[data-loult-preferences] [data-loult-preference-row] { padding: 9px; gap: 5px 8px; }
    dialog#custom-characters.loult-character-menu { inset: var(--loult-responsive-top, 0px) 0 auto; width: calc(100% - 16px); height: min(680px, calc(var(--loult-responsive-height, 100dvh) - 16px)); margin: 8px auto; padding: 10px; border-radius: 14px; gap: 8px; }
    #custom-characters.loult-character-menu .cm-heading { gap: 8px; }
    #custom-characters.loult-character-menu h2 { font-size: 18px; }
    #custom-characters.loult-character-menu .cm-heading-copy p { font-size: 10px; }
    #custom-characters.loult-character-menu .cm-layout { display: block; overflow-y: auto; }
    #custom-characters.loult-character-menu .cm-grid { max-height: min(300px, calc(var(--loult-responsive-height, 100dvh) * .4)); gap: 6px; }
    #custom-characters.loult-character-menu .cm-category { min-height: 34px; padding: 6px 9px; }
    #custom-characters.loult-character-menu :is(input, select, textarea) { font-size: 16px; }
    #custom-characters.loult-character-menu .cm-hero { height: 110px; }
    .mobile-member-count[hidden] { display: none; }
}
@media screen and (min-width: 681px) and (pointer: fine), screen and (min-width: 1025px) {
    .mobile-member-count { display: none; }
}