body {
  background: #edf1f7;
  color: #0c0e12;
}

#chat {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 0 30px rgba(0, 0, 0, .2);
}

.btn {
  color: #0c0e12;
  background: linear-gradient(180deg, #f7f7f7 50%, #dcdcdc 100%);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
}

.btn:hover {
  background: linear-gradient(180deg, #ffffff 50%, #e7e7e7 100%);
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.18);
}

.btn:active,
.btn-pressed {
  background: #cfcfcf;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

.send-btn {
  background: #0077cc;
}

.send-btn:hover {
  background: #3399ff;
}

.bubble.bot {
  background: rgba(234, 234, 234, 0.98);
  color: #0c0e12;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.bubble.bot::after {
  border-right: 8px solid rgba(234, 234, 234, 0.98);
}

.bubble.bot:hover {
  background: linear-gradient(135deg, #f7f7f7, #dcdcdc);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.bubble.user {
  background: rgba(0, 153, 255, 0.92);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 153, 255, 0.4);
}

.bubble.user::after {
  border-left: 8px solid #0099ff;
}

.bubble.user:hover {
  background: linear-gradient(135deg, #33aaff, #0077dd);
  box-shadow: 0 8px 22px rgba(0, 153, 255, 0.5);
}

.bubble-actions button {
  background: rgba(0, 0, 0, 0.1);
}

.bubble-actions button:hover {
  background: rgba(0, 0, 0, 0.18);
}

.bubble code {
  background: rgba(0, 0, 0, 0.1);
}

.bubble blockquote {
  border-left: 4px solid #47b6ff;
  background: rgba(71, 182, 255, 0.2);
  color: #0c0e12;
}

#userInput,
input {
  background-color: #ffffff;
  color: #0c0e12;
  border: 1px solid #b5b5b5;
}

#userInput:focus,
input:focus {
  border: 1px solid #0077cc;
}

button,
.secondary-btn {
  background-color: #0077cc;
  color: #fff;
}

button:hover,
.secondary-btn:hover {
  background-color: #0099ff;
}

#modelDropdown {
  background-color: #ffffff;
  border: 1px solid #c7c7c7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

#modelDropdown div {
  color: #0c0e12;
}

#modelDropdown div:hover {
  background-color: #e7e7e7;
}

#currentModel {
  background-color: #f1f1f1;
  color: #0c0e12;
}

#currentModel:hover {
  background-color: #dfdfdf;
}

.model-hint {
  color: #4a4a4a;
}

.tts-button {
  background-color: #d6d6d6;
  color: #0c0e12;
}

.tts-button:hover {
  background-color: #2d8cff;
}

.tts-button.tts-stop {
  background-color: #cc0000;
  color: #fff;
}

.tts-button.tts-stop:hover {
  background-color: #a60000;
}

.input-area {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .15);
}

.upload-button {
  color: #444;
}

.upload-button:hover {
  color: #000;
}

.push-notification {
  background: #0077ff;
  color: white;
}

.push-notification .close-push:hover,
.push-notification .close-btn:hover {
  color: #ff334d;
}

.image-modal {
  background: rgba(0, 0, 0, 0.78);
}

.modal-content {
  background: #ffffff;
  color: #0c0e12;
}

.modal-btn {
  background: #eeeeee;
  color: #0c0e12;
}

.modal-btn:hover {
  background: #dddddd;
}

#sessionInfo {
  color: #4a4a4a;
}

#modelLimitInfo {
  color: #4f4f4f;
}

#versionDisplayMain {
  color: #3d3d3d;
  background: rgba(255, 255, 255, 0.92);
}

*::-webkit-scrollbar-thumb {
  background-color: #8a8a8a;
}

*::-webkit-scrollbar-track {
  background-color: #e3e3e3;
}

html,
body {
  scrollbar-color: #8a8a8a #e3e3e3;
}

hr {
  border-top: 1px solid #1a1a1a;
}

.codeblock-container {
  background: #f2f3f6;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
}

.codeblock-langbar {
  background: #d8d8d8;
  color: #0048ff;
  border-bottom: 1px solid #c8c8c8;
}

.codeblock {
  color: #0f1b2c;
}

.copy-btn {
  background: #dadada;
  color: #0077cc;
}

.copy-btn:hover:not(:disabled) {
  background: #0077cc;
  color: #fff;
}

.copy-btn:disabled {
  background: #eeeeee;
  color: #888;
}

.user-entry:hover {
  background: #ececec;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}

#infoOverlay {
  background: rgba(255, 255, 255, 0.97);
}

.info-box.startmenu {
  background: linear-gradient(115deg, #ffffff 80%, #efefef 130%);
  border: 2.5px solid #d9d9d9;
  box-shadow: 0 10px 48px rgba(0, 0, 0, 0.14);
}

.startmenu-title {
  color: #0077cc;
}

.startmenu-title span {
  color: #0c0e12;
}

.startmenu-hinweis {
  background: #e8f3ff;
  color: #0c0e12;
  border-left: 6px solid #00cfff;
}

.startmenu-list {
  color: #2b2b2b;
}

#infoOverlay .btn {
  background: linear-gradient(95deg, #00bcff 50%, #00e6c2 100%);
  color: #0c0e12;
}

#infoOverlay .btn:hover,
#infoOverlay .btn:focus {
  background: linear-gradient(92deg, #16f0e1 20%, #12cbf3 85%);
  color: #0c0e12;
}

.startmenu-footer {
  color: #444;
  border-top: 1.2px solid #cfcfcf;
}

.warning-overlay {
  background: rgba(255, 255, 255, 0.97);
}

.warning-box {
  background: linear-gradient(115deg, #ffffff 80%, #efefef 140%);
  border: 2.8px solid #ffae42;
  color: #0c0e12;
}

.warning-title {
  color: #ff9900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.warning-text {
  color: #2f2f2f;
}

.overlay {
  background: rgba(0, 0, 0, 0.5);
}

.overlay .info-box {
  background: #ffffff;
  color: #0c0e12;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.overlay__header {
  background: linear-gradient(0deg, #f0f0f0, #fafafa);
  border-bottom: 1px solid #d2d2d2;
}

.overlay__title {
  color: #0077cc;
}

.overlay__footer {
  background: #f0f0f0;
  border-top: 1px solid #d2d2d2;
}

.overlay__close {
  background: #ededed;
  border: 1px solid #cfcfcf;
}

.overlay__close::before,
.overlay__close::after {
  background: #2f2f2f;
}

.overlay__close:hover {
  background: #ffecec;
  border-color: #ffbcbc;
}

/* === Light: zusätzliche Overrides zum Dark-Base === */

/* Close/X-Farben (Overlay & Startmenü) */
:root {
  --close-color: #ff334d;
  --close-hover: #ff6677;
  --close-active: #e32840;
}

/* Sidebar-Icon */
.sidebar-toggle-btn {
  color: #555;
}

/* Modell-Label-Farben auf hell leicht abdunkeln (Kontrast) */
.model-label.green {
  color: #0aa35a;
}

.model-label.teal {
  color: #0a6a6a;
}

.model-label.blue {
  color: #1d7fe0;
}

.model-label.lightblue {
  color: #2a92e9;
}

.model-label.orange {
  color: #e58a00;
}

.model-label.violet {
  color: #7d4be3;
}

.model-label.gray {
  color: #666;
}

.model-label.red {
  color: #e64545;
}

.model-label.pink {
  color: #d84ab8;
}

/* System-/Memory-Bubbles (grün) */
.bubble.memory {
  background: rgba(54, 174, 54, 0.12);
  color: #107010;
  border: 1px solid rgba(54, 174, 54, 0.35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

/* Memory-Overlay-Karten */
.memory-item {
  background: #f7f9fb;
  border: 1px solid #d9e0e6;
}

.memory-item .nid {
  color: #0a9b0a;
}

.memory-item .meta {
  color: #4c5b66;
}

.memory-item .tags {
  color: #0a6aa6;
}

.memory-item textarea {
  background: #ffffff;
  color: #0c0e12;
  border: 1px solid #bcd2bc;
}

.memory-item input.tag-input {
  background: #ffffff;
  color: #0c0e12;
  border: 1px solid #b7d1c3;
}

.memory-empty {
  color: #6a6a6a;
}

.btn.btn--danger {
  background: #c62828;
}

/* OpenAI-Status-Karten (News) */
.openai-status-item {
  background: #ffffff;
  border-left-color: #00bfff;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .08);
}

.openai-status-item.status-warning {
  border-left-color: #ffa51d;
}

.openai-status-item.status-critical {
  border-left-color: #ff4e4e;
}

.openai-status-title {
  color: #0077cc;
}

.openai-status-item.status-warning .openai-status-title {
  color: #cc7a00;
}

.openai-status-item.status-critical .openai-status-title {
  color: #cc2f2f;
}

.openai-status-date {
  color: #666;
}

.openai-status-desc {
  color: #222;
}

/* Overlay – Fullscreen/Iframe-Container (hell ohne Rand) */
.overlay.size-full .overlay__body,
.overlay.oversized .overlay__body {
  background: #ffffff;
}

/* Pro-Badge bleibt gelb, aber etwas weniger Leuchten auf hell */
.pro-badge {
  text-shadow: 0 0 4px rgba(255, 215, 0, .7), 0 0 0 rgba(0, 0, 0, 0);
}

/* Bild im Chat – kein Effekt, aber hellere Kante optional */
.bubble img {
  box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}