/* ==========================================================================
   alfred. — A group chat message (js/chat.js), drawn like the phone screenshots it replaces.
   Sizes in --u (1 --u = 2 pixels of the original screenshots). Used by the About page and the CMS.
   ========================================================================== */
.ab-post { position: relative; margin: 0 0 calc(22 * var(--u)); padding-left: calc(54 * var(--u)); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: #111; -webkit-font-smoothing: antialiased; text-transform: none; letter-spacing: normal; font-weight: 400; text-align: left; }
.ab-post__row { position: relative; width: calc(389 * var(--u)); }
.ab-post.has-card .ab-post__row { width: calc(447 * var(--u)); }
.ab-post--comment .ab-post__row { width: fit-content; min-width: calc(200 * var(--u)); max-width: calc(389 * var(--u)); }

/* the white bubble; its foot curls out into a little tail towards the avatar */
.ab-post__bubble { position: relative; background: #fff; border-radius: calc(26 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u)) 0; }
.ab-post__bubble > :first-child { border-radius: inherit; }
.ab-post__bubble::before { content: ""; position: absolute; left: calc(-9 * var(--u)); bottom: 0; width: calc(10 * var(--u)); height: calc(12 * var(--u)); background: #fff;
  -webkit-mask: radial-gradient(circle at 0 0, transparent calc(10 * var(--u)), #000 calc(10.5 * var(--u))); mask: radial-gradient(circle at 0 0, transparent calc(10 * var(--u)), #000 calc(10.5 * var(--u))); }

.ab-post__head { display: flex; align-items: baseline; gap: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(28 * var(--u)) calc(10 * var(--u)) calc(19 * var(--u)); }
.ab-post__name { font-weight: 600; font-size: calc(23 * var(--u)); line-height: 1.15; color: var(--nc, #1a6bc8); white-space: nowrap; }
.ab-post__phone { margin-left: auto; font-size: calc(19 * var(--u)); color: #6b6b6b; white-space: nowrap; }

/* the photo or video, the bubble's full width */
.ab-post__media { position: relative; display: block; overflow: hidden; background: #e9e9e6; }
.ab-post__media img, .ab-post__media video { display: block; width: 100%; height: auto; }
.ab-post__media.is-link { cursor: pointer; }
.ab-post__media.is-video video { cursor: pointer; }
/* the link: a white circle with the site's arrow, top right */
.ab-post__go { position: absolute; right: calc(12 * var(--u)); top: calc(12 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .18); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.ab-post__go svg { width: 100%; height: 100%; fill: #232323; }
.ab-post__media:hover .ab-post__go, .ab-post__go:hover { transform: scale(1.12); }
/* sound on / off, bottom left */
.ab-post__sound { position: absolute; left: calc(12 * var(--u)); bottom: calc(12 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); padding: calc(7 * var(--u)); border: 0; border-radius: 50%; background: rgba(0, 0, 0, .5); cursor: pointer; }
.ab-post__sound svg { display: block; width: 100%; height: 100%; fill: #fff; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.ab-post__sound svg path:first-child { stroke: none; }
.ab-post__sound .on, .ab-post__media.is-loud .ab-post__sound .off { display: none; }
.ab-post__media.is-loud .ab-post__sound .on { display: block; }

/* a link card under the picture (title, a line, the site) */
.ab-post__card { display: block; padding: calc(16 * var(--u)) calc(15 * var(--u)) calc(20 * var(--u)); background: #f4f4f5; color: inherit; text-decoration: none; }
.ab-post__card b { display: block; font-weight: 600; font-size: calc(18 * var(--u)); line-height: 1.6; color: #2a2a2a; }
.ab-post__card p { margin: calc(6 * var(--u)) 0 0; font-size: calc(18 * var(--u)); line-height: 1.55; color: #8a8a8a; }
.ab-post__site { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(22 * var(--u)); font-size: calc(18 * var(--u)); color: #2a2a2a; }
.ab-post__site svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: #2a2a2a; stroke-width: 2.2; stroke-linecap: round; }
.ab-post__site em { font-style: normal; }
.ab-post__site img { margin-left: auto; width: calc(24 * var(--u)); height: calc(24 * var(--u)); object-fit: cover; }
a.ab-post__card:hover b { text-decoration: underline; }

/* the comment and the time */
.ab-post__foot { display: flex; align-items: flex-end; gap: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(11 * var(--u)) calc(19 * var(--u)); }
.ab-post--comment .ab-post__head { padding-bottom: 0; }
.ab-post--comment .ab-post__foot { padding-top: calc(4 * var(--u)); }
.ab-post__text { margin: 0; font-size: calc(25 * var(--u)); line-height: 1.25; overflow-wrap: anywhere; }
.ab-post__text.is-deleted { font-style: italic; color: #666; font-size: calc(22 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); }
.ab-post__del { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: #9a9a9a; stroke-width: 2.4; }
.ab-post__foot time { margin-left: auto; flex: none; font-size: calc(17 * var(--u)); line-height: 1; color: #8a8a8a; transform: translateY(calc(-2 * var(--u))); white-space: nowrap; }
.ab-post .emo { display: inline-block; width: 1.12em; height: 1.12em; vertical-align: -.2em; margin: 0 .03em; }

/* the avatar at the bubble's foot (a letter when there is no photo) */
.ab-post__face { position: absolute; left: calc(-54 * var(--u)); bottom: calc(-2 * var(--u)); width: calc(42 * var(--u)); height: calc(42 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: #ddd center / cover no-repeat; cursor: pointer; }
.ab-post__face.is-letter { display: grid; place-items: center; background: color-mix(in srgb, var(--nc) 32%, #fff); color: var(--nc); font-family: inherit; font-size: calc(19 * var(--u)); font-weight: 500; }
.ab-post__face:focus-visible { outline: 2px solid var(--red, #ff7366); outline-offset: 2px; }

/* reactions: a little white pill hanging off the bubble */
.ab-post__react { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: calc(11 * var(--u)); height: calc(38 * var(--u)); margin: calc(-4 * var(--u)) 0 0 calc(17 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(19 * var(--u)); background: #fff; box-shadow: 0 0 0 calc(2 * var(--u)) var(--cream, #f8f7ec); }
.ab-post__react .emo { width: calc(25 * var(--u)); height: calc(25 * var(--u)); margin: 0; vertical-align: 0; }
.ab-post__react span { font-size: calc(21 * var(--u)); color: #6b6b6b; }
.ab-post * { font-family: inherit; text-transform: none; letter-spacing: normal; }

/* (user, 2026-11-11) the avatars are not clickable any more; web addresses in a message are links */
.ab-post__face { cursor: default; }
.ab-post__url { color: #1a6bc8; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
a.ab-post__card { cursor: pointer; }