/* WAI-Core: src/app/static/css/shell/chat/chat-responsive.css v5 */

/*==============================
=        MEDIA QUERIES        =
==============================*/

@media (max-width: 900px) {

    .chat-unread-badge {
        top: 5px;
        right: 5px;
    }

}




/* Base mobile-first adjustments */
@media (max-width: 600px) {

    /* Chat Box Size */
    .chat-box.active {
        height: 90vh;
        width: 95vw;
        bottom: 5px;
        right: 5px;
    }

    /* Header Font and Padding */
    .chat-header {
        font-size: 1em;
        padding: 8px 10px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .chat-user-select,
    .chat-status-select {
        font-size: 0.85em;
        max-width: 140px;
    }

    .chat-tools-button,
    .clear-chat,
    .chat-close-button {
        font-size: 1em;
        padding: 2px;
    }

    /* Chat Footer Input Resize */
    .chat-input {
        font-size: 0.9em;
    }

    .chat-action-button {
        width: 38px;
        height: 38px;
    }

    .chat-action-icon {
        width: 18px;
        height: 18px;
    }

    /* Typing Indicator Margin */
    .typing-indicator {
        margin: 6px;
    }

    /* Status bar font */
    .chat-status-bar {
        font-size: 0.8em;
        padding: 4px 6px;
    }

    /* Tools popup size */
    #chat-tools-popup {
        font-size: 12px;
        max-width: 90vw;
        right: 10px;
    }

    /* Unread popup spacing */
    .chat-unread-popup {
        bottom: 90px;
        left: 10px;
        font-size: 0.9em;
    }

    .chat-unread-popup li {
        margin-bottom: 5px;
    }
}

/* Additional rule for short screen heights */
@media (max-height: 500px) {
    .chat-box.active {
        height: 90vh;
        max-height: 90vh;
        bottom: 0;
    }
}