html {
  overscroll-behavior: none;
}

body {
  --topbar-height: 48px;
  --sp-sidebar-width: 220px;
  --sp-sidebar-collapsed-width: 48px;
  --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);
  display: flex;
  align-items: center;
  padding-inline: var(--inline-space);
  gap: var(--inline-space);
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

#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: "IBM Plex Sans", var(--font-family);
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}

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

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

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

.sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 7px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  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: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
}

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

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);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-left: 1px solid rgba(255,255,255,0.06);

  /* Force dark oklch color tokens for all child components */
  --lch-black:       100% 0 0;
  --lch-white:       0% 0 0;
  --lch-gray:        25.2% 0 0;
  --lch-gray-dark:   30.12% 0 0;
  --lch-gray-darker: 44.95% 0 0;
  --lch-blue:        72.25% 0.16 248;
  --lch-blue-light:  28.11% 0.053 248;
  --lch-blue-dark:   42.25% 0.07 248;
  --lch-red:         73.8% 0.184 29.18;
  --lch-green:       75% 0.21 141.89;
}

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

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


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

body.chat-collapsed .chat-collapse-btn {
  left: -24px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
}

#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;
}