/* Friend links (2026-10-05, Elliott): the Friends tab card, the slideshow for
   someone new, and the "Add as a friend?" sheet. Built to the approved mockups
   in /mnt/project-files/chillin/friend-link. */

/* The home couch (bloom.css), sized by its seats and scaled by where it sits. */
.fl-couch { --n: 2; --fab: var(--couch-fabric, #7c4dff); --fab-dark: color-mix(in srgb, var(--fab) 80%, #000);
  position: relative; width: calc(var(--n) * 56px + 110px); height: 148px; flex: none; }
.fl-couch::before { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 30px; border-radius: 50%;
  background: repeating-linear-gradient(90deg, #f1e3cf 0 14px, #e8d6bd 14px 28px); }
.fl-sofa { position: absolute; left: 40px; bottom: 16px; width: calc(var(--n) * 56px + 30px); height: 104px; }
.fl-sofa::before, .fl-sofa::after { content: ""; position: absolute; top: 40px; width: 26px; height: 54px; border-radius: 13px 13px 9px 9px; background: var(--fab-dark); z-index: 1; }
.fl-sofa::before { left: 0; } .fl-sofa::after { right: 0; }
.fl-back { position: absolute; left: 9px; right: 9px; top: 4px; height: 62px; border-radius: 26px 26px 12px 12px; background: var(--fab-dark); }
.fl-cushions { position: absolute; left: 15px; right: 15px; top: 54px; height: 30px; border-radius: 11px; background: repeating-linear-gradient(90deg, var(--fab) 0 53px, var(--fab-dark) 53px 56px); }
.fl-base { position: absolute; left: 12px; right: 12px; top: 80px; height: 14px; border-radius: 0 0 8px 8px; background: var(--fab-dark); }
.fl-base::before, .fl-base::after { content: ""; position: absolute; top: 14px; width: 7px; height: 8px; border-radius: 0 0 3px 3px; background: #3b2a22; }
.fl-base::before { left: 16px; } .fl-base::after { right: 16px; }
.fl-lamp { position: absolute; left: 6px; bottom: 26px; width: 22px; height: 98px; background: linear-gradient(#3b2a22, #3b2a22) center 18px / 3px 80px no-repeat; }
.fl-lamp::before { content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 20px; background: #ffc21a; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); }
.fl-lamp::after { content: ""; position: absolute; top: 8px; left: -20px; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(#ffe7a0aa, transparent 70%); animation: couch-glow 5s ease-in-out infinite; }
.fl-plant { position: absolute; right: 2px; bottom: 22px; font-size: 28px; line-height: 1; }
.fl-seats { position: absolute; left: 55px; top: 42px; display: flex; align-items: flex-end; z-index: 2; }
.fl-seats > * { flex: none; width: 50px; height: 50px; margin: 0 3px; box-sizing: border-box; }
.fl-seat { font-size: 18px; border: 2px solid var(--bloom-canvas); border-radius: 50%; background-size: cover; }
.fl-plus { width: 44px; height: 38px; margin: 0 6px; border-radius: 12px; display: grid; place-items: center; background: #ffc21a; color: #00000080; font-size: 22px; font-weight: 700; animation: couch-squish 3s ease-in-out infinite; }
.fl-you { display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2.5px dashed #00000055; color: var(--bloom-ink); font-size: 13px; font-weight: 800; }

/* Friends tab: "Bring someone over". */
.fl-card { margin: 0 0 16px; background: #fff; border: 1px solid var(--bloom-line); border-radius: 24px; padding: 14px 16px 12px;
  display: grid; grid-template-columns: 104px 1fr; gap: 2px 14px; align-items: center; box-shadow: 0 8px 24px #0000000d; }
.fl-card[hidden] { display: none; }
/* With friends, the card waits behind a + beside the Friends title (Elliott, 2026-10-24). */
.fl-add { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px 0 -8px auto; padding: 0; border: 0; border-radius: 50%;
  background: var(--bloom-surface); color: var(--bloom-ink); font: inherit; font-size: 24px; font-weight: 600; line-height: 1; cursor: pointer; }
.fl-add[hidden] { display: none; }
.fl-add:focus-visible { outline: 2px solid var(--bloom-ink); outline-offset: 2px; }
.fl-sheet.fl-card-sheet { text-align: left; }
.fl-card-sheet > .fl-card { margin: 0 0 8px; border: 0; box-shadow: none; padding: 0; }
.fl-card-sheet .fl-card p { margin: 0; font-size: 14px; }
.fl-card-art { grid-row: span 2; position: relative; width: 104px; height: 66px; }
.fl-card-art .fl-couch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.38); }
.fl-card h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.fl-card p { margin: 0; font-size: 14px; line-height: 1.3; color: var(--bloom-muted); }
.fl-share { grid-column: 1 / -1; margin-top: 10px; height: 48px; border: 0; border-radius: 16px; background: var(--bloom-ink); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.fl-link-actions { grid-column: 1 / -1; display: flex; justify-content: center; gap: 22px; margin-top: 4px; }
.fl-link-actions[hidden] { display: none; }
.fl-reset { font-size: 13px; color: var(--bloom-muted); }

.fl-card.fl-off .fl-card-art { opacity: .45; filter: grayscale(1); }

/* Friend requests from your link, above the card. */
.fl-requests { display: grid; gap: 8px; margin: 0 0 12px; }
.fl-requests[hidden] { display: none; }
.fl-request { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 20px; background: #fff6dc;
  border: 1px solid #f3dfa4; animation: fl-in .3s ease-out; }
.fl-request-face { width: 42px; height: 42px; flex: none; font-size: 14px; border-radius: 50%; background-size: cover; }
.fl-request-copy { min-width: 0; flex: 1; line-height: 1.2; }
.fl-request-copy b { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-request-copy span { font-size: 13px; color: var(--bloom-muted); }
.fl-request-yes, .fl-request-no { flex: none; height: 38px; padding: 0 14px; border: 0; border-radius: 13px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.fl-request-yes { background: var(--bloom-ink); color: #fff; }
.fl-request-no { padding: 0 8px; background: none; color: var(--bloom-muted); }
.fl-request button:disabled { opacity: .6; }
.fl-waiting { margin: 0; padding: 0 4px; font-size: 13px; color: var(--bloom-muted); }
[data-home-tab="friends"].fl-has-requests { position: relative; }
[data-home-tab="friends"].fl-has-requests::after { content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: #ff6b3d; box-shadow: 0 0 0 2px var(--bloom-canvas); }

/* The slideshow for someone new. */
body.friend-link-open { overflow: hidden; }
.fl-page { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--bloom-canvas); color: var(--bloom-ink);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
.fl-page-top { height: 76px; display: flex; align-items: center; padding-inline: 20px; }
.fl-page-body { display: flex; flex-direction: column; min-height: calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-width: 480px; margin: 0 auto; padding: 4px 22px 18px; box-sizing: border-box; }
.fl-kicker { margin: 6px 0; font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--bloom-muted); }
.fl-page h1 { margin: 0 0 4px; font-size: 28px; line-height: 1.1; letter-spacing: -.5px; outline: none; }
.fl-stage { position: relative; height: 290px; margin: 16px -6px 0; border: 1px solid var(--bloom-line); border-radius: 28px; background: #fff; overflow: hidden; cursor: pointer; }
.fl-scene { position: absolute; inset: 0; animation: fl-in .45s ease-out; }
.fl-scene-2 { background: #f6f3ec; }
.fl-scene .fl-couch { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%) scale(1.25); transform-origin: 50% 100%; }
.fl-bubble { position: absolute; left: 40px; top: 40px; padding: 6px 10px; border: 1px solid var(--bloom-line); border-radius: 16px; background: #fff;
  font-size: 14px; font-weight: 700; box-shadow: 0 4px 12px #0000000f; animation: fl-pop .5s .25s both cubic-bezier(.3, 1.5, .5, 1); }
.fl-bubble-hi { left: auto; right: 22px; top: 30px; }
.fl-scene-1 .fl-seat { animation: couch-arrive .5s cubic-bezier(.3, 1.6, .5, 1); }
.fl-nudge { position: absolute; left: 18px; right: 18px; top: 18px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 18px; background: #fffffff2; box-shadow: 0 10px 30px #0000002a, 0 0 0 1px #0000000d; transform: rotate(-1.5deg);
  animation: fl-drop .55s .15s both cubic-bezier(.3, 1.4, .5, 1); }
.fl-nudge-face { width: 38px; height: 38px; font-size: 13px; border-radius: 50%; flex: none; background-size: cover; }
.fl-nudge-copy { min-width: 0; }
.fl-nudge-copy b { display: block; font-size: 14px; }
.fl-nudge-copy small { font-size: 13px; color: #555; }
.fl-nudge-join { margin-left: auto; padding: 7px 12px; border-radius: 12px; background: var(--bloom-ink); color: #fff; font-size: 14px; font-weight: 700; }
.fl-wave { position: absolute; right: 30px; top: 96px; font-size: 22px; animation: fl-wave 1.2s .6s ease-in-out 2; transform-origin: 70% 80%; }
.fl-spark { position: absolute; font-size: 22px; animation: fl-pop .5s .45s both cubic-bezier(.3, 1.5, .5, 1); }
.fl-spark-a { left: 116px; top: 64px; } .fl-spark-b { right: 110px; top: 52px; }
.fl-scene-3 .fl-you { animation: couch-arrive .55s .1s both cubic-bezier(.3, 1.6, .5, 1); }
.fl-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 6px; }
.fl-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: #dcd9d0; cursor: pointer; transition: width .25s, background .25s; }
.fl-dot[aria-current="true"] { width: 22px; background: var(--bloom-ink); }
.fl-caption { min-height: 76px; text-align: center; }
.fl-caption b { display: block; margin-bottom: 4px; font-size: 20px; }
.fl-caption span { font-size: 15px; line-height: 1.35; color: var(--bloom-muted); }
.fl-go { display: block; width: 100%; height: 52px; border: 0; border-radius: 16px; background: var(--bloom-ink); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.fl-page .fl-go { margin-top: auto; }
.fl-signin { align-self: center; margin: 14px 0 8px; font-size: 14px; color: var(--bloom-muted); text-decoration: underline; }
.fl-go:disabled, .fl-later:disabled { opacity: .6; }
@keyframes fl-in { from { opacity: 0; } }
@keyframes fl-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes fl-drop { from { opacity: 0; transform: translateY(-40px) rotate(-1.5deg); } }
@keyframes fl-wave { 50% { transform: rotate(18deg); } }

/* "Add <name> as a friend?" for someone signed in. */
.fl-sheet { position: fixed; inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px; width: auto; max-width: 480px; margin: 0 auto;
  padding: 22px 20px 18px; border: 0; border-radius: 30px; background: #fff; color: var(--bloom-ink); text-align: center; box-shadow: 0 20px 50px #0003;
  animation: fl-rise .4s cubic-bezier(.3, 1.2, .5, 1); }
.fl-sheet::backdrop { background: #0004; }
.fl-sheet .fl-couch { margin: 0 auto; }
.fl-sheet h2 { outline: none; margin: 8px 0 4px; font-size: 24px; letter-spacing: -.3px; }
.fl-sheet p { margin: 0 0 16px; font-size: 15px; line-height: 1.35; color: var(--bloom-muted); }
.fl-later { display: block; width: 100%; height: 52px; margin-top: 8px; border: 0; border-radius: 16px; background: var(--bloom-surface); color: var(--bloom-ink); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
@keyframes fl-rise { from { transform: translateY(40px); opacity: 0; } }

/* The friend you just added, on the Friends tab. */
#friends .friend-entry.fl-new-friend { background: #fff6dc; border-radius: 16px; transition: background 1s; }

@media (prefers-reduced-motion: reduce) {
  .fl-scene, .fl-scene *, .fl-sheet, .fl-plus, .fl-lamp::after, .fl-request { animation: none !important; }
  .fl-dot { transition: none; }
}
@media (max-height: 700px) {
  .fl-stage { height: 230px; }
  .fl-scene .fl-couch { transform: translateX(-50%) scale(1); }
  .fl-page h1 { font-size: 24px; }
}
/* Short screens (small phones, landscape): just the button, so your friends stay in view. */
@media (max-height: 600px) {
  .fl-card { display: block; padding: 0; margin-bottom: 12px; border: 0; background: none; box-shadow: none; }
  .fl-card-art, .fl-card h3, .fl-card p, .fl-link-actions { display: none; }
  .fl-share { display: block; width: 100%; margin: 0; height: 44px; font-size: 15px; border-radius: 14px; }
}