/* "What my friends think": iMessage notification tiles thrown on a table. The page's own variables come from live/ensemble.css. */
.friends { max-width: var(--wrap); margin: 0 auto; padding: calc(7 * var(--u)) 24px 0; }
.friends[hidden] { display: none; }
.friends .ens-chip { margin-bottom: 18px; }
.friends h2 { margin: 0; font: 700 clamp(34px, calc(5.2 * var(--u)), 84px)/0.98 var(--e-display); letter-spacing: -0.045em; text-wrap: balance; max-width: 12em; }
.friends .lede { margin: 18px 0 0; font: 500 clamp(16px, calc(1.5 * var(--u)), 21px)/1.45 var(--e-font); color: #404040; max-width: 36em; text-wrap: pretty; }
.friends .hint { margin: 14px 0 0; font: 500 14px var(--e-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--e-muted); }

.table { position: relative; margin-top: 26px; height: clamp(520px, 54vw, 640px); border-radius: 28px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 60%),
    repeating-linear-gradient(92deg, rgba(120, 80, 40, 0.05) 0 2px, transparent 2px 9px, rgba(120, 80, 40, 0.035) 9px 10px, transparent 10px 23px),
    linear-gradient(180deg, #e9dfd0, #dccdb7);
  box-shadow: inset 0 0 0 1px rgba(90, 60, 30, 0.12), inset 0 10px 40px rgba(90, 60, 30, 0.12), 0 24px 50px -24px rgba(40, 30, 90, 0.35); }
.table::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.16; mix-blend-mode: multiply; background-image: var(--grain); }

/* an iOS lock-screen notification in light mode: a translucent light card, the contact's avatar with the Messages badge, the sender in bold, the time on the right, the text under it.
   The card is mostly opaque so the grey time keeps 4.5:1 wherever the tile lands on the table. */
.imsg { position: absolute; left: 0; top: 0; z-index: 1; width: min(420px, calc(100% - 24px)); display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 14px 18px 15px 14px; border-radius: 26px; cursor: grab; touch-action: none; will-change: transform;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(240, 240, 245, 0.9)); -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: 0 0 0 1px rgba(60, 60, 67, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 4px rgba(30, 20, 10, 0.12), 0 16px 28px -8px rgba(30, 20, 10, 0.32);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--e-font); color: #000; transition: box-shadow 0.25s ease; }
.imsg.held { cursor: grabbing; box-shadow: 0 0 0 1px rgba(60, 60, 67, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 10px rgba(30, 20, 10, 0.16), 0 38px 48px -10px rgba(30, 20, 10, 0.4); }
.imsg:focus-visible { outline: 3px solid var(--e-blue); outline-offset: 3px; }
.imsg .avatar { position: relative; width: 52px; height: 52px; margin-top: 2px; border-radius: 50%; background: linear-gradient(180deg, #a6a7b1, #7a7b86); overflow: visible; }
.imsg .avatar > svg { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.imsg .badge { position: absolute; right: -8px; bottom: -4px; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(180deg, #67f27f, #0fc238); box-shadow: 0 0 0 1.5px #fff; }
.imsg .badge svg { width: 15px; height: 15px; fill: #fff; }
.imsg .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.imsg .from { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.imsg time { flex: none; font-size: 14px; color: #5c5c61; }
.imsg .body { margin: 2px 0 0; font-size: 17px; line-height: 1.32; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.friends .coda { margin: 18px 0 0; font: 600 clamp(18px, calc(1.7 * var(--u)), 24px)/1.3 var(--e-display); letter-spacing: -0.025em; }
@media (max-width: 820px) { .friends { padding-inline: 16px; } }