/* =====================================================
   AirNotez42 Messages Layout Fix
   Keeps top area as-is, fixes conversation list + centered chat bubbles
   File: assets/css/an42-messages-layout-fix.css
   ===================================================== */

/* Main split: conversations left, messages right */
.discord-layout,
.messages-app{
    display:grid !important;
    grid-template-columns:340px minmax(0, 1fr) !important;
    gap:22px !important;
    align-items:stretch !important;
}

/* Left conversation column */
.discord-sidebar,
.messages-left{
    width:100% !important;
    max-width:340px !important;
    min-width:280px !important;
    height:720px !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
}

/* Conversation list scrolls on left */
.conversation-list{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    overflow-y:auto !important;
    padding-right:4px !important;
    margin-top:14px !important;
}

/* Conversation row layout */
.conversation{
    display:grid !important;
    grid-template-columns:48px minmax(0, 1fr) auto !important;
    align-items:center !important;
    gap:12px !important;
    width:100% !important;
    min-height:74px !important;
    padding:12px !important;
    border-radius:18px !important;
    text-align:left !important;
}

.conversation .avatar,
.conversation .mini-avatar{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
}

.conversation-info{
    min-width:0 !important;
    overflow:hidden !important;
}

.conversation-info h3,
.conversation-info p,
.conversation-info small{
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.conversation.active,
.conversation:hover{
    transform:translateX(3px) !important;
}

/* Right chat area */
.discord-chat,
.messages-right{
    min-width:0 !important;
    height:720px !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    overflow:hidden !important;
}

/* Header remains top, thread becomes centered */
.chat-thread,
.message-view{
    width:100% !important;
    max-width:980px !important;
    margin:0 auto !important;
    padding:24px !important;
    overflow-y:auto !important;
}

/* Center the message column */
.chat-message{
    width:100% !important;
    max-width:840px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:18px !important;
    display:grid !important;
    grid-template-columns:48px minmax(0, 1fr) !important;
    gap:12px !important;
    align-items:start !important;
}

/* Own messages still stay in the same centered lane, just bubble aligns right */
.chat-message.own-message{
    grid-template-columns:minmax(0,1fr) 48px !important;
}

.chat-message.own-message .message-avatar{
    grid-column:2 !important;
    grid-row:1 !important;
}

.chat-message.own-message .message-content{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:end !important;
    width:min(100%, 720px) !important;
}

.chat-message.their-message .message-content,
.chat-message:not(.own-message) .message-content{
    justify-self:start !important;
    width:min(100%, 720px) !important;
}

/* Bubble polish */
.message-bubble{
    width:fit-content !important;
    max-width:100% !important;
    min-width:180px !important;
    border-radius:20px !important;
    padding:14px 16px !important;
    line-height:1.55 !important;
}

.own-message .message-bubble{
    margin-left:auto !important;
    text-align:left !important;
}

.their-message .message-bubble,
.chat-message:not(.own-message) .message-bubble{
    margin-right:auto !important;
    text-align:left !important;
}

/* Meta aligns with bubble */
.own-message .message-meta{
    justify-content:flex-end !important;
}

.their-message .message-meta,
.chat-message:not(.own-message) .message-meta{
    justify-content:flex-start !important;
}

/* Bottom input stays full width of chat panel */
.chat-input-bar{
    width:100% !important;
    max-width:980px !important;
    margin:0 auto !important;
}

/* Existing older message view fallback */
.message-view{
    display:block !important;
}

.message-view .message-bubble{
    max-width:760px !important;
    margin:18px auto !important;
}

/* Empty state centered */
.message-empty-state,
.empty-message-list{
    text-align:center !important;
}

/* Mobile: stack conversations above messages */
@media(max-width:950px){
    .discord-layout,
    .messages-app{
        grid-template-columns:1fr !important;
    }

    .discord-sidebar,
    .messages-left{
        max-width:100% !important;
        height:auto !important;
        max-height:420px !important;
    }

    .discord-chat,
    .messages-right{
        height:auto !important;
        min-height:620px !important;
    }

    .chat-thread,
    .message-view{
        max-height:620px !important;
    }
}

@media(max-width:700px){
    .chat-message,
    .chat-message.own-message{
        grid-template-columns:1fr !important;
        max-width:100% !important;
    }

    .chat-message .message-avatar{
        display:none !important;
    }

    .chat-message.own-message .message-content,
    .chat-message.their-message .message-content,
    .chat-message:not(.own-message) .message-content{
        grid-column:1 !important;
        width:100% !important;
    }

    .message-bubble{
        width:100% !important;
    }

    .chat-input-bar{
        grid-template-columns:1fr !important;
    }
}