/* Filled message surfaces carry their own state. Keep the transparent border
   footprint so selection and keyboard focus never shift the list geometry. */
.app-shell.mode-messages .conversation-item,
.app-shell.mode-messages .conversation-item:hover,
.app-shell.mode-messages .conversation-item.selected,
.app-shell.mode-messages .conversation-item.selected:hover {
  border-color: transparent;
}

.app-shell.mode-messages .conversation-item:not(.selected):hover {
  background: var(--surface-soft);
}

.app-shell.mode-messages .conversation-item.selected,
.app-shell.mode-messages .conversation-item.selected:hover {
  background: var(--selected);
  color: var(--ink);
}

/* Focus is an interaction cue, separate from the persistent selected fill. */
.app-shell.mode-messages .conversation-item:focus-visible {
  outline: 2px solid var(--functional);
  outline-offset: 2px;
}

/* The search surface already has a grey fill. Use one outer keyboard ring
   instead of adding a dark inner stroke to the same rounded container. */
.app-shell.mode-messages .search-wrap,
.app-shell.mode-messages .search-wrap:focus-within {
  border-color: transparent;
  background: var(--surface-soft);
}

.app-shell.mode-messages .search-wrap:has(input:focus-visible) {
  outline: 2px solid var(--functional);
  outline-offset: 2px;
}