/* posts.css -- owner D. The post rows (item_message.xml / item_file.xml / part_action_row.xml / part_link_card.xml).
   Colours are B's tokens (--c-*), sizes come from posts.js (SizeTokens through size.js). 1 dp = 1 px (CONTRACT §1.4).
   Prefix .post- only (CONTRACT §8.9). */

.post-row {
  /* item_message.xml root: paddingStart edge_gutter (3dp, the list pads it), paddingEnd 3dp, top / bottom 3dp */
  padding: 3px 3px 3px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* W1/80 L7: the frame is as wide as its content (posts.js MEDIA_BOX), not the pane */
  min-width: 0;
}
.post-row.post-wash { background: color-mix(in srgb, var(--c-accent-shown) 24%, transparent); }   /* linkHighlight, argb 60 */

.post-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--post-fill);
  color: var(--post-ink);
  /* W2a: NO border-radius -- the frame is CLIPPED to WikShape.frame (posts.js shapeBox -> shape.js clipShape; PostFrameDrawable.kt:158):
     corner, corner, corner, tail here; the sent post's tail is bottom-right. --post-corner / --post-tail stay as the numbers' record */
  overflow: hidden;
  min-width: 0;
  /* W1/80 L7, the shared set (web + desktop + Android): shrink-wrapped (.post-row flex-start), never narrower than its header line
     (name + date) nor 240 px, never wider than 640 px -- nor than the pane */
  min-width: min(240px, 100%);
  /* PICS-W182 (AMENDMENT 1.1): the frame cap of the picture size now -- S / M 640, L / XL the content width (posts.js mediaBox, per frame;
     the root default from core/size.js applySizes) -- never past the pane */
  max-width: min(var(--post-frame-max), 100%);
}
/* W1/80 L7: the action row and a caption under media wrap INSIDE the frame and never widen it (their width is the frame's) */
.post-foot, .post-caption.post-fit { contain: inline-size; }
/* bevel: a sent frame's lit top edge and its shaded bottom (c_bevel_top / c_bevel_bottom) */
.post-frame.post-own {
  box-shadow: inset 0 1px 0 var(--c-bevel-top), inset 0 -1px 0 var(--c-bevel-bottom);   /* top and bottom runs only: the clip keeps it inside */   /* W1/69 d4: the emitted names (tokens.js cssName), not the _ typo */
}

/* the header band: picture, glyphs, name, time -- on the shaded strip */
.post-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* W1/80 L7: a header line wider than the pane puts the TIME on its own line, under the name -- never cut */
  background: var(--post-strip);
  min-width: 0;
}
.post-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.post-avatar-plain {
  box-sizing: border-box;
  border: 2px solid var(--c-red);
  border-radius: 30%;
  background: var(--c-card2-fill);   /* W1/69 d4 (A-LK-051 names posts.css:49): the Day-derived card2, not the raw cream token */
}
.post-avatar-plain img { width: 100%; height: 100%; object-fit: cover; }
.post-tappable { cursor: pointer; }
.post-glyphs { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.post-wallet { object-fit: contain; }
.post-name {
  /* W1/80 L7 ("make sure name of user and date are readable"): one line while the pane allows -- the frame takes the line's own width
     (a flex container's max-content is its items' max-content, whatever the basis); in a narrower pane the time wraps under it (basis 0
     never pushes the time out first) and the name wraps at its word / hyphen breaks -- never an ellipsis */
  flex: 1 1 0;
  min-width: 5em;
  margin-inline-start: 4px;
  letter-spacing: .02em;
  font-weight: var(--w-name, 700);   /* ROLE_NAME: bold while bold_names_headers (default on) -- MessageAdapter.kt:1922, WikFonts.kt:75 */
  overflow-wrap: break-word;
}
.post-time { flex: 0 0 auto; margin-inline-start: auto; padding-inline-start: 8px; white-space: nowrap; }   /* W1/80 L7: at the end, on its line */

/* the body */
.post-body { display: flex; flex-direction: column; min-width: 0; }
.post-text, .post-caption {
  unicode-bidi: plaintext;      /* W175B BIDI: each paragraph takes its FIRST-STRONG direction (Android TextView TEXT_DIRECTION_FIRST_STRONG) */
  line-height: 1.35;            /* lineSpacingExtra 2dp over the 14 text */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  font-weight: var(--w-message, 400);   /* ROLE_MESSAGE (bold_messages, default off) -- MessageAdapter.kt:1963 */
}
.post-caption { margin-bottom: 6px; }
/* W1/77 A4 (W177A_DESK): a text post's words at most 8 lines (posts.js POST_CLAMP_LINES); the control under them, at the inline start */
.post-text.post-clamp, .post-caption.post-clamp { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }   /* W1/80 L8: + the caption */
.post-more { align-self: flex-start; background: none; border: 0; margin: 2px 0 0; padding: 4px 0; color: var(--c-link); font: inherit;
  font-weight: 600; cursor: pointer; text-align: start; }
.post-more[hidden] { display: none; }
.post-more:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; }
.post-edited { font-style: italic; margin-bottom: 0; }
.post-row .post-text a, .post-row .post-caption a { color: var(--c-link); }

.post-quote {
  border-radius: 6px;
  padding: 4px 8px;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* media: the order-0 corner (insetCornerPx of the frame's), marginBottom 6dp. W1/80 L7 / L9: as wide as the medium itself (posts.js sizes
   it inside MEDIA_BOX), at the inline start, never wider than the frame */
.post-media { overflow: hidden; margin-bottom: 6px; align-self: flex-start; max-width: 100%; }
.post-preview { cursor: zoom-in; line-height: 0; }
.post-preview img { display: block; max-width: 100%; height: auto; }   /* the width: posts.js fitBox, set before the picture shows */
/* W1/83 DESKFIX F: a picture that cannot load keeps its box (posts.js failedPicture) -- the media fill, its file-type mark centred */
.post-media-failed { display: flex; align-items: center; justify-content: center; max-width: 100%; box-sizing: border-box;
  background: var(--c-card2-fill, rgba(0, 0, 0, .2)); color: var(--c-icon-tint); line-height: normal; }

.post-video {
  position: relative;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  max-height: 85vh;   /* PICS-W182 AMENDMENT 1.4: the window ceiling of a film at every size (core/size.js FILM_WINDOW_SHARE), live on resize */
}
/* W2a: the video row's outline -- WikShape.frame stroked inside the silhouette (posts.js videoBox, paintShape), under the film */
.post-video > .shp-videoframe { position: absolute; inset: 0; pointer-events: none; }
.post-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.post-vctl { position: absolute; inset-inline-end: 6px; bottom: 6px; display: flex; gap: 6px; }
.post-vbtn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 0; padding: 6px; margin: 0;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.post-vbtn .post-glyph { width: 100%; height: 100%; }

.post-gallery { display: flex; flex-direction: column; gap: var(--gal-gap); }
.post-galrow { display: flex; gap: var(--gal-gap); max-width: 100%; }
.post-cell {
  flex: 0 1 auto;   /* W1/80 L9: a 1:1 cell, its side from posts.js galleryGrid (galleryCellPx) */
  min-width: 0;
  overflow: hidden;   /* W2a: clipped to WikShape.frame at --cell-corner (posts.js galleryGrid shapeBox) */
  background: rgba(0, 0, 0, .235);         /* argb(60, 0, 0, 0) */
  cursor: zoom-in;
  position: relative;
}
.post-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }   /* W1/80 L9: whole, never cropped */
.post-cell-named {
  cursor: default;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px; box-sizing: border-box; color: var(--c-text); gap: 2px;
}
.post-cell-name {
  text-align: center;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}

.post-voice { display: flex; align-items: center; margin-bottom: 6px; gap: 0; max-width: 100%; }   /* W1/80 L7: the frame's width (min 240) */
.post-voice audio { display: none; }
.post-vplay { border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; flex: 0 0 auto; }
.post-vplay .post-glyph { width: 100%; height: 100%; }
.post-vplay:last-of-type { margin-inline-start: 6px; }
.post-vbar {
  flex: 1 1 auto; height: 4px; margin: 0 8px; border-radius: 2px;
  background: var(--bar-bg); opacity: .9; cursor: pointer; position: relative; overflow: hidden;
}
.post-vbar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--bar-ink); }
.post-vtime { white-space: nowrap; font-variant-numeric: tabular-nums; }

.post-filerow { display: flex; align-items: center; min-width: 0; gap: 8px; }
.post-fileicon { flex: 0 0 auto; }
.post-filewords { flex: 1 1 auto; min-width: 0; }
.post-filename { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* link card / reply embed (part_link_card.xml + LinkCards.draw) */
.post-cardslot:empty { display: none; }
.post-card {
  display: flex; flex-direction: column;
  background: var(--card-fill);   /* W2a: clipped to WikShape.frame at --card-corner (posts.js shapeBox; LinkCards embedBackground) */
  cursor: pointer;
  overflow: hidden;
  min-width: 0;
}
.post-card-head { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
.post-card-avatar { flex: 0 0 auto; overflow: hidden; display: flex; }   /* W2a: clipped to WikShape.squircle (avatarClip.setSquircle) */
.post-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-card-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.post-card-dim { white-space: nowrap; }
.post-card-title, .post-card-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.post-card-body { margin-top: 2px; }
.post-lines2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-lines4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-site { margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-card-media {
  position: relative; aspect-ratio: 16 / 9; background: #000;
  overflow: hidden; margin-bottom: 6px; max-width: 100%; max-height: var(--post-card-media-max);   /* W1/80 L10 letterboxed; PICS-W182: the film height of the size now (posts.js mediaBox) */
}
.post-card-media-bottom { margin: 6px 0 0; }
.post-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.post-card-badge {
  position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; background: var(--c-accent-shown); color: var(--c-on-accent-shown); padding: 10px; box-sizing: border-box;
}
.post-card-badge .post-glyph { width: 100%; height: 100%; }

/* the footer band and the action row: a wrapping row, every line aligned to the END (WrapLayout LINE_END) */
.post-foot { background: var(--post-strip); }
.post-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.post-act {
  border: 0; padding: 0; margin: 0;
  background: transparent;
  color: inherit;
  opacity: .85;                 /* ACTION_ALPHA */
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.post-act .post-glyph { width: 100%; height: 100%; }
.post-act.post-act-on { opacity: 1; }
.post-act.post-act-full { opacity: .35; }
.post-act:hover { background: color-mix(in srgb, currentColor 14%, transparent); }   /* the borderless ripple's hover */
.post-act:focus-visible, .post-react:focus-visible, .post-vbtn:focus-visible { outline: 2px solid var(--c-accent-shown); outline-offset: 1px; }

/* a tinted glyph: B's vector / system icon drawn in currentColor (Material imageTint), filling its box */
.post-glyph { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; line-height: 0; }
.post-glyph > svg, .post-glyph > span, .post-glyph > img { width: 100%; height: 100%; display: block; font-size: inherit; }

/* reactions: outside the frame, 2dp gaps on both axes and above (bindReactionStrip :2995) */
.post-reacts { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.post-react {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 12px; border: 0; margin: 0;
  background: rgba(128, 128, 128, .137);      /* reactionChipBgInactive argb(35,128,128,128) */
  cursor: pointer; font: inherit;
}
.post-react.post-react-mine { background: color-mix(in srgb, var(--c-accent-shown) 17.6%, transparent); }   /* argb(45, accent) */
.post-react-emoji { object-fit: contain; display: block; }
.post-react-count { white-space: pre; }

/* ── K (wave 2) ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
/* the two display switches IN PLACE: one root attribute each (posts.js applyRowToggles) -- no row is rebuilt by a toggle */
:root[data-wk-ts="off"] .post-time { display: none; }
:root[data-wk-fn="off"] .post-filerow.post-filerow-media { display: none; }

/* the AUTHOR's decoration (WikDecor): white coverage tiles as a mask, the ink as the layer's colour -- under the band's content */
.post-decorated { position: relative; isolation: isolate; }
.post-decor {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: var(--decor-url); mask-image: var(--decor-url);
  -webkit-mask-size: var(--decor-size); mask-size: var(--decor-size);
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
.post-decor-header { -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }   /* ONE row of motifs: the tile CLAMPs down (WikDecor :252) */
.post-decor-body { -webkit-mask-repeat: repeat; mask-repeat: repeat; }

/* a wall row's header: [user] -> [room] (bindWallHeader) */
.post-wallarrow { flex: 0 0 auto; line-height: 1; }
.post-wallroom { flex: 0 0 auto; }
.post-row.post-opens { cursor: pointer; }

/* the playback volume roll-up (VolumeControl): a slider above the speaker, no scrim */
.rx-vol {
  position: fixed; z-index: 60; width: 160px; padding: 8px 10px; box-sizing: border-box;
  background: var(--c-card-fill); border: 1px solid var(--c-card-border); border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.rx-vol input[type="range"] { width: 100%; accent-color: var(--c-accent-shown); margin: 0; display: block; }
/* W1/94 D3 (item 11): a FILM's roll-up is part of the film -- inside its control set (posts.js filmControls), dressed as the set's buttons
   (white on 50% black, the button's width, a capsule), a vertical slider standing on the volume button by the film's end edge
   (voiceplay.js toggleRollUp places it: inset-inline-end, bottom, width, height); bottom = 0, top = full */
.rx-vol.rx-vol-film {
  position: absolute; z-index: 3; padding: 10px 0; display: flex; justify-content: center;
  background: rgba(0, 0, 0, .5); border: 0; border-radius: 999px; box-shadow: none;
}
.rx-vol.rx-vol-film input[type="range"] { writing-mode: vertical-lr; direction: rtl; width: 100%; height: 100%; accent-color: #fff; cursor: pointer; }
.post-vplay > .post-glyph[hidden] { display: none; }   /* the voice row's two faces: one shown, swapped in place */

/* r5 (CONSULT_6 E): the in-app viewer -- a black full-window layer; main's native view covers .rx-embed-stage, the title and the buttons
   stand in the bands OUTSIDE it (EmbedScreen.kt: title top-left, "Open in <site>" + Close top-right, the bottom pills) */
.rx-embed { position: fixed; inset: 0; z-index: 70; background: rgba(4, 6, 20, 0.961); color: #fff; }   /* W1/69 d4 (A-PM-080): EmbedScreen.kt:93 argb(245, 4, 6, 20) */
.rx-embed-top { position: absolute; inset-inline-start: 16px; inset-inline-end: 14px; top: 0; height: 56px; display: flex; align-items: center; gap: 10px; }
.rx-embed-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.rx-embed-btn {
  flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 22px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 14px;
}
.rx-embed-close { padding: 0; font-size: 18px; }
.rx-embed-stage { position: absolute; }
.rx-embed-band { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 12px; }
.rx-embed-pill { height: 40px; padding: 0 18px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .4); background: transparent;
  color: #fff; font: inherit; font-size: 14px; cursor: pointer; }

/* W175B BIDI r4 (W1/75): user text takes its FIRST-STRONG paragraph direction, as Android's TextView (TEXT_DIRECTION_FIRST_STRONG) --
   the reply / forward quote, the link card and reply embed (title, body, author), the sender name, file names, reactor names. A Latin line in the ar layout keeps its period on the right. */
.post-quote, .post-card-title, .post-card-body, .post-cell-name { unicode-bidi: plaintext; }   /* bodies / centred: the paragraph's own leading edge (Android ALIGN_NORMAL) */
/* W175B BIDI r5: a LABEL keeps its place -- its text takes its own direction, its alignment the parent's (Android: the row lays the TextView out) */
.post-card-name, .post-name, .post-filename, .post-reactor-name { unicode-bidi: plaintext; }
/* W175B BIDI r5b: match-parent did not hold under plaintext (measured); the page direction pins it */
.post-card-name:dir(ltr), .post-name:dir(ltr), .post-filename:dir(ltr), .post-reactor-name:dir(ltr) { text-align: left; }
.post-card-name:dir(rtl), .post-name:dir(rtl), .post-filename:dir(rtl), .post-reactor-name:dir(rtl) { text-align: right; }