@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

/* ===== GLOBAL ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  margin:0; padding:0;
  display:flex; justify-content:center; align-items:center;
  min-height:100vh;
}
main{ padding:0; width:100%; display:flex; justify-content:center; align-items:center; }

/* ===== CHATBOX ===== */
#chatbox{
  background:#ffffff;
  width:360px;
  border-radius:18px;
  box-shadow:0 16px 32px rgba(0,0,0,.1);
  padding:0;
  position:relative;
  display:none;             /* widoczny gdy embed albo data-chat="open" */
  flex-direction:column;
  overflow:hidden;
}
body[data-chat="open"] #chatbox { display:flex; }
html.embed, html.embed body{ background:transparent !important; height:100%; }
html.embed #chatbox{ display:flex !important; width:100%; max-width:none; height:100dvh; border-radius:0; box-shadow:none; }

/* ===== HEADER ===== */
#chatHeader{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg,#16a34a,#0ea5a4,#047857);
  background-size:200% 200%;
  animation:skledGradientMove 8s ease-in-out infinite;
  padding:14px 16px; color:#fff;
}
@keyframes skledGradientMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
#chatLogo{ width:32px; height:32px; }
#chatTitle{ font-family:'Oswald',sans-serif; font-size:1.2rem; }
#chatClose{ margin-left:auto; background:rgba(0,0,0,.25); border:none; color:#fff; width:30px; height:30px; border-radius:8px; cursor:pointer; }
.hidden{ display:none !important; }

/* ===== MESSAGES ===== */
#messages{
  flex:1 1 auto;
  min-height:240px;
  overflow-y:auto; overflow-x:hidden;
  padding:12px 14px;
  display:flex; flex-direction:column; gap:10px;
  background:#f7f8f9;
  -webkit-overflow-scrolling:touch;
}

/* ===== BUBBLES ===== */
.bubble{
  max-width:80%;
  padding:10px 14px;
  border-radius:14px;
  line-height:1.45;
  word-break:break-word;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  font-size:14px;
}
.bubble.user{
  align-self:flex-end;
  color:#fff;
  background:linear-gradient(135deg,#16a34a,#047857);
  margin-right:10px;
  margin-left:30px;
}
.bubble.bot{
  align-self:flex-start;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  margin-left:10px;
  margin-right:30px;
}

/* ===== TYPING INDICATOR (jeden, elegancki) ===== */
#typingIndicator{
  display:flex; gap:6px;
  padding:4px 14px 8px 14px;
  align-items:center;
}
#typingIndicator .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:#9aa3ab;
  opacity:.6;
  animation: ti-bounce 1.2s infinite ease-in-out;
}
#typingIndicator .dot:nth-child(2){ animation-delay:.15s; }
#typingIndicator .dot:nth-child(3){ animation-delay:.3s; }

@keyframes ti-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity:.3; }
  40% { transform: translateY(-4px); opacity:.9; }
}

/* ===== INPUT ===== */
#inputArea{
  position:relative; display:flex; align-items:center; gap:10px;
  margin:12px; padding:10px 12px;
  background:#fff; border-radius:14px;
  border:1px solid #e3e6ea; box-shadow:0 4px 10px rgba(0,0,0,.05);
}
#inputArea:focus-within{ border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.12); }
#userInput{ flex:1; border:none; outline:none; font-size:14px; padding:.6em; background:transparent; }
#sendBtn{
  width:40px; height:40px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,#16a34a,#047857);
  position:relative; transition:transform .06s ease, filter .18s ease;
}
#sendBtn:hover{ filter:saturate(1.04); }
#sendBtn:active{ transform:scale(.96); }
#sendBtn::before{
  content:"";
  position:absolute; inset:0;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="black"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>') no-repeat center / 20px 20px;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24 "><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>') no-repeat center / 20px 20px;
  background:#fff;
}