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, .h1 {
    font-size: 1.75rem;
}

h2, .h2 {
    font-size: 1.35rem;
}

h3, .h3 {
    font-size: 1.35rem;
}

a {
    color: #7a9ed1;
    text-decoration: none;
}
li {
    margin-bottom: .5rem;
}
a:hover {
    color: #FFF;
}

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

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

input, textarea, select {
    background-color: #121a25 !important;
    color: #fff !important;
    border-color: #020617 !important;
}

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

::placeholder {
    color: #556070 !important;
    opacity: .5; /* wichtig v. a. für Firefox */
}

.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: #121a25;
    border: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
}

.message {
    margin-bottom: 1.2rem;
}

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

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

.message.assistant .bubble {
    background: #16202f;
    border: 1px solid var(--border);
    max-width: 100%;
}

.bubble {
    max-width: 75%;
    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: 0.5rem;
    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 #324053 !important;
}

.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: #cacad5;
}

.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;
}

.blue-glow {
    box-shadow: 0px 0px 14px 0px rgba(99, 124, 247, 0.325);
}

.text-glow {
    text-shadow: #86b7fe 2px 1px 14px;
}

span.think {
    color: #86b7fe;
}

.think {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    background-image: linear-gradient(
            100deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 32%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0) 58%,
            rgba(255, 255, 255, 0) 100%
    );
    background-size: 180% 100%;
    background-repeat: no-repeat;
    background-position: 220% 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: thinkScan 1.4s linear infinite;
}

@keyframes thinkScan {
    0% {
        background-position: 180% 0;
    }
    100% {
        background-position: -20% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .think {
        animation: none;
    }
}

.bubble img {
    max-width: 50px;
    max-height: 50px;
}

/*####################################*/
.example-1,
.example-2 {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.example-1 .inner,
.example-2 .inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.example-2 .inner {
    margin: 2px;
}

.example-2::before {
    content: "";
    display: block;
    background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(102, 102, 102, 0.75) 50%,
            rgba(255, 255, 255, 0) 100%
    );
    height: 300px;
    width: 100px;
    transform: translate(0);
    position: absolute;
    animation: rotate 5s linear forwards infinite;
    z-index: 0;
    top: 50%;
    transform-origin: top center;
}

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

.retriex-chat-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -1px 0 0.75rem;
    color: rgba(248, 249, 250, 0.76);
    font-size: 0.84rem;
    border-radius: 0 0 6px 6px;
    background-color: #212b39 !important;
}

.retriex-option-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(134, 183, 254, 0.2);
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    background: rgba(13, 17, 23, 0.42);
    cursor: pointer;
    user-select: none;
}

.retriex-option-toggle input {
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    accent-color: #0dcaf0;
}

body:not(.retriex-show-detail-cards) #chat .retriex-meta-card,
body:not(.retriex-show-detail-cards) #chat .retriex-alert {
    display: none !important;
}

/* RetrieX chat meta/status cards */
.retriex-meta-card,
.retriex-alert {
    margin: 0.65rem 0;
    border: 1px solid rgba(134, 183, 254, 0.26);
    border-radius: 14px;
    background: rgba(13, 17, 23, 0.72);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.retriex-meta-card {
    padding: 0.85rem 0.95rem;
}

.retriex-meta-card__eyebrow {
    color: #86b7fe;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.retriex-meta-card__title {
    color: #f8f9fa;
    font-weight: 700;
    margin-bottom: 0.55rem;
}

.retriex-meta-card__body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
}

.retriex-meta-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    background: rgba(134, 183, 254, 0.14);
    color: #cfe2ff;
    font-size: 0.78rem;
    font-weight: 600;
}

.retriex-meta-query {
    display: grid;
    gap: 0.25rem;
}

.retriex-meta-query span {
    color: rgba(248, 249, 250, 0.68);
    font-size: 0.78rem;
}

.retriex-meta-query code {
    display: block;
    width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 10px;
    padding: 0.45rem 0.55rem;
    background: rgba(0, 0, 0, 0.28);
    color: #f8f9fa;
}

.retriex-alert {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
}

.retriex-alert--warning {
    border-color: rgba(255, 193, 7, 0.32);
    background: rgba(60, 44, 5, 0.56);
}

.retriex-alert--error {
    border-color: rgba(220, 53, 69, 0.34);
    background: rgba(58, 12, 18, 0.56);
}

.retriex-alert__icon {
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1.2;
}

.retriex-alert__title {
    color: #f8f9fa;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.retriex-alert__text {
    color: rgba(248, 249, 250, 0.82);
    font-size: 0.92rem;
    line-height: 1.45;
}


.retriex-run-meta[data-retriex-meta-state="completed"] {
    border-color: rgba(25, 135, 84, 0.36);
}

.retriex-meta-pill--confidence {
    background: rgba(255, 193, 7, 0.14);
    color: #ffe8a1;
}

.retriex-meta-pill--status {
    background: rgba(25, 135, 84, 0.15);
    color: #b7f5cf;
}

.retriex-source-overview {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.retriex-source-overview > span,
.retriex-product-results__summary {
    color: rgba(248, 249, 250, 0.72);
    font-size: 0.82rem;
    font-weight: 600;
}

.retriex-source-overview__badges,
.retriex-action-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.retriex-source-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.16rem 0.55rem;
    background: rgba(13, 202, 240, 0.14);
    color: #b6effb;
    font-size: 0.78rem;
    font-weight: 700;
}

.retriex-source-overview__empty {
    color: rgba(248, 249, 250, 0.58);
    font-size: 0.86rem;
}

.retriex-product-results__summary {
    margin-bottom: 0.65rem;
}

.retriex-meta-query--compact {
    margin-bottom: 0.8rem;
}

.retriex-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.65rem;
}

.retriex-product-card {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.045);
}

.retriex-product-card__title {
    color: #f8f9fa;
    font-weight: 800;
    line-height: 1.3;
}

.retriex-product-card__title a {
    color: inherit;
    text-decoration: none;
}

.retriex-product-card__title a:hover {
    text-decoration: underline;
}

.retriex-product-card__facts {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.retriex-product-card__facts div {
    display: grid;
    grid-template-columns: minmax(88px, 0.8fr) 1.2fr;
    gap: 0.45rem;
}

.retriex-product-card__facts dt {
    color: rgba(248, 249, 250, 0.58);
    font-size: 0.76rem;
    font-weight: 700;
}

.retriex-product-card__facts dd {
    color: rgba(248, 249, 250, 0.9);
    font-size: 0.8rem;
    margin: 0;
    word-break: break-word;
}

.retriex-product-card__relevance {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.5rem;
    color: rgba(248, 249, 250, 0.78);
    font-size: 0.8rem;
    line-height: 1.35;
}

.retriex-product-card__relevance span {
    display: block;
    color: #86b7fe;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.18rem;
}

.retriex-action-chip {
    border: 1px solid rgba(134, 183, 254, 0.32);
    border-radius: 999px;
    padding: 0.34rem 0.72rem;
    background: rgba(134, 183, 254, 0.11);
    color: #d8e8ff;
    font-size: 0.83rem;
    font-weight: 700;
    cursor: pointer;
}

.retriex-action-chip:hover,
.retriex-action-chip:focus-visible {
    border-color: rgba(134, 183, 254, 0.68);
    background: rgba(134, 183, 254, 0.2);
    color: #ffffff;
}

@media (max-width: 576px) {
    .retriex-product-grid {
        grid-template-columns: 1fr;
    }

    .retriex-product-card__facts div {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}