@font-face { font-family: 'Helvetica Neue'; src: url('/fonts/HelveticaNeue-Roman.woff2') format('woff2'), url('/fonts/HelveticaNeue-Roman.woff') format('woff'); font-weight: 400; font-style: normal; } :root { /* Fonts */ --primary-font: 'Fredoka', sans-serif; --secondary-font: 'Helvetica Neue',sans-serif; --body-font: 'Inter', sans-serif; /* Color Scheme */ --blue:#0780B5; --dark: #061820; --dark-grey: #8C9FA7; --light-blue:#96D2ED; --light: #F4FBFE; --white:#fefefe; /* Dark Theme (Default) */ --bg-color: var(--dark); --login-bg: var(--dark); --sidebar-bg: var(--dark); --primary-color: var(--blue); --primary-color-hover: var(--light-blue); --primary-color-light: var(--light); /* For active session highlight */ --text-color: var(--white); --text-color-light: var(--light-blue); --text-color-inverted: var(--light); --text-color-accent: var(--light-blue); --message-user-bg: var(--light-blue); --message-assistant-bg: rgba(244, 251, 254, 0.2); --border-color: rgba(115, 210, 237, 0.2); --input-bg: rgba(244, 251, 254, 0.2); --input-border-focus: var(--primary-color); --error-color: #e57373; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3); --subtle-bg: rgba(255, 255, 255, 0.1); --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 16px; } /* Light Theme applied via class on tag */ html.light-theme { --bg-color: var(--white); --bg-color-light: var(--light); --sidebar-bg: var(--white); --chat-bg: var(--white); --login-bg: var(--light); --primary-color-light: rgba(7, 127, 180, 0.1); --text-color: var(--dark); --text-color-light: var(--dark-grey); --text-color-inverted: var(--light); --text-color-accent: var(--blue); --message-user-bg: rgba(150, 210, 237, 0.5); --message-assistant-bg: rgba(140, 159, 167, 0.1); --border-color: rgba(140, 159, 167, 0.2); --input-bg: var(--light); --input-border-focus: var(--primary-color); --error-color: #ef4444; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05); --subtle-bg: rgba(0, 0, 0, 0.05); } h1{ font-family: var(--primary-font); font-weight: 500; font-size: 50px; letter-spacing: -2%; } h2{ font-family: var(--primary-font); font-weight: 500; font-size: 40px; letter-spacing: -2%; } h3{ font-family: var(--secondary-font); font-weight: 700; font-size: 24px; letter-spacing: -2%; } .subtitle{ font-family: var(--secondary-font); font-weight: 400; font-style: italic; font-size: 24px; } p{ font-family: var(--body-font); font-weight: 400; font-size: 16px; line-height: 140%; } .smaller-text{ font-family: var(--body-font); font-weight: 500; font-size: 14px; letter-spacing: 3%; } .pre-title{ font-family: var(--secondary-font); font-weight: 400; font-size: 16px; letter-spacing: 3%; } .button-text{ font-family: var(--secondary-font); font-weight: 400; font-size: 16px; letter-spacing: 4%; } .link-text{ font-family: var(--secondary-font); font-weight: 400; font-size: 16px; letter-spacing: 4%; text-decoration: underline; } html, body { height: 100%; margin: 0; padding: 0; font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-color); overflow: hidden; } .hidden { display: none !important; } /* --- Login View --- */ #login-view { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 90vh; padding: 16px; background-color: var(--login-color); } #login-logo { width: 80px; height: 80px; } #login-header{ display: flex; gap: 20px; justify-content: center; align-items: center; } #login-header h1 { color:var(--text-color); } #login-form { padding: 40px; width: 100%; max-width: 450px; box-sizing: border-box; } #login-form .input-group { margin-bottom: 30px; } #login-form label { display: block; color: var(--text-color); text-transform: uppercase; margin-bottom: 10px; } #login-form input { width: 100%; padding: 15px 20px; border-radius: var(--border-radius-md); border: 1px solid var(--border-color); background-color: var(--input-bg); color: var(--text-color); font-weight: 500; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; } #login-form input:focus { outline: none; border-color: var(--input-border-focus); box-shadow: 0 0 0 2px rgba(32, 159, 213, 0.3); } #login-form button { width: 100%; padding: 15px 20px; border: none; border-radius: var(--border-radius-md); background-color: var(--blue); color: var(--white); cursor: pointer; transition: background-color 0.2s; font-family: var(--secondary-font); font-weight: 300; font-size: 16px; letter-spacing: 4%; } #login-form button:hover { background-color: var(--primary-color-hover); } #login-error { color: var(--error-color); text-align: center; min-height: 20px; margin-top: 16px; } /* --- App View --- */ #app-view { display: flex; height: 100vh; width: 100vw; position: relative; } #sidebar { width: 350px; background-color: var(--sidebar-bg); display: flex; flex-direction: column; border-right: 1px solid var(--border-color); box-sizing: border-box; padding: 20px; } #sidebar-header{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 30px; } #sidebar-logo { display: flex; align-items: center; gap: 12px; } #sidebar-logo-placeholder { width: 35px; height: auto; } #sidebar-logo h1 { font-size: 20px; font-weight: 500; margin: 0; } #new-session-btn { width: 100%; border: none; background: var(--primary-color); color: var(--text-color-inverted); border-radius: var(--border-radius-md); cursor: pointer; font-family: var(--secondary-font); font-weight: 400; font-size: 16px; letter-spacing: 4%; margin-bottom: 20px; transition: background-color 0.2s; display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0; } #new-session-btn p { margin-top:20px; } .plus-icon{ height: 14px; width: 14px; margin-right: 10px; } #new-session-btn:hover { background-color: var(--primary-color-hover); } .session-item-container{ display: flex; flex-direction: row; align-items: end; justify-content: space-between; width: 100%; } #session-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex-grow: 1; } #session-list li { border-radius: var(--border-radius-md); cursor: pointer; margin-bottom: 4px; border-left: 3px solid transparent; display: flex; /* For alignment */ align-items: flex-start; padding: 10px; } #session-list li:hover { background-color: var(--bg-color); } #session-list li.active { background-color: var(--input-bg); border-left-color: var(--primary-color); } li.active .session-name { color: var(--text-color); font-family: var(--body-font); font-weight: 700; font-size: 14px; letter-spacing: 3%; } .session-item-content { display: flex; align-items: flex-start; flex-direction: row; gap: 12px; flex-grow: 1; /* Take up available space */ overflow: hidden; /* Prevent content overflow */ } .chat-icon{ width: 20px; height: 20px; } .session-text { display: flex; flex-direction: column; overflow: hidden; flex-grow: 1; max-width: 180px; } .session-name, .session-name-input { font-family: var(--body-font); font-weight: 500; font-size: 14px; letter-spacing: 3%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-color); } .session-name-input { width: 100%; background-color: var(--input-bg); border: 1px solid var(--primary-color); color: var(--text-color); padding: 2px 4px; border-radius: var(--border-radius-sm); font-family: inherit; font-size: inherit; box-sizing: border-box; } .session-name-input:focus { outline: none; } .session-metadata { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 8px; font-size: 0.8rem; color: var(--text-color-light); margin-top: 4px; } .session-model { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--secondary-font); font-weight: 400; font-size: 12px; letter-spacing: 3%; } .session-date { flex-shrink: 0; white-space: nowrap; font-family: var(--secondary-font); font-weight: 400; font-size: 12px; letter-spacing: 3%; } .session-actions { display: flex; flex-shrink: 0; opacity: 0; transition: opacity 0.2s; gap: 4px; margin-left: 8px; /* Space between text and actions */ } #session-list li:hover .session-actions, #session-list li.active .session-actions { opacity: 1; } .session-actions button { background: none; border: none; color: var(--text-color-light); cursor: pointer; padding: 6px; border-radius: var(--border-radius-sm); font-size: 1rem; line-height: 1; } .session-actions button:hover { background-color: rgba(139, 158, 166, 0.2); color: var(--text-color); } .session-actions .delete-btn:hover { color: var(--error-color); background-color: rgba(229, 115, 115, 0.2); } #sidebar-footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); } /* --- Theme Toggle Switch --- */ .theme-toggle-wrapper { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0; margin-bottom: 8px; } .theme-toggle { position: relative; display: inline-block; width: 50px; height: 28px; } .theme-toggle input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--input-bg); border: 1px solid var(--border-color); transition: background-color .4s; border-radius: 28px; } .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: var(--text-color-light); transition: transform .4s, background-color .4s; border-radius: 50%; } /* Checked state = Dark Mode */ input:checked+.slider { background-color: var(--primary-color); } input:checked+.slider:before { transform: translateX(22px); background-color: var(--text-color-inverted); } .sidebar-link { display: flex; align-items: center; gap: 12px; border-radius: var(--border-radius-md); color: var(--text-color-light); cursor: pointer; text-decoration: none; font-weight: 500; padding: 1px 10px; } .sidebar-link p{ margin-top: 15px; margin-bottom: 10px; } .sidebar-link:hover { background-color: var(--bg-color); color: var(--text-color); } .sidebar-link-icon { width: 20px; height: 20px; } #chat-container { flex-grow: 1; display: flex; flex-direction: column; background-color: var(--chat-bg); } #chat-header { display: none; padding: 8px 16px; border-bottom: 1px solid var(--border-color); align-items: center; gap: 16px; flex-shrink: 0; } #back-to-sessions-btn { background: none; border: none; color: var(--text-color); font-size: 1.5em; cursor: pointer; padding: 0 8px; } #chat-header-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #welcome-message { flex-grow: 1; display: flex; justify-content: center; align-items: center; text-align: center; padding: 16px; } .plus-icon-blue{ margin: 0px; width: 35px; height: 35px; } .start-conversation-prompt .plus-icon-box { width: 80px; height: 80px; border: 2px dashed var(--light-blue); border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px auto; } .start-conversation-prompt h3 { font-weight: 500; margin: 0 0 8px 0; color: var(--text-color); } .start-conversation-prompt p { margin: 0; color: var(--text-color-light); } #chat-messages { flex-grow: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 20px; /* Constrain the chat column width for better readability on wide screens */ max-width: 1100px; width: 100%; margin: 0 auto; box-sizing: border-box; } .message-bubble { max-width: 80%; padding: 12px 16px; border-radius: var(--border-radius-lg); line-height: 1.5; position: relative; } .message-bubble.user-message { background-color: var(--message-user-bg); color: var(--dark); align-self: flex-end; border-bottom-right-radius: var(--border-radius-sm); } .message-bubble.assistant-message { background-color: var(--message-assistant-bg); align-self: flex-start; border: 1px solid var(--border-color); border-bottom-left-radius: var(--border-radius-sm); } .attachments-container { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .attachment-item { background-color: var(--input-bg); padding: 4px 10px; border-radius: 12px; font-size: 0.9em; border: 1px solid var(--text-color); color: var(--text-color); white-space: nowrap; } /* MOD: Replaced old P tag styling with a more robust system for markdown content */ .message-content>*:first-child { margin-top: 0; } .message-content>*:last-child { margin-bottom: 0; } .message-content p, .message-content ul, .message-content ol, .message-content pre, .message-content blockquote { margin: 1em 0 0 0; } .message-content ul, .message-content ol { padding-left: 1.5em; } .message-content blockquote { padding-left: 1em; margin-left: 0; border-left: 3px solid var(--border-color); color: var(--text-color-light); } .message-content pre { background-color: var(--sidebar-bg); color: var(--text-color); padding: 12px; border-radius: var(--border-radius-md); overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; } .message-content code { font-family: "Courier New", Courier, monospace; background-color: var(--sidebar-bg); padding: 2px 4px; border-radius: var(--border-radius-sm); color: var(--text-color); } .message-content pre code { padding: 0; background: none; } .message-content img { max-width: 100%; border-radius: var(--border-radius-md); display: block; } .copy-btn { position: absolute; top: 8px; right: 8px; background: var(--subtle-bg); border: 1px solid var(--border-color); color: var(--text-color-light); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: var(--border-radius-sm); opacity: 0; transition: opacity 0.2s, background-color 0.2s; z-index: 1; } .message-bubble:hover .copy-btn { opacity: 1; } .copy-btn:hover { background-color: var(--primary-color); color: var(--text-color-inverted); } #message-form-container { padding: 16px 24px; border-top: 1px solid var(--border-color); flex-shrink: 0; background-color: var(--chat-bg); } /* --- Web Search Toggle --- */ #web-search-toggle-container { display: flex; align-items: center; justify-content: flex-start; gap: 12px; margin-bottom: 12px; padding-right: 8px; } #web-search-toggle-container label[for="web-search-checkbox"] { cursor: pointer; color: var(--text-color-light); transition: color 0.2s; user-select: none; } #web-search-toggle-container:has(input:checked) label[for="web-search-checkbox"] { color: var(--text-color-accent); } /* --- Small Toggle Switch --- */ .small-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .small-toggle input { opacity: 0; width: 0; height: 0; } .small-toggle .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--input-bg); border: 1px solid var(--border-color); transition: background-color .4s; border-radius: 24px; } .small-toggle .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: var(--text-color-light); transition: transform .4s, background-color .4s; border-radius: 50%; } .small-toggle input:checked + .slider { background-color: var(--primary-color); } .small-toggle input:checked + .slider:before { transform: translateX(20px); background-color: var(--text-color-inverted); } #multimodal-message-form .input-wrapper { display: flex; gap: 10px; background-color: var(--input-bg); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 8px; align-items: flex-end; transition: border-color 0.2s, box-shadow 0.2s; } #multimodal-message-form .input-wrapper:focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 2px rgba(7, 127, 180, 0.3); } #multimodal-message-form.drag-over .input-wrapper { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(7, 127, 180, 0.4); } #file-staging-area { padding: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 8px; } .file-stage-item { background-color: var(--message-assistant-bg); padding: 4px 8px; border-radius: 12px; font-size: 0.9em; display: flex; align-items: center; gap: 6px; color: var(--text-color); } .remove-file-btn { background: none; border: none; color: var(--text-color-light); cursor: pointer; font-size: 1.2em; line-height: 1; padding: 0; } .remove-file-btn:hover { color: var(--error-color); } #message-input, #image-prompt-input, #multimodal-message-input { flex-grow: 1; border: none; background: transparent; color: var(--text-color); padding: 8px; resize: none; min-height: 24px; max-height: 200px; overflow-y: auto; } #message-input:focus, #image-prompt-input:focus, #multimodal-message-input:focus { outline: none; } #attach-file-btn, #send-btn, #message-form button[type="submit"], #multimodal-message-form button[type="submit"] { background: transparent; border: none; color: var(--text-color-light); cursor: pointer; font-weight: bold; flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--border-radius-md); transition: background-color 0.2s, color 0.2s; } #attach-file-btn { font-size: 1.5rem; } #attach-file-btn:hover { background-color: rgba(139, 158, 166, 0.2); color: var(--text-color); } #message-form button[type="submit"], #multimodal-message-form button[type="submit"] { font-size: 1.2rem; background-color: var(--primary-color); color: var(--text-color-inverted); } #message-form button[type="submit"]:hover, #multimodal-message-form button[type="submit"]:hover { background-color: var(--primary-color-hover); } #image-message-form, #message-form { display: none; } #multimodal-message-form.text-only #attach-file-btn { display: none; } /* --- Model Selection Modal --- */ #model-selection-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; padding: 16px; } .modal-content { background: var(--sidebar-bg); padding: 20px; border-radius: var(--border-radius-lg); width: 100%; max-width: 500px; box-sizing: border-box; box-shadow: var(--shadow-lg); } .modal-header { padding: 16px 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; } .modal-header h2 { margin: 0; } #modal-close-btn { background: none; border: none; font-size: 1.8rem; line-height: 1; color: var(--text-color-light); cursor: pointer; padding: 0; } .modal-body { padding: 10px 24px; display: flex; flex-direction: column; gap: 10px; } .provider-header { display: flex; align-items: center; flex-direction:row; justify-content: flex-start; gap: 10px; margin-bottom: 12px; font-weight: 600; color: var(--text-color); } .provider-logo{ width: 35px; height:35px; } .modal-buttons { display: flex; flex-direction: column; gap: 12px; } .modal-buttons button.model-btn { padding: 16px; font-size: 1em; cursor: pointer; border-radius: var(--border-radius-md); border: 1px solid var(--border-color); background-color: var(--bg-color); color: var(--text-color); text-align: left; display: flex; flex-direction: column; gap: 4px; transition: border-color 0.2s, box-shadow 0.2s; } .modal-buttons button.model-btn:hover { border-color: var(--primary-color); box-shadow: var(--shadow-sm); } .model-btn p { font-weight: 600; color: var(--text-color); margin: 0; } .model-btn .smaller-text { color: var(--text-color-light); margin: 0; } /* --- MOBILE RESPONSIVE STYLES --- */ @media (max-width: 768px) { #app-view { display: block; overflow: hidden; } #sidebar { width: 100vw; height: 100vh; position: absolute; z-index: 20; border-right: none; transform: translateX(0); transition: transform 0.3s ease-in-out; } #chat-container { width: 100vw; height: 100vh; position: absolute; z-index: 30; transform: translateX(100%); transition: transform 0.3s ease-in-out; } #app-view.show-chat #sidebar { transform: translateX(-100%); } #app-view.show-chat #chat-container { transform: translateX(0); } #chat-header { display: flex; } #welcome-message { display: none; } #chat-messages { padding: 16px; } #message-form-container { padding: 12px; } .message-bubble { max-width: 90%; } .session-actions { opacity: 1; } } /* --- MOBILE RESPONSIVE STYLES --- */ /* --- MOBILE (≤768px) --- */ @media (max-width: 768px) { /* Layout container */ #app-view { position: relative; height: 100vh; width: 100vw; overflow: hidden; /* lock background; panels scroll themselves */ display: block; /* so absolute children can stack */ } /* SIDEBAR (list) */ #sidebar { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 */ width: 100vw; height: 100vh; transform: translateX(0); /* visible by default */ transition: transform .3s ease; z-index: 20; border-right: none; padding: 16px; overflow-y: auto; /* <-- scroll the list */ -webkit-overflow-scrolling: touch; } /* CHAT PANE */ #chat-container { position: absolute; inset: 0; width: 100vw; height: 100vh; transform: translateX(100%); /* off-screen by default */ transition: transform .3s ease; z-index: 30; display: flex; flex-direction: column; overflow: hidden; /* header + messages manage scroll */ } /* Slide transitions toggled by JS (you already add/remove .show-chat) */ #app-view.show-chat #sidebar { transform: translateX(-100%); } #app-view.show-chat #chat-container{ transform: translateX(0); } /* CHAT HEADER (shows only on mobile) */ #chat-header { display: flex; /* show on mobile */ align-items: center; gap: 12px; padding: 10px 16px; min-height: 52px; border-bottom: 1px solid var(--border-color); background: var(--chat-bg); position: sticky; /* stay visible while scrolling */ top: 0; z-index: 1; } #back-to-sessions-btn { background: none; border: none; color: var(--text-color); font-size: 1.4rem; line-height: 1; padding: 8px 10px; /* thumb-friendly */ border-radius: var(--border-radius-md); } #back-to-sessions-btn:active { background-color: var(--subtle-bg); } /* CHAT CONTENT SCROLLING */ #chat-messages { flex: 1 1 auto; overflow-y: auto; /* <-- chat scroll area */ padding: 16px; max-width: none; /* use full width on mobile */ } #message-form-container { padding: 12px; } .message-bubble { max-width: 92%; } /* a bit wider on mobile */ /* SIDEBAR LIST TWEAKS */ .session-text { max-width: none; } .session-actions { opacity: 1; } /* always visible on touch */ /* Type scale */ h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 20px; } .subtitle { font-size: 18px; } p { font-size: 15px; } /* Prevent the page itself from scrolling; panes scroll instead */ html, body { overflow: hidden; } }