/* ============================================
   MESSAGES STYLES (Date: 2025-11-10)
   ============================================

   Scope: Messages/DMs page, private messaging system
   Related JS: forumSystem.js (switchMessageView), renderSystem.js
   Related Pages: Messages page

   BEFORE EDITING:
   - Messages styles belong HERE, not elsewhere
   - Shared components belong in components/
   - Theme colors belong in themes/
   - Check CLAUDE.md Section 2d for architecture

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

/* Messages Container and Layout */


/* Private Message Rendering */


/* Message Threading and Replies */


/* Message-Specific Overrides */
/* Duplicate #messages-content removed - layout concern, belongs in layouts.css:131 */
/* Duplicate #messages-content .messages-container removed - layout concern, belongs in layouts.css:139 */

/* Messages list container - MOVED TO layouts.css (layout container) */

/* Messages page */
.messages-container {
    margin: 0;
    /* padding removed - inherits from .content-section */
}

.messages-container h2 {
    color: var(--theme-text-primary);
    margin-bottom: 20px;
}

.message-item {
    background: var(--theme-bg-primary);
    border: 1px solid var(--theme-border-light);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.message-item:hover {
    box-shadow: 0 2px 8px var(--theme-shadow);
}

.message-item.unread {
    background: var(--theme-badge-info-bg);
    border-color: var(--theme-btn-primary-bg);
}

.message-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.message-from {
    font-weight: 600;
    color: var(--theme-text-primary);
}

.message-time {
    color: var(--theme-text-secondary);
    font-size: 12px;
}

.message-preview {
    color: var(--theme-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Level 1 = First reply (blue border) */
/* Level 2 = Second reply (red border) */
/* Level 3 = Third reply (green border) */

/* Level 1 private messages - RED left edge */
.forum-reply.level-1.private-message {
    margin-left: 20px !important;
    border: 2px solid var(--theme-btn-primary-bg) !important; /* Blue outer border */
    border-left: 5px solid var(--theme-badge-danger-bg) !important; /* Red left edge */
    padding-left: 0 !important;
}

/* Level 2 private messages - GREEN left edge */
.forum-reply.level-2.private-message {
    margin-left: 40px !important;
    border: 2px solid var(--theme-btn-primary-bg) !important; /* Blue outer border */
    border-left: 5px solid var(--theme-btn-success-bg) !important; /* Green left edge */
    padding-left: 0 !important;
}

/* Level 3 private messages - ORANGE left edge */
.forum-reply.level-3.private-message {
    margin-left: 60px !important;
    border: 2px solid var(--theme-btn-primary-bg) !important; /* Blue outer border */
    border-left: 5px solid var(--theme-btn-warning-hover-bg) !important; /* Orange left edge */
    padding-left: 0 !important;
}

/* Level 4 private messages - PURPLE left edge */
.forum-reply.level-4.private-message {
    margin-left: 80px !important;
    border: 2px solid var(--theme-btn-primary-bg) !important; /* Blue outer border */
    border-left: 5px solid var(--theme-badge-warning-bg) !important; /* Purple left edge */
    padding-left: 0 !important;
}

/* Level 5+ private messages - PURPLE left edge */
.forum-reply.level-5.private-message,
.forum-reply.level-6.private-message,
.forum-reply.level-7.private-message {
    margin-left: 100px !important;
    border: 2px solid var(--theme-btn-primary-bg) !important; /* Blue outer border */
    border-left: 5px solid var(--theme-badge-warning-bg) !important; /* Purple left edge */
    padding-left: 0 !important;
}
/* Message highlighting */
.message-highlight {
    background-color: var(--theme-badge-warning-bg);
    box-shadow: 0 0 20px var(--theme-warning-overlay-medium);
}

@keyframes highlightPulse {
    0% {
        background-color: var(--theme-badge-warning-bg);
        box-shadow: 0 0 20px var(--theme-warning-overlay-medium);
    }
    100% {
        background-color: transparent;
        box-shadow: none;
    }
}

/* Message thread styling */
.message-thread {
    border: 1px solid var(--theme-border-light);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    background: var(--theme-bg-primary);
}

.message-reply {
    border-left: 3px solid var(--theme-btn-success-bg);
    padding-left: 15px;
    margin-top: 10px;
}

.message-unread {
    background: var(--theme-card-hover-bg);
}

.message-unread.message-thread {
    border-left: 3px solid var(--theme-btn-primary-bg);
}