/* ReviewChatFeed, prototype styling, second iteration.
   =====================================================================
   Bottom-right corner of the hero, inside the same 1440px envelope the hero
   text block uses (its left edge is at 50% - 720px, so the stack's right
   edge mirrors it). The stack now sits ABOVE the badge row: the badges are
   52px tall on a 40px baseline, and 24px of air on top of that puts the
   stack's bottom at 116px, so on a narrower desktop the messages never land
   on the awards. Fixed height, so nothing on the page moves when messages
   arrive: the stack is bottom-aligned, and its overflow is visible on
   purpose, so the message shadows are not cut and the one leaving simply
   rises and fades above the others.

   Everything is 80% of the first iteration: 256 wide, 11px text, 11px
   padding, so the three read as short messages rather than as cards.

   The message surface is the site's raised card at rest (white at 72%,
   hairline, the .field / reviews-button shadow), radius 13 with a tighter
   bottom-right corner so it reads as a message and not as a card, without
   copying any particular chat app. Tokens from index.html's :root.
   ===================================================================== */
.review-chat {
    position:absolute; z-index:3;
    right:max(24px, calc(50% - 720px));
    bottom:116px;
    width:256px; height:300px;
    pointer-events:none;
}
.rcf-stack {
    position:absolute; inset:0;
}
/* With the link under the stack, the stack ends 30px higher to leave it room. */
.review-chat.has-all .rcf-stack { bottom:30px; }
.rcf-all {
    position:absolute; right:0; bottom:0; pointer-events:auto;
    display:inline-flex; align-items:center; gap:7px;
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
    font-size:14px; font-weight:600; line-height:19px; letter-spacing:0;
    font-variant:all-small-caps; color:var(--accent-mark, #5D8FA2);
    text-decoration:none; transition:gap .2s;
}
.rcf-all::after {
    content:''; width:5px; height:5px; flex:none;
    border-top:1.5px solid currentColor; border-right:1.5px solid currentColor;
    transform:rotate(45deg);
}
.rcf-all:hover { gap:11px; text-decoration:underline; text-underline-offset:3px; }
.rcf-all:focus-visible { outline:2px solid var(--m6, #B5C1E8); outline-offset:3px; border-radius:4px; }
.rcf-stack {
    display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
}
.rcf-msg {
    pointer-events:auto; flex:none;
    padding:10px 13px 11px;
    background:rgba(255,255,255,0.72);
    border:1px solid rgba(255,255,255,0.9);
    border-radius:13px 13px 5px 13px;
    box-shadow:0px 18px 50px rgba(12,12,32,0.07), 0px 3.5px 8px rgba(12,12,32,0.035);
    opacity:1; transform:none;
    transition:transform .52s cubic-bezier(.22,.61,.36,1), opacity .42s ease;
    will-change:transform, opacity;
}
.rcf-msg.is-enter { opacity:0; transform:translateY(14px) scale(.97); }
.rcf-msg.is-leave { opacity:0; transform:translateY(-14px); pointer-events:none; }

/* Head row: name and stars on the left, contract value on the right. */
.rcf-head {
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    margin-bottom:5px;
}
.rcf-who { display:inline-flex; align-items:baseline; gap:6px; min-width:0; }
.rcf-name {
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
    font-size:11px; font-weight:600; letter-spacing:-0.01em; color:var(--t1, #222331);
    white-space:nowrap;
}
.rcf-stars { font-size:9px; line-height:1; letter-spacing:1.5px; color:#E8A33D; }
.rcf-value {
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',sans-serif;
    font-size:11px; font-weight:600; letter-spacing:-0.02em; color:var(--t1, #222331);
    white-space:nowrap;
}
.rcf-text {
    margin:0;
    font-family:'Roboto', sans-serif; font-size:11px; line-height:16px;
    color:var(--t4, #2D3039);
    text-wrap:pretty;
}
.rcf-more {
    font-family:'Roboto', sans-serif; font-size:11px; color:var(--m1, #6A6D7C);
    text-decoration:underline; text-underline-offset:2px; white-space:nowrap;
}
.rcf-more:hover { color:var(--t1, #222331); }
.rcf-more:focus-visible { outline:2px solid var(--m6, #B5C1E8); outline-offset:2px; border-radius:3px; }

[data-theme="dark"] .rcf-msg {
    background:rgba(36,37,52,0.86);
    border-color:rgba(255,255,255,0.08);
    box-shadow:0px 18px 50px rgba(0,0,0,0.28), 0px 3.5px 8px rgba(0,0,0,0.14);
}

/* Phone and tablet: the hero is one full screen with its text, the sphere
   and the badges, and there is no corner left in it. The feed is desktop
   only; the mount script does not start it below 1025px and this rule keeps
   the box out of the layout there. */
@media (max-width: 1024px) {
    .review-chat { display:none; }
}

@media (prefers-reduced-motion: reduce) {
    .rcf-msg { transition:opacity .3s ease; will-change:auto; }
    .rcf-msg.is-enter, .rcf-msg.is-leave { transform:none; }
}