:root {
    --bg: #0f172a;
    --box: #1e293b;
    --accent: #38bdf8;
    --text: #f8fafc;
    --gray: #94a3b8;
}

body {
    margin: 0; padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    height: 100vh; overflow: hidden;
}

.container {
    height: 100vh;
    display: flex; justify-content: center; align-items: center;
}

/* LOGIN BOX */
.login-box {
    background: var(--box);
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    width: 100%; max-width: 350px;
    text-align: center;
}

.logo { font-size: 1.5rem; margin-bottom: 2rem; letter-spacing: 2px; }
.logo span { color: var(--accent); font-weight: bold; }

.input-group input {
    width: 100%;
    padding: 12px; margin-bottom: 1rem;
    border: 1px solid #334155; border-radius: 6px;
    background: #0f172a; color: white;
    box-sizing: border-box;
}

button {
    width: 100%; padding: 12px;
    background: var(--accent); border: none; border-radius: 6px;
    color: #0f172a; font-weight: bold; cursor: pointer;
    transition: 0.3s;
}

button:hover { filter: brightness(1.2); }

/* MAIN PORTAL AREA */
#main-portal {
    display: flex; flex-direction: row; align-items: stretch;
}

.sidebar {
    width: 260px; background: #111827;
    display: flex; flex-direction: column; padding: 1.5rem;
}

.chat-area {
    flex: 1; display: flex; flex-direction: column;
    background: #0f172a; position: relative;
}

.messages {
    flex: 1; padding: 1.5rem; overflow-y: auto;
}

.input-area {
    padding: 1rem; background: #1e293b;
    display: flex; gap: 10px;
}

.input-area input {
    flex: 1; padding: 12px; border-radius: 6px;
    background: #0f172a; border: 1px solid #334155; color: white;
}

.input-area button { width: 100px; }

.footer-text { font-size: 0.7rem; color: var(--gray); margin-top: 1.5rem; }