/* Mission 2 file-sharing story styles (scenes-m2-share.js: share-dialog, share-audience, share-level).
   Scope every rule with the scene class (.qs-share-dialog, .qs-share-audience, .qs-share-level). */

/* share-dialog (practice): the Share button on the file card, Aina's avatar, the bubble growing from its tail and
   the focus ring that breathes once around each empty field. */
.qs-share-dialog .qs-file { position: relative; }
.qs-share-dialog .qs-file .m2s-fshare { position: absolute; right: 9px; top: 9px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f0569a, #c42a67); box-shadow: 0 6px 12px -6px #9b1d4ecc, inset 0 1px 0 #ffffff40; }
.qs-share-dialog .qs-file .m2s-fshare .icon { width: 14px; height: 14px; color: #fff; }
.qs-share-dialog .m2s-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #f49424, #e23d7f); color: #fff; font-size: .72rem; font-weight: 800; box-shadow: 0 0 0 2px #fff, 0 12px 20px -10px #000c; }
/* The bubble grows from its tail, the bottom-left corner (a layer scales about its untransformed box, so the origin
   is given in the layer's own coordinates). The sender is a small label line, so the message (which starts with her
   name) does not read as "Aina Aina". */
.qs-share-dialog .qs-l.bubble { padding-top: 9px; transform-origin: calc(var(--x) - 50%) calc(var(--y) + 50%) var(--z); }
.qs-share-dialog .qs-l.bubble > b { display: block; margin-bottom: 2px; color: #b4234f; font-size: .64rem; font-weight: 800; line-height: 1.2; letter-spacing: .02em; }
.qs-share-dialog .qs-select { position: relative; }
.qs-share-dialog .m2s-ring { position: absolute; inset: -4px; border-radius: 11px; border: 1.5px solid #e23d7f5c; box-shadow: 0 0 0 3px #e23d7f12, 0 0 16px #e23d7f30; pointer-events: none; }

/* share-audience (Q1): the window wrapper that carries the entrance and the pointer, and the dropdown's chevron (open:
   pointing up). The short window's shadow is a filter on .m2s-shade, set only by its beat. */
.qs-share-audience .m2s-wrap, .qs-share-audience .qs-select { position: relative; }
.qs-share-audience .m2s-chev { position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -2px; border-right: 2px solid #8b95a1; border-bottom: 2px solid #8b95a1; border-radius: 1px; transform: rotate(-135deg); }

/* share-level (Q2): the window stands up on its bottom edge; Ravi's message (avatar, typing dots, bubble growing from
   its tail) is a transient layer that condenses into the chip. A layer scales about its untransformed box, so the
   message and the chip get their own centre as transform-origin. */
.qs-share-level .qs-win { transform-origin: 50% 100%; }
.qs-share-level .qs-l.m2s-msg, .qs-share-level .qs-l.chip { transform-origin: var(--x) var(--y) var(--z); }
.qs-share-level .qs-l.m2s-msg { display: flex; align-items: flex-end; gap: 8px; }
.qs-share-level .m2s-av { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #fcb434, #ec6c24); color: #fff; font-size: .62rem; font-weight: 800; box-shadow: 0 0 0 2px #fff, 0 12px 20px -10px #000c; }
.qs-share-level .m2s-say { display: grid; gap: 1px; width: max-content; padding: 9px 15px 11px; border-radius: 16px 16px 16px 4px; background: #fff; color: #1f232e; font-size: .8rem; font-weight: 600; line-height: 1.45; white-space: nowrap; box-shadow: 0 20px 36px -18px #000c; transform-origin: 0 100%; }
.qs-share-level .m2s-say b { color: #b4234f; font-size: .66rem; font-weight: 800; letter-spacing: .02em; }
.qs-share-level .m2s-dots { position: absolute; left: 38px; bottom: 0; display: flex; gap: 4px; padding: 11px 13px; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: 0 14px 26px -16px #000c; }
.qs-share-level .m2s-dots i { width: 6px; height: 6px; border-radius: 50%; background: #8b95a1; }