:root {
    --bg-color: #f4f4f9;
    --text-color: #333;
    --primary-color: #0f5cdd;
    --secondary-color: #6c757d;
    --border-color: #ddd;
    --card-bg: #fff;
    --overlay-bg: rgba(0,0,0,0.5);
    --recording-red: #ff4d4d;
    --error-yellow: #f1c40f;
    --status-bar-color: var(--recording-red);
    --color-white: #fff;
    --surface-muted: #eee;
    --surface-muted-dark: #8c8c8c;
    --text-muted-dark: #333;
    --accent-green: #2eb7a4;
    --accent-blue: #1481d6;
    --text-tertiary: #999;
    --primary-alpha-10: rgba(15, 92, 221, 0.1);
    --timestamp-color: rgba(15, 92, 221, 0.66);
    --hover-bg: rgba(0,0,0,0.05);
    --hover-bg-strong: rgba(0,0,0,0.1);
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 15px rgba(0,0,0,0.1);
    --shadow-sidebar: 5px 0 15px rgba(0,0,0,0.1);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill-half: 10px;
    --radius-xl: 12px;
    --radius-pill: 20px;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: monospace;
    --sidebar-width: 300px;
    --header-height: 60px;
    --session-item-height: 50px;
    --status-bar-height: 3px;
    --color-intensity: 0.15;
    --sidebar-bg: rgba(209, 187, 89, var(--color-intensity));
    --input-bg: rgba(254, 200, 50, var(--color-intensity));
}

body.dark-mode {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --primary-color: #6664ea;
    --secondary-color: #a0a0a0;
    --border-color: #333;
    --card-bg: #1a1a1a;
    --overlay-bg: rgba(0,0,0,0.7);
    --recording-red: #ff4d4d;
    --error-yellow: #f1c40f;
    --color-white: #fff;
    --surface-muted: #eee;
    --surface-muted-dark: #8c8c8c;
    --text-muted-dark: #121212;
    --accent-green: #2ecc71;
    --accent-blue: #3498db;
    --text-tertiary: #999;
    --primary-alpha-10: rgba(0, 123, 255, 0.1);
    --purple-blue: #373664;
    --timestamp-color: #7b79d5;
    --hover-bg: rgba(255,255,255,0.05);
    --hover-bg-strong: rgba(255,255,255,0.1);
    --shadow-sm: 0 2px 5px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 15px rgba(0,0,0,0.1);
    --shadow-sidebar: 5px 0 15px rgba(0,0,0,0.1);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill-half: 10px;
    --radius-xl: 12px;
    --radius-pill: 20px;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: monospace;
    --sidebar-width: 300px;
    --header-height: 60px;
    --session-item-height: 50px;
    --status-bar-height: 3px;
    --sidebar-bg: rgba(53, 42, 135, var(--color-intensity));
    --input-bg: rgba(20, 129, 214, var(--color-intensity));
    background: linear-gradient(to right, var(--purple-blue), var(--bg-color));
}

html { scroll-behavior: smooth; height: 100%; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-color); }
::-webkit-scrollbar-thumb { background: var(--secondary-color); border-radius: var(--radius-sm); }

body {
    font-family: var(--font-family);
    margin: 0; padding: 0;
    background: linear-gradient(to right, #e8e8e8, #ffffff);
    color: var(--text-color);
    display: flex; flex-direction: row; height: 100%; overflow: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
}