/* AfghanZone Investor Messaging Premium Mobile v1.0.0
   Presentation only, scoped to Investor Messaging M3 on mobile.
   Protected: MySQL message authority, ticks, timestamps, online/last-seen,
   typing, attachments, notifications, thread workflow and permissions.

   Root UI defect corrected:
   M3 currently renders FOUR visible composer controls:
   emoji + attachment + textarea + send.
   The existing mobile layer forced THREE grid columns, squeezing the textarea.
*/

@media screen and (max-width: 760px) {
    #tab-messages {
        --az-im-ink: #10263d;
        --az-im-ink-2: #183b59;
        --az-im-orange: #ff7416;
        --az-im-orange-2: #ff9138;
        --az-im-green: #16b887;
        --az-im-bg: #f5f7fa;
        --az-im-chat: #f2f0ee;
        --az-im-line: #e5eaf0;
        --az-im-muted: #7d8999;
    }

    #tab-messages,
    #tab-messages .m3-shell,
    #tab-messages #m3-app,
    #tab-messages .m3-chat,
    #tab-messages .m3-sidebar {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Page title / new-thread action */
    #tab-messages .m3-shell {
        gap: 9px !important;
    }

    #tab-messages .m3-hero {
        min-height: 54px !important;
        padding: 4px 2px 8px !important;
        gap: 8px !important;
    }

    #tab-messages .m3-hero h1 {
        font-size: 22px !important;
        line-height: 1.12 !important;
        letter-spacing: -.02em !important;
    }

    #tab-messages #m3-new-thread {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, var(--az-im-orange-2), var(--az-im-orange)) !important;
        box-shadow: 0 8px 18px rgba(255,116,22,.22) !important;
    }

    /* Main messaging shell */
    #m3-app.m3-app {
        height: calc(100dvh - 196px) !important;
        min-height: 500px !important;
        border: 1px solid #e3e8ee !important;
        border-radius: 22px !important;
        background: #fff !important;
        box-shadow: 0 14px 34px rgba(15,23,42,.075) !important;
    }

    /* Thread list */
    #m3-app .m3-side-head {
        padding: 11px 11px 9px !important;
    }

    #m3-app .m3-side-title h2 {
        font-size: 18px !important;
    }

    #m3-app .m3-search input {
        height: 43px !important;
        border: 1px solid #e5e9ee !important;
        border-radius: 14px !important;
        background: #f6f8fa !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.8) !important;
    }

    #m3-app .m3-filters button {
        min-height: 32px !important;
        padding: 5px 11px !important;
        font-size: 9px !important;
    }

    #m3-app .m3-thread-list {
        padding: 2px 8px 10px !important;
    }

    #m3-app .m3-thread {
        min-height: 68px !important;
        grid-template-columns: 48px minmax(0,1fr) !important;
        gap: 9px !important;
        padding: 9px 5px !important;
        border-bottom-color: #edf0f3 !important;
    }

    #m3-app .m3-thread.active {
        border-radius: 14px !important;
        border: 1px solid #ffe0c5 !important;
        background: linear-gradient(135deg,#fffaf6,#fff5ed) !important;
        box-shadow: 0 6px 16px rgba(249,115,22,.07) !important;
    }

    #m3-app .m3-avatar {
        width: 46px !important;
        height: 46px !important;
        flex-basis: 46px !important;
        border-radius: 15px !important;
        background: linear-gradient(135deg,var(--az-im-ink),var(--az-im-ink-2)) !important;
    }

    #m3-app .m3-thread-top b {
        font-size: 13px !important;
    }

    /* Chat header */
    #m3-app .m3-chat {
        background: var(--az-im-chat) !important;
    }

    #m3-app .m3-chat-head {
        min-height: 70px !important;
        padding: 10px 11px !important;
        border-bottom: 1px solid #e6e9ed !important;
        background: rgba(255,255,255,.97) !important;
        box-shadow: 0 4px 14px rgba(15,23,42,.025) !important;
    }

    #m3-app .m3-person {
        min-width: 0 !important;
        gap: 9px !important;
    }

    #m3-app .m3-person > div {
        min-width: 0 !important;
    }

    #m3-app .m3-person .m3-avatar {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
        border-radius: 50% !important;
    }

    #m3-app .m3-person h3 {
        max-width: 200px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        color: var(--az-im-ink) !important;
        font-size: 13px !important;
        font-weight: 950 !important;
    }

    #m3-app .m3-presence {
        margin-top: 3px !important;
        font-size: 8px !important;
    }

    #m3-app .m3-status {
        flex: 0 0 auto !important;
        padding: 5px 8px !important;
        font-size: 8px !important;
    }

    #m3-app #m3-back {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        background: #f7f9fb !important;
    }

    /* Reference/document context */
    #m3-app .m3-reference {
        min-height: 58px !important;
        gap: 9px !important;
        padding: 8px 10px !important;
        border-bottom: 1px solid #f2e3d7 !important;
        background: linear-gradient(135deg,#fffaf6,#fff5ec) !important;
    }

    #m3-app .m3-reference > i {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        border-radius: 12px !important;
        background: #fff0e2 !important;
        color: var(--az-im-orange) !important;
        font-size: 14px !important;
    }

    #m3-app .m3-reference > div {
        min-width: 0 !important;
    }

    #m3-app .m3-reference small {
        font-size: 7px !important;
    }

    #m3-app .m3-reference b {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }

    #m3-app .m3-reference span {
        margin-top: 1px !important;
        font-size: 8px !important;
    }

    #m3-app .m3-secure {
        min-height: 30px !important;
        padding: 6px 9px !important;
        border-bottom: 1px solid #eee8e2 !important;
        background: #fffdfb !important;
        color: #8a7665 !important;
        font-size: 7px !important;
        line-height: 1.5 !important;
    }

    /* Message canvas */
    #m3-app .m3-records {
        padding: 13px 10px 16px !important;
        background-color: #f3f1ef !important;
        background-image:
            radial-gradient(circle at 18px 18px,rgba(16,38,61,.024) 1px,transparent 1.25px),
            radial-gradient(circle at 54px 50px,rgba(255,116,22,.022) 1px,transparent 1.25px) !important;
        background-size: 72px 72px !important;
        scroll-behavior: smooth !important;
    }

    #m3-app .m3-day {
        margin: 8px auto 12px !important;
        padding: 5px 10px !important;
        border: 1px solid rgba(215,221,228,.8) !important;
        background: rgba(255,255,255,.9) !important;
        color: #7d8794 !important;
        font-size: 8px !important;
        box-shadow: 0 3px 10px rgba(15,23,42,.035) !important;
    }

    #m3-app .m3-row {
        margin: 7px 0 !important;
    }

    #m3-app .m3-bubble {
        max-width: 82% !important;
        padding: 9px 11px 7px !important;
        border: 1px solid #e4e8ed !important;
        border-radius: 16px 16px 16px 5px !important;
        background: linear-gradient(135deg,#ffffff,#f5f7f9) !important;
        color: #293649 !important;
        box-shadow: 0 5px 15px rgba(15,23,42,.055) !important;
    }

    #m3-app .m3-row.mine .m3-bubble {
        border-color: rgba(255,116,22,.13) !important;
        border-radius: 16px 16px 5px 16px !important;
        background: linear-gradient(135deg,var(--az-im-orange-2),var(--az-im-orange)) !important;
        color: #fff !important;
        box-shadow: 0 7px 17px rgba(249,115,22,.16) !important;
    }

    #m3-app .m3-author {
        margin-bottom: 3px !important;
        font-size: 7px !important;
    }

    #m3-app .m3-bubble p {
        font-size: 10.5px !important;
        line-height: 1.75 !important;
    }

    #m3-app .m3-meta {
        gap: 5px !important;
        margin-top: 4px !important;
        font-size: 7px !important;
    }

    #m3-app .m3-checks.read {
        color: #b8ffe2 !important;
    }

    /* Compact quick replies */
    #m3-app .m3-quick {
        gap: 6px !important;
        padding: 7px 8px !important;
        border-top: 1px solid #e6eaee !important;
        background: rgba(255,255,255,.98) !important;
        scrollbar-width: none !important;
    }

    #m3-app .m3-quick::-webkit-scrollbar {
        display: none !important;
    }

    #m3-app .m3-quick button {
        min-height: 32px !important;
        padding: 6px 10px !important;
        border: 1px solid #dce4ed !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: #506073 !important;
        font-size: 8px !important;
        line-height: 1.3 !important;
        box-shadow: 0 2px 8px rgba(15,23,42,.025) !important;
    }

    #m3-app .m3-quick button:active {
        border-color: #ffba86 !important;
        background: #fff7f1 !important;
        color: #d85e08 !important;
    }

    /* =========================================================
       COMPOSER — ROOT FIX
       Four visible controls, therefore FOUR grid columns.
       This directly fixes the current vertical/squeezed textarea.
       ========================================================= */
    #m3-app .m3-compose-wrap {
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
        border-top: 1px solid #e0e5ea !important;
        background: rgba(248,249,251,.98) !important;
        box-shadow: 0 -8px 22px rgba(15,23,42,.045) !important;
    }

    #m3-app .m3-compose {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: 40px 40px minmax(0,1fr) 46px !important;
        grid-template-rows: auto !important;
        align-items: end !important;
        gap: 6px !important;
    }

    #m3-app #m7-investor-file,
    #m3-app .m7-file-input {
        display: none !important;
    }

    #m3-app .m3-compose button {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        border: 1px solid #e3e8ee !important;
        border-radius: 13px !important;
        background: #fff !important;
        color: #566779 !important;
        box-shadow: 0 4px 11px rgba(15,23,42,.045) !important;
    }

    #m3-app .m3-compose button i {
        font-size: 14px !important;
    }

    #m3-app #m3-emoji-btn {
        grid-column: 1 !important;
    }

    #m3-app #m7-investor-attach {
        grid-column: 2 !important;
    }

    #m3-app #m3-input {
        grid-column: 3 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        max-height: 112px !important;
        margin: 0 !important;
        padding: 10px 13px !important;
        border: 1px solid #dfe5eb !important;
        border-radius: 15px !important;
        background: #fff !important;
        color: #1f2d3d !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: pre-wrap !important;
        overflow-wrap: break-word !important;
        box-shadow: inset 0 1px 2px rgba(15,23,42,.025) !important;
    }

    #m3-app #m3-input:focus {
        border-color: #ffb071 !important;
        box-shadow: 0 0 0 3px rgba(249,115,22,.08) !important;
    }

    #m3-app #m3-send {
        grid-column: 4 !important;
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        border: 0 !important;
        border-radius: 15px !important;
        background: linear-gradient(135deg,var(--az-im-orange-2),var(--az-im-orange)) !important;
        color: #fff !important;
        box-shadow: 0 8px 17px rgba(249,115,22,.23) !important;
    }

    #m3-app #m3-send i {
        font-size: 16px !important;
    }

    #m3-app .m3-compose-wrap > small {
        margin: 5px 3px 0 !important;
        color: #9aa4b0 !important;
        font-size: 6.5px !important;
        line-height: 1.3 !important;
    }

    #m3-app .m3-emoji {
        bottom: calc(69px + env(safe-area-inset-bottom)) !important;
        inset-inline-start: 8px !important;
        max-width: calc(100% - 16px) !important;
        grid-template-columns: repeat(6,32px) !important;
        gap: 4px !important;
        padding: 8px !important;
        border-radius: 16px !important;
    }

    #m3-app .m3-emoji button {
        width: 32px !important;
        height: 32px !important;
    }
}

@media screen and (max-width: 430px) {
    #m3-app.m3-app {
        height: calc(100dvh - 188px) !important;
        min-height: 480px !important;
    }

    #m3-app .m3-person h3 {
        max-width: 160px !important;
        font-size: 12px !important;
    }

    #m3-app .m3-bubble {
        max-width: 88% !important;
    }

    #m3-app .m3-compose {
        grid-template-columns: 38px 38px minmax(0,1fr) 44px !important;
        gap: 5px !important;
    }

    #m3-app .m3-compose button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

    #m3-app #m3-send {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }
}

@media screen and (max-width: 360px) {
    #m3-app .m3-compose {
        grid-template-columns: 36px 36px minmax(0,1fr) 42px !important;
        gap: 4px !important;
    }

    #m3-app .m3-compose button {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 12px !important;
    }

    #m3-app #m3-send {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
    }

    #m3-app #m3-input {
        padding-inline: 10px !important;
    }
}