/*
 * ChrisEmm Connect 3.23.0 SAFE
 * Mobile Composer Polish
 * CSS only – no chat logic / no JavaScript.
 */

@media (max-width: 720px) {
    .chat-composer {
        gap: 8px !important;
        padding:
            9px
            10px
            calc(10px + env(safe-area-inset-bottom)) !important;
        background: rgba(10, 17, 31, .97) !important;
        border-top-color: rgba(148, 163, 184, .12) !important;
    }

    .chat-composer-tools {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        padding-bottom: 0 !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .chat-composer-tools::-webkit-scrollbar {
        display: none !important;
    }

    .composer-tool,
    .chat-composer-tools > .chat-image-button {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 13px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent;
    }

    .composer-tool:active,
    .chat-composer-tools > .chat-image-button:active {
        transform: scale(.96);
    }

    .composer-field {
        min-width: 0 !important;
        border-radius: 15px !important;
        border-color: rgba(148, 163, 184, .16) !important;
        background: rgba(255, 255, 255, .045) !important;
        transition:
            border-color .15s ease,
            box-shadow .15s ease,
            background .15s ease;
    }

    .composer-field:focus-within {
        border-color: rgba(96, 165, 250, .58) !important;
        background: rgba(255, 255, 255, .06) !important;
        box-shadow:
            0 0 0 3px rgba(59, 130, 246, .10) !important;
    }

    .chat-composer textarea {
        min-height: 46px !important;
        max-height: 120px !important;
        padding: 12px 58px 12px 14px !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        resize: none !important;
    }

    .character-count {
        right: 11px !important;
        bottom: 8px !important;
        font-size: .7rem !important;
        opacity: .62 !important;
    }

    .send-button {
        min-height: 46px !important;
        border-radius: 14px !important;
        font-weight: 800 !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent;
    }

    .send-button:active {
        transform: translateY(1px);
    }
}

/* Slightly tighter layout on very narrow phones. */
@media (max-width: 380px) {
    .chat-composer {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .chat-composer-tools {
        gap: 6px !important;
    }

    .composer-tool,
    .chat-composer-tools > .chat-image-button {
        flex-basis: 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
    }
}