mistral-vibe/vibe/cli/textual_ui/app.tcss

Screen {
    background: $background;
}

#chat {
    height: 1fr;
    width: 100%;
    background: $background;
    padding: 0;
}

#loading-area {
    height: auto;
    width: 100%;
    background: $background;
    padding: 1 0 0 0;
    layout: horizontal;
    align: left middle;
}

#loading-area-content {
    width: 1fr;
    height: auto;
    align: left middle;
}

#todo-area {
    height: auto;
    max-height: 10;
    width: 100%;
    background: $background;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: left;
    margin-top: 0;

    .tool-result-border {
        display: none;
    }

    &.loading-active .tool-result-border {
        display: block;
    }

    .tool-result-content {
        max-height: 9;
        overflow-y: auto;
        scrollbar-visibility: hidden;
    }
}

#bottom-app-container {
    height: auto;
    width: 100%;
    background: $background;
}

#bottom-bar {
    height: auto;
    width: 100%;
    background: $background;
    padding: 0 0 1 0;
    align: left middle;
    layout: horizontal;
}

#spacer {
    width: 1fr;
    height: auto;
    background: transparent;
}

#messages {
    layout: stream;
    width: 100%;
    height: auto;
    text-align: left;
    margin-top: 1;
    margin-bottom: 0;
}

#input-container {
    height: auto;
    width: 100%;
    background: $background;
    padding: 0;
    margin: 0;
}

#completion-popup {
    width: 100%;
    padding: 1 1 1 1;
    color: $text;
}

#input-box {
    height: auto;
    width: 100%;
    background: $background;
    border-top: solid $foreground-muted;
    border-bottom: solid $foreground-muted;
    padding: 0 1;

    &.border-warning {
        border-top: solid $warning;
        border-bottom: solid $warning;
    }

    &.border-safe {
        border-top: solid $success;
        border-bottom: solid $success;
    }

    &.border-error {
        border-top: solid $error;
        border-bottom: solid $error;
    }
}

#input-body {
    height: auto;
}

#prompt {
    width: auto;
    background: transparent;
    color: $primary;
    text-style: bold;
    padding: 0 1 0 0;
}

#input {
    width: 1fr;
    height: auto;
    max-height: 16;
    background: transparent;
    color: $text;
    border: none;
    padding: 0;
    scrollbar-visibility: hidden;
}

ToastRack {
    align: left bottom;
    padding: 0;
    margin: 0 0 6 0;
}

Markdown MarkdownFence {
    overflow-x: auto;
    scrollbar-size-horizontal: 1;
    max-width: 95%;
}

.user-message {
    margin-top: 1;
    padding: 1 0;
    width: 100%;
    height: auto;
    background: $surface;

    &:first-child {
        margin-top: 0;
    }

    &.pending {
        .user-message-prompt,
        .user-message-content {
            opacity: 0.7;
            text-style: italic;
        }
    }
}

.user-message-container {
    width: 100%;
    height: auto;
}

.user-message-prompt {
    width: auto;
    height: auto;
    color: $primary;
    text-style: bold;
}

.user-message-content {
    width: 1fr;
    height: auto;
    color: $foreground;
    text-style: bold;
}

.assistant-message {
    margin-top: 1;
    width: 100%;
    height: auto;
}

.assistant-message-container {
    width: 100%;
    height: auto;
    align: left top;
}

.assistant-message-dot {
    width: auto;
    height: auto;
    color: $foreground;
}

.assistant-message-content {
    width: 1fr;
    height: auto;
    padding: 0;

    Markdown {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
    }
}

.assistant-message-content Markdown > *:last-child {
    margin-bottom: 0;
}

.interrupt-message {
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    width: 100%;
}

.interrupt-container {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.interrupt-border {
    width: auto;
    height: 100%;
    padding: 0 1 0 2;
    color: $foreground-muted;
}

.interrupt-content {
    width: 1fr;
    height: auto;
    margin: 0;
    color: $text-warning;
}

.error-message {
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    width: 100%;
}

.error-container {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.error-border {
    width: auto;
    height: 100%;
    padding: 0 1 0 2;
    color: $foreground-muted;
}

.error-content {
    width: 1fr;
    height: auto;
    margin: 0;
    color: $error;
    text-style: bold;
}

.warning-message {
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    width: 100%;
}

.warning-container {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.warning-border {
    width: auto;
    height: 100%;
    padding: 0 1 0 2;
    color: $foreground-muted;
}

.warning-content {
    width: 1fr;
    height: auto;
    margin: 0;
    color: $text-warning;
}

.user-command-message {
    margin-top: 0;
    margin-bottom: 0;
    height: auto;
    width: 100%;
}

.user-command-container {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.user-command-border {
    width: auto;
    height: 100%;
    padding: 0 1 0 2;
    color: $foreground-muted;
}

.user-command-content {
    width: 1fr;
    height: auto;
    margin: 0;

    Markdown {
        margin: 0;
        padding: 0;
    }

    Markdown > *:first-child {
        margin-top: 0;
    }

    Markdown > *:last-child {
        margin-bottom: 0;
    }
}

.bash-output-message {
    margin-top: 1;
    width: 100%;
    height: auto;
}

.bash-output-container {
    width: 100%;
    height: auto;
    padding: 1 2;
    background: $surface;
}

.bash-cwd-line,
.bash-command-line {
    width: 100%;
    height: auto;
    margin-bottom: 1;
    align: left middle;
}

.bash-cwd {
    width: auto;
    color: $text-muted;
}

.bash-cwd-spacer,
.bash-command-spacer {
    width: 1fr;
}

.bash-chevron {
    width: auto;
    color: $primary;
    text-style: bold;
}

.bash-command {
    width: auto;
    color: $foreground;
}

.bash-output {
    width: 100%;
    color: $foreground;
}

.bash-exit-success {
    width: auto;
    color: $text-success;
}

.bash-exit-failure {
    width: auto;
    color: $text-error;
}

.bash-exit-code {
    width: auto;
    color: $text-muted;
}

.unknown-event {
    height: auto;
    color: $text-muted;
}

StatusMessage {
    width: 100%;
    height: auto;

    Horizontal {
        width: 100%;
        height: auto;
    }
}

.status-indicator-icon {
    width: auto;
    height: auto;
    color: $foreground;
    margin-right: 1;

    &.success {
        color: $text-success;
    }

    &.error {
        color: $text-error;
    }
}

.status-indicator-text {
    width: 1fr;
    height: auto;
    color: $foreground;
}

.compact-message {
    width: 100%;
    height: auto;
    margin-top: 1;
}

.tool-call {
    width: 100%;
    height: auto;
    margin-top: 1;
}

.tool-result {
    width: 100%;
    height: auto;
    margin-top: 0;
    margin-left: 0;
    padding: 0;
    background: transparent;
    color: $foreground;

    &.error-text {
        color: $text-error;
    }

    &.warning-text {
        color: $text-warning;
    }
}

.tool-result-container {
    width: 100%;
    height: auto;
    margin-top: 0;
    padding: 0;
}

.tool-result-border {
    width: auto;
    height: 100%;
    padding: 0 1 0 2;
    color: $foreground-muted;
}

.tool-result-content {
    width: 1fr;
    height: auto;
    padding: 0;
}

.tool-call-widget {
    width: 100%;
    height: auto;
    color: $foreground;
}

.tool-call-detail {
    height: auto;
    color: $text-muted;
}

.tool-result-widget {
    width: 100%;
    height: auto;
    color: $foreground;

    Static {
        height: auto;
    }
}

.tool-result-detail {
    height: auto;
    margin-top: 0;
    color: $text-muted;
}

.tool-result-error {
    color: $text-error;
}

.tool-result-warning {
    color: $text-warning;
}

.diff-header {
    height: auto;
    color: $text-muted;
    text-style: bold;
}

.diff-removed {
    height: auto;
    color: $text-error;
}

.diff-added {
    height: auto;
    color: $text-success;
}

.diff-range {
    height: auto;
    color: $primary;
}

.diff-context {
    height: auto;
    color: $text-muted;
}

.todo-empty {
    height: auto;
    color: $text-muted;
}

.todo-pending {
    height: auto;
    color: $foreground;
}

.todo-in_progress {
    height: auto;
    color: $warning;
}

.todo-completed {
    height: auto;
    color: $success;
}

.todo-cancelled {
    height: auto;
    color: $text-muted;
}

#todo-area .tool-result {
    margin-left: 0;
}

.loading-widget {
    width: 100%;
    height: auto;
}

.loading-container {
    width: auto;
    height: auto;
}

.loading-indicator {
    width: auto;
    height: auto;
    color: $warning;
    margin-right: 1;
}

.loading-status {
    width: auto;
    height: auto;
}

.loading-char {
    width: auto;
    height: auto;
}

.loading-ellipsis {
    width: auto;
    height: auto;
    color: $text-muted;
}

.loading-hint {
    width: auto;
    height: auto;
    color: $foreground;
}

WelcomeBanner {
    width: 100%;
    height: auto;
    border: round $surface;
    border-title-align: center;
    text-align: center;
    content-align: center middle;
    padding: 2 0;
    margin: 1 0 0 0;
    color: $foreground;

    .muted {
        color: $text-muted;
    }
}

#config-app {
    width: 100%;
    height: auto;
    background: $background;
    border: round $foreground-muted;
    padding: 0 1;
    margin: 0 0 1 0;
}

#config-content {
    width: 100%;
    height: auto;
}

.settings-title {
    height: auto;
    text-style: bold;
    color: $primary;
}

.settings-option {
    height: auto;
    color: $foreground;
}

.settings-cursor-selected {
    color: $primary;
    text-style: bold;
}

.settings-label-selected {
    color: $text;
    text-style: bold;
}

.settings-value-toggle-on-selected {
    color: $text-success;
    text-style: bold;
}

.settings-value-toggle-on-unselected {
    color: $success;
}

.settings-value-toggle-off {
    color: $text-muted;
}

.settings-value-cycle-selected {
    color: $primary;
    text-style: bold;
}

.settings-value-cycle-unselected {
    color: $primary;
}

.settings-help {
    height: auto;
    color: $text-muted;
}

#approval-app {
    width: 100%;
    height: auto;
    max-height: 16;
    background: $background;
    border: round $foreground-muted;
    padding: 0 1;
    margin: 0 0 1 0;
}

#approval-content {
    width: 100%;
    height: auto;
}

.approval-tool-info-scroll {
    width: 100%;
    height: auto;
    max-height: 8;
}

.approval-title {
    height: auto;
    text-style: bold;
    color: $warning;
}

.approval-tool-info-container {
    width: 100%;
    height: auto;
}

.tool-approval-widget {
    width: 100%;
    height: auto;

    Static {
        width: 100%;
        height: auto;
    }

    Vertical {
        width: 100%;
        height: auto;
    }
}

.approval-option {
    height: auto;
    color: $foreground;
}

.approval-cursor-selected {
    &.approval-option-yes {
        color: $text-success;
        text-style: bold;
    }

    &.approval-option-no {
        color: $text-error;
        text-style: bold;
    }
}

.approval-option-selected {
    &.approval-option-yes {
        color: $success;
    }

    &.approval-option-no {
        color: $error;
    }
}

.approval-help {
    height: auto;
    color: $text-muted;
}

.approval-description {
    height: auto;
    color: $foreground;
}

.code-block {
    height: auto;
    color: $foreground;
    background: $surface;
    padding: 1;
}

Horizontal {
    width: 100%;
    height: auto;
}

ExpandingBorder {
    width: auto;
    height: 100%;
    content-align: left bottom;
}

ModeIndicator {
    width: auto;
    height: auto;
    background: transparent;
    padding: 0;
    margin: 0 0 0 1;
    color: $text-muted;
    align: left middle;

    &.mode-safe {
        color: $success;
    }

    &.mode-neutral {
        color: $text-muted;
    }

    &.mode-destructive {
        color: $warning;
    }

    &.mode-yolo {
        color: $error;
    }
}

PathDisplay {
    width: auto;
    height: auto;
    background: transparent;
    padding: 0;
    margin: 0;
    color: $primary;
}

ContextProgress {
    width: auto;
    height: auto;
    background: transparent;
    padding: 0;
    margin: 0;
    color: $foreground;
}