/* app.css — ALL of Table's styling lives in this file (no CSS framework). Three-column layout, panels, cards, chat and settings. Colors live in CSS variables: the light theme is the default in :root and the dark theme redefines the same names in [data-theme="dark"] (attribute applied to by the server, from the user's preference). */ :root { --surface: #f7f2f2; --surface-alt: #efe7e6; --text: #241b1b; --muted: #5c514e; --muted-2: #6f6360; --border: #e6dbdb; --border-strong: #cdbebe; --primary: #790b0b; --primary-contrast: #fdf7f7; --primary-text: #8a1a1a; --accent-soft: #f2dede; --danger: #b3261e; --danger-soft: #fbe3e0; --danger-border: #eec3be; --danger-text: #8f1d17; --success: #2e7d32; --success-bg: #2e7d32; --shadow: rgba(60, 20, 20, 0.15); --overlay: rgba(40, 20, 20, 0.4); } [data-theme="dark"] { --surface: #241d1d; --surface-alt: #171212; --text: #ece6e4; --muted: #c4b8b5; --muted-2: #a99c99; --border: #3a3030; --border-strong: #504242; --primary: #790b0b; --primary-contrast: #fdf7f7; --primary-text: #f0a3a3; --accent-soft: #3a2323; --danger: #b03a34; --danger-soft: #3a2323; --danger-border: #5c3230; --danger-text: #f0a9a6; --success: #8fd694; --success-bg: #2e5d31; --shadow: rgba(0, 0, 0, 0.5); --overlay: rgba(0, 0, 0, 0.6); } body { margin: 0; font-family: system-ui, sans-serif; background: var(--surface-alt); color: var(--text); } button, input, select, textarea { font: inherit; /* Without this, button/select/input/textarea use the browser's default color and background (black on white) and become unreadable in the dark theme. */ color: inherit; background: var(--surface); box-sizing: border-box; } button { cursor: pointer; } input::placeholder, textarea::placeholder { color: var(--muted-2); opacity: 1; } /* Text fields share one look (border, corner, padding); the width is set per context (form/panel/modal). */ .new-entity-form input, .new-entity-form textarea, .card-edit-form input, .card-edit-form textarea, .auth-form input, .settings-section input[type="text"], .settings-section input[type="password"], .settings-section input[type="email"], .settings-section select, .settings-section textarea, .modal-content input, .api-key-input-row input { padding: 0.375rem; border: 1px solid var(--border-strong); border-radius: 4px; } /* ---- Top nav ---- */ .top-nav { display: flex; align-items: center; gap: 0.75rem; height: 56px; padding: 0 1rem; background: var(--primary); color: var(--primary-contrast); /* The nav (and the user dropdown inside it) sits above any panel/modal: on mobile the sidebar overlay starts right below it. */ position: relative; z-index: 50; } .nav-panel-btn { font-size: 1.25rem; color: inherit; text-decoration: none; padding: 0.25rem 0.5rem; border-radius: 4px; } .nav-panel-btn.active, .nav-panel-btn:hover { background: rgba(253, 247, 247, 0.18); } .brand { font-weight: 700; font-size: 1.125rem; color: inherit; text-decoration: none; flex: none; /* centered: both sides take the same fraction */ } /* Nav sides: persona on the left, actions on the right; the brand sits in the middle. */ .nav-left, .nav-right { flex: 1 1 0; display: flex; align-items: center; gap: 0.75rem; } .nav-right { justify-content: flex-end; } /* User menu (⚙️) with dropdown */ .user-menu { position: relative; } .user-menu-btn { background: none; border: 0; font-size: 1.25rem; color: inherit; } /* Popover surface shared by the user, persona and model dropdowns. */ .user-dropdown, #persona-dropdown, .model-dropdown { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 4px 12px var(--shadow); z-index: 20; } .user-dropdown { display: none; position: absolute; right: 0; top: 100%; min-width: 180px; color: var(--text); padding: 0.5rem; } .user-menu.open .user-dropdown { display: block; } .user-dropdown .lang-switcher { margin-bottom: 0.5rem; } .user-dropdown select { width: 100%; padding: 0.25rem; } .user-dropdown .settings-link { display: block; padding: 0.375rem 0.25rem; color: inherit; text-decoration: none; border-radius: 4px; } .user-dropdown .settings-link:hover { background: var(--surface-alt); } .user-dropdown form { margin: 0; } .user-dropdown .logout-btn { width: 100%; text-align: left; background: none; border: 0; padding: 0.375rem 0.25rem; border-radius: 4px; } .user-dropdown .logout-btn:hover { background: var(--surface-alt); } /* ---- Three-column layout (fixed widths) ---- */ .app-layout { display: flex; height: calc(100vh - 56px); } .side-panel { width: 300px; flex: none; background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; } .side-panel:last-child { border-right: 0; border-left: 1px solid var(--border); } .center-area { flex: 1; min-height: 0; display: flex; flex-direction: column; /* Scrolling happens inside the fragment wrapper (the chat scrolls only the message list), keeping the send form always visible. */ overflow: hidden; } /* Inner slots replaced by htmz preserve the structural containers: the center wrapper repeats the flex/height behavior so the chat and the empty state stay centered; on content screens (settings) it is the one that scrolls. */ #chat-main-content { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; } /* Center fragment wrappers (settings/profile) take the full width. */ .settings-content, .profile-content { padding: 0.75rem; } /* ---- Side panels ---- */ .panel { padding: 0.75rem; } .panel-header { display: flex; align-items: center; justify-content: space-between; } .panel-header h2 { margin: 0; font-size: 1rem; } .panel-close { background: none; border: 0; font-size: 1rem; color: var(--muted-2); } .panel-empty { color: var(--muted-2); font-size: 0.875rem; } /* ---- Cards (personas and characters) ---- */ .import-progress { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--surface); } .import-progress-label { display: flex; justify-content: space-between; margin-bottom: 0.25rem; font-size: 0.85rem; color: var(--muted); } .import-progress progress { display: block; width: 100%; height: 0.5rem; accent-color: var(--primary); } .panel-actions { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; } .panel-actions button { flex: 1; padding: 0.375rem; border: 1px solid var(--border-strong); border-radius: 4px; } .new-entity-form { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.75rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; } .new-entity-form[hidden], .panel-card-edit[hidden], .modal[hidden] { display: none; } .new-entity-actions { display: flex; gap: 0.5rem; } .new-entity-actions button { flex: 1; padding: 0.375rem; border: 0; border-radius: 4px; } .new-entity-cancel { background: var(--border); } .panel-card { border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; margin-bottom: 0.5rem; background: var(--surface); } .panel-card-view { /* Avatar on the left and information (name, creator_notes, actions) on the right. */ display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; } .panel-card-info { flex: 1; min-width: 0; } .card-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .card-avatar-fallback { display: flex; align-items: center; justify-content: center; color: var(--primary-contrast); font-weight: 700; } .card-name { font-weight: 600; } /* Card notes: at most 3 lines in the card view; when editing is opened, they are expanded for full reading. */ .card-notes { color: var(--muted); font-size: 0.8125rem; margin-top: 0.125rem; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .panel-card.editing .card-notes { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } /* When editing, the card's action button leaves the scene (the view keeps showing avatar, name and notes). */ .panel-card.editing .select-for-chat { display: none; } /* The form does not let content escape the card. */ .panel-card-edit { overflow: hidden; } /* Edit textareas: parent width, resizable vertically (never horizontally) and always contained in the container. */ .card-edit-form textarea.edit-field { width: 100%; max-width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.5em; font-family: inherit; } /* alternate_greetings list: one textarea per entry + remove button. */ .alternate-greeting-row { display: flex; align-items: flex-start; gap: 0.25rem; margin-bottom: 0.375rem; } .alternate-greeting-row textarea { flex: 1; min-width: 0; } .remove-greeting { flex: none; padding: 0.125rem 0.375rem; border: 1px solid var(--border-strong); border-radius: 4px; } .add-greeting { padding: 0.25rem 0.5rem; border: 1px dashed var(--border-strong); border-radius: 4px; } .card-edit-form { display: flex; flex-direction: column; gap: 0.375rem; } .advanced-details summary { cursor: pointer; color: var(--muted); font-size: 0.875rem; } .advanced-field-row { /* Advanced fields: label ABOVE the input, one block per field. */ display: flex; flex-direction: column; gap: 0.125rem; margin-bottom: 0.5rem; } .advanced-field { display: block; font-size: 0.75rem; color: var(--muted-2); } .advanced-field-row input, .advanced-field-row textarea { width: 100%; } .card-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.375rem; } .card-edit-actions button { flex: 1; padding: 0.375rem; border: 0; border-radius: 4px; } .delete-card { background: var(--danger); color: var(--primary-contrast); } .select-for-chat { margin-top: 0.375rem; padding: 0.375rem; border: 0; border-radius: 4px; background: var(--success-bg); color: var(--primary-contrast); } /* Toast "Saved" */ .toast-saved { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); background: var(--success-bg); color: var(--primary-contrast); padding: 0.5rem 1rem; border-radius: 4px; z-index: 50; animation: toast-fade 2.5s forwards; } @keyframes toast-fade { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } .chat-empty { margin: auto; text-align: center; color: var(--muted); } .chat-empty .btn { display: inline-block; margin-top: 0.75rem; padding: 0.5rem 1rem; border-radius: 6px; text-decoration: none; } /* ---- Settings (tabs) ---- */ .settings-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border); padding: 0.75rem; } .settings-tab { padding: 0.375rem 0.75rem; border-radius: 6px 6px 0 0; color: var(--muted); text-decoration: none; } .auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .auth-card { width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; } .auth-title { margin: 0 0 1rem; font-size: 1.25rem; } .auth-form label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.875rem; } .auth-form input { width: 100%; padding: 0.5rem; } .auth-form button { margin-top: 1rem; width: 100%; padding: 0.5rem; border: 0; border-radius: 4px; cursor: pointer; } .error-box { background: var(--danger-soft); border: 1px solid var(--danger-border); border-radius: 4px; color: var(--danger-text); padding: 0.5rem; margin-bottom: 0.75rem; } .auth-links { margin-top: 1rem; font-size: 0.875rem; } .chat { display: flex; flex-direction: column; flex: 1; min-height: 0; } .chat-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--surface); } .chat-char-name { font-weight: 600; margin-right: auto; } .chat-box { /* flex-basis 0 + min-height 0: the list shrinks and scrolls on its own, without pushing the send form off screen. */ flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .message { max-width: 75%; padding: 0.5rem 0.75rem; border-radius: 8px; white-space: pre-wrap; word-break: break-word; } .message.user { align-self: flex-end; } .message.assistant { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); } .chat-input-row { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--border); background: var(--surface); flex: none; /* never shrinks: always visible in the footer */ } .chat-input-row textarea { flex: 1; resize: none; padding: 0.5rem; border-radius: 6px; } .chat-input-row button[type="submit"] { padding: 0.5rem 1rem; border: 0; border-radius: 6px; } /* Persona selector (grid dropdown) */ .persona-selector { position: relative; } #persona-btn { background: none; border: 1px solid var(--border-strong); border-radius: 6px; font-size: 1.125rem; padding: 0.375rem; } #persona-dropdown { display: none; position: absolute; bottom: 100%; left: 0; margin-bottom: 0.5rem; width: 240px; max-height: 300px; overflow-y: auto; } #persona-dropdown.visible { display: block; } .persona-dropdown-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.375rem 0.5rem; background: none; border: 0; text-align: left; } .persona-dropdown-item:hover, .persona-dropdown-item.active { background: var(--surface-alt); } .persona-mini { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .persona-mini-fallback { display: inline-flex; align-items: center; justify-content: center; color: var(--primary-contrast); font-size: 0.75rem; font-weight: 700; } .persona-check { margin-left: auto; } #persona-create-new { display: block; padding: 0.5rem; color: var(--primary-text); text-decoration: none; border-top: 1px solid var(--border); } /* Custom model selector */ .model-selector { position: relative; } .model-selector-trigger { background: var(--surface-alt); border: 1px solid var(--border-strong); border-radius: 6px; padding: 0.375rem 0.75rem; } .model-dropdown { display: none; position: absolute; right: 0; top: 100%; margin-top: 0.25rem; width: 260px; } .model-selector.open .model-dropdown { display: block; } .model-filter { width: 100%; padding: 0.375rem; border: 0; border-bottom: 1px solid var(--border); } .model-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; } .model-list li { padding: 0.375rem 0.5rem; cursor: pointer; } .model-list li:hover, .model-list li.active { background: var(--accent-soft); } /* Grouped conversations */ .conversation-group { margin-bottom: 0.5rem; } .conversation-group-header { font-size: 0.75rem; text-transform: uppercase; color: var(--muted-2); padding: 0.25rem 0; cursor: pointer; } .conversation-group-header.collapsed + .conversation-row { display: none; } .conversation-row { display: flex; align-items: center; border-radius: 4px; padding: 0.125rem 0.25rem; } .conversation-row.active { background: var(--accent-soft); } .conversation-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; font-size: 0.875rem; } /* Small avatar in the conversation list. */ .conversation-row .card-avatar { width: 24px; height: 24px; font-size: 0.75rem; flex: none; } .conversation-text { min-width: 0; display: flex; flex-direction: column; } .conversation-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Total messages: small font and lower contrast. */ .conversation-meta { font-size: 0.6875rem; color: var(--muted-2); } .conversation-delete { background: none; border: 0; color: var(--muted-2); } .conversation-delete:hover { color: var(--danger-text); } .settings-form { padding: 0.75rem; } .settings-section { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem; margin-bottom: 0.75rem; } .settings-section h2 { margin: 0 0 0.5rem; font-size: 0.9375rem; } .settings-section label { display: block; margin: 0.5rem 0 0.25rem; font-size: 0.8125rem; color: var(--muted); } .settings-section input[type="text"], .settings-section input[type="password"], .settings-section input[type="email"], .settings-section select, .settings-section textarea { width: 100%; } .checkbox-row { display: flex; align-items: center; gap: 0.375rem; } .checkbox-row input[type="checkbox"] { width: auto; } .order-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .order-row input[type="number"] { width: 64px; } /* Fixed settings actions bar (a single Save + Cancel) */ .settings-actions-bar { position: fixed; bottom: 0; left: 300px; right: 300px; display: flex; gap: 0.75rem; align-items: center; justify-content: center; padding: 0.5rem; background: var(--surface); border-top: 1px solid var(--border); z-index: 10; } .settings-save { padding: 0.5rem 1.5rem; border: 0; border-radius: 4px; } .settings-cancel { color: var(--muted); text-decoration: none; padding: 0.5rem; } .provider-status-list { list-style: none; margin: 0.5rem 0; padding: 0; } .provider-status-item { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0; } .provider-status.connected { color: var(--success); } .provider-status.disconnected { color: var(--danger-text); } .provider-remove { margin-left: auto; background: none; border: 0; } .api-key-block { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; } .masked-key { background: var(--surface-alt); padding: 0.25rem 0.5rem; border-radius: 4px; } .api-key-input-row { display: flex; gap: 0.375rem; } #api-key-status.provider-ok { color: var(--success); } #api-key-status.provider-error, .provider-error { color: var(--danger-text); } #models-count { font-size: 0.8125rem; color: var(--muted); } .modal { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 40; } .modal-content { width: 340px; background: var(--surface); border-radius: 8px; padding: 1rem; } .modal-content h2 { margin: 0 0 0.5rem; font-size: 1rem; } .modal-content label { display: block; margin: 0.5rem 0 0.25rem; font-size: 0.8125rem; } .modal-content input { width: 100%; } .modal-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; } .modal-actions button { flex: 1; padding: 0.375rem; border: 0; border-radius: 4px; } .tag-filter { margin-bottom: 0.5rem; } .tag-chip { display: inline-block; margin: 0.125rem 0.125rem 0.125rem 0; padding: 0.125rem 0.5rem; font-size: 0.75rem; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); cursor: pointer; } .tag-chip.state-in { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } .tag-chip.state-not { background: var(--surface-alt); color: var(--muted-2); text-decoration: line-through; } .tag-chip:disabled { opacity: 0.4; cursor: default; } .tag-hidden { display: none; } .tag-filter.revealed .tag-hidden { display: inline-block; } .tag-more { display: inline-block; margin: 0.125rem 0; padding: 0.125rem 0.5rem; font-size: 0.75rem; border: 1px dashed var(--border-strong); border-radius: 999px; } .tag-filter-empty { color: var(--muted-2); font-size: 0.8125rem; padding: 0.25rem 0; } /* ---- Mobile (viewport < 800px) ---- Only the top nav and the center area are visible by default: both sidebars start hidden (even with preloaded content) and the chat takes 100% of the width. Opening a panel from the menu overlays the center area; closing (× or clicking the button again) returns the screen to the chat. */ @media (max-width: 799px) { .side-panel { display: none; } .side-panel.open { display: block; position: fixed; top: 56px; /* below the top nav */ bottom: 0; left: 0; right: 0; width: 100%; z-index: 30; border: 0; } .center-area { width: 100%; } /* Dynamic viewport height (the browser bar goes away); browsers without dvh ignore the line and keep the base calc(100vh - 56px). */ .app-layout { height: calc(100dvh - 56px); } /* Fixed action bars (settings) now take the screen width. */ .settings-actions-bar { left: 0; right: 0; } } /* ---- Theme button in the user menu ---- */ .theme-toggle { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0.375rem 0.25rem; border-radius: 4px; color: inherit; } .theme-toggle:hover { background: var(--surface-alt); } /* ---- Message formatting ---- */ .message code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 4px; padding: 0 0.25rem; font-size: 0.9em; } .message strong { font-weight: 700; } .message em { font-style: italic; } /* Inline images in messages (![alt](url)). */ .message img { display: block; max-width: 100%; margin-top: 0.375rem; border-radius: 6px; } /* Primary action surface: every "main" button/link shares the same colors. */ .new-entity-save, .done-editing, .chat-empty .btn, .settings-tab.active, .auth-form button, .chat-input-row button[type="submit"], .settings-save, .modal-actions button[type="submit"], .message.user { background: var(--primary); color: var(--primary-contrast); }