@charset "UTF-8";
/* Du First - Kommunikations-Dock und Chat
   Laedt nur dort, wo es gebraucht wird - siehe page.php ($ctx['styles']).
   Tokens, Typografie und Farben kommen aus automation.css. */

/* ---------- 28. Kommunikations-Dock ---------- */
/* Fest am rechten Rand, vertikal mittig. Es steht ueber dem Inhalt, aber
   unter Kopfzeile und Chat-Flaeche: wer die Navigation bedient, soll nicht
   versehentlich einen Kanal treffen. */
.dock{position:fixed;z-index:90;right:clamp(.6rem,1.6vw,1.35rem);top:50%;translate:0 -50%;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  anchor-name:--dock}

.dock__dismiss{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--border);background:color-mix(in srgb,var(--bg) 70%,transparent);
  color:var(--text-3);opacity:0;transform:scale(.85);
  transition:opacity .25s var(--ease),transform .25s var(--ease),color .2s,border-color .2s}
.dock:hover .dock__dismiss,.dock:focus-within .dock__dismiss{opacity:1;transform:none}
.dock__dismiss:focus-visible{opacity:1;transform:none}
.dock__dismiss:hover{color:var(--text);border-color:var(--border-str)}

.dock__list{display:flex;flex-direction:column;gap:.5rem}
.dock__item{display:block}

.dock__btn{position:relative;display:grid;place-items:center;width:48px;height:48px;
  border-radius:50%;color:var(--text-2);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:var(--shadow);
  transition:color .25s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.dock__btn:hover{color:var(--text);transform:translateX(-3px)}
.dock__btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Der Ring ist die eigentliche Gestaltung: eine Spur und ein Bogen, der
   sich bei Hover und Fokus zeichnet. Ein Rand koennte nur erscheinen —
   eine Linie kann laufen. */
.dock__ring{position:absolute;inset:0;display:block;pointer-events:none}
.dock__ring svg{width:100%;height:100%;overflow:visible}
.dock__track{stroke:var(--border);stroke-width:1}
.dock__arc{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:135;stroke-dashoffset:135;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset .55s var(--ease)}
.dock__btn:hover .dock__arc,.dock__btn:focus-visible .dock__arc{stroke-dashoffset:0}
.dock__glyph{display:grid;place-items:center;position:relative}

/* Beschriftung per CSS Anchor Positioning links neben dem Knopf.
   Ohne Unterstuetzung greift die absolute Angabe darunter — dieselbe
   Stelle, nur ohne Ankerbezug. */
.dock__label{position:absolute;right:calc(100% + .6rem);top:50%;translate:0 -50%;
  white-space:nowrap;padding:.34rem .68rem;border-radius:100px;
  background:var(--surface-3);border:1px solid var(--border);color:var(--text);
  font-size:.78rem;font-weight:500;box-shadow:var(--shadow);
  opacity:0;transform:translateX(6px);pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
@supports (anchor-name: --a) {
  .dock__btn{anchor-name:--dockbtn}
  .dock__label{position:fixed;position-anchor:--dockbtn;
    right:anchor(left);left:auto;top:anchor(center);translate:0 -50%;
    position-try-fallbacks:flip-inline}
}
.dock__btn:hover .dock__label,.dock__btn:focus-visible .dock__label{opacity:1;transform:none}

/* Der Griff, der das geschlossene Dock zurueckholt. */
.dock__handle{position:fixed;z-index:90;right:clamp(.6rem,1.6vw,1.35rem);top:50%;translate:0 -50%;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  color:var(--text-3);border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 78%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:color .2s,border-color .2s}
.dock__handle:hover{color:var(--text);border-color:var(--border-str)}

@media (max-width:640px){
  /* Auf dem Telefon liegt das Dock unten und waagerecht: der Daumen kommt
     an den rechten Rand nicht heran, ohne die Hand umzugreifen. */
  .dock{top:auto;bottom:calc(.7rem + env(safe-area-inset-bottom));right:50%;translate:50% 0;
    flex-direction:row-reverse;gap:.45rem;
    padding:.4rem;border-radius:100px;
    background:color-mix(in srgb,var(--surface) 82%,transparent);
    border:1px solid var(--border);box-shadow:var(--shadow-lg);
    backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%)}
  .dock__list{flex-direction:row;gap:.3rem}
  .dock__btn{width:44px;height:44px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .dock__btn:hover{transform:none}
  .dock__label{display:none}
  .dock__dismiss{opacity:1;transform:none;width:26px;height:26px}
  .dock__handle{top:auto;bottom:calc(.7rem + env(safe-area-inset-bottom))}
}

/* ---------- 29. Chat ---------- */
.chat__launch{position:fixed;z-index:95;right:clamp(.9rem,2vw,1.6rem);
  bottom:calc(clamp(.9rem,2vw,1.6rem) + env(safe-area-inset-bottom));
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  color:var(--accent-ink);background:var(--accent);
  box-shadow:0 8px 28px -10px rgba(198,242,78,.55);
  anchor-name:--chatlaunch;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.chat__launch:hover{transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(198,242,78,.65)}
.chat__ring{position:absolute;inset:0;pointer-events:none}
.chat__ring svg{width:100%;height:100%;overflow:visible}
.chat__track{stroke:rgba(10,10,12,.18);stroke-width:1}
.chat__arc{stroke:var(--accent-ink);stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:157;stroke-dashoffset:157;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset .6s var(--ease)}
.chat__launch:hover .chat__arc,.chat__launch:focus-visible .chat__arc{stroke-dashoffset:0}
.chat__glyph{position:relative;display:grid;place-items:center}

/* Popover API: die Flaeche liegt in der obersten Ebene, ohne z-index-Wettlauf
   mit der Kopfzeile, und der Browser uebernimmt Escape und Fokusfang. */
.chat{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-lg);color:var(--text);padding:0;overflow:hidden;
  width:min(380px,calc(100vw - 2rem));max-height:min(560px,calc(100dvh - 7rem));
  display:none;flex-direction:column;
  inset:auto;margin:0;
  position:fixed;right:clamp(.9rem,2vw,1.6rem);
  bottom:calc(clamp(.9rem,2vw,1.6rem) + 56px + .6rem + env(safe-area-inset-bottom))}
.chat:popover-open{display:flex;animation:chat-in .32s var(--ease) both}
@supports (anchor-name: --a) {
  .chat{position-anchor:--chatlaunch;
    right:anchor(right);bottom:calc(anchor(top) + .6rem);
    position-try-fallbacks:flip-block,flip-inline}
}
@keyframes chat-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
.chat::backdrop{background:transparent}

.chat__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.1rem;border-bottom:1px solid var(--border);background:var(--surface-2)}
.chat__title{font-size:.95rem;letter-spacing:-.02em}
.chat__close{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  color:var(--text-3);border:1px solid transparent;transition:color .2s,border-color .2s}
.chat__close:hover{color:var(--text);border-color:var(--border)}

.chat__log{flex:1;overflow-y:auto;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.7rem}
.chat__msg{max-width:85%;padding:.6rem .85rem;border-radius:14px;font-size:.9rem;line-height:1.5}
.chat__msg--me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:5px}
.chat__msg--them{align-self:flex-start;background:var(--surface-3);border-bottom-left-radius:5px}
.chat__msg--sys{align-self:center;font-size:.8rem;color:var(--text-3);background:none;padding:0}

.chat__form{padding:.85rem 1.1rem 1rem;border-top:1px solid var(--border);display:grid;gap:.7rem}
.chat__context{display:flex;gap:.4rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.chat__contextValue{color:var(--accent-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat__row{display:flex;gap:.5rem;align-items:flex-end}
.chat__input{flex:1;resize:none;max-height:120px;padding:.6rem .8rem;border-radius:12px;
  border:1px solid var(--border);background:var(--bg-2);font-size:.9rem;line-height:1.45}
.chat__input:focus-visible{border-color:var(--accent-line);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.chat__send{width:42px;height:42px;padding:0;flex-shrink:0;border-radius:50%}
.chat__consent{font-size:.74rem;color:var(--text-3);line-height:1.5}
.chat__consent label{display:flex;gap:.5rem;align-items:flex-start}
.chat__consent input{margin-top:.2em;accent-color:var(--accent)}

/* Die freiwillige Uebergabe. Zugeklappt, bis jemand sie aufklappt oder die
   Antwort sie nahelegt: ein Kontaktformular, das sich aufdraengt, ist der
   Anfang davon, dass jemand es ausfuellt, ohne es gewollt zu haben. */
.chat__handover{border-top:1px solid var(--border);background:var(--surface-2)}
.chat__handover>summary{cursor:pointer;list-style:none;padding:.7rem 1.1rem;
  font-size:.78rem;letter-spacing:.02em;color:var(--text-2);
  display:flex;align-items:center;gap:.45rem;transition:color .2s}
.chat__handover>summary::-webkit-details-marker{display:none}
.chat__handover>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .22s var(--ease)}
.chat__handover[open]>summary::before{transform:rotate(45deg)}
.chat__handover>summary:hover{color:var(--text)}
.chat__handover>summary:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px}
.chat__contact{padding:.2rem 1.1rem 1rem;display:grid;gap:.6rem}
.chat__hint{font-size:.74rem;color:var(--text-3);line-height:1.5;margin:0}
.chat__field{display:grid;gap:.25rem}
.chat__field>span{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3)}
.chat__field input,.chat__field textarea{padding:.5rem .7rem;border-radius:10px;
  border:1px solid var(--border);background:var(--bg-2);font-size:.86rem;line-height:1.45;
  color:var(--text);width:100%}
.chat__field textarea{resize:vertical;min-height:60px;max-height:160px}
.chat__field input:focus-visible,.chat__field textarea:focus-visible{
  border-color:var(--accent-line);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
@media (prefers-reduced-motion:reduce){
  .chat__handover>summary::before{transition:none}
}

/* Dock und Chat teilen sich die untere rechte Ecke. Auf schmalen Schirmen
   liegt das Dock mittig unten, der Chat darueber — sie stapeln sich, statt
   sich zu ueberdecken. */
@media (max-width:640px){
  .chat__launch{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
  .chat{bottom:calc(4.6rem + 56px + .6rem + env(safe-area-inset-bottom))}
}