.container { max-width: 1200px; margin: 0 auto; background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; }

#emailAddress { flex: 1; font-family: monospace; font-size: 1rem; color: #2d3748; word-break: break-all; }

.copy-btn, .refresh-btn { background: #667eea; color: white; border: none; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.2s; }

// if selected message still exists, keep it selected, else clear detail if (selectedMessageId && currentMessages.find(m => m.id === selectedMessageId)) { displayMessageDetail(selectedMessageId); } else if (currentMessages.length > 0 && !selectedMessageId) { // auto-select first message selectAndDisplayMessage(currentMessages[0].id); } else if (currentMessages.length === 0) { document.getElementById('emailDetail').innerHTML = '<div class="empty-detail">📭 Inbox is empty</div>'; selectedMessageId = null; } }

<!-- Email Detail View --> <div class="email-detail" id="emailDetail"> <div class="empty-detail"> ✨ Select an email to read its content </div> </div> </div>