/* ── messages.css — message feed, groups, bubbles, avatars, media ────────── */

/* ── Message feed ────────────────────────────────────────────── */
#messages {
  position: relative;
  max-height: 100%;
  padding: calc(4.4rem + env(safe-area-inset-top, 0px)) 0rem calc(4.4rem + env(safe-area-inset-bottom, 0px)) 0rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  background: rebeccapurple; /*test color*/
  overflow-y: auto;
}

/* Spacer pushes messages to the bottom when history is short.
   max-height is overridden by os-ios.css / os-android.css to prevent
   over-inflation caused by the negative margin-top on those platforms. */
#messages-spacer {
  flex: 1;
  min-height: 0;
  pointer-events: none;
}

/* ── Message group ───────────────────────────────────────────── */
/* The group is purely a logical container — no flex layout here.
   All visual structure lives inside .msg-wrapper children. */
.msg-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* ══════════════════════════════════════════════════════════════════════════
   MESSAGE WRAPPER — the 3-zone grid
   ════════════════════════════════════════════════════════════════════════

   Every .msg-wrapper is a 3-column grid:

     [ .mw-avatar ]  [ .mw-meta ]  [ .mw-content ]
         38px          narrow          flex 1

   .mw-avatar — only present on .is-first (first message in the group).
                Follow-up wrappers have no avatar column — the grid uses
                a transparent spacer instead to keep content aligned.

   .mw-meta   — narrow left gutter, always present:
                  • .is-first: shows .mw-namerow (author + timestamp) above .mw-status
                  • follow-ups: shows .mw-status only
                Hidden at rest; slides in when .mw-status has content.

   .mw-content — flex 1, holds the actual bubble / image / file-wrapper.
   ════════════════════════════════════════════════════════════════════════ */

/* Avatar width + gap so follow-up content aligns under first's content */
:root { --mw-avatar-col: 42px; }

.msg-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  position: relative;
  transition: background 0.1s;
}
.msg-wrapper:hover { background: rgba(255,255,255,0.03); }

/* On .is-first: grid with avatar col + body col */
.msg-wrapper.is-first {
  display: grid;
  grid-template-columns: var(--mw-avatar-col) 1fr;
  grid-template-rows: auto auto;
}

.mw-body {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The avatar cell */
.mw-avatar {
  grid-column: 1;
  grid-row: 1;
  width: var(--mw-avatar-col);
  height: var(--mw-avatar-col);
  flex-shrink: 0;
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-md); color: var(--text);
  border-radius: var(--radius-lg);
  user-select: none; text-transform: uppercase; overflow: hidden;
  align-self: start;
  margin-top: 0.1rem;
}
}
.mw-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* The meta column — flex child on follow-ups, block inside .mw-body on .is-first */
.mw-meta {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
  gap: 0.5rem;
}
/* Follow-up meta: status left, timestamp right — flush to the right edge */
.msg-wrapper:not(.is-first) .mw-meta {
  justify-content: flex-end;
  width: auto;
  min-width: var(--mw-avatar-col);
  gap: 0.5rem;
}

.msg-author    { font-size: var(--text-md); font-weight: 700; color: var(--text); cursor: pointer; }
.msg-author:hover { text-decoration: underline; }
.msg-group.is-me .msg-author { color: var(--accent); }
.msg-timestamp { font-size: var(--text-xs); color: var(--muted); }

/* Follow-up timestamp — shown in .mw-meta on non-first wrappers.
   Invisible at rest (opacity 0), fades in on group hover so it doesn't
   clutter the layout but is always discoverable. */
.mw-followup-ts {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  line-height: 1.4;
  margin-bottom: 0.05rem;
}
.msg-group:hover .mw-followup-ts { opacity: 1; }

/* When mw-status is visible on a specific follow-up, also show that message's timestamp */
.msg-wrapper:not(.is-first) .mw-meta:has(.mw-status.is-visible) .mw-followup-ts { opacity: 1; }

/* Status slot — hidden at rest, shown when .is-visible */
/* Content cell — flex:1 on follow-ups so it fills remaining row width,
   normal block (full width) inside .mw-body on .is-first */
.mw-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.msg-wrapper:not(.is-first) .mw-content {
  flex: 1;
}

/* ── System message ──────────────────────────────────────────── */
.msg-system {
  text-align: center; font-size: var(--text-xs); color: var(--muted);
  padding: 0.4rem 1.25rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.msg-system::before, .msg-system::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ── Text bubble ─────────────────────────────────────────────── */
.msg-bubble {
  display: inline-block;
  max-width: min(560px, 72vw);
  padding: 0.2rem 0;
  background: transparent; color: var(--text);
  font-size: var(--text-base); line-height: 1.5;
  word-break: break-word; white-space: pre-wrap;
}
.msg-group.is-me .msg-bubble {
  background: transparent;
  color: var(--accent-me);
  font-weight: 600;
}

/* ── Pending (optimistic) message state ──────────────────────────────────
   Status slot shows an animated "···" pulse. Content is muted. ── */
.msg-group.is-pending .msg-bubble {
  color: var(--muted) !important;
  opacity: 0.55;
}
.msg-group.is-pending .msg-author,
.msg-group.is-pending .msg-timestamp {
  opacity: 0.45;
}
/* Pending status pulse */
.msg-group.is-pending .mw-status.is-visible {
  animation: pending-pulse 1.4s ease-in-out infinite;
}
@keyframes pending-pulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1;   }
}

/* ── Deleting state ──────────────────────────────────────────────────────
   Applied immediately on delete trigger. .mw-status shows "Deleting…" ── */
.msg-wrapper.is-deleting {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.15s;
}
.msg-wrapper.is-deleting .msg-bubble,
.msg-wrapper.is-deleting .file-bubble,
.msg-wrapper.is-deleting .file-wrapper {
  filter: grayscale(0.6);
}
.msg-wrapper.is-deleting .mw-status {
  animation: pending-pulse 1.2s ease-in-out infinite;
}
/* Fade-out animation triggered just before DOM removal */
.msg-wrapper.is-deleting-out {
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}

/* ── Cancel affordance ───────────────────────────────────────────────────
   Appears on hover / long-press on pending .mw-content ── */
.msg-pending-cancel {
  display: none;
  position: absolute;
  right: 1.25rem; top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xs);
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.4rem;
  cursor: pointer;
  white-space: nowrap;
  z-index: 5;
  transition: color 0.1s;
}
.msg-pending-cancel:hover { color: var(--accent); }
.msg-wrapper:hover .msg-pending-cancel,
.msg-wrapper.cancel-visible .msg-pending-cancel { display: block; }

/* ── Pending file bubble placeholder ─────────────────────────────────────
   Shown while file is in flight. ── */
.msg-bubble.is-file-pending {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 0.55;
}
.fpb-name { font-size: var(--text-sm); word-break: break-all; color: var(--text); }
.fpb-size { font-size: var(--text-xs); color: var(--muted); }

/* ── Context inline error ───────────────────────────────────────────────── */
.ctx-inline-error {
  font-size: var(--text-xs);
  color: #ff6b6b;
  margin-top: 0.15rem;
  animation: pending-pulse 1.4s ease-in-out 1;
}

/* ── Inline image ────────────────────────────────────────────── */
.img-preview-wrapper {
  display: inline-flex;
  width: 100%;
  max-width: 320px;
  height: 200px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-md);
  cursor: pointer;
}
.img-preview-wrapper:hover { border-color: var(--accent); }
.img-preview {
  width: 100%; height: 100%;
  display: block; cursor: pointer; object-fit: cover;
}

/* ── Video thumbnail ─────────────────────────────────────────── */
.video-thumb {
  position: relative; display: inline-block;
  max-width: 300px; line-height: 0; cursor: pointer;
}
.video-thumb video { max-width: 300px; max-height: 220px; display: block; object-fit: cover; }
.video-thumb-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.28);
  transition: background 0.12s; pointer-events: none;
}
.video-thumb:hover .video-thumb-play { background: rgba(0,0,0,0.45); }

/* ── Skeleton message groups ─────────────────────────────────────────────
   Pre-baked placeholder groups visible before history loads. ── */
.skel-bar {
  display: block;
  height: 0.75rem;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--surface2) 0%,
    var(--surface3) 45%,
    var(--surface2) 100%
  );
  background-size: 200% 100%;
  animation: skel-sweep 1.6s ease-in-out infinite;
}
@keyframes skel-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.skel-avatar {
  background: linear-gradient(
    90deg,
    var(--surface2) 0%,
    var(--surface3) 45%,
    var(--surface2) 100%
  );
  background-size: 200% 100%;
  animation: skel-sweep 1.6s ease-in-out infinite;
}
.skel-name   { width: 80px; max-width: 20%; margin-bottom: 0.1rem; }
.skel-ts     { width: 36px; height: 0.6rem; opacity: 0.5; }
.skel-bubble { height: 0.85rem; max-width: 72vw; }

.msg-skeleton:nth-child(2) .skel-bar,
.msg-skeleton:nth-child(2) .skel-avatar { animation-delay: 0.2s; }
.msg-skeleton:nth-child(3) .skel-bar,
.msg-skeleton:nth-child(3) .skel-avatar { animation-delay: 0.4s; }
.msg-skeleton:nth-child(4) .skel-bar,
.msg-skeleton:nth-child(4) .skel-avatar { animation-delay: 0.6s; }
.msg-skeleton:nth-child(5) .skel-bar,
.msg-skeleton:nth-child(5) .skel-avatar { animation-delay: 0.8s; }
.msg-skeleton:nth-child(6) .skel-bar,
.msg-skeleton:nth-child(6) .skel-avatar { animation-delay: 1.0s; }
.msg-skeleton:nth-child(7) .skel-bar,
.msg-skeleton:nth-child(7) .skel-avatar { animation-delay: 1.2s; }
.msg-skeleton:nth-child(8) .skel-bar,
.msg-skeleton:nth-child(8) .skel-avatar { animation-delay: 1.4s; }