.app-shell.app-fluid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 321px;
  grid-template-rows: auto auto;
  gap: 0 0;
  align-items: start;
  width: 100%;
  min-width: 0;

  max-width: none;
  height: auto;
  min-height: 100vh;
  margin: 0;
  transform: none;

  transition: grid-template-columns 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-shell.app-fluid .topbar {
  position: sticky;
  z-index: 20;
  grid-column: 1 / -1;
  grid-row: 1;
  left: auto;
  top: 0;
  width: 100%;

  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 15px;
}

.app-shell.app-fluid .topbar > .brand,
.app-shell.app-fluid .topbar > .mode-switch,
.app-shell.app-fluid .topbar > .wallet-pill,
.app-shell.app-fluid .topbar > .top-actions {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  transform: none;
  flex: 0 0 auto;
  min-width: 0;
}

.app-shell.app-fluid .topbar > .mode-switch {
  /* Ustteki `static` sifirlamasi kayan camin tutunacagi kutuyu da alip
     goturuyordu -- akista yeri ayni, ama konumlanmis kaliyor. */
  position: relative;
  flex: 0 1 auto;
  overflow: hidden;
}

.app-shell.app-fluid .topbar > .wallet-pill {
  margin-inline: auto;
}

.app-shell.app-fluid .topbar > .top-actions {
  margin-left: auto;
}

.app-shell.app-fluid .sidebar {
  position: sticky;
  grid-column: 1;
  grid-row: 2;
  left: auto;
  /* Flush under the topbar (83px). It used to stick at 97px, which left a 14px
     band of the page backdrop between header and rail — a thin off-colour strip
     above the Telegram/spin banners. The rail owns that strip now, in --shell-bg. */
  top: 83px;
  height: calc(100vh - 83px);
  align-self: start;
  justify-self: start;
  overflow: hidden;
  /* Header and rail share one surface so they read as one chrome; themes that
     set no --shell-bg keep the see-through rail over the page backdrop. */
  background: var(--shell-bg, transparent);
}

.app-shell.app-fluid .content {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  left: auto;
  top: auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  overflow-x: clip;
  overflow-y: visible;
  transition: margin-right 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 769px) {
  /* Dört yandan aynı hava. Üstteki boşluk padding değil margin: bu kural
     `padding-top: 0` diyor ve ana sayfa dahil her sayfanın ilk çocuğu onu
     kendi marjıyla alıyor (mobile-header araya girerse bir sonraki). */
  .app-shell.app-fluid > .content {
    --content-pad: clamp(18px, 3.36vw, 67px);
    padding-top: 0px;
    padding-bottom: var(--content-pad);
  }

  .app-shell.app-fluid > .content:not(.home-content) {
    padding-inline: var(--content-pad);
  }

  .app-shell.app-fluid > .content > :first-child,
  .app-shell.app-fluid > .content > .mobile-header + * {
    margin-top: var(--content-pad);
  }

  /* The content pane is its OWN scroller on desktop, not a slab of a scrolling
     page. Its rounded top corners are chrome — they used to ride up under the
     topbar and vanish on the first wheel tick. Now the frame stays put and only
     what is inside it moves. Sidebar and chat rail no longer need their sticky
     to hold: the document itself no longer scrolls at this width. */
  .app-shell.app-fluid > .content {
    height: calc(100vh - 83px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Çubuğun rengi BURADA YAZILMIYOR: tek yer `base.css`teki genel kural
       (siyah oluk, kırmızı tutamak). Buradaki `--accent-a30` kopyası panoyu
       tema kırmızısının %30'una boyuyordu — sağ kenarda sönük, gri bir şerit. */
  }

  /* Behind the content pane's rounded top corners sat the page backdrop (--bg
     plus its glow), not the chrome — a lighter, faintly red notch where header
     and rail meet the pane. This unpositioned grid item sits in the same cell
     and paints under .content (which is positioned), filling that notch with
     the same surface the topbar and rail use. */
  .app-shell.app-fluid::after {
    content: "";
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    justify-self: stretch;
    height: var(--r-2xl);
    background: var(--shell-bg, transparent);
  }
}

.app-shell.app-fluid .chat-panel {
  position: sticky;
  grid-column: 3;
  grid-row: 2;
  right: auto;
  top: 83px;
  width: auto;
  height: calc(100vh - 83px);
  max-height: calc(100vh - 83px);
  align-self: start;
  justify-self: stretch;
  align-items: flex-end;
  border-radius: var(--r-xl) 0 0 0;
  transition: opacity 0.28s ease;
}

.app-shell.app-fluid .chat-panel > .mobile-chat {
  flex: 0 0 auto;
  width: 321px;
  height: 100%;
}

.app-shell.app-fluid.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr) 321px;
}

.app-shell.app-fluid.sidebar-collapsed .content {
  left: auto;
  width: auto;
}

html.chat-collapsed .app-shell.app-fluid {
  grid-template-columns: 280px minmax(0, 1fr) 0px;
}

html.chat-collapsed .app-shell.app-fluid.sidebar-collapsed {
  grid-template-columns: 64px minmax(0, 1fr) 0px;
}

html.chat-collapsed .app-shell.app-fluid > .chat-panel {
  opacity: 0;
  pointer-events: none;
}

.chat-panel .mobile-chat-close svg {
  transform: rotate(-90deg);
}

.icon-button.chat-toggle svg {
  width: 24px;
  height: 24px;
}

.icon-button.chat-toggle[aria-pressed="true"] {
  color: var(--accent-light);
  background: var(--accent-a12);
  box-shadow: 0 0 0 1px var(--accent-a30), var(--shadow-accent);
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.app-fluid,
  .app-shell.app-fluid .content,
  .app-shell.app-fluid .chat-panel {
    transition: none;
  }
}

.top-actions .icon-button .notification-badge.is-ping {
  background: var(--spring);
  color: var(--black);
}

@media (max-width: 1700px) {
  .icon-button.chat-toggle {
    display: none;
  }
}

@media (max-width: 1700px) {
  .app-shell.app-fluid {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .app-shell.app-fluid.sidebar-collapsed {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .app-shell.app-fluid .chat-panel {
    display: none;
  }
}

@media (max-width: 950px) {
  .app-shell.app-fluid,
  .app-shell.app-fluid.sidebar-collapsed,
  html.chat-collapsed .app-shell.app-fluid {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-shell.app-fluid .sidebar {
    display: none;
  }
}

.app-shell.app-fluid > .content > .mobile-header {
  display: none;
}

@media (max-width: 768px) {
  .app-shell.app-fluid {
    display: block;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

  }

  .app-shell.app-fluid > .topbar,
  .app-shell.app-fluid > .sidebar,
  .app-shell.app-fluid > .chat-panel {
    display: none;
  }

  .app-shell.app-fluid > .content {
    gap: 0;
    min-height: 0;
    padding: 0 0 112px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .app-shell.app-fluid > .content > .mobile-header {
    display: block;
  }
}

.app-shell.app-fluid .home-content > .site-footer {
  margin-top: 40px;
}