/* =========================================================
FILE: xcat-messages.css
LOCATION:
- /xcat-vendor-manager/assets/

TYPE:
Core Inbox Messaging Stylesheet

PURPOSE:
Primary stylesheet for the Xcat messaging system.

Controls:
- inbox messaging layout
- thread list styling
- conversation UI
- chat bubbles
- avatars
- reply interface
- unread indicators
- mobile messaging layout
- bulk action controls

This file is the PRIMARY UI layer for:
- customer messaging
- vendor messaging
- admin messaging
- marketplace conversations

IMPORTANT:
This stylesheet controls the MAIN inbox system.

It is separate from:
- popup messaging CSS
- admin dashboard CSS
- vendor dashboard CSS

Popup messaging uses:
- xcat-message-popup.css

=========================================================
PRIMARY RESPONSIBILITIES
=========================================================

1. Two-column inbox layout
2. Thread list styling
3. Conversation panel styling
4. Live chat bubble rendering
5. Avatar display styling
6. Message input styling
7. Mobile responsive messaging
8. Bulk action bar styling
9. Unread conversation highlighting

=========================================================
PRIMARY UI STRUCTURE
=========================================================

LEFT COLUMN:
- thread list
- bulk actions
- unread threads
- avatars
- previews

RIGHT COLUMN:
- conversation thread
- chat bubbles
- message input
- send button

=========================================================
MAIN LAYOUT CLASSES
=========================================================

.xcat-messages-layout
.xcat-thread-list
.xcat-conversation-panel

=========================================================
THREAD LIST CLASSES
=========================================================

.xcat-thread-row
.xcat-thread-check
.xcat-thread-thumb
.xcat-thread-content
.xcat-thread-user
.xcat-thread-product
.xcat-thread-preview
.xcat-thread-date

=========================================================
MESSAGE THREAD CLASSES
=========================================================

.xcat-message-thread

.xcat-thread-message
.xcat-thread-message.me

.xcat-thread-body
.xcat-thread-author
.xcat-thread-time

=========================================================
LIVE MESSAGE SYSTEM
=========================================================

.xcat-live-message-row
.xcat-own-message

.xcat-live-message-avatar
.xcat-live-message-bubble
.xcat-live-message-date
.xcat-live-message-username

=========================================================
AVATAR SYSTEM
=========================================================

.xcat-avatar-fallback

Supports:
- uploaded avatars
- admin branding image
- fallback letter avatars

=========================================================
INPUT SYSTEM
=========================================================

.xcat-input-wrap
.xcat-send-message-btn
.xcat-popup-send-btn

=========================================================
VISUAL DESIGN NOTES
=========================================================

STYLE:
- eBay-style messaging layout
- modern marketplace UI
- blue Xcat accent (#1e6aff)
- light neutral backgrounds
- rounded message bubbles
- responsive columns

=========================================================
KNOWN FEATURES
=========================================================

- Thread highlighting
- Active thread state
- Unread styling
- Mobile responsive mode
- Chat bubble alignment
- Own-message reversal
- Floating labels
- Avatar fallback system
- Live conversation rendering

=========================================================
KNOWN DEPENDENCIES
=========================================================

Works with:
- xcat-messages.js
- inbox polling system
- AJAX thread loader
- popup messaging system
- avatar-helper.php
- thread refresh endpoints

=========================================================
IMPORTANT ARCHITECTURE NOTES
=========================================================

This file ONLY handles:
VISUAL PRESENTATION.

It does NOT handle:
- polling
- AJAX
- thread loading
- unread logic
- message saving
- thread generation
- permissions
- bulk action processing

Those belong to:
- messaging JS
- AJAX handlers
- PHP messaging modules

=========================================================
KNOWN BUG HISTORY
=========================================================

Previous issues encountered:
- thread jumping
- thread duplication
- active thread highlighting
- unread styling issues
- mobile overflow
- avatar fallback problems
- thread reorder flicker
- bulk bar displacement
- fake thread rendering
- hidden checkbox issues

=========================================================
KNOWN FUTURE EXPANSION
=========================================================

- Dark mode
- Typing indicators
- Read receipts
- Online/offline indicators
- Attachment previews
- Image uploads
- Voice notes
- Emoji picker
- Message reactions
- Thread grouping
- Infinite scroll
- Smooth virtual rendering
- Notification badges
- Accessibility improvements

=========================================================
KNOWN LIMITATIONS
=========================================================

Currently:
- polling-based rendering
- no virtualization
- no advanced animations
- no drag/drop uploads
- no thread grouping
- no accessibility mode
- limited mobile optimisation

========================================================= */

/* =========================================
XCAT MESSAGING SYSTEM — CLEAN FIXED VERSION
========================================= */

/* ================================
GLOBAL
================================ */

.xcat-messages-layout {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* LEFT COLUMN */
.xcat-thread-list {
    flex: 1;
    min-width: 0;
    max-height: 600px;
    overflow-y: auto;
}

/* RIGHT PANEL */
.xcat-conversation-panel {
    flex: 1.5;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* LEFT COLUMN */
.xcat-thread-list {
    flex: 1;
    min-width: 300px;
    max-height: 600px;
    overflow-y: auto;
}

/* ================================
THREAD LIST (EBAY STYLE)
================================ */

/* ROW */
.xcat-thread-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

/* HOVER */
.xcat-thread-row:hover {
    background: #f7f9fc;
}

/* CHECKBOX */
.xcat-thread-check {
    flex: 0 0 30px;
}

/* THUMB */
.xcat-thread-thumb {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* IMAGE */
.xcat-thread-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* CONTENT */
.xcat-thread-content {
    flex: 1;
    min-width: 0;
}

/* USER */
.xcat-thread-user {
    font-size: 14px;
    margin-bottom: 2px;
}

/* SUBJECT */
.xcat-thread-product {
    font-size: 13px;
    color: #555;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* PREVIEW */
.xcat-thread-preview {
    font-size: 13px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* DATE */
.xcat-thread-date {
    flex: 0 0 70px;
    width: 70px;
    text-align: right;
    font-size: 12px;
    color: #888;
}

/* ACTIVE */
.xcat-thread-row.active {
    background: #eaf1ff;
}

/* ================================
BULK BAR
================================ */

.xcat-bulk-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.xcat-bulk-bar button {
    background: #1e6aff;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.xcat-bulk-bar button:hover {
    background: #1554cc;
}

/* ================================
CONVERSATION PANEL
================================ */

.xcat-message-thread {
    border: 1px solid #ddd;
    padding: 15px;
    min-height: 300px;
    max-height: 420px;
    overflow-y: auto;
    margin-bottom: 15px;
    background: #fff;
    border-radius: 8px;
}

/* ================================
CHAT MESSAGES
================================ */

.xcat-thread-message {
    max-width: 70%;
    margin-bottom: 12px;
}

.xcat-thread-message.me {
    margin-left: auto;
    text-align: right;
}

.xcat-thread-body {
    background: #f1f1f1;
    padding: 8px 10px;
    border-radius: 10px;
    display: inline-block;
    font-size: 13px;
}

.xcat-thread-message.me .xcat-thread-body {
    background: #dce8ff;
}

.xcat-thread-author {
    font-size: 12px;
    margin-bottom: 3px;
    color: #666;
}

.xcat-thread-time {
    font-size: 10px;
    color: #999;
}

/* ================================
INPUT
================================ */

.xcat-input-wrap {
    position: relative;
    margin-bottom: 10px;
}

.xcat-input-wrap textarea {
    width: 100%;
    height: 100px;
    padding: 14px 10px 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    resize: vertical;
}

.xcat-input-wrap label {
    position: absolute;
    left: 10px;
    top: 12px;
    font-size: 14px;
    color: #888;
    pointer-events: none;
    transition: 0.2s;
    background: #fff;
    padding: 0 4px;
}

.xcat-input-wrap textarea:focus + label,
.xcat-input-wrap textarea:not(:placeholder-shown) + label {
    top: -8px;
    font-size: 11px;
    color: #1e6aff;
}

/* SEND BUTTON */
.xcat-send-message-btn {
    background: #1e6aff;
    color: #fff;
    padding: 12px;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.xcat-send-message-btn:hover {
    background: #1554cc;
}

/* POPUP SEND BUTTON (MATCH INBOX STYLE) */
.xcat-popup-send-btn {
    background: #1e6aff;
    color: #fff;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.2s;
}

.xcat-popup-send-btn:hover {
    background: #1554cc;
}

/* ================================
MOBILE
================================ */

@media (max-width: 768px) {
    .xcat-messages-layout {
        flex-direction: column;
    }

    .xcat-conversation-panel {
        width: 100%;
        min-width: 100%;
    }
}

.xcat-live-message-row{
    display:flex;
    gap:12px;
    margin-bottom:18px;
    align-items:flex-start;
}

.xcat-own-message{
    flex-direction:row-reverse;
}

.xcat-live-message-avatar{
    flex-shrink:0;
}

.xcat-live-message-bubble{
    background:#f5f5f5;
    padding:14px 16px;
    border-radius:14px;
    max-width:70%;
}

.xcat-own-message .xcat-live-message-bubble{
    background:#dfeaff;
}

.xcat-live-message-date{
    font-size:12px;
    color:#777;
    margin-top:8px;
}

.xcat-live-message-avatar{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    flex-shrink:0;
    width:60px;
}

.xcat-live-message-row{
    display:flex;
    gap:12px;
    margin-bottom:18px;
    align-items:flex-start;
}

.xcat-own-message{
    flex-direction:row-reverse;
}

.xcat-live-message-bubble{
    background:#f5f5f5;
    padding:14px 16px;
    border-radius:14px;
    max-width:70%;
}

.xcat-own-message .xcat-live-message-bubble{
    background:#dfeaff;
}

.xcat-live-message-username{
    font-size:11px;
    color:#777;
    text-align:center;
    line-height:1.2;
    margin-top:4px;
    max-width:60px;
    word-break:break-word;
}

.xcat-live-message-avatar img{
    width:32px;
    height:32px;
    border-radius:50%;
    object-fit:cover;
    display:block;
}

.xcat-avatar-fallback{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#1e6aff;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:16px;
}

.xcat-live-message-bubble,
.xcat-live-message-content,
.xcat-thread-body {
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word;
    white-space: pre-wrap;
    max-width: 100%;
    box-sizing: border-box;
}

.xcat-live-message-bubble {
    min-width: 0;
}

.xcat-message-stats {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.xcat-bulk-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}