/* ==============================================
   CHAT — Bubbles, Avatare, Input, Animationen
   ============================================== */

/* --- Banner (Bild + Untertitel) --- */
.banner-image-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  container-type: inline-size;
}

.banner-image {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.banner-subtitle {
  font-family: var(--font-display);
  font-size: clamp(7px, 1.1cqi, 11px);
  color: var(--text-wirt);
  letter-spacing: 0.2em;
  text-align: center;
  position: absolute;
  bottom: 30%;
  left: 0;
  right: 0;
}

/* --- Warmer Lichtschein um den Chat --- */
.zone-chat::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 70%;
  background: radial-gradient(ellipse, var(--bg-warm) 0%, transparent 70%);
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}

/* --- Chat-Fade oben: Text verschwindet unter dem Banner --- */
.zone-chat::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3rem;
  background: linear-gradient(to bottom, var(--bg-deep), transparent);
  pointer-events: none;
  z-index: 2;
}

/* --- Chat-Bereich (scrollbar) --- */
.chat-area {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg) 1.2rem var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* --- Erzähler-Text --- */
.msg-narrator {
  text-align: center;
  font-style: italic;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  padding: 0 1.5rem;
}

/* --- Trennlinie --- */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
  opacity: 0.5;
}

/* --- Wirt-Nachricht --- */
.msg-wirt {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.wirt-avatar {
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background: url('../assets/avatar-brumbar.webp') center/cover no-repeat;
  border: 1px solid var(--gold-dim);
  font-size: 0;
  flex-shrink: 0;
  margin-top: 2px;
  overflow: hidden;
}

.wirt-bubble {
  background: var(--bubble-wirt-bg);
  border: 1px solid var(--bubble-wirt-border);
  border-radius: 0 var(--bubble-radius) var(--bubble-radius) var(--bubble-radius);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-chat);
  line-height: 1.65;
  color: var(--text-wirt);
  max-width: 85%;
}

.wirt-name {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.1em;
}

/* --- Gast-Nachricht --- */
.msg-gast {
  display: flex;
  justify-content: flex-end;
}

.gast-bubble {
  background: var(--bubble-gast-bg);
  border: 1px solid var(--bubble-gast-border);
  border-radius: var(--bubble-radius) 0 var(--bubble-radius) var(--bubble-radius);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-chat);
  line-height: 1.65;
  color: var(--text-gast);
  max-width: 75%;
  font-style: italic;
}

/* --- Cursor (Typewriter) --- */
.cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--gold);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Denkende Punkte --- */
.thinking-dots {
  display: flex;
  gap: 5px;
  padding: 4px 0;
  align-items: center;
}
.thinking-dots span {
  width: 6px;
  height: 6px;
  background: var(--gold-dim);
  border-radius: 50%;
  animation: dot-pulse 1.4s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(1); opacity: 0.4; }
  40% { transform: scale(1.4); opacity: 1; }
}

/* --- Eingabebereich --- */
.input-area {
  padding: 0.9rem var(--space-md);
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  background: var(--bg-input);
  position: sticky;
  bottom: 0;
}

.input-prefix {
  color: var(--gold-dim);
  font-family: var(--font-display);
  font-size: 14px;
  flex-shrink: 0;
}

.guest-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--font-size-chat);
  color: var(--text-gast);
  caret-color: var(--gold);
}
.guest-input::placeholder { color: var(--text-faint); }
.guest-input:disabled { opacity: 0.4; }

.send-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 5px 12px;
  font-family: var(--font-display);
  font-size: var(--font-size-btn);
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.send-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}
.send-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* --- Fehler & Debug --- */
.err-note {
  font-size: var(--font-size-sm);
  color: var(--error);
  text-align: center;
  font-style: italic;
}

.debug-panel {
  font-size: 11px;
  color: var(--gold-dim);
  margin: var(--space-xs) 0;
}
.debug-panel summary { cursor: pointer; opacity: 0.5; }
.debug-panel summary:hover { opacity: 0.8; }
.debug-panel pre {
  background: var(--bubble-wirt-bg);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.5rem;
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- Mobile Fixes --- */
@media (max-width: 768px) {
  #app {
    height: 100dvh;
  }
  .zone-banner {
    flex-shrink: 0;
    max-height: 30vh;
    overflow: hidden;
  }
  .banner-image-wrap {
    max-height: 30vh;
  }
  .banner-subtitle {
    bottom: 24%;
    font-size: clamp(5px, 1.6cqi, 8px);
  }
}