/* ZALP: профиль, друзья, чат */
#zso-root, #zsc-dock, #zso-toast { --zs-ink: #1a1340; --zs-out-sm: 0 1px 0 #1a1340, 1px 0 0 #1a1340, -1px 0 0 #1a1340, 0 -1px 0 #1a1340; --zs-out: 0 2px 0 #1a1340, 2px 0 0 #1a1340, -2px 0 0 #1a1340, 0 -2px 0 #1a1340; font-family: var(--z-font, "Rubik", "Montserrat", system-ui, sans-serif); color: #fff; }
.za-hex-xs { width: 22px; height: 19px; }
.za-hex-xs b { font-size: 9.5px; }

/* кнопки верхней панели */
:root:not(#zz#zz) #vw-bar .zso-pill { position: relative; padding-left: 34px !important; background-size: 24px 24px, auto !important; background-position: 6px 50%, 0 0 !important; background-repeat: no-repeat !important; }
:root:not(#zz#zz) #vw-bar .zso-pill-friends { background-image: url(/img/zalp-ach/ach-duo.webp), linear-gradient(180deg, var(--z-panel-top, #4b3cc4), var(--z-panel-bot, #2a1e84)) !important; }
:root:not(#zz#zz) #vw-bar .zso-pill-chat { display: inline-flex !important; background-image: url(/img/zalp-ui/menu-keys.webp), linear-gradient(180deg, var(--z-panel-top, #4b3cc4), var(--z-panel-bot, #2a1e84)) !important; }
.zso-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border: 2px solid #1a1340; border-radius: 999px; background: #ff4d63; color: #fff; font: 900 11px/1 var(--z-font, sans-serif); font-style: normal; box-sizing: border-box; }
#vw-bar .zso-pill > .zso-badge { position: absolute; top: -8px; right: -6px; }

/* окно */
#zso-root { position: fixed; inset: 0; z-index: 10070; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 4, 30, .6); opacity: 0; transition: opacity .18s ease; }
#zso-root[hidden] { display: none; }
#zso-root.zso-open { opacity: 1; }
#zso-root .zso-modal { position: relative; width: min(760px, 100%); max-height: min(760px, 100%); display: flex; flex-direction: column; border: 4px solid #1a1340; border-radius: 28px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px), linear-gradient(180deg, var(--z-panel-top, #4b3cc4) 0%, var(--z-panel-mid, #3527a0) 55%, var(--z-panel-bot, #2a1e84) 100%);
  box-shadow: 0 6px 0 #1a1340, 0 18px 40px rgba(10, 4, 40, .55), inset 0 3px 0 rgba(255, 255, 255, .16); transform: scale(.94); transition: transform .22s cubic-bezier(.2, 1.4, .4, 1); }
#zso-root.zso-open .zso-modal { transform: none; }
#zso-root .zso-x { position: absolute; z-index: 3; right: 12px; top: 12px; width: 44px; height: 44px; padding: 8px; border: 3px solid #1a1340; border-radius: 50%; background: linear-gradient(180deg, #ff9aa8, var(--z-red, #ff4d63) 55%, var(--z-red-dk, #d4213d)); box-shadow: 0 3px 0 #1a1340; cursor: pointer; }
#zso-root .zso-x svg { width: 100%; height: 100%; }
#zso-root .zso-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 18px 18px; }
#zso-root .zso-body::-webkit-scrollbar { width: 10px; }
#zso-root .zso-body::-webkit-scrollbar-thumb { background: var(--z-yellow, #ffd21f); border: 2px solid #1a1340; border-radius: 999px; }
#zso-root .zso-loading, #zso-root .zso-muted { padding: 14px; font-weight: 700; color: #d9d2ff; text-shadow: var(--zs-out-sm); text-align: center; }
#zso-root .zso-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px; text-align: center; text-shadow: var(--zs-out-sm); }
#zso-root .zso-empty img { width: 96px; height: 96px; }
#zso-root .zso-empty b { font-size: 22px; font-weight: 900; }
#zso-root .zso-empty span { color: #d9d2ff; font-weight: 700; }

.zso-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 16px; border: 3px solid #1a1340; border-radius: 14px; color: #fff; font: 900 14px/1 var(--z-font, sans-serif); text-shadow: 0 1px 0 #1a1340, 1px 0 0 #1a1340, -1px 0 0 #1a1340, 0 -1px 0 #1a1340; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 3px 0 #1a1340; cursor: pointer; white-space: nowrap; }
.zso-btn:disabled { filter: grayscale(.6) brightness(.85); cursor: default; }
.zso-btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 11px; }
.zso-btn-yel { background: linear-gradient(180deg, #ffe970, #ffd21f 55%, #ff9a00); color: #1a1340; text-shadow: none; }
.zso-btn-green { background: linear-gradient(180deg, #9cf58c, var(--z-green, #3fd13a) 55%, var(--z-green-dk, #1f9a22)); }
.zso-btn-blue { background: linear-gradient(180deg, #6cc6ff, var(--z-blue, #31a8ff) 55%, var(--z-blue-dk, #1b63e0)); }
.zso-btn-ghost { background: rgba(10, 6, 40, .55); }

/* профиль */
.zso-ava { position: relative; display: inline-flex; flex: none; width: 46px; height: 46px; border: 3px solid #1a1340; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #8fd06a, #4e8a30); overflow: hidden; }
.zso-ava img { width: 100%; height: 100%; transform: rotate(-90deg) scale(1.08); }
.zso-ava-lg { width: 104px; height: 104px; border-width: 4px; box-shadow: 0 4px 0 #1a1340, 0 0 0 4px rgba(255, 233, 112, .35); }
#zso-root .zso-phead { display: flex; align-items: center; gap: 16px; padding-right: 50px; }
#zso-root .zso-pwho { flex: 1; min-width: 0; }
#zso-root .zso-pnick { font-weight: 900; font-size: 30px; line-height: 1.05; word-break: break-word; text-shadow: var(--zs-out), 0 3px 0 #1a1340; }
#zso-root .zso-ptitle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-weight: 800; font-size: 14px; text-shadow: var(--zs-out-sm); }
#zso-root .zso-ptitle > b { color: var(--z-yellow, #ffd21f); }
#zso-root .zso-pstatus { font-size: 12px; color: #cfc8ff; }
.zso-online { color: #7cf06a !important; font-style: normal; }
#zso-root .zso-pbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#zso-root .zso-ppts { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; text-shadow: var(--zs-out-sm); }
#zso-root .zso-ppts > b { font-weight: 900; font-size: 22px; }
#zso-root .zso-ppts > i { font-style: normal; font-size: 11px; font-weight: 800; color: #d9d2ff; }
#zso-root .zso-tabs { display: flex; gap: 8px; margin: 16px 0 12px; }
#zso-root .zso-tab { height: 38px; padding: 0 18px; border: 3px solid #1a1340; border-radius: 999px; background: rgba(10, 6, 40, .45); color: #fff; font: 900 14px/1 var(--z-font, sans-serif); cursor: pointer; text-shadow: var(--zs-out-sm); }
#zso-root .zso-tab i { font-style: normal; opacity: .8; font-size: 12px; }
#zso-root .zso-tab.zso-on { background: linear-gradient(180deg, #ffe970, #ffd21f 55%, #ff9a00); color: #1a1340; text-shadow: none; }
#zso-root .zso-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#zso-root .zso-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 3px solid #1a1340; border-radius: 16px; background: rgba(10, 6, 40, .4); text-align: center; }
#zso-root .zso-stat img { width: 40px; height: 40px; }
#zso-root .zso-stat b { font-weight: 900; font-size: 19px; text-shadow: var(--zs-out-sm); }
#zso-root .zso-stat i { font-style: normal; font-weight: 800; font-size: 11.5px; color: #d9d2ff; }
#zso-root .zso-sec { display: flex; align-items: center; gap: 6px; margin: 14px 2px 8px; font-weight: 900; font-size: 14px; color: var(--z-yellow, #ffd21f); text-transform: uppercase; letter-spacing: .4px; text-shadow: var(--zs-out-sm); }
#zso-root .zso-sec > i { font-style: normal; color: #fff; opacity: .8; }
#zso-root .zso-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
#zso-root .zso-rach { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 3px solid #1a1340; border-radius: 14px; background: linear-gradient(90deg, rgba(255,210,31,.25), rgba(10,6,40,.4)); }
#zso-root .zso-rach img { width: 40px; height: 40px; }
#zso-root .zso-rach b { font-weight: 900; font-size: 13px; text-shadow: var(--zs-out-sm); }
#zso-root .zso-rach i { font-style: normal; font-weight: 900; font-size: 13px; color: #ffe970; }
#zso-root .zso-skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
#zso-root .zso-skill { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 8px; padding: 8px 10px; border: 3px solid #1a1340; border-radius: 14px; background: rgba(10, 6, 40, .4); font-weight: 800; text-shadow: var(--zs-out-sm); }
#zso-root .zso-skill img { grid-row: span 2; width: 36px; height: 36px; }
#zso-root .zso-skill small { opacity: .7; }
.zso-bar, .zso-bar > s { display: block; height: 8px; border-radius: 999px; text-decoration: none; }
.zso-bar { grid-column: 2 / -1; background: rgba(10, 6, 40, .6); border: 2px solid #1a1340; overflow: hidden; }
.zso-bar > s { background: linear-gradient(90deg, #ffe970, #ff9a00); }

/* друзья */
#zso-root .zso-fhead { display: flex; align-items: center; gap: 10px; padding-right: 50px; }
#zso-root .zso-fhead img { width: 56px; height: 56px; }
#zso-root .zso-ftitle { font-weight: 900; font-size: 30px; color: var(--z-yellow, #ffd21f); text-transform: uppercase; text-shadow: var(--zs-out), 0 3px 0 #1a1340; }
#zso-root .zso-search { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 12px; height: 50px; border: 3px solid #1a1340; border-radius: 16px; background: rgba(255, 255, 255, .95); }
#zso-root .zso-search img { width: 28px; height: 28px; }
#zso-root .zso-q { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #1a1340; font: 800 17px/1 var(--z-font, sans-serif); }
.zso-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 8px; border: 3px solid #1a1340; border-radius: 16px; background: rgba(10, 6, 40, .42); cursor: pointer; }
.zso-card:hover { background: rgba(255, 255, 255, .1); }
.zso-card-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zso-card-t > b { font-weight: 900; font-size: 16px; text-shadow: var(--zs-out-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zso-card-t > i { display: flex; align-items: center; gap: 5px; font-style: normal; font-weight: 800; font-size: 12px; color: #ffe970; text-shadow: var(--zs-out-sm); }
.zso-card-btns { display: flex; gap: 6px; }

/* чат-док */
#zsc-dock { position: fixed; z-index: 10040; left: 12px; bottom: 12px; width: min(380px, calc(100vw - 24px)); height: min(460px, calc(100vh - 120px)); display: flex; flex-direction: column; border: 4px solid #1a1340; border-radius: 22px;
  background: linear-gradient(180deg, rgba(75, 60, 196, .97), rgba(42, 30, 132, .97)); box-shadow: 0 5px 0 #1a1340, 0 14px 30px rgba(10, 4, 40, .5); overflow: hidden; animation: zsc-in .3s cubic-bezier(.2, 1.4, .4, 1); }
#zsc-dock[hidden] { display: none; }
@keyframes zsc-in { from { transform: translateY(30px) scale(.9); opacity: 0; } }
#zsc-dock .zsc-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px; border-bottom: 3px solid #1a1340; background: rgba(10, 6, 40, .3); }
#zsc-dock .zsc-tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; }
#zsc-dock .zsc-tab { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 3px solid #1a1340; border-radius: 999px; background: rgba(10, 6, 40, .45); color: #fff; font: 900 12.5px/1 var(--z-font, sans-serif); cursor: pointer; text-shadow: var(--zs-out-sm); }
#zsc-dock .zsc-tab.zsc-on { background: linear-gradient(180deg, #ffe970, #ffd21f 55%, #ff9a00); color: #1a1340; text-shadow: none; }
#zsc-dock .zsc-peer { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
#zsc-dock .zsc-x { flex: none; width: 34px; height: 34px; padding: 6px; border: 3px solid #1a1340; border-radius: 50%; background: rgba(10, 6, 40, .5); cursor: pointer; }
#zsc-dock .zsc-x svg { width: 100%; height: 100%; }
#zsc-dock .zsc-msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
#zsc-dock .zsc-msgs::-webkit-scrollbar { width: 8px; }
#zsc-dock .zsc-msgs::-webkit-scrollbar-thumb { background: var(--z-yellow, #ffd21f); border: 2px solid #1a1340; border-radius: 999px; }
#zsc-dock .zso-muted, #zsc-dock .zsc-hint { padding: 10px; font-weight: 700; font-size: 13px; color: #d9d2ff; text-align: center; text-shadow: var(--zs-out-sm); }
#zsc-dock .zsc-hint { color: #ffe970; }
#zsc-dock .zsc-line { position: relative; padding: 4px 8px 6px; border-radius: 12px; background: rgba(10, 6, 40, .32); }
#zsc-dock .zsc-line.zsc-me { background: rgba(255, 210, 31, .14); }
#zsc-dock .zsc-line.zsc-admin { box-shadow: inset 0 0 0 2px rgba(255, 77, 99, .7); }
#zsc-dock .zsc-who { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #ffe970; font: 900 13px/1 var(--z-font, sans-serif); cursor: pointer; text-shadow: var(--zs-out-sm); }
#zsc-dock .zsc-time { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: #a99fe0; }
#zsc-dock .zsc-del { position: absolute; right: 6px; top: 4px; border: 0; background: none; color: #ff9aa8; font-weight: 900; cursor: pointer; }
#zsc-dock .zsc-text { margin-top: 3px; font-weight: 700; font-size: 13.5px; line-height: 1.3; word-break: break-word; text-shadow: var(--zs-out-sm); }
#zsc-dock .zsc-conv { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 3px solid #1a1340; border-radius: 14px; background: rgba(10, 6, 40, .4); color: #fff; font: inherit; text-align: left; cursor: pointer; }
#zsc-dock .zsc-conv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#zsc-dock .zsc-conv-t b { font-weight: 900; font-size: 14px; text-shadow: var(--zs-out-sm); }
#zsc-dock .zsc-conv-t > i { font-style: normal; font-weight: 700; font-size: 12px; color: #cfc8ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#zsc-dock .zsc-bubble { max-width: 82%; align-self: flex-start; padding: 6px 10px; border: 3px solid #1a1340; border-radius: 14px 14px 14px 4px; background: rgba(10, 6, 40, .5); font-weight: 700; font-size: 13.5px; line-height: 1.3; word-break: break-word; }
#zsc-dock .zsc-bubble.zsc-mine { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: linear-gradient(180deg, #6cc6ff, #31a8ff 60%, #1b63e0); }
#zsc-dock .zsc-bubble .zsc-time { display: block; margin: 2px 0 0; text-align: right; color: rgba(255, 255, 255, .7); }
#zsc-dock .zsc-form { display: flex; gap: 6px; padding: 8px; border-top: 3px solid #1a1340; background: rgba(10, 6, 40, .3); }
#zsc-dock .zsc-form[hidden] { display: none; }
#zsc-dock .zsc-inp { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 3px solid #1a1340; border-radius: 14px; background: #fff; color: #1a1340; font: 800 14px/1 var(--z-font, sans-serif); outline: 0; }
#zsc-dock .zsc-send { flex: none; width: 46px; height: 40px; padding: 6px; border: 3px solid #1a1340; border-radius: 14px; background: linear-gradient(180deg, #9cf58c, var(--z-green, #3fd13a) 55%, var(--z-green-dk, #1f9a22)); box-shadow: 0 3px 0 #1a1340; cursor: pointer; }
#zsc-dock .zsc-send svg { width: 100%; height: 100%; }

/* тост */
#zso-toast { position: fixed; z-index: 10300; left: 50%; bottom: 24px; transform: translate(-50%, 20px); padding: 10px 18px; border: 3px solid #1a1340; border-radius: 14px; background: #2a1e84; font-weight: 900; font-size: 14px; text-shadow: 0 1px 0 #1a1340; box-shadow: 0 4px 0 #1a1340; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
#zso-toast.zso-show { opacity: 1; transform: translate(-50%, 0); }
#zso-toast.zso-toast-ok { background: linear-gradient(180deg, #7cf06a, #1f9a22); }
#zso-toast.zso-toast-err { background: linear-gradient(180deg, #ff9aa8, #d4213d); }
#zso-toast.zso-toast-info { background: linear-gradient(180deg, #6cc6ff, #1b63e0); }

@media (max-width: 640px) {
  #zso-root { padding: 6px; }
  #zso-root .zso-body { padding: 12px; }
  #zso-root .zso-phead { flex-wrap: wrap; padding-right: 44px; }
  .zso-ava-lg { width: 72px; height: 72px; }
  #zso-root .zso-pnick { font-size: 22px; }
  #zso-root .zso-ppts { flex-direction: row; gap: 6px; }
  #zso-root .zso-stats { grid-template-columns: repeat(2, 1fr); }
  #zso-root .zso-skills { grid-template-columns: 1fr; }
  #zsc-dock { left: 6px; bottom: 6px; height: min(420px, calc(100vh - 90px)); }
}
#zsc-dock .zsc-tabs { scrollbar-width: none; }
#zsc-dock .zsc-tabs::-webkit-scrollbar { display: none; }