From 958ccdc2e1f41d56023c4bb1f84189322eb01219 Mon Sep 17 00:00:00 2001
From: fretuks <frederik@spirgi.com>
Date: Tue, 30 Jun 2026 10:36:56 +0200
Subject: [PATCH] fix styling

---
 public/style.css | 330 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 330 insertions(+)

diff --git a/public/style.css b/public/style.css
index 97c2d47..1a1c617 100644
--- a/public/style.css
+++ b/public/style.css
@@ -6044,3 +6044,333 @@ body:not([data-theme]) #marketUserPersonaList {
     max-height: none;
     overflow: visible;
 }
+
+/* Dark mode normalization must stay last; earlier theme-specific component rules are mixed with light-mode colors. */
+body[data-theme-mode="dark"] {
+    --bg: #0f1218;
+    --bg-soft: #151a22;
+    --surface: rgba(23, 28, 37, 0.88);
+    --surface-strong: rgba(27, 33, 43, 0.94);
+    --text: #eef3ff;
+    --text-soft: #c2ccdc;
+    --text-muted: #96a2b6;
+    --line: rgba(238, 243, 255, 0.1);
+    --line-strong: rgba(238, 243, 255, 0.18);
+    --shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
+    --bg-gradient: linear-gradient(180deg, #0f1218 0%, #151a22 100%);
+    --bg-overlay: linear-gradient(rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015));
+    --hero-gradient: linear-gradient(180deg, rgba(20, 25, 34, 0.98), rgba(27, 33, 43, 0.94));
+    --overview-gradient: var(--hero-gradient);
+    --panel-subtle: rgba(24, 29, 39, 0.74);
+    --panel-soft: rgba(30, 36, 48, 0.82);
+    --panel-soft-strong: rgba(35, 42, 55, 0.92);
+    --chip-surface: rgba(31, 37, 49, 0.86);
+    --chip-muted: rgba(238, 243, 255, 0.07);
+    --field-surface: rgba(18, 22, 31, 0.96);
+    --field-surface-strong: rgba(18, 22, 31, 0.98);
+    --field-focus-surface: rgba(24, 29, 39, 0.98);
+    --status-surface: rgba(26, 31, 41, 0.92);
+    --status-border: rgba(238, 243, 255, 0.08);
+    --secondary-surface: color-mix(in srgb, var(--brand) 14%, rgba(24, 29, 39, 0.9));
+    --secondary-surface-strong: color-mix(in srgb, var(--brand) 24%, rgba(24, 29, 39, 0.94));
+    --secondary-border: color-mix(in srgb, var(--brand) 36%, rgba(238, 243, 255, 0.12));
+    --secondary-border-strong: color-mix(in srgb, var(--brand) 50%, rgba(238, 243, 255, 0.16));
+    --item-hover-border: color-mix(in srgb, var(--brand) 34%, rgba(238, 243, 255, 0.12));
+    --item-active-border: color-mix(in srgb, var(--brand) 48%, rgba(238, 243, 255, 0.16));
+    --overlay-surface: linear-gradient(180deg, rgba(9, 12, 18, 0.84), rgba(17, 22, 31, 0.92));
+    --overlay-card-surface: linear-gradient(155deg, rgba(24, 29, 39, 0.98), rgba(31, 37, 49, 0.96));
+    --overlay-card-border: rgba(238, 243, 255, 0.12);
+    --overlay-card-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
+    --prompt-chip-surface: rgba(31, 37, 49, 0.9);
+    --messages-surface: rgba(22, 27, 37, 0.78);
+    --pill-surface: rgba(31, 37, 49, 0.88);
+    --pill-border: rgba(238, 243, 255, 0.1);
+    --tag-surface: rgba(238, 243, 255, 0.07);
+    --tag-ai-surface: color-mix(in srgb, var(--brand) 16%, rgba(238, 243, 255, 0.04));
+    --tag-user-surface: color-mix(in srgb, var(--success) 18%, rgba(238, 243, 255, 0.04));
+    --panel-elevated: rgba(27, 33, 43, 0.98);
+    --sidebar-bg: rgba(22, 27, 37, 0.9);
+    --sidebar-border: rgba(238, 243, 255, 0.09);
+    --message-user-text: #f7fbff;
+    --message-bot-bg: rgba(27, 33, 43, 0.98);
+    --message-bot-text: #eef3ff;
+    --composer-bg: rgba(18, 22, 31, 0.98);
+    --composer-shadow: 0 -16px 36px rgba(0, 0, 0, 0.22);
+    --nav-surface: rgba(20, 25, 34, 0.92);
+    --nav-item-surface: rgba(31, 37, 49, 0.9);
+    --editorial-surface: linear-gradient(180deg, rgba(25, 30, 40, 0.98), rgba(31, 37, 49, 0.95));
+    --ui-bg: var(--bg-gradient);
+    --ui-surface: var(--surface-strong);
+    --ui-surface-raised: var(--panel-elevated);
+    --ui-surface-soft: var(--panel-soft);
+    --ui-border: var(--line);
+    --ui-border-strong: var(--line-strong);
+    --ui-text: var(--text);
+    --ui-text-secondary: var(--text-soft);
+    --ui-text-muted: var(--text-muted);
+    --ui-accent: var(--brand);
+    --ui-accent-strong: var(--brand-strong);
+    --ui-danger: var(--error);
+    --ui-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.24);
+    --ui-shadow-md: 0 22px 58px rgba(0, 0, 0, 0.34);
+    --ui-shadow-lg: 0 34px 92px rgba(0, 0, 0, 0.48);
+    background: var(--ui-bg);
+    color: var(--ui-text);
+    color-scheme: dark;
+}
+
+body[data-theme-mode="dark"][data-theme="fakegpt"] {
+    --bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%);
+    --panel-elevated: rgba(18, 24, 21, 0.98);
+    --nav-surface: rgba(13, 18, 16, 0.94);
+    --nav-item-surface: rgba(20, 27, 24, 0.92);
+    --field-surface: rgba(10, 15, 13, 0.96);
+    --field-surface-strong: rgba(10, 15, 13, 0.98);
+    --message-bot-bg: rgba(18, 24, 21, 0.98);
+    --message-bot-text: #e8fff7;
+    --composer-bg: rgba(10, 15, 13, 0.98);
+    --editorial-surface: linear-gradient(180deg, rgba(14, 20, 18, 0.98), rgba(18, 24, 21, 0.95));
+}
+
+body[data-theme-mode="dark"][data-theme="fraud"] {
+    --bg-gradient: linear-gradient(180deg, #17120f 0%, #241a14 100%);
+    --text: #f5ece2;
+    --text-soft: #d6c2ad;
+    --text-muted: #ad9279;
+    --line: rgba(245, 220, 197, 0.1);
+    --line-strong: rgba(245, 220, 197, 0.18);
+    --panel-elevated: rgba(39, 29, 23, 0.98);
+    --nav-surface: rgba(34, 25, 20, 0.92);
+    --nav-item-surface: rgba(48, 36, 29, 0.92);
+    --field-surface: rgba(31, 23, 18, 0.96);
+    --field-surface-strong: rgba(31, 23, 18, 0.98);
+    --message-bot-bg: rgba(43, 32, 25, 0.98);
+    --message-bot-text: #f5ece2;
+    --composer-bg: rgba(31, 23, 18, 0.98);
+    --editorial-surface: linear-gradient(180deg, rgba(39, 29, 23, 0.97), rgba(51, 38, 30, 0.94));
+}
+
+body[data-theme-mode="dark"][data-theme="germini"] {
+    --bg-gradient: linear-gradient(180deg, #12162a 0%, #1e2440 100%);
+    --panel-elevated: rgba(24, 27, 52, 0.94);
+    --nav-surface: rgba(21, 24, 47, 0.88);
+    --nav-item-surface: rgba(35, 39, 72, 0.84);
+    --field-surface: rgba(21, 24, 47, 0.9);
+    --field-surface-strong: rgba(21, 24, 47, 0.96);
+    --message-bot-bg: rgba(29, 33, 61, 0.94);
+    --message-bot-text: #eef3ff;
+    --composer-bg: rgba(21, 24, 47, 0.96);
+    --editorial-surface: linear-gradient(180deg, rgba(26, 30, 58, 0.94), rgba(37, 40, 74, 0.9));
+}
+
+body[data-theme-mode="dark"][data-theme="slopilot"] {
+    --bg-gradient: linear-gradient(180deg, #0d1524 0%, #14213a 100%);
+    --panel-elevated: rgba(18, 28, 48, 0.98);
+    --nav-surface: rgba(15, 25, 44, 0.94);
+    --nav-item-surface: rgba(24, 39, 66, 0.92);
+    --field-surface: rgba(13, 22, 39, 0.96);
+    --field-surface-strong: rgba(13, 22, 39, 0.98);
+    --message-bot-bg: rgba(18, 30, 52, 0.98);
+    --message-bot-text: #eef6ff;
+    --composer-bg: rgba(13, 22, 39, 0.98);
+    --editorial-surface: linear-gradient(180deg, rgba(18, 28, 48, 0.97), rgba(22, 36, 62, 0.94));
+}
+
+body[data-theme-mode="dark"][data-theme="beta-ai"] {
+    --bg-gradient: linear-gradient(180deg, #151329 0%, #221d3e 100%);
+    --panel-elevated: rgba(28, 25, 54, 0.98);
+    --nav-surface: rgba(24, 21, 48, 0.94);
+    --nav-item-surface: rgba(39, 34, 72, 0.92);
+    --field-surface: rgba(22, 19, 45, 0.96);
+    --field-surface-strong: rgba(22, 19, 45, 0.98);
+    --message-bot-bg: linear-gradient(145deg, rgba(31, 27, 61, 0.98), rgba(43, 36, 78, 0.96));
+    --message-bot-text: #f2efff;
+    --composer-bg: rgba(22, 19, 45, 0.98);
+    --editorial-surface: linear-gradient(180deg, rgba(31, 27, 61, 0.97), rgba(43, 36, 78, 0.94));
+}
+
+body[data-theme-mode="dark"][data-theme="confusity"] {
+    --bg-gradient: linear-gradient(180deg, #11151d 0%, #1a1f2a 100%);
+    --panel-elevated: rgba(24, 28, 38, 0.98);
+    --nav-surface: rgba(20, 24, 33, 0.94);
+    --nav-item-surface: rgba(31, 36, 48, 0.94);
+    --field-surface: rgba(18, 22, 31, 0.96);
+    --field-surface-strong: rgba(18, 22, 31, 0.98);
+    --message-user-bg: rgba(31, 36, 48, 0.94);
+    --message-user-text: #eef3ff;
+    --message-bot-bg: rgba(24, 28, 38, 0.98);
+    --message-bot-text: #eef3ff;
+    --composer-bg: rgba(18, 22, 31, 0.98);
+    --editorial-surface: linear-gradient(180deg, rgba(24, 28, 38, 0.98), rgba(31, 36, 48, 0.95));
+}
+
+body[data-theme-mode="dark"] .chat-main,
+body[data-theme-mode="dark"] .chat-main-focus,
+body[data-theme-mode="dark"] .settings-shell,
+body[data-theme-mode="dark"] .market-shell,
+body[data-theme-mode="dark"] .messages-empty {
+    background: var(--editorial-surface);
+}
+
+body[data-theme-mode="dark"] .chat-sidebar,
+body[data-theme-mode="dark"] .chat-header,
+body[data-theme-mode="dark"] .chat-header-focus,
+body[data-theme-mode="dark"] .input-container,
+body[data-theme-mode="dark"] .settings-panel,
+body[data-theme-mode="dark"] .market-preview-details > div,
+body[data-theme-mode="dark"] .persona-item,
+body[data-theme-mode="dark"] .modal-card,
+body[data-theme-mode="dark"] .chat-drawer-panel,
+body[data-theme-mode="dark"] .model-popover,
+body[data-theme-mode="dark"] .model-select,
+body[data-theme-mode="dark"] .model-help,
+body[data-theme-mode="dark"] .persona-popover,
+body[data-theme-mode="dark"] .persona-form-intro,
+body[data-theme-mode="dark"] .persona-form .field,
+body[data-theme-mode="dark"] .roleplay-starter-intro,
+body[data-theme-mode="dark"] .dialogue-format-card,
+body[data-theme-mode="dark"] .auth-panel,
+body[data-theme-mode="dark"] .auth-hero,
+body[data-theme-mode="dark"] .workspace-overview,
+body[data-theme-mode="dark"] .summary-card,
+body[data-theme-mode="dark"] .hero-stat {
+    background: var(--ui-surface-raised);
+    border-color: var(--ui-border);
+    color: var(--ui-text);
+}
+
+body[data-theme-mode="dark"] .chat-card,
+body[data-theme-mode="dark"] .card {
+    background: var(--ui-surface);
+    border-color: var(--ui-border);
+    color: var(--ui-text);
+}
+
+body[data-theme-mode="dark"] input,
+body[data-theme-mode="dark"] textarea,
+body[data-theme-mode="dark"] select,
+body[data-theme-mode="dark"] .model-select-control select {
+    background: var(--field-surface-strong);
+    border-color: var(--ui-border-strong);
+    color: var(--ui-text);
+}
+
+body[data-theme-mode="dark"] input::placeholder,
+body[data-theme-mode="dark"] textarea::placeholder {
+    color: var(--ui-text-muted);
+}
+
+body[data-theme-mode="dark"] option {
+    background: var(--field-surface-strong);
+    color: var(--ui-text);
+}
+
+body[data-theme-mode="dark"] .secondary-action,
+body[data-theme-mode="dark"] .icon-button,
+body[data-theme-mode="dark"] .chat-item,
+body[data-theme-mode="dark"] .chat-item button,
+body[data-theme-mode="dark"] .session-chip,
+body[data-theme-mode="dark"] .context-pill,
+body[data-theme-mode="dark"] .prompt-chip,
+body[data-theme-mode="dark"] .settings-nav,
+body[data-theme-mode="dark"] .settings-nav-item:not(.active):not([aria-selected="true"]),
+body[data-theme-mode="dark"] .chat-drawer-action,
+body[data-theme-mode="dark"] .persona-item-actions button {
+    background: var(--nav-item-surface);
+    border-color: var(--ui-border);
+    color: var(--ui-text);
+}
+
+body[data-theme-mode="dark"] .chat-item:hover,
+body[data-theme-mode="dark"] .chat-item:focus-visible,
+body[data-theme-mode="dark"] .secondary-action:hover,
+body[data-theme-mode="dark"] .icon-button:hover,
+body[data-theme-mode="dark"] .settings-nav-item:not(.active):not([aria-selected="true"]):hover {
+    background: var(--secondary-surface);
+    border-color: var(--item-hover-border);
+    color: var(--ui-text);
+}
+
+body[data-theme-mode="dark"] .settings-nav-item.active,
+body[data-theme-mode="dark"] .settings-nav-item[aria-selected="true"],
+body[data-theme-mode="dark"] .primary-action,
+body[data-theme-mode="dark"] button:not(.secondary-action):not(.icon-button):not(.chat-item-delete):not(.settings-nav-item):not(.market-preview-toggle) {
+    background: var(--message-user-bg);
+    border-color: var(--item-active-border);
+    color: var(--message-user-text);
+}
+
+body[data-theme-mode="dark"] .msg,
+body[data-theme-mode="dark"] .msg-content,
+body[data-theme-mode="dark"] .msg-content p,
+body[data-theme-mode="dark"] .msg-content li,
+body[data-theme-mode="dark"] .msg-content blockquote,
+body[data-theme-mode="dark"] .subtitle,
+body[data-theme-mode="dark"] .persona-helper,
+body[data-theme-mode="dark"] .market-preview-details p,
+body[data-theme-mode="dark"] .market-preview-details strong,
+body[data-theme-mode="dark"] .model-help-summary,
+body[data-theme-mode="dark"] .dropdown-subtitle {
+    color: inherit;
+}
+
+body[data-theme-mode="dark"] .msg.bot,
+body[data-theme-mode="dark"] .msg.loading {
+    background: color-mix(in srgb, var(--message-bot-bg) 92%, transparent);
+    border-color: var(--ui-border);
+    color: var(--message-bot-text);
+}
+
+body[data-theme-mode="dark"] .msg.user {
+    background: var(--message-user-bg);
+    border-color: var(--item-active-border);
+    color: var(--message-user-text);
+}
+
+body[data-theme-mode="dark"] .eyebrow,
+body[data-theme-mode="dark"] .chat-list-section-header,
+body[data-theme-mode="dark"] .chat-item-meta,
+body[data-theme-mode="dark"] .composer-hint,
+body[data-theme-mode="dark"] .settings-theme-note,
+body[data-theme-mode="dark"] .model-count,
+body[data-theme-mode="dark"] .model-badge-label,
+body[data-theme-mode="dark"] .chat-drawer-row-hint {
+    color: var(--ui-text-muted);
+}
+
+body[data-theme-mode="dark"] .input-shell,
+body[data-theme-mode="dark"] .input-shell-focus,
+body[data-theme-mode="dark"] .persona-actions {
+    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--composer-bg) 96%, transparent) 28%);
+}
+
+/* Button sizing fixes: chat delete is a text action, not a square icon. */
+.chat-item .chat-item-delete,
+body[data-theme] .chat-item .chat-item-delete,
+body:not([data-theme]) .chat-item .chat-item-delete {
+    width: auto;
+    min-width: max-content;
+    height: 32px;
+    min-height: 32px;
+    padding: 0 10px;
+    border-radius: 999px;
+    justify-self: end;
+    align-self: center;
+    white-space: nowrap;
+    overflow: visible;
+    font-size: 0.72rem;
+    line-height: 1;
+}
+
+body[data-theme-mode="dark"] .chat-item .chat-item-delete {
+    background: var(--chip-muted);
+    border-color: transparent;
+    color: var(--ui-text-muted);
+}
+
+body[data-theme-mode="dark"] .chat-item .chat-item-delete:hover,
+body[data-theme-mode="dark"] .chat-item .chat-item-delete:focus-visible {
+    background: color-mix(in srgb, var(--ui-danger) 10%, var(--chip-muted));
+    border-color: color-mix(in srgb, var(--ui-danger) 28%, transparent);
+    color: var(--ui-danger);
+}