:root {
    --terminal-font-family: "IBM Plex Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    --terminal-font-size: 12px;
}

.terminal-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-third);
    /* 
    background-color: color-mix(in srgb,
            var(--color-primary) 40%,
            var(--color-file-explorer) 60%); */
    overflow: hidden;
}

.terminal-scroll-wrapper {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* scrollbar-width: thin; */
    scrollbar-color: var(--scroll-thumb) var(--scroll-background);
    position: relative;
    padding-bottom: 0;
}

.terminal-output {
    flex-grow: 1;
    white-space: pre-wrap;
    overflow-y: auto;
    font-family: var(--terminal-font-family);
    font-size: var(--terminal-font-size);
    line-height: 1.6;
    /* color: var(--token-identifier-js, var(--editor-foreground)); */
    padding-bottom: 0;
    color: var(--color-text);
}

.terminal-block {
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-fourth);
    border-top: 1px solid transparent;
}

.terminal-block:last-of-type {
    border-bottom: none;
}

.terminal-input-line {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    padding-top: 0px;
    background-color: var(--color-third);

    /* Sticky positioning */
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Ensures it spans the full width while sticky */
    z-index: 10;
    /* Keeps the input and shader above the scrolling text */
}

.terminal-input-line::before {
    content: "";
    position: absolute;

    /* Position the shader exactly above the input line */
    bottom: calc(100% - 1px);
    left: 0;
    width: 100%;
    height: 8px;
    /* Adjust this to control how "long" the fade is */

    /* Gradient goes from transparent at its top to color-third at the bottom */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            /* Fully transparent */
            var(--color-third) 100%);

    /* Prevents the shader from blocking clicks on the text behind it */
    pointer-events: none;
}

.terminal-input-line .prompt {
    font-family: var(--terminal-font-family);
    font-size: var(--terminal-font-size);
    line-height: 1.6;
    /* color: var(--token-string, var(--editor-keyword)); */
    padding-right: 8px;
    user-select: none;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-note-text);
    color: var(--token-objectName, var(--editor-keyword));
}

#terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    /* color: var(--token-keyword-declaration, var(--editor-keyword)); */
    font-family: var(--terminal-font-family);
    font-size: var(--terminal-font-size);
    line-height: 1.6;
    outline: none;
    font-weight: 500;
}

.terminal-cmd {
    padding-bottom: 8px;
    font-family: var(--terminal-font-family);
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.terminal-cmd .terminal-prompt {
    color: var(--token-objectName, var(--editor-keyword));
    font-weight: 500;
    margin-right: 8px;
}

.terminal-cmd .terminal-input {
    /* color: var(--token-keyword-declaration, var(--editor-keyword)); */
    font-weight: 500;
}

.terminal-welcome {
    /* color: var(--token-keyword-declaration, var(--editor-keyword)); */
    font-weight: 500;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
    display: none;
}

.terminal-command {
    /* color: var(--token-keyword-declaration, var(--editor-keyword)); */
    font-weight: 500;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.terminal-usage {
    /* color: var(--token-comment, var(--editor-foreground)); */
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.terminal-file {
    /* color: var(--token-objectName, var(--editor-keyword)); */
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.terminal-dir {
    /* color: var(--token-objectName, var(--editor-keyword)); */
    font-weight: bold;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.terminal-meta {
    /* color: var(--token-comment, var(--editor-foreground)); */
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

#custom-input-container {
    caret-color: transparent;
    outline: none;
    font-family: var(--terminal-font-family);
    background: transparent;
    color: var(--editor-foreground, var(--editor-keyword));
    color: var(--textHilight);
    min-height: 1em;
    white-space: pre-wrap;
    cursor: text;
    font-weight: 500;
    width: calc(100% - 32px);
    font-size: var(--terminal-font-size);
    line-height: 1.45;
    contentEditable: true;
    spellcheck: false;
}

.caret {
    display: inline-block;
    width: 7px;
    height: 16px;
    background-color: transparent;
    border: 1px solid var(--color-text, var(--editor-foreground));
    vertical-align: bottom;
    opacity: 0.75;
    margin: 0 2px;
}

#custom-input-container:focus .caret {
    background: var(--color-text, var(--editor-foreground));
    border: 1px solid var(--color-text, var(--editor-foreground));
    opacity: 1;
}

@keyframes blink {
    50% {
        background: transparent;
        border: 1px solid var(--color-note-text, var(--editor-foreground));
    }
}

.terminal-logo {
    white-space: pre;
    font-family: var(--terminal-font-family);
    /* color: var(--token-comment, var(--editor-keyword)); */
    line-height: 1.2;
    font-weight: bold;
    font-size: 4px;
    display: none;
}

.terminal-confirm {
    color: var(--color-error);
    margin-bottom: 8px;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
    border-radius: 0px;
    color: var(--color-warn);
    border: 1px solid var(--color-warn);
    background-color: rgba(255, 193, 7, 0.03);
    padding: 12px 12px;
    margin: 8px 0;
}

.help-header {
    /* color: var(--token-keyword-declaration, var(--editor-keyword)); */
    font-style: italic;
    padding: 8px 0;
    margin-bottom: 12px;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.help-section {
    margin-bottom: 0;
}

.help-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 2px 12px;
    /* color: var(--token-string, var(--editor-keyword)); */
    border-left: 1px solid var(--color-border-hover);
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.help-toggle:hover {
    background: var(--color-third);
}

.help-chevron {
    font-size: 10px;
}

.help-section[data-open="true"] .help-chevron {
    transform: rotate(90deg);
}

.help-commands {
    display: none;
    padding-left: 12px;
}

.help-section[data-open="true"] .help-commands {
    display: block;
}

.help-category {
    /* color: var(--token-string, var(--editor-keyword)); */
    margin: 12px 0 6px 0;
    padding: 2px 12px;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.help-command {
    display: flex;
    padding: 2px 12px;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
    margin-left: 12px;
    border-radius: 3px;
}

.help-command:hover {
    background: var(--color-third);
}

.help-cmd-name {
    /* color: var(--token-objectName, var(--editor-keyword)); */
    font-weight: 500;
    min-width: 120px;
    padding-right: 16px;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.help-cmd-desc {
    flex: 1;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.help-footer {
    /* color: var(--token-comment, var(--editor-foreground)); */
    font-style: italic;
    padding: 12px 0;
    margin-top: 8px;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.help-highlight {
    /* color: var(--token-keyword-declaration, var(--editor-keyword)); */
    font-weight: 500;
    background: var(--color-fourth);
    padding: 0px 4px;
    border-radius: 3px;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
    border: thin solid var(--color-border-color);
}

.man-header {
    /* color: var(--token-keyword-declaration, var(--editor-keyword)); */
    padding: 8px 0 8px 14px;
    font-weight: 500;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.man-description {
    /* color: var(--token-identifier-js, var(--editor-foreground)); */
    line-height: 1.6;
    padding: 12px;
    border-left: 1px solid var(--color-border-hover);
    font-size: var(--terminal-font-size);
}

.man-summary {
    /* color: var(--token-comment, var(--editor-foreground)); */
    font-style: italic;
    padding: 2px 12px;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.man-usage {
    /* color: var(--token-string, var(--editor-keyword)); */
    font-weight: 500;
    padding: 2px 12px;
    background: var(--color-blur);
    border-left: 1px solid var(--color-border-hover);
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}

.man-error {
    color: var(--token-error, #ff6b6b);
    font-weight: 500;
    padding: 2px 12px;
    background: rgba(255, 107, 107, 0.1);
    /* border-left: 2px solid var(--token-error, #ff6b6b); */
    font-size: var(--terminal-font-size);
    line-height: 1.6;
    border-radius: 0px;
    color: var(--color-error);
    border: 1px solid var(--color-error);
    background-color: rgba(220, 53, 69, 0.05);
    padding: 12px 12px;
}

.git-table-line {
    white-space: pre;
    font-family: var(--terminal-font-family);
    font-size: var(--terminal-font-size);
    line-height: 1.6;
    padding: 2px 12px;
    border-radius: 3px;
}

.git-table-line:hover {
    background-color: var(--color-third);
}

.git-cmd {
    /* color: var(--token-objectName, var(--editor-keyword)); */
    font-weight: 500;
    font-size: var(--terminal-font-size);
    line-height: 1.6;
}