/* RapidNet Hybrid — Customer App */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#1d4ed8;--blue-lt:#dbeafe;--blue-dk:#1e3a8a;--teal:#0891b2;--teal-lt:#cffafe;
  --purple:#7c3aed;--purple-lt:#ede9fe;--green:#16a34a;--green-lt:#dcfce7;
  --orange:#ea580c;--orange-lt:#ffedd5;--red:#dc2626;--red-lt:#fee2e2;
  --gray:#64748b;--gray-lt:#f1f5f9;--gray-bd:#e2e8f0;--text:#0f172a;--text2:#475569;
  --bg:#f8fafc;--card:#fff;--radius:14px;--radius-sm:8px;
  --shadow:0 1px 3px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.05);
  --font:'Inter','Hind Siliguri',system-ui,sans-serif;
}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100dvh;overflow-x:hidden}
#app{min-height:100dvh;display:flex;flex-direction:column}
.boot-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;gap:12px;color:var(--gray)}
.boot-logo{font-size:56px;animation:breathe 1.5s infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* Landing */
.landing{background:linear-gradient(160deg,var(--blue-dk) 0%,#1d4ed8 55%,#2563eb 100%);min-height:100dvh;display:flex;flex-direction:column;padding:24px 16px 32px;gap:14px}
.landing-brand{text-align:center;padding:28px 0 18px;color:#fff}
.landing-brand .logo{font-size:52px;display:block;margin-bottom:10px}
.landing-brand h1{font-size:25px;font-weight:800;margin-bottom:4px}
.landing-brand p{opacity:.8;font-size:14px;font-family:'Hind Siliguri',sans-serif}
.entry-card{background:rgba(255,255,255,.12);backdrop-filter:blur(12px);border:1.5px solid rgba(255,255,255,.2);border-radius:var(--radius);padding:18px;cursor:pointer;transition:background .15s;display:flex;align-items:center;gap:14px;color:#fff}
.entry-card:active{background:rgba(255,255,255,.22)}
.entry-icon{font-size:36px;flex-shrink:0}
.entry-text h2{font-size:16px;font-weight:700;margin-bottom:2px}
.entry-text p{font-size:12px;opacity:.8;font-family:'Hind Siliguri',sans-serif;line-height:1.5}
.entry-arrow{margin-left:auto;font-size:18px;opacity:.5;flex-shrink:0}
.landing-foot{text-align:center;padding-top:4px}
.track-link{color:rgba(255,255,255,.65);font-size:13px;background:none;border:none;cursor:pointer;font-family:var(--font);text-decoration:underline}

/* Auth */
.auth-wrap{background:linear-gradient(160deg,var(--blue-dk),var(--blue));min-height:100dvh;display:flex;flex-direction:column;padding:24px 16px;align-items:center;justify-content:center}
.auth-card{background:#fff;border-radius:var(--radius);padding:24px;max-width:400px;width:100%}
.auth-brand{text-align:center;margin-bottom:18px}
.auth-brand .logo{font-size:34px}
.auth-brand h2{font-size:18px;font-weight:700;margin-top:6px}
.auth-brand p{font-size:13px;color:var(--gray);font-family:'Hind Siliguri',sans-serif}
.otp-info{background:var(--blue-lt);border-radius:var(--radius-sm);padding:12px;font-size:13px;color:var(--blue-dk);margin-bottom:14px;font-family:'Hind Siliguri',sans-serif;line-height:1.6}
.otp-input{text-align:center;font-size:28px;letter-spacing:6px;font-weight:700}

/* Layout */
.page{flex:1;padding:14px;max-width:540px;margin:0 auto;width:100%;padding-bottom:84px}
.page.no-pad{padding-bottom:20px}
.topbar{background:var(--blue);color:#fff;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.topbar-brand{display:flex;align-items:center;gap:10px}
.topbar-brand .logo{font-size:20px}
.topbar-brand h1{font-size:15px;font-weight:700;line-height:1.1}
.topbar-brand small{font-size:11px;opacity:.75;display:block;font-family:'Hind Siliguri',sans-serif}
.topbar-back{background:rgba(255,255,255,.15);border:none;color:#fff;padding:6px 12px;border-radius:20px;font-size:13px;cursor:pointer;font-family:var(--font);white-space:nowrap}
.topbar-avatar{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0}

/* Bottom nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1.5px solid var(--gray-bd);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom,0px)}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 3px 6px;background:none;border:none;cursor:pointer;font-size:10px;color:var(--gray);gap:3px;font-family:var(--font);transition:color .15s;-webkit-tap-highlight-color:transparent}
.bnav-item .ic{font-size:21px}
.bnav-item.on{color:var(--blue)}

/* Plan card */
.plan-card{background:linear-gradient(135deg,var(--blue-dk),var(--blue));color:#fff;border-radius:var(--radius);padding:18px;margin-bottom:12px;box-shadow:0 4px 20px rgba(29,78,216,.2)}
.plan-card.expired{background:linear-gradient(135deg,#991b1b,var(--red))}
.plan-card.expiring{background:linear-gradient(135deg,#92400e,var(--orange))}
.plan-status-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.plan-pill{background:rgba(255,255,255,.2);padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700}
.plan-name{font-size:20px;font-weight:800;margin-bottom:12px;line-height:1.2}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.plan-stat{background:rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:9px 6px;text-align:center}
.plan-stat small{font-size:10px;opacity:.75;display:block;margin-bottom:2px;font-family:'Hind Siliguri',sans-serif}
.plan-stat b{font-size:15px;font-weight:700}
.days-bar{height:4px;background:rgba(255,255,255,.2);border-radius:2px;margin-top:10px;overflow:hidden}
.days-bar-fill{height:100%;background:rgba(255,255,255,.7);border-radius:2px}

/* Quick actions grid */
.quick-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.qa-btn{background:var(--card);border-radius:var(--radius-sm);padding:14px 6px;text-align:center;cursor:pointer;box-shadow:var(--shadow);border:none;font-family:var(--font);display:flex;flex-direction:column;align-items:center;gap:5px;-webkit-tap-highlight-color:transparent}
.qa-btn:active{transform:scale(.97)}
.qa-btn .ic{font-size:24px}
.qa-btn span{font-size:11px;font-weight:600;color:var(--text2);line-height:1.3;font-family:'Hind Siliguri',sans-serif}

/* Cards */
.card{background:var(--card);border-radius:var(--radius);padding:15px;margin-bottom:12px;box-shadow:var(--shadow)}
.card-title{font-size:14px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}

/* Ticket row */
.tkt-row{background:var(--card);border-radius:var(--radius-sm);padding:13px;box-shadow:var(--shadow);cursor:pointer;border-left:4px solid transparent;margin-bottom:8px;-webkit-tap-highlight-color:transparent}
.tkt-row.s-open{border-left-color:var(--blue)}.tkt-row.s-work_in_progress{border-left-color:var(--orange)}.tkt-row.s-followup{border-left-color:var(--purple)}.tkt-row.s-closed{border-left-color:var(--green)}
.tkt-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.tkt-no{font-size:12px;font-weight:700;color:var(--blue)}
.tkt-issue{font-size:13px;font-weight:600;flex:1}
.tkt-meta{font-size:11px;color:var(--gray)}
.sbadge{display:inline-flex;padding:2px 9px;border-radius:12px;font-size:11px;font-weight:700}
.sbadge.open{background:var(--blue-lt);color:var(--blue)}.sbadge.work_in_progress{background:var(--orange-lt);color:var(--orange)}.sbadge.followup{background:var(--purple-lt);color:var(--purple)}.sbadge.closed{background:var(--green-lt);color:var(--green)}

/* Thread */
.tkt-header{background:linear-gradient(135deg,var(--blue-dk),var(--blue));color:#fff;border-radius:var(--radius);padding:16px;margin-bottom:12px}
.thread{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.msg{padding:11px 13px;border-radius:12px;max-width:88%}
.msg.customer{background:var(--blue-lt);align-self:flex-end;border-bottom-right-radius:4px}
.msg.agent{background:var(--gray-lt);align-self:flex-start;border-bottom-left-radius:4px}
.msg.system-msg{background:#fffbeb;border:1px dashed #fbbf24;align-self:center;max-width:96%;font-size:12px;color:var(--gray);text-align:center;border-radius:var(--radius-sm)}
.msg-meta{font-size:11px;color:var(--gray);margin-bottom:4px}
.msg-body{font-size:14px;line-height:1.55;word-break:break-word}
.msg-atts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.msg-atts img{max-width:150px;max-height:110px;object-fit:cover;border-radius:8px;cursor:zoom-in}
.msg-atts audio{width:190px}
.msg-atts video{max-width:190px;border-radius:8px}

/* Composer */
.composer{background:var(--card);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);margin-bottom:12px}
.attach-bar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.att-btn{background:var(--gray-lt);border:1.5px solid var(--gray-bd);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--text2);font-family:var(--font);-webkit-tap-highlight-color:transparent}
.att-btn.recording{background:var(--red-lt);border-color:var(--red);color:var(--red)}
.rec-dot{width:8px;height:8px;background:var(--red);border-radius:50%;display:inline-block;animation:blink .8s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.att-previews{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.att-preview{position:relative;border:1.5px solid var(--gray-bd);border-radius:var(--radius-sm);overflow:hidden}
.att-preview img{width:72px;height:72px;object-fit:cover;display:block}
.att-preview .voice-prev{padding:10px 12px;background:var(--gray-lt);font-size:12px;display:flex;align-items:center;gap:8px;min-width:140px}
.att-preview .vid-prev{width:90px;height:66px;background:#000;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px}
.att-rm{position:absolute;top:2px;right:2px;width:20px;height:20px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}

/* Forms */
.form-group{margin-bottom:13px}
label{display:block;font-size:13px;font-weight:600;color:var(--text2);margin-bottom:5px}
label .bn{font-family:'Hind Siliguri',sans-serif;font-weight:400;color:var(--gray);margin-left:4px}
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--gray-bd);border-radius:var(--radius-sm);font-size:15px;font-family:var(--font);color:var(--text);background:#fff;transition:border-color .15s;-webkit-appearance:none}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.1)}
textarea{resize:vertical;min-height:80px}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.hint{font-size:12px;color:var(--gray);margin-top:4px;font-family:'Hind Siliguri',sans-serif}

/* Buttons */
.btn{display:block;width:100%;padding:13px;border-radius:var(--radius-sm);font-size:15px;font-weight:600;font-family:var(--font);border:none;cursor:pointer;text-align:center;transition:opacity .15s,transform .1s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{background:var(--blue);color:#fff}
.btn-purple{background:var(--purple);color:#fff}
.btn-outline{background:#fff;color:var(--blue);border:1.5px solid var(--blue)}
.btn-ghost{background:var(--gray-lt);color:var(--text2)}
.btn-row{display:flex;gap:8px}.btn-row .btn{flex:1}

/* Stars */
.stars{display:flex;gap:8px;font-size:34px;cursor:pointer;justify-content:center;margin:10px 0}
.star{opacity:.22;transition:opacity .15s,transform .15s}.star.on{opacity:1;transform:scale(1.1)}

/* Misc */
.notice-item{background:var(--card);border-radius:var(--radius-sm);padding:14px;margin-bottom:8px;box-shadow:var(--shadow);border-left:4px solid var(--blue)}
.notice-item.pinned{border-left-color:var(--orange);background:#fffbf5}
.offer-item{background:var(--card);border-radius:var(--radius-sm);padding:14px;margin-bottom:8px;box-shadow:var(--shadow);border-left:4px solid var(--teal)}
.pay-amount{background:var(--blue-lt);border-radius:var(--radius-sm);padding:16px;text-align:center;margin-bottom:14px}
.pay-amount small{font-size:12px;color:var(--gray);display:block;margin-bottom:4px}
.pay-amount .amount{font-size:32px;font-weight:800;color:var(--blue)}
.instructions{background:var(--gray-lt);border-radius:var(--radius-sm);padding:14px;font-size:14px;line-height:1.9;color:var(--text2);font-family:'Hind Siliguri',sans-serif}
.info-box{background:var(--blue-lt);border-radius:var(--radius-sm);padding:13px;font-size:13px;color:var(--blue-dk);display:flex;gap:10px;margin-bottom:12px;font-family:'Hind Siliguri',sans-serif;line-height:1.6}
.quick-hero{background:linear-gradient(135deg,var(--purple),#4f46e5);color:#fff;border-radius:var(--radius);padding:16px;margin-bottom:14px}
.quick-hero h2{font-size:17px;font-weight:700;margin-bottom:3px}
.quick-hero p{font-size:12px;opacity:.85;font-family:'Hind Siliguri',sans-serif}
.success-screen{text-align:center;padding:40px 20px}
.success-screen .ic{font-size:60px;display:block;margin-bottom:14px}
.success-screen h2{font-size:21px;font-weight:700;margin-bottom:6px}
.tkt-chip{background:var(--blue);color:#fff;display:inline-block;padding:10px 24px;border-radius:30px;font-size:19px;font-weight:800;letter-spacing:2px;margin:14px 0}
.success-screen p{color:var(--gray);font-size:13px;font-family:'Hind Siliguri',sans-serif;line-height:1.7}
.big-input{font-size:20px;letter-spacing:3px;font-weight:700;text-align:center}
.empty{text-align:center;padding:40px 16px;color:var(--gray)}
.empty .ic{font-size:48px;margin-bottom:10px}
.upgrade-pending{background:var(--orange-lt);border:1.5px solid var(--orange);border-radius:var(--radius-sm);padding:11px 13px;display:flex;align-items:center;gap:10px;font-size:13px;margin-bottom:12px}
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);padding:11px 20px;border-radius:30px;font-size:14px;font-weight:500;z-index:9999;box-shadow:0 4px 20px rgba(0,0,0,.15);animation:toast-in .25s;max-width:90vw;text-align:center;white-space:nowrap}
.toast.ok{background:var(--green);color:#fff}.toast.err{background:var(--red);color:#fff}
@keyframes toast-in{from{top:4px;opacity:0}to{top:18px;opacity:1}}
.bn{font-family:'Hind Siliguri',sans-serif}
.divider{height:1px;background:var(--gray-bd);margin:12px 0}