|
|
@@ -1,31 +1,58 @@
|
|
|
:root {
|
|
|
color-scheme: light;
|
|
|
- font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
|
|
|
- --bg: #f4f7f9;
|
|
|
- --sidebar: #202731;
|
|
|
- --sidebar-soft: #2c3644;
|
|
|
- --line: #dce4ea;
|
|
|
- --text: #10202b;
|
|
|
- --muted: #657385;
|
|
|
- --brand: #19735e;
|
|
|
- --brand-strong: #0d5f4e;
|
|
|
- --assistant: #f0f3f6;
|
|
|
- --user: #e4f5ee;
|
|
|
- --danger: #b42318;
|
|
|
- --shadow: 0 16px 40px rgba(20, 37, 49, 0.08);
|
|
|
+ font-family: "Arial Narrow", "Bahnschrift", "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
|
|
|
+ --bg: #f7fbff;
|
|
|
+ --ink: #0a1230;
|
|
|
+ --muted: #526076;
|
|
|
+ --chrome: linear-gradient(135deg, #ffffff 0%, #dfe9ff 30%, #8df7ff 52%, #ff9bf2 72%, #ffffff 100%);
|
|
|
+ --glass: rgba(255, 255, 255, 0.68);
|
|
|
+ --glass-strong: rgba(255, 255, 255, 0.86);
|
|
|
+ --line: rgba(75, 106, 171, 0.22);
|
|
|
+ --cyan: #00d9ff;
|
|
|
+ --mint: #22ffc8;
|
|
|
+ --pink: #ff4fd8;
|
|
|
+ --purple: #7d5cff;
|
|
|
+ --blue: #236dff;
|
|
|
+ --warning: #ffb02e;
|
|
|
+ --danger: #d70065;
|
|
|
+ --shadow: 0 22px 60px rgba(38, 70, 137, 0.18);
|
|
|
+ --glow-cyan: 0 0 0 1px rgba(0, 217, 255, 0.55), 0 0 24px rgba(0, 217, 255, 0.28);
|
|
|
+ --glow-pink: 0 0 0 1px rgba(255, 79, 216, 0.55), 0 0 24px rgba(255, 79, 216, 0.26);
|
|
|
}
|
|
|
|
|
|
* {
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
+html {
|
|
|
+ min-height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
body {
|
|
|
margin: 0;
|
|
|
min-height: 100vh;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 236px minmax(0, 1fr);
|
|
|
- background: var(--bg);
|
|
|
- color: var(--text);
|
|
|
+ color: var(--ink);
|
|
|
+ background:
|
|
|
+ linear-gradient(rgba(35, 109, 255, 0.08) 1px, transparent 1px),
|
|
|
+ linear-gradient(90deg, rgba(255, 79, 216, 0.08) 1px, transparent 1px),
|
|
|
+ radial-gradient(circle at 20% 14%, rgba(0, 217, 255, 0.22), transparent 28%),
|
|
|
+ radial-gradient(circle at 78% 18%, rgba(255, 79, 216, 0.18), transparent 30%),
|
|
|
+ linear-gradient(135deg, #fdf8ff 0%, #edf8ff 45%, #fff7fd 100%);
|
|
|
+ background-size: 36px 36px, 36px 36px, 100% 100%, 100% 100%, 100% 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+body::before {
|
|
|
+ content: "";
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ background-image:
|
|
|
+ radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.4px),
|
|
|
+ linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.38) 42%, transparent 58%);
|
|
|
+ background-size: 92px 92px, 240px 240px;
|
|
|
+ opacity: 0.42;
|
|
|
+ mix-blend-mode: screen;
|
|
|
}
|
|
|
|
|
|
button,
|
|
|
@@ -33,177 +60,456 @@ textarea {
|
|
|
font: inherit;
|
|
|
}
|
|
|
|
|
|
-.sidebar {
|
|
|
- min-height: 100vh;
|
|
|
- padding: 28px 16px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 24px;
|
|
|
- background: var(--sidebar);
|
|
|
- color: #fff;
|
|
|
+button {
|
|
|
+ transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
|
|
|
+}
|
|
|
+
|
|
|
+button:hover,
|
|
|
+button:focus-visible {
|
|
|
+ box-shadow: var(--glow-pink);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
+.scanline {
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 50;
|
|
|
+ background: repeating-linear-gradient(
|
|
|
+ to bottom,
|
|
|
+ rgba(255, 255, 255, 0.08) 0,
|
|
|
+ rgba(255, 255, 255, 0.08) 1px,
|
|
|
+ transparent 1px,
|
|
|
+ transparent 5px
|
|
|
+ );
|
|
|
+ opacity: 0.35;
|
|
|
+}
|
|
|
+
|
|
|
+.top-nav {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 20;
|
|
|
+ min-height: 72px;
|
|
|
+ padding: 12px 24px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: minmax(220px, auto) 1fr minmax(190px, auto);
|
|
|
+ align-items: center;
|
|
|
+ gap: 18px;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.72);
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(241, 248, 255, 0.62)),
|
|
|
+ var(--chrome);
|
|
|
+ backdrop-filter: blur(18px) saturate(1.4);
|
|
|
+ box-shadow: 0 10px 28px rgba(33, 53, 120, 0.13);
|
|
|
}
|
|
|
|
|
|
.brand {
|
|
|
display: flex;
|
|
|
gap: 12px;
|
|
|
align-items: center;
|
|
|
- padding: 0 8px;
|
|
|
+ min-width: 0;
|
|
|
}
|
|
|
|
|
|
.brand img {
|
|
|
- width: 42px;
|
|
|
- height: 42px;
|
|
|
- border-radius: 50%;
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 15px;
|
|
|
object-fit: cover;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.86);
|
|
|
+ box-shadow: var(--glow-cyan);
|
|
|
}
|
|
|
|
|
|
.brand strong {
|
|
|
display: block;
|
|
|
font-size: 18px;
|
|
|
line-height: 1.2;
|
|
|
+ font-weight: 900;
|
|
|
}
|
|
|
|
|
|
.brand span,
|
|
|
.session-card span {
|
|
|
display: block;
|
|
|
- color: #c4ccd8;
|
|
|
- font-size: 12px;
|
|
|
margin-top: 3px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 800;
|
|
|
+ letter-spacing: 0.08em;
|
|
|
}
|
|
|
|
|
|
.nav {
|
|
|
- display: grid;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
|
|
|
.nav-item {
|
|
|
- border: 0;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 12px 14px;
|
|
|
- color: #e9eef5;
|
|
|
- background: transparent;
|
|
|
- text-align: left;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.78);
|
|
|
+ border-radius: 999px;
|
|
|
+ padding: 9px 18px;
|
|
|
+ color: #121a42;
|
|
|
+ background: rgba(255, 255, 255, 0.48);
|
|
|
+ text-align: center;
|
|
|
cursor: pointer;
|
|
|
+ font-weight: 900;
|
|
|
}
|
|
|
|
|
|
.nav-item.active,
|
|
|
.nav-item:hover {
|
|
|
- background: var(--sidebar-soft);
|
|
|
+ border-color: rgba(0, 217, 255, 0.72);
|
|
|
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(146, 247, 255, 0.5));
|
|
|
}
|
|
|
|
|
|
.session-card {
|
|
|
- margin-top: auto;
|
|
|
- padding: 12px;
|
|
|
- border: 1px solid rgba(255, 255, 255, 0.12);
|
|
|
- border-radius: 8px;
|
|
|
+ justify-self: end;
|
|
|
+ min-width: 190px;
|
|
|
+ padding: 9px 12px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.82);
|
|
|
+ border-radius: 18px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
+ background: rgba(255, 255, 255, 0.52);
|
|
|
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 24px rgba(55, 88, 167, 0.12);
|
|
|
}
|
|
|
|
|
|
.status-dot {
|
|
|
- width: 10px;
|
|
|
- height: 10px;
|
|
|
+ width: 11px;
|
|
|
+ height: 11px;
|
|
|
border-radius: 999px;
|
|
|
- background: #f59e0b;
|
|
|
- box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.16);
|
|
|
+ background: var(--warning);
|
|
|
+ box-shadow: 0 0 0 5px rgba(255, 176, 46, 0.18), 0 0 18px rgba(255, 176, 46, 0.8);
|
|
|
flex: 0 0 auto;
|
|
|
}
|
|
|
|
|
|
.status-dot.ok {
|
|
|
- background: #12b981;
|
|
|
- box-shadow: 0 0 0 6px rgba(18, 185, 129, 0.16);
|
|
|
+ background: var(--mint);
|
|
|
+ box-shadow: 0 0 0 5px rgba(34, 255, 200, 0.18), 0 0 18px rgba(34, 255, 200, 0.85);
|
|
|
}
|
|
|
|
|
|
.status-dot.error {
|
|
|
- background: #ef4444;
|
|
|
- box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.16);
|
|
|
+ background: var(--danger);
|
|
|
+ box-shadow: 0 0 0 5px rgba(215, 0, 101, 0.16), 0 0 18px rgba(215, 0, 101, 0.72);
|
|
|
}
|
|
|
|
|
|
.shell {
|
|
|
- min-width: 0;
|
|
|
- padding: 28px 24px 24px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ width: min(1500px, calc(100% - 40px));
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 22px 0 28px;
|
|
|
}
|
|
|
|
|
|
-.topbar {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
- gap: 16px;
|
|
|
- margin-bottom: 18px;
|
|
|
+.hero {
|
|
|
+ min-height: 245px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: minmax(0, 1fr) 320px;
|
|
|
+ gap: 18px;
|
|
|
+ align-items: stretch;
|
|
|
+ margin-bottom: 16px;
|
|
|
}
|
|
|
|
|
|
-.topbar h1 {
|
|
|
- margin: 0;
|
|
|
- font-size: 28px;
|
|
|
+.hero-copy,
|
|
|
+.hero-panel,
|
|
|
+.feature-card,
|
|
|
+.chat-card,
|
|
|
+.panel {
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.78);
|
|
|
+ background: var(--glass);
|
|
|
+ backdrop-filter: blur(18px) saturate(1.32);
|
|
|
+ box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.75);
|
|
|
+}
|
|
|
+
|
|
|
+.hero-copy {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 32px;
|
|
|
+ padding: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-copy::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: auto 26px 22px auto;
|
|
|
+ width: 180px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: linear-gradient(90deg, var(--cyan), var(--pink));
|
|
|
+ filter: blur(18px);
|
|
|
+ opacity: 0.58;
|
|
|
+}
|
|
|
+
|
|
|
+.eyebrow {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 7px 12px;
|
|
|
+ border-radius: 999px;
|
|
|
+ border: 1px solid rgba(0, 217, 255, 0.46);
|
|
|
+ background: rgba(255, 255, 255, 0.58);
|
|
|
+ color: #1143a3;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 900;
|
|
|
+ letter-spacing: 0.12em;
|
|
|
+}
|
|
|
+
|
|
|
+.hero h1 {
|
|
|
+ margin: 16px 0 8px;
|
|
|
+ max-width: 900px;
|
|
|
+ font-size: 44px;
|
|
|
+ line-height: 1.08;
|
|
|
+ font-weight: 950;
|
|
|
letter-spacing: 0;
|
|
|
+ color: #07143b;
|
|
|
+ text-shadow: 0 1px 0 #fff, 0 0 24px rgba(0, 217, 255, 0.42);
|
|
|
}
|
|
|
|
|
|
-.topbar p {
|
|
|
- margin: 4px 0 0;
|
|
|
- color: var(--muted);
|
|
|
+.hero p {
|
|
|
+ margin: 0;
|
|
|
+ max-width: 760px;
|
|
|
+ color: #26344e;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 1.8;
|
|
|
}
|
|
|
|
|
|
-.icon-button {
|
|
|
- border: 1px solid var(--line);
|
|
|
- background: #fff;
|
|
|
- color: var(--text);
|
|
|
- border-radius: 8px;
|
|
|
- height: 36px;
|
|
|
- padding: 0 14px;
|
|
|
+.hero-actions {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.chrome-button,
|
|
|
+.system-pill {
|
|
|
+ border-radius: 999px;
|
|
|
+ font-weight: 900;
|
|
|
+}
|
|
|
+
|
|
|
+.chrome-button {
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.92);
|
|
|
+ min-height: 42px;
|
|
|
+ padding: 0 22px;
|
|
|
+ color: #07143b;
|
|
|
+ background: var(--chrome);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
+.system-pill {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 42px;
|
|
|
+ padding: 0 16px;
|
|
|
+ border: 1px solid rgba(125, 92, 255, 0.36);
|
|
|
+ background: rgba(255, 255, 255, 0.62);
|
|
|
+ color: #5320bd;
|
|
|
+ font-size: 12px;
|
|
|
+ letter-spacing: 0.1em;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-panel {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 32px;
|
|
|
+ padding: 24px;
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ background:
|
|
|
+ linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(190, 247, 255, 0.38)),
|
|
|
+ var(--chrome);
|
|
|
+}
|
|
|
+
|
|
|
+.orbital-ring {
|
|
|
+ position: absolute;
|
|
|
+ width: 210px;
|
|
|
+ height: 210px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid rgba(255, 255, 255, 0.72);
|
|
|
+ box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.86), 0 0 28px rgba(0, 217, 255, 0.42);
|
|
|
+}
|
|
|
+
|
|
|
+.orbital-ring::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 26px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px dashed rgba(83, 32, 189, 0.42);
|
|
|
+}
|
|
|
+
|
|
|
+.hero-logo {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ width: 116px;
|
|
|
+ height: 116px;
|
|
|
+ border-radius: 36px;
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ background: rgba(255, 255, 255, 0.55);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.86);
|
|
|
+ box-shadow: var(--glow-cyan), inset 0 1px 0 #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.hero-logo img {
|
|
|
+ width: 86px;
|
|
|
+ height: 86px;
|
|
|
+ border-radius: 50%;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.mini-display {
|
|
|
+ position: absolute;
|
|
|
+ left: 18px;
|
|
|
+ right: 18px;
|
|
|
+ bottom: 18px;
|
|
|
+ padding: 12px 14px;
|
|
|
+ border-radius: 18px;
|
|
|
+ background: rgba(8, 18, 48, 0.74);
|
|
|
+ color: #e8fbff;
|
|
|
+ box-shadow: inset 0 0 0 1px rgba(141, 247, 255, 0.32);
|
|
|
+}
|
|
|
+
|
|
|
+.mini-display span,
|
|
|
+.mini-display strong {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.mini-display span {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #8df7ff;
|
|
|
+ letter-spacing: 0.14em;
|
|
|
+ font-weight: 900;
|
|
|
+}
|
|
|
+
|
|
|
+.mini-display strong {
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.feature-strip {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: 14px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.feature-card {
|
|
|
+ border-radius: 24px;
|
|
|
+ padding: 16px;
|
|
|
+ min-height: 118px;
|
|
|
+}
|
|
|
+
|
|
|
+.feature-card span {
|
|
|
+ display: inline-flex;
|
|
|
+ width: 36px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 999px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background: #081230;
|
|
|
+ color: var(--mint);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 900;
|
|
|
+ box-shadow: 0 0 18px rgba(34, 255, 200, 0.36);
|
|
|
+}
|
|
|
+
|
|
|
+.feature-card strong {
|
|
|
+ display: block;
|
|
|
+ margin-top: 12px;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.feature-card p {
|
|
|
+ margin: 6px 0 0;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 1.55;
|
|
|
+}
|
|
|
+
|
|
|
.workspace {
|
|
|
display: grid;
|
|
|
- grid-template-columns: minmax(580px, 1fr) 360px;
|
|
|
+ grid-template-columns: minmax(600px, 1fr) 380px;
|
|
|
gap: 16px;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
|
|
|
.chat-card,
|
|
|
.panel {
|
|
|
- background: #fff;
|
|
|
- border: 1px solid var(--line);
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: var(--shadow);
|
|
|
+ border-radius: 24px;
|
|
|
}
|
|
|
|
|
|
.chat-card {
|
|
|
- min-height: calc(100vh - 118px);
|
|
|
+ min-height: calc(100vh - 444px);
|
|
|
display: grid;
|
|
|
- grid-template-rows: minmax(0, 1fr) auto;
|
|
|
+ grid-template-rows: auto minmax(360px, 1fr) auto;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
+.window-bar {
|
|
|
+ height: 44px;
|
|
|
+ padding: 0 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.74);
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(187, 229, 255, 0.56));
|
|
|
+}
|
|
|
+
|
|
|
+.window-bar span {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: var(--pink);
|
|
|
+ box-shadow: 0 0 12px rgba(255, 79, 216, 0.75);
|
|
|
+}
|
|
|
+
|
|
|
+.window-bar span:nth-child(2) {
|
|
|
+ background: var(--warning);
|
|
|
+ box-shadow: 0 0 12px rgba(255, 176, 46, 0.72);
|
|
|
+}
|
|
|
+
|
|
|
+.window-bar span:nth-child(3) {
|
|
|
+ background: var(--mint);
|
|
|
+ box-shadow: 0 0 12px rgba(34, 255, 200, 0.72);
|
|
|
+}
|
|
|
+
|
|
|
+.window-bar strong {
|
|
|
+ margin-left: 8px;
|
|
|
+ color: #26344e;
|
|
|
+ font-size: 12px;
|
|
|
+ letter-spacing: 0.14em;
|
|
|
+}
|
|
|
+
|
|
|
.messages {
|
|
|
- padding: 18px;
|
|
|
+ padding: 20px;
|
|
|
overflow: auto;
|
|
|
scroll-behavior: smooth;
|
|
|
}
|
|
|
|
|
|
.message-row {
|
|
|
display: grid;
|
|
|
- grid-template-columns: 34px minmax(0, 1fr);
|
|
|
- gap: 10px;
|
|
|
- margin-bottom: 16px;
|
|
|
+ grid-template-columns: 38px minmax(0, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 18px;
|
|
|
}
|
|
|
|
|
|
.message-row.user {
|
|
|
- grid-template-columns: minmax(0, 1fr) 34px;
|
|
|
+ grid-template-columns: minmax(0, 1fr) 38px;
|
|
|
}
|
|
|
|
|
|
.avatar {
|
|
|
- width: 34px;
|
|
|
- height: 34px;
|
|
|
- border-radius: 50%;
|
|
|
- background: #d9f0e9;
|
|
|
- color: var(--brand-strong);
|
|
|
+ width: 38px;
|
|
|
+ height: 38px;
|
|
|
+ border-radius: 15px;
|
|
|
+ background: linear-gradient(135deg, #ffffff, #aaf7ff 55%, #ffb5ef);
|
|
|
+ color: #07143b;
|
|
|
display: grid;
|
|
|
place-items: center;
|
|
|
font-size: 14px;
|
|
|
- font-weight: 700;
|
|
|
+ font-weight: 900;
|
|
|
overflow: hidden;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.82);
|
|
|
+ box-shadow: var(--glow-cyan);
|
|
|
}
|
|
|
|
|
|
.avatar img {
|
|
|
@@ -213,17 +519,21 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.bubble {
|
|
|
- width: min(100%, 760px);
|
|
|
- border-radius: 8px;
|
|
|
- padding: 14px 16px;
|
|
|
- background: var(--assistant);
|
|
|
- line-height: 1.7;
|
|
|
+ width: min(100%, 820px);
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 15px 17px;
|
|
|
+ background: rgba(255, 255, 255, 0.76);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.72);
|
|
|
+ line-height: 1.75;
|
|
|
white-space: pre-wrap;
|
|
|
+ color: #101936;
|
|
|
+ box-shadow: 0 12px 28px rgba(50, 72, 140, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
|
}
|
|
|
|
|
|
.message-row.user .bubble {
|
|
|
justify-self: end;
|
|
|
- background: var(--user);
|
|
|
+ background: linear-gradient(135deg, rgba(217, 255, 247, 0.86), rgba(255, 222, 249, 0.8));
|
|
|
+ box-shadow: var(--glow-pink);
|
|
|
}
|
|
|
|
|
|
.message-row.user .avatar {
|
|
|
@@ -239,45 +549,51 @@ textarea {
|
|
|
.typing {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
- gap: 5px;
|
|
|
+ gap: 6px;
|
|
|
white-space: nowrap;
|
|
|
+ font-weight: 900;
|
|
|
+ color: #5320bd;
|
|
|
}
|
|
|
|
|
|
.typing i {
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
+ width: 7px;
|
|
|
+ height: 7px;
|
|
|
border-radius: 50%;
|
|
|
- background: #7aa89e;
|
|
|
+ background: var(--pink);
|
|
|
animation: pulse 1s infinite ease-in-out;
|
|
|
+ box-shadow: 0 0 10px rgba(255, 79, 216, 0.8);
|
|
|
}
|
|
|
|
|
|
.typing i:nth-child(2) {
|
|
|
animation-delay: 0.15s;
|
|
|
+ background: var(--cyan);
|
|
|
}
|
|
|
|
|
|
.typing i:nth-child(3) {
|
|
|
animation-delay: 0.3s;
|
|
|
+ background: var(--mint);
|
|
|
}
|
|
|
|
|
|
@keyframes pulse {
|
|
|
0%,
|
|
|
80%,
|
|
|
100% {
|
|
|
- opacity: 0.3;
|
|
|
+ opacity: 0.35;
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
40% {
|
|
|
opacity: 1;
|
|
|
- transform: translateY(-2px);
|
|
|
+ transform: translateY(-3px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.table-card {
|
|
|
margin-top: 14px;
|
|
|
- border: 1px solid var(--line);
|
|
|
- border-radius: 8px;
|
|
|
- background: #fff;
|
|
|
+ border: 1px solid rgba(141, 247, 255, 0.52);
|
|
|
+ border-radius: 18px;
|
|
|
+ background: rgba(255, 255, 255, 0.9);
|
|
|
overflow: hidden;
|
|
|
+ box-shadow: 0 0 28px rgba(0, 217, 255, 0.16);
|
|
|
}
|
|
|
|
|
|
.table-head {
|
|
|
@@ -285,9 +601,9 @@ textarea {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
- padding: 10px 12px;
|
|
|
- background: #f8fafb;
|
|
|
- border-bottom: 1px solid var(--line);
|
|
|
+ padding: 11px 13px;
|
|
|
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(205, 247, 255, 0.62));
|
|
|
+ border-bottom: 1px solid rgba(75, 106, 171, 0.2);
|
|
|
}
|
|
|
|
|
|
.table-head strong {
|
|
|
@@ -295,30 +611,31 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.table-head button {
|
|
|
- border: 1px solid var(--line);
|
|
|
- background: #fff;
|
|
|
- color: var(--brand-strong);
|
|
|
- border-radius: 8px;
|
|
|
- padding: 6px 10px;
|
|
|
+ border: 1px solid rgba(255, 79, 216, 0.42);
|
|
|
+ background: rgba(255, 255, 255, 0.84);
|
|
|
+ color: #9b147c;
|
|
|
+ border-radius: 999px;
|
|
|
+ padding: 6px 11px;
|
|
|
cursor: pointer;
|
|
|
white-space: nowrap;
|
|
|
+ font-weight: 900;
|
|
|
}
|
|
|
|
|
|
.table-wrap {
|
|
|
overflow: auto;
|
|
|
- max-height: 420px;
|
|
|
+ max-height: 430px;
|
|
|
}
|
|
|
|
|
|
table {
|
|
|
width: 100%;
|
|
|
- min-width: 640px;
|
|
|
+ min-width: 700px;
|
|
|
border-collapse: collapse;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
|
|
|
th,
|
|
|
td {
|
|
|
- border-bottom: 1px solid var(--line);
|
|
|
+ border-bottom: 1px solid rgba(75, 106, 171, 0.16);
|
|
|
padding: 10px 12px;
|
|
|
text-align: left;
|
|
|
vertical-align: top;
|
|
|
@@ -329,32 +646,42 @@ th {
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
z-index: 1;
|
|
|
- background: #f8fafb;
|
|
|
- color: #2e3a46;
|
|
|
- font-weight: 700;
|
|
|
+ background: #f7fbff;
|
|
|
+ color: #141e43;
|
|
|
+ font-weight: 900;
|
|
|
+}
|
|
|
+
|
|
|
+tbody tr:nth-child(even) {
|
|
|
+ background: rgba(235, 250, 255, 0.58);
|
|
|
}
|
|
|
|
|
|
.composer {
|
|
|
- margin: 0 18px 18px;
|
|
|
- border: 1px solid var(--line);
|
|
|
- border-radius: 8px;
|
|
|
- padding: 10px;
|
|
|
- background: #fff;
|
|
|
+ margin: 0 20px 20px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.78);
|
|
|
+ border-radius: 22px;
|
|
|
+ padding: 11px;
|
|
|
+ background: rgba(255, 255, 255, 0.72);
|
|
|
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
|
|
|
}
|
|
|
|
|
|
.composer:focus-within {
|
|
|
- border-color: var(--brand);
|
|
|
- box-shadow: 0 0 0 3px rgba(25, 115, 94, 0.12);
|
|
|
+ border-color: rgba(0, 217, 255, 0.8);
|
|
|
+ box-shadow: var(--glow-cyan), inset 0 1px 0 rgba(255, 255, 255, 0.86);
|
|
|
}
|
|
|
|
|
|
.composer textarea {
|
|
|
width: 100%;
|
|
|
- min-height: 68px;
|
|
|
- max-height: 180px;
|
|
|
+ min-height: 76px;
|
|
|
+ max-height: 190px;
|
|
|
border: 0;
|
|
|
outline: 0;
|
|
|
resize: vertical;
|
|
|
- color: var(--text);
|
|
|
+ color: var(--ink);
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+.composer textarea::placeholder {
|
|
|
+ color: #69768b;
|
|
|
}
|
|
|
|
|
|
.composer-footer {
|
|
|
@@ -366,18 +693,20 @@ th {
|
|
|
}
|
|
|
|
|
|
.send-button {
|
|
|
- border: 0;
|
|
|
- border-radius: 8px;
|
|
|
- min-width: 92px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.84);
|
|
|
+ border-radius: 16px;
|
|
|
+ min-width: 98px;
|
|
|
height: 42px;
|
|
|
padding: 0 16px;
|
|
|
- background: var(--brand);
|
|
|
+ background: linear-gradient(135deg, #081230, #5a2bff 48%, #ff4fd8);
|
|
|
color: #fff;
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
gap: 8px;
|
|
|
cursor: pointer;
|
|
|
+ font-weight: 900;
|
|
|
+ box-shadow: 0 12px 26px rgba(125, 92, 255, 0.28);
|
|
|
}
|
|
|
|
|
|
.send-button:disabled {
|
|
|
@@ -394,13 +723,12 @@ th {
|
|
|
display: grid;
|
|
|
align-content: start;
|
|
|
gap: 14px;
|
|
|
- max-height: calc(100vh - 118px);
|
|
|
+ max-height: calc(100vh - 210px);
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
.panel {
|
|
|
padding: 16px;
|
|
|
- box-shadow: none;
|
|
|
}
|
|
|
|
|
|
.panel-title {
|
|
|
@@ -414,6 +742,34 @@ th {
|
|
|
.panel h2 {
|
|
|
margin: 0;
|
|
|
font-size: 18px;
|
|
|
+ font-weight: 950;
|
|
|
+}
|
|
|
+
|
|
|
+.player-screen {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ border-radius: 18px;
|
|
|
+ padding: 14px;
|
|
|
+ background: linear-gradient(180deg, #07143b, #151246);
|
|
|
+ color: #e8fbff;
|
|
|
+ border: 1px solid rgba(141, 247, 255, 0.44);
|
|
|
+ box-shadow: inset 0 0 24px rgba(0, 217, 255, 0.15), 0 0 24px rgba(125, 92, 255, 0.18);
|
|
|
+}
|
|
|
+
|
|
|
+.player-screen span,
|
|
|
+.player-screen strong {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.player-screen span {
|
|
|
+ color: var(--mint);
|
|
|
+ font-size: 11px;
|
|
|
+ letter-spacing: 0.14em;
|
|
|
+ font-weight: 900;
|
|
|
+}
|
|
|
+
|
|
|
+.player-screen strong {
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
|
|
|
.kv {
|
|
|
@@ -430,26 +786,28 @@ th {
|
|
|
|
|
|
.kv dt {
|
|
|
color: var(--muted);
|
|
|
+ font-weight: 800;
|
|
|
}
|
|
|
|
|
|
.kv dd {
|
|
|
margin: 0;
|
|
|
- font-weight: 700;
|
|
|
+ font-weight: 950;
|
|
|
word-break: break-all;
|
|
|
}
|
|
|
|
|
|
.tool-list,
|
|
|
.trace-list {
|
|
|
display: grid;
|
|
|
- gap: 8px;
|
|
|
+ gap: 9px;
|
|
|
}
|
|
|
|
|
|
.tool-item,
|
|
|
.trace-item {
|
|
|
- border: 1px solid var(--line);
|
|
|
- border-radius: 8px;
|
|
|
- padding: 10px;
|
|
|
- background: #fff;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.76);
|
|
|
+ border-radius: 18px;
|
|
|
+ padding: 11px;
|
|
|
+ background: rgba(255, 255, 255, 0.7);
|
|
|
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76);
|
|
|
}
|
|
|
|
|
|
.tool-item strong,
|
|
|
@@ -465,38 +823,84 @@ th {
|
|
|
font-size: 12px;
|
|
|
margin-top: 4px;
|
|
|
word-break: break-word;
|
|
|
+ line-height: 1.5;
|
|
|
}
|
|
|
|
|
|
.phase-error strong {
|
|
|
color: var(--danger);
|
|
|
}
|
|
|
|
|
|
-@media (max-width: 1120px) {
|
|
|
- body {
|
|
|
+@media (max-width: 1180px) {
|
|
|
+ .top-nav {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
- .sidebar {
|
|
|
- min-height: auto;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
+ .session-card {
|
|
|
+ justify-self: stretch;
|
|
|
}
|
|
|
|
|
|
.nav {
|
|
|
- grid-auto-flow: column;
|
|
|
- margin-left: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .session-card {
|
|
|
- margin-top: 0;
|
|
|
- min-width: 190px;
|
|
|
+ justify-content: flex-start;
|
|
|
+ overflow-x: auto;
|
|
|
}
|
|
|
|
|
|
+ .hero,
|
|
|
.workspace {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
+ .hero-panel {
|
|
|
+ min-height: 260px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-strip {
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ }
|
|
|
+
|
|
|
.inspector {
|
|
|
max-height: none;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+@media (max-width: 720px) {
|
|
|
+ .top-nav {
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shell {
|
|
|
+ width: min(100% - 20px, 1500px);
|
|
|
+ padding-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-copy {
|
|
|
+ padding: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero h1 {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .feature-strip {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-card {
|
|
|
+ min-height: 620px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-row,
|
|
|
+ .message-row.user {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-row .avatar,
|
|
|
+ .message-row.user .avatar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-row.user .bubble,
|
|
|
+ .message-row.user .avatar {
|
|
|
+ grid-column: auto;
|
|
|
+ grid-row: auto;
|
|
|
+ }
|
|
|
+}
|