:root {
  --cc-user-message-contrast-color: #fff !important;
}

/* Webchat Header-Farbe anpassen */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar {
  background: rgb(0, 100, 75);
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-title {
  color: white;
}

/* Transparenter Avatar vom Bot */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._avatar_ry0w9_1 {
  background-color: transparent !important;
  border-radius: 0; /* Rundungen entfernen, falls sie vorhanden sind */
  overflow: visible; /* Zuschnitte verhindern */
}

/* Start Button weiß */
[data-cognigy-webchat-root] .cognigy-webchat-1jyud0b {
  fill: #fff !important;
}

[data-cognigy-webchat-root] .cognigy-webchat-1jyud0b:hover {
  fill: #fff !important;
}

[data-cognigy-webchat-root] .cognigy-webchat-1jyud0b:not(.disabled):hover {
  fill: #fff !important;
}

/* Homescreen Buttons weiß */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-homescreen-send-button {
  color: #fff;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-prev-conversations-send-button {
  color: #fff;
}

/* Homescreen Schriftgröße */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-homescreen-title {
  font-size: 3rem;
  line-height: 1.2;
  margin-top: 6rem;
}

/* Homescreen Logo */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-homescreen-header-logo {
  content: url("https://primeo-energie.ch/magnolia/dam/Chatbot/logo-white.svg");
  display: block;
  width: auto;
  height: 3rem; /* Höhe anpassen, damit das Logo proportional kleiner bleibt */
  margin-top: 1rem; /* Erhöht den Abstand nach oben */
  object-fit: contain;
  border-radius: 0;
}

/*
Das hier sind die CSS Anpassungen für v.3.7
*/
/* Button & Quick Reply Anpassung */
/* [data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_87uru_1 {
    color: #0abbf0;
    background-color: #fff;
    border: #0abbf0 0.1rem solid;
}
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_87uru_1:hover {
    color: #fff;
    background-color: #0abbf0;
    border: #0abbf0 0.1rem solid;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_87uru_1:disabled {
    opacity: 0.3;
}
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_87uru_1 path {
    fill: #0abbf0;
    color: #0abbf0;
}
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_87uru_1:hover path {
    fill: #fff;
    color: #fff;
} */

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-buttons-template-button {
  margin-bottom: 10px;
}

/*
Das hier sind die CSS Anpassungen für v.3.16
*/
/* Button & Quick Reply Anpassung */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_1ukty_1 {
  color: #0abbf0;
  background-color: #fff;
  border: #0abbf0 0.1rem solid;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_1ukty_1:hover {
  color: #fff;
  background-color: #0abbf0;
  border: #0abbf0 0.1rem solid;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_1ukty_1:disabled {
  opacity: 0.3;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_1ukty_1 path {
  fill: #0abbf0;
  color: #0abbf0;
}

[data-cognigy-webchat-root] [data-cognigy-webchat].webchat ._button_1ukty_1:hover path {
  fill: #fff;
  color: #fff;
}

/* Webchat Button und Webchat Window auf linker Seite */
/*
Warum "!important"?
Weil die position sonst von den folgenden Klassen wieder überschrieben wird von left: 2rem zu right: 2rem.
*/
[data-cognigy-webchat-root] [data-cognigy-webchat] {
  left: 2rem !important;
}

[data-cognigy-webchat-root] button[data-cognigy-webchat-toggle] {
  left: 2rem !important;
}

/* Schließen-Button (X) und Zurück-Button weiß färben */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar button svg,
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar button path {
  fill: #fff !important; /* SVG-Symbole weiß färben */
  color: #fff !important; /* Sicherstellen, dass auch der Text weiß wird */
}

/* Hover-Effekt für bessere Sichtbarkeit */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar button:hover {
  opacity: 0.9;
  cursor: pointer;
}

/* Logo per Filter weiß färben */
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat .webchat-header-bar img {
  filter: grayscale(100%) brightness(0) invert(1) contrast(100%);
  border-radius: 0; /* Entfernt Rundungen, falls diese vorher angewendet wurden */
}

#webchatInputMessageInputInTextMode {
  min-height: auto;
}

[data-cognigy-webchat-root] article {
  width: auto;
  display: inherit;
}

[data-cognigy-webchat-root] .cognigy-webchat-uif2im {
  min-height: auto !important;
}