/* File revised to remove the conflicting button styles. */

/* Base styles for new theme */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #f0f0f0; margin: 0; }
.container { background-color: transparent; box-shadow: none; padding: 0; }
.content-area { padding: 60px 15px 40px; }
@media (min-width: 768px) { .content-area { padding-top: 20px; } }
.main-content-box { display: block; width: 100%; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.6); padding: 20px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); }
@media (min-width: 768px) { .main-content-box { margin: 0 auto; display: block; width: auto; max-width: 80%; padding: 25px; } .main-content-box.wide { max-width: 1200px; } }

/* Form element styling for dark theme */
.main-content-box p, .main-content-box label, .main-content-box strong { color: #f0f0f0; }
.main-content-box input[type="text"], .main-content-box textarea { width: 100%; padding: 10px; border: 1px solid #555; border-radius: 4px; box-sizing: border-box; font-size: 1rem; background-color: #1a1a1a; color: #fff; }
.main-content-box input[readonly] { background-color: #333; cursor: not-allowed; }
#char-count { text-align: right; font-size: 0.8em; color: #aaa; margin-top: 5px; }

/*
 * REMOVED conflicting button styles from here.
 * The styling will now be inherited from the '.button' class
 * in 'style_angelchart_default.css'.
*/

/* Feedback & Status Messages styling */
.feedback { padding: 15px; margin-bottom: 20px; border-radius: 4px; border: 1px solid transparent; }
.feedback.error { background-color: #842029; color: #ea868f; border-color: #58151c; }
.status-box { background-color: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 10px; margin: 0 auto 20px auto; border-radius: 4px; max-width: 500px; text-align: center; }
.status-active { color: #198754; font-weight: bold; }
.status-error { color: #dc3545; font-weight: bold; }
.debug-info { margin-top: 10px; font-size: 0.9em; border-top: 1px dashed #444; padding-top: 10px; text-align: left; }

/* CONFIRMATION BOX STYLES */
.confirmation-box { text-align: center; padding: 40px 20px; }
.confirmation-box h2 { color: #fff; margin-top: 15px; margin-bottom: 10px; font-size: 2em; }
.confirmation-text { font-size: 1.1em; color: #ccc; margin-bottom: 30px; }
.confirmation-icon { width: 80px; height: 80px; display: block; margin: 0 auto 20px auto; }
.confirmation-icon circle { stroke: #28a745; stroke-width: 2; stroke-dasharray: 166; stroke-dashoffset: 166; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; }
.confirmation-icon path { stroke: #28a745; stroke-width: 2; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; }
@keyframes stroke { 100% { stroke-dashoffset: 0; } }

/* Two-column layout for read page */
.message-layout { display: flex; flex-direction: column; gap: 30px; }
@media (min-width: 992px) { .message-layout { flex-direction: row; } }
.main-column { flex: 3; min-width: 0; } .sidebar-column { flex: 1; min-width: 0; background-color: rgba(0,0,0,0.3); padding: 15px; border-radius: 8px; }
.main-column h2, .sidebar-column h3 { margin-top: 0; border-bottom: 1px solid #555; padding-bottom: 10px; }
.messages-list, .read-archive-list { list-style-type: none; padding: 0; margin: 0; } .messages-list { max-height: 60vh; overflow-y: auto; padding-right: 10px; }
.read-archive-list { max-height: 60vh; overflow-y: auto; }
.read-archive-list li { padding: 10px; border-bottom: 1px solid #444; cursor: pointer; transition: background-color 0.2s ease-in-out; }
.read-archive-list li:hover { background-color: rgba(255, 255, 255, 0.1); } .read-archive-list li small { color: #999; }
.message-item { border: 1px solid #444; background-color: rgba(10, 10, 10, 0.7); padding: 15px; margin-bottom: 15px; border-radius: 5px; border-left: 5px solid #555; }
.message-item.unread { border-left-color: #3498db; } .message-item.flagged { border-left-color: #f1c40f; }
.message-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 10px; font-size: 0.9em; color: #ccc; }
.status-read { color: #28a745; font-weight: bold; } .message-actions label { font-weight: normal; cursor: pointer; color: #aadeff; }
.message-body { line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; color: #fff; }
.flagged-notice { margin-top: 10px; padding: 5px; background-color: #664d03; color: #ffecb5; border-radius: 3px; font-size: 0.85em; text-align: center; }

/* Modal styles */
.modal-overlay { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; }
.modal-content { background: #2b2b2b; color: #f0f0f0; padding: 30px; border-radius: 8px; width: 90%; max-width: 700px; position: relative; border: 1px solid #555; box-shadow: 0 5px 20px rgba(0,0,0,0.5); }
.modal-close { position: absolute; top: 10px; right: 15px; font-size: 28px; font-weight: bold; color: #999; cursor: pointer; transition: color 0.2s ease; }
.modal-close:hover { color: #fff; }
.modal-content .message-header { color: #ddd; }
.modal-content .message-body { color: #fff; font-size: 1.1em; max-height: 60vh; overflow-y: auto; }