/* =====================================================================
   Chat-Widget · Bestattungen Pastor & Gritsch  
======= */

#pg-chat-widget {
  --pg-accent:      #A01F3A;   /* Bordeaux (Header/Buttons) */
  --pg-accent-rgb:  160,31,58; /* Bordeaux als RGB (für Puls-Effekt) */
  --pg-accent-dark: #7f1830;   /* Hover */
  --pg-ink:         #393741;   /* Dunkler Text */
  --pg-cream:       #F3F0EB;   /* Warmes Creme (Hintergrund) */
  --pg-stone:       #C6BFB4;   /* Taupe (Rahmen/Details) */
  --pg-online:      #4BA96A;   /* Online-Punkt */
  --pg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#pg-chat-widget, #pg-chat-widget *, #pg-chat-widget *::before, #pg-chat-widget *::after { box-sizing: border-box; }
#pg-chat-widget [hidden] { display: none !important; }
#pg-chat-widget button, #pg-chat-widget textarea { font-family: var(--pg-font); margin: 0; }
#pg-chat-widget img { display: block; max-width: none; }

/* Positionierung */
#pg-chat-widget .pg-launcher,
#pg-chat-widget .pg-panel { position: fixed; bottom: 22px; z-index: 2147483000; font-family: var(--pg-font); }
#pg-chat-widget[data-side="right"] .pg-launcher,
#pg-chat-widget[data-side="right"] .pg-panel { right: 22px; }
#pg-chat-widget[data-side="left"] .pg-launcher,
#pg-chat-widget[data-side="left"] .pg-panel { left: 22px; }

/* ---- Launcher mit Avatar ---- */
#pg-chat-widget .pg-launcher {
  display: inline-flex; align-items: center; gap: 12px; height: 62px; padding: 5px 22px 5px 5px;
  border: none; border-radius: 999px; cursor: pointer; background: var(--pg-accent); color: #fff;
  box-shadow: 0 8px 24px rgba(57,55,65,.28);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
#pg-chat-widget[data-side="left"] .pg-launcher { padding: 5px 5px 5px 22px; flex-direction: row-reverse; }
#pg-chat-widget .pg-launcher:hover { background: var(--pg-accent-dark); box-shadow: 0 12px 30px rgba(57,55,65,.34); }
#pg-chat-widget .pg-launcher:focus-visible { outline: 3px solid var(--pg-stone); outline-offset: 2px; }
#pg-chat-widget .pg-launcher-text { font-size: 15px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
#pg-chat-widget .pg-launcher.pg-hide { opacity: 0; pointer-events: none; transform: scale(.9); animation: none; }

/* Aufmerksamkeits-Effekt: dezenter Hüpfer alle paar Sekunden */
#pg-chat-widget .pg-launcher { animation: pg-hop 3.6s ease-in-out 1.2s infinite; }
@keyframes pg-hop {
  0%, 70%, 100% { transform: translateY(0); }
  78% { transform: translateY(-12px); }
  86% { transform: translateY(0); }
  92% { transform: translateY(-6px); }
  98% { transform: translateY(0); }
}

/* Avatar (rundes Foto) */
#pg-chat-widget .pg-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
#pg-chat-widget .pg-avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.55); background: #fff;
}
#pg-chat-widget .pg-badge {
  position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--pg-online); border: 2px solid var(--pg-accent);
}

/* ---- Chat-Panel ---- */
#pg-chat-widget .pg-panel {
  display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 44px); background: var(--pg-cream);
  border: 1px solid rgba(57,55,65,.12); border-radius: 4px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(57,55,65,.32); opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .22s ease, transform .22s ease; transform-origin: bottom right;
}
#pg-chat-widget[data-side="left"] .pg-panel { transform-origin: bottom left; }
#pg-chat-widget .pg-panel.pg-open { opacity: 1; transform: translateY(0) scale(1); }

/* ---- Header mit Avatar ---- */
#pg-chat-widget .pg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--pg-accent); color: #fff; padding: 14px 14px 14px 16px;
}
#pg-chat-widget .pg-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
#pg-chat-widget .pg-head-avwrap { position: relative; display: inline-flex; flex: 0 0 auto; }
#pg-chat-widget .pg-head-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.5); background: #fff; }
#pg-chat-widget .pg-head-avwrap .pg-badge { width: 11px; height: 11px; right: 0; bottom: 1px; }
#pg-chat-widget .pg-title { font-family: Georgia, "Times New Roman", serif; font-size: 16.5px; font-weight: 400; letter-spacing: .01em; color: #fff; }
#pg-chat-widget .pg-sub { font-size: 12px; opacity: .85; margin-top: 2px; }
#pg-chat-widget .pg-close {
  background: transparent; border: none; color: #fff; cursor: pointer; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease;
}
#pg-chat-widget .pg-close:hover { background: rgba(255,255,255,.16); }
#pg-chat-widget .pg-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ---- Verlauf ---- */
#pg-chat-widget .pg-log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; scroll-behavior: smooth; }
#pg-chat-widget .pg-log::-webkit-scrollbar { width: 8px; }
#pg-chat-widget .pg-log::-webkit-scrollbar-thumb { background: rgba(57,55,65,.22); border-radius: 8px; }
#pg-chat-widget .pg-msg { display: flex; margin-bottom: 12px; }
#pg-chat-widget .pg-bot { align-items: flex-end; gap: 8px; }
#pg-chat-widget .pg-user { justify-content: flex-end; }
#pg-chat-widget .pg-msg-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(57,55,65,.12); background: #fff; }
#pg-chat-widget .pg-bubble {
  max-width: 82%; padding: 11px 14px; font-size: 14.5px; line-height: 1.5; border-radius: 14px;
  word-wrap: break-word; overflow-wrap: anywhere;
}
#pg-chat-widget .pg-bot .pg-bubble { background: #fff; color: var(--pg-ink); border: 1px solid rgba(57,55,65,.10); border-bottom-left-radius: 4px; }
#pg-chat-widget .pg-user .pg-bubble { background: var(--pg-accent); color: #fff; border-bottom-right-radius: 4px; }
#pg-chat-widget .pg-bubble p { margin: 0 0 8px; }
#pg-chat-widget .pg-bubble p:last-child { margin: 0; }
#pg-chat-widget .pg-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#pg-chat-widget .pg-bot .pg-bubble a { color: var(--pg-accent); }

/* ---- Vorschlagsfragen ---- */
#pg-chat-widget .pg-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 2px 0 14px 38px; }
#pg-chat-widget .pg-chip {
  background: #fff; color: var(--pg-ink); border: 1px solid var(--pg-stone); padding: 9px 13px;
  font-size: 13.5px; line-height: 1.35; text-align: left; border-radius: 999px; cursor: pointer;
  transition: all .15s ease; max-width: 100%;
}
#pg-chat-widget .pg-chip:hover { background: var(--pg-accent); color: #fff; border-color: var(--pg-accent); }
#pg-chat-widget .pg-chip:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 2px; }

/* ---- Tipp-Indikator ---- */
#pg-chat-widget .pg-typing { display: inline-flex; gap: 5px; align-items: center; }
#pg-chat-widget .pg-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--pg-stone); animation: pg-bounce 1.2s infinite ease-in-out; }
#pg-chat-widget .pg-typing span:nth-child(2) { animation-delay: .18s; }
#pg-chat-widget .pg-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes pg-bounce { 0%,80%,100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ---- Eingabe ---- */
#pg-chat-widget .pg-form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; background: var(--pg-cream); border-top: 1px solid rgba(57,55,65,.12); }
#pg-chat-widget .pg-input {
  flex: 1; resize: none; border: 1px solid var(--pg-stone); background: #fff; color: var(--pg-ink);
  font-size: 14.5px; line-height: 1.4; padding: 10px 12px; border-radius: 10px; max-height: 120px; outline: none;
}
#pg-chat-widget .pg-input:focus { border-color: var(--pg-accent); box-shadow: 0 0 0 2px rgba(160,31,58,.12); }
#pg-chat-widget .pg-send {
  flex: 0 0 auto; width: 42px; height: 42px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--pg-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, opacity .15s ease;
}
#pg-chat-widget .pg-send:hover:not(:disabled) { background: var(--pg-accent-dark); }
#pg-chat-widget .pg-send:disabled { opacity: .4; cursor: default; }
#pg-chat-widget .pg-send:focus-visible { outline: 2px solid var(--pg-ink); outline-offset: 2px; }

#pg-chat-widget .pg-foot { text-align: center; font-size: 10.5px; color: rgba(57,55,65,.55); padding: 0 12px 10px; background: var(--pg-cream); }
#pg-chat-widget .pg-foot a { color: var(--pg-accent); text-decoration: none; font-weight: 600; font-size: 10.5px; }
#pg-chat-widget .pg-foot a:hover { text-decoration: underline; font-size: 10.5px; }

/* ---- Mobil: Vollbild ---- */
@media (max-width: 480px) {
  #pg-chat-widget .pg-panel { width: 100vw; height: 100dvh; max-height: 100dvh; right: 0; left: 0; bottom: 0; border-radius: 0; border: none; }
  #pg-chat-widget .pg-launcher { bottom: 75px; }
  #pg-chat-widget[data-side="right"] .pg-launcher { right: 16px; }
  #pg-chat-widget[data-side="left"] .pg-launcher { left: 16px; }
}

/* ---- Reduzierte Bewegung ---- */
@media (prefers-reduced-motion: reduce) {
  #pg-chat-widget .pg-launcher,
  #pg-chat-widget .pg-panel,
  #pg-chat-widget .pg-send,
  #pg-chat-widget .pg-chip,
  #pg-chat-widget .pg-close { transition: none; }
  #pg-chat-widget .pg-typing span,
  #pg-chat-widget .pg-launcher { animation: none; }
}