/*
 * Prenship Meet mobile chat refinement
 *
 * Goal:
 * - cleaner top alignment
 * - message area centered properly
 * - input fixed in the lower area
 * - participant list scrolls for large guest counts
 *
 * Video positioning is not modified here.
 */

@media (max-width: 680px) {

    #chatRoom {
        overflow: hidden !important;
    }

    #chatRoom .chat-app {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    #chatRoom #chatContent,
    #chatRoom .chat {
        position: relative !important;

        display: grid !important;
        grid-template-rows: 60px minmax(0, 1fr) 64px !important;

        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    /*
     * Cleaner professional top section
     */
    #chatRoom .chat-header {
        position: relative !important;

        width: 100% !important;
        height: 60px !important;
        min-height: 60px !important;

        margin: 0 !important;
        padding: 8px 14px 8px 14px !important;

        overflow: hidden !important;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.16) !important;
    }

    #chatRoom .chat-header .row,
    #chatRoom .chat-header .col-12 {
        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #chatRoom #attendeeAvatar {
        display: none !important;
    }

    #chatRoom #attendeeName,
    #chatRoom .chat-about {
        position: relative !important;

        display: block !important;

        width: calc(100% - 170px) !important;
        max-width: calc(100% - 170px) !important;

        margin: 0 !important;
        padding: 10px 0 0 0 !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: #ffffff !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        text-align: left !important;

        text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.75) !important;
    }

    /*
     * Keep the top action icons aligned nicely
     */
    #chatRoom .chat-header a {
        top: 10px !important;

        width: 34px !important;
        height: 34px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 9px !important;
    }

    /*
     * Main chat history area
     */
    #chatRoom #chatHistory,
    #chatRoom .chat-history {
        position: relative !important;

        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 12px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #chatRoom #chatBoard {
        display: block !important;

        width: 100% !important;
        min-height: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #chatRoom #chatBoard > li {
        list-style: none !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    /*
     * Fixed lower input area
     */
    #chatRoom .chat-message {
        position: relative !important;
        z-index: 5 !important;

        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 9px 10px !important;

        overflow: hidden !important;

        border-top:
            1px solid rgba(255, 255, 255, 0.16) !important;
    }

    #chatRoom .chat-message .input-group {
        display: flex !important;
        align-items: stretch !important;

        width: 100% !important;
        height: 100% !important;

        margin: 0 !important;
    }

    #chatRoom .chat-message .input-group-text {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 52px !important;
        min-width: 52px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #chatRoom #chatMessage {
        display: block !important;
        flex: 1 1 auto !important;

        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 14px !important;

        overflow: hidden !important;

        font-size: 16px !important;
        line-height: 44px !important;
    }

    #chatRoom #chatMessage::placeholder {
        color: #6b7280 !important;
        opacity: 1 !important;
    }

    /*
     * Participant list overlay inside the middle panel.
     * Works for large guest counts (e.g. 50 users) because it scrolls.
     */
    #chatRoom #plist {
        position: absolute !important;
        z-index: 30 !important;

        top: 60px !important;
        right: 0 !important;
        bottom: 64px !important;
        left: 0 !important;

        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;

        flex-direction: column !important;
        align-items: stretch !important;

        margin: 0 !important;
        padding: 8px !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;

        background: rgba(15, 23, 42, 0.94) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    #chatRoom #plist .chat-list {
        display: block !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #chatRoom #plist .chat-list li {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;

        width: 100% !important;
        min-height: 56px !important;

        margin: 0 0 6px !important;
        padding: 8px 10px !important;

        overflow: hidden !important;
        border-radius: 11px !important;

        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }

    #chatRoom #plist .chat-list li:hover,
    #chatRoom #plist .chat-list li.active {
        background: rgba(255, 255, 255, 0.16) !important;
    }

    #chatRoom #plist img {
        display: block !important;
        flex: 0 0 42px !important;

        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;

        object-fit: cover !important;
        border-radius: 50% !important;
    }

    #chatRoom #plist .about {
        display: block !important;
        flex: 1 1 auto !important;

        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #chatRoom #plist .name {
        display: block !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: #ffffff !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }

    #chatRoom #plist .status {
        display: block !important;

        margin-top: 2px !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        color: #cbd5e1 !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
}

/* PM MOBILE CHAT INPUT INLINE START */
@media (max-width: 680px) {

    #chatRoom .chat-message {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        height: 64px !important;

        padding: 9px 10px !important;
    }

    #chatRoom .chat-message .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;

        width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #chatRoom .chat-message .input-group-prepend,
    #chatRoom .chat-message .input-group-append {
        display: flex !important;
        flex: 0 0 auto !important;

        height: 44px !important;
        margin: 0 !important;
    }

    #chatRoom .chat-message .input-group-text,
    #chatRoom #chatSendButton {
        display: inline-flex !important;
        flex: 0 0 52px !important;
        align-items: center !important;
        justify-content: center !important;

        width: 52px !important;
        min-width: 52px !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 10px 0 0 10px !important;
    }

    #chatRoom #chatMessage {
        display: block !important;
        flex: 1 1 auto !important;

        /*
         * Bootstrap input groups use width:1% so the input
         * expands without wrapping beneath the button.
         */
        width: 1% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;

        margin: 0 !important;
        padding: 0 14px !important;

        border-left: 0 !important;
        border-radius: 0 10px 10px 0 !important;

        font-size: 16px !important;
        line-height: normal !important;
    }
}
/* PM MOBILE CHAT INPUT INLINE END */