From e7341a84f4b9d538015a5a2ef3338880cdf5f4e1 Mon Sep 17 00:00:00 2001 From: fretuks Date: Fri, 10 Apr 2026 14:40:26 +0200 Subject: [PATCH] update styling --- public/style.css | 387 +++++++++++++++++++++++++++++++++++++---------- 1 file changed, 304 insertions(+), 83 deletions(-) diff --git a/public/style.css b/public/style.css index 6b2c99b..d1ca971 100644 --- a/public/style.css +++ b/public/style.css @@ -30,6 +30,39 @@ --assistant-message: #1f2937; --assistant-message-text: #eff4f2; --button-text: #fff8f0; + --panel-subtle: rgba(255, 251, 245, 0.55); + --panel-soft: rgba(255, 253, 249, 0.56); + --panel-soft-strong: rgba(252, 248, 240, 0.82); + --chip-surface: rgba(255, 252, 246, 0.8); + --chip-muted: rgba(24, 32, 31, 0.06); + --field-surface: rgba(255, 253, 249, 0.92); + --field-surface-strong: rgba(255, 253, 249, 0.96); + --field-focus-surface: #fffdfa; + --field-focus-border: rgba(164, 85, 45, 0.55); + --field-focus-ring: 0 0 0 4px rgba(164, 85, 45, 0.12); + --status-surface: rgba(24, 32, 31, 0.04); + --status-border: rgba(24, 32, 31, 0.06); + --status-error-surface: rgba(181, 71, 61, 0.09); + --status-error-border: rgba(181, 71, 61, 0.2); + --status-success-surface: rgba(37, 115, 93, 0.1); + --status-success-border: rgba(37, 115, 93, 0.2); + --secondary-surface: rgba(164, 85, 45, 0.1); + --secondary-surface-strong: rgba(164, 85, 45, 0.18); + --secondary-border: rgba(164, 85, 45, 0.18); + --secondary-border-strong: rgba(164, 85, 45, 0.34); + --item-hover-border: rgba(164, 85, 45, 0.28); + --item-active-border: rgba(164, 85, 45, 0.48); + --overlay-surface: linear-gradient(180deg, rgba(244, 239, 231, 0.78), rgba(248, 245, 239, 0.86)); + --overlay-card-surface: linear-gradient(155deg, rgba(255, 253, 249, 0.96), rgba(248, 241, 233, 0.94)); + --overlay-card-border: rgba(24, 32, 31, 0.1); + --overlay-card-shadow: 0 24px 70px rgba(56, 39, 21, 0.16); + --prompt-chip-surface: rgba(255, 251, 245, 0.65); + --messages-surface: rgba(252, 248, 240, 0.52); + --pill-surface: rgba(24, 32, 31, 0.04); + --pill-border: rgba(24, 32, 31, 0.08); + --tag-surface: rgba(24, 32, 31, 0.06); + --tag-ai-surface: rgba(164, 85, 45, 0.12); + --tag-user-surface: rgba(37, 115, 93, 0.12); } body[data-theme="fakegpt"] { @@ -58,6 +91,32 @@ body[data-theme="fakegpt"] { --assistant-message: #202123; --assistant-message-text: #f3f4f6; --button-text: #f8fffc; + --panel-subtle: rgba(246, 251, 249, 0.58); + --panel-soft: rgba(255, 255, 255, 0.62); + --panel-soft-strong: rgba(255, 255, 255, 0.82); + --chip-surface: rgba(255, 255, 255, 0.82); + --chip-muted: rgba(17, 24, 39, 0.06); + --field-surface: rgba(255, 255, 255, 0.92); + --field-surface-strong: rgba(255, 255, 255, 0.96); + --field-focus-surface: #ffffff; + --field-focus-border: rgba(16, 163, 127, 0.48); + --field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.12); + --secondary-surface: rgba(16, 163, 127, 0.1); + --secondary-surface-strong: rgba(16, 163, 127, 0.18); + --secondary-border: rgba(16, 163, 127, 0.16); + --secondary-border-strong: rgba(16, 163, 127, 0.28); + --item-hover-border: rgba(16, 163, 127, 0.26); + --item-active-border: rgba(16, 163, 127, 0.42); + --overlay-surface: linear-gradient(180deg, rgba(241, 249, 246, 0.82), rgba(236, 243, 239, 0.9)); + --overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(239, 247, 243, 0.95)); + --overlay-card-shadow: 0 24px 70px rgba(16, 52, 44, 0.14); + --prompt-chip-surface: rgba(248, 255, 252, 0.72); + --messages-surface: rgba(243, 248, 246, 0.62); + --pill-surface: rgba(17, 24, 39, 0.04); + --pill-border: rgba(17, 24, 39, 0.08); + --tag-surface: rgba(17, 24, 39, 0.06); + --tag-ai-surface: rgba(16, 163, 127, 0.12); + --tag-user-surface: rgba(15, 138, 103, 0.12); } body[data-theme="fraud"] { @@ -83,6 +142,32 @@ body[data-theme="fraud"] { --assistant-message: #40352f; --assistant-message-text: #faf4ef; --button-text: #fff9f4; + --panel-subtle: rgba(255, 248, 240, 0.6); + --panel-soft: rgba(255, 249, 242, 0.62); + --panel-soft-strong: rgba(252, 246, 238, 0.82); + --chip-surface: rgba(255, 250, 244, 0.82); + --chip-muted: rgba(45, 38, 30, 0.06); + --field-surface: rgba(255, 249, 242, 0.92); + --field-surface-strong: rgba(255, 249, 242, 0.96); + --field-focus-surface: #fffaf5; + --field-focus-border: rgba(196, 111, 76, 0.45); + --field-focus-ring: 0 0 0 4px rgba(196, 111, 76, 0.12); + --secondary-surface: rgba(196, 111, 76, 0.1); + --secondary-surface-strong: rgba(196, 111, 76, 0.18); + --secondary-border: rgba(196, 111, 76, 0.18); + --secondary-border-strong: rgba(196, 111, 76, 0.32); + --item-hover-border: rgba(196, 111, 76, 0.24); + --item-active-border: rgba(196, 111, 76, 0.38); + --overlay-surface: linear-gradient(180deg, rgba(245, 236, 227, 0.82), rgba(250, 244, 236, 0.88)); + --overlay-card-surface: linear-gradient(155deg, rgba(255, 251, 245, 0.97), rgba(246, 237, 226, 0.94)); + --overlay-card-shadow: 0 24px 70px rgba(94, 58, 33, 0.14); + --prompt-chip-surface: rgba(255, 250, 244, 0.74); + --messages-surface: rgba(250, 243, 234, 0.62); + --pill-surface: rgba(45, 38, 30, 0.04); + --pill-border: rgba(45, 38, 30, 0.08); + --tag-surface: rgba(45, 38, 30, 0.06); + --tag-ai-surface: rgba(196, 111, 76, 0.12); + --tag-user-surface: rgba(111, 131, 96, 0.14); } body[data-theme="germini"] { @@ -108,6 +193,33 @@ body[data-theme="germini"] { --assistant-message: linear-gradient(145deg, #3046c8, #7e3fdc); --assistant-message-text: #f8f7ff; --button-text: #f8f7ff; + --panel-subtle: rgba(255, 255, 255, 0.34); + --panel-soft: rgba(255, 255, 255, 0.38); + --panel-soft-strong: rgba(255, 255, 255, 0.46); + --chip-surface: rgba(255, 255, 255, 0.38); + --chip-muted: rgba(255, 255, 255, 0.2); + --field-surface: rgba(255, 255, 255, 0.42); + --field-surface-strong: rgba(255, 255, 255, 0.46); + --field-focus-surface: rgba(255, 255, 255, 0.52); + --field-focus-border: rgba(90, 109, 240, 0.34); + --field-focus-ring: 0 0 0 4px rgba(90, 109, 240, 0.12); + --secondary-surface: rgba(255, 255, 255, 0.3); + --secondary-surface-strong: rgba(255, 255, 255, 0.42); + --secondary-border: rgba(255, 255, 255, 0.32); + --secondary-border-strong: rgba(255, 255, 255, 0.48); + --item-hover-border: rgba(255, 255, 255, 0.42); + --item-active-border: rgba(90, 109, 240, 0.34); + --overlay-surface: linear-gradient(180deg, rgba(227, 235, 255, 0.74), rgba(241, 245, 255, 0.84)); + --overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.78), rgba(235, 238, 255, 0.86)); + --overlay-card-border: rgba(255, 255, 255, 0.34); + --overlay-card-shadow: 0 24px 70px rgba(98, 110, 255, 0.16); + --prompt-chip-surface: rgba(255, 255, 255, 0.36); + --messages-surface: rgba(255, 255, 255, 0.3); + --pill-surface: rgba(255, 255, 255, 0.22); + --pill-border: rgba(255, 255, 255, 0.3); + --tag-surface: rgba(255, 255, 255, 0.24); + --tag-ai-surface: rgba(90, 109, 240, 0.16); + --tag-user-surface: rgba(45, 143, 133, 0.14); } body[data-theme="slopilot"] { @@ -133,6 +245,32 @@ body[data-theme="slopilot"] { --assistant-message: linear-gradient(145deg, #123460, #1f6fff); --assistant-message-text: #f6fbff; --button-text: #f6fbff; + --panel-subtle: rgba(248, 251, 255, 0.7); + --panel-soft: rgba(255, 255, 255, 0.72); + --panel-soft-strong: rgba(255, 255, 255, 0.86); + --chip-surface: rgba(255, 255, 255, 0.84); + --chip-muted: rgba(13, 104, 255, 0.06); + --field-surface: rgba(255, 255, 255, 0.92); + --field-surface-strong: rgba(255, 255, 255, 0.96); + --field-focus-surface: #ffffff; + --field-focus-border: rgba(13, 104, 255, 0.42); + --field-focus-ring: 0 0 0 4px rgba(13, 104, 255, 0.12); + --secondary-surface: rgba(13, 104, 255, 0.1); + --secondary-surface-strong: rgba(13, 104, 255, 0.16); + --secondary-border: rgba(13, 104, 255, 0.16); + --secondary-border-strong: rgba(13, 104, 255, 0.3); + --item-hover-border: rgba(13, 104, 255, 0.22); + --item-active-border: rgba(13, 104, 255, 0.36); + --overlay-surface: linear-gradient(180deg, rgba(233, 243, 255, 0.78), rgba(244, 249, 255, 0.88)); + --overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(236, 244, 255, 0.95)); + --overlay-card-shadow: 0 24px 70px rgba(25, 77, 147, 0.14); + --prompt-chip-surface: rgba(248, 251, 255, 0.76); + --messages-surface: rgba(244, 249, 255, 0.72); + --pill-surface: rgba(13, 104, 255, 0.05); + --pill-border: rgba(13, 104, 255, 0.12); + --tag-surface: rgba(13, 104, 255, 0.07); + --tag-ai-surface: rgba(13, 104, 255, 0.12); + --tag-user-surface: rgba(17, 133, 115, 0.14); } body[data-theme="beta-ai"] { @@ -158,6 +296,32 @@ body[data-theme="beta-ai"] { --assistant-message: linear-gradient(145deg, #2d236f, #5c49f1); --assistant-message-text: #f8f7ff; --button-text: #f8f7ff; + --panel-subtle: rgba(248, 245, 255, 0.68); + --panel-soft: rgba(255, 255, 255, 0.72); + --panel-soft-strong: rgba(255, 255, 255, 0.86); + --chip-surface: rgba(255, 255, 255, 0.84); + --chip-muted: rgba(79, 70, 229, 0.06); + --field-surface: rgba(255, 255, 255, 0.92); + --field-surface-strong: rgba(255, 255, 255, 0.96); + --field-focus-surface: #ffffff; + --field-focus-border: rgba(79, 70, 229, 0.36); + --field-focus-ring: 0 0 0 4px rgba(79, 70, 229, 0.12); + --secondary-surface: rgba(79, 70, 229, 0.1); + --secondary-surface-strong: rgba(79, 70, 229, 0.18); + --secondary-border: rgba(79, 70, 229, 0.16); + --secondary-border-strong: rgba(79, 70, 229, 0.28); + --item-hover-border: rgba(79, 70, 229, 0.22); + --item-active-border: rgba(79, 70, 229, 0.36); + --overlay-surface: linear-gradient(180deg, rgba(240, 236, 255, 0.8), rgba(248, 246, 255, 0.9)); + --overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(241, 237, 255, 0.95)); + --overlay-card-shadow: 0 24px 70px rgba(61, 54, 122, 0.14); + --prompt-chip-surface: rgba(250, 248, 255, 0.76); + --messages-surface: rgba(246, 243, 255, 0.72); + --pill-surface: rgba(79, 70, 229, 0.05); + --pill-border: rgba(79, 70, 229, 0.12); + --tag-surface: rgba(79, 70, 229, 0.08); + --tag-ai-surface: rgba(79, 70, 229, 0.13); + --tag-user-surface: rgba(42, 140, 123, 0.14); } body[data-theme="confusity"] { @@ -183,6 +347,32 @@ body[data-theme="confusity"] { --assistant-message: #111827; --assistant-message-text: #f9fafb; --button-text: #f9fafb; + --panel-subtle: rgba(255, 255, 255, 0.7); + --panel-soft: rgba(248, 250, 252, 0.82); + --panel-soft-strong: rgba(255, 255, 255, 0.9); + --chip-surface: rgba(255, 255, 255, 0.92); + --chip-muted: rgba(17, 24, 39, 0.06); + --field-surface: rgba(255, 255, 255, 0.96); + --field-surface-strong: rgba(255, 255, 255, 0.98); + --field-focus-surface: #ffffff; + --field-focus-border: rgba(2, 132, 199, 0.34); + --field-focus-ring: 0 0 0 4px rgba(2, 132, 199, 0.1); + --secondary-surface: rgba(17, 24, 39, 0.05); + --secondary-surface-strong: rgba(17, 24, 39, 0.1); + --secondary-border: rgba(17, 24, 39, 0.1); + --secondary-border-strong: rgba(17, 24, 39, 0.18); + --item-hover-border: rgba(17, 24, 39, 0.14); + --item-active-border: rgba(2, 132, 199, 0.26); + --overlay-surface: linear-gradient(180deg, rgba(241, 245, 249, 0.82), rgba(248, 250, 252, 0.9)); + --overlay-card-surface: linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96)); + --overlay-card-shadow: 0 24px 70px rgba(17, 24, 39, 0.1); + --prompt-chip-surface: rgba(248, 250, 252, 0.86); + --messages-surface: rgba(255, 255, 255, 0.92); + --pill-surface: rgba(17, 24, 39, 0.04); + --pill-border: rgba(17, 24, 39, 0.08); + --tag-surface: rgba(17, 24, 39, 0.06); + --tag-ai-surface: rgba(17, 24, 39, 0.08); + --tag-user-surface: rgba(2, 132, 199, 0.12); } * { @@ -220,7 +410,7 @@ body::before { .card { background: var(--surface); - border: 1px solid rgba(24, 32, 31, 0.08); + border: 1px solid var(--pill-border); backdrop-filter: blur(10px); border-radius: var(--radius-xl); box-shadow: var(--shadow); @@ -242,7 +432,7 @@ body::before { .auth-hero { padding: 48px; background: var(--hero-gradient); - border-right: 1px solid rgba(24, 32, 31, 0.08); + border-right: 1px solid var(--pill-border); display: grid; align-content: start; gap: 24px; @@ -277,7 +467,7 @@ body::before { display: grid; align-content: center; gap: 18px; - background: rgba(252, 248, 240, 0.82); + background: var(--panel-soft-strong); } .auth-hero-compact { @@ -348,8 +538,8 @@ h2 { .hero-panel { padding: 20px; border-radius: var(--radius-lg); - background: rgba(255, 251, 245, 0.55); - border: 1px solid rgba(24, 32, 31, 0.08); + background: var(--panel-subtle); + border: 1px solid var(--pill-border); } .hero-panel h2 { @@ -362,8 +552,8 @@ h2 { .context-pill { padding: 14px; border-radius: var(--radius-md); - background: rgba(255, 253, 249, 0.56); - border: 1px solid rgba(24, 32, 31, 0.08); + background: var(--panel-soft); + border: 1px solid var(--pill-border); } .hero-stat span, @@ -397,7 +587,7 @@ h2 { .modal-card, .market-shell { background: var(--surface-strong); - border: 1px solid rgba(24, 32, 31, 0.08); + border: 1px solid var(--pill-border); } .auth-toggle { @@ -485,9 +675,9 @@ textarea, select { width: 100%; border-radius: 16px; - border: 1px solid rgba(24, 32, 31, 0.1); + border: 1px solid var(--line-strong); padding: 14px 16px; - background: rgba(255, 253, 249, 0.92); + background: var(--field-surface); font: inherit; color: var(--text); outline: none; @@ -501,9 +691,9 @@ textarea { input:focus, textarea:focus, select:focus { - border-color: rgba(164, 85, 45, 0.55); - box-shadow: 0 0 0 4px rgba(164, 85, 45, 0.12); - background: #fffdfa; + border-color: var(--field-focus-border); + box-shadow: var(--field-focus-ring); + background: var(--field-focus-surface); } .primary-action { @@ -515,21 +705,21 @@ select:focus { margin: 0; padding: 12px 14px; border-radius: 14px; - background: rgba(24, 32, 31, 0.04); - border: 1px solid rgba(24, 32, 31, 0.06); + background: var(--status-surface); + border: 1px solid var(--status-border); color: var(--text-soft); } .status.error { color: var(--error); - background: rgba(181, 71, 61, 0.09); - border-color: rgba(181, 71, 61, 0.2); + background: var(--status-error-surface); + border-color: var(--status-error-border); } .status.success { color: var(--success); - background: rgba(37, 115, 93, 0.1); - border-color: rgba(37, 115, 93, 0.2); + background: var(--status-success-surface); + border-color: var(--status-success-border); } .inline-status { @@ -642,8 +832,8 @@ select:focus { gap: 10px; padding: 10px 12px; border-radius: 12px; - border: 1px solid rgba(24, 32, 31, 0.08); - background: rgba(24, 32, 31, 0.04); + border: 1px solid var(--pill-border); + background: var(--pill-surface); color: var(--text-soft); font-size: 0.9rem; } @@ -662,8 +852,8 @@ select:focus { gap: 10px; padding: 16px; border-radius: var(--radius-md); - border: 1px solid rgba(24, 32, 31, 0.08); - background: rgba(255, 252, 246, 0.8); + border: 1px solid var(--pill-border); + background: var(--chip-surface); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } @@ -676,13 +866,13 @@ select:focus { .chat-item:hover, .persona-item:hover { - border-color: rgba(164, 85, 45, 0.28); + border-color: var(--item-hover-border); box-shadow: none; } .chat-item.active, .persona-item.active { - border-color: rgba(164, 85, 45, 0.48); + border-color: var(--item-active-border); box-shadow: none; } @@ -710,7 +900,7 @@ select:focus { .chat-item button, .icon-button { padding: 8px 12px; - background: rgba(24, 32, 31, 0.06); + background: var(--chip-muted); color: var(--text); box-shadow: none; min-height: 40px; @@ -719,16 +909,16 @@ select:focus { .secondary-action { padding: 11px 16px; min-height: 44px; - background: rgba(164, 85, 45, 0.1); + background: var(--secondary-surface); color: var(--text); - border: 1px solid rgba(164, 85, 45, 0.18); + border: 1px solid var(--secondary-border); text-decoration: none; box-shadow: none; } .secondary-action.active { - background: rgba(164, 85, 45, 0.18); - border-color: rgba(164, 85, 45, 0.34); + background: var(--secondary-surface-strong); + border-color: var(--secondary-border-strong); } .action-pair { @@ -758,9 +948,9 @@ select:focus { } .tools-details { - border: 1px solid rgba(24, 32, 31, 0.08); + border: 1px solid var(--pill-border); border-radius: 14px; - background: rgba(24, 32, 31, 0.04); + background: var(--pill-surface); padding: 8px 10px; } @@ -786,8 +976,8 @@ select:focus { gap: 4px; padding: 12px 14px; border-radius: 14px; - border: 1px solid rgba(24, 32, 31, 0.08); - background: rgba(24, 32, 31, 0.04); + border: 1px solid var(--pill-border); + background: var(--pill-surface); } .session-chip-label { @@ -827,7 +1017,7 @@ select:focus { .chat-header-focus { padding-bottom: 2px; - border-bottom: 1px solid rgba(24, 32, 31, 0.07); + border-bottom: 1px solid var(--line); } .messages-panel-focus { @@ -841,8 +1031,7 @@ select:focus { display: grid; place-items: center; padding: 28px; - background: - linear-gradient(180deg, rgba(244, 239, 231, 0.78), rgba(248, 245, 239, 0.86)); + background: var(--overlay-surface); backdrop-filter: blur(10px); } @@ -850,10 +1039,9 @@ select:focus { width: min(440px, 100%); padding: 28px; border-radius: 26px; - border: 1px solid rgba(24, 32, 31, 0.1); - background: - linear-gradient(155deg, rgba(255, 253, 249, 0.96), rgba(248, 241, 233, 0.94)); - box-shadow: 0 24px 70px rgba(56, 39, 21, 0.16); + border: 1px solid var(--overlay-card-border); + background: var(--overlay-card-surface); + box-shadow: var(--overlay-card-shadow); text-align: center; } @@ -897,7 +1085,7 @@ select:focus { } .input-shell-focus { - border-top: 1px solid rgba(24, 32, 31, 0.07); + border-top: 1px solid var(--line); } .workspace-overview, @@ -912,7 +1100,7 @@ select:focus { grid-template-columns: minmax(0, 1fr) minmax(300px, 500px); gap: 14px; background: var(--overview-gradient); - border: 1px solid rgba(24, 32, 31, 0.07); + border: 1px solid var(--line); } .workspace-intro { @@ -957,9 +1145,9 @@ select:focus { min-height: 40px; padding: 8px 12px; border-radius: 999px; - background: rgba(24, 32, 31, 0.06); + background: var(--chip-muted); color: var(--text); - border: 1px solid rgba(24, 32, 31, 0.12); + border: 1px solid var(--line-strong); } .context-chip-button span { @@ -1013,9 +1201,9 @@ select:focus { min-height: 44px; padding: 10px 14px; border-radius: 999px; - background: rgba(164, 85, 45, 0.1); + background: var(--secondary-surface); color: var(--text); - border: 1px solid rgba(164, 85, 45, 0.18); + border: 1px solid var(--secondary-border); box-shadow: none; } @@ -1033,8 +1221,8 @@ select:focus { } .model-badge-button[aria-expanded="true"] { - background: rgba(164, 85, 45, 0.16); - border-color: rgba(164, 85, 45, 0.28); + background: var(--secondary-surface-strong); + border-color: var(--secondary-border-strong); } .model-popover { @@ -1049,7 +1237,7 @@ select:focus { gap: 14px; z-index: 20; background: var(--surface-strong); - border: 1px solid rgba(24, 32, 31, 0.08); + border: 1px solid var(--pill-border); } .model-select { @@ -1090,10 +1278,10 @@ select:focus { padding-right: 48px; border-radius: 14px; appearance: none; - background: rgba(255, 253, 249, 0.96); - border-color: rgba(24, 32, 31, 0.12); + background: var(--field-surface-strong); + border-color: var(--line-strong); font-weight: 700; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); + box-shadow: none; } .model-select-chevron { @@ -1113,8 +1301,8 @@ select:focus { gap: 8px; padding: 14px; border-radius: 14px; - border: 1px solid rgba(24, 32, 31, 0.08); - background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 252, 246, 0.92)); + border: 1px solid var(--pill-border); + background: linear-gradient(180deg, var(--panel-soft), var(--field-surface)); min-height: 92px; } @@ -1134,8 +1322,8 @@ select:focus { .model-help-badge { padding: 5px 10px; border-radius: 999px; - background: rgba(164, 85, 45, 0.1); - border: 1px solid rgba(164, 85, 45, 0.18); + background: var(--secondary-surface); + border: 1px solid var(--secondary-border); color: var(--brand-strong); font-size: 0.72rem; font-weight: 800; @@ -1175,8 +1363,8 @@ select:focus { } .model-help-badge[data-badge="waiting"] { - background: rgba(24, 32, 31, 0.06); - border-color: rgba(24, 32, 31, 0.1); + background: var(--chip-muted); + border-color: var(--line-strong); color: var(--text-soft); } @@ -1208,9 +1396,9 @@ select:focus { justify-content: center; padding: 9px 12px; border-radius: 999px; - background: rgba(255, 251, 245, 0.65); + background: var(--prompt-chip-surface); color: var(--text); - border: 1px solid rgba(24, 32, 31, 0.08); + border: 1px solid var(--pill-border); box-shadow: none; font-weight: 600; } @@ -1221,7 +1409,7 @@ select:focus { display: flex; flex-direction: column; gap: 12px; - background: rgba(252, 248, 240, 0.52); + background: var(--messages-surface); min-height: 0; } @@ -1540,8 +1728,8 @@ select:focus { gap: 14px; padding: 16px 18px; border-radius: 16px; - background: rgba(24, 32, 31, 0.04); - border: 1px solid rgba(24, 32, 31, 0.08); + background: var(--pill-surface); + border: 1px solid var(--pill-border); } .character-library-list { @@ -1557,8 +1745,8 @@ select:focus { .roleplay-starter-intro { padding: 16px 18px; border-radius: 16px; - background: rgba(24, 32, 31, 0.04); - border: 1px solid rgba(24, 32, 31, 0.08); + background: var(--pill-surface); + border: 1px solid var(--pill-border); } .roleplay-starter-page { @@ -1576,17 +1764,17 @@ select:focus { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; - background: rgba(24, 32, 31, 0.06); + background: var(--tag-surface); } .persona-role-tag.ai { color: var(--brand-strong); - background: rgba(164, 85, 45, 0.12); + background: var(--tag-ai-surface); } .persona-role-tag.user { color: var(--success); - background: rgba(37, 115, 93, 0.12); + background: var(--tag-user-surface); } .persona-item p { @@ -1722,8 +1910,8 @@ select:focus { .persona-form-intro { padding: 16px 18px; border-radius: 16px; - background: rgba(24, 32, 31, 0.04); - border: 1px solid rgba(24, 32, 31, 0.08); + background: var(--pill-surface); + border: 1px solid var(--pill-border); display: grid; gap: 14px; } @@ -1746,8 +1934,8 @@ select:focus { .persona-form .field-wide { padding: 14px; border-radius: var(--radius-md); - background: rgba(24, 32, 31, 0.03); - border: 1px solid rgba(24, 32, 31, 0.06); + background: var(--status-surface); + border: 1px solid var(--status-border); } .persona-form .field textarea { @@ -1759,8 +1947,8 @@ select:focus { gap: 8px; padding: 14px 16px; border-radius: 14px; - background: rgba(24, 32, 31, 0.05); - border: 1px dashed rgba(24, 32, 31, 0.16); + background: var(--chip-muted); + border: 1px dashed var(--line-strong); } .dialogue-format-label { @@ -1924,7 +2112,7 @@ select:focus { padding: 12px; border-radius: var(--radius-lg); background: var(--surface-strong); - border: 1px solid rgba(24, 32, 31, 0.08); + border: 1px solid var(--pill-border); } .settings-nav-item { @@ -1935,9 +2123,9 @@ select:focus { text-align: left; padding: 12px 14px; min-height: 48px; - background: rgba(24, 32, 31, 0.04); + background: var(--pill-surface); color: var(--text); - border: 1px solid rgba(24, 32, 31, 0.08); + border: 1px solid var(--pill-border); } .settings-nav-item.active { @@ -1970,7 +2158,7 @@ select:focus { padding: 16px; border-radius: var(--radius-lg); background: var(--surface-strong); - border: 1px solid rgba(24, 32, 31, 0.08); + border: 1px solid var(--pill-border); } .settings-panel-compact { @@ -1997,8 +2185,8 @@ select:focus { padding: 12px 14px; min-height: 76px; border-radius: 14px; - border: 1px solid rgba(24, 32, 31, 0.08); - background: rgba(24, 32, 31, 0.04); + border: 1px solid var(--pill-border); + background: var(--pill-surface); align-content: center; } @@ -2015,8 +2203,8 @@ select:focus { gap: 10px; padding: 16px; border-radius: 14px; - background: rgba(24, 32, 31, 0.04); - border: 1px dashed rgba(24, 32, 31, 0.14); + background: var(--pill-surface); + border: 1px dashed var(--line-strong); } body[data-theme="fakegpt"] { @@ -2033,6 +2221,39 @@ body[data-theme="fakegpt"] { --bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%); --hero-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92)); --overview-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92)); + --panel-subtle: rgba(10, 15, 13, 0.92); + --panel-soft: rgba(18, 24, 21, 0.9); + --panel-soft-strong: rgba(18, 24, 21, 0.92); + --chip-surface: rgba(10, 15, 13, 0.92); + --chip-muted: rgba(36, 255, 180, 0.08); + --field-surface: rgba(10, 15, 13, 0.96); + --field-surface-strong: rgba(10, 15, 13, 0.96); + --field-focus-surface: rgba(12, 19, 16, 0.98); + --field-focus-border: rgba(36, 255, 180, 0.26); + --field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.14); + --status-surface: rgba(18, 24, 21, 0.9); + --status-border: rgba(36, 255, 180, 0.12); + --status-error-surface: rgba(181, 71, 61, 0.16); + --status-error-border: rgba(181, 71, 61, 0.28); + --status-success-surface: rgba(16, 163, 127, 0.14); + --status-success-border: rgba(36, 255, 180, 0.24); + --secondary-surface: rgba(18, 24, 21, 0.96); + --secondary-surface-strong: rgba(16, 163, 127, 0.16); + --secondary-border: rgba(36, 255, 180, 0.16); + --secondary-border-strong: rgba(36, 255, 180, 0.26); + --item-hover-border: rgba(36, 255, 180, 0.22); + --item-active-border: rgba(36, 255, 180, 0.34); + --overlay-surface: linear-gradient(180deg, rgba(9, 14, 12, 0.82), rgba(15, 22, 19, 0.9)); + --overlay-card-surface: linear-gradient(155deg, rgba(14, 20, 18, 0.96), rgba(18, 24, 21, 0.94)); + --overlay-card-border: rgba(36, 255, 180, 0.16); + --overlay-card-shadow: 0 24px 70px rgba(3, 10, 8, 0.5); + --prompt-chip-surface: rgba(18, 24, 21, 0.9); + --messages-surface: rgba(18, 24, 21, 0.88); + --pill-surface: rgba(18, 24, 21, 0.9); + --pill-border: rgba(36, 255, 180, 0.14); + --tag-surface: rgba(36, 255, 180, 0.08); + --tag-ai-surface: rgba(16, 163, 127, 0.16); + --tag-user-surface: rgba(36, 255, 180, 0.12); background: radial-gradient(circle at top left, rgba(16, 163, 127, 0.15), transparent 26%), linear-gradient(180deg, #0b0f0d 0%, #111715 100%); color: #e8fff7; color-scheme: dark;