/* Друзья и личные сообщения: тот же слой, что у игр (.glg-*), плюс свои детали. */
.glf-code-card .glf-code { margin: 4px 0 10px; color: var(--ui-ink); font-family: Manrope, system-ui, sans-serif; font-size: clamp(30px, 7.4vw, 40px); font-variant-numeric: lining-nums tabular-nums; font-weight: 800; letter-spacing: .12em; }
.glf-code-card .glg-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.glf-code-card .glg-actions > button { min-width: 0; padding: 0 12px; }
.glf-add { margin-top: 22px; }
.glf-add h3 { margin-bottom: 10px; }
.glf-add-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.glf-add-row input { min-width: 0; letter-spacing: .12em; text-transform: uppercase; }
.glf-add-row input::placeholder { letter-spacing: normal; text-transform: none; }

.glf-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.glf-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px; border: 1px solid var(--ui-border); border-radius: 16px; color: var(--ui-ink); background: var(--ui-surface); text-align: start; }
.glf-row.is-muted { opacity: .7; }
.glf-friend { cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.glf-friend:hover { border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border)); }
.glf-friend:active { transform: scale(.99); }
.glf-friend .glg-new { margin: 0 0 0 auto; }
.glf-who { display: grid; gap: 2px; min-width: 0; }
.glf-name { overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.glf-who small, .glf-chat-head small { color: var(--ui-muted); font-size: 11px; font-weight: 700; }
.glf-who small.is-online, .glf-chat-head small.is-online { color: var(--ui-accent-deep); }
.glf-row-actions { display: flex; gap: 6px; margin-inline-start: auto; }
.glg-layer .glf-small { min-height: 38px; padding: 0 12px; border-radius: 14px; font-size: 11px; }

.glf-avatar { position: relative; display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--cream); background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-deep)); font-size: 16px; font-weight: 800; }
.glf-avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border: 2px solid var(--ui-surface); border-radius: 50%; background: color-mix(in srgb, var(--ui-muted) 55%, var(--ui-surface)); }
.glf-avatar.is-online::after { background: var(--emerald); }

.glf-safety { margin: 26px 0 0; color: var(--ui-muted); font-size: 11px; line-height: 1.5; text-align: center; }

.glf-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.glf-messages { display: flex; flex-direction: column; gap: 8px; min-height: 260px; max-height: calc(100dvh - 300px); margin: 0; padding: 12px; overflow: auto; border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-panel); list-style: none; overscroll-behavior: contain; }
.glf-bubble { align-self: flex-start; display: grid; gap: 4px; max-width: 82%; padding: 10px 13px; border-radius: 16px 16px 16px 7px; color: var(--ui-ink); background: var(--ui-surface); box-shadow: 0 4px 12px color-mix(in srgb, var(--night-deep) 6%, transparent); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.glf-bubble.is-mine { align-self: flex-end; border-radius: 16px 16px 7px 16px; color: var(--cream); background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-deep)); }
.glf-bubble small { opacity: .7; font-size: 11px; white-space: normal; }
.glf-report { padding: 0; border: 0; color: inherit; background: none; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.glf-empty { display: grid; justify-items: center; gap: 10px; margin: auto; color: var(--ui-muted); font-size: 13px; text-align: center; }
.glf-empty svg { width: 34px; height: 34px; fill: color-mix(in srgb, var(--ui-accent) 55%, transparent); }

.glf-compose { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 12px; }
.glf-compose textarea { min-height: 50px; max-height: 140px; padding: 14px; border: 1px solid var(--ui-border); border-radius: 16px; color: var(--ui-ink); background: var(--ui-panel); font: inherit; font-size: 16px; resize: vertical; }
.glf-compose .glg-primary { width: 54px; padding: 0; font-size: 16px; }
.glf-chat-tools { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.glf-chat-tools .glg-danger { margin-top: 8px; }

[dir="rtl"] .glf-bubble { border-radius: 16px 16px 7px 16px; }
[dir="rtl"] .glf-bubble.is-mine { border-radius: 16px 16px 16px 7px; }
[dir="rtl"] .glf-friend .glg-new { margin: 0 auto 0 0; }
[dir="rtl"] .glf-avatar::after { right: auto; left: -1px; }

@media (max-width: 340px) {
  .glf-code-card .glg-actions { grid-template-columns: 1fr; }
}

/* Приглашение в игру и выбор игры в переписке. */
.glf-invite { gap: 8px; }
.glf-invite .glg-primary { justify-self: start; }
.glf-play { margin-top: 10px; }
.glf-games { margin-top: 12px; padding: 14px; border: 1px solid var(--ui-border); border-radius: 18px; background: var(--ui-surface); }
.glf-games h3 { margin-bottom: 10px; font-size: 13px; }
.glf-games-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.glg-layer .glf-games-grid .glg-secondary { min-height: 46px; padding: 0 10px; border-radius: 14px; font-size: 11px; text-align: center; }

/* Большое окно приглашения в игру — поверх любого экрана. */
.glf-invite-pop { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .22s ease; }
.glf-invite-pop.is-open { opacity: 1; }
.glf-invite-pop-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--night-deep) 62%, transparent); backdrop-filter: blur(6px); }
.glf-invite-pop-card { position: relative; width: min(420px, 100%); padding: 30px 24px 24px; border: 1px solid color-mix(in srgb, var(--gold-bright) 55%, transparent); border-radius: 26px; color: var(--cream); background: linear-gradient(160deg, color-mix(in srgb, var(--madder) 80%, var(--night)), var(--night-deep)); box-shadow: 0 30px 80px color-mix(in srgb, var(--night-deep) 60%, transparent); text-align: center; transform: translateY(18px) scale(.96); transition: transform .32s cubic-bezier(.16, 1, .3, 1); }
.glf-invite-pop.is-open .glf-invite-pop-card { transform: none; }
.glf-invite-pop-icon { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 14px; border: 1px solid color-mix(in srgb, var(--gold-bright) 60%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--gold-bright) 16%, transparent); font-size: clamp(30px, 7.4vw, 40px); animation: glf-invite-bounce 1.4s ease-in-out infinite; }
.glf-invite-pop-eyebrow { margin: 0 0 6px; color: var(--gold-bright); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.glf-invite-pop-card h2 { margin: 0 0 22px; font-family: "Manrope", system-ui, sans-serif; font-size: clamp(19px, 3.5vw, 26px); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.glf-invite-pop-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.glf-invite-pop .glg-primary { min-height: 56px; border: 0; color: var(--gold-ink); background: linear-gradient(145deg, var(--gold-bright), var(--gold)); font-size: 16px; }
.glf-invite-pop .glg-secondary { min-height: 56px; border: 1px solid color-mix(in srgb, var(--cream) 30%, transparent); color: var(--cream); background: color-mix(in srgb, var(--cream) 8%, transparent); }
@keyframes glf-invite-bounce { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { .glf-invite-pop-icon { animation: none; } }