Spaces:
Configuration error
Configuration error
| @import './chat.css'; | |
| /* =========================================== | |
| Cards - Refined with depth | |
| =========================================== */ | |
| .card { | |
| border: 1px solid var(--border); | |
| background: var(--card); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| animation: rise 0.35s var(--ease-out) backwards; | |
| transition: | |
| border-color var(--duration-normal) var(--ease-out), | |
| box-shadow var(--duration-normal) var(--ease-out), | |
| transform var(--duration-normal) var(--ease-out); | |
| box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-highlight); | |
| } | |
| .card:hover { | |
| border-color: var(--border-strong); | |
| box-shadow: var(--shadow-md), inset 0 1px 0 var(--card-highlight); | |
| } | |
| .card-title { | |
| font-size: 15px; | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| color: var(--text-strong); | |
| } | |
| .card-sub { | |
| color: var(--muted); | |
| font-size: 13px; | |
| margin-top: 6px; | |
| line-height: 1.5; | |
| } | |
| /* =========================================== | |
| Stats - Bold values, subtle labels | |
| =========================================== */ | |
| .stat { | |
| background: var(--card); | |
| border-radius: var(--radius-md); | |
| padding: 14px 16px; | |
| border: 1px solid var(--border); | |
| transition: | |
| border-color var(--duration-normal) var(--ease-out), | |
| box-shadow var(--duration-normal) var(--ease-out); | |
| box-shadow: inset 0 1px 0 var(--card-highlight); | |
| } | |
| .stat:hover { | |
| border-color: var(--border-strong); | |
| box-shadow: var(--shadow-sm), inset 0 1px 0 var(--card-highlight); | |
| } | |
| .stat-label { | |
| color: var(--muted); | |
| font-size: 11px; | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .stat-value { | |
| font-size: 24px; | |
| font-weight: 700; | |
| margin-top: 6px; | |
| letter-spacing: -0.03em; | |
| line-height: 1.1; | |
| } | |
| .stat-value.ok { | |
| color: var(--ok); | |
| } | |
| .stat-value.warn { | |
| color: var(--warn); | |
| } | |
| .stat-card { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .note-title { | |
| font-weight: 600; | |
| letter-spacing: -0.01em; | |
| } | |
| /* =========================================== | |
| Status List | |
| =========================================== */ | |
| .status-list { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .status-list div { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 8px 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .status-list div:last-child { | |
| border-bottom: none; | |
| } | |
| .account-count { | |
| margin-top: 10px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--muted); | |
| } | |
| .account-card-list { | |
| margin-top: 16px; | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .account-card { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 12px; | |
| background: var(--bg-elevated); | |
| transition: border-color var(--duration-fast) ease; | |
| } | |
| .account-card:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .account-card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| gap: 12px; | |
| } | |
| .account-card-title { | |
| font-weight: 500; | |
| } | |
| .account-card-id { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .account-card-status { | |
| margin-top: 10px; | |
| font-size: 13px; | |
| } | |
| .account-card-status div { | |
| padding: 4px 0; | |
| } | |
| .account-card-error { | |
| margin-top: 8px; | |
| color: var(--danger); | |
| font-size: 12px; | |
| } | |
| /* =========================================== | |
| Labels & Pills | |
| =========================================== */ | |
| .label { | |
| color: var(--muted); | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| border: 1px solid var(--border); | |
| padding: 6px 12px; | |
| border-radius: var(--radius-full); | |
| background: var(--secondary); | |
| font-size: 13px; | |
| font-weight: 500; | |
| transition: border-color var(--duration-fast) ease; | |
| } | |
| .pill:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .pill.danger { | |
| border-color: var(--danger-subtle); | |
| background: var(--danger-subtle); | |
| color: var(--danger); | |
| } | |
| /* =========================================== | |
| Theme Toggle | |
| =========================================== */ | |
| .theme-toggle { | |
| --theme-item: 28px; | |
| --theme-gap: 2px; | |
| --theme-pad: 4px; | |
| position: relative; | |
| } | |
| .theme-toggle__track { | |
| position: relative; | |
| display: grid; | |
| grid-template-columns: repeat(3, var(--theme-item)); | |
| gap: var(--theme-gap); | |
| padding: var(--theme-pad); | |
| border-radius: var(--radius-full); | |
| border: 1px solid var(--border); | |
| background: var(--secondary); | |
| } | |
| .theme-toggle__indicator { | |
| position: absolute; | |
| top: 50%; | |
| left: var(--theme-pad); | |
| width: var(--theme-item); | |
| height: var(--theme-item); | |
| border-radius: var(--radius-full); | |
| transform: translateY(-50%) | |
| translateX(calc(var(--theme-index, 0) * (var(--theme-item) + var(--theme-gap)))); | |
| background: var(--accent); | |
| transition: transform var(--duration-normal) var(--ease-out); | |
| z-index: 0; | |
| } | |
| .theme-toggle__button { | |
| height: var(--theme-item); | |
| width: var(--theme-item); | |
| display: grid; | |
| place-items: center; | |
| border: 0; | |
| border-radius: var(--radius-full); | |
| background: transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| position: relative; | |
| z-index: 1; | |
| transition: color var(--duration-fast) ease; | |
| } | |
| .theme-toggle__button:hover { | |
| color: var(--text); | |
| } | |
| .theme-toggle__button.active { | |
| color: var(--accent-foreground); | |
| } | |
| .theme-toggle__button.active .theme-icon { | |
| stroke: var(--accent-foreground); | |
| } | |
| .theme-icon { | |
| width: 14px; | |
| height: 14px; | |
| stroke: currentColor; | |
| fill: none; | |
| stroke-width: 1.5px; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| } | |
| /* =========================================== | |
| Status Dot - With glow for emphasis | |
| =========================================== */ | |
| .statusDot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: var(--radius-full); | |
| background: var(--danger); | |
| box-shadow: 0 0 8px rgba(239, 68, 68, 0.5); | |
| animation: pulse-subtle 2s ease-in-out infinite; | |
| } | |
| .statusDot.ok { | |
| background: var(--ok); | |
| box-shadow: 0 0 8px rgba(34, 197, 94, 0.5); | |
| animation: none; | |
| } | |
| /* =========================================== | |
| Buttons - Tactile with personality | |
| =========================================== */ | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| border: 1px solid var(--border); | |
| background: var(--bg-elevated); | |
| padding: 9px 16px; | |
| border-radius: var(--radius-md); | |
| font-size: 13px; | |
| font-weight: 500; | |
| letter-spacing: -0.01em; | |
| cursor: pointer; | |
| transition: | |
| border-color var(--duration-fast) var(--ease-out), | |
| background var(--duration-fast) var(--ease-out), | |
| box-shadow var(--duration-fast) var(--ease-out), | |
| transform var(--duration-fast) var(--ease-out); | |
| } | |
| .btn:hover { | |
| background: var(--bg-hover); | |
| border-color: var(--border-strong); | |
| transform: translateY(-1px); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .btn:active { | |
| background: var(--secondary); | |
| transform: translateY(0); | |
| box-shadow: none; | |
| } | |
| .btn svg { | |
| width: 16px; | |
| height: 16px; | |
| stroke: currentColor; | |
| fill: none; | |
| stroke-width: 1.5px; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| flex-shrink: 0; | |
| } | |
| .btn.primary { | |
| border-color: var(--accent); | |
| background: var(--accent); | |
| color: var(--primary-foreground); | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .btn.primary:hover { | |
| background: var(--accent-hover); | |
| border-color: var(--accent-hover); | |
| box-shadow: var(--shadow-md), 0 0 20px var(--accent-glow); | |
| } | |
| /* Keyboard shortcut badge (shadcn style) */ | |
| .btn-kbd { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-left: 6px; | |
| padding: 2px 5px; | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| font-weight: 500; | |
| line-height: 1; | |
| border-radius: 4px; | |
| background: rgba(255, 255, 255, 0.15); | |
| color: inherit; | |
| opacity: 0.8; | |
| } | |
| .btn.primary .btn-kbd { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| :root[data-theme="light"] .btn-kbd { | |
| background: rgba(0, 0, 0, 0.08); | |
| } | |
| :root[data-theme="light"] .btn.primary .btn-kbd { | |
| background: rgba(255, 255, 255, 0.25); | |
| } | |
| .btn.active { | |
| border-color: var(--accent); | |
| background: var(--accent-subtle); | |
| color: var(--accent); | |
| } | |
| .btn.danger { | |
| border-color: transparent; | |
| background: var(--danger-subtle); | |
| color: var(--danger); | |
| } | |
| .btn.danger:hover { | |
| background: rgba(239, 68, 68, 0.15); | |
| } | |
| .btn--sm { | |
| padding: 6px 10px; | |
| font-size: 12px; | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| /* =========================================== | |
| Form Fields | |
| =========================================== */ | |
| .field { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .field.full { | |
| grid-column: 1 / -1; | |
| } | |
| .field span { | |
| color: var(--muted); | |
| font-size: 13px; | |
| font-weight: 500; | |
| } | |
| .field input, | |
| .field textarea, | |
| .field select { | |
| border: 1px solid var(--input); | |
| background: var(--card); | |
| border-radius: var(--radius-md); | |
| padding: 8px 12px; | |
| outline: none; | |
| box-shadow: inset 0 1px 0 var(--card-highlight); | |
| transition: | |
| border-color var(--duration-fast) ease, | |
| box-shadow var(--duration-fast) ease; | |
| } | |
| .field input:focus, | |
| .field textarea:focus, | |
| .field select:focus { | |
| border-color: var(--ring); | |
| box-shadow: var(--focus-ring); | |
| } | |
| .field select { | |
| appearance: none; | |
| padding-right: 36px; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 10px center; | |
| cursor: pointer; | |
| } | |
| .field textarea { | |
| font-family: var(--mono); | |
| min-height: 160px; | |
| resize: vertical; | |
| white-space: pre; | |
| line-height: 1.5; | |
| } | |
| .field.checkbox { | |
| grid-template-columns: auto 1fr; | |
| align-items: center; | |
| } | |
| .config-form .field.checkbox { | |
| grid-template-columns: 18px minmax(0, 1fr); | |
| column-gap: 10px; | |
| } | |
| .config-form .field.checkbox input[type="checkbox"] { | |
| margin: 0; | |
| width: 16px; | |
| height: 16px; | |
| accent-color: var(--accent); | |
| } | |
| .form-grid { | |
| display: grid; | |
| gap: 12px; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| } | |
| :root[data-theme="light"] .field input, | |
| :root[data-theme="light"] .field textarea, | |
| :root[data-theme="light"] .field select { | |
| background: var(--card); | |
| border-color: var(--input); | |
| } | |
| :root[data-theme="light"] .btn { | |
| background: var(--bg); | |
| border-color: var(--input); | |
| } | |
| :root[data-theme="light"] .btn:hover { | |
| background: var(--bg-hover); | |
| } | |
| :root[data-theme="light"] .btn.primary { | |
| background: var(--accent); | |
| border-color: var(--accent); | |
| } | |
| /* =========================================== | |
| Utilities | |
| =========================================== */ | |
| .muted { | |
| color: var(--muted); | |
| } | |
| .mono { | |
| font-family: var(--mono); | |
| } | |
| /* =========================================== | |
| Callouts - Informative with subtle depth | |
| =========================================== */ | |
| .callout { | |
| padding: 14px 16px; | |
| border-radius: var(--radius-md); | |
| background: var(--secondary); | |
| border: 1px solid var(--border); | |
| font-size: 13px; | |
| line-height: 1.5; | |
| position: relative; | |
| } | |
| .callout.danger { | |
| border-color: rgba(239, 68, 68, 0.25); | |
| background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%); | |
| color: var(--danger); | |
| } | |
| .callout.info { | |
| border-color: rgba(59, 130, 246, 0.25); | |
| background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%); | |
| color: var(--info); | |
| } | |
| .callout.success { | |
| border-color: rgba(34, 197, 94, 0.25); | |
| background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(34, 197, 94, 0.04) 100%); | |
| color: var(--ok); | |
| } | |
| /* Compaction indicator */ | |
| .compaction-indicator { | |
| font-size: 13px; | |
| padding: 10px 12px; | |
| margin-bottom: 8px; | |
| animation: fade-in 0.2s var(--ease-out); | |
| } | |
| .compaction-indicator--active { | |
| animation: compaction-pulse 1.5s ease-in-out infinite; | |
| } | |
| .compaction-indicator--complete { | |
| animation: fade-in 0.2s var(--ease-out); | |
| } | |
| @keyframes compaction-pulse { | |
| 0%, 100% { | |
| opacity: 0.7; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| } | |
| /* =========================================== | |
| Code Blocks | |
| =========================================== */ | |
| .code-block { | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| line-height: 1.5; | |
| background: var(--secondary); | |
| padding: 12px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| max-height: 360px; | |
| overflow: auto; | |
| max-width: 100%; | |
| } | |
| :root[data-theme="light"] .code-block, | |
| :root[data-theme="light"] .list-item, | |
| :root[data-theme="light"] .table-row, | |
| :root[data-theme="light"] .chip { | |
| background: var(--bg); | |
| } | |
| /* =========================================== | |
| Lists | |
| =========================================== */ | |
| .list { | |
| display: grid; | |
| gap: 8px; | |
| container-type: inline-size; | |
| } | |
| .list-item { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); | |
| gap: 16px; | |
| align-items: start; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 12px; | |
| background: var(--card); | |
| transition: border-color var(--duration-fast) ease; | |
| } | |
| .list-item-clickable { | |
| cursor: pointer; | |
| } | |
| .list-item-clickable:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .list-item-selected { | |
| border-color: var(--accent); | |
| box-shadow: var(--focus-ring); | |
| } | |
| .list-main { | |
| display: grid; | |
| gap: 4px; | |
| min-width: 0; | |
| } | |
| .list-title { | |
| font-weight: 500; | |
| } | |
| .list-sub { | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| .list-meta { | |
| text-align: right; | |
| color: var(--muted); | |
| font-size: 12px; | |
| display: grid; | |
| gap: 4px; | |
| min-width: 200px; | |
| } | |
| .list-meta .btn { | |
| padding: 6px 10px; | |
| } | |
| .list-meta .field input, | |
| .list-meta .field textarea, | |
| .list-meta .field select { | |
| width: 100%; | |
| } | |
| @container (max-width: 560px) { | |
| .list-item { | |
| grid-template-columns: 1fr; | |
| } | |
| .list-meta { | |
| min-width: 0; | |
| text-align: left; | |
| } | |
| } | |
| /* =========================================== | |
| Chips - Compact and punchy | |
| =========================================== */ | |
| .chip-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .chip { | |
| font-size: 12px; | |
| font-weight: 500; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-full); | |
| padding: 5px 12px; | |
| color: var(--muted); | |
| background: var(--secondary); | |
| transition: | |
| border-color var(--duration-fast) var(--ease-out), | |
| background var(--duration-fast) var(--ease-out), | |
| transform var(--duration-fast) var(--ease-out); | |
| } | |
| .chip:hover { | |
| border-color: var(--border-strong); | |
| transform: translateY(-1px); | |
| } | |
| .chip input { | |
| margin-right: 6px; | |
| } | |
| .chip-ok { | |
| color: var(--ok); | |
| border-color: rgba(34, 197, 94, 0.3); | |
| background: var(--ok-subtle); | |
| } | |
| .chip-warn { | |
| color: var(--warn); | |
| border-color: rgba(245, 158, 11, 0.3); | |
| background: var(--warn-subtle); | |
| } | |
| /* =========================================== | |
| Tables | |
| =========================================== */ | |
| .table { | |
| display: grid; | |
| gap: 6px; | |
| } | |
| .table-head, | |
| .table-row { | |
| display: grid; | |
| grid-template-columns: 1.4fr 1fr 0.8fr 0.7fr 0.8fr 0.8fr 0.8fr 0.8fr 0.6fr; | |
| gap: 12px; | |
| align-items: center; | |
| } | |
| .table-head { | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--muted); | |
| padding: 0 12px; | |
| } | |
| .table-row { | |
| border: 1px solid var(--border); | |
| padding: 10px 12px; | |
| border-radius: var(--radius-md); | |
| background: var(--card); | |
| transition: border-color var(--duration-fast) ease; | |
| } | |
| .table-row:hover { | |
| border-color: var(--border-strong); | |
| } | |
| .session-link { | |
| text-decoration: none; | |
| color: var(--accent); | |
| font-weight: 500; | |
| } | |
| .session-link:hover { | |
| text-decoration: underline; | |
| } | |
| /* =========================================== | |
| Log Stream | |
| =========================================== */ | |
| .log-stream { | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| background: var(--card); | |
| max-height: 500px; | |
| overflow: auto; | |
| container-type: inline-size; | |
| } | |
| .log-row { | |
| display: grid; | |
| grid-template-columns: 90px 70px minmax(140px, 200px) minmax(0, 1fr); | |
| gap: 12px; | |
| align-items: start; | |
| padding: 8px 12px; | |
| border-bottom: 1px solid var(--border); | |
| font-size: 12px; | |
| transition: background var(--duration-fast) ease; | |
| } | |
| .log-row:hover { | |
| background: var(--bg-hover); | |
| } | |
| .log-row:last-child { | |
| border-bottom: none; | |
| } | |
| .log-time { | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| } | |
| .log-level { | |
| font-size: 11px; | |
| font-weight: 500; | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-sm); | |
| padding: 2px 6px; | |
| width: fit-content; | |
| } | |
| .log-level.trace, | |
| .log-level.debug { | |
| color: var(--muted); | |
| } | |
| .log-level.info { | |
| color: var(--info); | |
| border-color: rgba(59, 130, 246, 0.3); | |
| } | |
| .log-level.warn { | |
| color: var(--warn); | |
| border-color: var(--warn-subtle); | |
| } | |
| .log-level.error, | |
| .log-level.fatal { | |
| color: var(--danger); | |
| border-color: var(--danger-subtle); | |
| } | |
| .log-chip.trace, | |
| .log-chip.debug { | |
| color: var(--muted); | |
| } | |
| .log-chip.info { | |
| color: var(--info); | |
| border-color: rgba(59, 130, 246, 0.3); | |
| } | |
| .log-chip.warn { | |
| color: var(--warn); | |
| border-color: var(--warn-subtle); | |
| } | |
| .log-chip.error, | |
| .log-chip.fatal { | |
| color: var(--danger); | |
| border-color: var(--danger-subtle); | |
| } | |
| .log-subsystem { | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| } | |
| .log-message { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| font-family: var(--mono); | |
| } | |
| @container (max-width: 620px) { | |
| .log-row { | |
| grid-template-columns: 70px 60px minmax(0, 1fr); | |
| } | |
| .log-subsystem { | |
| display: none; | |
| } | |
| } | |
| /* =========================================== | |
| Chat | |
| =========================================== */ | |
| .chat { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 0; | |
| } | |
| .shell--chat .chat { | |
| flex: 1; | |
| } | |
| .chat-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-end; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .chat-header__left { | |
| display: flex; | |
| align-items: flex-end; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| min-width: 0; | |
| } | |
| .chat-header__right { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .chat-session { | |
| min-width: 240px; | |
| } | |
| .chat-thread { | |
| margin-top: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| flex: 1; | |
| min-height: 0; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| padding: 16px 12px; | |
| min-width: 0; | |
| border-radius: 0; | |
| border: none; | |
| background: transparent; | |
| } | |
| /* Chat queue */ | |
| .chat-queue { | |
| margin-top: 12px; | |
| padding: 12px; | |
| border-radius: var(--radius-lg); | |
| border: 1px solid var(--border); | |
| background: var(--card); | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .chat-queue__title { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--muted); | |
| } | |
| .chat-queue__list { | |
| display: grid; | |
| gap: 8px; | |
| } | |
| .chat-queue__item { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) auto; | |
| align-items: start; | |
| gap: 12px; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-md); | |
| border: 1px dashed var(--border-strong); | |
| background: var(--secondary); | |
| } | |
| .chat-queue__text { | |
| color: var(--chat-text); | |
| font-size: 13px; | |
| line-height: 1.45; | |
| white-space: pre-wrap; | |
| overflow: hidden; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| } | |
| .chat-queue__remove { | |
| align-self: start; | |
| padding: 4px 10px; | |
| font-size: 12px; | |
| line-height: 1; | |
| } | |
| /* Chat lines */ | |
| .chat-line { | |
| display: flex; | |
| } | |
| .chat-line.user { | |
| justify-content: flex-end; | |
| } | |
| .chat-line.assistant, | |
| .chat-line.other { | |
| justify-content: flex-start; | |
| } | |
| .chat-msg { | |
| display: grid; | |
| gap: 6px; | |
| max-width: min(700px, 82%); | |
| } | |
| .chat-line.user .chat-msg { | |
| justify-items: end; | |
| } | |
| /* Chat bubbles */ | |
| .chat-bubble { | |
| border: 1px solid transparent; | |
| background: var(--card); | |
| border-radius: var(--radius-lg); | |
| padding: 10px 14px; | |
| min-width: 0; | |
| } | |
| :root[data-theme="light"] .chat-bubble { | |
| border-color: var(--border); | |
| background: var(--bg); | |
| } | |
| .chat-line.user .chat-bubble { | |
| border-color: transparent; | |
| background: var(--accent-subtle); | |
| } | |
| :root[data-theme="light"] .chat-line.user .chat-bubble { | |
| border-color: rgba(234, 88, 12, 0.2); | |
| background: rgba(251, 146, 60, 0.12); | |
| } | |
| .chat-line.assistant .chat-bubble { | |
| border-color: transparent; | |
| background: var(--secondary); | |
| } | |
| :root[data-theme="light"] .chat-line.assistant .chat-bubble { | |
| border-color: var(--border); | |
| background: var(--bg-muted); | |
| } | |
| @keyframes chatStreamPulse { | |
| 0%, 100% { | |
| border-color: var(--border); | |
| } | |
| 50% { | |
| border-color: var(--accent); | |
| } | |
| } | |
| .chat-bubble.streaming { | |
| animation: chatStreamPulse 1.5s ease-in-out infinite; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .chat-bubble.streaming { | |
| animation: none; | |
| border-color: var(--accent); | |
| } | |
| } | |
| /* Reading indicator */ | |
| .chat-bubble.chat-reading-indicator { | |
| width: fit-content; | |
| padding: 10px 16px; | |
| } | |
| .chat-reading-indicator__dots { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| height: 12px; | |
| } | |
| .chat-reading-indicator__dots > span { | |
| display: inline-block; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: var(--radius-full); | |
| background: var(--muted); | |
| opacity: 0.6; | |
| transform: translateY(0); | |
| animation: chatReadingDot 1.2s ease-in-out infinite; | |
| will-change: transform, opacity; | |
| } | |
| .chat-reading-indicator__dots > span:nth-child(2) { | |
| animation-delay: 0.15s; | |
| } | |
| .chat-reading-indicator__dots > span:nth-child(3) { | |
| animation-delay: 0.3s; | |
| } | |
| @keyframes chatReadingDot { | |
| 0%, 80%, 100% { | |
| opacity: 0.4; | |
| transform: translateY(0); | |
| } | |
| 40% { | |
| opacity: 1; | |
| transform: translateY(-3px); | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| .chat-reading-indicator__dots > span { | |
| animation: none; | |
| opacity: 0.6; | |
| } | |
| } | |
| /* Chat text */ | |
| .chat-text { | |
| overflow-wrap: anywhere; | |
| word-break: break-word; | |
| color: var(--chat-text); | |
| line-height: 1.5; | |
| } | |
| .chat-text :where(p, ul, ol, pre, blockquote, table) { | |
| margin: 0; | |
| } | |
| .chat-text :where(p + p, p + ul, p + ol, p + pre, p + blockquote, p + table) { | |
| margin-top: 0.75em; | |
| } | |
| .chat-text :where(ul, ol) { | |
| padding-left: 1.2em; | |
| } | |
| .chat-text :where(li + li) { | |
| margin-top: 0.25em; | |
| } | |
| .chat-text :where(a) { | |
| color: var(--accent); | |
| } | |
| .chat-text :where(a:hover) { | |
| text-decoration: underline; | |
| } | |
| .chat-text :where(blockquote) { | |
| border-left: 2px solid var(--border-strong); | |
| padding-left: 12px; | |
| color: var(--muted); | |
| } | |
| .chat-text :where(hr) { | |
| border: 0; | |
| border-top: 1px solid var(--border); | |
| margin: 1em 0; | |
| } | |
| .chat-text :where(code) { | |
| font-family: var(--mono); | |
| font-size: 0.9em; | |
| } | |
| .chat-text :where(:not(pre) > code) { | |
| padding: 0.15em 0.35em; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border); | |
| background: var(--secondary); | |
| } | |
| :root[data-theme="light"] .chat-text :where(:not(pre) > code) { | |
| background: var(--bg-muted); | |
| } | |
| .chat-text :where(pre) { | |
| margin-top: 0.75em; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| background: var(--secondary); | |
| overflow: auto; | |
| } | |
| :root[data-theme="light"] .chat-text :where(pre) { | |
| background: var(--bg-muted); | |
| } | |
| .chat-text :where(pre code) { | |
| font-size: 12px; | |
| white-space: pre; | |
| } | |
| .chat-text :where(table) { | |
| margin-top: 0.75em; | |
| border-collapse: collapse; | |
| width: 100%; | |
| font-size: 13px; | |
| } | |
| .chat-text :where(th, td) { | |
| border: 1px solid var(--border); | |
| padding: 6px 10px; | |
| vertical-align: top; | |
| } | |
| .chat-text :where(th) { | |
| font-family: var(--mono); | |
| font-weight: 500; | |
| color: var(--muted); | |
| background: var(--secondary); | |
| } | |
| /* Tool cards */ | |
| .chat-tool-card { | |
| margin-top: 8px; | |
| padding: 10px 12px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| background: var(--secondary); | |
| display: grid; | |
| gap: 4px; | |
| } | |
| :root[data-theme="light"] .chat-tool-card { | |
| background: var(--bg-muted); | |
| } | |
| .chat-tool-card__title { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| font-weight: 500; | |
| color: var(--text); | |
| } | |
| .chat-tool-card__detail { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| color: var(--muted); | |
| } | |
| .chat-tool-card__details { | |
| margin-top: 6px; | |
| } | |
| .chat-tool-card__summary { | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| color: var(--muted); | |
| cursor: pointer; | |
| list-style: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .chat-tool-card__summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .chat-tool-card__summary-meta { | |
| color: var(--muted); | |
| opacity: 0.7; | |
| } | |
| .chat-tool-card__details[open] .chat-tool-card__summary { | |
| color: var(--text); | |
| } | |
| .chat-tool-card__output { | |
| margin-top: 8px; | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| line-height: 1.5; | |
| white-space: pre-wrap; | |
| color: var(--chat-text); | |
| padding: 8px 10px; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| background: var(--card); | |
| } | |
| :root[data-theme="light"] .chat-tool-card__output { | |
| background: var(--bg); | |
| } | |
| .chat-stamp { | |
| font-size: 11px; | |
| color: var(--muted); | |
| } | |
| .chat-line.user .chat-stamp { | |
| text-align: right; | |
| } | |
| /* Chat compose */ | |
| .chat-compose { | |
| margin-top: 12px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .shell--chat .chat-compose { | |
| position: sticky; | |
| bottom: 0; | |
| z-index: 5; | |
| margin-top: 0; | |
| padding-top: 12px; | |
| background: linear-gradient(180deg, transparent 0%, var(--bg) 40%); | |
| } | |
| .shell--chat-focus .chat-compose { | |
| bottom: calc(var(--shell-pad) + 8px); | |
| padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); | |
| border-bottom-left-radius: var(--radius-lg); | |
| border-bottom-right-radius: var(--radius-lg); | |
| } | |
| .chat-compose__field { | |
| gap: 4px; | |
| } | |
| .chat-compose__field textarea { | |
| min-height: 72px; | |
| padding: 10px 14px; | |
| border-radius: var(--radius-lg); | |
| resize: vertical; | |
| white-space: pre-wrap; | |
| font-family: var(--font-body); | |
| line-height: 1.5; | |
| border: 1px solid var(--input); | |
| background: var(--card); | |
| box-shadow: inset 0 1px 0 var(--card-highlight); | |
| transition: | |
| border-color var(--duration-fast) ease, | |
| box-shadow var(--duration-fast) ease; | |
| } | |
| .chat-compose__field textarea:focus { | |
| border-color: var(--ring); | |
| box-shadow: var(--focus-ring); | |
| } | |
| .chat-compose__field textarea:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .chat-compose__actions { | |
| justify-content: flex-end; | |
| align-self: end; | |
| } | |
| @media (max-width: 900px) { | |
| .chat-session { | |
| min-width: 180px; | |
| } | |
| .chat-compose { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* =========================================== | |
| QR Code | |
| =========================================== */ | |
| .qr-wrap { | |
| margin-top: 16px; | |
| border-radius: var(--radius-md); | |
| background: var(--card); | |
| border: 1px dashed var(--border-strong); | |
| padding: 16px; | |
| display: inline-flex; | |
| } | |
| .qr-wrap img { | |
| width: 160px; | |
| height: 160px; | |
| border-radius: var(--radius-sm); | |
| image-rendering: pixelated; | |
| } | |
| /* =========================================== | |
| Exec Approval Modal | |
| =========================================== */ | |
| .exec-approval-overlay { | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(4px); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| z-index: 200; | |
| } | |
| .exec-approval-card { | |
| width: min(540px, 100%); | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: 20px; | |
| animation: scale-in 0.2s var(--ease-out); | |
| } | |
| .exec-approval-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| } | |
| .exec-approval-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| } | |
| .exec-approval-sub { | |
| color: var(--muted); | |
| font-size: 13px; | |
| margin-top: 4px; | |
| } | |
| .exec-approval-queue { | |
| font-size: 11px; | |
| font-weight: 500; | |
| color: var(--muted); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-full); | |
| padding: 4px 10px; | |
| } | |
| .exec-approval-command { | |
| margin-top: 12px; | |
| padding: 10px 12px; | |
| background: var(--secondary); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| word-break: break-word; | |
| white-space: pre-wrap; | |
| font-family: var(--mono); | |
| font-size: 13px; | |
| } | |
| .exec-approval-meta { | |
| margin-top: 12px; | |
| display: grid; | |
| gap: 6px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .exec-approval-meta-row { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .exec-approval-meta-row span:last-child { | |
| color: var(--text); | |
| font-family: var(--mono); | |
| } | |
| .exec-approval-error { | |
| margin-top: 10px; | |
| font-size: 13px; | |
| color: var(--danger); | |
| } | |
| .exec-approval-actions { | |
| margin-top: 16px; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |