vibe/vibe/cli/textual_ui/app.tcss

$mistral_orange: #FF8205;

* {
    scrollbar-size: 1 1;
}

*:ansi {
    link-color-hover: $ansi-background;
}

Screen {
    background: transparent;
}

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

TextArea > .text-area--cursor {
    color: $foreground;
}

#chat {
    layout: stream;
    height: 1fr;
    width: 100%;
    background: transparent;
    padding: 0;
    align-vertical: bottom;
}

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

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

#clipboard-notice {
    width: auto;
    height: 1;
    color: $text-muted;
    &:ansi {
        text-style: dim;
    }
}

#bottom-app-container,
#input-container {
    height: auto;
    width: 100%;
    background: transparent;
}

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

.queue-header-container {
    width: 100%;
    height: auto;
}

.queue-header-content {
    width: auto;
    height: auto;
    text-style: bold italic;
    color: $mistral_orange;
}

.queue-header-separator {
    width: 100%;
    height: 1;
    color: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

#bottom-bar {
    height: auto;
    width: 100%;
    background: transparent;
    padding: 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 {
    padding: 0;
    margin: 0;
}

#completion-popup {
    display: none;
    width: 100%;
    height: auto;
    color: $foreground;
    background: $background;
    border: solid $foreground-muted;
    overflow-y: auto;
    scrollbar-size-vertical: 1;
    /* max-height and padding set in completion_popup.py */
}

OptionList, OptionList:focus {
    background: $background;
    background-tint: transparent;
}

#completion-popup _CompletionRow {
    height: auto;
    width: 1fr;
}

#completion-popup _CompletionItem {
    height: auto;
}

#completion-popup .completion-command {
    /* width set per-row in completion_popup.py, capped to 30% of the popup */
    max-width: 30%;
    margin-right: 2;
    text-style: bold;
}

#completion-popup .completion-description {
    width: 1fr;
    color: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

#completion-popup _CompletionRow.completion-selected .completion-command {
    text-style: bold reverse;
}

#completion-popup _CompletionRow.completion-selected .completion-description {
    color: $foreground;
    text-style: italic;
}

#input-box {
    height: auto;
    width: 100%;
    background: transparent;
    border: none;
    border-top: solid $foreground-muted;
    border-bottom: solid $foreground-muted;
    border-title-align: right;
    border-title-color: $text-muted;

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

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

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

    &.border-recording {
        border-top: solid $mistral_orange;
        border-bottom: solid $mistral_orange;
        border-title-color: $mistral_orange;
    }
}

#input-body {
    height: auto;
}

#prompt,
#prompt-spinner,
#recording-indicator {
    width: auto;
    background: transparent;
    color: $mistral_orange;
    text-style: bold;
    padding: 0 1 0 0;
}

#input {
    width: 1fr;
    height: auto;
    min-height: 3;
    max-height: 50vh;
    background: transparent;
    color: $foreground;
    border: none;
    padding: 0;
    scrollbar-visibility: hidden;

    &.recording {
        color: $text-muted;

        &:ansi {
            text-style: dim;
        }
    }
}

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

Markdown {
    color: $foreground;

    .code_inline {
        color: $success;
        background: transparent;
        text-style: bold;
    }

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

        & > Label {
            padding: 0;
        }
    }

    MarkdownTable {
        background: transparent;
    }

    MarkdownBlockQuote {
        background: transparent;
        border-left: outer $foreground-muted;
    }

    MarkdownBullet,
    MarkdownBulletList,
    MarkdownOrderedList {
        color: $foreground;
    }
}

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

    &.pending {
        margin-top: 0;

        .user-message-prompt,
        .user-message-content {
            text-style: italic;
        }
        .user-message-separator {
            display: none;
        }
        .user-message-wrapper {
            margin-top: 0;
        }
    }

    &.no-separator .user-message-separator {
        display: none;
    }

    &.follows-user {
        margin-top: 0;

        .user-message-wrapper {
            margin-top: 0;
        }
    }
}

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

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

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

.user-message-attachments {
    width: 100%;
    height: auto;
    padding: 0 2 0 2;
    color: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

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

.user-message-attachment-label {
    width: auto;
    height: auto;
}

.user-message-attachment-link {
    width: auto;
    height: auto;
}

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

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

.slash-command-message {
    .user-message-content {
        color: $mistral_orange;
    }
}

.user-message-separator {
    width: 100%;
    height: 1;
    color: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

.assistant-message {
    layout: stream;
    margin-top: 1;
    width: 100%;
    height: auto;
    padding: 0 2 0 2;

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

        & > MarkdownBlock:last-child {
            margin-bottom: 0;
        }
    }
}

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

.reasoning-message-wrapper {
    width: 100%;
    height: auto;
}

.reasoning-message-header {
    width: 100%;
    height: auto;
    pointer: pointer;
}

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

    &.success {
        color: $success;
    }
}

.reasoning-collapsed-text,
.reasoning-triangle {
    width: auto;
    height: auto;
    color: $text-muted;
    text-style: italic;

    &:ansi {
        text-style: dim;
    }
}

.reasoning-triangle {
    margin-left: 1;
}

.reasoning-message-content {
    layout: stream;
    width: 100%;
    height: auto;
    padding: 0 2 0 2;
    margin: 0;
    color: $text-muted;
    text-style: italic;

    &:ansi {
        text-style: dim;
    }

    * {
        color: $text-muted;
        text-style: italic;

        &:ansi {
            text-style: dim;
        }
    }

    & > MarkdownBlock:last-child {
        margin-bottom: 0;
    }
}

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

.plan-file-message {
    margin-top: 1;
    margin-bottom: 0;
    height: auto;
    width: 100%;

    .plan-file-wrapper {
        height: auto;
        width: 100%;
        border: solid $foreground-muted;
        padding: 0 1;
    }

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

        & > MarkdownBlock:first-child {
            margin: 0 0 1 0;
        }

        & > MarkdownBlock:last-child {
            margin: 1 0 0 0;
        }
    }
}

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

.interrupt-border,
.error-border,
.warning-border,
.user-command-border {
    width: auto;
    height: 100%;
    padding: 0 1 0 2;
}

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

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

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

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

    Markdown {
        margin: 0;
        padding: 0;

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

        & > MarkdownBlock:last-child {
            margin-bottom: 0;
        }
    }
}

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

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

    &.queued {
        margin-top: 0;

        .bash-command,
        .bash-prompt {
            text-style: italic;
        }
    }
}

.bash-command-line {
    width: 100%;
    height: auto;
    margin: 0;
}

.bash-prompt {
    width: auto;
    height: auto;

    &.bash-pending {
        color: $foreground;
    }

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

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

    &.bash-interrupted {
        color: $warning;
    }
}

.bash-command {
    width: 1fr;
    height: auto;
}

.bash-output-container {
    width: 100%;
    height: auto;
    margin: 0;
}

.bash-output-border {
    width: auto;
    height: 100%;
    padding: 0 1 0 2;
    color: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

.bash-output-body {
    width: 1fr;
    height: auto;
    padding-right: 2;
}

.bash-output {
    width: 1fr;
    height: auto;
}

.collapsible-section {
    width: 1fr;
    height: auto;
}

.collapsible-toggle {
    width: auto;
    height: auto;
    margin-top: 0;
    pointer: pointer;
}

.collapsible-triangle {
    width: auto;
    height: auto;
    color: $text-muted;
    margin-right: 1;

    &:ansi {
        text-style: dim;
    }
}

.collapsible-toggle-label {
    width: auto;
    height: auto;
    color: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

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

    &:ansi {
        text-style: dim;
    }
}

StatusMessage {
    width: 100%;
    height: auto;

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

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

    &.success {
        color: $success;
    }

    &.error {
        color: $error;
    }

    &.muted {
        color: $text-muted;

        &:ansi {
            text-style: dim;
        }
    }
}

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

.status-indicator-suffix {
    width: 1fr;
    height: auto;
    margin-left: 1;
    color: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

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

.tool-call-header .status-indicator-text {
    width: 1fr;
    text-wrap: wrap;
}

.tool-call-header .status-indicator-suffix {
    width: auto;
}

.tool-call.no-gap {
    margin-top: 0;
}

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

.tool-stream-message {
    width: 100%;
    height: auto;
    color: $text-muted;
    padding: 0 2 0 2;

    &:ansi {
        text-style: dim;
    }
}

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

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

    &.warning-text {
        color: $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: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

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

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

.tool-result-widget Static {
    height: auto;
}

.tool-result-widget Markdown,
.tool-approval-widget Markdown {
    padding: 0;
    margin: 0;
}

.tool-result-widget Markdown > *,
.tool-approval-widget Markdown > * {
    margin-top: 0;
    margin-bottom: 0;
}

.tool-result-widget Markdown MarkdownFence,
.tool-approval-widget Markdown MarkdownFence {
    margin: 0;
    padding: 0;
}

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

    &:ansi {
        text-style: dim;
    }
}

.tool-result-detail {
    margin-top: 0;
}

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

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

.diff-scroll {
    width: 1fr;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-size-horizontal: 1;

    .collapsible-section,
    VerticalGroup {
        width: auto;
    }
}

.diff-removed,
.diff-added,
.diff-context {
    width: auto;
    min-width: 100%;
    height: 1;

    .diff-gutter {
        width: auto;
        height: 1;
    }

    .diff-body {
        width: auto;
        height: 1;
        text-wrap: nowrap;
    }
}

.diff-removed {
    &:dark {
        background: $error 10%;
    }

    &:light {
        background: $error 20%;
    }

    &:ansi {
        background: initial;
    }
}

.diff-added {
    &:dark {
        background: $success 10%;
    }

    &:light {
        background: $success 20%;
    }

    &:ansi {
        background: initial;
    }
}

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

    &:ansi {
        text-style: dim;
    }
}

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

    &:ansi {
        text-style: dim;
    }
}

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

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

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

.loading-widget {
    width: 100%;
    height: auto;
    color: $text-muted;
}

.loading-container,
.loading-indicator,
.loading-status,
.loading-hint {
    width: auto;
    height: auto;
}

.loading-indicator {
    margin-right: 1;
}

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

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

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

    &:ansi {
        text-style: dim;
    }
}

.loading-debounce {
    width: auto;
    height: auto;
    margin-left: 1;
}

.history-load-more-message {
    width: 100%;
    height: auto;
    text-align: center;
    content-align: center middle;
    margin: 1 0;
}

.history-load-more-container {
    width: 100%;
    height: auto;
    content-align: center middle;
}

.history-load-more-button {
    background: transparent;
    border: none;
    color: $warning;
    text-style: bold;
    pointer: pointer;
    padding: 1;
}

.history-load-more-button:hover {

}

#config-app, #voice-app, #mcp-app, #connectorauth-app, #mcpoauth-app {
    width: 100%;
    height: auto;
    background: transparent;
    border: solid $foreground-muted;
    padding: 0 1;
    margin: 0;
}

#config-content, #voice-content, #mcp-content, #connectorauth-content, #mcpoauth-content {
    width: 100%;
    height: auto;
}

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

#config-options, #mcp-options, #connectorauth-options, #mcpoauth-options {
    width: 100%;
    max-height: 50vh;
    border: none;
}

#config-options:focus, #mcp-options:focus, #connectorauth-options:focus, #mcpoauth-options:focus {
    border: none;
}

#connectorauth-detail, #mcpoauth-detail {
    margin: 1 0;
}

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

    &:ansi {
        text-style: dim;
    }
}

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

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

.proxy-label-line {
    height: auto;
}

.proxy-input {
    width: 100%;
    height: auto;
    border: none;
    border-left: wide $foreground-muted;
    padding: 0 0 0 1;
}

#approval-app {
    width: 100%;
    /* height set by ApprovalApp._recompute_height; max-height below caps it */
    height: 1;
    max-height: 70vh;
    background: transparent;
    border: solid $foreground-muted;
    padding: 0 1;
    margin: 0;
}

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

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

.approval-tool-info-scroll {
    width: 100%;
    height: 1fr;
}

.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,
    Vertical {
        width: 100%;
        height: auto;
    }
}

.approval-option {
    height: auto;
    color: $foreground;
    margin-bottom: 1;

    &:last-of-type {
        margin-bottom: 0;
    }
}

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

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

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

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

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

    &:ansi {
        text-style: dim;
    }
}

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

    &:ansi {
        text-style: dim;
    }
}

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

#question-app {
    width: 100%;
    height: auto;
    max-height: 70vh;
    background: transparent;
    border: solid $foreground-muted;
    padding: 0 1;
    margin: 0;
}

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

.question-tabs {
    height: auto;
    color: $primary;
    margin-bottom: 1;
}

.question-title {
    height: auto;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}

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

.question-option-selected {
    color: $primary;
    text-style: bold;
}

.question-other-row {
    width: 100%;
    height: auto;
}

.question-other-prefix {
    width: auto;
    height: auto;
    color: $foreground;
}

.question-other-input {
    width: 1fr;
    height: auto;
    background: transparent;
    border: none;
    padding: 0;
}

.question-other-static {
    width: auto;
    height: auto;
    color: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

.question-submit {
    height: auto;
    color: $foreground;
    margin-top: 1;
}

.question-footer-note {
    height: auto;
    color: $text-muted;
    text-style: italic;
    margin-top: 1;

    &:ansi {
        text-style: dim;
    }
}

.question-help {
    height: auto;
    color: $text-muted;
    margin-top: 1;

    &:ansi {
        text-style: dim;
    }
}

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

PathDisplay,
ContextProgress {
    width: auto;
    height: auto;
    background: transparent;
    padding: 0;
    margin: 0;
    color: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

NarratorStatus {
    width: auto;
    height: auto;
    background: transparent;
    padding: 0;
    margin: 0;
}

#banner-container {
    align: left top;
    padding: 1 1 0 0;
    width: auto;
}

.banner-chat {
    width: auto;
}

#banner-info {
    width: auto;
    height: auto;
    margin-top: 1;
    content-align: left top;
}

.banner-line {
    width: auto;
    height: auto;
}

#banner-brand {
    color: $mistral_orange;
    text-style: bold;
    width: auto;
}

.banner-spacer {
    width: 1;
    color: transparent;
}

.banner-meta {
    color: $foreground;
    width: auto;
}

#banner-model {
    color: $secondary;
    width: auto;
}

#banner-user-plan {
    width: auto;
}

#banner-meta-counts {
    width: auto;
}

.banner-cmd {
    color: $secondary;
    width: auto;
}

.petit-chat {
    color: $foreground;
    width: 12;
}

.whats-new-message {
    border-left: heavy $mistral_orange;
    margin-bottom: 1;

    Markdown {
        padding: 0 0 0 1;
        margin: 0;

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

        & > MarkdownBlock:last-child {
            margin-bottom: 0;
        }

        MarkdownBulletList,
        MarkdownOrderedList {
            margin-top: 1;
            margin-bottom: 1;
        }

        MarkdownH1 {
            content-align: left middle;
        }
    }
}

.whats-new-message.after-history {
    margin-top: 1;
}

.vscode-extension-promo-message {
    border-left: heavy $mistral_orange;
    margin-bottom: 1;

    Markdown {
        padding: 0 0 0 1;
        margin: 0;

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

        & > MarkdownBlock:last-child {
            margin-bottom: 0;
        }
    }
}

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

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

#sessionpicker-options {
    width: 100%;
    max-height: 50vh;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    border: none;
}

#sessionpicker-options:focus {
    border: none;
}

.sessionpicker-header {
    width: 100%;
    height: auto;
    margin-bottom: 1;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.sessionpicker-help {
    width: 100%;
    height: auto;
    color: $text-muted;
    margin-top: 1;

    &:ansi {
        text-style: dim;
    }
}

/* Debug Console */

#debug-console {
    dock: right;
    width: 40%;
    max-width: 80;
    min-width: 40;
    height: 100%;
    background: transparent;
    border-left: solid $foreground-muted;
    padding: 0 1;
}

#debug-console-header {
    width: 100%;
    height: auto;
    color: $foreground;
    padding: 0 0 1 0;
    text-align: left;
}

#debug-console-log {
    width: 100%;
    height: 1fr;
    background: transparent;
    overflow-x: hidden;
    scrollbar-size: 1 1;
}

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

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

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

#modelpicker-options {
    width: 100%;
    max-height: 50vh;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    border: none;
}

#modelpicker-options:focus {
    border: none;
}

.modelpicker-help {
    width: 100%;
    height: auto;
    color: $text-muted;
    margin-top: 1;

    &:ansi {
        text-style: dim;
    }
}

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

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

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

#thinkingpicker-options {
    width: 100%;
    max-height: 50vh;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    border: none;
}

#thinkingpicker-options:focus {
    border: none;
}

.thinkingpicker-help {
    width: 100%;
    height: auto;
    color: $text-muted;
    margin-top: 1;

    &:ansi {
        text-style: dim;
    }
}

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

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

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

#themepicker-options {
    width: 100%;
    max-height: 50vh;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    border: none;
}

#themepicker-options:focus {
    border: none;
}

.themepicker-help {
    width: 100%;
    height: auto;
    color: $text-muted;
    margin-top: 1;

    &:ansi {
        text-style: dim;
    }
}

FeedbackBar {
    width: auto;
    height: auto;
    margin-left: 1;
}

.user-message.rewind-selected {
    .user-message-content {
        text-style: bold reverse;
    }
}

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

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

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

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

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

.rewind-option-unselected {
    color: $foreground;
}

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

    &:ansi {
        text-style: dim;
    }
}

#feedback-text {
    width: auto;
    height: auto;
    color: $foreground;
}

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

.hook-run-container {
    height: auto;
    width: 100%;
}

.hook-before-tool {
    margin-top: 1;
}

.hook-run-container:empty {
    display: none;
}

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

.hook-system-icon {
    width: auto;
    height: 1;
    padding: 0 1 0 0;
}

.hook-system-content {
    width: 1fr;
    height: auto;
    max-height: 3;
    overflow: hidden;
    color: $text-muted;

    &:ansi {
        text-style: dim;
    }
}

.hook-severity-ok .hook-system-icon {
    color: $success;
}

.hook-severity-warning .hook-system-icon {
    color: $warning;
}

.hook-severity-error .hook-system-icon {
    color: $error;
}