/* =========================================================
   CodeChaps — Healthcare App Development page
   Page-specific styles (telehealth hero phone). Shared styles
   live in codechaps-motion.css
   ========================================================= */
.screen{width:100%;height:100%;border-radius:36px;overflow:hidden;display:flex;flex-direction:column;background:#0F172A;color:#fff}
.video{position:relative;flex:1;background:linear-gradient(160deg,#1E3A5F,#0F172A);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.video::before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.35),transparent 70%);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.85);opacity:.7}50%{transform:scale(1.1);opacity:1}}
.video-top{position:absolute;top:22px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;font-size:12px}
.live-dot{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.35);padding:5px 10px;border-radius:999px}
.live-dot i{width:7px;height:7px;border-radius:50%;background:#22C55E;display:block;animation:blink 1.4s ease-in-out infinite}
.live-dot .ico{width:14px;height:14px}
.doc-avatar{position:relative;width:112px;height:112px;border-radius:50%;background:#BFDBFE;color:#1E3A5F;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:38px;border:4px solid rgba(255,255,255,.15)}
.doc-avatar::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(34,197,94,.6);animation:speak 1.6s ease-out infinite}
@keyframes speak{from{transform:scale(.92);opacity:1}to{transform:scale(1.18);opacity:0}}
.doc-name{position:relative;font-weight:700;font-size:16px}
.doc-role{position:relative;font-size:12px;color:var(--on-dark)}
.self-view{position:absolute;right:14px;bottom:14px;width:74px;height:98px;border-radius:14px;background:#334155;border:2px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:11px;color:#E2E8F0}
.vitals{background:#fff;color:#0F172A;padding:14px;display:flex;flex-direction:column;gap:10px}
.js .vitals{transform:translateY(100%)}
.js.loaded .vitals{transform:none;transition:transform 1s var(--ease) 1.1s}
.vitals-title{font-size:12px;font-weight:700}
.vitals-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.vital{background:#F1F5F9;border-radius:12px;padding:8px 10px}
.vital small{display:block;font-size:10px;color:#64748B}
.vital b{font-size:15px;font-variant-numeric:tabular-nums}
.vital .unit{display:inline;font-size:10px;color:#64748B}
.call-bar{display:flex;justify-content:center;gap:14px;padding-top:4px}
.call-bar span{width:42px;height:42px;border-radius:50%;background:#E2E8F0;display:flex;align-items:center;justify-content:center;color:#0F172A}
.call-bar span.end{background:#DC2626;color:#fff}
.call-bar .ico{width:18px;height:18px}
.float--3{left:-205px;bottom:150px}
@media (max-width:1180px) and (min-width:961px){.float--3{left:-170px}}