:root{
  --ink:#10281f; --chalk:#f2f6f1; --mist:#dce7df; --signal:#17a36b; --amber:#f0b034; --muted:#587065;
  --head:'Bricolage Grotesque',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{font-family:var(--body);background:var(--chalk);color:var(--ink);line-height:1.6;font-size:1.0625rem;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--head);line-height:1.08;letter-spacing:-.025em}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
section,header,footer{padding-inline:clamp(1.25rem,5vw,4rem)}
.hero,.facts,.features,.engine,.cta,.nav,footer{max-width:1240px;margin-inline:auto}

/* Nav */
.nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding-block:1rem;background:var(--chalk)}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--head);font-weight:800;font-size:1.25rem;letter-spacing:-.03em}
.links{display:flex;align-items:center;gap:1.75rem;font-weight:500;font-size:.95rem}
.links a:not(.pill):hover{color:var(--signal)}
.pill{background:var(--ink);color:var(--chalk);padding:.55rem 1.1rem;border-radius:99px;transition:background .2s}
.pill:hover{background:var(--signal)}
.menu-btn{display:none;font:inherit;font-weight:700;background:none;border:2px solid var(--ink);border-radius:99px;padding:.3rem .9rem;color:var(--ink);cursor:pointer}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(2.5rem,7vw,5.5rem)}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.6rem);font-weight:800;max-width:14ch}
.hero-copy>p:not(.ticks){margin-top:1.4rem;max-width:46ch;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.btn{font-weight:700;padding:.85rem 1.6rem;border-radius:12px;border:2px solid var(--ink);transition:transform .15s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--ink);color:var(--chalk)}
.btn.solid:hover{background:var(--signal);border-color:var(--signal)}
.btn.ghost:hover{background:var(--mist)}
.ticks{margin-top:1.6rem;font-size:.9rem;color:var(--muted)}

/* Chat demo */
.demo{position:relative;padding-bottom:2.5rem}
.phone{background:var(--ink);border-radius:28px;padding:1rem;max-width:410px;margin-inline:auto;box-shadow:0 30px 60px -30px rgba(16,40,31,.6)}
.phone-top{display:flex;align-items:center;gap:.5rem;color:var(--chalk);font-weight:700;font-size:.95rem;padding:.4rem .5rem .9rem}
.phone-top small{margin-left:auto;font-weight:400;opacity:.6}
.dot{width:10px;height:10px;border-radius:50%;background:var(--signal)}
.thread{background:#e7efe9;border-radius:18px;min-height:330px;padding:1rem;display:flex;flex-direction:column;gap:.55rem}
.msg{max-width:82%;padding:.6rem .85rem;border-radius:14px;font-size:.92rem;line-height:1.4;animation:pop .3s ease both}
.msg.in{background:#fff;border-bottom-left-radius:4px;align-self:flex-start}
.msg.out{background:#c9efd9;border-bottom-right-radius:4px;align-self:flex-end}
.typing{align-self:flex-start;background:#fff;border-radius:14px;padding:.7rem .9rem;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}

.lead-card{position:absolute;right:-.5rem;bottom:0;width:min(250px,70%);background:var(--amber);border-radius:16px;padding:1rem 1.1rem;transform:rotate(2deg);box-shadow:0 14px 30px -14px rgba(16,40,31,.5)}
.lead-card small{font-size:.75rem;font-weight:700;opacity:.75}
.lead-card strong{display:block;font-family:var(--head);font-size:1.15rem;margin:.1rem 0 .4rem}
.lead-card li{font-size:.82rem;display:flex;gap:.5rem;line-height:1.5}
.lead-card li::before{content:attr(data-k);font-weight:700;min-width:3.4rem}
#status{transition:opacity .3s}

/* Facts */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:1.6rem;border-block:2px solid var(--ink)}
.facts p{color:var(--muted);font-size:.95rem}
.facts b{display:block;font-family:var(--head);font-size:2.2rem;color:var(--ink);line-height:1.1}

/* Features */
.features{padding-block:clamp(4rem,9vw,7rem)}
.features .head{max-width:1080px;margin-inline:auto;margin-bottom:2.5rem}
.head h2,.engine h2,.cta h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800}
.head p{margin-top:.8rem;color:var(--muted)}
.lead-feature{max-width:1080px;margin-inline:auto;background:var(--ink);color:var(--chalk);border-radius:24px;padding:clamp(1.75rem,4vw,3rem);margin-bottom:2rem;width:100%}
.lead-feature h3{font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:.8rem}
.lead-feature p{max-width:56ch;opacity:.85}
.tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.tags li{border:1.5px solid var(--signal);color:#9be8c4;border-radius:99px;padding:.3rem .9rem;font-size:.88rem}
/* Accordion — Perfectly Centered 1080px Standard Presentation Width */
.accordion{display:grid;gap:1rem;max-width:1080px;margin-inline:auto;width:100%}
.acc-item{border:2px solid var(--mist);border-radius:20px;transition:border-color .3s;width:100%;overflow:hidden;background:#fff}
.acc-item.active{border-color:var(--signal);box-shadow:0 12px 30px rgba(16,40,31,0.08)}
.acc-trigger{width:100%;display:flex;align-items:center;gap:1.2rem;padding:1.4rem 1.6rem;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;color:var(--ink);transition:background .2s;border-radius:18px}
.acc-trigger:hover{background:var(--mist)}
.acc-num{font-family:var(--head);font-weight:800;font-size:1.1rem;color:var(--signal);min-width:2rem}
.acc-label{flex:1}
.acc-label h3{font-size:1.35rem;margin-bottom:.15rem}
.acc-label p{font-size:.92rem;color:var(--muted);line-height:1.4}
.acc-icon{width:2.2rem;height:2.2rem;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;flex-shrink:0;transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s ease,border-color .25s ease}
.acc-icon::before{content:'+';font-size:1.35rem;font-weight:700;line-height:1;display:block;transform-origin:center center;transition:transform .35s cubic-bezier(.16,1,.3,1),color .25s ease}
.acc-item.active .acc-icon{background:var(--signal);border-color:var(--signal)}
.acc-item.active .acc-icon::before{transform:rotate(45deg);color:#fff}

.acc-panel{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.2,.9,.3,1),opacity .25s ease;opacity:0}
.acc-item.active .acc-panel{opacity:1}

.acc-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,400px);gap:clamp(1.5rem,3vw,2.5rem);padding:0 1.6rem 2rem;align-items:start}

/* Problem / Solution blocks */
.acc-problem,.acc-solution{padding:1.2rem 1.4rem;border-radius:16px;margin-bottom:1rem}
.acc-problem{background:#fef3f0;border:1.5px solid #f5c6b8}
.acc-solution{background:#eef9f3;border:1.5px solid #b5e3cb}
.acc-problem h4{font-family:var(--head);font-size:1.15rem;margin:.4rem 0 .4rem;line-height:1.25;color:var(--ink)}
.acc-problem p,.acc-solution p{font-size:.9rem;color:var(--muted);line-height:1.55}
.acc-problem p strong,.acc-solution p strong{color:var(--ink)}

.acc-badge{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.25rem .7rem;border-radius:99px}
.acc-badge.red{background:#fde0d8;color:#c0392b}
.acc-badge.green{background:#d4f5e4;color:#0e7a42}

/* Stats row */
.acc-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem}
.acc-stat{background:var(--chalk);border:1.5px solid var(--mist);border-radius:14px;padding:.85rem .75rem;text-align:center;transition:transform .2s}
.acc-stat:hover{transform:translateY(-2px)}
.acc-stats-row.solution .acc-stat{background:#eef9f3;border-color:#b5e3cb}
.acc-stat-num{display:block;font-family:var(--head);font-size:1.6rem;font-weight:800;line-height:1.1;margin-bottom:.2rem}
.acc-stat-num.red{color:#c0392b}
.acc-stat-num.green{color:var(--signal)}
.acc-stat-label{font-size:.76rem;color:var(--muted);line-height:1.3}

/* ══════════════════════════════════════════
   Section 01: Core Intelligence Engines Dropdowns
   (RAG Fetch, Sales Agent, Scheduling Agent)
   ══════════════════════════════════════════ */
.ai-pillars-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-pillars-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.ai-pillars-head h5 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.ai-pillars-badge {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  white-space: nowrap;
}

.ai-pillar-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.ai-pillar-item[open] {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ai-pillar-summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
}

.ai-pillar-summary::-webkit-details-marker {
  display: none;
}

.pillar-summary-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.pillar-icon-box {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.pillar-icon-box.cyan {
  background: #ecfeff;
  border: 1px solid #a5f3fc;
}

.pillar-icon-box.purple {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
}

.pillar-icon-box.green {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.pillar-summary-info {
  min-width: 0;
  flex: 1;
}

.pillar-summary-info strong {
  display: block;
  font-size: 0.76rem;
  color: #0f172a;
  line-height: 1.2;
}

.pillar-summary-info small {
  display: block;
  font-size: 0.64rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pillar-summary-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pillar-tag-pill {
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

.pillar-tag-pill.cyan {
  background: #ecfeff;
  border: 1px solid #a5f3fc;
  color: #0891b2;
}

.pillar-tag-pill.purple {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #7c3aed;
}

.pillar-tag-pill.green {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #059669;
}

.pillar-arrow-icon {
  font-size: 0.65rem;
  color: #94a3b8;
  transition: transform 0.2s ease;
  display: inline-block;
}

.ai-pillar-item[open] .pillar-arrow-icon {
  transform: rotate(180deg);
  color: #2563eb;
}

.ai-pillar-body {
  padding: 6px 12px 10px 44px;
  border-top: 1px solid #f1f5f9;
  background: #fafafa;
}

.ai-pillar-body ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ai-pillar-body li {
  font-size: 0.72rem;
  line-height: 1.35;
  color: #475569;
  position: relative;
  padding-left: 12px;
}

.ai-pillar-body li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #3b82f6;
  font-weight: 900;
}

.ai-pillar-body li strong {
  color: #0f172a;
  font-weight: 700;
}

.multi-arch-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.multi-arch-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.multi-arch-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

/* WhatsApp Phone Mockup */
.acc-phone{position:sticky;top:5.5rem;width:100%}

/* Industry Tabs */
.industry-tabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem;justify-content:center}
.ind-tab{font-family:var(--body);font-size:.8rem;font-weight:600;padding:.45rem .9rem;border-radius:99px;border:1.5px solid var(--mist);background:var(--chalk);color:var(--muted);cursor:pointer;transition:all .2s;white-space:nowrap}
.ind-tab:hover{border-color:var(--signal);color:var(--ink)}
.ind-tab.active{background:var(--ink);color:var(--chalk);border-color:var(--ink)}

.wa-phone-frame{width:100%;max-width:400px;margin-inline:auto;border-radius:34px;background:#000;padding:8px;box-shadow:0 20px 60px -20px rgba(16,40,31,.5),inset 0 0 0 2px #222;position:relative;box-sizing:border-box}
.wa-phone-frame.wide{width:100%;max-width:400px;height:620px;display:flex;flex-direction:column}
.wa-phone-notch{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:95px;height:20px;background:#000;border-radius:0 0 14px 14px;z-index:10;pointer-events:none}
.wa-phone-screen{border-radius:26px;overflow:hidden;display:flex;flex-direction:column;background:#efeae2;height:100%;min-height:0;position:relative}

/* WA Header */
.wa-header-bar{background:#008069;padding:32px 14px 10px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.wa-back{color:#fff;font-size:1.2rem;font-weight:700}
.wa-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.8rem;flex-shrink:0}
.wa-contact{flex:1;min-width:0}
.wa-contact strong{display:block;color:#fff;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-contact small{color:rgba(255,255,255,.75);font-size:.72rem}
.wa-icons{color:rgba(255,255,255,.85);font-size:.9rem;flex-shrink:0;letter-spacing:2px}

/* WA Chat Area */
.wa-chat-area{padding:12px 12px 16px;display:flex;flex-direction:column;gap:8px;flex:1 1 0px;min-height:0;overflow-y:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background-color:#efeae2;background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23c9c2b6' fill-opacity='0.35'/%3E%3Ccircle cx='30' cy='30' r='0.8' fill='%23c9c2b6' fill-opacity='0.25'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23p)'/%3E%3C/svg%3E")}
.wa-chat-area::-webkit-scrollbar{width:4px}
.wa-chat-area::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}

.wa-date-chip{align-self:center;background:rgba(255,255,255,.9);padding:3px 12px;border-radius:7px;font-size:.68rem;color:#54656f;box-shadow:0 1px 1px rgba(0,0,0,.05);flex-shrink:0}

.wa-system-msg{align-self:center;background:rgba(255,255,255,.9);padding:5px 12px;border-radius:8px;font-size:.74rem;color:#54656f;text-align:center;margin-bottom:2px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.05);flex-shrink:0}

.wa-bubble-out{align-self:flex-end;max-width:92%;background:#d9fdd3;border-radius:10px;border-top-right-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.08);flex-shrink:0}
.wa-bubble-in{align-self:flex-start;max-width:92%;background:#fff;border-radius:10px;border-top-left-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.08);flex-shrink:0}
.wa-bubble-content{padding:7px 10px 3px;font-size:.85rem;color:#111b21;line-height:1.45;font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;word-wrap:break-word;overflow-wrap:break-word}
.wa-bubble-content strong{font-weight:700}
.wa-bubble-meta{display:flex;justify-content:flex-end;align-items:center;gap:3px;padding:0 8px 5px}
.wa-time{font-size:.64rem;color:#667781}
.wa-ticks{font-size:.8rem;color:#53bdeb;line-height:1}

.wa-reply-badge{align-self:center;background:#d4f5e4;color:#0e7a42;font-size:.72rem;font-weight:700;padding:4px 14px;border-radius:99px;margin:2px 0;flex-shrink:0}

/* WA Interactive Stacked Buttons */
.wa-btn-row-mock{
  align-self: flex-end;
  max-width: 92%;
  width: 92%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
  flex-shrink: 0;
}
.wa-cta-btn{
  background: #ffffff;
  border-radius: 9px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #00a5ca;
  font-size: 0.83rem;
  font-weight: 600;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 1px 2px rgba(17, 27, 33, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-align: left;
}
.wa-cta-btn span:first-child {
  flex: 1;
  line-height: 1.35;
}
.wa-cta-btn:hover {
  background: #f7faf9;
  transform: translateY(-1px);
}
.wa-cta-btn .btn-arrow {
  font-size: 1rem;
  opacity: 0.8;
  flex-shrink: 0;
  font-weight: 700;
  display: inline-block;
  transition: transform 0.15s;
}
.wa-cta-btn:hover .btn-arrow {
  transform: translateX(2px);
}

.wa-typing-indicator {
  align-self: flex-start;
  background: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.wa-typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8696a0;
  animation: typingPulse 1.2s infinite ease-in-out;
}
.wa-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.wa-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

.wa-bubble-in, .wa-bubble-out, .wa-reply-badge, .wa-btn-row-mock {
  animation: waMsgFadeIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes waMsgFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* WA Input Bar */
.wa-input-bar{background:#f0f2f5;padding:8px 10px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.wa-input-field{flex:1;background:#fff;border-radius:20px;padding:8px 14px;font-size:.82rem;color:#667781}
.wa-send-btn{width:34px;height:34px;border-radius:50%;background:#008069;display:grid;place-items:center;color:#fff;font-size:.85rem;flex-shrink:0}

/* ══════════════════════════════════════════
   Authentic SaaS Presentation Showcase
   ══════════════════════════════════════════ */
.acc-full-layout {
  padding: 0 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  box-sizing: border-box;
}

.acc-full-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--mist);
  padding-bottom: 1.2rem;
}

.acc-full-copy {
  max-width: 60ch;
}
.acc-full-copy h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  margin: 0.4rem 0 0.5rem;
  line-height: 1.2;
}
.acc-full-copy p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

.acc-quick-metrics {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.quick-metric {
  background: #ffffff;
  border: 1.5px solid var(--mist);
  border-radius: 14px;
  padding: 0.6rem 1rem;
  display: flex;
  flex-direction: column;
  min-width: 120px;
}
.quick-metric strong {
  font-family: var(--head);
  font-size: 1.5rem;
  color: var(--signal);
  line-height: 1.1;
}
.quick-metric span {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Laptop Mockup Shell (Authentic MacBook Pro Proportions) ── */
.laptop-mockup-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 0.8rem;
}

.laptop-shell {
  width: 100%;
  max-width: 1080px;
  background: #1c2128;
  border-radius: 18px 18px 0 0;
  padding: 10px 10px 0;
  box-shadow: 0 30px 80px -25px rgba(16, 40, 31, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}

.laptop-bezel {
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.laptop-cam {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #333c4d;
}

.laptop-screen {
  background: #0f131a;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.4);
}

.laptop-base {
  width: 100%;
  max-width: 1120px;
  height: 16px;
  background: linear-gradient(180deg, #d8dee8 0%, #aeb7c4 100%);
  border-radius: 0 0 16px 16px;
  position: relative;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}
.laptop-base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 5px;
  background: #8e98a8;
  border-radius: 0 0 6px 6px;
}
  background: #8e98a8;
  border-radius: 0 0 6px 6px;
}

/* ── Browser Chrome ── */
.browser-chrome {
  background: #171b22;
  border-bottom: 1px solid #242933;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.window-dots {
  display: flex;
  gap: 6px;
}
.window-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.window-dots .dot.red { background: #ff5f56; }
.window-dots .dot.yellow { background: #ffbd2e; }
.window-dots .dot.green { background: #27c93f; }

.browser-tabs {
  display: flex;
}
.browser-tab {
  background: #0f131a;
  border-radius: 8px 8px 0 0;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e6edf3;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid #242933;
  border-bottom: none;
}
.tab-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.browser-url-bar {
  flex: 1;
  max-width: 480px;
  background: #0d1117;
  border: 1px solid #242933;
  border-radius: 6px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #8b949e;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.lock-icon { font-size: 0.7rem; }
.url-text { color: #58a6ff; }

.browser-actions {
  margin-left: auto;
}
.live-pill {
  background: rgba(39, 201, 63, 0.15);
  border: 1px solid rgba(39, 201, 63, 0.4);
  color: #3fb950;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3fb950;
  animation: pulseDot 1.5s infinite;
}
@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.5; }
}

/* ── Inside CRM Application ── */
.crm-app-viewport {
  display: block;
  width: 100%;
  min-height: 500px;
  background: #090d13;
  color: #e6edf3;
}

/* CRM Sidebar */
.crm-sidebar {
  background: #0f141c;
  border-right: 1px solid #1c222c;
  padding: 1.2rem 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.crm-side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0.6rem 1.2rem;
  font-family: var(--head);
  font-weight: 800;
  font-size: 1.05rem;
  border-bottom: 1px solid #1c222c;
}
.crm-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--signal);
  color: #04180f;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.8rem;
}

.crm-nav-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 1rem;
}
.crm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #8b949e;
  transition: all 0.15s;
}
.crm-nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #e6edf3;
}
.crm-nav-item.active {
  background: rgba(23, 163, 107, 0.18);
  color: #7ef2be;
  font-weight: 600;
}
.nav-badge {
  margin-left: auto;
  background: #1c222c;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 0.7rem;
  color: #8b949e;
}

.crm-side-footer {
  border-top: 1px solid #1c222c;
  padding-top: 1rem;
}
.crm-user-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0.4rem;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #238636;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.user-info strong {
  display: block;
  font-size: 0.8rem;
  color: #f0f6fc;
}
.user-info small {
  font-size: 0.7rem;
  color: #7ee787;
}

/* ── CRM Main Pipeline View (Authentic RNS Brains CRM UI) ── */
.crm-main-board {
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-x: hidden;
  background: #0d1117;
}

/* Top CRM Header */
.crm-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #21262d;
}
.crm-title-area h1 {
  font-size: 1.05rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f0f6fc;
}
.crm-lead-subtitle {
  font-size: 0.72rem;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1px;
}
.crm-lead-subtitle .text-green { color: #3fb950; }

.crm-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.crm-user-selector {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #c9d1d9;
}
.crm-action-btn {
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.crm-action-btn.reminder {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
}
.badge-amber {
  background: #f59e0b;
  color: #000;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 99px;
  margin-left: 2px;
}
.crm-action-btn.primary {
  background: #f0f6fc;
  color: #0d1117;
  border: 1px solid transparent;
}
.crm-action-btn.secondary {
  border: 1px solid #30363d;
  color: #8b949e;
}

/* ── Stage Tabs Bar (Exact RNS Brains Stage Tabs) ── */
.crm-stage-tabs-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid #21262d;
  overflow-x: auto;
  padding-bottom: 0;
}
.crm-stage-tabs-bar::-webkit-scrollbar { height: 3px; }
.crm-stage-tabs-bar::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }

.crm-tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 12px 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--body);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8b949e;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.crm-tab-btn:hover {
  color: #f0f6fc;
}
.crm-tab-btn.active {
  color: #ffffff;
}
.tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.tab-count-chip {
  font-size: 0.66rem;
  background: #21262d;
  color: #8b949e;
  padding: 1px 6px;
  border-radius: 99px;
  font-weight: 700;
}
.tab-count-chip.active {
  color: #ffffff;
}

/* ── Search & Filter Row ── */
.crm-search-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0 6px;
}
.crm-search-box {
  flex: 1;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 6px 10px;
}
.search-glass { font-size: 0.75rem; opacity: 0.6; }
.crm-search-box input {
  background: none;
  border: none;
  color: #c9d1d9;
  font-size: 0.75rem;
  width: 100%;
  outline: none;
}
.crm-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-chip {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: #161b22;
  border: 1px solid #21262d;
  color: #8b949e;
  cursor: pointer;
}
.filter-chip.active {
  background: rgba(23, 163, 107, 0.15);
  border-color: rgba(23, 163, 107, 0.4);
  color: #7ef2be;
}

/* ── Stage Content Layout (Leads Panel + Live Inspector Drawer) ── */
.crm-stage-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 12px;
  align-items: start;
}

/* Leads List Panel */
.crm-stage-leads-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stage-info-banner {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}
.stage-banner-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stage-badge-pill {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}
.stage-auto-status {
  font-size: 0.7rem;
  color: #3fb950;
  font-weight: 600;
}

.crm-leads-list-container {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}
.crm-leads-list-container::-webkit-scrollbar { width: 3px; }
.crm-leads-list-container::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }

/* Lead Card in List */
.crm-lead-card-item {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.crm-lead-card-item:hover {
  background: #1c2129;
  border-color: #388bfd;
  transform: translateY(-1px);
}
.crm-lead-card-item.selected {
  border: 1.5px solid var(--signal);
  background: #121c19;
  box-shadow: 0 0 12px rgba(23, 163, 107, 0.25);
}

.lead-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.lead-identity strong {
  display: block;
  font-size: 0.84rem;
  color: #f0f6fc;
}
.lead-identity small {
  font-size: 0.72rem;
  color: #8b949e;
}
.lead-val-score {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lead-deal-price {
  font-size: 0.82rem;
  font-weight: 800;
  color: #3fb950;
}
.lead-score-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.lead-score-badge.high {
  background: rgba(35, 134, 54, 0.2);
  color: #7ee787;
}

.lead-snippet-box {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.73rem;
  color: #c9d1d9;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 6px;
}
.snippet-wa-icon { color: #25d366; font-size: 0.75rem; }

.lead-item-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: #8b949e;
}
.lead-tags-group {
  display: flex;
  gap: 4px;
}
.mini-tag {
  background: #21262d;
  padding: 1px 6px;
  border-radius: 4px;
  color: #8b949e;
}

/* ── Lead Detail Inspection Drawer (Right Panel) ── */
.crm-drawer-panel {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: 380px;
  overflow-y: auto;
}
.drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #21262d;
  padding-bottom: 8px;
}
.drawer-title strong {
  display: block;
  font-size: 0.9rem;
  color: #f0f6fc;
}
.drawer-title small {
  font-size: 0.72rem;
  color: #8b949e;
}

.drawer-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.d-metric-box {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
}
.d-metric-box small {
  font-size: 0.66rem;
  color: #8b949e;
  text-transform: uppercase;
}
.d-metric-box strong {
  font-size: 0.88rem;
  color: #f0f6fc;
}

.drawer-trigger-card {
  background: rgba(23, 163, 107, 0.08);
  border: 1px dashed rgba(23, 163, 107, 0.35);
  border-radius: 8px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.d-trigger-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--amber);
  text-transform: uppercase;
}
.d-trigger-desc {
  font-size: 0.75rem;
  color: #c9d1d9;
  line-height: 1.35;
}

.drawer-chat-preview {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.d-chat-label {
  font-size: 0.68rem;
  color: #8b949e;
  text-transform: uppercase;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.d-chat-bubble {
  font-size: 0.74rem;
  color: #e6edf3;
  line-height: 1.4;
  background: #161b22;
  border-radius: 6px;
  padding: 7px 9px;
  border-left: 3px solid #25d366;
}

.drawer-avatar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.drawer-avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #21262d;
  border: 1.5px solid #30363d;
  color: #58a6ff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
}

.drawer-stage-move-actions {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.move-label {
  font-size: 0.68rem;
  color: #8b949e;
  text-transform: uppercase;
  font-weight: 700;
}
.stage-move-btns {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.move-btn {
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.move-btn:hover {
  background: var(--signal);
  color: #04180f;
  border-color: var(--signal);
}

/* ── Analytics Timeframe Toggle ── */
.analytics-timeframe-toggle {
  display: flex;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.time-toggle-btn {
  background: none;
  border: none;
  color: #8b949e;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.time-toggle-btn.active {
  background: #21262d;
  color: #f0f6fc;
}
.time-toggle-btn:hover:not(.active) {
  color: #c9d1d9;
}

/* ── Authentic RNS Brains Terminal / Pipeline Intelligence Viewport ── */
.terminal-dashboard-viewport {
  background: #090d13;
  padding: 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: #e6edf3;
  min-height: 520px;
}

/* ── Terminal Top Header (from Dashboard.tsx) ── */
.terminal-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid #21262d;
}
.terminal-left-group {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.terminal-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.terminal-main-title {
  font-family: var(--head);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #f0f6fc;
  margin: 0;
  line-height: 1;
}
.terminal-sub-title {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #8b949e;
  margin: 0;
  opacity: 0.75;
}

/* View Mode Pills (Mine | All | Agent) */
.terminal-view-mode-pills {
  display: flex;
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.view-mode-pill {
  background: none;
  border: none;
  color: #8b949e;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.view-mode-pill:hover:not(.active) {
  color: #f0f6fc;
}
.view-mode-pill.active {
  background: #0d1117;
  color: #818cf8;
  border: 1px solid #30363d;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Tab Nav (Intelligence | Yield | Ledger) */
.terminal-nav-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
}
.t-nav-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #8b949e;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.t-nav-tab:hover {
  color: #f0f6fc;
}
.t-nav-tab.active {
  color: #818cf8;
  border-bottom-color: #818cf8;
}
.t-tab-icon {
  font-size: 0.8rem;
}

/* ── Pipeline Stages Strip (from OverviewTab.tsx) ── */
.terminal-stages-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stages-strip-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #8b949e;
  opacity: 0.75;
}
.stages-strip-label strong {
  color: #c9d1d9;
}
.terminal-stage-tiles-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.t-stage-tile {
  background: #161b22;
  border: 1px solid #21262d;
  border-top: 2.5px solid #6366f1;
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: all 0.15s ease;
}
.t-stage-tile:hover {
  border-color: #30363d;
  transform: translateY(-1px);
}
.t-stage-name {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #8b949e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-stage-count {
  font-family: var(--head);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.1;
}
.t-stage-share {
  font-size: 0.6rem;
  font-weight: 700;
  color: #6e7681;
}

/* ── Top 4 Summary KPI Grid (from OverviewTab.tsx) ── */
.terminal-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.t-kpi-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.15s;
}
.t-kpi-card:hover {
  border-color: #30363d;
}
.t-kpi-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8b949e;
}
.t-kpi-value {
  font-family: var(--head);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.t-kpi-sub {
  font-size: 0.68rem;
  color: #8b949e;
}
.pill-green {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 800;
}
.pill-pink {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 800;
}

/* ── 2 Main Clean Visual Panels Grid ── */
.terminal-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: 0.9rem;
  align-items: stretch;
}
.terminal-panel-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 0.95rem 1.05rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
}
.panel-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.panel-card-title h4 {
  font-size: 0.85rem;
  font-weight: 800;
  color: #f0f6fc;
  margin: 0 0 2px 0;
}
.panel-card-title p {
  font-size: 0.7rem;
  color: #8b949e;
  margin: 0;
}
.panel-pill {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.panel-pill.green {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.panel-pill.live {
  background: rgba(129, 140, 248, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(129, 140, 248, 0.3);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Funnel Stack (Left Panel) */
.t-funnel-stack {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.t-funnel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 7px;
  padding: 6px 9px;
}
.t-funnel-row.won-row {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.4);
}
.t-f-info {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 165px;
  flex-shrink: 0;
}
.t-f-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.t-f-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: #f0f6fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-f-count {
  font-size: 0.66rem;
  color: #8b949e;
  margin-left: auto;
}
.t-f-bar-track {
  flex: 1;
  height: 6px;
  background: #21262d;
  border-radius: 99px;
  overflow: hidden;
}
.t-f-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}
.t-f-pct {
  font-size: 0.68rem;
  font-weight: 800;
  color: #c9d1d9;
  width: 42px;
  text-align: right;
  flex-shrink: 0;
}
.t-funnel-connector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
}
.connector-line {
  width: 10px;
  height: 1px;
  background: #30363d;
}
.connector-badge {
  font-size: 0.63rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Activity Stream Feed (Right Panel) */
.terminal-stream-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.stream-event-item {
  display: flex;
  gap: 9px;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 7px 9px;
  align-items: flex-start;
  transition: border-color 0.15s;
}
.stream-event-item:hover {
  border-color: #30363d;
}
.stream-avatar {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.stream-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stream-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.stream-lead-name {
  font-size: 0.76rem;
  font-weight: 800;
  color: #f0f6fc;
}
.stream-stage-tag {
  font-size: 0.63rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}
.stream-time {
  font-size: 0.63rem;
  color: #8b949e;
  margin-left: auto;
}
.stream-desc {
  font-size: 0.71rem;
  color: #c9d1d9;
  margin: 0;
  line-height: 1.3;
}
.stream-badges {
  display: flex;
  gap: 5px;
  margin-top: 2px;
}
.mini-score-badge {
  font-size: 0.62rem;
  font-weight: 800;
  background: rgba(236, 72, 153, 0.12);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.25);
  padding: 0px 5px;
  border-radius: 4px;
}
.mini-score-badge.high {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}
.mini-meta-pill {
  font-size: 0.62rem;
  color: #8b949e;
  background: #161b22;
  padding: 0px 5px;
  border-radius: 4px;
  border: 1px solid #21262d;
}
.panel-foot-note {
  font-size: 0.68rem;
  color: #8b949e;
  border-top: 1px solid #21262d;
  padding-top: 6px;
}

/* ── Dynamic Terminal Tab Views (Intelligence | Yield | Leaderboard) ── */
.t-tab-view {
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  animation: fadeInTab 0.2s ease;
}
.t-tab-view.active {
  display: flex;
}
@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Yield View Components ── */
.yield-dropoff-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dropoff-card {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: all 0.15s;
}
.dropoff-card:hover {
  border-color: #30363d;
}
.dropoff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dropoff-flow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
}
.flow-arrow {
  color: #6e7681;
  font-size: 0.65rem;
}
.dropoff-metrics {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pass-rate-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
}
.drop-rate-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
}
.dropoff-bar-track {
  width: 100%;
  height: 6px;
  background: #21262d;
  border-radius: 99px;
  overflow: hidden;
}
.dropoff-bar-fill {
  height: 100%;
  background: #10b981;
  border-radius: 99px;
  transition: width 0.5s ease;
}
.dropoff-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  color: #8b949e;
}

/* Velocity & Timeline Panel */
.velocity-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.velocity-chip {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.velocity-chip small {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #8b949e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.velocity-chip strong {
  font-family: var(--head);
  font-size: 1.15rem;
  font-weight: 900;
  color: #f0f6fc;
}

/* Daily Inflow Bar Chart */
.daily-inflow-bars {
  height: 110px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #21262d;
  padding-bottom: 4px;
}
.inflow-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.inflow-bar-val {
  font-size: 0.65rem;
  font-weight: 800;
  color: #8b949e;
}
.inflow-bar-fill {
  width: 100%;
  max-width: 28px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
  transition: all 0.3s;
}
.inflow-bar-col:hover .inflow-bar-fill {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
}
.inflow-axis-x {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px 0;
}
.inflow-axis-x span {
  flex: 1;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #8b949e;
  text-transform: uppercase;
}

/* ── Leaderboard View Components (from TeamPerformanceTab.tsx) ── */
.leaderboard-container {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.leaderboard-podium-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.podium-head-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.podium-head-title h4 {
  font-size: 0.88rem;
  font-weight: 800;
  color: #f0f6fc;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.podium-head-title p {
  font-size: 0.68rem;
  color: #8b949e;
  margin: 0;
}

/* Podium Visual (Exact 2nd - 1st - 3rd Pedestals from TeamPerformanceTab.tsx) */
.leaderboard-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.2rem;
  padding: 0.5rem 0 0.2rem;
}
.podium-pedestal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 105px;
}
.podium-pedestal.first {
  width: 125px;
}
.podium-crown {
  font-size: 1.1rem;
  line-height: 1;
  animation: bounceSlow 2s infinite ease-in-out;
}
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.podium-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 900;
  border: 2px solid;
}
.podium-avatar.gold {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #f59e0b;
}
.podium-avatar.silver {
  background: rgba(148, 163, 184, 0.15);
  border-color: #94a3b8;
  color: #cbd5e1;
}
.podium-avatar.bronze {
  background: rgba(180, 83, 9, 0.15);
  border-color: #b45309;
  color: #d97706;
}
.podium-name {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f0f6fc;
}
.podium-name.gold { color: #f59e0b; }
.podium-block {
  width: 100%;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
}
.podium-block.gold {
  height: 65px;
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.45);
  color: #f59e0b;
}
.podium-block.silver {
  height: 48px;
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}
.podium-block.bronze {
  height: 36px;
  background: rgba(180, 83, 9, 0.12);
  border-color: rgba(180, 83, 9, 0.35);
  color: #d97706;
}

/* Top 3 Breakdown Cards (Horizontal 3-Col) */
.leaderboard-top-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.lb-agent-card {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 9px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lb-agent-card.gold-border {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.05);
}
.lb-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.lb-rank-badge {
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
}
.lb-rank-badge.gold {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.lb-rank-badge.silver {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.lb-rank-badge.bronze {
  background: rgba(180, 83, 9, 0.15);
  color: #d97706;
  border: 1px solid rgba(180, 83, 9, 0.3);
}
.lb-agent-name {
  font-size: 0.75rem;
  font-weight: 800;
  color: #f0f6fc;
}
.lb-stat-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  text-align: center;
  padding: 4px 0;
  border-top: 1px solid #21262d;
  border-bottom: 1px solid #21262d;
}
.lb-stat-pair small {
  font-size: 0.6rem;
  text-transform: uppercase;
  font-weight: 800;
  color: #8b949e;
  display: block;
}
.lb-stat-pair strong {
  font-size: 0.95rem;
  font-weight: 900;
  color: #f0f6fc;
}
.lb-stage-dots {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.64rem;
  color: #8b949e;
  padding-top: 2px;
}
.lb-stage-dot-item {
  display: flex;
  align-items: center;
  gap: 3px;
}
.lb-mini-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

/* Rankings Table */
.leaderboard-table-panel {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 10px;
  overflow: hidden;
}
.lb-table-head {
  padding: 8px 12px;
  border-bottom: 1px solid #21262d;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lb-table-head h5 {
  font-size: 0.78rem;
  font-weight: 800;
  color: #f0f6fc;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lb-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.lb-table th {
  background: #0d1117;
  color: #8b949e;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  border-bottom: 1px solid #21262d;
}
.lb-table td {
  padding: 7px 12px;
  font-size: 0.74rem;
  border-bottom: 1px solid #21262d;
  color: #c9d1d9;
}
.lb-table tr:hover td {
  background: #1c2128;
}
.lb-agent-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lb-avatar-mini {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  font-weight: 900;
  background: #21262d;
  color: #58a6ff;
}

@media(max-width: 950px) {
  .terminal-stage-tiles-grid { grid-template-columns: repeat(3, 1fr); }
  .terminal-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .terminal-main-grid { grid-template-columns: 1fr; }
}

/* ── Follow-Up Sequences Presentation Stage (Section 04) ── */
.followup-presentation-stage {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  box-sizing: border-box;
  background: #090d13;
  border: 1px solid #21262d;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

.fu-stage-topbar {
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.fu-stage-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fu-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #4ade80;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 6px;
}

.fu-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: fuPulseDot 2s infinite ease-in-out;
}

@keyframes fuPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.fu-stage-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #c9d1d9;
}

.fu-stage-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fu-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #161b22;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

.fu-status-chip .live-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.followup-viewport {
  background: #090d13;
  padding: 1rem 1.3rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: #e6edf3;
}

/* Sequence Switcher Tabs */
.followup-seq-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #21262d;
  padding-bottom: 0.7rem;
  overflow-x: auto;
}
.fu-seq-tab {
  background: #161b22;
  border: 1px solid #21262d;
  color: #8b949e;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.fu-seq-tab:hover {
  color: #f0f6fc;
  border-color: #30363d;
}
.fu-seq-tab.active {
  background: #0d1117;
  color: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}
.fu-badge-count {
  font-size: 0.64rem;
  background: #21262d;
  padding: 1px 6px;
  border-radius: 99px;
  color: #c9d1d9;
}
.fu-seq-tab.active .fu-badge-count {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

/* 2-Column Presentation Layout (Phone on Left, Journey Rail on Right) */
.followup-stage-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* Left Phone Column — Authentic Tall Modern Smartphone (iPhone/Galaxy Aspect Ratio) */
.fu-phone-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fu-phone-wrapper {
  background: #080b0f;
  border-radius: 40px;
  padding: 10px;
  box-shadow: 0 25px 65px rgba(0,0,0,0.7), inset 0 0 0 2px #2d333b, inset 0 0 0 3px #161b22;
  position: relative;
  overflow: visible;
}

/* Hardware Physical Side Buttons */
.fu-side-btn {
  position: absolute;
  background: #282f38;
  border-radius: 2px;
  z-index: 2;
}
.fu-side-btn-vol-up {
  left: -4px;
  top: 110px;
  width: 4px;
  height: 48px;
}
.fu-side-btn-vol-down {
  left: -4px;
  top: 170px;
  width: 4px;
  height: 48px;
}
.fu-side-btn-power {
  right: -4px;
  top: 130px;
  width: 4px;
  height: 65px;
}

/* Phone Inner Screen Glass */
.fu-phone-inner {
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #efeae2;
  height: 670px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
  position: relative;
}

/* iOS Top Status Bar */
.fu-ios-status-bar {
  background: #008069;
  color: #ffffff;
  padding: 8px 16px 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
  user-select: none;
}
.fu-status-time {
  font-weight: 800;
  letter-spacing: -0.02em;
}
.fu-dynamic-island {
  width: 95px;
  height: 22px;
  background: #000;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 7px;
  gap: 5px;
}
.fu-cam-lens {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0f172a;
  border: 1px solid #1e293b;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2);
}
.fu-sensor-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #022c22;
}
.fu-status-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
}

/* WhatsApp Brand Header Bar */
.fu-phone-header {
  background: #008069;
  padding: 4px 12px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.fu-h-back {
  font-size: 1.25rem;
  font-weight: 700;
  margin-right: 2px;
  cursor: pointer;
  line-height: 1;
}
.fu-h-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25D366, #128C7E);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0.82rem;
  color: #fff;
  position: relative;
  flex-shrink: 0;
}
.fu-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #25D366;
  border: 2px solid #008069;
}
.fu-h-info {
  flex: 1;
  min-width: 0;
}
.fu-h-name {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fu-verified-badge {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  font-size: 0.58rem;
  font-weight: 900;
}
.fu-h-status {
  font-size: 0.64rem;
  color: rgba(255,255,255,0.85);
}
.fu-h-icons {
  font-size: 0.92rem;
  opacity: 0.9;
  letter-spacing: 2px;
}

/* Phone Chat Area (Continuous Multi-Day Follow-Up History) */
.fu-phone-chat {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='p' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23c9c2b6' fill-opacity='0.35'/%3E%3Ccircle cx='30' cy='30' r='0.8' fill='%23c9c2b6' fill-opacity='0.25'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='200' fill='url(%23p)'/%3E%3C/svg%3E");
}

/* Continuous Step Message Block */
.fu-chat-step-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  scroll-margin-top: 8px;
  scroll-margin-bottom: 8px;
  transition: all 0.2s ease;
}

.fu-chat-chip {
  align-self: center;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 3px 12px;
  border-radius: 7px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #54656f;
  margin: 3px 0 2px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fu-chip-time {
  font-size: 0.6rem;
  color: #8696a0;
  font-weight: 600;
}
.fu-bubble {
  max-width: 90%;
  align-self: flex-end;
  background: #d9fdd3;
  border-radius: 8px;
  border-top-right-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  flex-shrink: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.fu-bubble.active-focus {
  box-shadow: 0 0 0 2.5px #25D366, 0 6px 18px rgba(37, 211, 102, 0.35);
  transform: scale(1.01);
}
.fu-bubble-img {
  display: block;
  width: calc(100% - 6px);
  margin: 3px auto 0;
  border-radius: 6px;
  max-height: 180px;
  object-fit: cover;
}
.fu-bubble-body {
  padding: 7px 10px 3px;
  font-size: 0.82rem;
  color: #111b21;
  line-height: 1.45;
  font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
  word-wrap: break-word;
}
.fu-bubble-body strong {
  font-weight: 700;
  color: #000;
}
.fu-bubble-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 0 8px 4px;
}
.fu-bubble-time {
  font-size: 0.62rem;
  color: #667781;
}
.fu-bubble-ticks {
  font-size: 0.8rem;
  color: #53bdeb;
}

/* WA Action Buttons */
.fu-bubble-btns {
  margin-top: 3px;
  align-self: flex-end;
  max-width: 90%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fu-wa-btn-row {
  display: flex;
  gap: 2px;
}
.fu-wa-btn {
  flex: 1;
  background: #fff;
  border-radius: 7px;
  padding: 8px 6px;
  text-align: center;
  color: #00a5ca;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Authentic WhatsApp Bottom Input Bar */
.fu-phone-input-bar {
  background: #f0f2f5;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.fu-wa-attach-btn {
  font-size: 0.95rem;
  color: #54656f;
  cursor: pointer;
  line-height: 1;
}
.fu-wa-input-pill {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 0.78rem;
  color: #8696a0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
.fu-wa-sticker-icon {
  font-size: 0.8rem;
  opacity: 0.65;
}
.fu-wa-action-icon {
  font-size: 0.95rem;
  color: #54656f;
  cursor: pointer;
  line-height: 1;
}

/* iOS Bottom Home Indicator */
.fu-ios-home-bar-wrap {
  background: #f0f2f5;
  padding: 4px 0 6px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.fu-ios-home-bar {
  width: 120px;
  height: 4px;
  background: #000;
  border-radius: 99px;
  opacity: 0.65;
}

/* Bottom Controls Below Phone */
.fu-phone-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 6px 10px;
}
.fu-ctrl-btn {
  background: #0d1117;
  border: 1px solid #30363d;
  color: #c9d1d9;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.fu-ctrl-btn:hover:not(:disabled) {
  background: #21262d;
  color: #fff;
}
.fu-ctrl-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.fu-step-indicator {
  font-size: 0.72rem;
  font-weight: 800;
  color: #8b949e;
}
.fu-fullscreen-btn {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.fu-fullscreen-btn:hover {
  background: #38bdf8;
  color: #000;
}

/* Right Rail Column (5-6 Sequence Steps in 1 Screen) */
.fu-rail-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fu-rail-banner {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.fu-banner-info h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: #f0f6fc;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fu-banner-info p {
  font-size: 0.72rem;
  color: #8b949e;
  margin: 0;
}
.fu-pause-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}

/* Steps Rail Cards Grid */
.fu-steps-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 540px;
  overflow-y: auto;
}
.fu-step-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 9px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.fu-step-card:hover {
  background: #1c2128;
  border-color: #38bdf8;
  transform: translateX(2px);
}
.fu-step-card.active {
  background: #0d1117;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);
}
.fu-step-day-pill {
  font-size: 0.7rem;
  font-weight: 800;
  background: rgba(108, 92, 231, 0.18);
  border: 1px solid rgba(108, 92, 231, 0.35);
  color: #a29bfe;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.fu-step-thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #30363d;
}
.fu-step-info {
  flex: 1;
  min-width: 0;
}
.fu-step-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: #f0f6fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fu-step-template {
  font-family: monospace;
  font-size: 0.66rem;
  color: #8b949e;
}
.fu-step-action {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.fu-preview-tag {
  font-size: 0.66rem;
  font-weight: 700;
  color: #8b949e;
}
.fu-step-card.active .fu-preview-tag {
  color: #38bdf8;
}
.fu-expand-icon-btn {
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}
.fu-expand-icon-btn:hover {
  background: #38bdf8;
  color: #000;
  border-color: #38bdf8;
}

/* Bottom Rules Bar */
.fu-rules-strip {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.72rem;
  color: #8b949e;
}
.fu-rule-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fu-rule-item strong {
  color: #e6edf3;
}

/* ══════════════════════════════════════════
   FULL SCREEN THEATER MODAL (EXPAND & EXIT)
   ══════════════════════════════════════════ */
.fu-theater-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(9, 13, 19, 0.94);
  backdrop-filter: blur(20px);
  z-index: 999999;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1rem 2rem;
  animation: fadeInTheater 0.2s ease-out;
}
.fu-theater-overlay.open {
  display: flex;
}
@keyframes fadeInTheater {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* Theater Top Bar */
.theater-top-bar {
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.theater-title-info h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.theater-title-info p {
  font-size: 0.75rem;
  color: #8b949e;
  margin: 2px 0 0;
}
.theater-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.theater-nav-btn {
  background: #161b22;
  border: 1px solid #30363d;
  color: #f0f6fc;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.theater-nav-btn:hover:not(:disabled) {
  background: #21262d;
  border-color: #38bdf8;
}
.theater-exit-btn {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.theater-exit-btn:hover {
  background: #ef4444;
  color: #fff;
}

/* Theater Center Phone (Large Presentation Scale) */
.theater-phone-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: calc(100vh - 160px);
}
.theater-phone-frame {
  width: 360px;
  max-height: 82vh;
  background: #000;
  border-radius: 36px;
  padding: 9px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), inset 0 0 0 2px #333;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.theater-notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 20px;
  background: #000;
  border-radius: 0 0 14px 14px;
  z-index: 10;
}
.theater-phone-inner {
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #efeae2;
  flex: 1;
}
.theater-chat {
  flex: 1;
  overflow-y: auto;
  padding: 12px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: #efeae2;
}
.theater-chat .fu-bubble-img {
  max-height: 220px;
}
.theater-chat .fu-bubble-body {
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 8px 10px 4px;
}
.theater-chat .fu-wa-btn {
  font-size: 0.82rem;
  padding: 8px 6px;
}

/* Theater Bottom Step Dots */
.theater-bottom-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #161b22;
  border: 1px solid #21262d;
  padding: 6px 14px;
  border-radius: 99px;
}
.theater-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #30363d;
  cursor: pointer;
  transition: all 0.2s;
}
.theater-step-dot.active {
  background: #38bdf8;
  transform: scale(1.3);
  box-shadow: 0 0 8px #38bdf8;
}

@media(max-width: 950px) {
  .followup-stage-layout { grid-template-columns: 1fr; }
  .fu-phone-inner { height: 560px; }
  .fu-phone-column { max-width: 380px; margin-inline: auto; width: 100%; }
}

@media(max-width:1050px){
  .crm-app-viewport { grid-template-columns: 1fr; }
  .crm-sidebar { display: none; }
  .crm-stage-content-layout { grid-template-columns: 1fr; }
  .pipeline-facts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Facts Grid Below Laptop ── */
.pipeline-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 1.2rem;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  box-sizing: border-box;
}
.p-fact-card {
  background: #ffffff;
  border: 1.5px solid var(--mist);
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.p-fact-card:hover {
  border-color: var(--signal);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -10px rgba(16, 40, 31, 0.15);
}
.fact-num {
  font-family: var(--head);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}
.fact-num.red { color: #c0392b; }
.fact-num.green { color: var(--signal); }
.p-fact-info {
  display: flex;
  flex-direction: column;
}
.p-fact-card h4 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
  color: var(--ink);
  line-height: 1.2;
}
.p-fact-card p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

@media(max-width:1050px){
  .crm-app-viewport { grid-template-columns: 1fr; }
  .crm-sidebar { display: none; }
  .pipeline-facts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media(max-width:768px){
  .acc-full-head { flex-direction: column; align-items: flex-start; }
  .acc-quick-metrics { width: 100%; }
  .quick-metric { flex: 1; }
  .pipeline-facts-grid { grid-template-columns: 1fr; }
  .board-action-toast { flex-direction: column; align-items: flex-start; }
}

@media(max-width:900px){
  .acc-body{grid-template-columns:1fr}
  .acc-phone{position:static;order:-1}
  .wa-phone-frame,.wa-phone-frame.wide{max-width:380px;width:100%;height:620px}
  .acc-stats-row{grid-template-columns:repeat(3,1fr);gap:.5rem}
}
@media(max-width:480px){
  .acc-stats-row{grid-template-columns:1fr}
  .wa-phone-frame,.wa-phone-frame.wide{width:100%;max-width:320px;height:560px}
  .industry-tabs{gap:.3rem}
  .ind-tab{font-size:.72rem;padding:.35rem .7rem}
}

/* ══════════════════════════════════════════
   05 ─ High-Throughput Bulk Messaging & Broadcast Studio
   ══════════════════════════════════════════ */
.broadcast-presentation-stage {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  box-sizing: border-box;
  background: #090d13;
  border: 1px solid #21262d;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

.bc-stage-topbar {
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.bc-stage-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bc-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #34d399;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 6px;
}

.bc-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: fuPulseDot 2s infinite ease-in-out;
}

.bc-stage-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #c9d1d9;
}

.bc-stage-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bc-aud-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #161b22;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid #21262d;
}

.bc-aud-tab {
  background: transparent;
  border: none;
  color: #8b949e;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}

.bc-aud-tab:hover {
  color: #f0f6fc;
}

.bc-aud-tab.active {
  background: #0d1117;
  color: #38bdf8;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.bc-launch-btn {
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid rgba(52, 211, 153, 0.4);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.bc-launch-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
}

.broadcast-viewport {
  background: #090d13;
  padding: 1.1rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: #e6edf3;
}

.broadcast-stage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 380px;
  gap: 1.4rem;
  align-items: start;
}

.bc-control-column {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Sending Health & Meta Limits Bar */
.bc-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.bc-health-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bc-h-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bc-h-head strong {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  color: #f0f6fc;
  line-height: 1.15;
}

.bc-h-head small {
  display: block;
  font-size: 0.62rem;
  color: #8b949e;
  font-family: monospace;
}

.bc-h-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
}

.bc-h-badge.green {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.mini-dot.green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

/* Active Broadcast Job Progress Bar */
.bc-job-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bc-job-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bc-job-meta h4 {
  font-size: 0.86rem;
  font-weight: 800;
  color: #f0f6fc;
  margin: 0;
}

.bc-job-meta p {
  font-size: 0.68rem;
  color: #8b949e;
  margin: 2px 0 0;
}

.bc-progress-bar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bc-progress-track {
  height: 8px;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 99px;
  overflow: hidden;
  display: flex;
}

.bc-bar-fill {
  height: 100%;
  transition: width 0.6s ease;
}

.bc-bar-fill.sent {
  background: linear-gradient(90deg, #10b981, #059669);
}

.bc-bar-fill.failed {
  background: #ef4444;
}

.bc-progress-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.68rem;
  font-weight: 700;
}

.stat-green { color: #34d399; }
.stat-red { color: #f87171; }
.stat-muted { color: #8b949e; }
.stat-pct { margin-left: auto; color: #38bdf8; font-weight: 800; }

.bc-job-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.bc-job-btn {
  background: #0d1117;
  border: 1px solid #30363d;
  color: #c9d1d9;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}

.bc-job-btn:hover {
  background: #21262d;
  color: #fff;
}

.bc-job-btn.retry {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}

.bc-speed-badge {
  margin-left: auto;
  font-size: 0.68rem;
  color: #8b949e;
}

.bc-speed-badge strong {
  color: #38bdf8;
}

/* Template Personalization Box */
.bc-template-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bc-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bc-card-title-row h5 {
  font-size: 0.78rem;
  font-weight: 800;
  color: #f0f6fc;
  margin: 0;
}

.bc-compliance-tag {
  font-size: 0.62rem;
  color: #34d399;
  font-weight: 700;
}

.bc-var-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.bc-chip {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.bc-msg-preview-box {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 0.72rem;
  color: #c9d1d9;
  line-height: 1.4;
}

.bc-msg-preview-box p { margin: 0; }
.var-highlight {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 700;
}

.bc-optout-foot {
  display: block;
  font-size: 0.62rem;
  color: #8b949e;
  margin-top: 4px;
  font-style: italic;
}

/* Real-Time Events Feed */
.bc-ledger-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bc-pulse-pill {
  font-size: 0.62rem;
  color: #34d399;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.bc-events-feed {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 145px;
  overflow-y: auto;
}

.bc-event-row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 0.7rem;
  transition: all 0.15s;
}

.bc-event-row:hover {
  border-color: #30363d;
}

.bc-ev-avatar {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  font-weight: 800;
  font-size: 0.66rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.bc-ev-info {
  flex: 1;
  min-width: 0;
}

.bc-ev-info strong {
  display: block;
  font-size: 0.72rem;
  color: #f0f6fc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-ev-info small {
  display: block;
  font-size: 0.62rem;
  color: #8b949e;
}

.bc-status-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.bc-status-pill.green {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.bc-status-pill.cyan {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.bc-status-pill.amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.bc-ev-time {
  font-size: 0.62rem;
  color: #8b949e;
  flex-shrink: 0;
}

/* Recipient Switcher Bar */
.bc-recipient-switch-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 8px;
}

.bc-switch-label {
  font-size: 0.68rem;
  color: #8b949e;
  font-weight: 700;
  white-space: nowrap;
}

.bc-recip-pills {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  flex: 1;
}

.bc-recip-pill {
  background: #0d1117;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.bc-recip-pill:hover {
  color: #f0f6fc;
  border-color: #38bdf8;
}

.bc-recip-pill.active {
  background: #38bdf8;
  color: #000;
  border-color: #38bdf8;
  font-weight: 800;
}

@media(max-width: 950px) {
  .broadcast-stage-layout { grid-template-columns: 1fr; }
  .bc-health-grid { grid-template-columns: 1fr; }
  .bc-phone-column { max-width: 380px; margin-inline: auto; width: 100%; }
}

/* ══════════════════════════════════════════
   06 ─ Autonomous AI Voice Calling & Telephony
   ══════════════════════════════════════════ */
.calling-presentation-stage {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  box-sizing: border-box;
  background: #090d13;
  border: 1px solid #21262d;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

.call-stage-topbar {
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.call-stage-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.call-stage-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #818cf8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 6px;
}

.call-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #818cf8;
  box-shadow: 0 0 8px #818cf8;
  animation: fuPulseDot 2s infinite ease-in-out;
}

.call-stage-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #c9d1d9;
}

.call-stage-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.call-persona-tabs {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #161b22;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid #21262d;
}

.call-persona-tab {
  background: transparent;
  border: none;
  color: #8b949e;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}

.call-persona-tab:hover {
  color: #f0f6fc;
}

.call-persona-tab.active {
  background: #0d1117;
  color: #818cf8;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.call-sound-toggle-btn {
  background: #161b22;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.call-sound-toggle-btn:hover {
  border-color: #818cf8;
  color: #f0f6fc;
}

.call-sound-toggle-btn.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-weight: 800;
}

.call-simulate-btn {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border: 1px solid rgba(129, 140, 248, 0.4);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.call-simulate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
}

.calling-viewport {
  background: #090d13;
  padding: 1.1rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: #e6edf3;
}

.calling-stage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) 380px;
  gap: 1.4rem;
  align-items: start;
}

.call-control-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Call Target Card */
.call-target-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.call-target-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.call-target-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.4);
  font-weight: 800;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.call-target-info {
  flex: 1;
  min-width: 0;
}

.call-target-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.call-target-name-row strong {
  font-size: 0.88rem;
  color: #f0f6fc;
}

.call-target-phone {
  font-family: monospace;
  font-size: 0.72rem;
  color: #8b949e;
}

.call-target-info p {
  font-size: 0.7rem;
  color: #8b949e;
  margin: 2px 0 0;
}

.call-live-pill {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Waveform Box */
.call-waveform-box {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.call-wave-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
}

.c-bar {
  width: 4px;
  height: 8px;
  border-radius: 99px;
  background: #818cf8;
  animation: callWaveMotion 1.2s ease-in-out infinite;
}

.c-bar:nth-child(2) { animation-delay: 0.1s; height: 14px; }
.c-bar:nth-child(3) { animation-delay: 0.25s; height: 22px; }
.c-bar:nth-child(4) { animation-delay: 0.15s; height: 18px; }
.c-bar:nth-child(5) { animation-delay: 0.3s; height: 26px; }
.c-bar:nth-child(6) { animation-delay: 0.4s; height: 16px; }
.c-bar:nth-child(7) { animation-delay: 0.2s; height: 24px; }
.c-bar:nth-child(8) { animation-delay: 0.35s; height: 28px; }
.c-bar:nth-child(9) { animation-delay: 0.1s; height: 19px; }
.c-bar:nth-child(10) { animation-delay: 0.25s; height: 23px; }
.c-bar:nth-child(11) { animation-delay: 0.4s; height: 15px; }
.c-bar:nth-child(12) { animation-delay: 0.3s; height: 20px; }
.c-bar:nth-child(13) { animation-delay: 0.15s; height: 13px; }
.c-bar:nth-child(14) { animation-delay: 0.2s; height: 9px; }
.c-bar:nth-child(15) { animation-delay: 0.35s; height: 6px; }

@keyframes callWaveMotion {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

.call-speaker-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.66rem;
  color: #8b949e;
}

.c-speaker-ai {
  color: #818cf8;
  font-weight: 700;
}

.c-latency strong {
  color: #34d399;
}

/* Transcript Card */
.call-transcript-card {
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.call-transcript-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.call-transcript-head h5 {
  font-size: 0.8rem;
  font-weight: 800;
  color: #f0f6fc;
  margin: 0;
}

.call-sub-tag {
  font-size: 0.62rem;
  color: #34d399;
  font-weight: 700;
}

.call-transcript-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.call-dialogue-row {
  display: flex;
  gap: 8px;
  font-size: 0.72rem;
  line-height: 1.4;
}

.call-dialogue-row.ai {
  align-self: flex-start;
}

.call-dialogue-row.lead {
  align-self: flex-start;
}

.call-d-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.call-d-avatar.ai {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.call-d-avatar.lead {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.call-d-bubble {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 6px 10px;
  max-width: 90%;
}

.call-d-bubble.ai {
  border-color: rgba(99, 102, 241, 0.3);
}

.call-d-bubble strong {
  display: block;
  font-size: 0.64rem;
  color: #8b949e;
  margin-bottom: 2px;
}

.call-dialogue-row.ai .call-d-bubble strong { color: #818cf8; }
.call-dialogue-row.lead .call-d-bubble strong { color: #34d399; }

.call-d-bubble p {
  margin: 0;
  color: #c9d1d9;
}

/* Call Sync Card */
.call-sync-card {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.call-sync-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: #34d399;
}

.call-check-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #10b981;
  color: #000;
  font-weight: 900;
  font-size: 0.65rem;
  display: grid;
  place-items: center;
}

.call-sync-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.call-sync-item {
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 6px;
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.call-sync-item span {
  font-size: 0.58rem;
  text-transform: uppercase;
  color: #8b949e;
  letter-spacing: 0.04em;
}

.call-sync-item strong {
  font-size: 0.7rem;
  color: #f0f6fc;
}

.call-sync-item strong.green-text {
  color: #34d399;
}

/* Right Column: In-Call Mobile Screen */
.call-phone-screen {
  background: radial-gradient(circle at 50% 20%, #1f2430 0%, #0d1017 75%, #05070a 100%) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ios-call-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 1.2rem 1rem 0.8rem;
  box-sizing: border-box;
}

.ios-call-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 1.5rem;
}

.ios-call-avatar-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  margin-bottom: 12px;
}

.ios-call-avatar-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(99, 102, 241, 0.4);
  animation: iosAvatarPulse 2s infinite ease-out;
}

@keyframes iosAvatarPulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  100% { transform: scale(1.25); opacity: 0; }
}

.ios-call-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.4);
}

.ios-caller-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
}

.ios-caller-sub {
  font-size: 0.72rem;
  color: #94a3b8;
  margin: 4px 0 0;
}

.ios-call-duration {
  font-family: monospace;
  font-size: 0.85rem;
  font-weight: 600;
  color: #34d399;
  margin-top: 8px;
  display: inline-block;
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 10px;
  border-radius: 99px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Sound Wave Ripple */
.ios-call-ripple {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  margin: 1rem 0;
}

.ripple-bar {
  width: 4px;
  height: 10px;
  background: #818cf8;
  border-radius: 99px;
  animation: callWaveMotion 1s infinite ease-in-out;
}

.ripple-bar:nth-child(2) { height: 22px; animation-delay: 0.15s; }
.ripple-bar:nth-child(3) { height: 32px; animation-delay: 0.3s; }
.ripple-bar:nth-child(4) { height: 18px; animation-delay: 0.1s; }
.ripple-bar:nth-child(5) { height: 28px; animation-delay: 0.25s; }
.ripple-bar:nth-child(6) { height: 16px; animation-delay: 0.4s; }
.ripple-bar:nth-child(7) { height: 12px; animation-delay: 0.2s; }

/* In-Call 6-Button Grid */
.ios-call-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem 1.4rem;
  width: 100%;
  max-width: 250px;
  margin-bottom: 1.5rem;
}

.ios-control-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.15s;
}

.ios-control-btn:hover {
  transform: scale(1.06);
}

.ios-btn-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: #fff;
  transition: all 0.15s;
}

.ios-control-btn.active .ios-btn-circle {
  background: #ffffff;
  color: #000;
}

.ios-control-btn span {
  font-size: 0.65rem;
  color: #cbd5e1;
  text-transform: capitalize;
}

/* End Call Button */
.ios-end-call-wrap {
  margin-bottom: 0.6rem;
}

.ios-end-call-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #ef4444;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.5);
  transform: rotate(135deg);
  transition: all 0.2s ease;
}

.ios-end-call-btn:hover {
  transform: rotate(135deg) scale(1.08);
  box-shadow: 0 6px 24px rgba(239, 68, 68, 0.7);
}

/* Persona Switch Bar */
.call-persona-switch-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #161b22;
  border: 1px solid #21262d;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 8px;
}

.call-switch-label {
  font-size: 0.68rem;
  color: #8b949e;
  font-weight: 700;
  white-space: nowrap;
}

.call-persona-pills {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  flex: 1;
}

.call-p-pill {
  background: #0d1117;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.call-p-pill:hover {
  color: #f0f6fc;
  border-color: #818cf8;
}

.call-p-pill.active {
  background: #818cf8;
  color: #000;
  border-color: #818cf8;
  font-weight: 800;
}

@media(max-width: 950px) {
  .calling-stage-layout { grid-template-columns: 1fr; }
  .call-phone-column { max-width: 380px; margin-inline: auto; width: 100%; }
}

/* ══════════════════════════════════════════
   07 ─ Automated Email Sequences & Smart Drips (Gmail on Mobile)
   ══════════════════════════════════════════ */
.gmail-fact-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #eef9f3;
  border: 1.5px solid #b5e3cb;
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  margin-top: 1rem;
}

.gmail-fact-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.gmail-fact-text strong {
  display: block;
  font-size: 0.88rem;
  color: #0e7a42;
  margin-bottom: 2px;
}

.gmail-fact-text p {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* Tabs above Phone */
.gmail-step-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
  justify-content: center;
}

/* Gmail Phone Frame */
.gmail-phone-frame {
  width: 100%;
  max-width: 400px;
  height: 650px;
  display: flex;
  flex-direction: column;
}

.gmail-phone-screen {
  background: #ffffff !important;
  color: #1f2937;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0 !important;
  max-height: 100% !important;
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  border-radius: 26px;
}

/* iOS Status Bar in Phone */
.gmail-ios-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 16px 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
  flex-shrink: 0;
  z-index: 5;
  pointer-events: none;
}

.gmail-ios-time {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.gmail-ios-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
}

/* Gmail Navigation Header Bar */
.gmail-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 10px;
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
  z-index: 4;
}

.gmail-hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gmail-back-icon {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  line-height: 1;
}

.gmail-inbox-label {
  font-size: 0.86rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.01em;
}

.gmail-hdr-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: #475569;
}

.gmail-action-icon {
  cursor: pointer;
  transition: transform 0.15s;
}

.gmail-action-icon:hover {
  transform: scale(1.1);
}

/* Scrollable Gmail Message Area */
.gmail-scroll-area {
  flex: 1 1 0px !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding: 12px 14px 24px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  cursor: grab;
}

.gmail-scroll-area:active {
  cursor: grabbing;
}

.gmail-scroll-area::-webkit-scrollbar {
  width: 6px !important;
  display: block !important;
}

.gmail-scroll-area::-webkit-scrollbar-track {
  background: #f8fafc !important;
  border-radius: 99px;
}

.gmail-scroll-area::-webkit-scrollbar-thumb {
  background: #94a3b8 !important;
  border-radius: 99px;
  border: 1px solid #f8fafc;
}

.gmail-scroll-area::-webkit-scrollbar-thumb:hover {
  background: #64748b !important;
}

/* Subject Block */
.gmail-subject-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.gmail-subject-text {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
  margin: 0;
  flex: 1;
}

.gmail-inbox-badge {
  background: #f1f5f9;
  color: #475569;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Sender Meta Section */
.gmail-sender-section {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.gmail-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f172a, #0284c7);
  color: #ffffff;
  font-weight: 800;
  font-size: 0.74rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.gmail-sender-meta {
  flex: 1;
  min-width: 0;
}

.gmail-sender-line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.gmail-sender-name {
  font-size: 0.8rem;
  color: #0f172a;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gmail-msg-time {
  font-size: 0.68rem;
  color: #64748b;
  flex-shrink: 0;
}

.gmail-sender-line2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.gmail-to-me {
  font-size: 0.7rem;
  color: #64748b;
}

.gmail-security-pill {
  font-size: 0.58rem;
  color: #059669;
  font-weight: 700;
  background: #ecfdf5;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #a7f3d0;
}

.gmail-star-icon {
  font-size: 1.15rem;
  color: #cbd5e1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s;
}

.gmail-star-icon:hover,
.gmail-star-icon.starred {
  color: #eab308;
}

/* Email Card Body inside Gmail */
.gmail-message-body {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.g-mail-banner {
  background: linear-gradient(135deg, #090d13, #1e293b);
  padding: 12px 14px;
  color: #ffffff;
  text-align: center;
  border-bottom: 1px solid #334155;
}

.g-mail-badge {
  display: inline-block;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.g-mail-banner h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
  line-height: 1.25;
}

.g-mail-banner p {
  font-size: 0.65rem;
  color: #94a3b8;
  margin: 3px 0 0;
}

.g-mail-content {
  padding: 12px 14px;
  font-size: 0.74rem;
  line-height: 1.45;
  color: #334155;
}

.g-mail-content p {
  margin: 0 0 8px;
}

.g-mail-content strong {
  color: #0f172a;
}

.g-mail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 6px;
  margin: 10px 0;
  text-align: center;
}

.g-mail-item small {
  display: block;
  font-size: 0.55rem;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 0.04em;
}

.g-mail-item strong {
  display: block;
  font-size: 0.72rem;
  color: #0f172a;
  margin-top: 1px;
}

.g-mail-cta-box {
  margin: 10px 0 12px;
  text-align: center;
}

.g-mail-cta-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #ffffff !important;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(2, 132, 199, 0.3);
  transition: all 0.15s ease;
}

.g-mail-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45);
}

.g-mail-cta-sub {
  display: block;
  font-size: 0.6rem;
  color: #059669;
  font-weight: 600;
  margin-top: 4px;
}

.g-mail-signoff {
  font-size: 0.68rem;
  color: #64748b;
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
  margin-top: 8px !important;
  line-height: 1.4;
}

.g-mail-signoff strong {
  color: #1e293b;
}

/* Gmail Footer Reply Bar */
.gmail-footer-reply-bar {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.gmail-reply-btn {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.gmail-reply-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

/* Toast inside Gmail Phone */
.gmail-download-toast {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #0f172a;
  color: #38bdf8;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 99px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
  white-space: nowrap;
}

.gmail-download-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* iOS Bottom Home Indicator */
.gmail-ios-home-bar {
  width: 90px;
  height: 4px;
  background: #0f172a;
  border-radius: 99px;
  margin: 6px auto 6px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   08 ─ Real-Time Lead Alerts & Team Notification Preferences
   ══════════════════════════════════════════ */

/* Interactive Notification Preferences Card */
.notif-pref-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notif-pref-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.notif-pref-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.notif-bell-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.notif-pref-head h5 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
}

.notif-pref-head p {
  font-size: 0.74rem;
  color: var(--muted);
  margin: 2px 0 0;
}

.notif-saved-pill {
  font-size: 0.68rem;
  font-weight: 800;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 3px 8px;
  border-radius: 99px;
  opacity: 0;
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

.notif-saved-pill.show {
  opacity: 1;
  transform: translateY(0);
}

.notif-pref-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  transition: all 0.15s ease;
}

.notif-pref-row:hover {
  border-color: #cbd5e1;
}

.notif-row-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.notif-type-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.notif-row-info strong {
  display: block;
  font-size: 0.8rem;
  color: #0f172a;
  line-height: 1.2;
}

.notif-row-info small {
  display: block;
  font-size: 0.68rem;
  color: #64748b;
  margin-top: 1px;
}

.notif-channel-toggles {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.notif-ch-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.notif-ch-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.notif-ch-btn.active {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
  font-weight: 800;
}

.notif-pref-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
  font-size: 0.72rem;
}

.notif-scope-tag {
  color: #64748b;
}

.notif-scope-tag strong {
  color: #0f172a;
}

.notif-mute-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.notif-mute-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.notif-mute-btn.muted {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
  font-weight: 800;
}

/* Tabs above Phone */
.notif-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
  justify-content: center;
}

/* Phone Frame */
.notif-phone-frame {
  width: 100%;
  max-width: 400px;
  height: 650px;
  display: flex;
  flex-direction: column;
}

.notif-phone-screen {
  background: #efeae2;
  color: #1f2937;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0 !important;
  max-height: 100% !important;
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  border-radius: 26px;
}

/* Common Phone Scrollable Container */
.notif-scroll-area {
  flex: 1 1 0px !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding: 12px 14px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  cursor: grab;
}

.notif-scroll-area:active {
  cursor: grabbing;
}

.notif-scroll-area::-webkit-scrollbar {
  width: 5px !important;
}

.notif-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 99px;
}

/* ── VIEW 1: WHATSAPP ALERT ── */
.notif-wa-bubble {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 4px solid #25d366;
  max-width: 95%;
}

.notif-wa-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 6px;
}

.notif-wa-tag {
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.notif-wa-time {
  font-size: 0.62rem;
  color: #64748b;
}

.notif-lead-title-box h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.notif-lead-title-box p {
  font-size: 0.72rem;
  color: #64748b;
  margin: 2px 0 0;
}

.notif-lead-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
}

.notif-spec-item small {
  display: block;
  font-size: 0.56rem;
  color: #64748b;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notif-spec-item strong {
  display: block;
  font-size: 0.76rem;
  color: #0f172a;
  margin-top: 1px;
}

.notif-ai-summary-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #1e3a8a;
}

.notif-ai-summary-box strong {
  color: #1d4ed8;
  display: block;
  margin-bottom: 2px;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.notif-wa-actions-col {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.notif-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.notif-action-btn.green {
  background: #25d366;
  color: #ffffff;
}

.notif-action-btn.green:hover {
  background: #1eb855;
}

.notif-action-btn.outline {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
}

.notif-action-btn.outline:hover {
  background: #e2e8f0;
}

/* ── VIEW 2: EMAIL DIGEST ── */
.notif-email-shell {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.notif-email-banner {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  padding: 12px 14px;
  color: #ffffff;
  text-align: center;
}

.notif-email-banner h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.notif-email-banner p {
  font-size: 0.65rem;
  color: #94a3b8;
  margin: 3px 0 0;
}

.notif-email-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.72rem;
  color: #334155;
}

/* ── VIEW 3: IN-APP / LOCKSCREEN ── */
.notif-lockscreen-screen {
  background: linear-gradient(165deg, #090d16 0%, #1e1b4b 50%, #0f172a 100%);
  color: #ffffff;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 30px 14px 14px;
  box-sizing: border-box;
}

.notif-lock-clock {
  text-align: center;
  padding: 14px 0 16px;
}

.notif-lock-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: -0.01em;
}

.notif-lock-time {
  font-size: 3.2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 2px;
}

.notif-push-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}

.notif-push-bubble {
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease;
  cursor: pointer;
}

.notif-push-bubble:hover {
  transform: scale(1.02);
  background: rgba(255, 255, 255, 0.22);
}

.notif-push-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notif-push-app {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.9);
}

.notif-push-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #38bdf8;
  color: #000;
  font-size: 0.55rem;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.notif-push-time {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.65);
}

.notif-push-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #ffffff;
}

.notif-push-desc {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
  margin: 0;
}

.notif-push-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.notif-pill-action {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.notif-lock-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 4px;
  margin-top: auto;
}

.notif-lock-tool {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  cursor: pointer;
}

.notif-lock-home-bar {
  width: 90px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 99px;
  margin: 8px auto 2px;
}

/* ══════════════════════════════════════════
   09 ─ Autonomous Lead Rotation & Round-Robin Tree Simulation (White Canvas Game)
   ══════════════════════════════════════════ */

/* Main Full-Width Stage */
.rot-sim-stage {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-family: inherit;
}

/* Simulation Top Deck / Toolbar */
.rot-deck-bar {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.rot-deck-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rot-deck-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rot-live-radar {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: fuPulseDot 2s infinite ease-in-out;
}

.rot-deck-badge strong {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0f172a;
}

.rot-deck-sub {
  font-size: 0.72rem;
  color: #64748b;
}

/* Quick Lead Spawner Chips */
.rot-quick-spawners {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rot-spawner-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}

.rot-chip-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.rot-chip-btn:hover {
  border-color: #3b82f6;
  background: #eff6ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(59, 130, 246, 0.15);
}

.rot-chip-btn:active {
  transform: translateY(0);
}

.rot-chip-plus {
  color: #2563eb;
  font-weight: 900;
  font-size: 0.85rem;
  line-height: 1;
}

.rot-chip-tag {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

.rot-chip-tag.purple {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
}

.rot-chip-tag.blue {
  background: #eff6ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.rot-chip-tag.green {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.rot-chip-tag.gray {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

/* Custom Lead Injector Form */
.rot-deck-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.rot-custom-form {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rot-input-text {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.74rem;
  color: #0f172a;
  outline: none;
  transition: border-color 0.15s ease;
  width: 140px;
}

.rot-input-text.tag {
  width: 110px;
}

.rot-input-text:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.rot-btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  transition: all 0.18s ease;
}

.rot-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
}

.rot-btn-primary:active {
  transform: translateY(0);
}

/* Simulation Action Mode Buttons */
.rot-deck-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rot-btn-mode {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.rot-btn-mode:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.rot-btn-mode.auto {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.rot-btn-mode.auto.active {
  background: #22c55e;
  border-color: #16a34a;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.rot-btn-mode.burst {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}

.rot-btn-mode.burst:hover {
  background: #ffedd5;
}

.rot-btn-mode.add-grp {
  border-color: #cbd5e1;
  color: #0f172a;
}

.rot-btn-mode.reset {
  padding: 5px 8px;
  font-weight: 900;
}

/* ══════════════════════════════════════════
   The White Canvas Tree Graph Workspace
   ══════════════════════════════════════════ */
.rot-canvas-workspace {
  position: relative;
  min-height: 520px;
  background: #ffffff;
  background-image: radial-gradient(#e2e8f0 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.8rem 1.2rem 2.2rem;
  box-sizing: border-box;
  overflow: visible;
}

/* SVG Wires Layer */
.rot-svg-wires-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.rot-wire-path {
  fill: none;
  stroke: #cbd5e1;
  stroke-width: 2px;
  stroke-dasharray: 4, 3;
  transition: stroke 0.3s ease, stroke-width 0.3s ease;
}

.rot-wire-path.wire-active {
  stroke: url(#rotWireGradientActive);
  stroke-width: 3.5px;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
}

.rot-lead-pulse-particle {
  fill: #2563eb;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Tree Levels Container */
.rot-tree-level {
  position: relative;
  z-index: 2;
  width: 100%;
}

.rot-tree-level.level-1 {
  display: flex;
  justify-content: center;
}

.rot-tree-level.level-2 {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Node Pins for Wire Anchors */
.rot-pin {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #3b82f6;
  position: absolute;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
  z-index: 10;
}

.rot-pin.pin-top {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.rot-pin.pin-bottom {
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.rot-pin.pin-rep-in {
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

/* Generic Node Box Styling */
.rot-node-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.rot-node-tag {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #64748b;
  text-transform: uppercase;
  padding: 4px 10px 0;
}

/* Level 1: Root Node */
.rot-node-box.root-node {
  width: 100%;
  max-width: 380px;
  padding: 8px 12px 10px;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.rot-node-box.root-node.flash {
  border-color: #3b82f6;
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.45);
}

.rot-node-content.root-content {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.rot-avatar-lead {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.rot-lead-details {
  flex: 1;
  min-width: 0;
}

.rot-lead-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.rot-lead-headline strong {
  font-size: 0.82rem;
  color: #0f172a;
}

.rot-source-badge {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.rot-lead-subline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.rot-kw-active-chip {
  font-size: 0.64rem;
  font-weight: 800;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #7c3aed;
  padding: 1px 6px;
  border-radius: 4px;
}

.rot-lead-state {
  font-size: 0.66rem;
  color: #64748b;
}

/* Level 2: AI Intent Router Node */
.rot-node-box.router-node {
  width: 100%;
  max-width: 480px;
  padding: 8px 14px 10px;
  background: #ffffff;
}

.rot-node-box.router-node.evaluating {
  border-color: #8b5cf6;
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.35);
  transform: translateY(-2px);
}

.rot-router-content {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.rot-brain-core {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f3ff;
  border: 1.5px solid #c4b5fd;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.rot-brain-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.rot-core-aura {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px dashed #a78bfa;
  animation: rotSpin 12s infinite linear;
}

.rot-router-meta {
  flex: 1;
  min-width: 0;
}

.rot-router-meta strong {
  display: block;
  font-size: 0.8rem;
  color: #0f172a;
}

.rot-router-meta p {
  margin: 1px 0 0;
  font-size: 0.66rem;
  color: #64748b;
  line-height: 1.25;
}

.rot-router-status-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  white-space: nowrap;
}

.rot-router-status-pill.match-success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #059669;
}

.rot-dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ══════════════════════════════════════════
   LEVEL 3 & 4: Team Groups & Reps Container
   ══════════════════════════════════════════ */
.rot-tree-level.level-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.25rem;
  margin-top: 2.2rem;
}

/* Team Group Card */
.rot-group-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.25s ease;
}

.rot-group-card.route-active {
  border-color: var(--grp-accent, #3b82f6);
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.25);
  transform: translateY(-3px);
}

.rot-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.rot-group-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rot-group-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.rot-group-title-wrap h5 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.rot-group-next-pill {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  white-space: nowrap;
}

.rot-group-next-pill strong {
  color: #0f172a;
}

/* Keyword Manager Section on Group Card */
.rot-kw-zone {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rot-kw-zone-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.64rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rot-kw-chips-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.rot-kw-tag-item {
  background: var(--grp-kw-bg, #eff6ff);
  border: 1px solid var(--grp-kw-border, #bfdbfe);
  color: var(--grp-kw-text, #1d4ed8);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rot-kw-del-btn {
  background: none;
  border: none;
  color: inherit;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 1px;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.rot-kw-del-btn:hover {
  opacity: 1;
  color: #ef4444;
}

.rot-kw-empty-hint {
  font-size: 0.64rem;
  color: #94a3b8;
  font-style: italic;
}

/* Inline Add Keyword Button & Input */
.rot-add-kw-btn {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 0.63rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s ease;
}

.rot-add-kw-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.rot-inline-kw-form {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.rot-inline-kw-input {
  width: 75px;
  padding: 1px 5px;
  font-size: 0.63rem;
  border: 1px solid #3b82f6;
  border-radius: 4px;
  outline: none;
  background: #ffffff;
}

.rot-inline-kw-ok {
  background: #2563eb;
  border: none;
  color: #ffffff;
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 4px;
  cursor: pointer;
}

.rot-inline-kw-cancel {
  background: #e2e8f0;
  border: none;
  color: #475569;
  border-radius: 3px;
  font-size: 0.6rem;
  padding: 2px 4px;
  cursor: pointer;
}

/* Group Action Strip */
.rot-group-actions-strip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.rot-add-rep-btn {
  background: none;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.rot-add-rep-btn:hover {
  border-color: #3b82f6;
  color: #2563eb;
  background: #f8fafc;
}

/* Level 4: Members List Inside Group */
.rot-members-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.rot-rep-card {
  position: relative;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.25s ease;
}

.rot-rep-card.rep-winner {
  background: #f0fdf4;
  border-color: #22c55e;
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
  transform: scale(1.02);
}

.rot-rep-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.rot-rep-avatar {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 0.68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  color: #ffffff;
  flex-shrink: 0;
}

.rot-rep-avatar.violet { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.rot-rep-avatar.indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.rot-rep-avatar.blue { background: linear-gradient(135deg, #0284c7, #2563eb); }
.rot-rep-avatar.cyan { background: linear-gradient(135deg, #06b6d4, #0284c7); }
.rot-rep-avatar.emerald { background: linear-gradient(135deg, #10b981, #059669); }
.rot-rep-avatar.teal { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.rot-rep-avatar.amber { background: linear-gradient(135deg, #f59e0b, #d97706); }

.rot-rep-info {
  min-width: 0;
  flex: 1;
}

.rot-rep-info strong {
  display: block;
  font-size: 0.78rem;
  color: #0f172a;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rot-rep-info small {
  display: block;
  font-size: 0.62rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rot-rep-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.rot-rep-count-badge {
  font-size: 0.78rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 1px 6px;
  border-radius: 5px;
  transition: transform 0.2s ease, color 0.2s ease;
}

.rot-rep-count-badge.bump {
  transform: scale(1.35);
  color: #16a34a;
  border-color: #22c55e;
}

.rot-rep-sub-status {
  font-size: 0.58rem;
  font-weight: 700;
  color: #10b981;
}

/* Floating WhatsApp Assigned Toast */
.rot-rep-wa-toast {
  position: absolute;
  top: -10px;
  right: 10px;
  background: #16a34a;
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 20;
  white-space: nowrap;
}

.rot-rep-wa-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════
   Bottom Live Audit Ledger
   ══════════════════════════════════════════ */
.rot-audit-dock {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rot-audit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.rot-audit-title-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rot-audit-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 6px #3b82f6;
}

.rot-audit-title-left strong {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #0f172a;
}

.rot-counter-pill {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 99px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}

.rot-audit-title-right {
  font-size: 0.64rem;
  color: #64748b;
}

.rot-audit-stream {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 85px;
  overflow-y: auto;
}

.rot-audit-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  color: #475569;
  padding: 3px 6px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  animation: fuFadeIn 0.3s ease;
  white-space: nowrap;
  overflow-x: auto;
}

.rot-audit-entry.latest {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.rot-a-time {
  font-family: monospace;
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 700;
}

.rot-a-lead {
  font-weight: 700;
  color: #0f172a;
}

.rot-a-arrow {
  color: #94a3b8;
  font-size: 0.65rem;
}

.rot-a-rule strong.purple {
  color: #7c3aed;
}

.rot-a-rule strong.blue {
  color: #0284c7;
}

.rot-a-rule strong.green {
  color: #059669;
}

.rot-a-rule strong.gray {
  color: #64748b;
}

.rot-a-team {
  font-weight: 700;
  color: #0f172a;
}

.rot-a-rep strong {
  color: #166534;
}

.rot-a-wa {
  color: #15803d;
  font-size: 0.6rem;
  font-weight: 800;
  background: #dcfce7;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: auto;
}

/* ══════════════════════════════════════════
   10 ─ Autonomous Multilingual AI & Dialect Intelligence
   ══════════════════════════════════════════ */

/* Right Side: Neural Language Orbit Card & Phone Simulator */
.multi-orbit-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 1rem 1.15rem;
  margin: 0 auto 1.25rem;
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}

.multi-orbit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.multi-orbit-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.multi-orbit-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.multi-orbit-title h5 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.01em;
}

.multi-orbit-title p {
  font-size: 0.74rem;
  color: var(--muted);
  margin: 2px 0 0;
}

.multi-radar-badge {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

/* Animated Dialect Badges Grid */
.multi-lang-badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}

.multi-lang-badge {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.multi-lang-badge:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.multi-lang-badge.active {
  background: #eff6ff;
  border-color: #2563eb;
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.2);
  transform: translateY(-2px);
}

.multi-badge-flag {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}

.multi-badge-info {
  flex: 1;
  min-width: 0;
}

.multi-badge-info strong {
  display: block;
  font-size: 0.74rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.multi-badge-info small {
  display: block;
  font-size: 0.62rem;
  color: #64748b;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-fluency-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 0 6px #10b981;
}

.multi-orbit-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

/* Bouncing Audio Waveform */
.multi-soundwave-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 14px;
  flex-shrink: 0;
}

.multi-wave-bar {
  width: 3px;
  background: #3b82f6;
  border-radius: 99px;
  animation: multiWave 1.2s infinite ease-in-out alternate;
}

.multi-wave-bar.b1 { height: 4px; animation-delay: 0.1s; }
.multi-wave-bar.b2 { height: 12px; animation-delay: 0.3s; }
.multi-wave-bar.b3 { height: 8px; animation-delay: 0.15s; }
.multi-wave-bar.b4 { height: 14px; animation-delay: 0.4s; }
.multi-wave-bar.b5 { height: 6px; animation-delay: 0.25s; }

@keyframes multiWave {
  0% { transform: scaleY(0.3); opacity: 0.5; }
  100% { transform: scaleY(1.2); opacity: 1; }
}

.multi-footer-note {
  font-size: 0.65rem;
  color: #64748b;
  line-height: 1.3;
}

/* Tabs above Phone */
.multi-lang-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
  justify-content: center;
}

/* Right Side: Smartphone Frame */
.multi-phone-frame {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  background: #000000;
  border: 10px solid #1e293b;
  border-radius: 44px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.multi-phone-notch {
  width: 90px;
  height: 16px;
  background: #1e293b;
  border-radius: 0 0 12px 12px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.multi-phone-inner {
  background: #efeae2;
  background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 16px 16px;
  min-height: 490px;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Phone App Header */
.multi-app-header {
  background: #075e54;
  color: #ffffff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.multi-back-arrow {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}

.multi-h-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #128c7e, #25d366);
  font-size: 0.72rem;
  font-weight: 900;
  display: grid;
  place-items: center;
  color: #ffffff;
  flex-shrink: 0;
}

.multi-h-info {
  flex: 1;
  min-width: 0;
}

.multi-h-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-h-status {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 5px;
}

.multi-online-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
}

.multi-h-actions {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  display: flex;
  gap: 8px;
}

/* Live Detection Pill Banner */
.multi-detect-banner {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin: 8px 10px 4px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.multi-detect-banner.pulse-detect {
  border-color: #10b981;
  background: #f0fdf4;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
  transform: scale(1.02);
}

.multi-detect-brain {
  font-size: 1.1rem;
  line-height: 1;
}

.multi-detect-text {
  flex: 1;
  min-width: 0;
}

.multi-detect-text strong {
  display: block;
  font-size: 0.72rem;
  color: #0f172a;
}

.multi-detect-text span {
  display: block;
  font-size: 0.6rem;
  color: #64748b;
}

.multi-detect-check {
  font-size: 0.72rem;
  font-weight: 900;
  color: #10b981;
  background: #ecfdf5;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

/* Chat Messages */
.multi-chat-body {
  flex: 1;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.multi-chat-date-pill {
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  font-size: 0.58rem;
  font-weight: 700;
  color: #64748b;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.multi-bubble {
  max-width: 82%;
  padding: 7px 10px 5px;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.35;
  position: relative;
  animation: fuFadeIn 0.25s ease;
  word-break: break-word;
}

.multi-bubble.inbound {
  align-self: flex-start;
  background: #ffffff;
  color: #0f172a;
  border-top-left-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.multi-bubble.outbound {
  align-self: flex-end;
  background: #dcf8c6;
  color: #0f172a;
  border-top-right-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.multi-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  margin-top: 3px;
  font-size: 0.58rem;
  color: #64748b;
}

.multi-ticks {
  color: #38bdf8;
  font-size: 0.65rem;
  font-weight: 900;
}

/* Quick Inquiry Prompts Row */
.multi-quick-prompts {
  display: flex;
  gap: 5px;
  padding: 4px 10px 8px;
  overflow-x: auto;
  white-space: nowrap;
}

.multi-prompt-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 99px;
  padding: 3px 8px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #075e54;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.multi-prompt-chip:hover {
  background: #f0fdf4;
  border-color: #22c55e;
}

/* Input Bar */
.multi-input-bar {
  background: #f0f2f5;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #e2e8f0;
}

.multi-emoji-btn {
  font-size: 1.1rem;
  cursor: pointer;
}

.multi-lead-input {
  flex: 1;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 99px;
  padding: 6px 12px;
  font-size: 0.74rem;
  outline: none;
  color: #0f172a;
}

.multi-lead-input:focus {
  border-color: #075e54;
}

.multi-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #075e54;
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  transition: transform 0.15s ease;
}

.multi-send-btn:hover {
  transform: scale(1.08);
}

.multi-send-btn:active {
  transform: scale(0.95);
}


/* Engine */
.engine{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);padding-block:clamp(3rem,7vw,5rem);align-items:start}
.engine-copy p{margin-top:1rem;color:var(--muted);max-width:44ch}
.steps{counter-reset:s;border-left:3px solid var(--signal);padding-left:1.8rem;display:grid;gap:1.8rem}
.steps li{position:relative;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:-2.95rem;top:0;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--signal);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.95rem}
.steps strong{display:block;font-family:var(--head);font-size:1.3rem}
.steps span{color:var(--muted)}

/* CTA + footer */
.cta{text-align:left;background:var(--signal);color:#04180f;border-radius:28px;padding:clamp(2rem,5vw,4rem);margin-block:2rem 4rem;max-width:calc(1240px - 2*clamp(1.25rem,5vw,4rem))}
.cta p{margin:.8rem 0 1.8rem;max-width:44ch}
.cta .btn.solid{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.cta .btn.solid:hover{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}
footer{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;padding-block:2rem;border-top:2px solid var(--mist);color:var(--muted);font-size:.9rem}
footer small{margin-left:auto}

/* Logo */
.logo{width:32px;height:32px;object-fit:contain;border-radius:8px}

/* Responsive */
@media(max-width:900px){
  .hero,.engine{grid-template-columns:1fr}
  .facts{grid-template-columns:repeat(2,1fr)}
  .rows article{grid-template-columns:1fr;gap:.4rem}
}
@media(max-width:720px){
  .menu-btn{display:block}
  .links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--chalk);padding:1rem clamp(1.25rem,5vw,4rem) 1.5rem;border-bottom:2px solid var(--mist)}
  .links.open{display:flex}
  footer small{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}