:root {
  --conversation-index-gap: var(--space-3);
  --conversation-index-inset: var(--size-48);
  --conversation-index-heading-font: var(--font-type-heading-small);
  --conversation-index-empty-padding: var(--space-6) 0;
  --conversation-index-focus-outline: var(--focus-width) solid var(--color-focus-ring);
}

.application-shell:has(.conversation-index) {
  --shell-rail: var(--conversation-index-inset);
  background: var(--color-background);
}
#page-content:has(> .conversation-index) { padding: 0; }
.conversation-index { min-inline-size: 0; }
.conversation-index > .index-layout {
  --index-layout-width: none;
  --index-layout-inset: calc(var(--conversation-index-inset) / 2) var(--conversation-index-inset) var(--conversation-index-inset);
}
.conversation-index .data-table { --table-width: none; }
.conversation-index .index-layout__footer { justify-content: flex-end; }

@media (max-width: 600px) {
  .application-shell:has(.conversation-index) { --conversation-index-inset: var(--space-4); }
}
.conversation-index__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--conversation-index-gap);
  inline-size: 100%;
  margin: 0;
}
.conversation-index__filters > * { min-inline-size: 0; max-inline-size: 100%; }
.conversation-index__link { color: var(--color-link); text-underline-offset: var(--space-1); }
.conversation-index__link:focus-visible { outline: var(--conversation-index-focus-outline); outline-offset: var(--focus-offset); }
.conversation-index__empty { display: grid; gap: var(--conversation-index-gap); padding: var(--conversation-index-empty-padding); }
.conversation-index__empty h2 { margin: 0; font: var(--conversation-index-heading-font); }
.conversation-index__empty p { margin: 0; color: var(--color-muted-foreground); }