/* waerme-handel Live-Chat-Widget — Warm-Manufaktur-Reskin (2026-06-27).
   Native zur warmen Palette/Fonts: weich-gerundete Karte statt Bubble, warme Haarlinien,
   Terrakotta-Akzent (--accent), tail-lose Nachrichten, Fraunces/Hanken/IBM-Plex-Mono.
   Alles unter #wh-chat gescoped. whc-* Klassen erzeugt chat-widget.js — NICHT umbenennen.
   Token-Fallbacks sind warm (werden bei gesetzten :root-Tokens nie erreicht).
   Rollback: backups/foundation-dark-20260623/chat-widget.css.bak */

#wh-chat {
  --whc-radius: var(--radius, 10px);
  --whc-radius-launch: var(--radius, 10px);
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  font-family: var(--sans, system-ui, sans-serif);
}

/* ---------- Launcher (weich-gerundete Karte, KEINE runde Bubble) ---------- */
#wh-chat .whc-launcher {
  border-radius: var(--whc-radius-launch);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line, #DED7C9);
  background: var(--card, #F7F4ED);
  color: var(--ink, #26211B);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
#wh-chat .whc-launcher:hover { border-color: var(--accent, #9A4528); color: var(--accent, #9A4528); box-shadow: 0 14px 34px -16px var(--glow, transparent); }
#wh-chat .whc-launcher:focus-visible { outline: 2px solid var(--accent, #9A4528); outline-offset: 2px; }
/* Akzent-Quadrat-Glyph statt Emoji-Optik */
#wh-chat .whc-launcher-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto;
  background: var(--accent, #9A4528); color: #fff;
  border-radius: var(--whc-radius); font-size: 13px; line-height: 1;
}
#wh-chat .whc-launcher-label { line-height: 1.15; }
/* Ungelesen-Punkt am Launcher (Betreiber-Antwort bei geschlossenem Fenster, Jörg 2026-07-10) */
#wh-chat .whc-launcher { position: relative; }
#wh-chat .whc-unread {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent, #9A4528); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
#wh-chat .whc-launcher.whc-has-unread { border-color: var(--accent, #9A4528); color: var(--accent, #9A4528); }

/* ---------- Panel ---------- */
#wh-chat .whc-panel {
  position: absolute;
  right: 0;
  bottom: 62px;
  width: 380px;
  max-width: calc(100vw - 36px);
  height: 540px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--paper, #EFEAE1);
  border: 1px solid var(--line-strong, #CDC4B2);
  border-radius: var(--whc-radius);
  overflow: hidden;
}
#wh-chat .whc-panel[hidden] { display: none; }
#wh-chat .whc-anim-in { animation: whc-in .22s cubic-bezier(.2,.6,.2,1); }
@keyframes whc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #wh-chat .whc-anim-in { animation: none; }
  #wh-chat .whc-launcher { transition: none; }
}

/* ---------- Head ---------- */
#wh-chat .whc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--paper, #EFEAE1);
  color: var(--ink, #26211B);
  border-bottom: 1px solid var(--line, #DED7C9);
}
#wh-chat .whc-head-title { display: flex; flex-direction: column; line-height: 1.3; gap: 2px; }
#wh-chat .whc-head-name {
  font-family: var(--serif, Georgia, serif); font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}
#wh-chat .whc-head-status {
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .03em; color: var(--muted, #857B6D);
}
#wh-chat .whc-head-status.is-online::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: var(--accent, #9A4528); vertical-align: middle;
}
#wh-chat .whc-head-status.is-offline::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%; background: var(--muted, #857B6D); vertical-align: middle;
}
#wh-chat .whc-close {
  background: none; border: none; color: var(--muted, #857B6D);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
  transition: color .16s ease;
}
#wh-chat .whc-close:hover { color: var(--accent, #9A4528); }
#wh-chat .whc-close:focus-visible { outline: 2px solid var(--accent, #9A4528); outline-offset: 2px; border-radius: 2px; }

/* ---------- Body / Thread ---------- */
#wh-chat .whc-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px; min-width: 0; }
#wh-chat .whc-thread { display: flex; flex-direction: column; gap: 10px; }
#wh-chat .whc-msg { display: flex; flex-direction: column; max-width: 84%; }
#wh-chat .whc-visitor { align-self: flex-end; align-items: flex-end; }
#wh-chat .whc-operator, #wh-chat .whc-bot { align-self: flex-start; align-items: flex-start; }
/* Sender-Label (Mono) für Werkstatt-Seite */
#wh-chat .whc-operator::before,
#wh-chat .whc-bot::before {
  content: "WÄRME HANDEL";
  font-family: var(--mono, monospace); font-size: 9.5px; letter-spacing: .12em;
  color: var(--muted, #857B6D); margin-bottom: 4px;
}
/* Tail-lose Nachrichten, eckig (2px) */
#wh-chat .whc-bubble {
  padding: 10px 13px;
  border-radius: var(--whc-radius);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
#wh-chat .whc-visitor .whc-bubble {
  background: var(--accent-soft, rgba(154,69,40,.07)); color: var(--ink, #26211B);
}
#wh-chat .whc-operator .whc-bubble {
  background: var(--card, #F7F4ED); color: var(--ink, #26211B);
  border: 1px solid var(--line, #DED7C9);
}
#wh-chat .whc-bot .whc-bubble {
  background: var(--card, #F7F4ED); color: var(--ink-soft, #574F44);
  border: 1px solid var(--line, #DED7C9);
}

/* ---------- Quick-Replies (eckige Haarlinien-Chips) ---------- */
#wh-chat .whc-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#wh-chat .whc-chip {
  border: 1px solid var(--line-strong, #CDC4B2);
  background: transparent;
  color: var(--ink-soft, #574F44);
  border-radius: var(--whc-radius);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease;
}
#wh-chat .whc-chip:hover { border-color: var(--accent, #9A4528); color: var(--accent, #9A4528); }
#wh-chat .whc-chip:focus-visible { outline: 2px solid var(--accent, #9A4528); outline-offset: 2px; }

/* ---------- Nachricht hinterlassen ---------- */
#wh-chat .whc-leave { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, #DED7C9); }
#wh-chat .whc-leave-title {
  font-family: var(--serif, Georgia, serif); font-size: 15px; font-weight: 600;
  color: var(--ink, #26211B); margin-bottom: 10px; letter-spacing: -.008em;
}
#wh-chat .whc-leave-form { display: flex; flex-direction: column; gap: 9px; }
#wh-chat .whc-field {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong, #CDC4B2);
  border-radius: var(--whc-radius);
  background: var(--field, #F7F4ED);
  color: var(--ink, #26211B);
  box-sizing: border-box;
}
#wh-chat .whc-field:focus-visible { outline: none; border-color: var(--accent, #9A4528); box-shadow: 0 0 0 3px var(--accent-soft, rgba(154,69,40,.07)); }
#wh-chat textarea.whc-field { resize: vertical; min-height: 64px; line-height: 1.5; }
#wh-chat .whc-leave-note { font-size: 13px; color: var(--danger, #9A3322); }

/* ---------- Eingabe-Leiste (online: unterstrichenes Feld) ---------- */
#wh-chat .whc-input {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-top: 1px solid var(--line, #DED7C9);
  background: var(--card, #F7F4ED);
}
#wh-chat .whc-input[hidden] { display: none; }
#wh-chat .whc-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-strong, #CDC4B2);
  border-radius: 0;
  background: transparent;
  color: var(--ink, #26211B);
}
#wh-chat .whc-text:focus-visible { outline: none; border-bottom-color: var(--accent, #9A4528); }
#wh-chat .whc-send {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--accent, #9A4528);
  font-family: var(--mono, monospace);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 8px 6px;
  cursor: pointer;
  transition: color .14s ease;
}
#wh-chat .whc-send::after { content: " →"; }
#wh-chat .whc-send:hover { color: var(--accent-dk, #7F3A22); }
#wh-chat .whc-send:disabled { opacity: .5; cursor: default; }
#wh-chat .whc-send:focus-visible { outline: 2px solid var(--accent, #9A4528); outline-offset: 2px; }

@media (max-width: 480px) {
  /* FIX (2026-06-28) — Auf Mobil kollabiert der Launcher zur kompakten Eck-Marke (nur
     Akzent-Glyph, Label visuell ausgeblendet, aria-label trägt die Bedeutung weiter).
     Grund: die beschriftete Pille überlappte beim Scrollen Inhaltskarten (Produktkarte).
     Eine kleine, quadratische 48px-Marke sitzt sauber in der Rand-Gutter (safe-area) und
     überdeckt keine Kartenflächen mehr. Touch-Ziel ≥ 48px, weiterhin gut greifbar. */
  #wh-chat { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  #wh-chat .whc-panel { right: 0; bottom: 60px; width: calc(100vw - 28px); height: calc(100vh - 108px); }
  #wh-chat .whc-launcher {
    width: 48px;
    height: 48px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    white-space: nowrap;
    transform: none;
    writing-mode: horizontal-tb;
    box-shadow: 0 10px 26px -16px rgba(42,30,20,.5);
  }
  #wh-chat .whc-launcher-ico { width: 26px; height: 26px; font-size: 14px; }
  /* Label visuell entfernen, aber für Screenreader erhalten (aria-label deckt es ohnehin ab). */
  #wh-chat .whc-launcher-label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}