|
|
@@ -1,6 +1,17 @@
|
|
|
:root {
|
|
|
- color: #1f2933;
|
|
|
- background: #eef2f5;
|
|
|
+ --canvas: #f3f5f7;
|
|
|
+ --surface: #ffffff;
|
|
|
+ --surface-subtle: #f8fafc;
|
|
|
+ --border: #d9e0e7;
|
|
|
+ --text: #17212b;
|
|
|
+ --muted: #647180;
|
|
|
+ --accent: #176b87;
|
|
|
+ --accent-strong: #0f536a;
|
|
|
+ --danger: #b42318;
|
|
|
+ --radius: 10px;
|
|
|
+ --shadow: 0 8px 24px rgb(23 33 43 / 8%);
|
|
|
+ color: var(--text);
|
|
|
+ background: var(--canvas);
|
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
|
}
|
|
|
|
|
|
@@ -9,12 +20,18 @@
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
+ background: var(--canvas);
|
|
|
+ color: var(--text);
|
|
|
height: 100vh;
|
|
|
margin: 0;
|
|
|
min-height: 100vh;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
+[hidden] {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+
|
|
|
button,
|
|
|
input,
|
|
|
select,
|
|
|
@@ -23,16 +40,57 @@ textarea {
|
|
|
}
|
|
|
|
|
|
button {
|
|
|
- border: 0;
|
|
|
- border-radius: 6px;
|
|
|
- background: #0f766e;
|
|
|
- color: white;
|
|
|
+ align-items: center;
|
|
|
+ background: var(--accent);
|
|
|
+ border: 1px solid var(--accent);
|
|
|
+ border-radius: 7px;
|
|
|
+ color: #ffffff;
|
|
|
cursor: pointer;
|
|
|
+ display: inline-flex;
|
|
|
+ font-weight: 650;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 36px;
|
|
|
padding: 8px 12px;
|
|
|
}
|
|
|
|
|
|
-button:hover {
|
|
|
- background: #115e59;
|
|
|
+.button-primary {
|
|
|
+ background: var(--accent);
|
|
|
+ border-color: var(--accent);
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.button-primary:hover,
|
|
|
+button:not([class]):hover {
|
|
|
+ background: var(--accent-strong);
|
|
|
+ border-color: var(--accent-strong);
|
|
|
+}
|
|
|
+
|
|
|
+.button-secondary {
|
|
|
+ background: var(--surface);
|
|
|
+ border-color: var(--border);
|
|
|
+ color: var(--text);
|
|
|
+}
|
|
|
+
|
|
|
+.button-secondary:hover {
|
|
|
+ background: var(--surface-subtle);
|
|
|
+ border-color: #aeb9c4;
|
|
|
+}
|
|
|
+
|
|
|
+.button-danger {
|
|
|
+ background: #ffffff;
|
|
|
+ border-color: #e6b5b0;
|
|
|
+ color: var(--danger);
|
|
|
+}
|
|
|
+
|
|
|
+.button-danger:hover {
|
|
|
+ background: #fff5f4;
|
|
|
+ border-color: var(--danger);
|
|
|
+}
|
|
|
+
|
|
|
+.button-compact {
|
|
|
+ font-size: 12px;
|
|
|
+ min-height: 30px;
|
|
|
+ padding: 5px 9px;
|
|
|
}
|
|
|
|
|
|
button:disabled {
|
|
|
@@ -40,78 +98,156 @@ button:disabled {
|
|
|
opacity: 0.55;
|
|
|
}
|
|
|
|
|
|
+button:focus-visible,
|
|
|
+input:focus-visible,
|
|
|
+select:focus-visible,
|
|
|
+textarea:focus-visible,
|
|
|
+[tabindex]:focus-visible {
|
|
|
+ outline: 3px solid rgb(23 107 135 / 24%);
|
|
|
+ outline-offset: 2px;
|
|
|
+}
|
|
|
+
|
|
|
.topbar {
|
|
|
align-items: center;
|
|
|
- background: #ffffff;
|
|
|
- border-bottom: 1px solid #d7dee5;
|
|
|
+ background: var(--surface);
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- min-height: 56px;
|
|
|
- padding: 0 20px;
|
|
|
+ min-height: 64px;
|
|
|
+ padding: 8px 18px;
|
|
|
+}
|
|
|
+
|
|
|
+.brand-block {
|
|
|
+ display: grid;
|
|
|
+ gap: 2px;
|
|
|
}
|
|
|
|
|
|
-.topbar h1 {
|
|
|
- font-size: 18px;
|
|
|
+.brand-block h1 {
|
|
|
+ font-size: 17px;
|
|
|
+ letter-spacing: -0.01em;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
-.top-actions {
|
|
|
+.brand-block span {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.top-status {
|
|
|
align-items: center;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- gap: 10px;
|
|
|
+ gap: 8px;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
-.status {
|
|
|
- background: #e0f2f1;
|
|
|
- border: 1px solid #b2dfdb;
|
|
|
+.status-badge {
|
|
|
+ background: #eaf4f7;
|
|
|
+ border: 1px solid #c8e0e7;
|
|
|
border-radius: 999px;
|
|
|
- color: #0f766e;
|
|
|
- font-size: 13px;
|
|
|
- padding: 4px 10px;
|
|
|
+ color: var(--accent-strong);
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 5px 8px;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.status-neutral {
|
|
|
+ background: var(--surface-subtle);
|
|
|
+ border-color: var(--border);
|
|
|
+ color: var(--muted);
|
|
|
}
|
|
|
|
|
|
.layout {
|
|
|
display: grid;
|
|
|
- gap: 16px;
|
|
|
- grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
|
|
|
- height: calc(100vh - 56px);
|
|
|
+ grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(300px, 380px);
|
|
|
+ height: calc(100vh - 64px);
|
|
|
min-height: 0;
|
|
|
overflow: hidden;
|
|
|
- padding: 16px;
|
|
|
}
|
|
|
|
|
|
-.panel,
|
|
|
-.workspace {
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid #d7dee5;
|
|
|
- border-radius: 8px;
|
|
|
+.layout.debug-drawer-closed {
|
|
|
+ grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) 0;
|
|
|
}
|
|
|
|
|
|
.controls {
|
|
|
+ background: var(--surface);
|
|
|
+ border-right: 1px solid var(--border);
|
|
|
min-height: 0;
|
|
|
overflow: auto;
|
|
|
- padding: 16px;
|
|
|
+ overscroll-behavior: contain;
|
|
|
}
|
|
|
|
|
|
-section + section {
|
|
|
- border-top: 1px solid #e4e9ee;
|
|
|
- margin-top: 18px;
|
|
|
- padding-top: 18px;
|
|
|
+.control-section {
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+}
|
|
|
+
|
|
|
+.control-section-toggle {
|
|
|
+ background: var(--surface);
|
|
|
+ border: 0;
|
|
|
+ border-radius: 0;
|
|
|
+ color: var(--text);
|
|
|
+ justify-content: space-between;
|
|
|
+ min-height: 48px;
|
|
|
+ padding: 10px 14px;
|
|
|
+ text-align: left;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.control-section-toggle:hover {
|
|
|
+ background: var(--surface-subtle);
|
|
|
+}
|
|
|
+
|
|
|
+.control-section-toggle > span:first-child {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 750;
|
|
|
+ letter-spacing: 0.01em;
|
|
|
+}
|
|
|
+
|
|
|
+.control-section-toggle::after {
|
|
|
+ border-bottom: 2px solid var(--muted);
|
|
|
+ border-right: 2px solid var(--muted);
|
|
|
+ content: "";
|
|
|
+ height: 7px;
|
|
|
+ margin-left: 8px;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ transition: transform 120ms ease;
|
|
|
+ width: 7px;
|
|
|
+}
|
|
|
+
|
|
|
+.control-section-toggle[aria-expanded="false"]::after {
|
|
|
+ transform: rotate(-45deg);
|
|
|
+}
|
|
|
+
|
|
|
+.control-section-body {
|
|
|
+ padding: 0 14px 14px;
|
|
|
+}
|
|
|
+
|
|
|
+.control-section-body > :first-child {
|
|
|
+ margin-top: 0;
|
|
|
}
|
|
|
|
|
|
h2 {
|
|
|
- font-size: 14px;
|
|
|
- margin: 0 0 10px;
|
|
|
+ font-size: 13px;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
|
|
|
.section-head {
|
|
|
align-items: center;
|
|
|
display: flex;
|
|
|
+ gap: 8px;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
+.section-kicker {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 650;
|
|
|
+ letter-spacing: 0.04em;
|
|
|
+ text-transform: uppercase;
|
|
|
+}
|
|
|
+
|
|
|
.stack {
|
|
|
display: grid;
|
|
|
gap: 10px;
|
|
|
@@ -133,21 +269,20 @@ h2 {
|
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
}
|
|
|
|
|
|
-.session-section .section-head button {
|
|
|
- background: #eef2f5;
|
|
|
- border: 1px solid #cbd5df;
|
|
|
- color: #1f2933;
|
|
|
- font-size: 12px;
|
|
|
- padding: 5px 8px;
|
|
|
-}
|
|
|
-
|
|
|
.session-status {
|
|
|
- color: #52616f;
|
|
|
+ color: var(--muted);
|
|
|
font-size: 12px;
|
|
|
margin-top: 8px;
|
|
|
min-height: 16px;
|
|
|
}
|
|
|
|
|
|
+.control-help {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.45;
|
|
|
+ margin: 10px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
label {
|
|
|
display: grid;
|
|
|
gap: 6px;
|
|
|
@@ -155,14 +290,14 @@ label {
|
|
|
}
|
|
|
|
|
|
fieldset {
|
|
|
- border: 1px solid #d7dee5;
|
|
|
- border-radius: 6px;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 7px;
|
|
|
margin: 12px 0 0;
|
|
|
padding: 8px 10px 10px;
|
|
|
}
|
|
|
|
|
|
legend {
|
|
|
- color: #52616f;
|
|
|
+ color: var(--muted);
|
|
|
font-size: 12px;
|
|
|
padding: 0 4px;
|
|
|
}
|
|
|
@@ -180,9 +315,10 @@ legend {
|
|
|
input,
|
|
|
select,
|
|
|
textarea {
|
|
|
- border: 1px solid #cbd5df;
|
|
|
- border-radius: 6px;
|
|
|
- color: #1f2933;
|
|
|
+ background: var(--surface);
|
|
|
+ border: 1px solid #bdc8d2;
|
|
|
+ border-radius: 7px;
|
|
|
+ color: var(--text);
|
|
|
padding: 8px;
|
|
|
width: 100%;
|
|
|
}
|
|
|
@@ -198,9 +334,9 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.prompt-item {
|
|
|
- background: #fbfcfd;
|
|
|
- border: 1px solid #d7dee5;
|
|
|
- border-radius: 6px;
|
|
|
+ background: var(--surface-subtle);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 7px;
|
|
|
cursor: grab;
|
|
|
padding: 8px;
|
|
|
}
|
|
|
@@ -226,16 +362,16 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.prompt-title {
|
|
|
- color: #52616f;
|
|
|
+ color: var(--muted);
|
|
|
font-size: 12px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.prompt-type {
|
|
|
- background: #e0f2f1;
|
|
|
- border: 1px solid #b2dfdb;
|
|
|
+ background: #eaf4f7;
|
|
|
+ border: 1px solid #c8e0e7;
|
|
|
border-radius: 999px;
|
|
|
- color: #0f766e;
|
|
|
+ color: var(--accent-strong);
|
|
|
font-size: 11px;
|
|
|
font-weight: 700;
|
|
|
line-height: 1;
|
|
|
@@ -251,16 +387,16 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.prompt-actions button {
|
|
|
- background: #eef2f5;
|
|
|
- border: 1px solid #cbd5df;
|
|
|
- color: #1f2933;
|
|
|
+ background: var(--surface);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ color: var(--text);
|
|
|
font-size: 12px;
|
|
|
line-height: 1.1;
|
|
|
padding: 4px 7px;
|
|
|
}
|
|
|
|
|
|
.prompt-actions button:hover {
|
|
|
- background: #e4e9ee;
|
|
|
+ background: var(--surface-subtle);
|
|
|
}
|
|
|
|
|
|
.prompt-item textarea {
|
|
|
@@ -270,10 +406,12 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.event-prompt textarea {
|
|
|
- background: #f7f9fb;
|
|
|
+ background: var(--surface-subtle);
|
|
|
}
|
|
|
|
|
|
.workspace {
|
|
|
+ background: var(--surface);
|
|
|
+ border-right: 1px solid var(--border);
|
|
|
display: grid;
|
|
|
grid-template-rows: minmax(0, 1fr) auto auto;
|
|
|
min-height: 0;
|
|
|
@@ -283,7 +421,7 @@ textarea {
|
|
|
|
|
|
.workspace-body {
|
|
|
display: grid;
|
|
|
- grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
|
|
|
+ grid-template-rows: minmax(0, 1fr);
|
|
|
min-height: 0;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
@@ -294,19 +432,25 @@ textarea {
|
|
|
gap: 10px;
|
|
|
min-height: 0;
|
|
|
overflow: auto;
|
|
|
- padding: 16px;
|
|
|
+ overscroll-behavior: contain;
|
|
|
+ padding: 20px clamp(16px, 3vw, 36px);
|
|
|
}
|
|
|
|
|
|
-.replay-panel {
|
|
|
- border-left: 1px solid #e4e9ee;
|
|
|
- display: grid;
|
|
|
- gap: 16px;
|
|
|
- grid-template-rows: auto minmax(0, 1fr);
|
|
|
+.debug-drawer {
|
|
|
+ background: var(--surface-subtle);
|
|
|
min-height: 0;
|
|
|
- overflow: hidden;
|
|
|
+ min-width: 0;
|
|
|
+ overflow: auto;
|
|
|
+ overscroll-behavior: contain;
|
|
|
padding: 16px;
|
|
|
}
|
|
|
|
|
|
+.drawer-section + .drawer-section {
|
|
|
+ border-top: 1px solid var(--border);
|
|
|
+ margin-top: 18px;
|
|
|
+ padding-top: 18px;
|
|
|
+}
|
|
|
+
|
|
|
.audit-launch-section {
|
|
|
display: grid;
|
|
|
gap: 10px;
|
|
|
@@ -317,10 +461,10 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.audit-summary {
|
|
|
- background: #f7f9fb;
|
|
|
- border: 1px solid #e4e9ee;
|
|
|
- border-radius: 6px;
|
|
|
- color: #52616f;
|
|
|
+ background: var(--surface);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 7px;
|
|
|
+ color: var(--muted);
|
|
|
font-size: 12px;
|
|
|
line-height: 1.45;
|
|
|
margin: 0;
|
|
|
@@ -343,50 +487,56 @@ textarea {
|
|
|
|
|
|
.session-usage-section {
|
|
|
min-height: 0;
|
|
|
- overflow: auto;
|
|
|
}
|
|
|
|
|
|
.meta-count {
|
|
|
- color: #697586;
|
|
|
+ color: var(--muted);
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
.message {
|
|
|
+ background: var(--surface-subtle);
|
|
|
+ border: 1px solid var(--border);
|
|
|
border-radius: 8px;
|
|
|
+ color: var(--text);
|
|
|
line-height: 1.5;
|
|
|
- max-width: 900px;
|
|
|
+ max-width: min(86%, 900px);
|
|
|
padding: 10px 12px;
|
|
|
white-space: pre-wrap;
|
|
|
word-break: break-word;
|
|
|
}
|
|
|
|
|
|
-.assistant {
|
|
|
- background: #edf7f6;
|
|
|
- border: 1px solid #b7ddda;
|
|
|
+.message.assistant {
|
|
|
+ background: #f5fafb;
|
|
|
+ border-color: #c8e0e7;
|
|
|
}
|
|
|
|
|
|
-.user {
|
|
|
+.message.user {
|
|
|
align-self: flex-end;
|
|
|
- background: #eff6ff;
|
|
|
- border: 1px solid #bfdbfe;
|
|
|
+ background: #eef6f9;
|
|
|
+ border-color: #b9d7e0;
|
|
|
}
|
|
|
|
|
|
-.session {
|
|
|
- background: #f4f6f8;
|
|
|
- color: #52616f;
|
|
|
+.message.session {
|
|
|
+ align-self: center;
|
|
|
+ background: transparent;
|
|
|
+ border-color: transparent;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 12px;
|
|
|
+ padding-block: 4px;
|
|
|
}
|
|
|
|
|
|
-.event {
|
|
|
- background: #fff7ed;
|
|
|
- border: 1px solid #fed7aa;
|
|
|
+.message.event {
|
|
|
+ background: #fff9f2;
|
|
|
+ border-color: #ead8bc;
|
|
|
}
|
|
|
|
|
|
-.tool {
|
|
|
- background: #f0fdf4;
|
|
|
- border: 1px solid #bbf7d0;
|
|
|
+.message.tool {
|
|
|
+ background: #f4faf6;
|
|
|
+ border-color: #c9dfcf;
|
|
|
}
|
|
|
|
|
|
-.audit {
|
|
|
+.message.audit {
|
|
|
background: #eef2ff;
|
|
|
border: 1px solid #c7d2fe;
|
|
|
color: #3730a3;
|
|
|
@@ -411,10 +561,10 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.replay-row {
|
|
|
- background: #f7f9fb;
|
|
|
- border: 1px solid #e4e9ee;
|
|
|
- border-radius: 6px;
|
|
|
- color: #1f2933;
|
|
|
+ background: var(--surface);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 7px;
|
|
|
+ color: var(--text);
|
|
|
font-size: 12px;
|
|
|
line-height: 1.45;
|
|
|
padding: 8px;
|
|
|
@@ -424,10 +574,10 @@ textarea {
|
|
|
|
|
|
.audit-event {
|
|
|
align-items: stretch;
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid #d7dee5;
|
|
|
- border-radius: 6px;
|
|
|
- color: #1f2933;
|
|
|
+ background: var(--surface);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 7px;
|
|
|
+ color: var(--text);
|
|
|
display: grid;
|
|
|
gap: 8px;
|
|
|
grid-template-columns: 14px minmax(0, 1fr);
|
|
|
@@ -444,7 +594,7 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.audit-event.is-selected {
|
|
|
- box-shadow: inset 3px 0 0 #0f766e;
|
|
|
+ box-shadow: inset 3px 0 0 var(--accent);
|
|
|
}
|
|
|
|
|
|
.audit-marker {
|
|
|
@@ -490,7 +640,7 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.audit-kind-chat .audit-marker::before {
|
|
|
- background: #0f766e;
|
|
|
+ background: var(--accent);
|
|
|
}
|
|
|
|
|
|
.audit-event-body {
|
|
|
@@ -511,9 +661,9 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.audit-detail {
|
|
|
- background: #fbfcfd;
|
|
|
- border: 1px solid #e4e9ee;
|
|
|
- border-radius: 6px;
|
|
|
+ background: var(--surface-subtle);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 7px;
|
|
|
display: block;
|
|
|
margin-top: 10px;
|
|
|
min-height: 0;
|
|
|
@@ -529,7 +679,7 @@ textarea {
|
|
|
|
|
|
.audit-detail-title,
|
|
|
.audit-detail-block-title {
|
|
|
- color: #1f2933;
|
|
|
+ color: var(--text);
|
|
|
font-size: 13px;
|
|
|
line-height: 1.25;
|
|
|
margin: 0;
|
|
|
@@ -683,9 +833,9 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.usage-summary div {
|
|
|
- background: #f7f9fb;
|
|
|
- border: 1px solid #e4e9ee;
|
|
|
- border-radius: 6px;
|
|
|
+ background: var(--surface);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 7px;
|
|
|
display: grid;
|
|
|
gap: 2px;
|
|
|
padding: 8px;
|
|
|
@@ -708,35 +858,51 @@ textarea {
|
|
|
margin-top: 14px;
|
|
|
}
|
|
|
|
|
|
-.error {
|
|
|
+.message.error {
|
|
|
background: #fef2f2;
|
|
|
- border: 1px solid #fecaca;
|
|
|
- color: #991b1b;
|
|
|
+ border-color: #f3b7b2;
|
|
|
+ color: var(--danger);
|
|
|
}
|
|
|
|
|
|
.tool-card {
|
|
|
- border: 1px solid #e4e9ee;
|
|
|
- border-radius: 6px;
|
|
|
- padding: 10px;
|
|
|
+ background: var(--surface);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 7px;
|
|
|
+ padding: 8px 9px;
|
|
|
+}
|
|
|
+
|
|
|
+.tool-card:has(input:checked) {
|
|
|
+ background: #f1f8fa;
|
|
|
+ border-color: #8fbcc9;
|
|
|
+ box-shadow: inset 3px 0 0 var(--accent);
|
|
|
+}
|
|
|
+
|
|
|
+.tool-card .checkbox {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-top: 0;
|
|
|
}
|
|
|
|
|
|
.tool-description,
|
|
|
.tool-required {
|
|
|
- color: #52616f;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 1.4;
|
|
|
- margin-top: 6px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 11px;
|
|
|
+ line-height: 1.35;
|
|
|
+ margin-top: 4px;
|
|
|
}
|
|
|
|
|
|
#tool-count {
|
|
|
- color: #697586;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
+ font-size: 11px;
|
|
|
+}
|
|
|
+
|
|
|
+#tool-list {
|
|
|
+ margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
.modal {
|
|
|
- border: 0;
|
|
|
- border-radius: 8px;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ box-shadow: var(--shadow);
|
|
|
max-height: min(720px, calc(100vh - 48px));
|
|
|
max-width: min(760px, calc(100vw - 32px));
|
|
|
padding: 0;
|
|
|
@@ -755,12 +921,19 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.modal-shell {
|
|
|
+ background: var(--surface);
|
|
|
display: grid;
|
|
|
max-height: min(720px, calc(100vh - 48px));
|
|
|
overflow: auto;
|
|
|
padding: 16px;
|
|
|
}
|
|
|
|
|
|
+.modal-shell > section + section {
|
|
|
+ border-top: 1px solid var(--border);
|
|
|
+ margin-top: 18px;
|
|
|
+ padding-top: 18px;
|
|
|
+}
|
|
|
+
|
|
|
.audit-modal .modal-shell {
|
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
|
height: 100%;
|
|
|
@@ -774,6 +947,16 @@ textarea {
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
+.modal-head button {
|
|
|
+ background: var(--surface);
|
|
|
+ border-color: var(--border);
|
|
|
+ color: var(--text);
|
|
|
+}
|
|
|
+
|
|
|
+.modal-head button:hover {
|
|
|
+ background: var(--surface-subtle);
|
|
|
+}
|
|
|
+
|
|
|
.audit-modal-body {
|
|
|
display: grid;
|
|
|
gap: 16px;
|
|
|
@@ -782,21 +965,21 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.stats {
|
|
|
- border-top: 1px solid #e4e9ee;
|
|
|
+ border-top: 1px solid var(--border);
|
|
|
display: grid;
|
|
|
gap: 1px;
|
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
}
|
|
|
|
|
|
.stats div {
|
|
|
- background: #f7f9fb;
|
|
|
+ background: var(--surface-subtle);
|
|
|
display: grid;
|
|
|
gap: 4px;
|
|
|
padding: 10px 12px;
|
|
|
}
|
|
|
|
|
|
.stats span {
|
|
|
- color: #697586;
|
|
|
+ color: var(--muted);
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
@@ -805,45 +988,83 @@ textarea {
|
|
|
}
|
|
|
|
|
|
.composer {
|
|
|
- border-top: 1px solid #e4e9ee;
|
|
|
+ background: var(--surface);
|
|
|
+ border-top: 1px solid var(--border);
|
|
|
display: grid;
|
|
|
gap: 12px;
|
|
|
grid-template-columns: minmax(0, 1fr) auto;
|
|
|
padding: 12px;
|
|
|
}
|
|
|
|
|
|
-@media (max-width: 860px) {
|
|
|
+.composer textarea {
|
|
|
+ max-height: 240px;
|
|
|
+ min-height: 72px;
|
|
|
+}
|
|
|
+
|
|
|
+@media (max-width: 900px) {
|
|
|
+ html,
|
|
|
body {
|
|
|
height: auto;
|
|
|
- overflow: auto;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
}
|
|
|
|
|
|
- .layout {
|
|
|
- grid-template-columns: 1fr;
|
|
|
+ body {
|
|
|
+ min-height: 100vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topbar {
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-status {
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .layout,
|
|
|
+ .layout.debug-drawer-closed {
|
|
|
+ grid-template-columns: minmax(0, 1fr);
|
|
|
height: auto;
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
+ .controls,
|
|
|
+ .debug-drawer {
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ border-right: 0;
|
|
|
+ max-height: none;
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+
|
|
|
.workspace {
|
|
|
- min-height: 70vh;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ border-right: 0;
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ .workspace-body {
|
|
|
+ min-height: 420px;
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ .messages {
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
.stats,
|
|
|
.composer,
|
|
|
.pre-message,
|
|
|
- .workspace-body,
|
|
|
.audit-modal-body,
|
|
|
.usage-summary,
|
|
|
.button-row {
|
|
|
grid-template-columns: 1fr;
|
|
|
}
|
|
|
|
|
|
- .replay-panel {
|
|
|
- border-left: 0;
|
|
|
- border-top: 1px solid #e4e9ee;
|
|
|
- grid-template-rows: auto auto;
|
|
|
- overflow: visible;
|
|
|
+ .debug-drawer[hidden] {
|
|
|
+ display: none !important;
|
|
|
}
|
|
|
|
|
|
.audit-modal .modal-shell {
|
zhenyu.hu