/* --- Global Styles --- */
body {
    font-family: Arial, sans-serif; 
    background: #f6f3e7;
    color: #353430;
    margin: 12px;
}

.container {
    max-width: 800px; 
    margin: 0 auto;
}

.wrapper {
    display: flex;
    gap: 20px;
}

.sidebar { 
    width: 5%;
}

.main-content {
    flex: 1;
}

.sidebar img { 
    max-width: 100%;
    height: auto;
}

.success { color: #2e7d32; font-weight: bold; }
.error { color: #c62828; font-weight: bold; }

/* --- Unified Cards & Panels (Rooms, Chat, Online Users) --- */
/* Groups your main boxes together so they share the exact same borders and backgrounds */
.messages, .room, .online-users {
    border: 2px solid #dcd6c3;
    background: #fff9e8;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.messages {
    height: 400px;
    overflow-y: scroll;
}

/* Inner elements (like a single chat message) */
.message {
    display: flex;
    gap: 12px;
    border: 1px solid #e5e0cd;
    background: #fffdf6;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
}

.message.own {
    background: #f4f1e5;
}

.message-content {
    flex: 1;
}

.username {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 2px;
}

.timestamp {
    font-size: 11px;
    color: #777;
}

.status {
    border: 1px solid #e2ddc8;
    background: #f6f2e6;
    padding: 6px 10px;
    margin: 4px 0;
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
}

/* --- Unified Avatars (All circles, matching theme colors) --- */
/* Small chat avatars */
.user-avatar, .no-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dcd6c3;
}

.no-avatar {
    background: #e5e0cd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #555;
}

/* Large profile pictures */
.profile-pic, .no-pic { 
    width: 150px; 
    height: 150px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 4px solid #dcd6c3; /* Changed from blue to theme-matching beige */
    margin: 20px auto; 
    display: block;
}

.no-pic { 
    background: #e5e0cd; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #777; 
    font-size: 48px; 
    font-weight: bold;
}

/* --- Room & Tag Details --- */
.header {
    margin-bottom: 16px;
}

.room-info h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
}

.room-info p {
    margin: 0;
    font-size: 13px;
    color: #555;
}

.room-stats {
    font-size: 11px;
    color: #777;
    margin-top: 6px;
}

.user {
    display: inline-block;
    border: 1px solid #e0dac6;
    background: #fffdf6;
    padding: 4px 8px;
    margin: 3px;
    border-radius: 8px;
    font-size: 12px;
}

.user.online {
    background: #eaf7ea;
    border-color: #c3e6c3;
}

/* --- Unified Inputs & Buttons --- */
input[type="text"] {
    border: 2px solid #dcd6c3;
    background: #fffdf6;
    padding: 10px 12px;
    width: 65%;
    border-radius: 8px;
    font-family: inherit; /* Makes sure the font matches the body */
    box-sizing: border-box;
}

input[type="text"]:focus {
    outline: none;
    border-color: #c0b89d; /* Slightly darker border when typing */
}

/* Merged both <button> and .btn into one set of rules */
button, .btn {
    display: inline-block;
    border: 2px solid #d0cab6;
    background: #f3efe2;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 3px 0 #d0cab6;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-family: inherit;
    text-align: center;
}

button:active, .btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #d0cab6;
}

/* Specific Button Colors adjusted to match the shadow depth */
.logout {
    background: #ffdede;
    border-color: #e5baba;
    box-shadow: 0 3px 0 #e5baba;
}

.logout:active {
    box-shadow: 0 1px 0 #e5baba;
}

.create {
    background: #e7f7e7;
    border-color: #bcebc1;
    box-shadow: 0 3px 0 #bcebc1;
}

.create:active {
    box-shadow: 0 1px 0 #bcebc1;
}