Spaces:
Running
Running
| .wrap { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: min(72vh, 720px); | |
| max-height: calc(100vh - 220px); | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| box-shadow: var(--shadow-xs); | |
| overflow: hidden; | |
| } | |
| .messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 20px 18px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 14px; | |
| } | |
| .rowUser { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .rowAgent { | |
| display: flex; | |
| justify-content: flex-start; | |
| } | |
| .bubbleUser { | |
| max-width: min(92%, 560px); | |
| padding: 12px 16px; | |
| border-radius: 18px 18px 4px 18px; | |
| background: var(--accent); | |
| color: #fff; | |
| font-size: 15px; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| } | |
| .bubbleAgent { | |
| max-width: min(92%, 640px); | |
| padding: 14px 16px; | |
| border-radius: 18px 18px 18px 4px; | |
| background: var(--surface-raised); | |
| border: 1px solid var(--border-subtle); | |
| 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: 999px; | |
| border: 1px solid rgba(37, 99, 235, 0.35); | |
| background: rgba(37, 99, 235, 0.12); | |
| color: #dbeafe; | |
| 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: rgba(37, 99, 235, 0.6); | |
| background: rgba(37, 99, 235, 0.18); | |
| transform: translateY(-1px); | |
| } | |
| .planCard { | |
| max-width: min(92%, 560px); | |
| padding: 14px 16px; | |
| border-radius: var(--radius-md); | |
| 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-xs); | |
| } | |
| .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: rgba(34, 197, 94, 0.2); | |
| color: rgb(22, 163, 74); | |
| } | |
| .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: rgb(22, 163, 74); | |
| 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 rgba(37, 99, 235, 0.35); | |
| background: rgba(37, 99, 235, 0.12); | |
| color: #dbeafe; | |
| 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: rgba(37, 99, 235, 0.6); | |
| background: rgba(37, 99, 235, 0.18); | |
| } | |
| .progressLine { | |
| max-width: min(92%, 520px); | |
| padding: 8px 12px; | |
| border-radius: var(--radius-md); | |
| border-left: 3px solid var(--accent); | |
| background: var(--surface-muted); | |
| color: var(--muted); | |
| font-size: 13px; | |
| line-height: 1.45; | |
| } | |
| .toolProgress { | |
| max-width: min(92%, 520px); | |
| padding: 10px 14px; | |
| border-radius: var(--radius-md); | |
| background: var(--surface-muted); | |
| color: var(--muted); | |
| font-size: 13px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .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 { | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| padding: 12px 14px; | |
| } | |
| .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: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .jobCardTitles { | |
| min-width: 0; | |
| flex: 1; | |
| } | |
| .jobTitle { | |
| font-weight: 600; | |
| font-size: 14px; | |
| color: var(--text); | |
| text-decoration: none; | |
| } | |
| .jobTitle:hover { | |
| text-decoration: underline; | |
| } | |
| .jobCompany { | |
| display: block; | |
| font-size: 12px; | |
| color: var(--muted); | |
| margin-top: 2px; | |
| } | |
| .verdictBadge { | |
| font-size: 11px; | |
| font-weight: 650; | |
| padding: 3px 8px; | |
| border-radius: 999px; | |
| flex-shrink: 0; | |
| } | |
| .verdictStrong { | |
| background: var(--success-bg); | |
| color: var(--success); | |
| } | |
| .verdictPossible { | |
| background: var(--warning-bg); | |
| color: var(--warning); | |
| } | |
| .verdictWeak { | |
| background: var(--danger-bg); | |
| color: var(--danger); | |
| } | |
| .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.06em; | |
| } | |
| .jobCardActions { | |
| margin-top: 12px; | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .composer { | |
| border-top: 1px solid var(--border-subtle); | |
| padding: 12px 14px 14px; | |
| background: var(--surface-muted); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .suggestions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .suggestionChip { | |
| font-size: 12px; | |
| padding: 6px 11px; | |
| border-radius: 999px; | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-card); | |
| color: var(--text); | |
| cursor: pointer; | |
| transition: | |
| background var(--motion-xs) var(--ease-soft), | |
| border-color var(--motion-xs) var(--ease-soft); | |
| } | |
| .suggestionChip:hover { | |
| border-color: rgba(37, 99, 235, 0.35); | |
| background: var(--surface-raised); | |
| } | |
| .suggestionsRow { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 7px; | |
| } | |
| .suggestionChipPrimary { | |
| border-color: rgba(37, 99, 235, 0.3); | |
| background: rgba(37, 99, 235, 0.07); | |
| color: var(--link); | |
| font-weight: 600; | |
| } | |
| .suggestionChipPrimary:hover { | |
| border-color: rgba(37, 99, 235, 0.55); | |
| background: rgba(37, 99, 235, 0.12); | |
| } | |
| .inputRow { | |
| display: flex; | |
| gap: 10px; | |
| align-items: flex-end; | |
| } | |
| .textarea { | |
| flex: 1; | |
| min-height: 44px; | |
| max-height: 160px; | |
| resize: none; | |
| 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; | |
| } | |
| .textarea:focus { | |
| border-color: var(--link); | |
| box-shadow: var(--ring); | |
| } | |
| .sendBtn { | |
| flex-shrink: 0; | |
| height: 44px; | |
| padding: 0 18px; | |
| font-weight: 650; | |
| } | |
| .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; | |
| } | |
| .copySessionLabel { | |
| display: none; | |
| } | |
| @media (min-width: 640px) { | |
| .copySessionLabel { | |
| display: inline; | |
| margin-left: 2px; | |
| } | |
| } | |
| .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: 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); | |
| } | |
| .stopBtn:hover:not(:disabled) { | |
| background: var(--surface-raised); | |
| border-color: var(--border-strong, var(--border-subtle)); | |
| color: var(--text); | |
| } | |
| .stopBtn:disabled { | |
| opacity: 0.45; | |
| cursor: not-allowed; | |
| } | |
| .stopIcon { | |
| display: inline-block; | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 2px; | |
| background: currentColor; | |
| } | |
| .statusBar { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12px; | |
| color: var(--muted); | |
| min-height: 16px; | |
| } | |
| .progressMeta { | |
| opacity: 0.75; | |
| } | |
| .contextStrip { | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border-subtle); | |
| background: var(--surface-raised); | |
| border-left: 3px solid var(--accent); | |
| margin-bottom: 14px; | |
| overflow: hidden; | |
| } | |
| .digestStatusBtn { | |
| display: block; | |
| width: 100%; | |
| margin: 0; | |
| padding: 8px 14px 12px; | |
| border: none; | |
| border-top: 1px solid var(--border-subtle); | |
| text-align: left; | |
| font: inherit; | |
| font-size: 12px; | |
| line-height: 1.45; | |
| color: var(--muted); | |
| background: transparent; | |
| cursor: pointer; | |
| } | |
| .digestStatusBtn:hover { | |
| background: var(--surface-muted); | |
| color: var(--text); | |
| } | |
| .contextToggle { | |
| width: 100%; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| padding: 12px 14px; | |
| text-align: left; | |
| font: inherit; | |
| color: var(--text); | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| .contextToggle:hover { | |
| background: var(--surface-muted); | |
| } | |
| .contextBody { | |
| padding: 0 14px 14px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| line-height: 1.45; | |
| } | |
| .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); | |
| } | |