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

TYPE:
Frontend Popup Messaging Stylesheet

PURPOSE:
Controls the slideout popup messaging interface
used for:
- buyer → seller communication
- seller contact popup
- product page messaging
- quick conversation access

This stylesheet is separate from the main inbox
messaging system CSS and focuses specifically on:
- popup layout
- slideout animation
- popup thread styling
- reply UI
- unread highlighting
- mobile-friendly messaging UX

RESPONSIBILITIES:
- Popup positioning
- Slide-in animation
- Thread container layout
- Reply textarea styling
- Send button styling
- Unread thread indicators
- Popup spacing and responsiveness

PRIMARY UI COMPONENTS:
- .xcat-message-popup
- .xcat-message-popup-inner
- .xcat-message-popup-header
- .xcat-close-popup
- .xcat-popup-seller-name
- .xcat-popup-product-title
- .xcat-message-thread
- .xcat-message-reply-box
- .xcat-send-message-btn
- .xcat-thread-row.unread

VISUAL DESIGN NOTES:
- Right-side slideout panel
- Fixed overlay panel
- White background
- Blue Xcat accent colour (#1e6aff)
- Rounded UI elements
- Light modern marketplace styling

KNOWN FEATURES:
- Animated open/close transition
- Scrollable message area
- Fixed reply box
- Unread thread highlighting
- Hover states
- Button interaction states
- Dynamic thread loading support

KNOWN DEPENDENCIES:
Works with:
- xcat-message-popup.js
- modular messaging AJAX system
- popup message loader
- thread polling system

IMPORTANT ARCHITECTURE NOTE:
This file ONLY controls popup messaging UI.

It does NOT control:
- main inbox page layout
- admin messaging layout
- vendor dashboard messaging
- message polling logic
- AJAX handling

Those belong to:
- xcat-messages.css
- messaging JS modules
- thread refresh modules

KNOWN FUTURE EXPANSION:
- Mobile fullscreen popup
- Typing indicators
- Read receipts
- Emoji support
- Attachment previews
- Image uploads
- Voice notes
- Message reactions
- Thread status indicators
- Vendor online status
- AI quick replies
- Push notification styling
- Theme integration
- Dark mode support

KNOWN CURRENT LIMITATIONS:
- No responsive mobile optimisation yet
- No overlay backdrop
- No attachment UI
- No thread grouping
- No typing animation
- No advanced accessibility styling

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

.xcat-message-popup {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100%;
    background: #ffffff;
    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
    z-index: 999999;
    transition: right 0.3s ease;
    overflow: hidden;
}

.xcat-message-popup.active {
    right: 0;
}

.xcat-message-popup-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 25px;
    box-sizing: border-box;
}

.xcat-message-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-shrink: 0;
}

.xcat-message-popup-header h3 {
    margin: 0;
    font-size: 20px;
}

.xcat-close-popup {
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    user-select: none;
}

.xcat-popup-seller-name {
    font-weight: 700;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.xcat-popup-product-title {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.xcat-message-thread {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 15px;
    background: #fafafa;
    margin-bottom: 20px;
    min-height: 200px;
    box-sizing: border-box;
}

.xcat-message-placeholder {
    color: #777;
    font-size: 14px;
    line-height: 1.5;
}

.xcat-message-reply-box {
    margin-top: auto;
    flex-shrink: 0;
}

#xcat-message-text {
    width: 100%;
    height: 120px;
    padding: 12px;
    border: 1px solid #dddddd;
    border-radius: 10px;
    resize: none;
    box-sizing: border-box;
    font-size: 14px;
    font-family: inherit;
}

#xcat-message-text:focus {
    outline: none;
    border-color: #1e6aff;
}

.xcat-send-message-btn {
    margin-top: 15px;
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 10px;
    background: #1e6aff;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: 0.2s ease;
    box-sizing: border-box;
}

.xcat-send-message-btn:hover {
    opacity: 0.92;
}

.xcat-send-message-btn:active {
    transform: translateY(1px);
}

/* UNREAD THREAD */
.xcat-thread-row.unread {
    background: #eef4ff;
    border-left: 4px solid #1e6aff;
    font-weight: 600;
}

/* MAKE TEXT STRONGER */
.xcat-thread-row.unread .xcat-thread-preview {
    color: #222;
    font-weight: 600;
}

/* OPTIONAL HOVER */
.xcat-thread-row.unread:hover {
    background: #e3edff;
}