/* Maya — Malabar Gold & Diamonds WhatsApp AI Concierge · demo styles */
:root{
  --gold:#c8a04a; --gold-d:#9c6b08; --gold-grad:linear-gradient(135deg,#f7e3a1,#c8a04a 55%,#9c6b08);
  --wa-green:#075e54; --wa-teal:#128c7e; --wa-light:#25d366; --wa-bg:#e7ddd3;
  --bub-out:#d9fdd3; --bub-in:#ffffff; --ink:#1f2c33; --muted:#667781;
  --rail:#10171c; --rail2:#161f26;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 700px at 20% -10%,#243b44,#0d1418 60%);
  color:#fff;display:flex;min-height:100vh;align-items:safe center;justify-content:center;padding:22px;overflow-y:auto;}
.stage{display:flex;gap:56px;align-items:stretch;max-width:1180px;width:100%}

/* ░░ Left rail ░░ */
.rail{width:330px;flex:0 0 330px;background:linear-gradient(180deg,var(--rail),var(--rail2));
  border:1px solid #243038;border-radius:20px;padding:20px;display:flex;flex-direction:column;
  box-shadow:0 30px 60px rgba(0,0,0,.4)}
.rail-brand{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.logo,.wa-av{background:var(--gold-grad);color:#3a2700;font-weight:800;display:grid;place-items:center;
  border-radius:12px;width:46px;height:46px;font-size:24px;font-family:Georgia,serif;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.rb-title{font-weight:700;font-size:15px}
.rb-sub{font-size:12px;color:#9fb4bf}
.rb-sub b{color:var(--gold)}
.rail-note{font-size:12px;color:#8ea2ad;background:#0c1216;border:1px solid #1f2a31;border-radius:10px;padding:9px 11px;margin-bottom:12px}
.scnlist{display:flex;flex-direction:column;gap:7px;overflow:auto;flex:1;margin:-4px -6px;padding:4px 6px}
.scn{display:flex;gap:11px;align-items:flex-start;text-align:left;background:#0d141a;border:1px solid #1e2a32;
  color:#e7eef2;border-radius:12px;padding:10px 11px;cursor:pointer;transition:.16s;font:inherit}
.scn:hover{background:#13202a;border-color:#2c4a44;transform:translateY(-1px)}
.scn.active{background:#10261f;border-color:var(--wa-light);box-shadow:0 0 0 1px var(--wa-light) inset}
.scn-emo{font-size:21px;line-height:1.2}
.scn-tx{display:flex;flex-direction:column}
.scn-tx b{font-size:13.5px}
.scn-tx i{font-style:normal;font-size:11px;color:#8aa0ab;margin-top:2px;line-height:1.35}
.rail-foot{display:flex;gap:8px;margin-top:14px}
.kpi{flex:1;background:#0c1216;border:1px solid #1f2a31;border-radius:10px;padding:8px 6px;text-align:center}
.kpi b{display:block;color:var(--gold);font-size:15px}
.kpi span{font-size:10px;color:#8aa0ab}
.disclaimer{font-size:10.5px;color:#5d7180;margin-top:12px;text-align:center;line-height:1.4}

/* ░░ Phone ░░ */
.phone-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.phone{width:390px;height:min(780px,calc(100vh - 100px));max-height:780px;background:#000;border-radius:42px;padding:11px;position:relative;
  box-shadow:0 36px 70px rgba(0,0,0,.55),0 0 0 2px #2a2a2a;display:flex}
.notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:150px;height:26px;background:#000;
  border-radius:0 0 18px 18px;z-index:5}
/* inner screen — clean flex column: fixed header, scrolling thread, fixed chips + input */
.phone{flex-direction:column;overflow:hidden}
.wa-head,.wa-thread,.wa-chips,.wa-input{width:100%}
.wa-head{flex:0 0 auto;z-index:2}
.wa-thread{flex:1 1 auto;min-height:0}
.wa-chips,.wa-input{flex:0 0 auto}
.phone>.wa-head{border-radius:32px 32px 0 0}

.wa-head{background:var(--wa-green);display:flex;align-items:center;gap:9px;padding:30px 12px 10px;color:#fff;flex:0 0 auto}
.wa-back{font-size:24px;opacity:.9;margin-right:-3px}
.wa-head .wa-av{width:38px;height:38px;font-size:19px;border-radius:50%}
.wa-id{flex:1;min-width:0}
.wa-name{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:5px}
.verified{color:#34b7f1;font-size:11px;background:#fff;border-radius:50%;width:14px;height:14px;display:inline-grid;place-items:center}
.wa-status{font-size:11.5px;color:#cdeee6}
.wa-actions{display:flex;align-items:center;gap:6px}
#langsel{background:rgba(255,255,255,.14);color:#fff;border:none;border-radius:7px;font-size:11px;padding:4px 4px}
#langsel option{color:#000}
.wa-reset{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:7px;width:26px;height:26px;cursor:pointer;font-size:15px}

.wa-thread{flex:1;overflow-y:auto;padding:12px 11px 6px;
  background-color:var(--wa-bg);
  background-image:linear-gradient(rgba(231,221,211,.92),rgba(231,221,211,.92)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23d8cfc4' stroke-width='.5'/%3E%3C/svg%3E");
}
.row{display:flex;margin:7px 0}
.row.out{justify-content:flex-end}
.row.in{justify-content:flex-start}
.row.sys{justify-content:center}
.bubble{max-width:80%;padding:7px 9px 5px;border-radius:9px;font-size:13.5px;line-height:1.42;color:var(--ink);
  box-shadow:0 1px .5px rgba(0,0,0,.13);position:relative;animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.b-in{background:var(--bub-in);border-top-left-radius:2px}
.b-out{background:var(--bub-out);border-top-right-radius:2px}
.bubble b{font-weight:700}
.meta{display:block;text-align:right;font-size:10px;color:var(--muted);margin-top:3px}
.ticks{color:#34b7f1}
.syschip{background:#fdf3d6;color:#7a5b12;font-size:11.5px;border-radius:8px;padding:5px 10px;text-align:center;
  box-shadow:0 1px .5px rgba(0,0,0,.12);max-width:88%;border:1px solid #f0e0b0}

/* typing */
.typing{display:flex;gap:4px;align-items:center;height:14px}
.typing span{width:7px;height:7px;background:#9aa6ac;border-radius:50%;animation:bln 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes bln{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* cite */
.cite{margin-top:6px;font-size:10.5px;color:var(--wa-teal);border-top:1px dashed #cfe3dd;padding-top:4px}

/* product cards */
.carousel{display:flex;gap:9px;overflow-x:auto;padding:2px 1px 6px;max-width:300px}
.pcard{flex:0 0 150px;background:#fff;border:1px solid #ece5dc;border-radius:12px;overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.07)}
.pimg{position:relative;background:#f6efe2;aspect-ratio:1/1}
.pimg svg{width:100%;height:100%;display:block}
.brandtag{position:absolute;top:6px;left:6px;background:rgba(20,30,35,.82);color:#fff;font-size:9px;
  padding:2px 6px;border-radius:20px;letter-spacing:.3px}
.pbody{padding:7px 8px 9px}
.ptitle{font-size:12px;font-weight:700;color:#1f2c33;line-height:1.25}
.pmeta{font-size:10px;color:var(--muted);margin:2px 0 4px}
.pwhy{font-size:10px;color:#0a7a4f;background:#eafaf1;border-radius:6px;padding:3px 5px;margin-bottom:5px;line-height:1.3}
.pprice{font-size:13.5px;font-weight:800;color:var(--gold-d)}
.pacts{display:flex;gap:5px;margin-top:6px}
.pbtn{flex:1;border:none;background:var(--wa-teal);color:#fff;font-size:10.5px;padding:6px 4px;border-radius:7px;cursor:pointer;font-weight:600}
.pbtn.ghost{background:#fff;color:var(--wa-teal);border:1px solid var(--wa-teal)}
.pbtn:disabled{opacity:.55;cursor:default}
.pbtn:hover:not(:disabled){filter:brightness(1.08)}

/* rate card */
.ratecard{min-width:230px}
.rc-h{font-weight:700;font-size:13px;margin-bottom:6px;display:flex;flex-direction:column;gap:3px}
.rc-tag{font-size:9.5px;font-weight:600;color:#0a7a4f;background:#eafaf1;border-radius:20px;padding:2px 7px;width:fit-content}
.rc-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed #eee;font-size:13px}
.rc-row b{color:var(--gold-d)}
.rc-foot{font-size:9.5px;color:var(--muted);margin-top:5px}

/* allocation card */
.alloccard{min-width:250px}
.al-h{font-weight:700;font-size:13px;margin-bottom:6px}
.al-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:4px 0;border-bottom:1px dashed #eee;font-size:12px}
.al-row b{color:var(--gold-d);font-weight:800}
.al-row i{font-style:normal;color:var(--muted);font-size:10px;min-width:30px;text-align:right}
.al-foot{font-size:10px;color:var(--muted);margin-top:6px;line-height:1.35}

/* store / appt / order / lead / profile / campaign cards */
.storecard{display:flex;gap:9px;min-width:255px}
.storecard .map{font-size:26px;background:#e9f3ef;border-radius:10px;width:54px;display:grid;place-items:center}
.st-name{font-weight:700;font-size:12.5px}
.st-area{font-size:11px;color:var(--muted);margin:2px 0}
.st-meta{font-size:10.5px;color:#3a5560;line-height:1.4}
.st-acts{margin-top:5px}

.apptcard,.ordercard,.leadcard,.profilecard,.campaigncard,.tryoncard{min-width:235px}
.ap-h{font-weight:700;font-size:13px;color:#0a7a4f}
.ap-b{font-size:12px;margin-top:4px;line-height:1.5}
.ap-cal{margin-top:7px;font-size:11px;color:var(--wa-teal);font-weight:600}

.or-h{font-weight:800;font-size:13px}
.or-item{font-size:12px;color:#1f2c33;margin:2px 0}
.or-status{display:inline-block;font-size:11px;font-weight:700;color:#b25c00;background:#fff3e0;border-radius:20px;padding:2px 9px;margin:3px 0}
.or-status.good{color:#0a7a4f;background:#eafaf1}
.or-eta{font-size:12px;font-weight:700}
.or-note{font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.35}

.ld-h{font-weight:800;font-size:13px;color:#7a5b12;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.ld-score{font-size:10px;background:#0a7a4f;color:#fff;border-radius:20px;padding:2px 8px}
.ld-row,.pf-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;padding:3px 0;border-bottom:1px dashed #eee}
.ld-row b,.pf-row b{font-weight:700;color:#1f2c33;text-align:right}

.pf-h{font-weight:700;font-size:13px;margin-bottom:4px}
.profilecard{background:linear-gradient(180deg,#fffdf6,#fff)}

.campaigncard{min-width:255px;text-align:center}
.cmp-banner{font-size:30px;background:var(--gold-grad);border-radius:10px;padding:10px}
.cmp-title{font-weight:800;font-size:13px;margin:7px 0 4px;color:#1f2c33}
.cmp-body{font-size:11.5px;color:#3a5560;line-height:1.5}
.cmp-cta{margin-top:8px;background:var(--wa-teal);color:#fff;border:none;border-radius:8px;padding:8px 12px;font-weight:700;font-size:12px;width:100%}

/* voice */
.bubble.voice{max-width:84%}
.vc{display:flex;align-items:center;gap:8px}
.vc-play{width:30px;height:30px;border-radius:50%;border:none;background:var(--wa-teal);color:#fff;cursor:pointer;font-size:12px;flex:0 0 auto}
.vc-wave{display:flex;gap:2px;align-items:center;height:24px;flex:1}
.vc-wave i{width:2.5px;background:#9ab;border-radius:2px;height:7px}
.vc-wave i:nth-child(3n){height:16px}.vc-wave i:nth-child(4n){height:21px}.vc-wave i:nth-child(2n){height:11px}
.vc-wave.playing i{animation:wv .7s infinite ease-in-out}
.vc-wave.playing i:nth-child(odd){animation-delay:.15s}
@keyframes wv{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1.5)}}
.vc-dur{font-size:10.5px;color:var(--muted)}
.vc-lang{font-size:9px;background:#eef4f2;color:var(--wa-teal);border-radius:20px;padding:2px 6px;font-weight:700}
.vc-tx{font-size:11px;color:#33474f;margin-top:6px;line-height:1.45;border-top:1px dashed #e0e8e5;padding-top:5px}

/* photo + try-on */
.b-out.photo .ph{display:flex;flex-direction:column;align-items:center;gap:3px}
.b-out.photo .ph img{width:130px;height:130px;border-radius:9px;object-fit:cover;display:block}
.b-out.photo .ph span{font-size:10px;color:#3a5560}
.to-h{font-weight:700;font-size:13px;margin-bottom:6px}
.to-frame{position:relative;background:linear-gradient(180deg,#eef3f6,#dfe9ef);border-radius:12px;height:120px;display:grid;place-items:center;overflow:hidden}
.to-frame.has-img{height:auto;aspect-ratio:1/1;max-height:230px}
.to-frame.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.to-badge{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:600;padding:3px 9px;border-radius:20px}
.to-scan{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#25d366,transparent);animation:toscan 1.8s ease-in-out infinite}
@keyframes toscan{0%{top:4%}50%{top:92%}100%{top:4%}}
.to-face{font-size:60px}
.to-overlay{position:absolute;bottom:26px;font-size:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));animation:bln 1.6s infinite}
.to-detect{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.to-detect span{font-size:10px;background:#eafaf1;color:#0a7a4f;border-radius:20px;padding:3px 8px}

/* chips */
.wa-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 11px;background:var(--wa-bg);flex:0 0 auto;border-top:1px solid #d9cfc4}
.wa-chips.empty{display:none}
.chip{background:#fff;border:1px solid var(--wa-teal);color:var(--wa-teal);border-radius:20px;padding:7px 12px;
  font-size:12px;font-weight:600;cursor:pointer;transition:.14s}
.chip:hover{background:var(--wa-teal);color:#fff}

/* composer */
.wa-input{display:flex;align-items:center;gap:7px;background:#f0f0f0;padding:8px 10px;flex:0 0 auto;border-radius:0 0 32px 32px}
.wa-input .ic{font-size:18px;color:#54656f;cursor:default}
#msg{flex:1;border:none;border-radius:20px;padding:9px 13px;font-size:13.5px;outline:none;background:#fff}
.send{background:var(--wa-teal);border:none;color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:15px;flex:0 0 auto}
.send:disabled{opacity:.5}
.mic{background:var(--wa-teal);color:#fff;border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:16px}

.phone-cap{font-size:12px;color:#9fb4bf;max-width:360px;text-align:center;line-height:1.5}

/* scrollbars */
.wa-thread::-webkit-scrollbar,.scnlist::-webkit-scrollbar,.carousel::-webkit-scrollbar{height:6px;width:6px}
.wa-thread::-webkit-scrollbar-thumb,.carousel::-webkit-scrollbar-thumb{background:#c3b9ac;border-radius:6px}

/* responsive */
/* Wide screens: WhatsApp phone dead-centre in the viewport, use-cases rail pinned far left */
@media(min-width:1180px){
  .stage{justify-content:center;gap:0}
  .rail{position:fixed;left:clamp(20px,3vw,64px);top:50%;transform:translateY(-50%);
    width:330px;max-height:calc(100vh - 28px)}
}
@media(max-width:880px){
  .stage{flex-direction:column;align-items:center}
  .rail{position:static;transform:none;max-height:none;width:390px;flex:none;order:2}
  .phone{order:1}
}