/*
 * ============================================================
 * Rheinische Post – Gastrobot Widget Stylesheet
 * Quelle: Figma GERACM-28028 + Live DOM Analyse
 * Stand: 2026-03-24
 *
 * Einbindung NACH dem Widget-Ladeskript:
 *   <link rel="stylesheet" href="rp-gastrobot-widget.css">
 *
 * Dark Mode:
 *   - Automatisch via prefers-color-scheme: dark
 *   - Manuell: Klasse "dark" auf <rtr-qa-widget> oder Vorfahren
 *   - Light erzwingen: Klasse "light" auf <rtr-qa-widget>
 *
 * Changelog 2026-03-24:
 *   FIX 1 – Light Mode: Widget-Hintergrund auf weiss (nicht grau),
 *            damit die grauen Fragekarten sichtbar sind
 *   FIX 2 – Modal/Overlay: overflow-y: auto damit Inhalt scrollbar ist
 *   FIX 3 – Dark Mode Textarea: Textfarbe explizit weiss im Fokus-State
 *   FIX 4 – Dark Mode Send-Button: Icon im Active-State bleibt weiss
 * ============================================================ */


/* ============================================================
   DESIGN TOKENS
   ============================================================ */

rtr-qa-widget {

  /* Primaerfarben RP */
  --rtr-primary:                   #2b9095;
  --rtr-primary-hover:             #247B80;
  --rtr-light-primary:             #59B8BC;

  /* Semantische Tokens – Light Mode */
  --rp-bg-widget:                  #ffffff;
  --rp-bg-container:               #F5F5F6;
  --rp-bg-feature:                 #F5F5F6;
  --rp-bg-feature-hover:           #DCDCDD;
  --rp-bg-clickable-question:      #F5F5F6;
  --rp-bg-clickable-question-hover:#E8E8EA;
  --rp-bg-teaser:                  #E8F6F6;
  --rp-bg-teaser-hover:            #D2ECEB;
  --rp-bg-input:                   #ffffff;
  --rp-bg-user-question:           transparent;

  --rp-text-headline:              #040A14;
  --rp-text-body:                  #040A14;
  --rp-text-label:                 #040A14;
  --rp-text-placeholder:           #696C71;
  --rp-text-disclaimer:            #696C71;
  --rp-text-sources:               #767676;
  --rp-text-powered-by:            #2b9095;
  --rp-text-user-question:         #040A14;

  --rp-border-input:               #696C71;
  --rp-border-container:           #DCDCDD;
  --rp-border-input-focused:       #59B8BC;
  --rp-border-input-focused-width: 2px;

  --rp-send-icon-disabled:         #696C71;
  --rp-dot-inactive:               #DCDCDD;
  --rp-icon-user:                  #040A14;

  --rp-overlay-bg:                 #ffffff;
  --rp-overlay-text:               #040A14;

  /* RTR-interne Custom Properties */
  --rtr-ultralight-primary:        #E8F6F6;
  --rtr-ultralight-primary-hover:  #B8DFDD;
  --rtr-black:                     #040A14;
  --rtr-feature-background:        #F5F5F6;
  --rtr-scrollbar-primary-color:   #2b9095;
  --rtr-item-hover-color:          #247B80;
  --rtr-focus-outline-color:       #2360C5;
  --rtr-border-active:             #040A14;
  --rtr-close-dialog-icon-color:   #040A14;
}

/* Harte Token-Overrides gegen dynamische App-Defaults
   wie .rtr-widget-root.<uuid> und .rtr-dialog.<uuid> */
rtr-qa-widget .rtr-widget-root[class],
rtr-qa-widget .rtr-dialog[class] {
  --rtr-primary:                   #2b9095 !important;
  --rtr-primary-hover:             #247B80 !important;
  --rtr-icon-and-indicator-hover:  #247B80 !important;
  --rtr-light-primary:             #59B8BC !important;
  --rtr-ultralight-primary:        #E8F6F6 !important;
  --rtr-ultralight-primary-hover:  #B8DFDD !important;
  --rtr-icon-and-indicator-disabled:#696C71 !important;
  --rtr-border-color:              #DCDCDD !important;
  --rtr-disabled:                  #DCDCDD !important;
  --rtr-scrollbar-primary-color:   #2b9095 !important;
  --rtr-item-hover-color:          #247B80 !important;
  --rtr-close-dialog-icon-color:   #040A14 !important;
}


/* ============================================================
   DARK MODE – automatisch via prefers-color-scheme
   ============================================================ */

@media (prefers-color-scheme: dark) {
  rtr-qa-widget {
    --rp-bg-widget:                  #2A2E36;
    --rp-bg-container:               #343943;
    --rp-bg-feature:                 #373B42;
    --rp-bg-feature-hover:           #555A63;
    --rp-bg-clickable-question:      #3B4049;
    --rp-bg-clickable-question-hover:#5A606B;
    --rp-bg-teaser:                  #2F5E61;
    --rp-bg-teaser-hover:            #274E50;
    --rp-bg-input:                   #373B42;

    --rp-text-headline:              #ffffff;
    --rp-text-body:                  #ffffff;
    --rp-text-label:                 #ffffff;
    --rp-text-placeholder:           #C0C1C4;
    --rp-text-disclaimer:            #C0C1C4;
    --rp-text-sources:               #C0C1C4;
    --rp-text-powered-by:            #7ad0cc;
    --rp-text-user-question:         #ffffff;

    --rp-border-input:               #C0C1C4;
    --rp-border-container:           #454B56;
    --rp-border-input-focused:       #7ad0cc;

    --rp-send-icon-disabled:         #C0C1C4;
    --rp-dot-inactive:               #555A63;
    --rp-icon-user:                  #ffffff;

    --rp-overlay-bg:                 #373B42;
    --rp-overlay-text:               #ffffff;

    --rtr-ultralight-primary:        #2F5E61;
    --rtr-ultralight-primary-hover:  #274E50;
    --rtr-black:                     #ffffff;
    --rtr-feature-background:        #373B42;
    --rtr-border-active:             #C0C1C4;
    --rtr-close-dialog-icon-color:   #ffffff;
  }

  rtr-qa-widget .rtr-widget-root[class],
  rtr-qa-widget .rtr-dialog[class] {
    --rtr-primary:                   #2b9095 !important;
    --rtr-primary-hover:             #247B80 !important;
    --rtr-icon-and-indicator-hover:  #247B80 !important;
    --rtr-light-primary:             #59B8BC !important;
    --rtr-ultralight-primary:        #2F5E61 !important;
    --rtr-ultralight-primary-hover:  #274E50 !important;
    --rtr-icon-and-indicator-disabled:#C0C1C4 !important;
    --rtr-border-color:              #454B56 !important;
    --rtr-disabled:                  #555A63 !important;
    --rtr-scrollbar-primary-color:   #2b9095 !important;
    --rtr-item-hover-color:          #247B80 !important;
    --rtr-close-dialog-icon-color:   #ffffff !important;
  }
}

/* DARK – manuell erzwingbar */
.dark rtr-qa-widget,
rtr-qa-widget.dark {
  --rp-bg-widget:                  #2A2E36;
  --rp-bg-container:               #343943;
  --rp-bg-feature:                 #373B42;
  --rp-bg-feature-hover:           #555A63;
  --rp-bg-clickable-question:      #3B4049;
  --rp-bg-clickable-question-hover:#5A606B;
  --rp-bg-teaser:                  #2F5E61;
  --rp-bg-teaser-hover:            #274E50;
  --rp-bg-input:                   #373B42;

  --rp-text-headline:              #ffffff;
  --rp-text-body:                  #ffffff;
  --rp-text-label:                 #ffffff;
  --rp-text-placeholder:           #C0C1C4;
  --rp-text-disclaimer:            #C0C1C4;
  --rp-text-sources:               #C0C1C4;
  --rp-text-powered-by:            #7ad0cc;
  --rp-text-user-question:         #ffffff;

  --rp-border-input:               #C0C1C4;
  --rp-border-container:           #454B56;
  --rp-border-input-focused:       #7ad0cc;

  --rp-send-icon-disabled:         #C0C1C4;
  --rp-dot-inactive:               #555A63;
  --rp-icon-user:                  #ffffff;

  --rp-overlay-bg:                 #373B42;
  --rp-overlay-text:               #ffffff;

  --rtr-ultralight-primary:        #2F5E61;
  --rtr-ultralight-primary-hover:  #274E50;
  --rtr-black:                     #ffffff;
  --rtr-feature-background:        #373B42;
  --rtr-border-active:             #C0C1C4;
  --rtr-close-dialog-icon-color:   #ffffff;
}

.dark rtr-qa-widget .rtr-widget-root[class],
.dark rtr-qa-widget .rtr-dialog[class],
rtr-qa-widget.dark .rtr-widget-root[class],
rtr-qa-widget.dark .rtr-dialog[class] {
  --rtr-primary:                   #2b9095 !important;
  --rtr-primary-hover:             #247B80 !important;
  --rtr-icon-and-indicator-hover:  #247B80 !important;
  --rtr-light-primary:             #59B8BC !important;
  --rtr-ultralight-primary:        #2F5E61 !important;
  --rtr-ultralight-primary-hover:  #274E50 !important;
  --rtr-icon-and-indicator-disabled:#C0C1C4 !important;
  --rtr-border-color:              #454B56 !important;
  --rtr-disabled:                  #555A63 !important;
  --rtr-scrollbar-primary-color:   #2b9095 !important;
  --rtr-item-hover-color:          #247B80 !important;
  --rtr-close-dialog-icon-color:   #ffffff !important;
}

/* LIGHT – manuell erzwingbar */
.light rtr-qa-widget,
rtr-qa-widget.light {
  --rp-bg-widget:                  #ffffff;
  --rp-bg-container:               #F5F5F6;
  --rp-bg-feature:                 #F5F5F6;
  --rp-bg-feature-hover:           #DCDCDD;
  --rp-bg-clickable-question:      #F5F5F6;
  --rp-bg-clickable-question-hover:#E8E8EA;
  --rp-bg-teaser:                  #E8F6F6;
  --rp-bg-teaser-hover:            #D2ECEB;
  --rp-bg-input:                   #ffffff;
  --rp-text-headline:              #040A14;
  --rp-text-body:                  #040A14;
  --rp-text-label:                 #040A14;
  --rp-text-placeholder:           #696C71;
  --rp-text-disclaimer:            #696C71;
  --rp-text-sources:               #767676;
  --rp-text-powered-by:            #2b9095;
  --rp-text-user-question:         #040A14;
  --rp-border-input:               #696C71;
  --rp-border-container:           #DCDCDD;
  --rp-border-input-focused:       #59B8BC;
  --rp-send-icon-disabled:         #696C71;
  --rp-dot-inactive:               #DCDCDD;
  --rp-icon-user:                  #040A14;
  --rp-overlay-bg:                 #ffffff;
  --rp-overlay-text:               #040A14;
  --rtr-ultralight-primary:        #E8F6F6;
  --rtr-ultralight-primary-hover:  #B8DFDD;
  --rtr-black:                     #040A14;
  --rtr-feature-background:        #F5F5F6;
  --rtr-border-active:             #040A14;
  --rtr-close-dialog-icon-color:   #040A14;
}

.light rtr-qa-widget .rtr-widget-root[class],
.light rtr-qa-widget .rtr-dialog[class],
rtr-qa-widget.light .rtr-widget-root[class],
rtr-qa-widget.light .rtr-dialog[class] {
  --rtr-primary:                   #2b9095 !important;
  --rtr-primary-hover:             #247B80 !important;
  --rtr-icon-and-indicator-hover:  #247B80 !important;
  --rtr-light-primary:             #59B8BC !important;
  --rtr-ultralight-primary:        #E8F6F6 !important;
  --rtr-ultralight-primary-hover:  #B8DFDD !important;
  --rtr-icon-and-indicator-disabled:#696C71 !important;
  --rtr-border-color:              #DCDCDD !important;
  --rtr-disabled:                  #DCDCDD !important;
  --rtr-scrollbar-primary-color:   #2b9095 !important;
  --rtr-item-hover-color:          #247B80 !important;
  --rtr-close-dialog-icon-color:   #040A14 !important;
}


/* ============================================================
   KOMPONENTEN-STYLES
   ============================================================ */


/* --- 1. Widget-Container --- */

rtr-qa-widget {
  background: var(--rp-bg-widget);
  display: block;
  width: 100% !important;
  max-width: none !important;
}

/* FIX 1: Light Mode – Widget-Root auf weiss (nicht grau), damit die
   grauen Fragekarten (#F5F5F6) sichtbar gegen den Hintergrund sind.
   Im Dark Mode bleibt --rp-bg-widget = #2A2E36. */
rtr-qa-widget .rtr-widget-root {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--rp-bg-widget) !important;
  border: 1px solid var(--rp-border-container) !important;
  border-radius: 0;
  padding: 16px;
  box-sizing: border-box;
}

/* Globaler Override fuer .rtr-widget-root p { color: var(--rtr-black) } */
rtr-qa-widget .rtr-widget-root p {
  color: var(--rp-text-body) !important;
  margin: 0;
  padding: 0;
}

rtr-qa-widget .rtr-widget-root p.powered-by,
rtr-qa-widget .rtr-widget-root .powered-by {
  color: var(--rp-text-powered-by) !important;
}

rtr-qa-widget .rtr-widget-root .sources-label {
  color: var(--rp-text-sources) !important;
}

rtr-qa-widget .rtr-widget-root p.sources-header .sources-label {
  color: var(--rp-text-sources) !important;
}


/* --- 2. CDK Overlay --- */

.cdk-overlay-container:has(.rtr-dialog),
.cdk-overlay-container:has([class*="rtr-dialog"]) {
  z-index: 2147483647 !important;
}


/* --- 3. Status-Header --- */

rtr-qa-widget app-status-header .text-container .text-wrapper {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rp-text-headline);
}

rtr-qa-widget app-status-header .text-wrapper.lighter {
  font-weight: 700;
  color: var(--rp-text-headline);
}

rtr-qa-widget app-status-header p.powered-by,
rtr-qa-widget app-status-header .powered-by {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--rp-text-powered-by);
  margin: 0;
}

rtr-qa-widget app-status-header p.powered-by a.retresco-link,
rtr-qa-widget app-status-header .powered-by a {
  color: var(--rp-text-powered-by) !important;
  text-decoration: underline !important;
}

rtr-qa-widget app-status-header p.powered-by a.retresco-link:hover,
rtr-qa-widget app-status-header .powered-by a:hover {
  color: var(--rtr-primary-hover) !important;
}

rtr-qa-widget app-status-header .info-icon path,
rtr-qa-widget app-status-header .info-icon svg path {
  fill: var(--rp-text-headline) !important;
}


/* --- 4. User-Frage --- */

rtr-qa-widget app-user-question .full-width {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

rtr-qa-widget app-user-question .user-question {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rp-text-user-question);
  flex: 1;
}

rtr-qa-widget app-user-question .mat-icon path,
rtr-qa-widget app-user-question .mat-icon svg path {
  fill: var(--rp-icon-user) !important;
}


/* --- 5. KI-Antwort --- */

rtr-qa-widget app-answer .markdown-text,
rtr-qa-widget app-text .markdown-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--rp-text-body);
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text p,
rtr-qa-widget .rtr-widget-root app-text .markdown-text p,
rtr-qa-widget .rtr-widget-root .markdown-text p {
  color: var(--rp-text-body) !important;
  margin: 0;
  padding: 0;
  line-height: 150%;
}

rtr-qa-widget .rtr-widget-root .markdown-text h2,
rtr-qa-widget .rtr-widget-root .markdown-text h3 {
  margin-top: 1em !important;
}

rtr-qa-widget .rtr-widget-root .markdown-text p + p {
  margin-top: 12px !important;
}

rtr-qa-widget .rtr-widget-root app-answer{
  margin-top: 1.5rem;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text h1,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h2,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h3,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h4,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h5,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h6 {
  color: var(--rp-text-body) !important;
  font-weight: 700;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text strong {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--rp-text-body) !important;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text a {
  color: var(--rtr-primary) !important;
  text-decoration: underline;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text a:hover {
  color: var(--rtr-primary-hover) !important;
}

@media (prefers-color-scheme: dark) {
  rtr-qa-widget .rtr-widget-root app-answer .markdown-text a {
    color: var(--rp-text-powered-by) !important;
  }
  rtr-qa-widget .rtr-widget-root app-answer .markdown-text a:hover {
    color: #BCEAEA !important;
  }
}

.dark rtr-qa-widget .rtr-widget-root app-answer .markdown-text a,
rtr-qa-widget.dark .rtr-widget-root app-answer .markdown-text a {
  color: var(--rp-text-powered-by) !important;
}
.dark rtr-qa-widget .rtr-widget-root app-answer .markdown-text a:hover,
rtr-qa-widget.dark .rtr-widget-root app-answer .markdown-text a:hover {
  color: #BCEAEA !important;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text ul {
  color: var(--rp-text-body) !important;
  padding-left: 1em !important;
  list-style: initial;
  margin-bottom: 12px;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text ol {
  color: var(--rp-text-body) !important;
  padding-left: 14px !important;
  margin-bottom: 12px;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text li {
  color: var(--rp-text-body) !important;
  margin-bottom: 4px;
  line-height: 1.5;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text ol>li {
  border-bottom: 1px solid;
  margin-top: 1em !important;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text ul li+li,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text ol li+li {
  margin-top: auto !important;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text ul > li:first-child,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text ol > li:first-child {
  margin-top: 8px;
}


/* --- 6. Quellen-Header --- */

rtr-qa-widget app-sources p.sources-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

rtr-qa-widget app-sources .sources-label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--rp-text-sources);
}

rtr-qa-widget app-sources .pin-icon path,
rtr-qa-widget app-sources .pin-icon svg path {
  fill: var(--rp-text-sources) !important;
}


/* --- 7. Quellen-Teaser-Karten --- */
/* Verwendet dynamische Tokens (--rp-bg-teaser / hover) für Light & Dark Mode */

rtr-qa-widget app-sources a.reference-carousel-item,
rtr-qa-widget app-sources .reference-carousel-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background-color: var(--rp-bg-teaser);
  border-radius: 12px;
  padding: 16px 16px 16px 8px;
  text-decoration: none;
  transition: background-color 0.15s ease;
  width: 100%;
}

rtr-qa-widget app-sources a.reference-carousel-item:hover,
rtr-qa-widget app-sources .reference-carousel-item:hover {
  background-color: var(--rp-bg-teaser-hover);
}

/* Supertitle: Light Mode = Primaerfarbe, Dark Mode = #ffffff (Figma-Spec) */
rtr-qa-widget app-sources .reference-carousel-item .supertitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--rtr-primary);
  margin: 0 0 4px;
}

@media (prefers-color-scheme: dark) {
  rtr-qa-widget app-sources .reference-carousel-item .supertitle {
    color: #ffffff !important;
  }
}

.dark rtr-qa-widget app-sources .reference-carousel-item .supertitle,
rtr-qa-widget.dark app-sources .reference-carousel-item .supertitle {
  color: #ffffff !important;
}

/* Title: Light Mode = #040A14, Dark Mode = #ffffff (Figma-Spec) */
rtr-qa-widget app-sources .reference-carousel-item .title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

rtr-qa-widget app-sources .reference-carousel-item .source-image,
rtr-qa-widget app-sources .source-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

rtr-qa-widget app-sources .reference-text-container {
  flex: 1;
  min-width: 0;
}


/* --- 8. Intro-Fragen & Follow-Up-Fragen --- */
/* Verwendet dynamische Tokens (--rp-bg-feature / hover und --rp-text-body) */

rtr-qa-widget app-intro-questions .carousel-question,
rtr-qa-widget app-follow-ups-questions .carousel-question {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px;
  gap: 8px;
  background-color: var(--rp-bg-feature) !important;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rp-text-body) !important;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color 0.15s ease;
}

rtr-qa-widget app-intro-questions .carousel-question:hover,
rtr-qa-widget app-follow-ups-questions .carousel-question:hover {
  background-color: var(--rp-bg-feature-hover) !important;
}

/* Send-Icon in Fragekarten – !important gegen inline fill="#004FCC" */
/* Light: Primaerfarbe, Dark: #ffffff (Icon ist auf dunklem BG) */
rtr-qa-widget app-intro-questions .question-send-icon path,
rtr-qa-widget app-intro-questions .question-send-icon svg path,
rtr-qa-widget app-follow-ups-questions .question-send-icon path,
rtr-qa-widget app-follow-ups-questions .question-send-icon svg path {
  fill: var(--rtr-primary) !important;
}

@media (prefers-color-scheme: dark) {
  rtr-qa-widget app-intro-questions .question-send-icon path,
  rtr-qa-widget app-intro-questions .question-send-icon svg path,
  rtr-qa-widget app-follow-ups-questions .question-send-icon path,
  rtr-qa-widget app-follow-ups-questions .question-send-icon svg path {
    fill: #ffffff !important;
  }
}

.dark rtr-qa-widget app-intro-questions .question-send-icon path,
.dark rtr-qa-widget app-intro-questions .question-send-icon svg path,
.dark rtr-qa-widget app-follow-ups-questions .question-send-icon path,
.dark rtr-qa-widget app-follow-ups-questions .question-send-icon svg path,
rtr-qa-widget.dark app-intro-questions .question-send-icon path,
rtr-qa-widget.dark app-intro-questions .question-send-icon svg path,
rtr-qa-widget.dark app-follow-ups-questions .question-send-icon path,
rtr-qa-widget.dark app-follow-ups-questions .question-send-icon svg path {
  fill: #ffffff !important;
}

/* Fragetext – !important gegen .rtr-widget-root p color */
rtr-qa-widget app-intro-questions .question-item-text,
rtr-qa-widget app-follow-ups-questions .question-item-text,
rtr-qa-widget .rtr-widget-root app-intro-questions .question-item-text,
rtr-qa-widget .rtr-widget-root app-follow-ups-questions .question-item-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--rp-text-body) !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* --- 9. Carousel Dots & Chevrons --- */

rtr-qa-widget .carousel-dot .dot {
  background-color: var(--rp-dot-inactive);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

rtr-qa-widget .carousel-dot.current .dot {
  background-color: var(--rtr-primary);
}

rtr-qa-widget .carousel-dot:hover .dot {
  background-color: var(--rtr-primary-hover);
}

rtr-qa-widget .carousel-track-button .widget-icon-button {
  border-color: var(--rtr-primary) !important;
  transition: border-color 0.15s ease;
}

rtr-qa-widget .carousel-track-button .widget-icon-button:hover {
  border-color: var(--rtr-primary-hover) !important;
}

rtr-qa-widget .carousel-track-button .rtr-icon svg path,
rtr-qa-widget .carousel-track-button .rtr-icon path {
  fill: var(--rtr-primary) !important;
}

rtr-qa-widget .carousel-track-button .widget-icon-button:hover .rtr-icon svg path,
rtr-qa-widget .carousel-track-button .widget-icon-button:hover .rtr-icon path {
  fill: var(--rtr-primary-hover) !important;
}

rtr-qa-widget .carousel-track-button.disabled .widget-icon-button {
  border-color: var(--rp-dot-inactive) !important;
}

rtr-qa-widget .carousel-track-button.disabled .rtr-icon svg path,
rtr-qa-widget .carousel-track-button.disabled .rtr-icon path {
  fill: var(--rp-dot-inactive) !important;
}


/* --- 10. Eingabefeld --- */

rtr-qa-widget app-chat-input .form-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--rp-text-label);
}

rtr-qa-widget app-chat-input .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,
rtr-qa-widget app-chat-input .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,
rtr-qa-widget app-chat-input .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: var(--rp-border-input);
  border-width: 1px;
}

rtr-qa-widget app-chat-input .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,
rtr-qa-widget app-chat-input .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,
rtr-qa-widget app-chat-input .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: var(--rp-border-input-focused);
  border-width: var(--rp-border-input-focused-width, 2px);
}

rtr-qa-widget app-chat-input .mdc-text-field--outlined {
  background-color: var(--rp-bg-input);
  border-radius: 8px;
}

rtr-qa-widget app-chat-input textarea.chat-input::placeholder {
  color: var(--rp-text-placeholder);
  font-size: 16px;
  font-weight: 400;
}

/* FIX 3: Dark Mode – Eingabetext bleibt weiss, auch im fokussierten State.
   Angular Material setzt .mdc-text-field--focused eigene Textfarbe. */
rtr-qa-widget app-chat-input textarea.chat-input {
  color: var(--rp-text-body) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  min-height: 18px !important;
  height: inherit !important;
  max-height: 128px !important;
  caret-color: var(--rp-text-body) !important;
}

/* Angular Material setzt im focused State .mdc-text-field__input color – override */
rtr-qa-widget app-chat-input .mdc-text-field--focused textarea.chat-input,
rtr-qa-widget app-chat-input .mdc-text-field--focused .mdc-text-field__input {
  color: var(--rp-text-body) !important;
  caret-color: var(--rp-text-body) !important;
}


/* --- 11. Send-Button --- */

rtr-qa-widget app-chat-input .send-icon.disabled .widget-icon-button {
  border-color: var(--rp-send-icon-disabled) !important;
}

rtr-qa-widget app-chat-input .send-icon.disabled .widget-icon-button svg path,
rtr-qa-widget app-chat-input .send-icon.disabled .widget-icon-button path {
  fill: var(--rp-send-icon-disabled) !important;
}

rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button {
  border-color: var(--rtr-primary) !important;
  background-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* FIX 4: Dark Mode – Send-Button Active-State.
  Im Dark Mode hat der Button einen petrolfarbenen Hintergrund (#2b9095),
   das Icon muss weiss sein und darf nicht durch die fill-Regel
  (var(--rtr-primary) = petrol) "verschwinden".
   Loesung: Hover-State bleibt weiss, Normal-State bekommt Primaerfarbe. */
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button svg path,
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button path {
  fill: var(--rtr-primary) !important;
}

rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover,
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:active {
  background-color: var(--rtr-primary) !important;
  border-color: var(--rtr-primary) !important;
}

rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover svg path,
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover path,
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:active svg path,
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:active path {
  fill: #ffffff !important;
}

/* Dark Mode: gefuellter Button als Standard (nicht nur hover) */
@media (prefers-color-scheme: dark) {
  rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button {
    background-color: var(--rtr-primary) !important;
  }
  rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button svg path,
  rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button path {
    fill: #ffffff !important;
  }
  rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover {
    background-color: var(--rtr-primary-hover) !important;
    border-color: var(--rtr-primary-hover) !important;
  }
}

.dark rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button,
rtr-qa-widget.dark app-chat-input .send-icon:not(.disabled) .widget-icon-button {
  background-color: var(--rtr-primary) !important;
}

.dark rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button svg path,
.dark rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button path,
rtr-qa-widget.dark app-chat-input .send-icon:not(.disabled) .widget-icon-button svg path,
rtr-qa-widget.dark app-chat-input .send-icon:not(.disabled) .widget-icon-button path {
  fill: #ffffff !important;
}

.dark rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover,
rtr-qa-widget.dark app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover {
  background-color: var(--rtr-primary-hover) !important;
  border-color: var(--rtr-primary-hover) !important;
}


/* --- 12. "Neuer Chat"-Button --- */

rtr-qa-widget .rtr-button.tertiary,
rtr-qa-widget rtr-button .rtr-button {
  color: var(--rtr-primary);
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  border: none;
}

rtr-qa-widget .rtr-button.tertiary .rtr-button-text,
rtr-qa-widget rtr-button .rtr-button-text {
  color: var(--rtr-primary);
}

rtr-qa-widget .rtr-button.tertiary .rtr-button-icon path,
rtr-qa-widget rtr-button .rtr-button-icon path,
rtr-qa-widget .rtr-button.tertiary .rtr-button-icon svg path,
rtr-qa-widget rtr-button .rtr-button-icon svg path {
  fill: var(--rtr-primary) !important;
}

rtr-qa-widget .rtr-button.tertiary:hover .rtr-button-text,
rtr-qa-widget rtr-button .rtr-button:hover .rtr-button-text {
  color: var(--rtr-primary-hover);
}

rtr-qa-widget .rtr-button.tertiary:hover .rtr-button-icon path,
rtr-qa-widget rtr-button .rtr-button:hover .rtr-button-icon path,
rtr-qa-widget .rtr-button.tertiary:hover .rtr-button-icon svg path,
rtr-qa-widget rtr-button .rtr-button:hover .rtr-button-icon svg path {
  fill: var(--rtr-primary-hover) !important;
}


/* --- 13. AI-Disclaimer --- */

rtr-qa-widget [class*="disclaimer"] {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--rp-text-disclaimer);
}


/* --- 14. Info-Overlay --- */

/* FIX 2: Modal scrollbar – overflow-y: auto auf allen moeglichen
   Container-Elementen, da Angular Material den Scroll-Container
   je nach Viewport unterschiedlich strukturiert. */
.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-container,
.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-surface,
.cdk-overlay-container:has(.rtr-dialog) [class*="dialog-surface"],
.cdk-overlay-container:has(.rtr-dialog) .dialog-wrapper,
.cdk-overlay-container:has(.rtr-dialog) .scrollable-content,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-container,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-surface,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog-surface"],
.cdk-overlay-container:has([class*="rtr-dialog"]) .dialog-wrapper,
.cdk-overlay-container:has([class*="rtr-dialog"]) .scrollable-content {
  background: var(--rp-overlay-bg, #ffffff) !important;
  border-radius: 8px;
  overflow-y: auto !important;
  max-height: 90vh !important;
}

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-content,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-content {
  overflow-y: auto !important;
  max-height: 60vh !important;
}

.cdk-overlay-container:has(.rtr-dialog) .cdk-overlay-backdrop,
.cdk-overlay-container:has([class*="rtr-dialog"]) .cdk-overlay-backdrop {
  background: rgba(4, 10, 20, 0.48) !important;
}

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-title,
.cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] h2,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-title,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--rp-overlay-text, #040A14);
  margin-bottom: 16px;
}

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-content,
.cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] p,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-content,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] p {
  font-size: 16px;
  font-weight: 400;
  color: var(--rp-overlay-text, #040A14);
  line-height: 1.25;
}

.cdk-overlay-container:has(.rtr-dialog) .description,
.cdk-overlay-container:has(.rtr-dialog) .description a,
.cdk-overlay-container:has(.rtr-dialog) .description small,
.cdk-overlay-container:has([class*="rtr-dialog"]) .description,
.cdk-overlay-container:has([class*="rtr-dialog"]) .description a,
.cdk-overlay-container:has([class*="rtr-dialog"]) .description small {
  color: var(--rp-overlay-text, #040A14) !important;
}

.cdk-overlay-container:has(.rtr-dialog) .description a,
.cdk-overlay-container:has([class*="rtr-dialog"]) .description a {
  text-decoration: underline;
}

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-actions button,
.cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] button[class*="primary"],
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-actions button,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] button[class*="primary"] {
  background-color: var(--rtr-primary) !important;
  color: #ffffff !important;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-actions button:hover,
.cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] button[class*="primary"]:hover,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-actions button:hover,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] button[class*="primary"]:hover {
  background-color: var(--rtr-primary-hover) !important;
}

@media (prefers-color-scheme: dark) {
  .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-container,
  .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-surface,
  .cdk-overlay-container:has(.rtr-dialog) [class*="dialog-surface"],
  .cdk-overlay-container:has(.rtr-dialog) .dialog-wrapper,
  .cdk-overlay-container:has(.rtr-dialog) .scrollable-content,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-container,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-surface,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog-surface"],
  .cdk-overlay-container:has([class*="rtr-dialog"]) .dialog-wrapper,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .scrollable-content {
    background: var(--rp-overlay-bg, #373B42) !important;
  }

  .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-title,
  .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-content,
  .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] h1,
  .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] h2,
  .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] p,
  .cdk-overlay-container:has(.rtr-dialog) .description,
  .cdk-overlay-container:has(.rtr-dialog) .description a,
  .cdk-overlay-container:has(.rtr-dialog) .description small,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-title,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-content,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] h1,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] h2,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] p,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .description,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .description a,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .description small {
    color: var(--rp-overlay-text, #ffffff) !important;
  }

  .cdk-overlay-container:has(.rtr-dialog) .cdk-overlay-backdrop,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .cdk-overlay-backdrop {
    background: rgba(0, 0, 0, 0.62) !important;
  }
}

.dark .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-container,
.dark .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-surface,
.dark .cdk-overlay-container:has(.rtr-dialog) [class*="dialog-surface"],
.dark .cdk-overlay-container:has(.rtr-dialog) .dialog-wrapper,
.dark .cdk-overlay-container:has(.rtr-dialog) .scrollable-content,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-container,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-surface,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog-surface"],
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .dialog-wrapper,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .scrollable-content {
  background: var(--rp-overlay-bg, #373B42) !important;
}

.dark .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-title,
.dark .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-content,
.dark .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] h1,
.dark .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] h2,
.dark .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] p,
.dark .cdk-overlay-container:has(.rtr-dialog) .description,
.dark .cdk-overlay-container:has(.rtr-dialog) .description a,
.dark .cdk-overlay-container:has(.rtr-dialog) .description small,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-title,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-content,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] h1,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] h2,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] p,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .description,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .description a,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .description small {
  color: var(--rp-overlay-text, #ffffff) !important;
}

rtr-qa-widget [class*="close"] svg path,
rtr-qa-widget [class*="close"] path,
.cdk-overlay-container:has(.rtr-dialog) [class*="close"] svg path,
.cdk-overlay-container:has(.rtr-dialog) [class*="close"] path,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] svg path,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] path {
  fill: var(--rp-overlay-text, #040A14) !important;
}

@media (prefers-color-scheme: dark) {
  .cdk-overlay-container:has(.rtr-dialog) [class*="close"] svg path,
  .cdk-overlay-container:has(.rtr-dialog) [class*="close"] path,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] svg path,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] path {
    fill: var(--rp-overlay-text, #ffffff) !important;
  }
}

.dark .cdk-overlay-container:has(.rtr-dialog) [class*="close"] svg path,
.dark .cdk-overlay-container:has(.rtr-dialog) [class*="close"] path,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] svg path,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] path {
  fill: var(--rp-overlay-text, #ffffff) !important;
}


/* --- 15. Feedback-Buttons --- */

rtr-qa-widget [class*="thumb"] button svg path,
rtr-qa-widget [class*="thumb"] button path,
rtr-qa-widget [class*="feedback"] button svg path,
rtr-qa-widget [class*="feedback"] button path {
  fill: var(--rtr-primary) !important;
}

rtr-qa-widget [class*="thumb"] button:hover svg path,
rtr-qa-widget [class*="thumb"] button:hover path,
rtr-qa-widget [class*="feedback"] button:hover svg path,
rtr-qa-widget [class*="feedback"] button:hover path {
  fill: var(--rtr-primary-hover) !important;
}


/* --- 16. Scrollbar --- */

rtr-qa-widget ::-webkit-scrollbar {
  width: 4px;
}

rtr-qa-widget ::-webkit-scrollbar-thumb {
  background-color: var(--rtr-primary);
  border-radius: 4px;
}

rtr-qa-widget ::-webkit-scrollbar-track {
  background: transparent;
}


/* --- 17. Fokus-Ring --- */

rtr-qa-widget *:focus-visible {
  outline: 2px solid var(--rtr-focus-outline-color);
  outline-offset: 2px;
}