:root {
    --bg-color: #09090b;
    /* Zinc 950 */
    --sidebar-bg: #000000;
    /* Black */
    --chat-bg: #09090b;
    --input-bg: #18181b;
    /* Zinc 900 */
    --text-primary: #f4f4f5;
    /* Zinc 100 */
    --text-secondary: #a1a1aa;
    /* Zinc 400 */
    --accent-color: #facc15;
    /* Yellow 400 */
    --accent-hover: #eab308;
    /* Yellow 500 */
    --user-msg-bg: #27272a;
    /* Zinc 800 */
    --assistant-msg-bg: transparent;
    --border-color: #27272a;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    height: 100vh;
    overflow: hidden;
}

.app-container {
    display: flex;
    height: 100%;
}

/* Sidebar */
.sidebar {
    width: 280px;
    background-color: var(--sidebar-bg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.logo .logo-img {
    height: 32px;
    width: auto;
}

.logo h1 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.auth-buttons {
    margin-bottom: 1.5rem;
}

.login-btn {
    width: 100%;
    background-color: var(--accent-color);
    color: #000;
    border: none;
    padding: 0.6rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.login-btn:hover {
    background-color: var(--accent-hover);
}

.new-chat-btn {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    font-size: 0.9rem;
    font-weight: 500;
}

.new-chat-btn:hover {
    background-color: var(--input-bg);
    border-color: var(--text-secondary);
}

.history {
    margin-top: 1rem;
    flex: 1;
    overflow-y: auto;
}

.history-item {
    padding: 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.history-item:hover,
.history-item.active {
    background-color: #2f2f2f;
    color: var(--text-primary);
}

/* Chat Area */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--chat-bg);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    padding-bottom: 10rem;
    /* Space for input */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.message {
    display: flex;
    gap: 1rem;
    line-height: 1.6;
}

.message.user {
    justify-content: flex-end;
}

.message .avatar {
    width: 30px;
    height: 30px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.message.assistant .avatar {
    background-color: #19c37d;
}

.message.user .avatar {
    background-color: #5436da;
    order: 2;
}

.message .content {
    max-width: 80%;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.message.user .content {
    background-color: var(--user-msg-bg);
    border-radius: 1rem 1rem 0 1rem;
}

.message.assistant .content {
    background-color: var(--assistant-msg-bg);
    padding: 0;
    /* Align with avatar */
}

/* Input Area */
.input-area {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(transparent, var(--bg-color) 20%);
}

.input-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    background-color: var(--input-bg);
    border-radius: 0.75rem;
    border: 1px solid #444;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 1rem 3rem 1rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    resize: none;
    outline: none;
    max-height: 200px;
    overflow-y: auto;
}

#send-btn {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

#send-btn:hover {
    background-color: #444;
    color: var(--text-primary);
}

.disclaimer {
    text-align: center;
    color: #666;
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

/* Markdown Styles */
.content p {
    margin-bottom: 0.5rem;
}

.content strong {
    font-weight: 600;
    color: #fff;
}

.content ul {
    margin-left: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Charts */
.chart-container {
    margin-top: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #444;
}

.chart-container img {
    width: 100%;
    display: block;
}

/* Loading Animation */
.typing-indicator span {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #ccc;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
    margin: 0 2px;
}

.typing-indicator span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* =============================================================================
   LOGIN MODAL STYLES
   =============================================================================
   Styles for the login modal overlay that appears when user is not authenticated.
   The modal covers the entire viewport and prevents interaction with the chat
   until the user logs in successfully.
   ============================================================================= */

/* Login modal overlay - covers entire screen with semi-transparent background */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

/* Hidden state for login modal */
.login-modal.hidden {
    display: none;
}

/* Login modal content container */
.login-modal-content {
    background-color: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.3s ease-out;
}

/* Modal slide-in animation */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Login header with logo and title */
.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    height: 64px;
    width: auto;
    margin-bottom: 1rem;
}

.login-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.login-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Form group container for input fields */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-group input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1);
}

.form-group input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Login error message */
.login-error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    text-align: center;
}

.login-error.hidden {
    display: none;
}

/* Login submit button */
.login-submit-btn {
    width: 100%;
    padding: 0.875rem;
    background-color: var(--accent-color);
    color: #000;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.login-submit-btn:hover {
    background-color: var(--accent-hover);
}

.login-submit-btn:active {
    transform: scale(0.98);
}

.login-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Button text and loading state */
.btn-loading.hidden {
    display: none;
}

/* =============================================================================
   USER SECTION STYLES
   =============================================================================
   Styles for the user info section in the sidebar, shown when user is
   authenticated. Displays username and logout button.
   ============================================================================= */

/* User section container in sidebar */
.user-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: var(--input-bg);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.user-section.hidden {
    display: none;
}

/* User info row with icon and username */
.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-icon {
    font-size: 1.25rem;
}

.username-display {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Logout button */
.logout-btn {
    width: 100%;
    padding: 0.5rem;
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.logout-btn:hover {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Hide auth buttons when logged in */
.auth-buttons.hidden {
    display: none;
}

/* =============================================================================
   DISABLED STATE STYLES
   =============================================================================
   Styles for disabled chat input when user is not authenticated.
   ============================================================================= */

textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#send-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Generic hidden utility class */
.hidden {
    display: none !important;
}