/* =========================================================
   Wiantex Forum - Complete Layout
   Desktop + Tablet + Mobile
   ========================================================= */


/* =========================================================
   GLOBAL MOBILE SAFETY
   ========================================================= */

html {
  box-sizing: border-box;
  max-width: 100vw;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  max-width: 100vw;
  min-width: 0;
  overflow-x: hidden;
}


/* ===== App shell ===== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  min-width: 0;
  width: 100%;
}


/* ===== Sidebar ===== */

.sidebar {
  border-right: 1px solid var(--border);
  background: rgba(8, 11, 24, 0.6);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  margin-bottom: 2px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  box-shadow: var(--shadow-glow-purple);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-text strong {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.02em;
}

.brand-text span {
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: 0.14em;
}


.sidebar-brand {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:62px;
  padding:4px 6px;
  border-radius:14px;
  text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}
.sidebar-brand:hover {
  background:rgba(139,92,246,.08);
  transform:translateY(-1px);
}
.sidebar-brand-logo {
  display:block;
  width:min(100%,190px);
  height:auto;
  max-height:64px;
  object-fit:contain;
}

/* ===== Sidebar Navigation ===== */

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav-label {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.12em;
  padding: 10px 12px 6px;
  font-weight: 700;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 500;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  position: relative;
}

.nav-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.85;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-0);
}

.nav-item.active {
  background:
    linear-gradient(
      90deg,
      rgba(124, 92, 255, 0.18),
      rgba(124, 92, 255, 0.02)
    );
  color: #fff;
  box-shadow: inset 2px 0 0 var(--purple-soft);
}

.nav-item .count {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 7px;
  border-radius: 999px;
}

.nav-item .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ===== Main ===== */

.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  width: 100%;
}


/* =========================================================
   TOP NAVBAR
   ========================================================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: 30;

  display: flex;
  align-items: center;
  gap: 18px;

  padding: 16px 28px;

  border-bottom: 1px solid var(--border);

  background: rgba(5, 7, 18, 0.72);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.search-box {
  flex: 1;
  max-width: 420px;

  display: flex;
  align-items: center;
  gap: 9px;

  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);

  padding: 9px 12px;

  color: var(--text-2);
}

.search-box input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-0);
  font-size: 14px;
  width: 100%;
}

.kbd {
  font-size: 10px;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  font-family: var(--font-body);
}

.navbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  border: 1px solid var(--border);

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

  color: var(--text-1);

  position: relative;
}

.icon-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-0);
}

.icon-btn .ping {
  position: absolute;
  top: -3px;
  right: -3px;

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
}

.hamburger {
  display: none;
}


/* =========================================================
   AVATAR
   ========================================================= */

.avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--gradient-primary);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  font-weight: 700;
  font-family: var(--font-display);

  flex-shrink: 0;
}

.avatar-frame-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--avatar-box-size, 36px);
  height: var(--avatar-box-size, 36px);
  vertical-align: middle;
}

.avatar-frame-img {
  position: absolute;
  top: 0;
  left: 0;

  pointer-events: none;
  object-fit: contain;
}


/* =========================================================
   CONTENT
   ========================================================= */

.content-wrap {
  padding: 30px;
  min-width: 0;
  width: 100%;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr var(--panel-w);

  gap: 26px;
  align-items: start;

  min-width: 0;
}

.main-col {
  min-width: 0;
}

.right-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;

  position: sticky;
  top: 86px;

  min-width: 0;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  border-radius: var(--radius-lg);
  padding: 36px 32px;

  background:
    radial-gradient(
      80% 140% at 100% 0%,
      rgba(124, 92, 255, 0.22) 0%,
      transparent 60%
    ),
    radial-gradient(
      60% 100% at 0% 100%,
      rgba(255, 110, 199, 0.12) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      var(--panel-1) 0%,
      var(--panel-0) 100%
    );

  border: 1px solid var(--border);

  position: relative;
  overflow: hidden;

  margin-bottom: 26px;

  min-width: 0;
  max-width: 100%;
}

.hero h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.hero p {
  color: var(--text-1);
  font-size: 14.5px;
  max-width: 520px;
  margin-bottom: 20px;
}

.hero-stats {
  display: flex;
  gap: 28px;
}

.hero-stat strong {
  font-family: var(--font-display);
  font-size: 22px;
  display: block;
}

.hero-stat span {
  font-size: 12px;
  color: var(--text-2);
}


/* =========================================================
   SECTION HEADERS
   ========================================================= */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-head h2 {
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-head p {
  font-size: 12.5px;
  color: var(--text-2);
  margin-top: 2px;
}

.section-link {
  font-size: 12.5px;
  color: var(--purple-soft);
  font-weight: 600;
}


/* =========================================================
   TOPIC CARDS
   ========================================================= */

.topic-list {
  display: flex;
  flex-direction: column;
  gap: 12px;

  min-width: 0;
}

.topic-card {
  display: flex;
  align-items: center;
  gap: 14px;

  padding: 16px 18px;

  border-radius: var(--radius-md);
  border: 1px solid var(--border);

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

  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;

  min-width: 0;
  max-width: 100%;
}

.topic-card:hover {
  border-color: var(--border-strong);
  background: rgba(124, 92, 255, 0.04);
  transform: translateY(-1px);
}

.topic-icon {
  width: 40px;
  height: 40px;

  border-radius: 10px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.topic-icon svg {
  width: 19px;
  height: 19px;
}

.topic-main {
  flex: 1;
  min-width: 0;
}

.topic-title {
  display: flex;
  align-items: center;
  gap: 7px;

  font-size: 14.5px;
  font-weight: 600;

  margin-bottom: 4px;

  min-width: 0;
}

.topic-title span.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-meta {
  font-size: 12.5px;
  color: var(--text-2);

  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.topic-author-avatar { display:inline-flex; width:18px; height:18px; flex:0 0 18px; align-items:center; justify-content:center; vertical-align:middle; }
.topic-author-name { min-width:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topic-meta .avatar-wrap { flex: 0 0 auto; width:18px !important; height:18px !important; }
.topic-meta .avatar-wrap .avatar { width:18px !important; height:18px !important; }
.topic-meta .avatar-frame-wrap { width:18px !important; height:18px !important; flex:0 0 18px !important; overflow:visible !important; }
.topic-meta .avatar-frame-img { max-width:none !important; }

.topic-stats {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

.topic-stat {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-2);
}

.topic-stat strong {
  display: block;
  color: var(--text-0);
  font-size: 13.5px;
  font-weight: 700;
}

.topic-time {
  flex-shrink: 0;
  text-align: right;

  font-size: 12px;
  color: var(--text-3);

  min-width: 74px;
}


/* =========================================================
   RIGHT PANEL
   ========================================================= */

.widget {
  padding: 20px;
  min-width: 0;
}

.widget h3 {
  font-size: 13.5px;
  margin-bottom: 14px;

  display: flex;
  align-items: center;
  gap: 7px;
}

.stat-row {
  display: flex;
  justify-content: space-between;

  padding: 8px 0;

  font-size: 13px;

  border-bottom: 1px dashed var(--border);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row span:last-child {
  color: var(--text-0);
  font-weight: 700;
}

.leader-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.leader-rank {
  width: 18px;
  font-size: 12px;
  color: var(--text-3);
  font-weight: 700;
}

.leader-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}

.leader-count {
  font-size: 12px;
  color: var(--text-2);
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
  border-top: 1px solid var(--border);

  padding: 26px 24px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  color: var(--text-3);
  font-size: 12.5px;

  flex-wrap: wrap;
  gap: 10px;

  width: 100%;
  min-width: 0;
}

/* Footer linkleri içerik alanının üstüne yapışmasın */
.footer-links {
  position: relative;
  top: 7px;
}

.footer a {
  color: var(--text-2);
  margin-left: 16px;
}

.footer a:hover {
  color: var(--text-0);
}


/* =========================================================
   DRAWER
   ========================================================= */

.drawer-overlay {
  display: none;

  position: fixed;
  inset: 0;

  background: rgba(2, 3, 8, 0.6);

  backdrop-filter: blur(2px);

  z-index: 45;
}

.drawer-overlay.open {
  display: block;
}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.bottom-nav {
  display: none;

  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  max-width: 100vw;

  background: rgba(8, 11, 24, 0.94);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-top: 1px solid var(--border);

  padding:
    8px 6px
    calc(8px + env(safe-area-inset-bottom, 0px));

  justify-content: space-around;

  z-index: 9999;

  box-sizing: border-box;

  overflow: visible;
}

.bottom-nav a {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 3px;

  font-size: 10px;

  color: var(--text-2);

  padding: 4px 10px;

  min-width: 0;

  text-align: center;

  text-decoration: none;
}

.bottom-nav a.active {
  color: var(--purple-soft);
}

.bottom-nav svg {
  width: 20px;
  height: 20px;

  flex-shrink: 0;
}


/* =========================================================
   CENTER + BUTTON
   ========================================================= */

.bottom-nav .fab {
  width: 42px;
  height: 42px;

  min-width: 42px;
  min-height: 42px;

  border-radius: 50%;

  background: var(--gradient-primary);

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: -20px;

  padding: 0;

  flex-shrink: 0;

  box-shadow:
    0 4px 16px rgba(124, 92, 255, 0.45);
}

.bottom-nav .fab svg {
  width: 20px;
  height: 20px;

  color: #fff;

  flex-shrink: 0;
}


/* =========================================================
   FORUM POST
   ========================================================= */

.post-card {
  padding: 20px 22px;
  min-width: 0;
}

.post-row {
  display: flex;
  gap: 16px;

  min-width: 0;
}

.post-author {
  flex-shrink: 0;

  width: 78px;

  display: flex;
  flex-direction: column;

  align-items: center;

  text-align: center;
}

.post-author-info {
  margin-top: 8px;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 5px;
}

.post-username {
  font-size: 12.5px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.post-username-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  color: var(--text-0) !important;
  text-decoration: none !important;
  line-height: 1.25;
}

.post-username-link .post-username-text {
  display: inline-block;
  color: inherit;
  opacity: 1;
  visibility: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.post-roles {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;

  gap: 4px;
}

.post-roles .badge {
  font-size: 9.5px;
  padding: 1px 7px;
}

.post-msgcount {
  font-size: 10.5px;
}

.post-body {
  flex: 1;
  min-width: 0;
}

.post-content {
  font-size: 14.5px;
  line-height: 1.65;

  color: var(--text-1);

  white-space: pre-wrap;

  overflow-wrap: anywhere;
  word-break: break-word;

  max-width: 100%;
}

.post-content p {
  margin: 0 0 10px;
}

.post-content p:last-child {
  margin-bottom: 0;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.post-content a {
  color: var(--purple-soft);

  overflow-wrap: anywhere;
  word-break: break-word;
}

.post-content blockquote {
  border-left: 3px solid var(--border-strong);

  margin: 8px 0;

  padding: 4px 0 4px 12px;

  color: var(--text-2);

  max-width: 100%;
}

.post-content code {
  background: rgba(255,255,255,0.06);

  padding: 1px 6px;

  border-radius: 5px;

  font-size: 0.92em;

  overflow-wrap: anywhere;
}

.post-content pre {
  background: rgba(255,255,255,0.04);

  border: 1px solid var(--border);

  border-radius: var(--radius-sm);

  padding: 10px 12px;

  overflow-x: auto;

  white-space: pre;

  max-width: 100%;
}

.post-content ul,
.post-content ol {
  padding-left: 22px;
  margin: 0 0 10px;
}


/* =========================================================
   RESPONSIVE - 1080
   ========================================================= */

@media (max-width: 1080px) {

  .content-grid {
    grid-template-columns: 1fr;
  }

  .main-col {
    order: 1;
  }

  .right-panel {
    order: 2;

    position: static;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin-top: 22px;
  }

  .right-panel .widget-community,
  .right-panel .widget-cta {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   RESPONSIVE - 900
   ========================================================= */

@media (max-width: 900px) {

  .app {
    grid-template-columns: 1fr;

    width: 100%;
    max-width: 100vw;

    min-height: 100dvh;

    overflow-x: hidden;
  }

  .main {
    width: 100%;
    max-width: 100vw;

    min-width: 0;
    min-height: 100dvh;

    overflow-x: hidden;
  }


  /* Sidebar */

  .sidebar {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: 270px;

    transform: translateX(-100%);

    transition: transform 0.22s ease;

    z-index: 10000;

    box-shadow: 20px 0 60px rgba(0,0,0,0.5);
  }

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


  /* Navbar */

  .hamburger {
    display: flex;
  }

  .search-box {
    display: none;
  }

  .kbd {
    display: none;
  }


  /* Content */

  .content-wrap {
    width: 100%;
    max-width: 100vw;

    min-width: 0;

    padding: 18px;

    padding-bottom:
      calc(88px + env(safe-area-inset-bottom, 0px));

    overflow-x: hidden;
  }

  .content-grid {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    gap: 18px;
  }


  /* Right panel */

  .right-panel {
    grid-template-columns: 1fr;
  }

  .right-panel .widget-community,
  .right-panel .widget-cta {
    display: none;
  }


  /* =====================================================
     BOTTOM NAV - 6 EQUAL COLUMNS
     ===================================================== */

  .bottom-nav {
    display: grid;

    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    width: 100%;
    max-width: 100vw;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
      8px 4px
      calc(8px + env(safe-area-inset-bottom, 0px));

    justify-content: initial;

    align-items: center;

    box-sizing: border-box;

    overflow: visible;

    z-index: 9999;
  }


  /* Every navigation item gets exactly one column */

  .bottom-nav > a {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    height: 44px;

    margin: 0;
    padding: 3px 1px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 3px;

    font-size: 9px;

    line-height: 1.1;

    text-align: center;

    overflow: visible;
  }


  .bottom-nav > a svg {
    width: 19px;
    height: 19px;

    flex-shrink: 0;
  }


  /* Center plus stays in its own column */

  .bottom-nav > a.fab {
    width: 42px;
    height: 42px;

    min-width: 42px;
    min-height: 42px;

    max-width: 42px;

    justify-self: center;
    align-self: center;

    margin: -18px auto 0;

    padding: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    background: var(--gradient-primary);

    box-shadow:
      0 4px 16px rgba(124, 92, 255, 0.45);
  }


  .bottom-nav > a.fab svg {
    width: 20px;
    height: 20px;
  }


  /* Cards */

  .hero,
  .topic-card,
  .post-card,
  .widget {
    max-width: 100%;
    min-width: 0;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  pre,
  table {
    max-width: 100%;
    overflow-x: auto;
  }
}


/* =========================================================
   RESPONSIVE - 700
   ========================================================= */

@media (max-width: 700px) {

  .topic-list {
    gap: 10px;
  }

  .topic-card {
    padding: 12px 13px;
    gap: 10px;
  }

  .topic-title {
    font-size: 13.5px;
  }

  .topic-meta {
    font-size: 11.5px;
  }


  /* Forum post mobile */

  .post-card {
    padding: 13px 14px;
  }

  .post-row {
    flex-direction: column;
    gap: 10px;
  }

  .post-author {
    flex-direction: row;

    align-items: center;

    text-align: left;

    width: auto;

    gap: 10px;
  }

  .post-author img.avatar,
  .post-author .avatar-frame-wrap {
    transform: none;
    flex-shrink: 0;
  }

  .post-author-info {
    margin-top: 0;

    align-items: flex-start;

    gap: 3px;
  }

  .post-roles {
    justify-content: flex-start;
  }

  .post-msgcount {
    display: none;
  }

  .post-body {
    border-top: 1px dashed var(--border);

    padding-top: 10px;

    min-width: 0;
  }

  .post-content {
    font-size: 13.5px;

    line-height: 1.55;
  }
}


/* =========================================================
   RESPONSIVE - 560
   ========================================================= */

@media (max-width: 560px) {

  .navbar {
    padding: 12px 14px;
  }

  .hero {
    padding: 22px 18px;
  }

  .hero h1 {
    font-size: 21px;
  }

  .hero-stats {
    gap: 18px;
  }

  .topic-card {
    padding: 12px;
    gap: 10px;
  }

  .topic-stats {
    display: none;
  }

  .topic-time {
    min-width: 54px;
  }


  .content-wrap {
    padding: 14px;

    padding-bottom:
      calc(88px + env(safe-area-inset-bottom, 0px));
  }


  /* Footer */

  .footer {
    flex-direction: column;

    align-items: flex-start;

    padding-left: 10px;
    padding-right: 10px;

    padding-bottom:
      calc(100px + env(safe-area-inset-bottom, 0px));
  }

  .footer a {
    margin-left: 0;
    margin-right: 14px;
  }


  /* =====================================================
     SMALL MOBILE BOTTOM NAV
     ===================================================== */

  .bottom-nav {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    padding-left: 2px;
    padding-right: 2px;
  }

  .bottom-nav > a {
    height: 43px;

    padding-left: 0;
    padding-right: 0;

    font-size: 8.5px;

    gap: 2px;
  }

  .bottom-nav > a svg {
    width: 18px;
    height: 18px;
  }

  .bottom-nav > a.fab {
    width: 40px;
    height: 40px;

    min-width: 40px;
    min-height: 40px;

    max-width: 40px;

    margin-top: -17px;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .navbar {
    padding-left: 10px;
    padding-right: 10px;
  }

  .content-wrap {
    padding-left: 9px;
    padding-right: 9px;
  }

  .bottom-nav {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    padding-left: 1px;
    padding-right: 1px;
  }

  .bottom-nav > a {
    font-size: 8px;

    padding-left: 0;
    padding-right: 0;
  }

  .bottom-nav > a svg {
    width: 17px;
    height: 17px;
  }

  .bottom-nav > a.fab {
    width: 38px;
    height: 38px;

    min-width: 38px;
    min-height: 38px;

    max-width: 38px;
  }
}


/* =========================================================
   UNREAD MESSAGE DOT
   ========================================================= */

.bottom-nav-dot {
  position: absolute;

  top: 2px;
  right: 14px;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: var(--danger, #ef4444);

  border:
    2px solid rgba(8, 11, 24, 0.92);

  box-sizing: content-box;
}


/* =========================================================
   DIRECT MESSAGES
   ========================================================= */

.messages-shell {
  display: grid;

  grid-template-columns: 280px 1fr;

  height: clamp(420px, calc(100vh - 180px), 760px);

  min-height: 420px;
  max-height: none;

  overflow: hidden;

  min-width: 0;
}

.conv-list {
  border-right: 1px solid var(--border);

  overflow-y: auto;

  min-width: 0;
}

.conv-list-item {
  position: relative;

  display: flex;

  gap: 10px;

  align-items: center;

  padding: 12px 14px;

  border-bottom: 1px solid var(--border);

  transition: background 0.15s;

  min-width: 0;
}

.conv-list-item:hover {
  background: rgba(255,255,255,0.03);
}

.conv-chat {
  display: flex;

  flex-direction: column;

  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.conv-chat-header {
  padding: 14px 18px;

  border-bottom: 1px solid var(--border);

  display: flex;

  align-items: center;

  gap: 10px;

  background: rgba(10, 12, 22, 0.55);

  backdrop-filter: blur(6px);
}

.conv-chat-body {
  flex: 1 1 auto;

  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;

  padding: 18px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  min-width: 0;
}

.conv-chat-input {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 4;

  padding: 10px 12px;

  border-top: 1px solid var(--border);

  display: flex;

  gap: 8px;

  background: rgba(10, 12, 22, 0.55);

  backdrop-filter: blur(6px);
}

.chat-back-btn {
  display: none;

  color: var(--text-1);
}


/* =========================================================
   MOBILE FULLSCREEN CHAT
   ========================================================= */

@media (max-width: 900px) {
  .messages-shell {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: none;
    border: none;
    border-radius: 0;
    width: 100%;
  }

  .chat-section-head {
    display: none;
  }

  .conv-list {
    display: block;
    border-right: none;
  }

  .conv-chat {
    display: none;
  }

  body.chat-open {
    overflow: hidden;
  }

  body.chat-open .conv-list {
    display: none;
  }

  body.chat-open .conv-chat {
    display: flex;
  }

  body.chat-open .chat-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.chat-open .navbar,
  body.chat-open .bottom-nav,
  body.chat-open .footer,
  body.chat-open .hamburger {
    display: none !important;
  }

  body.chat-open .content-wrap {
    padding: 0 !important;
  }

  body.chat-open .messages-shell {
    position: fixed;
    inset: 0;
    z-index: 99999;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    background: var(--bg-1, #0b0d18);
  }

  body.chat-open .conv-chat-header {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }

  body.chat-open .conv-chat-body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  body.chat-open .conv-chat-input {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    width: 100%;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 12, 22, 0.96);
  }

  body.chat-open .conv-chat-input .input {
    min-width: 0;
  }
}

/* =========================================================
   MOBILE BOTTOM NAV - FINAL FIX
   ========================================================= */

@media (max-width: 900px) {
  .bottom-nav {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 62px;
    padding: 8px 2px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    margin: 0;
    gap: 0;
    align-items: center;
    justify-items: center;
    overflow: visible !important;
  }

  .bottom-nav > a {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 3px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px;
    font-size: 9px;
    line-height: 1;
    text-align: center;
    overflow: visible !important;
    box-sizing: border-box;
  }

  .bottom-nav > a span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bottom-nav > a svg {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 auto;
    display: block;
  }

  .bottom-nav > a.active {
    color: var(--purple-soft);
  }

  .bottom-nav > a.fab {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    margin: -18px auto 0 !important;
    padding: 0 !important;
    justify-self: center;
    align-self: center;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50%;
    overflow: visible !important;
  }

  .bottom-nav > a.fab svg {
    width: 20px !important;
    height: 20px !important;
  }

  .bottom-nav-dot {
    position: absolute !important;
    top: 1px !important;
    right: 18% !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    box-sizing: content-box !important;
  }
}

@media (max-width: 560px) {
  .bottom-nav {
    min-height: 60px;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  .bottom-nav > a {
    height: 44px !important;
    font-size: 8.5px;
    gap: 2px;
  }

  .bottom-nav > a svg {
    width: 18px !important;
    height: 18px !important;
  }

  .bottom-nav > a.fab {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    margin-top: -17px !important;
  }
}

@media (max-width: 380px) {
  .bottom-nav > a {
    font-size: 8px;
  }

  .bottom-nav > a svg {
    width: 17px !important;
    height: 17px !important;
  }

  .bottom-nav > a.fab {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
  }
}

/* =========================================================
   HEADER EXTRAS: TOP PROFILE MENU
   ========================================================= */
 .profile-menu { position:relative; z-index:120; }
.profile-trigger {
  -webkit-appearance:none;
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:auto;
  min-width:48px;
  height:44px;
  padding:4px 8px 4px 5px;
  margin:0;
  border:1px solid rgba(167,139,250,.22);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(22,28,55,.94) 0%, rgba(12,16,34,.98) 100%);
  color:var(--text-1);
  box-shadow:
    0 8px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(124,92,255,.04);
  cursor:pointer;
  overflow:hidden;
  transition:border-color .18s ease, background .18s ease, transform .15s ease, box-shadow .18s ease;
}
.profile-trigger:hover {
  border-color:rgba(167,139,250,.48);
  background:linear-gradient(180deg, rgba(28,33,66,.98) 0%, rgba(14,18,39,.99) 100%);
  box-shadow:
    0 10px 30px rgba(0,0,0,.34),
    0 0 0 1px rgba(124,92,255,.08),
    0 0 22px rgba(124,92,255,.12),
    inset 0 1px 0 rgba(255,255,255,.07);
}
.profile-trigger:focus-visible {
  outline:2px solid rgba(167,139,250,.9);
  outline-offset:2px;
}
.profile-trigger:active { transform:translateY(1px) scale(.985); }
.profile-trigger .avatar,
.profile-trigger .avatar-frame-wrap {
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.34));
}
.profile-trigger .avatar {
  border:1px solid rgba(255,255,255,.10);
}
.profile-chevron {
  display:flex;
  color:var(--text-2);
  transition:transform .18s ease, color .18s ease;
}
.profile-trigger:hover .profile-chevron { color:var(--text-0); }
.profile-chevron { display:flex; transition:transform .18s ease; }
.profile-menu.open .profile-chevron { transform:rotate(180deg); }
 .profile-dropdown {
  position:absolute;
  top:calc(100% + 9px);
  right:0;
  width:198px;
  padding:8px;
  border:1px solid rgba(167,139,250,.24);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(18,24,48,.98) 0%, rgba(10,14,30,.99) 100%);
  box-shadow:
    0 22px 55px rgba(0,0,0,.46),
    0 0 26px rgba(124,92,255,.10),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  visibility:hidden;
  transform:translateY(-5px) scale(.98);
  transform-origin:top right;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:100;
}
.profile-menu.open .profile-dropdown { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
 .profile-dropdown a {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:10px 11px;
  border:1px solid transparent;
  border-radius:11px;
  color:var(--text-1);
  font-size:13px;
  font-weight:650;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.profile-dropdown a:hover {
  background:linear-gradient(90deg, rgba(124,92,255,.15), rgba(124,92,255,.07));
  border-color:rgba(167,139,250,.16);
  color:var(--text-0);
  transform:translateX(1px);
}
.profile-dropdown a + a { margin-top:4px; }
.profile-dropdown .profile-logout:hover {
  background:linear-gradient(90deg, rgba(251,113,133,.14), rgba(251,113,133,.06));
  border-color:rgba(251,113,133,.16);
  color:#ffd6dc;
}




/* Social/DM actions */
.dm-header-action{margin:0}.dm-mini-action{padding:6px 9px;font-size:11px;border-radius:10px;display:inline-flex;align-items:center;gap:5px}.msg-actions{display:flex;gap:4px;margin-top:3px;justify-content:flex-end;opacity:.78}.msg-action-btn{border:0;background:transparent;color:var(--text-3);font-size:10px;padding:2px 4px;cursor:pointer;display:inline-flex;gap:3px;align-items:center}.msg-action-btn:hover{color:var(--text-0)}.msg-action-btn.danger:hover{color:var(--danger)}.msg-deleted{font-style:italic;color:var(--text-3);opacity:.8}.msg-media-audio{width:260px;max-width:68vw;height:38px}.msg-voice{width:42px;height:42px;flex:0 0 42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;cursor:pointer;color:var(--text-2);background:rgba(255,255,255,.035);transition:.18s ease}.msg-voice:hover{color:var(--text-0);border-color:var(--border-strong);transform:translateY(-1px)}.msg-voice.recording{color:#fff;border-color:rgba(239,68,68,.55);background:rgba(239,68,68,.16);animation:msgRecordPulse 1s ease-in-out infinite}.msg-recording-status{align-self:center;color:var(--danger);font-size:11px;white-space:nowrap}.member-card-main{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}.member-card-actions{display:flex;gap:6px;margin-top:12px}.member-card-actions .btn{padding:6px 8px;font-size:10.5px}.msg-row[data-message-id] .msg-bubble{max-width:100%}@keyframes msgRecordPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.22)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}

/* Wiantex media / activity / cosmetics polish */
.activity-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:4px;vertical-align:middle;background:#6b7280;box-shadow:0 0 0 2px rgba(107,114,128,.12)}
.activity-dot.online{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.12),0 0 9px rgba(52,211,153,.35)}
.activity-dot.offline{background:#6b7280}
.forum-attach{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:8px 11px;border:1px solid var(--border);border-radius:10px;color:var(--text-2);cursor:pointer;font-size:12px;background:rgba(255,255,255,.025);margin-bottom:10px}
.forum-attach:hover{border-color:var(--border-strong);color:var(--text-0);transform:translateY(-1px)}
.forum-media-wrap{margin-top:10px;max-width:min(720px,100%);border-radius:14px;overflow:hidden;border:1px solid var(--border);background:rgba(0,0,0,.18)}
.forum-media{display:block;width:100%;max-height:560px;object-fit:contain;background:#0a0b10}
.woin-logo{width:20px;height:20px;object-fit:contain;display:inline-block;vertical-align:middle;filter:drop-shadow(0 2px 7px rgba(255,196,50,.22))}
.msg-audio-card{display:flex;align-items:center;gap:10px;min-width:240px;max-width:min(330px,72vw);padding:10px 12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.05)}
.msg-audio-icon{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(124,92,255,.18);color:#c4b5fd;flex:0 0 34px}
.msg-audio-card audio{width:100%;height:34px}
.msg-actions{flex-wrap:wrap;max-width:100%;overflow-wrap:anywhere}
.post-username{min-width:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap}

.woin-inline-logo{display:inline-block;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 2px 6px rgba(255,196,50,.2))}
.conv-chat-header .activity-dot{flex:0 0 7px}
.msg-row>.activity-dot{align-self:flex-end;flex:0 0 7px;margin-left:-6px;margin-bottom:7px}

.avatar-wrap{position:relative}
.avatar-online-dot{position:absolute;right:-1px;bottom:-1px;width:8px;height:8px;border-radius:50%;border:2px solid var(--panel-1,#121a33);z-index:5;display:block}
.avatar-online-dot.online{background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.55)}
.avatar-online-dot.offline{background:#64748b}

/* Messages UI repair: stable conversation chooser, clean actions, compact composer */
.messages-shell{min-width:0;overflow:hidden;border-radius:14px}
.conv-list{min-width:0;overflow-x:hidden}
.conv-list-item{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-width:0}
.conv-list-item > div{min-width:0}
.conv-title-row,.conv-preview{display:flex;align-items:center;min-width:0;gap:8px}
.conv-username,.conv-preview-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-time{flex:0 0 auto;white-space:nowrap}
.conv-preview-text{flex:1 1 auto}
.conv-unread-badge{flex:0 0 auto}
.conv-chat-header{display:flex;flex-wrap:nowrap;min-width:0;gap:8px}
.conv-chat-header > a:not(.chat-back-btn){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-header-action{flex:0 0 auto;min-width:0}
.dm-mini-action{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.msg-row{min-width:0;display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px;align-items:end}
.msg-row.mine{grid-template-columns:minmax(0,1fr) 26px}
.msg-row.mine > .avatar-wrap{grid-column:2}
.msg-row.mine > div{grid-column:1}
.msg-row:not(.mine) > .avatar-wrap{grid-column:1}
.msg-row:not(.mine) > div{grid-column:2}
.msg-bubble{max-width:min(78ch,100%);overflow:hidden;word-break:break-word}
.msg-text{overflow-wrap:anywhere;word-break:break-word}
.msg-actions{display:flex;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:wrap;min-height:18px}
.msg-action-btn{white-space:nowrap;line-height:1.2}
.conv-chat-input{display:flex;align-items:center;gap:7px;min-width:0}
.conv-chat-input > .msg-voice,
.conv-chat-input > .msg-attach,
.conv-chat-input > .msg-send{flex:0 0 36px;width:36px;height:36px}
.msg-composer-wrap{flex:1 1 auto;min-width:0}
.conv-chat-input .msg-composer{min-height:38px;height:38px;max-height:88px;padding:8px 12px;line-height:1.35;border-radius:14px;box-sizing:border-box}
.msg-send{display:inline-flex;align-items:center;justify-content:center}
.msg-recording-status{max-width:92px;overflow:hidden;text-overflow:ellipsis}
.empty-state{min-width:0;max-width:100%;padding:24px;text-align:center;overflow-wrap:anywhere}

@media (max-width:900px){
.sidebar-brand { min-height:54px; padding:2px 4px; }
  .sidebar-brand-logo { width:min(100%,174px); max-height:58px; }

  .messages-shell{border-radius:12px}
  .conv-list{padding-bottom:4px}
  .conv-list-item{grid-template-columns:40px minmax(0,1fr);padding:10px 12px}
  .conv-chat-header{gap:6px;padding-left:10px;padding-right:10px}
  .dm-mini-action{padding:6px 8px;font-size:10px}
  .msg-row{max-width:92%;grid-template-columns:24px minmax(0,1fr);gap:7px}
  .msg-row.mine{grid-template-columns:minmax(0,1fr) 24px}
  .conv-chat-input{gap:6px;padding:8px 9px}
  .conv-chat-input > .msg-voice,
  .conv-chat-input > .msg-attach,
  .conv-chat-input > .msg-send{flex-basis:34px;width:34px;height:34px}
  .conv-chat-input .msg-composer{height:36px;min-height:36px;max-height:78px;padding:7px 11px}
}

@media (max-width:520px){
  .conv-chat-header{flex-wrap:wrap;row-gap:5px}
  .conv-chat-header .dm-header-action{margin-left:0}
  .conv-chat-header .dm-mini-action span{display:none}
  .conv-chat-input > .msg-voice,
  .conv-chat-input > .msg-attach,
  .conv-chat-input > .msg-send{flex-basis:32px;width:32px;height:32px}
  .conv-chat-input .msg-composer{height:34px;min-height:34px;padding:6px 10px}
  .msg-row{max-width:96%}
  .msg-actions{gap:4px}
  .msg-action-btn{font-size:10px;padding:2px 3px}
}


.leaderboard-subtitle{font-size:11.5px;margin:-4px 0 8px;}
.leaderboard-empty{font-size:12.5px;margin:4px 0 0;}
.leader-rgb-star{display:inline-block;font-size:17px;line-height:1;background:linear-gradient(90deg,#ff3b30 0%,#ff9500 18%,#ffd60a 34%,#34c759 50%,#00c7be 66%,#0a84ff 82%,#af52de 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:leaderRgbStar 2s linear infinite;filter:drop-shadow(0 0 5px rgba(175,82,222,.25));}
.leader-count .leader-rgb-star{font-size:13px;vertical-align:-1px;}
@keyframes leaderRgbStar{0%{background-position:0% 50%}100%{background-position:220% 50%}}