/* call.css — voice call UI for TeamMaison Chat. Prefixed .ck-* to avoid clashes. */

.ck-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 20, 22, 0.55); backdrop-filter: blur(4px);
}
.ck-modal.hidden, .ck-bar.hidden { display: none; }

.ck-card {
  background: #14201f; color: #eef5f3; border: 1px solid #2d8a8a55;
  border-radius: 18px; padding: 28px 32px; width: min(340px, 88vw);
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.ck-av {
  width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(135deg, #2d8a8a, #1c5e5e); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 600; animation: ckPulse 1.6s ease-in-out infinite;
}
@keyframes ckPulse { 0%,100% { box-shadow: 0 0 0 0 #2d8a8a66; } 50% { box-shadow: 0 0 0 14px #2d8a8a00; } }
/* Expanding sonar rings around the avatar while dialing out. */
.ck-ring { position: relative; width: 76px; height: 76px; margin: 0 auto 14px; }
.ck-ring .ck-av { margin: 0; animation: none; position: relative; z-index: 2; }
.ck-ring::before, .ck-ring::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #2d8a8a; animation: ckSonar 1.8s ease-out infinite;
}
.ck-ring::after { animation-delay: .9s; }
@keyframes ckSonar { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.1); opacity: 0; } }
.ck-dots::after { content: ''; animation: ckDots 1.4s steps(4, end) infinite; }
@keyframes ckDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.ck-name { font-size: 20px; font-weight: 600; }
.ck-sub { font-size: 13px; opacity: .7; margin-top: 4px; }
.ck-row { display: flex; gap: 12px; margin-top: 22px; }
.ck-btn {
  flex: 1; padding: 12px 0; border: none; border-radius: 12px;
  font-size: 15px; font-weight: 600; cursor: pointer; color: #fff;
}
.ck-green { background: #1faa59; }
.ck-red { background: #d2453f; }
.ck-btn:active { transform: scale(.97); }

.ck-bar {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 9000; display: flex; align-items: center; gap: 12px;
  background: #14201f; color: #eef5f3; border: 1px solid #2d8a8a55;
  border-radius: 14px; padding: 10px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.ck-dot { width: 9px; height: 9px; border-radius: 50%; background: #1faa59; animation: ckBlink 1.4s infinite; }
@keyframes ckBlink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.ck-bar-name { font-weight: 600; }
.ck-bar-stat { font-size: 13px; opacity: .75; }
.ck-timer { font-family: 'JetBrains Mono', monospace; font-size: 13px; min-width: 44px; }
.ck-safe {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
  letter-spacing: .5px; color: #7ee0c0; background: #0f2a26; border: 1px solid #2d8a8a55;
  border-radius: 8px; padding: 4px 8px; cursor: help; white-space: nowrap;
}
.ck-safe.hidden { display: none; }
.ck-mini {
  border: none; border-radius: 9px; padding: 7px 12px; cursor: pointer;
  font-size: 13px; font-weight: 600; background: #21413f; color: #eef5f3;
}
.ck-mini.ck-red { background: #d2453f; color: #fff; }
.ck-mini:active { transform: scale(.96); }