Spaces:
Running
Running
Claude
Claude Sonnet 5.5
feat(ui): teal + gold for the agent UI and the scored result
a520b27 unverified | .wrap { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| min-height: 0; | |
| height: 100%; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .wrapCard { | |
| min-height: min(72vh, 720px); | |
| max-height: calc(100vh - 220px); | |
| border-radius: var(--radius-xl, 16px); | |
| border: 1px solid var(--surface-glass-border, var(--border-subtle)); | |
| background: var(--surface-glass, var(--surface-card)); | |
| backdrop-filter: blur(14px); | |
| -webkit-backdrop-filter: blur(14px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .stage { | |
| display: flex; | |
| flex-direction: column; | |
| flex: 1; | |
| min-height: 0; | |
| height: 100%; | |
| } | |
| .messages { | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| padding: 12px 18px 8px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 100%); | |
| } | |
| .thread { | |
| position: relative; | |
| flex: 1; | |
| min-height: 0; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .jumpLatest { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| z-index: 3; | |
| min-height: 32px; | |
| padding: 0 14px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--text); | |
| font: inherit; | |
| font-size: 12px; | |
| font-weight: 650; | |
| box-shadow: var(--shadow-md, 0 8px 20px rgba(0, 0, 0, 0.18)); | |
| cursor: pointer; | |
| } | |
| .jumpLatest:hover { | |
| background: var(--surface-raised); | |
| } | |
| .rowUser { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .rowAgent { | |
| display: flex; | |
| justify-content: flex-start; | |
| } | |
| .bubbleUser { | |
| max-width: min(78%, 520px); | |
| padding: 10px 14px; | |
| border-radius: var(--radius-lg); | |
| background: var(--surface-raised); | |
| color: var(--text-display); | |
| font-size: 15px; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-subtle)); | |
| box-shadow: var(--shadow-xs); | |
| } | |
| .bubbleAgent { | |
| max-width: min(94%, 720px); | |
| padding: 4px 2px 8px; | |
| color: var(--text); | |
| font-size: 15px; | |
| line-height: 1.55; | |
| } | |
| .bubbleAgent a { | |
| color: var(--link); | |
| font-weight: 500; | |
| } | |
| .actionRow { | |
| margin-top: 10px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .actionPill { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 34px; | |
| padding: 0 12px; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--job-launcher-chip-on-border); | |
| background: var(--job-launcher-chip-on-bg); | |
| color: var(--job-launcher-chip-on-fg); | |
| font-size: 13px; | |
| font-weight: 650; | |
| text-decoration: none; | |
| transition: | |
| background var(--motion-xs) var(--ease-soft), | |
| border-color var(--motion-xs) var(--ease-soft), | |
| transform var(--motion-xs) var(--ease-soft); | |
| } | |
| .actionPill:hover { | |
| border-color: color-mix(in srgb, var(--accent) 55%, var(--job-launcher-chip-on-border)); | |
| background: color-mix(in srgb, var(--accent) 16%, var(--job-launcher-chip-on-bg)); | |
| transform: translateY(-1px); | |
| } | |
| .planCard { | |
| max-width: min(92%, 560px); | |
| padding: 14px 16px; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--text); | |
| font-size: 14px; | |
| line-height: 1.45; | |
| align-self: flex-start; | |
| box-shadow: var(--shadow-sm); | |
| border-left: 3px solid var(--accent); | |
| } | |
| .planCardLive { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .planCardLive::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 2px; | |
| width: 36%; | |
| pointer-events: none; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| var(--studio-accent-warm), | |
| var(--accent), | |
| transparent | |
| ); | |
| } | |
| .planCardCollapsed { | |
| max-width: min(92%, 560px); | |
| padding: 10px 14px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.45; | |
| align-self: flex-start; | |
| } | |
| .planTitle { | |
| font-size: 11px; | |
| font-weight: 650; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| margin-bottom: 10px; | |
| } | |
| .planList { | |
| margin: 0; | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| .planItem { | |
| display: flex; | |
| gap: 10px; | |
| align-items: flex-start; | |
| margin-bottom: 8px; | |
| font-size: 14px; | |
| } | |
| .planItem:last-child { | |
| margin-bottom: 0; | |
| } | |
| .planCheckOn, | |
| .planCheckOff { | |
| flex-shrink: 0; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| margin-top: 2px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| line-height: 1.25rem; | |
| text-align: center; | |
| } | |
| .planCheckOn { | |
| background: var(--success-bg); | |
| color: var(--success); | |
| } | |
| .planCheckOff { | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-raised); | |
| } | |
| .planStatusCell { | |
| flex-shrink: 0; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| margin-top: 2px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .planStatusDot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--border-subtle); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .planStatusPulse { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .planStatusDone { | |
| font-size: 12px; | |
| line-height: 1; | |
| color: var(--success); | |
| font-weight: 700; | |
| } | |
| .planStatusFail { | |
| font-size: 12px; | |
| line-height: 1; | |
| color: var(--danger); | |
| font-weight: 700; | |
| } | |
| .discoverEmptyWrap { | |
| margin-top: 12px; | |
| padding-top: 4px; | |
| } | |
| .discoverEmptyText { | |
| margin: 0 0 10px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| color: var(--text); | |
| } | |
| .discoverEmptyChips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .discoverEmptyChip { | |
| display: inline-flex; | |
| align-items: center; | |
| height: 34px; | |
| padding: 0 12px; | |
| border-radius: 999px; | |
| border: 1px solid var(--job-launcher-chip-on-border); | |
| background: var(--job-launcher-chip-on-bg); | |
| color: var(--job-launcher-chip-on-fg); | |
| font-size: 13px; | |
| font-weight: 650; | |
| cursor: pointer; | |
| transition: | |
| background var(--motion-xs) var(--ease-soft), | |
| border-color var(--motion-xs) var(--ease-soft); | |
| } | |
| .discoverEmptyChip:hover { | |
| border-color: color-mix(in srgb, var(--accent) 55%, var(--job-launcher-chip-on-border)); | |
| background: color-mix(in srgb, var(--accent) 16%, var(--job-launcher-chip-on-bg)); | |
| } | |
| .progressLine { | |
| max-width: min(92%, 560px); | |
| padding: 2px 2px 4px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.45; | |
| } | |
| .toolProgress { | |
| max-width: min(92%, 560px); | |
| width: fit-content; | |
| padding: 8px 12px; | |
| color: var(--text); | |
| font-size: 13px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-subtle)); | |
| background: color-mix(in srgb, var(--accent) 7%, var(--surface-card)); | |
| } | |
| .thinkingPresence { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| max-width: min(92%, 420px); | |
| padding: 12px 14px 11px; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-subtle)); | |
| background: | |
| linear-gradient( | |
| 180deg, | |
| color-mix(in srgb, var(--accent) 8%, var(--surface-card)), | |
| var(--surface-card) | |
| ); | |
| box-shadow: var(--shadow-xs); | |
| color: var(--text); | |
| font-size: 13.5px; | |
| font-weight: 600; | |
| } | |
| .thinkingPresenceTop { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-width: 0; | |
| } | |
| .thinkingRail { | |
| position: relative; | |
| height: 2px; | |
| border-radius: 2px; | |
| overflow: hidden; | |
| background: color-mix(in srgb, var(--accent) 14%, var(--surface-muted)); | |
| } | |
| .thinkingRail > span { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| width: 36%; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| var(--studio-accent-warm), | |
| var(--accent), | |
| transparent | |
| ); | |
| } | |
| .dotPulse { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| flex-shrink: 0; | |
| animation: agentDotPulse 1.1s ease-in-out infinite; | |
| } | |
| @keyframes agentDotPulse { | |
| 0%, | |
| 100% { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| 50% { | |
| opacity: 0.55; | |
| transform: scale(0.85); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .dotPulse { | |
| animation: none; | |
| } | |
| } | |
| .toolHint { | |
| font-size: 13px; | |
| color: var(--muted); | |
| line-height: 1.45; | |
| max-width: min(92%, 640px); | |
| } | |
| .toolHintError { | |
| color: var(--danger); | |
| } | |
| .subscribeGate { | |
| align-self: flex-start; | |
| margin: 0 0 4px; | |
| padding: 16px 18px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-raised); | |
| max-width: min(92%, 480px); | |
| } | |
| .subscribeGateTitle { | |
| font-size: 15px; | |
| font-weight: 650; | |
| color: var(--text); | |
| margin: 0 0 8px; | |
| line-height: 1.35; | |
| } | |
| .subscribeGateBody { | |
| font-size: 13px; | |
| color: var(--muted); | |
| line-height: 1.5; | |
| margin: 0 0 14px; | |
| } | |
| .subscribeGateFoot { | |
| font-size: 12px; | |
| color: var(--muted); | |
| margin: 10px 0 0; | |
| line-height: 1.4; | |
| } | |
| .subscribeGateBtn { | |
| min-height: 38px; | |
| padding: 0 18px; | |
| font-size: 14px; | |
| font-weight: 650; | |
| } | |
| .jobGrid { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| margin-top: 10px; | |
| } | |
| .jobCard { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| background: | |
| linear-gradient( | |
| 155deg, | |
| color-mix(in srgb, var(--surface-card) 94%, var(--studio-accent-cool, var(--accent)) 6%), | |
| var(--surface-card) | |
| ); | |
| padding: 16px; | |
| box-shadow: var(--shadow-xs); | |
| animation: jobCardEnter 0.55s var(--ease-out) both; | |
| transition: | |
| box-shadow var(--motion-sm) var(--ease-out), | |
| border-color var(--motion-xs) var(--ease-soft), | |
| transform var(--motion-sm) var(--ease-out); | |
| } | |
| /* Strong matches wear a gold seal: edge, glow and a gold-ringed score. Verdict stays green. */ | |
| .jobCard.jobCardStrong { | |
| border-color: color-mix(in srgb, var(--studio-accent-warm) 34%, var(--border-subtle)); | |
| background: | |
| radial-gradient(ellipse 70% 90% at 100% 0%, rgba(226, 179, 106, 0.1), transparent 65%), | |
| linear-gradient( | |
| 155deg, | |
| color-mix(in srgb, var(--surface-card) 94%, var(--studio-accent-cool, var(--accent)) 6%), | |
| var(--surface-card) | |
| ); | |
| box-shadow: | |
| inset 3px 0 0 var(--studio-accent-warm), | |
| 0 10px 30px -16px rgba(226, 179, 106, 0.45); | |
| } | |
| .jobCardStrong .matchScore { | |
| border-color: color-mix(in srgb, var(--studio-accent-warm) 55%, var(--border-subtle)); | |
| background: color-mix(in srgb, var(--studio-accent-warm) 10%, var(--surface-card)); | |
| box-shadow: 0 0 18px -6px rgba(226, 179, 106, 0.55); | |
| } | |
| .jobCardStrong .matchPercent { | |
| background: linear-gradient(95deg, var(--accent), var(--studio-accent-warm)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| -webkit-text-fill-color: transparent; | |
| padding-right: 0.08em; | |
| } | |
| @media (forced-colors: active) { | |
| .jobCardStrong .matchPercent { | |
| background: none; | |
| color: inherit; | |
| -webkit-text-fill-color: currentColor; | |
| } | |
| } | |
| .jobCard::after { | |
| content: ""; | |
| position: absolute; | |
| inset: 0; | |
| pointer-events: none; | |
| background: linear-gradient( | |
| 105deg, | |
| transparent 32%, | |
| rgba(226, 179, 106, 0.22) 46%, | |
| rgba(111, 212, 200, 0.28) 54%, | |
| transparent 68% | |
| ); | |
| transform: translateX(-130%); | |
| } | |
| @keyframes jobCardEnter { | |
| from { | |
| opacity: 0; | |
| transform: translateY(8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .jobCard, | |
| .jobCard::after { | |
| animation: none; | |
| } | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .jobCard:hover { | |
| box-shadow: var(--shadow-md); | |
| border-color: color-mix(in srgb, var(--accent) 22%, var(--border-subtle)); | |
| transform: translateY(-1px); | |
| } | |
| } | |
| .jobCardDimmed { | |
| opacity: 0.85; | |
| border-style: dashed; | |
| } | |
| .jobPreviewCaption { | |
| display: block; | |
| margin-top: 4px; | |
| font-size: 12px; | |
| line-height: 1.35; | |
| color: var(--muted); | |
| opacity: 0.95; | |
| } | |
| .jobCardHead { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .jobCardTitles { | |
| min-width: 0; | |
| flex: 1; | |
| } | |
| .jobTitle { | |
| display: block; | |
| font-weight: 680; | |
| font-size: 16px; | |
| line-height: 1.35; | |
| letter-spacing: -0.015em; | |
| color: var(--text-display); | |
| text-decoration: none; | |
| } | |
| .jobTitle:hover { | |
| text-decoration: underline; | |
| } | |
| .jobCompany { | |
| display: block; | |
| font-size: 13px; | |
| color: var(--muted); | |
| margin-top: 3px; | |
| } | |
| .jobCardHeadMeta { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| gap: 6px; | |
| flex-shrink: 0; | |
| } | |
| .matchScore { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-width: 56px; | |
| padding: 8px 9px 6px; | |
| border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-subtle)); | |
| border-radius: 12px; | |
| background: color-mix(in srgb, var(--accent) 7%, var(--surface-card)); | |
| } | |
| .matchPercent { | |
| font-size: 17px; | |
| font-weight: 700; | |
| letter-spacing: -0.04em; | |
| font-variant-numeric: tabular-nums; | |
| font-family: var(--font-mono); | |
| color: var(--text-display); | |
| line-height: 1; | |
| } | |
| .matchPercentLabel { | |
| margin-top: 3px; | |
| color: var(--muted); | |
| font-size: 9px; | |
| font-weight: 650; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .matchLimiter { | |
| margin: 0; | |
| padding: 9px 11px; | |
| border-radius: 10px; | |
| background: var(--surface-muted); | |
| font-size: 12px; | |
| line-height: 1.45; | |
| color: var(--text); | |
| } | |
| .jobSignalRow { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .jobSignal { | |
| display: inline-flex; | |
| } | |
| .adminSourceBadge { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 24px; | |
| padding: 2px 8px; | |
| border: 1px dashed color-mix(in srgb, var(--accent) 38%, var(--border-subtle)); | |
| border-radius: 999px; | |
| color: var(--accent); | |
| background: color-mix(in srgb, var(--accent) 5%, var(--surface-card)); | |
| font-family: var(--font-mono); | |
| font-size: 10px; | |
| font-weight: 600; | |
| } | |
| .verdictBadge { | |
| font-size: 11px; | |
| font-weight: 650; | |
| padding: 3px 8px; | |
| border-radius: 999px; | |
| flex-shrink: 0; | |
| } | |
| .scoreReadBadge { | |
| font-size: 11px; | |
| font-weight: 650; | |
| padding: 3px 8px; | |
| border-radius: 999px; | |
| flex-shrink: 0; | |
| } | |
| .scoreReadFull { | |
| background: color-mix(in srgb, var(--accent) 8%, var(--surface-card)); | |
| color: var(--text); | |
| border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-subtle)); | |
| } | |
| .scoreReadQuick { | |
| background: var(--surface-muted); | |
| color: var(--muted); | |
| border: 1px solid var(--border-subtle); | |
| } | |
| .verdictStrong { | |
| background: var(--success-bg); | |
| color: var(--success); | |
| border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); | |
| } | |
| .verdictPossible { | |
| background: var(--warning-bg); | |
| color: var(--warning); | |
| border: 1px solid color-mix(in srgb, var(--warning) 32%, transparent); | |
| } | |
| .verdictWeak { | |
| background: var(--danger-bg); | |
| color: var(--danger); | |
| border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); | |
| } | |
| .jobCardBars { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .dimRow { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .dimLabel { | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: var(--muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| font-family: var(--font-mono); | |
| } | |
| .jobCardActions { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| padding-top: 2px; | |
| border-top: 1px solid var(--border-subtle); | |
| } | |
| .jobOpenAction { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 34px; | |
| padding: 0 14px; | |
| border-radius: 8px; | |
| border: 1px solid transparent; | |
| background: var(--accent); | |
| color: var(--text-on-accent, white) ; | |
| font-size: 13px; | |
| font-weight: 650 ; | |
| text-decoration: none; | |
| letter-spacing: -0.01em; | |
| } | |
| .jobOpenAction:hover { | |
| filter: brightness(1.04); | |
| text-decoration: none; | |
| } | |
| .composer { | |
| border-top: 1px solid var(--border-subtle); | |
| padding: 12px 14px 14px; | |
| background: color-mix(in srgb, var(--surface-card) 78%, transparent); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| position: relative; | |
| } | |
| .composerRunning::before { | |
| content: ""; | |
| position: absolute; | |
| inset: -40% -20% auto; | |
| height: 120%; | |
| pointer-events: none; | |
| z-index: 0; | |
| background: radial-gradient( | |
| ellipse 70% 80% at 50% 100%, | |
| color-mix(in srgb, var(--accent) 18%, transparent), | |
| transparent 70% | |
| ); | |
| opacity: 0.9; | |
| } | |
| .composerRunning::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 2px; | |
| width: 32%; | |
| pointer-events: none; | |
| z-index: 2; | |
| background: linear-gradient(90deg, transparent, var(--studio-accent-warm), var(--accent), transparent); | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .composerRunning::before { | |
| animation: composerBloom 4.5s ease-in-out infinite alternate; | |
| } | |
| .composerRunning::after { | |
| animation: signalSweep 2.2s var(--ease-in-out) infinite; | |
| } | |
| } | |
| @keyframes composerBloom { | |
| from { | |
| opacity: 0.55; | |
| } | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .composer > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .suggestions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| /* Single-line chips: equal height regardless of label length, ellipsis + title tooltip. */ | |
| .suggestionChip { | |
| display: inline-flex; | |
| align-items: center; | |
| flex: 0 1 auto; | |
| height: 30px; | |
| max-width: min(100%, 22rem); | |
| padding: 0 12px; | |
| font-size: 12px; | |
| line-height: 1; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--text); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| transition: | |
| background var(--motion-xs) var(--ease-soft), | |
| border-color var(--motion-xs) var(--ease-soft); | |
| } | |
| .suggestionChip:hover { | |
| border-color: var(--job-launcher-chip-on-border); | |
| background: var(--surface-raised); | |
| transform: translateY(-2px); | |
| } | |
| .suggestionsRow { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 7px; | |
| min-width: 0; | |
| } | |
| .suggestionChipPrimary { | |
| border-color: var(--job-launcher-chip-on-border); | |
| background: var(--job-launcher-chip-on-bg); | |
| color: var(--job-launcher-chip-on-fg); | |
| font-weight: 600; | |
| } | |
| .suggestionChipPrimary:hover { | |
| border-color: color-mix(in srgb, var(--accent) 55%, var(--job-launcher-chip-on-border)); | |
| background: color-mix(in srgb, var(--accent) 16%, var(--job-launcher-chip-on-bg)); | |
| } | |
| .inputRow { | |
| display: flex; | |
| gap: 10px; | |
| align-items: flex-end; | |
| } | |
| .textarea { | |
| flex: 1; | |
| min-height: 44px; | |
| max-height: 160px; | |
| resize: none; | |
| overflow-y: auto; | |
| font-family: inherit; | |
| font-size: 15px; | |
| line-height: 1.45; | |
| padding: 11px 14px; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-input); | |
| color: var(--text); | |
| outline: none; | |
| transition: | |
| transform var(--motion-xs) var(--ease-out), | |
| border-color var(--motion-xs) var(--ease-soft), | |
| box-shadow var(--motion-xs) var(--ease-soft); | |
| } | |
| .textarea:focus { | |
| border-color: var(--link); | |
| box-shadow: var(--ring); | |
| transform: translateY(-1px); | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .textarea:focus { | |
| transform: none; | |
| } | |
| } | |
| .sendBtn { | |
| flex-shrink: 0; | |
| height: 44px; | |
| padding: 0 18px; | |
| font-weight: 650; | |
| transition: transform var(--motion-xs) var(--ease-out); | |
| } | |
| .sendBtn:active:not(:disabled) { | |
| transform: scale(0.97); | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .sendBtn:active:not(:disabled) { | |
| transform: none; | |
| } | |
| } | |
| .copySessionBtn { | |
| flex-shrink: 0; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| height: 44px; | |
| padding: 0 12px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--muted); | |
| background: var(--surface-muted); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-lg); | |
| cursor: pointer; | |
| transition: | |
| background var(--motion-xs) var(--ease-soft), | |
| border-color var(--motion-xs) var(--ease-soft); | |
| } | |
| .copySessionBtn:hover:not(:disabled) { | |
| background: var(--surface-raised); | |
| border-color: var(--border-strong, var(--border-subtle)); | |
| color: var(--text); | |
| } | |
| .copySessionBtn:disabled { | |
| opacity: 0.45; | |
| cursor: not-allowed; | |
| } | |
| .moreWrap { | |
| position: relative; | |
| flex-shrink: 0; | |
| } | |
| .moreBtn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 44px; | |
| height: 44px; | |
| padding: 0; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-muted); | |
| color: var(--text); | |
| font-size: 18px; | |
| font-weight: 650; | |
| line-height: 1; | |
| letter-spacing: 0.04em; | |
| cursor: pointer; | |
| } | |
| .moreBtn:hover { | |
| background: var(--surface-raised); | |
| color: var(--text-display); | |
| } | |
| .moreMenu { | |
| position: absolute; | |
| right: 0; | |
| bottom: calc(100% + 8px); | |
| z-index: 8; | |
| min-width: 196px; | |
| padding: 6px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--surface-glass-border, var(--border-subtle)); | |
| background: var(--surface-card); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .moreItem { | |
| display: block; | |
| width: 100%; | |
| text-align: left; | |
| padding: 10px 12px; | |
| border: 0; | |
| border-radius: 8px; | |
| background: transparent; | |
| color: var(--text); | |
| font: inherit; | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .moreItem:hover { | |
| background: var(--surface-muted); | |
| color: var(--text-display); | |
| } | |
| .copySessionLabel { | |
| display: none; | |
| } | |
| @media (min-width: 640px) { | |
| .copySessionLabel { | |
| display: inline; | |
| margin-left: 2px; | |
| } | |
| } | |
| /* Secondary/ghost action — must never compete with the primary Send button. */ | |
| .stopBtn { | |
| flex-shrink: 0; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| height: 44px; | |
| padding: 0 14px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--color-text-secondary, var(--muted)); | |
| background: transparent; | |
| border: 1px solid var(--color-border-strong, var(--border-subtle)); | |
| border-radius: var(--radius-lg); | |
| box-shadow: none; | |
| cursor: pointer; | |
| transition: | |
| background var(--motion-xs) var(--ease-soft), | |
| border-color var(--motion-xs) var(--ease-soft), | |
| color var(--motion-xs) var(--ease-soft); | |
| } | |
| .stopBtn:hover:not(:disabled) { | |
| background: transparent; | |
| border-color: color-mix(in srgb, var(--color-danger, var(--danger)) 45%, transparent); | |
| color: var(--color-danger, var(--danger)); | |
| } | |
| .stopBtn:disabled { | |
| opacity: 0.45; | |
| cursor: not-allowed; | |
| } | |
| .stopIcon { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 2px; | |
| background: currentColor; | |
| } | |
| .statusBar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12px; | |
| color: var(--muted); | |
| min-height: 16px; | |
| } | |
| .progressMeta { | |
| opacity: 0.75; | |
| } | |
| .contextStrip { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 8px 14px 0; | |
| flex-shrink: 0; | |
| } | |
| .contextChip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| max-width: 100%; | |
| margin: 0; | |
| padding: 6px 12px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--text); | |
| font: inherit; | |
| font-size: 12px; | |
| font-weight: 500; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .contextChip:hover { | |
| background: var(--surface-muted); | |
| } | |
| .contextChipLabel { | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .contextBody { | |
| padding: 0 14px 10px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| line-height: 1.45; | |
| } | |
| .emptyStage { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 220px; | |
| padding: 28px 16px 12px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .signalMark { | |
| position: relative; | |
| width: 72px; | |
| height: 86px; | |
| margin-bottom: 18px; | |
| filter: drop-shadow(0 10px 18px rgba(46, 168, 154, 0.22)); | |
| } | |
| .signalFacetLeft, | |
| .signalFacetRight, | |
| .signalFacetBase, | |
| .signalGlint { | |
| position: absolute; | |
| inset: 0; | |
| } | |
| .signalFacetLeft { | |
| background: #2ea89a; | |
| clip-path: polygon(50% 0, 0 51%, 50% 51%); | |
| } | |
| .signalFacetRight { | |
| background: #3dbeb0; | |
| clip-path: polygon(50% 0, 100% 51%, 50% 51%); | |
| } | |
| .signalFacetBase { | |
| background: #e2b36a; | |
| clip-path: polygon(0 51%, 100% 51%, 68.6% 100%); | |
| } | |
| .signalGlint { | |
| background: linear-gradient( | |
| 115deg, | |
| transparent 30%, | |
| rgba(255, 244, 220, 0.55) 48%, | |
| rgba(159, 229, 219, 0.35) 54%, | |
| transparent 70% | |
| ); | |
| mix-blend-mode: screen; | |
| clip-path: polygon(50% 0, 0 51%, 100% 51%, 68.6% 100%); | |
| opacity: 0.35; | |
| } | |
| .emptyPrompt { | |
| margin: 0; | |
| font-family: var(--font-display); | |
| font-size: clamp(1.45rem, 3.2vw, 2rem); | |
| font-weight: 550; | |
| letter-spacing: -0.03em; | |
| color: var(--text-display); | |
| } | |
| .emptyLead { | |
| margin: 10px 0 0; | |
| max-width: 28rem; | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| color: var(--muted); | |
| } | |
| .emptyStarters { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-top: 22px; | |
| max-width: 36rem; | |
| } | |
| .threadLive .messages { | |
| background: | |
| radial-gradient(ellipse 80% 28% at 50% 0%, rgba(61, 190, 176, 0.08), transparent 70%); | |
| } | |
| .threadLive::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| z-index: 2; | |
| pointer-events: none; | |
| background: linear-gradient( | |
| 90deg, | |
| transparent, | |
| var(--studio-accent-warm), | |
| var(--accent), | |
| transparent | |
| ); | |
| background-size: 40% 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .followUps { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| padding: 2px 2px 12px; | |
| } | |
| .scoreUrlBtn { | |
| flex-shrink: 0; | |
| height: 44px; | |
| padding: 0 14px; | |
| font-size: 13px; | |
| font-weight: 600; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--link); | |
| cursor: pointer; | |
| } | |
| .digestStatusBtn { | |
| flex-shrink: 0; | |
| margin: 0; | |
| padding: 6px 10px; | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 999px; | |
| text-align: left; | |
| font: inherit; | |
| font-size: 11px; | |
| font-weight: 500; | |
| line-height: 1.3; | |
| color: var(--muted); | |
| background: var(--surface-card); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| } | |
| .digestStatusBtn:hover { | |
| background: var(--surface-muted); | |
| color: var(--text); | |
| } | |
| .contextMeta { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px 16px; | |
| align-items: center; | |
| margin-top: 8px; | |
| } | |
| .savedChip { | |
| font-size: 12px; | |
| font-weight: 600; | |
| padding: 4px 10px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--link); | |
| cursor: pointer; | |
| } | |
| .savedChip:hover { | |
| text-decoration: underline; | |
| } | |
| .savedChip:disabled { | |
| opacity: 0.45; | |
| cursor: not-allowed; | |
| text-decoration: none; | |
| } | |
| .creditPill { | |
| font-size: 12px; | |
| color: var(--muted); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .skillsLine { | |
| margin-top: 6px; | |
| font-size: 12px; | |
| color: var(--text); | |
| } | |
| .batchCard { | |
| max-width: min(92%, 560px); | |
| padding: 16px 18px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-muted); | |
| color: var(--text); | |
| } | |
| .batchCardTitle { | |
| font-size: 16px; | |
| font-weight: 700; | |
| color: var(--text); | |
| margin-bottom: 10px; | |
| } | |
| .batchCardLink { | |
| display: block; | |
| word-break: break-all; | |
| font-size: 14px; | |
| font-weight: 500; | |
| color: var(--link); | |
| text-decoration: underline; | |
| margin-bottom: 10px; | |
| } | |
| .batchCardLink:hover { | |
| text-decoration: none; | |
| } | |
| .batchCardEta { | |
| margin: 0 0 14px; | |
| font-size: 14px; | |
| color: var(--muted); | |
| line-height: 1.45; | |
| } | |
| .batchCardActions { | |
| margin-bottom: 12px; | |
| } | |
| .batchCardBtn { | |
| font-size: 14px; | |
| padding: 8px 16px; | |
| } | |
| .batchCardChips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .batchFollowChip { | |
| font-size: 13px; | |
| font-weight: 600; | |
| padding: 6px 12px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--link); | |
| cursor: pointer; | |
| } | |
| .batchFollowChip:hover { | |
| border-color: var(--link); | |
| background: var(--surface-raised); | |
| } | |
| .inlineBatchCard { | |
| margin-top: 12px; | |
| padding: 12px 14px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-muted); | |
| } | |
| .inlineBatchTitle { | |
| font-size: 14px; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| color: var(--text); | |
| } | |
| .inlineBatchLink { | |
| display: block; | |
| word-break: break-all; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--link); | |
| margin-bottom: 8px; | |
| } | |
| .inlineBatchIdRow { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 10px; | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .inlineBatchIdLabel { | |
| font-weight: 600; | |
| } | |
| .inlineBatchId { | |
| font-size: 11px; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| background: var(--surface-card); | |
| border: 1px solid var(--border-subtle); | |
| color: var(--text); | |
| } | |
| .inlineBatchRow { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .inlineBatchViewBtn { | |
| font-size: 13px; | |
| padding: 6px 14px; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .inlineBatchReadyBtn { | |
| font-size: 13px; | |
| font-weight: 600; | |
| padding: 6px 12px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--link); | |
| cursor: pointer; | |
| } | |
| .inlineBatchReadyBtn:hover { | |
| border-color: var(--link); | |
| background: var(--surface-raised); | |
| } | |
| .activeRunBanner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 10px 14px; | |
| border-bottom: 1px solid var(--border-subtle); | |
| background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised)); | |
| font-size: 13px; | |
| color: var(--text); | |
| } | |
| .activeRunMain { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .activeRunActions { | |
| display: flex; | |
| gap: 8px; | |
| flex-shrink: 0; | |
| } | |
| .activeRunBtn { | |
| font-size: 12px; | |
| font-weight: 600; | |
| padding: 4px 10px; | |
| border-radius: 8px; | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--link); | |
| cursor: pointer; | |
| } | |
| .activeRunBtn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .debugRunId { | |
| padding: 4px 14px; | |
| font-size: 11px; | |
| color: var(--muted); | |
| font-family: ui-monospace, monospace; | |
| } | |
| @keyframes signalFloat { | |
| 0% { | |
| transform: translateY(0) scale(1); | |
| filter: drop-shadow(0 8px 14px rgba(46, 168, 154, 0.18)); | |
| } | |
| 100% { | |
| transform: translateY(-12px) scale(1.06); | |
| filter: drop-shadow(0 20px 28px rgba(226, 179, 106, 0.38)); | |
| } | |
| } | |
| @keyframes signalGlint { | |
| 0% { | |
| transform: translateX(-55%); | |
| opacity: 0; | |
| } | |
| 35% { | |
| opacity: 0.9; | |
| } | |
| 100% { | |
| transform: translateX(55%); | |
| opacity: 0; | |
| } | |
| } | |
| @keyframes signalSweep { | |
| 0% { | |
| transform: translateX(-120%); | |
| } | |
| 100% { | |
| transform: translateX(420%); | |
| } | |
| } | |
| @keyframes riseIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes bubbleFromUser { | |
| from { | |
| opacity: 0; | |
| transform: translateX(14px) translateY(6px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateX(0) translateY(0); | |
| } | |
| } | |
| @keyframes bubbleFromAgent { | |
| from { | |
| opacity: 0; | |
| transform: translateY(8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @keyframes signalSheen { | |
| from { | |
| transform: translateX(-130%); | |
| } | |
| to { | |
| transform: translateX(130%); | |
| } | |
| } | |
| @media (prefers-reduced-motion: no-preference) { | |
| .signalMark { | |
| animation: signalFloat 4.8s ease-in-out infinite alternate; | |
| } | |
| .signalGlint { | |
| animation: signalGlint 2.4s var(--ease-out) 0.2s infinite; | |
| } | |
| .emptyPrompt, | |
| .emptyLead { | |
| animation: riseIn 0.55s var(--ease-out) both; | |
| } | |
| .emptyLead { | |
| animation-delay: 0.08s; | |
| } | |
| .emptyStarters > * { | |
| animation: riseIn 0.5s var(--ease-out) both; | |
| } | |
| .emptyStarters > *:nth-child(1) { animation-delay: 0.12s; } | |
| .emptyStarters > *:nth-child(2) { animation-delay: 0.18s; } | |
| .emptyStarters > *:nth-child(3) { animation-delay: 0.24s; } | |
| .emptyStarters > *:nth-child(4) { animation-delay: 0.3s; } | |
| .emptyStarters > *:nth-child(5) { animation-delay: 0.36s; } | |
| .emptyStarters > *:nth-child(6) { animation-delay: 0.42s; } | |
| .threadLive::before { | |
| animation: signalSweep 2.4s var(--ease-in-out) infinite; | |
| } | |
| .rowUser { | |
| animation: bubbleFromUser 0.42s var(--ease-out) both; | |
| } | |
| .rowAgent { | |
| animation: bubbleFromAgent 0.46s var(--ease-out) both; | |
| } | |
| .jobCard::after { | |
| animation: signalSheen 0.95s var(--ease-out) 0.12s both; | |
| } | |
| .jobGrid > :nth-child(2) { animation-delay: 0.08s; } | |
| .jobGrid > :nth-child(3) { animation-delay: 0.16s; } | |
| .jobGrid > :nth-child(4) { animation-delay: 0.24s; } | |
| .jobGrid > :nth-child(5) { animation-delay: 0.32s; } | |
| .planItem { | |
| animation: riseIn 0.35s var(--ease-out) both; | |
| } | |
| .planItem:nth-child(2) { animation-delay: 0.05s; } | |
| .planItem:nth-child(3) { animation-delay: 0.1s; } | |
| .planItem:nth-child(4) { animation-delay: 0.15s; } | |
| .planItem:nth-child(5) { animation-delay: 0.2s; } | |
| .planStatusDone { | |
| animation: riseIn 0.28s var(--ease-out) both; | |
| } | |
| .planCardLive::after, | |
| .thinkingRail > span { | |
| animation: signalSweep 1.8s var(--ease-in-out) infinite; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .signalMark, | |
| .signalGlint, | |
| .emptyPrompt, | |
| .emptyLead, | |
| .emptyStarters > *, | |
| .threadLive::before, | |
| .rowUser, | |
| .rowAgent, | |
| .planItem, | |
| .planStatusDone, | |
| .planCardLive::after, | |
| .thinkingRail > span, | |
| .composerRunning::after, | |
| .suggestionChip:hover { | |
| animation: none; | |
| transform: none; | |
| } | |
| } | |