/* The width toggle only makes sense once the viewport exceeds the cap. Below it
   the page/sheet already run full-bleed via min(content-width, 100%) — and above
   it the gutters grow from 0 as the capped content centers, so they appear
   exactly when this toggle does, with no jump. */
@media (max-width: 980px) {
  .expand-toggle {
    display: none;
  }
}

.settings-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 30;
  min-width: 168px;
  padding: var(--space-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.settings-item {
  display: flex;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  text-align: left;
}

.settings-item:hover,
.settings-item:focus-visible {
  background: var(--soft);
  outline: 0;
}

/* The in-menu Search row only appears on narrow screens, where the standalone
   search button folds away (see the 560px breakpoint) to free up the topbar
   for breadcrumbs. */
.settings-item-search {
  display: none;
}

.bubble {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.bubble.response {
  box-shadow: none;
}

.fallacy-dim {
  opacity: 0.3;
  transition: opacity 0.15s ease;
}

.fallacy-dim:hover {
  opacity: 1;
}

.thread-panel {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.graph-panel {
  display: grid;
  min-height: 320px;
  place-items: center;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.graph-panel .structure-sketch {
  width: min(100%, 520px);
}

.fallacy-count {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.6;
}

.fallacy-count:hover,
.fallacy-count.is-active {
  color: var(--clay);
  opacity: 1;
}

.bubble p:not(.byline) {
  color: var(--muted);
  font-family: var(--font-reading);
  line-height: var(--line-reading);
  white-space: pre-wrap;
}

.byline {
  margin: var(--space-4) 0 0;
  color: var(--green);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 760;
}

.bubble-block {
  display: grid;
  gap: var(--space-2);
}

.bubble-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--space-1);
}

.bubble-meta:empty {
  display: none;
}

.meta-label {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: var(--line-ui);
  opacity: 0.6;
}

.bubble-meta .fallacy-count {
  margin: 0 0 0 auto;
}

.placeholder {
  padding: var(--space-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-family: var(--font-reading);
  line-height: 1.45;
}

.back-row {
  margin-bottom: var(--space-5);
}

@media (max-width: 780px) {
  /* Collapse the search trigger to its icon, but pin its height so the topbar
     stays the same height through the text → icon transition. */
  .search-trigger {
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 0;
  }

  .search-trigger-label {
    display: none;
  }

  .search-palette {
    padding: 0;
  }

  .search-dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
  }

  /* Make the input row a topbar-height header so its divider continues the
     header line the search overlay sits on top of. */
  .search-input-row {
    height: var(--topbar-height);
    padding: 0 var(--space-4);
  }

  .search-dialog .search-results,
  .search-dialog .search-empty {
    padding: var(--space-4);
  }

  .profile {
    display: none;
  }

  .home-intro {
    grid-template-columns: 1fr;
  }

  .home-copy {
    margin-bottom: 0;
    text-align: left;
    transform: none;
  }

  .room-header {
    grid-template-columns: 1fr;
  }

  .idea-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .room-header {
    align-items: start;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-heading.section-heading-with-action,
  .section-heading.section-heading-collapsible,
  /* Title-only group heading (e.g. "My Stuff"): nothing to stack, so keep it
     centered in its reserved 32px row — flipping to column tops-aligns the title
     and jumps it ~5px. */
  .dashboard-group > .section-heading {
    align-items: center;
    flex-direction: row;
  }

  .space-title-row {
    align-items: flex-start;
  }

  .idea-row .btn,
  .episode-row .btn,
  .room-header .btn {
    width: 100%;
  }

  .episode-title-row {
    align-items: flex-start;
  }

  .crumbs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .crumbs::-webkit-scrollbar {
    display: none;
  }

  .crumbs span,
  .crumbs button {
    flex: 0 0 auto;
  }

  .crumbs button {
    max-width: 190px;
  }

}

@media (max-width: 560px) {
  .page:has(.composer) {
    padding-inline: var(--space-3);
  }

  .composer .compose-card {
    padding-inline: var(--space-2);
  }

  /* Fold Search into settings so breadcrumbs get the full topbar. */
  .topbar-search {
    display: none;
  }

  .settings-item-search {
    display: flex;
  }
}