[data-mantine-color-scheme="dark"] {
    --app-bg: rgb(25, 26, 28);
    --app-bg-titlebar: rgb(25, 26, 28);
    --app-bg-deep: #141517;
    --app-bg-surface: rgba(255, 255, 255, 0.02);
    --app-bg-subtle: rgba(255, 255, 255, 0.04);
    --app-bg-faint: rgba(255, 255, 255, 0.03);
    --app-bg-elevated: rgb(25, 26, 28);
    --app-bg-overlay: #2c2e33;
    --app-bg-widget: rgb(30, 31, 34);
    --app-bg-terminal: #0d1117;
    --app-bg-inset: rgba(0, 0, 0, 0.2);
    --app-bg-chrome: rgb(37, 39, 42);
    --app-hover: rgba(255, 255, 255, 0.06);
    --app-text: #c2c2c2;
    --app-text-bright: #e1e3e5;
    --app-text-muted: #a0a0a0;
    --app-text-dimmed: #5c5f66;
    --app-text-secondary: #8b8d91;
    --app-text-on-accent: #fff;
    --app-border: #373a40;
    --app-border-subtle: rgba(55, 58, 64, 0.5);
    --app-border-widget: #4a4540;
    --app-accent: #388bfd;
    --app-accent-hover: #2d7bf0;
    --app-accent-bg: rgba(56, 139, 253, 0.15);
    --app-error: #fa5252;
    --app-error-bg: rgba(224, 49, 49, 0.15);
    --app-success: #2ea043;
    --app-success-bright: #51cf66;
    --app-success-bg: rgba(34, 197, 94, 0.08);
    --app-success-border: rgba(34, 197, 94, 0.2);
    --app-warning: #fab005;
    --app-warning-bg: #4c3a1a;
    --app-diff-added-bg: rgba(46, 160, 67, 0.15);
    --app-diff-added-text: #7ee787;
    --app-diff-removed-bg: rgba(248, 81, 73, 0.15);
    --app-diff-removed-text: #ffa198;
    --app-log-info: #868e96;
    --app-log-warn: #fab005;
    --app-log-error: #fa5252;
    --app-log-warn-bg: rgba(250, 176, 5, 0.06);
    --app-log-error-bg: rgba(250, 82, 82, 0.06);
    --app-log-error-detail-bg: rgba(250, 82, 82, 0.08);
    --app-log-data-bg: rgba(134, 142, 150, 0.06);
    --app-shadow: rgba(0, 0, 0, 0.4);
    --app-overlay: rgba(0, 0, 0, 0.85);
}
[data-mantine-color-scheme="light"] {
    --app-bg: #f7f8fa;
    --app-bg-titlebar: #f7f8fa;
    --app-bg-deep: #f1f3f5;
    --app-bg-surface: rgba(0, 0, 0, 0.02);
    --app-bg-subtle: rgba(0, 0, 0, 0.03);
    --app-bg-faint: rgba(0, 0, 0, 0.02);
    --app-bg-elevated: #ffffff;
    --app-bg-overlay: #ffffff;
    --app-bg-widget: #f1f3f5;
    --app-bg-terminal: #fafbfc;
    --app-bg-inset: rgba(0, 0, 0, 0.04);
    --app-bg-chrome: rgb(234, 235, 240);
    --app-hover: rgba(0, 0, 0, 0.04);
    --app-text: #343a40;
    --app-text-bright: #1a1b1e;
    --app-text-muted: #6e7681;
    --app-text-dimmed: #868e96;
    --app-text-secondary: #6e7681;
    --app-text-on-accent: #fff;
    --mantine-color-dimmed: #6e7681;
    --app-border: #e9ecef;
    --app-border-subtle: rgba(0, 0, 0, 0.06);
    --app-border-widget: #e9ecef;
    --app-accent: #1c7ed6;
    --app-accent-hover: #1971c2;
    --app-accent-bg: rgba(28, 126, 214, 0.08);
    --app-error: #e03131;
    --app-error-bg: rgba(224, 49, 49, 0.08);
    --app-success: #2b8a3e;
    --app-success-bright: #37b24d;
    --app-success-bg: rgba(34, 197, 94, 0.06);
    --app-success-border: rgba(34, 197, 94, 0.15);
    --app-warning: #f08c00;
    --app-warning-bg: #fef3e2;
    --app-diff-added-bg: rgba(46, 160, 67, 0.2);
    --app-diff-added-text: #116329;
    --app-diff-removed-bg: rgba(248, 81, 73, 0.2);
    --app-diff-removed-text: #82071e;
    --app-log-info: #868e96;
    --app-log-warn: #f08c00;
    --app-log-error: #e03131;
    --app-log-warn-bg: rgba(240, 140, 0, 0.06);
    --app-log-error-bg: rgba(224, 49, 49, 0.06);
    --app-log-error-detail-bg: rgba(224, 49, 49, 0.08);
    --app-log-data-bg: rgba(134, 142, 150, 0.06);
    --app-shadow: rgba(0, 0, 0, 0.08);
    --app-overlay: rgba(0, 0, 0, 0.6);
}
body {
    background-color: var(--app-bg);
    color: var(--app-text);
}
.titlebar {
    -webkit-app-region: drag;
    app-region: drag;
    height: 44px;
    flex-shrink: 0;
    background-color: var(--app-bg-titlebar);
}
.repository-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.repository-titlebar-name {
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.repository-titlebar-label {
    all: unset;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text);
    padding: 2px 6px;
    border-radius: 4px;
}
.repository-titlebar-label:hover {
    background: var(--app-hover);
}
.repository-titlebar-input {
    all: unset;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--app-hover);
    border: 1px solid var(--app-border);
}
.repository-titlebar-right {
    display: flex;
    align-items: center;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.repository-titlebar-settings {
    all: unset;
    -webkit-app-region: no-drag;
    app-region: no-drag;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    margin-right: 18px;
    border-radius: 4px;
    color: var(--app-text-muted);
}
.repository-titlebar-settings:hover {
    color: var(--app-text);
    background: var(--app-hover);
}
.repository-titlebar-settings + .repository-titlebar-admin {
    margin-left: -9px;
}
.repository-titlebar-admin {
    position: relative;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.repository-titlebar-admin-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 160px;
    z-index: 100;
    box-shadow: 0 4px 12px var(--app-shadow);
}
.repository-titlebar-admin-menu-item {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--app-text);
    transition: background-color 0.15s;
}
.repository-titlebar-admin-menu-item:hover:not(:disabled) {
    background: var(--app-accent-bg);
}
.repository-titlebar-admin-menu-item:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
.list-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.list-titlebar-title {
    -webkit-app-region: no-drag;
    app-region: no-drag;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text);
}
.list-titlebar-right {
    display: flex;
    align-items: center;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.list-titlebar-actions {
    -webkit-app-region: no-drag;
    app-region: no-drag;
    margin-right: 16px;
    display: flex;
    align-items: center;
}
.window-controls {
    display: flex;
    align-items: stretch;
    height: 44px;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.window-controls-btn {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 44px;
    color: var(--app-text);
    transition: background-color 0.1s;
}
.window-controls-btn:hover {
    background: var(--app-hover);
}
.window-controls-close:hover {
    background: var(--app-error);
    color: var(--app-text-on-accent);
}
.repository-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}
[data-mantine-color-scheme="light"] .mantine-Button-root:disabled,
[data-mantine-color-scheme="light"] .mantine-ActionIcon-root:disabled {
    background-color: transparent;
}
.repository-titlebar {
    background-color: var(--app-bg-chrome);
}
.repository-body {
    gap: 6px;
    padding: 0 7px 6px;
    background-color: var(--app-bg-chrome);
}
.repository-body > .tab-bar-vertical {
    --app-bg: var(--app-bg-elevated);
    border-right: none;
    border-radius: 10px;
    background-color: var(--app-bg);
    overflow: hidden;
}
.repository-body > .tab-content-area {
    --app-bg: var(--app-bg-elevated);
    border-radius: 10px;
    background-color: var(--app-bg);
    overflow: hidden;
}
@media (min-width: 1140px) {
    .setup-content-area {
        align-items: center;
        padding: 48px 24px;
        background-color: var(--app-bg-deep);
    }
    .setup-content-area .demo-content-row {
        width: 100%;
        max-width: 900px;
    }
    .setup-content-area .tab-content-pane {
        width: 100%;
        border: 1px solid var(--app-border);
        border-radius: 12px;
    }
}
.tab-bar-item {
    all: unset;
    cursor: pointer;
    font-size: 14px;
    color: var(--app-text);
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    transition:
        background-color 0.15s,
        color 0.15s,
        border-color 0.15s;
}
.tab-bar-item:hover {
    background: var(--app-hover);
    color: var(--app-text);
}
.tab-bar-item-active {
    background: var(--app-accent-bg);
    color: var(--app-text);
}
.tab-bar-item-primary {
    font-weight: 400;
    color: var(--app-text-bright);
    align-items: center;
}
.tab-bar-primary-indicator {
    color: var(--app-accent);
    flex-shrink: 0;
    margin-top: -1px;
}
.tab-indicator-wrapper {
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-top: 5px;
}
.tab-indicator-idle {
    color: var(--app-text-muted);
    flex-shrink: 0;
}
.tab-indicator-busy {
    color: var(--app-success);
    flex-shrink: 0;
}
.tab-indicator-blocked {
    color: var(--app-error);
    flex-shrink: 0;
}
.tab-indicator-idle-prompt {
    color: var(--app-warning) !important;
    flex-shrink: 0;
}
.tab-indicator-permission {
    color: var(--app-error) !important;
    flex-shrink: 0;
}
.tab-bar-item-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    border-radius: 4px;
    position: relative;
    min-width: 0;
}
.tab-bar-item-dragging {
    opacity: 0.5;
}
.tab-bar-item-draggable {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}
.tab-bar-item-draggable:active {
    cursor: grabbing;
}
.tab-bar-item-text-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.tab-bar-item-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.tab-bar-item-status {
    font-size: 11px;
    color: var(--app-text-dimmed);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tab-bar-item-status--secondary {
    font-size: 10px;
    color: var(--app-text-dimmed);
}
.tab-bar-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 12px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.tab-bar-item-wrapper:hover .tab-bar-item-actions,
.tab-bar-item-actions:has([data-expanded="true"]) {
    opacity: 1;
}
.tab-bar-menu-btn {
    color: var(--app-text-muted);
    flex-shrink: 0;
    transition: color 0.15s;
}
.tab-bar-menu-btn:hover {
    color: var(--app-accent);
}
.tab-bar-close-btn {
    color: var(--app-text-dimmed);
    flex-shrink: 0;
    background: transparent !important;
    transition: color 0.15s;
}
.tab-bar-close-btn:hover {
    color: var(--app-text);
    background: transparent !important;
}
.tab-bar-item-actions--visible {
    opacity: 1;
}
.model-override-badge {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 4px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 1;
    color: var(--app-text-muted);
    background: #ffffff0f;
    transition:
        background 0.15s,
        color 0.15s;
    flex-shrink: 0;
    max-width: 120px;
}
.model-override-badge:hover {
    background: #ffffff1f;
    color: var(--app-accent);
}
[data-mantine-color-scheme="light"] .model-override-badge {
    background: #0000000f;
}
[data-mantine-color-scheme="light"] .model-override-badge:hover {
    background: #0000001a;
}
.model-override-badge-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tab-bar-vertical {
    display: flex;
    flex-direction: column;
    width: 270px;
    flex-shrink: 0;
    padding: 0;
    border-right: 1px solid var(--app-border);
    background-color: var(--app-bg);
}
.tab-bar-agent-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
.tab-bar-vertical .tab-bar-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}
.tab-bar-vertical .tab-bar-item-wrapper {
    border-radius: 6px;
    margin: 1px 8px;
}
.tab-bar-list > div:first-child {
    margin-top: 8px;
}
.tab-bar-home-section > .tab-bar-item-wrapper:has(.tab-bar-item-primary) {
    height: 40px;
    margin: 0;
    border-radius: 0;
    padding-left: 8px;
}
.tab-bar-home-section {
    border-bottom: 1px solid var(--app-border);
}
.tab-bar-vertical .tab-bar-item-wrapper:hover {
    background: var(--app-hover);
}
.tab-bar-vertical .tab-bar-item-wrapper:hover .tab-bar-item {
    background: transparent;
}
.tab-bar-vertical .tab-bar-item-wrapper-active {
    background: var(--app-accent-bg);
}
.tab-bar-vertical .tab-bar-item-wrapper-active .tab-bar-item {
    background: transparent;
}
.tab-bar-vertical .tab-bar-item {
    flex: 1;
    padding: 6px 8px 6px 10px;
    border-radius: 6px;
    text-align: left;
    overflow: hidden;
}
.tab-bar-vertical .tab-bar-item:not(.tab-bar-item-primary):not(.tab-bar-subtab) {
    padding-left: 10px;
}
.tab-bar-agent-section-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.tab-bar-role-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}
.tab-bar-role-group:last-child {
    margin-bottom: 0;
}
.tab-bar-role-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 2px;
}
.tab-bar-role-label {
    padding: 0 12px 0 11px;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.05em;
    -webkit-user-select: none;
    user-select: none;
}
.tab-bar-group-menu-btn {
    opacity: 0;
    transition: opacity 0.15s;
    margin-right: 20px;
    flex-shrink: 0;
}
.tab-bar-role-label-row:hover .tab-bar-group-menu-btn,
.tab-bar-group-menu-btn:has([data-expanded="true"]) {
    opacity: 1;
}
.tab-bar-list > :not(.tab-bar-role-group) + .tab-bar-role-group,
.tab-bar-list > .tab-bar-role-group:first-child {
    margin-top: 18px;
}
.tab-bar-list > :not(.tab-bar-role-group) + .tab-bar-role-group .tab-bar-role-label,
.tab-bar-list > .tab-bar-role-group:first-child .tab-bar-role-label {
    padding-top: 6px;
}
.tab-bar-subtab-wrapper {
    padding-left: 24px;
}
.tab-bar-subtab {
    font-size: 13px;
    color: var(--app-text-secondary);
}
.tab-bar-subtab:hover {
    color: var(--app-text);
}
.tab-bar-vertical .tab-bar-subtab-wrapper {
    padding-left: 12px;
}
.tab-bar-vertical .tab-bar-subtab-wrapper.tab-bar-item-wrapper-active {
    background: var(--app-accent-bg);
}
.tab-bar-vertical .tab-bar-subtab-wrapper.tab-bar-item-wrapper-active .tab-bar-item {
    background: transparent;
}
.tab-bar-vertical .tab-bar-subtab {
    padding: 6px 10px 6px 20px;
    gap: 4px;
}
.form-footer {
    flex-shrink: 0;
    padding: 12px 0;
    border-top: 1px solid var(--app-border);
}
.mantine-Tabs-tab[data-orientation="vertical"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.tab-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background-color: var(--app-bg);
}
.tab-content-pane {
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background-color: var(--app-bg);
}
.demo-content-row {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.demo-content-row > .demo-content-panes {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.demo-sidebar {
    position: relative;
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--app-bg-elevated);
    border-radius: 0 10px 10px 0;
    border-left: 1px solid var(--app-border-subtle);
    overflow: hidden;
}
.demo-sidebar-close {
    position: absolute;
    top: 6px;
    right: 7px;
    z-index: 1;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--app-text-dimmed);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}
.demo-sidebar-close:hover {
    background-color: var(--app-bg-hover);
    color: var(--app-text);
}
.demo-sidebar-log {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.demo-sidebar-empty {
    color: var(--app-text-dimmed);
    font-size: 12px;
    text-align: center;
    padding: 32px 12px;
}
.demo-sidebar-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    transition: background-color 0.15s ease;
}
.demo-sidebar-entry-clickable {
    cursor: pointer;
}
.demo-sidebar-entry-clickable:hover {
    background-color: var(--app-bg-hover);
}
.demo-sidebar-entry-icon {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
}
.demo-sidebar-entry-message {
    color: var(--app-text);
    font-weight: 400;
    line-height: 18px;
}
.demo-sidebar-entry-time {
    color: var(--app-text-dimmed);
    font-size: 11px;
}
.demo-sidebar-close-tab-btn {
    all: unset;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    padding: 4px 0;
    border-radius: 4px;
    color: var(--app-text-secondary);
    background: var(--app-bg-subtle);
    transition: background-color 0.15s ease;
}
.demo-sidebar-close-tab-btn:hover {
    background: var(--app-hover);
}
.demo-sidebar-entry-details {
    margin-top: 4px;
}
.demo-sidebar-entry-details summary {
    color: var(--app-text-dimmed);
    font-size: 11px;
    cursor: pointer;
}
.demo-sidebar-entry-json {
    font-size: 10px;
    color: var(--app-text-muted);
    background-color: var(--app-bg-inset);
    border-radius: 4px;
    padding: 4px 6px;
    margin-top: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 120px;
    overflow-y: auto;
}
.demo-sidebar-prompt {
    padding: 8px 12px;
    border-left: 2px solid var(--app-warning);
}
.demo-sidebar-prompt-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.demo-sidebar-prompt-icon {
    color: var(--app-warning);
    flex-shrink: 0;
}
.demo-sidebar-prompt-tab-name {
    all: unset;
    font-size: 12px;
    font-weight: 600;
    color: var(--app-text);
    cursor: pointer;
}
.demo-sidebar-prompt-tab-name:hover {
    text-decoration: underline;
}
.demo-sidebar-prompt-summary {
    font-size: 12px;
    color: var(--app-text);
    margin-bottom: 8px;
    line-height: 18px;
    word-break: break-word;
}
.demo-sidebar-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.demo-sidebar-prompt-btn {
    all: unset;
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 0;
    border-radius: 4px;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        opacity 0.15s ease;
}
.demo-sidebar-prompt-btn-deny {
    color: var(--app-text-secondary);
    background: var(--app-bg-subtle);
}
.demo-sidebar-prompt-btn-deny:hover {
    background: var(--app-bg-hover);
}
.demo-sidebar-prompt-btn-always {
    color: var(--app-text);
    background: transparent;
    border: 1px solid var(--app-border-subtle);
}
.demo-sidebar-prompt-btn-always:hover {
    background: var(--app-bg-hover);
}
.demo-sidebar-prompt-btn-allow {
    color: #fff;
    background: var(--app-green, #22c55e);
}
.demo-sidebar-prompt-btn-allow:hover {
    opacity: 0.9;
}
.completion-banner {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--app-success-bg);
    border-bottom: 1px solid var(--app-success-border);
    flex-shrink: 0;
}
.dashboard {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--app-bg);
}
.dashboard-control-bar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 41px;
    padding-left: 8px;
    border-bottom: 1px solid var(--app-border);
}
.dashboard-button-group .mantine-Button-root {
    padding: 4px 10px;
    border-radius: 6px !important;
    height: auto;
    outline: none !important;
    box-shadow: none !important;
    color: var(--app-text);
    font-weight: 400;
    font-size: 14px;
    --button-hover: var(--app-hover);
}
.dashboard-button-group .mantine-Button-root:hover {
    background: var(--app-hover);
}
.dashboard-stepper-section {
    flex-shrink: 0;
    margin: 16px 20px 20px;
    padding: 16px 16px 8px;
    border: 1px solid var(--app-border);
    border-radius: 6px;
}
.dashboard-issues-section {
    flex-shrink: 0;
    margin-bottom: 16px;
    padding: 0 32px;
    overflow-x: auto;
}
.dashboard-issues {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.dashboard-issues th,
.dashboard-issues td {
    text-align: left;
    padding: 6px 12px;
    border-bottom: 1px solid var(--app-border-subtle);
}
.dashboard-issues th {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--mantine-color-dimmed);
}
.dashboard-issues tbody tr:hover {
    background: var(--app-hover);
}
.dashboard-guide-panels--empty {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 32px !important;
}
.dashboard-guide-hint {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 14px 10px 23px;
    background: var(--app-bg-surface);
}
.dashboard-guide-hint + .dashboard-agent-card {
    border-top: 1px solid var(--app-border);
}
.dashboard-guide-empty--full {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    background: var(--app-bg-surface);
    border: 1px solid var(--mantine-color-blue-8);
    border-radius: var(--mantine-radius-md);
}
.dashboard-human-review-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px -16px -16px;
    padding: 12px 16px;
    border-radius: 0 0 5px 5px;
    background: var(--app-hover);
    border-top: 1px solid var(--app-border);
}
.dashboard-agents-section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: 0;
    padding: 0 20px;
}
.dashboard-role-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dashboard-role-label {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.05em;
    -webkit-user-select: none;
    user-select: none;
}
.dashboard-role-group {
    margin-bottom: 16px;
}
.dashboard-role-group:last-child {
    margin-bottom: 16px;
}
.dashboard-cards-container {
    position: relative;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    overflow: hidden;
}
.dashboard-agent-card {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto;
    align-items: center;
    column-gap: 20px;
    width: 100%;
    min-height: 82px;
    padding: 12px 14px 12px 23px;
    background: var(--app-bg-surface);
    transition: background-color 0.15s;
}
.dashboard-agent-card + .dashboard-agent-card {
    border-top: 1px solid var(--app-border);
}
.dashboard-agent-card--compact {
    min-height: unset;
    height: 36px;
    padding: 0 14px;
}
.dashboard-queue-preview-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 38px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    background: var(--app-bg-surface);
}
.dashboard-queue-preview-header:hover {
    background: var(--app-hover);
}
.dashboard-queue-preview-items .dashboard-agent-card {
    padding-left: 22px;
    padding-right: 11px;
    border-top: 1px solid var(--app-border);
}
.dashboard-queue-preview + .dashboard-agent-card {
    border-top: 1px solid var(--app-border);
}
.dashboard-human-review-cards .dashboard-agent-card {
    border-left: 3px solid var(--app-accent);
    padding-left: 11px;
}
.dashboard-agent-card:hover {
    background: var(--app-hover);
}
.dashboard-agent-card-text {
    flex: 1;
    min-width: 0;
}
.dashboard-card-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.dashboard-card-shell-info {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: var(--app-text-muted);
}
.dashboard-card-shell-cwd {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-card-shell-cwd--secondary {
    flex: 0 1 auto;
    color: var(--app-text-secondary);
    font-size: 11px;
    text-align: right;
}
.dashboard-card-issue-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-card-shell-branch {
    flex-shrink: 0;
    white-space: nowrap;
}
.dashboard-card-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.dashboard-add-section {
    margin-top: 16px;
}
.dashboard-add-agent {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 14px;
    line-height: 1;
    color: var(--app-text-muted);
    border-radius: 6px;
    border: 1px dashed var(--app-border);
    transition:
        background-color 0.15s,
        color 0.15s,
        border-color 0.15s;
}
.dashboard-add-agent:hover {
    background: var(--app-hover);
    color: var(--app-text);
    border-color: var(--app-border);
}
.terminal-status-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 41px;
    background-color: var(--app-bg);
    border-top: 1px solid var(--app-border);
    padding: 0 24px;
}
.terminal-status-bar-label {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--app-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.terminal-status-bar-cwd {
    font-size: 12px;
    color: var(--app-text-muted);
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.terminal-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--app-bg);
    padding: 6px 14px;
}
.chat-container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--app-bg);
}
.chat-messages-wrapper {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.chat-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 22px;
}
.chat-empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.chat-empty-text {
    font-size: 14px;
    color: var(--app-text-muted);
}
.chat-message {
    margin-bottom: 8px;
    padding: 2px 0;
}
.chat-message-continuation {
    margin-bottom: 4px;
}
.chat-message-content {
    font-size: 14px;
    line-height: 1.6;
    max-width: 100%;
}
.chat-user-content {
    color: var(--app-text);
    white-space: pre-wrap;
    word-break: break-word;
    padding: 2px 0;
}
.chat-sender-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.chat-sender-icon {
    display: flex;
    align-items: center;
    color: var(--app-text-secondary);
    flex-shrink: 0;
}
.chat-sender-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text-bright);
}
.chat-sender-time {
    font-size: 11px;
    color: var(--app-text-dimmed);
    margin-left: 2px;
}
.chat-assistant-content {
    color: var(--app-text);
    padding: 4px 0;
}
.chat-assistant-content p {
    margin: 0 0 8px;
}
.chat-assistant-content p:last-child {
    margin-bottom: 0;
}
.chat-assistant-content h1,
.chat-assistant-content h2,
.chat-assistant-content h3,
.chat-assistant-content h4,
.chat-assistant-content h5,
.chat-assistant-content h6 {
    color: var(--app-text-bright);
    margin: 16px 0 8px;
}
.chat-assistant-content h1:first-child,
.chat-assistant-content h2:first-child,
.chat-assistant-content h3:first-child {
    margin-top: 0;
}
.chat-assistant-content code {
    font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        monospace;
    font-size: 13px;
    background: var(--app-hover);
    border-radius: 3px;
    padding: 1px 4px;
}
.chat-assistant-content pre {
    background: var(--app-bg-subtle);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 12px 14px;
    overflow-x: auto;
    margin: 8px 0;
}
.chat-assistant-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}
.chat-assistant-content ul,
.chat-assistant-content ol {
    padding-left: 20px;
    margin: 8px 0;
}
.chat-assistant-content li {
    margin-bottom: 4px;
}
.chat-assistant-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
}
.chat-assistant-content th,
.chat-assistant-content td {
    border: 1px solid var(--app-border);
    padding: 6px 10px;
    text-align: left;
    font-size: 13px;
}
.chat-assistant-content th {
    background: var(--app-bg-subtle);
    color: var(--app-text-bright);
}
.chat-assistant-content blockquote {
    border-left: 3px solid var(--app-accent);
    padding-left: 12px;
    margin: 8px 0;
    color: var(--app-text-muted);
}
.chat-assistant-content a {
    color: var(--app-accent);
    text-decoration: none;
}
.chat-assistant-content a:hover {
    text-decoration: underline;
}
.chat-code-block-wrapper {
    position: relative;
}
.chat-code-copy-button {
    all: unset;
    cursor: pointer;
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--app-hover);
    border: 1px solid var(--app-border-subtle);
    color: var(--app-text-secondary);
    font-size: 11px;
    opacity: 0;
    transition:
        opacity 0.15s,
        background-color 0.15s;
}
.chat-code-block-wrapper:hover .chat-code-copy-button {
    opacity: 1;
}
.chat-code-copy-button:hover {
    background: var(--app-hover);
    color: var(--app-text);
}
.chat-system-content {
    color: var(--app-text-secondary);
    font-size: 13px;
    padding: 2px 0;
}
.chat-textarea-streaming::placeholder {
    animation: chat-cursor-blink 1s step-end infinite;
}
@keyframes demo-toggle-pulse {
    0% {
        box-shadow: 0 0 #3b82f699;
    }
    70% {
        box-shadow: 0 0 0 8px #3b82f600;
    }
    to {
        box-shadow: 0 0 #3b82f600;
    }
}
.demo-toggle-pulse {
    animation: demo-toggle-pulse 0.8s ease-out 2;
    border-radius: 4px;
}
@keyframes chat-cursor-blink {
    0%,
    to {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
.chat-thinking-block {
    margin: 8px 0;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--app-bg-surface);
    overflow: hidden;
}
.chat-thinking-toggle {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    width: 100%;
    font-size: 13px;
    color: var(--app-text-muted);
    transition: background-color 0.15s;
}
.chat-thinking-toggle:hover {
    background: var(--app-bg-faint);
}
.chat-thinking-chevron {
    transition: transform 0.15s;
    flex-shrink: 0;
}
.chat-thinking-chevron-expanded {
    transform: rotate(90deg);
}
.chat-thinking-label {
    font-style: italic;
}
.chat-thinking-content {
    padding: 0 12px 12px;
    font-size: 13px;
    color: var(--app-text-secondary);
    border-top: 1px solid var(--app-border);
}
.chat-thinking-content p {
    margin: 8px 0 0;
}
.chat-thinking-content p:first-child {
    margin-top: 8px;
}
.chat-inline-thinking {
    color: var(--app-text-muted);
    padding: 4px 0;
    font-size: 13px;
}
.chat-inline-thinking p {
    margin: 0 0 8px;
}
.chat-inline-thinking p:last-child {
    margin-bottom: 0;
}
.chat-loading {
    display: flex;
    padding: 8px 0;
}
.chat-scroll-to-bottom {
    all: unset;
    cursor: pointer;
    position: absolute;
    bottom: 16px;
    right: 24px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--app-bg-overlay);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    box-shadow: 0 2px 8px var(--app-shadow);
    transition:
        background-color 0.15s,
        color 0.15s;
    z-index: 10;
}
.chat-scroll-to-bottom:hover {
    background: var(--app-border);
    color: var(--app-text-bright);
}
.chat-scroll-to-bottom.chat-new-messages-pill {
    width: auto;
    height: auto;
    border-radius: 16px;
    padding: 6px 14px;
    left: 50%;
    right: auto;
    transform: translate(-50%);
    font-size: 12px;
    font-weight: 500;
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-text-on-accent);
}
.chat-scroll-to-bottom.chat-new-messages-pill:hover {
    background: var(--app-accent-hover);
    color: var(--app-text-on-accent);
}
.chat-scroll-to-bottom.chat-new-messages-pill span {
    display: flex;
    align-items: center;
    gap: 4px;
}
.slash-command-menu {
    max-height: 240px;
    overflow-y: auto;
    margin-bottom: 4px;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--app-bg-elevated);
}
.slash-command-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
}
.slash-command-item:hover,
.slash-command-item-selected {
    background: var(--app-bg-overlay);
}
.slash-command-name {
    color: var(--app-text);
    font-family: monospace;
    font-weight: 500;
    white-space: nowrap;
}
.slash-command-description {
    color: var(--app-text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-input-area {
    flex-shrink: 0;
    max-height: 40%;
    overflow-y: auto;
    padding: 16px 24px 8px;
    border-top: 1px solid var(--app-border);
    background-color: var(--app-bg);
}
.chat-input-area:last-child {
    padding-bottom: 16px;
}
.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.chat-textarea-root {
    flex: 1;
}
.chat-textarea-input {
    background: var(--app-bg-subtle) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
    font-size: 14px !important;
    min-height: 36px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    resize: none;
}
.chat-textarea-input::placeholder {
    color: var(--app-text-dimmed) !important;
}
.chat-textarea-input:focus {
    border-color: var(--app-accent) !important;
}
.chat-textarea-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.chat-action-button {
    flex-shrink: 0;
    margin-bottom: 1px;
}
.chat-action-button:disabled {
    background-color: transparent;
    border: 1px solid var(--app-border);
    color: var(--app-text-muted);
    opacity: 1;
}
.chat-typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 8px;
    font-size: 12px;
    color: var(--app-text-secondary);
}
.chat-plan-mode-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 0;
    font-size: 12px;
    color: var(--app-text-secondary);
}
.chat-plan-mode-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background-color: var(--app-warning-bg);
    color: var(--app-warning);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.chat-plan-mode-hint kbd {
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
    background-color: var(--app-border);
    font-size: 11px;
    font-family: inherit;
}
.chat-session-indicators {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.chat-reasoning-toggle {
    padding: 4px 0 0;
}
.chat-reasoning-toggle .mantine-Switch-label {
    font-size: 12px;
    color: var(--app-text-secondary);
    font-weight: 400;
}
.chat-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.chat-welcome-text {
    font-size: 14px;
    color: var(--app-text-muted);
}
.chat-start-button {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--app-accent);
    color: var(--app-text-on-accent);
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.15s;
}
.chat-start-button:hover {
    background: var(--app-accent-hover);
}
.help-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    max-width: 320px;
    width: 100%;
}
.help-suggestion-button {
    all: unset;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 13px;
    text-align: left;
    transition:
        border-color 0.15s,
        color 0.15s;
}
.help-suggestion-button:hover {
    border-color: var(--app-text-dimmed);
    color: var(--app-text-on-accent);
}
.chat-idle-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.chat-idle-text {
    font-size: 14px;
    color: var(--app-text);
    font-weight: 500;
}
.chat-idle-secondary {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 13px;
    font-weight: 500;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
.chat-idle-secondary:hover {
    background: var(--app-bg-elevated);
    border-color: var(--app-border);
}
.chat-idle-guidance {
    font-size: 12px;
    color: var(--app-text-dimmed);
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
}
.chat-idle-escape {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-top: 16px;
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid var(--app-border);
    color: var(--app-text);
    font-size: 13px;
    font-weight: 500;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
.chat-idle-escape:hover {
    background: var(--app-bg-elevated);
    border-color: var(--app-border);
}
.chat-session-inactive {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.chat-session-inactive .chat-scroll-area {
    opacity: 0.6;
}
.session-summary-banner {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background-color: var(--app-success-bg);
    border-bottom: 1px solid var(--app-success-border);
    flex-shrink: 0;
    color: var(--app-text);
}
.session-summary-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.session-summary-message {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.session-summary-meta {
    font-size: 11px;
    color: var(--app-text-secondary);
}
.chat-session-ended-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 24px;
    border-top: 1px solid var(--app-border);
    font-size: 12px;
    color: var(--app-text-dimmed);
    font-style: italic;
}
.chat-approval-widget {
    background: var(--app-bg-widget);
    border: 1px solid var(--app-border-widget);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 12px 0;
}
.chat-approval-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.chat-approval-icon {
    color: var(--app-warning);
    flex-shrink: 0;
}
.chat-approval-tool-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--app-text-bright);
}
.chat-approval-summary {
    font-size: 13px;
    color: var(--app-text);
    margin: 0 0 8px;
    font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        monospace;
}
.chat-approval-toggle {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--app-text-secondary);
    margin-bottom: 8px;
    transition: color 0.15s;
}
.chat-approval-toggle:hover {
    color: var(--app-text);
}
.chat-approval-chevron {
    transition: transform 0.15s;
}
.chat-approval-chevron-expanded {
    transform: rotate(90deg);
}
.chat-approval-input-preview {
    font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        monospace;
    font-size: 12px;
    color: var(--app-text-muted);
    background: var(--app-bg-inset);
    border: 1px solid var(--app-border);
    border-radius: 4px;
    padding: 10px 12px;
    overflow-x: auto;
    max-height: 200px;
    overflow-y: auto;
    margin: 0 0 10px;
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-approval-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.chat-approval-checkbox-label {
    font-size: 12px !important;
    color: var(--app-text-secondary) !important;
}
.chat-question-widget {
    background: var(--app-bg-widget);
    border: 1px solid var(--app-border-widget);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 8px 0;
}
.chat-question-block {
    margin-bottom: 14px;
}
.chat-question-block:last-of-type {
    margin-bottom: 8px;
}
.chat-question-header {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--app-text-secondary);
    background: var(--app-hover);
    border-radius: 3px;
    padding: 2px 6px;
    margin-bottom: 6px;
}
.chat-question-text {
    font-size: 13px;
    color: var(--app-text-bright);
    margin: 6px 0 10px;
}
.chat-question-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-question-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: var(--app-bg-faint);
    cursor: pointer;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
.chat-question-option:hover {
    background: var(--app-hover);
}
.chat-question-option-selected {
    border-color: var(--app-accent);
    background: var(--app-accent-bg);
}
.chat-question-radio,
.chat-question-checkbox {
    margin-top: 2px;
    accent-color: var(--app-accent);
    flex-shrink: 0;
}
.chat-question-option-label {
    display: block;
    font-size: 13px;
    color: var(--app-text-bright);
    font-weight: 500;
}
.chat-question-option-desc {
    display: block;
    font-size: 12px;
    color: var(--app-text-secondary);
    margin-top: 2px;
}
.chat-question-other-container {
    flex: 1;
    min-width: 0;
}
.chat-question-other-input {
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--app-text);
    background: var(--app-bg-inset);
    border: 1px solid var(--app-border);
    border-radius: 4px;
    outline: none;
    font-family: inherit;
    resize: none;
    overflow-y: auto;
    field-sizing: content;
    min-height: 30px;
    max-height: 120px;
}
.chat-question-other-input:focus {
    border-color: var(--app-accent);
}
.chat-question-other-input::placeholder {
    color: var(--app-text-dimmed);
}
.chat-question-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.tool-call-block {
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--app-bg-surface);
    overflow: hidden;
}
.chat-tool-group {
    margin: 12px 0;
}
.chat-tool-group .tool-call-block + .tool-call-block {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.chat-tool-group .tool-call-block:has(+ .tool-call-block) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.tool-call-group-pagination {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}
.tool-call-group-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color: var(--app-text-dimmed);
    cursor: pointer;
    transition:
        background-color 0.1s,
        color 0.1s;
}
.tool-call-group-nav:hover:not(.tool-call-group-nav-disabled) {
    background: var(--app-hover);
    color: var(--app-text);
}
.tool-call-group-nav-disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}
.tool-call-group-counter {
    font-size: 12px;
    color: var(--app-text-dimmed);
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
}
.chat-message .tool-call-block {
    margin: 12px 0;
}
.chat-scroll-area > .tool-call-block {
    margin-bottom: 8px;
}
.tool-call-block-error {
    border-color: var(--app-error-bg);
}
.tool-call-header {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--app-text);
    box-sizing: border-box;
    transition: background-color 0.1s;
}
.tool-call-header:hover {
    background: var(--app-bg-faint);
}
.tool-call-chevron {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--app-text-dimmed);
}
.tool-call-status-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.tool-call-status-completed {
    color: var(--app-text-muted);
}
.tool-call-status-error {
    color: var(--app-error);
}
.tool-call-status-stopped,
.tool-call-status-progress {
    color: var(--app-text-muted);
}
.tool-call-name {
    flex-shrink: 0;
    font-weight: 500;
    color: var(--app-text-bright);
}
.tool-call-summary {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-text-dimmed);
    font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        monospace;
    font-size: 12px;
}
.tool-call-content {
    border-top: 1px solid var(--app-border);
    padding: 8px 10px;
}
.tool-call-section {
    margin-bottom: 8px;
}
.tool-call-section:last-child {
    margin-bottom: 0;
}
.tool-call-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--app-text-dimmed);
    margin-bottom: 4px;
}
.tool-call-pre {
    margin: 0;
    padding: 8px 10px;
    background: var(--app-bg-faint);
    border: 1px solid var(--app-border-subtle);
    border-radius: 4px;
    font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--app-text-muted);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 300px;
    overflow-y: auto;
}
.tool-call-terminal {
    font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        monospace;
    font-size: 12px;
    line-height: 1.5;
    background: var(--app-bg-terminal);
    border-top: 1px solid var(--app-border);
    overflow: hidden;
}
.tool-call-terminal-command {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    color: var(--app-text-bright);
    white-space: pre-wrap;
    word-break: break-word;
}
.tool-call-terminal-prompt {
    color: var(--app-success-bright);
    flex-shrink: 0;
    font-weight: 600;
    -webkit-user-select: none;
    user-select: none;
}
.tool-call-terminal-output {
    padding: 8px 10px;
    color: var(--app-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
    border-top: 1px solid var(--app-border-subtle);
}
.tool-call-diff {
    border-top: 1px solid var(--app-border);
    overflow: hidden;
}
.tool-call-diff-filename-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--app-bg-faint);
    border-bottom: 1px solid var(--app-border-subtle);
}
.tool-call-diff-filename {
    font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        monospace;
    font-size: 12px;
    color: var(--app-text-bright);
    padding: 6px 10px;
    font-weight: 500;
}
.tool-call-open-button {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: none;
    border: none;
    color: var(--app-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}
.tool-call-open-button:hover {
    color: var(--app-text-bright);
}
.tool-call-diff-block {
    margin: 0;
    padding: 4px 0;
    font-family:
        ui-monospace,
        SFMono-Regular,
        SF Mono,
        Menlo,
        Consolas,
        monospace;
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    background: var(--app-bg-terminal);
}
.tool-call-diff-line-added {
    background: var(--app-diff-added-bg);
    color: var(--app-diff-added-text);
    padding: 0 10px;
}
.tool-call-diff-line-removed {
    background: var(--app-diff-removed-bg);
    color: var(--app-diff-removed-text);
    padding: 0 10px;
}
.tool-call-diff-sign {
    display: inline-block;
    width: 14px;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 600;
}
.tool-call-diff-truncated {
    padding: 4px 10px;
    color: var(--app-text-dimmed);
    font-style: italic;
}
.tool-call-error-result {
    border-color: var(--app-error-bg);
    color: var(--app-diff-removed-text);
}
.session-startup-block {
    padding: 8px 0;
    animation: session-startup-fadein 0.3s ease;
}
.session-startup-shimmer-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}
.session-startup-shimmer-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        var(--app-bg-subtle) 25%,
        var(--app-border) 50%,
        var(--app-bg-subtle) 75%
    );
    background-size: 200% 100%;
    animation: session-startup-shimmer 1.5s ease-in-out infinite;
}
.session-startup-stopped {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--app-text-muted);
    font-size: 13px;
}
@keyframes session-startup-shimmer {
    0% {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}
@keyframes session-startup-fadein {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.chat-image-error {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--app-error-bg);
    color: var(--app-error);
    font-size: 12px;
    margin-bottom: 6px;
}
.chat-image-error-dismiss {
    all: unset;
    cursor: pointer;
    margin-left: auto;
    display: flex;
    align-items: center;
    opacity: 0.6;
}
.chat-image-error-dismiss:hover {
    opacity: 1;
}
.chat-attachment-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 8px;
}
.chat-attachment-preview {
    position: relative;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    background: var(--app-bg-subtle);
    overflow: hidden;
}
.chat-attachment-thumbnail {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 7px;
}
.chat-attachment-text-preview {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    max-width: 240px;
    font-size: 12px;
    color: var(--app-text-muted);
    line-height: 1.4;
}
.chat-attachment-text-preview svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--app-text-dimmed);
}
.chat-attachment-text-snippet {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.chat-attachment-remove {
    all: unset;
    cursor: pointer;
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--app-shadow);
    color: var(--app-text);
    opacity: 0;
    transition: opacity 0.15s;
}
.chat-attachment-preview:hover .chat-attachment-remove {
    opacity: 1;
}
.chat-input-area-dragover {
    border-color: var(--app-accent);
}
.chat-drop-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    margin-bottom: 8px;
    border: 2px dashed var(--app-accent);
    border-radius: 8px;
    color: var(--app-accent);
    font-size: 13px;
    background: var(--app-accent-bg);
}
.chat-user-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.chat-user-image {
    max-width: 300px;
    max-height: 200px;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    object-fit: contain;
}
.chat-assistant-image {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    object-fit: contain;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.chat-assistant-image:hover {
    opacity: 0.85;
}
.chat-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--app-overlay);
    cursor: pointer;
}
.chat-lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    cursor: default;
}
.chat-lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: var(--app-hover);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-text-on-accent);
    cursor: pointer;
    transition: background 0.15s ease;
}
.chat-lightbox-close:hover {
    background: var(--app-hover);
}
.chat-pasted-text-tile {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    max-width: 300px;
    border-radius: 8px;
    border: 1px solid var(--app-border);
    background: var(--app-bg-subtle);
    font-size: 12px;
    color: var(--app-text-muted);
    line-height: 1.4;
}
.chat-pasted-text-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--app-text-dimmed);
}
.chat-pasted-text-preview {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.product-tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    pointer-events: none;
}
.product-tour-backdrop {
    position: absolute;
    inset: 0;
    background: #0006;
    pointer-events: auto;
}
.product-tour-tooltip {
    position: fixed;
    pointer-events: auto;
    background: var(--app-bg-overlay);
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 8px;
    padding: 16px;
    min-width: 280px;
    max-width: 420px;
    color: var(--app-text, #c1c2c5);
    font-size: 13px;
    line-height: 1.5;
    box-shadow:
        0 8px 24px #0006,
        0 0 8px 2px #60a5fa33;
}
.product-tour-content {
    margin: 0 0 12px;
}
.product-tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.product-tour-footer--centered {
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.product-tour-indicator {
    font-size: 11px;
    color: var(--app-text-dimmed);
}
.product-tour-nav {
    display: flex;
    gap: 8px;
}
.product-tour-btn {
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.5;
}
.product-tour-btn--primary {
    background: var(--app-accent);
    color: var(--app-text-on-accent, #fff);
}
.product-tour-btn--primary:hover {
    background: var(--app-accent-hover);
}
.product-tour-btn--secondary {
    background: transparent;
    color: var(--app-text-muted);
}
.product-tour-btn--secondary:hover {
    background: var(--app-hover);
}
.product-tour-btn--full {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.product-tour-spinner {
    animation: product-tour-spin 1s linear infinite;
}
@keyframes product-tour-spin {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.product-tour-skip {
    background: none;
    border: none;
    color: var(--app-text-dimmed);
    font-size: 11px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
}
.product-tour-skip:hover {
    color: var(--app-text-muted);
}
.product-tour-skip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.product-tour-skip-actions > * {
    flex: 1 1 120px;
}
.product-tour-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--app-bg-overlay);
    border: 1px solid rgba(96, 165, 250, 0.4);
    transform: rotate(45deg);
}
.product-tour-arrow--bottom {
    top: -5px;
    left: 50%;
    margin-left: -4px;
    border-right: none;
    border-bottom: none;
}
.product-tour-arrow--top {
    bottom: -5px;
    left: 50%;
    margin-left: -4px;
    border-left: none;
    border-top: none;
}
.product-tour-arrow--left {
    right: -5px;
    top: 50%;
    margin-top: -4px;
    border-left: none;
    border-bottom: none;
}
.product-tour-arrow--right {
    left: -5px;
    top: 50%;
    margin-top: -4px;
    border-right: none;
    border-top: none;
}
.product-tour-wait {
    position: fixed;
    bottom: 24px;
    right: 24px;
    pointer-events: auto;
    background: var(--app-bg-overlay);
    border: 1px solid var(--app-border-subtle);
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--app-text, #c1c2c5);
    font-size: 13px;
    box-shadow:
        0 4px 16px #0000004d,
        0 0 12px 4px #60a5fa59;
    z-index: 401;
}
.product-tour-wait-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--app-accent, #228be6);
    animation: product-tour-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes product-tour-pulse {
    0%,
    to {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.75);
    }
}
.product-tour-glow {
    box-shadow:
        0 0 8px 2px #60a5fa33,
        inset 0 0 0 1px #60a5fa66;
}
[data-mantine-color-scheme="light"] .product-tour-glow {
    box-shadow:
        0 0 20px 6px #3b82f680,
        inset 0 0 0 1px #3b82f666;
}
[data-mantine-color-scheme="light"] .product-tour-tooltip {
    border-color: var(--app-border-subtle);
    box-shadow:
        0 8px 24px #0000001f,
        0 0 20px 6px #3b82f680;
}
[data-mantine-color-scheme="light"] .product-tour-arrow {
    border-color: var(--app-border-subtle);
}
[data-mantine-color-scheme="light"] .product-tour-wait {
    box-shadow:
        0 4px 16px #0000001a,
        0 0 20px 6px #3b82f680;
}
[data-mantine-color-scheme="light"] .product-tour-backdrop {
    background: #00000040;
}
[data-mantine-color-scheme="light"] .product-tour-backdrop--full {
    background: #00000059;
}
.product-tour-overlay--blocking {
    pointer-events: auto;
}
.product-tour-backdrop--full {
    position: absolute;
    inset: 0;
    background: #00000080;
}
.product-tour-wait-full {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: 90vw;
    background: var(--app-bg-overlay);
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow:
        0 12px 40px #00000080,
        0 0 12px 4px #60a5fa40;
    text-align: center;
}
.product-tour-wait-full-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.product-tour-wait-dot--large {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #60a5facc;
    animation: product-tour-pulse 1.4s ease-in-out infinite;
    margin-bottom: 8px;
}
.product-tour-wait-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--app-text);
}
.product-tour-wait-subtitle {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--app-text-muted);
}
.product-tour-wait-issues {
    width: 100%;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product-tour-wait-issue {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--app-bg-surface);
    border: 1px solid var(--app-border-subtle);
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    font-family: inherit;
}
.product-tour-wait-issue:not(:disabled):hover {
    background: var(--app-bg-subtle);
}
.product-tour-wait-issue:disabled {
    cursor: default;
}
.product-tour-wait-issue--done {
    opacity: 0.5;
}
.product-tour-wait-issue-status {
    flex-shrink: 0;
    display: flex;
    color: #60a5facc;
}
.product-tour-wait-issue--done .product-tour-wait-issue-status {
    color: var(--app-text-dimmed);
}
.product-tour-wait-issue-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.product-tour-wait-issue-title {
    font-size: 13px;
    color: var(--app-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-tour-wait-issue-subtitle {
    font-size: 11px;
    color: var(--app-text-dimmed);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-tour-wait-issue-link-icon {
    flex-shrink: 0;
    color: var(--app-text-dimmed);
    transition: color 0.15s;
}
.product-tour-wait-issue:hover .product-tour-wait-issue-link-icon {
    color: #60a5facc;
}
.product-tour-wait-hint {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--app-text-dimmed);
    font-style: italic;
}
.product-tour-wait-prompt {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--app-bg-surface);
    border: 1px solid rgba(96, 165, 250, 0.4);
    text-align: left;
}
.product-tour-wait-prompt-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #60a5facc;
    margin-bottom: 6px;
}
.product-tour-wait-prompt-agent {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-text);
}
.product-tour-wait-prompt-summary {
    font-size: 12px;
    line-height: 1.5;
    color: var(--app-text-muted);
    margin-bottom: 10px;
}
.product-tour-wait-prompt-actions,
.product-tour-wait-prompt-confirm {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.product-tour-wait-prompt-confirm-text {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--app-text-dimmed);
    text-align: center;
}
.product-tour-wait-prompt-btn {
    width: 100%;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--app-border-subtle);
    background: var(--app-bg-surface);
    color: var(--app-text);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.product-tour-wait-prompt-btn:hover {
    background: var(--app-bg-subtle);
}
.product-tour-wait-prompt-row {
    display: flex;
    gap: 6px;
}
.product-tour-wait-prompt-row .product-tour-wait-prompt-btn {
    flex: 1;
}
.product-tour-wait-prompt-btn--allow {
    background: transparent;
    border-color: var(--app-border-subtle);
    color: var(--app-text-muted);
}
.product-tour-wait-prompt-btn--always {
    background: #60a5fa26;
    border-color: #60a5fa66;
    color: #60a5fa;
}
.product-tour-wait-prompt-btn--always:hover {
    background: #60a5fa40;
}
.product-tour-wait-prompt-btn--deny {
    background: transparent;
    border-color: var(--app-border-subtle);
    color: var(--app-text-dimmed);
}
.product-tour-wait-prompt-btn--cancel {
    background: transparent;
    border-color: var(--app-border-subtle);
    color: var(--app-text-muted);
}
.product-tour-wait-next {
    margin-top: 16px;
    padding: 6px 24px;
}
.product-tour-wait-next--disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
[data-mantine-color-scheme="light"] .product-tour-wait-full {
    border-color: var(--app-border-subtle);
    box-shadow:
        0 12px 40px #00000026,
        0 0 20px 6px #3b82f666;
}
:root {
    --illust-stroke: rgba(56, 139, 253, 0.15);
    --illust-stroke-dim: rgba(56, 139, 253, 0.15);
    --illust-stroke-faint: rgba(56, 139, 253, 0.15);
    --illust-text: rgba(56, 139, 253, 0.15);
    --illust-text-dim: rgba(56, 139, 253, 0.15);
    --illust-text-bright: rgba(56, 139, 253, 0.15);
    --illust-dot-idle: rgba(56, 139, 253, 0.15);
    --illust-dot-active: rgba(56, 139, 253, 0.15);
    --illust-active: #388bfd;
}
[data-mantine-color-scheme="dark"] {
    --app-bg: transparent;
    --app-bg-titlebar: transparent;
    --app-bg-deep: transparent;
    --app-bg-surface: transparent;
    --app-bg-subtle: transparent;
    --app-bg-faint: transparent;
    --app-bg-elevated: transparent;
    --app-bg-overlay: transparent;
    --app-bg-widget: transparent;
    --app-bg-terminal: transparent;
    --app-bg-inset: transparent;
    --app-bg-chrome: transparent;
    --app-hover: transparent;
    --app-border: transparent;
    --app-border-subtle: transparent;
    --app-border-widget: transparent;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.illustration-wrapper {
    position: relative;
    padding: 50px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.firefly {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        circle,
        rgba(56, 139, 253, 0.9) 0%,
        rgba(56, 139, 253, 0.4) 40%,
        transparent 70%
    );
    box-shadow: 0 0 6px 2px #388bfd4d;
    animation-fill-mode: forwards;
}
.firefly--1 {
    width: 5px;
    height: 5px;
    top: 15%;
    left: 8%;
    animation:
        drift-1 12s ease-in-out infinite,
        firefly-in 2s ease-out forwards;
}
.firefly--2 {
    width: 3px;
    height: 3px;
    top: 70%;
    left: 85%;
    animation:
        drift-2 15s ease-in-out infinite,
        firefly-in 2s ease-out 0.5s forwards;
}
.firefly--3 {
    width: 4px;
    height: 4px;
    top: 10%;
    left: 60%;
    animation:
        drift-3 11s ease-in-out infinite,
        firefly-in 2s ease-out 1s forwards;
}
.firefly--4 {
    width: 3px;
    height: 3px;
    top: 80%;
    left: 25%;
    animation:
        drift-4 14s ease-in-out infinite,
        firefly-in 2s ease-out 0.3s forwards;
}
.firefly--5 {
    width: 5px;
    height: 5px;
    top: 40%;
    left: 92%;
    animation:
        drift-5 13s ease-in-out infinite,
        firefly-in 2s ease-out 0.8s forwards;
}
.firefly--6 {
    width: 3px;
    height: 3px;
    top: 25%;
    left: 35%;
    animation:
        drift-6 16s ease-in-out infinite,
        firefly-in 2s ease-out 1.2s forwards;
}
.firefly--7 {
    width: 4px;
    height: 4px;
    top: 55%;
    left: 70%;
    animation:
        drift-7 10s ease-in-out infinite,
        firefly-in 2s ease-out 0.6s forwards;
}
@keyframes firefly-in {
    0% {
        opacity: 0;
    }
    to {
        opacity: 0.8;
    }
}
@keyframes drift-1 {
    0% {
        transform: translate(0);
    }
    25% {
        transform: translate(30px, -15px);
    }
    50% {
        transform: translate(55px, 5px);
    }
    75% {
        transform: translate(20px, 20px);
    }
    to {
        transform: translate(0);
    }
}
@keyframes drift-2 {
    0% {
        transform: translate(0);
    }
    25% {
        transform: translate(-25px, 10px);
    }
    50% {
        transform: translate(-50px, -8px);
    }
    75% {
        transform: translate(-15px, -20px);
    }
    to {
        transform: translate(0);
    }
}
@keyframes drift-3 {
    0% {
        transform: translate(0);
    }
    25% {
        transform: translate(-20px, 18px);
    }
    50% {
        transform: translate(10px, 30px);
    }
    75% {
        transform: translate(35px, 10px);
    }
    to {
        transform: translate(0);
    }
}
@keyframes drift-4 {
    0% {
        transform: translate(0);
    }
    25% {
        transform: translate(40px, -10px);
    }
    50% {
        transform: translate(20px, -25px);
    }
    75% {
        transform: translate(-10px, -12px);
    }
    to {
        transform: translate(0);
    }
}
@keyframes drift-5 {
    0% {
        transform: translate(0);
    }
    25% {
        transform: translate(-35px, -12px);
    }
    50% {
        transform: translate(-20px, 15px);
    }
    75% {
        transform: translate(-45px, 5px);
    }
    to {
        transform: translate(0);
    }
}
@keyframes drift-6 {
    0% {
        transform: translate(0);
    }
    25% {
        transform: translate(15px, 22px);
    }
    50% {
        transform: translate(40px, 8px);
    }
    75% {
        transform: translate(25px, -15px);
    }
    to {
        transform: translate(0);
    }
}
@keyframes drift-7 {
    0% {
        transform: translate(0);
    }
    25% {
        transform: translate(-18px, -20px);
    }
    50% {
        transform: translate(12px, -10px);
    }
    75% {
        transform: translate(30px, 12px);
    }
    to {
        transform: translate(0);
    }
}
#illustration-root {
    flex: 1;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--illust-stroke-dim);
    border-radius: 10px;
    overflow: hidden;
}
.titlebar {
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--illust-stroke-dim);
}
.repository-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 6px;
    padding: 0 7px 6px;
}
.tab-bar {
    display: flex;
    flex-direction: column;
    width: 270px;
    flex-shrink: 0;
    padding: 12px 10px 0;
    overflow: hidden;
}
.tab-bar-home {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 2px;
}
.tab-bar-home-icon {
    color: var(--illust-stroke-faint);
    flex-shrink: 0;
}
.tab-bar-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}
.tab-bar-group-label {
    padding: 8px 0 6px;
    font-size: 0;
    line-height: 0;
}
.tab-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 2px;
}
.tab-indicator-icon {
    flex-shrink: 0;
    transition: color 0.4s ease;
}
.tab-indicator-icon--idle {
    color: var(--illust-stroke-faint);
}
.tab-indicator-icon--active {
    color: var(--illust-dot-active);
}
.tab-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.dashboard {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dashboard-stepper-section {
    flex-shrink: 0;
    margin: 20px 20px 0;
    padding: 12px 23px;
    border: 1px solid var(--illust-stroke-dim);
    border-radius: 6px;
}
.stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.stepper-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.stepper-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--illust-stroke-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.4s ease;
}
.stepper-separator {
    flex: 1;
    height: 1.5px;
    background: var(--illust-stroke-faint);
    margin-top: 14px;
    min-width: 20px;
}
.dashboard-agents-section {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
}
.dashboard-cards-container {
    position: relative;
    border: 1px solid var(--illust-stroke-dim);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}
.dashboard-agent-card {
    all: unset;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 20px;
    width: 100%;
    min-height: 72px;
    padding: 12px 14px 12px 23px;
}
.dashboard-agent-card + .dashboard-agent-card {
    border-top: 1px solid var(--illust-stroke-faint);
}
.dashboard-card-indicator-icon {
    flex-shrink: 0;
    transition: color 0.4s ease;
}
.dashboard-card-indicator-icon--idle {
    color: var(--illust-stroke-faint);
}
.dashboard-card-indicator-icon--active {
    color: var(--illust-dot-active);
}
.dashboard-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dashboard-card-actions {
    flex-shrink: 0;
}
.demo-sidebar {
    position: relative;
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 12px;
}
.demo-sidebar-log {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 0;
}
.demo-sidebar-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    transition: opacity 0.4s ease;
}
.demo-sidebar-entry-icon {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    color: var(--illust-stroke-faint);
}
.demo-sidebar-entry-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.skeleton-line {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--illust-stroke-faint);
}
.dispatch-orb {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    left: 54px;
    background: radial-gradient(
        circle,
        rgba(56, 139, 253, 1) 0%,
        rgba(56, 139, 253, 0.5) 40%,
        transparent 70%
    );
    box-shadow: 0 0 10px 3px #388bfd66;
    z-index: 10;
}
.dispatch-orb--1 {
    top: 43px;
    animation: orb-drop-1 22s ease-in-out infinite;
}
.dispatch-orb--2 {
    top: 43px;
    animation: orb-drop-2 22s ease-in-out 0.4s infinite;
}
.dispatch-orb--3 {
    top: 43px;
    animation: orb-drop-3 22s ease-in-out 0.8s infinite;
}
.dispatch-orb--4 {
    top: 43px;
    animation: orb-drop-4 22s ease-in-out 1.2s infinite;
}
.dispatch-orb--5 {
    top: 43px;
    animation: orb-review-1 22s ease-in-out infinite;
}
.dispatch-orb--6 {
    top: 43px;
    animation: orb-review-2 22s ease-in-out infinite;
}
.dispatch-orb--7 {
    top: 43px;
    animation: orb-review-3 22s ease-in-out infinite;
}
.dispatch-orb--8 {
    top: 43px;
    animation: orb-review-4 22s ease-in-out infinite;
}
@keyframes orb-drop-1 {
    0%,
    3% {
        opacity: 0;
        transform: translateY(0);
    }
    5% {
        opacity: 1;
        transform: translateY(0);
    }
    17% {
        opacity: 1;
        transform: translateY(84px);
    }
    35% {
        opacity: 0.8;
        transform: translateY(84px);
    }
    39% {
        opacity: 0;
        transform: translateY(84px);
    }
    to {
        opacity: 0;
        transform: translateY(0);
    }
}
@keyframes orb-drop-2 {
    0%,
    3% {
        opacity: 0;
        transform: translateY(0);
    }
    5% {
        opacity: 1;
        transform: translateY(0);
    }
    17% {
        opacity: 1;
        transform: translateY(156px);
    }
    35% {
        opacity: 0.8;
        transform: translateY(156px);
    }
    39% {
        opacity: 0;
        transform: translateY(156px);
    }
    to {
        opacity: 0;
        transform: translateY(0);
    }
}
@keyframes orb-drop-3 {
    0%,
    3% {
        opacity: 0;
        transform: translateY(0);
    }
    5% {
        opacity: 1;
        transform: translateY(0);
    }
    17% {
        opacity: 1;
        transform: translateY(228px);
    }
    35% {
        opacity: 0.8;
        transform: translateY(228px);
    }
    39% {
        opacity: 0;
        transform: translateY(228px);
    }
    to {
        opacity: 0;
        transform: translateY(0);
    }
}
@keyframes orb-drop-4 {
    0%,
    3% {
        opacity: 0;
        transform: translateY(0);
    }
    5% {
        opacity: 1;
        transform: translateY(0);
    }
    17% {
        opacity: 1;
        transform: translateY(300px);
    }
    35% {
        opacity: 0.8;
        transform: translateY(300px);
    }
    39% {
        opacity: 0;
        transform: translateY(300px);
    }
    to {
        opacity: 0;
        transform: translateY(0);
    }
}
@keyframes orb-review-1 {
    0%,
    35% {
        opacity: 0;
        transform: translateY(84px);
    }
    37% {
        opacity: 1;
        transform: translateY(84px);
    }
    49% {
        opacity: 1;
        transform: translateY(394px);
    }
    65% {
        opacity: 0.8;
        transform: translateY(394px);
    }
    69% {
        opacity: 0;
        transform: translateY(394px);
    }
    to {
        opacity: 0;
        transform: translateY(84px);
    }
}
@keyframes orb-review-2 {
    0%,
    35% {
        opacity: 0;
        transform: translateY(156px);
    }
    37% {
        opacity: 1;
        transform: translateY(156px);
    }
    49% {
        opacity: 1;
        transform: translateY(394px);
    }
    65% {
        opacity: 0.8;
        transform: translateY(394px);
    }
    69% {
        opacity: 0;
        transform: translateY(394px);
    }
    to {
        opacity: 0;
        transform: translateY(156px);
    }
}
@keyframes orb-review-3 {
    0%,
    35% {
        opacity: 0;
        transform: translateY(228px);
    }
    37% {
        opacity: 1;
        transform: translateY(228px);
    }
    49% {
        opacity: 1;
        transform: translateY(466px);
    }
    65% {
        opacity: 0.8;
        transform: translateY(466px);
    }
    69% {
        opacity: 0;
        transform: translateY(466px);
    }
    to {
        opacity: 0;
        transform: translateY(228px);
    }
}
@keyframes orb-review-4 {
    0%,
    35% {
        opacity: 0;
        transform: translateY(300px);
    }
    37% {
        opacity: 1;
        transform: translateY(300px);
    }
    49% {
        opacity: 1;
        transform: translateY(466px);
    }
    65% {
        opacity: 0.8;
        transform: translateY(466px);
    }
    69% {
        opacity: 0;
        transform: translateY(466px);
    }
    to {
        opacity: 0;
        transform: translateY(300px);
    }
}
@keyframes stepper-ready {
    0%,
    3% {
        border-color: var(--illust-stroke-faint);
    }
    5% {
        border-color: var(--illust-active);
    }
    6% {
        border-color: var(--illust-active);
    }
    17% {
        border-color: var(--illust-stroke-faint);
    }
    to {
        border-color: var(--illust-stroke-faint);
    }
}
@keyframes stepper-in-progress {
    0%,
    5% {
        border-color: var(--illust-stroke-faint);
    }
    23% {
        border-color: var(--illust-active);
    }
    37% {
        border-color: var(--illust-active);
    }
    49% {
        border-color: var(--illust-stroke-faint);
    }
    to {
        border-color: var(--illust-stroke-faint);
    }
}
@keyframes stepper-in-review {
    0%,
    37% {
        border-color: var(--illust-stroke-faint);
    }
    49% {
        border-color: var(--illust-active);
    }
    65% {
        border-color: var(--illust-active);
    }
    69% {
        border-color: var(--illust-stroke-faint);
    }
    to {
        border-color: var(--illust-stroke-faint);
    }
}
@keyframes stepper-human-review {
    0%,
    65% {
        border-color: var(--illust-stroke-faint);
    }
    69% {
        border-color: var(--illust-active);
    }
    80% {
        border-color: var(--illust-active);
    }
    86% {
        border-color: var(--illust-stroke-faint);
    }
    to {
        border-color: var(--illust-stroke-faint);
    }
}
#step-ready-icon {
    animation: stepper-ready 22s ease-in-out infinite;
}
#step-in-progress-icon {
    animation: stepper-in-progress 22s ease-in-out infinite;
}
#step-in-review-icon {
    animation: stepper-in-review 22s ease-in-out infinite;
}
#step-human-review-icon {
    animation: stepper-human-review 22s ease-in-out infinite;
}
@keyframes skeleton-worker-activate {
    0%,
    13% {
        background: var(--illust-stroke-faint);
    }
    19% {
        background: #388bfd59;
    }
    35% {
        background: #388bfd59;
    }
    39% {
        background: var(--illust-stroke-faint);
    }
    to {
        background: var(--illust-stroke-faint);
    }
}
@keyframes skeleton-reviewer-activate {
    0%,
    47% {
        background: var(--illust-stroke-faint);
    }
    52% {
        background: #388bfd59;
    }
    65% {
        background: #388bfd59;
    }
    69% {
        background: var(--illust-stroke-faint);
    }
    to {
        background: var(--illust-stroke-faint);
    }
}
@keyframes worker-activate {
    0%,
    13% {
        color: var(--illust-stroke-faint);
    }
    19% {
        color: var(--illust-active);
    }
    35% {
        color: var(--illust-active);
    }
    39% {
        color: var(--illust-stroke-faint);
    }
    to {
        color: var(--illust-stroke-faint);
    }
}
#card-turing-indicator {
    animation: worker-activate 22s ease-in-out infinite;
}
#card-lovelace-indicator {
    animation: worker-activate 22s ease-in-out 0.4s infinite;
}
#card-hopper-indicator {
    animation: worker-activate 22s ease-in-out 0.8s infinite;
}
#card-curie-indicator {
    animation: worker-activate 22s ease-in-out 1.2s infinite;
}
#tab-dot-agent-turing {
    animation: worker-activate 22s ease-in-out infinite;
}
#tab-dot-agent-lovelace {
    animation: worker-activate 22s ease-in-out 0.4s infinite;
}
#tab-dot-agent-hopper {
    animation: worker-activate 22s ease-in-out 0.8s infinite;
}
#tab-dot-agent-curie {
    animation: worker-activate 22s ease-in-out 1.2s infinite;
}
#tab-label-agent-turing {
    animation: skeleton-worker-activate 22s ease-in-out infinite;
}
#tab-label-agent-lovelace {
    animation: skeleton-worker-activate 22s ease-in-out 0.4s infinite;
}
#tab-label-agent-hopper {
    animation: skeleton-worker-activate 22s ease-in-out 0.8s infinite;
}
#tab-label-agent-curie {
    animation: skeleton-worker-activate 22s ease-in-out 1.2s infinite;
}
#tab-label-agent-dijkstra {
    animation: skeleton-reviewer-activate 22s ease-in-out infinite;
}
#tab-label-agent-knuth {
    animation: skeleton-reviewer-activate 22s ease-in-out 0.4s infinite;
}
#card-turing-name,
#card-turing-status {
    animation: skeleton-worker-activate 22s ease-in-out infinite;
}
#card-lovelace-name,
#card-lovelace-status {
    animation: skeleton-worker-activate 22s ease-in-out 0.4s infinite;
}
#card-hopper-name,
#card-hopper-status {
    animation: skeleton-worker-activate 22s ease-in-out 0.8s infinite;
}
#card-curie-name,
#card-curie-status {
    animation: skeleton-worker-activate 22s ease-in-out 1.2s infinite;
}
#card-dijkstra-name,
#card-dijkstra-status {
    animation: skeleton-reviewer-activate 22s ease-in-out infinite;
}
#card-knuth-name,
#card-knuth-status {
    animation: skeleton-reviewer-activate 22s ease-in-out 0.4s infinite;
}
#feed-1-icon {
    animation: worker-activate 22s ease-in-out infinite;
}
#feed-2-icon {
    animation: worker-activate 22s ease-in-out 0.4s infinite;
}
#feed-3-icon {
    animation: worker-activate 22s ease-in-out 0.8s infinite;
}
#feed-4-icon {
    animation: worker-activate 22s ease-in-out 1.2s infinite;
}
#feed-1-msg {
    animation: skeleton-worker-activate 22s ease-in-out infinite;
}
#feed-2-msg {
    animation: skeleton-worker-activate 22s ease-in-out 0.4s infinite;
}
#feed-3-msg {
    animation: skeleton-worker-activate 22s ease-in-out 0.8s infinite;
}
#feed-4-msg {
    animation: skeleton-worker-activate 22s ease-in-out 1.2s infinite;
}
@keyframes reviewer-activate {
    0%,
    47% {
        color: var(--illust-stroke-faint);
    }
    52% {
        color: var(--illust-active);
    }
    65% {
        color: var(--illust-active);
    }
    69% {
        color: var(--illust-stroke-faint);
    }
    to {
        color: var(--illust-stroke-faint);
    }
}
#card-dijkstra-indicator {
    animation: reviewer-activate 22s ease-in-out infinite;
}
#card-knuth-indicator {
    animation: reviewer-activate 22s ease-in-out 0.4s infinite;
}
#tab-dot-agent-dijkstra {
    animation: reviewer-activate 22s ease-in-out infinite;
}
#tab-dot-agent-knuth {
    animation: reviewer-activate 22s ease-in-out 0.4s infinite;
}
#feed-5-icon {
    animation: reviewer-activate 22s ease-in-out infinite;
}
#feed-6-icon {
    animation: reviewer-activate 22s ease-in-out 0.4s infinite;
}
#feed-5-msg {
    animation: skeleton-reviewer-activate 22s ease-in-out infinite;
}
#feed-6-msg {
    animation: skeleton-reviewer-activate 22s ease-in-out 0.4s infinite;
}
@media (max-width: 1023px) {
    .demo-sidebar {
        display: none;
    }
}
@media (max-width: 767px) {
    .tab-bar,
    .titlebar {
        display: none;
    }
    #illustration-root {
        border: none;
        border-radius: 0;
    }
    .repository-body {
        padding: 0;
        gap: 0;
    }
    .illustration-wrapper {
        padding: 20px;
    }
}