:root {
  --primary: #4A1C10;
  --secondary: #7D4F3D;
  --accent: #F5EADC;
  --text: #2E1A16;
  --accent-rgb: 245,234,220;
  --chat-primary: var(--primary);
  /* Cremefarbene, warme Chat-Hintergründe für bessere Lesbarkeit */
  --chat-secondary: #FFF7E6;  /* sehr helles Creme */
  --chat-bg: #FFF9F2;         /* sanftes Creme */
  --chat-user-bg: #FFF1D6;    /* helles Apricot */
  --chat-bot-bg: #FFF7E6;     /* sehr helles Creme */
  --chat-text-user: #2E1A16;
  --chat-text-bot: #2E1A16;
  --overlay-bg: rgba(var(--accent-rgb), 0.3);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

/* Strawbery Icon */
#strawberry-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 90px;
  z-index: 9999;
  opacity: 0;
  /* immer klickbar */
  pointer-events: auto;
  transition: opacity 0.4s ease;
  cursor: pointer;
}
#strawberry-icon.visible {
  opacity: 1;
  pointer-events: auto;     /* Klicks wieder erlauben */
}
#strawberry-icon img,
#strawberry-icon svg.face-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#strawberry-icon svg.face-svg {
  pointer-events: none;     /* Klicks durchreichen */
}
#strawberry-icon.visible {
  opacity: 1;
  /* Klick-Erlaubnis nur wenn sichtbar */
  pointer-events: auto;
}
#strawberry-icon img,
#strawberry-icon svg.face-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#strawberry-icon img {
  z-index: 1;
}
#strawberry-icon svg.face-svg {
  z-index: 2;
  pointer-events: none; /* Klicks durchreichen */
}
#strawberry-icon.visible {
  opacity: 1;
}
#strawberry-icon img,
#strawberry-icon svg.face-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#strawberry-icon img {
  z-index: 1;
}
#strawberry-icon svg.face-svg {
  z-index: 2;
  pointer-events: none; /* lässt Klicks durch zum Container */
}
#strawberry-icon img {
  width: 100%;               /* füllt den Container aus */
  height: auto;              /* behält das Seitenverhältnis */
  display: block;
}
#strawberry-icon.visible {
  opacity: 1;
  pointer-events: auto;
}
#strawberry-icon.visible {
  opacity: 1;
  pointer-events: auto;
}
#strawberry-icon svg.face-svg {
  width: 100%;
  height: 100%;
}

/* Augen-Blixzen */
@keyframes blinkEye {
  0%, 90%, 100% { transform: scaleY(1); }
  95%          { transform: scaleY(0.2); }
}
#strawberry-icon .pupil {
  transform-box: fill-box;         /* animiert nur das Pupillen-Shape */
  transform-origin: center center; /* Mittelpunkt beibehalten */
  animation: blinkEye 6s infinite ease-in-out;
}

/* Atmen */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
#strawberry-icon svg { animation: breathe 5s ease-in-out infinite; }

/* Overlay */
#chatbot-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: none;
  z-index: 1000;
}

/* Container */
#chatbot-container {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  max-width: calc(100% - 40px);
  height: 400px;
  background: var(--chat-secondary);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* <- Inhalt darf nicht über die abgerundeten Ecken hinausragen */
  border-radius: 16px 16px 0 0; /* runde nur oben, unten bleibt eckig */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1002;
	 
}
	 
#chatbot-container.open {
  transform: translateY(0);
  opacity: 1;
}

/* Header */
#chatbot-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
	background: var(--primary);
  color: var(--text);
  padding: 12px;
}
.header-title {
  flex: 1;
  text-align: center;
  font-weight: bold;
	color: #fff;
}
#close-btn {
  position: absolute;
  top:8px;
  right:12px;
  background: transparent;
  border: none;
  font-size: 25px;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.2s;
}
#close-btn:hover {
  color: var(--secondary);
}

/* Nachrichtenbereich */
#chatbot-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  background: var(--chat-bg);
}
.message {
  margin-bottom: 10px;
  line-height: 1.4;
}
.message.user {
  text-align: right;
}
.message.user .bubble {
  display: inline-block;
  background: var(--chat-user-bg);
  color: var(--chat-text-user);
  padding: 8px 12px;
  border-radius: 16px 16px 0 16px;
  max-width: 80%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.message.bot {
  text-align: left;
}
.message.bot .bubble {
  display: inline-block;
  background: var(--chat-bot-bg);
  color: var(--chat-text-bot);
  padding: 8px 12px;
  border-radius: 16px 16px 16px 0;
  max-width: 80%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.bubble.bot::after {
  content: '';
  position: absolute;
  left: 10px;
  bottom: -8px;
  border: 8px solid transparent;
  border-top-color: var(--chat-secondary);
}
.bubble.user::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: -8px;
  border: 8px solid transparent;
  border-top-color: var(--chat-user-bg);
}

/* Typing Indicator */
#typing-indicator {
  display: flex;
  gap: 4px;
  margin: 10px 0;
}
#typing-indicator.hidden {
  display: none;
}
#typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccc;
  animation: blinkDot 1s infinite ease-in-out;
}
@keyframes blinkDot {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}

/* Eingabebereich */
#chatbot-input {
  display: flex;
  border-top: 1px solid #ddd;
  background: var(--primary);
  padding: 8px;
}
#chatbot-input input {
  flex: 1;
  border: 1px solid #ccc;
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--text);
  transition: background 0.3s, box-shadow 0.3s;
}
#chatbot-input input:hover,
#chatbot-input input:focus {
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
  outline: none;
}
#chatbot-input button {
  margin-left: 8px;
  padding: 8px 12px;
  background: var(--secondary);
  color: #fff;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.2s;
}
#chatbot-input button:hover {
  transform: scale(1.05);
}
	  
	  /* Hover-Wobble für Sweetie */
#strawberry-icon:hover {
  animation: wobble 0.6s ease-in-out;
  cursor: pointer;
}

@keyframes wobble {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(15deg); }
  30%  { transform: rotate(-10deg); }
  45%  { transform: rotate(7deg); }
  60%  { transform: rotate(-5deg); }
  75%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

/* —————————————— */
/* Sweetie-Sprechblase */
/* —————————————— */

/* Basis-Styles: ausgeblendet und über Sweetie positioniert */
#strawberry-icon .speech-bubble {
  position: absolute;
  bottom: 100%;  
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  max-width: 150px;
  padding: 6px 10px;
  background: #fff;
  color: var(--text);
  font-size: 0.8rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  opacity: 0 !important;           /* zwangsweise unsichtbar, außer .show */
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}

/* Pfeil unten an der Blase */
#strawberry-icon .speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
}

/* Nur wenn JS die .show-Klasse gesetzt hat */
#strawberry-icon .speech-bubble.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(-20px);
}

#chatbot-container {
  /* alle anderen Ecken schön abrunden */
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  /* untere rechte Ecke nicht abrunden */
  border-bottom-right-radius: 0 !important;

  overflow: hidden; /* damit kein Inhalt über die Ecken hinausragt */
}
	  
	  /* ------------ */
/* Feintuning Input-Bereich & Text */
/* ------------ */

/* 1) Input-Bereich flex-tauglich machen */
#chatbot-input {
  display: flex;
  align-items: center;       /* Button und Input vertikal zentrieren */
  gap: 8px;                  /* Abstand zwischen Input und Button */
  padding: 8px;
  box-sizing: border-box;
}

/* 2) Input darf nicht Überlauf produzieren */
#chatbot-input input {
  flex: 1;                   /* füllt Platz, drückt Button nicht raus */
  min-width: 0;              /* sehr wichtig gegen Overflow */
}

/* 3) Button festhalten */
#chatbot-input button {
  flex-shrink: 0;            /* bleibt immer die definierte Größe */
}

/* 4) Chat-Schrift etwas kleiner */
#chatbot-messages,
#chatbot-messages .bubble {
  font-size: 0.85rem;        /* ca. 85% der Standardgröße */
  line-height: 1.4;          /* angenehm lesbar */
}

	  
	  
	  /* ========================== */
/* Mobile-Optimierungen Chat  */
/* ========================== */
@media (max-width: 600px) {
  /* Chat-Container füllt fast den ganzen Bildschirm */
 
  /* Overlay etwas dunkler für Fokus */
  #chatbot-overlay {
    background: rgba(var(--accent-rgb), 0.6);
  }

  /* Header etwas kompakter */
  #chatbot-header {
    padding: 8px;
    font-size: 1rem;
  }

  /* Nachrichtenbereich: größere Scrollzone */
  #chatbot-messages {
    flex: 1;
    padding: 8px;
    font-size: 0.9rem;
  }

  /* Eingabebereich: setzt auf volle Breite */
  #chatbot-input {
    padding: 6px;
    gap: 4px;
  }
  #chatbot-input input {
    padding: 6px 8px;
    font-size: 0.9rem;
  }
  #chatbot-input button {
    padding: 6px 10px;
    font-size: 0.9rem;
  }

  /* Sweetie-Icon etwas nach oben schieben */
  #strawberry-icon {
    bottom: 50px;  /* springt höher, damit es nicht ins Keyboard ragt */
    right: 16px;
    width: 60px;
    height: 70px;
  }
}
	  



/* Mobile: Kompaktere Version */
@media (max-width: 600px) {
  #chatbot-container {
    max-height: 45vh !important; /* Kleinere Höhe */
	  margin-bottom: 20px;
	  border-radius: 16px !important;        /* alle 4 Ecken */
    overflow: hidden;
	  
	 
  }