2591 lines
50 KiB
CSS
2591 lines
50 KiB
CSS
:root,
|
|
[data-theme='light'] {
|
|
--color-bg: #faf9f5;
|
|
--color-surface: #ffffff;
|
|
--color-surface-2: #f4f2ea;
|
|
--color-surface-3: #ece9de;
|
|
--color-border: #ebe7da;
|
|
--color-border-strong: #d8d2c0;
|
|
--color-border-focus: #c2541f;
|
|
--color-text: #2a2622;
|
|
--color-text-secondary: #6b6660;
|
|
--color-text-tertiary: #a09a8e;
|
|
--color-brand: #c2541f;
|
|
--color-brand-hover: #a64419;
|
|
--color-brand-soft: #fdf2ea;
|
|
--color-brand-soft-2: #fae3d2;
|
|
--color-success: #4f8a4d;
|
|
--color-success-soft: #ecf3ec;
|
|
--color-warning: #b8782a;
|
|
--color-warning-soft: #fdf3e3;
|
|
--color-danger: #c0392b;
|
|
--color-danger-soft: #fbeae8;
|
|
--color-info: #4a6fa5;
|
|
--color-info-soft: #ecf1f8;
|
|
--shadow-xs: 0 1px 2px rgba(40, 30, 20, 0.04);
|
|
--shadow-sm: 0 1px 2px rgba(40, 30, 20, 0.04), 0 1px 3px rgba(40, 30, 20, 0.05);
|
|
--shadow-md: 0 2px 4px rgba(40, 30, 20, 0.04), 0 6px 16px rgba(40, 30, 20, 0.06);
|
|
--shadow-lg: 0 4px 12px rgba(40, 30, 20, 0.06), 0 16px 40px rgba(40, 30, 20, 0.08);
|
|
--shadow-xl: 0 8px 24px rgba(40, 30, 20, 0.08), 0 24px 60px rgba(40, 30, 20, 0.12);
|
|
--shadow-focus: 0 0 0 3px rgba(194, 84, 31, 0.18);
|
|
--gradient-brand: linear-gradient(135deg, #c2541f, #e07b3e);
|
|
--gradient-hero: radial-gradient(1200px 600px at 0% 0%, #fae3d2 0%, transparent 60%),
|
|
radial-gradient(900px 500px at 100% 0%, #f0e8d6 0%, transparent 55%),
|
|
linear-gradient(180deg, #faf9f5 0%, #f4f2ea 100%);
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
--color-bg: #1a1816;
|
|
--color-surface: #221f1c;
|
|
--color-surface-2: #2b2824;
|
|
--color-surface-3: #36322c;
|
|
--color-border: #36322c;
|
|
--color-border-strong: #4a443c;
|
|
--color-border-focus: #e07b3e;
|
|
--color-text: #f3efe6;
|
|
--color-text-secondary: #b6afa3;
|
|
--color-text-tertiary: #7e7869;
|
|
--color-brand: #e07b3e;
|
|
--color-brand-hover: #f0935a;
|
|
--color-brand-soft: #2d2017;
|
|
--color-brand-soft-2: #3a2a1c;
|
|
--color-success: #7fb87d;
|
|
--color-success-soft: #1e2a1d;
|
|
--color-warning: #d49a4a;
|
|
--color-warning-soft: #2c2316;
|
|
--color-danger: #e07060;
|
|
--color-danger-soft: #2a1a17;
|
|
--color-info: #8aa9d6;
|
|
--color-info-soft: #1a2230;
|
|
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.35);
|
|
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.45);
|
|
--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);
|
|
--shadow-focus: 0 0 0 3px rgba(224, 123, 62, 0.25);
|
|
--gradient-brand: linear-gradient(135deg, #c2541f, #e07b3e);
|
|
--gradient-hero: radial-gradient(1200px 600px at 0% 0%, #3a2a1c 0%, transparent 60%),
|
|
radial-gradient(900px 500px at 100% 0%, #2a2620 0%, transparent 55%),
|
|
linear-gradient(180deg, #1a1816 0%, #221f1c 100%);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
body {
|
|
transition: background-color 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.login-page {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
background: var(--gradient-hero);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.login-deco {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(40px);
|
|
}
|
|
|
|
.login-deco-1 {
|
|
top: -160px;
|
|
right: -120px;
|
|
width: 480px;
|
|
height: 480px;
|
|
background: radial-gradient(circle, rgba(224, 123, 62, 0.18), transparent 60%);
|
|
}
|
|
|
|
.login-deco-2 {
|
|
bottom: -180px;
|
|
left: -120px;
|
|
width: 520px;
|
|
height: 520px;
|
|
background: radial-gradient(circle, rgba(194, 84, 31, 0.16), transparent 60%);
|
|
}
|
|
|
|
.login-content {
|
|
width: 1440px;
|
|
max-width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: stretch;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.login-brand-panel {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 60px 80px;
|
|
}
|
|
|
|
.login-brand-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.login-brand-logo {
|
|
width: 40px;
|
|
height: 40px;
|
|
flex: 0 0 auto;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 12px 22px rgba(17, 103, 255, 0.16));
|
|
}
|
|
|
|
.login-brand-name {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.login-title {
|
|
font-size: 48px;
|
|
line-height: 1.15;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
color: var(--color-text);
|
|
margin: 0;
|
|
max-width: 520px;
|
|
}
|
|
|
|
.login-title-highlight {
|
|
background: var(--gradient-brand);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.login-subtitle {
|
|
font-size: 16px;
|
|
color: var(--color-text-secondary);
|
|
margin-top: 20px;
|
|
max-width: 480px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.login-features {
|
|
display: flex;
|
|
gap: 24px;
|
|
margin-top: 40px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.login-feature-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.login-feature-icon {
|
|
color: var(--color-brand);
|
|
}
|
|
|
|
.login-form-panel {
|
|
width: 480px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px;
|
|
}
|
|
|
|
.login-card {
|
|
width: 100%;
|
|
max-width: 380px;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 20px;
|
|
padding: 36px 32px;
|
|
box-shadow: var(--shadow-xl);
|
|
}
|
|
|
|
.login-card-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.login-card-title {
|
|
margin: 0;
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.login-card-subtitle {
|
|
color: var(--color-text-secondary);
|
|
font-size: 13px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.login-form {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.login-register-alert {
|
|
margin-bottom: 16px;
|
|
border-radius: 10px;
|
|
background: var(--color-brand-soft);
|
|
border: 1px solid var(--color-brand-soft-2);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.login-submit-btn {
|
|
margin-top: 4px;
|
|
height: 44px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.login-footer {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: var(--color-text-tertiary);
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.layout-shell {
|
|
display: flex;
|
|
height: 100vh;
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
.main {
|
|
flex: 1;
|
|
overflow: auto;
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
.main-chat {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 248px;
|
|
background: var(--color-surface);
|
|
border-right: 1px solid var(--color-border);
|
|
color: var(--color-text);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 14px 12px;
|
|
}
|
|
|
|
.sidebar .brand {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
padding: 6px 10px 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sidebar .brand .brand-logo {
|
|
width: 28px;
|
|
height: 28px;
|
|
flex: 0 0 auto;
|
|
object-fit: contain;
|
|
filter: drop-shadow(0 8px 16px rgba(17, 103, 255, 0.16));
|
|
}
|
|
|
|
.sidebar .nav-section-label {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--color-text-tertiary);
|
|
padding: 14px 12px 6px;
|
|
}
|
|
|
|
.sidebar .nav-item {
|
|
padding: 7px 12px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 1px;
|
|
color: var(--color-text-secondary);
|
|
text-decoration: none;
|
|
font-size: 13.5px;
|
|
font-weight: 500;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.sidebar .nav-item:hover {
|
|
background: var(--color-surface-2);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.sidebar .nav-item.active {
|
|
background: var(--color-brand-soft);
|
|
color: var(--color-brand);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar .nav-item .nav-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.sidebar .kbd {
|
|
font-size: 10.5px;
|
|
color: var(--color-text-tertiary);
|
|
background: var(--color-surface-2);
|
|
border: 1px solid var(--color-border);
|
|
padding: 1px 5px;
|
|
border-radius: 4px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
}
|
|
|
|
.sidebar-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
cursor: pointer;
|
|
border-radius: 10px;
|
|
background: var(--color-surface-2);
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.agent-card {
|
|
background: var(--color-surface);
|
|
border-radius: 14px;
|
|
padding: 20px;
|
|
border: 1px solid var(--color-border);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
|
|
.agent-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
border-color: var(--color-border-strong);
|
|
}
|
|
|
|
.agent-card .avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: var(--gradient-brand);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 19px;
|
|
font-weight: 700;
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.agent-card .desc {
|
|
color: var(--color-text-secondary);
|
|
font-size: 13px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
min-height: 40px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 0;
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.page-hero {
|
|
background: var(--gradient-hero);
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 56px 32px 40px;
|
|
}
|
|
|
|
.page-hero .hero-title {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.page-hero .hero-subtitle {
|
|
font-size: 15px;
|
|
color: var(--color-text-secondary);
|
|
margin: 0;
|
|
max-width: 640px;
|
|
}
|
|
|
|
.chat-shell {
|
|
display: flex;
|
|
height: 100vh;
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
.chat-side {
|
|
width: 260px;
|
|
border-right: 1px solid var(--color-border);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
height: 100%;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.chat-main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-bg);
|
|
min-width: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.chat-content-row {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.chat-header {
|
|
height: 60px;
|
|
padding: 0 24px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.chat-header-agent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.chat-header-agent-title {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.chat-header-agent-name {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
color: var(--color-text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.chat-header-agent-desc {
|
|
font-size: 12px;
|
|
color: var(--color-text-tertiary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 380px;
|
|
}
|
|
|
|
.chat-header-agent-meta {
|
|
font-size: 12px;
|
|
color: var(--color-text-tertiary);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
max-width: 720px;
|
|
}
|
|
|
|
.chat-header-stream-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.chat-header-stream-label {
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.chat-body {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
.chat-outline {
|
|
width: 260px;
|
|
border-left: 1px solid var(--color-border);
|
|
background: var(--color-surface);
|
|
padding: 14px 12px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.chat-outline-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.chat-outline-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.chat-outline-item {
|
|
border: 0;
|
|
background: var(--color-surface);
|
|
border-radius: 10px;
|
|
padding: 4px 10px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.chat-outline-item.active {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.chat-outline-index {
|
|
font-size: 12px;
|
|
color: var(--color-text-tertiary);
|
|
line-height: 1.4;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.chat-outline-text {
|
|
font-size: 12.5px;
|
|
line-height: 1.4;
|
|
color: var(--color-text);
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.chat-content-row > .chat-outline {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
html {
|
|
font-size: clamp(14px, 4.2667vw, 16px);
|
|
}
|
|
|
|
.layout-shell > .sidebar {
|
|
display: none;
|
|
}
|
|
|
|
.main {
|
|
width: 100vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mobile-topbar {
|
|
height: 3rem;
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0 0.5rem;
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.mobile-topbar-title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
.chat-shell {
|
|
height: 100%;
|
|
}
|
|
|
|
.chat-header {
|
|
height: auto;
|
|
min-height: 3.5rem;
|
|
padding: 0.625rem 0.75rem;
|
|
gap: 0.625rem;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
background-color: transparent;
|
|
border:0;
|
|
}
|
|
|
|
.chat-header-agent-name {
|
|
max-width: 220px;
|
|
}
|
|
|
|
.chat-header-agent-desc,
|
|
.chat-header-agent-meta {
|
|
display: none;
|
|
}
|
|
|
|
.chat-body .messages-container {
|
|
max-width: 100%;
|
|
padding: 1.125rem 0.75rem 6rem;
|
|
}
|
|
|
|
.bubble {
|
|
max-width: 92%;
|
|
padding: 0.75rem 0.875rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.chat-input-wrapper {
|
|
max-width: 100%;
|
|
padding: 0 0.75rem 1rem;
|
|
}
|
|
|
|
.chat-input-actions {
|
|
top: -22px;
|
|
right: 0;
|
|
}
|
|
|
|
.chat-model-select {
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.chat-input-toolbar {
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.chat-input-toolbar-left {
|
|
gap: 0.5rem;
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
|
|
.chat-input-toolbar .chat-send-button {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.chat-model-select .ant-select-selector {
|
|
padding: 0 1.25rem 0 0 !important;
|
|
}
|
|
|
|
.chat-model-select .ant-select-selection-item {
|
|
max-width: 10rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.main-content {
|
|
min-height: 0;
|
|
}
|
|
|
|
.chat-body .messages-container {
|
|
max-width: 780px;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
padding: 16px 12px 80px;
|
|
}
|
|
|
|
.bubble {
|
|
max-width: 78%;
|
|
display: inline-block;
|
|
padding: 14px 18px;
|
|
border-radius: 14px;
|
|
margin-bottom: 14px;
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
line-height: 1.65;
|
|
font-size: 14.5px;
|
|
}
|
|
|
|
.bubble.user {
|
|
background: #0a84ff;
|
|
color: #ffffff;
|
|
margin-left: auto;
|
|
border-bottom-right-radius: 5px;
|
|
}
|
|
|
|
.bubble.assistant {
|
|
background: #e9e9eb;
|
|
color: #111827;
|
|
border: 0;
|
|
border-bottom-left-radius: 5px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.bubble.assistant p {
|
|
margin: 0 0 5px;
|
|
}
|
|
|
|
.bubble.assistant p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.bubble.assistant h1,
|
|
.bubble.assistant h2,
|
|
.bubble.assistant h3,
|
|
.bubble.assistant h4,
|
|
.bubble.assistant h5,
|
|
.bubble.assistant h6 {
|
|
margin: 0.2em 0 0.1em;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.bubble.assistant ol,
|
|
.bubble.assistant ul {
|
|
margin: 0.15em 0;
|
|
padding-left: 1.25em;
|
|
}
|
|
|
|
.bubble.assistant li {
|
|
margin: 0.05em 0;
|
|
}
|
|
|
|
.bubble.assistant hr {
|
|
margin: 0.4em 0;
|
|
}
|
|
|
|
.bubble.assistant li > p {
|
|
margin: 0.15em 0;
|
|
}
|
|
|
|
.bubble.assistant blockquote {
|
|
margin: 0.2em 0;
|
|
padding: 0.2em 0.6em;
|
|
border-left: 3px solid var(--color-border);
|
|
background: rgba(15, 23, 42, 0.03);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.bubble.assistant blockquote p {
|
|
margin: 0.2em 0;
|
|
}
|
|
|
|
.chat-copy-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.chat-copy-icon:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.bubble.assistant table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 0.35em 0;
|
|
font-size: 13.5px;
|
|
}
|
|
|
|
.bubble.assistant th,
|
|
.bubble.assistant td {
|
|
border: 1px solid var(--color-border);
|
|
padding: 6px 8px;
|
|
text-align: left;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.bubble.assistant thead th {
|
|
background: var(--color-surface-2);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.chat-input-wrapper {
|
|
width: 100%;
|
|
max-width: 820px;
|
|
margin: 0 auto;
|
|
padding: 0 24px 24px;
|
|
}
|
|
|
|
.chat-input-card {
|
|
width: 100%;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 20px;
|
|
padding: 14px 16px 12px;
|
|
min-height: 110px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.chat-input-card-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.chat-input-actions {
|
|
position: absolute;
|
|
top: -24px;
|
|
right: 8px;
|
|
display: flex;
|
|
gap: 4px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.chat-input-action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.chat-input-action-btn:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.chat-input-action-btn-primary {
|
|
color: var(--color-brand);
|
|
}
|
|
|
|
.chat-input-action-btn-primary:hover {
|
|
color: var(--color-brand);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.chat-input-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.chat-input-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding-top: 8px;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
|
|
.chat-input-toolbar-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.chat-model-select {
|
|
min-width: 240px;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.chat-model-select .ant-select-selector {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
padding: 0 24px 0 0 !important;
|
|
}
|
|
|
|
.chat-model-select .ant-select-selection-item {
|
|
color: var(--color-text);
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.chat-model-select .ant-select-selection-placeholder {
|
|
color: var(--color-text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.chat-model-select-arrow {
|
|
font-size: 10px;
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.chat-tool-button {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.chat-upload {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.chat-upload .ant-upload {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.ant-btn.chat-send-button,
|
|
.chat-send-button.ant-btn {
|
|
width: 40px !important;
|
|
min-width: 40px !important;
|
|
max-width: 40px !important;
|
|
height: 40px !important;
|
|
min-height: 40px !important;
|
|
max-height: 40px !important;
|
|
flex: 0 0 40px;
|
|
padding: 0 !important;
|
|
border-radius: 9999px !important;
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.ant-btn.chat-send-button .ant-btn-icon,
|
|
.chat-send-button.ant-btn .ant-btn-icon {
|
|
margin-inline-start: 0;
|
|
}
|
|
|
|
.chat-send-button-primary {
|
|
background: var(--color-brand);
|
|
border: none;
|
|
}
|
|
|
|
.chat-stop-icon {
|
|
display: block;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: currentColor;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.session-sidebar {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.session-sidebar-new {
|
|
margin-bottom: 8px;
|
|
background: var(--ss-primary);
|
|
border: none;
|
|
}
|
|
|
|
.session-sidebar-search {
|
|
margin-top: 4px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.session-sidebar .ant-input-affix-wrapper,
|
|
.session-sidebar .ant-input-affix-wrapper:hover,
|
|
.session-sidebar .ant-input-affix-wrapper-focused {
|
|
background: var(--ss-input-bg);
|
|
border-color: var(--ss-border);
|
|
}
|
|
|
|
.session-sidebar .ant-input {
|
|
color: var(--ss-text);
|
|
}
|
|
|
|
.session-sidebar-scroll {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.session-sidebar-loading {
|
|
padding: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.session-sidebar-search-section {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.session-sidebar-search-section-title {
|
|
font-size: 11px;
|
|
color: var(--ss-text-dim);
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.session-sidebar-search-hit {
|
|
cursor: pointer;
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
margin-bottom: 2px;
|
|
background: var(--ss-bg-search);
|
|
font-size: 12px;
|
|
color: var(--ss-text);
|
|
}
|
|
|
|
.session-sidebar-search-hit.active {
|
|
background: var(--ss-bg-active);
|
|
}
|
|
|
|
.session-sidebar-search-msg-hit {
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
margin-bottom: 4px;
|
|
background: var(--ss-bg-search);
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.session-sidebar-search-msg-hit.role-user {
|
|
border-left-color: #6366f1;
|
|
}
|
|
|
|
.session-sidebar-search-msg-hit.role-assistant {
|
|
border-left-color: #10b981;
|
|
}
|
|
|
|
.session-sidebar-search-msg-meta {
|
|
font-size: 11px;
|
|
color: var(--ss-text-dim);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.session-sidebar-search-msg-snippet {
|
|
font-size: 12px;
|
|
color: var(--ss-text);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.session-sidebar-seg {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.session-sidebar-seg-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.session-sidebar-list {
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.session-sidebar-item {
|
|
cursor: pointer;
|
|
padding: 8px 10px;
|
|
background: transparent;
|
|
border-radius: 6px;
|
|
border: 1px solid transparent;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.session-sidebar-item:hover {
|
|
background: var(--ss-bg-hover);
|
|
}
|
|
|
|
.session-sidebar-item.active {
|
|
background: var(--ss-bg-active);
|
|
border-color: var(--ss-border-active);
|
|
}
|
|
|
|
.session-sidebar-item-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.session-sidebar-item-title {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--ss-text);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.session-sidebar-item-title.active {
|
|
font-weight: 600;
|
|
color: var(--ss-text-active);
|
|
}
|
|
|
|
.session-sidebar-item-subtitle {
|
|
font-size: 11px;
|
|
color: var(--ss-text-dim);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.session-sidebar-item-actions {
|
|
display: flex;
|
|
gap: 2px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.session-sidebar mark {
|
|
background: #fef3c7;
|
|
color: #b45309;
|
|
padding: 0 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.chat-disclaimer {
|
|
text-align: center;
|
|
font-size: 11px;
|
|
color: var(--color-text-tertiary);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.agent-model-dropdown-trigger {
|
|
width: 100%;
|
|
min-height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 12px;
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
|
|
.agent-model-dropdown-summary {
|
|
flex-shrink: 0;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.agent-model-dropdown-values {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--color-text-secondary);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.agent-model-dropdown-arrow {
|
|
flex-shrink: 0;
|
|
font-size: 12px;
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.agent-model-dropdown-panel {
|
|
width: min(720px, calc(100vw - 64px));
|
|
max-height: 360px;
|
|
overflow-y: auto;
|
|
padding: 12px;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 12px;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.agent-model-checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.agent-model-checkbox-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-inline-start: 0;
|
|
padding: 12px 14px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 12px;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.agent-model-checkbox-item .ant-checkbox {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.agent-model-checkbox-item .ant-checkbox + span {
|
|
width: 100%;
|
|
padding-inline-start: 10px;
|
|
}
|
|
|
|
.agent-model-checkbox-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
width: 100%;
|
|
}
|
|
|
|
.agent-model-checkbox-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.agent-model-checkbox-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
object-fit: contain;
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.agent-model-checkbox-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 500;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.agent-model-checkbox-price {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-left: 8px;
|
|
font-size: 10px;
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.chat-input-textarea {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
padding: 10px 4px !important;
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
resize: none;
|
|
background: transparent !important;
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
.chat-input-textarea:hover,
|
|
.chat-input-textarea:focus,
|
|
.chat-input-textarea:focus-visible,
|
|
.chat-input-textarea:active {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
.monica-editor-column {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 24px;
|
|
}
|
|
|
|
.monica-section-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.monica-card {
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.monica-header {
|
|
height: 56px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24px;
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.agent-editor-shell {
|
|
background:
|
|
radial-gradient(circle at top left, rgba(8, 145, 178, 0.08), transparent 24%),
|
|
radial-gradient(circle at top right, rgba(59, 130, 246, 0.07), transparent 22%),
|
|
var(--color-bg);
|
|
}
|
|
|
|
.agent-editor-header {
|
|
height: 72px;
|
|
padding: 0 28px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
background: rgba(255, 255, 255, 0.84);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
.agent-editor-workbench {
|
|
display: flex;
|
|
gap: 14px;
|
|
padding: 14px;
|
|
min-height: 0;
|
|
}
|
|
|
|
.agent-editor-pane {
|
|
min-width: 0;
|
|
border: 1px solid rgba(148, 163, 184, 0.14);
|
|
border-radius: 24px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,253,1) 100%);
|
|
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.agent-editor-pane-body {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 22px;
|
|
}
|
|
|
|
.agent-editor-pane-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.agent-editor-pane-title {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin: 0 0 6px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.agent-editor-pane-subtitle {
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
color: var(--color-text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
.agent-editor-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 12px;
|
|
border-radius: 999px;
|
|
background: rgba(8, 145, 178, 0.08);
|
|
color: var(--color-brand);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.agent-editor-intro {
|
|
border-radius: 18px;
|
|
padding: 16px 18px;
|
|
background: linear-gradient(135deg, rgba(236,253,245,0.92) 0%, rgba(240,249,255,0.92) 100%);
|
|
border: 1px solid rgba(8, 145, 178, 0.12);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.agent-editor-intro-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.agent-editor-intro-text {
|
|
font-size: 12.5px;
|
|
line-height: 1.7;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.agent-editor-surface {
|
|
border-radius: 18px;
|
|
border: 1px solid rgba(148, 163, 184, 0.14);
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.88) 100%);
|
|
box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
|
|
}
|
|
|
|
.agent-editor-prompt-wrap {
|
|
padding: 12px;
|
|
}
|
|
|
|
.agent-editor-prompt {
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(148, 163, 184, 0.12);
|
|
background: rgba(255,255,255,0.72);
|
|
}
|
|
|
|
.agent-editor-preview-shell {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.agent-editor-modal-hero {
|
|
display: grid;
|
|
grid-template-columns: 220px minmax(0, 1fr);
|
|
gap: 18px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.agent-editor-modal-card {
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(148, 163, 184, 0.14);
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.88) 100%);
|
|
}
|
|
|
|
.agent-editor-avatar-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: 12px;
|
|
padding: 16px;
|
|
border-radius: 20px;
|
|
background: linear-gradient(180deg, rgba(248,250,252,0.9) 0%, rgba(255,255,255,0.92) 100%);
|
|
border: 1px solid rgba(148, 163, 184, 0.12);
|
|
max-height: 280px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.page-container {
|
|
max-width: 1240px;
|
|
margin: 0 auto;
|
|
padding: 40px 32px 60px;
|
|
}
|
|
|
|
.feature-cover-container {
|
|
position: relative;
|
|
}
|
|
|
|
.feature-cover {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 20;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.74);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
.feature-cover .ant-empty {
|
|
padding: 26px 30px;
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 14px;
|
|
color: var(--color-text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
.create-card {
|
|
min-height: 240px;
|
|
height: 100%;
|
|
border: 1.5px dashed var(--color-border-strong);
|
|
border-radius: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
padding: 20px;
|
|
gap: 12px;
|
|
cursor: pointer;
|
|
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
|
|
background: var(--color-surface);
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
|
|
.create-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--color-brand);
|
|
background: var(--color-brand-soft);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.create-card .create-icon {
|
|
width: 52px;
|
|
height: 52px;
|
|
border-radius: 50%;
|
|
background: var(--color-surface);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--shadow-sm);
|
|
color: var(--color-brand);
|
|
font-size: 22px;
|
|
border: 1px solid var(--color-border);
|
|
}
|
|
|
|
.theme-toggle {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-surface);
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
border-color: var(--color-border-strong);
|
|
color: var(--color-text);
|
|
background: var(--color-surface-2);
|
|
}
|
|
|
|
.flex { display: flex; }
|
|
.flex-col { flex-direction: column; }
|
|
.flex-row { flex-direction: row; }
|
|
.flex-1 { flex: 1; }
|
|
.items-center { align-items: center; }
|
|
.justify-between { justify-content: space-between; }
|
|
.justify-center { justify-content: center; }
|
|
.justify-start { justify-content: flex-start; }
|
|
.justify-end { justify-content: flex-end; }
|
|
.h-full { height: 100%; }
|
|
.w-full { width: 100%; }
|
|
.overflow-hidden { overflow: hidden; }
|
|
.overflow-auto { overflow: auto; }
|
|
.object-cover { object-fit: cover; }
|
|
.fixed { position: fixed; }
|
|
.absolute { position: absolute; }
|
|
.relative { position: relative; }
|
|
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
|
|
.z-100 { z-index: 100; }
|
|
.p-4 { padding: 1rem; }
|
|
.p-2 { padding: 0.5rem; }
|
|
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
|
|
.mb-0 { margin-bottom: 0; }
|
|
.mb-2 { margin-bottom: 0.5rem; }
|
|
.mb-3 { margin-bottom: 0.75rem; }
|
|
.mb-4 { margin-bottom: 1rem; }
|
|
.mt-2 { margin-top: 0.5rem; }
|
|
.mt-6 { margin-top: 1.5rem; }
|
|
.gap-1 { gap: 0.25rem; }
|
|
.gap-2 { gap: 0.5rem; }
|
|
.gap-4 { gap: 1rem; }
|
|
.rounded-full { border-radius: 9999px; }
|
|
.rounded-lg { border-radius: 0.5rem; }
|
|
.text-xs { font-size: 0.75rem; }
|
|
.text-sm { font-size: 0.875rem; }
|
|
.text-lg { font-size: 1.125rem; }
|
|
.font-bold { font-weight: 700; }
|
|
.font-medium { font-weight: 500; }
|
|
.bg-white { background: var(--color-surface); }
|
|
.bg-gray-50 { background: var(--color-surface-2); }
|
|
.text-gray-400 { color: var(--color-text-tertiary); }
|
|
.text-gray-500 { color: var(--color-text-secondary); }
|
|
.text-gray-700 { color: var(--color-text); }
|
|
.text-gray-800 { color: var(--color-text); }
|
|
.border-none { border: none; }
|
|
.border-t { border-top: 1px solid var(--color-border); }
|
|
.border-l { border-left: 1px solid var(--color-border); }
|
|
.shadow-lg { box-shadow: var(--shadow-lg); }
|
|
|
|
.ant-btn-primary {
|
|
box-shadow: 0 1px 2px rgba(194, 84, 31, 0.18) !important;
|
|
}
|
|
|
|
.ant-input,
|
|
.ant-input-affix-wrapper,
|
|
.ant-input-number,
|
|
.ant-select-selector,
|
|
.ant-picker {
|
|
background: var(--color-surface) !important;
|
|
border-color: var(--color-border) !important;
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
.ant-input::placeholder {
|
|
color: var(--color-text-tertiary) !important;
|
|
}
|
|
|
|
.ant-input-affix-wrapper:hover,
|
|
.ant-input:hover,
|
|
.ant-select:hover .ant-select-selector,
|
|
.ant-picker:hover {
|
|
border-color: var(--color-border-strong) !important;
|
|
}
|
|
|
|
.ant-input-affix-wrapper-focused,
|
|
.ant-input:focus,
|
|
.ant-select-focused .ant-select-selector,
|
|
.ant-picker-focused {
|
|
border-color: var(--color-brand) !important;
|
|
box-shadow: var(--shadow-focus) !important;
|
|
}
|
|
|
|
.ant-card {
|
|
background: var(--color-surface) !important;
|
|
border-color: var(--color-border) !important;
|
|
}
|
|
|
|
.ant-modal-content,
|
|
.ant-modal-header,
|
|
.ant-drawer-content {
|
|
background: var(--color-surface) !important;
|
|
}
|
|
|
|
.ant-modal-title,
|
|
.ant-collapse-header {
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
.ant-divider,
|
|
.ant-drawer-header,
|
|
.ant-collapse,
|
|
.ant-collapse-item,
|
|
.ant-collapse-content {
|
|
border-color: var(--color-border) !important;
|
|
}
|
|
.ant-drawer-header {
|
|
padding: 8px 8px !important;
|
|
}
|
|
|
|
/* @ Mention highlighting */
|
|
span.mention {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
border: 1px solid rgba(59, 130, 246, 0.25);
|
|
color: #3b82f6;
|
|
padding: 1px 4px;
|
|
border-radius: 4px;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.bubble.user span.mention {
|
|
background: rgba(255, 159, 10, 0.22);
|
|
border: 1px solid rgba(255, 159, 10, 0.38);
|
|
color: #ff9f0a;
|
|
}
|
|
|
|
.ant-collapse-content {
|
|
background: var(--color-surface) !important;
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
|
color: var(--color-brand) !important;
|
|
}
|
|
|
|
.ant-tabs-ink-bar {
|
|
background: var(--color-brand) !important;
|
|
}
|
|
|
|
[data-theme='dark'] .ant-btn-default {
|
|
background: var(--color-surface-2) !important;
|
|
border-color: var(--color-border) !important;
|
|
color: var(--color-text) !important;
|
|
}
|
|
|
|
[data-theme='dark'] .ant-btn-default:hover {
|
|
background: var(--color-surface-3) !important;
|
|
border-color: var(--color-border-strong) !important;
|
|
}
|
|
|
|
[data-theme='dark'] .ant-tag {
|
|
background: var(--color-surface-2);
|
|
border-color: var(--color-border);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Avatar Hover Overlay */
|
|
.avatar-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
opacity: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
|
|
.avatar-container:hover .avatar-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.avatar-overlay-text {
|
|
font-size: 10px;
|
|
color: white;
|
|
font-weight: 500;
|
|
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
|
}
|
|
|
|
/* Pulse Animation for Indexing Status */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
/* Points Mall Styles */
|
|
.points-mall-hero {
|
|
border-radius: 24px;
|
|
padding: 30px 30px 22px;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(236,253,245,0.92) 44%, rgba(239,246,255,0.96) 100%);
|
|
border: 1px solid rgba(8, 145, 178, 0.12);
|
|
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.06);
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.points-mall-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.points-mall-title-section {
|
|
max-width: 720px;
|
|
}
|
|
|
|
.points-mall-balance-card {
|
|
min-width: 280px;
|
|
border-radius: 18px;
|
|
padding: 14px 16px;
|
|
background: rgba(255,255,255,0.72);
|
|
border: 1px solid rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.points-balance-label {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.points-balance-value {
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.points-balance-subtext {
|
|
font-size: 12px;
|
|
color: var(--color-text-tertiary);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.points-balance-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.points-mall-category-card {
|
|
border-radius: 18px;
|
|
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.points-mall-category-body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.points-mall-category-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.points-mall-category-label {
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.points-mall-banner-section {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
|
|
gap: 14px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.points-mall-banner-card {
|
|
border-radius: 22px;
|
|
padding: 22px;
|
|
border: 1px solid rgba(236, 72, 153, 0.22);
|
|
background: linear-gradient(135deg, rgba(236, 72, 153, 0.16) 0%, rgba(59, 130, 246, 0.16) 60%, rgba(34, 197, 94, 0.12) 100%);
|
|
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
|
|
min-height: 176px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.points-mall-banner-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.points-mall-banner-title {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
color: var(--color-text);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.points-mall-banner-subtitle {
|
|
font-size: 14px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.points-mall-banner-footer {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.points-mall-promo-grid {
|
|
display: grid;
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.points-mall-promo-card {
|
|
border-radius: 22px;
|
|
padding: 18px;
|
|
border: 1px solid var(--color-border);
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,253,1) 100%);
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
align-items: center;
|
|
}
|
|
|
|
.points-mall-promo-title {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: var(--color-text);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.points-mall-promo-subtitle {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.points-mall-promo-empty {
|
|
border-radius: 22px;
|
|
padding: 18px;
|
|
border: 1px dashed var(--color-border);
|
|
background: var(--color-surface);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.points-mall-products-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.points-mall-product-card {
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(148, 163, 184, 0.14);
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(252,252,253,1) 100%);
|
|
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.points-mall-product-cover {
|
|
height: 156px;
|
|
background: linear-gradient(135deg, rgba(8,145,178,0.12) 0%, rgba(59,130,246,0.10) 55%, rgba(34,197,94,0.10) 100%);
|
|
}
|
|
|
|
.points-mall-product-body {
|
|
padding: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.points-mall-product-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.points-mall-product-info {
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.points-mall-product-name {
|
|
font-size: 15px;
|
|
font-weight: 800;
|
|
color: var(--color-text);
|
|
margin-bottom: 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.points-mall-product-desc {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-secondary);
|
|
line-height: 1.5;
|
|
min-height: 36px;
|
|
}
|
|
|
|
.points-mall-product-price-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.points-mall-product-price {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.points-mall-product-price-label {
|
|
margin-left: 6px;
|
|
font-size: 12.5px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.points-mall-product-exchange-btn {
|
|
border-radius: 12px;
|
|
height: 34px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.points-mall-product-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.points-mall-pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 18px;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Exchange Modal Styles */
|
|
.points-exchange-modal .ant-modal-content {
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.points-exchange-modal-header {
|
|
text-align: center;
|
|
padding: 24px 24px 16px;
|
|
}
|
|
|
|
.points-exchange-product-name {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.points-exchange-points {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
color: var(--color-brand);
|
|
}
|
|
|
|
.points-exchange-form {
|
|
padding: 0 24px 24px;
|
|
}
|
|
|
|
.points-exchange-form-item {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.points-exchange-form-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
margin-bottom: 8px;
|
|
display: block;
|
|
}
|
|
|
|
.points-exchange-form-input {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.points-exchange-form-input .ant-input,
|
|
.points-exchange-form-input .ant-select-selector {
|
|
border-radius: 12px !important;
|
|
}
|
|
|
|
.points-exchange-submit-btn {
|
|
width: 100%;
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.points-exchange-balance-warning {
|
|
text-align: center;
|
|
padding: 12px;
|
|
background: var(--color-danger-soft);
|
|
border-radius: 12px;
|
|
color: var(--color-danger);
|
|
font-size: 13px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.points-exchange-expire-tip {
|
|
text-align: center;
|
|
padding: 10px 12px;
|
|
background: var(--color-warning-soft);
|
|
border-radius: 12px;
|
|
color: var(--color-warning);
|
|
font-size: 13px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Points History in Stats */
|
|
.points-stats-card {
|
|
border-radius: 18px;
|
|
padding: 16px 18px;
|
|
background: rgba(255,255,255,0.72);
|
|
border: 1px solid rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.points-stats-label {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.points-stats-value {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.points-stats-icon {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
background: var(--color-brand);
|
|
}
|
|
|
|
/* Stats Page Styles */
|
|
.stats-page-hero {
|
|
border-radius: 24px;
|
|
padding: 30px 30px 26px;
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(236,253,245,0.92) 44%, rgba(239,246,255,0.96) 100%);
|
|
border: 1px solid rgba(8, 145, 178, 0.12);
|
|
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.06);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.stats-page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.stats-page-title-section {
|
|
max-width: 640px;
|
|
}
|
|
|
|
.stats-page-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 12px;
|
|
border-radius: 999px;
|
|
background: rgba(255,255,255,0.78);
|
|
border: 1px solid rgba(8, 145, 178, 0.10);
|
|
color: var(--color-text-secondary);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.stats-page-badge-icon {
|
|
color: var(--color-brand);
|
|
}
|
|
|
|
.stats-page-summary-card {
|
|
min-width: 240px;
|
|
border-radius: 20px;
|
|
padding: 18px 18px 16px;
|
|
background: rgba(255,255,255,0.72);
|
|
border: 1px solid rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.stats-page-summary-label {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stats-page-summary-value {
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.stats-page-summary-desc {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-tertiary);
|
|
}
|
|
|
|
.stats-page-cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.stats-page-card {
|
|
border-radius: 18px;
|
|
padding: 16px 18px;
|
|
background: rgba(255,255,255,0.72);
|
|
border: 1px solid rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.stats-page-card-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--color-text-secondary);
|
|
font-size: 12.5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stats-page-card-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stats-page-card-value {
|
|
font-size: 30px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.stats-page-main-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr);
|
|
gap: 18px;
|
|
}
|
|
|
|
.stats-page-chart-card {
|
|
border-radius: 22px;
|
|
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
|
|
}
|
|
|
|
.stats-page-chart-desc {
|
|
font-size: 13px;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stats-page-chart-container {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 6px;
|
|
height: 236px;
|
|
padding: 18px 12px 10px;
|
|
}
|
|
|
|
.stats-page-chart-bar-group {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
min-width: 0;
|
|
}
|
|
|
|
.stats-page-chart-bars {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 1px;
|
|
}
|
|
|
|
.stats-page-chart-bar-user {
|
|
width: 9px;
|
|
background: var(--color-brand);
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
|
|
.stats-page-chart-bar-assistant {
|
|
width: 9px;
|
|
background: var(--color-success);
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
|
|
.stats-page-chart-label {
|
|
font-size: 10px;
|
|
color: var(--color-text-tertiary);
|
|
margin-top: 6px;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.stats-page-chart-legend {
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
color: var(--color-text-secondary);
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.stats-page-chart-legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.stats-page-chart-legend-dot {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.stats-page-agent-item {
|
|
margin-bottom: 12px;
|
|
padding: 12px 14px;
|
|
border-radius: 16px;
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.9) 100%);
|
|
border: 1px solid rgba(148, 163, 184, 0.12);
|
|
}
|
|
|
|
.stats-page-agent-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.stats-page-agent-rank {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 999px;
|
|
background: rgba(8, 145, 178, 0.10);
|
|
color: var(--color-brand);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stats-page-agent-name {
|
|
flex: 1;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.stats-page-agent-progress {
|
|
height: 6px;
|
|
background: var(--color-surface-2);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.stats-page-agent-progress-bar {
|
|
height: 100%;
|
|
background: var(--gradient-brand);
|
|
transition: width 0.4s;
|
|
}
|
|
|
|
.stats-page-token-section {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.stats-page-token-cards-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 14px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.stats-page-token-card {
|
|
border-radius: 18px;
|
|
padding: 16px 18px;
|
|
background: rgba(255,255,255,0.72);
|
|
border: 1px solid rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.stats-page-token-label {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.stats-page-token-dot {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.stats-page-token-value {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.stats-page-token-charts-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 18px;
|
|
}
|
|
|
|
.stats-page-token-chart-card {
|
|
border-radius: 18px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.stats-page-token-chart-container {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 6px;
|
|
height: 220px;
|
|
padding: 18px 12px 10px;
|
|
}
|
|
|
|
.stats-page-token-chart-bar {
|
|
width: 12px;
|
|
background: var(--gradient-brand);
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
|
|
/* Points and USD integration */
|
|
.points-integration-section {
|
|
margin-top: 18px;
|
|
}
|
|
|
|
.points-integration-card {
|
|
border-radius: 22px;
|
|
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045);
|
|
}
|
|
|
|
.points-integration-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.points-integration-item {
|
|
border-radius: 18px;
|
|
padding: 16px 18px;
|
|
background: rgba(255,255,255,0.72);
|
|
border: 1px solid rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.points-integration-label {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-secondary);
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.points-integration-value {
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.points-integration-desc {
|
|
font-size: 11px;
|
|
color: var(--color-text-tertiary);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.points-conversion-rate {
|
|
background: var(--color-brand-soft);
|
|
color: var(--color-brand);
|
|
padding: 2px 8px;
|
|
border-radius: 999px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Additional Points Mall Styles */
|
|
.points-mall-filter-select {
|
|
width: 160px;
|
|
}
|
|
|
|
.points-mall-filter-select-small {
|
|
width: 140px;
|
|
}
|
|
|
|
.points-mall-search-input {
|
|
width: 260px;
|
|
}
|
|
|
|
.points-mall-product-tag {
|
|
margin: 0;
|
|
border-radius: 999px;
|
|
background: var(--color-warning-soft);
|
|
color: var(--color-warning);
|
|
}
|
|
|
|
.points-mall-pagination-tag {
|
|
margin: 0;
|
|
border-radius: 999px;
|
|
background: var(--color-surface-2);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.points-mall-exchange-btn {
|
|
border-radius: 12px;
|
|
height: 34px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.points-mall-filters-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.points-mall-filters-left {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.points-mall-total-text {
|
|
font-size: 12.5px;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.points-mall-exchange-modal-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--color-text);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.points-mall-exchange-modal-points {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
color: var(--color-brand);
|
|
}
|
|
|
|
.points-mall-address-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.points-exchange-form-item-small {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Stats page inline styles fallback */
|
|
.stats-page-title {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stats-page-subtitle {
|
|
margin-top: 0;
|
|
font-size: 15px;
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.stats-page-mt-18 {
|
|
margin-top: 18px;
|
|
}
|