/* ==========================================
   1. Auth Pages (Login & Register)
   ========================================== */
.auth-body { margin: 0; font-family: 'Segoe UI', sans-serif; background: #e9ecef; display: flex; justify-content: center; align-items: center; height: 100vh; }
.app-container { width: 100%; max-width: 380px; background: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: hidden; display: flex; flex-direction: column; }
.input-group { margin-bottom: 12px; }
.input-group label { display: block; font-size: 12px; margin-bottom: 5px; opacity: 0.9; }
.input-group input { width: 100%; padding: 10px; border: none; border-radius: 4px; box-sizing: border-box; font-size: 13px; background: #f8f9fa; color: #333; }
.footer-text { text-align: center; margin-top: auto; font-size: 12px; opacity: 0.9; padding-top: 15px;}
.footer-text a { text-decoration: none; font-weight: bold; }

/* Login (Blue Theme) */
.login-container { height: 700px; }
.login-top { padding: 40px 30px 20px 30px; background: white; flex: 0.8; }
.login-logo { width: 60px; height: 60px; background: #5c6bc0; border-radius: 50% 50% 50% 10px; margin-bottom: 20px; display:flex; justify-content:center; align-items:center; color:white; font-size:30px; }
.login-top h1 { margin: 0; color: #303f9f; font-size: 26px; }
.login-top p { color: #888; font-size: 14px; margin-top: 10px; }
.login-bottom { background: #4f5b93; flex: 1.2; padding: 30px; color: white; display: flex; flex-direction: column; border-radius: 30px 30px 0 0; margin-top:-20px; }
.login-btn { background: linear-gradient(90deg, #7986cb, #5c6bc0); color: white; border: none; padding: 12px; width: 100%; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.login-bottom a { color: #ffeb3b; }

/* Register (Green Theme) */
.register-container { height: 750px; }
.register-top { padding: 30px 30px 10px 30px; background: white; flex: 0.6; }
.register-logo { width: 50px; height: 50px; background: #00897b; border-radius: 50% 50% 50% 10px; margin-bottom: 10px; display:flex; justify-content:center; align-items:center; color:white; font-size:24px; }
.register-top h1 { margin: 0; color: #00695c; font-size: 24px; }
.register-top p { color: #888; font-size: 13px; margin-top: 5px; }
.register-bottom { background: #00796b; flex: 1.4; padding: 20px 30px; color: white; display: flex; flex-direction: column; border-radius: 30px 30px 0 0; }
.register-btn { background: linear-gradient(90deg, #4db6ac, #00897b); color: white; border: none; padding: 12px; width: 100%; border-radius: 25px; font-size: 15px; font-weight: bold; cursor: pointer; margin-top: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.register-bottom a { color: #ffe082; }

/* ==========================================
   2. Dashboard Pages (index.php)
   ========================================== */
.dashboard-body { margin: 0; font-family: 'Segoe UI', sans-serif; background: #f0f2f5; display: flex; flex-direction: column; height: 100vh;}
.form-input { width: 100%; padding: 10px; margin: 8px 0; border:1px solid #ccc; border-radius:4px; box-sizing:border-box;}
.btn { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; color: white; background: #007bff; text-decoration: none;}
.navbar { background: #1a202c; padding: 0 20px; display: flex; align-items: center; color: white; height: 60px;}
.nav-links a { color: #ccc; text-decoration: none; padding: 10px 15px; margin-left:5px; border-radius: 4px;}
.nav-links a.active, .nav-links a:hover { background: #2d3748; color: white; }
.main-content { flex-grow: 1; padding: 20px; overflow-y: auto;}

.inbox-wrapper { display: flex; height: calc(100vh - 120px); background: white; border-radius: 8px; overflow: hidden; box-shadow:0 2px 10px rgba(0,0,0,0.05);}
.sidebar { width: 280px; border-right: 1px solid #ddd; overflow-y: auto; background: #f8f9fa;}
.user-item { padding: 15px; border-bottom: 1px solid #eee; display: block; text-decoration: none; color: #333; }
.user-item.active { background: #e2e8f0; border-left: 4px solid #007bff;}
.chat-area { flex-grow: 1; display: flex; flex-direction: column;}
.messages { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; flex-grow: 1; background:#f4f7f6;}
.msg { max-width: 70%; padding: 12px; border-radius: 8px; font-size: 14px; }
.msg.user { background: #fff; align-self: flex-start; border: 1px solid #ddd; }
.msg.ai { background: #007bff; color: white; align-self: flex-end; }
.msg.admin { background: #28a745; color: white; align-self: flex-end; } 

table { width: 100%; border-collapse: collapse; background:white; } 
th, td { padding: 12px; border: 1px solid #ddd; text-align: left; } 
th { background: #f8f9fa; }
textarea.code-box { width: 100%; height: 280px; background: #282c34; color: #61dafb; padding: 15px; font-family: monospace; border-radius: 8px;}

.impersonate-banner { background: #ffc107; color: #000; text-align: center; padding: 8px; font-weight: bold; font-size: 14px; }
.impersonate-banner a { color: #d32f2f; text-decoration: underline; margin-left: 10px; }