@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%; min-height: 100dvh; width: 100%; max-width: 100vw; /* Use vw to be strict */ margin: 0; padding: 0; font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-color); overflow: hidden; /* Prevents the 'entire page' from scrolling */ position: fixed; /* Extra safety for mobile browsers */ } .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: 100%; width: 100%; position: relative; overflow: hidden; /* Contain all child movements */ } #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; flex-shrink: 0; z-index: 20; } #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; /* Custom Scrollbar for Session List */ scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } #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 0.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 0.4s, background-color 0.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); height: 100%; position: relative; z-index: 1; } #chat-header { display: none; padding: 12px 16px; border-bottom: 1px solid var(--border-color); align-items: center; gap: 12px; flex-shrink: 0; background-color: var(--chat-bg); z-index: 10; height: 60px; box-sizing: border-box; } #back-to-sessions-btn { background: none; border: none; color: var(--text-color); font-size: 24px; cursor: pointer; padding: 8px; /* Increased touch target */ margin-left: -8px; /* Offset padding */ line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 50%; } #back-to-sessions-btn:active { background-color: var(--subtle-bg); } #chat-header-title { font-weight: 600; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; } #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; overflow-x: hidden; /* Strictly disable horizontal scroll at this level */ padding: 24px; display: flex; flex-direction: column; gap: 20px; max-width: 1100px; width: 100%; margin: 0 auto; box-sizing: border-box; -webkit-overflow-scrolling: touch; } .message-bubble { max-width: 80%; min-width: 0; /* CRITICAL: Allows the bubble to shrink smaller than its content's width */ padding: 12px 16px; border-radius: var(--border-radius-lg); line-height: 1.5; position: relative; word-wrap: break-word; overflow-wrap: break-word; } @media (max-width: 768px) { .message-bubble { max-width: 90%; /* Keeps the 90% preference on mobile */ } } .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 { width: 100%; overflow-x: hidden; /* Prevent the content wrapper from drifting */ } .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; max-width: 100%; } .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; } .message-content table, .message-content pre { display: block; width: 100%; max-width: 100%; /* Cannot be wider than the bubble */ overflow-x: auto; /* Individual elements still scrollable */ -webkit-overflow-scrolling: touch; box-sizing: border-box; } /* Ensure table headers and cells look consistent */ .message-content th, .message-content td { border: 1px solid var(--border-color); padding: 8px 12px; text-align: left; min-width: 100px; /* Prevents columns from becoming too squished */ } .message-content th { background-color: var(--subtle-bg); font-weight: 600; } /* Optional: Add a subtle scrollbar style for tables on desktop */ .message-content table::-webkit-scrollbar { height: 6px; } .message-content table::-webkit-scrollbar-thumb { background-color: var(--border-color); border-radius: 10px; } .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); } /* --- Code Block Copy Button --- */ .code-block-wrapper { position: relative; /* This ensures margin calculations relative to other blocks are correct */ margin: 1em 0 0 0; } .message-content > .code-block-wrapper:first-child { margin-top: 0; } .code-block-wrapper pre { /* Reset margin as the wrapper now handles it */ margin: 0; } .code-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: 12px; padding: 4px 8px; border-radius: var(--border-radius-sm); opacity: 0; transition: opacity 0.2s, background-color 0.2s; z-index: 1; font-family: var(--body-font); } .code-block-wrapper:hover .code-copy-btn { opacity: 1; } .code-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); /* Handle iPhone X+ safe area */ padding-bottom: max(16px, env(safe-area-inset-bottom)); } /* --- Chat Options Bar --- */ #chat-options-bar { display: flex; align-items: center; gap: 24px; margin-bottom: 12px; } /* --- Web Search Toggle --- */ #web-search-toggle-container { display: flex; align-items: center; justify-content: flex-start; gap: 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); } /* --- Reasoning Effort Control --- */ #reasoning-effort-container { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding-right: 8px; } #reasoning-effort-container .button-text { cursor: pointer; color: var(--text-color-light); user-select: none; } #reasoning-effort-select { background-color: var(--input-bg); color: var(--text-color-light); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 4px 8px; font-family: var(--body-font); font-size: 14px; cursor: pointer; } #reasoning-effort-select:focus { outline: none; border-color: var(--input-border-focus); } /* --- 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 0.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 0.4s, background-color 0.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; box-sizing: border-box; } .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); display: flex; flex-direction: column; max-height: 90vh; /* Prevent modal from being taller than screen */ } .modal-header { padding: 16px 24px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .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; overflow-y: auto; /* Enable scrolling for list */ } .billing-section { padding-bottom: 20px; margin-bottom: 10px; border-bottom: 1px solid var(--border-color); } #billing-account-select { width: 100%; margin-top: 10px; padding: 12px; border-radius: var(--border-radius-md); background-color: var(--input-bg); border: 1px solid var(--border-color); color: var(--text-color); font-family: var(--body-font); font-size: 16px; cursor: pointer; } #billing-account-select:focus { outline: none; border-color: var(--primary-color); } .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 { /* Fix viewport expansion: strictly contain width */ width: 100%; height: 100dvh; /* Dynamic viewport height handles URL bar better */ position: fixed; /* Lock body scrolling */ overflow: hidden; } #sidebar { /* Sidebar sits in the background */ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; border-right: none; padding-bottom: env(safe-area-inset-bottom); } #chat-container { /* Chat sits on top but is pushed off-screen initially */ width: 100%; max-width: 100vw; height: 100%; position: absolute; top: 0; left: 0; z-index: 20; /* FIX: Ensure off-screen content is truly hidden to prevent viewport expansion */ transform: translateX(100%); visibility: hidden; overflow: hidden; /* Transition visibility with a delay so it stays visible while sliding out, then hides when done. */ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; background-color: var(--bg-color); /* Ensure opacity */ } #app-view.show-chat #chat-container { transform: translateX(0); visibility: visible; /* Show immediately when becoming active */ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } /* Optional: Fade sidebar slightly when chat is active for better performance than moving it */ #app-view.show-chat #sidebar { /* We keep it visible underneath or translate it slightly for a parallax effect */ /* transform: translateX(-20%); */ } #chat-header { display: flex; } #welcome-message { display: none; } #chat-messages { padding: 16px; /* Ensure bottom padding is enough to scroll past keyboard */ } /* Increase Font Size to preventing zooming on iOS input focus */ .session-name-input, #multimodal-message-input, #login-form input { font-size: 16px; } #message-form-container { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); } #chat-options-bar { overflow-x: auto; padding-bottom: 4px; margin-bottom: 8px; } #chat-options-bar::-webkit-scrollbar { display: none; } .message-bubble { max-width: 90%; } .message-bubble.assistant-message { margin-right: 16px; } .message-bubble.user-message { margin-left: 16px; } .session-actions { opacity: 1; } .session-actions button { padding: 12px; /* larger touch target */ } /* --- Mobile Modal (Bottom Sheet Style) --- */ #model-selection-modal { align-items: flex-end; /* Align to bottom */ padding: 0; } .modal-content { max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 16px; border-top-right-radius: 16px; max-height: 85vh; /* Allow it to be tall */ animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .modal-header { padding: 16px; } .modal-body { padding: 16px; padding-bottom: max(24px, env(safe-area-inset-bottom)); } } /* --- Global Toast Notifications --- */ #toast-container { position: fixed; top: 20px; /* Positioned at the top */ right: 20px; /* Default to top-right for desktop */ z-index: 9999; display: flex; flex-direction: column; align-items: flex-end; /* Align toasts to the right edge */ gap: 10px; pointer-events: none; } .toast { background-color: var(--primary-color); color: var(--white); padding: 10px 20px; border-radius: var(--border-radius-md); font-family: var(--body-font); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; /* Initial state for the animation */ transform: translateY(-20px); animation: toastIn 0.3s forwards, toastOut 0.3s ease-in 1.2s forwards; } /* Mobile: Position top-middle */ @media (max-width: 768px) { #toast-container { right: auto; left: 50%; transform: translateX(-50%); align-items: center; /* Center the toasts horizontally */ top: 15px; } } @keyframes toastIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); /* Slide back up when disappearing */ } } /* Remove the old local feedback styles */ .code-block-wrapper.copied-flash::after, .code-block-wrapper.copied-flash pre { display: none; outline: none; } /* --- Model Pricing UI --- */ .model-price-info { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 2px; } .price-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-color-light); font-weight: 700; } .price-values { font-family: var(--body-font); font-size: 12px; color: var(--text-color-accent); font-weight: 600; } /* Adjust button height for content */ .modal-buttons button.model-btn { height: auto; min-height: 80px; justify-content: flex-start; } /* Dark theme specific tweak for readability */ html:not(.light-theme) .price-values { color: var(--light-blue); } /* --- Rendered Grounding Result Styling (Gemini) --- */ .grounding-metadata-container { margin-top: 15px; border-top: 1px solid var(--border-color); padding-top: 10px; font-size: 0.9em; } /* Target the inline Google styling to allow wrapping of search results */ .grounding-metadata-container .carousel { white-space: normal !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 8px !important; overflow: visible !important; } .grounding-metadata-container .chip { margin: 0 !important; } /* Citation tooltip style */ .citation-mark { color: var(--text-color-accent); text-decoration: none; font-size: 0.75em; vertical-align: super; margin-left: 2px; font-weight: 700; cursor: pointer; } .citation-mark:hover { text-decoration: underline; color: var(--primary-color); }