murashit_codex-panel/src/styles/40-threads-view.css

.codex-panel-threads {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--codex-panel-text-normal);
  font-family: var(--font-interface);
}

.codex-panel-threads__status,
.codex-panel-threads__empty {
  color: var(--codex-panel-text-muted);
  font-size: var(--font-ui-smaller);
  line-height: var(--line-height-tight);
}

.codex-panel-threads__empty {
  box-sizing: border-box;
  min-height: var(--codex-panel-size-nav-item);
  padding: var(--nav-item-padding, var(--codex-panel-control-gap) var(--codex-panel-item-gap));
  color: var(--codex-panel-text-faint);
  font-size: var(--font-ui-small);
}

.codex-panel-threads__toolbar {
  flex: 0 0 auto;
}

.codex-panel-threads__list {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--nav-item-margin-bottom, var(--codex-panel-panel-gap));
  min-height: 0;
  padding: var(--size-4-1) var(--size-4-3);
  overflow: auto;
}

.codex-panel-threads__row {
  grid-template-columns: minmax(0, 1fr) 0;
  gap: 0;
  text-align: start;
}

.codex-panel-threads__row:hover,
.codex-panel-threads__row:focus-within {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--codex-panel-panel-gap);
}

.codex-panel-threads__row-main {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  --codex-panel-threads-row-title-color: currentcolor;
}

.codex-panel-threads__row-main::before {
  position: absolute;
  top: var(--codex-panel-control-gap);
  bottom: var(--codex-panel-control-gap);
  left: var(--codex-panel-section-gap);
  width: var(--codex-panel-rail-width);
  content: "";
}

.codex-panel-threads__row-main,
.codex-panel-threads__row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.codex-panel-threads__row-title {
  display: block;
  color: var(--codex-panel-threads-row-title-color);
  font-size: var(--font-ui-small);
  font-weight: var(--nav-item-weight, var(--font-normal));
  line-height: var(--line-height-tight);
}

.codex-panel-threads__row--selected {
  --codex-panel-threads-row-title-color: var(--nav-item-color-active, var(--text-normal));
}

.codex-panel-threads__row--selected .codex-panel-threads__row-title {
  color: var(--nav-item-color-active, var(--text-normal));
  font-weight: var(--nav-item-weight-active, var(--font-medium));
}

.codex-panel-threads__row-main:hover .codex-panel-threads__row-title,
.codex-panel-threads__row-main:focus .codex-panel-threads__row-title {
  color: var(--nav-item-color-hover, var(--text-normal));
}

.codex-panel-threads__row--pending {
  --codex-panel-threads-gutter-color: color-mix(in srgb, var(--codex-panel-color-warning) 72%, transparent);
}

.codex-panel-threads__row--running {
  --codex-panel-threads-gutter-color: color-mix(in srgb, var(--codex-panel-color-accent) 68%, transparent);
}

.codex-panel-threads__row--open {
  --codex-panel-threads-gutter-color: var(--codex-panel-border-muted-color);
}

.codex-panel-threads__row--pending::before,
.codex-panel-threads__row--running::before,
.codex-panel-threads__row--open::before {
  background: var(--codex-panel-threads-gutter-color);
}

.codex-panel-threads__row--renaming {
  cursor: default;
}

.codex-panel-threads__row--renaming .codex-panel-ui__nav-row-action {
  padding: var(--codex-panel-panel-gap);
}

.codex-panel-threads__actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  width: 0;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

.codex-panel-threads__row:hover .codex-panel-threads__actions,
.codex-panel-threads__row:focus-within .codex-panel-threads__actions {
  gap: var(--codex-panel-item-gap);
  width: auto;
  overflow: visible;
  pointer-events: auto;
  opacity: 1;
}

.codex-panel-threads__rename-form {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: var(--nav-item-size, var(--codex-panel-size-nav-item));
  padding-right: calc(var(--codex-panel-size-icon-s) + var(--codex-panel-panel-gap) * 2 + var(--codex-panel-item-gap));
}

.codex-panel-threads__rename-field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  min-height: var(--nav-item-size, var(--codex-panel-size-nav-item));
  overflow: visible;
  font-size: var(--font-ui-small);
  font-weight: var(--nav-item-weight, var(--font-normal));
  line-height: var(--line-height-tight);
}

.codex-panel-threads__rename-actions {
  gap: var(--codex-panel-item-gap);
  width: auto;
  overflow: visible;
  pointer-events: auto;
  opacity: 1;
}

.codex-panel-threads__row--archive-confirming .codex-panel-threads__actions {
  gap: var(--codex-panel-item-gap);
  width: auto;
  overflow: visible;
  pointer-events: auto;
  opacity: 1;
}

.codex-panel-threads__row--archive-confirming {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--codex-panel-panel-gap);
}

.codex-panel-threads__rename-input {
  flex: 1 1 auto;
  line-height: var(--line-height-tight);
}