/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* VARIABLES */
:root {
    --bg: #efefef;
    --text: #1F1F1F;
    --card: #ffffff;
    --accent: cornflowerblue;
    --muted: #888;
    --border: rgba(0,0,0,0.1);
    --hover: #d4f1ec;
    --icon: cornflowerblue;
    --loader: rgba(255, 255, 255, 0.6);
    --chat-bg: #c8daea;
    --my-bubble: #eaf3db;
    --my-bubble-text: #1F1F1F;
}

/* DARK MODE */
.dark {
    --bg: #232323;
    --text: #e4e4e4;
    --card: #434343;
    --accent: #FFC107;
    --muted: #aaaaaa;
    --border: rgba(255,255,255,0.1);
    --hover: rgba(255,255,255,0.05);
    --icon: #dfdfdf;
    --loader: rgb(0 0 0 / 56%);
    --chat-bg: #17212b;
    --my-bubble: #2b5278;
    --my-bubble-text: #e4e4e4;
}

/* BODY */
body {
    font-family: Calibri, Arial, sans-serif;
    font-size: 15px;
    line-height: 21px;
    color: var(--text);
    background: var(--bg);
}

/* LINKS */
a {
    text-decoration: none;
    color: inherit;
}

/* ICON */
i {
    font-size: 18px;
}

/* LOADER */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--accent);
    z-index: 9999;
    transition: width .25s ease, opacity .3s ease;
    opacity: 0;
    pointer-events: none;
}
#loader.show {
    opacity: 1;
    width: 70%;
    transition: width .4s cubic-bezier(.1,.6,.3,1), opacity .1s;
}
#loader.done {
    width: 100%;
    opacity: 0;
    transition: width .15s ease, opacity .3s ease .1s;
}

/* APP */
#app {
    max-width: 700px;
    margin: 0 auto;
    min-height: 250px;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* HEADER */
.tepa {
    position: sticky;
    top: 0;
    z-index: 99;
    display: flex;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    height: 52px;
    background: var(--card);
    box-shadow: 0 1px 3px var(--border);
    border-radius: 0 0 8px 8px;
}

.tepa a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    color: var(--muted);
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}

.tepa a .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.tepa i {
    font-size: 22px;
    color: var(--icon);
}

@media (hover: hover) {
    .tepa a:hover { background: var(--hover); }
}

.tepa a:active { background: var(--hover); }

/* LOGO */
.logo {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

/* NOTIFICATION */
#bildirishnoma {
    position: fixed;
    top: -50px;
    left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    z-index: 999;
    transition: top .4s ease;
}

/* PROFILE */
.fonprofil {
    background: var(--card);
    border-radius: 10px;
    margin: 10px;
    padding-bottom: 10px;
}

.avatar {
    display: flex;
    justify-content: center;
    padding-top: 15px;
}
.av-img {
    border-radius: 50%;
    object-fit: cover;
}

.av-harf {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
}

.av-chap   { float: left; }
.av-ong    { float: right; }
.av-center { margin: 0 auto; }

.avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0 2px 6px var(--border);
}

.fonism {
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    padding: 6px;
}

.fonnik {
    font-size: 20px;
    color: var(--accent);
    font-weight: bold;
    text-align: center;
}

/* TABLE MENU */
.table {
    display: flex;
    margin: 0 8px;
    font-size: 13px;
}

.table > * {
    flex: 1;
    background: var(--card);
    border-radius: 8px;
    margin: 3px;
    display: flex;
    justify-content: center;
}

.table i {
    font-size: 18px;
    color: var(--icon);
}

.table_menu {
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.table a {
    color: var(--accent);
}

@media (hover: hover) {
    .table a:hover {
        background: var(--hover);
    }
}

.table a:active {
    background: var(--hover);
}

/* POST */
.post {
    background: var(--card);
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}

.post2 {
    padding: 5px;
    font-size: 14px;
}

.xra {
    font-size: 13px;
    color: var(--muted);
}

/* MODAL */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(3px);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    background: var(--card);
    color: var(--text);
    border-radius: 14px;
    padding: 24px 20px;
    width: 280px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
}

.modal-box p {
    font-size: 15px;
    margin-bottom: 18px;
}

.modal-btns {
    display: flex;
    gap: 10px;
}

.modal-btn-ha {
    flex: 1;
    padding: 9px;
    background: #e8405a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
}

.modal-btn-yoq {
    flex: 1;
    padding: 9px;
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
}

.modal-btn-ha:hover,
.modal-btn-yoq:hover { opacity: .8; }

/* TAXRIR */
.taxrir-field {
    padding: 5px;
    margin-bottom: 4px;
}

.taxrir-input {
    width: 100%;
    padding: 8px 10px;
    margin-top: 4px;
    background: var(--bg);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box;
}

.taxrir-input:focus {
    border-color: var(--accent);
}

.taxrir-textarea {
    resize: none;
    min-height: 90px;
    line-height: 1.5;
    overflow-y: hidden;
}

.taxrir-btn {
    width: 100%;
    padding: 9px;
    background: cornflowerblue;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s;
}

.taxrir-btn:hover { opacity: .85; }
.taxrir-btn:active { opacity: .7; }

/* SAHIFA TEPA */
.sahifa-tepa {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 0;
}

.sahifa-tepa-info {
    flex: 1;
}

.sahifa-tepa-ism {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.sahifa-tepa-kichik {
    font-size: 12px;
    color: var(--muted);
}

/* ORQA TUGMA */
.orqa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 17px 7px 17px;
    margin: 0;
    background: var(--card);
    border-radius: 20px;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    box-shadow: 0 1px 3px var(--border);
    transition: color .2s, box-shadow .2s;
}

.orqa:hover  { color: var(--text); box-shadow: 0 2px 6px var(--border); }
.orqa i      { font-size: 13px; }

/* QIDIRUV */
.qidiruv-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 0 12px;
    margin-bottom: 8px;
    transition: border-color .2s;
}

.qidiruv-wrap:focus-within {
    border-color: cornflowerblue;
}

.qidiruv-wrap i {
    font-size: 13px;
    color: var(--muted);
    flex-shrink: 0;
}

.qidiruv-input {
    flex: 1;
    height: 36px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
}

.qidiruv-tozala {
    cursor: pointer;
    color: var(--muted);
    padding: 4px;
    border-radius: 50%;
    transition: color .2s;
}

.qidiruv-tozala:hover { color: var(--text); }

/* ONLINE */
.online-karta {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    background: var(--card);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 6px;
    transition: background .2s;
}

.online-karta:hover { background: var(--hover); }

.online-av {
    position: relative;
    flex-shrink: 0;
}

.online-yashil {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 11px;
    height: 11px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid var(--card);
}

.online-info {
    flex: 1;
    min-width: 0;
}

.online-ism {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.online-vaqt {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

/* RASMLAR */
.rasm-yuklash-wrap {
    margin-bottom: 10px;
}

.rasm-yuklash-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--card);
    border: 1.5px dashed var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--muted);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.rasm-yuklash-btn:hover {
    border-color: cornflowerblue;
    color: cornflowerblue;
}

.rasm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.rasm-karta {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: var(--card);
}

.rasm-karta img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rasm-asosiy-belgi {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0,0,0,.45);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
    font-size: 13px;
}

.rasm-amallar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: opacity .2s;
}

.rasm-karta:hover .rasm-amallar {
    opacity: 1;
}

/* Mobilda doim ko'rinsin */
@media (hover: none) {
    .rasm-amallar { opacity: 1; }
}

.rasm-btn-asosiy,
.rasm-btn-ochir {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: opacity .2s;
}

.rasm-btn-asosiy { background: rgba(255,255,255,.2); color: #f59e0b; }
.rasm-btn-ochir  { background: rgba(255,255,255,.2); color: #ef4444; }

.rasm-bosh {
    text-align: center;
    padding: 40px 0;
    color: var(--muted);
}

.rasm-bosh i { font-size: 40px; margin-bottom: 10px; display: block; }

/* LIGHTBOX */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.lightbox.show { display: flex; }

.lightbox img {
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
}

.lightbox-yop {
    position: absolute;
    top: 14px;
    right: 16px;
    cursor: pointer;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    opacity: .7;
    transition: opacity .2s;
}

.lightbox-yop:hover { opacity: 1; }

.chat-bosh-link {
    margin-top: 12px;
    display: inline-block;
    font-size: 13px;
    color: cornflowerblue;
    border-bottom: 1px dashed cornflowerblue;
}

/* CHAT RO'YXAT */
#chatRoyxat, #chatNatijalar { margin: 0 8px; }

.chat-karta,
.sayt-chat-karta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    transition: background .15s;
    cursor: pointer;
    background: var(--card);
}

#chatRoyxat > a:first-child .sayt-chat-karta,
#chatRoyxat > a:first-child .chat-karta,
#qidiruv-natija > a:first-child .chat-karta {
    border-radius: 7px 7px 0 0;
}
#chatRoyxat > a:last-child .sayt-chat-karta,
#chatRoyxat > a:last-child .chat-karta,
#qidiruv-natija > a:last-child .chat-karta {
    border-radius: 0 0 7px 7px;
    border-bottom: none;
}
#qidiruv-natija { margin: 0 8px; }

.chat-karta:hover,
.sayt-chat-karta:hover { background: var(--hover); }

/* Sayt chati ikonka doirasi */
.sayt-chat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: cornflowerblue;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    color: #fff;
}

.chat-av {
    position: relative;
    flex-shrink: 0;
}

.chat-av .av-img,
.chat-av .av-harf {
    border-radius: 50%;
}

.chat-info {
    flex: 1;
    min-width: 0;
}

.chat-tepa {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2px;
}

.chat-ism {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-vaqt {
    font-size: 11px;
    color: var(--muted);
    flex-shrink: 0;
}

.chat-oxirgi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.chat-oxirgi-matn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.oxirgi-ism {
    color: var(--text);
    font-weight: 500;
    margin-right: 3px;
}

.oqilmagan-badge {
    background: cornflowerblue;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* CHAT XONA */
.xona-tepa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 52px;
    z-index: 9;
}

.xona-tepa-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.xona-ism {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.xona-status {
    font-size: 12px;
    color: #22c55e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 16px;
    line-height: 16px;
}

.xabarlar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.xabarlar::-webkit-scrollbar {
    display: none;
}

.xabar-bosh {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
    pointer-events: none;
}

.xabar-qator {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.xabar-qator.mening {
    flex-direction: row-reverse;
}

.xabar-av {
    flex-shrink: 0;
    width: 36px;
}

.xabar-bubble {
    max-width: 75%;
    padding: 8px 12px 4px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.5;
    position: relative;
    word-break: break-word;
}

/* Xabar pastki qator: reaksiyalar chap, vaqt o'ng */
.xabar-alt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}
.xabar-alt .xabar-vaqt {
    display: inline;
    text-align: right;
    flex-shrink: 0;
    margin-left: auto;
}

/* Reaksiya chiplari */
.xabar-reaksiyalar {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.xr-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    border-radius: 10px;
    padding: 1px 5px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    opacity: .85;
    transition: opacity 0.12s;
    vertical-align: middle;
}
.xr-chip b { font-size: 12px; font-weight: 600; line-height: 1; }
.xr-chip.men { opacity: 1; }
.xr-chip.men b { color: #6366f1; }
.xr-chip:hover { opacity: 1; }
.xr-chip .em-big { font-size: inherit; line-height: inherit; vertical-align: inherit; }

/* Reaksiya ro'yxati modali */
#reaksiyaModalBox {
    position: relative;
    z-index: 1;
    background: var(--card);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 480px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 0 16px 24px;
}
.rxm-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
    margin-bottom: 10px;
    letter-spacing: .01em;
    position: sticky;
    top: 0;
    background: var(--card);
}
.rxm-guruh { margin-bottom: 14px; }
.rxm-sarlavha {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    padding: 4px 0 6px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.08));
    margin-bottom: 4px;
}
.rxm-sarlavha b { font-size: 13px; font-weight: 500; opacity: .6; margin-left: 4px; }
.rxm-ism {
    font-size: 14px;
    color: var(--text);
    padding: 8px 4px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,.05));
    cursor: pointer;
    border-radius: 6px;
    transition: background .12s;
}
.rxm-ism:hover { background: var(--bg); }

.mening .xabar-bubble {
    background: var(--my-bubble);
    color: var(--my-bubble-text);
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.uning .xabar-bubble {
    background: var(--card);
    color: var(--text);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.em-big { font-size: 1.6em; line-height: 1.1; vertical-align: -0.15em; }
.xabar-vaqt {
    font-size: 10px;
    opacity: .7;
    white-space: nowrap;
    display: block;
    text-align: right;
}
.xabar-tick {
    font-size: 10px;
    width: 14px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin-left: 1px;
    opacity: 0.5;
}
.xabar-tick.oqildi {
    opacity: 1;
    color: #4db6f7;
}

.xabar-ism {
    font-size: 13px;
    font-weight: 600;
    color: cornflowerblue;
    margin-bottom: 3px;
}


.xabar-cit {
    font-size: 13px;
    padding: 5px 8px;
    margin-bottom: 5px;
    border-radius: 8px;
    border-left: 3px solid rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.1);
    opacity: 0.85;
    overflow: hidden;
    max-width: 220px;
}

.xabar-cit-ism {
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xabar-cit-matn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uning .xabar-cit {
    border-left-color: cornflowerblue;
    background: rgba(100,100,255,0.07);
}

/* XABAR INPUT */
.xabar-input-wrap {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    position: fixed;
    bottom: 8px;
    left: max(8px, calc(50vw - 342px));
    right: max(8px, calc(50vw - 342px));
    z-index: 10;
    box-shadow: none;
}

body.chat-xona footer,
body.chat-xona .tepa {
    display: none !important;
}

body.chat-xona {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body.chat-xona main {
    padding: 0;
    margin: 0;
}

body.chat-xona .xona-tepa {
    position: fixed;
    top: 0;
    left: max(0px, calc(50vw - 350px));
    right: max(0px, calc(50vw - 350px));
    z-index: 20;
}

body.chat-xona .xabarlar {
    position: fixed;
    top: 55px;
    left: max(0px, calc(50vw - 350px));
    right: max(0px, calc(50vw - 350px));
    bottom: 0;
    overflow-y: auto;
    padding: 10px 10px 74px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: var(--chat-bg);
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='38' cy='32' rx='28' ry='16' fill='rgba(255,255,255,0.13)' transform='rotate(-35 38 32)'/%3E%3Cellipse cx='140' cy='60' rx='34' ry='18' fill='rgba(255,255,255,0.1)' transform='rotate(20 140 60)'/%3E%3Cellipse cx='170' cy='155' rx='26' ry='14' fill='rgba(255,255,255,0.12)' transform='rotate(-50 170 155)'/%3E%3Cellipse cx='55' cy='148' rx='32' ry='17' fill='rgba(255,255,255,0.09)' transform='rotate(25 55 148)'/%3E%3Cellipse cx='100' cy='100' rx='20' ry='11' fill='rgba(255,255,255,0.07)' transform='rotate(10 100 100)'/%3E%3Cellipse cx='10' cy='95' rx='18' ry='10' fill='rgba(255,255,255,0.08)' transform='rotate(-20 10 95)'/%3E%3Cellipse cx='185' cy='20' rx='22' ry='12' fill='rgba(255,255,255,0.1)' transform='rotate(40 185 20)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* Xona operatsiyalari tugmasi */
.xona-ops-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--text);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.xona-ops-btn:hover {
    background: var(--hover);
}

/* Xona ops dropdown menyusi */
.xona-ops-menyu {
    position: fixed;
    z-index: 50;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    flex-direction: column;
    min-width: 210px;
    overflow: hidden;
}

.xom-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    cursor: pointer;
    color: var(--text);
    transition: background 0.15s;
}

.xom-item:hover {
    background: var(--hover);
}

.xom-item i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    color: var(--muted);
}

.xom-blok { color: #f59e0b; }
.xom-blok i { color: #f59e0b; }

.xom-ochir { color: #e8405a; }
.xom-ochir i { color: #e8405a; }

/* Xabar menyusi */
.xabar-menyu-fon {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.xabar-menyu {
    position: fixed;
    z-index: 100;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    flex-direction: column;
    min-width: 170px;
    overflow: hidden;
}

/* Emoji qatori (menyu tepasida) */
.xm-emoji-qator {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    gap: 4px;
}
.xm-emoji {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 6px;
    transition: background 0.12s, transform 0.12s;
    line-height: 1;
}
.xm-emoji:hover { background: var(--hover); transform: scale(1.2); }
.xm-emoji:active { transform: scale(0.95); }

.xm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    transition: background 0.15s;
}

.xm-item:hover {
    background: var(--hover);
}

.xm-item i {
    font-size: 14px;
    width: 16px;
    text-align: center;
    color: var(--muted);
}

.xm-ochir {
    color: #e8405a;
}

.xm-ochir i {
    color: #e8405a;
}

/* Pastga scroll tugmasi — o'ng yuqori */

.pastga-btn {
    position: fixed;
    top: 60px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card);
    color: var(--text);
    border: 1.5px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 18;
}

/* Yangi xabar badge — pastda markaz */
.yangi-xabar-badge {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 50;
    white-space: nowrap;
}

.mode-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
    background: color-mix(in srgb, var(--card) 45%, transparent);
    border-radius: 12px 12px 0 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mode-bar-chiziq {
    width: 3px;
    min-height: 36px;
    border-radius: 3px;
    flex-shrink: 0;
}

.mode-bar-info {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mode-bar-nom {
    font-size: 13px;
    font-weight: 600;
}

.mode-bar-matn {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mode-bar-yop {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 4px;
    font-size: 16px;
    flex-shrink: 0;
}

.mode-bar-qator {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    box-sizing: border-box;
}

/* Bloklangan bildirim */
.lichka-yopiq-banner {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--muted);
    background: transparent;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.lichka-yopiq-banner i {
    font-size: 12px;
    opacity: .6;
}

.blok-bildirim {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: var(--muted);
    background: var(--bg);
    border-radius: 12px;
    text-align: center;
}

.blok-bildirim i {
    color: #e8405a;
    font-size: 14px;
}

.blok-dan-olish-btn {
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    border: none;
}

.blok-dan-olish-btn:hover {
    background: var(--hover);
}

.blok-dan-olish-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.xabar-input-quti {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 22px;
    padding: 0 6px;
    min-height: 42px;
    box-sizing: border-box;
}

.xabar-input {
    flex: 1;
    height: 40px;
    min-height: 40px;
    max-height: 200px;
    padding: 10px 6px;
    box-sizing: border-box;
    background: transparent;
    border: none;
    font-size: 15px;
    font-family: inherit;
    color: var(--text);
    outline: none;
    resize: none;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    line-height: 20px;
}

.xabar-input:focus { outline: none; }
.xabar-input::-webkit-scrollbar { display: none; }

.xabar-yuborish {
    width: 40px;
    height: 40px;
    background: cornflowerblue;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s;
    flex-shrink: 0;
}

.xabar-yuborish:hover { opacity: .85; }

.emoji-btn {
    width: 36px;
    height: 40px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--muted);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color .15s, background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.emoji-btn:hover  { color: cornflowerblue; }
.emoji-btn:active { transform: scale(.92); }
.emoji-btn.aktif  { color: cornflowerblue; }

.attach-btn {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border: none; background: none; cursor: pointer;
    color: var(--muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; transition: color .15s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.attach-btn:hover  { color: var(--accent); }
.attach-btn:active { transform: scale(.9); }

/* Attach menyu */
.attach-menu {
    position: fixed;
    z-index: 50;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.attach-menu-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: none;
    background: none;
    font-size: 14px;
    font-family: inherit;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background .12s;
}
.attach-menu-btn:hover { background: var(--hover); }
.attach-menu-btn i { width: 16px; color: var(--accent); }

/* Ovoz yozish indikatori */
.ovoz-indikator {
    position: fixed;
    z-index: 50;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    font-size: 13px;
    color: var(--text);
    pointer-events: none;
}
.ovoz-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #e11d48;
    flex-shrink: 0;
    animation: ovoz-yilt 1s infinite;
}
@keyframes ovoz-yilt {
    0%,100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
.ovoz-timer { font-weight: 600; font-size: 14px; min-width: 32px; }
.ovoz-tolqin {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 20px;
}
.ovoz-tolqin span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: cornflowerblue;
    animation: ovoz-dalga 0.8s infinite ease-in-out;
}
.ovoz-tolqin span:nth-child(1) { height: 6px;  animation-delay: 0s; }
.ovoz-tolqin span:nth-child(2) { height: 12px; animation-delay: .1s; }
.ovoz-tolqin span:nth-child(3) { height: 18px; animation-delay: .2s; }
.ovoz-tolqin span:nth-child(4) { height: 12px; animation-delay: .3s; }
.ovoz-tolqin span:nth-child(5) { height: 6px;  animation-delay: .4s; }
@keyframes ovoz-dalga {
    0%,100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.3); }
}
.ovoz-hint { font-size: 11px; color: var(--muted); }

/* Ovoz player (modal va chat ichida) */
.xov-player {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    border-radius: 12px;
    padding: 10px 12px;
}
.xov-play-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: cornflowerblue;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: opacity .15s;
}
.xov-play-btn:active { opacity: .75; }
.xov-bar-wrap {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
}
.xov-bar {
    height: 100%;
    background: cornflowerblue;
    border-radius: 2px;
    width: 0%;
    transition: width .1s linear;
}
.xov-muddat { font-size: 12px; color: var(--muted); min-width: 30px; text-align: right; }

/* Chatda audio/ovoz xabar */
.xabar-ovoz {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    min-width: 180px;
    max-width: 260px;
}
.xabar-bubble.has-ovoz { padding: 8px 10px; }

/* Chat rasm */
.xabar-bubble.has-rasm { padding: 4px 4px 4px; }
.xabar-bubble.has-rasm .xabar-ism,
.xabar-bubble.has-rasm .xabar-cit { margin: 0 4px 4px; }
.xabar-rasm { cursor: pointer; line-height: 0; border-radius: 12px; overflow: hidden; }
.chat-rasm  { max-width: 260px; max-height: 320px; width: 100%; height: auto;
              display: block; object-fit: contain; }
.xabar-bubble.has-rasm .xabar-alt { margin: 2px 4px 0; }
.xabar-video { border-radius: 12px; overflow: hidden; margin-bottom: 4px; max-width: 480px; max-height: 420px; }
.chat-video  { width: 100%; height: 100%; display: block; }
.video-yuklanmoqda { display:flex; align-items:center; gap:8px; padding:8px 4px 6px; min-width:160px; }
.vyu-qator  { flex:1; height:4px; background:var(--border,#e5e7eb); border-radius:4px; overflow:hidden; }
.vyu-chiziq { height:100%; background:var(--accent,#6366f1); border-radius:4px; transition:width .4s; width:0%; }
.vyu-foiz   { font-size:11px; color:var(--muted,#888); flex-shrink:0; min-width:28px; }
.vyu-katta  { font-size:12px; color:var(--muted,#888); }
.xabar-gif { line-height: 0; border-radius: 12px; overflow: hidden; position: relative; display: inline-block; }
.chat-gif   { max-width: 260px; max-height: 280px; width: 100%; height: auto; display: block; border-radius: 12px; }
.xabar-bubble.has-rasm > br + * ,
.xabar-bubble.has-rasm > .em-big,
.xabar-bubble.has-rasm > span:not(.xabar-vaqt) { padding: 0 6px; }

/* ── EMOJI PANEL ── */
.emoji-panel {
    position: fixed;
    bottom: 0;
    left: max(0px, calc(50vw - 350px));
    right: max(0px, calc(50vw - 350px));
    background: var(--card);
    border-top: 1.5px solid var(--border);
    z-index: 8;
    height: 0;
    overflow: hidden;
    transition: height .22s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
}
.emoji-panel.ochiq {
    height: 300px;
}
.emoji-cats-bar {
    display: flex;
    gap: 2px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--card);
}
.emoji-cats-bar::-webkit-scrollbar { display: none; }
.emoji-cat {
    flex-shrink: 0;
    padding: 5px 8px;
    font-size: 20px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity .15s, background .15s;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.emoji-cat.active { opacity: 1; background: var(--hover); }
.emoji-cat:hover  { opacity: 1; }
.emoji-setkasi {
    display: flex;
    flex-wrap: wrap;
    padding: 4px 6px calc(10px + env(safe-area-inset-bottom)) 6px;
    overflow-y: auto;
    height: calc(300px - 48px);
    scrollbar-width: thin;
    align-content: flex-start;
}
.emoji-setkasi button {
    font-size: 24px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .1s, transform .1s;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}
.emoji-setkasi button:hover  { background: var(--hover); transform: scale(1.18); }
.emoji-setkasi button:active { transform: scale(1.0); }

/* ERROR */
.err404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 20px;
    flex: 1;
}

.err404-kod {
    font-size: 64px;
    color: var(--border);
    margin-bottom: 12px;
    display: block;
}

.err404-matn {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.err404-kichik {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 24px;
}

.err404-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: cornflowerblue;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .2s;
}

.err404-btn:hover { opacity: .85; }










footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 700px;
    width: calc(100% - 24px);
    margin: 20px auto 16px;
    padding: 10px 16px;
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.f-brand {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
    font-family: 'Playfair Display', serif;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.f-brand em {
    font-style: normal;
    color: cornflowerblue;
}

.f-divider {
    width: 1px;
    height: 16px;
    background: var(--border);
    flex-shrink: 0;
}

.f-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 20px;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.f-btn i { font-size: 14px; }

@media (hover: hover) {
    .f-btn:hover { background: var(--hover); color: var(--accent); }
}
.f-btn:active { background: var(--hover); color: var(--accent); }

/* ── PANEL (/panel/) ── */
.pn { padding: 12px; overflow-x: hidden; }
.pn-salom { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pn-salom-txt h2 { font-size: 15px; font-weight: 700; margin: 0 0 1px; }
.pn-salom-txt p { font-size: 12px; color: var(--muted); margin: 0; }
.pn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 18px; }
.pn-stat { background: var(--card); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; text-decoration: none; color: inherit; display: block; transition: background .15s; border: 1.5px solid transparent; }
.pn-stat:hover { background: var(--hover); border-color: var(--border); }
.pn-stat-son { font-size: 26px; font-weight: 800; line-height: 1.1; margin-bottom: 4px; }
.pn-stat-nom { font-size: 11px; color: var(--muted); line-height: 1.3; }
.pn-stat i { font-size: 16px; margin-bottom: 6px; display: block; }
.pn-bolim-bash { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.pn-bolimlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.pn-bol { background: var(--card); border-radius: 12px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; color: inherit; transition: background .15s; border: 1.5px solid var(--border); text-align: center; }
.pn-bol:hover { background: var(--hover); }
.pn-bol-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.pn-bol-nom { font-size: 13px; font-weight: 600; }
.pn-bol-izoh { font-size: 11px; color: var(--muted); margin-top: 1px; }
.pn-tez { font-size: 10px; color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 1px 5px; display: inline-block; margin-top: 2px; }

/* ── PANEL USERLAR (/panel/userlar) ── */
.pu { padding: 12px; }
.pu-tepa { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pu-tepa h2 { font-size: 16px; font-weight: 700; margin: 0; flex: 1; }
.pu-qidiruv { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 10px; padding: 8px 12px; border: 1.5px solid var(--border); margin-bottom: 10px; }
.pu-qidiruv input { flex: 1; border: none; background: none; outline: none; font-size: 14px; color: var(--text); }
.pu-qidiruv i { color: var(--muted); font-size: 14px; }
.pu-sort { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; padding-bottom: 2px; }
.pu-sort::-webkit-scrollbar { display: none; }
.pu-sort-btn { padding: 5px 12px; border-radius: 20px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font-size: 12px; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s; }
.pu-sort-btn.aktif { background: var(--accent); color: #fff; border-color: var(--accent); }
.pu-info { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.pu-list { display: flex; flex-direction: column; gap: 6px; }
.pu-karta { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: inherit; transition: background .15s; border: 1.5px solid transparent; }
.pu-karta:hover { background: var(--hover); border-color: var(--border); }
.pu-info-blok { flex: 1; min-width: 0; }
.pu-ism { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pu-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.pu-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.pu-badge { font-size: 10px; padding: 2px 6px; border-radius: 20px; background: var(--hover); color: var(--accent); border: 1px solid var(--border); font-weight: 600; }
.pu-badge.super { background: #fef9c3; color: #a16207; border-color: #fde68a; }
.dark .pu-badge.super { background: #3b2a04; color: #fbbf24; border-color: #92400e; }
.pu-id { font-size: 11px; color: var(--muted); flex-shrink: 0; text-align: right; }
.pu-page { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.pu-page a, .pu-page span { padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--card); font-size: 13px; text-decoration: none; color: var(--text); transition: background .15s; }
.pu-page a:hover { background: var(--hover); }
.pu-page span.aktif { background: var(--accent); color: #fff; border-color: var(--accent); }
.pu-bosh { text-align: center; padding: 40px 20px; color: var(--muted); }
.pu-bosh i { font-size: 32px; opacity: .3; display: block; margin-bottom: 8px; }

/* ── PANEL JURNAL (/panel/jurnal) ── */
.jn { padding: 12px; }
.jn-tepa { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.jn-tepa h2 { font-size: 16px; font-weight: 700; margin: 0; flex: 1; }
.jn-info { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.jn-list { display: flex; flex-direction: column; gap: 6px; }
.jn-qator { background: var(--card); border-radius: 12px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--border); }
.jn-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.jn-kontent { flex: 1; min-width: 0; }
.jn-admin { font-size: 13px; font-weight: 600; }
.jn-izoh { font-size: 13px; color: var(--text); margin-top: 2px; }
.jn-target { color: var(--accent); font-weight: 600; }
.jn-vaqt { font-size: 11px; color: var(--muted); margin-top: 3px; }
.jn-bosh { text-align: center; padding: 40px; color: var(--muted); }
.jn-bosh i { font-size: 32px; opacity: .3; display: block; margin-bottom: 8px; }
.jn-page { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.jn-page a, .jn-page span { padding: 6px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--card); font-size: 13px; text-decoration: none; color: var(--text); }
.jn-page a:hover { background: var(--hover); }
.jn-page span.aktif { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── LICHKALAR PANEL ── */
.lc-profil-qator { display: flex; align-items: center; gap: 10px; background: var(--hover); border-radius: 10px; padding: 8px 10px; text-decoration: none; color: inherit; transition: background .15s; }
.lc-profil-qator:hover { background: var(--border); }
.lc-profil-info { flex: 1; min-width: 0; }
.lc-profil-ism { font-size: 13px; font-weight: 600; }
.lc-profil-preview { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-qidiruv { display: flex; gap: 6px; margin-bottom: 12px; }
.lc-qidiruv-input { flex: 1; background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--text); outline: none; }
.lc-qidiruv-input:focus { border-color: var(--accent); }
.lc-qidiruv-btn { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 0 14px; font-size: 14px; cursor: pointer; }
.lc-qidiruv-tozala { display: flex; align-items: center; justify-content: center; width: 36px; background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14px; }
.lc-list { display: flex; flex-direction: column; gap: 6px; }
.lc-qator { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid var(--border); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: inherit; transition: background .15s; }
.lc-qator:hover { background: var(--hover); }
.lc-avatarlar { display: flex; flex-shrink: 0; }
.lc-av-wrap { border-radius: 50%; border: 2px solid var(--bg); }
.lc-info { flex: 1; min-width: 0; }
.lc-ismlar { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-ajrat { color: var(--muted); font-weight: 400; font-size: 11px; }
.lc-preview { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc-sana { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.lc-azol-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--card); border: 1.5px solid var(--border); border-radius: 20px; padding: 2px 8px 2px 4px; font-size: 12px; color: inherit; text-decoration: none; }
.lc-azol-chip:hover { background: var(--hover); }
.lc-xabarlar { display: flex; flex-direction: column; gap: 6px; }
.lc-xabar-qator { display: flex; gap: 8px; align-items: flex-end; max-width: 100%; }
.lc-chap { justify-content: flex-start; }
.lc-ong  { justify-content: flex-end; }
.lc-av { flex-shrink: 0; }
.lc-chap .lc-bubble { background: var(--card); border: 1.5px solid var(--border); border-radius: 4px 14px 14px 14px; max-width: 72%; }
.lc-ong  .lc-bubble { background: var(--accent-soft, #ede9fe); border: 1.5px solid var(--accent-soft-border, #ddd6fe); border-radius: 14px 4px 14px 14px; max-width: 72%; }
.dark .lc-ong .lc-bubble { background: #2e1f5e; border-color: #4c3a8a; }
.lc-bubble { padding: 7px 11px; min-width: 0; }
.lc-ism { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.lc-ism a { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
.lc-vaqt { font-size: 10px; color: var(--muted); }
.lc-matn { font-size: 13px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }

/* ── ADMIN INDEX (/admin/) ── */
.adm-wrap { display: flex; height: calc(100dvh - 52px); overflow: hidden; }
.adm-chap { width: 320px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--card); }
.adm-ong { flex: 1; overflow-y: auto; background: var(--bg); }
.adm-tepa { padding: 14px 14px 10px; border-bottom: 1px solid var(--border); }
.adm-tepa h2 { font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.adm-qidiruv { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 10px; padding: 8px 12px; border: 1.5px solid var(--border); }
.adm-qidiruv input { flex: 1; border: none; background: none; outline: none; font-size: 14px; color: var(--text); }
.adm-qidiruv i { color: var(--muted); font-size: 14px; }
.adm-list { flex: 1; overflow-y: auto; }
.adm-karta { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .15s; }
.adm-karta:hover, .adm-karta.aktif { background: var(--hover); }
.adm-karta-info { flex: 1; min-width: 0; }
.adm-karta-ism { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-karta-login { font-size: 12px; color: var(--muted); margin-top: 1px; }
.adm-karta-badge { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.adm-badge { font-size: 10px; padding: 2px 6px; border-radius: 20px; background: var(--hover); color: var(--accent); font-weight: 600; border: 1px solid var(--border); }
.adm-badge.super { background: #fef9c3; color: #a16207; border-color: #fde68a; }
.dark .adm-badge.super { background: #3b2a04; color: #fbbf24; border-color: #92400e; }
.adm-detail { padding: 20px; }
.adm-bosh { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 60px 20px; color: var(--muted); text-align: center; gap: 12px; }
.adm-bosh i { font-size: 40px; opacity: .3; }
.adm-user-tepa { display: flex; align-items: center; gap: 14px; background: var(--card); border-radius: 14px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.adm-user-info { flex: 1; min-width: 0; }
.adm-user-ism { font-size: 17px; font-weight: 700; }
.adm-user-login { font-size: 13px; color: var(--muted); margin-top: 2px; }
.adm-user-id { font-size: 11px; color: var(--muted); margin-top: 2px; }
.adm-sektsiya { background: var(--card); border-radius: 14px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.adm-sek-tepa { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; user-select: none; }
.adm-sek-tepa i.sek-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.adm-sek-tepa .sek-icon.yashil { background: #dcfce7; color: #16a34a; }
.dark .adm-sek-tepa .sek-icon.yashil { background: #14532d; color: #4ade80; }
.adm-sek-tepa .sek-icon.sariq { background: #fef9c3; color: #ca8a04; }
.dark .adm-sek-tepa .sek-icon.sariq { background: #3b2a04; color: #fbbf24; }
.adm-sek-tepa .sek-icon.ko { background: #ede9fe; color: #7c3aed; }
.dark .adm-sek-tepa .sek-icon.ko { background: #2e1065; color: #a78bfa; }
.adm-sek-tepa .sek-icon.qizil { background: #fee2e2; color: #dc2626; }
.dark .adm-sek-tepa .sek-icon.qizil { background: #450a0a; color: #f87171; }
.adm-sek-nom { flex: 1; font-size: 14px; font-weight: 600; }
.adm-sek-arrow { color: var(--muted); font-size: 12px; transition: transform .2s; }
.adm-sek-body { padding: 0 16px 16px; display: none; }
.adm-sektsiya.ochiq .adm-sek-body { display: block; }
.adm-sektsiya.ochiq .adm-sek-arrow { transform: rotate(180deg); }
.adm-field { margin-bottom: 10px; }
.adm-field label { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: block; }
.adm-field input, .adm-field textarea, .adm-field select { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; transition: border .15s; }
.adm-field input:focus, .adm-field textarea:focus { border-color: var(--accent); }
.adm-field textarea { resize: none; min-height: 70px; }
.adm-field .parol-wrap { position: relative; }
.adm-field .parol-wrap input { padding-right: 40px; }
.adm-field .parol-koz { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; }
.adm-btn { padding: 9px 18px; border-radius: 8px; border: none; font-size: 14px; font-family: inherit; cursor: pointer; transition: opacity .15s; font-weight: 500; }
.adm-btn.asosiy { background: var(--accent); color: #fff; }
.adm-btn.asosiy:hover { opacity: .85; }
.adm-btn.xavfli { background: #ef4444; color: #fff; }
.adm-btn.xavfli:hover { opacity: .85; }
.adm-btn:disabled { opacity: .5; cursor: default; }
.adm-dostup-list { display: flex; flex-direction: column; gap: 6px; }
.adm-dostup-qator { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1.5px solid var(--border); }
.adm-dostup-qator.yoq { opacity: .55; }
.adm-dostup-info { flex: 1; }
.adm-dostup-nom { font-size: 14px; font-weight: 600; }
.adm-dostup-izoh { font-size: 12px; color: var(--muted); margin-top: 1px; }
.adm-toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.adm-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.adm-toggle-slider { position: absolute; inset: 0; border-radius: 24px; background: var(--border); cursor: pointer; transition: background .2s; }
.adm-toggle-slider:before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .2s; }
.adm-toggle input:checked + .adm-toggle-slider { background: var(--accent); }
.adm-toggle input:checked + .adm-toggle-slider:before { transform: translateX(18px); }
.adm-toggle input:disabled + .adm-toggle-slider { cursor: default; opacity: .5; }
@media (max-width: 640px) {
    .adm-wrap { flex-direction: column; height: auto; overflow: visible; }
    .adm-chap { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
    .adm-list { max-height: 50vh; }
    .adm-ong { min-height: 50vh; }
    .adm-detail { padding: 12px; }
}

/* ── PROFIL ADMIN BLOKI (index.php) ── */
.ap-wrap { margin: 10px; border-radius: 14px; overflow: hidden; border: 1.5px solid rgba(239,68,68,.25); background: var(--card); }
.ap-tepa { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; user-select: none; background: rgba(239,68,68,.06); }
.ap-tepa i.ap-icon { color: #ef4444; }
.ap-tepa-nom { flex: 1; font-size: 14px; font-weight: 700; color: #ef4444; }
.ap-tepa-arrow { color: var(--muted); font-size: 12px; transition: transform .2s; }
.ap-body { display: none; padding: 14px; }
.ap-wrap.ochiq .ap-body { display: block; }
.ap-wrap.ochiq .ap-tepa-arrow { transform: rotate(180deg); }
.ap-sek { background: var(--card); border-radius: 12px; margin-bottom: 10px; overflow: hidden; border: 1.5px solid var(--border); }
.ap-sek:last-child { margin-bottom: 0; }
.ap-sek-tepa { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; user-select: none; }
.ap-sek-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.ap-sek-nom { flex: 1; font-size: 13px; font-weight: 600; }
.ap-sek-arrow { color: var(--muted); font-size: 11px; transition: transform .2s; }
.ap-sek-body { padding: 0 14px 14px; display: none; }
.ap-sek.ochiq .ap-sek-body { display: block; }
.ap-sek.ochiq .ap-sek-arrow { transform: rotate(180deg); }
.ap-field { margin-bottom: 10px; }
.ap-field label { font-size: 12px; color: var(--muted); margin-bottom: 4px; display: block; }
.ap-field input, .ap-field textarea, .ap-field select { width: 100%; padding: 8px 11px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--card); color: var(--text); font-size: 14px; font-family: inherit; outline: none; box-sizing: border-box; }
.ap-field input:focus, .ap-field textarea:focus { border-color: #ef4444; }
.ap-field textarea { resize: none; min-height: 60px; }
.ap-field .ap-parol-wrap { position: relative; }
.ap-field .ap-parol-wrap input { padding-right: 38px; }
.ap-field .ap-parol-koz { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
.ap-btn { padding: 8px 16px; border-radius: 8px; border: none; font-size: 14px; font-family: inherit; cursor: pointer; transition: opacity .15s; font-weight: 500; background: #ef4444; color: #fff; }
.ap-btn:hover { opacity: .85; }
.ap-btn:disabled { opacity: .5; cursor: default; }
.ap-dostup-list { display: flex; flex-direction: column; gap: 6px; }
.ap-dostup-qator { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--border); }
.ap-dostup-info { flex: 1; }
.ap-dostup-nom { font-size: 13px; font-weight: 600; }
.ap-dostup-izoh { font-size: 11px; color: var(--muted); margin-top: 1px; }
.ap-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.ap-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ap-toggle-slider { position: absolute; inset: 0; border-radius: 22px; background: var(--border); cursor: pointer; transition: background .2s; }
.ap-toggle-slider:before { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .2s; }
.ap-toggle input:checked + .ap-toggle-slider { background: #ef4444; }
.ap-toggle input:checked + .ap-toggle-slider:before { transform: translateX(18px); }
.ap-toggle input:disabled + .ap-toggle-slider { cursor: default; opacity: .5; }

/* ── DESKTOP: chat yozuvlarini kattalash ── */
@media (min-width: 600px) {
    .xabar-bubble   { font-size: 16px; }
    .xabar-input    { font-size: 16px; }
    .xabar-ism      { font-size: 14px; }
    .xabar-vaqt     { font-size: 11px; }
    .xona-ism       { font-size: 17px; }
    .xona-status    { font-size: 13px; }
    .xabar-av       { width: 40px; }
    .xabar-av .av-img,
    .xabar-av .av-harf { width: 40px !important; height: 40px !important; font-size: 17px !important; }
}

/* ── ONLINE PANEL ── */
.online-panel {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 700px;
    max-height: 70vh;
    background: var(--card);
    border-radius: 18px 18px 0 0;
    z-index: 150;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
}
.online-panel.ochiq {
    transform: translateX(-50%) translateY(0);
}
.online-panel-tepa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.online-panel-yop {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.online-list {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0 16px;
}
.online-yuklanmoqda {
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 20px;
}
.online-user-qator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.online-user-qator:hover { background: var(--hover); }
.online-user-ism {
    font-size: 14px;
    font-weight: 500;
}
.online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid var(--card);
}
.online-fon {
    position: fixed;
    inset: 0;
    z-index: 149;
    background: rgba(0,0,0,.35);
}

/* ── QURILMA MA'LUMOTLARI ── */
.ap-qurilma-list { display: flex; flex-direction: column; gap: 8px; }
.ap-qurilma-qator { display: flex; gap: 10px; align-items: baseline; }
.ap-qurilma-kalit { font-size: 12px; color: var(--muted); min-width: 52px; flex-shrink: 0; }
.ap-qurilma-qiymat { font-size: 13px; color: var(--text); }

/* ── IP QIDIRUV ── */
.ap-ip-link { cursor: pointer; color: var(--accent); }
.ap-ip-user-qator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    text-decoration: none;
    color: inherit;
    transition: background .15s;
}
.ap-ip-user-qator:hover { background: var(--hover); }

/* ── SESSIYALAR ── */
.ap-sess-list { display: flex; flex-direction: column; gap: 8px; }
.ap-sess-qator { display: flex; align-items: flex-start; gap: 8px; padding: 8px; background: var(--bg); border-radius: 8px; }
.ap-sess-info { flex: 1; min-width: 0; }
.ap-sess-qurilma { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.ap-sess-meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.ap-sess-ua { font-size: 10px; color: var(--muted); word-break: break-all; line-height: 1.4; }
.ap-sess-yop { background: none; border: none; color: #ef4444; cursor: pointer; padding: 4px 6px; border-radius: 6px; flex-shrink: 0; font-size: 14px; }
.ap-sess-yop:hover { background: #fee2e2; }

/* ── FOYDALANUVCHI BELGILARI ── */
.usr-ban-icon   { color: #ef4444; font-size: 18px; margin-right: 5px; margin-left: 1px; }
.usr-super-icon { color: #f59e0b; font-size: 18px; margin-right: 5px; margin-left: 1px; }
.usr-admin-icon { color: var(--accent); font-size: 18px; margin-right: 5px; margin-left: 1px; }

/* ── KULGICHLAR ── */
.emoji-tabs-bar { display: flex; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; width: 100%; }
.emoji-tab { background: none; border: none; font-size: 14px; cursor: pointer; padding: 5px 12px; border-radius: 8px 8px 0 0; color: var(--muted); line-height: 1; white-space: nowrap; }
.emoji-tab.aktif { background: var(--bg); color: var(--text); font-weight: 600; }
#kulgichBolimBar .emoji-cat { font-size: 11px; padding: 4px 10px; border-radius: 20px; background: rgba(128,128,128,0.15); color: var(--text); border: none; font-weight: 500; white-space: nowrap; }
#kulgichBolimBar .emoji-cat.active { background: var(--accent); color: #fff; }
.k-karta {
    width: 50px !important; height: 50px !important;
    padding: 5px; background: none; border: none; cursor: pointer;
    border-radius: 8px; line-height: 1; transition: background .15s;
    display: flex !important; align-items: center; justify-content: center;
    flex-shrink: 0; transform: none !important;
}
.k-karta:hover { background: var(--hover); transform: none !important; }
.k-karta .kulgich-img,
.k-karta img { max-width: 40px; max-height: 40px; object-fit: contain; display: block; width: auto; height: auto; }
#kulgichSetkasi { gap: 2px; padding: 6px; }
.kulgich-img { display: inline-block; vertical-align: middle; }

/* GIF tab */
#emojiTabGif { display: none; flex-direction: column; flex: 1; min-height: 0; }
.gif-setkasi { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 3px; padding: 4px 6px 8px; overflow-y: auto; scrollbar-width: thin; flex: 1; min-height: 0; }
.gif-karta { background: none; border: none; padding: 0; cursor: pointer; border-radius: 5px; overflow: hidden; display: block; width: calc(33.33% - 2px); flex-shrink: 0; }
.gif-karta img { width: 100%; border-radius: 5px; display: block; max-height: 100px; object-fit: cover; }
.gif-karta:hover img { opacity: .85; }
.gif-kopr-btn { width: 100%; padding: 8px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ── Global Audio Mini Player ────────────────────────────── */
#globalPlayer {
    display: none;
    position: fixed;
    top: 58px;
    left: max(8px, calc(50vw - 346px));
    right: max(8px, calc(50vw - 346px));
    z-index: 98;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    height: 30px;
}
body.gp-on #globalPlayer { display: flex; }

/* Chat xonasida player xona-tepa tagiga */
body.chat-xona #globalPlayer { top: 61px; z-index: 21; }

/* Konf panel ochiq bo'lsa player siljimaydi (panel overlay) */


/* Chat xonasida player ustma-ust (xabarlar siljimaydi) */

/* Oddiy sahifalarda — kontent pastga siljiydi */
body.gp-on:not(.chat-xona) #app {padding-top: 35px;}

#gpPlayBtn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    color: cornflowerblue;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}
#gpPlayBtn:active { opacity: .8; }

#gpBarWrap {
    flex: 1; height: 4px; background: var(--border);
    border-radius: 2px; overflow: hidden; cursor: pointer;
    position: relative;
}
#gpBarFill {
    height: 100%; width: 0%; background: cornflowerblue;
    border-radius: 2px; transition: width .1s linear;
    pointer-events: none;
}

#gpTimeEl {
    font-size: 11px; color: var(--muted);
    min-width: 28px; text-align: right; flex-shrink: 0;
}

#gpCloseBtn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: cornflowerblue;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#gpCloseBtn:active { opacity: .8; }

/* ══ AUDIO KONFERENSIYA PANEL ══════════════════════════════ */

/* Eski konfBar endi ishlatilmaydi */
#konfBar { display: none !important; }

@keyframes konfPulse { 0%,100%{opacity:1} 50%{opacity:.35} }


/* ── Chat xonasidagi headset tugmasi ────────────────────── */
.konf-xona-btn {
    display: none;
    position: relative;
    color: #4caf50 !important;
}
.konf-xona-btn i { animation: konfPulse 2s infinite; }
body.konf-bar-on .konf-xona-btn { display: flex; }

.konf-xona-son {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 15px; height: 15px;
    background: #4caf50; color: #fff;
    font-size: 9px; font-weight: 700;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px; line-height: 1;
}

/* Panel — fixed dropdown, tepa navdan pastda */
body:not(.konf-bar-on) #konfPanel { display: none !important; }

#konfPanel {
    position: fixed;
    top: 55px; /* xona-tepa balandligi */
    left: max(0px, calc(50vw - 350px));
    right: max(0px, calc(50vw - 350px));
    z-index: 47;
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
    background: var(--card);
    /* border-bottom: 1px solid var(--border); */
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
body.chat-xona #konfPanel { top: 55px; z-index: 18; }
#konfPanel.ochiq { max-height: 500px; }

.konf-panel-tepa {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
}
.konf-panel-sarlavha {
    font-size: 13px; font-weight: 600; color: var(--text);
    display: flex; align-items: center; gap: 6px;
}
.konf-panel-sarlavha i { color: #4caf50; }
.konf-panel-yop {
    background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 16px; padding: 2px 6px;
    border-radius: 6px; line-height: 1;
}
.konf-panel-yop:hover { background: var(--hover); }

#konfJoin {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
}
#konfJoinBtn {
    background: #4caf50; color: #fff;
    border: none; border-radius: 10px;
    padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
}
#konfJoinBtn:disabled { background: var(--border); color: var(--muted); }

#konfUsers { padding: 0 14px 4px; max-height: 220px; overflow-y: auto; }

.kodam {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; border-bottom: 1px solid var(--border);
}
.kodam:last-child { border: none; }

.kodam-av { flex-shrink: 0; position: relative; }

.kodam-ism {
    flex: 1; font-size: 13px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kodam-ism small { color: var(--muted); font-size: 11px; }

.kodam-tolqin {
    display: flex; align-items: center; gap: 2px;
    height: 16px; opacity: 0; transition: opacity .2s;
}
.kodam-tolqin.faol { opacity: 1; }
.kodam-tolqin span {
    display: inline-block; width: 2px; border-radius: 2px;
    background: #4caf50; animation: kTolqin .6s ease-in-out infinite;
}
.kodam-tolqin span:nth-child(1){height:4px;animation-delay:0s}
.kodam-tolqin span:nth-child(2){height:12px;animation-delay:.15s}
.kodam-tolqin span:nth-child(3){height:6px;animation-delay:.3s}
.kodam-tolqin span:nth-child(4){height:9px;animation-delay:.1s}
@keyframes kTolqin{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1.2)}}

.kodam-mikro { font-size: 13px; color: #4caf50; }
.kodam-mikro.off { color: #f44336; }
.kodam-mikro.force { color: #ff9800; }
.kodam-mikro[onclick] { cursor: pointer; }

.kodam-adm-btn {
    border: none; border-radius: 6px;
    padding: 4px 7px; font-size: 11px; cursor: pointer;
    background: var(--bg2,var(--border)); color: var(--muted);
}
.kodam-adm-btn:hover { filter: brightness(1.2); }
.kodam-adm-btn.kick { color: #f44336; }

#konfBtnlar {
    display: none; gap: 10px;
    padding: 10px 14px 14px; justify-content: center;
}
.konf-btn-mikro, .konf-btn-chiq, .konf-btn-lock {
    border: none; border-radius: 50%;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer; transition: background .2s;
}
.konf-btn-mikro { background: color-mix(in srgb,#4caf50 15%,var(--card)); color: #4caf50; }
.konf-btn-mikro.off { background: color-mix(in srgb,#f44336 15%,var(--card)); color: #f44336; }
.konf-btn-chiq { background: #c62828; color: #fff; }
.konf-btn-lock { background: color-mix(in srgb,#9e9e9e 15%,var(--card)); color: var(--muted); }
.konf-btn-lock.locked { background: color-mix(in srgb,#f59e0b 18%,var(--card)); color: #f59e0b; }

#konfStatusEl {
    font-size: 12px; color: var(--muted);
    text-align: center; padding: 2px 14px 6px; min-height: 18px;
}

/* Admin toggle tugma */