:root{
  --accent:#f5b500;
  --gold:#ffd86b;
  --dark: #0b1020;
  --glass: rgba(255,255,255,0.06);
}

*{box-sizing:border-box;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;margin:0;padding:0}
html,body,#app{height:100%}
body{background:linear-gradient(180deg,#07102a,#091228);color:#fff;overflow-x:hidden}

.hero{position:relative;height:80vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#bgVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.25;pointer-events:none}

.genie-wrap{position:relative;z-index:6;pointer-events:none}
.genie{width:180px;height:auto;will-change:transform;animation:fly 8s ease-in-out infinite}

@keyframes fly{
  0%{transform:translateX(-60px) translateY(0)}
  50%{transform:translateX(60px) translateY(-12px)}
  100%{transform:translateX(-60px) translateY(0)}
}

.controls{position:relative;z-index:10;display:flex;flex-direction:column;gap:1rem;align-items:center}
.bar{display:flex;gap:.5rem;background:var(--glass);padding:.5rem;border-radius:12px;backdrop-filter: blur(6px)}
.bar select{background:rgba(255,255,255,0.08) !important;border:0;color:#fff;padding:.4rem;border-radius:8px}
.toggle{display:flex;align-items:center;gap:.4rem;color:#fff}

.options{display:flex;gap:1rem;align-items:center;justify-content:center}
.gold-cloud, .treasure, .cloud-btn{background:linear-gradient(180deg,var(--gold),var(--accent));border:none;padding:12px 18px;border-radius:24px;box-shadow:0 8px 20px rgba(0,0,0,0.4);cursor:pointer;font-weight:600}
.text-input{display:flex;gap:.5rem;align-items:center}
.text-input input{padding:.6rem;border-radius:8px;border:0;min-width:240px}

.clouds{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.cloud{position:absolute;opacity:.9;width:280px}
.cloud.c1{top:10%;left:-20%;animation:cloudmove 40s linear infinite}
.cloud.c2{top:25%;left:-30%;width:220px;animation:cloudmove 55s linear infinite}
.cloud.c3{top:45%;left:-10%;width:260px;animation:cloudmove 50s linear infinite}
.cloud.c4{top:60%;left:-25%;width:200px;animation:cloudmove 60s linear infinite}
.cloud.c5{top:75%;left:-15%;width:240px;animation:cloudmove 46s linear infinite}

@keyframes cloudmove{
  0%{transform:translateX(0)}
  100%{transform:translateX(160vw)}
}

.site-footer{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(0,0,0,0.35),transparent);padding:.6rem 1rem;display:flex;justify-content:center;gap:1rem;z-index:20}
.site-footer a{color:#fff;text-decoration:none;opacity:.9}

.gold-cloud:hover,.treasure:hover,.cloud-btn:hover{transform:translateY(-6px);transition:transform .2s ease}


/* GENIE CHAT UI */
.genie-chat-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 340px;
  z-index: 999999;
  font-family: 'Poppins', sans-serif;
}

.genie-chat-window {
  width: 100%;
  height: 460px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 25px rgba(0,0,0,0.4);
  overflow: hidden;
}

.genie-chat-header {
  padding: 12px;
  display: flex;
  align-items: center;
  background: #ffd700;
  border-bottom: 2px solid #000;
}

.genie-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.genie-title {
  font-size: 18px;
  font-weight: bold;
  color: #000;
}

.genie-chat-messages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.genie-msg {
  background: #ffffffd0;
  color: #000;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 80%;
  align-self: flex-start;
  animation: fadeIn 0.3s ease-in;
}

.user-msg {
  background: #8edfff;
  align-self: flex-end;
}

@keyframes fadeIn {
  from {opacity:0; transform: translateY(8px);}
  to {opacity:1; transform: translateY(0);}
}

.genie-chat-input {
  display: flex;
  padding: 10px;
  background: #000000aa;
}

#chatInput {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: none;
  outline: none;
}

#chatSendBtn {
  margin-left: 10px;
  padding: 8px 14px;
  background: #ffd700;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.genie-option-buttons {
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option-btn {
  background: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  border: 1px solid #ddd;
}