/* Atlas Day 4.6.0: compact media and custom video-circle controls. */

.video-circle-shell.atlas-circle-enhanced {
  aspect-ratio: 1 / 1;
  isolation: isolate;
  overflow: visible;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.video-circle-shell.atlas-circle-enhanced::after {
  border-color: rgba(255, 255, 255, .38);
  inset: 3px;
}

.atlas-circle-enhanced .chat-video-circle {
  cursor: pointer;
  display: block;
  height: 100%;
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
}

.atlas-video-progress {
  z-index: 6;
  pointer-events: none;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  position: absolute;
  top: -4px;
  left: -4px;
  overflow: visible;
  transform: rotate(-90deg);
}

.atlas-video-progress-track,
.atlas-video-progress-value {
  fill: none;
  stroke-width: 2.8;
}

.atlas-video-progress-track {
  stroke: rgba(255, 255, 255, .24);
}

.atlas-video-progress-value {
  stroke: #60EFFF;
  stroke-linecap: round;
  stroke-dasharray: 289.027;
  stroke-dashoffset: 289.027;
  filter: drop-shadow(0 0 3px rgba(96, 239, 255, .72));
  transition: stroke-dashoffset .12s linear;
}

.atlas-video-control,
.atlas-video-mute {
  z-index: 9;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .46);
  background: rgba(15, 17, 26, .64);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  place-items: center;
  padding: 0;
  display: grid;
  position: absolute;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}

.atlas-video-control {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 24px;
  line-height: 1;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  transition: opacity .16s ease, transform .16s ease;
}

.atlas-circle-enhanced.is-playing:not(.is-control-visible) .atlas-video-control {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.82);
}

.atlas-video-mute {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  right: 13px;
  bottom: 12px;
  font-size: 13px;
  line-height: 1;
}

.atlas-circle-enhanced > span.atlas-video-duration {
  z-index: 8;
  position: absolute;
  right: auto;
  left: 13px;
  bottom: 14px;
}

.atlas-circle-enhanced.pending .atlas-video-progress-value {
  stroke: #F59E0B;
}

/* Audio stays inside the bubble instead of creating a second large card. */
.neo-chat .chat-message.media-audio,
.neo-chat .chat-message.media-audio.own {
  width: fit-content;
  min-width: min(238px, 76vw);
  max-width: min(320px, 76vw);
  padding: 7px 9px;
}

.neo-chat .media-audio .voice-player {
  width: min(286px, 68vw);
  margin-top: 2px;
}

.neo-chat .media-audio .reaction-summary,
.neo-chat .media-audio .chat-actions {
  margin-top: 4px;
}

.neo-chat .chat-message:not(.media-video):not(.media-audio) {
  width: fit-content;
  max-width: min(58%, 620px);
  padding: 8px 11px;
}

.neo-chat .chat-message:not(.media-video):not(.media-audio) > p {
  margin-top: 4px;
  line-height: 1.38;
}

.atlas-haptic-fallback .kap-body {
  animation: atlas-kap-tap .34s ease-out;
}

@keyframes atlas-kap-tap {
  0% { transform: scale(1); filter: brightness(1); }
  45% { transform: scale(.90, 1.09); filter: brightness(1.18) drop-shadow(0 0 12px rgba(96, 239, 255, .7)); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (width <= 760px) {
  .neo-chat .chat-message:not(.media-video):not(.media-audio) {
    max-width: 78%;
  }

  .atlas-video-control {
    width: 48px;
    height: 48px;
    font-size: 22px;
  }

  .atlas-video-mute {
    width: 28px;
    height: 28px;
    right: 10px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atlas-video-progress-value,
  .atlas-video-control,
  .atlas-haptic-fallback .kap-body {
    transition: none;
    animation: none;
  }
}