:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(900px 500px at 50% -10%, #fff, transparent 70%),
    linear-gradient(180deg, #fbf7f1, #f3ece2);
  color: #2b241c;
  display: flex; justify-content: center; align-items: center;
  padding: 16px;
}
.card {
  width: min(420px, 100%);
  background: #fffdf9; border: 1px solid #efe6da; border-radius: 20px;
  padding: 32px 24px; text-align: center;
  box-shadow: 0 18px 50px rgba(120, 90, 50, .12);
}
.avatar {
  width: 92px; height: 92px; margin: 0 auto 14px; border-radius: 50%;
  object-fit: cover; object-position: center 15%; display: block;
}
.avatar.small { width: 40px; height: 40px; margin: 0; font-size: 18px; }
h1 { margin: 0; font-size: 26px; }
.role { margin: 4px 0 0; color: #8d8172; font-size: 14px; }
.intro { margin: 16px 0 22px; color: #4d4338; line-height: 1.5; }
.btn {
  display: block !important; position: relative; overflow: hidden;
  width: 100%; margin: 10px 0; padding: 14px;
  border: 0; border-radius: 12px; font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; color: #fff;
}
.btn::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  animation: shine 2.8s ease-in-out infinite;
}
@keyframes shine {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}
.wa { background: #25d366; }
.tg { background: #2aabee; }
.chat {
  background: linear-gradient(100deg, #ff4fa3, #b44bff);
  margin-top: 18px;
  box-shadow: 0 8px 22px rgba(180, 75, 255, .35);
  animation: shake 2.8s ease-in-out infinite;
}
.arrow {
  display: inline-block;
  animation: nudge 2.8s ease-in-out infinite;
}
@keyframes nudge {
  0%, 58%, 100% { transform: translateX(0); }
  68% { transform: translateX(5px); }
  78% { transform: translateX(0); }
}
@keyframes shake {
  0%, 58%, 100% { transform: translateX(0); }
  63% { transform: translateX(-3px) rotate(-.6deg); }
  68% { transform: translateX(3px) rotate(.6deg); }
  73% { transform: translateX(-2px); }
  78% { transform: translateX(2px); }
  83% { transform: translateX(0); }
}
.chatbox {
  position: fixed; inset: 0; z-index: 10; background: #0d1117;
  display: flex; flex-direction: column;
}
.chatbox[hidden] { display: none; }
.chatbox header {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid #2b3340; background: #161b22;
}
.chatbox header span { display: block; color: #9fb0c7; font-size: 12px; }
.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; line-height: 1.4; word-wrap: break-word; }
.bubble.visitor { align-self: flex-end; background: #6ea8fe; color: #0d1117; border-bottom-right-radius: 4px; }
.bubble.agent { align-self: flex-start; background: #1f2630; border-bottom-left-radius: 4px; }
form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #2b3340; background: #161b22; }
input { flex: 1; padding: 12px 14px; border-radius: 12px; border: 1px solid #2b3340; background: #0d1117; color: #e8edf5; font-size: 16px; }
form button { padding: 12px 16px; border: 0; border-radius: 12px; background: #6ea8fe; color: #0d1117; font-weight: 700; cursor: pointer; }