/* WhatsApp pro Kunde (app/whatsapp.js): Chat-Bereich wie WhatsApp Web im Panel und im Kundenportal */
:root { --wa-gruen: #25d366; --wa-aus: #d9fdd3; --wa-blau: #53bdeb; --wa-hinter: #efeae2; }
.wa-kopf { margin-bottom: 22px; }
.wa-kopf .sub { font-size: 16px; }
.wa { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); height: calc(100vh - 250px); height: calc(100dvh - 250px); min-height: 520px;
  background: var(--surface); border-radius: 24px; box-shadow: var(--schatten); overflow: hidden; }
.wa.wa-einzeln { display: block; height: auto; min-height: 0; background: none; box-shadow: none; overflow: visible; }
.wa > .loading { padding: 24px; }

/* Linke Spalte: Suche, Kunden (aufklappbar) mit ihren Chats */
.wa-seite { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-height: 0; }
.wa-suche { padding: 14px; border-bottom: 1px solid var(--line); }
.wa-suche input { width: 100%; height: 42px; border-radius: 12px; background: var(--bg); border-color: transparent; font-size: 15px; }
.wa-liste { flex: 1; overflow-y: auto; padding: 6px 0 14px; overscroll-behavior: contain; }
.wa-leer { padding: 14px 18px; color: var(--muted); font-size: 14px; }
.wa-leer.mitte { text-align: center; margin: auto; max-width: 420px; }
.wa-nummer-info { padding: 10px 18px 6px; font-size: 13px; color: var(--muted); }
.wa-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--grau); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.wa-avatar.firma { border-radius: 12px; background: var(--gruen-soft); color: var(--gruen-dunkel); }
.wa-avatar.firma.leer { background: var(--bg); color: var(--muted); }
.wa-kunde-kopf, .wa-chat { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; }
.wa-kunde-kopf:hover, .wa-chat:hover { background: var(--bg); }
.wa-kunde-kopf:focus-visible, .wa-chat:focus-visible, .wa-verwalten:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.wa-kunde-kopf.klein { padding: 8px 16px; }
.wa-kunde-kopf.aktiv, .wa-kunde.gewaehlt > .wa-kunde-kopf { background: var(--bg); }
.wa-kunde + .wa-kunde { border-top: 1px solid var(--line); }
.wa-auf { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .15s; }
.wa-auf svg, .wa-zurueck svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wa-kunde.offen .wa-auf { transform: rotate(90deg); }
.wa-kunde-chats { padding: 0 0 8px; }
.wa-kunde-chats .wa-chat { padding-left: 26px; }
.wa-chat.aktiv { background: var(--gruen-soft); }
.wa-chat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-chat-text b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.wa-vorschau { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wa-zeit { flex: none; font-size: 12px; color: var(--muted); }
.wa-zeit.neu { color: var(--gruen-dunkel); font-weight: 700; }
.wa-zahl { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--wa-gruen); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.wa-verwalten { all: unset; box-sizing: border-box; cursor: pointer; display: block; margin: 4px 16px 0 26px; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 0; }
.wa-verwalten:hover, .wa-verwalten.aktiv { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.wa-ohne { border-top: 1px solid var(--line); margin-top: 6px; }
.wa-ohne summary { cursor: pointer; padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--muted); list-style: none; }
.wa-ohne summary::-webkit-details-marker { display: none; }
.wa-ohne summary::before { content: "+ "; }
.wa-ohne[open] summary::before { content: "– "; }

/* Rechte Seite: Chat */
.wa-haupt { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--wa-hinter); }
.wa-chat-kopf { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.wa-chat-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wa-chat-titel b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chat-titel span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chat-titel .wa-fenster { color: #8a5a00; }
.wa-chat-titel .wa-fenster.offen { color: var(--gruen-dunkel); }
.wa-bw-link { height: 38px; padding: 0 14px; font-size: 14px; }
.wa-zurueck { all: unset; cursor: pointer; display: none; width: 34px; height: 34px; flex: none; color: var(--text); border-radius: 50%; }
.wa-zurueck:focus-visible { outline: 2px solid var(--text); }
.wa-sim { padding: 8px 18px; background: #fff4d6; color: #8a5a00; font-size: 13px; }
.wa-sim .text-btn { color: #8a5a00; text-decoration: underline; font-size: 13px; }
.wa-verlauf { flex: 1; overflow-y: auto; padding: 18px clamp(14px, 4vw, 56px); display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; }
.wa-tag { align-self: center; margin: 10px 0; }
.wa-tag span { background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 8px; box-shadow: var(--schatten); }
.wa-nachricht { display: flex; }
.wa-nachricht.aus { justify-content: flex-end; }
.wa-blase { position: relative; max-width: min(560px, 78%); background: var(--surface); border-radius: 12px; padding: 7px 10px 6px; box-shadow: 0 1px 1px rgba(0,0,0,.06); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.wa-nachricht.ein .wa-blase { border-top-left-radius: 4px; }
.wa-nachricht.aus .wa-blase { background: var(--wa-aus); border-top-right-radius: 4px; }
.wa-nachricht.kunde .wa-blase { background: #e7f0ff; }
.wa-nachricht.automatik .wa-blase { background: #f1f7ec; }
.wa-wer { display: block; font-size: 12px; font-weight: 700; color: var(--gruen-dunkel); margin-bottom: 2px; }
.wa-nachricht.kunde .wa-wer { color: #2457a6; }
.wa-text a { color: #1a73c9; }
.wa-meta { float: right; display: inline-flex; align-items: center; gap: 4px; margin: 6px 0 -2px 12px; font-size: 11px; color: var(--muted); }
.wa-haken { display: inline-flex; width: 17px; height: 12px; color: var(--muted); }
.wa-haken svg { width: 100%; height: 100%; }
.wa-haken.gelesen { color: var(--wa-blau); }
.wa-haken.fehler { width: 14px; height: 14px; border-radius: 50%; background: var(--error); color: #fff; font-size: 10px; font-weight: 800; justify-content: center; align-items: center; }
.wa-fehler { display: block; clear: both; font-size: 12px; color: var(--error); padding-top: 2px; }
.wa-bild { display: block; margin: 0 -4px 4px; }
.wa-bild img { display: block; max-width: 100%; max-height: 320px; border-radius: 8px; }
.wa-datei { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.04); border-radius: 8px; padding: 10px 12px; margin-bottom: 4px; text-decoration: none; }
.wa-datei svg { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--error); stroke-width: 1.8; stroke-linejoin: round; }
.wa-datei span { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: var(--muted); }
.wa-datei b { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Eingabe */
.wa-eingabe { background: var(--surface); border-top: 1px solid var(--line); padding: 10px 14px; }
.wa-eingabe .msg:empty { display: none; }
.wa-eingabe .msg { margin: 0 0 8px; }
.wa-zeile-eingabe { display: flex; align-items: flex-end; gap: 8px; }
.wa-zeile-eingabe textarea { flex: 1; min-height: 44px; max-height: 160px; resize: none; border-radius: 22px; padding: 10px 16px; font-size: 15px; background: var(--bg); border-color: transparent; }
.wa-knopf { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 12px; margin: 0; border-radius: 22px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer; flex-direction: row; }
.wa-knopf svg, .wa-senden svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wa-knopf.an { background: var(--text); color: #fff; }
.wa-knopf.aus { opacity: .4; cursor: not-allowed; }
.wa-knopf:focus-within { outline: 2px solid var(--text); }
.wa-senden { flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 50%; background: var(--wa-gruen); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wa-senden:disabled { opacity: .5; }
.wa-nur-vorlage { flex: 1; height: 44px; margin: 0; border-radius: 22px; font-size: 15px; }
.wa-hinweis { font-size: 14px; color: var(--muted); text-align: center; padding: 6px; }
.wa-vorlagen { max-height: 300px; overflow-y: auto; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.wa-vorlagen-kopf { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.wa-vorlage { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.wa-vorlage:first-of-type { border-top: 0; }
.wa-vorlage p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.wa-vorlage .btn-small { height: 38px; padding: 0 14px; font-size: 13px; }
.wa-vorlagen .text-btn { display: inline-block; margin-top: 8px; font-size: 13px; }

/* Mitte: Willkommen, Buchen, Nummer verwalten */
.wa-willkommen { margin: auto; max-width: 460px; text-align: center; padding: 32px 24px; }
.wa-willkommen h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.035em; margin-top: 14px; }
.wa-willkommen .msg { margin-top: 12px; }
.wa-symbol { display: inline-flex; width: 56px; height: 56px; border-radius: 50%; background: var(--wa-gruen); color: #fff; align-items: center; justify-content: center; }
.wa-symbol svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-mitte { flex: 1; overflow-y: auto; padding: 24px; background: var(--bg); }
.wa-mitte .panel-card { margin: 0 auto; max-width: 640px; }
.wa-karte h2 { margin-top: 12px; }
.wa-karte .sub { margin-top: 8px; }
.wa-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wa-karte-kopf h2 { margin-top: 0; }
.wa-liste-punkte { margin: 16px 0 6px; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.wa-buchen { display: grid; gap: 14px; margin: 18px 0 12px; }
.wa-buchen .btn-gross { justify-self: start; }
.wa-buchen .msg:empty { display: none; }
.wa-werte { margin-top: 16px; }
.wa-schalter-zeile { flex-direction: row; align-items: flex-start; gap: 14px; margin-top: 20px; font-weight: 400; cursor: pointer; }
.wa-schalter-zeile > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.wa-aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; }
.wa-aktionen .msg { margin: 0; }
.wa-karte .hinweis { margin-top: 16px; }

/* Avatare mit fester Farbe je Name (wie WhatsApp Web) */
.wa-avatar.farbig { background: hsl(var(--av) 55% 90%); color: hsl(var(--av) 45% 30%); }
.wa-vorschau.warn, .wa-nummer-info.warn { color: #8a5a00; }
.wa-nummer-info.warn { background: #fff4d6; margin: 6px 12px; border-radius: 12px; padding: 10px 12px; }
.wa-nummer-info .text-btn { font-size: 13px; color: inherit; text-decoration: underline; }
.wa-vorlage.gesperrt p { opacity: .7; }

/* Verwalten: Status, WhatsApp-Profil, Vorlagen je Nummer */
.wa-abschnitt { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; display: grid; gap: 10px; }
.wa-abschnitt h3 { font-size: 17px; font-weight: 800; }
.wa-abschnitt .sub { margin-top: 0; }
.wa-abschnitt .msg:empty { display: none; }
.wa-abschnitt > .btn-small, .wa-abschnitt > .text-btn { justify-self: start; }
.wa-profil { display: grid; gap: 12px; }
.wa-profil .btn-small { justify-self: start; }
.wa-profilbild { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wa-profilbild-rund { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); }
.wa-profilbild-rund img { width: 100%; height: 100%; object-fit: contain; }
.wa-profilbild-rund svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.wa-profilbild label { margin: 0; cursor: pointer; }
.wa-vorlagen-stand { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wa-vorlagen-stand li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; }

/* Mindestlaufzeit: klein und grau unter dem Preis */
.wa-mindest { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.wa-buchen .wa-mindest { margin-top: -8px; }
.wa-buchen-einst { display: grid; gap: 12px; }
.wa-buchen-einst .wa-preis { max-width: 320px; }
.wa-buchen-form { display: grid; grid-template-columns: minmax(0, 320px) auto; gap: 10px; align-items: end; }
.wa-buchen-form label { margin: 0; }
.wa-buchen-einst .msg:empty { display: none; }
.wa-einst-rechts, .wa-einst-liste .wa-einst-rechts { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; flex: none; }
@media (max-width: 560px) { .wa-buchen-form { grid-template-columns: 1fr; } .wa-einst-liste li { flex-wrap: wrap; } }

/* Rechte des Kunden im Kundenportal */
.wa-rechte { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.wa-rechte legend { font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.wa-rechte label { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin: 0; }
.wa-rechte label:has(input:checked) { border-color: var(--text); }
.wa-rechte input { margin-top: 3px; flex: none; width: auto; }
.wa-rechte label > span { display: flex; flex-direction: column; gap: 2px; }
.wa-einrichtung { margin-top: 16px; }

/* Einstellungen: Konten und Vorlagen */
.wa-einst-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.wa-einst-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.wa-einst-liste li > span { display: flex; flex-direction: column; min-width: 0; }
.wa-vorlagen-liste { margin-top: 10px; }
.wa-vorlage-neu { margin-top: 14px; }
.wa-vorlage-neu summary { list-style: none; cursor: pointer; }
.wa-vorlage-neu summary::-webkit-details-marker { display: none; }
.wa-vorlage-neu form { display: grid; gap: 12px; margin-top: 14px; max-width: 560px; }
.wa-vorlage-neu .btn-small { justify-self: start; }

/* WhatsApp-Knopf beim Bewerber */
.bw-wa { display: inline-flex; align-items: center; gap: 6px; }
.bw-wa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Handy: eine Ansicht nach der anderen – Liste, dann der Chat bildschirmfüllend mit Zurück-Knopf */
@media (max-width: 720px) {
  .wa { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; border-radius: 20px; }
  .wa.offen .wa-seite { display: none; }
  .wa:not(.offen) .wa-haupt { display: none; }
  .wa-seite { border-right: 0; }
  .wa-liste { max-height: none; overflow: visible; }
  .wa-zurueck { display: inline-flex; }
  .wa.offen .wa-haupt { position: fixed; inset: 0 0 calc(68px + env(safe-area-inset-bottom)) 0; z-index: 30; }
  body.wa-portal .wa.offen .wa-haupt { bottom: 0; }
  .wa-chat-kopf { padding: 10px 12px; gap: 8px; }
  .wa-chat-kopf .wa-avatar { width: 36px; height: 36px; font-size: 14px; }
  .wa-bw-link { height: 34px; padding: 0 10px; font-size: 13px; }
  .wa-blase { max-width: 88%; }
  .wa-knopf .lang { display: none; }
  .wa-mitte { padding: 12px; }
  .wa-mitte .wa-zurueck { display: inline-flex; margin-bottom: 8px; }
  .wa-mitte .panel-card { padding: 22px; }
  .wa-vorlage { flex-direction: column; align-items: stretch; }
  .wa-buchen .btn-gross { justify-self: stretch; }
}
@media (max-width: 420px) { .wa-bw-link { display: none; } }
/* Vorschau einer automatischen WhatsApp im Regel-Editor */
.kb-handy.wa-vs { background: var(--wa-hinter); border-width: 0; border-radius: 16px; }
.kb-handy.wa-vs .kb-blase { background: var(--surface); }