/* ============================================================================= Sparrow Web Chat - Main Stylesheet ============================================================================= */ /* CSS Variables */ :root { --primary-color: #4FB6C2; --primary-hover: #3A9BA6; --primary-active: #2D8A94; --secondary-color: #6DCAD4; --background: #ffffff; --surface: #f8f9fb; --surface-elevated: #ffffff; --border-color: rgba(0, 0, 0, 0.08); --text-primary: #1f2937; --text-secondary: #6b7280; --text-tertiary: #9ca3b8; --message-user-bg: #E0F4F6; --message-assistant-bg: #F5F5F5; --sidebar-width: 280px; --header-height: 60px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); --transition-fast: 150ms ease; --transition-base: 200ms ease; /* iOS Safe Area Insets */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); } /* Dark Mode ----------------------------------------------------------------------------- Two paths feed the legacy variables: the OS preference (when no manual theme is forced) and an explicit `data-theme` set by the manual toggle. The OS rule is scoped with :not([data-theme="light"]) so forcing light always wins, and a matching :root[data-theme="dark"] block forces dark regardless of the OS. In production the attribute is never set, so behaviour is OS-driven as before. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: #0f172a; --surface: #1e293b; --surface-elevated: #334155; --border-color: rgba(255, 255, 255, 0.1); --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --message-user-bg: #1A4A4F; --message-assistant-bg: #2D3748; } } /* Manual override → force dark even when the OS is light. */ :root[data-theme="dark"] { --background: #0f172a; --surface: #1e293b; --surface-elevated: #334155; --border-color: rgba(255, 255, 255, 0.1); --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --message-user-bg: #1A4A4F; --message-assistant-bg: #2D3748; } /* ============================================================================= UI v2 — Design tokens (Phase 0 groundwork — DEFINED, NOT YET APPLIED) ----------------------------------------------------------------------------- These `--ds-*` tokens encode the "Sparrow Simplified" design-review palette, radii, shadows and typography. Nothing in the current UI consumes them yet; they exist so Phase 1 can re-skin components by switching to these variables behind the opt-in beta toggle. Defining them is inert (no visual change). Theme model (wired in Phase 1): a `data-theme` attribute on selects light/dark explicitly; absence of the attribute = follow the OS via the `@media (prefers-color-scheme: dark)` fallback below. ============================================================================= */ :root { /* Brand */ --ds-brand: #4FB6C2; --ds-brand-hover: #3A9BA6; --ds-brand-active: #2D8A94; --ds-brand-strong: #1F6E78; /* readable teal ink for chip labels on soft fill */ --ds-brand-soft: #E0F4F6; /* soft teal fill (icon chips, active row) */ --ds-brand-gradient: linear-gradient(135deg, #4FB6C2, #2D8A94); /* Typography */ --ds-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ds-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Radii */ --ds-radius-pill: 999px; --ds-radius-input: 26px; --ds-radius-card: 18px; --ds-radius-panel: 20px; --ds-radius-btn: 12px; /* Light surfaces / ink (the design-review default theme) */ --ds-bg: radial-gradient(1200px 600px at 50% -200px, #F2F7F8 0%, #E8EBEF 60%); --ds-bg-solid: #E8EBEF; --ds-surface: #ffffff; --ds-surface-muted: #F7F8FA; --ds-surface-inset: #F1F5F9; --ds-border: rgba(15, 23, 42, 0.08); --ds-border-strong: rgba(15, 23, 42, 0.12); --ds-ink: #0f172a; --ds-text: #374151; --ds-text-muted: #64748b; --ds-text-faint: #94a3b8; /* Shadows */ --ds-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04); --ds-shadow-input: 0 4px 20px -6px rgba(15, 23, 42, 0.10); --ds-shadow-pop: 0 10px 30px -14px rgba(15, 23, 42, 0.25); --ds-shadow-brand: 0 4px 12px -4px rgba(79, 182, 194, 0.6); } /* Explicit light theme (manual toggle → data-theme="light") mirrors :root */ :root[data-theme="light"] { --ds-bg: radial-gradient(1200px 600px at 50% -200px, #F2F7F8 0%, #E8EBEF 60%); --ds-bg-solid: #E8EBEF; --ds-surface: #ffffff; --ds-surface-muted: #F7F8FA; --ds-surface-inset: #F1F5F9; --ds-border: rgba(15, 23, 42, 0.08); --ds-border-strong: rgba(15, 23, 42, 0.12); --ds-ink: #0f172a; --ds-text: #374151; --ds-text-muted: #64748b; --ds-text-faint: #94a3b8; } /* Dark design-review palette — applied when OS is dark (no manual override) … */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ds-bg: radial-gradient(1200px 600px at 50% -200px, #0B1220 0%, #070B14 60%); --ds-bg-solid: #0B1220; --ds-surface: #111827; --ds-surface-muted: #0f172a; --ds-surface-inset: #1f2937; --ds-border: rgba(255, 255, 255, 0.08); --ds-border-strong: rgba(255, 255, 255, 0.14); --ds-ink: #f1f5f9; --ds-text: #e2e8f0; --ds-text-muted: #94a3b8; --ds-text-faint: #64748b; --ds-brand-soft: #14343a; --ds-brand-strong: #8FD7DF; --ds-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --ds-shadow-input: 0 4px 20px -6px rgba(0, 0, 0, 0.5); --ds-shadow-pop: 0 10px 30px -14px rgba(0, 0, 0, 0.6); } } /* … and when the manual toggle forces dark regardless of OS. */ :root[data-theme="dark"] { --ds-bg: radial-gradient(1200px 600px at 50% -200px, #0B1220 0%, #070B14 60%); --ds-bg-solid: #0B1220; --ds-surface: #111827; --ds-surface-muted: #0f172a; --ds-surface-inset: #1f2937; --ds-border: rgba(255, 255, 255, 0.08); --ds-border-strong: rgba(255, 255, 255, 0.14); --ds-ink: #f1f5f9; --ds-text: #e2e8f0; --ds-text-muted: #94a3b8; --ds-text-faint: #64748b; --ds-brand-soft: #14343a; --ds-brand-strong: #8FD7DF; --ds-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --ds-shadow-input: 0 4px 20px -6px rgba(0, 0, 0, 0.5); --ds-shadow-pop: 0 10px 30px -14px rgba(0, 0, 0, 0.6); } /* ============================================================================= UI v2 — Phase 1 re-skin (SCOPED to the opt-in beta via [data-ui-v2]) ----------------------------------------------------------------------------- Remaps the existing legacy theme variables onto the design-review `--ds-*` tokens. Every component already reads the legacy variables, so this re-skins the whole app (palette, radii, shadows, font) with NO per-component rewrites and NO structural moves. Because the `--ds-*` tokens themselves respond to `data-theme` / OS, the v2 surface inherits light/dark automatically — which is what makes the Phase 1 manual theme toggle work. IMPORTANT: this block only applies when is set (beta ON). With the flag OFF (production default) none of these declarations match, so the current UI is byte-for-byte unchanged. ============================================================================= */ :root[data-ui-v2] { /* Brand (unchanged hue — kept on tokens for consistency) */ --primary-color: var(--ds-brand); --primary-hover: var(--ds-brand-hover); --primary-active: var(--ds-brand-active); /* Surfaces & ink — `--background` stays a SOLID color because it is also used in `border: …px solid var(--background)` and gradient stops. */ --background: var(--ds-bg-solid); --surface: var(--ds-surface-muted); --surface-elevated: var(--ds-surface); --border-color: var(--ds-border); --text-primary: var(--ds-ink); --text-secondary: var(--ds-text-muted); --text-tertiary: var(--ds-text-faint); /* Softer, larger radii from the comp */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; /* Layered shadows */ --shadow-sm: var(--ds-shadow-card); --shadow-md: var(--ds-shadow-input); --shadow-lg: var(--ds-shadow-pop); } /* Typography: body stays system-ui (matches the comp); headings, the brand wordmark and primary buttons pick up Plus Jakarta Sans for the display feel. */ :root[data-ui-v2] body { font-family: var(--ds-font-body); } :root[data-ui-v2] h1, :root[data-ui-v2] h2, :root[data-ui-v2] h3, :root[data-ui-v2] h4 { font-family: var(--ds-font-display); letter-spacing: -0.01em; } /* Elements that belong to the new look only. Hidden until the beta is on. */ .v2-only { display: none; } :root[data-ui-v2] .v2-only { display: block; } /* Theme segmented control (Settings → Behavior → Appearance, v2 only) */ .theme-segmented { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border-color); border-radius: var(--ds-radius-pill); background: var(--surface); } .theme-seg-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border: none; border-radius: var(--ds-radius-pill); background: transparent; color: var(--text-secondary); font: 600 13.5px var(--ds-font-display); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .theme-seg-btn:hover { color: var(--text-primary); } .theme-seg-btn.active { background: var(--ds-brand); color: #fff; box-shadow: var(--ds-shadow-brand); } /* ── Phase 2: composer "+" menu (v2 only) ───────────────────────────────── The + trigger lives on the bar; the capability/tuning toggles are reparented into #composer-plus-menu at runtime by chat.js (ids, handlers and gating preserved — see mountComposerV2()). All rules are scoped under [data-ui-v2] so production (flag off) is byte-for-byte unchanged. */ /* In v2 the desktop bar uses #composer-plus; the legacy mobile expand toggle is retired so the two "+" affordances never coexist. */ :root[data-ui-v2] #action-expand-toggle { display: none !important; } #composer-plus { position: relative; } :root[data-ui-v2] #composer-plus { display: inline-flex; } #composer-plus-btn i { transition: transform 0.2s ease; } :root[data-ui-v2] #composer-plus-btn.active { background: var(--ds-brand); color: #fff; border-color: var(--ds-brand); } :root[data-ui-v2] #composer-plus-btn.active i { transform: rotate(45deg); } :root[data-ui-v2] .composer-plus-menu { position: absolute; bottom: calc(100% + 10px); left: 0; z-index: 200; min-width: 250px; max-width: min(300px, calc(100vw - 32px)); padding: 6px; display: flex; flex-direction: column; gap: 1px; background: var(--surface-elevated, var(--ds-surface)); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--ds-shadow-pop); animation: popupFadeIn 0.12s ease; overflow: visible; overscroll-behavior: contain; } :root[data-ui-v2] .composer-plus-menu.hidden { display: none; } :root[data-ui-v2] .composer-plus-menu.open-down { bottom: auto; top: calc(100% + 10px); } :root[data-ui-v2] .composer-plus-menu.open-up { top: auto; bottom: calc(100% + 10px); } /* Model selector relocates to the right of the bar in v2 and its width tracks the model name (no fixed min-width / truncation, with a sane ceiling). The image-mode selector inherits the same right-alignment when chat mode's pill is hidden. */ :root[data-ui-v2] #model-selector, :root[data-ui-v2] #image-model-selector { order: 20; margin-left: auto; } :root[data-ui-v2] #composer-plus { order: 10; } :root[data-ui-v2] #model-selector .model-pill, :root[data-ui-v2] #image-model-selector .model-pill { min-width: 0; justify-content: center; height: 34px; padding: 0 12px; } :root[data-ui-v2] #model-selector .pill-label, :root[data-ui-v2] #image-model-selector .pill-label { max-width: 320px; overflow: hidden; text-overflow: ellipsis; } /* Image-mode bar follows the same rule as chat mode: +, model, then the rest. The image size/count selectors default to order:0 (left of "+") without this, which broke the layout. The image-mode chip sits right after the model pill, ahead of the size/count bubbles. */ #composer-image-chip { display: none; } :root[data-ui-v2] #composer-image-chip { order: 21; } :root[data-ui-v2] #image-size-selector { order: 22; } :root[data-ui-v2] #image-count-selector { order: 23; } /* ── ChatGPT-style "+" menu rows ──────────────────────────────────────── */ :root[data-ui-v2] .plus-row { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 38px; padding: 8px 10px; border: none; background: transparent; border-radius: 9px; color: var(--text-primary); font: 500 14px var(--ds-font-body); text-align: left; cursor: pointer; } :root[data-ui-v2] .plus-row:hover { background: var(--surface); } :root[data-ui-v2] .plus-row.plus-row-hidden { display: none; } :root[data-ui-v2] .plus-row-icon { width: 18px; text-align: center; font-size: 15px; color: var(--text-secondary); } :root[data-ui-v2] .plus-row-label { flex: 1; white-space: nowrap; } :root[data-ui-v2] .plus-row-check { font-size: 13px; color: var(--ds-brand); visibility: hidden; } :root[data-ui-v2] .plus-row.plus-row-checked .plus-row-check { visibility: visible; } :root[data-ui-v2] .plus-row.plus-row-checked { color: var(--ds-brand-strong, var(--text-primary)); } :root[data-ui-v2] .plus-row.plus-row-checked .plus-row-icon { color: var(--ds-brand); } :root[data-ui-v2] .plus-row-arrow { font-size: 12px; color: var(--text-tertiary); } :root[data-ui-v2] .plus-divider { height: 1px; margin: 5px 6px; background: var(--border-color); } /* "More" submenu — flyout to the side on desktop. */ :root[data-ui-v2] .plus-more { position: relative; } :root[data-ui-v2] .plus-submenu { position: absolute; left: calc(100% + 6px); bottom: 0; min-width: 220px; padding: 6px; display: flex; flex-direction: column; gap: 1px; background: var(--surface-elevated, var(--ds-surface)); border: 1px solid var(--border-color); border-radius: 14px; box-shadow: var(--ds-shadow-pop); animation: popupFadeIn 0.12s ease; z-index: 1; } :root[data-ui-v2] .plus-submenu.hidden { display: none; } :root[data-ui-v2] .plus-row-more[aria-expanded="true"] { background: var(--surface); } /* Projects flyout: hidden when the chat already belongs to a project, and scrollable when the project list is long. */ :root[data-ui-v2] .plus-projects-group.plus-row-hidden { display: none; } :root[data-ui-v2] .plus-projects-submenu { max-height: min(60vh, 420px); overflow-y: auto; } /* ── Active-capability chip rail ──────────────────────────────────────── */ :root[data-ui-v2] #composer-chips { order: 30; display: inline-flex; align-items: center; gap: 6px; min-width: 0; } /* Each chip = a relocated capability control. Hidden until refreshV2Chips() marks it .v2-on (which must beat the legacy .hidden state). */ :root[data-ui-v2] .v2-chip { display: none !important; } :root[data-ui-v2] .v2-chip.v2-on { display: inline-flex !important; align-items: center; position: relative; max-width: min(40vw, 360px); /* Match the model selection pill's box exactly (.action-pill: 6px 10px padding, 1px border, 20px radius) so the chips sit at the same size and style as the model menu next to them. */ padding: 6px 10px; border: 1px solid var(--primary-color); background: var(--ds-brand-soft); border-radius: 20px; height: 34px; } /* Default-on tuning toggles surfaced as "off" — render neutral, not branded. */ :root[data-ui-v2] .v2-chip[data-cap="memory"].v2-on { background: var(--surface); border-color: var(--border-color); } :root[data-ui-v2] .v2-chip[data-cap="memory"].v2-on .action-pill, :root[data-ui-v2] .v2-chip[data-cap="memory"].v2-on .action-pill i, :root[data-ui-v2] .v2-chip[data-cap="memory"].v2-on .v2-chip-x { color: var(--text-secondary); } /* Inner control(s) go transparent — the chip itself is the pill. */ :root[data-ui-v2] .v2-chip .action-pill, :root[data-ui-v2] .v2-chip .document-tool-split, :root[data-ui-v2] .v2-chip .document-tool-split .action-pill { border: none !important; background: transparent !important; box-shadow: none !important; height: auto; min-width: 0; width: auto; } :root[data-ui-v2] .v2-chip .action-pill { padding: 0; gap: 7px; color: var(--ds-brand-strong); font: 500 12px var(--ds-font-body); line-height: 1; max-width: 100%; } :root[data-ui-v2] .v2-chip .action-pill i { font-size: 12px; color: var(--ds-brand-strong); } /* Leading icon = a fixed slot the "×" overlays exactly. On hover the icon fades out and the same-size "×" fades in over it (ChatGPT-style swap). */ :root[data-ui-v2] .v2-chip.v2-on .action-pill > i:first-child { width: 16px; text-align: center; transition: opacity var(--transition-fast); } :root[data-ui-v2] .v2-chip.v2-on:hover .action-pill > i:first-child, :root[data-ui-v2] .v2-chip.v2-on:focus-within .action-pill > i:first-child { opacity: 0; } :root[data-ui-v2] .v2-chip .v2-chip-label, :root[data-ui-v2] .v2-chip #perf-toggle .pill-label { display: inline; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* perf ships its own label (hidden by .icon-only in v1) — reveal on the chip. */ :root[data-ui-v2] .v2-chip .pill-chevron { display: none; } /* keep the document format caret tappable inside the chip */ :root[data-ui-v2] .v2-chip .document-tool-split { display: inline-flex; align-items: center; } :root[data-ui-v2] .v2-chip .document-format-caret-btn { width: 18px; min-width: 18px; padding: 0; } :root[data-ui-v2] .v2-chip .document-format-caret-btn i { font-size: 10px; opacity: 0.6; } /* The removable "×" — overlays the leading icon (same slot + size) and only appears on hover/focus. No background: it literally replaces the logo. */ :root[data-ui-v2] .v2-chip-x { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 0; background: transparent; color: var(--ds-brand-strong); font-size: 13px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); } :root[data-ui-v2] .v2-chip.v2-on:hover .v2-chip-x, :root[data-ui-v2] .v2-chip.v2-on:focus-within .v2-chip-x { opacity: 1; pointer-events: auto; } :root[data-ui-v2] .v2-chip-x:hover { background: transparent; color: var(--ds-brand-hover); } /* The capability dropdowns float above their chip (unchanged anchoring). */ :root[data-ui-v2] .v2-chip .action-dropdown { left: 0; } /* The Performance menu auto-flips up/down (placePopupNearTrigger). Cap its height in either direction so it scrolls internally instead of clipping. */ :root[data-ui-v2] .v2-chip .perf-dropdown.open-down, :root[data-ui-v2] .v2-chip .perf-dropdown.open-up { max-height: min(560px, calc(100vh - 140px)); } /* In v2 the legacy mobile expand popup is always inert (its controls now live in the chip rail), and the inline paperclip moves into the "+" menu. */ :root[data-ui-v2] .action-expand-popup { display: contents !important; } :root[data-ui-v2] .chat-input-row > #attach-btn { display: none; } :root[data-ui-v2] .enhance-btn { margin-left: 6px; } /* Sidebar create entry points now live in the "+" menu. */ :root[data-ui-v2] #new-image-btn, :root[data-ui-v2] #new-project-btn { display: none !important; } /* Backdrop: only painted while the menu is open (chat.js adds .open in v2). */ .composer-plus-backdrop { display: none; position: fixed; inset: 0; z-index: 199; } .composer-plus-backdrop.open { display: block; } /* Mobile: present the menu as a bottom sheet. */ @media (max-width: 768px) { :root[data-ui-v2] .composer-plus-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; min-width: 0; max-width: none; border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-height: min(78vh, 720px); overflow-y: auto; } :root[data-ui-v2] .composer-plus-menu.open-down, :root[data-ui-v2] .composer-plus-menu.open-up { top: auto; bottom: 0; } /* The "More" group expands inline within the sheet (no side flyout). */ :root[data-ui-v2] .plus-submenu { position: static; left: auto; bottom: auto; min-width: 0; margin: 2px 0 2px 12px; padding: 4px; border: none; border-left: 2px solid var(--border-color); border-radius: 0; box-shadow: none; animation: none; } /* Model pill keeps a name-tracking width but yields room on narrow bars. */ :root[data-ui-v2] #model-selector .pill-label, :root[data-ui-v2] #image-model-selector .pill-label { max-width: 150px; } /* ── v2 mobile composer layout ────────────────────────────────────────── The bar is `.action-row` (left) + `#send-button` (right) inside a space-between flex row. On a phone the chip rail needs to wrap, but a naive wrap makes the bar two lines tall while the send button — vertically centered by the parent — floats between the rows, and the right-aligned model pill drifts to the middle. Pin everything to a tidy grid: row 1 : [ + ] [ model pill ] ........... [ send ] row 2 : [ chip ] [ chip ] [ chip ] … (wraps) */ :root[data-ui-v2] .chat-action-bar { align-items: flex-start; /* send button rides row 1, not the wrap gap */ } :root[data-ui-v2] .action-row { flex: 1; /* fill the width left of the send button */ flex-wrap: wrap; align-items: center; row-gap: 8px; min-width: 0; } /* Group "+" and the model pill together on the left (drop the desktop right-alignment so the pill doesn't strand in the middle of the bar). */ :root[data-ui-v2] #model-selector, :root[data-ui-v2] #image-model-selector { margin-left: 0; } /* Chip rail drops to its own full-width line below and wraps internally. */ :root[data-ui-v2] #composer-chips { flex-basis: 100%; flex-wrap: wrap; gap: 6px; } /* Chips can use the full bar width once they have their own line. */ :root[data-ui-v2] .v2-chip.v2-on { max-width: 100%; } /* Welcome suggestion chips ("Write a message", etc.) are a desktop nicety. On a phone they crowd the greeting + composer, so drop them for a cleaner, fresher start screen — the composer is right there to type into. */ :root[data-ui-v2] #welcome-examples { display: none !important; } } /* ── Phase 3: intent-grouped model picker (v2 only) ─────────────────────── The picker rows are unchanged (.model-item); v2 just adds intent section headers and a collapsible "All models & providers" group. All rules are scoped under [data-ui-v2] and the classes only exist in v2-generated DOM, so production is untouched. */ :root[data-ui-v2] .model-group-header { display: flex; align-items: center; gap: 7px; padding: 10px 12px 4px; font: 600 11px/1 var(--ds-font-display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary, var(--text-secondary)); } :root[data-ui-v2] .model-group-header i { color: var(--ds-brand); font-size: 11px; } :root[data-ui-v2] .model-all-wrap { margin-top: 4px; border-top: 1px solid var(--border-color); } :root[data-ui-v2] .model-all-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border: none; background: transparent; color: var(--text-secondary); font: 600 12.5px var(--ds-font-display); cursor: pointer; } :root[data-ui-v2] .model-all-toggle:hover { color: var(--text-primary); } :root[data-ui-v2] .model-all-caret { transition: transform 0.2s ease; font-size: 11px; } :root[data-ui-v2] .model-all-toggle.open .model-all-caret { transform: rotate(180deg); } :root[data-ui-v2] .model-all-list.hidden { display: none; } /* ── Phase 4: empty state (v2 only) ─────────────────────────────────────── A soft radial background behind the chat surface + a row of example prompt chips under the greeting. Scoped to [data-ui-v2]; the chips markup is also .v2-only so it never renders in production. */ :root[data-ui-v2] .chat-container { background: var(--surface-elevated, var(--ds-surface)); } /* Keep the message surface white/clean in light mode (proposal desktop feel). */ :root[data-ui-v2] .chat-messages { background: var(--surface-elevated, var(--ds-surface)); } :root[data-ui-v2] .welcome-screen h2 { font: 700 30px/1.2 var(--ds-font-display); letter-spacing: -0.02em; } :root[data-ui-v2] .welcome-bird { width: 60px; height: 60px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(79, 182, 194, 0.3)); margin-bottom: 8px; } :root[data-ui-v2] #welcome-examples { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; } :root[data-ui-v2] .welcome-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid var(--border-color); border-radius: var(--ds-radius-pill); background: var(--surface-elevated, var(--ds-surface)); color: var(--text-secondary); font: 500 13.5px var(--ds-font-body); cursor: pointer; box-shadow: var(--ds-shadow-card); transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } :root[data-ui-v2] .welcome-chip:hover { color: var(--text-primary); border-color: var(--ds-brand); transform: translateY(-1px); box-shadow: var(--ds-shadow-input); } :root[data-ui-v2] .welcome-chip i { color: var(--ds-brand); font-size: 13px; } /* ── Phase 5: sidebar declutter (v2 only) ───────────────────────────────── Match the proposal: Sidebar shows New chat + Search + Recent. Create image and New project are relocated into the composer "+" Add section by JS. Everything here is scoped to [data-ui-v2] so production is untouched. */ :root[data-ui-v2] .sidebar-new { display: none !important; } :root[data-ui-v2] #new-chat-btn { background: var(--ds-brand); border-color: var(--ds-brand); color: #fff; font: 600 14px var(--ds-font-display); box-shadow: var(--ds-shadow-brand); } :root[data-ui-v2] #new-chat-btn i { opacity: 1; } :root[data-ui-v2] #new-chat-btn:hover { background: var(--ds-brand-hover); border-color: var(--ds-brand-hover); color: #fff; } :root[data-ui-v2] #search-chats-btn { background: transparent; color: var(--text-secondary); } :root[data-ui-v2] .sidebar-images-section { display: none; } :root[data-ui-v2] #recents-section-label { padding-top: 18px; } /* Legacy sidebar "New" backdrop remains inert when not used. */ .sidebar-new-backdrop { display: none; } .sidebar-new-backdrop.open { display: block; position: fixed; inset: 0; z-index: 49; } /* ── Phase 6: settings nav regroup (v2 only) ────────────────────────────── The 9 tabs are relocated under proposal-aligned groups: Models / Personalization / Knowledge & Tools / Account. */ :root[data-ui-v2] .settings-nav-groups { display: flex; flex-direction: column; gap: 12px; } :root[data-ui-v2] .settings-nav-group { display: flex; flex-direction: column; gap: 2px; padding: 6px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface); } :root[data-ui-v2] .settings-nav-group-label { padding: 2px 8px 4px; font: 700 10.5px/1.4 var(--ds-font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); opacity: 0.9; } :root[data-ui-v2] .settings-nav-group-slot { display: flex; flex-direction: column; gap: 2px; } :root[data-ui-v2] .settings-nav-group-slot .settings-nav-item { margin-bottom: 0; border-radius: 8px; padding: 10px 12px; } @media (max-width: 768px) { :root[data-ui-v2] .settings-nav-group { padding: 0; border: none; border-radius: 0; background: transparent; } :root[data-ui-v2] .settings-nav-group-label { padding: 10px 20px 6px; } } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--background); color: var(--text-primary); line-height: 1.5; overflow: hidden; } .hidden { display: none !important; } /* ============================================================================= APP LAYOUT ============================================================================= */ #app { display: flex; height: 100vh; /* Use dynamic viewport height on browsers that support it. On iOS Safari and Android Chrome, 100vh includes the area covered by the collapsing URL bar / bottom toolbar, which clips the chat-input below the visible viewport after the page scrolls. 100dvh tracks the actual visible height. Falls back to 100vh on older browsers. */ height: 100dvh; width: 100vw; } /* ============================================================================= SIDEBAR ============================================================================= */ .sidebar { width: var(--sidebar-width); background: var(--surface); display: flex; flex-direction: column; transition: width var(--transition-base); } .sidebar.collapsed { width: 0; overflow: hidden; } /* ============================================================================= SIDEBAR COLLAPSED STRIP (ChatGPT-style vertical icon bar) ============================================================================= */ .sidebar-strip { width: 0; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 0; flex-shrink: 0; transition: width var(--transition-base), padding var(--transition-base); } .sidebar-strip.visible { width: 52px; padding: 10px 0; } .strip-top, .strip-bottom { display: flex; flex-direction: column; align-items: center; gap: 4px; } .strip-btn { width: 40px; height: 40px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background var(--transition-fast), color var(--transition-fast); } .strip-btn:hover { background: var(--surface-elevated); color: var(--text-primary); } .strip-logo-btn { padding: 4px; } .strip-logo { width: 28px; height: 28px; object-fit: contain; } /* Collapsed strip: show the Sparrow logo by default, swap to the panel-toggle icon on hover so it reads as the "open sidebar" control. */ .strip-logo-btn .strip-toggle-icon { display: none; } .strip-logo-btn:hover .strip-logo { display: none; } .strip-logo-btn:hover .strip-toggle-icon { display: block; } .strip-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; } .strip-avatar-btn { width: 40px; height: 40px; } .sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; height: var(--header-height); } .logo-container { display: flex; align-items: center; gap: 10px; } .logo { width: 32px; height: 32px; } .logo-text { font-size: 18px; font-weight: 600; color: var(--primary-color); } .sidebar-header-actions { display: flex; align-items: center; gap: 8px; } .close-sidebar-btn { display: flex; width: 36px; height: 36px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast); } .close-sidebar-btn:hover { background: var(--surface-elevated); color: var(--text-primary); } /* Sidebar panel toggle icon (Lucide "panel-left") — used in the sidebar header and the collapsed strip in place of a hamburger. */ .sidebar-panel-icon { width: 20px; height: 20px; display: block; flex-shrink: 0; } .sidebar-collapse-btn { display: none; /* Removed from layout — kept selector to avoid breakage if referenced elsewhere */ } /* Full-width "New chat" button shown directly under the sidebar header */ .new-chat-btn-full { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 8px 12px 4px; padding: 10px 14px; border: 1px solid var(--primary-color); border-radius: var(--radius-md); background: var(--primary-color); color: white; font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .new-chat-btn-full i { font-size: 12px; } .new-chat-btn-full span { flex: 1; text-align: left; } .new-chat-btn-full:hover { filter: brightness(1.08); box-shadow: var(--shadow-sm); } .sidebar-section { flex: 1; /* Single scroll container for both Projects and Recents */ overflow-y: auto; display: flex; flex-direction: column; min-height: 0; } /* Section label (Projects / Recents) */ .sidebar-section-label { padding: 16px 14px 8px; font-size: 12px; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.3px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; cursor: pointer; user-select: none; } .sidebar-section-label:hover { color: var(--text-secondary); } .sidebar-section-label-left { display: flex; align-items: center; gap: 6px; } .sidebar-section-chevron { font-size: 9px; transition: transform 0.2s ease; width: 10px; text-align: center; } .sidebar-section-label.collapsed .sidebar-section-chevron { transform: rotate(-90deg); } /* Projects section */ .sidebar-projects-section { flex-shrink: 0; } .projects-list { padding: 0 8px 8px; } .projects-list:empty { display: none; } /* Collapsible section content */ .sidebar-projects-section .projects-list.section-collapsed, .sidebar-chats-section .chats-list.section-collapsed, .sidebar-images-section .chats-list.section-collapsed { display: none; } /* Chats section */ .sidebar-chats-section, .sidebar-images-section { flex-shrink: 0; display: flex; flex-direction: column; transition: background 0.15s ease, outline-color 0.15s ease; border-radius: var(--radius-sm); } .sidebar-chats-section.drop-target { outline: 2px dashed rgba(79, 182, 194, 0.3); outline-offset: -2px; } .sidebar-chats-section.drag-over { outline-color: var(--primary-color); background: rgba(79, 182, 194, 0.04); } .chats-list { padding: 0 8px 8px; } .chat-item { padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; margin-bottom: 1px; position: relative; transition: background var(--transition-fast); } .chat-item:hover { background: var(--surface-elevated); } .chat-item.active { background: rgba(79, 182, 194, 0.1); } .chat-item.editing { cursor: default; background: var(--surface-elevated); } .chat-item-title-container { display: flex; align-items: center; gap: 4px; padding-right: 24px; } .chat-item-title { font-size: 14px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; color: var(--text-primary); } .chat-item-title-input { flex: 1; font-size: 13px; font-weight: 400; color: var(--text-primary); background: var(--background); border: 1px solid var(--primary-color); border-radius: var(--radius-sm); padding: 2px 6px; outline: none; min-width: 0; } .chat-item-title-input:focus { box-shadow: 0 0 0 2px rgba(79, 182, 194, 0.2); } /* Three-dot more button */ .chat-item-more { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 24px; height: 24px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; opacity: 0; transition: opacity var(--transition-fast); border-radius: var(--radius-sm); font-size: 14px; display: flex; align-items: center; justify-content: center; } .chat-item:hover .chat-item-more { opacity: 1; } .chat-item-more:hover { color: var(--text-primary); background: var(--surface-elevated); } .chat-item.active .chat-item-more:hover { background: rgba(79, 182, 194, 0.15); } .chat-item.editing .chat-item-more { display: none; } /* Context menu (shared between chat items and project groups) */ .chat-context-menu { position: fixed; z-index: 10000; background: var(--surface, #fff); border: 1px solid var(--border-color, #ddd); border-radius: var(--radius-md, 8px); box-shadow: 0 4px 16px rgba(0,0,0,0.18); min-width: 180px; max-width: 260px; padding: 4px; overflow: hidden; } .chat-context-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px; color: var(--text-primary); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-context-menu-item:hover { background: var(--surface-elevated, #f0f0f0); } .chat-context-menu-item.danger { color: #ef4444; } .chat-context-menu-item.danger:hover { background: rgba(239, 68, 68, 0.08); } .chat-context-menu-item i { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; color: var(--text-secondary); } .chat-context-menu-item.danger i { color: #ef4444; } .chat-context-menu-item.active { color: var(--primary-color); font-weight: 600; } .chat-context-menu-divider { height: 1px; background: var(--border-color, #ddd); margin: 4px 8px; } /* Submenu arrow */ .chat-context-menu-item .menu-arrow { margin-left: auto; font-size: 11px; color: var(--text-tertiary); } /* Submenu wrapper for flyout */ .chat-context-submenu-wrapper { position: relative; } .chat-context-submenu { position: fixed; z-index: 10001; background: var(--surface, #fff); border: 1px solid var(--border-color, #ddd); border-radius: var(--radius-md, 8px); box-shadow: 0 4px 16px rgba(0,0,0,0.18); min-width: 160px; max-width: 240px; padding: 4px; display: none; } .chat-context-submenu.visible { display: block; } .chat-context-submenu-wrapper.submenu-active > .chat-context-menu-item { background: var(--surface-elevated, #f0f0f0); } /* Create Group Button */ .create-group-btn { background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: var(--radius-sm); transition: all 0.15s ease; } .create-group-btn:hover { color: var(--primary-color); background: rgba(79, 182, 194, 0.1); } /* Chat Group Styles */ .chat-group { margin-top: 0; margin-bottom: 0; } .chat-group-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; font-size: 14px; font-weight: 400; color: var(--text-primary); transition: background 0.15s ease; position: relative; user-select: none; margin-bottom: 1px; } .chat-group-header:hover { background: var(--surface-elevated); } .chat-group-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-group-name-input { flex: 1; font-size: 14px; font-weight: 400; color: var(--text-primary); background: var(--background); border: 1px solid var(--primary-color); border-radius: var(--radius-sm); padding: 2px 6px; outline: none; min-width: 0; } .chat-group-name-input:focus { box-shadow: 0 0 0 2px rgba(79, 182, 194, 0.2); } .chat-group-header.editing .chat-group-more { display: none; } .chat-group-header.editing .chat-group-count { display: none; } .chat-group-rename, .chat-group-delete { background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 10px; padding: 2px 4px; border-radius: var(--radius-sm); opacity: 0; transition: opacity 0.15s ease; flex-shrink: 0; display: none; } .chat-group-header:hover .chat-group-rename, .chat-group-header:hover .chat-group-delete { opacity: 1; display: none; } .chat-group-rename:hover { color: var(--primary-color); } .chat-group-delete:hover { color: #ef4444; } /* Three-dot menu for groups */ .chat-group-more { background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: var(--radius-sm); opacity: 0; transition: opacity 0.15s ease; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .chat-group-header:hover .chat-group-more { opacity: 1; } .chat-group-more:hover { color: var(--text-primary); background: var(--surface-elevated); } /* (chat-group-body styles moved to end of file with project sidebar styles) */ /* Drag and Drop */ .chat-item[draggable="true"] { cursor: grab; } .chat-item.dragging { opacity: 0.4; cursor: grabbing; } .chat-group.drop-target { outline: 2px dashed rgba(79, 182, 194, 0.4); outline-offset: -2px; border-radius: var(--radius-sm); } .chat-group.drag-over { outline-color: var(--primary-color); background: rgba(79, 182, 194, 0.06); } /* Move-to-Group Dropdown Menu */ .group-move-menu { position: fixed; z-index: 10000; background: var(--surface, #fff); border: 1px solid var(--border-color, #ddd); border-radius: var(--radius-md, 8px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); min-width: 160px; max-width: 240px; padding: 4px; overflow: hidden; } .group-move-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--text-primary); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .group-move-menu-item:hover { background: var(--surface-elevated, #f0f0f0); } .group-move-menu-item.active { color: var(--primary-color); font-weight: 600; } .group-move-menu-item i { font-size: 12px; color: var(--primary-color); width: 16px; text-align: center; flex-shrink: 0; } .group-move-menu-item:first-child i { color: var(--text-tertiary); } .group-move-menu-divider { height: 1px; background: var(--border-color, #ddd); margin: 4px 8px; } .empty-chats { text-align: center; color: var(--text-tertiary); padding: 24px; font-size: 14px; } .sidebar-footer { padding: 8px; } /* User Menu Container */ .user-menu-container { position: relative; } .user-menu-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); cursor: pointer; font-size: 14px; transition: background var(--transition-fast); } .user-menu-trigger:hover { background: var(--surface-elevated); } .user-avatar { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-color); color: #fff; font-size: 14px; flex-shrink: 0; } /* ChatGPT-style two-line trigger: name + plan */ .user-trigger-info { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; } .user-trigger-name { font-size: 14px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .user-trigger-plan { font-size: 11px; color: var(--text-secondary); line-height: 1.3; } /* Popup Menu */ .user-menu-popup { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; background: var(--background, #ffffff); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 12px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); padding: 6px; display: none; z-index: 100; } .user-menu-popup.open { display: block; } .user-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 10px 12px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); cursor: pointer; font-size: 14px; transition: background var(--transition-fast); } .user-menu-item:hover { background: var(--surface-elevated); } .user-menu-item i { width: 18px; text-align: center; color: var(--text-secondary); font-size: 15px; } .user-menu-logout:hover:not(:disabled) { color: #f85149; } .user-menu-logout:hover:not(:disabled) i { color: #f85149; } .user-menu-item:disabled { opacity: 0.4; cursor: not-allowed; } .user-menu-item:disabled:hover { background: transparent; } .user-menu-arrow-right { flex: 0 0 auto; margin-left: auto; font-size: 18px; font-weight: 300; color: var(--text-secondary); opacity: 0.5; line-height: 1; } .user-menu-item span:not(.user-menu-arrow-right) { flex: 1; text-align: left; } /* User Menu — Help Submenu Two display modes: a desktop flyout (positioned by JS via fixed coords) and a small-screen drill-down that fills the user-menu-popup. */ .user-menu-submenu { display: none; background: var(--background, #ffffff); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 12px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); padding: 6px; z-index: 200; min-width: 200px; } .user-menu-submenu[data-open="1"] { display: block; } /* Drill-down: cover the popup. */ .user-menu-submenu.is-drilldown { position: absolute; inset: 0; border: none; box-shadow: none; border-radius: var(--radius-lg, 12px); } /* Hide the rest of the menu while drilled in so users see only Help. */ .user-menu-popup.submenu-open > :not(.user-menu-submenu) { visibility: hidden; } /* The Back row only shows on small screens. */ .user-menu-submenu-back { display: none; } .user-menu-submenu.is-drilldown .user-menu-submenu-back { display: flex; font-weight: 500; } .user-menu-divider { height: 1px; background: var(--border-color); margin: 4px 0; } .user-menu-legal { display: flex; justify-content: center; gap: 6px; padding: 6px 0 4px; font-size: 11px; } .user-menu-legal a { color: var(--text-secondary); text-decoration: none; opacity: 0.7; } .user-menu-legal a:hover { opacity: 1; text-decoration: underline; } .user-menu-legal span { color: var(--text-secondary); opacity: 0.5; } /* User Menu — Profile Header */ .user-menu-profile-header { display: flex; align-items: center; gap: 12px; padding: 12px 12px 8px; cursor: pointer; border-radius: var(--radius-md); transition: background var(--transition-fast); } .user-menu-profile-header:hover { background: var(--surface-elevated); } .user-menu-profile-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--text-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .user-menu-profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-menu-profile-info { display: flex; flex-direction: column; min-width: 0; } .user-menu-profile-name { font-size: 14px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-profile-handle { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Avatar initials (shared between sidebar, menu, and profile modal) */ .avatar-initials { font-weight: 600; color: #fff; text-transform: uppercase; line-height: 1; user-select: none; } .user-avatar .avatar-initials { font-size: 13px; } .user-menu-profile-avatar .avatar-initials { font-size: 15px; } .user-avatar img, .user-menu-profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* ============================================================================= EDIT PROFILE MODAL ============================================================================= */ .profile-modal { max-width: 420px; width: 90%; border-radius: var(--radius-xl, 16px); overflow: hidden; } .profile-modal-header { padding: 24px 24px 0; } .profile-modal-header h2 { font-size: 20px; font-weight: 600; margin: 0; color: var(--text-primary); } .profile-modal-body { padding: 20px 24px 8px; } .profile-avatar-section { display: flex; justify-content: center; padding: 12px 0 20px; } .profile-avatar-large { width: 96px; height: 96px; border-radius: 50%; background: var(--text-secondary); display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; cursor: pointer; } .profile-avatar-large .avatar-initials { font-size: 36px; } .profile-avatar-large img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .profile-avatar-camera { position: absolute; bottom: 0; right: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-elevated, #fff); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); font-size: 13px; transition: all var(--transition-fast); } .profile-avatar-camera:hover { background: var(--surface, #f0f0f0); color: var(--text-primary); } .profile-form-group { margin-bottom: 16px; } .profile-field-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; padding-left: 2px; } .profile-input { width: 100%; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); background: var(--background, #fff); color: var(--text-primary); font-size: 15px; font-family: inherit; box-sizing: border-box; transition: border-color var(--transition-fast); } .profile-input:focus { outline: none; border-color: var(--primary-color, #3b82f6); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); } .profile-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 8px 0 0; padding: 0 2px; } .profile-field-error { font-size: 12px; color: #ef4444; margin: 4px 0 0; padding: 0 2px; } .profile-modal-footer { padding: 16px 24px 24px; display: flex; justify-content: flex-end; gap: 10px; } .profile-btn { padding: 10px 24px; border-radius: var(--radius-md, 8px); font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-color); transition: all var(--transition-fast); font-family: inherit; } .profile-btn-cancel { background: var(--background, #fff); color: var(--text-primary); } .profile-btn-cancel:hover { background: var(--surface, #f0f0f0); } .profile-btn-save { background: var(--text-primary, #111); color: var(--background, #fff); border-color: var(--text-primary, #111); } .profile-btn-save:hover { opacity: 0.88; } .profile-btn-save:disabled { opacity: 0.5; cursor: not-allowed; } /* ─── Profile — Danger Zone (Delete Account) ─── */ .profile-danger-zone { margin-top: 24px; padding: 16px; border: 1px solid var(--error-color, #e53e3e); border-radius: var(--radius-md, 8px); background: color-mix(in srgb, var(--error-color, #e53e3e) 5%, transparent); } .profile-danger-header { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--error-color, #e53e3e); margin-bottom: 8px; } .profile-danger-text { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px; } .profile-btn-danger { background: transparent; color: var(--error-color, #e53e3e); border: 1px solid var(--error-color, #e53e3e); padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: var(--radius-md, 8px); cursor: pointer; transition: all var(--transition-fast); font-family: inherit; } .profile-btn-danger:hover { background: var(--error-color, #e53e3e); color: #fff; } /* ─── Delete Account Confirmation Modal ─── */ .delete-account-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10001; animation: fadeIn 0.15s ease; } .delete-account-modal { background: var(--background, #fff); border-radius: var(--radius-lg, 12px); width: 440px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; } .delete-account-header { padding: 24px 24px 0; display: flex; align-items: center; gap: 12px; } .delete-account-icon { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--error-color, #e53e3e) 12%, transparent); display: flex; align-items: center; justify-content: center; color: var(--error-color, #e53e3e); font-size: 18px; flex-shrink: 0; } .delete-account-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary); } .delete-account-body { padding: 16px 24px 0; } .delete-account-body p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 16px; } .delete-account-body ul { margin: 0 0 16px; padding: 0 0 0 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.8; } .delete-account-body ul li { margin: 2px 0; } .delete-account-field { margin-bottom: 14px; } .delete-account-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .delete-account-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); font-size: 14px; font-family: inherit; background: var(--background); color: var(--text-primary); box-sizing: border-box; transition: border-color 0.15s; } .delete-account-field input:focus { outline: none; border-color: var(--error-color, #e53e3e); } .delete-account-error { display: none; padding: 10px 14px; margin: 0 24px 12px; border-radius: var(--radius-sm, 6px); background: color-mix(in srgb, var(--error-color, #e53e3e) 10%, transparent); color: var(--error-color, #e53e3e); font-size: 13px; align-items: center; gap: 8px; } .delete-account-footer { padding: 16px 24px 24px; display: flex; justify-content: flex-end; gap: 10px; } .delete-account-btn-cancel { padding: 10px 20px; border-radius: var(--radius-md, 8px); font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-color); background: var(--background, #fff); color: var(--text-primary); font-family: inherit; transition: all var(--transition-fast); } .delete-account-btn-cancel:hover { background: var(--surface, #f0f0f0); } .delete-account-btn-confirm { padding: 10px 20px; border-radius: var(--radius-md, 8px); font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--error-color, #e53e3e); background: var(--error-color, #e53e3e); color: #fff; font-family: inherit; transition: all var(--transition-fast); } .delete-account-btn-confirm:hover { opacity: 0.9; } .delete-account-btn-confirm:disabled { opacity: 0.5; cursor: not-allowed; } /* ============================================================================= BUG REPORT MODAL ============================================================================= */ .bug-report-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 10001; animation: fadeIn 0.15s ease; } .bug-report-modal { background: var(--background, #fff); border-radius: var(--radius-lg, 12px); width: 480px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); overflow: hidden; } .bug-report-header { padding: 20px 24px 0; display: flex; align-items: center; justify-content: space-between; } .bug-report-header h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary); } .bug-report-close { width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background var(--transition-fast); } .bug-report-close:hover { background: var(--surface); } .bug-report-body { padding: 16px 24px 0; } /* Read-only diagnostics preview shown when a report is opened from an error. Observations only — never any prompt/answer content. */ .bug-report-diag { border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); background: var(--surface); padding: 12px 14px; margin-bottom: 14px; } .bug-report-diag-title { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; } .bug-report-diag-title i { color: var(--primary-color, #10a37f); } .bug-report-diag-grid { display: flex; flex-direction: column; gap: 5px; } .bug-report-diag-row { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.4; } .bug-report-diag-label { flex: 0 0 110px; color: var(--text-secondary); } .bug-report-diag-value { flex: 1 1 auto; color: var(--text-primary); word-break: break-word; } .bug-report-diag-note { margin-top: 10px; font-size: 11.5px; color: var(--text-secondary); opacity: 0.85; } .bug-report-textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 6px); font-size: 14px; font-family: inherit; line-height: 1.6; background: var(--background); color: var(--text-primary); box-sizing: border-box; resize: vertical; min-height: 140px; transition: border-color 0.15s; } .bug-report-textarea::placeholder { color: var(--text-secondary); opacity: 0.6; } .bug-report-textarea:focus { outline: none; border-color: var(--primary-color, #10a37f); } .bug-report-char-count { text-align: right; font-size: 12px; color: var(--text-secondary); margin-top: 6px; opacity: 0.7; } .bug-report-error { display: none; padding: 10px 14px; margin: 12px 24px 0; border-radius: var(--radius-sm, 6px); background: color-mix(in srgb, var(--error-color, #e53e3e) 10%, transparent); color: var(--error-color, #e53e3e); font-size: 13px; align-items: center; gap: 8px; } .bug-report-footer { padding: 16px 24px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bug-report-disclaimer { font-size: 12px; color: var(--text-secondary); line-height: 1.4; flex: 1; } .bug-report-submit { padding: 10px 24px; border-radius: var(--radius-md, 8px); font-size: 14px; font-weight: 600; cursor: pointer; border: none; background: var(--primary-color, #10a37f); color: #fff; font-family: inherit; transition: all var(--transition-fast); flex-shrink: 0; } .bug-report-submit:hover { opacity: 0.9; } .bug-report-submit:disabled { opacity: 0.5; cursor: not-allowed; } .bug-report-success { padding: 48px 24px; text-align: center; } .bug-report-success i { font-size: 40px; color: var(--primary-color, #10a37f); margin-bottom: 16px; } .bug-report-success h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--text-primary); } .bug-report-success p { margin: 0; font-size: 14px; color: var(--text-secondary); } /* ============================================================================= MAIN CHAT CONTAINER ============================================================================= */ .chat-container { flex: 1; display: flex; flex-direction: column; min-width: 0; } .chat-header { height: var(--header-height); padding: 0 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-color); background: var(--surface); flex-shrink: 0; } .sidebar-toggle { width: 36px; height: 36px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .sidebar-toggle:hover { background: var(--surface-elevated); } /* Desktop: the sidebar toggle now lives INSIDE the sidebar (and the collapsed strip), so hide the external hamburger in the chat header and project view. Mobile keeps them (see the max-width: 768px rules below). */ @media (min-width: 769px) { #sidebar-toggle, .project-sidebar-toggle { display: none !important; } } .chat-header h1 { flex: 1; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; min-width: 0; } /* ── Header breadcrumb (project › chat) ─────────────────────────────────── */ .chat-header-breadcrumb { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-width: 0; } .chat-header-breadcrumb.hidden { display: none; } .chat-header-project-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .chat-header-project-link:hover, .chat-header-project-link:focus-visible { background: var(--surface-elevated); color: var(--text-primary); border-color: var(--border-color-strong, var(--border-color)); } .chat-header-project-link i { font-size: 12px; flex-shrink: 0; } .chat-header-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .chat-header-breadcrumb-sep { font-size: 10px; color: var(--text-tertiary); flex-shrink: 0; } /* Folder icon in the breadcrumb → opens the project switcher dropdown */ .chat-header-project-switch { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; background: var(--surface); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .chat-header-project-switch:hover, .chat-header-project-switch:focus-visible { background: var(--surface-elevated); color: var(--text-primary); border-color: var(--border-color-strong, var(--border-color)); } /* Inline rename input for the project name shown in the breadcrumb */ .chat-header-project-name-input { font: inherit; font-size: 13px; font-weight: 500; color: var(--text-primary); background: var(--background); border: 1px solid var(--primary-color); border-radius: 999px; padding: 4px 10px; outline: none; max-width: 220px; min-width: 0; } .chat-header-project-name-input.hidden { display: none; } /* Project switcher dropdown */ .project-switcher-menu { max-height: 320px; overflow-y: auto; } .project-switcher-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-switcher-check { margin-left: auto; color: var(--primary-color) !important; } .project-switcher-empty { color: var(--text-tertiary); cursor: default; } .project-switcher-empty:hover { background: none; } /* Folder icon on the project landing-page header → project switcher */ .project-folder-switch { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: none; color: var(--text-secondary); border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 18px; flex-shrink: 0; transition: background var(--transition-fast), color var(--transition-fast); } .project-folder-switch:hover { background: var(--surface); color: var(--text-primary); } /* ── Editable chat-name ─────────────────────────────────────────────────── */ .chat-header-chat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; padding: 2px 6px; border-radius: 6px; transition: background 0.15s ease; } .chat-header-chat-name:hover { background: var(--surface); } .chat-header-chat-name.hidden { display: none; } .chat-header-chat-name-input { flex: 1; min-width: 0; font: inherit; font-weight: 600; color: var(--text-primary); background: var(--surface); border: 1px solid var(--primary-color); border-radius: 6px; padding: 2px 6px; outline: none; } .chat-header-chat-name-input.hidden { display: none; } .header-actions { display: flex; gap: 8px; } .header-action-btn { width: 36px; height: 36px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .header-action-btn:hover { color: var(--primary-color); border-color: var(--primary-color); } .header-action-btn.saved { color: var(--primary-color); border-color: var(--primary-color); background: rgba(79, 182, 194, 0.1); } /* ============================================================================= CHAT MESSAGES ============================================================================= */ .chat-messages { flex: 1; overflow-y: auto; padding: 24px 16px; display: flex; flex-direction: column; gap: 8px; } .welcome-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 24px; } .welcome-screen h2 { font-size: 28px; font-weight: 500; color: var(--text-primary); } /* ============================================================================= WELCOME MODE — Centers greeting + input vertically (ChatGPT/Gemini style) ============================================================================= */ .chat-container.welcome-mode .chat-messages { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; overflow: hidden; } .chat-container.welcome-mode .welcome-screen { flex: none; padding: 0 24px 20px; gap: 12px; } .chat-container.welcome-mode .chat-input-container { flex: 1; padding-top: 0; display: flex; flex-direction: column; align-items: center; } .chat-container.welcome-mode .chat-input-box { width: 100%; } /* Message Styles */ .message-wrapper { display: flex; flex-direction: column; max-width: 800px; width: 100%; margin: 0 auto; } .message-wrapper-user { align-items: flex-end; } .message-wrapper-assistant { align-items: flex-start; gap: 6px; } .message { padding: 12px 16px; border-radius: var(--radius-lg); font-size: 16px; line-height: 1.7; width: 100%; } .message-user { background: var(--message-user-bg); color: var(--text-primary); border-bottom-right-radius: var(--radius-sm); width: auto; max-width: 85%; } .message-assistant { background: transparent; color: var(--text-primary); padding: 8px 0; } /* Thinking Panel (collapsible) */ .thinking-panel { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface); margin-bottom: 10px; overflow: hidden; width: 100%; } .thinking-summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; font-size: 12px; color: var(--text-secondary); list-style: none; } .thinking-summary::-webkit-details-marker { display: none; } .thinking-icon { color: var(--primary-color); } .thinking-label { font-weight: 600; color: var(--text-primary); } .thinking-status { margin-left: auto; font-size: 11px; color: var(--text-tertiary); } .thinking-caret { margin-left: 6px; font-size: 11px; color: var(--text-tertiary); transition: transform var(--transition-fast); } .thinking-panel[open] .thinking-caret { transform: rotate(180deg); } .thinking-body { border-top: 1px solid var(--border-color); background: var(--surface-elevated); padding: 8px 10px; } .thinking-content { margin: 0; white-space: pre-wrap; font-size: 12px; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* Pulse animation while thinking is actively streaming */ .thinking-panel.thinking-pulse .thinking-icon { animation: thinking-glow 1.2s ease-in-out infinite; } @keyframes thinking-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .message-actions { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity var(--transition-fast); } .message-actions-user { justify-content: flex-end; } .message-wrapper:hover .message-actions { opacity: 1; } .message-action-btn { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all var(--transition-fast); } .message-action-btn:hover { background: var(--surface); color: var(--text-primary); } .message-model-label { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-tertiary); padding: 0 6px; height: 28px; white-space: nowrap; user-select: none; margin-left: auto; } /* Version Navigation */ .message-version-nav { display: inline-flex; align-items: center; gap: 2px; height: 28px; user-select: none; } .version-nav-btn { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all var(--transition-fast); padding: 0; } .version-nav-btn:hover:not(:disabled) { background: var(--surface); color: var(--text-primary); } .version-nav-btn:disabled { opacity: 0.3; cursor: default; } .version-nav-label { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; min-width: 24px; text-align: center; } /* Message Edit Mode */ .message-wrapper.editing .message-actions { display: none; } .message-wrapper.editing .message { opacity: 0.6; border: 1px dashed var(--primary-color, #4fb6c2); } .message-edit-container { display: flex; flex-direction: column; gap: 8px; } .message-edit-textarea { display: block; width: 100%; min-width: 250px; min-height: 24px; padding: 4px 8px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font-family: inherit; font-size: 14px; line-height: 1.6; resize: none; outline: none; overflow: hidden; box-sizing: border-box; } .message-edit-textarea:focus { outline: none; } .message-edit-buttons { display: flex; gap: 8px; justify-content: flex-end; } .message-edit-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; font-size: 13px; cursor: pointer; transition: all var(--transition-fast); } .message-edit-cancel { background: rgba(0, 0, 0, 0.05); color: var(--text-secondary); } [data-theme="dark"] .message-edit-cancel { background: rgba(255, 255, 255, 0.1); } .message-edit-cancel:hover { background: rgba(0, 0, 0, 0.1); color: var(--text-primary); } [data-theme="dark"] .message-edit-cancel:hover { background: rgba(255, 255, 255, 0.15); } .message-edit-enhance { background: transparent; color: var(--text-tertiary); } .message-edit-enhance:hover { background: rgba(168, 85, 247, 0.12); color: #a855f7; } .message-edit-enhance.enhancing { color: #a855f7; animation: enhancePulse 1.2s ease-in-out infinite; pointer-events: none; } .message-edit-save { background: var(--primary-color); color: white; } .message-edit-save:hover { background: var(--primary-hover); } /* Generation stopped indicator */ .generation-stopped { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-color); font-size: 12px; color: var(--text-tertiary); } /* Message Content */ .message-content { word-wrap: break-word; line-height: 1.62; /* Reading font for answers (Inter), Arabic fallback for RTL, then system. */ font-family: 'Inter', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'kern', 'liga', 'calt'; } /* RTL language support */ .message-content[dir="rtl"] { text-align: right; direction: rtl; } .message-content[dir="rtl"] ul, .message-content[dir="rtl"] ol { padding-right: 1.5em; padding-left: 0; } .message-content[dir="rtl"] blockquote { border-right: 3px solid var(--border-color); border-left: none; padding-right: 12px; padding-left: 0; } .message-content[dir="rtl"] code { direction: ltr; unicode-bidi: embed; } .message-content p { margin-bottom: 12px; /* Cap the line length for a sharper reading measure (tables/code stay wide). */ max-width: 70ch; text-wrap: pretty; } .message-content p:last-child { margin-bottom: 0; } /* Headings in message content */ .message-content h1, .message-content h2, .message-content h3, .message-content h4, .message-content h5, .message-content h6 { margin-top: 20px; margin-bottom: 8px; font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; color: var(--text-primary); /* Brand display font for heading hierarchy contrast against Inter body. */ font-family: 'Plus Jakarta Sans', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 70ch; text-wrap: balance; } .message-content h1:first-child, .message-content h2:first-child, .message-content h3:first-child, .message-content h4:first-child, .message-content h5:first-child, .message-content h6:first-child { margin-top: 0; } .message-content h1 { font-size: 1.5em; } .message-content h2 { font-size: 1.35em; } .message-content h3 { font-size: 1.2em; } .message-content h4 { font-size: 1.1em; } .message-content h5 { font-size: 1em; } .message-content h6 { font-size: 0.95em; color: var(--text-secondary); } /* Bold lead-ins anchor to primary text color + true bold weight. */ .message-content strong, .message-content b { font-weight: 650; color: var(--text-primary); } /* Same reading measure for lists (block-level containers stay full width). */ .message-content ul, .message-content ol { max-width: 70ch; } /* Links in message content */ .message-content a { color: var(--primary-color); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .message-content a:hover { border-bottom-color: var(--primary-color); } .message-content a::after { content: '\f08e'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.7em; margin-left: 3px; opacity: 0.6; vertical-align: super; } /* Tables in message content */ .message-content table { width: auto; max-width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); } .message-content thead { background: var(--surface-elevated); } .message-content th, .message-content td { border: 1px solid var(--border-color); padding: 10px 16px; text-align: left; } .message-content th { font-weight: 600; background: var(--surface-elevated); color: var(--text-primary); white-space: nowrap; } .message-content tbody tr:nth-child(odd) { background: var(--surface); } .message-content tbody tr:nth-child(even) { background: var(--surface-hover); } .message-content tbody tr:hover { background: rgba(79, 182, 194, 0.1); } .message-content tbody td { white-space: normal; word-wrap: break-word; color: var(--text-secondary); } .code-block-wrapper { position: relative; margin: 12px 0; border-radius: var(--radius-md); overflow: hidden; } .code-lang-label { position: absolute; top: 0; /* Sit to the LEFT of the copy button so the two never overlap. */ right: 44px; background: rgba(0, 0, 0, 0.5); color: white; padding: 2px 8px; font-size: 11px; border-radius: 0 0 4px 4px; pointer-events: none; } /* Hover-revealed copy button on code blocks. */ .code-copy-btn { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: rgba(30, 41, 59, 0.85); color: #e2e8f0; border: 1px solid rgba(226, 232, 240, 0.18); border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; opacity: 0; transform: translateY(-2px); transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease; z-index: 2; } .code-block-wrapper:hover .code-copy-btn, .code-copy-btn:focus-visible { opacity: 1; transform: translateY(0); } .code-copy-btn:hover { background: rgba(30, 41, 59, 1); color: #ffffff; border-color: rgba(226, 232, 240, 0.35); } .code-copy-btn.copied { opacity: 1; background: rgba(34, 197, 94, 0.9); border-color: rgba(34, 197, 94, 1); color: #ffffff; } .code-copy-btn.failed { opacity: 1; background: rgba(239, 68, 68, 0.9); border-color: rgba(239, 68, 68, 1); color: #ffffff; } /* Touch devices have no hover — keep the button visible at low opacity. */ @media (hover: none) { .code-copy-btn { opacity: 0.6; transform: none; } } .code-block { background: #1e293b; padding: 16px; overflow-x: auto; font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Menlo', monospace; font-size: 14px; line-height: 1.55; color: #e2e8f0; } .inline-code { background: rgba(181, 101, 13, 0.08); padding: 1px 6px; border-radius: 4px; border: 1px solid rgba(181, 101, 13, 0.18); font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Menlo', monospace; font-size: 0.88em; color: #B5650D; } @media (prefers-color-scheme: dark) { .inline-code { background: rgba(229, 192, 123, 0.10); border-color: rgba(229, 192, 123, 0.22); color: #E5C07B; } } [data-theme="dark"] .inline-code { background: rgba(229, 192, 123, 0.10); border-color: rgba(229, 192, 123, 0.22); color: #E5C07B; } /* Math blocks (KaTeX) */ .math-block { overflow-x: auto; padding: 16px 12px; margin: 12px 0; background: var(--surface); border-radius: var(--radius-md); text-align: center; } .math-inline { padding: 0 2px; } .math-error { font-family: 'Monaco', 'Menlo', monospace; font-size: 0.9em; color: var(--text-secondary); } /* Mermaid Diagrams */ .mermaid-wrapper { margin: 16px 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border-color); position: relative; } /* Maximize button - hidden by default, shows on hover */ .mermaid-maximize-btn { position: absolute; top: 44px; right: 8px; width: 32px; height: 32px; border: none; border-radius: var(--radius-md); background: var(--surface-elevated); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; opacity: 0; transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease; z-index: 10; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .mermaid-wrapper:hover .mermaid-maximize-btn { opacity: 1; } .mermaid-maximize-btn:hover { background: var(--primary-color); color: white; } /* Fullscreen modal */ .mermaid-fullscreen-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 10000; display: flex; flex-direction: column; animation: mermaidModalFadeIn 0.2s ease; } @keyframes mermaidModalFadeIn { from { opacity: 0; } to { opacity: 1; } } .mermaid-fullscreen-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mermaid-fullscreen-title { display: flex; align-items: center; gap: 10px; color: white; font-size: 14px; font-weight: 500; } .mermaid-fullscreen-title i { color: var(--primary-color); } .mermaid-fullscreen-close { width: 36px; height: 36px; border: none; border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.1); color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background 0.2s ease; } .mermaid-fullscreen-close:hover { background: rgba(255, 255, 255, 0.2); } .mermaid-fullscreen-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; } .mermaid-fullscreen-content svg { max-width: 95vw; max-height: 85vh; width: auto; height: auto; background: white; border-radius: var(--radius-lg); padding: 20px; } .mermaid-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-elevated); border-bottom: 1px solid var(--border-color); font-size: 12px; font-weight: 500; color: var(--text-secondary); } .mermaid-label i { color: var(--primary-color); } .mermaid-container { padding: 16px; min-height: 100px; max-height: 75vh; display: flex; justify-content: center; align-items: center; overflow: auto; } .mermaid-container svg { min-width: 300px; min-height: 150px; max-width: 100%; max-height: 70vh; height: auto; width: auto; } /* Mermaid internal element scaling */ .mermaid-container .flowchart, .mermaid-container .sequenceDiagram, .mermaid-container .stateDiagram, .mermaid-container .er, .mermaid-container .journey, .mermaid-container .gantt, .mermaid-container .pie, .mermaid-container .mindmap { max-width: 100%; } .mermaid-loading { display: flex; align-items: center; gap: 8px; color: var(--text-tertiary); font-size: 13px; } .mermaid-loading i { color: var(--primary-color); } .mermaid-error { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; color: #e74c3c; text-align: center; } .mermaid-error i:first-child { font-size: 24px; margin-bottom: 4px; } .mermaid-error small { font-size: 11px; color: var(--text-tertiary); max-width: 300px; word-break: break-word; } .mermaid-fix-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 5px 12px; background: var(--primary-color); color: white; border: none; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; } .mermaid-fix-btn:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-1px); } .mermaid-fix-btn:active:not(:disabled) { background: var(--primary-active); transform: translateY(0); } .mermaid-fix-btn:disabled { opacity: 0.7; cursor: not-allowed; } .mermaid-fix-btn i { font-size: 10px; color: inherit; } .mermaid-source { border-top: 1px solid var(--border-color); } .mermaid-source summary { padding: 8px 12px; font-size: 12px; color: var(--text-tertiary); cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; } .mermaid-source summary:hover { background: var(--surface-elevated); color: var(--text-secondary); } .mermaid-source summary i { font-size: 11px; } .mermaid-code { margin: 0; padding: 12px; background: #1e293b; overflow-x: auto; font-family: 'Monaco', 'Menlo', monospace; font-size: 12px; line-height: 1.5; color: #e2e8f0; } .mermaid-code code { color: inherit; } .mermaid-streaming .mermaid-container { opacity: 0.7; } .mermaid-streaming .mermaid-loading::after { content: ' (streaming...)'; } /* Blockquotes */ .message-content blockquote { border-left: 4px solid var(--primary-color); margin: 12px 0; padding: 8px 16px; background: var(--surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--text-secondary); } .message-content blockquote p { margin: 0; } .message-list { margin: 8px 0; padding-left: 20px; } ul.message-list { list-style-type: disc; } ol.message-list { list-style-type: decimal; } .message-list li { margin-bottom: 6px; } /* Numbered items - use data-num attribute to preserve original numbering across gaps */ .numbered-item { position: relative; padding-left: 28px; margin: 8px 0; } .numbered-item::before { content: attr(data-num) "."; position: absolute; left: 0; font-weight: 600; color: var(--text-primary); } /* MCP Tool Notification */ .mcp-tool-notification { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 8px 0; font-size: 13px; color: var(--text-secondary); background-color: var(--surface-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); border-left: 3px solid var(--primary-color); animation: mcpSlideIn 0.2s ease-out; width: 100%; } @keyframes mcpSlideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } .mcp-tool-icon { color: var(--primary-color); font-size: 16px; } .mcp-tool-text { flex: 1; font-family: 'SF Mono', 'Consolas', 'Monaco', monospace; font-size: 12px; } .mcp-tool-spinner { color: var(--primary-color); font-size: 14px; } .mcp-tool-notification.mcp-tool-success { border-left-color: #10b981; } .mcp-tool-notification.mcp-tool-success .mcp-tool-icon, .mcp-tool-notification.mcp-tool-success .mcp-tool-spinner { color: #10b981; } .mcp-tool-notification.mcp-tool-error { border-left-color: #ef4444; } .mcp-tool-notification.mcp-tool-error .mcp-tool-icon, .mcp-tool-notification.mcp-tool-error .mcp-tool-spinner { color: #ef4444; } /* Typing Indicator */ .typing-indicator { display: flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--text-secondary); font-size: 15px; max-width: 800px; width: 100%; margin: 0 auto; } .typing-text { opacity: 0.8; } .typing-dots { display: flex; gap: 4px; } .typing-dot { width: 7px; height: 7px; background: var(--primary-color); border-radius: 50%; animation: typing-bounce 1.4s infinite; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-8px); opacity: 1; } } /* ============================================================================= CHAT INPUT ============================================================================= */ .chat-input-container { padding: 0 16px 16px; background: transparent; max-width: 832px; margin: 0 auto; width: 100%; } /* Edit mode banner — shown above the input box when editing a previous message */ .edit-mode-banner { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; margin-bottom: 8px; background: var(--primary-color-10, rgba(79, 182, 194, 0.1)); border: 1px solid var(--primary-color, #4fb6c2); border-radius: var(--radius-md, 8px); font-size: 0.82rem; color: var(--primary-color, #4fb6c2); } .edit-mode-banner.hidden { display: none; } .edit-mode-label { display: flex; align-items: center; gap: 6px; font-weight: 500; } .edit-mode-label i { font-size: 0.78rem; } .edit-mode-cancel { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm, 4px); font-size: 0.85rem; transition: background var(--transition-fast), color var(--transition-fast); } .edit-mode-cancel:hover { background: var(--surface-hover); color: var(--text-primary); } .chat-input-box { background: var(--surface-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .chat-input-box.edit-mode { border-color: var(--primary-color, #4fb6c2); box-shadow: 0 0 0 3px rgba(79, 182, 194, 0.15); } /* Retry mode — input bar repurposed for regeneration */ .retry-mode-banner { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; margin-bottom: 8px; background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.4); border-radius: var(--radius-md, 8px); font-size: 0.82rem; color: rgb(99, 102, 241); } .retry-mode-banner.hidden { display: none; } .retry-mode-label { display: flex; align-items: center; gap: 6px; font-weight: 500; } .retry-mode-label i { font-size: 0.78rem; } .retry-mode-cancel { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm, 4px); font-size: 0.85rem; transition: background var(--transition-fast), color var(--transition-fast); } .retry-mode-cancel:hover { background: var(--surface-hover); color: var(--text-primary); } .chat-input-box.retry-mode { border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } .chat-input-box.retry-mode .send-btn { background: rgb(99, 102, 241); } .chat-input-box.retry-mode .send-btn:hover { background: rgb(79, 82, 221); } /* Highlight the message being retried */ .message-wrapper.retrying { outline: 2px solid rgba(99, 102, 241, 0.3); outline-offset: 4px; border-radius: var(--radius-md, 8px); } .chat-input-box:focus-within { border-color: var(--primary-color); box-shadow: 0 2px 16px rgba(79, 182, 194, 0.12); } /* ===== INLINE INPUT ROW (textarea + attach button) ===== */ .chat-input-row { display: flex; align-items: center; gap: 0; } .attach-btn { display: flex; align-items: center; justify-content: center; width: 34px; min-width: 34px; height: 34px; margin: 2px 0 2px 6px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: 50%; font-size: 16px; transition: all 0.15s ease; flex-shrink: 0; } .attach-btn:hover { background: var(--surface-hover, var(--surface)); color: var(--primary-color); } .attach-btn.has-attachments { color: var(--primary-color); background: rgba(79, 182, 194, 0.1); } /* Prompt Enhance (Magic Wand) Button */ .enhance-btn { display: flex; align-items: center; justify-content: center; width: 34px; min-width: 34px; height: 34px; margin: 2px 0 2px 0; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: 50%; font-size: 15px; transition: all 0.15s ease; flex-shrink: 0; position: relative; } .enhance-btn:hover { background: var(--surface-hover, var(--surface)); color: #a855f7; } /* Enhance History Navigation Buttons */ .enhance-nav-btn { display: flex; align-items: center; justify-content: center; width: 24px; min-width: 24px; height: 24px; margin: 5px 0; border: none; background: rgba(168, 85, 247, 0.10); color: #a855f7; cursor: pointer; border-radius: 50%; font-size: 11px; transition: all 0.15s ease; flex-shrink: 0; } .enhance-nav-btn:hover { background: rgba(168, 85, 247, 0.22); color: #9333ea; } .enhance-nav-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; } /* Edit-mode enhance nav */ .message-edit-nav-btn { display: flex; align-items: center; justify-content: center; width: 24px; min-width: 24px; height: 24px; border: none; background: rgba(168, 85, 247, 0.10); color: #a855f7; cursor: pointer; border-radius: 50%; font-size: 10px; transition: all 0.15s ease; } .message-edit-nav-btn:hover { background: rgba(168, 85, 247, 0.22); color: #9333ea; } .message-edit-nav-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; } .enhance-btn.enhancing { color: #a855f7; animation: enhancePulse 1.2s ease-in-out infinite; pointer-events: none; } @keyframes enhancePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } } #chat-input { width: 100%; padding: 14px 16px 14px 8px; border: none; background: transparent; font-size: 16px; resize: none; max-height: 200px; color: var(--text-primary); font-family: inherit; } #chat-input:focus { outline: none; } #chat-input::placeholder { color: var(--text-tertiary); } /* ===== CLEAN ACTION BAR ===== */ .chat-action-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; gap: 8px; border-top: 1px solid var(--border-color); position: relative; } .action-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Hidden on desktop, shown on mobile via media query */ .action-expand-btn { display: none !important; } /* On desktop, popup wrapper is transparent — items flow inline */ .action-expand-popup { display: contents; } /* Backdrop hidden on desktop */ .action-expand-backdrop { display: none; } .action-item { position: relative; } /* Action Pills - Uniform icon buttons */ .action-pill { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--border-color); background: transparent; border-radius: 20px; color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; position: relative; } .action-pill:hover { border-color: var(--primary-color); color: var(--primary-color); } .action-pill i { font-size: 13px; } .action-pill.icon-only { padding: 7px 9px; min-width: 34px; height: 34px; } .action-pill.icon-only .pill-label, .action-pill.icon-only .pill-chevron { display: none; } .action-pill.icon-only i { font-size: 14px; } .pill-label { font-weight: 500; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .pill-badge { display: none; } .pill-badge.has-count { display: none; } /* Active state — solid fill for buttons with active selections */ .action-pill.active { background: var(--primary-color); color: white; border-color: var(--primary-color); } .action-pill.active:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .pill-chevron { font-size: 10px; opacity: 0.6; margin-left: 2px; } /* RAG Pill States — uses shared .action-pill.active */ /* BYO lock badge — overlays bottom-right of any action-pill when BYO routing is active */ .action-pill { position: relative; } .byo-lock-badge { position: absolute; bottom: -2px; right: -2px; font-size: 8px !important; padding: 2px; background: var(--bg-color, #fff); border-radius: 50%; color: var(--primary-color); line-height: 1; pointer-events: none; } .byo-lock-badge.hidden { display: none; } /* Model Pill */ .model-pill { background: transparent; } .model-pill:hover { border-color: var(--primary-color); color: var(--primary-color); } .perf-pill:hover { border-color: var(--primary-color); color: var(--primary-color); } /* Send Button */ .send-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: var(--primary-color); border-radius: 50%; color: white; cursor: pointer; transition: all 0.15s ease; flex-shrink: 0; } .send-btn:hover { background: var(--primary-hover); transform: scale(1.05); } .send-btn i { font-size: 14px; } .send-btn.generating { background: #ef4444; } .send-btn.generating:hover { background: #dc2626; } /* ===== ACTION DROPDOWNS ===== */ .action-dropdown { position: absolute; bottom: calc(100% + 8px); top: auto; left: 0; min-width: 240px; max-height: 320px; background: var(--background); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 100; overflow: hidden; } .action-dropdown.open-down { top: calc(100% + 8px); bottom: auto; } .action-dropdown.open-up { top: auto; bottom: calc(100% + 8px); } .dropdown-body { padding: 12px; } .dropdown-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--border-color); } .dropdown-search > i { color: var(--text-tertiary); font-size: 12px; } .dropdown-search input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 13px; color: var(--text-primary); outline: none; } .dropdown-search input::placeholder { color: var(--text-tertiary); } .dropdown-search-actions { display: flex; gap: 2px; } .search-action { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; background: transparent; color: var(--text-tertiary); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s ease; } .search-action:hover { background: var(--surface-hover); color: var(--primary-color); } .search-action i { font-size: 11px; } .dropdown-list { max-height: 250px; overflow-y: auto; padding: 6px; } .dropdown-loading { padding: 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; } .dropdown-footer { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--border-color); } .footer-action { font-size: 11px; font-weight: 500; color: var(--primary-color); background: none; border: none; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-sm); } .footer-action:hover { background: rgba(79, 182, 194, 0.1); } .dropdown-empty { padding: 16px; text-align: center; color: var(--text-tertiary); font-size: 13px; } /* Specific Dropdown Styles */ .model-dropdown { min-width: 260px; } .rag-dropdown { width: 280px; max-height: 450px; display: flex; flex-direction: column; } .rag-dropdown .dropdown-search { flex-shrink: 0; } .rag-dropdown .rag-collection-list { flex: 1; min-height: 0; max-height: none; } .tools-dropdown { min-width: 280px; } .perf-dropdown { width: 320px; min-width: 320px; max-height: min(560px, calc(100vh - 160px)); overflow-y: auto; overflow-x: hidden; border-radius: 14px; box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 4px 12px -2px rgba(0, 0, 0, 0.08); /* Prevent dropdown from sticking under the iOS notch / address bar */ scrollbar-width: thin; } .perf-dropdown::-webkit-scrollbar { width: 6px; } .perf-dropdown::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } [data-theme="dark"] .perf-dropdown { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.3); } .perf-body { display: flex; flex-direction: column; gap: 14px; padding: 14px; } /* ───── Header ───── */ .perf-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); } .perf-header-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.01em; } .perf-header-title i { color: var(--primary-color); font-size: 13px; } .perf-auto-tune-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .perf-auto-tune-btn:hover { border-color: #a855f7; background: rgba(168, 85, 247, 0.1); color: #a855f7; } .perf-auto-tune-btn.active { border-color: #a855f7; background: rgba(168, 85, 247, 0.15); color: #a855f7; } .perf-auto-tune-btn i { font-size: 11px; } /* Auto-tune explanation banner */ .perf-explanation { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; line-height: 1.45; color: var(--text-secondary); padding: 8px 10px; margin-top: -4px; background: rgba(168, 85, 247, 0.06); border: 1px solid rgba(168, 85, 247, 0.18); border-radius: 8px; white-space: normal; word-break: break-word; } .perf-explanation i { font-size: 11px; color: #a855f7; margin-top: 2px; flex-shrink: 0; } /* ───── Sections ───── */ .perf-section { display: flex; flex-direction: column; gap: 10px; } .perf-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-tertiary); margin: 0 0 -2px 0; } /* ───── Rows ───── */ .perf-row { display: flex; flex-direction: column; gap: 6px; } .perf-row label { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 500; color: var(--text-primary); margin: 0; cursor: default; } .perf-label { display: inline-flex; align-items: center; gap: 6px; } .perf-help { display: inline-flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 11px; cursor: help; position: relative; transition: color var(--transition-fast); } .perf-help:hover { color: var(--primary-color); } .perf-help i { font-size: 11px; } .perf-help::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--background); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 8px; padding: 7px 10px; font-size: 11px; font-weight: 400; line-height: 1.4; width: max-content; max-width: 220px; white-space: normal; text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); box-shadow: var(--shadow-lg); z-index: 200; } .perf-help::before { content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--border-color); opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); z-index: 201; } .perf-help:hover::after, .perf-help:hover::before { opacity: 1; } /* Range slider */ .perf-row input[type="range"] { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: var(--border-color); border-radius: 2px; outline: none; cursor: pointer; margin: 4px 0 2px; } .perf-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--primary-color); border: 2px solid var(--background); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); cursor: pointer; transition: transform 0.1s ease; } .perf-row input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); } .perf-row input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--primary-color); border: 2px solid var(--background); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); cursor: pointer; } /* Number inputs */ .perf-row input[type="number"] { width: 100%; padding: 7px 10px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface); color: var(--text-primary); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; transition: border-color var(--transition-fast), background var(--transition-fast); } .perf-row input[type="number"]:focus { border-color: var(--primary-color); outline: none; background: var(--background); } .perf-row .value-display { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px; color: var(--primary-color); min-width: 32px; padding: 1px 8px; border-radius: 6px; background: rgba(79, 182, 194, 0.08); text-align: center; } [data-theme="dark"] .perf-row .value-display { background: rgba(79, 182, 194, 0.14); } /* Footer */ .perf-footer { padding: 8px 0 0; border-top: 1px solid var(--border-color); justify-content: center; } .perf-footer .footer-action { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 6px 14px; } .perf-footer .footer-action i { font-size: 11px; } /* Presets — segmented chip group */ .perf-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .perf-preset-chip { padding: 7px 4px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); text-align: center; white-space: nowrap; letter-spacing: 0.1px; } .perf-preset-chip:hover { border-color: var(--primary-color); color: var(--primary-color); background: rgba(79, 182, 194, 0.06); } .perf-preset-chip.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; box-shadow: 0 1px 4px rgba(79, 182, 194, 0.4); } /* Temperature disabled state for reasoning models */ .perf-row-disabled { opacity: 0.55; } .perf-row-disabled input[type="range"] { pointer-events: none; filter: grayscale(0.6); } .perf-row-disabled input[type="number"] { pointer-events: none; filter: grayscale(0.6); color: var(--text-muted); } .perf-disabled-tag { display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); background: rgba(79, 182, 194, 0.1); border: 1px solid rgba(79, 182, 194, 0.25); border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: middle; line-height: 15px; } /* Model Items */ .model-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; transition: background var(--transition-fast); } .model-item:hover { background: var(--surface); } .model-item.active { background: rgba(79, 182, 194, 0.1); } .model-item-radio { width: 16px; height: 16px; border: 2px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .model-item.active .model-item-radio { border-color: var(--primary-color); background: var(--primary-color); } .model-item.active .model-item-radio::after { content: ''; width: 6px; height: 6px; background: white; border-radius: 50%; } .model-item-info { flex: 1; } .model-item-name { font-size: 13px; font-weight: 500; } .model-item-provider { font-size: 11px; color: var(--text-tertiary); } /* "Other models" footer row in the composer model picker — nudges users to Settings → Chat Models to customize which models appear here. Reuses the .model-item layout (flex/gap/padding) but reads as a navigation link. */ .model-picker-more { border-top: 1px solid var(--border-color); } .model-picker-more .model-item-name { color: var(--text-secondary); } .model-picker-more-icon { width: 16px; font-size: 13px; color: var(--text-tertiary); text-align: center; } .model-picker-more-chevron { font-size: 11px; color: var(--text-tertiary); } .model-picker-more:hover .model-picker-more-icon, .model-picker-more:hover .model-picker-more-chevron { color: var(--primary-color); } /* MCP Tool Items */ .mcp-server-group { padding: 8px 12px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); } .mcp-tool-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer; transition: background var(--transition-fast); /* Prevent text selection on rapid taps */ user-select: none; -webkit-user-select: none; } .mcp-tool-item.hidden { display: none; } .mcp-tool-item:hover { background: var(--surface); } /* Touch-friendly active state for mobile */ .mcp-tool-item:active { background: var(--surface); } .mcp-tool-checkbox { width: 16px; height: 16px; border: 2px solid var(--border-color); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-top: 2px; transition: all var(--transition-fast); } .mcp-tool-item.active .mcp-tool-checkbox { background: var(--primary-color); border-color: var(--primary-color); } .mcp-tool-checkbox svg { width: 10px; height: 10px; color: white; opacity: 0; } .mcp-tool-item.active .mcp-tool-checkbox svg { opacity: 1; } .mcp-tool-info { flex: 1; } .mcp-tool-name { font-size: 12px; font-weight: 600; } .mcp-tool-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; } /* ============================================================================= MODALS ============================================================================= */ .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .modal-content { background: var(--surface-elevated); border-radius: var(--radius-xl); width: 90%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); } /* Settings Modal - larger with sidebar */ .modal-content.settings-modal { max-width: 800px; width: 95%; height: 80vh; max-height: 700px; padding: 0; overflow: hidden; } /* Mobile-only elements - hidden on desktop */ .settings-mobile-back { display: none !important; } .settings-mobile-save { display: none !important; } .settings-layout { display: flex; height: 100%; } .settings-sidebar { width: 220px; background: var(--background); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; } .settings-sidebar-header { padding: 16px; display: flex; align-items: center; } .settings-back-btn { width: 36px; height: 36px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all var(--transition-fast); } .settings-back-btn:hover { background: var(--surface); color: var(--text-primary); } .settings-nav { flex: 1; padding: 0 12px; overflow-y: auto; } .settings-nav-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: none; background: transparent; color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; border-radius: var(--radius-md); transition: all var(--transition-fast); text-align: left; margin-bottom: 4px; } .settings-nav-item i { width: 18px; text-align: center; font-size: 14px; } .settings-nav-item .nav-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } .settings-nav-item:hover { background: var(--surface); color: var(--text-primary); } .settings-nav-item.active { background: var(--surface); color: var(--text-primary); } .settings-nav-item:focus { outline: none; } .settings-nav-item:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; } /* Settings nav section header (e.g. "Advanced") — small uppercase divider between groups of nav items. */ .settings-nav-section { margin: 16px 16px 6px; font-size: 11px; font-weight: 600; color: var(--text-tertiary, var(--text-secondary)); text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.75; } .settings-sidebar-footer { padding: 16px; border-top: 1px solid var(--border-color); } .settings-save-btn { width: 100%; padding: 10px 16px; background: var(--primary-color); color: white; border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--transition-fast); } .settings-save-btn:hover { background: var(--primary-hover); } .settings-content { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .settings-content-header { padding: 20px 24px; border-bottom: 1px solid var(--border-color); } .settings-content-header h2 { font-size: 18px; font-weight: 600; margin: 0; } .settings-content-body { flex: 1; padding: 24px; overflow-y: auto; overflow-x: hidden; max-width: 100%; box-sizing: border-box; } .modal-small { max-width: 400px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-color); } .modal-header h2 { font-size: 18px; font-weight: 600; } .modal-close { width: 32px; height: 32px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: var(--surface); } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .modal-footer { padding: 16px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 8px; } /* Settings Tabs */ .settings-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 12px; flex-wrap: wrap; } .settings-tab { padding: 8px 16px; border: none; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 500; cursor: pointer; border-radius: var(--radius-md); transition: all var(--transition-fast); } .settings-tab:hover { background: var(--surface); } .settings-tab.active { background: var(--primary-color); color: white; } .settings-panel { display: none; } .settings-panel.active { display: block; max-width: 100%; overflow-x: hidden; word-wrap: break-word; } /* Form Elements */ .form-group { margin-bottom: 16px; max-width: 100%; } .form-group label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--text-primary); } .form-group input:not([type="range"]), .form-group select { width: 100%; /* Extra right padding clears the custom chevron so long option labels truncate with an ellipsis instead of sliding under the arrow. */ padding: 10px 36px 10px 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 14px; background-color: var(--surface); color: var(--text-primary); transition: border-color var(--transition-fast); box-sizing: border-box; max-width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .form-group input:not([type="range"]):focus, .form-group select:focus { outline: none; border-color: var(--primary-color); } /* System prompt textarea */ .system-prompt-textarea { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 13px; font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace; line-height: 1.5; background: var(--surface); color: var(--text-primary); resize: vertical; min-height: 200px; transition: border-color var(--transition-fast); box-sizing: border-box; max-width: 100%; } .system-prompt-textarea:focus { outline: none; border-color: var(--primary-color); } /* Message prefix textarea */ .message-prefix-textarea { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 13px; font-family: inherit; line-height: 1.5; background: var(--surface); color: var(--text-primary); resize: vertical; min-height: 80px; transition: border-color var(--transition-fast); box-sizing: border-box; max-width: 100%; } .message-prefix-textarea:focus { outline: none; border-color: var(--primary-color); } .form-hint { font-size: 12px; color: var(--text-secondary); margin-top: 6px; line-height: 1.4; } .form-hint-inline { font-size: 11px; color: var(--text-secondary); font-weight: normal; } /* Input with action button (refresh) */ .input-with-action { display: flex; gap: 8px; align-items: center; } .input-with-action input, .input-with-action select { flex: 1; min-width: 0; } /* Masked secret inputs (API keys, tokens, CF Access secrets). These are rendered as type="text" — NOT type="password" — so browsers and password managers never classify them as login credentials and never offer to "save password" after the user saves a key. Masking is purely visual via -webkit-text-security (supported in Chrome/Edge/Safari and Firefox 117+). */ .secret-input { -webkit-text-security: disc; text-security: disc; } .refresh-btn { flex-shrink: 0; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface); color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast); } .refresh-btn:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); } .refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; } .refresh-btn.loading i { animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .test-btn, .add-btn { padding: 10px 16px; border: 1px solid var(--primary-color); border-radius: var(--radius-md); background: transparent; color: var(--primary-color); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .test-btn:hover, .add-btn:hover { background: var(--primary-color); color: white; } .default-provider { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); } .primary-btn { padding: 10px 20px; background: var(--primary-color); color: white; border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; cursor: pointer; transition: background var(--transition-fast); } .primary-btn:hover { background: var(--primary-hover); } .secondary-btn { padding: 10px 20px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 14px; cursor: pointer; } .danger-btn { padding: 10px 20px; background: #ef4444; color: white; border: none; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; cursor: pointer; } .danger-btn:hover { background: #dc2626; } /* Refined destructive action — quiet by default (red text on a subtle surface), committing to solid red only on hover/focus. Used where a discard is reversible-ish and shouldn't shout next to a primary action (e.g. the unsaved-chat save guard). */ .danger-ghost-btn { padding: 10px 20px; background: transparent; color: #ef4444; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); } .danger-ghost-btn:hover, .danger-ghost-btn:focus-visible { background: #ef4444; color: #fff; border-color: #ef4444; } /* MCP Server List in Settings */ .mcp-servers-list { margin-bottom: 20px; } .mcp-server-item { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: var(--surface); border-radius: var(--radius-md); margin-bottom: 8px; } .mcp-server-info { flex: 1; } .mcp-server-name { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 8px; } .mcp-server-status { font-size: 11px; font-weight: 400; } .mcp-server-status.testing { color: var(--text-tertiary); } .mcp-server-status.success { color: #10b981; } .mcp-server-status.error { color: #ef4444; } .mcp-server-url { font-size: 12px; color: var(--text-tertiary); } .mcp-auth-label { color: var(--text-secondary); font-style: italic; } .mcp-server-actions { display: flex; align-items: center; gap: 12px; } .mcp-server-test { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-sm); } .mcp-server-test:hover { color: var(--primary-color); background: rgba(79, 182, 194, 0.1); } .mcp-server-test:disabled { opacity: 0.5; cursor: not-allowed; } .mcp-server-delete { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-sm); } .mcp-server-delete:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); } /* Toggle Switch */ .mcp-toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; background: none; border: none; padding: 0; margin: 0; overflow: hidden; } .mcp-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .mcp-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border-color); transition: .3s; border-radius: 22px; } .mcp-toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); } /* Explicitly hide any other pseudo-elements */ .mcp-toggle-switch::before, .mcp-toggle-switch::after, .mcp-toggle-slider::after { content: none !important; display: none !important; } input:checked + .mcp-toggle-slider { background-color: var(--primary-color); } input:checked + .mcp-toggle-slider:before { transform: translateX(18px); } .add-mcp-server { padding-top: 16px; border-top: 1px solid var(--border-color); } .add-mcp-server h4 { font-size: 14px; margin-bottom: 12px; } /* ============================================================================= SKILLS ============================================================================= */ .skills-list { margin-bottom: 20px; } .skills-list:empty + .add-skill-form { margin-top: 0; } .skill-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: var(--surface); border-radius: var(--radius-md); margin-bottom: 8px; transition: opacity 0.2s; } .skill-item.inactive { opacity: 0.55; } .skill-item-toggle { margin-top: 2px; flex-shrink: 0; } .skill-item-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-color); cursor: pointer; } .skill-item-info { flex: 1; min-width: 0; } .skill-item-name { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 6px; } .skill-item-name .skill-priority-badge { font-size: 10px; font-weight: 400; color: var(--text-tertiary); background: var(--bg); padding: 1px 5px; border-radius: var(--radius-sm); } .skill-item-description { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .skill-item-preview { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; } .skill-item-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .skill-item-actions button { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 13px; } .skill-item-actions button:hover { color: var(--primary-color); background: rgba(79, 182, 194, 0.1); } .skill-item-actions button.skill-delete-btn:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); } .add-skill-form { background: var(--surface); border-radius: var(--radius-md); padding: 16px; } .add-skill-form h4 { font-size: 14px; margin-bottom: 12px; } .skill-content-textarea { width: 100%; min-height: 180px; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg); color: var(--text-primary); font-family: 'Monaco', 'Menlo', 'Consolas', monospace; font-size: 12.5px; line-height: 1.5; resize: vertical; box-sizing: border-box; } .skill-content-textarea:focus { outline: none; border-color: var(--primary-color); } .skill-content-counter { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-tertiary); margin-top: 4px; } .skill-content-counter.near-limit { color: #f59e0b; } .skill-content-counter.at-limit { color: #ef4444; font-weight: 600; } .skill-budget-indicator { margin-left: auto; font-size: 11px; color: var(--text-tertiary); } .skill-budget-indicator.warn { color: #f59e0b; } .skill-budget-indicator.over { color: #ef4444; font-weight: 600; } .skill-form-actions { display: flex; align-items: flex-end; gap: 12px; justify-content: space-between; } .skill-form-actions .form-group { width: 80px; margin-bottom: 0; } .skill-form-actions #skill-priority { height: 42px; box-sizing: border-box; } .skill-form-actions .add-btn, .skill-form-actions .secondary-btn { height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } .skill-action-buttons { display: flex; gap: 8px; align-items: center; } .skill-import-export { margin-top: 4px; } .skill-import-export h4 { font-size: 14px; margin-bottom: 4px; } .skills-pill:hover { border-color: var(--primary-color); color: var(--primary-color); } /* Skills dropdown in chat action bar */ .skills-dropdown { min-width: 280px; } .skills-chat-list { max-height: 250px; overflow-y: auto; } /* Skills items — MCP tool checkbox style */ .skill-tool-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; cursor: pointer; transition: background var(--transition-fast); user-select: none; -webkit-user-select: none; } .skill-tool-item.hidden { display: none; } .skill-tool-item:hover { background: var(--surface); } .skill-tool-item:active { background: var(--surface); } .skill-tool-checkbox { width: 16px; height: 16px; border: 2px solid var(--border-color); border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-top: 2px; flex-shrink: 0; transition: all var(--transition-fast); } .skill-tool-item.active .skill-tool-checkbox { background: var(--primary-color); border-color: var(--primary-color); } .skill-tool-checkbox svg { width: 10px; height: 10px; color: white; opacity: 0; } .skill-tool-item.active .skill-tool-checkbox svg { opacity: 1; } .skill-tool-info { flex: 1; min-width: 0; } .skill-tool-name { font-size: 12px; font-weight: 600; } .skill-tool-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; } .skills-footer .footer-action { display: flex; align-items: center; gap: 5px; } .dropdown-empty { text-align: center; color: var(--text-tertiary); padding: 16px 12px; font-size: 13px; } .empty-text { text-align: center; color: var(--text-tertiary); padding: 24px; } .delete-chat-title { font-style: italic; color: var(--text-secondary); margin-top: 8px; } /* ============================================================================= TOAST NOTIFICATIONS ============================================================================= */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 12px 20px; background: var(--surface-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 14px; animation: toast-in 0.3s ease; } .toast-success { border-left: 4px solid var(--primary-color); } .toast-error { border-left: 4px solid #ef4444; } .toast.fade-out { animation: toast-out 0.3s ease forwards; } @keyframes toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* ============================================================================= RESPONSIVE ============================================================================= */ /* Mobile Sidebar Overlay */ .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 99; opacity: 0; transition: opacity var(--transition-base); pointer-events: none; } .sidebar-overlay.visible { opacity: 1; pointer-events: auto; } @media (max-width: 768px) { .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transform: translateX(-100%); width: min(var(--sidebar-width), 85vw); box-shadow: var(--shadow-lg); } .sidebar:not(.collapsed) { transform: translateX(0); } .sidebar.collapsed { transform: translateX(-100%); width: 0; } /* Hide strip on mobile — use header hamburger instead */ .sidebar-strip { display: none !important; } /* Show overlay element when sidebar is open on mobile (but only clickable when .visible) */ .sidebar-overlay { display: block; } /* Show close button on mobile */ .close-sidebar-btn { display: flex; } /* Project view: chat-header is hidden, so expose the sidebar toggle on mobile */ .project-sidebar-toggle { display: inline-flex; } .message-wrapper { max-width: 95%; } .message { font-size: 15px; line-height: 1.65; } .quick-actions { flex-direction: column; } .quick-action { width: 100%; justify-content: center; } /* Adjust chat header for mobile */ .chat-header { padding: 0 12px; /* Pin header so the hamburger toggle stays reachable on small screens regardless of stream/scroll/keyboard state. (P1 fix v3.14.63) */ position: sticky; top: 0; z-index: 30; background: var(--surface); } .chat-container { /* Establish containing block for the sticky header above */ position: relative; } .chat-header h1 { font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Defensive: ensure the hamburger is always rendered and clickable */ .sidebar-toggle { position: relative; z-index: 31; display: inline-flex !important; visibility: visible !important; flex-shrink: 0; } /* Adjust input area for mobile */ .chat-input-container { /* Pad the bottom for the iOS home indicator / Android gesture bar so the input box never sits flush against the device edge or gets clipped by browser chrome. env() resolves to 0 on browsers that don't expose safe-area-inset-bottom. */ padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); } .attach-btn { width: 32px; min-width: 32px; height: 32px; font-size: 15px; margin: 2px 0 2px 4px; } /* Prevent auto-zoom on focus - must be 16px+ */ #chat-input { font-size: 16px; } /* Mobile Action Bar */ .chat-action-bar { padding: 8px; } .action-row { gap: 4px; flex-wrap: nowrap; } .action-pill { padding: 5px 8px; font-size: 11px; } .action-pill.icon-only { min-width: 30px; height: 30px; padding: 5px 7px; } .pill-label { max-width: 70px; } /* --- Mobile action bar collapse: hide icon-only toggles behind + --- */ .action-expand-btn { display: flex !important; } /* Hide collapsible action items on mobile by default */ .action-item.collapsible-action { display: none; } /* ---- Floating popup for collapsible actions ---- */ .action-expand-popup { display: none; position: absolute; bottom: calc(100% + 8px); left: 8px; background: var(--surface-elevated, #fff); border: 1px solid var(--border-color); border-radius: 14px; padding: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); z-index: 100; flex-direction: row; flex-wrap: wrap; gap: 6px; min-width: 160px; max-width: calc(100vw - 32px); animation: popupFadeIn 0.15s ease; } .action-expand-popup.open { display: flex; } /* Items inside popup are always visible (unless .hidden) */ .action-expand-popup .action-item.collapsible-action { display: block; } .action-expand-popup .action-item.collapsible-action.hidden { display: none !important; } @keyframes popupFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Rotate the + to × when popup is open */ .action-expand-btn.active i { transform: rotate(45deg); } .action-expand-btn i { transition: transform 0.2s ease; } /* Backdrop to close popup when tapping outside */ .action-expand-backdrop { display: none; position: fixed; inset: 0; z-index: 99; } .action-expand-backdrop.open { display: block; } .send-btn { width: 32px; height: 32px; } /* Smaller buttons on mobile */ .header-action-btn { width: 32px; height: 32px; } /* Settings modal fullscreen on mobile */ .settings-modal { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: 0; } /* ========================================== MOBILE SETTINGS - Sidebar slides like chat ========================================== */ .settings-layout { position: relative; height: 100%; overflow: hidden; } /* Sidebar - full width, slides in/out */ .settings-sidebar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; background: var(--background); border-right: none; transform: translateX(0); transition: transform 0.3s ease; } /* When content is shown, sidebar slides completely out */ .settings-layout.show-content .settings-sidebar { transform: translateX(-100%); } .settings-sidebar-header { padding: 16px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; } .settings-sidebar-header::after { content: 'Settings'; font-size: 18px; font-weight: 600; margin-left: 12px; } .settings-nav { padding: 8px 0; overflow-y: auto; flex: 1; } .settings-nav-item { padding: 16px 20px; font-size: 16px; border-radius: 0; margin-bottom: 0; border-bottom: 1px solid var(--border-color); } .settings-nav-item:last-child { border-bottom: none; } .settings-nav-item span { display: inline; } .settings-nav-item .nav-icon, .settings-nav-item i { width: 24px; height: 24px; font-size: 18px; } /* Arrow indicator on nav items */ .settings-nav-item::after { content: '›'; margin-left: auto; font-size: 20px; color: var(--text-tertiary); } .settings-sidebar-footer { padding: 16px; border-top: 1px solid var(--border-color); } /* Content - always visible, full width */ .settings-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--background); } .settings-content-header { padding: 16px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 12px; } /* Show mobile back button */ .settings-mobile-back { display: flex !important; width: 36px; height: 36px; align-items: center; justify-content: center; border: none; background: transparent; color: var(--primary); font-size: 20px; cursor: pointer; border-radius: var(--radius-md); flex-shrink: 0; } .settings-mobile-back:hover { background: var(--surface); } .settings-content-header h2 { font-size: 18px; flex: 1; } .settings-content-body { flex: 1; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Hide desktop save button in sidebar footer on mobile - we use the one in content */ .settings-sidebar-footer .settings-save-btn { display: none; } /* Mobile save button at bottom of content */ .settings-mobile-save { display: block !important; padding: 16px 20px; border-top: 1px solid var(--border-color); background: var(--background); } .settings-mobile-save .settings-save-btn { width: 100%; padding: 14px; font-size: 16px; } /* Form adjustments for mobile */ .form-row { flex-direction: column; gap: 16px; } .form-group { width: 100%; } .form-group label { font-size: 15px; margin-bottom: 8px; } .form-group input:not([type="range"]), .form-group select, .form-group textarea { font-size: 16px; padding: 14px; } .form-hint { font-size: 13px; margin-top: 6px; } /* Quick models list adjustments */ .quick-model-item { flex-wrap: wrap; gap: 8px; } .panel-description { font-size: 14px; margin-bottom: 16px; } .settings-divider { margin: 20px 0; } .settings-section-title { font-size: 12px; margin-bottom: 16px; } /* Test/Add buttons full width on mobile */ .test-btn, .add-btn { width: 100%; padding: 14px; font-size: 15px; margin-top: 8px; } /* Center all action dropdowns on mobile screens using fixed positioning */ .action-dropdown { position: fixed !important; left: 50% !important; right: auto !important; transform: translateX(-50%); bottom: auto !important; top: auto !important; /* Position above the input area - roughly 180px from bottom */ bottom: 180px !important; min-width: min(300px, 90vw); max-width: 90vw; } /* Performance dropdown — mobile compact + safe height */ .perf-dropdown { width: min(320px, 92vw) !important; min-width: 0 !important; max-width: 92vw !important; /* Sit comfortably above the chat input without bleeding past the top of the viewport. 220 px ≈ chat input + safe-area gutter. */ max-height: calc(100vh - 220px) !important; bottom: 96px !important; overflow-y: auto; } .perf-body { padding: 12px; gap: 12px; } .perf-header { padding-bottom: 10px; } .perf-section { gap: 8px; } .perf-row label { font-size: 13px; } .perf-row input[type="number"] { font-size: 16px; /* avoid iOS zoom-on-focus */ padding: 8px 10px; } .perf-preset-chip { padding: 9px 4px; font-size: 12px; } /* Model dropdown positioning on mobile */ .model-dropdown { min-width: min(280px, 90vw); } /* MCP tools dropdown positioning on mobile */ .mcp-dropdown { min-width: min(300px, 90vw); } /* RAG dropdown positioning on mobile */ .rag-dropdown { min-width: min(280px, 90vw); } /* Make all input dropdowns mobile-friendly */ .input-dropdown { min-width: min(280px, 85vw); max-height: 50vh; } /* Larger touch targets for MCP tools on mobile */ .mcp-tool-item { padding: 14px 12px; } .mcp-tool-checkbox { width: 20px; height: 20px; } /* Chat messages padding */ .chat-messages { padding: 16px 12px; } /* Welcome screen adjustments */ .welcome-screen h2 { font-size: 22px; } } /* Extra small screens */ @media (max-width: 480px) { .sidebar { width: 100vw; } .header-actions { gap: 4px; } .chat-input-left { gap: 4px; } .input-action-btn { padding: 6px 8px; font-size: 12px; } .model-display { max-width: 80px; } /* Smaller padding on very small screens */ .settings-content-body { padding: 16px; } .settings-nav-item { padding: 14px 16px; } } /* Model Selector Grouping */ .model-group-header { padding: 8px 12px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); letter-spacing: 0.5px; background: var(--surface); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; } /* Quick Models Settings Panel */ .panel-description { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; } .quick-models-list { margin-bottom: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; } .quick-models-list .empty-state { padding: 24px; text-align: center; color: var(--text-tertiary); font-size: 13px; } .quick-model-item { display: flex; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border-color); background: var(--background); cursor: grab; transition: all var(--transition-fast); } .quick-model-item:last-child { border-bottom: none; } .quick-model-item:hover { background: var(--surface); } .quick-model-item.dragging { opacity: 0.5; cursor: grabbing; } .quick-model-item.drag-over { border-top: 2px solid var(--primary-color); margin-top: -1px; } .drag-handle { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--text-tertiary); margin-right: 10px; cursor: grab; } .quick-model-item:active .drag-handle { cursor: grabbing; } .quick-model-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .quick-model-name { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .quick-model-provider { font-size: 11px; color: var(--text-tertiary); } .quick-model-actions { display: flex; align-items: center; gap: 4px; margin-left: 12px; } .remove-quick-model { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .remove-quick-model:hover { background: #ef4444; color: white; } .add-quick-model { padding: 16px; background: var(--surface); border-radius: var(--radius-md); } .add-quick-model h4 { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); } .form-row { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; max-width: 100%; } .form-row .form-group { margin-bottom: 0; min-width: 0; } .form-row .form-group:first-child { flex: 1; min-width: 100px; } .form-row .flex-grow { flex: 1; } .form-row .add-btn { height: 38px; white-space: nowrap; } .add-quick-model .form-row .add-btn { margin-top: 24px; } .refresh-btn { height: 38px; width: 38px; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-secondary); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s; flex-shrink: 0; } .refresh-btn:hover:not(:disabled) { background: var(--bg-tertiary); color: var(--text-primary); } .refresh-btn:disabled { opacity: 0.4; cursor: not-allowed; } .refresh-btn.spinning { animation: spin 0.8s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .add-quick-model .form-row .refresh-btn { margin-top: 24px; } /* ===================================================== Embedding Models Panel Styles ===================================================== */ .embedding-models-list { margin-bottom: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; } .embedding-models-list .empty-models-message { padding: 24px; text-align: center; color: var(--text-tertiary); font-size: 13px; } .embedding-model-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-color); background: var(--background); transition: all var(--transition-fast); } .embedding-model-item:last-child { border-bottom: none; } .embedding-model-item:hover { background: var(--surface); } .embedding-model-item.active { background: color-mix(in srgb, var(--accent) 6%, var(--background)); } .embedding-model-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .embedding-model-name { font-weight: 500; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .embedding-model-meta { font-size: 11px; color: var(--text-secondary); } .embedding-model-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .embedding-model-active-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: 3px 10px; border-radius: 12px; } .embedding-model-activate-btn { font-size: 11px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; transition: all 0.15s; } .embedding-model-activate-btn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .embedding-model-remove-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px 6px; border-radius: 4px; font-size: 12px; opacity: 0.5; transition: all 0.15s; } .embedding-model-remove-btn:hover { opacity: 1; color: #e74c3c; background: rgba(231, 76, 60, 0.1); } /* Add Embedding Model form */ .add-embedding-model { margin-top: 16px; padding: 16px; background: var(--surface); border-radius: var(--radius-md); } .add-embedding-model h4 { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; } .add-embedding-model .form-row { gap: 12px; align-items: flex-start; } .add-embedding-model .form-row .form-group { flex: 1; } .add-embedding-model .form-row .form-group.dimensions-group { flex: 0 0 120px; } .add-embedding-model .embedding-secondary-row { align-items: flex-end; margin-top: 10px; } .add-embedding-model .embedding-add-btn { align-self: flex-end; margin-top: 24px; } .add-embedding-model .embedding-dimensions-hint { margin-top: 4px; margin-bottom: 0; } .add-embedding-model .label-optional { font-weight: 400; font-size: 0.75em; opacity: 0.6; margin-left: 4px; } /* RAG Active Embedding Display */ .rag-active-embedding { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 16px; } .rag-active-embedding.configured { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--bg-secondary)); } .rag-active-embedding-icon { font-size: 16px; color: var(--text-secondary); } .rag-active-embedding.configured .rag-active-embedding-icon { color: var(--accent); } .rag-active-embedding-text { flex: 1; font-size: 13px; color: var(--text-primary); font-weight: 500; } .rag-active-embedding .link-to-embedding-tab { font-size: 12px; } /* Embedding info icon in RAG collections dropdown */ .embedding-info-icon { opacity: 0.5; } .embedding-info-icon.has-model { opacity: 1; color: var(--primary-color); } /* Chat Memory Warning Box */ .chat-memory-warning { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: color-mix(in srgb, #f59e0b 10%, var(--bg-secondary)); border: 1px solid color-mix(in srgb, #f59e0b 30%, var(--border-color)); border-radius: var(--radius); font-size: 12px; line-height: 1.5; color: var(--text-secondary); } .chat-memory-warning i { color: #f59e0b; font-size: 14px; margin-top: 2px; flex-shrink: 0; } /* User Memory Management */ .user-memory-add-row { display: flex; gap: 8px; align-items: center; } .user-memory-add-row .form-input { flex: 1; min-width: 0; } /* Memory tab — backend status banner, usage widget, bulk actions */ .memory-status-banner { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 12px; color: var(--text-secondary); } .memory-status-banner.managed { border-left: 3px solid var(--accent, #3b82f6); } .memory-status-banner.byo { border-left: 3px solid #10b981; } .memory-status-banner i { opacity: 0.75; } .memory-usage { margin-bottom: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); } .memory-usage-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; } .memory-usage-value { color: var(--text-primary); font-weight: 500; } .memory-usage-bar { width: 100%; height: 4px; background: var(--border-color); border-radius: 2px; overflow: hidden; } .memory-usage-bar-fill { height: 100%; width: 0; background: var(--accent, #3b82f6); transition: width 0.25s ease, background 0.25s ease; } .memory-usage-bar-fill.warn { background: #f59e0b; } .memory-usage-bar-fill.full { background: #ef4444; } .memory-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-color); } .settings-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: transparent; border: 1px solid var(--primary-color); border-radius: var(--radius-md); color: var(--primary-color); font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .settings-action-btn:hover { background: var(--primary-color); color: #fff; } .settings-action-btn.danger { color: #ef4444; border-color: rgba(239, 68, 68, 0.5); } .settings-action-btn.danger:hover { background: #ef4444; color: #fff; border-color: #ef4444; } .settings-action-btn:disabled { opacity: 0.5; cursor: not-allowed; } .user-memory-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; } .user-memory-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 13px; line-height: 1.5; color: var(--text-primary); } .user-memory-item .memory-content { flex: 1; min-width: 0; word-break: break-word; } .user-memory-item .memory-source { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; } .user-memory-item .memory-delete-btn { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 2px 4px; font-size: 12px; flex-shrink: 0; opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast); } .user-memory-item:hover .memory-delete-btn { opacity: 1; } .user-memory-item .memory-delete-btn:hover { color: var(--error); } .user-memory-empty { text-align: center; padding: 20px 12px; color: var(--text-tertiary); font-size: 13px; } /* ===================================================== Performance Settings Styles ===================================================== */ .settings-divider { height: 1px; background: var(--border-color); margin: 20px 0; } .settings-section-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.5px; } /* Range slider styling */ input[type="range"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: var(--border-color); outline: none; margin: 8px 0; cursor: pointer; } /* Chrome/Safari/Edge track */ input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 6px; border-radius: 3px; background: var(--border-color); } /* Firefox track */ input[type="range"]::-moz-range-track { width: 100%; height: 6px; border-radius: 3px; background: var(--border-color); } /* Chrome/Safari/Edge thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; border: 2px solid var(--background); box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform var(--transition-fast); margin-top: -6px; /* Center thumb on track */ } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); } /* Firefox thumb */ input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; border: 2px solid var(--background); box-shadow: 0 1px 3px rgba(0,0,0,0.2); } input[type="range"]::-moz-range-thumb:hover { transform: scale(1.1); } /* Focus styles for accessibility */ input[type="range"]:focus { outline: none; } input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(79, 182, 194, 0.3); } input[type="range"]:focus::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(79, 182, 194, 0.3); } /* Value display next to label */ .value-display { font-family: var(--font-mono); font-size: 12px; color: var(--primary); background: var(--surface); padding: 2px 6px; border-radius: 4px; margin-left: 8px; } /* Number inputs in settings */ .form-group input[type="number"] { -moz-appearance: textfield; } .form-group input[type="number"]::-webkit-inner-spin-button, .form-group input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Form hint text */ .form-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; line-height: 1.4; } /* Performance form rows - more equal sizing */ #performance-settings .form-row .form-group, #ollama-settings .form-row .form-group, #lmstudio-settings .form-row .form-group { flex: 1; } /* Nav icon for Font Awesome icons (no image) */ .nav-icon-fa { width: 20px; font-size: 14px; text-align: center; color: var(--text-secondary); } .settings-nav-item.active .nav-icon-fa { color: var(--primary); } /* ============================================================================= FILE UPLOAD UI ============================================================================= */ /* Upload Dropdown */ .upload-dropdown { width: 280px; } /* Upload Drop Zone */ .upload-drop-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; border: 2px dashed var(--border-color); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; transition: all 0.15s ease; text-align: center; } .upload-drop-zone:hover, .upload-drop-zone.drag-over { border-color: var(--primary-color); background: rgba(79, 182, 194, 0.05); } /* Disabled state while uploading - handled by inline JS styles */ .upload-drop-zone.uploading { pointer-events: none; cursor: not-allowed; } .upload-drop-zone i { font-size: 28px; color: var(--primary-color); margin-bottom: 8px; } .upload-main-text { font-size: 13px; color: var(--text-secondary); font-weight: 500; } .upload-hint { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; } /* Upload Progress */ .upload-progress { margin-top: 12px; } .upload-progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } #upload-progress-text { font-size: 11px; color: var(--text-secondary); } .upload-cancel-btn { width: 22px; height: 22px; border: none; background: rgba(220, 53, 69, 0.1); color: #dc3545; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: all var(--transition-fast); } .upload-cancel-btn:hover { background: #dc3545; color: white; } .upload-progress .progress-bar { height: 6px; background: var(--surface); border-radius: 3px; overflow: hidden; } .upload-progress .progress-fill { height: 100%; background: var(--primary-color); border-radius: 3px; transition: width 0.2s ease; width: 0%; } /* Chat input disabled during upload */ .chat-input-container.upload-locked .chat-input { background: var(--surface); opacity: 0.5; pointer-events: none; } .chat-input-container.upload-locked .send-btn { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Attached Files Preview */ .attached-files { padding: 8px 12px; border-bottom: 1px solid var(--border-color); background: var(--surface); } .attached-files-list { display: flex; flex-wrap: wrap; gap: 8px; } .attached-file { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--surface-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 12px; } .attached-file .file-icon { color: var(--primary-color); } .attached-file .file-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); } .attached-file .file-size { color: var(--text-tertiary); font-size: 10px; } .attached-file .remove-file { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; border-radius: 50%; transition: all var(--transition-fast); } .attached-file .remove-file:hover { background: var(--danger); color: white; } /* Upload button active state */ .upload-bar .input-action-btn.has-files { color: var(--primary-color); background: rgba(79, 182, 194, 0.1); } /* ============================================================================= IMAGE CONTEXT MESSAGE - Shows uploaded image analysis in chat ============================================================================= */ .image-context-message { margin: 16px 0; padding: 0; } .image-context-container { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-hover) 100%); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; max-width: 500px; } .image-context-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border-color); } .image-context-header i { color: var(--primary-color); font-size: 16px; } .image-context-title { flex: 1; font-weight: 600; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .image-context-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 3px 8px; background: var(--primary-color); color: white; border-radius: 10px; } .image-context-preview { width: 100%; max-height: 300px; object-fit: contain; background: var(--background); cursor: pointer; transition: opacity 0.2s ease; } .image-context-preview:hover { opacity: 0.9; } .image-context-description { padding: 16px; } .image-context-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; } .image-context-label i { font-size: 12px; color: var(--primary-color); } .image-context-text { font-size: 14px; line-height: 1.6; color: var(--text-secondary); white-space: pre-wrap; } .image-context-hint { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(79, 182, 194, 0.1); border-top: 1px solid var(--border-color); font-size: 12px; color: var(--primary-color); } .image-context-hint i { font-size: 14px; } /* Compact version - just header, no preview/description */ .image-context-compact { max-width: 350px; } .image-context-compact .image-context-header { border-bottom: none; padding: 10px 14px; } .image-context-compact .image-context-badge { background: var(--success-color, #10b981); } /* ============================================================================= DOCUMENT CONTEXT MESSAGE (for uploaded documents/PDFs) ============================================================================= */ .document-context-message { margin: 16px 0; padding: 0; } .document-context-container { background: linear-gradient(135deg, var(--surface) 0%, var(--surface-hover) 100%); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; max-width: 400px; } .document-context-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface); } .document-context-header i { color: var(--warning-color, #f59e0b); font-size: 18px; } .document-context-header i.fa-file-pdf { color: #ef4444; } .document-context-header i.fa-file-word { color: #2563eb; } .document-context-header i.fa-file-excel { color: #10b981; } .document-context-title { flex: 1; font-weight: 600; font-size: 14px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .document-context-size { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; } .document-context-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 3px 8px; background: var(--success-color, #10b981); color: white; border-radius: 10px; flex-shrink: 0; } .document-context-collection { display: block; padding: 8px 16px; font-size: 12px; color: var(--text-secondary); background: var(--surface); border-top: 1px solid var(--border-color); } .document-context-hint { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(79, 182, 194, 0.1); border-top: 1px solid var(--border-color); font-size: 12px; color: var(--primary-color); } .document-context-hint i { font-size: 14px; flex-shrink: 0; } .document-context-warning { background: rgba(245, 158, 11, 0.15); color: var(--warning-color, #f59e0b); } .document-context-success { background: rgba(16, 185, 129, 0.15); color: var(--success-color, #10b981); } .document-context-badge.badge-warning { background: var(--warning-color, #f59e0b); } /* RAG Status indicators - reuse same pattern */ .qdrant-status, .embedding-status, .rerank-status { display: flex; align-items: center; gap: 8px; padding: 12px; background: var(--surface); border-radius: var(--radius-md); margin-bottom: 12px; } .qdrant-status .status-indicator, .embedding-status .status-indicator, .rerank-status .status-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--text-tertiary); } .qdrant-status .status-indicator.connected, .embedding-status .status-indicator.connected, .rerank-status .status-indicator.connected { background: var(--success); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); } .qdrant-status .status-indicator.disconnected, .embedding-status .status-indicator.disconnected, .rerank-status .status-indicator.disconnected { background: var(--text-tertiary); } .qdrant-status .status-indicator.error, .embedding-status .status-indicator.error, .rerank-status .status-indicator.error { background: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); } .qdrant-status .status-indicator.connecting, .embedding-status .status-indicator.connecting, .rerank-status .status-indicator.connecting { background: var(--primary-color); box-shadow: 0 0 0 3px rgba(79, 182, 194, 0.2); animation: status-pulse 1s ease-in-out infinite; } @keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .qdrant-status .status-text, .embedding-status .status-text, .rerank-status .status-text { font-size: 13px; color: var(--text-secondary); } /* Settings section title */ .settings-section-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 8px 0; } .settings-section-title i { color: var(--primary-color); } /* Toggle Switch for Settings panels (toggle-label style) */ .toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em; } .toggle-label input[type="checkbox"] { display: none; } .toggle-label .settings-toggle { display: inline-block; position: relative; width: 44px; height: 24px; background: #ccc; border-radius: 12px; transition: all var(--transition-fast); flex-shrink: 0; } /* Dark mode toggle background */ [data-theme="dark"] .toggle-label .settings-toggle { background: #555; } .toggle-label .settings-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: all var(--transition-fast); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .toggle-label input[type="checkbox"]:checked + .settings-toggle { background: var(--primary-color); } .toggle-label input[type="checkbox"]:checked + .settings-toggle::after { left: 22px; } /* ------------------------------------------------------------------ */ /* Toggle Card — modern card-style toggle for settings panels. */ /* Title + description on the left, switch on the right, in a bordered*/ /* card. Replaces the old "tiny label next to a giant pill" look. */ /* The inner .toggle-switch reuses the .settings-toggle slider styles */ /* above so the actual switch graphic is unchanged. */ /* ------------------------------------------------------------------ */ .toggle-card { display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 16px; transition: border-color var(--transition-fast), background var(--transition-fast); } .toggle-card:hover { border-color: var(--primary-color); } /* Primary variant — slightly emphasised for "master" toggles */ .toggle-card-primary { background: linear-gradient(135deg, rgba(79, 182, 194, 0.06), rgba(79, 182, 194, 0.02)); border-color: rgba(79, 182, 194, 0.35); } [data-theme="dark"] .toggle-card-primary { background: linear-gradient(135deg, rgba(79, 182, 194, 0.12), rgba(79, 182, 194, 0.04)); border-color: rgba(79, 182, 194, 0.4); } .toggle-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .toggle-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em; line-height: 1.3; } .toggle-card-hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); } /* Switch wrapper — replaces the wide .toggle-label container so the slider can sit cleanly on the right of the card. */ .toggle-switch { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; margin-top: 2px; cursor: pointer; } .toggle-switch input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .toggle-switch .settings-toggle { display: inline-block; position: relative; width: 44px; height: 24px; background: #ccc; border-radius: 12px; transition: all var(--transition-fast); } [data-theme="dark"] .toggle-switch .settings-toggle { background: #555; } .toggle-switch .settings-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: all var(--transition-fast); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .toggle-switch input[type="checkbox"]:checked + .settings-toggle { background: var(--primary-color); } .toggle-switch input[type="checkbox"]:checked + .settings-toggle::after { left: 22px; } .toggle-switch input[type="checkbox"]:focus-visible + .settings-toggle { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* Toggle-controlled field groups */ .toggle-fields { transition: opacity 0.2s ease; } .toggle-fields.fields-disabled { opacity: 0.4; pointer-events: none; user-select: none; } /* Test buttons stay clickable even when parent is disabled */ .toggle-fields.fields-disabled .test-btn[data-toggle-exempt] { pointer-events: auto; opacity: 1; cursor: pointer; } .toggle-fields.fields-disabled input, .toggle-fields.fields-disabled select, .toggle-fields.fields-disabled textarea, .toggle-fields.fields-disabled button:not([data-toggle-exempt]) { cursor: not-allowed; } /* RAG Connection Status - stacked indicators */ .rag-connection-status { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } /* RAG Response in Chat */ .rag-response { background: linear-gradient(135deg, rgba(79, 182, 194, 0.05), rgba(79, 182, 194, 0.02)); border-left: 3px solid var(--primary-color); padding: 12px 16px; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 8px 0; } .rag-sources { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); } .rag-sources-title { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .rag-source-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); padding: 4px 0; } .rag-source-item i { color: var(--primary-color); font-size: 10px; } /* RAG Toggle Button in Chat Input */ .rag-toggle-bar { display: flex; align-items: center; } .rag-btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-md); transition: all 0.2s ease; } .rag-btn i { font-size: 14px; } .rag-label { font-size: 12px; font-weight: 500; } .rag-btn.active { background: var(--primary-color); color: white; } .rag-btn.active:hover { background: var(--primary-hover); } .rag-btn:not(.active) { color: var(--text-secondary); } .rag-btn:not(.active):hover { color: var(--primary-color); background: var(--surface-hover); } /* RAG indicator when active */ .chat-input-box.rag-active { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15); } /* ── Drag & Drop visual feedback ── */ .chat-input-box.drag-over { border-color: var(--primary-color); border-style: dashed; box-shadow: 0 0 0 3px rgba(79, 182, 194, 0.2); background: rgba(79, 182, 194, 0.04); } .chat-input-box.rag-active::before { content: 'Knowledge query'; position: absolute; top: -20px; left: 12px; font-size: 10px; font-weight: 500; color: var(--primary-color); background: var(--background); padding: 0 4px; } /* RAG Sources Display in Messages */ .rag-sources { margin-top: 16px; padding: 12px 14px; background: var(--surface-hover); border-radius: var(--radius-md); border-left: 3px solid var(--primary-color); } .rag-sources-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--primary-color); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .rag-sources-title i { font-size: 14px; } .rag-source-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 4px 0; font-size: 13px; color: var(--text-secondary); background: var(--background); border-radius: var(--radius-sm); transition: all 0.2s ease; } .rag-source-item:hover { color: var(--text-primary); background: var(--surface-active); } .rag-source-item i { color: var(--primary-color); font-size: 12px; opacity: 0.8; } /* ── Web citation chips (Claude-style inline pills) ─────────────────────── */ /* Wrapper around a [n] / [n, m] group so adjacent chips don't word-wrap separately and keep tight spacing. */ .web-cite-group { display: inline; white-space: nowrap; } .web-cite { display: inline-flex; align-items: center; gap: 4px; margin: 0 1px; padding: 1px 8px; font-size: 10.5px; font-weight: 600; line-height: 1.35; color: var(--text-secondary); background: var(--surface-hover); border: 1px solid transparent; border-radius: 999px; box-shadow: 0 0 0 1px var(--border-color); text-decoration: none !important; vertical-align: middle; position: relative; top: -1px; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; cursor: pointer; user-select: none; white-space: nowrap; } /* Suppress the global external-link icon (.message-content a::after) on chips */ .message-content a.web-cite::after { content: none !important; } .web-cite:hover, .web-cite:focus { background: var(--primary-color); color: #fff; box-shadow: 0 0 0 1px var(--primary-color); outline: none; } /* Citation tokens hidden in the rendered DOM during streaming so they don't visually flash before the chip renderer runs at end-of-stream. */ .cite-token-hidden { display: none !important; } .web-cite-fav { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; object-fit: contain; } .web-cite-label { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* "+N" badge shown when a single chip represents multiple sources. Rendered inline with the label so the chip reads as one unified pill (e.g. "Yottalabs +1") instead of a chip-within-a-chip. */ .web-cite-more { display: inline; margin-left: 4px; font-size: 10px; font-weight: 700; line-height: 1; color: var(--text-tertiary); opacity: 0.85; } .web-cite:hover .web-cite-more, .web-cite:focus .web-cite-more { color: #fff; opacity: 0.95; } /* ── Popover card ───────────────────────────────────────────────────────── */ .web-cite-popover { position: absolute; z-index: 9999; max-width: 320px; min-width: 200px; padding: 10px 12px; background: var(--background); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08); font-size: 12px; line-height: 1.4; color: var(--text-primary); pointer-events: auto; /* Smooth in — display:none toggles the visibility, so animate opacity and transform only when visible. */ animation: webCitePopoverIn 0.12s ease-out; } @keyframes webCitePopoverIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .web-cite-popover-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; min-height: 22px; } .web-cite-popover-head:empty { display: none; } .web-cite-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background: var(--surface-hover); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-secondary); font-size: 10px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .web-cite-nav-btn:hover { background: var(--surface-active); color: var(--primary-color); border-color: var(--primary-color); } .web-cite-popover-counter { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; } .web-cite-popover-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .web-cite-popover-fav { width: 14px; height: 14px; border-radius: 2px; flex-shrink: 0; } .web-cite-popover-domain { font-size: 11px; font-weight: 500; color: var(--text-tertiary); text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .web-cite-popover-title { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 2px 0 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; } .web-cite-popover-title:hover { color: var(--primary-color); text-decoration: underline; } .web-cite-popover-url { font-size: 11px; color: var(--text-tertiary); word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Project Knowledge Citations (managed RAG) — rendered after assistant message body when the server returns a `citations` SSE event. Each item is clickable and opens the source resource in a new tab. */ .project-citations { margin-top: 16px; padding: 12px 14px; background: var(--surface-hover); border-radius: var(--radius-md); border-left: 3px solid var(--accent-color, var(--primary-color)); } .project-citations-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--accent-color, var(--primary-color)); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .project-citations-title i { font-size: 13px; } .project-citation-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin: 4px 0; font-size: 13px; color: var(--text-secondary); background: var(--background); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; } .project-citation-item:hover { color: var(--text-primary); background: var(--surface-active); } .project-citation-num { font-weight: 600; color: var(--primary-color); min-width: 24px; } .project-citation-item i { color: var(--primary-color); font-size: 12px; opacity: 0.85; } .project-citation-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-citation-loc { font-size: 11px; color: var(--text-tertiary, var(--text-secondary)); opacity: 0.85; } /* RAG Document Selector */ .rag-doc-selector { display: flex; align-items: center; position: relative; } .rag-doc-btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-md); font-size: 12px; color: var(--text-secondary); transition: all 0.2s ease; } .rag-doc-btn:hover { color: var(--primary-color); background: var(--surface-hover); } .rag-doc-btn i { font-size: 12px; } .rag-doc-count { font-weight: 500; color: var(--primary-color); } .rag-doc-dropdown { position: absolute; bottom: 100%; left: 0; width: 320px; max-height: 400px; margin-bottom: 8px; background: var(--background); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 100; } .rag-doc-loading { padding: 30px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; } .rag-doc-loading i { font-size: 20px; margin-bottom: 8px; display: block; color: var(--primary-color); } .rag-doc-empty { padding: 30px 20px; text-align: center; color: var(--text-tertiary); font-size: 13px; line-height: 1.5; } .rag-doc-empty i { font-size: 24px; margin-bottom: 8px; display: block; opacity: 0.5; } .rag-doc-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s ease; } .rag-doc-item:hover { background: var(--surface-hover); } .rag-doc-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-color); cursor: pointer; } .rag-doc-item-info { flex: 1; min-width: 0; } .rag-doc-item-name { font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rag-doc-item-chunks { font-size: 11px; color: var(--text-tertiary); } /* RAG Collection Selector - Clean Design */ .rag-search-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--border-color); } .rag-search-bar > i { color: var(--text-tertiary); font-size: 13px; } .rag-search-bar input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 13px; color: var(--text-primary); outline: none; } .rag-search-bar input::placeholder { color: var(--text-tertiary); } .rag-search-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; } .rag-action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: transparent; color: var(--text-tertiary); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s ease; } .rag-action-btn:hover { background: var(--surface-hover); color: var(--primary-color); } .rag-action-btn i { font-size: 12px; } .rag-collection-list { max-height: 50vh; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 4px; } .rag-collection-item.hidden { display: none; } .rag-collection-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; font-size: 13px; } .rag-collection-item:hover { background: var(--surface-hover); border-color: var(--border-color); } .rag-collection-item.selected { background: rgba(79, 182, 194, 0.12); border-color: var(--primary-color); } .rag-collection-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primary-color); cursor: pointer; flex-shrink: 0; } .rag-collection-item-name { flex: 1; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; } .rag-collection-item.selected .rag-collection-item-name { color: var(--primary-color); font-weight: 500; } .rag-collection-item-count { font-size: 10px; color: var(--text-secondary); background: var(--surface); padding: 2px 6px; border-radius: 10px; } /* RAG Category Groups */ .rag-category-group { margin-bottom: 6px; } .rag-category-group.hidden { display: none; } .rag-category-group:last-child { margin-bottom: 0; } .rag-category-header { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border-color); border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--text-primary); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .rag-category-header:hover { border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-color) 60%); background: var(--surface-hover); } .rag-category-chevron { color: var(--text-tertiary); font-size: 10px !important; width: 12px !important; text-align: center; flex-shrink: 0; transition: transform 0.2s ease; } .rag-category-select-all { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 22px; border: 1px solid var(--border-color); background: var(--background); color: var(--text-secondary); cursor: pointer; border-radius: 999px; transition: all 0.15s ease; padding: 0 9px; flex-shrink: 0; font-size: 11px; font-weight: 600; white-space: nowrap; } .rag-category-select-all i { font-size: 10px; color: inherit; } .rag-category-select-all:hover { border-color: var(--primary-color); background: rgba(79, 182, 194, 0.10); color: var(--primary-color); } .rag-category-select-all.all-selected { color: var(--primary-color); border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-color) 45%); background: rgba(79, 182, 194, 0.14); } .rag-category-select-all.some-selected { color: var(--text-secondary); border-color: color-mix(in srgb, var(--primary-color) 30%, var(--border-color) 70%); background: color-mix(in srgb, var(--surface) 92%, var(--primary-color) 8%); } .rag-category-group.collapsed .rag-category-chevron { transform: rotate(-90deg); } .rag-category-group.collapsed .rag-category-items { display: none; } .rag-category-title { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rag-category-count { font-size: 11px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; min-width: 30px; text-align: right; } .rag-category-items { display: flex; flex-direction: column; gap: 4px; padding: 6px 2px 2px 6px; } .rag-category-items .rag-collection-item { border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 7px 10px; margin: 0; } .rag-category-items .rag-collection-item-name { min-width: 0; } .rag-category-items .rag-collection-item:hover { background: var(--surface-hover); } .rag-category-items .rag-collection-item.selected { background: rgba(79, 182, 194, 0.12); border-color: color-mix(in srgb, var(--primary-color) 45%, transparent 55%); } .rag-category-items .rag-collection-item.selected .rag-collection-item-name { color: var(--primary-color); font-weight: 500; } /* Remove old select styles */ .rag-collection-select { display: none; } /* ============================================================================= ATTACHMENT PREVIEWS (input area chips) ============================================================================= */ .attachment-previews { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; max-height: 140px; overflow-y: auto; } .attachment-previews.hidden { display: none; } .attachment-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 4px 8px; font-size: 0.8rem; color: var(--text-secondary); max-width: 220px; } .attachment-chip i { color: var(--primary-color); font-size: 0.85rem; } .attachment-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: var(--radius-sm); } .attachment-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .attachment-size { color: var(--text-tertiary); font-size: 0.7rem; white-space: nowrap; } .attachment-remove { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 2px 4px; font-size: 0.75rem; border-radius: 50%; line-height: 1; } .attachment-remove:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); } /* ============================================================================= MESSAGE ATTACHMENTS (inside chat bubbles) ============================================================================= */ .message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .message-attachment-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-color); cursor: pointer; } .message-attachment-thumb:hover { opacity: 0.85; } .message-attachment-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(79, 182, 194, 0.1); color: var(--primary-color); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 0.78rem; font-weight: 500; } /* ========================================================================= PLAN BADGE & FEATURE GATING ========================================================================= */ /* Plan badge in sidebar user-menu trigger */ .plan-badge { display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 9999px; line-height: 1.4; white-space: nowrap; margin-left: 4px; } .plan-badge-free { background: rgba(255, 255, 255, 0.08); color: var(--text-muted); border: 1px solid var(--border-color); } .plan-badge-pro { background: linear-gradient(135deg, rgba(79, 182, 194, 0.2), rgba(79, 182, 194, 0.08)); color: var(--primary-color); border: 1px solid rgba(79, 182, 194, 0.35); } .plan-badge-teams { background: linear-gradient(135deg, rgba(168, 130, 255, 0.2), rgba(168, 130, 255, 0.08)); color: #a882ff; border: 1px solid rgba(168, 130, 255, 0.35); } /* ── Plan badge inside popup menu header ── */ .menu-plan-badge { display: inline-flex; align-items: center; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 9999px; line-height: 1.4; white-space: nowrap; margin-left: auto; flex-shrink: 0; } .menu-plan-badge.badge-free { background: rgba(255, 255, 255, 0.08); color: var(--text-tertiary); border: 1px solid var(--border-color); } .menu-plan-badge.badge-pro { background: linear-gradient(135deg, rgba(79, 182, 194, 0.2), rgba(79, 182, 194, 0.08)); color: var(--primary-color); border: 1px solid rgba(79, 182, 194, 0.35); } .menu-plan-badge.badge-teams { background: linear-gradient(135deg, rgba(168, 130, 255, 0.2), rgba(168, 130, 255, 0.08)); color: #a882ff; border: 1px solid rgba(168, 130, 255, 0.35); } /* ── Upgrade button in user menu ── */ .user-menu-upgrade { color: var(--primary-color) !important; } .user-menu-upgrade i { color: var(--primary-color) !important; } .user-menu-upgrade:hover { background: rgba(79, 182, 194, 0.08) !important; } /* Credit counter in sidebar user-menu trigger */ .credit-counter { display: inline-flex; align-items: center; font-size: 0.6rem; font-weight: 600; padding: 2px 6px; border-radius: 9999px; line-height: 1.4; white-space: nowrap; margin-left: 4px; background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); border: 1px solid var(--border-color); transition: background 0.3s, color 0.3s, border-color 0.3s; } .credit-counter::before { content: '\f0e7'; /* FontAwesome bolt icon */ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.5rem; margin-right: 3px; opacity: 0.7; } /* Low credit warning (≤20% remaining) */ .credit-counter.credit-low { background: rgba(255, 180, 50, 0.15); color: #f0a030; border-color: rgba(255, 180, 50, 0.35); animation: credit-pulse 2s ease-in-out infinite; } /* Zero credits state */ .credit-counter.credit-zero { background: rgba(255, 80, 80, 0.12); color: #e05555; border-color: rgba(255, 80, 80, 0.3); animation: none; } @keyframes credit-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } } /* Feature-locked overlay for action pills and settings tabs */ .feature-locked { position: relative; pointer-events: auto; cursor: not-allowed; } .feature-locked > * { opacity: 0.35; pointer-events: none; } .feature-locked::after { content: '\f023'; /* FontAwesome lock icon */ font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 0.75rem; color: var(--text-muted); pointer-events: none; z-index: 2; } /* Settings nav item locked state */ .settings-nav-item.feature-locked { opacity: 0.45; pointer-events: auto; cursor: not-allowed; } .settings-nav-item.feature-locked::after { content: '\f023'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.6rem; position: static; transform: none; margin-left: 6px; color: var(--text-muted); } /* ── Upgrade Modal ── */ .upgrade-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 10000; animation: upgradeOverlayIn 0.2s ease-out; } @keyframes upgradeOverlayIn { from { opacity: 0; } to { opacity: 1; } } .upgrade-modal { background: var(--background); border: 1px solid var(--border-color); border-radius: var(--radius-xl); padding: 0; max-width: 920px; width: 92%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--border-color); animation: upgradeModalIn 0.3s cubic-bezier(0.16, 1, 0.3, 1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } @keyframes upgradeModalIn { from { opacity: 0; transform: scale(0.92) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Close button */ .upgrade-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--text-tertiary); font-size: 1.5rem; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); line-height: 1; z-index: 1; } .upgrade-modal-close:hover { background: var(--surface); color: var(--text-primary); } /* Header section */ .upgrade-modal-header { padding: 28px 28px 0; text-align: center; } .upgrade-modal-icon { margin-bottom: 12px; display: inline-flex; } .upgrade-modal-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; letter-spacing: -0.01em; } .upgrade-modal-subtitle { font-size: 0.88rem; color: var(--text-secondary); margin: 0; line-height: 1.4; } /* Plans container — side by side */ .upgrade-modal-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; padding: 24px 24px 0; align-items: stretch; } /* Self-serve trial CTA (Tier 4) — sits above the paid plans */ .upgrade-modal-trial { margin: 18px 24px 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(168, 85, 247, 0.10)); border: 1.5px solid rgba(139, 92, 246, 0.45); border-radius: var(--radius-lg); } .upgrade-trial-head { display: flex; align-items: center; gap: 12px; } .upgrade-trial-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(139, 92, 246, 0.18); color: #a855f7; border-radius: 50%; font-size: 16px; } .upgrade-trial-title { font-weight: 600; font-size: 15px; color: var(--text-primary); line-height: 1.2; } .upgrade-trial-perks { font-size: 13px; color: var(--text-primary); line-height: 1.5; word-break: normal; overflow-wrap: anywhere; } .upgrade-trial-perks strong { font-weight: 600; } .upgrade-trial-meta { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .upgrade-trial-btn { width: 100%; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; border: none; padding: 10px 18px; font-weight: 600; font-size: 14px; border-radius: var(--radius-md, 8px); cursor: pointer; } .upgrade-trial-btn:hover:not(:disabled) { filter: brightness(1.08); } .upgrade-trial-btn:disabled { opacity: 0.7; cursor: not-allowed; } /* Plan card — ChatGPT-style: large padding, prominent price, full-width pill CTA right under the price (so the action is above the fold). */ .upgrade-modal-plan { background: var(--surface); border: 1.5px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--transition-base), box-shadow var(--transition-base); display: flex; flex-direction: column; } .upgrade-modal-plan:hover { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(79, 182, 194, 0.10); } /* Recommended plan highlight */ .upgrade-plan-recommended { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(79, 182, 194, 0.18); } .upgrade-plan-top { padding: 24px 22px 20px; position: relative; /* anchor for .upgrade-plan-current-pill */ display: flex; flex-direction: column; /* Pin all three card top-sections to the SAME height so the action buttons (pushed to the bottom by margin-top:auto on .upgrade-plan-action) align on the exact same y-coordinate. Cards are already grid-stretched to equal height, but inside each card .upgrade-plan-features has flex:1 and absorbs the leftover space, leaving .upgrade-plan-top at its natural content height. Subtle differences between Free (1-line price 'Free') and paid (2-line price + 'SEK/month' sub-line) used to leak through as a few-pixel button offset. Fixed min-height removes that variance entirely. */ min-height: 270px; } .upgrade-plan-badge { display: inline-block; align-self: flex-start; padding: 3px 9px; border-radius: 999px; font-size: 0.62rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(79, 182, 194, 0.12); color: var(--primary-color); margin-bottom: 12px; } .upgrade-plan-name { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin-bottom: 14px; letter-spacing: -0.005em; line-height: 1.2; } .upgrade-plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 0; /* Layout: <180 big> All three plan cards share this exact structure (Free renders "0" with the same prefix) so heights stay aligned and the action button below sits at the same y-coordinate across cards. */ } .upgrade-plan-currency { font-size: 0.95rem; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; align-self: flex-start; margin-top: 0.55rem; /* lift the small "kr" toward the top of the big number */ } .upgrade-plan-amount { font-size: 2.25rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .upgrade-plan-period { font-size: 0.78rem; color: var(--text-tertiary); font-weight: 400; letter-spacing: 0; margin-left: 2px; /* Sits inline to the right of the big number, like the "SEK / month" suffix in the design template. Wraps to a new line on narrow cards. */ } .upgrade-plan-tax { display: none; /* superseded by inline VAT note in .upgrade-plan-period */ } /* Short outcome-focused tagline under the plan name (Claude-style) */ .upgrade-plan-tagline { margin-top: -8px; margin-bottom: 16px; font-size: 0.83rem; color: var(--text-secondary); line-height: 1.45; min-height: 2.4em; /* keep card heights consistent across plans */ font-weight: 400; } .upgrade-plan-divider { height: 1px; background: var(--border-color); margin: 0 22px; } /* "Everything in X, plus" label */ .upgrade-plan-includes { padding: 18px 22px 0; font-size: 0.78rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0; text-transform: none; } /* Features list */ .upgrade-plan-features { list-style: none; padding: 12px 22px 22px; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; } .upgrade-plan-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: var(--text-primary); line-height: 1.45; font-weight: 400; } .upgrade-plan-features li i { color: #10b981; font-size: 0.7rem; flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: rgba(16, 185, 129, 0.12); border-radius: 50%; margin-top: 1px; } .upgrade-plan-features li span { color: var(--text-primary); font-weight: 400; } /* Per-plan action button — full-width pill placed in the card header. margin-top:auto pushes it to the bottom of the .upgrade-plan-top flex column, keeping all three cards' buttons on the same baseline regardless of price-area content (Free card has no sub-line). */ .upgrade-plan-action { margin-top: auto; padding-top: 20px; } /* Action buttons — pill-shaped, full-width, sharp typography */ .upgrade-modal-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 18px; border: 1px solid transparent; border-radius: 999px; font-size: 0.875rem; font-weight: 600; font-family: inherit; letter-spacing: -0.005em; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); background: var(--primary-color); color: #fff; box-shadow: none; white-space: nowrap; -webkit-font-smoothing: antialiased; } .upgrade-modal-btn:hover { background: var(--primary-hover); } .upgrade-modal-btn:active { transform: translateY(0.5px); } .upgrade-modal-btn:disabled { cursor: not-allowed; transform: none; } /* Training data note */ .upgrade-modal-note { margin: 14px 24px 24px; padding: 10px 14px; background: rgba(79, 182, 194, 0.06); border: 1px solid rgba(79, 182, 194, 0.15); border-radius: var(--radius-md); font-size: 0.72rem; color: var(--text-secondary); line-height: 1.45; display: flex; align-items: flex-start; gap: 8px; } .upgrade-modal-note i { color: var(--primary-color); font-size: 0.75rem; margin-top: 1px; flex-shrink: 0; } .upgrade-modal-note a { color: var(--primary-color); text-decoration: none; font-weight: 600; margin-left: 2px; } .upgrade-modal-note a:hover { text-decoration: underline; } /* Inline error banner inside upgrade modal */ .upgrade-modal-error { display: flex; align-items: center; gap: 8px; margin: 0 24px 8px; padding: 10px 14px; border-radius: var(--radius-md); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; font-size: 0.85rem; line-height: 1.4; animation: upgradeErrorIn 0.25s ease; } .upgrade-modal-error i { flex-shrink: 0; font-size: 1rem; } @keyframes upgradeErrorIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Footer */ .upgrade-modal-footer { padding: 16px 24px 22px; text-align: center; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; } .upgrade-modal-btn-secondary { display: inline-block; padding: 8px 20px; border: none; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 500; cursor: pointer; background: transparent; color: var(--text-tertiary); transition: color var(--transition-fast), background var(--transition-fast); } .upgrade-modal-btn-secondary:hover { background: var(--surface); color: var(--text-secondary); } /* Footer "Manage payment & invoices" link — visible only to paid users */ .upgrade-modal-btn-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 500; cursor: pointer; background: transparent; color: var(--text-secondary); transition: all var(--transition-fast); } .upgrade-modal-btn-link:hover { border-color: var(--primary); color: var(--primary); background: var(--bg-hover); } .upgrade-modal-btn-link i { font-size: 0.9rem; } /* Current-plan card — visually deprioritized so the user's eye goes to the other (switchable) plans. Keep it readable, just less shouty. */ .upgrade-plan-current { opacity: 0.85; background: var(--bg-input, var(--surface)); } .upgrade-plan-current .upgrade-plan-name, .upgrade-plan-current .upgrade-plan-amount { color: var(--text-secondary); } /* "Current plan" pill on the card header — hidden because the CTA button below already says "Your current plan". Keeping the rule (display:none) instead of removing it so existing markup that still renders the span doesn't break layout. */ .upgrade-plan-current-pill { display: none; } /* All three card CTAs share the same pill shape, height and border weight so the cards line up visually. Color-coded by intent: - Current plan → muted, non-actionable - Switch up → primary teal outline (upgrade) - Switch down → neutral outline (downgrade / cancel) - Get plan → solid primary (fresh purchase) */ .upgrade-current-btn, .upgrade-switch-btn, .upgrade-downgrade-btn { background: transparent !important; border: 1px solid var(--border-color) !important; box-shadow: none !important; font-weight: 500 !important; } .upgrade-current-btn { color: var(--text-secondary) !important; cursor: default !important; opacity: 1; } .upgrade-current-btn:hover { background: transparent !important; } .upgrade-switch-btn { color: var(--primary-color) !important; border-color: var(--primary-color) !important; } .upgrade-switch-btn:hover:not(:disabled) { background: rgba(79, 182, 194, 0.08) !important; border-color: var(--primary-color) !important; color: var(--primary-color) !important; } .upgrade-downgrade-btn { color: var(--text-secondary) !important; } .upgrade-downgrade-btn:hover:not(:disabled) { background: var(--surface) !important; color: var(--text-primary) !important; border-color: var(--text-tertiary) !important; } /* Armed confirm state — turns the button into a clear "click again to confirm" affordance. Auto-disarms after 5s. */ .upgrade-switch-confirm { background: var(--primary-color) !important; color: #fff !important; border-color: var(--primary-color) !important; animation: upgradeSwitchPulse 1.4s ease-in-out infinite; } @keyframes upgradeSwitchPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 182, 194, 0.45); } 50% { box-shadow: 0 0 0 6px rgba(79, 182, 194, 0); } } /* "Switch to X" / "Downgrade in billing portal" CTA — neutral, not as loud as the primary "Get X" checkout button so the user understands they're moving sideways, not making a fresh purchase. */ .upgrade-portal-btn { background: var(--surface) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; } .upgrade-portal-btn:hover { border-color: var(--primary) !important; color: var(--primary) !important; } /* ────────────────────────────────────────────────────────────────────────── Switch-confirmation modal — shown after the user clicks "Switch to X" on a paid plan card. Renders the Stripe-computed prorated invoice (preview) so the user sees the exact charge BEFORE we hit the card. ────────────────────────────────────────────────────────────────────────── */ .switch-confirm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; z-index: 10001; /* above .upgrade-modal-overlay */ padding: 16px; animation: upgradeOverlayIn 0.2s ease; -webkit-font-smoothing: antialiased; } .switch-confirm-card { background: var(--background); border: 1px solid var(--border-color); border-radius: var(--radius-xl); width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; position: relative; padding: 28px 28px 24px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--border-color); animation: upgradeModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .switch-confirm-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-tertiary); font-size: 1.4rem; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); line-height: 1; } .switch-confirm-close:hover { background: var(--surface); color: var(--text-primary); } .switch-confirm-head { margin-bottom: 18px; } .switch-confirm-title { font-size: 1.2rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 6px; } .switch-confirm-sub { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.45; } .switch-confirm-summary { background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; } .switch-confirm-summary-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin-bottom: 2px; } .switch-confirm-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; font-size: 0.875rem; } .switch-confirm-label-block { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .switch-confirm-label { color: var(--text-primary); flex: 1; line-height: 1.4; font-weight: 500; } .switch-confirm-sublabel { font-size: 0.78rem; color: var(--text-tertiary); line-height: 1.4; } .switch-confirm-value { color: var(--text-primary); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; } .switch-confirm-credit { color: #10b981; } .switch-confirm-divider { height: 1px; background: var(--border-color); margin: 2px 0; } .switch-confirm-row-total .switch-confirm-label { color: var(--text-primary); font-weight: 600; font-size: 0.95rem; } .switch-confirm-row-total .switch-confirm-value { font-weight: 700; font-size: 1.05rem; } .switch-confirm-note { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 18px; padding: 10px 14px; background: rgba(127, 127, 127, 0.05); border-radius: var(--radius-md); } .switch-confirm-note strong { color: var(--text-primary); font-weight: 600; } .switch-confirm-error { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-md); background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; font-size: 0.85rem; line-height: 1.4; margin-bottom: 14px; } .switch-confirm-error i { flex-shrink: 0; } .switch-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; } .switch-confirm-cancel, .switch-confirm-confirm { padding: 10px 18px; border-radius: 999px; font-size: 0.875rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); white-space: nowrap; letter-spacing: -0.005em; } .switch-confirm-cancel { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); } .switch-confirm-cancel:hover:not(:disabled) { background: var(--surface); color: var(--text-primary); } .switch-confirm-confirm { background: var(--primary-color); color: #fff; border: 1px solid var(--primary-color); } .switch-confirm-confirm:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); } .switch-confirm-cancel:disabled, .switch-confirm-confirm:disabled { opacity: 0.6; cursor: not-allowed; } @media (max-width: 480px) { .switch-confirm-card { padding: 24px 20px 20px; } .switch-confirm-actions { flex-direction: column-reverse; } .switch-confirm-cancel, .switch-confirm-confirm { width: 100%; text-align: center; } } /* Responsive — stack plans vertically on small screens */ @media (max-width: 560px) { .upgrade-modal { width: 95%; max-width: 400px; border-radius: var(--radius-lg); } .upgrade-modal-plans { grid-template-columns: 1fr; gap: 12px; padding: 16px 16px 0; } .upgrade-modal-header { padding: 24px 20px 0; } .upgrade-modal-footer { padding: 14px 16px 18px; } .upgrade-modal-title { font-size: 1.15rem; } .upgrade-plan-amount { font-size: 1.4rem; } } /* ─── Dev Plan Switcher (dev mode only) ─── */ .dev-plan-switcher { position: fixed; bottom: 12px; left: 12px; z-index: 99999; display: flex; align-items: center; gap: 6px; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; padding: 4px 10px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); opacity: 0.85; transition: opacity 0.2s; } .dev-plan-switcher:hover { opacity: 1; } .dev-plan-label { font-size: 14px; } .dev-plan-switcher select { background: #2a2a3e; color: #e0e0e0; border: 1px solid #444; border-radius: 4px; padding: 3px 6px; font-size: 12px; cursor: pointer; outline: none; } .dev-plan-switcher select:focus { border-color: var(--primary-color); } /* ========================================================================= PROJECTS VIEW ========================================================================= */ .project-view-overlay { flex: 1; min-height: 0; overflow-y: auto; background: var(--background); position: relative; } .project-detail { display: flex; height: 100%; max-width: 1200px; margin: 0 auto; } .project-detail-main { flex: 1; min-width: 0; padding: 24px 48px; overflow-y: auto; display: flex; flex-direction: column; } .project-detail-sidebar { width: 340px; flex-shrink: 0; border-left: 1px solid var(--border-color); padding: 28px 24px; overflow-y: auto; background: var(--surface); } /* Back row */ .project-back-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; } .project-sidebar-toggle { position: absolute; top: 16px; left: 12px; z-index: 2; display: inline-flex; /* Always visible — project view hides the chat-header where the normal sidebar toggle lives. */ align-items: center; justify-content: center; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 16px; padding: 6px 8px; border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); } .project-sidebar-toggle:hover { color: var(--text-primary); background: var(--surface); } /* Header */ .project-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .project-back-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 16px; padding: 6px 8px; border-radius: var(--radius-sm); transition: color var(--transition-fast), background var(--transition-fast); } .project-back-btn:hover { color: var(--text-primary); background: var(--surface); } .project-back-btn i { font-size: 16px; } .project-detail-title { font-size: 28px; font-weight: 700; color: var(--text-primary); flex: 1; margin: 0; letter-spacing: -0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .project-detail-title-input { font-size: 28px; font-weight: 700; color: var(--text-primary); background: var(--background); border: 1px solid var(--primary-color); border-radius: var(--radius-md); padding: 2px 10px; outline: none; flex: 1; min-width: 0; letter-spacing: -0.01em; font-family: inherit; } .project-detail-title-input:focus { box-shadow: 0 0 0 2px rgba(79, 182, 194, 0.2); } .project-detail-actions { display: flex; gap: 4px; flex-shrink: 0; } .project-action-btn { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); font-size: 14px; transition: background var(--transition-fast), color var(--transition-fast); } .project-action-btn:hover { background: var(--surface); color: var(--text-primary); } .project-delete-btn:hover { color: #ef4444; } .project-detail-desc { color: var(--text-secondary); font-size: 14px; margin: 0 0 8px 0; line-height: 1.5; } /* Chat input area (holds the moved real input bar) */ .project-chat-area { margin-top: clamp(32px, 10vh, 120px); margin-bottom: 32px; } .project-chat-area .chat-input-container { position: relative; padding: 0; border-top: none; background: none; max-width: 100%; } .project-chat-area .chat-input-box { border: 1px solid var(--border-color); border-radius: 16px; background: var(--surface-elevated); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04); } .project-chat-area .chat-input-box:focus-within { border-color: var(--primary-color); box-shadow: 0 2px 12px rgba(79, 182, 194, 0.10); } /* Force dropdowns to open downward inside the project view (input is near the top) */ .project-chat-area .action-dropdown { bottom: auto; top: calc(100% + 8px); } /* Project chats list */ .project-chats-list { margin-top: 8px; border-top: 1px solid var(--border-color); padding-top: 16px; } .project-section-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0 0 12px 0; display: flex; align-items: center; gap: 8px; } .project-chat-count { background: var(--surface); color: var(--text-secondary); font-size: 11px; padding: 2px 6px; border-radius: 10px; font-weight: 500; } /* project-chat-item styles at end of file */ .project-chat-item:last-child { border-bottom: none; } .project-chat-item:hover { background: var(--surface); border-radius: var(--radius-md); } .project-chat-item-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .project-chat-item-title { color: var(--text-primary); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .project-chat-item-title-input { font-size: 14px; font-weight: 500; color: var(--text-primary); background: var(--background); border: 1px solid var(--primary-color); border-radius: var(--radius-sm); padding: 2px 8px; outline: none; width: 100%; box-sizing: border-box; } .project-chat-item-title-input:focus { box-shadow: 0 0 0 2px rgba(79, 182, 194, 0.2); } .project-chat-item.editing .project-chat-item-more { display: none; } .project-chat-item.editing .project-chat-item-time { display: none; } .project-chat-item-time { color: var(--text-tertiary); font-size: 12px; margin-top: 2px; } .project-empty { color: var(--text-tertiary); font-size: 13px; font-style: italic; margin: 8px 0; } /* Sidebar sections */ .project-sidebar-section { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--border-color); } .project-sidebar-section:last-child { border-bottom: none; margin-bottom: 0; } .project-sidebar-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .project-sidebar-section-header h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; } .project-sidebar-edit-btn, .project-add-file-btn { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 4px 6px; border-radius: var(--radius-sm); font-size: 16px; transition: background var(--transition-fast), color var(--transition-fast); } .project-sidebar-edit-btn:hover, .project-add-file-btn:hover { background: var(--surface-elevated); color: var(--text-primary); } /* Instructions */ .project-instructions-text { color: var(--text-secondary); font-size: 13px; line-height: 1.6; margin: 0; white-space: pre-wrap; } .project-instructions-input { width: 100%; min-height: 120px; background: var(--background); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-size: 13px; padding: 12px; resize: vertical; outline: none; font-family: inherit; line-height: 1.5; box-sizing: border-box; } .project-instructions-input:focus { border-color: var(--primary-color); } /* Capacity bar */ .project-capacity { margin-bottom: 12px; } .project-capacity-bar { height: 4px; background: var(--border-color); border-radius: 2px; overflow: hidden; margin-bottom: 4px; } .project-capacity-fill { height: 100%; background: var(--primary-color); border-radius: 2px; transition: width 0.3s; } .project-capacity-text { font-size: 11px; color: var(--text-tertiary); } /* File cards */ .project-files-list { display: flex; flex-wrap: wrap; gap: 8px; } .project-file-card { width: calc(50% - 4px); background: var(--background); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; transition: border-color var(--transition-fast); min-width: 0; } .project-file-card:hover { border-color: var(--primary-color); } .project-file-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .project-file-card-name { font-size: 12px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .project-file-card-meta { font-size: 11px; color: var(--text-tertiary); } .project-file-card-footer { display: flex; align-items: center; justify-content: space-between; } .project-file-card-type { font-size: 10px; font-weight: 600; color: var(--text-secondary); background: var(--surface); padding: 2px 6px; border-radius: 4px; text-transform: uppercase; } .project-file-delete-btn { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 2px 4px; border-radius: 4px; font-size: 12px; opacity: 0; transition: opacity var(--transition-fast), color var(--transition-fast); } .project-file-card:hover .project-file-delete-btn { opacity: 1; } .project-file-delete-btn:hover { color: #ef4444; } /* Inline upload placeholder card */ .project-file-card-uploading { border-style: dashed; opacity: 0.85; } .project-file-card-uploading .project-file-card-name { color: var(--text-secondary); } .project-file-upload-spinner { color: var(--primary-color); font-size: 12px; display: inline-flex; align-items: center; } .project-file-card-error { border-color: #ef4444; opacity: 1; } .project-file-card-error .project-file-card-meta { color: #ef4444; } .project-file-card-error .project-file-upload-spinner, .project-file-card-error i.fa-triangle-exclamation { color: #ef4444; } /* Persistent state: file uploaded but text extraction failed (e.g. scanned PDF the OCR could not read). */ .project-file-card-extract-failed { border-color: #ef4444; background: rgba(239, 68, 68, 0.04); } .project-file-card-extract-failed .project-file-card-meta { color: #ef4444; } .project-file-card-error-badge { display: inline-flex; align-items: center; margin-right: 6px; color: #ef4444; font-size: 13px; cursor: help; } /* Background extract / index in progress: file is uploaded but the server is still processing it (text extraction + chunk embedding). Frontend polls /resources/:id/status until it settles. */ .project-file-card-indexing { border-color: rgba(79, 182, 194, 0.5); background: rgba(79, 182, 194, 0.05); } .project-file-card-indexing .project-file-card-meta { color: var(--primary-color); } .project-file-card-state-badge { display: inline-flex; align-items: center; margin-right: 6px; color: var(--primary-color); font-size: 12px; } /* Sidebar project count badge */ .chat-group-count { font-size: 10px; color: var(--text-tertiary); background: var(--surface); padding: 1px 5px; border-radius: 8px; margin-left: auto; margin-right: 4px; } /* Legacy groups section */ .legacy-groups-label { padding: 8px 12px 4px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px solid var(--border-color); margin-top: 4px; } .legacy-group { opacity: 0.8; } .legacy-group .chat-group-header { font-style: italic; } .legacy-group-chats { padding-left: 8px; } .legacy-group-chats .chat-item { font-size: 13px; } /* Responsive — stack project layout on tablets + phones */ @media (max-width: 1024px) { .project-detail { flex-direction: column; } .project-detail-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border-color); } .project-detail-main { padding: 16px 20px; } .project-detail-sidebar { padding: 16px 20px; } .project-file-card { width: 100%; } .project-detail-title { font-size: 22px; } } /* ── Phone-sized: tighten the project landing page so nothing overlaps ── */ @media (max-width: 640px) { .project-view-overlay { /* Avoid content sitting under the iOS home indicator */ padding-bottom: env(safe-area-inset-bottom, 0); } /* Flatten the two-column layout so we can reorder all sections together */ .project-detail { display: flex; flex-direction: column; padding: 12px 14px 20px; gap: 0; } .project-detail-main, .project-detail-sidebar { /* display: contents lets us treat their children as direct children of .project-detail, which lets us interleave the input/chats/instructions order with `order` below. */ display: contents; } /* Mobile reading order: 1. back → 2. title row → 3. desc 4. instructions → 5. files → 6. chats list 7. chat input (composer, last so it sits at the bottom and isn't covered) */ .project-back-row { order: 1; margin: 0 0 8px; gap: 4px; padding-left: 38px; } .project-detail-header { order: 2; flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 6px; } .project-detail-desc { order: 3; font-size: 13px; margin-bottom: 12px; } .project-sidebar-section { order: 4; margin-bottom: 14px; } .project-chats-list { order: 5; margin-top: 4px; padding-top: 12px; } .project-chat-area { order: 6; margin: 16px 0 0; } .project-back-btn { font-size: 13px; padding: 4px 6px; } .project-back-btn span { font-size: 12px; } .project-detail-title { font-size: 18px; line-height: 1.25; word-break: break-word; } .project-detail-title-input { font-size: 18px; } .project-detail-actions { flex-shrink: 0; gap: 4px; } .project-detail-actions .project-action-btn { width: 30px; height: 30px; font-size: 13px; } /* Visually separate the composer at the bottom */ .project-chat-area { border-top: 1px solid var(--border-color); padding-top: 16px; } .project-chat-area .chat-input-container { padding: 0; } .project-section-title { font-size: 13px; } } /* ── Touch devices (tablets + phones): collapse action bar behind + button ── */ @media (pointer: coarse) { .action-expand-btn { display: flex !important; } .action-item.collapsible-action { display: none; } .action-expand-popup { display: none; position: absolute; bottom: calc(100% + 8px); left: 8px; background: var(--surface-elevated, #fff); border: 1px solid var(--border-color); border-radius: 14px; padding: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); z-index: 100; flex-direction: row; flex-wrap: wrap; gap: 6px; min-width: 160px; max-width: calc(100vw - 32px); animation: popupFadeIn 0.15s ease; } .action-expand-popup.open { display: flex; } .action-expand-popup .action-item.collapsible-action { display: block; } .action-expand-popup .action-item.collapsible-action.hidden { display: none !important; } .action-expand-backdrop { display: none; position: fixed; inset: 0; z-index: 99; } .action-expand-backdrop.open { display: block; } /* In project view, popup opens downward (input is near the top) */ .project-chat-area .action-expand-popup { bottom: auto; top: calc(100% + 8px); } .action-pill { padding: 5px 8px; font-size: 11px; } .action-pill.icon-only { min-width: 30px; height: 30px; padding: 5px 7px; } .pill-label { max-width: 80px; } } /* ── Project sidebar body (expand/collapse) ── */ .chat-group-body { padding-left: 0; overflow: hidden; } .chat-group-body.collapsed { display: none; } /* ── Create Project Modal ── */ .create-project-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; animation: fadeIn 0.15s ease; } .create-project-modal { background: var(--background); border-radius: var(--radius-lg, 16px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2); width: 90%; max-width: 480px; overflow: hidden; animation: slideUp 0.2s ease; } .create-project-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 12px; } .create-project-modal-header h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text-primary); } .create-project-modal-close { background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 18px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); transition: background 0.15s, color 0.15s; } .create-project-modal-close:hover { background: var(--surface-elevated); color: var(--text-primary); } .create-project-modal-body { padding: 0 24px; } .create-project-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: 8px; } .create-project-name-input { width: 100%; padding: 12px 14px; font-size: 15px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--surface); color: var(--text-primary); outline: none; transition: border-color 0.2s; box-sizing: border-box; } .create-project-name-input:focus { border-color: var(--primary-color); } .create-project-name-input::placeholder { color: var(--text-tertiary); } .create-project-hint { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; padding: 12px 14px; background: var(--surface); border-radius: var(--radius-md); font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .create-project-hint i { color: var(--text-tertiary); margin-top: 2px; flex-shrink: 0; } .create-project-modal-footer { padding: 16px 24px 20px; display: flex; justify-content: flex-end; } .create-project-submit-btn { padding: 10px 20px; font-size: 14px; font-weight: 600; border: none; border-radius: var(--radius-md); background: var(--primary-color); color: #fff; cursor: pointer; transition: opacity 0.2s, background 0.2s; } .create-project-submit-btn:hover:not(:disabled) { opacity: 0.9; } .create-project-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; } @keyframes slideUp { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Sidebar project folder toggle + sub-chats ── */ .chat-group-folder { background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 14px; padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--radius-sm); transition: color 0.15s, background 0.15s; } .chat-group-folder:hover { color: var(--text-primary); background: var(--surface); } .chat-group-folder.expanded { color: var(--text-primary); } .chat-group-name { cursor: pointer; } .chat-group-name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Sub-chat items inside expanded project */ .chat-group-chat-item { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 32px; cursor: pointer; border-radius: var(--radius-sm); transition: background 0.12s; position: relative; } .chat-group-chat-item:hover { background: var(--surface-elevated); } .chat-group-chat-item.active { background: var(--surface-elevated); } .chat-group-chat-title { flex: 1; font-size: 13px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .chat-group-chat-title-input { flex: 1; font-size: 13px; color: var(--text-primary); background: var(--background); border: 1px solid var(--primary-color); border-radius: var(--radius-sm); padding: 1px 6px; outline: none; min-width: 0; } .chat-group-chat-title-input:focus { box-shadow: 0 0 0 2px rgba(79, 182, 194, 0.2); } .chat-group-chat-item.editing .chat-group-chat-more { display: none; } .chat-group-chat-more { background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 13px; padding: 2px; border-radius: var(--radius-sm); opacity: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; transition: opacity 0.12s, color 0.12s; } .chat-group-chat-item:hover .chat-group-chat-more { opacity: 1; } .chat-group-chat-more:hover { color: var(--text-primary); background: var(--surface); } .chat-group-show-more { padding: 6px 8px 6px 32px; font-size: 12px; color: var(--text-tertiary); cursor: pointer; transition: color 0.15s; } .chat-group-show-more:hover { color: var(--primary-color); } .chat-group-empty { padding: 6px 8px 6px 32px; font-size: 12px; color: var(--text-tertiary); font-style: italic; } /* Project detail page: three-dot menu on chat items */ .project-chat-item { display: flex; align-items: center; gap: 10px; padding: 12px 4px; cursor: pointer; transition: background var(--transition-fast); border-bottom: 1px solid var(--border-color); position: relative; } .project-chat-item-more { background: transparent; border: none; color: var(--text-tertiary); cursor: pointer; font-size: 14px; padding: 4px; border-radius: var(--radius-sm); opacity: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; transition: opacity 0.12s, color 0.12s, background 0.12s; } .project-chat-item:hover .project-chat-item-more { opacity: 1; } .project-chat-item-more:hover { color: var(--text-primary); background: var(--surface-elevated); } /* ============================================================================= Chat Search ============================================================================= */ /* Sidebar search button */ .search-chats-btn { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 6px 12px 2px; padding: 9px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); font-size: 13px; cursor: pointer; transition: all var(--transition-fast); flex-shrink: 0; } .search-chats-btn i { font-size: 13px; opacity: 0.7; } .search-chats-btn span { flex: 1; text-align: left; } .search-chats-btn:hover { background: var(--surface); color: var(--text-primary); border-color: var(--primary-color); } /* Modal overlay */ .search-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding-top: min(18vh, 140px); background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: searchOverlayIn 0.15s ease; } .search-modal-overlay.hidden { display: none; } @keyframes searchOverlayIn { from { opacity: 0; } to { opacity: 1; } } /* Modal card */ .search-modal { width: 94%; max-width: 580px; max-height: 70vh; background: var(--surface-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; overflow: hidden; animation: searchModalIn 0.18s ease; } @keyframes searchModalIn { from { opacity: 0; transform: translateY(-12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Modal header */ .search-modal-header { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 6px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; } .search-modal-input-wrap { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 8px; } .search-modal-icon { font-size: 15px; color: var(--text-tertiary); flex-shrink: 0; } .search-modal-input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; color: var(--text-primary); padding: 10px 0; font-family: inherit; } .search-modal-input::placeholder { color: var(--text-tertiary); } .search-modal-close { width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; transition: all var(--transition-fast); } .search-modal-close:hover { background: var(--surface); color: var(--text-primary); } /* Results area */ .search-modal-results { flex: 1; overflow-y: auto; padding: 6px; overscroll-behavior: contain; } /* Group labels */ .search-group-label { padding: 10px 10px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-tertiary); } /* Result item */ .search-result-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 10px; border: none; border-radius: var(--radius-md); background: transparent; text-align: left; cursor: pointer; transition: background var(--transition-fast); font-family: inherit; } .search-result-item:hover { background: var(--surface); } .search-result-left { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1; } .search-result-icon { margin-top: 2px; font-size: 14px; color: var(--text-tertiary); flex-shrink: 0; } .search-result-text { min-width: 0; flex: 1; } .search-result-title { font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .search-result-snippet { margin-top: 3px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-result-project { margin-top: 4px; font-size: 11.5px; color: var(--primary-color); display: flex; align-items: center; gap: 4px; } .search-result-project i { font-size: 10px; } .search-result-date { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; margin-top: 2px; } /* Highlight matches */ .search-result-title mark, .search-result-snippet mark { background: rgba(250, 204, 21, 0.35); color: inherit; border-radius: 2px; padding: 0 1px; } @media (prefers-color-scheme: dark) { .search-result-title mark, .search-result-snippet mark { background: rgba(250, 204, 21, 0.25); } } /* Placeholder & new-chat button inside search */ .search-placeholder { padding: 4px 4px 2px; } .search-new-chat-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: none; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; transition: background var(--transition-fast); } .search-new-chat-btn:hover { background: var(--surface); } .search-new-chat-btn i { font-size: 14px; color: var(--primary-color); } /* Loading & empty states */ .search-loading, .search-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--text-tertiary); } .search-loading i { margin-right: 6px; } /* ============================================================================ IMAGE GENERATION (Phase 4) — sidebar button, image-mode controls, image grid, lightbox, settings tab, recents icon ============================================================================ */ /* Sidebar "Create image" button — uses .search-chats-btn base style. Add a subtle accent tint on hover so it's distinct from "Search chats". */ .search-chats-btn.new-image-btn:hover i { opacity: 1; } /* Sidebar "New project" button — same secondary style as New chat / Create image. */ .search-chats-btn.new-project-btn:hover i { opacity: 1; } /* Active mode highlight on sidebar mode-switch buttons (New chat / Create image). The same green border that appears on hover becomes permanent for the currently-selected mode so the user always knows which mode they are in. */ .search-chats-btn.mode-active { border-color: var(--primary-color); color: var(--text-primary); background: rgba(79, 182, 194, 0.08); } .search-chats-btn.mode-active i { opacity: 1; color: var(--primary-color); } /* Same treatment on the collapsed sidebar strip buttons. */ .strip-btn.mode-active { color: var(--primary-color); background: rgba(79, 182, 194, 0.12); border: 1px solid var(--primary-color); } /* Image-mode action-bar dropdowns: default to opening downward (below the trigger pill). When there isn't enough room below the viewport, JS adds the `.open-up` class to flip them upward — this keeps them on-screen regardless of where the prompt box currently sits. */ #image-model-dropdown, #image-size-dropdown, #image-count-dropdown { bottom: auto; top: calc(100% + 8px); } #image-model-dropdown.open-up, #image-size-dropdown.open-up, #image-count-dropdown.open-up { top: auto; bottom: calc(100% + 8px); } /* ── Strict mode separation ─────────────────────────────────────────────── */ /* In chat mode (default) image-mode-only widgets are hidden via inline style. In image mode, hide chat-only widgets entirely. */ .chat-container.image-mode .chat-mode-only, .chat-container.image-mode #thinking-toggle-bar, .chat-container.image-mode #memory-toggle-bar, .chat-container.image-mode #perf-selector, .chat-container.image-mode #rag-toggle-bar, .chat-container.image-mode #rag-doc-selector, .chat-container.image-mode #mcp-tools-bar, .chat-container.image-mode #skills-bar, .chat-container.image-mode #web-access-bar { display: none !important; } .chat-container.image-mode .image-mode-only { display: inline-flex !important; } .chat-container.image-mode #chat-input { /* Bigger placeholder hint room for prompt-like input */ min-height: 48px; } /* ── Recents: image chat icon prefix ───────────────────────────────────── */ .chat-item-icon { color: var(--text-tertiary); margin-right: 6px; font-size: 11px; flex-shrink: 0; } .chat-item.image-chat .chat-item-icon { color: #8b5cf6; } /* ── Image grid renderer (1×1, 2×1, 2×2) ──────────────────────────────── */ .image-grid { display: grid; gap: 6px; margin: 8px 0; max-width: 600px; } .image-grid.image-grid-1 { grid-template-columns: 1fr; } .image-grid.image-grid-2 { grid-template-columns: 1fr 1fr; } .image-grid.image-grid-3, .image-grid.image-grid-4 { grid-template-columns: 1fr 1fr; } .image-grid-cell { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); border-radius: 8px; overflow: hidden; cursor: zoom-in; border: 1px solid var(--border-color); } .image-grid-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; } .image-grid-cell:hover img { transform: scale(1.02); } /* Dev/preview stub badge \u2014 makes it obvious that the rendered image is a placeholder photo (random, unrelated to the prompt) used because no real image-generation gateway is configured in this environment. */ .image-grid-cell-stub::before { content: 'Preview demo \u00b7 random photo'; position: absolute; top: 8px; left: 8px; z-index: 2; padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; text-transform: uppercase; } .image-grid-cell.image-expired { display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); font-size: 12px; text-align: center; padding: 16px; cursor: default; } /* Per-image toolbar (download only \u2014 the cell itself opens the lightbox) */ .image-grid-toolbar { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; } .image-grid-cell:hover .image-grid-toolbar { opacity: 1; } .image-grid-tool-btn { background: rgba(0, 0, 0, 0.45); color: #fff; border: none; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.15s, color 0.15s; } .image-grid-tool-btn:hover { background: rgba(0, 0, 0, 0.7); color: var(--primary-color); } .image-grid-tool-btn:active { transform: scale(0.95); } /* Make the FontAwesome icon (or its injected SVG) transparent to pointer events so the