/* ============================================================
   responsive.css
   Loaded last. Explicit collapse rules, not assumptions.
   Breakpoint: 768px.
   ============================================================ */

@media (max-width:767px){
  .card{ max-width:100% }

  .banner{ aspect-ratio:16/5; min-height:96px }

  /* identity stacks instead of sitting beside the avatar */
  .ident{
    flex-direction:column;
    align-items:flex-start;
    gap:.7rem;
    margin-top:-38px;
  }

  :root{ --avatar-size:80px; --avatar-ring:4px }

  .presence{
    width:18px;
    height:18px;
    right:-1px;
    bottom:-1px;
    box-shadow:0 0 0 4px var(--bg);
  }

  .bubble{
    left:calc(100% - 4px);
    max-width:min(205px,48vw);
    padding:.42rem .75rem;
    font-size:.8rem;
  }
  .bubble img{ width:16px; height:16px }
  .bubble::before{ left:13px; width:13px; height:13px }
  .bubble::after { left:9px;  top:calc(100% + 20px) }

  .names{ padding-bottom:0 }

  .activity__row{ gap:.7rem }
  .art{ width:52px; height:52px }

  .links{ gap:.45rem }
}

/* Everything above MOTION_INTENSITY 3 collapses to static. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none }
}