/* -------------------- Chat kompakt + Flex -------------------- */
.chat {
  display: flex;
  flex-direction: column;
  gap: 5px;

  padding: 24px;
  border-radius: 15px;
  width: 100%;
  /* max-width: 1000px; */

  /* feste Höhen entfernen */
  /* height: 650px; */
  /* min-height: 60%; */

  margin: 1vh auto 1vh;
  position: relative;
  word-wrap: break-word;
  grid-column: 2 / span 9;

  /* optional: falls viele Nachrichten -> eigener Scrollbereich */
  /* max-height: 70vh; overflow: auto; scroll-behavior: smooth; */
}

/* Nachricht: initial versteckt (JS blendet ein) */
.message {
  font-size: 0.9rem;
  font-family: var(--font-headline);
  display: none;              /* wird per JS sichtbar gemacht */
  margin: 5px 0;
  padding: 10px 10px 5px 10px; /* unten Platz für Zeit-Zeile */
  max-width: 520px;
  border-radius: 12px;
  font-family: var(--font-headline);
  font-weight: 350;
  letter-spacing: 0.01em;
  line-height: 1.3;
  opacity: 0.85;
}

/* Inhalt trennen: Body oben, Zeit unten rechtsbündig */
.message .body {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message .time {
  display: block;
  text-align: right;   /* schließt bündig mit Textkante der Bubble ab */
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0.65;
  margin-top: 3px;     /* Abstand zum Text */
  white-space: nowrap;
}

/* Links/rechts ausrichten ohne Floats */
.person1 {
  
  background: #6e7e98; 
  background: #869f79; 
  background: #a6bd71; 
  background: #6e7e98; 
  background: #ebe7e7;


  color: #111;
  align-self: flex-start;
}
.person2 {
  background: #fcc764;
  background: #fdf096;
  background: #c8b4a1;
  color: #111;
  align-self: flex-end;
}
/* Text Farbe */ 
.person2 .body { color: #111; }
.person1 .body { color: #111; }


/* Zeit-Farbe je Bubble */
.person1 .time { color: rgba(0, 0, 0, 0.75); }
.person2 .time { color: #111; }

/* alte Float-Reste entfernen */
.person1, .person2 { float: none; clear: none; }
.chat::after { content: none; }

/* -------------------- Responsiv -------------------- */
@media (max-width: 900px) {
  .chat { grid-column: 1 / -1; margin: 6vh auto 4vh; max-width: 100%; }
}

/* Chat wieder als “volle Seite” reservieren */
#chat.story-segment{
  min-height: 100vh !important;
  padding: 4vh var(--padding) 2vh !important; /* dein Padding ok */
}

/* segment-content darf auto bleiben, aber nicht min-height:auto erzwingen */
#chat .segment-content{
  grid-template-rows: auto !important;
  align-items: start !important;
}

/* .chat {
  position: relative;

  padding-left: 20px;
  border-left: 2px solid rgba(255,255,255,0.14);
  border-right: 2px solid rgba(255,255,255,0.14);
}
*/

/*
.chat::before {
  content: "Schatz";
  position: absolute;
  top: -18px;
  left: 0;

  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.45);
}
*/



/* --- Typing Indicator (… wie WhatsApp) --- */
.message.typing {
  display: block;                 /* wird per JS eingefügt */
  padding: 10px 14px;
}

.message.typing .body {
  display: flex;
  gap: 4px;
  align-items: center;
}

.message.typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.35;
  background: #000;       /* nimmt Textfarbe der Bubble */
  animation: typingDot 1s infinite ease-in-out;
}

.message.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.message.typing .dot:nth-child(3) { animation-delay: 0.3s; }

.message.typing .time { display: none; }  /* beim Tippen keine Uhrzeit */

@keyframes typingDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.25; }
  40%           { transform: translateY(-3px); opacity: 0.7; }
}

/* --- Avatare neben den Nachrichten --- */
.chat {
  /* Platz für Avatare links & rechts */
  padding-left: 64px;
  padding-right: 64px;

  /* Hier setzt du die Bilder (Pfade anpassen!) */
  --avatar-person1: url("../assets/images/avatar-person1.jpg");
  --avatar-person2: url("../assets/images/avatar-person2.jpg");
}

.message {
  position: relative; /* wichtig für ::before */
}

/* Avatar-Basis */
.message::before {
  content: "";
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* links (person1) */
.message.person1::before {
  left: -52px;
  background-image: var(--avatar-person1);
}

/* rechts (person2) */
.message.person2::before {
  right: -52px;
  background-image: var(--avatar-person2);
}

/* optional: beim Typing-Indicator minimal höher sitzen */
.message.typing::before {
  top: 50%;
}

/* Avatar nur bei erster Nachricht eines Blocks anzeigen */
.message.person1 + .message.person1::before,
.message.person2 + .message.person2::before {
  content: none;
}


/* ----------- Scroll Hint ------- 
#scroll-hint-global{
  
  left: 0;
  right: 0;
  bottom: 16px;

  width: 100%;

  display: block !important;
  visibility: visible !important;

  opacity: 0;
  transform: translateY(8px);

  pointer-events: none;

  animation: scrollHintIn 2.35s ease forwards;
  animation-delay: 3s;
}

@keyframes scrollHintIn{
  to { opacity: 1; transform: translateY(0); }
}
*/
/* Dezentes Bounce (3x) 
@keyframes hintBounce{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
*/
/* ----------- Scroll Hint ------- */

/* ======================================================
   SCROLL HINT – fixed, mittig, fade-in + bounce,
   blendet aus sobald .is-hidden gesetzt wird
   ====================================================== */
/* ======================================================
   SCROLL HINT – wirklich mittig, robust
   ====================================================== */
   #scroll-hint-global{
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%) translateY(8px);
    z-index: 99999;
  
    /* wichtig: nicht full width, sonst wirkt’s wieder “links” */
    width: max-content;
    max-width: calc(100vw - 32px);
  
    margin: 0;
    padding: 0;
  
    pointer-events: none;
  
    opacity: 0;
  
    /* Fade-in nach X Sekunden */
    animation: hintFadeIn 0.6s ease forwards;
    animation-delay: 2s;
  
    transition: opacity 350ms ease, transform 350ms ease;
  }
  
  #scroll-hint-global > span{
    display: inline-flex;
    align-items: center;
    gap: 6px;
  
    padding: 8px 12px;
    border-radius: 999px;
  
    /* Bounce immer */
    animation: hintBounce 1.6s ease-in-out infinite;
  
    /* falls du Background willst */
    /* background: rgba(255,255,255,0.85); */
    /* backdrop-filter: blur(6px); */
  }
  
  /* Text */
  #scroll-hint-global{
    text-align: center;
    font-family: var(--font-headline, var(--font));
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--text);
  }
  
  /* Ausblenden-Klasse (per JS) */
  #scroll-hint-global.is-hidden{
    opacity: 0 !important;
    transform: translateX(-50%) translateY(8px);
    pointer-events: none;
    animation: none; /* stoppt ggf. fade-in, falls noch nicht gelaufen */
  }
  
  /* Keyframes */
  @keyframes hintFadeIn{
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  
  @keyframes hintBounce{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }