:root {
    --primary: #6366f1;
    --bg-dark: #0f172a;
    --bubble-other: #1e293b;
    --text-main: #f8fafc;
}

body {
    background: radial-gradient(circle at top right, #1e1b4b, #0f172a);
    color: var(--text-main);
    font-family: 'Segoe UI', system-ui, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.chat-box {
    width: 90%;
    max-width: 500px;
    height: 80vh;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}

#username {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 12px;
    border-radius: 12px;
    color: white;
    margin-bottom: 15px;
}

#chat-window {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 10px;
}

#chat-window > div {
    background: var(--bubble-other);
    padding: 12px 16px;
    border-radius: 18px;
    max-width: 80%;
    word-wrap: break-word;
}

form { display: flex; gap: 10px; margin-top: 15px; }
input#msg { flex: 1; padding: 14px; border-radius: 15px; border: none; background: rgba(255,255,255,0.1); color: white; }
button { padding: 10px 20px; background: var(--primary); border: none; border-radius: 15px; color: white; font-weight: bold; cursor: pointer; }
button:hover { filter: brightness(1.2); }