:root {
    /* @tweakable primary brand color */
    --primary-color: #2563eb;
    /* @tweakable primary brand color hover state */
    --primary-hover: #1d4ed8;
    /* @tweakable secondary accent color */
    --secondary-color: #64748b;
    /* @tweakable background color for the main app */
    --background: #ffffff;
    /* @tweakable background color for elevated surfaces */
    --surface: #f8fafc;
    /* @tweakable background color for cards and panels */
    --card-background: #ffffff;
    /* @tweakable primary text color */
    --text-primary: #0f172a;
    /* @tweakable secondary text color */
    --text-secondary: #64748b;
    /* @tweakable muted text color */
    --text-muted: #94a3b8;
    /* @tweakable border color for subtle divisions */
    --border-light: #e2e8f0;
    /* @tweakable border color for prominent divisions */
    --border-medium: #cbd5e1;
    /* @tweakable shadow for elevated elements */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    /* @tweakable shadow for floating elements */
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    /* @tweakable shadow for prominent elements */
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    /* @tweakable border radius for small elements */
    --radius-sm: 0.375rem;
    /* @tweakable border radius for medium elements */
    --radius-md: 0.5rem;
    /* @tweakable border radius for large elements */
    --radius-lg: 0.75rem;
    /* @tweakable border radius for extra large elements */
    --radius-xl: 1rem;
    /* @tweakable maximum width of the chat container */
    --chat-max-width: 768px;
    /* @tweakable header height */
    --header-height: 64px;
    /* @tweakable sidebar width when open */
    --sidebar-width: 320px;
    /* @tweakable slim sidebar width when open */
    --slim-sidebar-width: 240px;
    /* @tweakable spacing unit for consistent margins and padding */
    --spacing-unit: 1rem;
    /* @tweakable spacing between assistant's text content and feedback buttons */
    --feedback-spacing-top: 1rem; /* Reduced for closer integration */
    
    /* @tweakable height of the chat input bar */
    --chat-input-height: 64px;
    
    /* @tweakable width of tool buttons in the chat input */
    --tool-button-width: 40px;
    /* @tweakable height of tool buttons in the chat input */
    --tool-button-height: 40px;
    /* @tweakable size of icons within tool buttons */
    --tool-icon-size: 24px;
    /* @tweakable width of send button in chat input */
    --send-button-width: 34px;
    /* @tweakable height of send button in chat input */
    --send-button-height: 34px;
    /* @tweakable size of the send button icon */
    --send-icon-size: 18px;

    /* @tweakable width and height of the account letter avatar button */
    --account-button-size: 48px;
    /* @tweakable background color of the account letter avatar button */
    --account-avatar-bg: #2563eb;
    /* @tweakable hover background color of the account letter avatar button */
    --account-avatar-hover-bg: #1d4ed8;
    /* @tweakable font size of the initial letter in the account avatar */
    --account-initial-font-size: 18px;
    /* @tweakable account dropdown container top position */
    --account-dropdown-container-top: 16px;
    /* @tweakable account dropdown container right position */
    --account-dropdown-container-right: 16px;
    /* @tweakable account dropdown container z-index */
    --account-dropdown-container-z-index: 1001;
}

/* Add new styles for settings modal */
.settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, var(--modal-backdrop-opacity));
    backdrop-filter: blur(var(--modal-backdrop-blur));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.settings-content {
    background-color: var(--card-background);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-unit);
    border-bottom: 1px solid var(--border-light);
}

.settings-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.close-button {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
    padding: 0 8px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.close-button:hover {
    background: var(--surface);
}

.settings-body {
    padding: var(--spacing-unit);
}

.settings-section {
    margin-bottom: var(--settings-section-spacing);
    padding: var(--spacing-unit);
    border-bottom: 1px solid var(--border-light);
}

.settings-section:last-child {
    border-bottom: none;
}

.setting-item {
    display: flex;
    align-items: center;
    margin-bottom: var(--settings-item-spacing);
    gap: var(--spacing-unit);
}

.setting-item label {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
}

.setting-item input[type="text"],
.setting-item select {
    background-color: var(--surface);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    padding: calc(var(--spacing-unit) * 0.5);
    border-radius: var(--radius-md);
    width: 200px;
}

.setting-item input[type="range"] {
    width: 150px;
}

.setting-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
}

.settings-footer {
    padding: var(--spacing-unit);
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
}

.save-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.save-button:hover {
    background-color: var(--primary-hover);
}

/* Brand styles */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.brand-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Update root variables */
:root {
    /* @tweakable spacing between logo and text in the brand section */
    --brand-gap: 4px;
    
    /* @tweakable top padding of the brand section */
    --brand-padding-top: 16px;
    /* @tweakable right padding of the brand section */
    --brand-padding-right: 16px;
    /* @tweakable bottom padding of the brand section */
    --brand-padding-bottom: 16px;
    /* @tweakable left padding of the brand section (smaller value moves it more to the left) */
    --brand-padding-left: 16px;
    
    /* @tweakable size of the Nova AI logo in the sidebar */
    --brand-logo-size: 120px;
    
    /* @tweakable size of the brand name text */
    --brand-name-size: 28px;
    
    /* @tweakable weight of the brand name text */
    --brand-name-weight: 700;
    
    /* @tweakable brand name color in light mode */
    --brand-name-color: #000000;
    
    /* @tweakable brand name color in dark mode */
    --brand-name-color: #ffffff;
}

/* Add new brand selector styles */
.brand-selector {
    position: relative;
    display: flex;
    align-items: center;
}

.brand-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0;
}

.brand-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    /* @tweakable dropdown menu width */
    width: var(--brand-dropdown-width, 200px);
    background: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    /* @tweakable dropdown menu padding */
    padding: var(--brand-dropdown-padding, 8px);
    display: none;
    flex-direction: column;
    gap: 4px;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}

.brand-dropdown.show {
    display: flex;
}

.brand-option {
    /* @tweakable model option button padding */
    padding: var(--brand-option-padding, 8px 12px);
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    /* @tweakable model option font size */
    font-size: var(--brand-option-font-size, 14px);
    transition: all 0.2s;
}

.brand-option:hover {
    background: var(--surface);
}

.brand-option.active {
    background: var(--primary-color);
    color: white;
}

/* Sub-dropdown styles for theme and language options */
.sub-dropdown {
    position: absolute;
    /* @tweakable sub-dropdown top offset from parent */
    top: calc(100% + 4px);
    /* @tweakable sub-dropdown left alignment with parent */
    left: 0;
    /* @tweakable sub-dropdown minimum width */
    min-width: 180px;
    /* @tweakable sub-dropdown background color */
    background: #2d3748;
    /* @tweakable sub-dropdown border radius */
    border-radius: 8px;
    /* @tweakable sub-dropdown shadow */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    /* @tweakable sub-dropdown border */
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* @tweakable sub-dropdown padding */
    padding: 8px;
    display: none;
    flex-direction: column;
    /* @tweakable sub-dropdown gap between items */
    gap: 2px;
    /* @tweakable sub-dropdown z-index */
    z-index: 1002;
    /* @tweakable sub-dropdown backdrop filter */
    backdrop-filter: blur(20px);
    transform: translateY(-10px);
    opacity: 0;
    /* @tweakable sub-dropdown animation duration */
    transition: all 200ms ease;
}

.sub-dropdown.show {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

.sub-dropdown-item {
    /* @tweakable sub-dropdown item padding */
    padding: 10px 14px;
    /* @tweakable sub-dropdown item border radius */
    border-radius: 6px;
    cursor: pointer;
    /* @tweakable sub-dropdown item font size */
    font-size: 14px;
    color: white;
    /* @tweakable sub-dropdown item transition */
    transition: all 150ms ease;
    font-weight: 500;
}

.sub-dropdown-item:hover {
    /* @tweakable sub-dropdown item hover background */
    background: rgba(255, 255, 255, 0.15);
}

.sub-dropdown-item:active {
    /* @tweakable sub-dropdown item active background */
    background: rgba(255, 255, 255, 0.2);
}

/* Theme-specific styles */
body.light {
    --background: #ffffff;
    --text: #000000;
    --sidebar: #f7f7f8;
    --messageBackground: #f7f7f8;
    --assistantBackground: #ffffff;
    --inputBackground: #ffffff;
    --borderColor: rgba(0,0,0,0.1);
}

body.dark {
    --background: #0f172a;
    --surface: #1e293b;
    --card-background: #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --border-light: #334155;
    --border-medium: #475569;
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 100%;
        --chat-max-width: 100%;
    }
    
    .header-content {
        padding: 0 calc(var(--spacing-unit) * 0.75);
    }
    
    .main-content {
        padding: calc(var(--spacing-unit) * 0.75);
    }
    
    .brand-name {
        /* @tweakable mobile brand name font size */
        font-size: 1.5rem;
    }
    
    .welcome-title {
        /* @tweakable mobile welcome title font size */
        font-size: 1.75rem;
    }
    
    .welcome-subtitle {
        /* @tweakable mobile welcome subtitle font size */
        font-size: 1rem;
    }
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message {
    animation: fadeIn 0.3s ease;
}

/* Scrollbar Styling */
.chat-messages::-webkit-scrollbar,
.sidebar-content::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track,
.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb,
.sidebar-content::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.sidebar-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Add these new styles for image previews */
.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--preview-gap);
    margin-bottom: 8px;
    max-height: var(--preview-max-height);
    overflow-y: auto;
    width: 100%;
    padding: 4px;
}

.image-preview-container::-webkit-scrollbar {
    width: 6px;
}

.image-preview-container::-webkit-scrollbar-track {
    background: transparent;
}

.image-preview-container::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

.remove-image-btn:hover {
    background: var(--primary-color) !important;
    color: white !important;
}

/* Update feedback buttons styling */
.message-feedback {
    display: flex;
    gap: calc(var(--spacing-unit) * 0.5);
    margin-top: var(--feedback-spacing-top);
    /* Removed padding-top and border-top for closer integration */
    width: 100%;
    justify-content: flex-start;
}

.feedback-button {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 0;
}

.feedback-button:hover {
    background: var(--border-light);
    color: var(--text-primary);
}

.feedback-button.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.feedback-button svg {
    width: 16px;
    height: 16px;
}

/* Add tooltips */
.feedback-button {
    position: relative;
}

.feedback-button:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #202123;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    margin-bottom: 8px;
    pointer-events: none;
}

/* Add styles for the following ball */
.following-ball {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: bounce var(--ball-bounce-duration, 500ms) infinite alternate ease-in-out;
}

@keyframes bounce {
    from {
        transform: translateY(-2px);
    }
    to {
        transform: translateY(2px);
    }
}

/* Add styles for recording state */
.tool-button.recording {
    background: #ef4444;
    /* @tweakable voice mic recording pulse duration */
    animation: pulse 1.5s infinite;
}

/* Tools dropdown */
.tools-dropdown {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: calc(var(--spacing-unit) * 0.5);
    margin-bottom: calc(var(--spacing-unit) * 0.5);
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
    z-index: 10;
    box-shadow: var(--shadow-lg);
}

.tools-dropdown.show {
    display: flex;
}

.tool-option {
    padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 0.75);
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    transition: background-color 0.2s;
    font-size: 0.875rem;
}

.tool-option:hover {
    background: var(--surface);
}

.tool-option svg {
    width: 16px;
    height: 16px;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
    overflow-x: hidden;
    height: 100vh;
    display: flex;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100vw;
    position: relative;
}

/* Header Styles */
.app-header {
    height: var(--header-height);
    background: var(--card-background);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0 var(--spacing-unit);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.brand-name {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.header-actions {
    display: flex;
    /* @tweakable spacing between header action buttons */
    gap: calc(var(--spacing-unit) * 0.5);
}

.header-button {
    display: flex;
    align-items: center;
    /* @tweakable spacing between header button icon and text */
    gap: calc(var(--spacing-unit) * 0.25);
    /* @tweakable padding for header buttons */
    padding: calc(var(--spacing-unit) * 0.375) calc(var(--spacing-unit) * 0.75);
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    /* @tweakable font size for header buttons */
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-button:hover {
    background: var(--surface);
    color: var(--text-primary);
    border-color: var(--border-medium);
}

/* Main Content */
.main-content {
    /* @tweakable left margin to account for slim sidebar */
    margin-left: 240px;
    width: calc(100% - 240px);
}

.chat-container {
    width: 100%;
    max-width: var(--chat-max-width);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    padding: 0 var(--spacing-unit);
}

/* Chat Messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding: var(--spacing-unit) 0;
}

.welcome-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    /* @tweakable minimum height for welcome message area */
    min-height: 400px;
    padding: 2rem;
    /* @tweakable welcome message animation duration */
    animation: fadeIn 0.3s ease;
    /* @tweakable welcome message max width */
    max-width: 600px;
    margin: 0 auto;
}

.welcome-icon {
    /* @tweakable spacing below welcome icon */
    margin-bottom: calc(var(--spacing-unit) * 1.5);
}

.welcome-logo {
    /* @tweakable size of welcome logo */
    width: 80px;
    /* @tweakable size of welcome logo */
    height: 80px;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.welcome-title {
    /* @tweakable welcome title font size */
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    /* @tweakable spacing below welcome title */
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.welcome-subtitle {
    /* @tweakable welcome subtitle font size */
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.message {
    /* @tweakable spacing between messages */
    margin-bottom: calc(var(--spacing-unit) * 1.5);
    padding: var(--spacing-unit);
    border-radius: var(--radius-lg);
    /* @tweakable maximum width of individual messages */
    max-width: 100%;
}

.message.user {
    background: var(--primary-color);
    color: white;
    margin-left: auto;
    /* @tweakable maximum width of user messages */
    max-width: 80%;
    border-bottom-right-radius: var(--radius-sm);
}

.message.assistant, .message.system {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-bottom-left-radius: var(--radius-sm);
}

.message.thinking {
    background: var(--surface);
    border: 1px solid var(--border-light);
    opacity: 0.8;
}

.avatar {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.assistant-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.assistant-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user .avatar {
    background-color: #10a37f;
    border-radius: 50%;
}

/* New wrapper for assistant message content and feedback */
.assistant-response-body {
    display: flex;
    flex-direction: column; /* Stack text and feedback vertically */
    align-items: flex-start; /* Align contents to the left */
    flex: 1; /* Allows it to take available width within message-content */
}

.response-container {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.message-content {
    display: flex;
    align-items: flex-start;
    /* @tweakable spacing between avatar and message content */
    gap: calc(var(--spacing-unit) * 0.75);
    width: 100%;
}

.user .message-content {
    flex-direction: row-reverse;
}

.user .message-content .avatar {
    margin-left: 16px;
    margin-right: 0;
}

.message-content p {
    margin-bottom: 12px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.message-content pre {
    background-color: var(--surface);
    padding: var(--spacing-unit);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: 0.875rem;
    margin: var(--spacing-unit) 0;
    border: 1px solid var(--border-light);
}

.message-content code {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    background-color: var(--surface);
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    word-break: break-all;
    white-space: pre-wrap;
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    background-color: var(--surface);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    color: var(--text-secondary);
    font-size: 0.75rem;
    border: 1px solid var(--border-light);
    border-bottom: none;
}

.copy-button {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: 0.75rem;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.copy-button:hover {
    background: var(--surface);
}

.copy-button.copied {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.copy-button svg {
    width: 14px;
    height: 14px;
}

.input-section {
    /* @tweakable spacing above input section */
    margin-top: calc(var(--spacing-unit) * 1.5);
}

.input-container {
    background: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease;
}

.input-container:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 0.1);
}

.input-wrapper {
    display: flex;
    flex-direction: column; /* Change to column to stack elements */
    /* @tweakable spacing between input text area and tools row */
    gap: calc(var(--spacing-unit) * 0.5);
    /* @tweakable padding around the entire input wrapper */
    padding: calc(var(--spacing-unit) * 0.75);
    min-height: var(--chat-input-height);
}

#user-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    /* @tweakable input text font size */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-primary);
    resize: none;
    /* @tweakable minimum height of input textarea */
    min-height: 24px;
    /* @tweakable maximum height of input textarea */
    max-height: 120px;
    /* @tweakable border radius of the input textarea */
    border-radius: var(--radius-md);
    /* @tweakable padding inside the input textarea */
    padding: 8px 12px;
    /* @tweakable background color of the input area */
    background: var(--surface);
}

#user-input::placeholder {
    color: var(--text-muted);
}

.input-actions {
    display: flex;
    align-items: center;
    /* @tweakable spacing between input action elements */
    gap: calc(var(--spacing-unit) * 0.5);
    /* @tweakable justify content for input actions */
    justify-content: space-between;
    width: 100%;
}

/* @tweakable container for left-side tools (three-dots menu, image upload) */
.left-tools {
    display: flex;
    align-items: center;
    /* @tweakable spacing between left-side tool buttons */
    gap: calc(var(--spacing-unit) * 0.5);
}

/* @tweakable container for right-side tools (voice mode, microphone) */
.right-tools {
    display: flex;
    align-items: center;
    /* @tweakable spacing between right-side tool buttons */
    gap: calc(var(--spacing-unit) * 0.5);
}

.tools-container {
    display: flex;
    /* @tweakable spacing between tool buttons */
    gap: calc(var(--spacing-unit) * 0.25);
}

.tool-button {
    /* @tweakable width of tool buttons in chat input */
    width: var(--tool-button-width);
    /* @tweakable height of tool buttons in chat input */
    height: var(--tool-button-height);
    border: none;
    background: transparent;
    color: var(--text-muted);
    /* @tweakable border radius of tool buttons */
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tool-button svg {
    /* @tweakable size of icons within tool buttons */
    width: var(--tool-icon-size);
    /* @tweakable size of icons within tool buttons */
    height: var(--tool-icon-size);
}

.tool-button:hover {
    background: var(--surface);
    color: var(--text-secondary);
}

.tool-button.recording {
    background: #ef4444;
    /* @tweakable voice mic recording pulse duration */
    animation: pulse 1.5s infinite;
}

.send-button {
    /* @tweakable width of send button in chat input */
    width: var(--send-button-width, 34px);
    /* @tweakable height of send button in chat input */
    height: var(--send-button-height, 34px);
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.send-button svg {
    /* @tweakable size of send button icon */
    width: var(--send-icon-size, 18px);
    /* @tweakable size of send button icon */
    height: var(--send-icon-size, 18px);
}

.send-button:hover:not(:disabled) {
    background: var(--primary-hover);
}

.send-button:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* @tweakable spacing above input footer */
    margin-top: calc(var(--spacing-unit) * 0.75);
    padding: 0 calc(var(--spacing-unit) * 0.5);
}

.disclaimer {
    /* @tweakable disclaimer text font size */
    font-size: 0.75rem;
    color: var(--text-muted);
}

.character-count {
    /* @tweakable character count font size */
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Account Dropdown Styles */
.account-dropdown-container {
    position: fixed;
    /* @tweakable account dropdown container top position */
    top: var(--account-dropdown-container-top);
    /* @tweakable account dropdown container right position */
    right: var(--account-dropdown-container-right);
    left: auto;
    /* @tweakable account dropdown container z-index */
    z-index: var(--account-dropdown-container-z-index);
    /* @tweakable visibility of the account dropdown container (initial state for JS) */
    display: none; /* Controlled by JS based on ACCOUNT_ONLY_ON_WELCOME_PAGE */
}

.account-button {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the initial */
    /* @tweakable width of the account letter avatar button */
    width: var(--account-button-size);
    /* @tweakable height of the account letter avatar button */
    height: var(--account-button-size);
    padding: 0; /* No padding, the button *is* the avatar */
    background: var(--account-avatar-bg);
    backdrop-filter: blur(20px); /* Keep backdrop filter for consistency with dropdown */
    border: none;
    border-radius: 50%; /* Make it circular */
    color: white; /* Text color for the initial */
    cursor: pointer;
    transition: all 200ms ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.account-button:hover {
    background: var(--account-avatar-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.account-initial {
    color: white; /* Ensure text color is white */
    font-weight: 600;
    /* @tweakable font size of the initial letter in the account avatar */
    font-size: var(--account-initial-font-size);
}

/* Remove or adapt these as they are no longer part of the account-button's direct children */
/*
.account-avatar { ... }
.account-info { ... }
.account-chevron { ... }
*/

.account-dropdown {
    position: absolute;
    /* @tweakable account dropdown top offset */
    top: calc(100% + 8px);
    right: 0; /* Align dropdown to the right of the button */
    left: auto; /* Ensure right alignment */
    /* @tweakable account dropdown width */
    width: var(--account-dropdown-width, 280px);
    /* @tweakable account dropdown background */
    background: var(--account-dropdown-bg, #1e293b);
    /* @tweakable account dropdown border radius */
    border-radius: var(--account-dropdown-radius, 12px);
    /* @tweakable account dropdown shadow */
    box-shadow: var(--account-dropdown-shadow, 0 8px 32px rgba(0, 0, 0, 0.3));
    /* @tweakable account dropdown border */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* @tweakable account dropdown padding */
    padding: var(--account-dropdown-padding, 16px);
    display: none;
    flex-direction: column;
    /* @tweakable account dropdown gap */
    gap: 12px;
    /* @tweakable account dropdown backdrop filter */
    backdrop-filter: blur(20px);
    transform: translateY(-10px);
    opacity: 0;
    /* @tweakable account dropdown transition */
    transition: all var(--account-dropdown-animation-ms, 200ms) ease;
}

.account-dropdown.show {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

.account-dropdown-header {
    display: flex;
    align-items: center;
    /* @tweakable account dropdown header gap */
    gap: 12px;
    /* @tweakable account dropdown header padding */
    padding: 12px 0;
    /* @tweakable account dropdown header border bottom */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* @tweakable account dropdown header margin bottom */
    margin-bottom: 8px;
}

.dropdown-avatar {
    /* @tweakable dropdown avatar size */
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dropdown-initial {
    color: white;
    font-weight: 600;
    /* @tweakable dropdown initial font size */
    font-size: 18px;
}

.dropdown-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* @tweakable dropdown user info gap */
    gap: 4px;
}

.dropdown-name {
    /* @tweakable dropdown name font size */
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.dropdown-email {
    /* @tweakable dropdown email font size */
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.account-dropdown-section {
    display: flex;
    flex-direction: column;
    /* @tweakable account dropdown section gap */
    gap: 8px;
    /* @tweakable account dropdown section margin bottom */
    margin-bottom: var(--account-dropdown-section-spacing, 16px);
}

.dropdown-section-title {
    /* @tweakable dropdown section title font size */
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    /* @tweakable dropdown section title margin bottom */
    margin-bottom: 4px;
}

.dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* @tweakable dropdown option padding */
    padding: 12px 16px;
    /* @tweakable dropdown option background */
    background: rgba(255, 255, 255, 0.05);
    /* @tweakable dropdown option border radius */
    border-radius: 8px;
    cursor: pointer;
    /* @tweakable dropdown option transition */
    transition: all 150ms ease;
    /* @tweakable dropdown option border */
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.dropdown-option:hover {
    /* @tweakable dropdown option hover background */
    background: rgba(255, 255, 255, 0.1);
}

.dropdown-option span {
    /* @tweakable dropdown option text font size */
    font-size: 14px;
    color: white;
    font-weight: 500;
}

.dropdown-option-icon {
    /* @tweakable dropdown option icon size */
    width: 16px;
    height: 16px;
    color: rgba(255, 255, 255, 0.7);
}

.account-dropdown-divider {
    /* @tweakable account dropdown divider height */
    height: 1px;
    /* @tweakable account dropdown divider background */
    background: rgba(255, 255, 255, 0.1);
    /* @tweakable account dropdown divider margin */
    margin: 8px 0;
}

.account-dropdown-menu-item {
    display: flex;
    align-items: center;
    /* @tweakable account dropdown menu item gap */
    gap: 12px;
    /* @tweakable account dropdown menu item padding */
    padding: 12px 16px;
    /* @tweakable account dropdown menu item height */
    min-height: var(--account-dropdown-item-height, 48px);
    cursor: pointer;
    /* @tweakable account dropdown menu item border radius */
    border-radius: 8px;
    /* @tweakable account dropdown menu item transition */
    transition: all 150ms ease;
}

.account-dropdown-menu-item:hover {
    /* @tweakable account dropdown menu item hover background */
    background: rgba(255, 255, 255, 0.1);
}

.dropdown-menu-icon {
    /* @tweakable dropdown menu icon size */
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.account-dropdown-menu-item span {
    /* @tweakable account dropdown menu item text font size */
    font-size: 14px;
    color: white;
    font-weight: 500;
}

/* Sidebar Styles */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    /* @tweakable slim sidebar width when open */
    width: var(--slim-sidebar-width, 240px);
    height: 100vh;
    /* @tweakable sidebar background color */
    background: #1e293b;
    /* @tweakable sidebar border on the right */
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 100;
    /* @tweakable sidebar transition duration for mobile slide animation */
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.sidebar-header {
    /* @tweakable sidebar header padding */
    padding: var(--brand-padding-top, 16px) var(--brand-padding-right, 16px) var(--brand-padding-bottom, 16px) var(--brand-padding-left, 16px);
    /* @tweakable sidebar header border bottom */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    /* @tweakable sidebar content padding */
    padding: 16px 0;
}

.chats-list {
    display: flex;
    flex-direction: column;
    /* @tweakable gap between chat items in the list */
    gap: 4px;
    /* @tweakable padding around the chats list */
    padding: 0 16px;
}

.chat-item {
    display: flex;
    align-items: center;
    /* @tweakable chat item padding */
    padding: 12px 16px;
    /* @tweakable chat item border radius */
    border-radius: 8px;
    cursor: pointer;
    /* @tweakable chat item transition duration */
    transition: all 0.2s ease;
    /* @tweakable chat item gap between icon and content */
    gap: 12px;
    position: relative;
    /* @tweakable chat item background color */
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
}

.chat-item:hover {
    /* @tweakable chat item hover background */
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.chat-item.active {
    /* @tweakable active chat item background */
    background: rgba(37, 99, 235, 0.2);
    color: white;
    /* @tweakable active chat item border */
    border-left: 3px solid #2563eb;
}

.chat-icon {
    /* @tweakable chat icon size */
    width: 16px;
    height: 16px;
    color: currentColor;
    flex-shrink: 0;
}

.chat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* @tweakable gap between chat title and timestamp */
    gap: 2px;
    min-width: 0;
}

.chat-title {
    /* @tweakable chat title font size */
    font-size: 14px;
    font-weight: 500;
    color: currentColor;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-timestamp {
    /* @tweakable chat timestamp font size */
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.chat-delete {
    /* @tweakable chat delete button size */
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    /* @tweakable chat delete button transition */
    transition: all 0.2s ease;
    opacity: 0;
    flex-shrink: 0;
}

.chat-item:hover .chat-delete {
    opacity: 1;
}

.chat-delete:hover {
    /* @tweakable chat delete button hover background */
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.empty-state {
    /* @tweakable empty state padding */
    padding: 24px 16px;
    text-align: center;
}

.empty-state p {
    /* @tweakable empty state text color */
    color: rgba(255, 255, 255, 0.5);
    /* @tweakable empty state font size */
    font-size: 14px;
    line-height: 1.5;
}

/* Remove sidebar footer styles since we're removing account section */
.sidebar-footer {
    display: none;
}

.user-profile {
    display: none;
}

.settings-button {
    display: none;
}

/* Mobile Tools Styles */
.mobile-tools-button {
    display: none; /* Hidden by default on desktop */
    width: var(--tool-button-width);
    height: var(--tool-button-height);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.mobile-tools-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--card-background);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    width: var(--mobile-tools-dropdown-width);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
    flex-direction: column;
    gap: var(--mobile-tools-gap);
    z-index: 1000;
}

.mobile-tools-dropdown.show {
    display: flex;
}

.mobile-tool-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    padding: var(--mobile-tool-option-padding);
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.mobile-tool-option:hover {
    background: var(--surface);
}

.mobile-tool-option span {
    font-size: 14px;
}

/* Add these new mobile-specific styles */

/* Mobile sidebar button */
.mobile-menu-button {
    display: none; /* Hidden by default on desktop */
    /* @tweakable mobile menu button padding */
    padding: 8px;
    /* @tweakable mobile menu button position from left */
    left: 16px;
    /* @tweakable mobile menu button position from top */
    top: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: fixed;
    z-index: 1000;
    color: var(--text-primary);
    border-radius: var(--radius-md);
}

.mobile-menu-button svg {
    /* @tweakable mobile menu icon size */
    width: 24px;
    /* @tweakable mobile menu icon size */
    height: 24px;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* @tweakable overlay backdrop blur amount */
    backdrop-filter: blur(4px);
    z-index: 90;
}

/* Mobile responsive changes */
@media (max-width: 768px) {
    .mobile-menu-button {
        display: block;
    }

    .sidebar {
        /* @tweakable mobile sidebar width */
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.show {
        display: block;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        /* @tweakable mobile content padding */
        padding: 16px;
    }

    /* @tweakable mobile chat container width */
    .chat-container {
        max-width: 100%;
        padding: 0 8px;
    }

    .tools-container {
        position: relative;
    }
}

/* Mobile responsive adjustments for sub-dropdowns */
@media (max-width: 768px) {
    .sub-dropdown {
        /* @tweakable mobile sub-dropdown position adjustment */
        top: calc(100% + 4px);
        /* @tweakable mobile sub-dropdown left alignment */
        left: 0;
    }
    
    .sub-dropdown.show {
        transform: translateY(0);
    }
}

/* Voice Mode Modal Styles - Redesigned to match the provided interface image */
.voice-mode-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* @tweakable voice mode background gradient to match the dark interface */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    z-index: 2000;
    /* @tweakable voice mode modal transition duration */
    transition: all 300ms ease;
    color: #ffffff;
}

.voice-mode-modal.show {
    display: flex;
    animation: voiceModeSlideIn 300ms ease;
}

@keyframes voiceModeSlideIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.voice-mode-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* @tweakable voice mode content padding */
    padding: clamp(2rem, 4vw, 3rem);
    color: white;
    position: relative;
    min-height: 100vh;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;
}

.voice-mode-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* @tweakable voice mode header margin bottom */
    margin-bottom: clamp(2rem, 5vw, 3rem);
    /* @tweakable voice mode header height */
    height: clamp(60px, 8vw, 80px);
    flex-shrink: 0;
    position: relative;
}

.voice-mode-timer {
    /* @tweakable timer background color */
    background: rgba(255, 255, 255, 0.1);
    /* @tweakable timer backdrop blur */
    backdrop-filter: blur(20px);
    /* @tweakable timer border radius */
    border-radius: 20px;
    /* @tweakable timer padding */
    padding: 8px 16px;
    /* @tweakable timer font size */
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    font-weight: 600;
    color: white;
    /* @tweakable timer border */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* @tweakable timer font family */
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    /* @tweakable timer letter spacing */
    letter-spacing: 0.5px;
}

/* Audio Visualizer - Circular design matching the interface image */
.voice-visualizer-container {
    /* @tweakable visualizer container size */
    width: clamp(200px, 40vw, 280px);
    /* @tweakable visualizer container height */
    height: clamp(200px, 40vw, 280px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    flex-shrink: 0;
}

.voice-visualizer {
    /* @tweakable visualizer circle size */
    width: clamp(160px, 32vw, 220px);
    /* @tweakable visualizer circle height */
    height: clamp(160px, 32vw, 220px);
    position: relative;
    /* @tweakable visualizer border radius for perfect circle */
    border-radius: 50%;
    /* @tweakable visualizer gradient background */
    background: linear-gradient(45deg, #00d4aa 0%, #10a37f 25%, #0ea5e9 50%, #3b82f6 75%, #8b5cf6 100%);
    /* @tweakable visualizer box shadow */
    box-shadow: 0 0 40px rgba(16, 163, 127, 0.4), 
                0 0 80px rgba(16, 163, 127, 0.2);
    /* @tweakable visualizer animation duration */
    animation: visualizerPulse 2s ease-in-out infinite;
}

/* Remove the wave pattern completely from the visualizer */
.voice-wave-pattern {
    display: none;
}

/* Voice Controls - Update to remove background rectangle and adjust positioning */
.voice-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    /* @tweakable voice controls gap between buttons */
    gap: clamp(1rem, 3vw, 1.5rem);
    /* @tweakable voice controls padding */
    padding: clamp(1rem, 3vw, 1.5rem);
    flex-wrap: wrap;
    flex-shrink: 0;
    /* @tweakable voice controls margin from bottom */
    margin-bottom: clamp(1rem, 3vw, 2rem);
    /* @tweakable whether buttons should stick to bottom on mobile */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* @tweakable bottom position on mobile devices */
    margin-bottom: max(env(safe-area-inset-bottom), 16px);
    /* @tweakable horizontal padding on mobile to avoid edges */
    padding-left: max(env(safe-area-inset-left), 16px);
    padding-right: max(env(safe-area-inset-right), 16px);
}

.voice-control-button {
    /* @tweakable control button size */
    width: clamp(50px, 12vw, 60px);
    height: clamp(50px, 12vw, 60px);
    /* @tweakable control button border radius - perfectly circular */
    border-radius: 50%;
    border: none;
    /* @tweakable control button background */
    background: rgba(255, 255, 255, 0.15);
    /* @tweakable control button backdrop blur */
    backdrop-filter: blur(10px);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* @tweakable control button transition */
    transition: all 200ms ease;
    /* @tweakable control button border */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.voice-control-button:hover {
    /* @tweakable control button hover background */
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.voice-control-button.active {
    /* @tweakable control button active background */
    background: rgba(16, 163, 127, 0.8);
    /* @tweakable control button active border color */
    border-color: rgba(16, 163, 127, 1);
}

.voice-control-button.recording {
    /* @tweakable recording button background */
    background: rgba(16, 163, 127, 0.9);
    /* @tweakable recording button animation */
    animation: recordingPulse 1.5s ease-in-out infinite;
}

@keyframes recordingPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px rgba(16, 163, 127, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(16, 163, 127, 0.6);
    }
}

.voice-control-button.hang-up {
    /* @tweakable hang up button background */
    background: rgba(239, 68, 68, 0.8);
    /* @tweakable hang up button border color */
    border-color: rgba(239, 68, 68, 1);
}

.voice-control-button.hang-up:hover {
    /* @tweakable hang up button hover background */
    background: rgba(239, 68, 68, 0.9);
}

/* Hide transcript container completely to match the clean interface */
.voice-transcript {
    display: none !important;
}

/* Update mobile responsive adjustments */
@media (max-width: 768px) {
    .voice-controls {
        /* @tweakable mobile controls minimum gap between buttons */
        gap: 0.75rem;
        /* @tweakable mobile controls vertical padding */
        padding-top: 1rem;
        /* @tweakable mobile controls bottom padding (adds to safe area inset) */
        padding-bottom: 1rem;
        /* @tweakable mobile controls horizontal padding (adds to safe area inset) */
        padding-left: max(env(safe-area-inset-left), 12px);
        padding-right: max(env(safe-area-inset-right), 12px);
        /* @tweakable whether to center buttons horizontally on mobile */
        justify-content: center;
        /* @tweakable whether to show buttons in a single row on mobile */
        flex-wrap: nowrap;
        /* @tweakable z-index to ensure buttons stay above other content */
        z-index: 2100;
    }

    /* Ensure content doesn't get hidden behind fixed controls */
    .voice-mode-content {
        /* @tweakable bottom padding to account for fixed controls */
        padding-bottom: calc(80px + max(env(safe-area-inset-bottom), 16px));
    }
}

@media (max-width: 480px) {
    .voice-controls {
        /* @tweakable very small screen controls gap */
        gap: 0.5rem;
        /* @tweakable very small screen controls padding */
        padding: 0.75rem;
    }
    
    .voice-control-button {
        /* @tweakable very small screen control button size */
        width: 60px;
        height: 60px;
        /* @tweakable very small screen control button border radius - perfectly circular */
        border-radius: 50%;
    }
}

/* Remove old voice mode styles */
.voice-avatar,
.voice-status-indicator,
.voice-equalizer,
.eq-bar,
.voice-mic-button,
.voice-settings-button {
    display: none;
}

.new-chat-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 12px;
    padding: 12px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
}

.new-chat-button:hover {
    background-color: var(--primary-hover);
}

/* Feedback modal placeholder styles (styles are mostly inline for this component) */
.feedback-modal {
    /* Base styles applied inline for better control */
}

.feedback-content textarea:focus {
    /* @tweakable feedback textarea focus border color */
    border-color: #0078d4 !important;
    /* @tweakable feedback textarea focus shadow */
    box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2) !important;
}

.feedback-content input[type="checkbox"]:focus {
    /* @tweakable feedback checkbox focus outline */
    outline: 2px solid #0078d4;
    /* @tweakable feedback checkbox focus outline offset */
    outline-offset: 2px;
}

/* Add new AI Generator styles */
.ai-tools-section {
    padding: var(--spacing-unit);
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ai-tool-button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 150ms ease;
    width: 100%;
    text-align: left;
}

.ai-tool-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.ai-gen-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.ai-gen-modal.show {
    display: flex;
}

.ai-gen-content {
    /* @tweakable content width for AI generator modals */
    width: var(--ai-gen-content-width, 800px);
    /* @tweakable max width for AI generator modals as percentage of viewport */
    max-width: var(--ai-gen-content-max-width, 90%);
    /* @tweakable content max height for AI generator modals */
    max-height: var(--ai-gen-content-max-height, 90vh);
    background: var(--background);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ai-gen-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
}

.ai-gen-header .brand-logo {
    width: 32px;
    height: 32px;
}

.ai-gen-header .brand-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.ai-gen-body {
    flex: 1;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: auto;
}

.ai-gen-preview {
    /* @tweakable preview height for AI generators */
    height: var(--ai-gen-preview-height, 400px);
    background: var(--surface);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ai-gen-placeholder {
    color: var(--text-muted);
    font-size: 14px;
}

.ai-gen-controls {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ai-gen-upload-btn,
.ai-gen-quality-btn,
.ai-gen-fps-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 150ms ease;
}

.ai-gen-upload-btn:hover,
.ai-gen-quality-btn:hover,
.ai-gen-fps-btn:hover {
    background: var(--border-light);
}

.ai-gen-input {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-gen-input textarea {
    width: 100%;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 14px;
    resize: vertical;
    min-height: 80px;
}

.ai-gen-submit {
    align-self: flex-end;
    padding: 8px 24px;
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}

.ai-gen-submit:hover {
    background: var(--primary-hover);
}