/* ====================================================
   QUARTZ ChatApp — Orijinal Frontend Tasarımı
   Font: Outfit (Google Fonts)
   Renkler: Birebir React frontend'den alındı
   SEO + Mobil Uyumlu
   ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ===================== RESET & BASE ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

:root {
    --primary-color: #3B82F6;
    --primary-color-rgb: 59, 130, 246;
    --primary-soft: rgba(var(--primary-color-rgb), 0.12);
    --primary-faint: rgba(var(--primary-color-rgb), 0.08);
    --primary-border: rgba(var(--primary-color-rgb), 0.28);
    --chat-message-font-size: 14px;
    --chat-message-text-color: #111827;
}

.admin-role-panel,
.admin-role-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: calc(100% - 42px);
    max-height: none;
    min-height: 0;
    padding: 8px;
    overflow-y: auto;
}

.admin-role-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.admin-role-search {
    position: relative;
    display: block;
}

.admin-role-search input {
    width: 100%;
    height: 36px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    padding: 0 34px 0 10px;
    background: #FFFFFF;
    color: #111827;
    font-size: 13px;
    outline: none;
}

.admin-role-search span {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #6B7280;
    font-size: 13px;
}

.admin-role-add,
.admin-role-save,
.admin-role-edit,
.admin-role-delete {
    min-height: 32px;
    border: 0;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.admin-role-add,
.admin-role-save,
.admin-role-edit {
    background: #2588D8;
    color: #FFFFFF;
}

.admin-role-delete {
    background: #FEE2E2;
    color: #991B1B;
}

.admin-role-edit:disabled,
.admin-role-delete:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.admin-role-empty {
    border: 1px dashed #CBD5E1;
    border-radius: 6px;
    padding: 18px;
    color: #64748B;
    background: #F8FAFC;
    text-align: center;
    font-size: 13px;
}

.admin-role-empty.is-error {
    border-color: #FCA5A5;
    color: #991B1B;
    background: #FEF2F2;
}

.admin-role-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-role-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 10px;
    background: #FFFFFF;
}

.admin-role-row.is-passive {
    background: #F8FAFC;
    opacity: 0.78;
}

.admin-role-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.admin-role-titlebox {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.admin-role-titlebox strong {
    color: #111827;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-role-titlebox span,
.admin-role-meta span {
    color: #64748B;
    font-size: 11px;
}

.admin-role-meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    max-width: none;
}

.admin-role-meta span {
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 3px 7px;
    background: #F8FAFC;
}

.admin-role-actions,
.admin-role-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-role-preview {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #FFFFFF;
}

.admin-role-form-grid,
.admin-role-style-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.admin-role-style-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-role-field {
    display: grid;
    gap: 5px;
    color: #374151;
    font-size: 12px;
    font-weight: 800;
}

.admin-role-field.is-wide {
    grid-column: 1 / -1;
}

.admin-role-field input,
.admin-role-field select,
.admin-role-field textarea {
    width: 100%;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    background: #FFFFFF;
    color: #111827;
    font-size: 13px;
    outline: none;
}

.admin-role-field input,
.admin-role-field select {
    height: 34px;
    padding: 0 9px;
}

.admin-role-field input[type="color"] {
    padding: 2px;
}

.admin-role-field textarea {
    min-height: 64px;
    resize: vertical;
    padding: 8px 9px;
}

.admin-role-permission-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-role-permission-group {
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #FFFFFF;
    padding: 10px;
}

.admin-role-permission-group h4 {
    margin: 0 0 8px 0;
    color: #111827;
    font-size: 12px;
}

.admin-role-permission {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 7px 0;
    border-top: 1px solid #F3F4F6;
}

.admin-role-permission:first-of-type {
    border-top: 0;
}

.admin-role-permission input {
    margin-top: 2px;
}

.admin-role-permission strong,
.admin-role-permission small {
    display: block;
}

.admin-role-permission strong {
    color: #111827;
    font-size: 12px;
}

.admin-role-permission small {
    color: #64748B;
    font-size: 11px;
    line-height: 1.35;
}

.admin-role-permission.is-locked {
    opacity: 0.55;
}

.admin-role-badge-preview {
    font-size: 12px;
}

@media (max-width: 820px) {
    .admin-role-panel,
    .admin-role-form {
        min-width: 0;
    }

    .admin-role-toolbar,
    .admin-role-row,
    .admin-role-form-grid,
    .admin-role-style-grid,
    .admin-role-permission-groups {
        grid-template-columns: 1fr;
    }

    .admin-role-meta,
    .admin-role-actions,
    .admin-role-form-actions {
        justify-content: flex-start;
    }
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #0A0A0A;
    color: #111111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: 100dvh;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }

/* Scrollbar — ince, yarı saydam */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.20); }

/* ===================== TEMA GEÇİŞ ANİMASYONU ===================== */
*, *::before, *::after {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ===================== LIGHT MODE ===================== */
[data-theme="light"] body             { background: #F3F4F6; color: #111111; }

/* Chat ana alan */
[data-theme="light"] .chat-app        { background: #F3F4F6; }
[data-theme="light"] .chat-main       { background: #F8F9FA; }

/* Header */
[data-theme="light"] .chat-header     { background: #FFFFFF; border-bottom-color: #E5E7EB; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
[data-theme="light"] .header-room-name { color: #111111; }
[data-theme="light"] .room-desc-text  { color: #6B7280; }
[data-theme="light"] .header-icon-btn { background: rgba(0,0,0,0.06); color: #4B5563; }
[data-theme="light"] .header-icon-btn:hover { background: rgba(0,0,0,0.12); color: #111111; }

/* Mesaj alanı */
[data-theme="light"] .messages-container { background: #F8F9FA; border-left-color: #E5E7EB; }
[data-theme="light"] .msg-bubble        { background: #FFFFFF; border-color: #E5E7EB; color: #111111; }
[data-theme="light"] .msg-bubble.mine   { background: #111111; color: #FFFFFF; }
[data-theme="light"] .msg-time          { color: #9CA3AF; }
[data-theme="light"] .msg-system-text   { background: #FFFFFF; color: #111827; border-color: #E5E7EB; }

/* Input alanı */
[data-theme="light"] .message-input-bar { background: #FFFFFF; border-top-color: #E5E7EB; }
[data-theme="light"] .msg-input         { background: #F3F4F6; border-color: #D1D5DB; color: #111111; }
[data-theme="light"] .msg-input::placeholder { color: #9CA3AF; }
[data-theme="light"] .input-icon-btn    { color: #6B7280; }
[data-theme="light"] .input-icon-btn:hover { color: #111111; }
[data-theme="light"] .send-btn          { background: #111111; }

/* Boş durum */
[data-theme="light"] .empty-state       { color: #9CA3AF; }
[data-theme="light"] .empty-state svg   { opacity: 0.3; }

/* Light scrollbar */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }


/* ===================== AUTH PAGES ===================== */

.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0A0A0A;
    padding: 1rem;
}

/* Kart */
.auth-card {
    width: 100%;
    max-width: 380px;
    background: #111111;
    border: 1px solid #1E1E1E;
    border-radius: 12px;
    padding: 1.75rem;
}

/* Başlık */
.auth-header { text-align: center; margin-bottom: 1.75rem; }

.brand-title {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.05em;
    line-height: 1;
}
.brand-title .gray { color: #9CA3AF; } /* text-gray-400 */

.brand-sub {
    font-size: 0.75rem;
    color: #6B7280; /* text-gray-500 */
    margin-top: 4px;
}

/* Sekmeler */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid #1E1E1E;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.auth-tab {
    flex: 1;
    padding-bottom: 8px;
    color: #6B7280;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: 'Outfit', sans-serif;
}
.auth-tab.active {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* Hata */
.auth-error {
    margin-bottom: 1rem;
    font-size: 0.75rem;
    color: #9CA3AF;
    text-align: center;
}
.auth-success {
    margin-bottom: 1rem;
    font-size: 0.75rem;
    color: #22C55E;
    text-align: center;
}

/* Form */
.form-space { display: flex; flex-direction: column; gap: 1rem; }

.form-group { display: flex; flex-direction: column; gap: 0.5rem; }

.form-label {
    font-size: 0.75rem;
    color: #6B7280;
    display: block;
}

/* Input wrapper with icon */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 12px;
    color: #6B7280;
    pointer-events: none;
    width: 16px;
    height: 16px;
}

.form-input {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    background: #0A0A0A;
    border: 1px solid #1E1E1E;
    border-radius: 6px;
    color: #ffffff;
    font-size: 0.875rem;
    font-family: 'Outfit', sans-serif;
    outline: none;
    transition: border-color 0.15s;
}
.form-input:focus { border-color: #374151; }
.form-input::placeholder { color: #4B5563; }

/* Gender buttons */
.gender-row { display: flex; gap: 0.5rem; }

.gender-btn {
    flex: 1;
    padding: 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #6B7280;
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: 'Outfit', sans-serif;
}
.gender-btn.active {
    background: #1E1E1E;
    color: #ffffff;
}

/* Submit button */
.btn-auth {
    width: 100%;
    padding: 0.625rem;
    margin-top: 0.5rem;
    background: #ffffff;
    color: #000000;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
}
.btn-auth:hover { opacity: 0.9; }
.btn-auth:disabled { opacity: 0.6; cursor: not-allowed; }

/* Footer link */
.auth-foot {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: #6B7280;
}
.auth-foot a { color: #ffffff; }

/* ====================================================
   CHAT APP — FULL SCREEN LAYOUT
   ==================================================== */

.chat-app {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #0A0A0A;
    font-family: Arial, Helvetica, sans-serif;
    --primary-color: #2196F3;
    --primary-color-rgb: 33, 150, 243;
    --primary-soft: rgba(33, 150, 243, 0.12);
    --primary-faint: rgba(33, 150, 243, 0.08);
    --primary-border: rgba(33, 150, 243, 0.28);
}

/* ====================================================
   SIDEBAR  (Orijinal: beyaz bg, gri border)
   ==================================================== */

.sidebar {
    width: 400px;
    min-width: 400px;
    background: #ffffff;
    border-right: 1px solid #E5E5E5;
    display: flex;
    flex-direction: column;
    z-index: 20;
    flex-shrink: 0;
    box-shadow: 4px 0 20px rgba(0,0,0,0.08);
    height: 100%;
    overflow: hidden;
}

/* Tab bar — ikonlar */
.sidebar-tabbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    padding: 0 8px;
    background: #ffffff;
    border-bottom: 1px solid #E5E5E5;
    color: #9CA3AF;
}

.sidebar-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 68px;
    padding: 0 0 8px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    color: #9CA3AF;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    position: relative;
}

.sidebar-tab-btn svg {
    width: 28px;
    height: 28px;
}

.sidebar-tab-btn.active {
    color: #111111;
    border-bottom-color: var(--primary-color);
}

.sidebar-tab-btn:hover:not(.active) { color: #4B5563; }

.tab-badge {
    position: absolute;
    top: 14px;
    right: 10px;
    background: #333333;
    color: #ffffff;
    font-size: 11px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1;
}

.tab-badge.red { background: #EF4444; }

/* Search bar */
.sidebar-search-area {
    padding: 14px 20px 10px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sidebar-search-area.with-border { border-bottom: 1px solid #F0F0F0; }

.search-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    height: 42px;
    background: #ffffff;
    border: 1px solid #D1D5DB;
    border-radius: 9999px;
    padding: 8px 42px 8px 16px;
    font-size: 14px;
    color: #374151;
    outline: none;
    transition: border-color 0.15s;
    font-family: Arial, Helvetica, sans-serif;
}
.search-input:focus { border-color: #6B7280; }
.search-input::placeholder { color: #9CA3AF; }

.search-icon {
    position: absolute;
    right: 13px;
    color: #6B7280;
    pointer-events: none;
    cursor: pointer;
    width: 18px;
    height: 18px;
}

/* Sub-tab (Oda / Site / Arkadaşlar) */
.user-subtab {
    display: flex;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    overflow: hidden;
    margin: 0 31px 14px;
    min-height: 38px;
}

.user-subtab-btn {
    flex: 1;
    padding: 8px 0;
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    transition: background 0.1s, color 0.1s;
    position: relative;
}
.user-subtab-btn + .user-subtab-btn { border-left: 1px solid #E5E7EB; }
.user-subtab-btn.active { background: var(--primary-faint); color: #000000; font-weight: 600; }
.user-subtab-btn:hover:not(.active) { background: #F9FAFB; }

.subtab-red-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    background: #EF4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
}

/* Scroll area */
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    background: #ffffff;
}

/* ---- USER ITEM ---- */
.user-item {
    min-height: 92px;
    padding: 16px 34px 14px 30px;
    border-bottom: 1px solid #F3F4F6;
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    gap: 20px;
    align-items: center;
}
.user-item:hover { background: #F9F9F9; }
.user-item.is-on-roof {
    background: #FEF2F2;
}
.user-item.is-on-roof:hover {
    background: #FEE2E2;
}
.user-item.is-hand-raised {
    background: #FFF7ED;
    border-left: 3px solid #F97316;
}
.user-item.is-hand-raised:hover { background: #FFEDD5; }

.user-avatar-wrap {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    margin-top: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: visible;
}

.user-avatar-wrap.is-speaking {
    --speaking-accent: #3B82F6;
    --speaking-accent-soft: rgba(59, 130, 246, 0.26);
    animation: speakingAvatarPulse 1.15s ease-in-out infinite;
    box-shadow:
        0 0 0 3px var(--speaking-accent),
        0 0 0 7px var(--speaking-accent-soft);
}

@keyframes speakingAvatarPulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px var(--speaking-accent),
            0 0 0 5px var(--speaking-accent-soft);
    }
    50% {
        box-shadow:
            0 0 0 4px var(--speaking-accent),
            0 0 0 9px rgba(59, 130, 246, 0);
    }
}

.user-avatar-img {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    border-radius: 40%;
    border: 1px solid rgba(214,214,214,.41);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    background: #ffffff;
    display: block;
    object-fit: cover;
}

/* Rosette resim çerçevesi — avatar'ı çevreleyen overlay (avatar img üstünde, online-dot altında).
   Boyut (width/height) her çerçeve için INLINE verilir: sunucu, çerçevenin delik oranını ölçüp
   per-frame ölçek hesaplar → her çerçeve avatarı kendi geometrisine göre tam çevreler.
   object-fit:contain → görsel orana sadık kalır (BOZMA yok); ölçek letterbox için telafi edilir. */
.user-avatar-wrap .avatar-frame-img {
    position: absolute;
    top: calc(50% + var(--frame-offset-y, 0%));
    left: calc(50% + var(--frame-offset-x, 0%));
    width: 180%;
    height: 180%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
}

.user-avatar-wrap.has-rosette-frame .user-avatar-img {
    position: absolute !important;
    top: 50%;
    left: 50%;
    width: var(--avatar-core-size, 76%) !important;
    height: var(--avatar-core-size, 76%) !important;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.user-live-icon {
    color: #2563EB;
    filter: drop-shadow(0 0 4px rgba(37,99,235,0.28));
}

.user-hand-raised-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 999px;
    background: #F97316;
    color: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.18);
}

.user-hand-raised-icon svg {
    width: 15px;
    height: 15px;
}

.online-dot {
    position: absolute;
    z-index: 6;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: #22C55E;
    border: 2px solid #ffffff;
    border-radius: 50%;
}
.online-dot.red { background: #EF4444; }
.online-dot.gray { background: #9CA3AF; }
.online-dot.small { width: 11px; height: 11px; }

.user-avatar-wrap::before,
.user-avatar-wrap::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    z-index: 2;
}

.user-avatar-wrap.avatar-frame-gold-crown::before {
    inset: -5px;
    background: conic-gradient(from 20deg, #f59e0b, #fff7ad, #f97316, #facc15, #f59e0b);
    box-shadow: 0 0 10px rgba(245, 158, 11, .45);
    z-index: 0;
}

.user-avatar-wrap.avatar-frame-gold-crown::after {
    width: 30px;
    height: 12px;
    left: 8px;
    top: -12px;
    border-radius: 10px 10px 4px 4px;
    background:
        radial-gradient(circle at 7px 3px, #fff7ad 0 3px, transparent 4px),
        radial-gradient(circle at 15px 1px, #fff7ad 0 4px, transparent 5px),
        radial-gradient(circle at 23px 3px, #fff7ad 0 3px, transparent 4px),
        linear-gradient(180deg, #facc15, #d97706);
    box-shadow: 0 2px 7px rgba(217, 119, 6, .45);
}

.user-avatar-wrap.avatar-frame-neon-orbit::before {
    inset: -4px;
    border: 2px solid #22d3ee;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, .35), 0 0 14px rgba(34, 211, 238, .65);
}

.user-avatar-wrap.avatar-frame-neon-orbit::after {
    inset: -9px;
    border: 1px dashed rgba(168, 85, 247, .75);
}

.user-avatar-wrap.avatar-frame-royal-wings::before {
    inset: -5px;
    background: linear-gradient(135deg, #f8fafc, #93c5fd 35%, #4338ca 70%, #f8fafc);
    box-shadow: 0 0 12px rgba(67, 56, 202, .45);
    z-index: 0;
}

.user-avatar-wrap.avatar-frame-royal-wings::after {
    inset: -12px -15px;
    border-left: 12px solid rgba(59, 130, 246, .42);
    border-right: 12px solid rgba(59, 130, 246, .42);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-radius: 18px;
}

.user-avatar-wrap.avatar-frame-ice-crystal::before {
    inset: -5px;
    background: conic-gradient(#ecfeff, #67e8f9, #38bdf8, #dbeafe, #ecfeff);
    box-shadow: 0 0 13px rgba(14, 165, 233, .5);
    z-index: 0;
}

.user-avatar-wrap.avatar-frame-ice-crystal::after {
    inset: -9px;
    border: 1px solid rgba(186, 230, 253, .8);
    clip-path: polygon(50% 0, 58% 34%, 100% 50%, 58% 66%, 50% 100%, 42% 66%, 0 50%, 42% 34%);
}

.user-avatar-wrap.avatar-frame-ruby-flame::before {
    inset: -5px;
    background: conic-gradient(from 180deg, #7f1d1d, #ef4444, #fb7185, #f97316, #7f1d1d);
    box-shadow: 0 0 14px rgba(239, 68, 68, .48);
    z-index: 0;
}

.user-avatar-wrap.avatar-frame-ruby-flame::after {
    inset: -10px;
    border: 2px solid rgba(251, 113, 133, .55);
    clip-path: polygon(50% 0, 62% 18%, 83% 12%, 78% 35%, 100% 50%, 78% 65%, 83% 88%, 62% 82%, 50% 100%, 38% 82%, 17% 88%, 22% 65%, 0 50%, 22% 35%, 17% 12%, 38% 18%);
}

.user-avatar-wrap.avatar-frame-gold-crown,
.user-avatar-wrap.avatar-frame-neon-orbit,
.user-avatar-wrap.avatar-frame-royal-wings,
.user-avatar-wrap.avatar-frame-ice-crystal,
.user-avatar-wrap.avatar-frame-ruby-flame {
    --frame-main: #d69a16;
    --frame-light: #fff4a3;
    --frame-dark: #8f5200;
    --frame-gem: #2563eb;
    --frame-gem-light: #93c5fd;
    --frame-shadow: rgba(146, 64, 14, .46);
}

.user-avatar-wrap.avatar-frame-neon-orbit {
    --frame-main: #2dd4bf;
    --frame-light: #ccfbf1;
    --frame-dark: #0f766e;
    --frame-gem: #7c3aed;
    --frame-gem-light: #ddd6fe;
    --frame-shadow: rgba(20, 184, 166, .44);
}

.user-avatar-wrap.avatar-frame-royal-wings {
    --frame-main: #f59e0b;
    --frame-light: #fef3c7;
    --frame-dark: #7c2d12;
    --frame-gem: #7c3aed;
    --frame-gem-light: #c4b5fd;
    --frame-shadow: rgba(124, 58, 237, .38);
}

.user-avatar-wrap.avatar-frame-ice-crystal {
    --frame-main: #7dd3fc;
    --frame-light: #f0f9ff;
    --frame-dark: #0369a1;
    --frame-gem: #0ea5e9;
    --frame-gem-light: #bae6fd;
    --frame-shadow: rgba(14, 165, 233, .42);
}

.user-avatar-wrap.avatar-frame-ruby-flame {
    --frame-main: #ef4444;
    --frame-light: #fecaca;
    --frame-dark: #7f1d1d;
    --frame-gem: #f59e0b;
    --frame-gem-light: #fde68a;
    --frame-shadow: rgba(239, 68, 68, .44);
}

.user-avatar-wrap.avatar-frame-gold-crown::before,
.user-avatar-wrap.avatar-frame-neon-orbit::before,
.user-avatar-wrap.avatar-frame-royal-wings::before,
.user-avatar-wrap.avatar-frame-ice-crystal::before,
.user-avatar-wrap.avatar-frame-ruby-flame::before {
    inset: -8px;
    z-index: 2;
    border: none;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(255,255,255,.98) 59% 61%, transparent 62%),
        conic-gradient(from 20deg, var(--frame-dark), var(--frame-main), var(--frame-light), var(--frame-main), var(--frame-dark), var(--frame-light), var(--frame-main), var(--frame-dark));
    box-shadow:
        0 0 0 1px rgba(255,255,255,.72) inset,
        0 0 0 2px var(--frame-dark),
        0 5px 12px var(--frame-shadow);
    -webkit-mask: radial-gradient(circle, transparent 0 59%, #000 60% 73%, transparent 74%);
    mask: radial-gradient(circle, transparent 0 59%, #000 60% 73%, transparent 74%);
}

.user-avatar-wrap.avatar-frame-gold-crown::after,
.user-avatar-wrap.avatar-frame-neon-orbit::after,
.user-avatar-wrap.avatar-frame-royal-wings::after,
.user-avatar-wrap.avatar-frame-ice-crystal::after,
.user-avatar-wrap.avatar-frame-ruby-flame::after {
    width: 22px;
    height: 16px;
    left: 50%;
    right: auto;
    bottom: auto;
    inset: auto auto auto 50%;
    top: -16px;
    transform: translateX(-50%);
    border: none;
    border-radius: 4px 4px 9px 9px;
    clip-path: polygon(50% 0, 72% 24%, 96% 18%, 82% 78%, 50% 100%, 18% 78%, 4% 18%, 28% 24%);
    background:
        radial-gradient(circle at 50% 33%, var(--frame-gem-light) 0 22%, var(--frame-gem) 23% 42%, transparent 44%),
        linear-gradient(135deg, var(--frame-light), var(--frame-main) 42%, var(--frame-dark));
    box-shadow:
        0 0 0 1px rgba(255,255,255,.68) inset,
        0 2px 6px var(--frame-shadow);
}

.avatar-frame-deco {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.user-avatar-wrap.avatar-frame-gold-crown .avatar-frame-deco,
.user-avatar-wrap.avatar-frame-neon-orbit .avatar-frame-deco,
.user-avatar-wrap.avatar-frame-royal-wings .avatar-frame-deco,
.user-avatar-wrap.avatar-frame-ice-crystal .avatar-frame-deco,
.user-avatar-wrap.avatar-frame-ruby-flame .avatar-frame-deco {
    display: block;
}

.user-avatar-wrap.avatar-frame-gold-crown .avatar-frame-deco {
    background:
        radial-gradient(circle at 50% calc(100% + 2px), var(--frame-gem-light) 0 5px, var(--frame-gem) 6px 10px, var(--frame-dark) 11px 12px, transparent 13px),
        radial-gradient(circle at 50% calc(100% + 3px), var(--frame-main) 0 15px, transparent 16px);
}

.user-avatar-wrap.avatar-frame-neon-orbit .avatar-frame-deco,
.user-avatar-wrap.avatar-frame-royal-wings .avatar-frame-deco,
.user-avatar-wrap.avatar-frame-ice-crystal .avatar-frame-deco,
.user-avatar-wrap.avatar-frame-ruby-flame .avatar-frame-deco {
    background:
        radial-gradient(circle at 50% calc(100% + 2px), var(--frame-gem-light) 0 5px, var(--frame-gem) 6px 10px, var(--frame-dark) 11px 12px, transparent 13px),
        radial-gradient(circle at 50% calc(100% + 3px), var(--frame-main) 0 15px, transparent 16px);
}

.avatar-frame-deco::before,
.avatar-frame-deco::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 18px;
    bottom: -10px;
    border-radius: 80% 18% 80% 18%;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.48) 0 2px, transparent 2px 5px),
        linear-gradient(135deg, var(--frame-light), var(--frame-main) 52%, var(--frame-dark));
    box-shadow: 0 2px 5px var(--frame-shadow);
}

.avatar-frame-deco::before {
    left: -16px;
    transform: rotate(-24deg);
    clip-path: polygon(100% 15%, 80% 30%, 100% 44%, 75% 54%, 94% 70%, 62% 70%, 74% 92%, 0 78%, 24% 44%, 0 18%);
}

.avatar-frame-deco::after {
    right: -16px;
    transform: scaleX(-1) rotate(-24deg);
    clip-path: polygon(100% 15%, 80% 30%, 100% 44%, 75% 54%, 94% 70%, 62% 70%, 74% 92%, 0 78%, 24% 44%, 0 18%);
}

.user-info-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.user-name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.user-name-text {
    font-size: 14px;
    font-weight: 500;
    color: #464646;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flashnick-name {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
}
.user-name-text.flashnick-name {
    flex: 1 1 0;
    width: 100%;
    max-width: none;
    min-height: 32px;
    height: auto;
    background: transparent;
    border: 0;
}
.flashnick-list-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 156px;
    max-height: 32px;
    object-fit: contain;
}
.friend-name-text {
    display: inline-flex;
    align-items: center;
    max-width: 160px;
    min-height: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #3498DB;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.friend-name-text.pending {
    color: #374151;
}
.flashnick-friend-img {
    display: block;
    max-width: 165px;
    max-height: 30px;
    object-fit: contain;
}

.user-icons-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-left: auto;
    padding-top: 1px;
    color: #9CA3AF;
    flex-shrink: 0;
}

.user-icons-row svg {
    width: 15px;
    height: 15px;
}

.gender-female { color: #EC4899; font-weight: 700; font-size: 13px; }
.gender-male   { color: var(--primary-color); font-weight: 700; font-size: 13px; }
.vip-icon { color: #60A5FA; font-size: 11px; }

.user-role-badge {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #4B5563;
    margin-top: 5px;
}
.user-role-badge.admin { color: #000000; }
.user-role-tag {
    background: #000000;
    color: #ffffff;
    padding: 1px 4px;
    border-radius: 2px;
    display: inline-block;
    font-size: 11px;
}

.user-online-text {
    font-size: 14px;
    color: #989898;
    margin-top: 6px;
    line-height: 1.2;
}

.user-presence-room-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
}

.user-presence-room-row .user-online-text {
    margin-top: 0;
    min-width: 0;
    flex: 0 1 auto;
}

.user-room-location {
    min-width: 0;
    max-width: 52%;
    margin-left: auto;
    color: #2F86B7;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.user-item.is-basic-role .user-name-text {
    color: #111827;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
}

.user-item.is-basic-role .user-role-badge.role-badge-dynamic.is-basic,
.user-role-badge.role-badge-dynamic.is-basic {
    min-height: 0;
    margin-top: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #6B7280;
    box-shadow: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

.user-item.is-basic-role .user-role-badge.role-badge-dynamic.is-basic .user-role-tag,
.user-role-badge.role-badge-dynamic.is-basic .user-role-tag {
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    white-space: nowrap;
}

.user-item.is-basic-role .user-online-text {
    margin-top: 6px;
    color: #9CA3AF;
    font-size: 12px;
    line-height: 1.2;
}

.user-item.is-basic-role .user-presence-room-row .user-online-text {
    margin-top: 0;
}

.user-item.is-on-roof .user-online-text {
    color: #DC2626;
    font-weight: 700;
}

/* ---- ROOM ITEM ---- */
.room-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 1rem;
    border-bottom: 1px solid #F3F4F6;
    cursor: pointer;
    transition: all 0.25s;
    color: #4B5563;
}
.room-item:hover { background: #F9F9F9; }
.room-item.active {
    background: linear-gradient(90deg, var(--primary-soft) 0%, rgba(255,255,255,0) 100%);
    border-left: 3px solid var(--primary-color);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.03);
}

.room-item-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.room-heart {
    background: none;
    border: none;
    cursor: pointer;
    color: #D1D5DB;
    transition: transform 0.1s, color 0.2s;
    display: flex;
    align-items: center;
    padding: 0;
}
.room-heart:hover { transform: scale(1.1); color: #F87171; }
.room-heart.fav { color: #EF4444; }
.room-heart.fav svg { fill: #EF4444; }

.room-name-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: #464646;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.room-name-text.active { color: #111111; font-weight: 700; }

.room-user-count {
    flex: 0 0 auto;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F0F1F3;
    color: #818A96;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.room-item.active .room-user-count {
    background: rgba(255,255,255,0.22);
    color: var(--primary-color);
}

/* ---- DM ITEM ---- */
.dm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem;
    border-bottom: 1px solid rgba(225,225,225,.32);
    cursor: pointer;
    transition: all 0.25s;
}
.dm-item:hover { background: rgba(241,241,241,.44); }
.dm-item.active {
    background: linear-gradient(90deg, var(--primary-soft) 0%, rgba(255,255,255,0) 100%);
}

.dm-avatar-wrap { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 40%; overflow: hidden; }
.dm-avatar { width: 40px; height: 40px; border-radius: 40%; border: 1px solid rgba(214,214,214,.41); background: #ffffff; box-shadow: none; object-fit: cover; display: block; }

.dm-name { font-size: 14px; font-weight: 600; color: #464646; }
.dm-name.active { color: #111111; }
.dm-sub { font-size: 14px; color: #989898; }

.dm-unread {
    background: #EF4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 9999px;
    margin-left: auto;
}

/* ---- FRIENDS / PENDING ---- */
.pending-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 1rem;
    background: #FFF7ED;
    border-bottom: 1px solid #F3F4F6;
}
.pending-label { font-size: 11px; font-weight: 700; color: #EA580C; }

.friend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 1rem;
    border-bottom: 1px solid #F9FAFB;
    cursor: pointer;
    transition: background 0.1s;
}
.friend-item:hover { background: #F9FAFB; }

.btn-accept {
    font-size: 11px;
    background: #22C55E;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.btn-accept:hover { background: #16A34A; }

.btn-reject {
    font-size: 11px;
    background: #F87171;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: background 0.15s;
}
.btn-reject:hover { background: #EF4444; }

/* Guest DM placeholder */
.guest-dm-placeholder { text-align: center; padding: 2.5rem 1rem 2.5rem; }
.guest-dm-icon {
    display: inline-flex;
    padding: 1rem;
    background: #F5F3FF;
    border-radius: 50%;
    margin-bottom: 12px;
    color: #A78BFA;
}
.guest-dm-text { font-size: 14px; color: #6B7280; font-weight: 500; line-height: 1.6; margin-bottom: 1rem; }
.btn-register {
    display: inline-block;
    background: #7C3AED;
    color: #ffffff;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(124,58,237,0.3);
    transition: background 0.15s;
    cursor: pointer;
    border: none;
}
.btn-register:hover { background: #6D28D9; }

/* ====================================================
   CHAT MAIN AREA  (bg: #111111)
   ==================================================== */

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #EDEDE5;
    background-image: url("/images/chat-room-bg.jpg");
    background-repeat: repeat;
    position: relative;
}

/* ---- HEADER ---- */
.chat-header {
    min-height: 60px;
    background: #FFFFFF;
    border-bottom: 2px solid rgba(34,36,38,.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    flex-shrink: 0;
    z-index: 10;
    box-shadow: none;
}

.header-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.header-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-room-name {
    font-size: 1.25rem;
    font-weight: 900;
    color: #111827;
    letter-spacing: 0.025em;
    line-height: 1;
}

/* Header oda sahibi (sağ taraf) */
.header-owner-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.18);
    border-radius: 8px;
    transition: background 0.2s;
}
.header-owner-wrap:hover {
    background: rgba(245,158,11,0.13);
}

/* ============================================================
   HEADER ODA SAHİBİ (KURUCU) PREMIUM BADGE
   ============================================================ */
.premium-owner-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    padding: 4px 12px 4px 4px;
    border-radius: 6px;
    transition: all .3s ease;
    cursor: default;
    box-shadow: 0 1px 4px rgba(17,24,39,0.05);
}
.premium-owner-badge:hover {
    border-color: var(--primary-border);
    box-shadow: 0 4px 14px rgba(17,24,39,.10);
    transform: translateY(-1px);
}

.owner-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-border);
    flex-shrink: 0;
}

.owner-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.owner-label {
    font-size: 9px;
    font-weight: 800;
    color: #6B7280;
    letter-spacing: .1em;
}

.owner-name-text {
    font-size: 12px;
    font-weight: 700;
    color: #111827;
}

.header-owner-crown {
    font-size: 14px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(245,158,11,.4));
}


.header-owner-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.header-owner-label {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #F59E0B;
    text-transform: uppercase;
}

.header-owner-name {
    font-size: 12px;
    font-weight: 700;
    color: #FCD34D;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ayırıcı çizgi */
.header-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
    flex-shrink: 0;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.owner-badge {
    font-size: 10px;
    background: var(--primary-soft);
    color: var(--primary-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    border: 1px solid var(--primary-border);
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.room-desc-text {
    font-size: 12px;
    color: #989898;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(56vw, 760px);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-icon-btn {
    padding: 8px 10px;
    background: rgba(0,0,0,0.20);
    border-radius: 12px;
    color: #9CA3AF;
    border: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
}
.header-icon-btn:hover { background: rgba(0,0,0,0.40); color: #ffffff; }

/* ---- LIVE VIDEO ---- */
.live-video-stage {
    position: absolute;
    left: 12px;
    top: 82px;
    z-index: 18;
    width: min(560px, calc(100% - 24px));
    max-height: calc(100% - 156px);
    padding: 0;
    overflow: visible;
    pointer-events: none;
}

.live-video-grid {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    max-height: inherit;
    overflow: auto;
    pointer-events: auto;
    scrollbar-width: thin;
}

.live-video-tile {
    flex: 0 0 clamp(190px, 19vw, 260px);
    position: relative;
    overflow: hidden;
    width: clamp(190px, 19vw, 260px);
    min-height: 108px;
    aspect-ratio: 16 / 9;
    background: #05070A;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.32);
    cursor: pointer;
    user-select: none;
    touch-action: none;
    transition: transform 0.14s ease, opacity 0.14s ease, box-shadow 0.14s ease;
}

.live-video-tile.is-occupied:not(.has-video) {
    background:
        radial-gradient(circle at 50% 36%, rgba(59, 130, 246, 0.18), transparent 44%),
        linear-gradient(135deg, #1E293B, #0F172A);
}

.live-video-tile.is-dragging {
    opacity: 0.58;
    transform: scale(0.98);
    box-shadow: 0 8px 22px rgba(0,0,0,0.24);
    cursor: grabbing;
}

.live-video-tile:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.9);
    outline-offset: 2px;
}

.live-video-tile.is-speaking {
    --speaking-accent: #3B82F6;
    --speaking-accent-soft: rgba(59, 130, 246, 0.26);
    border-color: var(--speaking-accent);
    animation: liveTileSpeakingPulse 1.15s ease-in-out infinite;
    box-shadow:
        0 0 0 2px var(--speaking-accent-soft),
        0 14px 36px rgba(0,0,0,0.32);
}

@keyframes liveTileSpeakingPulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px var(--speaking-accent-soft),
            0 14px 36px rgba(0,0,0,0.32);
    }
    50% {
        box-shadow:
            0 0 0 5px rgba(59, 130, 246, 0),
            0 14px 36px rgba(0,0,0,0.32);
    }
}

.live-seat-profile {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 36%, rgba(59, 130, 246, 0.18), transparent 44%),
        linear-gradient(135deg, #1E293B, #0F172A);
}

.live-seat-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.76);
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}

.live-video-tile.is-speaking .live-seat-avatar {
    border-color: var(--speaking-accent);
    animation: liveSeatAvatarPulse 1.15s ease-in-out infinite;
    box-shadow:
        0 0 0 3px var(--speaking-accent-soft),
        0 8px 18px rgba(0,0,0,0.28);
}

@keyframes liveSeatAvatarPulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px var(--speaking-accent-soft),
            0 8px 18px rgba(0,0,0,0.28);
    }
    50% {
        box-shadow:
            0 0 0 6px rgba(59, 130, 246, 0),
            0 8px 18px rgba(0,0,0,0.28);
    }
}

.live-seat-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.live-video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000000;
}

.live-camera-preview-backdrop {
    position: fixed;
    inset: 0;
    z-index: 760;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,0.68);
}

.live-camera-preview-backdrop.hidden {
    display: none;
}

.live-camera-preview-modal {
    position: relative;
    width: min(420px, calc(100vw - 28px));
    padding: 12px;
    border-radius: 10px;
    background: #111827;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 24px 60px rgba(0,0,0,0.42);
}

.live-camera-preview-video {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: min(68vh, 560px);
    border-radius: 8px;
    background: #000000;
    object-fit: cover;
    display: block;
}

.live-camera-preview-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: rgba(15,23,42,0.74);
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.live-camera-preview-flip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: rgba(15,23,42,0.74);
    color: #FFFFFF;
    cursor: pointer;
}

.live-camera-preview-flip:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.live-camera-preview-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.live-camera-preview-confirm,
.live-camera-preview-cancel {
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.live-camera-preview-confirm {
    background: var(--primary-color);
    color: #FFFFFF;
}

.live-camera-preview-cancel {
    background: #F3F4F6;
    color: #111827;
}

.live-camera-preview-confirm:disabled,
.live-camera-preview-cancel:disabled,
.live-camera-preview-close:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.live-video-label {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 3px 7px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(90deg, rgba(0,0,0,0.64), rgba(0,0,0,0.18));
    color: #FFFFFF;
    font: inherit;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.live-video-slot {
    display: none;
}

.live-video-resize-handle {
    display: none;
}

/* ---- MESSAGES ---- */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: #111111;
    position: relative;
    border-left: 1px solid #222222;
    display: flex;
    flex-direction: column;
}

/* Watermark */
.messages-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.02;
    pointer-events: none;
    color: #ffffff;
}

.messages-list {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* System message */
.msg-system {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}
.msg-system-text {
    font-size: 12px;
    color: #000000;
    background: #FFFFFF;
    padding: 3px 11px;
    border-radius: 20px;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 1.7px;
    user-select: none;
}

.msg-roof-notice {
    margin: 0.7rem 0;
}

.msg-roof-notice-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    max-width: min(92%, 520px);
    padding: 7px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 9999px;
    background: #FFFFFF;
    color: #111827;
    box-shadow: 0 6px 18px rgba(17,24,39,0.12);
    font: 700 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    cursor: pointer;
    white-space: normal;
    text-align: center;
}

.msg-roof-notice-pill:hover {
    border-color: #FCA5A5;
    box-shadow: 0 8px 22px rgba(239,68,68,0.18);
}

.msg-roof-notice-pill:disabled {
    cursor: wait;
    opacity: 0.72;
}

.msg-roof-notice-action {
    color: #EF4444;
}

.msg-system-location-text {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: min(720px, calc(100vw - 48px));
    flex-wrap: wrap;
    justify-content: center;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    line-height: 1.35;
}

.presence-system-arrow {
    color: #EF4444;
    font-weight: 900;
}

.presence-location-link,
.presence-location-missing {
    font: inherit;
    font-weight: 900;
    color: #22C55E;
}

.presence-location-link {
    border: 0;
    background: transparent;
    padding: 0 2px;
    cursor: pointer;
}

.presence-location-link:hover {
    text-decoration: underline;
}

.presence-location-backdrop {
    position: fixed;
    inset: 0;
    z-index: 290;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(15, 23, 42, .34);
}

.presence-location-card {
    width: min(520px, calc(100vw - 36px));
    background: #ffffff;
    color: #2A2A2A;
    box-shadow:
        8px 8px 0 rgba(255,255,255,.88),
        14px 14px 0 rgba(255,255,255,.72),
        0 16px 44px rgba(0,0,0,.22);
    border: 1px solid #E5E7EB;
}

.presence-location-card h3 {
    margin: 0;
    padding: 22px 26px 12px;
    font-size: 22px;
    font-weight: 800;
    border-bottom: 1px solid #D1D5DB;
}

.presence-location-rows {
    padding: 20px 36px 22px;
}

.presence-location-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    min-height: 27px;
    color: #777777;
    font-size: 14px;
    font-weight: 700;
}

.presence-location-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #777777;
    font-weight: 500;
}

.presence-location-actions {
    display: flex;
    justify-content: flex-end;
    padding: 16px 18px;
    border-top: 1px solid #D1D5DB;
    background: #F9FAFB;
}

.presence-location-close {
    min-width: 62px;
    height: 29px;
    border: 0;
    border-radius: 4px;
    background: #22C55E;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.presence-location-close:hover {
    background: #16A34A;
}

.room-password-backdrop {
    position: fixed;
    inset: 0;
    z-index: 295;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .34);
}

.room-password-card {
    width: min(360px, calc(100vw - 36px));
    padding: 18px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
}

.room-password-card h3 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 17px;
    font-weight: 800;
}

.room-password-card p {
    margin: 0 0 14px;
    color: #6B7280;
    font-size: 12px;
}

.room-password-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    color: #111827;
    font-size: 14px;
    outline: none;
}

.room-password-input:focus {
    border-color: #0879F2;
}

.room-password-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.room-password-cancel,
.room-password-submit {
    min-width: 82px;
    height: 34px;
    border-radius: 5px;
    color: #FFFFFF;
    font-weight: 800;
    cursor: pointer;
}

.room-password-cancel {
    background: #EF4444;
}

.room-password-submit {
    background: #22C55E;
}

@media (max-width: 480px) {
    .presence-location-backdrop {
        padding: 14px;
        align-items: flex-start;
        padding-top: 72px;
    }

    .presence-location-card h3 {
        padding: 18px 18px 10px;
        font-size: 19px;
    }

    .presence-location-rows {
        padding: 16px 18px 18px;
    }

    .presence-location-row {
        grid-template-columns: 104px minmax(0, 1fr);
        font-size: 13px;
    }
}

.entry-effect-layer {
    position: sticky;
    top: 10px;
    z-index: 90;
    height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    pointer-events: none;
    padding: 0 clamp(10px, 1.8vw, 22px);
    box-sizing: border-box;
    width: 100%;
}

.entry-effect-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    pointer-events: none;
    animation: entryEffectIn .18s ease-out both;
}

.entry-effect-row.is-hiding {
    animation: entryEffectOut .45s ease-in forwards;
}

.entry-effect-toast {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 34px;
    padding: 8px 16px;
    box-sizing: border-box;
    border-radius: 8px;
    color: #111827;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    overflow: hidden;
}

.entry-effect-toast.has-media {
    position: relative;
    width: 100%;
    height: clamp(120px, 22vh, 240px);
    min-height: 0;
    max-height: 240px;
    border-radius: 8px;
    padding: 0;
    background: rgba(15,23,42,.78);
}

.entry-effect-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.entry-effect-toast.has-media .entry-effect-text {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 10px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #111827;
    background: #FFFFFF;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.entry-effect-text {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

@keyframes entryEffectIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes entryEffectOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-8px) scale(.98); }
}

/* Typing indicator */
.typing-row {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-left: 2px;
    margin-top: 2px;
    pointer-events: none;
}
.typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: min(280px, 75%);
    min-height: 24px;
    padding: 5px 10px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(255,255,255,0.58);
    color: #6B7280;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    backdrop-filter: blur(8px);
}
.typing-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
}
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.typing-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.35;
    animation: typing-dot 1.1s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.16s; }
.typing-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes typing-dot {
    0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-2px); }
}

.chat-status-stack {
    flex-shrink: 0;
    background: transparent;
    position: relative;
}

.typing-strip.hidden,
.reply-preview.hidden,
.voice-message-status.hidden {
    display: none !important;
}

/* Typing göstergesi: mesaj akışının üstüne absolute overlay → layout shift (titreme) yok */
.typing-strip {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 6px;
    padding: 0 1rem 4px;
    pointer-events: none;
    z-index: 4;
}

.typing-strip .typing-bubble {
    max-width: min(220px, 60vw);
    min-height: 22px;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(15, 23, 42, 0.06);
    color: #51637A;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(6px);
}

.typing-more {
    justify-content: center;
    min-width: 34px;
    font-size: 11px;
    font-weight: 800;
}

.reply-preview {
    padding: 6px 1rem 0;
}

.reply-preview-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 7px 9px 7px 11px;
    border-left: 3px solid #21A8F3;
    border-radius: 6px;
    background: #F3F8FD;
    color: #102033;
}

.reply-preview-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
    font-size: 12px;
    line-height: 1.2;
}

.reply-preview-label {
    color: #64748B;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.reply-preview-copy strong,
.reply-preview-copy span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reply-preview-close {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: #DCEBFA;
    color: #102033;
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
}

.reply-preview-close:hover {
    background: #C9DEF2;
}

/* Yanıtlanan görselin input üstü önizlemesi: küçük thumbnail */
.reply-preview-inner.has-thumb .reply-preview-copy {
    flex: 1;
}
.reply-preview-thumb {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.voice-message-status {
    padding: 6px 1rem 0;
}

.voice-message-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 10px;
    overflow: hidden;
    border-left: 3px solid #EF4444;
    border-radius: 6px;
    background: #FFFFFF;
    color: #111827;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
}

.voice-message-status.is-preview .voice-message-card {
    border-left-color: #22C55E;
}

.voice-recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #EF4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
    animation: voice-record-pulse 1.1s infinite;
}

.voice-message-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    font-size: 12px;
    line-height: 1.2;
}

.voice-message-copy strong,
.voice-message-copy span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.voice-message-copy strong {
    color: #111827;
    font-weight: 900;
}

.voice-message-copy span {
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
}

.voice-message-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.voice-message-action {
    min-height: 30px;
    border: 0;
    border-radius: 999px;
    padding: 6px 10px;
    color: #111827;
    background: #F3F4F6;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.voice-message-action.primary {
    background: #22C55E;
    color: #FFFFFF;
}

.voice-message-action.danger {
    background: #FEE2E2;
    color: #B91C1C;
}

.voice-message-action:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.voice-message-preview-audio {
    width: min(260px, 42vw);
    height: 34px;
    flex: 0 1 auto;
}

.voice-message-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(239, 68, 68, 0.12);
}

.voice-message-progress::after {
    content: "";
    display: block;
    width: var(--voice-progress, 0%);
    height: 100%;
    background: #EF4444;
}

.voice-message-remaining {
    display: none;
}

@keyframes voice-record-pulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Own / Other message bubbles */
.msg-row {
    display: flex;
    width: 100%;
}
.msg-row.own { justify-content: flex-end; }
.msg-row.other { justify-content: flex-start; }

.msg-bubble {
    padding: 10px 16px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    max-width: 75%;
    position: relative;
    word-break: break-word;
}
.msg-bubble.image-bubble {
    padding: 6px;
    max-width: 210px;
}

.msg-bubble.audio-bubble {
    padding: 8px;
    max-width: 300px;
}

.msg-bubble.youtube-bubble {
    padding: 8px;
    max-width: 260px;
}

.msg-bubble.own {
    background: var(--primary-color);
    color: #ffffff;
    border-top-right-radius: 4px;
}

.msg-bubble.other {
    background: #ffffff;
    color: #111827;
    border-top-left-radius: 4px;
    border: 1px solid #F3F4F6;
}

.msg-row.is-mentioned .msg-bubble.other {
    border-color: #EC4899;
    box-shadow: 0 0 0 2px rgba(236, 72, 153, .18), 0 8px 18px rgba(15, 23, 42, .12);
}

.msg-row.is-mentioned .msg-bubble.other::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: #EC4899;
}

.msg-inline-mention {
    color: #FF1744;
    font-weight: 900;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Other bubble header */
.msg-other-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 6px;
}
.msg-other-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: -0.01em;
}
.msg-flashnick {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 220px;
    height: 36px;
}
.msg-flashnick-img {
    display: block;
    max-width: 220px;
    max-height: 36px;
    object-fit: contain;
}

.messages-container {
    background-color: #EDEDE5;
    background-image: url("/images/chat-room-bg.jpg");
    background-repeat: repeat;
}

.messages-list {
    gap: 11px;
    padding: 2px 0;
}

.msg-row,
.msg-row.own,
.msg-row.other {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    transform: translateX(var(--reply-swipe-x, 0));
    transition: transform .16s ease, opacity .16s ease;
}

.msg-row.own {
    align-self: flex-end;
    justify-content: flex-start;
    flex-direction: row-reverse;
    margin-left: auto;
    margin-right: 0;
}

.msg-row.other {
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
}

.msg-row.is-reply-swiping .msg-bubble {
    box-shadow: 0 0 0 1px rgba(33,168,243,.28), 0 10px 24px rgba(0,0,0,.24);
}

.msg-avatar-btn {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    margin-top: 3px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
    cursor: pointer;
    flex: 0 0 28px;
}

.msg-avatar-btn .dm-avatar,
.msg-avatar-btn .user-avatar-img {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.msg-bubble,
.msg-bubble.own,
.msg-bubble.other {
    max-width: min(360px, calc(100vw - 130px));
    min-width: 112px;
    padding: 7px 13px;
    border: 1px solid #E5E7EB;
    border-radius: 15px;
    background: #FFFFFF;
    color: #111827;
    box-shadow: 0 6px 18px rgba(15,23,42,.12);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.msg-bubble.own {
    background: #FFFFFF;
    color: #111827;
}

.msg-bubble.image-bubble {
    padding: 5px;
    max-width: min(260px, calc(100vw - 130px));
}

.msg-bubble.audio-bubble {
    max-width: min(320px, calc(100vw - 130px));
}

.msg-bubble .msg-other-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 5px;
    padding: 0;
    border: 0;
}

.msg-author-btn {
    min-width: 0;
    max-width: 145px;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
}

.msg-author-btn .msg-other-name {
    display: block;
    color: #359FF4;
    font-family: Arial, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.18;
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0;
}

.msg-author-btn .msg-other-name::after {
    content: " :";
}

.msg-author-btn .msg-flashnick::after {
    content: " :";
    display: inline-flex;
    align-items: center;
    margin-left: 3px;
    color: #359FF4;
    font-family: Arial, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.18;
}

.msg-bubble .msg-flashnick {
    height: 22px;
    max-width: 158px;
    overflow: hidden;
    vertical-align: text-bottom;
}

.msg-bubble .msg-flashnick-img {
    max-height: 22px;
    max-width: 145px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.msg-bubble .msg-other-time {
    color: #A9A9A9;
    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    flex-shrink: 0;
    align-self: flex-end;
    opacity: 1;
}

.msg-bubble .msg-text {
    margin: 0;
    color: var(--chat-message-text-color, #111827);
    font-family: Arial, "Segoe UI", sans-serif;
    font-size: var(--chat-message-font-size, 14px);
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0;
}

.msg-bubble .msg-text.msg-vibrate-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.msg-bubble .msg-vibrate-icon {
    flex-shrink: 0;
    color: #EF4444;
}

.msg-bubble .msg-vibrate-text {
    color: #EF4444;
    font-weight: 700;
}

.msg-bubble:is(.own, .other):has(.msg-other-header):not(.image-bubble):not(.audio-bubble):not(:has(.msg-reply-snippet)) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 4px;
    align-items: baseline;
}

.msg-bubble:is(.own, .other):has(.msg-other-header):not(.image-bubble):not(.audio-bubble):not(:has(.msg-reply-snippet)) .msg-other-header {
    display: contents;
}

.msg-bubble:is(.own, .other):has(.msg-other-header):not(.image-bubble):not(.audio-bubble):not(:has(.msg-reply-snippet)) .msg-author-btn {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
}

.msg-bubble:is(.own, .other):has(.msg-other-header):not(.image-bubble):not(.audio-bubble):not(:has(.msg-reply-snippet)) .msg-text {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: baseline;
}

.msg-bubble:is(.own, .other):has(.msg-other-header):not(.image-bubble):not(.audio-bubble):not(:has(.msg-reply-snippet)) .msg-other-time {
    grid-column: 3;
    grid-row: 1;
    align-self: baseline;
    margin-left: 6px;
}

.msg-reply-snippet {
    display: grid;
    gap: 1px;
    margin: 3px 0 5px;
    padding: 5px 7px;
    border-left: 3px solid #21A8F3;
    border-radius: 4px;
    background: rgba(255,255,255,.07);
}

.msg-reply-author {
    color: #8FD4FF;
    font-size: 11px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-reply-content {
    color: #B9C9D9;
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Yanıtlanan görsel: küçük thumbnail + metin yan yana */
.msg-reply-snippet.has-thumb {
    display: flex;
    align-items: center;
    gap: 7px;
}
.msg-reply-snippet.has-thumb .msg-reply-texts {
    display: grid;
    gap: 1px;
    min-width: 0;
}
.msg-reply-thumb {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.msg-image {
    border-radius: 5px;
}

.msg-audio {
    width: min(270px, calc(100vw - 154px));
    height: 34px;
}
.dm-display-name {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}
.flashnick-dm-img {
    display: block;
    max-width: 230px;
    max-height: 42px;
    object-fit: contain;
}
.dm-header-name {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    max-width: min(360px, 55vw);
    overflow: hidden;
}
.flashnick-header-img {
    display: block;
    max-width: 330px;
    max-height: 48px;
    object-fit: contain;
}
.dm-header-suffix {
    vertical-align: middle;
}

.dm-popup.hidden {
    display: none !important;
}

.dm-popup {
    position: fixed;
    inset: 0;
    z-index: 240;
    pointer-events: none;
}

.dm-popup-window {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(780px, calc(100vw - 72px));
    height: min(540px, calc(100dvh - 48px));
    display: grid;
    grid-template-columns: clamp(190px, 26vw, 220px) minmax(0, 1fr);
    overflow: hidden;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(15, 23, 42, .18);
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .34);
}

.dm-popup-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #E5E7EB;
    background: #FFFFFF;
}

.dm-popup-sidebar-title {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #0879F2;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 800;
    cursor: move;
    user-select: none;
    touch-action: none;
}

.dm-popup-list {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.dm-popup-list .dm-item {
    min-height: 50px;
    padding: 8px 10px;
    gap: 9px;
    border-bottom: 1px solid #EDF0F4;
    background: #FFFFFF;
}

.dm-popup-list .dm-item:hover {
    background: #F3F8FF;
}

.dm-popup-list .dm-item.active {
    background: #DCEEFF;
    box-shadow: inset 3px 0 0 #0879F2;
}

.dm-popup-list .dm-display-name {
    color: #111827;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
}

.dm-popup-list .flashnick-dm-img {
    max-width: 116px;
    max-height: 24px;
}

.dm-popup-empty {
    margin: 0;
    padding: 36px 12px;
    color: #6B7280;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.dm-popup-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    background: #F4EFE4;
}

.dm-popup-header {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    background: #0879F2;
    color: #FFFFFF;
    cursor: move;
    user-select: none;
    touch-action: none;
}

.dm-popup-title {
    min-width: 0;
    overflow: hidden;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dm-popup-title .dm-header-name {
    max-width: min(260px, 34vw);
}

.dm-popup-title .flashnick-header-img {
    max-width: min(220px, 30vw);
    max-height: 28px;
}

.dm-popup-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dm-popup-header-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: rgba(255,255,255,.16);
    color: #FFFFFF;
    cursor: pointer;
    touch-action: manipulation;
}

body.dm-popup-dragging,
body.dm-popup-dragging * {
    cursor: move !important;
    user-select: none !important;
}

.dm-popup-header-btn:hover {
    background: rgba(255,255,255,.24);
}

.dm-popup-header-btn.is-close {
    background: #FFFFFF;
    color: #111827;
}

.dm-popup-messages-container {
    position: relative;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px 14px;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.56), transparent 28%),
        linear-gradient(135deg, #F8F2E7 0%, #EFE7D7 100%);
}

.dm-popup-messages-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-popup-messages-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #7C6F5E;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    pointer-events: none;
}

.dm-popup .msg-row {
    max-width: 100%;
}

.dm-popup .msg-bubble {
    max-width: min(78%, 380px);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.dm-popup .msg-bubble.other {
    background: #FFFFFF;
    border-color: #F1F5F9;
}

.dm-popup .msg-bubble.own {
    background: #E7F2FF;
    border-color: #CFE7FF;
    color: #111827;
}

.dm-popup .msg-avatar-btn {
    width: 30px;
    height: 30px;
}

.dm-popup .msg-avatar-btn .dm-avatar,
.dm-popup .msg-avatar-btn .user-avatar-img {
    width: 30px !important;
    height: 30px !important;
}

.dm-popup-voice-status {
    padding: 8px 14px 0;
    background: #FFFFFF;
}

.dm-popup-voice-status.hidden {
    display: none;
}

.dm-popup-voice-status .voice-message-card {
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    background: #F8FAFC;
}

.dm-popup-input-area {
    min-height: 78px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid rgba(15, 23, 42, .08);
    background: #FFFFFF;
}

.dm-popup-tool-btn,
.dm-popup-send-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #8A8F98;
    cursor: pointer;
}

.dm-popup-tool-btn:hover,
.dm-popup-send-btn:hover {
    background: #F3F4F6;
    color: #374151;
}

.dm-popup-tool-btn:disabled,
.dm-popup-send-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.dm-popup-form {
    position: relative;
    min-width: 0;
    height: 46px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: #F3F4F6;
}

.dm-popup-input {
    flex: 1;
    min-width: 0;
    min-height: 34px;
    max-height: 78px;
    padding: 8px 46px 8px 16px;
    resize: none;
    border: 0;
    outline: none;
    background: transparent;
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.dm-popup-input::placeholder {
    color: #9CA3AF;
}

.dm-popup-send-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    background: #0879F2;
    color: #FFFFFF;
}

.dm-popup-send-btn:hover {
    background: #006DDD;
    color: #FFFFFF;
}

@media (max-width: 768px) {
    .dm-popup {
        display: none !important;
    }
}

@media (min-width: 769px) {
    body.dm-chat-active {
        --dm-window-width: min(780px, calc(100vw - 72px));
        --dm-window-height: min(540px, calc(100dvh - 48px));
        --dm-list-width: clamp(178px, 24vw, 220px);
        --dm-window-left: calc((100vw - var(--dm-window-width)) / 2);
        --dm-window-top: calc((100dvh - var(--dm-window-height)) / 2);
    }

    body.dm-chat-active .sidebar {
        position: fixed;
        left: var(--dm-window-left);
        top: var(--dm-window-top);
        width: var(--dm-list-width);
        min-width: var(--dm-list-width);
        max-width: var(--dm-list-width);
        height: var(--dm-window-height);
        z-index: 210;
        border: 1px solid rgba(15, 23, 42, .18);
        border-right: 0;
        border-radius: 8px 0 0 8px;
        overflow: hidden;
        background: #FFFFFF;
        box-shadow: 0 18px 46px rgba(15, 23, 42, .28);
        transform: none;
    }

    body.dm-chat-active .sidebar::before {
        content: 'Mesajlar';
        display: flex;
        align-items: center;
        min-height: 52px;
        padding: 0 14px;
        background: #0879F2;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
        flex-shrink: 0;
    }

    body.dm-chat-active .sidebar-tabbar,
    body.dm-chat-active .sidebar-search-area,
    body.dm-chat-active #user-subtab {
        display: none !important;
    }

    body.dm-chat-active .sidebar-scroll {
        background: #FFFFFF;
    }

    body.dm-chat-active #panel-mesajlar {
        min-height: 100%;
    }

    body.dm-chat-active #dm-list {
        margin: 0;
        padding: 0;
    }

    body.dm-chat-active .dm-item {
        min-height: 49px;
        gap: 9px;
        padding: 8px 10px;
        border-bottom: 1px solid #EDF0F4;
        background: #FFFFFF;
    }

    body.dm-chat-active .dm-item:hover {
        background: #F3F8FF;
    }

    body.dm-chat-active .dm-item.active {
        background: #DCEEFF;
        box-shadow: inset 3px 0 0 #0879F2;
    }

    body.dm-chat-active .dm-item .user-avatar,
    body.dm-chat-active .dm-item .user-avatar img {
        width: 32px !important;
        height: 32px !important;
    }

    body.dm-chat-active .dm-display-name {
        color: #111827;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.15;
    }

    body.dm-chat-active .flashnick-dm-img {
        max-width: 115px;
        max-height: 24px;
    }

    body.dm-chat-active .dm-unread {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        line-height: 1;
    }

    body.dm-chat-active #dm-empty {
        padding: 38px 12px !important;
        color: #6B7280 !important;
        font-size: 12px !important;
        line-height: 1.45;
    }

    body.dm-chat-active .chat-main {
        position: fixed;
        left: calc(var(--dm-window-left) + var(--dm-list-width));
        top: var(--dm-window-top);
        width: calc(var(--dm-window-width) - var(--dm-list-width));
        height: var(--dm-window-height);
        z-index: 211;
        border: 1px solid rgba(15, 23, 42, .18);
        border-left: 0;
        border-radius: 0 8px 8px 0;
        overflow: hidden;
        background: #F4EFE4;
        box-shadow: 12px 18px 46px rgba(15, 23, 42, .24);
    }

    body.dm-chat-active .chat-header {
        min-height: 52px;
        padding: 7px 12px;
        border: 0;
        background: #0879F2;
        color: #FFFFFF;
        box-shadow: none;
    }

    body.dm-chat-active .chat-header .header-room-name {
        max-width: 100%;
        color: #FFFFFF;
        font-size: 15px;
        line-height: 1.2;
        letter-spacing: 0;
        font-weight: 800;
    }

    body.dm-chat-active .chat-header .dm-header-name {
        max-width: min(260px, 36vw);
    }

    body.dm-chat-active .chat-header .flashnick-header-img {
        max-width: min(220px, 32vw);
        max-height: 28px;
    }

    body.dm-chat-active .chat-header .dm-header-suffix {
        font-weight: 700;
    }

    body.dm-chat-active .chat-header .header-meta {
        display: none;
    }

    body.dm-chat-active .chat-header .header-icon-btn {
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 6px;
        background: rgba(255,255,255,.16);
        color: #FFFFFF;
    }

    body.dm-chat-active .chat-header .header-icon-btn:hover {
        background: rgba(255,255,255,.24);
    }

    body.dm-chat-active .chat-header .dm-close-btn {
        background: #FFFFFF;
        color: #111827;
    }

    body.dm-chat-active .messages-container {
        padding: 16px 18px 14px;
        border-left: 0;
        background:
            radial-gradient(circle at 20% 20%, rgba(255,255,255,.55), transparent 28%),
            linear-gradient(135deg, #F8F2E7 0%, #EFE7D7 100%) !important;
        background-size: auto !important;
        background-position: center !important;
        background-repeat: repeat !important;
    }

    body.dm-chat-active .messages-watermark {
        color: #7C6F5E;
        opacity: .055;
    }

    body.dm-chat-active .messages-list {
        gap: 12px;
    }

    body.dm-chat-active .msg-row {
        max-width: 100%;
    }

    body.dm-chat-active .msg-bubble {
        max-width: min(78%, 380px);
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
    }

    body.dm-chat-active .msg-bubble.other {
        background: #FFFFFF;
        border-color: #F1F5F9;
    }

    body.dm-chat-active .msg-bubble.own {
        background: #E7F2FF;
        border-color: #CFE7FF;
        color: #111827;
    }

    body.dm-chat-active .msg-avatar-btn {
        width: 30px;
        height: 30px;
    }

    body.dm-chat-active .msg-avatar-btn .dm-avatar,
    body.dm-chat-active .msg-avatar-btn .user-avatar-img {
        width: 30px !important;
        height: 30px !important;
    }

    body.dm-chat-active .chat-status-stack {
        left: calc(var(--dm-window-left) + var(--dm-list-width) + 12px);
        right: calc(100vw - var(--dm-window-left) - var(--dm-window-width) + 12px);
        bottom: calc(100dvh - var(--dm-window-top) - var(--dm-window-height) + 74px);
        z-index: 213;
    }

    body.dm-chat-active .chat-input-area {
        height: 78px;
        padding: 10px 14px;
        border-top: 1px solid rgba(15, 23, 42, .08);
        background: #FFFFFF;
        box-shadow: none;
    }

    body.dm-chat-active .input-left-actions,
    body.dm-chat-active .input-right-actions {
        gap: 8px;
    }

    body.dm-chat-active .input-tool-btn,
    body.dm-chat-active .mic-btn {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        color: #8A8F98;
    }

    body.dm-chat-active .input-tool-btn:hover,
    body.dm-chat-active .mic-btn:hover {
        background: #F3F4F6;
        color: #374151;
    }

    body.dm-chat-active .msg-input-form {
        max-width: 320px;
        height: 46px;
        border-radius: 999px;
        background: #F3F4F6;
        border: 0;
    }

    body.dm-chat-active .msg-input {
        min-height: 34px;
        padding: 8px 46px 8px 16px;
        background: transparent;
        border: 0;
        color: #111827;
        font-size: 14px;
    }

    body.dm-chat-active .mobile-send-btn {
        right: 6px;
        width: 34px;
        height: 34px;
        background: #0879F2;
        color: #FFFFFF;
        box-shadow: none;
    }
}
.settings-username-display,
.pp-profile-display-name,
.profile-display-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    vertical-align: middle;
}
.settings-username-display {
    max-width: 260px;
    min-height: 40px;
}
.pp-profile-display-name,
.profile-display-name {
    max-width: 320px;
    min-height: 46px;
}
.flashnick-settings-img {
    display: block;
    max-width: 250px;
    max-height: 42px;
    object-fit: contain;
}
.flashnick-profile-img {
    display: block;
    max-width: 320px;
    max-height: 50px;
    object-fit: contain;
}
.msg-other-time {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0.55;
}

/* Own bubble footer */
.msg-own-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
    opacity: 0.6;
}
.msg-own-time { font-size: 9px; color: #6B7280; font-weight: 400; letter-spacing: 0; }

/* Message text */
.msg-text {
    font-family: Arial, "Segoe UI", sans-serif;
    font-size: var(--chat-message-font-size, 14px);
    line-height: 1.25;
    font-weight: 400;
    letter-spacing: 0;
    word-break: break-words;
}
.msg-text.own { color: var(--chat-message-text-color, #111827); font-weight: 400; }
.msg-text.other { color: var(--chat-message-text-color, #111827); font-weight: 400; }

/* Image message */
.msg-image {
    max-width: 170px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    cursor: pointer;
    transition: opacity 0.15s;
    margin-top: 0;
}
.msg-image:hover { opacity: 0.95; }
.msg-bubble.image-bubble .msg-own-footer { margin-top: 3px; }
.msg-audio {
    display: block;
    width: min(260px, 68vw);
    height: 36px;
}
.msg-bubble.audio-bubble .msg-own-footer { margin-top: 4px; }

.chat-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 280;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(3, 7, 18, .82);
    backdrop-filter: blur(4px);
}

body.chat-image-viewer-open {
    overflow: hidden;
}

.chat-image-viewer-card {
    position: relative;
    max-width: min(980px, 94vw);
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-image-viewer-img {
    display: block;
    max-width: min(980px, 94vw);
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

.chat-image-viewer-close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(15,23,42,.9);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
}

.chat-image-viewer-close:hover {
    background: rgba(30,41,59,.96);
}

/* Image preview modal */
.image-preview-backdrop {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, 0.62);
    backdrop-filter: blur(2px);
}

.image-preview-modal {
    width: min(640px, 94vw);
    max-height: min(760px, 92vh);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.image-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #E5E7EB;
}

.image-preview-header h2 {
    margin: 0;
    color: #111827;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0;
}

.image-preview-meta {
    margin: 4px 0 0;
    color: #6B7280;
    font-size: 12px;
    font-weight: 600;
}

.image-preview-close,
.image-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #ffffff;
    color: #6B7280;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.image-preview-close:hover,
.image-edit-btn:hover {
    color: #111827;
    border-color: #CBD5E1;
    background: #F9FAFB;
}

.image-preview-stage {
    padding: 20px;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    overflow: hidden;
}

#image-preview-canvas {
    width: 100%;
    max-width: 560px;
    max-height: 390px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.12);
}

.image-preview-animated {
    display: block;
    max-width: min(560px, 100%);
    max-height: 390px;
    border-radius: 8px;
    background: #ffffff;
    object-fit: contain;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.12);
}

.image-preview-tools.gif-preview-mode {
    display: none;
}

.image-preview-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid #E5E7EB;
    background: #ffffff;
}

.image-zoom-control {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
    color: #4B5563;
    font-size: 12px;
    font-weight: 700;
}

.image-zoom-control input {
    width: 100%;
    accent-color: var(--primary-color);
}

.image-preview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #E5E7EB;
    background: #F9FAFB;
}

.image-preview-send,
.image-preview-cancel {
    border: none;
    border-radius: 7px;
    padding: 9px 18px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

.image-preview-send {
    background: #22C55E;
}

.image-preview-cancel {
    background: #DC2626;
}

.image-preview-send:hover,
.image-preview-cancel:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.image-preview-send:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}

/* Empty state */
.messages-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333333;
    gap: 1rem;
}
.messages-empty svg { color: #333333; }
.messages-empty p { font-size: 1.125rem; color: #6B7280; }

/* ---- INPUT AREA  (Orijinal: beyaz bg, h-14) ---- */
.chat-input-area {
    height: 56px;
    background: #ffffff;
    border-top: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 -4px 20px -15px rgba(0,0,0,0.1);
}

.input-left-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9CA3AF;
}

.input-tool-btn {
    color: #AAAAAA;
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.input-tool-btn svg {
    width: 20px;
    height: 20px;
}
.input-tool-btn:hover { color: #374151; }
.input-tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.input-tool-btn.emoji-active { color: #EAB308; }
.input-tool-btn.gif-active { color: var(--primary-color); }
.input-tool-btn.active,
.live-btn.active { color: #22C55E; }
.live-btn.active:hover { color: #16A34A; }
.hand-raise-btn.active,
.hand-raise-btn.active:hover { color: #F97316; }
.camera-flip-btn,
.camera-flip-btn:hover { color: #8B5CF6; }
.voice-message-btn.active,
.voice-message-btn.active:hover { color: #EF4444; }
.radio-play-btn {
    width: 30px;
    height: 30px;
    justify-content: center;
}
.radio-play-btn.active { color: #2563EB; }

/* ---- EKLE (+) MENUSU ---- */
.attach-menu-wrap { position: relative; }

.attach-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 150;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 168px;
}

.attach-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: none;
    border-radius: 7px;
    cursor: pointer;
    color: #374151;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}
.attach-menu-item:hover { background: #F3F4F6; }
.attach-menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
.attach-menu-item:disabled:hover { background: none; }
.attach-menu-item svg { flex-shrink: 0; color: #6B7280; }
.attach-menu-item.voice-message-btn.active,
.attach-menu-item.voice-message-btn.active svg { color: #EF4444; }

.mention-target-wrap {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    height: 32px;
    margin-left: 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.mention-target-wrap::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    border: solid #111827;
    border-width: 0 2px 2px 0;
    pointer-events: none;
    transform: translateY(-68%) rotate(45deg);
}

.mention-target-wrap.hidden,
.mention-target-select.hidden {
    display: none !important;
}

.mention-target-wrap:hover,
.mention-target-wrap:focus-within {
    background: #FFFFFF;
    border-color: #F59E0B;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .16);
}

.mention-target-wrap.has-value {
    border-color: #F59E0B;
    background: #FFFBEB;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, .12);
}

.mention-target-check {
    position: relative;
    display: none;
    width: 15px;
    height: 15px;
    margin-left: 7px;
    color: #16A34A;
    flex: 0 0 15px;
}

.mention-target-check::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.mention-target-wrap.has-value .mention-target-check {
    display: block;
}

.mention-target-select {
    flex: 0 0 auto;
    width: 34px;
    height: 30px;
    max-width: 32vw;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    outline: none;
    padding: 0;
    cursor: pointer;
}

.mention-target-select option {
    background: #FFFFFF;
    color: #111827;
    font-weight: 500;
}

.mention-target-select.has-value {
    width: 104px;
    color: #92400E;
    padding: 0 24px 0 4px;
}

.admin-radio-channel-row {
    cursor: pointer;
}

.admin-radio-channel-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2563EB;
}

.admin-backup-panel {
    height: calc(100% - 42px);
    max-height: none;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #FFFFFF;
}

.admin-backup-note {
    margin-bottom: 14px;
    padding: 14px 16px;
    border-left: 4px solid #2563EB;
    background: #F8FAFC;
    color: #111827;
    font-size: 13px;
    line-height: 1.45;
}

.admin-backup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-backup-list {
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    overflow: hidden;
}

.admin-backup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #E5E7EB;
}

.admin-backup-row:last-child {
    border-bottom: 0;
}

.admin-backup-main {
    min-width: 0;
}

.admin-backup-main strong,
.admin-backup-main span,
.admin-backup-main small {
    display: block;
}

.admin-backup-main strong {
    color: #111827;
    font-size: 13px;
}

.admin-backup-main span {
    margin-top: 3px;
    color: #374151;
    font-size: 12px;
}

.admin-backup-main small {
    margin-top: 3px;
    overflow-wrap: anywhere;
    color: #6B7280;
    font-size: 11px;
}

.admin-backup-danger {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #FCA5A5;
    border-radius: 6px;
    background: #FEF2F2;
}

.admin-backup-danger > strong,
.admin-backup-danger > span {
    display: block;
}

.admin-backup-danger > strong {
    color: #991B1B;
    font-size: 14px;
}

.admin-backup-danger > span {
    margin: 5px 0 12px;
    color: #7F1D1D;
    font-size: 12px;
    line-height: 1.45;
}

/* Message input */
.msg-input-form {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0 1rem;
    min-width: 0;
    height: 42px;
    padding: 0 8px 0 24px;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: rgba(136,136,136,.10);
}

.mobile-send-btn {
    display: none;
}

.msg-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 28px;
    max-height: 86px;
    background: transparent;
    border: none;
    outline: none;
    color: #1F2937;
    font-size: 13px;
    line-height: 20px;
    padding: 4px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    resize: none;
    overflow-y: hidden;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg-input-form .msg-input {
    width: auto;
    background: transparent;
}
.msg-input::placeholder { color: #9CA3AF; }
.msg-input:disabled,
.msg-input[readonly] { opacity: 0.72; cursor: default; }

/* Right actions */
.input-right-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9CA3AF;
}

.live-media-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.mic-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 4px;
    border-radius: 6px;
    background: none;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.mic-btn svg {
    width: 20px;
    height: 20px;
}
.mic-btn:hover { color: #374151; background: #F3F4F6; }
.mic-btn.active {
    color: #22C55E;
    background: none;
    padding: 4px;
    box-shadow: none;
}
.mic-btn.active:hover { color: #16A34A; background: #F3F4F6; }
.mic-btn.active .mic-icon { animation: none; }

/* ---- EMOJI PICKER ---- */
.emoji-picker-container {
    position: absolute;
    bottom: 100%;
    left: 1rem;
    z-index: 150;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    max-height: 360px;
    overflow: hidden;
    width: 340px;
}

.emoji-picker-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid #E5E7EB;
}

.emoji-picker-tab {
    height: 30px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #6B7280;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.emoji-picker-tab:hover {
    color: #374151;
    background: #F3F4F6;
}

.emoji-picker-tab.active {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: #F9FAFB;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.emoji-btn {
    font-size: 1.375rem;
    background: none;
    border: none;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s, transform 0.1s;
    line-height: 1;
}
.emoji-btn:hover { background: #F3F4F6; transform: scale(1.2); }

/* ---- GIF PICKER ---- */
.gif-picker-container {
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

.gif-search-wrap { padding: 10px; }
.gif-search-inp {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #374151;
}
.gif-search-inp::placeholder { color: #9CA3AF; }

.gif-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 0 10px 10px;
    max-height: 280px;
    overflow-y: auto;
}
.gif-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    background: #F3F4F6;
}
.gif-img:hover { opacity: 0.85; transform: scale(1.02); }
.gif-empty { padding: 1rem; text-align: center; color: #9CA3AF; font-size: 13px; }

/* ---- YOUTUBE VIDEO CARD (mesaj balonu icinde) ---- */
.msg-youtube-card {
    width: 100%;
}

.msg-youtube-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    border-radius: 10px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    background: #111827;
}

.msg-youtube-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.msg-youtube-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(17, 24, 39, 0.15);
    transition: background 0.15s;
}
.msg-youtube-play svg {
    width: 44px;
    height: 44px;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45));
}
.msg-youtube-thumb:hover .msg-youtube-play { background: rgba(17, 24, 39, 0.3); }

.msg-youtube-duration {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 11px;
    line-height: 1.5;
}

.msg-youtube-meta { padding: 6px 2px 2px; }
.msg-youtube-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.msg-youtube-channel {
    margin: 2px 0 0;
    font-size: 12px;
    opacity: 0.7;
}

.msg-youtube-frame {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    border-radius: 10px;
    display: block;
}

/* ---- YOUTUBE ARAMA MODALI ---- */
.youtube-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, 0.62);
    backdrop-filter: blur(2px);
}

.youtube-search-card {
    width: min(380px, 94vw);
    max-height: min(480px, 92vh);
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.youtube-search-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #F3F4F6;
}
.youtube-search-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}
.youtube-search-close {
    border: none;
    background: none;
    font-size: 18px;
    line-height: 1;
    color: #6B7280;
    cursor: pointer;
    padding: 2px 6px;
}
.youtube-search-close:hover { color: #111827; }

.youtube-search-input-wrap {
    position: relative;
    padding: 10px;
}
.youtube-search-inp {
    width: 100%;
    padding: 8px 32px 8px 14px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #374151;
}
.youtube-search-inp::placeholder { color: #9CA3AF; }
.youtube-search-icon {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
    pointer-events: none;
}

.youtube-search-results {
    padding: 0 10px 10px;
    overflow-y: auto;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.youtube-search-status { padding: 1rem; text-align: center; color: #9CA3AF; font-size: 13px; }

.youtube-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}
.youtube-result-row:hover { background: #F3F4F6; }
.youtube-result-row img {
    width: 72px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: #E5E7EB;
}
.youtube-result-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.youtube-result-title {
    font-size: 12.5px;
    font-weight: 500;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.youtube-result-channel {
    font-size: 11.5px;
    color: #9CA3AF;
}

.youtube-confirm-view {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.youtube-confirm-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 8px;
    background: #E5E7EB;
}
.youtube-confirm-title {
    margin: 8px 0 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
}
.youtube-confirm-channel {
    margin: 0;
    font-size: 12px;
    color: #9CA3AF;
}
.youtube-confirm-question {
    margin: 10px 0 4px;
    font-size: 13px;
    color: #374151;
}
.youtube-confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.youtube-confirm-actions button {
    flex: 1;
    padding: 8px 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #E5E7EB;
}
.youtube-confirm-cancel {
    background: #ffffff;
    color: #374151;
}
.youtube-confirm-cancel:hover { background: #F3F4F6; }
.youtube-confirm-send {
    background: var(--primary-color);
    color: #ffffff;
    border-color: var(--primary-color);
}
.youtube-confirm-send:hover { opacity: 0.92; }

/* ====================================================
   USER PROFILE MODAL
   ==================================================== */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
    padding: 1rem;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.profile-modal {
    background: #111111;
    border: 1px solid #1E1E1E;
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.25s ease;
    padding: 1.5rem;
    color: #ffffff;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #6B7280;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s, color 0.15s;
}
.modal-close-btn:hover { background: rgba(255,255,255,0.08); color: #ffffff; }

.profile-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    cursor: move;
    touch-action: none;
}

.profile-avatar-lg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #1E1E1E;
    object-fit: cover;
}

#profile-modal-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ffffff;
}
.profile-role-tag {
    font-size: 11px;
    color: #6B7280;
    background: #1E1E1E;
    border: 1px solid #2A2A2A;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 4px;
}
/* Dinamik badge (is-ascii / is-legacy) kendi stilini taşır; dış container sıfırlanır */
.profile-role-tag.has-dynamic-badge {
    background: transparent;
    border-color: transparent;
    padding: 0;
    margin-top: 2px;
}

.profile-actions-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #1E1E1E;
}

.prof-btn {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s;
    font-family: Arial, Helvetica, sans-serif;
}
.prof-btn:hover { opacity: 0.85; }
.prof-btn.msg { background: #1E1E1E; color: #ffffff; border: 1px solid #2A2A2A; }
.prof-btn.friend { background: var(--primary-color); color: #ffffff; }
.prof-btn.friend-sent { background: #2A2A2A; color: #6B7280; cursor: default; }
.prof-btn.accept { background: #22C55E; color: #ffffff; }
.prof-btn.block { background: rgba(239,68,68,0.15); color: #EF4444; border: 1px solid rgba(239,68,68,0.3); }
.prof-btn.unblock { background: rgba(34,197,94,0.15); color: #22C55E; border: 1px solid rgba(34,197,94,0.3); }
.profile-admin-menu {
    position: relative;
    display: inline-flex;
}
.profile-actions-row > .profile-admin-menu {
    position: absolute;
    top: 10px;
    right: 46px;
    z-index: 12;
}
.profile-admin-menu-btn {
    background: #DC2626;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 4px;
    line-height: 1;
}
.profile-admin-menu-btn::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}
.profile-admin-menu-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    padding: 6px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.12);
    box-shadow: 0 16px 38px rgba(0,0,0,0.22);
    z-index: 420;
}
.profile-admin-menu-list.hidden {
    display: none;
}
.profile-admin-menu-item {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #111827;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}
.profile-admin-menu-item:hover {
    background: #F3F4F6;
}
.profile-admin-info-backdrop {
    position: fixed;
    inset: 0;
    z-index: 520;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,0,0,0.55);
}
.profile-admin-info-panel {
    width: min(420px, 100%);
    max-height: min(620px, 90vh);
    overflow: auto;
    border-radius: 8px;
    background: #111827;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 22px 50px rgba(0,0,0,0.36);
    padding: 18px;
}
.profile-admin-info-panel h3 {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 17px;
}
.profile-admin-info-body {
    display: grid;
    gap: 8px;
}
.profile-admin-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: #9CA3AF;
    font-size: 13px;
}
.profile-admin-info-row strong {
    color: #F9FAFB;
    font-weight: 700;
    text-align: right;
}
.profile-admin-info-subtitle {
    margin-top: 8px;
    color: #60A5FA;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.profile-admin-info-close {
    width: 100%;
    margin-top: 16px;
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    background: var(--primary-color);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}
.profile-guest-note {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.28);
    color: #F59E0B;
    font-size: 12px;
    line-height: 1.35;
}

/* Comments */
.comments-title {
    font-size: 13px;
    color: #9CA3AF;
    font-weight: 600;
    margin-bottom: 12px;
}

.comment-form { margin-bottom: 12px; }
.comment-textarea {
    width: 100%;
    background: #1A1A1A;
    border: 1px solid #2A2A2A;
    border-radius: 8px;
    color: #ffffff;
    padding: 8px 12px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    resize: none;
    outline: none;
    margin-bottom: 8px;
}
.comment-textarea::placeholder { color: #4B5563; }

.btn-comment {
    padding: 6px 14px;
    background: var(--primary-color);
    color: #ffffff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: Arial, Helvetica, sans-serif;
}
.btn-comment:hover { opacity: 0.85; }

.comment-item {
    padding: 10px 0;
    border-bottom: 1px solid #1A1A1A;
}
.comment-item.is-pending { opacity: 0.92; }
.comment-head,
.comment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.comment-author { font-size: 12px; font-weight: 700; color: #9CA3AF; margin-bottom: 3px; }
.comment-body { font-size: 13px; color: #D1D5DB; line-height: 1.5; }
.comment-date { font-size: 10px; color: #4B5563; margin-top: 2px; }
.comment-status {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
}
.comment-status.pending {
    color: #92400E;
    background: #FEF3C7;
}
.comment-actions {
    display: flex;
    gap: 6px;
}
.comment-action {
    border: 0;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.comment-action.approve {
    color: #065F46;
    background: #D1FAE5;
}
.comment-action.delete {
    color: #991B1B;
    background: #FEE2E2;
}

/* Sidebar profile panel */
.profile-sidebar-panel {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 75;
    width: 400px;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #334155;
    box-shadow: 6px 0 22px rgba(15,23,42,0.14);
    animation: profileSidebarIn 0.16s ease;
}

.profile-sidebar-panel.hidden {
    display: none !important;
}

@keyframes profileSidebarIn {
    from { opacity: 0.88; transform: translateX(-14px); }
    to { opacity: 1; transform: translateX(0); }
}

.profile-sidebar-panel .profile-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    color: #334155;
    box-shadow: none;
    animation: none;
}

.profile-sidebar-panel .modal-close-btn {
    top: 17px;
    left: 12px;
    right: auto;
    z-index: 4;
    width: 34px;
    height: 34px;
    color: transparent;
    background: transparent;
    border-radius: 999px;
}

.profile-sidebar-panel .modal-close-btn::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-left: 4px;
    border-left: 2px solid #94A3B8;
    border-bottom: 2px solid #94A3B8;
    transform: rotate(45deg);
}

.profile-sidebar-panel .modal-close-btn:hover {
    background: #F1F5F9;
}

.profile-sidebar-panel .profile-top {
    min-height: 70px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 120px 9px 56px;
    border-bottom: 1px solid #EEF2F7;
    background: #ffffff;
    cursor: default;
    touch-action: auto;
}

.profile-sidebar-panel .profile-top::before {
    content: "\2642";
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563EB;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.profile-sidebar-panel.is-female .profile-top::before {
    content: "\2640";
    color: #DB2777;
}

.profile-sidebar-panel .profile-top > div {
    min-width: 0;
}

.profile-sidebar-panel .profile-name {
    margin: 0;
    color: #111827;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}

.profile-sidebar-panel .profile-display-name {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-sidebar-panel .profile-role-tag {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8B93A1;
    font-size: 14px;
    font-weight: 400;
}

.profile-sidebar-panel .profile-actions-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #EEF2F7;
    background: #ffffff;
}

.profile-sidebar-panel .prof-btn {
    min-height: 62px;
    padding: 6px 7px;
    border: 0;
    border-right: 1px solid #EEF2F7;
    border-radius: 0;
    background: #ffffff;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.profile-sidebar-panel .prof-btn:last-child {
    border-right: 0;
}

.profile-sidebar-panel .prof-btn:hover {
    background: #F8FAFC;
    opacity: 1;
}

.profile-sidebar-panel .prof-btn.msg { color: #2563EB; }
.profile-sidebar-panel .prof-btn.friend,
.profile-sidebar-panel .prof-btn.accept { color: #16A34A; }
.profile-sidebar-panel .prof-btn.friend-sent { color: #94A3B8; }
.profile-sidebar-panel .prof-btn.block,
.profile-sidebar-panel .prof-btn.unblock { color: #DC2626; }

.profile-sidebar-panel .profile-actions-row > .profile-admin-menu {
    position: absolute;
    top: -62px;
    right: 10px;
    z-index: 5;
}

.profile-sidebar-panel .profile-admin-menu-btn {
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 4px;
    background: #DC2626;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(220,38,38,0.22);
}

.profile-sidebar-panel .profile-admin-menu-list {
    z-index: 90;
}

.profile-sidebar-avatar-stage {
    position: relative;
    height: 280px;
    padding: 18px;
    box-sizing: border-box;
    background: #F3F4F6;
    border-bottom: 1px solid #EEF2F7;
}

.profile-sidebar-panel #profile-modal-avatar {
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: transparent;
}

.profile-sidebar-panel .profile-sidebar-avatar-img {
    display: block;
    width: clamp(170px, 50vw, 220px) !important;
    height: clamp(170px, 50vw, 220px) !important;
    max-width: 100%;
    max-height: 244px;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
}

.profile-sidebar-panel .comments-title {
    margin: 0;
    padding: 13px 16px;
    border-bottom: 1px solid #EEF2F7;
    color: #9CA3AF;
    background: #ffffff;
    font-size: 14px;
    font-weight: 400;
}

.profile-sidebar-panel .comment-form {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid #EEF2F7;
    background: #ffffff;
}

.profile-sidebar-panel .comment-textarea {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #111827;
}

.profile-sidebar-panel .comment-textarea::placeholder {
    color: #9CA3AF;
}

.profile-sidebar-panel #profile-comments-list {
    padding: 16px;
    color: #64748B;
}

.profile-sidebar-panel #profile-comments-list > p {
    margin: 0;
    padding: 24px 0 !important;
    color: #9CA3AF !important;
    text-align: center;
    font-size: 15px !important;
}

.profile-sidebar-panel .comment-item {
    border-bottom: 1px solid #EEF2F7;
}

.profile-sidebar-panel .comment-item.is-pending {
    background: #FFFBEB;
    margin: 0 -8px 8px;
    padding: 10px 8px;
    border-radius: 8px;
}

.profile-sidebar-panel .comment-author {
    color: #334155;
}

.profile-sidebar-panel .comment-body {
    color: #475569;
}

.profile-sidebar-panel .comment-date {
    color: #94A3B8;
}

.profile-sidebar-panel .profile-guest-note {
    grid-column: 1 / -1;
    margin: 10px 12px;
    color: #B45309;
    background: #FFFBEB;
    border-color: #FDE68A;
}

@media (max-width: 768px) {
    .profile-sidebar-panel {
        width: min(92vw, 410px);
        z-index: 80;
    }
}

/* ====================================================
   CALL OVERLAY
   ==================================================== */

.call-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.call-card {
    background: #1A1A1A;
    border: 1px solid #2A2A2A;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    width: min(92vw, 720px);
    min-width: 280px;
    animation: slideUp 0.25s ease;
}

.call-drag-handle {
    display: none;
}

.call-video-grid {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 14px;
    background: #050505;
    border: 1px solid rgba(255,255,255,0.08);
}

.call-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000000;
    display: block;
}

.call-video-tile {
    position: absolute;
    inset: 0;
}

.call-video-tile-local {
    inset: auto 12px 12px auto;
    width: min(30%, 170px);
    height: auto;
    aspect-ratio: 16 / 10;
    border: 2px solid rgba(255,255,255,0.85);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    overflow: hidden;
    z-index: 2;
}

.call-video-tile:not(.has-video) .call-video {
    visibility: hidden;
}

.call-video-placeholder {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: #2A2A2A;
}

.call-video-tile:not(.has-video) .call-video-placeholder {
    display: flex;
}

.call-avatar-tile {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    background: #3A3A3A;
}

.call-video-tile-local .call-avatar-tile {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
}

.call-video-grid:not(.has-video) {
    display: none;
}

.call-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    background: #2A2A2A;
}

.call-name { font-size: 1.25rem; font-weight: 700; color: #ffffff; margin-bottom: 4px; }
.call-status { font-size: 13px; color: #6B7280; margin-bottom: 1.5rem; }

.call-btns {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.call-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, transform 0.1s;
    font-size: 1.25rem;
}
.call-btn:hover { opacity: 0.85; transform: scale(1.05); }
.call-btn-green, .call-btn-accept { background: #22C55E; color: #ffffff; }
.call-btn-red, .call-btn-reject { background: #EF4444; color: #ffffff; }
.call-btn-gray, .call-btn-mute { background: #374151; color: #ffffff; }
.call-btn-video { background: #2563EB; color: #ffffff; }
.call-btn-camera-flip { background: #7C3AED; color: #ffffff; }
.call-btn-mute.is-muted {
    background: #7F1D1D;
    color: #FCA5A5;
}
.call-btn-video.is-off {
    background: #374151;
    color: #CBD5E1;
}

@media (min-width: 769px) {
    .call-overlay {
        background: transparent;
        backdrop-filter: none;
        pointer-events: none;
    }

    .call-card {
        width: min(520px, calc(100vw - 32px));
        max-height: calc(100dvh - 32px);
        min-width: 320px;
        padding: 0 18px 18px;
        overflow: auto;
        border-radius: 10px;
        pointer-events: auto;
        animation: none;
        box-shadow: 0 24px 64px rgba(0,0,0,0.42);
    }

    .call-drag-handle {
        position: sticky;
        top: 0;
        z-index: 3;
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 -18px 16px;
        padding: 0 15px;
        background: #0879F2;
        color: #FFFFFF;
        font-size: 14px;
        font-weight: 800;
        cursor: move;
        user-select: none;
        touch-action: none;
    }

    .call-video-grid {
        margin-bottom: 14px;
        border-radius: 8px;
    }

    .call-avatar {
        width: 68px;
        height: 68px;
        margin-bottom: 12px;
    }

    .call-name {
        font-size: 1.05rem;
    }

    .call-status {
        margin-bottom: 1rem;
    }

    .call-btn {
        width: 48px;
        height: 48px;
    }

    body.call-window-dragging,
    body.call-window-dragging * {
        cursor: move !important;
        user-select: none !important;
    }
}

/* ====================================================
   RESPONSIVE / MOBILE  (SEO + Mobil Uyumlu)
   ==================================================== */

/* Hamburger (mobile sidebar toggle) */
.mobile-menu-btn {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 1rem;
    z-index: 50;
    width: 44px;
    height: 44px;
    background: var(--primary-color);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 4px 12px var(--primary-border);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 19;
}

.mobile-topbar,
.mobile-edge-toggle {
    display: none;
}

@media (max-width: 768px) {
    body {
        background: #ffffff;
        overscroll-behavior: none;
    }

    .chat-app {
        position: relative;
        background: #ffffff;
    }

    .mobile-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 58px;
        padding: 0 14px 0 18px;
        background: var(--primary-color);
        border-bottom: 1px solid var(--primary-border);
        flex-shrink: 0;
        z-index: 16;
        box-shadow: 0 2px 12px rgba(15,23,42,.14);
    }

    .mobile-topbar-brand {
        min-width: 0;
        max-width: 42vw;
        color: #ffffff;
        font-size: 18px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0;
        text-align: left;
    }

    .mobile-topbar-actions {
        display: flex;
        align-items: center;
        gap: 18px;
        color: rgba(255,255,255,.9);
    }

    .mobile-topbar-btn {
        position: relative;
        width: 30px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,.92);
    }

    .mobile-topbar-badge {
        position: absolute;
        top: -6px;
        right: -10px;
        min-width: 22px;
        height: 22px;
        padding: 0 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #ffffff;
        color: var(--primary-color);
        border: 1px solid rgba(255,255,255,.55);
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    .chat-header {
        display: none;
    }

    body.dm-chat-active .chat-header {
        min-height: 52px;
        display: flex;
        padding: 7px 10px 7px 14px;
        border-top: 0;
        border-bottom-color: #E5E7EB;
        background: #FFFFFF;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    }

    body.dm-chat-active .chat-header .header-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    body.dm-chat-active .chat-header .header-right {
        flex: 0 0 auto;
        gap: 6px;
    }

    body.dm-chat-active .chat-header .header-room-name {
        display: flex;
        align-items: center;
        min-width: 0;
        max-width: 100%;
        font-size: 15px;
        line-height: 1.15;
        letter-spacing: 0;
        overflow: hidden;
    }

    body.dm-chat-active .chat-header .dm-header-name {
        max-width: min(50vw, 220px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.dm-chat-active .chat-header .flashnick-header-img {
        max-width: min(48vw, 190px);
        max-height: 28px;
    }

    body.dm-chat-active .chat-header .dm-header-suffix,
    body.dm-chat-active .chat-header .header-meta {
        display: none;
    }

    body.dm-chat-active .chat-header .header-icon-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: 999px;
        background: #F1F5F9;
        color: #0F172A;
    }

    body.dm-chat-active .chat-header .header-icon-btn svg {
        width: 18px;
        height: 18px;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 35;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: min(74vw, 410px);
        min-width: min(74vw, 410px);
        max-width: 410px;
        border-right: 1px solid #E5E7EB;
        box-shadow: 8px 0 28px rgba(15,23,42,.16);
        padding-top: 72px;
    }

    .sidebar.mobile-drawer-right {
        left: auto;
        right: 0;
        transform: translateX(100%);
        width: min(82vw, 470px);
        min-width: min(82vw, 470px);
        max-width: 470px;
        border-right: none;
        border-left: 1px solid #E5E7EB;
        box-shadow: -8px 0 28px rgba(15,23,42,.16);
    }

    .sidebar.mobile-drawer-left {
        left: 0;
        right: auto;
        transform: translateX(-100%);
    }

    .sidebar.open { transform: translateX(0); }

    .sidebar::before {
        content: attr(data-mobile-title);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 52px;
        background: rgba(255,255,255,.98);
        border-bottom: 1px solid #E5E7EB;
        color: #111827;
        font-size: 20px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        z-index: 2;
    }

    .sidebar.mobile-drawer-left::before {
        content: "Odalar";
    }

    .sidebar-tabbar {
        display: none;
    }

    .sidebar-search-area {
        padding: 12px 16px 10px;
        gap: 10px;
    }

    .search-input {
        height: 42px;
        border: none;
        background: #F0F0F2;
        font-size: 18px;
        padding-left: 42px;
        padding-right: 14px;
        border-radius: 10px;
    }

    .search-icon {
        left: 14px;
        right: auto;
        width: 20px;
        height: 20px;
        color: #9CA3AF;
    }

    .sidebar-overlay {
        display: block;
        z-index: 30;
        background: transparent;
    }
    .sidebar-overlay.hidden { display: none; }

    .mobile-menu-btn { display: none !important; }

    .mobile-edge-toggle {
        position: absolute;
        top: 39%;
        z-index: 18;
        width: 32px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        color: var(--primary-color);
        border: 1px solid rgba(15,23,42,.08);
        box-shadow: 0 5px 15px rgba(15,23,42,.14);
        font-size: 30px;
        line-height: 1;
    }

    .mobile-edge-left {
        left: 0;
        border-radius: 0 999px 999px 0;
        transform: translateX(-2px);
    }

    .mobile-edge-right {
        right: 0;
        border-radius: 999px 0 0 999px;
        flex-direction: column;
        gap: 2px;
        transform: translateX(2px);
    }

    .mobile-edge-right > span:last-child {
        transform: rotate(180deg);
    }

    .mobile-edge-count {
        min-width: 24px;
        height: 20px;
        padding: 0 5px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--primary-color);
        color: #ffffff;
        font-size: 11px;
        font-weight: 800;
    }

    .chat-main { width: 100%; }

    .live-video-stage {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-height: none;
        z-index: 12;
        flex-shrink: 0;
        padding: 8px 8px 15px;
        overflow: hidden;
        background: transparent;
        border-bottom: 1px solid rgba(148, 163, 184, 0.22);
        box-shadow: none;
        pointer-events: auto;
        touch-action: pan-x;
        user-select: none;
    }

    .live-video-stage.is-resizing {
        touch-action: none;
    }

    .live-video-grid {
        display: grid;
        grid-template-columns: var(--live-grid-columns, repeat(var(--live-slot-count, 3), minmax(0, 1fr)));
        align-items: stretch;
        flex-wrap: initial;
        gap: var(--live-slot-gap, clamp(4px, 1.4vw, 8px));
        max-height: none;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: 0;
        scrollbar-width: none;
    }

    .live-video-grid::-webkit-scrollbar { display: none; }

    .live-video-stage.has-mobile-slots .live-video-resize-handle {
        position: absolute;
        left: 50%;
        bottom: 2px;
        width: 54px;
        height: 12px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transform: translateX(-50%);
        border: 0;
        border-radius: 999px;
        background: transparent;
        cursor: ns-resize;
        touch-action: none;
    }

    .live-video-stage.has-mobile-slots .live-video-resize-handle::before {
        content: "";
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.58);
    }

    .live-video-stage.has-mobile-slots .live-video-resize-handle:focus-visible::before {
        background: #60A5FA;
        box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.28);
    }

    .live-video-tile {
        flex: initial;
        width: 100%;
        min-width: 0;
        height: var(--live-slot-height, clamp(46px, 16vw, 74px));
        min-height: 0;
        aspect-ratio: auto;
        border-radius: 8px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.28);
    }

    .live-video-tile:not(.has-video) {
        width: 100%;
        min-width: 0;
        height: var(--live-slot-height, clamp(46px, 16vw, 74px));
        aspect-ratio: auto;
        border-radius: 10px;
        /* .live-video-tile.is-occupied:not(.has-video) (line ~1754) is more specific
           (3 classes) and would otherwise win with its dark gradient background. */
        background: transparent !important;
        border: none;
        box-shadow: none !important;
        overflow: visible;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 2px;
    }

    .live-video-tile:not(.has-video) .live-seat-profile {
        position: static;
        inset: auto;
        background: none;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .live-video-tile:not(.has-video) .live-seat-avatar {
        width: min(calc(var(--live-slot-height, clamp(46px, 16vw, 74px)) * 0.68), 100%);
        height: auto;
        aspect-ratio: 1;
        flex: 0 0 auto;
    }

    .live-video-tile:not(.has-video) .live-video-label {
        position: static;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        background: none;
        color: #FFFFFF;
        text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 4px rgba(0,0,0,0.45);
        font-size: var(--live-slot-label-size, 9px);
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 0 0 auto;
    }

    .live-video-slot {
        width: 100%;
        min-width: 0;
        height: var(--live-slot-height, clamp(46px, 16vw, 74px));
        min-height: 0;
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 2px;
        border-radius: 10px;
        background: transparent;
    }

    .live-video-slot-mark {
        width: min(calc(var(--live-slot-height, clamp(46px, 16vw, 74px)) * 0.68), 100%);
        height: auto;
        aspect-ratio: 1;
        flex: 0 0 auto;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #FFFFFF;
        color: var(--primary-color, #2196F3);
        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    }

    .live-video-slot-mark svg {
        width: 55%;
        height: 55%;
    }

    .live-video-slot-text {
        width: 100%;
        color: #FFFFFF;
        text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 4px rgba(0,0,0,0.45);
        font-size: var(--live-slot-text-size, clamp(8px, 2.35vw, 11px));
        font-weight: 700;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 0 0 auto;
    }

    .live-seat-avatar {
        width: var(--live-slot-avatar-size, clamp(28px, 9vw, 44px));
        height: var(--live-slot-avatar-size, clamp(28px, 9vw, 44px));
        background: transparent;
        box-shadow: none;
    }

    .live-video-label {
        left: 6px;
        bottom: 6px;
        max-width: calc(100% - 12px);
        padding: 3px 6px;
        font-size: var(--live-slot-label-size, 9px);
    }

    .messages-container {
        padding: 14px 12px 88px;
        border-left: none;
    }

    .chat-status-stack {
        position: fixed;
        left: 8px;
        right: auto;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        z-index: 300;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 6px;
        width: auto;
        max-width: calc(100vw - 84px);
        background: transparent;
        pointer-events: none;
    }

    .chat-status-stack > * {
        pointer-events: auto;
    }

    .typing-strip,
    .reply-preview,
    .voice-message-status {
        padding: 0;
    }

    .typing-strip {
        flex: 0 1 auto;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        max-width: calc(100vw - 84px);
        overflow: visible;
    }

    .typing-strip .typing-bubble {
        max-width: min(190px, 48vw);
        min-height: 24px;
        background: #FFFFFF;
        border-color: rgba(15, 23, 42, 0.12);
        color: #111827;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.16);
    }

    .typing-strip .typing-label,
    .typing-strip .typing-more {
        color: #111827;
    }

    .reply-preview {
        flex: 0 1 auto;
        max-width: min(62vw, 270px);
    }

    .reply-preview-inner {
        min-height: 34px;
        padding: 6px 8px 6px 10px;
        background: #FFFFFF;
        color: #111827;
        border-left-color: #21A8F3;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
    }

    .reply-preview-label {
        color: #4B5563;
    }

    .reply-preview-copy strong,
    .reply-preview-copy span:last-child {
        color: #111827;
    }

    .reply-preview-close {
        background: #F3F4F6;
        color: #111827;
    }

    .voice-message-status {
        flex: 0 1 auto;
        max-width: min(78vw, 340px);
    }

    .voice-message-card {
        flex-wrap: wrap;
        gap: 7px;
        min-height: 40px;
        padding: 7px 8px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
    }

    .voice-message-copy {
        flex: 1 1 120px;
    }

    .voice-message-actions {
        gap: 4px;
    }

    .voice-message-action {
        min-height: 28px;
        padding: 5px 8px;
        font-size: 11px;
    }

    .voice-message-preview-audio {
        order: 3;
        width: 100%;
        height: 32px;
        flex-basis: 100%;
    }

    .msg-bubble {
        max-width: 86%;
        border-radius: 18px;
        padding: 10px 14px;
    }

    .msg-bubble.other {
        background: #FFFFFF;
        color: #111827;
        border-color: #E5E7EB;
    }

    .msg-text.own,
    .msg-text.other {
        color: var(--chat-message-text-color, #111827);
        font-size: var(--chat-message-font-size, 14px);
        line-height: 1.25;
        font-weight: 400;
    }

    .entry-effect-layer {
        top: 6px;
        gap: 4px;
        padding: 0 8px;
    }

    .entry-effect-toast {
        min-width: 0;
        width: 100%;
        max-width: none;
        min-height: 30px;
        padding: 7px 12px;
        border-radius: 7px;
    }

    .entry-effect-toast.has-media {
        width: 100%;
        height: clamp(84px, 28vw, 150px);
        border-radius: 7px;
    }

    .entry-effect-toast.has-media .entry-effect-text {
        left: 8px;
        right: 8px;
        bottom: 7px;
        padding: 5px 8px;
        border-radius: 11px;
    }

    .entry-effect-text {
        font-size: 11px;
        line-height: 1.2;
    }

    .room-desc-text { display: none; }
    .header-room-name { font-size: 1rem; }
    .chat-input-area {
        --mobile-right-action-space: 42px;
        min-height: 58px;
        height: auto;
        padding: 8px 7px;
        gap: 5px;
        align-items: flex-end;
        background: rgba(255,255,255,.98);
    }

    .chat-input-area.is-live-connected {
        --mobile-right-action-space: 42px;
    }

    .msg-input-form {
        min-width: 0;
        flex: 1 1 auto;
        margin: 0 var(--mobile-right-action-space) 0 2px;
        min-height: 40px;
        height: auto;
        border: 1px solid #D1D5DB;
        border-radius: 20px;
        background: #ffffff;
        padding: 4px 4px 4px 12px;
        gap: 4px;
        align-items: flex-end;
    }

    .chat-input-area.is-composing .input-right-actions {
        display: flex;
    }

    .chat-input-area.is-composing .msg-input-form {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
    }

    .msg-input-form.is-expanded {
        border-radius: 16px;
    }

    .msg-input {
        min-width: 0;
        min-height: 30px;
        max-height: min(112px, 28vh);
        font-size: 16px;
        line-height: 20px;
        background: #ffffff;
        border: none;
        padding: 5px 2px;
    }

    .input-tool-btn {
        width: clamp(30px, 8.5vw, 36px);
        height: clamp(30px, 8.5vw, 36px);
        padding: clamp(3px, 1vw, 5px);
        color: var(--primary-color);
    }

    .input-tool-btn svg,
    .mic-btn svg {
        width: clamp(19px, 5.5vw, 23px);
        height: clamp(19px, 5.5vw, 23px);
    }

    .input-left-actions {
        flex: 0 0 auto;
        gap: 3px;
    }

    .mention-target-wrap {
        height: 32px;
        margin-left: 3px;
    }

    .mention-target-select {
        width: 34px;
        height: 30px;
        max-width: 30vw;
        font-size: 11px;
    }

    .mention-target-select.has-value {
        width: 88px;
        padding-right: 4px;
    }

    .input-right-actions {
        position: absolute;
        right: 6px;
        bottom: 8px;
        z-index: 310;
        flex: 0 0 auto;
        gap: 4px;
        flex-wrap: nowrap;
        justify-content: flex-end;
        min-height: 40px;
    }

    .live-media-actions {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 0 0 auto;
    }

    .mic-btn {
        width: clamp(30px, 8.5vw, 36px);
        height: clamp(30px, 8.5vw, 36px);
        padding: clamp(3px, 1vw, 5px);
    }

    .chat-input-area.is-live-connected .input-right-actions {
        display: flex;
        gap: 3px;
    }

    .chat-input-area.is-live-connected .live-media-actions {
        position: absolute;
        right: 0;
        bottom: calc(100% + 8px);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        min-height: 0;
        pointer-events: auto;
    }

    .chat-input-area.is-live-connected .live-media-actions .input-tool-btn,
    .chat-input-area.is-live-connected .live-media-actions .mic-btn {
        width: 38px;
        height: 38px;
        padding: 8px;
        border: 1px solid rgba(15, 23, 42, 0.12);
        border-radius: 999px;
        background: #FFFFFF;
        color: var(--primary-color);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18);
    }

    .chat-input-area.is-live-connected .live-media-actions .input-tool-btn.active:not(.hand-raise-btn),
    .chat-input-area.is-live-connected .live-media-actions .mic-btn.active {
        color: #22C55E;
        background: #FFFFFF;
    }

    .chat-input-area.is-live-connected .live-media-actions .hand-raise-btn.active {
        color: #F97316;
        background: #FFFFFF;
    }

    .chat-input-area.is-live-connected #btn-camera-flip {
        order: 0;
        color: #8B5CF6;
    }

    .chat-input-area.is-live-connected #btn-camera {
        order: 1;
    }

    .chat-input-area.is-live-connected #btn-mic {
        order: 3;
    }

    .chat-input-area.is-live-connected #btn-hand-raise {
        order: 2;
    }

    .mobile-send-btn {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 999px;
        background: var(--primary-color);
        color: #ffffff;
        box-shadow: 0 4px 12px var(--primary-border);
    }

    .mobile-send-btn:disabled {
        opacity: .5;
    }

    .user-subtab {
        margin: 0 16px 10px;
        border-radius: 7px;
        font-size: 12px;
    }

    .user-subtab-btn {
        padding: 8px 0;
        font-size: 12px;
    }

    .user-item {
        min-height: 92px;
        padding: 16px 28px 14px 30px;
        gap: 20px;
        align-items: center;
    }

    .user-avatar-wrap,
    .user-avatar-img {
        width: 48px;
        height: 48px;
    }

    .user-name-row {
        gap: 8px;
        align-items: flex-start;
    }

    .user-name-text {
        font-size: 15px;
        font-weight: 500;
        color: #111827;
        line-height: 1.25;
    }

    .user-name-text.flashnick-name {
        width: 100%;
        max-width: none;
        min-height: clamp(28px, 7vw, 34px);
        height: auto;
    }

    .flashnick-list-img {
        height: auto;
        max-width: min(46vw, 156px);
        max-height: 32px;
    }

    .user-role-badge {
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.2;
        background: transparent;
        color: #111827;
    }

    .user-online-text {
        margin-top: 6px;
        font-size: 12px;
        color: #9CA3AF;
    }

    .user-presence-room-row .user-online-text {
        margin-top: 0;
    }

    .user-room-location {
        max-width: 54%;
        font-size: 11px;
    }

    .user-icons-row {
        gap: 7px;
        padding-top: 1px;
    }

    .room-item {
        min-height: 74px;
        padding: 0 20px 0 14px;
    }

    .room-name-text {
        font-size: 22px;
        font-weight: 500;
        color: #111827;
    }

    .room-item.active .room-name-text {
        color: var(--primary-color);
        font-weight: 800;
    }

    .dm-item {
        min-height: 70px;
        padding: 12px 18px;
        gap: 12px;
    }

    .dm-item .user-avatar,
    .dm-item .user-avatar img {
        width: 42px !important;
        height: 42px !important;
    }

    .dm-display-name {
        font-size: 16px;
        font-weight: 800;
        color: #111827;
    }

    .flashnick-dm-img {
        max-width: min(44vw, 190px);
        max-height: 34px;
    }

    .dm-unread {
        min-width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
    }

    .room-heart {
        width: 38px;
        height: 38px;
        color: #FBD5DD;
    }

    .emoji-picker-container { width: 260px; }
    .gif-picker-container { width: 100%; }
    .youtube-search-backdrop { padding: 12px; }
    .youtube-search-card { width: 100%; }
    .image-preview-backdrop { padding: 12px; }
    .image-preview-header { padding: 14px 14px 12px; }
    .image-preview-header h2 { font-size: 18px; }
    .image-preview-stage { min-height: 240px; padding: 12px; }
    .image-preview-tools {
        flex-wrap: wrap;
        padding: 10px 14px;
    }
    .image-zoom-control {
        flex-basis: 100%;
        order: 5;
    }
    .image-preview-actions { padding: 12px 14px; }

    .chat-image-viewer {
        padding: 12px;
    }

    .chat-image-viewer-card,
    .chat-image-viewer-img {
        max-width: 96vw;
        max-height: 86vh;
    }

    .chat-image-viewer-close {
        top: 8px;
        right: 8px;
        width: 34px;
        height: 34px;
        background: rgba(15,23,42,.76);
    }
}

@media (max-width: 480px) {
    .auth-card { border-radius: 0; border-left: none; border-right: none; }
    .profile-modal { border-radius: 12px; }
    .chat-header { padding: 0 0.75rem; }
    .messages-container { padding: 0.75rem 0.55rem 78px; }
    .chat-input-area { padding: 7px 6px; }
}

@media (max-width: 380px) {
    .mobile-topbar {
        height: 54px;
        padding: 0 10px 0 14px;
    }

    .mobile-topbar-actions {
        gap: 13px;
    }

    .mobile-topbar-brand {
        max-width: 46vw;
        font-size: 17px;
    }

    body.dm-chat-active .chat-header {
        padding-left: 10px;
        padding-right: 8px;
    }

    body.dm-chat-active .chat-header .dm-header-name {
        max-width: min(44vw, 170px);
    }

    body.dm-chat-active .chat-header .header-icon-btn {
        width: 34px;
        height: 34px;
    }

    .mobile-edge-toggle {
        width: 28px;
        height: 54px;
        font-size: 26px;
    }

    .mobile-edge-count {
        min-width: 21px;
        height: 18px;
        font-size: 10px;
    }

    .entry-effect-layer {
        top: 5px;
        padding: 0 6px;
    }

    .entry-effect-toast {
        width: 100%;
        max-width: none;
        min-height: 28px;
        padding: 6px 10px;
        border-radius: 6px;
    }

    .entry-effect-toast.has-media {
        width: 100%;
        height: clamp(76px, 30vw, 128px);
        border-radius: 6px;
    }

    .entry-effect-text {
        font-size: 10px;
    }

    .chat-input-area {
        --mobile-right-action-space: 40px;
        gap: 3px;
        padding: 7px 5px;
    }

    .chat-input-area.is-live-connected {
        --mobile-right-action-space: 40px;
    }

    .input-left-actions,
    .input-right-actions {
        gap: 2px;
    }

    .mention-target-wrap {
        margin-left: 2px;
    }

    .mention-target-select {
        width: 32px;
        max-width: 30vw;
        font-size: 10px;
    }

    .mention-target-select.has-value {
        width: 78px;
    }

    .live-media-actions {
        gap: 1px;
    }

    .chat-input-area.is-live-connected .live-media-actions {
        gap: 6px;
    }

    .input-tool-btn,
    .mic-btn {
        width: clamp(28px, 8.2vw, 32px);
        height: clamp(28px, 8.2vw, 32px);
    }

    .input-tool-btn svg,
    .mic-btn svg {
        width: clamp(18px, 5.3vw, 21px);
        height: clamp(18px, 5.3vw, 21px);
    }

    .msg-input-form {
        min-height: 38px;
        height: auto;
        padding-left: 10px;
    }

    .msg-input {
        min-height: 28px;
        max-height: min(104px, 28vh);
        font-size: 15px;
        line-height: 19px;
    }

    .mobile-send-btn {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }
}

/* ====================================================
   UTILITY
   ==================================================== */

.text-blue { color: var(--primary-color); }
.w-18 { width: 18px; }
.h-18 { height: 18px; }
.mic-anim { animation: pulse-badge 1.5s infinite; }

/* Fav heart fill state */
svg.heart-fill { fill: #EF4444; color: #EF4444; }

/* ============================================================
   SETTINGS PANEL (Sidebar)
   ============================================================ */

.settings-content-scroll {
    background: #FAFAFA;
    padding-bottom: 2rem;
    overflow-y: auto;
    max-height: calc(100vh - 110px);
}

/* Profil Karti */
.settings-profile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    background: #FFF;
}

.settings-profile-menu-btn {
    margin-left: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.15s;
    flex-shrink: 0;
}
.settings-profile-menu-btn:hover {
    background: var(--primary-color);
    transform: scale(1.05);
}

.settings-avatar-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

.settings-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.settings-status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: var(--primary-color);
    border: 2px solid #FFF;
    border-radius: 50%;
    z-index: 2;
}

.settings-avatar-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 50%;
    z-index: 3;
}

.settings-avatar-wrapper:hover .settings-avatar-overlay {
    opacity: 1;
}

.settings-profile-info {
    display: flex;
    flex-direction: column;
}
.settings-username {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}
.settings-role {
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 4px;
}
.settings-status-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
}
.settings-status-dot-small {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
}
.settings-status-dropdown select {
    border: none;
    background: transparent;
    font-size: 13px;
    color: #4B5563;
    cursor: pointer;
    outline: none;
    padding: 0;
}

.settings-custom-status-input {
    width: 100%;
    max-width: 150px;
    height: 26px;
    margin-top: 5px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 0 8px;
    font-size: 12px;
    color: #374151;
    background: #FFFFFF;
    outline: none;
}

.settings-custom-status-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.12);
}

/* Bolumler */
.settings-section {
    background: #FFF;
    padding: 0 20px 24px 20px;
}

.settings-section-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 10px 0 20px 0;
}
.settings-section-divider::before,
.settings-section-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #F3F4F6;
}
.settings-section-divider span {
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: #9CA3AF;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Background Grid */
.settings-bg-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.settings-bg-thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, transform 0.15s;
    background: #E5E7EB;
}
.settings-bg-thumb:hover {
    transform: scale(1.05);
}
.settings-bg-thumb.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-border);
}
.settings-bg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.settings-bg-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.settings-bg-text {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
}
.settings-btn-blue {
    background: var(--primary-color);
    color: #FFF;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s;
}
.settings-btn-blue:hover {
    filter: brightness(0.92);
}

.user-role-badge.role-badge-dynamic,
.admin-role-badge-preview {
    --role-accent: #64748B;
    --role-text: #FFFFFF;
    --role-border: var(--role-accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    max-width: 100%;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid var(--role-border);
    border-radius: 4px;
    color: var(--role-accent);
    background: #F8FAFC;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
    box-sizing: border-box;
}

.user-role-badge.role-badge-dynamic:not(.is-basic),
.admin-role-badge-preview {
    filter: saturate(1.12) brightness(1.06);
}

.user-role-badge.role-badge-dynamic .user-role-tag {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.admin-role-ascii-input {
    /* Monospace + emoji fallback — Unicode özel karakterler (🅚🅘🅝 vb.) için gerekli */
    font-family: 'Cascadia Mono', Consolas, 'Courier New', "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", monospace;
}

.user-role-badge.role-badge-dynamic.is-ascii,
.admin-role-badge-preview.is-ascii {
    min-height: 0;
    padding: 2px 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--role-accent);
    box-shadow: none;
    /* Emoji color fontları önce — 🅚🅘🅝🅖 gibi karakterler native renkleriyle render edilir,
       CSS color yalnızca ♛ ☆ gibi metin karakterlerini etkiler */
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    max-width: min(200px, 100%);
    text-shadow:
        0 0 1px rgba(255,255,255,.9),
        0 0 5px color-mix(in srgb, var(--role-accent) 55%, transparent);
}

.user-role-badge.role-badge-dynamic.is-ascii .user-role-tag,
.admin-role-badge-preview.is-ascii .admin-role-badge-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-role-preview .admin-role-badge-preview.is-ascii {
    justify-content: center;
    text-align: center;
}

/* ── FANCY MODE: her karakter CSS dairesi olarak render edilir, emoji bağımlılığı yok ── */
.user-role-badge.role-badge-dynamic.is-fancy,
.admin-role-badge-preview.is-fancy {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    max-width: min(240px, 100%);
}

.role-badge-dynamic.is-fancy .fancy-char,
.admin-role-badge-preview.is-fancy .fancy-char {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 1px solid color-mix(in srgb, var(--role-accent, #004BA3) 86%, #FFFFFF 14%);
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 24%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--role-accent, #004BA3) 76%, #5DAEFF 24%) 0%,
            var(--role-accent, #004BA3) 54%,
            color-mix(in srgb, var(--role-accent, #004BA3) 76%, #001D45 24%) 100%
        );
    color: var(--role-text, #fff);
    font-size: 7.5px;
    font-weight: 800;
    font-family: Arial, Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    line-height: 1;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(0,0,0,.32);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        inset 0 -1px 1px rgba(0,0,0,.22);
}

.role-badge-dynamic.is-fancy.is-medium .fancy-char,
.admin-role-badge-preview.is-fancy.is-medium .fancy-char {
    width: 13px;
    height: 13px;
    font-size: 7.5px;
}

.role-badge-dynamic.is-fancy.is-premium .fancy-char,
.role-badge-dynamic.is-fancy.is-high .fancy-char,
.admin-role-badge-preview.is-fancy.is-premium .fancy-char,
.admin-role-badge-preview.is-fancy.is-high .fancy-char {
    width: 14px;
    height: 14px;
    font-size: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -1px 1px rgba(0,0,0,.24),
        0 0 4px color-mix(in srgb, var(--role-accent, #004BA3) 72%, transparent);
}

.role-badge-dynamic.is-fancy .fancy-space,
.admin-role-badge-preview.is-fancy .fancy-space {
    width: 3px;
    flex-shrink: 0;
}

/* Semboller (♛ ☆ ★ vb.) daire içine alınmaz — accent renginde düz gösterilir */
.role-badge-dynamic.is-fancy .fancy-symbol,
.admin-role-badge-preview.is-fancy .fancy-symbol,
.role-badge-dynamic.is-fancy .fancy-decoration,
.admin-role-badge-preview.is-fancy .fancy-decoration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--role-accent, #004BA3) 88%, #008CFF 12%);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
    font-family: "Segoe UI Symbol", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    text-shadow:
        0 1px 0 #FFFFFF,
        0 0 4px color-mix(in srgb, var(--role-accent, #004BA3) 42%, transparent);
}

.role-badge-dynamic.is-fancy .fancy-decoration,
.admin-role-badge-preview.is-fancy .fancy-decoration {
    gap: 0;
    letter-spacing: -1px;
}

.role-badge-dynamic.is-fancy .fancy-decoration:first-child,
.admin-role-badge-preview.is-fancy .fancy-decoration:first-child {
    margin-right: 1px;
}

.role-badge-dynamic.is-fancy .fancy-decoration:last-child,
.admin-role-badge-preview.is-fancy .fancy-decoration:last-child {
    margin-left: 1px;
}

.admin-role-preview .admin-role-badge-preview.is-fancy {
    justify-content: center;
}

.user-role-badge.role-badge-dynamic.is-legacy,
.admin-role-badge-preview.is-legacy {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--role-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    max-width: min(220px, 100%);
    text-shadow:
        0 0 1px rgba(255,255,255,.88),
        0 0 5px color-mix(in srgb, var(--role-accent) 52%, transparent);
}

.user-role-badge.role-badge-dynamic.is-legacy .user-role-tag {
    color: var(--role-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role-icon,
.admin-role-badge-icon {
    display: inline-grid;
    place-items: center;
    min-width: 15px;
    height: 15px;
    border-radius: 3px;
    background: var(--role-accent);
    color: var(--role-text);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.role-badge-dynamic.is-solid,
.admin-role-badge-preview.is-solid {
    background: var(--role-accent);
    color: var(--role-text);
}

.role-badge-dynamic.is-solid .user-role-icon,
.admin-role-badge-preview.is-solid .admin-role-badge-icon {
    background: rgba(255, 255, 255, 0.22);
}

.role-badge-dynamic.is-outline,
.admin-role-badge-preview.is-outline {
    background: transparent;
    color: var(--role-accent);
}

.role-badge-dynamic.is-glow,
.admin-role-badge-preview.is-glow {
    background: #FFFFFF;
    color: var(--role-accent);
    box-shadow: 0 0 0 2px rgba(37, 136, 216, 0.08), 0 0 12px color-mix(in srgb, var(--role-accent) 35%, transparent);
}

.role-badge-dynamic.is-high,
.admin-role-badge-preview.is-high {
    font-weight: 900;
    border-width: 2px;
}

@media (max-width: 768px) {
    .user-role-badge.role-badge-dynamic {
        min-height: clamp(22px, 5.8vw, 28px);
        padding: clamp(3px, 1vw, 5px) clamp(7px, 2vw, 10px);
        font-size: clamp(12px, 3.15vw, 15px);
        max-width: min(58vw, 230px);
    }

    .user-role-badge.role-badge-dynamic.is-legacy {
        font-size: clamp(13px, 3.35vw, 16px);
        max-width: min(58vw, 230px);
    }

    .user-role-badge.role-badge-dynamic.is-ascii {
        font-size: clamp(16px, 4vw, 20px);
        max-width: min(62vw, 240px);
    }

    .user-role-badge.role-badge-dynamic .user-role-tag {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-role-icon {
        min-width: clamp(15px, 4vw, 18px);
        height: clamp(15px, 4vw, 18px);
        font-size: clamp(10px, 2.6vw, 12px);
    }

    .user-item.is-basic-role .user-name-text {
        font-size: 15px;
    }

    .user-item.is-basic-role .user-role-badge.role-badge-dynamic.is-basic {
        min-height: 0;
        margin-top: 5px;
        padding: 0;
        font-size: 14px;
        max-width: 100%;
    }

    .user-item.is-basic-role .user-online-text {
        margin-top: 6px;
        font-size: 12px;
    }

    .user-item.is-basic-role .user-presence-room-row .user-online-text {
        margin-top: 0;
    }
}

@media (max-width: 380px) {
    .user-role-badge.role-badge-dynamic,
    .user-role-badge.role-badge-dynamic.is-legacy {
        max-width: min(52vw, 198px);
    }

    .user-name-text.flashnick-name {
        max-width: none;
        min-height: clamp(26px, 7vw, 32px);
    }

    .flashnick-list-img {
        height: auto;
        max-width: min(48vw, 148px);
        max-height: 30px;
    }
}

/* Satirlar */
.settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
}
.settings-row-text {
    font-size: 14px;
    color: #111827;
}

/* Custom Radio Button (Circle) */
.settings-radio {
    display: none;
}
.settings-radio-custom {
    width: 22px;
    height: 22px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s;
    flex-shrink: 0;
}
.settings-radio:checked + .settings-radio-custom {
    border-color: var(--primary-color);
}
.settings-radio:checked + .settings-radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    border-radius: 50%;
}

/* Custom Checkbox (Circle) */
.settings-checkbox {
    display: none;
}
.settings-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #D1D5DB;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s;
}
.settings-checkbox:checked + .settings-checkbox-custom {
    border-color: var(--primary-color);
    background: var(--primary-color);
}
.settings-checkbox:checked + .settings-checkbox-custom::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Switch / Toggle */
.settings-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.settings-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.settings-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #D1D5DB;
    transition: .4s;
    border-radius: 24px;
}
.settings-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
.settings-switch input:checked + .settings-slider {
    background-color: var(--primary-color);
}
.settings-switch input:checked + .settings-slider:before {
    transform: translateX(20px);
}

/* Diger Ayarlar toggle */
.settings-more-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    cursor: pointer;
    color: #6B7280;
    justify-content: center;
    padding: 8px 0;
}
.settings-more-text {
    font-size: 13px;
}
.settings-more-arrow {
    transition: transform 0.3s;
}
.settings-more-wrap.open .settings-more-arrow {
    transform: rotate(180deg);
}
.settings-more-panel {
    border-top: 1px solid #F3F4F6;
    margin-top: 8px;
    padding-top: 4px;
    animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 500px; }
}

/* Theme Palette */
.settings-theme-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 4px 0;
}
.theme-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s, box-shadow 0.2s;
}
.theme-dot:hover {
    transform: scale(1.2);
}
.theme-dot.active {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px var(--primary-color);
}

.settings-account-section {
    padding-top: 0;
}

.settings-logout-btn {
    width: 100%;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    background: rgba(239,68,68,0.08);
    color: #DC2626;
    border: 1px solid rgba(239,68,68,0.20);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
}

.settings-logout-btn:hover {
    background: rgba(239,68,68,0.14);
    transform: translateY(-1px);
}

/* ====================================================
   ÜYE PROFİLİ SLIDE PANELİ
   ==================================================== */
.profile-slide-panel {
    position: fixed;
    top: 98px;
    left: clamp(320px, 23vw, 420px);
    width: min(560px, calc(100vw - 340px));
    height: 294px;
    background: #fff;
    border: 1px solid #CBD5E1;
    z-index: 240;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transition: opacity .18s ease, transform .18s ease;
    box-shadow: 0 10px 28px rgba(15,23,42,.22);
    overflow: hidden;
}
.profile-slide-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Header */
.pp-header {
    display: flex; justify-content: space-between; align-items: center;
    height: 42px;
    padding: 0 12px 0 14px;
    background: #1E9AF0;
    color: #fff;
    font-size: 13px; font-weight: 800;
    flex-shrink: 0;
    cursor: move;
    touch-action: none;
}

.profile-window-dragging {
    user-select: none;
}
.pp-close {
    background: #ffffff; border: 1px solid rgba(15,23,42,.18); color: #111827;
    width: 18px; height: 18px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 11px; font-weight: 800;
    transition: background .2s;
}
.pp-close:hover { background: #F3F4F6; }

/* Body */
.pp-body {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Tabs */
.pp-tabs {
    width: 196px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #F7F7F7;
    border-right: 1px solid #E5E7EB;
    border-bottom: none;
    padding: 0;
    gap: 0;
    scrollbar-width: none;
}
.pp-tabs::-webkit-scrollbar { display: none; }
.pp-tab {
    min-height: 50px;
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    padding: 0 14px; font-size: 14px; font-weight: 500;
    color: #4B5563; background: transparent; border: none;
    border-bottom: 1px solid #E5E7EB;
    cursor: pointer; white-space: nowrap;
    transition: color .15s, background .15s;
}
.pp-tab:hover { color: #111827; background: #F1F5F9; }
.pp-tab.active {
    color: #374151;
    background: #ECECEC;
    border-bottom-color: #E5E7EB;
    font-weight: 600;
}
.pp-tab svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Content panels */
.pp-content {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding: 22px 24px;
}
.pp-content.hidden { display: none; }

/* Avatar Section */
.pp-avatar-section { text-align: center; padding-bottom: 12px; border-bottom: none; margin-bottom: 10px; }
.pp-avatar-wrap {
    position: relative; width: 72px; height: 72px;
    margin: 0 auto 10px; border-radius: 50%;
}
.pp-avatar-wrap img {
    width: 72px; height: 72px; border-radius: 50%;
    object-fit: cover; border: 3px solid #e2e8f0;
}
.pp-avatar-edit {
    position: absolute; bottom: 0; right: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: #3b82f6; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 2px solid #fff;
    transition: background .2s;
}
.pp-avatar-edit:hover { background: #2563eb; }
.pp-avatar-section h3 { font-size: 18px; font-weight: 800; color: #000000; margin: 0 0 6px; }
/* Info Rows */
.pp-info-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: min(260px, 100%);
    margin: 0 auto;
    border-top: 1px solid #F1F5F9;
}
.pp-info-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 18px;
    padding: 10px 0; border-bottom: 1px solid #f1f5f9;
}
.pp-info-row:last-child { border-bottom: none; }
.pp-info-label { font-size: 13px; color: #64748b; }
.pp-info-val { font-size: 13px; font-weight: 600; color: #0f172a; }

/* Forms */
.pp-form-section { display: flex; flex-direction: column; gap: 16px; }
.pp-section-title { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }
.pp-form-group { display: flex; flex-direction: column; gap: 4px; }
.pp-label { font-size: 12px; font-weight: 600; color: #475569; }
.pp-input {
    width: 100%; padding: 10px 12px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-size: 14px; color: #0f172a; background: #f8fafc;
    outline: none; font-family: inherit;
    transition: border-color .2s, background .2s;
}
.pp-input:focus { border-color: #3b82f6; background: #fff; }
.pp-input::placeholder { color: #94a3b8; }

.pp-current-nick {
    font-size: 13px; color: #64748b;
    padding: 8px 12px; background: #f1f5f9; border-radius: 8px;
}
.pp-current-nick strong { color: #0f172a; }

.pp-hint { font-size: 13px; color: #64748b; margin: 0; }

/* Buttons */
.pp-btn-primary {
    width: 100%; padding: 10px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff; border: none; border-radius: 8px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: opacity .2s; font-family: inherit;
}
.pp-btn-primary:hover { opacity: .9; }

.pp-btn-danger {
    width: 100%; padding: 10px;
    background: #fef2f2; color: #dc2626;
    border: 1px solid #fecaca; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .2s; font-family: inherit;
}
.pp-btn-danger:hover { background: #fee2e2; }

/* Feature Cards */
.pp-feature-card {
    padding: 16px; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 10px;
}
.pp-feature-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; font-size: 14px; font-weight: 700; color: #0f172a;
}
.pp-feature-desc { font-size: 12px; color: #64748b; margin: 0 0 12px; line-height: 1.5; }

.pp-danger-zone { border-color: #fecaca; background: #fef7f7; }

/* File upload label */
.pp-file-label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; background: #fff; color: #3b82f6;
    border: 1px solid #bfdbfe; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .2s;
}
.pp-file-label:hover { background: #eff6ff; }

.pp-flash-preview {
    min-height: 52px;
    max-width: 220px;
    margin: 8px 0 12px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #CBD5E1;
    border-radius: 8px;
    background: #F8FAFC;
    overflow: hidden;
}
.pp-flash-preview-img {
    display: block;
    max-width: 180px;
    max-height: 40px;
    object-fit: contain;
}
.pp-flash-empty {
    color: #64748B;
    font-size: 12px;
    font-weight: 700;
}
.pp-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    background: #FFFFFF;
    color: #475569;
    cursor: pointer;
    font-weight: 700;
    margin-left: 8px;
}
.pp-btn-secondary:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* Frame grid */
.pp-frame-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 4px;
}
.pp-frame-option {
    min-width: 0;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #ffffff;
    /* per-frame ölçekli çerçeve (önizleme avatarının ~2 katına kadar) için dikey/yatay boşluk */
    padding: 24px 6px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pp-frame-option:hover,
.pp-frame-option.active {
    border-color: var(--primary-color);
    box-shadow: 0 6px 16px var(--primary-faint);
    transform: translateY(-1px);
}
.pp-frame-option.is-none {
    border-style: dashed;
}
.pp-frame-preview {
    width: 38px;
    height: 38px;
    margin: 0;
}
.pp-frame-preview .user-avatar-img {
    width: 38px;
    height: 38px;
}
.pp-frame-none-mark {
    position: absolute;
    inset: -4px;
    z-index: 6;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #EF4444;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}
.pp-locked-note {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border: 1px dashed #CBD5E1;
    border-radius: 8px;
    color: #64748B;
    background: #F8FAFC;
    font-size: 12px;
    text-align: center;
}
.pp-check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    font-size: 13px;
    color: #334155;
    font-weight: 600;
}
.pp-check-row input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}
.pp-btn-small {
    min-width: 96px;
    padding: 8px 14px;
    font-size: 13px;
}

/* Message feedback */
.pp-msg {
    font-size: 13px; text-align: center; padding: 6px;
    border-radius: 6px; min-height: 0;
}
.pp-msg.success { background: #f0fdf4; color: #16a34a; border: 1px solid #86efac; }
.pp-msg.error { background: #fef2f2; color: #dc2626; border: 1px solid #fca5a5; }

@media (max-width: 768px) {
    .profile-slide-panel {
        top: 0 !important;
        left: 0 !important;
        right: auto;
        bottom: 0;
        width: 100% !important;
        max-width: none;
        min-width: 0;
        height: 100%;
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .profile-slide-panel.open {
        transform: translateY(0) scale(1);
    }

    .pp-header {
        height: 44px;
        padding: 0 12px;
        cursor: default;
    }

    .pp-body {
        flex-direction: column;
        overflow: hidden;
    }

    .pp-tabs {
        width: 100%;
        min-height: 50px;
        max-height: 50px;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
        scrollbar-width: none;
    }

    .pp-tabs::-webkit-scrollbar {
        display: none;
    }

    .pp-tab {
        width: auto;
        min-width: 92px;
        min-height: 50px;
        flex: 0 0 auto;
        justify-content: center;
        gap: 7px;
        padding: 0 10px;
        border-bottom: none;
        border-right: 1px solid #E5E7EB;
        font-size: 12px;
    }

    .pp-tab svg {
        width: 15px;
        height: 15px;
    }

    .pp-content {
        flex: 1;
        height: auto;
        min-height: 0;
        overflow-y: auto;
        padding: 18px 14px 22px;
    }

    .pp-avatar-section {
        margin-bottom: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid #F1F5F9;
    }

    .pp-avatar-wrap,
    .pp-avatar-wrap img {
        width: 76px;
        height: 76px;
    }

    .pp-profile-display-name {
        width: min(220px, 100%);
        min-height: 34px;
        margin: 0 auto 6px;
        justify-content: center;
    }

    .flashnick-profile-img {
        max-width: 210px;
        max-height: 34px;
    }

    .pp-info-rows {
        width: 100%;
        max-width: 320px;
    }

    .pp-info-row {
        gap: 12px;
        padding: 11px 0;
    }

    .pp-info-label,
    .pp-info-val {
        font-size: 12px;
    }

    .pp-form-section {
        gap: 13px;
    }

    .pp-feature-card {
        padding: 13px;
        border-radius: 8px;
    }

    .pp-file-label,
    .pp-btn-secondary {
        width: 100%;
        min-height: 38px;
        justify-content: center;
    }

    .pp-btn-secondary {
        margin: 8px 0 0;
    }

    .pp-flash-preview {
        max-width: 100%;
        margin: 8px 0 10px;
    }

    .pp-frame-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pp-check-row {
        align-items: flex-start;
        line-height: 1.35;
    }
}

/* ====================================================
   KİŞİSEL ODA DİZAYNLARI — Arka Plan Grid
   ==================================================== */
.settings-bg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.settings-bg-thumb {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16/10;
    cursor: pointer;
    border: 2px solid #E5E7EB;
    transition: border-color .2s, transform .15s, box-shadow .2s;
    background: #f3f4f6;
}
.settings-bg-thumb:hover {
    border-color: var(--primary-border);
    transform: scale(1.03);
    box-shadow: 0 4px 12px var(--primary-faint);
}
.settings-bg-thumb.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-border);
}
.settings-bg-thumb.active::after {
    content: '✓';
    position: absolute;
    top: 6px; right: 6px;
    width: 20px; height: 20px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.settings-bg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bg-thumb-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 3px 6px;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}

.settings-btn-remove-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 9px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .2s;
}
.settings-btn-remove-bg:hover {
    background: #fee2e2;
}

/* App notifications */
.app-toast-container {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 24px));
    pointer-events: none;
}

.app-toast {
    display: grid;
    grid-template-columns: 34px 1fr 24px;
    gap: 10px;
    align-items: start;
    padding: 12px;
    border: 1px solid #E5E7EB;
    border-left-width: 4px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
    color: #111827;
    pointer-events: auto;
    animation: toastIn .18s ease-out;
}

.app-toast.is-hiding {
    opacity: 0;
    transform: translateY(-6px);
}

.app-toast-marker {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
}

.app-toast-body {
    min-width: 0;
}

.app-toast-title {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 3px;
}

.app-toast-message {
    font-size: 12px;
    line-height: 1.4;
    color: #4B5563;
    overflow-wrap: anywhere;
}

.app-toast-close {
    border: 0;
    background: transparent;
    color: #9CA3AF;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0;
}

.app-toast-close:hover {
    color: #374151;
}

.app-toast-info {
    border-left-color: var(--primary-color);
}
.app-toast-info .app-toast-marker {
    background: #DBEAFE;
    color: #1D4ED8;
}

.app-toast-success {
    border-left-color: #22C55E;
}
.app-toast-success .app-toast-marker {
    background: #DCFCE7;
    color: #15803D;
}

.app-toast-warning {
    border-left-color: #F59E0B;
}
.app-toast-warning .app-toast-marker {
    background: #FEF3C7;
    color: #B45309;
}

.app-toast-error {
    border-left-color: #EF4444;
}
.app-toast-error .app-toast-marker {
    background: #FEE2E2;
    color: #B91C1C;
}

.app-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .54);
    backdrop-filter: blur(3px);
}

.app-dialog {
    width: min(430px, 100%);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #E5E7EB;
    border-top: 4px solid var(--primary-color);
    border-radius: 8px;
    background: #FFFFFF;
    color: #111827;
    box-shadow: 0 26px 70px rgba(15, 23, 42, .28);
}

.app-dialog-warning {
    border-top-color: #F59E0B;
}

.app-dialog-danger {
    border-top-color: #EF4444;
}

.app-dialog-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 12px;
    align-items: center;
    padding: 18px 18px 8px;
}

.app-dialog-title {
    min-width: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.app-dialog-close {
    width: 32px;
    height: 32px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #F9FAFB;
    color: #6B7280;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.app-dialog-close:hover,
.app-dialog-close:focus-visible {
    background: #F3F4F6;
    color: #111827;
    outline: none;
}

.app-dialog-body {
    padding: 0 18px 14px;
    overflow-y: auto;
}

.app-dialog-message {
    color: #4B5563;
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.app-dialog-input {
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #FFFFFF;
    color: #111827;
    font: inherit;
}

.app-dialog-input:focus {
    border-color: var(--primary-color);
    outline: 3px solid rgba(59, 130, 246, .18);
}

.app-dialog-error {
    min-height: 18px;
    margin-top: 7px;
    color: #B91C1C;
    font-size: 12px;
    font-weight: 700;
}

.app-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px 18px;
    border-top: 1px solid #E5E7EB;
    background: #F9FAFB;
}

.app-dialog-button {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.app-dialog-button-secondary {
    border: 1px solid #D1D5DB;
    background: #FFFFFF;
    color: #374151;
}

.app-dialog-button-secondary:hover,
.app-dialog-button-secondary:focus-visible {
    background: #F3F4F6;
    outline: none;
}

.app-dialog-button-primary {
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color: #FFFFFF;
}

.app-dialog-danger .app-dialog-button-primary {
    border-color: #DC2626;
    background: #DC2626;
}

.app-dialog-warning .app-dialog-button-primary {
    border-color: #D97706;
    background: #D97706;
}

.app-dialog-button-primary:hover,
.app-dialog-button-primary:focus-visible {
    filter: brightness(.95);
    outline: none;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .app-toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
        width: auto;
    }

    .app-dialog-backdrop {
        align-items: flex-end;
        padding: 12px;
    }

    .app-dialog-actions {
        flex-direction: column-reverse;
    }

    .app-dialog-button {
        width: 100%;
    }
}

/* Chat right click menu */
.chat-context-menu {
    position: fixed;
    z-index: 9000;
    width: var(--context-menu-width, min(184px, calc(100vw - 16px)));
    max-height: var(--context-menu-max-height, calc(100dvh - 18px));
    padding: 6px 0;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    background: #FFFFFF;
    color: #2F2F2F;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
    user-select: none;
    overflow: visible;
}

@supports (-webkit-touch-callout: none) {
    #chat-main {
        -webkit-touch-callout: none;
    }

    #chat-main input,
    #chat-main textarea,
    #chat-main select,
    #chat-main button,
    #chat-main a,
    #chat-main [contenteditable="true"] {
        -webkit-touch-callout: default;
    }
}

.chat-context-menu-item-wrap {
    position: relative;
}

.chat-context-menu-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto 12px;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 36px;
    padding: 0 12px;
    background: transparent;
    color: #2F2F2F;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
}

.chat-context-menu-item:hover,
.chat-context-menu-item:focus-visible {
    background: #F3F4F6;
    outline: none;
}

.chat-context-menu-item.is-management {
    color: #0F172A;
    font-weight: 700;
}

.chat-context-menu-item.is-danger {
    color: #DC2626;
}

.chat-context-menu-item.is-danger .chat-context-menu-icon {
    color: #DC2626;
}

.chat-context-menu-icon,
.chat-context-menu-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #4B5563;
}

.chat-context-menu-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-context-menu-check {
    border: 1px solid #9CA3AF;
    border-radius: 3px;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.chat-context-menu-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-context-menu-meta {
    color: #9CA3AF;
    font-size: 12px;
    font-weight: 500;
}

.chat-context-menu-swatch {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--swatch-color);
    border: 1px solid rgba(17,24,39,.12);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.chat-context-menu-arrow {
    color: #111827;
    font-size: 16px;
    line-height: 1;
    text-align: right;
}

.chat-context-menu-separator {
    height: 1px;
    margin: 6px 0;
    background: #E5E7EB;
}

.chat-context-submenu {
    position: absolute;
    top: -6px;
    left: calc(100% + 2px);
    width: min(190px, calc(100vw - 16px));
    padding: 6px 0;
    border: 1px solid #E5E7EB;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .18);
    display: none;
    overflow: visible;
    z-index: 1;
}

.chat-context-menu.is-compact {
    width: var(--context-menu-width, min(92vw, 340px));
    max-height: var(--context-menu-max-height, calc(100dvh - 18px));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    padding: 7px 0;
}

.chat-context-menu.is-compact .chat-context-menu-item {
    grid-template-columns: 26px minmax(0, 1fr) auto 16px;
    min-height: 44px;
    padding: 0 14px;
    font-size: 15px;
}

.chat-context-menu.is-compact .chat-context-menu-icon,
.chat-context-menu.is-compact .chat-context-menu-check {
    width: 20px;
    height: 20px;
}

.chat-context-menu.is-compact .chat-context-submenu,
.chat-context-menu.is-compact.open-left .chat-context-submenu {
    position: static;
    width: auto;
    max-height: none;
    margin: 0 7px 7px 36px;
    padding: 5px 0;
    border-radius: 7px;
    box-shadow: none;
    background: #F9FAFB;
    overflow: visible;
}

.chat-context-menu.is-compact .chat-context-submenu .chat-context-menu-item {
    min-height: 40px;
    font-size: 14px;
}

.chat-context-menu.is-compact .chat-context-submenu .chat-context-submenu {
    margin-left: 20px;
    background: #FFFFFF;
}

.chat-context-menu.is-dense .chat-context-menu-item {
    min-height: 38px;
    padding: 0 11px;
    font-size: 13px;
}

.chat-context-menu.is-dense .chat-context-submenu .chat-context-menu-item {
    min-height: 36px;
    font-size: 13px;
}

.chat-context-menu.is-dense .chat-context-menu-separator {
    margin: 4px 0;
}

.chat-context-menu.is-tiny {
    padding: 4px 0;
}

.chat-context-menu.is-tiny .chat-context-menu-item {
    min-height: 34px;
    grid-template-columns: 22px minmax(0, 1fr) auto 12px;
    padding: 0 9px;
    font-size: 12px;
}

.chat-context-menu.is-tiny .chat-context-submenu,
.chat-context-menu.is-tiny.open-left .chat-context-submenu {
    margin: 0 5px 5px 28px;
    padding: 3px 0;
}

.chat-context-menu.is-tiny .chat-context-submenu .chat-context-menu-item {
    min-height: 32px;
    font-size: 12px;
}

.chat-context-menu.is-tiny .chat-context-menu-icon,
.chat-context-menu.is-tiny .chat-context-menu-check {
    width: 16px;
    height: 16px;
}

.chat-context-menu.is-tiny .chat-context-menu-icon svg {
    width: 14px;
    height: 14px;
}

.chat-context-menu.open-left .chat-context-submenu {
    left: auto;
    right: calc(100% + 2px);
}

.chat-context-menu-item-wrap.has-submenu:hover > .chat-context-submenu,
.chat-context-menu-item-wrap.has-submenu:focus-within > .chat-context-submenu {
    display: block;
}

@media (max-width: 640px) {
    .chat-context-menu {
        width: min(92vw, 340px);
        max-height: calc(100dvh - 18px);
        border-radius: 8px;
        padding: 7px 0;
    }

    .chat-context-menu-item {
        grid-template-columns: 26px minmax(0, 1fr) auto 16px;
        min-height: 44px;
        padding: 0 14px;
        font-size: 15px;
    }

    .chat-context-menu-icon,
    .chat-context-menu-check {
        width: 20px;
        height: 20px;
    }

    .chat-context-submenu,
    .chat-context-menu.open-left .chat-context-submenu {
        position: static;
        width: auto;
        max-height: none;
        margin: 0 7px 7px 36px;
        padding: 5px 0;
        border-radius: 7px;
        box-shadow: none;
        background: #F9FAFB;
        overflow: visible;
    }

    .chat-context-submenu .chat-context-menu-item {
        min-height: 40px;
        font-size: 14px;
    }

    .chat-context-submenu .chat-context-submenu {
        margin-left: 20px;
        background: #FFFFFF;
    }
}

/* Admin panel shell */
.admin-panel-host {
    position: fixed;
    inset: 0;
    z-index: 8900;
    pointer-events: none;
}

.admin-panel-window {
    position: fixed;
    top: 72px;
    left: clamp(104px, 8vw, 128px);
    width: min(570px, calc(100vw - 132px));
    height: min(500px, calc(100vh - 88px));
    max-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
    border: 4px solid #FFFFFF;
    background: #FFFFFF;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .35);
    overflow: hidden;
    pointer-events: auto;
    outline: none;
}

.admin-panel-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 34px;
    height: 34px;
    padding: 0 8px 0 12px;
    background: #0879F2;
    color: #FFFFFF;
    cursor: move;
    touch-action: none;
}

.admin-panel-titlebar h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.admin-panel-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: #FFFFFF;
    color: #1D4ED8;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.admin-panel-close:hover,
.admin-panel-close:focus-visible {
    background: #EAF3FF;
    outline: 1px solid rgba(255,255,255,.75);
}

.admin-panel-dragging {
    user-select: none;
}

.admin-panel-dragging .admin-panel-window,
.admin-panel-dragging .admin-panel-titlebar {
    cursor: move;
}

.admin-panel-content {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    background: #FFFFFF;
    overflow: hidden;
}

.admin-panel-sectionbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 10px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
    color: #111827;
}

.admin-panel-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 3px;
    background: transparent;
    color: #111827;
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.admin-panel-back:hover,
.admin-panel-back:focus-visible {
    background: #F3F4F6;
    outline: none;
}

.admin-panel-section-title {
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.admin-panel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    height: 100%;
    max-height: none;
    padding: 8px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #FFFFFF;
}

.admin-panel-grid-general {
    align-content: start;
    height: calc(100% - 42px);
    max-height: none;
}

.admin-statistics {
    height: calc(100% - 42px);
    max-height: none;
    padding: 8px 10px 12px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #FFFFFF;
}

.admin-stat-notice {
    margin: 0 0 7px;
    padding: 7px 9px;
    border: 1px solid #D8DEE6;
    background: #F8FAFC;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
}

.admin-stat-notice.is-error {
    border-color: #FCA5A5;
    background: #FEF2F2;
    color: #B91C1C;
}

.admin-stat-notice.is-warning {
    border-color: #FACC15;
    background: #FEFCE8;
    color: #854D0E;
}

.admin-stat-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #DFE4EA;
    border-bottom: 1px solid #DFE4EA;
    background: #F7F7F7;
}

.admin-stat-card {
    min-width: 0;
    min-height: 90px;
    padding: 10px 20px 8px;
    border-right: 2px solid #ADB5BD;
    border-bottom: 1px solid #E2E8F0;
}

.admin-stat-card:nth-child(3n) {
    border-right: 0;
}

.admin-stat-card:nth-child(n+4) {
    border-bottom: 0;
}

.admin-stat-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #263548;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
}

.admin-stat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: #4B5563;
    flex: 0 0 auto;
}

.admin-stat-card-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-stat-card strong {
    display: block;
    margin: 8px 0 6px;
    color: #3F4B59;
    font-size: 30px;
    font-weight: 800;
    line-height: .95;
    letter-spacing: 0;
}

.admin-stat-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #233044;
    font-size: 12px;
    line-height: 1.2;
}

.admin-stat-card-meta em {
    font-style: italic;
}

.admin-stat-card-meta span span {
    color: #0076D6;
}

.admin-stat-up {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #4B5563;
    flex: 0 0 auto;
}

.admin-stat-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    margin-top: 7px;
}

.admin-stat-list-panel {
    min-width: 0;
    padding: 10px 8px 9px;
    border: 1px solid #DDE3EA;
    background: #FFFFFF;
}

.admin-stat-list-panel h3 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
    color: #263548;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.admin-stat-list-panel h3 span {
    color: #111827;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-stat-list-divider {
    height: 1px;
    margin: 12px 0 10px;
    background: #E1E6EC;
}

.admin-stat-list-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-stat-list-row {
    display: grid;
    grid-template-columns: 16px minmax(74px, 1fr) 90px 40px;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #233044;
    font-size: 12px;
    line-height: 1.1;
}

.admin-stat-visitor-icon,
.admin-stat-device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    color: #1F8BD5;
}

.admin-stat-visitor-icon.is-female {
    color: #EC4899;
}

.admin-stat-visitor-icon svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-stat-device-icon {
    border-radius: 50%;
    background: #4B5563;
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 900;
    font-family: Arial, Helvetica, sans-serif;
}

.admin-stat-list-label {
    min-width: 0;
    overflow: hidden;
    color: #263548;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-stat-progress {
    display: block;
    width: 90px;
    height: 18px;
    background: #F0F0F0;
    box-shadow: inset 0 0 0 1px #E4E4E4;
}

.admin-stat-progress-fill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    max-width: 100%;
    height: 18px;
    background: #16BFA3;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.admin-stat-list-count {
    min-width: 0;
    color: #64748B;
    font-size: 12px;
    text-align: right;
    overflow-wrap: anywhere;
}

.admin-stat-list-empty {
    padding: 12px 4px;
    color: #64748B;
    font-size: 12px;
    font-weight: 700;
}

.admin-system-settings {
    height: calc(100% - 42px);
    max-height: none;
    padding: 12px 22px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #FFFFFF;
}

.admin-system-loading {
    margin: 0 0 10px;
    color: #6B7280;
    font-size: 12px;
}

.admin-system-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-system-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-system-row,
.admin-system-field {
    display: block;
    color: #1F2937;
    font-size: 14px;
}

.admin-system-row-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.admin-system-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #111827;
}

.admin-system-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 17px;
    padding: 0 9px;
    border-radius: 999px;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.admin-system-status.is-open {
    background: #24B47E;
}

.admin-system-status.is-closed {
    background: #B7A7AA;
}

.admin-system-divider {
    width: calc(100% - 92px);
    height: 1px;
    margin: 10px auto;
    background: #E5E7EB;
}

.admin-form-subtitle {
    color: #111827;
    font-size: 14px;
    font-weight: 800;
}

.admin-system-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #111827;
    font-weight: 700;
}

.admin-system-field input,
.admin-system-field select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #FFFFFF;
    color: #111827;
    font-size: 14px;
    font-weight: 400;
}

.admin-system-field textarea {
    width: 100%;
    min-height: 92px;
    padding: 10px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #FFFFFF;
    color: #111827;
    font: 400 14px/1.4 'Outfit', 'Segoe UI', sans-serif;
    resize: vertical;
}

.admin-seo-favicon-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 82px;
    align-items: center;
    gap: 8px;
}

.admin-seo-favicon-row.is-site-logo {
    grid-template-columns: 34px minmax(0, 1fr) 82px 82px;
}

.admin-seo-favicon-preview {
    width: 34px;
    height: 34px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    object-fit: contain;
    background: #F9FAFB;
}

.admin-seo-favicon-preview.is-empty {
    display: block;
}

.admin-seo-upload-btn {
    width: 82px;
    min-width: 0;
}

.admin-seo-checkbox-field input[type="checkbox"] {
    width: auto;
    justify-self: start;
}

.admin-system-loading.is-error {
    color: #DC2626;
    font-weight: 700;
}

.admin-system-actions {
    display: flex;
    justify-content: center;
    padding: 2px 0 14px;
}

.admin-system-save {
    min-width: 88px;
    height: 36px;
    border: none;
    border-radius: 4px;
    background: #4656C8;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.admin-system-save:hover,
.admin-system-save:focus-visible {
    filter: brightness(1.05);
    outline: none;
}

.admin-system-save:disabled {
    opacity: .65;
    cursor: progress;
}

.admin-login-page-settings {
    height: calc(100% - 42px);
    max-height: none;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #FFFFFF;
}

.admin-login-page-mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.admin-login-page-mode-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid #D7DCE3;
    border-radius: 4px;
    background: #F8FAFC;
    color: #1F2937;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.admin-login-page-mode-option.is-active {
    border-color: #4656C8;
    background: #EEF2FF;
    color: #2B348F;
}

.admin-login-page-mode-option input {
    accent-color: #4656C8;
}

.admin-login-page-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    border-bottom: 1px solid #E5E7EB;
}

.admin-login-page-tab {
    min-height: 32px;
    padding: 0 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #64748B;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.admin-login-page-tab.is-active {
    border-bottom-color: #4656C8;
    color: #111827;
}

.admin-login-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 10px;
    min-height: 0;
}

.admin-login-page-editor,
.admin-login-page-preview {
    min-width: 0;
}

.admin-login-page-editor-panel {
    display: grid;
    gap: 10px;
}

.admin-login-page-editor-panel.is-preview-note {
    padding: 12px;
    border: 1px solid #DDE3EA;
    border-radius: 4px;
    background: #F8FAFC;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.admin-login-page-field {
    display: grid;
    gap: 6px;
    color: #111827;
    font-size: 13px;
    font-weight: 900;
}

.admin-login-page-field textarea {
    width: 100%;
    min-height: 0;
    padding: 9px 10px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #FFFFFF;
    color: #111827;
    font: 12px/1.45 Consolas, "Segoe UI", sans-serif;
    resize: vertical;
}

.admin-login-page-field textarea:focus {
    border-color: #4656C8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(70, 86, 200, .12);
}

.admin-login-page-field small {
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.admin-login-page-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    color: #1F2937;
    font-size: 12px;
    font-weight: 800;
}

.admin-login-page-check input {
    accent-color: #4656C8;
}

.admin-login-suggestions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #111827;
    font-size: 12px;
}

.admin-login-suggestions-head button,
.admin-login-suggestion {
    min-height: 28px;
    border: 1px solid #CCD5E1;
    border-radius: 4px;
    background: #FFFFFF;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.admin-login-suggestions-head button {
    padding: 0 10px;
}

.admin-login-suggestions-head button:disabled {
    opacity: .65;
    cursor: progress;
}

.admin-login-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 30px;
    padding: 7px;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    background: #F8FAFC;
}

.admin-login-suggestion {
    padding: 0 8px;
}

.admin-login-page-empty {
    color: #64748B;
    font-size: 11px;
    font-weight: 700;
}

.admin-login-page-preview {
    position: sticky;
    top: 0;
    align-self: start;
    padding: 8px;
    border: 1px solid #DDE3EA;
    border-radius: 4px;
    background: #F8FAFC;
}

.admin-login-page-preview-title {
    margin-bottom: 7px;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-login-preview-shell {
    border: 1px solid #D6DEE8;
    border-radius: 4px;
    overflow: hidden;
    background: #101827;
}

.admin-login-preview-stage {
    position: relative;
    min-height: 280px;
    padding: 12px;
    display: grid;
    align-content: end;
    gap: 8px;
}

.admin-login-preview-public {
    display: grid;
    gap: 6px;
}

.admin-login-preview-public section,
.admin-login-preview-custom {
    padding: 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 4px;
    background: rgba(255,255,255,.08);
    color: #F8FAFC;
}

.admin-login-preview-public b,
.admin-login-preview-custom strong {
    display: block;
    margin-bottom: 4px;
    color: #FDE68A;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.admin-login-preview-public p,
.admin-login-preview-custom span {
    margin: 0;
    color: #E5E7EB;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.admin-login-preview-card {
    width: 160px;
    margin: 2px auto 0;
    padding: 12px;
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
}

.admin-login-preview-title {
    margin-bottom: 8px;
    color: #111827;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
}

.admin-login-preview-input {
    height: 28px;
    margin-bottom: 7px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #F3F4F6;
}

.admin-login-preview-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 8px;
}

.admin-login-preview-actions span {
    min-width: 0;
    padding: 4px 2px;
    border-radius: 3px;
    background: #EEF2FF;
    color: #4656C8;
    font-size: 8px;
    font-weight: 900;
    text-align: center;
    overflow-wrap: anywhere;
}

.admin-login-preview-button {
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #FBBF24;
    color: #7C4A03;
    font-size: 12px;
    font-weight: 900;
}

.admin-room-panel {
    position: relative;
    height: calc(100% - 42px);
    max-height: none;
    padding: 8px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #FFFFFF;
}

.admin-room-search {
    position: relative;
    display: block;
    margin-bottom: 6px;
}

.admin-room-search input {
    width: 100%;
    height: 38px;
    padding: 0 38px 0 12px;
    border: 1px solid #DADDE3;
    border-radius: 4px;
    color: #111827;
    font-size: 14px;
}

.admin-room-search span {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #8A8F98;
    font-size: 22px;
    font-weight: 800;
}

.admin-room-table {
    border: 1px solid #E5E7EB;
    border-bottom: 0;
}

.admin-room-row {
    display: grid;
    grid-template-columns: 40px minmax(160px, 1fr) minmax(150px, .85fr) 38px 42px;
    min-height: 43px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
}

.admin-room-row:nth-child(even):not(.admin-room-head) {
    background: #FAFAFB;
}

.admin-room-row > div,
.admin-room-row > button {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 10px;
    border-right: 1px solid #E5E7EB;
    color: #1F2937;
    font-size: 14px;
}

.admin-room-row > div:nth-child(2),
.admin-room-row > div:nth-child(3) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-room-row > :last-child {
    border-right: 0;
}

.admin-room-head {
    min-height: 46px;
    background: #F8FAFC;
    font-weight: 800;
}

.admin-room-owner-icon {
    margin-right: 6px;
    color: #B8BDC5;
}

.admin-room-lock,
.admin-room-edit-btn {
    color: #9AA0A8;
    font-weight: 900;
}

.admin-room-edit-btn {
    justify-content: center;
    background: transparent;
    cursor: pointer;
}

.admin-room-edit-btn:hover {
    color: #0879F2;
}

.admin-room-empty {
    padding: 22px;
    color: #6B7280;
    text-align: center;
    font-size: 13px;
}

.admin-room-empty.is-error {
    color: #DC2626;
}

.admin-room-add {
    position: sticky;
    float: right;
    right: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
    margin: 14px 8px 8px auto;
    border-radius: 999px;
    background: #5264CF;
    color: #FFFFFF;
    box-shadow: 0 5px 10px rgba(15, 23, 42, .28);
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.admin-room-form {
    height: calc(100% - 42px);
    max-height: none;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #FFFFFF;
}

.admin-room-field {
    display: block;
    margin-bottom: 14px;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
}

.admin-room-field span,
.admin-room-color span {
    display: block;
    margin-bottom: 7px;
}

.admin-room-field input,
.admin-room-field select {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #FFFFFF;
    color: #111827;
    font-size: 14px;
    font-weight: 400;
}

.admin-room-bg-row {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    align-items: end;
}

.admin-room-color {
    display: block;
    margin-bottom: 14px;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
}

.admin-room-color input {
    width: 50px;
    height: 38px;
    padding: 3px;
    border: 1px solid #D1D5DB;
    border-radius: 0;
    background: #FFFFFF;
}

.admin-room-upload-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;
}

.admin-room-upload-line input[type="text"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.admin-room-upload {
    border-radius: 0 4px 4px 0;
    background: #14B8A6;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 800;
}

.admin-room-actions {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 2px 0 10px;
}

.admin-room-delete,
.admin-room-save {
    min-width: 96px;
    height: 36px;
    border-radius: 5px;
    color: #FFFFFF;
    font-weight: 800;
}

.admin-room-delete {
    background: #E5262E;
}

.admin-room-save {
    background: #4656C8;
}

.admin-log-panel {
    position: relative;
    height: calc(100% - 42px);
    max-height: none;
    padding: 6px 0 44px;
    box-sizing: border-box;
    overflow-y: auto;
    background: #FFFFFF;
}

.admin-log-search {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 38px;
    margin: 0 0 6px;
    padding: 0 8px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
}

.admin-log-search input {
    width: 100%;
    height: 34px;
    padding: 0 34px 0 10px;
    border: 1px solid #D8DEE8;
    border-radius: 3px;
    background: #FFFFFF;
    color: #111827;
    font-size: 13px;
    outline: none;
}

.admin-log-search input:focus {
    border-color: #93C5FD;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, .14);
}

.admin-log-search span {
    width: 30px;
    margin-left: -30px;
    color: #8B95A1;
    font-size: 24px;
    line-height: 1;
    pointer-events: none;
}

.admin-log-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #EEF2F7;
}

.admin-log-row {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 148px 50px;
    min-height: 52px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
}

.admin-log-row:nth-child(even) {
    background: #FAFAFB;
}

.admin-log-actor,
.admin-log-main,
.admin-log-date {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 6px 10px;
    border-right: 1px solid #E5E7EB;
}

.admin-log-actor {
    color: #263140;
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-log-target {
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-log-action {
    margin-top: 3px;
    color: #4B5563;
    font-size: 12px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-log-date {
    color: #596579;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
}

.admin-log-info {
    align-self: center;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: #F5B400;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.admin-log-info:hover,
.admin-log-info:focus-visible {
    filter: brightness(1.05);
    outline: 2px solid rgba(245, 180, 0, .22);
}

.admin-log-empty {
    padding: 42px 16px;
    color: #6B7280;
    font-size: 13px;
    text-align: center;
}

.admin-log-empty.is-error {
    color: #DC2626;
}

.admin-log-pagination {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 42px;
    padding: 7px 8px;
    border-top: 1px solid #E5E7EB;
    background: rgba(255,255,255,.96);
}

.admin-log-page {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid #D9DEE8;
    background: #FFFFFF;
    color: #374151;
    font-size: 11px;
    cursor: pointer;
}

.admin-log-page.active {
    background: #EEF2F7;
    color: #111827;
    font-weight: 800;
}

.admin-log-page:disabled {
    opacity: .45;
    cursor: default;
}

.admin-log-page-ellipsis {
    color: #6B7280;
    font-size: 12px;
}

.admin-log-detail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: clamp(80px, 12vh, 120px);
    background: rgba(17, 24, 39, .22);
}

.admin-log-detail-card {
    width: min(500px, calc(100vw - 44px));
    border: 1px solid #D1D5DB;
    background: #FFFFFF;
    box-shadow:
        6px 6px 0 rgba(255,255,255,.85),
        10px 10px 22px rgba(15, 23, 42, .28);
}

.admin-log-detail-card h3 {
    margin: 0;
    padding: 26px 22px 10px;
    border-bottom: 1px solid #D1D5DB;
    color: #2B2B2B;
    font-size: 20px;
    font-weight: 800;
}

.admin-log-detail-lines {
    padding: 20px 34px;
}

.admin-log-detail-line {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    min-height: 31px;
    border-bottom: 1px solid #E5E7EB;
    color: #2D3748;
    font-size: 14px;
}

.admin-log-detail-line span {
    color: #6B7280;
    font-size: 15px;
    text-align: center;
}

.admin-log-detail-line strong {
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.admin-log-detail-line.is-details {
    align-items: start;
    padding: 8px 0;
}

.admin-log-detail-extra {
    margin: 0 0 4px;
    color: #4B5563;
    font-size: 12px;
}

.admin-log-detail-actions {
    display: flex;
    justify-content: flex-end;
    padding: 14px 28px;
    border-top: 1px solid #E5E7EB;
    background: #F9FAFB;
}

.admin-log-detail-close {
    min-width: 68px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background: #E5262E;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.admin-login-panel {
    padding-bottom: 42px;
}

.admin-login-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 30px;
    padding: 5px 12px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFF7ED;
    color: #92400E;
    font-size: 12px;
    font-weight: 700;
}

.admin-login-filter-summary button {
    height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(146,64,14,.24);
    border-radius: 4px;
    background: #FFFFFF;
    color: #92400E;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.admin-login-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #EEF2F7;
}

.admin-login-row {
    display: grid;
    grid-template-columns: 32px 150px minmax(140px, 1fr) minmax(140px, 1fr) 72px;
    min-height: 53px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
}

.admin-login-row:nth-child(even) {
    background: #FAFAFB;
}

.admin-login-gender,
.admin-login-user,
.admin-login-meta,
.admin-login-device,
.admin-login-actions {
    min-width: 0;
    border-right: 1px solid #E5E7EB;
}

.admin-login-gender {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
}

.admin-login-gender.is-female { color: #EC4899; }
.admin-login-gender.is-male { color: #2588D8; }

.admin-login-user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 8px;
    color: #263140;
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
}

.admin-login-user strong,
.admin-login-user small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-login-user strong {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
}

.admin-login-user small {
    margin-top: 3px;
    color: #6B7280;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
}

.admin-login-user.is-agent strong {
    color: #7C3AED;
}

.admin-login-meta,
.admin-login-device {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5px 8px;
}

.admin-login-role,
.admin-login-os {
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-login-date {
    margin-top: 4px;
    color: #6B7280;
    font-size: 11px;
    line-height: 1.1;
}

.admin-login-ip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: max-content;
    max-width: 100%;
    margin-top: 4px;
    padding: 0;
    border: none;
    background: transparent;
    color: #596579;
    font-size: 11px;
    line-height: 1.1;
    cursor: pointer;
}

.admin-login-ip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #F5B400;
    color: #FFFFFF;
    font-size: 8px;
    font-weight: 900;
}

.admin-login-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.admin-login-info,
.admin-login-ban {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.admin-login-info {
    border: none;
    background: #F5B400;
    color: #FFFFFF;
    cursor: pointer;
}

.admin-login-ban {
    border: 2px solid #E5262E;
    background: #FFFFFF;
    color: #E5262E;
    cursor: default;
    opacity: .95;
}

.admin-login-ban:disabled {
    cursor: default;
}

.admin-login-detail-card {
    width: min(500px, calc(100vw - 44px));
}

.admin-login-ban-card {
    width: min(430px, calc(100vw - 44px));
}

.admin-login-ban-summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 16px 22px 0;
    color: #111827;
}

.admin-login-ban-summary strong {
    font-size: 15px;
    font-weight: 900;
}

.admin-login-ban-summary span {
    color: #6B7280;
    font-size: 12px;
}

.admin-login-ban-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 22px 0;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
}

.admin-login-ban-field select,
.admin-login-ban-field textarea {
    width: 100%;
    border: 1px solid #CBD5E1;
    border-radius: 4px;
    background: #FFFFFF;
    color: #111827;
    font: inherit;
}

.admin-login-ban-field select {
    height: 36px;
    padding: 0 10px;
}

.admin-login-ban-field textarea {
    min-height: 86px;
    padding: 10px;
    resize: vertical;
    font-weight: 600;
}

.admin-login-ban-note {
    padding: 9px 22px 0;
    color: #6B7280;
    font-size: 12px;
    line-height: 1.35;
}

.admin-login-ban-actions {
    gap: 8px;
}

.admin-login-ban-cancel,
.admin-login-ban-submit {
    height: 32px;
    border: none;
    border-radius: 4px;
    padding: 0 14px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 900;
}

.admin-login-ban-cancel {
    background: #6B7280;
}

.admin-login-ban-submit {
    background: #E5262E;
}

.admin-log-detail-line.is-stacked strong {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-log-detail-line.is-stacked small {
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
}

.admin-log-detail-line.is-copyable {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
}

.admin-login-copy,
.admin-login-track {
    height: 30px;
    padding: 0 13px;
    border: none;
    border-radius: 4px;
    background: #21B852;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.admin-login-track {
    min-width: 76px;
}

.admin-authority-panel,
.admin-authority-edit-panel {
    height: calc(100% - 42px);
    min-height: 0;
    background: #fff;
    overflow: auto;
}

.admin-authority-search {
    height: 42px;
    margin: 5px 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    background: #fff;
}

.admin-authority-search input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 0 13px;
    font-size: 13px;
    color: #334155;
}

.admin-authority-search span {
    width: 34px;
    text-align: center;
    color: #999;
    font-size: 24px;
    line-height: 1;
}

.admin-authority-list {
    border-top: 1px solid #e5e7eb;
}

.admin-authority-row {
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px 38px minmax(0, 1fr) 76px;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.admin-authority-row:nth-child(even) {
    background: #fafafa;
}

.admin-authority-gender,
.admin-authority-flag {
    text-align: center;
    font-weight: 900;
    font-size: 24px;
}

.admin-authority-gender.is-female { color: #ec4899; }
.admin-authority-gender.is-male { color: #2588d8; }

.admin-authority-flag {
    color: #cbd5e1;
    font-size: 22px;
}

.admin-authority-flag.is-system {
    color: #2588d8;
}

.admin-authority-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
}

.admin-authority-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    flex: 0 0 auto;
}

.admin-authority-namebox {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-authority-namebox strong {
    color: #1f2937;
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-authority-namebox span {
    color: var(--authority-accent, #ef4444);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-authority-edit {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 27px;
    font-weight: 900;
    cursor: pointer;
}

.admin-authority-edit:hover,
.admin-authority-edit:focus-visible {
    background: #eef6ff;
    color: #007bff;
    outline: 0;
}

.admin-authority-empty {
    padding: 28px 12px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

.admin-authority-empty.is-error {
    color: #dc2626;
}

.admin-authority-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
}

.admin-authority-profile-avatar {
    width: 54px;
    height: 54px;
    border-radius: 5px;
    object-fit: cover;
}

.admin-authority-profile strong,
.admin-authority-profile span {
    display: block;
}

.admin-authority-profile strong {
    color: #111827;
    font-size: 16px;
}

.admin-authority-profile span {
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
}

.admin-authority-role-list {
    padding: 10px 14px 2px;
}

.admin-authority-role-row {
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 8px;
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
}

.admin-authority-role-row:hover,
.admin-authority-role-row:focus-visible {
    border-color: #2588d8;
    background: #f0f8ff;
    outline: 0;
}

.admin-authority-role-row.is-selected {
    border-color: #22c55e;
    background: #ecfdf5;
}

.admin-authority-role-mark {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--authority-accent, #2588d8);
    box-shadow: 0 0 0 4px rgba(37, 136, 216, .12);
}

.admin-authority-role-name {
    min-width: 0;
    color: #111827;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-authority-role-type {
    color: #64748b;
    font-size: 12px;
}

.admin-authority-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.admin-authority-logs,
.admin-authority-remove,
.admin-authority-back {
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-weight: 800;
    padding: 10px 14px;
    cursor: pointer;
}

.admin-authority-logs {
    background: #22c55e;
}

.admin-authority-remove {
    background: #ef4444;
}

.admin-authority-back {
    background: #475569;
}

.admin-member-panel,
.admin-member-form {
    height: calc(100% - 42px);
    min-height: 0;
    background: #fff;
    overflow: auto;
}

.admin-member-search {
    height: 42px;
    margin: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    align-items: center;
    background: #fff;
}

.admin-member-search input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 0 13px;
    font-size: 13px;
    color: #334155;
}

.admin-member-search span {
    width: 34px;
    text-align: center;
    color: #999;
    font-size: 24px;
    line-height: 1;
}

.admin-member-list {
    border-top: 1px solid #e5e7eb;
}

.admin-member-row {
    min-height: 58px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 80px;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.admin-member-row:nth-child(even) {
    background: #fafafa;
}

.admin-member-row.is-protected {
    box-shadow: inset 3px 0 0 #f59e0b;
}

.admin-member-gender {
    text-align: center;
    font-weight: 900;
    font-size: 24px;
}

.admin-member-gender.is-female { color: #ec4899; }
.admin-member-gender.is-male { color: #2588d8; }

.admin-member-user {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
}

.admin-member-avatar {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    flex: 0 0 auto;
}

.admin-member-namebox {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-member-namebox strong,
.admin-member-namebox span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-member-namebox strong {
    color: #1f2937;
    font-size: 14px;
    line-height: 1.1;
}

.admin-member-namebox span {
    color: #64748b;
    font-size: 12px;
}

.admin-member-row.is-frozen .admin-member-namebox strong,
.admin-member-row.is-frozen .admin-member-namebox span {
    color: #ef4444;
    text-decoration: line-through;
}

.admin-member-edit {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: #555;
    font-size: 27px;
    font-weight: 900;
    cursor: pointer;
}

.admin-member-edit:hover,
.admin-member-edit:focus-visible {
    background: #eef6ff;
    color: #007bff;
    outline: 0;
}

.admin-member-empty {
    padding: 28px 12px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
}

.admin-member-empty.is-error {
    color: #dc2626;
}

.admin-member-pagination {
    justify-content: center;
    padding: 12px 0;
}

.admin-member-avatar-editor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 16px 12px;
}

.admin-member-avatar-editor img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
}

.admin-member-avatar-editor button {
    border: 0;
    border-radius: 4px;
    background: #3f51c8;
    color: #fff;
    font-weight: 800;
    padding: 10px 22px;
    cursor: pointer;
}

.admin-bot-avatar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.admin-member-avatar-editor button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.admin-member-divider {
    margin: 0 22px 14px;
    border-top: 1px solid #e5e7eb;
}

.admin-member-field {
    display: grid;
    gap: 7px;
    padding: 0 22px 13px;
    font-size: 13px;
    font-weight: 800;
    color: #111827;
}

.admin-member-field input,
.admin-member-field select,
.admin-member-field textarea,
.admin-member-date-row select {
    min-height: 38px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    padding: 0 12px;
    color: #111827;
    font-size: 14px;
}

.admin-member-field textarea {
    min-height: 78px;
    resize: vertical;
    padding: 10px 12px;
    line-height: 1.35;
}

.admin-member-date-row {
    display: flex;
    gap: 28px;
}

.admin-member-date-row select {
    min-width: 74px;
}

.admin-member-permissions {
    padding: 2px 22px 14px;
}

.admin-member-permissions-title {
    margin-bottom: 10px;
    color: #111827;
    font-weight: 800;
    font-size: 13px;
}

.admin-member-permissions label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    margin-left: 40px;
    color: #374151;
    font-size: 14px;
}

.admin-member-protection-note {
    margin: 0 22px 10px;
    color: #6b7280;
    font-size: 12px;
    line-height: 1.55;
}

.admin-member-info-lines {
    display: grid;
    gap: 14px;
    padding: 4px 22px 18px;
}

.admin-member-info-lines div {
    display: grid;
    gap: 5px;
}

.admin-member-info-lines span {
    color: #6b7280;
    font-size: 12px;
}

.admin-member-info-lines strong {
    color: #111827;
    font-size: 15px;
    font-weight: 600;
}

.admin-member-actions {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 0 22px 18px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.admin-member-delete,
.admin-member-save {
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-weight: 800;
    padding: 11px 28px;
    cursor: pointer;
}

.admin-member-delete {
    background: #ef2929;
}

.admin-member-save {
    background: #3f51c8;
}

.admin-member-ban-box {
    margin: 0 22px 18px;
    padding: 16px 0 0;
    border-top: 1px solid #e5e7eb;
}

.admin-member-ban-title {
    margin-bottom: 12px;
    color: #991b1b;
    font-size: 14px;
    font-weight: 900;
}

.admin-member-ban-box .admin-member-field {
    padding-left: 0;
    padding-right: 0;
}

.admin-member-ban-note {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.45;
}

.admin-member-ban-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.admin-member-ban {
    border: 0;
    border-radius: 4px;
    background: #991b1b;
    color: #fff;
    font-weight: 900;
    padding: 10px 24px;
    cursor: pointer;
}

.admin-ban-list {
    border-top: 1px solid #e5e7eb;
}

.admin-ban-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(140px, 1.1fr) 132px;
    min-height: 62px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.admin-ban-row:nth-child(even) {
    background: #fafafa;
}

.admin-ban-user,
.admin-ban-reason,
.admin-ban-actions {
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 10px 12px;
}

.admin-ban-user {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.admin-ban-user strong,
.admin-ban-user span,
.admin-ban-reason {
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-ban-user strong {
    max-width: 100%;
    color: #111827;
    font-size: 14px;
}

.admin-ban-user span {
    max-width: 100%;
    color: #64748b;
    font-size: 12px;
    white-space: nowrap;
}

.admin-ban-reason {
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    color: #374151;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 13px;
    white-space: nowrap;
}

.admin-ban-warning {
    margin-top: 4px;
    color: #b45309;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
}

.admin-ban-actions {
    gap: 8px;
    justify-content: center;
}

.admin-ban-info,
.admin-ban-revoke,
.admin-ban-detail-head button {
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.admin-ban-info {
    width: 32px;
    height: 32px;
    background: #2563eb;
}

.admin-ban-revoke {
    min-height: 32px;
    padding: 0 10px;
    background: #16a34a;
}

.admin-ban-detail {
    margin: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f8fafc;
}

.admin-ban-detail-head {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid #d1d5db;
}

.admin-ban-detail-head strong {
    color: #111827;
    font-size: 14px;
}

.admin-ban-detail-head button {
    background: #475569;
    padding: 8px 12px;
}

.admin-ban-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.admin-ban-detail-grid div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-ban-detail-grid .is-wide {
    grid-column: 1 / -1;
}

.admin-ban-detail-grid span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-ban-detail-grid strong {
    min-width: 0;
    color: #111827;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.admin-panel-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 110px;
    padding: 14px 10px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 4px;
    background: #0B7AF6;
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .28);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

.admin-panel-tile:hover,
.admin-panel-tile:focus-visible {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(37, 99, 235, .34);
    outline: none;
}

.admin-panel-tile:disabled,
.admin-panel-tile.is-disabled {
    cursor: not-allowed;
    opacity: .55;
    filter: grayscale(.15);
    box-shadow: none;
}

.admin-panel-tile:disabled:hover,
.admin-panel-tile.is-disabled:hover,
.admin-panel-tile:disabled:focus-visible,
.admin-panel-tile.is-disabled:focus-visible {
    transform: none;
    filter: grayscale(.15);
    box-shadow: none;
}

.admin-panel-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #FFFFFF;
}

.admin-panel-tile-icon svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-panel-tile-label {
    width: 100%;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .admin-panel-window {
        top: 64px;
        left: 10px;
        width: calc(100vw - 20px);
        max-height: calc(100vh - 76px);
    }

    .admin-panel-content {
        min-height: 0;
    }

    .admin-panel-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: 100%;
        max-height: none;
    }

    .admin-panel-grid-general {
        height: calc(100% - 42px);
        max-height: none;
    }

    .admin-statistics {
        height: calc(100% - 42px);
        max-height: none;
    }

    .admin-login-page-mode,
    .admin-login-page-layout {
        grid-template-columns: 1fr;
    }

    .admin-login-page-tabs {
        overflow-x: auto;
    }

    .admin-login-page-preview {
        position: static;
    }

    .admin-stat-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-stat-card,
    .admin-stat-card:nth-child(3n),
    .admin-stat-card:nth-child(n+4) {
        border-right: 1px solid #DDE3EA;
        border-bottom: 1px solid #E2E8F0;
    }

    .admin-stat-card:nth-child(2n) {
        border-right: 0;
    }

    .admin-stat-card strong {
        font-size: 26px;
    }

    .admin-stat-lists {
        grid-template-columns: 1fr;
    }

    .admin-log-panel {
        max-height: none;
    }

    .admin-log-row {
        grid-template-columns: 86px minmax(0, 1fr) 78px 36px;
    }

    .admin-log-actor,
    .admin-log-main,
    .admin-log-date {
        padding: 6px 7px;
    }

    .admin-log-date {
        font-size: 10px;
    }

    .admin-panel-tile {
        min-height: 94px;
    }

    .admin-ban-row {
        grid-template-columns: 1fr;
    }

    .admin-ban-reason {
        border-left: 0;
        border-right: 0;
        border-top: 1px solid #e5e7eb;
        border-bottom: 1px solid #e5e7eb;
    }

    .admin-ban-detail-grid {
        grid-template-columns: 1fr;
    }
}