/* ======================================== BASE STYLES - Variables, Reset, Typography Load this first in all pages ======================================== */ /* ========== FONTS ========== */ @font-face { font-family: 'Gilroy'; src: url('/static/fonts/gilroy/Gilroy-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/static/fonts/gilroy/Gilroy-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/static/fonts/gilroy/Gilroy-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/static/fonts/gilroy/Gilroy-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/static/fonts/gilroy/Gilroy-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/static/fonts/gilroy/Gilroy-SemiboldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/static/fonts/gilroy/Gilroy-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Gilroy'; src: url('/static/fonts/gilroy/Gilroy-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } /* ========== RESET ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Form controls don't inherit the page font from — force them to. */ button, input, select, textarea { font-family: inherit; } /* ========== CSS VARIABLES ========== */ :root { /* Background Colors (Dark - warm browns) */ --bg-primary: #1A1714; --bg-secondary: #1F1C18; --bg-tertiary: #282420; --bg-hover: #332E28; /* Text Colors (Dark) */ --text-primary: #E8E2D6; --text-secondary: #B8AFA0; --text-tertiary: #7D756A; /* Accent Colors */ --accent: #332E28; --accent-hover: #3D372F; --accent-primary: #D4725E; --accent-secondary: #D4725E; --accent-warning: #DAA520; --accent-warning-bg: rgb(218 165 32 / 8%); --accent-warning-border: rgb(218 165 32 / 25%); --accent-danger: #D94A4A; --text-on-accent: #FFF; --text-on-accent-dark: #1C1C1C; --chat-user-link: color-mix(in srgb, var(--text-primary) 96%, transparent); --chat-user-link-underline: color-mix(in srgb, var(--text-primary) 70%, transparent); --chat-user-link-hover: var(--text-primary); /* Status Colors */ --green: #10b981; --orange: #f59e0b; --blue: #3b82f6; --gray: #6b7280; --red: #ef4444; --success: #6ee7b7; --danger: #fca5a5; --danger-hover: #c82333; --file-icon-pdf: #dc3545; --file-icon-doc: #06c; --warning-gradient: linear-gradient(90deg, #d97706 0%, #fbbf24 50%, #d97706 100%); --image-placeholder-bg: #222; /* Material level tags */ --level-beginner: #8b5cf6; --level-elementary: #d94a4a; --level-pre-intermediate: #4580ff; --level-intermediate: #59b165; --level-upper-intermediate: #ff8c00; --level-advanced: #08e6ffb7; --level-any: #8d3881; /* Calendar color swatches */ --cal-swatch-blue: #93b5e3; --cal-swatch-green: #86ceac; --cal-swatch-pink: #e0a0c0; /* Border & Shadow */ --border-color: #332E28; --shadow-color: rgb(0 0 0 / 30%); /* Fonts */ --font-sans: 'Gilroy', 'Helvetica Neue', -apple-system, blinkmacsystemfont, sans-serif; --font-serif-display: 'Gilroy', 'Helvetica Neue', -apple-system, sans-serif; --font-serif-body: 'Source Serif 4', georgia, serif; /* Input & Scrollbar */ --input-placeholder: #6B6358; --scroll-thumb: #3D372F; --scroll-hover: #4A4339; /* Floating UI */ --float-btn-bg: #1F1C18DD; --float-btn-shadow: 0 1px 8px #00000030; --input-bar-bg: #1F1C18F2; --input-shadow: 0 4px 24px #00000025, 0 1px 4px #00000020; --input-focus-shadow: 0 0 0 4px #D4725E12, 0 4px 24px #00000030; --send-idle-bg: #282420; /* Calendar drag & preview */ --cal-drag-bg: rgb(212 114 94 / 18%); --cal-drag-border: #D4725E; --cal-drag-text: #D4725E; /* Image collage */ --collage-more-overlay: rgb(26 23 20 / 60%); --cal-drop-placeholder-bg: rgb(212 114 94 / 12%); --cal-drop-placeholder-border: #D4725E; --cal-preview-shadow: 0 8px 24px rgb(0 0 0 / 28%); --cal-clone-shadow: 0 6px 20px rgb(0 0 0 / 35%); --cal-confirm-shadow: 0 4px 16px rgb(0 0 0 / 28%); /* Grain */ --grain-opacity: 0.018; /* Easing */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1); /* Layout */ --sidebar-width: 272px; --right-sidebar-width: 250px; --collapsed-width: 50px; } /* ========== LIGHT THEME ========== */ [data-theme="light"] { --bg-primary: #F7F4ED; --bg-secondary: #FFFDF8; --bg-tertiary: #F2EEE5; --bg-hover: #EDE9DF; --text-primary: #1B2838; --text-secondary: #3A4D5E; --text-tertiary: #6B7D8D; --accent: #E8E2D6; --accent-hover: #DDD7CB; --accent-primary: #C8553D; --accent-secondary: #C8553D; --text-on-accent: #FFF; --chat-user-link: color-mix(in srgb, var(--text-primary) 96%, transparent); --chat-user-link-underline: color-mix(in srgb, var(--text-primary) 70%, transparent); --chat-user-link-hover: var(--text-primary); --border-color: #E8E2D6; --shadow-color: rgb(0 0 0 / 8%); --input-placeholder: #A09882; --scroll-thumb: #D5CFBF; --scroll-hover: #C0BAA8; --collage-more-overlay: rgb(247 244 237 / 70%); --float-btn-bg: #FFFDF8DD; --float-btn-shadow: 0 1px 6px #1B283808; --input-bar-bg: #FFFDF8F2; --input-shadow: 0 4px 24px #1B283808, 0 1px 4px #1B283806; --input-focus-shadow: 0 0 0 4px #C8553D08, 0 4px 24px #1B283810; --send-idle-bg: #F2EEE5; --grain-opacity: 0.012; /* Calendar drag & preview */ --cal-drag-bg: rgb(200 85 61 / 14%); --cal-drag-border: #C8553D; --cal-drag-text: #C8553D; --cal-drop-placeholder-bg: rgb(200 85 61 / 10%); --cal-drop-placeholder-border: #C8553D; --cal-preview-shadow: 0 8px 24px rgb(0 0 0 / 10%); --cal-clone-shadow: 0 6px 20px rgb(0 0 0 / 14%); --cal-confirm-shadow: 0 4px 16px rgb(0 0 0 / 10%); } /* ========== BODY ========== */ body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); height: 100vh; overflow: hidden; transition: background 0.4s ease, color 0.4s ease; } /* ========== GRAIN OVERLAY ========== */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ========== SCROLLBAR ========== */ ::-webkit-scrollbar { width: 7px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-hover); } /* ========== LAYOUT CONTAINERS ========== */ .container, .chat-container { display: flex; height: 100vh; } /* ========== PAGE LOAD ANIMATIONS ========== */ @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .left-sidebar { animation: fade-up 0.4s var(--ease-out-expo) both; } .main-chat-area { animation: fade-up 0.4s var(--ease-out-expo) 0.05s both; } .right-sidebar { animation: fade-up 0.4s var(--ease-out-expo) 0.1s both; } /* ========== UTILITY CLASSES ========== */ .spacer { flex: 1; } /* ========== GLOBAL INTERACTIVE STYLES ========== */ button:hover { opacity: 0.88; } button:active { transform: scale(0.98); } input::placeholder { color: var(--input-placeholder) !important; font-style: italic; } /* ============ Account Menu ============ */ .account-menu-wrap { position: relative; display: inline-block; } /* Pins the account pill to the page's top-right edge. Absolutely positioned inside the full-width scroll area (which sets position:relative) so it sits at the page edge rather than the centered content column's edge. Sized to the pill only, so it never overlaps or intercepts clicks on the header below. Offsets match the main-page top bar (.main-page-topbar padding: 14px 28px) so the pill lands at the same spot on every page. */ .page-account-bar { position: absolute; top: 14px; right: 28px; z-index: 20; } .account-menu-btn { display: flex; align-items: center; gap: 9px; max-width: 220px; padding: 7px 10px; border-radius: 12px; background: var(--bg-primary); border: 0px solid var(--border-color); color: var(--text-primary); cursor: pointer; transition: all 0.15s ease; text-align: left; } .account-menu-btn:hover { opacity: 1 !important; background: var(--bg-hover); } .account-menu-btn.open { border-color: var(--accent-primary); /* box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 12%, transparent); */ } .account-menu-btn-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(145deg, var(--bg-hover), var(--border-color)); border: 1.5px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif-display); font-size: 14px; font-style: italic; color: var(--text-primary); flex-shrink: 0; overflow: hidden; } .account-menu-btn-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Account tab head: name-editing column on the left, avatar floated right. */ .profile-account-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 2px; } .profile-account-head-main { flex: 1; min-width: 0; } /* Profile-modal avatar control — the circle is the click target (opens the file picker); hovering reveals an overlay tint and, when an avatar exists, an × badge to remove it. */ .profile-avatar-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; } .profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(145deg, var(--bg-hover), var(--border-color)); border: 1.5px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif-display); font-size: 21px; font-style: italic; color: var(--text-primary); overflow: hidden; padding: 0; cursor: pointer; position: relative; } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .profile-avatar-overlay { position: absolute; inset: 0; border-radius: 50%; background: var(--text-primary); opacity: 0; transition: opacity 0.15s ease; } .profile-avatar:hover .profile-avatar-overlay { opacity: 0.12; } .profile-avatar-remove { position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); opacity: 0; transition: opacity 0.15s ease; } .profile-avatar-wrap:hover .profile-avatar-remove { opacity: 1; } .profile-avatar-remove:hover { border-color: var(--accent-primary); color: var(--accent-primary); } .account-menu-btn-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; } .account-menu-btn-name { font-size: 15px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu-btn-plan { font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu-btn-chevron { color: var(--text-tertiary); flex-shrink: 0; transition: transform 0.15s ease; } .account-menu-btn.open .account-menu-btn-chevron { transform: rotate(180deg); } .account-menu-popover { width: 240px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 12px 36px rgb(0 0 0 / 25%), 0 2px 8px rgb(0 0 0 / 12%); z-index: 1100; overflow: hidden; animation: account-fade-in 0.18s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes account-fade-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .account-menu-section { padding: 6px; display: flex; flex-direction: column; gap: 1px; } .account-menu-divider { height: 1px; background: var(--border-color); margin: 0; } .account-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; width: 100%; background: transparent; border: none; border-radius: 7px; color: var(--text-secondary); font-size: 13px; font-family: inherit; cursor: pointer; text-align: left; transition: all 0.12s ease; } .account-menu-item:hover { background: var(--bg-tertiary); color: var(--text-primary); } .account-menu-item.danger:hover { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); } .account-menu-item-icon { color: var(--text-tertiary); display: flex; align-items: center; flex-shrink: 0; } .account-menu-item:hover .account-menu-item-icon { color: currentcolor; } .account-menu-theme { display: flex; gap: 2px; margin: 2px 4px 0; padding: 3px; background: var(--bg-tertiary); border-radius: 8px; } .account-menu-theme-opt { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px 0; background: transparent; border: none; border-radius: 6px; color: var(--text-secondary); cursor: pointer; transition: all 0.12s ease; } .account-menu-theme-opt:not(.active):hover { color: var(--text-tertiary); } .account-menu-theme-opt.active { background: color-mix(in srgb, var(--bg-hover) 82%, var(--text-primary)); color: var(--text-primary); box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }