/* =========================================================
   WBIZ Portal Tour — an auto-playing "video" of the live
   portal, built in HTML/CSS/JS. Scoped under .tour-stage so
   the portal look never leaks into the marketing site.
   ========================================================= */
.tour-wrap { max-width: 1120px; margin: 0 auto; }
.tour-stage {
  --e50:#ECFDF5; --e100:#D1FAE5; --e300:#6EE7B7; --e400:#34D399; --e500:#10B981; --e600:#059669; --e700:#047857;
  --wa:#25D366;
  --s950:#020617; --s900:#0F172A; --s800:#1E293B; --s700:#334155; --s500:#64748B; --s400:#94A3B8; --s300:#CBD5E1; --s100:#F1F5F9; --s50:#F8FAFC;
  --ink:#111A22; --mut:#5B6670; --bd:#E6E9ED; --card:#FFFFFF; --canvas:#F8FAFC;
  --blue50:#EFF6FF; --blue500:#3B82F6; --blue700:#1D4ED8;
  --vio50:#F5F3FF; --vio500:#8B5CF6; --vio700:#6D28D9;
  --red50:#FEF2F2; --red500:#EF4444; --red700:#B91C1C;
  --amb50:#FFFBEB; --amb500:#F59E0B; --amb700:#B45309;
  --pink50:#FDF2F8; --pink700:#BE185D;
  --sh:0 1px 2px rgba(15,23,42,.05);
  font-family:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--bd); background:var(--canvas);
  box-shadow:0 40px 80px -30px rgba(2,6,23,.34), 0 16px 34px -18px rgba(2,6,23,.18);
  color:var(--ink);
}
.tour-stage * { box-sizing:border-box; }
.tour-stage svg { fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; display:block; }

/* browser chrome bar on top of the player */
.tp-chrome { display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; background:#0B1220; border-bottom:1px solid #1E293B; }
.tp-dot { width:11px; height:11px; border-radius:50%; }
.tp-dot.r{background:#FF5F57} .tp-dot.y{background:#FEBC2E} .tp-dot.g{background:#28C840}
.tp-url { margin-left:12px; display:flex; align-items:center; gap:8px; height:24px; padding:0 12px; border-radius:7px; background:#151E2E; color:#8A97A8; font-size:12px; }
.tp-url svg{width:12px;height:12px;color:#5BE39B}
.tp-live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#8A97A8; }
.tp-live i{width:7px;height:7px;border-radius:50%;background:#34D399; box-shadow:0 0 0 0 rgba(52,211,153,.5); animation:tp-pulse 1.8s infinite;}
@keyframes tp-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.45)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}

/* app shell */
.tp-app { display:flex; height:560px; position:relative; }
@media(max-width:760px){ .tp-app{height:520px;} }

/* sidebar (constant) */
.tp-side { width:210px; flex:none; background:var(--s950); color:var(--s300); display:flex; flex-direction:column; padding:0 10px 14px; }
.tp-brand { display:flex; align-items:center; gap:9px; height:52px; margin:0 -10px 8px; padding:0 15px; border-bottom:1px solid var(--s800); }
.tp-logo { width:28px; height:28px; border-radius:8px; background:var(--wa); color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; }
.tp-brand b{ font-size:15px; color:#fff; letter-spacing:-.01em; }
.tp-brand small{ display:block; font-size:9px; color:var(--s500); }
.tp-nav { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.tp-nav-grp{ margin:11px 0 3px; padding:0 9px; font-size:9px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--s500); }
.tp-nav a { display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:7px; font-size:12.5px; font-weight:500; color:var(--s300); position:relative; transition:background .25s,color .25s; }
.tp-nav a svg{ width:15px; height:15px; color:var(--s400); transition:color .25s; }
.tp-nav a.on { background:rgba(16,185,129,.12); color:var(--e300); }
.tp-nav a.on svg{ color:var(--e300); }
.tp-nav a.on::before{ content:""; position:absolute; left:-10px; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--e400); }
.tp-side-foot{ margin-top:auto; border:1px solid var(--s800); border-radius:11px; padding:11px; }
.tp-side-foot b{ font-size:12px; color:#fff; } .tp-side-foot p{ margin:2px 0 8px; font-size:10.5px; color:var(--s500); }
.tp-meter{ height:6px; border-radius:999px; background:var(--s800); } .tp-meter i{ display:block; height:100%; width:68%; border-radius:999px; background:var(--e500); }

/* main column */
.tp-main { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--canvas); }
.tp-top { display:flex; align-items:center; gap:12px; height:52px; flex:none; padding:0 16px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--bd); }
.tp-title { font-size:14px; font-weight:600; }
.tp-search{ margin-left:auto; display:flex; align-items:center; gap:8px; height:31px; min-width:210px; padding:0 10px; border:1px solid var(--bd); border-radius:8px; background:var(--card); color:var(--mut); font-size:12px; }
.tp-search svg{width:14px;height:14px;} .tp-search kbd{ margin-left:auto; border:1px solid var(--bd); border-radius:5px; padding:1px 5px; font:inherit; font-size:10px; background:var(--s50); }
.tp-bell{ width:33px;height:33px;border-radius:8px;display:grid;place-items:center;color:var(--mut);position:relative; }
.tp-bell svg{width:16px;height:16px} .tp-bell i{ position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--red500); border:2px solid var(--card); }
.tp-user{ display:flex; align-items:center; gap:8px; }
.tp-av{ width:27px;height:27px;border-radius:50%;background:var(--e100);color:var(--e700);display:grid;place-items:center;font-size:10.5px;font-weight:600; }
.tp-user b{font-size:12px} .tp-user small{display:block;font-size:9px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}

/* screen stage: screens stacked, cross-faded */
.tp-screens { position:relative; flex:1; min-height:0; }
.tp-screen { position:absolute; inset:0; padding:18px; overflow:hidden; opacity:0; transform:translateY(8px) scale(.995); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
.tp-screen.show { opacity:1; transform:none; }
.tp-scr-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; }
.tp-scr-head h3{ margin:0; font-size:18px; font-weight:600; letter-spacing:-.02em; }
.tp-scr-head p{ margin:3px 0 0; font-size:11.5px; color:var(--mut); }
.tp-tabs{ display:inline-flex; border:1px solid var(--bd); background:var(--card); border-radius:8px; padding:2px; }
.tp-tabs span{ padding:5px 10px; border-radius:6px; font-size:11px; font-weight:500; color:var(--mut); } .tp-tabs span.on{ background:var(--e600); color:#fff; }
.tp-card{ background:var(--card); border:1px solid var(--bd); border-radius:14px; box-shadow:var(--sh); }
.tp-ph{ display:flex; align-items:center; justify-content:space-between; padding:11px 15px; border-bottom:1px solid rgba(230,233,237,.6); }
.tp-ph h4{ margin:0; font-size:13px; font-weight:600; } .tp-ph .lk{ font-size:11px; font-weight:600; color:var(--e700); }

/* KPI tiles */
.tp-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.tp-kpi{ display:flex; gap:10px; padding:12px; background:var(--card); border:1px solid var(--bd); border-radius:14px; box-shadow:var(--sh); }
.tp-kpi-ic{ width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none; } .tp-kpi-ic svg{width:15px;height:15px}
.tp-kpi-tx{ display:flex; flex-direction:column; min-width:0; }
.tp-kpi .v{ font-size:18px;font-weight:600;line-height:1; font-variant-numeric:tabular-nums; } .tp-kpi .l{ margin-top:5px;font-size:10.5px;color:var(--ink);font-weight:500 } .tp-kpi .c{ font-size:10px;color:var(--mut) }
.t-em{background:var(--e50);color:var(--e700)} .t-bl{background:var(--blue50);color:var(--blue700)} .t-vi{background:var(--vio50);color:var(--vio700)} .t-am{background:var(--amb50);color:var(--amb700)} .t-pk{background:var(--pink50);color:var(--pink700)} .t-rd{background:var(--red50);color:var(--red700)}
/* chart */
.tp-2col{ display:grid; grid-template-columns:1.7fr 1fr; gap:12px; margin-top:12px; }
.tp-bars{ display:flex; align-items:flex-end; gap:8px; height:150px; padding:15px; }
.tp-bg{ flex:1; display:flex; align-items:flex-end; justify-content:center; gap:3px; height:100%; }
.tp-bg i{ width:9px; border-radius:3px 3px 0 0; transform:scaleY(.15); transform-origin:bottom; }
.tp-screen.show .tp-bg i{ animation:tp-grow .7s cubic-bezier(.2,.7,.3,1) forwards; }
.tp-bg i.o{ background:var(--e500); } .tp-bg i.n{ background:var(--blue500); }
@keyframes tp-grow{to{transform:scaleY(1)}}
.tp-donut{ width:130px;height:130px;border-radius:50%;margin:6px auto;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--e500) 0 72%, var(--vio500) 72% 92%, var(--red500) 92% 94%, #CBD5E1 94% 100%); }
.tp-donut::after{content:"";position:absolute;width:84px;height:84px;border-radius:50%;background:var(--card)}
.tp-donut b{position:relative;z-index:1;font-size:17px;font-weight:600}
.tp-legend{ padding:0 15px 14px; } .tp-legend li{ display:flex;align-items:center;gap:8px;font-size:11px;list-style:none;padding:4px 0 } .tp-legend i{width:8px;height:8px;border-radius:50%} .tp-legend .nm{flex:1;color:var(--mut)} .tp-legend .vl{font-weight:600}

/* list rows (recent chats / contacts) */
.tp-rows{ padding:6px 15px 12px; }
.tp-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(230,233,237,.7); }
.tp-row:first-child{border-top:none}
.tp-rav{ width:32px;height:32px;border-radius:50%;background:var(--e100);color:var(--e700);display:grid;place-items:center;font-size:11px;font-weight:600;flex:none }
.tp-rt{ min-width:0;flex:1 } .tp-rt b{ font-size:12.5px;font-weight:600;display:block } .tp-rt span{ font-size:11px;color:var(--mut);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.tp-rmeta{ font-size:10.5px;color:var(--mut);flex:none } .tp-badge{ min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--e600);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center }
.tp-tag{ font-size:10px;padding:2px 8px;border-radius:999px;background:var(--e50);color:var(--e700);font-weight:600 } .tp-tag.b{background:var(--blue50);color:var(--blue700)} .tp-tag.a{background:var(--amb50);color:var(--amb700)}

/* inbox screen */
.tp-inbox{ display:grid; grid-template-columns:230px 1fr; height:100%; border:1px solid var(--bd); border-radius:14px; overflow:hidden; background:var(--card); box-shadow:var(--sh); }
.tp-convs{ border-right:1px solid var(--bd); overflow:hidden; }
.tp-conv{ display:flex; gap:9px; padding:11px 13px; border-bottom:1px solid rgba(230,233,237,.6); }
.tp-conv.sel{ background:var(--e50); box-shadow:inset 3px 0 0 var(--e500); }
.tp-thread{ display:flex; flex-direction:column; background:#EAE6DF; }
.tp-thr-head{ display:flex; align-items:center; gap:9px; padding:10px 14px; background:var(--card); border-bottom:1px solid var(--bd); }
.tp-msgs{ flex:1; padding:16px; display:flex; flex-direction:column; gap:9px; }
.tp-bub{ max-width:74%; padding:8px 11px; border-radius:11px; font-size:12px; line-height:1.4; box-shadow:0 1px 1px rgba(0,0,0,.05); }
.tp-bub.in{ background:#fff; align-self:flex-start; border-top-left-radius:3px; } .tp-bub.out{ background:#D9FDD3; align-self:flex-end; border-top-right-radius:3px; }
.tp-bub .m{ display:block; font-size:9.5px; color:#667; text-align:right; margin-top:3px; }
.tp-typing{ align-self:flex-start; background:#fff; border-radius:11px; padding:10px 13px; display:inline-flex; gap:4px; }
.tp-typing span{ width:6px;height:6px;border-radius:50%;background:#9AA6A0; animation:tp-ty 1.2s infinite; } .tp-typing span:nth-child(2){animation-delay:.18s} .tp-typing span:nth-child(3){animation-delay:.36s}
@keyframes tp-ty{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.tp-composer{ padding:10px 14px; background:var(--card); border-top:1px solid var(--bd); display:flex; align-items:center; gap:9px; }
.tp-composer .box{ flex:1; height:32px; border-radius:999px; background:var(--s50); border:1px solid var(--bd); display:flex; align-items:center; padding:0 13px; font-size:11.5px; color:var(--mut); }
.tp-send{ width:32px;height:32px;border-radius:50%;background:var(--e600);color:#fff;display:grid;place-items:center } .tp-send svg{width:15px;height:15px;color:#fff}

/* table (campaigns/contacts) */
.tp-table{ width:100%; border-collapse:collapse; font-size:11.5px; }
.tp-table th{ text-align:left; padding:9px 14px; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); border-bottom:1px solid rgba(230,233,237,.7); font-weight:600; }
.tp-table td{ padding:10px 14px; border-bottom:1px solid rgba(230,233,237,.5); }
.tp-pill{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:600; }
.tp-pill.run{ background:var(--blue50); color:var(--blue700) } .tp-pill.done{ background:var(--e50); color:var(--e700) } .tp-pill.sched{ background:var(--amb50); color:var(--amb700) }
.tp-prog{ height:6px; width:80px; border-radius:999px; background:var(--s100); overflow:hidden; display:inline-block; vertical-align:middle; } .tp-prog i{ display:block; height:100%; background:var(--e500); border-radius:999px; transform:scaleX(0); transform-origin:left; }
.tp-screen.show .tp-prog i{ animation:tp-fill .9s ease forwards; } @keyframes tp-fill{to{transform:scaleX(1)}}

/* templates screen: builder + phone */
.tp-tpl{ display:grid; grid-template-columns:1fr 250px; gap:14px; height:100%; }
.tp-tpl-fields{ display:flex; flex-direction:column; gap:9px; }
.tp-field{ background:var(--card); border:1px solid var(--bd); border-radius:10px; padding:10px 12px; }
.tp-field .lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); font-weight:600; } .tp-field .val{ margin-top:5px; font-size:12px; }
.tp-phone{ background:#0B141A; border-radius:22px; padding:9px; box-shadow:0 12px 30px -12px rgba(2,6,23,.5); }
.tp-phone-scr{ background:#EAE6DF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>"); border-radius:15px; overflow:hidden; height:100%; display:flex; flex-direction:column; }
.tp-phone-head{ background:var(--e700); color:#fff; padding:9px 12px; font-size:11px; font-weight:600; display:flex; align-items:center; gap:8px; }
.tp-phone-head svg{ width:16px; height:16px; }
.tp-phone-body{ background:#EAE6DF; }
.tp-phone-body{ padding:12px; flex:1; }
.tp-tpl-msg{ background:#fff; border-radius:10px; border-top-left-radius:3px; padding:10px; font-size:11px; line-height:1.5; box-shadow:0 1px 1px rgba(0,0,0,.06); }
.tp-tpl-msg .btns{ margin-top:9px; border-top:1px solid #eee; padding-top:7px; display:flex; flex-direction:column; gap:5px; } .tp-tpl-msg .btns span{ color:var(--blue700); text-align:center; font-size:11px; font-weight:600; }

/* animated cursor + click ring */
.tp-cursor{ position:absolute; z-index:20; left:0; top:0; width:20px; height:20px; pointer-events:none; transition:transform .8s cubic-bezier(.5,.05,.2,1); filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.tp-cursor svg{ width:20px; height:20px; stroke:#0B1220; stroke-width:1.2; fill:#fff; }
.tp-cursor.click::after{ content:""; position:absolute; left:-6px; top:-6px; width:30px; height:30px; border-radius:50%; border:2px solid var(--e500); animation:tp-ring .5s ease-out; }
@keyframes tp-ring{ from{transform:scale(.3);opacity:.9} to{transform:scale(1.3);opacity:0} }

/* player controls */
.tp-controls{ display:flex; align-items:center; gap:14px; padding:12px 16px; background:#0B1220; border-top:1px solid #1E293B; }
.tp-play{ width:34px; height:34px; border-radius:50%; background:var(--e600); color:#fff; border:none; display:grid; place-items:center; cursor:pointer; flex:none; } .tp-play svg{ width:16px; height:16px; color:#fff; }
.tp-play:hover{ background:var(--e500); }
.tp-track{ flex:1; }
.tp-steps{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.tp-step{ display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:999px; background:#151E2E; color:#8A97A8; font-size:10.5px; font-weight:600; border:none; cursor:pointer; transition:.2s; }
.tp-step.on{ background:rgba(16,185,129,.16); color:#6EE7B7; }
.tp-step b{ opacity:.6; font-weight:700 }
.tp-bar{ height:4px; border-radius:999px; background:#1E293B; overflow:hidden; } .tp-bar i{ display:block; height:100%; width:0; background:var(--e500); border-radius:999px; }

@media(max-width:760px){
  .tp-side{display:none} .tp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .tp-2col{grid-template-columns:1fr} .tp-tpl{grid-template-columns:1fr} .tp-phone{display:none} .tp-inbox{grid-template-columns:1fr} .tp-convs{display:none} .tp-cursor{display:none}
}