/* ==========================================================================
   AZRA BUBBLES v77 — single source of truth for feed post bubbles
   Replaces the 4 stacked patch layers in azra-feed.css / azra-feed-polish.css
   (they keep loading, this file simply wins). LOAD LAST.

   Layout  : avatar column + content column (CSS grid), same at every width.
             head (name · handle · time · menu) → bubble → actions → reactions
   Bubble  : calm neutral surface, one tail corner next to the avatar,
             "mine" = soft yellow tint (readable in dark + light), no loud fill.
   Media   : first image/video bleeds to the bubble edge; caption below.
   Details : code scrolls, long words wrap, Persian gets its own line-height,
             actions are compact pills aligned with the bubble, reactions are a chip.
   ========================================================================== */
:root {
  --bb-av: 44px; --bb-gap: 10px; --bb-r: 22px; --bb-tail: 6px;
  --bb-bg: #121214; --bb-bg-hover: #161619; --bb-line: rgba(255,255,255,.09); --bb-line-hover: rgba(255,255,255,.16);
  --bb-fg: #F2F3F6; --bb-mut: #9A9DA8; --bb-link: #FFD500; --bb-code: #070708;
  --bb-mine-bg: rgba(255,213,0,.10); --bb-mine-line: rgba(255,213,0,.34); --bb-mine-fg: #FFF8D6; --bb-mine-link: #FFE066;
  --bb-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px rgba(0,0,0,.28);
}
html[data-theme="light"] {
  --bb-bg: #FFFFFF; --bb-bg-hover: #FFFFFF; --bb-line: rgba(20,16,10,.10); --bb-line-hover: rgba(20,16,10,.2);
  --bb-fg: #17140F; --bb-mut: #6B655A; --bb-link: #7A5C00; --bb-code: #F4EFE7;
  --bb-mine-bg: #FFF4B8; --bb-mine-line: rgba(122,92,0,.35); --bb-mine-fg: #17140F; --bb-mine-link: #5C4400;
  --bb-shadow: 0 1px 2px rgba(40,30,10,.06), 0 8px 24px rgba(40,30,10,.07);
}
@media (max-width: 560px) { :root { --bb-av: 36px; --bb-gap: 8px; --bb-r: 20px; } }

/* ------------------------------------------------------------- the post */
html body .post.post--bubble.post--bubble {
  display: grid !important;
  grid-template-columns: var(--bb-av) minmax(0, 1fr);
  grid-auto-rows: auto;
  column-gap: var(--bb-gap);
  align-items: start;
  padding: 0 !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  overflow: visible !important; transform: none;
}
html body .post.post--bubble.post--bubble + .post.post--bubble { margin-top: 20px !important; }
html body .post.post--bubble.post--bubble.is-cont { margin-top: 4px !important; }
html body .post.post--bubble > .repost-bar { grid-column: 1 / -1; margin: 0 0 6px calc(var(--bb-av) + var(--bb-gap)); }
html[dir="rtl"] body .post.post--bubble > .repost-bar { margin: 0 calc(var(--bb-av) + var(--bb-gap)) 6px 0; }

/* head dissolves into the grid: avatar → col 1, who + menu → col 2 */
html body .post.post--bubble > .post-head { display: contents !important; }
html body .post.post--bubble > .post-head > a:first-child {
  grid-column: 1; grid-row: 1 / span 4; align-self: start; justify-self: start; margin: 0 !important;
}
html body .post.post--bubble > .post-head .avatar { width: var(--bb-av) !important; height: var(--bb-av) !important; font-size: calc(var(--bb-av) * .38); }
html body .post.post--bubble > .post-head .who {
  grid-column: 2; grid-row: 1; min-width: 0; padding: 0 44px 5px 4px; align-self: center;
}
html[dir="rtl"] body .post.post--bubble > .post-head .who { padding: 0 4px 5px 44px; }
html body .post.post--bubble .post-head .who b { display: block; font: 800 14.5px/1.25 var(--az-font-ui, inherit); letter-spacing: -.005em; color: var(--az-text, #fff); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .post.post--bubble .post-head .who b a { color: inherit; }
html body .post.post--bubble .post-head .who .u { margin-top: 1px; font-size: 12px; line-height: 1.3; color: var(--bb-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .post.post--bubble .post-head .who .u a { color: inherit; }
html body .post.post--bubble .post-head .who .u a:hover { color: var(--bb-link); }
html body .post.post--bubble > .post-head > .pill { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; margin-inline-end: 44px; }
html body .post.post--bubble > .post-head > .icon-btn {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: center;
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: transparent !important; border: 0 !important; color: var(--bb-mut) !important; box-shadow: none !important;
}
html body .post.post--bubble > .post-head > .icon-btn:hover { background: var(--az-surface-2, rgba(255,255,255,.08)) !important; color: var(--az-text, #fff) !important; }
/* continuation bubbles: no head, bubble sits in column 2, row 2 stays */
html body .post.post--bubble.is-cont > .post-head { display: none !important; }
html body .post.post--bubble.is-cont > .pbub { grid-row: 1; }

/* ------------------------------------------------------------ the bubble */
html body .post.post--bubble > .pbub {
  grid-column: 2; grid-row: 2;
  position: relative; box-sizing: border-box; min-width: 0; max-width: 100%;
  margin: 0 !important; padding: 14px 18px 13px !important;
  background: var(--bb-bg) !important; color: var(--bb-fg) !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: var(--bb-r) !important;
  border-start-start-radius: var(--bb-tail) !important;
  box-shadow: var(--bb-shadow) !important;
  overflow: hidden; overflow-wrap: anywhere; transform: none !important;
  transition: border-color var(--az-dur-2, 200ms), background var(--az-dur-2, 200ms);
}
html body .post.post--bubble > .pbub::before, html body .post.post--bubble > .pbub::after { display: none !important; }
html body .post.post--bubble:hover > .pbub { border-color: var(--bb-line-hover) !important; }
html body .post.post--bubble.is-cont > .pbub { border-start-start-radius: var(--bb-tail) !important; }
html body .post.post--bubble.mine > .pbub {
  background: var(--bb-mine-bg) !important; color: var(--bb-mine-fg) !important;
  border-color: var(--bb-mine-line) !important;
  box-shadow: 0 10px 30px rgba(255,213,0,.07), 0 1px 0 rgba(255,255,255,.04) inset !important;
}

/* text */
html body .post.post--bubble .pbub .md,
html body .post.post--bubble .pbub .md p,
html body .post.post--bubble .pbub .pt,
html body .post.post--bubble .pbub h3,
html body .post.post--bubble .pbub .excerpt { color: inherit !important; }
html body .post.post--bubble .pbub .md { font: 400 15px/1.75 var(--az-font-ui, inherit); letter-spacing: 0; text-align: start; }
html body .post.post--bubble .pbub .md p, html body .post.post--bubble .pbub .md li, html body .post.post--bubble .pbub .md h1, html body .post.post--bubble .pbub .md h2, html body .post.post--bubble .pbub .md h3, html body .post.post--bubble .pbub .md blockquote, html body .post.post--bubble .pbub .pt { unicode-bidi: plaintext; text-align: start; }
html body .post.post--bubble .pbub .md p { margin: 0 0 .7em; }
html body .post.post--bubble .pbub .md p:last-child { margin-bottom: 0; }
html[lang="fa"] body .post.post--bubble .pbub .md, html[dir="rtl"] body .post.post--bubble .pbub .md { line-height: 1.95; font-size: 15.5px; }
html body .post.post--bubble .pbub .pt { margin: 0 0 8px !important; font: 800 17px/1.4 var(--az-font-display, inherit); letter-spacing: -.01em; }
html body .post.post--bubble .pbub .pt a { color: inherit !important; text-decoration: none; }
html body .post.post--bubble .pbub .pt a:hover { text-decoration: underline; text-underline-offset: 3px; }
html body .post.post--bubble .pbub .md a:not(.az-tag),
html body .post.post--bubble .pbub .md .hashtag, html body .post.post--bubble .pbub .md .mention {
  color: var(--bb-link) !important; font-weight: 700; text-decoration: none; text-underline-offset: 3px;
}
html body .post.post--bubble .pbub .md a:not(.az-tag):hover { text-decoration: underline; }
html body .post.post--bubble.mine .pbub .md a:not(.az-tag),
html body .post.post--bubble.mine .pbub .md .hashtag, html body .post.post--bubble.mine .pbub .md .mention { color: var(--bb-mine-link) !important; text-decoration: underline; }
html body .post.post--bubble .pbub .more, html body .post.post--bubble .pbub .az-readmore {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-weight: 800; font-size: 13.5px; color: var(--bb-link) !important;
}

/* code & quotes never break the bubble */
html body .post.post--bubble .pbub pre {
  max-width: 100%; margin: 10px 0; padding: 12px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--bb-code) !important; color: var(--bb-fg) !important; border: 1px solid var(--bb-line); border-radius: 14px;
  font: 500 13px/1.6 var(--az-font-mono, ui-monospace, monospace); tab-size: 2; white-space: pre; overflow-wrap: normal;
  scrollbar-width: thin;
}
html body .post.post--bubble .pbub pre code { background: none !important; padding: 0 !important; overflow-wrap: normal; white-space: inherit; }
html body .post.post--bubble .pbub :not(pre) > code {
  padding: .12em .42em; border-radius: 7px; background: var(--bb-code); border: 1px solid var(--bb-line); font: 500 .88em var(--az-font-mono, monospace);
}
html body .post.post--bubble .pbub blockquote {
  margin: 8px 0; padding: 2px 12px; border-inline-start: 3px solid var(--bb-link); color: inherit; opacity: .85;
}
html body .post.post--bubble .pbub img:not(.azra-social-media img) { max-width: 100%; height: auto; border-radius: 14px; }
html body .post.post--bubble .pbub table { display: block; max-width: 100%; overflow-x: auto; }

/* media: first image/video bleeds to the bubble edge */
html body .post.post--bubble .pbub > .azra-social-media:first-child {
  margin: -14px -18px 12px !important; width: calc(100% + 36px) !important; max-width: none !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html body .post.post--bubble .pbub > .azra-social-media:not(:first-child) {
  margin: 0 0 12px !important; border: 1px solid var(--bb-line) !important; border-radius: 16px !important; box-shadow: none !important; overflow: hidden;
}
html body .post.post--bubble .pbub .azra-media-title { margin: 0 0 6px !important; }
html body .post.post--bubble .pbub .azra-media-caption { margin-top: 0 !important; }

/* tags → soft chips */
html body .post.post--bubble .pbub > div[style*="margin-top:8px"] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
html body .post.post--bubble .pbub .tag, html body .post.post--bubble .pbub .az-tag {
  display: inline-flex; align-items: center; padding: 3px 10px; margin: 0 !important; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--bb-link) !important; font: 700 12.5px/1.5 var(--az-font-ui, inherit); text-decoration: none;
}
html[data-theme="light"] body .post.post--bubble .pbub .tag { background: rgba(20,16,10,.05); }
html body .post.post--bubble.mine .pbub .tag { background: rgba(0,0,0,.08); color: var(--bb-mine-link) !important; }

/* translate bar */
html body .post.post--bubble .pbub .az-tr { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--bb-line); }
html body .post.post--bubble .pbub .az-tr-btn { color: var(--bb-mut); font-weight: 700; font-size: 12.5px; }

/* ------------------------------------------------------------- actions */
html body .post.post--bubble > .actions {
  grid-column: 2; grid-row: 3;
  display: flex !important; align-items: center; justify-content: flex-start !important; flex-wrap: wrap;
  gap: 2px !important; margin: 4px 0 0 -6px !important; padding: 0 !important; min-height: 40px;
}
html[dir="rtl"] body .post.post--bubble > .actions { margin: 4px -6px 0 0 !important; }
html body .post.post--bubble > .actions .act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: auto !important; min-width: 40px !important; height: 38px; min-height: 38px !important; padding: 0 11px !important;
  border: 0 !important; border-radius: 999px !important; background: transparent !important;
  color: var(--bb-mut) !important; font: 700 13px/1 var(--az-font-ui, inherit); font-variant-numeric: tabular-nums;
  transition: background var(--az-dur-2, 200ms), color var(--az-dur-2, 200ms), transform var(--az-dur-1, 120ms);
}
html body .post.post--bubble > .actions .act svg { width: 19px; height: 19px; stroke-width: 1.7; }
html body .post.post--bubble > .actions .act span:empty { display: none; }
html body .post.post--bubble > .actions .act:hover { background: var(--az-surface-2, rgba(255,255,255,.08)) !important; color: var(--az-text, #fff) !important; }
html body .post.post--bubble > .actions .act:active { transform: scale(.9); }
html body .post.post--bubble > .actions .act:focus-visible { outline: 2px solid var(--az-primary, #FFD500); outline-offset: 1px; }
html body .post.post--bubble > .actions .act.like.on, html body .post.post--bubble > .actions .act.like.on .az-rx-icon { color: #FF5C8A !important; }
html body .post.post--bubble > .actions .act.rp.on { color: var(--az-green, #22E06B) !important; }
html body .post.post--bubble > .actions .act.save.on { color: var(--az-primary, #FFD500) !important; }
html body .post.post--bubble > .actions .act.save.on svg { fill: currentColor; }
html body .post.post--bubble > .actions .act.push { margin-inline-start: auto; }

/* reaction summary → compact chip under the actions */
html body .post.post--bubble > .az-reaction-summary {
  grid-column: 2; grid-row: 4; justify-self: start; display: inline-flex; align-items: center; gap: 0;
  margin: 0 0 2px 2px; padding: 2px 8px 2px 4px; min-height: 26px;
  background: var(--az-surface-2, rgba(255,255,255,.06)); border: 1px solid var(--bb-line); border-radius: 999px;
}
html body .post.post--bubble > .az-reaction-summary[hidden] { display: none !important; }
html body .post.post--bubble > .az-reaction-summary button {
  min-height: 0; min-width: 0; padding: 0; margin-inline-end: -4px; border: 0; background: transparent; box-shadow: 0 0 0 2px var(--az-surface-2, #16161a); border-radius: 50%;
}
html body .post.post--bubble > .az-reaction-summary .az-rx-icon { width: 16px; height: 16px; }

/* --------------------------------------------------------------- misc */
html body .post.post--bubble > .post-head .avatar { box-shadow: 0 0 0 2px var(--az-bg, #000), 0 0 0 3.5px var(--bb-line); }
html body .post.post--bubble.mine > .post-head .avatar { box-shadow: 0 0 0 2px var(--az-bg, #000), 0 0 0 3.5px var(--bb-mine-line); }
html[data-theme="light"] body .post.post--bubble > .post-head .avatar { box-shadow: 0 0 0 2px var(--az-bg), 0 0 0 3.5px var(--bb-line); }
@media (max-width: 560px) {
  html body .post.post--bubble .pbub { padding: 12px 15px 12px !important; }
  html body .post.post--bubble > .pbub { padding: 12px 15px 12px !important; }
  html body .post.post--bubble > .pbub > .azra-social-media:first-child { margin: -12px -15px 10px !important; width: calc(100% + 30px) !important; }
  html body .post.post--bubble .pbub .md { font-size: 15px; }
  html body .post.post--bubble > .post-head .who { padding-inline-end: 38px; }
  html body .post.post--bubble > .actions .act { padding: 0 9px !important; min-width: 38px !important; }
  }
/* v78 — phones: `.layout{padding-inline:0}` (community-app.css, <=640px) let the bubbles touch the
   screen edge. Give the whole post (avatar + bubble + actions) a small side gutter. Kept small (10px)
   so the bubble does not visibly shrink. Same in LTR/RTL (logical margin). */
@media (max-width: 640px) {
  html body .post.post--bubble.post--bubble { margin-inline: 10px !important; }
  html body .post.post--bubble.post--bubble.is-cont { margin-inline: 10px !important; }
}
@media (max-width: 360px) {
  html body .post.post--bubble.post--bubble, html body .post.post--bubble.post--bubble.is-cont { margin-inline: 8px !important; }
}
@media (prefers-reduced-motion: reduce), html[data-motion="reduce"] {
  html body .post.post--bubble > .pbub, html body .post.post--bubble > .actions .act { transition: none !important; }
}