.chat-row {
  position: relative;
  /* Only the horizontal axis needs clipping — .chat-row__track is wider
     than 100% so the swipe-revealed pin/delete buttons sit off-screen
     until dragged into view. A blanket overflow:hidden also clipped the
     vertical axis, which on mobile cut the bottom off this row: text
     auto-sizing (WebKit's "font boosting") inflates rendered text height
     AFTER the row's own height is already committed, so the extra height
     — carrying the avatar circle down with it — got sliced off instead of
     the row simply growing to fit. */
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  flex-shrink: 0;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* --actions-width defaults to 154px (the normal pin+delete strip's own
   fixed width: two 66px buttons + 6px gap + 16px right padding, matching
   the screen-edge inset bumped from 12px to 16px) but is
   overridden per-row (inline style, set by js/components/chat-card.js)
   for the info-pill variant, whose real fetched width is 166px — widening
   the track by exactly that much past 100% means the flexible .chat-card
   below always fills precisely the row's own visible width (never more,
   never less, at any frame size), while the fixed-width actions sit just
   past the right edge, clipped by .chat-row's overflow:hidden until a
   swipe reveals them. */
.chat-row__track {
  display: flex;
  width: calc(100% + var(--actions-width, 154px));
  transform: translateX(var(--drag-offset, 0px));
}

.chat-row__track--snapping {
  transition: transform var(--transition-standard);
}

/* An actionless row (Announcements swiped by a non-lead) always bounces
   back closed on release — never stays open, since there's nothing to
   reveal — using the same "Quick" spring approximation
   (cubic-bezier(0.34, 1.56, 0.64, 1)) already used elsewhere in this app
   for a snap-with-overshoot feel, signaling "this can't stay open"
   distinctly from the plain snap-close ease above. */
.chat-row__track--bouncing {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Deliberately its own slower timing (not var(--transition-standard)) — the
   swiped row closing because the user scrolled past it is a distinct,
   softer interaction from the snappy drag-release close. */
.chat-row__track--scroll-closing {
  transition: transform 500ms ease-out;
}

.chat-row__actions {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 6px;
  /* Real fetched value (node 69:1266): the card's own py-8, not 14 — the
     actions strip must match it to stay height-aligned with the card it
     sits beside (the two are separate DOM siblings in this codebase's
     swipe-track architecture, unlike Figma's single component, so nothing
     else keeps them in sync automatically). */
  padding: 8px 16px 8px 0;
  box-sizing: border-box;
}

/* Figma's real fetched width (166px pill, 142px text box) wraps to 3
   lines in Figma's own font renderer, but 4 in this browser (Plus Jakarta
   Sans metrics differ slightly between the two) — measured empirically
   that 150px of real text width is what it takes here to also settle at
   3 lines, per explicit instruction to prioritize "never taller than the
   card" over the literal Figma pixel value. 188px total: 152px text +
   24px pill's own padding (12+12) + 12px real row-edge margin (the
   shared .chat-row__actions rule's right-padding — see below).

   Inherits the shared .chat-row__actions rule's own 14px top/bottom inset
   unchanged — same as the pin/delete buttons use, per explicit instruction:
   this pill sits "in place of" those buttons, at their same height, not
   stretched to the full card height (that was tried and made it read as
   oversized/overlapping neighboring rows — reverted). */
.chat-row__actions--info {
  width: 188px;
}

.chat-row__info-pill {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  /* Real fetched value (node 384:9822: p-[6px], uniform) — was 10px 12px. */
  padding: 6px;
  border-radius: 12px;
  background: var(--surface-header-button);
  /* Real fetched effect (node 384:9797 lists "Effect(type: GLASS,
     radius: 100)"), same token the pin/delete action buttons already use
     for their own glass blur. */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-sizing: border-box;
}

.chat-row__info-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
}

.chat-row__action {
  flex-shrink: 0;
  width: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  padding: 0;
}

.chat-row__action--pin {
  background: var(--surface-header-button);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.chat-row__action--delete {
  background: var(--surface-delete-action);
}

.chat-row__action-icon {
  width: 18px;
  height: 18px;
}

/* pin.svg/unpin.svg's own real aspect ratios (21x28 / 27x28) — sized by
   height only so they aren't stretched into the 18x18 square the trash
   icon uses. */
.chat-row__action-icon--pin {
  width: auto;
  height: 20px;
}

.chat-card {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0%;
  min-width: 0;
  /* Real fetched value (node 69:1266, re-confirmed live): py-[12px]
     px-[16px] — was 8px vertical. */
  padding: 12px 16px;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
}

.chat-card__avatar {
  flex-shrink: 0;
  /* Real fetched value (node 115:4836, re-confirmed live): 54px — was
     48px. Inner icon stays 20px, unchanged. */
  width: 54px;
  height: 54px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-card__avatar--photo {
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.chat-card__avatar-photo {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  object-fit: cover;
}

.chat-card__avatar-icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.chat-card__body {
  flex: 1 1 0%;
  min-width: 0;
  /* Real fetched value (node 69:1266): this frame is h-[61px] (77px total
     with the card's own padding). min-height, not a hard height — a hard
     height + overflow:hidden was clipping real text whenever a browser's
     actual font metrics render taller than that (Ubuntu Bold Italic on
     desktop already ran a couple px over; mobile WebKit runs taller
     still, which was slicing into the message/tag line). 61px is still
     what every card gets by default; a card only grows past it if its
     real content genuinely needs to. */
  min-height: 61px;
  display: flex;
  flex-direction: column;
  /* Real fetched structure (node 69:1266): this 4px gap belongs only
     between [title+time / message row] as a group and the team tag below
     it — row1 and row2 themselves sit in their own inner frame with no
     gap (0px, flush). Flattening all three into one gap here (as before)
     put a wrong 4px seam between row1 and row2 too. See .chat-card__lines. */
  gap: 4px;
}

/* Groups row1 (title+time) and row2 (sender/message/unread-dot) with zero
   gap between them, per the real fetched structure — see .chat-card__body
   above for why this wrapper exists. */
.chat-card__lines {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.chat-card__row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.chat-card__title {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.36px;
  color: var(--text-primary);
}

.chat-card__time {
  flex-shrink: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  letter-spacing: -0.28px;
  text-align: right;
}

.chat-card__time--read {
  font-weight: 500;
  color: var(--text-secondary);
}

.chat-card__time--unread {
  font-weight: 800;
  color: var(--text-primary);
}

.chat-card__row2 {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.chat-card__sender {
  flex-shrink: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  /* Real fetched value (node 69:1266): var(--text-secondary) — was the
     close-but-different literal rgba(255,255,255,0.68). */
  color: var(--text-secondary);
  white-space: nowrap;
}

.chat-card__preview {
  flex: 1 1 0%;
  min-width: 0;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  /* Real fetched value (node 69:1266): var(--text-secondary) — was the
     close-but-different literal rgba(255,255,255,0.68), same as sender. */
  color: var(--text-secondary);
}

.chat-card__unread-slot {
  flex-shrink: 0;
  width: 22px;
  height: 8px;
  padding-left: 8px;
  display: flex;
  align-items: flex-start;
  box-sizing: content-box;
}

.chat-card__unread-dot {
  width: 14px;
  height: 8px;
  border-radius: 4px;
  background: var(--text-primary);
}

.chat-card__tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--text-primary);
}

.chat-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Real fetched style (Figma node 207:11831): pt-24px for the first header
   in the list, pt-40px for a subsequent one (more breathing room after a
   preceding section) — the --spaced modifier is that second case. */
.chat-section-header {
  padding: 24px 16px 8px;
}

.chat-section-header--spaced {
  padding-top: 40px;
}

.chat-section-header__label {
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--text-secondary);
}