/* DRW Telemedicine — custom styles layered on Tailwind CDN. */
:root { --brand:#0d9488; --brand-dark:#0f766e; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background:#f1f5f9; }
.brand { color: var(--brand); }
.bg-brand { background: var(--brand); }
.btn { @apply px-4 py-2 rounded-lg font-medium transition; }

/* Video call */
.video-stage { position: relative; background:#0f172a; border-radius:1rem; overflow:hidden; aspect-ratio:16/9; }
.video-stage video.remote { width:100%; height:100%; object-fit:cover; background:#0f172a; }
.video-stage video.local {
  position:absolute; right:12px; bottom:12px; width:28%; max-width:200px;
  border-radius:.6rem; border:2px solid rgba(255,255,255,.5); object-fit:cover; background:#1e293b; z-index:5;
}
.call-bar { position:absolute; left:0; right:0; bottom:0; display:flex; gap:.5rem; justify-content:center;
  padding:.75rem; background:linear-gradient(transparent, rgba(0,0,0,.6)); z-index:6; }
.call-btn { width:46px; height:46px; border-radius:9999px; display:grid; place-items:center; color:#fff; cursor:pointer; }

/* Chat */
.chat-scroll { height: 52vh; overflow-y:auto; }
.bubble { max-width:78%; padding:.5rem .75rem; border-radius:.9rem; margin-bottom:.4rem; font-size:.9rem; line-height:1.3; }
.bubble.me  { background: var(--brand); color:#fff; margin-left:auto; border-bottom-right-radius:.2rem; }
.bubble.them{ background:#fff; color:#0f172a; border:1px solid #e2e8f0; border-bottom-left-radius:.2rem; }
.bubble .meta { font-size:.65rem; opacity:.7; margin-top:2px; }

.badge { @apply inline-block text-xs px-2 py-0.5 rounded-full; }
.spinner { width:18px;height:18px;border:2px solid #cbd5e1;border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display:none !important; }