/* Calvy AI — Demo Section Styles */

.demo-section{
  background:var(--bg2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:90px 20px;
}
.demo-header{text-align:center;max-width:560px;margin:0 auto 48px;}
.demo-header .section-sub{margin:0 auto;}

/* Scenario picker */
.scenario-picker{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:48px;
}
.scenario-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border:1px solid var(--border2);
  border-radius:4px;
  background:var(--card);
  color:var(--muted2);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.2s;
  user-select:none;
}
.scenario-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.scenario-btn.active{
  border-color:var(--pink);
  color:var(--pink);
  background:rgba(255,45,120,0.06);
  box-shadow:0 0 16px rgba(255,45,120,0.1);
}
.scenario-icon{font-size:1rem;}

/* Demo stage layout */
.demo-stage{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:40px;
  align-items:start;
  max-width:900px;
  margin:0 auto 40px;
}

/* Phone — modern bezel-less */
.demo-phone-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}
.demo-phone{
  width:210px;
  background:linear-gradient(160deg,#111118,#080810);
  border-radius:44px;
  border:1px solid rgba(255,255,255,0.1);
  padding:10px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.8),
    0 0 0 2px rgba(255,255,255,0.06),
    0 40px 100px rgba(0,0,0,0.8),
    0 0 60px rgba(255,45,120,0.08);
  position:relative;
  z-index:1;
}
.phone-notch{
  width:80px;height:26px;
  background:#000;
  border-radius:0 0 18px 18px;
  margin:0 auto 0;
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.phone-notch::before{
  content:'';
  width:8px;height:8px;
  background:#1a1a2a;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
}
.phone-notch::after{
  content:'';
  width:36px;height:4px;
  background:#1a1a2a;
  border-radius:2px;
}
.phone-screen{
  background:#000;
  border-radius:36px;
  padding:0 12px 20px;
  min-height:340px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  position:relative;
}
.phone-screen::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(160deg,rgba(255,45,120,0.04) 0%,transparent 50%);
  pointer-events:none;
}
.phone-call-info{text-align:center;}
.phone-store-name{
  font-family:var(--font-display);
  font-size:0.65rem;
  color:var(--muted2);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.phone-caller{
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:700;
  color:var(--white);
  margin-bottom:6px;
}
.phone-timer{
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--cyan);
  margin-bottom:16px;
}
.phone-wave{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  height:32px;
  margin-bottom:12px;
}
.phone-wave span{
  display:block;
  width:3px;
  background:linear-gradient(to top,var(--pink),var(--cyan));
  border-radius:2px;
  height:4px;
  transition:height 0.1s;
}
.phone-wave.active span:nth-child(1){animation:pw 0.5s 0.0s ease-in-out infinite alternate;}
.phone-wave.active span:nth-child(2){animation:pw 0.5s 0.07s ease-in-out infinite alternate;}
.phone-wave.active span:nth-child(3){animation:pw 0.5s 0.14s ease-in-out infinite alternate;}
.phone-wave.active span:nth-child(4){animation:pw 0.5s 0.21s ease-in-out infinite alternate;}
.phone-wave.active span:nth-child(5){animation:pw 0.5s 0.14s ease-in-out infinite alternate;}
.phone-wave.active span:nth-child(6){animation:pw 0.5s 0.07s ease-in-out infinite alternate;}
.phone-wave.active span:nth-child(7){animation:pw 0.5s 0.0s ease-in-out infinite alternate;}
@keyframes pw{from{height:3px;}to{height:24px;}}

.phone-status{
  font-family:var(--font-mono);
  font-size:0.62rem;
  color:var(--muted2);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.phone-actions{
  display:flex;
  justify-content:space-around;
  align-items:center;
  margin-top:20px;
}
.phone-btn{
  width:48px;height:48px;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:1rem;
  cursor:pointer;
  transition:all 0.2s;
  user-select:none;
}
.phone-btn-call{
  background:linear-gradient(135deg,var(--pink),var(--purple));
  box-shadow:0 0 20px rgba(255,45,120,0.4);
  width:58px;height:58px;
  font-size:1.2rem;
}
.phone-btn-call:hover{transform:scale(1.08);box-shadow:0 0 35px rgba(255,45,120,0.6);}
.phone-btn-end{
  background:rgba(255,59,48,0.15);
  border:1px solid rgba(255,59,48,0.3);
  color:#ff3b30;
}
.phone-btn-end:hover{background:rgba(255,59,48,0.3);}
.phone-btn-mute{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--border2);
  color:var(--muted2);
  font-size:0.85rem;
}
.phone-home-bar{
  width:60px;height:4px;
  background:rgba(255,255,255,0.15);
  border-radius:2px;
  margin:14px auto 0;
}
.phone-glow{
  position:absolute;
  bottom:-30px;left:50%;
  transform:translateX(-50%);
  width:160px;height:40px;
  background:rgba(255,45,120,0.2);
  filter:blur(30px);
  border-radius:50%;
  z-index:0;
}

/* Transcript */
.demo-transcript-wrap{
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:10px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:420px;
}
.demo-transcript-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.3);
}
.demo-transcript-title{
  font-family:var(--font-mono);
  font-size:0.65rem;
  letter-spacing:0.15em;
  color:var(--muted2);
}
.demo-transcript-badge{
  font-family:var(--font-mono);
  font-size:0.62rem;
  color:var(--muted2);
  transition:color 0.3s;
}
.demo-transcript-badge.live{color:var(--green);animation:pulse 1.5s infinite;}

.demo-context-bar{
  background:rgba(0,245,255,0.04);
  border-bottom:1px solid rgba(0,245,255,0.1);
  padding:10px 20px;
  font-family:var(--font-mono);
  font-size:0.7rem;
  color:var(--cyan);
  line-height:1.5;
}

.demo-transcript{
  flex:1;
  padding:20px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.demo-transcript::-webkit-scrollbar{width:3px;}
.demo-transcript::-webkit-scrollbar-thumb{background:var(--border2);}

.transcript-placeholder{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--muted);
  letter-spacing:0.08em;
}

/* Chat bubbles */
.bubble{
  display:flex;
  flex-direction:column;
  gap:4px;
  animation:bubbleIn 0.3s ease both;
}
@keyframes bubbleIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
.bubble-label{
  font-family:var(--font-mono);
  font-size:0.6rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.bubble.agent .bubble-label{color:var(--pink);}
.bubble.customer .bubble-label{color:var(--cyan);text-align:right;}

.bubble-text{
  padding:10px 14px;
  border-radius:10px;
  font-size:0.875rem;
  line-height:1.6;
  max-width:88%;
  position:relative;
}
.bubble.agent .bubble-text{
  background:rgba(255,45,120,0.08);
  border:1px solid rgba(255,45,120,0.2);
  color:var(--text);
  border-radius:4px 14px 14px 14px;
  align-self:flex-start;
}
.bubble.customer .bubble-text{
  background:rgba(0,245,255,0.06);
  border:1px solid rgba(0,245,255,0.15);
  color:var(--text);
  border-radius:14px 4px 14px 14px;
  align-self:flex-end;
  text-align:right;
}

/* Typing indicator */
.typing-bubble .bubble-text{
  display:flex;
  gap:4px;
  align-items:center;
  padding:12px 18px;
}
.typing-dot{
  width:6px;height:6px;
  background:var(--pink);
  border-radius:50%;
  animation:typingDot 0.8s ease-in-out infinite;
}
.typing-dot:nth-child(2){animation-delay:0.15s;}
.typing-dot:nth-child(3){animation-delay:0.3s;}
@keyframes typingDot{
  0%,100%{transform:translateY(0);opacity:0.4;}
  50%{transform:translateY(-4px);opacity:1;}
}

/* Result */
.demo-result{
  margin:0 20px 20px;
  background:rgba(0,255,159,0.05);
  border:1px solid rgba(0,255,159,0.2);
  border-radius:8px;
  padding:16px;
  display:flex;
  align-items:center;
  gap:14px;
  animation:bubbleIn 0.4s ease both;
}
.result-icon{font-size:1.6rem;}
.result-title{
  font-family:var(--font-display);
  font-size:0.85rem;
  font-weight:700;
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin-bottom:2px;
}
.result-sub{font-size:0.78rem;color:var(--muted2);font-family:var(--font-mono);}

/* Metrics strip */
.demo-metrics{
  display:flex;
  justify-content:center;
  gap:0;
  max-width:540px;
  margin:0 auto;
  border:1px solid var(--border2);
  border-radius:6px;
  overflow:hidden;
}
.demo-metric{
  flex:1;
  text-align:center;
  padding:20px 16px;
  border-right:1px solid var(--border2);
  background:var(--card);
}
.demo-metric:last-child{border-right:none;}
.dm-val{
  display:block;
  font-family:var(--font-display);
  font-size:1.5rem;
  font-weight:800;
  color:var(--cyan);
  letter-spacing:0.02em;
}
.dm-label{
  display:block;
  font-family:var(--font-mono);
  font-size:0.6rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--muted2);
  margin-top:4px;
}

@media(max-width:768px){
  .demo-stage{grid-template-columns:1fr;justify-items:center;}
  .demo-phone-wrap{margin-bottom:24px;}
  .demo-transcript-wrap{width:100%;}
  .scenario-picker{gap:8px;}
  .scenario-btn{padding:8px 14px;font-size:0.65rem;}
  .demo-metrics{flex-direction:column;}
  .demo-metric{border-right:none;border-bottom:1px solid var(--border2);}
  .demo-metric:last-child{border-bottom:none;}
}