:root {
    --ctp-rosewater: #f5e0dc;
    --ctp-flamingo: #f2cdcd;
    --ctp-pink: #f5c2e7;
    --ctp-mauve: #cba6f7;
    --ctp-red: #f38ba8;
    --ctp-maroon: #eba0ac;
    --ctp-peach: #fab387;
    --ctp-yellow: #f9e2af;
    --ctp-green: #a6e3a1;
    --ctp-teal: #94e2d5;
    --ctp-sky: #89dceb;
    --ctp-sapphire: #74c7ec;
    --ctp-blue: #89b4fa;
    --ctp-lavender: #b4befe;
    --ctp-text: #cdd6f4;
    --ctp-subtext1: #bac2de;
    --ctp-subtext0: #a6adc8;
    --ctp-overlay2: #9399b2;
    --ctp-overlay1: #7f849c;
    --ctp-overlay0: #6c7086;
    --ctp-surface2: #585b70;
    --ctp-surface1: #45475a;
    --ctp-surface0: #313244;
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;

    --bs-body-bg: var(--ctp-base);
    --bs-body-color: var(--ctp-text);
    --bs-primary: var(--ctp-mauve);
    --bs-primary-rgb: 203, 166, 247;
    --bs-secondary: var(--ctp-surface1);
    --bs-secondary-rgb: 69, 71, 90;
    --bs-dark: var(--ctp-mantle);
    --bs-dark-rgb: 24, 24, 37;
    --bs-link-color: var(--ctp-blue);
    --bs-link-hover-color: var(--ctp-lavender);
    --bs-border-color: var(--ctp-surface1);
}

body {
    background-color: var(--ctp-base) !important;
    color: var(--ctp-text) !important;
}

a {
    color: var(--ctp-blue);
}

a:hover {
    color: var(--ctp-lavender);
}

hr {
    border-color: var(--ctp-surface1);
}

.bg-dark {
    background-color: var(--ctp-mantle) !important;
}

.navbar.bg-primary,
.bg-primary {
    background-color: var(--ctp-mantle) !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: var(--ctp-text) !important;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-brand:hover {
    color: var(--ctp-lavender) !important;
}

.btn-primary {
    background-color: var(--ctp-mauve) !important;
    border-color: var(--ctp-mauve) !important;
    color: var(--ctp-crust) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--ctp-lavender) !important;
    border-color: var(--ctp-lavender) !important;
    color: var(--ctp-crust) !important;
}

.btn-secondary {
    background-color: var(--ctp-surface1) !important;
    border-color: var(--ctp-surface1) !important;
    color: var(--ctp-text) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--ctp-surface2) !important;
    border-color: var(--ctp-surface2) !important;
    color: var(--ctp-text) !important;
}

.btn-danger {
    background-color: var(--ctp-red) !important;
    border-color: var(--ctp-red) !important;
    color: var(--ctp-crust) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--ctp-maroon) !important;
    border-color: var(--ctp-maroon) !important;
    color: var(--ctp-crust) !important;
}

.form-control {
    background-color: var(--ctp-surface0) !important;
    border-color: var(--ctp-surface1) !important;
    color: var(--ctp-text) !important;
}

.form-control:focus {
    background-color: var(--ctp-surface0) !important;
    color: var(--ctp-text) !important;
    border-color: var(--ctp-mauve) !important;
    box-shadow: 0 0 0 0.2rem rgba(203, 166, 247, 0.25) !important;
}

.form-layout {
    border-radius: 15px;
}

.chat-container {
    border-radius: 15px;
    max-height: 75vh;
    background-color: var(--ctp-surface1) !important;
    padding: 1em;
}

.chat-box {
    border-radius: 15px;
    max-height: 75vh;
    background-color: var(--ctp-mantle) !important;
    border: 1px solid var(--ctp-surface1);
    padding: 1em;
}

.message-box {
    border-radius: 10px;
    padding: 1em;
}

.ai-message-box {
    color: var(--ctp-text);
    background-color: var(--ctp-surface1) !important;
    text-align: left;
    margin-right: 10em;
}

.person-message-box {
    color: var(--ctp-crust);
    background-color: var(--ctp-blue) !important;
    text-align: right;
    margin-left: 10em;
}

.conversations-list, .topics-list, .topic-messages-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 0;
}

.topics-list, .topic-messages-list {
    max-height: 40vh;
}

.conversation-card, .topic-card {
    border-radius: 10px;
    padding: 1em;
    background-color: var(--ctp-surface1) !important;
    border: 1px solid var(--ctp-surface2);
    text-align: left;
    text-decoration: none;
}

.conversation-card:hover, .topic-card:hover {
    background-color: var(--ctp-surface2) !important;
    border-color: var(--ctp-overlay0);
    text-decoration: none;
}

.topic-message-card {
    border-radius: 10px;
    padding: 1em;
    background-color: rgba(203, 166, 247, 0.26) !important;
    border: 1px solid rgba(203, 166, 247, 0.52);
    text-align: left;
}

.topic-message-meta {
    color: var(--ctp-subtext0);
    font-size: 0.85rem;
}

.topic-message-content {
    color: var(--ctp-text);
}

.topic-chart-wrapper {
    width: min(520px, 100%);
    height: 280px;
    margin: 0 auto;
}

.topic-chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.chat-box,
.conversations-list,
.topics-list,
.topic-messages-list {
    scrollbar-width: thin;
    scrollbar-color: var(--ctp-mauve) var(--ctp-surface0);
}

.chat-box::-webkit-scrollbar,
.conversations-list::-webkit-scrollbar,
.topics-list::-webkit-scrollbar,
.topic-messages-list::-webkit-scrollbar {
    width: 10px;
}

.chat-box::-webkit-scrollbar-track,
.conversations-list::-webkit-scrollbar-track,
.topics-list::-webkit-scrollbar-track,
.topic-messages-list::-webkit-scrollbar-track {
    background: var(--ctp-surface0);
    border-radius: 999px;
}

.chat-box::-webkit-scrollbar-thumb,
.conversations-list::-webkit-scrollbar-thumb,
.topics-list::-webkit-scrollbar-thumb,
.topic-messages-list::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--ctp-mauve), var(--ctp-lavender));
    border-radius: 999px;
    border: 2px solid var(--ctp-surface0);
}

.chat-box::-webkit-scrollbar-thumb:hover,
.conversations-list::-webkit-scrollbar-thumb:hover,
.topics-list::-webkit-scrollbar-thumb:hover,
.topic-messages-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(var(--ctp-pink), var(--ctp-mauve));
}

#runLoadingOverlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: rgba(17, 17, 27, 0.72);
}