/* ─────────────  Reset & base  ───────────── */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-touch-callout:none;
}
html,body{
  margin:0;padding:0;
  width:100%;
  min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{
  min-height:100vh;
  min-height:100dvh;
  background:linear-gradient(135deg,#0b1020 0%,#1a1240 50%,#2a0a3a 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  touch-action:manipulation;
}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;-webkit-appearance:none;appearance:none}
input,textarea,select{font:inherit;-webkit-appearance:none;appearance:none}
/* iOS input zoom blokirovkasi: font-size >= 16px */

/* ─────────────  Background orbs  ───────────── */
.bg-orbs{display:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;animation:float 18s ease-in-out infinite}
.orb-1{width:380px;height:380px;background:#7c3aff;top:-80px;left:-80px}
.orb-2{width:340px;height:340px;background:#ff3aa1;bottom:-100px;right:-60px;animation-delay:-6s}
.orb-3{width:280px;height:280px;background:#3ad6ff;top:40%;left:55%;animation-delay:-12s}
@keyframes float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.1)}
}

/* ─────────────  Glass  ───────────── */
.glass{
  background:rgba(15,12,35,.42);
  -webkit-backdrop-filter:blur(60px) saturate(180%);
  backdrop-filter:blur(60px) saturate(180%);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
/* Eski brauzerlar (backdrop-filter yo'q) uchun fallback */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(20,15,45,.85)}
}

/* ─────────────  Layout  ───────────── */
.app{
  position:relative;z-index:1;
  height:100vh;
  height:100dvh;
  display:flex;align-items:stretch;justify-content:center;
  padding:max(env(safe-area-inset-top,0px),12px)
          max(env(safe-area-inset-right,0px),12px)
          max(env(safe-area-inset-bottom,0px),12px)
          max(env(safe-area-inset-left,0px),12px);
  overflow:hidden;
}
.view{display:none;width:100%;max-width:480px;flex-direction:column;min-height:0}
.view.active{display:flex;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─────────────  Chat view  ───────────── */
#view-chat{height:100%;min-height:0}
#view-chat.active{display:flex}
.chat-header{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:22px 22px 0 0;
  flex-shrink:0;
}
.back-btn{font-size:26px;width:36px;height:36px;display:grid;place-items:center;color:#9bd1ff;flex-shrink:0}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#3a3a5a;border:2px solid rgba(255,255,255,.2);flex-shrink:0}
.who{flex:1;min-width:0}
.name{font-weight:600;font-size:clamp(14px,4vw,16px);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:clamp(11px,3vw,12px);color:#8ad07a}
.header-icons{flex-shrink:0}
.header-icons .dot{width:8px;height:8px;border-radius:50%;background:#41d870;display:inline-block;box-shadow:0 0 12px #41d870}

.chat-body{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:18px 14px 12px;
  display:flex;flex-direction:column;gap:10px;
  background:rgba(255,255,255,.03);
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.08);
  scroll-behavior:smooth;
  min-height:0;
  overscroll-behavior:contain;
}
.chat-body::-webkit-scrollbar{width:6px}
.chat-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}

.bubble{
  max-width:80%;padding:10px 14px;border-radius:18px;
  font-size:clamp(14px,3.8vw,15px);line-height:1.45;
  word-wrap:break-word;overflow-wrap:break-word;word-break:break-word;
  animation:bubbleIn .35s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
@keyframes bubbleIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.bubble.bot{
  align-self:flex-start;
  background:rgba(30,24,55,.28);
  backdrop-filter:blur(40px) saturate(160%);
  -webkit-backdrop-filter:blur(40px) saturate(160%);
  border:1px solid rgba(255,255,255,.18);
  border-bottom-left-radius:6px;
  color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.bubble.user{
  align-self:flex-end;
  background:rgba(30,24,55,.28);
  backdrop-filter:blur(40px) saturate(160%);
  -webkit-backdrop-filter:blur(40px) saturate(160%);
  border:1px solid rgba(255,255,255,.18);
  border-bottom-right-radius:6px;
  color:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
.bubble.user.send{animation:sendUp .45s cubic-bezier(.2,.8,.2,1)}
@keyframes sendUp{from{opacity:0;transform:translateY(40px) scale(.9)}to{opacity:1;transform:none}}

.cursor{display:inline-block;width:2px;height:1.05em;background:#fff;vertical-align:-2px;margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

.typing{display:flex;gap:4px;padding:12px 14px}
.typing span{width:7px;height:7px;border-radius:50%;background:#fff;opacity:.6;animation:typ 1.2s infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* options */
.options-bar{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 14px max(14px,env(safe-area-inset-bottom,14px));
  background:rgba(255,255,255,.06);
  border-radius:0 0 22px 22px;
  border:1px solid rgba(255,255,255,.12);
  border-top:none;
  min-height:60px;
  flex-shrink:0;
  max-height:45vh;
  max-height:45dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.opt-btn{
  padding:13px 16px;border-radius:14px;
  background:rgba(30,24,55,.28);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:clamp(14px,3.8vw,15px);font-weight:500;
  text-align:left;
  min-height:44px;
  transition:transform .15s,background .2s;
  -webkit-backdrop-filter:blur(40px) saturate(160%);
  backdrop-filter:blur(40px) saturate(160%);
  box-shadow:0 6px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.18);
  animation:bubbleIn .3s ease;
}
.opt-btn:hover{background:rgba(30,24,55,.65)}
.opt-btn:active{transform:scale(.97)}
.opt-btn:disabled{opacity:.5;cursor:not-allowed}

.cta-btn{
  margin:8px 14px 14px;
  padding:14px;border-radius:14px;
  background:rgba(30,24,55,.28);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(40px) saturate(160%);
  backdrop-filter:blur(40px) saturate(160%);
  color:#fff;font-weight:700;font-size:clamp(15px,4vw,16px);
  min-height:48px;
  box-shadow:0 6px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.22);
  animation:bubbleIn .4s ease;
}
.cta-btn:active{transform:scale(.98)}

/* ─────────────  Wheel  ───────────── */
.wheel-wrap{margin:auto;padding:24px 20px;border-radius:24px;text-align:center;width:100%}
.wheel-title{margin:0 0 4px;font-size:clamp(18px,5vw,22px)}
.wheel-sub{margin:0 0 18px;color:rgba(255,255,255,.7);font-size:clamp(12px,3.5vw,14px)}
.wheel-stage{position:relative;width:min(380px,82vw);max-width:100%;aspect-ratio:1;margin:0 auto 18px}
/* aspect-ratio yo'q eski brauzerlar uchun fallback */
@supports not (aspect-ratio:1){
  .wheel-stage::before{content:"";display:block;padding-top:100%}
  .wheel-stage > *{position:absolute;top:0;left:0;width:100%;height:100%}
}
.wheel-stage canvas{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,.1),0 30px 60px rgba(0,0,0,.5)}
.wheel-pointer{
  position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;
  border-top:30px solid #ff3aa1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));z-index:2;
}
.wheel-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#fff,#dcdcff);color:#3a1e8a;
  font-weight:800;font-size:14px;display:grid;place-items:center;
  box-shadow:0 6px 16px rgba(0,0,0,.4);
}
.btn-primary{
  display:block;width:100%;padding:14px 20px;border-radius:14px;
  background:rgba(30,24,55,.28);
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(40px) saturate(160%);
  backdrop-filter:blur(40px) saturate(160%);
  color:#fff;font-weight:700;font-size:clamp(15px,4vw,16px);
  min-height:48px;
  box-shadow:0 6px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .15s;
}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:.6;cursor:not-allowed}

.prize-box{margin-top:18px;padding:16px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);animation:bubbleIn .5s ease}
.prize-label{font-size:13px;color:rgba(255,255,255,.7);margin-bottom:4px}
.prize-value{font-size:clamp(28px,9vw,42px);font-weight:800;background:linear-gradient(135deg,#ffd84d,#ff5be4);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.hidden{display:none!important}

/* ─────────────  Form  ───────────── */
.form-wrap{margin:auto;padding:28px 22px;border-radius:24px;width:100%;text-align:center}
.form-icon{font-size:42px;margin-bottom:8px}
.form-wrap h2{margin:0 0 4px;font-size:clamp(18px,5vw,22px)}
.muted{color:rgba(255,255,255,.7);font-size:clamp(12px,3.5vw,14px);margin:0 0 18px}
.form{display:flex;flex-direction:column;gap:14px;text-align:left}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:rgba(255,255,255,.75)}
.form input{
  padding:13px 14px;border-radius:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:#fff;outline:none;
  font-size:16px; /* iOS zoom blokirovkasi — 16px+ shart */
  min-height:44px;
  width:100%;
  transition:border-color .2s,background .2s;
}
.form input::placeholder{color:rgba(255,255,255,.4)}
.form input:focus{border-color:#ff5be4;background:rgba(255,255,255,.12)}

/* ─────────────  Done  ───────────── */
.done-wrap{margin:auto;padding:32px 24px;border-radius:24px;text-align:center;width:100%}
.check{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#41d870,#3ad6ff);margin:0 auto 14px;display:grid;place-items:center;font-size:42px;font-weight:800;color:#fff;box-shadow:0 14px 36px rgba(65,216,112,.5);animation:pop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.done-prize{margin-top:18px;padding:14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.done-prize b{font-size:clamp(18px,5vw,24px);background:linear-gradient(135deg,#ffd84d,#ff5be4);-webkit-background-clip:text;background-clip:text;color:transparent}
.channel-btn{display:inline-block;margin-top:18px;padding:14px 24px;border-radius:14px;background:rgba(30,24,55,.28);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(40px) saturate(160%);backdrop-filter:blur(40px) saturate(160%);color:#fff;text-decoration:none;font-weight:600;font-size:16px;box-shadow:0 6px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.22);transition:transform .15s ease, box-shadow .15s ease}
.channel-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(34,158,217,.45)}
.channel-btn.hidden{display:none}

/* ─────────────  Responsive breakpoints  ───────────── */

/* Juda kichik telefonlar (iPhone SE 1, eski Android, 320-359px) */
@media (max-width:359px){
  .app{padding:8px}
  .chat-header{padding:10px 10px;gap:8px}
  .avatar{width:36px;height:36px}
  .back-btn{width:30px;height:30px;font-size:22px}
  .chat-body{padding:12px 10px 8px}
  .options-bar{padding:8px 10px max(10px,env(safe-area-inset-bottom,10px))}
  .opt-btn{padding:11px 12px;font-size:13.5px;min-height:42px}
  .bubble{font-size:13.5px;padding:9px 12px;max-width:85%}
  .form-wrap,.wheel-wrap,.done-wrap{padding:18px 14px}
  .wheel-center{width:50px;height:50px;font-size:11px}
  .check{width:64px;height:64px;font-size:34px}
  .form-icon{font-size:34px}
}

/* Kichik telefonlar (360-380px — Galaxy A, Redmi 9A, Honor kichik) */
@media (min-width:360px) and (max-width:380px){
  .opt-btn{font-size:14px;padding:12px 14px}
  .bubble{font-size:14px}
  .wheel-center{width:54px;height:54px;font-size:12px}
}

/* Standart telefonlar (iPhone 12-15, Galaxy S, Pixel — 380-480px) */
/* default styles already optimal */

/* Katta telefonlar / kichik tabletlar (Pro Max, Ultra, foldable yopiq) */
@media (min-width:481px) and (max-width:599px){
  .view{max-width:520px}
}

/* Tablet/laptop boshlanishi */
@media (min-width:600px){
  .app{padding:32px 16px}
  #view-chat{min-height:auto;height:88vh;height:88dvh;max-height:780px}
  .chat-header{border-radius:22px 22px 0 0}
  .view{max-width:520px}
}

/* Katta tablet/laptop */
@media (min-width:1024px){
  .view{max-width:560px}
  #view-chat{max-height:820px}
}

/* Foldable ochilgan / ultra-keng ekran */
@media (min-width:1440px){
  .view{max-width:600px}
}

/* Past balandlik (landscape telefon, kichik laptop) */
@media (max-height:560px){
  .chat-header{padding:8px 12px}
  .avatar{width:36px;height:36px}
  .options-bar{max-height:55vh;max-height:55dvh}
  .form-wrap,.wheel-wrap,.done-wrap{padding:14px 16px}
  .wheel-stage{width:min(260px,55vh)}
  .check{width:60px;height:60px;font-size:32px}
}

/* Landscape telefon */
@media (orientation:landscape) and (max-height:480px){
  .wheel-stage{width:min(220px,55vh)}
  .form-icon{font-size:28px;margin-bottom:4px}
}

/* Hover yo'q (touch) qurilmalar — hover effekt o'chirilsin */
@media (hover:none){
  .opt-btn:hover{background:rgba(255,255,255,.1)}
}

/* Reduce motion (accessibility) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* High DPI / retina */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){
  .glass{border-width:.5px}
}

.skip-btn{background:rgba(255,255,255,.04);color:rgba(255,255,255,.65);font-style:italic}
.skip-btn:hover{background:rgba(255,255,255,.1);color:#fff}

/* Question image bubble */
.bubble.bubble-image{
  padding:4px !important;
  background:rgba(255,255,255,.06) !important;
  max-width:min(78%, 320px);
  overflow:hidden;
}
.bubble.bubble-image img,
.bubble.bubble-image video{
  display:block;
  width:100%;
  height:auto;
  max-height:260px;
  object-fit:cover;
  border-radius:14px;
}