Spaces:
Sleeping
Sleeping
| :root { | |
| color-scheme: dark; | |
| font-family: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif; | |
| --bg: #0f1419; | |
| --bg-top: rgba(247, 169, 71, 0.12); | |
| --bg-right: rgba(127, 228, 190, 0.12); | |
| --bg-gradient-start: #131920; | |
| --bg-gradient-end: #0c1116; | |
| --panel: rgba(20, 26, 33, 0.88); | |
| --panel-strong: rgba(28, 34, 43, 0.96); | |
| --panel-soft: rgba(255, 255, 255, 0.04); | |
| --panel-tint: rgba(255, 255, 255, 0.04); | |
| --panel-tint-strong: rgba(255, 255, 255, 0.06); | |
| --line: rgba(172, 191, 209, 0.16); | |
| --line-strong: rgba(255, 255, 255, 0.22); | |
| --line-soft: rgba(255, 255, 255, 0.1); | |
| --text: #ebf2f8; | |
| --muted: #93a5b4; | |
| --primary-text: #052d21; | |
| --toolbar-bg: linear-gradient(180deg, rgba(21, 26, 33, 0.96), rgba(15, 20, 25, 0.92)); | |
| --palette-bg: linear-gradient(180deg, rgba(18, 23, 29, 0.96), rgba(13, 18, 24, 0.92)); | |
| --surface-bg: | |
| radial-gradient(circle at 20% 10%, rgba(127, 228, 190, 0.08), transparent 26%), | |
| radial-gradient(circle at 90% 0%, rgba(240, 195, 107, 0.08), transparent 18%), | |
| rgba(12, 16, 22, 0.9); | |
| --overlay-bg: rgba(10, 14, 18, 0.9); | |
| --node-bg: linear-gradient(180deg, rgba(19, 24, 31, 0.98), rgba(14, 18, 24, 0.96)); | |
| --node-border: rgba(255, 255, 255, 0.08); | |
| --node-selected-border: rgba(255, 255, 255, 0.18); | |
| --button-bg: rgba(255, 255, 255, 0.04); | |
| --button-bg-ghost: rgba(255, 255, 255, 0.03); | |
| --input-bg: rgba(255, 255, 255, 0.04); | |
| --card-bg: rgba(255, 255, 255, 0.04); | |
| --idle-pill-bg: rgba(255, 255, 255, 0.06); | |
| --handle-border: #0d1218; | |
| --node-shadow: 0 14px 36px rgba(0, 0, 0, 0.25); | |
| --accent-mint: #7fe4be; | |
| --accent-amber: #f0c36b; | |
| --accent-sky: #8cc5ff; | |
| --accent-coral: #ff8d74; | |
| --accent-gold: #f7a947; | |
| --accent-violet: #8fa0ff; | |
| --accent-lime: #b9e96c; | |
| --accent-sea: #56d5c9; | |
| --accent-rose: #ff7a99; | |
| --shadow: 0 18px 48px rgba(0, 0, 0, 0.28); | |
| } | |
| [data-theme="light"] { | |
| color-scheme: light; | |
| --bg: #eef4f7; | |
| --bg-top: rgba(255, 186, 83, 0.18); | |
| --bg-right: rgba(94, 206, 176, 0.18); | |
| --bg-gradient-start: #f7fbfd; | |
| --bg-gradient-end: #e7eef3; | |
| --panel: rgba(255, 255, 255, 0.78); | |
| --panel-strong: rgba(255, 255, 255, 0.92); | |
| --panel-soft: rgba(30, 51, 68, 0.05); | |
| --panel-tint: rgba(21, 36, 48, 0.05); | |
| --panel-tint-strong: rgba(21, 36, 48, 0.08); | |
| --line: rgba(76, 98, 117, 0.16); | |
| --line-strong: rgba(76, 98, 117, 0.28); | |
| --line-soft: rgba(76, 98, 117, 0.14); | |
| --text: #18242e; | |
| --muted: #667988; | |
| --primary-text: #ffffff; | |
| --toolbar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 252, 0.82)); | |
| --palette-bg: linear-gradient(180deg, rgba(250, 252, 253, 0.94), rgba(243, 247, 250, 0.92)); | |
| --surface-bg: | |
| radial-gradient(circle at 20% 10%, rgba(94, 206, 176, 0.11), transparent 26%), | |
| radial-gradient(circle at 90% 0%, rgba(255, 186, 83, 0.11), transparent 18%), | |
| rgba(255, 255, 255, 0.82); | |
| --overlay-bg: rgba(255, 255, 255, 0.92); | |
| --node-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 248, 250, 0.95)); | |
| --node-border: rgba(76, 98, 117, 0.14); | |
| --node-selected-border: rgba(76, 98, 117, 0.24); | |
| --button-bg: rgba(23, 38, 50, 0.05); | |
| --button-bg-ghost: rgba(23, 38, 50, 0.04); | |
| --input-bg: rgba(23, 38, 50, 0.04); | |
| --card-bg: rgba(23, 38, 50, 0.04); | |
| --idle-pill-bg: rgba(23, 38, 50, 0.06); | |
| --handle-border: #f6fafc; | |
| --node-shadow: 0 14px 30px rgba(108, 131, 148, 0.14); | |
| --shadow: 0 18px 44px rgba(108, 131, 148, 0.16); | |
| } | |
| html, | |
| body, | |
| #root { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| background: | |
| radial-gradient(circle at top left, var(--bg-top), transparent 28%), | |
| radial-gradient(circle at top right, var(--bg-right), transparent 24%), | |
| linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%); | |
| color: var(--text); | |
| } | |
| button, | |
| input, | |
| select, | |
| textarea { | |
| font: inherit; | |
| } | |
| .app-shell { | |
| display: flex; | |
| flex-direction: column; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .toolbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 18px; | |
| padding: 16px 22px; | |
| background: var(--toolbar-bg); | |
| border-bottom: 1px solid var(--line); | |
| backdrop-filter: blur(18px); | |
| } | |
| .toolbar__group, | |
| .button-row, | |
| .field-row { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .toolbar__button, | |
| .node-button, | |
| .palette__item, | |
| .chip__remove { | |
| border: 1px solid var(--line-soft); | |
| background: var(--button-bg); | |
| color: var(--text); | |
| border-radius: 7px; | |
| cursor: pointer; | |
| transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; | |
| } | |
| .toolbar__button:hover, | |
| .node-button:hover, | |
| .palette__item:hover, | |
| .chip__remove:hover { | |
| transform: translateY(-1px); | |
| border-color: var(--line-strong); | |
| } | |
| .toolbar__button { | |
| padding: 10px 16px; | |
| } | |
| .toolbar__button--primary { | |
| background: linear-gradient(135deg, #7fe4be, #4bb087); | |
| color: var(--primary-text); | |
| border-color: transparent; | |
| font-weight: 700; | |
| } | |
| .toolbar__button--theme { | |
| min-width: 118px; | |
| } | |
| .toolbar__button--live.is-connected { | |
| border-color: color-mix(in srgb, var(--accent-sky) 58%, var(--line-soft)); | |
| background: color-mix(in srgb, var(--accent-sky) 16%, var(--button-bg)); | |
| } | |
| .toolbar__meta { | |
| display: flex; | |
| gap: 14px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| justify-content: flex-end; | |
| } | |
| .toolbar__breadcrumbs { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .toolbar__breadcrumbs::after { | |
| content: ""; | |
| flex: 0 0 1px; | |
| align-self: stretch; | |
| background: var(--line); | |
| margin-left: 4px; | |
| } | |
| .toolbar__crumb { | |
| border: 1px solid var(--line-soft); | |
| background: var(--button-bg-ghost); | |
| color: var(--muted); | |
| border-radius: 999px; | |
| padding: 7px 12px; | |
| cursor: pointer; | |
| transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease; | |
| } | |
| .toolbar__crumb:hover { | |
| transform: translateY(-1px); | |
| border-color: var(--line-strong); | |
| color: var(--text); | |
| } | |
| .toolbar__crumb.is-current { | |
| color: var(--text); | |
| border-color: color-mix(in srgb, var(--accent-mint) 34%, var(--line-soft)); | |
| background: color-mix(in srgb, var(--accent-mint) 12%, var(--button-bg-ghost)); | |
| } | |
| .toolbar__backend, | |
| .toolbar__notice, | |
| .palette__subtitle, | |
| .node-shell__eyebrow, | |
| .field-label, | |
| .node-note, | |
| .result-card__label, | |
| .dialog-message__author, | |
| .dialog-empty { | |
| color: var(--muted); | |
| } | |
| .toolbar__backend, | |
| .toolbar__notice { | |
| font-size: 0.92rem; | |
| } | |
| .toolbar__backend { | |
| max-width: 320px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .app-shell__body { | |
| flex: 1; | |
| min-height: 0; | |
| display: grid; | |
| grid-template-columns: 320px minmax(0, 1fr); | |
| } | |
| .app-shell__body--palette-hidden { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| .app-shell--demo .toolbar { | |
| flex: 0 0 auto; | |
| } | |
| .palette { | |
| padding: 20px; | |
| border-right: 1px solid var(--line); | |
| background: var(--palette-bg); | |
| backdrop-filter: blur(18px); | |
| overflow: auto; | |
| } | |
| .palette__header { | |
| margin-bottom: 18px; | |
| } | |
| .palette__topline { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 8px; | |
| } | |
| .palette__hide-button, | |
| .palette-toggle { | |
| border: 1px solid var(--line-soft); | |
| border-radius: 999px; | |
| background: var(--button-bg); | |
| color: var(--text); | |
| cursor: pointer; | |
| font: inherit; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| padding: 7px 10px; | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .palette__hide-button:hover, | |
| .palette-toggle:hover { | |
| border-color: var(--line-strong); | |
| transform: translateY(-1px); | |
| } | |
| .palette__section { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .palette__section+.palette__section { | |
| margin-top: 22px; | |
| } | |
| .palette__section-title { | |
| font-size: 0.82rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--muted); | |
| } | |
| .palette__eyebrow { | |
| text-transform: uppercase; | |
| letter-spacing: 0.18em; | |
| font-size: 0.72rem; | |
| margin: 0; | |
| } | |
| .palette__title { | |
| margin: 0; | |
| font-size: 1.45rem; | |
| } | |
| .palette__subtitle { | |
| margin: 8px 0 0; | |
| line-height: 1.45; | |
| } | |
| .palette__list { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .palette__empty { | |
| border: 1px dashed var(--line); | |
| border-radius: 16px; | |
| padding: 14px 16px; | |
| color: var(--muted); | |
| line-height: 1.45; | |
| background: var(--button-bg-ghost); | |
| } | |
| .palette__item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 6px; | |
| padding: 14px 16px; | |
| text-align: left; | |
| } | |
| .palette__item-title { | |
| font-weight: 700; | |
| } | |
| .palette__item-description { | |
| color: var(--muted); | |
| line-height: 1.35; | |
| } | |
| .settings-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 40; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 28px; | |
| background: rgba(8, 12, 16, 0.42); | |
| backdrop-filter: blur(10px); | |
| } | |
| .settings-dialog { | |
| width: min(560px, 100%); | |
| border-radius: 24px; | |
| border: 1px solid var(--line); | |
| background: var(--panel-strong); | |
| box-shadow: var(--shadow); | |
| } | |
| .settings-dialog__header, | |
| .settings-dialog__footer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 20px 22px; | |
| } | |
| .settings-dialog__header { | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .settings-dialog__footer { | |
| border-top: 1px solid var(--line); | |
| } | |
| .settings-dialog__body { | |
| display: grid; | |
| gap: 16px; | |
| padding: 22px; | |
| } | |
| .settings-dialog__eyebrow { | |
| font-size: 0.76rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--muted); | |
| margin-bottom: 6px; | |
| } | |
| .settings-dialog__title { | |
| margin: 0; | |
| font-size: 1.35rem; | |
| } | |
| .settings-dialog__note, | |
| .settings-dialog__default { | |
| color: var(--muted); | |
| line-height: 1.5; | |
| } | |
| .settings-dialog__default { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| align-items: center; | |
| } | |
| .settings-dialog__default code { | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| background: var(--button-bg-ghost); | |
| color: var(--text); | |
| } | |
| .app-shell__canvas { | |
| position: relative; | |
| min-width: 0; | |
| min-height: 0; | |
| padding: 18px; | |
| } | |
| .palette-toggle { | |
| position: absolute; | |
| z-index: 20; | |
| top: 30px; | |
| left: 30px; | |
| } | |
| .flow-surface { | |
| width: 100%; | |
| height: 100%; | |
| border: 1px solid var(--line); | |
| border-radius: 26px; | |
| overflow: hidden; | |
| background: var(--surface-bg); | |
| box-shadow: var(--shadow); | |
| } | |
| .react-flow__controls, | |
| .react-flow__minimap { | |
| background: var(--overlay-bg); | |
| border: 1px solid var(--node-border); | |
| border-radius: 14px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| .react-flow__controls-button { | |
| background: transparent; | |
| color: var(--text); | |
| border-bottom-color: var(--node-border); | |
| } | |
| .node-shell { | |
| min-width: 220px; | |
| border-radius: 22px; | |
| background: var(--node-bg); | |
| border: 1px solid var(--node-border); | |
| color: var(--text); | |
| box-shadow: var(--node-shadow); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .node-shell--system { | |
| min-width: 240px; | |
| } | |
| .node-shell::before { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| border-top: 3px solid var(--node-accent); | |
| } | |
| .node-shell.is-selected { | |
| border-color: var(--node-selected-border); | |
| box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36), 0 0 0 1px color-mix(in srgb, var(--node-accent) 60%, transparent); | |
| } | |
| .node-shell.status-running, | |
| .node-shell.status-waiting { | |
| border-color: color-mix(in srgb, var(--node-accent) 72%, var(--node-selected-border)); | |
| box-shadow: | |
| 0 18px 44px rgba(0, 0, 0, 0.36), | |
| 0 0 0 2px color-mix(in srgb, var(--node-accent) 52%, transparent), | |
| 0 0 28px color-mix(in srgb, var(--node-accent) 28%, transparent); | |
| } | |
| .node-shell__header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 16px 18px 10px; | |
| cursor: grab; | |
| } | |
| .node-shell__header:active { | |
| cursor: grabbing; | |
| } | |
| .node-shell__title { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| } | |
| .node-shell__title-button { | |
| max-width: 100%; | |
| padding: 0; | |
| border: none; | |
| background: transparent; | |
| color: var(--text); | |
| text-align: left; | |
| cursor: text; | |
| } | |
| .node-shell__title-input { | |
| min-width: 0; | |
| width: 100%; | |
| border: 1px solid color-mix(in srgb, var(--node-accent) 36%, var(--line-soft)); | |
| border-radius: 7px; | |
| background: var(--input-bg); | |
| color: var(--text); | |
| font-weight: 700; | |
| padding: 5px 8px; | |
| box-sizing: border-box; | |
| } | |
| .node-shell__status-pill { | |
| padding: 5px 10px; | |
| border-radius: 999px; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| background: var(--idle-pill-bg); | |
| color: var(--muted); | |
| } | |
| .node-shell__status-pill.status-running { | |
| background: rgba(240, 195, 107, 0.16); | |
| color: var(--accent-amber); | |
| } | |
| .node-shell__status-pill.status-success { | |
| background: rgba(127, 228, 190, 0.14); | |
| color: var(--accent-mint); | |
| } | |
| .node-shell__status-pill.status-error { | |
| background: rgba(255, 141, 116, 0.14); | |
| color: var(--accent-coral); | |
| } | |
| .node-shell__status-pill.status-waiting { | |
| background: rgba(140, 197, 255, 0.16); | |
| color: var(--accent-sky); | |
| } | |
| .node-shell__status-pill.status-skipped { | |
| background: rgba(147, 165, 180, 0.12); | |
| color: var(--muted); | |
| } | |
| .node-shell__ports { | |
| padding: 0 18px 6px; | |
| } | |
| .node-shell__port-row { | |
| min-height: 30px; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 16px; | |
| } | |
| .node-shell__port { | |
| position: relative; | |
| min-height: 30px; | |
| font-size: 0.79rem; | |
| color: var(--muted); | |
| display: flex; | |
| align-items: center; | |
| } | |
| .node-shell__port-content { | |
| width: 75%; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .node-shell__port-content--input { | |
| justify-content: space-between; | |
| padding-left: 18px; | |
| } | |
| .node-shell__port-content--output { | |
| justify-content: flex-end; | |
| padding-right: 18px; | |
| } | |
| .node-shell__port--output { | |
| justify-content: flex-end; | |
| text-align: right; | |
| } | |
| .node-shell__handle { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 999px; | |
| border: 2px solid var(--handle-border); | |
| background: var(--handle-color, var(--node-accent)); | |
| box-shadow: 0 0 0 2px color-mix(in srgb, var(--handle-color, var(--node-accent)) 24%, transparent); | |
| } | |
| .node-shell__body { | |
| padding: 8px 18px 18px; | |
| } | |
| .node-shell__body--flush { | |
| padding-top: 4px; | |
| } | |
| .node-shell__footer { | |
| padding: 0 18px 18px; | |
| } | |
| .node-shell__port-remove { | |
| width: 15px; | |
| height: 15px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| border: 1px solid var(--line-soft); | |
| background: var(--button-bg); | |
| color: #fff; | |
| background-color: #ff6961; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| line-height: 0; | |
| padding-bottom: 4px; | |
| box-sizing: border-box; | |
| transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; | |
| } | |
| .node-shell__port-remove:hover { | |
| transform: translateY(-1px); | |
| border-color: rgba(255, 105, 97, 0.32); | |
| } | |
| .field-stack { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .field-grid { | |
| display: grid; | |
| gap: 10px; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .field-label { | |
| font-size: 0.78rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .node-input, | |
| .node-textarea { | |
| width: 100%; | |
| border-radius: 7px; | |
| border: 1px solid var(--line-soft); | |
| background: var(--input-bg); | |
| color: var(--text); | |
| box-sizing: border-box; | |
| } | |
| .node-input { | |
| padding: 2px 10px; | |
| font-size: 13px; | |
| } | |
| .node-textarea { | |
| padding: 12px 14px; | |
| resize: none; | |
| line-height: 1.45; | |
| font-family: inherit; | |
| font-size: 0.92rem; | |
| overflow: auto; | |
| } | |
| .node-preview, | |
| .result-card, | |
| .dialog-message, | |
| .dialog-empty, | |
| .chip, | |
| .condition-row { | |
| border-radius: 7px; | |
| background: var(--card-bg); | |
| } | |
| .node-preview { | |
| padding: 12px 14px; | |
| white-space: pre-wrap; | |
| line-height: 1.45; | |
| font-size: 0.92rem; | |
| } | |
| .node-preview--tall { | |
| min-height: 90px; | |
| font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace; | |
| } | |
| .node-textarea--inline { | |
| border-radius: 7px; | |
| background: var(--card-bg); | |
| caret-color: transparent; | |
| } | |
| .node-textarea--inline:not(.is-editing) { | |
| cursor: text; | |
| } | |
| .node-textarea--inline.is-editing { | |
| caret-color: var(--text); | |
| border-color: color-mix(in srgb, var(--node-accent) 36%, var(--line-soft)); | |
| box-shadow: 0 0 0 1px color-mix(in srgb, var(--node-accent) 18%, transparent); | |
| } | |
| .node-textarea--inline::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .node-textarea--inline::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .node-textarea--inline::-webkit-scrollbar-thumb { | |
| border-radius: 999px; | |
| background: rgba(128, 136, 145, 0.7); | |
| } | |
| .node-textarea--inline { | |
| scrollbar-width: thin; | |
| scrollbar-color: rgba(128, 136, 145, 0.7) transparent; | |
| } | |
| .result-card { | |
| display: grid; | |
| gap: 6px; | |
| padding: 12px; | |
| } | |
| .result-card__label { | |
| font-size: 0.76rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .result-card__value { | |
| font-size: 0.96rem; | |
| } | |
| .node-note { | |
| font-size: 0.83rem; | |
| line-height: 1.4; | |
| } | |
| .node-error { | |
| padding: 11px 12px; | |
| border-radius: 12px; | |
| background: rgba(255, 141, 116, 0.12); | |
| color: var(--accent-coral); | |
| font-size: 0.84rem; | |
| } | |
| .node-button { | |
| padding: 3px 8px; | |
| font-size: 13px; | |
| } | |
| .node-button.is-active { | |
| background: linear-gradient(135deg, #f7a947, #d27f21); | |
| color: #241100; | |
| border-color: transparent; | |
| } | |
| .node-button--ghost { | |
| background: var(--button-bg-ghost); | |
| } | |
| .component-node__description { | |
| min-height: 76px; | |
| } | |
| .component-node__meta { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| padding: 10px 12px; | |
| border-radius: 12px; | |
| background: var(--card-bg); | |
| color: var(--muted); | |
| font-size: 0.85rem; | |
| } | |
| .node-shell--script { | |
| min-width: 340px; | |
| } | |
| .node-shell__body--script { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| } | |
| .script-node__spacer { | |
| min-height: 78px; | |
| } | |
| .script-node__footer-buttons { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .chip-list, | |
| .condition-list { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .chip { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| padding: 8px 10px; | |
| } | |
| .chip--passive { | |
| display: inline-flex; | |
| justify-content: center; | |
| } | |
| .chip__remove { | |
| width: 26px; | |
| height: 26px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .dialog-list { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .dialog-empty { | |
| padding: 12px; | |
| } | |
| .dialog-message { | |
| padding: 12px; | |
| } | |
| .dialog-message__author { | |
| display: block; | |
| margin-bottom: 6px; | |
| font-size: 0.8rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .dialog-message p { | |
| margin: 0; | |
| line-height: 1.45; | |
| } | |
| .dialog-message--character { | |
| border-left: 3px solid var(--accent-mint); | |
| } | |
| .dialog-message--user { | |
| border-left: 3px solid var(--accent-amber); | |
| } | |
| .condition-row { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| gap: 8px; | |
| padding: 8px; | |
| } | |
| .json-parser-rule-list { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .json-parser-rule { | |
| display: grid; | |
| gap: 9px; | |
| padding: 10px; | |
| border-radius: 7px; | |
| background: var(--card-bg); | |
| } | |
| .json-parser-rule .field-row { | |
| align-items: end; | |
| } | |
| .json-parser-rule .field-row .field-stack { | |
| flex: 1; | |
| } | |
| .interactive-panel { | |
| position: relative; | |
| box-sizing: border-box; | |
| flex: 0 0 auto; | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 360px; | |
| gap: 16px; | |
| height: var(--interactive-panel-height, 320px); | |
| padding: 18px 18px 18px; | |
| border-top: 1px solid var(--line); | |
| background: var(--toolbar-bg); | |
| min-height: 250px; | |
| max-height: calc(100vh - 80px); | |
| } | |
| .interactive-panel--demo { | |
| flex: 1 1 auto; | |
| height: auto; | |
| min-height: 0; | |
| max-height: none; | |
| } | |
| .interactive-panel__resize-handle { | |
| position: absolute; | |
| top: -1px; | |
| left: 0; | |
| right: 0; | |
| height: 16px; | |
| z-index: 2; | |
| cursor: ns-resize; | |
| touch-action: none; | |
| } | |
| .interactive-panel__resize-handle::before { | |
| content: ""; | |
| position: absolute; | |
| top: 5px; | |
| left: 50%; | |
| width: 72px; | |
| height: 4px; | |
| border-radius: 999px; | |
| background: var(--line-strong); | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.16s ease, background 0.16s ease; | |
| } | |
| .interactive-panel__resize-handle:hover::before, | |
| .interactive-panel__resize-handle:focus-visible::before { | |
| background: color-mix(in srgb, var(--accent-sky) 55%, var(--line-strong)); | |
| opacity: 1; | |
| } | |
| body.is-resizing-interactive-panel, | |
| body.is-resizing-interactive-panel * { | |
| cursor: ns-resize ; | |
| user-select: none ; | |
| } | |
| .interactive-panel__main, | |
| .interactive-panel__side { | |
| min-height: 0; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: var(--panel); | |
| overflow: hidden; | |
| } | |
| .interactive-panel__main { | |
| display: grid; | |
| grid-template-rows: auto minmax(0, 1fr) auto; | |
| } | |
| .interactive-panel__side { | |
| display: grid; | |
| grid-template-rows: auto auto auto minmax(0, 1fr); | |
| gap: 10px; | |
| padding: 12px; | |
| } | |
| .interactive-panel__header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 16px; | |
| padding: 14px 16px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .interactive-panel__eyebrow, | |
| .interactive-panel__log-header { | |
| color: var(--muted); | |
| font-size: 0.76rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .interactive-panel__title { | |
| margin-top: 4px; | |
| line-height: 1.35; | |
| font-weight: 700; | |
| } | |
| .interactive-panel__state { | |
| flex: 0 0 auto; | |
| padding: 6px 10px; | |
| border-radius: 999px; | |
| background: var(--idle-pill-bg); | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| } | |
| .interactive-panel__state.is-waiting { | |
| background: rgba(140, 197, 255, 0.16); | |
| color: var(--accent-sky); | |
| } | |
| .interactive-panel__transcript, | |
| .interactive-panel__logs { | |
| min-height: 0; | |
| overflow: auto; | |
| padding: 12px; | |
| } | |
| .interactive-message, | |
| .interactive-log { | |
| border-radius: 12px; | |
| background: var(--card-bg); | |
| } | |
| .interactive-message { | |
| padding: 10px 12px; | |
| margin-bottom: 8px; | |
| } | |
| .interactive-message span, | |
| .interactive-log span { | |
| display: block; | |
| margin-bottom: 4px; | |
| color: var(--muted); | |
| font-size: 0.76rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| .interactive-message p, | |
| .interactive-log p { | |
| margin: 0; | |
| line-height: 1.4; | |
| } | |
| .interactive-message--assistant { | |
| border-left: 3px solid var(--accent-mint); | |
| } | |
| .interactive-message--user { | |
| border-left: 3px solid var(--accent-amber); | |
| } | |
| .interactive-panel__answer { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| gap: 10px; | |
| padding: 12px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .interactive-panel__input, | |
| .interactive-panel__select, | |
| .interactive-panel__role { | |
| width: 100%; | |
| box-sizing: border-box; | |
| border-radius: 8px; | |
| border: 1px solid var(--line-soft); | |
| background: var(--input-bg); | |
| color: var(--text); | |
| } | |
| .interactive-panel__input, | |
| .interactive-panel__select { | |
| padding: 10px 12px; | |
| } | |
| .interactive-panel__tools { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| gap: 10px; | |
| } | |
| .interactive-panel__save-log { | |
| width: 100%; | |
| justify-content: center; | |
| min-height: 42px; | |
| } | |
| .interactive-panel__role { | |
| padding: 10px 12px; | |
| resize: none; | |
| line-height: 1.35; | |
| } | |
| .interactive-panel__upload { | |
| display: grid; | |
| gap: 6px; | |
| padding: 10px 12px; | |
| border-radius: 10px; | |
| background: var(--card-bg); | |
| color: var(--muted); | |
| font-size: 0.82rem; | |
| } | |
| .interactive-panel__upload input { | |
| width: 100%; | |
| color: var(--text); | |
| } | |
| .interactive-panel__upload small { | |
| color: var(--text); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .interactive-panel__log-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .interactive-panel__link-button { | |
| border: none; | |
| background: transparent; | |
| color: var(--accent-sky); | |
| cursor: pointer; | |
| padding: 0; | |
| } | |
| .interactive-log { | |
| padding: 8px 10px; | |
| margin-bottom: 8px; | |
| font-size: 0.82rem; | |
| } | |
| .interactive-log--error { | |
| border-left: 3px solid var(--accent-coral); | |
| } | |
| .interactive-log--info { | |
| border-left: 3px solid var(--accent-sky); | |
| } | |
| .interactive-log--debug { | |
| border-left: 3px solid var(--muted); | |
| } | |
| .interactive-panel__empty { | |
| color: var(--muted); | |
| line-height: 1.45; | |
| } | |
| @media (max-width: 1080px) { | |
| .toolbar { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .toolbar__meta { | |
| justify-content: flex-start; | |
| } | |
| .app-shell__body { | |
| grid-template-columns: 1fr; | |
| } | |
| .palette { | |
| border-right: none; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .interactive-panel { | |
| grid-template-columns: 1fr; | |
| max-height: calc(100vh - 80px); | |
| } | |
| } | |