MtoRagSystem/public/assets/styles/base.css

:root {
    --bg: #0f172a;
    --panel: #020617;
    --border: #334155;
    --text: #d3d6dc;
    --muted: #94a3b8;
    --accent: #2563eb;
    --user: #1e40af;
    --assistant: #020617;
    --danger: #dc2626;
}

body {
    font-family: system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 2rem;
    font-size: 0.85rem;
}

h1 {
    font-size: 1.49rem;
}

h2 {
    font-size: 1.31rem;
}

h3 {
    font-size: 1.13rem;
}

h4, h5, h6 {
    font-size: 0.95rem;
}

form, input, button, textarea {
    font-size: 0.85rem !important;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 4rem);
}

.header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.header .spacer {
    flex: 1;
}

.chat {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.message {
    margin-bottom: 1.2rem;
}

.message.user {
    text-align: right;
}

.message.user .bubble {
    background: var(--user);
    margin-left: auto;
}

.message.assistant .bubble {
    background: var(--assistant);
    border: 1px solid var(--border);
}

.bubble {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    line-height: 1.5;
}

.bubble.loader {
    font-style: italic;
    color: var(--muted);
}

/* Markdown styling */
.bubble p {
    margin: 0.4rem 0;
}

.bubble ul {
    padding-left: 1.2rem;
}

.bubble code {
    background: rgba(148, 163, 184, 0.15);
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-family: ui-monospace, monospace;
}

.bubble pre {
    background: #020617;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 0.75rem;
    overflow-x: auto;
}

.bubble h1,
.bubble h2,
.bubble h3,
.bubble h4,
.bubble h5,
.bubble h6 {
    margin-top: .5rem;
    margin-bottom: 1rem;
}

.bubble table {
    width: 99%
}

.bubble td {
    border-top: 1px dotted;
    padding: .5rem .5rem .5rem .0rem;
    border-color: #6c757d;
}

.input-area {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
}

textarea {
    color: var(--muted) !important;
}

textarea:focus {
    outline: none;
    border-color: var(--muted);
    color: #fff !important;
}

textarea::placeholder {
    color: var(--muted) !important;
    opacity: 1;
}

textarea::-webkit-input-placeholder {
    color: var(--muted) !important;
}

textarea::-moz-placeholder {
    color: var(--muted) !important;
}

textarea:-ms-input-placeholder {
    color: var(--muted) !important;
}

textarea:-moz-placeholder {
    color: var(--muted) !important;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bg-dark {
    background-color: var(--assistant) !important;
    color: #fff;
    border: 1px solid var(--border);
}

.btn-trans {
    color: var(--muted);
    border: 1px solid var(--border);
}

.btn-trans:disabled {
    color: var(--muted);
    border: 1px solid var(--border);
    opacity: .4 !important;
}

.ai-cloud {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.4), transparent 70%),
    radial-gradient(circle at 70% 70%, rgba(148, 163, 184, 0.3), transparent 80%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1), transparent 100%);
    z-index: 10;
    pointer-events: none;
    filter: blur(30px);
    animation: cloud-move 2s ease-in-out infinite;
}

@keyframes cloud-move {
    0%, 100% {
        transform: translateX(-50%) scale(.5);
    }
    50% {
        transform: translateX(-50%) scale(1);
    }
}

.chat {
    position: relative;
    /* ... vorhandene Styles ... */
}

#ai-cloud {
    width: 100px;
    height: 100px;
    position: absolute;
}

/* =========================================================
   Admin Dark Base Fix
   ========================================================= */

body {
    color: #e2e2e2;
}

.bg-black {
    background-color: #16202f !important;
}

.bg-dark {
    background-color: #121a25 !important;
}

.bg-info {
    --bs-bg-opacity: 1;
    background-color: #86b7fe !important;
}

.card.bg-black,
.card.bg-dark {
    color: #e2e2e2;
}

.text-info {
    --bs-text-opacity: 1;
    color: #86b7fe !important;
}

.btn-outline-info {
    --bs-btn-color: #86b7fe;
    --bs-btn-border-color: #86b7fe;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #86b7fe;
    --bs-btn-hover-border-color: #86b7fe;
    --bs-btn-focus-shadow-rgb: 13, 202, 240;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #86b7fe;
    --bs-btn-active-border-color: #86b7fe;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #86b7fe;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #86b7fe;
    --bs-gradient: none;
}

.text-light {
    color: rgb(197 201 205) !important;
}

.border-secondary {
    --bs-border-opacity: 1;
    border-color: rgb(0, 0, 0) !important;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: var(--bs-table-hover-color);
    --bs-table-bg-state: #2e3a4a;
}

.table-dark {
    --bs-table-color: #fff;
    --bs-table-bg: #101823;
    --bs-table-border-color: #334866;
    --bs-table-striped-bg: #16202f;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: #334866 !important;
}


.table-secondary {
    --bs-table-color: #000;
    --bs-table-bg: #86b7fe;
    --bs-table-border-color: #b5b6b7;
    --bs-table-striped-bg: #d7d8da;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #cbccce;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #d1d2d4;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}


.list-group-item.bg-black,
.list-group-item.bg-dark {
    color: #e2e2e2;
}

.list-group-item.bg-black a,
.list-group-item.bg-dark a {
    color: #e2e2e2;
}

.text-muted {
    color: #9aa0a6 !important;
}

.guide-item {
    color: #e2e2e2 !important;
}

.guide-item small {
    color: #9aa0a6 !important;
}

.card.bg-black .card-body {
    color: #e2e2e2 !important;
}