/* «Наши друзья» (Д98): полоса под шапкой окна и под шапкой витрины — Pages/Shared/_FriendsStrip.cshtml, поведение — kit/friends.js. Окно (корень .win-shell.has-friends)
   получает вторую строку сетки под полосу, а его области съезжают на строку ниже: так полоса стоит под шапкой в любом окне на каркасе. */
.fr{grid-column:1/-1;grid-row:2;flex:none;position:relative;display:grid;align-items:center;min-height:52px;padding:7px 14px;border-bottom:1px solid var(--border-hairline);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 13%,var(--ink-700)),var(--ink-700) 65%);box-shadow:inset 3px 0 0 var(--accent);font-size:12.5px;color:var(--text-muted);overflow:hidden}
.fr__slide{grid-area:1/1;display:flex;align-items:center;gap:12px;min-width:0;color:inherit;text-decoration:none;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .5s var(--ease-out,ease),transform .5s var(--ease-out,ease),visibility 0s .5s}
.fr__slide.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
a.fr__link:hover .fr__title{color:var(--accent)}
.fr:has(a.fr__link:hover){background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 20%,var(--ink-700)),var(--ink-700) 70%)}
.fr__link{display:flex;align-items:center;gap:12px;min-width:0;flex:1;color:inherit;text-decoration:none}
.fr__logo{position:relative;flex:none;display:inline-grid;place-items:center;height:36px;min-width:36px;border-radius:9px;overflow:hidden;background:var(--c,#5ec8ff);color:#04202e;font-weight:800;font-size:13px;letter-spacing:.03em}
.fr__logo img{display:block;height:36px;max-width:96px;object-fit:contain}
/* Своя картинка — на прозрачном фоне (PNG/WebP с прозрачностью), без белой подложки и блика поверх пустого места. */
.fr__logo:has(img){background:none;border-radius:0;overflow:visible}
.fr__logo:has(img)::after{display:none}
.fr__logo--telegram{--c:#2aabee;color:#fff}.fr__logo--discord{--c:#5865f2;color:#fff}.fr__logo--site{--c:#8be28b}
/* Две строки: первая крупнее и ярче, вторая мельче. */
.fr__body{min-width:0;flex:1;display:grid;gap:1px}
.fr__title,.fr__sub{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr__title{color:var(--text-heading);font-size:14px;font-weight:650;line-height:1.25;transition:color .15s}
.fr__sub{color:var(--text-muted);font-size:12px;line-height:1.25}
.fr__sub[hidden]{display:none}
.fr__mark{flex:none;padding:2px 9px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:999px;font-size:11px;color:var(--accent);white-space:nowrap}
.fr__timer[hidden]{display:none}
.fr__timer{flex:none;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.fr__go{flex:none;padding:5px 12px;border-radius:999px;background:var(--accent);color:#04202e;font-size:12px;font-weight:650;white-space:nowrap;text-decoration:none}
a.fr__go:hover{filter:brightness(1.1);color:#04202e}
/* Промокод: нажатие копирует его (data-copy, кит), в предпросмотре админки — просто плашка. */
.fr__promo{flex:none;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px dashed color-mix(in srgb,var(--accent) 70%,transparent);border-radius:8px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text-heading);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.fr__promo b{font-family:ui-monospace,Consolas,monospace;font-weight:700;letter-spacing:.04em}
.fr__promo:hover{border-style:solid;background:color-mix(in srgb,var(--accent) 16%,transparent)}
.fr__promo[hidden]{display:none}
.fr__go[hidden]{display:none}
/* Заметный блик: по логотипу и по всей полосе, раз в несколько секунд (класс ставит js/friends.js). */
.fr__logo::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.fr.is-shine .is-on .fr__logo::after{animation:frShine .9s var(--ease-out,ease)}
.fr::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--accent) 24%,transparent) 50%,transparent 70%);transform:translateX(-100%);pointer-events:none}
.fr.is-shine::after{animation:frSweep 1.4s var(--ease-out,ease)}
.fr.is-shine .is-on .fr__logo{animation:frPop .6s var(--ease-out,ease)}
@keyframes frShine{to{transform:translateX(120%)}}
@keyframes frSweep{to{transform:translateX(100%)}}
@keyframes frPop{40%{transform:scale(1.12)}}
@media (max-width:640px){.fr{min-height:48px;padding:6px 10px}.fr__promo{padding:2px 8px}.fr__mark{display:none}.fr__logo{height:32px;min-width:32px}.fr__logo img{height:32px}.fr__go{padding:4px 9px}}
@media (prefers-reduced-motion:reduce){.fr__slide{transition:none;transform:none}.fr.is-shine .is-on .fr__logo,.fr.is-shine .is-on .fr__logo::after,.fr.is-shine::after{animation:none}}

/* Под шапкой витрины: фон на всю ширину, а содержимое — в тех же границах, что у шапки (.wrap: контейнер и поля), а не у краёв экрана. */
[data-friends-slot] .fr{padding-inline:max(var(--gutter),calc((100% - var(--container)) / 2 + var(--gutter)))}
.win-shell.has-friends{grid-template-rows:auto auto minmax(0,1fr)}
.win-shell.has-friends :is(.tw-side,.tw-chat,.clb-side,.ew-side){grid-row:3}
@media (max-width:640px){
  .tw.has-friends,.clb.has-friends{grid-template-rows:auto auto auto minmax(0,1fr)}
  .tw.has-friends .tw-panes,.clb.has-friends .tw-panes{grid-row:3}
  .tw.has-friends :is(.tw-side,.tw-chat),.clb.has-friends :is(.clb-side,.tw-chat){grid-row:4}
}