/* Regina Wok – sprechender Avatar-Chat */
#rw-knopf { position: fixed; right: 20px; bottom: 20px; height: 72px; padding: 0 18px 0 0; border-radius: 999px;
  background: #ED1C24; color: #fff; border: 3px solid #003D45; box-shadow: 4px 4px 0 #003D45;
  display: flex; align-items: center; gap: 10px; cursor: pointer; z-index: 9999; font-family: "Poppins", system-ui, sans-serif; }
#rw-knopf:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #003D45; }
.rw-avatar-mini { width: 66px; height: 66px; border-radius: 50%; border: 3px solid #fff; display: block; }
.rw-knopf-text { font-weight: 800; font-style: italic; font-size: 16px; white-space: nowrap; }
@media (max-width: 480px) { .rw-knopf-text { display: none; } #rw-knopf { padding: 0; } }

#rw-fenster { position: fixed; right: 20px; bottom: 104px; width: min(390px, calc(100vw - 32px)); height: min(640px, calc(100vh - 128px));
  background: #fff; border: 3px solid #003D45; border-radius: 18px; box-shadow: 6px 6px 0 #003D45;
  display: none; flex-direction: column; overflow: hidden; z-index: 9999; font-family: "Poppins", system-ui, sans-serif; color: #003D45; }
#rw-fenster.offen { display: flex; }
.rw-kopf { background: #ED1C24; color: #fff; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; }
.rw-kopf b { font-style: italic; font-weight: 800; font-size: 18px; }
.rw-kopf b span { color: #FFDD00; }
.rw-kopf small { display: block; font-size: 12px; opacity: .9; }
.rw-kopf-knoepfe button { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; padding: 2px 4px; }

.rw-buehne { background: #FFF4E2; display: flex; flex-direction: column; align-items: center; padding: 12px 10px 8px; border-bottom: 2px solid #00707C; }
.rw-avatar { width: 168px; height: 168px; border-radius: 50%; border: 4px solid #003D45; box-shadow: 4px 4px 0 #00707C; background: #FFD694; }
.rw-avatar .rw-haupt { animation: rw-wippen 4s ease-in-out infinite; transform-origin: 100px 140px; }
#rw-fenster[data-zustand="spricht"] .rw-avatar .rw-haupt { animation: rw-sprechen 1.1s ease-in-out infinite; }
#rw-fenster[data-zustand="hoert"] .rw-avatar { box-shadow: 0 0 0 6px #FFDD00, 4px 4px 0 6px #00707C; }
#rw-fenster[data-zustand="denkt"] .rw-avatar .rw-haupt { animation: rw-denken 1.6s ease-in-out infinite; }
#rw-mund { transition: d 70ms linear; }
.rw-lider { transform-origin: 100px 85px; transition: transform 70ms; }
.rw-lider.zu { transform: scaleY(.1); }
@keyframes rw-wippen { 0%,100% { transform: rotate(0) } 50% { transform: rotate(1.5deg) translateY(1px) } }
@keyframes rw-sprechen { 0%,100% { transform: rotate(-1.2deg) } 50% { transform: rotate(1.4deg) translateY(-1px) } }
@keyframes rw-denken { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(-2deg) translateY(-1px) } }
@media (prefers-reduced-motion: reduce) { .rw-avatar .rw-haupt { animation: none !important; } }
.rw-status { margin-top: 8px; font-size: 13px; font-weight: 500; min-height: 20px; text-align: center; }
#rw-fenster[data-zustand="hoert"] .rw-status { color: #ED1C24; font-weight: 800; }

#rw-verlauf { flex: 1; overflow-y: auto; padding: 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.rw-msg { max-width: 88%; padding: 8px 12px; border-radius: 14px; line-height: 1.4; font-size: 14px; white-space: pre-wrap; word-wrap: break-word; }
.rw-bot { background: #FFF4E2; border: 2px solid #00707C; align-self: flex-start; border-bottom-left-radius: 4px; }
.rw-gast { background: #00707C; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.rw-fehler { background: #ffe1e1; border: 2px solid #ED1C24; align-self: flex-start; }
.rw-tippen { opacity: .7; font-style: italic; }
.rw-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; background: #fff; }
.rw-vorschlaege button { border: 2px solid #00707C; background: #fff; color: #003D45; border-radius: 999px; padding: 5px 10px; font-size: 13px; cursor: pointer; font-family: inherit; }

#rw-form { display: flex; gap: 8px; padding: 10px; border-top: 2px solid #00707C; background: #fff; align-items: center; }
#rw-mikro { width: 52px; height: 52px; flex: none; border-radius: 50%; background: #ED1C24; border: 3px solid #003D45; box-shadow: 3px 3px 0 #003D45; font-size: 22px; cursor: pointer; }
#rw-mikro.aktiv { background: #FFDD00; animation: rw-puls 1s ease-in-out infinite; }
#rw-mikro:disabled { opacity: .4; cursor: not-allowed; }
@keyframes rw-puls { 0%,100% { box-shadow: 0 0 0 0 rgba(237,28,36,.5), 3px 3px 0 #003D45 } 50% { box-shadow: 0 0 0 10px rgba(237,28,36,0), 3px 3px 0 #003D45 } }
#rw-eingabe { flex: 1; border: 2px solid #00707C; border-radius: 12px; padding: 10px 12px; font-size: 16px; font-family: inherit; color: #003D45; min-width: 0; }
#rw-senden { width: 44px; height: 44px; flex: none; background: #FFDD00; color: #003D45; border: 2px solid #003D45; border-radius: 12px; font-weight: 800; cursor: pointer; font-size: 18px; }
#rw-senden:disabled { opacity: .5; cursor: default; }
.rw-datenschutz { font-size: 11px; padding: 0 12px 8px; background: #fff; opacity: .7; }

/* Bestellung → WhatsApp */
.rw-bestellung { align-self: stretch; border: 3px solid #003D45; border-radius: 14px; background: #FFF4E2; padding: 10px; box-shadow: 3px 3px 0 #00707C; }
.rw-bestellung-kopf { font-weight: 800; font-style: italic; margin-bottom: 6px; }
.rw-bestellung pre { font-family: inherit; font-size: 12.5px; white-space: pre-wrap; margin: 0 0 10px; background: #fff; border-radius: 8px; padding: 8px; border: 1px solid #c9dfe2; max-height: 160px; overflow: auto; }
.rw-whatsapp { display: flex; align-items: center; justify-content: center; gap: 8px; background: #25D366; color: #073B1E; text-decoration: none;
  font-weight: 800; font-size: 16px; padding: 12px; border-radius: 12px; border: 3px solid #003D45; box-shadow: 3px 3px 0 #003D45; }
.rw-whatsapp:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #003D45; }
.rw-bestellung small { display: block; margin-top: 6px; font-size: 11.5px; opacity: .8; }

/* Kompakt: niedrige Fenster und Handys */
#rw-verlauf { min-height: 110px; }
@media (max-height: 900px) {
  .rw-buehne { flex-direction: row; justify-content: center; gap: 14px; padding: 8px 12px; }
  .rw-avatar { width: 96px; height: 96px; }
  .rw-status { margin: 0; text-align: left; max-width: 200px; }
}
@media (max-width: 560px) {
  #rw-fenster { inset: 0; right: 0; bottom: 0; width: 100%; height: 100vh; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; }
  html.rw-offen, html.rw-offen body { overflow: hidden; }
  html.rw-offen #rw-knopf { display: none; }
  .rw-buehne { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 8px 12px; }
  .rw-avatar { width: 84px; height: 84px; border-width: 3px; }
  .rw-status { margin: 0; text-align: left; font-size: 14px; }
  .rw-vorschlaege { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .rw-vorschlaege button { white-space: nowrap; flex: none; }
  #rw-form { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* Live-Status der Bestellung */
.rw-status { font-weight: 700; font-size: 13.5px; background: #fff; border: 2px solid #003D45; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.rw-status a { color: inherit; }
.rw-status-neu { background: #FFF3C4; }
.rw-status-angenommen, .rw-status-in_zubereitung, .rw-status-unterwegs, .rw-status-fertig { background: #DFF5E3; border-color: #1E7B3A; }
.rw-status-abgelehnt { background: #FDE2E2; border-color: #B71C1C; }
.rw-whatsapp-klein { display: inline-block; font-size: 12px; color: #00707C; }
.rw-statuslink-chat { display: block; text-align: center; font-weight: 800; font-size: 13.5px; color: #003D45; background: #FFDD00; border: 2px solid #003D45; border-radius: 10px; padding: 8px; margin-bottom: 6px; text-decoration: none; }
