/* Allgemeines Chat-Styling des Kunden */

.n8n-chat .chat-window {
  border-radius: 15px;
  font-family: Helvetica, Arial, sans-serif;
}

.chat-layout .chat-header {
  background: #46288c;
}

.chat-window-wrapper .chat-window-toggle,
.chat-window-wrapper .chat-window-toggle:hover {
  background: #46288c;
}

.chat-message.chat-message-from-user:not(.chat-message-transparent) {
  background-color: #46288c;
}

/* Schriftgroesse der Nachrichten */

.n8n-markdown p,
.n8n-markdown li {
  font-size: 14px;
}

/*
 * Eingabefeld:
 * Das tatsaechliche Eingabefeld bleibt bei 16 px,
 * damit iOS beim Fokussieren nicht hineinzoomt.
 */

.chat-input {
  font-size: 14px;
}

.n8n-chat .chat-input textarea,
.n8n-chat .chat-inputs textarea,
.n8n-chat textarea,
.n8n-chat input {
  font-size: 16px !important;
}

/*
 * Nur den Placeholder minimal nach oben korrigieren.
 * Mehrzeiliger eingegebener Text bleibt unveraendert.
 */

.n8n-chat textarea::placeholder,
.n8n-chat input::placeholder {
  transform: translateY(-1px);
}

.n8n-chat textarea::-webkit-input-placeholder,
.n8n-chat input::-webkit-input-placeholder {
  transform: translateY(-1px);
}

/*
 * Zusaetzliches rundes X auf allen Screen-Groessen.
 */

.twiliner-chat-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  display: flex;
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.twiliner-chat-close::before,
.twiliner-chat-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.twiliner-chat-close::before {
  transform: rotate(45deg);
}

.twiliner-chat-close::after {
  transform: rotate(-45deg);
}

.twiliner-chat-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.twiliner-chat-close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/*
 * Der Header braucht auf allen Screens Platz fuer das zusaetzliche X.
 */

.n8n-chat .chat-header {
  position: relative;
  padding-right: 62px;
}

/*
 * Overlay existiert nur auf Mobile.
 */

.twiliner-chat-overlay {
  display: none;
}

@media screen and (max-width: 767px) {
  /*
   * Separater Scroll-Lock nur fuer den Chat.
   */

  html.twiliner-chat-is-open,
  body.twiliner-chat-is-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.twiliner-chat-is-open {
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    touch-action: none !important;
  }

  /*
   * Neutrale schwarze Abdunklung.
   */

  .twiliner-chat-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: rgba(0, 0, 0, 0.78);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 200ms ease,
      visibility 200ms ease;
  }

  .twiliner-chat-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /*
   * Chat liegt oberhalb der Abdunklung.
   */

  .n8n-chat,
  .n8n-chat .chat-window-wrapper {
    z-index: 2147483001 !important;
  }
}