/* ShotGram v88 — online/offline indicator.
   Rendered next to a username in the DM list and the chat header.
   Colour never carries the meaning alone: every dot also has an aria-label and
   a title, and the chat header shows the word underneath. */

.sg-presence {
  display: inline-block;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  transition: background-color .18s ease, box-shadow .18s ease;
}

.sg-presence.is-online {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .18);
}

.sg-presence.is-offline {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(148, 163, 184, .55);
}

/* The word under the username in the chat header. */
.room-peer-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}

.room-peer-status {
  font-size: 11px;
  line-height: 1.1;
  font-weight: 500;
}

.sg-presence-text.is-online { color: #22c55e; }
.sg-presence-text.is-offline { color: var(--muted, #94a3b8); }

/* RTL: the dot sits on the correct side of the name automatically because the
   row is a flex container, but the header column has to flip its alignment. */
[dir="rtl"] .room-peer-id { align-items: flex-end; }

/* A pulse only on first appearance, so a friend coming online is noticeable
   without the list ever looking busy. */
@keyframes sg-presence-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.sg-presence.is-online {
  animation: sg-presence-pop .22s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .sg-presence { animation: none; transition: none; }
}

/* ------------------------------------------------------- caption clamp */
/* A 2,200-character caption used to push every other post off the screen.
   Two lines, then a "more" button, the way Instagram does it. */
.caption-text.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.caption-more {
  display: inline;
  padding: 0;
  margin-inline-start: 4px;
  font-size: inherit;
  cursor: pointer;
}

/* The caption block must never widen the card, whatever is pasted into it —
   long unbroken URLs were a second way the layout got pushed sideways. */
.caption, .caption-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ------------------------------- dot anchored to the avatar, Instagram style */
.avatar-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}

.avatar-wrap .sg-presence {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  /* The ring punches the dot out of the avatar so it reads clearly on any
     profile picture, light or dark. */
  border: 2px solid var(--bg, #0b0f14);
  box-sizing: border-box;
}

/* Offline needs no badge on an avatar — an empty ring on every row is noise.
   The chat header still spells the word out underneath. */
.avatar-wrap .sg-presence.is-offline { display: none; }

/* Busy: on a call. Amber, distinct from both green and grey. */
.sg-presence.is-busy {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .18);
}
.avatar-wrap .sg-presence.is-busy { box-shadow: none; }
.avatar-wrap .sg-presence.is-online { box-shadow: none; }
.sg-presence-text.is-busy { color: #f59e0b; }

/* ----------------------------------------------- v89 Snapchat-style DM media */
/* The picker grew from 3 options to 5, so it has to wrap on a narrow phone
   instead of overflowing the composer. */
.timer-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.timer-choices button {
  flex: 0 0 auto;
  min-width: 56px;
}

/* Video in the one-time viewer fills the stage exactly as the photo does. */
.dm-timed-stage video#timedImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.dm-timed-stage video#timedImage.blurred { filter: blur(28px); }

/* Stack the review and reply buttons rather than squeezing them side by side. */
.dm-timed-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}