/* Inbox tabs */
.inbox-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-md);
}

.inbox-tab {
    position: relative;
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    color: var(--text);
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
}

.inbox-tab:hover { background: var(--social-bg); }

.inbox-tab.active {
    color: var(--text-h);
    border-bottom-color: var(--accent);
}

.unread-badge {
    display: inline-block;
    margin-left: var(--space-xs);
    min-width: 18px;
    padding: 0 6px;
    background: var(--danger, #e03030);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    text-align: center;
    vertical-align: middle;
}

.unread-badge.hidden { display: none; }

/* Panels */
.inbox-panel {
    display: none;
}

.inbox-panel.active { display: block; }

.inbox-coming-soon {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text);
    font-size: 18px;
}

/* Actions bar */
.inbox-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
}

.bulk-delete-btn.hidden { display: none; }

/* Message list */
.message-list {}

.message-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.message-item:hover { background: var(--social-bg); }

.message-item.unread {
    font-weight: 600;
    border-left: 3px solid var(--accent);
}

.message-checkbox { cursor: pointer; }

.message-sender {
    min-width: 100px;
    color: var(--text-h);
    font-size: 14px;
}

.message-subject {
    flex: 1;
    color: var(--text);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.inbox-empty {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text);
}

.inbox-empty.hidden { display: none; }

/* Compose form */
.compose-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) 0;
}

.compose-to-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.compose-to-label {
    font-weight: 600;
    color: var(--text-h);
}

.recipient-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    flex: 1;
}

.recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 2px 8px;
    background: var(--accent-bg);
    color: var(--text-h);
    border-radius: 12px;
    font-size: 13px;
}

.chip-remove {
    border: none;
    background: transparent;
    color: var(--text-h);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.compose-subject-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

#compose-subject {
    flex: 1;
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text-h);
}

.compose-subject-icons {
    display: inline-flex;
    gap: var(--space-xs);
    font-size: 16px;
}

.compose-body {
    min-height: 120px;
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text-h);
    outline: none;
    word-break: break-word;
}

.compose-body:empty:before {
    content: attr(data-placeholder);
    color: var(--text);
    pointer-events: none;
}

.compose-char-count {
    font-size: 12px;
    color: var(--text);
    text-align: right;
}

.compose-char-count .at-limit,
.compose-char-count.at-limit #compose-char-count,
#compose-char-count.at-limit {
    color: var(--danger, #e03030);
}

.compose-image-preview {
    max-width: 100%;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.compose-image-preview.hidden { display: none; }

/* Toolbar */
.compose-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.toolbar-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-h);
    cursor: pointer;
    font-size: 14px;
    border-radius: var(--radius);
}

.toolbar-btn:hover { background: var(--social-bg); border-color: var(--border); }

.toolbar-btn.hidden { display: none; }

.toolbar-separator { color: var(--border); }

.toolbar-popup-wrap {
    position: relative;
}

.toolbar-popup {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    z-index: 10;
    display: flex;
    flex-direction: column;
}

.toolbar-popup.hidden { display: none; }

.toolbar-popup button {
    padding: var(--space-sm);
    background: transparent;
    border: none;
    text-align: left;
    color: var(--text-h);
    cursor: pointer;
}

.toolbar-popup button:hover { background: var(--social-bg); }

/* Recipient selector modal */
.modal.hidden { display: none; }

.recipient-modal .modal-content {
    max-height: 70vh;
    overflow-y: auto;
}

.recipient-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: var(--space-md) 0;
}

.recipient-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs);
    cursor: pointer;
}

.recipient-row:hover { background: var(--social-bg); }

.recipient-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-bg);
    background-size: cover;
    background-position: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-h);
}

.recipient-name { color: var(--text-h); }

.recipient-selected-count {
    font-size: 13px;
    color: var(--text);
    margin: var(--space-sm) 0;
}

.recipient-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin: var(--space-sm) 0;
}

/* Gift selector */
.gift-inventory-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: var(--space-md) 0;
    max-height: 50vh;
    overflow-y: auto;
}

.gift-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.gift-row.selected {
    border-color: var(--accent);
    background: var(--accent-bg);
}

/* Message detail */
.message-detail {
    padding: var(--space-md) 0;
}

.message-detail.hidden { display: none; }

.message-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.message-detail-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.message-detail-meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.msg-sender { font-weight: 600; color: var(--text-h); }
.msg-date { font-size: 12px; color: var(--text); }

.msg-body {
    padding: var(--space-md) 0;
    line-height: 1.6;
    color: var(--text-h);
    word-wrap: break-word;
}

.msg-attachments { margin: var(--space-md) 0; }

.attachment-item {
    padding: var(--space-sm);
    background: var(--accent-bg);
    border-radius: var(--radius);
    margin-bottom: var(--space-xs);
    color: var(--text-h);
}

.msg-vote {
    display: flex;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

/* Fix 1-2: pagination hidden helpers */
.recipient-pagination.hidden { display: none; }
#recipient-prev.hidden,
#recipient-next.hidden { visibility: hidden; }

/* Fix 3: All chip */
.recipient-chip-all { background: var(--accent); color: #fff; font-weight: 600; }

/* Fix 4: gift selector rows */
.gift-quantity-row { margin: var(--space-sm) 0; }
.gift-quantity-row.hidden { display: none; }

.gift-inventory-list .gift-item {
    cursor: pointer;
    padding: var(--space-sm);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.gift-inventory-list .gift-item.selected {
    background: var(--accent-bg);
    border-color: var(--accent);
}

.gift-item-name { font-weight: 600; color: var(--text-h); flex: 1; }
.gift-item-type { color: var(--text); font-size: 12px; }
.gift-item-qty { color: var(--text); font-size: 12px; }

/* Fix 5: inline image in compose body */
.compose-body .image-wrapper {
    display: inline-block;
    max-width: 100%;
    position: relative;
    cursor: default;
}
.compose-body .image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}
.compose-body .image-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
}
.compose-body .image-wrapper .resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    background: rgba(0, 0, 0, 0.3);
}

/* Fix 7: claim section */
.msg-claim-section {
    text-align: center;
    margin: var(--space-lg) 0;
    padding: var(--space-md) 0;
}
.msg-claim-section.hidden { display: none; }

.claim-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 1.1em;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.5s ease;
    margin: 0 var(--space-xs);
}
.claim-btn:hover { opacity: 0.9; }
.claim-btn.hidden { display: none; }
.claim-btn.fading { opacity: 0; }

.claimed-status {
    color: var(--text);
    font-style: italic;
}
.claimed-status.hidden { display: none; }

/* Fix 8: message detail layout */
.message-detail-top-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.action-spacer { width: 24px; display: inline-block; }

.message-detail-footer {
    display: flex;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
    margin-top: var(--space-lg);
}

.action-btn.destructive {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    opacity: 0.75;
}
.action-btn.destructive:hover { opacity: 1; }

/* Custom alert */
.custom-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-secondary, #333);
    color: var(--text-primary, #fff);
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1em;
    z-index: 10000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    text-align: center;
    max-width: 80%;
}
.custom-alert.fading {
    opacity: 0;
    transition: opacity 0.5s;
}

/* Custom confirm */
.custom-confirm-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.custom-confirm {
    background: var(--bg-secondary, #333);
    color: var(--text-primary, #fff);
    padding: 24px 32px;
    border-radius: 8px;
    text-align: center;
    max-width: 80%;
}
.custom-confirm-buttons {
    margin-top: 16px;
    display: flex;
    gap: 16px;
    justify-content: center;
}
.custom-confirm-buttons button {
    padding: 8px 24px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}
.confirm-yes { background: var(--accent, #4CAF50); color: #fff; }
.confirm-no { background: var(--bg-tertiary, #555); color: #fff; }

/* Color picker panel */
.color-picker-panel {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary, #333);
    border: 1px solid var(--border, #555);
    border-radius: 8px;
    padding: 12px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: move;
}
.color-picker-panel.hidden { display: none; }
.color-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: var(--text-primary, #fff);
    cursor: move;
}
.color-picker-close {
    background: transparent;
    border: none;
    color: var(--text-primary, #fff);
    cursor: pointer;
    font-size: 1.2em;
    line-height: 1;
    padding: 0 4px;
}
.color-swatches {
    display: grid;
    grid-template-columns: repeat(6, 28px);
    gap: 4px;
}
.swatch {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}
.swatch:hover { border-color: var(--text-primary, #fff); }
.color-custom-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85em;
    color: var(--text-secondary, #ccc);
}
.color-custom-row input[type="color"] {
    width: 32px;
    height: 24px;
    border: none;
    cursor: pointer;
}

/* Sent items */
.sent-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    cursor: default;
}

.sent-subject {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sent-recipients { font-size: 12px; color: var(--text); }
.sent-date { font-size: 12px; color: var(--text); }

.empty-network-message {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-secondary, #999);
    font-size: 1em;
}

.priority-card {
    padding: 12px;
    border: 1px solid var(--border, #444);
    border-radius: 8px;
    margin-bottom: 12px;
}
.priority-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    font-size: 0.9em;
}
.priority-actions {
    display: flex;
    gap: 8px;
}