body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: flex-end;
    height: 100vh;
}

ol,
ul {
    padding-left: 17px !important;
    margin: 10px !important;
}

ol {
    list-style-type: decimal !important;
}

ul {
    list-style-type: disc !important;
}

.list-section>ul {
    list-style-type: none;
    margin: 0 !important;
    padding: 0 !important;
}

.list-section>ul>li {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: bold;
}

.list-section>ul>li::before {
    padding-right: 3px;
    margin-top: 3px;
}

.list-section>ul>li.valid::before {
    content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C2.685 0 0 2.685 0 6C0 9.315 2.685 12 6 12C9.315 12 12 9.315 12 6C12 2.685 9.315 0 6 0ZM9 2.67L10.08 3.75L5.25 8.58L2.67 6L3.75 4.92L5.25 6.42L9 2.67Z' fill='%233079D8'/%3E%3C/svg%3E");
}

.list-section>ul>li.invalid::before {
    content: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C2.685 0 0 2.685 0 6C0 9.315 2.685 12 6 12C9.315 12 12 9.315 12 6C12 2.685 9.315 0 6 0ZM3.75 2.67L6 4.92L8.25 2.67L9.33 3.75L7.08 6L9.33 8.25L8.25 9.33L6 7.08L3.75 9.33L2.67 8.25L4.92 6L2.67 3.75L3.75 2.67Z' fill='%23CB4343'/%3E%3C/svg%3E");
}

.menu {
    z-index: 99;
    background-color: var(--vscode-activityBar-background);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.menu-item {
    cursor: pointer;
    padding: .5rem 1rem;
    border-radius: 7px;
}

.menu-item.selected {
    background-color: var(--vscode-activityBar-background);
    border-radius: 7px;
}

.menu-item:hover {
    background-color: var(--vscode-editor-background);
    border-radius: 7px;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip::after {
    content: attr(title);
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover::after {
    visibility: visible;
    opacity: 1;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

p[contenteditable="true"] {
    outline: none;
    max-height: 270px;
    overflow: auto;
    white-space: pre-wrap;
}

#text-input {
    color: var(--vscode-editor-foreground);
}

.user-message {
    background-color: var(--vscode-panel-background);
    color: var(--vscode-sideBar-foreground);
}

.typing-loader {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    animation: loading 1s linear infinite alternate;
    margin-bottom: 4px;
}

@keyframes loading {
    0% {
        background-color: var(--vscode-progressBar-background);
        box-shadow:
            8px 0px 0px 0px var(--vscode-editor-foreground),
            16px 0px 0px 0px var(--vscode-editor-foreground);
    }

    25% {
        background-color: var(--vscode-editor-foreground);
        box-shadow:
            8px 0px 0px 0px var(--vscode-progressBar-background),
            16px 0px 0px 0px var(--vscode-editor-foreground);
    }

    75% {
        background-color: var(--vscode-editor-foreground);
        box-shadow:
            8px 0px 0px 0px var(--vscode-editor-foreground),
            16px 0px 0px 0px var(--vscode-progressBar-background);
    }
}

#google-api-key-text-input {
    border-color: var(--vscode-editor-foreground);
}

.placeholder {
    color: var(--vscode-input-placeholderForeground) !important;
}

.disabled {
    pointer-events: none;
    opacity: .9;
}

.chips {
    color: var(--vscode-editor-foreground);
    outline: .5px solid var(--vscode-editor-foreground);
    position: relative;
    cursor: move;
}

.chips-reference {
    color: var(--vscode-editor-foreground);
    outline: .5px solid var(--vscode-editor-foreground);
    position: relative;
}

.chips-reference:focus {
    color: red;
}

#agents {
    color: var(--vscode-input-placeholderForeground);;
}

#slash-commands {
    color: var(--vscode-input-placeholderForeground);
    margin-left: 5px;
    margin-right: 5px;
}

#bottom-text-input-container {
    background-color: var(--vscode-editor-background);
    border-color: var(--vscode-sideBar-foreground);
}

#text-input-container {
    border-color: var(--vscode-editor-foreground);
}

#add-reference-text {
    outline: 1px solid var(--vscode-editor-foreground);
}

#add-reference-text:focus {
    outline: 1px solid #497BEF;
}

.code_input {
    outline: 1px solid var(--vscode-editor-foreground);
}

.code_input:focus {
    outline: 1px solid #497BEF;
}

.string_input {
    outline: 1px solid var(--vscode-editor-foreground);
}

.string_input:focus {
    outline: 1px solid #497BEF;
}

#clear-chat-button {
    position: fixed;
    top: 8px;
    right: 8px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff;
    padding: 5px 8px;
    border: none;
    border-radius: 4px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 98;
}

.questionnaire-card {
    background-color: var(--vscode-dropdown-background);
}

.questionnaire-card-gradient {
    background-color: #497BEF; 
}


.tippy-box[data-theme~='flutter-blue'] {
    background-color: #287CEB;
    color: white;
}

.tippy-box[data-theme~='flutter-blue'][data-placement^='top']>.tippy-arrow::before {
    border-top-color: #287CEB;
}

.tippy-box[data-theme~='flutter-blue'][data-placement^='bottom']>.tippy-arrow::before {
    border-bottom-color: #287CEB;
}

.tippy-box[data-theme~='flutter-blue'][data-placement^='left']>.tippy-arrow::before {
    border-left-color: #287CEB;
}

.tippy-box[data-theme~='flutter-blue'][data-placement^='right']>.tippy-arrow::before {
    border-right-color: #287CEB;
}

.tippy-box[data-theme~='hot-pink'] {
    background-color: #FF1D8E;
    color: white;
}

.tippy-box[data-theme~='hot-pink'][data-placement^='top']>.tippy-arrow::before {
    border-top-color: #FF1D8E;
}

.tippy-box[data-theme~='hot-pink'][data-placement^='bottom']>.tippy-arrow::before {
    border-bottom-color: #FF1D8E;
}

.tippy-box[data-theme~='hot-pink'][data-placement^='left']>.tippy-arrow::before {
    border-left-color: #FF1D8E;
}

.tippy-box[data-theme~='hot-pink'][data-placement^='right']>.tippy-arrow::before {
    border-right-color: #FF1D8E;
}

progress {
    height: 7px;
}

@keyframes progress-animation {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

progress::-webkit-progress-value {
    background-color: #287CEB;
    animation: progress-animation 2s linear forwards;
}

#executable-progress {
    width: 200px;
}