.tero-chatbot {
  --tero-red: #b81834;
  --tero-red-dark: #860f24;
  --tero-red-soft: #fff1f3;
  --tero-surface: #ffffff;
  --tero-chat-bg: #f4f5f7;
  --tero-border: #dedfe3;
  --tero-heading: #303238;
  --tero-muted: #6d7280;
  --tero-shadow: 0 18px 50px rgba(35, 38, 45, 0.16);

  box-sizing: border-box;
  color: var(--tero-heading);
  font-family: Arial, Helvetica, sans-serif;
  max-width: 860px;
  width: 100%;
}

.tero-chatbot *,
.tero-chatbot *::before,
.tero-chatbot *::after {
  box-sizing: inherit;
}

.tero-chatbot__panel {
  background: var(--tero-surface);
  border: 1px solid var(--tero-border);
  border-radius: 8px;
  box-shadow: var(--tero-shadow);
  overflow: hidden;
  width: 100%;
}

.tero-chatbot__app {
  display: flex;
  flex-direction: column;
  height: min(860px, 82vh);
  min-height: 680px;
}

.tero-chatbot__header {
  align-items: flex-start;
  background: linear-gradient(135deg, #ffffff 0%, #fff6f7 100%);
  border-bottom: 1px solid var(--tero-border);
  color: var(--tero-heading);
  display: flex;
  flex: 0 0 auto;
  gap: 20px;
  justify-content: flex-start;
  padding: 18px 22px;
}

.tero-chatbot__header::before {
  align-items: center;
  background: var(--tero-red);
  border-radius: 50%;
  color: #fff;
  content: 'T';
  display: inline-flex;
  flex: 0 0 38px;
  font-size: 16px;
  font-weight: 700;
  height: 38px;
  justify-content: center;
  margin-top: 1px;
  width: 38px;
}

.tero-chatbot__eyebrow {
  color: var(--tero-red);
  font-size: 13px;
  line-height: 1.35;
  margin: 0 0 5px;
}

.tero-chatbot__title {
  color: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.tero-chatbot__subtitle {
  color: var(--tero-muted);
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  text-align: left;
}

.tero-chatbot__body {
  background: var(--tero-chat-bg);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.tero-chatbot__thread {
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
    repeating-linear-gradient(135deg, #ebedf1 0, #ebedf1 1px, transparent 1px, transparent 18px);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 22px 24px;
  scroll-behavior: auto;
}

.tero-chatbot__row {
  display: flex;
  width: 100%;
}

.tero-chatbot__row--bot {
  justify-content: flex-start;
}

.tero-chatbot__row--user {
  justify-content: flex-end;
}

.tero-chatbot__row--system {
  justify-content: center;
}

.tero-chatbot__bubble {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(33, 36, 42, 0.05);
  max-width: min(78%, 560px);
  overflow-wrap: anywhere;
  padding: 12px 14px;
}

.tero-chatbot__bubble p {
  font-size: 16px;
  line-height: 1.48;
  margin: 0;
}

.tero-chatbot__bubble a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.tero-chatbot__bubble--bot {
  background: #fff;
  border: 1px solid var(--tero-border);
  color: var(--tero-heading);
}

.tero-chatbot__bubble--user {
  background: var(--tero-red);
  color: #fff;
}

.tero-chatbot__bubble--system {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--tero-border);
  color: var(--tero-muted);
  font-size: 14px;
  max-width: min(86%, 620px);
  text-align: center;
}

.tero-chatbot__bubble--error {
  background: #fff0f2;
  border: 1px solid #e59aa6;
  border-left: 4px solid var(--tero-red);
  color: var(--tero-red-dark);
  text-align: left;
}

.tero-chatbot__typing {
  align-items: center;
  background: #fff;
  border: 1px solid var(--tero-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(33, 36, 42, 0.05);
  display: inline-flex;
  gap: 5px;
  height: 38px;
  padding: 0 15px;
}

.tero-chatbot__typing span {
  animation: tero-chatbot-typing 1s infinite ease-in-out;
  background: var(--tero-red);
  border-radius: 50%;
  display: block;
  height: 7px;
  opacity: 0.5;
  width: 7px;
}

.tero-chatbot__typing span:nth-child(2) {
  animation-delay: 120ms;
}

.tero-chatbot__typing span:nth-child(3) {
  animation-delay: 240ms;
}

.tero-chatbot__composer {
  background: #fff;
  border-top: 1px solid var(--tero-border);
  box-shadow: 0 -8px 22px rgba(33, 36, 42, 0.06);
  flex: 0 0 auto;
  padding: 14px 18px 16px;
}

.tero-chatbot__composer--input,
.tero-chatbot__composer--quick,
.tero-chatbot__composer--summary {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.tero-chatbot__composer--quick {
  position: relative;
  z-index: 1;
}

.tero-chatbot__composer--actions {
  display: flex;
  justify-content: flex-end;
}

.tero-chatbot__composer--upload {
  padding: 14px 18px;
}

.tero-chatbot__composer--status {
  padding: 16px 18px;
}

.tero-chatbot__status-text {
  color: var(--tero-muted);
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 9px;
}

.tero-chatbot__input-row {
  align-items: stretch;
  display: flex;
  gap: 10px;
}

.tero-chatbot__input,
.tero-chatbot__select {
  background: #fff;
  border: 1px solid #cfd2d8;
  border-radius: 999px;
  color: var(--tero-heading);
  flex: 1 1 auto;
  font: inherit;
  min-height: 46px;
  min-width: 0;
  padding: 11px 16px;
  width: 100%;
}


.tero-chatbot__input[type='number'] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.tero-chatbot__input[type='number']::-webkit-inner-spin-button,
.tero-chatbot__input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tero-chatbot__button,
.tero-chatbot__send {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  justify-content: center;
  line-height: 1.2;
  min-height: 44px;
  padding: 12px 18px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.tero-chatbot__button:disabled,
.tero-chatbot__input:disabled,
.tero-chatbot__send:disabled {
  cursor: wait;
  opacity: 0.58;
}

.tero-chatbot__button--choice {
  box-shadow: none;
}

.tero-chatbot__send,
.tero-chatbot__button--primary {
  background: var(--tero-red);
  color: #fff;
}

.tero-chatbot__send {
  border-radius: 999px;
  flex: 0 0 auto;
  min-width: 104px;
}

.tero-chatbot__send:hover,
.tero-chatbot__send:focus,
.tero-chatbot__button--primary:hover,
.tero-chatbot__button--primary:focus {
  background: var(--tero-red-dark);
}

.tero-chatbot__button--secondary,
.tero-chatbot__button--back,
.tero-chatbot__button--summary {
  background: #fff;
  border-color: var(--tero-border);
  color: var(--tero-heading);
}

.tero-chatbot__button--secondary:hover,
.tero-chatbot__button--secondary:focus,
.tero-chatbot__button--back:hover,
.tero-chatbot__button--back:focus,
.tero-chatbot__button--summary:hover,
.tero-chatbot__button--summary:focus {
  border-color: var(--tero-red);
  color: var(--tero-red-dark);
}

.tero-chatbot__choice-row,
.tero-chatbot__action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tero-chatbot__choice-row {
  max-height: none;
  overflow: visible;
  padding: 2px 0;
  pointer-events: auto;
}

.tero-chatbot__button--choice {
  background: #fff;
  border-color: var(--tero-border);
  color: var(--tero-heading);
  flex: 1 1 150px;
  pointer-events: auto;
}

.tero-chatbot__button--choice:hover,
.tero-chatbot__button--choice:focus,
.tero-chatbot__button--choice-active {
  background: var(--tero-red-soft);
  border-color: var(--tero-red);
  color: var(--tero-red-dark);
}

.tero-chatbot__action-row--secondary {
  justify-content: space-between;
}

.tero-chatbot__progress-wrap {
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tero-chatbot__progress-label {
  color: var(--tero-muted);
  font-size: 13px;
  line-height: 1.3;
}

.tero-chatbot__progress {
  background: #e5e7eb;
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.tero-chatbot__progress-bar {
  background: var(--tero-red);
  border-radius: inherit;
  height: 100%;
  transition: width 180ms ease;
  width: var(--progress, 0%);
}

.tero-chatbot__progress--indeterminate .tero-chatbot__progress-bar {
  animation: tero-chatbot-progress 1.25s infinite ease-in-out;
  width: 42%;
}

.tero-chatbot__upload {
  align-items: center;
  background: #fff;
  border: 1px dashed #c6c8cf;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 58px;
  padding: 13px 15px;
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.tero-chatbot__upload::after {
  background: var(--tero-red);
  border-radius: 6px;
  color: #fff;
  content: 'Datei wählen';
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 14px;
}

.tero-chatbot__upload--dragover,
.tero-chatbot__upload:hover,
.tero-chatbot__upload:focus-within {
  background: var(--tero-red-soft);
  border-color: var(--tero-red);
}

.tero-chatbot__upload-title {
  color: var(--tero-heading);
  font-size: 15px;
  font-weight: 700;
}

.tero-chatbot__upload-file {
  color: var(--tero-muted);
  font-size: 13px;
  line-height: 1.35;
}

.tero-chatbot__file {
  cursor: pointer;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

.tero-chatbot__summary {
  background: #fff;
  border: 1px solid var(--tero-border);
  border-radius: 8px;
  max-height: 260px;
  overflow: auto;
  width: 100%;
}

.tero-chatbot__summary-item {
  align-items: center;
  border-bottom: 1px solid var(--tero-border);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(120px, auto) auto;
  padding: 11px 12px;
}

.tero-chatbot__summary-item:last-child {
  border-bottom: 0;
}

.tero-chatbot__summary-label {
  color: var(--tero-muted);
  font-size: 14px;
  line-height: 1.35;
}

.tero-chatbot__summary-value {
  color: var(--tero-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.tero-chatbot__input:focus,
.tero-chatbot__select:focus,
.tero-chatbot__button:focus,
.tero-chatbot__send:focus {
  outline: 3px solid color-mix(in srgb, var(--tero-red) 18%, transparent);
  outline-offset: 2px;
}

@keyframes tero-chatbot-typing {
  0%, 80%, 100% {
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes tero-chatbot-progress {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(240%);
  }
}

@media (max-width: 720px) {
  .tero-chatbot {
    max-width: 100%;
  }

  .tero-chatbot__panel {
    border-radius: 0;
    box-shadow: none;
  }

  .tero-chatbot__app {
    height: 78vh;
    min-height: 580px;
  }

  .tero-chatbot__header {
    flex-direction: column;
    gap: 7px;
    padding: 16px;
  }

  .tero-chatbot__subtitle {
    flex-basis: auto;
    text-align: left;
  }

  .tero-chatbot__thread {
    padding: 16px;
  }

  .tero-chatbot__bubble {
    max-width: 92%;
  }

  .tero-chatbot__composer {
    padding: 12px 14px 14px;
  }

  .tero-chatbot__input-row,
  .tero-chatbot__action-row {
    flex-direction: column;
  }

  .tero-chatbot__send,
  .tero-chatbot__button {
    width: 100%;
  }

  .tero-chatbot__upload {
    align-items: flex-start;
    flex-direction: column;
  }

  .tero-chatbot__upload::after {
    text-align: center;
    width: 100%;
  }

  .tero-chatbot__summary-item {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 720px) and (min-width: 721px) {
  .tero-chatbot__app {
    height: 82vh;
    min-height: 540px;
  }
}

/* Mini-Fix: Summary-Endscreen Bearbeiten-Buttons als klare Link-Aktion */
.tero-chatbot__button--summary {
  background: transparent;
  border: 0;
  color: var(--tero-red);
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  min-height: auto;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  width: auto;
}

.tero-chatbot__button--summary:hover,
.tero-chatbot__button--summary:focus {
  background: transparent;
  border: 0;
  color: var(--tero-red-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Mini-Fix: Summary-Bearbeiten als kleiner TERO-roter Textlink */
.tero-chatbot .tero-chatbot__summary .tero-chatbot__button--summary {
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--tero-red) !important;
  cursor: pointer;
  display: inline;
  font-family: inherit;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.3;
  min-height: 0 !important;
  padding: 0 !important;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  width: auto !important;
}

.tero-chatbot .tero-chatbot__summary .tero-chatbot__button--summary:hover,
.tero-chatbot .tero-chatbot__summary .tero-chatbot__button--summary:focus-visible {
  background: transparent !important;
  color: var(--tero-red-dark) !important;
  outline: 2px solid rgba(184, 24, 52, 0.18);
  outline-offset: 2px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Mini-Fix: Header kompakter, Chat größer/höher */
.tero-chatbot {
  max-width: 960px;
}

.tero-chatbot__app {
  height: min(980px, 92vh);
  min-height: 760px;
}

.tero-chatbot__header {
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 14px 22px;
}

.tero-chatbot__header::before {
  flex: 0 0 42px;
  height: 42px;
  margin-top: 0;
  width: 42px;
}

.tero-chatbot__title {
  font-size: 25px;
  line-height: 1.12;
  margin: 0;
}

.tero-chatbot__subtitle {
  display: none !important;
}

.tero-chatbot__thread {
  padding-top: 18px;
}

/* Chatbot-Content auf der Seite etwas höher ziehen */
.tero-job-application--chatbot {
  margin-top: -24px;
}

@media (min-width: 721px) {
  .tero-chatbot__app {
    height: min(1000px, 93vh);
    min-height: 780px;
  }
}

@media (max-height: 820px) and (min-width: 721px) {
  .tero-chatbot__app {
    height: 91vh;
    min-height: 700px;
  }

  .tero-job-application--chatbot {
    margin-top: -18px;
  }
}

/* Mini-Fix: TERO-Logo im Chatbot-Profilkreis und geringerer Abstand zum Seitenheader */
.tero-chatbot__header::before {
  background-color: #fff;
  background-image: url('https://www.tero-personal.de/typo3conf/ext/pxtero/Resources/Public/Images/logo.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 78% auto;
  border: 2px solid var(--tero-red);
  color: transparent;
  content: '';
}

/* Chat-Modul näher an den Webseiten-Header ziehen */
.tero-job-application--chatbot {
  margin-top: -48px;
}

@media (max-height: 820px) and (min-width: 721px) {
  .tero-job-application--chatbot {
    margin-top: -40px;
  }
}

@media (max-width: 720px) {
  .tero-job-application--chatbot {
    margin-top: -18px;
  }
}

/* Mini-Fix: Abstand Chatbot zum Webseiten-Header gezielt reduzieren */
.tero-job-application.tero-job-application--chatbot {
  margin-top: 50px !important;
}

.tero-job-application--chatbot #tero-chatbot.tero-chatbot {
  margin-top: 0 !important;
}

.tero-job-application--chatbot .tero-chatbot__panel {
  padding-top: 0 !important;
}

/* Mini-Fix: Chatbot-Uploadfeld optisch wie Stellenbewerbungsformular */
.tero-chatbot__composer--upload {
  padding: 16px 18px 18px;
}

.tero-chatbot__composer--upload .tero-chatbot__upload {
  align-items: center;
  background: #fff;
  border: 1px dashed #c6c8cf;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: center;
  min-height: 128px;
  padding: 18px 16px;
  position: relative;
  text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.tero-chatbot__composer--upload .tero-chatbot__upload::after {
  content: none !important;
}

.tero-chatbot__composer--upload .tero-chatbot__upload:hover,
.tero-chatbot__composer--upload .tero-chatbot__upload:focus-within,
.tero-chatbot__composer--upload .tero-chatbot__upload.tero-chatbot__upload--dragover {
  background: var(--tero-red-soft);
  border-color: var(--tero-red);
}

.tero-chatbot__upload-droptext {
  color: var(--tero-heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  order: 3;
}

.tero-chatbot__upload-or {
  color: var(--tero-muted);
  font-size: 13px;
  line-height: 1.2;
  order: 2;
}

.tero-chatbot__upload-button {
  background: var(--tero-red);
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  order: 1;
  padding: 11px 18px;
}

.tero-chatbot__upload-note {
  color: var(--tero-muted);
  font-size: 12px;
  line-height: 1.35;
  margin: 10px 0 0;
  text-align: left;
}

.tero-chatbot__upload-title,
.tero-chatbot__upload-file {
  display: none !important;
}

/* Mini-Fix: Chatbot-Uploadbutton an Stellenformular-Button angleichen */
.tero-chatbot__upload-button {
  background-image: linear-gradient(45deg, #d52a45 0%, #ef5b70 52%, #b81734 100%);
  background-size: 200% auto;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(184, 24, 52, .12);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  transition: background-position .35s ease, box-shadow .2s ease, transform .12s ease, filter .2s ease;
}

.tero-chatbot__upload:hover .tero-chatbot__upload-button,
.tero-chatbot__upload:focus-within .tero-chatbot__upload-button,
.tero-chatbot__upload.tero-chatbot__upload--dragover .tero-chatbot__upload-button {
  background-position: right center;
  box-shadow: 0 14px 30px rgba(184, 24, 52, .16);
  filter: brightness(1.03);
}

.tero-chatbot__upload:active .tero-chatbot__upload-button {
  transform: scale(.98);
}

/* Mini-Fix: Choice-Buttons und Senden-Button optisch an Uploadbutton angleichen */
.tero-chatbot__send,
.tero-chatbot__button--choice {
  background-image: linear-gradient(45deg, #d52a45 0%, #ef5b70 52%, #b81734 100%);
  background-size: 200% auto;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(184, 24, 52, .12);
  color: #fff;
  font-weight: 900;
  transition: background-position .35s ease, box-shadow .2s ease, transform .12s ease, filter .2s ease;
}

.tero-chatbot__button--choice {
  flex: 1 1 150px;
}

.tero-chatbot__send:hover,
.tero-chatbot__send:focus,
.tero-chatbot__button--choice:hover,
.tero-chatbot__button--choice:focus,
.tero-chatbot__button--choice-active {
  background-position: right center;
  box-shadow: 0 14px 30px rgba(184, 24, 52, .16);
  color: #fff;
  filter: brightness(1.03);
}

.tero-chatbot__send:active,
.tero-chatbot__button--choice:active {
  transform: scale(.98);
}

/* Mini-Fix: Choice-Buttons zuverlässig im TERO-Verlauf-Stil */
.tero-chatbot .tero-chatbot__choice-row .tero-chatbot__button.tero-chatbot__button--choice {
  background: linear-gradient(45deg, #d52a45 0%, #ef5b70 52%, #b81734 100%) !important;
  background-size: 200% auto !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(184, 24, 52, .12) !important;
  color: #fff !important;
  font-weight: 900 !important;
  transition: background-position .35s ease, box-shadow .2s ease, transform .12s ease, filter .2s ease !important;
}

.tero-chatbot .tero-chatbot__choice-row .tero-chatbot__button.tero-chatbot__button--choice:hover,
.tero-chatbot .tero-chatbot__choice-row .tero-chatbot__button.tero-chatbot__button--choice:focus,
.tero-chatbot .tero-chatbot__choice-row .tero-chatbot__button.tero-chatbot__button--choice:focus-visible,
.tero-chatbot .tero-chatbot__choice-row .tero-chatbot__button.tero-chatbot__button--choice-active {
  background-position: right center !important;
  box-shadow: 0 14px 30px rgba(184, 24, 52, .16) !important;
  color: #fff !important;
  filter: brightness(1.03) !important;
}

.tero-chatbot .tero-chatbot__choice-row .tero-chatbot__button.tero-chatbot__button--choice:active {
  transform: scale(.98);
}

/* Mini-Fix: Zurück/Überspringen visuell deutlicher von Eingabe/Choice trennen */
.tero-chatbot__composer--input .tero-chatbot__action-row--secondary,
.tero-chatbot__composer--quick .tero-chatbot__action-row--secondary {
  margin-top: 22px;
}

/* Mini-Fix: Endscreen-Konvention: Primäraktion oben, Zurück darunter */
.tero-chatbot__action-row--summary-submit {
  align-items: flex-end;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 22px;
}

/* Mini-Fix: Antwort-Buttons zentral im TERO-Verlauf-Stil */
.tero-chatbot .tero-chatbot__send,
.tero-chatbot .tero-chatbot__button--choice {
  background-color: #d52a45 !important;
  background-image: linear-gradient(45deg, #d52a45 0%, #ef5b70 52%, #b81734 100%) !important;
  background-size: 200% auto !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(184, 24, 52, .12) !important;
  color: #fff !important;
  font-weight: 900 !important;
  transition: background-position .35s ease, box-shadow .2s ease, transform .12s ease, filter .2s ease !important;
}

/* Senden-Hover darf nicht mehr auf dunkelrot ohne Verlauf springen */
.tero-chatbot .tero-chatbot__send:hover,
.tero-chatbot .tero-chatbot__send:focus,
.tero-chatbot .tero-chatbot__send:focus-visible,
.tero-chatbot .tero-chatbot__button--choice:hover,
.tero-chatbot .tero-chatbot__button--choice:focus,
.tero-chatbot .tero-chatbot__button--choice:focus-visible,
.tero-chatbot .tero-chatbot__button--choice-active {
  background-color: #d52a45 !important;
  background-image: linear-gradient(45deg, #d52a45 0%, #ef5b70 52%, #b81734 100%) !important;
  background-position: right center !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(184, 24, 52, .16) !important;
  color: #fff !important;
  filter: brightness(1.03) !important;
}

.tero-chatbot .tero-chatbot__send:active,
.tero-chatbot .tero-chatbot__button--choice:active {
  transform: scale(.98);
}

/* Choice-Buttons: zentrale Zukunftsregel für alle Antwortmöglichkeiten */
.tero-chatbot .tero-chatbot__choice-row {
  gap: 10px;
}

.tero-chatbot .tero-chatbot__choice-row .tero-chatbot__button--choice {
  flex: 1 1 150px;
  min-width: 130px;
  pointer-events: auto;
}

/* Mini-Fix: alle Choice-Antwortbuttons wirklich zentral im TERO-Verlauf-Stil */
#tero-chatbot [data-action='yesno-answer'].tero-chatbot__button--choice,
#tero-chatbot [data-action='select-answer'].tero-chatbot__button--choice {
  appearance: none !important;
  background: linear-gradient(45deg, #d52a45 0%, #ef5b70 52%, #b81734 100%) !important;
  background-color: #d52a45 !important;
  background-image: linear-gradient(45deg, #d52a45 0%, #ef5b70 52%, #b81734 100%) !important;
  background-position: left center !important;
  background-size: 200% auto !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 24px rgba(184, 24, 52, .12) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-weight: 900 !important;
  min-height: 44px;
  transition: background-position .35s ease, box-shadow .2s ease, transform .12s ease, filter .2s ease !important;
}

#tero-chatbot [data-action='yesno-answer'].tero-chatbot__button--choice:hover,
#tero-chatbot [data-action='yesno-answer'].tero-chatbot__button--choice:focus,
#tero-chatbot [data-action='yesno-answer'].tero-chatbot__button--choice:focus-visible,
#tero-chatbot [data-action='select-answer'].tero-chatbot__button--choice:hover,
#tero-chatbot [data-action='select-answer'].tero-chatbot__button--choice:focus,
#tero-chatbot [data-action='select-answer'].tero-chatbot__button--choice:focus-visible,
#tero-chatbot .tero-chatbot__button--choice-active {
  background: linear-gradient(45deg, #d52a45 0%, #ef5b70 52%, #b81734 100%) !important;
  background-color: #d52a45 !important;
  background-image: linear-gradient(45deg, #d52a45 0%, #ef5b70 52%, #b81734 100%) !important;
  background-position: right center !important;
  background-size: 200% auto !important;
  border-color: transparent !important;
  box-shadow: 0 14px 30px rgba(184, 24, 52, .16) !important;
  color: #fff !important;
  filter: brightness(1.03) !important;
}

#tero-chatbot [data-action='yesno-answer'].tero-chatbot__button--choice:active,
#tero-chatbot [data-action='select-answer'].tero-chatbot__button--choice:active {
  transform: scale(.98);
}

/* Mini-Fix: Ergebnisseite - Zurück unterhalb links ausrichten */
.tero-chatbot__action-row--summary-submit .tero-chatbot__button--back {
  align-self: flex-start;
}

/* Mini-Fix: Chatblasen stärker abheben, dezent passend zum TERO-Design */
.tero-chatbot__bubble,
.tero-chatbot__typing {
  border-radius: 10px;
  box-shadow:
    0 10px 24px rgba(33, 36, 42, 0.08),
    0 2px 6px rgba(33, 36, 42, 0.06);
}

.tero-chatbot__bubble--bot,
.tero-chatbot__bubble--system,
.tero-chatbot__typing {
  background: #fff;
  border: 1px solid rgba(207, 210, 216, 0.95);
}

.tero-chatbot__bubble--user {
  box-shadow:
    0 10px 24px rgba(184, 24, 52, 0.16),
    0 2px 6px rgba(33, 36, 42, 0.08);
}

/* Falls noch irgendwo System-Messages entstehen: wie normale Bot-Nachricht links darstellen */
.tero-chatbot__row--system {
  justify-content: flex-start;
}

.tero-chatbot__bubble--system {
  color: var(--tero-heading);
  font-size: inherit;
  max-width: min(78%, 560px);
  text-align: left;
}

/* Mini-Fix: einheitlicher neutraler Shadow für alle Chatblasen */
.tero-chatbot {
  --tero-chatbot-bubble-shadow:
    0 10px 24px rgba(33, 36, 42, 0.08),
    0 2px 6px rgba(33, 36, 42, 0.06);
}

.tero-chatbot__bubble,
.tero-chatbot__bubble--bot,
.tero-chatbot__bubble--user,
.tero-chatbot__bubble--system,
.tero-chatbot__bubble--error,
.tero-chatbot__typing {
  box-shadow: var(--tero-chatbot-bubble-shadow) !important;
}

/* Mini-Fix: Chatbot-Hauptbereiche optisch beruhigen */
.tero-chatbot {
  --tero-chatbot-zone-bg: #ffffff;
  --tero-chatbot-thread-bg: #fbfbfc;
  --tero-chatbot-zone-line: rgba(222, 223, 227, 0.95);
}

/* Gesamtkarte neutral halten */
.tero-chatbot__panel,
.tero-chatbot__app,
.tero-chatbot__body {
  background: var(--tero-chatbot-zone-bg) !important;
}

/* Bereich 1: Header ohne roten Verlauf, nur klare untere Linie */
.tero-chatbot__header {
  background: var(--tero-chatbot-zone-bg) !important;
  border-bottom: 1px solid var(--tero-chatbot-zone-line) !important;
}

/* Bereich 2: Chatverlauf ruhig, ohne diagonales Pattern */
.tero-chatbot__thread {
  background: var(--tero-chatbot-thread-bg) !important;
  border-bottom: 1px solid var(--tero-chatbot-zone-line);
}

/* Bereich 3: Antwortfeld neutral, keine harte Schattenkante */
.tero-chatbot__composer {
  background: var(--tero-chatbot-zone-bg) !important;
  border-top: 1px solid var(--tero-chatbot-zone-line) !important;
  box-shadow: none !important;
}

/* Composer-Varianten ebenfalls neutral halten */
.tero-chatbot__composer--input,
.tero-chatbot__composer--quick,
.tero-chatbot__composer--upload,
.tero-chatbot__composer--summary,
.tero-chatbot__composer--status {
  background: var(--tero-chatbot-zone-bg) !important;
}

/* Mini-Fix: Header, Thread und Composer optisch sauberer trennen */
.tero-chatbot {
  --tero-chatbot-zone-bg: #ffffff;
  --tero-chatbot-thread-bg: #fbfbfc;
  --tero-chatbot-zone-line: rgba(222, 223, 227, 0.95);
  --tero-chatbot-scrollbar-track: #e6e7ea;
}

/* Header bleibt clean und bildet die obere Begrenzung des Chatverlaufs */
.tero-chatbot__header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--tero-chatbot-zone-line) !important;
}

/* Body neutral, damit keine zweite Hintergrundfarbe zwischen Header/Thread/Composer stört */
.tero-chatbot__body {
  background: #ffffff !important;
}

/* Thread als eigentliche Chatfläche: ruhig, leicht abgesetzt, bis zur Headerlinie */
.tero-chatbot__thread {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(251, 251, 252, 0) 7%,
      rgba(251, 251, 252, 0) 93%,
      rgba(255, 255, 255, 0.78) 100%
    ),
    linear-gradient(180deg, #fbfbfc 0%, #fafafb 100%) !important;
  border-bottom: 1px solid var(--tero-chatbot-zone-line);
  box-shadow:
    inset 0 10px 20px rgba(33, 36, 42, 0.025),
    inset 0 -10px 20px rgba(33, 36, 42, 0.02);
  padding-top: 18px;
  scrollbar-color: var(--tero-red) var(--tero-chatbot-scrollbar-track);
  scrollbar-width: thin;
}

/* Chrome/Edge/Safari Scrollbar */
.tero-chatbot__thread::-webkit-scrollbar {
  width: 10px;
}

.tero-chatbot__thread::-webkit-scrollbar-track {
  background: var(--tero-chatbot-scrollbar-track);
  border-radius: 999px;
  margin: 8px 0;
}

.tero-chatbot__thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d52a45 0%, #b81734 100%);
  border: 2px solid var(--tero-chatbot-scrollbar-track);
  border-radius: 999px;
}

.tero-chatbot__thread::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ef5b70 0%, #b81734 100%);
}

/* Composer bleibt clean, aber etwas kompakter und ohne schwere Schattenkante */
.tero-chatbot__composer {
  background: #ffffff !important;
  border-top: 1px solid var(--tero-chatbot-zone-line) !important;
  box-shadow: none !important;
  padding: 12px 18px 14px;
}

/* Bestehenden guten Abstand der Sekundärbuttons behalten */
.tero-chatbot__composer--input .tero-chatbot__action-row--secondary,
.tero-chatbot__composer--quick .tero-chatbot__action-row--secondary {
  margin-top: 22px;
}

/* Mini-Fix: Thread/Composer sichtbar stärker ausarbeiten */
.tero-chatbot {
  --tero-chatbot-thread-bg-strong: #f6f7f9;
  --tero-chatbot-thread-bg-center: #f8f9fb;
  --tero-chatbot-zone-line-strong: rgba(204, 207, 214, 0.95);
  --tero-chatbot-fade-bg: rgba(255, 255, 255, 0.78);
}

/* Header bleibt clean, die Linie wird zur klaren Oberkante des Threads */
.tero-chatbot__header {
  background: #fff !important;
  border-bottom: 1px solid var(--tero-chatbot-zone-line-strong) !important;
}

/* Thread direkt als sichtbare Chatfläche unter der Headerlinie */
.tero-chatbot__thread {
  background:
    linear-gradient(180deg, #f3f4f6 0%, var(--tero-chatbot-thread-bg-center) 18%, var(--tero-chatbot-thread-bg-strong) 100%) !important;
  border-bottom: 1px solid var(--tero-chatbot-zone-line-strong) !important;
  box-shadow:
    inset 0 12px 22px rgba(33, 36, 42, 0.045),
    inset 0 -10px 18px rgba(33, 36, 42, 0.035) !important;
  padding: 14px 26px 18px !important;
  position: relative;
  scrollbar-color: var(--tero-red) #e1e3e7;
  scrollbar-width: thin;
}

/* Echter seitlicher Fade, bewusst sichtbar, aber nicht bunt */
.tero-chatbot__thread::before,
.tero-chatbot__thread::after {
  bottom: 0;
  content: '';
  pointer-events: none;
  position: sticky;
  top: 0;
  width: 34px;
  z-index: 3;
}

.tero-chatbot__thread::before {
  align-self: flex-start;
  background: linear-gradient(90deg, var(--tero-chatbot-fade-bg) 0%, rgba(255, 255, 255, 0) 100%);
  margin-bottom: -100%;
  margin-left: -26px;
  min-height: 100%;
}

.tero-chatbot__thread::after {
  align-self: flex-end;
  background: linear-gradient(270deg, var(--tero-chatbot-fade-bg) 0%, rgba(255, 255, 255, 0) 100%);
  margin-bottom: -100%;
  margin-right: -26px;
  min-height: 100%;
}

/* Nachrichten bleiben über der Threadfläche */
.tero-chatbot__thread .tero-chatbot__row {
  position: relative;
  z-index: 2;
}

/* Chrome/Edge/Safari Scrollbar bleibt TERO-rot */
.tero-chatbot__thread::-webkit-scrollbar {
  width: 10px;
}

.tero-chatbot__thread::-webkit-scrollbar-track {
  background: #e1e3e7;
  border-radius: 999px;
  margin: 8px 0;
}

.tero-chatbot__thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ef5b70 0%, #b81734 100%);
  border: 2px solid #e1e3e7;
  border-radius: 999px;
}

.tero-chatbot__thread::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff6b80 0%, #b81734 100%);
}

/* Composer wirklich kompakter machen */
.tero-chatbot__composer {
  background: #fff !important;
  border-top: 1px solid var(--tero-chatbot-zone-line-strong) !important;
  box-shadow: none !important;
  padding: 9px 18px 11px !important;
}

/* Innerer Abstand im Composer enger, ohne Buttons zu quetschen */
.tero-chatbot__composer--input,
.tero-chatbot__composer--quick,
.tero-chatbot__composer--summary {
  gap: 8px !important;
}

.tero-chatbot__progress-wrap {
  gap: 4px !important;
}

.tero-chatbot__progress-label {
  font-size: 13px;
}

.tero-chatbot__input-row {
  gap: 10px;
}

/* Sekundärbuttons bleiben getrennt, aber der Block wird insgesamt niedriger */
.tero-chatbot__composer--input .tero-chatbot__action-row--secondary,
.tero-chatbot__composer--quick .tero-chatbot__action-row--secondary {
  margin-top: 16px !important;
}

/* Hotfix: defekten Thread-Fade entfernen und Chatverlauf sauber ausrichten */

/* Header ohne zusätzliche Linie; Thread schließt direkt darunter an */
.tero-chatbot__header {
  background: #fff !important;
  border-bottom: 0 !important;
}

/* Thread wieder stabil: keine seitlichen Pseudo-Fades als Layout-Elemente */
.tero-chatbot__thread {
  background: #f7f8fa !important;
  border-top: 1px solid rgba(204, 207, 214, 0.95) !important;
  border-bottom: 1px solid rgba(204, 207, 214, 0.95) !important;
  box-shadow:
    inset 0 8px 16px rgba(33, 36, 42, 0.035),
    inset 0 -8px 16px rgba(33, 36, 42, 0.025) !important;
  padding: 14px 24px 14px !important;
  position: relative;
}

/* Wichtig: keine kaputten linken/rechten Fade-Elemente mehr */
.tero-chatbot__thread::after {
  content: none !important;
  display: none !important;
}

/*
  Chat-typisches Verhalten:
  Wenn wenig Nachrichten vorhanden sind, sitzen sie unten im Thread.
  Wenn viele Nachrichten vorhanden sind, bleibt der Thread normal scrollbar.
*/
.tero-chatbot__thread::before {
  content: '' !important;
  display: block !important;
  flex: 0 0 auto !important;
  margin-top: auto !important;
  min-height: 0 !important;
  pointer-events: none !important;
  position: static !important;
  width: 0 !important;
}

/* Nachrichten sicher über dem Thread-Hintergrund */
.tero-chatbot__thread .tero-chatbot__row {
  position: relative;
  z-index: 1;
}

/* Composer sichtbar kompakter, aber Bedienabstände bleiben brauchbar */
.tero-chatbot__composer {
  background: #fff !important;
  border-top: 1px solid rgba(204, 207, 214, 0.95) !important;
  box-shadow: none !important;
  padding: 8px 18px 10px !important;
}

.tero-chatbot__composer--input,
.tero-chatbot__composer--quick,
.tero-chatbot__composer--summary {
  gap: 7px !important;
}

.tero-chatbot__progress-wrap {
  gap: 3px !important;
}

.tero-chatbot__composer--input .tero-chatbot__action-row--secondary,
.tero-chatbot__composer--quick .tero-chatbot__action-row--secondary {
  margin-top: 14px !important;
}

/* Scrollbar bleibt TERO-rot */
.tero-chatbot__thread {
  scrollbar-color: var(--tero-red) #e1e3e7;
  scrollbar-width: thin;
}

.tero-chatbot__thread::-webkit-scrollbar {
  width: 10px;
}

.tero-chatbot__thread::-webkit-scrollbar-track {
  background: #e1e3e7;
  border-radius: 999px;
  margin: 8px 0;
}

.tero-chatbot__thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ef5b70 0%, #b81734 100%);
  border: 2px solid #e1e3e7;
  border-radius: 999px;
}

.tero-chatbot__thread::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff6b80 0%, #b81734 100%);
}

/* Hotfix: Thread-Layout final stabilisieren, ohne Rollback */

/* Keine Pseudo-Elemente mehr im flexbasierten Chatverlauf.
   Die vorherigen Fade-/Spacer-Elemente haben Scroll und Nachrichtenposition beschädigt. */
.tero-chatbot__thread::before,
.tero-chatbot__thread::after {
  content: none !important;
  display: none !important;
  flex: initial !important;
  margin: 0 !important;
  min-height: 0 !important;
  position: static !important;
  width: auto !important;
}

/* Header etwas kompakter, damit der Thread optisch näher an den Header rückt */
.tero-chatbot__header {
  background: #fff !important;
  border-bottom: 0 !important;
  padding: 14px 22px 8px !important;
}

/* Body darf keine zusätzliche Lücke erzeugen */
.tero-chatbot__body {
  background: #fff !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Thread wieder als normaler scrollbarer Chatverlauf */
.tero-chatbot__thread {
  align-items: stretch !important;
  background: #f7f8fa !important;
  border-top: 1px solid rgba(204, 207, 214, 0.95) !important;
  border-bottom: 1px solid rgba(204, 207, 214, 0.95) !important;
  box-shadow:
    inset 0 8px 16px rgba(33, 36, 42, 0.035),
    inset 0 -8px 16px rgba(33, 36, 42, 0.025) !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 8px 24px 14px !important;
  position: relative !important;
  scroll-behavior: auto !important;
  scrollbar-color: var(--tero-red) #e1e3e7;
  scrollbar-width: thin;
}

/* Nachrichten dürfen keine Flex-Sonderlogik bekommen */
.tero-chatbot__thread .tero-chatbot__row {
  flex: 0 0 auto !important;
  position: relative;
  z-index: 1;
}

/* Composer clean und kompakt lassen */
.tero-chatbot__composer {
  background: #fff !important;
  border-top: 1px solid rgba(204, 207, 214, 0.95) !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  padding: 8px 18px 10px !important;
}

/* Scrollbar TERO-rot beibehalten */
.tero-chatbot__thread::-webkit-scrollbar {
  width: 10px;
}

.tero-chatbot__thread::-webkit-scrollbar-track {
  background: #e1e3e7;
  border-radius: 999px;
  margin: 8px 0;
}

.tero-chatbot__thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ef5b70 0%, #b81734 100%);
  border: 2px solid #e1e3e7;
  border-radius: 999px;
}

.tero-chatbot__thread::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff6b80 0%, #b81734 100%);
}

/* Hotfix: Thread-Layout final stabilisieren, ohne Rollback */

/* Keine Pseudo-Elemente mehr im flexbasierten Chatverlauf.
   Die vorherigen Fade-/Spacer-Elemente haben Scroll und Nachrichtenposition beschädigt. */
.tero-chatbot__thread::before,
.tero-chatbot__thread::after {
  content: none !important;
  display: none !important;
  flex: initial !important;
  margin: 0 !important;
  min-height: 0 !important;
  position: static !important;
  width: auto !important;
}

/* Header etwas kompakter, damit der Thread optisch näher an den Header rückt */
.tero-chatbot__header {
  background: #fff !important;
  border-bottom: 0 !important;
  padding: 14px 22px 8px !important;
}

/* Body darf keine zusätzliche Lücke erzeugen */
.tero-chatbot__body {
  background: #fff !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Thread wieder als normaler scrollbarer Chatverlauf */
.tero-chatbot__thread {
  align-items: stretch !important;
  background: #f7f8fa !important;
  border-top: 1px solid rgba(204, 207, 214, 0.95) !important;
  border-bottom: 1px solid rgba(204, 207, 214, 0.95) !important;
  box-shadow:
    inset 0 8px 16px rgba(33, 36, 42, 0.035),
    inset 0 -8px 16px rgba(33, 36, 42, 0.025) !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 8px 24px 14px !important;
  position: relative !important;
  scroll-behavior: auto !important;
  scrollbar-color: var(--tero-red) #e1e3e7;
  scrollbar-width: thin;
}

/* Nachrichten dürfen keine Flex-Sonderlogik bekommen */
.tero-chatbot__thread .tero-chatbot__row {
  flex: 0 0 auto !important;
  position: relative;
  z-index: 1;
}

/* Composer clean und kompakt lassen */
.tero-chatbot__composer {
  background: #fff !important;
  border-top: 1px solid rgba(204, 207, 214, 0.95) !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  padding: 8px 18px 10px !important;
}

/* Scrollbar TERO-rot beibehalten */
.tero-chatbot__thread::-webkit-scrollbar {
  width: 10px;
}

.tero-chatbot__thread::-webkit-scrollbar-track {
  background: #e1e3e7;
  border-radius: 999px;
  margin: 8px 0;
}

.tero-chatbot__thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ef5b70 0%, #b81734 100%);
  border: 2px solid #e1e3e7;
  border-radius: 999px;
}

.tero-chatbot__thread::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff6b80 0%, #b81734 100%);
}