/* * FunnyAI design system foundation. * Tailwind handles page layout; this file defines shared product tokens and reusable component classes. * * Theme system: [data-theme="light|warm|dark"] on . * Default (warm) is applied via :root; light and dark override via data-theme. */ /* ── Warm (default, recommended) ─────────────────────────── */ /* 参考 ChatGPT warm：sidebar 暖石色，比主舞台深一阶 */ :root, [data-theme="warm"] { --ui-bg: #F3ECE2; --ui-bg-soft: #ECE1D4; --ui-surface: #FBF7F2; --ui-surface-soft: rgba(251, 247, 242, 0.92); --ui-surface-muted: #F1E8DD; --ui-sidebar-bg: #E7DACE; --ui-sidebar-bg-deep: #DDCEBF; --ui-sidebar-border: #D8C8B8; --ui-border: #DED1C3; --ui-border-strong: #CABAA9; --ui-text: #2F261F; --ui-text-muted: #66584D; --ui-text-soft: #9A8A7A; --ui-accent: #13233E; --ui-accent-hover: #1B2F53; --ui-accent-contrast: #FFFFFF; --ui-accent-soft: #E9EDF7; --ui-accent-border: #C9D2E8; --ui-sidebar-surface: rgba(251, 247, 242, 0.62); --ui-sidebar-text: var(--ui-text); --ui-sidebar-text-muted: var(--ui-text-muted); --ui-sidebar-hover: var(--ui-surface-muted); --ui-sidebar-active-bg: var(--ui-accent); --ui-sidebar-active-text: var(--ui-accent-contrast); --ui-composer-bg: var(--ui-surface); --ui-composer-border: var(--ui-border); --ui-bubble-user-bg: var(--ui-accent); --ui-bubble-user-text: var(--ui-accent-contrast); --ui-bubble-ai-bg: var(--ui-surface-muted); --ui-bubble-ai-text: var(--ui-text); --ui-bubble-ai-border: var(--ui-border); --ui-code-bg: var(--ui-surface-muted); --ui-code-border: var(--ui-border); --ui-quote-bg: var(--ui-surface-muted); --ui-quote-border: var(--ui-border-strong); --ui-success-soft: #dcfce7; --ui-success-text: #166534; --ui-warning-soft: #fef3c7; --ui-warning-text: #92400e; --ui-danger-soft: #ffe4e6; --ui-danger-text: #be123c; --ui-radius-xs: 0.5rem; --ui-radius-sm: 0.625rem; --ui-radius-md: 0.75rem; --ui-radius-lg: 1rem; --ui-shadow-sm: 0 1px 3px rgba(47, 38, 31, 0.08), 0 1px 2px rgba(47, 38, 31, 0.04); --ui-shadow-md: 0 4px 12px rgba(47, 38, 31, 0.1), 0 2px 4px rgba(47, 38, 31, 0.06); --ui-shadow-lg: 0 12px 32px rgba(47, 38, 31, 0.14); } /* ── Light ───────────────────────────────────────────────── */ /* Sidebar 浅灰，只比主舞台深半阶 */ [data-theme="light"] { --ui-bg: #F5F7FA; --ui-bg-soft: #EEF2F6; --ui-surface: #FFFFFF; --ui-surface-soft: rgba(255, 255, 255, 0.9); --ui-surface-muted: #EEF2F6; --ui-sidebar-bg: #E9EDF2; --ui-sidebar-bg-deep: #E1E7EE; --ui-sidebar-border: #DCE3EB; --ui-border: #E2E8F0; --ui-border-strong: #CBD5E1; --ui-text: #111827; --ui-text-muted: #4B5565; --ui-text-soft: #8A94A6; --ui-accent: #13233E; --ui-accent-hover: #1A2F52; --ui-accent-contrast: #FFFFFF; --ui-accent-soft: #EEF3FF; --ui-accent-border: #CBD7FF; --ui-sidebar-surface: rgba(255, 255, 255, 0.74); --ui-sidebar-text: var(--ui-text); --ui-sidebar-text-muted: var(--ui-text-muted); --ui-sidebar-hover: var(--ui-surface-muted); --ui-sidebar-active-bg: var(--ui-accent); --ui-sidebar-active-text: var(--ui-accent-contrast); --ui-composer-bg: var(--ui-surface); --ui-composer-border: var(--ui-border); --ui-bubble-user-bg: var(--ui-accent); --ui-bubble-user-text: var(--ui-accent-contrast); --ui-bubble-ai-bg: var(--ui-surface-muted); --ui-bubble-ai-text: var(--ui-text); --ui-bubble-ai-border: var(--ui-border); --ui-code-bg: var(--ui-bg-soft); --ui-code-border: var(--ui-border); --ui-quote-bg: var(--ui-surface-muted); --ui-quote-border: var(--ui-border-strong); --ui-success-soft: #d3f9d8; --ui-success-text: #2b8a3e; --ui-warning-soft: #fff3bf; --ui-warning-text: #e67700; --ui-danger-soft: #ffe3e3; --ui-danger-text: #c92a2a; --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --ui-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --ui-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1); } /* ── Dark ────────────────────────────────────────────────── */ /* 整体暖深色，sidebar 再深一阶，保持和 warm 主题同系 */ [data-theme="dark"] { --ui-bg: #0F1115; --ui-bg-soft: #151922; --ui-surface: #171C24; --ui-surface-soft: rgba(23, 28, 36, 0.92); --ui-surface-muted: #1E2530; --ui-sidebar-bg: #0B0E13; --ui-sidebar-bg-deep: #080B10; --ui-sidebar-border: #1F2631; --ui-border: #2B3441; --ui-border-strong: #3B4658; --ui-text: #F3F5F7; --ui-text-muted: #C1C8D2; --ui-text-soft: #7E8794; --ui-accent: #7C93FF; --ui-accent-hover: #94A8FF; --ui-accent-contrast: #0B1020; --ui-accent-soft: rgba(124, 147, 255, 0.12); --ui-accent-border: rgba(124, 147, 255, 0.32); --ui-sidebar-surface: rgba(23, 28, 36, 0.72); --ui-sidebar-text: var(--ui-text); --ui-sidebar-text-muted: var(--ui-text-muted); --ui-sidebar-hover: var(--ui-surface-muted); --ui-sidebar-active-bg: var(--ui-accent); --ui-sidebar-active-text: var(--ui-accent-contrast); --ui-composer-bg: var(--ui-surface); --ui-composer-border: var(--ui-border); --ui-bubble-user-bg: var(--ui-accent); --ui-bubble-user-text: var(--ui-accent-contrast); --ui-bubble-ai-bg: var(--ui-surface-muted); --ui-bubble-ai-text: var(--ui-text); --ui-bubble-ai-border: var(--ui-border); --ui-code-bg: var(--ui-bg-soft); --ui-code-border: var(--ui-border); --ui-quote-bg: var(--ui-surface-muted); --ui-quote-border: var(--ui-border-strong); --ui-success-soft: rgba(74, 222, 128, 0.14); --ui-success-text: #4ade80; --ui-warning-soft: rgba(251, 191, 36, 0.14); --ui-warning-text: #fbbf24; --ui-danger-soft: rgba(248, 113, 113, 0.14); --ui-danger-text: #f87171; --ui-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.32); --ui-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42); --ui-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.52); } *, *::before, *::after { box-sizing: border-box; } html, body { min-height: 100%; } body { background: var(--ui-bg); color: var(--ui-text); } a { color: inherit; text-decoration: none; } summary { list-style: none; } summary::-webkit-details-marker { display: none; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"], input[type="datetime-local"], select, textarea, .ui-input, .ui-select, .ui-textarea { width: 100%; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-sm); background: var(--ui-surface); color: var(--ui-text); padding: 0.55rem 0.75rem; font-size: 0.85rem; line-height: 1.4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease; } textarea, .ui-textarea { min-height: 5.5rem; resize: vertical; } .ui-composer-textarea { min-height: 5.5rem; resize: none; } input:focus, select:focus, textarea:focus, .ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: rgba(51, 65, 85, 0.55); box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.18); } label, .ui-label { display: inline-block; margin-bottom: 0.3rem; margin-top: 0.2rem; color: var(--ui-text-muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; } button, input[type="submit"] { cursor: pointer; } /* 裸 submit（没有额外 class 的 form submit）自动获得按钮样式 */ input[type="submit"] { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--ui-radius-sm); padding: 0.55rem 1.25rem; font-size: 0.85rem; font-weight: 600; line-height: 1.4; color: #fff; background: var(--ui-text); transition: background-color 0.16s ease, transform 0.1s ease; } input[type="submit"]:hover { opacity: 0.88; } input[type="submit"]:active { transform: scale(0.98); } .ui-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border: 1px solid transparent; border-radius: 999px; padding: 0.75rem 1rem; font-size: 0.8125rem; font-weight: 700; line-height: 1rem; transition: transform 0.12s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; } .ui-button:hover { transform: translateY(-1px); } .ui-button--sm { padding: 0.58rem 0.82rem; font-size: 0.75rem; } .ui-button--md { padding: 0.78rem 1.1rem; } .ui-button--block { width: 100%; } .ui-button--primary { background: var(--ui-accent); border-color: var(--ui-accent); box-shadow: var(--ui-shadow-sm); color: #fff; } .ui-button--primary:hover { background: #1e293b; border-color: #1e293b; } .ui-button--secondary { background: rgba(255, 255, 255, 0.96); border-color: var(--ui-border-strong); color: var(--ui-text); } .ui-button--secondary:hover { background: #fff; border-color: rgba(100, 116, 139, 0.35); } .ui-button--soft { background: var(--ui-accent-soft); border-color: var(--ui-accent-border); color: var(--ui-text); } .ui-button--soft:hover { background: var(--ui-surface-muted); } .ui-button--ghost { background: transparent; border-color: transparent; color: var(--ui-text-muted); } .ui-button--ghost:hover { background: rgba(255, 255, 255, 0.72); color: var(--ui-text); } .ui-card { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); } .ui-card--soft { background: var(--ui-surface-soft); backdrop-filter: blur(18px); } .ui-card--panel { border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-md); } .ui-card--muted { background: var(--ui-surface-muted); } .ui-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .ui-page-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ui-text-soft); } .ui-page-title { margin: 0.25rem 0 0; font-size: clamp(1.35rem, 1.8vw, 1.6rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } .ui-page-subtitle { margin-top: 0.4rem; max-width: 46rem; font-size: 0.85rem; line-height: 1.55; color: var(--ui-text-muted); } .ui-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ui-topbar-actions { display: inline-flex; align-items: center; gap: 0.5rem; } .ui-segment { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; padding: 0.25rem; background: rgba(255, 255, 255, 0.72); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-sm); } .ui-segment__item { display: inline-flex; min-width: 3rem; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid transparent; padding: 0.5rem 0.7rem; font-size: 0.75rem; font-weight: 700; color: var(--ui-text-muted); transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .ui-segment__item--active { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; } .ui-segment__item--inactive:hover { background: rgba(255, 255, 255, 0.92); color: var(--ui-text); } .ui-account-trigger, .ui-menu-link, .ui-nav-link, .ui-tab { transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .ui-account-trigger { display: inline-flex; align-items: center; gap: 0.55rem; max-width: min(24rem, calc(100vw - 7rem)); border: 1px solid var(--ui-border); border-radius: 999px; background: rgba(255, 255, 255, 0.84); box-shadow: var(--ui-shadow-sm); padding: 0.65rem 0.95rem; font-size: 0.75rem; font-weight: 700; color: var(--ui-text); } .ui-account-popover { position: relative; z-index: 50; min-width: 0; } .ui-account-trigger__label { flex: 0 0 auto; } .ui-account-trigger__value { min-width: 0; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ui-text-muted); } .ui-account-trigger:hover { background: #fff; } .ui-menu { position: absolute; z-index: 80; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: rgba(255, 255, 255, 0.96); padding: 0.5rem; box-shadow: var(--ui-shadow-lg); backdrop-filter: blur(20px); } .ui-menu__account-email { overflow-wrap: anywhere; word-break: break-word; font-size: 0.9rem; font-weight: 600; color: var(--ui-text); } .ui-menu-link { display: block; border-radius: 0.9rem; padding: 0.7rem 0.9rem; font-size: 0.9rem; font-weight: 600; color: var(--ui-text-muted); } .ui-menu-link:hover { background: rgba(248, 250, 252, 0.98); color: var(--ui-text); } .ui-sidebar-shell { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-lg); background: rgba(255, 255, 255, 0.84); box-shadow: var(--ui-shadow-sm); backdrop-filter: blur(16px); } .ui-nav-link { display: flex; align-items: center; border-radius: 1rem; border: 1px solid transparent; padding: 0.8rem 0.95rem; font-size: 0.9rem; font-weight: 600; color: var(--ui-text-muted); position: relative; overflow: hidden; } .ui-nav-link:hover { background: rgba(255, 255, 255, 0.88); color: var(--ui-text); } .ui-nav-link--active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; box-shadow: var(--ui-shadow-sm); } .ui-nav-link--active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 999px; background: currentColor; opacity: 0; } .ui-tab { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ui-border); border-radius: 999px; padding: 0.6rem 0.95rem; font-size: 0.78rem; font-weight: 700; background: rgba(255, 255, 255, 0.84); color: var(--ui-text-muted); } .ui-tab:hover { background: #fff; color: var(--ui-text); } .ui-tab--active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; } .ui-chip { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.72); padding: 0.5rem 0.78rem; font-size: 0.74rem; font-weight: 700; color: var(--ui-text-muted); } .ui-chip--outlined { border-color: var(--ui-border); background: rgba(255, 255, 255, 0.92); } .ui-empty-state { border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-md); background: rgba(255, 255, 255, 0.68); padding: 2rem 1.5rem; text-align: center; } .ui-empty-state__title { font-size: 1rem; font-weight: 700; color: var(--ui-text); } .ui-empty-state__description { margin-top: 0.55rem; font-size: 0.92rem; line-height: 1.65; color: var(--ui-text-muted); } .ui-flash { border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border); padding: 0.95rem 1rem; font-size: 0.9rem; font-weight: 600; box-shadow: var(--ui-shadow-sm); } .ui-flash--notice { background: rgba(220, 252, 231, 0.86); border-color: rgba(134, 239, 172, 0.8); color: var(--ui-success-text); } .ui-flash--alert, .ui-flash--error { background: rgba(255, 228, 230, 0.9); border-color: rgba(253, 164, 175, 0.8); color: var(--ui-danger-text); } .ui-flash--default { background: rgba(255, 255, 255, 0.92); color: var(--ui-text); } .ui-badge { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid transparent; padding: 0.4rem 0.65rem; font-size: 0.72rem; font-weight: 700; line-height: 1; } .ui-badge--success { background: var(--ui-success-soft); border-color: rgba(134, 239, 172, 0.8); color: var(--ui-success-text); } .ui-badge--warning { background: var(--ui-warning-soft); border-color: rgba(253, 224, 71, 0.75); color: var(--ui-warning-text); } .ui-badge--danger { background: var(--ui-danger-soft); border-color: rgba(253, 164, 175, 0.8); color: var(--ui-danger-text); } .ui-badge--neutral { background: rgba(241, 245, 249, 0.9); border-color: rgba(203, 213, 225, 0.9); color: #475569; } .ui-table-wrap { overflow: hidden; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: rgba(255, 255, 255, 0.94); box-shadow: var(--ui-shadow-sm); } .ui-table-wrap--scroll { overflow-x: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: rgba(255, 255, 255, 0.94); box-shadow: var(--ui-shadow-sm); } /* ── Admin form helpers ──────────────────────────────────── */ .ui-field-hint { margin-top: 0.3rem; font-size: 0.72rem; line-height: 1.45; color: var(--ui-text-soft); } .ui-form-section { padding-top: 1rem; margin-top: 0.5rem; border-top: 1px solid var(--ui-border); } .ui-form-section__title { font-size: 0.82rem; font-weight: 700; color: var(--ui-text); margin-bottom: 0.2rem; } .ui-form-section__desc { font-size: 0.75rem; color: var(--ui-text-muted); line-height: 1.5; margin-bottom: 0.75rem; } table, .ui-table { width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; } th { background: rgba(248, 250, 252, 0.95); color: var(--ui-text-muted); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; } th, td { border-bottom: 1px solid var(--ui-border); padding: 0.7rem 0.85rem; text-align: left; vertical-align: middle; font-size: 0.83rem; line-height: 1.45; } tbody tr:last-child td { border-bottom: none; } pre, code { border-radius: 0.9rem; } pre { background: rgba(248, 250, 252, 0.98); border: 1px solid var(--ui-border); color: var(--ui-text); font-size: 0.78rem; line-height: 1.45; padding: 0.95rem; overflow-x: auto; } .ui-skeleton { position: relative; overflow: hidden; border-radius: 999px; background: rgba(226, 232, 240, 0.95); } .ui-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); animation: ui-shimmer 1.5s infinite; } @keyframes ui-shimmer { 100% { transform: translateX(100%); } } @media (max-width: 1024px) { .ui-page-title { font-size: 1.9rem; } } /* ── Theme-aware overrides for dark mode ─────────────────── */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="url"], [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .ui-input, [data-theme="dark"] .ui-select, [data-theme="dark"] .ui-textarea { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-text); box-shadow: none; } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); } [data-theme="dark"] th { background: var(--ui-surface-muted); color: var(--ui-text-muted); } [data-theme="dark"] th, [data-theme="dark"] td { border-color: var(--ui-border); } [data-theme="dark"] pre { background: var(--ui-code-bg); border-color: var(--ui-code-border); color: var(--ui-text); } [data-theme="dark"] .ui-button--primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #1e1e2e; } [data-theme="dark"] .ui-button--primary:hover { background: #b4d0fb; border-color: #b4d0fb; } [data-theme="dark"] .ui-button--secondary { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-text); } [data-theme="dark"] .ui-button--secondary:hover { background: var(--ui-surface-muted); border-color: var(--ui-text-soft); } [data-theme="dark"] .ui-segment { background: var(--ui-surface); border-color: var(--ui-border); } [data-theme="dark"] .ui-segment__item--active { background: var(--ui-accent); border-color: var(--ui-accent); color: #1e1e2e; } [data-theme="dark"] .ui-segment__item--inactive:hover { background: var(--ui-sidebar-hover); color: var(--ui-text); } [data-theme="dark"] .ui-menu { background: var(--ui-surface); border-color: var(--ui-border); } [data-theme="dark"] .ui-menu-link:hover { background: var(--ui-sidebar-hover); color: var(--ui-text); } [data-theme="dark"] .ui-account-trigger { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); } [data-theme="dark"] .ui-account-trigger:hover { background: var(--ui-surface-muted); } [data-theme="dark"] .ui-empty-state { border-color: var(--ui-border-strong); background: var(--ui-surface-soft); } [data-theme="dark"] .ui-flash--notice { background: var(--ui-success-soft); border-color: rgba(166, 227, 161, 0.3); color: var(--ui-success-text); } [data-theme="dark"] .ui-flash--alert, [data-theme="dark"] .ui-flash--error { background: var(--ui-danger-soft); border-color: rgba(243, 139, 168, 0.3); color: var(--ui-danger-text); } [data-theme="dark"] .ui-badge--neutral { background: var(--ui-surface-muted); border-color: var(--ui-border); color: var(--ui-text-muted); } /* ── Theme switcher ──────────────────────────────────────── */ .ui-theme-switcher { display: inline-flex; align-items: center; gap: 0.2rem; border-radius: 999px; padding: 0.2rem; background: var(--ui-surface-soft); border: 1px solid var(--ui-border); } .ui-theme-switcher__btn { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; border: 1px solid transparent; background: transparent; font-size: 0.75rem; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .ui-theme-switcher__btn:hover { background: var(--ui-sidebar-hover); transform: scale(1.08); } .ui-theme-switcher__btn--active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; box-shadow: var(--ui-shadow-sm); } [data-theme="dark"] .ui-theme-switcher__btn--active { color: #1e1e2e; } /* ── Console shell (logged-in non-workspace pages) ───────── */ .console-shell { background: radial-gradient(circle at top center, color-mix(in srgb, var(--ui-accent) 10%, transparent), transparent 32%), var(--ui-bg); color: var(--ui-text); } .console-topbar { background: color-mix(in srgb, var(--ui-surface) 88%, transparent) !important; border-bottom-color: var(--ui-border) !important; backdrop-filter: blur(18px); } .console-brand__label { color: var(--ui-text) !important; } .console-mobile-nav { background: color-mix(in srgb, var(--ui-surface) 84%, transparent) !important; border-bottom-color: var(--ui-border) !important; } .console-sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--ui-sidebar-bg) 94%, transparent), color-mix(in srgb, var(--ui-sidebar-bg-deep) 90%, transparent)) !important; border-right-color: var(--ui-sidebar-border) !important; position: relative; padding-bottom: 7.25rem; } .console-sidebar-card { background: color-mix(in srgb, var(--ui-surface) 86%, transparent) !important; border-color: var(--ui-border) !important; box-shadow: var(--ui-shadow-sm); } .console-sidebar-card__title { color: var(--ui-text) !important; } .console-sidebar-card__body { color: var(--ui-text-muted) !important; } .console-sidebar__upper { flex: 1 1 auto; min-height: 0; } .console-sidebar__footer { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; margin-top: 0; border-top: 1px solid var(--ui-sidebar-border); padding-top: 0.9rem; } .console-sidebar__toolbar { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.55rem; } .console-sidebar__toolbar .ui-theme-switcher, .console-sidebar__toolbar .ui-segment { flex: 0 0 auto; align-self: flex-start; } .console-main { background: transparent; } .console-content { color: var(--ui-text); } .console-dashboard { color: var(--ui-text); } .console-dashboard-hero { box-shadow: var(--ui-shadow-md); } .console-dashboard-section-kicker { color: var(--ui-text-soft); } .console-dashboard-action { background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important; border-color: var(--ui-border) !important; box-shadow: var(--ui-shadow-sm); } .console-dashboard-action:hover { transform: translateY(-1px); } .console-dashboard-action__icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .console-dashboard-overview { border-radius: 1rem; } .console-dashboard-overview__title, .console-dashboard-overview__description, .console-dashboard-overview__org-name, .console-dashboard-overview__admin, .console-dashboard-stat__label, .console-dashboard-stat__value, .console-dashboard-action__title, .console-dashboard-action__body, .console-dashboard-action__icon, .console-studio-feature-card__title, .console-studio-feature-card__description, .console-studio-feature-card__arrow, .console-studio-feature-card__badge { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .console-dashboard-stat { border-radius: 0.85rem; } .console-dashboard-stat__label { color: rgba(226, 232, 240, 0.78); } .console-dashboard-stat__value { color: #fff; } .console-dashboard-action__title { color: var(--ui-text); } .console-dashboard-action__body { color: var(--ui-text-muted); } .console-dashboard-action__icon { color: var(--ui-text); border: 1px solid transparent; } .console-studio-feature-card { isolation: isolate; } .console-studio-feature-card__cover { height: 24%; min-height: 5rem; max-height: 6.25rem; pointer-events: none; } .console-studio-feature-card__title { color: var(--ui-text) !important; } .console-studio-feature-card__description { color: var(--ui-text-muted) !important; } .console-studio-feature-card__arrow { color: var(--ui-text-soft) !important; } .console-studio-feature-card:hover .console-studio-feature-card__arrow { color: var(--ui-text) !important; } .console-studio-feature-card__badge { border-color: transparent !important; } .console-studio-feature-card--image .console-studio-feature-card__badge { background: #FFF2D9 !important; color: #B7791F !important; } .console-studio-feature-card--video .console-studio-feature-card__badge { background: #E7EEFF !important; color: #4C63C7 !important; } .console-studio-feature-card--asset .console-studio-feature-card__badge { background: #E2F5EF !important; color: #2E8C7D !important; } .console-studio-feature-card--template .console-studio-feature-card__badge { background: #F0E8DE !important; color: #7A6654 !important; } .console-studio-feature-card--image .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(231, 187, 99, 0.18) 0%, rgba(255, 255, 255, 0) 100%); } .console-studio-feature-card--video .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(124, 147, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%); } .console-studio-feature-card--asset .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(113, 210, 195, 0.16) 0%, rgba(255, 255, 255, 0) 100%); } .console-studio-feature-card--template .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(192, 180, 160, 0.14) 0%, rgba(255, 255, 255, 0) 100%); } .console-dashboard-panel { background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important; border-color: var(--ui-border) !important; box-shadow: var(--ui-shadow-sm); } .console-dashboard-row:hover { background: color-mix(in srgb, var(--ui-surface-muted) 88%, transparent) !important; } .console-dashboard-subcard { border: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-surface-muted) 92%, transparent); box-shadow: var(--ui-shadow-sm); } .console-dashboard-subcard:hover { border-color: var(--ui-border-strong); background: color-mix(in srgb, var(--ui-surface) 98%, transparent); box-shadow: var(--ui-shadow-md); } .console-dashboard .bg-white, .console-dashboard .bg-white\/60, .console-dashboard .bg-white\/78 { background: color-mix(in srgb, var(--ui-surface) 94%, transparent) !important; } .console-dashboard .bg-slate-50, .console-dashboard .bg-slate-50\/50, .console-dashboard .bg-slate-50\/60, .console-dashboard .bg-slate-100, .console-dashboard .bg-indigo-50, .console-dashboard .bg-amber-50, .console-dashboard .bg-emerald-50, .console-dashboard .bg-rose-50 { background: color-mix(in srgb, var(--ui-surface-muted) 92%, transparent) !important; } .console-dashboard .border-slate-200, .console-dashboard .border-slate-200\/60, .console-dashboard .border-slate-100 { border-color: var(--ui-border) !important; } .console-dashboard .text-slate-900, .console-dashboard .text-slate-800, .console-dashboard .text-slate-700 { color: var(--ui-text) !important; } .console-dashboard .text-slate-600, .console-dashboard .text-slate-500, .console-dashboard .text-slate-400 { color: var(--ui-text-muted) !important; } .console-dashboard .hover\:bg-slate-50\/60:hover { background: color-mix(in srgb, var(--ui-surface-muted) 92%, transparent) !important; } [data-theme="dark"] .console-shell { background: #141210; } [data-theme="dark"] .console-topbar { background: #1a1816 !important; border-bottom-color: #443e3a !important; } [data-theme="dark"] .console-mobile-nav { background: #1a1816 !important; border-bottom-color: #443e3a !important; } [data-theme="dark"] .console-sidebar { background: #0e0c0a !important; border-right-color: #262220 !important; } [data-theme="dark"] .console-sidebar__footer { border-top-color: #262220; } [data-theme="dark"] .console-sidebar-card { background: #302b27 !important; border-color: #443e3a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .console-sidebar .ui-nav-link--active { background: #172132 !important; color: #F4F7FB !important; border-color: #2D3A51 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .console-sidebar .ui-nav-link--active::before { opacity: 1; background: #7C93FF; } [data-theme="dark"] .console-sidebar .ui-nav-link--active:hover { background: #1A2940 !important; border-color: #31445E !important; } [data-theme="dark"] .console-sidebar .ui-nav-link:not(.ui-nav-link--active):hover { background: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .console-dashboard { color: #e7e5e4; } [data-theme="dark"] .console-dashboard-hero { background: #262220 !important; border: 1px solid #443e3a; } [data-theme="dark"] .console-dashboard-section-kicker { color: #7a7470; } [data-theme="dark"] .console-dashboard-action { background: #302b27 !important; border-color: #443e3a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .console-dashboard-action:hover { border-color: #5a5450 !important; } [data-theme="dark"] .console-dashboard-action__icon { background: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action { background: #171C24 !important; border-color: #2B3441 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action:hover { background: #1E2530 !important; border-color: #3B4658 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action__title { color: #F3F5F7 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action__body { color: #C1C8D2 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action__icon { background: #1E2530 !important; border-color: #2B3441 !important; } [data-theme="dark"] .console-dashboard-panel { background: #302b27 !important; border-color: #443e3a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .console-dashboard-row:hover { background: #3a3532 !important; } [data-theme="dark"] .console-dashboard-subcard { border-color: #443e3a !important; background: #302b27 !important; } [data-theme="dark"] .console-dashboard-subcard:hover { border-color: #5a5450 !important; background: #3a3532 !important; } [data-theme="dark"] .console-dashboard .bg-white, [data-theme="dark"] .console-dashboard .bg-white\/60, [data-theme="dark"] .console-dashboard .bg-white\/78 { background: #302b27 !important; } [data-theme="dark"] .console-dashboard .bg-slate-50, [data-theme="dark"] .console-dashboard .bg-slate-50\/50, [data-theme="dark"] .console-dashboard .bg-slate-50\/60, [data-theme="dark"] .console-dashboard .bg-slate-100, [data-theme="dark"] .console-dashboard .bg-indigo-50, [data-theme="dark"] .console-dashboard .bg-amber-50, [data-theme="dark"] .console-dashboard .bg-emerald-50, [data-theme="dark"] .console-dashboard .bg-rose-50 { background: #262220 !important; } [data-theme="dark"] .console-dashboard .border-slate-200, [data-theme="dark"] .console-dashboard .border-slate-200\/60, [data-theme="dark"] .console-dashboard .border-slate-100 { border-color: #443e3a !important; } [data-theme="dark"] .console-dashboard .bg-slate-900 { background: #1a1816 !important; border-color: #443e3a !important; } [data-theme="dark"] .console-dashboard .text-slate-900, [data-theme="dark"] .console-dashboard .text-slate-800, [data-theme="dark"] .console-dashboard .text-slate-700 { color: #ebe9e8 !important; } [data-theme="dark"] .console-dashboard .text-slate-600, [data-theme="dark"] .console-dashboard .text-slate-500, [data-theme="dark"] .console-dashboard .text-slate-400 { color: #b0aaa5 !important; } [data-theme="dark"] .console-dashboard .hover\:bg-slate-50\/60:hover { background: #302b27 !important; } .console-page { color: var(--ui-text); } .console-page--home, .console-page--studio, .console-page--artifacts, .console-page--workflows, .console-dashboard { --console-page-surface: var(--ui-surface); --console-page-surface-muted: var(--ui-surface-muted); --console-page-border: var(--ui-border); --console-page-border-strong: var(--ui-border-strong); --console-page-shadow: var(--ui-shadow-sm); } [data-theme="warm"] .console-page--home, [data-theme="warm"] .console-page--studio, [data-theme="warm"] .console-page--artifacts, [data-theme="warm"] .console-page--workflows, [data-theme="warm"] .console-dashboard { --console-page-surface: #ffffff; --console-page-surface-muted: #f7f2ec; --console-page-border: #d5cab9; --console-page-border-strong: #c0b3a1; --console-page-shadow: 0 2px 8px rgba(104, 74, 40, 0.08); } [data-theme="warm"] .console-shell { background: radial-gradient(circle at top center, rgba(189, 138, 72, 0.08), transparent 24%), linear-gradient(180deg, #f4ece3 0%, #f2e8dd 100%); } [data-theme="light"] .console-sidebar .ui-nav-link--active { background: #E6EEF8 !important; border-color: #D5E0EE !important; color: #13233E !important; box-shadow: 0 1px 2px rgba(19, 35, 62, 0.08); } [data-theme="light"] .console-sidebar .ui-nav-link--active::before { opacity: 1; background: #13233E; } [data-theme="light"] .console-sidebar .ui-nav-link--active:hover { background: #EDF3FB !important; border-color: #D5E0EE !important; } [data-theme="light"] .console-dashboard-overview { background: #FFFFFF; border: 1px solid #E2E8F0; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); } [data-theme="light"] .console-dashboard-overview__org { background: #EEF2F6 !important; box-shadow: inset 0 0 0 1px #DCE3EB; } [data-theme="light"] .console-dashboard-overview__org-name { color: #4B5565 !important; } [data-theme="light"] .console-dashboard-overview__title { color: #111827 !important; } [data-theme="light"] .console-dashboard-overview__description, [data-theme="light"] .console-dashboard-overview__admin { color: #4B5565 !important; } [data-theme="light"] .console-dashboard-overview__admin { background: #F7F9FC; border-color: #E2E8F0 !important; } [data-theme="light"] .console-dashboard-overview__admin:hover { background: #EEF2F6 !important; color: #13233E !important; } [data-theme="light"] .console-dashboard-stat { background: #F7F9FC !important; box-shadow: inset 0 0 0 1px #DFE5EC !important; } [data-theme="light"] .console-dashboard-stat__label { color: #4B5565 !important; } [data-theme="light"] .console-dashboard-stat__value { color: #111827 !important; } [data-theme="warm"] .console-sidebar .ui-nav-link--active { background: #DED1C1 !important; border-color: #CBB8A4 !important; color: #2F261F !important; box-shadow: 0 1px 2px rgba(47, 38, 31, 0.08); } [data-theme="warm"] .console-sidebar .ui-nav-link--active::before { opacity: 1; background: #13233E; } [data-theme="warm"] .console-sidebar .ui-nav-link--active:hover { background: #E4D8CA !important; border-color: #CBB8A4 !important; } [data-theme="warm"] .console-dashboard-overview { background: #FBF7F2; border: 1px solid #DED1C3; box-shadow: 0 12px 28px rgba(47, 38, 31, 0.08); } [data-theme="warm"] .console-dashboard-overview__org { background: #F1E8DD !important; box-shadow: inset 0 0 0 1px #E2D5C7; } [data-theme="warm"] .console-dashboard-overview__org-name { color: #66584D !important; } [data-theme="warm"] .console-dashboard-overview__title { color: #2F261F !important; } [data-theme="warm"] .console-dashboard-overview__description, [data-theme="warm"] .console-dashboard-overview__admin { color: #66584D !important; } [data-theme="warm"] .console-dashboard-overview__admin { background: #F7F1E9; border-color: #DED1C3 !important; } [data-theme="warm"] .console-dashboard-overview__admin:hover { background: #F2E9DE !important; color: #2F261F !important; } [data-theme="warm"] .console-dashboard-stat { background: #F1E8DD !important; box-shadow: inset 0 0 0 1px #E2D5C7 !important; } [data-theme="warm"] .console-dashboard-stat__label { color: #7B6D60 !important; } [data-theme="warm"] .console-dashboard-stat__value { color: #2F261F !important; } [data-theme="warm"] .console-dashboard-stat--revenue .console-dashboard-stat__icon { color: #7C93FF !important; } [data-theme="warm"] .console-dashboard-stat--running .console-dashboard-stat__icon { color: #E7BB63 !important; } [data-theme="warm"] .console-dashboard-stat--completed .console-dashboard-stat__icon { color: #61BFA5 !important; } [data-theme="warm"] .console-dashboard-stat--chats .console-dashboard-stat__icon { color: #8F7AE6 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action { background: #F7F1E9 !important; border-color: #DED1C3 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action:hover { background: #F2E9DE !important; border-color: #DED1C3 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__title { color: #2F261F !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__body { color: #66584D !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon { box-shadow: none; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon--create { background: #F6E4D4 !important; color: #9C5B34 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon--chat { background: #E7EEFF !important; color: #4C63C7 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon--workflow { background: #F0E8DE !important; color: #7A6654 !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon--runs { background: #FFF1D8 !important; color: #B7791F !important; } [data-theme="warm"] .console-dashboard .console-dashboard-action__icon--api { background: #E4F2ED !important; color: #2E8C7D !important; } [data-theme="warm"] .console-topbar { background: color-mix(in srgb, var(--ui-surface) 86%, transparent) !important; } [data-theme="warm"] .console-sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--ui-sidebar-bg) 96%, transparent), color-mix(in srgb, var(--ui-sidebar-bg-deep) 92%, transparent)) !important; } .console-page .ui-page-kicker { color: var(--ui-text-soft); } .console-page .ui-page-title { color: var(--ui-text); } .console-page .ui-page-subtitle { color: var(--ui-text-muted); } .console-page .bg-white, .console-page .bg-white\/60, .console-page .bg-white\/78, .console-page .bg-white\/80, .console-page .bg-white\/86, .console-page .bg-white\/88 { background: var(--console-page-surface) !important; } .console-page .bg-slate-50, .console-page .bg-slate-50\/50, .console-page .bg-slate-50\/60, .console-page .bg-slate-50\/70, .console-page .bg-slate-50\/80, .console-page .bg-slate-50\/90, .console-page .bg-slate-100, .console-page .bg-stone-50, .console-page .bg-stone-50\/70, .console-page .bg-stone-50\/80, .console-page .bg-indigo-50, .console-page .bg-amber-50, .console-page .bg-emerald-50, .console-page .bg-rose-50 { background: var(--console-page-surface-muted) !important; } .console-page .border-white\/70, .console-page .border-slate-100, .console-page .border-slate-200, .console-page .border-slate-200\/60, .console-page .border-slate-200\/70, .console-page .border-slate-200\/80 { border-color: var(--ui-border) !important; } .console-page .text-slate-950, .console-page .text-slate-900, .console-page .text-slate-800, .console-page .text-slate-700 { color: var(--ui-text) !important; } .console-page .text-slate-600, .console-page .text-slate-500, .console-page .text-slate-400 { color: var(--ui-text-muted) !important; } .console-page .shadow-sm { box-shadow: var(--ui-shadow-sm); } [data-theme="dark"] .console-page { color: #ebe9e8; } [data-theme="dark"] .console-page--home, [data-theme="dark"] .console-page--studio, [data-theme="dark"] .console-page--artifacts, [data-theme="dark"] .console-page--workflows, [data-theme="dark"] .console-dashboard { --console-page-surface: #302b27; --console-page-surface-muted: #262220; --console-page-border: #443e3a; --console-page-border-strong: #5a5450; --console-page-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .console-page .bg-white, [data-theme="dark"] .console-page .bg-white\/60, [data-theme="dark"] .console-page .bg-white\/78, [data-theme="dark"] .console-page .bg-white\/80, [data-theme="dark"] .console-page .bg-white\/86, [data-theme="dark"] .console-page .bg-white\/88, [data-theme="dark"] .console-page .ui-card--panel { background: #302b27 !important; border-color: #443e3a !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .console-page .bg-slate-50, [data-theme="dark"] .console-page .bg-slate-50\/50, [data-theme="dark"] .console-page .bg-slate-50\/60, [data-theme="dark"] .console-page .bg-slate-50\/70, [data-theme="dark"] .console-page .bg-slate-50\/80, [data-theme="dark"] .console-page .bg-slate-50\/90, [data-theme="dark"] .console-page .bg-slate-100, [data-theme="dark"] .console-page .bg-stone-50, [data-theme="dark"] .console-page .bg-stone-50\/70, [data-theme="dark"] .console-page .bg-stone-50\/80, [data-theme="dark"] .console-page .bg-indigo-50, [data-theme="dark"] .console-page .bg-amber-50, [data-theme="dark"] .console-page .bg-emerald-50, [data-theme="dark"] .console-page .bg-rose-50 { background: #262220 !important; } [data-theme="dark"] .console-page .border-white\/70, [data-theme="dark"] .console-page .border-slate-100, [data-theme="dark"] .console-page .border-slate-200, [data-theme="dark"] .console-page .border-slate-200\/60, [data-theme="dark"] .console-page .border-slate-200\/70, [data-theme="dark"] .console-page .border-slate-200\/80 { border-color: #443e3a !important; } [data-theme="dark"] .console-page .text-slate-950, [data-theme="dark"] .console-page .text-slate-900, [data-theme="dark"] .console-page .text-slate-800, [data-theme="dark"] .console-page .text-slate-700 { color: #ebe9e8 !important; } [data-theme="dark"] .console-page .text-slate-600, [data-theme="dark"] .console-page .text-slate-500, [data-theme="dark"] .console-page .text-slate-400 { color: #b0aaa5 !important; } [data-theme="dark"] .console-page .ui-page-kicker { color: #7a7470; } [data-theme="dark"] .console-page .hover\:bg-slate-50\/60:hover { background: #302b27 !important; } .console-home-panel, .console-dashboard-hero, .console-dashboard-action, .console-dashboard-panel, .console-dashboard-subcard, .console-studio-panel, .console-studio-feature-card, .console-home-subpanel, .console-studio-subpanel, .console-studio-mini-panel, .console-artifacts-panel, .console-artifacts-item, .console-artifacts-preview, .console-artifacts-details, .console-workflows-panel, .console-workflows-filter, .console-workflows-item { background: var(--console-page-surface) !important; border-color: var(--console-page-border) !important; box-shadow: var(--console-page-shadow); } .console-studio-subpanel, .console-studio-mini-panel, .console-artifacts-preview, .console-artifacts-details, .console-workflows-filter, .console-dashboard-subcard { background: var(--console-page-surface-muted) !important; } .console-studio-hero { box-shadow: var(--console-page-shadow); } .console-page--studio .console-studio-feature-card { background: var(--console-page-surface) !important; border-color: var(--console-page-border) !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card { background: #FBF7F2 !important; border-color: #DED1C3 !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card__title { color: #2F261F !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card__description { color: #66584D !important; } [data-theme="warm"] .console-page--studio .console-studio-feature-card--image .console-studio-feature-card__cover { background: linear-gradient(180deg, #F5EAD7 0%, #FBF7F2 100%); } [data-theme="warm"] .console-page--studio .console-studio-feature-card--video .console-studio-feature-card__cover { background: linear-gradient(180deg, #E7EDF8 0%, #FBF7F2 100%); } [data-theme="warm"] .console-page--studio .console-studio-feature-card--asset .console-studio-feature-card__cover { background: linear-gradient(180deg, #E4F2ED 0%, #FBF7F2 100%); } [data-theme="warm"] .console-page--studio .console-studio-feature-card--template .console-studio-feature-card__cover { background: linear-gradient(180deg, #EFE7DD 0%, #FBF7F2 100%); } [data-theme="dark"] .console-page--studio .console-studio-feature-card { background: #171C24 !important; border-color: #2B3441 !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } [data-theme="dark"] .console-page--studio .console-studio-feature-card__title { color: #F3F5F7 !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card__description { color: #C1C8D2 !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card__arrow { color: #C1C8D2 !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card:hover .console-studio-feature-card__arrow { color: #F3F5F7 !important; } [data-theme="dark"] .console-page--studio .console-studio-feature-card--image .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(231, 187, 99, 0.20) 0%, rgba(23, 28, 36, 0) 100%); } [data-theme="dark"] .console-page--studio .console-studio-feature-card--video .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(124, 147, 255, 0.20) 0%, rgba(23, 28, 36, 0) 100%); } [data-theme="dark"] .console-page--studio .console-studio-feature-card--asset .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(113, 210, 195, 0.18) 0%, rgba(23, 28, 36, 0) 100%); } [data-theme="dark"] .console-page--studio .console-studio-feature-card--template .console-studio-feature-card__cover { background: linear-gradient(180deg, rgba(192, 180, 160, 0.16) 0%, rgba(23, 28, 36, 0) 100%); } /* ── Studio Landing Theme Family ────────────────────────── */ .console-page--studio { --studio-landing-canvas: transparent; --studio-landing-card: var(--console-page-surface); --studio-landing-sub-card: var(--console-page-surface-muted); --studio-landing-inset: var(--console-page-surface-muted); --studio-landing-border: var(--console-page-border); --studio-landing-border-strong: var(--console-page-border-strong); --studio-landing-text: var(--ui-text); --studio-landing-text-muted: var(--ui-text-muted); --studio-landing-text-soft: var(--ui-text-soft); --studio-landing-shadow: var(--console-page-shadow); } [data-theme="light"] .console-page--studio { --studio-landing-canvas: #F4F6F9; --studio-landing-card: #FFFFFF; --studio-landing-sub-card: #F7F9FC; --studio-landing-inset: #F7F9FC; --studio-landing-border: #DFE5EC; --studio-landing-border-strong: #CDD6E0; --studio-landing-text: #111827; --studio-landing-text-muted: #4B5565; --studio-landing-text-soft: #8A94A6; --studio-landing-shadow: 0 10px 24px rgba(15, 23, 42, 0.06); } [data-theme="warm"] .console-page--studio { --studio-landing-canvas: #F4ECE1; --studio-landing-card: #FBF7F2; --studio-landing-sub-card: #F2E8DC; --studio-landing-inset: #F2E8DC; --studio-landing-border: #DED1C3; --studio-landing-border-strong: #CCBCAA; --studio-landing-text: #2F261F; --studio-landing-text-muted: #66584D; --studio-landing-text-soft: #9A8A7A; --studio-landing-shadow: 0 12px 28px rgba(47, 38, 31, 0.08); } [data-theme="dark"] .console-page--studio { --studio-landing-canvas: #070B12; --studio-landing-card: #121826; --studio-landing-sub-card: #171E2D; --studio-landing-inset: #1C2536; --studio-landing-border: #263143; --studio-landing-border-strong: #324158; --studio-landing-text: #F4F7FB; --studio-landing-text-muted: #BAC4D0; --studio-landing-text-soft: #7F8A99; --studio-landing-shadow: 0 12px 28px rgba(0, 0, 0, 0.24); } html[data-theme="light"]:has(.console-page--studio) .console-shell, html[data-theme="light"]:has(.console-page--studio) .console-content, html[data-theme="warm"]:has(.console-page--studio) .console-shell, html[data-theme="warm"]:has(.console-page--studio) .console-content, html[data-theme="dark"]:has(.console-page--studio) .console-shell, html[data-theme="dark"]:has(.console-page--studio) .console-content { background: var(--studio-landing-canvas) !important; } .console-page--studio .console-studio-panel, .console-page--studio .console-studio-feature-card { background: var(--studio-landing-card) !important; border-color: var(--studio-landing-border) !important; box-shadow: var(--studio-landing-shadow); } .console-page--studio .console-studio-subpanel { background: var(--studio-landing-sub-card) !important; border-color: var(--studio-landing-border) !important; box-shadow: none; } .console-page--studio .console-studio-mini-panel { background: var(--studio-landing-inset) !important; border-color: var(--studio-landing-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .console-page--studio .text-slate-900, .console-page--studio .text-slate-800, .console-page--studio .text-slate-700 { color: var(--studio-landing-text) !important; } .console-page--studio .text-slate-600, .console-page--studio .text-slate-500 { color: var(--studio-landing-text-muted) !important; } .console-page--studio .text-slate-400 { color: var(--studio-landing-text-soft) !important; } .console-page--studio .border-slate-200, .console-page--studio .border-slate-200\/70, .console-page--studio .border-slate-200\/80 { border-color: var(--studio-landing-border) !important; } [data-theme="dark"] .console-page--studio .console-studio-panel, [data-theme="dark"] .console-page--studio .console-studio-feature-card { background: #121826 !important; border-color: #263143 !important; } [data-theme="dark"] .console-page--studio .console-studio-subpanel { background: #171E2D !important; border-color: #263143 !important; } [data-theme="dark"] .console-page--studio .console-studio-mini-panel { background: #1C2536 !important; border-color: #324158 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } .console-page--home > section { box-shadow: var(--console-page-shadow); } [data-theme="dark"] .console-page--home .bg-slate-950, [data-theme="dark"] .console-page--home .bg-slate-950\/95, [data-theme="dark"] .console-page--home .bg-slate-900, [data-theme="dark"] .console-page--home .bg-slate-900\/95 { background: #1a1816 !important; border-color: #443e3a !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .console-dashboard .border-t, [data-theme="dark"] .console-dashboard .divide-y > :not([hidden]) ~ :not([hidden]), [data-theme="dark"] .console-page--studio .border-t, [data-theme="dark"] .console-page--artifacts .border-t, [data-theme="dark"] .console-page--workflows .border-t, [data-theme="dark"] .console-page--workflows .divide-y > :not([hidden]) ~ :not([hidden]), [data-theme="dark"] .console-page--artifacts .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #443e3a !important; } [data-theme="dark"] .console-dashboard .text-white { color: #ebe9e8 !important; } [data-theme="dark"] .console-dashboard .text-slate-300, [data-theme="dark"] .console-dashboard .text-slate-400, [data-theme="dark"] .console-dashboard .text-slate-500, [data-theme="dark"] .console-page--studio .text-slate-300, [data-theme="dark"] .console-page--studio .text-slate-400, [data-theme="dark"] .console-page--studio .text-slate-500, [data-theme="dark"] .console-page--artifacts .text-slate-300, [data-theme="dark"] .console-page--artifacts .text-slate-400, [data-theme="dark"] .console-page--artifacts .text-slate-500, [data-theme="dark"] .console-page--workflows .text-slate-300, [data-theme="dark"] .console-page--workflows .text-slate-400, [data-theme="dark"] .console-page--workflows .text-slate-500, [data-theme="dark"] .console-page--workflows .text-slate-600 { color: #b0aaa5 !important; } [data-theme="dark"] .console-page--studio .bg-gradient-to-br.from-slate-950, [data-theme="dark"] .console-page--studio .bg-gradient-to-br.from-slate-900, [data-theme="dark"] .console-page--studio .bg-gradient-to-br.via-slate-900, [data-theme="dark"] .console-page--studio .bg-gradient-to-br.to-slate-900, [data-theme="dark"] .console-dashboard .bg-gradient-to-br.from-slate-900, [data-theme="dark"] .console-dashboard .bg-gradient-to-br.via-slate-800, [data-theme="dark"] .console-dashboard .bg-gradient-to-br.to-slate-900 { background-image: none !important; background-color: #1a1816 !important; } [data-theme="dark"] .console-dashboard .console-dashboard-action__icon, [data-theme="dark"] .console-dashboard .bg-rose-50, [data-theme="dark"] .console-dashboard .bg-indigo-50, [data-theme="dark"] .console-dashboard .bg-amber-50, [data-theme="dark"] .console-dashboard .bg-emerald-50, [data-theme="dark"] .console-page--studio .bg-amber-50, [data-theme="dark"] .console-page--studio .bg-emerald-50, [data-theme="dark"] .console-page--studio .bg-rose-50, [data-theme="dark"] .console-page--studio .bg-indigo-50, [data-theme="dark"] .console-page--workflows .bg-slate-50, [data-theme="dark"] .console-page--artifacts .bg-slate-50, [data-theme="dark"] .console-page--artifacts .bg-slate-100 { background: #262220 !important; } [data-theme="dark"] .console-page--studio .ui-button--secondary, [data-theme="dark"] .console-page--artifacts .ui-button--secondary, [data-theme="dark"] .console-page--workflows .ui-button--secondary, [data-theme="dark"] .console-dashboard .ui-button--secondary { background: #302b27; border-color: #443e3a; color: #ebe9e8; } [data-theme="dark"] .console-page--studio .ui-button--soft, [data-theme="dark"] .console-page--artifacts .ui-button--soft, [data-theme="dark"] .console-page--workflows .ui-button--soft, [data-theme="dark"] .console-dashboard .ui-button--soft { background: #3a3532; border-color: #5a5450; color: #d6d3d1; } /* ── Account Center Dark Surfaces ───────────────────────── */ html[data-theme="dark"]:has(.account-center), [data-theme="dark"] .account-center { --account-canvas: #070B12; --account-sidebar: #0A0E16; --account-topbar: #0C1017; --account-panel: #121826; --account-panel-2: #171E2D; --account-panel-3: #1C2536; --account-inset: #0D1420; --account-border: #263143; --account-border-strong: #324158; --account-text: #F4F7FB; --account-text-muted: #BAC4D0; --account-text-soft: #7F8A99; --account-accent: #7C93FF; --account-accent-hover: #93A7FF; --account-accent-soft: rgba(124, 147, 255, 0.14); --account-success: #61BFA5; --account-success-soft: rgba(97, 191, 165, 0.14); --account-warning: #E7BB63; --account-warning-soft: rgba(231, 187, 99, 0.14); --account-danger: #E8A39A; --account-danger-soft: rgba(232, 163, 154, 0.14); } html[data-theme="dark"]:has(.account-center) body, html[data-theme="dark"]:has(.account-center) .console-shell, html[data-theme="dark"]:has(.account-center) .console-content { background: var(--account-canvas) !important; } html[data-theme="dark"]:has(.account-center) .console-topbar, html[data-theme="dark"]:has(.account-center) .console-mobile-nav { background: var(--account-topbar) !important; border-color: var(--account-border) !important; } html[data-theme="dark"]:has(.account-center) .console-sidebar { background: var(--account-sidebar) !important; border-color: var(--account-border) !important; } html[data-theme="dark"]:has(.account-center) .console-sidebar__footer { border-top-color: var(--account-border) !important; } html[data-theme="dark"]:has(.account-center) .console-sidebar-card { background: var(--account-panel) !important; border-color: var(--account-border) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24); } html[data-theme="dark"]:has(.account-center) .console-sidebar .ui-nav-link { color: var(--account-text-muted) !important; } html[data-theme="dark"]:has(.account-center) .console-sidebar .ui-nav-link:hover { background: var(--account-panel-2) !important; color: var(--account-text) !important; } html[data-theme="dark"]:has(.account-center) .console-sidebar .ui-nav-link--active { background: #152235 !important; border-color: #28374D !important; color: #F4F7FB !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } html[data-theme="dark"]:has(.account-center) .console-sidebar .ui-nav-link--active::before { opacity: 1; background: #7C93FF; } html[data-theme="dark"]:has(.account-center) .console-sidebar .ui-nav-link--active:hover { background: #1A2940 !important; border-color: #31445E !important; } [data-theme="dark"] .account-center { color: var(--account-text); } [data-theme="dark"] .account-center .ui-page-title, [data-theme="dark"] .account-center .text-slate-950, [data-theme="dark"] .account-center .text-slate-900, [data-theme="dark"] .account-center .text-slate-800, [data-theme="dark"] .account-center .text-slate-700 { color: var(--account-text) !important; } [data-theme="dark"] .account-center .ui-page-subtitle, [data-theme="dark"] .account-center .text-slate-600, [data-theme="dark"] .account-center .text-slate-500 { color: var(--account-text-muted) !important; } [data-theme="dark"] .account-center .ui-page-kicker, [data-theme="dark"] .account-center .text-slate-400, [data-theme="dark"] .account-center .text-slate-300 { color: var(--account-text-soft) !important; } [data-theme="dark"] .account-center .bg-white, [data-theme="dark"] .account-center .bg-white\/80, [data-theme="dark"] .account-center .bg-white\/88, [data-theme="dark"] .account-center .bg-white\/92, [data-theme="dark"] .account-center .ui-card--panel { background: var(--account-panel) !important; } [data-theme="dark"] .account-center .bg-slate-50, [data-theme="dark"] .account-center .bg-slate-50\/70, [data-theme="dark"] .account-center .bg-slate-50\/80, [data-theme="dark"] .account-center .bg-slate-100 { background: var(--account-panel-2) !important; } [data-theme="dark"] .account-center .border-white\/70, [data-theme="dark"] .account-center .border-slate-300, [data-theme="dark"] .account-center .border-slate-200, [data-theme="dark"] .account-center .border-slate-200\/80 { border-color: var(--account-border) !important; } [data-theme="dark"] .account-center .account-center-panel, [data-theme="dark"] .account-center .account-center-usage-record, [data-theme="dark"] .account-center .account-center-summary-card { background: var(--account-panel) !important; border-color: var(--account-border) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); } [data-theme="dark"] .account-center .account-center-stat, [data-theme="dark"] .account-center .account-center-tile, [data-theme="dark"] .account-center .account-center-row, [data-theme="dark"] .account-center .account-center-key-row, [data-theme="dark"] .account-center .account-center-metric, [data-theme="dark"] .account-center .account-center-filter { background: var(--account-panel-2) !important; border-color: var(--account-border) !important; box-shadow: none; } [data-theme="dark"] .account-center .account-center-row:hover, [data-theme="dark"] .account-center .account-center-key-row:hover { background: var(--account-panel-3) !important; border-color: var(--account-border-strong) !important; } [data-theme="dark"] .account-center .account-center-inset-panel, [data-theme="dark"] .account-center .account-center-preview, [data-theme="dark"] .account-center .account-center-loading > section, [data-theme="dark"] .account-center .account-center-empty-wrap .ui-empty-state { background: var(--account-inset) !important; border-color: var(--account-border) !important; box-shadow: none; } [data-theme="dark"] .account-center .account-center-preview__frame { background: var(--account-panel-3) !important; } [data-theme="dark"] .account-center .account-center-subnav__nav { display: inline-flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.35rem; border: 1px solid var(--account-border); border-radius: 999px; background: var(--account-panel-2); } [data-theme="dark"] .account-center .account-center-subnav .ui-tab { background: transparent; border-color: transparent; color: var(--account-text-muted); box-shadow: none; } [data-theme="dark"] .account-center .account-center-subnav .ui-tab:hover { background: var(--account-inset); color: var(--account-text); } [data-theme="dark"] .account-center .account-center-subnav .ui-tab--active { background: var(--account-accent); border-color: var(--account-accent); color: #fff; } [data-theme="dark"] .account-center input[type="text"], [data-theme="dark"] .account-center input[type="email"], [data-theme="dark"] .account-center input[type="password"], [data-theme="dark"] .account-center input[type="number"], [data-theme="dark"] .account-center input[type="url"], [data-theme="dark"] .account-center select, [data-theme="dark"] .account-center textarea, [data-theme="dark"] .account-center .ui-input, [data-theme="dark"] .account-center .ui-select, [data-theme="dark"] .account-center .ui-textarea { background: var(--account-inset); border-color: var(--account-border); color: var(--account-text); box-shadow: none; } [data-theme="dark"] .account-center input::placeholder, [data-theme="dark"] .account-center textarea::placeholder, [data-theme="dark"] .account-center .ui-input::placeholder, [data-theme="dark"] .account-center .ui-textarea::placeholder { color: var(--account-text-soft); } [data-theme="dark"] .account-center input:focus, [data-theme="dark"] .account-center select:focus, [data-theme="dark"] .account-center textarea:focus, [data-theme="dark"] .account-center .ui-input:focus, [data-theme="dark"] .account-center .ui-select:focus, [data-theme="dark"] .account-center .ui-textarea:focus { border-color: var(--account-border-strong); box-shadow: 0 0 0 4px var(--account-accent-soft); } [data-theme="dark"] .account-center .ui-button--primary { background: var(--account-accent); border-color: var(--account-accent); color: #fff; } [data-theme="dark"] .account-center .ui-button--primary:hover { background: var(--account-accent-hover); border-color: var(--account-accent-hover); } [data-theme="dark"] .account-center .ui-button--secondary { background: var(--account-panel-2); border-color: var(--account-border); color: var(--account-text); } [data-theme="dark"] .account-center .ui-button--secondary:hover { background: var(--account-panel-3); border-color: var(--account-border-strong); } [data-theme="dark"] .account-center .ui-button--soft { background: var(--account-accent-soft); border-color: rgba(124, 147, 255, 0.24); color: var(--account-text); } [data-theme="dark"] .account-center .ui-button--soft:hover { background: rgba(124, 147, 255, 0.22); } [data-theme="dark"] .account-center .account-center-inline-action--primary { background: var(--account-accent) !important; color: #fff !important; } [data-theme="dark"] .account-center .account-center-inline-action--primary:hover { background: var(--account-accent-hover) !important; } [data-theme="dark"] .account-center .account-center-inline-action--secondary { background: var(--account-panel-2) !important; border-color: var(--account-border) !important; color: var(--account-text) !important; } [data-theme="dark"] .account-center .account-center-inline-action--secondary:hover { background: var(--account-panel-3) !important; } [data-theme="dark"] .account-center .ui-chip, [data-theme="dark"] .account-center .ui-chip--outlined { background: var(--account-inset) !important; border-color: var(--account-border) !important; color: var(--account-text-muted) !important; } [data-theme="dark"] .account-center .ui-badge--success { background: var(--account-success-soft); border-color: rgba(97, 191, 165, 0.3); color: #8FE0C7; } [data-theme="dark"] .account-center .ui-badge--warning { background: var(--account-warning-soft); border-color: rgba(231, 187, 99, 0.3); color: #F3D38E; } [data-theme="dark"] .account-center .ui-badge--danger { background: var(--account-danger-soft); border-color: rgba(232, 163, 154, 0.3); color: #F2C0B9; } [data-theme="dark"] .account-center .ui-badge--neutral { background: var(--account-inset); border-color: var(--account-border); color: var(--account-text-muted); } [data-theme="dark"] .account-center .account-center-table-shell { overflow: hidden; border: 1px solid var(--account-border); border-radius: 1rem; background: var(--account-panel); } [data-theme="dark"] .account-center .account-center-table-shell th { background: var(--account-panel-3); color: var(--account-text-muted); border-color: var(--account-border); } [data-theme="dark"] .account-center .account-center-table-shell td { background: transparent; color: var(--account-text-muted); border-color: var(--account-border); } [data-theme="dark"] .account-center .account-center-loading .bg-slate-200, [data-theme="dark"] .account-center .account-center-loading .ui-skeleton { background: var(--account-panel-3) !important; } [data-theme="dark"] .account-center .ui-empty-state__title { color: var(--account-text); } [data-theme="dark"] .account-center .ui-empty-state__description { color: var(--account-text-muted); } [data-theme="dark"] .account-center .account-center-issued-token { background: var(--account-panel-2) !important; border-color: rgba(231, 187, 99, 0.35) !important; } [data-theme="dark"] .account-center .account-center-issued-token__value { background: var(--account-inset) !important; border-color: rgba(231, 187, 99, 0.28) !important; color: var(--account-text) !important; } [data-theme="dark"] .account-center .account-center-retention-pill.border-amber-200, [data-theme="dark"] .account-center .bg-amber-50 { background: var(--account-warning-soft) !important; border-color: rgba(231, 187, 99, 0.3) !important; color: #F3D38E !important; } [data-theme="dark"] .account-center .account-center-retention-pill.border-emerald-200, [data-theme="dark"] .account-center .bg-emerald-50 { background: var(--account-success-soft) !important; border-color: rgba(97, 191, 165, 0.3) !important; color: #8FE0C7 !important; } [data-theme="dark"] .account-center .account-center-retention-pill.border-sky-200, [data-theme="dark"] .account-center .bg-sky-50 { background: rgba(124, 147, 255, 0.14) !important; border-color: rgba(124, 147, 255, 0.3) !important; color: #AFC0FF !important; } [data-theme="dark"] .account-center .account-center-retention-pill.border-violet-200, [data-theme="dark"] .account-center .bg-violet-50 { background: rgba(143, 122, 230, 0.14) !important; border-color: rgba(143, 122, 230, 0.3) !important; color: #C8BAFF !important; } .account-center-referral-code, .account-center-referral-link { display: block; overflow-wrap: anywhere; word-break: break-word; border-radius: 1rem; border: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); padding: 0.9rem 1rem; font-size: 0.9rem; line-height: 1.55; } .account-center-referral-code { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.12em; } .account-center--referrals .account-center-table-shell td p + p { margin-top: 0.25rem; } .account-center--referrals .account-center-inset-panel { box-shadow: none; } .account-center--referrals .ui-badge, .account-center--referrals .ui-chip { white-space: nowrap; } [data-theme="dark"] .account-center--referrals .account-center-referral-code, [data-theme="dark"] .account-center--referrals .account-center-referral-link { border-color: var(--account-border); background: var(--account-inset); color: var(--account-text); } /* ── Smooth theme transition ─────────────────────────────── */ html { transition: background-color 0.25s ease, color 0.25s ease; } html * { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* ── Viewport shell (锁定高度，禁止布局抖动) ──────────── */ .chat-viewport { position: relative; height: 100dvh; overflow: hidden; background: var(--ui-bg); } .chat-viewport__main { height: 100%; overflow: hidden; } /* Toast overlay：fixed 定位，不占文档流 */ .chat-toast-layer { position: fixed; top: 0.75rem; left: 50%; transform: translateX(-50%); z-index: 9999; width: 100%; max-width: 28rem; pointer-events: none; } .chat-toast-layer > * { pointer-events: auto; } /* 5 秒后自动淡出 */ .chat-toast-layer .ui-flash { animation: chat-toast-in 0.25s ease, chat-toast-out 0.3s ease 4.5s forwards; } @keyframes chat-toast-in { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } } @keyframes chat-toast-out { from { opacity: 1; } to { opacity: 0; pointer-events: none; } } .chat-home-shell, .chat-main-shell { min-height: 0; } .chat-home-shell { display: flex; height: 100%; width: 100%; } .chat-main-shell { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; flex-direction: column; background: var(--ui-bg); } .chat-statusbar { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 1.25rem; border-bottom: 1px solid var(--ui-border); } .chat-statusbar__meta { min-width: 0; flex: 1 1 auto; } .chat-statusbar__title { margin: 0; color: var(--ui-text); font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-statusbar__subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.1rem; color: var(--ui-text-soft); font-size: 0.75rem; line-height: 1.4; } .chat-statusbar__controls { display: inline-flex; align-items: center; gap: 0.65rem; } .chat-statusbar__info-trigger { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xs); background: var(--ui-surface); color: var(--ui-text-soft); cursor: pointer; } .chat-statusbar__info-trigger:hover { color: var(--ui-text); background: var(--ui-surface-muted); } .chat-statusbar__info-panel { position: absolute; right: 0; z-index: 30; width: 16rem; margin-top: 0.4rem; padding: 0.75rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); color: var(--ui-text-muted); box-shadow: var(--ui-shadow-lg); } .chat-statusbar__info-panel .font-semibold { color: var(--ui-text); } .chat-statusbar__info-section { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--ui-border); } .chat-statusbar__info-kicker { margin: 0; color: var(--ui-text-soft); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .chat-statusbar__workflow-link { display: block; padding: 0.7rem 0.8rem; border: 1px solid var(--ui-border); border-radius: 0.9rem; background: var(--ui-surface-muted); color: var(--ui-text); font-size: 0.85rem; font-weight: 600; } .chat-statusbar__workflow-link:hover { background: var(--ui-sidebar-hover); } .chat-thread-stage { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 1.1rem 1rem; } .chat-thread-shell { width: 100%; max-width: 50rem; margin: 0 auto; } .chat-empty-state { display: grid; gap: 1rem; min-height: calc(100vh - 23rem); align-content: center; } .chat-empty-state__hero { padding: 1.65rem; border: 1px solid var(--ui-border); border-radius: 1.7rem; background: linear-gradient(180deg, var(--ui-surface) 0%, var(--ui-surface-soft) 100%); box-shadow: var(--ui-shadow-md); } .chat-empty-state__title { margin: 0.9rem 0 0; color: var(--ui-text); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -0.05em; line-height: 1; } .chat-empty-state__description { max-width: 46rem; margin-top: 0.8rem; color: var(--ui-text-muted); font-size: 0.98rem; line-height: 1.8; } .chat-empty-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } .chat-empty-card { padding: 1rem; border: 1px solid var(--ui-border); border-radius: 1.35rem; background: var(--ui-surface); box-shadow: var(--ui-shadow-sm); } .chat-empty-card__kicker { margin: 0; color: var(--ui-text-soft); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .chat-empty-card__list { margin: 0.9rem 0 0; padding-left: 1rem; color: var(--ui-text-muted); font-size: 0.9rem; line-height: 1.8; } .chat-empty-card__actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.9rem; } .chat-empty-card__chip { display: inline-flex; align-items: center; padding: 0.62rem 0.8rem; border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface-muted); color: var(--ui-text); font-size: 0.82rem; font-weight: 600; } .chat-empty-card__workflow { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.9rem; padding: 0.8rem 0.9rem; border: 1px solid var(--ui-border); border-radius: 1rem; background: var(--ui-surface-muted); color: var(--ui-text); } .chat-empty-card__workflow:hover { background: var(--ui-sidebar-hover); } .chat-message-stack { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; } .chat-message { display: flex; flex-direction: column; gap: 0.45rem; } .chat-message--user { align-items: flex-end; } .chat-message--assistant, .chat-message--system { align-items: flex-start; } .chat-message__meta { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0 0.2rem; } .chat-message__status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; } .chat-message__status--failed { color: var(--ui-danger-text); } .chat-message__status--pending { color: var(--ui-text-soft); } .chat-message__status-icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 999px; background: rgba(251, 113, 133, 0.14); border: 1px solid rgba(251, 113, 133, 0.28); color: var(--ui-danger-text); font-size: 0.72rem; line-height: 1; } .chat-message__status-icon--pending { background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.28); color: var(--ui-text-soft); } .chat-message__role { color: var(--ui-text-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .chat-message__time { color: var(--ui-text-soft); font-size: 0.72rem; } .chat-message__bubble { width: min(100%, 42rem); padding: 0.75rem 0.85rem; border-radius: var(--ui-radius-md); } .chat-message--user .chat-message__bubble { background: var(--ui-bubble-user-bg); color: var(--ui-bubble-user-text); } .chat-message--failed.chat-message--user .chat-message__bubble { border: 1px solid rgba(251, 113, 133, 0.28); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.08); } .chat-message--assistant .chat-message__bubble { border: 1px solid var(--ui-bubble-ai-border); background: var(--ui-bubble-ai-bg); color: var(--ui-bubble-ai-text); } .chat-message--system .chat-message__bubble { border: 1px solid var(--ui-accent-border); background: var(--ui-warning-soft); color: var(--ui-warning-text); } .chat-message__foot { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--ui-border); } .chat-message--user .chat-message__foot { border-top-color: rgba(255, 255, 255, 0.12); } .chat-message__meta-note { opacity: 0.72; font-size: 0.75rem; font-weight: 600; } .chat-message__error-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; } .chat-message__error-text { margin: 0; color: var(--ui-danger-text); font-size: 0.82rem; font-weight: 600; } .chat-message__pending-box { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ui-text-muted); } .chat-message__pending-text { font-size: 0.84rem; font-weight: 600; } .chat-richtext { color: inherit; font-size: 0.95rem; line-height: 1.85; word-break: break-word; } .chat-richtext > :first-child { margin-top: 0; } .chat-richtext > :last-child { margin-bottom: 0; } .chat-richtext p, .chat-richtext ul, .chat-richtext ol, .chat-richtext pre, .chat-richtext blockquote, .chat-richtext table, .chat-richtext figure { margin: 0.75rem 0; } .chat-richtext ul, .chat-richtext ol { padding-left: 1.25rem; } .chat-richtext code { padding: 0.18rem 0.4rem; border: 1px solid var(--ui-code-border); border-radius: 0.5rem; background: var(--ui-code-bg); color: inherit; font-size: 0.84em; } .chat-richtext pre { padding: 1rem; border: 1px solid var(--ui-code-border); border-radius: 1rem; background: var(--ui-code-bg); color: inherit; overflow-x: auto; } .chat-richtext pre code { padding: 0; border: 0; background: transparent; } .chat-richtext blockquote { padding: 0.9rem 1rem; border-left: 3px solid var(--ui-quote-border); border-radius: 0 1rem 1rem 0; background: var(--ui-quote-bg); color: var(--ui-text-muted); } .chat-richtext table { width: 100%; overflow: hidden; border: 1px solid var(--ui-border); border-radius: 1rem; border-collapse: collapse; } .chat-richtext th, .chat-richtext td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--ui-border); } .chat-richtext th { background: var(--ui-surface-muted); } .chat-richtext img, .chat-richtext video, .chat-richtext canvas { display: block; max-width: 100%; border: 1px solid var(--ui-border); border-radius: 1.1rem; background: var(--ui-media-bg); box-shadow: var(--ui-shadow-sm); } .chat-composer-shell { position: relative; z-index: 10; flex-shrink: 0; padding: 0.75rem 1rem; border-top: 1px solid var(--ui-border); background: var(--ui-bg); } .chat-composer { width: 100%; max-width: 50rem; margin: 0 auto; } .chat-composer__frame { padding: 0.75rem; border: 1px solid var(--ui-composer-border); border-radius: var(--ui-radius-md); background: var(--ui-composer-bg); } .chat-composer__lead, .chat-composer__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.85rem; } .chat-composer__eyebrow { margin: 0; color: var(--ui-text-soft); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .chat-composer__hint { margin: 0.25rem 0 0; color: var(--ui-text-muted); font-size: 0.84rem; } .chat-composer__textarea { margin-top: 0; min-height: 4.5rem; padding: 0; border: 0; background: transparent; color: var(--ui-text); font-size: 0.9rem; line-height: 1.7; box-shadow: none; } .chat-composer__textarea:focus { border: 0; box-shadow: none; } .chat-composer__controls { display: flex; align-items: center; gap: 0.7rem; } .chat-composer__submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 5rem; min-height: 2.25rem; padding: 0.5rem 1rem; border: 1px solid transparent; border-radius: var(--ui-radius-sm); background: var(--ui-accent); color: var(--ui-sidebar-active-text); font-size: 0.82rem; font-weight: 700; } .chat-composer__submit:hover { transform: translateY(-1px); opacity: 0.96; } .chat-composer__submit--grace { background: #92400e; color: #fff7ed; } .chat-composer__submit--abort { background: #9f1239; color: #fff1f2; } .chat-composer__submit:focus-visible, .chat-statusbar__info-trigger:focus-visible, .chat-model-picker__trigger:focus-visible, .chat-model-picker__option:focus-visible, .ui-theme-switcher__btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ui-accent-soft); } .chat-composer__submit:disabled { cursor: not-allowed; opacity: 0.5; transform: none; } .chat-composer__submit-icon { display: inline-flex; width: 0.8rem; height: 0.8rem; align-items: center; justify-content: center; flex-shrink: 0; } .chat-composer__submit-icon--stop::before { content: ""; display: block; width: 0.58rem; height: 0.58rem; border-radius: 0.12rem; background: currentColor; } .chat-composer__submit-icon--spinner::before { content: ""; display: block; width: 0.7rem; height: 0.7rem; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: currentColor; animation: ui-spin 0.9s linear infinite; } .chat-composer__foot { margin-top: 0.7rem; opacity: 0.88; } .chat-pending-state { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid var(--ui-accent-border); border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-text-muted); font-size: 0.82rem; } .chat-pending-state__dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: currentColor; animation: ui-shimmer 1s infinite alternate; } /* ── Pending bubble (transcript 里的轻量占位) ───────── */ .chat-pending-bubble { margin-top: 0.25rem; } /* Composer inline pending — 极简一行，不做独立卡片 */ .chat-composer-pending { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; margin-bottom: 0.4rem; color: var(--ui-text-soft); font-size: 0.78rem; font-weight: 600; } .chat-composer-pending--system { border: 1px solid var(--ui-accent-border); border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-text-muted); } .chat-retry-pending { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.55rem; padding: 0.55rem 0.7rem; border: 1px solid var(--ui-accent-border); border-radius: var(--ui-radius-sm); background: var(--ui-accent-soft); color: var(--ui-text-muted); font-size: 0.76rem; font-weight: 600; } .chat-pending-dots { display: inline-flex; align-items: center; gap: 0.25rem; } .chat-pending-dots span { display: block; width: 0.4rem; height: 0.4rem; border-radius: 999px; background: var(--ui-text-soft); animation: chat-dot-bounce 1.2s ease-in-out infinite; } .chat-pending-dots span:nth-child(2) { animation-delay: 0.15s; } .chat-pending-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes chat-dot-bounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-0.2rem); } } .chat-model-picker { position: relative; } .chat-model-picker__trigger { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; padding: 0.4rem 0.65rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-xs); background: var(--ui-surface); color: var(--ui-text); } .chat-model-picker__summary { min-width: 0; text-align: left; } .chat-model-picker__label, .chat-model-picker__menu-kicker { margin: 0; color: var(--ui-text-soft); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .chat-model-picker__title, .chat-model-picker__option-title { margin: 0.2rem 0 0; color: var(--ui-text); font-size: 0.92rem; font-weight: 700; } .chat-model-picker__subtitle, .chat-model-picker__option-subtitle, .chat-model-picker__menu-copy { margin: 0.2rem 0 0; color: var(--ui-text-muted); font-size: 0.76rem; line-height: 1.5; } .chat-model-picker__chevron { color: var(--ui-text-soft); font-size: 0.75rem; } .chat-model-picker__menu { position: absolute; left: 0; bottom: calc(100% + 0.4rem); z-index: 30; width: 19rem; max-width: min(19rem, calc(100vw - 2rem)); padding: 0.5rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); background: var(--ui-surface); box-shadow: var(--ui-shadow-lg); } .chat-model-picker__menu-head { padding: 0.4rem 0.45rem 0.7rem; } .chat-model-picker__list { max-height: 18rem; overflow-y: auto; } .chat-model-picker__option { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.6rem; border: 1px solid transparent; border-radius: var(--ui-radius-xs); background: transparent; text-align: left; } .chat-model-picker__option:hover { background: var(--ui-sidebar-hover); border-color: var(--ui-border); } .chat-model-picker__option--active { border-color: var(--ui-accent-border); background: var(--ui-accent-soft); } .chat-model-picker__badge { display: inline-flex; align-items: center; padding: 0.28rem 0.55rem; border: 1px solid var(--ui-accent-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-accent); font-size: 0.68rem; font-weight: 700; } .chat-model-picker__group-label { padding: 0.5rem 0.75rem 0.25rem; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ui-text-soft); } .chat-model-picker__badge-tag { display: inline-flex; align-items: center; margin-left: 0.35rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--ui-accent-soft, #e0f2fe); color: var(--ui-accent, #0369a1); font-size: 0.65rem; font-weight: 600; line-height: 1.4; } .chat-model-picker__rec-tag { display: inline-flex; align-items: center; margin-left: 0.25rem; padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--ui-success-soft, #dcfce7); color: var(--ui-success-text, #166534); font-size: 0.65rem; font-weight: 600; line-height: 1.4; } [data-theme="dark"] .chat-composer__submit, [data-theme="dark"] .ui-theme-switcher__btn--active { color: var(--ui-bg); } [data-theme="dark"] .chat-message--system .chat-message__bubble { border-color: rgba(249, 226, 175, 0.28); } [data-theme="dark"] .chat-richtext code, [data-theme="dark"] .chat-richtext pre, [data-theme="dark"] .chat-richtext table, [data-theme="dark"] .chat-richtext img, [data-theme="dark"] .chat-richtext video { box-shadow: none; } @media (max-width: 1024px) { .chat-empty-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .chat-statusbar, .chat-thread-stage, .chat-composer-shell { padding-left: 0.85rem; padding-right: 0.85rem; } .chat-statusbar__controls, .chat-composer__lead, .chat-composer__toolbar { width: 100%; } .chat-statusbar__controls { justify-content: space-between; } .chat-composer__submit { width: 100%; } .chat-model-picker__trigger, .chat-model-picker__menu { width: 100%; } } /* ── Sidebar ─────────────────────────────────────────────── */ .chat-sidebar { display: flex; flex-direction: column; width: 15rem; flex: none; height: 100%; background: var(--ui-sidebar-bg); border-right: 1px solid var(--ui-sidebar-border); } .chat-sidebar__brand { flex-shrink: 0; padding: 0.85rem 0.75rem 0.75rem; background: var(--ui-sidebar-bg-deep); } .chat-sidebar__brand-row { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.15rem; } .chat-sidebar__logo { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border-radius: 0.45rem; background: var(--ui-accent); color: var(--ui-sidebar-active-text); font-size: 0.7rem; font-weight: 800; } .chat-sidebar__brand-name { font-size: 0.88rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ui-sidebar-text); } .chat-sidebar__new-btn { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; padding: 0.45rem 0.65rem; border-radius: var(--ui-radius-xs); border: 1px solid var(--ui-sidebar-border); background: var(--ui-sidebar-surface); color: var(--ui-sidebar-text); font-size: 0.8rem; font-weight: 600; } .chat-sidebar__new-btn:hover { opacity: 0.9; } .chat-sidebar__new-icon { font-size: 1rem; font-weight: 800; line-height: 1; } .chat-sidebar__list-section { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 0.6rem; background: var(--ui-sidebar-surface); } .chat-sidebar__list-header { display: flex; justify-content: space-between; padding: 0 0.45rem 0.45rem; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-sidebar-text-muted); } .chat-sidebar__empty { margin: 0 0.15rem; padding: 0.6rem 0.55rem; border: 1px dashed var(--ui-sidebar-border); border-radius: var(--ui-radius-xs); color: var(--ui-sidebar-text-muted); } .chat-sidebar__empty-title { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--ui-sidebar-text); } .chat-sidebar__empty-desc { margin: 0.25rem 0 0; font-size: 0.7rem; line-height: 1.5; } .chat-sidebar__list { height: 100%; overflow-y: auto; } .chat-sidebar__row { display: flex; align-items: stretch; gap: 0.35rem; } .chat-sidebar__row + .chat-sidebar__row { margin-top: 0.15rem; } .chat-sidebar__row--active .chat-sidebar__trash-btn { color: var(--ui-sidebar-active-text); border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.08); } .chat-sidebar__item { display: block; flex: 1 1 auto; min-width: 0; padding: 0.45rem 0.5rem; border-radius: var(--ui-radius-xs); color: var(--ui-sidebar-text-muted); } .chat-sidebar__item:hover { background: var(--ui-sidebar-hover); } .chat-sidebar__item--active { background: var(--ui-sidebar-active-bg); color: var(--ui-sidebar-active-text); } .chat-sidebar__trash-form { flex: none; } .chat-sidebar__trash-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 100%; min-height: 3.1rem; border: 1px solid transparent; border-radius: var(--ui-radius-xs); background: transparent; color: var(--ui-sidebar-text-muted); transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease; } .chat-sidebar__trash-btn:hover { color: var(--ui-danger-text); background: rgba(255, 255, 255, 0.52); border-color: var(--ui-sidebar-border); } .chat-sidebar__item-title { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ui-sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-sidebar__item--active .chat-sidebar__item-title { color: var(--ui-sidebar-active-text); } .chat-sidebar__item-preview { margin: 0.1rem 0 0; font-size: 0.7rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-sidebar__foot { flex-shrink: 0; padding: 0.5rem 0.6rem 0.6rem; border-top: 1px solid var(--ui-sidebar-border); } .chat-sidebar__nav { display: flex; flex-direction: column; gap: 0.1rem; } .chat-sidebar__nav-link { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.4rem; border-radius: var(--ui-radius-xs); font-size: 0.76rem; font-weight: 600; color: var(--ui-sidebar-text-muted); } .chat-sidebar__nav-link:hover { background: var(--ui-sidebar-hover); color: var(--ui-sidebar-text); } .chat-sidebar__nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 0.25rem; background: var(--ui-sidebar-surface); color: var(--ui-sidebar-text-muted); font-size: 0.55rem; font-weight: 800; } .chat-sidebar__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--ui-sidebar-border); } .chat-sidebar__account { position: relative; margin-top: 0.4rem; } .chat-sidebar__account-trigger { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.35rem 0.3rem; border-radius: 0.45rem; cursor: pointer; color: var(--ui-sidebar-text); list-style: none; } .chat-sidebar__account-trigger:hover { background: var(--ui-sidebar-hover); } .chat-sidebar__account-avatar { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--ui-accent); color: var(--ui-sidebar-active-text); font-size: 0.55rem; font-weight: 800; } .chat-sidebar__account-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; font-weight: 600; } /* ── Welcome (空状态居中，不做卡片) ────────────────────── */ .chat-welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; text-align: center; padding: 2rem 1rem; } .chat-welcome__title { margin: 0; color: var(--ui-text); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.04em; } .chat-welcome__desc { max-width: 28rem; margin: 0.6rem 0 0; color: var(--ui-text-muted); font-size: 0.92rem; line-height: 1.7; } .chat-welcome__starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem; margin-top: 1.4rem; } .chat-welcome__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin-top: 1rem; } .chat-welcome__link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border: 1px solid var(--ui-border); border-radius: 0.6rem; background: var(--ui-surface-muted); color: var(--ui-text-muted); font-size: 0.82rem; font-weight: 600; } .chat-welcome__link:hover { background: var(--ui-surface); color: var(--ui-text); } /* ── Studio Workbench Theme Harmonization ───────────────── */ /* * Image/video workbenches intentionally reuse the chat shell. Their markup * still carries a number of Tailwind utility classes such as bg-white and * text-slate-* that look too detached in warm/dark themes. We keep the * structure intact and remap those surfaces to theme tokens only inside the * workbench shells. */ [data-testid="studio-image-workspace-shell"], [data-testid="studio-video-workspace-shell"] { --studio-shell-surface: var(--ui-surface); --studio-shell-surface-soft: var(--ui-surface-soft); --studio-shell-surface-muted: var(--ui-surface-muted); --studio-shell-border: var(--ui-border); --studio-shell-border-strong: var(--ui-border-strong); --studio-shell-text: var(--ui-text); --studio-shell-text-muted: var(--ui-text-muted); --studio-shell-text-soft: var(--ui-text-soft); --studio-shell-tint: rgba(99, 102, 241, 0.06); --studio-shell-glass: linear-gradient(180deg, var(--ui-surface-soft), rgba(255, 255, 255, 0.02)); } [data-theme="dark"] [data-testid="studio-image-workspace-shell"], [data-theme="dark"] [data-testid="studio-video-workspace-shell"] { --studio-shell-surface: #302b27; --studio-shell-surface-soft: rgba(48, 43, 39, 0.94); --studio-shell-surface-muted: #262220; --studio-shell-border: #443e3a; --studio-shell-border-strong: #5a5450; --studio-shell-text: #ebe9e8; --studio-shell-text-muted: #b0aaa5; --studio-shell-text-soft: #7a7470; --studio-shell-tint: rgba(195, 149, 92, 0.05); --studio-shell-glass: #302b27; } [data-testid="studio-image-workspace-shell"] .chat-thread-stage, [data-testid="studio-video-workspace-shell"] .chat-thread-stage { background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.04), transparent 34%), linear-gradient(180deg, transparent, transparent), var(--ui-bg); } [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-shell, [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-shell { padding-top: 0.75rem; padding-bottom: 0.15rem; } [data-testid="studio-image-workspace-shell"] .chat-composer-shell, [data-testid="studio-video-workspace-shell"] .chat-composer-shell { background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--ui-bg-soft) 18%, var(--ui-bg-soft) 100%); } [data-testid="studio-image-workspace-shell"] .studio-workbench-composer-shell, [data-testid="studio-video-workspace-shell"] .studio-workbench-composer-shell { margin-top: -0.3rem; padding-top: 0.3rem; border-top-color: color-mix(in srgb, var(--studio-shell-border) 72%, transparent); } [data-testid="studio-image-workspace-shell"] .chat-composer__frame, [data-testid="studio-video-workspace-shell"] .chat-composer__frame { border-color: var(--studio-shell-border); background: var(--studio-shell-glass); box-shadow: var(--ui-shadow-md); backdrop-filter: blur(18px); } [data-testid="studio-image-workspace-shell"] .chat-composer__foot, [data-testid="studio-video-workspace-shell"] .chat-composer__foot { opacity: 1; } [data-testid="studio-image-workspace-shell"] .bg-white, [data-testid="studio-video-workspace-shell"] .bg-white { background: var(--studio-shell-surface) !important; } [data-testid="studio-image-workspace-shell"] .bg-white\/70, [data-testid="studio-image-workspace-shell"] .bg-white\/80, [data-testid="studio-image-workspace-shell"] .bg-white\/88, [data-testid="studio-video-workspace-shell"] .bg-white\/70, [data-testid="studio-video-workspace-shell"] .bg-white\/80, [data-testid="studio-video-workspace-shell"] .bg-white\/88 { background: var(--studio-shell-surface-soft) !important; backdrop-filter: blur(16px); } [data-testid="studio-image-workspace-shell"] .bg-stone-50, [data-testid="studio-image-workspace-shell"] .bg-stone-50\/70, [data-testid="studio-image-workspace-shell"] .bg-slate-50, [data-testid="studio-image-workspace-shell"] .bg-slate-100, [data-testid="studio-video-workspace-shell"] .bg-stone-50, [data-testid="studio-video-workspace-shell"] .bg-stone-50\/70, [data-testid="studio-video-workspace-shell"] .bg-slate-50, [data-testid="studio-video-workspace-shell"] .bg-slate-100 { background: var(--studio-shell-surface-muted) !important; } [data-testid="studio-image-workspace-shell"] .border-slate-200, [data-testid="studio-image-workspace-shell"] .border-slate-200\/80, [data-testid="studio-video-workspace-shell"] .border-slate-200, [data-testid="studio-video-workspace-shell"] .border-slate-200\/80 { border-color: var(--studio-shell-border) !important; } [data-testid="studio-image-workspace-shell"] .text-slate-900, [data-testid="studio-image-workspace-shell"] .text-slate-800, [data-testid="studio-image-workspace-shell"] .text-slate-700, [data-testid="studio-video-workspace-shell"] .text-slate-900, [data-testid="studio-video-workspace-shell"] .text-slate-800, [data-testid="studio-video-workspace-shell"] .text-slate-700 { color: var(--studio-shell-text) !important; } [data-testid="studio-image-workspace-shell"] .text-slate-600, [data-testid="studio-image-workspace-shell"] .text-slate-500, [data-testid="studio-video-workspace-shell"] .text-slate-600, [data-testid="studio-video-workspace-shell"] .text-slate-500 { color: var(--studio-shell-text-muted) !important; } [data-testid="studio-image-workspace-shell"] .text-slate-400, [data-testid="studio-video-workspace-shell"] .text-slate-400 { color: var(--studio-shell-text-soft) !important; } [data-testid="studio-image-workspace-shell"] .hover\:border-slate-300:hover, [data-testid="studio-video-workspace-shell"] .hover\:border-slate-300:hover { border-color: var(--studio-shell-border-strong) !important; } [data-testid="studio-image-workspace-shell"] .hover\:text-slate-700:hover, [data-testid="studio-video-workspace-shell"] .hover\:text-slate-700:hover, [data-testid="studio-image-workspace-shell"] .hover\:text-slate-900:hover, [data-testid="studio-video-workspace-shell"] .hover\:text-slate-900:hover { color: var(--studio-shell-text) !important; } .studio-workbench-stage-card, .studio-workbench-note-card, .studio-workbench-options, .studio-workbench-reference, .studio-workbench-asset-card, .studio-workbench-asset-empty, .studio-workbench-rail-head { border-color: var(--studio-shell-border) !important; box-shadow: var(--ui-shadow-sm); } .studio-workbench-stage-card, .studio-workbench-note-card, .studio-workbench-options, .studio-workbench-asset-card--current, .studio-workbench-asset-empty { background: var(--studio-shell-glass) !important; backdrop-filter: blur(16px); } .studio-workbench-stage-card { box-shadow: var(--ui-shadow-md); } .studio-workbench-stage-empty--compact { min-height: clamp(21rem, 47vh, 31rem); } .studio-workbench-stage-meta, .studio-workbench-asset-body { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 12%), var(--studio-shell-glass); } .studio-workbench-stage-meta { border-top: 1px solid var(--studio-shell-border); } .studio-workbench-asset-body { border-top: 1px solid rgba(255, 255, 255, 0.04); } .studio-workbench-note-card, .studio-workbench-options { position: relative; } .studio-workbench-note-card::before, .studio-workbench-options::before, .studio-workbench-rail-head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, var(--studio-shell-tint), transparent 42%); border-radius: inherit; } .studio-workbench-reference, .studio-workbench-asset-card--history, .studio-workbench-rail, .studio-workbench-tabs { background: var(--studio-shell-surface-muted) !important; } .studio-workbench-reference--empty { background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), var(--studio-shell-surface-muted) !important; } .studio-workbench-chip { background: var(--studio-shell-surface) !important; border-color: var(--studio-shell-border) !important; color: var(--studio-shell-text-muted) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .studio-workbench-chip:hover { background: var(--studio-shell-surface-soft) !important; border-color: var(--studio-shell-border-strong) !important; color: var(--studio-shell-text) !important; } .studio-workbench-toggle { background: var(--studio-shell-surface) !important; border-color: var(--studio-shell-border) !important; color: var(--studio-shell-text-muted) !important; } .peer:checked + .studio-workbench-toggle { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: #fff !important; box-shadow: var(--ui-shadow-sm); } .studio-workbench-rail { border-color: var(--studio-shell-border) !important; background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--studio-shell-tint) 120%), var(--studio-shell-surface-muted) !important; } .studio-workbench-rail-shell { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.04); } .studio-workbench-rail-head { background: linear-gradient(180deg, var(--studio-shell-surface-soft), rgba(255, 255, 255, 0.02)), var(--studio-shell-surface-muted) !important; } .studio-workbench-tabs { padding: 0.25rem; } .studio-workbench-tab { flex: 1 1 0%; border: 1px solid transparent; border-radius: 0.75rem; padding: 0.55rem 0.75rem; color: var(--studio-shell-text-soft); background: transparent; font-size: 0.75rem; font-weight: 700; transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease; } .studio-workbench-tab:hover { color: var(--studio-shell-text); } .studio-workbench-tab--active { color: var(--studio-shell-text); background: var(--studio-shell-surface); border-color: var(--studio-shell-border); box-shadow: var(--ui-shadow-sm); } .studio-workbench-rail .ui-button--secondary { background: var(--studio-shell-surface) !important; border-color: var(--studio-shell-border) !important; color: var(--studio-shell-text) !important; } .studio-workbench-rail .ui-button--secondary:hover { background: var(--studio-shell-surface-soft) !important; border-color: var(--studio-shell-border-strong) !important; } .studio-workbench-rail .ui-button--soft { background: var(--studio-shell-tint) !important; border-color: var(--studio-shell-border) !important; color: var(--studio-shell-text) !important; } .studio-workbench-rail .ui-button--soft:hover { background: var(--studio-shell-surface) !important; } .studio-workbench-rail .ui-button--ghost { border-color: var(--studio-shell-border) !important; background: transparent !important; color: var(--studio-shell-text-muted) !important; } .studio-workbench-rail .ui-button--ghost:hover { background: var(--studio-shell-surface) !important; color: var(--studio-shell-text) !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-thread-stage, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-thread-stage { background: #141210; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-composer-shell, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-composer-shell { background: linear-gradient(180deg, transparent, #141210 20%); } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-shell, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-shell { padding-bottom: 0; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-composer-shell, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-composer-shell { margin-top: -0.45rem; padding-top: 0.2rem; background: linear-gradient(180deg, transparent, #141210 20%); border-top-color: #443e3a; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-composer__frame, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-composer__frame { background: #302b27; border-color: #443e3a; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-card, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-note-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-note-card, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-options, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-options, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-reference, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-reference, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-card, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-empty, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-rail-head, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-rail-head, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tabs, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tabs { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-empty { background: #302b27 !important; border-color: #443e3a !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-stage-meta, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-stage-meta, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-body, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-body { background: #262220; border-top-color: #443e3a; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-note-card, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-note-card { background: #302b27 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-options, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-options { background: #262220 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-reference, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-reference, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-card--history, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-card--history { background: #262220 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-reference--empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-reference--empty, [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-asset-empty, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-asset-empty { background: #302b27 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-rail, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-rail { background: #1c1917 !important; border-color: #302b27 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-rail-head, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-rail-head { background: #262220 !important; border-bottom-color: #443e3a !important; backdrop-filter: none; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tabs, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tabs { background: #1a1816 !important; border-color: #443e3a !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tab, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tab { color: #78716c; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-tab--active, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-tab--active { background: #302b27; border-color: #443e3a; color: #e7e5e4; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-chip, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-chip { background: #302b27 !important; border-color: #443e3a !important; color: #a8a29e !important; box-shadow: none; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .studio-workbench-toggle, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .studio-workbench-toggle { background: #262220 !important; border-color: #443e3a !important; color: #a8a29e !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .peer:checked + .studio-workbench-toggle, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .peer:checked + .studio-workbench-toggle { background: #443e3a !important; border-color: #5a5450 !important; color: #fafaf9 !important; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-welcome__title, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-welcome__title { color: #e7e5e4; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .chat-welcome__desc, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .chat-welcome__desc { color: #a8a29e; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--secondary, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--secondary { background: #302b27; border-color: #443e3a; color: #e7e5e4; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--secondary:hover, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--secondary:hover { background: #443e3a; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--soft, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--soft { background: #443e3a; border-color: #5a5450; color: #d6d3d1; } [data-theme="dark"] [data-testid="studio-image-workspace-shell"] .ui-button--ghost, [data-theme="dark"] [data-testid="studio-video-workspace-shell"] .ui-button--ghost { color: #a8a29e; border-color: #443e3a; } /* ── AFF admin console surfaces ───────────────────────────── */ .aff-admin { color: var(--ui-text); } .aff-admin-panel, .aff-admin-stat { background: var(--ui-surface); border-color: var(--ui-border); color: var(--ui-text); } .aff-admin-inset { background: var(--ui-surface-muted); border-color: var(--ui-border); color: var(--ui-text); } .aff-admin .ui-table-wrap, .aff-admin .ui-table-wrap--scroll { background: var(--ui-surface); border-color: var(--ui-border); } .aff-admin th { background: var(--ui-surface-muted); color: var(--ui-text-muted); } .aff-admin td { color: var(--ui-text); } .aff-admin td, .aff-admin th { border-color: var(--ui-border); } .aff-admin pre { background: var(--ui-surface-muted); border-color: var(--ui-border); color: var(--ui-text); } [data-theme="dark"] .aff-admin-panel, [data-theme="dark"] .aff-admin-stat, [data-theme="dark"] .aff-admin .ui-table-wrap, [data-theme="dark"] .aff-admin .ui-table-wrap--scroll { background: var(--ui-surface); border-color: var(--ui-border); } [data-theme="dark"] .aff-admin-inset, [data-theme="dark"] .aff-admin th { background: var(--ui-surface-muted); border-color: var(--ui-border); } /* UAT hotfix: light dashboard welcome/KPI contrast only. */ [data-theme="light"] .console-dashboard .console-dashboard-hero { background: transparent !important; box-shadow: none; } [data-theme="light"] .console-dashboard .console-dashboard-overview { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08) !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__org { background: #EEF2F6 !important; box-shadow: inset 0 0 0 1px #DCE3EB !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__org-name { color: #4B5565 !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__title { color: #111827 !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__description { color: #4B5565 !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__admin { background: #F7F9FC !important; border-color: #E2E8F0 !important; color: #334155 !important; } [data-theme="light"] .console-dashboard .console-dashboard-overview__admin:hover { background: #EEF2F6 !important; color: #13233E !important; } [data-theme="light"] .console-dashboard .console-dashboard-stat { background: #F7F9FC !important; box-shadow: inset 0 0 0 1px #DFE5EC !important; } [data-theme="light"] .console-dashboard .console-dashboard-stat__label { color: #4B5565 !important; } [data-theme="light"] .console-dashboard .console-dashboard-stat__value { color: #111827 !important; }