648 lines
37 KiB
CSS
648 lines
37 KiB
CSS
/* Elsewhere design system. */
|
|
|
|
.msg-reasoning {
|
|
margin: 0 0 12px;
|
|
padding: 10px 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-soft);
|
|
color: var(--text-soft);
|
|
font-size: .875rem;
|
|
}
|
|
.msg-reasoning summary { cursor: pointer; font-weight: 600; }
|
|
.msg-reasoning summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
|
|
.msg-reasoning-content {
|
|
margin-top: 10px;
|
|
max-height: 320px;
|
|
overflow: auto;
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ---------- Foundation ---------- */
|
|
:root {
|
|
color-scheme: light;
|
|
--font-body: "Manrope", "Segoe UI", sans-serif;
|
|
--font-heading: "Space Grotesk", "Segoe UI", sans-serif;
|
|
--canvas: #f7f7f8;
|
|
--canvas-accent: #eef6f3;
|
|
--surface: #ffffff;
|
|
--surface-raised: #ffffff;
|
|
--surface-soft: #f4f4f5;
|
|
--surface-hover: #eceeed;
|
|
--text: #171717;
|
|
--text-soft: #52525b;
|
|
--text-muted: #7a7f87;
|
|
--border: #e5e7e7;
|
|
--border-strong: #d2d6d5;
|
|
--brand: #10a37f;
|
|
--brand-strong: #087f63;
|
|
--brand-soft: #dff6ef;
|
|
--on-brand: #ffffff;
|
|
--danger: #c63d3d;
|
|
--danger-soft: #fff0f0;
|
|
--success: #158467;
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
|
|
--shadow-md: 0 16px 45px rgba(0, 0, 0, .10);
|
|
--shadow-lg: 0 28px 80px rgba(0, 0, 0, .18);
|
|
--radius-sm: 10px;
|
|
--radius-md: 16px;
|
|
--radius-lg: 24px;
|
|
--radius-xl: 32px;
|
|
--sidebar-width: 286px;
|
|
--message-user: var(--brand);
|
|
--message-user-text: var(--on-brand);
|
|
--message-bot: var(--surface-raised);
|
|
--input-bg: var(--surface-raised);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body { width: 100%; min-height: 100%; margin: 0; }
|
|
html { background: var(--canvas); }
|
|
body {
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
padding: 18px;
|
|
overflow-x: hidden;
|
|
color: var(--text);
|
|
background:
|
|
radial-gradient(circle at 85% 0%, var(--canvas-accent), transparent 34rem),
|
|
var(--canvas);
|
|
font-family: var(--font-body);
|
|
line-height: 1.45;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
button, input, textarea, select { font: inherit; }
|
|
button, a, summary, select { -webkit-tap-highlight-color: transparent; }
|
|
button { color: inherit; }
|
|
a { color: var(--brand); }
|
|
h1, h2, h3, h4, p { margin-top: 0; }
|
|
h1, h2, h3, h4 {
|
|
margin-bottom: 0;
|
|
color: var(--text);
|
|
font-family: var(--font-heading);
|
|
letter-spacing: -.035em;
|
|
line-height: 1.12;
|
|
}
|
|
h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
|
|
h2 { font-size: clamp(1.3rem, 2vw, 1.65rem); }
|
|
h3 { font-size: 1.08rem; }
|
|
.hidden { display: none !important; }
|
|
.visually-hidden {
|
|
position: absolute !important;
|
|
width: 1px !important;
|
|
height: 1px !important;
|
|
padding: 0 !important;
|
|
margin: -1px !important;
|
|
overflow: hidden !important;
|
|
clip: rect(0, 0, 0, 0) !important;
|
|
white-space: nowrap !important;
|
|
border: 0 !important;
|
|
}
|
|
.eyebrow, .dropdown-section-label, .chat-list-section-header {
|
|
margin: 0;
|
|
color: var(--text-muted);
|
|
font-size: .7rem;
|
|
font-weight: 700;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
}
|
|
.subtitle, .persona-helper, .persona-guidance, .dropdown-subtitle {
|
|
margin: 0;
|
|
color: var(--text-soft);
|
|
}
|
|
.card {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
/* ---------- Six visual identities ---------- */
|
|
body[data-theme="fakegpt"] {
|
|
--font-heading: "Space Grotesk", sans-serif;
|
|
--canvas: #f7f7f8; --canvas-accent: #e7f7f1; --surface: #fff;
|
|
--surface-raised: #fff; --surface-soft: #f4f4f5; --surface-hover: #eceeed;
|
|
--text: #171717; --text-soft: #52525b; --text-muted: #7a7f87;
|
|
--border: #e5e7e7; --border-strong: #d2d6d5;
|
|
--brand: #10a37f; --brand-strong: #087f63; --brand-soft: #dff6ef;
|
|
--radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px;
|
|
}
|
|
body[data-theme="fraud"] {
|
|
--font-heading: Georgia, "Times New Roman", serif;
|
|
--canvas: #f4eee6; --canvas-accent: #ead8ca; --surface: #fbf7f2;
|
|
--surface-raised: #fffaf5; --surface-soft: #f0e7dd; --surface-hover: #e9ddd0;
|
|
--text: #30251e; --text-soft: #6d594a; --text-muted: #917867;
|
|
--border: #dfd0c2; --border-strong: #cdb9a8;
|
|
--brand: #c66f4b; --brand-strong: #9f5033; --brand-soft: #f5ddd0;
|
|
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px;
|
|
}
|
|
body[data-theme="germini"] {
|
|
--font-heading: "Space Grotesk", sans-serif;
|
|
--canvas: #f5f7ff; --canvas-accent: #e4e8ff; --surface: rgba(255,255,255,.82);
|
|
--surface-raised: rgba(255,255,255,.94); --surface-soft: #eef0ff; --surface-hover: #e4e7fb;
|
|
--text: #20233e; --text-soft: #565e87; --text-muted: #7e86ad;
|
|
--border: #dfe3f7; --border-strong: #cdd3ee;
|
|
--brand: #6674ed; --brand-strong: #9b4be2; --brand-soft: #e4e1ff;
|
|
--radius-sm: 14px; --radius-md: 20px; --radius-lg: 28px; --radius-xl: 36px;
|
|
}
|
|
body[data-theme="slopilot"] {
|
|
--font-heading: "Segoe UI", "Manrope", sans-serif;
|
|
--canvas: #f4f8fd; --canvas-accent: #dfeeff; --surface: #fff;
|
|
--surface-raised: #fff; --surface-soft: #edf4fc; --surface-hover: #e1edfa;
|
|
--text: #17243b; --text-soft: #53657c; --text-muted: #7b899b;
|
|
--border: #dce7f2; --border-strong: #c6d7e8;
|
|
--brand: #176bdb; --brand-strong: #5542d7; --brand-soft: #dceaff;
|
|
--radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px;
|
|
}
|
|
body[data-theme="beta-ai"] {
|
|
--font-heading: "Manrope", sans-serif;
|
|
--canvas: #f8f7ff; --canvas-accent: #eae6ff; --surface: #fff;
|
|
--surface-raised: #fff; --surface-soft: #f1efff; --surface-hover: #e8e4fb;
|
|
--text: #27203f; --text-soft: #625b7d; --text-muted: #8b84a5;
|
|
--border: #e5e0f2; --border-strong: #d2cbe6;
|
|
--brand: #5b4ae8; --brand-strong: #292159; --brand-soft: #e5e0ff;
|
|
--radius-sm: 12px; --radius-md: 18px; --radius-lg: 26px; --radius-xl: 34px;
|
|
}
|
|
body[data-theme="confusity"] {
|
|
--font-heading: "Manrope", sans-serif;
|
|
--canvas: #f7f8fa; --canvas-accent: #edf0f3; --surface: #fff;
|
|
--surface-raised: #fff; --surface-soft: #f2f4f6; --surface-hover: #e8ebee;
|
|
--text: #15181c; --text-soft: #535c66; --text-muted: #7c858e;
|
|
--border: #e2e5e8; --border-strong: #ccd1d6;
|
|
--brand: #20262d; --brand-strong: #080b0e; --brand-soft: #e1e5e8;
|
|
--radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px;
|
|
}
|
|
|
|
body[data-theme-mode="dark"] {
|
|
color-scheme: dark;
|
|
--canvas: #101318; --canvas-accent: #17251f; --surface: #171b20;
|
|
--surface-raised: #1d2228; --surface-soft: #22282f; --surface-hover: #2a3139;
|
|
--text: #f3f5f7; --text-soft: #bbc2ca; --text-muted: #87919c;
|
|
--border: #2b323a; --border-strong: #3a444f;
|
|
--brand-soft: color-mix(in srgb, var(--brand) 22%, #171b20);
|
|
--input-bg: #161a1f; --message-bot: #1d2228;
|
|
--shadow-sm: 0 1px 2px rgba(0,0,0,.24);
|
|
--shadow-md: 0 18px 50px rgba(0,0,0,.28);
|
|
--shadow-lg: 0 28px 90px rgba(0,0,0,.45);
|
|
}
|
|
body[data-theme-mode="dark"][data-theme="fakegpt"] {
|
|
--canvas: #101318; --canvas-accent: #17251f; --surface: #171b20;
|
|
--surface-raised: #1d2228; --surface-soft: #22282f; --surface-hover: #2a3139;
|
|
--text: #f3f5f7; --text-soft: #bbc2ca; --text-muted: #87919c;
|
|
--border: #2b323a; --border-strong: #3a444f; --input-bg: #161a1f;
|
|
}
|
|
body[data-theme-mode="dark"][data-theme="fraud"] {
|
|
--canvas: #18120f; --canvas-accent: #2e2018; --surface: #211914;
|
|
--surface-raised: #281e18; --surface-soft: #30231c; --surface-hover: #3a2a21;
|
|
--text: #f4e9df; --text-soft: #ccb9a9; --text-muted: #9f8978;
|
|
--border: #403128; --border-strong: #594236; --input-bg: #1c1511;
|
|
}
|
|
body[data-theme-mode="dark"][data-theme="germini"] {
|
|
--canvas: #11142a; --canvas-accent: #24224d; --surface: #191d39;
|
|
--surface-raised: #202545; --surface-soft: #282d50; --surface-hover: #30365e;
|
|
--text: #f4f3ff; --text-soft: #c6c9ed; --text-muted: #9399c5;
|
|
--border: #33395e; --border-strong: #464d78; --input-bg: #171b35;
|
|
}
|
|
body[data-theme-mode="dark"][data-theme="slopilot"] {
|
|
--canvas: #0d1622; --canvas-accent: #112c4b; --surface: #131e2c;
|
|
--surface-raised: #192637; --surface-soft: #202f42; --surface-hover: #293a50;
|
|
--text: #f1f6fc; --text-soft: #bed0e3; --text-muted: #879db5;
|
|
--border: #293b50; --border-strong: #39516c; --input-bg: #101a27;
|
|
}
|
|
body[data-theme-mode="dark"][data-theme="beta-ai"] {
|
|
--canvas: #151126; --canvas-accent: #29204d; --surface: #1d1832;
|
|
--surface-raised: #251f3d; --surface-soft: #2d2748; --surface-hover: #373056;
|
|
--text: #f6f3ff; --text-soft: #cdc6e4; --text-muted: #9990b4;
|
|
--border: #393250; --border-strong: #4e4568; --input-bg: #19142b;
|
|
}
|
|
body[data-theme-mode="dark"][data-theme="confusity"] {
|
|
--canvas: #101214; --canvas-accent: #1c2328; --surface: #171a1d;
|
|
--surface-raised: #1d2125; --surface-soft: #24292e; --surface-hover: #2c3238;
|
|
--text: #f5f6f7; --text-soft: #c1c6cb; --text-muted: #8d959c;
|
|
--border: #2c3237; --border-strong: #3d454c; --input-bg: #141719;
|
|
}
|
|
html[data-theme-mode="dark"] { background: #101318; }
|
|
html[data-theme-mode="dark"][data-theme="fraud"] { background: #18120f; }
|
|
|
|
/* Theme character details */
|
|
body[data-theme="fraud"] button,
|
|
body[data-theme="fraud"] input,
|
|
body[data-theme="fraud"] textarea,
|
|
body[data-theme="fraud"] select { font-family: Georgia, "Times New Roman", serif; }
|
|
body[data-theme="germini"] .card { backdrop-filter: blur(18px); }
|
|
body[data-theme="slopilot"] .primary-action,
|
|
body[data-theme="slopilot"] button:not(.secondary-action):not(.icon-button):not(.chat-item-delete) {
|
|
background: linear-gradient(135deg, var(--brand), var(--brand-strong));
|
|
}
|
|
body[data-theme="beta-ai"] .primary-action { box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 22%, transparent); }
|
|
body[data-theme="confusity"] .card { box-shadow: 0 10px 30px rgba(0,0,0,.07); }
|
|
|
|
/* ---------- Controls ---------- */
|
|
button, .secondary-action, .primary-action, .icon-button {
|
|
min-height: 42px;
|
|
padding: 10px 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius-md);
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
|
|
}
|
|
button:not(.secondary-action):not(.icon-button):not(.chat-item-delete):not(.settings-nav-item):not(.market-preview-toggle),
|
|
.primary-action {
|
|
color: var(--on-brand);
|
|
background: var(--brand);
|
|
}
|
|
.secondary-action, .icon-button {
|
|
color: var(--text);
|
|
background: var(--surface-raised);
|
|
border-color: var(--border);
|
|
}
|
|
button:hover:not(:disabled), .secondary-action:hover, .icon-button:hover { transform: translateY(-1px); }
|
|
.secondary-action:hover, .icon-button:hover { background: var(--surface-hover); border-color: var(--border-strong); }
|
|
button:disabled { cursor: not-allowed; opacity: .42; transform: none; }
|
|
.icon-button { width: 42px; padding: 0; }
|
|
.danger, .chat-drawer-action-danger { color: #fff !important; background: var(--danger) !important; }
|
|
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
|
|
outline: 3px solid color-mix(in srgb, var(--brand) 28%, transparent);
|
|
outline-offset: 2px;
|
|
}
|
|
.field, .compact-field { min-width: 0; display: grid; gap: 7px; }
|
|
.field > span, .compact-field > span, .market-sort-control > span, .market-search label {
|
|
color: var(--text-soft);
|
|
font-size: .84rem;
|
|
font-weight: 700;
|
|
}
|
|
input, textarea, select {
|
|
width: 100%; min-width: 0; max-width: 100%;
|
|
padding: 12px 14px;
|
|
color: var(--text);
|
|
background: var(--input-bg);
|
|
border: 1px solid var(--border-strong);
|
|
border-radius: var(--radius-md);
|
|
outline: none;
|
|
}
|
|
textarea { min-height: 110px; resize: vertical; }
|
|
input::placeholder, textarea::placeholder { color: var(--text-muted); }
|
|
input:focus, textarea:focus, select:focus { border-color: var(--brand); }
|
|
.status {
|
|
min-height: 44px;
|
|
margin: 0;
|
|
padding: 11px 14px;
|
|
color: var(--text-soft);
|
|
background: var(--surface-soft);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.status.error { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, var(--border)); }
|
|
.status.success { color: var(--success); background: color-mix(in srgb, var(--success) 10%, var(--surface-soft)); }
|
|
|
|
/* ---------- Authentication ---------- */
|
|
.app-shell { width: min(1600px, 100%); margin: 0 auto; }
|
|
.auth-card {
|
|
width: min(1040px, 100%);
|
|
min-height: min(650px, calc(100dvh - 36px));
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
|
|
overflow: hidden;
|
|
}
|
|
.auth-hero, .auth-panel { padding: clamp(28px, 5vw, 54px); }
|
|
.auth-hero {
|
|
display: grid;
|
|
place-content: center;
|
|
background: linear-gradient(145deg, var(--surface-soft), var(--surface));
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
.auth-panel { display: grid; align-content: center; gap: 18px; }
|
|
.brand { display: flex; align-items: center; gap: 18px; }
|
|
.logo {
|
|
width: 58px; height: 58px; display: grid; place-items: center;
|
|
color: var(--on-brand); background: var(--brand); border-radius: var(--radius-md); font-weight: 800;
|
|
}
|
|
.toggle-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px; background: var(--surface-soft); border-radius: var(--radius-md); }
|
|
.toggle { background: transparent !important; color: var(--text) !important; }
|
|
.toggle.active { color: var(--on-brand) !important; background: var(--brand) !important; }
|
|
.auth-screen { display: none; }
|
|
.auth-screen.active { display: block; }
|
|
.auth-form { display: grid; gap: 15px; }
|
|
.consent-container { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; color: var(--text-soft); font-size: .84rem; }
|
|
.consent-container input { width: auto; margin-top: 3px; }
|
|
|
|
/* ---------- Chat workspace ---------- */
|
|
.chat-card { height: calc(100dvh - 36px); min-height: 620px; overflow: hidden; }
|
|
.chat-layout { height: 100%; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
|
|
.chat-sidebar {
|
|
min-width: 0; min-height: 0; padding: 20px;
|
|
display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px;
|
|
background: var(--surface-soft); border-right: 1px solid var(--border);
|
|
}
|
|
.sidebar-top { display: grid; gap: 16px; }
|
|
.sidebar-workspace-card { display: grid; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
|
|
.sidebar-workspace-card h2 { margin-top: 3px; }
|
|
.sidebar-account-name {
|
|
width: fit-content; margin: 7px 0 0; padding: 5px 9px;
|
|
color: var(--text-soft); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 999px; font-size: .82rem;
|
|
}
|
|
.sidebar-workspace-actions, .sidebar-workspace-actions .primary-action { width: 100%; }
|
|
.compact-field input { min-height: 44px; border-radius: 999px; }
|
|
.sidebar-middle { min-height: 0; overflow: hidden; }
|
|
.chat-list { height: 100%; padding-right: 3px; display: grid; align-content: start; gap: 12px; overflow-y: auto; }
|
|
.chat-list-section, .chat-list-section-body { display: grid; gap: 8px; }
|
|
.chat-list-section-header { padding: 4px; }
|
|
.chat-item {
|
|
min-width: 0; padding: 11px 10px 11px 13px;
|
|
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center;
|
|
color: var(--text); background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
|
|
}
|
|
.chat-item:hover { background: var(--surface-hover); }
|
|
.chat-item.active { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
|
|
.chat-item-copy { min-width: 0; display: grid; gap: 2px; }
|
|
.chat-item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.chat-item-meta { color: var(--text-muted); font-size: .75rem; }
|
|
.chat-item-delete { min-height: 30px; padding: 5px 8px; color: var(--text-muted); background: transparent; border: 0; font-size: .72rem; }
|
|
.sidebar-footer { padding-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--border); }
|
|
.sidebar-footer .secondary-action { min-height: 38px; padding: 8px 13px; border-radius: 999px; font-size: .8rem; }
|
|
.chat-loading { padding: 14px; display: flex; align-items: center; gap: 10px; color: var(--text-soft); }
|
|
.chat-loading-dot { width: 8px; height: 8px; background: var(--brand); border-radius: 50%; animation: pulse 1.2s infinite; }
|
|
|
|
.chat-main { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--surface); }
|
|
.chat-header {
|
|
min-width: 0; min-height: 76px; padding: 14px 24px;
|
|
display: flex; align-items: center; gap: 16px;
|
|
border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px);
|
|
}
|
|
.sidebar-toggle { display: none; }
|
|
.chat-title-block { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
|
|
.chat-title { min-width: 0; }
|
|
.chat-title h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.chat-header-context { min-width: 0; display: flex; gap: 7px; }
|
|
.chat-context-item {
|
|
min-width: 0; padding: 6px 9px; display: grid; gap: 1px;
|
|
background: var(--surface-soft); border-radius: var(--radius-sm);
|
|
}
|
|
.chat-context-item > span { color: var(--text-muted); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
|
|
.chat-context-item > strong { max-width: 140px; overflow: hidden; color: var(--text-soft); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
|
|
.chat-context-button { min-height: 0; border: 0; color: inherit; text-align: left; justify-content: start; }
|
|
.chat-context-button:hover:not(:disabled) { background: var(--surface-hover); }
|
|
.chat-header-actions { display: flex; align-items: center; }
|
|
.overflow-trigger { min-height: 38px; padding: 8px 12px; border-radius: 999px; font-size: .8rem; }
|
|
|
|
.messages-panel {
|
|
min-height: 0;
|
|
padding: 28px max(16px, calc((100% - 940px) / 2));
|
|
display: flex; flex-direction: column; gap: 38px; overflow-y: auto;
|
|
}
|
|
.messages-empty {
|
|
width: min(680px, 100%); margin: auto; padding: clamp(24px, 5vw, 44px);
|
|
text-align: center; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-lg);
|
|
}
|
|
.messages-empty-title { margin-bottom: 8px; }
|
|
.messages-empty-copy { margin-bottom: 20px; color: var(--text-soft); }
|
|
.messages-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
|
|
.prompt-chip { min-height: 38px; padding: 8px 12px; color: var(--text); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 999px; }
|
|
.msg { position: relative; width: fit-content; max-width: min(760px, 88%); display: grid; gap: 5px; }
|
|
.msg.user { align-self: flex-end; padding: 10px 13px; color: var(--message-user-text); background: var(--message-user); border-radius: 17px 17px 5px 17px; }
|
|
.msg.bot, .msg.loading { width: fit-content; min-width: min(280px, 80%); align-self: flex-start; padding: 12px 14px; background: var(--message-bot); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
|
|
.msg-header { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: .72rem; }
|
|
.msg-content { min-width: 0; overflow-wrap: anywhere; }
|
|
.msg-content > :last-child { margin-bottom: 0; }
|
|
.msg-content pre { max-width: 100%; padding: 14px; overflow: auto; background: var(--canvas); border-radius: var(--radius-sm); }
|
|
.msg-content code { font-family: Consolas, monospace; }
|
|
.msg-actions { position: absolute; top: calc(100% + 4px); left: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; opacity: 0; transition: opacity .15s ease; }
|
|
.msg.user .msg-actions { right: 0; left: auto; justify-content: flex-end; }
|
|
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
|
|
.msg-action-btn { min-height: 30px; padding: 5px 8px; color: var(--text-soft) !important; background: transparent !important; border: 1px solid var(--border); border-radius: 8px; font-size: .7rem; }
|
|
.msg-variant-index { align-self: center; color: var(--text-muted); font-size: .7rem; }
|
|
.typing { display: flex; gap: 5px; }
|
|
.typing-dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; animation: typing 1.2s infinite; }
|
|
.typing-dot:nth-child(2) { animation-delay: .15s; } .typing-dot:nth-child(3) { animation-delay: .3s; }
|
|
.msg.loading { min-height: 58px; padding: 11px 14px; }
|
|
.loading-shell { display: flex; align-items: center; gap: 12px; }
|
|
.loading-bars { height: 18px; display: flex; align-items: center; gap: 3px; }
|
|
.loading-bar { width: 3px; height: 8px; background: var(--brand); border-radius: 999px; animation: loading-bar 1s ease-in-out infinite; }
|
|
.loading-bar:nth-child(2) { animation-delay: .12s; }
|
|
.loading-bar:nth-child(3) { animation-delay: .24s; }
|
|
.loading-bar:nth-child(4) { animation-delay: .36s; }
|
|
.loading-copy { color: var(--text-soft); font-size: .82rem; }
|
|
.streaming-content:empty { display: none; }
|
|
.streaming-content.has-content { display: block; }
|
|
|
|
.chat-activity-overlay {
|
|
position: absolute; top: 88px; left: 50%; z-index: 20;
|
|
width: min(430px, calc(100% - 32px));
|
|
transform: translateX(-50%); pointer-events: none;
|
|
}
|
|
.chat-activity-card {
|
|
padding: 11px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; align-items: center;
|
|
background: color-mix(in srgb, var(--surface-raised) 94%, transparent); border: 1px solid var(--border);
|
|
border-radius: var(--radius-md); box-shadow: var(--shadow-md); backdrop-filter: blur(14px);
|
|
}
|
|
.chat-activity-mark { grid-row: 1 / span 3; display: flex; gap: 3px; }
|
|
.chat-activity-mark span { width: 5px; height: 5px; background: var(--brand); border-radius: 50%; animation: typing 1.2s infinite; }
|
|
.chat-activity-mark span:nth-child(2) { animation-delay: .15s; }
|
|
.chat-activity-mark span:nth-child(3) { animation-delay: .3s; }
|
|
.chat-activity-card .eyebrow { font-size: .58rem; }
|
|
.chat-activity-card h3 { font-size: .86rem; letter-spacing: -.01em; }
|
|
.chat-activity-card .subtitle { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
.input-shell { padding: 10px clamp(16px, 5vw, 68px) 18px; background: linear-gradient(transparent, var(--surface) 24%); }
|
|
.input-meta, .input-container { width: min(940px, 100%); margin-inline: auto; }
|
|
.input-meta { margin-bottom: 5px; padding-left: 10px; }
|
|
.composer-hint { margin: 0; color: var(--text-muted); font-size: .72rem; }
|
|
.input-container { padding: 7px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "search message send"; gap: 7px; align-items: end; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: var(--shadow-sm); }
|
|
#webSearch { grid-area: search; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 17px; }
|
|
#webSearch[aria-pressed="true"] { color: var(--brand-strong); background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
|
|
.msg-sources { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; font-size: .8rem; }
|
|
.msg-sources-heading { color: var(--text-muted); margin-bottom: 6px; }
|
|
.msg-source { display: flex; min-width: 0; flex-direction: column; gap: 2px; margin-top: 6px; }
|
|
.msg-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.msg-source small { color: var(--text-muted); }
|
|
#msgInput { grid-area: message; min-height: 44px; max-height: 160px; padding: 11px 13px; resize: none; background: transparent; border: 0; box-shadow: none; }
|
|
#send { grid-area: send; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border-radius: 17px; }
|
|
#send::after { content: "\2191"; font-size: 1.1rem; font-weight: 800; }
|
|
#send.loading::after { content: "■"; font-size: .85rem; }
|
|
.generation-settings-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
|
|
.generation-settings-grid .field-wide, .generation-settings-grid button { grid-column: 1 / -1; }
|
|
|
|
/* ---------- Chat settings drawer ---------- */
|
|
.chat-drawer {
|
|
position: fixed; inset: 16px 16px auto auto; z-index: 100;
|
|
width: min(372px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
|
|
background: transparent;
|
|
}
|
|
.chat-drawer-panel {
|
|
max-height: calc(100dvh - 32px); padding: 18px;
|
|
display: grid; grid-template-rows: auto minmax(0, 1fr);
|
|
background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden;
|
|
}
|
|
.chat-drawer-header { padding-bottom: 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
|
|
#chatDrawerClose { width: 38px; min-width: 38px; min-height: 38px; padding: 0; border-radius: 50%; font-size: 1.25rem; }
|
|
.chat-drawer-body { min-height: 0; overflow-y: auto; }
|
|
.chat-drawer-summary { padding: 12px 0 2px; }
|
|
.chat-drawer-summary:not(:has(.context-pill:not(.hidden))) { display: none; }
|
|
.chat-drawer-pills { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.context-pill { padding: 5px 8px; color: var(--text-soft); background: var(--surface-soft); border-radius: 999px; font-size: .7rem; }
|
|
.chat-drawer-section, .chat-drawer-more, .chat-drawer-danger { padding: 12px 0; border-bottom: 1px solid var(--border); }
|
|
.chat-drawer-danger { border-bottom: 0; }
|
|
.chat-drawer-row { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; list-style: none; }
|
|
.chat-drawer-row::-webkit-details-marker { display: none; }
|
|
.chat-drawer-row-label, .chat-drawer-row-meta { min-width: 0; display: grid; gap: 1px; }
|
|
.chat-drawer-row-meta { max-width: 55%; text-align: right; }
|
|
.chat-drawer-row-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
|
|
.chat-drawer-row-hint { color: var(--brand); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
|
|
.chat-drawer-disclosure-panel { margin-top: 10px; }
|
|
.chat-drawer details:not([open]) > .chat-drawer-disclosure-panel { display: none !important; }
|
|
.chat-drawer details[open] > .chat-drawer-disclosure-panel { display: grid; }
|
|
.chat-drawer-action-list { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
|
|
.chat-drawer-action { min-width: 0; min-height: 36px; padding: 7px 9px; justify-content: flex-start; background: var(--surface-soft); border-color: transparent; border-radius: var(--radius-sm); font-size: .76rem; }
|
|
#backupWorkspace, #importWorkspace, #logout, .chat-drawer-action-danger { grid-column: 1 / -1; }
|
|
.model-panel, .persona-panel, .model-select, .model-help, .persona-section { min-width: 0; gap: 10px; }
|
|
.model-panel, .persona-panel, .persona-section { display: grid; }
|
|
.model-select-header, .model-help-header, .persona-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
|
.model-select-control { position: relative; }
|
|
.model-count, .model-help-badge { color: var(--text-muted); font-size: .7rem; }
|
|
.model-help { padding: 10px; background: var(--surface-soft); border-radius: var(--radius-sm); }
|
|
.model-help-summary { margin: 5px 0 0; color: var(--text-soft); font-size: .76rem; }
|
|
.persona-section-header h2 { font-size: 1rem; }
|
|
.persona-section-actions { display: flex; gap: 6px; }
|
|
.persona-section-actions > * { min-height: 32px; padding: 5px 8px; font-size: .7rem; }
|
|
.chat-drawer .persona-list { max-height: 210px; }
|
|
|
|
/* ---------- Settings and Market ---------- */
|
|
.settings-shell, .market-shell { width: min(1320px, 100%); margin: 0 auto; padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
|
|
.market-header { padding-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border); }
|
|
.market-header-actions, .market-section-actions, .action-pair { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
|
|
.market-header-actions .secondary-action { min-height: 40px; padding: 8px 14px; border-radius: 999px; }
|
|
.market-search { width: min(720px, 100%); display: grid; gap: 7px; }
|
|
.market-search input { border-radius: 999px; }
|
|
.settings-layout { min-width: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
|
|
.settings-nav { position: sticky; top: 18px; padding: 7px; display: grid; gap: 5px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); }
|
|
.settings-nav-item { min-height: 43px; padding: 9px 12px; justify-content: flex-start; color: var(--text); background: transparent !important; border: 0; border-radius: var(--radius-md); }
|
|
.settings-nav-item:hover { background: var(--surface-hover) !important; }
|
|
.settings-nav-item.active { color: var(--on-brand) !important; background: var(--brand) !important; }
|
|
.settings-content, .settings-view { min-width: 0; }
|
|
.settings-view { display: none; gap: 16px; }
|
|
.settings-view.active { display: grid; }
|
|
.settings-panel { min-width: 0; padding: clamp(18px, 2.5vw, 28px); display: grid; gap: 16px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); }
|
|
.settings-panel-compact { max-width: 720px; }
|
|
.settings-section-header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
|
|
.settings-section-header > :first-child { min-width: 180px; flex: 1 1 260px; }
|
|
.settings-section-header .action-pair { flex: 0 1 auto; }
|
|
.settings-form-stack { min-width: 0; display: grid; gap: 15px; }
|
|
.settings-form-stack button { width: fit-content; min-width: 170px; justify-self: end; border-radius: 999px; }
|
|
.settings-theme-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
|
|
.settings-theme-note { min-width: 0; padding: 12px; display: grid; gap: 4px; background: var(--surface-soft); border-radius: var(--radius-md); }
|
|
.settings-theme-note-label { color: var(--text-muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
|
|
.settings-quick-actions, .persona-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
|
|
.diagnostics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
|
|
.diagnostics-card, .diagnostics-list-item { padding: 12px; background: var(--surface-soft); border-radius: var(--radius-md); }
|
|
|
|
.market-settings-layout .settings-panel { min-height: 280px; }
|
|
.market-section-actions { align-items: end; }
|
|
.market-sort-control { min-width: 190px; display: grid; gap: 5px; }
|
|
.persona-list { min-width: 0; display: grid; gap: 10px; }
|
|
#marketPersonaList, #marketUserPersonaList { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
|
|
.persona-item { min-width: 0; padding: 15px; display: grid; gap: 9px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); }
|
|
.persona-item.active { border-color: var(--brand); }
|
|
.persona-title-row { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
|
|
.persona-title-row h4 { overflow-wrap: anywhere; }
|
|
.persona-role-tag { padding: 4px 7px; color: var(--brand); background: var(--brand-soft); border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
|
|
.persona-role-tag.user { color: var(--success); }
|
|
.persona-item-actions { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.persona-item-actions button { min-height: 32px; padding: 5px 9px; border-radius: 999px; font-size: .7rem; }
|
|
.persona-empty-state { padding: 18px; display: grid; justify-items: start; gap: 10px; background: var(--surface-soft); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
|
|
.market-favorite-button { width: 34px; min-width: 34px; min-height: 32px; padding: 0; }
|
|
|
|
/* ---------- Modals and overlays ---------- */
|
|
.modal-overlay, .side-panel-overlay, .activity-overlay {
|
|
position: fixed; inset: 0; z-index: 200; padding: 18px;
|
|
display: grid; place-items: center;
|
|
background: rgba(8, 12, 18, .58); backdrop-filter: blur(10px);
|
|
}
|
|
.modal-card, .side-panel-card, .activity-card {
|
|
width: min(680px, 100%); max-height: calc(100dvh - 36px); padding: 22px;
|
|
display: grid; gap: 16px; overflow-y: auto;
|
|
background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
|
|
}
|
|
.persona-modal-card { width: min(860px, 100%); }
|
|
.market-preview-card { width: min(900px, 100%); }
|
|
.modal-header, .market-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
|
|
.persona-form, .roleplay-starter-form { display: grid; gap: 16px; }
|
|
.persona-form-grid, .market-preview-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.field-wide { grid-column: 1 / -1; }
|
|
.persona-form-intro, .roleplay-starter-intro, .dialogue-format-card { padding: 13px; background: var(--surface-soft); border-radius: var(--radius-md); }
|
|
.market-preview-details > div { padding: 13px; background: var(--surface-soft); border-radius: var(--radius-md); }
|
|
.market-preview-details p { margin-bottom: 0; color: var(--text-soft); white-space: pre-wrap; }
|
|
.market-preview-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
|
|
.market-preview-toggle { min-height: 30px; padding: 4px 8px; color: var(--brand) !important; background: transparent !important; border: 0; font-size: .72rem; }
|
|
.onboarding-choices { display: grid; gap: 8px; }
|
|
.onboarding-actions { display: flex; justify-content: space-between; gap: 8px; }
|
|
.loading-wave { height: 30px; display: flex; align-items: center; justify-content: center; gap: 5px; }
|
|
.loading-wave span { width: 5px; height: 16px; background: var(--brand); border-radius: 999px; animation: wave 1s infinite; }
|
|
.loading-wave span:nth-child(2) { animation-delay: .12s; } .loading-wave span:nth-child(3) { animation-delay: .24s; }
|
|
|
|
/* ---------- Responsive ---------- */
|
|
@media (max-width: 980px) {
|
|
body { padding: 0; }
|
|
.chat-card, .settings-shell, .market-shell { min-height: 100dvh; border: 0; border-radius: 0; }
|
|
.chat-layout { grid-template-columns: 1fr; }
|
|
.chat-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; width: min(340px, 90vw); transform: translateX(-104%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
|
|
body.sidebar-open .chat-sidebar { transform: translateX(0); }
|
|
.sidebar-toggle { display: inline-flex; }
|
|
.chat-header-context { display: none; }
|
|
.settings-layout { grid-template-columns: 1fr; }
|
|
.settings-nav { position: static; display: flex; overflow-x: auto; }
|
|
.settings-nav-item { flex: 0 0 auto; }
|
|
.market-settings-layout .settings-nav { display: grid; grid-template-columns: 1fr 1fr; }
|
|
}
|
|
@media (max-width: 700px) {
|
|
.auth-card { min-height: calc(100dvh - 24px); grid-template-columns: 1fr; }
|
|
.auth-hero { padding: 24px; place-content: start; border-right: 0; border-bottom: 1px solid var(--border); }
|
|
.auth-panel { padding: 24px; }
|
|
.market-header { display: grid; }
|
|
.market-header-actions { justify-content: flex-start; }
|
|
.settings-theme-row, .persona-form-grid, .market-preview-details { grid-template-columns: 1fr; }
|
|
.field-wide { grid-column: auto; }
|
|
.settings-section-header .action-pair { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
|
|
.settings-section-header .action-pair > * { width: 100%; min-width: 0; }
|
|
.chat-drawer { inset: auto 8px 8px 8px; width: auto; }
|
|
.chat-drawer-panel { max-height: 82dvh; }
|
|
.messages-panel { padding: 20px 10px; }
|
|
.input-shell { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.chat-header { padding: 12px; }
|
|
.overflow-trigger-label { font-size: 0; }
|
|
.overflow-trigger-label::after { content: "Settings"; font-size: .76rem; }
|
|
.settings-shell, .market-shell { padding: 18px 14px; }
|
|
.market-header-actions, .market-section-actions, .action-pair, .settings-section-header .action-pair { display: grid; grid-template-columns: 1fr; width: 100%; }
|
|
.market-header-actions > *, .market-section-actions > *, .action-pair > * { width: 100%; }
|
|
.messages-empty { padding: 22px 16px; }
|
|
.messages-empty-actions { display: grid; }
|
|
.chat-drawer-action-list { grid-template-columns: 1fr; }
|
|
.chat-drawer-action-list > * { grid-column: auto; }
|
|
}
|
|
|
|
@media (hover: none) { .msg-actions { opacity: 1; } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
|
}
|
|
@keyframes typing { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
|
|
@keyframes loading-bar { 0%, 100% { height: 7px; opacity: .45; } 50% { height: 18px; opacity: 1; } }
|
|
@keyframes pulse { 50% { opacity: .35; } }
|
|
@keyframes wave { 50% { height: 28px; } }
|
|
|
|
/* Permanent Elsewhere identity, shared by every appearance style. */
|
|
.brand-wordmark { font-family: "Manrope", "Segoe UI", sans-serif; font-weight: 700; letter-spacing: -.055em; }
|
|
.brand-tagline { margin: 12px 0 0; color: var(--text-soft); font-size: .95rem; }
|
|
.doorway-mark { position: relative; flex-shrink: 0; }
|
|
.doorway-mark::before { content: ""; width: 22px; height: 30px; border: 2px solid currentColor; border-bottom: 0; border-radius: 10px 10px 0 0; }
|
|
.doorway-mark::after { content: ""; position: absolute; width: 13px; height: 25px; left: calc(50% - 10px); top: calc(50% - 8px); border: 2px solid currentColor; background: var(--brand); transform: skewY(-18deg); transform-origin: left top; }
|