/*
 * Uygulama kabuğu: ray · yan panel (sohbetler / kanal odaları + ses dock'u)
 * · sahne · sağ panel. Kaynak tasarım: tasarım ajanının voxnup.html,
 * kanal.html, dm.html taslakları.
 *
 * Kabuk kapsayıcılarının (.vx-sidebar, .vx-room-lb, .tab-panel…) görünürlüğünü
 * JS .show()/.hide() ile yönetir (mobil görünüm de: MobileInterfaceManager).
 * Burada bu kapsayıcılara display:none ya da !important yazılmaz.
 */

/* ------------------------------------------------------------------ *
 *  Çerçeve
 * ------------------------------------------------------------------ */

body:has(.vx-container) {
    background: var(--frame);
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}

.vx-container {
    gap: var(--space-2);
    padding: var(--space-2);
    box-sizing: border-box;
}

/* .vx-app-content-home: [ yan panel | sahne | sağ panel ] (sağ panel
   komponentleri buraya taşınır, ChannelRightSidebar / PrivateRightSidebar). */
.vx-app-content-home {
    gap: var(--space-2);
}

.vx-panel {
    background: var(--panel);
    border-radius: var(--radius-lg);
    min-height: 0;
    min-width: 0;
}

.vx-container ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.vx-container ::-webkit-scrollbar-thumb {
    background: var(--raise);
    border: 3px solid var(--panel);
    border-radius: var(--radius-md);
}

.vx-container ::-webkit-scrollbar-track {
    background: transparent;
}

/* ------------------------------------------------------------------ *
 *  Avatar ve durum noktası
 *
 *  <span class="vx-av" style="--s: var(--av-lg)"><img …><span class="vx-st" data-color="primary"></span></span>
 *  data-color, User::$ActivityTexts'teki renk adıdır (primary/success
 *  çevrimiçi, warning boşta, danger meşgul, diğerleri çevrimdışı).
 *  --ring: noktanın çevresindeki halka; bulunduğu zeminin rengi olmalı.
 * ------------------------------------------------------------------ */

.vx-av {
    --s: var(--av-lg);
    --ring: var(--panel);
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: var(--raise);
    color: var(--text);
    font: 600 calc(var(--s) * .36)/1 var(--font);
}

/* Resim kutuyu tam kaplar. Grid hücresinde height: 100% çözülemiyordu: dikey bir
   fotoğraf (grup resmi) kendi oranında uzayıp elips görünüyordu. */
.vx-av > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.vx-av-sq {
    border-radius: 32%;
}

/* Kırık resim (vx.js): baş harf, resmin yerinde. ::before, durum noktasından
   önce boyanır; nokta üstte kalır. */
.vx-av > img.is-broken,
.vx-srv-img > img.is-broken {
    opacity: 0;
}

/* Resimsiz/kırık: baş harfler, addan türeyen tonda degrade (vx.fallback, --h). */
.vx-av[data-ini]::before,
.vx-srv-img[data-ini]::before {
    content: attr(data-ini);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: linear-gradient(140deg, hsl(var(--h, 220) 62% 52%), hsl(calc(var(--h, 220) + 38) 58% 34%));
    color: rgba(255, 255, 255, .95);
    pointer-events: none;
}

.vx-srv-img {
    position: relative;
    font: 700 var(--fs-md) var(--display);
}

.vx-st {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-3);
    box-shadow: 0 0 0 3px var(--ring);
}

.vx-st[data-color="primary"],
.vx-st[data-color="success"] { background: var(--green); }
.vx-st[data-color="warning"] { background: var(--gold); }
.vx-st[data-color="danger"] { background: var(--red); }

/* Oyunda (çevrimiçi + masaüstünün algıladığı oyun): nokta yerine çevrimiçi yeşili bir
   gamepad. Halka yine daire; gamepad halkanın içine taşar ki küçük boyda da seçilsin. */
.vx-st[data-color="game"] {
    background: var(--ring);
}

.vx-st[data-color="game"]::after {
    content: "";
    position: absolute;
    inset: -3px;
    background: var(--green);
    -webkit-mask: var(--vx-gamepad) center / contain no-repeat;
    mask: var(--vx-gamepad) center / contain no-repeat;
}

:root {
    --vx-gamepad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cmask id='m'%3E%3Cpath fill='%23fff' d='M6.5 6h11a5.5 5.5 0 0 1 5.4 6.6l-.8 4a3.4 3.4 0 0 1-5.9 1.6L14.2 16H9.8l-2 2.2a3.4 3.4 0 0 1-5.9-1.6l-.8-4A5.5 5.5 0 0 1 6.5 6Z'/%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' d='M8 9.5v4M6 11.5h4'/%3E%3Ccircle cx='15.6' cy='10.4' r='1.3'/%3E%3Ccircle cx='17.9' cy='12.9' r='1.3'/%3E%3C/mask%3E%3Crect width='24' height='24' mask='url(%23m)'/%3E%3C/svg%3E");
}

/* "CS2 oynuyor": satır alt metninde ve üye listesinde gamepad + oyun. */
.vx-game {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    min-width: 0;
    vertical-align: bottom;
}

.vx-game > .vx-icon {
    flex: none;
    color: var(--green);
}

/* Oyunun kendi simgesi (masaüstü .exe'den çıkarır). */
.vx-game-ic {
    flex: none;
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.vx-game > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 *  Ray
 * ------------------------------------------------------------------ */

/* Ray da diğer paneller gibi panel zemininde (kullanıcı isteği; taslakta zemin
   çerçeve rengiydi). Düğme zeminleri ve rozet halkaları buna göre. */
.vx-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 64px;
    width: 64px;
    min-height: 0;
    border-radius: var(--radius-lg);
    background: var(--panel);
}

.vx-rail-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    padding: var(--space-3) 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.vx-rail-list::-webkit-scrollbar {
    display: none;
}

.vx-rail-list .vxc_dsb_objects {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.vx-rail-sep {
    flex: none;
    width: var(--h-xs);
    margin: var(--space-1) 0;
    border: 0;
    border-top: 1px dashed var(--raise-2);
    opacity: 1;
}

.vx-srv {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: var(--h-xl);
    height: var(--h-xl);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--panel-2);
    color: var(--text-2);
    font: 700 var(--fs-md) var(--display);
    text-decoration: none;
    cursor: pointer;
    transition: border-radius .18s ease, background-color .12s, color .12s;
}

.vx-srv > img,
.vx-srv-img,
.vx-srv-img > img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.vx-srv-img {
    display: block;
}

.vx-srv:hover,
.vx-srv.on {
    border-radius: var(--radius-lg);
}

/* Soldaki seçim çubuğu: hover 16px, okunmamış 8px, seçili tam boy. */
.vx-srv::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 4px;
    height: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--text);
    translate: 0 -50%;
    transition: height .18s;
}

.vx-srv:hover::before { height: 16px; }
.vx-srv.unread::before { height: 8px; }
.vx-srv.on::before { height: var(--h-sm); }

.vx-srv-home {
    background: var(--green);
    color: var(--on-color);
}

/* Voxnup logosu (assets/vx/icons/logo.svg); .vx-srv > img'nin tam doldurmasını ezer. */
.vx-srv-home > .vx-srv-logo {
    width: 62%;
    height: auto;
    border-radius: 0;
    object-fit: contain;
}

.vx-srv-tool:hover {
    background: var(--green);
    color: var(--on-color);
}

.vx-srv-pip {
    position: absolute;
    right: -3px;
    bottom: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-md);
    background: var(--red);
    box-shadow: 0 0 0 3px var(--panel);
    color: var(--on-color);
    font: 500 var(--fs-xs)/20px var(--mono);
    text-align: center;
    pointer-events: none;
}

.vx-srv-pip:empty {
    display: none;
}

.vx-rail-foot {
    flex: none;
    padding: var(--space-2) 0 var(--space-3);
}

.vx-me {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.vx-me .vx-av {
    --s: var(--av-xl);
    --ring: var(--panel);
}

.vx-me .vx-st {
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
}

.vx-me:hover .vx-av {
    filter: brightness(1.1);
}

/* Seçili menü öğesi (ör. giriş aygıtı). Ben menüsü ContextMenu'de (vx.ctxmenu). */
.vx-menu-item[aria-checked="true"] {
    color: var(--text);
}

.vx-menu-item[aria-checked="true"]::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

/* ------------------------------------------------------------------ *
 *  Yan panel
 * ------------------------------------------------------------------ */

.vx-side {
    display: flex;
    flex-direction: column;
    flex: 0 0 304px;
    width: 304px;
    overflow: hidden;
}

.vx-side .rooms-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Yan panele yerleşen komponent (özel sohbetler ya da kanal odaları)
   kalan yüksekliği doldurur. Henüz taşınmamış komponentler kendi içinde
   kaydırılır. */
.vx-side .rooms-wrapper > .vxc-component {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.vx-find {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: none;
    height: var(--h-lg);
    margin: var(--space-3) var(--space-3) 0;
    padding: 0 var(--space-2) 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--raise);
    color: var(--text-2);
    font: 500 var(--fs-base) var(--font);
    text-align: left;
    cursor: pointer;
}

.vx-find:hover {
    background: var(--raise-2);
    color: var(--text);
}

.vx-find > span {
    flex: 1;
}

.vx-navs {
    display: grid;
    gap: var(--space-half);
    flex: none;
    padding: var(--space-3);
    border-bottom: 1px dashed var(--line);
}

.vx-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--h-lg);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-2);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.vx-nav:hover {
    background: var(--panel-2);
    color: var(--text);
}

.vx-nav.active {
    background: var(--panel-2);
    color: var(--green);
}

.vx-nav > span {
    flex: 1;
    min-width: 0;
}

.vx-nav-new {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--blue-soft);
    color: var(--blue);
    font: 600 var(--fs-xs) var(--font);
    font-style: normal;
    letter-spacing: .04em;
}

.vx-count:empty {
    display: none;
}

.vx-count-green {
    background: var(--green);
    color: var(--on-green);
}

/* Özel sohbetler komponenti: başlık sabit, liste kaydırılır. Gizleme
   jQuery'nin satır içi display:none'ı ile; o bu kuralı ezer, .show() silince
   flex geri gelir. */
.vx-side .rooms-wrapper > .vxc-private-rooms {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vx-inbox {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.vx-dm-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-2) var(--space-6);
}

.vx-dm-head h3 {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--text);
    font: 700 var(--fs-xl) var(--display);
    letter-spacing: -.01em;
    white-space: nowrap;
}

.vx-sq-btn {
    background: var(--raise);
    color: var(--green);
}

.vx-sq-btn:hover {
    background: var(--raise-2);
    color: var(--green);
}

.vx-filt {
    display: flex;
    gap: var(--space-5);
    margin: 0 var(--space-6) var(--space-2);
    border-bottom: 1px dashed var(--line);
}

.vx-filt button {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border: 0;
    background: transparent;
    color: var(--text-3);
    font: 500 var(--fs-md) var(--font);
    cursor: pointer;
}

.vx-filt button:hover {
    color: var(--text-2);
}

.vx-filt button[aria-pressed="true"] {
    color: var(--text);
}

.vx-filt button[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: var(--radius-sm);
    background: var(--green);
}

.vx-filt-n {
    color: var(--text-3);
    font: 500 var(--fs-xs) var(--mono);
}

.vx-filt-n.red {
    color: var(--red);
}

.vx-dms {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-1) var(--space-3) var(--space-3);
    overflow-y: auto;
}

/* Okunmamış süzgeci: okunmamışı olmayan satırlar gizlenir. */
.vx-dms[data-filter="unread"] > .vx-dm:not(.unread) {
    display: none;
}

/* ------------------------------------------------------------------ *
 *  Kişi / sohbet satırı (VoxUserElement)
 *  Yan panelde, arkadaş listelerinde ve davet modalında ortak.
 * ------------------------------------------------------------------ */

.vx-dm {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    color: var(--text-2);
    cursor: pointer;
}

.vx-dm:hover {
    background: var(--panel-2);
}

.vx-dm:hover .vx-av {
    --ring: var(--panel-2);
}

.vx-dm.on {
    background: var(--raise);
}

.vx-dm.on .vx-av {
    --ring: var(--raise);
}

.vx-dm-txt {
    flex: 1;
    min-width: 0;
}

.vx-dm-top {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.vx-dm-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text-2);
    font-weight: 500;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-dm.unread .vx-dm-name,
.vx-dm.on .vx-dm-name {
    color: var(--text);
    font-weight: 600;
}

.vx-dm-sub {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-half);
    color: var(--text-3);
    font-size: var(--fs-md);
}

.vx-dm-sub > .vxc-s-user-status-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-dm.unread .vx-dm-sub > .vxc-s-user-status-text {
    color: var(--text-2);
}

.vx-dm-end {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: none;
}

.vx-dm-end:empty {
    display: none;
}

/* Yan paneldeki sohbet listesi sık: daha küçük avatar, dar satır (kullanıcı
   isteği; listede bir ekranda daha çok sohbet görünsün). */
.vx-dms {
    gap: var(--space-half);
}

.vx-dms > .vx-dm {
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-md);
}

.vx-dms > .vx-dm .vx-av {
    --s: var(--av-md);
}

.vx-dms > .vx-dm .vx-st {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 2px var(--ring);
}

.vx-dms > .vx-dm .vx-dm-sub {
    margin-top: 0;
    font-size: var(--fs-sm);
}

/* ------------------------------------------------------------------ *
 *  Ses dock'u (yan panelin altı)
 * ------------------------------------------------------------------ */

.vx-dock {
    position: relative;
    flex: none;
    margin: 0 var(--space-2) var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--frame);
}

.vx-dock:empty {
    display: none;
}

.vx-vc {
    padding: var(--space-3);
}

.vx-vc-top {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Başlık + oda adı: tıklanınca bağlı olunan odanın ekranına döner (SocketVoice). */
.vx-vc-txt {
    flex: 1;
    min-width: 0;
    margin: calc(var(--space-1) * -1);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.vx-vc-txt:hover {
    background: var(--panel-2);
}

.vx-vc-txt:hover .vx-vc-sub {
    color: var(--text);
}

.vx-vc-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gold);
    font-size: var(--fs-md);
    font-weight: 600;
}

.vx-vc-title.is-connected {
    color: var(--green);
}

.vx-vc-sub {
    margin-top: var(--space-half);
    overflow: hidden;
    color: var(--text-3);
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-vc-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.vx-vc-actions .vx-ib {
    width: 100%;
    height: var(--h-sm);
    background: var(--panel-2);
}

.vx-vc-actions .vx-ib:hover {
    background: var(--raise);
}

.vx-vc .vx-ib.active,
.vx-vc .vx-ib[aria-expanded="true"] {
    background: var(--green-soft);
    color: var(--green);
}

/* Susturulmuş mikrofon / sağırlaştırılmış kulaklık: SocketVoice bu iki
   düğmede .active'i "kapalı" anlamında kullanıyor. */
.vx-vc .user-microphone.active,
.vx-vc .user-headphones.active,
.vx-vc .vx-ib.vx-mic-unavailable {
    background: var(--red-soft);
    color: var(--red);
}

.vx-vc .vx-ib.vx-hand-raised {
    color: var(--gold);
}

.vx-vc .vx-ib.vx-leave {
    background: var(--red-soft);
    color: var(--red);
}

.vx-vc .vx-ib.vx-leave:hover {
    background: var(--red);
    color: var(--on-color);
}

/* Bağlı odanın sohbetinde okunmamış mesaj */
.vx-vc .vx-ib.vx-has-unread {
    position: relative;
}

.vx-vc .vx-ib.vx-has-unread::after {
    content: "";
    position: absolute;
    top: var(--space-1);
    right: var(--space-2);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 2px var(--panel-2);
}

/* Ekran paylaşımı seçenekleri (popover) */
/* display yalnız açıkken: temel seçicide verilince kapalı popover'ı gizleyen
   kuralı eziyor, panel her sesli görüşmede sol üstte açık kalıyordu. */
.vx-ss-opts:popover-open,
.vx-ss-opts.vx-open {
    display: grid;
}

.vx-ss-opts {
    gap: var(--space-3);
    min-width: 240px;
}

.vx-ss-opts h4 {
    margin: 0;
    color: var(--text-3);
    font: 600 var(--fs-xs) var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vx-ss-opts .vx-ss-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}

.vx-ss-opts label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-2);
    font-size: var(--fs-md);
    cursor: pointer;
}

.vx-ss-opts input {
    accent-color: var(--green);
}

/* ------------------------------------------------------------------ *
 *  Sahne (orta panel)
 * ------------------------------------------------------------------ */

.vx-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
}

.vx-main .tab-contents {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.vx-main .tab-contents > .tab-panel {
    flex: 1 1 auto;
}

.vx-overview {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.vx-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: none;
    min-height: 64px;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
    border-bottom: 1px dashed var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}

.vx-bar::-webkit-scrollbar {
    display: none;
}

.vx-crumb {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: none;
    margin: 0;
    color: var(--text);
    font: 700 var(--fs-xl) var(--display);
    letter-spacing: -.01em;
    white-space: nowrap;
}

.vx-crumb .vx-icon {
    color: var(--text-3);
}

.vx-tabs {
    display: flex;
    gap: var(--space-half);
    flex: none;
    margin-left: var(--space-3);
    padding-left: var(--space-4);
    border-left: 1px solid var(--line);
}

.vx-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--h-lg);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-2);
    font: 500 var(--fs-base) var(--font);
    white-space: nowrap;
    cursor: pointer;
}

.vx-tab:hover {
    background: var(--panel-2);
    color: var(--text);
}

.vx-tab.active {
    background: var(--raise);
    color: var(--green);
}

.vx-tab .vx-count {
    background: var(--green);
    color: var(--on-green);
}

.vx-bar-end {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    margin-left: auto;
}

.vx-soc {
    width: var(--h-lg);
    height: var(--h-lg);
    background: var(--panel-2);
    color: var(--pink);
}

.vx-soc:hover {
    background: var(--pink-soft);
    color: var(--pink);
}

.vx-support {
    background: var(--panel-2);
    color: var(--green);
    font-weight: 500;
}

.vx-support:hover {
    background: var(--raise);
}

.vx-alert-ib {
    width: var(--h-lg);
    height: var(--h-lg);
    background: var(--red-soft);
    color: var(--red);
}

/* Sahnenin kaydırılan gövdesi */
.vx-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.vx-home {
    display: grid;
    gap: var(--space-8);
    max-width: 1360px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-7) var(--space-12);
}

.vx-hello {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.vx-hello h1 {
    margin: 0;
    color: var(--text);
    font: 700 clamp(var(--fs-2xl), 2.6vw, var(--fs-3xl))/1.05 var(--display);
    letter-spacing: -.025em;
    text-wrap: balance;
}

.vx-hello h1 em {
    color: var(--green);
    font-style: normal;
}

.vx-hello p {
    margin: var(--space-2) 0 0;
    color: var(--text-2);
}

.vx-metrics {
    display: flex;
    gap: var(--space-6);
}

.vx-metric {
    display: grid;
    gap: var(--space-half);
}

.vx-metric b {
    color: var(--text);
    font: 700 var(--fs-2xl)/1 var(--display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.vx-metric span {
    color: var(--text-3);
    font-size: var(--fs-sm);
}

.vx-metric.is-green b {
    color: var(--green);
}

/* Bölüm başlığı: ikon kutusu · başlık · kesikli çizgi · sayı · eylem */
.vx-sec-h {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.vx-sec-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--h-xs);
    height: var(--h-xs);
    border-radius: var(--radius-md);
    background: var(--tone-soft, var(--raise));
    color: var(--tone, var(--text-2));
}

.vx-sec-h h2 {
    margin: 0;
    color: var(--text);
    font: 600 var(--fs-lg) var(--font);
}

.vx-sec-h .vx-rule {
    flex: 1;
    margin: 0 var(--space-1);
    border-top: 1px dashed var(--line);
}

.vx-sec-n {
    min-width: 24px;
    height: 20px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--tone-soft, var(--raise));
    color: var(--tone, var(--text-2));
    font: 500 var(--fs-xs)/20px var(--mono);
    text-align: center;
}

.vx-sec-n:empty {
    display: none;
}

.vx-sec[data-tone="gold"] { --tone: var(--gold); --tone-soft: var(--gold-soft); }
.vx-sec[data-tone="blue"] { --tone: var(--blue); --tone-soft: var(--blue-soft); }
.vx-sec[data-tone="red"] { --tone: var(--red); --tone-soft: var(--red-soft); }

.vx-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    gap: var(--space-7);
}

/* Favori satırı (kart) */
.vx-favs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

.vx-fav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--panel-2);
    cursor: pointer;
}

.vx-fav .vx-av {
    --ring: var(--panel-2);
}

.vx-fav:hover {
    background: var(--raise);
}

.vx-fav:hover .vx-av {
    --ring: var(--raise);
}

.vx-fav-txt {
    flex: 1;
    min-width: 0;
}

.vx-fav-txt b {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-fav-txt small {
    display: block;
    overflow: hidden;
    color: var(--text-3);
    font-size: var(--fs-md);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Çevrimiçi arkadaş satırı (Genel Bakış sağ sütunu; voxnup.html .fr). Mesaj
   düğmesi satır üstüne gelince görünür. */
.vx-friends {
    display: grid;
    gap: var(--space-half);
}

.vx-fr {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.vx-fr .vx-av {
    --s: 40px;
}

.vx-fr:hover {
    background: var(--panel-2);
}

.vx-fr:hover .vx-av {
    --ring: var(--panel-2);
}

.vx-fr-txt {
    flex: 1;
    min-width: 0;
}

.vx-fr-txt b {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-fr-txt small {
    display: block;
    overflow: hidden;
    color: var(--text-3);
    font-size: var(--fs-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-fr .vx-fr-msg {
    opacity: 0;
    transition: opacity .12s;
}

.vx-fr:hover .vx-fr-msg,
.vx-fr .vx-fr-msg:focus-visible {
    opacity: 1;
}

/* Arkadaşlar sekmesindeki grup başlığı (Çevrimiçi — 3) */
.vx-friends-h {
    margin: var(--space-3) 0 var(--space-1);
    padding: 0 var(--space-3);
    color: var(--text-3);
    font: 600 var(--fs-xs) var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.vx-friends-empty {
    padding: var(--space-3);
    color: var(--text-3);
    font-size: var(--fs-md);
}

/* Avatarın köşesindeki oda türü rozeti (sesli / metin) */
.vx-kind {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--ring);
    color: var(--on-color);
}

.vx-kind[data-kind="voice"] { background: var(--blue); }
.vx-kind[data-kind="text"] { background: var(--green); }

/* Sunucuya göre gruplu oda listesi (Sık Kullanılanlar) */
.vx-groups {
    columns: 3 340px;
    column-gap: var(--space-3);
}

.vx-grp {
    margin-bottom: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--panel-2);
    break-inside: avoid;
}

.vx-grp-h {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2) var(--space-3);
}

.vx-grp-h .vx-av {
    --s: var(--av-sm);
    --ring: var(--panel-2);
}

.vx-grp-h b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-grp-h small {
    color: var(--text-3);
    font: 500 var(--fs-xs) var(--mono);
}

.vx-ch {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text);
    cursor: pointer;
}

.vx-ch:hover {
    background: var(--raise);
}

.vx-ch-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: var(--h-sm);
    height: var(--h-sm);
    border-radius: var(--radius-md);
}

.vx-ch-ic[data-kind="voice"] { background: var(--blue-soft); color: var(--blue); }
.vx-ch-ic[data-kind="text"] { background: var(--green-soft); color: var(--green); }

.vx-ch-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-ch .vx-go {
    color: var(--text-2);
    opacity: 0;
}

.vx-ch:hover .vx-go {
    opacity: 1;
}

/* Boş durum */
.vx-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-10) var(--space-4);
    color: var(--text-2);
    text-align: center;
}

.vx-empty > .vx-icon {
    color: var(--text-3);
}

.vx-empty h3 {
    margin: 0;
    color: var(--text);
    font: 700 var(--fs-xl) var(--display);
}

.vx-empty p {
    max-width: 48ch;
    margin: 0;
}

/* ------------------------------------------------------------------ *
 *  Sağ panel (üye listesi / profil). Gizleme JS .hide() ile; görünür
 *  hâli flex sütun.
 * ------------------------------------------------------------------ */

.vx-rside {
    display: flex;
    flex-direction: column;
    flex: 0 0 280px;
    width: 280px;
    overflow: hidden;
}

.vx-rside.vx-profile {
    flex-basis: 320px;
    width: 320px;
}

/* ------------------------------------------------------------------ *
 *  Form parçaları (sahne içi arama, arkadaş ekleme)
 * ------------------------------------------------------------------ */

.vx-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--h-lg);
    padding: 0 var(--space-2) 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-2);
    color: var(--text-3);
}

.vx-field:focus-within {
    border-color: var(--green-line);
}

.vx-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
    font: 400 var(--fs-base) var(--font);
}

.vx-field input::placeholder {
    color: var(--text-3);
}

.vx-field-pre {
    color: var(--text-2);
    font-weight: 600;
}

.vx-pane {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-6) var(--space-7);
}

.vx-pane h2 {
    margin: 0;
    color: var(--text);
    font: 700 var(--fs-xl) var(--display);
}

.vx-pane p {
    margin: 0;
    color: var(--text-2);
}

.vx-row-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--line);
}

.vx-list-h {
    margin: var(--space-2) 0 0;
    color: var(--text-3);
    font: 600 var(--fs-xs) var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ *
 *  Dar ekran
 * ------------------------------------------------------------------ */

@media (max-width: 1280px) {
    .vx-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .vx-support > span {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .vx-container {
        padding: 0;
        gap: 0;
    }

    .vx-container .vx-panel {
        border-radius: 0;
    }

    .vx-side,
    .vx-rside,
    .vx-rside.vx-profile {
        flex: 1 1 auto;
        width: auto;
    }

    /* Yan panel ile sahne aynı anda görünmez. Yan panel açıkken tam genişliği
       o alır. Sohbet açılınca fxvxshowchattab yan paneli jQuery .hide() ile
       gizler (satır içi display: none) ve sahne tam genişliğe geçer. Durum
       yalnız o satır içi stilde tutulduğu için seçici ona bakıyor. */
    .vx-app-content-home:has(> .vx-room-lb:not([style*="display: none"])) > .vx-main {
        display: none;
    }

    /* Sağ panel (profil, üyeler) de dar ekranda sahnenin yerini alır; geri
       düğmesi (.vxc-btn-mim-show-chat) paneli gizleyip sohbete döner. */
    .vx-app-content-home:has(> .vx-rside:not([style*="display: none"])) > .vx-main {
        display: none;
    }

    .vx-bar {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .vx-home,
    .vx-pane {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .vx-groups {
        columns: 1;
    }

    .vx-metrics {
        gap: var(--space-4);
    }
}

/* ------------------------------------------------------------------ *
 *  İskelet yükleyici (Özel Sohbetler, Genel Bakış)
 *  Listelerin içine HTML olarak konur; veri gelince kapsayıcı empty()
 *  ile temizlenip dolduğu için ayrıca kaldırılması gerekmez.
 * ------------------------------------------------------------------ */

.vx-sk {
    display: block;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--raise) 25%, var(--raise-2) 50%, var(--raise) 75%);
    background-size: 200% 100%;
    animation: vx-sk 1.4s ease-in-out infinite;
}

.vx-sk-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
}

.vx-sk-av {
    flex: none;
    width: var(--av-md);
    height: var(--av-md);
    border-radius: 50%;
}

.vx-sk-row.is-lg {
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
}

.vx-sk-row.is-lg .vx-sk-av {
    width: var(--av-lg);
    height: var(--av-lg);
}

.vx-sk-lines {
    display: grid;
    flex: 1;
    gap: 6px;
    min-width: 0;
}

.vx-sk-line {
    width: 70%;
    height: 10px;
}

.vx-sk-line.is-short {
    width: 45%;
}

.vx-sk-row:nth-child(3n + 2) .vx-sk-line:first-child {
    width: 52%;
}

.vx-sk-row:nth-child(3n) .vx-sk-line.is-short {
    width: 62%;
}

/* Favori kartı ve sunucu grubu yer tutucuları */
.vx-sk-card {
    height: 62px;
    border-radius: var(--radius-lg);
}

.vx-sk-group {
    height: 196px;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-lg);
    break-inside: avoid;
}

.vx-sk-group:nth-child(2) {
    height: 148px;
}

/* Sayı (karşılama metrikleri) */
.vx-sk-num {
    display: inline-block;
    width: 36px;
    height: 24px;
    vertical-align: middle;
}

@keyframes vx-sk {
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vx-sk {
        animation: none;
    }
}