/* layout.css — page-level structure shared by both views. */

html {
  background: var(--color-bg);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app {
  min-height: 100vh;
}

.view {
  min-height: 100vh;
}

.view[hidden] {
  display: none;
}

/* ---- Thread view: three-column layout ---- */

#thread-view {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr var(--indicator-width);
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  height: 100vh;
  padding: var(--space-xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--color-border);
  min-height: 0;
}

.reply-stream {
  height: 100vh;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.nav-indicator {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Focus ring for keyboard users (accessibility floor) ---- */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---- Responsive: collapse the extra columns on narrow viewports ---- */

@media (max-width: 900px) {
  #thread-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
  }

  .sidebar {
    height: auto;
    max-height: 46vh;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-md) var(--space-sm);
  }

  .op-panel {
    min-height: 0;
  }

  /* Legend stays available on mobile, but as a compact icon-only strip
     pinned to the bottom-left corner so it never competes with the OP
     comment for space. */
  .legend {
    position: fixed;
    left: var(--space-sm);
    bottom: var(--space-sm);
    z-index: 20;
    flex-direction: row;
    gap: var(--space-2xs);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 6px;
    box-shadow: var(--shadow-panel);
  }

  .legend__item {
    padding: 6px;
    border-radius: 50%;
  }

  .legend__item span:not(.legend__icon) {
    display: none; /* icon-only on mobile — labels come back via title="" tooltip */
  }

  .reply-stream {
    height: 100%;
  }

  .nav-indicator {
    display: none;
  }

  .embed-viewer__panel {
    width: 100%;
  }
}