/* Hangout (js/friends/hangout.js): the usual Chats list; inside a chat, everyone you're talking with
   floats as faces just above the message box (bigger with a ring on the chat you're in, bright with
   a count while unread, soft when nothing's new, the Circle when there are new posts). */

/* ---------- The Chats ▾ menu: one line each ---------- */
.friends-head { position: relative; }
.friends-layout-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 232px; padding: 6px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #ecebe6, 0 12px 32px rgb(0 0 0 / .12); animation: hangoutMenuIn .18s ease-out; }
.friends-layout-menu[hidden] { display: none; }
.friends-layout-item { width: 100%; height: 46px; padding: 0 10px; border: 0; border-radius: 12px; display: flex; align-items: center; gap: 12px; background: none; color: #171717; font: inherit; font-size: 15.5px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; }
.friends-layout-item:active, .friends-layout-item.is-on { background: #f4f4f1; }
.friends-layout-icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f2f2f0; }
.friends-layout-item.is-on .friends-layout-icon { background: #fff; }
.friends-layout-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.friends-layout-item > svg { flex: none; }
@keyframes hangoutMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- The faces, just above a chat's message box ---------- */
.hangout-dock { animation: hangoutFade .22s ease-out; }
.hangout-dock[hidden] { display: none; }
@keyframes hangoutFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* In a chat the faces float just above the message box, over the chat itself (no strip of their own). */
.hangout-dock { position: absolute; z-index: 3; left: 0; right: 0; bottom: 100%; padding: 0 6px 2px; pointer-events: none; }
.hangout-dock .hangout-faces { pointer-events: auto; }
html.is-hangout-room.is-chat-room-chrome:not(.is-desktop-board) .pane-chat .main.is-chat-room-layout .conversation { padding-bottom: 78px; scroll-padding-bottom: 78px; }

/* The faces are balls on their own: no bar behind them. The far edge fades to show there are more. */
.hangout-faces { display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; background: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.hangout-faces::-webkit-scrollbar { display: none; }
.hangout-face { position: relative; flex: none; height: 56px; min-width: 48px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: transparent; cursor: pointer; transition: transform .15s ease, opacity .25s ease; }
.hangout-face[hidden] { display: none; }
/* Sideways moves scroll the row; up drags the face (to hide it). No callout on a long press. */
.hangout-face { touch-action: pan-x; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.hangout-face.is-dragging { opacity: .25; }
.hangout-face-ghost { position: fixed; z-index: 160; margin: 0; pointer-events: none; transition: none; }
.hangout-face-ghost .hangout-face-avatar, .hangout-face-ghost.hangout-face-circle { box-shadow: 0 10px 24px rgb(0 0 0 / .25); }
.hangout-face.is-held { transform: translateY(-4px) scale(1.1); }
.hangout-face.is-muted .hangout-count { background: #a3a39e; }
.hangout-face:active { transform: scale(.94); }
/* The chat you're in: bigger, with a dark ring. Friends with nothing new fade back (still tappable);
   friends with new messages stay bright with their count. */
.hangout-face.is-current .hangout-face-avatar { width: 56px; height: 56px; box-shadow: 0 0 0 3px #171717, 0 4px 12px rgb(0 0 0 / .18); }
.hangout-face.is-quiet { opacity: .45; }
/* Each face a ball: a white rim and a soft shadow, so it stands out on the chat. */
.hangout-face-avatar { --avatar-box: 48px; flex: none; width: 48px; height: 48px; border: 2.5px solid #fff; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #e9edf3; background-size: cover; background-position: center; color: #3f4a5a; font-size: 18px; font-weight: 800; box-sizing: border-box; box-shadow: 0 3px 10px rgb(0 0 0 / .14); transition: width .25s ease, height .25s ease, border-color .25s ease; }
.hangout-face-circle { width: 48px; height: 48px; justify-content: center; border: 2.5px solid #fff; border-radius: 50%; background: #fff; box-sizing: border-box; box-shadow: 0 3px 10px rgb(0 0 0 / .14); }
.hangout-face-circle .circle-mark { width: 38px; height: 38px; }
/* New messages (or, on the Circle face in a chat, new posts): a count on the face. The list's
   own badge, which the unread code adds to every row it knows, isn't drawn here. */
.hangout-face .link-unread-badge { display: none !important; }
.hangout-count[hidden] { display: none; }
.hangout-count { position: absolute; z-index: 1; top: -4px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px; border: 2.5px solid #fff; border-radius: 999px; display: grid; place-items: center; background: #ef6459; color: #fff; font-size: 11px; font-weight: 850; line-height: 1; box-sizing: border-box; animation: hangoutCountIn .28s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes hangoutCountIn { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Hold a face: its menu, just above it ---------- */
.hangout-face-menu { position: fixed; z-index: 150; width: 220px; padding: 6px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px #ecebe6, 0 14px 36px rgb(0 0 0 / .18); animation: hangoutMenuUp .18s ease-out; }
.hangout-face-menu-name { margin: 6px 10px 4px; overflow: hidden; color: #8a8a86; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hangout-face-menu button { width: 100%; height: 44px; padding: 0 10px; border: 0; border-radius: 12px; display: flex; align-items: center; gap: 12px; background: none; color: #171717; font: inherit; font-size: 15.5px; font-weight: 600; text-align: left; cursor: pointer; }
.hangout-face-menu button:active { background: #f4f4f1; }
.hangout-face-menu button svg { flex: none; }
@keyframes hangoutMenuUp { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- Dark ---------- */
html:is(.is-dark, [data-profile-theme="dark"]) .friends-layout-menu,
html:is(.is-dark, [data-profile-theme="dark"]) .hangout-face-menu { background: #1d1e21; box-shadow: 0 0 0 1px #2c2d31; }
html:is(.is-dark, [data-profile-theme="dark"]) .friends-layout-item,
html:is(.is-dark, [data-profile-theme="dark"]) .hangout-face-menu button { color: #f2f3f5; }
html:is(.is-dark, [data-profile-theme="dark"]) .friends-layout-item.is-on,
html:is(.is-dark, [data-profile-theme="dark"]) .friends-layout-icon,
html:is(.is-dark, [data-profile-theme="dark"]) .hangout-face-circle { background: #2a2b2f; }
html:is(.is-dark, [data-profile-theme="dark"]) .hangout-face-avatar,
html:is(.is-dark, [data-profile-theme="dark"]) .hangout-face-circle { border-color: #1d1e21; }
html:is(.is-dark, [data-profile-theme="dark"]) .hangout-count { border-color: #1d1e21; }
html:is(.is-dark, [data-profile-theme="dark"]) .hangout-face.is-current .hangout-face-avatar { box-shadow: 0 0 0 3px #f2f3f5, 0 4px 12px rgb(0 0 0 / .4); }

@media (prefers-reduced-motion: reduce) {
  .hangout-dock, .friends-layout-menu, .hangout-count, .hangout-face-menu { animation: none; }
}