/* Chat-Assistent der öffentlichen Website (resources/views/landing/_chat.blade.php).
   Eigene Klassen statt Tailwind: das CSS wird beim Deploy nicht gebaut. */
.wc { --wc-blau: #1B6CA8; --wc-dunkel: #062058; --wc-rand: #e2e8f0; --wc-text: #1e293b; --wc-grau: #64748b;
      font-family: inherit; color: var(--wc-text); }
.wc *, .wc *::before, .wc *::after { box-sizing: border-box; }
.wc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wc-knopf { position: fixed; right: 20px; bottom: 20px; z-index: 9990; display: flex; align-items: center; gap: 8px;
            padding: 12px 18px; border: 0; border-radius: 999px; background: var(--wc-blau); color: #fff;
            font: 600 0.95rem/1 inherit; cursor: pointer; box-shadow: 0 8px 24px rgba(6, 32, 88, .28); }
.wc-knopf:hover { background: var(--wc-dunkel); }
.wc-knopf:focus-visible, .wc button:focus-visible, .wc textarea:focus-visible, .wc a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.wc.offen .wc-knopf { display: none; }

.wc-panel { position: fixed; right: 20px; bottom: 20px; z-index: 9991; width: 380px; max-width: calc(100vw - 32px);
            height: 580px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: #fff;
            border: 1px solid var(--wc-rand); border-radius: 16px; box-shadow: 0 20px 50px rgba(6, 32, 88, .25); overflow: hidden; }
.wc-panel[hidden] { display: none; }

.wc-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px;
           background: linear-gradient(135deg, var(--wc-dunkel) 0%, var(--wc-blau) 100%); color: #fff; }
.wc-titel { margin: 0; font-weight: 700; font-size: 1rem; }
.wc-untertitel { margin: 2px 0 0; font-size: 0.78rem; opacity: .85; }
.wc-kopf-knoepfe { display: flex; gap: 4px; }
.wc-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px;
           background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.wc-icon:hover { background: rgba(255, 255, 255, .24); }

.wc-verlauf { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f8fafc; }
.wc-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 0.9rem; line-height: 1.45; overflow-wrap: anywhere; }
.wc-msg p { margin: 0 0 6px; }
.wc-msg p:last-child, .wc-msg ul:last-child { margin-bottom: 0; }
.wc-msg ul { margin: 0 0 6px; padding-left: 18px; }
.wc-msg a { color: inherit; text-decoration: underline; }
.wc-bot { align-self: flex-start; background: #fff; border: 1px solid var(--wc-rand); border-bottom-left-radius: 4px; }
.wc-ich { align-self: flex-end; background: var(--wc-blau); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.wc-fehler { border-color: #fca5a5; background: #fef2f2; }

.wc-tippt { display: inline-flex; gap: 4px; padding: 14px 16px; }
.wc-tippt span { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; animation: wc-punkt 1.2s infinite ease-in-out; }
.wc-tippt span:nth-child(2) { animation-delay: .15s; }
.wc-tippt span:nth-child(3) { animation-delay: .3s; }
@keyframes wc-punkt { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .wc-tippt span { animation: none; } }

.wc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; background: #f8fafc; }
.wc-chips[hidden] { display: none; }
.wc-chip { padding: 6px 11px; border: 1px solid #bfd3e6; border-radius: 999px; background: #fff; color: var(--wc-blau);
           font: 500 0.8rem/1.2 inherit; cursor: pointer; }
.wc-chip:hover { background: #eef5fb; }

.wc-weiter { margin: 0; padding: 9px 16px; border: 0; border-top: 1px solid var(--wc-rand); background: #eef5fb;
             color: var(--wc-blau); font: 600 0.82rem/1.2 inherit; text-align: left; cursor: pointer; }
.wc-weiter[hidden] { display: none; }
.wc-weiter:hover { background: #e0edf8; }

.wc-eingabe { display: flex; align-items: flex-end; gap: 8px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--wc-rand); background: #fff; }
.wc-eingabe textarea { flex: 1; min-height: 40px; max-height: 120px; padding: 9px 12px; border: 1px solid #94a3b8; border-radius: 10px;
                       font: 0.9rem/1.35 inherit; color: var(--wc-text); resize: none; }
.wc-senden { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px;
             background: var(--wc-blau); color: #fff; cursor: pointer; flex-shrink: 0; }
.wc-senden:disabled { background: #94a3b8; cursor: default; }
.wc-hinweis { margin: 0; padding: 0 12px 10px; font-size: 0.7rem; line-height: 1.35; color: var(--wc-grau); background: #fff; }
.wc-hinweis a { color: var(--wc-grau); }

@media (max-width: 480px) {
    .wc-knopf { right: 16px; bottom: 16px; }
    .wc-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 88vh; max-height: 88vh; border-radius: 16px 16px 0 0; }
    .wc-eingabe textarea { font-size: 16px; } /* verhindert Zoom auf iOS */
}