:root{
  --red:#B3121C; --red-dark:#7A0B12; --gold:#F5C21B; --gold-light:#FFF3C4; --cream:#FFF8E1; --ink:#4A0A0E;
  --muted:#8A6E62; --shadow:0 1px 2px rgba(74,10,14,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI",Roboto,"Nirmala UI","Noto Sans Devanagari","Noto Naskh Arabic",Arial,sans-serif;
  min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(245,194,27,.28) 0, transparent 35%),
    radial-gradient(circle at 85% 85%, rgba(179,18,28,.6) 0, transparent 40%),
    radial-gradient(circle at 50% 50%, #6B0B14 0, #3D060C 100%);
  color:var(--ink);position:relative;overflow:hidden;
}
.deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ring{position:absolute;border-radius:50%;border:3px solid rgba(245,194,27,.35)}
.r1{width:420px;height:420px;left:-140px;top:-120px;box-shadow:0 0 0 22px rgba(245,194,27,.08)}
.r2{width:520px;height:520px;right:-190px;bottom:-200px;box-shadow:0 0 0 30px rgba(245,194,27,.08)}
.r3{width:260px;height:260px;right:6%;top:-90px;border-color:rgba(255,255,255,.14)}
.r4{width:200px;height:200px;left:5%;bottom:-70px;border-color:rgba(255,255,255,.14)}
.mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-90deg);font-size:120px;font-weight:900;letter-spacing:14px;color:rgba(245,194,27,.07);white-space:nowrap}
@media (max-width:700px){.mark,.ring{display:none}}

/* --app-h = the visible screen height, set by bot.js (shrinks while the phone keyboard is open) */
.phone{
  position:relative;z-index:2;width:100%;min-width:0;max-width:430px;
  height:100vh;height:100dvh;height:var(--app-h,100vh);max-height:860px;
  background:var(--gold-light);display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}
@media (max-width:480px){
  .phone{max-width:none;max-height:none;border-radius:0;box-shadow:none}
  /* notched phones: keep clear of the notch / rounded corners / home bar */
  .header{padding-top:max(10px,env(safe-area-inset-top));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right))}
  .inputbar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .footer{padding-bottom:max(6px,env(safe-area-inset-bottom))}
}

/* ------------------------------------------------------------------ header */
.header{background:linear-gradient(90deg,var(--red-dark),var(--red));color:#fff;padding:10px 6px 10px 14px;display:flex;align-items:center;gap:10px;border-bottom:3px solid var(--gold);position:relative;z-index:5}
.header picture{display:block;flex:0 0 44px;line-height:0}
.avatar{display:block;width:44px;height:44px;border-radius:50%;border:2px solid var(--gold);object-fit:cover;background:var(--red-dark);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hdr-title{flex:1;min-width:0}
.hdr-title h1{font-size:18px;letter-spacing:2px;color:var(--gold);line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-title small{display:block;font-size:12px;line-height:17px;color:#fff;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-title small.typing{color:var(--gold);opacity:1;font-style:italic}
.hdr-icon{width:38px;height:38px;flex:0 0 38px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer}
.hdr-icon:hover,.hdr-icon[aria-expanded="true"]{background:rgba(0,0,0,.2)}
.hdr-icon[hidden]{display:none}
.hdr-icon svg{width:21px;height:21px}
#soundBtn .ico-off,#soundBtn.muted .ico-on{display:none}
#soundBtn.muted .ico-off{display:block}
.menu-wrap{position:relative}
.menu{position:absolute;right:4px;top:44px;min-width:190px;padding:6px 0;background:#fff;border-radius:10px;border-top:3px solid var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.28);transform-origin:top right;animation:menuIn .14s ease-out}
.menu[hidden]{display:none}
.menu button{display:block;width:100%;border:0;background:none;text-align:left;padding:11px 20px;font:inherit;font-size:14.5px;font-weight:600;color:var(--red-dark);cursor:pointer}
.menu button:hover{background:var(--gold-light)}
/* "Install App" - gold button in the header, shown until the app is installed */
.hdr-install{display:none;align-items:center;gap:5px;flex:0 0 auto;border:0;border-radius:16px;padding:7px 12px;
  background:var(--gold);color:var(--red-dark);font:inherit;font-size:12.5px;font-weight:800;white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:background .15s,transform .1s}
.hdr-install.show{display:inline-flex}
.hdr-install:hover{background:#FFD23F}
.hdr-install:active{transform:scale(.95)}
.hdr-install svg{display:none;width:17px;height:17px}
/* very narrow phones: icon only, so the title keeps its room */
@media (max-width:340px){.hdr-install{padding:7px}.hdr-install span{display:none}.hdr-install svg{display:block}}
@keyframes menuIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.tip{display:none;padding:8px 12px;background:#FFF1C2;color:var(--red-dark);font-size:12.5px;border-bottom:2px solid var(--gold)}
.tip.show{display:block}

/* -------------------------------------------------------------- chat area */
.chat{
  flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 16px 14px;display:flex;flex-direction:column;
  background:
    radial-gradient(rgba(179,18,28,.10) 1.5px, transparent 1.6px) 0 0/22px 22px,
    radial-gradient(rgba(245,194,27,.28) 2px, transparent 2.1px) 11px 11px/22px 22px,
    var(--cream);
}

/* Date / info chips in the middle */
.chip{align-self:center;max-width:90%;margin:12px 0 4px;padding:4px 12px 5px;border-radius:12px;background:#fff;border:1px solid rgba(245,194,27,.8);color:var(--red-dark);font-size:12px;font-weight:700;line-height:1.35;text-align:center;box-shadow:var(--shadow)}
.chip.note{background:var(--gold-light);border-color:var(--gold);color:var(--ink);font-weight:400;margin-top:6px}

/* Message rows and bubbles */
.row{display:flex;margin-top:3px}
.row.first{margin-top:10px}
.row.bot{justify-content:flex-start}
.row.user{justify-content:flex-end}
.bubble{
  position:relative;max-width:84%;padding:7px 9px 9px 11px;border-radius:12px;
  font-size:14.5px;line-height:1.4;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;
  box-shadow:var(--shadow);
}
.row.bot .bubble{background:#fff;color:var(--ink)}
.row.user .bubble{background:var(--gold);color:var(--red-dark);font-weight:600}
.row.first.bot .bubble{border-top-left-radius:2px}
.row.first.user .bubble{border-top-right-radius:2px}
.row.first .bubble::before{content:"";position:absolute;top:0;width:8px;height:12px}
.row.first.bot .bubble::before{left:-7px;background:#fff;clip-path:polygon(0 0,100% 0,100% 100%)}
.row.first.user .bubble::before{right:-7px;background:var(--gold);clip-path:polygon(0 0,100% 0,0 100%)}
.bubble.error .text{color:var(--red)}
/* Urdu (right to left): time on the left, a little larger script */
.bubble[dir="rtl"]{font-size:15.5px;line-height:1.65}
.bubble[dir="rtl"] .meta{right:auto;left:8px}
.meta{direction:ltr}  /* "1:24 pm" reads the same in every language */
.hdr-title small{unicode-bidi:plaintext;text-align:left}
.bubble strong{font-weight:700;color:var(--red-dark)}
/* Opening message: gold outline, no tail */
.bubble.hello{border:1px solid #E0A800;border-radius:12px!important;padding:8px 10px 10px 12px}
.bubble.hello::before{display:none}
.spacer{display:inline-block;width:56px;height:1px}
.row.user .spacer{width:74px}
.meta{position:absolute;right:8px;bottom:3px;display:flex;align-items:center;gap:3px;font-size:11px;line-height:15px;font-weight:400;color:var(--muted);white-space:nowrap}
.row.user .meta{color:rgba(122,11,18,.7)}
.tick{display:inline-flex;color:rgba(122,11,18,.5)}
.tick.read{color:var(--red)}
.tick svg{height:11px;width:auto}
.tick svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Typing indicator */
.row.typing .bubble{padding:10px 13px}
.dots{display:inline-flex;gap:4px;align-items:center;height:14px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:dot 1.2s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}

/* Quick-reply buttons under a bot message */
.replies{align-self:flex-start;display:flex;flex-direction:column;gap:6px;width:min(84%,330px);margin-top:6px}
.reply{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border:2px solid var(--red);border-radius:10px;
  background:#fff;color:var(--red);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:.15s;
}
.reply::before{
  content:"";width:15px;height:15px;flex:0 0 15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.reply:hover{background:var(--red);color:#fff}
.reply.main{background:var(--gold);border-color:var(--gold);color:var(--red-dark)}
.reply.main:hover{background:#E0A800;border-color:#E0A800;color:var(--red-dark)}
.reply:disabled{opacity:.45;cursor:default;pointer-events:none}
.reply.picked:disabled{opacity:.85}

/* ---------------------------------------------------------- input bar */
.inputbar{display:flex;align-items:center;gap:8px;padding:10px;background:#FFF1C2;border-top:2px solid var(--gold)}
.inputbar input{flex:1;min-width:0;padding:11px 16px;border-radius:22px;border:2px solid var(--gold);font:inherit;font-size:16px;outline:none;color:var(--ink);background:#fff}
.inputbar input::placeholder{color:var(--muted)}
.inputbar input:focus{border-color:var(--red)}
.inputbar input:disabled{background:#f6efd8}
.send{width:44px;height:44px;flex:0 0 44px;border:0;border-radius:50%;background:var(--red);color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s,background .15s}
.send:hover{background:var(--red-dark)}
.send:active{transform:scale(.92)}
.send:disabled{opacity:.45;cursor:default;transform:none}
.send svg{width:21px;height:21px;margin-left:3px}
.footer{text-align:center;font-size:10px;padding:4px 6px 6px;background:#4A0710;color:var(--gold)}

/* ------------------------------------------------------ small phones (<=360px) */
@media (max-width:360px){
  .header{gap:8px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px;padding-left:max(10px,env(safe-area-inset-left))}
  .header picture{flex-basis:38px}
  .avatar{width:38px;height:38px}
  .hdr-title h1{font-size:16px;letter-spacing:1px;line-height:20px}
  .hdr-title small{font-size:11px}
  .hdr-icon{width:34px;height:34px;flex-basis:34px}
  .hdr-icon svg{width:19px;height:19px}
  .chat{padding:6px 11px 12px}
  .bubble{max-width:90%;font-size:14px}
  .replies{width:90%}
  .reply{padding:9px 8px;font-size:13.5px}
  .chip.note{font-size:11.5px}
  .inputbar{gap:6px;padding-top:8px;padding-bottom:8px}
  .inputbar input{padding:10px 13px}
  .send{width:42px;height:42px;flex-basis:42px}
}

/* --------------------------------------- short screens (phone in landscape) */
@media (max-height:500px){
  .header{padding-top:6px;padding-bottom:6px}
  .chip.note{display:none}
}

/* New bubbles pop in (history loaded after a refresh does not) */
.row,.replies{animation:msgIn .28s cubic-bezier(.2,.9,.3,1.2) both}
.row.bot,.replies{transform-origin:left top}
.row.user{transform-origin:right top}
.row.quiet{animation:none}
@keyframes msgIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

/* Chat window slides in when the splash goes away */
body.ready .phone{animation:phoneIn .55s cubic-bezier(.2,.9,.3,1) both}
@keyframes phoneIn{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ splash screen */
.splash{
  --display:Impact,Haettenschweiler,"Arial Narrow Bold","sans-serif-condensed","Roboto Condensed","Arial Black",sans-serif;
  --outline:#4A0710;
  position:fixed;inset:0;z-index:100;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:0 16px;
  background:linear-gradient(135deg,#E0481F 0%,#C42A1C 30%,#9E1019 58%,#5C0812 82%,#3D060C 100%);
  background-size:220% 220%;
  /* splashBg = slow colour drift; splashSafety = hide anyway after 7s if JS never runs */
  animation:splashBg 4s ease-in-out infinite alternate, splashSafety .4s 7s forwards;
  transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.splash.hide{opacity:0;transform:scale(1.06);visibility:hidden;pointer-events:none}

.splash-logo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:460px}
.splash-logo::before{ /* warm glow behind the badge */
  content:"";position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-220px 0 0 -220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,196,70,.45) 0,rgba(255,150,40,.16) 40%,transparent 68%);
  animation:glowPulse 2.4s ease-in-out infinite;
}
.splash-rays{
  position:absolute;left:50%;top:50%;width:780px;height:780px;margin:-390px 0 0 -390px;border-radius:50%;
  background:repeating-conic-gradient(rgba(255,214,102,.11) 0 9deg,transparent 9deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%);
  animation:fadeIn .8s ease .2s both, spin 30s linear infinite;
}
/* The REDFORCE logo: drops in, a light sweeps across the gold, then it floats gently */
.splash-emblem{position:relative;width:min(88vw,440px);animation:logoIn .8s cubic-bezier(.2,1.4,.4,1) .15s both}
.splash-img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.5));animation:logoFloat 2.6s ease-in-out 1s infinite}
.splash-emblem::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.8) 50%,transparent 62%) no-repeat;
  background-size:260% 100%;background-position:150% 0;
  -webkit-mask:url("../img/logo.webp") center/100% 100% no-repeat;mask:url("../img/logo.webp") center/100% 100% no-repeat;
  animation:shine 1.1s ease-in-out 1.05s both;
}
.splash-badge{
  position:relative;margin-top:8px;padding:2px 18px 0;
  background:#fff;color:var(--red);border:4px solid var(--gold);border-radius:10px;
  font-family:var(--display);font-weight:900;font-size:clamp(30px,8.5vw,54px);line-height:1.1;letter-spacing:1px;text-transform:uppercase;
  box-shadow:0 0 0 3px var(--outline),0 10px 22px rgba(0,0,0,.35);
  animation:badgeIn .55s cubic-bezier(.2,1.5,.45,1) .8s both;
}
.splash-tag{
  color:var(--gold);font-weight:800;font-size:13px;letter-spacing:4px;text-transform:uppercase;text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  animation:tagIn .7s ease 1.1s both;
}
.splash-tag .star{display:inline-block;animation:twinkle 1.2s ease-in-out 1.3s infinite}
.splash-tag .star:last-child{animation-delay:1.9s}
.splash-bar{width:140px;height:4px;border-radius:4px;background:rgba(255,255,255,.25);overflow:hidden;animation:fadeIn .4s ease .3s both}
.splash-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),#FF8A1F);transform-origin:left;animation:barFill 2.1s cubic-bezier(.4,0,.2,1) .35s both}

.spark{
  position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px 2px rgba(245,194,27,.7);opacity:0;
  animation:sparkUp 2.6s ease-in var(--d) infinite;
}

@keyframes splashBg{from{background-position:0% 0%}to{background-position:100% 100%}}
@keyframes splashSafety{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glowPulse{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes logoIn{0%{opacity:0;transform:scale(.35) rotate(-6deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes shine{from{background-position:150% 0}to{background-position:-60% 0}}
@keyframes badgeIn{from{opacity:0;transform:translateY(26px) scale(.6)}to{opacity:1;transform:none}}
@keyframes tagIn{from{opacity:0;letter-spacing:12px}to{opacity:1;letter-spacing:4px}}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.45) rotate(72deg);opacity:.6}}
@keyframes barFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sparkUp{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-100vh);opacity:0}}

@media (max-width:480px){.splash-tag{font-size:11.5px;letter-spacing:3px}}
/* landscape phones: logo + badge + tagline must fit in the height too */
@media (max-height:560px){
  .splash{gap:12px}
  .splash-emblem{width:min(88vw,440px,95vh)}
  .splash-badge{font-size:clamp(22px,7vh,40px);margin-top:4px}
}

/* Visitors who asked their device for less motion get a still splash and no pop-ins */
@media (prefers-reduced-motion:reduce){
  .splash{animation:splashSafety .4s 7s forwards}
  .splash *,.splash-logo::before,.splash-emblem::after{animation:none!important}
  .splash-emblem::after{display:none}
  .spark,.splash-rays{display:none}
  .row,.replies,.menu,body.ready .phone{animation:none}
}