.rcc-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 900px;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background: #fff;
}


/* Chat Section */
.rcc-chat-section {
    flex: 3;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #eee;
    min-width: 0;
}

.rcc-messages {
    flex: 1; /* <-- This is the key line */
    overflow-y: auto;
    padding: 15px;
    background: #f4f4f4;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rcc-layout {
    display: flex;
    height: 900px; /* <-- Increase this value, e.g., to 650px */
}

.rcc-header {
    background: #f8f9fa;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    color: #333;
}

.message-bubble {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    border-left: 4px solid #0073aa;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-family: "iransans";
}

.chat-radio-options {
    margin: 0 auto 10px auto;
    direction: ltr;
}

.elder-blood {
    background: #eef;
}

.fire-born {
    background: #fee;
}

.message-bubble .message-username {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 0.85em;
}

.message-bubble .message-datetime {
    float: left;
}

.message-bubble .message-text {
    display: block;
}

.rcc-input-area {
    padding: 10px;
    background: #fff;
    /* Change from flex row to flex column */
    display: flex;
    flex-direction: column; 
}

.rcc-input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* Removed flex: 1 as it messes up column layout for different elements */
}

.rcc-username-input {
    /* Specific style for username input */
}

.rcc-textarea-input {
    /* Make textarea taller */
    min-height: 60px;
    resize: vertical; /* Allow user to resize vertically */
}

.rcc-btn {
    /* Send button is now full width in the column */
    padding: 10px 15px;
    background: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    width: 100%; /* Make button full width */
}


.rcc-btn:hover { background: #005177; }

/* Sidebar (Online Users) */
.rcc-sidebar {
    flex: 1;
    background: #fafafa;
    padding: 10px;
    overflow-y: auto;
}

.rcc-user-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rcc-user-list li {
    padding: 8px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
}

.rcc-user-list li::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #28a745;
    border-radius: 50%;
    display: inline-block;
}