#spinaczContainer {
  position: fixed;
  bottom: 20px;  /* Odległość od dołu */
  right: 20px;   /* Odległość od prawej krawędzi */
  /*display: flex;*/
  display: none;
  flex-direction: column;
  align-items: flex-end; /* Wyrównanie do prawej krawędzi */
  z-index: 1000;
  user-select: none;
  cursor: pointer;
  font-family: Arial, sans-serif;
}

#miniChat {
  display: none;
  max-width: 250px;
  background: linear-gradient(135deg, #ffc870, #ff9800);
  border: 1px solid #2980b9;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  color: #333;
}

#chatMessages {
  min-height: 50px;
  white-space:  pre-line;
  max-height: 150px;
  overflow-y: auto;
  padding-right: 5px;
}

.chat-user {
  background-color: #ffe5b4; /* jasny pomarańczowy */
  color: #5a3e00;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 12px 12px 12px 0;
  max-width: 80%;
  align-self: flex-end;
  font-weight: 600;
}

.chat-assistant {
  background-color: #fff4e5; /* bardzo jasny, neutralny */
  color: #663300;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 12px 12px 0 12px;
  max-width: 80%;
  align-self: flex-start;
  font-style: italic;
}

#chatInput {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 6px;
  border: 1px solid #aaa;
  border-radius: 4px;
  font-size: 14px;
}


.clip-body {
  fill: #3498db;
  stroke: #2980b9;
  stroke-width: 2;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}
.clip-inner {
  fill: #5dade2;
}
.eye-white {
  fill: #fff;
}
.eye-pupil {
  fill: #2980b9;
}
.smile {
  fill: none;
  stroke: #2980b9;
  stroke-width: 2;
  stroke-linecap: round;
}
.bounce {
  animation: bounce 2s infinite ease-in-out;
  transform-origin: center bottom;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}