/* ============================================================================
   Mizan Voice Gateway — Call Page Design (08-call-page.html visual identity)
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --mz-accent: #2563EB;
  --mz-accent-2: #1D4ED8;
  --mz-accent-glow: rgba(37, 99, 235, 0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  background: #EEF2F7;
  color: #0F2D52;
  direction: rtl;
  min-height: 100vh;
}
.vp {
  max-width: 440px;
  margin: 0 auto;
  min-height: 100vh;
  background: #F6F8FB;
  box-shadow: 0 0 0 1px #E5EAF1, 0 12px 32px rgba(15, 45, 82, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 26px;
  text-align: center;
}
.top-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lg { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: #0F2D52; text-decoration: none; }
.lm { width: 38px; height: 38px; border-radius: 11px; background: #0F2D52; color: #fff; display: grid; place-items: center; }
.av {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #DCE7F8;
  display: grid;
  place-items: center;
  color: #0F2D52;
  margin: 28px 0 14px;
  overflow: hidden;
}
.av img { width: 100%; height: 100%; object-fit: cover; }
.vp h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: #0F2D52; }
.vp p.tag { margin: 0; color: #5B6B80; font-size: 15px; }
.st {
  margin: 18px 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #0E7A4F;
  background: #E8F6EF;
  padding: 6px 14px;
  border-radius: 99px;
  font-weight: 600;
}
.st.connecting { color: #8A5A00; background: #FFF4DB; }
.st.error { color: #B42318; background: #FDECEA; }
.wave { display: flex; justify-content: center; align-items: center; gap: 5px; height: 54px; width: 100%; }
.wave i { width: 5px; height: 100%; border-radius: 4px; background: var(--mz-accent, #2563EB); animation: wv 1.2s ease-in-out infinite; }
.wave i:nth-child(2n) { animation-delay: .2s; background: #7FA3EC; }
.wave i:nth-child(3n) { animation-delay: .45s; }
.wave i:nth-child(5n) { animation-delay: .7s; }
.wave.idle i { animation-play-state: paused; transform: scaleY(.35); }
@keyframes wv { 50% { transform: scaleY(.3); } }
.mic {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 0;
  background: var(--mz-accent, #2563EB);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 0 12px #EAF1FF, 0 10px 24px var(--mz-accent-glow);
  margin: 28px 0 16px;
  transition: transform .15s, background .15s;
}
.mic:hover { transform: scale(1.04); }
.mic.active { background: #B42318; box-shadow: 0 0 0 12px #FDECEA, 0 10px 24px rgba(180, 35, 24, .3); }
.call-controls { display: none; align-items: center; gap: 14px; margin: 8px 0 14px; }
.call-controls.visible { display: flex; }
.call-timer { font-size: 14px; font-weight: 700; color: #0F2D52; font-variant-numeric: tabular-nums; }
.mute-button {
  height: 36px;
  padding: 0 14px;
  border-radius: 99px;
  border: 1px solid #D5DEEB;
  background: #fff;
  color: #0F2D52;
  font: 600 13px 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.mute-button.muted { background: #FFF4DB; color: #8A5A00; border-color: #FDE68A; }
.card {
  background: #fff;
  border: 1px solid #E5EAF1;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 45, 82, .04), 0 6px 18px rgba(15, 45, 82, .05);
  width: 100%;
  padding: 18px;
  text-align: right;
  margin-top: auto;
  font-size: 14px;
  line-height: 1.8;
  color: #1E3553;
}
.transcript { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.turn { padding: 10px 12px; border-radius: 10px; background: #F6F8FB; font-size: 13.5px; line-height: 1.65; }
.turn.agent { background: #EAF1FF; margin-inline-start: 20px; }
.turn-label { font-size: 11.5px; font-weight: 700; color: #5B6B80; margin-bottom: 2px; }
.ft { font-size: 12px; color: #5B6B80; margin-top: 18px; }
.ft a { color: #2563EB; font-weight: 600; text-decoration: none; }