/* MeetDrop — pixel recreation of the product mockups */

:root{
  --ink:#14161F;
  --ink-2:#2E3448;
  --body:#3B4154;
  --muted:#7B8296;
  --faint:#A0A7B8;
  --vio:#6C5CE7;
  --vio-deep:#5B48E0;
  --vio-soft:#EFECFD;
  --vio-soft-2:#F1EDFD;
  --grad:linear-gradient(140deg,#9C8DFB 0%,#7565EE 52%,#5B48E0 100%);
  --green:#21A661;
  --green-soft:#E9F8F0;
  --blue:#3B96EA;
  --blue-soft:#E3F1FD;
  --bg:#F7F8FB;
  --line:#ECEDF3;
  --line-2:#E7E9F0;
  --red:#F04444;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#fff;color:var(--ink);font-size:14px;
}
img{display:block}
svg{display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;padding:0}
.ic{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hand{font-family:'Caveat',cursive;font-weight:600}

.board{width:1440px;margin:0 auto}

/* ================================================================
   DESKTOP DASHBOARD
================================================================ */
.dash{
  height:628px;background:var(--bg);
  display:flex;overflow:hidden;position:relative;
}

/* ---- sidebar ---- */
.side{
  width:206px;flex:none;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:18px 14px 18px;
}
.logo{display:flex;align-items:center;gap:9px;padding:2px 6px 24px}
.logo .mark{width:33px;height:33px;flex:none}
.logo-word{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.logo-word em{font-style:normal;color:var(--vio)}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{
  display:flex;align-items:center;gap:11px;height:44px;padding:0 12px;
  border-radius:10px;font-size:13.5px;font-weight:500;color:#5E6577;
}
.nav a .ic{width:18px;height:18px;color:#8A91A6;stroke-width:1.7}
.nav a.active{background:var(--vio-soft);color:var(--vio);font-weight:600}
.nav a.active .ic{color:var(--vio)}
.me{margin-top:auto;display:flex;align-items:center;gap:9px;padding:6px 6px 0}
.me img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.me span{font-size:13px;font-weight:600;color:var(--ink-2)}
.me .ic{width:15px;height:15px;color:#A6ACC0;margin-left:auto}

/* ---- main column ---- */
.dmain{flex:1;min-width:0;padding:24px 24px 0 28px}
.dtop{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.dtop h1{font-size:22px;font-weight:750;letter-spacing:-.015em}
.dtop .sub{font-size:13.5px;color:var(--muted);margin-top:5px}
.dtop-right{display:flex;align-items:center;gap:18px}
.event{
  display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid #E9EAF1;border-radius:12px;padding:8px 12px;
  box-shadow:0 1px 2px rgba(20,22,31,.04);text-align:left;
}
.evt-ic{
  width:34px;height:34px;border-radius:9px;background:var(--vio-soft);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.evt-ic .ic{width:17px;height:17px;color:var(--vio)}
.evt-t b{display:block;font-size:12.5px;font-weight:650;color:#1A1D2C}
.evt-t small{display:block;font-size:11.5px;color:#8A90A3;margin-top:2px}
.event > .ic{width:15px;height:15px;color:#A0A6B8;margin-left:2px}
.bellwrap{position:relative;padding:4px}
.bellwrap .ic{width:21px;height:21px;color:#3A4056;stroke-width:1.6}
.badge{
  position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--red);border:2px solid var(--bg);
  color:#fff;font-size:9.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-sizing:content-box;
  line-height:1;
}

/* hero */
.hero{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  height:250px;position:relative;margin-bottom:20px;
  box-shadow:0 1px 2px rgba(20,22,31,.03);
}
.mic-col{position:absolute;left:0;right:0;top:28px;display:flex;flex-direction:column;align-items:center}
.halo{
  width:132px;height:132px;border-radius:50%;background:rgba(108,92,231,.08);
  display:flex;align-items:center;justify-content:center;
}
.halo2{
  width:114px;height:114px;border-radius:50%;background:rgba(108,92,231,.13);
  display:flex;align-items:center;justify-content:center;
}
.micbtn{
  width:96px;height:96px;border-radius:50%;background:var(--grad);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px rgba(97,80,225,.38);
}
.micbtn .ic{width:34px;height:34px;color:#fff;stroke-width:1.9}
.hero h2{font-size:19px;font-weight:750;letter-spacing:-.01em;margin-top:11px}
.hero .sub{font-size:12.5px;color:#8A90A3;margin-top:5px}
.scribble{position:absolute;left:calc(50% - 292px);top:44px;width:150px}
.scribble .hand{
  display:block;font-size:21px;line-height:1;color:#2F3450;
  transform:rotate(-5deg);text-align:center;
}
.scribble svg{margin:4px 0 0 44px}
.photo-side{position:absolute;left:calc(50% + 180px);top:62px;width:96px;text-align:center}
.cam-circle{
  width:54px;height:54px;border-radius:50%;background:#fff;margin:0 auto;
  border:1px solid #EEEFF4;box-shadow:0 6px 16px rgba(23,25,45,.09);
  display:flex;align-items:center;justify-content:center;
}
.cam-circle .ic{width:20px;height:20px;color:#3A4056;stroke-width:1.6}
.photo-side p{font-size:12px;color:#6E7488;margin-top:9px;line-height:1.4}

/* recent leads */
.leads-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.leads-head h3{font-size:16px;font-weight:750;letter-spacing:-.01em}
.leads-head a{font-size:12.5px;font-weight:650;color:var(--vio)}
.leads{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(20,22,31,.03)}
.lead-row{display:flex;align-items:center;gap:13px;padding:14px 16px}
.lead-row + .lead-row{border-top:1px solid #F2F3F7}
.lead-row > img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.l-id{width:196px;flex:none}
.l-name{display:flex;align-items:center;gap:9px}
.l-name b{font-size:13.5px;font-weight:650;color:#191C2B}
.l-co{font-size:12px;color:#8A90A3;margin-top:3px}
.l-notes{flex:1;min-width:0}
.l-n1{font-size:12.5px;color:#575E72}
.l-n2{font-size:12px;color:#98A0B2;margin-top:3px}
.l-status{text-align:right;margin-right:4px;flex:none}
.sent-line{display:flex;align-items:center;justify-content:flex-end;gap:5px;font-size:12px;font-weight:600;color:var(--green)}
.sent-line svg{width:13px;height:13px}
.ago{font-size:11px;color:var(--faint);margin-top:4px}
.lead-row > .chev{width:16px;height:16px;color:#B9BFCE}

/* chips */
.chip{font-size:10.5px;font-weight:650;padding:3.5px 10px;border-radius:20px;line-height:1.2;white-space:nowrap}
.chip.hot{background:var(--vio);color:#fff}
.chip.warm{background:var(--blue-soft);color:var(--blue)}
.chip.new{background:#EEF0F5;color:#6E7488}

/* ---- lead detail panel ---- */
.dpanel{width:452px;flex:none;position:relative}
.panel-card{
  position:absolute;top:12px;right:12px;left:8px;
  background:#fff;border:1px solid #EEEFF4;border-radius:18px;
  box-shadow:0 18px 50px rgba(23,25,45,.13);
  padding:21px 22px 26px;min-height:760px;
}
.p-close{position:absolute;top:20px;right:20px}
.p-close .ic{width:17px;height:17px;color:#9AA1B3;stroke-width:2}
.p-head{display:flex;gap:14px;align-items:flex-start}
.p-head > img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.p-name-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.p-name-row b{font-size:17.5px;font-weight:750;letter-spacing:-.01em}
.p-role{font-size:12.5px;color:var(--muted);margin-top:5px}
.p-actions{display:grid;grid-template-columns:repeat(4,1fr);margin-top:17px}
.p-actions button{display:flex;flex-direction:column;align-items:center;gap:7px}
.p-actions .ic{width:17px;height:17px;color:#363C52;stroke-width:1.7}
.p-actions span{font-size:10.5px;color:#6E7488}
.p-sec{font-size:13.5px;font-weight:750;margin:19px 0 11px}
.p-row{display:flex;gap:11px;margin-bottom:11px;align-items:flex-start}
.p-row .ic{width:15px;height:15px;color:#A2A8B8;stroke-width:1.7;margin-top:2px}
.p-row p{font-size:12.8px;color:var(--body);line-height:1.5}
.p-box{
  border:1px solid #EDEEF3;border-radius:12px;padding:11px 13px;
  display:flex;align-items:center;gap:10px;
}
.sent-chip{
  background:#2BB673;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  padding:4.5px 9px;border-radius:7px;flex:none;
}
.p-box .when{font-size:12px;color:#8A90A3}
.btn-ghost{
  margin-left:auto;flex:none;border:1px solid #E4E6EE;border-radius:9px;
  padding:8px 13px;font-size:12px;font-weight:600;color:var(--ink-2);background:#fff;
}
.n-ic{
  width:38px;height:38px;border-radius:10px;background:var(--vio-soft);flex:none;
  display:flex;align-items:center;justify-content:center;
}
.n-ic .ic{width:18px;height:18px;color:var(--vio)}
.n-t b{display:block;font-size:12.8px;font-weight:650;color:var(--ink-2)}
.n-t small{display:block;font-size:11.8px;color:#8A90A3;margin-top:3px}
.p-tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{background:var(--vio-soft);color:var(--vio);font-size:12px;font-weight:600;padding:6.5px 14px;border-radius:20px}
.tag-add{
  background:#F1F2F7;color:#8A90A3;font-size:12px;font-weight:600;
  padding:6.5px 11px;border-radius:20px;display:flex;align-items:center;
}
.tag-add .ic{width:13px;height:13px;stroke-width:2.2}

/* ================================================================
   MOBILE FLOW
================================================================ */
.flow{
  background:#fff;display:flex;align-items:center;justify-content:center;
  padding:26px 20px 30px;
}
.arrow-gap{width:48px;flex:none;display:flex;align-items:center;justify-content:center}
.phone{
  width:236px;height:478px;flex:none;background:#15171F;border-radius:38px;padding:7px;
  box-shadow:0 18px 44px rgba(21,23,31,.16);
}
.screen{
  width:100%;height:100%;background:#fff;border-radius:31px;overflow:hidden;
  position:relative;display:flex;flex-direction:column;
}
.sbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px 2px}
.sbar .time{font-size:12px;font-weight:650;letter-spacing:.01em}
.sbar svg{width:49px;height:12px}
.phead{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 7px}
.phead .ph-ic{display:flex}
.phead .ph-ic .ic{width:18px;height:18px;color:#23283C;stroke-width:1.7}
.plogo{display:flex;align-items:center;gap:6px}
.plogo .mark{width:20px;height:20px}
.plogo span{font-size:14.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.plogo em{font-style:normal;color:var(--vio)}

.m-title{font-size:15.5px;font-weight:750;text-align:center;letter-spacing:-.01em}
.m-sub{font-size:10.3px;color:#8A90A3;text-align:center;margin-top:4px;line-height:1.5}
.btn-primary{
  display:flex;align-items:center;justify-content:center;height:42px;
  margin:0 20px;border-radius:12px;background:var(--vio);color:#fff;
  font-size:12.5px;font-weight:650;box-shadow:0 8px 18px rgba(108,92,231,.28);
}
.btn-outline{
  display:flex;align-items:center;justify-content:center;height:42px;
  margin:0 20px;border-radius:12px;background:#fff;border:1px solid #E7E9F0;
  color:var(--ink-2);font-size:12.5px;font-weight:650;
}

/* screen 1 — home */
.m-scribble{margin:6px 0 0 24px;width:110px}
.m-scribble .hand{
  display:block;font-size:15.5px;line-height:1.05;color:#2F3450;
  transform:rotate(-4deg);text-align:center;
}
.m-scribble svg{margin:2px 0 0 58px}
.m-micwrap{margin:2px auto 0}
.m-micwrap .halo{width:116px;height:116px}
.m-micwrap .halo2{width:101px;height:101px}
.m-micwrap .micbtn{width:86px;height:86px;box-shadow:0 10px 22px rgba(97,80,225,.36)}
.m-micwrap .micbtn .ic{width:30px;height:30px}
.s-home .m-title{margin-top:13px;font-size:16.5px}
.s-home .m-sub{margin-top:3px;font-size:10.8px}
.m-pill{
  display:flex;align-items:center;gap:7px;margin:15px auto 0;width:max-content;
  border:1px solid var(--line);border-radius:22px;padding:9px 15px;
  box-shadow:0 4px 12px rgba(23,25,45,.06);background:#fff;
  font-size:11.5px;font-weight:600;color:var(--ink-2);
}
.m-pill .ic{width:15px;height:15px;stroke-width:1.6;color:#3A4056}
.tabbar{
  margin-top:auto;border-top:1px solid #F0F1F6;
  display:grid;grid-template-columns:repeat(4,1fr);padding:8px 6px 11px;
}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;color:#9AA1B3}
.tabbar a .ic{width:18px;height:18px;stroke-width:1.7}
.tabbar a span{font-size:8.5px;font-weight:550}
.tabbar a.active{color:var(--vio)}

/* screen 2 — recording */
.s-rec .m-title{margin-top:28px}
.timer{
  font-size:26px;font-weight:750;color:var(--vio);text-align:center;margin-top:7px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.wave{margin:36px auto 0}
.stopwrap{margin-top:auto;padding-bottom:32px;text-align:center}
.stopbtn{
  width:62px;height:62px;border-radius:50%;background:var(--vio-soft);
  display:flex;align-items:center;justify-content:center;margin:0 auto;
}
.stopbtn i{display:block;width:20px;height:20px;border-radius:5px;background:var(--vio)}
.stopwrap p{font-size:10.5px;color:#8A90A3;margin-top:9px}

/* screen 3 — photo */
.s-photo .m-title{margin-top:12px}
.badge-photo{
  width:168px;height:208px;border-radius:14px;margin:13px auto 0;position:relative;
  background:
    radial-gradient(120px 90px at 20% 15%,rgba(255,255,255,.28),transparent 60%),
    radial-gradient(140px 110px at 85% 80%,rgba(0,0,0,.14),transparent 60%),
    radial-gradient(70px 60px at 70% 25%,rgba(255,255,255,.12),transparent 60%),
    linear-gradient(150deg,#CBC8C2 0%,#B4B1AB 55%,#A5A29B 100%);
  overflow:hidden;
}
.badge-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:118px;height:166px;background:#FDFDFB;border-radius:8px;
  box-shadow:0 10px 24px rgba(30,28,24,.35);text-align:center;overflow:hidden;
}
.badge-org{
  display:inline-block;background:#101218;color:#fff;font-size:6.5px;font-weight:800;
  letter-spacing:.05em;padding:3.5px 8px;border-radius:4px;margin-top:13px;
}
.badge-name{font-size:16px;font-weight:800;line-height:1.08;color:#181A22;margin-top:13px;letter-spacing:-.01em}
.badge-role{font-size:8.5px;color:#6E7488;margin-top:6px}
.badge-foot{
  position:absolute;left:0;right:0;bottom:0;height:27px;background:#101218;
  color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.22em;
  display:flex;align-items:center;justify-content:center;
}
.x-chip{
  position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
}
.x-chip .ic{width:11px;height:11px;color:#2E3448;stroke-width:2.2}
.s-photo .btn-primary{margin-top:17px}
.s-photo .btn-outline{margin-top:10px}

/* screen 4 — ai processing */
.progress{height:3px;background:#EFECFB;margin-top:2px}
.progress i{display:block;height:100%;width:44%;background:var(--vio);border-radius:0 2px 2px 0}
.s-ai .m-title{margin-top:17px}
.lead-mini{
  margin:15px 15px 0;border:1px solid var(--line);border-radius:14px;padding:13px;
  box-shadow:0 10px 24px rgba(23,25,45,.07);
}
.lm-head{display:flex;gap:9px;align-items:center}
.lm-head img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.lm-head b{display:block;font-size:12.5px;font-weight:700}
.lm-head small{display:block;font-size:9.8px;color:#8A90A3;line-height:1.35;margin-top:2px}
.lm-row{display:flex;gap:7px;align-items:center;margin-top:10px}
.lm-row .ic{width:12px;height:12px;color:#A2A8B8;stroke-width:1.7}
.lm-row p{font-size:9.8px;color:var(--body)}
.lm-chips{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:11px}
.mini-chip{
  background:var(--vio-soft-2);color:var(--vio);font-size:9.8px;font-weight:600;
  padding:5px 10px;border-radius:20px;
}
.s-ai .btn-primary{margin-top:auto;margin-bottom:18px}

/* screen 5 — sent */
.illo{margin:14px auto 0}
.s-done .m-title{font-size:17px;margin-top:6px}
.s-done .m-sub{margin-top:5px;font-size:10.5px}
.success{
  margin:13px 20px 0;background:var(--green-soft);border-radius:10px;padding:9px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:10.5px;font-weight:650;color:#1D9E5F;
}
.success svg{width:13px;height:13px}
.s-done .btn-primary{margin-top:15px}
.s-done .btn-outline{margin-top:10px}