/* ========================================================== */
/* ==                  CSS CHO HỘP THƯ                       == */
/* ========================================================== */

/* Lớp phủ cho panel hộp thư */
#mailbox-panel-overlay {
    z-index: 1010; /* Nằm trên các lớp phủ khác */
}

/* Panel hộp thư chính */
#mailbox-panel-content {
    width: 90%;
    max-width: 700px;
    height: 85vh;
    max-height: 600px;
    background: #1f1f23;
    border: 1px solid #555;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mailbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid #444;
}

.mailbox-header h3 {
    margin: 0;
    color: #E48F45;
    font-size: 1.4em;
}

/* Danh sách thư */
#mailbox-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 8px;
}

.mail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-bottom: 1px solid #3a3a3f;
    cursor: pointer;
    transition: background-color 0.2s;
}
.mail-item:hover {
    background-color: #2a2a2e;
}

/* Trạng thái chưa đọc */
.mail-item.unread .mail-info {
    font-weight: bold;
    color: #fff;
}
.mail-item.unread {
    background-color: rgba(228, 143, 69, 0.1);
}

.mail-icon {
    font-size: 1.8em;
    color: #E48F45;
    position: relative; /* Dành cho icon vật phẩm */
}

/* Logic hiển thị icon thư đóng/mở */
.mail-item.unread .fa-envelope-open,
.mail-item.read .fa-envelope {
    display: none;
}
.mail-item.unread .fa-envelope,
.mail-item.read .fa-envelope-open {
    display: inline-block;
}

/* Icon báo có vật phẩm đính kèm */
.attachment-indicator {
    position: absolute;
    bottom: -2px;
    right: -5px;
    font-size: 0.5em;
    color: #ffc107;
    background: #1f1f23;
    border-radius: 50%;
    padding: 3px;
}

.mail-info {
    flex-grow: 1;
}

.mail-sender {
    font-size: 1em;
    color: #e0e0e0;
}

.mail-summary {
    font-size: 0.9em;
    color: #aaa;
    margin: 4px 0 0 0;
    font-weight: normal;
    
    /* Các thuộc tính đã có */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    max-width: 450px; /* Hoặc một giá trị phù hợp với layout của bạn */
}

.mail-timestamp {
    font-size: 0.8em;
    color: #888;
    white-space: nowrap;
}

/* Các nút hành động ở cuối panel */
.mailbox-actions {
    display: flex;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid #444;
}
.mailbox-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid #555;
    background-color: #3e3e42;
    color: #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.mailbox-btn:hover {
    background-color: #555;
    border-color: #777;
}

.delete-read-btn {
    background-color: #a13a3a;
    border-color: #b55;
}
.delete-read-btn:hover {
    background-color: #c0392b;
}


/* ========================================================== */
/* ==             CSS CHO CHI TIẾT THƯ (MODAL CON)         == */
/* ========================================================== */
#mail-view-modal-overlay {
    z-index: 1020; /* Nằm trên cả panel hộp thư */
}

#mail-view-header {
    text-align: left;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}
#mail-view-sender { margin: 0; color: #E48F45; }
#mail-view-timestamp { font-size: 0.8em; color: #999; }

#mail-view-body {
    text-align: left;
    line-height: 1.6;
    color: #ccc;
    margin-bottom: 20px;
    max-height: 200px;
    overflow-y: auto;
}

/* Khu vực vật phẩm */
#mail-view-attachments {
    text-align: left;
    padding: 10px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    margin-bottom: 20px;
}
#mail-view-attachments h5 { margin: 0 0 10px 0; color: #E48F45; }
.attachment-item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.attachment-item img {
    width: 32px;
    height: 32px;
}

.mail-view-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.mail-view-actions .delete {
    background-color: #c0392b;
}

/* ========================================================== */
/* ==   CSS HIỂN THỊ THÔNG BÁO THƯ (PHIÊN BẢN CUỐI CÙNG)   == */
/* ========================================================== */

/* Đảm bảo nút cha luôn là gốc định vị */
#open-mailbox-btn {
    position: relative !important;
}

/* Định dạng cho dấu chấm than khi ẩn */
#open-mailbox-btn > .notification-dot {
    display: none !important; /* QUAN TRỌNG: Mặc định luôn ẩn */
    position: absolute !important;
    z-index: 10 !important;
    top: 0px !important;
    right: 0px !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #ffc107 !important;
    color: #111 !important;
    border-radius: 50% !important;
    border: 2px solid white !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Khi có class .has-unread, ghi đè `display: none` để hiện ra */
#open-mailbox-btn.has-unread > .notification-dot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}