* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Host Grotesk', system-ui, sans-serif;
  background: #fee101;
  color: #322f2f;
  -webkit-font-smoothing: antialiased;
}
::placeholder { color: #6f6c6c; }

.page { position: relative; height: 100vh; width: 100%; overflow: hidden; }

/* ---------- canvas + floating cards ---------- */
.canvas { position: absolute; inset: 0; overflow: hidden; }

.frag { position: absolute; width: 160px; will-change: transform; z-index: 2; }
.frag:hover { z-index: 15; }
.rotor { transition: transform .45s cubic-bezier(.34,1.3,.5,1); transform-origin: 50% 50%; }
.card {
  width: 160px; height: 90px; background: #fff;
  border: 1.5px solid #322f2f; box-shadow: -4px 4px 0 #322f2f;
  cursor: grab; touch-action: none;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.card:hover { transform: scale(1.09); box-shadow: -8px 8px 0 #322f2f; }

/* ---------- header ---------- */
.topbar {
  position: absolute; top: 0; left: 0; width: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 18px 48px; background: #fee101;
  border-bottom: 1.5px solid #322f2f;
  pointer-events: none; z-index: 18;
}
.title {
  margin: 0; font-weight: 800; font-size: clamp(28px, 4.6vw, 58px);
  line-height: .9; letter-spacing: -.02em; white-space: nowrap;
}

/* ---------- big card overlay ---------- */
.overlay { display: none; position: absolute; inset: 0; z-index: 34; }
.overlay.open { display: block; }
.bigcard {
  position: absolute; left: 50%; top: 43.5%; transform: translate(-50%, -50%);
  width: min(46.5vw, 915px); height: min(26.1vw, 515px);
  background: #fff; border: 1.5px solid #322f2f; box-shadow: -8px 8px 0 #322f2f;
  animation: pop .3s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes pop { from { opacity: 0; transform: translate(-50%,-50%) scale(.96); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border: 1.5px solid #322f2f; background: #fff;
  display: grid; place-items: center; cursor: pointer;
  font-size: 17px; line-height: 1; color: #322f2f;
}
.close:hover { background: #cdefff; }

/* ---------- chat ---------- */
.chat {
  position: absolute; left: 50%; bottom: 6.3vh; transform: translateX(-50%);
  width: min(90vw, 1214px); z-index: 30;
}
.chat-band {
  background: #cdefff; border: 1.5px solid #322f2f; box-shadow: -8px 8px 0 #322f2f;
  padding: 18px 20px;
}

.messages {
  height: 104px; overflow-y: auto;
  margin: 0 18px 14px 16px; padding-right: 26px;
}
.messages::-webkit-scrollbar { width: 12px; }
.messages::-webkit-scrollbar-track { background: #cce8f5; border-radius: 0; margin: 2px 0; }
.messages::-webkit-scrollbar-thumb { background: #322f2f; border-radius: 0; }

.msg { display: flex; margin-bottom: 10px; }
.msg .bubble { max-width: 64%; font-size: 13.5px; line-height: 1.45; color: #322f2f; }
.msg.ai { justify-content: flex-start; }
.msg.user { justify-content: flex-end; }
.msg.ai .bubble { font-weight: 500; text-align: left; }
.msg.user .bubble { font-weight: 600; text-align: right; }

.typing { display: flex; gap: 5px; align-items: center; }
.typing span {
  width: 7px; height: 7px; background: #322f2f;
  animation: blink 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.inputfield {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1.5px solid #322f2f;
  padding: 7px 10px 7px 16px; height: 46px;
}
.inputfield input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: 'Host Grotesk', sans-serif; font-weight: 500; font-size: 14px; color: #322f2f;
}
.send {
  flex: none; width: 27px; height: 27px; border: none; background: transparent;
  padding: 0; display: grid; place-items: center; cursor: pointer;
  transition: transform .12s;
}
.send:hover { transform: scale(1.1); }
.send:active { transform: scale(.92); }

/* glyph toggle: enter by default, refresh while chatting */
.send .ic-refresh { display: none; }
.send.refresh .ic-enter { display: none; }
.send.refresh .ic-refresh { display: block; }