/* Team Chat Styles - Carolina Blue Theme */

/* Page Background - Carolina Blue */
body {
    background: #4B9CD3 !important; /* Carolina Blue background */
    min-height: 100vh;
}

/* Hide private content initially */
.private-content-hidden {
    display: none !important;
}

/* Login Required Page Styles */
.login-required-page {
    background: #4B9CD3;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.login-prompt-container {
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.login-prompt-content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius-xl);
    padding: var(--space-12);
    box-shadow: var(--shadow-xl);
}

.login-icon {
    font-size: 4rem;
    margin-bottom: var(--space-6);
}

.login-prompt-content h1 {
    color: #4B9CD3;
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-4);
}

.login-prompt-content h2 {
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.login-description {
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-8);
    line-height: 1.6;
}

/* Chat Interface - Private Content */
.chat-interface {
    background: #4B9CD3;
    min-height: 100vh;
    padding: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main Chat Box - White with Black Text */
.chat-subject-box {
    background: white;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: var(--space-8);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.subject-box-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.subject-box-header h2 {
    color: black;
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-3);
    font-weight: var(--font-weight-bold);
}

.subject-box-header p {
    color: #666;
    font-size: var(--font-size-base);
}

/* Subject Selection Buttons */
.subject-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.subject-btn {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: var(--border-radius-lg);
    padding: var(--space-4);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-base);
    color: black;
    font-weight: var(--font-weight-medium);
    width: 100%;
    text-align: left;
}

.subject-btn:hover {
    border-color: #4B9CD3;
    background: #f8f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 156, 211, 0.2);
}

.subject-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Add Subject Section */
.add-subject-section {
    text-align: center;
    padding-top: var(--space-6);
    border-top: 1px solid #e0e0e0;
}

.add-subject-text {
    color: #666;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
}

.add-subject-btn {
    background: #4B9CD3;
    color: white;
    border: none;
    border-radius: var(--border-radius-lg);
    padding: var(--space-3) var(--space-6);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    margin: 0 auto;
}

.add-subject-btn:hover {
    background: #3a7ba8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(75, 156, 211, 0.3);
}

.add-emoji {
    font-size: 1.2rem;
}

/* Add Subject Form */
.add-subject-form {
    margin-top: var(--space-6);
    padding: var(--space-6);
    background: #f8f9ff;
    border-radius: var(--border-radius-lg);
    border: 1px solid #e0e0e0;
}

.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.form-header h3 {
    color: black;
    margin: 0;
    font-size: var(--font-size-lg);
}

.cancel-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: var(--font-size-sm);
    padding: var(--space-2);
}

.cancel-btn:hover {
    color: black;
}

.add-subject-form form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.add-subject-form input,
.add-subject-form select {
    padding: var(--space-3);
    border: 1px solid #ddd;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    color: black;
    background: white;
}

.add-subject-form input:focus,
.add-subject-form select:focus {
    outline: none;
    border-color: #4B9CD3;
    box-shadow: 0 0 0 3px rgba(75, 156, 211, 0.1);
}

.create-btn {
    background: #4B9CD3;
    color: white;
    border: none;
    padding: var(--space-3);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: all 0.3s ease;
}

.create-btn:hover {
    background: #3a7ba8;
}

/* Chat Window */
.chat-window {
    background: white;
    border-radius: var(--border-radius-xl);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 600px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    background: #f8f9ff;
    padding: var(--space-4);
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.back-btn {
    background: #666;
    color: white;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all 0.3s ease;
}

.back-btn:hover {
    background: #555;
}

.chat-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-bold);
    color: black;
}

.current-emoji {
    font-size: 1.5rem;
}

.clear-btn {
    background: #dc3545;
    color: white;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all 0.3s ease;
}

.clear-btn:hover {
    background: #c82333;
}

/* Messages Area */
.messages-area {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    background: white;
}

.message {
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
}

.message.own {
    align-items: flex-end;
}

.message.other {
    align-items: flex-start;
}

.message-bubble {
    max-width: 70%;
    padding: var(--space-3);
    border-radius: var(--border-radius-lg);
    word-wrap: break-word;
}

.message.own .message-bubble {
    background: #4B9CD3;
    color: white;
}

.message.other .message-bubble {
    background: #f0f0f0;
    color: black;
}

.message-info {
    font-size: var(--font-size-xs);
    color: #666;
    margin-top: var(--space-1);
}

/* Message Input */
.message-input-area {
    background: #f8f9ff;
    padding: var(--space-4);
    border-top: 1px solid #e0e0e0;
}

.name-input-container {
    margin-bottom: var(--space-2);
}

.name-input-container input {
    width: 100%;
    padding: var(--space-2);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: bold;
    background: #f8f9fa;
    color: black;
}

.name-input-container input:focus {
    outline: none;
    border-color: var(--color-primary-dark);
    background: white;
}

.input-container {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.input-container input {
    flex: 1;
    padding: var(--space-3);
    border: 1px solid #ddd;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    color: black;
    background: white;
}

.input-container input:focus {
    outline: none;
    border-color: #4B9CD3;
    box-shadow: 0 0 0 3px rgba(75, 156, 211, 0.1);
}

.send-btn {
    background: #4B9CD3;
    color: white;
    border: none;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    transition: all 0.3s ease;
}

.send-btn:hover {
    background: #3a7ba8;
}

.send-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.input-info {
    display: flex;
    justify-content: flex-end;
}

.char-counter {
    font-size: var(--font-size-xs);
    color: #666;
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .chat-interface {
        padding: var(--space-4);
    }
    
    .chat-subject-box,
    .chat-window {
        max-width: 100%;
        margin: 0;
    }
    
    .chat-window {
        height: 500px;
    }
    
    .subject-box-header {
        margin-bottom: var(--space-6);
    }
    
    .chat-header {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .message-bubble {
        max-width: 85%;
    }
}