/* ---------------- SOCIAL 10x — calls, voice notes, listen together ----------------
   Living-glass surfaces for the new rooms. Transform/opacity animation
   only; for prefers-reduced-motion the glass is still. The green lock
   in a call is painted by state, never by habit: .tone-green appears
   only when EmberCrypto.securityState says the line is encrypted. */

.thread-note {
  text-align: center;
  color: var(--dim, #8a7a5c);
  font-size: .82rem;
  font-style: italic;
  margin: 10px auto;
  padding: 4px 12px;
  max-width: 85%;
}

.msg.voice .vn-wrap { display: inline-flex; align-items: center; gap: 8px; }
.vn-player { height: 34px; max-width: 210px; }
.vn-dur { font-size: .78rem; color: var(--dim, #8a7a5c); }
.vn-gone { font-style: italic; color: var(--dim, #8a7a5c); }

.msg.phone-share {
  border: 1px solid var(--gold, #c9a227);
  background: rgba(201, 162, 39, .08);
}
.ps-tag {
  display: block;
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--gold, #c9a227);
  margin-bottom: 4px;
}

.chat-privacy {
  padding: 6px 14px;
  font-size: .76rem;
  color: var(--dim, #8a7a5c);
  border-top: 1px solid rgba(201, 162, 39, .14);
}

.soc-recbar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 8px; padding: 10px 12px;
  border-radius: 14px;
  background: rgba(20, 12, 18, .72);
  border: 1px solid rgba(201, 162, 39, .35);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.soc-recbar .rec-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #e5484d; animation: socPulse 1.2s ease-in-out infinite;
}
@keyframes socPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.soc-recbar audio { height: 32px; max-width: 200px; }

/* ---------------- veils shared by calls, rooms and pickers ---------------- */
.soc-veil {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(5, 3, 6, .72);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.soc-card {
  width: min(560px, 100%);
  max-height: 92vh; overflow-y: auto;
  border-radius: 22px; padding: 20px;
  background: linear-gradient(160deg, rgba(46, 24, 40, .88), rgba(16, 9, 16, .92));
  border: 1px solid rgba(201, 162, 39, .4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 235, 200, .16);
  color: #efe6d0; text-align: center;
}
.soc-card h2 { margin: 6px 0 2px; font-size: 1.3rem; }
.soc-card .sub { color: var(--dim, #a4916c); }

.call-avatar {
  width: 92px; height: 92px; border-radius: 50%;
  margin: 10px auto; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; background: rgba(201, 162, 39, .12);
  border: 2px solid rgba(201, 162, 39, .55); overflow: hidden;
}
.call-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.call-avatar.ringing { animation: socRing 1.6s ease-in-out infinite; }
@keyframes socRing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.call-videos { position: relative; margin: 10px 0; }
.call-video-remote {
  width: 100%; max-height: 46vh; border-radius: 16px;
  background: #0a060a; object-fit: cover;
  border: 1px solid rgba(201, 162, 39, .3);
}
.call-video-local {
  position: absolute; right: 10px; bottom: 10px;
  width: 28%; max-width: 130px; border-radius: 12px;
  background: #0a060a; object-fit: cover;
  border: 1px solid rgba(255, 235, 200, .35);
}
.call-videos.voice-only .call-video-remote, .call-videos.voice-only .call-video-local { display: none; }

/* Make-it-big (EmberBig): the call stage at full size — native
   fullscreen where the browser gives it, the fixed focus layout where
   it does not. The controls live below the stage and are never inside
   it, so making the picture big can never swallow them. */
.call-videos:fullscreen { margin: 0; background: #050309; }
.call-videos:fullscreen .call-video-remote { width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: contain; }
.call-videos.big-focus { position: fixed; inset: 0; z-index: 1200; margin: 0; background: #050309; }
.call-videos.big-focus .call-video-remote { width: 100%; height: 100%; max-height: none; border-radius: 0; object-fit: contain; }

.call-lock {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; margin: 8px 0 2px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .35);
}
.call-lock.tone-green { color: #7ee2a0; border-color: rgba(64, 200, 120, .65); box-shadow: 0 0 14px rgba(64, 200, 120, .25); }
.call-lock.tone-amber { color: #f2c14e; border-color: rgba(242, 193, 78, .55); }
.call-lock.tone-red { color: #ff8f8f; border-color: rgba(229, 72, 77, .6); }

.call-words { font-size: .85rem; color: #efe6d0; margin-top: 4px; }
.call-words b { letter-spacing: .14em; color: var(--gold, #c9a227); }
.call-honest { font-size: .74rem; color: var(--dim, #a4916c); margin-top: 8px; }

.call-controls, .room-controls {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px;
}
.call-btn {
  border-radius: 999px; border: 1px solid rgba(201, 162, 39, .45);
  background: rgba(0, 0, 0, .35); color: #efe6d0;
  padding: 9px 14px; font-size: .9rem; cursor: pointer;
}
.call-btn.on { background: rgba(201, 162, 39, .3); }
.call-btn.danger { border-color: rgba(229, 72, 77, .7); background: rgba(229, 72, 77, .22); }
.call-btn.accept { border-color: rgba(64, 200, 120, .7); background: rgba(64, 200, 120, .2); }

/* ---------------- listen together ---------------- */
.room-cover { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; margin: 6px auto; display: block; border: 1px solid rgba(201, 162, 39, .4); }
.room-seek { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; font-size: .8rem; color: var(--dim, #a4916c); }
.room-seek input { flex: 1; }
.room-reacts { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.room-reacts button {
  font-size: 1.15rem; background: rgba(0, 0, 0, .3); cursor: pointer;
  border: 1px solid rgba(201, 162, 39, .3); border-radius: 999px; padding: 4px 10px;
}
.room-stage { position: relative; min-height: 8px; }
.react-float {
  position: absolute; bottom: 0; font-size: 1.5rem; pointer-events: none;
  animation: socFloat 2.4s ease-out forwards;
}
@keyframes socFloat {
  from { transform: translateY(0) scale(1); opacity: 0; }
  12% { opacity: 1; }
  to { transform: translateY(-110px) scale(1.25); opacity: 0; }
}
.room-chat {
  margin-top: 12px; text-align: left;
  border-top: 1px solid rgba(201, 162, 39, .2); padding-top: 10px;
}
.room-chat-log { max-height: 110px; overflow-y: auto; font-size: .86rem; display: flex; flex-direction: column; gap: 4px; }
.room-chat-log .rc-name { color: var(--gold, #c9a227); font-weight: 600; }
.room-chat-form { display: flex; gap: 8px; margin-top: 8px; }
.room-chat-form input { flex: 1; }

/* ---------------- pickers & invites ---------------- */
.soc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; text-align: left; }
.soc-list button, .soc-list .soc-row {
  display: flex; gap: 10px; align-items: center; width: 100%;
  padding: 10px 12px; border-radius: 14px; cursor: pointer;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(201, 162, 39, .25); color: #efe6d0;
}
.soc-list img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.soc-list .locked { opacity: .55; cursor: not-allowed; }
.soc-invite {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 86px; z-index: 119; width: min(520px, calc(100% - 24px));
  border-radius: 18px; padding: 14px 16px; text-align: center;
  background: linear-gradient(160deg, rgba(46, 24, 40, .94), rgba(16, 9, 16, .96));
  border: 1px solid rgba(201, 162, 39, .5);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  color: #efe6d0;
}
.t-together {
  margin-top: 8px; font-size: .78rem; padding: 5px 10px; border-radius: 999px;
  background: rgba(201, 162, 39, .14); color: var(--gold, #c9a227);
  border: 1px solid rgba(201, 162, 39, .45); cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .call-avatar.ringing, .soc-recbar .rec-dot, .react-float { animation: none; }
  .react-float { opacity: 1; }
}

/* THE RECORD BANNER on a call (build .22): painted from the house's
 * relayed word on both screens — it cannot be hidden by either. */
.rec-banner {
  margin-top: 10px; padding: 9px 14px; border-radius: 12px;
  background: rgba(120, 10, 20, .38); border: 1px solid rgba(255, 90, 90, .55);
  color: #ffd9d9; font-weight: 600; text-align: center;
}
.rec-banner .call-btn { margin-left: 10px; }
.rec-ask-card {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: rgba(120, 10, 20, .22); border: 1px dashed rgba(255, 90, 90, .5);
  text-align: center;
}