:root {
  --grass: #7ec850;
  --grass-dark: #5aa832;
  --sky1: #8fd3ff;
  --sky2: #c9f0ff;
  --sun: #ffd23f;
  --ringo: #3a6b3a;
  --ringo-bubble: #e8f3e0;
  --ringo-ink: #24451f;
  --fact: #ff5aa0;
  --fact2: #ffe14d;
  --ink: #2b2b3a;
  --card: #fffdf7;
  --shadow: 0 8px 0 rgba(0, 0, 0, 0.12), 0 14px 26px rgba(40, 40, 60, 0.18);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Fredoka", system-ui, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 42%, #d9f6b8 60%, var(--grass) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ---- sky decorations ---- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sun { position: absolute; top: 24px; right: 40px; font-size: 64px; filter: drop-shadow(0 0 18px #ffe98a); animation: bob 5s ease-in-out infinite; }
.cloud { position: absolute; width: 150px; height: 46px; background: #fff; border-radius: 50px; opacity: 0.85; filter: blur(0.3px); }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 66px; height: 66px; top: -26px; left: 22px; }
.cloud::after { width: 46px; height: 46px; top: -16px; left: 82px; }
.c1 { top: 70px; left: -160px; animation: drift 46s linear infinite; }
.c2 { top: 150px; left: -160px; transform: scale(0.7); animation: drift 63s linear infinite; }
.c3 { top: 40px; left: -160px; transform: scale(0.9); animation: drift 78s linear infinite; }
@keyframes drift { to { left: 115vw; } }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* ---- hero ---- */
.hero { position: relative; z-index: 1; text-align: center; padding: 30px 16px 8px; }
.bus { font-size: 68px; animation: jiggle 3s ease-in-out infinite; }
@keyframes jiggle { 0%,100% { transform: translateX(-6px) rotate(-2deg); } 50% { transform: translateX(6px) rotate(2deg); } }
.hero h1 {
  font-family: "Baloo 2", cursive; font-weight: 800; font-size: clamp(46px, 9vw, 86px);
  margin: 0; line-height: 0.95; letter-spacing: 1px;
  text-shadow: 0 3px 0 #fff, 0 6px 0 rgba(0,0,0,0.12);
}
.hero h1 .hey { color: #ff5aa0; }
.hero h1 .ringo { color: #2f7bd6; }
.hero h1 .spark { font-size: 0.5em; vertical-align: super; }
.jingle { font-family: "Caveat", cursive; font-size: clamp(20px, 3.4vw, 28px); color: #2c5a8f; margin: 6px 0 10px; }
.sub { font-size: clamp(15px, 2.2vw, 18px); color: #34503a; margin: 0 auto; max-width: 620px; font-weight: 500; }

/* ---- chat stage ---- */
.stage { position: relative; z-index: 1; max-width: 760px; margin: 8px auto 0; padding: 10px 14px 30px; }
.chat { display: flex; flex-direction: column; gap: 18px; margin-bottom: 16px; min-height: 120px; }

.row { display: flex; gap: 10px; align-items: flex-end; animation: pop 0.35s cubic-bezier(0.2, 1.4, 0.5, 1); }
.row.user { flex-direction: row-reverse; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } }

.avatar {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 28px; background: #fff; box-shadow: var(--shadow); border: 3px solid #fff;
}
.avatar.ringo { background: #dfeada; }
.avatar.fact { background: linear-gradient(135deg, var(--fact) 0%, #ff8ac0 100%); }
.avatar.user { background: #cfe9ff; }

.bubble {
  position: relative; max-width: 78%; padding: 14px 18px; border-radius: 22px;
  box-shadow: var(--shadow); font-size: 16px; line-height: 1.5; font-weight: 500;
}
.bubble .who { font-family: "Baloo 2", cursive; font-weight: 800; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.8; margin-bottom: 3px; display: block; }

.bubble.ringo { background: var(--ringo-bubble); color: var(--ringo-ink); border-bottom-left-radius: 6px; border: 2px solid #bcd8ab; }
.bubble.ringo .who { color: var(--ringo); }

.bubble.fact {
  background: linear-gradient(180deg, #fffef4 0%, #fff7dd 100%);
  border: 3px dashed var(--fact); border-bottom-left-radius: 6px; color: #6a2340;
}
.bubble.fact .who { color: var(--fact); }
.bubble.fact strong { color: #d6156e; }

.bubble.user { background: linear-gradient(135deg, #4aa3ff 0%, #2f7bd6 100%); color: #fff; border-bottom-right-radius: 6px; }

.stamp {
  display: inline-block; margin-top: 10px; font-family: "Baloo 2", cursive; font-weight: 800;
  font-size: 12.5px; letter-spacing: 0.5px; color: #b3123f; border: 2.5px solid #e0356e;
  padding: 3px 10px; border-radius: 8px; transform: rotate(-3deg); background: #fff0f5;
  box-shadow: 0 2px 0 rgba(224, 53, 110, 0.3);
}
.stamp::before { content: "📌 AKTE · "; }

/* typing dots */
.typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.typing i { width: 9px; height: 9px; background: currentColor; border-radius: 50%; opacity: 0.5; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; }
.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } }

/* ---- chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 14px; }
.chip {
  font-family: "Fredoka", sans-serif; font-weight: 500; font-size: 14px; cursor: pointer;
  background: #fff; color: #2c5a8f; border: 2.5px solid #ffd23f; border-radius: 999px;
  padding: 8px 14px; box-shadow: 0 4px 0 rgba(0,0,0,0.1); transition: transform 0.12s, box-shadow 0.12s;
}
.chip:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.12); }
.chip:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.12); }

/* ---- composer ---- */
.composer { display: flex; gap: 10px; position: sticky; bottom: 12px; }
.composer input {
  flex: 1; font-family: "Fredoka", sans-serif; font-size: 16px; padding: 15px 20px;
  border-radius: 999px; border: 3px solid #fff; box-shadow: var(--shadow); outline: none; background: #fff;
}
.composer input:focus { border-color: #ffd23f; }
.composer button {
  font-family: "Baloo 2", cursive; font-weight: 800; font-size: 16px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #ff5aa0 0%, #ff8ac0 100%); border: none; border-radius: 999px;
  padding: 0 22px; box-shadow: 0 5px 0 #d6156e; transition: transform 0.1s, box-shadow 0.1s; white-space: nowrap;
}
.composer button:hover { transform: translateY(-1px); }
.composer button:active { transform: translateY(3px); box-shadow: 0 2px 0 #d6156e; }
.composer button:disabled { opacity: 0.55; cursor: default; box-shadow: 0 5px 0 #d6156e; transform: none; }

/* ---- footer ---- */
.foot { position: relative; z-index: 1; text-align: center; padding: 8px 20px 30px; }
.foot p { max-width: 660px; margin: 0 auto; font-size: 12.5px; line-height: 1.5; color: #2f4a30; opacity: 0.85; }

@media (max-width: 560px) {
  .bubble { max-width: 82%; font-size: 15px; }
  .avatar { width: 42px; height: 42px; font-size: 22px; }
}