/* --- Modern Forum Pro v5.3 Styles --- */

/* ... (All styles from v5.2 are here and unchanged) ... */
:root { --bg-dark-1: #0b141a; --bg-dark-2: #111b21; --bg-dark-3: #202c33; --bg-dark-4: #2a3942; --text-light-1: #e9edef; --text-light-2: #8696a0; --accent-green: #00a884; --accent-green-dark: #005c4b; --accent-blue: #53bdeb; --error-red: #d9534f; --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-family: var(--font-family); margin: 0; background-color: var(--bg-dark-1); overflow: hidden; }
.mfp-app { display: flex; height: 100vh; max-height: 100vh; overflow: hidden; color: var(--text-light-1); position: relative; }
.mfp-sidebar { width: 350px; flex-shrink: 0; background: var(--bg-dark-2); border-right: 1px solid var(--bg-dark-4); display: flex; flex-direction: column; }
.mfp-sidebar-header { padding: 10px 15px; background: var(--bg-dark-3); border-bottom: 1px solid var(--bg-dark-4); } .mfp-sidebar-header h3 { margin: 0 0 10px 0; }
.mfp-new-thread-form { display: flex; gap: 10px; } #thread_title { flex: 1; background: var(--bg-dark-4); border: 1px solid transparent; border-radius: 20px; padding: 8px 15px; color: var(--text-light-1); outline: none; min-width: 0; } #create_thread_btn { flex-shrink: 0; border-radius: 50%; border: none; background: var(--accent-green); color: #fff; width: 40px; height: 40px; cursor: pointer; display: flex; justify-content: center; align-items: center; padding: 0; }
.mfp-thread-list { flex: 1; overflow-y: auto; } .mfp-thread-item { display: flex; align-items: center; padding: 15px; cursor: pointer; border-bottom: 1px solid var(--bg-dark-4); transition: background-color 0.2s ease; } .mfp-thread-item:hover { background: var(--bg-dark-3); } .mfp-thread-item.active { background: var(--bg-dark-4); } .mfp-thread-item img { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; } .mfp-thread-info { overflow: hidden; } .mfp-thread-title { display: block; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mfp-thread-author { font-size: 0.9em; color: var(--text-light-2); }
.mfp-chat-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-dark-1); background-image: url("https://i.redd.it/qwd83s31y4051.png"); background-size: 350px; background-blend-mode: overlay; min-width: 0; }
.mfp-chat-header { display: flex; align-items: center; padding: 10px 20px; background: var(--bg-dark-3); border-bottom: 1px solid var(--bg-dark-4); flex-shrink: 0; } #mfp_back_btn { display: none; margin-right: 15px; background: none; border: none; color: var(--text-light-1); cursor: pointer; padding: 5px; }
.mfp-messages-container { position:relative; flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
.mfp-welcome-screen, .mfp-no-messages { margin: auto; text-align: center; color: var(--text-light-2); }
.mfp-message { display: flex; margin-bottom: 12px; max-width: 75%; align-self: flex-start; align-items: flex-end; } .mfp-message.mfp-msg-mine { align-self: flex-end; } .mfp-message.mfp-message-pending { opacity: 0.7; }
.mfp-avatar { width: 35px; height: 35px; border-radius: 50%; margin-right: 10px; flex-shrink: 0; } .mfp-message.mfp-msg-mine .mfp-avatar { display: none; }
.mfp-bubble { background: var(--bg-dark-3); padding: 8px 12px; border-radius: 10px; word-wrap: break-word; } .mfp-message.mfp-msg-mine .mfp-bubble { background: var(--accent-green-dark); }
.mfp-bubble-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .mfp-bubble-header b { color: var(--accent-blue); font-size: 0.9em; }
.mfp-timestamp { font-size: 0.75em; color: var(--text-light-2); margin-left: 15px; display: flex; align-items: center; gap: 4px; }
.mfp-status-icon { display: none; } .mfp-message-pending .mfp-status-icon.pending { display: inline-block; } .mfp-msg-mine:not(.mfp-message-pending) .mfp-status-icon.sent { display: inline-block; } .mfp-status-icon svg { width: 16px; height: 16px; }
.mfp-bubble p { margin: 0; line-height: 1.4; } .mfp-chat-img { max-width: 100%; max-height: 300px; margin-top: 8px; border-radius: 8px; cursor: pointer; } .mfp-bubble audio { margin-top: 8px; max-width: 100%; height: 40px; }
.mfp-message-form { display: flex; align-items: center; padding: 10px 15px; background: var(--bg-dark-3); gap: 10px; flex-shrink: 0; }
.mfp-message-form button { flex-shrink: 0; border: none; background: none; color: var(--text-light-2); cursor: pointer; border-radius: 50%; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; transition: background-color 0.2s; padding: 0; } .mfp-message-form button:hover { background-color: var(--bg-dark-4); } #voice_btn.is-recording { color: var(--error-red); } #send_btn { background: var(--accent-green); color: white; } #send_btn:hover { background: var(--accent-green-dark); } .mfp-message-form button svg { width: 24px; height: 24px; }
#message_input { flex: 1; background: var(--bg-dark-4); border: 1px solid transparent; border-radius: 20px; padding: 12px 18px; color: var(--text-light-1); outline: none; font-size: 1rem; min-width: 0; } #message_input:focus { border-color: var(--accent-green); }

/* --- NEW: LOADER STYLES --- */
.mfp-loader-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.2); z-index: 100; }
.mfp-loader-spinner { width: 50px; height: 50px; border: 5px solid var(--bg-dark-4); border-top-color: var(--accent-green); border-radius: 50%; animation: mfp-spin 1s linear infinite; }
@keyframes mfp-spin { to { transform: rotate(360deg); } }

/* --- NEW: FAILED MESSAGE STYLES --- */
.mfp-message.mfp-message-failed .mfp-bubble { background: #5c2a2a; }
.mfp-message.mfp-message-failed .mfp-timestamp { color: var(--error-red); font-weight: bold; }

@media (max-width: 768px) { .mfp-sidebar { width: 100%; height: 100%; position: absolute; z-index: 10; transform: translateX(0); transition: transform 0.3s ease-in-out; } .mfp-chat-area { display: none; width: 100%; position: absolute; height: 100%; z-index: 5; } .mfp-app.mfp-mobile-chat-view .mfp-sidebar { transform: translateX(-100%); } .mfp-app.mfp-mobile-chat-view .mfp-chat-area { display: flex; } #mfp_back_btn { display: flex; align-items: center; } .mfp-message { max-width: 90%; } }
/* Auth styles are unchanged */
.mfp-auth-container{display:flex;justify-content:center;align-items:center;min-height:80vh;padding:20px}.mfp-auth-box{width:100%;max-width:400px;background:var(--bg-dark-2);border-radius:8px;padding:2rem;color:var(--text-light-1);box-shadow:0 10px 25px rgba(0,0,0,.3)}.mfp-auth-tabs{display:flex;margin-bottom:1.5rem}.mfp-tab-btn{flex:1;padding:.8rem;border:none;background:0 0;color:var(--text-light-2);cursor:pointer;font-size:1rem;border-bottom:2px solid var(--bg-dark-3);transition:all .2s ease}.mfp-tab-btn.active,.mfp-tab-btn:hover{color:var(--accent-green);border-bottom-color:var(--accent-green)}.mfp-tab-content{display:none;flex-direction:column;gap:1rem}.mfp-tab-content.active{display:flex}.mfp-auth-box input{width:100%;padding:.8rem;background:var(--bg-dark-3);border:1px solid var(--bg-dark-4);border-radius:5px;color:var(--text-light-1);font-size:1rem;outline:0}.mfp-auth-box input:focus{border-color:var(--accent-green)}.mfp-auth-box button{padding:.8rem;border:none;border-radius:5px;background:var(--accent-green);color:#fff;font-size:1.1rem;cursor:pointer;transition:background .2s}.mfp-auth-box button:hover{background:var(--accent-green-dark)}.mfp-auth-error{background-color:var(--error-red);color:#fff;padding:10px;border-radius:5px;margin-bottom:1rem;font-size:.9em;text-align:center;display:none}