/* Görüntülü görüşme sayfası — kendi WebRTC arayüzümüz. Koyu, tam ekran, mobil-uyumlu. */
:root {
  --rtc-bg: #0b1220;
  --rtc-card: #131c2e;
  --rtc-line: #263349;
  --rtc-accent: #2f6df6;
  --rtc-accent-2: #16b8a6;
  --rtc-text: #eaf0fb;
  --rtc-muted: #94a3b8;
  --rtc-danger: #ef4444;
}
* { box-sizing: border-box; }
/* KRİTİK: .rtc-pre/.rtc-ended/.rtc-remote-ph gibi display:flex kuralları tarayıcının
   [hidden]{display:none} varsayılanını ezer; bu yüzden `el.hidden=true` görsel olarak
   gizlemez (görüşmeye katıl ekranı üstte takılı kalır, görüntü görünmez). Zorla gizle. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; } /* tam ekran görüşme — sayfa asla kaymaz */
body {
  background: var(--rtc-bg);
  color: var(--rtc-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#rtc-app { height: 100vh; height: 100dvh; }

/* --- Görüşme öncesi & bitiş kartları --- */
.rtc-pre, .rtc-ended {
  height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, #16233c 0%, var(--rtc-bg) 60%);
}
.rtc-card {
  width: 100%; max-width: 440px; background: var(--rtc-card);
  border: 1px solid var(--rtc-line); border-radius: 20px; padding: 28px 24px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.rtc-logo { width: 52px; height: 52px; margin-bottom: 8px; }
.rtc-card h1 { font-size: 22px; margin: 4px 0 10px; letter-spacing: -.02em; }
.rtc-sub { color: var(--rtc-muted); font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.rtc-sub b { color: var(--rtc-text); }

.rtc-preview-wrap {
  position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden;
  background: #0a1120; border: 1px solid var(--rtc-line); margin-bottom: 18px;
}
.rtc-preview { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.rtc-preview-off {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--rtc-muted); font-size: 13px; padding: 16px; text-align: center;
}

.rtc-btn {
  width: 100%; border: 1px solid var(--rtc-line); background: #1b2740; color: var(--rtc-text);
  border-radius: 12px; padding: 13px 16px; font-size: 15px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: filter .15s, background .15s;
}
.rtc-btn:hover { filter: brightness(1.1); }
.rtc-btn:disabled { opacity: .5; cursor: not-allowed; }
.rtc-btn-primary { background: linear-gradient(135deg, var(--rtc-accent), var(--rtc-accent-2)); border: none; }
.rtc-msg { margin-top: 12px; font-size: 13px; color: var(--rtc-muted); min-height: 18px; }
.rtc-msg.err { color: #fca5a5; }

.rtc-ended-icon { font-size: 46px; margin-bottom: 6px; }

/* --- Danışan davet paylaşımı (yalnızca hekim) --- */
.rtc-share {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rtc-line); text-align: left;
}
.rtc-share-label { font-size: 13px; color: var(--rtc-muted); margin-bottom: 8px; }
.rtc-share-row { display: flex; gap: 8px; margin-bottom: 8px; }
.rtc-share-input {
  flex: 1; min-width: 0; background: #0a1120; border: 1px solid var(--rtc-line); color: var(--rtc-text);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; font-family: inherit;
}
.rtc-share-actions { display: flex; gap: 8px; }
.rtc-share-actions .rtc-share-btn { flex: 1; }
.rtc-share-btn {
  border: 1px solid var(--rtc-line); background: #1b2740; color: var(--rtc-text); white-space: nowrap;
  border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: filter .15s;
}
.rtc-share-btn:hover { filter: brightness(1.12); }
.rtc-share-btn.wa { background: #128c7e; border-color: #128c7e; color: #fff; }

/* Görüşme ekranı, danışan beklenirken paylaş butonu */
.rtc-invite {
  margin-top: 4px; width: auto; padding: 12px 20px;
  background: linear-gradient(135deg, var(--rtc-accent), var(--rtc-accent-2)); border: none;
}

/* --- Görüşme ekranı --- */
.rtc-call { position: relative; height: 100%; background: #05080f; overflow: hidden; }
.rtc-remote {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #05080f;
  opacity: 0; transition: opacity .3s;
}
.rtc-remote.live { opacity: 1; }
.rtc-remote-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
/* Karşı taraf görüntüsü gelince "Bağlanıyor…" göstergesini KESİN gizle — sadece hidden
   attribute'una güvenme (yukarıdaki display:flex onu ezerdi); görüntü canlıysa yer kaplamasın. */
.rtc-remote.live ~ .rtc-remote-ph { display: none !important; }
.rtc-status { color: var(--rtc-muted); font-size: 15px; }
.rtc-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--rtc-line); border-top-color: var(--rtc-accent);
  animation: rtc-spin 1s linear infinite;
}
@keyframes rtc-spin { to { transform: rotate(360deg); } }

.rtc-local {
  position: absolute; right: 16px; top: 16px; width: 26vw; max-width: 190px; aspect-ratio: 3/4;
  object-fit: cover; border-radius: 12px; border: 2px solid rgba(255,255,255,.15);
  background: #0a1120; transform: scaleX(-1); box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 3;
}

.rtc-bar {
  position: absolute; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%); display: flex; gap: 14px; z-index: 4;
  background: rgba(11,18,32,.6); backdrop-filter: blur(8px);
  padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08);
}
.rtc-ctrl {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: #223049; color: #fff; font-size: 22px; display: grid; place-items: center;
  transition: background .15s, transform .1s;
}
.rtc-ctrl:hover { background: #2c3d5c; }
.rtc-ctrl:active { transform: scale(.94); }
.rtc-ctrl.off { background: #3a4763; }
.rtc-hangup { background: var(--rtc-danger); transform: rotate(135deg); }
.rtc-hangup:hover { background: #dc2626; }
.rtc-hangup:active { transform: rotate(135deg) scale(.94); }

.rtc-status-pill {
  position: absolute; left: 50%; top: calc(16px + env(safe-area-inset-top)); transform: translateX(-50%);
  background: rgba(11,18,32,.8); border: 1px solid var(--rtc-line); color: var(--rtc-text);
  padding: 8px 16px; border-radius: 999px; font-size: 13px; z-index: 4; max-width: 90vw; text-align: center;
}

@media (max-width: 480px) {
  .rtc-local { width: 34vw; right: 12px; top: 12px; }
  .rtc-ctrl { width: 52px; height: 52px; font-size: 20px; }
}