.chat-header {
  height: auto;
  min-height: 64px;
  overflow: visible;
}

.header-selectors {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: calc(100% - 96px);
  flex: 1 1 auto;
}

.model-button {
  display: grid;
  grid-template-columns: minmax(0, auto) 18px;
  column-gap: 8px;
  text-align: left;
  min-width: 0;
  max-width: 430px;
  flex: 1 1 auto;
}

.model-button strong,
.model-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-button strong {
  align-self: end;
  font-size: 14px;
}

.model-button span {
  grid-column: 1;
  color: var(--muted);
  font-size: 10px;
}

.model-button i {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
}

.mode-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}

.mode-button:hover {
  background: #1b1b1e;
}

.mode-button span,
.mode-button i {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.mode-button strong {
  font-size: 12px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-menu {
  top: 60px;
  left: 292px;
  width: min(430px, calc(100vw - 24px));
  max-height: calc(100vh - 84px);
  overflow: auto;
}

.model-menu > header {
  display: grid;
  gap: 4px;
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
}

.model-menu > header small {
  color: var(--muted);
  font-size: 10px;
}

.model-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  vertical-align: 1px;
}

.model-badge.uncensored {
  border: 1px solid rgba(255, 122, 0, .55);
  color: var(--orange);
  background: rgba(255, 122, 0, .08);
}

.model-trace {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #c9c9cf;
}

@media (max-width: 760px) {
  .chat-header {
    padding-inline: 8px;
  }

  .header-selectors {
    flex: 1;
    max-width: calc(100% - 44px);
  }

  .model-button {
    min-width: 0;
    max-width: none;
  }

  .model-button span {
    display: none;
  }

  .mode-button span {
    display: none;
  }

  .mode-button {
    padding-inline: 8px;
  }

  .mode-button strong {
    max-width: 58px;
  }

  .model-menu {
    left: 12px;
  }
}