:root{
  /* Theme: Candyman EDGE (chocolate brown + gold, logo ke rang) */
  --brown:#4a2410; --brown-deep:#2e1408; --gold:#f5c542; --gold-soft:#fdeab4;
  --gold-hi:#ffd978; --cream:#f6efe3; --text:#1E1A12; --muted:#6b6256;
  --good:#2e8b3d; --bad:#b3261e; --green:#128c7e;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overscroll-behavior:none}
body{
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);
  background:radial-gradient(circle at 70% 20%,#8a4a1c 0%,#4a2410 50%,#241006 100%);
  display:flex;align-items:center;justify-content:center;padding:16px;
}

/* Splash */
.splash{
  position:fixed;inset:0;z-index:1000;
  background:radial-gradient(circle at 70% 20%,#8a4a1c 0%,#4a2410 50%,#241006 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .6s ease,visibility .6s ease;
}
.splash.hide{opacity:0;visibility:hidden}
.splash .logo-img{width:min(46vw,200px);height:auto;border-radius:50%;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));animation:logoIn .9s cubic-bezier(.2,1.2,.4,1) both}
.splash .tagline{color:var(--gold-hi);font-weight:800;letter-spacing:2px;font-size:13px;animation:fadeUp .8s .5s ease both}
.splash .loader{width:140px;height:5px;border-radius:5px;background:rgba(255,255,255,.2);overflow:hidden}
.splash .loader i{display:block;height:100%;width:100%;background:var(--gold);transform:translateX(-100%);animation:load 2s .2s ease-out forwards}
@keyframes logoIn{from{transform:scale(.55) rotate(-4deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes fadeUp{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes load{to{transform:translateX(0)}}

/* Chat window */
.phone{
  position:relative;width:100%;max-width:420px;height:min(92vh,780px);background:var(--cream);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.chat-header{
  background:linear-gradient(90deg,var(--brown-deep),var(--brown));color:#fff;
  padding:10px 14px;display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--gold);flex-shrink:0;
}
.avatar{width:50px;height:50px;border-radius:50%;flex-shrink:0;overflow:hidden;border:2px solid var(--gold)}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.hinfo{flex:1;min-width:0}
.hname{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hstatus{font-size:12px;color:var(--gold-hi)}
.hbtn{background:none;border:none;font-size:20px;cursor:pointer;color:#fff}
.hbtn[hidden]{display:none}
.reset-btn{border:1px solid rgba(255,255,255,.7);background:transparent;color:#fff;border-radius:14px;padding:4px 10px;font-size:12px;cursor:pointer;white-space:nowrap}
.reset-btn:hover{background:rgba(255,255,255,.18)}

/* Chat screen: header aur input ke beech ka hissa */
.chat-screen{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;background:#3a1b0b}
.chat-body{
  flex:1;min-height:0;overflow-y:auto;padding:14px 12px 8px;display:flex;flex-direction:column;gap:6px;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
  background:linear-gradient(rgba(58,27,11,.55),rgba(58,27,11,.55)),#3a1b0b;
}
.chat-body::-webkit-scrollbar{display:none;width:0;height:0}
.day-chip{align-self:center;background:rgba(255,255,255,.92);color:var(--muted);font-size:12px;padding:4px 12px;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.15);margin-bottom:4px}
.row{display:flex;flex-direction:column;max-width:86%}
.row.bot{align-self:flex-start;align-items:flex-start}
.row.user{align-self:flex-end;align-items:flex-end}
.bubble{padding:7px 10px 5px;border-radius:10px;font-size:14.5px;line-height:1.4;box-shadow:0 1px 1.5px rgba(0,0,0,.25);word-wrap:break-word;white-space:pre-line;animation:pop .18s ease-out}
.bot .bubble{background:#fff;border-top-left-radius:2px}
.user .bubble{background:var(--gold-soft);border-top-right-radius:2px}
.bubble.good{border-left:4px solid var(--good)}
.bubble.bad{border-left:4px solid var(--bad)}
/* Roz ka daily / broadcast message alag dikhe */
.bubble.daily,.bubble.broadcast{background:linear-gradient(#fff8e1,#fff);border-left:4px solid var(--gold)}
.tag{display:block;font-size:11px;font-weight:700;color:#9a6a00;margin-bottom:3px;letter-spacing:.4px}
.meta{text-align:right;font-size:10.5px;color:var(--muted);margin-top:2px}
.user .meta{color:var(--brown)}

.btns{display:flex;flex-direction:column;gap:4px;margin-top:4px;width:100%;min-width:200px}
.qbtn{background:#fff;color:var(--brown);border:1.5px solid var(--gold);border-radius:10px;padding:9px 12px;font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:0 1px 1.5px rgba(0,0,0,.2)}
.qbtn:hover{background:var(--gold-soft)}
.qbtn:disabled{color:var(--muted);cursor:default;background:#f1ece0;border-color:#e2d8c0}

.typing{align-self:flex-start;background:#fff;border-radius:10px;border-top-left-radius:2px;padding:10px 14px;display:flex;gap:4px;box-shadow:0 1px 1.5px rgba(0,0,0,.2)}
.typing span{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:blink 1.2s infinite both}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}

.input-bar{background:#eadcc0;padding:8px 10px;display:flex;gap:8px;align-items:center;flex-shrink:0}
.input-bar input{flex:1;min-width:0;border:none;outline:none;border-radius:22px;padding:11px 16px;font-size:16px;background:#fff;color:var(--text)}
.input-bar input:disabled{background:#e4d8bf}
.send{width:44px;height:44px;border:none;border-radius:50%;cursor:pointer;background:var(--brown);color:#fff;font-size:20px}
.send:hover{background:var(--brown-deep)}
.send:disabled{background:#cdbf9f;cursor:default}
.footer-note{background:var(--brown-deep);color:var(--gold-hi);font-size:10.5px;text-align:center;padding:5px 8px;flex-shrink:0}

@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* Mobile: chat poori screen par; height keyboard ke hisaab se chat.js (--app-h) set karta hai */
@media (max-width:900px){
  html,body{position:fixed;inset:0;width:100%;overflow:hidden}
  body{padding:0;display:block}
  .phone{position:fixed;left:0;width:100%;max-width:100%;top:var(--app-top,0px);height:var(--app-h,100dvh);border-radius:0}
}

/* Language list: "Options ... click here" aur sheet */
.listdiv{border-top:1px solid #eee;margin:8px -10px 0;text-align:center;padding-top:8px}
.listbtn{color:var(--green);font-weight:600;cursor:pointer}
.listbtn.used{color:#9aa5ab;cursor:default}
.sheet-wrap{position:absolute;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:20}
.sheet-wrap.show{display:flex}
.sheet{background:#fff;width:90%;max-width:360px;max-height:84%;display:flex;flex-direction:column;border-radius:18px;padding:16px 0 14px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.sheet-head{display:flex;align-items:flex-start;gap:12px;padding:0 16px 12px;border-bottom:1px solid #eee}
.sh-title{flex:1;font-size:17px;font-weight:700;color:#111;line-height:1.3}
.sh-x{flex-shrink:0;width:32px;height:32px;border:none;border-radius:50%;background:#f0f2f5;color:#333;font-size:16px;cursor:pointer}
.sh-list{flex:1;overflow-y:auto;padding:8px 10px;scrollbar-width:none}
.sh-list::-webkit-scrollbar{display:none}
.opt{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 14px;margin:4px 0;cursor:pointer;font-size:15px;color:#111;border:1.5px solid transparent;border-radius:12px}
.opt:hover{background:#f5f5f5}
.radio{width:20px;height:20px;border:2px solid #9aa5ab;border-radius:50%;flex-shrink:0}
.opt.sel{background:#e7f6f3;border-color:var(--green);font-weight:600}
.opt.sel .radio{border-color:var(--green);background:radial-gradient(var(--green) 45%,#fff 50%)}
.sh-go{margin:10px 16px 0;padding:12px;border:none;border-radius:24px;background:var(--green);color:#fff;font-size:15px;font-weight:700;cursor:pointer}
.sh-go:disabled{background:#c5ccd1;cursor:not-allowed}

/* Install popup (app icon) */
.install-modal{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(36,16,6,.65);padding:18px}
.install-modal[hidden]{display:none}
.install-card{background:#fff;border-radius:20px;padding:22px 18px;width:100%;max-width:320px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.4);animation:pop .22s ease-out}
.install-ic{width:72px;height:72px;border-radius:18px;margin-bottom:8px}
.install-title{font-weight:800;color:var(--brown);font-size:19px;margin-bottom:6px}
.install-text{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:14px}
.install-actions{display:grid;gap:8px}
.install-actions .qbtn[hidden]{display:none}
.qbtn.gold{background:var(--gold);border-color:var(--gold);color:var(--brown)}

.hist-loader{align-self:center;color:#fff;font-size:12px;padding:4px 0}

/* Notification Allow screen: install popup se upar, chat ko dhak leti hai */
.notif-gate{position:absolute;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 70% 20%,#8a4a1c,#4a2410 55%,#241006);padding:18px;overflow-y:auto}
.notif-gate[hidden]{display:none}
.gate-card{background:#fff;border-radius:20px;padding:22px 18px;width:100%;max-width:340px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.4);margin:auto}
.gate-card .qbtn{width:100%}
.gate-link{background:none;border:none;color:var(--green);font-weight:600;font-size:13.5px;margin-top:12px;cursor:pointer;text-decoration:underline}
.gate-steps{text-align:left;white-space:pre-line;font-size:13px;line-height:1.5;color:#333;background:#f6efe3;border-radius:12px;padding:12px;margin-top:10px;max-height:240px;overflow-y:auto}
.gate-steps[hidden]{display:none}
.gate-text-warn{color:var(--bad)!important;font-weight:600}