/**

 * BEXGRAM — Modern Desktop UI Architecture (v2)

 * Pure Desktop Overhaul for >= 1200px (with supporting rules >= 1024px)

 * Strictly preserves Mobile (< 768px) and Tablet (< 1024px) layouts.

 */



:root {

  --bex-d-primary: var(--bex-primary, var(--color-primary));

  --bex-d-primary-dark: var(--bex-primary-dark, #006B57);

  --bex-d-green-light: var(--bex-selected, #E9F8F2);

  --bex-d-green-subtle: rgba(0, 128, 105, 0.08);

  --bex-d-bg: var(--bex-bg, #F0F2F5);

  --bex-d-card-bg: var(--bex-surface, var(--color-bg-light));

  --bex-d-text-main: var(--bex-text, var(--color-bg-dark));

  --bex-d-text-sub: var(--bex-text-secondary, #54656F);

  --bex-d-border: var(--bex-border, #E9EDEF);

  --bex-d-shadow-sm: var(--bex-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));

  --bex-d-shadow: var(--bex-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));

  --bex-d-shadow-lg: var(--bex-shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.08));

  --bex-d-radius: 12px;

  --bex-d-radius-lg: 16px;

  --bex-d-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

}



html.dark {

  --bex-d-primary: var(--bex-primary, #00A884);

  --bex-d-primary-dark: var(--bex-primary-dark, var(--color-primary));

  --bex-d-green-light: var(--bex-selected, #182F2A);

  --bex-d-green-subtle: rgba(0, 168, 132, 0.1);

  --bex-d-bg: var(--bex-bg, #0B141A);

  --bex-d-card-bg: var(--bex-surface, var(--color-bg-dark));

  --bex-d-text-main: var(--bex-text, #E9EDEF);

  --bex-d-text-sub: var(--bex-text-secondary, #AEBAC1);

  --bex-d-border: var(--bex-border, #2A3942);

}



/* ==========================================================================

   DESKTOP GLOBAL CONTAINER & BASE RULES (min-width: 1200px)

   ========================================================================== */

@media (min-width: 1200px) {

  body.bex-wa,

  body.bex-user-page {

    background-color: var(--bex-d-bg) !important;

    color: var(--bex-d-text-main) !important;

    font-family: var(--bex-d-font);

  }



  /* Prevent unexpected horizontal body overflow */

  html, body {

    overflow-x: hidden;

  }



  /* --------------------------------------------------------------------------

     1. LEFT NAVIGATION RAIL / SIDEBAR (#wa-rail)

     -------------------------------------------------------------------------- */

  body.bex-wa #wa-rail,

  body.bex-user-page #wa-rail,

  #wa-rail.bex-desktop-rail {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    flex: 0 0 72px !important;

    width: 72px !important;

    min-width: 72px !important;

    max-width: 72px !important;

    height: 100vh !important;

    height: 100dvh !important;

    background-color: var(--bex-d-card-bg) !important;

    border-right: 1px solid var(--bex-d-border) !important;

    padding: 10px 4px 8px 4px !important;

    box-sizing: border-box !important;

    z-index: 40 !important;

    position: relative !important;

    overflow-y: auto !important;

    overflow-x: visible !important;

    scrollbar-width: none !important;

  }



  /* Rail Brand Header */

  #wa-rail .bex-rail-header {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 0 0 8px 0 !important;

    border-bottom: 1px solid var(--bex-d-border) !important;

    margin-bottom: 6px !important;

    width: 100% !important;

  }



  #wa-rail .bex-rail-brand {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    text-decoration: none !important;

    width: 100% !important;

  }



  #wa-rail .bex-rail-brand-icon {

    width: 38px !important;

    height: 38px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

  }



  #wa-rail .bex-rail-logo-img {

    width: 38px !important;

    height: 38px !important;

    object-fit: contain !important;

    border-radius: 50% !important;

  }



  #wa-rail .bex-rail-brand-text,

  #wa-rail .bex-brand-name,

  #wa-rail .bex-brand-dot {

    display: none !important;

  }



  /* Masaüstünde (#wa-rail üzerinde Bexgram logosu varken) header bexgram yazısı önündeki favicon gizlenir */

  .bex-brand-favicon {

    display: none !important;

  }



  /* Nav Links List */

  #wa-rail .bex-rail-nav {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 3px !important;

    flex: 1 1 auto !important;

    overflow-y: auto !important;

    scrollbar-width: none !important;

    width: 100% !important;

  }



  #wa-rail .rail-btn {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 44px !important;

    height: 44px !important;

    min-height: 44px !important;

    padding: 0 !important;

    margin: 0 auto !important;

    border-radius: 12px !important;

    color: var(--bex-d-text-sub) !important;

    text-decoration: none !important;

    transition: all 0.18s ease !important;

    background: transparent !important;

    box-sizing: border-box !important;

    position: relative !important;

  }



  #wa-rail .rail-btn:hover {

    background-color: var(--bex-d-green-subtle) !important;

    color: var(--bex-d-primary-dark) !important;

  }



  #wa-rail .rail-btn.on,

  #wa-rail .rail-btn[aria-current="page"] {

    background-color: var(--bex-d-green-light) !important;

    color: var(--bex-d-primary-dark) !important;

    font-weight: 700 !important;

  }



  #wa-rail .rail-btn-icon {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 24px !important;

    height: 24px !important;

    flex-shrink: 0 !important;

    color: inherit !important;

  }



  #wa-rail .rail-btn-icon svg {

    stroke: currentColor !important;

    transition: transform 0.18s ease !important;

  }



  #wa-rail .rail-btn:hover .rail-btn-icon svg {

    transform: scale(1.06);

  }



  #wa-rail .rail-btn.on .rail-btn-icon svg,

  #wa-rail .rail-btn[aria-current="page"] .rail-btn-icon svg {

    stroke: var(--bex-d-primary) !important;

  }



  #wa-rail .rail-btn-label {

    display: none !important;

  }



  #wa-rail .rail-badge {

    position: absolute !important;

    top: -4px !important;

    right: -6px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-width: 17px !important;

    height: 17px !important;

    padding: 0 4.5px !important;

    border-radius: 999px !important;

    font-size: 9.5px !important;

    font-weight: 700 !important;

    letter-spacing: -0.2px !important;

    line-height: 1 !important;

    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;

    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;

  }



  #wa-rail .bex-badge-emerald {

    background: linear-gradient(135deg, #00c896 0%, #00a884 100%) !important;

    color: var(--color-bg-light) !important;

  }



  #wa-rail .bex-badge-rose {

    background: linear-gradient(135deg, #ff5c5c 0%, #e53e3e 100%) !important;

    color: var(--color-bg-light) !important;

  }



  /* Right Tooltip for Rail Icons */

  #wa-rail [data-tooltip] {

    position: relative !important;

  }

  #wa-rail [data-tooltip]::after {

    content: attr(data-tooltip) !important;

    position: absolute !important;

    left: calc(100% + 12px) !important;

    top: 50% !important;

    transform: translateY(-50%) scale(0.92) !important;

    transform-origin: left center !important;

    background: var(--color-bg-dark) !important;

    color: var(--color-bg-light) !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    padding: 5px 10px !important;

    border-radius: 8px !important;

    white-space: nowrap !important;

    pointer-events: none !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease !important;

    z-index: 99999 !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;

  }

  html.dark #wa-rail [data-tooltip]::after {

    background: #202c33 !important;

    color: #e9edef !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55) !important;

  }

  #wa-rail [data-tooltip]:hover::after {

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(-50%) scale(1) !important;

  }



  /* Rail Action Button (+ Yeni Sohbet) */

  #wa-rail .bex-rail-action {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 6px 0 !important;

    width: 100% !important;

    flex-shrink: 0 !important;

  }



  #wa-rail .bex-rail-action-btn {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 42px !important;

    height: 42px !important;

    min-width: 42px !important;

    min-height: 42px !important;

    border-radius: 50% !important;

    background: linear-gradient(135deg, var(--bex-d-primary), var(--bex-d-primary-dark)) !important;

    color: var(--color-bg-light) !important;

    border: none !important;

    cursor: pointer !important;

    box-shadow: 0 4px 14px rgba(0, 155, 99, 0.28) !important;

    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

  }



  #wa-rail .bex-rail-action-btn:hover {

    transform: scale(1.05) !important;

    box-shadow: 0 6px 18px rgba(0, 155, 99, 0.35) !important;

    filter: brightness(1.04) !important;

  }



  #wa-rail .bex-rail-action-btn:active {

    transform: scale(0.96) !important;

  }



  #wa-rail .bex-rail-action-label {

    display: none !important;

  }



  /* Rail Bottom Avatar Trigger */

  #wa-rail .bex-rail-footer {

    display: flex !important;

    justify-content: center !important;

    padding-top: 6px !important;

    border-top: 1px solid var(--bex-d-border) !important;

    margin-top: auto !important;

    width: 100% !important;

    flex-shrink: 0 !important;

    position: relative !important;

  }



  #wa-rail .bex-rail-avatar-trigger-wrap {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

  }



  #wa-rail .bex-rail-avatar-btn {

    position: relative !important;

    width: 42px !important;

    height: 42px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: transparent !important;

    border: 0 !important;

    cursor: pointer !important;

    padding: 0 !important;

    border-radius: 50% !important;

    outline: none !important;

    transition: transform 0.15s ease !important;

  }



  #wa-rail .bex-rail-avatar-btn:hover {

    transform: scale(1.05) !important;

  }



  #wa-rail .bex-rail-avatar-img {

    width: 38px !important;

    height: 38px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    display: block !important;

  }



  #wa-rail .bex-rail-user-card-wrap,

  #wa-rail .bex-rail-user-card,

  #wa-rail .bex-rail-user-info,

  #wa-rail .bex-rail-user-more {

    display: none !important;

  }



  /* --------------------------------------------------------------------------

     2. DESKTOP UNIFIED TOP BAR & HEADER

     -------------------------------------------------------------------------- */

  .bex-desktop-topbar,

  body.bex-wa .bex-user-header {

  height: 56px !important;

  min-height: 56px !important;

    background: var(--bex-d-card-bg) !important;

    border-bottom: 1px solid var(--bex-d-border) !important;

    padding: 0 24px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    box-sizing: border-box !important;

  }



  /* Centered Desktop Search Pill */

  .bex-top-search-pill {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    width: 380px !important;

    max-width: 480px !important;

    height: 42px !important;

    padding: 0 16px !important;

    background-color: var(--bex-d-bg) !important;

    border: 1px solid var(--bex-d-border) !important;

    border-radius: 999px !important;

    transition: all 0.2s ease !important;

  }



  .bex-top-search-pill:focus-within {

    border-color: var(--bex-d-primary) !important;

    background-color: var(--bex-d-card-bg) !important;

    box-shadow: 0 0 0 3px rgba(0, 155, 99, 0.12) !important;

  }



  .bex-top-search-pill input {

    border: none !important;

    background: transparent !important;

    outline: none !important;

    font-size: 13.5px !important;

    color: var(--bex-d-text-main) !important;

    width: 100% !important;

  }



  .bex-top-search-pill input::placeholder {

    color: var(--bex-d-text-sub) !important;

  }



  /* Desktop Header Tools */

  .bex-top-tools {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

  }



  .bex-top-coin-pill {

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    padding: 6px 14px !important;

    border-radius: 999px !important;

    background: rgba(245, 158, 11, 0.12) !important;

    border: 1px solid rgba(245, 158, 11, 0.25) !important;

    color: #B45309 !important;

    font-size: 13px !important;

    font-weight: 800 !important;

    font-family: monospace, monospace !important;

    text-decoration: none !important;

    transition: background 0.15s ease !important;

  }



  html.dark .bex-top-coin-pill {

    color: #FBBF24 !important;

  }



  .bex-top-coin-pill:hover {

    background: rgba(245, 158, 11, 0.2) !important;

  }



  .bex-top-btn {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 40px !important;

    height: 40px !important;

    border-radius: 50% !important;

    background: var(--bex-d-bg) !important;

    border: 1px solid var(--bex-d-border) !important;

    color: var(--bex-d-text-sub) !important;

    cursor: pointer !important;

    transition: all 0.15s ease !important;

    text-decoration: none !important;

    position: relative !important;

  }



  .bex-top-btn:hover {

    background-color: var(--bex-d-green-subtle) !important;

    color: var(--bex-d-primary) !important;

    border-color: var(--bex-d-primary) !important;

  }



  .bex-top-btn-badge {

    position: absolute !important;

    top: -2px !important;

    right: -2px !important;

    min-width: 18px !important;

    height: 18px !important;

    padding: 0 4px !important;

    border-radius: 999px !important;

    background-color: #E11D48 !important;

    color: var(--color-bg-light) !important;

    font-size: 10px !important;

    font-weight: 800 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    border: 2px solid var(--bex-d-card-bg) !important;

  }



  /* Desktop App Download Pill */

  .bex-top-download-pill {

    display: inline-flex !important;

    align-items: center !important;

    gap: 7px !important;

    padding: 6px 14px !important;

    border-radius: 999px !important;

    background: var(--bex-d-green-subtle) !important;

    border: 1px solid var(--bex-d-green-light) !important;

    color: var(--bex-d-primary-dark) !important;

    font-size: 12.5px !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    transition: all 0.15s ease !important;

  }



  .bex-top-download-pill:hover {

    background: var(--bex-d-green-light) !important;

    transform: translateY(-1px) !important;

  }



  /* --------------------------------------------------------------------------

     3. SOHBETLER SAYFASI (MESSENGER.PHP) — 4-PANEL ARCHITECTURE

     -------------------------------------------------------------------------- */

  body.bex-wa #messenger-sidebar {

    flex: 0 0 340px !important;

    width: 340px !important;

    min-width: 340px !important;

    max-width: 340px !important;

    background-color: var(--bex-d-card-bg) !important;

    border-right: 1px solid var(--bex-d-border) !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;

    overflow-y: hidden !important;

    display: flex !important;

    flex-direction: column !important;

  }



  body.bex-wa #thread-list-main,

  body.bex-wa #thread-list-archived {

    overflow-x: hidden !important;

  }



  body.bex-wa #bex-desktop-download-bar,

  .bex-desktop-download-bar {

    display: none !important;

    height: 0 !important;

    max-height: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

    border: none !important;

    overflow: hidden !important;

  }



  /* Chat list header */

  body.bex-wa #messenger-sidebar > header {

  height: 56px !important;

  min-height: 56px !important;

    padding: 0 16px !important;

    background: var(--bex-d-card-bg) !important;

    border-bottom: 1px solid var(--bex-d-border) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

  }



  /* Chat search capsule */

  body.bex-wa #messenger-sidebar .search-pill {

    height: 40px !important;

    min-height: 40px !important;

    background-color: var(--bex-d-bg) !important;

    border: 1px solid var(--bex-d-border) !important;

    border-radius: 12px !important;

    padding: 0 12px !important;

  }



  body.bex-wa #messenger-sidebar .search-pill:focus-within {

    border-color: var(--bex-d-primary) !important;

    background: var(--bex-d-card-bg) !important;

  }



  /* Chat Filter Pills */

  body.bex-wa #chat-filters {

    padding: 8px 16px 12px 16px !important;

    background-color: var(--bex-d-card-bg) !important;

    gap: 6px !important;

  }



  body.bex-wa #chat-filters .chat-filter {

    padding: 6px 14px !important;

    border-radius: 999px !important;

    font-size: 12.5px !important;

    font-weight: 600 !important;

    border: 1px solid var(--bex-d-border) !important;

    background-color: var(--bex-d-bg) !important;

    color: var(--bex-d-text-sub) !important;

    cursor: pointer !important;

    transition: all 0.15s ease !important;

  }



  body.bex-wa #chat-filters .chat-filter:hover {

    background-color: var(--bex-d-green-subtle) !important;

    color: var(--bex-d-primary-dark) !important;

  }



  body.bex-wa #chat-filters .chat-filter.is-on {

    background-color: var(--bex-d-primary) !important;

    color: var(--color-bg-light) !important;

    border-color: var(--bex-d-primary) !important;

  }



  /* Chat Thread Row */

  body.bex-wa .thread-row {

    padding: 10px 14px !important;

    margin: 2px 8px !important;

    border-radius: 14px !important;

    border: none !important;

    transition: background-color 0.15s ease !important;

  }



  body.bex-wa .thread-row:hover {

    background-color: var(--bex-d-bg) !important;

  }



  body.bex-wa .thread-row.is-active,

  body.bex-wa .thread-row[data-active="1"] {

    background-color: var(--bex-d-green-subtle) !important;

  }



  body.bex-wa .thread-unread-badge.is-on {

    background-color: var(--bex-d-primary) !important;

    color: var(--color-bg-light) !important;

    border-radius: 999px !important;

    font-size: 11px !important;

    font-weight: 800 !important;

    min-width: 20px !important;

    height: 20px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

  }



  /* --------------------------------------------------------------------------

     Desktop Welcome Screen (#pane-welcome) & 3 Quick Action Buttons

     -------------------------------------------------------------------------- */

  body.bex-wa #pane-welcome {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    background-color: var(--bex-d-bg) !important;

    padding: 32px 24px !important;

    text-align: center !important;

  }



  body.bex-wa #pane-welcome .wa-welcome-card.bex-start {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    max-width: 580px !important;

    text-align: center !important;

  }



  body.bex-wa #pane-welcome .wa-welcome-actions,

  body.bex-wa #pane-welcome .bex-start-actions {

    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 12px !important;

    width: 100% !important;

    max-width: 660px !important;

    margin-top: 24px !important;

    box-sizing: border-box !important;

  }



  body.bex-wa .bex-start-actions button,

  body.bex-wa .wa-welcome-actions button {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 8px !important;

    min-height: 52px !important;

    height: auto !important;

    max-height: none !important;

    padding: 10px 12px !important;

    border-radius: 14px !important;

    background-color: var(--bex-d-card-bg) !important;

    border: 1px solid var(--bex-d-border) !important;

    color: var(--bex-d-text) !important;

    box-shadow: var(--bex-d-shadow-sm) !important;

    cursor: pointer !important;

    transition: all 0.18s ease !important;

    box-sizing: border-box !important;

    text-decoration: none !important;

  }



  body.bex-wa .bex-start-actions button:hover,

  body.bex-wa .wa-welcome-actions button:hover {

    background-color: var(--bex-d-green-subtle) !important;

    border-color: var(--bex-d-primary) !important;

    transform: translateY(-2px) !important;

    box-shadow: 0 6px 18px rgba(0, 155, 99, 0.12) !important;

  }



  /* First span: circular SVG icon */

  body.bex-wa .bex-start-actions button > span:first-child,

  body.bex-wa .bex-start-actions button > .bex-start-action-icon,

  body.bex-wa .wa-welcome-actions button > span:first-child,

  body.bex-wa .wa-welcome-actions button > .bex-start-action-icon {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    min-height: 34px !important;

    max-width: 34px !important;

    max-height: 34px !important;

    border-radius: 10px !important;

    background-color: var(--bex-d-green-light) !important;

    color: var(--bex-d-primary-dark) !important;

    flex-shrink: 0 !important;

    transition: transform 0.18s ease !important;

  }



  body.bex-wa .bex-start-actions button:hover > span:first-child,

  body.bex-wa .wa-welcome-actions button:hover > span:first-child {

    transform: scale(1.08) !important;

    background-color: var(--bex-d-primary) !important;

    color: var(--color-bg-light) !important;

  }



  body.bex-wa .bex-start-actions button svg,

  body.bex-wa .wa-welcome-actions button svg {

    width: 18px !important;

    height: 18px !important;

    stroke: currentColor !important;

  }



  /* Second span: readable text label (Birebir sohbet, Grup oluştur, Sesli ve görüntülü ara) */

  body.bex-wa .bex-start-actions button > span:last-child,

  body.bex-wa .bex-start-actions button > .bex-start-action-text,

  body.bex-wa .wa-welcome-actions button > span:last-child,

  body.bex-wa .wa-welcome-actions button > .bex-start-action-text {

    display: inline-block !important;

    width: auto !important;

    height: auto !important;

    min-width: 0 !important;

    max-width: none !important;

    border-radius: 0 !important;

    background: transparent !important;

    color: var(--bex-d-text) !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    letter-spacing: -0.15px !important;

    line-height: 1.25 !important;

    white-space: nowrap !important;

    overflow: visible !important;

    text-overflow: clip !important;

    padding: 0 !important;

    margin: 0 !important;

  }



  /* Note under buttons */

  body.bex-wa .bex-start-note {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 6px !important;

    margin-top: 18px !important;

    font-size: 12px !important;

    color: var(--bex-d-text-secondary) !important;

  }



  /* Chat Conversation Pane */

  body.bex-wa #pane-chat {

    background-color: var(--bex-d-bg) !important;

  }



  body.bex-wa #pane-chat > header {

  height: 56px !important;

  min-height: 56px !important;

    padding: 0 20px !important;

    background-color: var(--bex-d-card-bg) !important;

    border-bottom: 1px solid var(--bex-d-border) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

  }



  /* Chat Message Bubbles */

  body.bex-wa .bw-bubble--recv,

  body.bex-wa .bubble.recv,

  body.bex-wa .mesaj-gelen {

    background-color: var(--wa-incoming, var(--color-bg-light)) !important;

    color: var(--wa-text, var(--bex-d-text-main)) !important;

    border-radius: 18px 18px 18px 4px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;

    border: 1px solid var(--bex-d-border) !important;

  }



  html.dark body.bex-wa .bw-bubble--recv,

  html.dark body.bex-wa .bubble.recv,

  html.dark body.bex-wa .mesaj-gelen {

    background-color: var(--wa-incoming, #1F2C34) !important;

    color: var(--wa-text, #E9EDEF) !important;

    border-color: rgba(255, 255, 255, 0.06) !important;

  }



  body.bex-wa .bw-bubble--sent,

  body.bex-wa .bubble.sent,

  body.bex-wa .mesaj-giden {

    background-color: var(--wa-outgoing, var(--bex-d-green-light)) !important;

    color: var(--wa-text, var(--bex-d-text-main)) !important;

    border-radius: 18px 18px 4px 18px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;

  }



  html.dark body.bex-wa .bw-bubble--sent,

  html.dark body.bex-wa .bubble.sent,

  html.dark body.bex-wa .mesaj-giden {

    background-color: var(--wa-outgoing, #005C4B) !important;

    color: var(--wa-text, #E9EDEF) !important;

  }



  /* Chat Message Composer */

  body.bex-wa .composer-container {

    max-width: 900px !important;

    margin: 0 auto !important;

  }



  body.bex-wa #composer-input-wrap {

    border-radius: 20px !important;

    border: 1px solid var(--bex-d-border) !important;

    background-color: var(--bex-d-card-bg) !important;

    padding: 8px 16px !important;

    box-shadow: var(--bex-d-shadow-sm) !important;

  }



  body.bex-wa #composer-input-wrap:focus-within {

    border-color: var(--bex-d-primary) !important;

    box-shadow: 0 0 0 3px rgba(0, 155, 99, 0.12) !important;

  }



  body.bex-wa #btn-send {

    background: linear-gradient(135deg, var(--bex-d-primary), var(--bex-d-primary-dark)) !important;

    color: var(--color-bg-light) !important;

    box-shadow: 0 3px 10px rgba(0, 155, 99, 0.3) !important;

    transition: transform 0.15s ease !important;

  }



  body.bex-wa #btn-send:hover {

    transform: scale(1.05) !important;

  }



  /* 4th PANEL: Right Contact Drawer (#bex-contact-drawer) in Side-by-Side Mode */

  body.bex-wa #bex-contact-drawer {

    position: absolute !important;

    top: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 380px !important;

    min-width: 380px !important;

    max-width: 380px !important;

    height: 100% !important;

    border-left: 1px solid var(--bex-d-border) !important;

    box-shadow: none !important;

    background-color: var(--bex-d-card-bg) !important;

    z-index: 30 !important;

    display: none;

    flex-direction: column;

    overflow-y: auto;

  }



  /* When drawer has .is-open AND body has .bex-drawer-open, show it docked on right */

  body.bex-wa.bex-drawer-open #bex-contact-drawer.is-open {

    display: flex !important;

  }



  /* When drawer is closed, force hide it */

  body.bex-wa:not(.bex-drawer-open) #bex-contact-drawer,

  body.bex-wa #bex-contact-drawer.hidden {

    display: none !important;

  }



  /* When drawer is open, adjust chat pane width smoothly so it docks right up to the drawer */

  body.bex-wa.bex-drawer-open #pane-chat {

    left: 0 !important;

    right: 380px !important;

    width: calc(100% - 380px) !important;

    transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  }



  /* When drawer is closed, chat pane takes the FULL 100% width with NO GAP */

  body.bex-wa:not(.bex-drawer-open) #pane-chat {

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  }



  @media (max-width: 1099px) {

    /* When drawer is open on narrow screens, keep chat full width and let drawer overlay */

    body.bex-wa.bex-drawer-open #pane-chat {

      right: 0 !important;

      width: 100% !important;

    }

  }





  /* In side-by-side mode, disable full-screen dark backdrop overlay */

  body.bex-wa #bex-contact-drawer-backdrop {

    display: none !important;

    opacity: 0 !important;

    pointer-events: none !important;

  }



  /* Contact Drawer Header */

  #bex-contact-drawer > header {

  height: 56px !important;

  min-height: 56px !important;

    background-color: var(--bex-d-card-bg) !important;

    border-bottom: 1px solid var(--bex-d-border) !important;

    padding: 0 18px !important;

  }



  /* Contact Drawer Hero Cover & Avatar */

  #bex-drawer-cover-wrap {

    height: 130px !important;

    border-radius: 0 !important;

  }



  #bex-contact-drawer .bex-avatar-frame {

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;

  }



  /* --------------------------------------------------------------------------

     4. KEŞFET SAYFASI (KESFET.PHP) — 3-PANEL SOCIAL ARCHITECTURE

     -------------------------------------------------------------------------- */

  body.page-explore main {

  display: flex !important;

  flex-direction: row !important;

  width: 100% !important;

  min-height: 100vh !important;

  min-height: 100dvh !important;

  height: auto !important;

  overflow: visible !important;

  }



  body.page-explore #kesfet-desktop-sidebar {

  display: flex !important;

  }

  

  /* Yükseklik/kaydırma css/whatsapp-clone.css'te. Burada yalnız renk. */

  body.page-explore #kesfet-main-section {

  background-color: var(--bex-d-bg) !important;

  border-right: 1px solid var(--bex-d-border) !important;

  }



  /* Stories (Hikayeler) row in Keşfet */

  .bex-stories-bar {

    display: flex !important;

    align-items: center !important;

    gap: 16px !important;

    padding: 18px 24px !important;

    overflow-x: auto !important;

    background-color: var(--bex-d-card-bg) !important;

    border-radius: var(--bex-d-radius) !important;

    border: 1px solid var(--bex-d-border) !important;

    box-shadow: var(--bex-d-shadow-sm) !important;

    margin-bottom: 20px !important;

  }



  .bex-story-item {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 6px !important;

    cursor: pointer !important;

    flex-shrink: 0 !important;

  }



  .bex-story-avatar-ring {

    width: 62px !important;

    height: 62px !important;

    border-radius: 50% !important;

    padding: 2.5px !important;

    background: linear-gradient(135deg, var(--bex-primary, var(--color-primary)), var(--bex-accent, #25D366)) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    transition: transform 0.18s ease !important;

  }



  .bex-story-item:hover .bex-story-avatar-ring {

    transform: scale(1.06) !important;

  }



  .bex-story-avatar-ring img {

    width: 100% !important;

    height: 100% !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    border: 2px solid var(--bex-d-card-bg) !important;

  }



  .bex-story-name {

    font-size: 12px !important;

    font-weight: 600 !important;

    color: var(--bex-d-text-main) !important;

    max-width: 64px !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

  }



  /* Keşfet Category Pills */

  .bex-category-pills {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    overflow-x: auto !important;

    padding: 4px 0 16px 0 !important;

  }



  .bex-category-pill {

    padding: 8px 18px !important;

    border-radius: 999px !important;

    font-size: 13.5px !important;

    font-weight: 600 !important;

    border: 1px solid var(--bex-d-border) !important;

    background-color: var(--bex-d-card-bg) !important;

    color: var(--bex-d-text-sub) !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    transition: all 0.15s ease !important;

    box-shadow: var(--bex-d-shadow-sm) !important;

  }



  .bex-category-pill:hover {

    background-color: var(--bex-d-green-subtle) !important;

    color: var(--bex-d-primary-dark) !important;

  }



  .bex-category-pill.is-active {

    background-color: var(--bex-d-primary) !important;

    color: var(--color-bg-light) !important;

    border-color: var(--bex-d-primary) !important;

    box-shadow: 0 3px 12px rgba(0, 155, 99, 0.28) !important;

  }



  /* Keşfet Feed Post Cards & Feed Components (Desktop 720px Canonical Alignment) */

  .bex-post-card {

    width: 100% !important;

    max-width: min(720px, 100%) !important;

    margin-left: auto !important;

    margin-right: auto !important;

    background-color: var(--bex-d-card-bg) !important;

    border-radius: var(--bex-d-radius-lg) !important;

    border: 1px solid var(--bex-d-border) !important;

    box-shadow: var(--bex-d-shadow) !important;

    margin-bottom: 22px !important;

    overflow: hidden !important;

    transition: transform 0.2s ease, box-shadow 0.2s ease !important;

    box-sizing: border-box !important;

  }



  .bex-feed-create-card,

  #bex-explore-feed-stream,

  .bex-focus-post-wrapper,

  .bex-wa-skel,

  .bex-wa-skel-card,

  .bex-explore-tabs,

  .bex-explore-search-wrap,

  .bex-explore-empty,

  .bex-feed-end-notice {

    width: 100% !important;

    max-width: min(720px, 100%) !important;

    margin-left: auto !important;

    margin-right: auto !important;

    box-sizing: border-box !important;

  }



  .bex-post-card:hover {

    box-shadow: var(--bex-d-shadow-lg) !important;

  }



  .bex-post-header {

      padding: 14px 18px 10px !important;

      display: flex !important;

      align-items: center !important;

  }

  

  .bex-post-header-main {

      display: flex !important;

      align-items: center !important;

      justify-content: space-between !important;

      gap: 12px !important;

      width: 100% !important;

      min-width: 0 !important;

  }

  

  .bex-post-context-row {

      margin: 4px 0 0 !important;

  }



  .bex-post-author {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    text-decoration: none !important;

  }



  .bex-post-avatar {

    width: 44px !important;

    height: 44px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

  }



  .bex-post-author-name {

    font-size: 14.5px !important;

    font-weight: 700 !important;

    color: var(--bex-d-text-main) !important;

    line-height: 1.2 !important;

  }



  .bex-post-time {

    font-size: 12px !important;

    color: var(--bex-d-text-sub) !important;

  }



  .bex-post-caption {

    padding: 0 20px 14px 20px !important;

    font-size: 14.5px !important;

    line-height: 1.5 !important;

    color: var(--bex-d-text-main) !important;

  }



  .bex-post-media-wrap {

    width: 100% !important;

    max-height: 580px !important;

    overflow: hidden !important;

    background-color: var(--color-text) !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

  }



  .bex-post-media-img {

    width: 100% !important;

    height: auto !important;

    max-height: 580px !important;

    object-fit: contain !important;

  }



  .bex-post-actions {

    padding: 14px 20px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    border-top: 1px solid var(--bex-d-border) !important;

  }



  .bex-post-action-group {

    display: flex !important;

    align-items: center !important;

    gap: 18px !important;

  }



  .bex-post-action-btn {

    display: inline-flex !important;

    align-items: center !important;

    gap: 6px !important;

    background: transparent !important;

    border: none !important;

    color: var(--bex-d-text-sub) !important;

    font-size: 13.5px !important;

    font-weight: 600 !important;

    cursor: pointer !important;

    transition: color 0.15s ease !important;

    padding: 0 !important;

  }



  .bex-post-action-btn:hover {

    color: var(--bex-d-primary) !important;

  }



  /* Right Keşfet Panel (#kesfet-desktop-right-panel) */

  #kesfet-desktop-right-panel {

    display: flex !important;

    flex-direction: column !important;

    flex: 0 0 340px !important;

    width: 340px !important;

    min-width: 340px !important;

    max-width: 340px !important;

    height: 100% !important;

    overflow-y: auto !important;

    background-color: var(--bex-d-card-bg) !important;

    border-left: 1px solid var(--bex-d-border) !important;

    padding: 20px 18px !important;

    box-sizing: border-box !important;

    gap: 24px !important;

  }



  .bex-widget-card {

    background-color: var(--bex-d-card-bg) !important;

    border-radius: var(--bex-d-radius) !important;

    border: 1px solid var(--bex-d-border) !important;

    padding: 16px !important;

    box-shadow: var(--bex-d-shadow-sm) !important;

  }



  .bex-widget-header {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-bottom: 14px !important;

  }



  .bex-widget-title {

    font-size: 14.5px !important;

    font-weight: 700 !important;

    color: var(--bex-d-text-main) !important;

  }



  .bex-widget-more-link {

    font-size: 12.5px !important;

    font-weight: 600 !important;

    color: var(--bex-d-primary) !important;

    text-decoration: none !important;

  }



  .bex-widget-more-link:hover {

    text-decoration: underline !important;

  }



  /* Suggested user row */

  .bex-user-suggestion-row {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    padding: 8px 0 !important;

  }



  .bex-user-suggestion-meta {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    min-width: 0 !important;

  }



  .bex-user-suggestion-avatar {

    width: 40px !important;

    height: 40px !important;

    border-radius: 50% !important;

    object-fit: cover !important;

    flex-shrink: 0 !important;

  }



  .bex-btn-follow-pill {

    display: inline-flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 6px 14px !important;

    border-radius: 999px !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    border: 1px solid var(--bex-d-primary) !important;

    background: transparent !important;

    color: var(--bex-d-primary) !important;

    cursor: pointer !important;

    transition: all 0.15s ease !important;

    white-space: nowrap !important;

    word-break: keep-all !important;

    flex-shrink: 0 !important;

    width: auto !important;

    min-width: max-content !important;

  }



  .bex-btn-follow-pill:hover,

  .bex-btn-follow-pill.is-following {

    background-color: var(--bex-d-primary) !important;

    color: var(--color-bg-light) !important;

  }



  /* Live now room row */

  .bex-live-widget-card {

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    padding: 8px 0 !important;

    text-decoration: none !important;

  }



  .bex-live-thumbnail-wrap {

    position: relative !important;

    width: 60px !important;

    height: 44px !important;

    border-radius: 8px !important;

    overflow: hidden !important;

    flex-shrink: 0 !important;

    background: var(--color-text) !important;

  }



  .bex-live-thumbnail-wrap img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

  }



  .bex-live-badge-red {

    position: absolute !important;

    top: 4px !important;

    left: 4px !important;

    padding: 1px 5px !important;

    border-radius: 4px !important;

    background-color: #EF4444 !important;

    color: var(--color-bg-light) !important;

    font-size: 9px !important;

    font-weight: 800 !important;

    line-height: 1 !important;

  }



  /* --------------------------------------------------------------------------

     5. GRUPLAR SAYFASI (GRUP.PHP) — DESKTOP ENHANCEMENTS

     -------------------------------------------------------------------------- */

  body.bex-wa .grup-card {

    padding: 12px 16px !important;

    margin: 4px 8px !important;

    border-radius: var(--bex-d-radius) !important;

    background-color: var(--bex-d-card-bg) !important;

    border: 1px solid var(--bex-d-border) !important;

    box-shadow: var(--bex-d-shadow-sm) !important;

    transition: all 0.15s ease !important;

  }



  body.bex-wa .grup-card:hover {

    box-shadow: var(--bex-d-shadow) !important;

    border-color: var(--bex-d-primary) !important;

  }



  /* --------------------------------------------------------------------------

     6. CANLI ODALAR SAYFASI (ODALAR.PHP) — DESKTOP ENHANCEMENTS

     -------------------------------------------------------------------------- */

  .wa-room-card {

    border-radius: var(--bex-d-radius-lg) !important;

    border: 1px solid var(--bex-d-border) !important;

    box-shadow: var(--bex-d-shadow) !important;

    transition: transform 0.2s ease, box-shadow 0.2s ease !important;

  }



  .wa-room-card:hover {

    transform: translateY(-2px) !important;

    box-shadow: var(--bex-d-shadow-lg) !important;

  }



  /* --------------------------------------------------------------------------

     7. PROFİL SAYFASI (UYE.PHP & PROFIL.PHP) — DESKTOP ENHANCEMENTS

     -------------------------------------------------------------------------- */

  .member-cover {

    height: 220px !important;

    border-radius: var(--bex-d-radius-lg) var(--bex-d-radius-lg) 0 0 !important;

  }



  .member-avatar {

    width: 96px !important;

    height: 96px !important;

    border: 4px solid var(--bex-d-card-bg) !important;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;

  }



  .bex-profile-counters-bar {

    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-around !important;

    background-color: var(--bex-d-bg) !important;

    border-radius: var(--bex-d-radius) !important;

    border: 1px solid var(--bex-d-border) !important;

    padding: 12px !important;

  }



  .member-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 12px !important;

  }



  .member-grid-item,

  .member-post-thumb {

    border-radius: var(--bex-d-radius) !important;

    overflow: hidden !important;

    transition: transform 0.2s ease !important;

  }



  .member-grid-item:hover,

  .member-post-thumb:hover {

    transform: scale(1.03) !important;

  }



  /* --------------------------------------------------------------------------

     8. ARAMA SAYFASI (ARAMA.PHP) — DESKTOP ENHANCEMENTS

     -------------------------------------------------------------------------- */

  body.page-search #pane-search-preview {

    background-color: var(--bex-d-bg) !important;

    padding: 24px !important;

  }



  /* --------------------------------------------------------------------------

     9. BİLDİRİMLER SAYFASI (BİLDİRİMLER.PHP) — DESKTOP ENHANCEMENTS

     -------------------------------------------------------------------------- */

  .bex-notification-card {

    border-radius: var(--bex-d-radius) !important;

    border: 1px solid var(--bex-d-border) !important;

    box-shadow: var(--bex-d-shadow-sm) !important;

    transition: background-color 0.15s ease !important;

  }



  .bex-notification-card:hover {

    background-color: var(--bex-d-green-subtle) !important;

  }



  /* --------------------------------------------------------------------------

     10. AYARLAR SAYFASI (AYARLAR.PHP & SETTINGS MODALS)

     -------------------------------------------------------------------------- */

  .wa-settings-layout {

    display: grid !important;

    grid-template-columns: 280px 1fr !important;

    gap: 20px !important;

    max-width: 1100px !important;

    margin: 0 auto !important;

  }



  /* Modals: Centered, smooth backdrop blur */

  .bex-modal-overlay {

    backdrop-filter: blur(8px) !important;

    background: rgba(0, 0, 0, 0.45) !important;

  }



  .bex-modal-card {

    border-radius: var(--bex-d-radius-lg) !important;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;

  }



  /* Sol Alt Avatar Butonu & Durum Menüsü */

  .bex-rail-avatar-btn {

    background: transparent !important;

    border: none !important;

    padding: 0 !important;

    margin: 0 !important;

    cursor: pointer !important;

    display: inline-flex !important;

    position: relative !important;

    outline: none !important;

    transition: transform 0.15s ease !important;

  }

  .bex-rail-avatar-btn:hover {

    transform: scale(1.05) !important;

  }

  .bex-rail-avatar-btn:active {

    transform: scale(0.96) !important;

  }

  .bex-rail-status-dot {

    position: absolute !important;

    bottom: -1px !important;

    right: -1px !important;

    width: 11px !important;

    height: 11px !important;

    border-radius: 50% !important;

    border: 2px solid var(--wa-card-bg, var(--color-bg-light)) !important;

    z-index: 2 !important;

    transition: all 0.2s ease !important;

  }

  html.dark .bex-rail-status-dot {

    border-color: #202c33 !important;

  }

  .bex-status-dot--online {

    background-color: #10b981 !important;

    box-shadow: 0 0 4px rgba(16, 185, 129, 0.6) !important;

  }

  .bex-status-dot--offline {

    background-color: #94a3b8 !important;

  }

  .bex-status-dot--invisible {

    background-color: transparent !important;

    border: 2.5px solid #94a3b8 !important;

  }



  /* Durum Menüsü Pop-up */

  #wa-rail:has(.bex-rail-status-menu:not(.hidden)),

  .bex-desktop-rail:has(.bex-rail-status-menu:not(.hidden)),

  #wa-rail:has(.bex-rail-dropdown-menu:not(.hidden)),

  .bex-desktop-rail:has(.bex-rail-dropdown-menu:not(.hidden)),

  #wa-rail.bex-rail-open,

  .bex-desktop-rail.bex-rail-open {

    overflow: visible !important;

    z-index: 100000 !important;

  }



  .bex-rail-status-menu {

    position: absolute !important;

    bottom: calc(100% + 10px) !important;

    left: 8px !important;

    width: 254px !important;

    background: var(--wa-surface, var(--color-bg-light)) !important;

    border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08)) !important;

    border-radius: 16px !important;

    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06) !important;

    padding: 8px !important;

    z-index: 100002 !important;

    animation: bexRailDropAnim 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;

  }

  html.dark .bex-rail-status-menu {

    background: #202c33 !important;

    border-color: rgba(255, 255, 255, 0.12) !important;

    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3) !important;

  }

  .bex-rail-status-menu.hidden {

    display: none !important;

  }

  .bex-rail-status-header {

    padding: 4px 8px 8px 8px !important;

    border-bottom: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08)) !important;

    margin-bottom: 6px !important;

  }

  html.dark .bex-rail-status-header {

    border-color: rgba(255, 255, 255, 0.08) !important;

  }

  .bex-rail-status-header-title {

    font-size: 11px !important;

    font-weight: 700 !important;

    color: var(--wa-muted, #667781) !important;

    text-transform: uppercase !important;

    letter-spacing: 0.6px !important;

    display: block !important;

  }

  html.dark .bex-rail-status-header-title {

    color: #8696a0 !important;

  }

  .bex-rail-status-items {

    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;

  }

  .bex-rail-status-item {

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    width: 100% !important;

    padding: 8px 10px !important;

    border-radius: 12px !important;

    border: none !important;

    background: transparent !important;

    cursor: pointer !important;

    text-align: left !important;

    transition: background 0.15s ease, transform 0.1s ease !important;

  }

  .bex-rail-status-item:hover {

    background: var(--wa-hover, rgba(0, 0, 0, 0.05)) !important;

  }

  html.dark .bex-rail-status-item:hover {

    background: rgba(255, 255, 255, 0.08) !important;

  }

  .bex-rail-status-item.is-active {

    background: rgba(0, 168, 132, 0.08) !important;

  }

  html.dark .bex-rail-status-item.is-active {

    background: rgba(0, 168, 132, 0.16) !important;

  }

  .bex-status-indicator {

    width: 10px !important;

    height: 10px !important;

    border-radius: 50% !important;

    flex-shrink: 0 !important;

    display: inline-block !important;

  }

  .bex-status-indicator--online {

    background: #10b981 !important;

    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;

  }

  .bex-status-indicator--offline {

    background: #94a3b8 !important;

  }

  .bex-status-indicator--invisible {

    border: 2px solid #94a3b8 !important;

    background: transparent !important;

  }

  .bex-status-meta {

    display: flex !important;

    flex-direction: column !important;

    min-width: 0 !important;

    flex: 1 !important;

  }

  .bex-status-label {

    font-size: 13px !important;

    font-weight: 700 !important;

    color: var(--wa-text, var(--color-bg-dark)) !important;

    line-height: 1.25 !important;

  }

  html.dark .bex-status-label {

    color: #e9edef !important;

  }

  .bex-status-desc {

    font-size: 11px !important;

    color: var(--wa-muted, #667781) !important;

    line-height: 1.25 !important;

    margin-top: 2px !important;

  }

  html.dark .bex-status-desc {

    color: #8696a0 !important;

  }

  .bex-status-check {

    color: var(--wa-primary, #00a884) !important;

    flex-shrink: 0 !important;

  }



  /* Haftanın Trendleri Kupa Rozetleri */

  .bex-trend-trophy {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 28px !important;

    height: 28px !important;

    border-radius: 8px !important;

    font-size: 11px !important;

    font-weight: 800 !important;

    flex-shrink: 0 !important;

    transition: transform 0.15s ease !important;

  }

  .bex-trend-row:hover .bex-trend-trophy {

    transform: scale(1.08) !important;

  }

  .bex-trend-trophy--gold {

    background: linear-gradient(135deg, #FDE047 0%, #D97706 100%) !important;

    color: #78350F !important;

    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35) !important;

  }

  .bex-trend-trophy--silver {

    background: linear-gradient(135deg, #F1F5F9 0%, #94A3B8 100%) !important;

    color: #0F172A !important;

    box-shadow: 0 2px 6px rgba(148, 163, 184, 0.35) !important;

  }

  .bex-trend-trophy--bronze {

    background: linear-gradient(135deg, #FED7AA 0%, #C2410C 100%) !important;

    color: #7C2D12 !important;

    box-shadow: 0 2px 6px rgba(194, 65, 12, 0.35) !important;

  }

  .bex-trend-trophy--rank {

    background: var(--wa-search, rgba(0, 0, 0, 0.05)) !important;

    color: var(--wa-muted, #667781) !important;

    font-weight: 700 !important;

  }

  html.dark .bex-trend-trophy--rank {

    background: rgba(255, 255, 255, 0.08) !important;

    color: #8696a0 !important;

  }

}



/* ==========================================================================

   TABLET & MEDIUM DESKTOP UI ARCHITECTURE (768px - 1199px)

   Balances 64px vertical rail, adaptive 280-300px sidebars, and full-width feeds

   ========================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {

  body.bex-wa,

  body.bex-user-page {

    background-color: var(--bex-d-bg) !important;

    color: var(--bex-d-text-main) !important;

    font-family: var(--bex-d-font);

  }



  /* 64px Kompakt İkon Rayı */

  body.bex-wa #wa-rail,

  body.bex-user-page #wa-rail,

  #wa-rail.bex-desktop-rail {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    flex: 0 0 64px !important;

    width: 64px !important;

    min-width: 64px !important;

    max-width: 64px !important;

    height: 100vh !important;

    height: 100dvh !important;

    background-color: var(--bex-d-card-bg) !important;

    border-right: 1px solid var(--bex-d-border) !important;

    padding: 10px 4px !important;

    box-sizing: border-box !important;

    z-index: 40 !important;

    overflow-y: auto !important;

    overflow-x: visible !important;

    scrollbar-width: none !important;

  }



  #wa-rail .rail-btn {

    width: 44px !important;

    height: 44px !important;

    min-height: 44px !important;

    padding: 0 !important;

    border-radius: 50% !important;

    justify-content: center !important;

  }



  #wa-rail .rail-btn-label,

  #wa-rail .bex-rail-brand-text {

    display: none !important;

  }



  /* Tablet Yan Panel Boyutlandırması (Keşfet, Odalar, Sohbetler) */

  #kesfet-desktop-sidebar,

  #rooms-desktop-sidebar,

  body.page-rooms aside,

  body.page-explore aside {

    width: 290px !important;

    min-width: 280px !important;

    max-width: 300px !important;

    flex: 0 0 290px !important;

  }



  body.bex-wa #messenger-sidebar {

    width: 310px !important;

    min-width: 280px !important;

    max-width: 320px !important;

    flex: 0 0 310px !important;

  }



  /* Tablet Üye / Profil Görünümü */

  .member-profile-sidebar {

    width: 320px !important;

    min-width: 300px !important;

    max-width: 330px !important;

    flex: 0 0 320px !important;

  }



  /* Tablet Kart Gridleri: Sıkışmayı Önleyen 2-3 Sütunlu Akıllı Grid */

  .member-grid,

  .bex-explore-feed-grid,

  .bex-rooms-list-grid {

    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;

    gap: 12px !important;

  }



  /* Tablet Header'ları */

  header.bex-user-header {

    padding-left: 16px !important;

    padding-right: 16px !important;

  }

}



/* ==========================================================================

   MODERN GLASSMORPHISM & MICRO-INTERACTIONS ACROSS ALL DEVICES

   ========================================================================== */

.bex-modern-glass {

  background: color-mix(in srgb, var(--wa-surface, var(--color-bg-light)) 88%, transparent) !important;

  backdrop-filter: blur(20px) saturate(180%) !important;

  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

  border: 1px solid var(--wa-line, rgba(0, 0, 0, 0.08)) !important;

}



html.dark .bex-modern-glass {

  background: color-mix(in srgb, var(--wa-surface, #1f2c34) 88%, transparent) !important;

  border-color: var(--wa-line, rgba(255, 255, 255, 0.08)) !important;

}



/* Akıcı Mikro-Etkileşim (Haptic Feedback) */

.bex-btn,

.rail-btn,

.icon-btn,

.member-button,

.bex-counter-col,

button[type="submit"],

.bex-btn-primary {

  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;

}



.bex-btn:active,

.rail-btn:active,

.icon-btn:active,

.member-button:active,

.bex-counter-col:active,

button[type="submit"]:active,

.bex-btn-primary:active {

  transform: scale(0.96) !important;

}



/* Şık Tema Uyumlu İnce Kaydırma Çubukları */

::-webkit-scrollbar {

  width: 6px;

  height: 6px;

}

::-webkit-scrollbar-track {

  background: transparent;

}

::-webkit-scrollbar-thumb {

  background: rgba(0, 0, 0, 0.18);

  border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

  background: rgba(0, 0, 0, 0.32);

}

html.dark ::-webkit-scrollbar-thumb {

  background: rgba(255, 255, 255, 0.2);

}

html.dark ::-webkit-scrollbar-thumb:hover {

  background: rgba(255, 255, 255, 0.35);

}



/* ==========================================================================

   ULTRA-WIDE & 4K RESOLUTION ARCHITECTURE (2560px - 3840px)

   Maintains readable line lengths, centered canvases, and proportional margins

   ========================================================================== */

@media (min-width: 2560px) {

  body.bex-user-page .bex-user-container,

  body.bex-user-page main,

  body.legal-page .legal-wrap,

  .wa-settings-layout {

    max-width: 1720px !important;

    margin-left: auto !important;

    margin-right: auto !important;

  }



  body.bex-wa #app {

    max-width: 2560px !important;

    margin: 0 auto !important;

  }

}





/* ==========================================================================

   BEXGRAM — KATI MASAÜSTÜ & MOBİL İZOLASYON KURALLARI (V3)

   Masaüstünde mobil gezinme çubuğunu kesinlikle gizler ve 3 panelli düzeni korur.

   ========================================================================== */

@media (min-width: 768px) {

  .page-navigation,

  #app-tabs,

  #bex-bottom-create-menu,

  #bex-bottom-menu-backdrop {

    display: none !important;

    visibility: hidden !important;

    pointer-events: none !important;

    height: 0 !important;

    min-height: 0 !important;

    max-height: 0 !important;

    overflow: hidden !important;

    margin: 0 !important;

    padding: 0 !important;

  }

}



@media (min-width: 1024px) {

  body:not(.bex-device-mobile) .page-navigation,

  body:not(.bex-device-mobile) #app-tabs,

  body:not(.bex-device-mobile) #bex-bottom-create-menu,

  body:not(.bex-device-mobile) #bex-bottom-menu-backdrop {

    display: none !important;

    visibility: hidden !important;

    pointer-events: none !important;

    height: 0 !important;

    min-height: 0 !important;

    max-height: 0 !important;

    overflow: hidden !important;

    margin: 0 !important;

    padding: 0 !important;

  }

}



/* Masaüstü 3 Panelli Düzen Destekleri */

@media (min-width: 1024px) {

  .bex-desktop-rail {

    display: flex !important;

  }

}



/* ==========================================================================

   DİKEY KOMPAKT EKRAN MODU (Dizüstü 768p / 600px-740px Viewport Yüksekliği)

   Sol raydaki Ayarlar ve Avatarın kesilmesini/taşmasını kesin olarak önler.

   ========================================================================== */

@media (max-height: 740px) and (min-width: 768px) {

  body.bex-wa #wa-rail,

  body.bex-user-page #wa-rail,

  #wa-rail.bex-desktop-rail {

    padding: 8px 4px 6px 4px !important;

    gap: 2px !important;

  }

  #wa-rail .bex-rail-header {

    padding: 0 0 6px 0 !important;

    margin-bottom: 4px !important;

  }

  #wa-rail .bex-rail-logo-img,

  #wa-rail .bex-rail-brand-icon {

    width: 32px !important;

    height: 32px !important;

  }

  #wa-rail .bex-rail-nav {

    gap: 2px !important;

  }

  #wa-rail a.rail-btn,

  #wa-rail button.rail-btn {

    width: 38px !important;

    height: 38px !important;

    min-height: 38px !important;

    border-radius: 10px !important;

  }

  #wa-rail .rail-btn-icon svg {

    width: 20px !important;

    height: 20px !important;

  }

  #wa-rail .bex-rail-action {

    padding: 4px 0 !important;

  }

  #wa-rail .bex-rail-action-btn {

    width: 38px !important;

    height: 38px !important;

    min-width: 38px !important;

    min-height: 38px !important;

  }

  #wa-rail .bex-rail-action-btn svg {

    width: 18px !important;

    height: 18px !important;

  }

  #wa-rail .bex-rail-footer {

    padding-top: 4px !important;

    gap: 3px !important;

  }

  #wa-rail .bex-rail-avatar-btn,

  #wa-rail .bex-rail-avatar-img {

    width: 34px !important;

    height: 34px !important;

  }

}