/* Ellie, die Platzhilfe. Sitzt auf jeder Seite unten rechts.
   Dieselbe Ellie wie im Buchungssystem, dieselbe Schnittstelle /api/concierge.
   Kein Fremdanbieter, kein Skript von aussen, nichts wird mitgeschnitten. */

.ellie-knopf{
  position:fixed; z-index:70;
  right:max(16px, env(safe-area-inset-right));
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px;
  padding:8px 16px 8px 8px; border:1.5px solid var(--tinte); border-radius:99px;
  /* Auf 320px stand der Knopf 4px ueber den rechten Rand hinaus. */
  max-width:calc(100vw - 32px); box-sizing:border-box;
  background:var(--karte); color:var(--tinte); cursor:pointer;
  font-weight:700; font-size:15px; min-height:56px;
  box-shadow:0 10px 26px -14px rgba(34,31,26,.7);
  transition:transform var(--schnell) var(--kurve), box-shadow var(--mittel) var(--kurve);
}
.ellie-knopf img{width:38px;height:38px;border-radius:99px;flex:none}
.ellie-knopf:active{transform:scale(.97)}
.ellie-knopf .punkt{
  width:8px;height:8px;border-radius:99px;background:var(--gruen); flex:none;
  box-shadow:0 0 0 3px rgba(95,122,63,.18);
}
@media (hover:hover) and (pointer:fine){
  .ellie-knopf:hover{box-shadow:0 14px 30px -12px rgba(34,31,26,.8)}
}
/* Mobil nur ein kompakter, runder Einstieg. Der bisherige breite Schwimmer
   verdeckte Karten, Bewertungen und den Belegungsstatus. */
@media (max-width:640px){
  .ellie-knopf{
    right:max(10px,env(safe-area-inset-right));
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:52px;height:52px;min-height:52px;padding:6px;gap:0;border-radius:50%
  }
  .ellie-knopf img{width:36px;height:36px}
  .ellie-knopf span.lang{display:none}
  .ellie-knopf .punkt{position:absolute;right:5px;bottom:6px;width:7px;height:7px}
}

.ellie-fenster{
  position:fixed; z-index:71; inset:auto;
  right:max(16px, env(safe-area-inset-right));
  bottom:calc(84px + env(safe-area-inset-bottom));
  width:min(420px, calc(100vw - 32px)); max-height:min(72svh, 640px);
  display:none; flex-direction:column; overflow:hidden;
  background:var(--karte); border:1px solid var(--linie); border-radius:var(--r-flaeche);
  box-shadow:0 30px 70px -30px rgba(34,31,26,.75);
}
.ellie-fenster[open]{display:flex; animation:ellie-rein 260ms var(--kurve)}
@keyframes ellie-rein{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@media (max-width:560px){
  .ellie-fenster{right:0; left:0; bottom:0; width:100%; max-height:88svh; border-radius:var(--r-flaeche) var(--r-flaeche) 0 0}
}

.ellie-kopf{
  display:flex; align-items:center; gap:12px; padding:var(--s4);
  border-bottom:6px solid transparent; border-image:var(--schraffur) 6 repeat;
}
.ellie-kopf img{width:44px;height:44px;border-radius:99px;flex:none}
.ellie-kopf b{display:block; font-family:var(--schrift-display); font-size:17px; letter-spacing:-.02em}
.ellie-kopf small{display:block; color:var(--neben); font-size:13px}
.ellie-zu{margin-left:auto; width:38px;height:38px; border-radius:99px; border:1px solid var(--linie);
  background:var(--karte); cursor:pointer; display:grid; place-items:center}
.ellie-zu svg{width:14px;height:14px}

.ellie-lauf{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:var(--s4); display:grid; gap:var(--s3)}
.ellie-blase{max-width:86%; padding:11px 14px; border-radius:var(--r-flaeche); font-size:15.5px; line-height:1.5}
.ellie-blase.bot{background:var(--sand-weich); justify-self:start}
.ellie-blase.ich{background:var(--tinte); color:#fff; justify-self:end}
.ellie-blase a{color:var(--gold); text-decoration:underline}
.ellie-blase.ich a{color:#ffd9a8}
.ellie-tippt{display:flex; gap:5px; align-items:center; padding:12px 14px; justify-self:start}
.ellie-tippt i{width:7px;height:7px;border-radius:99px;background:var(--sand);display:block;
  animation:ellie-puls 1.1s var(--kurve) infinite}
.ellie-tippt i:nth-child(2){animation-delay:.15s}
.ellie-tippt i:nth-child(3){animation-delay:.3s}
@keyframes ellie-puls{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.ellie-chips{display:flex; flex-wrap:wrap; gap:7px; padding:0 var(--s4) var(--s3)}
.ellie-chips button{
  border:1px solid var(--linie); background:var(--karte); color:var(--tinte);
  border-radius:99px; padding:8px 13px; font-size:13.5px; cursor:pointer; min-height:38px;
  transition:border-color var(--schnell) var(--kurve), background var(--schnell) var(--kurve);
}
@media (hover:hover) and (pointer:fine){ .ellie-chips button:hover{background:var(--sand-weich); border-color:var(--sand)} }

.ellie-eingabe{display:flex; gap:8px; padding:var(--s3) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
  border-top:1px solid var(--linie)}
.ellie-eingabe input{
  flex:1; min-height:48px; padding:0 14px; border:1px solid var(--linie);
  border-radius:var(--r-element); background:var(--papier); color:var(--tinte); font-size:16px;
}
.ellie-eingabe input:focus{background:var(--karte); border-color:var(--sonne); outline:none}
.ellie-eingabe button{min-height:48px; padding:0 16px}
.ellie-fuss{padding:0 var(--s4) var(--s3); font-size:12px; color:var(--neben)}

@media (prefers-reduced-motion:reduce){
  .ellie-fenster[open]{animation:none}
  .ellie-tippt i{animation:none; opacity:.6}
}