/* ============================================================
 * TNT STUDIO — social app shell
 * Used by feed / reels / messages / friends pages.
 * Provides left-sidebar + main + right-sidebar 3-col layout.
 * ============================================================ */

.app-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 320px;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  min-height: calc(100vh - 80px);
  position: relative;
  z-index: 2;
}

/* Sidebars share the same panel aesthetic */
.app-side {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(14,14,28,.82), rgba(6,6,15,.92));
  border: 1px solid rgba(138,99,240,.16);
  box-shadow: 0 20px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
}

.app-side::-webkit-scrollbar { width: 6px; }
.app-side::-webkit-scrollbar-thumb { background: rgba(138,99,240,.4); border-radius: 999px; }

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

/* Nav link list (left sidebar) */
.side-nav { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.side-nav li a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  color: #b8b8d0; font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: all .25s ease;
  position: relative; overflow: hidden;
}
.side-nav li a i { width: 20px; text-align: center; font-size: 1rem; color: #ff6b1a; }
.side-nav li a:hover {
  background: rgba(138,99,240,.08);
  border-color: rgba(138,99,240,.25);
  color: #fff;
}
.side-nav li a.active {
  background: linear-gradient(135deg, rgba(138,99,240,.18), rgba(0,229,255,.08));
  border-color: rgba(0,229,255,.35);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 24px rgba(138,99,240,.18);
}
.side-nav li a.active i { color: #ffb84d; }
.side-nav li a .badge {
  margin-left: auto;
  background: #ff4526; color: #fff; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; padding: 2px 7px;
  box-shadow: 0 0 12px rgba(255,62,165,.5);
}

.side-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffb84d;
  margin: 18px 4px 10px;
  display: flex; align-items: center; gap: 8px;
}
.side-title::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #ffb84d; box-shadow: 0 0 10px rgba(0,229,255,.8);
}

.side-profile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(138,99,240,.14), rgba(0,229,255,.06));
  border: 1px solid rgba(138,99,240,.25);
  margin-bottom: 16px;
}
.side-profile .meta { min-width: 0; }
.side-profile .name {
  font-family: 'Orbitron', sans-serif; font-weight: 700; color: #fff;
  font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-profile .stat {
  color: #ffb84d; font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; letter-spacing: .08em;
}

/* Right sidebar cards */
.widget {
  background: rgba(10,10,22,.72);
  border: 1px solid rgba(138,99,240,.15);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}
.widget h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.widget h3 i { color: #ffb84d; text-shadow: 0 0 10px rgba(0,229,255,.6); }

.widget-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease;
}
.widget-row:hover { background: rgba(138,99,240,.08); }
.widget-row .name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  color: #fff; font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.widget-row .sub {
  color: #ffb84d; font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; letter-spacing: .05em;
}
.widget-row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #70708a; margin-left: auto;
}
.widget-row .dot.online { background: #3af5c5; box-shadow: 0 0 8px rgba(58,245,197,.7); }

/* Generic segmented tab control */
.seg {
  display: inline-flex;
  background: rgba(10,10,22,.7);
  border: 1px solid rgba(138,99,240,.2);
  border-radius: 14px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 18px;
}
.seg button {
  background: transparent; border: none;
  color: #b8b8d0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: .85rem; letter-spacing: .04em;
  transition: all .2s ease;
}
.seg button.active {
  background: linear-gradient(135deg, #ff6b1a, #ffb84d);
  color: #04040b;
  box-shadow: 0 4px 16px rgba(138,99,240,.45);
}
.seg button:not(.active):hover { color: #fff; background: rgba(138,99,240,.1); }

/* Common empty-state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #70708a;
  font-family: 'Space Grotesk', sans-serif;
}
.empty-state i {
  font-size: 3rem;
  background: linear-gradient(135deg, #ff6b1a, #ffb84d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 14px; display: block;
}

/* Skeleton loader */
.skel {
  background: linear-gradient(90deg, rgba(138,99,240,.08), rgba(138,99,240,.18), rgba(138,99,240,.08));
  background-size: 200% 100%;
  animation: skelShift 1.4s ease infinite;
  border-radius: 10px;
}
@keyframes skelShift { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* Mobile layout */
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
  .app-side.right { display: none; }
}
@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; padding: 12px; }
  .app-side.left { display: none; }
  .app-side.right { display: none; }
  .mobile-fab-menu { display: flex !important; }
}

/* Mobile bottom nav for small screens */
.mobile-fab-menu {
  display: none;
  position: fixed; bottom: 16px; left: 16px; right: 16px;
  padding: 10px;
  background: linear-gradient(150deg, rgba(14,14,28,.92), rgba(6,6,15,.96));
  border: 1px solid rgba(138,99,240,.3);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  z-index: 100;
  gap: 6px;
  justify-content: space-around;
  box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 24px rgba(138,99,240,.2);
}
.mobile-fab-menu a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 10px; border-radius: 12px;
  color: #b8b8d0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: .7rem;
  transition: all .2s ease;
}
.mobile-fab-menu a i { font-size: 1.15rem; }
.mobile-fab-menu a.active { color: #ffb84d; background: rgba(0,229,255,.1); }