/* ==================================================
   Akademie der Friseurkunst Österreich
   Datei: assets/css/erwin-chat.css
   Version: 1.80 Erwin R7
   Beschreibung: AdFÖ Styling für Erwin Chat-Widget.
   ================================================== */

.erwin-chat, .erwin-chat * { box-sizing: border-box; }
.erwin-chat {
  --erwin-orange: #f28c28;
  --erwin-orange-dark: #d97814;
  --erwin-text: #2f2f2f;
  --erwin-muted: #666;
  --erwin-border: rgba(0,0,0,.12);
  --erwin-soft: #fff7ef;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--erwin-text);
}
.erwin-chat-toggle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: var(--erwin-orange);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
  display: flex;
  align-items: center;
  justify-content: center;
}
.erwin-chat-toggle:hover { background: var(--erwin-orange-dark); transform: translateY(-1px); }
.erwin-chat-window {
  position: relative;
  display: none;
  width: min(720px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 32px));
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
  border: 1px solid rgba(242,140,40,.35);
}
.erwin-chat.is-open .erwin-chat-window { display: flex; flex-direction: column; }
.erwin-chat.is-open .erwin-chat-toggle { display: none; }
.erwin-chat-header {
  background: #fff;
  color: var(--erwin-text);
  padding: 18px 20px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-bottom: 5px solid var(--erwin-orange);
}
.erwin-chat-header-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.erwin-chat-header strong { display: block; font-size: 28px; line-height: 1.1; color: var(--erwin-orange); }
.erwin-chat-header span, .erwin-chat-header small { display: block; color: var(--erwin-text); }
.erwin-chat-header span { font-size: 16px; margin-top: 4px; font-weight: 700; }
.erwin-chat-header small { font-size: 13px; margin-top: 3px; color: var(--erwin-muted); }
.erwin-chat-header button {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(242,140,40,.35);
  background: #fff7ef;
  color: var(--erwin-orange-dark);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}
.erwin-chat-header button:hover { background: var(--erwin-orange); color: #fff; }
.erwin-avatar { display: block; border-radius: 50%; background: #fff; object-fit: cover; flex: 0 0 auto; box-shadow: 0 3px 10px rgba(0,0,0,.10); }
.erwin-avatar-large { width: 76px; height: 76px; padding: 2px; border: 2px solid var(--erwin-orange); }
.erwin-avatar-small { width: 42px; height: 42px; border: 1px solid rgba(242,140,40,.35); }
.erwin-chat-messages {
  padding: 20px 20px 10px;
  overflow-y: auto;
  min-height: 260px;
  max-height: 460px;
  background: linear-gradient(180deg,#fff,#fffaf5);
}
.erwin-message-row { display: flex; gap: 12px; margin-bottom: 16px; align-items: flex-start; }
.erwin-message-row-user { justify-content: flex-end; }
.erwin-message { max-width: 78%; padding: 14px 16px; border-radius: 18px; font-size: 16px; line-height: 1.45; white-space: pre-wrap; }
.erwin-message a { color: var(--erwin-orange-dark); font-weight: 700; text-decoration: underline; }
.erwin-message-bot { background: #fff2e5; border: 1px solid rgba(242,140,40,.20); border-top-left-radius: 6px; color: var(--erwin-text); }
.erwin-message-user { background: var(--erwin-orange); color: #fff; border-top-right-radius: 6px; }
.erwin-message-user a { color: #fff; }
.erwin-quick-questions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px 54px; }
.erwin-quick-questions button {
  border: 1px solid rgba(242,140,40,.35);
  background: #fff;
  color: var(--erwin-text);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.erwin-quick-questions button:hover { border-color: var(--erwin-orange); background: var(--erwin-orange); color: #fff; }
.erwin-chat-form { display: flex; gap: 12px; padding: 16px 20px 18px; border-top: 1px solid rgba(0,0,0,.08); background: #fff; }
.erwin-chat-form input { flex: 1; min-width: 0; border: 1px solid rgba(0,0,0,.18); border-radius: 14px; padding: 13px 15px; font-size: 16px; outline: none; }
.erwin-chat-form input:focus { border-color: var(--erwin-orange); box-shadow: 0 0 0 3px rgba(242,140,40,.20); }
.erwin-chat-form button { border: 0; border-radius: 14px; padding: 0 22px; background: var(--erwin-orange); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.erwin-chat-form button:hover { background: var(--erwin-orange-dark); }
.erwin-chat-privacy { padding: 12px 20px; text-align: center; font-size: 14px; color: var(--erwin-muted); background: #fff7ef; border-top: 1px solid rgba(242,140,40,.16); }
.erwin-chat-privacy a { color: var(--erwin-orange-dark); text-decoration: underline; }
@media (max-width: 640px) {
  .erwin-chat { right: 12px; bottom: 12px; }
  .erwin-chat-window { width: calc(100vw - 24px); border-radius: 18px; }
  .erwin-chat-header strong { font-size: 22px; }
  .erwin-avatar-large { width: 58px; height: 58px; }
  .erwin-message { max-width: 86%; }
  .erwin-quick-questions { margin-left: 0; }
  .erwin-chat-form { flex-direction: column; }
  .erwin-chat-form button { min-height: 46px; }
}

.erwin-privacy-notice {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(255,255,255,.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.erwin-privacy-notice[hidden] { display: none !important; }
.erwin-privacy-box {
  max-width: 520px;
  background: #fff;
  border: 1px solid rgba(242,140,40,.35);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  text-align: left;
}
.erwin-privacy-box strong {
  display: block;
  color: var(--erwin-orange-dark);
  font-size: 20px;
  margin-bottom: 8px;
}
.erwin-privacy-box p {
  margin: 0 0 16px;
  line-height: 1.45;
}
.erwin-privacy-box button {
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  background: var(--erwin-orange);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.erwin-privacy-box button:hover { background: var(--erwin-orange-dark); }


/* ==================================================
   Version 1.83 Rev1
   Erwin Sprachausgabe
   ================================================== */
.erwin-speech-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 20px;
  background: #fff;
  border-bottom: 1px solid rgba(242,140,40,.16);
}
.erwin-speech-toggle,
.erwin-speech-stop {
  border: 1px solid rgba(242,140,40,.35);
  background: #fff7ef;
  color: var(--erwin-orange-dark);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.erwin-speech-toggle.is-active {
  background: var(--erwin-orange);
  color: #fff;
  border-color: var(--erwin-orange);
}
.erwin-speech-stop {
  background: #ffffff;
}
.erwin-speech-toggle:hover,
.erwin-speech-stop:hover {
  border-color: var(--erwin-orange);
}

.erwin-voice-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6b4a2d;
}
.erwin-voice-select {
  border: 1px solid rgba(242,140,40,.35);
  background: #fff7ef;
  color: var(--erwin-orange-dark);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  max-width: 165px;
}
.erwin-voice-select:focus {
  outline: none;
  border-color: var(--erwin-orange);
  box-shadow: 0 0 0 3px rgba(242,140,40,.18);
}
@media (max-width: 640px) {
  .erwin-speech-control {
    padding: 7px 12px;
    justify-content: flex-start;
    gap: 6px;
  }
  .erwin-speech-toggle,
  .erwin-speech-stop {
    padding: 7px 10px;
    font-size: 12px;
  }
  .erwin-voice-label {
    width: 100%;
    justify-content: space-between;
  }
  .erwin-voice-select {
    max-width: 175px;
    flex: 1;
  }
}

/* ==================================================
   Version 1.80 R8
   Erwin Mobile-Feinschliff: kompakteres Fenster
   ================================================== */
.erwin-chat-window {
  width: min(520px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 32px));
}
.erwin-chat-messages {
  flex: 1 1 auto;
  min-height: 240px;
  max-height: none;
}

@media (max-width: 640px) {
  .erwin-chat {
    right: 10px;
    bottom: 10px;
  }

  .erwin-chat-toggle {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }

  .erwin-chat-window {
    width: 92vw;
    height: 75vh;
    max-height: 75vh;
    right: 0;
    bottom: 0;
    border-radius: 16px;
  }

  .erwin-chat-header {
    padding: 11px 12px 10px;
    gap: 8px;
    border-bottom-width: 4px;
  }

  .erwin-chat-header-main {
    gap: 10px;
  }

  .erwin-chat-header strong {
    font-size: 20px;
  }

  .erwin-chat-header span {
    font-size: 13px;
    margin-top: 2px;
  }

  .erwin-chat-header small {
    display: none;
  }

  .erwin-chat-header button {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 24px;
  }

  .erwin-avatar-large {
    width: 46px;
    height: 46px;
  }

  .erwin-avatar-small {
    width: 32px;
    height: 32px;
  }

  .erwin-chat-messages {
    padding: 12px 12px 6px;
    min-height: 0;
  }

  .erwin-message-row {
    gap: 8px;
    margin-bottom: 10px;
  }

  .erwin-message {
    max-width: 82%;
    padding: 9px 11px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.35;
  }

  .erwin-quick-questions {
    gap: 7px;
    margin: 8px 0 2px 40px;
  }

  .erwin-quick-questions button {
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .erwin-chat-form {
    flex-direction: row;
    gap: 8px;
    padding: 10px 12px;
  }

  .erwin-chat-form input {
    border-radius: 12px;
    padding: 9px 11px;
    font-size: 14px;
  }

  .erwin-chat-form button {
    min-height: 40px;
    border-radius: 12px;
    padding: 0 13px;
    font-size: 14px;
  }

  .erwin-chat-privacy {
    padding: 8px 12px;
    font-size: 12px;
  }

  .erwin-privacy-notice {
    padding: 12px;
  }

  .erwin-privacy-box {
    padding: 16px;
    border-radius: 14px;
  }

  .erwin-privacy-box strong {
    font-size: 17px;
  }

  .erwin-privacy-box p {
    font-size: 14px;
  }
}

/* ==================================================
   Erwin hört zu - Mikrofonbutton
   ================================================== */
.erwin-mic-button {
    border: 1px solid rgba(242,140,40,.35);
    background: rgba(242,140,40,.12);
    color: #d97718;
    border-radius: .75rem;
    padding: .72rem .85rem;
    font-weight: 700;
}
.erwin-mic-button:hover,
.erwin-mic-button.is-listening {
    background: #f28c28;
    color: #fff;
}
.erwin-mic-button.is-listening {
    animation: erwinMicPulse 1s infinite;
}
@keyframes erwinMicPulse {
    0% { box-shadow: 0 0 0 0 rgba(242,140,40,.35); }
    70% { box-shadow: 0 0 0 .45rem rgba(242,140,40,0); }
    100% { box-shadow: 0 0 0 0 rgba(242,140,40,0); }
}
@media (max-width: 575.98px) {
    .erwin-mic-button {
        padding: .62rem .7rem;
    }
}

/* ==================================================
   Version 1.84 Rev5
   Erwin Sprachfeinschliff
   ================================================== */
.erwin-mic-button.is-disabled,
.erwin-mic-button:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.35);
}
.erwin-message-status {
    font-size: .9rem;
    opacity: .92;
}
.erwin-message-status-error {
    background: #fff0f0 !important;
    border-color: rgba(220,53,69,.25) !important;
    color: #842029 !important;
}

/* ==================================================
   Version 1.84 Rev5
   Erwin Begrüßungsblase und Feinschliff
   ================================================== */
.erwin-intro-bubble {
  position: absolute;
  right: 0;
  bottom: 78px;
  width: 275px;
  background: #ffffff;
  border: 1px solid rgba(242,140,40,.38);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
  padding: 13px 15px;
  color: var(--erwin-text);
  line-height: 1.35;
}
.erwin-intro-bubble[hidden] { display: none !important; }
.erwin-intro-bubble strong {
  display: block;
  color: var(--erwin-orange-dark);
  margin-bottom: 4px;
  font-size: 15px;
}
.erwin-intro-bubble span {
  display: block;
  font-size: 14px;
}
.erwin-intro-bubble::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border-right: 1px solid rgba(242,140,40,.38);
  border-bottom: 1px solid rgba(242,140,40,.38);
  transform: rotate(45deg);
}
.erwin-chat.has-intro .erwin-chat-toggle {
  animation: erwinHelloPulse 1.6s ease-in-out 0s 3;
}
@keyframes erwinHelloPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@media (max-width: 640px) {
  .erwin-intro-bubble {
    right: 0;
    bottom: 68px;
    width: min(280px, calc(100vw - 28px));
    padding: 12px 13px;
  }
}