html {
  overscroll-behavior: none;
}

body {
  --topbar-height: 48px;
  --sp-sidebar-width: 220px;
  --sp-sidebar-collapsed-width: 0px;
  --sp-screens-width: 0px;   /* hidden by default */
  --footer-height: calc((var(--block-space)) + 3.6em + var(--block-space));

  display: grid;
  grid-template-areas:
    "topbar  topbar  topbar"
    "sidebar chat    screens";
  grid-template-columns: var(--sp-sidebar-width) 1fr var(--sp-screens-width);
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100dvh;
  max-block-size: 100dvh;
  overflow: hidden;
  transition: grid-template-columns 0.25s ease;
}

/* Collapsed sidebar */
body.sidebar-collapsed {
  --sp-sidebar-width: var(--sp-sidebar-collapsed-width);
}

/* Screens panel open — screens takes majority of space; sidebar controlled independently */
body.screens-open {
  grid-template-columns: var(--sp-sidebar-width) 1fr 2fr;
}

/* ── Mobile / narrow viewport ───────────────────────── */
@media (max-width: 700px) {
  body {
    --sp-sidebar-width: var(--sp-sidebar-collapsed-width);
    grid-template-areas:
      "topbar  topbar"
      "sidebar chat";
    grid-template-columns: var(--sp-sidebar-collapsed-width) 1fr;
  }

  /* Screens panel stacks above chat on mobile */
  body.screens-open {
    grid-template-areas:
      "topbar   topbar"
      "screens  screens"
      "sidebar  chat";
    grid-template-columns: var(--sp-sidebar-collapsed-width) 1fr;
    grid-template-rows: var(--topbar-height) 1fr 1fr;
  }

  #screens {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ── Topbar ─────────────────────────────────────────── */
#topbar {
  grid-area: topbar;
  background-color: var(--bg-topbar, #1a1a24);
  display: flex;
  align-items: center;
  padding-inline: var(--inline-space);
  gap: var(--inline-space);
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--border);
}

#screenpods-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
  padding-inline-end: var(--inline-space);
}

.screenpods-logo__wordmark {
  font-family: "Baloo 2", "IBM Plex Sans", var(--font-family), sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.screenpods-logo__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary);
  flex-shrink: 0;
}

#nav {
  grid-area: unset;
  display: flex;
  align-items: center;
  gap: var(--inline-space-half);
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
}

/* ── Sidebar ────────────────────────────────────────── */
#sidebar {
  grid-area: sidebar;
  background-color: var(--bg-sidebar, #111113);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  border-right: 1px solid var(--border);
}

.sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--bg-tinted);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.sidebar-collapse-btn:hover {
  background: var(--border);
  color: var(--text-primary);
}

.sidebar-collapse-btn__icon {
  transition: transform 0.2s ease;
}

body.sidebar-collapsed .sidebar-collapse-btn__icon {
  transform: rotate(180deg);
}

body.sidebar-collapsed #sidebar {
  overflow: hidden;
}

/* Hide sidebar text content when collapsed */
body.sidebar-collapsed .sidebar__container,
body.sidebar-collapsed .sidebar__tools,
body.sidebar-collapsed .sidebar-footer {
  opacity: 0;
  pointer-events: none;
}

/* ── Chat/Screens drag resizer ──────────────────────── */
#chat-screens-resizer {
  display: none;
  grid-area: chat;
  align-self: stretch;
  justify-self: end;
  width: 6px;
  margin-inline-end: -3px;
  cursor: col-resize;
  z-index: 20;
  position: relative;

  &::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 2px;
    margin: auto;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.15s;
  }

  &:hover::after {
    background: rgba(255, 255, 255, 0.3);
  }
}

body.screens-open #chat-screens-resizer {
  display: block;
}

/* ── Chat panel (center, primary) ───────────────────── */
#main-content {
  grid-area: chat;
  background-color: var(--bg-panel, #16161f);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-left: 1px solid var(--border);
}

/* ── Screens panel (right, collapsible) ─────────────── */
#screens {
  grid-area: screens;
  background-color: var(--bg-screens, #0e0e14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-left: 1px solid var(--screens-border);
}

/* Hide screens content when collapsed */
body:not(.screens-open) #screens {
  overflow: hidden;
}



/* ── Chat panel collapsed ───────────────────────────── */
/* Chat panel collapsed — column width drops to 0 */
body.chat-collapsed {
  grid-template-columns: var(--sp-sidebar-width) 0px var(--sp-screens-width);
}

body.screens-open.chat-collapsed {
  grid-template-columns: var(--sp-sidebar-width) 0px 1fr;
}

body.chat-collapsed #main-content {
  overflow: visible;
}

body.chat-collapsed #chat-screens-resizer {
  display: none;
}


#footer {
  /* inside main-content flex flow */
}

/* ── Skip nav ───────────────────────────────────────── */
.skip-navigation {
  --left-offset: -999em;

  inset-block-start: 4rem;
  inset-inline-start: var(--left-offset);
  position: absolute;
  white-space: nowrap;
  z-index: 11;

  &:focus {
    --left-offset: var(--inline-space);
  }
}

/* ── Flash ──────────────────────────────────────────── */
.flash {
  position: fixed;
  inset: auto var(--inline-space) var(--block-space) auto;
  z-index: 20;
}